/* real-version: 2.261011.1+3 */

:root {
  --bg: #0b0b0b;
  --panel: #1b1b1b;
  --panel-2: #2a2a2a;
  --track: #242424;
  --line: #3a3a3a;
  --line-soft: #2a2a2a;
  --ink: #ffffff;
  --ink-2: #b0b0b0;
  --ink-3: #808080;
  --accent: #ff9000;
  --accent-ink: #000000;
  --focus: #ff9000;
  --status-banned: #ff4d4d;
  --status-passkey: #7ecb20;
  --status-2fa: #4da3ff;
  --tip-bg: #2a2a2a;
  --tip-ink: #ffffff;
  --radius: 4px;
  --shell: 1200px;
  --row-h: 40px;
  --tap: 30px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

:root[data-theme="light"] {
  --bg: #f5f5f6;
  --panel: #ffffff;
  --panel-2: #ececee;
  --track: #e2e2e6;
  --line: #d6d6da;
  --line-soft: #e6e6e9;
  --ink: #17171a;
  --ink-2: #55555d;
  --ink-3: #8a8a91;
  --accent-ink: #ffffff;
  --tip-bg: #17171a;
  --tip-ink: #ffffff;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

code { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 8px 12px;
  font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.topbar-row,
#main {
  max-width: var(--shell);
  margin-inline: auto;
  width: 100%;
}

.topbar-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 8px 12px;
  flex-wrap: wrap;
}
.topbar-row .tabs { padding: 0; min-width: 0; max-width: 100%; }

.brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand-dot {
  width: 20px; height: 14px; border-radius: 3px;
  background: var(--accent);
  flex: none;
}
.brand-name { font-weight: 800; letter-spacing: .2px; color: var(--ink); }
.brand-meta {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
#btn-autorefresh[aria-checked="false"] { color: var(--accent); border-color: var(--accent); background: var(--panel-2); }
#btn-theme:hover { color: var(--accent); }

.mode-chip {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  padding: 2px 6px;
  border-radius: 4px;
}

.refresh-countdown {
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
  min-width: 116px;
  text-align: right;
}

.conn-chip {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: none;
  padding: 0 2px;
  color: var(--ink-2);
}
.conn-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-3);
  flex: none;
}
.conn-chip[data-state="live"] { color: var(--accent); border-color: var(--line); background: var(--panel-2); }
.conn-chip[data-state="live"] .conn-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 144, 0, .16);
  animation: conn-pulse 2.4s ease-in-out infinite;
}
.conn-chip[data-state="connecting"] { color: var(--ink-2); border-color: var(--line); background: var(--panel-2); }
.conn-chip[data-state="connecting"] .conn-dot { background: var(--ink-3); animation: conn-pulse 1s ease-in-out infinite; }
.conn-chip[data-state="retry"] { color: var(--accent); border-color: var(--line); background: var(--panel-2); }
.conn-chip[data-state="retry"] .conn-dot { background: var(--accent); animation: conn-pulse .8s ease-in-out infinite; }
.conn-chip[data-state="poll"] { color: var(--ink-2); }
.conn-chip[data-state="poll"] .conn-dot { background: var(--ink-3); }
.conn-chip[data-state] { background: none; border-color: transparent; }

@keyframes conn-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.tabs { padding: 0 12px; }
.tablist { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tablist::-webkit-scrollbar { display: none; }
.tablist[data-overflow="true"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}

.tablist [role="tab"] {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-2);
  font: inherit;
  font-weight: 600;
  padding: 8px 12px;
  min-height: 36px;
  cursor: pointer;
  white-space: nowrap;
}
.tablist [role="tab"]:hover { color: var(--ink); background: var(--line-soft); }
.tablist [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

.tab-count {
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 5px;
}

.subtabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  margin: 2px 0 0;
}
.subtablist { gap: 2px; min-width: 0; }
.subtablist [role="tab"] {
  font-size: 11.5px;
  font-weight: 500;
  min-height: 28px;
  padding: 5px 10px;
  border-bottom-width: 1px;
  color: var(--ink-3);
}
.subtablist [role="tab"]:hover { color: var(--ink-2); background: var(--line-soft); }
.subtablist [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.subpanel { padding-top: 8px; }

.banner {
  margin: 10px 12px 0;
  border: 1px solid var(--accent);
  background: var(--panel-2);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 12px;
}
.banner a { color: var(--focus); }

main { padding: 10px 12px 40px; }
body.has-toasts main { padding-bottom: calc(40px + var(--toast-space, 0px)); }

.panel-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0 10px;
  padding: 4px 8px;
  min-height: var(--tap);
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
}

.panel-bar .icon-btn { color: var(--ink-2); }
.panel-bar .icon-btn:hover { color: var(--ink); }
.panel-bar .icon-btn + .icon-btn { margin-left: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.env-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
}

.env-chip.is-off { color: var(--ink-3); font-family: var(--font); }
.env-chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.acct-stats {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
  margin-left: auto;
}
.acct-stats b { color: var(--ink); font-weight: 700; }
.acct-stats .stats-active { color: var(--accent); font-weight: 700; }
.acct-stats .stats-banned { color: var(--ink); font-weight: 700; }

.tip { position: relative; }

.tip::before {
  content: attr(data-tip);
  position: absolute;
  z-index: 60;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%) translateY(-3px);
  width: max-content;
  max-width: 250px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--tip-bg);
  color: var(--tip-ink);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.tip:hover::before,
.tip:focus-visible::before { opacity: 1; transform: translateX(-50%) translateY(0); }
.tip-end::before { left: auto; right: 0; transform: translateY(-3px); }
.tip-end:hover::before, .tip-end:focus-visible::before { transform: translateY(0); }

.col-head,
.acct {
  display: grid;
  /* One row shape for every provider — eight cells, Codex/Claude/Gemini alike; only the meaning
     of a cell changes per tab. Minimums keep the eight columns inside a 1024px desktop viewport. */
  grid-template-columns: minmax(120px, 1.5fr) 78px minmax(110px, 1fr) minmax(150px, 1.2fr) 88px minmax(120px, auto) 210px 46px;
  align-items: center;
  gap: 10px;
}

.col-head {
  padding: 0 10px 5px;
  color: var(--ink-3);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .6px;
  border-bottom: 1px solid var(--line);
}

.col-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-head span:nth-child(5) { text-align: right; }
.col-head span:nth-child(6) { text-align: left; }
.col-head span:nth-child(7) { text-align: right; }
.col-head span:nth-child(8) { text-align: right; }

/* Weekly quota text never spills into the next column (Claude "dùng 0%" once overprinted "14d"). */
.quota-weekly { overflow: hidden; }
.quota-weekly .quota-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.quota-weekly .weekly-reset { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; min-width: 0; }

.rows { display: flex; flex-direction: column; }

.acct {
  min-height: var(--row-h);
  padding: 5px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel);
}
.acct:hover { background: var(--line-soft); }
.acct:focus-within { outline: 1px solid var(--focus); outline-offset: -1px; }

.acct.is-active { box-shadow: inset 3px 0 0 var(--accent); }
.acct.is-fresh { animation: row-fresh 1.1s ease-out 1; }

@keyframes row-fresh {
  0% { background: rgba(255, 144, 0, .16); }
  100% { background: transparent; }
}
.acct.is-off .dim { opacity: .62; }
.acct.is-off:hover .dim,
.acct.is-off:focus-within .dim { opacity: 1; }

.acct-name { min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.acct-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.acct-mail { color: var(--ink-3); font-family: var(--mono); font-size: 11px; }

.badge-active,
.badge-waiting {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .7px;
  border-radius: 3px;
  padding: 1px 5px;
}

.badge-active { color: var(--bg); background: var(--accent); }
.badge-waiting { color: var(--ink); background: var(--line); }

.badge-mirror { display: inline-flex; align-items: center; color: var(--ink-3); }
.badge-mirror svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.badge-plan {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--ink-2);
  border: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: 4px;
  padding: 1px 6px;
  text-align: center;
}

.quota { display: flex; align-items: center; gap: 8px; min-width: 0; }
.quota-bar {
  position: relative;
  flex: 0 0 72px;
  width: 72px;
  height: 6px;
  border-radius: 3px;
  background: var(--track);
  overflow: hidden;
}
.quota-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 3px;
  transition: width .5s cubic-bezier(.4, 0, .2, 1), background-color .3s ease;
}
.quota-bar.tone-ok .quota-fill { background: var(--accent); }
.quota-bar.tone-warn .quota-fill { background: var(--accent); opacity: .65; }
.quota-bar.tone-low .quota-fill { background: var(--ink-3); }
.quota-bar.tone-unknown {
  background: repeating-linear-gradient(135deg, #2e2e2e 0 5px, #1a1a1a 5px 10px);
}
:root[data-theme="light"] .quota-bar.tone-unknown {
  background: repeating-linear-gradient(135deg, #d6d6da 0 5px, #eaeaed 5px 10px);
}

.quota-text { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; flex: none; }
.quota-text.tone-ok { color: var(--accent); }
.quota-text.tone-warn { color: var(--accent); opacity: .75; }
.quota-text.tone-low { color: var(--ink-2); }
.quota-text.tone-unknown { color: var(--ink-3); font-style: italic; }

.reset { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.reset.is-none { color: var(--ink-3); }

.quota-weekly { display: flex; align-items: center; gap: 6px; min-width: 0; }
.weekly-reset { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.weekly-reset.is-none { color: var(--ink-3); }

.login-cell { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.login-type { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; border-radius: 4px; }
.login-type svg { width: 15px; height: 15px; }
.login-type .type-glyph { font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1; }
.login-type.type-email { color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); }
.login-type.type-unknown { color: var(--ink-3); }
.login-state { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; }
.login-state svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.login-state.status-active { color: var(--accent); }
.login-state.status-passkey { color: var(--status-passkey); }
.login-state.status-2fa { color: var(--status-2fa); }
.login-state.status-idle { color: var(--ink-3); }
.login-state.status-banned { color: var(--status-banned); }

.acct-actions { display: flex; align-items: center; gap: 2px; justify-content: flex-end; flex-wrap: wrap; row-gap: 2px; }

.icon-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.icon-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { color: var(--ink); background: var(--panel-2); border-color: var(--line); }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.icon-btn.is-danger:hover { color: var(--accent); background: var(--panel-2); border-color: var(--accent); }
.icon-btn.is-busy svg { animation: spin .8s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

.switch {
  appearance: none;
  position: relative;
  width: 32px;
  height: 16px;
  border-radius: 999px;
  border: 0;
  background: var(--track);
  cursor: pointer;
  padding: 0;
  justify-self: end;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink-3);
  transition: transform .16s ease, background .16s ease;
}
.switch[aria-checked="true"] { background: var(--panel-2); }
.switch[aria-checked="true"]::after { transform: translateX(16px); background: var(--accent); }

.empty {
  padding: 22px 10px;
  color: var(--ink-3);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: 4px; }

.cards { display: grid; gap: 10px; grid-template-columns: 1fr; }
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 10px 12px;
}
.card h2 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-2); }
.card-icon { display: inline-flex; color: var(--ink-3); }
.card-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.field { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
.field:last-of-type { border-bottom: 0; }
.field label { color: var(--ink); }
.field select,
.field input[type="checkbox"],
.field input[type="text"],
.field input[type="password"] {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  padding: 4px 6px;
  min-height: 28px;
}
.field input[type="checkbox"] { width: 18px; height: 18px; min-height: 18px; accent-color: var(--accent); }

.field-stack { display: block; padding-bottom: 8px; }
.field-stack label { display: block; margin-bottom: 4px; color: var(--ink-2); font-size: 11.5px; }
.field-stack input {
  width: 100%;
  min-height: 32px;
  font-family: var(--mono);
  font-size: 11.5px;
}
.field-stack input::placeholder { color: var(--ink-3); font-style: italic; }
.field-stack input:disabled { opacity: .5; cursor: not-allowed; }

.field-stack textarea {
  width: 100%;
  min-height: 160px;
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px;
  resize: vertical;
}
.field-stack textarea::placeholder { color: var(--ink-3); font-style: italic; }

.field-help { margin: 4px 0 0; color: var(--ink-3); font-size: 11px; }

.content-rows { display: flex; flex-direction: column; }
.content-row {
  display: grid;
  grid-template-columns: 1fr 140px 140px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
}
.content-row:last-child { border-bottom: 0; }
.content-row-label { color: var(--ink); }
.content-row select {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  padding: 4px 6px;
  min-height: 28px;
}
.content-status { margin: 8px 0 0; color: var(--ink-3); font-size: 11.5px; }
.content-status.is-good { color: var(--accent); }
.content-status.is-bad { color: var(--ink); font-weight: 700; }
.content-status.is-warn { color: var(--ink-2); }
.content-status.is-busy { color: var(--accent); }

/* Gemini key row overflow: handled by #rows-antigravity rules near end of file. */

.import-report {
  margin: 8px 0 0;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11.5px;
  white-space: pre-line;
}
.import-report:empty { display: none; }
.import-report.is-good { color: var(--accent); }
.import-report.is-bad { color: var(--ink); font-weight: 700; }

.card-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.input-wrap { display: flex; align-items: center; gap: 6px; }
.input-wrap input { flex: 1 1 auto; min-width: 0; }

.tg-status { margin: 8px 0 0; color: var(--ink-3); font-family: var(--mono); font-size: 11.5px; }
.tg-status.is-good { color: var(--accent); }
.tg-status.is-bad { color: var(--ink); font-weight: 700; }
.tg-status.is-warn { color: var(--ink-2); }
.tg-status.is-busy { color: var(--accent); }

.ep-status { margin: 8px 0 0; color: var(--ink-3); font-family: var(--mono); font-size: 11.5px; }
.ep-status.is-good { color: var(--accent); }
.ep-status.is-bad { color: var(--ink); font-weight: 700; }
.ep-status.is-warn { color: var(--ink-2); }
.ep-status.is-busy { color: var(--accent); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; font-family: var(--mono); font-size: 11.5px; word-break: break-all; }

.legend { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.legend li { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-family: var(--mono); font-size: 11.5px; width: fit-content; }
.swatch { width: 22px; height: 6px; border-radius: 3px; flex: none; }
.swatch.tone-ok { background: var(--accent); }
.swatch.tone-warn { background: var(--accent); opacity: .65; }
.swatch.tone-low { background: var(--ink-3); }
.swatch.tone-unknown { background: repeating-linear-gradient(135deg, #2e2e2e 0 5px, #1a1a1a 5px 10px); }

.toasts {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  width: min(360px, calc(100vw - 24px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 3px 1fr var(--tap);
  align-items: start;
  gap: 0 8px;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  font-size: 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .6);
  animation: toast-in .22s cubic-bezier(.2, .8, .3, 1) 1;
}
.toast::before { content: ""; display: block; align-self: stretch; background: var(--accent); }
.toast-body { padding: 8px 0; min-width: 0; }
.toast-title {
  display: block;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1px;
}
.toast-text { display: block; overflow-wrap: anywhere; }
.toast-close {
  align-self: center;
  justify-self: end;
  margin-right: 4px;
  color: var(--ink-3);
}
.toast-close:hover { color: var(--ink); background: var(--panel-2); border-color: var(--line); }

.toast.is-good::before { background: var(--accent); }
.toast.is-good .toast-title { color: var(--accent); }
.toast.is-warn::before { background: var(--ink-2); }
.toast.is-warn .toast-title { color: var(--ink-2); }
.toast.is-warn { background: var(--panel); border-color: var(--line); }
.toast.is-bad {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.toast.is-bad::before { background: var(--ink); }
.toast.is-bad .toast-title { color: var(--accent-ink); }
.toast.is-bad .toast-text { color: var(--accent-ink); }
.toast.is-bad .toast-close { color: var(--accent-ink); }
.toast.is-bad .toast-close:hover { background: rgba(0, 0, 0, .15); border-color: transparent; }
.toast.is-leaving { animation: toast-out .18s ease-in forwards; }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(16px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-out {
  from { opacity: 1; }
  to { opacity: 0; transform: translateX(16px); }
}

.confirm {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 8px;
  padding: 14px 16px;
  max-width: 380px;
}
.confirm::backdrop { background: rgba(0, 0, 0, .6); }
.confirm h2 { margin: 0 0 6px; font-size: 14px; }
.confirm p { margin: 0 0 12px; color: var(--ink-2); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }

.dialog {
  width: 800px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 8px;
  padding: 16px 18px;
}
.dialog::backdrop { background: rgba(0, 0, 0, .6); }
.dialog h2 { margin: 0 0 10px; font-size: 15px; }
.dialog .confirm-actions { margin-top: 12px; }

.btn {
  font: inherit;
  font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  min-height: 32px;
  padding: 0 12px;
  cursor: pointer;
}
.btn-go { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.btn-go:hover { background: #e58200; border-color: #e58200; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--panel-2); border-color: var(--ink-3); }
.btn-danger { background: transparent; border-color: var(--accent); color: var(--accent); font-weight: 700; }
.btn-danger:hover { background: var(--accent); color: var(--accent-ink); }

@media (max-width: 1023px) {
  :root { --tap: 44px; }
  .col-head { display: none; }
  .acct {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "name name switch" "quota quota quota" "weekly weekly weekly" "plan reset login" "actions actions actions";
    gap: 6px 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 8px;
  }
  .acct-name { grid-area: name; }
  .badge-plan { grid-area: plan; justify-self: start; }
  .quota { grid-area: quota; }
  .reset { grid-area: reset; justify-self: start; }
  .login-cell { grid-area: login; justify-self: end; justify-content: flex-end; }
  .acct-actions { grid-area: actions; justify-content: flex-start; gap: 6px; }
  .switch { grid-area: switch; width: 32px; height: 16px; }
  .refresh-countdown { min-width: 0; }

  .quota-weekly { grid-area: weekly; }
}

@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The Gemini panel holds ONE card that is a table, so the two-column rule cut it to half the
     width of the account table right above it — the tabs stopped looking like the same screen. */
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .toast, .toast.is-leaving, .acct.is-fresh, .conn-chip .conn-dot { animation: none !important; transform: none !important; }
  .tip::before { transition: none !important; }
}

/* The import dialog reuses the page's tab styling; it only needs its own spacing and a rule under
   the strip so the two kinds of paste read as two pages of one form, not two unrelated controls. */
.import-tablist { margin: 0 0 12px; border-bottom: 1px solid var(--line); }
.import-tablist [role="tab"] { padding: 6px 10px; min-height: 30px; }
.import-api-links a { color: var(--accent); }

/* Per-model state under one key: what is still usable today, and what Google already refused. */
.gemini-key-models-panel { padding: 4px 0 10px 16px; border-left: 2px solid var(--line); margin: 0 0 4px 12px; }
.gemini-model-row { display: grid; grid-template-columns: minmax(180px, 2fr) 110px minmax(150px, auto); gap: 8px; padding: 3px 0; font-size: 11.5px; color: var(--ink-2); }
.gemini-model-row.is-spent { color: var(--ink-3); }
.gemini-model-row.is-spent span:last-child { color: var(--ink); font-weight: 700; }

.login-state.is-warn { color: var(--accent); }
.login-state.is-bad { color: var(--ink); font-weight: 700; }

/* Hàng key Gemini dùng chung lưới với tab tài khoản, nên nội dung phải nằm gọn trong cột của nó:
   chữ tràn một ô là đè lên cột bên và đẩy cả hàng cao gấp ba.

   `overflow: hidden` chỉ đặt cho ô KHÔNG mang tooltip. `.tip::before` là phần tử tuyệt đối nằm
   BÊN TRONG chính ô đó, nên cắt tràn ở đấy là cắt luôn tooltip — mất đúng chỗ chứa câu đầy đủ. */
#rows-antigravity .acct > * { min-width: 0; }
#rows-antigravity .quota-text,
#rows-antigravity .login-state,
#rows-antigravity .reset { white-space: nowrap; }
#rows-antigravity .acct-name { min-width: 0; flex-wrap: nowrap; }
#rows-antigravity .acct-mail { min-width: 0; white-space: nowrap; }
#rows-antigravity .quota-text { font-family: var(--mono); }

.login-body { min-height: 100vh; display: flex; }
.login-shell { margin: auto; width: 100%; max-width: 340px; padding: 24px 12px; }
.login-card { display: grid; gap: 10px; padding: 18px 16px; }
.login-brand { margin-bottom: 4px; }
.login-field { position: relative; padding: 0; }
.login-card .login-field input[type="text"], .login-card .login-field input[type="password"] { padding-left: 34px; min-height: 36px; }
.login-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); display: inline-flex; pointer-events: none; }
.login-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.login-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; }
.login-submit svg { width: 18px; height: 18px; }
.login-status { margin: 0; min-height: 18px; text-align: center; color: var(--ink-3); font-size: 11.5px; }
.login-status.is-bad { color: var(--accent); font-weight: 700; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.data-table th { color: var(--ink-3); font-weight: 600; font-size: 11px; }
.data-table td.cell-wide { white-space: normal; word-break: break-all; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.chip-row { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.mini-chip { border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; font-size: 11px; color: var(--ink-2); }
.mini-chip.is-off { color: var(--ink-3); text-decoration: line-through; }
.scope-row { display: flex; gap: 12px; flex-wrap: wrap; padding: 4px 0 8px; }
.scope-row label { display: inline-flex; align-items: center; gap: 5px; }
.key-reveal { display: flex; gap: 6px; align-items: center; }
.key-reveal input { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 11.5px; }
.field-stack input[type="number"] {
  width: 100%;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}

.oauth-steps { display: flex; justify-content: center; margin: 0 0 12px; }
#oauth-input { width: 100%; }