/* ======================================================================== HTTP-Basma Web App - Stylesheet Theme palette is driven entirely by CSS custom properties on . Switching a theme is just swapping the `data-theme` attribute. ======================================================================== */ /* ---------- Theme: Aurora (default light) ------------------------------- */ :root, :root[data-theme="aurora"] { --bg-0: #f4f6fb; --bg-1: #ffffff; --bg-2: #eef1f9; --bg-3: #e3e8f4; --fg-0: #131b2c; --fg-1: #364257; --fg-2: #6d7892; --accent: #5b6cff; --accent-2: #7d4bff; --accent-fg: #ffffff; --border: #d9def0; --success: #14a37f; --warn: #d18b00; --danger: #d8364c; --code-bg: #0f1424; --code-fg: #e6ecff; --code-key: #82c7ff; --code-str: #9dd49b; --code-num: #f2a96b; --code-bool: #d6a6ff; --code-null: #ff8ea1; --shadow: 0 12px 36px -18px rgba(28, 36, 80, 0.35); --grad: linear-gradient(135deg, #5b6cff 0%, #7d4bff 100%); } /* ---------- Theme: Midnight (dark) -------------------------------------- */ :root[data-theme="midnight"] { --bg-0: #0b1020; --bg-1: #131a30; --bg-2: #1a2240; --bg-3: #232d52; --fg-0: #f3f5ff; --fg-1: #cdd3eb; --fg-2: #8b94b8; --accent: #7ea6ff; --accent-2: #b78dff; --accent-fg: #0b1020; --border: #2a335a; --success: #4ad6a3; --warn: #ffc36b; --danger: #ff7a8a; --code-bg: #060912; --code-fg: #e3e9ff; --code-key: #82c7ff; --code-str: #9dd49b; --code-num: #ffb88a; --code-bool: #d6a6ff; --code-null: #ff8ea1; --shadow: 0 12px 36px -18px rgba(0, 0, 0, 0.7); --grad: linear-gradient(135deg, #7ea6ff 0%, #b78dff 100%); } /* ---------- Theme: Forest ----------------------------------------------- */ :root[data-theme="forest"] { --bg-0: #0e1b14; --bg-1: #14271b; --bg-2: #1b3325; --bg-3: #244231; --fg-0: #ebf3ec; --fg-1: #c5d6c8; --fg-2: #82997f; --accent: #7ed957; --accent-2: #2ecc71; --accent-fg: #0a1810; --border: #2c4c34; --success: #6cd49d; --warn: #ffd166; --danger: #ff7a7a; --code-bg: #051208; --code-fg: #d9f3dd; --code-key: #aef2c0; --code-str: #ffe27a; --code-num: #ffae73; --code-bool: #c5b7ff; --code-null: #ff9aa2; --shadow: 0 12px 36px -18px rgba(0, 0, 0, 0.7); --grad: linear-gradient(135deg, #7ed957 0%, #2ecc71 100%); } /* ---------- Theme: Sunset ----------------------------------------------- */ :root[data-theme="sunset"] { --bg-0: #1a0e1f; --bg-1: #261330; --bg-2: #321a3e; --bg-3: #422454; --fg-0: #ffeef2; --fg-1: #e6c9d4; --fg-2: #b890a3; --accent: #ff8a5c; --accent-2: #ff5e85; --accent-fg: #1a0e1f; --border: #4a2b5a; --success: #6cdcb0; --warn: #ffd166; --danger: #ff6b7a; --code-bg: #100610; --code-fg: #ffe7f0; --code-key: #ffb78a; --code-str: #ffd6d6; --code-num: #ffd97a; --code-bool: #d6a6ff; --code-null: #ff8ea1; --shadow: 0 12px 36px -18px rgba(0, 0, 0, 0.6); --grad: linear-gradient(135deg, #ff8a5c 0%, #ff5e85 100%); } /* ---------- Theme: Mono (high-contrast) --------------------------------- */ :root[data-theme="mono"] { --bg-0: #ffffff; --bg-1: #ffffff; --bg-2: #f2f2f2; --bg-3: #e6e6e6; --fg-0: #000000; --fg-1: #1a1a1a; --fg-2: #5a5a5a; --accent: #000000; --accent-2: #444444; --accent-fg: #ffffff; --border: #b8b8b8; --success: #2c8a4f; --warn: #a26a00; --danger: #b21f33; --code-bg: #f7f7f7; --code-fg: #111111; --code-key: #003c8f; --code-str: #006633; --code-num: #b15a00; --code-bool: #4b2aad; --code-null: #b21f33; --shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.2); --grad: linear-gradient(135deg, #1a1a1a 0%, #555555 100%); } /* ---------- Theme: Ocean (deep teal / cyan) ----------------------------- */ :root[data-theme="ocean"] { --bg-0: #06171d; --bg-1: #0c2128; --bg-2: #123039; --bg-3: #1b4350; --fg-0: #e7f7fb; --fg-1: #bcdde6; --fg-2: #79a3ae; --accent: #2dd4bf; --accent-2: #38bdf8; --accent-fg: #04161a; --border: #1c4350; --success: #34d399; --warn: #fbbf24; --danger: #fb7185; --code-bg: #03121a; --code-fg: #dbf5fb; --code-key: #7dd3fc; --code-str: #5eead4; --code-num: #fcd34d; --code-bool: #c4b5fd; --code-null: #fda4af; --shadow: 0 12px 36px -18px rgba(0, 0, 0, 0.7); --grad: linear-gradient(135deg, #2dd4bf 0%, #38bdf8 100%); } /* ---------- Theme: Nord (arctic blue-gray) ------------------------------ */ :root[data-theme="nord"] { --bg-0: #2e3440; --bg-1: #3b4252; --bg-2: #434c5e; --bg-3: #4c566a; --fg-0: #eceff4; --fg-1: #d8dee9; --fg-2: #a9b3c6; --accent: #88c0d0; --accent-2: #81a1c1; --accent-fg: #2e3440; --border: #434c5e; --success: #a3be8c; --warn: #ebcb8b; --danger: #bf616a; --code-bg: #272c36; --code-fg: #e5e9f0; --code-key: #88c0d0; --code-str: #a3be8c; --code-num: #d08770; --code-bool: #b48ead; --code-null: #bf616a; --shadow: 0 12px 36px -18px rgba(0, 0, 0, 0.6); --grad: linear-gradient(135deg, #88c0d0 0%, #81a1c1 100%); } /* ---------- Theme: Dracula (purple / pink) ------------------------------ */ :root[data-theme="dracula"] { --bg-0: #1e1f29; --bg-1: #282a36; --bg-2: #343746; --bg-3: #44475a; --fg-0: #f8f8f2; --fg-1: #d8d8d4; --fg-2: #9aa0c4; --accent: #bd93f9; --accent-2: #ff79c6; --accent-fg: #1e1f29; --border: #44475a; --success: #50fa7b; --warn: #f1fa8c; --danger: #ff5555; --code-bg: #191a21; --code-fg: #f8f8f2; --code-key: #8be9fd; --code-str: #f1fa8c; --code-num: #bd93f9; --code-bool: #ff79c6; --code-null: #ff5555; --shadow: 0 12px 36px -18px rgba(0, 0, 0, 0.7); --grad: linear-gradient(135deg, #bd93f9 0%, #ff79c6 100%); } /* ---------- Theme: Rose (warm light) ------------------------------------ */ :root[data-theme="rose"] { --bg-0: #fff5f7; --bg-1: #ffffff; --bg-2: #fdeef2; --bg-3: #f9dde4; --fg-0: #2a1620; --fg-1: #5c3744; --fg-2: #9c6b79; --accent: #e0517b; --accent-2: #ff7a59; --accent-fg: #ffffff; --border: #f3d2dc; --success: #1f9d6b; --warn: #c8820a; --danger: #d8364c; --code-bg: #2a1620; --code-fg: #ffe9ef; --code-key: #ff9ec4; --code-str: #b9e8a8; --code-num: #ffc08a; --code-bool: #d9b3ff; --code-null: #ff9aa9; --shadow: 0 12px 36px -18px rgba(140, 40, 70, 0.30); --grad: linear-gradient(135deg, #e0517b 0%, #ff7a59 100%); } /* ======================================================================== Reset & base ======================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: var(--bg-0); color: var(--fg-0); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; } ::selection { background: var(--accent); color: var(--accent-fg); } /* ======================================================================== Layout ======================================================================== */ .page-shell { display: flex; flex-direction: column; min-height: 100vh; } .app-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.0); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--border); } .app-header::before { content: ""; position: absolute; inset: 0; background: var(--bg-1); opacity: 0.85; z-index: -1; } .header-inner { display: flex; align-items: center; gap: 16px; padding: 14px 22px; max-width: 1280px; margin: 0 auto; width: 100%; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--fg-0); } .brand img { height: 36px; width: auto; } .brand .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .brand .brand-title { font-weight: 700; font-size: 17px; letter-spacing: 0.2px; } .brand .brand-sub { font-size: 11px; color: var(--fg-2); letter-spacing: 0.6px; text-transform: uppercase; } .header-spacer { flex: 1; } .header-actions { display: flex; align-items: center; gap: 8px; } .icon-btn { background: var(--bg-2); color: var(--fg-1); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s ease, transform 0.05s ease, border-color 0.15s ease; } .icon-btn:hover { background: var(--bg-3); border-color: var(--accent); } .icon-btn:active { transform: translateY(1px); } .icon-btn svg { width: 16px; height: 16px; } .theme-menu { position: relative; } .theme-list { position: absolute; right: 0; top: calc(100% + 6px); background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; padding: 6px; min-width: 170px; box-shadow: var(--shadow); display: none; z-index: 60; max-height: min(70vh, 460px); overflow-y: auto; } .theme-list.open { display: block; } .theme-list button { display: flex; width: 100%; align-items: center; gap: 10px; background: transparent; border: 0; color: var(--fg-1); padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; text-align: left; } .theme-list button:hover { background: var(--bg-2); } .swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.1); flex-shrink: 0; } /* Hero / page intro */ .hero { max-width: 1280px; width: 100%; margin: 22px auto 0; padding: 0 22px; } .hero h1 { margin: 0 0 4px; font-size: 28px; font-weight: 700; letter-spacing: -0.4px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p { color: var(--fg-2); margin: 0; max-width: 100%; font-size: 14px; } /* Main container */ .main { flex: 1; max-width: 1280px; width: 100%; margin: 0 auto; padding: 22px; display: grid; /* minmax(0, 1fr) prevents grid items from forcing the column wider than the viewport when they have intrinsically-wide content. */ grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; min-width: 0; } /* Tabs */ .tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px; padding: 6px; position: sticky; top: 70px; z-index: 10; } .tab-btn { background: transparent; border: 0; color: var(--fg-1); padding: 10px 14px; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; transition: background 0.15s, color 0.15s; white-space: nowrap; } .tab-btn:hover { background: var(--bg-2); } .tab-btn[aria-selected="true"] { background: var(--grad); color: var(--accent-fg); box-shadow: var(--shadow); } .tab-btn[disabled] { opacity: 0.4; cursor: not-allowed; } .tab-btn .tab-icon { width: 16px; height: 16px; } .panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; } .panel { display: none; } .panel.active { display: block; } /* Card */ .card { background: var(--bg-1); border: 1px solid var(--border); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); } .card h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; } /* Collapsible admin cards - the

is the toggle, .card-body holds the rest and hides when collapsed. We use display:none (not an overflow-clipped height animation) so dropdowns/tooltips inside a card can still escape its bounds when expanded. */ .card.is-collapsible > h2 { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 12px; margin-bottom: 0; } .card.is-collapsible > h2:hover { color: var(--accent); } .card.is-collapsible > h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; } .card.is-collapsible > h2 .card-caret { margin-left: auto; width: 9px; height: 9px; flex-shrink: 0; border-right: 2px solid var(--fg-2); border-bottom: 2px solid var(--fg-2); transform: rotate(45deg); /* chevron points down = expanded */ transition: transform 0.18s ease, border-color 0.15s ease; margin-top: -3px; /* optical centering of the chevron */ } .card.is-collapsible.collapsed > h2 .card-caret { transform: rotate(-45deg); /* chevron points right = collapsed */ margin-top: 0; } .card.is-collapsible > h2:hover .card-caret { border-color: var(--accent); } .card.is-collapsible > .card-body { margin-top: 6px; } .card.is-collapsible.collapsed > .card-body { display: none; } .card .card-desc { color: var(--fg-2); margin: 0 0 18px; font-size: 13px; } /* Form grid */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } /* Form stack - vertical groups of fields (each group a .form-grid) */ .form-stack { display: flex; flex-direction: column; gap: 14px; } /* Row 1: Port | SSL | Include URL Path | Follow Redirects | Detail All 5 cells are now uniform: outer label above, same-height bg-2 box below - whether the control is an input, a toggle, or a select. */ .form-row-connect { grid-template-columns: minmax(110px, 1fr) minmax(150px, 1fr) minmax(180px, 1.2fr) minmax(180px, 1.2fr) minmax(130px, 1fr); } /* Pill toggle with state text - quiet, single-color, off-by-default. Same border/bg/height as an input so the connect row looks uniform. State text on the left fills the empty space; the pill sits on the right, similar to an iOS settings row. */ .toggle-wrap { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; box-sizing: border-box; cursor: pointer; user-select: none; transition: border-color 0.15s, background 0.15s; position: relative; } .toggle-wrap:hover { border-color: var(--accent); } .toggle-wrap > input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .toggle-wrap .toggle-state { font-size: 13px; font-weight: 500; color: var(--fg-2); letter-spacing: 0.2px; } .toggle-wrap .toggle-state::before { content: "Off"; } .toggle-wrap:has(input:checked) .toggle-state { color: var(--success); font-weight: 600; } .toggle-wrap:has(input:checked) .toggle-state::before { content: "On"; } .toggle-wrap .toggle-pill { position: relative; width: 36px; height: 20px; background: var(--bg-3); border-radius: 999px; flex-shrink: 0; transition: background 0.2s; } .toggle-wrap .toggle-pill::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--bg-1); border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); transition: left 0.2s ease, background 0.2s ease; } .toggle-wrap:has(input:checked) .toggle-pill { background: var(--success); } .toggle-wrap:has(input:checked) .toggle-pill::after { left: 18px; background: #ffffff; } .toggle-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.18); } /* Advanced timing / Proxy - visually distinct collapsible group. NOTE: no `overflow: hidden` here - tooltip popovers above the section and the custom-select dropdown below the Type field need to be able to escape the section's bounds. The inner colored strip gets its own bottom-corner rounding instead. */ .form-section { background: var(--bg-2); border: 1px dashed var(--border); border-radius: 10px; } .form-section > .form-section-head { cursor: pointer; list-style: none; user-select: none; padding: 12px 16px; display: flex; align-items: center; gap: 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; color: var(--fg-1); } .form-section > .form-section-head::-webkit-details-marker { display: none; } .form-section > .form-section-head::before { content: "▸"; font-size: 10px; color: var(--accent); transition: transform 0.15s; } .form-section[open] > .form-section-head::before { transform: rotate(90deg); } .form-section > .form-section-head:hover { color: var(--accent); } .form-section .adv-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--fg-2); font-size: 11.5px; margin-left: auto; } /* Row 2: Sleep | Connect Timeout | Read Timeout And the Proxy form-section uses the same grid so the two collapsible panels look visually identical - 3 evenly-sized columns, lighter bg-1 strip, top border separating it from the section header. */ .form-row-timeouts, .form-row-proxy { grid-template-columns: repeat(3, minmax(160px, 1fr)); padding: 14px 16px; background: var(--bg-1); border-top: 1px solid var(--border); /* Match the parent .form-section's 10px radius, minus the 1px dashed border, so the inner bg-1 strip rounds cleanly at the bottom. */ border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; } .form-section .field input, .form-section .field select { background: var(--bg-2); } @media (max-width: 900px) { .form-row-connect, .form-row-timeouts, .form-row-proxy { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } } @media (max-width: 600px) { .form-section .adv-hint { display: none; } } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 12px; font-weight: 600; color: var(--fg-1); display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.3px; text-transform: uppercase; } /* Small muted helper text under an input (e.g. allowed range). Keeping it on one line means side-by-side fields stay the same height and their inputs line up. */ .field-hint { font-size: 11px; color: var(--fg-2); letter-spacing: 0.2px; white-space: nowrap; } .field input[type="text"], .field input[type="email"], .field input[type="number"], .field input[type="password"], .field select, .field textarea { background: var(--bg-2); color: var(--fg-0); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 14px; font-family: inherit; width: 100%; outline: none; transition: border-color 0.15s, background 0.15s; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); background: var(--bg-1); } .field textarea { font-family: 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace; font-size: 13px; resize: vertical; min-height: 140px; line-height: 1.5; } /* Custom dropdown - replaces native stays in the DOM (visually hidden) so form submission and `.value`/`change` event semantics keep working unchanged. */ .custom-select { position: relative; width: 100%; } .custom-select .native-select { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; pointer-events: none; } .custom-select-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg-2); color: var(--fg-0); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-family: inherit; font-size: 14px; text-align: left; cursor: pointer; user-select: none; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; } .custom-select-trigger:hover { border-color: var(--accent); } .custom-select.is-open .custom-select-trigger, .custom-select-trigger:focus-visible { outline: none; border-color: var(--accent); background: var(--bg-1); box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.14); } .custom-select-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .custom-select-arrow { width: 14px; height: 14px; flex-shrink: 0; color: var(--fg-2); transition: transform 0.18s ease, color 0.15s; } .custom-select.is-open .custom-select-arrow { transform: rotate(180deg); color: var(--accent); } .custom-select-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px; padding: 5px; margin: 0; list-style: none; z-index: 100; box-shadow: var(--shadow); max-height: 280px; overflow-y: auto; display: none; /* gentle fade-in */ opacity: 0; transform: translateY(-4px); transition: opacity 0.12s ease, transform 0.12s ease; } .custom-select.is-open .custom-select-menu { display: block; opacity: 1; transform: translateY(0); } .custom-select-option { padding: 9px 12px; border-radius: 7px; cursor: pointer; font-size: 14px; color: var(--fg-1); display: flex; align-items: center; gap: 10px; list-style: none; transition: background 0.1s, color 0.1s; outline: none; } .custom-select-option + .custom-select-option { margin-top: 2px; } .custom-select-option:hover, .custom-select-option.is-focused { background: var(--bg-2); color: var(--fg-0); } .custom-select-option[aria-selected="true"] { color: var(--accent); font-weight: 600; } .custom-select-option[aria-selected="true"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: auto; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.2); } .custom-select-option[aria-selected="true"].is-focused { background: var(--bg-2); } /* Line-numbered code-style textarea - used for verbosus fingerprint lists on the pacto / demangle / compare tabs. The gutter is absolutely-positioned on the left edge so the textarea owns its own height (and resize handle), and we sync gutter scroll in JS. */ .line-textarea { position: relative; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; } .line-textarea:focus-within { border-color: var(--accent); background: var(--bg-1); box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.14); } .line-textarea .line-numbers { position: absolute; top: 0; left: 0; bottom: 0; width: 48px; padding: 12px 10px 12px 8px; background: var(--bg-3); color: var(--fg-2); border-right: 1px solid var(--border); font-family: 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; text-align: right; user-select: none; pointer-events: none; white-space: pre; overflow: hidden; box-sizing: border-box; font-variant-numeric: tabular-nums; z-index: 1; } .line-textarea:focus-within .line-numbers { background: var(--bg-2); color: var(--accent); } .line-textarea textarea { display: block; width: 100%; min-height: 180px; max-height: 60vh; /* leaves 48px gutter + 12px gap before text starts */ padding: 12px 14px 12px 60px; background: transparent; border: 0; outline: none; resize: vertical; font-family: 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; color: var(--fg-0); box-sizing: border-box; letter-spacing: 0.2px; caret-color: var(--accent); tab-size: 4; } .line-textarea textarea::placeholder { color: var(--fg-2); opacity: 0.55; } .line-textarea textarea::selection { background: rgba(91, 108, 255, 0.25); color: inherit; } /* Toggle */ .toggle { --w: 44px; --h: 24px; position: relative; display: inline-block; width: var(--w); height: var(--h); flex-shrink: 0; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle .track { position: absolute; inset: 0; background: var(--bg-3); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: background 0.2s; } .toggle .track::after { content: ""; position: absolute; left: 2px; top: 1px; width: calc(var(--h) - 4px); height: calc(var(--h) - 4px); background: var(--bg-1); border-radius: 50%; transition: left 0.2s, background 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.15); } .toggle input:checked + .track { background: var(--grad); } .toggle input:checked + .track::after { left: calc(var(--w) - var(--h) + 1px); background: #fff; } .toggle-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; } .toggle-field .toggle-text { display: flex; flex-direction: column; gap: 2px; flex: 1; } .toggle-field label { text-transform: none; letter-spacing: 0; font-size: 13px; } .toggle-field .toggle-hint { font-size: 12px; color: var(--fg-2); line-height: 1.35; } /* Tooltip */ .tip { display: inline-flex; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-3); color: var(--fg-2); align-items: center; justify-content: center; font-size: 11px; font-weight: 700; cursor: help; position: relative; border: 1px solid var(--border); /* The chip lives inside form