/* =========================================================================
   WorkPulse Executive OS — design system
   Light, quiet, generous. One accent colour. Type does the hierarchy work.
   ========================================================================= */

:root{
  /* surface */
  --bg:#F7F9FB;
  --surface:#FFFFFF;
  --surface-2:#FBFCFD;
  --sidebar:#FFFFFF;

  /* ink */
  --ink:#0E1520;
  --ink-2:#3C4757;
  --ink-3:#6B7789;
  --ink-4:#98A2B3;

  /* line */
  --line:#E9EDF2;
  --line-2:#DFE5EC;

  /* accent — soft green */
  --accent:#0F9B6C;
  --accent-ink:#08774F;
  --accent-soft:#E8F6F0;
  --accent-soft-2:#D3EEE3;

  /* semantic */
  --up:#0F9B6C;
  --down:#DC3B3B;
  --flat:#98A2B3;
  --warn:#B7791F;
  --warn-soft:#FDF6E7;
  --crit:#C4322E;
  --crit-soft:#FDF0EF;
  --info:#2563EB;
  --info-soft:#EEF3FE;

  /* badge tones */
  --superstar:#7C3AED; --superstar-soft:#F3EEFE;
  --top:#D9730D;       --top-soft:#FDF2E6;
  --strong:#0F9B6C;    --strong-soft:#E8F6F0;
  --developing:#2563EB;--developing-soft:#EEF3FE;
  --support:#B7791F;   --support-soft:#FDF6E7;
  --risk:#C4322E;      --risk-soft:#FDF0EF;
  --new:#5B6472;       --new-soft:#F1F3F6;

  --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:22px;
  --sh-1:0 1px 2px rgba(16,24,40,.05);
  --sh-2:0 1px 3px rgba(16,24,40,.06), 0 6px 16px -8px rgba(16,24,40,.10);
  --sh-3:0 12px 32px -12px rgba(16,24,40,.18);

  --sidebar-w:248px;
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
         "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"tnum" 0;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.018em}
h1{font-size:26px;letter-spacing:-.028em}
h2{font-size:18px}
h3{font-size:15px}
p{margin:0}
::selection{background:var(--accent-soft-2)}

/* ---------------------------------------------------------------- layout */
.app{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:var(--sidebar);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:10px;padding:20px 18px 14px}
.brand-mark{
  width:30px;height:30px;border-radius:9px;flex:none;
  background:linear-gradient(140deg,var(--accent),#12B981);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px;
  box-shadow:0 2px 8px -2px rgba(15,155,108,.55);
}
.brand-name{font-weight:650;letter-spacing:-.02em;font-size:14.5px}
.brand-sub{font-size:10.5px;color:var(--ink-4);letter-spacing:.09em;text-transform:uppercase;font-weight:600}

.nav{flex:1;overflow-y:auto;padding:4px 10px 16px}
.nav-section{margin-top:14px}
.nav-label{
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-4);font-weight:650;padding:6px 8px 4px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:7.5px 9px;border-radius:9px;
  color:var(--ink-2);font-weight:500;font-size:13.5px;margin-bottom:1px;
  transition:background .13s ease,color .13s ease;
}
.nav-item:hover{background:#F4F6F9;color:var(--ink)}
.nav-item.active{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.nav-item.active .ico{color:var(--accent)}
.ico{width:16px;height:16px;flex:none;color:var(--ink-4);stroke-width:1.9}
.nav-item .pill{margin-left:auto}

.sidebar-foot{padding:12px;border-top:1px solid var(--line)}
.me{display:flex;align-items:center;gap:10px;padding:8px;border-radius:11px}
.me:hover{background:#F4F6F9}
.me-name{font-size:13px;font-weight:600;line-height:1.25}
.me-role{font-size:11.5px;color:var(--ink-4)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  height:60px;display:flex;align-items:center;gap:14px;padding:0 26px;
  background:rgba(247,249,251,.82);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;
}
.topbar h1{font-size:17px;font-weight:600}
.topbar .spacer{flex:1}
.searchbtn{
  display:flex;align-items:center;gap:8px;height:32px;padding:0 10px 0 11px;
  border:1px solid var(--line-2);background:var(--surface);border-radius:9px;
  color:var(--ink-4);font-size:13px;cursor:pointer;transition:border-color .15s,box-shadow .15s;
}
.searchbtn:hover{border-color:#CBD5E1;box-shadow:var(--sh-1)}
.kbd{
  font-family:var(--mono);font-size:10.5px;background:#F1F4F8;border:1px solid var(--line-2);
  border-radius:5px;padding:1px 5px;color:var(--ink-3);
}
.iconbtn{
  width:32px;height:32px;display:grid;place-items:center;border-radius:9px;
  border:1px solid var(--line-2);background:var(--surface);cursor:pointer;position:relative;
  transition:border-color .15s,box-shadow .15s;
}
.iconbtn:hover{border-color:#CBD5E1;box-shadow:var(--sh-1)}
.dot{
  position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;
  background:var(--crit);color:#fff;border-radius:999px;font-size:10px;font-weight:700;
  display:grid;place-items:center;border:2px solid var(--bg);
}

.page{padding:26px;max-width:1400px;width:100%;margin:0 auto}
.page-head{margin-bottom:20px}
.page-head .eyebrow{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);font-weight:650}
.page-head .sub{color:var(--ink-3);margin-top:4px;font-size:13.5px}
.head-row{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.head-row .spacer{flex:1}

/* ----------------------------------------------------------------- cards */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.card-lg{border-radius:var(--r-xl)}
.card-pad{padding:20px}
.card-head{
  display:flex;align-items:center;gap:10px;padding:16px 20px 0;
}
.card-head h3{font-size:14.5px}
.card-head .spacer{flex:1}
.card-note{font-size:12.5px;color:var(--ink-4)}
.card-body{padding:16px 20px 20px}
.card-sep{height:1px;background:var(--line);margin:0}

.grid{display:grid;gap:14px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.span-2{grid-column:span 2}
.span-3{grid-column:span 3}
.span-4{grid-column:span 4}

/* ------------------------------------------------------------- stat tile */
.stat{padding:16px 18px 15px;display:flex;flex-direction:column;gap:2px}
.stat .label{
  font-size:11.5px;color:var(--ink-3);font-weight:600;letter-spacing:.01em;
  display:flex;align-items:center;gap:5px;
}
.stat .value{font-size:25px;font-weight:660;letter-spacing:-.035em;line-height:1.18;margin-top:5px}
.stat .value.sm{font-size:21px}
.stat .meta{font-size:12px;color:var(--ink-4);margin-top:2px}
.delta{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:620}
.delta.up{color:var(--up)} .delta.down{color:var(--down)} .delta.flat{color:var(--flat)}

/* --------------------------------------------------------------- hero kpi */
.hero{
  display:flex;align-items:center;gap:26px;padding:22px 24px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FCFEFD 100%);
  border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-2);
}
.health-ring{position:relative;width:112px;height:112px;flex:none}
.health-ring svg{transform:rotate(-90deg)}
.health-val{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
}
.health-val b{display:block;font-size:30px;font-weight:680;letter-spacing:-.04em;line-height:1}
.health-val span{font-size:10.5px;color:var(--ink-4);letter-spacing:.07em;text-transform:uppercase;font-weight:650}
.hero-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;flex:1}
.hero-fact .k{font-size:11.5px;color:var(--ink-3);font-weight:600}
.hero-fact .v{font-size:20px;font-weight:660;letter-spacing:-.03em;margin-top:3px}

/* ---------------------------------------------------------------- badges */
.badge{
  display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;
  border-radius:7px;font-size:11px;font-weight:700;letter-spacing:.03em;white-space:nowrap;
}
.badge .b-ico{font-size:11px;line-height:1}
.badge.superstar{background:var(--superstar-soft);color:var(--superstar)}
.badge.top{background:var(--top-soft);color:var(--top)}
.badge.strong{background:var(--strong-soft);color:var(--strong)}
.badge.developing{background:var(--developing-soft);color:var(--developing)}
.badge.support{background:var(--support-soft);color:var(--warn)}
.badge.risk{background:var(--risk-soft);color:var(--risk)}
.badge.new{background:var(--new-soft);color:var(--new)}
.badge.ghost{background:#F3F5F8;color:var(--ink-3);font-weight:600}

.pill{
  display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:6px;
  font-size:11px;font-weight:650;background:#F1F4F8;color:var(--ink-3);
}
.pill.crit{background:var(--crit-soft);color:var(--crit)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.info{background:var(--info-soft);color:var(--info)}
.pill.ok{background:var(--accent-soft);color:var(--accent-ink)}

/* ------------------------------------------------------------- sale card */
.sale-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.sale-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:18px;box-shadow:var(--sh-1);transition:box-shadow .18s ease,transform .18s ease,border-color .18s;
  display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;
}
.sale-card:hover{box-shadow:var(--sh-2);transform:translateY(-1px);border-color:var(--line-2)}
.sale-card .rank{
  position:absolute;top:14px;right:16px;font-size:12px;font-weight:700;color:var(--ink-4);
}
.sc-head{display:flex;align-items:center;gap:11px}
.avatar{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  font-weight:680;font-size:13px;color:#fff;flex:none;letter-spacing:.02em;
}
.sc-name{font-weight:650;font-size:14.5px;letter-spacing:-.015em;line-height:1.2}
.sc-team{font-size:11.5px;color:var(--ink-4);margin-top:1px}
.sc-score{display:flex;align-items:baseline;gap:10px}
.sc-score .n{font-size:32px;font-weight:680;letter-spacing:-.045em;line-height:1}
.sc-score .g{font-size:13px;font-weight:650}
.sc-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 8px}
.sc-metrics .m .k{font-size:10.5px;color:var(--ink-4);font-weight:600;letter-spacing:.01em}
.sc-metrics .m .v{font-size:13.5px;font-weight:640;margin-top:1px;letter-spacing:-.01em}
.sc-tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{font-size:11px;padding:2px 7px;border-radius:6px;background:#F3F5F8;color:var(--ink-3);font-weight:580}
.tag.good{background:var(--accent-soft);color:var(--accent-ink)}
.tag.bad{background:var(--warn-soft);color:var(--warn)}
.spark{font-family:var(--mono);font-size:15px;letter-spacing:1px;color:var(--accent);line-height:1}
.sc-foot{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:2px}
.sc-foot .spacer{flex:1}

/* -------------------------------------------------------------- progress */
.bar{height:6px;border-radius:99px;background:#EEF1F5;overflow:hidden}
.bar > i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .5s cubic-bezier(.2,.7,.3,1)}
.bar.warn > i{background:var(--warn)} .bar.crit > i{background:var(--crit)}
.bar.thin{height:4px}

.pillar{display:grid;grid-template-columns:104px 1fr 46px;align-items:center;gap:12px;padding:7px 0}
.pillar .pl{font-size:12.5px;color:var(--ink-2);font-weight:560}
.pillar .pv{font-size:13px;font-weight:660;text-align:right;letter-spacing:-.01em}
.pillar .pw{font-size:10.5px;color:var(--ink-4);font-weight:600}

/* --------------------------------------------------------------- tables */
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.table th{
  text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);font-weight:680;padding:0 14px 9px;white-space:nowrap;
}
.table td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:middle}
.table tbody tr:hover td{background:var(--surface-2)}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto;margin:0 -20px;padding:0 20px}

/* --------------------------------------------------------------- inputs */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.field .hint{font-size:11.5px;color:var(--ink-4)}
.input,.select,textarea.input{
  height:38px;padding:0 12px;border:1px solid var(--line-2);border-radius:10px;
  background:var(--surface);outline:none;transition:border-color .15s,box-shadow .15s;width:100%;
}
textarea.input{height:auto;padding:10px 12px;line-height:1.5;resize:vertical}
.input:focus,.select:focus,textarea.input:focus{
  border-color:var(--accent);box-shadow:0 0 0 3.5px var(--accent-soft);
}
.select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7789' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:32px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 15px;
  border-radius:10px;border:1px solid var(--line-2);background:var(--surface);
  font-weight:600;font-size:13.5px;cursor:pointer;white-space:nowrap;
  transition:background .14s,border-color .14s,box-shadow .14s,transform .06s;
}
.btn:hover{border-color:#CBD5E1;box-shadow:var(--sh-1)}
.btn:active{transform:translateY(.5px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(15,155,108,.35)}
.btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn.danger{color:var(--crit);border-color:#F3D6D5}
.btn.danger:hover{background:var(--crit-soft)}
.btn.sm{height:30px;padding:0 11px;font-size:12.5px;border-radius:8px}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:#F1F4F8;box-shadow:none}

.seg{display:inline-flex;background:#F1F4F8;border-radius:10px;padding:2.5px;gap:2px;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg a{
  padding:5px 11px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--ink-3);
  transition:background .14s,color .14s;
}
.seg a:hover{color:var(--ink)}
.seg a.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}

/* --------------------------------------------------------------- insight */
.insight{display:flex;gap:11px;padding:12px 0;border-top:1px solid var(--line)}
.insight:first-child{border-top:none;padding-top:2px}
.insight .ib{width:4px;border-radius:99px;flex:none;background:var(--info)}
.insight.critical .ib{background:var(--crit)}
.insight.warning .ib{background:var(--warn)}
.insight.positive .ib{background:var(--accent)}
.insight .it{font-size:13.5px;color:var(--ink);line-height:1.5}
.insight .ia{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.insight .ia b{color:var(--ink-2);font-weight:620}

/* ---------------------------------------------------------------- alerts */
.alert-row{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line);align-items:flex-start}
.alert-row:first-child{border-top:none}
.sev{
  width:8px;height:8px;border-radius:99px;margin-top:6px;flex:none;background:var(--info);
}
.sev.critical{background:var(--crit);box-shadow:0 0 0 3px var(--crit-soft)}
.sev.warning{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.sev.info{background:var(--info);box-shadow:0 0 0 3px var(--info-soft)}

/* ---------------------------------------------------------------- funnel */
.funnel-step{display:grid;grid-template-columns:150px 1fr 120px;gap:14px;align-items:center;padding:9px 0}
.funnel-bar{height:30px;border-radius:9px;background:#F1F4F8;overflow:hidden;position:relative}
.funnel-bar > i{
  display:block;height:100%;background:linear-gradient(90deg,var(--accent),#25B98A);
  border-radius:9px;transition:width .6s cubic-bezier(.2,.7,.3,1);
}
.funnel-bar .fv{position:absolute;inset:0;display:flex;align-items:center;padding-left:11px;font-size:12.5px;font-weight:650;color:#fff;mix-blend-mode:normal}
.funnel-conv{font-size:12.5px;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------- tooltip */
.tt{position:relative;display:inline-flex;align-items:center}
.tt .q{
  width:14px;height:14px;border-radius:99px;border:1px solid var(--line-2);color:var(--ink-4);
  font-size:9.5px;font-weight:700;display:grid;place-items:center;cursor:help;background:var(--surface);
}
.tt .tip{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(3px);
  background:#111826;color:#F3F5F8;font-size:12px;font-weight:450;line-height:1.45;
  padding:9px 11px;border-radius:9px;width:250px;opacity:0;pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;z-index:80;box-shadow:var(--sh-3);
}
.tt:hover .tip{opacity:1;transform:translateX(-50%) translateY(0)}
.tt .tip::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#111826;
}

/* ------------------------------------------------------------ empty state */
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:44px 24px;text-align:center;gap:6px;
}
.empty .em-ico{
  width:44px;height:44px;border-radius:14px;background:var(--accent-soft);
  display:grid;place-items:center;color:var(--accent);margin-bottom:6px;
}
.empty h3{font-size:15px}
.empty p{color:var(--ink-3);font-size:13.5px;max-width:380px}
.empty .btn{margin-top:10px}

/* ------------------------------------------------------------- onboarding */
.onb{display:flex;align-items:center;gap:16px;padding:14px 18px;background:linear-gradient(100deg,#F2FBF7,#FFFFFF 60%);border:1px solid var(--accent-soft-2);border-radius:var(--r-lg)}
.onb-steps{display:flex;gap:7px;flex-wrap:wrap;flex:1}
.onb-step{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:580;color:var(--ink-3);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:4px 9px}
.onb-step.done{color:var(--accent-ink);border-color:var(--accent-soft-2);background:var(--accent-soft)}
.onb-step .ck{width:14px;height:14px;border-radius:99px;border:1.5px solid var(--line-2);display:grid;place-items:center;font-size:9px}
.onb-step.done .ck{background:var(--accent);border-color:var(--accent);color:#fff}

/* ------------------------------------------------------------ command bar */
.cmdk-back{position:fixed;inset:0;background:rgba(15,23,32,.28);backdrop-filter:blur(3px);z-index:100;display:none}
.cmdk-back.on{display:block}
.cmdk{
  position:fixed;top:12vh;left:50%;transform:translateX(-50%);width:min(620px,92vw);
  background:var(--surface);border-radius:16px;box-shadow:var(--sh-3);z-index:101;
  overflow:hidden;border:1px solid var(--line);display:none;
}
.cmdk.on{display:block}
.cmdk input{
  width:100%;height:52px;border:0;outline:none;padding:0 18px;font-size:15px;
  border-bottom:1px solid var(--line);
}
.cmdk-list{max-height:56vh;overflow-y:auto;padding:6px}
.cmdk-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;cursor:pointer}
.cmdk-item.on,.cmdk-item:hover{background:var(--accent-soft)}
.cmdk-item .t{font-size:13.5px;font-weight:580}
.cmdk-item .s{font-size:11.5px;color:var(--ink-4);margin-left:auto}

/* -------------------------------------------------------------- flash msg */
.flashes{position:fixed;top:14px;right:16px;z-index:120;display:flex;flex-direction:column;gap:8px;max-width:400px}
.flash{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 14px;
  box-shadow:var(--sh-3);font-size:13.5px;display:flex;gap:9px;align-items:flex-start;
  animation:slide .25s cubic-bezier(.2,.8,.3,1);
}
.flash.success{border-left:3px solid var(--accent)}
.flash.error{border-left:3px solid var(--crit)}
.flash.warning{border-left:3px solid var(--warn)}
@keyframes slide{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- charts */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .grid-line{stroke:var(--line);stroke-width:1}
.chart .area{fill:url(#gradAccent)}
.chart .line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .pt{fill:var(--accent)}
.chart .lbl{font-size:10px;fill:var(--ink-4)}

.bars{display:flex;align-items:flex-end;gap:3px;height:56px}
.bars i{flex:1;background:var(--accent-soft-2);border-radius:3px 3px 0 0;min-height:2px;transition:height .4s}
.bars i.hi{background:var(--accent)}

/* ------------------------------------------------------------ distribution */
.dist{display:flex;height:10px;border-radius:99px;overflow:hidden;background:#F1F4F8}
.dist i{display:block;height:100%}
.dist-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.dist-legend span{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
.dist-legend .sw{width:9px;height:9px;border-radius:3px}

/* ------------------------------------------------------------------ misc */
.muted{color:var(--ink-3)}
.tiny{font-size:11.5px}
.small{font-size:12.5px}
.mono{font-family:var(--mono);font-size:12.5px}
.row{display:flex;align-items:center;gap:10px}
.row.wrap{flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:14px}
.stack.sm{gap:8px}
.right{margin-left:auto}
.nowrap{white-space:nowrap}
.divider{height:1px;background:var(--line);margin:14px 0}
.tnum{font-variant-numeric:tabular-nums}
.link{color:var(--accent-ink);font-weight:600}
.link:hover{text-decoration:underline}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;margin-bottom:18px}
.tabs a{
  padding:9px 13px;font-size:13.5px;font-weight:580;color:var(--ink-3);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--accent-ink);border-bottom-color:var(--accent);font-weight:640}

.avatar-sm{width:28px;height:28px;border-radius:9px;font-size:11px}
.avatar-lg{width:56px;height:56px;border-radius:17px;font-size:18px}

/* ------------------------------------------------------------ responsive */
@media (max-width:1180px){
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  :root{--sidebar-w:0px}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;width:266px;flex-basis:266px;z-index:90;
    transform:translateX(-100%);transition:transform .22s cubic-bezier(.2,.8,.3,1);
    box-shadow:var(--sh-3);
  }
  body.nav-open .sidebar{transform:none}
  body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(15,23,32,.3);z-index:80}
  .menubtn{display:grid !important}
  .page{padding:18px 16px 40px}
  .g-2,.g-3,.g-4,.g-6{grid-template-columns:1fr}
  .span-2,.span-3,.span-4{grid-column:span 1}
  .hero{flex-direction:column;align-items:stretch;gap:18px;padding:20px 18px}
  .hero .health-ring{align-self:center}
  .hero-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topbar{padding:0 16px}
  .funnel-step{grid-template-columns:100px 1fr;grid-template-rows:auto auto}
  .funnel-conv{grid-column:2;text-align:left}
  .pillar{grid-template-columns:88px 1fr 40px}
  .onb{flex-direction:column;align-items:stretch;gap:10px}
  .onb-steps{width:100%}
  .seg{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .seg a{white-space:nowrap}
  .head-row{gap:12px}
  .sale-grid{grid-template-columns:1fr}
  .hero-facts{gap:14px}
  .table{font-size:13px}
  .stat .value{font-size:22px}
}
.menubtn{display:none}