/* Dark-first design system using CSS variables */
:root {
  --bg: #0b0f14;
  --panel: #0f1621;
  --panel2: #0c121b;
  --border: rgba(255,255,255,0.10);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.70);
  --faint: rgba(255,255,255,0.55);

  --accent: #8b5cf6;     /* violet */
  --accent2: #22c55e;    /* green */
  --danger: #ef4444;

  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  --radius: 16px;
  --radius2: 22px;

  --ring: 0 0 0 4px rgba(139,92,246,0.25);
}

html[data-theme="light"] {
  --bg: #f7f7fb;
  --panel: #ffffff;
  --panel2: #ffffff;
  --border: rgba(0,0,0,0.10);
  --text: rgba(0,0,0,0.88);
  --muted: rgba(0,0,0,0.62);
  --faint: rgba(0,0,0,0.48);

  --shadow: 0 10px 30px rgba(0,0,0,0.10);
  --ring: 0 0 0 4px rgba(139,92,246,0.18);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  background: radial-gradient(1200px 800px at 20% 0%, rgba(139,92,246,0.16), transparent 60%),
              radial-gradient(1000px 700px at 80% 0%, rgba(34,197,94,0.10), transparent 60%),
              var(--bg);
  color: var(--text);
}

a { color: inherit; text-decoration-color: rgba(139,92,246,0.6); }
a:hover { text-decoration-color: rgba(139,92,246,0.95); }

.container {
  max-width: 980px;
  margin: 40px auto;
  padding: 0 16px;
}

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

.brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.h1 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.02em;
}

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

.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 70%), var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: 16px;
}

.card + .card { margin-top: 14px; }

hr.sep {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.grid2 > * { min-width: 0; } /* overflow fix in CSS grids */

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

input, select, textarea, button {
  font: inherit;
  color: inherit;
}

input, select, textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel2);
  outline: none;
}

textarea { min-height: 80px; resize: vertical; }

input:focus, select:focus, textarea:focus {
  border-color: rgba(139,92,246,0.55);
  box-shadow: var(--ring);
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.btn {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;
  user-select: none;
}
.btn:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); }
.btn:focus { outline: none; box-shadow: var(--ring); }

.btn-primary {
  background: linear-gradient(180deg, rgba(139,92,246,0.95), rgba(139,92,246,0.78));
  border-color: rgba(139,92,246,0.55);
}
.btn-primary:hover { filter: brightness(1.05); }

.btn-danger {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.35);
}

.packs {
  display: grid;
  gap: 10px;
}

.item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  background: rgba(255,255,255,0.02);
}
.item:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.03); }

.kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  font-size: 12px;
  color: var(--muted);
}

.tablewrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; min-width: 800px; background: rgba(255,255,255,0.02); }
th, td { padding: 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { color: var(--muted); font-weight: 600; background: rgba(255,255,255,0.02); }

code {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 10px;
}