:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0e12;
  --panel: #141820;
  --panel-2: #1a2030;
  --panel-elev: #1e2636;
  --border: #2a3348;
  --border-soft: rgba(42, 51, 72, 0.55);
  --text: #e8ecf4;
  --muted: #8b95a8;
  --accent: #6ea8fe;
  --accent-hover: #8bbbff;
  --accent-soft: rgba(110, 168, 254, 0.14);
  --ok: #3dd68c;
  --warn: #f5c542;
  --bad: #ff6b7a;
  --email: #9b8cff;
  --shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --titlebar-bg: linear-gradient(180deg, #1c2433 0%, #151b27 100%);
  --toolbar-bg: #121820;
  --footer-bg: #0f131a;
  --focus-ring: 0 0 0 2px var(--panel), 0 0 0 4px rgba(110, 168, 254, 0.55);
  --theme-color: #141820;
  --radius: 12px;
  --radius-sm: 8px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #e8ecf2;
  --panel: #f7f8fb;
  --panel-2: #ffffff;
  --panel-elev: #ffffff;
  --border: #d0d7e4;
  --border-soft: rgba(208, 215, 228, 0.7);
  --text: #1a2233;
  --muted: #5c6b82;
  --accent: #2f6fed;
  --accent-hover: #1f5ad4;
  --accent-soft: rgba(47, 111, 237, 0.12);
  --ok: #0f9f6e;
  --warn: #b8860b;
  --bad: #d64555;
  --email: #6b5ce7;
  --shadow: 0 16px 40px rgba(26, 34, 51, 0.12), 0 2px 8px rgba(26, 34, 51, 0.06);
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  --titlebar-bg: linear-gradient(180deg, #ffffff 0%, #f0f3f8 100%);
  --toolbar-bg: #eef1f7;
  --footer-bg: #e8ecf2;
  --focus-ring: 0 0 0 2px var(--panel), 0 0 0 4px rgba(47, 111, 237, 0.45);
  --theme-color: #f7f8fb;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: light;
    --bg: #e8ecf2;
    --panel: #f7f8fb;
    --panel-2: #ffffff;
    --panel-elev: #ffffff;
    --border: #d0d7e4;
    --border-soft: rgba(208, 215, 228, 0.7);
    --text: #1a2233;
    --muted: #5c6b82;
    --accent: #2f6fed;
    --accent-hover: #1f5ad4;
    --accent-soft: rgba(47, 111, 237, 0.12);
    --ok: #0f9f6e;
    --warn: #b8860b;
    --bad: #d64555;
    --email: #6b5ce7;
    --shadow: 0 16px 40px rgba(26, 34, 51, 0.12), 0 2px 8px rgba(26, 34, 51, 0.06);
    --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    --titlebar-bg: linear-gradient(180deg, #ffffff 0%, #f0f3f8 100%);
    --toolbar-bg: #eef1f7;
    --footer-bg: #e8ecf2;
    --focus-ring: 0 0 0 2px var(--panel), 0 0 0 4px rgba(47, 111, 237, 0.45);
    --theme-color: #f7f8fb;
  }
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg);
  font-family: var(--font);
  color: var(--text);
  overflow: hidden;
  user-select: none;
  -webkit-text-size-adjust: 100%;
}

#modal {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  min-width: 0;
  min-height: 240px;
  max-width: 100%;
  max-height: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  overflow: hidden;
  resize: both;
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
}

#titlebar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: calc(10px + var(--safe-t)) 12px 10px;
  background: var(--titlebar-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  cursor: grab;
  flex: 0 0 auto;
}
#titlebar:active { cursor: grabbing; }
#titlebar .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
  flex: 0 0 auto;
}
#titlebar h1 {
  margin: 0; font-size: 13px; font-weight: 650; letter-spacing: .02em;
  flex: 1; min-width: 8rem;
}
#titlebar .meta {
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}
#titlebar .meta.is-live {
  color: var(--ok);
  font-weight: 650;
}

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.chip.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.chip.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.chip.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.chip.flash {
  animation: chip-flash 1.2s ease;
}
@keyframes chip-flash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent); }
  40% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); }
  100% { box-shadow: none; }
}

.btn {
  appearance: none; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text);
  font: inherit; font-size: 11px; font-weight: 550; padding: 6px 11px;
  border-radius: var(--radius-sm); cursor: pointer;
  touch-action: manipulation;
  transition: border-color .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
.btn:hover { border-color: var(--accent); color: var(--text); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn.primary {
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 80%, #000);
  color: #fff;
  font-weight: 650;
}
.btn.primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}
.btn.primary.busy .btn-label::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 6px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -1px;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#body {
  flex: 1; min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 14px 14px;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
col.c-account { width: 22%; }
col.c-sub     { width: 14%; }
col.c-limit   { width: 12%; }
col.c-current { width: 34%; }
col.c-reset   { width: 14%; }
col.c-status  { width: 10%; }

th, td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  line-height: 1.35;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--accent-soft); }
th {
  color: var(--muted); font-weight: 650; font-size: 10px;
  text-transform: uppercase; letter-spacing: .05em;
  position: sticky; top: 0; background: var(--panel-elev); z-index: 1;
  border-bottom: 1px solid var(--border);
}
td.account { font-weight: 650; }
td.account .note {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
}
td.sub { color: var(--muted); }
td.current {
  font-family: var(--mono);
  font-size: 22px; /* 2x glance column */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}
td.limit, td.reset {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
td.status {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  border: 1px solid transparent;
}
.badge.OK { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); border-color: color-mix(in srgb, var(--ok) 38%, transparent); }
.badge.STALE { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: color-mix(in srgb, var(--warn) 38%, transparent); }
.badge.EMAIL { color: var(--email); background: color-mix(in srgb, var(--email) 14%, transparent); border-color: color-mix(in srgb, var(--email) 38%, transparent); }
.badge.CONNECTOR,
.badge.NEEDS_API,
.badge.NEEDS_LOGIN,
.badge.NEEDS_BROWSER,
.badge.NEEDS_MGMT_KEY {
  color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: color-mix(in srgb, var(--warn) 32%, transparent);
}

#footer {
  flex: 0 0 auto;
  display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px calc(8px + var(--safe-b));
  border-top: 1px solid var(--border);
  font-size: 10px; color: var(--muted);
  background: var(--footer-bg);
}
#poll-status { font-variant-numeric: tabular-nums; font-weight: 550; }
.empty { color: var(--muted); padding: 28px; text-align: center; }
.error {
  color: var(--bad); font-size: 12px; padding: 10px 12px; margin-bottom: 10px;
  background: color-mix(in srgb, var(--bad) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent);
  border-radius: var(--radius-sm);
}
.error:empty { display: none; padding: 0; margin: 0; border: none; background: none; }
.error .retry-link {
  appearance: none; border: none; background: none; color: var(--accent);
  font: inherit; font-weight: 650; cursor: pointer; text-decoration: underline;
  padding: 0; margin-left: 6px;
}
.error .retry-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

.toolbar {
  flex: 0 0 auto;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--toolbar-bg);
  font-size: 11px; color: var(--muted);
}
.toolbar .tog { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text); }
.toolbar select,
.toolbar input[type="checkbox"] {
  accent-color: var(--accent);
}
.toolbar select {
  appearance: none; border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text); font: inherit; font-size: 11px; padding: 6px 28px 6px 10px; border-radius: var(--radius-sm);
  min-height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b95a8' d='M3 4.5L6 8l3-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.toolbar select:focus-visible,
.toolbar input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.toolbar .hint { margin-left: auto; font-size: 10px; color: var(--muted); }

.row-panel {
  flex: 0 0 auto;
  max-height: 40%;
  overflow: auto;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--footer-bg);
  font-size: 12px;
}
.row-panel-head { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; font-weight: 650; }
#row-list { list-style: none; margin: 0; padding: 0; }
#row-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 8px; border-bottom: 1px solid var(--border-soft);
  border-radius: 6px;
}
#row-list li:hover { background: var(--accent-soft); }
#row-list li.hidden-row { opacity: .45; }
#row-list .handle { cursor: grab; color: var(--muted); user-select: none; }
#row-list .eye {
  cursor: pointer; border: 1px solid var(--border); background: var(--panel-2);
  color: var(--accent); font-size: 11px; font-weight: 600;
  padding: 4px 8px; border-radius: 6px; touch-action: manipulation;
}
#row-list .eye:focus-visible { outline: none; box-shadow: var(--focus-ring); }

body.privacy .maskable {
  font-family: var(--mono);
  letter-spacing: .08em;
  cursor: pointer;
}

/* Desktop app-window (?desk=1): fill OS dialog */
html.desk, html.desk body {
  background: var(--panel);
  overflow: hidden;
}
html.desk #modal {
  left: 0 !important; top: 0 !important;
  width: 100% !important; height: 100% !important;
  min-width: 0;
  max-width: none;
  max-height: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
  resize: none;
}
html.desk #titlebar { cursor: default; }

/* Mobile / narrow: card stack (also html.mobile) */
@media (max-width: 720px) {
  html, body { overflow: auto; height: auto; min-height: 100%; }
  #modal {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    resize: none;
  }
  #titlebar { cursor: default; gap: 8px; }
  #titlebar .meta { width: 100%; order: 3; }
  #fetch-chip { order: 4; }
  .toolbar .hint { margin-left: 0; width: 100%; }
  #body { overflow: visible; }
  table {
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  table, thead, tbody, th, td, tr { display: block; width: 100%; }
  colgroup { display: none; }
  thead { display: none; }
  tbody tr {
    margin: 0 0 6px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel-2);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }
  tbody tr:hover td { background: transparent; }
  tbody tr:last-child { margin-bottom: 0; }
  tbody td {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 6px 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-soft);
  }
  tbody td:last-child { border-bottom: none; }
  tbody td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-top: 2px;
  }
  tbody td.account {
    grid-template-columns: 1fr auto;
    align-items: start;
    font-size: 14px;
    padding-bottom: 8px;
    margin-bottom: 2px;
    border-bottom-color: var(--border);
  }
  tbody td.account::before { display: none; }
  tbody td.status {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    white-space: normal;
  }
  td.limit, td.reset, td.sub { font-size: 12px; }
  td.current { font-size: 14px; font-weight: 400; }
  .empty { display: block; padding: 24px 8px; }
  #footer { position: sticky; bottom: 0; }
}

html.mobile #modal {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100dvh;
  border-radius: 0;
  border: none;
  box-shadow: none;
  resize: none;
}
html.mobile #titlebar { cursor: default; }


.mobile-flow { display: none; }

/* Mobile dense flow: title + comma-separated glance line (no accordion) */
@media (max-width: 720px) {
  tbody tr[data-id] {
    cursor: default;
    margin: 0 0 6px;
    padding: 6px 10px;
  }
  tbody tr[data-id] td.sub,
  tbody tr[data-id] td.limit,
  tbody tr[data-id] td.current,
  tbody tr[data-id] td.reset,
  tbody tr[data-id] td.status {
    display: none !important;
  }
  tbody tr[data-id] td.account {
    display: block !important;
    font-size: 14px;
    line-height: 1.35;
    padding: 0;
    margin: 0;
    border-bottom: none;
    grid-template-columns: unset;
  }
  tbody tr[data-id] td.account::before { display: none; }
  tbody tr[data-id] td.account .note,
  tbody tr[data-id] td.account .status-inline {
    display: none !important;
  }
  tbody tr[data-id] .acct-title {
    display: inline;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(100%, 18em);
    margin-right: 0.35em;
    vertical-align: baseline;
  }
  tbody tr[data-id] .mobile-flow {
    display: inline;
    font-size: 14px;
    font-weight: 450;
    font-family: inherit;
    color: var(--text);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  td.current { font-size: 14px; font-weight: 400; }
}

html.mobile tbody tr[data-id] {
  cursor: default;
  margin: 0 0 6px;
  padding: 6px 10px;
}
html.mobile tbody tr[data-id] td.sub,
html.mobile tbody tr[data-id] td.limit,
html.mobile tbody tr[data-id] td.current,
html.mobile tbody tr[data-id] td.reset,
html.mobile tbody tr[data-id] td.status {
  display: none !important;
}
html.mobile tbody tr[data-id] td.account {
  display: block !important;
  font-size: 14px;
  line-height: 1.35;
  padding: 0;
  margin: 0;
  border-bottom: none;
  grid-template-columns: unset;
}
html.mobile tbody tr[data-id] td.account::before { display: none; }
html.mobile tbody tr[data-id] td.account .note,
html.mobile tbody tr[data-id] td.account .status-inline {
  display: none !important;
}
html.mobile tbody tr[data-id] .acct-title {
  display: inline;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42%;
  margin-right: 0.35em;
  vertical-align: baseline;
}
html.mobile tbody tr[data-id] .mobile-flow {
  display: inline;
  font-size: 14px;
  font-weight: 450;
  font-family: inherit;
  color: var(--text);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
html.mobile td.current { font-size: 14px; font-weight: 400; }

/* Brand mark → GitHub */
a.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  text-decoration: none;
  position: relative;
  outline: none;
  border: 1px solid var(--border);
  background: var(--panel-2);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.brand img, a.brand svg {
  width: 18px;
  height: 18px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}
a.brand:hover, a.brand:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
  transform: translateY(-0.5px);
}
a.brand .brand-tip {
  pointer-events: auto;
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 20;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .12s ease, transform .12s ease;
  box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.35));
}
a.brand:hover .brand-tip,
a.brand:focus-visible .brand-tip,
a.brand:focus-within .brand-tip,
a.brand .brand-tip:hover {
  opacity: 1;
  transform: translateY(0);
}
/* bridge gap so pointer can reach the tip without losing hover */
a.brand::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 12px;
}
a.brand .brand-tip strong {
  color: var(--text);
  font-weight: 600;
}
#titlebar .dot { display: none; } /* replaced by brand mark */