:root {
  --bg:#f6f7f9; --card:#fff; --ink:#1b1f24; --muted:#6b7280; --line:#e3e6ea;
  --accent:#0b5cad; --ok:#1a7f4b; --warn:#8a6100; --err:#a8231d;
  --warn-bg:#fff8e6; --ok-bg:#eaf6ef; --err-bg:#fdeceb;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#14171a; --card:#1c2024; --ink:#e8eaed; --muted:#9aa3ad; --line:#2b3137;
    --accent:#5aa9f0; --ok:#5fce97; --warn:#e0b355; --err:#f08b85;
    --warn-bg:#2a2415; --ok-bg:#152a1f; --err-bg:#2c1a19;
  }
}
* { box-sizing:border-box }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
main { max-width:1000px; margin:0 auto; padding:24px 16px 48px }
h1 { font-size:22px; margin:0 0 18px }
h2 { font-size:16px; margin:0 0 12px; display:flex; align-items:center; gap:8px }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em }

/* --- viršus --- */
.top {
  display:flex; align-items:center; gap:20px; padding:12px 16px;
  background:var(--card); border-bottom:1px solid var(--line);
}
.brand { font-weight:700; text-decoration:none; color:var(--ink); letter-spacing:.02em }
.brand span { color:var(--accent) }
.top nav { display:flex; gap:16px; flex:1 }
.top nav a { color:var(--ink); text-decoration:none; padding:4px 0 }
.top nav a:hover { color:var(--accent) }
.top nav a.soon { color:var(--muted); cursor:default }
.out { display:flex; align-items:center; gap:10px; margin:0 }
.who { color:var(--muted); font-size:13px }

/* --- kortelės --- */
.card {
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:18px; margin-bottom:16px;
}
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px }
.tag {
  font-size:11px; font-weight:600; color:var(--muted);
  border:1px solid var(--line); border-radius:20px; padding:2px 8px;
}
.soon-note { color:var(--muted); font-style:italic; margin:8px 0 0 }
.muted { color:var(--muted) }
.hint { color:var(--muted); font-size:13px; margin:12px 0 0 }

/* --- prisijungimas --- */
.login { max-width:420px; margin:48px auto }
.login h1 { text-align:center }
.big { width:100%; padding:12px; font-size:15px }
.sep { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--muted); font-size:13px }
.sep::before, .sep::after { content:""; flex:1; height:1px; background:var(--line) }
.magic { display:flex; flex-direction:column; gap:8px }
.magic label { font-size:13px; color:var(--muted) }

/* --- formos --- */
input, select {
  padding:9px 10px; border:1px solid var(--line); border-radius:7px;
  background:var(--bg); color:var(--ink); font:inherit;
}
input:focus, select:focus { outline:2px solid var(--accent); outline-offset:-1px }
button {
  padding:9px 14px; border:1px solid var(--line); border-radius:7px;
  background:var(--bg); color:var(--ink); font:inherit; cursor:pointer;
}
button:hover:not(:disabled) { border-color:var(--accent) }
button:disabled { opacity:.5; cursor:default }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff }
button.link { background:none; border:none; color:var(--accent); padding:0; text-decoration:underline }
button.link.danger { color:var(--err) }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.row input { flex:1; min-width:160px }
.addkey { margin-top:16px }
.addkey label { display:block; font-size:13px; color:var(--muted); margin-bottom:6px }
.addkey input { flex:1 }
.rename { display:flex; gap:6px; align-items:center }
.rename input { padding:5px 8px; font-size:14px; max-width:220px }
form { margin:0 }

/* --- pranešimai --- */
.msg { padding:10px 12px; border-radius:8px; margin:0 0 14px; font-size:14px }
.msg.ok   { background:var(--ok-bg);   color:var(--ok);   border:1px solid currentColor }
.msg.warn { background:var(--warn-bg); color:var(--warn); border:1px solid currentColor }
.msg.err  { background:var(--err-bg);  color:var(--err);  border:1px solid currentColor }

/* --- lentelės --- */
table { width:100%; border-collapse:collapse; font-size:14px }
th { text-align:left; font-weight:600; color:var(--muted); font-size:12px;
     text-transform:uppercase; letter-spacing:.04em; padding:6px 8px;
     border-bottom:1px solid var(--line) }
td { padding:8px; border-bottom:1px solid var(--line); vertical-align:middle }
tr:last-child td { border-bottom:none }
tr.off td { opacity:.45 }
tr.bad code { color:var(--err) }
.warn-cell { color:var(--warn); font-weight:600 }
.audit td { font-size:13px }

footer { text-align:center; color:var(--muted); font-size:12px; padding:24px 16px }

/* --- Modulio 2 tabai ir matrica ------------------------------------------ */
.tabs { display:flex; gap:4px; margin:0 0 18px; border-bottom:1px solid var(--line) }
.tabs a {
  padding:8px 14px; text-decoration:none; color:var(--muted); font-size:14px;
  border:1px solid transparent; border-bottom:none; border-radius:8px 8px 0 0;
  margin-bottom:-1px;
}
.tabs a:hover { color:var(--ink) }
.tabs a.on {
  color:var(--ink); background:var(--card); border-color:var(--line);
  border-bottom:1px solid var(--card); font-weight:600;
}

.matrix td, .matrix th { vertical-align:top }
.matrix tr.group td {
  background:var(--line); font-weight:600; font-size:13px;
  letter-spacing:.02em; padding-top:10px;
}
th.num, td.num { text-align:right; white-space:nowrap }
th.check, td.check { text-align:center; width:90px }
td.check input { width:16px; height:16px }
.small { font-size:12px }
tr.sub td { border-top:none; padding-top:0 }
.rules { margin:0; padding-left:0; list-style:none; font-size:13px }
.rules li { padding:2px 0 }
.tag-off { opacity:.7 }

/* --- Paketo kortelė ------------------------------------------------------- */
.pkg-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px }
.pkg-head h2 { margin:0 }
.pkg-price { text-align:right; font-size:13px; line-height:1.5 }
.big-num { font-size:20px; font-weight:700; color:var(--ink) }
.pkg-channels {
  margin:10px 0 0; padding:10px 12px; background:var(--bg);
  border:1px solid var(--line); border-radius:8px; font-size:13px; line-height:1.7;
}
.stack { display:flex; flex-direction:column; gap:12px; max-width:520px }
.stack label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted) }
.stack label.inline { flex-direction:row; align-items:center; gap:8px; color:var(--ink) }
.stack input[type=text] { padding:8px 10px }