/* SystemFlow v4 - "Clay Violet" full UI/UX re-skin
   Loaded LAST. Redefines the base design tokens (everything in styles.css /
   styles-v2.css aliases them), then layers claymorphism depth + motion on top.
   Style: Claymorphism + Vibrant & Block-based.
   Color rules: NO blue, NO neon, NO brown. Violet-graphite neutrals,
   vibrant violet primary, rose secondary, honest saturated block accents.
   Subscribers get an extra plan accent on top of the base palette:
   [data-plan="pro"] = Anthropic orange, [data-plan="team"] = yellow. */

/* ══════════════════════ 1. TOKENS - DARK ══════════════════════ */
:root,
[data-theme="dark"],
html.dark {
  --bg:            #0a0a0c;
  --bg-2:          #0e0e11;
  --surface:       #121215;
  --surface1:      #121215;
  --surface2:      #1a1a1f;
  --surface3:      #232329;
  --surface-bright:#2c2c34;
  --border:        rgba(255,255,255,0.08);
  --border2:       rgba(255,255,255,0.13);
  --border3:       rgba(255,255,255,0.24);
  --border-md:     rgba(255,255,255,0.11);
  --text:          #f5f4f7;
  --text-sec:      #a9a7b3;
  --text-dim:      rgba(169,167,179,0.55);
  --text-muted:    rgba(169,167,179,0.34);
  --outline:       #8e8c99;
  --outline-var:   #3c3b45;
  --canvas-bg:     #070708;
  --canvas-grid:   rgba(255,255,255,0.05);

  /* Accent - vibrant violet, rose secondary */
  --accent:          #10b981;
  --accent-dim:      rgba(16,185,129,0.16);
  --accent-glow:     0 0 18px rgba(16,185,129,0.35);
  --accent-contrast: #ffffff;
  --accent2:         #f59e0b;
  --accent2-dim:     rgba(245,158,11,0.13);
  --clay:            #f59e0b;
  --clay-dim:        rgba(245,158,11,0.13);
  --indigo:          #34d399;
  --indigo-dim:      rgba(52,211,153,0.15);

  --green:         #34d399;
  --green-dim:     rgba(52,211,153,0.13);
  --amber:         #fbbf24;
  --amber-dim:     rgba(251,191,36,0.13);
  --red:           #f87171;
  --red-dim:       rgba(248,113,113,0.13);
  --purple:        #6ee7b7;
  --purple-dim:    rgba(110,231,183,0.14);
  --cyan:          #34d399;
  --cyan-dim:      rgba(52,211,153,0.12);
  --cyan-glow:     rgba(52,211,153,0.25);
  --gold:          #eab308;
  --gold-dim:      rgba(234,179,8,0.13);
  --blue:          #34d399;

  /* ── Semantic role tokens ─────────────────────────────────────────
     The canonical vocabulary for new code. Each resolves through the
     theme-scoped hue tokens, so they are automatically correct in both
     themes. Components should reach for these, not raw hues:
       primary   - brand actions, focus, selection
       secondary - complementary highlights
       success / warning / danger - status, never decoration
       neutral   - de-emphasized text and chrome */
  --primary:       var(--accent);
  --primary-dim:   var(--accent-dim);
  --primary-glow:  var(--accent-glow);
  --secondary:     var(--accent2);
  --secondary-dim: var(--accent2-dim);
  --success:       var(--green);
  --success-dim:   var(--green-dim);
  --warning:       var(--amber);
  --warning-dim:   var(--amber-dim);
  --danger:        var(--red);
  --danger-dim:    var(--red-dim);
  --neutral:       var(--text-sec);
  --neutral-dim:   var(--text-dim);
  --focus-ring:    var(--accent);

  --glass:         rgba(13,13,16,0.88);
  --glass-border:  rgba(255,255,255,0.09);

  /* Clay depth recipe */
  --clay-shadow:   0 8px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.3);
  --clay-shadow-sm:0 4px 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);

  --sans: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --t: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --spring: 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══════════════════════ 1b. TOKENS - LIGHT ══════════════════════ */
[data-theme="light"],
html.light {
  --bg:            #ffffff;
  --bg-2:          #fafafa;
  --surface:       #ffffff;
  --surface1:      #ffffff;
  --surface2:      #f2f2f5;
  --surface3:      #e8e8ee;
  --surface-bright:#ffffff;
  --border:        rgba(20,18,30,0.10);
  --border2:       rgba(20,18,30,0.14);
  --border3:       rgba(20,18,30,0.24);
  --border-md:     rgba(20,18,30,0.12);
  --text:          #17151f;
  --text-sec:      #4c4a58;
  --text-dim:      #767482;
  --text-muted:    #a3a1ad;
  --outline:       #767482;
  --outline-var:   #cfced6;
  --canvas-bg:     #f4f4f7;
  --canvas-grid:   rgba(20,18,30,0.08);

  --accent:          #059669;
  --accent-dim:      rgba(5,150,105,0.12);
  --accent-glow:     0 0 12px rgba(5,150,105,0.25);
  --accent-contrast: #ffffff;
  --accent2:         #b45309;
  --accent2-dim:     rgba(180,83,9,0.11);
  --clay:            #b45309;
  --clay-dim:        rgba(180,83,9,0.11);
  --indigo:          #059669;
  --indigo-dim:      rgba(5,150,105,0.12);

  --green:         #059669;
  --green-dim:     rgba(5,150,105,0.12);
  --amber:         #b45309;
  --amber-dim:     rgba(180,83,9,0.12);
  --red:           #dc2626;
  --red-dim:       rgba(220,38,38,0.11);
  --purple:        #059669;
  --purple-dim:    rgba(5,150,105,0.11);
  --cyan:          #059669;
  --cyan-dim:      rgba(5,150,105,0.11);
  --cyan-glow:     rgba(5,150,105,0.20);
  --gold:          #a16207;
  --gold-dim:      rgba(161,98,7,0.12);
  --blue:          #059669;

  --glass:         rgba(255,255,255,0.92);
  --glass-border:  rgba(20,18,30,0.10);

  --clay-shadow:   0 10px 24px rgba(20,18,30,0.12), inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(20,18,30,0.05);
  --clay-shadow-sm:0 5px 12px rgba(20,18,30,0.08), inset 0 1px 0 #ffffff;

  --sans: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --t: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --spring: 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══════════════════ 1c. PLAN ACCENTS (subscribers only) ══════════════════ */
/* A plan identifies itself through `--plan-accent`: the plan pill, upgrade
   surfaces and anything else that is genuinely *about* the subscription.
   It no longer repaints `--accent`.
   Repainting the accent recoloured the entire product: primary buttons, the
   active tab, filter chips, the run control, focus rings. On Team that meant a
   yellow interface, which reads as a warning state in an app whose whole visual
   language uses amber for saturation and red for failure. The product accent
   stays green on every plan; node status colours are a separate scale and are
   untouched by any of this. */
html[data-plan="pro"]  { --plan-accent: #d97757; }
html.light[data-plan="pro"],  [data-theme="light"][data-plan="pro"]  { --plan-accent: #c15f3c; }
html[data-plan="team"] { --plan-accent: #eab308; }
html.light[data-plan="team"], [data-theme="light"][data-plan="team"] { --plan-accent: #a16207; }

/* ══════════════════════ 2. GLOBAL BASE ══════════════════════ */
html, body {
  font-family: var(--sans);
  letter-spacing: 0.005em;
}
::selection { background: rgba(16,185,129,0.32); color: var(--text); }

/* Ambient app backdrop - soft violet/rose glows */
body {
  background:
    radial-gradient(1100px 550px at 15% -10%, rgba(16,185,129,0.08), transparent 60%),
    radial-gradient(900px 500px at 90% 112%, rgba(245,158,11,0.05), transparent 60%),
    var(--bg);
}
html.light body {
  background:
    radial-gradient(1100px 550px at 15% -10%, rgba(5,150,105,0.06), transparent 60%),
    radial-gradient(900px 500px at 90% 112%, rgba(180,83,9,0.04), transparent 60%),
    var(--bg);
}

/* Scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(110,231,183,0.18); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(110,231,183,0.34); }
html.light ::-webkit-scrollbar-thumb { background: rgba(20,18,30,0.18); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

button:active:not(:disabled),
.btn:active:not(:disabled) { transform: scale(0.965); }
button, .btn { transition: transform 0.12s var(--ease-out), background var(--t), color var(--t), border-color var(--t), box-shadow var(--t); }

.app { grid-template-rows: 48px 1fr auto; }

/* ══════════════════════ 3. KEYFRAMES ══════════════════════ */
@keyframes v3-slide-down  { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes v3-slide-up    { from { opacity: 0; transform: translateY(16px); }  to { opacity: 1; transform: none; } }
@keyframes v3-slide-right { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes v3-slide-left  { from { opacity: 0; transform: translateX(18px); }  to { opacity: 1; transform: none; } }
@keyframes v3-pop {
  0%   { opacity: 0; transform: scale(0.92) translateY(6px); }
  60%  { opacity: 1; transform: scale(1.015) translateY(-1px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes v3-fade        { from { opacity: 0; } to { opacity: 1; } }
@keyframes v3-node-spawn {
  /* Nodes are positioned by translate3d(var(--tx),var(--ty)); the spawn pop
     must compose with it or the node flashes at the canvas origin. */
  0%   { opacity: 0; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(0.55); }
  55%  { opacity: 1; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(1.06); }
  100% { opacity: 1; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(1); }
}
@keyframes v3-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes v3-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes v3-ring-pulse {
  0%, 100% { opacity: 0.9; stroke-width: 2.5; }
  50%      { opacity: 0.4; stroke-width: 4;   }
}
@keyframes v3-dot-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px currentColor; }
  50%      { opacity: 0.45; box-shadow: 0 0 1px currentColor; }
}

/* ══════════════════════ 4. HEADER ══════════════════════ */
.header,
[data-theme="dark"] .header, html.dark .header {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--glass-border);
  animation: v3-slide-down 0.5s var(--ease-out) both;
}
html.light .header, [data-theme="light"] .header {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(76,55,128,0.06);
}
.header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(16,185,129,0.45) 30%, rgba(245,158,11,0.40) 70%, transparent);
  pointer-events: none;
}
.brand svg { filter: drop-shadow(0 0 6px rgba(16,185,129,0.5)); }
.brand-name {
  background: linear-gradient(92deg, var(--text) 30%, var(--accent) 75%, var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ══════════════════════ 5. PANELS - clay glass + entrance ══════════════════════ */
.left-panel, .right-panel, .bottom-panel,
[data-theme="dark"] .left-panel, [data-theme="dark"] .right-panel, [data-theme="dark"] .bottom-panel,
html.dark .left-panel, html.dark .right-panel, html.dark .bottom-panel {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border-color: var(--glass-border);
}
html.light .left-panel, html.light .right-panel, html.light .bottom-panel,
[data-theme="light"] .left-panel, [data-theme="light"] .right-panel, [data-theme="light"] .bottom-panel {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.25);
}
.left-panel   { animation: v3-slide-right 0.5s var(--ease-out) both; }
.right-panel  { animation: v3-slide-left 0.5s var(--ease-out) both; }
.bottom-panel { animation: v3-slide-up 0.5s var(--ease-out) both; }

/* Palette rows - staggered entrance + hover lift */
.palette-item {
  animation: v3-slide-right 0.4s var(--ease-out) backwards;
  transition: background 0.14s var(--ease-out), transform 0.14s var(--ease-out);
  border-radius: 9px;
}
.palette-item:hover { transform: translateX(3px); }
.palette-item:nth-child(1)  { animation-delay: 0.02s; }
.palette-item:nth-child(2)  { animation-delay: 0.04s; }
.palette-item:nth-child(3)  { animation-delay: 0.06s; }
.palette-item:nth-child(4)  { animation-delay: 0.08s; }
.palette-item:nth-child(5)  { animation-delay: 0.10s; }
.palette-item:nth-child(6)  { animation-delay: 0.12s; }
.palette-item:nth-child(7)  { animation-delay: 0.14s; }
.palette-item:nth-child(8)  { animation-delay: 0.16s; }
.palette-item:nth-child(9)  { animation-delay: 0.18s; }
.palette-item:nth-child(10) { animation-delay: 0.20s; }
.palette-item:nth-child(n+11) { animation-delay: 0.22s; }
.palette-item:active { cursor: grabbing; }

.cat-chip { transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.14s; border-radius: 999px !important; }
.cat-chip:hover { transform: translateY(-1px); }

/* ══════════════════════ 6. BUTTONS - clay blocks ══════════════════════ */
.btn-primary,
.btn.btn-primary {
  background: linear-gradient(135deg, #059669, #10b981 55%, #34d399);
  background-size: 160% 160%;
  border: none;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(5,150,105,0.35), inset 0 1.5px 0 rgba(255,255,255,0.25), inset 0 -2px 0 rgba(0,0,0,0.18);
  transition: background-position 0.35s var(--ease-out), box-shadow 0.2s, transform 0.12s;
}
.btn-primary:hover, .btn.btn-primary:hover {
  background-position: 100% 100%;
  box-shadow: 0 8px 22px rgba(5,150,105,0.5), inset 0 1.5px 0 rgba(255,255,255,0.25), inset 0 -2px 0 rgba(0,0,0,0.18);
}
.btn-premium, .btn.btn-premium {
  background: linear-gradient(110deg, #10b981, #14b8a6 45%, #f59e0b 80%, #10b981);
  background-size: 300% 100%;
  color: #fff;
  border: none;
  border-radius: 12px;
  animation: v3-shimmer 7s linear infinite;
  box-shadow: 0 6px 16px rgba(52,211,153,0.35), inset 0 1.5px 0 rgba(255,255,255,0.25), inset 0 -2px 0 rgba(0,0,0,0.15);
}
.btn-danger, .btn.btn-danger {
  border-radius: 12px;
}
.add-component-btn {
  background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(245,158,11,0.10));
  border: 1px solid rgba(16,185,129,0.40);
  color: var(--purple);
  border-radius: 12px;
  padding: 9px 0;
  font-weight: 600;
  font-size: 12px;
  box-shadow: var(--clay-shadow-sm);
  transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
}
.add-component-btn:hover {
  border-color: var(--accent);
  box-shadow: var(--accent-glow);
}

.icon-btn { transition: background 0.15s, color 0.15s, transform 0.12s; }
.icon-btn:hover { background: var(--surface2); color: var(--text); }

/* ══════════════════════ 7. INPUTS ══════════════════════ */
.input, input.input, .confirm-input {
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  border-radius: 10px !important;
}

/* `.input` carried no colours of its own - only `color: inherit` from the
   global input rule - so it rendered on the browser's default white background
   while inheriting the app's near-white text. Typing into the node filter
   produced invisible text. `.confirm-input` is untouched: it sets its own. */
.input, input.input {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border2);
}
.input::placeholder, input.input::placeholder { color: var(--text-muted); }
/* Chrome paints autofilled fields with its own near-white background and dark
   text, which reintroduces the same clash on a dark form. */
.input:-webkit-autofill, input.input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface2) inset;
  caret-color: var(--text);
}
.input:focus, input.input:focus, .confirm-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
  outline: none;
}

/* ══════════════════════ 8. DROPDOWNS & MODALS - clay cards ══════════════════════ */
.dropdown {
  background: var(--glass) !important;
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(8,6,14,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: v3-pop 0.28s var(--ease-out) both;
  transform-origin: top right;
}
html.light .dropdown { box-shadow: 0 24px 60px rgba(20,18,30,0.18); }

.modal-overlay, .tour-overlay, .crash-modal-backdrop {
  animation: v3-fade 0.22s ease both;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.high-traffic-card, .premium-modal, .tour-card, .crash-modal, .modal-card {
  animation: v3-pop 0.34s var(--spring) both;
  border-radius: 18px !important;
}

/* ── Premium modal: rebuilt, token-driven, readable in both themes ── */
.premium-modal {
  background: var(--surface) !important;
  border: 1px solid var(--border2) !important;
  box-shadow: 0 32px 80px rgba(8,6,14,0.65), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  color: var(--text) !important;
  overflow: hidden;
}
html.light .premium-modal { box-shadow: 0 32px 80px rgba(76,55,128,0.25), inset 0 1px 0 #fff !important; }
.premium-aurora {
  background:
    radial-gradient(circle at 25% 60%, rgba(16,185,129,0.45), transparent 55%),
    radial-gradient(circle at 75% 40%, rgba(245,158,11,0.40), transparent 55%),
    radial-gradient(circle at 50% 90%, rgba(20,184,166,0.25), transparent 60%),
    var(--surface2) !important;
  filter: none !important;
}
/* Kill the v2 white vignette that painted a broken white band on dark */
.premium-aurora::before { content: none !important; }
.premium-crown { color: #fff !important; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35)); }
.premium-crown svg { width: 30px !important; height: 30px !important; }
.premium-body h2 {
  background: linear-gradient(120deg, var(--text) 30%, var(--purple)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.premium-body .premium-sub { color: var(--text-sec) !important; }
.premium-tier {
  background: var(--surface2) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 999px !important;
  box-shadow: var(--clay-shadow-sm);
}
.premium-tier .price { color: var(--accent) !important; }
.premium-feat {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--clay-shadow-sm);
  text-align: left;
}
.premium-feat:hover { border-color: var(--accent) !important; background: var(--accent-dim) !important; }
.premium-feat .check {
  background: var(--green) !important;
  border-radius: 999px;
}
.premium-feat .check svg { color: #10281c !important; }
.premium-feat .feat-text { color: var(--text-sec) !important; }
.premium-feat .feat-text b { color: var(--text) !important; }
.premium-actions {
  display: flex !important;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.premium-actions .btn {
  height: 44px !important;
  padding: 0 20px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  font-size: 12.5px !important;
  width: auto !important;
}
.premium-actions .btn svg { width: 15px !important; height: 15px !important; flex-shrink: 0; }
.premium-actions .btn-ghost { color: var(--text-sec) !important; }
.premium-trust { color: var(--text-dim) !important; }

/* Modal footer buttons (activate step, confirm dialogs) - same discipline */
.modal-buttons { align-items: center; }
.modal-buttons .btn {
  height: 42px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  font-size: 12.5px !important;
  width: auto !important;
}
.modal-buttons .btn svg { width: 15px !important; height: 15px !important; flex-shrink: 0; }

/* Any unsized icon inside premium/primary buttons must never inflate the button
   (window.SVG.sparkle ships without width/height) */
.btn-premium svg, .btn.btn-premium svg,
.btn-primary svg, .btn.btn-primary svg {
  width: 15px; height: 15px; flex-shrink: 0;
}
/* Profile dropdown upgrade button: normal row button, not a block */
.dropdown .btn-premium {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
}

/* ── Left-panel Pro banner: compact clay card (sizes the crown correctly) ── */
.pro-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 4px 10px;
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(16,185,129,0.16), rgba(245,158,11,0.10));
  border: 1px solid rgba(16,185,129,0.35);
  box-shadow: var(--clay-shadow-sm);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s var(--ease-out);
}
.pro-banner:hover { border-color: var(--accent); box-shadow: var(--accent-glow); transform: translateY(-1px); }
.pro-banner .pro-badge {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #10b981, #14b8a6);
  color: #fff;
  box-shadow: 0 4px 10px rgba(16,185,129,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
.pro-banner .pro-badge svg { width: 16px !important; height: 16px !important; }
.pro-banner .pro-title { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.2; }
.pro-banner .pro-desc  { font-size: 10.5px; color: var(--text-dim); line-height: 1.35; margin-top: 1px; }

/* ══════════════════════ 9. CANVAS NODES - clay blocks ══════════════════════ */
.sys-node, .card-node {
  animation: v3-node-spawn 0.38s var(--ease-out) backwards;
  /* no `transform` here: drags must track the cursor 1:1 (see styles.css) */
  transition: box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.card-node {
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(8,6,14,0.5), inset 0 1.5px 0 rgba(255,255,255,0.07), inset 0 -2px 0 rgba(0,0,0,0.2) !important;
}
.sys-node {
  box-shadow: 0 10px 24px rgba(8,6,14,0.5), inset 0 2px 3px rgba(255,255,255,0.22), inset 0 -3px 4px rgba(0,0,0,0.28) !important;
}
.iso-node-group { animation: v3-fade 0.3s ease both; }

.sys-node:hover, .card-node:hover { z-index: 5; }
.sys-node.selected, .card-node.selected {
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 2.5px rgba(16,185,129,0.6),
    0 14px 34px rgba(8,6,14,0.55),
    0 0 30px rgba(16,185,129,0.28) !important;
}

html.light .card-node, [data-theme="light"] .card-node {
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(76,55,128,0.14), inset 0 1.5px 0 #fff !important;
}

/* Edges - violet flow */
.edge-path { transition: stroke 0.2s, opacity 0.2s; }
.edge-path.flowing { filter: drop-shadow(0 0 3px rgba(16,185,129,0.55)); }

.iso-bottleneck-ring { animation: v3-ring-pulse 1.1s ease-in-out infinite; }

.handle { transition: transform 0.15s var(--spring), opacity 0.15s, background 0.15s; }
.handle:hover { transform: scale(1.35); background: var(--accent) !important; }

.canvas-empty { animation: v3-fade 0.6s ease both; }
.canvas-empty .empty-state-icon,
.canvas-empty svg { animation: v3-float 4s ease-in-out infinite; }

.minimap, .minimap-empty {
  background: var(--glass) !important;
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--clay-shadow);
}

/* ══════════════════════ 10. STATUS / METRICS ══════════════════════ */
.dot.ok { animation: v3-dot-blink 2.4s ease-in-out infinite; color: var(--green); }
.metric-cell { transition: background 0.15s; border-radius: 8px; }
.metric-cell:hover { background: var(--surface2); }
.pattern-chip {
  border: 1px solid var(--accent-dim);
  background: var(--accent-dim);
  color: var(--purple);
  border-radius: 999px;
  padding: 2px 9px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
}

.tab-content, .ribbon-body { animation: v3-slide-up 0.28s var(--ease-out) both; }

.tour-card {
  background: var(--glass) !important;
  backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 24px 60px rgba(8,6,14,0.6), 0 0 0 1px rgba(16,185,129,0.15);
}

.collapse-tab { transition: background 0.15s, color 0.15s, box-shadow 0.2s; }
.collapse-tab:hover { color: var(--accent); box-shadow: var(--accent-glow); }
/* The global `button:active { transform: scale(...) }` REPLACES the
   translate(-50%) centering these tabs rely on, so pressing one made it jump
   ~36px away from the cursor before mouseup - the click never landed on the
   button. Keep the centering translate inside the :active transform. */
.collapse-tab.left:active:not(:disabled),
.collapse-tab.right:active:not(:disabled) { transform: translateY(-50%) scale(0.96); }
.collapse-tab.bottom:active:not(:disabled) { transform: translateX(-50%) scale(0.96); }

/* ══════════════════════ 11. MOTION & BREATHING ROOM ══════════════════════ */
/* Primary buttons: light sweep on hover */
.btn-primary, .btn.btn-primary, .btn-premium, .btn.btn-premium { position: relative; overflow: hidden; }
.btn-primary::after, .btn-premium::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  background-size: 250% 100%;
  background-position: 200% 0;
  transition: background-position 0.6s var(--ease-out);
  pointer-events: none;
}
.btn-primary:hover::after, .btn-premium:hover::after { background-position: -50% 0; }

/* Cards float up on hover (composed with the --tx/--ty position translate) */
.card-node:hover { transform: translate3d(var(--tx, 0px), calc(var(--ty, 0px) - 3px), 0); }
.sys-node:hover { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(1.04); }
.card-node.dragging, .sys-node.dragging { animation: none; }
.premium-feat { transition: transform 0.18s var(--ease-out), border-color 0.2s, background 0.2s; }
.premium-feat:hover { transform: translateY(-2px); }

/* Palette rows: icon pops with the row */
.palette-item > span:first-child { transition: transform 0.18s var(--spring), border-color 0.18s; }
.palette-item:hover > span:first-child { transform: scale(1.12); border-color: var(--accent); }

/* Brand mark: slow breathing glow */
@keyframes v3-breathe {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(16,185,129,0.35)); }
  50%      { filter: drop-shadow(0 0 10px rgba(16,185,129,0.7)); }
}
.brand svg { animation: v3-breathe 4s ease-in-out infinite; }

/* Pro banner: badge wiggles on hover */
.pro-banner .pro-badge { transition: transform 0.25s var(--spring); }
.pro-banner:hover .pro-badge { transform: rotate(-8deg) scale(1.08); }

/* Dropdown rows: slide on hover + roomier sections */
.dropdown-section { padding: 10px 12px !important; }
.dropdown a, .shortcut-row { transition: transform 0.15s var(--ease-out), background 0.15s; border-radius: 8px; }
.dropdown a:hover, .shortcut-row:hover { transform: translateX(3px); background: var(--surface2); }

/* Breathing room - panels felt clustered */
.left-panel > div:first-child { padding-top: 12px !important; }
.premium-body { padding: 20px 28px 24px !important; }
.premium-features { gap: 10px !important; }
.tour-card { padding: 18px !important; }
.metric-cell { padding: 3px 8px; }

/* Tab labels: animated underline */
.ribbon-tab, .rp-tab { position: relative; }
.ribbon-tab::after, .rp-tab::after {
  content: "";
  position: absolute; left: 50%; right: 50%; bottom: -1px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: left 0.22s var(--ease-out), right 0.22s var(--ease-out);
}
.ribbon-tab.active::after, .rp-tab.active::after { left: 8px; right: 8px; }

/* ══════════════════════ 12. FLOATING PANELS - max canvas ══════════════════════ */
/* Side panels float OVER the canvas as clay glass docks; the canvas column
   collapses to zero so the stage gets the full window width. */
.left-panel, .right-panel {
  grid-area: 1 / 1 / -1 / -1;   /* abspos containing block = whole app grid */
  position: absolute;
  z-index: 24;
  top: 58px;
  bottom: calc(var(--sf-bottom-h, 96px) + 12px);
  border-radius: 18px !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--clay-shadow);
  overflow: hidden;
}
.left-panel  { left: 8px;  width: 250px !important; border-right: 1px solid var(--glass-border) !important; }
.left-panel .add-component-btn { margin: 0 !important; }
.add-component-btn { width: 100% !important; box-sizing: border-box; }
.right-panel { right: 8px; width: 300px !important; border-left: 1px solid var(--glass-border) !important; }
/* Bottom ribbon always paints above the floating panels */
.bottom-panel { position: relative; z-index: 30; }
.right-panel.collapsed { width: 34px !important; }
.left-panel.collapsed { width: 38px !important; }

/* Collapse arrows must live INSIDE the rounded card (overflow: hidden clips
   the old outside-edge placement, which made panels impossible to close). */
.left-panel .collapse-tab.left {
  right: 0 !important;
  border-radius: 8px 0 0 8px !important;
  border-right: 0 !important;
  z-index: 6;
}
.right-panel .collapse-tab.right {
  left: 0 !important;
  right: auto !important;
  border-radius: 0 8px 8px 0 !important;
  border-left: 0 !important;
  z-index: 6;
}

/* ══════════════════════ 13. RIGHT PANEL - tab grid + hints ══════════════════════ */
.rp-tabbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.rp-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 2px 6px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.15s, color 0.15s, transform 0.12s var(--ease-out);
}
.rp-tab:hover { background: var(--surface2); color: var(--text); transform: translateY(-1px); }
.rp-tab.active {
  background: var(--accent-dim);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(16,185,129,0.35);
}
.rp-tab-ic { display: inline-flex; }
.rp-tab-ic svg { width: 15px; height: 15px; }
.rp-tab-lb { line-height: 1; }
.rp-tab-badge {
  position: absolute;
  top: 0; right: 2px;
  font-size: 8.5px; font-weight: 700; line-height: 13px;
  min-width: 14px; padding: 0 4px;
  border-radius: 7px; color: #fff; text-align: center;
}
/* retire the old underline treatment */
.rp-tab::after, .ribbon-tab::after { content: none !important; }
.ribbon-tab.active { position: relative; }
.ribbon-tab.active::before {
  content: "";
  position: absolute; left: 8px; right: 8px; bottom: -1px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

/* ══════════════════════ 14. ZONES - VPC area markers ══════════════════════ */
/* The node layer must not swallow clicks on empty space - zone border lines
   live underneath it. Nodes themselves stay interactive. */
.canvas-nodes { pointer-events: none; }
.canvas-nodes > * { pointer-events: auto; }

.sf-zone {
  animation: v3-pop 0.3s var(--ease-out) backwards;
  transition: box-shadow 0.18s var(--ease-out), border-color 0.18s;
}
.sf-zone:hover { box-shadow: 0 0 0 1px var(--zone-color); }
.sf-zone.active {
  border-style: solid !important;
  box-shadow: 0 0 0 2px var(--zone-color), 0 10px 28px rgba(0,0,0,0.22);
}
.sf-zone:active { cursor: grabbing; }
.sf-zone-label {
  position: absolute;
  top: -11px; left: 16px;
  font: 700 10px/1.9 var(--mono);
  padding: 0 9px;
  border-radius: 7px;
  letter-spacing: 0.05em;
  cursor: text;
  box-shadow: 0 1px 4px rgba(0,0,0,0.28);
  user-select: none;
}
.sf-zone-del {
  position: absolute;
  top: 7px; right: 9px;
  width: 20px; height: 20px;
  border: 0; border-radius: 7px;
  background: rgba(0,0,0,0.35);
  color: #fff; font-size: 10px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.sf-zone:hover .sf-zone-del { opacity: 1; }
.sf-zone-del:hover { background: var(--red); }
.sf-zone-resize {
  position: absolute;
  right: -5px; bottom: -5px;
  width: 15px; height: 15px;
  border-right: 3px solid;
  border-bottom: 3px solid;
  border-radius: 3px;
  cursor: nwse-resize;
  opacity: 0;
  transition: opacity 0.15s;
}
.sf-zone:hover .sf-zone-resize { opacity: 1; }
.sf-zone-resize-e {
  position: absolute;
  right: -6px; top: 50%; margin-top: -14px;
  width: 11px; height: 28px;
  border-right: 3px solid;
  border-radius: 3px;
  cursor: ew-resize;
  opacity: 0;
  transition: opacity 0.15s;
}
.sf-zone-resize-s {
  position: absolute;
  bottom: -6px; left: 50%; margin-left: -14px;
  width: 28px; height: 11px;
  border-bottom: 3px solid;
  border-radius: 3px;
  cursor: ns-resize;
  opacity: 0;
  transition: opacity 0.15s;
}
.sf-zone:hover .sf-zone-resize-e,
.sf-zone:hover .sf-zone-resize-s,
.sf-zone.active .sf-zone-resize,
.sf-zone.active .sf-zone-resize-e,
.sf-zone.active .sf-zone-resize-s { opacity: 1; }
.sf-zone.active .sf-zone-del { opacity: 1; }

/* Focus flash - pulsing ring around a node located via advisor/crash alerts */
.sf-node-flash {
  position: absolute;
  pointer-events: none;
  z-index: 40;
  border: 3px solid var(--flash-color, var(--amber));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--flash-color, #f59e0b) 30%, transparent),
              0 0 26px var(--flash-color, #f59e0b);
  animation: sf-flash-pulse 0.55s ease-in-out infinite alternate;
}
@keyframes sf-flash-pulse {
  from { opacity: 1;    transform: scale(1); }
  to   { opacity: 0.35; transform: scale(1.12); }
}

/* Minimap clears the floating right panel */
.minimap, .minimap-empty { right: var(--sf-right-w, 12px) !important; }

/* ══════════════════════ 15. DASHBOARD - v2 (sf-dash) ══════════════════════ */
/* Backdrop matches the "SystemFlow Dashboard" design import: dot-grid + two
   drift orbs, fixed behind the scrollable content. Scoped to .sf-dash only -
   does not touch --bg or any shared token used elsewhere in the app. */
@keyframes sf-dash-drift-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-3%,-2%) scale(1.06); } }
@keyframes sf-dash-drift-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(4%,3%) scale(1.08); } }
.sf-dash { position: relative; overflow-y: auto; height: 100%; padding: 30px 40px 48px; box-sizing: border-box; background: var(--bg); }
.sf-dash::before, .sf-dash::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.sf-dash::before {
  background:
    radial-gradient(60vw 60vw at 88% -18%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 62%),
    radial-gradient(55vw 55vw at -12% 112%, color-mix(in srgb, var(--accent) 11%, transparent) 0%, transparent 60%);
  filter: blur(30px);
  animation: sf-dash-drift-a 18s ease-in-out infinite, sf-dash-drift-b 22s ease-in-out infinite;
}
.sf-dash::after {
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at 50% 12%, #000 0%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle at 50% 12%, #000 0%, transparent 74%);
}
@media (prefers-reduced-motion: reduce) { .sf-dash::before { animation: none; } }
.sf-dash-wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; animation: v3-slide-up 0.4s var(--ease-out) both; }
.sf-dash-kicker { font: 700 10px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-muted); }

/* Greeting */
.sf-dash-hello { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.sf-dash-hello h1 { margin: 0 0 5px; font: 800 26px/1.1 var(--sans); letter-spacing: -0.02em; color: var(--text); }
.sf-dash-date { font-size: 12px; color: var(--text-dim); }
.sf-dash-hello-actions { display: flex; gap: 10px; }
.sf-dash-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 16px; border-radius: 12px;
  background: transparent; color: var(--text-sec);
  border: 1px solid var(--border2);
  font-size: 12.5px; font-weight: 600;
}
.sf-dash-ghost:hover { color: var(--text); border-color: var(--border3); background: var(--surface2); }
.sf-dash-new { height: 38px; padding: 0 18px !important; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px !important; }

/* Hero row */
.sf-dash-hero { display: grid; grid-template-columns: 1fr 280px; gap: 16px; margin-bottom: 18px; }
@media (max-width: 980px) { .sf-dash-hero { grid-template-columns: 1fr; } }
.sf-dash-resume {
  position: relative; overflow: hidden;
  display: flex; align-items: stretch; justify-content: space-between; gap: 14px;
  border-radius: 20px;
  padding: 22px 26px;
  cursor: pointer;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--surface) 45%, transparent) 65%);
  border: 1px solid rgba(16,185,129,0.22);
  transition: border-color 0.2s, transform 0.18s var(--ease-out), box-shadow 0.2s;
  animation: v3-pop 0.4s var(--ease-out) both;
}
.sf-dash-resume:hover { transform: translateY(-2px); border-color: rgba(16,185,129,0.45); box-shadow: 0 16px 40px rgba(0,0,0,0.3), 0 0 24px rgba(16,185,129,0.10); }
.sf-dash-resume-glow {
  position: absolute; right: -70px; top: -70px; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(16,185,129,0.16), transparent 65%);
  pointer-events: none;
}
.sf-dash-resume-body { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sf-dash-resume-body h2 { margin: 2px 0 0; font: 800 21px/1.15 var(--sans); letter-spacing: -0.015em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-dash-resume-meta { display: flex; gap: 7px; flex-wrap: wrap; font: 500 11.5px/1.4 var(--mono); color: var(--text-dim); }
.sf-dash-resume-cta {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 12.5px/1 var(--sans); color: var(--accent);
  transition: gap 0.18s var(--ease-out);
}
.sf-dash-resume:hover .sf-dash-resume-cta { gap: 11px; }
.sf-dash-resume-art { position: relative; align-self: center; width: 180px; flex-shrink: 0; opacity: 0.9; }
@media (max-width: 640px) { .sf-dash-resume-art { display: none; } }

.sf-dash-plan {
  border-radius: 20px;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  animation: v3-pop 0.4s var(--ease-out) 0.06s both;
}
.sf-dash-plan-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sf-dash-plan-badge {
  font: 700 10px/1 var(--mono); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-sec); background: var(--surface2);
  border-radius: 999px; padding: 5px 10px;
}
.sf-dash-plan-badge.pro { color: #fff; background: linear-gradient(120deg, #10b981, #14b8a6); }
.sf-dash-usage-label { display: flex; justify-content: space-between; font: 600 10.5px/1 var(--mono); color: var(--text-dim); margin-bottom: 6px; }
.sf-dash-usage-bar { height: 6px; border-radius: 3px; background: var(--surface2); overflow: hidden; margin-bottom: 4px; }
.sf-dash-usage-bar > div { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width 0.6s var(--ease-out); }
.sf-dash-upgrade { margin-top: auto; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; font-weight: 700; }
.sf-dash-upgrade svg { width: 14px; height: 14px; }
.sf-dash-manage { margin-top: auto; font: 600 11.5px/1 var(--sans); color: var(--accent); text-decoration: none; }

/* Stats strip - four individual glass tiles, matching the design import */
.sf-dash-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 18px;
  animation: v3-slide-up 0.4s var(--ease-out) 0.1s both;
}
@media (max-width: 760px) { .sf-dash-strip { grid-template-columns: 1fr 1fr; } }
.sf-dash-stat {
  display: flex; flex-direction: column; gap: 3px; padding: 16px 18px;
  border-radius: 15px; background: color-mix(in srgb, var(--surface) 45%, transparent);
  border: 1px solid var(--border);
  transition: border-color 0.2s, transform 0.2s var(--ease-out);
}
.sf-dash-stat:hover { border-color: color-mix(in srgb, var(--accent) 35%, transparent); transform: translateY(-2px); }
.sf-dash-stat-l { font: 700 9.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); }
.sf-dash-stat-v { font: 700 26px/1.15 var(--sans); color: var(--text); font-variant-numeric: tabular-nums; margin: 5px 0 1px; }
.sf-dash-stat-s { font: 500 10.5px/1 var(--mono); color: var(--text-dim); }

/* Quick start */
.sf-dash-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px; }
@media (max-width: 980px) { .sf-dash-quick { grid-template-columns: 1fr 1fr; } }
.sf-dash-quick-card {
  display: flex; align-items: center; gap: 11px; text-align: left;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  cursor: pointer;
  transition: border-color 0.18s, transform 0.16s var(--ease-out), background 0.18s;
}
.sf-dash-quick-card:hover { transform: translateY(-2px); border-color: rgba(16,185,129,0.35); background: var(--surface3); }
.sf-dash-quick-ic {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); background: var(--accent-dim);
}
.sf-dash-quick-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sf-dash-quick-tx b { font: 650 12.5px/1.3 var(--sans); color: var(--text); }
.sf-dash-quick-tx i { font: 400 10.5px/1.35 var(--sans); font-style: normal; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Projects + activity columns */
.sf-dash-cols { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
@media (max-width: 1060px) { .sf-dash-cols { grid-template-columns: 1fr; } }
.sf-dash-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.sf-dash-sec-head h3, .sf-dash-activity h3 { margin: 0; font: 800 15px/1 var(--sans); letter-spacing: -0.01em; color: var(--text); }
.sf-dash-sec-tools { display: flex; align-items: center; gap: 8px; }
.sf-dash-filter { width: 170px; height: 30px; font-size: 12px; background: var(--surface2); border: 1px solid var(--border); padding: 0 11px; color: var(--text); }
.sf-dash-sort { display: flex; gap: 2px; background: var(--surface2); border-radius: 9px; padding: 2px; }
.sf-dash-sort button {
  border: 0; background: transparent; cursor: pointer;
  font: 600 10.5px/1 var(--sans); color: var(--text-dim);
  padding: 6px 10px; border-radius: 7px;
  transition: background 0.14s, color 0.14s;
}
.sf-dash-sort button:hover { color: var(--text); }
.sf-dash-sort button.active { background: var(--surface-bright); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.2); }

.sf-dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.sf-dash-card {
  position: relative;
  border-radius: 16px;
  padding: 12px 15px 12px;
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.16s var(--ease-out), border-color 0.18s, box-shadow 0.2s;
  animation: v3-pop 0.35s var(--ease-out) backwards;
}
.sf-dash-card:hover { transform: translateY(-3px); border-color: rgba(16,185,129,0.4); box-shadow: 0 14px 34px rgba(0,0,0,0.3); }
.sf-dash-card.current { border-color: rgba(16,185,129,0.5); }
.sf-dash-card-art { margin: 0 -4px 4px; }
.sf-dash-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.sf-dash-card-top h4 { margin: 0; font: 700 13.5px/1.3 var(--sans); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.sf-dash-chip { font: 700 8.5px/1.7 var(--mono); letter-spacing: 0.06em; color: var(--accent); background: var(--accent-dim); border-radius: 6px; padding: 0 6px; flex-shrink: 0; }
.sf-dash-card-meta { display: flex; gap: 6px; font: 500 10.5px/1 var(--mono); color: var(--text-dim); margin-bottom: 10px; }
.sf-dash-card-foot { display: flex; align-items: center; justify-content: space-between; }
.sf-dash-card-time { font: 500 10px/1 var(--mono); color: var(--text-muted); }
.sf-dash-card-actions {
  position: absolute; top: 9px; right: 9px;
  display: flex; gap: 3px;
  opacity: 0; transform: translateY(-3px);
  transition: opacity 0.15s, transform 0.15s var(--ease-out);
  background: var(--glass); backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 3px;
}
.sf-dash-card:hover .sf-dash-card-actions { opacity: 1; transform: none; }
.sf-dash-card-actions button {
  width: 24px; height: 24px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text-sec); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sf-dash-card-actions button:hover { background: var(--surface3); color: var(--text); }
.sf-dash-card-actions button.danger:hover { background: var(--red-dim); color: var(--red); }
.sf-dash-rename {
  flex: 1; background: var(--surface2); border: 1px solid var(--accent);
  border-radius: 8px; color: var(--text); font: 700 13px/1.8 var(--sans);
  padding: 0 8px; outline: none; min-width: 0;
}
.sf-dash-empty {
  padding: 34px 20px; text-align: center; color: var(--text-dim); font-size: 13px;
  border: 1px dashed var(--border2); border-radius: 16px;
}
.sf-dash-empty.small { padding: 16px 10px; border: 0; }

.sf-dash-activity { position: sticky; top: 0; }
.sf-dash-activity h3 { margin-bottom: 10px; }
.sf-dash-feed { display: flex; flex-direction: column; max-height: 620px; overflow-y: auto; }
.sf-dash-feed-row { display: flex; align-items: flex-start; gap: 9px; padding: 8px 2px; }
.sf-dash-feed-row + .sf-dash-feed-row { border-top: 1px solid var(--border); }
.sf-dash-feed-ic { margin-top: 2px; display: inline-flex; flex-shrink: 0; }
.sf-dash-feed-label { font-size: 12px; color: var(--text-sec); }
.sf-dash-feed-detail { font: 500 10.5px/1.4 var(--mono); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-dash-feed-time { font: 500 9.5px/1.8 var(--mono); color: var(--text-muted); flex-shrink: 0; }

/* Onboarding tour spotlight - dims everything except the highlighted area */
.tour-spotlight {
  position: fixed;
  z-index: 190;
  border-radius: 18px;
  border: 2px solid var(--accent);
  box-shadow: 0 0 28px rgba(16,185,129,0.4), inset 0 0 24px rgba(16,185,129,0.08);
  pointer-events: none;
  transition: left 0.35s var(--ease-out), top 0.35s var(--ease-out),
              width 0.35s var(--ease-out), height 0.35s var(--ease-out);
}
/* Blur panels tiled around the spotlight hole - everything not in focus is
   frosted, the highlighted section stays perfectly sharp. */
.tour-blur {
  position: fixed;
  z-index: 186;
  background: rgba(5,5,7,0.45);
  backdrop-filter: blur(7px) saturate(0.8);
  -webkit-backdrop-filter: blur(7px) saturate(0.8);
  transition: left 0.35s var(--ease-out), top 0.35s var(--ease-out),
              width 0.35s var(--ease-out), height 0.35s var(--ease-out);
  animation: v3-fade 0.25s ease both;
}
.tour-card { z-index: 195 !important; position: fixed !important; }
.tour-overlay { z-index: 185; }

/* ══════════════════════ 12. REDUCED MOTION ══════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}

/* ══════════════════════ 16. PACKET LEGEND ══════════════════════ */
/* Permanent packet-color legend - bottom-left of the canvas area, above the
   26px status bar, left of the minimap. Rendered by window.PacketLegend
   (canvas.jsx); colors sourced from window.PACKET_TYPES (packet-types.js). */
.packet-legend {
  position: absolute;
  left: calc(var(--sf-left-w, 0px) + 10px);
  bottom: 34px;                 /* status bar (26px) + 8px gap */
  z-index: 11;
  width: 186px;
  background: var(--bg-elev);
  border: 1px solid var(--border-dim);
  border-radius: 9px;
  box-shadow: var(--shadow-1, 0 4px 14px rgba(0,0,0,0.3));
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden;
  user-select: none;
}
.packet-legend.collapsed { width: auto; }
.packet-legend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.packet-legend-head:hover { color: var(--fg, #f3f4f6); }
.packet-legend-caret { font-size: 9px; color: var(--fg-faint); }
.packet-legend-body {
  padding: 1px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 42vh;
  overflow-y: auto;
}
.packet-legend-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--fg-faint);
  white-space: nowrap;
}
.packet-legend-row:hover { color: var(--fg-dim); }
.packet-legend-swatch {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: none;
}
.packet-legend-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════ 17. CRASH UI - modal, toasts, bottleneck ══════════════════════ */
/* Redesigned crash surfaces: compact card modal, stacked severity toasts with
   countdown, and a persistent bottleneck chip. Replaces the old bulky
   crash-modal / crash-alert visuals (markup moved to sf-crash-* / sf-toast-*). */

/* Centered by the flex .crash-modal-backdrop parent (styles.css), not by
   transform: the entrance pop below animates `transform` (scale/translateY)
   every frame of the animation, which would silently overwrite a
   translate(-50%,-50%) position hack and fling this off toward whichever
   corner the leftover matrix resolved to. Keep position centering and
   `transform` animation on two different mechanisms so they never collide. */
.sf-crash-modal {
  width: 384px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-top: 2px solid var(--red);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(248,113,113,0.12);
  padding: 14px;
  animation: v3-pop 0.28s var(--ease-out) both;
}
.sf-crash-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sf-crash-node-ic {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.sf-crash-node-ic svg { width: 18px; height: 18px; }
.sf-crash-name { font: 700 14px/1.2 var(--sans); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-crash-type { font: 500 10.5px/1.4 var(--mono); color: var(--text-dim); }
.sf-crash-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 9.5px/1 var(--mono); letter-spacing: 0.08em;
  color: var(--red); background: var(--red-dim);
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: 999px; padding: 4px 9px; flex: none;
}
.sf-crash-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red);
  animation: sf-toast-blink 1.1s ease-in-out infinite;
}
@keyframes sf-toast-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.sf-crash-x {
  width: 24px; height: 24px; border-radius: 6px; flex: none;
  border: 1px solid transparent; background: transparent;
  color: var(--text-muted); font-size: 11px; cursor: pointer;
}
.sf-crash-x:hover { color: var(--text); background: var(--surface2); border-color: var(--border); }

.sf-crash-cause {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--red-dim);
  border-left: 3px solid var(--red);
  border-radius: 8px;
  padding: 9px 11px;
  margin-bottom: 12px;
}
.sf-crash-cause-ic { color: var(--red); margin-top: 1px; }
.sf-crash-cause-label { font: 700 12px/1.3 var(--sans); color: var(--red); }
.sf-crash-cause-text { font: 400 11px/1.5 var(--sans); color: var(--text-sec); margin-top: 2px; }

.sf-crash-sec-title {
  font: 700 9px/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 6px 1px;
}
.sf-crash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.sf-crash-tile {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.sf-crash-tile.culprit { border-color: rgba(248,113,113,0.5); background: var(--red-dim); }
.sf-crash-tile-l {
  font: 600 9px/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted); display: flex; align-items: center; gap: 6px;
}
.sf-crash-culprit {
  font: 700 8px/1 var(--mono); letter-spacing: 0.06em;
  color: var(--red); background: rgba(248,113,113,0.14);
  border-radius: 4px; padding: 2px 5px;
}
.sf-crash-tile-v { font: 700 13.5px/1 var(--mono); color: var(--text); }
.sf-crash-tile.culprit .sf-crash-tile-v { color: var(--red); }
.sf-crash-tile-u { font: 500 9.5px/1 var(--mono); color: var(--text-dim); }

.sf-crash-fix {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--green-dim);
  border: 1px solid rgba(52,211,153,0.22);
  border-radius: 8px;
  padding: 8px 11px;
  font: 500 11px/1.5 var(--sans); color: var(--text-sec);
  margin-bottom: 12px;
}
.sf-crash-fix-arrow { color: var(--green); font-weight: 700; }
.sf-crash-actions { display: flex; gap: 7px; }
.sf-crash-actions .btn { height: 30px; font-size: 11px; }

/* ── Toast stack ── */
.sf-toasts {
  position: absolute;
  right: 14px; bottom: 36px;
  z-index: 60;
  display: flex; flex-direction: column; gap: 8px;
  width: 262px;
  pointer-events: none;
}
.sf-toasts > * { pointer-events: auto; }
.sf-toasts-more {
  align-self: flex-end;
  font: 600 9.5px/1 var(--mono); color: var(--text-dim);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 9px;
}
.sf-toast {
  position: relative;
  overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border2);
  border-left: 3px solid var(--red);
  border-radius: 10px;
  padding: 8px 10px 10px;
  cursor: pointer;
  box-shadow: var(--clay-shadow-sm);
  animation: v3-slide-left 0.3s var(--ease-out) both;
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s;
}
.sf-toast:hover { transform: translateX(-3px); box-shadow: 0 8px 22px rgba(0,0,0,0.45); }
.sf-toast.recovery { border-left-color: var(--green); }
.sf-toast-head { display: flex; align-items: center; gap: 6px; }
.sf-toast-ic {
  width: 16px; height: 16px; border-radius: 5px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--red); background: var(--red-dim);
}
.sf-toast.recovery .sf-toast-ic { color: var(--green); background: var(--green-dim); }
.sf-toast-title {
  font: 700 9.5px/1 var(--mono); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--red); flex: 1;
}
.sf-toast.recovery .sf-toast-title { color: var(--green); }
.sf-toast-time { font: 500 9px/1 var(--mono); color: var(--text-muted); }
.sf-toast-x {
  width: 18px; height: 18px; border: 0; border-radius: 5px; flex: none;
  background: transparent; color: var(--text-muted);
  font-size: 9px; cursor: pointer; line-height: 1;
}
.sf-toast-x:hover { color: var(--text); background: var(--surface3); }
.sf-toast-node {
  font: 650 12.5px/1.3 var(--sans); color: var(--text);
  margin: 5px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sf-toast-stats {
  display: flex; gap: 10px; margin-top: 4px;
  font: 500 9.5px/1 var(--mono); color: var(--text-dim);
}
.sf-toast-stats b { color: var(--red); font-weight: 700; }
.sf-toast-reason {
  margin-top: 5px;
  font: 400 10px/1.45 var(--sans); color: var(--text-sec);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-toast-reason.recovery { color: var(--green); }
.sf-toast-progress {
  position: absolute; left: 0; bottom: 0; height: 2px;
  background: currentColor; color: var(--red); opacity: 0.55;
  width: 100%;
  transform-origin: left;
  animation-name: sf-toast-countdown;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.sf-toast.recovery .sf-toast-progress { color: var(--green); }
@keyframes sf-toast-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ── Bottleneck chip ── */
.sf-bottleneck-chip {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 36px;
  z-index: 55;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(251,191,36,0.4);
  border-radius: 999px;
  padding: 6px 12px;
  font: 700 10px/1 var(--mono); letter-spacing: 0.05em;
  color: var(--amber);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 14px rgba(251,191,36,0.14);
  animation: v3-slide-up 0.3s var(--ease-out) both;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.sf-bottleneck-chip:hover { border-color: var(--amber); box-shadow: 0 4px 18px rgba(0,0,0,0.5), 0 0 20px rgba(251,191,36,0.28); }
.sf-bottleneck-name {
  color: var(--text); font-weight: 650;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sf-bottleneck-locate { color: var(--text-dim); font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .sf-crash-badge-dot, .sf-toast, .sf-bottleneck-chip, .sf-crash-modal { animation: none; }
}

/* ══════════════════════ 18. HEADER - actions menu + responsive ══════════════════════ */
.header > div { min-width: 0; }
.header-actions-menu { transform-origin: top right; }
.header-actions-sec {
  font: 700 9px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  padding: 7px 10px 5px;
}
.header-action-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 7px 10px;
  border: 0; border-radius: 9px;
  background: transparent;
  color: var(--text-sec);
  font: 500 12px/1 var(--sans);
  cursor: pointer;
  transition: background 0.13s, color 0.13s, transform 0.13s var(--ease-out);
}
.header-action-item:hover { background: var(--surface2); color: var(--text); transform: translateX(2px); }
.header-action-item .hai-ic { display: inline-flex; color: var(--text-dim); flex-shrink: 0; }
.header-action-item:hover .hai-ic { color: var(--accent); }
.header-action-item .hai-label { flex: 1; text-align: left; }
.header-action-item.danger { color: var(--red); }
.header-action-item.danger .hai-ic { color: var(--red); }
.header-action-item.danger:hover { background: var(--red-dim); }
.header-actions-btn {
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
  width: auto !important;
  flex-shrink: 0;
}
.header-actions-btn:hover { background: var(--surface2) !important; color: var(--text) !important; }

/* Progressive header degradation - nothing may ever overflow the viewport.
   The breakpoints below drop low-value chrome before it runs out of room; the
   min-width:0 is the backstop that makes a miss clip instead of overlap. A
   grid/flex child defaults to min-width:auto, which is what let the centre
   column's metrics spill across the credit chip on the right. */
.header > * { min-width: 0; }
@media (max-width: 1500px) { .header-metrics .metric-cell:nth-child(n+3) { display: none; } }
@media (max-width: 1320px) { .header-metrics, .header .pattern-chip { display: none !important; } }
@media (max-width: 1180px) { .header .tag { display: none; } }
@media (max-width: 1040px) { .header .brand-name { display: none; } }

/* ══════════════════════ 19. PRO MODAL - hero rail + staggered features ══════════════════════ */
.sf-pro-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,4,6,0.62);
  backdrop-filter: blur(9px) saturate(0.9);
  -webkit-backdrop-filter: blur(9px) saturate(0.9);
}
.sf-pro-modal {
  position: relative;
  display: grid;
  grid-template-columns: 232px 1fr;
  width: 640px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 64px);
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border2);
  box-shadow:
    0 40px 100px rgba(0,0,0,0.6),
    0 0 0 1px rgba(16,185,129,0.10),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
html.light .sf-pro-modal { box-shadow: 0 40px 100px rgba(20,18,30,0.28); }
.sf-pro-x {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 28px; height: 28px;
  border: 0; border-radius: 9px;
  background: rgba(255,255,255,0.06);
  color: var(--text-sec); font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.sf-pro-x:hover { background: rgba(255,255,255,0.14); color: var(--text); }
html.light .sf-pro-x { background: rgba(20,18,30,0.06); }
html.light .sf-pro-x:hover { background: rgba(20,18,30,0.12); }

/* Hero rail */
.sf-pro-hero {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: 30px 20px 24px;
  overflow: hidden;
  border-right: 1px solid var(--border);
}
.sf-pro-aurora {
  position: absolute; inset: -40%;
  background:
    radial-gradient(circle at 30% 30%, rgba(16,185,129,0.5), transparent 45%),
    radial-gradient(circle at 75% 60%, rgba(245,158,11,0.38), transparent 48%),
    radial-gradient(circle at 45% 85%, rgba(20,184,166,0.35), transparent 50%),
    var(--surface2);
  animation: sf-pro-drift 11s ease-in-out infinite alternate;
  filter: saturate(1.15);
}
@keyframes sf-pro-drift {
  0%   { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(10deg) scale(1.14); }
}
.sf-pro-hero > * { position: relative; }
.sf-pro-crown {
  width: 54px; height: 54px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(140deg, rgba(255,255,255,0.24), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
  backdrop-filter: blur(6px);
  animation: v3-float 4.5s ease-in-out infinite;
  margin-bottom: 4px;
}
.sf-pro-crown svg { width: 26px; height: 26px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }
.sf-pro-hero-name { font: 400 15px/1.2 var(--sans); color: rgba(255,255,255,0.92); letter-spacing: 0.01em; }
.sf-pro-hero-name b { font-weight: 800; }
.sf-pro-hero-tag { font: 500 10.5px/1.4 var(--mono); color: rgba(255,255,255,0.62); letter-spacing: 0.03em; }
/* Pro / Team plan selector */
.sf-pro-plantoggle {
  display: flex; gap: 6px;
  margin-top: 14px; padding: 4px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 13px;
  backdrop-filter: blur(6px);
}
.sf-pro-plantoggle-opt {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 84px; padding: 7px 14px;
  border: 1px solid transparent; border-radius: 9px;
  background: transparent; cursor: pointer;
  color: rgba(255,255,255,0.7);
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.12s;
}
.sf-pro-plantoggle-opt:hover { color: #fff; background: rgba(255,255,255,0.06); }
.sf-pro-plantoggle-opt:active { transform: scale(0.97); }
.sf-pro-plantoggle-opt b { font: 700 12.5px/1 var(--sans); letter-spacing: 0.01em; }
.sf-pro-plantoggle-opt i { font: 600 10px/1 var(--mono); font-style: normal; opacity: 0.75; }
.sf-pro-plantoggle-opt.active {
  color: #fff;
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 8px rgba(0,0,0,0.25);
}

.sf-pro-price {
  display: flex; align-items: baseline; gap: 3px;
  margin-top: 14px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.sf-pro-price .cur { font: 700 18px/1 var(--sans); opacity: 0.85; }
.sf-pro-price .amt { font: 800 44px/1 var(--sans); letter-spacing: -0.03em; }
.sf-pro-price .per { font: 600 11px/1 var(--mono); opacity: 0.7; margin-left: 4px; }
.sf-pro-hero-notes {
  margin-top: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.sf-pro-hero-notes span {
  font: 600 9.5px/1 var(--mono);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 4px 10px;
  backdrop-filter: blur(4px);
}

/* Body */
.sf-pro-body {
  padding: 26px 26px 22px;
  display: flex; flex-direction: column;
  min-width: 0;
  overflow-y: auto;
}
.sf-pro-body h2 {
  margin: 0 0 14px;
  font: 800 20px/1.2 var(--sans);
  letter-spacing: -0.02em;
  color: var(--text);
}
.sf-pro-feats { display: flex; flex-direction: column; }
.sf-pro-feat {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 8px;
  border-radius: 12px;
  transition: background 0.15s, transform 0.18s var(--ease-out);
}
.sf-pro-feat:hover { background: var(--surface2); transform: translateX(3px); }
.sf-pro-feat + .sf-pro-feat { border-top: 1px solid var(--border); }
.sf-pro-feat-ic {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  background: var(--accent-dim);
}
.sf-pro-feat-ic svg { width: 15px; height: 15px; }
.sf-pro-feat-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sf-pro-feat-tx b { font: 650 12.5px/1.3 var(--sans); color: var(--text); display: inline-flex; align-items: center; gap: 7px; }
.sf-pro-feat-tx i { font: 400 11px/1.35 var(--sans); font-style: normal; color: var(--text-dim); }
/* TEAM badge on team-only features */
.sf-pro-feat-tag {
  font: 700 8px/1 var(--mono); letter-spacing: 0.1em;
  color: var(--accent, #8b5cf6);
  background: color-mix(in srgb, var(--accent, #8b5cf6) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #8b5cf6) 40%, transparent);
  border-radius: 999px; padding: 2px 6px;
}
.sf-pro-feat.team .sf-pro-feat-ic { color: var(--accent, #8b5cf6); }
/* "Have an access code?" secondary link under the CTA */
.sf-pro-havecode {
  display: block; width: 100%; margin-top: 12px;
  background: none; border: none; cursor: pointer;
  font: 600 11.5px/1 var(--sans);
  color: var(--text-dim);
  transition: color 0.15s;
}
.sf-pro-havecode:hover { color: var(--accent, #8b5cf6); }
.sf-pro-feat-check {
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--green);
  opacity: 0.9;
}
.sf-pro-feat-check svg { width: 100%; height: 100%; }
.sf-pro-actions {
  display: flex; gap: 10px; align-items: center; justify-content: flex-end;
  margin-top: 18px;
}
.sf-pro-actions .btn {
  height: 42px; padding: 0 20px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12.5px; font-weight: 700;
}
.sf-pro-actions .btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.sf-pro-later { color: var(--text-dim); }
.sf-pro-later:hover { color: var(--text); }
.sf-pro-cta { min-width: 180px; }

/* Activate step */
.sf-pro-activate { display: flex; flex-direction: column; min-height: 300px; justify-content: center; }
.sf-pro-activate-sub { margin: 0 0 16px; font: 400 12.5px/1.5 var(--sans); color: var(--text-sec); }
.sf-pro-code {
  width: 100%; box-sizing: border-box;
  font: 700 15px/1 var(--mono) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 13px 14px !important;
}
.sf-pro-err {
  margin-top: 10px;
  font: 600 11.5px/1.4 var(--sans);
  color: var(--red);
  background: var(--red-dim);
  border: 1px solid rgba(248,113,113,0.25);
  border-radius: 9px;
  padding: 8px 11px;
}

@media (max-width: 680px) {
  .sf-pro-modal { grid-template-columns: 1fr; width: 420px; }
  .sf-pro-hero { border-right: 0; border-bottom: 1px solid var(--border); padding: 22px 20px 18px; }
  .sf-pro-hero-notes { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

/* ══════════════════════ 20. TEMPLATES TAB - search + groups ══════════════════════ */
.tmpl-search {
  width: 100%;
  box-sizing: border-box;
  height: 30px;
  margin-bottom: 8px;
  padding: 0 10px;
  font-size: 11.5px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
}
.tmpl-groups {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 10px;
}
.tmpl-group-chip {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.04em;
  padding: 5px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.tmpl-group-chip:hover { color: var(--text); border-color: var(--border3); }
.tmpl-group-chip.active {
  background: var(--accent-dim);
  border-color: rgba(16,185,129,0.4);
  color: var(--accent);
}

/* ══════════════════════ 20a-0. WHAT'S-NEW BEACON ══════════════════════ */
.sf-new-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  border-radius: 999px; cursor: pointer;
  font: 700 11px/1 var(--sans); letter-spacing: 0.01em;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(16,185,129,0.35);
  transition: background 0.15s, color 0.15s, box-shadow 0.2s, transform 0.12s var(--ease-out);
  white-space: nowrap; flex-shrink: 0;
}
.sf-new-btn:hover { background: rgba(16,185,129,0.24); transform: translateY(-1px); }
.sf-new-btn svg { flex-shrink: 0; }
.sf-new-btn.pulse { animation: sf-new-pulse 1.6s ease-in-out infinite; }
.sf-new-btn.pulse svg { animation: sf-new-spin 3.2s linear infinite; }
@keyframes sf-new-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.55), 0 0 12px rgba(16,185,129,0.25); }
  50%      { box-shadow: 0 0 0 7px rgba(16,185,129,0), 0 0 22px rgba(16,185,129,0.45); }
}
@keyframes sf-new-spin {
  0%, 70% { transform: rotate(0deg); }
  85%     { transform: rotate(180deg) scale(1.25); }
  100%    { transform: rotate(360deg); }
}
/* "New" pill inside the What's New button: shown until this browser has opened
   the newest release (see shared/sf-releases.js). */
.sf-new-pill {
  margin-left: 2px; padding: 2px 6px;
  border-radius: 999px;
  font: 800 8.5px/1.4 var(--sans); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--bg, #0a0a0c);
  background: var(--accent);
}
.sf-new-dot {
  position: absolute; top: -3px; right: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent2);
  border: 2px solid var(--bg, #0a0a0c);
  animation: v3-dot-blink 1.4s ease-in-out infinite;
}
/* Staff broadcast state. A new release is information; a broadcast is someone
   asking for your attention, so it reads warmer and rocks rather than glowing -
   a different motion, not just a louder version of the same one. Both stop the
   moment the changelog is opened. */
.sf-new-btn.pinged {
  color: var(--accent2);
  background: var(--accent2-dim);
  border-color: color-mix(in srgb, var(--accent2) 42%, transparent);
  animation: sf-new-nudge 2.4s var(--ease-out) infinite;
}
.sf-new-btn.pinged .sf-new-pill { background: var(--accent2); }
.sf-new-btn.pinged .sf-new-dot { background: var(--accent2); }
.sf-new-btn.pinged:hover { background: color-mix(in srgb, var(--accent2) 26%, transparent); }
@keyframes sf-new-nudge {
  0%, 62%, 100% { transform: none; }
  68%  { transform: rotate(-3.5deg) scale(1.04); }
  74%  { transform: rotate(3deg) scale(1.04); }
  80%  { transform: rotate(-2deg) scale(1.02); }
  86%  { transform: rotate(1deg); }
}

@media (max-width: 1100px) { .sf-new-btn span.sf-new-label { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sf-new-btn.pulse, .sf-new-btn.pulse svg, .sf-new-dot, .sf-new-btn.pinged { animation: none; }
}

/* ══════════════════════ 20a. UPDATE SPLASH - "We've upgraded" ══════════════════════ */
.sf-splash {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1200px 800px at 50% 42%, #0c1210, #060608 70%);
  cursor: pointer;
  overflow: hidden;
  animation: v3-fade 0.45s ease both;
  transition: opacity 0.65s ease, transform 0.65s var(--ease-out), filter 0.65s ease;
}
/* Cinematic exit: zoom-through + blur, not a flat fade */
.sf-splash.out { opacity: 0; transform: scale(1.07); filter: blur(8px); pointer-events: none; }

/* Drifting aurora blobs */
.sf-splash-aurora {
  position: absolute; inset: -30%;
  background:
    radial-gradient(circle at 28% 35%, rgba(16,185,129,0.22), transparent 42%),
    radial-gradient(circle at 72% 60%, rgba(245,158,11,0.14), transparent 45%),
    radial-gradient(circle at 50% 95%, rgba(20,184,166,0.13), transparent 50%);
  animation: sf-pro-drift 12s ease-in-out infinite alternate;
  pointer-events: none;
}
/* Slow-panning blueprint grid - ties the moment to the canvas product */
.sf-splash-grid {
  position: absolute; inset: -60px;
  background-image:
    linear-gradient(rgba(52,211,153,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,211,153,0.055) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(75% 70% at 50% 45%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(75% 70% at 50% 45%, #000 30%, transparent 100%);
  animation: sf-grid-pan 16s linear infinite;
  pointer-events: none;
}
@keyframes sf-grid-pan { from { transform: translate(0, 0); } to { transform: translate(56px, 56px); } }

/* Self-drawing topology + packets */
.sf-splash-net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; pointer-events: none; }
.sf-net-edge {
  stroke: rgba(52,211,153,0.4);
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: sf-net-draw 1.6s var(--ease-out) forwards;
}
@keyframes sf-net-draw { to { stroke-dashoffset: 0; } }
.sf-net-node { opacity: 0; animation: sf-net-nodein 0.6s var(--spring) forwards; }
@keyframes sf-net-nodein { from { opacity: 0; } to { opacity: 1; } }
.sf-net-node .core { fill: #34d399; }
.sf-net-node .halo { fill: none; stroke: rgba(52,211,153,0.35); stroke-width: 1.5; animation: sf-net-halo 2.6s ease-in-out infinite; }
@keyframes sf-net-halo { 0%,100% { opacity: 0.9; r: 10; } 50% { opacity: 0.25; r: 15; } }
.sf-net-pkt { fill: #34d399; filter: drop-shadow(0 0 6px rgba(52,211,153,0.9)); }
.sf-net-pkt.amber { fill: #fbbf24; filter: drop-shadow(0 0 6px rgba(251,191,36,0.9)); }

.sf-splash-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 20px;
  padding: 24px;
}
.sf-splash-kicker {
  display: flex; align-items: center; gap: 12px;
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--accent);
  animation: v3-slide-down 0.7s var(--ease-out) 0.1s both;
}
.sf-splash-ver {
  letter-spacing: 0.08em;
  font-size: 10px;
  color: #060608;
  background: linear-gradient(120deg, #34d399, #10b981);
  border-radius: 6px;
  padding: 4px 7px;
  box-shadow: 0 0 18px rgba(52,211,153,0.5);
  animation: sf-ver-flip 0.7s var(--spring) 0.05s both;
}
@keyframes sf-ver-flip {
  0% { opacity: 0; transform: rotateX(90deg) translateY(-8px); }
  100% { opacity: 1; transform: none; }
}

/* Headline - per-letter rise, second line gradient, then a shine sweep */
.sf-splash-title {
  position: relative;
  margin: 0;
  font: 800 clamp(56px, 11vw, 128px)/0.98 var(--sans);
  letter-spacing: -0.045em;
  color: #f5f4f7;
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
  padding: 0.08em 0.1em;
}
.sf-splash-line { display: block; white-space: pre; }
.sf-splash-line.grad .sf-splash-ch {
  background: linear-gradient(115deg, #6ee7b7 10%, #34d399 45%, #f59e0b 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.sf-splash-ch {
  display: inline-block;
  animation: sf-ch-in 0.7s var(--spring) both;
  will-change: transform, opacity, filter;
}
@keyframes sf-ch-in {
  0%   { opacity: 0; transform: translateY(0.55em) rotate(6deg) scale(0.8); filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
/* Light sweep across the whole title after the letters land */
.sf-splash-shine {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.32) 50%, transparent 58%);
  transform: translateX(-120%);
  animation: sf-shine 1.1s ease-in-out 1.45s both;
  mix-blend-mode: overlay;
  pointer-events: none;
}
@keyframes sf-shine { to { transform: translateX(120%); } }

/* Feature chips - glass pills, springy pop with settle, glowing dot */
.sf-splash-chips { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; max-width: 680px; }
.sf-splash-chips span {
  display: inline-flex; align-items: center; gap: 8px;
  font: 650 11px/1 var(--mono);
  letter-spacing: 0.05em;
  color: rgba(245,244,247,0.88);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 999px;
  padding: 9px 15px;
  backdrop-filter: blur(5px);
  animation: sf-chip-in 0.55s var(--spring) both;
  transition: background 0.15s, border-color 0.15s, transform 0.15s var(--ease-out);
}
.sf-splash-chips span:hover { background: rgba(16,185,129,0.14); border-color: rgba(52,211,153,0.45); transform: translateY(-2px); }
@keyframes sf-chip-in {
  0%   { opacity: 0; transform: translateY(18px) scale(0.85) rotate(-2deg); }
  100% { opacity: 1; transform: none; }
}
.sf-chip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(52,211,153,0.9);
  animation: v3-dot-blink 2s ease-in-out infinite;
}

/* Hint with radar ring */
.sf-splash-hint {
  display: flex; align-items: center; gap: 10px;
  font: 500 11.5px/1 var(--mono);
  color: rgba(169,167,179,0.55);
  animation: v3-fade 0.8s ease 2.1s both;
}
.sf-hint-ring { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.sf-hint-ring::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid rgba(52,211,153,0.7);
  animation: sf-hint-radar 1.6s ease-out infinite;
}
@keyframes sf-hint-radar {
  from { transform: scale(0.6); opacity: 1; }
  to   { transform: scale(2.6); opacity: 0; }
}

/* Progress: glowing rail + comet head */
.sf-splash-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(255,255,255,0.06);
}
.sf-splash-progress i {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, rgba(16,185,129,0.4), var(--accent) 85%, #fbbf24);
  box-shadow: 0 0 12px rgba(52,211,153,0.8);
  transform-origin: left;
  animation: sf-splash-count 5s linear both;
}
@keyframes sf-splash-count { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.sf-splash-skip {
  position: absolute; top: 18px; right: 20px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: rgba(169,167,179,0.8);
  font: 650 11px/1 var(--sans);
  border-radius: 999px; padding: 9px 15px; cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.15s, color 0.15s;
  animation: v3-fade 0.6s ease 1s both;
}
.sf-splash-skip:hover { background: rgba(255,255,255,0.1); color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .sf-splash-progress i { animation-duration: 0.001s; }
  .sf-splash-ch, .sf-splash-chips span { animation-duration: 0.001s; }
}

/* ══════════════════════ 20a-2. FEATURE REEL - keynote scenes ══════════════════════ */
/* Story-style progress segments across the top */
.sf-reel-progress {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
  width: min(520px, 70vw);
  z-index: 3;
}
.sf-reel-progress span {
  flex: 1; height: 3px; border-radius: 999px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
}
.sf-reel-progress span i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--accent), #fbbf24);
  transform: scaleX(0); transform-origin: left;
}
.sf-reel-progress span.done i { transform: scaleX(1); }
.sf-reel-progress span.active i { animation: sf-splash-count 5.2s linear both; box-shadow: 0 0 10px rgba(52,211,153,0.7); }

/* Two-column scene body */
.sf-reel-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 70px);
  width: min(1040px, 90vw);
  padding: 24px;
  animation: v3-fade 0.35s ease both;
}
@media (max-width: 820px) {
  .sf-reel-body { grid-template-columns: 1fr; text-align: center; gap: 26px; }
  .sf-reel-text { align-items: center; }
}
.sf-reel-text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.sf-reel-title {
  font-size: clamp(34px, 4.6vw, 60px) !important;
  align-items: flex-start !important;
  padding-left: 0 !important;
  max-width: 100%;
}
/* Reel titles may span multiple words - wrap at word boundaries, never spill */
.sf-splash-word { display: inline-block; white-space: pre; }
.sf-reel-title .sf-splash-line { white-space: normal; }
@media (max-width: 820px) { .sf-reel-title { align-items: center !important; } }
.sf-reel-desc {
  margin: 0;
  font: 400 14.5px/1.65 var(--sans);
  color: rgba(245,244,247,0.7);
  max-width: 400px;
  animation: v3-slide-up 0.6s var(--ease-out) 0.55s both;
}
.sf-reel-count {
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.08em;
  color: rgba(169,167,179,0.45);
  animation: v3-fade 0.6s ease 1s both;
}

/* Demo window - the "video" frame */
.sf-reel-demoWrap { min-width: 0; animation: sf-reel-demo-in 0.8s var(--spring) 0.25s both; }
@keyframes sf-reel-demo-in {
  0%   { opacity: 0; transform: translateY(26px) scale(0.92) rotate(1.2deg); filter: blur(6px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
.sfr-win {
  border-radius: 16px;
  overflow: hidden;
  background: rgba(14,16,15,0.85);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 40px 90px rgba(0,0,0,0.6),
    0 0 40px rgba(16,185,129,0.08),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.sfr-winbar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sfr-winbar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.14); }
.sfr-winbar i:nth-child(1) { background: rgba(248,113,113,0.8); }
.sfr-winbar i:nth-child(2) { background: rgba(251,191,36,0.8); }
.sfr-winbar i:nth-child(3) { background: rgba(52,211,153,0.8); }
.sfr-winbar span { margin-left: 6px; font: 600 9.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(169,167,179,0.55); }
.sfr-svg { display: block; width: 100%; height: auto; }

/* Shared demo atoms */
.sfr-node {
  fill: #34d399;
  stroke: rgba(255,255,255,0.35); stroke-width: 1.5;
  filter: drop-shadow(0 0 8px rgba(52,211,153,0.6));
  transform-box: fill-box; transform-origin: center;
  animation: sfr-pop 0.5s var(--spring) both;
}
@keyframes sfr-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.sfr-edge {
  stroke: rgba(52,211,153,0.55); stroke-width: 2; fill: none;
  stroke-dasharray: 220; stroke-dashoffset: 220;
  animation: sf-net-draw 0.9s var(--ease-out) forwards;
}
.sfr-tcard { transform-box: fill-box; transform-origin: center; animation: sfr-pop 0.5s var(--spring) both; }
.sfr-tcard-bg { fill: rgba(255,255,255,0.06); stroke: rgba(255,255,255,0.12); }
.sfr-tcard-bg.picked { animation: sfr-picked 0.6s ease 1.6s both; }
@keyframes sfr-picked { to { fill: rgba(16,185,129,0.18); stroke: rgba(52,211,153,0.7); } }

/* Scene 1 - canvas panels slide out of the way */
.sfrc-panel { fill: rgba(255,255,255,0.08); stroke: rgba(255,255,255,0.14); }
.sfrc-left   { animation: sfrc-out-l 0.8s var(--ease-out) 1.0s both; }
.sfrc-right  { animation: sfrc-out-r 0.8s var(--ease-out) 1.15s both; }
.sfrc-bottom { animation: sfrc-out-b 0.8s var(--ease-out) 1.3s both; }
@keyframes sfrc-out-l { to { transform: translateX(-80px); opacity: 0; } }
@keyframes sfrc-out-r { to { transform: translateX(80px); opacity: 0; } }
@keyframes sfrc-out-b { to { transform: translateY(40px); opacity: 0; } }

/* Scene 2 - picked template highlight ring */
.sfr-pick-ring {
  fill: none; stroke: #34d399; stroke-width: 2;
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: sfr-ring 1s var(--spring) 1.6s both;
}
@keyframes sfr-ring {
  0% { opacity: 0; transform: scale(1.25); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}

/* Scene 3 - lock opens, badge stamps, ticks draw */
.sfr-lockwrap { transform-box: fill-box; transform-origin: center; animation: sfr-pop 0.6s var(--spring) 0.3s both; }
.sfr-lockbody { fill: rgba(255,255,255,0.14); stroke: rgba(255,255,255,0.3); animation: sfr-lockfill 0.5s ease 1.5s both; }
@keyframes sfr-lockfill { to { fill: rgba(16,185,129,0.55); stroke: rgba(52,211,153,0.9); } }
.sfr-keyhole { fill: rgba(6,6,8,0.7); }
.sfr-shackle {
  transform-box: fill-box; transform-origin: 90% 100%;
  animation: sfr-shackle 0.55s var(--spring) 1.3s both;
}
@keyframes sfr-shackle { to { transform: rotate(-28deg) translateY(-3px); } }
.sfr-probadge {
  transform-box: fill-box; transform-origin: center;
  opacity: 0;
  animation: sfr-stamp 0.5s var(--spring) 1.7s both;
}
@keyframes sfr-stamp {
  0% { opacity: 0; transform: scale(1.8) rotate(-6deg); }
  100% { opacity: 1; transform: none; }
}
.sfr-tick { opacity: 0; animation: sfr-tickin 0.45s var(--ease-out) both; }
@keyframes sfr-tickin { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.sfr-tick path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: sf-net-draw 0.4s ease-out forwards; animation-delay: inherit; }
.sfr-burst {
  fill: none; stroke: rgba(52,211,153,0.8); stroke-width: 2;
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: sfr-burst 0.8s ease-out 1.5s both;
}
@keyframes sfr-burst {
  0% { opacity: 1; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(5); }
}

/* Scene 4 - bars grow, sparkline draws */
.sfr-bar {
  fill: rgba(52,211,153,0.5);
  transform-box: fill-box; transform-origin: bottom;
  animation: sfr-grow 0.7s var(--spring) both;
}
@keyframes sfr-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.sfr-spark {
  fill: none; stroke: #fbbf24; stroke-width: 2.5; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(251,191,36,0.5));
  stroke-dasharray: 420; stroke-dashoffset: 420;
  animation: sf-net-draw 1.4s var(--ease-out) 1.6s forwards;
}
.sfr-sparkdot { fill: #fbbf24; filter: drop-shadow(0 0 8px rgba(251,191,36,0.9)); opacity: 0; animation: v3-fade 0.2s ease 2.4s forwards; }

/* Scene 5 - terminal typing + code mint */
.sfr-type {
  clip-path: inset(0 100% 0 0);
  animation: sfr-type 1.1s steps(30, end) 0.4s forwards;
}
@keyframes sfr-type { to { clip-path: inset(0 0 0 0); } }
.sfr-caret { animation: sf-toast-blink 0.8s steps(1) infinite; }
.sfr-codeout {
  opacity: 0;
  transform-box: fill-box; transform-origin: left center;
  animation: sfr-codeout 0.55s var(--spring) 1.8s both;
}
@keyframes sfr-codeout {
  0% { opacity: 0; transform: translateY(8px) scale(0.94); }
  100% { opacity: 1; transform: none; }
}
.sfr-copied { opacity: 0; animation: v3-fade 0.3s ease 2.4s forwards; }
.sfr-row { opacity: 0; animation: sfr-tickin 0.4s var(--ease-out) both; }

/* ── July · Security & Reliability update demos ─────────────────────────────── */
/* Envelope lifts off its server and flies to the inbox (DemoMail) */
.sfr-mail {
  transform-box: fill-box; transform-origin: center;
  offset-path: path("M52,150 C 150,60 210,60 290,60");
  animation: sfr-fly 1.6s var(--ease-out, cubic-bezier(.16,1,.3,1)) 0.6s both;
}
@keyframes sfr-fly {
  0%   { offset-distance: 0%;   opacity: 0; transform: scale(0.6); }
  15%  { opacity: 1; transform: scale(1); }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; transform: scale(0.7); }
}
/* Refresh glyph sweeps once, proving the layout survives (DemoPersist) */
.sfr-refresh {
  transform-box: fill-box; opacity: 0;
  animation: sfr-spin 1.15s var(--ease-out, ease) 1.35s both;
}
@keyframes sfr-spin {
  0%   { opacity: 0; transform: rotate(-30deg) scale(0.9); }
  25%  { opacity: 1; }
  75%  { opacity: 1; transform: rotate(300deg) scale(1); }
  100% { opacity: 0; transform: rotate(360deg) scale(0.9); }
}
/* Shield outline draws itself, then the check strokes on (DemoShield) */
.sfr-shielddraw path:first-child {
  stroke-dasharray: 340; stroke-dashoffset: 340;
  animation: sf-net-draw 1.1s ease-out 0.3s forwards;
}
.sfr-shield-check {
  stroke-dasharray: 46; stroke-dashoffset: 46;
  animation: sf-net-draw 0.45s ease-out 1.2s forwards;
}
/* 403 badges punch in over each blocked probe (DemoShield) */
.sfr-403 { transform-box: fill-box; opacity: 0; animation: sfr-stampin 0.5s var(--spring) both; }
@keyframes sfr-stampin {
  0%   { opacity: 0; transform: scale(1.9) rotate(-8deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sfr-mail, .sfr-refresh, .sfr-shielddraw path:first-child, .sfr-shield-check, .sfr-403 {
    animation-duration: 0.001s !important;
  }
}

/* Feature bullets - accent ticks slide in after the description */
.sf-reel-points { display: flex; flex-direction: column; gap: 9px; }
.sf-reel-point {
  display: flex; align-items: center; gap: 10px;
  font: 550 12.5px/1.4 var(--sans);
  color: rgba(245,244,247,0.82);
  opacity: 0;
  animation: sfr-tickin 0.5s var(--ease-out) both;
}
.sf-reel-point-ic {
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--reel-ac, var(--accent));
  background: color-mix(in srgb, var(--reel-ac, #34d399) 16%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--reel-ac, #34d399) 35%, transparent);
}
@media (max-width: 820px) { .sf-reel-point { justify-content: center; } }

/* Floating dust motes */
.sf-reel-dust { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sf-reel-dust i {
  position: absolute; bottom: -8px;
  border-radius: 50%;
  background: rgba(52,211,153,0.4);
  box-shadow: 0 0 6px rgba(52,211,153,0.5);
  animation: sf-dust-rise linear infinite;
}
@keyframes sf-dust-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  8%   { opacity: 0.7; }
  92%  { opacity: 0.5; }
  100% { transform: translateY(-105vh) translateX(30px); opacity: 0; }
}

/* 3D parallax wrapper + accent underglow that follows the scene color */
.sf-reel-tilt {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.18s ease-out;
  will-change: transform;
}
.sf-reel-glow {
  position: absolute; inset: 8% -6% -12% -6%;
  z-index: -1;
  background: radial-gradient(60% 55% at 50% 78%, color-mix(in srgb, var(--reel-ac, #34d399) 32%, transparent), transparent 75%);
  filter: blur(14px);
  animation: v3-fade 0.9s ease 0.5s both;
}
.sfr-win { animation: sf-win-float 5.5s ease-in-out 1.4s infinite; }
@keyframes sf-win-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* Jump-to-tour pill (bottom right) */
.sf-reel-tourbtn {
  position: absolute; bottom: 22px; right: 22px;
  border: 1px solid rgba(52,211,153,0.4);
  background: rgba(16,185,129,0.1);
  color: #34d399;
  font: 700 11.5px/1 var(--sans);
  border-radius: 999px; padding: 10px 17px; cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.15s, transform 0.15s var(--ease-out), box-shadow 0.2s;
  animation: v3-fade 0.6s ease 0.8s both;
}
.sf-reel-tourbtn:hover { background: rgba(16,185,129,0.2); transform: translateY(-2px); box-shadow: 0 0 20px rgba(52,211,153,0.25); }
@media (prefers-reduced-motion: reduce) { .sf-reel-progress span.active i { animation-duration: 0.001s; } }

/* ══════════════════════ 20b. USER MENU (avatar dropdown) ══════════════════════ */
.sf-user-menu {
  position: absolute;
  right: 0; top: 40px;
  z-index: 80;
  width: 268px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border2);
  box-shadow: 0 30px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
  transform-origin: top right;
}
html.light .sf-user-menu { box-shadow: 0 30px 70px rgba(20,18,30,0.22); }
.sf-user-head {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 15px 13px;
  background:
    radial-gradient(220px 90px at 15% 0%, rgba(16,185,129,0.14), transparent 70%),
    radial-gradient(200px 90px at 95% 10%, rgba(245,158,11,0.09), transparent 70%),
    var(--surface2);
  border-bottom: 1px solid var(--border);
}
.sf-user-avatar {
  position: relative;
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 14px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff; font: 700 14px/1 var(--sans);
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
  box-shadow: 0 6px 14px rgba(5,150,105,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: transform 0.2s var(--spring);
}
.sf-user-avatar:hover { transform: scale(1.05) rotate(-2deg); }
.sf-user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.sf-user-avatar-cam {
  position: absolute; right: -4px; bottom: -4px;
  width: 17px; height: 17px; border-radius: 6px;
  background: var(--surface3); color: var(--text-sec);
  border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
}
.sf-user-id { flex: 1; min-width: 0; }
.sf-user-name-row { display: flex; align-items: center; gap: 5px; }
.sf-user-name-input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none;
  color: var(--text); font: 700 13.5px/1.3 var(--sans);
  padding: 0; border-radius: 4px;
}
.sf-user-name-input:not([readonly]) { background: var(--surface); box-shadow: 0 0 0 1.5px var(--accent); padding: 2px 6px; }
.sf-user-pencil {
  width: 20px; height: 20px; flex-shrink: 0;
  border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.14s, color 0.14s;
}
.sf-user-pencil:hover { background: var(--surface3); color: var(--text); }
.sf-user-email { font: 500 10.5px/1.5 var(--mono); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-user-plan {
  align-self: flex-start;
  font: 700 8.5px/1 var(--mono); letter-spacing: 0.08em;
  color: var(--text-dim); background: var(--surface3);
  border-radius: 999px; padding: 4px 8px; flex-shrink: 0;
}
.sf-user-plan.pro { color: #fff; background: linear-gradient(120deg, #10b981, #14b8a6); box-shadow: 0 2px 8px rgba(16,185,129,0.4); }
.sf-user-plan.team { color: #241703; background: linear-gradient(120deg, #fbbf24, #f59e0b); box-shadow: 0 2px 8px rgba(251,191,36,0.4); }
.sf-user-upgrade {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: calc(100% - 20px);
  margin: 10px 10px 2px;
  height: 38px; border-radius: 12px;
  font-size: 12px; font-weight: 700;
}
.sf-user-upgrade svg { width: 14px; height: 14px; }
.sf-user-rows { padding: 8px; display: flex; flex-direction: column; gap: 1px; }
.sf-user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-sec);
  font: 550 12.5px/1 var(--sans);
  transition: background 0.13s, color 0.13s, transform 0.15s var(--ease-out);
}
.sf-user-row:hover { background: var(--surface2); color: var(--text); transform: translateX(3px); }
.sf-user-row-ic { display: inline-flex; color: var(--text-dim); }
.sf-user-row:hover .sf-user-row-ic { color: var(--accent); }
.sf-user-row-arrow { margin-left: auto; color: var(--text-muted); font-size: 12px; opacity: 0; transform: translateX(-4px); transition: opacity 0.15s, transform 0.15s; }
.sf-user-row:hover .sf-user-row-arrow { opacity: 1; transform: none; }
.sf-user-foot {
  display: flex; gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border);
}
.sf-user-signout, .sf-user-reset {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 0; border-radius: 10px; cursor: pointer;
  font: 650 11.5px/1 var(--sans);
  height: 34px;
  transition: background 0.15s, color 0.15s;
}
.sf-user-signout { flex: 1.4; color: var(--red); background: var(--red-dim); }
.sf-user-signout:hover { background: rgba(248,113,113,0.22); }
.sf-user-reset { flex: 1; color: var(--text-dim); background: var(--surface2); }
.sf-user-reset:hover { color: var(--text); background: var(--surface3); }

/* ══════════════════════ 20c. PRO GATES - ribbon locks ══════════════════════ */
.rib-tab-pro {
  display: inline-block;
  margin-left: 6px;
  font: 700 7.5px/1 var(--mono);
  letter-spacing: 0.08em;
  color: #fff;
  background: linear-gradient(120deg, #10b981, #14b8a6);
  border-radius: 5px;
  padding: 2.5px 4.5px;
  vertical-align: 2px;
  box-shadow: 0 1px 4px rgba(16,185,129,0.4);
}
.sf-prolock {
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 22px !important;
  background:
    radial-gradient(320px 120px at 8% 10%, rgba(16,185,129,0.10), transparent 70%),
    color-mix(in srgb, var(--surface2) 72%, transparent) !important;
}
.sf-prolock-badge {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #059669, #14b8a6);
  box-shadow: 0 8px 20px rgba(5,150,105,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
  animation: v3-float 4s ease-in-out infinite;
}
.sf-prolock-tx { flex: 1; min-width: 0; }
.sf-prolock-tx h4 { margin: 0 0 3px; font: 750 14px/1.2 var(--sans); color: var(--text); display: flex; align-items: center; gap: 8px; }
.sf-prolock-chip {
  font: 700 8px/1 var(--mono); letter-spacing: 0.09em;
  color: #fff; background: linear-gradient(120deg, #10b981, #14b8a6);
  border-radius: 5px; padding: 3px 5px;
}
.sf-prolock-tx p { margin: 0; font: 400 12px/1.5 var(--sans); color: var(--text-sec); max-width: 560px; }
.sf-prolock-bullets { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; font: 600 10px/1 var(--mono); color: var(--text-dim); }
.sf-prolock-cta {
  flex-shrink: 0;
  height: 38px; padding: 0 18px;
  border-radius: 11px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700;
}
.sf-prolock-cta svg { width: 14px; height: 14px; }

/* Locked profile presets */
.profile-card.locked { position: relative; opacity: 0.6; filter: saturate(0.55); cursor: pointer; }
.profile-card.locked:hover { opacity: 0.85; filter: saturate(0.8); }
.profile-lock {
  position: absolute; top: 7px; right: 8px;
  display: inline-flex; align-items: center; gap: 3px;
  font: 700 7.5px/1 var(--mono); letter-spacing: 0.07em;
  color: #fff;
  background: linear-gradient(120deg, #10b981, #14b8a6);
  border-radius: 5px; padding: 3px 5px;
  box-shadow: 0 1px 4px rgba(16,185,129,0.4);
}

/* ══════════════════════ 21. DE-BOX PASS ══════════════════════ */
/* Fewer outlined rectangles: borders get quieter, grouping happens through
   background tone, spacing and dividers instead of stroked boxes. */
:root, [data-theme="dark"], html.dark {
  --border:  rgba(255,255,255,0.055);
  --border2: rgba(255,255,255,0.10);
}
[data-theme="light"], html.light {
  --border:  rgba(20,18,30,0.07);
  --border2: rgba(20,18,30,0.11);
}

/* Segmented controls: tone-on-tone pills, no stroke */
.header-seg { border-color: transparent !important; }

/* Version chip: quiet text, no box */
.header .tag { border-color: transparent !important; background: transparent !important; padding-left: 0 !important; }

/* Bottom ribbon groups: soft tonal panels separated by gaps, not strokes */
.bottom-panel .rib-group {
  border-color: transparent;
  background: color-mix(in srgb, var(--surface2) 72%, transparent);
  border-radius: 14px;
}

/* Floating canvas chrome: soften strokes, lean on shadow for separation */
.minimap, .minimap-empty { border-color: transparent !important; }
.packet-legend { border-color: transparent; box-shadow: 0 6px 20px rgba(0,0,0,0.35); }

/* Right-panel cards / findings: tonal instead of stroked (where bordered) */
.right-panel .finding { border-color: transparent; background: var(--surface2); border-radius: 12px; }
.template-card { border-color: transparent !important; background: var(--surface2) !important; border-radius: 14px !important; }
.template-card:hover { background: var(--surface3) !important; box-shadow: inset 0 0 0 1px rgba(16,185,129,0.35); }

/* Dashboard: the strip and cards already lean tonal; drop double-strokes */
.sf-dash-quick-card { border-color: transparent; }
.sf-dash-plan, .sf-dash-strip, .sf-dash-card { box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 6px 18px rgba(0,0,0,0.16); }
html.light .sf-dash-plan, html.light .sf-dash-strip, html.light .sf-dash-card { box-shadow: 0 6px 18px rgba(20,18,30,0.06); }

/* ── Dashboard loading skeletons ─────────────────────────────────────────── */
.sf-skel { min-height: 132px; }
.sf-skel-bar {
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.05) 25%,
    rgba(255,255,255,0.11) 45%,
    rgba(255,255,255,0.05) 65%);
  background-size: 200% 100%;
  animation: sf-skel-shimmer 1.4s ease-in-out infinite;
}
html.light .sf-skel-bar {
  background: linear-gradient(90deg,
    rgba(20,18,30,0.06) 25%,
    rgba(20,18,30,0.12) 45%,
    rgba(20,18,30,0.06) 65%);
  background-size: 200% 100%;
}
@keyframes sf-skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sf-skel-bar { animation: none; } }

/* ── Node rename field (right panel header) ──────────────────────────────── */
/* A real, findable field: hairline border at rest, accent ring while editing,
   pencil that invites the click. */
.rp-rename {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
}
.rp-rename input {
  flex: 1; min-width: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 7px;
  color: var(--text);
  font: 500 12.5px/1.2 var(--sans);
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.rp-rename input::placeholder { color: var(--text-muted); }
.rp-rename:hover input { border-color: var(--border3); }
.rp-rename.editing input,
.rp-rename input:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.rp-rename-pen {
  flex-shrink: 0;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s;
}
.rp-rename:hover .rp-rename-pen,
.rp-rename.editing .rp-rename-pen { color: var(--accent); }

/* ── Project name (canvas header) ────────────────────────────────────────── */
/* Underline + pencil on hover so "click to rename" is discoverable. */
.sf-project-name {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 5px;
  transition: background 0.15s;
}
.sf-project-name:hover { background: var(--surface2); }
.sf-project-name .sf-project-pen {
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.sf-project-name:hover .sf-project-pen { opacity: 1; color: var(--accent); }

/* ══════════════════════ LAYOUT GUARDS (P5) ══════════════════════ */
/* Text must never escape its container. Long node names, error strings and
   translated copy all wrap or truncate instead of clipping/overflowing. */
.left-panel, .right-panel, .bottom-panel, .header,
.context-menu, .sf-tip, .sf-hud-copy, .sfd-card, .card-node,
.sf-user-menu, .dashboard, .modal, .sfdlg-card {
  overflow-wrap: break-word;
}
/* Flex children default to min-width:auto, which lets long labels push rows
   wider than their panel. Pin the known rows down and ellipsize labels. */
.config-row > *, .palette-item > *, .sf-hud-main > *, .rp-rename > * { min-width: 0; }
.palette-item span,
.config-row label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══════════════════════ MOTION PREFERENCES (P9) ══════════════════════ */
/* Every animation collapses for people who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════ pre-run validation block ══════════════════════
   This dialog is the one place the app refuses to do what was asked, so it has
   to earn that: say what is wrong, why it matters, and what to do - at a size
   somebody can actually read. The previous version rendered the whole
   explanation at 11-12px inside a tinted box, which is why nobody read it. */

.sf-vblock {
  width: min(600px, calc(100vw - 40px));
  max-height: min(720px, calc(100vh - 60px));
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--red) 34%, var(--border2));
  background: var(--bg-elev, var(--surface));
  box-shadow: 0 40px 90px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  animation: v3-pop 0.3s var(--ease-out) both;
}

.sf-vblock-h {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--red) 7%, transparent);
}
.sf-vblock-ico {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--red) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 34%, transparent);
  color: var(--red);
}
.sf-vblock-ico svg { width: 20px; height: 20px; }
.sf-vblock-h h2 {
  margin: 0 0 5px;
  font: 700 18px/1.25 var(--sans);
  letter-spacing: -0.02em;
  color: var(--text);
}
.sf-vblock-h p {
  margin: 0;
  max-width: 46ch;
  font: 400 13px/1.6 var(--sans);
  color: var(--text-sec);
}
.sf-vblock-x {
  position: absolute; top: 14px; right: 14px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sf-vblock-x:hover { background: var(--surface3); color: var(--text); }
.sf-vblock-x svg { width: 13px; height: 13px; }

.sf-vblock-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 24px 4px;
}

.sf-vblock-item { padding: 18px 0; border-bottom: 1px solid var(--border); }
.sf-vblock-item:last-child { border-bottom: 0; }

.sf-vblock-item-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sf-vblock-n {
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--red) 15%, transparent);
  color: var(--red);
  font: 700 11px/1 var(--mono);
}
.sf-vblock-item-h h3 {
  flex: 1;
  margin: 0;
  font: 650 14.5px/1.35 var(--sans);
  letter-spacing: -0.01em;
  color: var(--text);
}
.sf-vblock-item-h code {
  flex: none;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 4px 7px;
  border-radius: 5px;
}

.sf-vblock-why {
  margin: 0 0 12px;
  padding-left: 32px;
  font: 400 13px/1.65 var(--sans);
  color: var(--text-sec);
}

/* The fix is the reason the dialog exists, so it gets its own block rather than
   being another sentence in the paragraph. */
.sf-vblock-fix {
  margin-left: 32px;
  padding: 11px 13px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--green) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 26%, transparent);
}
.sf-vblock-fix-k {
  display: block;
  margin-bottom: 4px;
  font: 700 9.5px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}
.sf-vblock-fix p {
  margin: 0;
  font: 400 13px/1.6 var(--sans);
  color: var(--text);
}

.sf-vblock-locate {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 10px 0 0 32px;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text-sec);
  font: 600 12px/1 var(--sans);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sf-vblock-locate:hover { background: var(--surface3); color: var(--text); border-color: var(--border3); }
.sf-vblock-locate svg { width: 13px; height: 13px; transition: transform 0.18s var(--ease-out); }
.sf-vblock-locate:hover svg { transform: translateX(2px); }

.sf-vblock-f {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface2);
  font: 400 12.5px/1.5 var(--sans);
  color: var(--text-sec);
}

@media (prefers-reduced-motion: reduce) {
  .sf-vblock { animation: none; }
  .sf-vblock-locate svg { transition: none; }
}

/* ── Minimap: dismissable ──────────────────────────────────────────────────
   It is click-to-pan, so it cannot be made click-through; it therefore has to
   be possible to get it out of the way, or the nodes beneath it are simply
   unreachable. */
.minimap-toggle {
  position: absolute;
  top: 5px; right: 5px;
  z-index: 2;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border: 0; border-radius: 5px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.minimap:hover .minimap-toggle { opacity: 1; }
.minimap-toggle:hover { color: var(--text); background: var(--surface3); }
.minimap-toggle:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 1px; }
.minimap-toggle svg { width: 11px; height: 11px; }

.minimap-show {
  position: absolute;
  bottom: 16px;
  right: var(--sf-right-w, 16px);
  z-index: 5;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.minimap-show:hover { color: var(--text); border-color: var(--border3); background: var(--surface2); }
.minimap-show svg { width: 15px; height: 15px; }