html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#0b0c10;color:#e8e8ea}a{color:inherit}.app{display:grid;grid-template-columns:420px 1fr;height:100vh}.panel{padding:16px;overflow:auto;border-right:1px solid rgba(255,255,255,.08);background:#0e1016}.panel h1{font-size:16px;margin:0 0 10px}.section{border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:12px;margin-bottom:12px;background:#ffffff08}.section h2{font-size:13px;margin:0 0 10px;color:#cfd1d8}.row{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:center;margin-bottom:10px}.row label{font-size:12px;color:#b9bac2}.input,.textarea{width:100%;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:#00000040;color:#fff;padding:8px 10px;font-size:13px;outline:none}.textarea{min-height:76px;resize:vertical}.btnRow{display:flex;gap:8px;flex-wrap:wrap}.btn{background:#1a1f2b;color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:8px 10px;cursor:pointer;font-size:12px}.btn.primary{background:#f13e4f;border-color:#f13e4f}.btn.danger{background:#2b1a1a;border-color:#ff787866}.small{font-size:12px;color:#a7a9b2}.right{display:grid;grid-template-rows:1fr 340px;height:100vh}.preview{background:#111318;border-bottom:1px solid rgba(255,255,255,.08)}.preview iframe{width:100%;height:100%;border:0;display:block;background:#fff}.output{display:grid;grid-template-rows:auto 1fr;padding:12px;gap:10px;background:#0e1016}.outputTop{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}.tabs{display:flex;gap:8px}.tab{background:transparent;color:#cfd1d8;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 10px;cursor:pointer;font-size:12px}.tab.active{background:#ffffff17;color:#fff}.code{width:100%;height:100%;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#00000040;color:#eaeaf0;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:12px;overflow:auto;white-space:pre}.cardHeader{display:flex;gap:8px;justify-content:space-between;align-items:center;margin-bottom:8px}.cardHeader strong{font-size:12px}.checkboxRow{display:flex;align-items:center;gap:8px}.checkboxRow input{width:16px;height:16px}@media (max-width: 1000px){.app{grid-template-columns:1fr;grid-template-rows:auto 1fr}.right{height:auto;grid-template-rows:60vh 340px}.panel{border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}}