:root{color-scheme:light;--bg:#f8fafc;--panel:#ffffff;--panel-strong:#eef2f7;--text:#162033;--muted:#64748b;--border:#d9e1ec;--brand:#2563eb;--brand-strong:#1d4ed8;--ok:#059669;--shadow:0 18px 60px rgba(15,23,42,0.12)}@media (prefers-color-scheme:dark){:root{color-scheme:dark;--bg:#0b0f17;--panel:#111827;--panel-strong:#172033;--text:#e5edf7;--muted:#93a4ba;--border:#283449;--brand:#5eead4;--brand-strong:#2dd4bf;--ok:#34d399;--shadow:0 22px 80px rgba(0,0,0,0.4)}}*{box-sizing:border-box}body,html{min-height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}.workspace{display:grid;grid-template-rows:auto auto 1fr auto;min-height:100vh}.topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-gap:1rem;gap:1rem;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--panel) 92%,transparent);padding:.8rem 1rem}.brand,.topbar{align-items:center}.brand{display:flex;min-width:0;gap:.75rem}.brand-mark{display:grid;width:2.35rem;height:2.35rem;place-items:center;border:1px solid var(--border);border-radius:8px;background:var(--panel-strong);color:var(--brand);font-weight:800}.brand-title{margin:0;font-size:1rem;line-height:1.15}.brand-url{margin:.12rem 0 0;color:var(--muted);font-size:.8rem}.actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.55rem}.button{display:inline-flex;min-height:2.25rem;align-items:center;gap:.45rem;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--text);padding:.45rem .7rem}.button.primary{border-color:transparent;background:var(--brand);color:#04111f;font-weight:700}.button:disabled{cursor:not-allowed;opacity:.6}.status{max-width:18rem;align-self:center;color:var(--muted);font-size:.82rem;text-align:right}.pen-meta{display:grid;grid-template-columns:minmax(16rem,26rem) minmax(16rem,1fr);grid-gap:.9rem;gap:.9rem;border-bottom:1px solid var(--border);background:var(--panel);padding:.85rem 1rem}.meta-field{display:grid;grid-gap:.35rem;gap:.35rem}.meta-field span{color:var(--muted);font-size:.8rem;font-weight:700}.meta-field input,.saved-title-input{min-height:2.5rem;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);padding:.55rem .7rem}a{color:inherit}.canvas{display:grid;grid-template-columns:minmax(20rem,46%) minmax(0,1fr);grid-gap:1px;gap:1px;min-height:0;background:var(--border)}.editors,.preview{min-width:0;min-height:0;background:var(--bg)}.editors{display:grid;grid-template-rows:repeat(3,minmax(12rem,1fr));grid-gap:1px;gap:1px;background:var(--border)}.editor-pane{display:grid;grid-template-rows:auto 1fr;min-height:0;background:var(--panel)}.pane-header,.preview-header{display:flex;min-height:2.35rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:.45rem .7rem}.pane-title,.preview-title{display:inline-flex;align-items:center;gap:.45rem;margin:0;color:var(--muted);font-size:.78rem;font-weight:800;letter-spacing:0;text-transform:uppercase}.editor-shell{min-height:0}.preview{display:grid;grid-template-rows:auto 1fr}.preview-frame{width:100%;height:100%;min-height:0;border:0;background:#ffffff}.pill{border-radius:999px;border:1px solid var(--border);color:var(--muted);padding:.2rem .5rem;font-size:.75rem}.catalog-strip{display:grid;grid-template-columns:minmax(12rem,18rem) minmax(0,1fr);grid-gap:1rem;gap:1rem;align-items:center;border-top:1px solid var(--border);background:var(--panel);padding:.75rem 1rem}.auth-panel h1,.catalog-strip h2,.page-header h1,.surface h2{margin:0}.catalog-kicker{margin:0 0 .25rem;color:var(--brand);font-size:.78rem;font-weight:800;text-transform:uppercase}.button-row,.catalog-list{display:flex;flex-wrap:wrap;gap:.6rem}.catalog-item,.saved-row{display:inline-flex;min-width:10rem;align-items:center;justify-content:space-between;gap:.7rem;border:1px solid var(--border);border-radius:8px;background:var(--panel-strong);color:var(--text);padding:.55rem .7rem;text-align:left;text-decoration:none}.catalog-item small,.inline-status,.muted,.saved-row small{color:var(--muted)}.auth-page,.dashboard-page{min-height:100vh;background:var(--bg);padding:clamp(1rem,4vw,2.5rem)}.auth-page{display:grid;place-items:center}.auth-panel,.surface{border:1px solid var(--border);border-radius:8px;background:var(--panel);box-shadow:var(--shadow);padding:clamp(1rem,3vw,1.5rem)}.auth-panel{width:min(30rem,100%)}.auth-form{display:grid;grid-gap:.9rem;gap:.9rem;margin:1.25rem 0}.auth-form label{display:grid;grid-gap:.35rem;gap:.35rem;color:var(--muted);font-size:.9rem;font-weight:700}.auth-form input{min-height:2.55rem;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);padding:.55rem .7rem}.form-error{margin:0;color:#dc2626}.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}.dashboard-grid{display:grid;grid-template-columns:minmax(18rem,.85fr) minmax(0,1.15fr);grid-gap:1rem;gap:1rem}.admin-table,.saved-list{display:grid;grid-gap:.55rem;gap:.55rem;margin-top:1rem}.saved-card{display:grid;grid-gap:.65rem;gap:.65rem;border:1px solid var(--border);border-radius:8px;background:var(--panel-strong);padding:.75rem}.saved-card-actions,.saved-card-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.saved-title-input{flex:1 1;min-width:0}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:1rem;gap:1rem;margin-bottom:1rem}.metric{display:grid;grid-gap:.35rem;gap:.35rem}.metric span{color:var(--muted)}.metric strong{font-size:2rem}.admin-row{display:grid;grid-template-columns:minmax(12rem,1.5fr) repeat(4,minmax(6rem,1fr));grid-gap:.75rem;gap:.75rem;align-items:center;border-bottom:1px solid var(--border);padding:.65rem 0}.admin-head{color:var(--muted);font-size:.8rem;font-weight:800;text-transform:uppercase}@media (max-width:980px){.topbar{grid-template-columns:1fr}.actions{justify-content:flex-start}.canvas{grid-template-rows:minmax(42rem,1fr) minmax(24rem,40vh)}.canvas,.catalog-strip,.dashboard-grid,.page-header,.pen-meta{grid-template-columns:1fr}.catalog-strip,.page-header{display:grid}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-row{grid-template-columns:1fr}}@media (max-width:620px){.topbar{padding:.7rem}.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.saved-card-actions,.saved-card-row{align-items:stretch;flex-direction:column}.button{justify-content:center;padding-inline:.55rem}.status{grid-column:1/-1;min-width:0;text-align:left}}