/* ================================================================ CSS CUSTOM PROPERTIES — theme tokens Dark mode is the default (no attribute). Light mode activates via [data-theme="light"] on . ================================================================ */ :root { /* Page structure */ --page-bg: #0f1117; --container-bg: #1a1d27; --container-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Text */ --text-primary: #e8e8ee; --text-secondary: #9090a8; --text-muted: #6a6a82; /* Borders */ --border-secondary: #252839; /* Surfaces (panels, hover states) */ --surface-1: #141720; --surface-2: #1e2130; --surface-3: #252839; /* Inputs */ --input-bg: #111420; --input-border: #3a3d52; --eye-btn-bg: #1a1d27; /* Rate limit bar */ --rate-bar-bg: #111d30; --rate-bar-border: #1a3a60; --rate-bar-text: #7aacda; --rate-bar-note: #4a7aa0; /* Tier / status badges */ --badge-free-bg: #0d2e22; --badge-limited-bg: #2e1f0a; --badge-paid-bg: #2e0d0d; --badge-excl-bg: #252839; --badge-excl-text: #7070a0; /* Provider note banner */ --note-bg: #1e1a0a; --note-border: #3a3010; /* Exclude button */ --excl-btn-bg: #1a1d27; --excl-active-bg: #2e1515; /* Active provider highlight */ --active-section-bg:#0d2218; /* Error */ --error-color: #e06666; /* Misc */ --drag-handle: #4a4a6a; --reorder-btn: #4a4a6a; --text-action-sep: #4a4a6a; --skill-chip-bg: #252839; --skill-chip-text: #8080a8; --code-bg: #1e2130; --copy-btn-bg: #1a1d27; --copy-btn-border: #3a3d52; } [data-theme="light"] { --page-bg: #f4f4f9; --container-bg: #ffffff; --container-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --text-primary: #333333; --text-secondary: #555555; --text-muted: #888888; --border-secondary: #e0e0e0; --surface-1: #fafafa; --surface-2: #f8f8f8; --surface-3: #f0f0f0; --input-bg: #ffffff; --input-border: #cccccc; --eye-btn-bg: #f4f4f9; --rate-bar-bg: #f0f7ff; --rate-bar-border: #b8d4f0; --rate-bar-text: #3a5a80; --rate-bar-note: #7a9ab8; --badge-free-bg: #e8f8f2; --badge-limited-bg: #fff3e0; --badge-paid-bg: #fef0f0; --badge-excl-bg: #f0f0f0; --badge-excl-text: #999999; --note-bg: #fffbf0; --note-border: #ffe0a0; --excl-btn-bg: #fafafa; --excl-active-bg: #ffeaea; --active-section-bg:#f0fff8; --error-color: #cc3333; --drag-handle: #cccccc; --reorder-btn: #bbbbbb; --text-action-sep: #cccccc; --skill-chip-bg: #f0f0f0; --skill-chip-text: #666666; --code-bg: #f0f0f0; --copy-btn-bg: #f4f4f9; --copy-btn-border: #dddddd; } /* ── Base ─────────────────────────────────────────── */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--page-bg); color: var(--text-primary); max-width: 960px; margin: 40px auto; padding: 20px; transition: background-color 0.3s ease, color 0.3s ease; } .container { background: var(--container-bg); padding: 30px; border-radius: 8px; box-shadow: var(--container-shadow); transition: background-color 0.3s ease, box-shadow 0.3s ease; } h2 { margin-top: 0; } /* ── Form elements ────────────────────────────────── */ .form-group { margin-bottom: 15px; } label { display: block; font-weight: bold; margin-bottom: 5px; } input[type="text"], input[type="password"], input[type="number"], select, textarea { width: 100%; padding: 10px; border: 1px solid var(--input-border); border-radius: 4px; box-sizing: border-box; font-family: inherit; background: var(--input-bg); color: var(--text-primary); transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } textarea { resize: vertical; min-height: 100px; } .parameter-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin-top: 5px; } .model-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; } .model-label-row > label { margin-bottom: 0; } /* ── Tier filter checkboxes ───────────────────────── */ .tier-filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .tier-filter-label { font-weight: normal; font-size: 12px; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; gap: 4px; } .tier-filter-label input { margin: 0; cursor: pointer; } .tier-filter-label.lbl-free { color: #10a37f; } .tier-filter-label.lbl-paid { color: var(--error-color); } /* ── API key reveal button ───────────────────────── */ .api-key-wrapper { display: flex; align-items: stretch; gap: 6px; } .api-key-wrapper input { flex: 1; min-width: 0; /* prevents flex overflow when input has width:100% from global rule */ } .eye-btn { flex-shrink: 0; background: var(--eye-btn-bg); border: 1px solid var(--input-border); border-radius: 4px; cursor: pointer; padding: 0 10px; color: var(--text-muted); font-size: 15px; line-height: 1; white-space: nowrap; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .eye-btn:hover { background: var(--surface-3); color: var(--text-secondary); } .eye-btn.visible { color: #10a37f; border-color: #10a37f; background: var(--active-section-bg); } /* ── ⓘ info links ─────────────────────────────────── */ .info-link { font-weight: normal; font-size: 11px; color: var(--text-muted); text-decoration: none; margin-left: 4px; vertical-align: middle; } .info-link:hover { color: #10a37f; } /* ── Provider note ────────────────────────────────── */ .provider-note { font-size: 12px; color: var(--text-muted); margin: 4px 0 0; font-style: italic; } /* ── Definitions section ──────────────────────────── */ .defs-section { margin-top: 24px; border: 1px solid var(--border-secondary); border-radius: 4px; font-size: 13px; transition: border-color 0.3s ease; } .defs-section summary { padding: 10px 14px; cursor: pointer; font-weight: bold; color: var(--text-secondary); user-select: none; list-style: none; } .defs-section summary:hover { color: var(--text-primary); } .defs-section summary::marker, .defs-section summary::-webkit-details-marker { display: none; } .defs-dl { margin: 0; padding: 4px 16px 14px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; } .defs-dl dt { font-weight: bold; color: var(--text-secondary); padding-top: 2px; white-space: nowrap; } .defs-dl dd { margin: 0; color: var(--text-secondary); line-height: 1.5; } /* ── Buttons ──────────────────────────────────────── */ /* Scoped to avoid inheriting the old test2 width:100% on all buttons */ .button-row { display: flex; gap: 10px; margin-bottom: 0; } .btn-generate { flex: 1; background-color: #10a37f; color: white; border: none; padding: 12px 20px; font-size: 16px; border-radius: 4px; cursor: pointer; font-weight: bold; } .btn-generate:hover:not(:disabled) { background-color: #0b8c6d; } .btn-generate:disabled { background-color: var(--surface-3); cursor: not-allowed; color: var(--text-muted); } .btn-stop { background-color: var(--container-bg); color: var(--error-color); border: 2px solid var(--error-color); padding: 12px 20px; font-size: 16px; border-radius: 4px; cursor: pointer; font-weight: bold; min-width: 90px; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .btn-stop:hover:not(:disabled) { background-color: var(--error-color); color: white; } .btn-stop:disabled { border-color: var(--input-border); color: var(--text-muted); cursor: not-allowed; } /* ── API key section ──────────────────────────────── */ .field-note { font-size: 12px; margin-top: 5px; } .field-note.optional { color: #10a37f; font-style: italic; } .field-note.privacy { color: var(--text-muted); } .key-link { font-weight: normal; font-size: 12px; color: #10a37f; text-decoration: none; margin-left: 6px; } .key-link:hover { text-decoration: underline; } .expand-keys-btn { display: inline-block; background: none; border: none; padding: 0; margin-top: 8px; font-family: inherit; font-size: 13px; color: #10a37f; cursor: pointer; text-decoration: underline; } .other-keys-section { display: none; margin-top: 10px; padding: 14px; border: 1px solid var(--border-secondary); border-radius: 4px; background: var(--surface-1); transition: background-color 0.3s ease, border-color 0.3s ease; } .other-keys-section.open { display: block; } .other-keys-section .intro-text { font-size: 13px; color: var(--text-secondary); margin: 0 0 12px; } .other-keys-section .form-group { margin-bottom: 10px; } .other-keys-section label { font-weight: normal; font-size: 13px; } .other-keys-section input { font-size: 13px; padding: 8px; } /* ── Rate limit bar ───────────────────────────────── */ .rate-limit-bar { display: none; margin-top: 10px; padding: 8px 14px; background: var(--rate-bar-bg); border: 1px solid var(--rate-bar-border); border-radius: 4px; font-size: 13px; color: var(--rate-bar-text); gap: 24px; align-items: center; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .rate-limit-bar.visible { display: flex; } .rate-limit-bar .rl-item { white-space: nowrap; } .rate-limit-bar .rl-item strong { font-weight: 600; } .rate-limit-bar .rl-note { margin-left: auto; font-style: italic; color: var(--rate-bar-note); font-size: 12px; } /* ── Response area ────────────────────────────────── */ /* Response box is intentionally always dark — terminal/code aesthetic */ .response-area { margin-top: 20px; } .response-box { background-color: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 4px; height: 200px; max-height: 200px; overflow-y: auto; white-space: pre-wrap; font-family: monospace; border: 1px solid #444; } .error-text { color: #ff6b6b; } /* ── Per-provider sections ────────────────────────── */ .provider-sections-list { margin-top: 24px; } .provider-sections-list > h3 { font-size: 15px; font-weight: bold; color: var(--text-secondary); margin: 0 0 12px; } .provider-section { border: 1px solid var(--border-secondary); border-radius: 6px; margin-bottom: 8px; transition: border-color 0.3s ease; } /* Grid layout: [controls auto] [content 1fr] [chevron auto] This guarantees stats always wrap within the content column — aligned under the provider name at every viewport width. */ .provider-section > summary { padding: 10px 14px; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 4px 8px; user-select: none; list-style: none; background: var(--surface-2); transition: background-color 0.3s ease; } .provider-section > summary:hover { background: var(--surface-3); } .provider-section[open] > summary { border-bottom: 1px solid var(--border-secondary); } .provider-section > summary::marker, .provider-section > summary::-webkit-details-marker { display: none; } /* Column 1: drag handle + reorder buttons + order badge */ .ps-controls { display: flex; align-items: center; gap: 4px; padding-top: 1px; /* optical alignment with name text */ } /* Column 2: name + tier badge + stats — wraps within its own column */ .ps-content { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .ps-name { font-weight: bold; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ps-tier { font-size: 11px; font-weight: bold; padding: 2px 7px; border-radius: 3px; white-space: nowrap; } .ps-tier-free { background: var(--badge-free-bg); color: #10a37f; } .ps-tier-limited { background: var(--badge-limited-bg); color: #e07b00; } .ps-tier-paid { background: var(--badge-paid-bg); color: var(--error-color); } .ps-tier-excl { background: var(--badge-excl-bg); color: var(--badge-excl-text); } .ps-key-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: var(--text-muted); } /* Column 3 */ .ps-chevron { font-size: 11px; color: var(--text-muted); padding-top: 2px; } .provider-section[open] .ps-chevron { transform: rotate(90deg); display: inline-block; } .ps-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; } /* Models within each section */ .ps-models-section { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ps-group-label { font-size: 11px; font-weight: bold; display: inline-block; padding: 2px 7px; border-radius: 3px; margin-bottom: 6px; } .ps-label-free { background: var(--badge-free-bg); color: #10a37f; } .ps-label-limited { background: var(--badge-limited-bg); color: #e07b00; } .ps-label-paid { background: var(--badge-paid-bg); color: var(--error-color); } .ps-label-none { background: var(--badge-excl-bg); color: var(--text-muted); } .ps-limited-note { font-size: 11px; color: #e07b00; margin-bottom: 5px; font-style: italic; } .ps-model-item { font-size: 12px; color: var(--text-secondary); line-height: 1.9; display: flex; align-items: flex-start; gap: 4px; } .ps-model-item-content { flex: 1; min-width: 0; } .model-reorder-btns { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; padding-top: 2px; } .ps-model-rec { color: #10a37f; font-size: 10px; } .ps-model-none { color: var(--text-muted); font-style: italic; font-size: 12px; } /* Model exclude toggle — sits at far right of each model item row */ .ps-model-item.excluded { opacity: 0.45; text-decoration: line-through; } .ps-exclude-btn { font-size: 10px; padding: 1px 6px; cursor: pointer; border: 1px solid var(--border-secondary); border-radius: 3px; background: var(--excl-btn-bg); color: var(--text-muted); flex-shrink: 0; align-self: flex-start; margin-top: 2px; white-space: nowrap; font-family: inherit; line-height: 1.5; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .ps-exclude-btn:hover { border-color: #f5a0a0; color: #c00; background: var(--excl-active-bg); } .ps-exclude-btn.excluded { background: var(--excl-active-bg); border-color: #f5a0a0; color: #c00; } /* Note banner (for excluded/planned providers) */ .ps-note-section { padding: 8px 10px; background: var(--note-bg); border: 1px solid var(--note-border); border-radius: 4px; font-size: 12px; color: var(--text-muted); line-height: 1.5; transition: background-color 0.3s ease, border-color 0.3s ease; } /* Operational + details data */ .ps-data-section { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--border-secondary); padding-top: 12px; } .ps-data-group > h5 { margin: 0 0 8px; font-size: 11px; color: var(--text-muted); font-weight: bold; text-transform: uppercase; letter-spacing: 0.4px; } .ps-dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; font-size: 12px; } .ps-dl dt { font-weight: bold; color: var(--text-muted); white-space: nowrap; padding-top: 1px; } .ps-dl dd { margin: 0; color: var(--text-secondary); line-height: 1.5; } .ps-dl a { color: #10a37f; } /* Active provider highlight */ .provider-section.ps-active > summary { background: var(--active-section-bg); border-left: 3px solid #10a37f; } .provider-section.ps-active .ps-name { color: #10a37f; } /* Excluded / planned providers */ .provider-section.ps-excluded { opacity: 0.6; } .order-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: bold; color: white; } .order-badge.free { background: #10a37f; } .order-badge.paid { background: var(--error-color); } .order-badge.exclude { background: var(--drag-handle); font-size: 13px; } /* ── Text action links (Test Models, Test All, etc.) ─ */ .text-action-link { font-size: 13px; color: #10a37f; text-decoration: none; cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; white-space: nowrap; } .text-action-link:hover { text-decoration: underline; } .text-action-link:disabled { color: var(--text-muted); cursor: not-allowed; text-decoration: none; } .text-action-sep { color: var(--text-action-sep); margin: 0 4px; font-size: 12px; } /* ── Test panel ───────────────────────────────────── */ .test-panel { display: none; margin-top: 10px; border: 1px solid var(--border-secondary); border-radius: 4px; background: var(--surface-1); transition: background-color 0.3s ease, border-color 0.3s ease; } .test-panel.open { display: block; } .test-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border-secondary); font-weight: bold; color: var(--text-secondary); font-size: 13px; } .test-panel-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; padding: 0 4px; } .test-panel-close:hover { color: var(--text-secondary); } .test-results { padding: 8px 12px 4px; } .test-result-item { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border-secondary); font-size: 12px; } .test-result-item:last-child { border-bottom: none; } .test-status { width: 16px; flex-shrink: 0; text-align: center; } .test-model-name { font-weight: bold; color: var(--text-secondary); min-width: 140px; } .test-message { color: var(--error-color); font-size: 11px; flex: 1; } .test-note { padding: 5px 12px 8px; font-size: 11px; color: var(--text-muted); font-style: italic; border-top: 1px solid var(--border-secondary); } /* ── Model skills chips ───────────────────────────── */ .ps-skills { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; } .ps-skill { font-size: 10px; background: var(--skill-chip-bg); color: var(--skill-chip-text); padding: 1px 5px; border-radius: 3px; white-space: nowrap; } /* ── Validation stamps ────────────────────────────── */ .ps-model-validated { display: block; font-size: 10px; color: #10a37f; margin-top: 1px; } .ps-model-pending { display: block; font-size: 10px; color: #e07b00; margin-top: 1px; } /* ── Fallback chain section ───────────────────────── */ .fc-section { margin-bottom: 12px; border: 1px solid var(--border-secondary); border-radius: 6px; background: var(--surface-1); transition: background-color 0.3s ease, border-color 0.3s ease; } .fc-section > summary { padding: 9px 14px; cursor: pointer; font-size: 13px; font-weight: bold; color: var(--text-secondary); list-style: none; display: flex; align-items: center; gap: 8px; } .fc-section > summary:hover { color: var(--text-primary); } .fc-section > summary::marker, .fc-section > summary::-webkit-details-marker { display: none; } .fc-body { padding: 8px 14px 12px; } .fc-rules { font-size: 12px; color: var(--text-secondary); line-height: 1.8; } .fc-rules strong { color: var(--text-secondary); } /* ── Output Status Reference table (inside fc-section) ── */ .status-table { width: 100%; border-collapse: collapse; font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; } .status-table th { text-align: left; font-weight: bold; color: var(--text-secondary); border-bottom: 1px solid var(--border-secondary); padding: 4px 10px 4px 0; } .status-table td { padding: 4px 10px 4px 0; vertical-align: top; line-height: 1.6; } .status-table tr:not(:last-child) td { border-bottom: 1px solid var(--border-secondary); } .status-table code { font-family: monospace; font-size: 11px; background: var(--code-bg); color: var(--text-secondary); padding: 1px 4px; border-radius: 3px; } .status-table-note { font-size: 11px; color: var(--text-muted); margin-top: 6px; font-style: italic; } /* ── Provider section chain status + validation (in summary row) ─ */ .ps-chain-status { font-size: 10px; white-space: nowrap; flex-shrink: 0; } .ps-chain-status.in-chain { color: #10a37f; } .ps-chain-status.tier-filtered { color: var(--text-muted); } .ps-chain-status.no-key { color: var(--text-muted); } .ps-chain-validation { font-size: 10px; white-space: nowrap; flex-shrink: 0; color: var(--text-muted); } .ps-chain-validation.has-pass { color: #10a37f; } .ps-chain-validation.has-fail { color: var(--error-color); } /* ── Loop sub-row (child of Auto-Fallback send-opt-row) ── */ .loop-row { margin-top: 4px; margin-right: 0; padding-left: 20px; /* indent to signal sub-option */ opacity: 1; transition: opacity 0.15s; } .loop-row.disabled { opacity: 0.35; pointer-events: none; } .loop-max-input { flex: 0 0 52px; /* explicit flex-basis overrides browser intrinsic width */ width: 52px; min-width: 0; margin: 0 3px; padding: 1px 4px; font-size: 11px; border: 1px solid var(--input-border); border-radius: 3px; text-align: center; box-sizing: border-box; } /* Greyed-out state when the governing checkbox is unchecked */ .loop-max-input:disabled { opacity: 0.35; cursor: not-allowed; } /* ── Privacy mode ─────────────────────────────────── */ /* ── Send-option rows (Auto-Fallback + Privacy Mode) ─ */ /* Both settings use the same structure: right-aligned container, */ /* label + optional links on left, checkbox at far right, note below. */ .send-opt-row { display: flex; flex-direction: column; align-items: flex-end; margin-top: 6px; font-size: 12px; color: var(--text-muted); } .send-opt-main { display: flex; align-items: center; gap: 6px; width: 100%; justify-content: flex-end; } .send-opt-main input[type="checkbox"] { margin: 0; cursor: pointer; flex-shrink: 0; } .send-opt-main label { cursor: pointer; } .send-opt-note { font-size: 11px; color: var(--text-muted); margin-top: 2px; text-align: right; width: 100%; } /* ── API key label action links ───────────────────── */ /* On desktop the label text, ⓘ, and links sit inline. */ /* At mobile (≤600px) the action links wrap to their own row. */ .key-action-links { display: inline-flex; gap: 8px; margin-left: 6px; flex-wrap: wrap; align-items: baseline; } @media (max-width: 600px) { .form-group > label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px; } .key-action-links { flex-basis: 100%; margin-left: 0; margin-top: 3px; } } /* ── Drag/drop reordering ─────────────────────────── */ .drag-handle { cursor: grab; color: var(--drag-handle); font-size: 14px; padding: 0 4px; user-select: none; flex-shrink: 0; } .drag-handle:active { cursor: grabbing; } .reorder-btns { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; } .reorder-btn { background: none; border: none; cursor: pointer; color: var(--reorder-btn); font-size: 10px; padding: 0 2px; line-height: 1; } .reorder-btn:hover { color: var(--text-secondary); } .provider-section.drag-over > summary { outline: 2px dashed #10a37f; } .fc-item.drag-over { outline: 2px dashed #10a37f; border-radius: 3px; } .provider-section.dragging { opacity: 0.4; } .fc-item.dragging { opacity: 0.4; } .test-links-group { display: inline-flex; align-items: center; gap: 6px; } @media (max-width: 600px) { .test-links-group { flex-basis: 100%; } } .psl-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; } .psl-header h3 { margin: 0; } /* ── Provider sort control ─────────────────────────── */ .psl-sort { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); } .psl-sort-label { white-space: nowrap; } .psl-sort-select { font-size: 12px; padding: 2px 5px; border: 1px solid var(--input-border); border-radius: 3px; cursor: pointer; } .psl-sort-dir { font-size: 11px; padding: 2px 6px; border: 1px solid var(--input-border); border-radius: 3px; cursor: pointer; background: var(--surface-2); color: var(--text-secondary); line-height: 1; transition: background-color 0.3s ease, border-color 0.3s ease; } .psl-sort-dir:disabled { opacity: 0.35; cursor: not-allowed; } .btn-test-all { font-size: 13px; background: var(--copy-btn-bg); border: 1px solid var(--copy-btn-border); border-radius: 4px; padding: 5px 12px; cursor: pointer; color: var(--text-secondary); transition: background-color 0.3s ease; } .btn-test-all:hover { background: var(--surface-3); } /* ── Copy response button ─────────────────────────── */ .copy-btn { display: inline-block; margin-top: 6px; background: var(--copy-btn-bg); border: 1px solid var(--copy-btn-border); border-radius: 4px; padding: 4px 12px; font-size: 12px; cursor: pointer; color: var(--text-secondary); transition: background-color 0.3s ease; } .copy-btn:hover { background: var(--surface-3); } .copy-btn.copied { color: #10a37f; border-color: #10a37f; background: var(--active-section-bg); } /* ── Mobile responsive ────────────────────────────── */ @media (max-width: 600px) { body { padding: 10px; margin: 10px auto; } /* Parameter grid stacks vertically on mobile */ .parameter-grid { grid-template-columns: 1fr; } /* Provider body columns stack vertically */ .ps-models-section { grid-template-columns: 1fr; } .ps-data-section { grid-template-columns: 1fr; } /* Definitions grid stacks on mobile */ .defs-dl { grid-template-columns: 1fr; } .defs-dl dt { margin-top: 8px; } } @media (max-width: 520px) { /* Reduce loop-row indent at very narrow widths to recover usable width */ .loop-row { padding-left: 8px; } } /* ── Logo header ───────────────────────────────────── */ .logo-header { display: flex; justify-content: center; padding: 32px 20px 20px; } .v1-stage { display: flex; flex-direction: column; align-items: center; position: relative; } .v1-glow { position: absolute; width: 300px; height: 100px; background: radial-gradient(circle, rgba(255,0,128,0.3) 0%, rgba(0,240,255,0.3) 50%, transparent 100%); filter: blur(40px); animation: v1-pulse 4s ease-in-out infinite alternate; } .v1-text { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 3.2rem; letter-spacing: -2px; text-transform: uppercase; color: #fff; position: relative; z-index: 2; -webkit-text-stroke: 1px rgba(255,255,255,0.8); text-shadow: 0 0 10px #00f0ff, 0 0 20px #00f0ff, -4px -4px 0px #ff007f, 4px 4px 0px #00f0ff; animation: v1-glance 0.4s infinite alternate steps(2); } .v1-sub { font-family: 'Unbounded', sans-serif; font-size: 0.9rem; font-weight: 900; color: #000; background: #fff; padding: 4px 16px; letter-spacing: 6px; text-transform: uppercase; margin-top: 10px; z-index: 2; box-shadow: 0 0 20px #fff; clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%); } @keyframes v1-pulse { 0% { transform: scale(0.8) rotate(0deg); opacity: 0.5; } 100% { transform: scale(1.3) rotate(10deg); opacity: 1; } } @keyframes v1-glance { 0% { text-shadow: 0 0 10px #00f0ff, -3px -3px 0px #ff007f, 3px 3px 0px #00f0ff; } 100% { text-shadow: 0 0 12px #ff007f, -5px 2px 0px #ff007f, 5px -2px 0px #00f0ff; } } @keyframes v1-glance-light { 0% { text-shadow: 0 0 8px #00b8cc, -3px -3px 0px #cc0055, 3px 3px 0px #0055cc; } 100% { text-shadow: 0 0 10px #cc0055, -5px 2px 0px #cc0055, 5px -2px 0px #0055cc; } } @media (max-width: 600px) { .logo-header { padding: 20px 10px 16px; } .v1-text { font-size: 1.9rem; letter-spacing: -1px; } .v1-glow { width: 200px; } /* scale(1.3)→260px fits narrow viewports; proportional to smaller font */ } /* ── Logo — light mode overrides ──────────────────── */ /* White text + dark stroke outline + adjusted neon shadows for light backgrounds. */ /* The tagline pill is inverted (dark bg / white text) for contrast. */ [data-theme="light"] .v1-text { color: #ffffff; -webkit-text-stroke: 1.5px rgba(10, 10, 30, 0.4); text-shadow: 0 0 8px #00b8cc, 0 0 16px #00b8cc, -3px -3px 0px #cc0055, 3px 3px 0px #0055cc; animation-name: v1-glance-light; } [data-theme="light"] .v1-sub { background: #1a1a2e; color: #fff; box-shadow: 0 0 16px rgba(26, 26, 46, 0.25); } /* ── Theme toggle row ──────────────────────────────── */ /* Right-aligned row between logo and container */ .theme-toggle-row { display: flex; justify-content: flex-end; align-items: center; padding: 0 14px 12px 0; /* 14px right = --sz, compensates for lights overflow */ gap: 8px; } /* ── Theme toggle widget ───────────────────────────── */ /* Adapted from https://codepen.io/z5code/pen/ogLgmOZ */ /* --sz overridden to 14px for compact header placement. */ /* --on = amber (light mode active), --of = blue (dark). */ .toggle { --sz: 14px; --on: #f5c218; --of: #4a9eff; --lg: var(--of); position: relative; width: calc(var(--sz) * 4); height: calc(var(--sz) * 2); display: flex; align-items: center; justify-content: center; } .toggle input { display: none; } .toggle label[for="btn"] { position: absolute; width: calc(var(--sz) * 4); height: calc(var(--sz) * 2); background: linear-gradient(0deg, #12172080, #0d121780); border-radius: var(--sz); box-shadow: 0 0 calc(var(--sz) / 50) calc(var(--sz) / 50) #0006, 0 calc(var(--sz) / -20) calc(var(--sz) / 5) calc(var(--sz) / 25) #0b0b10, 0 calc(var(--sz) / 20) calc(var(--sz) / 10) calc(var(--sz) / 50) #f5f5f588, 0 calc(var(--sz) / -20) calc(var(--sz) / 50) calc(var(--sz) / 15) #00000060; cursor: pointer; } .toggle label[for="btn"]:before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: var(--sz); box-shadow: 0 0 calc(var(--sz) / 3) calc(var(--sz) / 10) #000 inset; background: repeating-linear-gradient(45deg, #111111 0 2px, transparent 3px 4px), repeating-linear-gradient(-45deg, #000000 0 2px, transparent 3px 4px); } .toggle .thumb { position: absolute; width: calc(var(--sz) * 2.5); height: calc(calc(var(--sz) * 2) - calc(var(--sz) / 8)); top: calc(calc(var(--sz) / 10) + calc(var(--sz) / -30)); left: calc(calc(var(--sz) / 10) + calc(var(--sz) / -30)); background: linear-gradient(0deg, #212121, #474747); border-radius: var(--sz); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1; overflow: hidden; box-shadow: calc(var(--sz) / -10) 0 calc(var(--sz) / 10) calc(var(--sz) / -10) var(--lg), calc(var(--sz) / 10) 0 calc(var(--sz) / 10) calc(var(--sz) / -10) var(--lg) inset, calc(var(--sz) / -50) calc(var(--sz) / 50) calc(var(--sz) / 30) 0 #fff2 inset, 0 0 calc(var(--sz) / 10) calc(var(--sz) / 50) #000c, 0 calc(var(--sz) / 4) calc(var(--sz) / 5) 0 #000d; transition: all 0.5s ease 0s; } #btn:checked + label .thumb { --lg: var(--on); left: calc(calc(100% - calc(calc(var(--sz) * 2) - calc(var(--sz) / 3))) - calc(calc(var(--sz) / 10) + calc(var(--sz) / 1.25))); box-shadow: calc(var(--sz) / 10) 0 calc(var(--sz) / 10) calc(var(--sz) / -10) var(--lg), calc(var(--sz) / -10) 0 calc(var(--sz) / 10) calc(var(--sz) / -10) var(--lg) inset, calc(var(--sz) / -50) calc(var(--sz) / 50) calc(var(--sz) / 30) 0 #fff2 inset, 0 0 calc(var(--sz) / 10) calc(var(--sz) / 50) #000c, 0 calc(var(--sz) / 4) calc(var(--sz) / 5) 0 #000d; } .toggle .thumb:before, .toggle .thumb:after { content: ""; position: absolute; width: 40%; height: 90%; background: linear-gradient(180deg, #00000012, #0004); border-radius: var(--sz) calc(var(--sz) / 5) calc(var(--sz) / 5) var(--sz); left: calc(var(--sz) / 10); box-shadow: calc(var(--sz) / -10) 0 calc(var(--sz) / 8) calc(var(--sz) / -10) var(--lg) inset, calc(var(--sz) / 10) 0 calc(var(--sz) / 5) 0 #0008 inset; filter: blur(1px); margin-top: calc(var(--sz) / 20); transition: all 0.5s ease 0s; } #btn:checked + label .thumb:before { --lg: #fff0; } .toggle .thumb:after { border-radius: calc(var(--sz) / 5) var(--sz) var(--sz) calc(var(--sz) / 5); left: calc(var(--sz) / 0.725); --lg: #fff0; box-shadow: calc(var(--sz) / 10) 0 calc(var(--sz) / 8) calc(var(--sz) / -10) var(--lg) inset, calc(var(--sz) / 10) 0 calc(var(--sz) / 5) 0 #0008 inset; } #btn:checked + label .thumb:after { --lg: var(--on); } .toggle .lights { position: absolute; width: calc(100% + calc(var(--sz) * 2)); height: calc(var(--sz) / 1.75); display: flex; justify-content: space-between; padding: 0; z-index: 0; } .toggle .lights span { background: #121212; position: relative; width: calc(var(--sz) / 1.75); height: calc(var(--sz) / 1.75); border-radius: var(--sz); box-shadow: 0 0 calc(var(--sz) / 50) calc(var(--sz) / 50) #0008, 0 calc(var(--sz) / -20) calc(var(--sz) / 10) calc(var(--sz) / 500) #000, 0 calc(var(--sz) / 20) calc(var(--sz) / 10) calc(var(--sz) / 500) #fff8, 0 0 calc(var(--sz) / 20) calc(var(--sz) / 25) #000; display: flex; align-items: center; justify-content: center; } .toggle .lights span:after { content: ""; color: #fff; width: calc(100% - calc(var(--sz) / 15)); height: calc(100% - calc(var(--sz) / 15)); position: absolute; background: radial-gradient(circle at 50% 32%, #fff5 0 calc(var(--sz) / 20), #000 calc(var(--sz) / 3) calc(var(--sz) / 3)); border-radius: var(--sz); top: calc(var(--sz) / 50); transition: all 0.5s ease 0s; } /* off-light: dark mode indicator (blue) — glows when unchecked */ .toggle .lights span.light-off:after { box-shadow: 0 0 calc(var(--sz) * 1.2) 0 var(--lg), 0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) var(--lg) inset, 0 calc(var(--sz) / -20) calc(var(--sz) / 10) calc(var(--sz) / 10) #000 inset; background: radial-gradient(circle at 50% 32%, #fff 0 calc(var(--sz) / 20), #fff8 calc(var(--sz) / 3) calc(var(--sz) / 3)); } #btn:checked + label + .lights span.light-off:after { box-shadow: 0 0 calc(var(--sz) / 3) 0 #4a9eff20, 0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) #4a9eff20 inset; background: radial-gradient(circle at 50% 32%, #fff5 0 calc(var(--sz) / 20), #000 calc(var(--sz) / 3) calc(var(--sz) / 3)); } /* on-light: light mode indicator (amber) — glows when checked */ .toggle .lights span.light-on:after { box-shadow: 0 0 calc(var(--sz) / 3) 0 #f5c21820, 0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) #f5c21820 inset; } #btn:checked + label + .lights span.light-on:after { --lg: var(--on); box-shadow: 0 0 calc(var(--sz) * 1.2) 0 var(--lg), 0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) var(--lg) inset, 0 calc(var(--sz) / -20) calc(var(--sz) / 10) calc(var(--sz) / 10) #000 inset; background: radial-gradient(circle at 50% 32%, #fff 0 calc(var(--sz) / 20), #fff8 calc(var(--sz) / 3) calc(var(--sz) / 3)); } #btn:checked + label + .lights span.light-on:before { --lg: var(--on); } #btn:checked + label + .lights span.light-off:before { --lg: #666; } /* ================================================================ ACCESS GATE — password overlay Blurs and locks the page until the correct password is entered. Removed from DOM entirely once access is granted. ================================================================ */ /* Dimmed page content beneath the overlay */ .access-locked { opacity: 0.15; pointer-events: none; user-select: none; transition: opacity 0.3s ease; } /* Full-viewport backdrop */ #access-gate { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.72); padding: 20px; box-sizing: border-box; } /* Modal card — styled to match .container */ .access-card { background: var(--container-bg); border: 1px solid var(--input-border); border-radius: 8px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6); padding: 32px 28px 28px; width: 100%; max-width: 420px; box-sizing: border-box; text-align: center; } /* Branding inside the card */ .access-card-brand { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 1.3rem; letter-spacing: -1px; color: #fff; text-transform: uppercase; text-shadow: 0 0 8px #00f0ff, 0 0 16px #00f0ff, -2px -2px 0px #ff007f, 2px 2px 0px #00f0ff; margin-bottom: 4px; } .access-card-sub { font-family: 'Unbounded', sans-serif; font-size: 0.55rem; font-weight: 900; color: #000; background: #fff; display: inline-block; padding: 2px 10px; letter-spacing: 5px; text-transform: uppercase; clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%); margin-bottom: 20px; } .access-card h3 { margin: 0 0 6px; font-size: 15px; font-weight: bold; color: var(--text-primary); } .access-card p { margin: 0 0 20px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; } /* Password input row — matches .api-key-wrapper pattern */ .access-input-row { display: flex; align-items: stretch; gap: 6px; margin-bottom: 10px; text-align: left; } .access-input-row input[type="password"] { flex: 1; min-width: 0; padding: 10px; border: 1px solid var(--input-border); border-radius: 4px; box-sizing: border-box; font-family: inherit; font-size: 14px; background: var(--input-bg); color: var(--text-primary); width: auto; /* override global width:100% — flex handles sizing */ } .access-input-row input[type="password"]:focus { outline: none; border-color: #10a37f; } /* Unlock button — matches .btn-generate */ .access-btn-unlock { flex-shrink: 0; background-color: #10a37f; color: #fff; border: none; padding: 10px 16px; font-size: 14px; font-weight: bold; border-radius: 4px; cursor: pointer; white-space: nowrap; font-family: inherit; } .access-btn-unlock:hover { background-color: #0b8c6d; } /* Inline error message */ .access-error { font-size: 12px; color: var(--error-color); min-height: 16px; margin-bottom: 16px; text-align: left; } /* Divider */ .access-divider { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--text-muted); font-size: 12px; } .access-divider::before, .access-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-secondary); } /* Request access link button */ .access-btn-request { display: inline-block; background-color: transparent; color: #10a37f; border: 1px solid #10a37f; border-radius: 4px; padding: 9px 20px; font-size: 13px; font-weight: bold; font-family: inherit; cursor: pointer; text-decoration: none; width: 100%; box-sizing: border-box; text-align: center; transition: background-color 0.2s ease, color 0.2s ease; } .access-btn-request:hover { background-color: #10a37f; color: #fff; } /* Light-mode adjustments */ [data-theme="light"] .access-card-brand { text-shadow: 0 0 6px #00b8cc, 0 0 12px #00b8cc, -2px -2px 0px #cc0055, 2px 2px 0px #0055cc; } [data-theme="light"] .access-card-sub { background: #1a1a2e; color: #fff; } [data-theme="light"] #access-gate { background: rgba(200, 200, 220, 0.75); }