/* grokcli-2api Admin — Signal Console design system
Ops console for multi-account Grok proxy: dense telemetry, cool void, cyan signal.
Signature: left signal rail + mono data chips + ambient cyan wash. */
html, body, .g2a-body { background: var(--ant-color-bg-base); color: var(--ant-color-text); }
:root, html[data-theme="dark"], body[data-theme="dark"] {
color-scheme: dark;
/* Palette — Void / Panel / Signal (ops telemetry) */
--g2a-void: #070a10;
--g2a-panel: #0d121b;
--g2a-elevated: #141b27;
--g2a-elevated-2: #1a2332;
--g2a-line: rgba(148, 163, 184, 0.20);
--g2a-line-strong: rgba(148, 163, 184, 0.32);
--g2a-line-soft: rgba(148, 163, 184, 0.10);
--g2a-edge: color-mix(in srgb, var(--g2a-signal) 18%, rgba(148, 163, 184, 0.22));
--g2a-edge-strong: color-mix(in srgb, var(--g2a-signal) 28%, rgba(148, 163, 184, 0.34));
--g2a-edge-inset: rgba(255, 255, 255, 0.045);
--g2a-ink: #e9eef7;
--g2a-ink-2: #a4b0c5;
--g2a-ink-3: #6d7a90;
--g2a-signal: #2dd4bf;
--g2a-signal-hot: #5eead4;
--g2a-signal-dim: rgba(45, 212, 191, 0.13);
--g2a-signal-glow: rgba(45, 212, 191, 0.32);
--g2a-on-signal: #042f2e;
--g2a-on-active: #ecfeff;
--g2a-warn: #fbbf24;
--g2a-danger: #f87171;
--g2a-ok: #34d399;
--g2a-info: #38bdf8;
/* Semantic soft fills (tags / alerts) */
--g2a-ok-soft: rgba(52, 211, 153, 0.12);
--g2a-ok-border: rgba(52, 211, 153, 0.36);
--g2a-ok-text: #a7f3d0;
--g2a-warn-soft: rgba(251, 191, 36, 0.12);
--g2a-warn-border: rgba(251, 191, 36, 0.36);
--g2a-warn-text: #fde68a;
--g2a-danger-soft: rgba(248, 113, 113, 0.12);
--g2a-danger-border: rgba(248, 113, 113, 0.36);
--g2a-danger-text: #fecaca;
--g2a-signal-soft: rgba(45, 212, 191, 0.12);
--g2a-signal-border: rgba(45, 212, 191, 0.34);
--g2a-signal-text: #99f6e4;
/* Primary CTA gradient */
--g2a-btn-primary-bg: linear-gradient(180deg, #5eead4 0%, #2dd4bf 52%, #14b8a6 100%);
--g2a-btn-primary-bg-hover: linear-gradient(180deg, #99f6e4 0%, #5eead4 48%, #2dd4bf 100%);
--g2a-btn-primary-shadow: 0 6px 18px rgba(45, 212, 191, 0.22), inset 0 1px 0 rgba(255,255,255,.25);
/* Ant-compatible aliases */
--ant-color-bg-base: var(--g2a-void);
--ant-color-bg-container: var(--g2a-panel);
--ant-color-bg-elevated: var(--g2a-elevated);
--ant-color-bg-layout: #0a0e15;
--ant-color-border: var(--g2a-line);
--ant-color-border-secondary: rgba(148, 163, 184, 0.14);
--ant-color-text: var(--g2a-ink);
--ant-color-text-secondary: var(--g2a-ink-2);
--ant-color-text-tertiary: var(--g2a-ink-3);
--ant-color-primary: var(--g2a-signal);
--ant-color-primary-hover: var(--g2a-signal-hot);
--ant-color-success: var(--g2a-ok);
--ant-color-warning: var(--g2a-warn);
--ant-color-error: var(--g2a-danger);
--ant-color-info: var(--g2a-info);
--ant-border-radius: 12px;
--ant-box-shadow:
0 0 0 1px rgba(255,255,255,.05),
0 12px 40px rgba(0,0,0,.45),
0 2px 8px rgba(0,0,0,.35);
--g2a-surface-shadow:
0 0 0 1px color-mix(in srgb, var(--g2a-signal) 10%, rgba(148, 163, 184, 0.16)),
0 1px 0 var(--g2a-edge-inset) inset,
0 8px 24px rgba(0,0,0,.22);
--sider-w: 248px;
--sider-bg: linear-gradient(180deg, #0a1019 0%, #070b12 100%);
--sider-border: rgba(45, 212, 191, 0.16);
--sider-text: rgba(232, 237, 245, 0.74);
--sider-text-strong: #f4f7fb;
--sider-text-muted: rgba(168, 179, 199, 0.55);
--sider-hover-bg: rgba(45, 212, 191, 0.08);
--table-bg: #0c121b;
--table-head-bg: rgba(45, 212, 191, 0.045);
--code-bg: #090e16;
--code-fg: #d1fae5;
--mono-chip-bg: rgba(45, 212, 191, 0.11);
--mono-chip-text: #99f6e4;
--toast-bg: #121a26;
--input-bg: #0a1018;
/* Type — Sora + IBM Plex Mono */
--font: "Sora", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--mono: "IBM Plex Mono", "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
--text-xs: 11px;
--text-sm: 12.5px;
--text-base: 13.5px;
--text-md: 14.5px;
--text-lg: 16px;
--text-xl: 20px;
--text-2xl: 23px;
--fw-normal: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--lh-tight: 1.25;
--lh-body: 1.55;
--tracking-tight: -0.025em;
--tracking-kicker: 0.12em;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--space-page-x: 28px;
--header-blur: blur(14px) saturate(1.2);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-theme="light"], body[data-theme="light"] {
--code-panel-bg: #f1f5f9;
--code-panel-border: #c5d0de;
--code-panel-text: #1e293b;
color-scheme: light;
/* Cool paper + teal signal — not gray-on-white template */
--g2a-void: #eef3f8;
--g2a-panel: #ffffff;
--g2a-elevated: #f7fafc;
--g2a-elevated-2: #eef2f7;
--g2a-line: rgba(15, 23, 42, 0.14);
--g2a-line-strong: rgba(15, 23, 42, 0.22);
--g2a-line-soft: rgba(15, 23, 42, 0.07);
--g2a-edge: color-mix(in srgb, var(--g2a-signal) 16%, rgba(15, 23, 42, 0.16));
--g2a-edge-strong: color-mix(in srgb, var(--g2a-signal) 24%, rgba(15, 23, 42, 0.24));
--g2a-edge-inset: rgba(255, 255, 255, 0.85);
--g2a-ink: #0b1220;
--g2a-ink-2: #3d4b63;
--g2a-ink-3: #64748b;
--g2a-signal: #0f766e;
--g2a-signal-hot: #0d9488;
--g2a-signal-dim: rgba(15, 118, 110, 0.1);
--g2a-signal-glow: rgba(15, 118, 110, 0.2);
--g2a-on-signal: #f0fdfa;
--g2a-on-active: #0f766e;
--g2a-warn: #b45309;
--g2a-danger: #dc2626;
--g2a-ok: #047857;
--g2a-info: #0369a1;
--g2a-ok-soft: rgba(4, 120, 87, 0.1);
--g2a-ok-border: rgba(4, 120, 87, 0.28);
--g2a-ok-text: #047857;
--g2a-warn-soft: rgba(180, 83, 9, 0.1);
--g2a-warn-border: rgba(180, 83, 9, 0.28);
--g2a-warn-text: #b45309;
--g2a-danger-soft: rgba(220, 38, 38, 0.08);
--g2a-danger-border: rgba(220, 38, 38, 0.28);
--g2a-danger-text: #b91c1c;
--g2a-signal-soft: rgba(15, 118, 110, 0.1);
--g2a-signal-border: rgba(15, 118, 110, 0.28);
--g2a-signal-text: #0f766e;
--g2a-btn-primary-bg: linear-gradient(180deg, #14b8a6 0%, #0f766e 55%, #0d5f59 100%);
--g2a-btn-primary-bg-hover: linear-gradient(180deg, #2dd4bf 0%, #0d9488 50%, #0f766e 100%);
--g2a-btn-primary-shadow: 0 6px 16px rgba(15, 118, 110, 0.22), inset 0 1px 0 rgba(255,255,255,.2);
--ant-color-bg-base: var(--g2a-void);
--ant-color-bg-container: var(--g2a-panel);
--ant-color-bg-elevated: var(--g2a-elevated);
--ant-color-bg-layout: #e4ebf3;
--ant-color-border: var(--g2a-line);
--ant-color-border-secondary: rgba(15, 23, 42, 0.10);
--ant-color-text: var(--g2a-ink);
--ant-color-text-secondary: var(--g2a-ink-2);
--ant-color-text-tertiary: var(--g2a-ink-3);
--ant-color-primary: var(--g2a-signal);
--ant-color-primary-hover: var(--g2a-signal-hot);
--ant-color-success: var(--g2a-ok);
--ant-color-warning: var(--g2a-warn);
--ant-color-error: var(--g2a-danger);
--ant-color-info: var(--g2a-info);
--ant-box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07), 0 2px 6px rgba(15, 23, 42, 0.05);
--g2a-surface-shadow:
0 0 0 1px color-mix(in srgb, var(--g2a-signal) 12%, rgba(15, 23, 42, 0.12)),
0 1px 0 var(--g2a-edge-inset) inset,
0 8px 22px rgba(15, 23, 42, 0.06);
/* Light sider — cool paper chrome, not inverted dark rail */
--sider-bg: linear-gradient(180deg, #f8fbfd 0%, #eef3f8 100%);
--sider-border: rgba(15, 23, 42, 0.14);
--sider-text: rgba(15, 23, 42, 0.72);
--sider-text-strong: #0b1220;
--sider-text-muted: rgba(15, 23, 42, 0.48);
--sider-hover-bg: rgba(15, 118, 110, 0.09);
--table-bg: #fff;
--table-head-bg: #f3f7fb;
--code-bg: #0f172a;
--code-fg: #d1fae5;
--mono-chip-bg: #ccfbf1;
--mono-chip-text: #0f766e;
--toast-bg: #ffffff;
--input-bg: #ffffff;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
.g2a-body {
margin: 0;
font-family: var(--font);
font-size: var(--text-base);
font-weight: var(--fw-normal);
line-height: var(--lh-body);
color: var(--ant-color-text);
font-feature-settings: "ss01" on, "cv11" on;
background:
radial-gradient(1000px 520px at 12% -8%, rgba(45, 212, 191, 0.1), transparent 55%),
radial-gradient(800px 420px at 92% 0%, rgba(56, 189, 248, 0.07), transparent 50%),
radial-gradient(600px 360px at 70% 110%, rgba(45, 212, 191, 0.04), transparent 55%),
linear-gradient(180deg, rgba(255,255,255,0.015), transparent 120px),
var(--ant-color-bg-base);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
letter-spacing: -0.01em;
}
/* Fine grid texture — ops console atmosphere without noise images */
.g2a-body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.35;
background-image:
linear-gradient(rgba(148, 163, 184, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(148, 163, 184, 0.035) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 75%);
}
.g2a-layout,
.g2a-login-shell,
.g2a-login-theme-wrap,
.g2a-message,
#toast {
position: relative;
z-index: 1;
}
html[data-theme="light"] .g2a-body {
background:
radial-gradient(900px 480px at 8% -10%, rgba(13, 148, 136, 0.09), transparent 55%),
radial-gradient(700px 360px at 100% 0%, rgba(2, 132, 199, 0.06), transparent 50%),
linear-gradient(180deg, rgba(255,255,255,0.6), transparent 100px),
var(--ant-color-bg-base);
}
html[data-theme="light"] .g2a-body::before {
opacity: 0.45;
background-image:
linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
}
::selection {
background: color-mix(in srgb, var(--g2a-signal) 35%, transparent);
color: var(--ant-color-text);
}
a { color: var(--ant-color-primary); text-decoration: none; }
a:hover { color: var(--ant-color-primary-hover); }
.hidden, .d-none { display: none !important; }
.g2a-muted, .muted { color: var(--ant-color-text-tertiary); font-size: 13px; }
.g2a-spacer { flex: 1; }
/* ── layout ── */
.g2a-layout {
display: flex;
min-height: 100vh;
background: transparent;
}
.g2a-sider {
width: var(--sider-w);
flex: 0 0 var(--sider-w);
position: sticky;
top: 0;
height: 100vh;
background: var(--sider-bg);
display: flex;
flex-direction: column;
border-right: 1px solid var(--sider-border);
z-index: 20;
box-shadow: inset -1px 0 0 color-mix(in srgb, var(--g2a-signal) 12%, transparent);
}
.g2a-brand {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 16px 14px;
}
.g2a-logo {
width: 38px;
height: 38px;
border-radius: 11px;
display: grid;
place-items: center;
font-weight: 800;
font-size: 15px;
color: var(--g2a-on-signal);
background:
linear-gradient(145deg, #5eead4 0%, #2dd4bf 42%, #0ea5e9 100%);
box-shadow:
0 0 0 1px rgba(255,255,255,.12),
0 0 0 4px rgba(45, 212, 191, 0.08),
0 8px 24px rgba(45, 212, 191, 0.28);
letter-spacing: -0.04em;
position: relative;
flex: 0 0 auto;
}
.g2a-logo::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 13px;
border: 1px solid rgba(45, 212, 191, 0.35);
opacity: 0.55;
pointer-events: none;
animation: g2a-logo-ring 3.6s ease-in-out infinite;
}
@keyframes g2a-logo-ring {
0%, 100% { opacity: 0.35; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.04); }
}
.g2a-brand-title {
font-weight: var(--fw-semibold);
font-size: 14px;
color: var(--sider-text-strong);
letter-spacing: -0.02em;
}
.g2a-brand-sub {
font-size: 11.5px;
color: var(--sider-text-muted);
margin-top: 3px;
font-family: var(--mono);
letter-spacing: 0.02em;
}
.g2a-menu {
display: flex;
flex-direction: column;
gap: 3px;
padding: 6px 10px 12px;
flex: 1;
overflow: auto;
}
.g2a-menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
color: var(--sider-text);
font-size: 13.5px;
font-weight: 500;
transition: background .15s ease, color .15s ease, box-shadow .15s ease;
text-decoration: none !important;
border: 1px solid transparent;
position: relative;
}
.g2a-menu-item:hover {
color: var(--sider-text-strong);
background: var(--sider-hover-bg);
}
.g2a-menu-item.is-active {
color: var(--g2a-on-active);
background: linear-gradient(90deg, rgba(45, 212, 191, 0.22), rgba(45, 212, 191, 0.08));
border-color: rgba(45, 212, 191, 0.22);
box-shadow: inset 3px 0 0 var(--g2a-signal), 0 6px 18px rgba(45, 212, 191, 0.12);
}
.g2a-menu-ico {
width: 18px;
text-align: center;
opacity: .92;
font-size: 13px;
}
.g2a-sider-foot {
padding: 12px;
border-top: 1px solid rgba(255,255,255,.07);
display: flex;
flex-direction: column;
gap: 6px;
}
.g2a-sider-foot a {
color: var(--sider-text-muted);
font-size: 12px;
padding: 4px 6px;
text-decoration: none !important;
font-family: var(--mono);
}
.g2a-sider-foot a:hover { color: var(--sider-text-strong); }
.g2a-main {
flex: 1;
min-width: 0;
max-width: 100%;
display: flex;
flex-direction: column;
}
.g2a-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
padding: 22px var(--space-page-x) 12px;
flex-wrap: wrap;
position: sticky;
top: 0;
z-index: 12;
background: color-mix(in srgb, var(--ant-color-bg-base) 78%, transparent);
backdrop-filter: var(--header-blur);
-webkit-backdrop-filter: var(--header-blur);
border-bottom: 1px solid color-mix(in srgb, var(--g2a-signal) 16%, var(--g2a-line));
box-shadow: 0 1px 0 rgba(255,255,255,0.02);
}
html[data-theme="light"] .g2a-header {
border-bottom-color: rgba(15, 23, 42, 0.12);
box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 8px 20px rgba(15, 23, 42, 0.04);
}
.g2a-header h1 {
margin: 0;
font-size: var(--text-2xl);
font-weight: var(--fw-semibold);
letter-spacing: -0.03em;
color: var(--ant-color-text);
}
.g2a-header p {
margin: 6px 0 0;
color: var(--ant-color-text-tertiary);
font-size: 13px;
max-width: 62ch;
line-height: 1.5;
}
.g2a-header-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.g2a-content {
padding: 14px var(--space-page-x) 48px;
max-width: 1320px;
width: 100%;
min-width: 0;
overflow-x: clip;
animation: g2a-content-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes g2a-content-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
/* ── cards ── */
.g2a-card, .card {
background:
linear-gradient(180deg, color-mix(in srgb, var(--g2a-signal) 4%, var(--ant-color-bg-container)), var(--ant-color-bg-container) 42%);
border: 1px solid var(--g2a-edge, var(--ant-color-border));
border-radius: var(--radius-lg);
padding: 18px 18px 16px;
margin-bottom: 14px;
box-shadow: var(--g2a-surface-shadow,
0 0 0 1px color-mix(in srgb, var(--g2a-signal) 8%, transparent),
0 1px 0 rgba(255,255,255,.04) inset,
0 8px 22px rgba(0,0,0,.18));
position: relative;
}
.g2a-card::before, .card::before {
content: "";
position: absolute;
left: 0; top: 14px; bottom: 14px;
width: 3px;
border-radius: 0 3px 3px 0;
background: linear-gradient(180deg, var(--g2a-signal), transparent 90%);
opacity: .55;
}
html[data-theme="light"] .g2a-card,
html[data-theme="light"] .card {
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.g2a-card-head, .card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.g2a-card-head h3, .card-head h3, .g2a-card h3 {
margin: 0;
font-size: 14.5px;
font-weight: var(--fw-semibold);
letter-spacing: -0.02em;
}
.g2a-card-head p, .card-head p {
margin: 5px 0 0;
color: var(--ant-color-text-tertiary);
font-size: 12.5px;
line-height: 1.55;
max-width: 72ch;
}
.g2a-subcard {
background: color-mix(in srgb, var(--ant-color-bg-elevated) 88%, var(--g2a-signal) 4%);
border: 1px solid var(--g2a-edge, var(--ant-color-border));
border-radius: var(--radius-md);
padding: 14px;
margin: 12px 0;
}
/* ── stats ── */
.g2a-stat-grid, #stats-grid, .grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.g2a-grid-2, .grid-2 {
display: grid;
gap: 14px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stat, .g2a-stat {
background: color-mix(in srgb, var(--ant-color-bg-elevated) 92%, transparent);
border: 1px solid var(--ant-color-border);
border-radius: var(--radius-md);
padding: 14px;
min-height: 92px;
transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
position: relative;
overflow: hidden;
}
.stat::after, .g2a-stat::after {
content: "";
position: absolute;
inset: auto -20% -40% auto;
width: 90px; height: 90px;
background: radial-gradient(circle, var(--g2a-signal-dim), transparent 70%);
pointer-events: none;
}
.stat:hover, .g2a-stat:hover {
border-color: color-mix(in srgb, var(--g2a-signal) 45%, var(--ant-color-border));
box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.08), 0 10px 28px rgba(0,0,0,.18);
transform: translateY(-1px);
}
.g2a-stat-card.is-ok::before,
.stat.is-ok::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: var(--g2a-ok);
opacity: 0.7;
}
.g2a-stat-card.is-warn::before,
.stat.is-warn::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: var(--g2a-warn);
opacity: 0.75;
}
.g2a-stat-card.is-bad::before,
.stat.is-bad::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: var(--g2a-danger);
opacity: 0.8;
}
.stat .k, .stat .label, .g2a-stat .k {
color: var(--ant-color-text-tertiary);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.stat .v, .stat .value, .g2a-stat .v {
margin-top: 10px;
font-size: 20px;
font-weight: var(--fw-semibold);
letter-spacing: -0.03em;
word-break: break-word;
line-height: 1.25;
font-variant-numeric: tabular-nums;
}
.stat .v.ok, .stat .value.ok { color: var(--g2a-ok); }
.stat .v.warn, .stat .value.warn { color: var(--g2a-warn); }
.stat .v.bad, .stat .value.bad { color: var(--g2a-danger); }
/* ── forms ── */
.g2a-label, label {
display: block;
margin: 0 0 6px;
color: var(--ant-color-text-secondary);
font-size: 12.5px;
font-weight: 500;
}
.g2a-input, input, select, textarea {
width: 100%;
background: var(--input-bg);
border: 1px solid var(--g2a-edge, var(--ant-color-border));
border-radius: var(--radius-sm);
color: var(--ant-color-text);
padding: 8px 12px;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
font-size: 13.5px;
font-family: var(--font);
}
input:focus, select:focus, textarea:focus, .g2a-input:focus {
border-color: color-mix(in srgb, var(--g2a-signal) 70%, var(--ant-color-border));
box-shadow: 0 0 0 3px var(--g2a-signal-dim);
}
textarea {
min-height: 90px;
resize: vertical;
font-family: var(--mono);
font-size: 12.5px;
}
.g2a-form-row, .row {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: flex-end;
}
.g2a-form-grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.g2a-form-grid .g2a-field-span2 { grid-column: 1 / -1; }
.g2a-form-grid textarea#reg-proxy {
width: 100%;
min-height: 72px;
font-family: var(--mono);
font-size: 12px;
line-height: 1.45;
resize: vertical;
}
.g2a-field { flex: 1 1 180px; min-width: 0; }
.g2a-field-grow { flex: 1 1 100%; }
.g2a-field-action { flex: 0 0 auto; }
.g2a-check {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ant-color-text);
font-size: 13px;
margin: 0;
}
.g2a-check input { width: auto; }
/* ── buttons ── */
.g2a-btn, .btn {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 34px;
padding: 4px 14px;
border-radius: 10px;
border: 1px solid var(--g2a-edge, var(--ant-color-border));
background: color-mix(in srgb, var(--ant-color-bg-elevated) 92%, transparent);
color: var(--ant-color-text);
font-size: 13.5px;
font-weight: var(--fw-medium);
font-family: var(--font);
cursor: pointer;
transition: all .15s ease;
white-space: nowrap;
text-decoration: none !important;
line-height: 1.2;
}
.g2a-btn:hover, .btn:hover {
color: var(--g2a-signal-hot);
border-color: color-mix(in srgb, var(--g2a-signal) 45%, var(--ant-color-border));
background: var(--g2a-signal-dim);
}
.g2a-btn-primary, .btn.primary, .btn-primary {
background: var(--g2a-btn-primary-bg);
border-color: transparent;
color: var(--g2a-on-signal) !important;
box-shadow: var(--g2a-btn-primary-shadow);
font-weight: var(--fw-semibold);
}
.g2a-btn-primary:hover, .btn.primary:hover, .btn-primary:hover {
background: var(--g2a-btn-primary-bg-hover);
border-color: transparent;
color: var(--g2a-on-signal) !important;
filter: brightness(1.03);
}
.g2a-btn-default, .btn.ghost, .btn-outline-secondary {
background: transparent;
}
.g2a-btn-danger, .btn.danger, .btn-outline-danger {
color: var(--g2a-danger);
border-color: color-mix(in srgb, var(--g2a-danger) 45%, var(--ant-color-border));
background: rgba(248, 113, 113, 0.06);
}
.g2a-btn-danger:hover, .btn.danger:hover {
background: rgba(248, 113, 113, 0.12);
color: var(--g2a-danger-text);
}
.g2a-btn-sm, .btn.sm, .btn-sm { height: 30px; padding: 0 11px; font-size: 12.5px; }
.g2a-btn-block { width: 100%; }
.g2a-btn:disabled, .btn:disabled, .g2a-btn.busy, .btn.busy {
opacity: .45;
cursor: not-allowed;
pointer-events: none;
}
.g2a-actions, .actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.g2a-link-btn {
background: none;
border: 0;
color: var(--ant-color-text-tertiary);
cursor: pointer;
font-size: 13px;
margin-top: 10px;
padding: 0;
font-family: var(--font);
}
.g2a-link-btn:hover { color: var(--ant-color-primary); }
/* ── table ── */
.g2a-table-wrap, .table-responsive {
border: 1px solid var(--g2a-edge-strong, var(--ant-color-border));
border-radius: var(--radius-md);
overflow-x: auto;
max-width: 100%;
width: 100%;
min-width: 0;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
/* Keep wide tables from expanding the page/card — scroll inside wrap only */
contain: inline-size;
background: var(--table-bg);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--g2a-signal) 6%, transparent),
0 6px 18px rgba(0,0,0,.12);
}
.g2a-table, table {
width: 100%;
max-width: none;
border-collapse: collapse;
font-size: 13px;
}
.g2a-table th, .g2a-table td, table th, table td {
padding: 11px 12px;
border-bottom: 1px solid color-mix(in srgb, var(--g2a-line-strong) 70%, var(--ant-color-border));
text-align: left;
vertical-align: top;
/* Default: allow wrap so cells don't force page overflow */
word-break: break-word;
overflow-wrap: anywhere;
}
.g2a-table th, table th {
background: var(--table-head-bg);
color: var(--ant-color-text-secondary);
font-weight: 600;
font-size: 11.5px;
letter-spacing: 0.04em;
text-transform: uppercase;
position: sticky;
top: 0;
z-index: 1;
}
.g2a-table tr:hover td {
background: color-mix(in srgb, var(--g2a-signal) 4%, transparent);
}
.g2a-table tr:last-child td { border-bottom: 0; }
/* ── toolbar / pager ── */
.g2a-toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin: 0 0 10px;
}
.g2a-toolbar input[type="text"],
.g2a-toolbar input:not([type]),
.g2a-toolbar .g2a-input {
max-width: 280px;
}
.g2a-pager {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-top: 12px;
}
.g2a-sort-wrap {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
}
.g2a-sort-label {
font-size: 12px;
color: var(--ant-color-text-tertiary);
}
.g2a-sort-select {
width: auto;
min-width: 110px;
height: 34px;
}
/* ── tags / pills ── */
.g2a-tag, .pill {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 9px;
border-radius: 999px;
font-size: 12px;
font-weight: var(--fw-medium);
line-height: 20px;
border: 1px solid var(--g2a-edge, var(--ant-color-border));
background: rgba(255,255,255,.03);
color: var(--ant-color-text-secondary);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.g2a-tag.ok, .pill.ok, .pill.live, .text-bg-success {
color: var(--g2a-ok-text);
background: var(--g2a-ok-soft);
border-color: var(--g2a-ok-border);
}
.g2a-tag.warn, .pill.warn, .text-bg-warning {
color: var(--g2a-warn-text);
background: var(--g2a-warn-soft);
border-color: var(--g2a-warn-border);
}
.g2a-tag.bad, .pill.bad, .text-bg-danger {
color: var(--g2a-danger-text);
background: var(--g2a-danger-soft);
border-color: var(--g2a-danger-border);
}
.g2a-tag.blue, .text-bg-secondary {
color: var(--g2a-signal-text);
background: var(--g2a-signal-soft);
border-color: var(--g2a-signal-border);
}
/* ── code / logs ── */
.g2a-code, .g2a-log, .codebox, pre.code,
#device-log, #reg-log, #probe-result, #sso-result,
#guide-curl, #guide-py, #guide-anthropic, #guide-linux {
background:
linear-gradient(180deg, rgba(45, 212, 191, 0.06), transparent 40%),
var(--code-bg);
border: 1px solid var(--ant-color-border);
border-radius: var(--radius-md);
padding: 12px 14px;
overflow: auto;
max-height: 260px;
font-family: var(--mono);
font-size: 12px;
line-height: 1.65;
color: var(--code-fg);
white-space: pre-wrap;
box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.g2a-log.is-empty,
.g2a-code.is-empty,
#device-log.hidden,
#reg-log.hidden,
#probe-result.hidden,
#sso-result.hidden,
#reg-session-box.hidden {
display: none !important;
}
html[data-theme="light"] .g2a-code,
html[data-theme="light"] .g2a-log,
html[data-theme="light"] .codebox,
html[data-theme="light"] pre.code,
html[data-theme="light"] #device-log,
html[data-theme="light"] #reg-log,
html[data-theme="light"] #probe-result,
html[data-theme="light"] #sso-result,
html[data-theme="light"] #guide-curl,
html[data-theme="light"] #guide-py,
html[data-theme="light"] #guide-anthropic,
html[data-theme="light"] #guide-linux {
background: var(--code-panel-bg, #f4f7fb);
border-color: var(--code-panel-border, #d7e0ec);
color: var(--code-panel-text, #334155);
box-shadow: none;
}
.g2a-code-inline, code.g2a-code-inline,
#new-key-value, #device-code, #reg-email, #guide-base, #guide-model {
font-family: var(--mono);
font-size: 12px;
background: var(--mono-chip-bg);
border: 1px solid color-mix(in srgb, var(--g2a-signal) 22%, var(--ant-color-border));
border-radius: 6px;
padding: 2px 8px;
color: var(--mono-chip-text);
}
.g2a-kv {
display: flex;
gap: 12px;
align-items: center;
margin: 6px 0;
font-size: 13px;
flex-wrap: wrap;
}
.g2a-kv > span:first-child {
color: var(--ant-color-text-tertiary);
min-width: 72px;
font-size: 12px;
}
.g2a-empty, .empty-state {
text-align: center;
padding: 40px 16px;
color: var(--ant-color-text-tertiary);
border: 1px dashed color-mix(in srgb, var(--g2a-signal) 22%, var(--ant-color-border));
border-radius: var(--radius-md);
background:
radial-gradient(circle at 50% 0%, var(--g2a-signal-dim), transparent 60%),
color-mix(in srgb, var(--ant-color-bg-elevated) 70%, transparent);
font-size: 13px;
line-height: 1.55;
}
.g2a-empty::before, .empty-state::before {
content: "◈";
display: block;
margin: 0 auto 10px;
font-size: 18px;
color: var(--g2a-signal);
opacity: 0.55;
letter-spacing: 0;
}
.g2a-alert {
border-radius: 10px;
padding: 12px 14px;
border: 1px solid var(--ant-color-border);
}
.g2a-alert-success {
background: rgba(52, 211, 153, 0.1);
border-color: rgba(52, 211, 153, 0.3);
}
/* ── toast ── */
.g2a-message, #toast, .toast {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 1100;
min-width: 220px;
max-width: min(420px, calc(100vw - 24px));
background: color-mix(in srgb, var(--toast-bg) 92%, transparent);
border: 1px solid var(--ant-color-border);
border-radius: 12px;
box-shadow:
0 0 0 1px rgba(255,255,255,.03),
0 16px 40px rgba(0,0,0,.4),
0 0 24px rgba(45, 212, 191, 0.06);
color: var(--ant-color-text);
padding: 12px 14px;
font-size: 13px;
opacity: 0;
transform: translateY(10px) scale(0.98);
pointer-events: none;
transition: opacity .22s ease, transform .22s cubic-bezier(0.16, 1, 0.3, 1);
backdrop-filter: blur(14px) saturate(1.15);
-webkit-backdrop-filter: blur(14px) saturate(1.15);
}
.g2a-message.show, #toast.show, .toast.show {
opacity: 1;
transform: none;
pointer-events: auto;
}
.g2a-message.ok, #toast.text-bg-success, .toast.ok {
border-color: rgba(52, 211, 153, 0.5);
box-shadow:
0 0 0 1px rgba(52, 211, 153, 0.12),
0 16px 40px rgba(0,0,0,.4),
0 0 28px rgba(52, 211, 153, 0.12);
}
.g2a-message.err, #toast.text-bg-danger, .toast.err {
border-color: rgba(248, 113, 113, 0.55);
color: var(--g2a-danger-text);
box-shadow:
0 0 0 1px rgba(248, 113, 113, 0.12),
0 16px 40px rgba(0,0,0,.4);
}
#toast .btn-close, #toast .toast-body { all: unset; }
#toast-body { display: block; }
/* ── login ── */
.g2a-center {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
background:
radial-gradient(700px 360px at 50% 0%, rgba(45, 212, 191, 0.16), transparent 60%),
radial-gradient(500px 280px at 80% 100%, rgba(56, 189, 248, 0.08), transparent 55%),
var(--ant-color-bg-base);
}
.g2a-login-card {
width: min(400px, 100%);
padding: 30px 28px !important;
border-radius: 18px !important;
}
.g2a-login-card::before { opacity: .75; }
.g2a-login-card h1 {
margin: 0 0 8px;
font-size: 24px;
font-weight: var(--fw-semibold);
letter-spacing: -0.03em;
}
.g2a-login-body { min-height: 100vh; }
.g2a-login-screen {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
background:
radial-gradient(800px 420px at 20% 0%, rgba(45, 212, 191, 0.14), transparent 55%),
radial-gradient(600px 320px at 90% 80%, rgba(14, 165, 233, 0.08), transparent 50%),
var(--ant-color-bg-base);
}
.g2a-login-panel {
width: min(420px, 100%);
padding: 28px !important;
}
.g2a-login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.g2a-logo-lg {
width: 48px; height: 48px; border-radius: 14px;
display: grid; place-items: center;
font-weight: 800; color: var(--g2a-on-signal); font-size: 18px;
background: linear-gradient(145deg, #5eead4, #2dd4bf 50%, #0ea5e9);
box-shadow: 0 10px 28px rgba(45, 212, 191, 0.3);
}
.g2a-login-title {
margin: 0;
font-size: 22px;
font-weight: var(--fw-semibold);
letter-spacing: -0.03em;
}
.g2a-login-desc { margin: 0 0 18px !important; font-size: 13px; line-height: 1.55; }
.g2a-login-form .g2a-label { margin-top: 0; }
.g2a-login-form { margin-top: 4px; }
.g2a-login-foot {
margin-top: 16px;
display: flex;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.g2a-login-meta {
font-size: 12px;
color: var(--ant-color-text-tertiary);
font-family: var(--mono);
}
.g2a-login-status { font-size: 12.5px; }
/* ── mobile nav ── */
.g2a-mobile-nav, .mobile-nav {
display: none;
gap: 8px;
overflow-x: auto;
padding: 0 16px 8px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
position: relative;
z-index: 5;
flex: 0 0 auto;
max-width: 100%;
}
.g2a-mobile-nav::-webkit-scrollbar, .mobile-nav::-webkit-scrollbar { display: none; }
/* ── theme toggle ── */
.g2a-theme-toggle {
appearance: none;
display: inline-flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 11px;
border-radius: 999px;
border: 1px solid var(--ant-color-border);
background: color-mix(in srgb, var(--ant-color-bg-elevated) 90%, transparent);
color: var(--ant-color-text-secondary);
font-size: 12.5px;
font-family: var(--font);
cursor: pointer;
transition: .15s ease;
}
.g2a-theme-toggle:hover {
border-color: color-mix(in srgb, var(--g2a-signal) 40%, var(--ant-color-border));
color: var(--g2a-signal-hot);
}
.g2a-theme-toggle .ico { font-size: 13px; }
/* ── focus a11y ── */
:focus-visible {
outline: 2px solid color-mix(in srgb, var(--g2a-signal) 70%, white);
outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }
/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ── responsive ── */
@media (max-width: 960px) {
.g2a-sider { display: none; }
.g2a-mobile-nav, .mobile-nav { display: flex; }
.g2a-header, .g2a-content { padding-left: 16px; padding-right: 16px; }
.g2a-grid-2, .grid-2 { grid-template-columns: 1fr; }
.g2a-header { position: static; backdrop-filter: none; }
}
@media (max-width: 640px) {
.g2a-header h1 { font-size: 20px; }
.g2a-card, .card { padding: 14px; }
.g2a-card::before, .card::before { top: 12px; bottom: 12px; }
}
/* page-size controls */
.g2a-page-size-label { margin-left: 4px; }
.g2a-page-size-select {
width: auto;
min-width: 72px;
height: 34px;
}
.g2a-page-size-suffix { margin-left: 2px; }
/* light overrides for subcards */
html[data-theme="light"] .g2a-subcard {
background: #fff;
}
html[data-theme="light"] .stat,
html[data-theme="light"] .g2a-stat {
background: #fff;
}
/* disabled buttons */
button[disabled] { opacity: .55; cursor: not-allowed; }
/* Account expiry display */
.g2a-expiry {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
min-width: 0;
}
.g2a-expiry-abs { color: var(--ant-color-text-secondary); font-size: 12px; white-space: nowrap; }
.g2a-expiry-rem { line-height: 1.2; white-space: nowrap; }
.g2a-expiry-pill { font-weight: 600; }
html[data-theme="light"] .g2a-expiry-abs { color: #64748b; }
button[disabled] { opacity: .55; cursor: not-allowed; }
/* Device login progressive UI */
#device-session[data-device-idle="1"] #device-result { display: none !important; }
#device-session[data-device-idle="0"] #device-idle-hint { display: none !important; }
#device-session .g2a-actions .g2a-btn[disabled] { opacity: .5; }
.device-result {
margin-top: 8px;
padding: 12px;
border-radius: 10px;
border: 1px solid var(--ant-color-border);
background: color-mix(in srgb, var(--ant-color-bg-container) 90%, var(--ant-color-primary) 10%);
}
#device-code {
font-size: 16px !important;
font-weight: 700;
letter-spacing: .08em;
padding: 4px 10px !important;
}
/* Import controls alignment (SSO / JSON) */
.g2a-import-controls {
align-items: flex-end;
gap: 12px 14px;
}
.g2a-import-controls .g2a-field {
margin: 0;
min-width: 160px;
}
.g2a-import-controls .g2a-field-sm {
width: 120px;
min-width: 110px;
flex: 0 0 120px;
}
.g2a-import-controls .g2a-field-check {
min-width: 120px;
flex: 0 0 auto;
display: flex;
align-items: center;
min-height: 36px;
padding-bottom: 2px;
}
.g2a-import-controls .g2a-field-check .g2a-check {
margin: 0;
height: 36px;
display: inline-flex;
align-items: center;
}
.g2a-import-controls .g2a-field-action {
min-width: auto;
display: flex;
align-items: flex-end;
}
.g2a-import-controls .g2a-field-action .g2a-actions {
margin: 0;
}
.g2a-import-controls input[type="number"] {
width: 100%;
}
/* SSO import progress bar */
.g2a-sso-progress {
margin: 12px 0 8px;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid var(--ant-color-border, rgba(255,255,255,.08));
background: color-mix(in srgb, var(--ant-color-bg-container) 92%, var(--ant-color-primary) 8%);
}
.g2a-sso-progress.hidden,
.g2a-sso-progress[hidden] {
display: none !important;
}
.g2a-sso-progress-meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 8px;
font-size: 13px;
}
.g2a-sso-progress-track {
width: 100%;
height: 10px;
border-radius: 999px;
overflow: hidden;
background: color-mix(in srgb, var(--ant-color-fill-secondary, #2a2d3a) 80%, transparent);
}
.g2a-sso-progress-fill {
height: 100%;
width: 0%;
border-radius: 999px;
background: linear-gradient(
90deg,
var(--ant-color-primary, var(--g2a-signal, #2dd4bf)),
color-mix(in srgb, var(--ant-color-primary, var(--g2a-signal, #2dd4bf)) 65%, #22c55e)
);
transition: width .25s ease;
}
.g2a-sso-progress.is-done .g2a-sso-progress-fill {
background: linear-gradient(90deg, #16a34a, #22c55e);
}
.g2a-sso-progress.is-error .g2a-sso-progress-fill {
background: linear-gradient(90deg, #dc2626, #f97316);
}
#sso-progress-pct,
#json-io-progress-pct {
font-variant-numeric: tabular-nums;
font-weight: 600;
min-width: 3.2em;
text-align: right;
}
/* Usage page signal bar chart */
.g2a-usage-bars {
display: flex;
align-items: flex-end;
gap: 10px;
min-height: 168px;
padding: 12px 6px 4px;
overflow-x: auto;
border-radius: 12px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--g2a-signal, #2dd4bf) 6%, transparent), transparent 55%),
color-mix(in srgb, var(--ant-color-bg-elevated) 88%, transparent);
border: 1px solid var(--ant-color-border);
}
.g2a-usage-bars.has-data { padding-bottom: 8px; }
.g2a-usage-bar {
flex: 1 1 0;
min-width: 40px;
max-width: 78px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 148px;
position: relative;
gap: 4px;
}
.g2a-usage-bar-track {
width: 100%;
height: 110px;
display: flex;
align-items: flex-end;
justify-content: center;
border-radius: 8px 8px 4px 4px;
background: color-mix(in srgb, var(--g2a-signal, #2dd4bf) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--g2a-signal, #2dd4bf) 14%, transparent);
overflow: hidden;
}
.g2a-usage-bar-fill {
width: 72%;
min-height: 4px;
border-radius: 7px 7px 2px 2px;
background: linear-gradient(
180deg,
#99f6e4 0%,
var(--g2a-signal, #2dd4bf) 42%,
color-mix(in srgb, var(--g2a-signal, #2dd4bf) 45%, #0ea5e9) 100%
);
box-shadow: 0 0 16px color-mix(in srgb, var(--g2a-signal, #2dd4bf) 35%, transparent);
opacity: calc(0.45 + (var(--bar-i, 0.7) * 0.55));
transition: height .25s ease, opacity .2s ease;
}
.g2a-usage-bar.is-peak .g2a-usage-bar-fill {
background: linear-gradient(180deg, #ccfbf1, #5eead4 40%, #2dd4bf 100%);
box-shadow: 0 0 22px color-mix(in srgb, var(--g2a-signal, #2dd4bf) 55%, transparent);
opacity: 1;
}
.g2a-usage-bar-label {
font-size: 11px;
color: var(--ant-color-text-secondary);
font-variant-numeric: tabular-nums;
font-family: var(--mono);
}
.g2a-usage-bar-val {
font-size: 10.5px;
color: var(--g2a-signal-hot, #5eead4);
font-variant-numeric: tabular-nums;
font-family: var(--mono);
font-weight: 600;
line-height: 1.2;
}
.g2a-usage-bar-req {
font-size: 10px;
color: var(--ant-color-text-tertiary);
font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .g2a-usage-bar-val { color: #0f766e; }
html[data-theme="light"] .g2a-usage-bars {
background:
linear-gradient(180deg, rgba(13, 148, 136, 0.06), transparent 55%),
#fff;
}
/* Soft-nav anti-blackout (v1.9.8+) — keep shell visible without flattening atmosphere */
html, body {
background: var(--ant-color-bg-base);
min-height: 100%;
}
.g2a-layout, .g2a-main {
background: transparent;
min-height: 100%;
}
/* Never hide the whole shell */
body.g2a-body .g2a-layout {
visibility: visible !important;
opacity: 1 !important;
}
/* Busy state only dims content slightly; keep chrome fully interactive-looking */
body.g2a-softnav-busy .g2a-content {
opacity: 0.72 !important;
transition: opacity .12s ease;
pointer-events: none;
filter: none !important;
}
body.g2a-softnav-busy .g2a-sider,
body.g2a-softnav-busy .g2a-header {
opacity: 1 !important;
pointer-events: auto;
}
/* If JS dies mid-nav, CSS animation hint still leaves UI readable */
body.g2a-softnav-busy .g2a-content::after {
content: "";
position: sticky;
top: 0;
display: block;
height: 2px;
background: linear-gradient(90deg, transparent, var(--ant-color-primary), transparent);
animation: g2a-softnav-bar 1.1s linear infinite;
}
@keyframes g2a-softnav-bar {
0% { opacity: .2; }
50% { opacity: 1; }
100% { opacity: .2; }
}
/* usage-events aligned table */
.g2a-table-usage-wrap {
overflow-x: auto;
max-width: 100%;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
/* Isolate layout so fixed min-width table cannot expand the document. */
contain: inline-size;
}
.g2a-table-usage {
table-layout: fixed;
/* Desktop keeps full column set; mobile scrolls horizontally inside wrap. */
min-width: 1100px;
width: max-content;
max-width: none;
}
@media (max-width: 960px) {
.g2a-table-usage {
min-width: 980px;
font-size: 12px;
}
.g2a-table-usage th,
.g2a-table-usage td {
padding: 8px 6px;
}
}
.g2a-table-usage th,
.g2a-table-usage td {
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 10px 8px;
box-sizing: border-box;
}
.g2a-table-usage th {
white-space: nowrap;
}
.g2a-table-usage td.ue-num,
.g2a-table-usage th.ue-num {
text-align: right;
font-variant-numeric: tabular-nums;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.g2a-table-usage td.ue-center,
.g2a-table-usage th.ue-center {
text-align: center;
}
.g2a-table-usage .ue-sub {
display: block;
margin-top: 2px;
font-size: 11px;
color: var(--ant-color-text-tertiary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.25;
}
.g2a-table-usage .ue-main {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.3;
}
.g2a-table-usage .ue-proto .ue-main {
font-weight: 600;
}
.g2a-table-usage .g2a-tag {
max-width: 100%;
vertical-align: middle;
display: inline-block;
}
.g2a-table-usage td.ue-mode,
.g2a-table-usage th.ue-mode {
text-align: center;
overflow: visible;
white-space: nowrap;
}
.g2a-table-usage .ue-mode-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.75em;
padding: 2px 8px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
line-height: 1.35;
white-space: nowrap;
letter-spacing: 0.02em;
}
.g2a-table-usage .ue-mode-pill.is-stream {
color: #1f9d63;
background: rgba(62, 207, 142, 0.16);
border: 1px solid rgba(62, 207, 142, 0.45);
}
.g2a-table-usage .ue-mode-pill.is-sync {
color: #b8860b;
background: rgba(250, 173, 20, 0.14);
border: 1px solid rgba(250, 173, 20, 0.4);
}
.g2a-table-usage .ue-mode-pill.is-unknown {
color: var(--ant-color-text-tertiary, #8b8b9a);
background: rgba(127, 127, 145, 0.1);
border: 1px solid rgba(127, 127, 145, 0.25);
}
html[data-theme="light"] .g2a-table-usage .ue-mode-pill.is-stream {
color: #0d7a4a;
}
html[data-theme="light"] .g2a-table-usage .ue-mode-pill.is-sync {
color: #9a6700;
}
html[data-theme="light"] .g2a-table-usage .ue-sub {
color: rgba(0,0,0,.45);
}
/* Registration multi-domain list */
textarea#reg-domain {
min-height: 72px;
font-family: var(--mono, ui-monospace, monospace);
font-size: 12.5px;
line-height: 1.45;
white-space: pre;
}
/* Account quota usage meter (Free token / SuperGrok $) */
.g2a-quota-meter {
margin-top: 5px;
height: 4px;
width: 100%;
max-width: 160px;
border-radius: 999px;
background: rgba(127, 127, 145, 0.18);
overflow: hidden;
}
.g2a-quota-meter-fill {
height: 100%;
border-radius: 999px;
transition: width .25s ease;
}
html[data-theme="light"] .g2a-quota-meter {
background: rgba(0, 0, 0, 0.08);
}
/* Registration progress panel (v1.9.99+) */
.g2a-reg-card-head {
align-items: flex-start;
}
.g2a-reg-title-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.g2a-reg-chip {
font-size: 11px !important;
height: 20px !important;
line-height: 18px !important;
padding: 0 8px !important;
letter-spacing: .02em;
}
.g2a-reg-actions {
justify-content: flex-end;
}
.g2a-reg-actions-sep {
width: 1px;
height: 22px;
margin: 0 2px;
background: var(--ant-color-border);
opacity: .9;
}
.g2a-reg-section {
margin: 4px 0 0;
padding-top: 10px;
border-top: 1px dashed color-mix(in srgb, var(--ant-color-border) 85%, transparent);
}
.g2a-reg-section:first-child {
border-top: 0;
padding-top: 0;
margin-top: 0;
}
.g2a-reg-section-label {
font-size: 11.5px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ant-color-text-tertiary);
}
.g2a-reg-form .g2a-field label {
font-size: 12.5px;
}
.g2a-reg-progress {
margin-top: 14px !important;
padding: 14px 14px 12px !important;
border-radius: 12px !important;
border: 1px solid color-mix(in srgb, var(--ant-color-primary) 28%, var(--ant-color-border)) !important;
background:
linear-gradient(180deg, color-mix(in srgb, var(--ant-color-primary) 10%, transparent), transparent 48%),
rgba(255,255,255,.02) !important;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
html[data-theme="light"] .g2a-reg-progress {
background:
linear-gradient(180deg, color-mix(in srgb, var(--ant-color-primary) 8%, #fff), #fff 50%) !important;
box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
}
.g2a-reg-progress-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.g2a-reg-progress-title {
display: flex;
align-items: flex-start;
gap: 10px;
min-width: 0;
}
.g2a-reg-progress-label {
font-size: 13px;
font-weight: 600;
letter-spacing: -.01em;
margin-bottom: 4px;
}
.g2a-reg-session-id {
display: inline-block;
max-width: min(52ch, 100%);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
.g2a-reg-progress-actions {
margin: 0 !important;
}
.g2a-reg-status-tag {
max-width: min(280px, 55vw);
overflow: hidden;
text-overflow: ellipsis;
font-variant-numeric: tabular-nums;
}
.g2a-reg-status-tag[data-reg-state="running"],
.g2a-reg-status-tag[data-reg-state="starting"],
.g2a-reg-status-tag[data-reg-state="registering"],
.g2a-reg-status-tag[data-reg-state="solving_turnstile"],
.g2a-reg-status-tag[data-reg-state="waiting_email"],
.g2a-reg-status-tag[data-reg-state="probing"] {
color: var(--g2a-signal-text);
background: rgba(22,119,255,.14);
border-color: rgba(22,119,255,.35);
}
.g2a-reg-status-tag[data-reg-state="stopping"] {
color: #ffe58f;
background: rgba(216,150,20,.16);
border-color: rgba(216,150,20,.4);
}
.g2a-reg-status-tag[data-reg-state="imported"],
.g2a-reg-status-tag[data-reg-state="success"],
.g2a-reg-status-tag[data-reg-state="completed"],
.g2a-reg-status-tag[data-reg-state="done"] {
color: #b7eb8f;
background: rgba(73,170,25,.15);
border-color: rgba(73,170,25,.4);
}
.g2a-reg-status-tag[data-reg-state="error"],
.g2a-reg-status-tag[data-reg-state="failed"],
.g2a-reg-status-tag[data-reg-state="partial"] {
color: #ffccc7;
background: rgba(220,68,70,.15);
border-color: rgba(220,68,70,.4);
}
.g2a-reg-status-tag[data-reg-state="cancelled"],
.g2a-reg-status-tag[data-reg-state="stopped"] {
color: #d3adf7;
background: rgba(114,46,209,.14);
border-color: rgba(114,46,209,.35);
}
.g2a-reg-status-tag[data-reg-state="idle"],
.g2a-reg-status-tag[data-reg-state="not found"] {
color: var(--ant-color-text-secondary);
}
.g2a-reg-live-dot {
width: 9px;
height: 9px;
margin-top: 5px;
border-radius: 50%;
flex: 0 0 auto;
background: var(--ant-color-text-quaternary, #6b6f80);
box-shadow: 0 0 0 0 rgba(22,119,255,0);
}
.g2a-reg-live-dot.is-live {
background: var(--g2a-signal, #2dd4bf);
animation: g2a-reg-pulse 1.6s ease-out infinite;
}
.g2a-reg-live-dot.is-ok { background: #22c55e; animation: none; }
.g2a-reg-live-dot.is-bad { background: #ef4444; animation: none; }
.g2a-reg-live-dot.is-stop { background: #a855f7; animation: none; }
.g2a-reg-live-dot.is-warn { background: #f59e0b; animation: none; }
@keyframes g2a-reg-pulse {
0% { box-shadow: 0 0 0 0 rgba(59,130,246,.55); }
70% { box-shadow: 0 0 0 8px rgba(59,130,246,0); }
100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}
.g2a-reg-stats {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 6px;
margin: 0 0 12px;
overflow-x: auto;
scrollbar-width: thin;
}
.g2a-reg-stat {
display: inline-flex;
flex: 0 0 auto;
align-items: baseline;
gap: 7px;
border: 1px solid var(--ant-color-border);
border-radius: 6px;
padding: 5px 8px;
background: rgba(255,255,255,.02);
white-space: nowrap;
}
.g2a-reg-stat .k {
font-size: 11px;
color: var(--ant-color-text-tertiary);
}
.g2a-reg-stat .v {
font-size: 14px;
font-weight: var(--fw-semibold);
letter-spacing: 0;
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.g2a-reg-stat.is-ok .v { color: #73d13d; }
.g2a-reg-stat.is-bad .v { color: #ff7875; }
.g2a-reg-stat.is-run .v { color: #5eead4; }
.g2a-reg-stat.is-probing .v { color: #fbbf24; }
.g2a-reg-stat.is-stop .v { color: #b37feb; }
html[data-theme="light"] .g2a-reg-stat {
background: #fff;
}
html[data-theme="light"] .g2a-reg-stat.is-ok .v { color: #389e0d; }
html[data-theme="light"] .g2a-reg-stat.is-bad .v { color: #cf1322; }
html[data-theme="light"] .g2a-reg-stat.is-run .v { color: var(--g2a-signal, #2dd4bf); }
html[data-theme="light"] .g2a-reg-stat.is-probing .v { color: #d97706; }
html[data-theme="light"] .g2a-reg-stat.is-stop .v { color: #722ed1; }
.g2a-reg-bar-wrap { margin: 0 0 10px; }
.g2a-reg-bar-meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 6px;
font-size: 12.5px;
}
#reg-progress-pct {
font-variant-numeric: tabular-nums;
font-weight: 600;
min-width: 3.2em;
text-align: right;
}
.g2a-reg-bar-track {
width: 100%;
height: 9px;
border-radius: 999px;
overflow: hidden;
background: color-mix(in srgb, var(--ant-color-fill-secondary, #2a2d3a) 80%, transparent);
}
.g2a-reg-bar-fill {
height: 100%;
width: 0%;
border-radius: 999px;
background: linear-gradient(
90deg,
var(--ant-color-primary, var(--g2a-signal, #2dd4bf)),
color-mix(in srgb, var(--ant-color-primary, var(--g2a-signal, #2dd4bf)) 55%, #22c55e)
);
transition: width .28s ease;
}
.g2a-reg-bar-wrap.is-done .g2a-reg-bar-fill {
background: linear-gradient(90deg, #16a34a, #22c55e);
}
.g2a-reg-bar-wrap.is-error .g2a-reg-bar-fill {
background: linear-gradient(90deg, #dc2626, #f97316);
}
.g2a-reg-bar-wrap.is-stopping .g2a-reg-bar-fill {
background: linear-gradient(90deg, #d97706, #f59e0b);
}
.g2a-reg-log-hint {
margin: 0 0 6px !important;
font-size: 12px;
}
.g2a-reg-log {
max-height: 280px !important;
margin: 0;
}
@media (max-width: 720px) {
.g2a-reg-actions-sep { display: none; }
.g2a-reg-card-head .g2a-actions {
width: 100%;
}
.g2a-reg-card-head .g2a-actions .g2a-btn {
flex: 1 1 auto;
}
}
.g2a-dialog {
width: min(880px, calc(100vw - 32px));
max-width: 100%;
max-height: min(860px, calc(100vh - 32px));
padding: 0;
color: var(--ant-color-text);
background: var(--ant-color-bg-container);
border: 1px solid var(--ant-color-border);
border-radius: 8px;
box-shadow: 0 24px 70px rgba(0,0,0,.42);
overflow: hidden;
}
.g2a-dialog::backdrop {
background: rgba(0,0,0,.62);
backdrop-filter: blur(3px);
}
.g2a-dialog-head,
.g2a-dialog-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
}
.g2a-dialog-head { border-bottom: 1px solid var(--ant-color-border); }
.g2a-dialog-head h3 { margin: 0; font-size: 16px; }
.g2a-dialog-head p { margin: 3px 0 0; color: var(--ant-color-text-tertiary); font-size: 12px; }
.g2a-dialog-foot {
justify-content: flex-end;
border-top: 1px solid var(--ant-color-border);
}
.g2a-dialog-body {
max-height: calc(100vh - 190px);
padding: 16px;
overflow-y: auto;
}
.g2a-dialog-close {
width: 30px;
height: 30px;
flex: 0 0 30px;
padding: 0;
color: var(--ant-color-text-secondary);
background: transparent;
border: 0;
border-radius: 4px;
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.g2a-dialog-close:hover {
color: var(--ant-color-text);
background: var(--ant-color-fill-secondary);
}
body.g2a-dialog-open { overflow: hidden; }
/* Accounts page card/device polish (v1.9.99+) */
.g2a-card-compact {
padding: 14px 16px 12px !important;
}
.g2a-card-head-inline {
align-items: center;
margin-bottom: 0 !important;
}
.g2a-card-head-stack {
align-items: flex-start;
}
.g2a-card-actions {
justify-content: flex-end;
gap: 8px;
}
.g2a-field-inline {
margin: 0;
min-width: 200px;
flex: 0 1 240px;
}
.g2a-input-inline {
min-width: 200px;
}
.g2a-sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
.g2a-check-chip {
height: 32px;
padding: 0 10px;
border: 1px solid var(--ant-color-border);
border-radius: 8px;
background: rgba(255,255,255,.02);
margin: 0 !important;
}
html[data-theme="light"] .g2a-check-chip {
background: #fff;
}
.g2a-acc-section {
margin: 4px 0 10px;
padding-top: 12px;
border-top: 1px dashed color-mix(in srgb, var(--ant-color-border) 85%, transparent);
}
.g2a-acc-toolbar {
margin-bottom: 8px;
}
/* Device login — align with registration progress panel */
.g2a-device-panel {
margin-top: 4px !important;
margin-bottom: 14px !important;
padding: 14px !important;
border-radius: 12px !important;
border: 1px solid color-mix(in srgb, var(--ant-color-primary) 22%, var(--ant-color-border)) !important;
background:
linear-gradient(180deg, color-mix(in srgb, var(--ant-color-primary) 9%, transparent), transparent 50%),
rgba(255,255,255,.02) !important;
}
html[data-theme="light"] .g2a-device-panel {
background:
linear-gradient(180deg, color-mix(in srgb, var(--ant-color-primary) 7%, #fff), #fff 52%) !important;
}
.g2a-device-head {
margin-bottom: 12px !important;
}
.g2a-device-sub {
margin: 2px 0 0 !important;
font-size: 12px !important;
line-height: 1.45;
}
.g2a-device-idle-hint {
margin-top: 8px !important;
font-size: 12.5px;
}
.g2a-device-code-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
gap: 10px 16px;
margin-bottom: 8px;
}
.g2a-device-code-kv,
.g2a-device-url-kv {
margin: 0 !important;
align-items: flex-start;
}
.g2a-device-url-kv a {
word-break: break-all;
color: var(--ant-color-primary);
font-size: 12.5px;
line-height: 1.45;
}
.g2a-device-log {
max-height: 180px !important;
margin: 0;
}
#device-progress-wrap {
margin-bottom: 10px;
}
#device-progress-wrap[data-device-phase="idle"] .g2a-reg-bar-fill {
width: 0% !important;
opacity: .45;
}
#device-progress-wrap[data-device-phase="pending"],
#device-progress-wrap[data-device-phase="running"],
#device-progress-wrap[data-device-phase="authorization_pending"] {
/* animated indeterminate-ish fill handled by width in JS */
}
#device-progress-wrap.is-done .g2a-reg-bar-fill {
background: linear-gradient(90deg, #16a34a, #22c55e);
}
#device-progress-wrap.is-error .g2a-reg-bar-fill {
background: linear-gradient(90deg, #dc2626, #f97316);
}
#device-progress-wrap.is-live .g2a-reg-bar-fill {
background: linear-gradient(
90deg,
var(--ant-color-primary, var(--g2a-signal, #2dd4bf)),
color-mix(in srgb, var(--ant-color-primary, var(--g2a-signal, #2dd4bf)) 55%, #22c55e)
);
}
#device-status[data-device-state="idle"] {
color: var(--ant-color-text-secondary);
}
#device-status[data-device-state="running"],
#device-status[data-device-state="pending"],
#device-status[data-device-state="authorization_pending"],
#device-status[data-device-state="starting"] {
color: var(--g2a-signal-text);
background: rgba(22,119,255,.14);
border-color: rgba(22,119,255,.35);
}
#device-status[data-device-state="success"],
#device-status[data-device-state="completed"],
#device-status[data-device-state="imported"] {
color: #b7eb8f;
background: rgba(73,170,25,.15);
border-color: rgba(73,170,25,.4);
}
#device-status[data-device-state="error"],
#device-status[data-device-state="failed"],
#device-status[data-device-state="expired"] {
color: #ffccc7;
background: rgba(220,68,70,.15);
border-color: rgba(220,68,70,.4);
}
/* Soften stacked card rhythm on accounts page */
body[data-page="accounts"] .g2a-content > .g2a-card {
margin-bottom: 14px;
}
body[data-page="accounts"] .g2a-content {
width: 100%;
max-width: none;
}
body[data-page="accounts"] .g2a-content > .g2a-card > .g2a-card-head {
gap: 10px 14px;
}
body[data-page="accounts"] .g2a-toolbar {
gap: 8px;
}
@media (max-width: 720px) {
.g2a-device-code-row {
grid-template-columns: 1fr;
}
.g2a-card-head-inline {
align-items: flex-start;
}
.g2a-field-inline,
.g2a-input-inline {
min-width: 0;
width: 100%;
flex: 1 1 100%;
}
.g2a-card-actions {
width: 100%;
}
}
/* page kickers */
.g2a-page-kicker {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--g2a-signal);
margin: 0 0 6px;
opacity: 0.9;
}
/* ── menu SVG icons ── */
.g2a-menu-ico {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 20px;
opacity: 0.92;
}
.g2a-menu-ico .g2a-ico {
width: 18px;
height: 18px;
display: block;
}
.g2a-menu-item.is-active .g2a-menu-ico {
color: var(--g2a-on-active);
opacity: 1;
}
/* ── overview stat cards (data-first) ── */
.g2a-stat-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.g2a-stat-card {
min-height: 118px;
display: flex;
flex-direction: column;
gap: 6px;
}
.g2a-stat-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.g2a-stat-chip {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ant-color-text-tertiary);
border: 1px solid var(--ant-color-border);
border-radius: 999px;
padding: 1px 7px;
background: rgba(255,255,255,.02);
}
.g2a-stat-hero {
font-size: 22px !important;
font-weight: 700 !important;
letter-spacing: -0.03em !important;
font-variant-numeric: tabular-nums;
}
.g2a-stat-value-sm {
font-size: 13.5px !important;
line-height: 1.4 !important;
word-break: break-all;
}
.g2a-stat-metric {
display: flex !important;
align-items: baseline;
flex-wrap: wrap;
gap: 4px 6px;
margin-top: 8px !important;
font-size: inherit !important;
}
.g2a-stat-num {
font-size: 26px;
font-weight: 700;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
line-height: 1;
color: var(--ant-color-text);
}
.g2a-stat-num.is-dim {
font-size: 18px;
font-weight: 600;
color: var(--ant-color-text-tertiary);
}
.g2a-stat-unit {
font-size: 12px;
color: var(--ant-color-text-tertiary);
font-weight: 500;
}
.g2a-stat-unit.is-dim { color: var(--ant-color-text-tertiary); opacity: .85; }
.g2a-stat-sep {
color: var(--ant-color-text-tertiary);
margin: 0 2px;
font-weight: 500;
}
.stat .sub, .g2a-stat .sub, .g2a-stat-card .sub {
margin-top: auto;
padding-top: 8px;
font-size: 11.5px;
line-height: 1.45;
color: var(--ant-color-text-tertiary);
}
.g2a-stat-card.is-ok {
border-color: color-mix(in srgb, var(--g2a-ok) 28%, var(--ant-color-border));
}
.g2a-stat-card.is-ok .g2a-stat-num { color: var(--g2a-ok); }
.g2a-stat-card.is-warn {
border-color: color-mix(in srgb, var(--g2a-warn) 30%, var(--ant-color-border));
}
.g2a-stat-card.is-warn .g2a-stat-num { color: var(--g2a-warn); }
.g2a-stat-card.is-bad {
border-color: color-mix(in srgb, var(--g2a-danger) 30%, var(--ant-color-border));
}
.g2a-stat-card.is-bad .g2a-stat-num { color: var(--g2a-danger); }
.stat .value.mono, .g2a-stat-card .value.mono { font-family: var(--mono); }
/* ── login shell ── */
.g2a-login-body {
min-height: 100vh;
margin: 0;
background: var(--ant-color-bg-base);
}
.g2a-login-theme-wrap {
position: fixed;
top: 16px;
right: 16px;
z-index: 40;
}
.g2a-login-shell {
min-height: 100vh;
display: grid;
place-items: center;
padding: 72px 20px 40px;
}
.g2a-login-main {
width: min(440px, 100%);
}
.g2a-login-screen-embed {
min-height: 0 !important;
padding: 0 !important;
display: block !important;
background: transparent !important;
place-items: unset !important;
width: 100%;
}
.g2a-login-screen-embed.hidden { display: none !important; }
.g2a-login-screen-embed .g2a-login-panel {
width: 100%;
margin: 0 auto;
}
.g2a-login-panel.g2a-card {
padding: 28px !important;
border-radius: 8px !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.g2a-login-panel .g2a-page-kicker {
margin: 8px 0 6px;
}
.g2a-input-lg {
height: 44px;
padding: 10px 14px;
font-size: 15px;
border-radius: 11px;
}
.g2a-btn-lg {
height: 44px;
font-size: 15px;
border-radius: 11px;
margin-top: 14px;
}
.g2a-form-error {
margin-top: 8px;
padding: 8px 10px;
border-radius: 8px;
font-size: 12.5px;
color: var(--g2a-danger-text);
background: rgba(248, 113, 113, 0.1);
border: 1px solid rgba(248, 113, 113, 0.28);
}
.g2a-form-error.hidden { display: none !important; }
.g2a-login-probe {
display: flex;
align-items: center;
gap: 10px;
margin: 16px 0;
padding: 11px 12px;
border: 1px solid var(--ant-color-border);
border-radius: 6px;
background: var(--ant-color-fill-quaternary);
}
.g2a-login-probe.hidden { display: none !important; }
.g2a-login-probe-title {
font-size: 13px;
font-weight: 600;
color: var(--ant-color-text);
}
.g2a-login-probe-copy {
margin-top: 2px;
font-size: 11px;
color: var(--ant-color-text-tertiary);
}
.g2a-spinner {
width: 18px;
height: 18px;
margin-top: 4px;
border-radius: 50%;
border: 2px solid rgba(45, 212, 191, 0.2);
border-top-color: var(--g2a-signal, #2dd4bf);
animation: g2a-spin 0.8s linear infinite;
flex: 0 0 auto;
}
@keyframes g2a-spin { to { transform: rotate(360deg); } }
.g2a-conn-list {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 12.5px;
font-family: var(--mono);
color: var(--ant-color-text-secondary);
}
.g2a-conn-list-compact {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin: 0 0 18px;
}
.g2a-conn-list-compact .g2a-conn-item {
min-width: 0;
padding: 9px 10px;
border: 1px solid var(--ant-color-border);
border-radius: 6px;
background: transparent;
}
.g2a-conn-list-compact .desc {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 520px) {
.g2a-login-shell {
padding: 60px 14px 24px;
}
.g2a-login-main { width: 100%; }
.g2a-login-panel.g2a-card { padding: 22px 18px !important; }
.g2a-conn-list-compact { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.g2a-spinner { animation: none; border-top-color: var(--g2a-signal, #2dd4bf); }
}
/* Settings section nav */
.g2a-settings-nav {
position: sticky;
top: 64px;
z-index: 8;
margin: 0 0 14px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid var(--ant-color-border);
background: color-mix(in srgb, var(--ant-color-bg-container) 88%, transparent);
backdrop-filter: blur(12px) saturate(1.15);
-webkit-backdrop-filter: blur(12px) saturate(1.15);
box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
html[data-theme="light"] .g2a-settings-nav {
background: color-mix(in srgb, #fff 92%, transparent);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}
.g2a-settings-nav-label {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ant-color-text-tertiary);
margin: 0 0 8px;
}
.g2a-settings-nav-track {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.g2a-settings-nav-item {
appearance: none;
display: inline-flex;
align-items: center;
height: 30px;
padding: 0 11px;
border-radius: 999px;
border: 1px solid var(--ant-color-border);
background: transparent;
color: var(--ant-color-text-secondary);
font-size: 12.5px;
font-weight: var(--fw-medium);
font-family: var(--font);
text-decoration: none !important;
transition: .15s ease;
cursor: pointer;
}
.g2a-settings-nav-item:hover {
color: var(--g2a-signal-hot, #5eead4);
border-color: color-mix(in srgb, var(--g2a-signal, #2dd4bf) 40%, var(--ant-color-border));
background: color-mix(in srgb, var(--g2a-signal, #2dd4bf) 10%, transparent);
}
.g2a-settings-nav-item.is-active {
color: var(--g2a-on-signal);
background: var(--g2a-btn-primary-bg);
border-color: transparent;
box-shadow: 0 4px 14px rgba(45, 212, 191, 0.25);
font-weight: var(--fw-semibold);
}
html[data-theme="light"] .g2a-settings-nav-item.is-active {
color: #f0fdfa !important;
background: var(--g2a-btn-primary-bg) !important;
border-color: transparent !important;
}
.g2a-settings-section {
scroll-margin-top: 120px;
}
@media (max-width: 960px) {
.g2a-settings-nav { top: 8px; }
.g2a-settings-section { scroll-margin-top: 90px; }
}
/* Quota meter signal defaults */
.g2a-quota-meter-fill {
background: linear-gradient(90deg, var(--g2a-signal, #2dd4bf), color-mix(in srgb, var(--g2a-signal, #2dd4bf) 50%, #0ea5e9));
}
/* Shared page polish: section kickers, filter bars, meta lines */
.g2a-section-kicker {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--g2a-signal, #2dd4bf);
margin: 0 0 6px;
opacity: 0.9;
}
.g2a-filter-bar {
gap: 10px 12px !important;
align-items: flex-end !important;
margin-bottom: 12px !important;
padding: 12px;
border-radius: 12px;
border: 1px solid var(--ant-color-border);
background: color-mix(in srgb, var(--ant-color-bg-elevated) 82%, transparent);
}
html[data-theme="light"] .g2a-filter-bar {
background: color-mix(in srgb, #f8fafc 90%, transparent);
}
.g2a-filter-bar .g2a-field-sm {
width: 140px;
min-width: 120px;
flex: 0 0 140px;
}
.g2a-filter-bar .g2a-field-grow {
flex: 1 1 220px;
min-width: 180px;
}
.g2a-filter-bar .g2a-field-action {
flex: 0 0 auto;
align-self: flex-end;
}
.g2a-meta-line {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
margin: 0 0 12px !important;
font-size: 12.5px;
line-height: 1.5;
}
.g2a-pager-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 12px;
}
.g2a-detail-panel {
margin-top: 12px !important;
max-height: 320px !important;
}
.g2a-count-pill {
display: inline-flex;
align-items: center;
height: 34px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid var(--ant-color-border);
background: color-mix(in srgb, var(--g2a-signal, #2dd4bf) 8%, transparent);
font-family: var(--mono);
font-size: 12px;
}
.g2a-key-issued {
border-color: color-mix(in srgb, var(--g2a-ok, #34d399) 40%, var(--ant-color-border)) !important;
background: color-mix(in srgb, var(--g2a-ok, #34d399) 8%, var(--ant-color-bg-container)) !important;
}
.g2a-key-value {
display: inline-block;
max-width: 100%;
word-break: break-all;
font-size: 13px !important;
padding: 6px 10px !important;
}
.g2a-info-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
}
.g2a-info-tile {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid var(--ant-color-border);
background: color-mix(in srgb, var(--ant-color-bg-elevated) 90%, transparent);
}
.g2a-info-tile .k {
font-size: 11.5px;
color: var(--ant-color-text-tertiary);
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 600;
}
.g2a-code-tall {
max-height: 320px !important;
}
.g2a-guide-snippet .g2a-card-head {
margin-bottom: 10px;
}
/* Mobile nav chips — signal style */
.g2a-mobile-nav a,
.mobile-nav a {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid var(--ant-color-border);
color: var(--ant-color-text-secondary);
font-size: 12.5px;
font-weight: var(--fw-medium);
text-decoration: none !important;
white-space: nowrap;
background: color-mix(in srgb, var(--ant-color-bg-container) 80%, transparent);
transition: .15s ease;
}
.g2a-mobile-nav a:hover,
.mobile-nav a:hover {
color: var(--g2a-signal-hot, #5eead4);
border-color: color-mix(in srgb, var(--g2a-signal, #2dd4bf) 40%, var(--ant-color-border));
}
.g2a-mobile-nav a.is-active,
.g2a-mobile-nav a.active,
.mobile-nav a.is-active,
.mobile-nav a.active {
color: var(--g2a-on-signal);
background: var(--g2a-btn-primary-bg);
border-color: transparent;
box-shadow: 0 4px 12px rgba(45, 212, 191, 0.22);
font-weight: var(--fw-semibold);
}
/* Empty table / loading row */
.g2a-table td.g2a-muted {
padding: 18px 12px;
text-align: center;
}
/* Empty accounts/keys states */
.g2a-empty {
border: 1px dashed var(--ant-color-border);
border-radius: 12px;
background: color-mix(in srgb, var(--g2a-signal, #2dd4bf) 4%, transparent);
}
/* Soft-nav busy should not black-out signal theme */
body.g2a-softnav-busy .g2a-content {
opacity: 0.72;
transition: opacity .15s ease;
}
/* ═══════════════════════════════════════════════════════════
Signal Console · polish pass (depth / login gateway / chrome)
═══════════════════════════════════════════════════════════ */
/* Live status pulse on ok tags */
/* Status / result leading dots — one system for every tone */
.g2a-tag.ok::before,
.g2a-tag.bad::before,
.g2a-tag.warn::before,
.g2a-tag.blue::before,
.g2a-result-tag::before,
.g2a-status-pill::before,
.pill.ok::before,
.pill.live::before,
.pill.bad::before,
.pill.warn::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 6px;
background: currentColor;
box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent);
flex: 0 0 auto;
}
.g2a-tag.ok::before,
.pill.ok::before,
.pill.live::before {
animation: g2a-status-pulse 2.2s ease-out infinite;
}
/* Neutral result tags (取消) still get a muted dot */
.g2a-result-tag:not(.ok):not(.bad):not(.warn):not(.blue)::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 6px;
background: currentColor;
opacity: 0.7;
flex: 0 0 auto;
}
@keyframes g2a-status-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 50%, transparent); }
70% { box-shadow: 0 0 0 7px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
/* Connection probe items (login) */
.g2a-conn-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-width: 0;
}
.g2a-conn-item .left {
display: flex;
align-items: flex-start;
gap: 8px;
min-width: 0;
flex: 1;
}
.g2a-conn-item .name {
font-size: 12px;
font-weight: 600;
color: var(--ant-color-text);
letter-spacing: -0.01em;
}
.g2a-conn-item .desc {
margin-top: 2px;
font-size: 10.5px;
color: var(--ant-color-text-tertiary);
line-height: 1.35;
}
.g2a-dot {
width: 8px;
height: 8px;
border-radius: 50%;
margin-top: 4px;
flex: 0 0 auto;
background: var(--ant-color-text-tertiary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ant-color-text-tertiary) 18%, transparent);
}
.g2a-dot.ok {
background: var(--g2a-ok);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--g2a-ok) 22%, transparent);
animation: g2a-status-pulse 2.2s ease-out infinite;
}
.g2a-dot.warn {
background: var(--g2a-warn);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--g2a-warn) 22%, transparent);
}
.g2a-dot.bad {
background: var(--g2a-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--g2a-danger) 22%, transparent);
}
/* Theme toggle — SVG icons preferred over emoji */
.g2a-theme-toggle .ico-svg {
width: 14px;
height: 14px;
display: none;
flex: 0 0 auto;
}
.g2a-theme-toggle.has-svg .ico { display: none; }
.g2a-theme-toggle.has-svg .ico-svg { display: block; }
.g2a-theme-toggle.has-svg .ico-svg.is-active { display: block; }
.g2a-theme-toggle.has-svg .ico-svg:not(.is-active) { display: none; }
/* Sider: subtle top signal wash */
.g2a-sider::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 120px;
pointer-events: none;
background: linear-gradient(180deg, rgba(45, 212, 191, 0.07), transparent);
}
.g2a-sider { position: sticky; overflow: hidden; }
/* Login single-panel gateway (compact, ambient) */
.g2a-login-body {
min-height: 100vh;
margin: 0;
overflow-x: hidden;
background:
radial-gradient(900px 480px at 50% -10%, rgba(45, 212, 191, 0.16), transparent 55%),
radial-gradient(700px 400px at 90% 100%, rgba(14, 165, 233, 0.1), transparent 50%),
radial-gradient(500px 300px at 10% 80%, rgba(45, 212, 191, 0.06), transparent 50%),
var(--ant-color-bg-base);
}
html[data-theme="light"] .g2a-login-body {
background:
radial-gradient(900px 480px at 50% -10%, rgba(13, 148, 136, 0.12), transparent 55%),
radial-gradient(700px 400px at 100% 100%, rgba(2, 132, 199, 0.08), transparent 50%),
var(--ant-color-bg-base);
}
.g2a-login-theme-wrap {
position: fixed;
top: 16px;
right: 16px;
z-index: 40;
}
.g2a-login-shell {
min-height: 100vh;
display: grid;
place-items: center;
padding: 72px 20px 40px;
}
.g2a-login-main {
width: min(440px, 100%);
}
.g2a-login-screen-embed {
min-height: 0 !important;
padding: 0 !important;
display: block !important;
background: transparent !important;
place-items: unset !important;
width: 100%;
}
.g2a-login-screen-embed.hidden { display: none !important; }
.g2a-login-panel.g2a-card {
padding: 28px 26px !important;
border-radius: 18px !important;
box-shadow:
0 0 0 1px color-mix(in srgb, var(--g2a-signal) 12%, transparent),
0 24px 56px rgba(0, 0, 0, 0.32),
0 0 48px rgba(45, 212, 191, 0.08);
animation: g2a-login-panel-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes g2a-login-panel-in {
from { opacity: 0; transform: translateY(10px) scale(0.985); }
to { opacity: 1; transform: none; }
}
.g2a-login-panel .g2a-page-kicker { margin: 10px 0 6px; }
.g2a-logo-lg {
width: 48px; height: 48px; border-radius: 14px;
display: grid; place-items: center;
font-weight: 800; color: var(--g2a-on-signal); font-size: 18px;
background: linear-gradient(145deg, #5eead4, #2dd4bf 50%, #0ea5e9);
box-shadow:
0 0 0 1px rgba(255,255,255,.14),
0 0 0 5px rgba(45, 212, 191, 0.1),
0 12px 32px rgba(45, 212, 191, 0.32);
position: relative;
}
.g2a-login-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 16px;
}
.g2a-login-chip {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.04em;
color: var(--mono-chip-text);
background: var(--mono-chip-bg);
border: 1px solid color-mix(in srgb, var(--g2a-signal) 22%, var(--ant-color-border));
border-radius: 999px;
padding: 3px 9px;
}
.g2a-login-probe {
display: flex;
align-items: center;
gap: 10px;
margin: 16px 0;
padding: 12px 13px;
border: 1px solid color-mix(in srgb, var(--g2a-signal) 18%, var(--ant-color-border));
border-radius: 12px;
background:
linear-gradient(90deg, color-mix(in srgb, var(--g2a-signal) 8%, transparent), transparent 70%),
color-mix(in srgb, var(--ant-color-bg-elevated) 80%, transparent);
}
.g2a-conn-list-compact {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin: 0 0 18px;
}
.g2a-conn-list-compact .g2a-conn-item {
min-width: 0;
padding: 10px 11px;
border: 1px solid var(--ant-color-border);
border-radius: 10px;
background: color-mix(in srgb, var(--ant-color-bg-elevated) 55%, transparent);
transition: border-color .15s ease, background .15s ease;
}
.g2a-conn-list-compact .g2a-conn-item:hover {
border-color: color-mix(in srgb, var(--g2a-signal) 35%, var(--ant-color-border));
}
.g2a-conn-list-compact .desc {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.g2a-conn-list-compact .g2a-tag {
height: 20px;
font-size: 10.5px;
padding: 0 7px;
flex: 0 0 auto;
}
/* Overview quick-action tiles */
.g2a-quick-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
.g2a-quick-tile {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 14px 14px 13px;
border-radius: 12px;
border: 1px solid var(--ant-color-border);
background: color-mix(in srgb, var(--ant-color-bg-elevated) 88%, transparent);
color: var(--ant-color-text) !important;
text-decoration: none !important;
transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease, background .15s ease;
min-height: 88px;
position: relative;
overflow: hidden;
}
.g2a-quick-tile::after {
content: "";
position: absolute;
right: -12px; bottom: -16px;
width: 56px; height: 56px;
border-radius: 50%;
background: radial-gradient(circle, var(--g2a-signal-dim), transparent 70%);
pointer-events: none;
}
.g2a-quick-tile:hover {
border-color: color-mix(in srgb, var(--g2a-signal) 40%, var(--ant-color-border));
background: color-mix(in srgb, var(--g2a-signal) 8%, var(--ant-color-bg-elevated));
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(0,0,0,.16);
color: var(--g2a-signal-hot) !important;
}
.g2a-quick-tile .ico {
width: 28px; height: 28px;
border-radius: 8px;
display: grid;
place-items: center;
background: var(--g2a-signal-dim);
color: var(--g2a-signal);
font-size: 13px;
font-weight: 700;
font-family: var(--mono);
}
.g2a-quick-tile .title {
font-size: 13.5px;
font-weight: var(--fw-semibold);
letter-spacing: -0.02em;
}
.g2a-quick-tile .sub {
font-size: 11.5px;
color: var(--ant-color-text-tertiary);
line-height: 1.4;
}
/* Override older empty block at file tail — keep dashed signal empty */
.g2a-empty {
border: 1px dashed color-mix(in srgb, var(--g2a-signal) 22%, var(--ant-color-border)) !important;
border-radius: 12px !important;
background:
radial-gradient(circle at 50% 0%, var(--g2a-signal-dim), transparent 60%),
color-mix(in srgb, var(--ant-color-bg-elevated) 70%, transparent) !important;
}
/* Header status pill denser mono */
.g2a-header-actions .g2a-tag {
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: 0.02em;
}
/* Card entrance stagger for overview */
.g2a-content > .g2a-card,
.g2a-content > .g2a-grid-2 {
animation: g2a-card-in 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.g2a-content > .g2a-card:nth-child(1) { animation-delay: 0.02s; }
.g2a-content > .g2a-card:nth-child(2),
.g2a-content > .g2a-grid-2:nth-child(2) { animation-delay: 0.06s; }
.g2a-content > .g2a-card:nth-child(3),
.g2a-content > .g2a-grid-2:nth-child(3) { animation-delay: 0.1s; }
.g2a-content > .g2a-card:nth-child(4) { animation-delay: 0.14s; }
@keyframes g2a-card-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
/* Scrollbar — signal thin */
.g2a-content,
.g2a-table-wrap,
.g2a-menu,
.g2a-code,
.g2a-log {
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--g2a-signal) 35%, transparent) transparent;
}
.g2a-content::-webkit-scrollbar,
.g2a-table-wrap::-webkit-scrollbar,
.g2a-menu::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.g2a-content::-webkit-scrollbar-thumb,
.g2a-table-wrap::-webkit-scrollbar-thumb,
.g2a-menu::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--g2a-signal) 30%, transparent);
border-radius: 999px;
}
/* Responsive login / quick tiles */
@media (max-width: 520px) {
.g2a-login-shell { padding: 60px 14px 24px; }
.g2a-login-panel.g2a-card { padding: 22px 18px !important; }
.g2a-conn-list-compact { grid-template-columns: 1fr; }
.g2a-quick-grid { grid-template-columns: 1fr 1fr; }
}
/* Reduced motion — kill polish animations */
@media (prefers-reduced-motion: reduce) {
.g2a-logo::after,
.g2a-tag.ok::before,
.pill.ok::before,
.pill.live::before,
.g2a-dot.ok {
animation: none !important;
}
.g2a-content,
.g2a-content > .g2a-card,
.g2a-content > .g2a-grid-2,
.g2a-login-panel.g2a-card {
animation: none !important;
}
.stat:hover, .g2a-stat:hover,
.g2a-quick-tile:hover {
transform: none;
}
}
/* ═══════════════════════════════════════════════════════════
Dialog / confirm + layout clusters (Signal Console)
═══════════════════════════════════════════════════════════ */
.g2a-dialog {
width: min(880px, calc(100vw - 32px));
max-width: 100%;
max-height: min(860px, calc(100vh - 32px));
padding: 0;
color: var(--ant-color-text);
background:
linear-gradient(180deg, color-mix(in srgb, var(--g2a-signal) 5%, var(--ant-color-bg-container)), var(--ant-color-bg-container) 36%);
border: 1px solid color-mix(in srgb, var(--g2a-signal) 18%, var(--ant-color-border));
border-radius: 16px;
box-shadow:
0 0 0 1px rgba(255,255,255,.03),
0 28px 80px rgba(0,0,0,.5),
0 0 60px rgba(45, 212, 191, 0.06);
overflow: hidden;
}
.g2a-dialog:not([open]) { display: none; }
.g2a-dialog[open] {
display: flex;
flex-direction: column;
animation: g2a-dialog-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes g2a-dialog-in {
from { opacity: 0; transform: translateY(10px) scale(0.98); }
to { opacity: 1; transform: none; }
}
.g2a-dialog::backdrop {
background:
radial-gradient(800px 400px at 50% 20%, rgba(45, 212, 191, 0.08), transparent 55%),
rgba(5, 8, 14, 0.72);
backdrop-filter: blur(6px) saturate(1.1);
-webkit-backdrop-filter: blur(6px) saturate(1.1);
animation: g2a-backdrop-in 0.2s ease both;
}
@keyframes g2a-backdrop-in {
from { opacity: 0; }
to { opacity: 1; }
}
.g2a-dialog-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 16px 18px 14px;
border-bottom: 1px solid color-mix(in srgb, var(--g2a-signal) 10%, var(--ant-color-border));
background: color-mix(in srgb, var(--g2a-signal) 4%, transparent);
flex: 0 0 auto;
}
.g2a-dialog-head h3 {
margin: 0;
font-size: 16px;
font-weight: var(--fw-semibold);
letter-spacing: -0.02em;
}
.g2a-dialog-head p {
margin: 4px 0 0;
color: var(--ant-color-text-tertiary);
font-size: 12.5px;
line-height: 1.5;
max-width: 62ch;
}
.g2a-dialog-kicker {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--g2a-signal);
margin: 0 0 6px;
opacity: 0.9;
}
.g2a-dialog-body {
flex: 1 1 auto;
max-height: none;
min-height: 0;
padding: 16px 18px 8px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--g2a-signal) 35%, transparent) transparent;
}
.g2a-dialog-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 12px 18px 16px;
border-top: 1px solid var(--ant-color-border);
background: color-mix(in srgb, var(--ant-color-bg-elevated) 55%, transparent);
flex: 0 0 auto;
}
.g2a-dialog-close {
width: 32px;
height: 32px;
flex: 0 0 32px;
padding: 0;
color: var(--ant-color-text-secondary);
background: color-mix(in srgb, var(--ant-color-bg-elevated) 70%, transparent);
border: 1px solid var(--ant-color-border);
border-radius: 9px;
font-size: 18px;
line-height: 1;
cursor: pointer;
transition: .15s ease;
}
.g2a-dialog-close:hover {
color: var(--g2a-signal-hot);
border-color: color-mix(in srgb, var(--g2a-signal) 40%, var(--ant-color-border));
background: var(--g2a-signal-dim);
}
body.g2a-dialog-open { overflow: hidden; }
/* Compact confirm dialog */
.g2a-dialog.g2a-confirm-dialog {
width: min(420px, calc(100vw - 32px));
max-height: none;
}
.g2a-confirm-dialog .g2a-dialog-body {
padding: 8px 18px 4px;
}
.g2a-confirm-msg {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--ant-color-text);
white-space: pre-wrap;
}
.g2a-confirm-dialog.is-danger .g2a-dialog-head {
background: color-mix(in srgb, var(--g2a-danger) 8%, transparent);
border-bottom-color: color-mix(in srgb, var(--g2a-danger) 22%, var(--ant-color-border));
}
.g2a-confirm-dialog.is-danger .g2a-dialog-kicker {
color: var(--g2a-danger);
}
.g2a-confirm-dialog.is-warn .g2a-dialog-head {
background: color-mix(in srgb, var(--g2a-warn) 10%, transparent);
}
/* Dialog form sections denser */
.g2a-dialog-body .g2a-form-grid {
gap: 12px 14px;
}
.g2a-dialog-body .g2a-reg-section {
margin-top: 4px;
padding-top: 8px;
border-top: 1px dashed color-mix(in srgb, var(--g2a-signal) 12%, var(--ant-color-border));
}
.g2a-dialog-body .g2a-reg-section:first-child {
border-top: 0;
padding-top: 0;
margin-top: 0;
}
.g2a-field-hint {
margin-top: 4px;
font-size: 12px;
line-height: 1.5;
color: var(--ant-color-text-tertiary);
}
.g2a-field-hint code {
font-family: var(--mono);
font-size: 11px;
color: var(--mono-chip-text);
background: var(--mono-chip-bg);
border-radius: 4px;
padding: 0 4px;
}
/* Accounts toolbar — clustered bulk ops */
.g2a-acc-toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin: 0 0 10px;
padding: 12px;
border-radius: 12px;
border: 1px solid var(--ant-color-border);
background: color-mix(in srgb, var(--ant-color-bg-elevated) 78%, transparent);
}
.g2a-toolbar-cluster {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.g2a-toolbar-cluster.is-search {
flex: 1 1 260px;
min-width: 200px;
}
.g2a-toolbar-cluster.is-search .g2a-input {
flex: 1 1 180px;
min-width: 140px;
max-width: 320px;
}
.g2a-toolbar-cluster.is-danger {
margin-left: auto;
}
.g2a-toolbar-sep {
width: 1px;
height: 22px;
background: var(--ant-color-border);
margin: 0 2px;
flex: 0 0 1px;
}
.g2a-filter-label {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ant-color-text-tertiary);
margin: 8px 0 6px;
}
.g2a-status-chip-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 10px;
}
.g2a-selection-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin: 0 0 10px;
padding: 8px 12px;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--g2a-signal) 16%, var(--ant-color-border));
background: color-mix(in srgb, var(--g2a-signal) 6%, transparent);
font-size: 12.5px;
color: var(--ant-color-text-secondary);
}
.g2a-selection-bar:empty,
.g2a-selection-bar.is-empty {
display: none;
}
/* Card head actions wrap cleanly on narrow */
.g2a-card-head-stack .g2a-card-actions {
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
}
@media (min-width: 960px) {
.g2a-card-head-stack {
align-items: flex-start;
}
.g2a-card-head-stack .g2a-card-actions {
width: auto;
max-width: 58%;
justify-content: flex-end;
}
}
/* Settings form denser rows */
.g2a-settings-section .g2a-form-grid,
.g2a-settings-section .g2a-form-row {
gap: 12px 14px;
}
.g2a-settings-section .g2a-card-head p {
max-width: 68ch;
}
/* Keys issued banner */
.g2a-key-issued {
margin-top: 14px;
padding: 14px !important;
border-radius: 12px !important;
}
/* Table action cell denser */
.g2a-table td.g2a-actions {
display: table-cell;
}
.g2a-table .g2a-actions:not(td) {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
.g2a-table .g2a-btn-sm {
height: 28px;
padding: 0 9px;
font-size: 12px;
}
.g2a-cell-stack {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.g2a-cell-sub {
font-size: 0.72rem;
color: var(--ant-color-text-tertiary);
font-family: var(--mono);
white-space: nowrap;
}
/* Utility: hide without fighting display:none rules */
.g2a-hidden { display: none !important; }
@media (max-width: 720px) {
.g2a-dialog {
width: calc(100vw - 16px);
max-height: calc(100vh - 16px);
border-radius: 14px;
}
.g2a-dialog-head,
.g2a-dialog-body,
.g2a-dialog-foot {
padding-left: 14px;
padding-right: 14px;
}
.g2a-toolbar-cluster.is-danger {
margin-left: 0;
width: 100%;
}
.g2a-toolbar-sep { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.g2a-dialog[open],
.g2a-dialog::backdrop {
animation: none !important;
}
}
.g2a-reg-mail-help {
margin: 0 !important;
padding: 10px 12px !important;
font-size: 12.5px !important;
line-height: 1.55 !important;
}
.g2a-import-controls-export {
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed color-mix(in srgb, var(--g2a-signal) 12%, var(--ant-color-border));
}
/* Keep dialog form grid full-width span working */
.g2a-dialog-body .g2a-form-grid .g2a-field-span2,
.g2a-dialog-body .g2a-form-grid .g2a-reg-section {
grid-column: 1 / -1;
}
/* Status filter chips denser */
#acc-status-chips .g2a-btn,
.g2a-status-chip-row .g2a-btn,
.g2a-status-chip-row button {
height: 28px;
padding: 0 10px;
font-size: 12px;
border-radius: 999px;
}
/* ═══════════════════════════════════════════════════════════
Theme parity · type scale applications · light polish
═══════════════════════════════════════════════════════════ */
/* Type scale wiring */
.g2a-page-kicker,
.g2a-section-kicker,
.g2a-dialog-kicker,
.g2a-settings-nav-label,
.g2a-filter-label,
.g2a-reg-section-label {
font-size: var(--text-xs);
letter-spacing: var(--tracking-kicker);
font-weight: var(--fw-medium);
}
.g2a-header h1 {
letter-spacing: var(--tracking-tight);
line-height: var(--lh-tight);
}
.g2a-header p,
.g2a-card-head p,
.card-head p {
font-size: var(--text-sm);
line-height: var(--lh-body);
}
.g2a-card-head h3, .card-head h3, .g2a-card h3 {
font-size: var(--text-md);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-tight);
}
.g2a-btn, .btn {
font-size: var(--text-base);
font-weight: var(--fw-medium);
}
.g2a-btn-primary, .btn.primary, .btn-primary {
background: var(--g2a-btn-primary-bg);
color: var(--g2a-on-signal) !important;
box-shadow: var(--g2a-btn-primary-shadow);
font-weight: var(--fw-semibold);
}
.g2a-btn-primary:hover, .btn.primary:hover, .btn-primary:hover {
background: var(--g2a-btn-primary-bg-hover);
color: var(--g2a-on-signal) !important;
}
.g2a-btn-danger:hover, .btn.danger:hover {
color: var(--g2a-danger-text);
background: var(--g2a-danger-soft);
}
.g2a-menu-item.is-active {
color: var(--g2a-on-active);
}
.g2a-logo,
.g2a-logo-lg {
color: var(--g2a-on-signal);
}
.g2a-muted, .muted {
font-size: var(--text-sm);
}
.g2a-input, input, select, textarea {
font-size: var(--text-base);
}
.g2a-table, table {
font-size: var(--text-sm);
}
.g2a-tag, .pill {
font-size: var(--text-xs);
font-weight: var(--fw-medium);
}
/* Light: elevated surfaces have real depth, not flat white-on-white */
html[data-theme="light"] .g2a-card,
html[data-theme="light"] .card {
background:
linear-gradient(180deg, color-mix(in srgb, var(--g2a-signal) 3%, #fff), #fff 50%);
box-shadow:
0 1px 0 rgba(255,255,255,.8) inset,
0 8px 24px rgba(15, 23, 42, 0.045);
border-color: rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .stat,
html[data-theme="light"] .g2a-stat,
html[data-theme="light"] .g2a-stat-card {
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
html[data-theme="light"] .g2a-subcard {
background: var(--g2a-elevated);
}
html[data-theme="light"] .g2a-input,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
background: #fff;
border-color: rgba(15, 23, 42, 0.12);
}
html[data-theme="light"] .g2a-input:focus,
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
border-color: color-mix(in srgb, var(--g2a-signal) 55%, var(--ant-color-border));
box-shadow: 0 0 0 3px var(--g2a-signal-dim);
}
html[data-theme="light"] .g2a-tag,
html[data-theme="light"] .pill {
background: rgba(15, 23, 42, 0.03);
}
html[data-theme="light"] .g2a-btn-default,
html[data-theme="light"] .btn.ghost {
background: #fff;
}
html[data-theme="light"] .g2a-btn:hover,
html[data-theme="light"] .btn:hover {
background: var(--g2a-signal-dim);
}
html[data-theme="light"] .g2a-acc-toolbar,
html[data-theme="light"] .g2a-filter-bar,
html[data-theme="light"] .g2a-settings-nav {
background: color-mix(in srgb, #fff 92%, var(--g2a-void));
border-color: rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .g2a-selection-bar {
background: var(--g2a-signal-dim);
border-color: var(--g2a-signal-border);
color: var(--g2a-ink-2);
}
html[data-theme="light"] .g2a-dialog {
background: #fff;
border-color: rgba(15, 23, 42, 0.1);
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.14);
}
html[data-theme="light"] .g2a-dialog::backdrop {
background:
radial-gradient(800px 400px at 50% 20%, rgba(15, 118, 110, 0.08), transparent 55%),
rgba(15, 23, 42, 0.45);
}
html[data-theme="light"] .g2a-dialog-head {
background: color-mix(in srgb, var(--g2a-signal) 5%, #fff);
}
html[data-theme="light"] .g2a-dialog-foot {
background: #f8fafc;
}
html[data-theme="light"] .g2a-message,
html[data-theme="light"] #toast {
background: rgba(255,255,255,0.92);
border-color: rgba(15, 23, 42, 0.1);
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}
html[data-theme="light"] .g2a-message.err,
html[data-theme="light"] #toast.text-bg-danger {
color: var(--g2a-danger-text);
}
html[data-theme="light"] .g2a-form-error {
color: var(--g2a-danger-text);
background: var(--g2a-danger-soft);
border-color: var(--g2a-danger-border);
}
html[data-theme="light"] .g2a-login-body {
background:
radial-gradient(900px 480px at 50% -10%, rgba(15, 118, 110, 0.1), transparent 55%),
radial-gradient(700px 400px at 100% 100%, rgba(3, 105, 161, 0.06), transparent 50%),
var(--g2a-void);
}
html[data-theme="light"] .g2a-login-panel.g2a-card {
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.1);
}
html[data-theme="light"] .g2a-login-chip {
color: var(--mono-chip-text);
background: var(--mono-chip-bg);
border-color: var(--g2a-signal-border);
}
html[data-theme="light"] .g2a-conn-list-compact .g2a-conn-item {
background: #fff;
}
html[data-theme="light"] .g2a-quick-tile {
background: #fff;
}
html[data-theme="light"] .g2a-quick-tile:hover {
color: var(--g2a-signal-hot) !important;
}
html[data-theme="light"] .g2a-mobile-nav a.is-active,
html[data-theme="light"] .mobile-nav a.is-active,
html[data-theme="light"] .g2a-mobile-nav a.active,
html[data-theme="light"] .mobile-nav a.active {
color: var(--g2a-on-signal);
background: var(--g2a-btn-primary-bg);
}
/* Light table */
html[data-theme="light"] .g2a-table th,
html[data-theme="light"] table th {
color: var(--g2a-ink-2);
background: var(--table-head-bg);
}
html[data-theme="light"] .g2a-table tr:hover td {
background: color-mix(in srgb, var(--g2a-signal) 5%, transparent);
}
/* Light code remains terminal-dark for scanability */
html[data-theme="light"] .g2a-code,
html[data-theme="light"] .g2a-log {
/* panel tokens already override when present */
}
/* Status reg tags: soft tokens work in both themes */
.g2a-reg-status-tag[data-reg-state="running"],
.g2a-reg-status-tag[data-reg-state="starting"],
.g2a-reg-status-tag[data-reg-state="registering"],
.g2a-reg-status-tag[data-reg-state="solving_turnstile"],
.g2a-reg-status-tag[data-reg-state="waiting_email"],
.g2a-reg-status-tag[data-reg-state="probing"] {
color: var(--g2a-signal-text);
background: var(--g2a-signal-soft);
border-color: var(--g2a-signal-border);
}
.g2a-reg-status-tag[data-reg-state="imported"],
.g2a-reg-status-tag[data-reg-state="success"],
.g2a-reg-status-tag[data-reg-state="completed"],
.g2a-reg-status-tag[data-reg-state="done"] {
color: var(--g2a-ok-text);
background: var(--g2a-ok-soft);
border-color: var(--g2a-ok-border);
}
.g2a-reg-status-tag[data-reg-state="error"],
.g2a-reg-status-tag[data-reg-state="failed"],
.g2a-reg-status-tag[data-reg-state="partial"] {
color: var(--g2a-danger-text);
background: var(--g2a-danger-soft);
border-color: var(--g2a-danger-border);
}
.g2a-reg-status-tag[data-reg-state="stopping"] {
color: var(--g2a-warn-text);
background: var(--g2a-warn-soft);
border-color: var(--g2a-warn-border);
}
/* Font rendering */
.g2a-body {
font-optical-sizing: auto;
}
.mono, .g2a-code-inline, code,
.g2a-brand-sub,
.g2a-page-kicker,
.g2a-section-kicker,
.g2a-stat-chip,
.g2a-count-pill,
.g2a-login-chip {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
}
/* ═══════════════════════════════════════════════════════════
RESPONSIVE + LIGHT SIDER + CODE THEME + TABLE DENSITY
═══════════════════════════════════════════════════════════ */
/* Light sider surfaces */
html[data-theme="light"] .g2a-sider {
box-shadow: inset -1px 0 0 rgba(15, 118, 110, 0.06);
}
html[data-theme="light"] .g2a-sider::before {
background: linear-gradient(180deg, rgba(15, 118, 110, 0.06), transparent);
}
html[data-theme="light"] .g2a-sider-foot {
border-top-color: rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .g2a-menu-item.is-active {
color: var(--g2a-on-active);
background: linear-gradient(90deg, rgba(15, 118, 110, 0.14), rgba(15, 118, 110, 0.04));
border-color: rgba(15, 118, 110, 0.2);
box-shadow: inset 3px 0 0 var(--g2a-signal), 0 4px 14px rgba(15, 118, 110, 0.08);
}
html[data-theme="light"] .g2a-menu-item.is-active .g2a-menu-ico {
color: var(--g2a-on-active);
}
html[data-theme="light"] .g2a-brand-title {
color: var(--sider-text-strong);
}
html[data-theme="light"] .g2a-brand-sub {
color: var(--sider-text-muted);
}
/* Light table density — tighter ops rows */
html[data-theme="light"] .g2a-table th,
html[data-theme="light"] .g2a-table td,
html[data-theme="light"] table th,
html[data-theme="light"] table td {
padding: 8px 10px;
}
html[data-theme="light"] .g2a-table th,
html[data-theme="light"] table th {
font-size: 11px;
letter-spacing: 0.05em;
}
html[data-theme="light"] .g2a-table,
html[data-theme="light"] table {
font-size: 12.5px;
}
html[data-theme="light"] .g2a-table-wrap,
html[data-theme="light"] .table-responsive {
border-color: rgba(15, 23, 42, 0.08);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
html[data-theme="light"] .g2a-table .g2a-btn-sm {
height: 26px;
padding: 0 8px;
font-size: 11.5px;
}
html[data-theme="light"] .g2a-table-usage th,
html[data-theme="light"] .g2a-table-usage td {
padding: 7px 8px;
}
/* Optional light code theme (html[data-code-theme="light"]) */
html[data-code-theme="light"] .g2a-code,
html[data-code-theme="light"] .g2a-log,
html[data-code-theme="light"] .codebox,
html[data-code-theme="light"] pre.code,
html[data-code-theme="light"] #device-log,
html[data-code-theme="light"] #reg-log,
html[data-code-theme="light"] #probe-result,
html[data-code-theme="light"] #sso-result,
html[data-code-theme="light"] #guide-curl,
html[data-code-theme="light"] #guide-py,
html[data-code-theme="light"] #guide-anthropic,
html[data-code-theme="light"] #guide-linux {
background: var(--code-panel-bg, #f1f5f9) !important;
border-color: var(--code-panel-border, #d5dee9) !important;
color: var(--code-panel-text, #1e293b) !important;
box-shadow: none !important;
}
html[data-code-theme="light"] .g2a-code-inline,
html[data-code-theme="light"] code.g2a-code-inline,
html[data-code-theme="light"] #new-key-value,
html[data-code-theme="light"] #device-code,
html[data-code-theme="light"] #reg-email,
html[data-code-theme="light"] #guide-base,
html[data-code-theme="light"] #guide-model {
background: #e6f7f4;
border-color: rgba(15, 118, 110, 0.22);
color: #0f766e;
}
/* Code theme toggle control */
.g2a-code-toggle {
appearance: none;
display: inline-flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 11px;
border-radius: 999px;
border: 1px solid var(--ant-color-border);
background: color-mix(in srgb, var(--ant-color-bg-elevated) 90%, transparent);
color: var(--ant-color-text-secondary);
font-size: 12.5px;
font-family: var(--font);
cursor: pointer;
transition: .15s ease;
white-space: nowrap;
}
.g2a-code-toggle:hover {
border-color: color-mix(in srgb, var(--g2a-signal) 40%, var(--ant-color-border));
color: var(--g2a-signal-hot);
}
.g2a-code-toggle.is-on {
color: var(--g2a-signal-hot);
border-color: color-mix(in srgb, var(--g2a-signal) 45%, var(--ant-color-border));
background: var(--g2a-signal-dim);
}
.g2a-code-toggle .ico {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
}
html[data-theme="dark"] .g2a-code-toggle {
/* still available in dark if user wants light panels on dark UI */
}
/* ── Responsive shell ── */
.g2a-burger {
display: none;
appearance: none;
width: 38px;
height: 34px;
border-radius: 10px;
border: 1px solid var(--ant-color-border);
background: color-mix(in srgb, var(--ant-color-bg-elevated) 90%, transparent);
color: var(--ant-color-text);
cursor: pointer;
align-items: center;
justify-content: center;
flex: 0 0 auto;
padding: 0;
}
.g2a-burger svg { width: 18px; height: 18px; display: block; }
.g2a-burger:hover {
border-color: color-mix(in srgb, var(--g2a-signal) 40%, var(--ant-color-border));
color: var(--g2a-signal-hot);
}
.g2a-sider-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(5, 8, 14, 0.48);
backdrop-filter: blur(3px);
z-index: 35;
}
body.g2a-nav-open .g2a-sider-backdrop { display: block; }
@media (max-width: 1100px) {
:root, html[data-theme="dark"], html[data-theme="light"] {
--sider-w: 220px;
--space-page-x: 20px;
}
.g2a-stat-grid, #stats-grid {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
}
@media (max-width: 960px) {
.g2a-burger { display: inline-flex; }
.g2a-sider {
display: flex !important;
position: fixed;
left: 0; top: 0; bottom: 0;
width: min(280px, 86vw);
flex: none;
transform: translateX(-105%);
transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 40;
box-shadow: 12px 0 40px rgba(0,0,0,.28);
}
body.g2a-nav-open .g2a-sider {
transform: translateX(0);
}
.g2a-mobile-nav, .mobile-nav {
display: flex;
}
.g2a-header {
position: sticky;
top: 0;
padding: 14px 16px 10px;
gap: 10px;
}
.g2a-header > div:first-child { min-width: 0; flex: 1; }
.g2a-header-actions {
gap: 6px;
}
.g2a-header-actions .g2a-theme-toggle .label,
.g2a-header-actions .g2a-code-toggle .label {
display: none;
}
.g2a-content {
padding: 12px 16px 40px;
}
.g2a-grid-2, .grid-2 { grid-template-columns: 1fr; }
.g2a-form-grid { grid-template-columns: 1fr; }
.g2a-acc-toolbar {
padding: 10px;
gap: 8px;
}
.g2a-toolbar-cluster.is-search {
flex: 1 1 100%;
}
.g2a-toolbar-cluster.is-search .g2a-input {
max-width: none;
}
.g2a-toolbar-sep { display: none; }
.g2a-card-head-stack .g2a-card-actions {
width: 100%;
max-width: none !important;
justify-content: flex-start;
}
.g2a-settings-nav {
top: 8px;
position: sticky;
}
.g2a-dialog {
width: calc(100vw - 20px);
max-height: calc(100vh - 20px);
}
.g2a-quick-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.g2a-stat-grid, #stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.g2a-info-tiles {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.g2a-header h1 { font-size: 18px; }
.g2a-header p { font-size: 12px; }
.g2a-page-kicker { font-size: 10px; }
.g2a-card, .card { padding: 12px; margin-bottom: 10px; }
.g2a-card::before, .card::before { top: 10px; bottom: 10px; width: 2px; }
.g2a-stat-grid, #stats-grid {
grid-template-columns: 1fr;
}
.g2a-quick-grid {
grid-template-columns: 1fr;
}
.g2a-stat-num { font-size: 22px; }
.g2a-conn-list-compact { grid-template-columns: 1fr; }
.g2a-login-chips { gap: 5px; }
.g2a-pager {
gap: 6px;
}
.g2a-pager .g2a-btn { flex: 1 1 auto; }
.g2a-table-wrap {
border-radius: 10px;
}
/* Dense tables scroll inside .g2a-table-wrap — never expand the page */
.g2a-table-wrap .g2a-table {
min-width: 720px;
}
body[data-page="usage"] .g2a-table-wrap .g2a-table,
body[data-page="logs"] .g2a-table-wrap .g2a-table {
min-width: 640px;
}
.g2a-header-actions .g2a-btn#btn-refresh {
padding: 0 10px;
}
.g2a-code-toggle { padding: 0 9px; }
.g2a-theme-toggle { padding: 0 9px; }
}
@media (max-width: 400px) {
.g2a-header-actions .g2a-tag { display: none; }
}
/* Prevent overflow on all main shells */
.g2a-main,
.g2a-content,
.g2a-card,
.g2a-table-wrap {
min-width: 0;
max-width: 100%;
}
.g2a-layout {
min-width: 0;
width: 100%;
overflow-x: clip;
}
.g2a-content {
overflow-x: clip;
}
.g2a-card .g2a-table-wrap,
.g2a-card .table-responsive {
max-width: 100%;
}
.g2a-header-actions {
max-width: 100%;
}
img, svg, video {
max-width: 100%;
}
/* ═══════════════════════════════════════════════════════════
Settings top tab bar (panel switch — no long scroll)
═══════════════════════════════════════════════════════════ */
body[data-page="settings"] .g2a-content {
max-width: 1100px;
}
.g2a-settings-nav.g2a-settings-tabs {
position: sticky;
top: 58px;
z-index: 11;
margin: 0 0 16px;
padding: 12px 14px 12px;
border-radius: 14px;
border: 1px solid color-mix(in srgb, var(--g2a-signal) 14%, var(--ant-color-border));
background: color-mix(in srgb, var(--ant-color-bg-container) 90%, transparent);
backdrop-filter: blur(14px) saturate(1.15);
-webkit-backdrop-filter: blur(14px) saturate(1.15);
box-shadow:
0 0 0 1px rgba(255,255,255,.03),
0 10px 28px rgba(0,0,0,.14);
}
html[data-theme="light"] .g2a-settings-nav.g2a-settings-tabs {
background: color-mix(in srgb, #fff 94%, var(--g2a-void));
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
border-color: rgba(15, 23, 42, 0.08);
}
.g2a-settings-nav.g2a-settings-tabs .g2a-settings-nav-label {
margin: 0 0 10px;
font-size: 10.5px;
letter-spacing: 0.14em;
color: var(--g2a-signal);
opacity: 0.9;
}
.g2a-settings-nav.g2a-settings-tabs .g2a-settings-nav-track {
display: flex;
flex-wrap: nowrap;
gap: 6px;
overflow-x: auto;
padding-bottom: 2px;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--g2a-signal) 35%, transparent) transparent;
-webkit-overflow-scrolling: touch;
}
.g2a-settings-nav.g2a-settings-tabs .g2a-settings-nav-item {
flex: 0 0 auto;
height: 36px;
padding: 0 14px;
border-radius: 999px;
gap: 7px;
font-size: 13px;
white-space: nowrap;
background: color-mix(in srgb, var(--ant-color-bg-elevated) 70%, transparent);
}
.g2a-settings-tab-ico {
font-size: 12px;
opacity: 0.85;
font-family: var(--mono);
line-height: 1;
}
.g2a-settings-nav.g2a-settings-tabs .g2a-settings-nav-item.is-active {
color: var(--g2a-on-signal);
background: var(--g2a-btn-primary-bg);
border-color: transparent;
box-shadow: var(--g2a-btn-primary-shadow);
}
.g2a-settings-nav.g2a-settings-tabs .g2a-settings-nav-item.is-active .g2a-settings-tab-ico {
opacity: 1;
}
html[data-theme="light"] .g2a-settings-nav.g2a-settings-tabs .g2a-settings-nav-item {
background: #fff;
color: var(--g2a-ink-2);
}
html[data-theme="light"] .g2a-settings-nav.g2a-settings-tabs .g2a-settings-nav-item:hover {
color: var(--g2a-signal-hot);
background: var(--g2a-signal-dim);
border-color: var(--g2a-signal-border);
}
html[data-theme="light"] .g2a-settings-nav.g2a-settings-tabs .g2a-settings-nav-item.is-active,
html[data-theme="light"] .g2a-settings-nav.g2a-settings-tabs .g2a-settings-nav-item.is-active:hover {
color: #f0fdfa !important;
background: var(--g2a-btn-primary-bg) !important;
border-color: transparent !important;
box-shadow: var(--g2a-btn-primary-shadow);
}
html[data-theme="light"] .g2a-settings-nav.g2a-settings-tabs .g2a-settings-nav-item.is-active .g2a-settings-tab-ico,
html[data-theme="light"] .g2a-settings-nav.g2a-settings-tabs .g2a-settings-nav-item.is-active .g2a-settings-tab-text {
color: #f0fdfa !important;
}
/* Only one panel visible */
.g2a-settings-panels {
min-height: 280px;
}
.g2a-settings-section[hidden],
.g2a-settings-section[aria-hidden="true"]:not(.is-active) {
display: none !important;
}
.g2a-settings-section.is-active {
display: block;
animation: g2a-settings-panel-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes g2a-settings-panel-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
.g2a-settings-section {
scroll-margin-top: 0;
margin-bottom: 0;
}
.g2a-settings-foot {
margin-top: 14px;
}
/* Wider forms inside single panel */
.g2a-settings-section .g2a-form-grid {
max-width: 820px;
}
body[data-page="settings"] .g2a-settings-section > .g2a-form-grid[style*="max-width"],
body[data-page="settings"] .g2a-settings-section form.g2a-form-grid {
max-width: 640px !important;
}
@media (max-width: 960px) {
.g2a-settings-nav.g2a-settings-tabs {
top: 0;
margin: 0 -4px 12px;
border-radius: 12px;
padding: 10px 10px 10px;
}
.g2a-settings-nav.g2a-settings-tabs .g2a-settings-nav-item {
height: 34px;
padding: 0 12px;
font-size: 12.5px;
}
}
@media (max-width: 520px) {
.g2a-settings-tab-text {
/* keep text — labels matter more than icons on settings */
}
.g2a-settings-nav.g2a-settings-tabs .g2a-settings-nav-label {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.g2a-settings-section.is-active { animation: none !important; }
}
/* Light theme: never leave black/void chrome from dark paint-lock */
html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] .g2a-body {
background-color: #eef3f8;
color: var(--g2a-ink, #0b1220);
}
html[data-theme="light"] .g2a-body {
background:
radial-gradient(900px 480px at 8% -10%, rgba(13, 148, 136, 0.09), transparent 55%),
radial-gradient(700px 360px at 100% 0%, rgba(2, 132, 199, 0.06), transparent 50%),
linear-gradient(180deg, rgba(255,255,255,0.65), transparent 100px),
#eef3f8;
}
html[data-theme="light"] .g2a-layout,
html[data-theme="light"] .g2a-main {
background: transparent;
}
html[data-theme="dark"],
html[data-theme="dark"] body {
background-color: #070a10;
}
/* ═══════════════════════════════════════════════════════════
EDGE / BORDER VISUAL LIFT — clearer surface boundaries
═══════════════════════════════════════════════════════════ */
/* Core surfaces */
.g2a-card, .card,
.g2a-subcard,
.g2a-dialog,
.g2a-login-panel.g2a-card,
.g2a-acc-toolbar,
.g2a-filter-bar,
.g2a-settings-nav,
.g2a-settings-nav.g2a-settings-tabs,
.g2a-device-panel,
.g2a-reg-progress,
.g2a-sso-progress,
.g2a-empty,
.empty-state,
.g2a-info-tile,
.g2a-quick-tile,
.g2a-conn-list-compact .g2a-conn-item,
.g2a-login-probe,
.g2a-selection-bar,
.stat, .g2a-stat, .g2a-stat-card {
border-color: var(--g2a-edge, var(--ant-color-border));
}
.g2a-card:hover,
.card:hover {
border-color: var(--g2a-edge-strong, var(--g2a-line-strong));
}
/* Nested / compact panels */
.g2a-subcard,
.device-result,
.g2a-login-probe,
.g2a-conn-list-compact .g2a-conn-item,
.g2a-info-tile,
.g2a-quick-tile {
box-shadow:
0 0 0 1px color-mix(in srgb, var(--g2a-signal) 7%, transparent),
0 1px 0 var(--g2a-edge-inset, rgba(255,255,255,.03)) inset;
}
/* Inputs / selects / textarea */
.g2a-input, input, select, textarea {
border-color: var(--g2a-edge, var(--ant-color-border));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--g2a-signal) 4%, transparent);
}
.g2a-input:focus, input:focus, select:focus, textarea:focus {
border-color: color-mix(in srgb, var(--g2a-signal) 62%, var(--g2a-line-strong)) !important;
box-shadow: 0 0 0 3px var(--g2a-signal-dim), 0 0 0 1px color-mix(in srgb, var(--g2a-signal) 35%, transparent) !important;
}
/* Buttons */
.g2a-btn, .btn {
border-color: var(--g2a-edge, var(--ant-color-border));
}
.g2a-btn:hover, .btn:hover {
border-color: color-mix(in srgb, var(--g2a-signal) 48%, var(--g2a-line-strong));
}
.g2a-btn-default, .btn.ghost, .btn-outline-secondary {
border-color: var(--g2a-edge-strong, var(--g2a-line-strong));
}
/* Tags / chips */
.g2a-tag, .pill,
.g2a-stat-chip,
.g2a-login-chip,
.g2a-count-pill,
.g2a-check-chip {
border-color: var(--g2a-edge, var(--ant-color-border));
}
/* Theme / code toggles */
.g2a-theme-toggle,
.g2a-code-toggle,
.g2a-burger {
border-color: var(--g2a-edge-strong, var(--g2a-line-strong));
}
/* Code / log blocks */
.g2a-code, .g2a-log, .codebox, pre.code,
#device-log, #reg-log, #probe-result, #sso-result,
#guide-curl, #guide-py, #guide-anthropic, #guide-linux {
border-color: var(--g2a-edge-strong, var(--ant-color-border));
box-shadow:
0 0 0 1px color-mix(in srgb, var(--g2a-signal) 8%, transparent),
inset 0 1px 0 rgba(255,255,255,.03);
}
/* Dialog */
.g2a-dialog {
border-color: var(--g2a-edge-strong, var(--ant-color-border)) !important;
box-shadow:
0 0 0 1px color-mix(in srgb, var(--g2a-signal) 14%, transparent),
0 28px 80px rgba(0,0,0,.5),
0 0 48px color-mix(in srgb, var(--g2a-signal) 8%, transparent) !important;
}
.g2a-dialog-head {
border-bottom-color: var(--g2a-edge, var(--ant-color-border)) !important;
}
.g2a-dialog-foot {
border-top-color: var(--g2a-edge, var(--ant-color-border)) !important;
}
.g2a-dialog-close {
border: 1px solid var(--g2a-edge, var(--ant-color-border));
}
/* Settings tabs */
.g2a-settings-nav.g2a-settings-tabs {
border-color: var(--g2a-edge-strong, var(--ant-color-border)) !important;
box-shadow:
0 0 0 1px color-mix(in srgb, var(--g2a-signal) 10%, transparent),
0 10px 28px rgba(0,0,0,.14) !important;
}
.g2a-settings-nav-item {
border-color: var(--g2a-edge, var(--ant-color-border));
}
/* Toolbar / filter / selection */
.g2a-acc-toolbar,
.g2a-filter-bar {
border-color: var(--g2a-edge-strong, var(--ant-color-border)) !important;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--g2a-signal) 7%, transparent);
}
.g2a-selection-bar {
border-color: var(--g2a-signal-border) !important;
}
.g2a-toolbar-sep {
background: var(--g2a-line-strong) !important;
opacity: 0.9;
}
/* Sider */
.g2a-sider {
border-right: 1px solid var(--sider-border) !important;
}
.g2a-sider-foot {
border-top: 1px solid color-mix(in srgb, var(--sider-border) 85%, transparent) !important;
}
.g2a-menu-item {
border-color: transparent;
}
.g2a-menu-item:hover {
border-color: color-mix(in srgb, var(--g2a-signal) 18%, transparent);
}
.g2a-menu-item.is-active {
border-color: color-mix(in srgb, var(--g2a-signal) 30%, transparent) !important;
}
/* Stats */
.stat, .g2a-stat, .g2a-stat-card {
border: 1px solid var(--g2a-edge, var(--ant-color-border));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--g2a-signal) 5%, transparent);
}
.stat:hover, .g2a-stat:hover {
border-color: color-mix(in srgb, var(--g2a-signal) 50%, var(--g2a-line-strong)) !important;
}
/* Usage bars panel */
.g2a-usage-bars {
border-color: var(--g2a-edge-strong, var(--ant-color-border)) !important;
}
/* Mobile nav chips */
.g2a-mobile-nav a,
.mobile-nav a {
border-color: var(--g2a-edge, var(--ant-color-border)) !important;
}
/* Toast */
.g2a-message, #toast, .toast {
border-color: var(--g2a-edge-strong, var(--ant-color-border)) !important;
}
/* Light-specific edge polish — slightly denser ink lines */
html[data-theme="light"] .g2a-card,
html[data-theme="light"] .card {
border-color: rgba(15, 23, 42, 0.12) !important;
box-shadow:
0 0 0 1px color-mix(in srgb, var(--g2a-signal) 10%, rgba(15, 23, 42, 0.06)),
0 1px 0 rgba(255,255,255,.9) inset,
0 8px 22px rgba(15, 23, 42, 0.05) !important;
}
html[data-theme="light"] .g2a-table-wrap,
html[data-theme="light"] .table-responsive {
border-color: rgba(15, 23, 42, 0.14) !important;
box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.06), 0 4px 14px rgba(15, 23, 42, 0.04);
}
html[data-theme="light"] .g2a-input,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
border-color: rgba(15, 23, 42, 0.16) !important;
}
html[data-theme="light"] .g2a-btn,
html[data-theme="light"] .btn {
border-color: rgba(15, 23, 42, 0.14);
}
html[data-theme="light"] .g2a-btn-default {
border-color: rgba(15, 23, 42, 0.18);
}
html[data-theme="light"] .g2a-table th,
html[data-theme="light"] .g2a-table td,
html[data-theme="light"] table th,
html[data-theme="light"] table td {
border-bottom-color: rgba(15, 23, 42, 0.1);
}
html[data-theme="light"] .g2a-sider {
border-right-color: rgba(15, 23, 42, 0.14) !important;
box-shadow: inset -1px 0 0 rgba(15, 118, 110, 0.08);
}
html[data-theme="light"] .g2a-acc-toolbar,
html[data-theme="light"] .g2a-filter-bar,
html[data-theme="light"] .g2a-settings-nav,
html[data-theme="light"] .g2a-settings-nav.g2a-settings-tabs {
border-color: rgba(15, 23, 42, 0.12) !important;
}
html[data-theme="light"] .g2a-dialog {
border-color: rgba(15, 23, 42, 0.14) !important;
box-shadow:
0 0 0 1px color-mix(in srgb, var(--g2a-signal) 12%, rgba(15, 23, 42, 0.08)),
0 24px 64px rgba(15, 23, 42, 0.14) !important;
}
html[data-theme="light"] .g2a-code,
html[data-theme="light"] .g2a-log {
border-color: var(--code-panel-border, #c5d0de) !important;
}
/* Divider utility used by import export splits */
.g2a-import-controls-export {
border-top-color: var(--g2a-edge, var(--ant-color-border)) !important;
}
.g2a-dialog-body .g2a-reg-section {
border-top-color: var(--g2a-edge, var(--ant-color-border)) !important;
}
/* ═══════════════════════════════════════════════════════════
LOG RESULT + ACCOUNTS POOL POLISH
═══════════════════════════════════════════════════════════ */
/* Result column — fixed icon gutter so 成功/失败 align */
.g2a-result-tag,
.g2a-status-pill {
display: inline-flex !important;
align-items: center;
gap: 0;
min-width: 4.4em;
justify-content: flex-start;
font-variant-numeric: tabular-nums;
}
.g2a-result-ico,
.g2a-status-ico {
display: none !important; /* unified CSS dots only */
}
/* Logs table: 结果 column */
body[data-page="logs"] .g2a-table th:last-child,
body[data-page="logs"] .g2a-table td:last-child {
width: 88px;
min-width: 88px;
white-space: nowrap;
}
body[data-page="logs"] .g2a-table td:last-child {
vertical-align: middle;
}
/* Accounts page layout */
body[data-page="accounts"] .g2a-content {
max-width: 1440px;
}
body[data-page="accounts"] .g2a-card-compact {
padding: 12px 16px !important;
}
body[data-page="accounts"] .g2a-device-card .g2a-device-panel {
margin: 0 !important;
border-style: solid;
}
body[data-page="accounts"] .g2a-device-panel {
background:
linear-gradient(135deg, color-mix(in srgb, var(--g2a-signal) 8%, transparent), transparent 55%),
color-mix(in srgb, var(--ant-color-bg-elevated) 88%, transparent);
}
body[data-page="accounts"] .g2a-acc-inventory .g2a-card-head-stack {
margin-bottom: 10px;
}
body[data-page="accounts"] .g2a-acc-section {
margin: 0 0 8px;
}
body[data-page="accounts"] .g2a-acc-toolbar {
margin-bottom: 12px;
}
/* Account table cells */
body[data-page="accounts"] .g2a-table {
font-size: 12.5px;
}
body[data-page="accounts"] .g2a-table th,
body[data-page="accounts"] .g2a-table td {
padding: 10px 10px;
vertical-align: middle;
}
body[data-page="accounts"] .g2a-acc-check {
width: 36px;
text-align: center;
}
body[data-page="accounts"] .g2a-acc-email {
font-weight: 550;
letter-spacing: -0.01em;
color: var(--ant-color-text);
}
body[data-page="accounts"] .g2a-acc-usage {
font-size: 12px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
body[data-page="accounts"] .g2a-usage-ok { color: var(--g2a-ok); font-weight: 600; }
body[data-page="accounts"] .g2a-usage-bad { color: var(--g2a-danger); font-weight: 600; }
body[data-page="accounts"] .g2a-usage-sep {
margin: 0 3px 0 1px;
opacity: 0.65;
font-size: 10px;
}
/* meta-pills rules in stack section */
/* actions layout defined in accounts stack section */
body[data-page="accounts"] .g2a-acc-pool .g2a-status-pill {
max-width: 160px;
}
body[data-page="accounts"] .g2a-acc-type {
min-width: 72px;
}
body[data-page="accounts"] .g2a-acc-quota {
min-width: 140px;
font-size: 12px;
}
body[data-page="accounts"] .g2a-acc-probe {
min-width: 140px;
font-size: 12px;
}
body[data-page="accounts"] .g2a-acc-expiry {
min-width: 140px;
font-size: 12px;
}
/* Status chips row denser on accounts */
body[data-page="accounts"] .g2a-status-chip-row {
margin-bottom: 8px;
}
body[data-page="accounts"] #quota-summary:empty {
display: none;
}
/* Light accounts table denser still */
html[data-theme="light"] body[data-page="accounts"] .g2a-table th,
html[data-theme="light"] body[data-page="accounts"] .g2a-table td {
padding: 8px 9px;
}
@media (max-width: 960px) {
body[data-page="accounts"] .g2a-acc-actions {
max-width: 180px;
}
body[data-page="accounts"] .g2a-card-actions .g2a-check-chip {
width: 100%;
}
}
/* ═══════════════════════════════════════════════════════════
ACCOUNTS TABLE — only Email/ID is content-sized
═══════════════════════════════════════════════════════════ */
body[data-page="accounts"] .g2a-table-wrap {
overflow-x: auto;
max-width: 100%;
width: 100%;
min-width: 0;
contain: inline-size;
}
body[data-page="accounts"] .g2a-table {
table-layout: auto;
width: max-content; /* allow horizontal scroll inside wrap when dense */
min-width: 100%;
max-width: none;
font-size: 12.5px;
}
body[data-page="accounts"] .g2a-table th,
body[data-page="accounts"] .g2a-table td {
padding: 9px 10px;
vertical-align: middle;
}
/* Checkbox */
body[data-page="accounts"] .g2a-acc-check {
width: 36px;
text-align: center;
padding-left: 8px;
padding-right: 6px;
}
/* Email / ID — hug content, but hard-cap so table stays inside card */
body[data-page="accounts"] .g2a-acc-idcol,
body[data-page="accounts"] .g2a-table th.g2a-acc-idcol,
body[data-page="accounts"] .g2a-table thead th:nth-child(2) {
width: 1%;
max-width: 240px;
white-space: nowrap;
padding-right: 14px;
}
body[data-page="accounts"] .g2a-acc-idcell {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
width: max-content;
max-width: 240px;
min-width: 0;
}
body[data-page="accounts"] .g2a-acc-email {
font-weight: 550;
letter-spacing: -0.01em;
color: var(--ant-color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 240px;
}
body[data-page="accounts"] .g2a-acc-idcell .g2a-cell-sub {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 240px;
font-size: 0.7rem;
}
/* Other columns — restore normal flexible layout (not content-shrunk) */
body[data-page="accounts"] .g2a-acc-token {
white-space: nowrap;
}
body[data-page="accounts"] .g2a-acc-type {
min-width: 72px;
white-space: nowrap;
}
body[data-page="accounts"] .g2a-acc-pool {
white-space: nowrap;
}
body[data-page="accounts"] .g2a-acc-pool .g2a-status-pill {
max-width: 160px;
}
body[data-page="accounts"] .g2a-acc-usage {
white-space: nowrap;
font-size: 12px;
font-variant-numeric: tabular-nums;
}
body[data-page="accounts"] .g2a-acc-quota {
min-width: 140px;
font-size: 12px;
}
body[data-page="accounts"] .g2a-acc-probe {
min-width: 140px;
font-size: 12px;
}
/* Expiry / meta — 3 rows: 时间 / 剩余 / 可续期+有SSO */
body[data-page="accounts"] .g2a-acc-expiry {
min-width: 128px;
max-width: 168px;
font-size: 12px;
vertical-align: middle;
overflow: hidden;
}
body[data-page="accounts"] .g2a-acc-expiry-stack {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
min-width: 0;
max-width: 100%;
}
body[data-page="accounts"] .g2a-acc-expiry .g2a-expiry {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
min-width: 0;
max-width: 100%;
}
body[data-page="accounts"] .g2a-acc-expiry .g2a-expiry-abs {
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
body[data-page="accounts"] .g2a-acc-meta-pills {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 4px;
margin-top: 0;
max-width: 100%;
overflow: hidden;
}
body[data-page="accounts"] .g2a-acc-meta-pills .g2a-tag {
flex: 0 0 auto;
}
/* Actions — 2 rows inside a normal table cell (never flex the | ) */
body[data-page="accounts"] td.g2a-acc-actions {
display: table-cell !important;
vertical-align: middle;
width: 1%;
min-width: 148px;
max-width: 200px;
overflow: hidden;
border-bottom: 1px solid color-mix(in srgb, var(--g2a-line-strong) 70%, var(--ant-color-border));
border-left: 0;
border-right: 0;
background: transparent;
box-shadow: none;
outline: none;
white-space: normal;
}
body[data-page="accounts"] .g2a-acc-actions-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
max-width: 100%;
min-width: 0;
overflow: hidden;
}
body[data-page="accounts"] .g2a-acc-actions-row {
display: flex;
flex-wrap: wrap; /* keep buttons inside cell border */
align-items: center;
gap: 4px;
max-width: 100%;
}
body[data-page="accounts"] .g2a-acc-actions-row .g2a-btn-sm {
height: 26px;
padding: 0 8px;
font-size: 11.5px;
flex: 0 0 auto;
}
body[data-page="accounts"] th.g2a-acc-actions-col {
white-space: nowrap;
width: 1%;
}
body[data-page="accounts"] .g2a-table td.g2a-actions {
display: table-cell !important;
}
html[data-theme="light"] body[data-page="accounts"] .g2a-table th,
html[data-theme="light"] body[data-page="accounts"] .g2a-table td {
padding: 8px 9px;
}
@media (max-width: 960px) {
body[data-page="accounts"] .g2a-acc-actions {
max-width: 180px;
}
}
/* ═══════════════════════════════════════════════════════════
Card head inline controls — select + button stay one row
═══════════════════════════════════════════════════════════ */
.g2a-card-head-inline {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 12px 16px;
margin-bottom: 0 !important;
}
.g2a-card-head-inline > div:first-child {
min-width: 0;
flex: 1 1 auto;
}
.g2a-card-actions-inline {
display: inline-flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-end;
gap: 8px !important;
flex: 0 0 auto;
width: auto !important;
max-width: none !important;
margin: 0;
}
.g2a-field-control {
display: flex !important;
flex-direction: row !important;
align-items: center;
margin: 0 !important;
min-width: 0 !important;
flex: 0 0 auto !important;
width: auto !important;
}
.g2a-field-control > label {
display: none; /* use sr-only / title on control */
}
.g2a-card-actions-inline .g2a-field-inline,
.g2a-card-actions-inline .g2a-field-sm {
margin: 0 !important;
min-width: 0 !important;
flex: 0 0 auto !important;
width: auto !important;
}
.g2a-card-actions-inline .g2a-input-inline,
.g2a-card-actions-inline select.g2a-input,
.g2a-card-actions-inline .g2a-field-control .g2a-input {
width: auto !important;
min-width: 148px;
max-width: 260px;
height: 34px;
margin: 0;
}
.g2a-card-actions-inline .g2a-btn {
flex: 0 0 auto;
white-space: nowrap;
}
/* Accounts strategy bar stays compact */
body[data-page="accounts"] .g2a-card-compact .g2a-card-head-inline {
flex-wrap: nowrap;
}
body[data-page="accounts"] .g2a-card-compact .g2a-card-actions-inline .g2a-input-inline {
min-width: 200px;
max-width: 280px;
}
/* Usage summary controls */
body[data-page="usage"] .g2a-card-actions-inline .g2a-input-inline,
body[data-page="usage"] .g2a-card-actions-inline select.g2a-input {
min-width: 120px;
max-width: 160px;
}
@media (max-width: 640px) {
.g2a-card-head-inline {
flex-wrap: wrap;
}
.g2a-card-actions-inline {
width: 100% !important;
justify-content: flex-start;
}
.g2a-card-actions-inline .g2a-input-inline,
.g2a-card-actions-inline select.g2a-input {
flex: 1 1 auto;
min-width: 0;
max-width: none;
}
}
/* ═══════════════════════════════════════════════════════════
Usage summary stats — 6 cards in one row, fill card width
═══════════════════════════════════════════════════════════ */
body[data-page="usage"] #usage-stats-grid.g2a-stat-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
width: 100%;
min-width: 0;
overflow: hidden; /* never spill past card edge */
box-sizing: border-box;
}
body[data-page="usage"] #usage-stats-grid > .stat,
body[data-page="usage"] #usage-stats-grid > .g2a-stat-card {
min-width: 0;
min-height: 0;
width: 100%;
max-width: 100%;
padding: 12px 12px 10px;
box-sizing: border-box;
overflow: hidden;
}
body[data-page="usage"] #usage-stats-grid .g2a-stat-top {
gap: 4px;
min-width: 0;
}
body[data-page="usage"] #usage-stats-grid .g2a-stat-top .label {
font-size: 11px;
letter-spacing: 0.02em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
flex: 1 1 auto;
}
body[data-page="usage"] #usage-stats-grid .g2a-stat-chip {
flex: 0 0 auto;
font-size: 9px;
padding: 0 5px;
height: 18px;
line-height: 18px;
}
body[data-page="usage"] #usage-stats-grid .g2a-stat-hero,
body[data-page="usage"] #usage-stats-grid .value {
font-size: 18px !important;
font-weight: 700 !important;
letter-spacing: -0.03em !important;
line-height: 1.15 !important;
margin-top: 8px !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
min-width: 0;
}
body[data-page="usage"] #usage-stats-grid .sub {
font-size: 11px;
line-height: 1.35;
margin-top: 6px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
white-space: normal;
max-width: 100%;
}
/* kill decorative glow blob that can paint outside tight cards */
body[data-page="usage"] #usage-stats-grid .stat::after,
body[data-page="usage"] #usage-stats-grid .g2a-stat::after {
display: none;
}
/* Breakpoints: keep 6-up as long as practical, then fold cleanly */
@media (max-width: 1280px) {
body[data-page="usage"] #usage-stats-grid.g2a-stat-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
body[data-page="usage"] #usage-stats-grid.g2a-stat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
body[data-page="usage"] #usage-stats-grid .g2a-stat-hero,
body[data-page="usage"] #usage-stats-grid .value {
font-size: 16px !important;
}
}
@media (max-width: 420px) {
body[data-page="usage"] #usage-stats-grid.g2a-stat-grid {
grid-template-columns: 1fr;
}
}
/* Logs table — status column left-aligned with header */
body[data-page="logs"] .g2a-table th.g2a-logs-status,
body[data-page="logs"] .g2a-table td.g2a-logs-status,
body[data-page="logs"] .g2a-table th:nth-child(3),
body[data-page="logs"] .g2a-table td:nth-child(3) {
text-align: left !important;
}
/* Logs table — progress column left-aligned with header */
body[data-page="logs"] .g2a-table th.g2a-logs-progress,
body[data-page="logs"] .g2a-table td.g2a-logs-progress,
body[data-page="logs"] .g2a-table th:nth-child(5),
body[data-page="logs"] .g2a-table td:nth-child(5) {
text-align: left !important;
font-variant-numeric: tabular-nums;
}
/* Logs table — summary: fixed layout, max 5 lines + ellipsis (clamp INNER, not | ) */
body[data-page="logs"] .g2a-table-wrap {
max-width: 100%;
overflow-x: auto;
}
body[data-page="logs"] .g2a-table {
table-layout: fixed;
width: 100%;
min-width: 720px;
}
body[data-page="logs"] .g2a-table th:nth-child(1),
body[data-page="logs"] .g2a-table td:nth-child(1) {
width: 150px;
}
body[data-page="logs"] .g2a-table th:nth-child(2),
body[data-page="logs"] .g2a-table td:nth-child(2) {
width: 120px;
}
body[data-page="logs"] .g2a-table th:nth-child(3),
body[data-page="logs"] .g2a-table td:nth-child(3) {
width: 100px;
}
body[data-page="logs"] .g2a-table th:nth-child(5),
body[data-page="logs"] .g2a-table td:nth-child(5) {
width: 120px;
}
body[data-page="logs"] .g2a-table th:nth-child(6),
body[data-page="logs"] .g2a-table td:nth-child(6) {
width: 88px;
}
body[data-page="logs"] .g2a-table th.g2a-logs-summary,
body[data-page="logs"] .g2a-table td.g2a-logs-summary,
body[data-page="logs"] .g2a-table th:nth-child(4),
body[data-page="logs"] .g2a-table td:nth-child(4) {
text-align: left !important;
width: auto;
min-width: 160px;
/* remaining width after fixed cols — stays inside table */
}
body[data-page="logs"] .g2a-table td.g2a-logs-summary,
body[data-page="logs"] .g2a-table td:nth-child(4) {
vertical-align: top;
/* Keep table-cell box model intact for borders */
overflow: hidden;
}
body[data-page="logs"] .g2a-logs-summary-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
line-clamp: 5;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
line-height: 1.45;
font-size: 12.5px;
max-height: calc(1.45em * 5);
max-width: 100%;
}
@media (max-width: 900px) {
body[data-page="logs"] .g2a-logs-summary-text {
max-width: 100%;
}
}
body[data-page="logs"] .g2a-table td.g2a-logs-progress,
body[data-page="logs"] .g2a-table td:nth-child(5) {
font-family: var(--mono);
}
/* ═══════════════════════════════════════════════════════════
TABLE ROW CONTAINMENT — never spill past card border
═══════════════════════════════════════════════════════════ */
/* All list pages: wrap owns the scrollbar */
body[data-page="accounts"] .g2a-table-wrap,
body[data-page="keys"] .g2a-table-wrap,
body[data-page="logs"] .g2a-table-wrap,
body[data-page="usage"] .g2a-table-wrap,
body[data-page="models"] .g2a-table-wrap {
max-width: 100%;
width: 100%;
min-width: 0;
overflow-x: auto;
contain: inline-size;
}
/* Tags / pills in table cells must not force unbounded width */
.g2a-table .g2a-tag,
.g2a-table .g2a-status-pill,
.g2a-table .pill {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
/* Quota / probe cells: constrain nested text */
body[data-page="accounts"] .g2a-acc-quota,
body[data-page="accounts"] .g2a-acc-probe {
max-width: 200px;
overflow: hidden;
}
body[data-page="accounts"] .g2a-acc-quota .g2a-muted,
body[data-page="accounts"] .g2a-acc-probe .g2a-muted {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Logs / keys tables scroll in wrap */
body[data-page="keys"] .g2a-table {
width: max-content;
min-width: 100%;
}
/* logs table uses fixed layout (summary clamp) — see logs summary rules */
body[data-page="logs"] .g2a-table {
width: 100%;
min-width: 720px;
table-layout: fixed;
}
|