/* ======================================================================= BrightNode 暗色主题 · theme.css ----------------------------------------------------------------------- 设计原则： 1) 不改任何浅色 CSS —— 本文件是「纯覆盖层」，用 html[data-theme="dark"] 提高特异性压过原规则，浅色模式零影响。 2) 先重定义两套设计系统（home / login / styles）已有的 CSS 变量， 再把浅色 CSS 里硬编码的色值逐条换成暗色（下半部分由脚本生成）。 3) 色板方向：深灰偏蓝（#111219 ~ #262834），低饱和、柔和护眼。 4) 品牌色在暗底上整体提亮一档（绿 #277a4f → #4bbd80，紫 #7358dc → #9a83f0）。 切换逻辑见 theme.js / 各页 里的内联初始化脚本。 ======================================================================= */ html[data-theme="dark"] { color-scheme: dark; /* ---------- 暗色专用色阶 ---------- */ --d-page: #111219; /* 页面底 */ --d-page-2: #16171f; --d-surface: #1a1c25; /* 卡片 */ --d-surface-2: #20222c; /* 抬升一层 */ --d-surface-3: #262834; /* 轨道 / hover */ --d-glass: rgba(26, 28, 37, 0.86); --d-glass-2: rgba(40, 42, 55, 0.72); --d-ink: #e7e9f2; /* 主文字 */ --d-ink-2: #c4c7d6; /* 次级文字 */ --d-muted: #9ba0b6; --d-soft: #85899e; --d-faint: #6e7288; --d-line: #2b2d39; --d-line-strong: #3c3f4e; --d-solid: #2e303b; /* 浅色下的「墨色实底」在暗色下抬一档 */ --d-solid-2: #383a47; --d-cta: #e9ebf4; /* 主按钮（浅色下是墨底白字，暗色下反过来） */ --d-cta-ink: #14151d; /* ---------- 覆盖 home.css 令牌 ---------- */ --page: var(--d-page); --surface: var(--d-surface); --ink: var(--d-ink); --muted: var(--d-muted); --soft-muted: var(--d-soft); --line: var(--d-line); --green: #4bbd80; --purple: #9a83f0; --blue-soft: rgba(94, 156, 224, 0.16); --lavender-soft: rgba(154, 131, 240, 0.16); --warm-soft: rgba(226, 163, 92, 0.16); --green-soft: rgba(62, 165, 115, 0.16); /* ---------- 覆盖 login.css 令牌 ---------- */ --surface-strong: var(--d-surface-2); --accent: #4bbd80; --accent-hover: #3ea573; --accent-soft: rgba(62, 165, 115, 0.16); --orange: #e8a273; --yellow: #eec063; --error: #f06a60; --danger: #ef5b50; --danger-soft: rgba(240, 106, 96, 0.16); --warn: #e8a24a; --warn-soft: rgba(232, 162, 74, 0.16); --ok: #4bbd80; --ok-soft: rgba(62, 165, 115, 0.16); --acs-accent: #9a83f0; --acs-accent-deep: #8a70e6; --acs-accent-soft: rgba(154, 131, 240, 0.16); --acs-line: rgba(255, 255, 255, 0.1); --acs-muted: var(--d-muted); /* ---------- 覆盖 styles.css 令牌 ---------- */ --bg: var(--d-page); --ink-soft: var(--d-soft); --green-hover: #3ea573; --green-deep: #2f8a5e; --mint: rgba(62, 165, 115, 0.16); --track: #2b2d39; --purple-deep: #8a70e6; --purple-soft: rgba(154, 131, 240, 0.16); --shadow: 0 18px 45px rgba(0, 0, 0, 0.45); --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.38); } /* 全局底色：只靠令牌改不干净的地方（autofill / 选中 / 滚动条 / 内嵌表单） */ html[data-theme="dark"] ::selection { background: rgba(154, 131, 240, 0.34); color: #ffffff; } html[data-theme="dark"] input:-webkit-autofill, html[data-theme="dark"] input:-webkit-autofill:hover, html[data-theme="dark"] input:-webkit-autofill:focus, html[data-theme="dark"] textarea:-webkit-autofill, html[data-theme="dark"] select:-webkit-autofill { -webkit-text-fill-color: var(--d-ink); -webkit-box-shadow: 0 0 0 1000px var(--d-surface-2) inset; caret-color: var(--d-ink); } html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="datetime-local"] { color-scheme: dark; } /* ---------------- 主题切换按钮 ---------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--muted, #676b74); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.18s ease, color 0.18s ease; } .theme-toggle:hover, .theme-toggle:focus-visible { background: rgba(23, 24, 28, 0.06); color: var(--ink, #17181c); outline: none; } html[data-theme="dark"] .theme-toggle { color: var(--d-muted); } html[data-theme="dark"] .theme-toggle:hover, html[data-theme="dark"] .theme-toggle:focus-visible { background: rgba(255, 255, 255, 0.07); color: var(--d-ink); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-auto, .theme-toggle .icon-sun, .theme-toggle .icon-moon { display: none; } .theme-toggle[data-pref="light"] .icon-sun { display: block; } .theme-toggle[data-pref="dark"] .icon-moon { display: block; } .theme-toggle[data-pref="system"] .icon-auto { display: block; } .theme-toggle.is-floating { position: fixed; top: 16px; right: 16px; z-index: 999; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); box-shadow: 0 4px 16px rgba(23, 24, 28, 0.12); } html[data-theme="dark"] .theme-toggle.is-floating { background: rgba(32, 34, 44, 0.72); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } /* ---------------- Cloudflare Turnstile（固定浅色，靠滤镜翻过来） ---------------- */ html[data-theme="dark"] .cf-turnstile { filter: invert(1) hue-rotate(180deg); border-radius: 8px; } /* ======================================================================= 以下为脚本生成的「硬编码色值 → 暗色」覆盖规则 ======================================================================= */ /* ---------------- home.css ---------------- */ html[data-theme="dark"] .site-header { background: var(--d-glass); } html[data-theme="dark"] .site-header.scrolled { border-bottom-color: rgba(0, 0, 0, 0.12); background: var(--d-glass); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08); } html[data-theme="dark"] .brand { color: var(--d-ink); } html[data-theme="dark"] .brand-mark { background: var(--d-solid); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); } html[data-theme="dark"] .primary-nav a { color: var(--d-muted); } html[data-theme="dark"] .primary-nav a::after { background: var(--d-solid); } html[data-theme="dark"] .primary-nav a.active, html[data-theme="dark"] .primary-nav a:hover { color: var(--d-ink); } html[data-theme="dark"] .mail-button:hover { background: var(--d-surface); } html[data-theme="dark"] .mail-badge { border: 2px solid var(--d-page); background: #f06a60; } html[data-theme="dark"] .menu-count { background: #f06a60; } html[data-theme="dark"] .account-trigger:hover { background: var(--d-surface); } html[data-theme="dark"] .account-menu { border: 1px solid var(--d-line-strong); background: var(--d-surface); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.31); } html[data-theme="dark"] .account-menu > a, html[data-theme="dark"] .account-menu > button { color: var(--d-ink); } html[data-theme="dark"] .account-menu > a:hover, html[data-theme="dark"] .account-menu > button:hover { background: var(--d-surface); } html[data-theme="dark"] .account-menu svg { color: var(--d-muted); } html[data-theme="dark"] .menu-separator { background: var(--d-surface); } html[data-theme="dark"] .primary-action, html[data-theme="dark"] .slide-link, html[data-theme="dark"] .dialog-confirm { background: var(--d-solid); } html[data-theme="dark"] .primary-action:hover, html[data-theme="dark"] .slide-link:hover, html[data-theme="dark"] .dialog-confirm:hover { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .hero-visual { background: var(--d-surface); } html[data-theme="dark"] .hero-visual::after { background: var(--d-glass); } html[data-theme="dark"] .visual-meta { color: var(--d-muted); } html[data-theme="dark"] .character-stage::after { background: rgba(0, 0, 0, 0.21); } html[data-theme="dark"] .character-purple { box-shadow: inset 11px 11px 22px rgba(255, 255, 255, 0.07), 0 26px 48px rgba(105, 75, 201, 0.19); } html[data-theme="dark"] .character-black { box-shadow: inset 8px 8px 18px rgba(255, 255, 255, 0.07), 0 24px 43px rgba(0, 0, 0, 0.48); } html[data-theme="dark"] .character-orange { box-shadow: inset 10px 10px 20px rgba(255, 255, 255, 0.07), 0 25px 46px rgba(223, 102, 62, 0.17); } html[data-theme="dark"] .character-yellow { box-shadow: inset 9px 9px 20px rgba(255, 255, 255, 0.07), 0 24px 44px rgba(211, 167, 40, 0.17); } html[data-theme="dark"] .mouth { border-bottom: 3px solid var(--d-line-strong); } html[data-theme="dark"] .carousel-controls button, html[data-theme="dark"] .dialog-close { border: 1px solid var(--d-line); color: var(--d-ink); background: var(--d-glass); } html[data-theme="dark"] .carousel-controls button:hover, html[data-theme="dark"] .dialog-close:hover { background: var(--d-surface); } html[data-theme="dark"] .vpn-art, html[data-theme="dark"] .agent-art, html[data-theme="dark"] .hermes-art { background: var(--d-surface-3); } html[data-theme="dark"] .product-kicker { color: var(--d-muted); } html[data-theme="dark"] .network-core { box-shadow: 0 22px 50px rgba(45, 112, 184, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.07); } html[data-theme="dark"] .network-point { border: 4px solid var(--d-line); } html[data-theme="dark"] .product-window { border: 1px solid var(--d-line-strong); background: var(--d-glass); } html[data-theme="dark"] .product-window > span { background: var(--d-surface-3); } html[data-theme="dark"] .window-row { border-top: 1px solid var(--d-line); } html[data-theme="dark"] .window-row svg { color: var(--d-muted); } html[data-theme="dark"] .window-row em { color: var(--d-muted); } html[data-theme="dark"] .agent-canvas { background: var(--d-glass); } html[data-theme="dark"] .agent-command, html[data-theme="dark"] .hermes-search, html[data-theme="dark"] .hermes-insight { color: var(--d-ink); } html[data-theme="dark"] .agent-command { border: 1px solid var(--d-line); background: var(--d-surface); } html[data-theme="dark"] .agent-flow span { color: var(--d-soft); background: rgba(154, 131, 240, 0.16); } html[data-theme="dark"] .agent-flow span:last-child { color: #4bbd80; background: var(--d-surface-2); } html[data-theme="dark"] .agent-flow b { background: var(--d-surface-3); } html[data-theme="dark"] .agent-note { color: var(--d-muted); } html[data-theme="dark"] .hermes-search, html[data-theme="dark"] .hermes-insight { background: var(--d-glass); } html[data-theme="dark"] .hermes-search svg, html[data-theme="dark"] .hermes-insight svg { color: var(--d-soft); } html[data-theme="dark"] .hermes-grid span { background: var(--d-glass); } html[data-theme="dark"] .carousel-status { color: var(--d-muted); } html[data-theme="dark"] .carousel-progress i { background: var(--d-surface-2); } html[data-theme="dark"] .create-card { color: var(--d-ink); background: rgba(154, 131, 240, 0.16); } html[data-theme="dark"] .discover-card { color: var(--d-ink); background: var(--d-surface-2); } html[data-theme="dark"] .editorial-icon { background: var(--d-glass); } html[data-theme="dark"] .create-card .editorial-icon, html[data-theme="dark"] .discover-card .editorial-icon { background: var(--d-glass); } html[data-theme="dark"] .site-footer { background: var(--d-surface); } html[data-theme="dark"] .footer-bottom { color: var(--d-muted); } html[data-theme="dark"] .coming-soon-dialog { border: 1px solid var(--d-line-strong); background: var(--d-surface); box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48); } html[data-theme="dark"] .coming-soon-dialog::backdrop { background: rgba(0, 0, 0, 0.52); } html[data-theme="dark"] .product-section { background: radial-gradient(circle at 12% 0%, rgba(36, 38, 49, 0.23), transparent 34%), var(--d-surface); } html[data-theme="dark"] .carousel-controls { border: 1px solid var(--d-line-strong); background: var(--d-glass); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.13); } html[data-theme="dark"] .carousel-controls button:hover:not(:disabled) { background: var(--d-surface); } html[data-theme="dark"] .agent-art { background: radial-gradient(circle at 70% 32%, var(--d-glass), transparent 28%), var(--lavender-soft); } html[data-theme="dark"] .hermes-art { background: radial-gradient(circle at 22% 20%, var(--d-glass), transparent 28%), var(--warm-soft); } html[data-theme="dark"] .product-art { background: var(--d-surface-3); } html[data-theme="dark"] .art-shimmer { background: linear-gradient(112deg, transparent 38%, var(--d-glass) 49%, transparent 60%); } html[data-theme="dark"] .product-slide { background: var(--d-surface); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18); } html[data-theme="dark"] .reference-copy { background: var(--d-surface); } html[data-theme="dark"] .product-agent .product-copy { background: var(--d-surface); } html[data-theme="dark"] .brand-mark, html[data-theme="dark"] .login-brand-mark { background: var(--d-surface-2); } html[data-theme="dark"] .product-slide .product-copy.reference-copy { background: var(--d-surface); } html[data-theme="dark"] .product-vpn .product-copy { background: var(--d-surface); } html[data-theme="dark"] .reference-copy > p.product-lead strong { color: var(--d-ink); } html[data-theme="dark"] .feature-text b { color: var(--d-ink); } html[data-theme="dark"] .status-label:not(.available)::after { background: linear-gradient(100deg, transparent 32%, var(--d-glass) 50%, transparent 68%); } html[data-theme="dark"] .product-track:not(.dragging) .product-slide:not(.is-active) { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.11); } html[data-theme="dark"] .carousel-progress button { background: var(--d-line-strong); } html[data-theme="dark"] .carousel-progress button:hover { background: var(--d-surface-3); } html[data-theme="dark"] .product-slide .product-art { background: var(--d-surface); background-color: var(--d-surface-3); } html[data-theme="dark"] .art-caption { color: var(--d-ink); text-shadow: 0 1px 10px rgba(255, 255, 255, 0.07); } html[data-theme="dark"] .product-agent .art-caption { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.50); } html[data-theme="dark"] .product-vpn .art-caption, html[data-theme="dark"] .product-hermes .art-caption { color: var(--d-ink); } html[data-theme="dark"] .ring-a { border: 1px solid var(--d-line); box-shadow: 0 0 26px rgba(255, 255, 255, 0.07), inset 0 0 30px rgba(255, 255, 255, 0.07); } html[data-theme="dark"] .ring-b { border: 1px dashed var(--d-line); } html[data-theme="dark"] .chip-mark { background: var(--d-glass); color: var(--brand, var(--d-ink)); box-shadow: 0 16px 34px rgba(38,16,78,.34), 0 2px 6px rgba(38,16,78,.18), inset 0 0 0 1px rgba(255, 255, 255, 0.07); } html[data-theme="dark"] .orbit-chip b { text-shadow: 0 2px 9px rgba(0, 0, 0, 0.50), 0 0 2px rgba(0, 0, 0, 0.50); } html[data-theme="dark"] .product-hermes .status-label { color: var(--d-ink); background: var(--d-surface); } html[data-theme="dark"] .product-hermes .product-copy { background: var(--d-surface); } html[data-theme="dark"] .product-hermes .feature-icon { color: var(--d-ink); background: var(--d-surface); } html[data-theme="dark"] .about-portal { border: 1px solid var(--d-line-strong); background: var(--d-glass); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); } html[data-theme="dark"] .about-portal:hover { box-shadow: 0 20px 46px rgba(0, 0, 0, 0.33); } html[data-theme="dark"] .portal-lens { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 6px 18px rgba(0, 0, 0, 0.50); } html[data-theme="dark"] .portal-ring { border: 1px dashed var(--d-line-strong); } html[data-theme="dark"] .portal-copy b { color: var(--d-ink); } html[data-theme="dark"] .portal-copy span { color: var(--d-muted); } html[data-theme="dark"] .portal-arrow { color: var(--d-soft); } html[data-theme="dark"] .chapter-bridge { background: linear-gradient(180deg, var(--d-surface) 0%, var(--d-surface) 52%, var(--d-surface) 100%); } html[data-theme="dark"] .chapter-bridge-title { color: var(--d-ink); } html[data-theme="dark"] .bridge-descend { border: 1px solid var(--d-line-strong); background: var(--d-glass); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.13); } html[data-theme="dark"] .bridge-descend:hover { box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24); } html[data-theme="dark"] .descend-disc { background: var(--d-solid); } html[data-theme="dark"] .descend-disc::after { border: 1px solid var(--d-line-strong); } html[data-theme="dark"] .descend-copy b { color: var(--d-ink); } html[data-theme="dark"] .descend-copy small { color: var(--d-soft); } html[data-theme="dark"] .chapter-card { border: 1px solid var(--d-line-strong); background: radial-gradient(122% 152% at 100% 2%, var(--tint) 0%, var(--d-glass) 66%), linear-gradient(150deg, var(--d-surface) 0%, var(--tint-2) 58%, var(--tint) 128%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 26px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08); } html[data-theme="dark"] .chapter-card:hover { border-color: rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 20px 40px rgba(0, 0, 0, 0.24), 0 3px 8px rgba(0, 0, 0, 0.11); } html[data-theme="dark"] .chapter-sheen { background: linear-gradient(100deg, var(--d-glass), var(--d-glass), var(--d-glass)); } html[data-theme="dark"] .chapter-icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 7px 16px var(--glow); } html[data-theme="dark"] .chapter-card:hover .chapter-icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 12px 22px var(--glow); } html[data-theme="dark"] .chapter-body b { color: var(--d-ink); } html[data-theme="dark"] .chapter-body small { color: var(--d-muted); } html[data-theme="dark"] .chapter-go { background: var(--d-surface); color: var(--d-ink-2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.20); } html[data-theme="dark"] .chapter-status { background: var(--d-glass); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); color: var(--d-ink-2); } html[data-theme="dark"] .chapter-tags span { background: var(--d-glass); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10); color: var(--d-muted); } html[data-theme="dark"] .ann-popup-layer { background: rgba(0, 0, 0, 0.60); } html[data-theme="dark"] .ann-popup { background: var(--d-surface); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.50); } html[data-theme="dark"] .ann-popup-badge { background: rgba(154, 131, 240, 0.16); color: #8a70e6; } html[data-theme="dark"] .ann-popup h2 { color: var(--d-ink); } html[data-theme="dark"] .ann-popup-body { color: var(--d-muted); } html[data-theme="dark"] .ann-btn.ghost { background: var(--d-surface); color: var(--d-muted); } html[data-theme="dark"] .ann-btn.ghost:hover { background: var(--d-surface-2); } html[data-theme="dark"] .ann-btn.primary { background: #9a83f0; } @media (hover: hover) { html[data-theme="dark"] .product-slide:hover { box-shadow: 0 18px 48px rgba(0, 0, 0, 0.20); } html[data-theme="dark"] .editorial-card:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22); } } /* ---------------- login.css ---------------- */ html[data-theme="dark"] { background: var(--d-page); } html[data-theme="dark"] body { background: radial-gradient(ellipse 58% 72% at -4% 70%, rgba(35, 39, 43, 0.30) 0%, rgba(38, 41, 46, 0.13) 42%, transparent 73%), radial-gradient(ellipse 55% 70% at 103% 28%, rgba(38, 37, 50, 0.27) 0%, rgba(40, 39, 50, 0.13) 45%, transparent 74%), radial-gradient(ellipse 44% 48% at 49% 18%, rgba(39, 38, 50, 0.16) 0%, transparent 72%), radial-gradient(ellipse 72% 42% at 49% 109%, rgba(36, 40, 44, 0.25) 0%, var(--d-glass) 48%, transparent 76%), linear-gradient(145deg, var(--d-page) 0%, var(--d-surface-2) 46%, var(--d-surface-2) 100%); } html[data-theme="dark"] .character-stage::after { background: rgba(0, 0, 0, 0.15); } html[data-theme="dark"] .character-purple { box-shadow: inset 12px 12px 24px rgba(255, 255, 255, 0.07), 0 30px 55px rgba(105, 75, 201, 0.2); } html[data-theme="dark"] .character-black { background: linear-gradient(145deg, var(--d-solid-2), var(--d-solid)); box-shadow: inset 8px 8px 18px rgba(255, 255, 255, 0.07), 0 28px 48px rgba(0, 0, 0, 0.50); } html[data-theme="dark"] .character-orange { box-shadow: inset 10px 10px 20px rgba(255, 255, 255, 0.07), 0 28px 50px rgba(223, 102, 62, 0.17); } html[data-theme="dark"] .character-yellow { box-shadow: inset 9px 9px 20px rgba(255, 255, 255, 0.07), 0 26px 48px rgba(211, 167, 40, 0.17); } html[data-theme="dark"] .mouth { border-bottom: 3px solid var(--d-line-strong); } html[data-theme="dark"] .character-stage.is-error .mouth { border-top: 3px solid var(--d-line-strong); } html[data-theme="dark"] .auth-card { border: 1px solid var(--d-line-strong); background: var(--d-glass); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.09); } html[data-theme="dark"] .auth-emblem { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.29); } html[data-theme="dark"] .auth-tab.active { background: var(--d-surface); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); } html[data-theme="dark"] .tool-thanks-heading h2 { color: var(--d-ink); } html[data-theme="dark"] .tool-list { border: 1px solid var(--d-line-strong); background: var(--d-glass); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); } html[data-theme="dark"] .tool-logo-img { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.13); } html[data-theme="dark"] .tool-item:hover, html[data-theme="dark"] .tool-item:focus-visible { color: var(--d-ink); background: var(--d-glass); box-shadow: 0 7px 18px rgba(0, 0, 0, 0.15); } html[data-theme="dark"] .tool-openai:hover, html[data-theme="dark"] .tool-openai:focus-visible { color: var(--d-ink-2); } html[data-theme="dark"] .tool-codex:hover, html[data-theme="dark"] .tool-codex:focus-visible { color: var(--d-soft); } html[data-theme="dark"] .tool-apple:hover, html[data-theme="dark"] .tool-apple:focus-visible { color: var(--d-ink); } html[data-theme="dark"] .tool-github:hover, html[data-theme="dark"] .tool-github:focus-visible { color: var(--d-ink); } html[data-theme="dark"] .tool-claude:hover, html[data-theme="dark"] .tool-claude:focus-visible { color: var(--d-soft); } html[data-theme="dark"] .tool-workbuddy:hover, html[data-theme="dark"] .tool-workbuddy:focus-visible { color: var(--d-ink); } html[data-theme="dark"] .field-label { color: var(--d-ink); } html[data-theme="dark"] .field-control { background: var(--d-surface); } html[data-theme="dark"] .field-control:focus-within { background: var(--d-surface); } html[data-theme="dark"] .field-control > svg { color: var(--d-soft); } html[data-theme="dark"] .field-control input::placeholder { color: var(--d-soft); } html[data-theme="dark"] .password-toggle { color: var(--d-muted); } html[data-theme="dark"] .remember-option { color: var(--d-ink-2); } html[data-theme="dark"] .registration-access { border: 1px solid var(--d-line); color: var(--d-ink); background: var(--d-surface); } html[data-theme="dark"] .registration-access-icon { color: #4bbd80; background: rgba(62, 165, 115, 0.16); } html[data-theme="dark"] .registration-access strong { color: var(--d-ink); } html[data-theme="dark"] .registration-access small { color: var(--d-muted); } html[data-theme="dark"] .registration-access-status { color: #4bbd80; background: rgba(62, 165, 115, 0.16); } html[data-theme="dark"] .registration-access.valid { border-color: var(--d-surface-2); background: var(--d-surface); } html[data-theme="dark"] .registration-access.valid .registration-access-icon, html[data-theme="dark"] .registration-access.valid .registration-access-status { color: #4bbd80; background: rgba(62, 165, 115, 0.16); } html[data-theme="dark"] .password-requirements { color: var(--d-soft); } html[data-theme="dark"] .password-requirements .valid { color: #4bbd80; } html[data-theme="dark"] .password-requirements .valid::before { border-color: #4bbd80; background: #4bbd80; } html[data-theme="dark"] .password-requirements .invalid { color: var(--d-soft); } html[data-theme="dark"] .verification-block { border: 1px solid var(--d-line-strong); background: var(--d-page); } html[data-theme="dark"] .verification-heading { color: var(--d-ink-2); } html[data-theme="dark"] .verification-heading small { color: var(--d-soft); } html[data-theme="dark"] .auth-footnote { color: var(--d-soft); } html[data-theme="dark"] .login-toast { background: rgba(0, 0, 0, 0.60); } html[data-theme="dark"] .admin-heading h1 { color: var(--d-ink); } html[data-theme="dark"] .admin-heading > div > span { color: var(--d-muted); } html[data-theme="dark"] .admin-primary-button { background: var(--d-solid); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.31); } html[data-theme="dark"] .invite-result, html[data-theme="dark"] .invite-list-section { border: 1px solid var(--d-line-strong); background: var(--d-surface); box-shadow: 0 14px 45px rgba(0, 0, 0, 0.13); } html[data-theme="dark"] .invite-result-heading span { color: #4bbd80; } html[data-theme="dark"] .invite-result-heading small { color: var(--d-soft); } html[data-theme="dark"] .invite-code-row code { border: 1px solid var(--d-line); background: var(--d-page); color: var(--d-ink); } html[data-theme="dark"] .copy-invite-button, html[data-theme="dark"] .refresh-button { border: 1px solid var(--d-line); color: var(--d-ink-2); background: var(--d-surface); } html[data-theme="dark"] .copy-link-button { color: #4bbd80; } html[data-theme="dark"] .invite-list-heading { border-bottom: 1px solid var(--d-line-strong); } html[data-theme="dark"] .invite-row { border-bottom: 1px solid var(--d-line-strong); } html[data-theme="dark"] .invite-row-icon { color: var(--d-muted); background: var(--d-surface-2); } html[data-theme="dark"] .user-quota-row label { color: var(--d-muted); } html[data-theme="dark"] .quota-input { border: 1px solid var(--d-line); color: var(--d-ink); background: var(--d-surface); } html[data-theme="dark"] .invite-row-main strong { color: var(--d-ink); } html[data-theme="dark"] .invite-row-main small { color: var(--d-soft); } html[data-theme="dark"] .invite-state.available { color: #4bbd80; background: rgba(62, 165, 115, 0.16); } html[data-theme="dark"] .invite-state.used { color: var(--d-muted); background: var(--d-surface-2); } html[data-theme="dark"] .revoke-button { color: #ef5b50; } html[data-theme="dark"] .revoke-button.muted { color: var(--d-soft); } html[data-theme="dark"] .revoke-button.muted.confirming, html[data-theme="dark"] .revoke-button.confirming { color: #ef5b50; } html[data-theme="dark"] .invite-empty { color: var(--d-soft); } html[data-theme="dark"] .login-brand-mark, html[data-theme="dark"] .auth-emblem { background: var(--d-page); } html[data-theme="dark"] .capslock-note { color: #e8a24a; } html[data-theme="dark"] .password-strength { color: var(--d-muted); } html[data-theme="dark"] .password-strength .strength-track { background: var(--d-surface-2); } html[data-theme="dark"] .password-strength .strength-fill { background: var(--d-surface-2); } html[data-theme="dark"] .password-strength[data-level="weak"] .strength-label { color: #f06a60; } html[data-theme="dark"] .password-strength[data-level="fair"] .strength-label { color: #e8a24a; } html[data-theme="dark"] .password-strength[data-level="good"] .strength-label, html[data-theme="dark"] .password-strength[data-level="strong"] .strength-label { color: #4bbd80; } html[data-theme="dark"] .registration-access.unavailable { border-color: var(--d-surface-3); background: var(--d-surface); } html[data-theme="dark"] .registration-access.unavailable .registration-access-icon, html[data-theme="dark"] .registration-access.unavailable .registration-access-status { color: #e8a24a; background: rgba(232, 162, 74, 0.16); } html[data-theme="dark"] .account-identity { border: 1px solid var(--d-line); background: var(--d-surface); } html[data-theme="dark"] .account-identity-icon { color: #4bbd80; background: rgba(62, 165, 115, 0.16); } html[data-theme="dark"] .account-identity-main strong { color: var(--d-ink); } html[data-theme="dark"] .account-identity-main small { color: var(--d-muted); } html[data-theme="dark"] .account-identity-role { color: #4bbd80; background: rgba(62, 165, 115, 0.16); } html[data-theme="dark"] .security-row { border: 1px solid var(--d-line-strong); background: var(--d-surface); } html[data-theme="dark"] .security-icon { color: #4bbd80; background: rgba(62, 165, 115, 0.16); } html[data-theme="dark"] .security-main strong { color: var(--d-ink); } html[data-theme="dark"] .security-main small { color: var(--d-muted); } html[data-theme="dark"] .submit-button.logout-all { color: #ef5b50; background: var(--d-surface); } html[data-theme="dark"] .submit-button.logout-all:hover:not(:disabled) { background: var(--d-surface-2); } html[data-theme="dark"] .admin-stat { border: 1px solid var(--d-line-strong); background: var(--d-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.09); } html[data-theme="dark"] .admin-stat-value { color: var(--d-ink); } html[data-theme="dark"] .admin-stat-value.available { color: #4bbd80; } html[data-theme="dark"] .admin-stat-value.used { color: var(--d-soft); } html[data-theme="dark"] .admin-stat-label { color: var(--d-muted); } html[data-theme="dark"] .revoke-button.confirming { color: #ef5b50; background: var(--d-surface); } html[data-theme="dark"] .tab-count { background: #f06a60; } html[data-theme="dark"] .message-item { background: var(--d-glass); } html[data-theme="dark"] .message-item.unread { border-color: var(--d-surface-3); background: var(--d-surface); } html[data-theme="dark"] .message-item.clickable:hover, html[data-theme="dark"] .message-item.clickable:focus-visible { border-color: var(--d-surface-3); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); } html[data-theme="dark"] .dot { background: #f06a60; } html[data-theme="dark"] .kind-option { background: var(--d-glass); } html[data-theme="dark"] .thread { background: var(--d-glass); } html[data-theme="dark"] .thread-item { background: var(--d-surface); } html[data-theme="dark"] .thread-item.admin { background: var(--d-surface); } html[data-theme="dark"] .admin-tab.active { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); } html[data-theme="dark"] .admin-secondary-button:hover { border-color: var(--d-surface-3); background: var(--d-surface); } html[data-theme="dark"] .ticket-row:hover, html[data-theme="dark"] .ticket-row:focus-visible { border-color: var(--d-surface-3); } html[data-theme="dark"] .ticket-row.unread { background: var(--d-surface); } html[data-theme="dark"] .unread-dot { background: #f06a60; } html[data-theme="dark"] .admin-count { background: #f06a60; } html[data-theme="dark"] .admin-strip { border: 1px solid var(--d-line); background: var(--d-surface); } html[data-theme="dark"] .admin-strip-links a:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22); } html[data-theme="dark"] .admin-page { background: radial-gradient(900px 420px at 78% -8%, rgba(115, 88, 220, 0.10) 0%, rgba(115, 88, 220, 0) 62%), radial-gradient(700px 380px at 8% 0%, rgba(115, 88, 220, 0.05) 0%, rgba(115, 88, 220, 0) 55%), var(--d-surface); } html[data-theme="dark"] .acs-sidebar { background: var(--d-surface); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.13); } html[data-theme="dark"] .acs-brand { color: var(--d-ink); } html[data-theme="dark"] .acs-nav-item { color: var(--d-ink-2); } html[data-theme="dark"] .acs-nav-item:hover { background: var(--d-surface); color: var(--d-ink); } html[data-theme="dark"] .acs-foot { background: linear-gradient(160deg, var(--d-surface-2) 0%, var(--d-surface-2) 70%); } html[data-theme="dark"] .acs-foot strong { color: var(--d-ink); } html[data-theme="dark"] .acs-foot small { color: var(--d-soft); } html[data-theme="dark"] .acs-hero { background: linear-gradient(120deg, var(--d-surface) 30%, var(--d-surface) 78%, var(--d-surface-2) 100%); } html[data-theme="dark"] .acs-orb-a { background: radial-gradient(circle at 32% 30%, var(--d-surface-3) 0%, #a488f5 45%, #9a83f0 100%); } html[data-theme="dark"] .acs-orb-b { background: radial-gradient(circle at 30% 30%, var(--d-surface-2) 0%, var(--d-surface-3) 60%, #8f74e4 100%); } html[data-theme="dark"] .acs-hero-text h1 { color: var(--d-ink); } html[data-theme="dark"] .admin-page .admin-tabs { background: var(--d-surface); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.13); } html[data-theme="dark"] .admin-page .admin-tab { color: var(--d-ink-2); } html[data-theme="dark"] .admin-page .admin-tab:hover { color: var(--d-ink); } html[data-theme="dark"] .admin-page .admin-tab.active { background: linear-gradient(135deg, #a58cff 0%, var(--acs-accent) 70%); } html[data-theme="dark"] .acs-primary { background: linear-gradient(135deg, #a58cff 0%, var(--acs-accent) 70%); } html[data-theme="dark"] .acs-timeline::before { background: var(--d-surface-2); } html[data-theme="dark"] .acs-when strong { color: var(--d-ink); } html[data-theme="dark"] .acs-when span { color: var(--d-faint); } html[data-theme="dark"] .acs-dot { background: var(--d-surface); } html[data-theme="dark"] .acs-card { background: var(--d-surface); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.11); } html[data-theme="dark"] .acs-card.archived { background: var(--d-surface); } html[data-theme="dark"] .acs-card.archived .acs-card-title { color: var(--d-soft); } html[data-theme="dark"] .acs-tag.pinned { background: var(--d-surface-2); color: var(--d-soft); } html[data-theme="dark"] .acs-tag.popup { background: var(--d-surface-2); color: var(--d-soft); } html[data-theme="dark"] .acs-tag.target { background: var(--d-surface-2); color: var(--d-ink-2); } html[data-theme="dark"] .pts-gift-card { background: var(--d-surface); } html[data-theme="dark"] .pts-gift-form .quota-kind { background: var(--d-surface); } html[data-theme="dark"] #gift-user-field .field-control select { color: var(--d-ink); } html[data-theme="dark"] .pts-gift-notifications .admin-check strong { color: var(--d-ink); } html[data-theme="dark"] .acs-badge { color: var(--d-soft); } html[data-theme="dark"] .acs-badge.ok { color: #4bbd80; } html[data-theme="dark"] .acs-badge.off::before { background: var(--d-surface-3); } html[data-theme="dark"] .acs-action { color: var(--d-soft); } html[data-theme="dark"] .acs-action:hover { background: var(--d-surface); } html[data-theme="dark"] .acs-card-title { color: var(--d-ink); } html[data-theme="dark"] .acs-card-body { color: var(--d-ink-2); } html[data-theme="dark"] .acs-card-meta { color: var(--d-faint); } html[data-theme="dark"] .acs-backdrop { background: rgba(0, 0, 0, 0.51); } html[data-theme="dark"] .acs-drawer { background: var(--d-surface); box-shadow: -24px 0 60px rgba(0, 0, 0, 0.40); } html[data-theme="dark"] .acs-drawer-close { background: var(--d-surface-2); color: var(--d-ink-2); } html[data-theme="dark"] .acs-drawer-close:hover { background: var(--d-surface); color: var(--d-ink); } html[data-theme="dark"] .acs-counter { color: var(--d-faint); } html[data-theme="dark"] .acs-publish-setting { background: var(--d-surface); } html[data-theme="dark"] .acs-setting-title { color: var(--d-ink); } html[data-theme="dark"] .acs-publish-setting .admin-check strong { color: var(--d-ink); } html[data-theme="dark"] .acs-drawer-foot { background: var(--d-surface); } html[data-theme="dark"] .acs-drawer .admin-primary-button, html[data-theme="dark"] .admin-page .admin-primary-button { background: linear-gradient(135deg, #a58cff 0%, var(--acs-accent) 70%); } html[data-theme="dark"] .admin-page .admin-secondary-button { background: var(--d-surface); color: var(--d-ink-2); } html[data-theme="dark"] .messages-page { background: radial-gradient(900px 420px at 78% -8%, rgba(115, 88, 220, 0.10) 0%, rgba(115, 88, 220, 0) 62%), radial-gradient(700px 380px at 8% 0%, rgba(115, 88, 220, 0.05) 0%, rgba(115, 88, 220, 0) 55%), var(--d-surface); } html[data-theme="dark"] .messages-page .account-tabs { background: var(--d-surface); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.13); } html[data-theme="dark"] .messages-page .auth-tab { color: var(--d-ink-2); } html[data-theme="dark"] .messages-page .auth-tab.active { background: linear-gradient(135deg, #a58cff 0%, var(--acs-accent) 70%); } html[data-theme="dark"] .acs-badge.unread::before { background: #a58cff; } html[data-theme="dark"] .acs-card.unread { border-color: var(--d-surface-2); } html[data-theme="dark"] .messages-page .message-item { background: var(--d-surface); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.11); } html[data-theme="dark"] .messages-page .message-item.unread { border-color: var(--d-surface-2); background: var(--d-surface); } html[data-theme="dark"] .messages-page .message-item.clickable:hover, html[data-theme="dark"] .messages-page .message-item.clickable:focus-visible { border-color: var(--d-surface-3); } html[data-theme="dark"] .admin-page .ticket-detail, html[data-theme="dark"] .messages-page .ticket-detail { background: var(--d-surface); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.11); } html[data-theme="dark"] .quota-total strong { color: var(--d-ink); } html[data-theme="dark"] .quota-total small { color: var(--d-faint); } html[data-theme="dark"] .quota-editor { border: 1px dashed var(--d-line); background: var(--d-surface); } html[data-theme="dark"] .acs-delete-user { border: 1px solid var(--d-line); color: var(--d-soft); background: var(--d-surface); } html[data-theme="dark"] .acs-delete-user:hover { border-color: var(--d-surface-3); } html[data-theme="dark"] .acs-confirm-dialog { color: var(--d-ink); background: var(--d-surface); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.44); } html[data-theme="dark"] .acs-confirm-dialog::backdrop { background: rgba(0, 0, 0, 0.51); } html[data-theme="dark"] .acs-confirm-eyebrow { color: var(--d-soft); } html[data-theme="dark"] .acs-confirm-target { background: var(--d-surface); } html[data-theme="dark"] .invite-copy { border: 1px solid var(--acs-line, var(--d-line)); background: var(--d-surface); color: var(--d-ink-2); } html[data-theme="dark"] .invite-copy:hover { background: var(--d-surface); color: var(--d-ink); } html[data-theme="dark"] .invite-copy.copied { background: rgba(62, 165, 115, 0.13); color: #4bbd80; } html[data-theme="dark"] .back-link { color: var(--d-ink); border: 1px solid var(--d-line-strong); background: var(--d-glass); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.11); } html[data-theme="dark"] .back-link svg { color: var(--d-muted); } html[data-theme="dark"] .back-link:hover { background: var(--d-surface); border-color: rgba(0, 0, 0, 0.33); } html[data-theme="dark"] .pts-hero-side { background: var(--d-glass); } html[data-theme="dark"] .pts-seoul { color: #9a83f0; } html[data-theme="dark"] .pts-hero-time { color: var(--d-ink); } html[data-theme="dark"] .pts-hero-side small { color: var(--d-soft); } html[data-theme="dark"] .mg-token { background: radial-gradient(circle at 32% 26%, var(--d-surface) 0%, var(--d-glass) 58%), linear-gradient(150deg, var(--d-surface-2) 0%, var(--d-surface-2) 52%, var(--d-surface-3) 100%); box-shadow: 0 6px 16px rgba(210, 28, 80, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.07); } html[data-theme="dark"] .pts-card { border: 1px solid var(--d-line-strong); background: linear-gradient(180deg, var(--d-glass) 0%, var(--d-glass) 100%); } html[data-theme="dark"] .pts-balance-head h2 { color: var(--d-ink); } html[data-theme="dark"] .pts-balance-head small { color: var(--d-soft); } html[data-theme="dark"] .pts-balance-num strong { color: var(--d-ink); } html[data-theme="dark"] .pts-balance-num span { color: var(--d-soft); } html[data-theme="dark"] .pts-balance-sub { color: var(--d-muted); } html[data-theme="dark"] .pts-balance-sub b { color: var(--d-ink); } html[data-theme="dark"] .pts-checkin-hint { color: var(--d-soft); } html[data-theme="dark"] .pts-quota h3 { color: var(--d-ink-2); } html[data-theme="dark"] .pts-quota h3 svg { color: #9a83f0; } html[data-theme="dark"] .pts-quota-num strong { color: var(--d-ink); } html[data-theme="dark"] .pts-quota-num span { color: var(--d-soft); } html[data-theme="dark"] .pts-bar { background: var(--d-surface); } html[data-theme="dark"] .pts-bar span { background: linear-gradient(90deg, #9a83f0 0%, #9b83ec 100%); } html[data-theme="dark"] .pts-bar.perm span { background: linear-gradient(90deg, #4bbd80 0%, #4fa87a 100%); } html[data-theme="dark"] .pts-quota-sub { color: var(--d-muted); } html[data-theme="dark"] .pts-quota-sub b { color: var(--d-ink); } html[data-theme="dark"] .pts-quota-foot { color: var(--d-soft); } html[data-theme="dark"] .pts-quota-foot svg { color: var(--d-faint); } html[data-theme="dark"] .pts-section-head h3 { color: var(--d-ink); } html[data-theme="dark"] .pts-section-head h3 svg { color: #9a83f0; } html[data-theme="dark"] .pts-section-head small { color: var(--d-soft); } html[data-theme="dark"] .pts-cal-head { color: var(--d-faint); } html[data-theme="dark"] .pts-cal-day { background: var(--d-surface); color: var(--d-muted); } html[data-theme="dark"] .pts-cal-day.done { background: linear-gradient(160deg, var(--d-surface-2) 0%, var(--d-surface-2) 100%); color: var(--d-soft); } html[data-theme="dark"] .pts-cal-day.today { background: linear-gradient(160deg, #9a83f0 0%, #8a70e6 100%); } html[data-theme="dark"] .pts-milestone { border: 1px solid var(--d-line-strong); } html[data-theme="dark"] .pts-milestone .pts-ms-days { color: var(--d-ink-2); } html[data-theme="dark"] .pts-ms-bonus { color: var(--d-soft); } html[data-theme="dark"] .pts-ms-bonus b { color: var(--d-ink-2); } html[data-theme="dark"] .pts-milestone.reached { background: linear-gradient(180deg, var(--d-surface) 0%, var(--d-surface) 100%); } html[data-theme="dark"] .pts-milestone.reached .pts-ms-bonus b { color: var(--d-soft); } html[data-theme="dark"] .pts-milestone.next .pts-ms-days::after { color: #9a83f0; } html[data-theme="dark"] .pts-note { color: var(--d-faint); } html[data-theme="dark"] .pts-inline-link { color: #4bbd80; } html[data-theme="dark"] .pts-inline-link:hover { color: var(--d-ink-2); } html[data-theme="dark"] .pts-redeem { background: radial-gradient(90% 130% at 100% 0%, rgba(115, 88, 220, 0.07) 0%, var(--d-glass) 60%), linear-gradient(180deg, var(--d-glass) 0%, var(--d-glass) 100%); } html[data-theme="dark"] .pts-tier { border: 1px solid var(--d-line-strong); background: linear-gradient(180deg, var(--d-surface) 0%, var(--d-surface) 100%); } html[data-theme="dark"] .pts-tier-gb { color: var(--d-ink); } html[data-theme="dark"] .pts-tier-kind { color: var(--d-faint); } html[data-theme="dark"] .pts-tier-cost { color: var(--d-soft); } html[data-theme="dark"] .pts-tier .pts-redeem-button.ready[data-confirm="1"] { background: #4bbd80; } html[data-theme="dark"] .pts-monthly { color: var(--d-muted); } html[data-theme="dark"] .pts-monthly b { color: var(--d-ink); } html[data-theme="dark"] .pts-ledger-row { border-bottom: 1px solid var(--d-line-strong); } html[data-theme="dark"] .pts-ledger-main strong { color: var(--d-ink); } html[data-theme="dark"] .pts-ledger-main small { color: var(--d-faint); } html[data-theme="dark"] .pts-ledger-delta.plus { color: #4bbd80; } html[data-theme="dark"] .pts-ledger-delta.minus { color: var(--d-soft); } html[data-theme="dark"] .pts-ledger-empty { color: var(--d-soft); } html[data-theme="dark"] .quota-kind { border: 1px solid var(--d-line); } html[data-theme="dark"] .quota-kind button { background: var(--d-surface); color: var(--d-muted); } html[data-theme="dark"] .quota-kind button.active { background: #9a83f0; } @media (max-width: 560px) { html[data-theme="dark"] body { background: radial-gradient(ellipse 82% 44% at -10% 30%, rgba(43, 35, 44, 0.24) 0%, transparent 72%), radial-gradient(ellipse 82% 48% at 110% 12%, rgba(38, 34, 51, 0.25) 0%, transparent 72%), radial-gradient(ellipse 100% 32% at 50% 103%, rgba(37, 38, 51, 0.22) 0%, transparent 76%), linear-gradient(160deg, var(--d-page) 0%, var(--d-page) 52%, var(--d-page) 100%); } html[data-theme="dark"] .tool-item:active { background: var(--d-glass); } } /* ---------------- styles.css ---------------- */ html[data-theme="dark"] .topbar { background: var(--d-glass); } html[data-theme="dark"] .logout-button:hover { color: #ef5b50; } html[data-theme="dark"] .status { border: 1px solid var(--d-line); color: #2f8a5e; } html[data-theme="dark"] .status-dot { background: #4bbd80; } html[data-theme="dark"] .refresh-stats:hover:not(:disabled) { border-color: var(--d-surface-2); } html[data-theme="dark"] .stat-icon { background: var(--d-surface); } html[data-theme="dark"] .stat-badge { color: #2f8a5e; } html[data-theme="dark"] .stat-sub { color: var(--d-soft); } html[data-theme="dark"] .panel-pill { color: #2f8a5e; } html[data-theme="dark"] .live-pill { background: rgba(62, 165, 115, 0.16); color: #4bbd80; } html[data-theme="dark"] .chart-range { background: var(--d-surface); } html[data-theme="dark"] .range-button.active { background: var(--d-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.26); } html[data-theme="dark"] .subscription-icon.clash { color: #4bbd80; background: rgba(62, 165, 115, 0.16); } html[data-theme="dark"] .link-field input { background: var(--d-surface); color: var(--d-ink-2); } html[data-theme="dark"] .link-field input:focus { border-color: var(--d-surface-3); background: var(--d-surface); } html[data-theme="dark"] .icon-button:hover { border-color: var(--d-surface-2); background: var(--d-surface); } html[data-theme="dark"] .node-port span { color: var(--d-soft); } html[data-theme="dark"] .node-status { color: #2f8a5e; } html[data-theme="dark"] .node-status svg { color: #4bbd80; } html[data-theme="dark"] .node-status.offline { color: var(--d-soft); } html[data-theme="dark"] .node-status.offline svg { color: var(--d-soft); } html[data-theme="dark"] .node-status small { color: var(--d-soft); } html[data-theme="dark"] .client-icon { background: var(--d-solid); } html[data-theme="dark"] .client-icon.ios { background: var(--d-solid); } html[data-theme="dark"] .client-icon.desktop { background: #4bbd80; } html[data-theme="dark"] .client-guide { background: var(--d-surface); } html[data-theme="dark"] .qr-overlay { background: rgba(0, 0, 0, 0.60); } html[data-theme="dark"] .qr-modal { box-shadow: 0 32px 80px rgba(0, 0, 0, 0.50); } html[data-theme="dark"] .qr-close:hover { background: var(--d-surface); } html[data-theme="dark"] .qr-canvas { background: var(--d-surface); } html[data-theme="dark"] .qr-url { color: var(--d-soft); } html[data-theme="dark"] .toast { background: var(--d-solid); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.50); } /* ---------------- vpn-health.css ---------------- */ html[data-theme="dark"] .node-status.pending { color: var(--d-muted); } html[data-theme="dark"] .node-status.pending svg { color: var(--d-soft); } html[data-theme="dark"] .quota-admin-form select, html[data-theme="dark"] .quota-admin-form input { background: var(--d-surface); } html[data-theme="dark"] .usage-ring { background: conic-gradient(var(--d-surface-3) 0deg var(--upload-angle), #4bbd80 var(--upload-angle) 360deg); } html[data-theme="dark"] .usage-ring-center { background: var(--d-surface); } html[data-theme="dark"] .usage-ring-center > span { color: var(--d-ink-2); } html[data-theme="dark"] .usage-ring-center strong { color: var(--d-ink); } html[data-theme="dark"] .usage-item-heading { color: var(--d-ink-2); } html[data-theme="dark"] .usage-percent { color: var(--d-ink-2); } html[data-theme="dark"] .usage-item > strong { color: var(--d-ink); } html[data-theme="dark"] .usage-track { background: var(--d-surface); } html[data-theme="dark"] .usage-footnote { color: var(--d-ink-2); } html[data-theme="dark"] .usage-explainer { border-top: 1px solid var(--d-line); background: var(--d-surface); } html[data-theme="dark"] .usage-explainer summary { color: var(--d-ink-2); } html[data-theme="dark"] .usage-explainer summary span { color: var(--d-ink-2); } html[data-theme="dark"] .usage-explainer p { color: var(--d-ink-2); } /* ======================================================================= 手工微调（放在生成规则之后，同特异性时以这里为准） ======================================================================= */ /* ---------- 1. 主 CTA：浅色是「墨底白字」，暗色反过来做成「浅底墨字」 ---------- */ html[data-theme="dark"] .primary-action, html[data-theme="dark"] .slide-link, html[data-theme="dark"] .dialog-confirm, html[data-theme="dark"] .admin-primary-button { background: var(--d-cta); color: var(--d-cta-ink); } html[data-theme="dark"] .primary-action:hover, html[data-theme="dark"] .slide-link:hover, html[data-theme="dark"] .dialog-confirm:hover, html[data-theme="dark"] .admin-primary-button:hover { background: #ffffff; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38); } html[data-theme="dark"] .primary-action svg, html[data-theme="dark"] .slide-link svg { color: var(--d-cta-ink); } /* ---------- 2. 白字 + 品牌实色：暗底上不能把品牌色调太亮，否则白字读不清 ---------- */ html[data-theme="dark"] .submit-button { background: #268259; box-shadow: 0 9px 22px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .submit-button:hover { background: #2f9a6b; box-shadow: 0 11px 26px rgba(0, 0, 0, 0.42); } html[data-theme="dark"] .acs-primary, html[data-theme="dark"] .admin-page .admin-tab.active, html[data-theme="dark"] .messages-page .auth-tab.active { background: linear-gradient(135deg, #6f52e8 0%, #5540b8 70%); color: #ffffff; } html[data-theme="dark"] .acs-primary:hover { box-shadow: 0 13px 28px rgba(0, 0, 0, 0.42); } html[data-theme="dark"] .pts-cal-day.today { background: linear-gradient(160deg, #5f46c8 0%, #4a37a6 100%); color: #ffffff; } html[data-theme="dark"] .quota-kind button.active { background: #5540b8; color: #ffffff; } /* 红色角标 / 计数：暗底上用深一点的红，白字才有对比度 */ html[data-theme="dark"] .tab-count, html[data-theme="dark"] .unread-dot, html[data-theme="dark"] .admin-count, html[data-theme="dark"] .mail-badge, html[data-theme="dark"] .menu-count { background: #c4322b; } /* 密码校验小勾：白勾必须落在深绿上 */ html[data-theme="dark"] .password-requirements .valid::before { background: #268259; border-color: #268259; } /* ---------- 3. 章节卡（01/02/03）：粉彩底 → 低饱和深色底 ---------- */ html[data-theme="dark"] .chapter-card { --accent: #4bbd80; --tint: rgba(62, 165, 115, 0.20); --tint-2: rgba(62, 165, 115, 0.10); --tile-a: rgba(62, 165, 115, 0.26); --tile-b: rgba(62, 165, 115, 0.14); --glow: rgba(62, 165, 115, 0.30); } html[data-theme="dark"] .chapter-card[data-goto-product="1"] { --accent: #9a83f0; --tint: rgba(154, 131, 240, 0.20); --tint-2: rgba(154, 131, 240, 0.10); --tile-a: rgba(154, 131, 240, 0.26); --tile-b: rgba(154, 131, 240, 0.14); --glow: rgba(154, 131, 240, 0.30); } html[data-theme="dark"] .chapter-card[data-goto-product="2"] { --accent: #e077ab; --tint: rgba(224, 119, 171, 0.20); --tint-2: rgba(224, 119, 171, 0.10); --tile-a: rgba(224, 119, 171, 0.26); --tile-b: rgba(224, 119, 171, 0.14); --glow: rgba(224, 119, 171, 0.30); } html[data-theme="dark"] .chapter-card { border-color: rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .chapter-card:hover { border-color: rgba(255, 255, 255, 0.16); } /* ---------- 4. 产品卡配图：三张墨线画是纯灰度，暗色下做「负片」 ---------- 翻转后再上一点色调，保留每张卡自己的色相（绿 / 紫 / 粉）， 但不照搬浅色那套 sepia 曲线——那套在负片上会把纸底烧成暖黄。 */ html[data-theme="dark"] .product-slide .product-art::before { filter: blur(74px) invert(1) brightness(0.9) sepia(0.5) saturate(1.6) var(--art-hue, hue-rotate(0deg)); } html[data-theme="dark"] .product-slide .product-art .reference-art { filter: invert(1) brightness(1.04) sepia(0.5) saturate(1.6) var(--art-hue, hue-rotate(0deg)); } html[data-theme="dark"] .product-vpn .product-art { --art-hue: hue-rotate(64deg); } html[data-theme="dark"] .product-agent .product-art { --art-hue: hue-rotate(186deg); } html[data-theme="dark"] .product-hermes .product-art { --art-hue: hue-rotate(276deg); } /* ---------- 5. 兜底：任何漏网的浅色块，统一压到暗色表面 ---------- */ html[data-theme="dark"] .acs-card, html[data-theme="dark"] .acs-sidebar, html[data-theme="dark"] .acs-panel { background: var(--d-surface); border-color: var(--d-line); } html[data-theme="dark"] .acs-hero { background: linear-gradient(120deg, var(--d-surface-2) 0%, var(--d-surface) 78%); }