:root{
  --steel:#171b21;--steel2:#1f242c;--edge:#2b323c;--edge2:#3a434f;
  --ink:#cdd3da;--muted:#828d9a;--amber:#ffb347;--amber2:#e8a13a;--warn:#e0533b;--good:#4caf6a;
  --hdr:"Arial Narrow","Roboto Condensed",Impact,sans-serif;--mono:"Courier New",ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:#0b0d10;color:var(--ink);font-family:system-ui,Segoe UI,Roboto,sans-serif}
a{color:var(--amber2);text-decoration:none}a:hover{color:var(--amber)}
code{font-family:var(--mono);background:#0c0f13;border:1px solid var(--edge);padding:1px 5px;border-radius:3px;color:var(--amber2)}

.topbar{display:flex;justify-content:space-between;align-items:center;height:52px;padding:0 18px;
  background:linear-gradient(#20252d,#12161b);border-bottom:2px solid #05070a}
.brand{font-family:var(--hdr);letter-spacing:2px;text-transform:uppercase;color:var(--amber);font-size:20px}
.brand span{color:var(--muted);font-size:12px;letter-spacing:1px}
.topbar nav a{margin-left:18px;font-size:13px}

.wrap{max-width:900px;margin:0 auto;padding:22px 18px 60px}
h2{font-family:var(--hdr);letter-spacing:2px;text-transform:uppercase;color:var(--amber2);
  font-size:18px;margin:26px 0 8px;border-bottom:1px solid var(--edge);padding-bottom:6px}
.lead{color:var(--muted);font-size:13px;line-height:1.6;margin:0 0 12px}

.banner{background:#122019;border:1px solid #274; color:#bfe;padding:10px 14px;border-radius:6px;margin:10px 0}
.banner.warn{background:#241514;border-color:#63302a;color:#f0c3bd}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.tile{display:block;background:linear-gradient(#161a20,#101318);border:1px solid var(--edge);
  border-radius:8px;padding:14px;transition:.15s}
.tile:hover{border-color:var(--amber2);transform:translateY(-1px)}
.tile-h{font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:baseline}
.tile-h span{font-size:11px;color:var(--muted);font-weight:400}
.tile-d{color:var(--muted);font-size:12px;margin-top:6px}

.pw-form{display:flex;gap:8px;max-width:420px}
input[type=password],input[type=text]{flex:1;background:#0c0f13;border:1px solid var(--edge);color:var(--ink);
  padding:10px;border-radius:6px;font-size:14px}
button{background:linear-gradient(#243040,#1a2430);border:1px solid var(--edge2);color:var(--ink);
  padding:10px 18px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer}
button:hover{border-color:var(--amber2)}
button.ghost{background:#0e1116;padding:7px 12px;font-size:13px}

.toolbar{display:flex;align-items:center;gap:10px;margin:10px 0}
.valid{font-family:var(--mono);font-size:12px;margin-left:auto}
.valid.ok{color:var(--good)}.valid.bad{color:var(--warn)}
textarea{width:100%;height:60vh;background:#07090c;border:1px solid var(--edge);color:#d6e3c8;
  font-family:var(--mono);font-size:13px;line-height:1.5;padding:12px;border-radius:8px;resize:vertical}
.actions{margin-top:12px}

/* login */
.login-body{display:flex;align-items:center;justify-content:center;height:100vh}
.login-card{background:linear-gradient(#171c23,#0e1218);border:1px solid var(--edge2);border-radius:12px;
  padding:32px;width:340px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.login-card h1{font-family:var(--hdr);letter-spacing:3px;text-transform:uppercase;color:var(--amber);margin:0;font-size:30px}
.login-card .sub{color:var(--muted);margin:2px 0 20px;font-size:13px}
.login-card input{width:100%;margin-bottom:12px}
.login-card button{width:100%}
.login-card .hint{color:var(--muted);font-size:12px;margin-top:14px}
.login-card .err{background:#241514;border:1px solid #63302a;color:#f0c3bd;padding:8px;border-radius:6px;margin-bottom:12px;font-size:13px}

/* -------- Editor: tabbladen -------- */
.tabbar{display:flex;gap:4px;align-items:center;margin:14px 0 0;border-bottom:1px solid #2a2f38;flex-wrap:wrap}
.tab{background:none;border:none;border-bottom:2px solid transparent;color:#9aa4b2;padding:8px 14px;cursor:pointer;font-size:14px}
.tab.active{color:#e8c37a;border-bottom-color:#e8c37a}
.tabpane{padding:14px 0}
.tabpane.hidden{display:none}
.valid{margin-left:auto;font-size:12px}
.valid.ok{color:#7bbf6a}.valid.bad{color:#d9776b}

/* formulier-editor */
.f-listbar{display:flex;gap:6px;margin-bottom:12px}
.f-listbar select{flex:1;min-width:0}
.f-row{display:grid;grid-template-columns:190px 1fr;gap:10px;align-items:center;padding:4px 0}
.f-label{color:#9aa4b2;font-size:13px}
.f-input{background:#0e1116;border:1px solid #2a2f38;color:#e6e9ee;padding:6px 8px;border-radius:6px;width:100%}
.f-sub{border:1px solid #2a2f38;border-radius:8px;padding:8px 10px;margin:8px 0;background:#0c0f14}
.f-sub-h{color:#e8c37a;font-size:12px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}

/* vorm-editor */
.shape-wrap{display:grid;grid-template-columns:240px 1fr;gap:16px}
.shape-side label{display:block;color:#9aa4b2;font-size:12px;margin:10px 0 4px}
.shape-side .hint,.hint{color:#6b7280;font-size:11px;font-weight:normal}
.shape-side select,.shape-side input[type=color]{width:100%}
.shape-itembtns,.shape-tools{display:flex;gap:5px;flex-wrap:wrap}
.shape-parts{list-style:none;margin:6px 0;padding:0;max-height:150px;overflow:auto;border:1px solid #2a2f38;border-radius:6px}
.shape-part{display:flex;align-items:center;gap:6px;padding:5px 8px;cursor:pointer;font-size:13px;border-bottom:1px solid #1b2028}
.shape-part.sel{background:#1a2028;color:#e8c37a}
.shape-part .sw{width:14px;height:14px;border-radius:3px;border:1px solid #2a2f38;display:inline-block}
.shape-canvas-wrap{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
#shapeCanvas{border:1px solid #2a2f38;border-radius:8px;cursor:crosshair;touch-action:none}
.ghost.danger{color:#d9776b;border-color:#5a2a2a}

/* Bewoner-uiterlijk preview */
.look-preview{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}
.look-card{background:#0e1116;border:1px solid #2b323c;border-radius:8px;padding:8px;text-align:center}
.look-card canvas{background:#f3efe3;border-radius:6px;display:block}
.look-label{margin-top:6px;font-size:12px;color:#cdd3da}