/* ==========================================================================
   Shubh Ventures v1.25 — UI Manager: 5 complete panel UIs
   html[data-sv-ui] = classic | aurora | quantum | zen | carbon  (set by sv-ui.js)
   Rules only restyle shared building blocks (.shell, aside, header, .card, .btn-*,
   .input, .nav-link, .tone, .icon-tile, tables…) so every page — including pages
   added later — follows the active UI. Colours still come from Theme Studio
   (--accent, --bg, --surface, --text…), and Layout Manager options keep working.
   ========================================================================== */

/* ---------- shared: smooth switch between UIs ---------- */
html.sv-ui-switching *, html.sv-ui-switching *:before, html.sv-ui-switching *:after{
  transition: background-color .45s var(--ease-out, ease), border-color .45s, box-shadow .45s, border-radius .45s, color .3s !important;
}

/* =========================================================== 2. AURORA GLASS
   Frosted glass on a living colour mesh, pill controls, soft glow. */
html[data-sv-ui="aurora"]{ --svu-font: "Plus Jakarta Sans", var(--sv-font); --svu-r: calc(var(--radius-card, 16px) + 6px); }
html[data-sv-ui="aurora"] body{ font-family: var(--svu-font) !important; }
html[data-sv-ui="aurora"][data-sv-theme] .shell,
html[data-sv-ui="aurora"] .shell{ background: transparent !important; }
html[data-sv-ui="aurora"] body{
  background:
    radial-gradient(900px 600px at 8% -8%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
    radial-gradient(800px 560px at 100% 0%, rgba(168, 85, 247, .20), transparent 60%),
    radial-gradient(900px 700px at 70% 110%, rgba(34, 211, 238, .18), transparent 60%),
    var(--bg) !important;
  background-attachment: fixed !important;
}
html[data-sv-ui="aurora"] body:before{
  content: ""; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--accent) 10%, transparent), rgba(168,85,247,.08), rgba(34,211,238,.08), color-mix(in srgb, var(--accent) 10%, transparent));
  filter: blur(80px); animation: svu-aurora 28s linear infinite; opacity: .9;
}
@keyframes svu-aurora{ to{ transform: rotate(360deg); } }
html[data-sv-ui="aurora"] #root{ position: relative; z-index: 1; }
html[data-sv-ui="aurora"][data-sv-theme] .shell:before{ opacity: .35; }
html[data-sv-ui="aurora"] .card,
html[data-sv-ui="aurora"] .list-card,
html[data-sv-ui="aurora"] .sv-login-card{
  background: color-mix(in srgb, var(--surface-solid, var(--surface)) 64%, transparent) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 60%, transparent) !important;
  border-radius: var(--svu-r) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 18px 50px -22px color-mix(in srgb, var(--accent) 45%, transparent) !important;
}
html.theme-dark[data-sv-ui="aurora"] .card,
html.theme-dark[data-sv-ui="aurora"] .list-card,
html.theme-dark[data-sv-ui="aurora"] .sv-login-card{
  background: color-mix(in srgb, var(--surface-solid, var(--surface)) 55%, transparent) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 20px 60px -24px color-mix(in srgb, var(--accent) 55%, transparent) !important;
}
html[data-sv-ui="aurora"] .card-interactive:hover{ transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 26px 60px -24px color-mix(in srgb, var(--accent) 60%, transparent) !important; }
html:root[data-sv-ui="aurora"] aside > .glass{
  background: color-mix(in srgb, var(--surface-solid, var(--surface)) 52%, transparent) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6);
  border-right: 1px solid color-mix(in srgb, #fff 50%, transparent) !important;
}
html.theme-dark[data-sv-ui="aurora"] aside > .glass{ border-right-color: rgba(255,255,255,.08) !important; }
html[data-sv-ui="aurora"] header.glass,
html[data-sv-ui="aurora"] nav.glass.fixed{
  background: color-mix(in srgb, var(--surface-solid, var(--surface)) 45%, transparent) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
}
html[data-sv-ui="aurora"] .nav-link{ border-radius: 999px !important; }
html[data-sv-ui="aurora"] .nav-link-active{
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), rgba(168,85,247,.16)) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent) inset, 0 8px 24px -12px var(--accent) !important;
  color: var(--accent-text, var(--accent)) !important;
}
html[data-sv-ui="aurora"] .btn-primary,
html[data-sv-ui="aurora"] .btn-secondary,
html[data-sv-ui="aurora"] .btn-ghost,
html[data-sv-ui="aurora"] .input,
html[data-sv-ui="aurora"] .segmented{ border-radius: 999px !important; }
html[data-sv-ui="aurora"] textarea.input{ border-radius: 18px !important; }
html[data-sv-ui="aurora"] .btn-primary{
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #a855f7)) !important;
  border-color: transparent !important; color: #fff !important;
  box-shadow: 0 10px 28px -12px var(--accent), 0 1px 0 rgba(255,255,255,.35) inset !important;
}
html[data-sv-ui="aurora"] .btn-primary:hover{ filter: brightness(1.06) saturate(1.1); transform: translateY(-1px); }
html[data-sv-ui="aurora"] .btn-secondary{ background: color-mix(in srgb, var(--surface-solid, #fff) 60%, transparent) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html[data-sv-ui="aurora"] .icon-tile{ border-radius: 999px !important; box-shadow: 0 6px 18px -8px currentColor; }
html[data-sv-ui="aurora"] .tone{ border-radius: 999px !important; }
html[data-sv-ui="aurora"] main h1{
  background: linear-gradient(120deg, var(--text) 10%, color-mix(in srgb, var(--accent) 80%, var(--text)) 60%, #a855f7 110%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -.025em !important;
}
html[data-sv-ui="aurora"] .modal, html[data-sv-ui="aurora"] [role="dialog"] > .card{ border-radius: calc(var(--svu-r) + 4px) !important; }

/* =========================================================== 3. QUANTUM GRID
   Engineering console: blueprint grid, corner brackets, mono data, sharp edges, neon focus. */
html[data-sv-ui="quantum"]{
  --svu-font: "Space Grotesk", var(--sv-font); --svu-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --svu-r: calc(var(--radius-card, 16px) * .3); --svu-rc: calc(var(--radius-ctl, 12px) * .35);
  --svu-line: color-mix(in srgb, var(--accent) 30%, var(--border));
  --svu-tick: color-mix(in srgb, var(--accent) 85%, transparent);
}
html[data-sv-ui="quantum"] body{ font-family: var(--svu-font) !important; letter-spacing: -.005em; }
html[data-sv-ui="quantum"][data-sv-theme] .shell,
html[data-sv-ui="quantum"] .shell{
  background:
    linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    var(--bg) !important;
}
html[data-sv-ui="quantum"][data-sv-theme] .shell:before{ display: none !important; }
html[data-sv-ui="quantum"] .card,
html[data-sv-ui="quantum"] .list-card,
html[data-sv-ui="quantum"] .sv-login-card{
  border-radius: var(--svu-r) !important;
  border: 1px solid var(--svu-line) !important;
  box-shadow: none !important;
  background:
    linear-gradient(var(--svu-tick), var(--svu-tick)) top left / 14px 2px no-repeat,
    linear-gradient(var(--svu-tick), var(--svu-tick)) top left / 2px 14px no-repeat,
    linear-gradient(var(--svu-tick), var(--svu-tick)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--svu-tick), var(--svu-tick)) bottom right / 2px 14px no-repeat,
    var(--surface-solid, var(--surface)) !important;
}
html[data-sv-ui="quantum"] .card-interactive:hover{
  border-color: color-mix(in srgb, var(--accent) 70%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 28px -6px color-mix(in srgb, var(--accent) 45%, transparent) !important;
}
html[data-sv-ui="quantum"] .num,
html[data-sv-ui="quantum"] .kbd,
html[data-sv-ui="quantum"] .tone,
html[data-sv-ui="quantum"] code,
html[data-sv-ui="quantum"] td.num{ font-family: var(--svu-mono) !important; letter-spacing: -.02em; }
html[data-sv-ui="quantum"] .tone{ border-radius: 3px !important; text-transform: uppercase; font-size: 10.5px !important; letter-spacing: .06em; }
html[data-sv-ui="quantum"] .eyebrow{ font-family: var(--svu-mono) !important; letter-spacing: .14em !important; }
html[data-sv-ui="quantum"] .eyebrow:before{ content: "// "; color: var(--accent); }
html:root[data-sv-ui="quantum"] aside > .glass{
  background: color-mix(in srgb, var(--surface-solid, var(--surface)) 92%, var(--accent)) !important;
  border-right: 1px solid var(--svu-line) !important;
}
html[data-sv-ui="quantum"] header.glass{ border-bottom: 1px solid var(--svu-line) !important; box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 18%, transparent) !important; }
html[data-sv-ui="quantum"] .nav-link{ border-radius: 3px !important; }
html[data-sv-ui="quantum"] .nav-link-active{
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 85%) !important;
  box-shadow: inset 3px 0 0 var(--accent) !important; color: var(--accent-text, var(--accent)) !important;
}
html[data-sv-ui="quantum"] .btn-primary,
html[data-sv-ui="quantum"] .btn-secondary,
html[data-sv-ui="quantum"] .btn-ghost,
html[data-sv-ui="quantum"] .btn-icon,
html[data-sv-ui="quantum"] .input,
html[data-sv-ui="quantum"] .segmented,
html[data-sv-ui="quantum"] .icon-tile{ border-radius: var(--svu-rc) !important; }
html[data-sv-ui="quantum"] .btn-primary{
  background: var(--accent) !important; color: var(--accent-fg, #fff) !important; border-color: transparent !important;
  text-transform: uppercase; letter-spacing: .07em; font-size: 12.5px !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, #fff) inset, 0 0 22px -6px var(--accent) !important;
}
html[data-sv-ui="quantum"] .btn-primary:hover{ box-shadow: 0 0 0 1px #fff inset, 0 0 30px -4px var(--accent) !important; }
html[data-sv-ui="quantum"] .input:focus,
html[data-sv-ui="quantum"] .input:focus-within{ box-shadow: 0 0 0 1px var(--accent), 0 0 18px -6px var(--accent) !important; }
html[data-sv-ui="quantum"] .icon-tile{ box-shadow: 0 0 0 1px currentColor inset; background: transparent !important; }
html[data-sv-ui="quantum"] main h1{ letter-spacing: -.03em !important; }
html[data-sv-ui="quantum"] main h1:before{ content: ""; display: inline-block; width: .38em; height: .9em; margin-right: .32em; vertical-align: -.08em; background: var(--accent); box-shadow: 0 0 14px var(--accent); animation: svu-blink 1.4s steps(2) infinite; }
@keyframes svu-blink{ 50%{ opacity: .25; } }
html[data-sv-ui="quantum"] table thead th{ font-family: var(--svu-mono) !important; text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px !important; }
html[data-sv-ui="quantum"] table tbody tr:hover td{ background: color-mix(in srgb, var(--accent) 6%, transparent) !important; }

/* =========================================================== 4. ZEN PAPER
   Editorial calm: serif headings, flat paper cards, hairlines, lots of air. */
html[data-sv-ui="zen"]{ --svu-serif: "Fraunces", Georgia, "Times New Roman", serif; --svu-font: "Inter", var(--sv-font); --svu-r: calc(var(--radius-card, 16px) * .55); }
html[data-sv-ui="zen"] body{ font-family: var(--svu-font) !important; }
html[data-sv-ui="zen"][data-sv-theme] .shell,
html[data-sv-ui="zen"] .shell{ background: var(--bg) !important; }
html[data-sv-ui="zen"][data-sv-theme] .shell:before,
html[data-sv-ui="zen"][data-sv-theme] .shell:after{ display: none !important; }
html[data-sv-ui="zen"] .card,
html[data-sv-ui="zen"] .list-card,
html[data-sv-ui="zen"] .sv-login-card{
  background: var(--surface-solid, var(--surface)) !important; box-shadow: none !important;
  border: 1px solid var(--border) !important; border-radius: var(--svu-r) !important;
}
html[data-sv-ui="zen"] .card-interactive:hover{ border-color: var(--text) !important; transform: none !important; }
html[data-sv-ui="zen"] main h1,
html[data-sv-ui="zen"] main h2,
html[data-sv-ui="zen"] .sv-login-card h1,
html[data-sv-ui="zen"] .sv-login-card h2{ font-family: var(--svu-serif) !important; font-weight: 500 !important; letter-spacing: -.01em !important; }
html[data-sv-ui="zen"] main h1{ font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem) !important; line-height: 1.12 !important; }
html[data-sv-ui="zen"] main .num.t-strong{ font-family: var(--svu-serif) !important; font-weight: 500 !important; }
html:root[data-sv-ui="zen"] aside > .glass{ background: var(--bg) !important; -webkit-backdrop-filter: none; backdrop-filter: none; border-right: 1px solid var(--border) !important; }
html[data-sv-ui="zen"] header.glass,
html[data-sv-ui="zen"] nav.glass.fixed{ background: var(--bg) !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important; }
html[data-sv-ui="zen"] .nav-link-active{
  background: transparent !important; box-shadow: none !important; color: var(--text) !important; font-weight: 600 !important;
}
html[data-sv-ui="zen"] .nav-link-active:after{ content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
html[data-sv-ui="zen"] .nav-link:hover{ background: transparent !important; color: var(--text) !important; }
html[data-sv-ui="zen"] .btn-primary{
  background: var(--text) !important; color: var(--bg) !important; border-color: var(--text) !important;
  box-shadow: none !important; border-radius: calc(var(--radius-ctl, 12px) * .7) !important;
}
html[data-sv-ui="zen"] .btn-primary:hover{ background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-fg, #fff) !important; }
html[data-sv-ui="zen"] .btn-secondary,
html[data-sv-ui="zen"] .btn-ghost,
html[data-sv-ui="zen"] .input{ box-shadow: none !important; border-radius: calc(var(--radius-ctl, 12px) * .7) !important; }
html[data-sv-ui="zen"] .icon-tile{ background: transparent !important; box-shadow: 0 0 0 1px var(--border) inset; border-radius: 50% !important; }
html[data-sv-ui="zen"] .tone{ background: transparent !important; box-shadow: 0 0 0 1px currentColor inset; }
@media (min-width: 1024px){ html[data-sv-ui="zen"] main{ padding-top: 2.75rem !important; } }

/* =========================================================== 5. CARBON PRO
   Dense trading-desk layout: dark command sidebar, accent strip, compact type, zebra data. */
html[data-sv-ui="carbon"]{
  --svu-font: "IBM Plex Sans", var(--sv-font); --svu-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --svu-slab: #0b1220; --svu-slab-2: #111a2e; --svu-r: 8px;
}
html.theme-dark[data-sv-ui="carbon"]{ --svu-slab: #05080f; --svu-slab-2: #0c1322; }
@media (min-width: 1024px){ html[data-sv-ui="carbon"]{ font-size: 15px; } }
html[data-sv-ui="carbon"] body{ font-family: var(--svu-font) !important; }
html[data-sv-ui="carbon"][data-sv-theme] .shell:before{ opacity: .25; }
html[data-sv-ui="carbon"] .num{ font-family: var(--svu-mono) !important; letter-spacing: -.03em; }
html[data-sv-ui="carbon"] .card,
html[data-sv-ui="carbon"] .list-card{
  border-radius: var(--svu-r) !important; box-shadow: 0 1px 2px rgba(15,23,42,.06) !important;
  border: 1px solid var(--border-strong, var(--border)) !important; background: var(--surface-solid, var(--surface)) !important;
}
html[data-sv-ui="carbon"] .card-interactive{ box-shadow: inset 0 2px 0 var(--accent), 0 1px 2px rgba(15,23,42,.06) !important; }
html[data-sv-ui="carbon"] .card-interactive:hover{ transform: none !important; border-color: var(--accent) !important; }
html[data-sv-ui="carbon"] .sv-login-card{ border-radius: 10px !important; box-shadow: inset 0 3px 0 var(--accent), 0 24px 60px -30px rgba(2,6,23,.5) !important; }
/* dark command sidebar */
html:root[data-sv-ui="carbon"] aside > .glass{
  background: linear-gradient(180deg, var(--svu-slab-2), var(--svu-slab)) !important; border-right: 1px solid rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none; color: rgba(226,232,240,.86);
}
html:root[data-sv-ui="carbon"] aside .t-strong{ color: #f8fafc !important; }
html:root[data-sv-ui="carbon"] aside .t-muted,
html:root[data-sv-ui="carbon"] aside .t-faint,
html:root[data-sv-ui="carbon"] aside .eyebrow{ color: rgba(203,213,225,.55) !important; }
html:root[data-sv-ui="carbon"] aside .nav-link{ color: rgba(226,232,240,.78) !important; border-radius: 6px !important; }
html:root[data-sv-ui="carbon"] aside .nav-link svg{ color: rgba(148,163,184,.9); }
html:root[data-sv-ui="carbon"] aside .nav-link:hover{ background: rgba(255,255,255,.06) !important; color: #fff !important; }
html:root[data-sv-ui="carbon"] aside .nav-link-active{ background: var(--accent) !important; color: #fff !important; box-shadow: 0 6px 16px -8px var(--accent) !important; }
html:root[data-sv-ui="carbon"] aside .nav-link-active svg{ color: #fff !important; }
html:root[data-sv-ui="carbon"] aside .divider,
html:root[data-sv-ui="carbon"] aside .border-t,
html:root[data-sv-ui="carbon"] aside .border-b{ border-color: rgba(255,255,255,.08) !important; }
html:root[data-sv-ui="carbon"] aside .segmented{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.08) !important; }
html:root[data-sv-ui="carbon"] aside .segmented button{ color: rgba(226,232,240,.75) !important; }
html:root[data-sv-ui="carbon"] aside .segmented button[aria-pressed="true"],
html:root[data-sv-ui="carbon"] aside .segmented button[aria-selected="true"],
html:root[data-sv-ui="carbon"] aside .segmented .active{ background: rgba(255,255,255,.14) !important; color: #fff !important; }
html:root[data-sv-ui="carbon"] aside .btn-icon{ color: rgba(226,232,240,.8) !important; }
html:root[data-sv-ui="carbon"] aside .btn-icon:hover{ background: rgba(255,255,255,.08) !important; }
html:root[data-sv-ui="carbon"] aside .tone{ background: rgba(255,255,255,.1) !important; color: #e2e8f0 !important; }
html[data-sv-ui="carbon"] header.glass{
  background: var(--surface-solid, var(--surface)) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 3px 0 var(--accent), 0 1px 0 var(--border) !important;
}
html[data-sv-ui="carbon"] .btn-primary,
html[data-sv-ui="carbon"] .btn-secondary,
html[data-sv-ui="carbon"] .btn-ghost,
html[data-sv-ui="carbon"] .btn-icon,
html[data-sv-ui="carbon"] .input,
html[data-sv-ui="carbon"] .segmented,
html[data-sv-ui="carbon"] .icon-tile{ border-radius: 6px !important; }
html[data-sv-ui="carbon"] .btn-primary{ background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-fg, #fff) !important; box-shadow: none !important; font-weight: 600 !important; }
html[data-sv-ui="carbon"] .tone{ border-radius: 4px !important; font-weight: 600; }
html[data-sv-ui="carbon"] main h1{ font-weight: 700 !important; letter-spacing: -.02em !important; }
html[data-sv-ui="carbon"] table thead th{ text-transform: uppercase; letter-spacing: .06em; font-size: 11px !important; }
html[data-sv-ui="carbon"] table tbody tr:nth-child(even) td{ background: color-mix(in srgb, var(--surface-2, #f1f5f9) 70%, transparent) !important; }
html:root[data-sv-ui="carbon"] nav.glass.fixed{ background: var(--svu-slab) !important; border-top-color: rgba(255,255,255,.08) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html:root[data-sv-ui="carbon"] nav.glass.fixed a,
html:root[data-sv-ui="carbon"] nav.glass.fixed button{ color: rgba(226,232,240,.72) !important; }
html:root[data-sv-ui="carbon"] nav.glass.fixed a[aria-current="page"],
html:root[data-sv-ui="carbon"] nav.glass.fixed .active{ color: #fff !important; }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  html[data-sv-ui="aurora"] body:before, html[data-sv-ui="quantum"] main h1:before{ animation: none !important; }
}

/* =========================================================== preview pill (any UI) */
.svu-pill{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:10050;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:999px;background:rgba(15,23,42,.92);color:#fff;font:600 12.5px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;box-shadow:0 18px 40px -16px rgba(2,6,23,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.svu-pill i{width:8px;height:8px;border-radius:50%;background:#22d3ee;box-shadow:0 0 0 4px rgba(34,211,238,.25);animation:svu-pulse 1.6s ease-in-out infinite}
.svu-pill button{border:0;border-radius:999px;padding:6px 12px;background:#fff;color:#0f172a;font:inherit;cursor:pointer}
@keyframes svu-pulse{50%{box-shadow:0 0 0 8px rgba(34,211,238,0)}}
@media (min-width:1024px){.svu-pill{bottom:24px}}

/* ================= UI Manager page (/ui-manager) ================= */
html.svum-route main{display:none!important}
.svum-page{padding-bottom:96px}
.svum-page>*{animation:svumIn .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes svumIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.svum-hero{position:relative;overflow:hidden;border-radius:var(--radius-card,18px);border:1px solid var(--border,rgba(15,23,42,.08));background:var(--surface-solid,#fff);padding:28px 28px 24px;margin-bottom:18px}
.svum-hero-glow{position:absolute;inset:-40% -10% auto auto;width:520px;height:320px;background:conic-gradient(from 90deg,#6366f1,#22d3ee,#a855f7,#f59e0b,#6366f1);filter:blur(70px);opacity:.22;animation:svumSpin 18s linear infinite;pointer-events:none}
@keyframes svumSpin{to{transform:rotate(360deg)}}
.svum-hero-in{position:relative}
.svum-hero h1{font-size:clamp(24px,3.2vw,32px);letter-spacing:-.02em;margin:4px 0 6px}
.svum-sub{max-width:720px;font-size:14.5px;line-height:1.55}
.svum-lock{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px;background:color-mix(in srgb,var(--accent,#2563eb) 10%,transparent);color:var(--accent,#2563eb)}
.svum-live{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:22px}
.svum-live-i{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px;border-radius:var(--radius-card,16px);border:1px solid var(--border,rgba(15,23,42,.08));background:var(--surface-solid,#fff);color:var(--text,inherit);cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s;min-width:0}
.svum-live-i:hover{transform:translateY(-1px)}
.svum-live-i.on{border-color:var(--accent,#2563eb);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#2563eb) 16%,transparent)}
.svum-live-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:color-mix(in srgb,var(--accent,#2563eb) 10%,transparent);color:var(--accent,#2563eb)}
.svum-live-tx{display:flex;flex-direction:column;min-width:0;flex:1}
.svum-live-l{font-weight:600;font-size:14px}
.svum-live-h{font-size:11.5px;color:var(--muted,#64748b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svum-live-s{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px;background:color-mix(in srgb,#10b981 12%,transparent);color:#047857}
html.theme-dark .svum-live-s{color:#6ee7b7}
.svum-dot{width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:svumPulse 2s infinite}
@keyframes svumPulse{70%{box-shadow:0 0 0 7px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.svum-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 2px 12px}
.svum-sec-top{margin-top:4px}
.svum-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;margin-bottom:22px}
.svum-card{display:flex;flex-direction:column;padding:0!important;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s;animation:svumIn .5s calc(var(--i)*60ms) both}
.svum-card:hover{transform:translateY(-3px)}
.svum-card.is-live{border-color:#10b981!important;box-shadow:0 0 0 3px rgba(16,185,129,.16)}
.svum-card.is-pv{border-color:var(--accent,#2563eb)!important}
.svum-card-art{position:relative;padding:14px;background:color-mix(in srgb,var(--text,#0f172a) 4%,transparent);border-bottom:1px solid var(--border,rgba(15,23,42,.08))}
.svum-badge{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:#10b981;color:#fff;box-shadow:0 4px 12px rgba(16,185,129,.35)}
.svum-num{position:absolute;left:12px;bottom:8px;font:600 10px/1 ui-monospace,monospace;letter-spacing:.1em;color:var(--muted,#64748b);opacity:.7}
.svum-card-b{padding:14px 16px 6px;flex:1}
.svum-card-b h3{font-size:16px;margin:0 0 4px}
.svum-card-b p{line-height:1.45;margin:0}
.svum-traits{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.svum-traits span{font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;border:1px solid var(--border,rgba(15,23,42,.1));color:var(--muted,#64748b)}
.svum-card-f{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px 8px;flex-wrap:wrap}
.svum-card-f .btn-sm,.svum-stage .btn-sm{display:inline-flex;align-items:center;gap:6px}
.svum-livelbl{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:#059669}
.svum-all{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:9px 12px;font-size:12px;font-weight:600;color:var(--muted,#64748b);background:none;border:0;border-top:1px dashed var(--border,rgba(15,23,42,.1));cursor:pointer;transition:color .2s,background .2s}
.svum-all:hover{color:var(--accent,#2563eb);background:color-mix(in srgb,var(--accent,#2563eb) 5%,transparent)}
.svum-all.confirm{color:#fff;background:var(--accent,#2563eb)}
.svum-stage{padding:0!important;overflow:hidden;margin-bottom:22px}
.svum-stage-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--border,rgba(15,23,42,.08))}
.svum-stage-t{display:flex;align-items:center;gap:8px}
.svum-devs button{display:grid;place-items:center;padding:6px 10px}
.svum-rec{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ef4444;margin-right:8px;animation:svumPulse 1.6s infinite;box-shadow:0 0 0 0 rgba(239,68,68,.6)}
.svum-stage-v{display:flex;justify-content:center;padding:18px;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--text,#0f172a) 3%,transparent) 0 10px,transparent 10px 20px)}
.svum-frame{width:100%;height:640px;border-radius:12px;overflow:hidden;border:1px solid var(--border,rgba(15,23,42,.12));background:#fff;box-shadow:0 20px 50px -20px rgba(15,23,42,.35);transition:width .35s cubic-bezier(.2,.7,.2,1),height .35s}
.svum-stage-v.dev-t .svum-frame{width:min(100%,820px);height:720px}
.svum-stage-v.dev-m .svum-frame{width:390px;max-width:100%;height:760px;border-radius:28px;border-width:8px;border-color:#0f172a}
.svum-frame iframe{width:100%;height:100%;border:0;display:block}
.svum-hist{padding:16px 18px!important}
.svum-hist ul{list-style:none;margin:0;padding:0}
.svum-hist li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--border,rgba(15,23,42,.07))}
.svum-hist li:first-child{border-top:0}
.svum-h-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.svum-h-l b{font-size:13.5px;font-weight:600}
.svum-hist .svum-restore{flex:none;display:inline-flex;align-items:center;gap:5px}
.svum-empty{padding:28px!important;text-align:center}
.svum-toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:9999;display:flex;align-items:center;gap:14px;padding:11px 14px 11px 18px;border-radius:14px;background:#0f172a;color:#fff;font-size:13.5px;font-weight:500;box-shadow:0 18px 40px -12px rgba(0,0,0,.45);animation:svumIn .3s both;max-width:calc(100vw - 32px)}
.svum-toast.bad{background:#b91c1c}
.svum-toast button{background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:9px;padding:5px 11px;font-weight:600;cursor:pointer}
.svum-toast.out{opacity:0;transition:opacity .3s}
@media (min-width:1024px){.svum-toast{bottom:28px}}
@media (max-width:760px){
  .svum-hero{padding:20px 18px}
  .svum-live{grid-template-columns:1fr;gap:8px}
  .svum-grid{grid-template-columns:1fr}
  .svum-stage-v{padding:10px}
  .svum-frame{height:520px}
  .svum-stage-v.dev-t .svum-frame,.svum-stage-v.dev-m .svum-frame{height:600px}
  .svum-hist li{flex-direction:column;align-items:flex-start}
}
@media (min-width:761px) and (max-width:1100px){.svum-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1101px){.svum-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* mini mockups — fixed colours so each design reads true regardless of the current UI */
.svum-mock{display:flex;gap:6px;height:128px;border-radius:10px;overflow:hidden;padding:6px;font-size:0}
.svum-mock .m-side{width:22%;display:flex;flex-direction:column;gap:5px;padding:6px 5px;border-radius:7px}
.svum-mock .m-side i{height:6px;border-radius:3px;opacity:.5}
.svum-mock .m-side i.on{opacity:1}
.svum-mock .m-main{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.svum-mock .m-top{height:14px;display:flex;align-items:center;justify-content:space-between;padding:0 6px;border-radius:6px}
.svum-mock .m-top b{width:34%;height:5px;border-radius:3px}
.svum-mock .m-top span{width:14px;height:8px;border-radius:4px}
.svum-mock .m-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.svum-mock .m-card{border-radius:7px;padding:6px;display:flex;flex-direction:column;gap:4px}
.svum-mock .m-card em{width:60%;height:3px;border-radius:2px;opacity:.5}
.svum-mock .m-card strong{width:80%;height:6px;border-radius:3px}
.svum-mock .m-chart{flex:1;flex-direction:row;align-items:flex-end;gap:5px;padding:8px}
.svum-mock .m-chart s{flex:1;border-radius:3px 3px 0 0;text-decoration:none;transform-origin:bottom;animation:svumBar 2.6s ease-in-out infinite alternate}
.svum-mock .m-chart s:nth-child(2n){animation-delay:.4s}.svum-mock .m-chart s:nth-child(3n){animation-delay:.8s}
@keyframes svumBar{from{transform:scaleY(.75)}to{transform:scaleY(1)}}
/* classic */
.svum-mock-classic{background:#f1f5f9}
.svum-mock-classic .m-side,.svum-mock-classic .m-top,.svum-mock-classic .m-card{background:#fff;box-shadow:0 2px 6px rgba(15,23,42,.08)}
.svum-mock-classic .m-side i,.svum-mock-classic .m-card em,.svum-mock-classic .m-top b{background:#94a3b8}
.svum-mock-classic .m-side i.on,.svum-mock-classic .m-top span{background:#2563eb}
.svum-mock-classic .m-card strong{background:#0f172a}
.svum-mock-classic .m-chart s{background:#2563eb}
/* aurora */
.svum-mock-aurora{background:radial-gradient(120% 90% at 0 0,#c4b5fd,transparent 55%),radial-gradient(90% 90% at 100% 0,#67e8f9,transparent 55%),radial-gradient(90% 90% at 60% 100%,#f9a8d4,transparent 60%),#eef2ff;background-size:160% 160%;animation:svumAur 9s ease-in-out infinite alternate}
@keyframes svumAur{to{background-position:100% 100%}}
.svum-mock-aurora .m-side,.svum-mock-aurora .m-top,.svum-mock-aurora .m-card{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);backdrop-filter:blur(6px);border-radius:10px}
.svum-mock-aurora .m-side i,.svum-mock-aurora .m-card em,.svum-mock-aurora .m-top b{background:#6d28d9;border-radius:9px}
.svum-mock-aurora .m-side i.on,.svum-mock-aurora .m-top span{background:linear-gradient(90deg,#7c3aed,#06b6d4)}
.svum-mock-aurora .m-card strong{background:#312e81}
.svum-mock-aurora .m-chart s{background:linear-gradient(#a855f7,#06b6d4);border-radius:6px 6px 2px 2px}
/* quantum */
.svum-mock-quantum{background:#060b16;background-image:linear-gradient(rgba(34,211,238,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.09) 1px,transparent 1px);background-size:10px 10px}
.svum-mock-quantum .m-side,.svum-mock-quantum .m-top,.svum-mock-quantum .m-card{background:rgba(8,20,38,.9);border:1px solid rgba(34,211,238,.35);border-radius:2px;position:relative}
.svum-mock-quantum .m-card:before{content:"";position:absolute;left:-1px;top:-1px;width:6px;height:6px;border-left:2px solid #22d3ee;border-top:2px solid #22d3ee}
.svum-mock-quantum .m-side i,.svum-mock-quantum .m-card em,.svum-mock-quantum .m-top b{background:#38bdf8;border-radius:0}
.svum-mock-quantum .m-side i.on,.svum-mock-quantum .m-top span{background:#22d3ee;box-shadow:0 0 8px #22d3ee}
.svum-mock-quantum .m-card strong{background:#e0f2fe;border-radius:0}
.svum-mock-quantum .m-chart s{background:#22d3ee;border-radius:0;box-shadow:0 0 6px rgba(34,211,238,.6)}
/* zen */
.svum-mock-zen{background:#faf7f0;gap:9px;padding:9px}
.svum-mock-zen .m-side{background:transparent;border-right:1px solid #e7e1d3;border-radius:0}
.svum-mock-zen .m-top{background:transparent;border-bottom:1px solid #e7e1d3;border-radius:0}
.svum-mock-zen .m-card{background:#fffdf8;border:1px solid #ebe5d8;border-radius:3px}
.svum-mock-zen .m-side i,.svum-mock-zen .m-card em{background:#a8a29e;height:4px}
.svum-mock-zen .m-top b{background:#1c1917;height:7px;width:40%;border-radius:1px}
.svum-mock-zen .m-side i.on,.svum-mock-zen .m-top span{background:#9a3412}
.svum-mock-zen .m-card strong{background:#292524;border-radius:1px}
.svum-mock-zen .m-chart s{background:#c2410c;opacity:.85;border-radius:0;flex:0 0 7%;margin:0 auto}
/* carbon */
.svum-mock-carbon{background:#f4f4f5;gap:0;padding:0}
.svum-mock-carbon .m-side{background:#18181b;border-radius:0;width:20%}
.svum-mock-carbon .m-side i{background:#71717a;border-radius:1px;height:4px}
.svum-mock-carbon .m-side i.on{background:#f59e0b}
.svum-mock-carbon .m-main{padding:5px;gap:4px}
.svum-mock-carbon .m-top{background:#27272a;border-radius:2px}
.svum-mock-carbon .m-top b{background:#a1a1aa}.svum-mock-carbon .m-top span{background:#f59e0b;border-radius:1px}
.svum-mock-carbon .m-kpis{gap:3px}
.svum-mock-carbon .m-card{background:#fff;border:1px solid #d4d4d8;border-radius:2px;padding:4px}
.svum-mock-carbon .m-card em{background:#71717a}.svum-mock-carbon .m-card strong{background:#18181b;border-radius:1px}
.svum-mock-carbon .m-chart{background:repeating-linear-gradient(#fff 0 8px,#f4f4f5 8px 16px)}
.svum-mock-carbon .m-chart s{background:#f59e0b;border-radius:0;flex:0 0 9%}
@media (prefers-reduced-motion:reduce){.svum-hero-glow,.svum-mock-aurora,.svum-mock .m-chart s,.svum-dot,.svum-rec{animation:none}}

/* ---------- v1.25.1 Personal UI (per admin / role / investor) ---------- */
.svup{padding:16px 18px!important;margin-top:16px}
.svup .svum-sec-h{align-items:flex-start}
.svup .svum-sec-h p{margin-top:2px;max-width:640px}
.svup-note{margin:2px 2px 4px}
.svup-list{list-style:none;margin:6px 0 0;padding:0}
.svup-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--border,rgba(15,23,42,.08))}
.svup-list li:first-child{border-top:0}
.svup-l{display:flex;flex-direction:column;gap:6px;min-width:0}
.svup-ui{align-self:flex-start;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.svup-who{display:flex;flex-wrap:wrap;gap:6px}
.svup-chip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;padding:3px 9px;border-radius:999px;border:1px solid var(--border,rgba(15,23,42,.1));color:var(--text);background:var(--surface-solid,#fff);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svup-chip.role{border-style:dashed}
.svup-chip svg{flex:none;opacity:.6}
.svup-act{display:flex;gap:4px;flex:none}
.svup-ed{border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:14px;padding:14px;margin:4px 0 8px;background:color-mix(in srgb,var(--accent) 4%,var(--surface-solid,#fff))}
.svup-ed-row{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.svup-skins{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.svup-skin{display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:12px;border:1.5px solid var(--border,rgba(15,23,42,.1));background:var(--surface-solid,#fff);color:var(--text);font-size:12.5px;font-weight:600;cursor:pointer;text-align:center;transition:border-color .15s,box-shadow .15s}
.svup-skin .svum-mock{height:54px;pointer-events:none}
.svup-skin.on{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.svup-skin:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.svup-cols{display:grid;grid-template-columns:3fr 2fr;gap:12px}
.svup-pick{border:1px solid var(--border,rgba(15,23,42,.1));border-radius:12px;background:var(--surface-solid,#fff);min-width:0}
.svup-pick-h{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--border,rgba(15,23,42,.08))}
.svup-pick-h .t-faint{margin-right:auto}
.svup-opts{max-height:252px;overflow:auto;padding:4px}
.svup-opt{display:flex;align-items:center;gap:10px;padding:8px;border-radius:9px;cursor:pointer;min-width:0}
.svup-opt:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.svup-opt.on{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.svup-opt input{width:16px;height:16px;flex:none;accent-color:var(--accent)}
.svup-opt-t{display:flex;flex-direction:column;min-width:0}
.svup-opt-t b{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svup-opt-t small{font-size:11.5px;color:var(--muted,#64748b);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svup-none{padding:10px}
.svup-hint{margin:10px 2px 0}
.svup-ed-f{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
@media (max-width:900px){.svup-cols{grid-template-columns:1fr}}
@media (max-width:640px){
  .svup-skins{grid-template-columns:repeat(3,minmax(0,1fr))}
  .svup-list li{flex-direction:column;align-items:stretch}
  .svup-act{justify-content:flex-end}
  .svup .svum-sec-h .btn-primary{width:100%;justify-content:center}
  .svup-ed-f button{flex:1}
}