:root{
  --bg:#0b0f14;
  --panel:#0f1620;
  --text:#e6edf3;
  --muted:#9aa4af;
  --border:#1f2a37;
  --link:#7cc0ff;
  --btn:#182230;
  --btnText:#e6edf3;
}

:root[data-theme="light"]{
  --bg:#ffffff;
  --panel:#f6f8fa;
  --text:#111827;
  --muted:#6b7280;
  --border:#d1d5db;
  --link:#0b66c3;
  --btn:#e5e7eb;
  --btnText:#111827;
}

html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

a{ color:var(--link); }
hr{ border:0; border-top:1px solid var(--border); }

.panel{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:12px;
  padding:14px;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

button, input, select{
  background:var(--btn);
  color:var(--btnText);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
}

input, select{ width:100%; box-sizing:border-box; }

.small{ color:var(--muted); font-size:12px; }
.err{ color:#ff6b6b; }

:root{
  --pagePad: 22px;
  --pageMax: 1600px;
}

.page{ padding: var(--pagePad); }
.center{ max-width: var(--pageMax); margin: 0 auto; }

.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.grow{ flex: 1 1 280px; min-width: 240px; }

textarea{
  background:var(--btn);
  color:var(--btnText);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  width:100%;
  box-sizing:border-box;
  min-height:140px;
}

table{
  width:100%;
  border-collapse: collapse;
  margin-top: 12px;
  overflow:hidden;
  border-radius:12px;
}
th, td{ border:1px solid var(--border); padding:10px; vertical-align: top; }
th{ text-align:left; background: rgba(255,255,255,0.03); color: var(--muted); font-weight:700; }
:root[data-theme="light"] th{ background: rgba(0,0,0,0.03); }