/* ══════════════════════════════════════════════════════════════════ CAREER STUDIO — GLOBAL LIGHT THEME v3.0 Loaded by every standalone page. Applies when data-theme="light" is set on by the inline theme-init script. ══════════════════════════════════════════════════════════════════ */ /* ── Language picker button — light override (beats inline styles) ── */ html[data-theme="light"] #csGlobalLangBtn { background: rgba(255,255,255,.96) !important; border-color: rgba(0,20,80,.18) !important; color: #0a0f1e !important; box-shadow: 0 4px 16px rgba(0,20,80,.12) !important; backdrop-filter: none !important; } html[data-theme="light"] #csGlobalLangBtn:hover { background: #fff !important; border-color: rgba(0,20,80,.30) !important; box-shadow: 0 6px 20px rgba(0,20,80,.18) !important; } /* ── Language panel (backup — JS already sets theme-aware colors) ── */ html[data-theme="light"] #csLangPanel { background: #ffffff !important; border-color: rgba(0,20,80,.18) !important; box-shadow: 0 24px 64px rgba(0,20,80,.16) !important; } html[data-theme="light"] #csLangPanel .csl-native { color: #0a0f1e !important; } html[data-theme="light"] #csLangPanel .csl-english { color: rgba(10,15,30,.45) !important; } html[data-theme="light"] #csLangPanel .csl-code { color: rgba(10,15,30,.30) !important; } html[data-theme="light"] #csLangPanel .csl-check { color: #1a5fc8 !important; } html[data-theme="light"] #csLangPanel .csl-tier-header { color: rgba(10,15,30,.35) !important; border-color: rgba(0,20,80,.08) !important; } html[data-theme="light"] #csLangPanel .cslRow:hover { background: rgba(26,95,200,.06) !important; border-color: rgba(26,95,200,.20) !important; } html[data-theme="light"] #csLangPanel .csl-active { background: rgba(26,95,200,.10) !important; border-color: rgba(26,95,200,.40) !important; } html[data-theme="light"] #csLangPanel #cslSearch { background: rgba(0,20,80,.04) !important; border-color: rgba(0,20,80,.18) !important; color: #0a0f1e !important; } /* ── Floating theme toggle — visible in ALL themes ── */ #cs-theme-toggle { position: fixed; bottom: 24px; right: 24px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.10); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: 1.2rem; cursor: pointer; z-index: 99999; transition: transform .22s cubic-bezier(.23,1,.32,1), box-shadow .22s cubic-bezier(.23,1,.32,1), background .22s; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,.30); line-height: 1; padding: 0; } #cs-theme-toggle:hover { transform: scale(1.12); box-shadow: 0 6px 28px rgba(0,0,0,.40); background: rgba(255,255,255,.18); } html[data-theme="light"] #cs-theme-toggle { border-color: rgba(0,20,80,.15); background: rgba(255,255,255,.90); box-shadow: 0 4px 20px rgba(0,20,80,.14); } html[data-theme="light"] #cs-theme-toggle:hover { background: #fff; box-shadow: 0 6px 28px rgba(0,20,80,.22); } /* ══════════════════════════════════════════════════════════════════ 1. CSS VARIABLE OVERRIDES — covers every page's variable names ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] { /* ── Text (all pages) ── */ --t0: #050918; --t1: #0a0f1e; --t2: #1a2540; --t3: #4a5878; --t4: #8a9abc; /* ── Background shades (marketplace, intern-register) ── */ --bg: #f2f5ff; --s: #eef1fc; --s0: #e8ecf8; --s1: #ffffff; --s2: #f5f8ff; --s3: #eef2fc; --s4: #e4eaf8; --e: #e4e8f5; --el: #e8ecf8; /* ── Background shades (pricing, agent, avatar-interview, meeting, video) ── */ --bg0: #f2f5ff; --bg1: #e8ecf8; --bg2: #ffffff; --bg3: #f5f8ff; --bg4: #eef2fc; --bg5: #e4eaf8; /* ── Borders ── */ --bd: rgba(0,20,80,.10); --bd0: rgba(0,20,80,.07); --bd1: rgba(0,20,80,.12); --bd2: rgba(0,20,80,.18); --bdg: rgba(180,130,0,.20); --bdc: rgba(0,100,160,.18); --bdv: rgba(100,60,180,.18); /* ── Developer page ── */ --surface: #ffffff; --surface-e: #f0f4fc; --surface-h: #e8ecf8; --border: rgba(0,20,80,.12); --border-sub: rgba(0,20,80,.06); --text: #0a0f1e; --text-2: #4a5878; --text-3: #8a9abc; /* ── Portfolio + Agent (mirrors "minimal" preset) ── */ --card: rgba(255,255,255,.98); --text0: #0a1628; --text1: #1e3a5f; --text2: #4a6080; --text3: #8899b0; --tx: #0a1628; --tx2: #4a6080; --tx3: #8899b0; --glow: rgba(0,112,243,.06); /* ── Agent dashboard teal tints → blue tints in light ── */ --t10: rgba(26,95,200,.08); --t16: rgba(26,95,200,.14); /* ── Office Calendar border/divider shades ── */ --b1: #cdd4e8; --b2: #b8c0d8; /* ── Meeting Room / Video Room text vars ── */ --text0: #0a0f1e; --text1: #1a2540; --text2: #4a6080; --text3: #8899b0; /* ── Avatar Interview ── */ --blue: #4a6cc8; --navy: #2a4080; } /* ══════════════════════════════════════════════════════════════════ 2. BASE — body background + text ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"], html[data-theme="light"] body { background: #f2f5ff !important; color: #0a0f1e !important; } /* ══════════════════════════════════════════════════════════════════ 3. FORCE DARK TEXT ON ALL TEXT ELEMENTS Catches hardcoded rgba light colors meant for dark backgrounds ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] h4, html[data-theme="light"] h5, html[data-theme="light"] h6 { color: #0a0f1e !important; -webkit-text-fill-color: #0a0f1e !important; background-image: none !important; /* removes gradient clip */ background-clip: unset !important; -webkit-background-clip: unset !important; } html[data-theme="light"] p, html[data-theme="light"] li, html[data-theme="light"] td, html[data-theme="light"] th, html[data-theme="light"] dt, html[data-theme="light"] dd, html[data-theme="light"] figcaption, html[data-theme="light"] blockquote, html[data-theme="light"] caption { color: #1a2540 !important; } html[data-theme="light"] span:not([class*="badge"]):not([class*="bdg"]):not([class*="tag"]):not([class*="dot"]):not([class*="icon"]):not([class*="ico"]):not([class*="emoji"]):not([class*="label"]):not([class*="status"]) { color: inherit; } html[data-theme="light"] label { color: #1a2540 !important; } html[data-theme="light"] a:not([class*="btn"]):not([class*="button"]):not([class*="badge"]) { color: #1a5fc8 !important; } /* ══════════════════════════════════════════════════════════════════ 4. FORCE WHITE ON ALL CONTAINERS ══════════════════════════════════════════════════════════════════ */ /* Universal card/panel/container pattern */ html[data-theme="light"] [class*="card"]:not([class*="btn"]):not([class*="badge"]), html[data-theme="light"] [class*="panel"]:not([class*="btn"]), html[data-theme="light"] [class*="glass"]:not([class*="btn"]), html[data-theme="light"] [class*="box"]:not([class*="btn"]):not([class*="checkbox"]), html[data-theme="light"] [class*="inner"]:not([class*="btn"]), html[data-theme="light"] [class*="section"]:not([class*="btn"]), html[data-theme="light"] [class*="wrap"]:not([class*="btn"]):not([class*="wrap-icon"]), html[data-theme="light"] [class*="container"]:not([class*="btn"]), html[data-theme="light"] [class*="tile"]:not([class*="btn"]), html[data-theme="light"] [class*="block"]:not([class*="btn"]):not([class*="blockchain"]) { background: #ffffff !important; border-color: rgba(0,20,80,.10) !important; color: #0a0f1e !important; } /* Structural page sections */ html[data-theme="light"] main, html[data-theme="light"] section, html[data-theme="light"] article, html[data-theme="light"] aside { background: #f2f5ff !important; color: #0a0f1e !important; } /* ══════════════════════════════════════════════════════════════════ 5. NAVIGATION BARS (all pages) ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] nav, html[data-theme="light"] header, html[data-theme="light"] .nav, html[data-theme="light"] .ir-nav, html[data-theme="light"] .dev-header, html[data-theme="light"] .pf-nav, html[data-theme="light"] .nav-wrap, html[data-theme="light"] .agent-nav, html[data-theme="light"] .dash-nav, html[data-theme="light"] [class*="navbar"], html[data-theme="light"] [class*="nav-bar"], html[data-theme="light"] [class*="topbar"] { background: rgba(255,255,255,.97) !important; border-bottom-color: rgba(0,20,80,.10) !important; backdrop-filter: blur(20px) !important; color: #0a0f1e !important; } html[data-theme="light"] .nav *, html[data-theme="light"] .ir-nav *, html[data-theme="light"] .dev-header *, html[data-theme="light"] header * { color: #0a0f1e !important; -webkit-text-fill-color: #0a0f1e !important; } /* Keep accent/brand colors in nav */ html[data-theme="light"] .nav * b, html[data-theme="light"] .nav *[class*="gold"], html[data-theme="light"] .nav *[class*="accent"] { color: inherit !important; } /* Nav tabs */ html[data-theme="light"] .ntab { color: #4a5878 !important; } html[data-theme="light"] .ntab:hover { color: #0a0f1e !important; background: rgba(0,20,80,.04) !important; } html[data-theme="light"] .ntab.active { background: #ffffff !important; color: #0a0f1e !important; box-shadow: 0 2px 8px rgba(0,20,80,.08) !important; } html[data-theme="light"] .nav-tabs { background: rgba(0,0,0,.04) !important; border-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .nav-link { color: #4a5878 !important; } html[data-theme="light"] .nav-link:hover { color: #0a0f1e !important; } /* ══════════════════════════════════════════════════════════════════ 6. INPUTS / FORMS ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="color"]), html[data-theme="light"] textarea, html[data-theme="light"] select { background: #ffffff !important; border-color: rgba(0,20,80,.15) !important; color: #0a0f1e !important; } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: #8a9abc !important; } html[data-theme="light"] input:focus, html[data-theme="light"] textarea:focus, html[data-theme="light"] select:focus { border-color: #1a5fc8 !important; box-shadow: 0 0 0 3px rgba(26,95,200,.10) !important; outline: none !important; } /* ══════════════════════════════════════════════════════════════════ 7. HIDE DARK DECORATIVE ELEMENTS ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .orb, html[data-theme="light"] .orb-1, html[data-theme="light"] .orb-2, html[data-theme="light"] .orb-3, html[data-theme="light"] .ir-orb-1, html[data-theme="light"] .ir-orb-2, html[data-theme="light"] .ir-orb-3, html[data-theme="light"] .aurora, html[data-theme="light"] #bgCanvas, html[data-theme="light"] .canvas-bg, html[data-theme="light"] [class*="particle"], html[data-theme="light"] [class*="nebula"] { opacity: 0 !important; pointer-events: none !important; } /* ══════════════════════════════════════════════════════════════════ 8. MARKETPLACE (marketplace.html) ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .hero { background: #f2f5ff !important; } html[data-theme="light"] .hero-search { background: #ffffff !important; border-color: rgba(0,20,80,.14) !important; box-shadow: 0 2px 16px rgba(0,20,80,.06) !important; } html[data-theme="light"] .hero-search input { color: #0a0f1e !important; background: transparent !important; } html[data-theme="light"] .hero-label { color: #0070c0 !important; } html[data-theme="light"] .job-card, html[data-theme="light"] .cat-card, html[data-theme="light"] .talent-card, html[data-theme="light"] .intern-card, html[data-theme="light"] .sl-item, html[data-theme="light"] .jd-salary-card, html[data-theme="light"] .jd-related-card { background: #ffffff !important; border-color: rgba(0,20,80,.10) !important; box-shadow: 0 2px 12px rgba(0,20,80,.06) !important; } html[data-theme="light"] .job-card:hover, html[data-theme="light"] .cat-card:hover, html[data-theme="light"] .talent-card:hover, html[data-theme="light"] .intern-card:hover { border-color: rgba(0,20,80,.20) !important; box-shadow: 0 6px 24px rgba(0,20,80,.10) !important; } html[data-theme="light"] .modal-overlay, html[data-theme="light"] .contact-overlay { background: rgba(242,245,255,.94) !important; backdrop-filter: blur(16px) !important; } html[data-theme="light"] .wts-opt, html[data-theme="light"] .rtype-opt { background: #ffffff !important; border-color: rgba(0,20,80,.12) !important; } html[data-theme="light"] .wts-opt:hover, html[data-theme="light"] .rtype-opt:hover { background: #f0f4fc !important; } /* ══════════════════════════════════════════════════════════════════ 9. PRICING (pricing.html) ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .plan-card, html[data-theme="light"] .pricing-card, html[data-theme="light"] [class*="plan"] { background: #ffffff !important; border-color: rgba(0,20,80,.10) !important; box-shadow: 0 2px 16px rgba(0,20,80,.06) !important; } html[data-theme="light"] .plan-price-val { color: #0a0f1e !important; -webkit-text-fill-color: #0a0f1e !important; } html[data-theme="light"] .plan-feat { color: #1a2540 !important; } html[data-theme="light"] .feat-check { color: #007a3d !important; } /* ══════════════════════════════════════════════════════════════════ 10. DEVELOPER PAGE (developer.html) ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .dev-sidebar, html[data-theme="light"] [class*="sidebar"] { background: #ffffff !important; border-right-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .dev-sidebar a, html[data-theme="light"] .dev-nav-link { color: #4a5878 !important; } html[data-theme="light"] .dev-sidebar a:hover, html[data-theme="light"] .dev-nav-link:hover, html[data-theme="light"] .dev-nav-link.active { background: #f0f4fc !important; color: #0a0f1e !important; } html[data-theme="light"] pre, html[data-theme="light"] code, html[data-theme="light"] .code-block { background: #f0f4fc !important; border-color: rgba(0,20,80,.10) !important; color: #1a2540 !important; } html[data-theme="light"] pre code { background: transparent !important; color: #1a2540 !important; } html[data-theme="light"] .copy-btn { background: #e8ecf8 !important; border: 1px solid rgba(0,20,80,.12) !important; color: #4a5878 !important; } html[data-theme="light"] .copy-btn:hover { background: #dde3f5 !important; color: #0a0f1e !important; } html[data-theme="light"] .endpoint-card, html[data-theme="light"] .api-section, html[data-theme="light"] .api-endpoint { background: #ffffff !important; border-color: rgba(0,20,80,.10) !important; } /* ══════════════════════════════════════════════════════════════════ 11. API DOCS (api-docs.html — all hardcoded) ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .sidebar { background: #ffffff !important; border-right-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .sb-logo h2 { color: #b07c00 !important; -webkit-text-fill-color: #b07c00 !important; } html[data-theme="light"] .sb-logo p { color: #6b7a99 !important; } html[data-theme="light"] .sb-section-label { color: #4a5878 !important; } html[data-theme="light"] .sb-link { color: #4a5878 !important; background: transparent !important; } html[data-theme="light"] .sb-link:hover, html[data-theme="light"] .sb-link.active { color: #0a0f1e !important; background: #f0f4fc !important; border-left-color: #6366f1 !important; } html[data-theme="light"] .doc-content, html[data-theme="light"] .content-wrap { background: #f2f5ff !important; } /* ══════════════════════════════════════════════════════════════════ 12. PORTFOLIO (maps to "minimal" preset) ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .pf-nav, html[data-theme="light"] .nav-wrap { background: rgba(255,255,255,.96) !important; } html[data-theme="light"] .stat, html[data-theme="light"] .exp-card, html[data-theme="light"] .proj-card, html[data-theme="light"] .edu-card { background: rgba(255,255,255,.96) !important; border-color: rgba(0,0,0,.09) !important; } html[data-theme="light"] .modal-card { background: #ffffff !important; border-color: rgba(0,0,0,.10) !important; box-shadow: 0 20px 60px rgba(0,20,80,.15) !important; } /* ══════════════════════════════════════════════════════════════════ 13. AGENT DASHBOARD (agent/dashboard.html) ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .glass-panel { background: #ffffff !important; border-color: rgba(0,20,80,.10) !important; box-shadow: 0 2px 16px rgba(0,20,80,.06) !important; backdrop-filter: none !important; } html[data-theme="light"] .glass-panel:hover { border-color: rgba(0,20,80,.18) !important; box-shadow: 0 6px 28px rgba(0,20,80,.10) !important; } html[data-theme="light"] .stat-card { background: #ffffff !important; border-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .fw-inner, html[data-theme="light"] .workspace-main, html[data-theme="light"] .mpb-inner, html[data-theme="light"] .coach-section { background: #f2f5ff !important; } html[data-theme="light"] .ticker-inner { background: transparent !important; } html[data-theme="light"] .ticker-fade.left { background: linear-gradient(90deg, #f2f5ff, transparent) !important; } html[data-theme="light"] .ticker-fade.right { background: linear-gradient(-90deg, #f2f5ff, transparent) !important; } html[data-theme="light"] .ic-card, html[data-theme="light"] .om-card, html[data-theme="light"] .jr-card, html[data-theme="light"] .plat-counter, html[data-theme="light"] .coach-panel-left { background: #ffffff !important; border-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .ic-body, html[data-theme="light"] .om-body { color: #4a6080 !important; } /* ══════════════════════════════════════════════════════════════════ 14. SCROLLBARS ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] ::-webkit-scrollbar-track { background: #eef2fc !important; } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,20,80,.18) !important; } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,20,80,.30) !important; } /* ══════════════════════════════════════════════════════════════════ 15. FOOTER ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] footer { background: #e8ecf8 !important; border-top: 1px solid rgba(0,20,80,.10) !important; color: #1a2540 !important; } html[data-theme="light"] footer * { color: #4a5878 !important; } /* ══════════════════════════════════════════════════════════════════ 16. GLOBAL — body background for pages that hardcode it ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] body { background: #f2f5ff !important; color: #0a0f1e !important; } /* Extra CSS variables for developer.html which defines its own set */ html[data-theme="light"] { --surface: #ffffff; --surface-e: #f0f4fc; --surface-h: #e8ecf8; --border: rgba(0,20,80,.12); --border-sub: rgba(0,20,80,.08); --text: #0a0f1e; --text-2: #4a5878; --text-3: #8a9abc; } /* ══════════════════════════════════════════════════════════════════ 17. AGENT DASHBOARD — hardcoded-background overrides ══════════════════════════════════════════════════════════════════ */ /* Nav */ html[data-theme="light"] .nav { background: rgba(255,255,255,.96) !important; border-bottom: 1px solid rgba(0,20,80,.10) !important; backdrop-filter: blur(20px) !important; } html[data-theme="light"] .nav::after { opacity: 0 !important; } html[data-theme="light"] .nav-back { color: #4a5878 !important; } html[data-theme="light"] .nav-brand { color: #0a0f1e !important; } html[data-theme="light"] .nav-status-pill { background: #f0f4fc !important; border-color: rgba(0,20,80,.12) !important; color: #4a5878 !important; } html[data-theme="light"] .nav-clock { color: #6b7a99 !important; } html[data-theme="light"] .plat-counter { background: #f0f4fc !important; border-color: rgba(0,20,80,.14) !important; } html[data-theme="light"] .plat-counter > span:first-of-type { color: #1a5fc8 !important; } html[data-theme="light"] .plat-label { color: #6b7a99 !important; } html[data-theme="light"] .btn-scan { background: #eef2fc !important; border-color: rgba(0,20,80,.20) !important; color: #1a5fc8 !important; } /* Hero section */ html[data-theme="light"] .hero { background: linear-gradient(180deg,#f2f5ff 0%,#e8ecf8 100%) !important; border-bottom-color: rgba(0,20,80,.08) !important; } html[data-theme="light"] .hero::before { opacity: 0 !important; } html[data-theme="light"] .hero-grid-overlay { opacity: 0.15 !important; } /* Stat cards */ html[data-theme="light"] .stat-card { background: #ffffff !important; border-color: rgba(0,20,80,.10) !important; box-shadow: 0 2px 12px rgba(0,20,80,.06) !important; } html[data-theme="light"] .stat-card:hover { border-color: rgba(0,20,80,.18) !important; box-shadow: 0 8px 28px rgba(0,20,80,.10) !important; transform: translateY(-2px) !important; } html[data-theme="light"] .sc-label, html[data-theme="light"] .sc-today { color: #6b7a99 !important; } html[data-theme="light"] .sc-value { text-shadow: none !important; } /* Hero controls */ html[data-theme="light"] .hero-live { opacity: .85 !important; } html[data-theme="light"] .hl-msg { color: #1a5fc8 !important; text-shadow: none !important; } html[data-theme="light"] .hp-track { background: rgba(0,20,80,.08) !important; } html[data-theme="light"] .btn-secondary { background: #f0f4fc !important; border-color: rgba(0,20,80,.14) !important; color: #4a5878 !important; } html[data-theme="light"] .dna-status { background: #fffbe8 !important; border-color: rgba(200,120,0,.25) !important; } /* Ticker / scan strip */ html[data-theme="light"] .ticker { background: #eef2fc !important; border-top-color: rgba(0,20,80,.08) !important; border-bottom-color: rgba(0,20,80,.08) !important; } html[data-theme="light"] .ti { color: #1a5fc8 !important; } html[data-theme="light"] .td { color: rgba(26,95,200,.30) !important; } html[data-theme="light"] .ticker-fade.left { background: linear-gradient(90deg, #eef2fc, transparent) !important; } html[data-theme="light"] .ticker-fade.right { background: linear-gradient(-90deg, #eef2fc, transparent) !important; } /* Tab bar */ html[data-theme="light"] .tab-bar { background: rgba(255,255,255,.96) !important; border-bottom-color: rgba(0,20,80,.10) !important; backdrop-filter: blur(20px) !important; } html[data-theme="light"] .tab { color: #6b7a99 !important; } html[data-theme="light"] .tab:hover { color: #0a0f1e !important; } html[data-theme="light"] .tab.active { color: #1a5fc8 !important; border-bottom-color: #1a5fc8 !important; } html[data-theme="light"] .tab-num { background: rgba(26,95,200,.06) !important; border-color: rgba(26,95,200,.18) !important; color: #1a5fc8 !important; } html[data-theme="light"] .live-pip, html[data-theme="light"] .live-badge { background: rgba(0,122,61,.08) !important; border-color: rgba(0,122,61,.20) !important; color: #007a3d !important; } html[data-theme="light"] .lb-dot, html[data-theme="light"] .live-pip span { background: #007a3d !important; } /* Workspace */ html[data-theme="light"] .workspace { border-top-color: rgba(0,20,80,.08) !important; } html[data-theme="light"] .workspace-main { background: #f8faff !important; } html[data-theme="light"] .workspace-sidebar { background: #f0f4fc !important; border-left-color: rgba(0,20,80,.08) !important; } /* Glass panels */ html[data-theme="light"] .glass-panel { background: #ffffff !important; border-color: rgba(0,20,80,.06) !important; } html[data-theme="light"] .glass-panel + .glass-panel { border-top-color: rgba(0,20,80,.06) !important; } html[data-theme="light"] .gp-hdr { background: rgba(240,244,252,.85) !important; border-bottom-color: rgba(0,20,80,.08) !important; } html[data-theme="light"] .gp-hdr::before { opacity: 0 !important; } html[data-theme="light"] .gp-title { color: #0a0f1e !important; } html[data-theme="light"] .gp-sub { color: #6b7a99 !important; } html[data-theme="light"] .gp-action { background: #f0f4fc !important; border-color: rgba(0,20,80,.12) !important; color: #4a5878 !important; } html[data-theme="light"] .gp-action:hover { background: #e4eaf8 !important; border-color: rgba(0,20,80,.22) !important; color: #0a0f1e !important; } html[data-theme="light"] .gp-select { background: #ffffff !important; border-color: rgba(0,20,80,.14) !important; color: #4a5878 !important; } /* Activity feed */ html[data-theme="light"] .feed-panel { border-right-color: rgba(0,20,80,.06) !important; } html[data-theme="light"] .feed-item { background: #ffffff !important; border-color: rgba(0,20,80,.08) !important; border-left-color: rgba(0,20,80,.14) !important; } html[data-theme="light"] .feed-item:hover { background: #f5f8ff !important; border-color: rgba(0,20,80,.16) !important; } html[data-theme="light"] .feed-item.type-scan { border-left-color: #1a5fc8 !important; } html[data-theme="light"] .feed-item.type-match { background: #fffbe8 !important; border-left-color: #c87800 !important; } html[data-theme="light"] .feed-item.type-apply { background: #f0fff8 !important; border-left-color: #007a3d !important; } html[data-theme="light"] .feed-item.type-error { background: #fff0f3 !important; border-left-color: #cc1a3a !important; } html[data-theme="light"] .fi-msg { color: #1a2540 !important; } html[data-theme="light"] .fi-time { color: #8a9abc !important; } /* Pipeline kanban */ html[data-theme="light"] .pl-col { border-right-color: rgba(0,20,80,.08) !important; } html[data-theme="light"] .pl-col-hdr { background: #f5f8ff !important; border-bottom-color: rgba(0,20,80,.08) !important; } html[data-theme="light"] .pl-col-name { color: #6b7a99 !important; } html[data-theme="light"] .pl-col-count { color: #1a5fc8 !important; text-shadow: none !important; } html[data-theme="light"] .pl-col[data-status="applied"] .pl-col-count { color: #c87800 !important; } html[data-theme="light"] .pl-col[data-status="responded"] .pl-col-count { color: #007a3d !important; } html[data-theme="light"] .pl-col[data-status="interview"] .pl-col-count { color: #6c3dc8 !important; } html[data-theme="light"] .pl-col[data-status="offer"] .pl-col-count { color: #007a3d !important; text-shadow: none !important; } html[data-theme="light"] .pl-col[data-status="rejected"] .pl-col-count { color: #cc1a3a !important; } /* Job cards in pipeline */ html[data-theme="light"] .job-card { background: #ffffff !important; border-color: rgba(0,20,80,.10) !important; box-shadow: none !important; } html[data-theme="light"] .job-card:hover { border-color: rgba(0,20,80,.22) !important; box-shadow: 0 4px 16px rgba(0,20,80,.08) !important; transform: translateY(-1px) !important; } html[data-theme="light"] .jc-title { color: #0a0f1e !important; } html[data-theme="light"] .jc-co { color: #6b7a99 !important; } html[data-theme="light"] .jc-plat { color: #8a9abc !important; } html[data-theme="light"] .jc-btn { background: #f0f4fc !important; border-color: rgba(0,20,80,.12) !important; color: #4a5878 !important; } html[data-theme="light"] .jc-btn:hover { background: #e4eaf8 !important; border-color: rgba(0,20,80,.22) !important; color: #1a5fc8 !important; } html[data-theme="light"] .jc-score-track { background: rgba(0,20,80,.06) !important; } /* Job rows (matches/queue) */ html[data-theme="light"] .job-row { border-bottom-color: rgba(0,20,80,.06) !important; } html[data-theme="light"] .job-row:hover { background: rgba(26,95,200,.04) !important; } html[data-theme="light"] .jr-title { color: #0a0f1e !important; } html[data-theme="light"] .jr-meta, html[data-theme="light"] .jr-meta-row { color: #6b7a99 !important; } html[data-theme="light"] .jr-salary { color: #c87800 !important; text-shadow: none !important; } html[data-theme="light"] .jr-ring-sub { color: #6b7a99 !important; } html[data-theme="light"] .jr-score-bar-track { background: rgba(0,20,80,.08) !important; } html[data-theme="light"] .jr-score-bar-num { color: #1a5fc8 !important; } html[data-theme="light"] .jr-btn { background: #f0f4fc !important; border-color: rgba(0,20,80,.12) !important; color: #4a5878 !important; } html[data-theme="light"] .jr-btn:hover { background: #e4eaf8 !important; border-color: rgba(0,20,80,.22) !important; color: #1a5fc8 !important; box-shadow: none !important; } html[data-theme="light"] .jr-btn.primary { background: #deeeff !important; border-color: rgba(26,95,200,.30) !important; color: #1a5fc8 !important; } /* Email rows */ html[data-theme="light"] .email-row { border-bottom-color: rgba(0,20,80,.06) !important; } html[data-theme="light"] .email-row:hover { background: rgba(26,95,200,.03) !important; } /* orb — mute glow in light mode */ html[data-theme="light"] .agent-orb { filter: drop-shadow(0 0 30px rgba(0,100,200,.18)) !important; } html[data-theme="light"] .orb-core { background: radial-gradient(circle at 38% 32%,rgba(26,95,200,.14),rgba(240,244,255,.97)) !important; border-color: rgba(26,95,200,.30) !important; box-shadow: inset 0 0 40px rgba(26,95,200,.06), 0 0 0 6px rgba(26,95,200,.04), 0 0 0 14px rgba(26,95,200,.02) !important; } html[data-theme="light"] .orb-state { color: #1a5fc8 !important; text-shadow: none !important; } html[data-theme="light"] .orb-caption { color: #6b7a99 !important; } html[data-theme="light"] .r1 { border-color: rgba(26,95,200,.18) !important; } html[data-theme="light"] .r2 { border-color: rgba(26,95,200,.08) !important; } html[data-theme="light"] .r3 { border-color: rgba(26,95,200,.05) !important; } /* market-heat / sidebar panels */ html[data-theme="light"] .ic-card, html[data-theme="light"] .om-card { background: #ffffff !important; border-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .ic-body, html[data-theme="light"] .om-body { color: #4a5878 !important; } /* ══════════════════════════════════════════════════════════════════ 18. API DOCS (api-docs.html — all elements use hardcoded values) ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .layout { background: #f2f5ff !important; } html[data-theme="light"] .content { background: #f2f5ff !important; color: #0a0f1e !important; } /* Content headings & text (api-docs uses hardcoded color on h1-h4, p) */ html[data-theme="light"] .content h1 { color: #b07c00 !important; -webkit-text-fill-color: #b07c00 !important; background-image: none !important; } html[data-theme="light"] .content h2 { color: #0a0f1e !important; -webkit-text-fill-color: #0a0f1e !important; border-top-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .content h3 { color: #1a5fc8 !important; -webkit-text-fill-color: #1a5fc8 !important; } html[data-theme="light"] .content h4 { color: #6b7a99 !important; } html[data-theme="light"] .content p { color: #4a5878 !important; } html[data-theme="light"] .content ul, html[data-theme="light"] .content ol, html[data-theme="light"] .content li { color: #4a5878 !important; } html[data-theme="light"] a { color: #1a5fc8 !important; } /* Endpoint cards */ html[data-theme="light"] .endpoint { background: #ffffff !important; border-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .endpoint-path { color: #b07c00 !important; } html[data-theme="light"] .endpoint-desc { color: #4a5878 !important; } /* Tier cards */ html[data-theme="light"] .tier-card { background: #ffffff !important; border-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .tier-card h4 { color: #0a0f1e !important; } html[data-theme="light"] .tier-card p, html[data-theme="light"] .tier-card ul, html[data-theme="light"] .tier-card li { color: #4a5878 !important; } /* Hero box in api-docs */ html[data-theme="light"] .hero { background: linear-gradient(135deg,#eef2fc 0%,#e0e8f8 100%) !important; border-color: rgba(0,20,80,.14) !important; } html[data-theme="light"] .hero h1 { color: #b07c00 !important; -webkit-text-fill-color: #b07c00 !important; background-image: none !important; } html[data-theme="light"] .hero p { color: #4a5878 !important; } html[data-theme="light"] .hero-badges .badge { filter: none !important; } /* Tables */ html[data-theme="light"] th { color: #6b7a99 !important; border-bottom-color: rgba(0,20,80,.12) !important; } html[data-theme="light"] td { border-bottom-color: rgba(0,20,80,.05) !important; } html[data-theme="light"] td:first-child { color: #1a5fc8 !important; } html[data-theme="light"] td:nth-child(2) { color: #1a2540 !important; } html[data-theme="light"] td:nth-child(3) { color: #4a5878 !important; } html[data-theme="light"] .req { color: #cc1a3a !important; } html[data-theme="light"] .opt { color: #6b7a99 !important; } /* Code tabs */ html[data-theme="light"] .lang-tabs { border-bottom: 1px solid rgba(0,20,80,.10) !important; } html[data-theme="light"] .lang-tab { background: #eef2fc !important; border-color: rgba(0,20,80,.12) !important; color: #4a5878 !important; } html[data-theme="light"] .lang-tab.active { background: #ffffff !important; color: #1a5fc8 !important; border-bottom-color: #ffffff !important; } /* Alert boxes */ html[data-theme="light"] .alert-info { background: #eff6ff !important; color: #1a5fc8 !important; border-color: rgba(26,95,200,.35) !important; } html[data-theme="light"] .alert-warn { background: #fffbe8 !important; color: #a06800 !important; border-color: rgba(200,120,0,.35) !important; } html[data-theme="light"] .alert-ok { background: #f0fff8 !important; color: #007a3d !important; border-color: rgba(0,122,61,.35) !important; } /* ══════════════════════════════════════════════════════════════════ 19. AUTH PAGE (auth.html — all inline styles) ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .auth-card { background: #ffffff !important; border-color: rgba(0,20,80,.12) !important; box-shadow: 0 24px 80px rgba(0,20,80,.10) !important; } html[data-theme="light"] .tab-bar { background: rgba(0,20,80,.06) !important; } html[data-theme="light"] .atab { color: #4a5878 !important; } html[data-theme="light"] .atab.active, html[data-theme="light"] .atab:hover { background: #ffffff !important; color: #0a0f1e !important; } html[data-theme="light"] .input-group input, html[data-theme="light"] .input-group textarea { background: #f5f8ff !important; border-color: rgba(0,20,80,.14) !important; color: #0a0f1e !important; } html[data-theme="light"] .label { color: #1a2540 !important; } html[data-theme="light"] .logo-word { color: #0a0f1e !important; } html[data-theme="light"] .hero-side { background: linear-gradient(160deg,rgba(0,80,200,.04) 0%,rgba(200,140,0,.02) 50%,rgba(80,40,180,.04) 100%) !important; border-right-color: rgba(0,20,80,.10) !important; } /* ══════════════════════════════════════════════════════════════════ 20. LOGIN / REGISTER / FORGOT / RESET / VERIFY-OTP ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .card { background: rgba(255,255,255,.96) !important; border-color: rgba(0,20,80,.12) !important; box-shadow: 0 32px 100px rgba(0,20,80,.10) !important; } html[data-theme="light"] .hero-side { border-right-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .step-dot { background: #e8ecf8 !important; border-color: rgba(0,20,80,.14) !important; color: #4a5878 !important; } html[data-theme="light"] .step-dot.active { background: #1a5fc8 !important; border-color: #1a5fc8 !important; color: #ffffff !important; } html[data-theme="light"] .step-dot.done { background: #007a3d !important; border-color: #007a3d !important; } html[data-theme="light"] .ob-note { color: #6b7a99 !important; } html[data-theme="light"] .pw-bar { background: rgba(0,20,80,.08) !important; } /* ══════════════════════════════════════════════════════════════════ 21. ONBOARDING ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .hdr { background: rgba(255,255,255,.96) !important; border-bottom-color: rgba(0,20,80,.10) !important; backdrop-filter: blur(20px) !important; } html[data-theme="light"] .step-card { background: #ffffff !important; border-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .step-card::before { opacity: 0 !important; } html[data-theme="light"] .step-eyebrow, html[data-theme="light"] .step-num { color: #4a5878 !important; } html[data-theme="light"] .step-title { color: #0a0f1e !important; } html[data-theme="light"] .step-sub { color: #4a5878 !important; } html[data-theme="light"] .fg label { color: #1a2540 !important; } html[data-theme="light"] .fg input, html[data-theme="light"] .fg textarea, html[data-theme="light"] .fg select { background: #f5f8ff !important; border-color: rgba(0,20,80,.14) !important; color: #0a0f1e !important; } html[data-theme="light"] .sug-chip { background: rgba(0,20,80,.06) !important; border-color: rgba(0,20,80,.14) !important; color: #1a2540 !important; } html[data-theme="light"] .stag { background: #deeeff !important; border-color: rgba(26,95,200,.30) !important; color: #1a5fc8 !important; } html[data-theme="light"] .card-opt, html[data-theme="light"] .wt-card { background: #f5f8ff !important; border-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .card-opt.selected, html[data-theme="light"] .wt-card.selected { background: #deeeff !important; border-color: rgba(26,95,200,.40) !important; } html[data-theme="light"] .ob-build-row { background: #ffffff !important; border-color: rgba(0,20,80,.08) !important; } html[data-theme="light"] .ob-build-row .status { color: #4a5878 !important; } html[data-theme="light"] .prog-wrap { background: rgba(0,20,80,.06) !important; } html[data-theme="light"] .aurora { opacity: 0 !important; } html[data-theme="light"] .toasts { background: transparent !important; } /* ══════════════════════════════════════════════════════════════════ 22. HOME PAGE (home.html) ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .nav-link { color: #4a5878 !important; } html[data-theme="light"] .hero-h { -webkit-text-fill-color: #0a0f1e !important; background-image: none !important; } html[data-theme="light"] .feat-card { background: #ffffff !important; border-color: rgba(0,20,80,.10) !important; box-shadow: 0 2px 16px rgba(0,20,80,.06) !important; } html[data-theme="light"] .feat-t { color: #0a0f1e !important; } html[data-theme="light"] .feat-d { color: #4a5878 !important; } html[data-theme="light"] .section { background: #f2f5ff !important; } html[data-theme="light"] .testi-card { background: #ffffff !important; border-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .testi-body { color: #1a2540 !important; } html[data-theme="light"] .gv-row:hover { background: rgba(0,20,80,.04) !important; } /* ══════════════════════════════════════════════════════════════════ 23. OFFICE CALENDAR (office-calendar.html) ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .cal-header, html[data-theme="light"] .week-header, html[data-theme="light"] .cal-nav { background: rgba(255,255,255,.97) !important; border-bottom-color: rgba(0,20,80,.10) !important; color: #0a0f1e !important; } html[data-theme="light"] .cal-grid, html[data-theme="light"] .week-grid, html[data-theme="light"] .day-col { background: #f2f5ff !important; border-color: rgba(0,20,80,.08) !important; } html[data-theme="light"] .day-header { background: #eef2fc !important; color: #4a5878 !important; } html[data-theme="light"] .time-slot { border-top-color: rgba(0,20,80,.05) !important; color: #8a9abc !important; } html[data-theme="light"] .event-block { background: #deeeff !important; border-left-color: #1a5fc8 !important; color: #1a2540 !important; } html[data-theme="light"] .sidebar-panel, html[data-theme="light"] .cal-sidebar { background: #ffffff !important; border-right-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .mini-cal-day:hover { background: #eef2fc !important; } html[data-theme="light"] .mini-cal-day.today { background: #1a5fc8 !important; color: #fff !important; } html[data-theme="light"] .ai-insight-card { background: #ffffff !important; border-color: rgba(0,20,80,.10) !important; } /* ══════════════════════════════════════════════════════════════════ 24. MEETING ROOM (meeting-room.html) ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .meeting-header, html[data-theme="light"] .meet-header, html[data-theme="light"] .mr-header { background: rgba(255,255,255,.97) !important; border-bottom-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .setup-card { background: #ffffff !important; border-color: rgba(0,20,80,.12) !important; box-shadow: 0 40px 80px rgba(0,20,80,.10) !important; } html[data-theme="light"] #setupModal { background: #f2f5ff !important; } html[data-theme="light"] .video-area, html[data-theme="light"] .participants-grid, html[data-theme="light"] .video-container { background: #e8ecf8 !important; } html[data-theme="light"] .video-tile, html[data-theme="light"] .participant-tile { background: #dde3f5 !important; border-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .chat-sidebar, html[data-theme="light"] .meeting-sidebar, html[data-theme="light"] .mr-sidebar { background: #ffffff !important; border-left-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .chat-msg { color: #0a0f1e !important; } html[data-theme="light"] .controls-bar, html[data-theme="light"] .meeting-controls, html[data-theme="light"] .mr-controls { background: rgba(255,255,255,.97) !important; border-top-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .ctrl-btn { background: #f0f4fc !important; border-color: rgba(0,20,80,.12) !important; color: #4a5878 !important; } html[data-theme="light"] .ctrl-btn:hover { background: #e4eaf8 !important; color: #0a0f1e !important; } html[data-theme="light"] .ctrl-btn.active { background: #cc1a3a !important; border-color: #cc1a3a !important; color: #fff !important; } html[data-theme="light"] .network-quality { color: #007a3d !important; } /* ══════════════════════════════════════════════════════════════════ 25. VIDEO ROOM (video-room.html) ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .vr-header { background: rgba(255,255,255,.96) !important; border-bottom-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .vr-brand { color: #b07c00 !important; } html[data-theme="light"] .vr-room { color: #6b7a99 !important; } html[data-theme="light"] .vr-main { background: #f2f5ff !important; } html[data-theme="light"] .vr-video-area { background: #e8ecf8 !important; } html[data-theme="light"] .vr-stream { background: #dde3f5 !important; border-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .vr-stream-label { background: rgba(255,255,255,.85) !important; color: #0a0f1e !important; } html[data-theme="light"] .vr-controls { background: rgba(255,255,255,.97) !important; } html[data-theme="light"] .vr-btn { background: #f0f4fc !important; border: 1px solid rgba(0,20,80,.12) !important; color: #4a5878 !important; } html[data-theme="light"] .vr-btn:hover { background: #e4eaf8 !important; color: #0a0f1e !important; } html[data-theme="light"] .vr-btn.danger { background: #ffecec !important; border-color: rgba(204,26,58,.30) !important; color: #cc1a3a !important; } html[data-theme="light"] .vr-sidebar { background: #ffffff !important; border-left-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .vr-chat { background: #f5f8ff !important; } html[data-theme="light"] .vr-chat-msg { color: #0a0f1e !important; } html[data-theme="light"] .vr-chat-input textarea { background: #ffffff !important; border-color: rgba(0,20,80,.14) !important; color: #0a0f1e !important; } html[data-theme="light"] .vr-chat-input button { background: rgba(26,95,200,.10) !important; border-color: rgba(26,95,200,.20) !important; color: #1a5fc8 !important; } html[data-theme="light"] .vr-setup { background: #f2f5ff !important; } html[data-theme="light"] .vr-setup-card { background: #ffffff !important; border-color: rgba(0,20,80,.12) !important; } html[data-theme="light"] .vr-setup-preview { background: #e8ecf8 !important; border-color: rgba(0,20,80,.12) !important; } /* ══════════════════════════════════════════════════════════════════ 26. AVATAR INTERVIEW (avatar-interview.html) ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] #iv2-header { background: #ffffff !important; border-bottom-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] #iv2-left, html[data-theme="light"] #iv2-video-area { background: #e8ecf8 !important; } html[data-theme="light"] #iv2-right, html[data-theme="light"] #iv2-sidebar { background: #ffffff !important; border-left-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] #iv2-avatar-wrap { background: #dde3f5 !important; } html[data-theme="light"] #iv2-question-card { background: #ffffff !important; border-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] #iv2-question-text { color: #0a0f1e !important; } html[data-theme="light"] #iv2-feedback-panel { background: #f5f8ff !important; border-top-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] #iv2-transcript { color: #1a2540 !important; } html[data-theme="light"] #iv2-controls { background: rgba(255,255,255,.97) !important; border-top-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .iv2-btn { background: #f0f4fc !important; border-color: rgba(0,20,80,.12) !important; color: #4a5878 !important; } html[data-theme="light"] .iv2-score { color: #007a3d !important; } /* ══════════════════════════════════════════════════════════════════ 27. AUTOMATION VIEW (automation-view.html) ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .hd { border-bottom-color: rgba(0,20,80,.12) !important; } html[data-theme="light"] .brand-name { color: #0a0f1e !important; } html[data-theme="light"] .wrap { background: #f2f5ff !important; } html[data-theme="light"] .section-card, html[data-theme="light"] .aw-card { background: #ffffff !important; border-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .stat-grid .stat-val { color: #0a0f1e !important; } html[data-theme="light"] .stat-grid .stat-label { color: #6b7a99 !important; } html[data-theme="light"] .log-row { border-bottom-color: rgba(0,20,80,.06) !important; } html[data-theme="light"] .log-row:hover { background: rgba(26,95,200,.04) !important; } html[data-theme="light"] .log-msg { color: #1a2540 !important; } html[data-theme="light"] .log-time { color: #8a9abc !important; } html[data-theme="light"] .result-card { background: #ffffff !important; border-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .result-title { color: #0a0f1e !important; } html[data-theme="light"] .result-meta { color: #6b7a99 !important; } /* ══════════════════════════════════════════════════════════════════ 28. PORTFOLIO WORLD FIRST (portfolio-world-first.html) ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .pwf-nav { background: rgba(255,255,255,.97) !important; border-bottom-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .pwf-hero { background: #f2f5ff !important; } html[data-theme="light"] .pwf-section { background: #f2f5ff !important; } html[data-theme="light"] .pwf-card, html[data-theme="light"] .wf-card { background: #ffffff !important; border-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .wf-title { color: #0a0f1e !important; -webkit-text-fill-color: #0a0f1e !important; background-image: none !important; } html[data-theme="light"] .wf-body { color: #4a5878 !important; } html[data-theme="light"] .wf-badge { color: #6b7a99 !important; } html[data-theme="light"] .tech-tag { background: rgba(0,20,80,.06) !important; border-color: rgba(0,20,80,.14) !important; color: #4a5878 !important; } html[data-theme="light"] .metric-val { color: #0a0f1e !important; -webkit-text-fill-color: #0a0f1e !important; background-image: none !important; } /* ══════════════════════════════════════════════════════════════════ KNOWLEDGE BASE — white / light theme ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .kb-cat-item { background: #ffffff !important; border-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .kb-cat-item:hover { background: rgba(26,95,200,.04) !important; border-color: rgba(26,95,200,.25) !important; } html[data-theme="light"] .kb-cat-name { color: #0a0f1e !important; } html[data-theme="light"] .kb-cat-desc { color: #4a5878 !important; } html[data-theme="light"] .kb-cat-count { color: #1a5fc8 !important; } html[data-theme="light"] .kb-trend-item { border-bottom-color: rgba(0,20,80,.08) !important; } html[data-theme="light"] .kb-trend-item:hover .kb-trend-title { color: #1a5fc8 !important; } html[data-theme="light"] .kb-trend-title { color: #0a0f1e !important; } html[data-theme="light"] .kb-trend-num { color: #6b7a99 !important; } html[data-theme="light"] .kb-trend-views { color: #6b7a99 !important; } /* ══════════════════════════════════════════════════════════════════ TOOLS LIBRARY — white / light theme ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .tool-card { background: #ffffff !important; border-color: rgba(0,20,80,.10) !important; } html[data-theme="light"] .tool-card:hover { border-color: rgba(108,40,217,.30) !important; background: rgba(108,40,217,.03) !important; } html[data-theme="light"] .tool-logo { background: rgba(0,20,80,.05) !important; } html[data-theme="light"] .tool-name { color: #0a0f1e !important; } html[data-theme="light"] .tool-category { color: #6b7a99 !important; } html[data-theme="light"] .tool-desc { color: #1a2540 !important; } html[data-theme="light"] .tool-rating { color: #6b7a99 !important; } html[data-theme="light"] .tool-link { color: #6c28d9 !important; } html[data-theme="light"] .tool-price.free { background: rgba(0,160,72,.08) !important; color: #006e2e !important; border-color: rgba(0,160,72,.20) !important; } html[data-theme="light"] .tool-price.freemium { background: rgba(0,100,200,.08) !important; color: #004ea8 !important; border-color: rgba(0,100,200,.20) !important; } html[data-theme="light"] .tool-price.paid { background: rgba(180,110,0,.08) !important; color: #7a4a00 !important; border-color: rgba(180,110,0,.20) !important; }