:root { /* Modern Dark (operations dashboard) — deep slate + connected-green. Semantic tokens; components never use raw hex. */ --bg: #0F172A; /* slate-900, avoids pure black (OLED smear) */ --bg-elev: #172033; /* elevated surface */ --bg-elev2: #1E293B; /* slate-800, pressed / inset */ --line: rgba(255, 255, 255, .09); --text: #F8FAFC; --muted: #94A3B8; /* slate-400, ≥3:1 on --bg */ --accent: #22C55E; /* connected green — brand + primary CTA */ --accent-ink: #052E16; /* near-black-green ink on accent, high contrast */ --green: #22C55E; /* online */ --sky: #38BDF8; /* rx / download traffic */ --red: #F87171; /* danger text / ghost */ --danger: #DC2626; /* destructive fill */ --amber: #FBBF24; /* disabled / warning */ --radius: 14px; --radius-sm: 10px; --shadow: 0 10px 30px rgba(0, 0, 0, .45); --maxw: 640px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; /* dense/dashboard spacing rhythm (density 8/10) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; } /* Light palette. The server stamps data-theme on per the admin's --ui-mode (default "dark" forces the dark base above regardless of OS): data-theme="light" — admin forced light data-theme="auto" — follow the OS, so only light under a light OS pref Forced dark emits neither trigger, so light never applies. */ :root[data-theme="light"], :root[data-theme="auto"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { --bg: #F1F5F9; /* slate-100, not pure white */ --bg-elev: #FFFFFF; --bg-elev2: #E2E8F0; --line: #E2E8F0; --text: #0F172A; --muted: #475569; /* slate-600, ≥4.5:1 on light surfaces */ --accent: #16A34A; /* green-600 for crisper contrast on light */ --accent-ink: #FFFFFF; --green: #16A34A; --sky: #0284C7; --red: #DC2626; --danger: #DC2626; --amber: #B45309; --shadow: 0 8px 24px rgba(15, 23, 32, .12); } @media (prefers-color-scheme: light) { :root[data-theme="auto"] { --bg: #F1F5F9; /* slate-100, not pure white */ --bg-elev: #FFFFFF; --bg-elev2: #E2E8F0; --line: #E2E8F0; --text: #0F172A; --muted: #475569; /* slate-600, ≥4.5:1 on light surfaces */ --accent: #16A34A; /* green-600 for crisper contrast on light */ --accent-ink: #FFFFFF; --green: #16A34A; --sky: #0284C7; --red: #DC2626; --danger: #DC2626; --amber: #B45309; --shadow: 0 8px 24px rgba(15, 23, 32, .12); } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; } .muted { color: var(--muted); } .hidden { display: none !important; } .center { text-align: center; padding: 40px 16px; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── icons ── */ .ic { width: var(--icon-md); height: var(--icon-md); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; vertical-align: -.15em; } .ic-sm { width: var(--icon-sm); height: var(--icon-sm); } .ic-lg { width: var(--icon-lg); height: var(--icon-lg); } /* filled glyphs (play / stop / pause) */ #i-play, #i-stop, #i-pause { fill: currentColor; stroke: none; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text); cursor: pointer; width: 44px; height: 44px; border-radius: 50%; transition: background .15s; } .icon-btn:active { background: var(--bg-elev2); } .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── layout ── */ main { max-width: var(--maxw); margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom)); } h1 { font-size: 22px; margin: 8px 0 16px; font-weight: 700; } h2 { font-size: 16px; margin: 0; font-weight: 620; } #loading { display: flex; flex-direction: column; align-items: center; gap: 12px; } /* ── stat grid ── */ .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; } .stat { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 12px; text-align: center; } .stat-val { font-size: 28px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; min-height: 28px; } .stat-online { color: var(--green); } .stat-label { font-size: 12px; color: var(--muted); margin-top: 6px; text-transform: uppercase; letter-spacing: .5px; } /* ── cards ── */ .card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .card p.muted { margin: 0 0 12px; font-size: 14px; } .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 8px; font-size: 14px; } .stats-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 4px; font-size: 13px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── badges ── */ .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--bg-elev2); color: var(--muted); white-space: nowrap; } .badge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .badge.up { background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); } .badge.down { background: color-mix(in srgb, var(--red) 20%, transparent); color: var(--red); } .badge.ok { background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); } .badge.no { background: color-mix(in srgb, var(--amber) 20%, transparent); color: var(--amber); } /* ── buttons ── */ .btn { appearance: none; border: 1px solid var(--line); background: var(--bg-elev2); color: var(--text); font-size: 14px; font-weight: 550; padding: 10px 16px; min-height: 44px; border-radius: var(--radius-sm); cursor: pointer; transition: transform .12s cubic-bezier(.16, 1, .3, 1), filter .15s, background .15s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .btn:hover { filter: brightness(1.08); } .btn:active { transform: scale(.97); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn:disabled { opacity: .5; cursor: default; filter: none; } .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; } .btn-danger { background: var(--danger); color: #fff; border-color: transparent; } .btn-danger-ghost { color: var(--red); } .btn-sm { padding: 7px 12px; min-height: 38px; font-size: 13px; } .btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .btn-row.end { justify-content: flex-end; } /* flex-basis 0 makes buttons that share a row equal width regardless of their label length (e.g. "Download .conf" vs "Delete" in the client modal). */ .btn-row .btn { flex: 1 1 0; min-width: 0; } .btn-row.end .btn { flex: 0 0 auto; } .section-head { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 12px; } .section-actions { display: flex; align-items: center; gap: 4px; } .section-actions .icon-btn { width: 38px; height: 38px; color: var(--muted); } .section-actions .icon-btn:hover { color: var(--text); } /* ── forms ── */ .form { display: flex; flex-direction: column; gap: 12px; } .form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); font-weight: 500; } .form input { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font-size: 16px; padding: 12px; min-height: 44px; width: 100%; } .form input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; } /* ── search ── */ .search-wrap { position: relative; margin-bottom: 12px; } .search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .search-wrap input { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font-size: 16px; padding: 12px 14px 12px 40px; min-height: 44px; width: 100%; } .search-wrap input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; } .search-wrap input::placeholder { color: var(--muted); } .list-filter { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 16px; margin: -4px 0 12px; font-size: 13px; color: var(--muted); } .filter-item { display: flex; align-items: center; gap: 8px; } /* ── comment block (client modal) ── */ .comment-block { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; } .comment-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .comment-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; } .comment-view { font-size: 14px; white-space: pre-wrap; word-break: break-word; } .comment-editor textarea { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font-family: inherit; font-size: 15px; line-height: 1.4; padding: 10px 12px; width: 100%; resize: vertical; } .comment-editor textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; } /* ── client list ── */ .client-list { display: flex; flex-direction: column; gap: 10px; } .client { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; transition: background .15s, border-color .15s, transform .12s cubic-bezier(.16, 1, .3, 1); } .client:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .client:active { background: var(--bg-elev2); transform: scale(.99); } .client:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .client .dot { position: relative; width: 12px; height: 12px; border-radius: 50%; background: transparent; border: 2px solid var(--muted); flex: 0 0 auto; } /* status conveyed by shape + colour, not colour alone */ .client .dot.online { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 22%, transparent); animation: livepulse 2s ease-in-out infinite; } .client .dot.disabled { border-color: var(--amber); background: transparent; } .client .dot.disabled::after { content: ""; position: absolute; inset: 2px 1px; border-top: 2px solid var(--amber); transform: translateY(2px); } .client .info { flex: 1 1 auto; min-width: 0; } .client .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .client .sub { font-size: 12px; color: var(--muted); font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; } .client .note { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; } .client .note span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .client .traffic { text-align: right; font-size: 12px; color: var(--muted); flex: 0 0 auto; font-variant-numeric: tabular-nums; } .client .traffic > div { display: flex; align-items: center; justify-content: flex-end; gap: 3px; } .client .traffic .down { color: var(--sky); } .client .traffic .up { color: var(--green); } @keyframes livepulse { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 22%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--green) 6%, transparent); } } /* ── skeletons ── */ .sk { display: inline-block; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--muted) 16%, transparent) 25%, color-mix(in srgb, var(--muted) 28%, transparent) 37%, color-mix(in srgb, var(--muted) 16%, transparent) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; } .sk-num { width: 40%; height: 26px; } .client.skeleton { pointer-events: none; animation: none; } .client.skeleton .sk-dot { width: 12px; height: 12px; border-radius: 50%; } .client.skeleton .info .sk { display: block; } .client.skeleton .sk-line1 { width: 45%; height: 12px; margin-bottom: 7px; } .client.skeleton .sk-line2 { width: 65%; height: 10px; } .client.skeleton .sk-tr { width: 44px; height: 24px; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* ── toggle switch ── */ .switch { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 46px; height: 44px; /* ≥44px touch target; visual track is the slider inside */ cursor: pointer; } .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .switch .slider { position: relative; width: 46px; height: 28px; background: var(--bg-elev2); border: 1px solid var(--line); border-radius: 999px; transition: background .18s, border-color .18s; } .switch .slider::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: transform .18s cubic-bezier(.16, 1, .3, 1), background .18s; } .switch input:checked + .slider { background: color-mix(in srgb, var(--green) 30%, transparent); border-color: transparent; } .switch input:checked + .slider::before { transform: translateX(18px); background: var(--green); } .switch input:focus-visible + .slider { outline: 2px solid var(--accent); outline-offset: 2px; } .switch input:disabled { cursor: default; } .switch input:disabled + .slider { opacity: .5; } /* ── modal ── */ .modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .55); padding: 0; animation: fade .15s ease; } @media (min-width: 560px) { .modal { align-items: center; padding: 16px; } } .modal-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow); width: 100%; max-width: var(--maxw); padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); animation: slideup .24s cubic-bezier(.16, 1, .3, 1); } @media (min-width: 560px) { .modal-card { border-radius: var(--radius); animation: popin .2s cubic-bezier(.16, 1, .3, 1); } } .modal-card h2 { margin-bottom: 14px; } .qr-wrap { text-align: center; margin: 16px 0; } .qr-wrap img { width: 220px; max-width: 70%; background: #fff; padding: 10px; border-radius: var(--radius-sm); image-rendering: pixelated; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes slideup { from { transform: translateY(24px); opacity: .6; } to { transform: translateY(0); opacity: 1; } } @keyframes popin { from { transform: scale(.96); opacity: .6; } to { transform: scale(1); opacity: 1; } } @keyframes rowin { from { transform: translateY(6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* staggered list entrance (subtle) */ .client-list .client { animation: rowin .28s cubic-bezier(.16, 1, .3, 1) both; } /* ── toast ── */ .toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 100; background: var(--bg-elev2); color: var(--text); border: 1px solid var(--line); padding: 11px 18px; border-radius: 999px; box-shadow: var(--shadow); font-size: 14px; max-width: 90%; animation: fade .15s ease; } .toast.err { border-color: var(--red); color: var(--red); } .toast.ok { border-color: var(--green); } .spin { display: inline-block; animation: rot 1s linear infinite; transform-origin: center; } @keyframes rot { to { transform: rotate(360deg); } } /* ── reduced motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .sk { animation: none; opacity: .6; } }