/* HeyVox web app styles (v1 rules, moved out of app.html unchanged). The v2
   design layer is portal-v2.css, loaded after this and hv-ui.css. */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --t:#0A7B6C; --t-600:#0d9e8a; --t-400:#3fbfae; --t-100:#D4EDE9; --t-50:#EDF7F5;
  --ink:#10201D; --ink-2:#3F5A55; --ink-3:#56706B; --ink-4:#56706B;
  --bg:#F4FAF8; --surface:#FFFFFF; --surface-2:#F0F8F6; --line:#DCE8E5; --line-2:#D0E6E1;
  --coral:#E8593C; --coral-50:#FDEDE9; --amber:#E0930E; --amber-50:#FCF3E2;
  --green:#2E9E6B; --green-50:#E6F5EE; --blue:#3D7DD8; --blue-50:#E9F1FC;
  --violet:#7B4FA8; --violet-50:#F1EAF8;
  --shadow-sm:0 1px 2px rgba(14,31,28,.06),0 1px 3px rgba(14,31,28,.05);
  --shadow-md:0 4px 12px rgba(14,31,28,.07),0 2px 4px rgba(14,31,28,.04);
  --shadow-lg:0 24px 60px rgba(10,123,108,.16),0 8px 20px rgba(14,31,28,.08);
  --grad-teal:linear-gradient(135deg,#0A7B6C 0%,#0d9e8a 55%,#3fbfae 100%);
  --grad-warm:linear-gradient(135deg,#E8593C 0%,#E0930E 100%);
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:16px; --sidebar:236px;
}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;background:none;font-size:15px;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px;color:var(--ink)}
a{color:var(--t);text-decoration:none}
.hide{display:none!important}
/* Icons have no intrinsic size - without this, an IC.* dropped into a plain
   container renders at full width. Anything that wants them bigger sizes them
   explicitly, and those rules win by specificity. */
svg{width:16px;height:16px;flex-shrink:0}
h1,h2,h3,h4{font-family:'Sora','Inter',system-ui,sans-serif;letter-spacing:-.02em;font-weight:700}
.num{font-family:'Sora','Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
::selection{background:var(--t-100)}
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:20px;border:2px solid var(--bg)}
.gate-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(1200px 600px at 50% -10%,rgba(63,191,174,.18),transparent 60%),var(--bg)}
.gate{max-width:430px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:46px 42px;text-align:center;box-shadow:var(--shadow-lg)}
.gate .logo-lg{width:54px;height:54px;border-radius:15px;background:var(--grad-teal);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(10,123,108,.28);margin-bottom:20px}
.gate h1{font-size:23px;margin:0 0 8px}
.gate p{color:var(--ink-2);font-size:15px;margin-bottom:26px;line-height:1.55}
.gbtn{display:inline-flex;align-items:center;gap:11px;background:var(--ink);color:#fff;border-radius:var(--r);padding:13px 24px;font-weight:600;font-size:15px;transition:.12s;width:100%;justify-content:center}
.gbtn:hover{background:#16302B;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.gnote{font-size:13px;color:var(--ink-3);margin-top:20px;line-height:1.6}
.gnote a,.gnote button{color:var(--t);font-weight:600;font-size:13px}
.gsep{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--ink-4);font-size:12px}
.gsep::before,.gsep::after{content:"";flex:1;height:1px;background:var(--line)}
.gate-err{background:var(--coral-50);border:1px solid #F4CABF;color:#B23A22;border-radius:var(--r);padding:12px 14px;font-size:13px;text-align:left;margin-top:18px;line-height:1.55}
.shell{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}
.sidebar{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:40}
.brand{display:flex;align-items:center;gap:11px;padding:20px 20px 18px;flex-shrink:0}
.brand .mark{width:34px;height:34px;border-radius:9px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.12);flex-shrink:0}
.brand .wm{font-family:'Sora','Inter',system-ui,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.03em;color:var(--ink)}
.brand .wm .h{font-weight:400;color:var(--ink)}/* Hey a touch lighter (v84) */.brand .wm .v{font-weight:800;color:var(--t)}
.nav{padding:6px 12px;flex:1;overflow-y:auto;min-height:0}
.sectabs{display:flex;gap:4px;padding:0 28px;border-bottom:1px solid var(--line);background:var(--surface,#fff);overflow-x:auto;scrollbar-width:none;flex-shrink:0}
.sectabs::-webkit-scrollbar{display:none}
.sectab{flex-shrink:0;min-height:44px;padding:0 14px;font-size:15px;font-weight:600;color:var(--ink-3);border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color .12s,border-color .12s;white-space:nowrap}
.sectab:hover{color:var(--ink)}
.sectab.on{color:var(--t);border-bottom-color:var(--t)}
.sectab.locked{opacity:.55}
.sectabs.more-right{-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
.sectab:focus-visible{outline:2px solid var(--t);outline-offset:-2px}
@media (max-width:860px){.sectabs{padding:0 12px}.sectab{padding:0 12px}}
.nav-lbl{font-size:12px;font-weight:700;color:var(--ink-4);padding:16px 12px 7px}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;min-height:40px;border-radius:var(--r-sm);color:var(--ink-2);font-weight:600;font-size:15px;width:100%;text-align:left;transition:.12s;margin-bottom:2px;position:relative}
.nav-item svg{width:18px;height:18px;flex-shrink:0;color:var(--ink-3);transition:.12s}
.nav-item:hover{background:var(--surface-2);color:var(--ink)}
.nav-item:hover svg{color:var(--t)}
.nav-item.on{background:var(--t-50);color:var(--t);font-weight:600}
.nav-item.on svg{color:var(--t)}
.nav-item.on::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:3px;height:20px;background:var(--t);border-radius:0 3px 3px 0}
.nav-badge{margin-left:auto;background:var(--coral);color:#fff;font-size:12px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px;font-family:'Sora','Inter',system-ui,sans-serif}
.nav-badge.mut{background:var(--line-2);color:var(--ink-2)}
.side-foot{padding:10px 12px;border-bottom:1px solid var(--line);flex-shrink:0}
.modecard{border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:var(--surface);transition:.12s}
.modecard b{display:block;font-size:15px;color:var(--ink)}
.modecard span{font-size:12px;color:var(--ink-3)}
.modecard.on{border-color:var(--t);background:#E1F5EE}
.modecard.on b{color:var(--t)}
.locked{opacity:.45!important;cursor:not-allowed!important}
.locked *{pointer-events:none!important}
.uchip{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r-sm);width:100%;text-align:left;transition:.12s}
.uchip:hover{background:var(--surface-2)}
.hv-chat__btn{display:none!important}
.uav{width:32px;height:32px;border-radius:9px;background:var(--grad-teal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;font-family:'Sora','Inter',system-ui,sans-serif;flex-shrink:0}
.uchip .who{min-width:0}
.uchip .who b{display:block;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uchip .who span{display:block;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;background:rgba(244,250,248,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:15px 30px;min-height:64px}
.gsearch{position:relative;flex:1;max-width:520px;margin:0 auto;min-width:0}
.gsearch-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-4);pointer-events:none}
.gsearch input{width:100%;padding:9px 14px 9px 38px;border:1px solid var(--line);border-radius:100px;background:var(--surface);font-size:14px;color:var(--ink);outline:none;transition:.12s;font-family:inherit}
.gsearch input:focus{border-color:var(--t);box-shadow:0 0 0 3px var(--t-50)}
.gsearch input::placeholder{color:var(--ink-4)}
.gsearch-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);max-height:64vh;overflow-y:auto;z-index:60;display:none;padding:6px}
.gsearch-panel.on{display:block}
.gs-row{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-sm);cursor:pointer}
.gs-row:hover,.gs-row.sel{background:var(--surface-2)}
.gs-badge{font-size:12px;font-weight:700;padding:2px 9px;border-radius:100px;white-space:nowrap;flex-shrink:0;font-family:'Sora','Inter',system-ui,sans-serif}
.gs-body{min-width:0;flex:1}
.gs-body b{display:block;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-body span{display:block;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-empty{padding:18px;text-align:center;color:var(--ink-3);font-size:13px}
.topbar h2{font-size:19px;font-weight:700}
.topbar .sub{font-size:13px;color:var(--ink-3);font-weight:500;margin-top:1px}
.topbar .sp{flex:1}
.biz-tag{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--ink-2)}
/* After the base rule, or the base rule wins (the SIM tag showed on phones). */
@media(max-width:820px){ .biz-tag{display:none} .gsearch{max-width:none} }
.biz-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-50)}
.hamb{display:none}
.solo .sidebar,.solo .hamb,.solo .gsearch{display:none!important}
.solo .shell{grid-template-columns:1fr}
.content{padding:26px 30px 70px;max-width:1360px;width:100%;margin:0 auto;overflow-x:hidden}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.kpi-grid-5{grid-template-columns:repeat(5,1fr)}
.kpi.kpi-hero{background:var(--grad-teal);border:none;color:#fff;position:relative;overflow:hidden}
.kpi.kpi-hero::after{content:"";position:absolute;right:-24px;top:-24px;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.1)}
.kpi.kpi-hero .ic{background:rgba(255,255,255,.18);color:#fff}
.kpi.kpi-hero .val{color:#fff}
.kpi.kpi-hero .lbl{color:rgba(255,255,255,.9)}
.kpi.kpi-hero:hover{box-shadow:0 10px 26px rgba(10,123,108,.32)}
.hero-edit{position:absolute;top:16px;right:16px;font-size:12px;font-weight:700;color:#fff;background:rgba(255,255,255,.18);padding:3px 10px;border-radius:100px;z-index:2}
.hero-edit:hover{background:rgba(255,255,255,.3)}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;position:relative;overflow:hidden;transition:.18s}
.kpi:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--line-2)}
.kpi .ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.kpi .ic svg{width:20px;height:20px}
.kpi .val{font-family:'Sora','Inter',system-ui,sans-serif;font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.kpi .lbl{font-size:12px;color:var(--ink-3);font-weight:600;margin-top:7px}
.kpi .trend{position:absolute;top:20px;right:20px;font-size:12px;font-weight:700;font-family:'Sora','Inter',system-ui,sans-serif;display:flex;align-items:center;gap:3px;padding:3px 8px;border-radius:100px}
.trend.up{color:var(--green);background:var(--green-50)}
.trend.down{color:var(--coral);background:var(--coral-50)}
.trend.flat{color:var(--ink-3);background:var(--surface-2)}
.kpi.i-teal .ic{background:var(--t-50);color:var(--t)}
.kpi.i-coral .ic{background:var(--coral-50);color:var(--coral)}
.kpi.i-amber .ic{background:var(--amber-50);color:var(--amber)}
.kpi.i-blue .ic{background:var(--blue-50);color:var(--blue)}
.kpi.i-violet .ic{background:var(--violet-50);color:var(--violet)}
.kpi.i-green .ic{background:var(--green-50);color:var(--green)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:20px}
.panel-h{display:flex;align-items:center;gap:12px;padding:18px 22px 14px}
.panel-h h3{font-size:16px;font-weight:700}
.panel-h .sub{font-size:12px;color:var(--ink-3);font-weight:500}
.panel-h .sp{flex:1}
.panel-b{padding:6px 22px 22px}
.grid-2{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}
.grid-2b{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.color-pop{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.20)}
.color-pop button{width:26px;height:26px;border-radius:7px;cursor:pointer;padding:0}
.cal{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--surface);max-width:330px}
.month-head:hover{background:var(--surface-2) !important}
.row.flash{animation:rowflash 1.2s ease}
@keyframes rowflash{0%,100%{background:transparent}30%{background:var(--t-50)}}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-head b{font-family:'Sora','Inter',system-ui,sans-serif;font-size:15px;color:var(--ink)}
.cal-nav{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:18px;font-weight:700;cursor:pointer}
.cal-nav:hover{background:var(--surface-2)}
.cal-dows{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.cal-dows span{text-align:center;font-size:12px;font-weight:700;color:var(--ink-4);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-grid button{aspect-ratio:1;border-radius:7px;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:transparent;border:1px solid transparent}
.cal-head b{font-size:13px}
.cal-dots{display:flex;gap:2px;height:5px;align-items:center}
.cal-dots i{width:4px;height:4px;border-radius:50%;display:block}
.cal-grid button.on .cal-dots i{background:#fff !important}
.cal-grid button:hover:not(:disabled){background:var(--surface-2)}
.cal-grid button:disabled{color:var(--ink-5,#c3c9d2);cursor:default;opacity:.45}
.cal-grid button.on{background:var(--t);color:#fff;font-weight:700}
.rec-chip{padding:8px 14px;border-radius:100px;font-size:13px;font-weight:600;cursor:pointer;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-2)}
.rec-chip.on{border-color:var(--t);background:var(--t-50);color:var(--t)}
.seg{display:inline-flex;background:var(--surface-2);border-radius:var(--r-sm);padding:3px;gap:2px}
.seg button{padding:5px 12px;border-radius:7px;font-size:12px;font-weight:600;color:var(--ink-3);transition:.12s}
.seg button.on{background:var(--surface);color:var(--t);box-shadow:var(--shadow-sm)}
.chart-wrap{width:100%}
.bars{display:flex;align-items:flex-end;gap:6px;height:180px;padding-top:10px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.bar{width:100%;max-width:34px;border-radius:6px 6px 3px 3px;background:var(--grad-teal);transition:height .5s cubic-bezier(.2,.8,.2,1),opacity .2s;min-height:3px;position:relative;cursor:pointer}
.bar:hover{opacity:.82}
.bar-axis{display:flex;gap:4px;margin-top:9px}
.bar-x{flex:1;min-width:0;font-size:12px;color:var(--ink-4);font-weight:600;white-space:nowrap;overflow:hidden}
.donut-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.legend{display:flex;flex-direction:column;gap:9px;flex:1;min-width:160px}
.leg-item{display:flex;align-items:center;gap:9px;font-size:13px}
.leg-dot{width:11px;height:11px;border-radius:4px;flex-shrink:0}
.leg-item .nm{color:var(--ink-2);font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leg-item .ct{font-family:'Sora','Inter',system-ui,sans-serif;font-weight:700;color:var(--ink);font-size:13px}
.leg-item .pc{color:var(--ink-4);font-size:12px;font-weight:600;min-width:34px;text-align:right}
.sbar-row{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.sbar-row .nm{font-size:13px;font-weight:600;color:var(--ink-2);width:118px;flex-shrink:0}
.sbar-track{flex:1;height:9px;background:var(--surface-2);border-radius:100px;overflow:hidden}
.sbar-fill{height:100%;border-radius:100px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.sbar-row .ct{font-family:'Sora','Inter',system-ui,sans-serif;font-weight:700;font-size:13px;color:var(--ink);width:34px;text-align:right}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.tb-more{display:contents}
/* Phones lead with what needs action: "Needs your attention" before the tiles. */
@media(max-width:860px){ #wGrid:not(.editing) > [data-wkey="attention"]{order:-1} }
.tb-phone{display:none}
@media(max-width:860px){
  .toolbar .search{flex:1 1 100%}
  .toolbar .tb-phone{display:inline-flex;flex:1 1 0}
  .tb-more{display:none}
  .tb-more.open{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 100%}
  .tb-more.open .sel{flex:1 1 45%}
  .rows:not(.selecting) .row .cbx{display:none}
  .content .row .r2{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
.search{flex:1;min-width:240px;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;transition:.12s}
.search:focus-within{border-color:var(--t-400);box-shadow:0 0 0 3px var(--t-50)}
.search svg{width:17px;height:17px;color:var(--ink-4);flex-shrink:0}
.search input{border:none;background:none;outline:none;width:100%}
.sel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:9px 12px;color:var(--ink-2);font-weight:600;outline:none;transition:.12s;cursor:pointer}
.sel:hover{border-color:var(--line-2)}
.sel:focus{border-color:var(--t-400);box-shadow:0 0 0 3px var(--t-50)}
.btn{background:var(--t);color:#fff;border-radius:var(--r);padding:0 18px;min-height:40px;font-weight:600;font-size:14px;transition:.12s;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.btn:hover{background:var(--t-600);box-shadow:var(--shadow-md)}
.btn svg{width:16px;height:16px}
.btn.ghost{background:var(--surface);color:var(--ink-2);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--line-2);box-shadow:none}
.btn.dark{background:var(--ink)}.btn.dark:hover{background:#16302B}
.chk{display:flex;gap:7px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:9px 13px;font-weight:600;color:var(--ink-2);cursor:pointer;user-select:none}
.chk input{accent-color:var(--t);width:15px;height:15px}
.pills{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.pill{padding:8px 16px;border-radius:100px;font-size:13px;font-weight:600;background:var(--surface);border:1.5px solid var(--line);color:var(--ink-2);transition:.12s;white-space:nowrap}
.pill:hover{border-color:var(--t-400)}
.pill.on{background:var(--t);color:#fff;border-color:var(--t);box-shadow:0 3px 10px rgba(10,123,108,.24)}
.bulk{display:flex;gap:9px;align-items:center;background:var(--ink);color:#fff;border-radius:var(--r);padding:11px 16px;margin-bottom:14px;box-shadow:var(--shadow-md)}
.bulk b{font-family:'Sora','Inter',system-ui,sans-serif;font-weight:700}
.bulk .sp{flex:1}
.bulk button{color:#fff;font-weight:600;background:rgba(255,255,255,.14);border-radius:8px;padding:7px 13px;font-size:13px;transition:.12s}
.bulk button:hover{background:rgba(255,255,255,.26)}
.rows{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.row{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line);transition:.12s;cursor:pointer;position:relative}
.row:last-child{border-bottom:none}
.row:hover{background:var(--surface-2)}
.row.unread{background:linear-gradient(90deg,var(--t-50) 0%,transparent 60%)}
.row.unread:hover{background:linear-gradient(90deg,var(--t-100) 0%,var(--surface-2) 60%)}
.row .cbx{width:16px;height:16px;accent-color:var(--t);flex-shrink:0}
.avph{display:flex;width:46%;height:46%}.avph svg{width:100%;height:100%}
.row .av{width:42px;height:42px;border-radius:12px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;font-family:'Sora','Inter',system-ui,sans-serif;flex-shrink:0}
.row .body{flex:1;min-width:0}
.row .r1{display:flex;align-items:center;gap:9px;margin-bottom:3px}
.row .nm{font-weight:600;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.row .r2{font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.numsub{font-weight:600;color:var(--ink-2)}
.row .meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.row .when{font-size:12px;color:var(--ink-4);font-weight:600;white-space:nowrap}
.sdot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.tag{font-size:12px;font-weight:600;padding:3px 9px;border-radius:100px;white-space:nowrap}
.tag.route{background:var(--t-50);color:var(--t);display:inline-flex;align-items:center;gap:4px}
.tag svg{width:12px;height:12px}
.pri-pill{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--coral);background:var(--coral-50);padding:3px 9px;border-radius:100px;font-family:'Sora','Inter',system-ui,sans-serif}
.status-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 11px;border-radius:100px}
.empty{padding:56px 24px;text-align:center;color:var(--ink-3)}
.empty .big{font-family:'Sora','Inter',system-ui,sans-serif;font-size:16px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.empty svg{width:40px;height:40px;color:var(--line-2);margin-bottom:14px}
.count{text-align:center;color:var(--ink-4);font-size:12px;font-weight:500;padding:16px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;transition:.12s;cursor:pointer}
.ccard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--line-2)}
.ccard .top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ccard .av{width:46px;height:46px;border-radius:13px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;font-family:'Sora','Inter',system-ui,sans-serif;flex-shrink:0}
.ccard .nm{font-weight:700;font-size:16px;font-family:'Sora','Inter',system-ui,sans-serif;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccard .ph{font-size:13px;color:var(--ink-3);font-weight:500}
.ccard svg{width:100%;height:100%;display:block}
.ccard .stats{display:flex;gap:18px;padding-top:14px;border-top:1px solid var(--line)}
.ccard .st .n{font-family:'Sora','Inter',system-ui,sans-serif;font-weight:700;font-size:17px;color:var(--ink)}
.ccard .st .l{font-size:12px;color:var(--ink-4);font-weight:600;margin-top:2px}
.scrim{position:fixed;inset:0;background:rgba(14,31,28,.42);backdrop-filter:blur(3px);z-index:60;opacity:0;pointer-events:none;transition:.28s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:-520px;width:500px;max-width:94vw;height:100vh;background:var(--surface);z-index:70;box-shadow:-16px 0 50px rgba(14,31,28,.16);transition:right .28s cubic-bezier(.3,.9,.3,1);display:flex;flex-direction:column;overflow:hidden}
.drawer.on{right:0}
.dhead{display:flex;align-items:center;gap:14px;padding:22px 24px;border-bottom:1px solid var(--line)}
.dhead .av{width:48px;height:48px;border-radius:14px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;font-family:'Sora','Inter',system-ui,sans-serif;flex-shrink:0}
.dhead .who{flex:1;min-width:0}
.dhead .who b{display:block;font-size:17px;font-family:'Sora','Inter',system-ui,sans-serif;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dhead .who span{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.dx{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:22px;transition:.12s;flex-shrink:0}
.dx:hover{background:var(--surface-2);color:var(--ink)}
.dbody{flex:1;overflow-y:auto;padding:22px 24px}
.dsec{margin-bottom:22px}
.dlbl{font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:8px;font-family:'Sora','Inter',system-ui,sans-serif}
.daudio{width:100%;height:40px}
.dtr{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:14px;font-size:14px;line-height:1.6;color:var(--ink-2);white-space:pre-wrap;max-height:260px;overflow-y:auto}
.dsum{margin-top:10px;background:var(--t-50);border:1px solid var(--t-100);border-radius:var(--r);padding:12px 14px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.dsum b{color:var(--t);font-weight:700}
.dchips{display:flex;flex-wrap:wrap;gap:8px}
.dchip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:100px;border:1.5px solid var(--line);font-weight:600;font-size:13px;color:var(--ink-2);transition:.12s}
.dchip:hover{border-color:var(--line-2)}
.dchip.on{background:var(--t);color:#fff;border-color:var(--t)}
.dchip.on.coral{background:var(--coral);border-color:var(--coral)}
.dchip.on.amber{background:var(--amber);border-color:var(--amber)}
.status-opts{display:flex;flex-wrap:wrap;gap:8px}
.dnote{width:100%;min-height:88px;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;resize:vertical;outline:none;line-height:1.5;transition:.12s}
.dnote:focus{border-color:var(--t-400);box-shadow:0 0 0 3px var(--t-50)}
.qa-grid{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.qa-item{background:var(--surface);padding:11px 14px;display:flex;gap:12px;align-items:baseline}
.qa-q{font-size:12px;font-weight:600;color:var(--ink-3);min-width:100px;flex-shrink:0;text-transform:capitalize}
.qa-a{font-size:14px;font-weight:600;color:var(--ink)}
.callback-box{display:flex;align-items:center;gap:9px;background:var(--amber-50);border:1px solid #F3E0B8;border-radius:var(--r);padding:12px 14px;color:var(--ink-2);font-size:14px}
.callback-box svg{width:17px;height:17px;color:var(--amber)}
.callback-box b{color:var(--ink);font-weight:700}
.dinfo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dinfo .box{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px}
.dinfo .box .l{font-size:12px;color:var(--ink-4);font-weight:600;}
.dinfo .box .v{font-size:14px;font-weight:600;color:var(--ink);margin-top:3px;font-family:'Sora','Inter',system-ui,sans-serif}
.dfoot{display:flex;gap:10px;padding:16px 24px;border-top:1px solid var(--line);flex-wrap:wrap}
.dfoot .btn{flex:1;justify-content:center;min-width:120px}
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;margin-bottom:16px;cursor:pointer}
.tl-item::before{content:"";position:absolute;left:-22px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--surface);border:2.5px solid var(--t-400)}
.tl-item .h{display:flex;align-items:center;gap:9px;margin-bottom:3px}
.tl-item .dt{font-size:12px;color:var(--ink-4);font-weight:600}
.tl-item .tx{font-size:13px;color:var(--ink-2);line-height:1.5}
.tl-item:hover .tx{color:var(--ink)}
.editrow{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.editrow:last-child{border-bottom:none}
.editrow .swatch{width:30px;height:30px;border-radius:9px;flex-shrink:0;border:1px solid rgba(0,0,0,.05)}
.editrow .base{font-size:12px;color:var(--ink-4);font-weight:600;width:120px;flex-shrink:0}
.editrow input[type=text]{flex:1;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;outline:none;transition:.12s}
.editrow input[type=text]:focus{border-color:var(--t-400);box-shadow:0 0 0 3px var(--t-50)}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.field .hint{font-size:12px;color:var(--ink-3);font-weight:400;margin-top:6px;line-height:1.5}
.field input[type=text],.field input[type=email],.field input[type=url],.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:var(--r);padding:11px 14px;outline:none;transition:.12s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--t-400);box-shadow:0 0 0 3px var(--t-50)}
/* Baseline for inputs that aren't inside a .field (FAQ editor, text templates,
   day planner). :where() keeps specificity at zero, so any styled input wins. */
:where(.panel,.drawer,.modal) :where(input:not([type]),input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=date],input[type=time],textarea){border:1px solid var(--line);border-radius:var(--r);padding:9px 12px;background:var(--surface);outline:none;transition:.12s}
:where(.panel,.drawer,.modal) :where(input:not([type]),input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=date],input[type=time],textarea):focus{border-color:var(--t-400);box-shadow:0 0 0 3px var(--t-50)}
.toggle{position:relative;width:42px;height:24px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle .track{position:absolute;inset:0;background:var(--line-2);border-radius:100px;transition:.2s;cursor:pointer}
.toggle .track::before{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.2s;box-shadow:var(--shadow-sm)}
.toggle input:checked+.track{background:var(--t)}
.toggle input:checked+.track::before{transform:translateX(18px)}
.int-card{display:flex;align-items:flex-start;gap:15px;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:14px;transition:.12s}
.int-card:hover{border-color:var(--line-2)}
.int-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.int-card .info{flex:1;min-width:0}
.int-card .info h4{font-size:15px;font-weight:700;margin-bottom:3px}
.int-card .info p{font-size:13px;color:var(--ink-3);line-height:1.5}
.status-badge{font-size:12px;font-weight:700;padding:4px 10px;border-radius:100px;font-family:'Sora','Inter',system-ui,sans-serif;white-space:nowrap}
.status-badge.on{background:var(--green-50);color:var(--green)}
.status-badge.off{background:var(--surface-2);color:var(--ink-4)}
.status-badge.soon{background:var(--amber-50);color:var(--amber)}
.member{display:flex;align-items:center;gap:13px;padding:15px 0;border-bottom:1px solid var(--line)}
.member:last-child{border-bottom:none}
.role-chip{font-size:12px;font-weight:700;padding:4px 11px;border-radius:100px;font-family:'Sora','Inter',system-ui,sans-serif}
.role-chip.owner{background:var(--violet-50);color:var(--violet)}
.role-chip.manager{background:var(--blue-50);color:var(--blue)}
.role-chip.pending{background:var(--amber-50);color:var(--amber)}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:#fff;padding:13px 22px;border-radius:var(--r);font-size:14px;font-weight:500;box-shadow:var(--shadow-lg);z-index:100;opacity:0;transition:.28s cubic-bezier(.3,.9,.3,1);max-width:90vw}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--line) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:sh 1.4s infinite;border-radius:8px}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(max-width:1100px){.kpi-grid,.kpi-grid-5{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-2b{grid-template-columns:1fr}}
/* WIDGET GRID. Four columns of small tiles on a desktop; two on a tablet and
   phone, where a "small" tile still needs to be readable. Anything wider than
   the grid is clamped to full width rather than overflowing. */
/* On a narrow screen the 4-column grid becomes 2. A tile the user set to
   WIDE stays full width; anything else gets one column if it's a number and
   two if it's a chart, because a chart at half a phone screen is unreadable
   whatever the user picked on their laptop. */
@media(max-width:1100px){
  #wGrid{grid-template-columns:repeat(2,1fr)!important}
  /* COLUMN only. grid-row carries the measured height and must never be
     overridden here, or tiles would overlap on a phone. */
  #wGrid>*{grid-column:span 2!important}
  #wGrid>.kpi{grid-column:span 1!important}
}
@media(max-width:520px){
  #wGrid>.kpi{grid-column:span 1!important}
}
@media(max-width:520px){ #wGrid{gap:10px!important} }
/* The cell is only a position; the widget inside is the visible thing. The
   inner must fill it so a tile never looks stretched or clipped, and both
   must be allowed to shrink below their content or a long number blows the
   column out. */
#wGrid>*{min-width:0}
/* FIRST child only. The size bar is also a child of the cell, and height:100%
   was stretching every S/M/L button down the whole tile. */
#wGrid>*>:first-child{min-width:0;height:100%;box-sizing:border-box}
#wGrid [draggable=true]{cursor:grab}
#wGrid [draggable=true]:active{cursor:grabbing}

/* MOBILE. Two columns of numbers, everything else full width, and no row
   spans at all - the browser stacks these perfectly well on its own, and the
   measured spans were what made the tiles overlap and misalign. */
@media(max-width:1100px){
  #wGrid{grid-auto-rows:auto!important;align-items:stretch!important}
  #wGrid>*{grid-row:auto!important}
}
/* EDIT CONTROLS. Explicit height so nothing can stretch them, and a soft
   backdrop so they stay readable over a chart or a dark tile. */
#wGrid [data-wkey] > div:last-child > button{height:24px;min-width:26px;display:inline-flex;
  align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(14,31,28,.14)}
@media(max-width:1100px){
  /* Sizes are decided by the layout on a small screen, so a size button here
     would do nothing and would be lying about what it controls. Order still
     matters, so the move arrows stay. */
  .w-size{display:none!important}
  #wGrid [data-wkey] > div:last-child > button{height:30px;min-width:34px;font-size:12px}
}
@media(max-width:520px){
  #wGrid .kpi{padding:14px}
  #wGrid .kpi .val{font-size:26px}
  #wGrid .kpi .ic{width:34px;height:34px;margin-bottom:10px}
  #wGrid .panel-h{padding:14px 14px 10px}
  #wGrid .panel-b{padding:4px 14px 14px}
}
@media(max-width:860px){
  :root{--sidebar:0px}
  .sidebar{position:fixed;top:0;left:-272px;width:260px;height:100vh;height:100svh;z-index:65;transition:left .28s cubic-bezier(.3,.9,.3,1);box-shadow:var(--shadow-lg)}
  .sidebar.open{left:0}
  .shell{grid-template-columns:1fr}
  .hamb{display:flex;width:40px;height:40px;border-radius:10px;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);flex-shrink:0}
  .hamb svg{width:20px;height:20px}
  .content{padding:18px 14px 76px}
  /* Topbar: title stays on row 1, search wraps to its own full-width row */
  .topbar{padding:12px 14px;flex-wrap:wrap;gap:10px;min-height:0}
  .topbar h2{font-size:17px}
  .topbar .sub{display:none}
  .gsearch{order:5;flex-basis:100%;max-width:none;margin:0}
  /* iOS zooms into any focused input under 16px - this stops that jump */
  input,select,textarea,.sel,.gsearch input,.search input,.field input,.field select,.field textarea{font-size:16px !important}
  /* Comfortable touch targets */
  .nav-item{padding:11px 12px;min-height:44px}
  .btn{padding:11px 16px;min-height:44px}
  .sel{min-height:44px;display:inline-flex;align-items:center}
  /* Panels + rows: tighter, no wasted edge space */
  .panel-h{padding:16px 16px 12px;flex-wrap:wrap}
  .row{padding:13px 14px;gap:11px}
  .row .av{width:38px;height:38px}
  .editrow{flex-wrap:wrap;gap:10px}
  .toolbar{gap:8px}
  .toolbar .btn{flex:1 1 auto;justify-content:center}
  /* Call volume: tiny gaps so 30/90-day views fit the width instead of overflowing */
  .bars{gap:2px}
  /* By category: donut centered on its own row, legend stacks full-width below */
  .donut-row{gap:14px;justify-content:center}
  .legend{min-width:100%;flex-basis:100%}
  /* Never let a fixed-width element exceed the viewport */
  .cal{max-width:100%}
  .search{min-width:0;flex:1 1 100%}
  .gate{padding:34px 22px}
  /* Drawer takes the full screen on a phone */
  .drawer{width:100vw;max-width:100vw;right:-100vw}
  .dhead{padding:16px 16px;gap:12px}
  .dbody{padding:16px 16px}
  .dfoot{padding:12px 16px}
  .dfoot .btn{min-width:0}
}
@media(max-width:520px){
  .kpi-grid,.kpi-grid-5{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi-grid-5 .kpi-hero{grid-column:1/-1}
  .kpi{padding:14px}
  .kpi .ic{width:32px;height:32px;margin-bottom:10px;border-radius:9px}
  .kpi .ic svg{width:17px;height:17px}
  .kpi .val{font-size:24px}
  .kpi .lbl{font-size:12px;margin-top:5px}
  .kpi .trend{top:14px;right:12px;font-size:12px;padding:2px 6px}
  .cgrid{grid-template-columns:1fr}
  .row .nm{max-width:none}
  /* Tags wrap under the caller's name instead of squeezing it to "Rit…" */
  .row .r1{flex-wrap:wrap;row-gap:4px}
  .row .r1 .nm{flex:1 0 100%;max-width:100%}
  .content{padding:14px 12px 76px}
  .panel-h h3{font-size:16px}
  .dhead .av{width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.demo-ribbon{position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:linear-gradient(90deg,#0d9e8a,#0A7B6C);color:#fff;
  padding:9px 16px;text-align:center;font-size:13px;font-weight:600;
  letter-spacing:.01em;font-family:'Inter',system-ui,sans-serif}
.demo-ribbon a{color:#fff;text-decoration:underline;font-weight:800}
/* The demo bar steps aside while a drawer or sheet is open, so it never
   covers the drawer's buttons. */
body:has(.drawer.on) .demo-ribbon{display:none}


/* ── Design language v1 (Nov 2026): touch targets ───────────────────────
   Every control a thumb uses is at least 44px on phones and tablets. */
@media (max-width:820px), (pointer:coarse){
  .dx,[data-rm],[data-rtdel],[data-qdel],[data-delw],[data-hide],[data-plrm]{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  /* Small overlay buttons (photo and tag remove) keep their size; a larger
     invisible hit area is added instead so the thumbnail and chip don't grow. */
  [data-rmexist],[data-rmp],[data-rmtag]{position:relative}
  [data-rmexist]::after,[data-rmp]::after,[data-rmtag]::after{content:"";position:absolute;inset:-12px}
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
  .dchip,.tag-filter{min-height:40px}
  .btn,.sel{min-height:44px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}