/* ==========================================================================
MGV Motion Studio — shared design system
Source of truth: docs/superpowers/mockups/m5/{studio,account,home-shell}.html
Extracted verbatim (minus MOCKUP badges) — do not redesign here, only reuse.
Every page using this stylesheet must include these webfont tags
in (copied verbatim from the mockups):
(Cabinet Grotesk + General Sans via Fontshare, JetBrains Mono via Google Fonts.)
========================================================================== */
:root{
--bg:#0A0B0D; --bg-elev:#0F1115; --surface:#15181E; --surface-2:#1B1F27; --surface-3:#22262F;
--line:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.12);
--text:#ECEEF2; --text-dim:#9AA0AC; --text-faint:#646A76;
--accent:#7B61FF; --success:#46D6A0; --amber:#FFB661; --danger:#FF6B6B;
--spectral:linear-gradient(100deg,#B15CFF 0%,#6E6BFF 34%,#3BA0FF 66%,#35E0D8 100%);
--font-display:'Cabinet Grotesk',-apple-system,sans-serif;
--font-ui:'General Sans',-apple-system,sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,monospace;
--rail-w:236px; --ease:cubic-bezier(.22,.61,.36,1);
}
/* ============ base (verbatim from home-shell.html / account.html) ============ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;letter-spacing:-.01em;overflow:hidden}
::selection{background:rgba(123,97,255,.35)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:10px;border:3px solid var(--bg)}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select{font-family:inherit}
svg{flex:0 0 auto}
/* ============ RAIL (left nav shell) — verbatim from home-shell.html/account.html ============ */
.app{display:grid;grid-template-columns:var(--rail-w) 1fr;height:100vh}
.rail{background:var(--bg-elev);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px;gap:6px}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px}
.mark{width:26px;height:26px;border-radius:7px;position:relative;background:var(--spectral);background-size:220% 100%;animation:drift 9s var(--ease) infinite;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 16px -6px rgba(123,97,255,.6)}
.mark::before,.mark::after{content:"";position:absolute;inset:0;border-radius:7px;border:1.5px solid rgba(10,11,13,.9)}
.mark::before{transform:scale(.62);border-color:rgba(10,11,13,.85)}
.mark::after{transform:scale(.30)}
.wordmark{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.02em}
.wordmark small{display:block;font-family:var(--font-mono);font-weight:500;font-size:9px;letter-spacing:.18em;color:var(--text-faint);text-transform:uppercase;margin-top:-2px}
.nav-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);padding:14px 10px 6px}
.nav-item{
display:flex;align-items:center;gap:11px;
padding:9px 10px;border-radius:9px;
color:var(--text-dim);cursor:pointer;
font-weight:500;font-size:13.5px;
transition:background .16s var(--ease),color .16s var(--ease);
position:relative;
}
.nav-item svg{width:17px;height:17px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.7}
.nav-item:hover{background:var(--surface);color:var(--text)}
.nav-item.active{color:var(--text);background:var(--surface)}
.nav-item.active::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--spectral);background-size:100% 220%}
.nav-item .count{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--text-faint)}
.rail-spacer{flex:1}
/* plan meter (the "tier" card at the foot of the rail) */
.tier{
margin:8px 6px 10px;padding:12px;border-radius:12px;
background:linear-gradient(180deg,var(--surface),var(--bg-elev));
border:1px solid var(--line);
}
.tier .row{display:flex;align-items:center;justify-content:space-between}
.tier .plan{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.tier .used{font-size:11.5px;color:var(--text-faint)}
.tier .used b{color:var(--text-dim);font-weight:600}
.account{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:pointer;transition:background .16s;border:1px solid transparent}
.account:hover{background:var(--surface)}
.account.active{background:var(--surface);border-color:var(--line-strong)}
.avatar{width:30px;height:30px;border-radius:9px;background:conic-gradient(from 210deg,#6E6BFF,#35E0D8,#B15CFF,#6E6BFF);flex:0 0 auto;display:grid;place-items:center;font-weight:700;font-size:12px;color:#0A0B0D}
.account .who{line-height:1.25;min-width:0}
.account .who b{font-weight:600;font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account .who span{font-size:11.5px;color:var(--text-faint)}
/* ============ TOPBAR (main-column header) — verbatim from home-shell.html ============ */
.main{overflow-y:auto;position:relative}
.topbar{
position:sticky;top:0;z-index:5;
display:flex;align-items:center;gap:14px;
padding:18px 34px;
background:linear-gradient(180deg,rgba(10,11,13,.9),rgba(10,11,13,.55));
backdrop-filter:blur(12px);
border-bottom:1px solid var(--line);
}
.topbar h1{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.01em}
.topbar .crumb{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);letter-spacing:.04em}
.search{
margin-left:auto;display:flex;align-items:center;gap:9px;
background:var(--surface);border:1px solid var(--line);
border-radius:10px;padding:8px 12px;width:250px;color:var(--text-faint);
font-size:13px;cursor:text;transition:border-color .16s,width .2s var(--ease);
}
.search:hover{border-color:var(--line-strong)}
.search svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.search .k{margin-left:auto;font-family:var(--font-mono);font-size:10px;border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.content{padding:34px 34px 60px;max-width:1180px}
/* ============ PRIMITIVES ============ */
/* card — generic surface container (verbatim from account.html) */
.card{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:20px 22px}
/* meter — thin spectral progress bar (verbatim from home-shell.html .tier .meter,
de-scoped so it's reusable outside the plan-meter card) */
.meter{height:4px;border-radius:4px;background:var(--surface-3);margin:10px 0 7px;overflow:hidden}
.meter i{display:block;height:100%;width:38%;background:var(--spectral);background-size:200% 100%;border-radius:4px}
/* pill — small mono status pill (verbatim from studio.html) */
.pill{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--text-dim);background:var(--surface);border:1px solid var(--line);padding:4px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:6px}
.pill .d{width:6px;height:6px;border-radius:50%;background:var(--amber)}
/* chip — small mono outline chip (verbatim from home-shell.html .order-note .chip,
de-scoped so it's reusable outside the order-note context) */
.chip{font-family:var(--font-mono);font-size:11px;padding:2px 8px;border-radius:20px;border:1px solid var(--line);color:var(--text-dim)}
/* dot — plain spectral dot (verbatim from home-shell.html .tier .dot, de-scoped) */
.dot{width:7px;height:7px;border-radius:50%;background:var(--spectral)}
/* status / status-dot — labeled colored-dot state indicator (verbatim from home-shell.html) */
.status{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase}
.status .s{width:6px;height:6px;border-radius:50%}
.status.ready{color:var(--success)} .status.ready .s{background:var(--success)}
.status.draft{color:var(--text-faint)} .status.draft .s{background:var(--text-faint)}
.status.render{color:var(--accent)} .status.render .s{background:var(--accent);animation:pulse 1.6s infinite}
/* wave — small equalizer bars (verbatim from home-shell.html) */
.wave{display:flex;align-items:center;justify-content:center;gap:3px;height:22px;margin-top:14px}
.wave i{width:3px;border-radius:3px;background:linear-gradient(180deg,#6E6BFF,#35E0D8);opacity:.65;animation:eq 1.4s var(--ease) infinite}
/* ============ shared animations (verbatim from home-shell.html) ============ */
@keyframes drift{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(70,214,160,.5)}70%{box-shadow:0 0 0 7px rgba(70,214,160,0)}100%{box-shadow:0 0 0 0 rgba(70,214,160,0)}}
@keyframes eq{0%,100%{height:6px}50%{height:22px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}