@font-face{font-family:LlogaritWordmark;src:url("brand/Roboto-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
/* Shared application chrome and homepage alignment to the Bilanc reference.
   The 48px toolbar, 200px sidebar and canvas geometry must not change on navigation.
   Only shell selectors are shared; flowchart styles remain scoped to #home.
   Llogarit assets, route handlers, account screens and category forms are unchanged. */
@media screen {
  #app > .side {display:flex;flex-direction:column;padding-top:48px;}
  #app > .side::before {content:"";position:absolute;top:0;left:0;right:0;height:48px;background:#116b5d;}
  #app > .side .nav {flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;border-top:0;}

  #app > .side .brand {
    position:absolute;top:0;left:0;right:0;height:48px;background:transparent;border:0;z-index:1;
  }
  #app > .side .brandHome {justify-items:start;padding-left:23px;}
  #app > .side .headerWordmark {display:flex;align-items:center;gap:7px;height:30px;color:#fff;font:500 22px/1 LlogaritWordmark,Arial,sans-serif;letter-spacing:-.35px;}
  #app > .side .brand .headerWordmark img {width:25px;height:26px;filter:brightness(0) invert(1);object-fit:contain;}

  #app > .side .nav button {
    font-family:Arial,sans-serif;border-radius:0;color:#304b50;
  }
  #app > .side .nav .group::after {
    content:none;
  }
  #app > .top {
    background:#116b5d;font-family:Arial,sans-serif;
  }
  #app > .top .company {
    font-size:21px;font-weight:400;max-width:calc(100% - 540px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  #app > .top button {
    font-family:Arial,sans-serif;border-radius:0;
  }
  #app > .top .shortcut {
    font-size:13px;
  }
  #app > .main {
    background:#f4f7f6;
  }
  #home {
    color:#173e38;font-family:Arial,sans-serif;
  }
  #home .title {
    font-size:28px;font-weight:400;
  }
  #home .workspace {
    width:720px;grid-template-columns:350px 350px;gap:20px;margin:7px auto;
  }
  #home .flow {
    height:502px;border:1px solid #cbded7;border-radius:12px;background:#fff;box-shadow:0 4px 16px #173e3808;
  }
  #home .flow.sup {
    border-color:#d8e1df;
  }
  #home .flow h2 {
    color:#116b5d;font:400 25px Arial,sans-serif;
  }
  #home .flow.sup h2 {
    color:#48635d;
  }
  #home .flowLinks {
    color:#76a99a;
  }
  #home .flow.sup .flowLinks {
    color:#94aaa3;
  }
  #home .flowLinks path {
    opacity:.45;
  }
  #home .node {
    height:32px;background:#fff;color:#254b42;font:13px Arial,sans-serif;
    border:1px solid #dce6e2;border-radius:6px;padding:0 10px;box-shadow:0 2px 4px #173e3810;
  }
  #app > .side {border-right-color:#dce5e1;}
  #app > .side .nav {border-top-color:#e5ece9;}
  #app > .side .nav .group, #app > .side .nav .home {border-bottom-color:#e5ece9!important;}
  #app > .side .nav button:hover {background:#edf5f1;color:#116b5d;}
  #home .node:hover {background:#edf5f1;border-color:#8cb9a9;outline-color:#116b5d;}
  #home .node:focus-visible {outline:2px solid #116b5d;outline-offset:3px;}
}