:root{ --bg:#0b0f17; --card:#121a26; --muted:#8aa0b5; --text:#e8f0ff; --accent:#3da5ff; --ok:#2fbf71; --err:#ff5c5c;}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#070a10;color:var(--text)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:16px}
.topbar{background:var(--bg);border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;z-index:5}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-weight:700;letter-spacing:.2px}
.nav a{margin-left:14px;color:var(--text);opacity:.9}
.nav a:hover{opacity:1}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:16px;margin:12px 0}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.col-6{grid-column:span 6}
.col-12{grid-column:span 12}
@media (max-width:900px){.col-6{grid-column:span 12}}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.10);background:#0e1522;color:var(--text);cursor:pointer}
.btn.primary{background:rgba(61,165,255,.15);border-color:rgba(61,165,255,.35)}
.btn.danger{background:rgba(255,92,92,.15);border-color:rgba(255,92,92,.35)}
.btn:disabled{opacity:.5;cursor:not-allowed}
label{display:block;font-size:13px;color:var(--muted);margin:10px 0 6px}
input,select,textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.10);background:#0b1220;color:var(--text)}
textarea{min-height:90px}
.alert{padding:10px 12px;border-radius:10px;margin:12px 0;border:1px solid rgba(255,255,255,.08)}
.alert.ok{background:rgba(47,191,113,.10);border-color:rgba(47,191,113,.35)}
.alert.err{background:rgba(255,92,92,.10);border-color:rgba(255,92,92,.35)}
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th{color:var(--muted);text-align:left;font-weight:600;font-size:13px;padding:8px 10px}
.table td{background:#0b1220;border:1px solid rgba(255,255,255,.06);padding:10px;border-left:none;border-right:none}
.table tr td:first-child{border-left:1px solid rgba(255,255,255,.06);border-top-left-radius:12px;border-bottom-left-radius:12px}
.table tr td:last-child{border-right:1px solid rgba(255,255,255,.06);border-top-right-radius:12px;border-bottom-right-radius:12px}
.muted{color:var(--muted)}
.designer-wrap{display:flex;gap:12px;flex-wrap:wrap}
.designer-left{flex:1 1 760px}
.designer-right{flex:0 0 360px}
.page-canvas{position:relative;background:#0b1220;border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden}
.page-canvas img{display:block;width:100%;height:auto}
.field-box{position:absolute;min-width:90px;min-height:28px;padding:6px 8px;border-radius:10px;
  border:1px dashed rgba(61,165,255,.75);background:rgba(61,165,255,.10);cursor:move;user-select:none}
.field-box.selected{border-style:solid;box-shadow:0 0 0 2px rgba(61,165,255,.25) inset}
.field-key{font-size:12px;color:var(--text);font-weight:600}
.field-hint{font-size:11px;color:var(--muted)}
.pill{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid rgba(255,255,255,.12);color:var(--muted)}
.footer{border-top:1px solid rgba(255,255,255,.06);margin-top:24px}