:root { color-scheme: dark; --ink:#f4f0e7; --muted:#96958f; --bg:#11110f; --panel:#1b1b18; --line:#34342f; --accent:#e4a85f; --danger:#ed8378; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 72% 0%,#29352e 0,#151713 33%,var(--bg) 66%); color:var(--ink); font:15px/1.5 Inter,ui-sans-serif,system-ui,sans-serif; }
.shell { max-width:1180px; margin:auto; padding:28px 32px 64px; }
.topbar,.studio-head,.actions,.tabs,.two-col,.metrics { display:flex; align-items:center; }
.topbar { justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:22px; }
.brand { letter-spacing:.22em; font-size:12px; font-weight:800; display:flex; gap:10px; align-items:center; }.brand-mark { display:grid; place-items:center; width:27px; height:27px; background:var(--accent); color:#17130e; border-radius:50%; font-family:Georgia,serif; font-size:18px; letter-spacing:0; }.muted,.lede,p,small { color:var(--muted); }.session { font-size:12px; }
.auth-grid { min-height:72vh; display:grid; grid-template-columns:1.15fr .85fr; gap:9vw; align-items:center; }.hero-copy { max-width:620px; }.eyebrow { color:var(--accent); font-size:11px; letter-spacing:.2em; font-weight:800; margin:0 0 14px; }.hero-copy h1 { font:clamp(48px,7vw,86px)/.97 Georgia,serif; letter-spacing:-.055em; margin:0 0 28px; }.hero-copy h1 em { color:var(--accent); font-style:italic; }.lede { max-width:390px; font-size:17px; }
.card { background:rgba(27,27,24,.9); border:1px solid var(--line); border-radius:16px; }.auth-card { padding:28px; max-width:400px; box-shadow:0 20px 70px #0005; }.tabs { gap:20px; border-bottom:1px solid var(--line); margin-bottom:24px; }.tab { color:var(--muted); border:0; background:transparent; padding:0 0 13px; cursor:pointer; font-weight:700; }.tab.active { color:var(--ink); border-bottom:2px solid var(--accent); }
label { display:block; color:#c0bdb5; font-size:12px; margin:15px 0; } input,textarea,select { width:100%; margin-top:7px; border:1px solid var(--line); border-radius:9px; padding:12px 13px; background:#121210; color:var(--ink); font:inherit; outline:none; } textarea { min-height:112px; resize:vertical; } input:focus,textarea:focus,select:focus { border-color:var(--accent); }.button { border:1px solid transparent; border-radius:8px; padding:11px 15px; cursor:pointer; font:700 12px inherit; }.primary { background:var(--accent); color:#1e170f; }.secondary { background:#2a302a; color:var(--ink); border-color:#465444; }.ghost { background:transparent; color:var(--muted); border-color:var(--line); }.hidden { display:none !important; }.error { color:var(--danger); min-height:22px; font-size:12px; }
.studio-head { justify-content:space-between; padding:62px 0 28px; }.studio-head h2 { font:46px/1 Georgia,serif; margin:0; letter-spacing:-.04em; }.metrics { gap:12px; margin-bottom:18px; }.metric { flex:1; padding:18px 20px; border:1px solid var(--line); border-radius:12px; background:#181815; }.metric span,.metric small { display:block; color:var(--muted); font-size:11px; }.metric strong { display:inline-block; font:28px Georgia,serif; margin:7px 4px 2px 0; }
.workspace-grid { display:grid; grid-template-columns:1.5fr .75fr; gap:18px; }.form-card,.admin-card { padding:24px; }.section-title { display:flex; gap:13px; align-items:flex-start; margin-bottom:18px; }.section-title h3,.admin-card h3 { margin:0; font-size:21px; }.section-title p { margin:3px 0; }.step { color:var(--accent); font:18px Georgia,serif; }.two-col { gap:14px; align-items:flex-start; }.two-col label { flex:1; }.actions { gap:10px; justify-content:flex-end; margin-top:8px; flex-wrap:wrap; }.estimate { margin-top:18px; padding:16px; border:1px solid #766040; border-radius:10px; background:#262017; }.estimate strong { display:block; color:var(--accent); font:29px Georgia,serif; }.admin-card { align-self:start; }.admin-card p { margin-bottom:30px; }.admin-cost { font:42px Georgia,serif; color:var(--accent); border-top:1px solid var(--line); padding-top:20px; margin-bottom:8px; }.result { margin-top:18px; padding:20px; }.result a { color:var(--accent); }
@media (max-width:760px) { .shell { padding:20px 16px 44px; }.auth-grid,.workspace-grid { grid-template-columns:1fr; gap:30px; }.auth-grid { padding-top:46px; }.hero-copy h1 { font-size:54px; }.metrics { display:grid; grid-template-columns:1fr 1fr; }.metric:last-child { grid-column:span 2; }.studio-head { padding-top:38px; }.two-col { display:block; } }