:root {
  --bg: #0a0b0d;
  --card: #101215;
  --card-border: #1e2228;
  --card-border-live: #2b5f3f;
  --text: #e6e9ee;
  --muted: #7d8590;
  --dim: #565d67;
  --accent: #6c5ce7;
  --accent-hover: #7d6ff0;
  --green: #3fb950;
  --green-bg: rgba(63, 185, 80, 0.14);
  --red: #f85149;
  --amber: #d29922;
  --btn: #1a1d23;
  --btn-border: #282d35;
}

* { box-sizing: border-box; }

/* The hidden attribute only sets display:none at UA-stylesheet strength, so
   any class that sets display (.modal, .runbar, .toast) silently overrides it
   and the element renders anyway. This puts hidden back in charge. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- top bar ---- */
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 20px; border-bottom: 1px solid var(--card-border);
  position: sticky; top: 0; background: rgba(10, 11, 13, 0.94);
  backdrop-filter: blur(8px); z-index: 20; flex-wrap: wrap;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.brand { font-weight: 650; letter-spacing: -0.01em; }

/* ---- buttons ---- */
.btn {
  background: var(--btn); color: var(--text); border: 1px solid var(--btn-border);
  border-radius: 7px; padding: 7px 13px; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .12s, border-color .12s;
  font-family: inherit;
}
.btn:hover:not(:disabled) { background: #22262e; border-color: #333944; }
/* A button that visibly moves when pressed feels connected to the click.
   Without it, a slow action reads as a dead button and gets clicked twice. */
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
/* Keyboard focus only - :focus alone would ring every mouse click too. */
.btn:focus-visible, .select:focus-visible, .field input:focus-visible,
.field select:focus-visible, .field textarea:focus-visible, .menu button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:disabled { background: #2f2b52; border-color: #2f2b52; }
.btn-danger { color: #e08a84; border-color: #47302e; }
.btn-danger:hover:not(:disabled) { background: #2a1c1b; border-color: #6b3b37; }
.btn-icon { padding: 7px 10px; line-height: 1; }
.btn-sm { padding: 5px 9px; font-size: 12px; }
.link { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; }

.select {
  background: var(--btn); color: var(--text); border: 1px solid var(--btn-border);
  border-radius: 7px; padding: 7px 10px; font-size: 13px; font-family: inherit;
}

/* ---- banners + run bar ---- */
.banner { margin: 12px 20px 0; padding: 10px 14px; border-radius: 8px; font-size: 13px; }
.banner-error { background: rgba(248, 81, 73, .12); border: 1px solid rgba(248, 81, 73, .35); color: #ffb4b0; }
.banner-info  { background: rgba(108, 92, 231, .12); border: 1px solid rgba(108, 92, 231, .35); color: #b9aeff; }
.banner-warn  { background: rgba(210, 153, 34, .12); border: 1px solid rgba(210, 153, 34, .35); color: #f0cd7a; }

.runbar {
  margin: 12px 20px 0; padding: 11px 14px; border-radius: 8px;
  background: #12151a; border: 1px solid var(--card-border);
  display: flex; align-items: center; gap: 14px; font-size: 13px; flex-wrap: wrap;
}
.runbar .track { flex: 1; min-width: 160px; height: 5px; background: #1e2228; border-radius: 3px; overflow: hidden; }
.runbar .fill { height: 100%; background: var(--accent); transition: width .3s; }
.runbar .stage { color: var(--muted); }

/* ---- card grid ---- */
.grid {
  display: grid; gap: 10px; padding: 12px 14px 40px;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

.card {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 10px; padding: 11px 12px 10px;
  display: flex; flex-direction: column; gap: 6px;
}
/* Back to the original: a live card is ringed in green, everything else keeps
   the plain border. The status classes still exist and still come from the
   same place as the badge, so the two can never disagree - only the styling
   reverted, not the wiring. */
.card.st-alive { border-color: var(--card-border-live); }
.card.is-benched { opacity: .5; }

.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-title { font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; }

.badge {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px;
}
.badge-alive { background: var(--green-bg); color: var(--green); }
.badge-dead  { background: rgba(248, 81, 73, .14); color: var(--red); }
.badge-warn  { background: rgba(210, 153, 34, .14); color: var(--amber); }
.badge-muted { background: #1a1d23; color: var(--dim); }
.badge-trial { background: rgba(108, 92, 231, .16); color: #a99bff; }

/* stats line: muted labels, bright numbers - reads at a glance */
.stats { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.stats b { color: var(--text); font-weight: 600; }
.stats .good { color: var(--green); font-weight: 650; }
.stats .bad  { color: var(--red); font-weight: 650; }
.stats .mid  { color: var(--amber); font-weight: 650; }
.stats .ramp { color: #a99bff; }
.spark { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 12px; margin-left: auto; }
.spark i { width: 3px; border-radius: 1px; background: var(--green); display: block; }
.spark i.miss { background: var(--red); }

.handle { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.handle code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #b8c0cb; font-size: 12.5px; }
.handle .out { margin-left: auto; color: var(--dim); text-decoration: none; font-size: 13px; }
.handle .out:hover { color: var(--accent); }

.meta { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--muted); }
.meta b { color: var(--text); font-weight: 600; }
.meta .age { margin-left: auto; color: var(--dim); font-size: 11px; }

/* The card keeps the original three-action row: Post now / Bench / one dots
   button. Every phone-management action lives inside the dots menu, so cards
   stay a uniform height and the grid lines up. */
.actions { display: flex; gap: 6px; margin-top: 3px; position: relative; }
.actions .btn { flex: 1; padding: 6px 10px; font-size: 12.5px; }
.actions .btn-icon { flex: 0 0 auto; padding: 6px 9px; }

.menu {
  display: none; position: absolute; right: 0; bottom: calc(100% + 6px);
  min-width: 180px; max-width: calc(100vw - 28px); z-index: 30; padding: 5px;
  /* Bound to the viewport and scrollable. Without this a menu taller than the
     space below it simply ran off the screen and its last items were
     unreachable - the scrollbar rules further down styled a scrollbar that
     could never appear. */
  max-height: min(70vh, calc(100vh - 96px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #16181d; border: 1px solid var(--btn-border); border-radius: 9px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}
.menu.open { display: block; }
.toolbar-menu-wrap { position: relative; display: inline-block; }
.menu-below { bottom: auto; top: calc(100% + 6px); right: auto; left: 0; }
.menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  color: var(--text); font: inherit; font-size: 12.5px; padding: 7px 10px;
  border-radius: 6px; cursor: pointer;
}
.menu button:hover:not(:disabled) { background: #22262e; }
.menu button:disabled { opacity: .35; cursor: not-allowed; }
.menu button.danger { color: #e08a84; }

.note { font-size: 11.5px; color: var(--dim); }
.note.err { color: #e08a84; }

.empty { text-align: center; color: var(--muted); padding: 60px 20px; }

/* ---- modal ---- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; z-index: 40; padding: 20px; }
.modal-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; width: min(680px, 100%); max-height: 86vh; max-height: 86dvh; display: flex; flex-direction: column; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--card-border); }
.modal-head h2 { margin: 0; font-size: 15px; font-weight: 650; }
.modal-body {
  padding: 16px 18px; overflow: auto; display: flex; flex-direction: column; gap: 13px;
  scrollbar-gutter: stable;
}
.modal-foot { display: flex; justify-content: flex-end; gap: 9px; padding: 13px 18px; border-top: 1px solid var(--card-border); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; color: var(--muted); }
.field input, .field textarea, .field select {
  background: #0c0e11; border: 1px solid var(--btn-border); color: var(--text);
  border-radius: 7px; padding: 8px 10px; font: inherit; font-size: 13px;
  transition: border-color .12s;
}
.field input:hover:not(:disabled), .field select:hover { border-color: #333944; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent); outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: #4a515b; }

/* Tick boxes and radios inherit the accent instead of the browser's blue,
   which is the single loudest "unstyled form" tell on a dark page. */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--accent); width: 15px; height: 15px;
  vertical-align: -2px; cursor: pointer;
}

/* A file input renders as a grey OS button that matches nothing. This turns
   the label into the control and hides the input behind it. */
.filepick {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px dashed var(--btn-border); border-radius: 9px;
  padding: 11px 13px; cursor: pointer; transition: border-color .12s, background .12s;
}
.filepick:hover { border-color: var(--accent); background: rgba(108, 92, 231, .05); }
.filepick input[type="file"] { display: none; }
.filepick .ico { font-size: 17px; line-height: 1; }
.filepick .txt { font-size: 13px; }
.filepick .txt b { display: block; font-weight: 600; }
.filepick .txt span { color: var(--dim); font-size: 11.5px; }
.field textarea { min-height: 220px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.6; }
.field .hint { font-size: 11.5px; color: var(--dim); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.row3 { display: grid; grid-template-columns: 110px 1fr 110px; gap: 8px; }
.paste-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
@media (max-width: 560px) { .row2, .row3 { grid-template-columns: 1fr; } }

/* --- create phones --- */
.geobox {
  background: #0c0e11; border: 1px solid var(--btn-border); border-radius: 8px;
  padding: 10px 12px; font-size: 13px; line-height: 1.6;
}
.geobox b { color: var(--text); }
.warn {
  border-left: 3px solid #d08a2c; background: rgba(208, 138, 44, 0.08);
  padding: 8px 11px; border-radius: 0 6px 6px 0; font-size: 13px;
  margin-top: 8px; color: #e8c99a;
}
.runlog {
  background: #0a0c0f; border: 1px solid var(--btn-border); border-radius: 8px;
  padding: 10px 12px; font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace;
  max-height: 260px; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
}
.namelist { font-size: 13px; color: var(--muted); }

/* --- a list of things you pick one of --- */
.pick-list { display: flex; flex-direction: column; gap: 6px; }
.pick {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  background: #0c0e11; border: 1px solid var(--btn-border); border-radius: 9px;
  padding: 11px 13px; transition: border-color .12s, background .12s;
}
.pick:hover { border-color: #333944; background: #0f1216; }
.pick.on { border-color: var(--accent); background: rgba(108, 92, 231, .07); }
.pick .body { flex: 1; min-width: 0; }
.pick .ttl {
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.pick .sub { font-size: 11.5px; color: var(--dim); margin-top: 1px; }
.pick .tag { flex: 0 0 auto; }

/* A labelled block of facts - reads faster than a paragraph. */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- media modal --- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat {
  background: #0c0e11; border: 1px solid var(--btn-border); border-radius: 8px;
  padding: 10px 12px;
}
.stat b { display: block; font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
.stat span { font-size: 11px; color: var(--muted); }
.stat.warn b { color: var(--amber); }
.stat.bad b { color: var(--red); }

.drop {
  border: 1.5px dashed var(--btn-border); border-radius: 10px; padding: 20px;
  text-align: center; color: var(--muted); font-size: 13px; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.drop:hover, .drop.over { border-color: var(--accent); background: rgba(108,92,231,.06); }
.drop b { color: var(--text); font-weight: 600; }

.progress { height: 4px; background: #1e2228; border-radius: 3px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent); transition: width .2s; }

.file-list {
  max-height: 260px; overflow-y: auto; border: 1px solid var(--card-border);
  border-radius: 8px; background: #0c0e11;
  /* Reserve the scrollbar's width instead of letting the OS paint it on top -
     an overlay scrollbar sits exactly over the row-end delete button. */
  scrollbar-gutter: stable;
}
.file-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 11px;
  font-size: 12.5px; border-bottom: 1px solid #16181d;
}
.file-row:last-child { border-bottom: 0; }
.file-row .nm { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.file-row .sz { color: var(--dim); font-size: 11px; margin-left: auto; }
/* Standalone, not scoped to one list - the version picker and the geo box
   use it too, and a class that only works inside one parent is a trap. */
.tag {
  display: inline-block; font-size: 10px; padding: 2px 6px; border-radius: 4px;
  background: #1a1d23; color: var(--dim); letter-spacing: .02em;
  font-weight: 600; text-transform: uppercase; white-space: nowrap;
}
.tag.on { background: rgba(108,92,231,.16); color: #a99bff; }
.file-row .del {
  background: none; border: 0; color: var(--dim); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 4px 6px; margin-right: 2px;
  border-radius: 5px; flex: 0 0 auto;
}
.file-row .del:hover { color: var(--red); }
.file-row .del:disabled { opacity: .25; cursor: not-allowed; }

/* Thin, themed scrollbars. The default macOS overlay bar is invisible until
   you scroll and then paints over whatever is beneath it. */
.file-list::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.menu::-webkit-scrollbar { width: 10px; }
.file-list::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.menu::-webkit-scrollbar-track { background: transparent; }
.file-list::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.menu::-webkit-scrollbar-thumb {
  background: #2b313a; border-radius: 6px;
  border: 3px solid transparent; background-clip: content-box;
}
.file-list::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.menu::-webkit-scrollbar-thumb:hover { background: #3b434f; background-clip: content-box; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: #1a1d23; border: 1px solid var(--btn-border); color: var(--text);
  padding: 10px 16px; border-radius: 8px; font-size: 13px; z-index: 60;
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
}
.toast.err { border-color: rgba(248,81,73,.5); color: #ffb4b0; }

/* --- login ---------------------------------------------------------------
   Its own screen, not a modal: the panel proper has not loaded yet, so this
   page carries the whole first impression on its own. Sized in viewport units
   with a safe-area inset so it sits correctly on a phone, which is where it
   gets opened most. */
.login-body {
  display: grid; place-items: center; min-height: 100svh;
  padding: 24px max(24px, env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom));
  background:
    radial-gradient(1000px 520px at 50% -10%, rgba(108, 92, 231, .16), transparent 70%),
    var(--bg);
}
.login { width: 100%; max-width: 372px; }

.login-card {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 14px; padding: 30px 28px 26px;
  display: flex; flex-direction: column;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .5);
}

.login-mark {
  width: 42px; height: 42px; border-radius: 11px; margin-bottom: 17px;
  display: grid; place-items: center;
  color: #b9aeff;
  background: rgba(108, 92, 231, .14);
  border: 1px solid rgba(108, 92, 231, .32);
}
.login-mark svg { width: 21px; height: 21px; }

.login-title {
  margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.015em;
}
.login-sub { margin: 4px 0 22px; font-size: 13px; color: var(--muted); }

.login-field label {
  font-size: 12px; font-weight: 550; color: var(--muted); letter-spacing: .01em;
}
.login-field input {
  /* 16px keeps iOS Safari from zooming the page on focus. */
  font-size: 16px; padding: 11px 12px; border-radius: 8px;
}
.login-field input:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, .22);
}

.login-submit {
  margin-top: 18px; width: 100%; padding: 11px; font-size: 14px; font-weight: 600;
}

.login-error {
  margin: 14px 0 0; padding: 9px 11px; font-size: 12.5px;
  color: #ffb4b0; background: rgba(248, 81, 73, .1);
  border: 1px solid rgba(248, 81, 73, .3); border-radius: 8px;
}

.login-foot {
  margin: 16px 0 0; text-align: center;
  font-size: 11.5px; color: var(--dim); letter-spacing: .02em;
}

/* --- mobile ---------------------------------------------------------------
   The panel is opened from a phone as often as from a desk, so this is not a
   courtesy pass. Each rule below fixes something that is actually broken at
   phone width, not merely tight. */
@media (max-width: 720px) {
  /* iOS Safari zooms the whole page whenever a focused input is under 16px,
     and then leaves it zoomed. Every form in the panel was doing this. */
  .field input, .field textarea, .field select, .select, input, select, textarea {
    font-size: 16px;
  }

  /* The toolbar wraps to three rows on a phone, and being sticky it then ate
     a third of the screen permanently. Let it scroll away. */
  .topbar { position: static; padding: 11px 13px; gap: 8px; }
  .topbar-right { width: 100%; }
  .topbar-right .btn, .topbar-right .select { flex: 1 1 auto; }
  .toolbar-menu-wrap { flex: 1 1 auto; }
  .toolbar-menu-wrap > .btn { width: 100%; }

  /* Reclaim the 40px the modal backdrop was spending on side padding. */
  .modal { padding: 10px; }
  .modal-head, .modal-foot { padding: 13px 15px; }
  .modal-body { padding: 14px 15px; }
  /* Keep the footer buttons clear of the home indicator. */
  .modal-foot { padding-bottom: calc(13px + env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex: 1; padding: 11px; }

  /* Four stat columns on a 375px screen is 80px each for a 19px number. */
  .stat-grid { grid-template-columns: repeat(2, 1fr); }

  /* Card buttons were ~30px tall - under the size a thumb reliably hits. */
  .actions .btn { padding: 10px 10px; font-size: 13px; }
  .actions .btn-icon { padding: 10px 13px; }
  .menu button { padding: 11px 12px; font-size: 13.5px; }
  .menu { max-height: min(60vh, calc(100vh - 140px)); }

  .grid { padding: 10px 11px 40px; }
  .banner, .runbar { margin: 10px 11px 0; }

  /* Full width so a long message is not squeezed into a centred sliver. */
  .toast {
    left: 11px; right: 11px; bottom: calc(14px + env(safe-area-inset-bottom));
    transform: none; text-align: center;
  }

  .paste-row { grid-template-columns: 1fr; }
  .field textarea { min-height: 150px; }
}

/* Nothing may push the page sideways. NOT done with overflow-x:hidden - when
   one axis is hidden the CSS spec computes the other to auto, which turns
   <body> into a scroll container and CLIPS absolutely-positioned dropdowns
   that extend past it. That is what hid the last item of the toolbar menu.
   Horizontal overflow is prevented at the source instead: the card grid uses
   minmax(min(300px,100%),1fr) and menus are capped at calc(100vw - 28px). */
html, body { max-width: 100%; }