/* ---------------------------------------------------------------------- The Hive Spoofer — Dashboard styles (Phase 4 v3 redesign, [DR-308]) Pixel-matched port of the Claude Design v2 dashboard handoff https://api.anthropic.com/v1/design/h/tjCb0MC_7GZDckhuqdq9og The handoff shipped a React-based prototype (dashboard.jsx + styles/ dashboard.css). This file is the plain-CSS port that lights up the existing index.html — every JS-bound ID and class on the page is preserved; this CSS just retargets the design system onto them. Loading order is critical (defined in index.html ): 1. /static/styles/tokens.css — design tokens (--bg-1, --amber, ...) 2. /static/styles.css — legacy structural rules (specificity `.chip .chip-dot` etc.) 3. /static/styles/dashboard.css — THIS FILE, last so it wins To beat the legacy stylesheet, every rule that re-styles an element the legacy also targets uses MATCHING OR HIGHER specificity. Where the legacy uses `.chip .chip-dot` (0,2,0), this file uses `.chip .chip-dot` too — same specificity, but later in the cascade wins. --------------------------------------------------------------------- */ :root { --bg: var(--bg-1); --bg-elev: var(--bg-2); --bg-elev-2: var(--bg-3); --border: var(--line-1); --text: var(--fg-1); --text-dim: var(--fg-2); --accent: var(--amber); --accent-soft: var(--amber-soft); --danger: var(--red); --ok: var(--green); --radius: var(--r-md); } /* ---- Base ---------------------------------------------------------- */ html, body { background: var(--bg-1); color: var(--fg-1); font-family: var(--font-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: var(--bg-1); } .bg-atmosphere { z-index: 0; } main, header, footer, .img-editor-root { position: relative; z-index: 2; } ::selection { background: var(--amber); color: #000; } /* ---- Topbar (design class names .app-topbar / .app-topbar-inner / .app-nav / .brand-mark / .avatar pair with the legacy classes .topbar / .nav so dashboard.css rules from the design apply natively to the same elements) -------------------------------- */ body .app-topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 56px; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--s-5); gap: var(--s-3); } body .app-topbar.topbar { /* The .topbar/.app-topbar dual class lives on the outer
; the existing body .topbar rules below set sticky/blur/border-bottom. The 56px height comes from .app-topbar-inner; reset the legacy padding so the inner div controls the gutters. */ padding: 0; height: auto; } body .topbar .brand, body .app-topbar .brand { text-decoration: none; } body .brand-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; } body .brand-mark svg, body .brand-mark .hex-icon { width: 26px; height: 26px; } body .nav.app-nav, body .app-nav { gap: var(--s-3); display: flex; align-items: center; } /* Avatar (round amber-gradient circle with 2-letter initials computed by the inline script that watches #navUser). */ body .avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--amber) 0%, var(--amber-deep) 100%); color: #0a0a0a; font-weight: 600; font-size: 11px; letter-spacing: 0.04em; display: grid; place-items: center; font-family: var(--font-body); box-shadow: 0 0 0 1px rgba(255, 179, 0, 0.3) inset; flex-shrink: 0; user-select: none; } /* The legacy .user-pill shows the full username as a long pill. The design replaces it with the round avatar; keep .user-pill in the DOM (app.js writes #navUser.textContent) but hide it visually. */ body .user-pill { display: none !important; } /* ---- Topbar -------------------------------------------------------- */ body .topbar { position: sticky; top: 0; z-index: 50; height: 56px; padding: 0 var(--s-5); background: rgba(8, 8, 11, 0.85); backdrop-filter: saturate(140%) blur(16px); -webkit-backdrop-filter: saturate(140%) blur(16px); border-bottom: 1px solid var(--line-1); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } body .topbar.scrolled { background: rgba(8, 8, 11, 0.92); border-bottom-color: var(--line-2); } body .topbar .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg-0); font-size: 15px; } body .topbar .brand-text { font-size: 15px; font-weight: 600; } body .topbar .hex-icon { width: 26px; height: 26px; } body .topbar .nav { gap: var(--s-3); display: flex; align-items: center; } body .topbar .nav a { font-weight: 500; font-size: 14px; color: var(--fg-2); padding: 6px 10px; border-radius: var(--r-sm); transition: color 150ms var(--ease); } body .topbar .nav a:hover { color: var(--fg-0); background: transparent; text-decoration: none; } /* Credits pill — three-state (default / low / crit). */ body .credits-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 12px; color: var(--fg-1); letter-spacing: 0.02em; transition: all 200ms var(--ease); cursor: pointer; } body .credits-pill:hover { background: var(--bg-3); border-color: var(--line-3); text-decoration: none; } body .credits-pill .credits-label { color: var(--fg-3); } body #navCreditsAmount { color: var(--fg-0); font-weight: 600; } body .credits-pill.is-low { background: rgba(255, 179, 0, 0.1); border-color: rgba(255, 179, 0, 0.3); color: var(--amber); } body .credits-pill.is-low #navCreditsAmount { color: var(--amber); } body .credits-pill.is-crit, body .credits-pill.crit { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); color: var(--red); } body .credits-pill.is-crit #navCreditsAmount, body .credits-pill.crit #navCreditsAmount { color: var(--red); } body .user-pill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-2); font-size: 12px; color: var(--fg-2); font-family: var(--font-mono); } /* ---- Main wrapper -------------------------------------------------- */ body .container { max-width: 1280px; margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-9); background: transparent; } /* ---- Mode tabs (existing .mode-tabs / .mode-tab) ------------------- */ body .mode-tabs { display: flex; gap: 4px; margin-bottom: var(--s-6); border-bottom: 1px solid var(--line-1); position: relative; background: transparent; border-radius: 0; padding: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } body .mode-tabs::-webkit-scrollbar { display: none; } body .mode-tab { padding: 14px 20px; background: transparent; border: 0; color: var(--fg-2); cursor: pointer; font-family: inherit; font-size: 14px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; position: relative; transition: color 200ms var(--ease); white-space: nowrap; border-radius: 0; } body .mode-tab:hover { color: var(--fg-1); background: transparent; } body .mode-tab .mode-tab-label { font-weight: 600; letter-spacing: -0.01em; font-size: 15px; color: inherit; } body .mode-tab .mode-tab-sub { font-size: 11px; color: var(--fg-3); font-family: var(--font-mono); letter-spacing: 0.04em; } body .mode-tab.active { color: var(--fg-0); background: transparent; } body .mode-tab.active .mode-tab-sub { color: var(--amber); } body .mode-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--amber); box-shadow: 0 0 12px var(--amber-glow); } /* ---- View transition ---------------------------------------------- */ body .mode-panel { animation: viewIn 320ms var(--ease-out) both; } @keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ---- Hero (small intro inside each mode panel) --------------------- */ body .hero { margin-bottom: var(--s-5); } body .hero h1 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.025em; line-height: 1.1; font-weight: 600; color: var(--fg-0); margin: 0 0 var(--s-3); } body .hero p { color: var(--fg-2); font-size: 14.5px; max-width: 760px; margin: 0; } body .hero p code { font-family: var(--font-mono); font-size: 12.5px; padding: 2px 6px; border-radius: 4px; background: var(--bg-3); border: 1px solid var(--line-2); color: var(--amber); } /* (DR-822 P5) The Pixel Spoofer .spoof-intro* card CSS was removed — Pixel Spoofer now uses the shared .page-head (DR-822 P3D). Verified 0 .spoof-intro usages across all HTML/JS before removal. */ /* ---- Panel --------------------------------------------------------- */ body .panel { background: var(--bg-2); border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); margin-bottom: var(--s-4); } body .panel .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); flex-wrap: wrap; gap: var(--s-3); } body .panel .panel-head h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg-0); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } body .panel .panel-head h2 .num-badge { font-family: var(--font-mono); font-size: 11px; background: var(--bg-3); border: 1px solid var(--line-2); padding: 2px 7px; border-radius: 999px; color: var(--fg-2); font-weight: 500; } body .panel .panel-head h2 .num-badge.on { background: var(--amber-soft); border-color: rgba(255, 179, 0, 0.3); color: var(--amber); } body .panel .panel-head h2 .muted { font-weight: 400; font-size: 12px; color: var(--fg-3); margin-left: 4px; font-family: var(--font-mono); letter-spacing: 0.02em; } body .panel .panel-head-actions { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; } body .panel .panel-row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; } /* ---- Segmented control (existing .seg / .seg-btn) ------------------ */ body .seg { display: inline-flex; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 3px; gap: 2px; } body .seg .seg-btn { padding: 6px 13px; background: transparent; border: 0; color: var(--fg-2); font-family: inherit; font-size: 12px; font-weight: 500; border-radius: 6px; cursor: pointer; transition: all 200ms var(--ease); } body .seg .seg-btn:hover { color: var(--fg-1); } body .seg .seg-btn.active { background: var(--bg-1); color: var(--fg-0); box-shadow: 0 1px 0 var(--line-2); } body .img-filter-mode { margin-bottom: var(--s-4); padding: var(--s-3) 0 var(--s-4); border-bottom: 1px dashed var(--line-1); } body .img-filter-mode-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; } body .img-filter-mode-label { color: var(--fg-3); font-size: 12px; } body .img-filter-mode-desc { margin-top: 8px; font-size: 12px; color: var(--fg-3); font-family: var(--font-mono); } /* ---- Chips (matches the design's amber-square checkbox exactly) ---- */ /* Specificity strategy: the legacy /static/styles.css uses `.chip .chip-dot` (0,2,0). This file uses `.chip-grid .chip .chip-dot` (0,3,0) so it always wins regardless of cascade ordering. Same trick for .chip-row and label. */ body .chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; } body .chip-grid .chip { position: relative; padding: 11px 14px; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--r-md); cursor: pointer; transition: all 200ms var(--ease); display: flex; flex-direction: column; gap: 3px; text-align: left; font-family: inherit; user-select: none; margin: 0; min-height: auto; /* (Fix 1) — clip the slider thumb's box-shadow ring + the "filter on/off" pill if either pushes past the chip edge on narrow grid cells. min-width:0 lets the inner spans actually wrap their text instead of forcing the chip wider. */ overflow: hidden; min-width: 0; } body .chip-grid .chip:hover { border-color: var(--line-3); background: var(--bg-4); } body .chip-grid .chip.active { border-color: var(--amber); background: var(--amber-soft); } /* Hide the native checkbox; the