/* =================================================================== Nepox User Portal — shared theme -------------------------------------------------------------------- Single source of truth for colors, spacing, sidebar, and shared components across every page (dashboard, devices, billing, etc). Light + dark mode, brand cyan accents, calm safety semantics. To bump the cache, increment the ?v= param wherever this file is linked. =================================================================== */ :root { /* Calmer, warmer consumer palette — Nest/Ring-inspired */ --bg: #f7f5f1; /* warm off-white page background */ --surface: #ffffff; --surface-2: #faf8f4; /* faint warm wash */ --surface-muted: #f2efe9; --border: #ebe7df; --border-strong: #d8d2c5; --text: #1a1714; /* warm near-black */ --muted: #6b665d; --subtle: #a39d91; /* Status colors — softer, more reassuring */ --safe: #1e7d4b; /* deep calm green */ --safe-bg: #ecf7f0; --safe-glow: rgba(30, 125, 75, 0.12); --watch: #b06900; /* muted amber */ --watch-bg: #fdf6e7; --alert: #b1372f; --alert-bg: #fbeeec; --ink-blue: #2d5d99; /* AI accent */ --ink-blue-bg: #ecf2f9; /* ===== Brand cyan — from your Unreal app login screen ===== */ --brand: #0094c8; /* hero brand color */ --brand-deep: #007aa8; /* darker for hover/press */ --brand-bright: #00a8e0; /* lighter for dark mode */ --brand-bg: rgba(0, 148, 200, 0.10); --brand-bg-soft: rgba(0, 148, 200, 0.05); --brand-glow: rgba(0, 148, 200, 0.22); --brand-on: #ffffff; /* text color on brand-filled surfaces */ --accent-green: var(--safe); --accent-green-bg: var(--safe-bg); --accent-red: var(--alert); --accent-red-bg: var(--alert-bg); --accent-amber: var(--watch); --accent-amber-bg: var(--watch-bg); --accent-blue: var(--ink-blue); --accent-blue-bg: var(--ink-blue-bg); /* Hero gradient stops — vars so dark mode can override cleanly */ --hero-grad-from: #ffffff; --hero-grad-to: #faf8f4; --hero-safe-from: #f3faf5; --hero-safe-to: #e8f4ed; --hero-safe-border: #c8e4d2; --hero-watch-from: #fdf7eb; --hero-watch-to: #faeed6; --hero-watch-border: #ecd9a8; --hero-alert-from: #fbeeec; --hero-alert-to: #f6dcd8; --hero-alert-border: #ebbdb6; --hero-icon-bg: rgba(255, 255, 255, 0.7); --hero-icon-border: rgba(255, 255, 255, 0.9); --hero-divider: rgba(0, 0, 0, 0.05); --upsell-grad-from: var(--brand-bg); --upsell-grad-to: var(--brand-bg-soft); --upsell-border: color-mix(in srgb, var(--brand) 28%, transparent); --shadow-soft: rgba(0, 0, 0, 0.04); --shadow-hover: rgba(0, 0, 0, 0.04); /* Primary button — solid dark in BOTH modes (so it stays readable and visually consistent across light/dark, matching your app aesthetic where action buttons are always dark-on-light or dark-on-dark). */ --btn-primary-bg: #1a1714; /* warm near-black */ --btn-primary-bg-hover: #2a2520; --btn-primary-fg: #ffffff; } /* ===== Dark mode — same layout, inverted aesthetics ===== Auto-applies when: - the OS has dark mode set, AND - the user hasn't manually picked a theme via the toggle Manual override is data-theme="dark" / "light" on , set by the toggle button. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0e0d0c; --surface: #1a1816; --surface-2: #1f1d1a; --surface-muted: #25221f; --border: #2c2a26; --border-strong: #3a3733; --text: #f0ece5; --muted: #a39e93; --subtle: #6b665d; --safe: #4ac98a; --safe-bg: rgba(74, 201, 138, 0.10); --safe-glow: rgba(74, 201, 138, 0.20); --watch: #e0a542; --watch-bg: rgba(224, 165, 66, 0.10); --alert: #e8716a; --alert-bg: rgba(232, 113, 106, 0.10); --ink-blue: #6ba4e6; --ink-blue-bg: rgba(107, 164, 230, 0.12); /* Brand cyan in dark mode — slightly brighter for contrast on dark */ --brand: #1eb4e6; --brand-deep: #0094c8; --brand-bright: #4ec9ec; --brand-bg: rgba(30, 180, 230, 0.14); --brand-bg-soft: rgba(30, 180, 230, 0.06); --brand-glow: rgba(30, 180, 230, 0.30); --brand-on: #0a0a0e; --hero-grad-from: #1f1d1a; --hero-grad-to: #181614; --hero-safe-from: rgba(74, 201, 138, 0.10); --hero-safe-to: rgba(74, 201, 138, 0.04); --hero-safe-border: rgba(74, 201, 138, 0.28); --hero-watch-from: rgba(224, 165, 66, 0.10); --hero-watch-to: rgba(224, 165, 66, 0.04); --hero-watch-border: rgba(224, 165, 66, 0.28); --hero-alert-from: rgba(232, 113, 106, 0.10); --hero-alert-to: rgba(232, 113, 106, 0.04); --hero-alert-border: rgba(232, 113, 106, 0.28); --hero-icon-bg: rgba(255, 255, 255, 0.05); --hero-icon-border: rgba(255, 255, 255, 0.10); --hero-divider: rgba(255, 255, 255, 0.06); --upsell-grad-from: var(--brand-bg); --upsell-grad-to: var(--brand-bg-soft); --upsell-border: color-mix(in srgb, var(--brand) 32%, transparent); --shadow-soft: rgba(0, 0, 0, 0.35); --shadow-hover: rgba(0, 0, 0, 0.45); /* Button stays dark in dark mode — but uses a slightly raised tone so it reads as a tactile surface against the bg. */ --btn-primary-bg: #2a2520; --btn-primary-bg-hover: #3a3530; --btn-primary-fg: #f0ece5; } } /* Manual override — applied when the user clicks the theme toggle. Wins over both :root defaults and the prefers-color-scheme media query because of higher specificity. */ :root[data-theme="dark"] { --bg: #0e0d0c; --surface: #1a1816; --surface-2: #1f1d1a; --surface-muted: #25221f; --border: #2c2a26; --border-strong: #3a3733; --text: #f0ece5; --muted: #a39e93; --subtle: #6b665d; --safe: #4ac98a; --safe-bg: rgba(74, 201, 138, 0.10); --safe-glow: rgba(74, 201, 138, 0.20); --watch: #e0a542; --watch-bg: rgba(224, 165, 66, 0.10); --alert: #e8716a; --alert-bg: rgba(232, 113, 106, 0.10); --ink-blue: #6ba4e6; --ink-blue-bg: rgba(107, 164, 230, 0.12); /* Brand cyan in dark mode — slightly brighter for contrast on dark */ --brand: #1eb4e6; --brand-deep: #0094c8; --brand-bright: #4ec9ec; --brand-bg: rgba(30, 180, 230, 0.14); --brand-bg-soft: rgba(30, 180, 230, 0.06); --brand-glow: rgba(30, 180, 230, 0.30); --brand-on: #0a0a0e; --hero-grad-from: #1f1d1a; --hero-grad-to: #181614; --hero-safe-from: rgba(74, 201, 138, 0.10); --hero-safe-to: rgba(74, 201, 138, 0.04); --hero-safe-border: rgba(74, 201, 138, 0.28); --hero-watch-from: rgba(224, 165, 66, 0.10); --hero-watch-to: rgba(224, 165, 66, 0.04); --hero-watch-border: rgba(224, 165, 66, 0.28); --hero-alert-from: rgba(232, 113, 106, 0.10); --hero-alert-to: rgba(232, 113, 106, 0.04); --hero-alert-border: rgba(232, 113, 106, 0.28); --hero-icon-bg: rgba(255, 255, 255, 0.05); --hero-icon-border: rgba(255, 255, 255, 0.10); --hero-divider: rgba(255, 255, 255, 0.06); --upsell-grad-from: var(--brand-bg); --upsell-grad-to: var(--brand-bg-soft); --upsell-border: color-mix(in srgb, var(--brand) 32%, transparent); --shadow-soft: rgba(0, 0, 0, 0.35); --shadow-hover: rgba(0, 0, 0, 0.45); /* Same as the OS dark block above — manual override sets the same values */ --btn-primary-bg: #2a2520; --btn-primary-bg-hover: #3a3530; --btn-primary-fg: #f0ece5; } body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; letter-spacing: -0.011em; } .mono { font-family: 'JetBrains Mono', monospace; letter-spacing: 0; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; } .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); transition: all 0.15s ease; font-size: 14px; font-weight: 500; padding: 9px 18px; border-radius: 10px; /* inline-flex so SVG icons inside the button sit beside the text instead of wrapping to a second line (e.g. bug report Submit button) */ display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; cursor: pointer; border: 1px solid var(--btn-primary-bg); } .btn-primary:hover { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); transform: translateY(-1px); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-secondary { background: var(--surface); border: 1px solid var(--border); color: var(--text); transition: all 0.15s ease; font-size: 14px; font-weight: 500; padding: 9px 18px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; cursor: pointer; } .btn-secondary:hover { background: var(--surface-2); border-color: var(--border-strong); } .nav-item { color: var(--muted); transition: all 0.15s ease; } .nav-item:hover { color: var(--text); background: var(--surface-2); } .nav-item.active { color: var(--text); background: var(--surface-2); font-weight: 500; } .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; } .badge-success { background: var(--safe-bg); color: var(--safe); } .badge-warn { background: var(--watch-bg); color: var(--watch); } .badge-danger { background: var(--alert-bg); color: var(--alert); } .badge-neutral { background: var(--surface-muted); color: var(--muted); } .badge-info { background: var(--ink-blue-bg); color: var(--ink-blue); } /* ======================== CONSUMER DASHBOARD ======================== */ /* Hero status card — the centerpiece. Communicates safety at a glance. */ .hero-status { position: relative; border-radius: 18px; padding: 32px 32px 28px; overflow: hidden; border: 1px solid var(--border); background: linear-gradient(160deg, var(--hero-grad-from) 0%, var(--hero-grad-to) 100%); } .hero-status.safe { background: linear-gradient(160deg, var(--hero-safe-from) 0%, var(--hero-safe-to) 100%); border-color: var(--hero-safe-border); } .hero-status.watch { background: linear-gradient(160deg, var(--hero-watch-from) 0%, var(--hero-watch-to) 100%); border-color: var(--hero-watch-border); } .hero-status.alert { background: linear-gradient(160deg, var(--hero-alert-from) 0%, var(--hero-alert-to) 100%); border-color: var(--hero-alert-border); } /* Soft decorative glow blob in the corner */ .hero-glow { position: absolute; width: 380px; height: 380px; right: -120px; top: -150px; background: radial-gradient(closest-side, var(--safe-glow), transparent 75%); pointer-events: none; } .hero-status.watch .hero-glow { background: radial-gradient(closest-side, rgba(176, 105, 0, 0.15), transparent 75%); } .hero-status.alert .hero-glow { background: radial-gradient(closest-side, rgba(177, 55, 47, 0.13), transparent 75%); } .hero-icon { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: var(--hero-icon-bg); border: 1px solid var(--hero-icon-border); box-shadow: 0 4px 12px var(--shadow-soft); } .hero-status.safe .hero-icon { color: var(--safe); } .hero-status.watch .hero-icon { color: var(--watch); } .hero-status.alert .hero-icon { color: var(--alert); } .hero-headline { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--text); } .hero-sub { font-size: 15px; color: var(--muted); margin-top: 6px; max-width: 540px; line-height: 1.5; } .hero-quick-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hero-divider); } .hero-stat .hero-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 500; } .hero-stat .hero-stat-value { font-size: 19px; font-weight: 600; margin-top: 4px; letter-spacing: -0.01em; } .hero-stat .hero-stat-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } /* Consumer-style gauge — circular, calm */ .gauge { position: relative; width: 84px; height: 84px; } .gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); } .gauge .gauge-track { stroke: var(--surface-muted); } .gauge .gauge-fill { stroke: var(--safe); transition: stroke-dashoffset 0.6s ease; } .gauge.warn .gauge-fill { stroke: var(--watch); } .gauge.alert .gauge-fill { stroke: var(--alert); } .gauge-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; font-feature-settings: "tnum"; } .gauge-center .gv { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; } .gauge-center .gl { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; } /* Status cards in the second row (Devices, AI, Network) */ .status-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; display: flex; align-items: center; gap: 16px; transition: all 0.2s ease; } .status-card:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: 0 8px 22px var(--shadow-hover); } .status-card .sc-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--muted); flex-shrink: 0; } .status-card.is-safe .sc-icon { background: var(--safe-bg); color: var(--safe); } .status-card.is-watch .sc-icon { background: var(--watch-bg); color: var(--watch); } .status-card.is-alert .sc-icon { background: var(--alert-bg); color: var(--alert); } .status-card .sc-body { flex: 1; min-width: 0; } .status-card .sc-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 500; } .status-card .sc-headline { font-size: 16px; font-weight: 600; margin-top: 2px; letter-spacing: -0.01em; } .status-card .sc-sub { font-size: 13px; color: var(--muted); margin-top: 2px; } /* AI assistant section — softer than tiles, with helper card style */ .ai-section { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .ai-section-head { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ai-section-head .ai-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 10px; } .ai-section-head .ai-spark { width: 28px; height: 28px; border-radius: 9px; /* Brand cyan — AI is the headline Nepox feature, so this is where the brand color earns its strongest placement in the main content area */ background: var(--brand-bg); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; } .ai-meters { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; } @media (max-width: 720px) { .ai-meters { grid-template-columns: 1fr; } } .ai-meter { padding: 20px 22px; border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 8px; } .ai-meter:last-child { border-right: none; } @media (max-width: 720px) { .ai-meter { border-right: none; border-bottom: 1px solid var(--border); } .ai-meter:last-child { border-bottom: none; } } .ai-meter-label { font-size: 12px; color: var(--muted); text-transform: none; letter-spacing: 0; } .ai-meter-headline { font-size: 15px; font-weight: 500; margin-top: 2px; text-align: center; } .ai-meter-detail { font-size: 11px; color: var(--subtle); margin-top: 2px; } .ai-extra-strip { background: var(--brand-bg); color: var(--brand-deep); padding: 12px 22px; font-size: 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--border); } .ai-extra-strip a { color: var(--brand-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } /* Expandable "Show details" disclosure */ .details-toggle { background: var(--surface-2); border-top: 1px solid var(--border); padding: 12px 22px; width: 100%; text-align: left; font-size: 13px; color: var(--muted); display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: background 0.15s; } .details-toggle:hover { background: var(--surface-muted); color: var(--text); } .details-toggle .chev { transition: transform 0.2s ease; } .details-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); } .details-body { display: none; padding: 20px 22px; border-top: 1px solid var(--border); background: var(--surface); } .details-body.open { display: block; } .detail-row { display: grid; grid-template-columns: 120px 1fr 80px; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--border); align-items: center; } .detail-row:last-child { border-bottom: none; } .detail-row .dr-label { font-size: 13px; color: var(--muted); } .detail-row .dr-progress { height: 6px; background: var(--surface-muted); border-radius: 999px; overflow: hidden; position: relative; } .detail-row .dr-fill { height: 100%; background: var(--text); transition: width 0.5s ease; border-radius: 999px; } .detail-row .dr-fill.warn { background: var(--watch); } .detail-row .dr-fill.alert { background: var(--alert); } .detail-row .dr-fill.extra { background: var(--brand); } .detail-row .dr-value { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text); text-align: right; font-feature-settings: "tnum"; } .detail-row .dr-value .dr-budget { color: var(--subtle); } /* Device list rows — friendly, big tap area */ .device-row { padding: 14px 22px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--border); transition: background 0.15s; } .device-row:last-child { border-bottom: none; } .device-row:hover { background: var(--surface-2); } .device-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--surface-muted); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .device-icon.online { background: var(--safe-bg); color: var(--safe); } /* Purchases list */ .purchase-row { padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--border); } .purchase-row:last-child { border-bottom: none; } /* Skeleton + transition unchanged */ .skeleton { background: linear-gradient(90deg, #f5f5f5 25%, #ebebeb 50%, #f5f5f5 75%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: 4px; display: inline-block; color: transparent !important; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } #main-content { opacity: 0; transition: opacity 0.3s ease-in; } #main-content.ready { opacity: 1; } .skeleton-line { display: block; height: 14px; border-radius: 4px; } .skeleton-line.lg { height: 28px; } .skeleton-line.sm { height: 10px; } .stat-num { font-variant-numeric: tabular-nums; letter-spacing: -0.025em; } .live-dot { width: 6px; height: 6px; background: var(--safe); border-radius: 50%; animation: live 2s infinite; } @keyframes live { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ===== Sidebar — section-grouped, accented, ambient ===== */ .sidebar { background: var(--surface); border-right: 1px solid var(--border); position: relative; overflow: hidden; } /* Brand-cyan ambient glow at the top of the sidebar — instantly says "Nepox" before the user even reads the logo. Subtle, not distracting. */ .sidebar::before { content: ""; position: absolute; top: -120px; left: -80px; width: 280px; height: 280px; background: radial-gradient(closest-side, var(--brand-glow), transparent 70%); pointer-events: none; opacity: 0.45; } .sidebar > * { position: relative; z-index: 1; } /* Logo block — small bordered tile to give the logo intentional presence */ .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; } .sidebar-brand img { height: 36px; width: auto; } /* Section header — small caps label above a group of links */ .nav-section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--subtle); font-weight: 600; padding: 14px 18px 6px; } /* Nav item — rounded soft surface, hover lifts subtly */ .nav-item { position: relative; color: var(--muted); transition: all 0.15s ease; border-radius: 10px; padding: 8px 12px; font-size: 13.5px; font-weight: 500; } .nav-item:hover { color: var(--text); background: var(--surface-2); } /* Active item — clear visual anchor with BRAND CYAN. This is the strongest brand identity touch in the chrome — it tells the user "you're inside a Nepox surface" the same way the app's cyan accents do. */ .nav-item.active { color: var(--text); background: var(--brand-bg-soft); font-weight: 600; box-shadow: inset 0 0 0 1px var(--brand-bg); } .nav-item.active::before { content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; background: var(--brand); border-radius: 999px; box-shadow: 0 0 6px var(--brand-glow); } .nav-item.active svg { color: var(--brand); } /* Tiny status dot on the Dashboard item — stays GREEN because it reports actual network safety, not branding. Keeps the dashboard/safety semantic meaning of green intact. */ .nav-item .nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--safe); box-shadow: 0 0 5px var(--safe-glow); margin-left: auto; flex-shrink: 0; } /* "You have packs" pill on Extra Usage — brand cyan, signals ownership */ .nav-pill { margin-left: auto; background: var(--brand-bg); color: var(--brand-deep); border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 600; line-height: 1.4; flex-shrink: 0; } /* User profile card at the bottom — real glass-card treatment */ .user-card { background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%); border: 1px solid var(--border); border-radius: 14px; padding: 12px; display: flex; align-items: center; gap: 10px; transition: all 0.2s ease; } .user-card:hover { border-color: var(--border-strong); box-shadow: 0 4px 14px var(--shadow-soft); } /* Avatar gradient: brand cyan → deeper cyan. Pure brand expression. */ .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); color: var(--brand-on); font-weight: 600; font-size: 13px; letter-spacing: -0.01em; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px var(--brand-glow); } .user-name { font-size: 13px; font-weight: 600; color: var(--text); } .user-email { font-size: 11px; color: var(--muted); } /* Sign-out icon button — stays red on hover (destructive action signal) */ .signout-btn { width: 30px; height: 30px; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s ease; flex-shrink: 0; } .signout-btn:hover { color: var(--alert); background: var(--alert-bg); border-color: color-mix(in srgb, var(--alert) 25%, transparent); } /* Onboarding CTA stays dramatic black */ .cta-tile { background: linear-gradient(135deg, #1a1714 0%, #2a2520 100%); color: white; border-radius: 16px; padding: 2rem; } .step-num { width: 28px; height: 28px; background: rgba(255,255,255,0.1); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; } /* ===== Dark-mode overrides for hardcoded Tailwind colors ===== The dashboard HTML uses some Tailwind classes (text-neutral-500, bg-white, border-neutral-200, etc.) baked in. Tailwind itself doesn't read our theme vars, so for dark mode we explicitly re-tint those classes to match. This is the cleanest way to dark-mode the dashboard without editing every Tailwind class in the markup. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bg-white { background-color: var(--surface) !important; } :root:not([data-theme="light"]) .text-black, :root:not([data-theme="light"]) .hover\:text-black:hover { color: var(--text) !important; } :root:not([data-theme="light"]) .text-neutral-400 { color: var(--subtle) !important; } :root:not([data-theme="light"]) .text-neutral-500 { color: var(--muted) !important; } :root:not([data-theme="light"]) .text-neutral-600 { color: var(--muted) !important; } :root:not([data-theme="light"]) .text-neutral-700 { color: var(--text) !important; } :root:not([data-theme="light"]) .border-neutral-100, :root:not([data-theme="light"]) .border-neutral-200 { border-color: var(--border) !important; } :root:not([data-theme="light"]) .bg-neutral-100 { background-color: var(--surface-2) !important; } :root:not([data-theme="light"]) .bg-neutral-900 { background-color: var(--surface-muted) !important; color: var(--text) !important; } :root:not([data-theme="light"]) .hover\:bg-neutral-100:hover { background-color: var(--surface-2) !important; } :root:not([data-theme="light"]) .hover\:bg-neutral-50:hover { background-color: var(--surface-2) !important; } :root:not([data-theme="light"]) .text-blue-600, :root:not([data-theme="light"]) .hover\:text-blue-900:hover { color: var(--ink-blue) !important; } :root:not([data-theme="light"]) .text-blue-700, :root:not([data-theme="light"]) .text-blue-800, :root:not([data-theme="light"]) .text-blue-900 { color: var(--ink-blue) !important; } :root:not([data-theme="light"]) .bg-blue-50\/40 { background-color: var(--ink-blue-bg) !important; } :root:not([data-theme="light"]) .bg-blue-600 { background-color: var(--ink-blue) !important; } } :root[data-theme="dark"] .bg-white { background-color: var(--surface) !important; } :root[data-theme="dark"] .text-black, :root[data-theme="dark"] .hover\:text-black:hover { color: var(--text) !important; } :root[data-theme="dark"] .text-neutral-400 { color: var(--subtle) !important; } :root[data-theme="dark"] .text-neutral-500 { color: var(--muted) !important; } :root[data-theme="dark"] .text-neutral-600 { color: var(--muted) !important; } :root[data-theme="dark"] .text-neutral-700 { color: var(--text) !important; } :root[data-theme="dark"] .border-neutral-100, :root[data-theme="dark"] .border-neutral-200 { border-color: var(--border) !important; } :root[data-theme="dark"] .bg-neutral-100 { background-color: var(--surface-2) !important; } :root[data-theme="dark"] .bg-neutral-900 { background-color: var(--surface-muted) !important; color: var(--text) !important; } :root[data-theme="dark"] .hover\:bg-neutral-100:hover { background-color: var(--surface-2) !important; } :root[data-theme="dark"] .hover\:bg-neutral-50:hover { background-color: var(--surface-2) !important; } :root[data-theme="dark"] .text-blue-600, :root[data-theme="dark"] .hover\:text-blue-900:hover { color: var(--ink-blue) !important; } :root[data-theme="dark"] .text-blue-700, :root[data-theme="dark"] .text-blue-800, :root[data-theme="dark"] .text-blue-900 { color: var(--ink-blue) !important; } :root[data-theme="dark"] .bg-blue-50\/40 { background-color: var(--ink-blue-bg) !important; } :root[data-theme="dark"] .bg-blue-600 { background-color: var(--ink-blue) !important; } /* ===== Theme toggle button (in header) ===== */ .theme-toggle { width: 36px; height: 36px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s ease; } .theme-toggle:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-bg-soft); } /* Show sun in dark mode, moon in light mode */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } /* Smooth transitions when toggling (don't transition layout though) */ body, .card, .hero-status, .status-card, .ai-section, .nav-item, .badge { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* ===== Theme toggle in sidebar (works on every page) ===== */ .theme-toggle-mini { width: 30px; height: 30px; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s ease; flex-shrink: 0; } .theme-toggle-mini:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-bg-soft); } .theme-toggle-mini .icon-sun { display: none; } .theme-toggle-mini .icon-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle-mini .icon-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle-mini .icon-moon { display: none; } } :root[data-theme="dark"] .theme-toggle-mini .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle-mini .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle-mini .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle-mini .icon-moon { display: block; } /* =================================================================== Shared page components — used across multiple non-dashboard pages =================================================================== */ /* Page heading block — used at the top of every content page */ .page-heading h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); } .page-heading p { font-size: 14px; color: var(--muted); margin-top: 4px; max-width: 640px; line-height: 1.55; } /* Card with subtle hover lift — for clickable cards like plan tiles */ .card-hover { transition: all 0.2s ease; cursor: pointer; } .card-hover:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 8px 24px var(--shadow-hover); } /* Form inputs — themed via vars so they work in light + dark */ .field-label { font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; display: block; } .field-input, input.field, textarea.field, select.field { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 14px; color: var(--text); font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } .field-input:focus, input.field:focus, textarea.field:focus, select.field:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-bg); background: var(--surface); } .field-input::placeholder, input.field::placeholder, textarea.field::placeholder { color: var(--subtle); } .field-help { font-size: 12px; color: var(--muted); margin-top: 6px; } /* Inline error / success messages */ .msg { padding: 10px 14px; border-radius: 10px; font-size: 13px; border: 1px solid transparent; display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; } .msg-error, .error-msg, .error-bg { background: var(--alert-bg); border-color: color-mix(in srgb, var(--alert) 25%, transparent); color: var(--alert); } .msg-success, .success-msg { background: var(--safe-bg); border-color: color-mix(in srgb, var(--safe) 28%, transparent); color: var(--safe); } .msg-info { background: var(--brand-bg); border-color: color-mix(in srgb, var(--brand) 28%, transparent); color: var(--brand-deep); } /* Buttons — variants on top of the existing .btn-primary / .btn-secondary */ .btn-brand { background: var(--brand); color: var(--brand-on); border: 1px solid var(--brand); border-radius: 10px; padding: 10px 20px; font-size: 14px; font-weight: 600; transition: all 0.15s ease; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; box-shadow: 0 2px 6px var(--brand-glow); } .btn-brand:hover { background: var(--brand-deep); border-color: var(--brand-deep); transform: translateY(-1px); } .btn-brand:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-danger { background: var(--alert); color: white; border: 1px solid var(--alert); border-radius: 10px; padding: 9px 18px; font-size: 14px; font-weight: 500; transition: all 0.15s ease; cursor: pointer; } .btn-danger:hover { filter: brightness(1.1); } /* Small status dots — used in plan/product listings */ .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .dot-green { background: var(--safe); box-shadow: 0 0 5px var(--safe-glow); } .dot-gray { background: var(--subtle); } .dot-amber { background: var(--watch); box-shadow: 0 0 5px var(--watch-glow); } .dot-red { background: var(--alert); } .dot-brand { background: var(--brand); box-shadow: 0 0 5px var(--brand-glow); } /* Skeleton line variants (used during loading) */ .skeleton-line { display: block; height: 14px; border-radius: 4px; } .skeleton-line.lg { height: 28px; } .skeleton-line.sm { height: 10px; } /* Divider — use instead of border-neutral-200 on Tailwind divide-y wrappers */ .divide-themed > * + * { border-top: 1px solid var(--border); } /* Tables — themed list/table style for billing/invoices */ table.data { width: 100%; border-collapse: collapse; font-size: 13px; } table.data th { text-align: left; padding: 10px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; background: var(--surface-2); border-bottom: 1px solid var(--border); } table.data td { padding: 12px 14px; color: var(--text); border-bottom: 1px solid var(--border); } table.data tr:last-child td { border-bottom: none; } table.data tr:hover td { background: var(--surface-2); } /* Pack/product card — used on extra-usage, shop, pricing */ .pack-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px; position: relative; transition: all 0.2s ease; display: flex; flex-direction: column; } .pack-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 10px 28px var(--shadow-hover); } .pack-card.featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand-bg), 0 8px 24px var(--brand-glow); } .pack-card.owned { border-color: var(--safe); background: linear-gradient(160deg, var(--surface) 0%, var(--safe-bg) 100%); } /* Top-right badge on pack cards ("Most popular", "Owned") */ .pack-badge-top { position: absolute; top: -10px; right: 16px; background: var(--brand); color: var(--brand-on); padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; box-shadow: 0 2px 8px var(--brand-glow); } .pack-badge-top.owned { background: var(--safe); color: white; box-shadow: 0 2px 8px var(--safe-glow); } /* Resource-line: small "+ 1M tokens" rows inside pack cards */ .resource-line { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; color: var(--text); } /* When used on a wrapper span/div */ .resource-check { width: 18px; height: 18px; border-radius: 50%; background: var(--brand-bg); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .resource-check svg { width: 11px; height: 11px; } /* When used directly on an SVG element (no wrapper) */ svg.resource-check { width: 18px; height: 18px; padding: 3px; background: var(--brand-bg); color: var(--brand); border-radius: 50%; flex-shrink: 0; box-sizing: border-box; } /* Pricing tier banner (e.g. "Choose your plan") */ .tier-banner { background: linear-gradient(135deg, var(--brand-bg) 0%, var(--brand-bg-soft) 100%); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); border-radius: 14px; padding: 18px 22px; color: var(--brand-deep); font-size: 13.5px; line-height: 1.55; } /* Pricing/plan tier card */ .tier-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; position: relative; transition: all 0.2s ease; } .tier-card.featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand-bg); } .tier-card .tier-name { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); } .tier-card .tier-price { font-size: 32px; font-weight: 700; letter-spacing: -0.025em; margin-top: 4px; color: var(--text); } .tier-card .tier-price .interval { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 4px; } /* Auth pages (login, forgot, reset) — centered card on themed bg */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 20px; background: var(--bg); } .auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 32px 28px; box-shadow: 0 12px 40px var(--shadow-soft); } .auth-logo { display: flex; justify-content: center; margin-bottom: 22px; } .auth-logo img { height: 44px; width: auto; } .auth-card h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; text-align: center; color: var(--text); } .auth-card .auth-sub { font-size: 13px; color: var(--muted); text-align: center; margin-top: 4px; margin-bottom: 22px; } .auth-card label { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 14px; margin-bottom: 6px; } .auth-card input { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; font-size: 14px; color: var(--text); font-family: inherit; } .auth-card input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-bg); } .auth-card .auth-submit { width: 100%; margin-top: 22px; background: var(--btn-primary-bg); color: var(--btn-primary-fg); border: 1px solid var(--btn-primary-bg); border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s; } .auth-card .auth-submit:hover { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); transform: translateY(-1px); } .auth-card .auth-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .auth-link { color: var(--brand-deep); font-weight: 500; text-decoration: none; } .auth-link:hover { text-decoration: underline; text-underline-offset: 2px; } .auth-meta { text-align: center; font-size: 13px; color: var(--muted); margin-top: 18px; } /* Progress bar — used on billing usage tiles & similar */ .progress-bar { width: 100%; height: 6px; background: var(--surface-muted); border-radius: 999px; overflow: hidden; } .progress-fill { height: 100%; background: var(--brand); border-radius: 999px; transition: width 0.4s ease; } .progress-fill.safe { background: var(--safe); } .progress-fill.warn { background: var(--watch); } .progress-fill.alert { background: var(--alert); } .progress-fill.extra { background: var(--brand-deep); } /* =================================================================== Modal / Dialog system — used on settings, support, bugreport =================================================================== */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: 20px; animation: modalFade 0.18s ease; } @keyframes modalFade { from { opacity: 0; } to { opacity: 1; } } .modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; width: 100%; max-width: 460px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); overflow: hidden; animation: modalLift 0.2s ease; } @keyframes modalLift { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-card .modal-footer { padding: 16px 24px; background: var(--surface-2); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; } .modal-icon-circle { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .modal-icon-circle.info { background: var(--brand-bg); color: var(--brand); } .modal-icon-circle.danger { background: var(--alert-bg); color: var(--alert); } .modal-icon-circle.warn { background: var(--watch-bg); color: var(--watch); } /* Ghost / tertiary button */ .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 9px 18px; font-size: 14px; font-weight: 500; transition: all 0.15s ease; cursor: pointer; } .btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); } /* Simple horizontal divider */ .divider { height: 1px; background: var(--border); margin: 0; } /* =================================================================== Support page — hero search + quick-tile grid =================================================================== */ main > #main-content > .hero, .hero-support { background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%); border: 1px solid var(--border); border-radius: 18px; padding: 36px; margin-bottom: 32px; text-align: center; } main > #main-content > .hero h2, .hero-support h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 6px; color: var(--text); } main > #main-content > .hero p, .hero-support p { font-size: 14px; color: var(--muted); margin-bottom: 20px; } .hero-search { position: relative; max-width: 540px; margin: 0 auto; } .hero-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; } .hero-search input { width: 100%; padding: 14px 16px 14px 46px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-size: 14px; color: var(--text); transition: all 0.15s; } .hero-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-bg); } .hero-search input::placeholder { color: var(--subtle); } .quick-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; display: block; text-decoration: none; color: inherit; transition: all 0.18s ease; cursor: pointer; } .quick-tile:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 8px 22px var(--shadow-hover); } .quick-tile-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-bg); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; } .quick-tile h3 { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .quick-tile p { font-size: 12.5px; color: var(--muted); line-height: 1.5; } /* =================================================================== Chat/conversation row — used on support, chats list pages =================================================================== */ .chat-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); transition: background 0.15s; cursor: pointer; text-decoration: none; color: inherit; } .chat-row:last-child { border-bottom: none; } .chat-row:hover { background: var(--surface-2); } .chat-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--brand-bg); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* When the chat-icon is inside the AI chats list, the icon often represents the source (user vs assistant) — use surface-2 as a neutral fallback. */ .chat-icon.neutral { background: var(--surface-2); color: var(--muted); } .chat-icon.user { background: var(--brand-bg); color: var(--brand); } /* =================================================================== Bug report / feedback page =================================================================== */ /* Tabs */ .tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 10px; margin-bottom: 18px; width: fit-content; } .tabs .tab { background: transparent; border: none; padding: 8px 16px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; transition: all 0.15s; } .tabs .tab:hover { color: var(--text); } .tabs .tab.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px var(--shadow-soft); } /* Form inputs — bugreport-specific .text-input class. Alias of .field-input. */ .text-input, input.text-input, textarea.text-input { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 14px; color: var(--text); font-family: inherit; resize: vertical; transition: border-color 0.15s, box-shadow 0.15s; } .text-input:focus, input.text-input:focus, textarea.text-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-bg); } .text-input::placeholder { color: var(--subtle); } .field-hint { font-size: 12px; color: var(--muted); margin-top: 6px; } /* Severity radio buttons — clickable tiles */ .severity-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .severity-option { position: relative; display: block; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all 0.15s; } .severity-option:hover { border-color: var(--border-strong); } .severity-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .severity-option.selected { border-color: var(--brand); background: var(--brand-bg-soft); box-shadow: 0 0 0 1px var(--brand-bg); } .severity-option .label { font-size: 13px; font-weight: 600; color: var(--text); } .severity-option .desc { font-size: 11.5px; color: var(--muted); margin-top: 2px; } /* Drop zone for screenshots */ .dropzone { border: 2px dashed var(--border); border-radius: 12px; padding: 26px; text-align: center; background: var(--surface-2); transition: all 0.15s; cursor: pointer; } .dropzone:hover, .dropzone:focus, .dropzone.dragover { border-color: var(--brand); background: var(--brand-bg-soft); outline: none; } .dropzone p { font-size: 13px; color: var(--text); } .dropzone p strong { color: var(--brand-deep); } .dropzone-icon { width: 28px; height: 28px; color: var(--muted); margin: 0 auto 8px; display: block; } /* Preview grid for uploaded screenshots */ .preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 12px; } .preview-grid .preview { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .preview-grid .preview img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; } .preview-grid .preview .filename { padding: 6px 8px; font-size: 10.5px; color: var(--muted); background: var(--surface-2); border-top: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .preview-grid .preview .remove-btn { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.7); color: white; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; } .preview-grid .preview .remove-btn:hover { background: var(--alert); } /* Upload progress bar */ .upload-progress { width: 100%; height: 4px; background: var(--surface-muted); border-radius: 999px; overflow: hidden; margin-top: 12px; } .upload-progress-fill { height: 100%; background: var(--brand); border-radius: 999px; transition: width 0.2s ease; width: 0%; } /* Report row — clickable list item */ .report-row { padding: 14px 18px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; } .report-row:last-child { border-bottom: none; } .report-row:hover { background: var(--surface-2); } /* Bugreport's alternate modal style (.modal-backdrop + .modal + .modal-header). Bugreport uses a PERSISTENT modal that toggles visibility via the .open class. Settings/support create a NEW modal-backdrop on demand and remove it on close — they're always visible the moment they exist. To keep the two patterns from conflicting, we scope the visibility rules below to backdrops marked .modal-persistent. Bugreport's markup has been updated to add that class. */ .modal-backdrop.modal-persistent { display: none; } .modal-backdrop.modal-persistent.open { display: flex; } .modal-backdrop > .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; width: 100%; max-width: 640px; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.25); } .modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); gap: 12px; } .modal-close { width: 32px; height: 32px; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; flex-shrink: 0; } .modal-close:hover { color: var(--text); background: var(--surface-2); border-color: var(--border); } .modal-body { padding: 22px; overflow-y: auto; flex: 1; } /* Toast — bottom-right notification */ .toast { position: fixed; bottom: 24px; right: 24px; padding: 12px 18px; background: var(--text); color: var(--surface); border-radius: 10px; font-size: 13px; font-weight: 500; box-shadow: 0 8px 28px rgba(0,0,0,0.25); opacity: 0; transform: translateY(8px); transition: all 0.2s; pointer-events: none; z-index: 200; } .toast.show { opacity: 1; transform: translateY(0); } .toast.error { background: var(--alert); color: white; } .toast.success { background: var(--safe); color: white; } /* =================================================================== Shop page — product cards + slide-over cart =================================================================== */ /* Product image background — subtle gradient panel behind hardware photos */ .product-img-bg { background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface-muted) 100%); } /* Slide-over cart */ .cart-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0.45); opacity: 0; visibility: hidden; transition: all 0.2s ease; } .cart-overlay.open { opacity: 1; visibility: visible; } .cart-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 420px; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -10px 0 30px rgba(0,0,0,0.18); display: flex; flex-direction: column; z-index: 91; transform: translateX(100%); transition: transform 0.25s ease; } .cart-panel.open { transform: translateX(0); } /* Cart badge dot floating on the cart button — themed */ #cart-count { background: var(--brand); color: var(--brand-on); } /* Generic icon-only ghost button (cart quantity +/-, close X) */ .btn-ghost-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.15s; } .btn-ghost-icon:hover { background: var(--surface); border-color: var(--border-strong); } /* =================================================================== Chats page — chat list + thread view + message bubbles =================================================================== */ /* Vertical scroll area — themed scrollbar */ .scroll-area { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .scroll-area::-webkit-scrollbar { width: 8px; height: 8px; } .scroll-area::-webkit-scrollbar-track { background: transparent; } .scroll-area::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; } .scroll-area::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* Chat list item (left column row) */ .chat-list-item { border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; } .chat-list-item:hover { background: var(--surface-2); } .chat-list-item.selected { background: var(--brand-bg-soft); border-left: 3px solid var(--brand); padding-left: calc(1.25rem - 3px); /* keep text aligned */ } .chat-list-item.selected-for-delete { background: var(--alert-bg); } /* Selection checkbox shown in manage mode */ .chat-list-item .select-checkbox { display: none; width: 16px; height: 16px; accent-color: var(--brand); } .chat-list-item.manage-mode .select-checkbox { display: block; } .chat-list-item.manage-mode .trash-btn { display: none; } /* Trash icon button on each chat (hover-only) */ .trash-btn { background: transparent; border: none; color: var(--subtle); width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: all 0.15s; } .chat-list-item:hover .trash-btn { opacity: 1; } .trash-btn:hover { background: var(--alert-bg); color: var(--alert); } /* Manage-mode toolbar pinned at top of chat list */ .manage-toolbar { padding: 10px 18px; background: var(--surface-2); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* Danger variant of btn-ghost (for trash icon in header) */ .btn-ghost.danger, .btn-ghost-icon.danger { color: var(--muted); } .btn-ghost.danger:hover, .btn-ghost-icon.danger:hover { color: var(--alert); background: var(--alert-bg); border-color: color-mix(in srgb, var(--alert) 22%, transparent); } /* Message bubbles */ .msg-user { background: var(--brand); color: var(--brand-on); padding: 10px 14px; border-radius: 18px 18px 4px 18px; font-size: 14px; } .msg-assistant { background: var(--surface); color: var(--text); border: 1px solid var(--border); padding: 10px 14px; border-radius: 18px 18px 18px 4px; font-size: 14px; } /* AI proposal card — color-coded by risk level */ .proposal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; } .proposal-card.risk-low { border-color: color-mix(in srgb, var(--safe) 35%, transparent); background: var(--safe-bg); } .proposal-card.risk-medium { border-color: color-mix(in srgb, var(--watch) 35%, transparent); background: var(--watch-bg); } .proposal-card.risk-high { border-color: color-mix(in srgb, var(--alert) 35%, transparent); background: var(--alert-bg); } .proposal-card.risk-critical { border-color: color-mix(in srgb, var(--alert) 60%, transparent); background: var(--alert-bg); } /* Capability chip ("Looked up: ...") */ .capability-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 11.5px; color: var(--muted); } /* Markdown content rendering inside message bubbles */ .md { line-height: 1.55; } .md p { margin: 0 0 8px; } .md p:last-child { margin-bottom: 0; } .md a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 2px; } .md code { background: var(--surface-2); border: 1px solid var(--border); padding: 1px 5px; border-radius: 4px; font-size: 0.92em; font-family: 'JetBrains Mono', monospace; } .md pre { background: var(--surface-2); border: 1px solid var(--border); padding: 10px 12px; border-radius: 8px; overflow-x: auto; margin: 8px 0; } .md pre code { background: none; border: none; padding: 0; } .md ul, .md ol { padding-left: 22px; margin: 8px 0; } .md li { margin-bottom: 4px; } .md strong { font-weight: 600; } .msg-user .md a { color: var(--brand-on); } .msg-user .md code { background: rgba(255,255,255,0.18); color: var(--brand-on); border-color: rgba(255,255,255,0.15); } /* =================================================================== Notification bell — comes from notification-bell.js (S3-hosted). The script injects its own