:root{
  --bg:#0f172a; --panel:#111827; --panel-2:#0b1226; --text:#e5e7eb;
  --muted:#9ca3af; --accent:#60a5fa; --accent-2:#22c55e; --danger:#ef4444;
  --border:#1f2937; --chip:#1f2937; --link:#93c5fd;
}
/* High-contrast light mode */
:root.light{
  --bg:#f5f7fb; --panel:#ffffff; --panel-2:#fbfdff; --text:#0b1226;
  --muted:#334155; --accent:#2563eb; --accent-2:#16a34a; --danger:#dc2626;
  --border:#cbd5e1; --chip:#eef2ff; --link:#1d4ed8;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  background:linear-gradient(180deg,var(--bg),#0b1226 60%, #0a1022 100%);
  color:var(--text);
}

.container{max-width:1100px;margin:24px auto;padding:0 20px}
h1{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px}
.theme{
  border:1px solid var(--border); background:var(--panel); color:var(--text);
  border-radius:12px; padding:8px 12px; cursor:pointer;
}

.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.tab-btn{
  padding:10px 14px;border:1px solid var(--border);border-radius:10px;
  cursor:pointer;background:var(--panel);color:var(--text)
}
.tab-btn.active{outline:2px solid var(--accent);background:var(--panel-2)}

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

.grid{display:grid; gap:16px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:900px){.g2,.g3{grid-template-columns:1fr}}

label{
  display:block; font-size:14px; color:var(--muted);
  margin-bottom:6px;
}
input[type="text"], textarea{
  width:100%; padding:12px 14px; line-height:1.4; font-size:16px;
  border:1px solid var(--border); border-radius:12px;
  background:var(--panel-2); color:var(--text);
}
textarea{min-height:110px; resize:vertical}
:root.light input::placeholder, :root.light textarea::placeholder{color:#64748b}
:root.light input:disabled{background:#f1f5f9;color:#475569;border-color:#dbe3ee;opacity:1}

.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:10px}

.btn{
  border:1px solid var(--border); border-radius:12px; padding:10px 14px;
  background:var(--panel-2); color:var(--text); cursor:pointer;
}
.btn.primary{background:var(--accent); color:#fff; border-color:transparent; font-weight:600}
.btn.success{background:var(--accent-2); color:#fff; border-color:transparent; font-weight:600}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:999px;
  background:var(--chip); border:1px solid var(--border);
}

.result{
  margin-top:16px; background:var(--panel-2);
  border:1px dashed var(--border); border-radius:12px; padding:12px;
}
.muted{color:var(--muted)}
.ok{color:var(--accent-2)} .bad{color:var(--danger)}

.table-wrap{overflow:auto; margin-top:12px}
table{width:100%; min-width:760px; border-collapse:collapse}
th,td{border-bottom:1px solid var(--border); padding:10px 8px; text-align:left; white-space:nowrap}
th{color:var(--muted)}