/* Extracted from docs/pro/dashboard.html (Rock 4 Phase 2 continuation).
   Load order matters: this file replaces the inline <style> block that sat
   at the same position in <head>; keep the <link> tags in dashboard.html in
   their original slots relative to theme-system.css and each other. */
/* ── BRIDGE: v5 body class → DS CSS variables ───────────────
   Any time body has a theme class, sync DS vars from v5 vars.
   --orange → --ac, --t → text, --m → --muted, etc.

   NOTE (2026-05-04): --paper and --ink are NO LONGER fixed at body
   level. Theme Engine now derives them per-theme at :root level so
   kanban cards true-theme correctly across light + dark themes.
   The previous body-level hardcode (#f5f3ef / #1a1a1a) shadowed the
   per-theme values for every descendant element — a silent override
   that caused all kanban cards to look identical regardless of theme. */
body {
  --ac:         var(--orange, var(--orange));
  --gold:       var(--orange-h, #f59e0b);
  --muted:      var(--m, #8a9ab0);
  --bar:        var(--s, var(--s));
  --tabbar:     var(--s2, var(--s2));
  --taboff:     var(--s, var(--s));
  --tt:         var(--m, #7a98c0);
  --tb:         var(--s3, var(--s3));
  --sbg:        var(--s2, var(--s2));
  --stxt:       var(--t, #ccd);
  --mbg:        var(--paper, #f5f3ef);
  --grn:        #22c55e;
  --blu:        var(--blue);
  --pur:        #5a2a7e;
  --shad:       0 2px 20px rgba(0,0,0,.55);
}

/* Legacy body.theme-X overrides retained as no-op to avoid breaking any
   selector that still chains off these — but the actual --paper/--ink
   values now come from the per-theme :root[data-theme="X"] declaration. */
body.theme-typewriter,
body.theme-ink,
body.theme-brutalist,
body.theme-stormtrooper,
body.theme-lofi,
body.theme-sakura,
body.theme-easter,
body.theme-frosted {
  --bar:   var(--s2, #e8e0d0);
  --tabbar:var(--s3, #ddd5c0);
  --taboff:var(--s, #e8e0d0);
  --shad:  0 2px 12px rgba(0,0,0,.1);
}

/* ── PICKER MODAL STYLES ─────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════
   NBD UNIFIED APPEARANCE ENGINE — CSS
   Shared by: pro/dashboard.html + pro/daily-success/index.html
   ═══════════════════════════════════════════════════════════════════ */

/* ── PICKER MODAL ──────────────────────────────────────────────────── */
#nbd-picker-modal {
  position: fixed; top:0;right:0;bottom:0;left:0; z-index: 2000;
  background: rgba(0,0,0,.75); -webkit-backdrop-filter:blur(20px);backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 16px;
}
#nbd-picker-modal.open { display: flex; }
#nbd-picker-inner {
  background: #0d1017; border: 1px solid #1e2530; border-radius: 12px;
  width: 100%; max-width: 860px; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.7); font-family: 'DM Mono', monospace;
}
.npm-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #1e2530; flex-shrink: 0; }
.npm-title { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; letter-spacing: .1em; color: var(--t); }
.npm-subtitle { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .15em; color: #5a6478; margin-top: 2px; }
.npm-close { background: rgba(255,255,255,.07); border: 1px solid #2a3040; border-radius: 6px; color: #8a93a8; font-size: 16px; width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .15s; }
.npm-close:hover { color:var(--t); border-color: #556; }
.npm-tabs { display: flex; border-bottom: 1px solid #1e2530; flex-shrink: 0; padding: 0 12px; gap: 2px; }
.npm-tab { padding: 8px 14px; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #5a6478; cursor: pointer; border-bottom: 2px solid transparent; transition: .15s; background: none; border-left: none; border-right: none; border-top: none; }
.npm-tab.on { color: var(--orange, var(--orange)); border-bottom-color: var(--orange, var(--orange)); }
.npm-tab:hover:not(.on) { color: #8a93a8; }
.npm-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.npm-panel { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.npm-panel.on { display: flex; }
.npm-controls { padding: 10px 12px; border-bottom: 1px solid #1e2530; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex-shrink: 0; }
.npm-search { flex: 1; min-width: 140px; background: #13171d; border: 1px solid #2a3040; border-radius: 6px; padding: 7px 10px; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--t); outline: none; }
.npm-search:focus { border-color: var(--orange, var(--orange)); }
.npm-search::placeholder { color: #5a6478; }
.npm-rnd { background: #13171d; border: 1px solid #2a3040; border-radius: 6px; padding: 7px 11px; font-family: 'DM Mono', monospace; font-size: 10px; color: #8a93a8; cursor: pointer; white-space: nowrap; transition: .15s; }
.npm-rnd:hover { color: var(--orange, var(--orange)); border-color: var(--orange, var(--orange)); }
.npm-cats { padding: 8px 12px; display: flex; gap: 5px; overflow-x: auto; flex-shrink: 0; border-bottom: 1px solid #1e2530; scrollbar-width: none; }
.npm-cats::-webkit-scrollbar { display: none; }
.npm-cat { flex-shrink: 0; padding: 4px 11px; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; background: none; border: 1px solid #2a3040; border-radius: 20px; color: #8a93a8; cursor: pointer; transition: .15s; }
.npm-cat.on { background: var(--orange, var(--orange)); border-color: var(--orange, var(--orange)); color: #000; }
.npm-cat:hover:not(.on) { border-color: var(--orange, var(--orange)); color: var(--t); }
.npm-grid { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; }
.npm-grid::-webkit-scrollbar { width: 3px; }
.npm-grid::-webkit-scrollbar-thumb { background: #2a3040; border-radius: 2px; }
.npm-bubble { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 7px; border-radius: 20px; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .15s, filter .15s; white-space: nowrap; flex-shrink: 0; position: relative; }
.npm-bubble:hover { transform: translateY(-2px); filter: brightness(1.15); }
.npm-bubble.active { box-shadow: 0 0 0 2.5px #fff, 0 4px 22px rgba(0,0,0,.6) !important; filter: brightness(1.1); }
.npm-bubble.locked { opacity: .4; cursor: default; }
.npm-bubble.locked:hover { transform: none; filter: none; }
.npm-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.npm-lbl { font-family: 'Barlow Condensed', 'DM Mono', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .4px; line-height: 1; }
.npm-star { font-size: 9px; margin-left: 1px; }
.npm-lock-overlay { position: absolute; top:0;right:0;bottom:0;left:0; border-radius: 20px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.78); opacity: 0; transition: .18s; z-index: 5; font-size: 10px; }
.npm-bubble.locked:hover .npm-lock-overlay { opacity: 1; }
.npm-activedot { width: 5px; height: 5px; border-radius: 50%; background: #fff; flex-shrink: 0; display: none; box-shadow: 0 0 4px rgba(255,255,255,.9); }
.npm-bubble.active .npm-activedot { display: block; }
.npm-fonts { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.npm-font-card { background: #0e1218; border: 1.5px solid #1e2530; border-radius: 8px; padding: 12px 14px; cursor: pointer; transition: .2s; }
.npm-font-card:hover { border-color: var(--orange, var(--orange)); background: #12181e; }
.npm-font-card.active { border-color: var(--orange, var(--orange)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--orange) 20%, transparent); }
.npm-font-head { font-size: 9px; color: var(--orange, var(--orange)); letter-spacing: .5px; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.npm-font-check { width: 8px; height: 8px; border-radius: 50%; background: var(--orange, var(--orange)); display: none; }
.npm-font-card.active .npm-font-check { display: block; }
.npm-font-display { font-size: 20px; font-weight: 700; letter-spacing: 1px; color: var(--t); margin-bottom: 3px; line-height: 1.1; }
.npm-font-body { font-size: 11px; color: #8a93a8; line-height: 1.5; }
.npm-font-mono { font-size: 9px; color: #5a6478; margin-top: 4px; letter-spacing: .3px; }
.npm-custom { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.npm-custom-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media(max-width:520px) { .npm-custom-row { grid-template-columns: repeat(3,1fr); } }
.npm-custom-field label { display: block; font-size: 9px; letter-spacing: .1em; color: #8a93a8; margin-bottom: 5px; text-transform: uppercase; }
.npm-cp { width: 100%; height: 40px; border: 1px solid #2a3040; border-radius: 6px; cursor: pointer; background: none; padding: 2px; }
.npm-custom-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.npm-btn-apply { padding: 9px 18px; background: var(--orange, var(--orange)); color: #000; border: none; border-radius: 6px; font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .08em; cursor: pointer; transition: .15s; }
.npm-btn-apply:hover { filter: brightness(1.1); }
.npm-btn-save { padding: 9px 18px; background: #13171d; color: #8a93a8; border: 1px solid #2a3040; border-radius: 6px; font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .08em; cursor: pointer; transition: .15s; }
.npm-btn-save:hover { color: var(--t); border-color: var(--orange, var(--orange)); }
.npm-foot { padding: 10px 16px; border-top: 1px solid #1e2530; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.npm-active-lbl { font-size: 9px; color: #5a6478; letter-spacing: .1em; }
.npm-active-lbl strong { color: var(--orange, var(--orange)); }
.npm-copy-btn { padding: 5px 12px; background: #13171d; border: 1px solid #2a3040; border-radius: 5px; color: #8a93a8; font-family: 'DM Mono', monospace; font-size: 9px; cursor: pointer; transition: .15s; }
.npm-copy-btn:hover { color: var(--orange, var(--orange)); border-color: var(--orange, var(--orange)); }

/* ── HOW-TO MODAL ──────────────────────────────────────────────────── */
#nbd-howto-modal { position: fixed; top:0;right:0;bottom:0;left:0; z-index: 2100; background: rgba(0,0,0,.8); -webkit-backdrop-filter:blur(20px);backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
#nbd-howto-modal.open { display: flex; }
#nbd-howto-modal > div { max-height: 90vh; max-height: 90dvh; overflow-y: auto; }
.nhm-inner { background: #0d1017; border: 1px solid #1e2530; border-radius: 12px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; padding: 20px; font-family: 'DM Mono', monospace; box-shadow: 0 24px 80px rgba(0,0,0,.7); }
.nhm-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.nhm-title { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; letter-spacing: .1em; color: var(--t); }
.nhm-sub { font-size: 9px; color: #5a6478; letter-spacing: .12em; margin-top: 2px; }
.nhm-close { background: rgba(255,255,255,.07); border: 1px solid #2a3040; border-radius: 6px; color: #8a93a8; font-size: 14px; width: 28px; height: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: .15s; }
.nhm-close:hover { color:var(--t); }
.nhm-section { margin-bottom: 14px; }
.nhm-section-title { font-size: 9px; color: var(--orange, var(--orange)); letter-spacing: .15em; text-transform: uppercase; margin-bottom: 8px; }
.nhm-step { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 6px; }
.nhm-num { width: 18px; height: 18px; border-radius: 50%; background: var(--orange, var(--orange)); color: #000; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.nhm-step-text { font-size: 10px; color: #8a93a8; line-height: 1.6; }
.nhm-step-text strong { color: var(--t); }
.nhm-tip { background: #0e1218; border: 1px solid #1e2530; border-radius: 6px; padding: 10px 12px; font-size: 9px; color: #8a93a8; line-height: 1.7; margin-top: 8px; }

/* ── TOAST ─────────────────────────────────────────────────────────── */
.nbd-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px); background: #1e2530; border: 1px solid #2a3040; border-radius: 8px; padding: 9px 18px; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--t); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 9999; }
.nbd-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══ DOOR-TO-DOOR TRACKER ══════════════════════════════════════════════ */
#view-d2d { display:none; flex-direction:column; height:100%; }
#view-d2d.active { display:flex; }
#d2dMap { background:var(--bg); border-bottom:2px solid var(--br); }
.d2d-modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); z-index:9999; display:flex; align-items:flex-end; justify-content:center; opacity:0; transition:opacity .2s ease; pointer-events:none; }
.d2d-modal-overlay.open { opacity:1; pointer-events:auto; }
.d2d-modal { background:var(--s); border-radius:20px 20px 0 0; width:100%; max-width:520px; max-height:88vh; overflow-y:auto; padding:20px; transform:translateY(100%); transition:transform .25s cubic-bezier(.32,.72,0,1); }
.d2d-modal-overlay.open .d2d-modal { transform:translateY(0); }
.d2d-modal-hdr { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.d2d-modal-title { font-size:17px; font-weight:800; color:var(--t); font-family:'Barlow Condensed',sans-serif; letter-spacing:.02em; }
.d2d-modal-close { background:none; border:none; color:var(--m); font-size:26px; cursor:pointer; padding:0 4px; line-height:1; }
.d2d-dispo-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:12px 0; }
.d2d-dispo-btn { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 6px; border-radius:10px; border:2px solid var(--br); background:var(--s2); cursor:pointer; transition:all .15s; }
.d2d-dispo-btn:hover { border-color:var(--dc); background:color-mix(in srgb, var(--dc) 10%, var(--s2)); }
.d2d-dispo-btn.selected { border-color:var(--dc); background:color-mix(in srgb, var(--dc) 20%, var(--s2)); box-shadow:0 0 12px color-mix(in srgb, var(--dc) 30%, transparent); }
.d2d-dispo-icon { font-size:20px; }
.d2d-dispo-label { font-size:10px; font-weight:700; color:var(--t); text-align:center; line-height:1.2; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.04em; }
.d2d-input { width:100%; padding:10px 12px; background:var(--s2); border:1px solid var(--br); border-radius:8px; color:var(--t); font-size:13px; font-family:'Barlow',sans-serif; outline:none; box-sizing:border-box; }
.d2d-input:focus { border-color:var(--orange); }
.d2d-textarea { resize:vertical; min-height:48px; }
.d2d-field { margin-bottom:10px; }
.d2d-field-row { display:flex; gap:8px; }
.d2d-save-btn { width:100%; padding:14px; border:none; border-radius:10px; background:var(--br); color:var(--t); font-size:14px; font-weight:700; font-family:'Barlow Condensed',sans-serif; letter-spacing:.04em; cursor:pointer; transition:all .15s; margin-top:10px; text-transform:uppercase; }
.d2d-save-btn:not(:disabled):hover { filter:brightness(1.1); }
.d2d-save-btn:disabled { opacity:.5; cursor:not-allowed; }
.d2d-details { margin:8px 0; border:1px solid var(--br); border-radius:8px; overflow:hidden; }
.d2d-details-summary, .d2d-details > summary { padding:10px 14px; cursor:pointer; font-size:12px; font-weight:600; color:var(--m); background:var(--s2); list-style:none; }
.d2d-details-summary::-webkit-details-marker, .d2d-details > summary::-webkit-details-marker { display:none; }
.d2d-extras-body { padding:12px; }
.d2d-revenue-banner { background:color-mix(in srgb, var(--orange,var(--orange)) 18%, var(--s2,#1a1a2e)); border:1px solid color-mix(in srgb, var(--orange,var(--orange)) 25%, var(--br,rgba(255,255,255,.08))); border-radius:10px; padding:10px 14px; margin-bottom:10px; text-align:left; }
.d2d-revenue-amount { font-size:18px; font-weight:800; color:var(--orange,var(--orange)); font-family:'Barlow Condensed',sans-serif; line-height:1.1; }
.d2d-revenue-label { font-size:10px; color:var(--m,#9ca3af); font-weight:600; margin-top:1px; text-transform:uppercase; letter-spacing:.08em; }
.d2d-funnel { display:flex; align-items:center; gap:0; margin:14px 0; overflow:hidden; border-radius:8px; }
.d2d-funnel-step { padding:8px 4px; text-align:center; transition:all .2s; min-width:0; }
.d2d-funnel-count { font-size:16px; font-weight:900; color:var(--t); font-family:'Barlow Condensed',sans-serif; }
.d2d-funnel-label { font-size:9px; color:rgba(255,255,255,.8); font-weight:600; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.d2d-action-bar { display:flex; gap:10px; align-items:center; margin-bottom:14px; padding-top:14px; }
.d2d-big-btn { display:flex; align-items:center; gap:8px; padding:12px 18px; background:var(--orange); color:var(--accent-fg); border:none; border-radius:10px; font-size:14px; font-weight:700; font-family:'Barlow Condensed',sans-serif; cursor:pointer; letter-spacing:.03em; text-transform:uppercase; transition:all .15s; white-space:nowrap; }
.d2d-big-btn:hover { filter:brightness(1.1); }
.d2d-big-btn-sec { background:var(--s2); color:var(--t); border:1px solid var(--br); }
.d2d-big-btn-sec:hover { background:var(--br); }
.d2d-streak { text-align:center; margin-left:auto; padding:4px 10px; background:var(--s2); border-radius:8px; border:1px solid var(--br); }
.d2d-streak-num { font-size:16px; font-weight:800; color:var(--orange); font-family:'Barlow Condensed',sans-serif; line-height:1; }
.d2d-streak-lbl { font-size:8px; color:var(--m); font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.d2d-followups-banner { background:color-mix(in srgb, var(--gold) 12%, var(--s2)); border:1px solid color-mix(in srgb, var(--gold) 30%, var(--br)); border-radius:10px; padding:12px; margin-bottom:14px; }
.d2d-followups-title { font-size:13px; font-weight:700; color:var(--gold); margin-bottom:8px; }
.d2d-followups-list { display:flex; flex-direction:column; gap:4px; }
.d2d-followup-item { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; cursor:pointer; transition:background .15s; }
.d2d-followup-item:hover { background:rgba(255,255,255,.05); }
.d2d-metrics-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:14px; }
.d2d-metric-card { background:var(--s2); border:1px solid var(--br); border-radius:10px; padding:12px 10px; text-align:center; }
.d2d-metric-val { font-size:22px; font-weight:900; color:var(--t); font-family:'Barlow Condensed',sans-serif; line-height:1.1; }
.d2d-metric-lbl { font-size:10px; color:var(--m); font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-top:3px; }
.d2d-leaderboard { background:var(--s2); border:1px solid var(--br); border-radius:10px; padding:12px; margin-bottom:14px; }
.d2d-lb-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--m); margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; }
.d2d-lb-row { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--br); }
.d2d-lb-row:last-child { border-bottom:none; }
.d2d-lb-rank { font-size:14px; font-weight:900; color:var(--orange); width:24px; text-align:center; font-family:'Barlow Condensed',sans-serif; }
.d2d-lb-avatar { width:28px; height:28px; border-radius:50%; background:var(--br); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--t); }
.d2d-lb-name { flex:1; font-size:12px; font-weight:600; color:var(--t); }
.d2d-lb-stat { font-size:13px; font-weight:800; color:var(--green); font-family:'Barlow Condensed',sans-serif; }
.d2d-dispo-bar-wrap { margin-bottom:14px; }
.d2d-dispo-bar-header { display:flex; justify-content:space-between; margin-bottom:6px; }
.d2d-dispo-bar { display:flex; height:8px; border-radius:4px; overflow:hidden; background:var(--br); }
.d2d-dispo-legend { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.d2d-legend-item { display:flex; align-items:center; gap:4px; font-size:10px; color:var(--m); font-weight:600; }
.d2d-feed-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-wrap:wrap; gap:8px; }
.d2d-date-pills { display:flex; gap:4px; }
.d2d-pill { padding:5px 12px; border-radius:20px; border:1px solid var(--br); background:var(--s2); color:var(--m); font-size:11px; font-weight:600; cursor:pointer; transition:all .15s; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.04em; }
.d2d-pill.active { background:var(--orange); color:var(--accent-fg); border-color:var(--orange); }
.d2d-select { padding:5px 10px; background:var(--s2); border:1px solid var(--br); border-radius:8px; color:var(--t); font-size:11px; cursor:pointer; }
.d2d-knock-feed { display:flex; flex-direction:column; gap:4px; }
.d2d-knock-card { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--s2); border:1px solid var(--br); border-radius:8px; cursor:pointer; transition:all .15s; }
.d2d-knock-card:hover { border-color:var(--orange); }
.d2d-knock-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.d2d-knock-body { flex:1; min-width:0; }
.d2d-knock-addr { font-size:13px; font-weight:700; color:var(--t); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.d2d-knock-meta { font-size:11px; color:var(--m); margin-top:1px; }
.d2d-knock-time { font-size:11px; color:var(--m); white-space:nowrap; flex-shrink:0; }
.d2d-knock-attempt { font-size:10px; font-weight:800; padding:2px 6px; border-radius:4px; background:var(--br); color:var(--t); font-family:'Barlow Condensed',sans-serif; white-space:nowrap; flex-shrink:0; }
.d2d-knock-attempt.warning { background:color-mix(in srgb, var(--red) 20%, var(--s2)); color:var(--red); }
.d2d-action-btn { display:inline-flex; align-items:center; gap:4px; padding:8px 14px; border:none; border-radius:6px; color:#fff; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; font-family:'Barlow Condensed',sans-serif; }
.d2d-action-btn:hover { filter:brightness(1.15); }
.d2d-empty { text-align:center; padding:40px 20px; }
.d2d-center-btn { position:absolute; bottom:16px; right:16px; z-index:1000; width:40px; height:40px; border-radius:50%; background:var(--s); border:2px solid var(--br); color:var(--t); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.3); transition:all .15s; }
.d2d-center-btn:hover { background:var(--orange); color:var(--accent-fg); border-color:var(--orange); }
.d2d-team-toggle { display:flex; align-items:center; gap:6px; padding:6px 12px; background:var(--s2); border:1px solid var(--br); border-radius:8px; cursor:pointer; font-size:11px; color:var(--m); font-weight:600; transition:all .15s; }
.d2d-team-toggle.active { background:color-mix(in srgb, var(--blue) 20%, var(--s2)); border-color:var(--blue); color:var(--blue); }
.d2d-location-pulse { width:16px; height:16px; border-radius:50%; background:var(--blue); border:3px solid #fff; box-shadow:0 0 0 0 rgba(74,158,255,.4); animation:d2dPulse 2s infinite; }
@keyframes d2dPulse { 0%{box-shadow:0 0 0 0 rgba(74,158,255,.4)} 70%{box-shadow:0 0 0 16px rgba(74,158,255,0)} 100%{box-shadow:0 0 0 0 rgba(74,158,255,0)} }
/* ── D2D Tablet (≤768px) ────────────────────────── */
@media(max-width:768px) {
  #d2dMap { height:38vh; min-height:200px; }
  .d2d-modal { border-radius:16px 16px 0 0; padding:16px; max-height:92vh; }
  .d2d-dispo-grid { grid-template-columns:repeat(3, 1fr); gap:6px; }
  .d2d-dispo-btn { padding:12px 6px; min-height:44px; }
  .d2d-dispo-icon { font-size:18px; }
  .d2d-dispo-label { font-size:10px; }
  .d2d-metrics-grid { grid-template-columns:repeat(2, 1fr); }
  .d2d-action-bar { flex-wrap:wrap; }
  .d2d-funnel-label { font-size:10px; }
  .d2d-revenue-amount { font-size:24px; }
  .d2d-input { padding:12px 14px; font-size:16px; }
  .d2d-save-btn { padding:16px; font-size:16px; min-height:52px; }
  .d2d-pill { padding:8px 14px; font-size:12px; min-height:36px; }
  .d2d-select { padding:10px 14px; font-size:14px; min-height:44px; }
  .d2d-knock-card { padding:14px; gap:12px; }
  .d2d-knock-addr { font-size:14px; }
  .d2d-knock-meta { font-size:12px; }
  .d2d-action-btn { padding:12px 16px; font-size:13px; min-height:44px; }
  .d2d-details-summary, .d2d-details > summary { padding:14px 16px; font-size:14px; min-height:48px; }
  .d2d-modal-close { font-size:32px; padding:4px 8px; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; }
  .d2d-modal-title { font-size:18px; }
  .d2d-modal-body { max-height:calc(100vh - 100px); max-height:calc(100dvh - 100px - env(safe-area-inset-bottom,0px)); padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
  .d2d-route-stop { padding:12px 14px; min-height:48px; }
  .d2d-route-addr { font-size:14px; }
  .d2d-door-chip { width:28px; height:28px; font-size:9px; }
  .d2d-streak-days { font-size:32px; }
  .d2d-challenge-card { padding:14px; }
  .d2d-challenge-label { font-size:14px; }
  .d2d-progress-track { height:8px; }
  .d2d-detail-grid { gap:12px; }
  .d2d-detail-value { font-size:15px; }
  .d2d-detail-actions .d2d-action-btn { min-height:48px; font-size:14px; }
  .d2d-history-item { padding:12px; }
  .d2d-photo-thumb { width:90px; height:90px; }
  .d2d-hood-row { padding:12px; }
  .d2d-ins-row { padding:12px; font-size:13px; }
  .d2d-hourly-chart { height:80px; }
  .d2d-textarea { font-size:16px; min-height:100px; }
  .d2d-input { font-size:16px; padding:12px 14px; }
  .d2d-field-label { font-size:13px; }
}
/* ── D2D Mobile (≤480px) ────────────────────────── */
@media(max-width:480px) {
  #d2dMap { height:32vh; min-height:180px; }
  .d2d-modal { max-width:100%; max-height:95vh; border-radius:14px 14px 0 0; padding:14px; padding-bottom:env(safe-area-inset-bottom, 14px); }
  .d2d-dispo-grid { grid-template-columns:repeat(2, 1fr); gap:8px; }
  .d2d-dispo-btn { padding:14px 8px; min-height:52px; }
  .d2d-dispo-icon { font-size:22px; }
  .d2d-dispo-label { font-size:11px; }
  .d2d-metrics-grid { grid-template-columns:repeat(2, 1fr); gap:6px; }
  .d2d-metric-card { padding:10px 8px; }
  .d2d-metric-val { font-size:20px; }
  .d2d-metric-lbl { font-size:10px; }
  .d2d-revenue-amount { font-size:22px; }
  .d2d-revenue-label { font-size:11px; }
  .d2d-input { padding:14px 16px; font-size:16px; border-radius:10px; }
  .d2d-save-btn { padding:18px; font-size:17px; min-height:56px; border-radius:12px; }
  .d2d-pill { padding:10px 16px; font-size:13px; min-height:40px; }
  .d2d-select { padding:12px 16px; font-size:16px; min-height:48px; border-radius:10px; width:100%; }
  .d2d-knock-card { padding:14px 12px; border-radius:10px; }
  .d2d-knock-addr { font-size:15px; }
  .d2d-knock-meta { font-size:12px; margin-top:3px; }
  .d2d-knock-time { font-size:12px; }
  .d2d-action-btn { padding:14px 18px; font-size:14px; min-height:48px; border-radius:8px; flex:1; justify-content:center; }
  .d2d-big-btn { padding:14px 20px; font-size:15px; min-height:48px; }
  .d2d-big-btn-sec { padding:14px 16px; font-size:13px; min-height:48px; }
  .d2d-details-summary, .d2d-details > summary { padding:16px; font-size:15px; min-height:52px; }
  .d2d-followup-item { padding:12px 10px; min-height:48px; }
  .d2d-center-btn { width:48px; height:48px; font-size:20px; }
  .d2d-funnel-count { font-size:14px; }
  .d2d-funnel-label { font-size:9px; }
  .d2d-modal-close { font-size:36px; min-width:48px; min-height:48px; }
  .d2d-modal-body { max-height:calc(100vh - 80px); max-height:calc(100dvh - 80px - env(safe-area-inset-bottom,0px)); padding:14px; padding-bottom:calc(14px + env(safe-area-inset-bottom,14px)); }
  .d2d-detail-grid { grid-template-columns:1fr; gap:10px; }
  .d2d-detail-value { font-size:16px; }
  .d2d-detail-actions { flex-direction:column; }
  .d2d-detail-actions .d2d-action-btn { min-width:100%; min-height:52px; font-size:15px; }
  .d2d-route-stop { padding:14px; min-height:52px; }
  .d2d-route-num { width:32px; height:32px; font-size:14px; }
  .d2d-route-addr { font-size:15px; }
  .d2d-door-chip { width:32px; height:32px; font-size:10px; border-radius:6px; }
  .d2d-streak-days { font-size:28px; }
  .d2d-streak-badge { font-size:56px; }
  .d2d-challenge-card { padding:14px; }
  .d2d-challenge-label { font-size:15px; }
  .d2d-progress-track { height:8px; }
  .d2d-projection-grid { grid-template-columns:1fr 1fr 1fr; gap:6px; }
  .d2d-golden-hours { font-size:14px; padding:14px; }
  .d2d-hourly-chart { height:90px; gap:3px; }
  .d2d-hour-lbl { font-size:10px; }
  .d2d-ins-row { padding:12px 14px; }
  .d2d-ins-name { font-size:13px; }
  .d2d-hood-score { width:44px; height:44px; font-size:14px; }
  .d2d-photo-thumb { width:100px; height:100px; border-radius:10px; }
  .d2d-history-item { padding:14px; border-radius:10px; }
  .d2d-history-dispo { font-size:14px; }
  .d2d-textarea { font-size:16px; min-height:100px; padding:14px 16px; border-radius:10px; }
  .d2d-input { font-size:16px; padding:14px 16px; border-radius:10px; }
  .d2d-field-label { font-size:14px; margin-bottom:6px; }
  .d2d-media-btns { gap:10px; }
  .d2d-media-btns .d2d-action-btn { min-height:48px; font-size:14px; }
  .d2d-field-row { flex-direction:column; gap:0; }
}
/* ── D2D Small phone (≤360px) ──────────────────── */
@media(max-width:360px) {
  .d2d-dispo-grid { grid-template-columns:repeat(2, 1fr); gap:6px; }
  .d2d-metric-val { font-size:18px; }
  .d2d-revenue-amount { font-size:20px; }
  .d2d-big-btn { padding:12px 14px; font-size:14px; }
  .d2d-streak-days { font-size:24px; }
  .d2d-projection-grid { grid-template-columns:1fr; gap:6px; }
  .d2d-door-chip { width:28px; height:28px; }
}
/* ── D2D Landscape ─────────────────────────────── */
@media(max-height:500px) and (orientation:landscape) {
  #d2dMap { height:25vh; min-height:120px; }
  .d2d-modal { max-height:98vh; }
  .d2d-dispo-grid { grid-template-columns:repeat(4, 1fr); gap:4px; }
  .d2d-dispo-btn { padding:8px 4px; min-height:40px; }
  .d2d-dispo-icon { font-size:16px; }
  .d2d-dispo-label { font-size:9px; }
}
/* ── D2D shared helpers ───────────────────────── */
.d2d-section-title { font-weight:700; font-size:13px; color:var(--t); margin-bottom:8px; font-family:'Barlow Condensed',sans-serif; letter-spacing:.03em; text-transform:uppercase; }
.d2d-field-label { font-size:12px; color:var(--m); margin-bottom:4px; display:block; font-weight:600; }
.d2d-modal-body { padding:14px; padding-bottom:calc(14px + env(safe-area-inset-bottom,0px)); overflow-y:auto; max-height:calc(100vh - 120px); max-height:calc(100dvh - 120px - env(safe-area-inset-bottom,0px)); -webkit-overflow-scrolling:touch; }
.d2d-textarea { width:100%; min-height:80px; padding:12px 14px; font-size:14px; border:1px solid var(--br); border-radius:8px; background:var(--s); color:var(--t); font-family:'Barlow',sans-serif; resize:vertical; }
.d2d-ins-section { display:none; margin-top:12px; padding:12px; background:var(--s2); border:1px solid var(--br); border-radius:8px; }
.d2d-media-btns { display:flex; gap:8px; margin-top:10px; }
.d2d-input { width:100%; padding:12px 14px; font-size:14px; border:1px solid var(--br); border-radius:8px; background:var(--s); color:var(--t); }
/* ── D2D Routes ──────────────────────────────── */
.d2d-routes-section { margin-bottom:14px; }
.d2d-route-actions { display:flex; gap:8px; margin-bottom:12px; }
.d2d-route-list { display:flex; flex-direction:column; gap:4px; }
.d2d-route-stop { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--s2); border:1px solid var(--br); border-radius:8px; cursor:pointer; transition:all .15s; }
.d2d-route-stop:hover { border-color:var(--orange); }
.d2d-route-num { width:28px; height:28px; background:var(--blue); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; font-family:'Barlow Condensed',sans-serif; flex-shrink:0; }
.d2d-route-addr { flex:1; color:var(--t); font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.d2d-route-icon { font-size:16px; flex-shrink:0; }
.d2d-streets-section { margin-top:14px; }
.d2d-street-card { padding:12px; background:var(--s2); border:1px solid var(--br); border-radius:10px; margin-bottom:8px; }
.d2d-street-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.d2d-street-name { font-weight:700; font-size:13px; color:var(--t); text-transform:capitalize; }
.d2d-street-stat { font-size:11px; color:var(--m); font-weight:600; }
.d2d-street-doors { display:flex; gap:4px; flex-wrap:wrap; }
.d2d-door-chip { width:24px; height:24px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:8px; color:white; font-weight:700; cursor:pointer; transition:transform .1s; }
.d2d-door-chip:active { transform:scale(1.15); }
/* ── D2D Gamify ──────────────────────────────── */
.d2d-streak-hero { text-align:center; padding:16px; margin-bottom:14px; }
.d2d-streak-badge { font-size:52px; line-height:1; }
.d2d-streak-days { font-size:36px; font-weight:900; color:var(--t); font-family:'Barlow Condensed',sans-serif; margin-top:4px; }
.d2d-streak-sub { color:var(--m); font-size:13px; margin-top:2px; }
.d2d-streak-next { color:var(--m); font-size:11px; margin-top:6px; }
.d2d-challenges { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.d2d-challenge-card { padding:12px; background:var(--s2); border:1px solid var(--br); border-radius:10px; }
.d2d-challenge-done { border-color:var(--green); }
.d2d-challenge-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.d2d-challenge-label { font-weight:700; font-size:13px; color:var(--t); }
.d2d-challenge-progress { font-size:12px; font-weight:700; }
.d2d-progress-track { height:6px; background:var(--br); border-radius:3px; overflow:hidden; }
.d2d-progress-fill { height:100%; border-radius:3px; transition:width .3s ease; }
.d2d-projection-card { padding:14px; background:linear-gradient(135deg,var(--s2),var(--s)); border:1px solid var(--br); border-radius:10px; margin-top:14px; }
.d2d-projection-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
/* ── D2D Analytics ───────────────────────────── */
.d2d-golden-hours { background:var(--s2); padding:12px; border-radius:8px; margin-bottom:14px; text-align:center; color:var(--t); font-size:13px; border:1px solid var(--br); }
.d2d-hourly-chart { display:flex; gap:2px; height:70px; align-items:flex-end; margin-bottom:4px; }
.d2d-hour-col { flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
.d2d-hour-bar { background:var(--blue, var(--blue)); border-radius:3px 3px 0 0; position:relative; transition:height .3s; }
.d2d-hour-conv { position:absolute; bottom:0; left:0; right:0; background:var(--green, var(--green)); border-radius:0 0 3px 3px; }
.d2d-hour-labels { display:flex; gap:2px; margin-bottom:14px; }
.d2d-hour-lbl { flex:1; text-align:center; font-size:9px; color:var(--m); font-weight:600; }
.d2d-ins-list { display:flex; flex-direction:column; gap:4px; margin-bottom:14px; }
.d2d-ins-row { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:var(--s2); border:1px solid var(--br); border-radius:8px; font-size:12px; }
.d2d-ins-name { font-weight:700; color:var(--t); }
.d2d-ins-stats { color:var(--m); font-size:11px; }
.d2d-hood-list { display:flex; flex-direction:column; gap:4px; }
.d2d-hood-row { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--s2); border:1px solid var(--br); border-radius:8px; }
.d2d-hood-score { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-weight:800; font-size:13px; font-family:'Barlow Condensed',sans-serif; flex-shrink:0; }
.d2d-hood-info { flex:1; min-width:0; }
.d2d-hood-primary { font-size:12px; color:var(--t); font-weight:600; }
.d2d-hood-secondary { font-size:11px; color:var(--m); }
/* ── D2D Detail modal ────────────────────────── */
.d2d-detail-badge { display:inline-block; padding:6px 14px; color:white; border-radius:6px; font-size:12px; font-weight:700; margin-bottom:12px; font-family:'Barlow Condensed',sans-serif; letter-spacing:.03em; text-transform:uppercase; }
.d2d-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.d2d-detail-field { min-width:0; }
.d2d-detail-label { font-size:11px; color:var(--m); display:block; margin-bottom:3px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.d2d-detail-value { font-size:14px; font-weight:600; color:var(--t); overflow:hidden; text-overflow:ellipsis; }
.d2d-detail-link { color:var(--blue); text-decoration:none; font-weight:600; }
.d2d-detail-link:hover { text-decoration:underline; }
.d2d-detail-section { margin-top:14px; }
.d2d-detail-notes { font-size:13px; color:var(--t); white-space:pre-wrap; line-height:1.5; }
.d2d-photo-grid { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.d2d-photo-thumb { width:80px; height:80px; object-fit:cover; border-radius:8px; cursor:pointer; border:1px solid var(--br); transition:transform .15s; }
.d2d-photo-thumb:hover { transform:scale(1.05); }
.d2d-audio-player { width:100%; height:36px; margin-top:4px; }
.d2d-history-list { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.d2d-history-item { padding:10px; background:var(--s2); border:1px solid var(--br); border-radius:8px; }
.d2d-history-dispo { font-weight:700; font-size:13px; color:var(--t); }
.d2d-history-time { color:var(--m); font-size:11px; margin-top:2px; }
.d2d-history-notes { color:var(--m); font-size:12px; margin-top:4px; }
.d2d-detail-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.d2d-detail-actions .d2d-action-btn { flex:1; min-width:calc(50% - 4px); justify-content:center; }
/* ── D2D FAB (floating knock button on mobile) ── */
.d2d-fab { display:none; position:fixed; bottom:calc(80px + env(safe-area-inset-bottom, 0px)); right:16px; z-index:999; width:60px; height:60px; border-radius:50%; background:var(--orange,var(--orange)); color:white; border:none; box-shadow:0 4px 16px color-mix(in srgb, var(--orange) 50%, transparent); font-size:24px; cursor:pointer; align-items:center; justify-content:center; transition:transform .15s,box-shadow .15s; -webkit-tap-highlight-color:transparent; }
.d2d-fab:active { transform:scale(.92); box-shadow:0 2px 8px color-mix(in srgb, var(--orange) 40%, transparent); }
@media(max-width:768px) {
  .d2d-fab { display:flex; }
}

/* ════ SALES TRAINING ════════════════════════════════ */
.training-menu { padding: 20px; }
.tm-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.tm-title { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--t); }
.tm-sub { font-size: 13px; color: var(--m); margin-top: 4px; }
.tm-section-label { font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--m); margin: 24px 0 12px; padding: 0 4px; }
.training-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.training-card { background: var(--s2); border: 1px solid var(--br); border-radius: 10px; padding: 18px; cursor: pointer; transition: all .2s; }
.training-card:hover { border-color: var(--orange); box-shadow: 0 4px 16px color-mix(in srgb, var(--orange) 12%, transparent); transform: translateY(-2px); }
.tc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.tc-icon { font-size: 28px; }
.tc-diff { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tc-title { font-size: 16px; font-weight: 700; color: var(--t); margin-bottom: 4px; }
.tc-sub { font-size: 12px; color: var(--m); margin-bottom: 10px; line-height: 1.4; }
.tc-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--m); }
.tc-best { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.tc-attempts { font-size: 11px; color: var(--m); }
.tc-new { font-size: 11px; font-weight: 700; color: var(--green); letter-spacing: .1em; }

/* Rapid Fire Banner */
.rapid-banner { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border: 1px solid var(--blue)30; border-radius: 12px; padding: 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all .2s; margin-bottom: 4px; }
.rapid-banner:hover { border-color: var(--blue); box-shadow: 0 4px 20px rgba(74,158,255,.2); }
.rb-left { display: flex; align-items: center; gap: 14px; }
.rb-icon { font-size: 32px; }
.rb-title { font-size: 16px; font-weight: 700; color:var(--t); }
.rb-sub { font-size: 12px; color: #8b9bb4; margin-top: 2px; }
.rb-right { text-align: right; }
.rb-best { font-size: 12px; color: var(--blue); font-weight: 600; }
.rb-new { color: var(--green); font-size: 14px; font-weight: 800; letter-spacing: .1em; }
.rb-arrow { font-size: 22px; color: var(--blue); margin-top: 4px; }

/* Stats Row */
.tm-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; }
.tm-stat { background: var(--s2); border: 1px solid var(--br); border-radius: 8px; padding: 14px; text-align: center; }
.tm-stat-val { font-family: 'Barlow Condensed', sans-serif; font-size: 24px; font-weight: 800; color: var(--orange); }
.tm-stat-lbl { font-size: 10px; color: var(--m); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }

/* Scenario View */
.scenario-view { padding: 20px; max-width: 720px; margin: 0 auto; }
.sv-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.sv-title { font-size: 14px; font-weight: 700; color: var(--t); }
.sv-progress { font-size: 11px; color: var(--m); font-weight: 600; }
.sv-prompt { background: var(--s2); border: 1px solid var(--br); border-radius: 10px; padding: 20px; margin-bottom: 20px; }
.sv-prompt-text { font-size: 14px; line-height: 1.7; color: var(--t); white-space: pre-line; }
.sv-options-label { font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--m); margin-bottom: 12px; }
.sv-options { display: flex; flex-direction: column; gap: 10px; }
.sv-option { display: flex; gap: 14px; align-items: flex-start; background: var(--s2); border: 2px solid var(--br); border-radius: 10px; padding: 16px; cursor: pointer; transition: all .2s; }
.sv-option:hover { border-color: var(--orange); background: var(--orange)08; }
.sv-opt-letter { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color:var(--accent-fg); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.sv-opt-text { font-size: 13px; line-height: 1.6; color: var(--t); }

/* Feedback */
.fb-card { border-radius: 10px; padding: 20px; margin-bottom: 16px; }
.fb-optimal { background: #10b98118; border: 1px solid #10b98140; }
.fb-decent { background: #F59E0B18; border: 1px solid #F59E0B40; }
.fb-poor { background: #EF444418; border: 1px solid #EF444440; }
.fb-score-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fb-emoji { font-size: 24px; }
.fb-score-label { font-size: 14px; font-weight: 700; color: var(--t); flex: 1; }
.fb-pts { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 800; color: var(--orange); }
.fb-text { font-size: 13px; line-height: 1.7; color: var(--t); }
.fb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.fb-tag { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 12px; }
.fb-better { background: var(--s2); border: 1px solid var(--br); border-radius: 8px; padding: 14px; }
.fb-better-label { font-size: 11px; font-weight: 700; color: var(--green); margin-bottom: 8px; }
.fb-better-text { font-size: 12px; color: var(--m); line-height: 1.6; font-style: italic; }

/* Results View */
.results-view { padding: 20px; max-width: 720px; margin: 0 auto; }
.rv-header { text-align: center; margin-bottom: 20px; }
.rv-outcome { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 10px 20px; border-radius: 8px; display: inline-block; }
.rv-win { background: #10b98118; color: #10b981; border: 1px solid #10b98140; }
.rv-partial { background: #F59E0B18; color: #F59E0B; border: 1px solid #F59E0B40; }
.rv-loss { background: #EF444418; color: #EF4444; border: 1px solid #EF444440; }
.rv-scenario { font-size: 14px; color: var(--m); margin-top: 8px; }
.rv-terminal { background: var(--s2); border: 1px solid var(--br); border-radius: 10px; padding: 18px; margin-bottom: 20px; font-size: 13px; line-height: 1.7; color: var(--t); white-space: pre-line; }
.rv-score-card { text-align: center; background: var(--s2); border: 1px solid var(--br); border-radius: 12px; padding: 24px; margin-bottom: 20px; }
.rv-stars { margin-bottom: 8px; }
.rv-score { font-family: 'Barlow Condensed', sans-serif; font-size: 48px; font-weight: 800; color: var(--orange); }
.rv-score-detail { font-size: 12px; color: var(--m); }
.rv-skills-label, .rv-path-label { font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--m); margin: 20px 0 10px; }
.rv-skills { display: flex; flex-direction: column; gap: 8px; }
.rv-skill-row { display: flex; align-items: center; gap: 10px; }
.rv-skill-label { font-size: 12px; color: var(--t); width: 140px; flex-shrink: 0; }
.rv-skill-bar { flex: 1; height: 8px; background: var(--br); border-radius: 4px; overflow: hidden; }
.rv-skill-fill { height: 100%; border-radius: 4px; transition: width .4s; }
.rv-skill-val { font-size: 12px; font-weight: 700; color: var(--m); width: 32px; text-align: right; }
.rv-path { display: flex; flex-direction: column; gap: 8px; }
.rv-step { display: flex; gap: 10px; padding: 10px; border-radius: 8px; }
.rv-step-opt { background: #10b98110; border: 1px solid #10b98130; }
.rv-step-sub { background: var(--s2); border: 1px solid var(--br); }
.rv-step-num { width: 24px; height: 24px; border-radius: 50%; background: var(--br); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; color: var(--m); flex-shrink: 0; }
.rv-step-body { flex: 1; }
.rv-step-choice { font-size: 12px; color: var(--t); line-height: 1.5; }
.rv-step-score { font-size: 11px; font-weight: 700; color: var(--orange); margin-top: 4px; }
.rv-actions { display: flex; gap: 10px; margin-top: 20px; }

/* Rapid Fire View */
.rapid-view { padding: 20px; max-width: 720px; margin: 0 auto; }
.rapid-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.rapid-stats-bar { display: flex; gap: 14px; }
.rs-item { font-size: 12px; font-weight: 600; color: var(--m); }
.rapid-card { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-radius: 12px; padding: 28px; text-align: center; margin-bottom: 20px; }
.rapid-context { font-size: 11px; color: #8b9bb4; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .1em; }
.rapid-objection { font-size: 22px; font-weight: 700; color:var(--t); line-height: 1.4; }
.rapid-options { display: flex; flex-direction: column; gap: 8px; }
.rapid-opt { background: var(--s2); border: 2px solid var(--br); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: all .15s; }
.rapid-opt:hover { border-color: var(--blue); }
.rapid-opt-correct { border-color: #10b981 !important; background: #10b98112 !important; }
.rapid-opt-wrong { border-color: #EF4444 !important; background: #EF444412 !important; }
.rapid-opt-text { font-size: 13px; line-height: 1.5; color: var(--t); }
.rapid-opt-score { font-size: 12px; font-weight: 700; color: var(--orange); margin-top: 6px; }
.rapid-opt-explain { font-size: 11px; color: var(--m); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--br); line-height: 1.5; }

/* Profile View */
.profile-view { padding: 20px; max-width: 720px; margin: 0 auto; }
.pv-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.pv-title { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800; color: var(--t); }
.pv-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.pv-stat { background: var(--s2); border: 1px solid var(--br); border-radius: 8px; padding: 14px; text-align: center; }
.pv-stat-val { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 800; color: var(--orange); }
.pv-stat-lbl { font-size: 10px; color: var(--m); text-transform: uppercase; letter-spacing: .06em; }
.pv-section-label { font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--m); margin: 20px 0 10px; }
.pv-skills { display: flex; flex-direction: column; gap: 10px; }
.pv-skill-row { display: flex; align-items: center; gap: 10px; }
.pv-skill-info { display: flex; align-items: center; gap: 6px; width: 180px; flex-shrink: 0; }
.pv-skill-icon { font-size: 16px; }
.pv-skill-name { font-size: 12px; font-weight: 600; color: var(--t); }
.pv-skill-count { font-size: 10px; color: var(--m); }
.pv-skill-bar { flex: 1; height: 10px; background: var(--br); border-radius: 5px; overflow: hidden; }
.pv-skill-fill { height: 100%; border-radius: 5px; transition: width .4s; }
.pv-skill-val { font-size: 13px; font-weight: 700; color: var(--m); width: 32px; text-align: right; }
.pv-history { display: flex; flex-direction: column; gap: 6px; }
.pv-session { display: flex; align-items: center; gap: 12px; background: var(--s2); border: 1px solid var(--br); border-radius: 8px; padding: 12px; }
.pv-session-icon { font-size: 20px; }
.pv-session-info { flex: 1; }
.pv-session-title { font-size: 13px; font-weight: 600; color: var(--t); }
.pv-session-meta { font-size: 11px; color: var(--m); }
.pv-session-score { text-align: right; }
.pv-session-pct { font-size: 13px; font-weight: 700; color: var(--orange); }
.pv-empty { text-align: center; padding: 40px; color: var(--m); font-size: 13px; }

/* Mobile responsive */
@media (max-width: 600px) {
  .training-grid { grid-template-columns: 1fr; }
  .rapid-banner { flex-direction: column; gap: 12px; text-align: center; }
  .rb-left { flex-direction: column; }
  .pv-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .pv-skill-info { width: 120px; }
  .rv-skill-label { width: 100px; font-size: 11px; }
  .tm-stats-row { grid-template-columns: repeat(2, 1fr); }
  .sv-option { padding: 12px; }
}
