:root{
  --background:#0b0f14;
  --panel:#121925;
  --panel2:#0f1520;
  --text:#e8eef7;
  --muted:#a9b6c7;
  --border:#223046;
  --accent:#60a5fa;
  --good:#34d399;
  --bad:#fb7185;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  background:var(--background);
  color:var(--text);
}

.topbar{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, var(--panel), var(--panel2));
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
}

.brand{ font-weight:700; }
.tagline{ color:var(--muted); font-size:12px; }

.topbar-nav a{
  color:var(--text);
  text-decoration:none;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:10px;
}
.topbar-nav a:hover{ border-color:var(--border); background:#0d1320; }

.main-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:14px;
  padding:14px;
  max-width:1200px;
  margin:0 auto;
}

.content-panel, .debug-panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
}

.subheading{ color:var(--muted); }

.card{
  background:#0e1522;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  margin:12px 0;
}

.card.subtle{ background:#0c121d; }

.form-grid{
  display:grid;
  gap:10px;
  margin-top:12px;
}

label{ display:grid; gap:6px; color:var(--muted); }
input, select, textarea, button{
  padding:10px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#0b1220;
  color:var(--text);
}

button{
  cursor:pointer;
  background:#0b1b34;
  border-color:#1f3a60;
}
button:hover{ border-color:var(--accent); }

.checkbox-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.flash-area{ margin:12px 0; display:grid; gap:8px; }
.flash{
  border-radius:12px;
  padding:10px;
  border:1px solid var(--border);
}
.flash-success{ border-color: #1f4d3a; background:#0a1a12; color:var(--good); }
.flash-error{ border-color: #5a2530; background:#1a0a10; color:var(--bad); }

.debug-block{ margin:10px 0; }
.debug-label{ color:var(--muted); font-size:12px; margin-bottom:6px; }
pre{
  margin:0;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#070b12;
  overflow:auto;
  font-size:12px;
  line-height:1.35;
}

.big-value{ font-size:22px; font-weight:700; margin-top:6px; }

.footer{
  padding:12px 16px;
  color:var(--muted);
  border-top:1px solid var(--border);
  text-align:center;
}

@media (max-width: 980px){
  .main-grid{ grid-template-columns: 1fr; }
}