/* tds-proxy admin design system * Light theme by default, dark opt-in — the boot script in pages.rs stamps * `` pre-paint; the :root tokens below are the * dark palette, the [data-theme="light"] block after them the light one. * Desktop-optimised, low-saturation neutrals with one restrained accent. * No utility framework, no build step — this file IS the framework. */ /* ---------- design tokens ---------- */ :root { /* Tell native widgets (date pickers, autofill, scrollbars, select dropdown contents) to render in dark-mode colors so their text isn't black-on-black. */ color-scheme: dark; /* surface ramp (low-saturation neutral, cool tilt) */ --bg-0: #0d0f13; --bg-1: #14171c; --bg-2: #1a1d23; --bg-3: #21252c; --bg-input: #0b0d11; --border-1: #262a32; --border-2: #323742; --border-3: #3d4351; --fg-1: #e8eaee; --fg-2: #b5bac4; --fg-3: #7e8694; --fg-mute: #5b6271; /* single hue: cyan-leaning blue (NOT purple) */ --accent: #6ba8ff; --accent-2: #93c4ff; --accent-soft: rgba(107, 168, 255, 0.12); --accent-edge: rgba(107, 168, 255, 0.3); --focus-ring: rgba(107, 168, 255, 0.4); --ok: #5fc69a; --ok-soft: rgba(95, 198, 154, 0.12); --warn: #e0a062; --warn-soft: rgba(224, 160, 98, 0.12); --err: #e87078; --err-soft: rgba(232, 112, 120, 0.12); /* text/glyph painted on top of --accent (primary buttons, checkboxes) */ --on-accent: #061224; /* zebra striping tint for .table--zebra even rows */ --zebra: rgba(255, 255, 255, 0.015); /* traffic-chart hues — consumed by the inline SVGs in pages.rs */ --chart-line: #5aa0ff; --chart-area: rgba(90, 160, 255, 0.15); --chart-max: #ffb84d; --ff-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; --ff-mono: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Code", 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-22: 22px; --fs-26: 26px; --fs-32: 32px; --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; --lh-tight: 1.25; --lh-body: 1.5; /* 4-px base spacing */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; /* restrained radii */ --r-1: 3px; --r-2: 5px; --r-3: 7px; --r-pill: 999px; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.03); --shadow-pop: 0 12px 28px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.4); --ease-out: cubic-bezier(.2, .7, .2, 1); --dur-1: 120ms; --dur-2: 200ms; --sidebar-w: 248px; } /* ---------- light theme ---------- Light is the DEFAULT theme (boot script in pages.rs stamps `` pre-paint; dark is the opt-in). The :root block above holds the dark palette — this block redefines every color/shadow token for light surfaces, then restyles the handful of components whose dark-theme hardcodes wash out on white. ------------------------------------------------------------ */ [data-theme="light"] { color-scheme: light; /* surface ramp — cool greys on white */ --bg-0: #f4f6f8; --bg-1: #ffffff; --bg-2: #f7f8fa; --bg-3: #eef0f3; --bg-input: #ffffff; --border-1: #e2e6ea; --border-2: #d0d5db; --border-3: #bcc3cc; --fg-1: #1b2430; --fg-2: #3d4654; --fg-3: #66707e; --fg-mute: #8a93a1; /* same blue hue, darkened for contrast on white surfaces */ --accent: #2f6fde; --accent-2: #5a8fe8; --accent-soft: rgba(47, 111, 222, 0.10); --accent-edge: rgba(47, 111, 222, 0.28); --focus-ring: rgba(47, 111, 222, 0.35); /* status hues darkened for light surfaces; softs re-alpha'd to match */ --ok: #1e9e6a; --ok-soft: rgba(30, 158, 106, 0.10); --warn: #b06f1e; --warn-soft: rgba(176, 111, 30, 0.10); --err: #c93a42; --err-soft: rgba(201, 58, 66, 0.10); --on-accent: #ffffff; --zebra: rgba(15, 23, 42, 0.03); --chart-line: #2f6fde; --chart-area: rgba(47, 111, 222, 0.12); --chart-max: #b06f1e; /* soft ambient shadows only — NO white inset highlight */ --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.08); --shadow-pop: 0 12px 28px rgba(16, 24, 40, 0.16), 0 2px 4px rgba(16, 24, 40, 0.08); } /* Category badges: the dark-theme light tints wash out on white, so darken each text hue and firm the background alpha to 0.12. Text hues follow each category's own base-rule hue (hosting is red, proxy is orange) so a badge never pairs text with a mismatched background. */ [data-theme="light"] .badge-cat-isp { background: rgba(40, 160, 80, 0.12); color: #1e7a44; } [data-theme="light"] .badge-cat-vpn { background: rgba(60, 120, 220, 0.12); color: #2b5ea7; } [data-theme="light"] .badge-cat-hosting { background: rgba(200, 80, 80, 0.12); color: #a83c3c; } [data-theme="light"] .badge-cat-proxy { background: rgba(220, 130, 60, 0.12); color: #8f5a1c; } [data-theme="light"] .badge-cat-tor { background: rgba(180, 90, 200, 0.12); color: #8d3fa8; } [data-theme="light"] .badge-cat-relay { background: rgba(160, 100, 200, 0.12); color: #6d4ea0; } [data-theme="light"] .badge-cat-business { background: rgba(120, 130, 160, 0.12); color: #3c4a5c; } [data-theme="light"] .badge-cat-education { background: rgba(140, 160, 90, 0.12); color: #5c6d18; } /* Toasts: light surface + status-hue text instead of the dark popover. */ [data-theme="light"] .tds-toast { background: var(--bg-1); border-color: var(--border-2); color: var(--fg-1); box-shadow: var(--shadow-pop); } [data-theme="light"] .tds-toast--ok { color: var(--ok); } [data-theme="light"] .tds-toast--err { color: var(--err); } /* .eventlog / #log-table are a DELIBERATE CONSTANT dark terminal surface in both themes (see the note at the .eventlog rule) — pin their text hues to the dark palette so the light fg/status tokens can't render dark-on-dark. */ [data-theme="light"] .eventlog__ts, [data-theme="light"] #log-table .log-row .ts { color: #5b6271; } [data-theme="light"] .eventlog__body, [data-theme="light"] #log-table .log-row .body { color: #e8eaee; } [data-theme="light"] .eventlog__row.kind-proxy .eventlog__kind, [data-theme="light"] #log-table .log-row.kind-proxy .kind { color: #93c4ff; } [data-theme="light"] .eventlog__row.kind-solve_start .eventlog__kind, [data-theme="light"] .eventlog__row.kind-solve_progress .eventlog__kind, [data-theme="light"] .eventlog__row.kind-cf_challenge_exhausted .eventlog__kind, [data-theme="light"] #log-table .log-row.kind-solve_start .kind, [data-theme="light"] #log-table .log-row.kind-solve_progress .kind, [data-theme="light"] #log-table .log-row.kind-cf_challenge_exhausted .kind { color: #e0a062; } [data-theme="light"] .eventlog__row.kind-solve_done .eventlog__kind, [data-theme="light"] .eventlog__row.kind-solve_verify_ok .eventlog__kind, [data-theme="light"] #log-table .log-row.kind-solve_done .kind, [data-theme="light"] #log-table .log-row.kind-solve_verify_ok .kind { color: #5fc69a; } [data-theme="light"] .eventlog__row.kind-solve_fail .eventlog__kind, [data-theme="light"] .eventlog__row.kind-solve_verify_fail .eventlog__kind, [data-theme="light"] #log-table .log-row.kind-solve_fail .kind, [data-theme="light"] #log-table .log-row.kind-solve_verify_fail .kind { color: #e87078; } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg-0); color: var(--fg-1); font-family: var(--ff-sans); font-size: var(--fs-14); line-height: var(--lh-body); font-feature-settings: "ss01", "cv11", "tnum"; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); letter-spacing: -0.01em; } h1 { font-size: var(--fs-22); font-weight: var(--fw-semi); } h2 { font-size: var(--fs-16); font-weight: var(--fw-semi); } h3 { font-size: var(--fs-14); font-weight: var(--fw-semi); } p { margin: 0; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; } /* Exempt button-classed links so :visited (higher specificity than .button--*) doesn't override the button color — would otherwise make "+ New stream" / "+ New rule" text the same color as the button background (invisible). */ a:visited:not(.button) { color: var(--accent); } code, pre, kbd, samp { font-family: var(--ff-mono); } hr { border: 0; border-top: 1px solid var(--border-1); margin: var(--s-6) 0; } ::selection { background: var(--accent-soft); color: var(--fg-1); } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-2); } /* ---------- app shell ---------- */ .app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } .app-shell--auth { display: grid; place-items: center; min-height: 100vh; padding: var(--s-6); } .sidebar { background: var(--bg-1); border-right: 1px solid var(--border-1); display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0; overflow-y: auto; } .sidebar__brand { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-5) var(--s-5) var(--s-4); border-bottom: 1px solid var(--border-1); } .sidebar__brand-mark { width: 22px; height: 22px; border-radius: var(--r-2); background: linear-gradient(135deg, var(--accent) 0%, #4a7fcc 100%); display: grid; place-items: center; font-family: var(--ff-mono); font-size: 10px; font-weight: var(--fw-bold); color: var(--on-accent); letter-spacing: -0.02em; flex-shrink: 0; } .sidebar__brand-text { font-size: var(--fs-14); font-weight: var(--fw-semi); color: var(--fg-1); letter-spacing: -0.02em; } .sidebar__brand-sub { font-size: var(--fs-11); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 1px; } .sidebar__nav { flex: 1; padding: var(--s-4) var(--s-3); display: flex; flex-direction: column; gap: var(--s-5); } .sidebar__group-label { font-size: var(--fs-11); font-weight: var(--fw-semi); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.08em; padding: 0 var(--s-3) var(--s-2); } .sidebar__group-context { font-family: var(--ff-mono); font-size: var(--fs-12); color: var(--fg-2); padding: 0 var(--s-3) var(--s-2); overflow-wrap: anywhere; } .sidebar__item { display: flex; align-items: center; gap: var(--s-2); padding: 6px var(--s-3); border-radius: var(--r-2); color: var(--fg-2); font-size: var(--fs-13); font-weight: var(--fw-med); text-decoration: none; border-left: 2px solid transparent; margin-left: -2px; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), opacity var(--dur-2) var(--ease-out); } .sidebar__item:hover { background: var(--bg-2); color: var(--fg-1); text-decoration: none; } .sidebar__item.is-active { background: var(--bg-2); color: var(--fg-1); border-left-color: var(--accent); } .sidebar__item .tag { margin-left: auto; } /* footer stacks vertically: controls row, version, sign-out — the horizontal padding lives on the children so .sidebar__controls can keep its own gutter per the rail spec */ .sidebar__footer { padding: var(--s-2) 0 var(--s-3); border-top: 1px solid var(--border-1); display: flex; flex-direction: column; gap: var(--s-2); } .sidebar__footer .small { padding: 0 var(--s-4); font-size: var(--fs-11); color: var(--fg-3); font-family: var(--ff-mono); } /* ---------- rail (collapsed sidebar) + footer controls ---------- `` collapses the sidebar to a 60px monogram rail; attribute toggled by the delegated handler in admin.js (persisted via localStorage). The .app-shell grid column follows --sidebar-w, so the width change needs no layout rule here. Grid tracks can't be interpolated — the column snaps instantly, by design; only hover and chip colors animate. ------------------------------------------------------------ */ /* 2-letter monogram inside every nav item — rail-only, hidden expanded */ .sidebar__chip { display: none; width: 22px; height: 22px; border-radius: var(--r-2); background: var(--bg-3); color: var(--fg-2); font-family: var(--ff-mono); font-size: 10px; font-weight: var(--fw-bold); place-items: center; flex-shrink: 0; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), opacity var(--dur-2) var(--ease-out); } .sidebar__item.is-active .sidebar__chip { background: var(--accent-soft); color: var(--accent); } /* controls row: rail toggle left, theme switch right */ .sidebar__controls { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-4); } #rail-toggle { width: 22px; height: 22px; padding: 0; display: inline-grid; place-items: center; background: transparent; border: 1px solid var(--border-2); border-radius: var(--r-2); color: var(--fg-3); font-size: var(--fs-12); line-height: 1; flex-shrink: 0; } #rail-toggle:hover { background: var(--bg-2); border-color: var(--border-3); color: var(--fg-1); } /* segmented Light/Dark pair */ .theme-switch { display: inline-flex; border: 1px solid var(--border-2); border-radius: var(--r-pill); overflow: hidden; flex-shrink: 0; } .theme-switch__btn { padding: 2px 8px; background: transparent; border: 0; border-radius: 0; color: var(--fg-3); font-size: var(--fs-11); line-height: 1.4; } .theme-switch__btn + .theme-switch__btn { border-left: 1px solid var(--border-2); } .theme-switch__btn:hover { background: var(--bg-2); color: var(--fg-1); } .theme-switch__btn.is-active { background: var(--bg-3); color: var(--fg-1); } .sidebar__signout { padding: 0 var(--s-4); } /* --- collapsed state --- */ [data-rail="1"] { --sidebar-w: 60px; } [data-rail="1"] .sidebar__brand-text, [data-rail="1"] .sidebar__brand-sub, [data-rail="1"] .sidebar__group-label, [data-rail="1"] .sidebar__group-context, [data-rail="1"] .sidebar__item-text, [data-rail="1"] .sidebar__version { display: none; } [data-rail="1"] .sidebar__brand { justify-content: center; padding: var(--s-4) 0; } [data-rail="1"] .sidebar__chip { display: grid; } [data-rail="1"] .sidebar__item { justify-content: center; padding: 6px 0; gap: 0; } [data-rail="1"] .sidebar__controls { flex-direction: column; align-items: center; justify-content: flex-start; padding: var(--s-2) 0; } /* theme switch stays reachable in the rail: a 2-row vertical mini stack */ [data-rail="1"] .theme-switch { flex-direction: column; border-radius: var(--r-2); } [data-rail="1"] .theme-switch__btn { padding: 2px 4px; } [data-rail="1"] .theme-switch__btn + .theme-switch__btn { border-left: 0; border-top: 1px solid var(--border-2); } /* sign-out shrinks to an "Out" glyph button (text hidden via font-size: 0) */ [data-rail="1"] .sidebar__signout { padding: 0 var(--s-2); } [data-rail="1"] .sidebar__signout .button { width: 100%; padding: 3px 0; gap: 0; font-size: 0; } [data-rail="1"] .sidebar__signout .button::before { content: "Out"; font-size: var(--fs-12); } /* ---------- main + page header ---------- */ .main { min-width: 0; display: flex; flex-direction: column; } .page-header { background: var(--bg-1); border-bottom: 1px solid var(--border-1); padding: var(--s-5) var(--s-8); } .page-header__breadcrumbs { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-12); color: var(--fg-3); margin-bottom: var(--s-2); } .page-header__breadcrumbs a { color: var(--fg-2); } .page-header__breadcrumbs a:hover { color: var(--fg-1); } .page-header__sep { color: var(--fg-mute); } .page-header__title-row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; } .page-header__title { flex: 1; min-width: 0; font-size: var(--fs-26); font-weight: var(--fw-semi); letter-spacing: -0.02em; overflow-wrap: anywhere; } .page-header__actions { display: flex; gap: var(--s-2); align-items: center; } .page-header__context { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); font-size: var(--fs-12); color: var(--fg-3); align-items: center; } .page-header__context .meta-item { display: inline-flex; align-items: center; gap: var(--s-2); } .page-header__context .meta-item strong { color: var(--fg-2); font-weight: var(--fw-med); } .page-body { padding: var(--s-6) var(--s-8) var(--s-10); display: flex; flex-direction: column; gap: var(--s-5); max-width: 1600px; width: 100%; } /* ---------- layout primitives ---------- */ .stack { display: flex; flex-direction: column; gap: var(--gap, var(--s-4)); } /* respect the HTML hidden attribute against class-set display */ [hidden] { display: none !important; } .cluster { display: flex; flex-wrap: wrap; gap: var(--gap, var(--s-2)); align-items: center; } .row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; } .row--end { justify-content: flex-end; } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); } .grid-auto-280 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); } .split-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s-5); } .split-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); } @media (max-width: 1280px) { .split-2-1, .split-1-1 { grid-template-columns: minmax(0, 1fr); } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- large-screen / high-res scale-up ---------- Every font size and spacing in this stylesheet flows through the --fs-* and --s-* px tokens, so enlarging the UI for big displays is a token redefinition, not a page-by-page audit. Two steps: ≥1700 px gives ~1.15× fonts+spacing and lifts the 1600 px content cap to 2200 px; ≥2300 px gives ~1.3× and lets the content use the full width. The rail widens with the same factor so its items don't wrap (a collapsed rail stays 60 px). Hardcoded px one-offs (chips, the 3 px button--sm padding) intentionally stay — they are detail accents, not layout scale. */ @media (min-width: 1700px) { :root { --fs-11: 13px; --fs-12: 14px; --fs-13: 15px; --fs-14: 16px; --fs-15: 17px; --fs-16: 18px; --fs-18: 20px; --fs-22: 25px; --fs-26: 30px; --fs-32: 36px; --s-1: 5px; --s-2: 9px; --s-3: 14px; --s-4: 18px; --s-5: 23px; --s-6: 28px; --s-8: 36px; --s-10: 46px; --s-12: 54px; } :root:not([data-rail="1"]) { --sidebar-w: 272px; } .page-body { max-width: 2200px; } } @media (min-width: 2300px) { :root { --fs-11: 14px; --fs-12: 16px; --fs-13: 17px; --fs-14: 18px; --fs-15: 20px; --fs-16: 21px; --fs-18: 23px; --fs-22: 28px; --fs-26: 33px; --fs-32: 40px; --s-1: 5px; --s-2: 10px; --s-3: 16px; --s-4: 21px; --s-5: 26px; --s-6: 31px; --s-8: 42px; --s-10: 52px; --s-12: 62px; } :root:not([data-rail="1"]) { --sidebar-w: 296px; } .page-body { max-width: none; } } .flex-1 { flex: 1; } .text-mute { color: var(--fg-3); } .text-fg2 { color: var(--fg-2); } /* ---------- card ---------- */ .card { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--r-3); overflow: hidden; } .card--bare { background: transparent; border: 1px solid var(--border-1); } .card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border-1); flex-wrap: wrap; } .card__title { margin: 0; font-size: var(--fs-14); font-weight: var(--fw-semi); color: var(--fg-1); letter-spacing: -0.005em; display: flex; align-items: center; gap: var(--s-2); } .card__sub { font-size: var(--fs-12); color: var(--fg-3); margin-top: var(--s-1); } .card__body { padding: var(--s-4) var(--s-5); } .card__body--flush { padding: 0; } .card__body--tight { padding: var(--s-3) var(--s-5); } .card__footer { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border-1); display: flex; gap: var(--s-2); align-items: center; background: var(--bg-1); } .card__hint { padding: var(--s-3) var(--s-5); font-size: var(--fs-12); color: var(--fg-3); border-bottom: 1px solid var(--border-1); background: var(--bg-1); } /* ---------- metric card ---------- */ .metric { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4) var(--s-5); } .metric__label { font-size: var(--fs-11); font-weight: var(--fw-semi); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.08em; } .metric__value { font-size: var(--fs-26); font-weight: var(--fw-semi); color: var(--fg-1); line-height: 1.1; letter-spacing: -0.02em; margin-top: var(--s-1); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .metric__delta { color: var(--fg-3); font-size: var(--fs-16); font-weight: var(--fw-reg); } .metric__sub { font-size: var(--fs-12); color: var(--fg-3); margin-top: var(--s-1); } .metric__sub strong { color: var(--fg-2); font-weight: var(--fw-med); } /* ---------- button ---------- */ .button, button { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 6px var(--s-3); background: var(--bg-3); color: var(--fg-1); border: 1px solid var(--border-2); border-radius: var(--r-2); font-family: var(--ff-sans); font-size: var(--fs-13); font-weight: var(--fw-med); line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); } .button:hover, button:hover { background: var(--border-2); border-color: var(--border-3); text-decoration: none; } .button:focus-visible, button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; } .button:disabled, button:disabled { opacity: 0.5; cursor: not-allowed; } .button--primary, button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: var(--fw-semi); } .button--primary:hover, button.primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); } .button--ghost, button.ghost { background: transparent; color: var(--fg-2); border-color: var(--border-2); } .button--ghost:hover, button.ghost:hover { background: var(--bg-3); color: var(--fg-1); border-color: var(--border-3); } .button--danger, button.warn { background: transparent; color: var(--err); border-color: color-mix(in srgb, var(--err) 35%, transparent); font-weight: var(--fw-med); } .button--danger:hover, button.warn:hover { background: var(--err-soft); border-color: var(--err); color: var(--err); } .button--sm { padding: 3px var(--s-2); font-size: var(--fs-12); } .button--lg { padding: var(--s-2) var(--s-4); font-size: var(--fs-14); } .button-group { display: inline-flex; gap: var(--s-2); } /* inline-form buttons (existing pattern: `
`) — make sure the form itself is grid-friendly */ form[style*="display:inline"] { display: inline-flex !important; align-items: center; gap: var(--s-1); } /* ---------- form controls ---------- */ input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea, select, .input { width: 100%; background-color: var(--bg-input); color: var(--fg-1); /* Force the foreground color through autofill / webkit / etc. so the entered value never matches the input background. */ -webkit-text-fill-color: var(--fg-1); caret-color: var(--accent); border: 1px solid var(--border-2); border-radius: var(--r-2); padding: 7px var(--s-3); font-family: var(--ff-mono); font-size: var(--fs-13); line-height: 1.4; transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out); } select { font-family: var(--ff-sans); padding-right: var(--s-6); } /* `