:root{--bg:#f8fafc;--surface:#ffffff;--border:#e2e8f0;--text:#0f172a;--muted:#64748b;--primary:#2563eb;--primary-hover:#1d4ed8;--link:#1d4ed8;--success:#047857;--warn:#b45309;--error:#dc2626;--header-h:52px;--sidebar-w:250px}[data-theme=dark]{--bg:#0f172a;--surface:#1e293b;--border:#334155;--text:#f1f5f9;--muted:#94a3b8;--primary:#60a5fa;--primary-hover:#93c5fd;--link:#93c5fd;--success:#34d399;--warn:#fbbf24;--error:#f87171}*,::after,::before{box-sizing:border-box}html{color-scheme:light}html[data-theme=dark]{color-scheme:dark}body,html{margin:0;height:100%;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.app{display:flex;flex-direction:column;height:100dvh;overflow:hidden}.header{display:flex;align-items:center;gap:1rem;padding:.5rem .75rem;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}.header__brand{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.header__title{font-size:1rem;font-weight:700;margin:0;white-space:nowrap}.toolbar{display:flex;flex-wrap:wrap;gap:.35rem;flex:1;align-items:center}.btn{padding:.35rem .65rem;font-size:.8rem;font-weight:500;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s}.btn:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,var(--surface))}.btn--primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn--primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}.btn--ghost{background:0 0}.btn--icon{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .55rem}.btn--icon .btn__icon{display:inline-flex;width:16px;height:16px;flex-shrink:0}.btn--icon .btn__icon svg{width:16px;height:16px}.btn--icon .btn__label{font-size:.8rem}.btn--active{background:color-mix(in srgb,var(--primary) 15%,var(--surface));border-color:var(--primary);color:var(--primary)}.btn-icon{background:0 0;border:1px solid transparent;cursor:pointer;color:var(--muted);padding:.25rem .4rem;border-radius:6px;display:inline-flex}.btn-icon:hover{color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent)}.btn-icon svg{width:16px;height:16px;display:block}.btn-icon.btn--active{color:var(--primary);background:color-mix(in srgb,var(--primary) 15%,var(--surface));border-color:var(--primary)}.select{padding:.35rem .55rem;font-size:.8rem;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);cursor:pointer}.workspace{display:flex;flex:1;min-height:0;overflow:hidden}.main-col{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}.panels{display:grid;grid-template-columns:1fr 1fr;flex:1;min-width:0;min-height:0;gap:1px;background:var(--border)}.panel{display:flex;flex-direction:column;background:var(--surface);min-height:0;min-width:0}.panel__head{display:flex;align-items:center;justify-content:space-between;padding:.4rem .65rem;border-bottom:1px solid var(--border);flex-shrink:0;min-height:36px}.panel__head-actions{display:flex;align-items:center;gap:.35rem}.panel__label{font-size:.78rem;font-weight:600;color:var(--muted)}.panel__label--live{color:var(--success)}.device-toggle{display:inline-flex;gap:.15rem;border:1px solid var(--border);border-radius:6px;padding:1px}.editor{flex:1;min-height:0;width:100%}.preview-wrap{flex:1;min-height:0;overflow:auto;background:#e9edf2;display:flex;justify-content:center;padding:16px}[data-theme=dark] .preview-wrap{background:#0b1220}.preview-frame{border:0;background:#fff;width:100%;height:100%;box-shadow:0 2px 12px rgba(0,0,0,.12)}.preview-wrap[data-device=desktop] .preview-frame{width:100%;max-width:600px}.preview-wrap[data-device=tablet] .preview-frame{width:100%;max-width:768px}.preview-wrap[data-device=mobile] .preview-frame{width:100%;max-width:375px}.lint-panel{border-top:1px solid var(--border);background:var(--surface);max-height:40%;display:flex;flex-direction:column;flex-shrink:0}.lint-panel__head{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-bottom:1px solid var(--border)}.lint-panel__title{display:flex;align-items:baseline;gap:.6rem;font-size:.85rem}.lint-summary{color:var(--muted);font-size:.78rem}.lint-list{list-style:none;margin:0;padding:.5rem .75rem;overflow:auto}.lint-item{display:flex;gap:.5rem;align-items:flex-start;padding:.4rem 0;font-size:.82rem;line-height:1.45;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent)}.lint-badge{flex-shrink:0;font-size:.62rem;font-weight:700;padding:.1rem .4rem;border-radius:999px;letter-spacing:.03em}.lint-badge--error{background:color-mix(in srgb,var(--error) 18%,transparent);color:var(--error)}.lint-badge--warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}.lint-badge--info{background:color-mix(in srgb,var(--primary) 15%,transparent);color:var(--primary)}.lint-badge--ok{background:color-mix(in srgb,var(--success) 18%,transparent);color:var(--success)}.sidebar{width:var(--sidebar-w);flex-shrink:0;border-left:1px solid var(--border);background:var(--surface);overflow:auto}.sidebar__inner{padding:.75rem}.ad-slot{min-height:200px;margin-bottom:.75rem;border:1px dashed var(--border);border-radius:8px;overflow:hidden}.ad-placeholder{display:flex;align-items:center;justify-content:center;min-height:200px;padding:.75rem;text-align:center;font-size:.8rem;color:var(--muted)}.sidebar__note{margin:.5rem 0 0;font-size:.72rem;color:var(--muted);line-height:1.4}.footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .75rem;border-top:1px solid var(--border);background:var(--surface);font-size:.75rem;color:var(--muted);flex-shrink:0}.footer__links{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}.footer a{color:var(--link)}.toast{position:fixed;bottom:1.25rem;left:50%;transform:translateX(-50%) translateY(120%);z-index:200;padding:.6rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.15);transition:transform .25s ease;max-width:min(90vw,360px);text-align:center;font-size:.85rem}.toast--show{transform:translateX(-50%) translateY(0)}.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:300;padding:1rem;transform:translateY(100%);transition:transform .3s ease}.cookie-banner--show{transform:translateY(0)}.cookie-banner[hidden]{display:none}.cookie-banner__panel{max-width:960px;margin:0 auto;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;padding:1rem 1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 -4px 24px rgba(0,0,0,.12)}.cookie-banner__title{margin:0 0 .35rem;font-size:1rem}.cookie-banner__text{margin:0;font-size:.82rem;color:var(--muted);line-height:1.45}.cookie-banner__text a{color:var(--link)}.cookie-banner__actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-left:auto}.legal-page{max-width:720px;margin:0 auto;padding:2rem 1rem 3rem;line-height:1.6}.legal-page h1{margin-top:0}.legal-page a{color:var(--link)}@media (max-width:860px){.panels{grid-template-columns:1fr;grid-auto-rows:1fr}.sidebar{width:100%;border-left:none;border-top:1px solid var(--border)}.workspace{flex-direction:column;overflow:auto}.main-col{min-height:70vh}}