/* PassiveHub — Glass Theme · Single source of truth
   ════════════════════════════════════════════════════════════════════
   HOW THIS PROJECT'S STYLING WORKS  (read this before editing anything)
   ════════════════════════════════════════════════════════════════════
   
   This file holds every color, font, border, radius, and effect the app
   uses. Change a value here and it should propagate everywhere. If you
   find yourself hardcoding a hex, rgba, or font string anywhere else,
   stop — add a token here instead, then reference it.
   
   ─── Where things live ─────────────────────────────────────────────
   
   theme.css (this file) — all design tokens as CSS variables.
   
   index.html / pipeline.html / imageforge.html — React apps. Each has
     a `C` object (colors) and `F` object (fonts) near the top that
     reads from this file via `_v('--xxx') || fallback`. Use those:
       background: C.bg, fontFamily: F.sans, border: '1px solid '+C.border
     Never hardcode hex/rgba/font strings in these files. If C is
     missing a value, add the token here first, then add it to C.
   
   titleengine.html / scriptengine.html / islamicengine.html /
   seoengine.html / thumbworkshop.html / sync.html / costs.html —
     iframe tools with plain <style> blocks (no React, no C object).
     Use var(--xxx) directly. Token names available are listed in the
     "Aliases" section below — those names exist specifically so iframe
     CSS reads naturally (e.g. var(--surface), var(--card), var(--sans)).
   
   ─── How to change the look ────────────────────────────────────────
   
   Want a different background mood? Uncomment one of the mesh presets
     at the top, or change `applyMeshPreset` in index.html (also writes
     to backend so all team members see it).
   
   Want to swap the accent color? Edit --accent and --accent-bg below.
   
   Want different fonts? Edit --font-sans and --font-mono. The aliases
     --sans and --mono will follow automatically.
   
   Want a new color used in many places? Add a token in the right
     section below, then either reference it via C in React or
     var(--xxx) in iframe CSS.
   
   ─── What NOT to touch ─────────────────────────────────────────────
   
   The mesh changer (`applyMeshPreset` in index.html). It writes the
     gradient string directly to body.style + iterates all iframes.
     Looks ugly, works on mobile Edge precisely because it bypasses
     pure-var rendering. Leave it alone unless mesh changing breaks.
   
   Per-tool identity accent colors — ScriptEngine yellow, IslamicEngine
     green, ThumbWorkshop pink, TitleEngine purple, SEOEngine purple.
     These define each tool's visual identity, not the global theme.
     They live as local :root overrides inside each iframe and should
     not be tokenized into theme.css.
   
   Channel color arrays (CH_DEFAULT_COLORS in index.html and
     pipeline.html) — these are data, not theme.
   
   ─── Mobile Edge gotchas ───────────────────────────────────────────
   
   No nested var() chains (var(--x, var(--y))). Mobile Edge fails on
     these. The fallback pattern `_v('--x') || 'literal'` in JS is fine
     because the fallback is a literal, not another var().
   
   Background repaints from var() changes can fail on mobile Edge.
     That's why applyMeshPreset writes the full gradient string to
     body.style instead of relying on body{background:...} reading
     updated --m1..--m4 vars. Don't "fix" this.
   
   ════════════════════════════════════════════════════════════════════
   MESH MOOD PRESETS  (uncomment one to change background mood)
   ════════════════════════════════════════════════════════════════════ */

/* 🟣 Purple/Indigo (current) */
:root { --m1:70,60,150; --m2:100,70,170; --m3:60,80,140; --m4:130,70,160; }

/* 🩷 Pink/Rose — uncomment to use:
:root { --m1:236,72,153; --m2:244,114,182; --m3:168,85,247; --m4:251,113,133; } */

/* 🔵 Ocean/Blue — uncomment to use:
:root { --m1:59,130,246; --m2:6,182,212; --m3:99,102,241; --m4:56,189,248; } */

/* 🟢 Emerald — uncomment to use:
:root { --m1:16,185,129; --m2:74,222,128; --m3:6,182,212; --m4:52,211,153; } */

/* 🟠 Amber/Warm — uncomment to use:
:root { --m1:245,158,11; --m2:251,191,36; --m3:236,72,153; --m4:239,68,68; } */

/* 🔴 Red/Crimson — uncomment to use:
:root { --m1:239,68,68; --m2:236,72,153; --m3:168,85,247; --m4:248,113,113; } */

/* ═══ Core design tokens ═══ */
:root {
  /* Backgrounds & Surfaces */
  --bg:#06060e;--bg2:rgba(255,255,255,.025);
  --sf:rgba(255,255,255,.05);--sf-alt:rgba(255,255,255,.07);--sf3:rgba(255,255,255,.095);
  --border:rgba(255,255,255,.08);--border-h:rgba(255,255,255,.18);

  /* Brand */
  --accent:#818cf8;--accent-bg:rgba(129,140,248,.10);--accent2:#c4b5fd;

  /* Text */
  --text:#eef0f8;--text-2:#9498b5;--text-3:#5e6280;--white:#f0f0f8;

  /* Semantic */
  --green:#4ade80;--green-bg:rgba(74,222,128,.10);
  --amber:#fbbf24;--amber-bg:rgba(251,191,36,.10);
  --red:#f87171;--red-bg:rgba(248,113,133,.08);
  --cyan:#67e8f9;--danger:#f87171;
  --orange:#f97316;--gold:#fbbf24;--goldDim:rgba(251,191,36,.1);

  /* Fonts */
  --font-sans:'DM Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  /* Glass */
  --glass-blur:blur(20px) saturate(150%);
  --glass-shadow:0 8px 32px rgba(0,0,0,0.2);

  /* Component tokens */
  --radius:12px;--radius-sm:10px;--radius-lg:16px;
  --spinner-track:rgba(255,255,255,.14);
  --spinner-speed:.7s;
  --progress-h:5px;
  --progress-bg:rgba(128,128,128,.1);

  /* ── Aliases (iframe tools use these names) — direct values, no nested var() ── */
  --surface:rgba(255,255,255,.05);--surfaceAlt:rgba(255,255,255,.07);
  --card:rgba(255,255,255,.07);--card2:rgba(255,255,255,.095);
  --border2:rgba(255,255,255,.18);--borderLight:rgba(255,255,255,.18);
  --textMuted:#9498b5;--textDim:#5e6280;
  --text2:#9498b5;--text3:#5e6280;
  --accentLight:rgba(129,140,248,.10);--accentDim:rgba(129,140,248,.10);
  --greenDim:rgba(74,222,128,.10);--redDim:rgba(248,113,133,.08);--amberDim:rgba(251,191,36,.10);
  --sans:'DM Sans',system-ui,sans-serif;--mono:'JetBrains Mono',monospace;
  --dim:#9498b5;--yellow:#fbbf24;--purple:#c4b5fd;
}

/* ═══ Reset ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ═══ Mood wash — subtle corner blobs only (cleaner, cards stand out) ═══ */
body{background:
    radial-gradient(ellipse 60% 50% at 15% 15%,rgba(var(--m1),.16),transparent 60%),
    radial-gradient(ellipse 50% 60% at 85% 80%,rgba(var(--m2),.12),transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 50%,rgba(var(--m3),.06),transparent 60%),
    #06060e !important;
  background-attachment:fixed !important}

/* ═══ Glass — only on sidebar/mobile header (not on cards, was causing hazy bloom) ═══ */
.ch-sidebar,.ch-mob-header{backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow)}
[data-glass]{backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow)}

/* ═══ Inputs ═══ */
input,textarea,select{font-family:var(--font-sans);font-size:12.5px}
input::placeholder,textarea::placeholder,select::placeholder{color:var(--text-2) !important;opacity:.75 !important}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent) !important;box-shadow:0 0 0 3px var(--accent-bg) !important}

/* ═══ Typography ═══ */
h1,h2,h3{font-family:var(--font-sans);font-weight:700;letter-spacing:-0.02em;line-height:1.2}
button{font-family:var(--font-sans);font-weight:600;font-size:12px;border-radius:var(--radius-sm);transition:all .12s ease}
button:active:not(:disabled){transform:scale(0.97)}

/* ═══ Spinner ═══ */
.spinner{display:inline-block;border:2px solid var(--spinner-track);border-top-color:var(--accent);border-radius:50%;width:16px;height:16px;animation:spin var(--spinner-speed) linear infinite}

/* ═══ Scrollbar ═══ */
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:99px}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.06) transparent}
::selection{background:var(--accent);color:#fff}

/* ═══ Shared components ═══ */
.btn-hover{cursor:pointer;transition:all .15s ease}
.btn-hover:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}
.btn-hover:active:not(:disabled){transform:translateY(0)}
.card-hover{transition:border-color .2s ease}.card-hover:hover{border-color:var(--border-h)}
.fade-up{animation:fadeUp .3s ease both}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:800px){input,textarea,select{font-size:16px !important}}
@media print{body::before{display:none}body{background:#fff;color:#000}}

/* ═══ Utility classes ═══ */
.mono{font-family:var(--font-mono)}

/* ═══ Global select polish — applies to ALL <select> across the app ═══ */
/* Mirrors the ImageForge model dropdown trigger style so all dropdowns feel unified */
select:not([data-native]){
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:9px;
  padding:9px 32px 9px 12px;
  color:#e8eaf3;
  font-size:12px;
  font-weight:600;
  font-family:var(--font-sans);
  cursor:pointer;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23a5b4fc' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  transition:border-color .15s, background-color .15s, box-shadow .15s, transform .15s
}
select:not([data-native]):hover{border-color:rgba(129,140,248,0.30);background-color:rgba(255,255,255,0.06)}
select:not([data-native]):focus{border-color:#818cf8;box-shadow:0 0 0 3px rgba(129,140,248,0.15)}
select:not([data-native]):disabled{opacity:0.4;cursor:not-allowed}
select:not([data-native]) option{background:#15152b;color:#e8eaf3;padding:8px 12px;font-weight:500}
select:not([data-native]) option:checked,select:not([data-native]) option:hover{background:rgba(129,140,248,0.14);color:#c7d2fe}
select:not([data-native]) optgroup{background:#0f0f1e;color:#a5b4fc;font-weight:700;font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:0.5px;padding-top:6px}
select:not([data-native])::-ms-expand{display:none}

/* ═══ Global Credit symbol — use as <span class="cr">2.5</span> to render: [coin] 2.5 ═══ */
.cr{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-weight:700;color:#fbbf24}
.cr::before{
  content:"";
  display:inline-block;
  width:11px;
  height:11px;
  flex-shrink:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><circle cx='8' cy='8' r='7' fill='%23fbbf24' stroke='rgba(0,0,0,0.25)' stroke-width='1'/><circle cx='8' cy='8' r='5' fill='none' stroke='rgba(0,0,0,0.2)' stroke-width='0.8'/><text x='8' y='11.5' text-anchor='middle' font-size='8' font-weight='800' fill='rgba(0,0,0,0.55)' font-family='system-ui'>C</text></svg>");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  vertical-align:middle
}
/* Variant: green coin for session totals */
.cr.cr-green{color:#4ade80}
.cr.cr-green::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><circle cx='8' cy='8' r='7' fill='%234ade80' stroke='rgba(0,0,0,0.25)' stroke-width='1'/><circle cx='8' cy='8' r='5' fill='none' stroke='rgba(0,0,0,0.2)' stroke-width='0.8'/><text x='8' y='11.5' text-anchor='middle' font-size='8' font-weight='800' fill='rgba(0,0,0,0.55)' font-family='system-ui'>C</text></svg>")}
/* Variant: small inline (for hints/sub-text) */
.cr.cr-sm{font-size:10px}
.cr.cr-sm::before{width:9px;height:9px}
/* Variant: large (for prominent display like session total) */
.cr.cr-lg{font-size:15px}
.cr.cr-lg::before{width:14px;height:14px}

/* ═══ Auto-inject coin icon into existing .credit-pill classes across engines ═══ */
/* This means existing pills like "≈ 6 credits" become "[coin] ≈ 6 credits" without touching JSX */
.credit-pill:not(.no-coin)::before, .credit-pill-sm:not(.no-coin)::before, .credit-pill-xs:not(.no-coin)::before{
  content:"";
  display:inline-block;
  width:10px;
  height:10px;
  margin-right:4px;
  vertical-align:-1px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><circle cx='8' cy='8' r='7' fill='%23fbbf24' stroke='rgba(0,0,0,0.25)' stroke-width='1'/><circle cx='8' cy='8' r='5' fill='none' stroke='rgba(0,0,0,0.2)' stroke-width='0.8'/><text x='8' y='11.5' text-anchor='middle' font-size='8' font-weight='800' fill='rgba(0,0,0,0.55)' font-family='system-ui'>C</text></svg>");
  background-size:contain;
  background-repeat:no-repeat
}
.credit-pill-xs::before{width:9px;height:9px;margin-right:3px}




/* ════════════════════════════════════════════════════════════════════
   PassiveHub tool shell — shared classes for all in-iframe tools
   ════════════════════════════════════════════════════════════════════
   Use these for SEO Engine, Title Engine, Script Engine, Thumb Workshop,
   Prompt Factory, ImageForge. Each tool sets `--tool-accent` and
   `--tool-accent-2` at its :root for identity color, and the gradient
   button + chip active states + focus rings + tag pills follow.
   Defaults to indigo (matches global --accent).
   ──────────────────────────────────────────────────────────────────── */

:root {
  --tool-accent: #818cf8;
  --tool-accent-2: #a78bfa;
  --tool-accent-bg: rgba(129,140,248,.10);
  --tool-accent-border: rgba(129,140,248,.30);
}

.ph-app{max-width:100%;padding:24px 28px 36px}
@media(max-width:800px){.ph-app{padding:16px 14px 32px}}

/* Top bar */
.ph-topbar{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.ph-h1{font-size:22px;font-weight:700;letter-spacing:-0.02em;color:var(--text);margin:0;line-height:1.2}
.ph-sub{font-size:11px;color:var(--text-3);font-family:var(--font-mono);margin-top:3px}
.ph-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:99px;background:var(--sf);border:1px solid var(--border);color:var(--text-2);font-size:11px;font-family:var(--font-sans);cursor:pointer;transition:border-color .15s,color .15s}
.ph-pill:hover{border-color:var(--border-h);color:var(--text)}

/* Two-pane shell */
.ph-grid-2{display:grid;grid-template-columns:280px 1fr;gap:14px;align-items:start}
@media(max-width:800px){.ph-grid-2{grid-template-columns:1fr}}

/* Settings rail (left) */
.ph-rail{background:var(--sf);border:1px solid var(--border);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:12px;position:sticky;top:16px}
@media(max-width:800px){.ph-rail{position:static}}

/* Right pane container */
.ph-pane{display:flex;flex-direction:column;gap:12px}

/* Card */
.ph-card{background:var(--sf);border:1px solid var(--border);border-radius:14px;padding:14px}

/* Section label (mono uppercase 9px letter-spacing) */
.ph-label{font-family:var(--font-mono);font-size:9px;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:0.6px;font-weight:600;margin-bottom:6px;display:block}

/* Form inputs */
.ph-input,.ph-textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:9px;padding:9px 12px;color:var(--text);font-size:12px;font-family:var(--font-sans);outline:none;transition:border-color .15s,box-shadow .15s}
.ph-input:focus,.ph-textarea:focus{border-color:var(--tool-accent);box-shadow:0 0 0 3px var(--tool-accent-bg)}
.ph-textarea{resize:none;line-height:1.55;min-height:90px}
.ph-input::placeholder,.ph-textarea::placeholder{color:var(--text-3);opacity:1;font-size:12px}

/* Settings chip strip */
.ph-row{display:flex;gap:6px;align-items:center}
.ph-chip{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:9px;padding:8px 10px;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--text);cursor:pointer;transition:all .15s;font-family:var(--font-sans);white-space:nowrap}
.ph-chip:hover{border-color:var(--border-h)}
.ph-chip.is-active{background:var(--tool-accent-bg);border-color:var(--tool-accent-border);color:var(--accent2)}
.ph-chip-fixed{flex:0 0 auto;padding:8px 12px}
.ph-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block}

.ph-divider{height:1px;background:rgba(255,255,255,.05);margin:4px 0}

/* Cost row + Generate button */
.ph-cost-row{display:flex;align-items:center;justify-content:space-between;font-size:11px}
.ph-cost-label{font-family:var(--font-mono);color:rgba(255,255,255,.45);font-weight:600;font-size:9.5px;text-transform:uppercase;letter-spacing:0.5px}
.ph-cost-val{font-family:var(--font-mono);color:var(--gold);font-weight:700;font-size:11px}

.ph-gen-btn{width:100%;padding:11px 14px;border-radius:10px;background:linear-gradient(135deg,var(--tool-accent),var(--tool-accent-2));color:#fff;border:none;font-weight:700;font-size:13px;font-family:var(--font-sans);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s,filter .15s}
.ph-gen-btn:hover:not(:disabled){filter:brightness(1.08)}
.ph-gen-btn:active:not(:disabled){transform:scale(.985)}
.ph-gen-btn:disabled:not(.is-generating){opacity:.4;cursor:not-allowed;background:rgba(255,255,255,.05);color:var(--text-3)}
.ph-gen-credit{display:inline-flex;align-items:center;gap:4px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.16);padding:3px 9px;border-radius:99px;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.3px;color:#fff;margin-left:6px}
/* Generating: keep gradient, show spinner/message in white inside the button */
.ph-gen-btn.is-generating{cursor:progress}
.ph-gen-btn.is-generating .ph-progress-msg{color:#fff}
.ph-gen-btn.is-generating .ph-spinner{border-color:rgba(255,255,255,.4);border-top-color:#fff}

/* Card header + mini button */
.ph-card-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ph-card-title{font-size:12.5px;font-weight:600;color:var(--text);flex:1;margin:0}
.ph-mini-btn{padding:5px 10px;border-radius:7px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text-2);font-size:11px;font-weight:600;font-family:var(--font-sans);cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .15s}
.ph-mini-btn:hover:not(:disabled){border-color:var(--tool-accent-border);color:var(--accent2)}
.ph-mini-btn:disabled{opacity:.4;cursor:not-allowed}

/* Result area (editable output textarea) */
.ph-result-area{width:100%;background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.05);border-radius:10px;padding:10px 12px;color:var(--text);font-size:12px;line-height:1.55;font-family:var(--font-sans);outline:none;resize:none;transition:border-color .15s,box-shadow .15s}
.ph-result-area:focus{border-color:var(--tool-accent);box-shadow:0 0 0 3px var(--tool-accent-bg)}

/* Counters */
.ph-counter{font-size:10px;font-family:var(--font-mono);color:rgba(255,255,255,.45);margin-top:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ph-counter .ok{color:var(--green)}
.ph-counter .warn{color:var(--amber)}
.ph-counter .over{color:var(--red);font-weight:700}

/* Tag pills */
.ph-tag-pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.ph-tag{display:inline-block;font-size:10.5px;padding:3px 9px;border-radius:99px;background:var(--tool-accent-bg);color:var(--accent2);border:1px solid rgba(167,139,250,.20);font-family:var(--font-sans)}

/* Meter (progress bar) */
.ph-meter-row{margin-top:10px;display:flex;align-items:center;gap:8px}
.ph-meter-track{flex:1;height:5px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
.ph-meter-fill{height:100%;border-radius:3px;background:var(--green);transition:width .3s,background-color .3s}
.ph-meter-fill.warn{background:var(--amber)}
.ph-meter-fill.over{background:var(--red)}
.ph-meter-num{font-family:var(--font-mono);font-size:10.5px;font-weight:700;min-width:60px;text-align:right;color:var(--green)}
.ph-meter-num.warn{color:var(--amber)}
.ph-meter-num.over{color:var(--red)}

/* Score chip */
.ph-score-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ph-score-chip{padding:3px 10px;border-radius:99px;font-family:var(--font-mono);font-size:11px;font-weight:700}
.ph-score-chip.good{background:var(--green-bg);border:1px solid rgba(74,222,128,.30);color:var(--green)}
.ph-score-chip.mid{background:var(--amber-bg);border:1px solid rgba(251,191,36,.30);color:var(--amber)}
.ph-score-chip.bad{background:var(--red-bg);border:1px solid rgba(248,113,113,.30);color:var(--red)}

/* Suggestions */
.ph-suggest{display:flex;align-items:flex-start;gap:8px;padding:6px 0;font-size:11.5px;line-height:1.5}
.ph-suggest .icon{flex-shrink:0;width:14px;font-family:var(--font-mono);font-weight:700}
.ph-suggest.good{color:var(--green)}
.ph-suggest.warn{color:var(--amber)}
.ph-suggest.bad{color:var(--red)}

/* Sources collapsible */
.ph-sources{margin-top:10px;font-size:11.5px;color:var(--text-2);display:flex;align-items:center;gap:6px;cursor:pointer;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);transition:background .15s,border-color .15s;width:100%;text-align:left;font-family:var(--font-sans)}
.ph-sources:hover{background:rgba(255,255,255,.04);border-color:var(--border)}
.ph-sources-list{margin-top:6px;padding:8px 10px;background:rgba(0,0,0,.18);border-radius:8px;display:flex;flex-direction:column;gap:6px;font-size:11px}
.ph-sources-list a{color:var(--accent2);text-decoration:none;word-break:break-all}
.ph-sources-list a:hover{text-decoration:underline}

/* Actions row */
.ph-actions{display:flex;gap:8px;flex-wrap:wrap}
.ph-actions .ph-mini-btn{padding:8px 14px;font-size:11.5px}

/* Empty state */
.ph-empty{text-align:center;padding:48px 20px;color:var(--text-3);font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.ph-empty-icon{opacity:.5;margin-bottom:6px}
.ph-empty-title{font-size:14px;font-weight:600;color:var(--text-2);margin-bottom:2px}

/* Skeleton (during generation) */
.ph-skel{background:linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 100%);background-size:200% 100%;border-radius:6px;animation:phSkel 1.4s ease-in-out infinite}
@keyframes phSkel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Status row pattern (Prompt Factory + Script Engine) */
.ph-status-row{position:relative;background:var(--sf);border:1px solid var(--border);border-radius:12px;padding:12px 14px 12px 18px;overflow:hidden}
.ph-status-row::before{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;background:rgba(255,255,255,.10)}
.ph-status-row.is-done::before{background:var(--green)}
.ph-status-row.is-active::before{background:var(--gold)}
.ph-status-row.is-queued{border-style:dashed;opacity:.65}

/* Toast */
.ph-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:10px 18px;font-size:12.5px;font-weight:500;color:var(--text);z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.4);display:none}
.ph-toast.is-visible{display:block;animation:phToastIn .25s ease}
@keyframes phToastIn{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* History overlay */
.ph-overlay{position:fixed;inset:0;background:rgba(6,6,14,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1000;display:none;align-items:flex-start;justify-content:center;padding:24px 20px;overflow-y:auto}
.ph-overlay.is-open{display:flex}
.ph-overlay-panel{max-width:780px;width:100%;background:var(--sf);border:1px solid var(--border);border-radius:14px;padding:20px 22px;box-shadow:0 24px 60px rgba(0,0,0,.5);max-height:90vh;overflow-y:auto}
.ph-overlay-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:14px}
.ph-overlay-h2{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-0.01em;margin:0}
.ph-history-item{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:all .12s;display:flex;align-items:center;gap:12px}
.ph-history-item:hover{border-color:var(--tool-accent);transform:translateY(-1px)}
.ph-history-item-content{flex:1;min-width:0}
.ph-history-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-history-meta{font-size:10px;color:var(--text-3);font-family:var(--font-mono);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ph-history-del{flex-shrink:0;width:28px;height:28px;border-radius:8px;background:transparent;border:1px solid var(--border);color:var(--text-3);font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .12s}
.ph-history-del:hover{border-color:var(--red);color:var(--red)}

/* Spinner */
.ph-spinner{width:14px;height:14px;border:2px solid var(--spinner-track);border-top-color:var(--tool-accent);border-radius:50%;animation:phSpin var(--spinner-speed) linear infinite;display:inline-block;flex-shrink:0}
@keyframes phSpin{to{transform:rotate(360deg)}}

/* Progress message */
.ph-progress-msg{font-size:12px;color:#fff;font-family:var(--font-mono);font-weight:500;letter-spacing:.2px}


/* ════════════════════════════════════════════════════════════════════
   PassiveHub V2 — premium UI system (May 2026)
   ════════════════════════════════════════════════════════════════════
   Animation tokens + component classes for the redesigned shell:
   collapsible sidebar, dashboard pages, member cards, settings tabs.

   All v2 components prefixed `.pv2-*` to avoid colliding with `.ph-*`
   used by iframe tools. Used in index.html (the React shell) only.

   Animation tokens (--pv2-ease, --pv2-t-*) are also safe to reference
   from any iframe if you want consistent timing/easing.
   ──────────────────────────────────────────────────────────────────── */

:root {
  --pv2-ease:cubic-bezier(.4,0,.2,1);
  --pv2-ease-out:cubic-bezier(0,0,.2,1);
  --pv2-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --pv2-t-fast:120ms;
  --pv2-t-base:200ms;
  --pv2-t-slow:320ms;
  --pv2-shadow-card:0 4px 14px rgba(0,0,0,.20),0 1px 0 rgba(255,255,255,.04) inset;
  --pv2-shadow-lift:0 12px 28px rgba(0,0,0,.30),0 2px 0 rgba(255,255,255,.05) inset;
  --pv2-shadow-accent:0 8px 24px rgba(129,140,248,.25);
  --pv2-accent-border:rgba(129,140,248,.30);
  --pv2-amber-border:rgba(251,191,36,.30);
}

/* ── Keyframes ── */
@keyframes pv2-fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes pv2-slide-in{from{transform:translateX(-8px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes pv2-pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.4)}50%{box-shadow:0 0 0 4px rgba(74,222,128,0)}}
@keyframes pv2-pulse-stage{0%,100%{box-shadow:0 0 8px var(--accent)}50%{box-shadow:0 0 16px var(--accent)}}
@keyframes pv2-fill-grow{from{width:0}}

/* ── Floating sidebar collapse toggle (always visible at sidebar boundary) ── */
.pv2-floating-toggle{position:fixed;top:70px;width:28px;height:28px;border-radius:50%;background:#14141f;border:1px solid var(--border-h);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;padding:0;z-index:100;box-shadow:0 4px 14px rgba(0,0,0,.4),0 0 0 3px rgba(129,140,248,.06);transition:left var(--pv2-t-slow) var(--pv2-ease),transform var(--pv2-t-fast) var(--pv2-ease),border-color var(--pv2-t-fast) var(--pv2-ease),box-shadow var(--pv2-t-fast) var(--pv2-ease)}
.pv2-floating-toggle:hover{border-color:var(--accent);transform:scale(1.08);box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 0 4px rgba(129,140,248,.12)}
.pv2-floating-toggle:active{transform:scale(.96)}
.pv2-floating-toggle svg{transition:transform var(--pv2-t-slow) var(--pv2-ease)}
@media(max-width:800px){.pv2-floating-toggle{display:none}}

/* ── App shell wrapper (parent grid) ── */
.pv2-app{display:grid;grid-template-columns:240px 1fr;min-height:100vh;transition:grid-template-columns var(--pv2-t-slow) var(--pv2-ease)}
.pv2-app.is-collapsed{grid-template-columns:64px 1fr}

/* ── Sidebar ── */
.pv2-sb{display:flex;flex-direction:column;background:rgba(8,8,16,.72);border-right:1px solid var(--border);padding:14px 12px;gap:8px;transition:padding var(--pv2-t-slow) var(--pv2-ease);position:relative;overflow:hidden}
.pv2-app.is-collapsed .pv2-sb,.pv2-sb.is-collapsed{padding:14px 8px}
.pv2-sb-header{display:flex;align-items:center;gap:10px;padding:0 4px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;position:relative}
.pv2-app.is-collapsed .pv2-sb-header,.pv2-sb.is-collapsed .pv2-sb-header{flex-direction:column;gap:8px;padding:0 0 12px}
.pv2-sb-logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;flex-shrink:0;box-shadow:0 4px 12px rgba(129,140,248,.30);transition:transform var(--pv2-t-base) var(--pv2-ease-spring)}
.pv2-sb-logo:hover{transform:rotate(-6deg) scale(1.06)}
.pv2-sb-brand{font-size:13.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;transition:opacity var(--pv2-t-base) var(--pv2-ease),max-width var(--pv2-t-slow) var(--pv2-ease);max-width:160px;opacity:1}
.pv2-sb-brand .pv2-dim{color:var(--text-3);font-weight:500}
.pv2-app.is-collapsed .pv2-sb-brand,.pv2-sb.is-collapsed .pv2-sb-brand{max-width:0;opacity:0}
.pv2-sb-toggle{margin-left:auto;width:24px;height:24px;border-radius:6px;background:var(--surface);border:1px solid var(--border);color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--pv2-t-fast) var(--pv2-ease);flex-shrink:0;padding:0;font-family:inherit}
.pv2-sb-toggle:hover{background:rgba(255,255,255,.05);color:var(--text);border-color:var(--border-h)}
.pv2-sb-toggle svg{transition:transform var(--pv2-t-slow) var(--pv2-ease)}
.pv2-app.is-collapsed .pv2-sb-toggle svg,.pv2-sb.is-collapsed .pv2-sb-toggle svg{transform:rotate(180deg)}

.pv2-sb-section{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:1.4px;color:var(--text-3);padding:8px 10px 4px;font-weight:700;white-space:nowrap;transition:opacity var(--pv2-t-fast) var(--pv2-ease),height var(--pv2-t-base) var(--pv2-ease),padding var(--pv2-t-base) var(--pv2-ease);overflow:hidden}
.pv2-app.is-collapsed .pv2-sb-section,.pv2-sb.is-collapsed .pv2-sb-section{opacity:0;height:8px;padding:0}
.pv2-app.is-collapsed .pv2-sb-section::after,.pv2-sb.is-collapsed .pv2-sb-section::after{content:'';display:block;height:1px;background:var(--border);margin:4px 8px}

.pv2-sb-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px;color:var(--text-2);font-size:13px;font-weight:500;cursor:pointer;transition:all var(--pv2-t-fast) var(--pv2-ease);border:none;background:transparent;font-family:inherit;text-align:left;width:100%;position:relative;white-space:nowrap;overflow:hidden}
.pv2-sb-item:hover{background:var(--surface);color:var(--text);transform:translateX(1px)}
.pv2-sb-item.is-active{background:var(--accent-bg);color:var(--accent2);font-weight:600}
.pv2-sb-item.is-active::before{content:'';position:absolute;left:-12px;top:8px;bottom:8px;width:3px;background:var(--accent);border-radius:0 3px 3px 0;box-shadow:0 0 8px var(--accent);animation:pv2-slide-in var(--pv2-t-base) var(--pv2-ease-out)}
.pv2-sb-item svg{flex-shrink:0;display:block;opacity:.85;transition:opacity var(--pv2-t-fast) var(--pv2-ease)}
.pv2-sb-item:hover svg,.pv2-sb-item.is-active svg{opacity:1}

.pv2-sb-label{flex:1;min-width:0;transition:opacity var(--pv2-t-fast) var(--pv2-ease),max-width var(--pv2-t-slow) var(--pv2-ease);max-width:160px;opacity:1;overflow:hidden;text-overflow:ellipsis}
.pv2-app.is-collapsed .pv2-sb-label,.pv2-sb.is-collapsed .pv2-sb-label{max-width:0;opacity:0}

.pv2-sb-badge{margin-left:auto;background:var(--surface);border:1px solid var(--border);color:var(--text-3);font-family:var(--font-mono);font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:99px;line-height:1;transition:opacity var(--pv2-t-fast) var(--pv2-ease)}
.pv2-sb-item.is-active .pv2-sb-badge{background:var(--accent-bg);border-color:var(--pv2-accent-border);color:var(--accent2)}
.pv2-sb-badge.is-amber{background:var(--amber-bg);border-color:var(--pv2-amber-border);color:var(--amber)}
.pv2-app.is-collapsed .pv2-sb-badge,.pv2-sb.is-collapsed .pv2-sb-badge{opacity:0;width:0;padding:0;margin:0;border:0}
.pv2-app.is-collapsed .pv2-sb-item,.pv2-sb.is-collapsed .pv2-sb-item{justify-content:center;padding:9px 0}

.pv2-sb-tip{position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%) translateX(-4px);background:#1a1a25;color:var(--text);padding:6px 10px;border-radius:7px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid var(--border-h);box-shadow:0 8px 20px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:all var(--pv2-t-fast) var(--pv2-ease);z-index:30}
.pv2-sb-tip::before{content:'';position:absolute;right:100%;top:50%;transform:translateY(-50%);border:5px solid transparent;border-right-color:var(--border-h)}
.pv2-app.is-collapsed .pv2-sb-item:hover .pv2-sb-tip,.pv2-sb.is-collapsed .pv2-sb-item:hover .pv2-sb-tip{opacity:1;transform:translateY(-50%) translateX(0)}

.pv2-sb-divider{height:1px;background:var(--border);margin:6px 6px}
.pv2-sb-spacer{flex:1}

/* ── User card ── */
.pv2-user{padding:10px;border-radius:12px;background:linear-gradient(180deg,var(--surface) 0%,rgba(255,255,255,.04) 100%);border:1px solid var(--border);display:flex;flex-direction:column;gap:8px;transition:all var(--pv2-t-base) var(--pv2-ease)}
.pv2-user:hover{border-color:var(--border-h)}
.pv2-app.is-collapsed .pv2-user,.pv2-sb.is-collapsed .pv2-user{padding:6px;border-radius:50%;width:48px;height:48px;align-self:center;align-items:center;justify-content:center}
.pv2-user-row{display:flex;align-items:center;gap:9px;width:100%}
.pv2-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#a78bfa);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 10px rgba(59,130,246,.18);position:relative;cursor:pointer;transition:transform var(--pv2-t-base) var(--pv2-ease-spring)}
.pv2-avatar:hover{transform:scale(1.08)}
.pv2-avatar.is-online::after{content:'';position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-radius:50%;background:var(--green);border:2px solid #14141f;animation:pv2-pulse-dot 2.4s var(--pv2-ease) infinite}
.pv2-user-info{flex:1;min-width:0;transition:opacity var(--pv2-t-fast) var(--pv2-ease)}
.pv2-app.is-collapsed .pv2-user-info,.pv2-app.is-collapsed .pv2-credit-pill,.pv2-sb.is-collapsed .pv2-user-info,.pv2-sb.is-collapsed .pv2-credit-pill{display:none}
.pv2-user-name{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv2-user-role{font-family:var(--font-mono);font-size:9.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:1px;font-weight:700;display:flex;align-items:center;gap:4px}
.pv2-user-role.is-admin{color:var(--accent2)}
.pv2-user-role.is-creator{color:var(--green)}
.pv2-user-actions{display:flex;gap:4px;flex-shrink:0}
.pv2-user-btn{width:26px;height:26px;border-radius:6px;background:transparent;border:1px solid transparent;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--pv2-t-fast) var(--pv2-ease);padding:0;font-family:inherit}
.pv2-user-btn:hover{background:rgba(255,255,255,.05);border-color:var(--border);color:var(--text)}

/* ── Credit pill (in sidebar user card) ── */
.pv2-credit-pill{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:9px;background:linear-gradient(135deg,var(--amber-bg),rgba(245,158,11,.04));border:1px solid var(--pv2-amber-border);cursor:pointer;transition:all var(--pv2-t-base) var(--pv2-ease);overflow:hidden;position:relative;width:100%;font-family:inherit}
.pv2-credit-pill::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(251,191,36,.10) 50%,transparent 70%);transform:translateX(-100%);transition:transform var(--pv2-t-slow) var(--pv2-ease)}
.pv2-credit-pill:hover{border-color:rgba(251,191,36,.50);transform:translateY(-1px);box-shadow:0 6px 14px rgba(251,191,36,.18)}
.pv2-credit-pill:hover::before{transform:translateX(100%)}
.pv2-credit-bolt{color:var(--amber);flex-shrink:0;display:flex}
.pv2-credit-bolt svg{filter:drop-shadow(0 0 4px rgba(251,191,36,.4))}
.pv2-credit-amt{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--amber);letter-spacing:.5px;flex:1;text-align:left}
.pv2-credit-arrow{color:var(--text-3);font-size:11px;transition:transform var(--pv2-t-fast) var(--pv2-ease)}
.pv2-credit-pill:hover .pv2-credit-arrow{transform:translateX(2px);color:var(--amber)}

/* ── Main shell ── */
.pv2-main{display:flex;flex-direction:column;overflow-y:auto;padding:24px 28px;animation:pv2-fade-in var(--pv2-t-slow) var(--pv2-ease)}
.pv2-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.pv2-topbar h1{font-size:24px;font-weight:700;margin:0;letter-spacing:-.02em;line-height:1.15}
.pv2-sub{font-size:12.5px;color:var(--text-3);font-family:var(--font-mono);margin-top:6px;letter-spacing:.2px}

/* ── Cards ── */
.pv2-card{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:18px;transition:all var(--pv2-t-base) var(--pv2-ease)}
.pv2-card:hover{border-color:var(--border-h)}
.pv2-card-h{font-size:13.5px;font-weight:700;color:var(--text);margin:0 0 14px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.pv2-h-icon{color:var(--accent2);display:flex}
.pv2-h-pill{font-family:var(--font-mono);font-size:9.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:1.2px;font-weight:700;background:var(--surface);border:1px solid var(--border);padding:2px 7px;border-radius:99px;margin-left:auto}

/* ── Stat cards ── */
.pv2-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px}
.pv2-stat{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px;position:relative;overflow:hidden;transition:all var(--pv2-t-base) var(--pv2-ease);cursor:default}
.pv2-stat:hover{border-color:var(--border-h);transform:translateY(-2px);box-shadow:var(--pv2-shadow-card)}
.pv2-stat-lbl{font-family:var(--font-mono);font-size:9.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:1.3px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.pv2-stat-val{font-size:26px;font-weight:700;color:var(--text);letter-spacing:-.025em;line-height:1;font-family:var(--font-mono)}
.pv2-stat-suffix{font-size:14px;color:var(--text-3);font-weight:600;margin-left:4px}
.pv2-stat-delta{font-family:var(--font-mono);font-size:10.5px;font-weight:700;margin-top:8px;display:flex;align-items:center;gap:5px}
.pv2-stat-delta.is-up{color:var(--green)}
.pv2-stat-delta.is-down{color:var(--red)}
.pv2-stat-delta.is-flat{color:var(--text-3)}
.pv2-stat.is-accent{background:linear-gradient(135deg,var(--accent-bg),rgba(167,139,250,.04));border-color:var(--pv2-accent-border)}
.pv2-stat.is-accent .pv2-stat-lbl{color:var(--accent2)}
.pv2-stat.is-amber{background:linear-gradient(135deg,var(--amber-bg),rgba(245,158,11,.03));border-color:var(--pv2-amber-border)}
.pv2-stat.is-amber .pv2-stat-val{color:var(--amber)}
.pv2-stat.is-amber .pv2-stat-lbl{color:var(--amber)}

/* ── Whop locked card (placeholder for unintegrated stats) ── */
.pv2-locked{background:var(--surface);border:1px dashed var(--border-h);border-radius:13px;padding:18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all var(--pv2-t-base) var(--pv2-ease)}
.pv2-locked:hover{border-color:var(--accent);background:var(--accent-bg)}
.pv2-locked-icon{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-3);flex-shrink:0;transition:all var(--pv2-t-base) var(--pv2-ease)}
.pv2-locked:hover .pv2-locked-icon{color:var(--accent2);border-color:var(--pv2-accent-border)}
.pv2-locked-text{flex:1;min-width:0}
.pv2-locked-title{font-size:13.5px;font-weight:700;color:var(--text)}
.pv2-locked-desc{font-size:11.5px;color:var(--text-3);margin-top:3px;font-family:var(--font-mono)}

/* ── Buttons ── */
.pv2-btn{padding:9px 16px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:7px;transition:all var(--pv2-t-fast) var(--pv2-ease);position:relative;overflow:hidden}
.pv2-btn:hover{border-color:var(--border-h);transform:translateY(-1px);box-shadow:var(--pv2-shadow-card)}
.pv2-btn:active{transform:translateY(0) scale(.98)}
.pv2-btn.is-primary{background:var(--accent-bg);color:var(--accent2);border-color:var(--pv2-accent-border)}
.pv2-btn.is-primary:hover{background:rgba(129,140,248,.18);border-color:var(--accent);box-shadow:0 4px 14px rgba(129,140,248,.20)}
.pv2-btn.is-solid{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;box-shadow:var(--pv2-shadow-accent)}
.pv2-btn.is-solid:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(129,140,248,.40)}
.pv2-btn.is-amber{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#1a1208;border:none;box-shadow:0 4px 14px rgba(251,191,36,.30);font-weight:700}
.pv2-btn.is-amber:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(251,191,36,.45)}
.pv2-btn svg{flex-shrink:0;display:block}

/* ── Quick start tiles ── */
.pv2-qs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.pv2-qs{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:18px;cursor:pointer;transition:all var(--pv2-t-base) var(--pv2-ease);display:flex;flex-direction:column;gap:10px;text-align:left;position:relative;overflow:hidden;font-family:inherit;color:inherit}
.pv2-qs::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at top right,var(--accent-bg) 0%,transparent 60%);opacity:0;transition:opacity var(--pv2-t-base) var(--pv2-ease);pointer-events:none}
.pv2-qs:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 14px 32px rgba(129,140,248,.20)}
.pv2-qs:hover::before{opacity:.6}
.pv2-qs-icon{width:38px;height:38px;border-radius:10px;background:var(--accent-bg);border:1px solid var(--pv2-accent-border);display:flex;align-items:center;justify-content:center;color:var(--accent2);transition:transform var(--pv2-t-base) var(--pv2-ease-spring)}
.pv2-qs:hover .pv2-qs-icon{transform:rotate(-6deg) scale(1.06);background:rgba(129,140,248,.20);border-color:var(--accent)}
.pv2-qs-title{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.pv2-qs-desc{font-size:11.5px;color:var(--text-3);line-height:1.5}
.pv2-qs-cost{font-family:var(--font-mono);font-size:9.5px;color:var(--text-3);font-weight:700;letter-spacing:.5px;margin-top:auto;display:flex;align-items:center;gap:5px}
.pv2-qs-cost svg{color:var(--amber);width:11px;height:11px}

/* ── Pipeline rows ── */
.pv2-pipe{display:flex;flex-direction:column;gap:8px}
.pv2-pipe-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:11px 13px;background:var(--surface);border:1px solid var(--border);border-radius:9px;transition:all var(--pv2-t-fast) var(--pv2-ease);cursor:pointer}
.pv2-pipe-row:hover{border-color:var(--pv2-accent-border);transform:translateX(2px);background:rgba(129,140,248,.04)}
.pv2-pipe-title{font-size:12.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pv2-pipe-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-3);margin-top:3px}
.pv2-pipe-stages{display:flex;gap:4px}
.pv2-pipe-stage{width:26px;height:6px;border-radius:3px;background:rgba(255,255,255,.06);transition:all var(--pv2-t-base) var(--pv2-ease)}
.pv2-pipe-stage.is-done{background:linear-gradient(90deg,var(--green),#34d399);box-shadow:0 0 8px rgba(74,222,128,.3)}
.pv2-pipe-stage.is-active{background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 10px var(--accent);animation:pv2-pulse-stage 2s var(--pv2-ease) infinite}
.pv2-pipe-tool{font-family:var(--font-mono);font-size:9.5px;color:var(--accent2);background:var(--accent-bg);padding:2px 7px;border-radius:99px;border:1px solid var(--pv2-accent-border);font-weight:700;letter-spacing:.4px}

/* ── Activity feed ── */
.pv2-feed{display:flex;flex-direction:column;gap:0}
.pv2-feed-row{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid var(--border);transition:padding-left var(--pv2-t-fast) var(--pv2-ease)}
.pv2-feed-row:hover{padding-left:4px}
.pv2-feed-row:last-child{border-bottom:none}
.pv2-feed-icon{width:32px;height:32px;border-radius:9px;background:var(--accent-bg);border:1px solid var(--pv2-accent-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent2);transition:transform var(--pv2-t-fast) var(--pv2-ease)}
.pv2-feed-row:hover .pv2-feed-icon{transform:scale(1.06)}
.pv2-feed-icon.is-green{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.30);color:var(--green)}
.pv2-feed-icon.is-amber{background:var(--amber-bg);border-color:var(--pv2-amber-border);color:var(--amber)}
.pv2-feed-icon.is-red{background:rgba(248,113,113,.10);border-color:rgba(248,113,113,.30);color:var(--red)}
.pv2-feed-body{flex:1;min-width:0}
.pv2-feed-l1{font-size:12.5px;color:var(--text);line-height:1.45}
.pv2-feed-l1 .pv2-who{font-weight:700;color:var(--accent2)}
.pv2-feed-l1 .pv2-what{color:var(--text-2)}
.pv2-feed-l2{font-family:var(--font-mono);font-size:10.5px;color:var(--text-3);margin-top:3px;display:flex;gap:6px}
.pv2-feed-cost{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--amber);flex-shrink:0;padding-top:4px}
.pv2-feed-cost.is-green{color:var(--green)}
.pv2-feed-cost.is-dim{color:var(--text-3)}

/* ── Tool usage bars ── */
.pv2-bars{display:flex;flex-direction:column;gap:10px}
.pv2-bar-row{display:grid;grid-template-columns:140px 1fr 60px;align-items:center;gap:10px;font-size:12px}
.pv2-bar-name{font-weight:600;color:var(--text-2);display:flex;align-items:center;gap:8px}
.pv2-bar-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor}
.pv2-bar-track{height:8px;background:rgba(255,255,255,.04);border-radius:4px;overflow:hidden;position:relative}
.pv2-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width 1.2s var(--pv2-ease-out)}
.pv2-bar-val{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text-2);text-align:right}

/* ── Banner CTA ── */
.pv2-banner{background:linear-gradient(135deg,rgba(129,140,248,.12),rgba(167,139,250,.08));border:1px solid var(--pv2-accent-border);border-radius:14px;padding:22px;display:flex;align-items:center;gap:18px;margin-bottom:18px;position:relative;overflow:hidden}
.pv2-banner::before{content:'';position:absolute;right:-40px;top:-40px;width:200px;height:200px;background:radial-gradient(circle,rgba(129,140,248,.18) 0%,transparent 70%);pointer-events:none}
.pv2-banner-icon{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:var(--pv2-shadow-accent);position:relative;z-index:1}
.pv2-banner-text{flex:1;min-width:0;position:relative;z-index:1}
.pv2-banner-title{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.pv2-banner-desc{font-size:12px;color:var(--text-2);margin-top:3px;line-height:1.5}
.pv2-banner-actions{flex-shrink:0;position:relative;z-index:1}

/* ── Onboarding checklist ── */
.pv2-check{display:flex;flex-direction:column;gap:8px}
.pv2-check-row{display:flex;align-items:center;gap:11px;padding:11px 14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;transition:all var(--pv2-t-fast) var(--pv2-ease);cursor:pointer}
.pv2-check-row:hover{border-color:var(--border-h);transform:translateX(2px)}
.pv2-check-row.is-done{opacity:.55}
.pv2-check-row.is-done .pv2-check-text{text-decoration:line-through;color:var(--text-3)}
.pv2-check-circle{width:22px;height:22px;border-radius:50%;border:2px solid var(--border-h);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:transparent;transition:all var(--pv2-t-base) var(--pv2-ease-spring)}
.pv2-check-row.is-done .pv2-check-circle{background:var(--green);border-color:var(--green);color:#06060e;box-shadow:0 0 0 4px rgba(74,222,128,.15)}
.pv2-check-text{flex:1;font-size:13px;font-weight:600;color:var(--text)}
.pv2-check-text .pv2-check-desc{font-size:11px;color:var(--text-3);font-weight:500;font-family:var(--font-mono);margin-top:2px}
.pv2-check-arrow{color:var(--text-3);transition:transform var(--pv2-t-fast) var(--pv2-ease)}
.pv2-check-row:hover .pv2-check-arrow{transform:translateX(2px);color:var(--accent2)}

/* ── Member cards ── */
.pv2-mem-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.pv2-mem{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:16px;position:relative;transition:all var(--pv2-t-base) var(--pv2-ease)}
.pv2-mem:hover{border-color:var(--border-h);transform:translateY(-2px);box-shadow:var(--pv2-shadow-card)}
.pv2-mem-head{display:flex;align-items:flex-start;gap:11px}
.pv2-mem-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#a78bfa);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.pv2-mem-name{font-size:14px;font-weight:700;color:var(--text)}
.pv2-mem-email{font-family:var(--font-mono);font-size:10.5px;color:var(--text-3);margin-top:2px}
.pv2-mem-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;margin-top:7px}
.pv2-mem-tag svg{width:10px;height:10px;flex-shrink:0}
.pv2-mem-tag.is-admin{background:var(--accent-bg);color:var(--accent2);border:1px solid var(--pv2-accent-border)}
.pv2-mem-tag.is-pro{background:linear-gradient(135deg,var(--amber-bg),rgba(245,158,11,.04));color:var(--amber);border:1px solid var(--pv2-amber-border)}
.pv2-mem-tag.is-creator{background:rgba(74,222,128,.10);color:var(--green);border:1px solid rgba(74,222,128,.30)}
.pv2-mem-tag.is-trial{background:rgba(255,255,255,.05);color:var(--text-3);border:1px solid var(--border)}
.pv2-mem-tag.is-past{background:rgba(248,113,113,.10);color:#fca5a5;border:1px solid rgba(248,113,113,.30)}
.pv2-mem-status{position:absolute;top:14px;right:14px;display:flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:9.5px;color:var(--text-3);font-weight:600}
.pv2-status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:pv2-pulse-dot 2.4s var(--pv2-ease) infinite}
.pv2-mem-status.is-offline .pv2-status-dot{background:var(--text-3);animation:none;box-shadow:none}
.pv2-mem-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.pv2-mem-meta-lbl{font-family:var(--font-mono);font-size:8.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:1px;font-weight:700;margin-bottom:3px}
.pv2-mem-meta-val{font-size:13px;font-weight:700;color:var(--text);font-family:var(--font-mono)}
.pv2-mem-meta-val.is-amber{color:var(--amber)}
.pv2-mem-meta-val.is-green{color:var(--green)}
.pv2-mem-actions{display:flex;gap:6px;margin-top:12px}
.pv2-mem-actions .pv2-btn{flex:1;justify-content:center;padding:7px 10px;font-size:11.5px}

/* ── Search input ── */
.pv2-search{flex:1;min-width:240px;background:var(--surface);border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:12.5px;padding:10px 13px 10px 38px;outline:none;font-family:inherit;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(240,240,248,.42)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>');background-repeat:no-repeat;background-position:13px center;transition:all var(--pv2-t-fast) var(--pv2-ease)}
.pv2-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}

/* ── Settings shell ── */
.pv2-settings{display:grid;grid-template-columns:220px 1fr;gap:20px;max-width:1100px}
.pv2-settings-tabs{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:8px;height:fit-content;position:sticky;top:24px}
.pv2-settings-tab{padding:10px 12px;border-radius:8px;color:var(--text-2);font-size:12.5px;font-weight:600;cursor:pointer;transition:all var(--pv2-t-fast) var(--pv2-ease);border:none;background:transparent;font-family:inherit;text-align:left;display:flex;align-items:center;gap:10px;width:100%}
.pv2-settings-tab:hover{background:rgba(255,255,255,.04);color:var(--text)}
.pv2-settings-tab.is-active{background:var(--accent-bg);color:var(--accent2)}
.pv2-settings-tab svg{flex-shrink:0;display:block;opacity:.85}
.pv2-settings-pane{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px;animation:pv2-fade-in var(--pv2-t-base) var(--pv2-ease)}
.pv2-settings-pane h2{font-size:18px;font-weight:700;margin:0 0 4px;letter-spacing:-.01em}
.pv2-pane-desc{font-size:12.5px;color:var(--text-3);margin:0 0 22px}
.pv2-srow{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:16px 0;border-bottom:1px solid var(--border)}
.pv2-srow:last-child{border-bottom:none}
.pv2-srow-label{flex:1;min-width:0;max-width:340px}
.pv2-srow-label .pv2-lbl{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px}
.pv2-srow-label .pv2-desc{font-size:11.5px;color:var(--text-3);line-height:1.5}
.pv2-srow-control{flex-shrink:0;display:flex;align-items:center;gap:8px}

/* ── Toggle ── */
.pv2-toggle{width:38px;height:22px;border-radius:99px;background:var(--surface);border:1px solid var(--border);position:relative;cursor:pointer;transition:all var(--pv2-t-base) var(--pv2-ease);flex-shrink:0;padding:0;font-family:inherit}
.pv2-toggle::before{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text-3);transition:all var(--pv2-t-base) var(--pv2-ease-spring)}
.pv2-toggle.is-on{background:var(--accent-bg);border-color:var(--pv2-accent-border)}
.pv2-toggle.is-on::before{left:18px;background:var(--accent2);box-shadow:0 0 8px var(--accent2)}

/* ── Mesh tiles ── */
.pv2-mesh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.pv2-mesh-tile{aspect-ratio:1.6;border-radius:9px;cursor:pointer;border:2px solid transparent;position:relative;overflow:hidden;transition:all var(--pv2-t-base) var(--pv2-ease)}
.pv2-mesh-tile:hover{transform:translateY(-2px);box-shadow:var(--pv2-shadow-card)}
.pv2-mesh-tile.is-active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 8px 20px rgba(129,140,248,.30)}
.pv2-mesh-name{position:absolute;bottom:7px;left:9px;font-family:var(--font-mono);font-size:10px;font-weight:700;color:rgba(255,255,255,.96);text-shadow:0 1px 4px rgba(0,0,0,.6);letter-spacing:.5px}

/* ── Row layouts ── */
.pv2-row-2{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
.pv2-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media(max-width:980px){
  .pv2-row-2,.pv2-row-3{grid-template-columns:1fr}
  .pv2-app{grid-template-columns:1fr}
  .pv2-app .pv2-sb{display:none}
  .pv2-settings{grid-template-columns:1fr}
  .pv2-settings-tabs{position:static;flex-direction:row;overflow-x:auto}
  .pv2-settings-tab{flex-shrink:0;width:auto}
}

/* ── Tool engagement bars (multi-color horizontal bar chart) ── */
.pv2-tool-bars{display:flex;flex-direction:column;gap:11px}
.pv2-tool-bar-row{display:grid;grid-template-columns:140px 1fr 70px;align-items:center;gap:12px;font-size:12px}
.pv2-tool-name{font-weight:600;color:var(--text-2);display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv2-tool-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;display:inline-block}
.pv2-tool-track{height:8px;background:rgba(255,255,255,.04);border-radius:4px;overflow:hidden;position:relative}
.pv2-tool-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width 1.2s cubic-bezier(0,0,.2,1);animation:pv2-bar-grow 1.2s cubic-bezier(0,0,.2,1)}
@keyframes pv2-bar-grow{from{width:0!important}}
.pv2-tool-val{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text-2);text-align:right;white-space:nowrap}
@media(max-width:680px){
  .pv2-tool-bar-row{grid-template-columns:1fr;gap:6px}
  .pv2-tool-name{font-size:12px}
  .pv2-tool-val{text-align:left;font-size:10.5px}
}

/* ── Extra feed-icon color variants (added blue + purple) ── */
.pv2-feed-icon.is-blue{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.28);color:#60a5fa}
.pv2-feed-icon.is-purple{background:rgba(167,139,250,.12);border-color:rgba(167,139,250,.30);color:#c4b5fd}
.pv2-feed-icon.is-cyan{background:rgba(6,182,212,.12);border-color:rgba(6,182,212,.30);color:#67e8f9}
.pv2-feed-icon.is-pink{background:rgba(236,72,153,.12);border-color:rgba(236,72,153,.30);color:#f9a8d4}

/* ── Ranked badges (1st/2nd/3rd) for Top customers ── */
.pv2-rank{
  width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  flex-shrink:0;
  border:1px solid var(--border);background:var(--surface);color:var(--text-3);
  letter-spacing:-.02em;
}
.pv2-rank-1{
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  border-color:rgba(251,191,36,.45);
  color:#1a1208;
  box-shadow:0 4px 12px rgba(251,191,36,.30);
}
.pv2-rank-2{
  background:linear-gradient(135deg,#cbd5e1,#94a3b8);
  border-color:rgba(148,163,184,.45);
  color:#0f172a;
  box-shadow:0 4px 12px rgba(148,163,184,.25);
}
.pv2-rank-3{
  background:linear-gradient(135deg,#fb923c,#c2410c);
  border-color:rgba(251,146,60,.40);
  color:#1a0a02;
  box-shadow:0 4px 12px rgba(251,146,60,.25);
}

/* ════════════════════════════════════════════════════════════════════
   CLASSIC THEME — applied when body.theme-classic
   ════════════════════════════════════════════════════════════════════
   Same layout, dialed-back visual treatment. Toggled from Settings →
   Theme → UI Style. Default is `theme-modern` (full v2 flair).
   ──────────────────────────────────────────────────────────────────── */

/* Override base CSS vars so cards have solid surfaces on the black canvas.
   Without this, translucent rgba(255,255,255,.05) surfaces vanish into bg. */
body.theme-classic{
  --bg:#08080d;
  --surface:#11121a;
  --surface-h:#15161f;
  --border:rgba(255,255,255,.10);
  --border-h:rgba(255,255,255,.18);
  --pv2-shadow-card:none;
  --pv2-shadow-lift:none;
  --pv2-shadow-accent:none;
}

/* Force solid card surfaces (var override above already does most of this,
   but a few elements bypass --surface with their own gradient) */
body.theme-classic .pv2-card,
body.theme-classic .pv2-stat,
body.theme-classic .pv2-mem,
body.theme-classic .pv2-qs,
body.theme-classic .pv2-pipe-row,
body.theme-classic .pv2-check-row,
body.theme-classic .pv2-feed-row,
body.theme-classic .pv2-settings-pane,
body.theme-classic .pv2-user,
body.theme-classic .pv2-locked,
body.theme-classic .pv2-mesh-tile{background:#11121a}

body.theme-classic .pv2-sb{background:#0a0a12;border-right-color:rgba(255,255,255,.08)}
body.theme-classic .pv2-sb-header{border-bottom-color:rgba(255,255,255,.08)}
body.theme-classic .pv2-settings-tabs{background:#0e0f17}
body.theme-classic .pv2-floating-toggle{background:#13141d}

/* Flatten gradient backgrounds → plain surfaces */
body.theme-classic .pv2-stat.is-accent,
body.theme-classic .pv2-stat.is-amber{background:#11121a}
body.theme-classic .pv2-stat.is-accent .pv2-stat-lbl,
body.theme-classic .pv2-stat.is-amber .pv2-stat-lbl{color:var(--text-3)}
body.theme-classic .pv2-stat.is-amber .pv2-stat-val{color:var(--text)}
body.theme-classic .pv2-banner{background:#11121a;border-color:var(--border)}
body.theme-classic .pv2-banner::before{display:none}
body.theme-classic .pv2-banner-icon{background:rgba(129,140,248,.10);color:var(--accent2);box-shadow:none}
body.theme-classic .pv2-credit-pill{background:#11121a;border-color:var(--border)}
body.theme-classic .pv2-credit-pill::before{display:none}
body.theme-classic .pv2-credit-bolt svg{filter:none}
body.theme-classic .pv2-sb-logo{background:rgba(129,140,248,.10);color:var(--accent2);box-shadow:none}
body.theme-classic .pv2-avatar{background:rgba(129,140,248,.10);color:var(--accent2);box-shadow:none}
body.theme-classic .pv2-mem-avatar{background:rgba(129,140,248,.10);color:var(--accent2);box-shadow:none}
body.theme-classic .pv2-feed-icon{background:#1a1b25;border-color:var(--border);color:var(--text-2)}
body.theme-classic .pv2-feed-icon.is-green,
body.theme-classic .pv2-feed-icon.is-amber,
body.theme-classic .pv2-feed-icon.is-red,
body.theme-classic .pv2-feed-icon.is-blue,
body.theme-classic .pv2-feed-icon.is-purple,
body.theme-classic .pv2-feed-icon.is-cyan,
body.theme-classic .pv2-feed-icon.is-pink{background:#1a1b25}
body.theme-classic .pv2-btn.is-solid{background:var(--accent);color:#fff;box-shadow:none}
body.theme-classic .pv2-btn.is-amber{background:var(--amber);color:#1a1208;box-shadow:none}
body.theme-classic .pv2-qs-icon{background:#1a1b25;border-color:var(--border);color:var(--text-2)}
body.theme-classic .pv2-pipe-stage.is-done{background:var(--green);box-shadow:none}
body.theme-classic .pv2-pipe-stage.is-active{background:var(--accent);box-shadow:none;animation:none}

/* Kill transform-based hover lifts → keep functional border/bg color hovers */
body.theme-classic .pv2-stat:hover,
body.theme-classic .pv2-qs:hover,
body.theme-classic .pv2-mem:hover,
body.theme-classic .pv2-btn:hover,
body.theme-classic .pv2-mesh-tile:hover,
body.theme-classic .pv2-pipe-row:hover,
body.theme-classic .pv2-check-row:hover,
body.theme-classic .pv2-floating-toggle:hover{transform:none;box-shadow:none}
body.theme-classic .pv2-stat:hover,
body.theme-classic .pv2-mem:hover,
body.theme-classic .pv2-qs:hover,
body.theme-classic .pv2-pipe-row:hover,
body.theme-classic .pv2-check-row:hover{background:#15161f}
body.theme-classic .pv2-credit-pill:hover{transform:none;box-shadow:none;background:#15161f}
body.theme-classic .pv2-sb-item:hover{transform:none;background:#13141d}
body.theme-classic .pv2-sb-logo:hover{transform:none}
body.theme-classic .pv2-avatar:hover{transform:none}
body.theme-classic .pv2-feed-row:hover .pv2-feed-icon{transform:none}
body.theme-classic .pv2-qs:hover .pv2-qs-icon{transform:none;background:rgba(129,140,248,.10);color:var(--accent2)}

/* Tame the spring/pulse animations */
body.theme-classic .pv2-avatar.is-online::after,
body.theme-classic .pv2-status-dot{animation:none;box-shadow:none}
body.theme-classic .pv2-stat-grid > *,
body.theme-classic .pv2-card,
body.theme-classic .pv2-mem,
body.theme-classic .pv2-qs{animation:none}

/* Slightly softer, more uniform fonts */
body.theme-classic .pv2-stat-val{letter-spacing:0;font-weight:600}
body.theme-classic .pv2-topbar h1{font-weight:600;letter-spacing:0}
body.theme-classic .pv2-card-h{font-weight:600}
body.theme-classic .pv2-h-icon{color:var(--text-2)}

/* Sidebar active indicator: simpler line, no glow */
body.theme-classic .pv2-sb-item.is-active::before{box-shadow:none;animation:none}
body.theme-classic .pv2-sb-item.is-active{background:rgba(129,140,248,.10)}




/* ════════════════════════════════════════════════════════════════════
   Model Picker — shared modal pattern across Title/Script/PF/TW tools
   Inherits each tool's --tool-accent automatically. Drop-in replacement
   for native <select>. Trigger button + full modal w/ category cards.
   ════════════════════════════════════════════════════════════════════ */

/* Trigger button (replaces the <select>) */
.mp-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px 12px;
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-sans);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s;
  outline: none;
}
.mp-trigger:hover { border-color: var(--border-h, rgba(255,255,255,.16)); background: rgba(255,255,255,.06); }
.mp-trigger:focus { border-color: var(--tool-accent); box-shadow: 0 0 0 3px var(--tool-accent-bg); }
.mp-trigger.is-open { border-color: var(--tool-accent); background: rgba(255,255,255,.06); }
.mp-trigger-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--tool-accent); box-shadow: 0 0 0 2px rgba(0,0,0,.30); }
.mp-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-trigger-cr { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: #fbbf24; background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.20); padding: 2px 7px; border-radius: 99px; flex-shrink: 0; }
.mp-trigger-chev { color: var(--text-3); font-size: 10px; flex-shrink: 0; transition: transform .15s; }
.mp-trigger.is-open .mp-trigger-chev { transform: rotate(180deg); }

/* Modal overlay */
.mp-modal {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  animation: mpFade .15s ease-out;
}
.mp-modal.is-open { display: flex; }
@keyframes mpFade { from { opacity: 0; } to { opacity: 1; } }

/* Inner panel */
.mp-modal-inner {
  background: linear-gradient(180deg, rgba(20,18,30,.95) 0%, rgba(14,12,22,.96) 100%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  width: 100%;
  max-width: 720px;
  max-height: 86vh;
  overflow-y: auto;
  padding: 22px;
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
  animation: mpRise .2s ease-out;
}
@keyframes mpRise { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Header */
.mp-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.mp-modal-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 4px 0; }
.mp-modal-sub { font-size: 11.5px; color: var(--text-3); font-family: var(--font-mono); }
.mp-modal-close {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: all .15s;
}
.mp-modal-close:hover { background: rgba(255,255,255,.08); color: var(--text); }

/* Category block */
.mp-cat-block { margin-bottom: 16px; }
.mp-cat-block:last-child { margin-bottom: 0; }
.mp-cat-label {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
  padding-left: 2px;
}
.mp-cat-count { font-size: 9px; color: var(--text-3); opacity: .6; }

/* Grid */
.mp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 560px) { .mp-grid { grid-template-columns: 1fr; } }

/* Card */
.mp-card {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 14px;
  cursor: pointer;
  transition: all .15s;
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
  color: inherit;
  font-family: inherit;
  width: 100%;
  position: relative;
}
.mp-card:hover { border-color: rgba(255,255,255,.20); transform: translateY(-1px); background: rgba(255,255,255,.04); }
.mp-card.active { border-color: var(--tool-accent); background: var(--tool-accent-bg); box-shadow: 0 0 0 1px var(--tool-accent); }

.mp-card-head { display: flex; align-items: center; gap: 8px; }
.mp-card-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
.mp-card-name { font-size: 13px; font-weight: 700; color: var(--text); flex: 1; min-width: 0; }
.mp-card-cr { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: #fbbf24; background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.20); padding: 2px 7px; border-radius: 99px; flex-shrink: 0; white-space: nowrap; }
.mp-card.active .mp-card-cr { color: #34d399; background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.30); }
.mp-card-recommended { font-size: 8.5px; font-weight: 800; letter-spacing: 1px; padding: 1px 5px; border-radius: 4px; background: var(--tool-accent-bg); color: var(--tool-accent); flex-shrink: 0; }
.mp-card-desc { font-size: 11px; color: var(--text-3); line-height: 1.4; font-family: var(--font-sans); }
.mp-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 9.5px; color: var(--text-3); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .8px; }
.mp-card-tag { padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.06); color: var(--text-2); font-weight: 700; }
.mp-card.active .mp-card-tag { background: rgba(255,255,255,.10); }