:root{--bg:#f4f7fb;--panel:#fff;--border:#d7deea;--text:#172033;--muted:#5c6a84;--accent:#0f6bff;--danger:#cb2d3e}*{box-sizing:border-box}body{color:var(--text);background:radial-gradient(circle at 12% 6%,#d7e9ff 0%,#f4f7fb 36% 100%);margin:0;font-family:IBM Plex Sans,Avenir Next,Segoe UI,system-ui,sans-serif}.page{min-height:100vh;padding:20px}.header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}h1{margin:0;font-size:22px}.subtitle{color:var(--muted);margin:4px 0 0;font-size:14px}.controls{gap:8px;display:flex}button{border:1px solid var(--border);color:var(--text);cursor:pointer;background:#fff;border-radius:10px;padding:8px 12px;font-weight:600}button:hover{border-color:#bdc9de}button.primary{border-color:var(--accent);background:var(--accent);color:#fff}.layout{grid-template-columns:minmax(380px,1fr) minmax(320px,1fr);gap:14px;display:grid}.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 14px 24px #16223a14}.panel-header{border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.06em;justify-content:space-between;align-items:center;padding:10px 12px;font-size:13px;font-weight:700;display:flex}#editor{height:68vh}#preview-root{background:linear-gradient(#fdfefe 0%,#f8fbff 100%);min-height:68vh;padding:14px}#status{border-top:1px solid var(--border);white-space:pre-wrap;padding:10px 12px;font-family:IBM Plex Mono,ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.status-ok{color:#146b2e}.status-error{color:var(--danger)}@media (width<=960px){.layout{grid-template-columns:1fr}#editor,#preview-root{height:46vh;min-height:46vh}.header{flex-direction:column;align-items:flex-start}}