/* Shared shell: grouped menu, page header, infographic building blocks. Loaded after app.css on every page. */
body.app-page { background:#f4f8f6; }
.shell { grid-template-columns:272px minmax(0,1fr); }
.sidebar { padding:0; gap:0; background:linear-gradient(185deg,#0b2a22 0%,#0f3a2f 60%,#0d3027 100%); border-right:1px solid rgba(94,224,172,.08); }
.sidebar .brand { display:flex; margin:0; padding:22px 20px 18px; text-decoration:none; border-bottom:1px solid rgba(94,224,172,.10); }
.sidebar .brand:hover .brand-mark { transform:rotate(-4deg) scale(1.04); }
.brand-mark { transition:transform .18s ease; }
.nav-scroll { flex:1; overflow-y:auto; padding:14px 12px 10px; }
.nav-item { display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:9px; color:#c6ded4; text-decoration:none; font-size:13px; font-weight:600; line-height:1.3; border-left:3px solid transparent; transition:background-color .14s ease,color .14s ease; position:relative; }
.nav-item:hover { background:rgba(94,224,172,.10); color:#fff; }
.nav-item.active { background:linear-gradient(90deg,rgba(94,224,172,.22),rgba(94,224,172,.08)); color:#fff; border-left-color:#5ee0ac; }
.nav-ic { width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:8px; background:rgba(94,224,172,.08); color:#5ee0ac; }
.nav-item.active .nav-ic { background:#5ee0ac; color:#073d2c; box-shadow:0 4px 12px rgba(94,224,172,.3); }
.nav-text { flex:1; min-width:0; }
.nav-ext { color:#7fa89b; font-size:11px; }
.nav-home { margin-bottom:6px; }
.nav-group { margin-top:10px; }
.nav-group-head { width:100%; display:flex; align-items:center; justify-content:space-between; background:transparent; border:0; color:#76a595; font-size:10px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase; padding:9px 12px 7px; cursor:pointer; border-radius:8px; }
.nav-group-head:hover { color:#b9d9cc; }
.nav-chev { display:grid; transition:transform .18s ease; transform:rotate(90deg); }
.nav-group.closed .nav-chev { transform:rotate(0deg); }
.nav-group-body { display:grid; gap:2px; }
.nav-group.closed .nav-group-body { display:none; }
.perm-denied { display:none !important; }
.sidebar-foot { margin-top:0; padding:14px 16px 16px; border-top:1px solid rgba(94,224,172,.12); background:rgba(0,0,0,.14); }
.user-card { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.avatar { width:34px; height:34px; flex:none; border-radius:50%; background:linear-gradient(135deg,#5ee0ac,#2fb583); color:#073d2c; display:grid; place-items:center; font:800 12.5px var(--font-display); }
.avatar.off { background:rgba(255,255,255,.12); color:#a9cabd; }
.user-meta { min-width:0; flex:1; display:grid; }
.user-meta strong { color:#fff; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-meta small { color:#8fb7a8; font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.35; }
.user-btn { border:1px solid rgba(94,224,172,.35); background:transparent; color:#c9efe0; border-radius:8px; font-size:11.5px; font-weight:700; padding:6px 10px; }
.user-btn:hover { background:rgba(94,224,172,.14); }
.foot-line { color:#7fa89b; font-size:10.5px; line-height:1.6; }
.sidebar-foot #last-sync { color:#a9cabd; font-weight:600; }
.role-chip { display:flex; align-items:center; gap:7px; margin:-4px 0 12px; padding:6px 10px; border:1px solid rgba(94,224,172,.25); border-radius:9px; color:#c9efe0; font-size:11.5px; font-weight:700; text-decoration:none; }
.role-chip span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
a.role-chip:hover { background:rgba(94,224,172,.12); color:#fff; }
.role-chip.super { border-color:rgba(94,224,172,.55); background:rgba(94,224,172,.12); color:#d9fff0; }
.role-chip.warn { border-color:rgba(255,196,92,.45); color:#ffe2a8; }
.role-chip.muted { color:#8fb7a8; }

.main { padding:26px 36px 54px; min-width:0; overflow:visible; }
.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:22px; flex-wrap:wrap; margin-bottom:22px; }
.page-head-main { display:flex; align-items:flex-start; gap:12px; min-width:0; flex:1 1 420px; }
.page-head-text { min-width:0; }
.nav-toggle { display:none; border:1px solid var(--line); background:var(--card); border-radius:9px; padding:8px; color:var(--green-dark); }
.crumbs { display:flex; align-items:center; flex-wrap:wrap; gap:4px; font-size:11.5px; color:var(--muted); margin-bottom:8px; }
.crumbs a { color:var(--green-dark); text-decoration:none; font-weight:600; }
.crumbs a:hover { text-decoration:underline; }
.crumbs span:last-child { color:var(--ink); font-weight:700; }
.crumb-sep { display:inline-grid; color:#a7bbb4; }
.page-title { display:flex; align-items:center; gap:12px; }
.page-ic { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#087f5b,#2fb583); box-shadow:0 8px 18px rgba(8,127,91,.28); flex:none; }
.page-head h1 { font:700 25px/1.2 var(--font-display); letter-spacing:-.5px; }
.page-head .subtitle { margin-top:8px; max-width:640px; }
.page-head-side { display:flex; align-items:flex-end; flex-direction:column; gap:10px; }
.head-user { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; color:var(--muted); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:5px 12px 5px 10px; }
.head-user .dot { width:8px; height:8px; border-radius:50%; background:#c4cfcb; }
.head-user .dot.ok { background:#2fb583; box-shadow:0 0 0 3px rgba(47,181,131,.2); }
button.head-user { cursor:pointer; color:var(--ink); transition:border-color .15s, background .15s; }
button.head-user:hover, button.head-user[aria-expanded="true"] { border-color:#b9d3c8; background:#f2f8f5; }
.head-caret { display:inline-flex; transform:rotate(90deg); color:var(--muted); margin-left:1px; }
.head-user-wrap { position:relative; display:inline-flex; }
.head-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:230px; padding:6px; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-lg); }
.head-menu[hidden] { display:none; }
.head-menu-who { display:grid; padding:8px 10px 10px; margin-bottom:4px; border-bottom:1px solid var(--line); }
.head-menu-who strong { font-size:13px; color:var(--ink); }
.head-menu-who small { font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.head-menu a, .head-menu button { display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px; border:0; border-radius:7px; background:none; color:var(--ink); font-size:13px; font-weight:600; text-align:left; text-decoration:none; }
.head-menu a:hover, .head-menu button:hover { background:#f0f6f3; }
.head-menu .danger { color:#b3261e; }
.head-menu .danger:hover { background:#fbe3e1; }
.user-btn.icon { display:grid; place-items:center; width:32px; height:32px; padding:0; flex:none; }
.ic { display:block; }
.kpis { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }

/* Access gate for admin tools */
.gate { display:grid; place-items:center; min-height:50vh; }
.gate-card { max-width:520px; text-align:center; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:38px 34px; box-shadow:var(--shadow); }
.gate-ic { width:62px; height:62px; border-radius:18px; display:inline-grid; place-items:center; background:var(--mint); color:var(--green-dark); margin-bottom:14px; }
.gate-card h2 { font:700 20px var(--font-display); margin-bottom:10px; }
.gate-card p { color:var(--muted); font-size:13px; line-height:1.65; margin-bottom:20px; }
.gate-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.gate-actions .btn { display:inline-flex; align-items:center; gap:7px; text-decoration:none; }
body.page-gated #main > :not(#app-pagehead):not(#app-gate):not(.nav-scrim) { display:none !important; }
body.page-gated #app-actions { display:none !important; }

/* Infographic building blocks (app-charts.js) */
.insights { display:grid; gap:14px; margin-bottom:22px; }
.ins-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.ins-tile { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 17px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; display:grid; gap:4px; align-content:start; min-height:104px; transition:box-shadow .16s ease, transform .16s ease; }
.ins-tile:hover { box-shadow:var(--shadow); transform:translateY(-1px); }
.ins-tile:before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--accent,linear-gradient(90deg,#087f5b,#5ee0ac)); }
.ins-tile .t-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ins-tile .t-label { font-size:11px; font-weight:700; letter-spacing:.3px; color:var(--muted); text-transform:uppercase; }
.ins-tile .t-ic { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--tint,#e3f5ec); color:var(--tone,#087f5b); }
.ins-tile strong { font:700 28px/1.1 var(--font-display); letter-spacing:-.6px; font-variant-numeric:tabular-nums; }
.ins-tile small { color:var(--muted); font-size:11.5px; line-height:1.45; }
.ins-tile .t-delta { font-weight:700; color:var(--tone,#087f5b); }
.ins-tile.warn { --tone:#b45309; --tint:#fdf0dc; --accent:linear-gradient(90deg,#f3a84b,#f8cf8d); }
.ins-tile.bad { --tone:#b3261e; --tint:#fbe3e1; --accent:linear-gradient(90deg,#c85b55,#eba19c); }
.ins-tile.blue { --tone:#2f6fd0; --tint:#e3edfb; --accent:linear-gradient(90deg,#2f6fd0,#8db4ee); }
.ins-tile.violet { --tone:#7a4fc7; --tint:#efe8fb; --accent:linear-gradient(90deg,#8a63d2,#c3a8ee); }
.ins-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:14px; }
.ins-card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px 18px; box-shadow:var(--shadow-sm); min-width:0; }
.ins-card.wide { grid-column:1 / -1; }
.ins-card h4 { margin:0 0 3px; font:700 13.5px var(--font-display); letter-spacing:-.1px; }
.ins-card > p { margin:0 0 13px; color:var(--muted); font-size:11.5px; line-height:1.5; }
.ins-empty { color:var(--muted); font-size:12px; padding:22px 4px; text-align:center; border:1px dashed var(--line); border-radius:10px; background:#fafcfb; }
.ins-split { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.ins-legend { display:grid; gap:7px; flex:1; min-width:140px; font-size:12px; }
.ins-legend li { list-style:none; display:flex; align-items:center; gap:8px; min-width:0; }
.ins-legend ul { margin:0; padding:0; display:grid; gap:7px; }
.ins-legend .sw { width:10px; height:10px; border-radius:3px; flex:none; }
.ins-legend .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ins-legend b { font-variant-numeric:tabular-nums; }
.hbars { display:grid; gap:9px; }
.hbar { display:grid; grid-template-columns:minmax(80px,150px) 1fr auto; align-items:center; gap:10px; font-size:12px; }
.hbar .hb-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
.hbar .hb-track { display:block; height:9px; border-radius:999px; background:#eaf2ee; overflow:hidden; }
.hbar .hb-fill { display:block; height:100%; border-radius:999px; background:var(--bar,linear-gradient(90deg,#087f5b,#37c08f)); min-width:3px; }
.hbar b { font-variant-numeric:tabular-nums; font-size:12px; }
.vcols { display:flex; align-items:flex-end; gap:5px; height:150px; padding-top:8px; }
.vcol { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:5px; }
.vcol .vc-bar { width:100%; max-width:34px; border-radius:6px 6px 2px 2px; background:var(--bar,linear-gradient(180deg,#37c08f,#087f5b)); min-height:2px; position:relative; transition:filter .12s ease; }
.vcol:hover .vc-bar { filter:brightness(1.1); }
.vcol .vc-bar.sub { position:absolute; left:0; right:0; bottom:0; background:rgba(200,91,85,.9); border-radius:0 0 2px 2px; }
.vcol span { font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.vcol em { font-style:normal; font-size:10px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; height:12px; }
.ring-wrap { display:flex; align-items:center; gap:16px; }
.ring-wrap .ring-copy { display:grid; gap:3px; font-size:12px; color:var(--muted); }
.ring-wrap .ring-copy strong { font:700 15px var(--font-display); color:var(--ink); }
.stackbar { display:flex; height:14px; border-radius:999px; overflow:hidden; background:#eaf2ee; }
.stackbar i { display:block; height:100%; }
.heat { display:grid; grid-template-columns:repeat(24,minmax(0,1fr)); gap:3px; }
.heat i { display:block; aspect-ratio:1; border-radius:4px; background:var(--c,#eaf2ee); }
.heat-axis { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; margin-top:5px; }
.spark { display:block; width:100%; height:38px; }
.pill { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:2px 9px; font-size:11px; font-weight:700; background:var(--tint,#e3f5ec); color:var(--tone,#075b43); white-space:nowrap; }
.pill.warn { --tint:#fdf0dc; --tone:#92400e; }
.pill.bad { --tint:#fbe3e1; --tone:#9b1c15; }
.pill.blue { --tint:#e3edfb; --tone:#1e4fa0; }
.pill.violet { --tint:#efe8fb; --tone:#5b36a3; }
.pill.gray { --tint:#eef2f0; --tone:#4b5c58; }

/* Top menu bar: the same menu as the sidebar, across the top, with drop-down menus, pins and "Jump to". */
.app-topbar { position:sticky; top:0; z-index:70; display:flex; align-items:center; gap:12px; min-height:56px; margin:-26px -36px 20px; padding:0 30px 0 18px; background:linear-gradient(90deg,#0b2a22 0%,#0f3a2f 55%,#0d3027 100%); border-bottom:1px solid rgba(94,224,172,.12); box-shadow:0 1px 0 rgba(0,0,0,.12); transition:box-shadow .2s; }
.app-topbar.scrolled { box-shadow:0 10px 28px -12px rgba(8,32,26,.55); }
.tb-bar { flex:none; display:flex; align-items:center; gap:2px; }
.tb-btn { position:relative; display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 11px; border:0; border-radius:8px; background:none; color:#c6ded4; font:600 12.5px var(--font-body, Inter, system-ui, sans-serif); text-decoration:none; cursor:pointer; white-space:nowrap; transition:background .15s, color .15s; }
.tb-btn:hover, .tb-group.open > .tb-btn { background:rgba(94,224,172,.10); color:#fff; }
.tb-home .ic { color:#5ee0ac; }
.tb-btn:focus-visible, .tb-search:focus-visible, .tb-menu-toggle:focus-visible { outline:2px solid #5ee0ac; outline-offset:2px; }
.tb-item:focus-visible { outline:2px solid #2fb583; outline-offset:2px; }
.tb-home.active, .tb-group.current > .tb-btn { background:linear-gradient(180deg,rgba(94,224,172,.22),rgba(94,224,172,.08)); color:#fff; }
.tb-home.active::after, .tb-group.current > .tb-btn::after { content:""; position:absolute; left:12px; right:12px; bottom:-11px; height:3px; border-radius:3px 3px 0 0; background:#5ee0ac; box-shadow:0 0 12px rgba(94,224,172,.6); }
.tb-group.current.open > .tb-btn { background:rgba(94,224,172,.24); }
.tb-short { display:none; }
.tb-caret { display:inline-flex; transform:rotate(90deg); opacity:.6; transition:transform .18s; }
.tb-group.open .tb-caret { transform:rotate(-90deg); }
.tb-group { position:relative; }
.tb-menu { position:absolute; left:0; top:calc(100% + 12px); z-index:80; width:min(560px, calc(100vw - 32px)); padding:10px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 48px -18px rgba(16,42,34,.38), 0 2px 6px rgba(16,42,34,.06); animation:tbIn .16s ease-out; transform-origin:top left; }
.tb-menu.align-right { left:auto; right:0; transform-origin:top right; }
.tb-menu[hidden] { display:none; }
@keyframes tbIn { from { opacity:0; transform:translateY(-6px) scale(.98); } to { opacity:1; transform:none; } }
.tb-menu-head { display:grid; gap:2px; padding:6px 10px 10px; margin-bottom:6px; border-bottom:1px solid var(--line); }
.tb-menu-head b { font:700 13.5px var(--font-display); color:var(--ink); }
.tb-menu-head span { font-size:11.5px; color:var(--muted); }
.tb-menu-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:4px; }
.tb-item, .tb-pal-item { display:flex; align-items:flex-start; gap:11px; padding:9px 10px; border-radius:10px; color:var(--ink); text-decoration:none; transition:background .12s, transform .12s; }
.tb-item:hover, .tb-item:focus { background:#f0f7f3; outline:none; }
.tb-item:hover .tb-item-ic { transform:scale(1.06); }
.tb-item.active { background:#e8f5ef; box-shadow:inset 3px 0 0 #2fb583; }
.tb-item-ic { width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:10px; background:linear-gradient(135deg,#e5f6ee,#d3efe2); color:#087f5b; transition:transform .15s; }
.tb-item.active .tb-item-ic { background:linear-gradient(135deg,#087f5b,#2fb583); color:#fff; }
.tb-item-text { display:grid; gap:2px; min-width:0; }
.tb-item-text b { font-size:13px; font-weight:700; }
.tb-item-text small { font-size:11.5px; color:var(--muted); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tb-ext { font-style:normal; color:var(--muted); font-size:11px; }
.tb-slot { flex:1; min-width:0; display:flex; align-items:center; gap:12px; }
.tb-tools { flex:none; margin-left:auto; display:flex; align-items:center; gap:8px; padding-left:12px; border-left:1px solid rgba(94,224,172,.14); }
.tb-icon-btn { width:34px; padding:0; justify-content:center; border:1px solid rgba(94,224,172,.22); background:rgba(255,255,255,.06); color:#5ee0ac; }
.tb-pinned.has-current > .tb-icon-btn { border-color:#5ee0ac; }
.tb-badge { position:absolute; top:-6px; right:-6px; min-width:17px; height:17px; padding:0 4px; display:grid; place-items:center; border-radius:999px; background:#5ee0ac; color:#073d2c; font-size:10px; font-weight:800; box-shadow:0 0 0 2px #0e3a2e; }
.tb-menu-narrow { width:min(320px, calc(100vw - 32px)); }
.tb-menu-narrow .tb-menu-grid { grid-template-columns:1fr; }
.tb-menu-toggle { display:none; flex:none; width:34px; height:34px; place-items:center; border:1px solid rgba(94,224,172,.25); border-radius:10px; background:rgba(255,255,255,.05); color:#5ee0ac; cursor:pointer; }
.tb-search { flex:none; display:inline-flex; align-items:center; gap:8px; min-width:200px; height:34px; padding:0 8px 0 12px; border:1px solid rgba(94,224,172,.22); border-radius:10px; background:rgba(255,255,255,.06); color:#a9cabd; font-size:12.5px; font-weight:500; cursor:pointer; transition:border-color .15s, background .15s; }
.tb-search:hover { border-color:rgba(94,224,172,.5); background:rgba(255,255,255,.10); color:#fff; }
.tb-search span { flex:1; text-align:left; }
.tb-user { flex:none; }
.tb-user button.head-user, .tb-user .head-user { height:34px; padding:0 12px 0 10px; border-radius:10px; border-color:rgba(94,224,172,.22); background:rgba(255,255,255,.06); color:#e6f5ee; font-size:12.5px; }
.tb-user button.head-user:hover, .tb-user button.head-user[aria-expanded="true"] { border-color:rgba(94,224,172,.5); background:rgba(255,255,255,.10); }
.tb-user .head-caret { color:#a9cabd; }
.head-av { position:relative; display:none; width:24px; height:24px; place-items:center; border-radius:50%; background:linear-gradient(135deg,#2fb583,#5ee0ac); color:#073d2c; font-size:11px; font-weight:800; }
.head-av .dot { position:absolute; right:-2px; bottom:-2px; width:9px; height:9px; box-shadow:0 0 0 2px #0e3a2e !important; }
.tb-user .head-av { display:inline-grid; }
.tb-user button.head-user { padding:0 10px 0 5px; }
.tb-user .head-name { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tb-user .head-menu { top:calc(100% + 10px); }
body.has-topbar .page-head.minimal { display:none; }
.app-topbar kbd, .tb-palette kbd { font:600 10.5px var(--font-body, Inter, system-ui, sans-serif); padding:2px 6px; border:1px solid var(--line); border-bottom-width:2px; border-radius:6px; background:#f6faf8; color:var(--muted); }
.app-topbar kbd { border-color:rgba(94,224,172,.25); background:rgba(255,255,255,.08); color:#a9cabd; }
.tb-context { position:fixed; z-index:400; min-width:220px; padding:6px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 40px -14px rgba(16,42,34,.4); animation:tbIn .12s ease-out; }
.tb-context-head { display:flex; align-items:center; gap:8px; padding:7px 10px 9px; margin-bottom:4px; border-bottom:1px solid var(--line); color:#087f5b; }
.tb-context-head b { color:var(--ink); font-size:12.5px; }
.tb-context button { display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px; border:0; border-radius:8px; background:none; color:var(--ink); font-size:12.5px; font-weight:600; text-align:left; cursor:pointer; }
.tb-context button:hover, .tb-context button:focus { background:#f0f7f3; outline:none; }
.tb-palette { position:fixed; inset:0; z-index:500; display:flex; justify-content:center; align-items:flex-start; padding:12vh 16px 16px; background:rgba(8,32,26,.38); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); animation:tbFade .14s ease-out; }
@keyframes tbFade { from { opacity:0; } to { opacity:1; } }
.tb-pal-card { width:min(620px,100%); max-height:72vh; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 30px 70px -20px rgba(8,32,26,.55); overflow:hidden; animation:tbIn .16s ease-out; }
.tb-pal-input { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); color:#087f5b; }
.tb-pal-input input { flex:1; border:0; outline:none; font-size:15px; color:var(--ink); background:none; }
.tb-pal-list { overflow-y:auto; padding:8px; }
.tb-pal-label { padding:6px 10px; font-size:10.5px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; color:var(--muted); }
.tb-pal-item.on { background:#eef7f2; }
.tb-pal-item.here .tb-item-ic { background:linear-gradient(135deg,#087f5b,#2fb583); color:#fff; }
.tb-pal-item .tb-item-text { flex:1; }
.tb-pal-go { align-self:center; color:#087f5b; opacity:0; transition:opacity .12s; }
.tb-pal-item.on .tb-pal-go { opacity:1; }
.tb-recent { font-style:normal; font-size:10px; font-weight:700; padding:1px 6px; border-radius:999px; background:#eef3f0; color:var(--muted); margin-left:4px; }
.tb-pal-empty { padding:24px; text-align:center; color:var(--muted); font-size:13px; }
.tb-pal-foot { display:flex; gap:16px; padding:9px 16px; border-top:1px solid var(--line); background:#f8fbf9; font-size:11px; color:var(--muted); }
body.tb-palette-open { overflow:hidden; }

/* ---- Glass surfaces and 3D icons (all pages that use the shell) ---- */
.shell .main { background:radial-gradient(900px 520px at 100% -8%, rgba(94,224,172,.20), transparent 60%), radial-gradient(760px 520px at -6% 38%, rgba(47,111,208,.09), transparent 62%), radial-gradient(700px 480px at 70% 108%, rgba(138,99,210,.08), transparent 60%), linear-gradient(180deg,#f3f8f5 0%,#eef5f1 100%); background-attachment:fixed; }
.shell :is(.home-card, .home-flow, .home-activity, .home-request, .ins-tile, .ins-card, .kpi, .st-card, .gs-card, .gs-kpi, .vd-card, .vd-kpi, .eud-card) {
  background:linear-gradient(160deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.64) 100%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(16,53,45,.06), 0 10px 30px -14px rgba(14,53,41,.30);
  -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
}
.shell .home-request { border-left:4px solid var(--green); }
.shell .home-request.none { border-left-color:#f3a84b; background:linear-gradient(160deg, rgba(255,250,240,.9), rgba(255,255,255,.66)); }
.shell .home-request.warn { border-left-color:#ef7d75; }
.shell .panel { background:rgba(255,255,255,.82); border-color:rgba(255,255,255,.8); box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(16,53,45,.06), 0 10px 30px -16px rgba(14,53,41,.28); }
.shell :is(.home-card, .ins-tile, .kpi, .gs-kpi, .vd-kpi):hover { background:linear-gradient(160deg, rgba(255,255,255,.96), rgba(255,255,255,.78)); box-shadow:0 1px 0 #fff inset, 0 0 0 1px rgba(47,181,131,.28), 0 18px 36px -16px rgba(14,53,41,.38); }
.shell .st-card > header { background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(246,250,248,.4)); }
.shell .btn:not(.primary):not(.ghost) { background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(244,249,246,.85)); box-shadow:0 1px 0 #fff inset, 0 1px 2px rgba(14,53,41,.08); }
.shell .btn.primary { background:linear-gradient(180deg,#14a173 0%,#087f5b 100%); box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 6px 14px -6px rgba(8,127,91,.6); }
.shell .btn.primary:hover { background:linear-gradient(180deg,#0f8d64 0%,#075b43 100%); }
.shell .home-hero { box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 24px 50px -18px rgba(8,60,45,.55); }
.shell .home-hero::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(120deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 38%); }

/* 3D icon tiles: a lit gradient, a glossy top highlight, an inner rim and a soft drop shadow. */
.shell :is(.hc-ic, .page-ic, .ins-tile .t-ic, .tb-item-ic, .gate-ic, .st-card > header .hc-ic, .nav-item.active .nav-ic, .fl-n, .brand-mark) {
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(150deg,#3fd29a 0%,#14a173 45%,#086b4d 100%); color:#fff;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55), inset 0 -3px 6px rgba(0,40,28,.35), 0 6px 14px -4px rgba(8,107,77,.55), 0 2px 3px rgba(8,60,45,.25);
}
.shell :is(.hc-ic, .page-ic, .ins-tile .t-ic, .tb-item-ic, .gate-ic, .nav-item.active .nav-ic, .fl-n, .brand-mark)::before {
  content:""; position:absolute; left:8%; right:8%; top:3%; height:46%; border-radius:inherit; z-index:-1;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events:none;
}
.shell :is(.hc-ic, .page-ic, .ins-tile .t-ic, .tb-item-ic, .gate-ic, .nav-ic, .ra-ic, .fl-n) svg { filter:drop-shadow(0 1.5px 1px rgba(0,30,20,.35)); }
.shell .brand-mark { color:#fff; text-shadow:0 1px 1px rgba(0,30,20,.4); }
.shell .home-card .hc-ic { transition:transform .18s ease, box-shadow .18s ease; }
.shell .home-card:hover .hc-ic { background:linear-gradient(150deg,#5ee0ac 0%,#18b07f 45%,#087f5b 100%); color:#fff; transform:translateY(-2px) rotate(-4deg) scale(1.05); box-shadow:inset 0 1px 1px rgba(255,255,255,.6), inset 0 -3px 6px rgba(0,40,28,.35), 0 12px 20px -6px rgba(8,107,77,.6), 0 2px 3px rgba(8,60,45,.25); }
.shell .ins-tile.warn .t-ic { background:linear-gradient(150deg,#ffc978 0%,#f3a84b 45%,#c47512 100%); box-shadow:inset 0 1px 1px rgba(255,255,255,.55), inset 0 -3px 6px rgba(90,40,0,.3), 0 6px 14px -4px rgba(196,117,18,.5); }
.shell .ins-tile.bad .t-ic { background:linear-gradient(150deg,#f59a93 0%,#d9605a 45%,#a3271f 100%); box-shadow:inset 0 1px 1px rgba(255,255,255,.55), inset 0 -3px 6px rgba(80,0,0,.3), 0 6px 14px -4px rgba(163,39,31,.5); }
.shell .ins-tile.blue .t-ic { background:linear-gradient(150deg,#8db4ee 0%,#3f7fdc 45%,#1d4f9f 100%); box-shadow:inset 0 1px 1px rgba(255,255,255,.55), inset 0 -3px 6px rgba(0,20,70,.3), 0 6px 14px -4px rgba(29,79,159,.5); }
.shell .ins-tile.violet .t-ic { background:linear-gradient(150deg,#c3a8ee 0%,#8a63d2 45%,#5b36a0 100%); box-shadow:inset 0 1px 1px rgba(255,255,255,.55), inset 0 -3px 6px rgba(40,0,80,.3), 0 6px 14px -4px rgba(91,54,160,.5); }
.shell .ra-ic { background:linear-gradient(150deg, color-mix(in srgb,var(--c) 20%,white), color-mix(in srgb,var(--c) 34%,white)); box-shadow:inset 0 1px 1px rgba(255,255,255,.8), inset 0 -2px 3px color-mix(in srgb,var(--c) 30%,transparent), 0 3px 8px -3px color-mix(in srgb,var(--c) 60%,transparent); }
.shell .nav-ic { background:linear-gradient(150deg, rgba(94,224,172,.18), rgba(94,224,172,.05)); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 4px rgba(0,0,0,.25), 0 3px 8px -4px rgba(0,0,0,.5); }
.shell .nav-item.active .nav-ic { color:#fff; }
.shell .tb-item.active .tb-item-ic, .shell .tb-item:hover .tb-item-ic { background:linear-gradient(150deg,#5ee0ac 0%,#18b07f 45%,#087f5b 100%); }
.shell .tb-menu, .tb-context, .tb-pal-card { background:rgba(255,255,255,.95); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%); border-color:rgba(255,255,255,.8); }
@media (prefers-reduced-transparency: reduce) {
  .shell :is(.home-card, .home-flow, .home-activity, .home-request, .ins-tile, .ins-card, .kpi, .st-card, .gs-card, .gs-kpi, .vd-card, .vd-kpi, .eud-card, .tb-menu) { background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; }
}


/* Sidebar icons: each icon gets a colour that matches what it stands for (green home, red alert, gold key, ...). */
[data-ic="home"] { --c:#34d399; }
[data-ic="grid"] { --c:#2dd4bf; }
[data-ic="search"] { --c:#38bdf8; }
[data-ic="swap"] { --c:#818cf8; }
[data-ic="files"] { --c:#fbbf24; }
[data-ic="history"] { --c:#a78bfa; }
[data-ic="badge"] { --c:#4ade80; }
[data-ic="report"] { --c:#60a5fa; }
[data-ic="alert"] { --c:#f87171; }
[data-ic="user"] { --c:#f472b6; }
[data-ic="eyeoff"] { --c:#94a3b8; }
[data-ic="table"] { --c:#22d3ee; }
[data-ic="link"] { --c:#a3e635; }
[data-ic="globe"] { --c:#3b9cff; }
[data-ic="shield"] { --c:#fb923c; }
[data-ic="book"] { --c:#facc15; }
[data-ic="gear"] { --c:#cbd5e1; }
[data-ic="audit"] { --c:#c084fc; }
[data-ic="key"] { --c:#fcd34d; }
.shell .nav-ic[data-ic] { color:var(--c); background:linear-gradient(150deg, color-mix(in srgb,var(--c) 26%,transparent), color-mix(in srgb,var(--c) 8%,transparent)); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 4px rgba(0,0,0,.28), inset 0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent), 0 3px 8px -4px rgba(0,0,0,.55); transition:transform .15s ease, background .15s ease; }
.shell .nav-item:hover .nav-ic[data-ic] { transform:translateY(-1px) scale(1.06); background:linear-gradient(150deg, color-mix(in srgb,var(--c) 38%,transparent), color-mix(in srgb,var(--c) 14%,transparent)); }
.shell .nav-item.active .nav-ic[data-ic] { color:#fff; background:linear-gradient(150deg, color-mix(in srgb,var(--c) 80%,white) 0%, var(--c) 45%, color-mix(in srgb,var(--c) 62%,black) 100%); box-shadow:inset 0 1px 1px rgba(255,255,255,.55), inset 0 -3px 6px rgba(0,0,0,.3), 0 6px 14px -4px color-mix(in srgb,var(--c) 70%,transparent); }
.shell .nav-item.active .nav-ic[data-ic] svg { filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); }

/* The same colours on the top menu, Jump to, right-click menu, page titles and Home cards: a glossy 3D tile in the icon's colour. */
.shell .main :is(.tb-item-ic, .page-ic, .hc-ic, .tb-ic)[data-ic], .tb-palette .tb-item-ic[data-ic], .tb-context .tb-item-ic[data-ic] {
  color:#fff; background:linear-gradient(150deg, color-mix(in srgb,var(--c) 72%,white) 0%, var(--c) 42%, color-mix(in srgb,var(--c) 58%,black) 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55), inset 0 -3px 6px rgba(0,0,0,.25), 0 6px 14px -5px color-mix(in srgb,var(--c) 75%,transparent), 0 2px 3px rgba(8,40,30,.18);
}
.shell .main :is(.tb-item, .home-card):hover :is(.tb-item-ic, .hc-ic)[data-ic], .shell .main .tb-item.active .tb-item-ic[data-ic], .tb-pal-item.on .tb-item-ic[data-ic] {
  background:linear-gradient(150deg, color-mix(in srgb,var(--c) 55%,white) 0%, var(--c) 40%, color-mix(in srgb,var(--c) 50%,black) 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6), inset 0 -3px 6px rgba(0,0,0,.25), 0 10px 18px -6px color-mix(in srgb,var(--c) 80%,transparent), 0 2px 3px rgba(8,40,30,.18);
}
.shell :is(.tb-item-ic, .page-ic, .hc-ic, .tb-ic)[data-ic] svg, .tb-palette .tb-item-ic[data-ic] svg, .tb-context .tb-item-ic[data-ic] svg { filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.tb-palette .tb-item-ic[data-ic], .tb-context .tb-item-ic[data-ic] { position:relative; overflow:hidden; }
.tb-item-ic.sm { width:24px; height:24px; border-radius:7px; }
.tb-home .tb-ic .ic { color:#fff; }
.tb-ic { position:relative; overflow:hidden; width:24px; height:24px; flex:none; display:inline-grid; place-items:center; border-radius:7px; }
.tb-ic::before { content:""; position:absolute; left:8%; right:8%; top:3%; height:46%; border-radius:inherit; background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)); pointer-events:none; }

/* A deep green, slightly see-through sidebar over the tinted page background. */
body:has(.shell) { background:radial-gradient(800px 600px at 0% 0%, rgba(47,181,131,.28), transparent 60%), radial-gradient(700px 700px at 0% 100%, rgba(47,111,208,.14), transparent 60%), linear-gradient(180deg,#eef5f1,#e9f2ed); background-attachment:fixed; }
/* Light mint glass sidebar: dark text, so the coloured 3D icons stand out. */
.shell .sidebar { color:#1d3b33; background:linear-gradient(180deg, rgba(236,248,242,.72) 0%, rgba(223,243,233,.62) 55%, rgba(214,238,226,.70) 100%); -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%); border-right:1px solid rgba(255,255,255,.75); box-shadow:inset -1px 0 0 rgba(8,127,91,.10), 10px 0 30px -20px rgba(8,60,45,.35); }
.shell .sidebar .brand { color:#0b3a2d; border-bottom-color:rgba(8,127,91,.12); }
.shell .sidebar .brand span { color:#4f7468; }
.shell .nav-group-head { color:#5b8577; }
.shell .nav-group-head:hover { color:#0b5c43; }
.shell .nav-item { color:#21443a; }
.shell .nav-item:hover { background:rgba(255,255,255,.65); color:#0b3a2d; box-shadow:0 1px 0 #fff inset, 0 4px 12px -6px rgba(8,60,45,.25); }
.shell .nav-item.active { color:#0b3a2d; background:linear-gradient(90deg, rgba(255,255,255,.92), rgba(255,255,255,.55)); border-left-color:var(--green); box-shadow:0 1px 0 #fff inset, 0 6px 16px -8px rgba(8,60,45,.35); }
.shell .nav-ext { color:#6b8f83; }
.shell .sidebar .nav-ic[data-ic] { color:#fff; background:linear-gradient(150deg, color-mix(in srgb,var(--c) 70%,white) 0%, var(--c) 42%, color-mix(in srgb,var(--c) 60%,black) 100%); box-shadow:inset 0 1px 1px rgba(255,255,255,.6), inset 0 -3px 5px rgba(0,0,0,.22), 0 5px 12px -5px color-mix(in srgb,var(--c) 80%,transparent), 0 1px 2px rgba(8,40,30,.18); }
.shell .sidebar .nav-ic[data-ic]::before { content:""; position:absolute; left:8%; right:8%; top:3%; height:46%; border-radius:inherit; background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events:none; }
.shell .sidebar .nav-ic[data-ic] { position:relative; overflow:hidden; }
.shell .sidebar .nav-ic[data-ic] svg { position:relative; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.shell .nav-item:hover .nav-ic[data-ic] { background:linear-gradient(150deg, color-mix(in srgb,var(--c) 55%,white) 0%, var(--c) 40%, color-mix(in srgb,var(--c) 52%,black) 100%); }
.shell .nav-item.active .nav-ic[data-ic] { box-shadow:inset 0 1px 1px rgba(255,255,255,.6), inset 0 -3px 5px rgba(0,0,0,.22), 0 0 0 2px #fff, 0 8px 16px -6px color-mix(in srgb,var(--c) 85%,transparent); }
.shell .sidebar-foot { background:rgba(255,255,255,.38); border-top-color:rgba(8,127,91,.12); color:#5b7d72; }
.shell .sidebar-foot #last-sync { color:#21443a; }
.shell .user-meta strong { color:#0b3a2d; }
.shell .user-meta small { color:#5b7d72; }
.shell .avatar { color:#fff; background:linear-gradient(150deg,#5ee0ac 0%,#18b07f 45%,#087f5b 100%); box-shadow:inset 0 1px 1px rgba(255,255,255,.55), inset 0 -2px 4px rgba(0,0,0,.2), 0 4px 10px -4px rgba(8,107,77,.6); }
.shell .user-btn { color:#0b5c43; border-color:rgba(8,127,91,.28); background:rgba(255,255,255,.55); }
.shell .user-btn:hover { background:#fff; }
.shell .role-chip { color:#0b5c43; border-color:rgba(8,127,91,.25); background:rgba(255,255,255,.5); }
.shell .role-chip.super { color:#075b43; border-color:rgba(8,127,91,.45); background:linear-gradient(90deg, rgba(94,224,172,.35), rgba(255,255,255,.55)); }
.shell .role-chip.warn { color:#8a4b06; border-color:rgba(243,168,75,.6); background:rgba(255,244,224,.7); }
.shell .role-chip.muted { color:#5b7d72; }
.shell .sidebar::-webkit-scrollbar-thumb, .shell .nav-scroll::-webkit-scrollbar-thumb { background:rgba(8,127,91,.22); border-color:transparent; }
.shell .app-topbar { background:linear-gradient(90deg, rgba(4,38,28,.90) 0%, rgba(4,52,38,.86) 55%, rgba(3,42,31,.90) 100%); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%); }
@media (max-width:900px) { .shell .sidebar { background:rgba(236,248,242,.96); } }

@media (max-width:1640px) { .tb-search { min-width:0; width:34px; padding:0; justify-content:center; } .tb-search span, .tb-search kbd { display:none; } }
@media (max-width:1400px) { .tb-btn { padding:0 9px; gap:6px; } .tb-icon-btn { padding:0; } .tb-user .head-name { display:none; } .tb-user button.head-user { padding:0 8px 0 5px; } }
@media (max-width:1240px) { .tb-label { display:none; } .tb-short { display:inline; } .tb-home { width:34px; padding:0; justify-content:center; } .app-topbar { gap:8px; padding-right:24px; } }
@media (max-width:1080px) and (min-width:901px) { .tb-bar { display:none; } }

@media (max-width:900px) {
  .shell { grid-template-columns:1fr; }
  .sidebar { display:flex; position:fixed; z-index:120; left:0; top:0; width:290px; max-width:86vw; transform:translateX(-102%); transition:transform .22s ease; box-shadow:var(--shadow-lg); }
  body.nav-open .sidebar { transform:none; }
  .nav-scrim { position:fixed; inset:0; background:rgba(8,32,26,.5); z-index:110; opacity:0; pointer-events:none; transition:opacity .2s ease; }
  body.nav-open .nav-scrim { opacity:1; pointer-events:auto; }
  .nav-toggle { display:block; }
  .main { padding:18px 14px 40px; }
  .app-topbar { margin:-18px -14px 16px; padding:0 14px; min-height:50px; gap:10px; }
  .tb-user .head-user { max-width:44vw; overflow:hidden; text-overflow:ellipsis; }
  .tb-bar { display:none; }
  .tb-menu-toggle { display:grid; }
  .tb-tools { flex:1; margin-left:0; padding-left:0; border-left:0; }
  .tb-search { flex:1; width:auto; justify-content:flex-start; padding:0 12px; }
  .tb-search span { display:inline; }
  .page-head-side { align-items:flex-start; }
}
@media (min-width:901px) { .nav-scrim { display:none; } }
@media print { .sidebar, .nav-toggle, .top-actions, .app-topbar { display:none !important; } .shell { display:block; } }

.ins-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.ins-steps li { display:grid; gap:4px; padding:13px 15px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(180deg,#fbfdfc,#f3f9f6); }
.ins-steps b { font:700 13px var(--font-display); color:var(--green-dark); }
.ins-steps span { color:var(--muted); font-size:12px; line-height:1.5; }