/* ===========================================================================
   ELUCENS — Tenant web app. Built on the v5 "Clearing" identity.
   Teal #0E9C9A · Pine #062523 · Bone paper · Bricolage Grotesque + Hanken Grotesk.
   Palette + theme + density driven by data-attrs / JS-set CSS vars on .app.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background:#062523;
}

.app{
  /* neutral ground */
  --paper:#F4F5F1;
  --paper-2:#FFFFFF;
  --paper-3:#ECEDE7;
  --ink:#15191A;
  --ink-2:#454C4A;
  --ink-3:#737A77;
  --line:#E4E5DF;
  --line-2:#D2D4CC;

  /* brand surfaces */
  --pine:#062523;
  --pine-2:#0A312E;
  --pine-3:#0E3D38;

  /* accent (palette-driven) */
  --accent:#0E9C9A;
  --accent-deep:#0A7574;
  --accent-soft:#DCEFEC;
  --accent-ink:#063F3E;

  /* on dark */
  --on-dark:#E9F1EF;
  --on-dark-2:#8FA6A2;
  --on-dark-3:#5E7370;
  --on-dark-line:#173E3A;

  /* status */
  --ok:#1E9E63;
  --ok-soft:#DDEFE4;
  --warn:#C98A21;
  --warn-soft:#F3E8CF;
  --info:var(--accent);
  --danger:#C0492F;
  --danger-soft:#F3DDD6;

  --radius:14px;
  --radius-sm:10px;
  --radius-lg:20px;
  --pill:999px;

  /* elevation */
  --shadow-card: 0 16px 38px -28px rgba(6,37,35,.35);
  --shadow-pop:  0 36px 70px -34px rgba(6,37,35,.55);

  /* density */
  --gap:24px;
  --card-pad:26px;
  --row-pad:16px;

  --font-display:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;

  --sidebar-w:264px;

  color:var(--ink);
  font-family:var(--font-body);
}
.app[data-density="compact"]{ --gap:16px; --card-pad:18px; --row-pad:11px; }

/* dark content shell — pine canvas, lifted cards */
.app[data-theme="dark"]{
  --paper:#062523;
  --paper-2:#0C302C;
  --paper-3:#0A2A27;
  --ink:#EAF1EF;
  --ink-2:#A9BEB9;
  --ink-3:#6E8581;
  --line:#143C38;
  --line-2:#1B4843;
  --accent-soft:#0F3A37;
  --accent-ink:#9BE5E2;
}

::selection{background:var(--accent);color:#fff}

/* ---- wordmark / monogram primitives ---- */
.wm{font-family:var(--font-display);font-weight:600;letter-spacing:-.035em;line-height:1;white-space:nowrap;display:inline-flex;align-items:baseline;color:var(--ink)}
.wm .dot{width:.16em;height:.16em;border-radius:50%;background:var(--accent);display:inline-block;flex:0 0 auto;margin-left:.015em;align-self:baseline}
.wm--dark{color:var(--on-dark)}
.mono{font-family:var(--font-display);font-weight:700;letter-spacing:-.04em;line-height:1;display:inline-flex;align-items:baseline}
.mono .dot{width:.17em;height:.17em;border-radius:50%;background:var(--accent);display:inline-block;flex:0 0 auto;margin-left:.01em;align-self:baseline}
.tile{display:inline-flex;align-items:center;justify-content:center;background:var(--pine);border-radius:11px;flex:0 0 auto}
.tile .mono{color:var(--on-dark)}

.seed{width:8px;height:8px;border-radius:var(--pill);background:var(--accent);flex:0 0 auto;display:inline-block}

/* ---- generic ---- */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);white-space:nowrap}
.app[data-theme="dark"] .eyebrow{color:var(--accent)}
.muted{color:var(--ink-3)}
.mono-num{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em}

/* =====================================================================
   LAYOUT — sidebar + main
   ===================================================================== */
.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;height:100vh;width:100%;overflow:hidden;background:var(--paper)}

/* ---------- SIDEBAR (pine) ---------- */
.side{background:var(--pine);color:var(--on-dark);display:flex;flex-direction:column;height:100vh;overflow:hidden;border-right:1px solid #03100F}
.side__brand{display:flex;align-items:center;gap:12px;padding:22px 22px 18px}
.side__brand .tile{width:38px;height:38px;border-radius:10px;background:#0A312E}
.side__brand .tile .mono{font-size:21px}
.side__wm{font-size:23px}

/* tenant switcher */
.tenant{margin:2px 14px 14px;border:1px solid var(--on-dark-line);border-radius:var(--radius-sm);padding:11px 13px;display:flex;align-items:center;gap:11px;cursor:pointer;transition:.15s;background:rgba(255,255,255,.012)}
.tenant:hover{background:rgba(255,255,255,.05);border-color:#27514C}
.tenant__logo{width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--pine);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:15px;flex:0 0 auto}
.tenant__meta{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.tenant__name{font-weight:700;font-size:14px;color:var(--on-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tenant__url{font-size:11.5px;color:var(--on-dark-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tenant__url b{color:var(--accent);font-weight:600}
.tenant__chev{color:var(--on-dark-3);flex:0 0 auto}

/* tenant switcher menu */
.tenant-wrap{position:relative;z-index:42}
.tenant-menu{position:absolute;left:14px;right:14px;top:60px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-pop);z-index:60;overflow:hidden;padding:6px}
.tmenu__lbl{font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:10px 10px 6px}
.tmenu__item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--radius-sm);cursor:pointer;transition:.12s}
.tmenu__item:hover{background:var(--paper-3)}
.tmenu__logo{width:30px;height:30px;border-radius:8px;background:var(--pine);color:var(--on-dark);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:14px;flex:0 0 auto}
.tmenu__meta{flex:1;min-width:0;display:flex;flex-direction:column}
.tmenu__name{font-weight:700;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmenu__city{font-size:11.5px;color:var(--ink-3)}
.tmenu__check{color:var(--accent-deep);flex:0 0 auto}
.app[data-theme="dark"] .tmenu__check{color:var(--accent)}
.tmenu__div{height:1px;background:var(--line);margin:6px 0}
.tmenu__action{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:none;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:13px;color:var(--ink-2);transition:.12s;white-space:nowrap;text-decoration:none}
.tmenu__action:hover{background:var(--paper-3);color:var(--ink)}

/* nav */
.nav{flex:1;overflow-y:auto;padding:6px 12px 12px}
.nav::-webkit-scrollbar{width:8px}
.nav::-webkit-scrollbar-thumb{background:#123A36;border-radius:8px}
.nav__grp{font-weight:700;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-3);padding:18px 12px 8px}
.nav__item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);color:var(--on-dark-2);font-weight:600;font-size:14.5px;cursor:pointer;transition:.13s;border:0;background:none;width:100%;text-align:left;position:relative;white-space:nowrap}
.nav__item:hover{background:rgba(255,255,255,.05);color:var(--on-dark)}
.nav__item.on{background:var(--pine-3);color:var(--on-dark)}
.nav__item.on::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:3px;height:18px;border-radius:3px;background:var(--accent)}
.nav__ic{width:18px;height:18px;flex:0 0 auto;color:currentColor;opacity:.92}
.nav__item .badge{margin-left:auto;font-weight:700;font-size:11px;background:var(--accent);color:var(--pine);border-radius:var(--pill);min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.nav__item.on .badge,.nav__item:hover .badge{background:var(--accent)}
.nav__item .dotlive{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(14,156,154,.18)}

/* ask-elucens CTA in sidebar */
.ask-cta{margin:8px 12px 4px;display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:var(--radius);background:var(--accent);color:#fff;font-weight:700;font-size:14.5px;cursor:pointer;border:0;width:calc(100% - 24px);transition:.15s;text-align:left;white-space:nowrap}
.ask-cta:hover{background:#11B0AD;transform:translateY(-1px);box-shadow:0 12px 26px -14px rgba(14,156,154,.7)}
.ask-cta .ar{margin-left:auto;transition:transform .18s}
.ask-cta:hover .ar{transform:translateX(3px)}
.ask-cta.on{background:#11B0AD}

/* account */
.side__foot{padding:12px;border-top:1px solid var(--on-dark-line)}
.acct{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--radius-sm);cursor:pointer;transition:.13s}
.acct:hover{background:rgba(255,255,255,.05)}
.acct__av{width:32px;height:32px;border-radius:50%;background:var(--pine-3);color:var(--on-dark);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto;border:1px solid var(--on-dark-line)}
.acct__meta{display:flex;flex-direction:column;min-width:0;flex:1}
.acct__name{font-weight:600;font-size:13.5px;color:var(--on-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct__role{font-size:11.5px;color:var(--on-dark-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- MAIN ---------- */
.main{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:var(--paper)}
.topbar{display:flex;align-items:center;gap:18px;padding:0 32px;height:66px;border-bottom:1px solid var(--line);background:var(--paper);flex:0 0 auto}
.crumb{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-3);font-weight:600}
.crumb b{color:var(--ink);font-weight:700}
.crumb .sep{opacity:.5}
.topbar__title{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.search{margin-left:auto;display:flex;align-items:center;gap:10px;background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--pill);padding:9px 16px;width:300px;color:var(--ink-3);transition:.15s}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.search input{border:0;outline:0;background:none;font-family:var(--font-body);font-size:14px;color:var(--ink);width:100%}
.search input::placeholder{color:var(--ink-3)}
.iconbtn{width:40px;height:40px;border-radius:var(--pill);border:1px solid var(--line-2);background:var(--paper-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2);transition:.15s;flex:0 0 auto;position:relative}
.iconbtn:hover{border-color:var(--ink);color:var(--ink)}
.topbar__burger{display:none;width:40px;height:40px;border-radius:var(--pill);border:1px solid var(--line-2);background:var(--paper-2);align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2);flex:0 0 auto}
.topbar__burger:hover{border-color:var(--ink);color:var(--ink)}
.side-scrim{position:fixed;inset:0;background:rgba(6,37,35,.42);z-index:79}

.iconbtn .ndot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--accent);border:1.5px solid var(--paper-2)}

/* topbar dropdown menu */
.menu-wrap{position:relative}
.menu-overlay{position:fixed;inset:0;z-index:55}
.menu{position:absolute;top:50px;right:0;width:346px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-pop);z-index:60;overflow:hidden}
.menu__h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.menu__h b{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--ink)}
.menu__clear{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-weight:700;font-size:12px;color:var(--accent-deep);background:none;border:0;cursor:pointer}
.app[data-theme="dark"] .menu__clear{color:var(--accent)}
.menu__list{max-height:380px;overflow-y:auto}
.notif{display:flex;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:.12s;align-items:flex-start}
.notif:hover{background:var(--paper-3)}
.notif:last-child{border-bottom:0}
.notif__dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto;margin-top:6px}

.scroll{flex:1;overflow-y:auto}
.page{max-width:1180px;margin:0 auto;padding:34px 32px 80px}
.page--wide{max-width:1320px}

/* ---- page header ---- */
.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.phead__h{font-family:var(--font-display);font-weight:700;font-size:34px;letter-spacing:-.03em;line-height:1.04;color:var(--ink)}
.phead__h em{font-style:normal;color:var(--accent-deep)}
.app[data-theme="dark"] .phead__h em{color:var(--accent)}
.phead__sub{font-size:16px;line-height:1.55;color:var(--ink-2);margin-top:8px;max-width:60ch}

/* =====================================================================
   BUTTONS / CHIPS
   ===================================================================== */
.btn{font-family:var(--font-body);font-weight:700;font-size:13.5px;padding:11px 20px;border-radius:var(--pill);border:1.5px solid transparent;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;text-decoration:none}
.btn--fill{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn--fill:hover{background:var(--accent-deep);border-color:var(--accent-deep);transform:translateY(-1px)}
.btn--out{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--out:hover{border-color:var(--ink)}
.btn--ghost{background:transparent;color:var(--accent-deep);border:0;padding:8px 4px}
.app[data-theme="dark"] .btn--ghost{color:var(--accent)}
.btn--sm{padding:8px 15px;font-size:12.5px}
.btn .ar{transition:transform .18s}
.btn:hover .ar{transform:translateX(3px)}

.chip{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:12.5px;border-radius:var(--pill);padding:5px 12px;background:var(--accent-soft);color:var(--accent-ink)}
.chip--line{background:transparent;border:1px solid var(--line-2);color:var(--ink-2)}
.chip .sd{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.8}

.status{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:11.5px;letter-spacing:.02em;border-radius:var(--pill);padding:5px 11px;white-space:nowrap}
.status .d{width:7px;height:7px;border-radius:50%;background:currentColor}
.status--live{background:var(--ok-soft);color:#10663C}
.status--review{background:var(--warn-soft);color:#8A5E10}
.status--diag{background:var(--accent-soft);color:var(--accent-ink)}
.status--off{background:var(--paper-3);color:var(--ink-3)}
.app[data-theme="dark"] .status--live{background:rgba(30,158,99,.16);color:#74D6A2}
.app[data-theme="dark"] .status--review{background:rgba(201,138,33,.16);color:#E3B96A}

/* =====================================================================
   CARDS
   ===================================================================== */
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:var(--card-pad)}
.card--flush{padding:0;overflow:hidden}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.card-h__t{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.02em;color:var(--ink)}
.card-h__t .seed{margin-right:9px;vertical-align:middle}

/* metric stat */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.stat{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 20px;position:relative;overflow:hidden}
.stat__lbl{font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.stat__v{font-family:var(--font-display);font-weight:700;font-size:42px;letter-spacing:-.03em;line-height:1;color:var(--ink);margin-top:14px}
.stat__v em{font-style:normal;color:var(--accent-deep)}
.app[data-theme="dark"] .stat__v em{color:var(--accent)}
.stat__delta{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:12.5px;margin-top:10px;color:var(--ok);white-space:nowrap}
.stat__delta.down{color:var(--ok)}
.stat__foot{font-size:12.5px;color:var(--ink-3);margin-top:6px}

/* =====================================================================
   PILLAR CARDS
   ===================================================================== */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.pillar{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;cursor:pointer;transition:.16s;position:relative;overflow:hidden}
.pillar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);opacity:0;transition:.16s}
.pillar:hover{transform:translateY(-3px);box-shadow:0 24px 48px -30px rgba(6,37,35,.4);border-color:var(--line-2)}
.pillar:hover::before{opacity:1}
.pillar--soon{cursor:default}
.pillar--soon:hover{transform:none;box-shadow:none;border-color:var(--line)}
.pillar--soon::before{display:none}
.pillar__top{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.pillar__ic{width:42px;height:42px;border-radius:11px;background:var(--accent-soft);color:var(--accent-deep);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.app[data-theme="dark"] .pillar__ic{color:var(--accent)}
.pillar__name{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.pillar__en{font-size:12px;color:var(--ink-3);font-weight:600;margin-top:1px}
.pillar__line{font-size:14.5px;line-height:1.5;color:var(--ink-2);flex:1}
.pillar__stats{display:flex;gap:22px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.pillar__stat{display:flex;flex-direction:column;gap:3px}
.pillar__stat b{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-.02em;color:var(--accent-deep)}
.app[data-theme="dark"] .pillar__stat b{color:var(--accent)}
.pillar__stat span{font-size:11.5px;font-weight:600;color:var(--ink-3)}
.pillar__foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.pillar__go{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13px;color:var(--accent-deep)}
.app[data-theme="dark"] .pillar__go{color:var(--accent)}
.pillar__go .ar{transition:transform .18s}
.pillar:hover .pillar__go .ar{transform:translateX(3px)}

/* =====================================================================
   LISTS / ROWS / TABLES
   ===================================================================== */
.list{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:14px;padding:var(--row-pad) 4px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}

.feed{display:flex;flex-direction:column}
.fitem{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.fitem:last-child{border-bottom:0}
.fitem__ic{width:34px;height:34px;border-radius:9px;background:var(--paper-3);color:var(--ink-2);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.fitem__ic.teal{background:var(--accent-soft);color:var(--accent-deep)}
.fitem__b{flex:1;min-width:0}
.fitem__t{font-size:14px;line-height:1.45;color:var(--ink)}
.fitem__t b{font-weight:700}
.fitem__m{font-size:12px;color:var(--ink-3);margin-top:3px;font-weight:600}
.fitem__time{font-size:12px;color:var(--ink-3);font-weight:600;white-space:nowrap;flex:0 0 auto}

/* table */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:0 14px 12px;border-bottom:1px solid var(--line-2)}
.tbl td{padding:14px;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:.12s;cursor:pointer}
.tbl tbody tr:hover{background:var(--paper-3)}
.tbl b{color:var(--ink);font-weight:700}
.cellname{display:flex;align-items:center;gap:11px}
.av{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto;font-family:var(--font-display)}

/* =====================================================================
   INTEGRATIONS
   ===================================================================== */
.integ-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.integ{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;transition:.15s}
.integ:hover{border-color:var(--line-2);box-shadow:0 16px 38px -28px rgba(6,37,35,.35)}
.integ__top{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.integ__logo{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:var(--paper-2);border:1px solid var(--line)}
.integ__meta{flex:1;min-width:0}
.integ__name{font-weight:700;font-size:15.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.integ__cat{font-size:12px;color:var(--ink-3);font-weight:600;margin-top:1px}
.integ__desc{font-size:13.5px;line-height:1.5;color:var(--ink-2);flex:1;margin-bottom:16px}
.integ__foot{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--line)}
.integ__sync{font-size:12px;color:var(--ink-3);font-weight:600;display:flex;align-items:center;gap:7px}
.feeds{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--accent-deep)}
.app[data-theme="dark"] .feeds{color:var(--accent)}

/* context coverage bar */
.cov{display:flex;flex-direction:column;gap:14px}
.cov__row{display:flex;align-items:center;gap:14px}
.cov__lbl{width:150px;font-size:13px;font-weight:600;color:var(--ink-2);flex:0 0 auto}
.cov__track{flex:1;height:9px;border-radius:var(--pill);background:var(--paper-3);overflow:hidden}
.cov__fill{height:100%;border-radius:var(--pill);background:var(--accent)}
.cov__pct{width:46px;text-align:right;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink);flex:0 0 auto}

/* =====================================================================
   EMAIL TRIAGE
   ===================================================================== */
.triage{display:grid;grid-template-columns:300px 1fr;gap:var(--gap);align-items:start}
.tcat{display:flex;flex-direction:column;gap:8px}
.tcat__item{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--paper-2);cursor:pointer;transition:.13s}
.tcat__item:hover{border-color:var(--line-2)}
.tcat__item.on{border-color:var(--accent);background:var(--accent-soft)}
.tcat__dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.tcat__name{font-weight:700;font-size:14px;color:var(--ink);flex:1}
.tcat__n{font-weight:700;font-size:13px;color:var(--ink-3);font-family:var(--font-display)}
.tcat__item.on .tcat__n{color:var(--accent-deep)}

.mail{display:flex;flex-direction:column}
.mailrow{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px;border-bottom:1px solid var(--line);cursor:pointer;transition:.12s}
.mailrow:hover{background:var(--paper-3)}
.mailrow:last-child{border-bottom:0}
.mailrow__av{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;font-family:var(--font-display);flex:0 0 auto}
.mailrow__from{font-weight:700;font-size:14px;color:var(--ink)}
.mailrow__subj{font-size:13.5px;color:var(--ink-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52ch}
.mailrow__right{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:0 0 auto}
.mailrow__time{font-size:12px;color:var(--ink-3);font-weight:600}

/* draft preview */
.draft{background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--radius);padding:18px 20px;margin-top:2px}
.draft__h{display:flex;align-items:center;gap:9px;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:11px}
.app[data-theme="dark"] .draft__h{color:var(--accent)}
.draft__body{font-size:14px;line-height:1.6;color:var(--ink-2);white-space:pre-line}
.draft__acts{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}

/* =====================================================================
   CHAT — Vraag Elucens
   ===================================================================== */
.chatwrap{flex:1;min-width:0;width:100%;display:flex;flex-direction:column;height:100%;overflow:hidden}
.chat-left{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.chatscroll{flex:1;overflow-y:auto;padding:24px 0 30px;display:flex;flex-direction:column}
.chatinner{max-width:1180px;width:100%;padding:0 40px;align-self:center}
.chat-empty{flex:1;display:flex;align-items:center;justify-content:center;width:100%}

/* foldable Kennisbank bar (inside the chat, full width) */
.kb-bar{flex:0 0 auto;border-bottom:1px solid var(--line);background:var(--paper-2)}
.kb-bar__head{display:flex;align-items:center;gap:12px;padding:12px 40px;cursor:pointer;width:100%;background:none;border:0;text-align:left;font-family:var(--font-body);transition:.13s}
.kb-bar__head:hover{background:var(--paper-3)}
.kb-bar__ic{width:30px;height:30px;border-radius:8px;background:var(--accent-soft);color:var(--accent-deep);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.app[data-theme="dark"] .kb-bar__ic{color:var(--accent)}
.kb-bar__t{font-family:var(--font-display);font-weight:700;font-size:14.5px;letter-spacing:-.01em;color:var(--ink)}
.kb-bar__meta{font-size:12.5px;color:var(--ink-3);font-weight:600}
.kb-bar__chev{margin-left:auto;color:var(--ink-3);transition:transform .2s}
.kb-bar__chev.open{transform:rotate(180deg)}
.kb-panel{padding:2px 40px 20px}
.kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:10px}
.kb-src{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper-2)}
.rsrc__meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rsrc__name{font-weight:700;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rsrc__rec{font-size:11.5px;color:var(--ink-3);font-weight:600}
.rsrc__live{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.kb-note{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:12.5px;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--radius-sm);padding:11px 15px}
.app[data-theme="dark"] .kb-note{color:var(--accent)}

.chat-hero{text-align:center;padding:42px 0 30px;max-width:680px;margin:0 auto}
.chat-hero .mark{width:62px;height:62px;border-radius:16px;background:var(--pine);display:inline-flex;align-items:center;justify-content:center;margin-bottom:22px}
.chat-hero .mark .mono{font-size:34px;color:var(--on-dark)}
.chat-hero h1{font-family:var(--font-display);font-weight:700;font-size:34px;letter-spacing:-.03em;color:var(--ink);line-height:1.05}
.chat-hero h1 em{font-style:normal;color:var(--accent-deep)}
.app[data-theme="dark"] .chat-hero h1 em{color:var(--accent)}
.chat-hero p{font-size:16px;line-height:1.55;color:var(--ink-2);margin-top:14px}
.grounded-note{display:inline-flex;align-items:center;gap:9px;margin-top:22px;font-weight:600;font-size:13px;color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--pill);padding:9px 17px;white-space:nowrap}
.app[data-theme="dark"] .grounded-note{color:var(--accent)}

.suggest{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}
.suggest__c{text-align:left;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;cursor:pointer;transition:.14s;display:flex;flex-direction:column;gap:5px}
.suggest__c:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 16px 34px -26px rgba(6,37,35,.4)}
.suggest__q{font-weight:700;font-size:14px;color:var(--ink);line-height:1.35}
.suggest__src{font-size:11.5px;color:var(--ink-3);font-weight:600}

/* messages */
.msg{display:flex;gap:14px;margin-bottom:26px}
.msg__av{width:34px;height:34px;border-radius:9px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;font-family:var(--font-display)}
.msg__av--e{background:var(--pine);color:var(--on-dark)}
.msg__av--u{background:var(--accent);color:#fff}
.msg__body{flex:1;min-width:0;padding-top:5px}
.msg--user .msg__body{display:flex;justify-content:flex-end}
.msg--user .msg__bubble{background:var(--pine);color:var(--on-dark);border-radius:14px 14px 4px 14px;padding:12px 17px;font-size:14.5px;line-height:1.5;max-width:75%}
.msg__text{font-size:15px;line-height:1.65;color:var(--ink)}
.msg__text p{margin-bottom:11px}
.msg__text p:last-child{margin-bottom:0}
.msg__text b{font-weight:700}
.msg__text .num{font-family:var(--font-display);font-weight:700;color:var(--accent-deep)}
.app[data-theme="dark"] .msg__text .num{color:var(--accent)}
.msg__text ul{margin:6px 0 11px;padding-left:2px;list-style:none}
.msg__text li{position:relative;padding-left:20px;margin-bottom:7px;line-height:1.55}
.msg__text li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* sources */
.sources{margin-top:16px;border-top:1px dashed var(--line-2);padding-top:14px}
.sources__h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}
.src{display:flex;align-items:center;gap:11px;padding:10px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:8px;transition:.13s;cursor:pointer;background:var(--paper-2)}
.src:hover{border-color:var(--accent);background:var(--accent-soft)}
.src__logo{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:13px;color:#fff;flex:0 0 auto}
.src__meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.src__name{font-weight:700;font-size:13px;color:var(--ink)}
.src__ref{font-size:11.5px;color:var(--ink-3);font-weight:600;font-family:var(--font-display)}
.src__open{color:var(--ink-3);flex:0 0 auto}

/* fallback (no data) */
.fallback{background:var(--warn-soft);border:1px solid #E6CB8C;border-radius:var(--radius);padding:18px 20px;display:flex;gap:14px}
.app[data-theme="dark"] .fallback{background:rgba(201,138,33,.12);border-color:rgba(201,138,33,.4)}
.fallback__ic{width:34px;height:34px;border-radius:9px;background:#EAD296;color:#7A5410;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.fallback__t{font-size:14.5px;line-height:1.55;color:#6E5212}
.app[data-theme="dark"] .fallback__t{color:#E3B96A}
.fallback__t b{font-weight:700}

/* composer */
.composer{flex:0 0 auto;border-top:1px solid var(--line);background:var(--paper);padding:16px 0 22px}
.composer__in{max-width:760px;margin:0 auto;padding:0 28px}
.composer__box{display:flex;align-items:flex-end;gap:10px;border:1.5px solid var(--line-2);border-radius:var(--radius);background:var(--paper-2);padding:10px 10px 10px 18px;transition:.15s}
.composer__box:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.composer textarea{flex:1;border:0;outline:0;resize:none;background:none;font-family:var(--font-body);font-size:15px;line-height:1.5;color:var(--ink);max-height:140px;padding:6px 0;overflow:hidden}
.composer textarea::placeholder{color:var(--ink-3)}
.composer__send{width:40px;height:40px;border-radius:11px;background:var(--accent);color:#fff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;flex:0 0 auto}
.composer__send:hover{background:var(--accent-deep)}
.composer__send:disabled{background:var(--line-2);cursor:not-allowed}
.composer__hint{text-align:center;font-size:11.5px;color:var(--ink-3);font-weight:600;margin-top:11px}
.composer__hint b{color:var(--accent-deep)}
.app[data-theme="dark"] .composer__hint b{color:var(--accent)}

/* typing */
.typing{display:flex;gap:5px;align-items:center;padding:6px 0}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.4;animation:tw 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes tw{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* =====================================================================
   misc utilities
   ===================================================================== */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.grid-main{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--gap)}
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.spacer{height:var(--gap)}
.divider{height:1px;background:var(--line);margin:var(--gap) 0}

/* =====================================================================
   RESULTAAT — weekly report sheet
   ===================================================================== */
.report{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.report__mast{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px var(--card-pad);border-bottom:2px solid var(--ink)}
.report__doc{text-align:right}
.report__type{display:block;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep)}
.app[data-theme="dark"] .report__type{color:var(--accent)}
.report__meta{display:block;font-size:12px;color:var(--ink-3);font-weight:600;margin-top:4px}
.report__hero{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.rhero{padding:24px var(--card-pad);border-left:1px solid var(--line)}
.rhero:first-child{border-left:0}
.rhero__lbl{font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.rhero__v{font-family:var(--font-display);font-weight:700;font-size:40px;letter-spacing:-.03em;line-height:1;margin-top:12px;color:var(--ink)}
.rhero__v em{font-style:normal;color:var(--accent-deep)}
.app[data-theme="dark"] .rhero__v em{color:var(--accent)}
.rhero__u{font-size:.6em}
.rhero__delta{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:12px;color:var(--ok);margin-top:10px}
.rhero__foot{font-size:12px;color:var(--ink-3);margin-top:6px}
.report__sec{display:grid;grid-template-columns:40px 1fr;gap:0;padding:28px var(--card-pad);border-bottom:1px solid var(--line)}
.report__sq{width:13px;height:13px;background:var(--accent);margin-top:5px}
.report__sec-h{display:flex;align-items:baseline;gap:14px;font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--ink);margin-bottom:20px}
.report__no{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink-3)}
.did-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.did{border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px}
.did__top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.did__ic{width:32px;height:32px;border-radius:8px;background:var(--accent-soft);color:var(--accent-deep);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.app[data-theme="dark"] .did__ic{color:var(--accent)}
.did__p{font-weight:700;font-size:14px;color:var(--ink)}
.did__list{list-style:none;display:flex;flex-direction:column;gap:7px}
.did__list li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.did__list li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.rtbl b{font-weight:600}
.trend{display:flex;align-items:flex-end;gap:14px;height:160px;padding-top:8px}
.trend__col{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;height:100%;justify-content:flex-end}
.trend__bar{width:100%;max-width:54px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:6px 6px 0 0;display:flex;align-items:flex-start;justify-content:center;padding-top:7px;transition:.2s}
.trend__col:last-child .trend__bar{background:var(--accent);border-color:var(--accent)}
.trend__v{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--accent-ink)}
.app[data-theme="dark"] .trend__v{color:var(--accent)}
.trend__col:last-child .trend__v{color:#fff}
.trend__lbl{font-size:11px;font-weight:600;color:var(--ink-3)}
.report__quote{background:var(--pine);color:var(--on-dark);padding:48px var(--card-pad);text-align:center}
.report__quote blockquote{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;line-height:1.1;color:var(--on-dark);max-width:18ch;margin:0 auto}
.report__by{font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2);margin-top:22px}

/* =====================================================================
   CRM DETAIL DRAWER (360° relation view)
   ===================================================================== */
.drawer-scrim{position:fixed;inset:0;background:rgba(6,37,35,.34);z-index:70}
@keyframes dscrim{from{opacity:0}to{opacity:1}}
.drawer{position:fixed;top:0;right:0;height:100vh;width:430px;max-width:92vw;background:var(--paper);border-left:1px solid var(--line);box-shadow:var(--shadow-pop);z-index:71;display:flex;flex-direction:column}
@keyframes dslide{from{transform:translateX(16px)}to{transform:none}}
.drawer__head{padding:22px 24px;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:flex-start;flex:0 0 auto}
.drawer__av{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:20px;flex:0 0 auto}
.drawer__co{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.drawer__contact{font-size:13px;color:var(--ink-3);font-weight:600;margin-top:3px}
.drawer__close{width:36px;height:36px;border-radius:var(--pill);border:1px solid var(--line-2);background:var(--paper-2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2);transition:.15s;flex:0 0 auto}
.drawer__close:hover{border-color:var(--ink);color:var(--ink)}
.drawer__body{flex:1;overflow-y:auto;padding:22px 24px}
.drawer__meta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dmeta{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px}
.dmeta__l{font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.dmeta__v{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--ink);margin-top:5px}
.drawer__mail{display:flex;align-items:center;gap:9px;margin-top:12px;padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;color:var(--accent-deep);text-decoration:none;transition:.13s}
.app[data-theme="dark"] .drawer__mail{color:var(--accent)}
.drawer__mail:hover{border-color:var(--accent);background:var(--accent-soft)}
.drawer__sec{margin-top:26px}
.dsig{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.dsig:last-child{border-bottom:0}
.dsig .src__logo{flex:0 0 auto;border-radius:8px}
.dsig__b{flex:1;min-width:0}
.dsig__t{font-size:14px;line-height:1.45;color:var(--ink)}
.dsig__src{font-size:11.5px;color:var(--ink-3);font-weight:700;margin-top:3px}
.dopen{display:flex;align-items:flex-start;gap:11px;padding:10px 0;font-size:14px;line-height:1.45;color:var(--ink-2)}
.dopen__sq{width:13px;height:13px;border-radius:4px;border:2px solid var(--accent);flex:0 0 auto;margin-top:2px}
.drawer__foot{flex:0 0 auto;padding:16px 24px;border-top:1px solid var(--line)}

/* search button + command palette */
.search{cursor:pointer;font-family:var(--font-body)}
.search__ph{flex:1;text-align:left;font-size:14px;color:var(--ink-3)}
.search__k{font-weight:700;font-size:11px;color:var(--ink-3);background:var(--paper-3);border:1px solid var(--line);border-radius:5px;padding:2px 7px;flex:0 0 auto}

.cmd-scrim{position:fixed;inset:0;background:rgba(6,37,35,.34);z-index:90;display:flex;align-items:flex-start;justify-content:center;padding:13vh 20px 20px}
.cmd{width:100%;max-width:620px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);overflow:hidden;display:flex;flex-direction:column;max-height:72vh}
@keyframes cmdpop{from{transform:translateY(-8px)}to{transform:none}}
@media (prefers-reduced-motion: no-preference){
  .drawer{animation:dslide .26s cubic-bezier(.4,0,.1,1)}
  .cmd{animation:cmdpop .2s cubic-bezier(.4,0,.1,1)}
}
.cmd__in{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);flex:0 0 auto}
.cmd__in input{flex:1;border:0;outline:0;background:none;font-family:var(--font-body);font-size:16px;color:var(--ink);min-width:0}
.cmd__in input::placeholder{color:var(--ink-3)}
.cmd__esc{font-weight:700;font-size:11px;color:var(--ink-3);background:var(--paper-3);border:1px solid var(--line);border-radius:5px;padding:3px 8px;flex:0 0 auto}
.cmd__body{flex:1;overflow-y:auto;padding:8px}
.cmd__grp{margin-bottom:6px}
.cmd__glabel{font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:10px 12px 6px}
.cmd__row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;background:none;border-radius:var(--radius-sm);cursor:pointer;text-align:left;transition:.1s}
.cmd__row:hover{background:var(--paper-3)}
.cmd__ic{width:30px;height:30px;border-radius:8px;background:var(--accent-soft);color:var(--accent-deep);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.app[data-theme="dark"] .cmd__ic{color:var(--accent)}
.cmd__label{font-weight:600;font-size:14px;color:var(--ink);flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmd__meta{font-size:12.5px;color:var(--ink-3);margin-left:auto;white-space:nowrap;flex:0 0 auto;padding-left:12px}
.cmd__ar{color:var(--ink-3);flex:0 0 auto;opacity:0;transition:.1s}
.cmd__row:hover .cmd__ar{opacity:1}
.cmd__empty{padding:18px}
.cmd__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line);background:var(--paper);flex:0 0 auto}
.cmd__foot-l{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--ink-3)}
.cmd__ask{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body);font-weight:700;font-size:12.5px;color:var(--accent-deep);background:var(--accent-soft);border:0;border-radius:var(--pill);padding:7px 13px;cursor:pointer}
.app[data-theme="dark"] .cmd__ask{color:var(--accent)}

/* settings */
.sw{width:42px;height:24px;border-radius:999px;background:var(--line-2);border:0;cursor:pointer;position:relative;transition:.16s;flex:0 0 auto}
.sw.on{background:var(--accent)}
.sw__k{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.16s}
.sw.on .sw__k{left:21px}
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.kv__l{font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.kv__v{font-size:15px;font-weight:600;color:var(--ink)}
.perm{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.perm:last-child{border-bottom:0}
.perm__logo{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}
.perm__meta{flex:1;min-width:0}
.perm__name{font-weight:700;font-size:14px;color:var(--ink)}
.perm__cat{font-size:12px;color:var(--ink-3);font-weight:600;margin-top:1px}
.perm__role{font-size:12.5px;color:var(--ink-3);font-weight:600}
.perm__role b{color:var(--ink-2)}
.perm__sw{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.perm__state{font-size:12.5px;font-weight:700;color:var(--ink-3);width:98px;text-align:right}
.perm__state.on{color:var(--accent-deep)}
.app[data-theme="dark"] .perm__state.on{color:var(--accent)}
.secgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.seccard{border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;align-items:flex-start}
.seccard__ic{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent-deep);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.app[data-theme="dark"] .seccard__ic{color:var(--accent)}
.seccard__t{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--ink);margin-bottom:7px}
.seccard__p{font-size:13px;line-height:1.5;color:var(--ink-2)}

/* acties — approval inbox */
.act{display:flex;gap:16px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2);align-items:flex-start;transition:.16s}
.act:hover{border-color:var(--line-2);box-shadow:0 14px 32px -26px rgba(6,37,35,.35)}
.act--review{border-color:#E6CB8C}
.act__ic{width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--accent-deep);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.app[data-theme="dark"] .act__ic{color:var(--accent)}
.act__ic.warn{background:var(--warn-soft);color:#8A5E10}
.act__b{flex:1;min-width:0}
.act__t{font-weight:700;font-size:15px;color:var(--ink);letter-spacing:-.01em}
.act__d{font-size:13.5px;line-height:1.5;color:var(--ink-2);margin-top:5px}
.act__m{font-size:12px;color:var(--ink-3);font-weight:600;margin-top:10px;display:flex;gap:8px;align-items:center;white-space:nowrap}
.act__acts{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:14px}
.act__x{width:34px;height:34px;border-radius:9px;border:1px solid var(--line-2);background:none;color:var(--ink-3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.13s;flex:0 0 auto}
.act__x:hover{border-color:var(--danger);color:var(--danger)}

/* entrance — transform-only so content is never hidden if animations are paused */
.view{animation:viewin .24s ease}
@keyframes viewin{from{transform:translateY(7px)}to{transform:none}}
@media (prefers-reduced-motion: reduce){.view{animation:none}}

@media(max-width:1080px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .integ-grid,.grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-main{grid-template-columns:1fr}
  .chat-rail{display:none}
  .secgrid,.kv{grid-template-columns:1fr}
  .perm__role{display:none}
  .report__hero{grid-template-columns:repeat(2,1fr)}
  .rhero:nth-child(3){border-left:0}
}
@media(max-width:920px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;top:0;left:0;bottom:0;width:284px;z-index:80;transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.1,1);box-shadow:24px 0 60px -30px rgba(0,0,0,.55)}
  .side.is-open{transform:none}
  .topbar__burger{display:inline-flex}
  .topbar{padding:0 16px;gap:10px}
  .crumb{display:none}
  .search{width:auto;padding:9px}
  .search__ph,.search__k{display:none}
  .lang-toggle{display:none}
  .page,.page--wide{padding:22px 16px 64px}
  .phead__h{font-size:27px}
  .pillars,.suggest{grid-template-columns:1fr}
  .triage{grid-template-columns:1fr}
  .chatinner,.composer__in{padding-left:18px;padding-right:18px}
  .kb-bar__head,.kb-panel{padding-left:18px;padding-right:18px}
  .act{flex-wrap:wrap}
  .drawer{width:100%}
  .report__hero{grid-template-columns:1fr 1fr}
  .report__sec{grid-template-columns:1fr}
  .report__sq{display:none}
  .did-grid{grid-template-columns:1fr}
  .trend{gap:8px;height:140px}
}