:root { --ink:#e8efed; --muted:#85928f; --line:#2a3432; --panel:#111817; --panel-2:#17201e; --deep:#0b100f; --accent:#a7d43b; --danger:#ff776d; --font-geist-mono:ui-monospace; }
* { box-sizing: border-box; }
[hidden] { display:none!important; }
html, body { width:100%; min-width:320px; height:100%; margin:0; overflow:hidden; }
body { background:var(--deep); color:var(--ink); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
button, input, textarea { font:inherit; }
button { color:inherit; }
.app-shell { display:grid; grid-template-rows:70px minmax(0,1fr); width:100vw; height:100dvh; background:var(--deep); }
.topbar { z-index:10; display:flex; align-items:center; justify-content:space-between; padding:0 22px; border-bottom:1px solid var(--line); background:#101615; box-shadow:0 8px 28px rgb(0 0 0 / 18%); }
.brand-block { display:flex; align-items:center; gap:12px; }
.brand-mark { position:relative; display:grid; width:40px; height:40px; place-items:center; border:1px solid #769520; border-radius:12px; color:#b7dc54; background:linear-gradient(145deg,#28351c,#172019); box-shadow:inset 0 1px rgb(255 255 255 / 7%); }
.brand-mark::after { content:'°'; position:absolute; top:7px; right:5px; font-size:11px; }
.brand-mark span { font-size:12px; font-weight:800; letter-spacing:-.6px; }
.brand-block h1 { margin:0; font-size:15px; line-height:1.2; font-weight:700; letter-spacing:-.01em; }
.brand-block p { margin:3px 0 0; color:var(--muted); font-size:10px; letter-spacing:.05em; }
.topbar-actions { display:flex; align-items:center; gap:18px; }
.auto-toggle { display:flex; align-items:center; gap:9px; color:#a7b0ae; font-size:12px; cursor:pointer; user-select:none; }
.auto-toggle input { position:absolute; opacity:0; pointer-events:none; }
.toggle-track { position:relative; width:31px; height:18px; border-radius:99px; background:#35403e; transition:.2s ease; }
.toggle-track span { position:absolute; top:3px; left:3px; width:12px; height:12px; border-radius:50%; background:#9ca6a4; transition:.2s ease; }
.auto-toggle input:checked + .toggle-track { background:#6f8e20; }
.auto-toggle input:checked + .toggle-track span { left:16px; background:#e8ffae; }
.auto-toggle input:focus-visible + .toggle-track { outline:2px solid #c2e861; outline-offset:2px; }
.run-button { display:inline-flex; height:38px; align-items:center; gap:9px; padding:0 10px 0 15px; border:1px solid #a6d23c; border-radius:9px; color:#10150c; background:var(--accent); box-shadow:inset 0 1px rgb(255 255 255 / 25%),0 5px 18px rgb(121 161 27 / 14%); font-size:12px; font-weight:700; cursor:pointer; }
.run-button:hover { background:#b4df4b; }
.run-button:active { transform:translateY(1px); }
.run-button > span { font-size:9px; }
.run-button kbd { padding:3px 6px; border:1px solid rgb(19 28 10 / 20%); border-radius:5px; color:#36451a; background:rgb(255 255 255 / 20%); font-size:9px; font-weight:500; }
.workspace { display:grid; grid-template-columns:minmax(360px,.92fr) minmax(460px,1.3fr); min-height:0; }
.editor-panel,.preview-panel { min-width:0; min-height:0; }
.editor-panel { position:relative; display:grid; grid-template-rows:48px minmax(0,1fr) 32px; border-right:1px solid var(--line); background:var(--panel); }
.preview-panel { display:grid; grid-template-rows:48px minmax(0,1fr) auto; background:#0c1211; }
.panel-toolbar { display:flex; min-width:0; align-items:center; border-bottom:1px solid var(--line); background:var(--panel-2); }
.editor-toolbar { justify-content:space-between; padding-right:12px; }
.file-tabs { display:flex; align-self:stretch; min-width:0; overflow:hidden; }
.file-tabs button { display:flex; min-width:0; align-items:center; gap:7px; padding:0 14px; border:0; border-right:1px solid var(--line); color:#7f8c89; background:transparent; font-size:11px; cursor:pointer; }
.file-tabs button.active { color:#dce6e3; background:#111817; box-shadow:inset 0 -2px var(--accent); }
.js-badge { display:grid; width:18px; height:18px; place-items:center; border-radius:4px; color:#182008; background:#a8cf49; font-size:8px; font-weight:900; }
.paste-badge { display:grid; width:18px; height:18px; place-items:center; border:1px solid #53615d; border-radius:4px; color:#afbbb8; font-size:12px; }
.file-tabs button.paste-tab.active .paste-badge { border-color:#a8cf49; color:#c8ed6d; }
.open-file-button { flex:none; padding:7px 9px; border:1px solid #35413e; border-radius:7px; color:#aab5b2; background:#1c2624; font-size:10px; cursor:pointer; }
.open-file-button:hover { border-color:#55635f; color:#fff; }
.open-file-button input { display:none; }
.editor-wrap { position:relative; display:grid; grid-template-columns:48px minmax(0,1fr); min-height:0; overflow:hidden; }
.line-gutter { padding:14px 9px 80px 0; overflow:hidden; border-right:1px solid #202927; color:#485450; background:#0f1514; font:11px/1.65 var(--font-geist-mono),ui-monospace,monospace; text-align:right; user-select:none; }
.line-gutter span { display:block; }
.editor-wrap textarea { width:100%; height:100%; resize:none; padding:14px 18px 80px; border:0; outline:0; color:#cfd9d6; background:#111817; caret-color:var(--accent); font:11px/1.65 var(--font-geist-mono),ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; tab-size:4; white-space:pre; }
.editor-wrap textarea::selection { color:white; background:rgb(139 178 45 / 38%); }
.editor-wrap textarea::placeholder { color:#4f5c58; }
.drop-cover { position:absolute; inset:12px; display:grid; place-items:center; border:1px dashed #a8d23f; border-radius:10px; color:#dff69f; background:rgb(18 28 21 / 94%); font-size:13px; }
.editor-footer { display:flex; align-items:center; gap:14px; padding:0 11px; border-top:1px solid #222c2a; color:#64716e; background:#0e1413; font-size:9px; }
.editor-footer .footer-spacer { flex:1; }
.editor-footer button { padding:0; border:0; color:#87938f; background:transparent; font-size:9px; cursor:pointer; }
.editor-footer button:hover { color:#dbe5e2; }
.preview-toolbar { gap:13px; padding:0 12px 0 16px; }
.preview-title { display:flex; align-items:center; gap:8px; margin-right:auto; font-size:11px; }
.preview-title strong { font-weight:650; }
.status-light { width:7px; height:7px; border-radius:50%; background:#d6a53e; box-shadow:0 0 8px currentColor; }
.status-light.ready { color:#9ed237; background:currentColor; }
.status-light.error { color:var(--danger); background:currentColor; }
.status-light.running { color:#e7b747; animation:pulse 1s infinite; }
.status-label { color:#687572; font-size:9px; }
.format-chip { padding:3px 6px; border:1px solid #536433; border-radius:99px; color:#b7d966; background:#202b1b; font:8px var(--font-geist-mono),monospace; white-space:nowrap; }
.device-switcher { display:flex; height:30px; align-items:stretch; padding:2px; border:1px solid #303b38; border-radius:8px; background:#111817; }
.device-switcher button { display:flex; align-items:center; gap:6px; padding:0 9px; border:0; border-radius:5px; color:#697673; background:transparent; font-size:9px; cursor:pointer; }
.device-switcher button.active { color:#dce6e3; background:#283330; box-shadow:0 1px 4px rgb(0 0 0 / 24%); }
.device-icon { display:inline-block; width:13px; height:9px; border:1px solid currentColor; border-radius:2px; }
.device-icon.tablet { width:8px; height:11px; }
.device-icon.mobile { width:6px; height:11px; border-radius:2px; }
.dimensions { color:#596663; font:9px var(--font-geist-mono),monospace; white-space:nowrap; }
.refresh-button { width:28px; height:28px; border:1px solid #303b38; border-radius:7px; color:#87938f; background:#17201e; cursor:pointer; }
.refresh-button:hover { color:#fff; border-color:#4b5a56; }
.preview-area { position:relative; display:grid; min-height:0; place-items:center; overflow:hidden; padding:20px; background:#0c1211; }
.stage-pattern { position:absolute; inset:0; opacity:.35; background-image:linear-gradient(#26302e 1px,transparent 1px),linear-gradient(90deg,#26302e 1px,transparent 1px); background-size:22px 22px; mask-image:linear-gradient(to bottom,transparent,black 15%,black 85%,transparent); }
.device-frame { position:relative; z-index:1; overflow:hidden; border:1px solid #4a5653; border-radius:4px; background:#15201f; box-shadow:0 20px 65px rgb(0 0 0 / 46%),0 0 0 6px rgb(255 255 255 / 2%); }
.device-frame iframe { position:absolute; top:0; left:0; display:block; border:0; transform-origin:top left; background:#15201f; }
.scale-chip { position:absolute; right:14px; bottom:12px; z-index:2; padding:4px 7px; border:1px solid #2d3936; border-radius:5px; color:#65726f; background:rgb(15 22 20 / 78%); font:9px var(--font-geist-mono),monospace; backdrop-filter:blur(5px); }
.console-panel { z-index:3; border-top:1px solid var(--line); background:#101716; }
.console-heading { display:flex; width:100%; height:34px; align-items:center; gap:9px; padding:0 13px; border:0; color:#8b9895; background:transparent; font-size:10px; text-align:left; cursor:pointer; }
.console-heading > span:first-child { color:#c2ccca; font-weight:650; }
.console-count { display:grid; min-width:17px; height:17px; place-items:center; border-radius:99px; color:#172006; background:#96be37; font-size:8px; }
.console-summary { flex:1; min-width:0; overflow:hidden; color:#586562; font:9px var(--font-geist-mono),monospace; text-overflow:ellipsis; white-space:nowrap; }
.console-body { position:relative; max-height:150px; min-height:72px; padding:7px 12px 30px; overflow:auto; border-top:1px solid #212a28; background:#0b1110; font:10px/1.5 var(--font-geist-mono),monospace; }
.console-body p { display:flex; gap:10px; margin:0; padding:4px 0; border-bottom:1px solid #171f1d; color:#aeb8b5; white-space:pre-wrap; }
.console-body p span { width:35px; flex:none; color:#60706c; text-transform:uppercase; }
.console-body p.error { color:#ff9189; }
.console-body p.warn { color:#e8c96d; }
.console-empty { border:0!important; color:#52605c!important; }
.clear-console { position:absolute; right:10px; bottom:7px; border:0; color:#697572; background:transparent; font-size:9px; cursor:pointer; }
@keyframes pulse { 50% { opacity:.4; } }
@media (max-width:860px) {
  html,body { overflow:auto; }
  .app-shell { height:auto; min-height:100dvh; grid-template-rows:64px auto; }
  .workspace { grid-template-columns:1fr; }
  .editor-panel { height:48dvh; min-height:380px; border-right:0; border-bottom:1px solid var(--line); }
  .preview-panel { height:70dvh; min-height:500px; }
  .device-switcher button span:last-child { display:none; }
  .brand-block p,.auto-toggle { display:none; }
}
@media (max-width:520px) {
  .topbar { padding:0 12px; }
  .run-button kbd { display:none; }
  .run-button { padding-right:13px; }
  .file-tabs button { padding:0 9px; }
  .preview-toolbar { gap:8px; padding-left:10px; }
  .status-label,.dimensions { display:none; }
}