/* ==========================================================================
   Sapa's look, loaded last on every page. It follows DESIGN.md:
   - two canvases: midnight violet chrome and bands, white for the work; a band
     is one or the other, never a blend;
   - one near-black primary button on white, one white button on dark;
   - Rubik for UI, Space Grotesk for display, caps with 0.2px tracking on
     buttons and eyebrows;
   - lime is a rare highlight (`mark.lime`, the footer squiggle), one per view,
     never a button, never body text. Pink is for the sticker, the mark and
     charts. Status colours stay inside the violet, pink and lime families.
   ========================================================================== */
:root {
  --dk-ok: var(--ok); --dk-ok-bg: var(--ok-bg);
  --dk-warn: var(--warn); --dk-warn-bg: var(--warn-bg);
  --dk-danger: var(--danger); --dk-danger-bg: var(--danger-bg);
  --dk-info: var(--info); --dk-info-bg: var(--info-bg);
  --dk-teal: var(--ok); --dk-teal-bg: var(--ok-bg);
  --dk-neutral: var(--ink-2); --dk-neutral-bg: var(--muted-fill);
  --dk-muted: var(--ink-3); --dk-muted-bg: var(--well);
  --dk-grad: var(--primary);
  --dk-r: 12px;
  --dk-ink: var(--ink); --dk-ink-2: var(--ink-2); --dk-ink-3: var(--ink-3);
  --dk-display: var(--font-display); --dk-mono: var(--font-mono);
  --stars: url("../assets/stars.svg");
}
body { background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; }
h1, h2, h3, h4 { font-family: var(--font-body); font-weight: 500; letter-spacing: 0; color: inherit; }
::selection { background: rgba(66, 32, 130, 0.2); }
a { color: var(--accent-violet-deep); }
code, kbd, .mono { font-family: var(--font-mono); }

/* the highlight: a keyword marked like a line of console output */
mark.lime { padding: 0 0.22em; border-radius: var(--r-xs); background: var(--accent-lime); color: var(--ink-deep); white-space: nowrap; }

/* ---- the logo: mark, lowercase wordmark, descriptor under it */
.sapa-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.sapa-logo img { display: block; flex: 0 0 auto; }
.sapa-text { display: grid; line-height: 1; }
.sapa-text .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 25px; letter-spacing: 0; }
.sapa-text small { margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--ink-3); }

/* ---- sign-in: the dark band tells the story, the white panel does the work */
.gate { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(400px, 0.85fr); align-items: stretch; justify-items: stretch; min-height: 100dvh; padding: 0; gap: 0; background: var(--surface); color: var(--ink); }
.gate::before, .gate::after { display: none; }
.gate-art { order: -1; position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 32px; min-width: 0; padding: 64px clamp(32px, 6vw, 96px); overflow: hidden; background: var(--canvas-dark) var(--stars); color: #fff; }
.gate-title { margin: 0; max-width: 11ch; font-family: var(--font-display); font-size: clamp(44px, 5.4vw, 72px); font-weight: 700; line-height: 1.12; color: #fff; }
.talk { display: grid; gap: 10px; width: min(100%, 420px); }
.bub { margin: 0; padding: 10px 16px; max-width: 80%; border-radius: var(--r-lg); font-size: 16px; font-weight: 500; line-height: 1.4; }
.bub.them { justify-self: start; background: var(--hairline-violet); color: #fff; border-bottom-left-radius: var(--r-xs); }
.bub.us { justify-self: end; background: #fff; color: var(--ink-deep); border-bottom-right-radius: var(--r-xs); }
.gate-sticker { position: absolute; right: clamp(16px, 5vw, 72px); bottom: 56px; width: clamp(120px, 13vw, 180px); height: auto; transform: rotate(6deg); }
.gate-ft { position: absolute; left: clamp(32px, 6vw, 96px); bottom: 32px; width: auto; height: 24px; opacity: 0.9; }
.gate-card { align-self: center; justify-self: center; width: min(100%, 420px); max-width: none; padding: 40px 32px; background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--ink); }
.gate-card .sapa-logo { margin-bottom: 24px; }
.dk-gate-card:not(.dk-gate-plain) { background: var(--surface); border: 0; border-radius: var(--r-lg); box-shadow: none; color: var(--ink); }
.gate h2 { font-size: 24px; margin: 22px 0 18px; }
.gate label, .dk-gate label { color: var(--ink-deep); font-size: 14px; font-weight: 500; }
.gate-foot { color: var(--ink-3); font-size: 14px; line-height: 1.43; }
.gate .error, .dk-gate-err { color: var(--danger); }
.gate input, .dk-gate input[type="email"], .dk-gate input[type="password"] { background: #fff; border: 1px solid var(--hairline-cool); border-radius: var(--r-sm); color: var(--ink-deep); min-height: 44px; padding: 8px 12px; font-size: 16px; font-weight: 500; }
.gate input::placeholder, .dk-gate input::placeholder { color: var(--ink-3); font-weight: 400; }
.gate input:focus, .dk-gate input:focus { background: #fff; border-color: var(--hairline-cool); box-shadow: rgba(0, 0, 0, 0.15) 0 2px 10px inset, var(--ring); }
.gate-modes { background: none; border: 0; border-bottom: 1px solid var(--hairline-cloud); border-radius: 0; padding: 0; gap: 0; }
.gate .gate-modes button { min-height: 44px; border-radius: 0; background: none; color: var(--ink-3); box-shadow: none; font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.gate .gate-modes button:hover { color: var(--ink); background: none; }
.gate .gate-modes button[aria-selected="true"] { background: none; color: var(--ink); box-shadow: inset 0 -3px 0 var(--primary); }
.gate-form button[type="submit"], .dk-gate .dk-primary { min-height: 44px; background: var(--primary); color: #fff; box-shadow: none; border-radius: var(--r-md); font-size: 14px; font-weight: 700; letter-spacing: 0.2px; text-transform: uppercase; }
.gate-form button[type="submit"]:hover, .dk-gate .dk-primary:hover { background: var(--ink-deep); box-shadow: none; transform: none; }
.gate-form button[type="submit"]:active, .dk-gate .dk-primary:active { background: var(--press); color: var(--ink-press); transform: none; }
.gate-remember, .gate .gate-remember { color: var(--ink-2); font-weight: 400; }
.gate-remember input, .gate .gate-remember input { accent-color: var(--accent-violet-deep); min-height: 0; }
.dk-gate { background: var(--canvas-dark) var(--stars); color: var(--ink); }
.dk-gate-kicker, .dk-gate p { color: var(--ink-2); }
.dk-gate .dk-gate-plain p { color: #fff; }
@media (max-width: 900px) {
  .gate { grid-template-columns: 1fr; align-content: start; }
  .gate-art { padding: 32px 16px; gap: 0; }
  .gate-title { font-size: 40px; max-width: none; }
  .talk, .gate-ft, .gate-sticker { display: none; }
  .gate-card { width: 100%; max-width: 460px; padding: 28px 16px 40px; }
}

/* ---- the rail: night, with one lifted row */
.sidebar { background: var(--surface-night); box-shadow: none; color: #fff; border-right: 1px solid var(--hairline-violet); padding-top: 20px; }
.sidebar::before, .sidebar::after { display: none; }
.sidebar .sapa-logo, .dk-brand .sapa-logo, .sidebar .sapa-text .wordmark, .dk-brand .sapa-text .wordmark { color: #fff; }
.sidebar .sapa-text small, .dk-brand .sapa-text small { color: var(--on-dark-muted); }
.sidebar .brand { border-bottom: 0; margin-bottom: 8px; padding: 4px 8px 12px; }
.sidebar .nav-item { border-radius: var(--r-md); color: var(--on-dark-muted); }
.sidebar .nav-item:hover { background: var(--hairline-violet); color: #fff; }
.sidebar .nav-item:active { transform: none; }
.sidebar .nav-item.active { background: var(--hairline-violet); color: #fff; box-shadow: none; font-weight: 500; }
.sidebar .nav-item .count { background: var(--canvas-dark); color: #fff; border-radius: var(--r-xs); }
.sidebar .nav-item.active .count { background: var(--surface-night); color: #fff; }
.sidebar .nav-item .nav-sub, .sidebar .nav-item.active .nav-sub { color: var(--on-dark-muted); }
.sidebar .nav-item.is-done:not(.active) { color: var(--on-dark-muted); }
.sidebar .nav-section { color: var(--on-dark-muted); font-size: 12px; font-weight: 500; letter-spacing: 0.2px; }
.sidebar .nav-section .count, .sidebar .nav-section span, .sidebar .nav-section b { color: var(--on-dark-muted); background: none; }
.sidebar .nav-item .nav-status, .sidebar .nav-item .nav-status.active { background: var(--on-dark-muted); box-shadow: none; }
.sidebar .nav-item.active .nav-status { background: #fff; }
.sidebar .nav-group .nav-more { color: var(--on-dark-muted); }
.nav-search svg { color: var(--on-dark-muted); }
.nav-search input { background: var(--canvas-dark); border: 1px solid var(--hairline-violet); color: #fff; border-radius: var(--r-sm); }
.nav-search input::placeholder { color: var(--on-dark-muted); }
.nav-search input:focus { background: var(--canvas-dark); border-color: var(--hairline-violet); box-shadow: 0 0 0 2px var(--focus-dark); }
.sidebar #add-project-btn { min-height: 44px; background: #fff; color: var(--ink-deep); border: 0; border-radius: var(--r-md); font-size: 14px; font-weight: 700; letter-spacing: 0.2px; text-transform: uppercase; box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px 0; }
.sidebar #add-project-btn:hover { background: #fff; color: var(--ink-deep); transform: none; }
.sidebar #add-project-btn:active { background: var(--press); color: var(--ink-press); }
.sidebar #show-archived-btn { background: none; border: 0; color: var(--on-dark-muted); text-decoration: underline; text-underline-offset: 3px; }
.sidebar #show-archived-btn:hover { color: #fff; }
.nav-team-btn { border-radius: var(--r-md) !important; color: var(--on-dark-muted) !important; background: none !important; border-color: transparent !important; }
.nav-team-btn:hover, .nav-team-btn.active { background: var(--hairline-violet) !important; color: #fff !important; }
.whoami, .whoami * { color: var(--on-dark-muted); border-color: var(--hairline-violet); }
.whoami { background: none; }
.whoami b, .whoami strong { color: #fff; }

/* ---- the top bar: dark, it flows into the page's band */
.topbar { background: var(--canvas-dark); border-bottom: 0; color: #fff; box-shadow: none; }
.topbar h1 { font-family: var(--font-body); font-weight: 500; font-size: 24px; line-height: 1.25; color: #fff; }
.topbar .sub { color: var(--on-dark-muted); font-size: 14px; }
.topbar .sub::before { animation: none; background: var(--on-dark-muted); box-shadow: none; }
.topbar .saving-pill { background: var(--surface-night); color: #fff; border-radius: var(--r-xs); }

/* ---- bands: the same dark canvas under the top bar, edge to edge */
.content { max-width: none; padding: 0 24px 40px; }
.content > .view { max-width: 1296px; margin-inline: auto; }
.ov-band, .cp-head { position: relative; background: var(--canvas-dark); color: #fff; }
.ov-title { margin: 0; font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 32px); font-weight: 700; line-height: 1.2; color: #fff; }
.ov-band .ov-line { margin: 0; color: var(--on-dark-muted); font-size: 15px; }
.ov-band .ov-line b { color: #fff; font-size: 16px; font-weight: 600; }
#ov-att .att-h { display: none; }
.cp-head { gap: 8px; margin-bottom: 0; }
.cp-head .chip { min-height: 30px; padding: 4px 10px; background: var(--on-dark-faint); border: 0; border-radius: var(--r-xs); color: #fff; font-size: 14px; font-weight: 400; }
.cp-head .chip b, .cp-head .chip strong { color: #fff; }
.cp-head .chip::before, .cp-head .chip i { background: var(--on-dark-muted) !important; color: var(--on-dark-muted); }
@media (max-width: 767px) {
  .sidebar, .sidebar nav { scrollbar-width: none; }
  .sidebar::-webkit-scrollbar, .sidebar nav::-webkit-scrollbar { display: none; }
  .topbar .sub { display: block; }
  .topbar .sub::before { display: none; }
  .content { padding: 0 16px 32px; }
}

/* ---- buttons: caps with a little tracking; one filled action, the rest step back */
.btn, .btn-outline, .dk-primary, .dk-ghost, .dk-chipbtn, .pp-cb-save { border-radius: var(--r-md); font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: 0.2px; text-transform: uppercase; box-shadow: none; }
.btn { min-height: 40px; padding: 8px 14px; background: #fff; color: var(--ink-deep); border: 1px solid var(--hairline-cool); }
.btn:hover { background: var(--well); border-color: var(--hairline-cool); color: var(--ink-deep); box-shadow: none; transform: none; }
.btn:active { background: var(--press); color: var(--ink-press); transform: none; }
.btn-brand, .btn.btn-brand { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-brand:hover, .btn.btn-brand:hover { background: var(--ink-deep); border-color: var(--ink-deep); color: #fff; }
.btn-brand:active, .btn.btn-brand:active { background: var(--press); border-color: var(--press); color: var(--ink-press); }
.btn:disabled, .btn[disabled], .dk-primary:disabled { background: var(--hairline-cloud); border-color: var(--hairline-cloud); color: var(--ink-3); opacity: 1; }
.btn-outline { min-height: 40px; background: #fff; color: var(--danger); border: 1px solid var(--danger); }
.btn-outline:hover { background: var(--danger-bg); color: var(--danger); }
.btn-brand::after, .btn-scan::after, .ci-btn::after { display: none; }
.topbar .btn { background: var(--on-dark-faint); border-color: transparent; color: #fff; }
.topbar .btn:hover { background: rgba(255, 255, 255, 0.28); color: #fff; }
.topbar .btn:active { background: var(--press); color: var(--ink-press); }
.icon-toggle, .icon-btn { border-radius: var(--r-md); background: #fff; color: var(--ink-deep); border: 1px solid var(--hairline-cool); }
.topbar .icon-toggle, .topbar .icon-btn { background: var(--on-dark-faint); border-color: transparent; color: #fff; }
.link-btn { color: var(--accent-violet-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---- surfaces: white cards with a cloud hairline */
.panel, .stat-card, .cp-card, .tgt-card, .chart-card, .setup-card, .event-card, .ed-section, .ci-card, .dk-person, .dk-leads-sec, .att, .agent-card { background: var(--surface); border: 1px solid var(--hairline-cloud); border-radius: var(--r-lg); box-shadow: none; }
.kpi, .sla-item, .funnel .fn, .rk-stat { background: var(--well); border: 0; border-radius: var(--r-md); }
.stat-card { transform: none; }
.stat-card::before, .tgt-card::before { display: none; }
.stat-card .stat-icon { transform: none; box-shadow: none; background: var(--warm-tint); color: var(--accent-violet-deep); border-radius: var(--r-md); }
.cp-card:hover { transform: none; border-color: var(--hairline-cool); box-shadow: inset 0 0 0 1px var(--primary); }
.cp-card.is-done { background: var(--well); }
.funnel { gap: 6px; }
.tgt-bar { height: 6px; border-radius: var(--r-xs); background: var(--hairline-cloud); }
.tgt-bar i { border-radius: var(--r-xs); background: var(--accent-violet-deep); }
.tgt-bar i.behind { background: var(--accent-pink); }
.tgt-bar i.done { background: var(--ok); }
.tgt-card.behind, .tgt-card.done { box-shadow: none; }
.hero-num b, .tc-num, .fn b, .kpi b, .stat-value, .tgt-num, .dk-stat b, .ls b, .rk-stat b, .att-count { font-family: var(--font-body) !important; font-weight: 500 !important; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.pace { border-radius: var(--r-xs); }
.att { padding: 8px 20px 12px; }
.att-tag { border-radius: var(--r-xs); font-size: 12px; font-weight: 600; }
.att-row { border-radius: var(--r-md); }
.att-h { font-size: 20px; font-weight: 600; padding-top: 8px; }
.att-n { border-radius: var(--r-xs); background: var(--surface-night); color: #fff; }
.att-label { font-size: 15px; }
.rk-h h2, .panel > h2, .panel h2 { font-size: 20px; font-weight: 600; }

/* the old Overview scoreboard, kept for any screen still using it */
.ov-hero { display: block; padding: 24px; background: var(--surface); border: 1px solid var(--hairline-cloud); box-shadow: none; color: var(--ink); overflow: visible; border-radius: var(--r-lg); }
.ov-hero::before, .ov-hero::after { display: none; }
.ov-hero h2 { color: var(--ink); font-size: 24px; margin: 2px 0 6px; }
.ov-hero p { color: var(--ink-2); max-width: 62ch; }
.ov-hero .kicker { color: var(--ink-3); background: none; -webkit-text-fill-color: currentColor; letter-spacing: 0.2px; text-transform: uppercase; font-weight: 500; }
.ov-hero .hero-nums { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); margin-top: 16px; }
.ov-hero .hero-num { border: 0; border-radius: var(--r-md); background: var(--well); padding: 12px 14px; }
.ov-hero .hero-num b { color: var(--ink); font-size: 24px; }
.ov-hero .hero-num span { color: var(--ink-3); }

/* ---- tabs are underlined */
.view-tabs, .cp-tabs { width: 100%; padding: 0; gap: 2px; background: none; border: 0; border-bottom: 1px solid var(--hairline-cloud); border-radius: 0; box-shadow: none; }
.view-tabs button { border-radius: 0; min-height: 48px; padding: 8px 14px; font-size: 15px; font-weight: 500; color: var(--ink-3); background: none; }
.view-tabs button::before { display: none; }
.view-tabs button:hover { background: none; color: var(--ink); }
.view-tabs button:active { transform: none; }
.view-tabs button[aria-selected="true"] { background: none; color: var(--ink); font-weight: 500; box-shadow: inset 0 -3px 0 var(--primary); }

/* ---- tables and forms */
.table-scroll { background: var(--surface); border: 1px solid var(--hairline-cloud); border-radius: var(--r-lg); }
table { font-size: 14px; }
thead th { background: #fff; color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: 0.2px; text-transform: uppercase; border-bottom: 1px solid var(--hairline-cool); }
tbody tr:hover { background: var(--sunken); }
tbody tr.is-selected { background: var(--warm-tint); }
input, select, textarea { border-radius: var(--r-sm); font-family: var(--font-body); }
.fg input, .fg select, .fg textarea, .modal-form input, .modal-form select, .modal-form textarea, .tool-select { border: 1px solid var(--hairline-cool); background: #fff; color: var(--ink-deep); border-radius: var(--r-sm); }
.fg input:focus, .fg select:focus, .fg textarea:focus, .modal-form input:focus, .modal-form select:focus, .modal-form textarea:focus { border-color: var(--hairline-cool); box-shadow: rgba(0, 0, 0, 0.15) 0 2px 10px inset; }
:is(.modal-form, .fg, .modal-panel, .drawer) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { border-radius: var(--r-sm) !important; }
.tool-select span, .tool-check { color: var(--ink-3); }
.tool-check { border: 1px solid var(--hairline-cool); border-radius: var(--r-sm); background: #fff; }
.tool-check b { background: var(--muted-fill); color: var(--ink-2); border-radius: var(--r-xs); }
.seg { background: #fff; border: 1px solid var(--hairline-cool); border-radius: var(--r-md); }
.seg .seg-btn { border-radius: var(--r-sm); color: var(--ink-3); font-weight: 500; }
.seg .seg-btn.on, .seg .seg-btn.is-active { background: var(--primary); color: #fff; box-shadow: none; }
.badge, .pace, .dk-badge { border-radius: var(--r-xs); font-weight: 600; }
.badge.tone-info, .badge.tone-violet { background: var(--info-bg); color: var(--info); }
.badge.tone-teal { background: var(--ok-bg); color: var(--ok); }
.badge.tone-neutral, .pace.na { background: var(--muted-fill); color: var(--ink-2); }
.badge.tone-brand { background: var(--warm-tint); color: var(--accent-violet-deep); border-color: transparent; }
.fg .toggle input { accent-color: var(--accent-violet-deep); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-violet-deep); }
.empty-box { border-color: var(--hairline-cool); border-radius: var(--r-lg); }

/* ---- what floats: dialogs and drawers */
.modal-panel, .menu-popover { border-radius: var(--r-lg); border: 0; background: var(--surface); box-shadow: var(--shadow-lg); }
.modal-foot, .drawer-head, .drawer-foot { background: var(--surface); }
.modal-head h3, .drawer-head h3 { font-size: 20px; font-weight: 600; }
.drawer { background: var(--surface); box-shadow: var(--shadow-lg); }
.drawer-back, .modal-backdrop { background: rgba(21, 15, 35, 0.6); }
.toast, .dk-toast { background: var(--surface-night); color: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-lg); }

/* ---- Sapa Dial: dark top, white work area, one filled action */
.dk-page { background: #fff; color: var(--ink); }
.dk-top { background: var(--canvas-dark); color: #fff; border-bottom: 0; box-shadow: none; }
.dk-brand strong, .dk-camp strong { font-weight: 500; color: #fff; }
.dk-brand .sapa-logo { display: inline-flex; }
.dk-brand .sapa-text { display: grid; }
.dk-top small, .dk-top .dk-progress small { color: var(--on-dark-muted); }
.dk-camp select { background: var(--accent-violet-deep); color: #fff; border: 0; border-radius: var(--r-md); font-weight: 500; }
.dk-camp label, .dk-top label { color: var(--on-dark-muted); }
.dk-camp, .dk-camp span, .dk-camp small, .dk-stats, .dk-stat span, .dk-stat small { color: var(--on-dark-muted); }
.dk-stat b { color: #fff; }
.dk-auto { color: var(--on-dark-muted); }
.dk-auto input { accent-color: var(--accent-violet-mid); }
.dk-top .dk-ghost, .dk-top .dk-help-btn { background: var(--on-dark-faint); border: 0; color: #fff; }
.dk-top .dk-ghost:hover, .dk-top .dk-help-btn:hover { background: rgba(255, 255, 255, 0.28); }
.dk-progress b { color: #fff; }
.dk-progress .dk-meter { background: var(--hairline-violet); border-radius: var(--r-xs); }
.dk-progress .dk-meter i { background: #fff; border-radius: var(--r-xs); }
.dk-views { background: var(--canvas-dark); border-bottom: 0; }
.dk-views button { min-height: 44px; border-radius: 0; background: none; font-size: 15px; font-weight: 500; color: var(--on-dark-muted); }
.dk-views button:hover { color: #fff; }
.dk-views button[aria-selected="true"] { background: none; box-shadow: inset 0 -3px 0 #fff; color: #fff; font-weight: 500; }
.dk-filters button { border: 1px solid var(--hairline-cool); border-radius: var(--r-sm); background: #fff; color: var(--ink-2); font-weight: 500; }
.dk-filters button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.dk-list { gap: 0; border: 1px solid var(--hairline-cloud); border-radius: var(--r-lg); background: var(--surface); padding: 0; }
.dk-row { border: 0; border-bottom: 1px solid var(--hairline-cloud); border-left: 4px solid transparent; border-radius: 0; background: none; box-shadow: none; }
.dk-row:hover { background: var(--sunken); border-color: var(--hairline-cloud); border-left-color: transparent; }
.dk-row.is-current { background: var(--warm-tint); box-shadow: none; border-color: var(--hairline-cloud); border-left-color: var(--accent-violet-deep); }
.dk-row.is-b0 { border-left-color: var(--accent-pink); }
.dk-row.is-b1 { border-left-color: transparent; }
.dk-row.is-b2-5 { border-left-color: var(--accent-violet-mid); }
.dk-row.is-b3 { border-left-color: var(--accent-violet-deep); }
.dk-side input[type="search"] { border-radius: var(--r-sm); border: 1px solid var(--hairline-cool); background: #fff; box-shadow: none; }
.dk-primary { background: var(--primary); color: #fff; }
.dk-primary:hover { background: var(--ink-deep); transform: none; }
.dk-primary:active { background: var(--press); color: var(--ink-press); transform: none; }
.dk-ghost, .dk-chipbtn { border: 1px solid var(--hairline-cool); background: #fff; color: var(--ink-deep); }
.dk-ghost:hover, .dk-chipbtn:hover { background: var(--well); border-color: var(--hairline-cool); }
.dk-link { color: var(--accent-violet-deep); }
.dk-star { color: var(--accent-violet-deep); }
.dk-due.is-now { color: var(--danger); }
.dk-person { min-height: 60vh; }
.dk-guide { background: var(--surface); border: 1px solid var(--hairline-cloud); border-radius: var(--r-lg); box-shadow: none; }
/* before the first call: a dark feature card, with the screen's one lime word */
.dk-person .dk-pick { min-height: 56vh; margin: 2px; padding: 32px; border-radius: 12px; background: var(--canvas-dark) var(--stars); color: #fff; }
.dk-pick-t { margin: 0; max-width: 16ch; font-family: var(--font-display); font-size: clamp(30px, 3.2vw, 44px); font-weight: 700; line-height: 1.15; color: #fff; }
.dk-pick p { color: var(--on-dark-muted); }
.dk-pick .dk-primary { background: #fff; color: var(--ink-deep); box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px 0; }
.dk-pick .dk-primary:hover { background: #fff; }
.dk-pick .dk-primary:active { background: var(--press); color: var(--ink-press); }
.pp-avatar { border-radius: 50%; background: var(--ink-deep); color: #fff; }
.pp-brief { border-radius: var(--r-md); background: var(--well); }
.pp-wish { border-radius: var(--r-xs); background: var(--warm-tint); color: var(--accent-violet-deep); }
.pp-go { min-height: 64px; border-radius: var(--r-md); background: var(--primary); color: #fff; }
.pp-go:hover { background: var(--ink-deep); }
.pp-go:active { background: var(--press); color: var(--ink-press); }
.pp-go-t { font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: 0.2px; text-transform: uppercase; }
.pp-go-n { font-family: var(--font-mono); font-weight: 400; }
.pp-go kbd { background: var(--on-dark-faint); color: #fff; }
.pp-live { min-height: 64px; border-radius: var(--r-md); background: var(--surface-night); color: #fff; }
.pp-live b { padding: 0 12px; border-radius: var(--r-xs); background: var(--accent-lime); color: var(--ink-deep); font-family: var(--font-mono); font-weight: 400; }
.pp-live .dk-link { color: #fff; }
.pp kbd, .dk-keys kbd { border-radius: var(--r-xs); background: var(--muted-fill); color: var(--ink-2); font-family: var(--font-mono); font-size: 12px; }
.pp-alt { border: 1px solid var(--hairline-cool); border-radius: var(--r-md); background: #fff; }
.pp-alt:hover { background: var(--well); }
.pp-num { border: 1px solid var(--hairline-cool); border-radius: var(--r-md); background: #fff; }
.pp-num:hover { box-shadow: inset 0 0 0 1px var(--primary); }
.pp-num:active, .pp-ob:active { transform: none; }
.pp-num-go { border-radius: var(--r-md); background: var(--primary); color: #fff; font-weight: 700; }
.pp-wa .pp-num-go, .pp-mail .pp-num-go { background: var(--ink-deep); }
.pp-outcomes h4 { font-size: 16px; font-weight: 600; }
.pp-og-t { font-size: 12px; font-weight: 600; letter-spacing: 0.2px; text-transform: uppercase; }
.pp-ob { border: 1px solid var(--hairline-cool); border-left: 4px solid var(--hairline-cool); border-radius: var(--r-md); background: #fff; font-weight: 500; }
.pp-ob:hover { background: var(--well); }
.pp-ob:active { background: var(--press); }
.pp-ob.is-followup { border-left-color: var(--accent-violet-mid); }
.pp-ob.is-good { border-left-color: var(--accent-violet-deep); }
.pp-ob.is-closed { border-left-color: var(--danger); }
.pp-ob.is-suggest { box-shadow: inset 0 0 0 1px var(--primary); }
.pp-ob.is-confirm { background: var(--danger-bg); border-color: var(--danger); color: var(--danger) !important; }
.pp-cb { border-radius: var(--r-md); background: var(--warm-tint); }
.pp-cb input { border: 1px solid var(--hairline-cool); }
.pp-callwith select, .pp-callwith input { border: 1px solid var(--hairline-cool); border-radius: var(--r-sm); background: #fff; }
.pp-formhost { border: 1px solid var(--hairline-cloud); border-radius: var(--r-lg); box-shadow: none; background: var(--sunken); }
.pp-note textarea, .pp-cb input, .pp-edit input, .pp-edit select, .lf input, .lf select, .lf textarea { border-radius: var(--r-sm); }
.lf input, .lf select, .lf textarea, .pp-note textarea, .pp-edit input, .pp-edit select { border: 1px solid var(--hairline-cool); background: #fff; color: var(--ink-deep); }
.dk-strip, .pp-timer { border-radius: var(--r-md); }
.gd-tabs { background: var(--surface); }
.gd-tabs button { color: var(--ink-3); font-weight: 500; }
.gd-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 500; box-shadow: inset 0 -3px 0 var(--primary); }
.gd-steps button { border: 1px solid var(--hairline-cool); border-radius: var(--r-sm); background: #fff; }
.gd-steps button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.gd-steps i { background: var(--muted-fill); }
.gd-steps button[aria-pressed="true"] i { background: #fff; color: var(--ink-deep); }
.gd-obj { border-radius: var(--r-md); background: var(--well); }
.dk-help { background: rgba(21, 15, 35, 0.6); }
.dk-help-card { border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
@media (max-width: 760px) { .dk-top { position: static; } }
.dk-page :focus-visible { outline: 3px solid var(--focus-light); }
.dk-top :focus-visible, .dk-views :focus-visible, .dk-pick :focus-visible { outline-color: var(--focus-dark); }

/* ---- Report and Blast */
.rp-seg { display: inline-flex; gap: 2px; padding: 4px; margin-bottom: 14px; border: 1px solid var(--hairline-cool); border-radius: var(--r-md); background: #fff; }
.rp-seg .seg-btn { min-height: 36px; padding: 6px 14px; border: 0; border-radius: var(--r-sm); background: none; font-weight: 500; color: var(--ink-2); }
.rp-seg .seg-btn.is-active { background: var(--primary); color: #fff; }
.rp-grow { flex: 1 1 100%; } .rp-grow select { width: 100%; max-width: 640px; }
.rp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 12px 0; }
.rp-subject { margin: 12px 0 8px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--well); font-weight: 500; overflow-wrap: anywhere; }
.rp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rp-wrap { white-space: normal; min-width: 180px; overflow-wrap: anywhere; }
.mail-host { margin-top: 12px; }
.mail-frame { width: 100%; min-height: 360px; border: 1px solid var(--hairline-cool); border-radius: var(--r-md); background: #fff; }
.bl-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.bl-head > div:first-child { flex: 1 1 260px; } .bl-head h2 { margin-bottom: 8px; } .bl-head .note { margin: 0; }
.bl-quota { display: grid; font-size: 13px; color: var(--ink-3); }
.bl-quota b { font-size: 24px; font-weight: 500; color: var(--ink); line-height: 1.1; }
.bl-h { margin: 14px 0 0; font-size: 15px; } .bl-t { display: block; margin-bottom: 6px; font-size: 13px; }
.bl-checks { display: grid; gap: 4px; max-height: 170px; overflow: auto; padding: 8px; border-radius: var(--r-sm); background: var(--well); font-size: 14px; }
.bl-count { padding: 10px 12px; border-radius: var(--r-sm); background: var(--well); font-size: 14px; }
.bl-nums { margin-top: 12px; }

@media (max-width: 760px) {
  .funnel .fn { flex: 1 1 31%; }
  .ov-hero h2 { font-size: 22px; }
  .sidebar { border-right: 0; }
}

/* ==========================================================================
   Accessibility. Keep this last.
   ========================================================================== */
:is(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible { outline: 2px solid var(--focus-light) !important; outline-offset: 2px; }
:is(.sidebar, .topbar, .ov-band, .cp-head, .gate-art) :is(a, button, input, select, textarea, summary):focus-visible { outline-color: var(--focus-dark) !important; }
.row-link:focus-visible, .th-sort:focus-visible, .att-row:focus-visible { outline-offset: 1px !important; }
.cp-card:focus-visible { box-shadow: inset 0 0 0 1px var(--primary); }
.skip-link:focus-visible { outline-offset: 0 !important; }

/* a routine count is not an alert: red stays reserved for danger */
.tab-count, .view-tabs button[aria-selected="true"] .tab-count { background: var(--well-hover); color: var(--ink-2); }
/* progress is not a warning: today's bars are neutral, and highlighted funnel steps are not pink */
.rk-today .tgt-bar i { background: var(--ink-deep); }
.funnel .fn.hi { background: var(--well-hover); }
.funnel.lg { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.funnel.lg .fn { min-width: 0; padding: 12px 14px; }
.lead-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(98px, 1fr)); }
.lead-strip .ls { min-width: 0; }
#ld-body td.clip { max-width: 170px; }
.agent-card .ag-nums span { text-transform: none; letter-spacing: 0; font-size: 12px; line-height: 1.25; display: block; }
.fg input[type="date"], .fg input[type="datetime-local"], .modal-form input[type="datetime-local"] { width: 100%; padding: 10px 12px; border: 1px solid var(--field-line); border-radius: var(--r-sm); background: #fff; font: inherit; color: var(--ink); }
.tool-select input[type="date"] { border: 0; background: none; font: inherit; color: var(--ink); padding: 0; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; scroll-behavior: auto !important; }
}

/* Pages appear at once. A work tool shouldn't wait on an entrance animation, and
   a hidden tab can leave one stuck part-way, which washes the page out. */
.view, .cp-sub, #view-overview, #view-campaign, #view-team, [id^="sub-"] { animation: none !important; opacity: 1 !important; transform: none !important; }


/* ==========================================================================
   Work first (round 1e). The chrome takes as little height as it can, so the
   first row of real work sits near the top of every screen. One filled action
   per screen; secondary buttons step back to the light caps weight.
   ========================================================================== */
.btn, .dk-ghost, .dk-chipbtn { min-height: 36px; font-weight: 500; }
.btn-brand, .btn.btn-brand, .dk-primary { font-weight: 700; }
.btn, .btn-outline, .nav-item, .nav-team-btn, .dk-row, .dk-ghost, .dk-chipbtn, .dk-primary, .pp-ob, .pp-alt, .pp-go, .att-row, .cr, .ls, .seg-btn { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }

/* a band runs edge to edge however wide the window is */
.ov-band, .cp-head, #cp-tabs { box-shadow: 0 0 0 100vmax var(--canvas-dark); clip-path: inset(-1px -100vmax); }

/* the top bar */
.topbar { min-height: 56px; padding: 8px 24px; }
.topbar h1 { font-size: 20px; }
.topbar .sub { display: none; }
.topbar .sub.is-stale { display: block; }
.topbar .icon-toggle { width: 36px; height: 36px; min-height: 36px; }
.topbar .btn { min-height: 36px; }

/* the rail: creating a campaign is rare, so it isn't the loudest thing on the page */
.sidebar #add-project-btn { min-height: 36px; background: none; color: #fff; border: 1px solid var(--hairline-violet); font-weight: 500; box-shadow: none; }
.sidebar #add-project-btn:hover { background: var(--hairline-violet); color: #fff; }
.sidebar .nav-item .nav-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; font-size: 14px; font-weight: 500; line-height: 1.3; }

/* Beranda: what to do on the left, how each campaign is doing on the right */
.ov-band { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 32px; padding: 0 0 20px; margin-bottom: 20px; }
.ov-band .ov-line { font-size: 14px; }
.ov-band .ov-line b { font-size: 15px; }
.ov-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; align-items: start; }
.ov-grid.is-wide { grid-template-columns: minmax(0, 1fr); }
.ov-filters { margin-bottom: 8px; min-height: 36px; }
.ov-h { margin: 0; font-size: 16px; font-weight: 600; }
.seg { padding: 2px; }
.seg .seg-btn { min-height: 30px; padding: 4px 10px; font-size: 13px; }
.att { padding: 4px 16px 8px; margin-bottom: 0; }
#view-campaign .att { margin-bottom: 16px; }
.att-group + .att-group { border-top: 1px solid var(--hairline-cloud); }
.att-g { display: block; padding: 12px 0 2px; color: var(--ink-3); font-size: 13px; font-weight: 500; text-decoration: none; }
.att-g:hover { color: var(--ink); text-decoration: underline; }
.att-list li + li { border-top: 0; }
.att-row { grid-template-columns: 36px minmax(0, 1fr) 16px; gap: 8px; min-height: 40px; margin: 0 -8px; padding: 6px 8px; color: var(--ink); text-decoration: none; }
.att-row:hover { background: var(--sunken); }
.att-count { font-size: 20px; text-align: left; }
.att-label { font-size: 15px; font-weight: 400; }
.att-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; background: var(--danger-bg); color: var(--danger); vertical-align: 1px; }
.att-row.is-info .att-count, .att-row.is-info .att-label { color: var(--ink-3); }
.att-note { padding: 12px 0; }
.cr { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--hairline-cloud); border-radius: var(--r-lg); background: #fff; color: var(--ink); text-decoration: none; }
.cr + .cr { margin-top: 8px; }
.cr:hover { border-color: var(--ink-deep); }
.cr.is-done { background: var(--well); }
.cr-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cr-name { font-size: 16px; font-weight: 600; line-height: 1.3; }
.cr-sub { margin-top: -6px; color: var(--ink-3); font-size: 13px; }
.cr-tgts { display: grid; gap: 6px; }
.cr-t { display: grid; grid-template-columns: minmax(0, 150px) minmax(40px, 1fr) auto 84px; align-items: center; gap: 10px; font-size: 13px; }
.cr-l { overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.cr-t b { font-weight: 500; font-variant-numeric: tabular-nums; }
.cr-t .pace { justify-self: end; font-size: 12px; }
.cr-more { color: var(--ink-3); font-size: 13px; }
.cr-nums { display: flex; flex-wrap: wrap; gap: 2px 16px; color: var(--ink-3); font-size: 13px; }
.cr-nums b { color: var(--ink); font-weight: 500; }
@media (max-width: 1180px) { .ov-grid { grid-template-columns: minmax(0, 1fr); } }

/* the campaign header: one line of facts, and the tabs in the same dark band */
.cp-head { display: block; padding: 0 0 6px; margin: 0; }
.cp-meta { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0; color: var(--on-dark-muted); font-size: 14px; line-height: 1.5; }
.cp-meta span + span::before { content: "·"; margin: 0 8px; }
.cp-meta b { color: #fff; font-weight: 500; }
#cp-tabs { position: sticky; top: 56px; z-index: 6; margin-bottom: 20px; padding: 0; gap: 4px; background: var(--canvas-dark); border-bottom: 0; }
#cp-tabs button { min-height: 44px; padding: 8px 12px; color: var(--on-dark-muted); }
#cp-tabs button:hover { color: #fff; }
#cp-tabs button[aria-selected="true"] { color: #fff; box-shadow: inset 0 -3px 0 #fff; }
#cp-tabs .tab-count, #cp-tabs button[aria-selected="true"] .tab-count { margin-left: 6px; background: var(--hairline-violet); color: #fff; border-radius: var(--r-xs); }
.bulk-bar { top: 100px; }

/* work surfaces: tighter, and a table reads at 14px */
.panel { padding: 16px; }
.toolbar { gap: 8px; margin-bottom: 8px; }
.toolbar input[type="search"], .toolbar select { min-height: 36px; padding-block: 4px; font-size: 14px; border: 1px solid var(--hairline-cool); border-radius: var(--r-sm); background-color: #fff; }
.result-line { margin: 0 0 8px; font-size: 13px; color: var(--ink-3); }
.panel .table-scroll { border: 0; border-radius: 0; }
td { padding-block: 8px; }
td .t2, .t2 { font-size: 13px; color: var(--ink-3); }
.lead-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.lead-strip .ls { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 6px; min-width: 0; min-height: 36px; padding: 4px 10px; border: 1px solid var(--hairline-cool); border-radius: var(--r-sm); background: #fff; box-shadow: none; }
.lead-strip .ls b { font-size: 14px !important; font-weight: 600 !important; line-height: 1; }
.lead-strip .ls span { color: var(--ink-3); font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.lead-strip .ls:hover { border-color: var(--ink-deep); }
.lead-strip .ls.on { background: var(--primary); border-color: var(--primary); box-shadow: none; }
.lead-strip .ls.on b, .lead-strip .ls.on span { color: #fff; }

/* Sapa Dial: one row on top, and a screen that follows the call */
.dk-top-in { flex-wrap: nowrap; gap: 16px; max-width: none; min-height: 56px; padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px; }
.dk-camp { display: block; flex: 0 1 320px; }
.dk-camp select { width: 100%; max-width: none; min-height: 36px; }
.dk-camp small { display: inline-block; margin-left: 8px; }
.dk-views { display: flex; flex: none; gap: 2px; margin: 0; padding: 0; background: none; }
.dk-views button { min-height: 36px; padding: 4px 12px; border-radius: var(--r-md); }
.dk-views button:hover { background: var(--hairline-violet); }
.dk-views button[aria-selected="true"] { background: var(--hairline-violet); box-shadow: none; }
.dk-views button span { min-width: 0; padding: 0; margin-left: 4px; background: none; color: var(--on-dark-muted); font-size: 13px; font-weight: 400; }
.dk-stats { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.dk-progress { min-width: 180px; color: var(--on-dark-muted); font-size: 13px; }
.dk-progress b { font-size: 14px; font-weight: 500; }
.dk-today { display: flex; gap: 12px; color: var(--on-dark-muted); font-size: 13px; white-space: nowrap; }
.dk-today b { color: #fff; font-weight: 500; }
.dk-more { position: relative; flex: none; }
.dk-more-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; display: grid; gap: 2px; width: 230px; padding: 6px; border: 1px solid var(--hairline-cloud); border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-lg); }
.dk-more-pop[hidden] { display: none; }
.dk-more-item, .dk-top .dk-more-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-deep); font: inherit; font-size: 14px; font-weight: 400; text-align: left; text-decoration: none; cursor: pointer; }
.dk-more-item:hover { background: var(--well); }
.dk-top .dk-more-pop .dk-auto input { accent-color: var(--accent-violet-deep); }
.dk-main.is-queue { grid-template-columns: 288px minmax(0, 1fr) 380px; gap: 12px; max-width: none; padding: 12px 16px; }
.dk-side { gap: 8px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.dk-filters { display: flex; flex-wrap: nowrap; gap: 4px; }
.dk-filters button { flex: none; min-height: 36px; padding: 4px 8px; font-size: 13px; white-space: nowrap; }
.dk-filters select { flex: 1 1 0; min-width: 0; min-height: 36px; padding: 4px; border: 1px solid var(--hairline-cool); border-radius: var(--r-sm); background: #fff; color: var(--ink-2); font: inherit; font-size: 13px; }
.dk-filters select.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.dk-person { padding: 16px 20px 20px; }
.pp { gap: 12px; }
.pp-head { gap: 12px; }
.pp-who h3 { font-family: var(--font-body); font-size: 20px; font-weight: 600; }
.pp-avatar { width: 44px; height: 44px; font-size: 15px; }
.pp-go { min-height: 60px; }
.pp-skip { justify-self: center; min-height: 36px; padding: 4px 8px; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pp-skip:hover { color: var(--ink); }
.pp-out-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pp-outcomes { display: grid; gap: 8px; }
.pp-og { display: grid; gap: 4px; }
.pp-og-b { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.pp .pp-ob, .pp-ob.is-followup, .pp-ob.is-good, .pp-ob.is-closed { min-height: 44px; padding: 4px 8px; font-size: 14px; line-height: 1.25; border: 1px solid var(--hairline-cool); border-radius: var(--r-md); font-weight: 400; }
.pp-ob kbd { flex: none; }
.pp-note span { font-size: 14px; font-weight: 500; }
.pp-note span small { font-weight: 400; }
.pp-tools { padding-top: 4px; border-top: 1px solid var(--hairline-cloud); }
.pp-tools .dk-ghost { min-height: 36px; }
.dk-guide { top: 68px; max-height: calc(100dvh - 80px); }
.dk-side { top: 68px; }
@media (max-width: 1240px) { .dk-main.is-queue { grid-template-columns: 280px minmax(0, 1fr); } .dk-today { display: none; } }
@media (max-width: 1000px) { .dk-stats { display: none; } .dk-more { margin-left: auto; } }

/* phones: the rail is a drawer behind the menu button */
.nav-scrim { position: fixed; inset: 0; z-index: 290; background: rgba(21, 15, 35, 0.6); }
.nav-scrim[hidden] { display: none; }
@media (max-width: 860px) {
  .shell { display: block; }
  .sidebar, body.sidebar-hidden .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 300; display: flex; flex-direction: column; align-items: stretch; width: min(84vw, 300px); height: 100dvh; margin: 0; padding: 20px 14px 16px; gap: 0; overflow-y: auto; visibility: hidden; transform: translateX(-100%); transition: transform 180ms ease, visibility 0s linear 180ms; }
  body.nav-open .sidebar { visibility: visible; transform: none; transition: transform 200ms ease; }
  .sidebar nav { display: block; flex: 1; }
  .sidebar .nav-group, .sidebar .nav-section { display: block; }
  .sidebar .nav-section { display: flex; }
  .sidebar .nav-item { white-space: normal; }
  .sidebar .nav-item .nav-sub { display: block; }
  .sidebar .nav-item .nav-status { display: inline-block; }
  .sidebar .add-project-btn, .nav-team-btn { width: 100%; }
  .whoami { display: flex; }
  .topbar { padding: 8px 16px; }
  .topbar h1 { font-size: 18px; }
  .content { padding: 0 16px 32px; }
  .ov-band { padding-bottom: 16px; }
  .ov-title { font-size: 26px; }
  .cp-meta { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
  #cp-tabs { top: 52px; overflow-x: auto; scrollbar-width: none; }
  .cr-t { grid-template-columns: minmax(0, 1fr) auto; }
  .cr-t .tgt-bar { grid-column: 1 / -1; grid-row: 2; }
  .cr-t .pace { display: none; }
}
@media (max-width: 760px) {
  .dk-top-in { flex-wrap: wrap; gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; }
  .dk-camp { order: 4; flex: 1 1 100%; }
  .dk-views { order: 3; }
  .dk-main.is-queue { padding: 10px 10px 90px; }
  .dk-filters { overflow-x: auto; scrollbar-width: none; }
}

.whoami::before { background: var(--hairline-violet); color: #fff; box-shadow: none; }


/* ==========================================================================
   Frosted glass (round 1g). Goes beyond DESIGN.md at the owner's request: a soft
   colour field behind everything, translucent cards that pick it up, softer
   corners, and buttons in sentence case. The filter sits on containers only,
   never on table rows, so long lists stay smooth.
   ========================================================================== */
:root {
  --ink-3: #554e68;
  --r-sm: 10px; --r-md: 10px; --r-lg: 16px; --r-xl: 20px;
  --line: rgba(66, 32, 130, 0.1); --line-2: rgba(66, 32, 130, 0.16); --hairline-cloud: rgba(66, 32, 130, 0.1); --hairline-cool: rgba(66, 32, 130, 0.18);
  --well: rgba(255, 255, 255, 0.55); --well-hover: rgba(255, 255, 255, 0.8); --sunken: rgba(66, 32, 130, 0.05); --muted-fill: rgba(66, 32, 130, 0.08);
  --glass-fill: rgba(255, 255, 255, 0.66); --glass-solid: rgba(255, 255, 255, 0.9); --glass-line: rgba(255, 255, 255, 0.85);
  --glass-shadow: 0 1px 2px rgba(31, 22, 51, 0.04), 0 14px 32px -14px rgba(66, 32, 130, 0.2);
  --glass-blur: blur(20px) saturate(170%);
  --grad-primary: linear-gradient(135deg, #2f1760 0%, #5a45b0 100%);
  --shadow-lg: 0 24px 56px -20px rgba(31, 22, 51, 0.4);
}
html { background: #efeafa; }
body, .dk-page, .gate { background: transparent; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background:
  radial-gradient(52vw 52vw at 8% 4%, rgba(106, 95, 193, 0.42), transparent 62%),
  radial-gradient(46vw 46vw at 92% 8%, rgba(250, 127, 170, 0.34), transparent 62%),
  radial-gradient(50vw 50vw at 84% 96%, rgba(194, 239, 78, 0.28), transparent 60%),
  radial-gradient(44vw 44vw at 16% 98%, rgba(66, 32, 130, 0.22), transparent 62%),
  #f4f1fb; }
mark.lime { border-radius: 8px; }

/* cards */
.panel, .stat-card, .cp-card, .tgt-card, .chart-card, .setup-card, .event-card, .ed-section, .ci-card, .dk-person, .dk-leads-sec, .dk-guide, .dk-list, .att, .agent-card, .cr, .kc, .rv-banner {
  background: var(--glass-fill); border: 1px solid var(--glass-line); border-radius: var(--r-lg); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.cr:hover, .cp-card:hover { border-color: var(--glass-line); box-shadow: 0 1px 2px rgba(31, 22, 51, 0.04), 0 18px 36px -14px rgba(66, 32, 130, 0.32); background: rgba(255, 255, 255, 0.78); }
.panel .panel, .drawer .panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--well); box-shadow: none; }
.kpi, .sla-item, .funnel .fn, .rk-stat, .pp-brief, .gd-obj, .rp-subject, .bl-count, .bl-checks { background: var(--well); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--r-md); }
.table-scroll, .panel .table-scroll { background: transparent; border: 0; }
thead th { background: transparent; border-bottom: 1px solid var(--hairline-cool); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; }
tbody tr + tr td { border-top-color: var(--line); }
tbody tr:hover { background: rgba(66, 32, 130, 0.05); }

/* the rail stays dark glass; the top of the page opens up */
.sidebar { background: rgba(31, 22, 51, 0.9); border-right: 1px solid rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); }
.sidebar .nav-item:hover, .sidebar .nav-item.active, .nav-team-btn:hover, .nav-team-btn.active { background: rgba(255, 255, 255, 0.12) !important; }
.sidebar .nav-item.active .nav-sub { color: rgba(255, 255, 255, 0.85); }
.pp-go kbd { background: rgba(255, 255, 255, 0.2); color: #fff; }
.sidebar .nav-item .count, .sidebar .nav-item.active .count { background: rgba(255, 255, 255, 0.14); border-radius: 8px; }
.nav-search input { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); }
.nav-search input:focus { background: rgba(255, 255, 255, 0.12); }
.sidebar #add-project-btn { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.14); text-transform: none; letter-spacing: 0; }
.sidebar #add-project-btn:hover { background: rgba(255, 255, 255, 0.18); }
.topbar { background: rgba(255, 255, 255, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.7); color: var(--ink); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.topbar h1 { color: var(--ink); font-weight: 600; }
.ov-band, .cp-head, #cp-tabs { background: none; box-shadow: none; clip-path: none; color: var(--ink); }
.ov-band { padding: 22px 0 16px; margin: 0; }
.ov-title { color: var(--ink); }
.ov-band .ov-line { color: var(--ink-3); }
.ov-band .ov-line b { color: var(--ink); }
.cp-head { padding: 14px 0 8px; }
.cp-meta { color: var(--ink-3); }
.cp-meta b { color: var(--danger); }
#cp-tabs { top: 64px; width: fit-content; max-width: 100%; margin: 0 0 16px; padding: 4px; gap: 2px; border: 1px solid var(--glass-line); border-radius: 14px; background: var(--glass-fill); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
#cp-tabs button { min-height: 36px; padding: 6px 14px; border-radius: 10px; color: var(--ink-3); }
#cp-tabs button:hover { background: rgba(66, 32, 130, 0.07); color: var(--ink); }
#cp-tabs button[aria-selected="true"] { background: var(--grad-primary); color: #fff; box-shadow: none; }
#cp-tabs .tab-count { background: rgba(66, 32, 130, 0.1); color: var(--ink); }
#cp-tabs button[aria-selected="true"] .tab-count { background: rgba(255, 255, 255, 0.2); color: #fff; }
.content { padding-top: 0; }
#view-overview .ov-grid { margin-top: 4px; }

/* controls: softer and in sentence case */
.btn, .btn-outline, .dk-primary, .dk-ghost, .dk-chipbtn, .pp-cb-save, .gate-form button[type="submit"], .dk-gate .dk-primary, .pp-go-t { text-transform: none; letter-spacing: 0; }
.btn, .dk-ghost, .dk-chipbtn { border-radius: var(--r-md); background: rgba(255, 255, 255, 0.7); border: 1px solid var(--hairline-cool); }
.btn:hover, .dk-ghost:hover, .dk-chipbtn:hover { background: rgba(255, 255, 255, 0.95); border-color: var(--hairline-cool); }
.btn:active, .dk-ghost:active, .dk-chipbtn:active { background: rgba(66, 32, 130, 0.08); color: var(--ink); }
.btn-brand, .btn.btn-brand, .dk-primary, .gate-form button[type="submit"], .dk-gate .dk-primary, .pp-go { background: var(--grad-primary); border-color: transparent; color: #fff; font-weight: 600; box-shadow: 0 8px 18px -8px rgba(66, 32, 130, 0.6); }
.btn-brand:hover, .btn.btn-brand:hover, .dk-primary:hover, .gate-form button[type="submit"]:hover, .dk-gate .dk-primary:hover, .pp-go:hover { background: var(--grad-primary); border-color: transparent; color: #fff; filter: brightness(1.12); }
.btn-brand:active, .btn.btn-brand:active, .dk-primary:active, .gate-form button[type="submit"]:active, .pp-go:active { background: var(--grad-primary); border-color: transparent; color: #fff; filter: brightness(0.92); }
.btn-outline { background: rgba(255, 255, 255, 0.7); }
.topbar .btn, .topbar .icon-toggle, .topbar .icon-btn { background: rgba(255, 255, 255, 0.7); border: 1px solid var(--hairline-cool); color: var(--ink); }
.topbar .btn:hover { background: rgba(255, 255, 255, 0.95); color: var(--ink); }
.btn:disabled, .btn[disabled], .dk-primary:disabled { background: rgba(66, 32, 130, 0.08); box-shadow: none; color: var(--ink-3); }
input, select, textarea, .tool-select, .tool-check, .seg { border-radius: var(--r-sm); }
.fg input, .fg select, .fg textarea, .modal-form input, .modal-form select, .modal-form textarea, .toolbar input[type="search"], .toolbar select, .lf input, .lf select, .lf textarea, .pp-note textarea, .pp-edit input, .pp-edit select, .tool-select, .tool-check, .seg, .dk-side input[type="search"], .dk-filters select, .pp-callwith select, .gate input { background-color: rgba(255, 255, 255, 0.72); border-color: var(--hairline-cool); }
.seg .seg-btn.on, .seg .seg-btn.is-active, .rp-seg .seg-btn.is-active, .dk-filters button[aria-pressed="true"], .dk-filters select.on, .gd-steps button[aria-pressed="true"] { background: var(--grad-primary); border-color: transparent; color: #fff; }
.rp-seg, .dk-filters button, .gd-steps button, .pp-alt, .pp-num { background: rgba(255, 255, 255, 0.66); border-color: var(--hairline-cool); }
.badge, .pace, .dk-badge, .att-tag, .pp-wish { border-radius: 8px; }
.lead-strip .ls { background: rgba(255, 255, 255, 0.6); border-color: var(--glass-line); border-radius: var(--r-md); }
.lead-strip .ls:hover { background: rgba(255, 255, 255, 0.9); border-color: var(--glass-line); }
.lead-strip .ls.on { background: var(--grad-primary); border-color: transparent; }

/* what floats */
.modal-panel, .menu-popover, .drawer, .dk-more-pop, .dk-help-card { background: var(--glass-solid); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-lg); }
.drawer { border-left: 1px solid var(--glass-line); }
.modal-foot, .drawer-head, .drawer-foot { background: transparent; }
.drawer-back, .modal-backdrop, .nav-scrim, .dk-help { background: rgba(31, 22, 51, 0.34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.toast, .dk-toast { background: rgba(31, 22, 51, 0.88); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-radius: var(--r-md); }

/* sign-in */
.gate-card { padding: 32px; margin: 24px; width: min(100%, 440px); border: 1px solid var(--glass-line); border-radius: var(--r-xl); background: var(--glass-fill); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.gate-modes { border-bottom-color: var(--hairline-cool); }
.gate-art { background: linear-gradient(150deg, #1f1633 0%, #2f1760 58%, #4a35a0 100%), var(--canvas-dark); background-image: var(--stars), linear-gradient(150deg, #1f1633 0%, #2f1760 58%, #4a35a0 100%); }

/* Sapa Dial */
.dk-top { background: rgba(31, 22, 51, 0.84); border-bottom: 1px solid rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); }
.dk-views { background: none; }
.dk-views button:hover, .dk-views button[aria-selected="true"] { background: rgba(255, 255, 255, 0.14); }
.dk-top .dk-ghost, .dk-top .dk-help-btn { background: rgba(255, 255, 255, 0.14); border: 0; color: #fff; }
.dk-top .dk-ghost:hover { background: rgba(255, 255, 255, 0.24); }
.dk-camp select { background-color: rgba(255, 255, 255, 0.14); }
.dk-progress .dk-meter { background: rgba(255, 255, 255, 0.16); }
.dk-row:hover { background: rgba(66, 32, 130, 0.05); }
.dk-row.is-current { background: rgba(66, 32, 130, 0.09); }
.dk-list { overflow: auto; }
.dk-person .dk-pick { border-radius: 14px; background-image: var(--stars), linear-gradient(150deg, #1f1633 0%, #2f1760 58%, #4a35a0 100%); }
.pp-go, .pp-live { border-radius: 14px; }
.pp-live { background: rgba(31, 22, 51, 0.92); }
.pp .pp-ob, .pp-ob.is-followup, .pp-ob.is-good, .pp-ob.is-closed { background: rgba(255, 255, 255, 0.66); border-color: var(--hairline-cool); border-radius: var(--r-md); }
.pp .pp-ob:hover { background: rgba(255, 255, 255, 0.95); }
.pp-formhost { background: var(--well); border-color: var(--glass-line); }
.pp-cb { background: rgba(66, 32, 130, 0.07); }
.dk-returned { color: var(--danger) !important; white-space: normal !important; }
.dk-returned b { font-weight: 600; }
.lf-rec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.lf-rec-now { margin: 0 0 4px; color: var(--ink-2); font-size: 13px; font-weight: 400; }
@media (max-width: 760px) { .lf-rec { grid-template-columns: 1fr; } }

/* the KPI card: the number first, then whether it's on pace */
.kc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kc { --c: var(--accent-violet-deep); display: grid; gap: 10px; align-content: start; padding: 16px 18px; }
.kc.is-behind { --c: #dd3f7c; }
.kc.is-done { --c: var(--ok); }
.kc-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kc-h h3 { margin: 0; color: var(--ink-2); font-size: 14px; font-weight: 500; line-height: 1.35; }
.kc-h .pace { flex: none; }
.kc-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kc-num b { display: block; font-family: var(--font-display); font-size: 42px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.kc-num span { display: block; margin-top: 6px; color: var(--ink-3); font-size: 14px; }
.kc-ring { flex: none; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(66, 32, 130, 0.12) 0); }
.kc-ring span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kc-track { position: relative; height: 8px; border-radius: 8px; background: rgba(66, 32, 130, 0.1); }
.kc-track i { display: block; height: 100%; border-radius: 8px; background: var(--c); }
.kc-track em { position: absolute; top: -3px; width: 3px; height: 14px; margin-left: -1px; border-radius: 2px; background: var(--ink); }
.kc-exp { margin: -4px 0 0; color: var(--ink-3); font-size: 13px; }
.kc-exp b { color: var(--ink); font-weight: 600; }
.kc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.kc-facts dt { color: var(--ink-3); font-size: 12px; line-height: 1.3; }
.kc-facts dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* the PIC's review */
.rv-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding: 12px 16px; }
.rv-banner strong { display: block; font-size: 15px; font-weight: 600; }
.rv-banner span { color: var(--ink-3); font-size: 14px; }
.rv { display: grid; gap: 12px; }
.rv-step { margin: 0; color: var(--ink-3); font-size: 14px; }
.rv-card { display: grid; gap: 8px; padding: 14px; border: 1px solid rgba(66, 32, 130, 0.08); border-radius: 14px; background: rgba(255, 255, 255, 0.6); }
.rv-card h3 { margin: 0; font-size: 15px; font-weight: 600; }
.rv-label { display: block; font-size: 15px; font-weight: 600; }
.rv-label small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 13px; font-weight: 400; }
.rv-card textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--hairline-cool); border-radius: var(--r-sm); background: #fff; color: var(--ink); font: inherit; line-height: 1.5; }
.rv-card audio { display: block; width: 100%; height: 44px; }
.rv-speed { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13px; }
.rv-speed select { min-height: 32px; padding: 2px 6px; border: 1px solid var(--hairline-cool); border-radius: 8px; background: #fff; font: inherit; }
.rv-meta, .rv-none { margin: 0; color: var(--ink-3); font-size: 13px; }
.rv-none { font-size: 14px; }
.rv-attach summary { color: var(--accent-violet-deep); font-size: 14px; cursor: pointer; }
.rv-attach .lf-rec { margin-top: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.rv-err { margin: 0; color: var(--danger); font-size: 14px; }
.rec-mark { display: block; width: fit-content; margin-top: 3px; color: var(--ink-3); font-size: 12px; }
.drawer-foot .btn-brand { margin-left: auto; }
@media (max-width: 760px) { .rv-attach .lf-rec { grid-template-columns: 1fr; } .rv-banner { flex-direction: column; align-items: stretch; } }

/* people who ask for less transparency, and browsers without it, get solid surfaces */
@media (prefers-reduced-transparency: reduce) {
  .panel, .att, .cr, .kc, .dk-person, .dk-guide, .dk-list, .dk-leads-sec, .agent-card, .chart-card, .setup-card, .rv-banner, .gate-card, #cp-tabs, .topbar { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sidebar, .dk-top { background: var(--canvas-dark); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel, .att, .cr, .kc, .dk-person, .dk-guide, .dk-list, .dk-leads-sec, .agent-card, .chart-card, .setup-card, .rv-banner, .gate-card, #cp-tabs, .topbar { background: var(--glass-solid); }
}
@media (max-width: 860px) {
  #cp-tabs { top: 60px; width: 100%; overflow-x: auto; }
  .gate-card { margin: 16px; width: auto; }
}

/* The Kelar panel on Set up */
.kl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.kl-stat { padding: 10px 12px; border-radius: var(--radius-sm, 10px); background: var(--glass-soft, rgba(255, 255, 255, 0.5)); }
.kl-stat b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; color: var(--ink); }
.kl-stat span { font-size: 12px; color: var(--ink-2); }
.kl-targets { margin: 0 0 8px; padding-left: 18px; font-size: 14px; color: var(--ink-2); }