@import 'tailwindcss';

:root {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #17243b;
    background: #f5f8fc;
}

body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top left, #ffffff 0, #f5f8fc 42%, #eaf1f8 100%); }
* { box-sizing: border-box; }

.glass { background: rgba(255,255,255,.82); border: 1px solid rgba(148,163,184,.28); box-shadow: 0 20px 60px rgba(35,63,98,.12); backdrop-filter: blur(18px); }
.brand-gradient { background: linear-gradient(135deg, #38bdf8, #2563eb 52%, #7c3aed); }
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:.8rem; padding:.7rem 1rem; font-weight:700; color:white; background:linear-gradient(135deg,#0ea5e9,#2563eb); transition:.2s; }
.btn-primary:hover { transform:translateY(-1px); filter:brightness(1.08); }
.btn-muted { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:.8rem; padding:.7rem 1rem; font-weight:700; color:#30476a; background:#fff; border:1px solid #c9d7e8; box-shadow:0 4px 12px rgba(36,68,105,.06); }
.card { border-radius:1.15rem; background:rgba(255,255,255,.86); border:1px solid rgba(148,163,184,.28); box-shadow:0 18px 50px rgba(35,63,98,.1); }
.input { width:100%; border-radius:.75rem; border:1px solid #c9d7e8; background:#fff; color:#17243b; padding:.7rem .8rem; outline:none; }
.input:focus { border-color:#38bdf8; box-shadow:0 0 0 3px rgba(56,189,248,.12); }
.label { display:block; font-size:.78rem; font-weight:700; color:#5a7090; margin-bottom:.4rem; text-transform:uppercase; letter-spacing:.08em; }

.studio-shell { height: calc(100vh - 72px); min-height: 650px; display:grid; grid-template-columns: 230px minmax(0,1fr) 270px; background:#050b14; }
.studio-panel { background:#091424; border-color:rgba(148,163,184,.13); overflow:auto; }
.studio-canvas-wrap { position:relative; min-width:0; overflow:hidden; background:radial-gradient(circle at 50% 35%, #1d3554 0, #0b1524 44%, #050b14 100%); }
#studio-canvas { width:100%; height:100%; display:block; touch-action:none; }
.studio-toolbar-button { width:100%; display:flex; align-items:center; gap:.65rem; padding:.68rem .75rem; border-radius:.65rem; color:#b7c8db; font-size:.87rem; font-weight:650; border:1px solid transparent; transition:.15s; }
.studio-toolbar-button:hover, .studio-toolbar-button.active { color:white; background:#13233b; border-color:#27415f; }
.surface-chip { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.55rem .65rem; border-radius:.65rem; border:1px solid rgba(148,163,184,.14); background:#0e1b2e; font-size:.76rem; }
.surface-dot { width:.55rem; height:.55rem; border-radius:999px; background:#38bdf8; box-shadow:0 0 12px rgba(56,189,248,.8); }
.editor-toast { position:absolute; right:1rem; top:1rem; z-index:20; border-radius:.75rem; padding:.65rem .85rem; background:rgba(5,11,20,.86); border:1px solid rgba(148,163,184,.18); color:#dbeafe; font-size:.8rem; pointer-events:none; opacity:0; transform:translateY(-5px); transition:.2s; }
.editor-toast.show { opacity:1; transform:translateY(0); }
@media (max-width: 1050px) { .studio-shell { grid-template-columns: 190px minmax(0,1fr); } .studio-properties { display:none; } }