@import url("tokens.css"); /* Native form controls (scrollbar, date picker, etc.) render in dark mode * by default — overlay (child.html) and Electron renderer keep this. * Viewer and admin pages flip html's scheme to `light` via :has() selectors * scoped to their body class so Chrome's scrollbar + form controls match * the light palette the page actually paints. */ html { color-scheme: dark; } html:has(body.admin-body) { color-scheme: light; } /* Respect user's motion preference — disable animation for vestibular safety */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Basic styles and fonts */ body { font-family: var(--font-ui); background-color: var(--color-bg-deep); color: white; } /* Per-language font priority. i18n.js updates so these apply. * Each override promotes the matching Noto to the front so Han characters * render with the correct regional glyph style. */ :lang(zh) { --font-display: "Bebas Neue", "Noto Sans", "Noto Sans TC", system-ui, sans-serif; --font-brand: "Noto Sans", "Noto Sans TC", system-ui, sans-serif; --font-ui: "Noto Sans", "Noto Sans TC", system-ui, sans-serif; } :lang(ja) { --font-display: "Bebas Neue", "Noto Sans", "Noto Sans JP", system-ui, sans-serif; --font-brand: "Noto Sans", "Noto Sans JP", system-ui, sans-serif; --font-ui: "Noto Sans", "Noto Sans JP", system-ui, sans-serif; } :lang(ko) { --font-display: "Bebas Neue", "Noto Sans", "Noto Sans KR", system-ui, sans-serif; --font-brand: "Noto Sans", "Noto Sans KR", system-ui, sans-serif; --font-ui: "Noto Sans", "Noto Sans KR", system-ui, sans-serif; } /* Tabular figures — numbers align column-to-column in data displays */ [data-tabular], .composer-counter, .history-dashboard-value, .chart-label { font-variant-numeric: tabular-nums; } /* Every interactive element shows a pointer — no more default arrow on buttons */ button:not(:disabled), [role="button"]:not([aria-disabled="true"]), summary, label[for], select:not(:disabled) { cursor: pointer; } button:disabled, [role="button"][aria-disabled="true"] { cursor: not-allowed; } /* Skip link — visible only when focused via keyboard */ .skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 100; padding: 0.65rem 1rem; background: var(--color-primary); color: var(--color-bg-deep); border-radius: var(--radius-md); font-weight: 600; transform: translateY(-200%); transition: transform 0.2s ease; } .skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--color-text-primary); outline-offset: 2px; } .admin-body { /* Scoped light-theme overrides — the rest of the app (viewer, overlay, * Electron window) keeps the dark slate tokens; admin alone flips to * the prototype's light palette (hudTokens.light*). */ --color-text-primary: var(--admin-text); --color-text-secondary: var(--admin-text-dim); --color-text-muted: var(--admin-text-dim); --color-text-bright: var(--admin-text); --color-text-strong: var(--admin-text); --color-bg-deep: var(--admin-raised); --color-bg-elevated: var(--admin-raised); --color-bg-base: var(--admin-panel); --hud-line: var(--admin-line); --hud-line-strong: rgba(15, 23, 42, 0.18); --hud-cyan-soft: rgba(56, 189, 248, 0.12); color-scheme: light; background: var(--admin-bg); min-height: 100vh; color: var(--admin-text); font-family: var(--font-ui); } .admin-app-shell { max-width: 1600px; margin: 0 auto; padding: 16px; } /* ────────────────────────────────────────────────────────────────────────── * Admin Login — full-screen, Hero lockup on top. * Mirrors AdminLogin in hero-scenes.jsx: 420px card, mono labels, * cyan sign-in button, status chip row. * ────────────────────────────────────────────────────────────────────────── */ .admin-login-shell { min-height: calc(100vh - 32px); display: flex; align-items: center; justify-content: center; padding: 32px 16px; position: relative; overflow: hidden; } /* HudBackdrop — prototype hero-scenes.jsx AdminLogin uses opacity=0.25 cyan grid. */ .admin-login-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.25; background-image: linear-gradient(rgba(56, 189, 248, 0.45) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, 0.45) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%); z-index: 0; } .admin-login-card { width: 100%; max-width: 420px; background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 12px; padding: 36px 32px 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); position: relative; z-index: 1; } .admin-login-hero { text-align: center; padding-bottom: 22px; border-bottom: 1px solid var(--admin-line); } .admin-login-subtitle { margin: 10px 0 0; font-size: 13px; color: var(--admin-text-dim); font-family: var(--font-ui); } .admin-login-form { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; } .admin-login-field { display: flex; flex-direction: column; gap: 6px; } .admin-login-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px; color: var(--admin-text-dim); text-transform: uppercase; } .admin-login-input { width: 100%; padding: 11px 14px; background: var(--admin-raised); border: 1px solid var(--admin-line); border-radius: 6px; color: var(--admin-text); font-family: var(--font-mono); font-size: 13px; outline: none; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .admin-login-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18); } .admin-login-submit { margin-top: 4px; width: 100%; padding: 12px 16px; background: var(--color-primary); color: #000; border: none; border-radius: 6px; cursor: pointer; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; transition: background-color 0.15s ease, transform 0.15s ease; } .admin-login-submit:hover { background: var(--color-primary-hover); } .admin-login-submit:active { transform: translateY(1px); } .admin-login-chiprow { margin-top: 20px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .admin-login-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--admin-line); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--admin-text-dim); } .admin-login-chip.is-accent { background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.45); color: var(--color-primary); } .admin-login-chip .hud-dot { width: 6px; height: 6px; } /* ────────────────────────────────────────────────────────────────────────── * AdminV3 Dashboard Summary — prototype admin-v3.jsx 12-col grid beneath KPI. * Four cards: active poll (7) + poll builder (5), messages (7) + widgets (5). * ────────────────────────────────────────────────────────────────────────── */ .admin-dash-summary { padding: 0 24px 24px; } body[data-active-route]:not([data-active-route="dashboard"]) .admin-dash-summary { display: none; } .admin-dash-summary-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; } .admin-dash-card { background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 6px; padding: 18px; display: flex; flex-direction: column; min-height: 180px; } .admin-dash-card.is-span-7 { grid-column: span 7; } .admin-dash-card.is-span-5 { grid-column: span 5; } @media (max-width: 1100px) { .admin-dash-card.is-span-7, .admin-dash-card.is-span-5 { grid-column: span 12; } } .admin-dash-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .admin-dash-card-head .title { font-size: 14px; font-weight: 600; color: var(--admin-text); } .admin-dash-card-head .kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--admin-text-dim); text-transform: uppercase; } .admin-dash-card-head .timer, .admin-dash-card-head .auto { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--color-primary); } .admin-dash-card-head .timer:empty { display: none; } /* Filter chips above the messages stream — prototype admin-v3.jsx:120 */ .admin-dash-msg-filters { display: flex; gap: 6px; padding: 4px 0 12px; border-bottom: 1px solid var(--hud-line); margin-bottom: 10px; flex-wrap: wrap; } .admin-dash-msg-filter { padding: 4px 10px; border-radius: 4px; border: 1px solid var(--hud-line); background: transparent; color: var(--admin-text-dim); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; cursor: pointer; transition: border-color 0.12s, color 0.12s; } .admin-dash-msg-filter:hover { border-color: var(--hud-line-strong); } .admin-dash-msg-filter.is-active { border-color: var(--color-primary); color: var(--color-primary); } .admin-dash-card-body { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; } .admin-dash-empty { padding: 22px 6px; text-align: center; color: var(--admin-text-dim); font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.5px; } .admin-dash-cta { display: inline-block; padding: 10px 14px; border-radius: 6px; border: 1px dashed var(--admin-line); background: transparent; color: var(--color-primary); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.5px; text-align: center; text-decoration: none; } .admin-dash-cta:hover { border-color: var(--color-primary); background: rgba(56, 189, 248, 0.08); } .admin-dash-messages { gap: 0; overflow: auto; max-height: 320px; font-family: var(--font-mono); font-size: 12px; } .admin-dash-msg-row { display: grid; grid-template-columns: 62px 74px 1fr auto; padding: 8px 4px; gap: 10px; align-items: center; border-bottom: 1px solid var(--admin-line); } .admin-dash-msg-row:last-child { border-bottom: none; } .admin-dash-msg-row .time { color: var(--admin-text-dim); font-size: 10px; } .admin-dash-msg-row .tag { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; } .admin-dash-msg-row .text { font-family: var(--font-ui); font-size: 12px; color: var(--admin-text); } .admin-dash-msg-row .meta { color: var(--admin-text-dim); font-size: 10px; } .admin-dash-msg-row .more { color: var(--admin-text-dim); font-size: 14px; cursor: pointer; } /* Quick poll inline form — prototype admin-v3.jsx:77–110 */ .admin-dash-card-head-link { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--color-primary); text-decoration: none; cursor: pointer; } .admin-dash-quickpoll { display: flex; flex-direction: column; gap: 10px; } .admin-dash-qp-question { padding: 10px 12px; border-radius: 6px; background: var(--admin-raised); border: 1px solid var(--admin-line); color: var(--admin-text); font-size: 13px; outline: none; } .admin-dash-qp-question:focus { border-color: var(--color-primary); } .admin-dash-qp-options { display: flex; flex-direction: column; gap: 6px; } .admin-dash-qp-row { display: flex; gap: 8px; align-items: center; } .admin-dash-qp-row .key { width: 26px; height: 26px; border-radius: 4px; background: var(--admin-raised); color: var(--admin-text); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; flex-shrink: 0; } .admin-dash-qp-row input { flex: 1; padding: 7px 10px; border-radius: 4px; background: transparent; border: 1px solid var(--admin-line); color: var(--admin-text); font-size: 12px; outline: none; min-width: 0; } .admin-dash-qp-row input:focus { border-color: var(--color-primary); } .admin-dash-qp-row .rm { background: transparent; border: none; color: var(--admin-text-dim); cursor: pointer; font-size: 14px; padding: 4px 6px; } .admin-dash-qp-row .rm:hover { color: var(--color-warning); } .admin-dash-qp-add { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--color-primary); cursor: pointer; text-decoration: none; } .admin-dash-qp-add[hidden] { display: none; } .admin-dash-qp-foot { margin-top: auto; padding-top: 14px; display: flex; gap: 8px; } .admin-dash-qp-start { margin-left: auto; padding: 8px 18px; border-radius: 6px; border: 1px solid var(--color-primary); background: var(--color-primary); color: #000; cursor: pointer; font-size: 12px; font-weight: 700; font-family: var(--font-mono); letter-spacing: 1px; transition: transform 0.12s; } .admin-dash-qp-start:hover { transform: translateY(-1px); } .admin-dash-qp-start:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .admin-dash-widget-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .admin-dash-widget-tile { border: 1px solid var(--admin-line); border-radius: 6px; padding: 10px; background: var(--admin-raised); } .admin-dash-widget-tile-head { display: flex; align-items: center; gap: 6px; } .admin-dash-widget-tile-head .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .admin-dash-widget-tile-head .cat { margin-left: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.5px; color: var(--admin-text-dim); } .admin-dash-widget-tile .title { font-weight: 600; font-size: 13px; margin-top: 6px; } .admin-dash-widget-tile .kind { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--admin-text-dim); text-transform: uppercase; } .admin-dash-widget-tile .uptime { margin-top: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.5px; color: var(--admin-text-dim); } .admin-dash-widget-tile .actions { margin-top: 8px; display: flex; gap: 4px; } .admin-dash-widget-tile .actions .chip { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; padding: 2px 6px; border-radius: 3px; border: 1px solid var(--admin-line); background: transparent; color: var(--admin-text); cursor: pointer; transition: border-color 0.12s, color 0.12s; } .admin-dash-widget-tile .actions .chip.is-muted { color: var(--admin-text-dim); } .admin-dash-widget-tile .actions .chip:hover { border-color: var(--color-primary); color: var(--color-primary); } .admin-dash-poll-opt { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .admin-dash-poll-opt .row { display: flex; align-items: center; gap: 10px; } .admin-dash-poll-opt .tag { width: 22px; height: 22px; border-radius: 4px; background: var(--admin-raised); color: var(--admin-text); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; } .admin-dash-poll-opt.is-winner .tag { background: var(--color-primary); color: #000; } .admin-dash-poll-opt .label { flex: 1; font-size: 12px; color: var(--admin-text); } .admin-dash-poll-opt .pct { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--admin-text); } .admin-dash-poll-opt.is-winner .pct { color: var(--color-primary); } .admin-dash-poll-opt .votes { font-family: var(--font-mono); font-size: 10px; color: var(--admin-text-dim); width: 42px; text-align: right; } .admin-dash-poll-opt .bar { height: 6px; border-radius: 3px; background: var(--admin-raised); overflow: hidden; } .admin-dash-poll-opt .bar > span { display: block; height: 100%; background: rgba(56, 189, 248, 0.45); border-radius: 3px; transition: width 0.3s ease; } .admin-dash-poll-opt.is-winner .bar > span { background: var(--color-primary); } /* Poll builder buttons (sec-polls page) — prototype admin-v3.jsx cyan/ghost. */ .admin-poll-actions { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; } .admin-poll-btn { padding: 8px 18px; border-radius: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .admin-poll-btn.is-primary { background: var(--color-primary); border: 1px solid var(--color-primary); color: #000; } .admin-poll-btn.is-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } .admin-poll-btn.is-ghost { background: transparent; border: 1px solid var(--admin-line); color: var(--admin-text); } .admin-poll-btn.is-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); } .admin-poll-options-actions { margin-top: 8px; display: flex; gap: 12px; } .admin-poll-link { background: transparent; border: none; padding: 4px 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; cursor: pointer; color: var(--color-primary); text-transform: uppercase; } .admin-poll-link.is-muted { color: var(--admin-text-dim); } .admin-poll-link:hover { color: var(--color-primary-hover); } .admin-poll-link.is-muted:hover { color: var(--admin-text); } /* ────────────────────────────────────────────────────────────────────────── * Theme Pack cards — prototype admin-theme-packs.jsx grid of preset bundles. * ────────────────────────────────────────────────────────────────────────── */ #themesList { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (max-width: 760px) { #themesList { grid-template-columns: 1fr; } } .theme-pack-card { background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 6px; padding: 14px; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.15s ease, background 0.15s ease; } .theme-pack-card.is-active { border-color: var(--color-primary); background: rgba(56, 189, 248, 0.04); } .theme-pack-card-head { display: flex; align-items: center; gap: 10px; } .theme-pack-swatches { display: flex; gap: 0; } .theme-pack-swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--admin-panel); margin-left: -6px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .theme-pack-swatch:first-child { margin-left: 0; } .theme-pack-title { display: flex; flex-direction: column; min-width: 0; } .theme-pack-title .zh { font-size: 14px; font-weight: 600; color: var(--admin-text); } .theme-pack-title .en { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--admin-text-dim); } .theme-pack-status { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--admin-text-dim); } .theme-pack-status.is-active { color: var(--color-primary); } .theme-pack-desc { margin: 0; font-size: 12px; color: var(--admin-text-dim); line-height: 1.5; } .theme-pack-meta { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.5px; } .theme-pack-meta .row { display: flex; gap: 10px; } .theme-pack-meta .k { width: 48px; color: var(--admin-text-dim); letter-spacing: 1.5px; } .theme-pack-meta .v { flex: 1; color: var(--admin-text); display: flex; flex-wrap: wrap; gap: 4px; } .theme-pack-chip { display: inline-block; padding: 1px 6px; border: 1px solid var(--admin-line); border-radius: 3px; font-size: 9px; letter-spacing: 1px; color: var(--admin-text-dim); text-transform: uppercase; } .theme-pack-muted { color: var(--admin-text-dim); } .theme-pack-foot { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--admin-line); } .theme-pack-badge { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px; padding: 2px 6px; border-radius: 3px; border: 1px solid var(--admin-line); color: var(--admin-text-dim); } .theme-pack-badge.is-builtin { color: var(--color-primary); border-color: rgba(56, 189, 248, 0.35); } .theme-pack-actions { margin-left: auto; display: flex; gap: 8px; } .theme-pack-btn { padding: 5px 12px; border-radius: 4px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; border: 1px solid var(--color-primary); background: var(--color-primary); color: #000; } .theme-pack-btn.is-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } .theme-pack-btn.is-disabled { background: transparent; color: var(--admin-text-dim); border-color: var(--admin-line); cursor: default; } /* ────────────────────────────────────────────────────────────────────────── * Viewer Theme page (v5 handoff admin-viewer-theme.jsx) * Left controls (380px) + right live iframe-style preview. Entirely separate * from Theme Packs — governs /fire page chrome only. * ────────────────────────────────────────────────────────────────────────── */ .admin-vt-page { display: flex; flex-direction: column; gap: 14px; } .admin-vt-scope { display: flex; gap: 10px; padding: 10px 14px; border-radius: 6px; background: rgba(56, 189, 248, 0.08); border: 1px solid var(--color-primary); } .admin-vt-scope .icon { font-family: var(--font-mono); color: var(--color-primary); font-size: 14px; } .admin-vt-scope .kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--color-primary); font-weight: 700; } .admin-vt-scope p { margin: 2px 0 0; font-size: 12px; line-height: 1.6; color: var(--admin-text); } .admin-vt-scope code { font-family: var(--font-mono); color: var(--color-primary); padding: 0 2px; } .admin-vt-grid { display: grid; grid-template-columns: 380px 1fr; gap: 20px; } @media (max-width: 960px) { .admin-vt-grid { grid-template-columns: 1fr; } } .admin-vt-controls { display: flex; flex-direction: column; gap: 14px; } .admin-vt-card { padding: 14px; background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 6px; } .admin-vt-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; } .admin-vt-card-head .title { font-size: 13px; font-weight: 600; color: var(--admin-text); } .admin-vt-card-head .kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--admin-text-dim); text-transform: uppercase; } .admin-vt-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .admin-vt-preset { padding: 10px; border-radius: 4px; border: 1px solid var(--admin-line); background: transparent; text-align: left; cursor: pointer; color: var(--admin-text); } .admin-vt-preset.is-active { border-color: var(--color-primary); background: rgba(56, 189, 248, 0.08); } .admin-vt-preset .swatch { height: 28px; border-radius: 3px; margin-bottom: 6px; position: relative; border: 1px solid var(--admin-line); overflow: hidden; } .admin-vt-preset .swatch span { position: absolute; top: 6px; width: 10px; height: 10px; border-radius: 50%; } .admin-vt-preset .swatch span:nth-child(1) { left: 6px; } .admin-vt-preset .swatch span:nth-child(2) { left: 20px; } .admin-vt-preset .name { font-size: 11px; font-weight: 500; } .admin-vt-preset .mode { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; color: var(--admin-text-dim); margin-top: 2px; } .admin-vt-mode { display: flex; gap: 6px; } .admin-vt-mode button { flex: 1; padding: 9px 6px; border-radius: 4px; border: 1px solid var(--admin-line); background: transparent; color: var(--admin-text); cursor: pointer; font-family: var(--font-ui); } .admin-vt-mode button.is-active { border-color: var(--color-primary); background: rgba(56, 189, 248, 0.08); color: var(--color-primary); } .admin-vt-mode .icon { display: block; font-size: 16px; line-height: 1; } .admin-vt-mode .lbl { display: block; font-size: 11px; margin-top: 4px; } .admin-vt-mode .sub { display: block; font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px; color: var(--admin-text-dim); margin-top: 2px; } .admin-vt-mode button.is-active .sub { color: var(--color-primary); } .admin-vt-color-rows { display: flex; flex-direction: column; gap: 8px; } .admin-vt-color-row { display: flex; gap: 10px; align-items: center; } .admin-vt-color-row .swatch { width: 40px; height: 40px; border-radius: 4px; border: 1px solid var(--admin-line); flex-shrink: 0; } .admin-vt-color-row .meta { flex: 1; min-width: 0; } .admin-vt-color-row .top { display: flex; align-items: baseline; gap: 8px; } .admin-vt-color-row .label { font-size: 12px; font-weight: 500; color: var(--admin-text); } .admin-vt-color-row .kicker { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px; color: var(--admin-text-dim); } .admin-vt-color-row .grade { margin-left: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--admin-line); } .admin-vt-color-row .grade.is-good { color: #86efac; border-color: #86efac; } .admin-vt-color-row .grade.is-ok { color: var(--color-primary); border-color: var(--color-primary); } .admin-vt-color-row .grade.is-meh { color: #fbbf24; border-color: #fbbf24; } .admin-vt-color-row .grade.is-fail { color: #f87171; border-color: #f87171; } .admin-vt-color-row .bottom { display: flex; gap: 6px; align-items: center; margin-top: 4px; } .admin-vt-color-row input[type="color"] { width: 32px; height: 26px; padding: 0; border: 1px solid var(--admin-line); border-radius: 3px; background: transparent; cursor: pointer; } .admin-vt-color-row input[type="text"] { flex: 1; padding: 5px 8px; border: 1px solid var(--admin-line); border-radius: 3px; font-family: var(--font-mono); font-size: 11px; background: var(--admin-raised); color: var(--admin-text); outline: none; } .admin-vt-color-row .vs { font-family: var(--font-mono); font-size: 9px; color: var(--admin-text-dim); letter-spacing: 0.5px; } .admin-vt-logo-drop { display: block; height: 96px; border-radius: 4px; border: 1px dashed var(--admin-line); background: var(--admin-raised); cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; text-align: center; color: var(--admin-text-dim); } .admin-vt-logo-drop .hint-preview { max-height: 64px; max-width: 160px; object-fit: contain; } .admin-vt-logo-drop small { display: block; font-size: 9px; margin-top: 3px; opacity: 0.7; } .admin-vt-logo-actions { display: flex; gap: 6px; margin-top: 8px; } .admin-vt-logo-actions button { flex: 1; padding: 6px 10px; border-radius: 3px; border: 1px solid var(--admin-line); background: transparent; color: var(--admin-text-dim); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; cursor: pointer; } .admin-vt-card select { width: 100%; padding: 8px 10px; border-radius: 3px; background: var(--admin-raised); border: 1px solid var(--admin-line); color: var(--admin-text); font-size: 13px; outline: none; } .admin-vt-font-specimen { margin-top: 8px; padding: 10px 12px; border-radius: 3px; background: var(--admin-raised); border: 1px solid var(--admin-line); font-size: 16px; color: var(--admin-text); line-height: 1.4; letter-spacing: 0.3px; } .admin-vt-persist { display: flex; gap: 8px; margin-top: 4px; } .admin-vt-persist > button { flex: 1; } .admin-vt-persist > .admin-be-placeholder-control { flex: 1; justify-content: center; } /* Right preview panel */ .admin-vt-preview { display: flex; flex-direction: column; gap: 10px; } .admin-vt-preview-head { display: flex; align-items: center; gap: 10px; } .admin-vt-preview-head .kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--admin-text-dim); } .admin-vt-device { margin-left: auto; display: flex; gap: 2px; padding: 2px; border: 1px solid var(--admin-line); border-radius: 4px; background: var(--admin-panel); } .admin-vt-device button { padding: 4px 10px; border-radius: 3px; border: none; background: transparent; color: var(--admin-text-dim); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; cursor: pointer; } .admin-vt-device button.is-active { background: rgba(56, 189, 248, 0.12); color: var(--color-primary); } .admin-vt-contrast { display: flex; flex-wrap: wrap; gap: 6px; } .vt-contrast-chip { padding: 2px 8px; border-radius: 3px; border: 1px solid var(--admin-line); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.8px; color: var(--admin-text-dim); } .vt-contrast-chip.is-good { color: #86efac; border-color: #86efac; } .vt-contrast-chip.is-ok { color: var(--color-primary); border-color: var(--color-primary); } .vt-contrast-chip.is-meh { color: #fbbf24; border-color: #fbbf24; } .vt-contrast-chip.is-fail { color: #f87171; border-color: #f87171; } .admin-vt-preview-frame { flex: 1; min-height: 420px; padding: 12px; border: 1px solid var(--admin-line); border-radius: 6px; background: var(--admin-panel); display: flex; align-items: center; justify-content: center; } .admin-vt-preview-frame[data-device="tablet"] .admin-vt-preview-stage { max-width: 560px; } .admin-vt-preview-frame[data-device="mobile"] .admin-vt-preview-stage { max-width: 320px; } .admin-vt-preview-stage { width: 100%; max-width: 720px; min-height: 400px; border-radius: 8px; background: var(--vt-bg); color: var(--vt-fg); padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; transition: background 0.15s ease, color 0.15s ease; } .admin-vt-preview-stage .hero { text-align: center; } .admin-vt-preview-stage .hero .logo { font-family: inherit; font-size: 32px; font-weight: 700; color: var(--vt-primary); letter-spacing: 0.05em; } .admin-vt-preview-stage .hero .subtitle { margin: 8px 0 0; font-size: 14px; opacity: 0.75; } .admin-vt-preview-stage .hero .chip { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--vt-primary); background: color-mix(in srgb, var(--vt-primary) 10%, transparent); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 1.5px; color: var(--vt-primary); text-transform: uppercase; } .admin-vt-preview-stage .hero .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vt-primary); } .admin-vt-preview-stage .stream { display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .admin-vt-preview-stage .stream .row { display: flex; gap: 8px; padding: 6px 10px; border-radius: 4px; background: color-mix(in srgb, var(--vt-fg) 5%, transparent); } .admin-vt-preview-stage .stream .row b { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; opacity: 0.6; font-size: 11px; } .admin-vt-preview-stage .stream .row.self { background: color-mix(in srgb, var(--vt-primary) 20%, transparent); color: var(--vt-primary); } .admin-vt-preview-stage .composer { margin-top: auto; display: flex; gap: 6px; padding: 4px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--vt-fg) 15%, transparent); background: color-mix(in srgb, var(--vt-fg) 3%, transparent); } .admin-vt-preview-stage .composer input { flex: 1; border: none; background: transparent; color: var(--vt-fg); padding: 8px 14px; font-size: 13px; outline: none; opacity: 0.6; } .admin-vt-preview-stage .composer button { padding: 8px 16px; border-radius: 999px; border: none; background: var(--vt-primary); color: #000; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 1.5px; font-weight: 700; cursor: default; } /* ────────────────────────────────────────────────────────────────────────── * Rate Limits editable page (prototype admin-rate-limits.jsx) * 4 rows · each has limit count + window dropdown + current usage bar * ────────────────────────────────────────────────────────────────────────── */ .admin-ratelimit-page { display: flex; flex-direction: column; gap: 16px; } .admin-ratelimit-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 760px) { .admin-ratelimit-summary { grid-template-columns: repeat(2, 1fr); } } .admin-ratelimit-summary .tile { padding: 14px 16px; background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 6px; display: flex; flex-direction: column; gap: 4px; } .admin-ratelimit-summary .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--admin-text-dim); text-transform: uppercase; } .admin-ratelimit-summary .val { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--admin-text); line-height: 1.1; letter-spacing: -0.5px; } .admin-ratelimit-summary .delta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.5px; } .admin-ratelimit-summary .delta.is-good { color: #86efac; } .admin-ratelimit-summary .delta.is-warn { color: #fbbf24; } .admin-ratelimit-summary .delta.is-danger { color: #f87171; } .admin-ratelimit-summary .delta.is-muted { color: var(--admin-text-dim); } .admin-ratelimit-head { padding: 16px 18px; background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 6px; } .admin-ratelimit-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--admin-text-dim); text-transform: uppercase; } .admin-ratelimit-title { font-size: 16px; font-weight: 600; color: var(--admin-text); margin-top: 4px; } .admin-ratelimit-note { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: var(--admin-text-dim); } .admin-ratelimit-rows { display: flex; flex-direction: column; gap: 10px; } .admin-ratelimit-row { padding: 14px 16px; background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 6px; } .admin-ratelimit-row-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; } .admin-ratelimit-row-label { font-size: 13px; font-weight: 600; color: var(--admin-text); } .admin-ratelimit-row-env { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--admin-text-dim); } .admin-ratelimit-row-body { display: grid; grid-template-columns: 140px 140px 1fr; gap: 14px; align-items: end; } @media (max-width: 760px) { .admin-ratelimit-row-body { grid-template-columns: 1fr 1fr; } .admin-ratelimit-bar-field { grid-column: span 2; } } .admin-ratelimit-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; } .admin-ratelimit-field > span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--admin-text-dim); text-transform: uppercase; } .admin-ratelimit-field input, .admin-ratelimit-field select { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--admin-line); background: var(--admin-raised); color: var(--admin-text); font-family: var(--font-mono); font-size: 12px; outline: none; } .admin-ratelimit-field input:focus, .admin-ratelimit-field select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18); } .admin-ratelimit-bar-field { display: flex; flex-direction: column; gap: 4px; } .admin-ratelimit-bar { height: 6px; border-radius: 3px; background: var(--admin-raised); overflow: hidden; } .admin-ratelimit-bar-fill { height: 100%; background: var(--color-primary); opacity: 0.6; transition: width 0.3s ease; } .admin-ratelimit-bar-text { font-family: var(--font-mono); font-size: 10px; color: var(--admin-text-dim); text-transform: none; letter-spacing: 0; } .admin-ratelimit-footer { display: flex; gap: 8px; justify-content: flex-end; padding-top: 4px; } /* ────────────────────────────────────────────────────────────────────────── * Polls Builder · v5 master-detail (admin-polls.jsx) * Left 380px queue with HTML5 drag-reorder · right active question editor. * ────────────────────────────────────────────────────────────────────────── */ .admin-poll-page-v5 { display: flex; flex-direction: column; gap: 14px; } .admin-poll-page-v5 .admin-poll-head { padding: 16px 18px; background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 6px; } .admin-poll-master-detail { display: grid; /* Prototype-like 12-col balance (builder 5 + active editor 7) while * preserving current master-detail interaction model. */ grid-template-columns: minmax(300px, 5fr) minmax(420px, 7fr); gap: 20px; } @media (max-width: 1280px) and (min-width: 1024px) { /* Desktop with sidebar collapsing — tighter master/editor split. */ .admin-poll-master-detail { grid-template-columns: minmax(280px, 38%) minmax(0, 62%); } } /* Tablet + mobile — stack master over editor. Bumped from 960px to 1023px (polestar polish 2026-05-18) because at 961-1023 the editor minmax(420px) squeezed the queue panel to ~280px which felt cramped. At tablet width users can scroll between queue + editor; the stacked layout reads better. */ @media (max-width: 1023px) { .admin-poll-master-detail { grid-template-columns: 1fr; } } .admin-poll-queue-panel { padding: 18px; background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 6px; height: fit-content; display: flex; flex-direction: column; gap: 8px; } .admin-poll-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; } .admin-poll-card-head .title { font-size: 13px; font-weight: 600; color: var(--admin-text); } .admin-poll-card-head .kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--admin-text-dim); text-transform: uppercase; } .admin-poll-qrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 4px; border: 1px solid var(--admin-line); background: var(--admin-raised); cursor: pointer; transition: opacity 0.12s ease, border-color 0.12s ease, background 0.12s ease; } .admin-poll-qrow.is-active { border-color: var(--color-primary); background: var(--hud-cyan-soft); } .admin-poll-qrow.is-running { border-color: var(--color-primary); box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35); } .admin-poll-qrow.is-dragging { opacity: 0.35; } /* Drop-hint cyan line — prototype admin-polls.jsx:117 shows a glowing * 3px bar at the drop target. Use ::before so the row doesn't shift. */ .admin-poll-qrow { position: relative; } .admin-poll-qrow.is-drag-over::before { content: ""; position: absolute; left: 4px; right: 4px; top: -2px; height: 3px; border-radius: 2px; background: var(--color-primary); box-shadow: 0 0 8px var(--color-primary); pointer-events: none; } .admin-poll-qrow .drag-handle { cursor: grab; user-select: none; color: var(--admin-text-dim); font-family: var(--font-mono); font-size: 13px; padding: 4px 2px; } .admin-poll-qrow .idx { width: 22px; height: 22px; border-radius: 3px; border: 1px solid var(--admin-line); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--admin-text-dim); flex-shrink: 0; } .admin-poll-qrow.is-active .idx { background: var(--color-primary); color: #000; border-color: var(--color-primary); } .admin-poll-qrow .info { flex: 1; min-width: 0; } .admin-poll-qrow .text { font-size: 12.5px; color: var(--admin-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-poll-qrow .meta { margin-top: 2px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.5px; color: var(--admin-text-dim); } .admin-poll-qrow .editing-chip { padding: 2px 7px; border-radius: 999px; background: var(--hud-cyan-soft); border: 1px solid var(--color-primary); font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; color: var(--color-primary); flex-shrink: 0; } .admin-poll-add-btn { padding: 10px; border-radius: 4px; border: 1px dashed var(--admin-line); background: transparent; color: var(--admin-text-dim); cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; } .admin-poll-mode { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--admin-line); } .admin-poll-mode .mode-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--admin-text-dim); margin-bottom: 8px; } .admin-poll-mode .mode-row { display: flex; gap: 6px; } .admin-poll-mode button { flex: 1; padding: 8px; border-radius: 4px; border: 1px solid var(--admin-line); background: transparent; color: var(--admin-text); cursor: pointer; font-family: var(--font-ui); } .admin-poll-mode button.is-active { border-color: var(--color-primary); background: var(--hud-cyan-soft); color: var(--color-primary); } .admin-poll-mode .lbl { display: block; font-size: 12px; font-weight: 500; } .admin-poll-mode .sub { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.5px; color: var(--admin-text-dim); margin-top: 2px; } .admin-poll-mode button.is-active .sub { color: var(--color-primary); opacity: 0.8; } /* RIGHT · editor */ .admin-poll-editor { padding: 22px; background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 6px; } .admin-poll-edit-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .admin-poll-edit-head .idx { width: 28px; height: 28px; border-radius: 4px; background: var(--color-primary); color: #000; font-family: var(--font-mono); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .admin-poll-edit-head .head-info { display: flex; flex-direction: column; gap: 2px; } .admin-poll-edit-head .title { font-size: 14px; font-weight: 600; color: var(--admin-text); } .admin-poll-edit-head .kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--admin-text-dim); } .admin-poll-edit-head .progress { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--admin-text-dim); } .admin-poll-field-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--admin-text-dim); margin: 14px 0 6px; text-transform: uppercase; } .admin-poll-page-v5 .admin-poll-q-text { width: 100%; padding: 12px 14px; border-radius: 4px; background: var(--admin-raised); border: 1px solid var(--admin-line); color: var(--admin-text); font-size: 15px; outline: none; box-sizing: border-box; } .admin-poll-page-v5 .admin-poll-q-text:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18); } .admin-poll-crop { margin-top: 12px; padding: 10px 12px; background: var(--admin-raised); border: 1px solid var(--admin-line); border-radius: 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .admin-poll-crop .crop-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--admin-text-dim); } .admin-poll-crop button { padding: 4px 10px; border-radius: 3px; border: 1px solid var(--admin-line); background: transparent; color: var(--admin-text); font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; cursor: pointer; } .admin-poll-crop button.is-active { border-color: var(--color-primary); background: rgba(56, 189, 248, 0.08); color: var(--color-primary); font-weight: 700; } .admin-poll-crop .crop-note { margin-left: auto; font-family: var(--font-mono); font-size: 9px; color: var(--admin-text-dim); } .admin-poll-opts { display: flex; flex-direction: column; gap: 6px; } .admin-poll-opt { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 4px; border: 1px solid var(--admin-line); background: var(--admin-raised); cursor: grab; transition: opacity 0.12s ease; } .admin-poll-opt.is-dragging { opacity: 0.4; } .admin-poll-opt.is-drag-over { border-top-color: var(--color-primary); border-top-width: 2px; } .admin-poll-opt .drag-handle { color: var(--admin-text-dim); font-family: var(--font-mono); font-size: 13px; padding: 2px; } .admin-poll-opt .opt-tag { width: 28px; height: 28px; border-radius: 4px; background: var(--color-primary); color: #000; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; font-weight: 700; flex-shrink: 0; } .admin-poll-opt .opt-img-toggle { flex-shrink: 0; padding: 4px 8px; border-radius: 3px; border: 1px solid var(--admin-line); background: transparent; color: var(--admin-text-dim); cursor: pointer; font-size: 11px; min-width: 44px; } .admin-poll-opt .opt-img-toggle.is-on { border-color: var(--color-primary); color: var(--color-primary); background: rgba(56, 189, 248, 0.08); } .admin-poll-opt input[type="text"] { flex: 1; padding: 6px 10px; border-radius: 3px; border: 1px solid var(--admin-line); background: transparent; color: var(--admin-text); font-size: 12px; outline: none; cursor: text; } .admin-poll-opt input[type="text"]:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18); } .admin-poll-opt .opt-remove { flex-shrink: 0; width: 24px; height: 24px; border: 1px solid var(--admin-line); border-radius: 3px; background: transparent; color: var(--admin-text-dim); cursor: pointer; } .admin-poll-opt .opt-remove:hover { color: #f87171; border-color: #f87171; } .admin-poll-opt-add { margin-top: 8px; padding: 8px 14px; border-radius: 4px; border: 1px dashed var(--admin-line); background: transparent; color: var(--admin-text-dim); cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; } .admin-poll-edit-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--admin-line); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .admin-poll-edit-foot .foot-field { display: inline-flex; align-items: center; gap: 8px; } .admin-poll-edit-foot .foot-field > span { font-family: var(--font-mono); font-size: 11px; color: var(--admin-text-dim); letter-spacing: 1px; } .admin-poll-edit-foot .foot-field select { padding: 8px 10px; border-radius: 4px; background: var(--admin-raised); border: 1px solid var(--admin-line); color: var(--admin-text); font-family: var(--font-mono); font-size: 11px; outline: none; } .admin-poll-edit-foot .foot-check input { accent-color: var(--color-primary); } .admin-poll-edit-foot .foot-spacer { flex: 1; } /* ────── Legacy Polls styles (v4) kept for backward compatibility ────── */ /* ────────────────────────────────────────────────────────────────────────── * Multi-question Poll Builder (v4 prototype admin-poll-spec) * Question queue with drag handle + per-question image upload + run bar. * ────────────────────────────────────────────────────────────────────────── */ .admin-poll-page { display: flex; flex-direction: column; gap: 14px; } .admin-poll-head { padding: 16px 18px; background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 6px; } .admin-poll-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--admin-text-dim); text-transform: uppercase; } .admin-poll-title { font-size: 16px; font-weight: 600; color: var(--admin-text); margin-top: 4px; } .admin-poll-subnote { margin: 8px 0 0; font-size: 12px; color: var(--admin-text-dim); line-height: 1.6; } .admin-poll-queue { display: flex; flex-direction: column; gap: 10px; } .admin-poll-q { background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 6px; overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .admin-poll-q.is-running { border-color: var(--color-primary); box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25); } .admin-poll-q-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--admin-line); background: var(--admin-raised); } .admin-poll-q-handle { cursor: grab; color: var(--admin-text-dim); font-size: 14px; user-select: none; } .admin-poll-q-index { width: 22px; height: 22px; border-radius: 4px; background: var(--color-primary); color: #000; font-family: var(--font-mono); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .admin-poll-q.is-running .admin-poll-q-index { background: var(--color-primary); box-shadow: 0 0 6px var(--color-primary); } .admin-poll-q-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--admin-text-dim); text-transform: uppercase; } .admin-poll-q.is-running .admin-poll-q-label { color: var(--color-primary); } .admin-poll-q-actions { margin-left: auto; display: flex; gap: 4px; } .admin-poll-q-btn { width: 24px; height: 24px; border-radius: 4px; border: 1px solid var(--admin-line); background: transparent; color: var(--admin-text-dim); cursor: pointer; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .admin-poll-q-btn:hover { color: var(--admin-text); border-color: var(--admin-text-dim); } .admin-poll-q-btn.is-danger:hover { color: #f87171; border-color: #f87171; } .admin-poll-q-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; } .admin-poll-q-text { padding: 10px 12px; border-radius: 6px; border: 1px solid var(--admin-line); background: var(--admin-raised); color: var(--admin-text); font-size: 14px; outline: none; } .admin-poll-q-text:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18); } .admin-poll-q-image-row { display: flex; gap: 10px; align-items: stretch; } .admin-poll-q-image-drop { flex: 1; min-height: 70px; border: 1px dashed var(--admin-line); border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px; cursor: pointer; color: var(--admin-text-dim); font-size: 12px; transition: border-color 0.12s ease, color 0.12s ease; } .admin-poll-q-image-drop:hover { border-color: var(--color-primary); color: var(--color-primary); } .admin-poll-q-image-drop small { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.5px; } .admin-poll-q-image-drop img { max-height: 100px; max-width: 100%; border-radius: 4px; object-fit: contain; } .admin-poll-q-opts { display: flex; flex-direction: column; gap: 6px; } .admin-poll-q-opt { display: flex; align-items: center; gap: 8px; } .admin-poll-q-opt-tag { width: 26px; height: 26px; border-radius: 4px; background: var(--admin-raised); color: var(--admin-text); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; flex-shrink: 0; } .admin-poll-q-opt input { flex: 1; padding: 7px 10px; border-radius: 4px; border: 1px solid var(--admin-line); background: transparent; color: var(--admin-text); font-size: 12px; outline: none; } .admin-poll-q-opt input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18); } .admin-poll-queue-actions { display: flex; align-items: center; gap: 10px; } .admin-poll-queue-count { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--admin-text-dim); text-transform: uppercase; margin-left: auto; } .admin-poll-runbar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 6px; } .admin-poll-runbar-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; } .admin-poll-runbar-field > span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--admin-text-dim); text-transform: uppercase; } .admin-poll-runbar-field select { padding: 7px 10px; border-radius: 4px; border: 1px solid var(--admin-line); background: var(--admin-raised); color: var(--admin-text); font-family: var(--font-mono); font-size: 12px; outline: none; } .admin-poll-runbar-spacer { flex: 1; } .admin-poll-status { margin-top: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--admin-text-dim); letter-spacing: 0.5px; } .admin-poll-legacy { display: none; } .admin-ratelimit-export { margin: 0; padding: 12px 14px; border-radius: 6px; border: 1px dashed var(--color-primary); background: var(--admin-raised); font-family: var(--font-mono); font-size: 11px; color: var(--admin-text); white-space: pre-wrap; user-select: all; } .theme-pack-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--admin-text-dim); } .theme-pack-actions-head { margin-left: auto; color: var(--color-primary); cursor: pointer; letter-spacing: 1px; } /* ────────────────────────────────────────────────────────────────────────── * AdminV3 Soft Holo — design-v2 two-column shell. * Sidebar (240px) + main; main has topbar + KPI strip + section stack. * Replaces the single-card hero with a HUD dashboard lockup. * ────────────────────────────────────────────────────────────────────────── */ .admin-dash-grid { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-6); align-items: start; } .admin-dash-sidebar { position: sticky; top: var(--space-4); align-self: start; background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 3rem); } .admin-dash-brand { padding: 18px 22px 16px; border-bottom: 1px solid var(--admin-line); } .admin-dash-brand-hero { display: inline-flex; align-items: baseline; gap: 0.5rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; color: #7dd3fc; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; } .admin-dash-brand-suffix { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; color: var(--color-text-muted); text-transform: uppercase; } .admin-dash-nav { flex: 1; padding: 14px 10px; overflow-y: auto; } .admin-dash-nav-label { padding: 8px 12px 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-muted); } .admin-dash-nav-row { display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 34px; border-radius: 4px; margin-bottom: 2px; color: var(--color-text-bright); text-decoration: none; font-size: 13px; transition: background 120ms ease; /* Reset for