/* ════════════════════════════════════════════════════════════
   Elera · Patient Flow — design system
   Tokens sampled directly from the reference shot.
   ════════════════════════════════════════════════════════════ */
:root{
  /* surfaces */
  --bg:#F6F5F3;
  --surface:#FFFFFF;
  --container:#E9E8E4;
  --container-green:#DFEDD3;
  --card-left:#EDF4E8;

  /* ink */
  --ink:#17181A;
  --t2:#5F5E59;
  --t3:#908F89;
  --line:#E7E6E2;
  --line-strong:#DBDAD5;

  /* greens */
  --lime-bg:#E4F7C4;   --lime-tx:#4E9A22;
  --nav-green:#7DD571; --nav-green-tx:#142B0D;
  --inv-a:#95DE88;     --inv-b:#81D373; --inv-tx:#173410;
  --prog:#3F9E33;

  /* warm / alerts */
  --rose-bg:#FBDDD8;   --rose-tx:#C74B37;
  --amber-bg:#F8EBC4;  --amber-tx:#96762B;
  --pale-bg:#FAF3DA;   --pale-tx:#A68C43;
  --note-bg:#FAF3DC;   --note-tx:#8B6F35;
  --breach-bg:#FBD9D5; --breach-tx:#B3301F;

  /* neutrals for controls */
  --chip-fill:#FFFFFF; --chip-line:#E5E4E0;
  --kbd-bg:#FAFAF7;

  /* motion */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-spring:cubic-bezier(.32,.72,.25,1);

  --sidebar-w:300px;
  --topbar-h:76px;
}

/* ── reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Noto Sans SC",sans-serif;
  background:var(--bg);color:var(--ink);
  font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow:hidden;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
/* global icon defaults — stroke outline everywhere unless a rule opts into fills */
svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;width:18px;height:18px}
svg.icon{width:20px;height:20px}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid rgba(125,213,113,.85);outline-offset:2px;border-radius:8px}
::selection{background:rgba(125,213,113,.35)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#D8D7D1;border-radius:8px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

body.compact{font-size:13.4px}

/* ═══════════ LAYOUT SHELL ═══════════ */
#app{display:flex;height:100vh;width:100vw}

.sidebar{
  width:var(--sidebar-w);flex:none;
  display:flex;flex-direction:column;
  padding:12px 14px 16px;
  transition:width .38s var(--e-spring);
  overflow:hidden;
}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.view-host{flex:1;min-height:0;outline:none}

/* collapse to rail */
body.rail .sidebar{width:78px}
body.rail .brand-name,
body.rail .brand-chev,
body.rail .nav-label,
body.rail .nav-item>span,
body.rail .nav-item .nav-count{display:none}
body.rail .nav-item{justify-content:center;padding:0}
body.rail .side-top{justify-content:center}
body.rail .collapse-btn{margin:0}
body.rail .collapse-btn svg{transform:scaleX(-1)}
body.rail .nav-item{position:relative}
body.rail .nav-item::after{
  content:attr(data-tip);position:absolute;left:calc(100% + 14px);top:50%;
  transform:translateY(-50%) scale(.9);opacity:0;pointer-events:none;
  background:#23231F;color:#fff;font-size:12.5px;font-weight:500;
  padding:6px 10px;border-radius:8px;white-space:nowrap;
  transition:opacity .18s,transform .18s var(--e-out);z-index:60;
}
body.rail .nav-item:hover::after{opacity:1;transform:translateY(-50%) scale(1)}

/* ── sidebar pieces ─────────────────────────────────────── */
.side-top{display:flex;align-items:center;gap:8px;height:48px;margin-bottom:4px;flex:none}
.brand{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;transition:background .2s}
.brand:hover{background:rgba(23,22,16,.045)}
.brand-mark{width:27px;height:27px;flex:none}
.brand-mark svg{width:100%;height:100%;fill:#161613}
.brand-mark .hole{fill:var(--bg)}
.brand-name{font-size:21px;font-weight:700;letter-spacing:-.015em}
.brand-chev{width:15px;height:15px;color:var(--t3);stroke-width:2.2}
.collapse-btn{
  margin-left:auto;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;color:var(--t2);
  transition:background .2s,transform .2s;
}
.collapse-btn:hover{background:rgba(23,22,16,.05)}
.collapse-btn:active{transform:scale(.92)}
.collapse-btn .icon{width:19px;height:19px}

.side-nav{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:2px 2px 8px}
.nav-group+.nav-group{margin-top:26px}
.side-flex{flex:1;min-height:20px}
.nav-label{font-size:13px;color:var(--t3);padding:0 10px 7px;font-weight:500}
.nav-item{
  display:flex;align-items:center;gap:12px;width:100%;
  height:44px;padding:0 11px;border-radius:14px;
  font-size:15px;font-weight:520;color:#23221F;text-align:left;
  transition:background .22s var(--e-out),color .22s,transform .18s;
}
.nav-item+.nav-item{margin-top:2px}
.nav-item .icon{color:var(--t2);transition:color .22s}
.nav-item:hover{background:rgba(23,22,16,.05)}
.nav-item:active{transform:scale(.985)}
.nav-item.active{
  background:linear-gradient(180deg,#83D876,#77D069);
  color:var(--nav-green-tx);font-weight:620;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 1px 2px rgba(50,110,35,.18);
}
.nav-item.active .icon{color:#13300C}
.nav-count{
  margin-left:auto;font-style:normal;min-width:22px;height:22px;padding:0 6px;
  border-radius:11px;background:#E7E6E1;color:#57564F;
  font-size:12px;font-weight:600;display:grid;place-items:center;
  transition:background .22s,color .22s;
}
.nav-item.active .nav-count{background:rgba(15,42,8,.14);color:#12300C}

/* ═══════════ TOP BAR ═══════════ */
.topbar{
  height:var(--topbar-h);flex:none;
  display:flex;align-items:center;gap:14px;
  padding:20px 36px 0;
}
.page-title{font-size:29px;font-weight:700;letter-spacing:-.02em}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:9px}

.searchbox{
  width:242px;height:42px;border-radius:12px;
  background:var(--surface);border:1px solid var(--chip-line);
  display:flex;align-items:center;padding:0 8px 0 13px;gap:9px;
  transition:border-color .2s,box-shadow .2s,width .3s var(--e-out);
}
.searchbox:focus-within{border-color:#C9E8BF;box-shadow:0 0 0 3px rgba(125,213,113,.18)}
.searchbox input{flex:1;min-width:0;border:none;outline:none;background:none;font-size:14px}
.searchbox input::placeholder{color:var(--t3)}
.searchbox kbd{
  height:24px;padding:0 7px;border-radius:6px;flex:none;
  border:1px solid var(--line);background:var(--kbd-bg);
  font-size:11.5px;color:var(--t3);font-family:inherit;display:flex;align-items:center;
}

.icon-btn{
  width:40px;height:40px;border-radius:12px;position:relative;
  display:grid;place-items:center;color:#45443F;
  transition:background .2s,transform .16s;
}
.icon-btn:hover{background:rgba(23,22,16,.06)}
.icon-btn:active{transform:scale(.93)}
.bell-dot{
  position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;
  background:#E2604F;box-shadow:0 0 0 2px var(--bg);
}
.new-btn{
  height:42px;padding:0 17px;border-radius:13px;
  background:#1B1C1E;color:#fff;
  display:flex;align-items:center;gap:7px;
  font-size:14.5px;font-weight:600;
  transition:transform .18s var(--e-out),box-shadow .2s,background .2s;
}
.new-btn .icon{width:16px;height:16px;stroke-width:2.4}
.new-btn:hover{background:#26272A;transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(20,20,16,.4)}
.new-btn:active{transform:scale(.96)}
.avatar-btn{
  width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none;
  transition:transform .2s var(--e-out),box-shadow .2s;
}
.avatar-btn svg{width:100%;height:100%;display:block}
.avatar-btn:hover{transform:translateY(-1px) scale(1.03);box-shadow:0 0 0 3px #fff,0 0 0 5.5px rgba(125,213,113,.7)}

/* ═══════════ PATIENT FLOW PAGE ═══════════ */
.flow{display:flex;flex-direction:column;height:100%;padding:0 0 10px}

/* — stats bar — */
.stats-bar{
  flex:none;margin:14px 36px 16px;
  display:flex;background:var(--surface);border-radius:18px;
  box-shadow:0 1px 2px rgba(23,22,16,.04),0 10px 26px -18px rgba(23,22,16,.18);
  min-height:102px;
}
.stat-cell{flex:1;display:flex;align-items:center;gap:16px;padding:18px 26px;position:relative;min-width:0}
.stat-cell+.stat-cell::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:54px;background:#EEEDE9}
.sq-icon{
  width:46px;height:46px;border-radius:15px;flex:none;
  background:linear-gradient(180deg,#3A3944,#232228);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 6px -2px rgba(20,20,26,.5);
  display:grid;place-items:center;color:#fff;
}
.sq-icon svg{width:22px;height:22px;stroke-width:1.6}
.stat-txt{min-width:0}
.stat-label{font-size:13.5px;color:var(--t2);white-space:nowrap}
.stat-value{
  font-size:29px;font-weight:650;letter-spacing:-.02em;line-height:1.15;
  display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums;
}
.stat-unit{font-size:15px;font-weight:500;color:#33322E;letter-spacing:0}
.stat-badge{
  margin-left:auto;flex:none;height:25px;padding:0 10px;border-radius:8px;
  display:flex;align-items:center;font-size:12.5px;font-weight:600;
  background:var(--lime-bg);color:var(--lime-tx);
  transition:transform .3s var(--e-out);
}
.stat-badge.red{background:#FCD8D4;color:var(--breach-tx)}
.stat-badge.pop{animation:badge-pop .5s var(--e-spring)}

/* — filter rows — */
.flow-toolbar{flex:none;padding:0 36px;display:flex;flex-direction:column;gap:10px}
.chip-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chip-sep{width:1px;height:22px;background:#DFDEDA;margin:0 4px;flex:none}

.chip{
  height:38px;padding:0 16px;border-radius:999px;
  background:var(--chip-fill);border:1px solid var(--chip-line);
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:500;color:#3D3C38;white-space:nowrap;
  box-shadow:0 1px 1.5px rgba(23,22,16,.04);
  transition:all .24s var(--e-out);
}
button.chip:hover{border-color:#CFCEC8;transform:translateY(-.5px)}
button.chip:active{transform:scale(.96)}
.chip.on{background:#1C1D1F;border-color:#1C1D1F;color:#fff;font-weight:550}
.chip.on:hover{border-color:#1C1D1F}
.chip .chev{width:15px;height:15px;color:var(--t3);stroke-width:2.2;margin-right:-5px}
.chip.on .chev{color:#bbb}

.qcount{
  min-width:20px;height:20px;padding:0 5px;border-radius:10px;
  background:#F0EFEA;color:#67665F;font-size:11.5px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .24s,color .24s;
}
.chip.on .qcount{background:rgba(255,255,255,.22);color:#fff}

.findbox{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  height:38px;width:212px;border-radius:999px;
  background:#fff;border:1px solid var(--chip-line);padding:0 12px;
  box-shadow:0 1px 1.5px rgba(23,22,16,.04);
  transition:border-color .2s,box-shadow .2s;
}
.findbox:focus-within{border-color:#C9E8BF;box-shadow:0 0 0 3px rgba(125,213,113,.18)}
.findbox svg{width:16px;height:16px;color:var(--t3);stroke-width:2;flex:none}
.findbox input{flex:1;min-width:0;border:none;outline:none;background:none;font-size:14px}
.findbox input::placeholder{color:var(--t3)}

.showing-note{margin-left:auto;font-size:13px;color:var(--t3);white-space:nowrap;transition:opacity .2s}

/* — board — */
.board-scroll{
  flex:1;min-height:0;margin-top:14px;padding:0 36px 12px;
  overflow-x:auto;overflow-y:hidden;
}
.board{
  display:grid;grid-template-columns:repeat(5,minmax(250px,1fr));
  gap:16px;height:100%;min-width:1310px;
}
.col{
  background:var(--container);border-radius:16px;
  padding:10px 10px 6px;display:flex;flex-direction:column;min-height:0;
  transition:background .3s,box-shadow .3s;
  scrollbar-width:thin;
}
.col.green{background:var(--container-green)}
.col.drag-over{box-shadow:inset 0 0 0 2px rgba(125,213,113,.75);background:#E9E8E3}
.col.green.drag-over{box-shadow:inset 0 0 0 2px rgba(63,158,51,.6)}

.col-head{flex:none;display:flex;align-items:center;gap:8px;padding:4px 4px 8px}
.col-title{font-size:15.5px;font-weight:650;letter-spacing:-.01em}
.col-bubble{
  min-width:20px;height:20px;padding:0 5px;border-radius:10px;
  background:#fff;color:#55544E;font-size:11.5px;font-weight:650;
  display:inline-flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;
}
.col-meta{margin-left:auto;font-size:12.5px;color:#8E8D87;font-weight:500;white-space:nowrap}
.col-body{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:10px;padding:1px;
}

/* — patient card — */
.pcard{
  flex:none;background:var(--surface);border-radius:14px;padding:13px 14px;
  box-shadow:0 1px 2px rgba(23,22,16,.05),0 7px 18px -10px rgba(23,22,16,.14);
  transition:box-shadow .25s,transform .25s var(--e-out),opacity .3s,background .25s;
  cursor:grab;user-select:none;-webkit-user-select:none;
  touch-action:pan-y;
}
.pcard:hover{box-shadow:0 2px 4px rgba(23,22,16,.06),0 12px 26px -12px rgba(23,22,16,.22);transform:translateY(-1.5px)}
.pcard:active{cursor:grabbing}
.pcard.dragging-src{opacity:.32;filter:saturate(.6)}
.pcard.picked{animation:pick-pulse .35s var(--e-spring)}
.pcard.flash{animation:card-flash .9s var(--e-out)}

.pc-top{display:flex;align-items:center;gap:11px;min-width:0}
.avz{
  width:36px;height:36px;border-radius:50%;flex:none;
  display:grid;place-items:center;color:#fff;
  font-size:13.5px;font-weight:600;letter-spacing:.01em;
}
.pc-id{min-width:0}
.pc-name{font-size:14.5px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-reason{font-size:13px;color:var(--t2);margin-top:1.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.team-tag{
  width:21px;height:21px;border-radius:6.5px;flex:none;
  background:#2FAB90;color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.02em;
  display:grid;place-items:center;
}

.pc-foot{display:flex;align-items:center;gap:8px;margin-top:12px}
.loc{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#75746E;font-weight:500;min-width:0}
.loc .dash{width:15px;height:15px;flex:none;stroke-dasharray:2.6 2.9;color:#B4B3AC}
.loc span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.tpill{
  margin-left:auto;flex:none;height:24px;padding:0 9px;border-radius:999px;
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;
  transition:background .4s,color .4s;
}
.tpill svg{width:12px;height:12px;stroke-width:2}
.t-pale {background:var(--pale-bg); color:var(--pale-tx)}
.t-amber{background:var(--amber-bg);color:var(--amber-tx)}
.t-rose {background:var(--rose-bg); color:var(--rose-tx)}

.note{
  margin-top:11px;border-radius:10px;padding:9px 11px;
  background:var(--note-bg);color:var(--note-tx);
  font-size:12.3px;line-height:1.5;display:flex;gap:7px;align-items:flex-start;
  white-space:pre-line;
}
.note svg{width:14.5px;height:14.5px;flex:none;margin-top:1.5px;stroke-width:1.9}
.note.coach{animation:note-in .45s var(--e-out)}

.card-actions{margin-top:12px;display:flex;flex-direction:column;gap:9px}
.invoice-btn{
  width:100%;height:40px;border-radius:12px;
  background:linear-gradient(180deg,var(--inv-a),var(--inv-b));
  color:var(--inv-tx);font-size:14.5px;font-weight:650;letter-spacing:-.005em;
  display:flex;align-items:center;justify-content:center;gap:7px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 3px rgba(40,110,25,.3);
  transition:transform .18s var(--e-out),filter .2s,background .3s;
}
.invoice-btn:hover{filter:brightness(1.04)}
.invoice-btn:active{transform:scale(.97)}
.invoice-btn.paid{background:#EFF0EB;color:var(--t2);box-shadow:none;pointer-events:none}
.follow-btn{
  width:100%;height:40px;border-radius:12px;
  border:1px solid #DEDDD8;background:#fff;
  font-size:14px;font-weight:600;color:var(--ink);
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:background .2s,border-color .2s,transform .18s var(--e-out);
}
.follow-btn:hover{background:#FAFAF8;border-color:#CFCEC8}
.follow-btn:active{transform:scale(.97)}
.follow-btn.done{border-color:#BFDFB2;color:#2F7D22;background:#F2FAEC;pointer-events:none}

.addpatient{
  flex:none;margin:2px 0 6px;padding:13px 0 9px;border-radius:12px;
  text-align:center;font-size:14.5px;font-weight:600;color:#55544E;
  transition:background .2s,color .2s,transform .16s;
}
.addpatient:hover{background:rgba(255,255,255,.8);color:var(--ink)}
.addpatient:active{transform:scale(.97)}

/* left-today extras */
.sumcard{flex:none;background:var(--surface);border-radius:16px;padding:14px 15px 13px;box-shadow:0 1px 2px rgba(23,22,16,.05),0 7px 18px -10px rgba(23,22,16,.12)}
.sumcard h4{font-size:14.5px;font-weight:650;margin-bottom:8px;letter-spacing:-.01em}
.sumrow{display:flex;justify-content:space-between;align-items:baseline;padding:4.5px 0;font-size:14px}
.sumrow .l{color:var(--t2)}
.sumrow .v{font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.prog-track{margin-top:9px;height:6px;border-radius:4px;background:#ECECE9;overflow:hidden}
.prog-fill{display:block;height:100%;border-radius:4px;background:var(--prog);transition:width .9s var(--e-out)}
.prog-cap{margin-top:10px;font-size:12.5px;color:var(--t3)}

.pcard.left{background:var(--card-left);cursor:default}
.pcard.left .pc-reason,.pcard.left .loc span{color:#7C8A73}
.span-txt{font-size:13px;color:#7C8A73;font-weight:500;margin-left:auto}
.tpill.onleft{background:#F7ECC6;color:#96762B}

/* empty column state */
.col-empty{
  padding:26px 10px;text-align:center;color:#98978F;font-size:13px;font-weight:500;
  border:1.5px dashed rgba(23,22,16,.14);border-radius:14px;
}

/* drop placeholder slot */
.drop-slot{
  flex:none;border-radius:14px;border:1.6px dashed rgba(23,22,16,.24);
  background:rgba(255,255,255,.55);animation:slot-pulse 1.1s ease infinite;
}
@keyframes slot-pulse{0%,100%{opacity:.55}50%{opacity:.95}}

/* drag ghost */
.drag-ghost{position:fixed;z-index:400;pointer-events:none;will-change:transform}
.drag-ghost .pcard{box-shadow:0 18px 40px -12px rgba(23,22,16,.35),0 4px 10px rgba(23,22,16,.12);transform:rotate(1.4deg) scale(1.025)}

/* entrance helpers */
.reveal{animation:view-in .5s var(--e-out) backwards}
.stagger>*{animation:item-in .55s var(--e-out) backwards}
@keyframes view-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes item-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes pick-pulse{0%{transform:scale(1)}35%{transform:scale(1.02)}100%{transform:scale(1)}}
@keyframes card-flash{0%{box-shadow:0 0 0 0 rgba(125,213,113,.75)}70%{box-shadow:0 0 0 12px rgba(125,213,113,0)}100%{box-shadow:0 0 0 0 rgba(125,213,113,0)}}
@keyframes badge-pop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes note-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes bell-ring{0%,100%{transform:rotate(0)}12%{transform:rotate(16deg)}30%{transform:rotate(-13deg)}48%{transform:rotate(9deg)}66%{transform:rotate(-6deg)}}
.bell-ringing svg{animation:bell-ring .8s ease}

/* FLIP helpers */
.flip-move{transition:transform .55s var(--e-out)}

/* ═══════════ POPOVERS ═══════════ */
.layer{position:fixed;inset:0;z-index:120}
.pop{
  position:fixed;z-index:121;min-width:224px;
  background:#fff;border:1px solid #ECEBE7;border-radius:15px;
  box-shadow:0 6px 16px -6px rgba(23,22,16,.14),0 24px 60px -20px rgba(23,22,16,.28);
  padding:6px;transform-origin:top right;
  animation:pop-in .3s var(--e-spring);
}
@keyframes pop-in{from{opacity:0;transform:translateY(-6px) scale(.96)}to{opacity:1;transform:none}}
.pop-label{font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--t3);padding:9px 12px 5px}
.pop-item{
  display:flex;align-items:center;gap:11px;width:100%;
  height:39px;padding:0 11px;border-radius:9px;
  font-size:14px;font-weight:500;color:#2E2D2A;text-align:left;
  transition:background .16s;
}
.pop-item:hover{background:#F4F4F1}
.pop-item.danger{color:#C43D2B}
.pop-item .pi{width:17px;height:17px;stroke-width:1.9;color:var(--t2)}
.pop-item em{margin-left:auto;font-style:normal;font-size:12px;color:var(--t3)}
.pop-sep{height:1px;background:#EFEFEA;margin:6px 4px}

.notif-item{display:flex;gap:11px;padding:10px 11px;border-radius:10px;transition:background .16s;cursor:pointer}
.notif-item:hover{background:#F4F4F1}
.notif-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;background:#7DD571}
.notif-item.unread .notif-dot{background:#E2604F;animation:notif-blink 1.6s ease infinite}
@keyframes notif-blink{50%{opacity:.35}}
.notif-body{min-width:0}
.notif-title{font-size:13.5px;font-weight:600}
.notif-sub{font-size:12.5px;color:var(--t2);margin-top:1px;line-height:1.4}
.notif-time{margin-left:auto;font-size:11.5px;color:var(--t3);flex:none;padding-top:2px}

.filters-pop{width:290px}
.filters-pop .f-check{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;
  font-size:14px;font-weight:500;cursor:pointer;user-select:none;transition:background .16s;
}
.filters-pop .f-check:hover{background:#F4F4F1}
.f-box{
  width:19px;height:19px;border-radius:6px;border:1.5px solid #CDCBC5;
  display:grid;place-items:center;color:#fff;flex:none;transition:background .18s,border-color .18s;
}
.f-box svg{width:12px;height:12px;stroke-width:3;opacity:0;transform:scale(.5);transition:all .18s var(--e-out)}
.f-check.checked .f-box{background:#59B54A;border-color:#59B54A}
.f-check.checked .f-box svg{opacity:1;transform:scale(1)}
.f-toggle{margin-left:auto;width:36px;height:21px;border-radius:11px;background:#D8D7D2;position:relative;flex:none;transition:background .25s}
.f-toggle::after{content:"";position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .25s var(--e-spring)}
.f-toggle.on{background:#59B54A}
.f-toggle.on::after{left:17.5px}

/* ═══════════ MODAL ═══════════ */
.modal-layer{position:fixed;inset:0;z-index:140;display:grid;place-items:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(24,24,22,.4);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s}
.modal-layer.open .modal-backdrop{opacity:1}
.modal-slot{
  position:relative;width:min(460px,calc(100vw - 40px));
  transform:translateY(14px) scale(.965);opacity:0;
  transition:transform .38s var(--e-spring),opacity .3s;
}
.modal-layer.open .modal-slot{transform:none;opacity:1}
.modal{background:#fff;border-radius:18px;box-shadow:0 30px 90px -20px rgba(20,20,16,.45);padding:22px 22px 20px}
.modal-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.modal-title{font-size:18px;font-weight:700;letter-spacing:-.015em}
.modal-x{margin-left:auto;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--t3);transition:background .2s,color .2s,transform .2s}
.modal-x:hover{background:#F2F2EF;color:var(--ink);transform:rotate(90deg)}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;color:#45443F;margin-bottom:7px}
.field input[type=text],.field select,.field textarea{
  width:100%;height:44px;border-radius:12px;border:1px solid var(--line-strong);
  padding:0 13px;font-size:14px;background:#FCFCFA;outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.field textarea{height:76px;padding:11px 13px;resize:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#8FD77F;box-shadow:0 0 0 3px rgba(125,213,113,.2);background:#fff}
.field .hint{font-size:12px;color:var(--t3);margin-top:6px}
.field.err input{border-color:#E2604F;box-shadow:0 0 0 3px rgba(226,96,79,.15)}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg-opt{
  height:38px;padding:0 14px;border-radius:11px;border:1px solid var(--line-strong);
  font-size:13.5px;font-weight:550;color:#494843;background:#FCFCFA;
  transition:all .2s var(--e-out);
}
.seg-opt:hover{border-color:#B9B8B2}
.seg-opt.sel{background:#13290E;border-color:#13290E;color:#fff}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.btn{
  height:42px;padding:0 18px;border-radius:12px;font-size:14.5px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:all .22s var(--e-out);
}
.btn.primary{background:linear-gradient(180deg,var(--inv-a),var(--inv-b));color:var(--inv-tx);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 3px rgba(40,110,25,.3)}
.btn.primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn.primary:active{transform:scale(.96)}
.btn.ghost{border:1px solid var(--line-strong);background:#fff;color:var(--ink)}
.btn.ghost:hover{background:#F7F7F4}
.btn.dark{background:#1B1C1E;color:#fff}
.btn.dark:hover{background:#26272A;transform:translateY(-1px)}

/* ═══════════ DRAWER ═══════════ */
.drawer-backdrop{position:fixed;inset:0;z-index:150;background:rgba(24,24,22,.25);backdrop-filter:blur(1.5px);opacity:0;transition:opacity .3s}
.drawer-backdrop.open{opacity:1}
.drawer{
  position:fixed;z-index:151;top:0;right:0;bottom:0;width:404px;max-width:92vw;
  background:#FBFBF9;box-shadow:-24px 0 70px -30px rgba(20,20,16,.4);
  border-radius:20px 0 0 20px;
  transform:translateX(calc(100% + 40px));
  transition:transform .5s var(--e-spring);
  display:flex;flex-direction:column;overflow:hidden;
}
.drawer.open{transform:none}
.dw-head{flex:none;padding:18px 20px 14px;display:flex;gap:13px;align-items:center;background:#fff;border-bottom:1px solid #F0EFEA}
.dw-av{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:17px;font-weight:650}
.dw-title{font-size:17.5px;font-weight:700;letter-spacing:-.01em}
.dw-sub{font-size:13px;color:var(--t2);margin-top:1px}
.dw-close{margin-left:auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--t3);transition:background .2s,color .2s,transform .25s}
.dw-close:hover{background:#F2F2EF;color:var(--ink);transform:rotate(90deg)}
.dw-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px}
.dw-section h5{font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-bottom:9px}
.dw-kv{display:flex;justify-content:space-between;font-size:14px;padding:7px 0;border-bottom:1px dashed #EDECе8;border-bottom:1px dashed #EDECE8}
.dw-kv .k{color:var(--t2)}
.dw-kv .v{font-weight:600}
.stage-line{display:flex;flex-direction:column;gap:0}
.sl-step{display:flex;gap:12px;position:relative;padding-bottom:18px}
.sl-step:last-child{padding-bottom:2px}
.sl-step::before{content:"";position:absolute;left:9px;top:22px;bottom:2px;width:2px;border-radius:2px;background:#E4E3DE}
.sl-step:last-child::before{display:none}
.sl-step.visited::before{background:#9ADB8C}
.sl-dot{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #D9D8D2;flex:none;display:grid;place-items:center;margin-top:1px;z-index:1}
.sl-step.visited .sl-dot{border-color:#67BE53;background:#67BE53;box-shadow:0 0 0 4px rgba(103,190,83,.18)}
.sl-step.current .sl-dot{border-color:#7DD571;background:#7DD571;box-shadow:0 0 0 5px rgba(125,213,113,.28);animation:dot-glow 2.2s ease infinite}
@keyframes dot-glow{50%{box-shadow:0 0 0 8px rgba(125,213,113,.12)}}
.sl-name{font-size:14px;font-weight:600;line-height:1.3}
.sl-meta{font-size:12.5px;color:var(--t3);margin-top:1px}
.dw-flag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:8px;font-size:12.5px;font-weight:600;margin:0 6px 6px 0}
.dw-actions{flex:none;padding:14px 18px 16px;display:flex;gap:8px;border-top:1px solid #F0EFEA;background:#fff;flex-wrap:wrap}
.dw-actions .btn{flex:1 1 auto;min-width:104px;height:40px;padding:0 12px;font-size:13.5px;white-space:nowrap}
.dw-actions .btn svg{width:16px;height:16px}

/* ═══════════ COMMAND PALETTE (⌘K) ═══════════ */
.cmdk-layer{position:fixed;inset:0;z-index:160;background:rgba(24,24,22,.34);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:flex-start;padding-top:16vh;opacity:0;transition:opacity .25s}
.cmdk-layer.open{opacity:1}
.cmdk-panel{
  width:min(580px,calc(100vw - 44px));background:#fff;border-radius:16px;
  box-shadow:0 40px 100px -20px rgba(15,15,12,.5);
  overflow:hidden;transform:translateY(-10px) scale(.97);opacity:.6;
  transition:transform .34s var(--e-spring),opacity .28s;
}
.cmdk-layer.open .cmdk-panel{transform:none;opacity:1}
.cmdk-inputrow{display:flex;align-items:center;gap:11px;padding:15px 17px;border-bottom:1px solid #F0EFEA}
.cmdk-inputrow svg{width:19px;height:19px;color:var(--t3);stroke-width:2}
.cmdk-inputrow input{flex:1;border:none;outline:none;font-size:15.5px;background:none}
.cmdk-inputrow input::placeholder{color:var(--t3)}
.cmdk-inputrow kbd{height:23px;padding:0 7px;border-radius:6px;border:1px solid var(--line);font-size:10.5px;color:var(--t3);display:flex;align-items:center}
.cmdk-list{max-height:350px;overflow-y:auto;padding:7px}
.cmdk-item{display:flex;align-items:center;gap:12px;height:44px;padding:0 11px;border-radius:10px;cursor:pointer;transition:background .14s}
.cmdk-item.sel{background:#F2F3EF}
.cmdk-item .ck-ic{width:30px;height:30px;border-radius:9px;background:#F1F0EC;display:grid;place-items:center;color:#55544E;flex:none}
.cmdk-item .ck-ic svg{width:16px;height:16px;stroke-width:1.9}
.cmdk-item .ck-t{font-size:14px;font-weight:550}
.cmdk-item .ck-d{font-size:12px;color:var(--t3);margin-top:.5px}
.cmdk-item kbd{margin-left:auto;font-size:10.5px;color:var(--t3)}
.cmdk-none{padding:26px;text-align:center;color:var(--t3);font-size:13.5px}
.cmdk-foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid #F0EFEA;font-size:11.5px;color:var(--t3)}
.cmdk-foot b{font-weight:600;color:#6C6B65}

/* ═══════════ TOASTS ═══════════ */
.toast-root{position:fixed;z-index:200;bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none}
.toast{
  pointer-events:auto;display:flex;align-items:center;gap:9px;
  background:#1D1E20;color:#F4F4F1;border-radius:999px;
  padding:10px 18px 10px 12px;font-size:13.5px;font-weight:550;
  box-shadow:0 12px 34px -10px rgba(15,15,12,.5);
  animation:toast-in .5s var(--e-spring);
}
.toast.out{animation:toast-out .35s var(--e-out) forwards}
.toast .ticn{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none}
.toast.ok .ticn{background:#59B54A;color:#fff}
.toast.info .ticn{background:#4A6BD8;color:#fff}
.toast.warn .ticn{background:#DE7A33;color:#fff}
.ticn svg{width:12px;height:12px;stroke-width:2.6}
@keyframes toast-in{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(10px) scale(.94)}}

/* ═══════════ SUB-PAGE PRIMITIVES ═══════════ */
.page{height:100%;overflow-y:auto;padding:6px 36px 40px}
.page-inner{max-width:1160px;margin:0 auto}
.page-greet{margin:2px 0 20px}
.page-greet h2{font-size:22px;font-weight:700;letter-spacing:-.015em}
.page-greet p{color:var(--t2);font-size:14px;margin-top:4px}

.panel{background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(23,22,16,.04),0 10px 26px -18px rgba(23,22,16,.16);padding:20px}
.panel+.panel{margin-top:16px}
.panel h3{font-size:15.5px;font-weight:650;letter-spacing:-.01em;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.panel h3>svg{width:17px;height:17px;stroke-width:1.8;color:#3E8F2F}
.panel h3 .more{margin-left:auto;font-size:12.5px;color:var(--t3);font-weight:550;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.panel h3 .more:hover{color:var(--ink)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin-bottom:16px}
.kpi{background:#fff;border-radius:16px;padding:16px 18px;box-shadow:0 1px 2px rgba(23,22,16,.04),0 10px 26px -18px rgba(23,22,16,.16);display:flex;align-items:center;gap:14px}
.kpi .sq-icon{width:42px;height:42px;border-radius:13px}
.kpi .stat-value{font-size:24px}
.kpi .trend{margin-left:auto;height:23px;padding:0 9px;border-radius:7px;display:flex;align-items:center;font-size:12px;font-weight:600;background:var(--lime-bg);color:var(--lime-tx)}
.kpi .trend.down{background:#FCD8D4;color:#B3301F}

.bars{display:flex;align-items:flex-end;gap:9px;height:170px;padding-top:8px}
.barcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
.bar{
  width:100%;max-width:34px;border-radius:7px 7px 4px 4px;
  background:linear-gradient(180deg,#A8E195,#7DD571);
  transform-origin:bottom;animation:grow-y .9s var(--e-out) backwards;
  transition:filter .2s;min-height:5px;
}
.bar:hover{filter:brightness(.94)}
.bar.now{background:linear-gradient(180deg,#6FCB60,#4CAF3C);box-shadow:0 0 0 3px rgba(125,213,113,.22)}
.bar-lab{font-size:11.5px;color:var(--t3);font-weight:550}
@keyframes grow-y{from{transform:scaleY(0)}}

.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:12px;font-weight:600;color:var(--t3);text-align:left;padding:9px 12px;border-bottom:1px solid #EFEFEA;white-space:nowrap;cursor:pointer;user-select:none}
.tbl th:first-child{padding-left:4px}
.tbl th .sort-ind{display:inline-block;margin-left:4px;opacity:.45;transition:transform .2s}
.tbl th.sorted .sort-ind{opacity:1;color:#4E9A22}
.tbl td{padding:11px 12px;border-bottom:1px solid #F3F2EE;font-size:13.5px;vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .18s;cursor:pointer}
.tbl tbody tr:hover{background:#FAFAF7}
.tbl .cell-patient{display:flex;align-items:center;gap:10px;font-weight:600}
.tbl .cell-sub{display:block;font-size:11.5px;color:var(--t3);font-weight:450;margin-top:1px}
.mini-av{width:27px;height:27px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-size:10.5px;font-weight:600}

.stage-chip{display:inline-flex;align-items:center;gap:6px;height:25px;padding:0 10px;border-radius:8px;font-size:12px;font-weight:600;white-space:nowrap}
.sc-checkin{background:#EEEDE9;color:#5A5952}
.sc-triage{background:#E4F0FD;color:#3B71C4}
.sc-treatment{background:#EFE9FC;color:#7357C9}
.sc-ready{background:#FCF1DC;color:#A2722B}
.sc-left{background:#E4F4DA;color:#3F8E2E}
.sc-paid{background:var(--lime-bg);color:var(--lime-tx)}
.sc-block{background:#FCD8D4;color:#B3301F}
.sc-await{background:var(--amber-bg);color:var(--amber-tx)}
.sc-submit{background:#EAEDF3;color:#5B6B8C}

.spark{stroke:#59B54A;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;animation:draw-line 1.6s .3s var(--e-out) forwards}
.spark-area{fill:url(#sparkfill);opacity:0;animation:fade-in 1s .8s forwards}
@keyframes draw-line{to{stroke-dashoffset:0}}
@keyframes fade-in{to{opacity:1}}

.meter{width:110px;height:6px;border-radius:4px;background:#EFEFEA;overflow:hidden}
.meter i{display:block;height:100%;border-radius:4px;background:#7DD571;transform-origin:left;animation:grow-x 1s var(--e-out) backwards}
@keyframes grow-x{from{transform:scaleX(0)}}

.dot-on{width:8px;height:8px;border-radius:50%;background:#59B54A;box-shadow:0 0 0 3px rgba(89,181,74,.18);animation:on-pulse 2.4s infinite}
.dot-off{width:8px;height:8px;border-radius:50%;background:#CBCAC4}
@keyframes on-pulse{50%{box-shadow:0 0 0 5px rgba(89,181,74,.08)}}

.staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.staff-card{background:#fff;border-radius:16px;padding:17px;display:flex;gap:13px;align-items:flex-start;box-shadow:0 1px 2px rgba(23,22,16,.04),0 10px 26px -18px rgba(23,22,16,.16);transition:transform .25s var(--e-out),box-shadow .25s}
.staff-card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(23,22,16,.05),0 16px 34px -16px rgba(23,22,16,.22)}
.staff-card .pc-name{font-size:14.5px}
.staff-role{font-size:12.5px;color:var(--t2);margin-top:1px}
.staff-room{margin-top:7px;font-size:12px;color:var(--t3);display:flex;align-items:center;gap:6px}
.load-row{margin-top:9px;display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--t3)}
.staff-state{margin-left:auto;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.state-word{font-size:11.5px;color:var(--t3);font-weight:550}

/* schedule agenda */
.agenda-wrap{display:flex;gap:16px;align-items:flex-start}
.agenda{flex:1;position:relative;background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(23,22,16,.04),0 10px 26px -18px rgba(23,22,16,.16);padding:18px 22px 22px 64px}
.ag-hour{position:absolute;left:64px;right:22px;height:1px;background:#F0EFEA}
.ag-hour span{position:absolute;left:-46px;top:-7px;font-size:11.5px;color:var(--t3);width:36px;text-align:right}
.appt{
  position:absolute;left:64px;right:22px;border-radius:11px;padding:8px 12px;
  background:#fff;border:1px solid var(--line);font-size:12.5px;
  box-shadow:0 1px 2px rgba(23,22,16,.04);
  display:flex;align-items:center;gap:9px;overflow:hidden;cursor:pointer;
  transition:transform .22s var(--e-out),box-shadow .22s,left .3s,right .3s;
  animation:appt-in .5s var(--e-out) backwards;
}
@keyframes appt-in{from{opacity:0;transform:scaleY(.6)}}
.appt:hover{transform:scale(1.012);box-shadow:0 8px 20px -10px rgba(23,22,16,.25);z-index:5}
.appt b{font-weight:650;white-space:nowrap}
.appt .ap-meta{color:var(--t3);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appt .ap-type{flex:none;height:19px;padding:0 8px;border-radius:7px;font-size:10.5px;font-weight:650;display:flex;align-items:center}
.at-new{background:#E4F0FD;color:#3B71C4}.at-fu{background:#EEEDE9;color:#5A5952}
.at-proc{background:#EFE9FC;color:#7357C9}.at-video{background:#DCF4E9;color:#22855B}.at-open{background:#FAF3DA;color:#A68C43}
.appt.state-done{opacity:.5;filter:saturate(.5)}
.appt.state-now{background:#F2FAEC;border-color:#A5DC96;box-shadow:0 0 0 3px rgba(125,213,113,.2);z-index:4}
.appt.state-offer{border:1.6px dashed #E5B95C;background:#FDF8EA}
.appt.state-open{border:1.6px dashed #C9C8C2;background:transparent;justify-content:center;color:var(--t3)}
.now-line{position:absolute;left:26px;right:14px;height:2px;background:#E2604F;border-radius:2px;z-index:6}
.now-line::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:#E2604F}
.now-line i{position:absolute;left:-34px;top:-9px;font-size:11px;font-weight:650;color:#E2604F;font-style:normal}

.side-stack{width:300px;flex:none;display:flex;flex-direction:column;gap:16px}
.nu-item{display:flex;gap:11px;padding:9px 2px;border-bottom:1px dashed #F0EFEA;align-items:baseline}
.nu-item:last-child{border:none}
.nu-time{font-size:12px;font-weight:650;color:#4E9A22;font-variant-numeric:tabular-nums;width:44px;flex:none}
.nu-name{font-size:13.5px;font-weight:600;flex:1;min-width:0}
.nu-meta{font-size:11.5px;color:var(--t3);margin-left:auto;white-space:nowrap}

/* messages */
.msg-grid{display:grid;grid-template-columns:330px 1fr;height:100%;padding:0 36px 22px;gap:16px}
.thread-list{background:#fff;border-radius:16px;overflow-y:auto;box-shadow:0 1px 2px rgba(23,22,16,.04),0 10px 26px -18px rgba(23,22,16,.16);padding:8px}
.th-row{display:flex;gap:11px;padding:12px;border-radius:12px;cursor:pointer;transition:background .18s;position:relative}
.th-row:hover{background:#F6F6F3}
.th-row.sel{background:#EFF8EA}
.th-name{font-size:13.5px;font-weight:650;display:flex;align-items:center}
.th-prev{font-size:12.3px;color:var(--t2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-time{margin-left:auto;font-size:11px;color:var(--t3);flex:none;padding-top:2px}
.th-unread{position:absolute;right:11px;bottom:11px;width:8px;height:8px;border-radius:50%;background:#59B54A;animation:notif-blink 1.8s infinite}
.chat-pane{background:#fff;border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 1px 2px rgba(23,22,16,.04),0 10px 26px -18px rgba(23,22,16,.16)}
.chat-head{flex:none;display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #F0EFEA}
.chat-body{flex:1;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:11px;background:#FAFAF8}
.bubble{max-width:72%;padding:10px 14px;border-radius:16px;font-size:13.5px;line-height:1.5;animation:bub-in .4s var(--e-out) backwards}
.bubble span{display:block;font-size:10.5px;color:inherit;opacity:.5;margin-top:5px}
.bubble.them{align-self:flex-start;background:#fff;border:1px solid #EFEFEB;border-bottom-left-radius:5px}
.bubble.me{align-self:flex-end;background:#DDF3CF;border-bottom-right-radius:5px}
@keyframes bub-in{from{opacity:0;transform:translateY(8px) scale(.96)}}
.typing{align-self:flex-start;display:flex;gap:5px;padding:13px 16px;background:#fff;border:1px solid #EFEFEB;border-radius:16px;border-bottom-left-radius:5px}
.typing i{width:7px;height:7px;border-radius:50%;background:#B9B8B1;animation:typ 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes typ{0%,100%{transform:translateY(0);opacity:.5}45%{transform:translateY(-4px);opacity:1}}
.composer{flex:none;display:flex;gap:10px;padding:14px 16px;border-top:1px solid #F0EFEA}
.composer input{flex:1;height:44px;border-radius:999px;border:1px solid var(--line-strong);padding:0 18px;font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s}
.composer input:focus{border-color:#8FD77F;box-shadow:0 0 0 3px rgba(125,213,113,.18)}
.send-btn{width:44px;height:44px;border-radius:50%;background:#1B1C1E;color:#fff;display:grid;place-items:center;flex:none;transition:transform .2s var(--e-out),background .2s}
.send-btn:hover{background:#26272A;transform:scale(1.06)}
.send-btn:active{transform:scale(.92)}
.send-btn svg{width:18px;height:18px;stroke-width:2}

/* Elera AI */
.ai-wrap{height:100%;display:flex;flex-direction:column;align-items:center;padding:14px 24px 20px;overflow:hidden}
.ai-col{width:min(760px,100%);display:flex;flex-direction:column;height:100%;gap:16px}
.ai-hero{text-align:center;margin-top:5vh;animation:view-in .6s var(--e-out)}
.ai-orb{width:60px;height:60px;margin:0 auto 16px;border-radius:19px;background:linear-gradient(135deg,#7DD571,#3E9E33);display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(90,180,70,.55);animation:orb-float 4s ease-in-out infinite}
.ai-orb svg{width:30px;height:30px;stroke:#fff;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
@keyframes orb-float{50%{transform:translateY(-7px)}}
.ai-col.empty .ai-hero{margin:auto 0}
.ai-hero h2{font-size:24px;font-weight:750;letter-spacing:-.02em}
.ai-hero p{color:var(--t2);margin-top:6px;font-size:14.5px}
.ai-msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:6px 2px}
.ai-bubble{max-width:82%;padding:12px 16px;border-radius:17px;font-size:14px;line-height:1.62;white-space:pre-wrap;animation:bub-in .45s var(--e-out)}
.ai-bubble.user{align-self:flex-end;background:#1B1C1E;color:#fff;border-bottom-right-radius:6px}
.ai-bubble.bot{align-self:flex-start;background:#fff;box-shadow:0 1px 2px rgba(23,22,16,.05),0 8px 22px -14px rgba(23,22,16,.2);border-bottom-left-radius:6px}
.ai-bubble.bot b{font-weight:650}
.ai-chips{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.ai-chip{height:36px;padding:0 15px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:550;color:#3D3C38;box-shadow:0 1px 1.5px rgba(23,22,16,.04);transition:all .22s var(--e-out)}
.ai-chip:hover{border-color:#A5DC96;background:#F6FBF2;transform:translateY(-1px)}
.ai-chip:active{transform:scale(.95)}

/* labs */
.order-row{display:flex;align-items:center;gap:14px;padding:14px 2px;border-bottom:1px solid #F3F2EE;animation:item-in .5s var(--e-out) backwards}
.order-row:last-child{border:none}
.or-main{flex:1;min-width:0}
.or-item{font-size:14px;font-weight:600}
.or-sub{font-size:12.5px;color:var(--t2);margin-top:2px;display:flex;align-items:center;gap:8px}
.u-dot{width:7px;height:7px;border-radius:50%;background:#E2604F;animation:notif-blink 1.6s infinite;flex:none}
.rel-btn{height:36px;padding:0 15px;border-radius:10px;background:linear-gradient(180deg,var(--inv-a),var(--inv-b));color:var(--inv-tx);font-size:13px;font-weight:650;flex:none;transition:all .2s var(--e-out);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.rel-btn:hover{filter:brightness(1.05)}
.rel-btn:active{transform:scale(.95)}
.rel-done{height:36px;padding:0 15px;border-radius:10px;background:#F2FAEC;color:#2F7D22;font-size:13px;font-weight:650;flex:none;display:flex;align-items:center;gap:6px}

/* billing tiles reuse .kpis */
.collect-mini{height:30px;padding:0 12px;border-radius:9px;background:linear-gradient(180deg,var(--inv-a),var(--inv-b));color:var(--inv-tx);font-size:12.5px;font-weight:650;transition:all .2s var(--e-out)}
.collect-mini:hover{filter:brightness(1.05)}
.collect-mini:active{transform:scale(.94)}

/* accordion */
.acc{border-bottom:1px solid #F0EFEA}
.acc summary{list-style:none;display:flex;align-items:center;gap:12px;padding:15px 2px;font-size:14.5px;font-weight:600;cursor:pointer;transition:color .2s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:#3E8F2F}
.acc summary .acc-plus{margin-left:auto;width:26px;height:26px;border-radius:8px;background:#F2F2EF;display:grid;place-items:center;color:var(--t2);transition:transform .35s var(--e-spring),background .2s;flex:none}
.acc summary .acc-plus svg{width:13px;height:13px;stroke-width:2.4}
.acc[open] summary .acc-plus{transform:rotate(135deg);background:#DDF3CF;color:#2F7D22}
.acc .acc-body{padding:0 2px 16px;color:var(--t2);font-size:13.5px;line-height:1.65;max-width:640px;animation:item-in .4s var(--e-out)}

/* pro banner */
.pro-banner{border-radius:20px;padding:28px;background:linear-gradient(120deg,#20301A,#31552A 45%,#1B1C1E);color:#F2F7EC;position:relative;overflow:hidden}
.pro-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 200px at 85% -10%,rgba(125,213,113,.45),transparent 65%);animation:glow-drift 7s ease-in-out infinite alternate}
@keyframes glow-drift{to{transform:translate(-40px,14px)}}
.pro-banner h2{font-size:22px;font-weight:750;letter-spacing:-.015em;position:relative}
.pro-banner p{color:#C4D6B8;margin-top:8px;font-size:14px;max-width:430px;line-height:1.6;position:relative}
.pro-feats{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px;position:relative}
.pro-feat{height:32px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);font-size:12.5px;font-weight:550;display:flex;align-items:center;backdrop-filter:blur(4px)}
.pro-cta{position:absolute;right:30px;bottom:30px}

/* settings toggles */
.set-row{display:flex;align-items:center;gap:14px;padding:15px 2px;border-bottom:1px solid #F0EFEA}
.set-row:last-child{border:none}
.set-info{flex:1}
.set-name{font-size:14px;font-weight:600}
.set-desc{font-size:12.5px;color:var(--t3);margin-top:2px}
.accent-swatches{display:flex;gap:9px}
.swatch{width:30px;height:30px;border-radius:10px;border:2px solid transparent;transition:all .2s var(--e-out);cursor:pointer}
.swatch:hover{transform:scale(1.1)}
.swatch.sel{border-color:var(--ink);transform:scale(1.06);box-shadow:0 0 0 3px #fff,0 0 0 4.5px rgba(23,22,16,.25)}

/* widget popover */
.widget-pop{width:270px}

/* accent override hook */
[data-accent="blue"]{--nav-green:#6FB5F2;--nav-green-tx:#0B2540;--inv-a:#7FC1F5;--inv-b:#5FAEEF;--inv-tx:#0B2540;--prog:#3B7DD8;--lime-bg:#DCEEFF;--lime-tx:#2D6FBB}
[data-accent="violet"]{--nav-green:#B49DF2;--nav-green-tx:#241148;--inv-a:#C7B4F7;--inv-b:#AF96F0;--inv-tx:#241148;--prog:#7C4FD8;--lime-bg:#EDE4FF;--lime-tx:#6C3FBF}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1460px){
  .searchbox{width:198px}
  .board{grid-template-columns:repeat(5,minmax(236px,1fr))}
}
@media (max-width:1240px){
  .stats-bar{margin-left:24px;margin-right:24px}
  .flow-toolbar,.board-scroll{padding-left:24px;padding-right:24px}
  .topbar{padding-left:24px;padding-right:24px}
  .page,.msg-grid{padding-left:24px;padding-right:24px}
  .showing-note{display:none}
}
@media (max-width:1080px){
  body:not(.rail-force) .sidebar{width:78px}
  body:not(.rail-force) .brand-name,
  body:not(.rail-force) .brand-chev,
  body:not(.rail-force) .nav-label,
  body:not(.rail-force) .nav-item>span,
  body:not(.rail-force) .nav-item .nav-count{display:none}
  body:not(.rail-force) .nav-item{justify-content:center;padding:0}
  body:not(.rail-force) .side-top{justify-content:center}
}
@media (max-width:900px){
  .widgetBtn-hide{display:none}
  .page-title{font-size:24px}
  .searchbox{width:46px;padding:0}
  .searchbox input,.searchbox kbd{display:none}
  .new-btn span{display:none}
  .new-btn{width:42px;justify-content:center;padding:0}
  .msg-grid{grid-template-columns:1fr;grid-template-rows:200px 1fr}
  .agenda-wrap{flex-direction:column}
  .side-stack{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important}
}