/* Design tokens. * Single source of truth for color, spacing, radius, shadow, type, motion. * Edit values here; do not hardcode in components. */ :root { color-scheme: light; /* ---- Type ----------------------- */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-30: 30px; --fw-regular: 450; --fw-medium: 550; --fw-semibold: 650; --fw-bold: 750; --fw-black: 800; --lh-tight: 1.25; --lh-base: 1.5; /* ---- Spacing scale (4px base) ----------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; /* ---- Radius ----------------------- */ --radius-1: 4px; --radius-2: 6px; --radius-3: 8px; --radius-4: 12px; --radius-pill: 999px; /* ---- Shadow / elevation --------------- */ --shadow-1: 0 1px 2px rgba(15, 23, 42, .06); --shadow-2: 0 4px 12px rgba(15, 23, 42, .06); --shadow-3: 0 8px 24px rgba(15, 23, 42, .08); --shadow-4: 0 16px 40px rgba(15, 23, 42, .10); /* ---- Motion --------------- */ --motion-fast: 120ms; --motion-base: 180ms; --motion-slow: 280ms; --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); /* ---- Color palette (raw) ------------------- */ --c-brand-50: #fff1ec; --c-brand-100: #ffd9cb; --c-brand-300: #ffa085; --c-brand-500: #e95f3f; --c-brand-600: #cf4b2c; --c-brand-700: #a73722; --c-gray-25: #fbfbfc; --c-gray-50: #f6f7f9; --c-gray-100: #f3f4f6; --c-gray-200: #e8edf2; --c-gray-300: #e5e7eb; --c-gray-400: #d5dde5; --c-gray-500: #98a2b3; --c-gray-600: #667085; --c-gray-700: #475467; --c-gray-800: #344054; --c-gray-900: #111827; --c-success-50: #ecfdf3; --c-success-200: #a6f4c5; --c-success-600: #027a48; --c-success-700: #047857; --c-warning-50: #fff8e8; --c-warning-200: #ffd27a; --c-warning-700: #b45309; --c-danger-50: #fff1ee; --c-danger-200: #ffb3a7; --c-danger-600: #dc2626; --c-danger-700: #a73722; --c-info-50: #e0f2fe; --c-info-700: #075985; /* ---- Semantic surface ------------------- */ --surface-app: var(--c-gray-50); --surface-panel: #ffffff; --surface-soft: var(--c-gray-100); --surface-elevated: rgba(255, 255, 255, .96); --surface-overlay: rgba(15, 23, 42, .55); --text-primary: var(--c-gray-900); --text-secondary: var(--c-gray-700); --text-muted: var(--c-gray-600); --text-inverse: #ffffff; --border-subtle: var(--c-gray-200); --border-default: var(--c-gray-300); --border-strong: var(--c-gray-400); --focus-ring: 0 0 0 3px rgba(233, 95, 63, .25); /* ---- Legacy aliases (DO NOT remove without sweep) ----------------- */ --primary: var(--c-brand-500); --muted: var(--text-muted); --border: var(--border-default); --panel: var(--surface-panel); --soft: var(--surface-soft); font-family: var(--font-sans); color: var(--text-primary); background: var(--surface-app); } /* Dark theme: opt-in via [data-theme="dark"] on or . * theme.js toggles this and persists in localStorage. */ [data-theme="dark"] { color-scheme: dark; --surface-app: #0f1115; --surface-panel: #161a22; --surface-soft: #1d2230; --surface-elevated: rgba(22, 26, 34, .96); --surface-overlay: rgba(0, 0, 0, .6); --text-primary: #e6e8ed; --text-secondary: #c2c7d0; --text-muted: #8b94a3; --text-inverse: #0f1115; --border-subtle: #232938; --border-default: #2b3243; --border-strong: #394155; --shadow-1: 0 1px 2px rgba(0, 0, 0, .35); --shadow-2: 0 4px 12px rgba(0, 0, 0, .35); --shadow-3: 0 8px 24px rgba(0, 0, 0, .45); --shadow-4: 0 16px 40px rgba(0, 0, 0, .55); --primary: var(--c-brand-500); --muted: var(--text-muted); --border: var(--border-default); --panel: var(--surface-panel); --soft: var(--surface-soft); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* Element resets and global typography. */ * { box-sizing: border-box; } html, body { margin: 0; min-height: 100vh; color: var(--text-primary); background: var(--surface-app); } a { color: var(--primary); } h1 { margin: 10px 0 20px; font-size: var(--fs-30); letter-spacing: 0; } h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-5); font-size: var(--fs-24); letter-spacing: 0; } h3 { margin: var(--space-2) 0; font-size: var(--fs-18); } label { display: block; margin: var(--space-3) 0 var(--space-1); font-weight: var(--fw-semibold); font-size: var(--fs-14); color: var(--text-secondary); } input, select, textarea { width: 100%; border: 1px solid var(--border-default); border-radius: var(--radius-2); font: inherit; color: var(--text-primary); background: var(--surface-panel); transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); } input, select { height: 42px; padding: 0 12px; } textarea { min-height: 112px; padding: 11px 12px; line-height: var(--lh-base); resize: vertical; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--c-brand-500); box-shadow: var(--focus-ring); } button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 38px; border: 0; border-radius: var(--radius-3); padding: 0 15px; background: var(--primary); color: var(--text-inverse); font: inherit; font-weight: var(--fw-bold); cursor: pointer; white-space: nowrap; transition: background var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); } button:hover { background: var(--c-brand-600); } button:active { transform: translateY(1px); } button:focus-visible { outline: none; box-shadow: var(--focus-ring); } button.ghost { color: var(--text-secondary); background: var(--surface-soft); border: 1px solid var(--border-default); } button.ghost:hover { background: var(--c-gray-200); } button.danger { color: var(--c-danger-700); background: var(--c-danger-50); border: 1px solid var(--c-danger-200); } button.danger:hover { background: #ffe1d8; } button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: .58; cursor: not-allowed; } code { font-family: var(--font-mono); word-break: break-all; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; border-bottom: 1px solid var(--border-subtle); padding: 13px 8px; vertical-align: middle; } th { color: var(--text-muted); font-size: var(--fs-13); font-weight: var(--fw-semibold); } .table-wrap { overflow-x: auto; } .material-symbols-outlined { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 21px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; vertical-align: middle; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; } ::selection { background: var(--c-brand-100); color: var(--c-brand-700); } /* App shell, sidebar, content area. */ .app-frame { min-height: 100vh; display: grid; grid-template-columns: 280px minmax(0, 1fr); background: radial-gradient(1100px 600px at -10% -20%, rgba(233, 95, 63, .07), transparent 60%), radial-gradient(900px 500px at 110% 0%, rgba(99, 102, 241, .05), transparent 60%), var(--surface-app); } .sidebar { min-height: 100vh; background: var(--surface-elevated); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; backdrop-filter: saturate(140%) blur(8px); } .sidebar-footer { margin-top: auto; padding: var(--space-4); border-top: 1px solid var(--border-subtle); color: var(--text-muted); } .traffic { display: flex; gap: 10px; padding: 26px 22px 12px; } .traffic i { width: 14px; height: 14px; border-radius: 50%; display: block; } .traffic i:nth-child(1) { background: #ff5f57; } .traffic i:nth-child(2) { background: #ffbd2e; } .traffic i:nth-child(3) { background: #28c840; } .brand-row, .brand-block { display: flex; align-items: center; gap: var(--space-3); padding: 4px 22px 18px; text-decoration: none; color: var(--text-primary); } .brand-block strong { display: block; font-size: var(--fs-16); font-weight: var(--fw-bold); } .brand-block small { display: block; color: var(--text-muted); font-size: var(--fs-12); } .brand-mark { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-3); background: linear-gradient(135deg, var(--c-brand-500), var(--c-brand-300)); color: #fff; font-size: 22px; box-shadow: var(--shadow-1); } .sidebar nav { padding: 6px 12px; display: flex; flex-direction: column; gap: 2px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-3); color: var(--text-secondary); font-weight: var(--fw-semibold); text-decoration: none; transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out); } .nav-item:hover { background: var(--surface-soft); color: var(--text-primary); } .nav-item.active { background: var(--c-brand-50); color: var(--c-brand-700); } [data-theme="dark"] .nav-item.active { background: rgba(233, 95, 63, .14); color: #ffb59c; } .logout { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--text-muted); border: 1px solid var(--border-default); padding: 8px 12px; border-radius: var(--radius-3); font-weight: var(--fw-semibold); } .logout:hover { color: var(--c-danger-600); border-color: var(--c-danger-200); } .content-shell { padding: 28px 32px 64px; min-width: 0; } .content-shell { transition: opacity var(--motion-fast) var(--ease-out), filter var(--motion-fast) var(--ease-out); } .is-navigating .content-shell { opacity: .72; filter: saturate(.9); } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; } .topbar h1 { display: flex; align-items: center; gap: 12px; margin: 0; } .topbar p { margin: 4px 0 0; color: var(--text-muted); font-size: var(--fs-14); } .page-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-3); background: var(--surface-soft); color: var(--c-brand-600); font-size: 22px; } .top-actions { display: flex; align-items: center; gap: 10px; } .search-box { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; background: var(--surface-soft); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); color: var(--text-muted); } .search-box input { height: auto; border: 0; padding: 0; background: transparent; min-width: 180px; } .icon-button { width: 38px; height: 38px; padding: 0; background: var(--surface-soft); color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); } .icon-button:hover { background: var(--c-gray-200); color: var(--text-primary); } [data-theme="dark"] .icon-button:hover { background: var(--border-subtle); } /* Panels, mini cards, alerts. */ .login-panel, .panel, .mini-card { background: rgba(255,255,255,.96); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .05); } .panel { padding: 26px; } .panel-head, .quota-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .mini-card { padding: 18px; } .mini-card span { display: block; color: var(--muted); } .mini-card strong { font-size: 28px; } .muted { color: var(--muted); } .muted-section { opacity: .82; } .muted-message { opacity: .86; } .muted-cell { color: var(--muted); text-align: center; } .danger-text { color: #dc2626; } .narrow-panel { max-width: 560px; } .alert, .key-once { padding: 14px 16px; border-radius: 8px; background: #ecfdf3; border: 1px solid #a6f4c5; } .alert-error { background: #fff1ee; border-color: #ffb3a7; } .empty-inline, .empty-state { text-align: center; color: var(--muted); padding: 40px 16px; } .empty-inline .material-symbols-outlined, .empty-state .material-symbols-outlined { font-size: 56px; opacity: .28; } .empty-state strong { display: block; margin-top: 10px; color: var(--text-primary); } .empty-state p { margin: 6px auto 0; max-width: 520px; } .kv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); } .kv-row span { color: var(--text-muted); } .kv-row strong { color: var(--text-primary); font-weight: var(--fw-bold); text-align: right; } /* Form rows, switches, segmented controls, key cells. */ .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--border); } .setting-row.no-border { border-bottom: 0; } .setting-row p { margin: 0 0 5px; font-weight: 760; font-size: 18px; } .setting-row span { color: var(--muted); } .settings-actions { display: flex; justify-content: flex-end; margin-top: 18px; } .endpoint-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 42px; align-items: center; gap: 10px; margin: 10px 0; } .endpoint-row > span { justify-self: stretch; text-align: center; color: #667085; background: var(--soft); border-radius: 6px; padding: 6px 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; } .endpoint-row code { min-width: 0; overflow: auto; white-space: nowrap; background: #f3f3f5; border-radius: 10px; padding: 13px 16px; font-size: 18px; } .method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 22px; } .method-form { min-width: 0; } .method-form button { margin-top: 12px; } .create-key-form { display: flex; align-items: center; gap: 10px; } .create-key-form input { width: 240px; } .key-once { background: #fff8e8; border-color: #ffd27a; } .key-once span { display: block; font-weight: 800; margin-bottom: 8px; } .key-cell { display: flex; align-items: center; gap: 8px; min-width: 360px; } .key-cell code { flex: 1 1 auto; overflow-x: auto; white-space: nowrap; background: #f3f3f5; border-radius: 7px; padding: 8px 10px; } .key-cell .copy-button { width: 34px; min-height: 34px; flex: 0 0 auto; background: #eef1f4; border: 1px solid #dde3ea; border-radius: 7px; } .legacy-key { display: grid; gap: 4px; } .legacy-key small { color: var(--muted); font-size: 11px; } .key-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; } .key-actions form { margin: 0; } .form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .is-submitting { opacity: .72; pointer-events: none; transition: opacity var(--motion-fast) var(--ease-out); } .compact-check, .inline-checks label { display: inline-flex; align-items: center; gap: 6px; color: #344054; font-size: 12px; font-weight: 750; white-space: nowrap; } .inline-checks { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 10px; } /* Toggle switches in three sizes. */ .switch { position: relative; display: inline-block; width: 56px; height: 32px; margin: 0; } .switch input { opacity: 0; width: 0; height: 0; } .switch span { position: absolute; inset: 0; cursor: pointer; border-radius: 999px; background: #e5e7eb; transition: .2s; } .switch span:before { content: ""; position: absolute; width: 26px; height: 26px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: .2s; } .switch input:checked + span { background: var(--primary); } .switch input:checked + span:before { transform: translateX(24px); } .compact-switch { width: 42px; height: 24px; } .compact-switch span:before { width: 18px; height: 18px; } .compact-switch input:checked + span:before { transform: translateX(18px); } .row-switch { width: 46px; height: 26px; } .row-switch span:before { width: 20px; height: 20px; } .row-switch input:checked + span:before { transform: translateX(20px); } /* Override global `button` styles so master toggles stay pill-shaped. */ button.mini-toggle, .mini-toggle { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; box-sizing: border-box; width: 34px; min-width: 34px; max-width: 34px; height: 20px; min-height: 20px; max-height: 20px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: #d0d5dd; vertical-align: middle; cursor: pointer; appearance: none; -webkit-appearance: none; font: inherit; line-height: 0; color: inherit; flex: 0 0 34px; gap: 0; white-space: normal; box-shadow: none; transform: none; transition: background .16s ease; } button.mini-toggle:hover, .mini-toggle:hover { background: #c3c9d3; transform: none; } button.mini-toggle:active, .mini-toggle:active { transform: none; } button.mini-toggle i, button.mini-toggle::after, .mini-toggle i, .mini-toggle::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; left: 2px; top: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: left .16s ease; pointer-events: none; } /* Prefer real knob node when present; ::after is fallback for empty buttons. */ button.mini-toggle i, .mini-toggle i { content: none; display: block; } button.mini-toggle.on, .mini-toggle.on { background: var(--primary); } button.mini-toggle.on:hover, .mini-toggle.on:hover { background: var(--c-brand-600, var(--primary)); } button.mini-toggle.on i, button.mini-toggle.on::after, .mini-toggle.on i, .mini-toggle.on::after { left: 16px; } button.mini-toggle::-moz-focus-inner { border: 0; padding: 0; } .level-row { display: flex; justify-content: flex-end; gap: 8px; } .seg input { display: none; } .seg span { display: inline-flex; min-width: 70px; justify-content: center; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); cursor: pointer; } .seg input:checked + span { color: #fff; background: var(--primary); border-color: var(--primary); } /* Status pills, chips, dots. */ .status-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 9px; font-size: 12px; font-weight: 800; } .status-pill.ok { color: #027a48; background: #ecfdf3; } .status-pill.off { color: #667085; background: #f2f4f7; } .status-pill.error { color: #dc2626; background: #fff1ee; } .status-pill.warning { color: var(--c-warning-700); background: var(--c-warning-50); } .status-pill.info { color: var(--c-info-700); background: var(--c-info-50); } .status-pill .status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .status-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 20px; border-radius: 999px; padding: 3px 8px; font-size: 12px; font-weight: 800; } .status-chip.default { color: #667085; background: #f2f4f7; } .status-chip.ok { color: #075985; background: #e0f2fe; } .status-chip.warning { color: var(--c-warning-700); background: var(--c-warning-50); } .status-chip.error { color: var(--c-danger-600); background: var(--c-danger-50); } .status-chip.info { color: var(--c-info-700); background: var(--c-info-50); } .status-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: #3b82f6; } .status-chip .material-symbols-outlined { font-size: 13px; } .status-text { color: #667085; font-size: 15px; } .auth-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 8px; color: #344054; background: #f2f4f7; font-size: 11px; font-weight: 800; } .live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #10b981; margin-right: 4px; } .token-pair { white-space: nowrap; font-variant-numeric: tabular-nums; } .token-pair span { color: #ef6b4a; } .token-pair b { color: #10b981; font-weight: 700; } /* Segmented and period tabs. */ .segmented-tabs, .period-tabs { display: inline-flex; align-items: center; border-radius: 10px; background: #f1f3f6; padding: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.72); } .segmented-tabs a, .period-tabs a { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; border-radius: 8px; padding: 0 20px; color: #667085; text-decoration: none; font-weight: 800; } .period-tabs a { min-width: 72px; min-height: 36px; font-size: 14px; } .segmented-tabs a.active, .period-tabs a.active { color: #111827; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.11); } .auth-tab-buttons { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 8px; background: #eef1f4; border: 1px solid #dde3ea; } .auth-tab-button { min-height: 34px; padding: 0 12px; border-radius: 6px; background: transparent; border-color: transparent; color: #475467; font-size: 13px; font-weight: 800; } .auth-tab-button .material-symbols-outlined { font-size: 18px; } .auth-tab-button.active { background: #fff; color: #111827; box-shadow: 0 1px 4px rgba(15,23,42,.10); } .provider-auth-tabs { display: grid; gap: 12px; } .auth-tab-pane[hidden] { display: none; } /* Provider listing cards and provider detail header. */ .provider-section { display: grid; gap: 16px; } .provider-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .provider-section-head h2 { margin: 0; } .provider-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .provider-card { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px; min-height: 84px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.94); color: inherit; text-decoration: none; box-shadow: 0 10px 28px rgba(31, 35, 40, .06); transition: border-color .16s, background .16s, transform .16s; } .provider-card:hover { border-color: #f5b6a7; background: #fff; transform: translateY(-1px); } .provider-card-main { display: flex; align-items: center; gap: 12px; min-width: 0; } .provider-card-text { min-width: 0; } .provider-card-text h3 { margin: 0 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; line-height: 1.15; } .provider-card-meta { display: flex; align-items: center; gap: 6px; min-height: 22px; } .provider-card-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 8px; background: color-mix(in srgb, var(--provider-color) 15%, white); color: var(--provider-color); } .provider-card-icon .material-symbols-outlined { font-size: 24px; } .provider-card-icon b, .provider-icon b { display: none; } .provider-card-actions { display: flex; align-items: center; gap: 8px; color: var(--muted); } .chevron { opacity: .58; } .provider-auth-pill { display: inline-flex; min-height: 20px; align-items: center; border-radius: 999px; padding: 3px 8px; color: #1d4ed8; background: #eff6ff; font-size: 12px; font-weight: 800; text-transform: uppercase; } .back-link { display: inline-flex; align-items: center; gap: 7px; justify-self: start; color: var(--muted); text-decoration: none; font-weight: 750; } .back-link:hover { color: var(--primary); } .provider-detail-hero { display: grid; gap: 22px; } .provider-links { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 13px; } .provider-links code { color: #344054; background: #f2f4f7; border-radius: 6px; padding: 3px 6px; } .provider-head p { margin: -10px 0 0; color: var(--muted); } .provider-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .provider-row.no-border { padding: 0; border: 0; } .provider-main { display: flex; align-items: center; gap: 14px; min-width: 0; } .provider-main h3, .method-form h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; } .provider-main p { margin: 0 0 10px; color: var(--muted); } .provider-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 8px; background: color-mix(in srgb, var(--provider-color) 15%, white); color: var(--provider-color); } .model-badges { display: flex; flex-wrap: wrap; gap: 7px; } .model-badges span { display: inline-flex; border-radius: 999px; background: #f2f4f7; color: #344054; font-size: 12px; font-weight: 800; padding: 5px 9px; } .provider-breadcrumb { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; font-weight: 700; } .provider-breadcrumb a { color: var(--muted); text-decoration: none; } .provider-breadcrumb a:hover { color: var(--primary); } .provider-breadcrumb .material-symbols-outlined { font-size: 18px; opacity: .65; } .provider-breadcrumb strong { color: #1f2328; } .provider-detail-title { margin-top: 12px; } .provider-detail-title code { color: #344054; background: #f2f4f7; border-radius: 6px; padding: 2px 6px; } .link-button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; padding: 0 15px; color: #344054; background: #eef1f4; border: 1px solid #dde3ea; text-decoration: none; font-weight: 750; white-space: nowrap; } /* Logo wrapper: keep tinted square but render the PNG inside. */ .provider-logo { background: color-mix(in srgb, var(--provider-color) 12%, white); padding: 4px; } .provider-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; display: block; } .provider-card-icon.provider-logo .material-symbols-outlined, .provider-icon.provider-logo .material-symbols-outlined { display: none; } /* Provider list cards: full-card navigation with isolated toggle clicks. */ .provider-list-card { position: relative; } .provider-list-card .provider-card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .provider-list-card .provider-card-link:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } .provider-list-card .provider-card-main { position: relative; z-index: 2; pointer-events: none; min-width: 0; } .provider-list-card .provider-card-actions { position: relative; z-index: 3; flex: 0 0 auto; } .provider-list-card .mini-toggle { cursor: pointer; pointer-events: auto; z-index: 4; } .provider-list-card .mini-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Media provider dashboard cards. */ .media-kind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .media-provider-card { position: relative; min-height: 148px; align-items: stretch; cursor: pointer; } .media-provider-card:hover { border-color: color-mix(in srgb, var(--primary) 42%, var(--border)); transform: translateY(-1px); } .provider-card-link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; } .provider-card-link:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } .media-provider-card .provider-card-main { position: relative; z-index: 3; pointer-events: none; align-items: flex-start; width: 100%; min-width: 0; } .media-provider-card .provider-card-text { display: grid; min-width: 0; gap: 8px; } .media-provider-card .provider-card-text h3 { display: -webkit-box; min-height: auto; margin: 0; padding-right: 84px; white-space: normal; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .media-provider-card .provider-card-actions { display: flex; align-items: center; gap: 8px; position: absolute; z-index: 4; top: 18px; right: 18px; } .media-provider-card .provider-card-actions .icon-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; width: 42px; height: 42px; padding: 0; border-radius: 999px; line-height: 1; text-decoration: none; } .media-provider-card .provider-card-actions .icon-button .material-symbols-outlined { display: block; font-size: 20px; line-height: 1; } .media-provider-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .media-provider-lines { display: grid; gap: 7px; margin-top: 1px; max-width: 100%; } .media-provider-endpoint { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 7px; color: var(--text-muted); font-size: var(--fs-12); font-weight: var(--fw-semibold); line-height: 1.24; word-break: normal; overflow-wrap: break-word; } .media-provider-endpoint .material-symbols-outlined { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: 0 0 18px; font-size: 16px; line-height: 1; opacity: .64; } .media-provider-card .provider-card-icon { width: 42px; height: 42px; margin-top: 1px; } .media-provider-card .provider-card-icon .material-symbols-outlined { display: block; font-size: 24px; line-height: 1; } .novel-provider-title { margin-top: -6px; } .novel-config-card, .novel-test-card { display: grid; gap: 18px; } .novel-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 44px; margin: 0; } .novel-config-grid div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: start; } .novel-config-grid dt, .novel-form-row > span, .novel-request-head > span { color: var(--text-muted); font-size: var(--fs-12); font-weight: var(--fw-bold); text-transform: uppercase; } .novel-config-grid dd { min-width: 0; margin: 0; font-weight: var(--fw-semibold); color: var(--text-primary); overflow-wrap: anywhere; } .novel-config-grid code, .novel-form code { display: block; min-width: 0; border-radius: 8px; background: var(--surface-soft); padding: 9px 12px; color: var(--text-primary); overflow-wrap: anywhere; } .novel-form { display: grid; gap: 13px; } .novel-form-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; } .novel-input-wrap { position: relative; } .novel-input-wrap input, .novel-purchase-grid select, .novel-purchase-grid input { width: 100%; min-height: 42px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-panel); color: var(--text-primary); font: inherit; padding: 0 38px 0 14px; } .novel-input-wrap button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; background: transparent; color: var(--text-muted); } .novel-input-wrap button span { font-size: 18px; } .novel-checkbox-stack { display: flex; flex-wrap: wrap; gap: 10px 18px; } .novel-checkbox { display: inline-flex; align-items: center; gap: 8px; color: var(--text-primary); font-size: var(--fs-14); } .novel-checkbox input { width: 18px; height: 18px; } .novel-content-options { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; } .novel-limit-field { display: inline-grid; grid-template-columns: auto 82px; align-items: center; gap: 8px; margin: 0; color: var(--text-muted); font-size: var(--fs-12); font-weight: var(--fw-bold); } .novel-limit-field input { width: 82px; min-height: 34px; padding: 0 10px; } .novel-action-row, .novel-request-head div { display: flex; flex-wrap: wrap; gap: 8px; } .novel-action, .novel-run { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-panel); color: var(--text-muted); padding: 0 13px; font-size: var(--fs-12); font-weight: var(--fw-bold); } .novel-action:hover, .novel-run:hover { border-color: var(--primary); color: var(--primary); } .novel-action.active, .novel-run:not(.danger) { border-color: color-mix(in srgb, var(--primary) 40%, transparent); background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); } .novel-action.danger.active, .novel-run.danger { border-color: color-mix(in srgb, #ef4444 50%, transparent); background: color-mix(in srgb, #ef4444 11%, transparent); color: #dc2626; } .novel-run.danger { background: #ef4444; border-color: #ef4444; color: white; } .novel-action.running span, .novel-run.running span { animation: spin 1s linear infinite; } .novel-action span, .novel-run span, .novel-request-head .material-symbols-outlined { font-size: 17px; } .novel-purchase-grid { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; } .novel-purchase-grid select { padding-right: 14px; } .novel-purchase-grid input { padding-right: 14px; } .novel-request-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 4px; } .novel-code { margin: 0; border-radius: 8px; background: var(--surface-soft); color: var(--text-primary); padding: 14px; font-family: var(--font-mono); font-size: var(--fs-12); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } .novel-response { min-height: 124px; } .novel-live { display: inline-flex; width: fit-content; max-width: min(100%, 420px); min-height: 32px; max-height: 48px; align-items: center; justify-content: flex-start; border-radius: 999px; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); padding: 7px 12px; font-size: var(--fs-12); font-weight: var(--fw-bold); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; flex: 0 0 auto; align-self: start; } .novel-live[hidden] { display: none !important; } .novel-error { margin: 0; color: #dc2626; font-size: var(--fs-12); font-weight: var(--fw-semibold); } .novel-chapter-panel, .novel-preview { border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); } .novel-chapter-panel[hidden], .novel-preview[hidden] { display: none; } .novel-chapter-head, .novel-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--border); padding: 10px 12px; color: var(--text-muted); font-size: var(--fs-12); font-weight: var(--fw-bold); text-transform: uppercase; } .novel-chapter-head strong, .novel-preview-head strong { min-width: 0; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; text-transform: none; white-space: nowrap; } .novel-preview-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; } .novel-copy-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface, #fff); color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .novel-copy-btn:hover { background: var(--surface-hover, #f2f5f8); color: var(--text-primary); border-color: var(--primary); } .novel-copy-btn.copied { color: var(--success, #12805c); border-color: var(--success, #12805c); } .novel-copy-btn .material-symbols-outlined { font-size: 18px; } .novel-chapter-list { display: grid; max-height: 360px; overflow: auto; } .novel-chapter-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-height: 42px; border-bottom: 1px solid var(--border); padding: 6px 8px 6px 10px; } .novel-chapter-row:last-child { border-bottom: 0; } .novel-chapter-title { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; min-width: 0; min-height: 30px; border: 0; background: transparent; color: var(--text-primary); padding: 0; text-align: left; } .novel-chapter-title:hover { background: transparent; color: var(--primary); } .novel-chapter-title span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .novel-chapter-order { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-12); font-weight: var(--fw-bold); } .novel-chapter-fetch { min-height: 30px; border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); padding: 0 10px; font-size: var(--fs-12); } .novel-chapter-fetch span { font-size: 16px; } .novel-chapter-badge { border-radius: 999px; background: color-mix(in srgb, #16a34a 12%, transparent); color: #15803d; padding: 3px 7px; font-size: var(--fs-11); font-weight: var(--fw-bold); white-space: nowrap; } .novel-preview-body { max-height: 420px; overflow: auto; padding: 14px 16px; color: var(--text-primary); font-size: var(--fs-14); line-height: 1.8; } .novel-preview-body p { margin: 0 0 12px; } .novel-preview-body p:last-child { margin-bottom: 0; } .novel-font-warning { display: grid; gap: 9px; border-bottom: 1px solid color-mix(in srgb, #f59e0b 28%, var(--border)); background: color-mix(in srgb, #f59e0b 10%, var(--surface-soft)); padding: 11px 12px; } .novel-font-warning-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #92400e; font-size: var(--fs-13); font-weight: var(--fw-bold); } .novel-font-warning-title .material-symbols-outlined { font-size: 18px; } .novel-font-warning-title span:last-child { border-radius: 999px; background: color-mix(in srgb, #f59e0b 18%, transparent); padding: 2px 7px; font-size: var(--fs-11); } .novel-font-warning p { margin: 0; color: var(--text-primary); font-size: var(--fs-12); line-height: 1.55; } .novel-font-missing-list { display: grid; max-height: 180px; overflow: auto; border: 1px solid color-mix(in srgb, #f59e0b 24%, var(--border)); border-radius: 7px; } .novel-font-missing-row { display: grid; grid-template-columns: 58px 32px minmax(0, 1fr); gap: 8px; align-items: start; border-bottom: 1px solid color-mix(in srgb, #f59e0b 18%, var(--border)); padding: 7px 8px; color: var(--text-primary); font-size: var(--fs-12); } .novel-font-missing-row:last-child { border-bottom: 0; } .novel-font-missing-row code { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-11); } .novel-font-missing-row strong { color: #b45309; font-family: var(--font-mono); } .novel-font-missing-row span { min-width: 0; overflow-wrap: anywhere; line-height: 1.55; } .novel-pricing { border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); padding: 13px; } .novel-pricing-title { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--text-muted); font-size: var(--fs-12); font-weight: var(--fw-bold); text-transform: uppercase; } .novel-pricing-title span { font-size: 17px; } .novel-pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .novel-pricing-grid div { display: grid; gap: 4px; } .novel-pricing-grid span { color: var(--text-muted); font-size: var(--fs-12); } .novel-pricing-grid strong { color: var(--text-primary); font-size: var(--fs-14); overflow-wrap: anywhere; } .novel-pricing-grid strong.ok { color: #16a34a; } .novel-pricing-grid strong.danger { color: #dc2626; } .text-image-provider-title { margin-top: -6px; } .provider-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .text-image-config-card, .text-image-models-card, .text-image-test-card { display: grid; gap: 18px; } .text-image-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 44px; margin: 0; } .text-image-config-grid div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: start; } .text-image-config-grid dt, .text-image-form-row > span, .text-image-request-head > span { color: var(--text-muted); font-size: var(--fs-12); font-weight: var(--fw-bold); text-transform: uppercase; } .text-image-config-grid dd { min-width: 0; margin: 0; color: var(--text-primary); font-weight: var(--fw-semibold); overflow-wrap: anywhere; } .text-image-config-grid code, .text-image-form code { display: block; min-width: 0; border-radius: 8px; background: var(--surface-soft); padding: 9px 12px; color: var(--text-primary); overflow-wrap: anywhere; } .text-image-model-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 12px; } .text-image-model-card { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 11px; align-items: start; min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-panel); padding: 12px; cursor: pointer; transition: border-color .16s, background .16s; } .text-image-model-card { cursor: pointer; } .text-image-model-card.is-active { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent); } .text-image-model-card:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); background: var(--surface-soft); } .text-image-model-card > .material-symbols-outlined { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-size: 19px; line-height: 1; } .text-image-model-card div { min-width: 0; } .text-image-model-card strong { display: block; overflow: hidden; color: var(--text-primary); font-size: var(--fs-14); text-overflow: ellipsis; white-space: nowrap; } .text-image-model-card code, .text-image-model-card small { display: block; min-width: 0; overflow: hidden; color: var(--text-muted); font-size: var(--fs-11); text-overflow: ellipsis; white-space: nowrap; } .text-image-model-card code { margin-top: 4px; color: var(--text-primary); font-family: var(--font-mono); font-size: var(--fs-12); } .text-image-model-actions { display: flex; align-items: center; gap: 6px; } .text-image-form { display: grid; gap: 13px; } .text-image-form-row { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 18px; align-items: center; } .text-image-form-row[hidden] { display: none; } .text-image-form input, .text-image-form select { width: 100%; min-height: 42px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-panel); color: var(--text-primary); font: inherit; padding: 0 14px; } .text-image-input-wrap { position: relative; } .text-image-input-wrap input { padding-right: 38px; } .text-image-input-wrap button { position: absolute; top: 50%; right: 8px; width: 28px; height: 28px; transform: translateY(-50%); border: 0; background: transparent; color: var(--text-muted); } .text-image-input-wrap button span { font-size: 18px; } .text-image-request-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; } .text-image-request-head div { display: flex; flex-wrap: wrap; gap: 8px; } .text-image-request-head small { margin-left: 4px; color: var(--text-muted); font-size: var(--fs-12); font-weight: var(--fw-semibold); text-transform: none; } .text-image-run { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); padding: 0 13px; font-size: var(--fs-12); font-weight: var(--fw-bold); } .text-image-run:hover:not(:disabled) { border-color: var(--primary); } .text-image-run:disabled { opacity: .62; cursor: wait; } .text-image-run.running span { animation: spin 1s linear infinite; } .text-image-run span, .text-image-request-head .material-symbols-outlined { font-size: 17px; } .text-image-code { margin: 0; border-radius: 8px; background: var(--surface-soft); color: var(--text-primary); padding: 14px; font-family: var(--font-mono); font-size: var(--fs-12); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } .text-image-response { min-height: 124px; } .text-image-error { margin: 0; color: #dc2626; font-size: var(--fs-12); font-weight: var(--fw-semibold); } .text-image-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); padding: 12px; } .text-image-preview[hidden] { display: none; } .text-image-preview img { display: block; width: 100%; max-height: 360px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-panel); object-fit: contain; } .tts-preview { display: grid; gap: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); padding: 12px; } .tts-preview[hidden] { display: none; } .tts-preview audio { display: block; width: 100%; } .tts-preview small { color: var(--text-muted); font-size: var(--fs-12); overflow-wrap: anywhere; } .tts-session-panel { align-items: stretch; } .tts-session-form { display: grid; gap: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); padding: 16px; } .tts-session-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .tts-session-grid label { display: grid; gap: 6px; min-width: 0; } .tts-session-grid label > span { color: var(--text-muted); font-size: var(--fs-12); font-weight: var(--fw-bold); } .tts-session-form input, .tts-session-form select, .tts-session-form textarea { width: 100%; min-height: 42px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-panel); color: var(--text-primary); font: inherit; padding: 0 12px; } .tts-session-form textarea { min-height: 108px; padding: 10px 12px; } .tts-session-cookie { grid-column: 1 / -1; } .tts-session-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .tts-session-foot .compact-check { min-width: 0; color: var(--text-muted); line-height: var(--lh-base); white-space: normal; } .tts-session-foot .compact-check input { width: 16px; height: 16px; min-height: 16px; flex: 0 0 16px; margin: 0; padding: 0; accent-color: var(--primary); } .tts-session-foot button .material-symbols-outlined, .tts-inline-field .material-symbols-outlined { font-size: 18px; line-height: 1; } .media-session-list { display: grid; gap: 0; } .tts-session-panel .provider-row { padding: 13px 0; } .tts-picker-row { align-items: start; } .tts-inline-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .tts-inline-field button { min-height: 42px; } .nav-section-label { display: block; margin: 12px 12px 4px; color: var(--text-muted); font-size: var(--fs-11); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; } /* TTS dashboard redesign */ .media-tts-page { gap: 18px; } .media-tts-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .95fr); gap: 18px; align-items: stretch; padding: 18px; border: 1px solid var(--border-subtle); background: radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 16%, transparent), transparent 42%), linear-gradient(180deg, var(--surface-panel) 0%, color-mix(in srgb, var(--surface-soft) 55%, var(--surface-panel)) 100%); box-shadow: var(--shadow-2); } .media-tts-hero-copy { display: grid; align-content: start; gap: 10px; min-width: 0; } .media-tts-kicker, .media-tts-panel-kicker { display: inline-flex; align-items: center; gap: 6px; width: fit-content; color: var(--c-brand-700); font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; } .media-tts-kicker .material-symbols-outlined, .media-tts-panel-kicker .material-symbols-outlined { font-size: 16px; } .media-tts-hero-copy h2 { margin: 0; font-size: var(--fs-24); line-height: 1.15; } .media-tts-hero-copy p, .media-tts-section-head p, .media-tts-panel-head p { margin: 0; color: var(--text-muted); font-size: var(--fs-13); line-height: 1.55; } .media-tts-hero-actions, .media-tts-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; } .media-tts-overview-grid, .media-tts-metric-grid, .media-tts-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .media-tts-stat, .media-tts-metric, .media-tts-config-tile { min-width: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-3); background: color-mix(in srgb, var(--surface-panel) 88%, white); box-shadow: var(--shadow-1); padding: 12px 14px; } .media-tts-stat span, .media-tts-metric span, .media-tts-config-tile span, .media-tts-field > span, .media-tts-preview-head span, .media-tts-io-head > span { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--fs-12); font-weight: var(--fw-bold); text-transform: uppercase; } .media-tts-stat span .material-symbols-outlined, .media-tts-chip .material-symbols-outlined, .media-tts-card-foot .material-symbols-outlined, .media-tts-model-meta .material-symbols-outlined { font-size: 16px; line-height: 1; } .media-tts-stat strong, .media-tts-metric strong { display: block; margin-top: 8px; color: var(--text-primary); font-size: var(--fs-24); line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .media-tts-metric strong code, .media-tts-config-tile strong code { font-size: var(--fs-13); font-weight: var(--fw-semibold); } .media-tts-metric strong.is-ready { color: var(--c-success-700); } .media-tts-metric strong.is-pending { color: var(--c-warning-700); } .media-tts-stat small, .media-tts-metric small, .media-tts-config-tile small { display: block; margin-top: 4px; color: var(--text-muted); font-size: var(--fs-12); overflow-wrap: anywhere; } .media-tts-section { gap: 14px; } .media-tts-section-head { align-items: flex-end; } .media-tts-section-head h2, .media-tts-panel-head h2 { margin: 0 0 4px; } .media-tts-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .media-tts-card { min-height: 236px; border-radius: 10px; background: linear-gradient(180deg, var(--surface-panel) 0%, color-mix(in srgb, var(--surface-soft) 42%, var(--surface-panel)) 100%); } .media-tts-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-right: 88px; } .media-tts-card-top h3 { min-height: 0 !important; padding-right: 0 !important; } .media-tts-card-alias code { display: inline-flex; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 999px; background: var(--surface-soft); color: var(--text-secondary); padding: 4px 8px; font-size: var(--fs-11); } .media-tts-card-lines { margin-top: 2px; } .media-tts-card-foot { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 4px; color: var(--text-muted); font-size: var(--fs-12); font-weight: var(--fw-semibold); } .media-tts-card-foot span { display: inline-flex; align-items: center; gap: 5px; } .media-tts-detail { gap: 16px; } .media-tts-detail-hero { display: grid; gap: 16px; padding: 18px; border: 1px solid var(--border-subtle); background: radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 12%, transparent), transparent 36%), linear-gradient(180deg, var(--surface-panel) 0%, color-mix(in srgb, var(--surface-soft) 48%, var(--surface-panel)) 100%); box-shadow: var(--shadow-2); } .media-tts-detail-hero-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .media-tts-detail-identity { display: flex; align-items: flex-start; gap: 14px; min-width: 0; } .media-tts-detail-copy { display: grid; gap: 8px; min-width: 0; } .media-tts-detail-copy h3 { margin: 0; font-size: var(--fs-24); line-height: 1.15; } .media-tts-detail-copy p { margin: 0; color: var(--text-muted); font-size: var(--fs-13); } .media-tts-chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .media-tts-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; border: 1px solid var(--border-subtle); border-radius: 999px; background: color-mix(in srgb, var(--surface-panel) 88%, white); color: var(--text-secondary); padding: 0 10px; font-size: var(--fs-12); font-weight: var(--fw-semibold); } .media-tts-chip code { color: var(--text-primary); background: transparent; padding: 0; } .media-tts-config-card, .media-tts-models-card, .media-tts-test-card, .media-tts-connections { display: grid; gap: 16px; } .media-tts-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .media-tts-config-tile strong { display: block; margin-top: 8px; color: var(--text-primary); font-size: var(--fs-14); line-height: 1.35; overflow-wrap: anywhere; } .media-tts-config-tile-wide { grid-column: span 2; } .media-tts-connection-list { display: grid; gap: 0; } .media-tts-empty { display: flex; align-items: flex-start; gap: 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-3); background: var(--surface-soft); padding: 16px; } .media-tts-empty .material-symbols-outlined { color: var(--text-muted); font-size: 22px; } .media-tts-empty strong { display: block; margin-bottom: 4px; } .media-tts-empty p { margin: 0; color: var(--text-muted); } .media-tts-add-panel { display: grid; gap: 12px; } .media-tts-add-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; } .media-tts-add-head strong { font-size: var(--fs-14); } .media-tts-session-form { border-color: var(--border-subtle); background: linear-gradient(180deg, color-mix(in srgb, var(--surface-panel) 92%, white), var(--surface-soft)); box-shadow: var(--shadow-1); } .media-tts-session-foot { align-items: flex-end; } .media-tts-checks { display: grid; gap: 8px; min-width: 0; } .media-tts-model-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .media-tts-model-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: start; min-width: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-panel); padding: 13px; cursor: pointer; transition: border-color var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out), background var(--motion-base) var(--ease-out); } .media-tts-model-card:hover, .media-tts-model-card.is-default { border-color: color-mix(in srgb, var(--primary) 42%, var(--border)); background: color-mix(in srgb, var(--primary) 6%, var(--surface-panel)); transform: translateY(-1px); } .media-tts-model-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); } .media-tts-model-icon .material-symbols-outlined { font-size: 20px; } .media-tts-model-body { min-width: 0; display: grid; gap: 4px; } .media-tts-model-title { display: flex; align-items: center; gap: 8px; min-width: 0; } .media-tts-model-title strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-14); } .media-tts-model-body code, .media-tts-model-body small { color: var(--text-muted); font-size: var(--fs-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .media-tts-model-body code { color: var(--text-primary); font-family: var(--font-mono); } .media-tts-model-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 4px; color: var(--text-muted); font-size: var(--fs-12); font-weight: var(--fw-semibold); } .media-tts-model-meta span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; } .media-tts-model-actions { display: flex; align-items: center; gap: 6px; } .media-tts-test-card { padding-bottom: 4px; } .media-tts-test-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 16px; align-items: start; } .media-tts-test-controls, .media-tts-test-io { display: grid; gap: 12px; min-width: 0; } .media-tts-control-grid, .media-tts-param-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .media-tts-field { display: grid; gap: 6px; min-width: 0; } .media-tts-field.media-tts-input-field, .media-tts-test-controls .media-tts-input-field { grid-column: 1 / -1; } .media-tts-field > span { text-transform: uppercase; } .media-tts-field input, .media-tts-field select, .media-tts-field textarea, .media-tts-field code, .media-tts-test-controls .text-image-form-row input, .media-tts-test-controls .text-image-form-row select, .media-tts-test-controls .text-image-form-row textarea, .media-tts-test-controls .text-image-form-row code { width: 100%; min-height: 42px; border: 1px solid var(--border); border-radius: var(--radius-3); background: var(--surface-panel); color: var(--text-primary); font: inherit; padding: 0 12px; } .media-tts-field textarea, .media-tts-input-wrap textarea { min-height: 112px; padding: 12px 38px 12px 12px; resize: vertical; line-height: 1.5; } .media-tts-field code, .media-tts-test-controls .text-image-form-row code { display: flex; align-items: center; min-height: 42px; background: var(--surface-soft); font-family: var(--font-mono); font-size: var(--fs-12); overflow-wrap: anywhere; } .media-tts-test-controls .text-image-form-row { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: stretch; margin: 0; } .media-tts-test-controls .text-image-form-row > span { color: var(--text-muted); font-size: var(--fs-12); font-weight: var(--fw-bold); text-transform: uppercase; } .media-tts-input-wrap { position: relative; } .media-tts-input-wrap button { position: absolute; top: 10px; right: 8px; width: 28px; height: 28px; border: 0; background: transparent; color: var(--text-muted); } .media-tts-preview-panel { display: grid; gap: 10px; border: 1px solid var(--border-subtle); border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, var(--surface-panel)), var(--surface-soft)); padding: 14px; } .media-tts-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .media-tts-preview-head small { color: var(--text-muted); font-size: var(--fs-12); font-weight: var(--fw-semibold); } .media-tts-preview { border-style: dashed; background: color-mix(in srgb, var(--surface-panel) 88%, white); } .media-tts-error { margin: 0; } .media-tts-test-io { border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-soft); padding: 14px; } .media-tts-io-head { margin-top: 0; } .media-tts-code { min-height: 120px; border: 1px solid var(--border-subtle); background: var(--surface-panel); } .media-tts-response { min-height: 160px; } .media-tts-run { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; border: 1px solid color-mix(in srgb, var(--primary) 42%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); padding: 0 14px; font-size: var(--fs-12); font-weight: var(--fw-bold); } .media-tts-run:hover:not(:disabled) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, transparent); } .media-tts-run:disabled { opacity: .62; cursor: wait; } .media-tts-run.running span { animation: spin 1s linear infinite; } .media-tts-run.secondary { min-height: 36px; background: var(--surface-panel); } .media-tts-run span { font-size: 17px; } @media (max-width: 980px) { .media-tts-hero, .media-tts-test-layout, .media-tts-detail-hero-main { grid-template-columns: 1fr; flex-direction: column; } .media-tts-detail-actions { width: 100%; } } @media (max-width: 760px) { .media-tts-overview-grid, .media-tts-metric-grid, .media-tts-config-grid, .media-tts-control-grid, .media-tts-param-grid { grid-template-columns: 1fr; } .media-tts-config-tile-wide { grid-column: auto; } .media-tts-card-top { padding-right: 0; } .media-tts-model-card { grid-template-columns: 38px minmax(0, 1fr); } .media-tts-model-actions { grid-column: 1 / -1; justify-content: flex-start; } .media-tts-run, .media-tts-io-head .ghost { flex: 1 1 auto; } .media-tts-panel-head { flex-direction: column; align-items: stretch; } } @media (max-width: 760px) { .novel-config-grid, .text-image-config-grid, .novel-pricing-grid { grid-template-columns: 1fr; } .novel-config-grid div, .text-image-config-grid div, .novel-form-row, .text-image-form-row { grid-template-columns: 1fr; gap: 7px; } .novel-purchase-grid { grid-template-columns: 1fr; } .novel-chapter-row { grid-template-columns: minmax(0, 1fr) auto; } .novel-chapter-badge { display: none; } .novel-request-head, .text-image-request-head { align-items: stretch; flex-direction: column; } .novel-request-head div, .text-image-request-head div { width: 100%; } .tts-session-grid, .tts-inline-field { grid-template-columns: 1fr; } .tts-session-foot { align-items: stretch; flex-direction: column; } .tts-session-foot button, .tts-inline-field button { width: 100%; } .novel-run, .text-image-run, .novel-request-head .ghost, .text-image-request-head .ghost { flex: 1 1 auto; } .text-image-model-card { grid-template-columns: 34px minmax(0, 1fr); } .text-image-model-actions { grid-column: 1 / -1; justify-content: flex-start; } } /* Unified media kind list shell (image / video / tts / novel) */ .media-kind-page { display: grid; gap: 16px; } .media-kind-hero { display: grid; gap: 12px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 10px; background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, .04); } .media-kind-hero-main { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .media-kind-hero-copy { min-width: 0; display: grid; gap: 4px; } .media-kind-hero-copy h2 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: 0; } .media-kind-hero-copy p { margin: 0; max-width: 56ch; color: var(--muted); font-size: 13px; line-height: 1.45; } .media-kind-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; } .media-kind-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .media-kind-stat { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fafbfc; } .media-kind-stat span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; } .media-kind-stat strong { color: var(--text-primary, #0f172a); font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; } .media-kind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .media-kind-card { min-height: 148px; border-radius: 10px; background: #fff; } .media-kind-card .provider-card-text { gap: 8px; } .media-kind-card .provider-card-text h3 { min-height: auto; margin: 0; padding-right: 0; font-size: 15px; line-height: 1.25; -webkit-line-clamp: 1; } .media-kind-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-right: 84px; } .media-kind-alias { display: inline-flex; margin-top: 4px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); background: #f8fafc; color: var(--muted); font-size: 11px; font-weight: 700; } .media-kind-summary { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.35; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .media-kind-card-foot { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; color: var(--muted); font-size: 12px; } .media-kind-conn { font-weight: 700; color: var(--text-primary, #0f172a); font-variant-numeric: tabular-nums; } .media-kind-conn-label { font-weight: 600; } .media-kind-card .provider-card-meta .status-chip { font-size: 11px; } .media-provider-card.media-kind-card { min-height: 148px; padding: 16px; } .media-provider-card.media-kind-card .provider-card-actions { top: 14px; right: 14px; } .media-provider-card.media-kind-card .provider-card-actions .icon-button { width: 36px; height: 36px; flex-basis: 36px; } @media (max-width: 980px) { .media-kind-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .media-kind-hero-main { flex-direction: column; align-items: stretch; } .media-kind-stats { grid-template-columns: 1fr 1fr; } .media-kind-card-head { padding-right: 0; } } /* Text-to-video detail aligns with media TTS / LLM connection UI */ .media-video-page { gap: 18px; } .media-video-detail-hero, .media-video-connections, .media-video-add-panel { border: 1px solid #e7eaf0; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04); } .media-video-detail-hero { padding: 20px 22px; display: grid; gap: 18px; } .media-video-detail-hero-main { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; } .media-video-detail-identity { display: flex; gap: 14px; min-width: 0; } .media-video-detail-copy { min-width: 0; } .media-video-kicker, .media-video-panel-kicker { display: inline-flex; align-items: center; gap: 6px; color: #5b6475; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; } .media-video-kicker .material-symbols-outlined, .media-video-panel-kicker .material-symbols-outlined { font-size: 16px; } .media-video-detail-copy h3 { margin: 4px 0 6px; font-size: 1.45rem; } .media-video-detail-copy p, .media-video-panel-head p { margin: 0; color: #667085; } .media-video-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; } .media-video-chip-row, .media-video-metric-grid { display: flex; flex-wrap: wrap; gap: 8px; } .media-video-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #f5f7fb; color: #475467; font-size: 12px; } .media-video-chip .material-symbols-outlined { font-size: 16px; } .media-video-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .media-video-metric { border: 1px solid #edf0f5; border-radius: 12px; padding: 12px 14px; background: linear-gradient(180deg, #fff, #fbfcfe); } .media-video-metric span { display: block; color: #667085; font-size: 12px; margin-bottom: 4px; } .media-video-metric strong { display: block; font-size: 1.05rem; } .media-video-metric strong.is-ready { color: #067647; } .media-video-metric strong.is-pending { color: #b54708; } .media-video-metric small { color: #98a2b3; } .media-video-connections { padding: 20px 22px; } .media-video-panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 14px; } .media-video-connection-list { display: grid; gap: 10px; } .media-video-empty { display: flex; gap: 12px; align-items: flex-start; padding: 18px; border: 1px dashed #d0d5dd; border-radius: 12px; background: #fcfcfd; } .media-video-empty .material-symbols-outlined { color: #98a2b3; } .media-video-add-panel { margin-top: 14px; padding: 16px; border-radius: 14px; background: #fbfcfe; } .media-video-add-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 12px; } .media-video-session-form .tts-session-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .media-video-session-form .tts-session-cookie { grid-column: 1 / -1; } .media-video-session-foot { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 12px; } .media-video-shared-source { display: grid; gap: 10px; } @media (max-width: 960px) { .media-video-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .media-video-detail-hero-main { flex-direction: column; } .media-video-session-form .tts-session-grid { grid-template-columns: 1fr; } } /* Media novel modern detail */ .media-novel-page { gap: 16px; } .media-novel-detail { gap: 16px; } .media-novel-detail-hero, .media-novel-config-card, .media-novel-connections, .media-novel-test-card { border: 1px solid var(--border-subtle, #e7eaf0); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04); } .media-novel-detail-hero { display: grid; gap: 16px; padding: 18px 20px; background: radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 12%, transparent), transparent 36%), linear-gradient(180deg, var(--surface-panel) 0%, color-mix(in srgb, var(--surface-soft) 48%, var(--surface-panel)) 100%); } .media-novel-detail-hero-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .media-novel-detail-identity { display: flex; align-items: flex-start; gap: 14px; min-width: 0; } .media-novel-detail-copy { display: grid; gap: 8px; min-width: 0; } .media-novel-detail-copy h3 { margin: 0; font-size: var(--fs-24, 1.45rem); line-height: 1.15; } .media-novel-detail-copy p { margin: 0; color: var(--text-muted); font-size: var(--fs-13); } .media-novel-kicker, .media-novel-panel-kicker { display: inline-flex; align-items: center; gap: 6px; width: fit-content; color: var(--c-brand-700, #5b6475); font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; } .media-novel-kicker .material-symbols-outlined, .media-novel-panel-kicker .material-symbols-outlined { font-size: 16px; } .media-novel-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; } .media-novel-chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .media-novel-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; border: 1px solid var(--border-subtle, #edf0f5); border-radius: 999px; background: color-mix(in srgb, var(--surface-panel) 88%, white); color: var(--text-secondary, #475467); padding: 0 10px; font-size: var(--fs-12); font-weight: var(--fw-semibold); } .media-novel-chip code { color: var(--text-primary); background: transparent; padding: 0; } .media-novel-metric-grid, .media-novel-config-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .media-novel-metric, .media-novel-config-tile { min-width: 0; border: 1px solid var(--border-subtle, #edf0f5); border-radius: 12px; background: linear-gradient(180deg, #fff, #fbfcfe); box-shadow: var(--shadow-1, none); padding: 12px 14px; } .media-novel-metric span, .media-novel-config-tile span { display: block; color: var(--text-muted); font-size: var(--fs-12); font-weight: var(--fw-bold); text-transform: uppercase; } .media-novel-metric strong { display: block; margin-top: 8px; color: var(--text-primary); font-size: var(--fs-20, 1.15rem); line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .media-novel-metric strong.is-ready { color: var(--c-success-700, #067647); } .media-novel-metric strong.is-pending { color: var(--c-warning-700, #b54708); } .media-novel-metric small, .media-novel-config-tile small { display: block; margin-top: 4px; color: var(--text-muted); font-size: var(--fs-12); overflow-wrap: anywhere; } .media-novel-config-tile strong { display: block; margin-top: 8px; color: var(--text-primary); font-size: var(--fs-14); line-height: 1.35; overflow-wrap: anywhere; } .media-novel-config-tile strong code { font-size: var(--fs-13); font-weight: var(--fw-semibold); } .media-novel-config-tile-wide { grid-column: span 2; } .media-novel-config-card, .media-novel-connections, .media-novel-test-card { display: grid; gap: 16px; } .media-novel-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .media-novel-panel-head h2 { margin: 0 0 4px; } .media-novel-panel-head p { margin: 0; color: var(--text-muted); font-size: var(--fs-13); line-height: 1.55; } .media-novel-empty { display: flex; align-items: flex-start; gap: 12px; border: 1px dashed var(--border-strong, #d0d5dd); border-radius: 12px; background: var(--surface-soft); padding: 16px; } .media-novel-empty .material-symbols-outlined { color: var(--text-muted); font-size: 22px; } .media-novel-empty strong { display: block; margin-bottom: 4px; } .media-novel-empty p { margin: 0; color: var(--text-muted); } .media-novel-test-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 16px; align-items: start; } .media-novel-test-controls, .media-novel-test-results { display: grid; gap: 12px; min-width: 0; } .media-novel-test-controls { border: 1px solid var(--border-subtle, #edf0f5); border-radius: 12px; background: color-mix(in srgb, var(--surface-soft) 55%, var(--surface-panel)); padding: 14px; } .media-novel-test-results { border: 1px solid var(--border-subtle, #edf0f5); border-radius: 12px; background: var(--surface-panel); padding: 14px; min-height: 320px; align-content: start; } .media-novel-result-status { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; } .media-novel-test-results { align-content: start; } .media-novel-code { max-height: 180px; overflow: auto; } .media-novel-response { min-height: 120px; max-height: 280px; } .media-novel-json-panel { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); overflow: hidden; } .media-novel-json-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; cursor: pointer; padding: 10px 12px; color: var(--text-muted); font-size: var(--fs-12); font-weight: var(--fw-bold); text-transform: uppercase; user-select: none; } .media-novel-json-summary::-webkit-details-marker { display: none; } .media-novel-json-summary span { display: inline-flex; align-items: center; gap: 6px; } .media-novel-json-panel[open] .media-novel-json-summary { border-bottom: 1px solid var(--border); } .media-novel-json-panel .media-novel-response { border: 0; border-radius: 0; background: transparent; } .novel-book-summary { display: grid; gap: 10px; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, var(--surface-panel)), var(--surface-soft)); padding: 12px 14px; } .novel-book-summary[hidden] { display: none; } .novel-book-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .novel-book-summary-title { display: grid; gap: 4px; min-width: 0; } .novel-book-summary-title strong { color: var(--text-primary); font-size: var(--fs-15, 15px); line-height: 1.35; overflow-wrap: anywhere; } .novel-book-summary-title span { color: var(--text-muted); font-size: var(--fs-12); } .novel-book-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; } .novel-book-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; border-radius: 999px; background: color-mix(in srgb, var(--surface-panel) 80%, white); border: 1px solid var(--border-subtle, #edf0f5); color: var(--text-secondary, #475467); padding: 0 10px; font-size: var(--fs-12); font-weight: var(--fw-semibold); } .novel-book-chip .material-symbols-outlined { font-size: 15px; } .novel-book-summary-layout { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: start; } .novel-book-summary-layout.is-no-cover, .novel-book-summary-layout.is-metrics-only { grid-template-columns: minmax(0, 1fr); } .novel-book-summary-title { min-width: 0; } .novel-book-summary-title strong { display: block; overflow-wrap: anywhere; word-break: normal; line-height: 1.3; } .novel-catalog-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .novel-catalog-head strong { font-size: 13px; } .novel-catalog-head span { color: var(--text-muted); font-size: 12px; } .novel-catalog-list { display: grid; gap: 6px; max-height: min(520px, 60vh); overflow: auto; } .novel-catalog-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 10px; border: 1px solid var(--border-subtle, #edf0f5); border-radius: 8px; text-decoration: none; color: inherit; background: color-mix(in srgb, var(--surface-panel) 92%, white); } .novel-catalog-row em { font-style: normal; font-weight: 700; color: var(--text-muted); font-size: 12px; } .novel-catalog-row strong { display: block; font-size: 13px; line-height: 1.3; } .novel-catalog-row span { display: block; margin-top: 2px; color: var(--text-muted); font-size: 12px; } .novel-catalog-row:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border-subtle, #edf0f5)); } .novel-book-cover { width: 84px; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-subtle, #edf0f5); background: color-mix(in srgb, var(--surface-panel) 70%, #dfe5ee); box-shadow: 0 8px 18px rgba(16, 24, 40, 0.08); } .novel-book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .novel-book-summary-main { display: grid; gap: 10px; min-width: 0; } .novel-book-desc { margin: 0; color: var(--text-secondary, #475467); font-size: var(--fs-12); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; } .novel-book-link { display: inline-flex; align-items: center; gap: 6px; width: fit-content; color: var(--primary); text-decoration: none; font-size: var(--fs-12); font-weight: var(--fw-semibold); } .novel-book-link .material-symbols-outlined { font-size: 15px; } .novel-content-options { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; } @media (max-width: 720px) { .novel-book-summary-layout { grid-template-columns: 72px minmax(0, 1fr); } } .novel-chapter-panel, .novel-preview { border-radius: 10px; overflow: hidden; } .novel-chapter-head, .novel-preview-head { background: color-mix(in srgb, var(--surface-panel) 70%, var(--surface-soft)); } .novel-chapter-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; } .novel-chapter-search { width: min(180px, 42vw); min-height: 30px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-panel); color: var(--text-primary); font: inherit; font-size: var(--fs-12); padding: 0 10px; } .novel-chapter-count { color: var(--text-muted); font-size: var(--fs-12); font-weight: var(--fw-bold); white-space: nowrap; } .novel-chapter-list { max-height: min(420px, 50vh); } .novel-chapter-row { transition: background .12s ease; } .novel-chapter-row:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); } .novel-chapter-row.is-filtered-out { display: none; } .novel-chapter-fetch { border-radius: 8px; display: inline-flex; align-items: center; gap: 4px; } .novel-preview-body { max-height: min(560px, 62vh); font-size: var(--fs-15, 15px); line-height: 1.85; background: linear-gradient(180deg, var(--surface-panel), color-mix(in srgb, var(--surface-soft) 40%, var(--surface-panel))); } .novel-preview-body p { max-width: 68ch; } .novel-pricing { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); padding: 12px; } .media-novel-test-card .novel-form-row { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; } .media-novel-test-card .novel-action { min-height: 34px; } .media-kind-page .media-kind-hero { border: 1px solid var(--border-subtle, #e7eaf0); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.035); } @media (max-width: 1100px) { .media-novel-metric-grid, .media-novel-config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .media-novel-config-tile-wide { grid-column: span 2; } .media-novel-test-layout { grid-template-columns: 1fr; } } @media (max-width: 720px) { .media-novel-detail-hero-main { flex-direction: column; } .media-novel-metric-grid, .media-novel-config-grid { grid-template-columns: 1fr; } .media-novel-config-tile-wide { grid-column: auto; } .media-novel-test-card .novel-form-row { grid-template-columns: 1fr; gap: 6px; } .novel-chapter-search { width: 100%; } } .novel-book-stats { display: grid; /* auto-fill avoids a lonely 7th metric sitting alone with 5 empty columns */ grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; width: 100%; } .novel-book-stat { display: flex; flex-direction: column; justify-content: center; gap: 0; min-width: 0; border: 1px solid var(--border-subtle, #edf0f5); border-radius: 6px; background: color-mix(in srgb, var(--surface-panel) 92%, white); padding: 5px 7px; min-height: 40px; } .novel-book-stat span { color: var(--text-muted); font-size: 9px; font-weight: var(--fw-semibold); letter-spacing: 0; line-height: 1.1; } .novel-book-stat strong, .novel-book-stat-value { color: var(--text-primary); font-size: 11px; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: normal; overflow: visible; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 1px; word-break: break-word; } .novel-book-stat-main { min-width: 0; } .novel-book-stat-gap { display: inline-flex; align-items: center; gap: 1px; flex: 0 0 auto; min-height: 16px; padding: 0 4px 0 2px; border-radius: 999px; color: #b54708; background: color-mix(in srgb, #f79009 14%, white); border: 1px solid color-mix(in srgb, #f79009 28%, white); font-size: 10px; font-weight: 700; line-height: 1; } .novel-book-stat-gap .material-symbols-outlined { font-size: 13px; line-height: 1; } .novel-book-stat-gap em { font-style: normal; font-variant-numeric: tabular-nums; } .novel-book-stat.is-rank .novel-book-stat-main { font-weight: 700; } .novel-book-stat-label { display: flex; align-items: center; justify-content: space-between; gap: 2px; min-width: 0; line-height: 1.1; } .novel-book-stat-label > span { color: var(--text-muted); font-size: 9px; font-weight: var(--fw-semibold); letter-spacing: 0; min-width: 0; white-space: nowrap; overflow: visible; line-height: 1.1; } .novel-metric-coverage { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 12px; height: 12px; padding: 0 2px; border-radius: 999px; font-style: normal; font-size: 8px; font-weight: 700; line-height: 1; color: #334155; background: color-mix(in srgb, #94a3b8 22%, white); border: 1px solid color-mix(in srgb, #94a3b8 35%, white); } .novel-book-stat.is-coverage-full { border-color: color-mix(in srgb, #12b76a 35%, var(--border-subtle, #edf0f5)); background: color-mix(in srgb, #12b76a 8%, var(--surface-panel)); } .novel-book-chip.is-coverage-full { border-color: color-mix(in srgb, #12b76a 35%, var(--border-subtle, #edf0f5)); background: color-mix(in srgb, #12b76a 10%, var(--surface-panel)); } .novel-book-stat.is-coverage-full .novel-metric-coverage, .novel-book-chip.is-coverage-full .novel-metric-coverage { color: #027a48; background: color-mix(in srgb, #12b76a 18%, white); border-color: color-mix(in srgb, #12b76a 35%, white); } .novel-book-stat.is-coverage-high .novel-metric-coverage, .novel-book-chip.is-coverage-high .novel-metric-coverage { color: #175cd3; background: color-mix(in srgb, #2e90fa 16%, white); border-color: color-mix(in srgb, #2e90fa 32%, white); } .novel-book-stat.is-coverage-mid .novel-metric-coverage, .novel-book-chip.is-coverage-mid .novel-metric-coverage { color: #b54708; background: color-mix(in srgb, #f79009 16%, white); border-color: color-mix(in srgb, #f79009 32%, white); } .novel-book-stat.is-coverage-low .novel-metric-coverage, .novel-book-chip.is-coverage-low .novel-metric-coverage { color: #6941c6; background: color-mix(in srgb, #9e77ed 16%, white); border-color: color-mix(in srgb, #9e77ed 32%, white); } .novel-book-chip .novel-metric-coverage { margin-left: 2px; } .novel-book-slogan { font-weight: var(--fw-semibold); color: var(--text-primary) !important; } .novel-book-warn { color: #b42318 !important; background: color-mix(in srgb, #f04438 8%, var(--surface-panel)); border: 1px solid color-mix(in srgb, #f04438 22%, var(--border)); border-radius: 8px; padding: 8px 10px; } .novel-book-desc { -webkit-line-clamp: 8; } .novel-comment-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle, #edf0f5); } .novel-comment-list { max-height: min(640px, 70vh); } .novel-comment-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 14px; } .novel-comment-row.is-filtered-out { display: none; } .novel-comment-meta { gap: 6px 10px; } .novel-comment-avatar { width: 22px; height: 22px; border-radius: 999px; object-fit: cover; border: 1px solid var(--border-subtle, #edf0f5); background: #eef2f7; flex: 0 0 auto; } .novel-comment-time { color: var(--text-primary); font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); } .novel-comment-pill { display: inline-flex; align-items: center; min-height: 20px; border-radius: 999px; border: 1px solid var(--border-subtle, #edf0f5); background: color-mix(in srgb, var(--surface-panel) 80%, white); padding: 0 8px; font-size: 11px; font-weight: var(--fw-semibold); color: var(--text-secondary, #475467); } .novel-comment-pill.is-hot { color: #b54708; border-color: color-mix(in srgb, #f79009 30%, var(--border)); background: color-mix(in srgb, #f79009 12%, white); } .novel-comment-body { font-size: var(--fs-13, 13px); line-height: 1.65; color: var(--text-primary); } .novel-comment-panel { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); overflow: hidden; } .novel-comment-panel[hidden] { display: none; } .novel-comment-list { display: grid; gap: 0; max-height: min(640px, 70vh); overflow: auto; } .novel-comment-row { display: grid; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border-subtle, #edf0f5); } .novel-comment-row:first-child { border-top: 0; } .novel-comment-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; color: var(--text-muted); font-size: var(--fs-12); } .novel-comment-meta strong { color: var(--text-primary); font-size: var(--fs-12); } .novel-comment-body { margin: 0; color: var(--text-secondary, #475467); font-size: var(--fs-12); line-height: 1.55; white-space: pre-wrap; } /* Novel book options + denser metric info panel */ .novel-content-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; align-items: stretch; width: 100%; } .novel-content-options .novel-checkbox { min-height: 32px; margin: 0; padding: 5px 8px; border: 1px solid var(--border-subtle, #edf0f5); border-radius: 6px; background: color-mix(in srgb, var(--surface-panel) 88%, white); font-size: 11px; line-height: 1.2; gap: 6px; white-space: nowrap; } .novel-content-options .novel-checkbox:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 40%, var(--border-subtle, #edf0f5)); background: color-mix(in srgb, var(--primary) 8%, var(--surface-panel)); color: var(--text-primary); } .novel-content-options .novel-checkbox input { width: 14px; height: 14px; flex: 0 0 auto; } .novel-content-options .novel-limit-field { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(64px, 88px); justify-content: start; align-items: center; gap: 6px; min-height: 32px; margin: 0; padding: 5px 8px; border: 1px solid var(--border-subtle, #edf0f5); border-radius: 6px; background: color-mix(in srgb, var(--surface-panel) 88%, white); color: var(--text-muted); font-size: 11px; font-weight: var(--fw-semibold); } .novel-content-options .novel-limit-field[hidden] { display: none !important; } .novel-content-options .novel-limit-field input { width: 100%; min-height: 26px; padding: 0 6px; } .novel-book-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; width: 100%; margin-top: 2px; } .novel-book-chip { min-height: 22px; padding: 0 6px; gap: 3px; font-size: 10px; border-radius: 999px; } .novel-book-chip .material-symbols-outlined { font-size: 13px; } .novel-book-summary-main { gap: 6px; } .novel-book-desc { -webkit-line-clamp: 5; } @media (max-width: 1400px) { .novel-book-stats { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } } @media (max-width: 1100px) { .novel-book-stats { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); } } @media (max-width: 720px) { .novel-book-stats { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 4px; } .novel-book-stat { min-height: 36px; padding: 4px 6px; } .novel-book-stat strong { font-size: 10px; } .novel-content-options { grid-template-columns: 1fr; } } @media (max-width: 480px) { .novel-book-stats { grid-template-columns: repeat(auto-fill, minmax(46%, 1fr)); } } /* Reader workspace on novel-fetch list */ .media-reader-panel { grid-column: 1 / -1; margin-bottom: 8px; padding: 16px 18px 18px; border: 1px solid var(--c-border, rgba(127,127,127,.18)); border-radius: 12px; background: var(--c-panel, rgba(255,255,255,.03)); } .media-reader-panel .media-novel-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .media-reader-key { font-size: 12px; opacity: .75; } .media-reader-api { display: grid; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--c-border, rgba(127,127,127,.22)); background: rgba(0,0,0,.08); } .media-reader-api-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .media-reader-api-row code { font-size: 12px; word-break: break-all; } .media-reader-api-sample, .media-reader-json pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.45; max-height: 180px; overflow: auto; } .media-reader-json { border-top: 1px solid var(--c-border, rgba(127,127,127,.14)); padding-top: 8px; } .media-reader-json summary { cursor: pointer; font-size: 12px; font-weight: 650; margin-bottom: 6px; opacity: .9; } .media-reader-form { display: grid; gap: 10px; } .media-reader-input-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; } .media-reader-input-row input { min-width: 0; width: 100%; height: 42px; border-radius: 10px; border: 1px solid var(--c-border, rgba(127,127,127,.22)); background: var(--c-input, rgba(0,0,0,.18)); color: inherit; padding: 0 12px; font-size: 14px; } .media-reader-input-row button { height: 42px; border-radius: 10px; border: 0; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; font-weight: 650; cursor: pointer; background: var(--c-accent, #0f766e); color: #fff; } .media-reader-input-row button:disabled { opacity: .65; cursor: wait; } .media-reader-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .media-reader-result { margin-top: 14px; border-top: 1px solid var(--c-border, rgba(127,127,127,.16)); padding-top: 12px; display: grid; gap: 8px; } .media-reader-result-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .media-reader-result-head h3 { margin: 0 0 4px; font-size: 16px; line-height: 1.3; } .media-reader-result-head a { font-size: 12px; word-break: break-all; } .media-reader-result-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .media-reader-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 650; background: rgba(15,118,110,.14); color: #0f766e; } .media-reader-content { margin: 0; max-height: min(45vh, 420px); overflow: auto; white-space: pre-wrap; word-break: break-word; padding: 12px; border-radius: 10px; border: 1px solid var(--c-border, rgba(127,127,127,.16)); background: rgba(0,0,0,.14); font-size: 13px; line-height: 1.55; } @media (max-width: 720px) { .media-reader-input-row { grid-template-columns: 1fr; } .media-reader-result-head { flex-direction: column; } } /* Provider connection rows in detail page. */ .connections-panel { padding: 24px; } .connections-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; } .connections-head h2, .models-panel h2 { margin: 0; font-size: 18px; } .connections-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; } .round-robin-form { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 800; } .sticky-label { color: var(--muted); } .sticky-input { width: 58px; height: 30px; padding: 0 8px; font-size: 12px; border-radius: 6px; } .connections-list { display: flex; min-width: 0; flex-direction: column; gap: 10px; } .connection-item { border: 1px solid #e8edf2; border-radius: 8px; background: #fff; transition: border-color .16s, background .16s, box-shadow .16s; } .connection-item:hover { border-color: #d8e0ea; background: #fbfcfd; box-shadow: 0 8px 20px rgba(16,24,40,.04); } .connection-item.connection-test-ok { border-color: #86d5ad; } .connection-item.connection-test-warning { border-color: #f2c36b; } .connection-item.connection-test-error { border-color: #f0a29a; } .connection-row { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-radius: 8px; } .connection-item.is-disabled { background: #fcfcfd; } .connection-item.is-disabled .connection-main { opacity: .66; } .connection-left { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 13px; } .priority-arrows { display: flex; flex-direction: column; } .priority-arrows form, .connection-actions form, .connection-toggle-form { margin: 0; } .connection-toggle-form { display: flex; flex-direction: column; align-items: center; gap: 2px; } .connection-toggle-form .toggle-caption { font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: 0; line-height: 1; } .connection-toggle-form .switch input:checked ~ .toggle-caption, .connection-toggle-form:has(input:checked) .toggle-caption { color: var(--primary); } .arrow-button { width: 24px; min-height: 20px; padding: 0; background: transparent; color: var(--muted); border-radius: 6px; } .arrow-button:hover:not(:disabled) { background: #eef1f4; color: var(--primary); } .arrow-button:disabled { opacity: .28; } .connection-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 8px; color: #4f5f73; background: #f3f6f9; border: 1px solid #e3e8ef; } .connection-avatar .material-symbols-outlined { font-size: 20px; } .connection-main { min-width: 0; flex: 1 1 auto; } .connection-title-line { display: flex; min-width: 0; align-items: center; gap: 9px; } .connection-main p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 760; } .connection-rank { flex: 0 0 auto; color: #667085; background: #f6f8fb; border: 1px solid #e6ebf1; border-radius: 999px; padding: 2px 7px; font-size: 11px; font-weight: 850; } .connection-meta { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 7px; color: var(--muted); font-size: 12px; } .connection-detail, .connection-expiry { display: inline-flex; max-width: 340px; min-width: 0; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .connection-detail .material-symbols-outlined, .connection-expiry .material-symbols-outlined { flex: 0 0 auto; color: #98a2b3; font-size: 15px; } .connection-test-status { display: inline-flex; min-height: 22px; align-items: center; border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 800; line-height: 1; } .connection-test-status:empty { display: none; } .connection-test-status.loading { color: #475467; background: #f2f4f7; } .connection-test-status.ok { color: #027a48; background: #ecfdf3; } .connection-test-status.warning { color: #9a6700; background: #fffaeb; } .connection-test-status.error { color: #b42318; background: #fff1ee; } .connection-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; border-radius: 8px; background: #f7f9fb; padding: 5px; } .connection-action { min-width: 36px; min-height: 36px; flex-direction: column; gap: 1px; padding: 0 8px; background: transparent; color: var(--muted); border-radius: 8px; } .connection-action .material-symbols-outlined { font-size: 19px; } .connection-action small { display: none; } .connection-action:hover:not(:disabled) { background: #fff; color: var(--primary); box-shadow: 0 1px 2px rgba(16,24,40,.06); } .connection-action.is-loading .material-symbols-outlined { animation: connection-test-spin .8s linear infinite; } .connection-action:disabled { opacity: .45; cursor: not-allowed; } .connection-action.danger { color: #dc2626; background: #fff1ee; } .connection-action.danger:hover { background: #fff1ee; color: #b42318; } @keyframes connection-test-spin { to { transform: rotate(360deg); } } .connection-empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px 18px; color: var(--muted); } .connection-empty .material-symbols-outlined { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: #fbece7; color: var(--primary); font-size: 18px; } .connection-empty p { margin: 0; flex: 1; font-size: 14px; } .email-identity { display: inline-flex; align-items: baseline; min-width: 0; max-width: 100%; } .email-identity span { min-width: 0; } .email-identity-separator { color: var(--text-muted); } .connection-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; } .connection-add-row > form { margin: 0; } .oauth-start-form { display: inline-flex; flex: 0 1 auto; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; } .oauth-start-form select { width: auto; height: 36px; min-width: 180px; max-width: 260px; flex: 0 1 220px; padding: 0 32px 0 10px; font-size: 13px; } .add-connection { display: inline-flex; align-items: center; justify-content: center; width: auto; height: 36px; min-height: 36px; min-width: 0; flex: 0 0 auto; gap: 6px; padding: 0 12px; border-radius: 7px; font-size: 13px; line-height: 1; text-decoration: none; white-space: nowrap; } .add-connection input[type="checkbox"] { width: 14px; height: 14px; min-height: 0; margin: 0; } .add-connection .material-symbols-outlined { font-size: 18px; line-height: 1; } button.add-connection { margin-top: 0; } .add-connection.primary { color: #fff; background: var(--primary); border: 1px solid var(--primary); } .add-connection.secondary { color: #344054; background: #eef1f4; border: 1px solid #dde3ea; } .codex-add-panels { display: grid; gap: 8px; margin-top: 12px; max-width: 760px; } .codex-add-detail, .codex-add-panel, .connection-edit-panel { border: 1px solid #e8edf2; border-radius: 8px; background: #fbfcfd; } .codex-add-detail[hidden], .codex-add-panel[hidden] { display: none; } .codex-add-detail { padding: 0; overflow: hidden; } .codex-add-detail summary { display: flex; width: 100%; min-height: 38px; align-items: center; gap: 7px; padding: 0 12px; cursor: pointer; color: #344054; font-size: 13px; font-weight: 800; list-style: none; } .codex-add-detail summary::-webkit-details-marker { display: none; } .codex-add-detail summary .material-symbols-outlined { font-size: 18px; } .codex-add-detail[open] summary { border-bottom: 1px solid #e8edf2; } .codex-add-detail > .method-form, .codex-add-detail > .quota-message { margin: 0; padding: 12px; } .codex-add-detail > .quota-message { border: 0; border-radius: 0; background: transparent; } .codex-device-box { display: flex; align-items: center; gap: 10px; padding: 0 12px 12px; flex-wrap: wrap; } .codex-device-box[hidden] { display: none; } .codex-device-box code { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid #dde3ea; border-radius: 7px; background: #fff; color: #101828; font-size: 18px; font-weight: 800; letter-spacing: 0; } .codex-add-panel { padding: 14px; } .compact-method { margin-top: 12px; } .codex-add-detail > .compact-method { margin-top: 0; } .connection-edit-panel { margin: 0 8px 12px 52px; padding: 14px; } .edit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .edit-grid label { margin: 0; } @media (max-width: 620px) { .connection-add-row, .oauth-start-form { align-items: stretch; } .oauth-start-form { flex: 1 1 100%; } .oauth-start-form select { max-width: none; flex: 1 1 auto; min-width: 0; } .add-connection { flex: 1 1 auto; } } .connection-plan-plus { background: #fef3c7; color: #d97706; border: 1px solid #fde68a; font-weight: 800; padding: 2px 7px; border-radius: 6px; font-size: 11px; display: inline-flex; align-items: center; vertical-align: middle; line-height: 1; text-transform: capitalize; } .connection-plan-free { background: #f2f4f7; color: #475467; border: 1px solid #eaecf0; font-weight: 800; padding: 2px 7px; border-radius: 6px; font-size: 11px; display: inline-flex; align-items: center; vertical-align: middle; line-height: 1; text-transform: capitalize; } .connection-plan-other { background: #f4f3ff; color: #5925dc; border: 1px solid #d9d6fe; font-weight: 800; padding: 2px 7px; border-radius: 6px; font-size: 11px; display: inline-flex; align-items: center; vertical-align: middle; line-height: 1; } .connection-plan-separator { color: #d0d5dd; margin: 0 4px; } /* Model cards inside provider detail. */ .codex-model-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } /* Tab panes must honor [hidden] even though grid sets display. */ .codex-model-grid[hidden] { display: none !important; } .codex-model-card { position: relative; display: flex; min-width: 0; align-items: center; gap: 10px; border: 1px solid #e8edf2; border-radius: 8px; background: #fff; padding: 12px; transition: border-color .16s, background .16s; } .codex-model-card:hover { border-color: #d7dee8; background: #fbfcfd; } .codex-model-card.test-ok { border-color: rgba(34,197,94,.45); } .codex-model-card.test-error { border-color: rgba(239,68,68,.42); } .codex-model-card > .material-symbols-outlined { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 8px; background: #eff6ff; color: #2563eb; font-size: 18px; } .codex-model-card div { min-width: 0; flex: 1; padding-right: 10px; } .codex-model-card code { display: block; word-break: break-all; font-size: 13px; line-height: 1.4; font-weight: 600; } .codex-model-card small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; line-height: 1.3; } .model-aliases { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; color: var(--muted); font-size: 11px; } .model-aliases code { display: inline-flex; width: auto; background: #f2f4f7; border-radius: 6px; padding: 2px 5px; font-size: 11px; word-break: normal; } .model-actions { display: flex; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); align-items: center; justify-content: flex-end; gap: 4px; opacity: 0; transition: opacity 0.2s; background: linear-gradient(90deg, transparent, #fff 15%); padding-left: 20px; } .codex-model-card:hover .model-actions { opacity: 1; } @media (max-width: 980px) { .model-actions { opacity: 1; position: relative; right: auto; top: auto; transform: none; padding-left: 0; background: none; } } .model-icon-button { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 0 8px; background: #f3f6f9; color: #667085; border: 1px solid #e3e8ef; border-radius: 8px; font-size: 12px; cursor: pointer; } .model-icon-button .material-symbols-outlined { font-size: 17px; } .model-icon-button small { display: none; margin: 0; color: inherit; font-size: 10px; } .model-icon-button:hover:not(:disabled) { color: var(--primary); background: #fff; border-color: #f4b4a5; } .model-icon-button.danger { color: #dc2626; background: #fff1ee; border-color: #ffd1c7; } .model-test-status { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 999px; padding: 3px 7px; font-size: 11px; font-weight: 800; color: transparent; } .model-test-status.loading { color: #475467; background: #f2f4f7; } .model-test-status.ok { color: #027a48; background: #ecfdf3; } .model-test-status.error { color: #b42318; background: #fff1ee; } .codex-add-model-card { min-height: 80px; flex-direction: column; gap: 5px; border: 1px dashed #f5b6a7; border-radius: 8px; background: #fff7f4; color: var(--primary); } .codex-add-model-card .material-symbols-outlined { font-size: 22px; } .codex-model-add-form { grid-column: 1 / -1; border: 1px solid #e8edf2; border-radius: 8px; background: #fbfcfd; padding: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .codex-model-add-form[hidden] { display: none; } .codex-model-add-form label { margin: 0; } .codex-model-add-form .form-actions { grid-column: 1 / -1; } .model-picker-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(15,23,42,.34); } .model-picker-backdrop[hidden] { display: none; } .model-picker-dialog { width: min(560px, 100%); max-height: min(680px, calc(100vh - 40px)); display: grid; grid-template-rows: auto auto minmax(0,1fr); overflow: hidden; border: 1px solid #dfe6ee; border-radius: 8px; background: #fff; box-shadow: 0 24px 60px rgba(15,23,42,.22); } .model-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px 12px; border-bottom: 1px solid #edf1f5; } .model-picker-head h3 { margin: 0 0 3px; font-size: 18px; } .model-picker-head p { margin: 0; color: var(--muted); font-size: 13px; } .model-picker-search { display: flex; align-items: center; gap: 8px; margin: 12px 14px; border: 1px solid #d5dde5; border-radius: 8px; padding: 0 10px; color: var(--muted); } .model-picker-search input { height: 38px; border: 0; padding: 0; background: transparent; } .model-picker-list { overflow: auto; padding: 4px 8px 12px; } .model-picker-row { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 9px 10px; border-radius: 8px; background: transparent; color: #111827; text-align: left; } .model-picker-row[hidden] { display: none !important; } .model-picker-row:hover, .model-picker-row.active { background: #fff1ee; color: var(--primary); } .model-picker-row .material-symbols-outlined { flex: 0 0 auto; color: #2563eb; font-size: 18px; } .model-picker-row span:last-child { min-width: 0; display: grid; gap: 2px; } .model-picker-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .model-picker-row small { color: var(--muted); font-size: 11px; text-transform: capitalize; } .model-meta-badge { display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 4px; font-size: 10px; font-weight: 600; margin-left: 6px; vertical-align: middle; } .model-meta-badge.ctx-badge { background: #f1f5f9; color: #475569; } .model-meta-badge.plus-badge { background: #fef3c7; color: #d97706; border: 1px solid #fde68a; } /* Premium CLI & Browser Test Tool Layout styles */ .tool-breadcrumb { display: flex; margin-bottom: 20px; } .tool-breadcrumb .back-link { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-weight: var(--fw-medium); text-decoration: none; font-size: 14px; transition: color var(--motion-fast) var(--ease-out); } .tool-breadcrumb .back-link:hover { color: var(--primary); } /* Base Panel & Header Customizations */ .cli-tool-card, .browser-tester-card { border: 1px solid var(--border-subtle); box-shadow: var(--shadow-2); border-radius: var(--radius-4); background: var(--surface-panel); padding: 24px; margin-bottom: 24px; transition: box-shadow var(--motion-base) var(--ease-out); } .cli-tool-card:hover, .browser-tester-card:hover { box-shadow: var(--shadow-3); } .cli-tool-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-subtle); padding-bottom: 16px; margin-bottom: 20px; gap: 16px; } .cli-tool-head .provider-main { display: flex; align-items: center; } .cli-tool-head h3 { margin: 0 0 4px; font-size: var(--fs-18); font-weight: var(--fw-bold); } .cli-tool-head p { margin: 0; font-size: var(--fs-13); color: var(--text-muted); } /* Glowing Gradients for Icons */ .codex-tool-icon, .browser-test-icon { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-3); width: 48px; height: 48px; margin-right: 16px; box-shadow: 0 4px 12px rgba(66, 133, 244, 0.15); } .codex-tool-icon { background: linear-gradient(135deg, #10b981, #059669); color: #ffffff; } .browser-test-icon { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #ffffff; } /* Modern Form Elements & Grid Layout */ .cli-tool-form { display: grid; gap: 16px; } .tool-row { display: grid; grid-template-columns: 180px 24px minmax(0, 1fr); align-items: center; gap: 12px; } .tool-row > span:first-child { color: var(--text-secondary); font-size: var(--fs-13); font-weight: var(--fw-semibold); text-align: right; } .tool-arrow { color: var(--text-muted); font-size: 16px; } /* Styled Inputs, Textareas, Selects */ .cli-tool-form select, .cli-tool-form input[type="text"], .cli-tool-form input[type="number"], .cli-tool-form textarea { width: 100%; border: 1px solid var(--border-default); border-radius: var(--radius-2); padding: 8px 12px; font-size: var(--fs-14); background: var(--surface-app); color: var(--text-primary); transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); } .cli-tool-form select:focus, .cli-tool-form input[type="text"]:focus, .cli-tool-form input[type="number"]:focus, .cli-tool-form textarea:focus { border-color: var(--primary); box-shadow: var(--focus-ring); outline: none; } .tool-row code { overflow-x: auto; white-space: nowrap; background: var(--surface-soft); border: 1px solid var(--border-subtle); color: var(--text-secondary); border-radius: var(--radius-2); padding: 8px 12px; font-family: var(--font-mono); font-size: var(--fs-13); } .current-row code { color: var(--primary); font-weight: var(--fw-semibold); } .tool-input-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .tool-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-left: 204px; margin-top: 8px; } /* Status Badges */ .status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: var(--fs-12); font-weight: var(--fw-medium); } .status-chip.ok { background: var(--c-success-50); color: var(--c-success-700); border: 1px solid var(--c-success-200); } .status-chip.default { background: var(--surface-soft); color: var(--text-secondary); border: 1px solid var(--border-subtle); } .status-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse-dot 2s infinite; } @keyframes pulse-dot { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } } /* Warnings and Notes */ .tool-note { display: flex; align-items: flex-start; gap: 10px; border-radius: var(--radius-3); padding: 12px 16px; font-size: var(--fs-13); line-height: var(--lh-base); margin-bottom: 16px; } .tool-note.warn { color: var(--c-warning-700); background: var(--c-warning-50); border: 1px solid var(--c-warning-200); } .tool-note .material-symbols-outlined { font-size: 20px; flex-shrink: 0; } /* Beautiful MacOS Terminal Mockup */ .terminal-window { margin-top: 24px; border-radius: var(--radius-3); overflow: hidden; box-shadow: var(--shadow-3); border: 1px solid #2d3139; background: #14161a; } .terminal-header { display: flex; align-items: center; justify-content: space-between; background: #1c1f26; padding: 10px 16px; border-bottom: 1px solid #2d3139; user-select: none; } .terminal-buttons { display: flex; gap: 8px; } .terminal-btn { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .terminal-btn.close-btn { background: #ff5f56; } .terminal-btn.minimize-btn { background: #ffbd2e; } .terminal-btn.expand-btn { background: #27c93f; } .terminal-title { color: #9da5b4; font-size: var(--fs-12); font-family: var(--font-sans); font-weight: var(--fw-medium); } .terminal-status { font-size: var(--fs-11); color: #3b82f6; font-family: var(--font-mono); background: rgba(59, 130, 246, 0.1); padding: 2px 8px; border-radius: var(--radius-1); } .terminal-body { margin: 0; padding: 16px; max-height: 380px; overflow-y: auto; background: #0f1115; color: #e6e8ed; font-family: var(--font-mono); font-size: var(--fs-13); line-height: 1.6; white-space: pre-wrap; word-break: break-all; scrollbar-width: thin; scrollbar-color: #2d3139 #0f1115; } /* Premium Browser Mockup for Screenshot */ .browser-mockup { margin-top: 24px; border-radius: var(--radius-3); overflow: hidden; box-shadow: var(--shadow-3); border: 1px solid var(--border-default); background: var(--surface-panel); transition: transform var(--motion-base) var(--ease-out); } .browser-mockup:hover { transform: translateY(-2px); } .browser-header { display: flex; align-items: center; background: var(--surface-soft); padding: 8px 16px; border-bottom: 1px solid var(--border-subtle); } .browser-address-bar { display: flex; align-items: center; gap: 8px; background: var(--surface-panel); border: 1px solid var(--border-subtle); border-radius: var(--radius-1); padding: 4px 16px; width: 100%; max-width: 480px; margin: 0 auto; justify-content: center; color: var(--text-muted); } .browser-address-bar .icon { font-size: 14px; color: #10b981; } .browser-address-bar .address-text { font-size: var(--fs-12); font-family: var(--font-sans); } .browser-content { padding: 12px; background: var(--surface-app); display: flex; justify-content: center; } .browser-content img { max-width: 100%; height: auto; border-radius: var(--radius-2); box-shadow: var(--shadow-2); border: 1px solid var(--border-subtle); } /* Codex Model Map Card */ .codex-config-tabs { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 4px; border: 1px solid var(--border-subtle); border-radius: var(--radius-2); background: var(--surface-soft); } .codex-config-tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 7px 13px; border: 0; border-radius: var(--radius-1); background: transparent; color: var(--text-muted); box-shadow: none; font-size: var(--fs-13); font-weight: var(--fw-semibold); } .codex-config-tab:hover { background: var(--surface-panel); color: var(--text-primary); box-shadow: none; } .codex-config-tab.active { background: var(--surface-panel); color: var(--text-primary); box-shadow: var(--shadow-1); } .codex-config-tab .material-symbols-outlined { font-size: 18px; } [data-codex-config-pane][hidden] { display: none; } .codex-model-map { margin-top: 12px; padding: 20px; border: 1px solid var(--border-subtle); border-radius: var(--radius-3); background: var(--surface-soft); } .codex-model-map-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .codex-model-map-head h4 { margin: 0 0 4px; font-size: var(--fs-15); font-weight: var(--fw-bold); } .codex-model-map-head p { margin: 0; color: var(--text-muted); font-size: var(--fs-12); } .codex-model-map-grid { display: grid; gap: 12px; } .codex-model-map-row { display: grid; grid-template-columns: 180px 24px minmax(0, 1fr); align-items: center; gap: 12px; } .codex-model-map-source { min-width: 0; text-align: right; } .codex-model-map-title { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 2px; } .codex-model-map-source strong { display: block; color: var(--text-primary); font-size: var(--fs-13); font-weight: var(--fw-semibold); } .codex-model-map-source code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: var(--fs-11); } .codex-teamwork-panel { margin-top: 12px; padding: 20px; border: 1px solid var(--border-subtle); border-radius: var(--radius-3); background: var(--surface-soft); } .codex-teamwork-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .codex-teamwork-head h4 { margin: 0 0 4px; color: var(--text-primary); font-size: var(--fs-15); font-weight: var(--fw-bold); } .codex-teamwork-head p { margin: 0; color: var(--text-muted); font-size: var(--fs-12); line-height: var(--lh-base); } .teamwork-native-badge { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 5px; padding: 5px 8px; border: 1px solid var(--border-default); border-radius: var(--radius-1); background: var(--surface-panel); color: var(--text-secondary); font-size: var(--fs-11); font-weight: var(--fw-semibold); } .teamwork-native-badge .material-symbols-outlined { color: var(--c-success-600); font-size: 16px; } .teamwork-role-list { display: grid; gap: 8px; margin-top: 8px; } .teamwork-role-row { display: grid; grid-template-columns: 34px minmax(180px, 1fr) minmax(260px, 0.9fr); align-items: center; gap: 12px; min-height: 58px; padding: 9px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-2); background: var(--surface-panel); } .teamwork-role-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-1); background: var(--surface-soft); color: var(--text-secondary); font-size: 19px; } .teamwork-role-copy { min-width: 0; } .teamwork-role-copy strong, .teamwork-role-copy small { display: block; } .teamwork-role-copy strong { margin-bottom: 2px; color: var(--text-primary); font-size: var(--fs-13); font-weight: var(--fw-semibold); } .teamwork-role-copy small { color: var(--text-muted); font-size: var(--fs-11); line-height: var(--lh-base); } .teamwork-role-row select { width: 100%; min-width: 0; } .teamwork-leader-row { border-color: var(--border-default); background: var(--surface-panel); } .teamwork-leader-row .teamwork-role-icon { color: var(--c-warning-700); } .teamwork-profile-note { display: flex; align-items: center; gap: 7px; margin-top: 12px; color: var(--text-secondary); font-size: var(--fs-11); } .teamwork-profile-note .material-symbols-outlined { color: var(--text-muted); font-size: 17px; } .teamwork-profile-note code { color: var(--text-primary); font-size: inherit; } .teamwork-safety-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; color: var(--text-muted); font-size: var(--fs-11); line-height: var(--lh-base); } .teamwork-safety-note .material-symbols-outlined { flex: 0 0 auto; color: var(--text-secondary); font-size: 17px; } .teamwork-actions { justify-content: flex-end; margin-top: 14px; } @media (max-width: 760px) { .codex-config-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .codex-teamwork-panel, .codex-model-map { padding: 14px; } .codex-teamwork-head { display: grid; } .teamwork-native-badge { justify-self: start; } .teamwork-role-row { grid-template-columns: 32px minmax(0, 1fr); } .teamwork-role-row select { grid-column: 1 / -1; } .teamwork-actions button { width: 100%; } } /* Manual Code snippets config blocks */ .manual-config { display: grid; gap: 16px; border-top: 1px solid var(--border-subtle); padding-top: 20px; } .manual-config[hidden] { display: none; } .manual-block { border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-panel); overflow: hidden; box-shadow: var(--shadow-1); } .manual-block > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; background: var(--surface-soft); border-bottom: 1px solid var(--border-subtle); font-weight: var(--fw-semibold); font-size: var(--fs-13); } .manual-block pre { max-height: 320px; overflow: auto; margin: 0; padding: 16px; background: #0f1115; color: #a9b2c3; font-family: var(--font-mono); font-size: var(--fs-12); line-height: 1.6; white-space: pre-wrap; } .tool-foot { display: flex; flex-wrap: wrap; gap: 16px; color: var(--text-muted); font-size: var(--fs-12); margin-top: 16px; } /* Password Change Card Specific alignment */ .narrow-panel { max-width: 600px; margin: 0 auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-4); padding: 24px; background: var(--surface-panel); box-shadow: var(--shadow-2); } .narrow-panel h2 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-18); font-weight: var(--fw-bold); margin-bottom: 20px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 12px; } .narrow-panel form { display: grid; gap: 12px; } .narrow-panel label { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-secondary); } .narrow-panel input[type="password"] { width: 100%; border: 1px solid var(--border-default); border-radius: var(--radius-2); padding: 8px 12px; font-size: var(--fs-14); background: var(--surface-app); color: var(--text-primary); } .narrow-panel input[type="password"]:focus { border-color: var(--primary); box-shadow: var(--focus-ring); outline: none; } /* Live console log panel. */ .console-panel { padding: 0; overflow: hidden; } .console-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px 14px; border-bottom: 1px solid #1f2937; background: #111827; color: #f9fafb; } .console-toolbar h2 { margin: 0 0 5px; font-size: 18px; color: #f9fafb; } .console-toolbar p { margin: 0; color: #9ca3af; font-size: 13px; } .console-actions { display: flex; align-items: center; gap: 10px; } .console-actions button { background: #1f2937; color: #f9fafb; border-color: #374151; } .console-status { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; border-radius: 999px; padding: 0 10px; color: #9ca3af; background: #1f2937; font-size: 12px; font-weight: 850; } .console-status i { width: 7px; height: 7px; border-radius: 999px; background: currentColor; } .console-status.connected { color: #34d399; } .console-status.connecting { color: #fbbf24; } .console-status.disconnected { color: #f87171; } .console-terminal { height: calc(100vh - 230px); min-height: 420px; overflow: auto; background: #05070a; color: #86efac; padding: 14px 16px; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; } .console-line { color: #86efac; } .console-line.info { color: #93c5fd; } .console-line.warn { color: #fbbf24; } .console-line.error { color: #f87171; } .console-line.debug { color: #c4b5fd; } .console-empty { color: #6b7280; } /* Toast bus. Mounted by core/toast.js into as #toast-bus. * Replaces window.alert/confirm for non-blocking feedback. */ .toast-bus { position: fixed; inset: auto 24px 24px auto; display: flex; flex-direction: column; gap: 10px; z-index: 1000; pointer-events: none; } .toast { pointer-events: auto; min-width: 240px; max-width: 360px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; background: var(--surface-elevated); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius-3); box-shadow: var(--shadow-3); font-size: var(--fs-14); transform: translateY(8px); opacity: 0; animation: toast-in var(--motion-base) var(--ease-out) forwards; } .toast.leaving { animation: toast-out var(--motion-base) var(--ease-in-out) forwards; } .toast .material-symbols-outlined { font-size: 20px; } .toast.success { border-color: var(--c-success-200); } .toast.success .material-symbols-outlined { color: var(--c-success-600); } .toast.error { border-color: var(--c-danger-200); } .toast.error .material-symbols-outlined { color: var(--c-danger-600); } .toast.info .material-symbols-outlined { color: var(--c-info-700); } .toast.warn { border-color: var(--c-warning-200); } .toast.warn .material-symbols-outlined { color: var(--c-warning-700); } @keyframes toast-in { to { transform: translateY(0); opacity: 1; } } @keyframes toast-out { to { transform: translateY(8px); opacity: 0; } } /* Quota toolbar, cards and tables. */ .quota-toolbar { margin-bottom: 0; } .quota-toolbar h2 { margin-bottom: 2px; } .quota-toolbar span { color: var(--muted); } .quota-smart-copy { display: block; margin-top: 4px; color: #667085; font-size: 12px; } .quota-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .quota-actions form { margin: 0; } .quota-actions select { width: 160px; } .quota-refresh-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; color: #1d4ed8; font-size: 12px; font-variant-numeric: tabular-nums; } .quota-refresh-status .material-symbols-outlined { font-size: 17px; animation: quota-refresh-spin 1s linear infinite; } .quota-refresh-status strong { color: #1e3a8a; } @keyframes quota-refresh-spin { to { transform: rotate(360deg); } } .quota-smart-action { color: #047857; border-color: rgba(18,185,129,.28); background: #ecfdf5; } .quota-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .quota-card { min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 22px rgba(15,23,42,.04); } .quota-card.is-disabled { opacity: .62; } .quota-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #eef1f4; } .quota-card-head h3 { margin: 0; font-size: 14px; text-transform: capitalize; } .quota-card-head p { margin: 2px 0 6px; max-width: 430px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; } .quota-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; } .quota-card-controls { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; } .quota-card-controls form { margin: 0; } .quota-card-body { padding: 10px 12px 12px; min-height: 96px; } .quota-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-top: 1px solid #f0f2f5; color: var(--muted); font-size: 11px; } .quota-card-foot code { max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #667085; } .quota-auto-refresh { display: flex; align-items: center; gap: 6px; padding: 0 14px 12px; color: #667085; font-size: 12px; } .quota-auto-refresh .material-symbols-outlined { font-size: 16px; } .quota-auto-refresh.scheduled { color: #b45309; } .quota-auto-refresh.refreshing { color: #2563eb; } .quota-auto-refresh.synced { color: #047857; } .quota-auto-refresh.failed { color: #b42318; } .quota-table { display: grid; } .quota-row { display: grid; grid-template-columns: minmax(120px, .9fr) minmax(190px, 1.5fr) minmax(92px, .55fr); align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0f2f5; } .quota-row:last-child { border-bottom: 0; } .quota-row-name { display: flex; align-items: center; gap: 7px; min-width: 0; } .quota-row-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 760; } .quota-row-limit { display: grid; gap: 5px; min-width: 0; } .quota-reset { display: grid; justify-items: end; gap: 2px; min-width: 0; } .quota-reset span { color: var(--muted); font-size: 10px; } .quota-reset strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #344054; font-size: 12px; } /* ---------- Quota visualisation (progress bars, dots, messages) ---------- */ .quota-card { transition: border-color .16s, box-shadow .16s, transform .16s; } .quota-card:hover { border-color: #d8e0ea; box-shadow: 0 12px 32px rgba(15,23,42,.06); transform: translateY(-1px); } .quota-card-head .provider-main h3 { font-size: 16px; font-weight: 750; text-transform: none; } .quota-card-head .provider-main p { margin: 4px 0 8px; font-size: 13px; } .quota-card-body { padding: 14px 16px 16px; } /* Single quota window row: name | progress | reset */ .quota-row { grid-template-columns: minmax(110px, .9fr) minmax(220px, 1.6fr) minmax(110px, .55fr); gap: 14px; padding: 10px 0; } .quota-row-name strong { font-size: 13px; font-weight: 700; text-transform: capitalize; color: #1f2328; } /* Coloured dot before each window name. Mirrors progress fill colour. */ .quota-dot { width: 8px; height: 8px; border-radius: 999px; background: #d0d5dd; box-shadow: 0 0 0 3px rgba(208,213,221,.18); flex: 0 0 auto; } .quota-dot.good { background: #12b981; box-shadow: 0 0 0 3px rgba(18,185,129,.16); } .quota-dot.warn { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.16); } .quota-dot.bad { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.16); } /* Track + fill. Track tinted with the same colour for cohesion. */ .quota-progress { position: relative; height: 6px; border-radius: 999px; background: #eef1f4; overflow: hidden; } .quota-progress.good { background: rgba(18,185,129,.12); } .quota-progress.warn { background: rgba(245,158,11,.14); } .quota-progress.bad { background: rgba(239,68,68,.14); } .quota-progress i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #12b981, #34d399); box-shadow: 0 1px 2px rgba(16,185,129,.32); transition: width .35s cubic-bezier(.4,0,.2,1); } .quota-progress.good i { background: linear-gradient(90deg, #10a574, #34d399); } .quota-progress.warn i { background: linear-gradient(90deg, #f59e0b, #fbbf24); box-shadow: 0 1px 2px rgba(245,158,11,.30); } .quota-progress.bad i { background: linear-gradient(90deg, #ef4444, #f87171); box-shadow: 0 1px 2px rgba(239,68,68,.30); } /* Used / total + remaining percentage line under the bar. */ .quota-numbers { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .quota-numbers b { font-weight: 750; color: #344054; } .quota-progress.good ~ .quota-numbers b { color: #047857; } .quota-progress.warn ~ .quota-numbers b { color: #b45309; } .quota-progress.bad ~ .quota-numbers b { color: #b42318; } /* Reset countdown column. */ .quota-reset { align-items: end; } .quota-reset span { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .quota-reset .material-symbols-outlined { font-size: 14px; color: var(--muted); } .quota-reset strong { font-size: 13px; font-weight: 700; color: #1f2328; font-variant-numeric: tabular-nums; } /* Empty / info state when the connection has no quotaWindows yet. */ .quota-message { display: flex; align-items: flex-start; gap: 10px; padding: 16px; border-radius: 8px; background: #eff6ff; border: 1px solid #dbeafe; color: #1d4ed8; } .quota-message.muted-message { background: #f9fafb; border-color: #eef1f4; color: var(--muted); } .quota-message .material-symbols-outlined { font-size: 20px; flex: 0 0 auto; margin-top: 1px; } .quota-message p { margin: 0; font-size: 13px; line-height: 1.5; } /* Footer: synced timestamp with hint icon. */ .quota-card-foot { background: #fbfcfd; font-size: 11px; } .quota-card-foot span { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; } @media (max-width: 980px) { .quota-row { grid-template-columns: 1fr; gap: 8px; padding: 12px 0; } .quota-reset { justify-items: start; align-items: start; } } /* Provider tabs on quota page */ .quota-page .quota-provider-tabs { display: grid; gap: 14px; } .quota-tab-buttons { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.96)); box-shadow: 0 8px 20px rgba(15,23,42,.04); } .quota-tab-buttons .auth-tab-button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border-radius: 999px; border: 1px solid #e4e7ec; background: #fff; color: #344054; font-weight: 700; box-shadow: none; } .quota-tab-buttons .auth-tab-button:hover { border-color: #cfd8e3; background: #f8fafc; } .quota-tab-buttons .auth-tab-button.active { border-color: rgba(37,99,235,.35); background: linear-gradient(180deg, #eff6ff, #dbeafe); color: #1d4ed8; box-shadow: 0 6px 14px rgba(37,99,235,.12); } .quota-tab-icon { width: 22px; height: 22px; border-radius: 7px; flex: 0 0 auto; } .quota-tab-label { font-size: 13px; white-space: nowrap; } .quota-tab-count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: rgba(15,23,42,.06); color: #475467; font-size: 12px; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; } .quota-tab-buttons .auth-tab-button.active .quota-tab-count { background: rgba(37,99,235,.14); color: #1d4ed8; } .quota-tab-low { min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; background: #fff7ed; border: 1px solid #fdba74; color: #c2410c; font-size: 11px; font-style: normal; font-weight: 800; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; } .quota-tab-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; } .quota-tab-summary > div { padding: 10px 12px; border: 1px solid #eef1f4; border-radius: 10px; background: #fff; } .quota-tab-summary span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .quota-tab-summary strong { font-size: 16px; font-weight: 780; color: #1f2328; font-variant-numeric: tabular-nums; } .quota-tab-pane[hidden] { display: none !important; } @media (max-width: 980px) { .quota-tab-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quota-tab-buttons .auth-tab-button { width: 100%; justify-content: flex-start; } } /* Hero + refined provider tabs */ .quota-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 18px 16px; border: 1px solid #e7ebf0; border-radius: 16px; background: radial-gradient(circle at top right, rgba(56,189,248,.14), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); box-shadow: 0 10px 28px rgba(15,23,42,.04); } .quota-kicker { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; color: #0369a1; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .quota-kicker .material-symbols-outlined { font-size: 16px; } .quota-hero-copy h2 { margin: 0 0 6px; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; } .quota-hero-copy p { margin: 0; max-width: 62ch; color: #667085; font-size: 13px; line-height: 1.55; } .quota-hero-meta { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 12px; } .quota-hero-meta span { display: inline-flex; align-items: center; gap: 6px; color: #475467; font-size: 12px; font-weight: 650; } .quota-hero-meta .material-symbols-outlined { font-size: 16px; color: #98a2b3; } .quota-summary-grid { margin-top: 14px; } .quota-stat { border-radius: 14px; border: 1px solid #e8edf3; background: #fff; box-shadow: 0 6px 16px rgba(15,23,42,.03); } .quota-stat strong { display: block; margin-top: 4px; font-size: 28px; letter-spacing: -.03em; } .quota-stat small { display: block; margin-top: 4px; color: #98a2b3; font-size: 11px; } .quota-stat.is-warn strong { color: #c2410c; } .quota-tab-buttons { padding: 8px; border-radius: 16px; background: #f8fafc; border: 1px solid #e7ebf0; box-shadow: none; overflow-x: auto; flex-wrap: nowrap; } .quota-tab-buttons .auth-tab-button { flex: 0 0 auto; min-height: 42px; padding: 8px 12px 8px 8px; border-radius: 12px; background: transparent; border-color: transparent; gap: 10px; } .quota-tab-buttons .auth-tab-button:hover { background: #fff; border-color: #e4e7ec; } .quota-tab-buttons .auth-tab-button.active { background: #fff; border-color: #dbe7ff; box-shadow: 0 8px 18px rgba(37,99,235,.10); } .quota-tab-icon, .quota-pane-icon { width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: color-mix(in srgb, var(--provider-color) 12%, white); flex: 0 0 auto; } .quota-tab-icon.provider-logo, .quota-pane-icon.provider-logo { padding: 3px; } .quota-tab-icon img, .quota-pane-icon img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 6px; } .quota-tab-icon .material-symbols-outlined, .quota-pane-icon .material-symbols-outlined { font-size: 18px; color: var(--provider-color); } .quota-tab-icon b, .quota-pane-icon b { display: none; } .quota-tab-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid #e8edf3; border-radius: 14px; background: linear-gradient(180deg, #fff, #fbfcfd); } .quota-tab-title { display: flex; align-items: center; gap: 12px; min-width: 0; } .quota-tab-title h3 { margin: 0; font-size: 16px; font-weight: 780; } .quota-tab-title p { margin: 3px 0 0; color: #667085; font-size: 12px; } .quota-tab-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .quota-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: #f2f4f7; color: #475467; font-size: 12px; font-weight: 750; } .quota-chip.ok { background: #ecfdf3; color: #067647; } .quota-chip.warn { background: #fff7ed; color: #c2410c; } .quota-card { border-radius: 14px; } .quota-card-head { padding: 14px 14px 12px; } .quota-card-body { padding: 12px 14px 14px; } @media (max-width: 980px) { .quota-hero { flex-direction: column; } .quota-actions { width: 100%; justify-content: stretch; } .quota-tab-toolbar { flex-direction: column; align-items: flex-start; } .quota-tab-chips { justify-content: flex-start; } } /* Proxy pool panels and rows. */ .proxy-pool-panel { margin: 12px 0 4px; padding: 14px; border: 1px solid rgba(226, 232, 240, 0.8); border-radius: 12px; background: linear-gradient(145deg, #ffffff, #f8fafc); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); } .proxy-pool-head, .proxy-pool-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .proxy-pool-head h3 { margin: 0; font-size: 16px; font-weight: 600; color: #1e293b; } .proxy-pool-list { display: grid; gap: 8px; margin-bottom: 12px; } .proxy-pool-row { border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; padding: 8px 10px; } .proxy-pool-row summary { display: grid; grid-template-columns: 22px minmax(110px,.8fr) minmax(160px,1.4fr) auto; align-items: center; gap: 8px; cursor: pointer; } .proxy-pool-row summary code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475569; } .proxy-pool-form { display: grid; grid-template-columns: minmax(120px,.8fr) minmax(210px,1.4fr) minmax(160px,1fr) minmax(130px,.7fr) auto auto auto; align-items: center; gap: 8px; margin: 10px 0 0; } .proxy-pool-form input, .proxy-pool-form select { min-width: 0; height: 38px; border-radius: 8px; border: 1px solid #cbd5e1; padding: 0 12px; transition: border-color 0.2s, box-shadow 0.2s; } .proxy-pool-form input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); outline: none; } .proxy-page-head { margin-bottom: 0; } .proxy-quick-panel { padding: 20px; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 4px 12px rgba(0,0,0,0.03); } .proxy-pool-form-wide { grid-template-columns: minmax(140px,.7fr) minmax(260px,1.4fr) minmax(180px,1fr) auto auto auto; } .proxy-import-textarea { width: 100%; min-height: 190px; resize: vertical; border: 1px solid #cbd5e1; border-radius: 10px; padding: 14px; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #f8fafc; color: #334155; transition: all 0.2s; } .proxy-import-textarea:focus { background: #fff; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); outline: none; } .proxy-list-panel { padding: 24px; border-radius: 16px; border: none; box-shadow: 0 2px 20px rgba(0,0,0,0.02); background: #ffffff; } .proxy-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; } .proxy-summary .auth-chip { background: #f1f5f9; color: #475569; border-radius: 20px; padding: 6px 14px; font-weight: 500; } .proxy-summary .status-pill { border-radius: 20px; padding: 6px 14px; font-weight: 500; } .proxy-page-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; } .proxy-page-row { border: 1px solid #e2e8f0; border-radius: 14px; background: #ffffff; padding: 0; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .proxy-page-row:hover { box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05); border-color: #cbd5e1; transform: translateY(-2px); } .proxy-page-row[open] { border-color: #3b82f6; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.08); transform: none; } .proxy-page-row > summary { display: flex; flex-direction: column; gap: 12px; padding: 18px; cursor: pointer; list-style: none; background: linear-gradient(to bottom, #ffffff, #fcfdfd); } .proxy-page-row > summary::-webkit-details-marker { display: none; } .proxy-row-main { min-width: 0; display: grid; gap: 8px; } .proxy-row-title { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .proxy-row-title strong { font-size: 15px; font-weight: 600; color: #0f172a; } .proxy-row-main code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #334155; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; } .proxy-row-main p { margin: 0; color: #64748b; font-size: 12px; } .proxy-row-main p code { display: inline; padding: 0; background: transparent; border: none; color: #64748b; word-break: break-all; white-space: normal; } .proxy-row-error { color: #ef4444 !important; font-weight: 500; } .proxy-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 14px; margin-top: 4px; border-top: 1px dashed #e2e8f0; } .proxy-row-actions form { margin: 0; } .proxy-row-actions .model-icon-button { width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; border-radius: 10px; background: #f8fafc; color: #64748b; transition: all 0.2s; } .proxy-row-actions .model-icon-button:hover { background: #f1f5f9; color: #0f172a; } .proxy-row-actions .model-icon-button.danger:hover { background: #fef2f2; color: #ef4444; } .proxy-row-actions .model-icon-button .material-symbols-outlined { font-size: 18px; } .proxy-row-toggle { display: flex; justify-content: flex-end; margin: 0 0 10px; } .proxy-device-chip { display: inline-flex; align-items: center; gap: 4px; background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; } .proxy-device-chip .material-symbols-outlined { font-size: 14px; } /* The layout fix for the edit form inside cards */ .proxy-page-row .proxy-pool-form { grid-template-columns: 1fr; gap: 12px; padding: 0 18px 18px; background: #fcfdfd; } .proxy-page-row .proxy-pool-form input { width: 100%; } .proxy-page-row .proxy-pool-form button[type="submit"] { margin-top: 6px; width: 100%; justify-content: center; padding: 10px; border-radius: 8px; } .proxy-page-row .proxy-pool-form .compact-check { display: flex; align-items: center; gap: 8px; background: #f8fafc; padding: 10px 12px; border-radius: 8px; border: 1px solid #e2e8f0; cursor: pointer; transition: background 0.2s; } .proxy-page-row .proxy-pool-form .compact-check:hover { background: #f1f5f9; } /* ShardX browser profiles - Premium Modern UX */ @keyframes fadeInSlideUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 rgba(239, 91, 62, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(239, 91, 62, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 91, 62, 0); } } /* Workspace Structure */ .browser-workspace { display: grid; gap: 24px; animation: fadeInSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; font-family: 'Inter', 'Roboto', sans-serif; } /* Premium Panels */ .browser-workspace .panel { padding: 24px; background: var(--surface, #ffffff); border: 1px solid rgba(0, 0, 0, 0.04); border-radius: 16px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0,0,0,0.02); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; } .browser-workspace .panel:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0,0,0,0.04); border-color: rgba(239, 91, 62, 0.15); } .browser-runtime-panel, .browser-create-panel, .browser-list-panel { min-width: 0; } /* Flex Alignments */ .browser-runtime-main, .browser-section-head, .browser-runtime-actions, .browser-runtime-meta, .browser-row-actions, .browser-row-chips, .browser-cookie-buttons { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .browser-runtime-main, .browser-section-head { justify-content: space-between; } .browser-runtime-actions, .browser-row-actions { justify-content: flex-end; } .browser-runtime-actions form, .browser-row-actions form { margin: 0; } /* Titles and Glowing Icons */ .browser-runtime-title { min-width: 0; display: flex; align-items: center; gap: 16px; } .browser-runtime-title > .material-symbols-outlined { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #ef5b3e 0%, #f97316 100%); box-shadow: 0 6px 16px rgba(239, 91, 62, 0.3); font-size: 24px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .browser-workspace .panel:hover .browser-runtime-title > .material-symbols-outlined { transform: scale(1.05) rotate(-5deg); box-shadow: 0 8px 20px rgba(239, 91, 62, 0.4); } .browser-runtime-title h2, .browser-section-head h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--text-primary, #0f172a); letter-spacing: -0.01em; } .browser-section-head span, .browser-runtime-paths span { color: var(--text-muted, #64748b); font-size: 13px; font-weight: 500; } /* Chips and Status Pills Overrides */ .browser-workspace .auth-chip { background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569; border-radius: 6px; padding: 4px 8px; font-weight: 600; transition: all 0.2s ease; } .browser-workspace .auth-chip:hover { background: #e2e8f0; color: #0f172a; } .browser-workspace .status-pill.ok { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; box-shadow: 0 2px 8px rgba(5, 150, 105, 0.1); } .browser-workspace .status-pill.ok .status-dot { background: #10b981; box-shadow: 0 0 8px #10b981; } .browser-workspace .status-pill.error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; } .browser-workspace .status-pill.error .status-dot { background: #ef4444; box-shadow: 0 0 8px #ef4444; } .browser-runtime-meta { margin-top: 8px; } /* Runtime Paths */ .browser-runtime-paths { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.45fr); gap: 12px; margin-top: 20px; } .browser-runtime-paths > div { min-width: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .browser-runtime-paths > div:hover { border-color: #cbd5e1; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); } .browser-runtime-paths code, .browser-row-proxy code, .browser-row-title code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 13px; color: #334155; } /* Forms */ .browser-profile-form { min-width: 0; } .browser-create-form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 12px; align-items: end; max-width: 100%; overflow: hidden; margin-top: 16px; } .browser-field-name, .browser-field-fingerprint, .browser-field-proxy, .browser-field-viewport, .browser-create-form > .browser-toggle { grid-column: span 2; } .browser-field-url { grid-column: span 3; } .browser-field-webrtc, .browser-create-form > .browser-submit { grid-column: span 1; } .browser-field-notes { grid-column: span 9; } .browser-field { min-width: 0; display: grid; gap: 6px; margin: 0; } .browser-field > span, .browser-toggle > span { color: #475569; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } /* Modern Inputs */ .browser-field input, .browser-field select, .browser-profile-form input, .browser-profile-form select, .browser-profile-form textarea { min-width: 0; width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 0 12px; background: #ffffff; color: #0f172a; transition: all 0.2s ease; box-shadow: inset 0 1px 2px rgba(0,0,0,0.01); } .browser-field input:focus, .browser-field select:focus, .browser-profile-form input:focus, .browser-profile-form select:focus, .browser-profile-form textarea:focus { border-color: var(--primary, #ef5b3e); box-shadow: 0 0 0 3px rgba(239, 91, 62, 0.15); outline: none; } .browser-field input, .browser-field select { height: 42px; } .browser-viewport-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } /* Toggle Buttons */ .browser-toggle { height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; cursor: pointer; transition: all 0.2s ease; user-select: none; } .browser-toggle:hover { background: #f1f5f9; border-color: #94a3b8; } .browser-toggle input:checked + span { color: var(--primary, #ef5b3e); } .browser-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary, #ef5b3e); cursor: pointer; } /* Submit Button */ .browser-submit { height: 42px; min-width: 0; justify-content: center; background: linear-gradient(135deg, #ef5b3e 0%, #f97316 100%); color: white; border: none; border-radius: 8px; font-weight: 600; box-shadow: 0 4px 12px rgba(239, 91, 62, 0.2); transition: all 0.2s ease; cursor: pointer; } .browser-submit:hover { box-shadow: 0 6px 16px rgba(239, 91, 62, 0.35); transform: translateY(-1px); } .browser-submit:active { transform: translateY(1px); } /* Profile List */ .browser-profile-list { display: grid; gap: 12px; margin-top: 16px; } /* Empty State */ .browser-empty { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--text-muted); text-align: center; border: 2px dashed #cbd5e1; border-radius: 12px; background: #f8fafc; transition: all 0.3s ease; } .browser-empty:hover { border-color: #94a3b8; background: #f1f5f9; } .browser-empty .material-symbols-outlined { color: #94a3b8; font-size: 36px; margin-bottom: 4px; } .browser-empty strong { color: #0f172a; font-size: 16px; font-weight: 700; } .browser-empty p { margin: 0; font-size: 14px; color: #64748b; max-width: 300px; } /* Profile Rows */ .browser-profile-row { border: 1px solid #e2e8f0; border-radius: 12px; background: var(--surface, #fff); overflow: hidden; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } .browser-profile-row:hover { border-color: #cbd5e1; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04); transform: translateY(-2px); } .browser-profile-row[open] { border-color: rgba(239, 91, 62, 0.5); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); transform: translateY(-2px); } .browser-profile-row > summary { display: grid; grid-template-columns: minmax(190px, 1.25fr) 108px minmax(190px, 1.05fr) minmax(160px, .95fr) 84px auto; gap: 16px; align-items: center; padding: 16px 20px; cursor: pointer; list-style: none; background: linear-gradient(to right, #ffffff, #f8fafc); } .browser-profile-row > summary::-webkit-details-marker { display: none; } .browser-row-title { min-width: 0; display: flex; align-items: center; gap: 12px; } .browser-row-title > .material-symbols-outlined { color: #64748b; font-size: 28px; background: #f1f5f9; padding: 8px; border-radius: 50%; transition: all 0.3s ease; } .browser-profile-row:hover .browser-row-title > .material-symbols-outlined { color: var(--primary, #ef5b3e); background: #fff1ee; } .browser-row-title div, .browser-row-cell { min-width: 0; } .browser-row-title strong { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #0f172a; font-size: 15px; font-weight: 700; } .browser-row-title p, .browser-row-cell p { margin: 4px 0 0; color: #64748b; font-size: 12px; } .browser-row-cell > span:first-child { display: block; margin-bottom: 6px; color: #475569; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; } /* Action Buttons inside row */ .browser-row-actions .model-icon-button { width: 36px; height: 36px; min-width: 36px; padding: 0; border-radius: 8px; background: #ffffff; border: 1px solid #e2e8f0; color: #475569; transition: all 0.2s ease; } .browser-row-actions .model-icon-button:hover { background: #f1f5f9; color: var(--primary, #ef5b3e); border-color: #cbd5e1; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.05); } .browser-row-actions .model-icon-button.danger:hover { color: #dc2626; background: #fef2f2; border-color: #fecaca; } .browser-row-actions .ghost { border: 1px solid #e2e8f0; background: #ffffff; padding: 0 12px; height: 36px; border-radius: 8px; font-weight: 600; color: #475569; transition: all 0.2s ease; } .browser-row-actions .ghost:hover { background: #f1f5f9; color: #0f172a; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.05); } /* Live Panel (Expanded state) */ .browser-live-panel { border-top: 1px solid #e2e8f0; background: #f8fafc; animation: fadeInSlideUp 0.3s ease forwards; } .browser-live-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .55fr); gap: 16px; align-items: center; padding: 14px 20px; background: #ffffff; border-bottom: 1px solid #e2e8f0; } .browser-nav-form, .browser-input-form { display: grid; gap: 8px; align-items: center; } .browser-nav-form { grid-template-columns: minmax(0, 1fr) auto; } .browser-input-form { grid-template-columns: minmax(0, 1fr) auto auto auto; } .browser-nav-form input, .browser-input-form input { height: 38px; } .browser-live-meta { min-height: 18px; color: #64748b; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; } .browser-live-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 0; } .browser-screen-wrap { min-height: 400px; background: #0f172a; display: grid; place-items: center; overflow: hidden; position: relative; } /* Subtle glow inside screen wrapper */ .browser-screen-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: inset 0 0 40px rgba(0,0,0,0.5); pointer-events: none; } .browser-screen-wrap img { display: block; width: 100%; max-height: 720px; object-fit: contain; cursor: crosshair; border-radius: 4px; } .browser-screen-wrap img[hidden] { display: none; } .browser-side-panel { display: grid; align-content: start; gap: 16px; padding: 20px; border-left: 1px solid #e2e8f0; background: #ffffff; } .browser-cookie-actions { display: grid; gap: 10px; } .browser-cookie-buttons { justify-content: flex-start; } .browser-cookie-actions textarea { min-height: 120px; resize: vertical; font: 13px/1.5 'JetBrains Mono', 'Fira Code', Consolas, monospace; background: #f8fafc; border-color: #e2e8f0; } .browser-profile-edit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 16px; border-top: 1px dashed #cbd5e1; } .browser-profile-edit button[type="submit"] { justify-self: start; margin-top: 8px; } .ghost-link { display: inline-flex; align-items: center; gap: 6px; color: var(--primary, #ef5b3e); text-decoration: none; font-weight: 700; transition: opacity 0.2s ease; } .ghost-link:hover { opacity: 0.8; } .ghost-link .material-symbols-outlined { font-size: 18px; } /* Responsive Overrides */ @media (max-width: 1380px) { .browser-create-form { grid-template-columns: repeat(6, minmax(0, 1fr)); } .browser-field-name, .browser-field-fingerprint, .browser-field-proxy, .browser-field-viewport, .browser-create-form > .browser-toggle { grid-column: span 2; } .browser-field-url, .browser-field-notes { grid-column: span 3; } .browser-field-webrtc, .browser-create-form > .browser-submit { grid-column: span 1; } .browser-profile-row > summary { grid-template-columns: minmax(220px, 1fr) minmax(180px, .8fr) minmax(150px, .7fr) auto; } .browser-row-proxy { display: none; } } @media (max-width: 1040px) { .browser-runtime-main, .browser-section-head { align-items: flex-start; } .browser-runtime-paths, .browser-live-toolbar, .browser-live-body { grid-template-columns: minmax(0, 1fr); } .browser-side-panel { border-left: 0; border-top: 1px solid #e2e8f0; } .browser-live-meta { text-align: left; white-space: normal; } } @media (max-width: 760px) { .browser-workspace .panel { padding: 16px; } .browser-runtime-actions { justify-content: flex-start; } .browser-create-form, .browser-profile-row > summary, .browser-nav-form, .browser-input-form { grid-template-columns: minmax(0, 1fr); } .browser-field-url, .browser-field-notes, .browser-field-name, .browser-field-fingerprint, .browser-field-proxy, .browser-field-webrtc, .browser-field-viewport, .browser-create-form > .browser-toggle, .browser-create-form > .browser-submit { grid-column: auto; } .browser-row-actions { justify-content: flex-start; } .browser-screen-wrap { min-height: 240px; } } /* Stats page (usage dashboard). */ .summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .stats-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stats-page { display: grid; gap: 16px; } .stats-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .stats-live-cluster { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .stats-live-status { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px; border: 1px solid #dbe3ec; border-radius: 999px; background: rgba(255,255,255,.92); color: #667085; font-size: 11px; font-weight: 900; text-transform: uppercase; } .stats-live-status i { width: 8px; height: 8px; border-radius: 999px; background: currentColor; } .stats-live-status.online { color: #059669; border-color: rgba(18,185,129,.28); background: #ecfdf5; } .stats-live-status.active { color: #ea580c; border-color: rgba(249,115,22,.32); background: #fff7ed; } .stats-live-status.connecting { color: #2563eb; border-color: rgba(37,99,235,.24); background: #eff6ff; } .stats-live-status.offline { color: #dc2626; border-color: rgba(239,68,68,.24); background: #fef2f2; } .stats-live-status.active i, .stats-live-status.connecting i { animation: statsPulse 1.05s ease-in-out infinite; } .usage-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .usage-metric { min-width: 0; min-height: 108px; padding: 16px 18px; background: var(--surface-panel); border: 1px solid var(--border-subtle); border-radius: 8px; box-shadow: var(--shadow-1); } .usage-metric span { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: var(--fs-13); font-weight: var(--fw-semibold); } .usage-metric span i { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-2); background: var(--surface-soft); color: var(--text-secondary); font-size: 18px; } .usage-metric strong { display: block; margin-top: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-30); line-height: var(--lh-tight); letter-spacing: 0; font-variant-numeric: tabular-nums; } .usage-metric.input span i { color: var(--c-brand-600); background: var(--c-brand-50); } .usage-metric.output span i { color: var(--c-success-600); background: var(--c-success-50); } .usage-metric.cost span i { color: var(--c-warning-700); background: var(--c-warning-50); } .usage-metric small { display: block; margin-top: 4px; color: var(--text-muted); font-size: var(--fs-12); } .usage-overview-grid { display: grid; grid-template-columns: minmax(520px, 1.45fr) minmax(340px, .8fr); gap: 14px; align-items: stretch; } .stats-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .stats-panel-head h2 { margin: 0; gap: 9px; font-size: var(--fs-18); } .stats-panel-head p { margin: 4px 0 0; color: var(--text-muted); font-size: var(--fs-13); } .section-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-2); background: var(--surface-soft); color: var(--text-secondary); font-size: 18px; } .usage-network { min-height: 0; height: 100%; padding: 18px; overflow: hidden; display: flex; flex-direction: column; background: var(--surface-panel); } .usage-network.empty-network { min-height: 260px; display: grid; place-items: center; } .provider-activity-summary { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; padding: 3px; border: 1px solid var(--border-subtle); border-radius: 12px; background: color-mix(in srgb, var(--surface-soft) 78%, white); box-shadow: inset 0 1px 0 rgba(255,255,255,.74); } .topology-summary-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px 0 6px; border: 1px solid transparent; border-radius: 9px; color: var(--text-muted); background: transparent; } .topology-summary-chip .topology-status-icon { width: 20px; height: 20px; } .topology-summary-chip strong { color: var(--text-primary); font-size: var(--fs-14); line-height: 1; font-variant-numeric: tabular-nums; } .topology-summary-chip small { color: var(--text-muted); font-size: var(--fs-12); line-height: 1; font-weight: var(--fw-semibold); } .topology-summary-chip.is-connected { border-color: rgba(16,185,129,.22); background: linear-gradient(180deg, #fff, #f6fffb); box-shadow: var(--shadow-1); } .topology-summary-chip.is-running.is-live { color: var(--c-brand-600); border-color: var(--c-brand-100); background: linear-gradient(180deg, #fff, #fff7ed); box-shadow: var(--shadow-1); } .provider-activity-list { max-height: 416px; overflow: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-3); } .provider-activity-row { display: grid; grid-template-columns: minmax(190px, 1fr) 98px 126px 104px; gap: 14px; align-items: center; min-height: 58px; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-panel); } .provider-activity-row:last-child { border-bottom: 0; } .provider-activity-row.is-latest { background: var(--c-gray-25); } .provider-activity-row.is-live { background: #fffaf8; } .provider-activity-identity { min-width: 0; display: flex; align-items: center; gap: 10px; } .usage-node-icon { width: 34px; height: 34px; border-radius: var(--radius-2); } .provider-activity-identity span { display: grid; min-width: 0; gap: 2px; } .provider-activity-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-14); } .provider-activity-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: var(--fs-12); } .provider-activity-stat { display: grid; gap: 2px; justify-items: end; font-variant-numeric: tabular-nums; } .provider-activity-stat small { color: var(--text-muted); font-size: var(--fs-12); } .provider-activity-stat strong { font-size: var(--fs-14); font-weight: var(--fw-semibold); } .provider-activity-state { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 26px; padding: 0 8px; border-radius: var(--radius-2); color: var(--text-muted); background: var(--surface-soft); font-size: var(--fs-12); font-weight: var(--fw-semibold); white-space: nowrap; } .provider-activity-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .provider-activity-state.is-connected { color: var(--c-success-600); background: var(--c-success-50); } .provider-activity-state.is-live { color: var(--c-brand-600); background: var(--c-brand-50); } .provider-activity-state.is-error { color: var(--c-danger-600); background: var(--c-danger-50); } .provider-activity-more { margin: 12px 0 0; color: var(--text-muted); font-size: var(--fs-12); } .topology-canvas { position: relative; flex: 1; min-height: 520px; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-3); background: radial-gradient(circle at center, rgba(233,95,63,.09), transparent 26%), linear-gradient(var(--border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px), var(--surface-panel); background-size: auto, 42px 42px, 42px 42px, auto; } .topology-edge-map { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; } .topology-edge { stroke: var(--border-strong); stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: .5; } .topology-edge.is-connected { stroke: rgba(2,122,72,.48); stroke-width: 2; opacity: .82; } .topology-edge.is-live { stroke: rgba(233,95,63,.84); stroke-width: 2.7; stroke-dasharray: 10 8; opacity: .95; animation: liveEdgeDash 1.05s linear infinite; } .topology-edge.is-latest:not(.is-live) { stroke: rgba(245,158,11,.68); stroke-width: 2; } .topology-edge.is-error { stroke: rgba(220,38,38,.72); stroke-width: 2.2; } .topology-node { position: absolute; z-index: 3; width: clamp(166px, 16vw, 204px); min-height: 50px; display: flex; align-items: center; gap: 8px; transform: translate(-50%, -50%); padding: 9px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-3); background: rgba(255,255,255,.96); box-shadow: var(--shadow-2); } [data-theme="dark"] .topology-node { background: rgba(22,26,34,.96); } .topology-node.is-connected { border-color: rgba(2,122,72,.36); } .topology-node.is-live { border-color: rgba(233,95,63,.56); box-shadow: 0 0 0 5px rgba(233,95,63,.08), var(--shadow-3); } .topology-node.is-latest:not(.is-live) { border-color: rgba(245,158,11,.56); } .topology-node.is-error { border-color: rgba(220,38,38,.48); } .topology-node.is-disabled { opacity: .72; } .topology-node-copy { min-width: 0; display: grid; gap: 2px; flex: 0 1 auto; max-width: calc(100% - 72px); } .topology-node-copy strong, .topology-node-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topology-node-copy strong { color: var(--text-primary); font-size: var(--fs-14); } .topology-node-copy small { color: var(--text-muted); font-size: var(--fs-12); } .topology-node-metrics { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; } .topology-node-metrics > span { display: inline-flex; align-items: center; gap: 3px; min-width: 0; } .topology-svg { display: inline-block; flex: 0 0 auto; } .topology-metric-icon { width: 16px; height: 16px; } .topology-node em { flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-style: normal; } .topology-status-icon { width: 19px; height: 19px; } .topology-center { position: absolute; left: 50%; top: 50%; z-index: 4; width: 116px; height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transform: translate(-50%, -50%); padding: 12px; border: 1px solid rgba(233,95,63,.42); border-radius: 999px; background: radial-gradient(circle at center, #fff 0 48%, #fff2ed 49% 100%); box-shadow: 0 0 0 6px rgba(233,95,63,.08), 0 0 0 11px rgba(233,95,63,.045), 0 18px 38px rgba(233,95,63,.16); } .topology-center.is-live { box-shadow: 0 0 0 6px rgba(233,95,63,.10), 0 0 0 12px rgba(233,95,63,.06), 0 20px 42px rgba(233,95,63,.22); } [data-theme="dark"] .topology-center { background: radial-gradient(circle at center, rgba(34,18,14,.98) 0 48%, rgba(55,27,20,.96) 49% 100%); } .topology-center .brand-mark { width: 38px; height: 38px; border-radius: 12px; font-size: 20px; } .topology-center strong, .topology-center small { display: block; } .topology-center strong { font-size: var(--fs-14); } .topology-center small { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 6px; color: var(--text-muted); background: rgba(255,255,255,.78); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); font-size: var(--fs-12); font-weight: var(--fw-semibold); } .topology-center small:empty { display: none; } .topology-center small.icon-only { width: 22px; min-height: 22px; padding: 0; justify-content: center; background: transparent; border: 0; } .topology-center small .topology-status-icon { width: 17px; height: 17px; } .topology-center small.icon-only .topology-status-icon { width: 21px; height: 21px; } .topology-legend { position: absolute; right: 12px; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: calc(100% - 24px); } .topology-legend > span { display: inline-flex; align-items: center; gap: 6px; width: 30px; min-width: 30px; min-height: 28px; padding: 0; justify-content: center; color: var(--text-muted); background: rgba(255,255,255,.88); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); font-size: var(--fs-12); font-weight: var(--fw-semibold); } [data-theme="dark"] .topology-legend > span { background: rgba(22,26,34,.9); } .topology-legend .topology-status-icon { width: 20px; height: 20px; } .topology-overflow { color: var(--text-muted); } .usage-recent { min-height: 0; height: 100%; overflow: hidden; padding: 18px; display: flex; flex-direction: column; background: var(--surface-panel); } .usage-recent .table-wrap { min-height: 0; flex: 1; overflow-y: hidden; overflow-x: hidden; padding-right: 2px; } .usage-recent .stats-panel-head { margin-bottom: 12px; } .stats-recent-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0 6px; font-variant-numeric: tabular-nums; } .stats-recent-table th { padding: 0 6px 4px; border-bottom: 0; color: var(--text-muted); font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: 0; text-transform: uppercase; white-space: nowrap; } .stats-recent-table th:nth-child(1) { width: 42%; } .stats-recent-table th:nth-child(2) { width: 22%; } .stats-recent-table th:nth-child(3) { width: 21%; } .stats-recent-table th:nth-child(4) { width: 15%; text-align: right; } .stats-recent-table td { height: 58px; padding: 8px 6px; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); background: rgba(255,255,255,.88); font-size: var(--fs-13); overflow: hidden; } .stats-recent-table td:first-child { border-left: 1px solid var(--border-subtle); border-radius: 8px 0 0 8px; } .stats-recent-table td:last-child { border-right: 1px solid var(--border-subtle); border-radius: 0 8px 8px 0; } .stats-recent-table tbody tr:hover td { border-color: rgba(148,163,184,.42); background: var(--surface-soft); } .usage-recent thead th, .stats-data-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-panel); } .recent-model-cell { min-width: 0; display: flex; align-items: center; gap: 8px; } .recent-model-copy { min-width: 0; display: grid; gap: 2px; } .recent-model-copy small { display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: var(--fs-12); } .recent-status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--c-success-600); box-shadow: 0 0 0 4px rgba(16,185,129,.12); } .recent-status-dot.is-pending { background: var(--c-brand-600); box-shadow: 0 0 0 4px rgba(233,95,63,.14); animation: statsPulse 1s ease-in-out infinite; } .recent-status-dot.is-error { background: var(--c-danger-600); box-shadow: 0 0 0 4px rgba(220,38,38,.11); } .recent-status-dot.is-cancelled { background: var(--text-muted); box-shadow: 0 0 0 4px rgba(100,116,139,.1); } .stats-model-name { display: inline-block; max-width: min(340px, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .recent-status-chip, .recent-realtime-chip, .recent-latency { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; } .recent-status-chip { gap: 6px; min-height: 28px; max-width: 100%; padding: 0 8px; border: 1px solid var(--border-subtle); border-radius: 999px; color: var(--text-muted); background: var(--surface-soft); font-size: var(--fs-12); font-weight: var(--fw-bold); } .recent-status-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .recent-status-chip.is-pending { color: var(--c-brand-600); border-color: rgba(233,95,63,.22); background: #fff7ed; } .recent-status-chip.is-live-done { color: var(--c-success-600); border-color: rgba(16,185,129,.22); background: var(--c-success-50); } .recent-status-chip.is-cancelled { color: var(--text-muted); background: var(--surface-soft); } .recent-status-chip.is-error { color: var(--c-danger-600); border-color: rgba(220,38,38,.18); background: var(--c-danger-50); } .recent-token-stack { display: grid; gap: 3px; justify-items: start; } .recent-token { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: var(--fs-12); font-weight: var(--fw-semibold); line-height: 1.1; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .recent-token::before { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; font-size: 11px; font-weight: var(--fw-bold); } .recent-token.in { color: var(--c-brand-600); } .recent-token.in::before { content: "↑"; background: #fff1ed; } .recent-token.out { color: var(--c-success-600); } .recent-token.out::before { content: "↓"; background: var(--c-success-50); } .recent-realtime-chip { gap: 5px; color: var(--c-info-700); font-size: var(--fs-12); font-weight: var(--fw-bold); } .recent-realtime-chip .material-symbols-outlined { font-size: 16px; } .recent-latency { gap: 3px; color: var(--text-secondary); } .recent-latency strong { color: var(--text-primary); font-size: var(--fs-13); font-weight: var(--fw-bold); } .recent-latency small { margin: 0; color: var(--text-muted); font-size: var(--fs-11); } .recent-time { color: var(--text-muted); font-size: var(--fs-12); text-align: right; white-space: nowrap; } .stats-recent-table tr.is-pending td { border-color: rgba(233,95,63,.18); background: #fff8f5; } .stats-recent-table tr.is-live-done td { border-color: rgba(16,185,129,.18); background: #f8fffb; } .stats-recent-table tr.is-cancelled td { background: var(--surface-soft); } .stats-recent-table tr.is-error td { border-color: rgba(220,38,38,.16); background: var(--c-danger-50); } [data-theme="dark"] .stats-recent-table td { background: rgba(22,26,34,.92); } [data-theme="dark"] .recent-status-chip.is-pending, [data-theme="dark"] .stats-recent-table tr.is-pending td { background: rgba(233,95,63,.12); } [data-theme="dark"] .recent-status-chip.is-live-done, [data-theme="dark"] .stats-recent-table tr.is-live-done td { background: rgba(16,185,129,.1); } [data-theme="dark"] .recent-status-chip.is-error, [data-theme="dark"] .stats-recent-table tr.is-error td { background: rgba(220,38,38,.12); } [data-theme="dark"] .recent-token.in::before { background: rgba(233,95,63,.14); } [data-theme="dark"] .recent-token.out::before { background: rgba(16,185,129,.12); } .usage-lower-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } .stats-data-panel { padding: 18px; } .stats-data-panel .stats-panel-head { margin-bottom: 10px; } .stats-data-panel .table-wrap { max-height: 430px; overflow: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-3); } .stats-data-table { table-layout: auto; font-variant-numeric: tabular-nums; } .stats-data-table th, .stats-data-table td { padding: 12px 14px; } .stats-data-table tbody tr:hover td { background: var(--surface-soft); } .stats-data-table .numeric { text-align: right; white-space: nowrap; } .stats-model-table .stats-model-cell { min-width: 220px; max-width: 360px; } .stats-model-table td:nth-child(2) { white-space: nowrap; } @keyframes statsPulse { 0%, 100% { transform: scale(.82); opacity: .58; } 50% { transform: scale(1.2); opacity: 1; } } @keyframes liveEdgeDash { to { stroke-dashoffset: -18; } } /* Request detail page (drill-down). */ .request-detail-panel { padding: 22px; } .request-detail-list { display: grid; gap: 10px; } .request-detail-card { border: 1px solid #e5eaf0; border-radius: 8px; background: #fff; overflow: hidden; } .request-detail-card > summary { display: grid; grid-template-columns: 150px minmax(180px, 1fr) 140px 110px 170px 90px; align-items: center; gap: 12px; padding: 13px 14px; cursor: pointer; list-style: none; } .request-detail-card > summary::-webkit-details-marker, .detail-json-section > summary::-webkit-details-marker { display: none; } .request-detail-card > summary b { text-transform: capitalize; } .request-detail-card > summary em { color: #667085; font-style: normal; text-align: right; } .request-detail-body { display: grid; gap: 10px; padding: 0 14px 14px; border-top: 1px solid #eef2f7; } .detail-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 14px; } .detail-overview.compact { padding-top: 0; } .detail-metric { min-width: 0; border: 1px solid #e7edf4; border-radius: 8px; background: #fbfcfd; padding: 10px 12px; } .detail-metric span { display: block; color: #667085; font-size: 11px; font-weight: 900; text-transform: uppercase; } .detail-metric strong { display: block; margin-top: 5px; color: #111827; font-size: 14px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .detail-metric small { display: block; margin-top: 5px; color: #667085; font-size: 12px; line-height: 1.35; } .detail-token-saver, .detail-readable-section, .detail-raw-group { border: 1px solid #e7edf4; border-radius: 8px; background: #fff; overflow: hidden; } .detail-token-saver h3, .detail-readable-section header { margin: 0; padding: 11px 12px; border-bottom: 1px solid #eef2f7; background: #fbfcfd; } .detail-token-saver h3, .detail-readable-section h3, .detail-raw-group > summary { display: flex; align-items: center; gap: 8px; color: #344054; font-size: 13px; font-weight: 850; } .detail-readable-section header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .detail-readable-section header small { color: #667085; font-size: 12px; font-weight: 700; text-align: right; } .detail-readable-section.is-error { border-color: rgba(239,68,68,.3); } .detail-readable-section.is-error header { background: #fff7f7; } .detail-facts { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 0; } .detail-facts span { max-width: 100%; border-radius: 999px; background: #f2f4f7; color: #475467; padding: 4px 8px; font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .detail-readable-section pre { max-height: 260px; overflow: auto; margin: 0; padding: 12px; color: #111827; font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; } .detail-raw-group > summary { padding: 11px 12px; cursor: pointer; list-style: none; background: #fbfcfd; } .detail-json-section { border: 1px solid #eef2f7; border-radius: 8px; overflow: hidden; background: #fbfcfd; margin: 10px; } .detail-json-section > summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; color: #344054; font-size: 13px; font-weight: 850; list-style: none; } .detail-json-section pre { max-height: 300px; overflow: auto; margin: 0; padding: 13px; border-top: 1px solid #eef2f7; color: #111827; font-size: 12px; line-height: 1.45; white-space: pre-wrap; } .detail-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; color: #667085; } .detail-pagination a { display: inline-flex; min-height: 34px; align-items: center; border-radius: 8px; padding: 0 12px; background: #eef1f4; color: #344054; text-decoration: none; font-weight: 800; } .detail-pagination a.disabled { pointer-events: none; opacity: .45; } @media (max-width: 900px) { .detail-overview { grid-template-columns: 1fr; } .detail-readable-section header { align-items: flex-start; flex-direction: column; } .detail-readable-section header small { text-align: left; } } /* Authentication surface. */ .auth-body { background: var(--surface-app); } .login-shell { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6); } .auth-panel { width: min(100%, 460px); padding: 0; overflow: hidden; box-shadow: var(--shadow-3); } .auth-header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-subtle); background: var(--surface-panel); } .auth-brand { min-width: 0; display: flex; align-items: center; gap: var(--space-3); } .auth-brand strong { display: block; font-size: var(--fs-16); line-height: var(--lh-tight); } .auth-brand div span { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--fs-12); } .auth-badge { flex: 0 0 auto; padding: 5px 8px; color: var(--text-secondary); background: var(--surface-soft); border: 1px solid var(--border-subtle); border-radius: var(--radius-2); font-size: var(--fs-12); font-weight: var(--fw-bold); } .auth-content { padding: var(--space-7) var(--space-6) var(--space-6); background: var(--surface-panel); } .auth-title { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-6); } .auth-title > .material-symbols-outlined { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--c-brand-600); background: var(--c-brand-50); border-radius: var(--radius-3); } .auth-title p { margin: 0 0 var(--space-1); color: var(--text-muted); font-size: var(--fs-12); font-weight: var(--fw-bold); } .auth-title h1 { margin: 0; font-size: var(--fs-24); line-height: var(--lh-tight); } .auth-alert { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); margin-bottom: var(--space-5); color: var(--c-danger-700); background: var(--c-danger-50); border: 1px solid var(--c-danger-200); border-radius: var(--radius-2); font-size: var(--fs-14); line-height: var(--lh-base); } .auth-alert .material-symbols-outlined { flex: 0 0 auto; margin-top: 1px; font-size: 19px; } .auth-form label { margin: 0 0 var(--space-2); } .auth-form label:not(:first-child) { margin-top: var(--space-5); } .auth-input { position: relative; } .auth-input > .material-symbols-outlined { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 20px; pointer-events: none; } .auth-input input { height: 48px; padding-left: 42px; background: var(--surface-panel); } .auth-input.has-action input { padding-right: 48px; } .auth-reveal { position: absolute; right: var(--space-1); top: 50%; transform: translateY(-50%); width: 40px; min-height: 40px; padding: 0; color: var(--text-muted); background: transparent; border-radius: var(--radius-2); } .auth-reveal:hover { color: var(--text-primary); background: var(--surface-soft); } .auth-reveal:active { transform: translateY(-50%); } .auth-submit { width: 100%; height: 48px; margin-top: var(--space-7); } .auth-footer { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-5) var(--space-6); color: var(--text-secondary); border-top: 1px solid var(--border-subtle); background: var(--surface-soft); } .auth-footer .material-symbols-outlined { flex: 0 0 auto; color: var(--c-success-600); } .auth-footer strong { display: block; margin-bottom: 2px; font-size: var(--fs-13); } .auth-footer div span { color: var(--text-muted); font-size: var(--fs-13); } @media (max-width: 520px) { .login-shell { padding: var(--space-4); } .auth-header, .auth-content, .auth-footer { padding-left: var(--space-5); padding-right: var(--space-5); } } /* Generic helpers reusable across pages. */ .muted { color: var(--muted); } .muted-section { opacity: .82; } .muted-message { opacity: .86; } .danger-text { color: #dc2626; } .narrow-panel { max-width: 560px; } /* Breakpoint overrides. Keep last in load order. */ @media (max-width: 1200px) { .provider-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .usage-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .usage-overview-grid { grid-template-columns: 1fr; } } @media (max-width: 980px) { .app-frame { grid-template-columns: 1fr; } .sidebar { min-height: auto; } .content-shell { padding: 20px; } .topbar, .panel-head, .quota-toolbar, .provider-row, .provider-section-head, .connections-head, .quota-card-head, .stats-controls, .cli-tool-head, .console-toolbar { flex-direction: column; align-items: stretch; } .search-box { width: 100%; } .create-key-form { flex-direction: column; align-items: stretch; } .create-key-form input { width: 100%; } .provider-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .method-grid, .summary-grid, .edit-grid, .codex-model-grid, .codex-model-add-form, .quota-card-grid, .usage-card-grid, .usage-lower-grid, .tool-row, .tool-input-action, .codex-model-map-row, .proxy-pool-form { grid-template-columns: 1fr; } .tool-row > span:first-child { text-align: left; } .codex-model-map-head { flex-direction: column; align-items: stretch; } .codex-model-map-source { text-align: left; } .codex-model-map-title { justify-content: flex-start; } .tool-arrow { display: none; } .tool-actions { padding-left: 0; } .usage-network { min-height: 0; } .request-detail-card > summary, .proxy-pool-row summary { grid-template-columns: 1fr; } .proxy-page-list { grid-template-columns: 1fr; } .quota-row { grid-template-columns: 1fr; } .quota-reset { justify-items: start; } .connection-row { flex-direction: column; align-items: stretch; } .connection-actions, .quota-card-controls, .proxy-row-actions { justify-content: flex-end; flex-wrap: wrap; } .connection-edit-panel { margin-left: 8px; } .endpoint-row { grid-template-columns: 82px minmax(0,1fr) 38px; } } @media (max-width: 620px) { .provider-card-grid { grid-template-columns: 1fr; } .segmented-tabs, .period-tabs { width: 100%; overflow-x: auto; } .stats-panel-head { flex-direction: column; align-items: stretch; } .provider-activity-summary { justify-content: flex-start; } .provider-activity-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } .provider-activity-stat { display: none; } .usage-recent { max-height: none; } .usage-recent .table-wrap { max-height: 420px; } .stats-data-panel { padding: 14px; } .topology-canvas { min-height: 620px; } .topology-node { width: 172px; padding: 8px; } .topology-legend { left: 12px; justify-content: flex-start; } }