:root {
  --ground:#F3F6F5; --panel:#FFFFFF; --panel-2:#EAF0EE;
  --ink:#111917; --ink-2:#33413D; --muted:#61726D;
  --line:#D4DEDA; --line-soft:#E3EBE8;
  --accent:#0E6F63; --accent-soft:#DCEFEB;
  --warn:#8A5A05; --warn-soft:#F6EBD5;
  --danger:#A32B21; --danger-soft:#F7E2DF;
  --ok:#1C7A3E; --ok-soft:#DDF0E2;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Lao",sans-serif;
  --radius:10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#0D1211; --panel:#141B19; --panel-2:#1B2422;
    --ink:#E7EEEB; --ink-2:#C2CFCB; --muted:#8DA09B;
    --line:#2A3633; --line-soft:#212B29;
    --accent:#3FB5A3; --accent-soft:#12302C;
    --warn:#D9A441; --warn-soft:#2E2616;
    --danger:#E4796C; --danger-soft:#331916;
    --ok:#5CC47E; --ok-soft:#16301F;
  }
}

* { box-sizing: border-box; }
/* A display rule on a class beats the hidden attribute's default display:none,
   so make hidden win outright. Without this the login card stays on screen
   after unlocking. */
[hidden] { display: none !important; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2 { font-weight:600; letter-spacing:-.01em; margin:0; }
h2 { font-size:15px; }
button { font:inherit; cursor:pointer; }
input, textarea, select {
  font:inherit; color:var(--ink); background:var(--panel);
  border:1px solid var(--line); border-radius:8px; padding:9px 11px; width:100%;
}
textarea { resize:vertical; font-family:var(--sans); }
#recipients { font-family:var(--mono); font-size:13px; }
input:focus, textarea:focus, select:focus {
  outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent;
}
label { display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin:14px 0 6px; }
code { font-family:var(--mono); font-size:.9em; background:var(--panel-2); padding:1px 5px; border-radius:4px; }

/* ---------- gate ---------- */
.gate { display:grid; place-items:center; min-height:100vh; padding:24px; }
.gate-card {
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:30px; width:min(400px,100%); display:grid; gap:12px;
}
.gate-card h1 { font-size:22px; }
.gate-card p { margin:0; color:var(--muted); font-size:13px; }
.gate-card button, #send, .primary {
  background:var(--accent); color:#fff; border:none; border-radius:8px;
  padding:10px 18px; font-weight:600;
}
@media (prefers-color-scheme: dark) { .gate-card button, #send, .primary { color:#08201D; } }
.gate-card button:hover, #send:hover { filter:brightness(1.08); }
.error { color:var(--danger); font-size:13px; }

.insecure {
  margin:0; padding:10px 22px; font-size:13px; font-weight:600;
  background:var(--danger-soft); color:var(--danger);
  border-bottom:1px solid var(--danger);
}

/* ---------- chrome ---------- */
.topbar {
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:12px 22px; background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.brand { display:flex; align-items:center; gap:9px; font-weight:600; }
.logo { font-size:17px; }
.live { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); font-family:var(--mono); }
.dot { width:8px; height:8px; border-radius:50%; background:var(--muted); flex:none; }
.dot.on { background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); }
.dot.off { background:var(--danger); box-shadow:0 0 0 3px var(--danger-soft); }
.counters { display:flex; gap:18px; font-size:12px; color:var(--muted); margin-left:auto; }
.counters b { color:var(--ink); font-family:var(--mono); font-size:13px; }
.ghost {
  background:transparent; border:1px solid var(--line); color:var(--ink-2);
  border-radius:8px; padding:6px 13px; font-size:12.5px; font-weight:600; width:auto;
}
.ghost:hover { border-color:var(--accent); color:var(--accent); }

main {
  display:grid; gap:16px; padding:18px 22px 40px; max-width:1500px; margin:0 auto;
  grid-template-columns: minmax(320px,1fr) minmax(300px,1fr);
  grid-template-areas: "compose devices" "apikeys apikeys" "messages messages";
}
@media (max-width:900px) { main { grid-template-columns:1fr; grid-template-areas:"compose" "devices" "apikeys" "messages"; } }
.compose { grid-area:compose; } .devices { grid-area:devices; }
.apikeys { grid-area:apikeys; } .messages { grid-area:messages; }
.key-form { flex-wrap:wrap; }
.key-form input { min-width:200px; }
.key-secret {
  display:block; font-family:var(--mono); font-size:13px; word-break:break-all;
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:8px 10px; margin:6px 0; color:var(--ink);
}

.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px 20px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.hint { font-size:12px; color:var(--muted); margin:6px 0 0; font-family:var(--mono); }
.row { display:flex; gap:12px; align-items:flex-end; margin-top:16px; }
.pick { flex:1; margin:0; }
.pick span { display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }
#send { flex:none; }
#send:disabled { opacity:.5; cursor:not-allowed; }

#seg-encoding { font-weight:600; color:var(--accent); }
#seg-left.tight { color:var(--warn); }
#seg-left.over { color:var(--danger); font-weight:600; }
.result { margin-top:14px; padding:11px 13px; border-radius:8px; font-size:13px; font-family:var(--mono); }
.result.ok { background:var(--ok-soft); color:var(--ok); }
.result.bad { background:var(--danger-soft); color:var(--danger); }

/* ---------- devices ---------- */
#push-status { margin-top:10px; }
.inline-form { display:flex; gap:8px; margin-top:12px; }
.inline-form input { flex:1; }
.inline-form button {
  background:var(--accent); color:#fff; border:none; border-radius:8px;
  padding:9px 16px; font-weight:600; flex:none;
}
@media (prefers-color-scheme: dark) { .inline-form button { color:#08201D; } }
#push-status.on  { color:var(--ok); }
#push-status.off { color:var(--warn); }
.device-list { display:grid; gap:9px; margin-top:14px; }
.device {
  display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center;
  border:1px solid var(--line-soft); border-radius:9px; padding:10px 12px; background:var(--ground);
}
.device .name { font-weight:600; }
.device .meta { font-family:var(--mono); font-size:11.5px; color:var(--muted); }
.device .actions { display:flex; gap:6px; }
.device .actions button { font-size:11px; padding:4px 9px; }
.pair {
  margin-top:14px; background:var(--accent-soft); border:1px solid var(--accent);
  border-radius:9px; padding:13px 15px; font-size:13px; color:var(--ink);
}
.pair b { font-family:var(--mono); font-size:22px; letter-spacing:.14em; display:block; margin:6px 0; color:var(--accent); }

/* ---------- messages ---------- */
.filters { display:flex; gap:8px; }
.filters input { width:220px; } .filters select { width:auto; }
.table-scroll { overflow-x:auto; margin-top:14px; }
table { border-collapse:collapse; width:100%; min-width:820px; font-size:13px; }
th, td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
th { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; }
td.num, td.when, td.tries { font-family:var(--mono); font-size:12px; color:var(--muted); white-space:nowrap; }
td.to { font-family:var(--mono); font-size:12.5px; white-space:nowrap; }
td.text { max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); }
tbody tr:hover { background:var(--ground); }

.pill {
  display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.06em; padding:3px 8px; border-radius:5px; white-space:nowrap;
}
.pill.QUEUED     { background:var(--panel-2);   color:var(--muted); }
.pill.DISPATCHED { background:var(--warn-soft); color:var(--warn); }
.pill.SENT       { background:var(--accent-soft); color:var(--accent); }
.pill.DELIVERED  { background:var(--ok-soft);   color:var(--ok); }
.pill.FAILED, .pill.DEAD_LETTER { background:var(--danger-soft); color:var(--danger); }
.pill.CANCELLED  { background:var(--panel-2);   color:var(--muted); text-decoration:line-through; }
.flash { animation:flash .9s ease-out; }
@keyframes flash { from { background:var(--accent-soft); } to { background:transparent; } }
@media (prefers-reduced-motion:reduce) { .flash { animation:none; } }