/* DNAP Master OS — iOS-style UI */
:root {
  --brand: #381874;
  --brand-2: #5b2bb5;
  --brand-soft: #efe9fa;
  --gold: #d69e3a;
  --gold-soft: #fbf1df;
  --bg: #f2f2f7;
  --card: #ffffff;
  --card-2: #f7f7fa;
  --label: #000000;
  --label-2: rgba(60, 60, 67, .62);
  --label-3: rgba(60, 60, 67, .32);
  --sep: rgba(60, 60, 67, .16);
  --fill: rgba(120, 120, 128, .12);
  --blue: #007aff; --green: #34c759; --orange: #ff9500; --red: #ff3b30; --teal: #30b0c7;
  --indigo: #5856d6; --pink: #ff2d55; --yellow: #ffcc00; --purple: #af52de; --gray: #8e8e93; --cyan: #32ade6; --amber: #e08a00;
  --l-crm: #5b2bb5; --l-os: #0aa2c0; --l-erp: #e07a00; --l-sim: #8e8e93;
  --page: radial-gradient(1200px 700px at 20% 0%, #4a2394 0%, #2a1158 45%, #160a2e 100%);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 2px 10px rgba(0,0,0,.04);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-soft: #2a1d45; --gold-soft: #3a2c14;
    --bg: #000000; --card: #1c1c1e; --card-2: #2c2c2e; --label: #ffffff;
    --label-2: rgba(235, 235, 245, .6); --label-3: rgba(235, 235, 245, .3); --sep: rgba(84, 84, 88, .55);
    --fill: rgba(120, 120, 128, .24); --l-crm: #a07cf0; --brand-2: #a07cf0;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  --brand-soft: #2a1d45; --gold-soft: #3a2c14;
  --bg: #000000; --card: #1c1c1e; --card-2: #2c2c2e; --label: #ffffff;
  --label-2: rgba(235, 235, 245, .6); --label-3: rgba(235, 235, 245, .3); --sep: rgba(84, 84, 88, .55);
  --fill: rgba(120, 120, 128, .24); --l-crm: #a07cf0; --brand-2: #a07cf0; --shadow: none;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); color: var(--label); -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: var(--label); }

/* ---------- App shell (iOS / iPadOS style, full screen) ---------- */
body { background: var(--bg); }
.shell { position: relative; height: 100dvh; display: flex; overflow: hidden; background: var(--bg); isolation: isolate; }
.main { position: relative; flex: 1; min-width: 0; container-type: inline-size; }

/* Sidebar (iPadOS) */
.sidebar { display: none; width: 260px; flex-shrink: 0; flex-direction: column; background: var(--card-2); border-right: .5px solid var(--sep); padding: calc(env(safe-area-inset-top) + 18px) 12px 16px; }
.sb-brand { padding: 0 6px 18px; }
.sb-brand img { width: 168px; background: #fff; border-radius: 12px; padding: 8px 10px; box-shadow: var(--shadow); }
.sb-title { font-size: 13px; color: var(--label-2); margin: 10px 2px 0; line-height: 1.35; }
.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-nav button { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; font-size: 16px; font-weight: 500; color: var(--label); position: relative; text-align: left; }
.sb-nav button svg { width: 22px; height: 22px; fill: var(--brand-2); }
.sb-nav button[data-tab="erp"] svg { fill: none; stroke: var(--brand-2); stroke-width: 1.8; stroke-linejoin: round; }
.sb-nav button:hover { background: var(--fill); }
.sb-nav button.active { background: var(--brand-2); color: #fff; }
.sb-nav button.active svg { fill: #fff; } .sb-nav button.active[data-tab="erp"] svg { fill: none; stroke: #fff; }
.sb-nav .badge { position: static; margin-left: auto; }
.sb-nav .dot-live { position: static; margin-left: auto; border: 0; }
.sb-foot { margin-top: auto; font-size: 11.5px; color: var(--label-2); padding: 0 8px; line-height: 1.45; }

/* Live monitor (wide screens) */
.monitor { display: none; width: 400px; flex-shrink: 0; flex-direction: column; border-left: .5px solid var(--sep); background: var(--bg); padding: calc(env(safe-area-inset-top) + 18px) 16px 16px; }
.mon-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mon-head h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.mon-head p { margin: 2px 0 14px; font-size: 13px; color: var(--label-2); }
.live-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; background: rgba(52,199,89,.15); color: #1f9a43; padding: 4px 9px; border-radius: 999px; }
.live-chip i { width: 7px; height: 7px; border-radius: 50%; background: #34c759; animation: blink 1.4s infinite; }
.link { color: var(--brand-2); font-size: 14px; text-transform: none; }

@media (min-width: 900px) {
  .sidebar { display: flex; }
  .tabbar { display: none !important; }
  .scroll { padding-bottom: 40px !important; }
  .brandbar img { visibility: hidden; }
}
@media (min-width: 1440px) { .monitor { display: flex; } .auto-monitor-dup { display: none; } }

/* ---------- App views ---------- */
#app { position: absolute; inset: 0; top: 0; bottom: 0; }
.view { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
.view.pushed { z-index: 20; animation: pushIn .32s cubic-bezier(.2,.8,.2,1); box-shadow: -10px 0 30px rgba(0,0,0,.12); }
.view.popping { animation: pushOut .26s ease-in forwards; }
@keyframes pushIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes pushOut { to { transform: translateX(100%); } }
.scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: calc(env(safe-area-inset-top) + 10px) max(0px, calc((100% - 900px) / 2)) 110px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.scroll::-webkit-scrollbar { display: none; }
.navbar { display: flex; align-items: center; justify-content: space-between; padding: 4px 16px 0; min-height: 44px; }
.navbar .nb-btn { color: var(--brand-2); font-size: 17px; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; }
.navbar .nb-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--fill); display: inline-grid; place-items: center; color: var(--brand-2); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.icon-btn.primary { background: var(--brand); color: #fff; }
.large-title { font-size: 34px; font-weight: 800; letter-spacing: -.025em; padding: 2px 16px 8px; margin: 0; }
.subtitle { padding: 0 16px 10px; margin-top: -6px; color: var(--label-2); font-size: 14px; }
.brandbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 0; }
.brandbar img { height: 34px; border-radius: 8px; }
.section-h { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 20px 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; color: var(--label-2); }
.section-h b { font-weight: 600; }
.section-h button { color: var(--brand-2); text-transform: none; font-size: 15px; }
.section-f { padding: 6px 20px 0; font-size: 12.5px; color: var(--label-2); line-height: 1.4; }

/* Grouped list */
.group { background: var(--card); border-radius: 12px; margin: 0 16px; overflow: hidden; box-shadow: var(--shadow); }
.row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; min-height: 48px; position: relative; width: 100%; text-align: left; }
.row + .row::before { content: ""; position: absolute; top: 0; right: 0; left: 16px; border-top: .5px solid var(--sep); }
.row.tap:active { background: var(--fill); }
.row .grow { flex: 1; min-width: 0; }
.row .t { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .s { font-size: 13px; color: var(--label-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .v { color: var(--label-2); font-size: 15px; white-space: nowrap; }
.chev { width: 8px; height: 13px; flex-shrink: 0; stroke: var(--label-3); stroke-width: 2.2; fill: none; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: #fff; flex-shrink: 0; background: linear-gradient(135deg, var(--brand-2), var(--brand)); }
.avatar.lg { width: 64px; height: 64px; font-size: 24px; }
.ricon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 15px; flex-shrink: 0; }

/* Pills / chips */
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.c-gray { background: rgba(142,142,147,.16); color: #6d6d72; } .c-indigo { background: rgba(88,86,214,.14); color: var(--indigo); }
.c-blue { background: rgba(0,122,255,.12); color: var(--blue); } .c-teal { background: rgba(48,176,199,.15); color: #138aa0; }
.c-cyan { background: rgba(50,173,230,.15); color: #1a86b8; } .c-orange { background: rgba(255,149,0,.15); color: #c96f00; }
.c-red { background: rgba(255,59,48,.13); color: #d62a20; } .c-green { background: rgba(52,199,89,.15); color: #1f9a43; }
.c-purple { background: rgba(175,82,222,.14); color: #9334c4; } .c-amber { background: rgba(255,170,0,.17); color: #b36b00; }
.c-gold { background: var(--gold-soft); color: #a86f0f; } .c-pink { background: rgba(255,45,85,.12); color: #e0204a; }
.chip-id { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; padding: 3px 7px; border-radius: 6px; background: var(--brand-soft); color: var(--brand-2); font-weight: 600; }
.chip-id.gold { background: var(--gold-soft); color: #a86f0f; }
.chip-id.os { background: rgba(10,162,192,.12); color: #0a8aa3; }
.tag { font-size: 11px; color: var(--label-2); background: var(--fill); border-radius: 5px; padding: 2px 6px; }

/* Segmented control */
.seg { display: flex; background: var(--fill); border-radius: 9px; padding: 2px; margin: 0 16px; }
.seg button { flex: 1; padding: 6px 4px; font-size: 13px; font-weight: 500; border-radius: 7px; color: var(--label); }
.seg button.on { background: var(--card); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); font-weight: 600; }
.seg.sm button { font-size: 12px; padding: 5px 2px; }

/* Search */
.search { margin: 0 16px 10px; display: flex; align-items: center; gap: 6px; background: var(--fill); border-radius: 10px; padding: 0 10px; height: 36px; color: var(--label-2); }
.search svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.search input { flex: 1; border: 0; background: none; outline: none; font-size: 16px; }

/* KPI tiles */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 16px; }
.kpi { background: var(--card); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); }
.kpi .k-l { font-size: 12.5px; color: var(--label-2); display: flex; align-items: center; gap: 6px; }
.kpi .k-v { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .k-s { font-size: 12px; color: var(--label-2); margin-top: 2px; }
.kpi .k-dot { width: 8px; height: 8px; border-radius: 50%; }

/* Hero (role card) */
.hero { margin: 0 16px; border-radius: 18px; padding: 16px; color: #fff; background: linear-gradient(135deg, #4a2394, var(--brand) 55%, #24104d); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(214,158,58,.45), transparent 70%); }
.hero .h-top { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.hero .avatar { background: var(--gold) !important; color: #2a1458; }
.hero .h-name { font-size: 17px; font-weight: 700; }
.hero .h-role { font-size: 13px; opacity: .78; }
.hero .h-switch { margin-left: auto; background: rgba(255,255,255,.16); padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.hero .h-stats { display: flex; gap: 18px; margin-top: 14px; position: relative; z-index: 1; }
.hero .h-stats div { font-size: 12px; opacity: .8; }
.hero .h-stats b { display: block; font-size: 20px; opacity: 1; font-weight: 700; }

/* Bars */
.bars { padding: 12px 16px; }
.bar-row { display: grid; grid-template-columns: 96px 1fr 40px; align-items: center; gap: 10px; font-size: 13px; margin: 7px 0; }
.bar-row .lbl { color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.track { height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.track i { display: block; height: 100%; border-radius: 4px; background: var(--brand-2); transition: width .5s ease; }
.track i.gold { background: var(--gold); } .track i.green { background: var(--green); } .track i.red { background: var(--red); }

/* Stage chips (pipeline) */
.hscroll { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 10px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.stage-chip { flex-shrink: 0; background: var(--card); border-radius: 12px; padding: 9px 12px; min-width: 104px; text-align: left; box-shadow: var(--shadow); border: 1.5px solid transparent; }
.stage-chip.on { border-color: var(--brand-2); }
.stage-chip .n { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stage-chip .l { font-size: 12px; color: var(--label-2); }

/* Lead detail */
.profile { text-align: center; padding: 6px 16px 14px; }
.profile h2 { margin: 10px 0 2px; font-size: 22px; letter-spacing: -.01em; }
.profile .meta { font-size: 13.5px; color: var(--label-2); }
.profile .ids { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.quick { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.quick a, .quick button { background: var(--card); border-radius: 12px; padding: 8px 0; width: 74px; font-size: 11px; color: var(--brand-2); display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; box-shadow: var(--shadow); }
.quick svg { width: 20px; height: 20px; fill: currentColor; }
.tracker { display: flex; align-items: flex-start; padding: 14px 4px 12px; overflow-x: auto; scrollbar-width: none; }
.tracker::-webkit-scrollbar { display: none; }
.tstep { flex: 1; min-width: 28px; display: flex; flex-direction: column; align-items: center; position: relative; font-size: 8.5px; color: var(--label-2); text-align: center; line-height: 1.15; }
.tstep::before { content: ""; position: absolute; top: 8px; left: -50%; right: 50%; height: 2px; background: var(--fill); }
.tstep:first-child::before { display: none; }
.tstep .td { width: 18px; height: 18px; border-radius: 50%; background: var(--fill); position: relative; z-index: 1; margin-bottom: 5px; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 800; }
.tstep.done .td { background: var(--green); } .tstep.done::before { background: var(--green); }
.tstep.cur .td { background: var(--brand-2); box-shadow: 0 0 0 4px rgba(91,43,181,.2); }
.tstep.cur { color: var(--label); font-weight: 600; }
.tstep.skip .td { background: transparent; border: 1.5px dashed var(--label-3); }
.tstep.fail .td { background: var(--red); }
.next-card { margin: 0 16px; border-radius: 16px; padding: 14px; background: var(--card); box-shadow: var(--shadow); border-left: 4px solid var(--brand-2); }
.next-card .nc-k { font-size: 11px; font-weight: 700; color: var(--brand-2); text-transform: uppercase; letter-spacing: .06em; }
.next-card .nc-t { font-size: 17px; font-weight: 600; margin: 3px 0 2px; }
.next-card .nc-s { font-size: 13px; color: var(--label-2); line-height: 1.4; }
.next-card .nc-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.next-card.done { border-left-color: var(--green); } .next-card.done .nc-k { color: var(--green); }
.next-card.closed { border-left-color: var(--gray); } .next-card.closed .nc-k { color: var(--gray); }
.next-card.wait { border-left-color: var(--orange); } .next-card.wait .nc-k { color: var(--orange); }
.warnbox { margin-top: 10px; background: rgba(255,59,48,.08); color: #c92a20; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; }
.okbox { margin-top: 10px; background: rgba(52,199,89,.1); color: #1f8a3e; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 12px; font-weight: 600; font-size: 15px; background: var(--brand); color: #fff; flex: 1; }
.btn:active { opacity: .8; transform: scale(.98); }
.btn.sec { background: var(--fill); color: var(--brand-2); }
.btn.danger { background: rgba(255,59,48,.12); color: var(--red); }
.btn.green { background: var(--green); }
.btn.gold { background: var(--gold); color: #2a1458; }
.btn.sm { height: 34px; font-size: 13.5px; border-radius: 10px; padding: 0 12px; flex: 0 0 auto; }
.btn.block { width: 100%; display: flex; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* Quote table */
.qtable { padding: 6px 16px 12px; font-size: 13.5px; }
.qline { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; }
.qline span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.qline.tot { border-top: .5px solid var(--sep); margin-top: 4px; padding-top: 9px; font-weight: 700; font-size: 15px; }
.qline.adv { color: var(--brand-2); font-weight: 700; }
.qline.muted { color: var(--label-2); }

/* Timeline */
.timeline { padding: 4px 16px 10px; }
.tl { display: flex; gap: 10px; padding: 8px 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 5px; top: 22px; bottom: -8px; width: 2px; background: var(--fill); }
.tl:last-child::before { display: none; }
.tl .tdot { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; background: var(--l-crm); box-shadow: 0 0 0 3px var(--card); position: relative; z-index: 1; }
.tl .tdot.OS { background: var(--l-os); } .tl .tdot.ERP { background: var(--l-erp); } .tl .tdot.SIM { background: var(--l-sim); }
.tl .tmsg { font-size: 13.5px; line-height: 1.35; }
.tl .tmeta { font-size: 11.5px; color: var(--label-2); margin-top: 2px; }

/* Tab bar */
.tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(52px + max(env(safe-area-inset-bottom), 10px)); padding: 5px 4px max(env(safe-area-inset-bottom), 10px); display: flex; z-index: 40; background: color-mix(in srgb, var(--card) 82%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: .5px solid var(--sep); }
.tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--gray); font-size: 10px; font-weight: 500; position: relative; }
.tabbar button svg { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.tabbar button[data-tab="erp"] svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.tabbar button.active { color: var(--brand-2); }
.badge { position: absolute; top: -2px; left: calc(50% + 6px); min-width: 18px; height: 18px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-style: normal; font-weight: 600; display: none; place-items: center; padding: 0 5px; }
.badge.show { display: grid; }
.dot-live { position: absolute; top: 0; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: var(--green); display: none; border: 2px solid var(--card); }
.dot-live.show { display: block; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .35; } }


/* Sheets */
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.36); z-index: 80; animation: fade .25s; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92%; background: var(--bg); border-radius: 14px 14px 0 0; z-index: 81; display: flex; flex-direction: column; animation: up .34s cubic-bezier(.2,.8,.2,1); }
.sheet.closing { animation: down .24s ease-in forwards; } .sheet-backdrop.closing { animation: fade .24s reverse forwards; }
@keyframes up { from { transform: translateY(100%); } } @keyframes down { to { transform: translateY(100%); } } @keyframes fade { from { opacity: 0; } }
.sheet .grab { width: 36px; height: 5px; border-radius: 3px; background: var(--label-3); margin: 6px auto 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; min-height: 48px; }
.sheet-head .st { font-weight: 600; font-size: 17px; text-align: center; flex: 1; }
.sheet-head button { color: var(--brand-2); font-size: 17px; min-width: 60px; text-align: left; }
.sheet-head button.r { text-align: right; font-weight: 600; }
.sheet-body { overflow-y: auto; padding: 4px 0 34px; flex: 1; }
.sheet-actions { padding: 10px 16px 0; display: flex; gap: 10px; }

/* Forms */
.field { display: flex; align-items: center; gap: 10px; padding: 0 16px; min-height: 46px; position: relative; }
.field + .field::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: .5px solid var(--sep); }
.field label { width: 110px; flex-shrink: 0; font-size: 15px; }
.field input, .field select, .field textarea { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 16px; padding: 12px 0; text-align: right; }
.field textarea { text-align: left; resize: none; min-height: 70px; }
.field select { direction: rtl; color: var(--brand-2); cursor: pointer; }
.field select option { direction: ltr; }
.field.stack { flex-direction: column; align-items: stretch; gap: 0; padding-top: 10px; }
.field.stack label { width: auto; font-size: 13px; color: var(--label-2); }
.field.stack input, .field.stack textarea { text-align: left; padding: 6px 0 10px; }
.check { display: flex; align-items: center; gap: 12px; padding: 11px 16px; position: relative; cursor: pointer; font-size: 15px; }
.check + .check::before { content: ""; position: absolute; top: 0; left: 52px; right: 0; border-top: .5px solid var(--sep); }
.check input { display: none; }
.check .box { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--label-3); display: grid; place-items: center; flex-shrink: 0; }
.check input:checked + .box { background: var(--brand-2); border-color: var(--brand-2); }
.check input:checked + .box::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.check .cp { margin-left: auto; color: var(--label-2); font-size: 14px; }

/* Toggle */
.toggle { position: relative; width: 51px; height: 31px; flex-shrink: 0; }
.toggle input { display: none; }
.toggle span { position: absolute; inset: 0; border-radius: 16px; background: var(--fill); transition: background .2s; cursor: pointer; }
.toggle span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16); transition: transform .22s cubic-bezier(.3,.7,.4,1.2); }
.toggle input:checked + span { background: var(--green); }
.toggle input:checked + span::after { transform: translateX(20px); }
.stepper { display: inline-flex; background: var(--fill); border-radius: 8px; overflow: hidden; }
.stepper button { width: 40px; height: 30px; font-size: 18px; color: var(--label); }
.stepper button + button { border-left: .5px solid var(--sep); }

/* Scenario cards */
.scen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 16px; }
.scen { background: var(--card); border-radius: 14px; padding: 12px; text-align: left; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; min-height: 112px; }
.scen:active { transform: scale(.98); }
.scen .se { font-size: 22px; }
.scen .st { font-weight: 600; font-size: 14px; line-height: 1.2; }
.scen .sd { font-size: 11.5px; color: var(--label-2); line-height: 1.3; }
.scen[disabled] { opacity: .5; }
.run-card { margin: 0 16px; background: var(--card); border-radius: 16px; padding: 14px; box-shadow: var(--shadow); border: 1.5px solid var(--brand-2); }
.run-card .rc-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.run-card .rc-t { font-weight: 700; font-size: 15px; }
.rstep { display: flex; gap: 10px; padding: 7px 0; font-size: 13.5px; align-items: flex-start; }
.rstep .ri { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--fill); }
.rstep.done .ri { background: var(--green); } .rstep.auto .ri { background: var(--l-os); } .rstep.fail .ri { background: var(--red); }
.rstep.run .ri { background: var(--brand-2); animation: blink 1s infinite; }
.rstep.todo { color: var(--label-2); }
.rstep .rn { font-size: 12px; color: var(--label-2); margin-top: 1px; }
.ap-stats { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; padding: 4px 8px 12px; }
.ap-stats b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.ap-stats span { font-size: 11px; color: var(--label-2); }

/* ---------- Live flow monitor ---------- */
.mon { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.mon-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mon-tile { background: var(--card); border-radius: 12px; padding: 9px 11px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.mon-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--lc); }
.mon-tile span { display: block; font-size: 11.5px; font-weight: 600; color: var(--lc); }
.mon-tile b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 1px; }
.mon-tile small { font-size: 11px; color: var(--label-2); }
.mon-tile.hit { animation: tileHit 1.2s ease-out; }
@keyframes tileHit { 0% { box-shadow: 0 0 0 2px var(--lc), var(--shadow); } 100% { box-shadow: 0 0 0 0 transparent, var(--shadow); } }
.L-CRM { --lc: var(--l-crm); } .L-OS { --lc: var(--l-os); } .L-ERP { --lc: var(--l-erp); } .L-SIM { --lc: var(--l-sim); }
.mon-latest { background: var(--card); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow); font-size: 13px; line-height: 1.4; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-height: 58px; }
.mon-latest .ml-msg { flex-basis: 100%; }
.mon-latest time { margin-left: auto; font-size: 11.5px; color: var(--label-2); font-variant-numeric: tabular-nums; order: -1; }
.mon-latest.hit { animation: fadeUp .35s ease-out; }
@keyframes fadeUp { from { opacity: .3; transform: translateY(3px); } }
.ev-layer { font-size: 11px; font-weight: 700; color: var(--lc); text-transform: uppercase; letter-spacing: .04em; }
.mon-seg { margin: 0; }
.mon-pane { min-height: 0; }
.mon-pane[hidden] { display: none !important; }

/* Workflow nodes as iOS grouped lists with activity bars */
.flowmap { display: flex; flex-direction: column; gap: 14px; }
.fm-lane-h { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; padding: 0 4px 2px; }
.fm-lane-h small { font-size: 12px; font-weight: 400; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lc); flex-shrink: 0; }
.fm-lane.CRM { --lc: var(--l-crm); } .fm-lane.OS { --lc: var(--l-os); } .fm-lane.ERP { --lc: var(--l-erp); }
.fm-gt { font-size: 11.5px; text-transform: uppercase; color: var(--label-2); padding: 8px 6px 4px; letter-spacing: .02em; }
.fm-list { background: var(--card); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.fm-row { display: grid; grid-template-columns: 14px 1fr 64px 30px; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13.5px; position: relative; transition: background .6s; }
.fm-row + .fm-row::before { content: ""; position: absolute; top: 0; left: 36px; right: 0; border-top: .5px solid var(--sep); }
.fm-ic { width: 10px; height: 10px; border-radius: 3px; border: 2px solid var(--lc); justify-self: center; }
.fm-ic.dia { transform: rotate(45deg); border-radius: 1px; width: 9px; height: 9px; }
.fm-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-bar { height: 5px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.fm-bar i { display: block; height: 100%; background: var(--lc); border-radius: 3px; transition: width .5s ease; }
.fm-row b { text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; font-weight: 600; }
.fm-row.zero { color: var(--label-2); } .fm-row.zero .fm-ic { opacity: .45; }
.fm-row.hit { animation: rowHit 1.6s ease-out; }
@keyframes rowHit { 0%, 35% { background: color-mix(in srgb, var(--lc) 18%, transparent); } 100% { background: transparent; } }

/* Event stream */
.evlog { display: flex; flex-direction: column; }
.ev { position: relative; padding: 9px 12px 9px 15px; cursor: default; }
.ev.new { animation: evIn .35s ease-out; }
.ev[data-act] { cursor: pointer; }
.ev[data-act]:hover { background: var(--fill); }
.ev::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--lc); }
.ev + .ev { border-top: .5px solid var(--sep); }
@keyframes evIn { from { background: color-mix(in srgb, var(--lc) 14%, transparent); } }
.ev-top { display: flex; align-items: baseline; gap: 8px; }
.ev-lead { font-size: 12px; font-weight: 600; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--label); }
.ev-top time { margin-left: auto; font-size: 11px; color: var(--label-2); font-variant-numeric: tabular-nums; }
.ev-msg { font-size: 13px; line-height: 1.38; margin-top: 2px; }
.ev-actor { font-size: 11.5px; color: var(--label-2); margin-top: 2px; }
.ev.k-success .ev-msg::before { content: "✓ "; color: var(--green); font-weight: 700; }
.ev.k-danger .ev-msg::before { content: "✕ "; color: var(--red); font-weight: 700; }
.ev.k-warn .ev-msg::before { content: "! "; color: var(--orange); font-weight: 800; }
.ev.k-sync .ev-msg::before { content: "⇄ "; color: var(--l-os); font-weight: 700; }
.mon-pane[data-pane="events"] .evlog { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }

/* Right-hand monitor column */
.monitor-body { flex: 1; min-height: 0; display: flex; }
.monitor-body .mon { flex: 1; }
.monitor-body .mon-pane { flex: 1; overflow-y: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px 8px; }
.monitor-body .mon-pane::-webkit-scrollbar { display: none; }
/* Inline (Automate tab) monitor */
.mon-inline { margin: 0 16px; }
.mon-inline .mon-pane[data-pane="events"] { max-height: 460px; overflow-y: auto; border-radius: 12px; }

/* ---------- Kanban board ---------- */
.scroll.wide { padding-left: 0; padding-right: 0; }
.pipe-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-right: 16px; }
.pipe-head .large-title { padding-bottom: 4px; }
.pipe-head .subtitle { margin: 0; padding-bottom: 10px; }
.pipe-seg { margin: 0 0 12px; width: 180px; flex-shrink: 0; }
.board-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 10px; flex-wrap: wrap; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; padding: 6px 12px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); font-size: 13px; font-weight: 500; border: .5px solid var(--sep); }
.chip.on { background: var(--brand-2); color: #fff; border-color: transparent; }
.board-sum { display: flex; gap: 14px; font-size: 13px; color: var(--label-2); }
.board-sum b { color: var(--label); font-variant-numeric: tabular-nums; }
.board { display: flex; gap: 12px; overflow-x: auto; padding: 2px 16px 12px; scroll-snap-type: x proximity; align-items: flex-start; scrollbar-width: thin; }
.kcol { flex: 0 0 272px; scroll-snap-align: start; background: color-mix(in srgb, var(--fill) 70%, transparent); border-radius: 16px; padding: 10px 8px 8px; display: flex; flex-direction: column; transition: background .2s, opacity .2s, box-shadow .2s; border: 1.5px solid transparent; }
.kcol-h { display: flex; align-items: center; gap: 8px; padding: 0 6px; }
.kdot { width: 9px; height: 9px; border-radius: 50%; background: var(--kc, var(--gray)); flex-shrink: 0; }
.kcol-t { font-weight: 700; font-size: 14.5px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcount { font-size: 12px; font-weight: 700; min-width: 22px; height: 20px; border-radius: 10px; display: grid; place-items: center; background: var(--card); color: var(--label-2); padding: 0 6px; }
.kcol-s { font-size: 11.5px; color: var(--label-2); padding: 2px 6px 8px; display: flex; align-items: center; gap: 5px; }
.kcol-body { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.kempty { font-size: 12.5px; color: var(--label-3); text-align: center; padding: 18px 0; border: 1.5px dashed var(--sep); border-radius: 12px; }
.kcol.kc-indigo { --kc: var(--indigo); } .kcol.kc-blue { --kc: var(--blue); } .kcol.kc-teal { --kc: var(--teal); } .kcol.kc-cyan { --kc: var(--cyan); }
.kcol.kc-orange { --kc: var(--orange); } .kcol.kc-red { --kc: var(--red); } .kcol.kc-purple { --kc: var(--purple); } .kcol.kc-amber { --kc: var(--amber); }
.kcol.kc-gold { --kc: var(--gold); } .kcol.kc-pink { --kc: var(--pink); } .kcol.kc-green { --kc: var(--green); } .kcol.kc-gray { --kc: var(--gray); }
.kcard { background: var(--card); border-radius: 12px; padding: 10px 11px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 6px rgba(0,0,0,.04); cursor: grab; border-left: 3px solid var(--kc, var(--gray)); transition: transform .15s, box-shadow .15s; user-select: none; }
.kcard:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.kcard:active { cursor: grabbing; }
.kcard.mine { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--brand-2) 55%, transparent), 0 1px 6px rgba(0,0,0,.05); }
.kcard.dragging { opacity: .4; transform: scale(.98); }
.kc-top { display: flex; align-items: center; gap: 6px; }
.kc-id { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: var(--label-2); font-weight: 600; }
.kc-age { margin-left: auto; font-size: 11px; color: var(--label-2); }
.kc-name { font-size: 15px; font-weight: 600; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-sub { font-size: 12.5px; color: var(--label-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-flags { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
.kc-foot { display: flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 12px; color: var(--label-2); }
.kc-foot b { margin-left: auto; color: var(--label); font-variant-numeric: tabular-nums; font-size: 13px; }
.avatar.xs { width: 20px; height: 20px; font-size: 9px; }
.tag.t-b2b { background: rgba(10,162,192,.12); color: #0a8aa3; font-weight: 600; }
.tag.t-rep { background: var(--gold-soft); color: #a86f0f; font-weight: 600; }
.tag.t-erp { background: rgba(224,122,0,.14); color: var(--l-erp); font-weight: 700; font-size: 10px; padding: 1px 5px; }
.kcol.drop-ok { background: color-mix(in srgb, var(--green) 10%, transparent); border-color: color-mix(in srgb, var(--green) 45%, transparent); border-style: dashed; }
.kcol.drop-ok.over { background: color-mix(in srgb, var(--green) 18%, transparent); border-style: solid; }
.kcol.drop-no { opacity: .45; }
.board-hint { padding: 0 16px 10px; margin-top: -2px; }
@media (min-width: 900px) {
  .kcol-body { max-height: calc(100dvh - 270px); overflow-y: auto; scrollbar-width: none; padding: 1px; margin: -1px; }
  .kcol-body::-webkit-scrollbar { display: none; }
}
@media (max-width: 899px) { .kcol { flex-basis: 84vw; max-width: 300px; } .pipe-seg { width: 140px; } }

/* Toast */
#toast-root { position: absolute; top: calc(env(safe-area-inset-top) + 10px); left: 10px; right: 10px; max-width: 420px; margin: 0 auto; z-index: 90; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.toast { pointer-events: none; background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 18px; padding: 10px 14px; display: flex; gap: 10px; align-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.18); animation: tIn .35s cubic-bezier(.2,.8,.2,1); font-size: 13.5px; }
.toast img { width: 34px; height: 34px; border-radius: 8px; background: #fff; }
.toast b { display: block; font-size: 13px; }
.toast.out { animation: tOut .3s forwards; }
@keyframes tIn { from { transform: translateY(-120%); opacity: 0; } } @keyframes tOut { to { transform: translateY(-120%); opacity: 0; } }

.empty { text-align: center; color: var(--label-2); padding: 28px 20px; font-size: 14px; }
.empty .ei { font-size: 34px; margin-bottom: 6px; }
.muted { color: var(--label-2); }
.mt { margin-top: 12px; } .mb { margin-bottom: 12px; }
.proof-img { max-width: 100%; border-radius: 10px; margin-top: 8px; display: block; }
.splash { position: absolute; inset: 0; display: grid; place-items: center; background: #fff; z-index: 100; transition: opacity .5s; }
.splash img { width: 70%; max-width: 260px; }
.splash .sp-s { text-align: center; color: #381874; font-size: 13px; margin-top: 14px; font-weight: 500; }

/* ---------- Wide-screen adaptations ---------- */
@container (min-width: 640px) {
  .kpis { grid-template-columns: repeat(4, 1fr); }
  .scen-grid { grid-template-columns: repeat(4, 1fr); }
  .large-title { padding-top: 18px !important; }
}
@media (min-width: 900px) {
  .sheet { left: 50%; right: auto; top: 50%; bottom: auto; width: 560px; max-height: 86%; border-radius: 14px; transform: translate(-50%, -50%); animation: pop .26s cubic-bezier(.2,.8,.2,1); box-shadow: 0 30px 80px rgba(0,0,0,.3); }
  .sheet.closing { animation: popOut .2s ease-in forwards; }
  .sheet .grab { display: none; }
  .sheet-backdrop { background: rgba(0,0,0,.28); }
  .view.pushed { box-shadow: none; }
  #toast-root { left: auto; right: 16px; width: 380px; }
}
@keyframes pop { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } }
@keyframes popOut { to { opacity: 0; transform: translate(-50%, -48%) scale(.97); } }

/* ---------- Guide: help buttons ---------- */
.bb-btns { display: flex; gap: 10px; }
.icon-btn[data-act="guide"] { font-weight: 800; font-size: 17px; }
.sb-help { margin: auto 2px 12px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow); text-align: left; border: .5px solid var(--sep); }
.sb-help:hover { background: var(--brand-soft); }
.sb-help b { display: block; font-size: 14.5px; }
.sb-help small { font-size: 12px; color: var(--label-2); }
.sb-help-ic { width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: #2a1458; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.sb-foot { margin-top: 0; }

/* "What this action does" */
.what { margin-top: 12px; border-top: .5px solid var(--sep); padding-top: 8px; }
.what summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--brand-2); list-style: none; display: flex; align-items: center; gap: 6px; }
.what summary::-webkit-details-marker { display: none; }
.what summary::before { content: "ⓘ"; font-size: 14px; }
.what summary::after { content: "›"; margin-left: auto; font-size: 18px; transition: transform .2s; color: var(--label-3); }
.what[open] summary::after { transform: rotate(90deg); }
.what-row { margin-top: 9px; font-size: 13px; }
.what-row b { font-weight: 600; }
.what-row p { margin: 2px 0 0; color: var(--label-2); line-height: 1.42; }
.what-who { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--brand-2); background: var(--brand-soft); padding: 1px 7px; border-radius: 999px; }

/* ---------- Guide: spotlight tour ---------- */
.tour { position: absolute; inset: 0; z-index: 94; pointer-events: none; }
.tour-spot { position: absolute; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(10, 6, 25, .55); transition: left .3s cubic-bezier(.2,.8,.2,1), top .3s cubic-bezier(.2,.8,.2,1), width .3s, height .3s; }
.tour-spot::after { content: ""; position: absolute; inset: -3px; border-radius: 16px; border: 2px solid var(--gold); opacity: .9; }
.tour-spot.act::after { animation: ring 1.4s ease-out infinite; }
.tour-spot.center::after { display: none; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(214,158,58,.7); } 100% { box-shadow: 0 0 0 14px rgba(214,158,58,0); } }
.tour-pop { position: absolute; width: min(360px, calc(100% - 24px)); background: var(--card); color: var(--label); border-radius: 18px; padding: 16px 16px 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); pointer-events: auto; transition: left .3s cubic-bezier(.2,.8,.2,1), top .3s cubic-bezier(.2,.8,.2,1); animation: tpIn .3s ease-out; }
.tour-pop.centered { width: min(440px, calc(100% - 24px)); }
@keyframes tpIn { from { opacity: 0; transform: translateY(6px); } }
.tp-top { display: flex; justify-content: space-between; align-items: center; }
.tp-step { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-2); }
.tp-x { width: 26px; height: 26px; border-radius: 50%; background: var(--fill); color: var(--label-2); font-size: 12px; }
.tp-icon { font-size: 30px; margin-top: 8px; }
.tp-icon img { width: 52px; height: 52px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.tour-pop h3 { margin: 8px 0 6px; font-size: 18px; letter-spacing: -.01em; }
.tp-body { font-size: 14px; line-height: 1.5; color: var(--label); }
.tp-body p { margin: 0 0 8px; } .tp-body p:last-child { margin-bottom: 0; }
.tp-body ol, .tp-body ul { margin: 4px 0 6px; padding-left: 20px; } .tp-body li { margin: 3px 0; }
.tp-do { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; background: var(--gold-soft); color: var(--label); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; line-height: 1.4; }
.tp-finger { font-size: 17px; animation: nudge 1.2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(-3px); } }
.tp-progress { height: 4px; border-radius: 2px; background: var(--fill); margin-top: 14px; overflow: hidden; }
.tp-progress i { display: block; height: 100%; background: var(--brand-2); border-radius: 2px; transition: width .3s; }
.tp-btns { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.tp-btn { height: 38px; padding: 0 18px; border-radius: 11px; background: var(--brand); color: #fff; font-weight: 600; font-size: 14.5px; }
.tp-btn.sec { background: var(--fill); color: var(--brand-2); }
.tp-btn[disabled] { opacity: .5; }
.tp-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.tp-choice { text-align: left; padding: 11px 14px; border-radius: 13px; background: var(--card-2); border: .5px solid var(--sep); }
.tp-choice b { display: block; font-size: 15px; } .tp-choice span { font-size: 12.5px; color: var(--label-2); }
.tp-choice.primary { background: var(--brand); color: #fff; border-color: transparent; } .tp-choice.primary span { color: rgba(255,255,255,.75); }
.tp-choice:hover { filter: brightness(1.04); }

/* ---------- Guide: help centre ---------- */
@media (min-width: 900px) { .sheet.help-sheet { width: 680px; } }
.help-hero { text-align: center; padding: 4px 24px 14px; }
.help-hero img { width: 170px; background: #fff; border-radius: 12px; padding: 8px 12px; box-shadow: var(--shadow); }
.help-hero p { color: var(--label-2); font-size: 14px; margin: 10px 0 0; }
.help-starts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 16px 14px; }
.hstart { background: var(--card); border-radius: 14px; padding: 12px; text-align: left; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 3px; border: 1.5px solid transparent; }
.hstart:hover { border-color: var(--brand-2); }
.hstart span { font-size: 22px; } .hstart b { font-size: 14.5px; } .hstart small { font-size: 12px; color: var(--label-2); line-height: 1.3; }
@media (max-width: 600px) { .help-starts { grid-template-columns: 1fr; } .hstart { flex-direction: row; align-items: center; gap: 10px; } .hstart small { margin-left: auto; text-align: right; max-width: 45%; } }
.help-search { margin: 0 16px 12px; }
.hlist { margin: 0 16px; background: var(--card); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.hsec + .hsec { border-top: .5px solid var(--sep); }
.hsec summary { padding: 13px 16px; font-size: 15.5px; font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; }
.hsec summary::-webkit-details-marker { display: none; }
.hsec summary::after { content: "›"; margin-left: auto; font-size: 20px; color: var(--label-3); transition: transform .2s; }
.hsec[open] summary::after { transform: rotate(90deg); }
.hbody { padding: 0 16px 14px; font-size: 13.5px; line-height: 1.5; }
.hbody p { margin: 4px 0 8px; } .hbody ul { margin: 4px 0 8px; padding-left: 18px; } .hbody li { margin: 3px 0; }
.hrow { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: .5px solid var(--sep); }
.hrow:first-child { border-top: 0; }
.hrow > .pill { flex-shrink: 0; min-width: 104px; justify-content: center; margin-top: 2px; }
.hrow p { margin: 1px 0 0; color: var(--label-2); }
.hk { flex-shrink: 0; min-width: 132px; font-weight: 600; }
.hdot { width: 10px; height: 10px; border-radius: 50%; background: var(--lc); margin-top: 5px; flex-shrink: 0; }
.hflow { background: var(--card-2); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.6; }