/* ==========================================================================
   Shubh Ventures — Panel design layer (v2)
   Professional light-first theme, iOS-style motion, glass surfaces, grid fixes,
   login redesign, better 2FA / approval screens. Colours come from Theme Studio
   (sv-theme.js writes the variables for the whole site).
   ========================================================================== */

/* ---------- Base tokens (overridden live by Theme Studio) ---------- */
html[data-sv-theme]{
  --sv-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --spring: cubic-bezier(.32,.72,0,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --sv-ios: cubic-bezier(.25,.1,.25,1);
  --dur-fast: .16s; --dur: .26s; --dur-slow: .42s;
}
html[data-sv-theme] body{font-family:var(--sv-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;letter-spacing:-.003em}
html[data-sv-theme]{scroll-behavior:smooth}
html[data-sv-theme] ::selection{background:var(--accent-soft);color:var(--text)}

/* ---------- Ambient background ---------- */
html[data-sv-theme] .shell{background:var(--bg)}
html[data-sv-theme][data-sv-ambient="on"] .shell:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1000px 520px at 92% -10%, var(--accent-glow), transparent 62%),
    radial-gradient(800px 460px at -8% 105%, var(--sv-ambient-2, rgba(56,189,248,.10)), transparent 60%);
  opacity:.9;
}
html[data-sv-theme] .shell > div:not([class*="fixed"]):not([role]){position:relative}

/* ---------- Glass: header, sidebar, bottom bar ---------- */
html[data-sv-theme] .glass{
  background:var(--glass) !important;
  -webkit-backdrop-filter:saturate(180%) blur(var(--blur));backdrop-filter:saturate(180%) blur(var(--blur));
  border-color:var(--glass-border) !important;
}
html[data-sv-theme] header.glass{box-shadow:0 1px 0 var(--glass-border)}
html[data-sv-theme] aside .glass{box-shadow:1px 0 0 var(--glass-border)}

/* ---------- Sidebar navigation ---------- */
html[data-sv-theme] aside nav .eyebrow{font-size:10.5px;letter-spacing:.14em;opacity:.75;margin-top:6px}
html[data-sv-theme] .nav-link{
  border-radius:11px;transition:background-color var(--dur) var(--sv-ios),color var(--dur) var(--sv-ios),transform var(--dur-fast) var(--spring);
  position:relative;padding-top:.45rem;padding-bottom:.45rem;
}
html[data-sv-theme] .nav-link:active{transform:scale(.975)}
html[data-sv-theme] .nav-link-active{background:var(--accent-soft) !important;color:var(--accent-text) !important;font-weight:600}
html[data-sv-theme] .nav-link-active:before{content:"";position:absolute;left:-6px;top:22%;bottom:22%;width:3px;border-radius:3px;background:var(--accent);animation:sv-grow var(--dur-slow) var(--spring)}
html[data-sv-theme] .nav-link.sv-has-cap{display:grid;grid-template-columns:16px minmax(0,1fr) auto;column-gap:.7rem;align-items:center}
html[data-sv-theme] .nav-link.sv-has-cap > svg{grid-row:1 / span 2;align-self:start;margin-top:2px}
html[data-sv-theme] .nav-link.sv-has-cap > span.flex-1{grid-column:2}
html[data-sv-theme] .nav-link.sv-has-cap > :not(svg):not(span.flex-1):not(.sv-cap){grid-column:3;grid-row:1}
html[data-sv-theme] .sv-cap{grid-column:2 / -1;display:block;font-size:10.5px;line-height:1.3;font-weight:400;color:var(--faint);white-space:normal;margin-top:1px;letter-spacing:0}
html[data-sv-theme] .nav-link-active .sv-cap{color:var(--accent-text);opacity:.75}
html[data-sv-theme][data-sv-caps="off"] .sv-cap{display:none}

/* ---------- Cards & surfaces ---------- */
html[data-sv-theme] .card,html[data-sv-theme] .list-card,html[data-sv-theme] .surface{
  border-radius:var(--radius-card);border-color:var(--border);
  transition:transform var(--dur) var(--spring),box-shadow var(--dur) var(--sv-ios),border-color var(--dur) var(--sv-ios),background-color var(--dur) var(--sv-ios);
}
html[data-sv-theme] .card{box-shadow:var(--shadow-1)}
html[data-sv-theme] .list-card:hover,html[data-sv-theme] .deck-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
html[data-sv-theme] main section.card:hover{box-shadow:var(--shadow-2)}

/* Key / value rows placed inside grids (2FA page, detail pages): show as neat tiles */
html[data-sv-theme] main .grid > .flex.items-start.justify-between.gap-4.text-sm{
  flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:calc(var(--radius-ctl) + 2px);
  padding:10px 12px !important;min-width:0;
}
html[data-sv-theme] main .grid > .flex.items-start.justify-between.gap-4.text-sm > :first-child{font-size:11.5px;color:var(--muted);font-weight:500}
html[data-sv-theme] main .grid > .flex.items-start.justify-between.gap-4.text-sm > :last-child{text-align:left !important;font-weight:600;color:var(--text);word-break:break-word}

/* Grid balancing (sv-theme.js adds sv-cols-N when the last row would be ragged) */
@media (min-width:1280px){
  html[data-sv-theme] .grid.sv-cols-2{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  html[data-sv-theme] .grid.sv-cols-3{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  html[data-sv-theme] .grid.sv-cols-4{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  html[data-sv-theme] .grid.sv-cols-5{grid-template-columns:repeat(5,minmax(0,1fr)) !important}
  html[data-sv-theme] .grid.sv-cols-6{grid-template-columns:repeat(6,minmax(0,1fr)) !important}
}
html[data-sv-theme] main .grid{align-items:stretch}
html[data-sv-theme] main .grid.items-start{align-items:start}
html[data-sv-theme] main .grid > section.card,html[data-sv-theme] main .grid > .space-y-4{min-width:0}

/* ---------- Buttons & inputs ---------- */
html[data-sv-theme] .btn-primary,html[data-sv-theme] .btn-secondary,html[data-sv-theme] .btn-ghost,html[data-sv-theme] .btn-icon{
  border-radius:var(--radius-ctl);
  transition:transform var(--dur-fast) var(--spring),background-color var(--dur) var(--sv-ios),box-shadow var(--dur) var(--sv-ios),color var(--dur) var(--sv-ios),border-color var(--dur) var(--sv-ios);
}
html[data-sv-theme] .btn-primary{background:linear-gradient(180deg,var(--accent),var(--accent-hover));box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 16px -8px var(--accent-glow)}
html[data-sv-theme] .btn-primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 10px 22px -8px var(--accent-glow);transform:translateY(-1px)}
html[data-sv-theme] .btn-primary:active,html[data-sv-theme] .btn-secondary:active,html[data-sv-theme] .btn-ghost:active,html[data-sv-theme] .btn-icon:active{transform:scale(.965)}
html[data-sv-theme] .input{border-radius:var(--radius-ctl);transition:border-color var(--dur) var(--sv-ios),box-shadow var(--dur) var(--sv-ios),background-color var(--dur) var(--sv-ios)}
html[data-sv-theme] .input:focus{box-shadow:0 0 0 4px var(--ring)}
html[data-sv-theme] .segmented{border-radius:calc(var(--radius-ctl) + 2px)}
html[data-sv-theme] .segmented button{transition:all var(--dur) var(--spring)}
html[data-sv-theme] [role=switch]{transition:background-color var(--dur) var(--sv-ios)}
html[data-sv-theme] [role=switch] > *{transition:transform var(--dur-slow) var(--spring) !important}

/* ---------- Page & content motion ---------- */
@keyframes sv-page-in{from{opacity:0;transform:translateY(10px) scale(.995);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes sv-rise-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes sv-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes sv-pop{0%{opacity:0;transform:scale(.94) translateY(6px)}100%{opacity:1;transform:none}}
@keyframes sv-fade{from{opacity:0}to{opacity:1}}
html[data-sv-theme] main.sv-enter > div{animation:sv-page-in .5s var(--spring) backwards}
html[data-sv-theme] main.sv-enter > div > *{animation:sv-rise-in .55s var(--spring) backwards}
html[data-sv-theme] main.sv-enter > div > *:nth-child(2){animation-delay:.04s}
html[data-sv-theme] main.sv-enter > div > *:nth-child(3){animation-delay:.08s}
html[data-sv-theme] main.sv-enter > div > *:nth-child(4){animation-delay:.12s}
html[data-sv-theme] main.sv-enter > div > *:nth-child(5){animation-delay:.16s}
html[data-sv-theme] main.sv-enter > div > *:nth-child(n+6){animation-delay:.2s}

/* Dialogs, drawers, menus: blur the backdrop, spring in */
html[data-sv-theme] .fixed.inset-0[class*="bg-"],html[data-sv-theme] .fixed.inset-0[style*="overlay"]{-webkit-backdrop-filter:blur(8px) saturate(140%);backdrop-filter:blur(8px) saturate(140%)}
html[data-sv-theme] [role=dialog],html[data-sv-theme] [role=menu],html[data-sv-theme] [role=listbox]{border-radius:var(--radius-lg)}
html[data-sv-theme] [role=menu],html[data-sv-theme] [role=listbox]{animation:sv-pop .22s var(--spring) both;transform-origin:top right}
html[data-sv-theme] .glass-float{-webkit-backdrop-filter:saturate(180%) blur(calc(var(--blur) + 6px));backdrop-filter:saturate(180%) blur(calc(var(--blur) + 6px))}
html[data-sv-theme] details > summary{cursor:pointer}
html[data-sv-theme] details[open] > :not(summary){animation:sv-rise-in .35s var(--spring) backwards}

/* ---------- Loading ---------- */
html[data-sv-theme] .skeleton{background:linear-gradient(100deg,var(--surface-2) 30%,var(--surface-3) 50%,var(--surface-2) 70%) !important;background-size:220% 100% !important;animation:sv-shimmer 1.25s var(--sv-ios) infinite !important;border-radius:var(--radius-ctl)}
html[data-sv-theme] .route-progress{height:3px}
html[data-sv-theme] .route-progress:after{width:45%;background:linear-gradient(90deg,transparent,var(--accent),#38bdf8,transparent);filter:drop-shadow(0 0 6px var(--accent-glow))}
html[data-sv-theme] .animate-spin.rounded-full{border-width:2.5px}
html[data-sv-theme] [aria-busy="true"][aria-label="Loading"] img{animation:sv-breathe 1.6s var(--sv-ios) infinite}
@keyframes sv-breathe{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 transparent)}50%{transform:scale(1.06);filter:drop-shadow(0 8px 18px var(--accent-glow))}}
#sv-boot{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--bg,#f5f7fb);transition:opacity .45s var(--sv-ios),visibility .45s}
#sv-boot.sv-hide{opacity:0;visibility:hidden}
#sv-boot .ring{width:46px;height:46px;border-radius:50%;border:3px solid rgba(29,78,216,.15);border-top-color:var(--accent,#1d4ed8);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Floating hint (small helper text under any button) ---------- */
#sv-tip{position:fixed;z-index:10000;pointer-events:none;max-width:260px;padding:7px 10px;border-radius:10px;font:500 11.5px/1.35 var(--sv-font);
  color:var(--text);background:var(--glass-strong);border:1px solid var(--glass-border);box-shadow:var(--shadow-2);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  opacity:0;transform:translateY(-4px) scale(.98);transition:opacity .18s var(--sv-ios),transform .22s var(--spring)}
#sv-tip.on{opacity:1;transform:none}
html[data-sv-caps="off"] #sv-tip{display:none}

/* ---------- Toasts ---------- */
html[data-sv-theme] [role=status].pointer-events-auto,html[data-sv-theme] .z-\[100\] > *{animation:sv-pop .3s var(--spring) both}

/* ==========================================================================
   Sign-in page
   ========================================================================== */
html[data-sv-theme] .sv-login{background:var(--sv-login-bg,#f3f6fc) !important;min-height:100vh}
html[data-sv-theme] .sv-login > .pointer-events-none{
  background:
    radial-gradient(720px 420px at 12% 8%, var(--accent-glow), transparent 65%),
    radial-gradient(620px 380px at 95% 92%, rgba(56,189,248,.16), transparent 62%),
    radial-gradient(420px 300px at 80% 8%, rgba(167,139,250,.14), transparent 60%) !important;
  animation:sv-aurora 16s ease-in-out infinite alternate;
}
@keyframes sv-aurora{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2%,1.5%,0) scale(1.05)}100%{transform:translate3d(2%,-1%,0) scale(1.02)}}
html[data-sv-theme] .sv-login h1{color:var(--text) !important}
html[data-sv-theme] .sv-login h1 + p{color:var(--muted) !important}
html[data-sv-theme] .sv-login img[alt="Shubh Ventures"]{box-shadow:0 18px 40px -18px var(--accent-glow),0 0 0 1px var(--border) !important;animation:sv-pop .6s var(--spring) both}
html[data-sv-theme] .sv-login-card{
  background:var(--glass-strong) !important;border:1px solid var(--glass-border) !important;border-radius:24px !important;
  -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 80px -30px rgba(15,23,42,.35),0 0 0 1px rgba(15,23,42,.03) !important;
  padding:28px !important;
}
html[data-sv-theme] .sv-login-card h2{color:var(--text) !important;font-size:17px !important;letter-spacing:-.01em}
html[data-sv-theme] .sv-login-card input{border-radius:12px !important;height:46px;background:var(--surface-elevated) !important;border-color:var(--border-strong) !important;color:var(--text) !important;transition:box-shadow .2s var(--sv-ios),border-color .2s var(--sv-ios)}
html[data-sv-theme] .sv-login-card input:focus{border-color:var(--accent) !important;box-shadow:0 0 0 4px var(--ring) !important}
html[data-sv-theme] .sv-login-card button[type=submit],html[data-sv-theme] .sv-login-card .bg-brand-700{
  background:linear-gradient(180deg,var(--accent),var(--accent-hover)) !important;border-radius:12px !important;min-height:46px;
  box-shadow:0 10px 24px -12px var(--accent-glow) !important;transition:transform .16s var(--spring),box-shadow .2s var(--sv-ios)}
html[data-sv-theme] .sv-login-card button:active{transform:scale(.97)}
/* sign-in progress steps */
html[data-sv-theme] .sv-login-card ol[aria-label="Sign-in progress"]{gap:6px !important;margin-bottom:20px !important}
html[data-sv-theme] .sv-login-card ol[aria-label="Sign-in progress"] li > span:first-child{height:5px !important;border-radius:6px !important;transition:background-color .5s var(--sv-ios)}
html[data-sv-theme] .sv-login-card ol[aria-label="Sign-in progress"] .bg-brand-600{background:var(--accent) !important}
html[data-sv-theme] .sv-login-card ol[aria-label="Sign-in progress"] .bg-cyan-400{background:linear-gradient(90deg,var(--accent) 0%,#38bdf8 50%,var(--surface-3) 50%) !important;background-size:200% 100% !important;animation:sv-step 1.6s var(--sv-ios) infinite}
@keyframes sv-step{0%{background-position:100% 0}100%{background-position:0 0}}
/* stage header icon tile */
html[data-sv-theme] .sv-login-card .h-11.w-11.rounded-2xl{width:48px;height:48px;border-radius:15px;box-shadow:0 0 0 6px color-mix(in srgb, currentColor 8%, transparent)}
/* waiting for approval / location: animated radar */
html[data-sv-theme] .sv-wait{
  position:relative;flex-direction:column !important;align-items:center !important;text-align:center;gap:14px !important;
  padding:26px 18px 20px !important;border-radius:18px !important;background:var(--surface-2) !important;border:1px solid var(--border);color:var(--text-body) !important;overflow:hidden
}
html[data-sv-theme] .sv-wait > svg{width:26px !important;height:26px !important;margin:18px 0 10px !important;color:var(--accent) !important;position:relative;z-index:1}
html[data-sv-theme] .sv-wait:before,html[data-sv-theme] .sv-wait:after{
  content:"";position:absolute;left:50%;top:44px;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;
  background:var(--accent-soft);border:1.5px solid var(--accent);opacity:0;animation:sv-radar 2.4s var(--sv-ios) infinite
}
html[data-sv-theme] .sv-wait:after{animation-delay:1.2s}
@keyframes sv-radar{0%{transform:scale(.55);opacity:.8}100%{transform:scale(1.9);opacity:0}}
html[data-sv-theme] .sv-wait > span{font-size:13.5px;line-height:1.55;max-width:300px}
html[data-sv-theme] .sv-wait > span:after{content:"";display:block;margin:12px auto 0;width:44px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent),#38bdf8,var(--accent));background-size:200% 100%;animation:sv-shimmer 1.4s linear infinite}

/* Left brand panel on wide screens */
#sv-login-hero{display:none}
@media (min-width:1024px){
  html.sv-route-login #sv-login-hero{display:flex}
  html.sv-route-login .sv-login{padding-left:calc(46vw + 16px) !important;justify-content:center}
}
#sv-login-hero{position:fixed;left:16px;top:16px;bottom:16px;width:46vw;z-index:5;border-radius:28px;overflow:hidden;flex-direction:column;justify-content:space-between;padding:48px 52px;color:#fff;
  background:linear-gradient(150deg,var(--sv-hero-a,#0b1733) 0%,var(--sv-hero-b,#12306b) 55%,var(--accent) 130%);animation:sv-fade .6s var(--sv-ios) both}
#sv-login-hero .orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;animation:sv-float 14s ease-in-out infinite alternate}
#sv-login-hero .o1{width:340px;height:340px;right:-80px;top:-60px;background:#38bdf8}
#sv-login-hero .o2{width:280px;height:280px;left:-60px;bottom:-40px;background:#818cf8;animation-delay:-5s}
#sv-login-hero .grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle at 30% 30%,#000,transparent 75%);-webkit-mask-image:radial-gradient(circle at 30% 30%,#000,transparent 75%)}
@keyframes sv-float{0%{transform:translate(0,0)}100%{transform:translate(-30px,40px)}}
#sv-login-hero > *{position:relative}
#sv-login-hero .brand{display:flex;align-items:center;gap:14px;font:700 15px/1.2 var(--sv-font);letter-spacing:.22em}
#sv-login-hero .brand img{width:46px;height:46px;border-radius:13px;background:#fff;padding:3px}
#sv-login-hero .brand small{display:block;font-weight:500;letter-spacing:.08em;opacity:.7;font-size:11px;margin-top:4px}
#sv-login-hero h2{font:700 38px/1.12 var(--sv-font);letter-spacing:-.02em;margin:0 0 14px;max-width:460px}
#sv-login-hero p{font:400 15px/1.6 var(--sv-font);opacity:.78;max-width:440px;margin:0}
#sv-login-hero ul{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px;max-width:440px}
#sv-login-hero li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:500 13.5px/1.45 var(--sv-font);animation:sv-rise-in .7s var(--spring) both}
#sv-login-hero li:nth-child(2){animation-delay:.08s}#sv-login-hero li:nth-child(3){animation-delay:.16s}
#sv-login-hero li b{display:block;font-weight:600;font-size:14px}
#sv-login-hero li span.i{flex:none;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
#sv-login-hero li small{opacity:.72;font-weight:400}
#sv-login-hero .foot{font:400 12px/1.5 var(--sv-font);opacity:.6}

/* ==========================================================================
   Theme Studio
   ========================================================================== */
#sv-studio{margin-bottom:22px;animation:sv-rise-in .5s var(--spring) backwards}
#sv-studio .sv-grid{display:grid;gap:18px;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
@media (max-width:1100px){#sv-studio .sv-grid{grid-template-columns:1fr}}
#sv-studio .sv-card{background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-1);overflow:hidden}
#sv-studio .sv-card > header{padding:14px 18px;border-bottom:1px solid var(--border)}
#sv-studio .sv-card > header h3{margin:0;font:600 14px/1.3 var(--sv-font);color:var(--text)}
#sv-studio .sv-card > header p{margin:2px 0 0;font-size:12px;color:var(--muted)}
#sv-studio .sv-body{padding:16px 18px;display:grid;gap:16px}
#sv-studio .presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
#sv-studio .preset{cursor:pointer;border:1.5px solid var(--border);border-radius:14px;padding:10px;background:var(--surface);text-align:left;transition:transform .2s var(--spring),border-color .2s,box-shadow .2s;color:var(--text)}
#sv-studio .preset:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
#sv-studio .preset.on{border-color:var(--accent);box-shadow:0 0 0 4px var(--ring)}
#sv-studio .preset .sw{height:46px;border-radius:9px;margin-bottom:8px;display:flex;overflow:hidden;border:1px solid rgba(0,0,0,.06)}
#sv-studio .preset .sw i{flex:1}
#sv-studio .preset b{font-size:12.5px;display:block}
#sv-studio .preset small{font-size:11px;color:var(--muted)}
#sv-studio .row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:center}
#sv-studio .row label{font-size:12.5px;font-weight:600;color:var(--text)}
#sv-studio .row label small{display:block;font-weight:400;color:var(--muted);font-size:11px;margin-top:1px}
#sv-studio .colors{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
#sv-studio .color{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
#sv-studio .color input[type=color]{width:34px;height:34px;border:none;border-radius:10px;padding:0;background:none;cursor:pointer}
#sv-studio .color input[type=color]::-webkit-color-swatch-wrapper{padding:0}
#sv-studio .color input[type=color]::-webkit-color-swatch{border:1px solid rgba(0,0,0,.1);border-radius:9px}
#sv-studio .color span{font-size:12px;font-weight:600;color:var(--text)}
#sv-studio .color span small{display:block;font-weight:400;color:var(--muted);font-size:10.5px}
#sv-studio input[type=range]{width:100%;accent-color:var(--accent)}
#sv-studio .seg{display:inline-flex;gap:3px;padding:3px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);flex-wrap:wrap}
#sv-studio .seg button{border:0;background:transparent;padding:6px 12px;border-radius:9px;font:500 12.5px var(--sv-font);color:var(--muted);cursor:pointer;transition:all .22s var(--spring)}
#sv-studio .seg button.on{background:var(--surface-elevated);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--border)}
#sv-studio .actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:14px 18px;border-top:1px solid var(--border);background:var(--surface-2)}
#sv-studio .actions .note{font-size:11.5px;color:var(--muted)}
#sv-studio .preview{padding:18px;background:var(--bg);display:grid;gap:12px}
#sv-studio .pv-card{background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius-card);padding:14px;box-shadow:var(--shadow-1)}
#sv-studio .pv-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#sv-studio .pv-kpi{background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius-card);padding:12px}
#sv-studio .pv-kpi small{color:var(--muted);font-size:11px}
#sv-studio .pv-kpi b{display:block;color:var(--text);font-size:20px;margin-top:4px}
#sv-studio .pv-btns{display:flex;gap:8px;flex-wrap:wrap}
#sv-studio .pv-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--accent-soft);color:var(--accent-text)}
html[data-sv-theme] .sv-native-hidden{display:none !important}

/* v2.1 layout polish */
#sv-studio .sv-grid{align-items:start}
@media (min-width:1101px){#sv-studio .sv-grid>.sv-card:last-child{position:sticky;top:72px}}
#sv-studio .seg{justify-self:start;width:auto;max-width:100%;flex-wrap:wrap}

/* ===================== v3: Theme Studio options ===================== */
/* Sidebar styles */
html[data-sv-theme][data-sv-sidebar="solid"] aside .glass{background:var(--surface-solid) !important;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-sv-theme][data-sv-sidebar="tinted"] aside .glass{background:color-mix(in srgb,var(--accent) 7%,var(--surface-solid)) !important}
html[data-sv-theme][data-sv-sidebar="dark"] aside{--text:#eef2fb;--c-text:#eef2fb;--text-body:#c9d2e3;--muted:#98a4bb;--c-muted:#98a4bb;--faint:#6f7c95;--border:rgba(255,255,255,.08);--c-border:rgba(255,255,255,.08);--hover:rgba(255,255,255,.07);--surface-2:rgba(255,255,255,.05);--accent-soft:rgba(255,255,255,.1);--accent-text:#ffffff;--glass:#0b1428;--glass-strong:#0e1830;--glass-border:rgba(255,255,255,.06)}
html[data-sv-theme][data-sv-sidebar="dark"] aside .glass{background:linear-gradient(180deg,#0c1630,#0a1224) !important}
html[data-sv-theme][data-sv-sidebar="dark"] aside .nav-link{color:#b9c3d6}
html[data-sv-theme][data-sv-sidebar="dark"] aside .nav-link:hover{color:#fff}
html[data-sv-theme][data-sv-sidebar="dark"] aside .nav-link-active:before{background:var(--sv-hero-accent,#fff)}
/* Header styles */
html[data-sv-theme][data-sv-headerstyle="solid"] header.glass{background:var(--surface-solid) !important;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-sv-theme][data-sv-headerstyle="accent"] header.glass{box-shadow:inset 0 -2px 0 var(--accent),0 1px 0 var(--glass-border)}
/* Buttons */
html[data-sv-theme][data-sv-button="gradient"] .btn-primary{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 82%,#fff),var(--accent) 60%,color-mix(in srgb,var(--accent) 88%,#000)) !important;border-color:transparent !important}
html[data-sv-theme][data-sv-button="soft"] .btn-primary{background:var(--accent-soft) !important;color:var(--accent-text) !important;box-shadow:none !important;border-color:transparent !important}
html[data-sv-theme][data-sv-button="soft"] .btn-primary:hover{background:color-mix(in srgb,var(--accent) 16%,transparent) !important}
html[data-sv-theme][data-sv-button="pill"] .btn-primary,html[data-sv-theme][data-sv-button="pill"] .btn-secondary,html[data-sv-theme][data-sv-button="pill"] .btn-ghost{border-radius:999px !important}
/* Width */
html[data-sv-theme][data-sv-width="wide"] main > div{max-width:1480px !important}
html[data-sv-theme][data-sv-width="full"] main > div{max-width:none !important}
/* Background */
html[data-sv-theme][data-sv-bgstyle="mesh"] .shell:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:1;
  background:radial-gradient(900px 520px at 88% -8%,var(--accent-glow),transparent 60%),radial-gradient(700px 480px at 8% 12%,rgba(236,72,153,.08),transparent 60%),radial-gradient(900px 600px at 40% 110%,rgba(56,189,248,.12),transparent 60%),radial-gradient(600px 400px at 100% 70%,rgba(250,204,21,.07),transparent 60%)}
html[data-sv-theme][data-sv-bgstyle="grid"] .shell:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:1;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(1200px 700px at 70% 0%,#000,transparent 75%);mask-image:radial-gradient(1200px 700px at 70% 0%,#000,transparent 75%)}
/* Hover lift off */
html[data-sv-theme][data-sv-hover="off"] .list-card:hover,html[data-sv-theme][data-sv-hover="off"] .deck-tile:hover{transform:none}
/* Studio groups */
#sv-studio details.grp{border:1px solid var(--border);border-radius:calc(var(--radius-ctl) + 4px);background:var(--surface-solid);overflow:hidden;transition:box-shadow var(--dur) var(--sv-ios)}
#sv-studio details.grp[open]{box-shadow:var(--shadow-1)}
#sv-studio details.grp > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;user-select:none}
#sv-studio details.grp > summary::-webkit-details-marker{display:none}
#sv-studio details.grp > summary b{display:block;font:600 13.5px/1.3 var(--sv-font);color:var(--text)}
#sv-studio details.grp > summary small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
#sv-studio details.grp > summary .chev{width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform var(--dur) var(--spring);margin-right:4px}
#sv-studio details.grp[open] > summary .chev{transform:rotate(225deg)}
#sv-studio .grp-body{display:grid;gap:14px;padding:4px 14px 16px;animation:sv-fade-up var(--dur-slow) var(--spring) backwards}
#sv-studio .sub-h{font:600 12.5px var(--sv-font);color:var(--text);margin-top:4px}
#sv-studio .sub-h small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
#sv-studio .checks{font-size:11.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#sv-studio .cr{display:inline-flex;padding:2px 8px;border-radius:999px;font-weight:600;font-size:11px}
#sv-studio .cr.ok{background:var(--green-bg);color:var(--green)}#sv-studio .cr.mid{background:var(--amber-bg);color:var(--amber)}#sv-studio .cr.bad{background:var(--red-bg);color:var(--red)}
#sv-studio .io{display:flex;gap:8px;flex-wrap:wrap}#sv-studio .hint{font-size:11.5px;color:var(--muted);margin:0}
#sv-studio .pv-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
#sv-studio .pv-badges .b{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px}
#sv-studio .b.ok{background:var(--green-bg);color:var(--green)}#sv-studio .b.warn{background:var(--amber-bg);color:var(--amber)}#sv-studio .b.bad{background:var(--red-bg);color:var(--red)}#sv-studio .b.acc{background:var(--accent-soft);color:var(--accent-text)}
#sv-studio .pv-bars{display:flex;align-items:flex-end;gap:8px;height:120px}
#sv-studio .pv-bars i{flex:1;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 55%,transparent));transform-origin:bottom;animation:sv-bar .8s var(--spring) both}
#sv-studio .pv-bars i:nth-child(2){animation-delay:.05s}#sv-studio .pv-bars i:nth-child(3){animation-delay:.1s}#sv-studio .pv-bars i:nth-child(4){animation-delay:.15s}#sv-studio .pv-bars i:nth-child(5){animation-delay:.2s}#sv-studio .pv-bars i:nth-child(6){animation-delay:.25s}#sv-studio .pv-bars i:nth-child(7){animation-delay:.3s}
@keyframes sv-bar{from{transform:scaleY(.1);opacity:.3}to{transform:scaleY(1);opacity:1}}
@keyframes sv-fade-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ===================== v3: equal-height grids (Overview etc.) ===================== */
@media (min-width:1280px){
  html[data-sv-theme] main .grid.sv-eq{align-items:stretch !important}
  html[data-sv-theme] main .grid.sv-eq > section.card{display:flex;flex-direction:column}
  html[data-sv-theme] main .grid.sv-eq > section.card > :last-child{flex:1 1 auto}
  html[data-sv-theme] main .grid.sv-eq > section.card > .p-5{display:flex;flex-direction:column}
  html[data-sv-theme] main .grid.sv-eq > section.card > .p-5 > .relative.flex.items-end{flex:1 1 auto;min-height:210px}
  html[data-sv-theme] main .grid.sv-eq > div.flex.flex-col > section.card:last-child{flex:1 1 auto;display:flex;flex-direction:column}
  html[data-sv-theme] main .grid.sv-eq > div.flex.flex-col > section.card:last-child > ul,
  html[data-sv-theme] main .grid.sv-eq > div.flex.flex-col > section.card:last-child > :nth-child(2){flex:1 1 auto}
  html[data-sv-theme] main .grid.sv-eq > div:not([class*="flex"]){display:flex;flex-direction:column;gap:1rem}
  html[data-sv-theme] main .grid.sv-eq > div:not([class*="flex"]) > section.card:last-child{flex:1 1 auto}
}
@media (min-width:1280px){
  html[data-sv-theme] main .grid.xl\:grid-cols-3 > div.flex.flex-col > section.card:first-child{flex:1 1 auto;display:flex;flex-direction:column}
  html[data-sv-theme] main .grid.xl\:grid-cols-3 > div.flex.flex-col > section.card:first-child > :last-child{flex:1 1 auto}
  html[data-sv-theme] main .grid.xl\:grid-cols-3 > section.card{display:flex;flex-direction:column}
}

/* ===================== v4: mobile & overlay reliability ===================== */
html[data-sv-theme]{-webkit-tap-highlight-color:transparent}
html[data-sv-theme] body{overscroll-behavior-y:none}
/* bottom bar: safe area + hide while any overlay/sheet/drawer is open */
html[data-sv-theme] nav.fixed.bottom-0{padding-bottom:env(safe-area-inset-bottom);transition:transform .38s var(--sv-ios),opacity .25s var(--sv-ios)}
html[data-sv-theme] body:has([aria-modal="true"]) nav.fixed.bottom-0,
html[data-sv-theme] body:has(.fixed.inset-0.z-40) nav.fixed.bottom-0,
html[data-sv-theme] body:has(.sv-sheet-wrap) nav.fixed.bottom-0,
html[data-sv-theme] body:has(.sv-mfloat) nav.fixed.bottom-0{transform:translateY(115%);opacity:0;pointer-events:none}
html[data-sv-theme] body:has([aria-modal="true"]),html[data-sv-theme] body:has(.sv-sheet-wrap){overflow:hidden}
/* dialogs & sheets use the dynamic viewport so nothing hides behind browser bars */
html[data-sv-theme] .fixed.inset-0 .max-h-\[92vh\]{max-height:92dvh}
html[data-sv-theme] .fixed.inset-0 .max-h-\[88vh\]{max-height:88dvh}
html[data-sv-theme] .fixed.inset-0 .max-h-\[82vh\]{max-height:86dvh}
html[data-sv-theme] .fixed.inset-0 .card-solid.bottom-0,html[data-sv-theme] .fixed.inset-0 > .card-solid.rounded-b-none{padding-bottom:env(safe-area-inset-bottom)}
html[data-sv-theme] [role=menu].fixed{max-height:min(420px,calc(100dvh - 24px)) !important;overscroll-behavior:contain}
@media (max-width:1023px){
  /* leave room above the bottom bar */
  html[data-sv-theme] main{padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important}
}
@media (max-width:639px){
  /* header: keep only the essentials */
  html[data-sv-theme] header a[href="/system-health"],
  html[data-sv-theme] header button[aria-label="What's new"],
  html[data-sv-theme] header button[aria-label="Keyboard shortcuts"]{display:none !important}
  /* header dropdowns (notifications, quick actions, profile) become full-width floating sheets */
  html[data-sv-theme] header .glass-float.absolute.top-full{position:fixed !important;left:8px !important;right:8px !important;top:calc(var(--header-h) + 6px) !important;width:auto !important;min-width:0 !important;max-width:none !important;
    max-height:calc(100dvh - var(--header-h) - 20px);display:flex;flex-direction:column;transform-origin:top center !important;border-radius:20px}
  html[data-sv-theme] header .glass-float.absolute.top-full > *{max-width:100%}
  html[data-sv-theme] header .glass-float.absolute.top-full .overflow-y-auto,html[data-sv-theme] header .glass-float.absolute.top-full [class*="max-h-"]{max-height:calc(100dvh - var(--header-h) - 120px) !important}
  /* avoid iOS auto-zoom on focus */
  html[data-sv-theme] input:not([type=checkbox]):not([type=radio]),html[data-sv-theme] select,html[data-sv-theme] textarea{font-size:16px !important}
  /* page header actions wrap nicely */
  html[data-sv-theme] main h1{word-break:break-word}
  html[data-sv-theme] main .mb-6.flex.flex-col > .flex.flex-wrap{width:100%}
  /* wide tables scroll inside their card instead of stretching the page */
  html[data-sv-theme] main table{min-width:560px}
  html[data-sv-theme] main :is(.card,.card-solid,section):has(> table),html[data-sv-theme] main :is(.card,.card-solid,section) > div:has(> table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  html[data-sv-theme] #sv-tip{display:none !important}
}
@media (hover:none){html[data-sv-theme] #sv-tip{display:none !important}}
/* floating panels: readable, not see-through */
html[data-sv-theme] .glass-float{background:color-mix(in srgb,var(--surface-elevated,var(--surface-solid)) 96%,transparent) !important}
@media (max-width:639px){html[data-sv-theme] header .glass-float.absolute.top-full{background:var(--surface-elevated,var(--surface-solid)) !important;box-shadow:0 24px 60px rgba(15,23,42,.28),0 0 0 1px var(--border) !important}}
/* never let one wide element widen the whole page on phones */
@media (max-width:1023px){
  html[data-sv-theme] main{overflow-x:clip;max-width:100vw}
  html[data-sv-theme] main .grid > *,html[data-sv-theme] main .flex > .min-w-0{min-width:0}
  html[data-sv-theme] main .overflow-x-auto{max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  html[data-sv-theme] main .overflow-x-auto::-webkit-scrollbar{display:none}
  html[data-sv-theme] main svg{max-width:100%}
  html[data-sv-theme] main img{max-width:100%;height:auto}
}
@media (max-width:639px){
  /* filter rows: controls share the row evenly */
  html[data-sv-theme] main .card .flex.flex-wrap > select,html[data-sv-theme] main .card .flex.flex-wrap > .input{flex:1 1 150px;min-width:0}
  html[data-sv-theme] main .card .flex.flex-wrap > button{flex:0 0 auto}
}
/* ===================== v5: stable widths, wrapping card toolbars ===================== */
html[data-sv-theme] main .grid > *{min-width:0}
html[data-sv-theme] main section.card, html[data-sv-theme] main .card{min-width:0;max-width:100%}
/* card headers with tools on the right: wrap instead of pushing out */
html[data-sv-theme] main .divider.flex.justify-between{flex-wrap:wrap;row-gap:10px}
html[data-sv-theme] main .divider.flex.justify-between > .min-w-0{flex:1 1 180px}
html[data-sv-theme] main .divider.flex.justify-between > .shrink-0{flex-shrink:1;min-width:0;max-width:100%}
html[data-sv-theme] main .divider.flex.justify-between input.w-40{width:12rem;max-width:100%}
/* ActionMenu: framer already animates it — no extra CSS animation (it caused a flicker) */
html[data-sv-theme] [role=menu].fixed{animation:none !important}
@media (max-width:767px){
  html[data-sv-theme] main .divider.flex.justify-between > .shrink-0{flex:1 1 100%}
  html[data-sv-theme] main .divider.flex.justify-between > .shrink-0 > .flex{width:100%}
  html[data-sv-theme] main .divider.flex.justify-between .relative:has(> input){flex:1 1 100%}
  html[data-sv-theme] main .divider.flex.justify-between .relative > input.w-40{width:100%}
  html[data-sv-theme] main .divider.flex.justify-between select.w-auto{flex:1 1 140px}
}
/* text on accent backgrounds follows the theme's accent foreground (fixes invisible active tabs in light-accent themes) */
html[data-sv-theme] .nav-link.text-white,html[data-sv-theme] main [style*="--accent)"].text-white,html[data-sv-theme] main .text-white[style*="accent"]{color:var(--accent-fg,#fff) !important}
html[data-sv-theme] .nav-link.text-white svg{color:inherit}
/* segmented controls never break words */
html[data-sv-theme] .segmented{max-width:100%;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
html[data-sv-theme] .segmented::-webkit-scrollbar{display:none}
html[data-sv-theme] .segmented > *{white-space:nowrap;flex-shrink:0}
/* tables that scroll sideways show it: soft edge shadows + slim bar */
html[data-sv-theme] main .overflow-x-auto:has(> table){scrollbar-width:thin !important;
  background:linear-gradient(90deg,var(--surface-solid) 30%,transparent) left center / 28px 100% no-repeat local,
    linear-gradient(270deg,var(--surface-solid) 30%,transparent) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(15,23,42,.16),transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(15,23,42,.16),transparent) right center / 12px 100% no-repeat scroll}
html[data-sv-theme] main .overflow-x-auto:has(> table)::-webkit-scrollbar{display:block !important;height:4px}
html[data-sv-theme] main .overflow-x-auto:has(> table)::-webkit-scrollbar-thumb{background:var(--border-strong,var(--border));border-radius:4px}
html[data-sv-theme] main .overflow-x-auto:has(> table) th{white-space:nowrap}