/* ============================================================
   BlueWave CRM
   Type: the system UI stack. On macOS that resolves to SF Pro,
   which is the right face for a tool that should feel like it
   shipped with the operating system, not like a web dashboard.
   Colour: one neutral ramp, one accent, three status hues.
   Colour is reserved for state. Nothing is coloured to decorate.
   ============================================================ */
:root{
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --num:ui-monospace,"SF Mono",SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;

  --canvas:#FBFBFA;
  --surface:#FFFFFF;
  --surface-2:#F6F6F5;
  --surface-3:#EFEFEE;
  --hairline:#E4E4E1;
  --hairline-strong:#D4D4D0;

  --ink:#18181B;
  --ink-2:#52525B;
  --ink-3:#71717A;
  --ink-4:#B4B4BB;

  --accent:#0A7A72;
  --accent-hover:#096861;
  --accent-soft:#E8F4F2;
  --accent-line:#B7DDD8;

  --ok:#15803D;      --ok-soft:#EAF6EE;   --ok-line:#BBE0C8;
  --warn:#9A5B00;    --warn-soft:#FDF3E3; --warn-line:#EFD5A8;
  --bad:#B42318;     --bad-soft:#FDECEA;  --bad-line:#F2C2BD;
  --info:#3730A3;    --info-soft:#EEEDFB; --info-line:#CBC8F0;

  --shadow-1:0 1px 2px rgba(24,24,27,.05), 0 0 0 1px rgba(24,24,27,.04);
  --shadow-2:0 4px 12px rgba(24,24,27,.07), 0 0 0 1px rgba(24,24,27,.05);
  --shadow-3:0 16px 40px rgba(24,24,27,.13), 0 0 0 1px rgba(24,24,27,.06);

  --r-sm:6px; --r:8px; --r-lg:12px; --r-xl:16px;
  --ease:cubic-bezier(.4,0,.2,1);
  --topbar:56px;
}
[data-theme="dark"]{
  --canvas:#101013;
  --surface:#18181C;
  --surface-2:#1F1F24;
  --surface-3:#28282E;
  --hairline:#2B2B32;
  --hairline-strong:#40404A;

  --ink:#F4F4F5;
  --ink-2:#A8A8B0;
  --ink-3:#909099;
  --ink-4:#5A5A62;

  --accent:#2DD4BF;
  --accent-hover:#5EEAD4;
  --accent-soft:#0F2E2B;
  --accent-line:#1B4A45;

  --ok:#4ADE80;   --ok-soft:#10281A;   --ok-line:#1D4530;
  --warn:#FBBF24; --warn-soft:#2A2110; --warn-line:#4A3A17;
  --bad:#F87171;  --bad-soft:#2B1514;  --bad-line:#4D2422;
  --info:#A5B4FC; --info-soft:#1A1A33; --info-line:#2E2E55;

  --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.055), inset 0 1px 0 rgba(255,255,255,.045);
  --shadow-2:0 6px 18px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.065), inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-3:0 20px 48px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08);
}
[data-theme="dark"] body{
  background:
    radial-gradient(900px 420px at 20% -12%, rgba(45,212,191,.045), transparent 60%),
    var(--canvas);
  background-attachment:fixed;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;min-height:100%}
body{
  background:var(--canvas); color:var(--ink);
  font-family:var(--ui); font-size:14px; line-height:1.47;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:none;padding:0;cursor:pointer}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
::selection{background:var(--accent-soft);color:var(--ink)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:var(--hairline-strong);border-radius:8px;border:3px solid var(--canvas)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-4)}
::-webkit-scrollbar-track{background:transparent}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.view{display:block}
.view[hidden]{display:none}
.rk{margin:0}
.num{font-family:var(--num);letter-spacing:-.02em}
.dim{color:var(--ink-3)}

/* ---------------- top bar ---------------- */
.topbar{
  position:sticky;top:0;z-index:60;height:var(--topbar);
  display:flex;align-items:center;gap:18px;padding:0 18px;
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--hairline);
}
.wordmark{display:flex;align-items:center;gap:9px;min-width:172px;flex:none}
.wordmark .glyph{
  width:26px;height:26px;border-radius:7px;flex:none;
  background:linear-gradient(160deg, color-mix(in srgb,var(--accent) 88%, #fff) 0%, var(--accent) 55%, color-mix(in srgb,var(--accent) 78%, #000) 100%);
  display:grid;place-items:center;color:#fff;
  box-shadow:0 1px 2px rgba(10,122,114,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.wordmark .glyph svg{width:14px;height:14px}
[data-theme="dark"] .wordmark .glyph{color:#08201E}
.wordmark b{font-size:14.5px;font-weight:600;letter-spacing:-.015em}

/* market clocks: the one distinctive element, kept quiet */
.markets{
  display:flex;align-items:stretch;flex:1 1 auto;min-width:0;max-width:max-content;overflow-x:auto;scrollbar-width:none;
  background:var(--surface-2);border:1px solid var(--hairline);border-radius:9px;padding:3px;
}
.markets::-webkit-scrollbar{display:none}
.market{
  display:flex;align-items:center;gap:7px;padding:5px 13px;border-radius:6px;
  white-space:nowrap;transition:background .12s var(--ease);position:relative;
}
.market + .market::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--hairline)}
.market:hover{background:var(--surface-3)}
.market .dot{width:6px;height:6px;border-radius:50%;background:var(--ink-4);flex:none}
.market.open .dot{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)}
.market.soon .dot{background:var(--warn)}
.market .code{font-size:11.5px;font-weight:600;color:var(--ink-2)}
.market.open .code{color:var(--ink)}
.market .time{font-family:var(--num);font-size:11.5px;color:var(--ink-3)}
.market.open .time{color:var(--ink-2)}

.topmetrics{display:flex;align-items:center;gap:0;flex:none;margin-left:auto}
.metric{text-align:right;line-height:1.2;padding:0 14px}
.metric + .metric{border-left:1px solid var(--hairline)}
.topmetrics .iconbtn{margin-left:12px}
.metric b{display:block;font-family:var(--num);font-size:14px;font-weight:600}
.metric span{font-size:10.5px;color:var(--ink-3)}
.iconbtn{
  width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;
  color:var(--ink-2);transition:.12s var(--ease);flex:none;font-size:14px;
}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.iconbtn svg{width:16px;height:16px}

/* ---------------- shell ---------------- */
.shell{display:grid;grid-template-columns:212px minmax(0,1fr);min-height:calc(100vh - var(--topbar))}
.sidebar{
  border-right:1px solid var(--hairline);padding:12px 10px 32px;
  position:sticky;top:var(--topbar);height:calc(100vh - var(--topbar));overflow:auto;
}
.navgroup{margin:14px 0 4px;padding:0 8px;font-size:11px;font-weight:600;color:var(--ink-3)}
.navgroup:first-child{margin-top:2px}
.nav{
  width:100%;display:flex;align-items:center;gap:9px;padding:6.5px 8px;border-radius:var(--r-sm);
  color:var(--ink-2);margin:1px 0;text-align:left;font-size:13.5px;font-weight:450;
  transition:background .12s var(--ease),color .12s var(--ease);
}
.nav:hover{background:var(--surface-2);color:var(--ink)}
.nav.on{background:var(--surface-3);color:var(--ink);font-weight:550}
.nav .ic{width:16px;height:16px;flex:none;color:var(--ink-3);display:grid;place-items:center}
.nav .ic svg{width:15px;height:15px}
.nav.on .ic{color:var(--accent)}
.nav .lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav .ct{font-family:var(--num);font-size:11.5px;color:var(--ink-4)}
.nav.on .ct{color:var(--ink-3)}
.sidebar .tools{display:flex;flex-direction:column;gap:4px;padding:0 2px}
.savenote{display:flex;align-items:center;gap:7px;padding:16px 8px 0;font-size:11.5px;color:var(--ink-3);line-height:1.4}
.savenote::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}

.main{padding:28px 32px 110px;min-width:0}
.view{max-width:1120px}
#v-board{max-width:1560px}
#v-leads{max-width:1360px}
.pagehead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:20px}
h1{font-size:26px;font-weight:640;letter-spacing:-.025em;margin:0;line-height:1.18}
.lede{color:var(--ink-2);font-size:13.5px;margin:5px 0 0;max-width:66ch;line-height:1.5}

/* ---------------- controls ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:32px;padding:0 12px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--hairline-strong);
  color:var(--ink);font-size:13px;font-weight:500;white-space:nowrap;
  box-shadow:0 1px 1px rgba(24,24,27,.03);
  transition:background .12s var(--ease),border-color .12s var(--ease),transform .06s var(--ease);
}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:translateY(.5px)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(10,122,114,.25)}
.btn.pri:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
[data-theme="dark"] .btn.pri{color:#06201D}
.btn.quiet{border-color:transparent;background:transparent;box-shadow:none;color:var(--ink-2)}
.btn.quiet:hover{background:var(--surface-2);color:var(--ink)}
.btn.danger{color:var(--bad);border-color:var(--bad-line)}
.btn.danger:hover{background:var(--bad-soft)}
.btn.sm{height:27px;padding:0 9px;font-size:12.5px}
.btn.wide{width:100%;justify-content:flex-start;gap:8px}
.btn svg{width:16px;height:16px;flex:none}.btn.wide svg{width:14px;height:14px;color:var(--ink-3)}
.btn:disabled{opacity:.45;cursor:not-allowed}

.ctl{
  width:100%;height:32px;padding:0 10px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--hairline-strong);color:var(--ink);
  font-size:13px;transition:border-color .12s var(--ease),box-shadow .12s var(--ease);
}
textarea.ctl{height:auto;padding:8px 10px;line-height:1.5;resize:vertical}
.ctl:hover{border-color:var(--ink-4)}
.ctl:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.ctl::placeholder{color:var(--ink-4)}
select.ctl{appearance:none;padding-right:26px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A8A93' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center}
label.fld{display:block}
label.fld > span{display:block;font-size:12px;font-weight:500;color:var(--ink-2);margin-bottom:5px}
input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}

.toolbar{display:grid;grid-template-columns:minmax(220px,1.7fr) repeat(4,minmax(112px,1fr)) auto;gap:8px;margin:0 0 14px}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.statline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;font-size:13px;color:var(--ink-3)}
.statline .st{display:flex;align-items:baseline;gap:6px}
.statline .st b{font-family:var(--num);font-size:15px;font-weight:600;color:var(--ink)}
.statline .sep{width:1px;height:14px;background:var(--hairline-strong)}
.statline button{color:var(--accent);font-weight:500;font-size:13px}
.statline button:hover{text-decoration:underline;text-underline-offset:2px}
.filter{
  height:28px;padding:0 11px;border-radius:99px;border:1px solid var(--hairline-strong);
  background:var(--surface);color:var(--ink-2);font-size:12.5px;display:inline-flex;align-items:center;gap:6px;
  transition:.12s var(--ease);
}
.filter:hover{background:var(--surface-2);color:var(--ink)}
.filter.on{background:var(--ink);border-color:var(--ink);color:var(--canvas);font-weight:500}
.filter .n{font-family:var(--num);font-size:11.5px;opacity:.62}

/* ---------------- surfaces ---------------- */
.panel{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.panel-pad{padding:16px}
.panel-title{font-size:13px;font-weight:600;margin:0 0 12px;color:var(--ink)}
.grid-6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.kpi{padding:14px 15px}
.kpi .k{font-size:12px;color:var(--ink-2);font-weight:500}
.kpi .v{font-size:27px;font-weight:600;letter-spacing:-.03em;margin-top:3px;line-height:1.1;font-family:var(--num)}
.kpi .m{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.kpi.accent .v{color:var(--accent)} .kpi.ok .v{color:var(--ok)}
.kpi.warn .v{color:var(--warn)} .kpi.bad .v{color:var(--bad)}

/* ---------------- tags ---------------- */
.tag{
  display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 8px;border-radius:5px;
  background:var(--surface-2);color:var(--ink-2);font-size:11.5px;font-weight:500;white-space:nowrap;
  border:1px solid transparent;
}
.tag.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.tag.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.tag.bad{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line)}
.tag.accent{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.tag.info{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
a.tag:hover{text-decoration:none;filter:brightness(.97)}

/* ---------------- call queue ---------------- */
.cockpit{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:18px;align-items:start}
.record{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-xl);box-shadow:var(--shadow-2);overflow:hidden}
.record-bar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 20px;border-bottom:1px solid var(--hairline);background:var(--surface-2);
}
.counter{font-family:var(--num);font-size:12px;color:var(--ink-3)}
.record-main{padding:22px 20px 20px}
.record-main h2{font-size:28px;font-weight:640;letter-spacing:-.03em;margin:0;line-height:1.15}
.subline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;color:var(--ink-2);font-size:13.5px}
.subline .sep{color:var(--ink-4)}

.window{
  display:flex;align-items:center;gap:10px;margin-top:16px;padding:9px 13px;
  border-radius:var(--r);background:var(--surface-2);border:1px solid var(--hairline);
}
.window .dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--ink-4)}
.window.open .dot{background:var(--ok);box-shadow:0 0 0 3.5px color-mix(in srgb,var(--ok) 18%,transparent)}
.window.soon .dot{background:var(--warn);box-shadow:0 0 0 3.5px color-mix(in srgb,var(--warn) 18%,transparent)}
.window .txt{font-size:13px;color:var(--ink-2)}
.window .txt b{color:var(--ink);font-weight:550}
.window .clock{margin-left:auto;font-family:var(--num);font-size:13px;color:var(--ink-2)}

.contact{margin-top:14px;padding:16px;border-radius:var(--r-lg);border:1px solid var(--hairline);background:var(--surface-2)}
.contact-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.contact-head .lbl{font-size:12px;font-weight:550;color:var(--ink-2)}
.contact-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.phone{font-family:var(--num);font-size:25px;font-weight:500;letter-spacing:-.03em;line-height:1.1}
.email{font-size:13px;color:var(--accent);margin-top:5px;word-break:break-all}
.aside-note{font-size:12.5px;color:var(--ink-3);margin-top:7px;line-height:1.45;max-width:54ch}
.aside-note.caution{color:var(--warn)}
.actions{display:flex;gap:8px;flex-wrap:wrap}

.facts{display:flex;gap:26px;margin-top:16px;padding-top:15px;border-top:1px solid var(--hairline);flex-wrap:wrap}
.fact .k{font-size:11.5px;color:var(--ink-3);font-weight:500}
.fact .v{font-family:var(--num);font-size:17px;font-weight:550;letter-spacing:-.02em;margin-top:1px}
.chipline{display:flex;gap:6px;flex-wrap:wrap;margin-top:15px}
.notes{font-size:13px;color:var(--ink-2);margin:14px 0 0;line-height:1.5}

.script{margin-top:16px;border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
.script summary{padding:9px 13px;cursor:pointer;font-size:12.5px;font-weight:550;color:var(--ink-2);list-style:none;display:flex;align-items:center;justify-content:space-between}
.script summary::-webkit-details-marker{display:none}
.script summary::after{content:"⌄";color:var(--ink-4);font-size:14px;line-height:1}
.script[open] summary::after{content:"⌃"}
.script .body{padding:13px;font-size:13px;color:var(--ink-2);border-top:1px solid var(--hairline);background:var(--surface);line-height:1.55}
.script .body p{margin:0 0 9px} .script .body p:last-child{margin:0}
.script .body b{color:var(--ink);font-weight:600}

.outcomes{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:8px;padding:14px 20px;border-top:1px solid var(--hairline);background:var(--surface-2)}
.cardfoot{display:flex;align-items:center;gap:8px;padding:13px 20px;border-top:1px solid var(--hairline);background:var(--surface-2)}
.cardfoot .lead{font-size:12.5px;color:var(--ink-3);margin-right:auto}
.cardfoot kbd{font-family:var(--num);font-size:10.5px;color:var(--ink-3);background:var(--surface);border:1px solid var(--hairline-strong);border-radius:3px;padding:1px 5px;margin-left:6px}
.group{margin-top:18px}
.group > .glabel{font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:8px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-top:18px}
.formgrid .full{grid-column:1 / -1}
.oc{
  display:flex;align-items:center;justify-content:space-between;gap:7px;height:36px;padding:0 12px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--hairline-strong);font-size:13px;font-weight:500;
  box-shadow:0 1px 1px rgba(24,24,27,.03);transition:.12s var(--ease);
}
.oc:hover{background:var(--surface-2)}
.oc:active{transform:translateY(.5px)}
.oc kbd{
  font-family:var(--num);font-size:10.5px;color:var(--ink-3);background:var(--surface-2);
  border:1px solid var(--hairline);border-radius:3px;padding:1px 4px;line-height:1.3;
}
.oc.ok{color:var(--ok);border-color:var(--ok-line)} .oc.ok:hover{background:var(--ok-soft)}
.oc.warn{color:var(--warn);border-color:var(--warn-line)} .oc.warn:hover{background:var(--warn-soft)}
.oc.bad{color:var(--bad);border-color:var(--bad-line)} .oc.bad:hover{background:var(--bad-soft)}

.side > * + *{margin-top:14px}
.rowitem{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--hairline);font-size:13px}
.rowitem:last-child{border-bottom:none}
.rowitem span{color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rowitem b{font-family:var(--num);font-weight:550;flex:none}
.linkrow{cursor:pointer;border-radius:var(--r-sm);margin:0 -8px;padding:8px;border-bottom:1px solid var(--hairline)}
.linkrow:hover{background:var(--surface-2)}
.keys{display:flex;flex-wrap:wrap;gap:5px}
.keys kbd{font-family:var(--num);font-size:11px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--hairline);border-bottom-width:2px;border-radius:4px;padding:2px 6px}
.hint{font-size:12px;color:var(--ink-3);margin-top:8px;line-height:1.45}

/* ---------------- table ---------------- */
.tablewrap{border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:auto;background:var(--surface);box-shadow:var(--shadow-1);max-height:calc(100vh - var(--topbar) - 250px)}
table{width:100%;border-collapse:separate;border-spacing:0;min-width:1040px}
th,td{padding:0 12px;height:42px;text-align:left;font-size:13px;vertical-align:middle;border-bottom:1px solid var(--hairline)}
td.num, td .num{white-space:nowrap}
th{position:sticky;top:0;z-index:4;background:var(--surface-2);font-size:11.5px;font-weight:600;color:var(--ink-2);height:36px;white-space:nowrap}
th.s{cursor:pointer;user-select:none}
th.s:hover{color:var(--ink)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--surface-2)}
td .co{font-weight:550;cursor:pointer}
td .co:hover{color:var(--accent)}
.rowacts{display:flex;gap:4px}
.ia{width:27px;height:27px;border-radius:var(--r-sm);display:inline-grid;place-items:center;color:var(--ink-2);font-size:13px;transition:.12s var(--ease)}
.ia:hover{background:var(--surface-3);color:var(--ink)}
.ia.call:hover{color:var(--ok)} .ia.mail:hover{color:var(--accent)}
.ia.off{opacity:.3;cursor:not-allowed}
.cardlist{display:none;flex-direction:column;gap:10px}
.lcard{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:14px;box-shadow:var(--shadow-1)}
.lcard h3{font-size:16px;font-weight:600;letter-spacing:-.018em;margin:0 0 2px}

/* ---------------- board ---------------- */
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:14px}
.col{min-width:250px;flex:1;background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:10px}
.colhead{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 10px;font-size:12.5px}
.colhead b{font-weight:600}
.colhead span{font-family:var(--num);color:var(--ink-3);font-size:11.5px}
.zone{min-height:70px;display:flex;flex-direction:column;gap:7px;max-height:58vh;overflow:auto}
.kc{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);padding:10px;cursor:grab;box-shadow:var(--shadow-1);transition:.12s var(--ease)}
.kc:hover{box-shadow:var(--shadow-2)}
.kc.drag{opacity:.4}
.kc b{display:block;font-size:13px;font-weight:550;margin-bottom:2px}
.zone.over{outline:2px dashed var(--accent);outline-offset:2px;border-radius:var(--r)}

/* ---------------- bars ---------------- */
.bar{display:grid;grid-template-columns:132px 1fr 40px;gap:11px;align-items:center;padding:5px 0;font-size:12.5px}
.bar span{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .t{background:var(--surface-3);height:6px;border-radius:3px;overflow:hidden}
.bar .t i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .3s var(--ease)}
.bar b{font-family:var(--num);text-align:right;font-weight:550}

/* ---------------- overlays ---------------- */
.scrim{position:fixed;inset:0;background:rgba(24,24,27,.36);opacity:0;pointer-events:none;transition:opacity .18s var(--ease);z-index:70}
[data-theme="dark"] .scrim{background:rgba(0,0,0,.58)}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(500px,100%);background:var(--surface);
  border-left:1px solid var(--hairline-strong);transform:translateX(100%);z-index:80;
  transition:transform .26s var(--ease);display:flex;flex-direction:column;box-shadow:var(--shadow-3);
}
.drawer.on{transform:none}
.drawer-head{padding:16px 18px 14px;border-bottom:1px solid var(--hairline);display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.drawer-head h2{font-size:19px;font-weight:620;letter-spacing:-.022em;margin:0;line-height:1.25}
.drawer-head .meta{font-family:var(--num);font-size:11.5px;color:var(--ink-3);margin-top:5px}
.tabs{display:flex;gap:2px;padding:8px 14px 0;border-bottom:1px solid var(--hairline)}
.tab{padding:7px 11px;color:var(--ink-2);font-size:13px;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--accent);font-weight:550}
.drawer-body{flex:1;overflow:auto;padding:16px 18px 28px}
.pane{display:none} .pane.on{display:block}
.dsec{font-size:11.5px;font-weight:600;color:var(--ink-3);margin:20px 0 10px;padding-top:16px;border-top:1px solid var(--hairline)}
.dsec:first-child{margin-top:0;padding-top:0;border-top:none}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:11px}
.f1{margin-bottom:11px}
.drawer-foot{padding:12px 18px;border-top:1px solid var(--hairline);display:flex;gap:8px;justify-content:flex-end;background:var(--surface-2)}

.modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-48%) scale(.985);opacity:0;pointer-events:none;
  width:min(640px,94vw);max-height:88vh;overflow:auto;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--r-xl);z-index:90;
  transition:opacity .18s var(--ease),transform .18s var(--ease);box-shadow:var(--shadow-3);
}
.modal.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.modal-head{padding:15px 18px;border-bottom:1px solid var(--hairline);display:flex;justify-content:space-between;align-items:center}
.modal-head h3{font-size:16px;font-weight:600;letter-spacing:-.02em;margin:0}
.modal-body{padding:16px 18px}
.modal-foot{padding:12px 18px;border-top:1px solid var(--hairline);display:flex;gap:8px;justify-content:flex-end;background:var(--surface-2)}
.preview{background:#fff;border:1px solid var(--hairline);border-radius:var(--r);padding:16px;max-height:44vh;overflow:auto}

.event{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--hairline)}
.event:last-child{border-bottom:none}
.event .when{font-family:var(--num);font-size:11px;color:var(--ink-3);min-width:92px;line-height:1.45;flex:none}
.event .what{font-size:13px}
.event .what b{font-weight:600}

.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(14px);
  background:var(--ink);color:var(--canvas);padding:10px 14px;border-radius:var(--r);
  z-index:120;opacity:0;transition:.18s var(--ease);display:flex;gap:14px;align-items:center;
  box-shadow:var(--shadow-3);font-size:13px;max-width:min(520px,92vw);
}
.toast.on{opacity:1;transform:translateX(-50%)}
.toast button{color:var(--canvas);font-weight:600;font-size:12.5px;text-decoration:underline;text-underline-offset:2px}
.empty{padding:44px 24px;text-align:center}
.empty b{display:block;font-size:16px;font-weight:600;letter-spacing:-.015em;margin-bottom:6px}
.empty p{color:var(--ink-2);font-size:13.5px;margin:0 auto;max-width:46ch;line-height:1.5}
.bulkbar{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(90px);
  background:var(--surface);border:1px solid var(--hairline-strong);border-radius:var(--r-lg);
  padding:9px 11px;display:flex;gap:7px;align-items:center;z-index:65;box-shadow:var(--shadow-3);
  transition:transform .2s var(--ease),opacity .16s var(--ease),visibility .16s var(--ease);
  flex-wrap:wrap;max-width:94vw;opacity:0;visibility:hidden;pointer-events:none;
}
.bulkbar.on{transform:translateX(-50%);opacity:1;visibility:visible;pointer-events:auto}
.tabbar{display:none}
.links{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.links a{height:28px;padding:0 11px;border-radius:var(--r-sm);border:1px solid var(--hairline-strong);background:var(--surface);font-size:12.5px;color:var(--ink);display:inline-flex;align-items:center}
.links a:hover{background:var(--surface-2);text-decoration:none;border-color:var(--ink-4)}
.pair{display:grid;grid-template-columns:1fr auto 1fr auto;gap:14px;align-items:center;padding:13px;border:1px solid var(--hairline);border-radius:var(--r-lg);margin-bottom:9px;background:var(--surface);box-shadow:var(--shadow-1)}
.pair .vs{font-family:var(--num);font-size:10.5px;color:var(--ink-3);text-align:center;line-height:1.35}

/* ---------------- responsive ---------------- */
@media (max-width:1200px){ .cockpit{grid-template-columns:1fr} .grid-6{grid-template-columns:repeat(3,1fr)} }
@media (max-width:920px){
  .shell{grid-template-columns:1fr}
  .sidebar{display:none}
  .wordmark{min-width:auto}
  .topmetrics .metric{display:none}
  .main{padding:16px 14px 92px}
  .toolbar{grid-template-columns:1fr 1fr}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .formgrid{grid-template-columns:1fr}
  .markets{margin:0}
  .cardfoot{flex-wrap:wrap}
  .cardfoot .lead{width:100%;margin:0 0 4px}
  .tablewrap{display:none}
  .cardlist{display:flex}
  h1{font-size:22px}
  .record-main h2{font-size:22px}
  .phone{font-size:22px}
  .f2{grid-template-columns:1fr}
  .pair{grid-template-columns:1fr}
  .tabbar{
    display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:66;
    background:var(--surface);
    border-top:1px solid var(--hairline);padding:5px 4px calc(5px + env(safe-area-inset-bottom));
  }
  .tabbar button,.tabbar .tab-link{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 2px;color:var(--ink-3);font-size:10px;font-weight:500;border-radius:var(--r-sm)}
  .tabbar button.on{color:var(--accent)}
  .tabbar .ic{font-size:16px;line-height:1.1}
  .bulkbar{bottom:70px} .toast{bottom:74px}
}
@media (max-width:540px){ .grid-6{grid-template-columns:repeat(2,1fr)} .toolbar{grid-template-columns:1fr} }

/* ============================================================
   WATCH DESK — PREMIUM OPERATIONS LAYER
   Visual direction: calm command center, not generic SaaS.
   No external assets or dependencies; behavior remains untouched.
   ============================================================ */
:root{
  --nav:#0B1728;
  --nav-2:#0F2036;
  --nav-3:#142A46;
  --nav-ink:#E9F0F8;
  --nav-muted:#8EA2BA;
  --canvas:#F3F6FA;
  --surface:#FFFFFF;
  --surface-2:#F7F9FC;
  --surface-3:#EDF2F7;
  --hairline:#E1E7EF;
  --hairline-strong:#CDD7E3;
  --ink:#102033;
  --ink-2:#53657A;
  --ink-3:#617186;
  --ink-4:#A8B5C4;
  --accent:#007B6F;
  --accent-hover:#087A71;
  --accent-soft:#E6F6F3;
  --accent-line:#B6E4DD;
  --ok:#107D47;
  --ok-soft:#EAF7F0;
  --ok-line:#BDE5CD;
  --warn:#A45C08;
  --warn-soft:#FFF4E5;
  --warn-line:#F1D3AA;
  --bad:#B73A32;
  --bad-soft:#FDF0EF;
  --bad-line:#F1C6C2;
  --info:#4A5AC7;
  --info-soft:#EFF1FF;
  --info-line:#D2D7FF;
  --shadow-1:0 1px 2px rgba(16,32,51,.04),0 1px 1px rgba(16,32,51,.03);
  --shadow-2:0 12px 30px rgba(16,32,51,.08),0 2px 8px rgba(16,32,51,.04);
  --shadow-3:0 28px 70px rgba(8,22,40,.22),0 8px 24px rgba(8,22,40,.10);
  --r-sm:8px;
  --r:10px;
  --r-lg:14px;
  --r-xl:20px;
  --topbar:64px;
}
[data-theme="dark"]{
  --nav:#07111F;
  --nav-2:#0B1828;
  --nav-3:#102238;
  --nav-ink:#EDF4FA;
  --nav-muted:#8095AE;
  --canvas:#0B111A;
  --surface:#111A25;
  --surface-2:#162130;
  --surface-3:#1D2A3B;
  --hairline:#233348;
  --hairline-strong:#31445C;
  --ink:#EEF4FA;
  --ink-2:#B0BFCE;
  --ink-3:#8597AA;
  --ink-4:#5F7185;
  --accent:#2DD4BF;
  --accent-hover:#55E1CF;
  --accent-soft:#0E302E;
  --accent-line:#1D514B;
  --ok:#4ADE80;
  --ok-soft:#102B1C;
  --ok-line:#22573A;
  --warn:#FBBF24;
  --warn-soft:#2D2412;
  --warn-line:#5A471B;
  --bad:#FB7185;
  --bad-soft:#32171D;
  --bad-line:#612934;
  --info:#A5B4FC;
  --info-soft:#20213E;
  --info-line:#3B3D70;
}

html{background:var(--canvas)}
body{
  background:
    radial-gradient(900px 460px at 84% -15%, color-mix(in srgb,var(--accent) 8%,transparent), transparent 64%),
    var(--canvas);
  letter-spacing:-.012em;
}

/* Top command bar */
.topbar{
  height:var(--topbar);
  padding:0 22px 0 18px;
  gap:20px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--hairline) 88%,transparent);
  box-shadow:0 1px 0 rgba(16,32,51,.02);
}
.wordmark{min-width:214px;gap:10px}
.wordmark .glyph{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(145deg,#31D7C3 0%,#0B8F83 62%,#07645E 100%);
  box-shadow:0 6px 16px rgba(11,143,131,.22),inset 0 1px 0 rgba(255,255,255,.32);
}
.wordmark .glyph svg{width:17px;height:17px}
.brandlock{display:flex;flex-direction:column;line-height:1.05;gap:3px}
.brandlock b{font-size:15px;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.brandlock span{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.markets{
  max-width:min(52vw,720px);
  border-radius:10px;padding:3px;
  background:var(--surface-2);
  border-color:var(--hairline);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 50%,transparent);
}
.market{padding:6px 12px;border-radius:7px}
.market .code{font-size:11px;letter-spacing:.035em}
.market .time{font-size:11px}
.metric{padding:0 13px}
.metric b{font-size:15px;color:var(--ink)}
.metric span{font-size:9.5px;text-transform:uppercase;letter-spacing:.055em;font-weight:650}
.iconbtn{width:36px;height:36px;border-radius:9px}

/* Dark operations rail */
.shell{grid-template-columns:236px minmax(0,1fr)}
.sidebar{
  padding:16px 12px 30px;
  
  border-right:1px solid var(--hairline);
  
}
.navgroup{
  margin:18px 0 6px;padding:0 10px;
  font-size:9.5px;font-weight:750;letter-spacing:.13em;color:var(--ink-2);
}
.navgroup:first-child{margin-top:3px}
.nav{
  min-height:38px;padding:8px 10px;border-radius:9px;
  color:var(--ink-2);font-size:13.5px;font-weight:520;
}
.nav:hover{background:var(--surface-2);color:var(--ink)}
.nav.on{
  background:linear-gradient(90deg,rgba(45,212,191,.17),rgba(45,212,191,.08));
  color:#F3FFFC;font-weight:650;
  box-shadow:inset 3px 0 0 var(--accent),inset 0 0 0 1px rgba(45,212,191,.06);
}
.nav .ic{color:var(--ink-3)}
.nav.on .ic{color:var(--accent)}
.nav .ct{font-size:10.5px;color:var(--ink-2);background:var(--surface-3);padding:2px 6px;border-radius:99px}
.nav.on .ct{color:#B7F6EB;background:rgba(45,212,191,.10)}
.sidebar .btn.wide{
  background:var(--surface);border-color:var(--hairline-strong);color:var(--ink-2);box-shadow:none;
}
.sidebar .btn.wide:hover{background:var(--surface-2);color:var(--ink);border-color:var(--hairline-strong)}
.sidebar .hint{color:var(--ink-2)}
.sidebar #saveState{position:relative;padding-left:22px}
.sidebar #saveState::before{content:"";position:absolute;left:8px;top:17px;width:6px;height:6px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 4px rgba(74,222,128,.09)}

/* Main workspace */
.main{padding:34px 38px 120px}
.view{max-width:1180px}
#v-board{max-width:1640px}
#v-leads{max-width:1480px}
.pagehead{margin-bottom:22px;align-items:flex-end}
.page-kicker{font-size:9.5px;line-height:1;font-weight:800;letter-spacing:.13em;color:var(--accent);margin:0 0 8px;text-transform:uppercase;display:flex;align-items:center;gap:7px}
.page-kicker span{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 12%,transparent)}
h1{font-size:30px;font-weight:720;letter-spacing:-.035em;line-height:1.08;color:var(--ink)}
.lede{font-size:13.5px;color:var(--ink-2);margin-top:7px;max-width:70ch}

/* Controls feel deliberate */
.btn{height:36px;padding:0 13px;border-radius:9px;font-weight:600;border-color:var(--hairline-strong);box-shadow:0 1px 2px rgba(16,32,51,.035)}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(16,32,51,.07)}
.btn:active{transform:translateY(0)}
.btn.pri{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 94%,#fff),var(--accent));box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 22%,transparent)}
.btn.pri:hover{box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 27%,transparent)}
.btn.sm{height:30px;border-radius:8px}
.ctl{height:36px;border-radius:9px;padding:0 11px;background:var(--surface);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 40%,transparent)}
.ctl:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)}

/* Queue progress is a compact command strip */
.statline{
  display:flex;align-items:stretch;gap:0;flex-wrap:wrap;
  padding:5px;margin:0 0 18px;
  background:var(--surface);border:1px solid var(--hairline);border-radius:12px;box-shadow:var(--shadow-1);
}
.statline .st{padding:7px 13px;display:flex;align-items:baseline;gap:6px;border-radius:8px;color:var(--ink-3)}
.statline .st b{font-size:16px;color:var(--ink);font-weight:700}
.statline .sep{height:auto;align-self:stretch;background:var(--hairline);margin:4px 0}
.statline button{padding:0 10px;border-radius:8px}
.statline button:hover{background:var(--accent-soft);text-decoration:none}

/* Panels */
.panel{border-color:var(--hairline);box-shadow:var(--shadow-1);border-radius:15px}
.panel-pad{padding:17px}
.panel-title{font-size:11px;text-transform:uppercase;letter-spacing:.075em;font-weight:780;color:var(--ink-3);margin-bottom:12px}
.kpi{padding:16px}
.kpi .k{text-transform:uppercase;letter-spacing:.05em;font-size:10px;font-weight:700;color:var(--ink-3)}
.kpi .v{font-size:29px;font-weight:700}
.kpi .m{font-size:11px}

/* Calling cockpit */
.cockpit{grid-template-columns:minmax(0,1fr) 310px;gap:20px}
.record{
  border:1px solid color-mix(in srgb,var(--hairline) 90%,var(--accent));
  border-radius:22px;
  box-shadow:0 18px 44px rgba(31,51,74,.09),0 2px 8px rgba(31,51,74,.04);
}
.record-bar{
  min-height:48px;padding:10px 22px;
  background:linear-gradient(180deg,var(--surface-2),color-mix(in srgb,var(--surface-2) 68%,var(--surface)));
}
.counter{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.record-main{padding:27px 24px 24px}
.record-main h2{font-size:34px;font-weight:740;letter-spacing:-.042em;line-height:1.08;max-width:21ch}
.subline{margin-top:8px;font-size:13px;gap:7px}
.window{
  width:max-content;max-width:100%;padding:8px 12px;margin-top:18px;
  border-radius:99px;background:var(--surface-2);
}
.window .txt{font-size:12px}.window .clock{font-size:11.5px}
.contact{
  position:relative;margin-top:16px;padding:19px 19px 18px 22px;
  border-radius:15px;background:linear-gradient(135deg,var(--surface-2),color-mix(in srgb,var(--accent-soft) 26%,var(--surface-2)));
  overflow:hidden;
}
.contact::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#55E1CF))}
.contact-head{margin-bottom:11px}
.contact-head .lbl{text-transform:uppercase;letter-spacing:.06em;font-size:9.5px;font-weight:800;color:var(--ink-3)}
.phone{font-size:31px;font-weight:650;letter-spacing:-.04em;color:var(--ink)}
.email{font-size:13.5px;font-weight:550;margin-top:7px}
.contact .actions .btn{height:42px;padding:0 16px}
.contact .actions .btn.pri{min-width:108px;font-size:14px}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:18px;padding-top:0;border-top:none}
.fact{padding:12px 13px;border-radius:11px;background:var(--surface-2);border:1px solid var(--hairline)}
.fact .k{text-transform:uppercase;letter-spacing:.06em;font-size:9.5px;font-weight:750}
.fact .v{font-size:20px;font-weight:700;margin-top:3px}
.chipline{margin-top:17px}
.tag{height:23px;padding:0 8px;border-radius:6px;font-size:10.5px;font-weight:650}
.script{margin-top:18px;border-radius:12px}
.script summary{padding:11px 13px}
.script .body{padding:15px}
.outcomes{
  position:relative;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:14px 22px 18px;background:var(--surface-2)
}
.outcomes::before{content:"LOG OUTCOME";grid-column:1/-1;font-size:9.5px;font-weight:800;letter-spacing:.11em;color:var(--ink-3);padding:0 2px 2px}
.oc{height:41px;border-radius:10px;font-weight:650}
.oc:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(16,32,51,.06)}
.oc kbd{font-size:9.5px;border-radius:5px;padding:2px 5px}
.cardfoot{padding:13px 22px;background:var(--surface)}

/* Right rail as a glanceable mission panel */
.side{position:sticky;top:calc(var(--topbar) + 18px)}
.side .panel{overflow:hidden}
.side .rowitem{padding:9px 0}
.side .rowitem b{font-size:13px}
.keys{gap:6px}.keys kbd{padding:4px 7px;border-radius:6px;background:var(--surface-2)}
#upNext .linkrow{padding:10px 9px}

/* Prospect book */
.filters{gap:7px}
.filter{height:30px;border-radius:99px;padding:0 12px;font-weight:600}
.filter.on{background:var(--nav);border-color:var(--nav);color:#fff}
.toolbar{gap:9px;margin-bottom:14px}
.tablewrap{border-radius:14px;box-shadow:var(--shadow-1);max-height:calc(100vh - var(--topbar) - 255px)}
.tablewrap table{min-width:1120px}
th{height:40px;font-size:10px;text-transform:uppercase;letter-spacing:.055em;font-weight:760;background:color-mix(in srgb,var(--surface-2) 88%,var(--surface))}
td{height:50px;font-size:12.75px}
tbody tr:hover td{background:color-mix(in srgb,var(--accent-soft) 32%,var(--surface))}
td .co{font-weight:650}
.ia{width:30px;height:30px;border-radius:8px}

/* Follow ups / board */
.grid-3,.grid-2{gap:16px}
.board{gap:14px;padding:2px 2px 18px}
.col{min-width:270px;border-radius:15px;padding:11px;background:color-mix(in srgb,var(--surface-2) 90%,var(--canvas));border-color:var(--hairline)}
.colhead{padding:4px 5px 11px;font-size:11px;text-transform:uppercase;letter-spacing:.055em}
.kc{padding:12px;border-radius:11px;box-shadow:none}
.kc:hover{transform:translateY(-1px);box-shadow:var(--shadow-2);border-color:color-mix(in srgb,var(--accent) 20%,var(--hairline))}

/* Drawer / modal */
.scrim{background:rgba(9,20,34,.42);backdrop-filter:blur(2px)}
.drawer{width:min(560px,100%);border-left:0;box-shadow:-22px 0 60px rgba(7,17,31,.24)}
.drawer-head{padding:20px 22px 17px;background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.drawer-head h2{font-size:22px;font-weight:720}
.tabs{padding:8px 18px 0}
.tab{padding:9px 12px;font-weight:650}
.drawer-body{padding:20px 22px 34px}
.dsec{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;margin-top:24px}
.drawer-foot{padding:14px 22px;box-shadow:0 -8px 24px rgba(16,32,51,.04)}
.modal{border-radius:20px;border-color:var(--hairline-strong)}
.modal-head{padding:18px 20px}.modal-body{padding:19px 20px}.modal-foot{padding:14px 20px}
.preview{border-radius:12px}
.toast{border-radius:11px;padding:11px 15px}
.bulkbar{border-radius:14px;padding:10px 12px}

/* Empty states are quieter and more intentional */
.empty{padding:60px 28px}
.empty b{font-size:18px;font-weight:720}
.empty p{font-size:13px;max-width:52ch}

/* Mobile: preserve the power-user feel without crowding */
@media (max-width:1200px){
  .cockpit{grid-template-columns:1fr}
  .side{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .side > * + *{margin-top:0}
}
@media (max-width:920px){
  .topbar{padding:0 12px;height:58px;--topbar:58px}
  .wordmark{min-width:auto}.brandlock span{display:none}
  .markets{max-width:none;flex:1}.market{padding:5px 9px}.market .time{display:none}
  .main{padding:20px 14px 96px}
  .pagehead{align-items:flex-start;margin-bottom:17px}
  h1{font-size:27px}
  .record-main{padding:22px 17px 19px}
  .record-main h2{font-size:27px}
  .contact{padding:17px 15px 16px 18px}
  .phone{font-size:27px}
  .facts{grid-template-columns:repeat(2,1fr)}
  .outcomes{grid-template-columns:repeat(2,minmax(0,1fr));padding:13px 14px 16px}
  .side{grid-template-columns:1fr}
  .tabbar{
    left:10px;right:10px;bottom:10px;border:1px solid var(--hairline-strong);border-radius:16px;
    box-shadow:var(--shadow-3);padding:5px;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(16px)
  }
  .tabbar button,.tabbar .tab-link{border-radius:11px;padding:6px 2px}
  .tabbar button.on,.tabbar .tab-link.on{background:var(--accent-soft);color:var(--accent)}
}
@media (max-width:540px){
  .page-kicker{margin-bottom:7px}
  .record-bar{padding:9px 14px}
  .contact-row{align-items:flex-start}
  .contact .actions{width:100%}.contact .actions .btn{flex:1}
  .facts{gap:7px}.fact{padding:10px}
  .outcomes{grid-template-columns:1fr 1fr}
  .drawer-head,.drawer-body,.drawer-foot{padding-left:16px;padding-right:16px}
}


/* =========================================================
   FULL-CANVAS DESKTOP LAYOUT
   Use the available monitor width instead of capping the desk.
   ========================================================= */
@media (min-width:1201px){
  .main{
    width:100%;
    max-width:none;
    padding:30px 34px 110px;
  }

  /* Primary work surfaces should occupy the entire workspace. */
  #v-queue,
  #v-enrich,
  #v-leads,
  #v-board,
  #v-due,
  #v-dupes,
  #v-stats{
    width:100%;
    max-width:none;
  }

  #v-queue .pagehead,
  #v-enrich .pagehead,
  #v-leads .pagehead,
  #v-board .pagehead,
  #v-due .pagehead,
  #v-dupes .pagehead,
  #v-stats .pagehead{
    width:100%;
  }

  /* Full-width queue cockpit with the mission rail anchored right. */
  #v-queue .cockpit,
  #v-enrich .cockpit{
    width:100%;
    grid-template-columns:minmax(0,1fr) minmax(320px,360px);
    gap:24px;
  }

  #postSlot,
  #enrichSlot{
    min-width:0;
    width:100%;
  }

  #v-queue .record,
  #v-enrich .record{
    width:100%;
    max-width:none;
  }

  #v-queue .record-main,
  #v-enrich .record-main{
    padding:28px 28px 26px;
  }

  #v-queue .record-main h2,
  #v-enrich .record-main h2{
    max-width:none;
  }

  #v-queue .contact,
  #v-enrich .contact{
    padding:21px 22px 20px 25px;
  }

  #v-queue .contact-row,
  #v-enrich .contact-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
    gap:24px;
  }

  #v-queue .facts,
  #v-enrich .facts{
    grid-template-columns:repeat(4,minmax(150px,1fr));
  }

  #v-queue .side,
  #v-enrich .side{
    width:100%;
  }

  #v-queue .side .panel,
  #v-enrich .side .panel{
    width:100%;
  }

  /* Prospect table and pipeline should also make use of wide screens. */
  #v-leads .panel,
  #v-board .panel,
  #v-stats .panel{
    max-width:none;
  }
}

@media (min-width:1700px){
  .shell{
    grid-template-columns:244px minmax(0,1fr);
  }

  .main{
    padding-left:42px;
    padding-right:42px;
  }

  #v-queue .cockpit,
  #v-enrich .cockpit{
    grid-template-columns:minmax(0,1fr) 380px;
    gap:28px;
  }

  #v-queue .record-main,
  #v-enrich .record-main{
    padding:32px 32px 28px;
  }

  #v-queue .contact,
  #v-enrich .contact{
    padding:23px 26px 22px 28px;
  }

  #v-queue .phone{
    font-size:34px;
  }

  #v-queue .side .panel,
  #v-enrich .side .panel{
    border-radius:17px;
  }
}


/* =========================================================
   WATCH DESK — 10/10 PRODUCT DESIGN PASS
   Dense where speed matters. Spacious where decisions matter.
   ========================================================= */

:root{
  --topbar:60px;
  --rail:228px;
}

.page-kicker{
  display:flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:750;letter-spacing:.115em;
  color:var(--accent);text-transform:uppercase;margin-bottom:5px;
}
.page-kicker > span{
  width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 11%,transparent);
}
h1{font-size:29px;font-weight:680}
.lede{font-size:13.75px;max-width:72ch}
.pagehead{margin-bottom:18px}

.topbar{
  padding:0 16px 0 14px;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
[data-theme="dark"] .topbar{
  background:color-mix(in srgb, #0d1622 88%, transparent);
}
.shell{grid-template-columns:var(--rail) minmax(0,1fr)}
.sidebar{padding:14px 10px 32px;background:color-mix(in srgb,var(--canvas) 94%,var(--surface))}
.nav{min-height:34px;padding:7px 9px}
.nav.on{
  background:var(--accent-soft);
  color:var(--ink);
  box-shadow:inset 3px 0 0 var(--accent);
}
.nav.on .ct{color:var(--accent)}
.navgroup{letter-spacing:.1em;font-size:9.5px;font-weight:750;text-transform:uppercase;margin-top:19px}
.main{padding:30px 36px 120px}

.panel{border-color:color-mix(in srgb,var(--hairline) 82%,var(--ink-4));}
.panel-title{letter-spacing:-.012em}
.panel-cap{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 16px 0}
.panel-cap.compact{padding:0;margin-bottom:11px;align-items:center}
.panel-cap .panel-title{margin:2px 0 0}
.panel-eyebrow{
  display:flex;align-items:center;gap:7px;font-family:var(--num);font-size:9.5px;
  font-weight:700;letter-spacing:.1em;color:var(--ok);text-transform:uppercase;
}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 12%,transparent)}
.session-date{font-size:10.5px;color:var(--ink-3);font-family:var(--num);padding-top:2px}

/* queue command surface */
.command-side{position:sticky;top:calc(var(--topbar) + 18px)}
.session-card{overflow:hidden}
.session-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:13px;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
.session-stat{padding:13px 16px;min-height:72px}
.session-stat:nth-child(odd){border-right:1px solid var(--hairline)}
.session-stat:nth-child(-n+2){border-bottom:1px solid var(--hairline)}
.session-stat span{display:block;font-size:10.5px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.055em}
.session-stat b{display:block;font:650 24px/1.15 var(--num);margin-top:5px;color:var(--ink)}
.session-stat:nth-child(2) b,.session-stat:nth-child(4) b{color:var(--accent)}
.ratio-grid{display:grid;grid-template-columns:1fr 1fr;padding:9px 12px 11px;gap:3px 10px}
.ratio-grid > div{display:flex;align-items:center;justify-content:space-between;padding:5px 4px;gap:8px}
.ratio-grid span{font-size:11px;color:var(--ink-3)}
.ratio-grid b{font:600 11.5px var(--num);color:var(--ink-2)}

.queue-health .health-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.health-grid > div{
  padding:9px 10px;border:1px solid var(--hairline);border-radius:var(--r);
  background:var(--surface-2);
}
.health-grid span{display:block;font-size:10.5px;color:var(--ink-3)}
.health-grid b{display:block;margin-top:3px;font:620 16px var(--num)}

.hotkey-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:10px;row-gap:2px}
.hotkey-grid > div{display:flex;align-items:center;gap:7px;min-height:27px}
.hotkey-grid kbd{
  min-width:34px;text-align:center;font:600 10.5px var(--num);color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--hairline-strong);
  border-bottom-width:2px;border-radius:5px;padding:2px 6px;
}
.hotkey-grid span{font-size:11.5px;color:var(--ink-2)}
.upnext-panel .rowitem{padding:9px 8px;margin:0 -8px}
.upnext-panel .up-main{min-width:0}
.upnext-panel .up-name{display:block;color:var(--ink);font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upnext-panel .up-meta{display:flex;gap:6px;align-items:center;margin-top:2px;font-size:10.5px;color:var(--ink-3)}
.upnext-panel .up-time{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:10.5px;color:var(--ink-3)}
.upnext-panel .up-time b{font-size:11px}

/* call card hierarchy */
.record{
  position:relative;
  border-color:color-mix(in srgb,var(--hairline) 70%,var(--accent-line));
  box-shadow:0 14px 34px rgba(12,20,30,.08),0 0 0 1px rgba(255,255,255,.02);
}
[data-theme="dark"] .record{box-shadow:0 18px 44px rgba(0,0,0,.33),0 0 0 1px rgba(255,255,255,.025)}
.record::before{content:"";display:block;position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--accent),transparent 82%);opacity:.9}
.record-bar{padding:11px 22px}
.record-main{padding:26px 24px 23px}
.record-main h2{font-size:31px;font-weight:690;max-width:28ch}
.subline{font-size:13px}
.priority-brief{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:13px;
  color:var(--ink-2);font-size:11.5px;
}
.priority-brief .why{
  display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:6px;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);font-weight:600;
}
.priority-brief .why::before{content:"↗";font-family:var(--num);font-weight:700}
.window{margin-top:13px;padding:9px 12px}
.contact{
  margin-top:15px;padding:19px 20px 18px 23px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--surface-2) 94%,var(--accent-soft)),var(--surface-2));
  box-shadow:inset 3px 0 0 var(--accent);
}
.contact-head{margin-bottom:10px}
.phone{font-size:30px;font-weight:610}
.email{font-weight:560}
.actions .btn{height:38px}
.actions .btn.pri{min-width:132px;height:42px;font-weight:650}
.actions .btn.pri::before{content:"☎";font-size:14px}
.actions .btn.pri::after{
  content:"SPACE";font:650 9px var(--num);letter-spacing:.06em;
  border:1px solid rgba(255,255,255,.35);border-radius:4px;padding:2px 5px;margin-left:4px;
}
[data-theme="dark"] .actions .btn.pri::after{border-color:rgba(6,32,29,.35)}
.facts{
  display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:8px;
  border-top:0;margin-top:15px;padding-top:0;
}
.fact{
  padding:10px 11px;border:1px solid var(--hairline);border-radius:var(--r);
  background:var(--surface-2)
}
.fact .k{text-transform:uppercase;letter-spacing:.05em;font-size:9.5px;font-weight:700}
.fact .v{font-size:18px}
.chipline{margin-top:13px}
.script{margin-top:14px}
.outcomes{
  grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:14px 20px 17px;
}
.oc{height:39px;font-size:12.5px;padding:0 11px}
.oc:hover{transform:translateY(-1px)}
.oc:active{transform:translateY(0)}

/* prospect book command deck */
.book-pulse,.pipeline-pulse{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px;
}
.pulse-card{
  position:relative;padding:11px 12px;border:1px solid var(--hairline);
  background:var(--surface);border-radius:var(--r-lg);min-width:0;
}
.pulse-card::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--hairline-strong)}
.pulse-card.accent::before{background:var(--accent)}
.pulse-card.ok::before{background:var(--ok)}
.pulse-card.warn::before{background:var(--warn)}
.pulse-card.bad::before{background:var(--bad)}
.pulse-card span{display:block;font-size:10.5px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding-left:5px}
.pulse-card b{display:block;font:650 18px var(--num);margin-top:2px;padding-left:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pulse-card small{display:block;color:var(--ink-3);font-size:10.5px;margin-top:1px;padding-left:5px}

.book-dock{
  position:sticky;top:calc(var(--topbar) + 8px);z-index:20;
  background:color-mix(in srgb,var(--canvas) 91%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:9px;margin:-2px -9px 12px;border:1px solid transparent;border-radius:var(--r-lg);
}
.book-dock:focus-within,.book-dock:hover{
  background:color-mix(in srgb,var(--surface) 95%,transparent);
  border-color:var(--hairline);
  box-shadow:var(--shadow-1)
}
.book-dock .filters{margin-bottom:8px}
.book-dock .toolbar{margin-bottom:0}
.search-wrap{position:relative;min-width:0}
.search-wrap .ctl{padding-left:31px;padding-right:42px}
.search-glyph{position:absolute;left:10px;top:6px;color:var(--ink-3);font-size:17px;z-index:1}
.search-wrap kbd{
  position:absolute;right:8px;top:7px;font:600 9px var(--num);color:var(--ink-3);
  border:1px solid var(--hairline);border-radius:4px;padding:1px 4px;background:var(--surface-2)
}
.tablewrap{
  border-radius:var(--r-xl);
  max-height:calc(100vh - var(--topbar) - 335px);
  min-height:420px;
}
th{height:39px;font-size:10.5px;text-transform:uppercase;letter-spacing:.045em}
td{height:47px}
tbody tr{position:relative}
tbody tr td:first-child{border-left:2px solid transparent}
tbody tr.tier-a td:first-child{border-left-color:var(--ok)}
tbody tr.tier-b td:first-child{border-left-color:var(--accent)}
tbody tr.follow-due td{background:color-mix(in srgb,var(--warn-soft) 27%,var(--surface))}
tbody tr:hover td{background:var(--surface-2)}
.row-sub{font-size:10.5px;color:var(--ink-3);margin-top:2px;display:flex;gap:6px;align-items:center}
.row-sub .microdot{width:5px;height:5px;border-radius:50%;background:var(--ink-4)}
.row-sub .microdot.open{background:var(--ok)}
.rowacts{opacity:.76}
tr:hover .rowacts{opacity:1}
.ia{width:30px;height:30px}
#bulk{
  border:1px solid var(--hairline-strong);
  box-shadow:0 14px 38px rgba(0,0,0,.16);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}

/* pipeline — operating board, not generic kanban */
.pipeline-pulse{grid-template-columns:repeat(5,minmax(0,1fr))}
.board{
  gap:10px;padding-bottom:18px;scroll-snap-type:x proximity;
  min-height:calc(100vh - var(--topbar) - 275px);
}
.col{
  min-width:272px;max-width:330px;flex:1 0 285px;padding:0;
  overflow:hidden;border-radius:var(--r-xl);scroll-snap-align:start;
  background:color-mix(in srgb,var(--surface-2) 88%,var(--canvas));
}
.colhead{
  position:sticky;top:0;z-index:2;padding:12px 12px 10px;
  background:color-mix(in srgb,var(--surface-2) 94%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline);
}
.colhead .stage-title{display:flex;align-items:center;gap:7px;font-size:12.5px}
.colhead .stage-dot{width:7px;height:7px;border-radius:50%;background:var(--ink-4)}
.col[data-stage="Follow-Up"] .stage-dot{background:var(--warn)}
.col[data-stage="Qualified"] .stage-dot,.col[data-stage="Won"] .stage-dot{background:var(--ok)}
.col[data-stage="Proposal"] .stage-dot{background:var(--accent)}
.col[data-stage="Lost"] .stage-dot,.col[data-stage="Not Interested"] .stage-dot{background:var(--bad)}
.colhead .stage-meta{text-align:right}
.colhead .stage-meta b{display:block;font:650 13px var(--num)}
.colhead .stage-meta small{display:block;font-size:9.5px;color:var(--ink-3);margin-top:1px}
.zone{max-height:calc(100vh - var(--topbar) - 350px);min-height:260px;padding:8px;gap:8px}
.kc{
  padding:11px 11px 10px;border-radius:9px;box-shadow:none;cursor:grab;
  border-color:color-mix(in srgb,var(--hairline) 88%,transparent);
}
.kc:hover{box-shadow:var(--shadow-2);border-color:var(--hairline-strong);transform:translateY(-1px)}
.kc .kc-title{font-size:12.5px;line-height:1.3}
.kc .kc-meta{font-size:10.5px;margin-top:3px;color:var(--ink-3)}
.kc .kc-foot{display:flex;justify-content:space-between;gap:8px;margin-top:8px;align-items:center}
.kc .kc-signals{display:flex;gap:4px;flex-wrap:wrap}
.kc .kc-touch{font:550 10px var(--num);color:var(--ink-3);white-space:nowrap}

/* performance — tell a story */
.performance-hero{
  display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:10px;margin-top:14px;
}
.perf-lead{
  padding:15px 16px;border-radius:var(--r-xl);border:1px solid var(--accent-line);
  background:linear-gradient(135deg,var(--accent-soft),color-mix(in srgb,var(--surface) 94%,var(--accent-soft)));
}
.perf-lead .eyebrow{font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.perf-lead strong{display:block;font-size:19px;line-height:1.25;letter-spacing:-.02em;margin-top:5px}
.perf-lead p{margin:5px 0 0;font-size:11.5px;color:var(--ink-2)}
.perf-rate{
  padding:13px 14px;border:1px solid var(--hairline);border-radius:var(--r-xl);background:var(--surface)
}
.perf-rate span{font-size:10.5px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.045em}
.perf-rate b{display:block;font:660 24px var(--num);margin-top:4px}
.perf-rate small{display:block;font-size:10.5px;color:var(--ink-3);margin-top:2px}
.conversion-row,.rankrow{
  display:grid;grid-template-columns:minmax(120px,1fr) 2fr 46px;align-items:center;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--hairline)
}
.conversion-row:last-child,.rankrow:last-child{border-bottom:none}
.conversion-row span,.rankrow span{font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conversion-row .track,.rankrow .track{height:7px;background:var(--surface-3);border-radius:99px;overflow:hidden}
.conversion-row .track i,.rankrow .track i{display:block;height:100%;background:var(--accent);border-radius:99px}
.conversion-row b,.rankrow b{text-align:right;font:600 11.5px var(--num)}
.performance-grid .panel{min-height:235px}

/* stronger microstates */
.toast{min-height:42px}
.empty{padding:54px 22px}
.empty b{font-size:16px}
.empty p{max-width:58ch;margin:6px auto 0}
.btn,.oc,.nav,.ia,.kc,.filter{transition:background .12s var(--ease),border-color .12s var(--ease),color .12s var(--ease),box-shadow .12s var(--ease),transform .08s var(--ease)}
.btn:focus-visible,.oc:focus-visible,.nav:focus-visible,.ia:focus-visible,.filter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* larger detail surface on serious monitors */
@media (min-width:1500px){
  .drawer{width:min(590px,100%)}
  .main{padding-left:40px;padding-right:40px}
  #v-queue .cockpit,#v-enrich .cockpit{grid-template-columns:minmax(0,1fr) 360px}
}
@media (min-width:1900px){
  :root{--rail:236px}
  .main{padding-left:48px;padding-right:48px}
  #v-queue .cockpit,#v-enrich .cockpit{grid-template-columns:minmax(0,1fr) 390px}
  .record-main{padding:30px 30px 26px}
  .record-main h2{font-size:34px}
  .contact{padding:21px 23px 20px 26px}
}

@media (max-width:1200px){
  .command-side{position:static}
  .book-pulse,.pipeline-pulse{grid-template-columns:repeat(3,minmax(0,1fr))}
  .performance-hero{grid-template-columns:repeat(2,minmax(0,1fr))}
  .perf-lead{grid-column:1 / -1}
}
@media (max-width:820px){
  :root{--topbar:54px}
  .main{padding:20px 14px 100px}
  .book-pulse,.pipeline-pulse{grid-template-columns:repeat(2,minmax(0,1fr))}
  .book-dock{position:static;margin:0 0 12px;padding:0;background:transparent;backdrop-filter:none;border:none}
  .search-wrap{grid-column:1 / -1}
  .outcomes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .performance-hero{grid-template-columns:1fr}
  .perf-lead{grid-column:auto}
  .hotkey-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .book-pulse,.pipeline-pulse{grid-template-columns:1fr 1fr}
  .outcomes{grid-template-columns:1fr}
  .session-grid{grid-template-columns:1fr 1fr}
  .phone{font-size:25px}
  .record-main h2{font-size:25px}
}


/* =========================================================
   BLUEWAVE CRM — MULTI-VERTICAL SHELL
   ========================================================= */
.vertical-switcher{
  display:flex;align-items:center;gap:4px;padding:4px;
  border:1px solid var(--hairline);border-radius:10px;
  background:color-mix(in srgb,var(--surface-2) 86%,transparent);
  min-width:0;
}
.vertical-btn{
  display:flex;align-items:center;gap:7px;height:32px;padding:0 9px;
  border-radius:7px;color:var(--ink-3);font-size:11.5px;font-weight:600;
  white-space:nowrap;transition:.12s var(--ease)
}
.vertical-btn:hover{background:var(--surface);color:var(--ink-2)}
.vertical-btn.on{
  background:var(--surface);color:var(--ink);
  box-shadow:var(--shadow-1);border:1px solid var(--hairline)
}
.vertical-btn .vmark{
  display:grid;place-items:center;width:19px;height:19px;border-radius:5px;
  font:700 9px var(--num);background:var(--surface-3);color:var(--ink-2)
}
.vertical-btn.on .vmark{background:var(--accent-soft);color:var(--accent)}
.vertical-btn b{
  min-width:21px;padding:1px 5px;border-radius:99px;
  font:600 9px var(--num);text-align:center;background:var(--surface-3);color:var(--ink-3)
}
.vertical-btn.on b{background:var(--accent-soft);color:var(--accent)}

.vertical-context{
  margin:15px 4px 4px;padding:11px 10px 10px;border:1px solid var(--hairline);
  border-radius:10px;background:linear-gradient(135deg,var(--accent-soft),var(--surface-2));
}
.vertical-context span{
  display:block;color:var(--accent);font-size:9.5px;font-weight:750;
  letter-spacing:.08em;text-transform:uppercase
}
.vertical-context b{display:block;font-size:12.5px;margin-top:3px}
.vertical-context small{display:block;color:var(--ink-3);font-size:10.5px;margin-top:2px}

.vertical-empty{
  padding:32px;min-height:380px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:24px;align-items:center
}
.vertical-empty .big{
  font-size:28px;line-height:1.15;letter-spacing:-.035em;font-weight:700;max-width:18ch
}
.vertical-empty .copy{font-size:14px;line-height:1.65;color:var(--ink-2);max-width:64ch;margin-top:10px}
.vertical-empty .steps{display:grid;gap:8px}
.vertical-empty .step{
  padding:12px;border:1px solid var(--hairline);border-radius:10px;background:var(--surface-2)
}
.vertical-empty .step b{display:block;font-size:12px}
.vertical-empty .step span{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}
.vertical-empty .actions-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}

.product-chip{
  display:inline-flex;align-items:center;gap:7px;padding:5px 8px;
  border:1px solid var(--accent-line);border-radius:7px;background:var(--accent-soft);
  color:var(--accent);font-size:10.5px;font-weight:700;letter-spacing:.03em
}
.product-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

body[data-vertical="retail"] .vmark{border-radius:50%}
body[data-vertical="hospitality"] .vertical-context{
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent-soft) 72%,var(--surface)),var(--surface-2))
}

@media(max-width:1180px){
  .vertical-switcher{margin-left:auto}
  .markets{display:none}
}
@media(max-width:860px){
  .vertical-switcher{position:fixed;left:10px;right:10px;bottom:62px;z-index:80;justify-content:stretch;background:var(--surface);box-shadow:var(--shadow-3)}
  .vertical-btn{flex:1;justify-content:center}
  .vertical-btn b{display:none}
  .vertical-empty{grid-template-columns:1fr;min-height:0;padding:24px 18px}
}
@media(max-width:520px){
  .vertical-btn span:nth-child(2){font-size:10px}
  .vertical-btn{padding:0 5px}
}


/* =========================================================
   BLUEWAVE CRM — VERTICAL WORKSPACE NAVIGATION
   Make vertical switching impossible to miss.
   ========================================================= */

.active-workspace{
  display:flex;align-items:center;gap:10px;min-width:188px;
  padding:5px 10px 5px 7px;border:1px solid var(--hairline);
  border-radius:9px;background:var(--surface-2);flex:none
}
.active-workspace-mark{
  width:30px;height:30px;display:grid;place-items:center;border-radius:8px;
  background:var(--accent-soft);color:var(--accent);font:750 11px var(--num);
  border:1px solid var(--accent-line)
}
.active-workspace > div{display:flex;flex-direction:column;min-width:0;line-height:1.05}
.active-workspace-overline{
  font-size:8.5px;font-weight:750;letter-spacing:.09em;color:var(--ink-3);
  margin-bottom:2px
}
.active-workspace b{font-size:11.5px;font-weight:650;white-space:nowrap}
.active-workspace small{font-size:9.5px;color:var(--ink-3);margin-top:2px}

.vertical-rail{
  margin:0 0 15px;padding:10px;border:1px solid var(--hairline);
  border-radius:13px;background:var(--surface);
  box-shadow:var(--shadow-1)
}
.vertical-rail-title{
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:1px 3px 8px
}
.vertical-rail-title > div{display:flex;flex-direction:column;line-height:1.15}
.vertical-rail-title span{
  font-size:9px;font-weight:800;letter-spacing:.11em;color:var(--ink-3)
}
.vertical-rail-title small{
  font-size:10.5px;color:var(--ink-2);margin-top:3px
}

.vertical-rail-switcher{
  display:flex;flex-direction:column;gap:5px;
  padding:5px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--hairline));border-radius:12px;
  box-shadow:0 0 16px -7px color-mix(in srgb,var(--accent) 34%,transparent)
}
.vertical-rail-btn{
  position:relative;width:100%;min-height:54px;display:grid;
  grid-template-columns:35px minmax(0,1fr) auto;align-items:center;gap:9px;
  padding:7px 8px;border:1px solid transparent;border-radius:10px;
  color:var(--ink-2);text-align:left;transition:.13s var(--ease)
}
.vertical-rail-btn:hover{
  background:var(--surface-2);border-color:var(--hairline)
}
.vertical-rail-btn.on{
  background:linear-gradient(135deg,var(--accent-soft),color-mix(in srgb,var(--surface) 86%,var(--accent-soft)));
  color:var(--ink);border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  /* This tile carries a name, a product line and a count, so a solid fill would bury the
     secondary text. It gets a lit left bar and a soft accent edge instead. */
  box-shadow:
    inset 3px 0 0 var(--accent),
    0 0 14px -6px color-mix(in srgb,var(--accent) 45%,transparent),
    var(--shadow-1)
}
.vertical-rail-btn.on::after{
  content:"";position:absolute;right:8px;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent),
    0 0 8px 0 color-mix(in srgb,var(--accent) 70%,transparent)
}
.vertical-icon{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  font:750 11px var(--num);border:1px solid var(--hairline);
  background:var(--surface-2);color:var(--ink-2)
}
.vertical-icon.guard{color:#08766d;background:#e9f7f4;border-color:#c1e5df}
.vertical-icon.retail{color:#2857a4;background:#edf3ff;border-color:#cfddf6}
.vertical-icon.hospitality{color:#8a5b10;background:#fff5e5;border-color:#f0d9ad}
[data-theme="dark"] .vertical-icon.guard{color:#5eead4;background:#102f2b;border-color:#1f514b}
[data-theme="dark"] .vertical-icon.retail{color:#93b4ff;background:#17233b;border-color:#2a3c61}
[data-theme="dark"] .vertical-icon.hospitality{color:#f4c66b;background:#322610;border-color:#58441c}
.vertical-rail-btn.on .vertical-icon{
  transform:scale(1.03)
}
.vertical-copy{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.vertical-copy b{
  font-size:12.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.vertical-copy small{
  margin-top:3px;font-size:10px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.vertical-count{
  min-width:28px;height:20px;padding:0 6px;display:grid;place-items:center;
  border-radius:99px;background:var(--surface-3);color:var(--ink-3);
  font:650 9px var(--num);margin-right:10px
}
.vertical-rail-btn.on .vertical-count{
  background:color-mix(in srgb,var(--accent) 13%,var(--surface));
  color:var(--accent)
}

.vertical-active-summary{
  margin-top:8px;padding:8px 9px;border-top:1px solid var(--hairline);
  display:grid;gap:1px
}
.vertical-active-summary span{
  font-size:9px;color:var(--accent);font-weight:750;letter-spacing:.08em;text-transform:uppercase
}
.vertical-active-summary b{font-size:11px}
.vertical-active-summary small{font-size:9.5px;color:var(--ink-3)}
.navgroup-main{margin-top:12px!important}

/* The rail's first thing is the door to a new customer. It borrows .btn.pri's gradient and dark-theme
   type, and is sized as a tile rather than a control so it reads before anything else in the column.
   Below 860px the sidebar is gone, so the same tile sits at the top of the Call Queue, the
   first screen after sign-in. The tab bar's Onboarding icon stays, but an unlabelled icon is
   not where a first-time user looks; the tile is. */
.onboard-cta{
  display:flex;align-items:center;gap:10px;width:100%;height:auto;min-height:60px;
  padding:11px 12px;margin:2px 0 14px;border-radius:14px;text-decoration:none;
  justify-content:flex-start;text-align:left;line-height:1.2;
  /* .btn forbids wrapping; the rail is narrower than this label, so the copy wraps here */
  white-space:normal;min-width:0
}
.onboard-cta-plus{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,currentColor 16%,transparent);font:700 21px/1 var(--num)
}
.onboard-cta-copy{flex:1 1 auto;min-width:0}
.onboard-cta-copy b{display:block;font-size:14px;font-weight:750;letter-spacing:-.01em;overflow-wrap:anywhere}
.onboard-cta-copy small{display:block;font-size:9.5px;opacity:.82;margin-top:3px;letter-spacing:.05em;text-transform:uppercase;line-height:1.3}
/* BlueWave Command sits under it: the same tile, quieter, so the new customer still reads first. */
.btn.command-cta{background:var(--surface);border:1px solid var(--accent-line);color:var(--ink);margin-top:-6px}
.btn.command-cta:hover{border-color:var(--accent)}
.command-cta .onboard-cta-plus{color:var(--accent)}
.onboard-cta-mobile{display:none}
@media(max-width:860px){.sidebar .onboard-cta{display:none}.onboard-cta-mobile{display:flex;margin:0 0 16px}}

.mobile-vertical-switcher{display:none}

@media (min-width:1500px){
  :root{--rail:254px}
  .vertical-rail{padding:11px}
  .vertical-rail-btn{min-height:58px}
  .vertical-copy b{font-size:13px}
}

@media(max-width:1180px){
  .active-workspace{min-width:170px}
  .active-workspace-overline{display:none}
}

@media(max-width:860px){
  .active-workspace{margin-left:auto;min-width:0;padding-right:7px}
  .active-workspace > div{display:none}
  .active-workspace-mark{width:31px;height:31px}
  .mobile-vertical-switcher{
    /* Always on screen, pinned under the topbar. Not a dropdown: which edition you are in
       is state you need at a glance, not something worth a tap to find out. */
    display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
    position:sticky;top:58px;z-index:55;margin:9px 12px 0;
    padding:5px;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--hairline));border-radius:12px;
    background:color-mix(in srgb,var(--surface) 96%,transparent);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    /* The strip is the switch, so it keeps a lit edge: enough to say "this whole area
       toggles editions", quiet enough that the live pill stays the loudest thing here. */
    box-shadow:
      0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent),
      0 0 20px -6px color-mix(in srgb,var(--accent) 38%,transparent),
      var(--shadow-3)
  }
  .mobile-vertical-btn{
    height:40px;border:1px solid transparent;border-radius:8px;
    display:flex;align-items:center;justify-content:center;gap:7px;
    color:var(--ink-3);font-size:11px;font-weight:600
  }
  .mobile-vertical-btn span{
    width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
    background:var(--surface-3);font:700 9px var(--num)
  }
  /* The live segment says where you are. The onboarding CTA below it says what to do.
     Both were the same filled accent block, stacked nine pixels apart, so they merged
     into one shape on a phone. The switcher takes the rail's state grammar instead — an
     accent tint, an accent edge, a lit bar along the bottom — which leaves the CTA as the
     only filled accent block on the screen. */
  .mobile-vertical-btn.on{
    background:linear-gradient(135deg,var(--accent-soft),color-mix(in srgb,var(--surface) 86%,var(--accent-soft)));
    color:var(--ink);
    border-color:color-mix(in srgb,var(--accent) 55%,transparent);
    box-shadow:
      inset 0 -2px 0 var(--accent),
      0 0 12px -6px color-mix(in srgb,var(--accent) 45%,transparent)
  }
  /* The letter tile is the one piece that still takes the full accent: loud enough to
     find the live edition at a glance, small enough not to read as a button. */
  .mobile-vertical-btn.on span{
    background:var(--accent);color:#fff;box-shadow:none
  }
  [data-theme="dark"] .mobile-vertical-btn.on span{color:#06201D}
  /* The ring sits outside the button, so the rail needs room for it not to clip. */
  .mobile-vertical-switcher{padding:7px;gap:7px;overflow:visible}
}

@media(max-width:520px){
  .mobile-vertical-btn{font-size:10px}
}


/* =========================================================
   BLUEWAVE CRM — MEMORY / SHIP-READY LAYER
   ========================================================= */
.memory-grid{align-items:stretch}
.memory-panel{position:relative;overflow:hidden}
.memory-panel::after{
  content:"";position:absolute;right:-70px;top:-80px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%);
  pointer-events:none
}
.memory-health{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:12px 0 13px
}
.memory-health > div{
  padding:10px 11px;border:1px solid var(--hairline);border-radius:10px;background:var(--surface-2);min-width:0
}
.memory-health span{
  display:block;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)
}
.memory-health b{
  display:block;margin-top:4px;font:620 12px var(--num);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.memory-actions{display:flex;gap:7px;flex-wrap:wrap}
.memory-note{margin-bottom:0}
.origin-card{
  margin-top:13px;padding:10px 11px;border:1px solid var(--hairline);border-radius:10px;background:var(--surface-2)
}
.origin-card span{display:block;font-size:9.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.origin-card b{display:block;font:600 11.5px var(--num);margin-top:3px;word-break:break-all}
.origin-card small{display:block;color:var(--ink-3);font-size:10.5px;line-height:1.45;margin-top:5px}

.savenote{
  border-top:1px solid rgba(255,255,255,.055);
  margin-top:12px;padding-top:13px!important
}
.savenote.warn::before{background:var(--warn)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 12%,transparent)}
.savenote.bad::before{background:var(--bad)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bad) 12%,transparent)}

@media(max-width:900px){
  .memory-health{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* =========================================================
   BLUEWAVE CRM — USER GATE / ROLE UI
   ========================================================= */
body:not(.auth-ready) > *:not(#userGate){display:none!important}
body.auth-ready #userGate{display:none!important}

.user-gate{
  position:fixed;inset:0;z-index:500;display:grid;place-items:center;
  min-height:100vh;padding:28px;background:#07111F;color:#EDF4FA;overflow:auto;
  font-family:var(--ui)
}
.gate-bg{
  /* The wave (::after) reaches 7% past each side. The gate scrolls (overflow:auto), so without this clip
     the sign-in screen could be dragged 27px sideways on a 390px phone. */
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(800px 500px at 18% 8%,rgba(45,212,191,.15),transparent 65%),
    radial-gradient(700px 450px at 86% 82%,rgba(55,106,179,.12),transparent 65%),
    linear-gradient(145deg,#07111F,#0A1625 58%,#08131F)
}
.gate-shell{position:relative;width:min(760px,100%);z-index:1}
.gate-brand{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.gate-logo{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(145deg,#31D7C3,#0B8F83 65%,#07645E);
  color:#06211E;font:850 11px var(--num);letter-spacing:.04em;
  box-shadow:0 10px 30px rgba(45,212,191,.18),inset 0 1px 0 rgba(255,255,255,.3)
}
.gate-brand > div{display:flex;flex-direction:column;line-height:1.05}
.gate-brand b{font-size:18px;letter-spacing:-.025em}
.gate-brand span{font-size:9.5px;font-weight:800;letter-spacing:.16em;color:#7890A8;margin-top:4px}

.gate-card{
  border:1px solid rgba(255,255,255,.09);border-radius:22px;padding:28px;
  background:linear-gradient(145deg,rgba(18,31,47,.96),rgba(11,24,39,.97));
  box-shadow:0 30px 90px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.04)
}
.gate-eyebrow{font-size:9.5px;font-weight:850;letter-spacing:.13em;color:#55E1CF;margin-bottom:8px}
.gate-card h1{font-size:34px;color:#F4FAFF;margin:0;letter-spacing:-.045em}
.gate-card > p{font-size:13.5px;line-height:1.6;color:#A5B7C9;max-width:62ch;margin:9px 0 20px}

.gate-users{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0 0 18px}
.gate-user{
  width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;
  min-height:64px;padding:9px 10px;border-radius:13px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);color:#DCE8F3;text-align:left;transition:.13s var(--ease)
}
.gate-user:hover{background:rgba(255,255,255,.065);border-color:rgba(255,255,255,.14)}
.gate-user.on{
  background:linear-gradient(135deg,rgba(45,212,191,.16),rgba(45,212,191,.07));
  border-color:rgba(45,212,191,.42);box-shadow:inset 3px 0 0 #2DD4BF
}
.gate-user-avatar{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:#12263B;color:#83E7DA;font:800 12px var(--num);border:1px solid rgba(255,255,255,.08)
}
.gate-user-copy{display:flex;flex-direction:column;min-width:0}
.gate-user-copy b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gate-user-copy small{font-size:10.5px;color:#8197AE;margin-top:3px}
.gate-user-role{
  font:700 9px var(--num);padding:3px 6px;border-radius:99px;color:#8FE7DC;
  background:rgba(45,212,191,.08);border:1px solid rgba(45,212,191,.15);text-transform:uppercase
}

.gate-auth-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:end}
.gate-auth-actions label,.gate-form-grid label{display:block}
.gate-auth-actions label span,.gate-form-grid label span{
  display:block;font-size:10px;color:#8DA2B8;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px
}
.gate-auth-actions input,.gate-form-grid input{
  width:100%;height:44px;padding:0 13px;border-radius:10px;border:1px solid rgba(255,255,255,.13);
  background:#0A1726;color:#F0F7FD;font-size:14px;outline:none
}
.gate-auth-actions input:focus,.gate-form-grid input:focus{border-color:#2DD4BF;box-shadow:0 0 0 4px rgba(45,212,191,.10)}
.gate-primary{
  height:44px;padding:0 18px;border-radius:10px;background:linear-gradient(180deg,#33D9C5,#19B9A7);
  color:#06231F;font-weight:800;border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 22px rgba(45,212,191,.18)
}
.gate-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.gate-primary:disabled{cursor:wait;filter:saturate(.45);opacity:.72;transform:none}
.gate-primary.wide{width:100%;margin-top:16px}
.gate-error{min-height:18px;margin-top:9px;color:#FDA4AF;font-size:11.5px}
.gate-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gate-form-grid.one{grid-template-columns:1fr}
.gate-auth-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}
.gate-link{padding:3px 0;border:0;background:transparent;color:#8FE7DC;font-size:11.5px;font-weight:700}
.gate-link:hover{color:#C7FFF8;text-decoration:underline}
.gate-status{margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(45,212,191,.08);border:1px solid rgba(45,212,191,.16);color:#AEECE4;font-size:11.5px;line-height:1.5}
.gate-account{display:block;margin-top:6px;color:#DCE8F3;font-weight:750;word-break:break-word}
.gate-foot{
  display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:13px;
  color:#637A92;font-size:10.5px;text-align:center
}

.user-pill{
  display:flex;align-items:center;gap:8px;min-height:38px;padding:4px 8px 4px 5px;
  border:1px solid var(--hairline);border-radius:10px;background:var(--surface-2);color:var(--ink);flex:none
}
.user-pill:hover{background:var(--surface-3);border-color:var(--hairline-strong)}
.user-avatar{
  width:29px;height:29px;border-radius:8px;display:grid;place-items:center;background:var(--accent-soft);
  color:var(--accent);font:800 9.5px var(--num);border:1px solid var(--accent-line)
}
.user-pill-copy{display:flex;flex-direction:column;line-height:1.08;min-width:0;text-align:left}
.user-pill-copy b{font-size:10.5px;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-pill-copy small{font-size:8.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.user-switch{color:var(--ink-4);font-size:12px}

.profile-security-modal{width:min(620px,94vw);overflow:hidden;display:flex;flex-direction:column}
.profile-security-modal .modal-head,.profile-security-modal .profile-foot{flex:0 0 auto}
.profile-security-modal .modal-body{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.profile-eyebrow{color:var(--accent);font:750 9px var(--num);letter-spacing:.15em;margin-bottom:3px}
.profile-identity{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:13px;align-items:center;padding:16px;border:1px solid var(--accent-line);border-radius:14px;background:linear-gradient(135deg,var(--accent-soft),transparent 72%)}
.profile-avatar{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line);font:800 15px var(--num)}
.profile-identity h4,.profile-password h4{margin:0;color:var(--ink);font-size:14px;font-weight:650;letter-spacing:-.01em}
.profile-identity p{margin:4px 0 0;color:var(--ink-3);font-size:11.5px;overflow-wrap:anywhere}
.profile-role{align-self:start;border:1px solid var(--accent-line);border-radius:999px;background:var(--accent-soft);color:var(--accent);padding:5px 9px;font:750 9px var(--num);text-transform:uppercase;letter-spacing:.06em}
.profile-facts{display:grid;grid-template-columns:1fr 1fr;margin:14px 0 0;border:1px solid var(--hairline);border-radius:14px;overflow:hidden}
.profile-facts>div{padding:13px 14px;min-width:0;background:var(--surface-2);border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.profile-facts>div:nth-child(even){border-right:0}.profile-facts>div:nth-last-child(-n+2){border-bottom:0}
.profile-facts dt{color:var(--ink-3);font:650 9px var(--num);letter-spacing:.06em;text-transform:uppercase}
.profile-facts dd{margin:5px 0 0;color:var(--ink);font-size:11.5px;line-height:1.45;overflow-wrap:anywhere}
.profile-session-dot{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px var(--good-soft)}
.profile-password{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:14px;padding:15px;border:1px solid var(--hairline);border-radius:14px;background:var(--surface-2)}
.profile-password p{margin:4px 0 0;color:var(--ink-3);font-size:11px;line-height:1.5;max-width:390px}
.profile-password .btn{flex:none}
.profile-status{min-height:18px;margin-top:9px;color:var(--ink-3);font-size:11px}
.profile-status[data-mode="success"]{color:var(--good)}.profile-status[data-mode="error"]{color:var(--bad)}
.profile-foot{justify-content:flex-start}
.profile-confirm-scrim{z-index:100}.profile-confirm-modal{z-index:110;width:min(440px,92vw)}
.profile-confirm-copy{margin:0;color:var(--ink-2);font-size:13px;line-height:1.55}

@media(max-width:560px){
  .profile-security-modal{top:max(12px,env(safe-area-inset-top));bottom:max(12px,env(safe-area-inset-bottom));max-height:none;transform:translate(-50%,0) scale(.985)}
  .profile-security-modal.on{transform:translate(-50%,0) scale(1)}
  .profile-security-modal .profile-foot{z-index:3;justify-content:center;box-shadow:0 -12px 28px rgba(2,12,24,.72)}
  .profile-security-modal .profile-foot .btn{min-width:140px;min-height:44px}.profile-security-modal .profile-foot{padding-left:16px;padding-right:16px}.profile-security-modal .profile-foot .btn{width:100%;gap:9px}.profile-subtitle{margin:4px 0 0;color:var(--ink-2);font-size:12.5px;line-height:1.45}.profile-security-modal .modal-head .icon-close{min-width:36px;min-height:36px;padding:0;display:grid;place-items:center;font-size:15px;line-height:1}
  .profile-identity{grid-template-columns:44px minmax(0,1fr)}
  .profile-avatar{width:44px;height:44px;border-radius:12px}
  .profile-role{grid-column:2;justify-self:start;align-self:auto}
  .profile-facts{grid-template-columns:1fr}
  .profile-facts>div,.profile-facts>div:nth-child(even),.profile-facts>div:nth-last-child(-n+2){border-right:0;border-bottom:1px solid var(--hairline)}
  .profile-facts>div:last-child{border-bottom:0}
  .profile-password{align-items:stretch;flex-direction:column}.profile-password .btn{width:100%}
}

.user-admin-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.user-admin-card{
  display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:9px;align-items:center;
  padding:10px;border:1px solid var(--hairline);border-radius:11px;background:var(--surface-2)
}
.user-admin-card.disabled{opacity:.55}
.user-admin-card .ua{
  width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font:800 10px var(--num);border:1px solid var(--accent-line)
}
.user-admin-card .uc{min-width:0}
.user-admin-card .uc b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-admin-card .uc small{display:block;color:var(--ink-3);font-size:10px;margin-top:2px}
.user-admin-card .uv{display:flex;gap:3px;flex-wrap:wrap;margin-top:5px}
.user-admin-card .uv span{
  padding:1px 5px;border-radius:4px;background:var(--surface);border:1px solid var(--hairline);
  color:var(--ink-3);font:650 8.5px var(--num)
}
.user-vertical-checks{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.user-vertical-checks label{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:7px;
  padding:9px;border:1px solid var(--hairline);border-radius:9px;background:var(--surface-2);cursor:pointer
}
.user-vertical-checks input{grid-row:1/3;margin-top:2px}
.user-vertical-checks span{font-size:11.5px;font-weight:650}
.user-vertical-checks small{font-size:9.5px;color:var(--ink-3);margin-top:2px}

body.read-only .actions button,
body.read-only .outcomes button,
body.read-only #bAdd,
body.read-only #bulk,
body.read-only #dSave,
body.read-only #dDelete,
body.read-only #aAdd,
body.read-only #newModal,
body.read-only #mailModal,
body.read-only #v-enrich .record button{display:none!important}
/* The authenticator step (Super Admins and founders, 18 Oct 2026). Any working state shows an
   animated sweep and names the step; reduced motion keeps the bar and drops the sweep. */
.gate-auth h1{font-size:30px;line-height:1.12}
.gate-auth-panel > p{font-size:13.5px;line-height:1.6;color:#A5B7C9;max-width:62ch;margin:9px 0 16px}
.gate-auth-panel > p b,.gate-auth-steps b{color:#E6F1FA}
.gate-working{margin-top:18px}
.gate-working p{margin:10px 0 0;color:#A5B7C9;font-size:12.5px;line-height:1.5}
.gate-working-bar{position:relative;height:6px;border-radius:99px;background:rgba(45,212,191,.12);overflow:hidden}
.gate-working-bar span{position:absolute;inset:0 auto 0 0;width:38%;border-radius:99px;background:linear-gradient(90deg,transparent,#2DD4BF,transparent);animation:gate-sweep 1.15s ease-in-out infinite}
@keyframes gate-sweep{0%{transform:translateX(-110%)}100%{transform:translateX(290%)}}
.gate-auth-setup{display:grid;grid-template-columns:212px minmax(0,1fr);gap:18px;align-items:center;margin:4px 0 14px}
.gate-auth-qr{position:relative;width:212px;height:212px;border-radius:14px;background:#FFFFFF;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.gate-auth-qr img{width:196px;height:196px;display:block}
.gate-auth-qr .gate-working-bar{display:none;position:absolute;left:24px;right:24px;top:50%;background:rgba(11,24,39,.10)}
.gate-auth-qr.is-working .gate-working-bar{display:block}
.gate-auth-steps{margin:0;padding-left:20px;color:#C9D7E4;font-size:13px;line-height:1.55}
.gate-auth-steps li+li{margin-top:8px}
.gate-auth-manual{margin:0 0 12px;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);color:#A5B7C9;font-size:12px}
.gate-auth-manual summary{cursor:pointer;color:#8FE7DC;font-weight:700;font-size:11.5px}
.gate-auth-manual p{margin:8px 0 0;line-height:1.5}
.gate-auth-key code{display:inline-block;font:700 15px var(--num);letter-spacing:.08em;color:#F0F7FD;word-break:break-all}
.gate-auth-hint{color:#8197AE}
.gate-auth-meta span{color:#8197AE;font-size:11.5px;min-width:0;word-break:break-word}
.gate-auth-meta span b{color:#DCE8F3}
.gate-auth .gate-auth-meta{align-items:flex-start}
.gate-auth-meta .gate-link{white-space:nowrap;flex:none}
.gate-code-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:6px 0 14px;padding:0;list-style:none;counter-reset:code}
.gate-code-list li{counter-increment:code;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#0A1726;border:1px solid rgba(255,255,255,.10)}
.gate-code-list li::before{content:counter(code);font:700 10px var(--num);color:#637A92;min-width:12px}
.gate-code-list code{font:750 15px var(--num);letter-spacing:.08em;color:#F4FAFF}
.gate-auth-actions-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.gate-auth-actions-row .gate-primary{flex:1 1 180px}
.gate-secondary{height:44px;padding:0 16px;border-radius:10px;border:1px solid rgba(45,212,191,.32);background:rgba(45,212,191,.08);color:#AEECE4;font-weight:750}
.gate-secondary:hover{background:rgba(45,212,191,.14)}
.gate-auth-note{min-height:18px;margin-top:9px;color:#AEECE4;font-size:11.5px;line-height:1.5}
.gate-check{display:flex;align-items:center;gap:9px;margin-top:12px;color:#DCE8F3;font-size:13px;cursor:pointer}
.gate-check input{width:18px;height:18px;accent-color:#2DD4BF}
.gate-primary:disabled:not(.is-working){cursor:not-allowed}
.gate-primary.is-working,.gate-secondary.is-working{position:relative;overflow:hidden;cursor:progress;opacity:1;filter:none;background:linear-gradient(180deg,#2A9FD6,#1C7FB8);color:#F4FAFF}
.gate-primary.is-working::after,.gate-secondary.is-working::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:translateX(-100%);animation:gate-button-sweep 1.1s ease-in-out infinite}
@keyframes gate-button-sweep{100%{transform:translateX(100%)}}
/* The founders' front door (18 Oct 2026): the note under the email, and "Send a new code" while it
   counts down the minute between codes. */
.gate-founder-note{margin:2px 0 12px}
#gateEmailCodeView > p{font-size:13.5px;line-height:1.6;color:#A5B7C9;max-width:62ch;margin:9px 0 16px}
#gateEmailCodeView > p b{color:#E6F1FA;word-break:break-word}
.gate-link:disabled{color:#637A92;cursor:default;text-decoration:none}
@media(max-width:860px){
  .gate-auth h1{font-size:25px}
  .gate-auth-setup{grid-template-columns:1fr;justify-items:center}
  .gate-auth-steps{justify-self:stretch}
  .gate-code-list{grid-template-columns:1fr}
}

body.read-only .drawer input,
body.read-only .drawer select,
body.read-only .drawer textarea{pointer-events:none;opacity:.76;background:var(--surface-2)}

.permission-hidden{display:none!important}

@media(max-width:860px){
  .user-pill-copy,.user-switch{display:none}
  .user-pill{padding:4px}
  .gate-card{padding:22px}
  .gate-users,.user-admin-list{grid-template-columns:1fr}
  .gate-form-grid,.gate-auth-actions{grid-template-columns:1fr}
  .user-vertical-checks{grid-template-columns:1fr}
}


/* =========================================================
   BLUEWAVE CRM — RECOVERY CENTER
   ========================================================= */
.recovery-center{
  position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--accent) 26%,var(--hairline))
}
.recovery-center::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)
}
.recovery-summary{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin:13px 0
}
.recovery-summary > div{
  padding:10px 11px;border:1px solid var(--hairline);border-radius:10px;background:var(--surface-2);min-width:0
}
.recovery-summary span{
  display:block;font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)
}
.recovery-summary b{
  display:block;margin-top:3px;font:650 15px var(--num);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.recovery-actions{display:flex;gap:7px;flex-wrap:wrap}
.recovery-log{
  margin-top:12px;padding:10px 11px;border:1px solid var(--hairline);border-radius:10px;
  background:var(--surface-2);max-height:220px;overflow:auto
}
.recovery-entry{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:11.5px}
.recovery-entry:last-child{border-bottom:none}
.recovery-entry span{color:var(--ink-2)}
.recovery-entry b{font:600 10.5px var(--num)}
.recovery-entry.ok b{color:var(--ok)}
.recovery-entry.warn b{color:var(--warn)}
.recovery-entry.bad b{color:var(--bad)}

.legacy-alert{
  margin:9px 2px 0;padding:9px;border:1px solid rgba(251,191,36,.18);border-radius:9px;
  background:rgba(251,191,36,.07);color:#DCE6F2
}
.legacy-alert b{display:block;font-size:10.5px;color:#F4C665}
.legacy-alert span{display:block;font-size:9.5px;color:#8499AF;margin-top:2px}
.legacy-alert button{
  margin-top:6px;color:#8FE7DC;font-size:9.5px;font-weight:700;text-decoration:underline;text-underline-offset:2px
}

@media(max-width:1100px){
  .recovery-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
  .recovery-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}


.seed-pack-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seed-pack{
  display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:11px;border:1px solid var(--hairline);border-radius:11px;background:var(--surface-2)
}
.seed-pack > div{min-width:0}
.seed-pack b{display:block;font-size:12.5px}
.seed-pack small{display:block;margin-top:3px;color:var(--ink-3);font-size:10.5px;line-height:1.4}
.seed-pack a{font-size:10.5px;font-weight:650}
@media(max-width:820px){.seed-pack-grid{grid-template-columns:1fr}}


.dataset-lock{
  margin:9px 0 12px;padding:9px 11px;border:1px solid rgba(45,212,191,.22);
  border-radius:9px;background:rgba(45,212,191,.07)
}
.dataset-lock b{display:block;font-size:9.5px;letter-spacing:.08em;color:var(--accent)}
.dataset-lock span{display:block;margin-top:3px;font-size:10.5px;color:var(--ink-2);line-height:1.45}


/* ============================================================
   OFFICIAL BLUEWAVE BRAND ASSETS
   Uses user-supplied BlueWave Technology marks.
   ============================================================ */

/* Login gate */
.gate-shell{width:min(660px,100%)}
.gate-brand-official{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;margin:0 0 22px;text-align:center
}
.gate-official-logo{
  display:block;width:min(310px,62vw);height:auto;object-fit:contain;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.18))
}
.gate-product-lockup{
  display:flex;align-items:center;justify-content:center;gap:9px;
  color:#D9E7F4
}
.gate-product-lockup b{
  font-size:12px;font-weight:720;letter-spacing:.01em;color:#EAF3FA
}
.gate-product-lockup span{
  padding-left:9px;border-left:1px solid rgba(255,255,255,.14);
  font-size:8.5px;font-weight:780;letter-spacing:.16em;color:#7089A2
}
/* Compact gate identity using the user-supplied official BW favicon */
.gate-brand-official.gate-brand-compact{
  flex-direction:row;align-items:center;justify-content:flex-start;
  gap:11px;margin:0 0 18px;text-align:left
}
.gate-bw-icon{
  width:42px;height:42px;border-radius:11px;overflow:hidden;flex:0 0 42px;
  background:#0B223F;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 28px rgba(45,212,191,.15),0 0 0 1px rgba(45,212,191,.05)
}
.gate-bw-icon img{
  display:block;width:100%;height:100%;object-fit:cover
}
.gate-brand-copy{
  display:flex;flex-direction:column;line-height:1.04;min-width:0
}
.gate-brand-copy b{
  font-size:18px;font-weight:760;letter-spacing:-.025em;color:#EDF4FA
}
.gate-brand-copy span{
  margin-top:4px;font-size:9px;font-weight:800;letter-spacing:.16em;color:#7890A8
}

.gate-card{border-color:rgba(133,167,197,.16)}
.gate-bg::after{
  content:"";position:absolute;left:-7%;right:-7%;bottom:-18%;height:46%;
  opacity:.32;pointer-events:none;
  background:
    radial-gradient(110% 55% at 4% 100%, transparent 48%, rgba(30,121,176,.24) 49%, transparent 50%),
    radial-gradient(115% 58% at 13% 105%, transparent 53%, rgba(45,212,191,.18) 54%, transparent 55%),
    radial-gradient(120% 62% at 22% 110%, transparent 58%, rgba(57,104,173,.16) 59%, transparent 60%);
}

/* Top bar */
.official-wordmark{
  min-width:214px;display:flex;align-items:center;gap:10px;
  height:100%
}
.brand-logo{
  display:block;width:145px;max-height:43px;height:auto;object-fit:contain;object-position:left center;
}
.brand-logo-white{display:none}
[data-theme="dark"] .brand-logo-color{display:none}
[data-theme="dark"] .brand-logo-white{display:block}
.crm-chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:22px;padding:0 7px;border-radius:6px;
  border:1px solid var(--hairline);background:var(--surface-2);
  color:var(--ink-2);font:750 9px var(--num);letter-spacing:.08em
}
[data-theme="dark"] .crm-chip{
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.055);color:#AFC3D5
}

/* Sidebar brand stamp */
.rail-brand{
  margin:18px 4px 0;padding:14px 9px 4px;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;align-items:flex-start;gap:8px
}
.rail-brand img{
  width:124px;height:auto;display:block;opacity:.92;object-fit:contain
}
.rail-brand > div{display:flex;align-items:center;gap:8px}
.rail-brand b{
  font-size:10px;font-weight:680;color:var(--ink);letter-spacing:-.01em
}
.rail-brand span{
  font-size:7.5px;font-weight:780;letter-spacing:.14em;color:var(--ink-2)
}

/* Small-screen preservation */
@media(max-width:980px){
  .official-wordmark{min-width:160px}
  .brand-logo{width:120px}
  .crm-chip{display:none}
}
@media(max-width:760px){
  .gate-official-logo{width:min(250px,72vw)}
}

/* =========================================================
   MOBILE OPERATIONS MODE
   Complete daily CRM workflow without desktop controls
   covering the active record.
   ========================================================= */
.mobile-menu-scrim,.mobile-more-menu{display:none}

@media(max-width:860px){
  html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}
  .shell{grid-template-columns:minmax(0,1fr);width:100%}
  .topbar{gap:8px;padding:0 10px;height:58px;--topbar:58px}
  .official-wordmark{min-width:0;flex:1}
  .brand-logo{width:min(118px,34vw);max-height:36px}
  .active-workspace{margin-left:0;flex:none}
  .topmetrics{margin-left:0}
  .topmetrics .iconbtn{margin-left:0}
  .user-pill{flex:none}

  .main{width:100%;max-width:100%;padding:16px 12px calc(86px + env(safe-area-inset-bottom))}
  .view,#postSlot,.cockpit,.record,.record-main,.contact{width:100%;max-width:100%;min-width:0}
  .pagehead{gap:12px;margin-bottom:12px}
  .pagehead > div:first-child{width:100%}
  .pagehead > div:last-child{width:100%;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .pagehead > div:last-child .ctl{width:100%!important;min-width:0}
  .lede{margin-top:5px;font-size:12.5px;line-height:1.4}

  .statline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:4px;margin-bottom:12px}
  .statline .sep{display:none}
  .statline .st{min-width:0;padding:8px 7px;flex-direction:column;align-items:flex-start;gap:1px;border-right:1px solid var(--hairline)}
  .statline .st:last-of-type{border-right:0}
  .statline .st b{font-size:17px;line-height:1}
  .statline .st{font-size:10.5px;line-height:1.25}

  .cockpit{display:block}
  .record{border-radius:17px;overflow:hidden}
  .record-bar{align-items:flex-start;padding:10px 14px;flex-direction:column;gap:7px}
  .record-bar > span:last-child{width:100%}
  .record-main{padding:18px 14px 16px}
  .record-main h2{font-size:26px;max-width:none;overflow-wrap:anywhere}
  .subline{font-size:12px;line-height:1.45}
  .priority-brief{margin-top:10px;font-size:10.5px;line-height:1.4}
  .window{width:100%;border-radius:10px;align-items:flex-start;gap:8px}
  .window .clock{margin-left:auto;text-align:right;white-space:nowrap}
  .contact{padding:15px 13px 14px 16px}
  .contact-row{display:block}
  .phone{font-size:25px}
  .email{font-size:12px}
  .contact .actions{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
  .contact .actions .btn{width:100%;min-width:0;height:44px;padding:0 8px}
  .contact .actions .btn.pri{min-width:0}
  .actions .btn.pri::after{display:none}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .fact{min-width:0}
  .chipline{gap:5px}
  .chipline .tag{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .notes{font-size:12px}
  .script summary{min-height:44px}
  .outcomes{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:13px 14px 16px}
  .oc{height:46px;padding:0 11px;font-size:12.5px}
  .oc kbd{display:none}
  .side{margin-top:14px;display:block}
  .side > * + *{margin-top:10px}
  .hotkey-panel{display:none}

  .tabbar{left:10px;right:10px;bottom:10px;z-index:74;grid-template-columns:repeat(5,minmax(0,1fr));padding:5px 4px calc(5px + env(safe-area-inset-bottom))}
  .tabbar button,.tabbar .tab-link{min-width:0;min-height:46px;font-size:10px;justify-content:center;line-height:1.15;color:var(--ink-2);font-weight:600;text-decoration:none}
  .tabbar button .ic,.tabbar .tab-link .ic{width:22px;height:22px;display:grid;place-items:center;flex:none}
  .tabbar button .ic svg,.tabbar .tab-link .ic svg{width:21px;height:21px}

  .bulkbar{
    left:10px;right:10px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:88;
    max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;
    transform:translateY(18px);padding:11px;border-radius:14px
  }
  .bulkbar.on{transform:none}
  .bulkbar #bulkN{align-self:center}
  .bulkbar #bClear{grid-column:2;grid-row:1}
  .bulkbar #bStage,.bulkbar #bBulkDispo{width:100%!important;min-width:0}
  .bulkbar .btn{min-width:104px}

  .mobile-menu-scrim{
    position:fixed;inset:0;z-index:82;background:rgba(4,12,22,.48);backdrop-filter:blur(2px)
  }
  .mobile-menu-scrim.open{display:block}
  .mobile-more-menu{
    position:fixed;left:10px;right:10px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:86;
    padding:9px;border:1px solid var(--hairline-strong);border-radius:16px;
    background:color-mix(in srgb,var(--surface) 97%,transparent);box-shadow:var(--shadow-3);
    grid-template-columns:repeat(2,minmax(0,1fr));gap:7px
  }
  .mobile-more-menu.open{display:grid}
  .mobile-more-menu .mobile-menu-title{grid-column:1/-1;padding:4px 5px 7px;font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
  .mobile-more-menu button,.mobile-more-menu a{
    min-height:48px;display:flex;align-items:center;justify-content:center;padding:8px;
    border:1px solid var(--hairline);border-radius:10px;background:var(--surface-2);
    color:var(--ink);font-size:12px;font-weight:650;text-align:center;text-decoration:none
  }
  .mobile-more-menu a.on,.mobile-more-menu button.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
}

@media(max-width:420px){
  .topbar{padding-left:8px;padding-right:8px;gap:6px}
  .brand-logo{width:108px}
  .active-workspace-mark,.user-avatar{width:30px;height:30px}
  .main{padding-left:10px;padding-right:10px}
  .page-kicker{font-size:9px}
  h1{font-size:25px}
  .lede{display:none}
  .record-main h2{font-size:24px}
  .contact .actions{grid-template-columns:1fr}
  .mobile-vertical-switcher{margin-left:8px;margin-right:8px}
}

/* Password fields carry a show/hide eye. The button sits inside the field's right edge; the
   input keeps its own width and gains room so typed text never runs under the icon. */
.gate-password{position:relative}
.gate-password input{padding-right:48px}
.gate-eye{position:absolute;right:4px;top:2px;width:40px;height:40px;padding:0;border:0;border-radius:8px;background:transparent;color:#8DA2B8;cursor:pointer;display:grid;place-items:center}
.gate-eye:hover{color:#2DD4BF;background:rgba(45,212,191,.08)}
.gate-eye:focus-visible{outline:2px solid #2DD4BF;outline-offset:1px}
.gate-eye svg{width:20px;height:20px}
.gate-eye .eye-off,.gate-eye[aria-pressed="true"] .eye-on{display:none}
.gate-eye[aria-pressed="true"] .eye-off{display:block}

/* CaseTrace e-sign signing record in the case dialog. */
.esign-record .esign-grid{margin-top:12px}.esign-record .esign-timeline{margin-top:12px}.esign-record .assignment-copy code{font-size:11px;word-break:break-all}
.user-avatar,.profile-avatar{overflow:hidden;padding:0}.user-avatar img,.profile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

.connected-order{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:10px}.connected-order label{display:grid;gap:4px;font-size:11px;color:var(--muted,#7890a2)}.connected-order input{width:110px}.connected-order .form-error,.connected-order .connected-order-result{flex-basis:100%;margin:0;font-size:12px}.connected-order-result{color:var(--ok,#1f9d7a)}

/* Books: the QuickBooks card at the top of the preflight board. Every press answers on the card. */
.books-card{margin:0 0 14px;padding:14px 16px;border:1px solid var(--line,#1f3a4c);border-radius:14px;background:var(--panel-2,#0b1f2c);display:grid;gap:8px}
.books-card:empty{display:none}
.books-card .books-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.books-card .books-head b{font-size:14px}
.books-card .books-state{font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid currentColor}
.books-card .books-state.is-ok{color:var(--ok,#1f9d7a)}.books-card .books-state.is-warn{color:var(--warn,#d9a441)}.books-card .books-state.is-bad{color:var(--bad,#e5484d)}
.books-card p{margin:0;font-size:13px;color:var(--muted,#a9bcc8)}
.books-card .books-actions{display:flex;flex-wrap:wrap;gap:8px}
.books-card .books-actions button{min-height:40px}
.books-card .books-failed{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.books-card .books-failed li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12px}
.books-card .books-failed code{font-size:11px}
.books-card .books-result{font-size:12px;color:var(--ok,#1f9d7a)}
.books-card .books-result.is-error{color:var(--bad,#e5484d)}

/* Virtual patent marking (35 U.S.C. 287(a)). One muted line and one link; the list of patents lives at the URL. */
.patent-marking{margin:14px 0 0;padding:0 16px 16px;text-align:center;font-size:11px;line-height:1.4;letter-spacing:.04em;color:var(--ink-3,#5f7581)}
.patent-marking a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.gate-foot .gate-patent{margin:0;padding:0;font-size:inherit;letter-spacing:inherit;color:inherit}

/* =========================================================
   PHONE WIDTH: NOTHING SLIDES SIDEWAYS, NOTHING IS CUT OFF
   DJ, 18 Oct 2026: no screen may make a person slide it left to right, and nothing is hidden to make it fit.
   It sits last so it wins over every earlier width rule. scripts/verify-phone-width.mjs measures every page
   and section at 390px and fails on a document wider than the screen, a sideways scroller, or cut-off text.
   ========================================================= */
@media (max-width:920px){
  /* 1fr is minmax(auto,1fr): one long unbroken row widened the Follow-ups page to 707px on a 390px phone. */
  .grid-3,.grid-2{grid-template-columns:minmax(0,1fr)}
  /* Rows wrap instead of ending in an ellipsis: a company name, a state line, a storage mode reads in full. */
  .rowitem span,.upnext-panel .up-name,.conversion-row span,.rankrow span,.bar span,.pulse-card b,
  .memory-health b,.recovery-summary b,.user-admin-card .uc b,.chipline .tag{
    white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere
  }
  /* The time beside an Up next name keeps its own width, so the name is what wraps. */
  .upnext-panel .up-time{flex:none}
  /* The label takes its own line; the bar and the percentage sit under it. */
  .conversion-row,.rankrow{grid-template-columns:minmax(0,1fr) 46px;row-gap:5px}
  .conversion-row span,.rankrow span{grid-column:1/-1}
  /* The pipeline stacks its stages down the page (two across on a tablet) instead of a board that scrolls
     sideways. Each stage keeps its own capped list, and an empty one is only as tall as a drop target. */
  .board{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));overflow-x:visible;scroll-snap-type:none;min-height:0}
  .col{min-width:0;max-width:none;flex:none}
  .zone{min-height:44px}
}
/* The two-step sign-in's foot row wraps when its links do not fit side by side: on a 360px phone "Lost your phone?
   Use a recovery code" and Sign out ran 13px past the screen. The signed-in email shares the row with Sign out
   until it needs the room, then Sign out takes the next line. */
.gate-auth-meta{flex-wrap:wrap;row-gap:4px}
.gate-auth-meta span{flex:1 1 180px}