/* ============================================================================ Relay Control — web UI stylesheet (flattened, single-file build) Drop-in replacement for python/src/web/static/app.css. Brand-neutral: the product name comes from the `brand` template global (web/templating.py); no name or fixed brand color is baked in. Dark-first. THEMEABLE: the skeleton is fixed; a theme only overrides color tokens, selected via data-theme on (default = Cyber, in :root). --discord is a fixed integration color, never themed. Themes: Generated from the Relay Control Design System (tokens/ + styles.css). NOTE: fonts are self-hosted from /static/fonts/ via the @font-face rules below. Drop the .woff2 binaries in python/src/web/static/fonts/ (see the README there); the family names must stay "Inter" and "JetBrains Mono". ============================================================================ */ /* --------------------------------------------------------------------------- FONTS --------------------------------------------------------------------------- */ /* Fonts — Inter (sans) + JetBrains Mono (mono), self-hosted from /static/fonts/. url() is relative to this file (/static/app.css), so it resolves to /static/fonts/.woff2. font-display:swap keeps text visible while the .woff2 loads. Family names must stay "Inter" and "JetBrains Mono" (--font-sans / --font-mono reference them by name). */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-400.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-500.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-600.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-700.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/inter-800.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-400.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-500.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/jetbrains-mono-600.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/jetbrains-mono-700.woff2") format("woff2"); } /* --------------------------------------------------------------------------- COLORS — base palette + semantic aliases (Cyber default) --------------------------------------------------------------------------- */ /* Colors — base palette + semantic aliases. Dark-first. The DEFAULT theme baked into :root is "Cyber" (cyan signal), the palette the shipping web UI uses. Alternate dark themes (Naval, Milsim) live in themes.css and override only these variables — never restructure the skeleton. Every component references these tokens; no component hardcodes a hex value. The one fixed exception is --discord (Discord blurple), a first- class integration color that must survive theme swaps. */ :root { /* --- Surfaces (near-black tactical stack, darkest -> raised) --- */ --bg: #070a10; /* app background */ --bg-2: #0b111b; /* card gradient bottom, sunken wells */ --panel: #0f1724; /* card / chip surface */ --panel-2: #131d2c; /* raised panel: rollup, menus */ /* --- Hairlines --- */ --border: #1d2a3d; /* default 1px border */ --border-hi: #2b3d57; /* hover / focus border */ /* --- Text --- */ --text: #c9d6e6; /* body */ --heading: #eaf1fa; /* headings, emphasis */ --muted: #647893; /* labels, meta, disabled */ /* --- Accent (signal color — themeable) --- */ --accent: #22d3ee; /* cyan signal */ --accent-dim: #0e7490; /* deep accent: fallback avatars, wells */ --accent-ink: #04121a; /* text/icon ON a solid accent fill */ /* --- Status (semantic) --- */ --live: #34d399; /* connected / healthy / online */ --live-ink: #04120c; /* text on a solid --live fill */ --warn: #f59e0b; /* pending / attention / packet risk */ --danger: #f87171; /* disconnected / error / packet loss */ /* --- Fixed integration color (NOT themed) --- */ --discord: #5865f2; /* Discord blurple — survives every theme swap */ --discord-ink: #ffffff; /* --- Ambient glow (drives the two corner radials on ) --- */ --glow-1: rgba(34, 211, 238, 0.08); /* top-right, accent-tinted */ --glow-2: rgba(88, 101, 242, 0.08); /* bottom-left, discord-tinted */ /* --- Translucent status fills (badges, tags) --- */ --live-fill: rgba(52, 211, 153, 0.08); --live-line: rgba(52, 211, 153, 0.4); --warn-fill: rgba(245, 158, 11, 0.08); --warn-line: rgba(245, 158, 11, 0.4); --danger-fill: rgba(248, 113, 113, 0.1); --danger-line: rgba(248, 113, 113, 0.4); --accent-fill: rgba(34, 211, 238, 0.07); --accent-line: rgba(34, 211, 238, 0.35); --dead-fill: rgba(100, 120, 147, 0.06); } /* --------------------------------------------------------------------------- THEMES — dark variants via [data-theme] --------------------------------------------------------------------------- */ /* Themes — dark-first variants selected via [data-theme] on the root element. THE SKELETON IS FIXED. A theme is ONLY an override of the color tokens from colors.css (plus optional glow tints). Layout, class names, spacing, radii, and component structure never change between themes. Usage: ... Default (no attribute, or data-theme="cyber") = the cyan Cyber palette in :root. --discord is intentionally never overridden. */ /* ── Cyber (explicit alias of the default) ─────────────────────────────── */ [data-theme="cyber"] { --accent: #22d3ee; --accent-dim: #0e7490; --accent-ink: #04121a; --glow-1: rgba(34, 211, 238, 0.08); --glow-2: rgba(88, 101, 242, 0.08); --accent-fill: rgba(34, 211, 238, 0.07); --accent-line: rgba(34, 211, 238, 0.35); } /* ── Naval — steel blue / signal-flag ──────────────────────────────────── */ /* Cooler near-black, steel-blue signal, signal-flag yellow for attention. */ [data-theme="naval"] { --bg: #060a12; --bg-2: #0a1120; --panel: #0e1626; --panel-2: #121d31; --border: #1c2b45; --border-hi: #2b3f63; --text: #c4d3e8; --heading: #e8f0fb; --muted: #5f7395; --accent: #5b9bd5; /* steel blue */ --accent-dim: #2e5f8a; --accent-ink: #05101c; --live: #4fd1a8; /* signal-flag green */ --warn: #f4c430; /* signal-flag yellow */ --danger: #e2564b; /* signal-flag red */ --glow-1: rgba(91, 155, 213, 0.09); --glow-2: rgba(88, 101, 242, 0.07); --accent-fill: rgba(91, 155, 213, 0.08); --accent-line: rgba(91, 155, 213, 0.38); --live-fill: rgba(79, 209, 168, 0.08); --live-line: rgba(79, 209, 168, 0.4); --warn-fill: rgba(244, 196, 48, 0.09); --warn-line: rgba(244, 196, 48, 0.42); --danger-fill: rgba(226, 86, 75, 0.1); --danger-line: rgba(226, 86, 75, 0.42); } /* ── Milsim — olive / tan / amber (ATC "Tower Amber") ──────────────────── */ /* Warm olive-black, amber signal, tan text. The strategy deck's Tower Amber. */ [data-theme="milsim"] { --bg: #0b0d08; --bg-2: #12140c; --panel: #171a10; --panel-2: #1e2116; --border: #2c3020; --border-hi: #40462e; --text: #d6ceb3; --heading: #f0ead2; --muted: #7c775c; --accent: #ffb020; /* tower amber */ --accent-dim: #a9711a; --accent-ink: #16130a; --live: #9bbf4a; /* olive-green healthy */ --warn: #e8a13a; /* amber attention */ --danger: #d8562f; /* burnt-orange alarm */ --glow-1: rgba(255, 176, 32, 0.08); --glow-2: rgba(155, 191, 74, 0.06); --accent-fill: rgba(255, 176, 32, 0.08); --accent-line: rgba(255, 176, 32, 0.38); --live-fill: rgba(155, 191, 74, 0.09); --live-line: rgba(155, 191, 74, 0.42); --warn-fill: rgba(232, 161, 58, 0.1); --warn-line: rgba(232, 161, 58, 0.42); --danger-fill: rgba(216, 86, 47, 0.1); --danger-line: rgba(216, 86, 47, 0.42); --dead-fill: rgba(124, 119, 92, 0.06); } /* --------------------------------------------------------------------------- TYPOGRAPHY --------------------------------------------------------------------------- */ /* Typography — the two-family system. Mono does the brand work: callsigns, IDs, latency/stat readouts, eyebrows, badges, buttons, any technical label. Sans carries prose + headings. Wide letter-spacing on mono labels is the tactical-HUD signature. */ :root { /* --- Families --- */ --font-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* --- Base body --- */ --text-size: 15px; --text-leading: 1.55; /* --- Type scale (px, matches the shipping UI) --- */ --fs-hero: 40px; /* login logotype */ --fs-h1: 30px; /* page title */ --fs-h2: 17px; /* card / section title */ --fs-stat: 34px; /* rollup number */ --fs-body: 15px; --fs-sm: 13px; /* secondary UI text */ --fs-label: 12px; /* eyebrows */ --fs-mono-label: 11px; /* badge / tag / meta label */ --fs-xs: 9.5px; /* micro tag */ /* --- Weights --- */ --fw-body: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-heavy: 800; /* @kind font */ /* login logotype */ /* --- Letter-spacing (the HUD tell) --- */ --ls-brand: 3px; /* BRAND-NAME in header */ --ls-eyebrow: 2px; /* // SECTION LABELS */ --ls-label: 1px; /* meta labels */ --ls-tight: 0.5px; /* buttons, badges */ } /* --------------------------------------------------------------------------- SPACING --------------------------------------------------------------------------- */ /* Spacing — the layout rhythm. The shipping UI is built on a loose 4px base with a handful of workhorse steps. These are the exact paddings/gaps the source uses, named. */ :root { --sp-1: 4px; --sp-2: 8px; --sp-3: 10px; --sp-4: 13px; /* bot-row vertical padding */ --sp-5: 16px; /* card grid gap, button x-padding */ --sp-6: 22px; /* card padding, rollup padding */ --sp-7: 28px; /* header x-padding, shell x-padding */ --sp-8: 40px; /* shell top padding, login-card padding */ /* --- Layout --- */ --shell-max: 920px; /* centered content column */ --login-max: 440px; /* auth card */ --grid-min: 300px; /* server-card min column */ } /* --------------------------------------------------------------------------- EFFECTS — radii, borders, glows, motion --------------------------------------------------------------------------- */ /* Effects — radii, borders, shadows, motion. The tactical look: crisp 1px hairlines, moderate radii, and GLOW rather than drop-shadow. Accent/live glows are the only "shadows" on interactive parts; real drop-shadows appear only on floating menus. */ :root { /* --- Radii --- */ --r-sm: 6px; /* badge, tag inner */ --r-btn: 8px; /* button */ --r-md: 10px; /* bot-row, banner, menu */ --r-lg: 12px; /* card, rollup, server-icon */ --r-pill: 999px; /* user chip */ --r-full: 50%; /* led, avatar */ /* --- Border --- */ --bw: 1px; --bw-accent: 2px; /* corner-bracket framing */ /* --- Glows (interactive signal) --- */ --glow-accent: 0 0 22px rgba(34, 211, 238, 0.35); --glow-accent-brand: 0 0 14px var(--accent); /* header brand-mark */ --glow-live: 0 0 10px var(--live), 0 0 2px var(--live); /* LED on */ --glow-warn: 0 0 10px rgba(245, 158, 11, 0.6); /* LED pending */ /* --- Real drop shadow (floating menus only) --- */ --shadow-menu: 0 20px 50px rgba(0, 0, 0, 0.5); /* --- Scanline overlay opacity --- */ --scanline: rgba(255, 255, 255, 0.015); /* --- Motion --- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --dur-fast: 0.05s; /* @kind other */ --dur: 0.15s; /* @kind other */ --pulse: 1.8s ease-in-out infinite; /* @kind other */ } /* --------------------------------------------------------------------------- BASE — resets, backdrop, header/shell, utilities --------------------------------------------------------------------------- */ /* Base — element resets, the app background, scanline overlay, and the text utilities the HUD leans on. Everything here is theme-driven via tokens. */ * { box-sizing: border-box; } [x-cloak] { display: none !important; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; background: radial-gradient(1200px 600px at 80% -10%, var(--glow-1), transparent 60%), radial-gradient(900px 500px at -10% 110%, var(--glow-2), transparent 60%), var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--text-size); line-height: var(--text-leading); -webkit-font-smoothing: antialiased; } /* Scanline overlay — fixed, non-interactive, sits above the bg below content. Add as the first body child. */ .scanlines { position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, var(--scanline) 0 1px, transparent 1px 3px ); z-index: 1; } /* --- Text utilities --- */ .mono { font-family: var(--font-mono); } .mono-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; } .muted { color: var(--muted); } .accent { color: var(--accent); } .warn { color: var(--warn); } .ok { color: var(--live); } .pending { color: var(--warn); } /* --- App shell + header layout --- */ .hud-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5) var(--sp-7); border-bottom: var(--bw) solid var(--border); background: linear-gradient( 180deg, rgba(15, 23, 36, 0.9), rgba(7, 10, 16, 0.6) ); backdrop-filter: blur(6px); } .shell { position: relative; z-index: 2; max-width: var(--shell-max); margin: 0 auto; padding: var(--sp-8) var(--sp-7) 80px; } .page-head { margin-bottom: 26px; } .page-head-id { display: flex; align-items: center; gap: 14px; } .page-head h1 { color: var(--heading); font-size: var(--fs-h1); margin: 4px 0 6px; letter-spacing: 0.3px; } .page-sub { color: var(--muted); margin: 0; } .back { color: var(--muted); text-decoration: none; font-size: var(--fs-sm); font-family: var(--font-mono); } .back:hover { color: var(--accent); } /* --- Brand logotype (header) --- */ .brand { display: flex; align-items: baseline; gap: var(--sp-3); text-decoration: none; } .brand-mark { color: var(--accent); font-size: 20px; text-shadow: var(--glow-accent-brand); } .brand-name { color: var(--heading); font-family: var(--font-mono); font-weight: var(--fw-bold); letter-spacing: var(--ls-brand); } .brand-tag { color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-mono-label); letter-spacing: var(--ls-eyebrow); } /* --- User chip + menu (header) --- */ .nav-user { position: relative; } .user-chip { display: flex; align-items: center; gap: 9px; background: var(--panel); border: var(--bw) solid var(--border); color: var(--text); padding: 6px 12px 6px 6px; border-radius: var(--r-pill); cursor: pointer; } .user-chip:hover { border-color: var(--border-hi); } .avatar { width: 24px; height: 24px; border-radius: var(--r-full); object-fit: cover; } .avatar-fallback { display: grid; place-items: center; background: var(--accent-dim); color: var(--accent-ink); font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-label); } .user-name { font-size: var(--fs-sm); } .user-menu { position: absolute; right: 0; top: 44px; min-width: 160px; background: var(--panel-2); border: var(--bw) solid var(--border-hi); border-radius: var(--r-md); padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 5; box-shadow: var(--shadow-menu); } .user-menu a, .user-menu button { text-align: left; background: none; border: 0; color: var(--text); font: inherit; padding: 9px 12px; border-radius: 7px; cursor: pointer; text-decoration: none; } .user-menu a:hover, .user-menu button:hover { background: var(--panel); color: var(--heading); } /* --------------------------------------------------------------------------- COMPONENTS — semantic class layer --------------------------------------------------------------------------- */ /* Components — the semantic class layer. In the target stack (Jinja2 + hand-CSS) these class names ARE the component API; the React primitives in components/ emit exactly these classes. Every value is theme-driven via tokens. */ /* ── Eyebrow ───────────────────────────────────────────────────────────── Mono, accent, wide-tracked "// SECTION" label. */ .eyebrow { color: var(--accent); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-eyebrow); margin: 0; } /* ── Card + corner-bracket framing ─────────────────────────────────────── Gradient panel with a hairline; drop two inside for the tactical bracket frame. */ .card { position: relative; background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: var(--bw) solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); } .corner { position: absolute; width: 14px; height: 14px; border-color: var(--accent); pointer-events: none; } .corner.tl { top: 8px; left: 8px; border-top: var(--bw-accent) solid; border-left: var(--bw-accent) solid; } .corner.tr { top: 8px; right: 8px; border-top: var(--bw-accent) solid; border-right: var(--bw-accent) solid; } .corner.bl { bottom: 8px; left: 8px; border-bottom: var(--bw-accent) solid; border-left: var(--bw-accent) solid; } .corner.br { bottom: 8px; right: 8px; border-bottom: var(--bw-accent) solid; border-right: var(--bw-accent) solid; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--grid-min), 1fr)); gap: var(--sp-5); } /* ── Buttons ───────────────────────────────────────────────────────────── Mono, bold, tracked. Solid accent by default; glow on hover; press dips. */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--accent); color: var(--accent-ink); border: var(--bw) solid var(--accent); font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-sm); letter-spacing: var(--ls-tight); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-btn); text-decoration: none; cursor: pointer; box-shadow: 0 0 0 rgba(34, 211, 238, 0.4); transition: box-shadow var(--dur), transform var(--dur-fast); } .btn:hover { box-shadow: var(--glow-accent); } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; box-shadow: none; } .btn-sm { padding: 7px var(--sp-4); font-size: var(--fs-mono-label); } .btn-xs { padding: 5px 11px; font-size: 11.5px; letter-spacing: var(--ls-tight); } .btn-ghost { background: transparent; color: var(--accent); } .btn-ghost:hover { box-shadow: var(--glow-accent); } .btn-discord { background: var(--discord); border-color: var(--discord); color: var(--discord-ink); font-size: var(--fs-body); padding: var(--sp-4) var(--sp-6); } .btn-discord:hover { box-shadow: 0 0 26px rgba(88, 101, 242, 0.45); } .btn-invite { background: var(--live); border-color: var(--live); color: var(--live-ink); font-size: 14px; } .btn-invite:hover { box-shadow: 0 0 22px rgba(52, 211, 153, 0.4); } .btn-icon { font-size: var(--fs-body); } /* ── Badges ────────────────────────────────────────────────────────────── Mono status pill: colored text + translucent fill + matching hairline. */ .badge { font-family: var(--font-mono); font-size: var(--fs-mono-label); letter-spacing: var(--ls-tight); padding: 5px 9px; border-radius: var(--r-sm); border: var(--bw) solid; } .badge-live { color: var(--live); border-color: var(--live-line); background: var(--live-fill); } .badge-warn { color: var(--warn); border-color: var(--warn-line); background: var(--warn-fill); } .badge-dead { color: var(--muted); border-color: var(--border); background: var(--dead-fill); } .badge-role { color: var(--accent); border-color: var(--accent-line); background: var(--accent-fill); } .locked { color: var(--muted); font-size: var(--fs-mono-label); letter-spacing: var(--ls-label); } /* ── Tags (required / optional) ────────────────────────────────────────── Smaller than a badge; classifies a row. */ .tag { font-size: var(--fs-xs); letter-spacing: var(--ls-label); padding: 2px 6px; border-radius: 4px; border: var(--bw) solid; } .tag-req { color: var(--accent); border-color: var(--accent-line); background: var(--accent-fill); } .tag-opt { color: var(--muted); border-color: var(--border); background: var(--dead-fill); } /* ── LED status dots ───────────────────────────────────────────────────── Glowing indicator. on = live/steady, off = warn/pulsing, unknown = muted. */ .led { width: 11px; height: 11px; border-radius: var(--r-full); flex: none; } .led-on { background: var(--live); box-shadow: var(--glow-live); } .led-off { background: var(--warn); box-shadow: var(--glow-warn); animation: led-pulse var(--pulse); } .led-unknown { background: var(--muted); box-shadow: 0 0 8px rgba(100, 120, 147, 0.5); animation: led-pulse var(--pulse); } @keyframes led-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ── Banner ──────────────────────────────────────────────────────────────*/ .banner { border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin-bottom: 20px; font-size: 14px; } .banner-error { background: var(--danger-fill); border: var(--bw) solid var(--danger-line); color: var(--danger); } /* ── Stat rollup ───────────────────────────────────────────────────────── Big mono numbers over tracked labels, on a raised panel. */ .rollup { display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-6); background: var(--panel-2); border: var(--bw) solid var(--border); border-radius: var(--r-lg); margin-bottom: 18px; } .rollup-stat { display: flex; flex-direction: column; align-items: center; } .rollup-num { font-family: var(--font-mono); font-size: var(--fs-stat); font-weight: var(--fw-bold); line-height: 1; } .rollup-slash { font-family: var(--font-mono); font-size: 24px; margin: 0 2px; } .rollup-lbl { font-size: var(--fs-mono-label); letter-spacing: var(--ls-eyebrow); color: var(--muted); margin-top: 4px; } .rollup-div { width: 1px; height: 40px; background: var(--border); } .rollup-sub { margin-left: auto; font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--muted); } /* ── Bot row (setup list item) ───────────────────────────────────────────*/ .bot-row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--panel); border: var(--bw) solid var(--border); border-radius: var(--r-md); } .bot-row.is-ready { border-color: var(--live-line); } .bot-row .led { align-self: flex-start; margin-top: 4px; } .bot-text { flex: 1; min-width: 0; } .bot-line { display: flex; align-items: baseline; gap: var(--sp-3); } .bot-name { color: var(--heading); font-weight: var(--fw-semibold); } .bot-app { font-size: var(--fs-mono-label); } .bot-desc { margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; } .bot-action { margin-left: auto; align-self: center; flex: none; } .bot-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); } /* ── Login ───────────────────────────────────────────────────────────────*/ .login { display: grid; place-items: center; min-height: 62vh; } .login-card { max-width: var(--login-max); text-align: center; padding: var(--sp-8) 34px; } .login-title { font-size: var(--fs-hero); margin: 8px 0 12px; letter-spacing: var(--ls-label); font-weight: var(--fw-heavy); background: linear-gradient(90deg, var(--heading) 0%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .login-sub { color: var(--muted); margin: 0 0 26px; } .login-card .btn { width: 100%; justify-content: center; } .login-fine { color: var(--muted); font-size: var(--fs-label); margin: 16px 0 0; } /* ── Empty state ─────────────────────────────────────────────────────────*/ .empty { text-align: center; color: var(--text); } /* ── Server card ─────────────────────────────────────────────────────────*/ .server-card { display: flex; flex-direction: column; gap: var(--sp-5); transition: border-color var(--dur); } .server-card:hover { border-color: var(--border-hi); } .server-id { display: flex; align-items: center; gap: 14px; } .server-icon { width: 48px; height: 48px; border-radius: var(--r-lg); object-fit: cover; flex: none; } .server-icon-fallback { display: grid; place-items: center; background: var(--panel-2); border: var(--bw) solid var(--border); color: var(--accent); font-family: var(--font-mono); font-weight: var(--fw-bold); } .server-name h2 { margin: 0; font-size: var(--fs-h2); color: var(--heading); } .server-name code { font-size: var(--fs-mono-label); } .server-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: auto; } /* ── Control-bot prerequisite callout ────────────────────────────────────*/ .control-callout { margin-bottom: 18px; padding: 20px 22px; } .control-callout .eyebrow { margin-bottom: var(--sp-3); } .control-body { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .control-copy h2 { margin: 0 0 4px; font-size: var(--fs-h2); color: var(--heading); } .control-copy p { margin: 0; font-size: var(--fs-sm); max-width: 60ch; } .control-body .btn { flex: none; } /* ── Setup wizard states ─────────────────────────────────────────────────*/ .wizard { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; padding-top: 4px; } .wizard-hint { font-size: var(--fs-mono-label); letter-spacing: var(--ls-label); } .wizard-done { display: flex; align-items: center; gap: var(--sp-3); color: var(--live); } .wizard-done p { margin: 0; color: var(--text); } .scope-note { margin: 18px 0 0; font-size: 10px; letter-spacing: var(--ls-label); opacity: 0.7; } /* ── Access denied ───────────────────────────────────────────────────────*/ .denied { max-width: 520px; } .denied h1 { color: var(--heading); margin: 6px 0 10px; } .denied .btn { margin-top: 16px; } /* ── 404 / signal-lost page ────────────────────────────────────────────── Reuses the denied-card frame (corner brackets, max-width), centered, with an oversized mono callsign and a static-waveform strip for the "lost transmission" read. No animation (the LED pulse is the system's only motion) and no emoji — the humor lives in the copy, not in decoration. */ .lost { max-width: 520px; text-align: center; } .lost-code { font-family: var(--font-mono); font-weight: var(--fw-heavy); font-size: 88px; line-height: 1; letter-spacing: 8px; color: var(--accent); text-shadow: var(--glow-accent-brand); margin: 6px 0 2px; } .lost-wave { font-family: var(--font-mono); font-size: var(--fs-body); letter-spacing: 2px; color: var(--muted); overflow: hidden; white-space: nowrap; margin-bottom: 18px; } .lost h1 { color: var(--heading); margin: 6px 0 10px; } .lost .btn { margin-top: 16px; } /* Optional bots sit quieter than required ones. */ .bot-row:has(.tag-opt) { opacity: 0.82; } /* htmx indicator rules, self-hosted because its inline