@font-face{font-family:MacroInter;src:url('/brand/inter-regular.ttf') format('truetype');font-weight:400 500;font-display:swap}
@font-face{font-family:MacroInter;src:url('/brand/inter-bold.ttf') format('truetype');font-weight:600 800;font-display:swap}
:root{font-family:MacroInter,Inter,'Segoe UI',sans-serif;--bg:#f1f5f9;--surface:#fff;--text:#111827;--muted:#526174;--line:#dce5eb;--accent:#007a3d;--selected:#eaf8f0;--brand-green:#00c853}
html[data-theme=dark]{--bg:#101820;--surface:#17242b;--text:#f1f5f9;--muted:#b0c4bd;--line:#31463f;--accent:#00c853;--selected:#173c2b}
body,#sidebar{font-family:MacroInter,Inter,'Segoe UI',sans-serif}
.button:not(.secondary),button.primary{background:linear-gradient(120deg,#00c853,#007a3d);border-color:#007a3d;color:#fff;border-radius:7px}
.button.secondary{background:var(--surface);border-color:var(--line);color:var(--text);border-radius:7px}
.button:hover{filter:brightness(.96)}
.panel{border-radius:10px;border-color:var(--line)}
#sidebar .brand{height:58px;gap:0;padding:0;display:flex;align-items:center;justify-content:flex-start;background:#fff;border-radius:7px}
#sidebar .brand img.macrotop-full{display:block;width:100%;height:auto;max-height:58px;object-fit:contain}
#sidebar .brand img.macrotop-mark{display:none;width:38px;height:42px;object-fit:contain}
html[data-collapsed=true] #sidebar .brand img.macrotop-full{display:none}
html[data-collapsed=true] #sidebar .brand img.macrotop-mark{display:block}
#navigation a.active,.project-nav-group summary.selected{background:var(--selected);color:var(--accent)}
.project-nav-items a.active{box-shadow:inset 3px 0 #00c853}
.login-brand-panel{background:linear-gradient(145deg,#fff 25%,#f1f5f9 65%,#e1f6e9)}
.login-brand-panel .brand{display:block;width:260px;max-width:100%;padding:0}
.login-brand-panel .brand img{display:block;width:100%;height:auto}
.login-page{color:#111827;font-family:MacroInter,Inter,'Segoe UI',sans-serif}
.login-submit{background:linear-gradient(120deg,#00c853,#007a3d)!important}
@media(max-width:650px){#sidebar .brand img.macrotop-full{display:none}#sidebar .brand img.macrotop-mark{display:block}html.sidebar-expanded #sidebar .brand img.macrotop-full{display:block}html.sidebar-expanded #sidebar .brand img.macrotop-mark{display:none}}

/* Align navigation icon centres with the lower point of the full brand mark. */
@media(min-width:651px){html:not([data-collapsed=true]) #sidebar #navigation,html:not([data-collapsed=true]) #sidebar .bottom{padding-left:5px}}
@media(max-width:650px){html.sidebar-expanded #sidebar #navigation,html.sidebar-expanded #sidebar .bottom{padding-left:5px}}