:root{
  --accent:#39ff14;
  --radius:14px;
  --shadow:0 10px 25px rgba(0,0,0,.25);
}
html[data-theme="dark"]{
  --bg:#070a08; --card:#0d1411; --txt:#e9f5ee; --muted:#9bb3a6; --border:#163021;
}
html[data-theme="light"]{
  --bg:#f5f7f6; --card:#ffffff; --txt:#101413; --muted:#44564d; --border:#d7e2dc;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--txt)}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:20px}
.top{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:14px 16px;border:1px solid var(--border);background:var(--card);
  border-radius:var(--radius);box-shadow:var(--shadow)
}
.brand{font-weight:900}
.badge{color:var(--muted);font-size:13px}
.right{display:flex;gap:8px;align-items:center}

.grid{display:grid;grid-template-columns:280px 1fr;gap:16px;margin-top:16px}
@media(max-width:900px){.grid{grid-template-columns:1fr}}

.card{
  border:1px solid var(--border);background:var(--card);
  border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)
}
.narrow{max-width:520px;margin:16px auto 0}
.small{color:var(--muted);font-size:13px}

.btn{
  border:1px solid rgba(57,255,20,.35);
  background:rgba(57,255,20,.10);
  color:var(--txt);
  padding:10px 12px;border-radius:12px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
}
.btn:hover{background:rgba(57,255,20,.16)}
.btn2{border:1px solid var(--border);background:transparent}

input, textarea{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);
  background:transparent;color:var(--txt);outline:none;margin:6px 0 12px;
}
textarea{min-height:220px;resize:vertical}

.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 8px;border-bottom:1px solid color-mix(in oklab, var(--border), transparent 40%);font-size:14px}
.table th{color:var(--muted);text-align:left}

.msg{padding:10px 12px;border-radius:12px;border:1px solid rgba(57,255,20,.25);background:rgba(57,255,20,.08);margin:10px 0}
.err{border-color:rgba(255,80,80,.35);background:rgba(255,80,80,.08)}

.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.editor{
  border:1px solid var(--border);border-radius:12px;padding:10px;min-height:220px;
  background:transparent;outline:none;
}
body {
  overflow-y: auto;
}