/* ============================================================ GOLEX — Dark / "Dev" Theme Overrides Applied when is set. ============================================================ */ /* ============================================================ DARK MODE — "Dim" Premium Redesign (Twitter/X-Inspired) ============================================================ Base philosophy: • Deep blue-gray foundation (#15202B) — warm enough to prevent eye strain, dark enough for true contrast. • Surface hierarchy: bg → surface → panel, each stepping ~7-9 units lighter so every card/input has tangible depth. • Typography: crisp off-white (#F7F9F9) for headers, cool muted steel (#8899A6) for secondary text — zero halation. • Borders: solid, opaque #253341 lines that define edges crisply. • Accent blue (#1D9BF0) sits in the sweet spot — won't visually "vibrate" on this blue-gray background unlike pure electric blues. • Shadows replaced with luminous blue glow boxes for interactive lift — no dark muddy drop shadows on dark surfaces. ============================================================ */ html[data-theme="dev"] { /* — Base Palette — */ --bg: #15202B; /* Twitter Dim: primary app background */ --surface: #1E2732; /* Cards, input fields, list rows */ --panel: rgba(21, 32, 43, 0.97); /* Glass panels / sidebars */ --panel-solid: #1E2732; /* Solid panel fallback */ /* — Borders — crisp, opaque; no rgba blur that disappears on dark bg */ --border: #253341; /* Default edge — clearly visible */ --border-hover: #38444D; /* On hover — gentle lift */ --border-focus: #1D9BF0; /* Active input ring — accent blue */ /* — Accent System — */ --accent: #1D9BF0; /* Primary blue — calm, premium */ --accent-dark: #1A8CD8; /* Pressed / darker state */ --accent-light: #60BBEF; /* Hover shimmer / lighter tint */ --accent2: #00BA7C; /* Success green */ --accent2-light:#00D68F; --accent3: #7C6AF7; /* Purple accent */ --accent3-light:#9D8FFA; --danger: #F4245E; --danger-light: #FF6B8A; --success: #00BA7C; --success-light:#00D68F; --warning: #FFB800; --warning-light:#FCD34D; /* — Glow System — replaces muddy drop-shadows on dark surfaces — */ --glow-accent: rgba(29, 155, 240, 0.20); --glow-accent-soft: rgba(29, 155, 240, 0.08); /* — Typography — */ --text: #F7F9F9; /* Crisp off-white — zero halation */ --text-secondary: #8899A6; /* Cool muted steel for subtext */ --muted: #536471; /* Disabled / placeholder / metadata */ --muted-light: rgba(83, 100, 113, 0.7); /* — Fonts (Dev theme keeps IBM Plex family) — */ --font-display: 'IBM Plex Sans', system-ui, sans-serif; --font-brand: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace; /* — Shadows (luminous glow over flat dark, not muddy drops) — */ --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255,255,255,0.05); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255,255,255,0.06); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(255,255,255,0.05); --shadow-glow: 0 0 0 1px #253341, 0 0 24px rgba(29, 155, 240, 0.12); --shadow-accent: 0 0 0 1px rgba(29, 155, 240, 0.35), 0 4px 20px rgba(29, 155, 240, 0.22); --shadow-accent-lg:0 0 0 1px rgba(29, 155, 240, 0.40), 0 8px 32px rgba(29, 155, 240, 0.30); --qr-canvas-bg: #15202B; } /* ── Dark Mode: Ambient body gradients (Dim palette) ── */ html[data-theme="dev"] body::before { background: radial-gradient(ellipse at 15% 0%, rgba(29, 155, 240, 0.07), transparent 55%), radial-gradient(ellipse at 88% 95%, rgba(0, 186, 124, 0.04), transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(124, 106, 247, 0.03), transparent 70%); } /* ── Dark Mode: Subtle grain texture overlay ── */ html[data-theme="dev"] body::after { background-image: linear-gradient(rgba(29, 155, 240, 0.012) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 155, 240, 0.012) 1px, transparent 1px), url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.018'/%3E%3C/svg%3E"); background-size: 40px 40px, 40px 40px, auto; opacity: 0.6; } /* ── Dark Mode: Desktop sidebar ── */ html[data-theme="dev"] .desktop-sidebar { background: rgba(21, 32, 43, 0.99); border-right-color: #253341; } /* ── Dark Mode: Loading screen branding ── */ html[data-theme="dev"] .loading-logo { background: linear-gradient(135deg, #60BBEF, #1D9BF0, #00BA7C); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; letter-spacing: 4px; } html[data-theme="dev"] .loading-sub { font-family: 'IBM Plex Mono', monospace; color: rgba(29, 155, 240, 0.55); } html[data-theme="dev"] .loading-fill { background: linear-gradient(90deg, transparent, #1D9BF0, #00BA7C, transparent); } /* ── Dark Mode: Login / Auth screen emblem ── */ html[data-theme="dev"] .login-emblem { background: linear-gradient(135deg, rgba(29, 155, 240, 0.14), rgba(124, 106, 247, 0.10)); border-color: rgba(29, 155, 240, 0.26); box-shadow: 0 0 40px rgba(29, 155, 240, 0.10), inset 0 0 30px rgba(29, 155, 240, 0.04); } /* ── Dark Mode: Tagline badge ── */ html[data-theme="dev"] .tagline { color: rgba(29, 155, 240, 0.80); border-color: rgba(29, 155, 240, 0.18); background: rgba(29, 155, 240, 0.06); font-family: 'IBM Plex Mono', monospace; } /* ── Dark Mode: Buttons ── Primary: solid Twitter-blue with luminous glow lift (no dark drop-shadow). Ghost: crisp border, zero background, transitions to faint blue tint on hover. ── */ html[data-theme="dev"] .btn-primary { background: linear-gradient(160deg, #1D9BF0 0%, #1A8CD8 100%); color: #FFFFFF; font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; letter-spacing: 0.3px; box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.40), 0 4px 20px rgba(29, 155, 240, 0.22); } html[data-theme="dev"] .btn-primary:hover { background: linear-gradient(160deg, #1EA8FF 0%, #1D9BF0 100%); box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.55), 0 6px 28px rgba(29, 155, 240, 0.32); } html[data-theme="dev"] .btn-ghost { color: #8899A6; border-color: #253341; background: transparent; } html[data-theme="dev"] .btn-ghost:hover { border-color: #38444D; color: #F7F9F9; background: rgba(29, 155, 240, 0.05); } /* ── Dark Mode: Input fields ── Resting: #1E2732 background (lighter than bg) + #253341 border → tangible depth. Focus: #1D9BF0 ring with soft glow — clearly active, never eye-straining. ── */ html[data-theme="dev"] .input:focus { border-color: #1D9BF0; box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.14); background: #1E2732; } html[data-theme="dev"] .input { background: #1E2732 !important; border-color: #253341; color: #F7F9F9; } html[data-theme="dev"] select.input option { background: #1E2732; color: #F7F9F9; } /* ── Dark Mode: Skill select pills ── */ html[data-theme="dev"] .skill-select-pill { background: #1E2732; border-color: #253341; color: #8899A6; } html[data-theme="dev"] .skill-select-pill:hover { background: rgba(29, 155, 240, 0.10); border-color: rgba(29, 155, 240, 0.36); color: #F7F9F9; } html[data-theme="dev"] .skill-select-pill.selected { background: #1D9BF0; border-color: #1D9BF0; color: #ffffff; box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.50), 0 3px 14px rgba(29, 155, 240, 0.28); } /* ── Dark Mode: Filter pills & people skill pills ── */ html[data-theme="dev"] .filter-pill, html[data-theme="dev"] .people-skill-pill { background: #1E2732; border-color: #253341; color: #8899A6; box-shadow: none; } html[data-theme="dev"] .filter-pill:hover, html[data-theme="dev"] .people-skill-pill:hover { background: rgba(29, 155, 240, 0.10); border-color: rgba(29, 155, 240, 0.34); color: #F7F9F9; box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.20); } html[data-theme="dev"] .filter-pill.active, html[data-theme="dev"] .people-skill-pill.active { background: #1D9BF0; border-color: #1D9BF0; color: #ffffff; box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.50), 0 3px 14px rgba(29, 155, 240, 0.28); } /* ── Dark Mode: Nav button active state ── */ html[data-theme="dev"] .nav-btn.active { background: rgba(29, 155, 240, 0.12); color: #1D9BF0; } html[data-theme="dev"] .nav-btn.active .nav-icon { filter: drop-shadow(0 0 5px rgba(29, 155, 240, 0.50)); } /* ── Dark Mode: Chat empty state ── */ html[data-theme="dev"] .chat-empty-icon { background: linear-gradient(135deg, rgba(29, 155, 240, 0.10), rgba(0, 186, 124, 0.07)); border-color: rgba(29, 155, 240, 0.18); box-shadow: 0 0 40px rgba(29, 155, 240, 0.06), inset 0 0 24px rgba(29, 155, 240, 0.03); } html[data-theme="dev"] .chat-empty-hint { color: rgba(29, 155, 240, 0.70); border-color: rgba(29, 155, 240, 0.14); background: rgba(29, 155, 240, 0.05); font-family: 'IBM Plex Mono', monospace; } /* ── Dark Mode: Avatar button glow ring ── */ html[data-theme="dev"] .avatar-btn { border-color: rgba(29, 155, 240, 0.50); box-shadow: 0 0 14px rgba(29, 155, 240, 0.16); } html[data-theme="dev"] .avatar-btn:hover { box-shadow: 0 0 22px rgba(29, 155, 240, 0.30); border-color: #60BBEF; } /* ── Dark Mode: Profile modal base ── */ html[data-theme="dev"] #profile-modal { background: rgba(21, 32, 43, 1.0); } /* ── Dark Mode: Global orbit glow variable ── */ html[data-theme="dev"] * { --orbit-glow: rgba(29, 155, 240, 0.14), rgba(0, 186, 124, 0.06); } /* ── Dark Mode: Poll components ── */ html[data-theme="dev"] .poll-option-btn { background: #1E2732; border-color: #253341; color: var(--text); } html[data-theme="dev"] .poll-option-btn:hover:not(:disabled) { border-color: rgba(29, 155, 240, 0.30); } html[data-theme="dev"] .poll-option-btn.voted { border-color: #1D9BF0; background: rgba(29, 155, 240, 0.10); box-shadow: 0 0 0 1.5px #1D9BF0; } html[data-theme="dev"] .poll-option-btn .poll-bar-fill { background: rgba(29, 155, 240, 0.09); } html[data-theme="dev"] .poll-option-btn .poll-bar-fill.winner { background: rgba(29, 155, 240, 0.18); } html[data-theme="dev"] .poll-option-pct { color: #60BBEF; } html[data-theme="dev"] .poll-builder { background: #1E2732; border-color: #253341; } html[data-theme="dev"] .poll-add-option-btn { border-color: rgba(29, 155, 240, 0.22); color: #60BBEF; } html[data-theme="dev"] .poll-add-option-btn:hover { background: rgba(29, 155, 240, 0.08); border-color: rgba(29, 155, 240, 0.36); } html[data-theme="dev"] .comm-post-type-badge.type-poll { background: rgba(124, 106, 247, 0.12); color: #9D8FFA; border-color: rgba(124, 106, 247, 0.24); } /* ── Dark Mode: Buildlog / Project timeline ── */ html[data-theme="dev"] .buildlog-entry-card { background: #1E2732; border-color: #253341; box-shadow: none; } html[data-theme="dev"] .buildlog-entry-card:hover { border-color: rgba(29, 155, 240, 0.24); box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.12); } html[data-theme="dev"] .buildlog-entry::before { background: rgba(29, 155, 240, 0.14); } html[data-theme="dev"] .buildlog-dot.update { background: #1D9BF0; } html[data-theme="dev"] .buildlog-dot.milestone { background: linear-gradient(135deg, #FFB800, #1D9BF0); } html[data-theme="dev"] .buildlog-dot.media { background: #00BA7C; } html[data-theme="dev"] .buildlog-entry-type-badge.update { background: rgba(29, 155, 240, 0.10); color: #60BBEF; } html[data-theme="dev"] .buildlog-entry-type-badge.milestone { background: rgba(255, 184, 0, 0.10); color: #FFD55E; } html[data-theme="dev"] .buildlog-entry-type-badge.media { background: rgba(0, 186, 124, 0.10); color: #00D68F; } html[data-theme="dev"] .buildlog-add-btn { background: linear-gradient(160deg, #1D9BF0, #1A8CD8); box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.40), 0 4px 18px rgba(29, 155, 240, 0.24); } html[data-theme="dev"] .buildlog-modal-sheet { background: #15202B; } html[data-theme="dev"] .buildlog-type-card { background: #1E2732; border-color: #253341; } html[data-theme="dev"] .buildlog-type-card.selected { border-color: rgba(29, 155, 240, 0.44); background: rgba(29, 155, 240, 0.08); } html[data-theme="dev"] .buildlog-empty-icon { background: #1E2732; border-color: #253341; } /* ── Dark Mode: Connection status bar ── */ html[data-theme="dev"] #connection-bar.online { background: rgba(0, 186, 124, 0.07); border-color: rgba(0, 186, 124, 0.20); color: #00D68F; } @property --bg { syntax: ''; inherits: true; initial-value: #EEF2F8; } @property --surface { syntax: ''; inherits: true; initial-value: #FFFFFF; } @property --panel-solid { syntax: ''; inherits: true; initial-value: #FFFFFF; } @property --text { syntax: ''; inherits: true; initial-value: #0F172A; } @property --text-secondary{ syntax: ''; inherits: true; initial-value: #475569; } @property --muted { syntax: ''; inherits: true; initial-value: #94A3B8; } @property --accent { syntax: ''; inherits: true; initial-value: #2357E8; } @property --accent-dark { syntax: ''; inherits: true; initial-value: #1A46CC; } @property --accent-light { syntax: ''; inherits: true; initial-value: #3B7CF6; } @property --accent2 { syntax: ''; inherits: true; initial-value: #059669; } @property --accent2-light { syntax: ''; inherits: true; initial-value: #10B981; } @property --danger { syntax: ''; inherits: true; initial-value: #DC2626; } @property --success { syntax: ''; inherits: true; initial-value: #059669; } @property --warning { syntax: ''; inherits: true; initial-value: #D97706; } @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root) { animation: 550ms cubic-bezier(0.4, 0, 0.2, 1) both golex-theme-out; } ::view-transition-new(root) { animation: 550ms cubic-bezier(0.4, 0, 0.2, 1) both golex-theme-in; } } @keyframes golex-theme-out { from { opacity: 1; } to { opacity: 0; } } @keyframes golex-theme-in { from { opacity: 0; } to { opacity: 1; } } html.theme-transitioning { transition: --bg 480ms cubic-bezier(0.4, 0, 0.2, 1), --surface 480ms cubic-bezier(0.4, 0, 0.2, 1), --panel-solid 480ms cubic-bezier(0.4, 0, 0.2, 1), --text 480ms cubic-bezier(0.4, 0, 0.2, 1), --text-secondary 480ms cubic-bezier(0.4, 0, 0.2, 1), --muted 480ms cubic-bezier(0.4, 0, 0.2, 1), --accent 480ms cubic-bezier(0.4, 0, 0.2, 1), --accent-dark 480ms cubic-bezier(0.4, 0, 0.2, 1), --accent-light 480ms cubic-bezier(0.4, 0, 0.2, 1), --accent2 480ms cubic-bezier(0.4, 0, 0.2, 1), --accent2-light 480ms cubic-bezier(0.4, 0, 0.2, 1), --danger 480ms cubic-bezier(0.4, 0, 0.2, 1), --success 480ms cubic-bezier(0.4, 0, 0.2, 1), --warning 480ms cubic-bezier(0.4, 0, 0.2, 1) !important; } html.theme-transitioning body, html.theme-transitioning .screen, html.theme-transitioning #main-nav, html.theme-transitioning .desktop-sidebar, html.theme-transitioning .surface, html.theme-transitioning [class*="surface"], html.theme-transitioning .panel, html.theme-transitioning [class*="panel"], html.theme-transitioning .card, html.theme-transitioning [class*="card"], html.theme-transitioning .modal, html.theme-transitioning [class*="modal"], html.theme-transitioning .topbar, html.theme-transitioning [class*="topbar"], html.theme-transitioning .btn-primary, html.theme-transitioning .btn-ghost, html.theme-transitioning .nav-btn, html.theme-transitioning .input, html.theme-transitioning .post-card, html.theme-transitioning .user-item, html.theme-transitioning .msg-bubble, html.theme-transitioning .chat-topbar, html.theme-transitioning #chat-area, html.theme-transitioning #toast, html.theme-transitioning .filter-pill, html.theme-transitioning .skill-select-pill, html.theme-transitioning .loading-screen, html.theme-transitioning #login-screen, html.theme-transitioning .user-profile-sheet, html.theme-transitioning .bottom-sheet, html.theme-transitioning .guild-msg-bubble, html.theme-transitioning .room-card, html.theme-transitioning .notif-item { transition: background-color 480ms cubic-bezier(0.4, 0, 0.2, 1), color 480ms cubic-bezier(0.4, 0, 0.2, 1), border-color 480ms cubic-bezier(0.4, 0, 0.2, 1) !important; } html.theme-transitioning body::before, html.theme-transitioning body::after { transition: opacity 480ms cubic-bezier(0.4, 0, 0.2, 1) !important; } .nova-pref-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 4px 0 14px; } .nova-pref-info { display: flex; align-items: center; gap: 10px; } .nova-pref-icon { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-light)); display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; flex-shrink: 0; } .nova-pref-label { font-size: 13.5px; font-weight: 600; color: var(--text); font-family: var(--font-display); } .nova-pref-sub { font-size: 11px; color: var(--muted); font-family: var(--font-mono); margin-top: 2px; } .nova-pref-toggle { width: 44px; height: 26px; border-radius: 13px; background: var(--accent); cursor: pointer; position: relative; flex-shrink: 0; transition: background 0.2s var(--ease); } .nova-pref-toggle[aria-checked="false"] { background: var(--border); background-color: #CBD5E1; } .nova-pref-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.2s var(--ease-spring); box-shadow: 0 1px 4px rgba(0,0,0,0.18); } .nova-pref-toggle[aria-checked="true"] .nova-pref-knob { transform: translateX(18px); } body.nova-disabled #nova-fab, body.nova-disabled .nova-panel { display: none !important; } .theme-toggle-wrap { display: flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 12px; flex-shrink: 0; } .theme-toggle-label { font-size: 10px; font-family: var(--font-mono); color: var(--muted); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; transition: color 0.3s; user-select: none; } .theme-toggle-label.active-label { color: var(--accent); } .theme-toggle-track { position: relative; width: 44px; height: 24px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; flex-shrink: 0; } .theme-toggle-track:hover { border-color: var(--border-hover); box-shadow: 0 0 12px var(--glow-accent-soft); } /* ── Dark Mode: Theme toggle switch ── */ html[data-theme="dev"] .theme-toggle-track { background: rgba(29, 155, 240, 0.14); border-color: rgba(29, 155, 240, 0.36); box-shadow: 0 0 12px rgba(29, 155, 240, 0.10); } .theme-toggle-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s, box-shadow 0.3s; display: flex; align-items: center; justify-content: center; font-size: 8px; line-height: 1; } .theme-toggle-knob::after { content: ''; display: block; width: 9px; height: 9px; background-color: rgba(0,0,0,0.4); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cline x1='12' y1='2' x2='12' y2='6'/%3E%3Cline x1='12' y1='18' x2='12' y2='22'/%3E%3Cline x1='4.22' y1='4.22' x2='7.05' y2='7.05'/%3E%3Cline x1='16.95' y1='16.95' x2='19.78' y2='19.78'/%3E%3Cline x1='2' y1='12' x2='6' y2='12'/%3E%3Cline x1='18' y1='12' x2='22' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='7.05' y2='16.95'/%3E%3Cline x1='16.95' y1='7.05' x2='19.78' y2='4.22'/%3E%3C/svg%3E") no-repeat center/contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cline x1='12' y1='2' x2='12' y2='6'/%3E%3Cline x1='12' y1='18' x2='12' y2='22'/%3E%3Cline x1='4.22' y1='4.22' x2='7.05' y2='7.05'/%3E%3Cline x1='16.95' y1='16.95' x2='19.78' y2='19.78'/%3E%3Cline x1='2' y1='12' x2='6' y2='12'/%3E%3Cline x1='18' y1='12' x2='22' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='7.05' y2='16.95'/%3E%3Cline x1='16.95' y1='7.05' x2='19.78' y2='4.22'/%3E%3C/svg%3E") no-repeat center/contain; opacity: 0.6; transition: opacity 0.3s; } /* ── Dark Mode: Toggle knob accent glow ── */ html[data-theme="dev"] .theme-toggle-knob { transform: translateX(20px); background: #1D9BF0; box-shadow: 0 0 10px rgba(29, 155, 240, 0.55), 0 0 20px rgba(29, 155, 240, 0.20); } html[data-theme="dev"] .theme-toggle-knob::after { content: ''; display: block; width: 9px; height: 9px; background-color: #FFFFFF; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E") no-repeat center/contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E") no-repeat center/contain; opacity: 1; } /* ── Dark Mode: Toggle label text ── */ html[data-theme="dev"] .theme-toggle-label { color: rgba(29, 155, 240, 0.55); } html[data-theme="dev"] .theme-toggle-label.active-label { color: #60BBEF; } .theme-pref-row { margin: 4px 0 10px; } .theme-pref-row .theme-toggle-wrap { margin: 0; margin-left: 10px; margin-right: 0; } /* ── Dark Mode: Room cards ── */ html[data-theme="dev"] .room-card { background: #1E2732; box-shadow: none; } html[data-theme="dev"] .room-card::before { background: linear-gradient(135deg, rgba(29, 155, 240, 0.04), transparent); } html[data-theme="dev"] .room-card:hover { border-color: rgba(29, 155, 240, 0.24); background: rgba(29, 155, 240, 0.05); box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.14); } html[data-theme="dev"] .room-card-icon { background: linear-gradient(135deg, rgba(29, 155, 240, 0.14), rgba(0, 186, 124, 0.08)); border-color: rgba(29, 155, 240, 0.18); } html[data-theme="dev"] .room-entry-pill { background: rgba(29, 155, 240, 0.09); color: #60BBEF; border-color: rgba(29, 155, 240, 0.18); } html[data-theme="dev"] .room-type-card { background: #1E2732; border-color: #253341; } html[data-theme="dev"] .room-type-card:hover { border-color: rgba(29, 155, 240, 0.24); } html[data-theme="dev"] .room-type-card.selected { border-color: rgba(29, 155, 240, 0.44); background: rgba(29, 155, 240, 0.08); box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.20); } html[data-theme="dev"] .rooms-top { background: rgba(21, 32, 43, 0.92); } html[data-theme="dev"] .rooms-create-btn { background: linear-gradient(160deg, #1D9BF0, #1A8CD8); box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.40), 0 4px 18px rgba(29, 155, 240, 0.24); } html[data-theme="dev"] .rooms-create-btn:hover { box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.55), 0 6px 24px rgba(29, 155, 240, 0.36); } html[data-theme="dev"] .room-submit-wrap { background: linear-gradient(to top, rgba(21, 32, 43, 0.98) 70%, transparent); } html[data-theme="dev"] .room-create-topbar { background: rgba(21, 32, 43, 0.92); } /* ── Dark Mode: Input override (secondary rule) ── */ html[data-theme="dev"] .input { background: #1E2732 !important; border-color: #253341; } /* ── Dark Mode: Skill tags & goal pills ── */ html[data-theme="dev"] .skill-tag { background: rgba(29, 155, 240, 0.10); border-color: rgba(29, 155, 240, 0.22); color: #60BBEF; } html[data-theme="dev"] .tag-add-btn { background: rgba(29, 155, 240, 0.10); border-color: rgba(29, 155, 240, 0.22); color: #60BBEF; } html[data-theme="dev"] .tag-add-btn:hover { background: rgba(29, 155, 240, 0.18); border-color: rgba(29, 155, 240, 0.38); } html[data-theme="dev"] .goal-pill.selected { background: rgba(0, 186, 124, 0.10); border-color: rgba(0, 186, 124, 0.30); } /* ── Dark Mode: Skill level badges ── */ html[data-theme="dev"] .badge-advanced { background: rgba(29, 155, 240, 0.10); color: #60BBEF; border-color: rgba(29, 155, 240, 0.24); } html[data-theme="dev"] .badge-intermediate { background: rgba(0, 186, 124, 0.09); border-color: rgba(0, 186, 124, 0.24); } /* ── Dark Mode: User list items & avatars ── */ html[data-theme="dev"] .user-item:hover { background: rgba(29, 155, 240, 0.05); border-color: rgba(29, 155, 240, 0.18); } html[data-theme="dev"] .user-avatar { background: linear-gradient(135deg, rgba(29, 155, 240, 0.20), rgba(124, 106, 247, 0.14)); color: #60BBEF; } /* ── Dark Mode: Recommendation cards ── */ html[data-theme="dev"] .rec-card { background: #1E2732; border-color: #253341; box-shadow: none; } html[data-theme="dev"] .rec-card:hover { background: rgba(29, 155, 240, 0.06); border-color: rgba(29, 155, 240, 0.22); box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.14); } html[data-theme="dev"] .rec-skill { color: #60BBEF; opacity: 0.80; } /* ── Dark Mode: Chat UI chrome ── */ html[data-theme="dev"] .chat-topbar { background: rgba(21, 32, 43, 0.96); border-bottom-color: #253341; } html[data-theme="dev"] .back-btn:hover { background: rgba(29, 155, 240, 0.08); border-color: rgba(29, 155, 240, 0.26); } html[data-theme="dev"] .icon-btn:hover { background: rgba(29, 155, 240, 0.07); border-color: rgba(29, 155, 240, 0.24); } html[data-theme="dev"] .chat-input-area { background: rgba(21, 32, 43, 0.96); border-top-color: #253341; } html[data-theme="dev"] .chat-attach-btn:hover { background: rgba(29, 155, 240, 0.07); border-color: rgba(29, 155, 240, 0.24); } html[data-theme="dev"] .attach-opt:hover { background: rgba(29, 155, 240, 0.08); } html[data-theme="dev"] #chat-search-bar { background: rgba(21, 32, 43, 0.92); } html[data-theme="dev"] #img-preview-bar { background: rgba(21, 32, 43, 0.96); } html[data-theme="dev"] #reply-preview { background: rgba(29, 155, 240, 0.05); border-left-color: #1D9BF0; } html[data-theme="dev"] .msg-reply-ctx { background: rgba(29, 155, 240, 0.05); border-left-color: rgba(29, 155, 240, 0.40); } html[data-theme="dev"] .msg-reply-ctx:hover { background: rgba(29, 155, 240, 0.10); } html[data-theme="dev"] .msg.sent .msg-bubble { box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.20), 0 3px 14px rgba(29, 155, 240, 0.14); } html[data-theme="dev"] .msg-action-btn:hover { background: rgba(29, 155, 240, 0.09); } html[data-theme="dev"] .reaction-chip:hover, html[data-theme="dev"] .reaction-chip.mine { background: rgba(29, 155, 240, 0.10); border-color: rgba(29, 155, 240, 0.30); } html[data-theme="dev"] .msg-file-bubble:hover { border-color: rgba(29, 155, 240, 0.30); background: rgba(29, 155, 240, 0.05); } html[data-theme="dev"] .upload-spinner { border-color: rgba(29, 155, 240, 0.16); } html[data-theme="dev"] .starter { background: rgba(29, 155, 240, 0.08); border-color: rgba(29, 155, 240, 0.18); color: #60BBEF; } html[data-theme="dev"] .starter:hover { background: rgba(29, 155, 240, 0.14); border-color: rgba(29, 155, 240, 0.32); } /* ── Dark Mode: Profile modal & stat chips ── */ html[data-theme="dev"] #profile-modal { background: rgba(21, 32, 43, 0.99) !important; scrollbar-color: rgba(29, 155, 240, 0.14) transparent; } html[data-theme="dev"] .modal-topbar { background: rgba(21, 32, 43, 0.96); } html[data-theme="dev"] .modal-avatar { box-shadow: 0 0 28px rgba(29, 155, 240, 0.16); } html[data-theme="dev"] .modal-avatar:hover { box-shadow: 0 0 38px rgba(29, 155, 240, 0.28); } html[data-theme="dev"] .stat-chip { background: rgba(29, 155, 240, 0.06); border-color: rgba(29, 155, 240, 0.14); } html[data-theme="dev"] #cleanup-status { background: rgba(29, 155, 240, 0.05); border-color: rgba(29, 155, 240, 0.12); color: #60BBEF; } /* ── Dark Mode: Avatar button (override) ── */ html[data-theme="dev"] .avatar-btn { border-color: rgba(29, 155, 240, 0.50) !important; box-shadow: 0 0 14px rgba(29, 155, 240, 0.16) !important; } /* ── Dark Mode: Drag-drop overlay & lightbox ── */ html[data-theme="dev"] #drop-overlay { background: rgba(29, 155, 240, 0.06); border-color: rgba(29, 155, 240, 0.38); } html[data-theme="dev"] #lightbox-download { background: rgba(29, 155, 240, 0.14); border-color: rgba(29, 155, 240, 0.32); } html[data-theme="dev"] #lightbox-download:hover { background: rgba(29, 155, 240, 0.26); } /* ── Dark Mode: Scroll-to-bottom FAB ── */ html[data-theme="dev"] #scroll-bottom-btn { background: #1D9BF0; box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.40), 0 4px 16px rgba(29, 155, 240, 0.28); } /* ── Dark Mode: Golex expand / install overlay ── */ html[data-theme="dev"] #golex-expand-overlay { background: rgba(21, 32, 43, 0.99); } html:not([data-theme="dev"]) #golex-expand-overlay .expand-tagline { color: var(--text-secondary); } html:not([data-theme="dev"]) #golex-expand-overlay .expand-dismiss { color: var(--text-secondary); border-color: var(--border); } html:not([data-theme="dev"]) #golex-expand-overlay .expand-dismiss:hover { border-color: var(--border-hover); } html:not([data-theme="dev"]) #chat-area { background: #F0F4FA; } html:not([data-theme="dev"]) .msg.received .msg-bubble { background: #FFFFFF; border: 1px solid rgba(15, 23, 42, 0.07); color: var(--text); box-shadow: var(--shadow-sm); } html:not([data-theme="dev"]) #main-nav { background: rgba(248, 249, 252, 1.0); } html:not([data-theme="dev"]) .screen-topbar, html:not([data-theme="dev"]) .explore-topbar, html:not([data-theme="dev"]) .guild-topbar { background: rgba(255, 255, 255, 1.0); border-bottom-color: rgba(15, 23, 42, 0.07); }