/* Brutus CRM 7 — design tokens, taken verbatim from brutuscrm.ai (see CRMBuild/13_UI_DESIGN.md) */ :root { /* Brand */ --cyan: #29abe2; --cyan-bright: #4cc6ff; --blue: #2f6fb0; --blue-deep: #1c4a86; --red: #e8412f; --red-soft: #ff6a4d; /* Dark surface system */ --bg: #070d18; --bg-2: #0b1322; --panel: #0f1b2e; --panel-2: #131f34; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14); /* Text */ --ink: #eef4ff; --muted: #9fb1c9; --muted-2: #6e8099; /* Gradients & effects */ --grad-brand: linear-gradient(120deg, #4cc6ff 0%, #29abe2 38%, #2f6fb0 70%, #1c4a86 100%); --grad-hot: linear-gradient(120deg, #ff6a4d 0%, #e8412f 100%); --grad-text: linear-gradient(100deg, #8fe1ff 0%, #29abe2 45%, #6aa9ff 100%); --ring: 0 0 0 1px var(--line); --shadow: 0 24px 60px -24px rgba(0,0,0,.65); --shadow-glow: 0 0 0 1px rgba(76,198,255,.18), 0 30px 80px -30px rgba(41,171,226,.45); --radius: 18px; --radius-sm: 12px; --ease: cubic-bezier(.22,.61,.36,1); /* Type */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-head: 'Space Grotesk', var(--font-body); /* Semantic — CRM concepts (13_UI_DESIGN §semantic mapping) */ --lead-cold: var(--muted-2); --lead-warm: var(--cyan); --lead-hot: var(--red-soft); } /* ── Light theme (user directive 2026-08-19): high-contrast option for people who have a hard time seeing the separation on the dark UI. A class on swaps the token set above; strong dark-on-white text and HEAVY borders are the point. Applied by window.brutusTheme() from Employee.ThemeKey (/mysettings). ── */ html.theme-light { --cyan: #0b7ac0; --cyan-bright: #095e94; --blue: #175a99; --blue-deep: #103e6a; --red: #c62828; --red-soft: #d84315; --bg: #eef1f5; --bg-2: #e3e8ef; --panel: #ffffff; --panel-2: #f3f6fa; --line: rgba(15,30,60,.25); --line-2: rgba(15,30,60,.45); --ink: #101822; --muted: #3f4f63; --muted-2: #5d7089; --grad-brand: linear-gradient(120deg, #095e94 0%, #0b7ac0 38%, #175a99 70%, #103e6a 100%); --grad-text: linear-gradient(100deg, #095e94 0%, #0b7ac0 45%, #175a99 100%); --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(30,45,70,.35); --shadow-glow: 0 0 0 1px rgba(11,122,192,.3), 0 16px 44px -22px rgba(11,122,192,.35); } html.theme-light ::selection { background: rgba(11,122,192,.22); } /* ── Palette themes (user-supplied swatches 2026-08-19): two more LIGHT bases and three DARK. ── */ /* Salt & Pepper — #FFFFFF · #D4D4D4 · #B3B3B3 · #2B2B2B (monochrome light) */ html.theme-salt { --cyan: #2b2b2b; --cyan-bright: #000000; --blue: #454545; --blue-deep: #1c1c1c; --red: #c62828; --red-soft: #d84315; --bg: #efefef; --bg-2: #e2e2e2; --panel: #ffffff; --panel-2: #f5f5f5; --line: rgba(0,0,0,.28); --line-2: rgba(0,0,0,.48); --ink: #1d1d1d; --muted: #4f4f4f; --muted-2: #757575; --grad-brand: linear-gradient(120deg, #454545 0%, #2b2b2b 45%, #1c1c1c 100%); --grad-text: linear-gradient(100deg, #1c1c1c 0%, #2b2b2b 50%, #454545 100%); --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(0,0,0,.35); --shadow-glow: 0 0 0 1px rgba(43,43,43,.3), 0 16px 44px -22px rgba(43,43,43,.35); } html.theme-salt ::selection { background: rgba(43,43,43,.18); } /* Yacht Club — #F2F0EF · #BBBDBC · #245F73 · #733E24 (light, deep teal accent, rust for hot) */ html.theme-yacht { --cyan: #245f73; --cyan-bright: #1b4856; --blue: #2d6d83; --blue-deep: #173d4a; --red: #a13a1c; --red-soft: #733e24; --bg: #f2f0ef; --bg-2: #e6e3e1; --panel: #ffffff; --panel-2: #f7f5f4; --line: rgba(36,50,60,.28); --line-2: rgba(36,50,60,.48); --ink: #1d2b33; --muted: #46555e; --muted-2: #68797f; --grad-brand: linear-gradient(120deg, #2d6d83 0%, #245f73 45%, #173d4a 100%); --grad-text: linear-gradient(100deg, #173d4a 0%, #245f73 50%, #2d6d83 100%); --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(23,61,74,.35); --shadow-glow: 0 0 0 1px rgba(36,95,115,.3), 0 16px 44px -22px rgba(36,95,115,.35); } html.theme-yacht ::selection { background: rgba(36,95,115,.2); } /* Calm Blue — #90D5FF · #57B9FF · #77B1D4 · #517891 (light, soft blues) */ html.theme-calm { --cyan: #1f7ec2; --cyan-bright: #16639b; --blue: #517891; --blue-deep: #355063; --red: #c62828; --red-soft: #d84315; --bg: #e5f1fa; --bg-2: #d8e9f6; --panel: #ffffff; --panel-2: #f1f8fd; --line: rgba(31,60,85,.28); --line-2: rgba(31,60,85,.48); --ink: #142c3d; --muted: #3d586c; --muted-2: #5d788c; --grad-brand: linear-gradient(120deg, #57b9ff 0%, #1f7ec2 45%, #355063 100%); --grad-text: linear-gradient(100deg, #16639b 0%, #1f7ec2 50%, #517891 100%); --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(31,60,85,.35); --shadow-glow: 0 0 0 1px rgba(31,126,194,.3), 0 16px 44px -22px rgba(31,126,194,.35); } html.theme-calm ::selection { background: rgba(87,185,255,.3); } /* Lavender Lullaby — #B5C7EB · #9EF0FF · #A4A5F5 · #8E70CF (light lavender pastels) */ html.theme-lavender { --cyan: #7a5cb8; --cyan-bright: #5f4496; --blue: #6a6bd0; --blue-deep: #4a4b9e; --red: #c62828; --red-soft: #d84315; --bg: #edeffa; --bg-2: #e1e4f5; --panel: #ffffff; --panel-2: #f5f6fd; --line: rgba(60,55,110,.28); --line-2: rgba(60,55,110,.48); --ink: #211d3a; --muted: #4c4870; --muted-2: #6c6892; --grad-brand: linear-gradient(120deg, #a4a5f5 0%, #8e70cf 45%, #4a4b9e 100%); --grad-text: linear-gradient(100deg, #5f4496 0%, #7a5cb8 50%, #6a6bd0 100%); --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(60,55,110,.35); --shadow-glow: 0 0 0 1px rgba(142,112,207,.3), 0 16px 44px -22px rgba(142,112,207,.35); } html.theme-lavender ::selection { background: rgba(164,165,245,.35); } /* Retro Calm — #81D8D0 · #D99E82 · #D7D982 · #AE82D9 (light, mint & plum) */ html.theme-retro { --cyan: #1c968c; --cyan-bright: #14756d; --blue: #8e5cc2; --blue-deep: #6a3f99; --red: #c05c34; --red-soft: #d99e82; --bg: #ecf6f4; --bg-2: #dfefec; --panel: #ffffff; --panel-2: #f4faf9; --line: rgba(25,80,75,.28); --line-2: rgba(25,80,75,.48); --ink: #143430; --muted: #3e5c58; --muted-2: #5f7c78; --grad-brand: linear-gradient(120deg, #81d8d0 0%, #1c968c 45%, #6a3f99 100%); --grad-text: linear-gradient(100deg, #14756d 0%, #1c968c 50%, #8e5cc2 100%); --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(25,80,75,.35); --shadow-glow: 0 0 0 1px rgba(28,150,140,.3), 0 16px 44px -22px rgba(28,150,140,.35); } html.theme-retro ::selection { background: rgba(129,216,208,.4); } /* Ocean Tide — #00D1D1 · #4052D6 · #00ADAD · #005C5C (dark, bright teal + indigo) */ html.theme-ocean { --cyan: #00d1d1; --cyan-bright: #4de8e8; --blue: #4052d6; --blue-deep: #005c5c; --bg: #041414; --bg-2: #061d1d; --panel: #0a2727; --panel-2: #0e3232; --ink: #e9fbfb; --muted: #8cc4c4; --muted-2: #558b8b; --grad-brand: linear-gradient(120deg, #4de8e8 0%, #00d1d1 38%, #00adad 70%, #005c5c 100%); --grad-text: linear-gradient(100deg, #b8f6f6 0%, #00d1d1 45%, #4052d6 100%); --shadow-glow: 0 0 0 1px rgba(77,232,232,.18), 0 30px 80px -30px rgba(0,209,209,.45); } html.theme-ocean ::selection { background: rgba(0,209,209,.3); } /* Peach Skyline — #FFDBBB · #BADDFF · #BAFFF5 · #496580 (light peach, slate accent) */ html.theme-peach { --cyan: #496580; --cyan-bright: #35506a; --blue: #3c6a94; --blue-deep: #2a4a68; --red: #c62828; --red-soft: #d84315; --bg: #fdf0e3; --bg-2: #f8e5d1; --panel: #ffffff; --panel-2: #fff7ee; --line: rgba(73,101,128,.32); --line-2: rgba(73,101,128,.52); --ink: #23303d; --muted: #496580; --muted-2: #6d8196; --grad-brand: linear-gradient(120deg, #badcff 0%, #496580 55%, #2a4a68 100%); --grad-text: linear-gradient(100deg, #35506a 0%, #496580 50%, #3c6a94 100%); --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(73,101,128,.35); --shadow-glow: 0 0 0 1px rgba(73,101,128,.3), 0 16px 44px -22px rgba(73,101,128,.35); } html.theme-peach ::selection { background: rgba(186,221,255,.5); } /* Frozen Lake — #6D8196 · #ADD8E6 · #FFFAFA · #000080 (light ice, navy accent) */ html.theme-frozen { --cyan: #000080; --cyan-bright: #000060; --blue: #2e4a9e; --blue-deep: #1c2f6b; --red: #c62828; --red-soft: #d84315; --bg: #ecf4f9; --bg-2: #ddebf3; --panel: #fffafa; --panel-2: #f3f8fb; --line: rgba(45,65,90,.3); --line-2: rgba(45,65,90,.5); --ink: #101a3a; --muted: #43566a; --muted-2: #6d8196; --grad-brand: linear-gradient(120deg, #add8e6 0%, #2e4a9e 55%, #000080 100%); --grad-text: linear-gradient(100deg, #1c2f6b 0%, #000080 50%, #2e4a9e 100%); --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(45,65,90,.35); --shadow-glow: 0 0 0 1px rgba(0,0,128,.25), 0 16px 44px -22px rgba(0,0,128,.3); } html.theme-frozen ::selection { background: rgba(173,216,230,.5); } /* Shared light-theme scrollbars (the dark default thumb vanishes on white) */ html.theme-light *, html.theme-salt *, html.theme-yacht *, html.theme-calm *, html.theme-lavender *, html.theme-retro *, html.theme-peach *, html.theme-frozen * { scrollbar-color: #b3b8bf transparent; } html.theme-light *::-webkit-scrollbar-thumb, html.theme-salt *::-webkit-scrollbar-thumb, html.theme-yacht *::-webkit-scrollbar-thumb, html.theme-calm *::-webkit-scrollbar-thumb, html.theme-lavender *::-webkit-scrollbar-thumb, html.theme-retro *::-webkit-scrollbar-thumb, html.theme-peach *::-webkit-scrollbar-thumb, html.theme-frozen *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-light *::-webkit-scrollbar-thumb:hover, html.theme-salt *::-webkit-scrollbar-thumb:hover, html.theme-yacht *::-webkit-scrollbar-thumb:hover, html.theme-calm *::-webkit-scrollbar-thumb:hover, html.theme-lavender *::-webkit-scrollbar-thumb:hover, html.theme-retro *::-webkit-scrollbar-thumb:hover, html.theme-peach *::-webkit-scrollbar-thumb:hover, html.theme-frozen *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Gothic Noir — #000000 · #D1D0D0 · #988686 · #5C4E4E (black, warm mauve accents) */ html.theme-noir { --cyan: #a89494; --cyan-bright: #c9b8b8; --blue: #7d6a6a; --blue-deep: #5c4e4e; --bg: #000000; --bg-2: #0d0b0b; --panel: #151112; --panel-2: #1e1819; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #e9e5e5; --muted: #988686; --muted-2: #6e5f5f; --grad-brand: linear-gradient(120deg, #c9b8b8 0%, #a89494 38%, #7d6a6a 70%, #5c4e4e 100%); --grad-text: linear-gradient(100deg, #e6dcdc 0%, #a89494 45%, #c1adad 100%); --shadow-glow: 0 0 0 1px rgba(201,184,184,.16), 0 30px 80px -30px rgba(168,148,148,.4); } html.theme-noir ::selection { background: rgba(168,148,148,.3); } /* Harbor Haze — #909EAE · #5C8DC5 · #AD9E90 · #736F60 (dark slate, driftwood neutrals) */ html.theme-harbor { --cyan: #5c8dc5; --cyan-bright: #85aedd; --blue: #47709d; --blue-deep: #2e4a68; --bg: #14181e; --bg-2: #1a2028; --panel: #212934; --panel-2: #29323f; --ink: #eae5df; --muted: #ad9e90; --muted-2: #736f60; --grad-brand: linear-gradient(120deg, #85aedd 0%, #5c8dc5 38%, #47709d 70%, #2e4a68 100%); --grad-text: linear-gradient(100deg, #c4d7ee 0%, #5c8dc5 45%, #90b3da 100%); --shadow-glow: 0 0 0 1px rgba(133,174,221,.18), 0 30px 80px -30px rgba(92,141,197,.45); } html.theme-harbor ::selection { background: rgba(92,141,197,.32); } /* Spiced Mocha — #6F4E37 · #D47E30 · #F5F5DC · #6D3B07 (dark brown, orange accent, beige ink) */ html.theme-mocha { --cyan: #d47e30; --cyan-bright: #eda45c; --blue: #a35d1d; --blue-deep: #6d3b07; --bg: #171009; --bg-2: #1f150c; --panel: #291c10; --panel-2: #332415; --line: rgba(245,245,220,.12); --line-2: rgba(245,245,220,.2); --ink: #f5f5dc; --muted: #c9b393; --muted-2: #96805f; --grad-brand: linear-gradient(120deg, #eda45c 0%, #d47e30 38%, #a35d1d 70%, #6d3b07 100%); --grad-text: linear-gradient(100deg, #ffe1b8 0%, #d47e30 45%, #e59a4d 100%); --shadow-glow: 0 0 0 1px rgba(237,164,92,.18), 0 30px 80px -30px rgba(212,126,48,.45); } html.theme-mocha ::selection { background: rgba(212,126,48,.32); } html, body { background: var(--bg); color: var(--ink); font-family: var(--font-body); margin: 0; font-size: 14.5px; -webkit-font-smoothing: antialiased; } ::selection { background: rgba(41,171,226,.35); } * { scrollbar-width: thin; scrollbar-color: var(--panel-2) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: var(--panel-2); border-radius: 99px; } *::-webkit-scrollbar-thumb:hover { background: var(--blue); } *::-webkit-scrollbar-track { background: transparent; } /* ── DevExpress dark theme → Brutus palette ───────────────── */ .dxbl-grid { --dxbl-grid-bg: transparent; --dxbl-grid-border-color: var(--line); --dxbl-grid-header-bg: var(--bg-2); --dxbl-grid-row-hover-bg: rgba(41,171,226,.07); --dxbl-grid-selection-bg: rgba(41,171,226,.16); border-color: var(--line) !important; border-radius: var(--radius-sm); overflow: hidden; font-family: var(--font-body); } .dxbl-grid .dxbl-grid-header-content { font-family: var(--font-head); letter-spacing: .02em; } .dxbl-grid .dxbl-grid-table { background: transparent !important; color: var(--ink) !important; } .dxbl-grid .dxbl-grid-header-row, .dxbl-grid thead th { background: var(--bg-2) !important; color: var(--muted) !important; border-color: var(--line) !important; } .dxbl-grid tbody td { border-color: var(--line) !important; } .dxbl-grid tbody tr:hover td { background: rgba(41,171,226,.06) !important; } .dxbl-grid tbody tr.dxbl-grid-selected-row td, .dxbl-grid tbody tr[aria-selected="true"] td { background: rgba(41,171,226,.16) !important; box-shadow: inset 2px 0 0 var(--cyan); } .dxbl-grid .dxbl-pager, .dxbl-grid .dxbl-grid-pager { background: var(--bg-2) !important; border-color: var(--line) !important; } .dxbl-text-edit, .dxbl-btn-tool { background: var(--bg-2) !important; border-color: var(--line-2) !important; color: var(--ink) !important; } .dxbl-grid .dxbl-grid-search-box { max-width: 280px; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; } .grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .muted { color: var(--muted); } /* ── App shell ─────────────────────────────────────────────── */ .shell { display: flex; min-height: 100vh; } .shell-nav { width: 236px; flex-shrink: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); border-right: 1px solid var(--line); padding: 20px 14px 16px; position: sticky; top: 0; height: 100vh; box-sizing: border-box; } .shell-brand { display: flex; align-items: center; justify-content: center; margin-bottom: 22px; } .nav-section { display: block; color: var(--muted-2); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 14px 12px 5px; font-family: var(--font-head); } .shell-nav nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; } .shell-nav nav a { display: flex; align-items: center; gap: 11px; color: var(--muted); text-decoration: none; padding: 9px 12px; border-radius: var(--radius-sm); font-weight: 500; transition: all .15s var(--ease); border: 1px solid transparent; } .nav-ico { display: inline-flex; width: 17px; height: 17px; opacity: .8; } .nav-ico svg { width: 17px; height: 17px; } .shell-nav nav a:hover { color: var(--ink); background: rgba(255,255,255,.05); } /* Collapsible admin nav groups (MainLayout — user directive 2026-08-20) */ .nav-group { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; cursor: pointer; text-align: left; font: inherit; font-size: .92rem; color: var(--muted); padding: 7px 14px; border-radius: 8px; } .nav-group:hover { color: var(--ink); background: rgba(255,255,255,.05); } .nav-caret { margin-left: auto; font-size: .7rem; opacity: .7; } .nav-sub { margin-left: 10px; border-left: 1px solid var(--line); padding-left: 4px; } .nav-sub a { font-size: .88rem; padding-top: 5px; padding-bottom: 5px; } .shell-nav nav a.active { color: var(--ink); background: linear-gradient(90deg, rgba(41,171,226,.16), rgba(41,171,226,.04)); border-color: rgba(76,198,255,.22); } .shell-nav nav a.active .nav-ico { color: var(--cyan-bright); opacity: 1; } .shell-footer { border-top: 1px solid var(--line); padding-top: 12px; } .shell-userline { display: flex; align-items: center; gap: 10px; } .avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--grad-brand); color: #fff; font-weight: 700; font-size: .8rem; font-family: var(--font-head); flex-shrink: 0; } .shell-user { display: block; color: var(--ink); font-size: .85rem; font-weight: 600; } .link-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0; font: inherit; font-size: .78rem; } .link-btn:hover { color: var(--cyan); } .shell-main { flex: 1; padding: 26px 34px 40px; min-width: 0; background: radial-gradient(1100px 500px at 85% -20%, rgba(41,171,226,.07), transparent 60%), var(--bg); } /* ── Login ─────────────────────────────────────────────────── */ .login-wrap { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(900px 500px at 70% -10%, rgba(41,171,226,.16), transparent 60%), radial-gradient(700px 420px at 10% 110%, rgba(28,74,134,.25), transparent 60%), var(--bg); } .login-card { width: min(400px, 92vw); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 34px 32px; box-shadow: var(--shadow-glow); } .login-brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; } .brand-icon { height: 40px; width: auto; } .login-brand { justify-content: center; } .login-icon { height: 84px; width: auto; } .brand-wordmark { height: 26px; width: auto; } .shell-brand { justify-content: center; } .shell-brand .brand-icon { height: 46px; } .login-sub { color: var(--muted); margin: 10px 0 22px; } .login-error { background: rgba(232,65,47,.12); border: 1px solid rgba(232,65,47,.4); color: var(--red-soft); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 16px; font-size: .9rem; } .login-card label { display: block; color: var(--muted); font-size: .85rem; margin: 14px 0 6px; } .login-card input { width: 100%; box-sizing: border-box; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 11px 13px; font: inherit; outline: none; transition: border-color .15s var(--ease); } .login-card input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(41,171,226,.18); } .login-btn { width: 100%; margin-top: 22px; padding: 12px; border: none; cursor: pointer; border-radius: var(--radius-sm); background: var(--grad-brand); color: #fff; font: inherit; font-family: var(--font-head); font-weight: 600; font-size: 1rem; transition: transform .15s var(--ease), box-shadow .15s var(--ease); } .login-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); } /* ── Pages: shared chrome ─────────────────────────────────── */ .page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; } .page-head h1 { margin: 0; font-size: 1.55rem; } .split { display: flex; gap: 18px; align-items: flex-start; } .split > .panel:first-child { flex: 1.3; min-width: 0; } .panel { background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 140%); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: 0 14px 40px -22px rgba(0,0,0,.6); } .panel h3 { margin-top: 0; } .edit-panel { flex: 1; max-width: 520px; max-height: 78vh; overflow-y: auto; } .filter-bar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; } .filter-bar input, .filter-bar select { min-width: 160px; width: auto !important; flex: 0 1 auto; } .filter-bar input[placeholder] { flex: 1 1 260px; max-width: 420px; } /* DevExpress pager + buttons → brand accent */ .dxbl-pager .dxbl-btn.dxbl-active, .dxbl-pager .dxbl-btn[aria-current="page"], .dxbl-page-size-selector .dxbl-btn.dxbl-active { background: var(--grad-brand) !important; border-color: transparent !important; color: #fff !important; } .dxbl-btn-primary { background: var(--grad-brand) !important; border-color: transparent !important; } .field { margin-bottom: 12px; } .field-row { display: flex; gap: 12px; } .field-row .field { flex: 1; } .field label { display: block; color: var(--muted); font-size: .85rem; margin-bottom: 5px; } .field input, .field select, .field textarea, .filter-bar input, .filter-bar select { width: 100%; box-sizing: border-box; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 9px 12px; font: inherit; outline: none; } .field input:focus, .field select:focus, .field textarea:focus, .filter-bar input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(41,171,226,.18); } .field input:disabled { opacity: .55; } /* Native picker glyphs (clock on time fields, calendar on date fields): Chromium draws them near-black regardless of theme, so they vanish on the dark surfaces (report 2026-08-20 — the callback Time box). Repaint the same-shape glyph in the theme's ink color instead: white on the dark themes, dark on the light ones, all 100+ themes covered by the token. */ input[type=time]::-webkit-calendar-picker-indicator, input[type=date]::-webkit-calendar-picker-indicator, input[type=datetime-local]::-webkit-calendar-picker-indicator { background-color: var(--ink); opacity: .8; cursor: pointer; -webkit-mask: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm.5-13H11v6l5.2 3.1.8-1.3-4.5-2.7z"/%3E%3C/svg%3E') center / 15px 15px no-repeat; mask: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm.5-13H11v6l5.2 3.1.8-1.3-4.5-2.7z"/%3E%3C/svg%3E') center / 15px 15px no-repeat; } input[type=time]::-webkit-calendar-picker-indicator:hover { opacity: 1; } input[type=date]::-webkit-calendar-picker-indicator, input[type=datetime-local]::-webkit-calendar-picker-indicator { -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14zM5 8V6h14v2z"/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14zM5 8V6h14v2z"/%3E%3C/svg%3E'); } input[type=date]::-webkit-calendar-picker-indicator:hover, input[type=datetime-local]::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* Sortable column headers (SortTh.razor) — every lb-table grid */ .sort-th { cursor: pointer; user-select: none; white-space: nowrap; } .sort-th:hover { color: var(--cyan-bright); } .sort-arrow { color: var(--cyan); font-size: .68em; margin-left: 3px; vertical-align: middle; } .check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 7px; margin: 8px 0 14px; } .check-grid label, .check-inline { color: var(--ink); font-size: .92rem; display: flex; align-items: center; gap: 7px; cursor: pointer; } .check-grid input[type=checkbox], .check-inline input[type=checkbox] { accent-color: var(--cyan); width: 16px; height: 16px; } .btn-row { display: flex; gap: 10px; margin-top: 16px; } .btn-primary { padding: 10px 22px; border: none; cursor: pointer; border-radius: var(--radius-sm); background: var(--grad-brand); color: #fff; font: inherit; font-weight: 600; transition: transform .15s var(--ease); } .btn-primary:hover { transform: translateY(-1px); } .btn-ghost { padding: 10px 22px; cursor: pointer; border-radius: var(--radius-sm); background: transparent; color: var(--muted); border: 1px solid var(--line-2); font: inherit; } .btn-ghost:hover { color: var(--ink); background: rgba(255,255,255,.05); } .mini-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 7px; font-size: .92rem; } .chip { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .75rem; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line-2); margin-left: 6px; } .chip-on { color: #8ff0b4; border-color: rgba(80,220,140,.4); } .chip-off { color: var(--red-soft); border-color: rgba(232,65,47,.4); } .chip-warm { color: var(--cyan-bright); border-color: rgba(76,198,255,.4); } .chip-hot { color: var(--red-soft); border-color: rgba(255,106,77,.45); } .perm-group { margin-bottom: 8px; } .perm-group summary { cursor: pointer; color: var(--cyan-bright); font-weight: 600; padding: 6px 0; } h4 { margin: 20px 0 8px; color: var(--cyan-bright); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; } /* ── Home dashboard ────────────────────────────────────────── */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .stat-card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 140%); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; transition: all .18s var(--ease); } .stat-card:hover { border-color: rgba(76,198,255,.35); transform: translateY(-2px); box-shadow: var(--shadow-glow); } .stat-label { color: var(--muted); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; font-family: var(--font-head); } .stat-value { color: var(--ink); font-size: 2rem; font-weight: 700; font-family: var(--font-head); line-height: 1.1; } .stat-sub { color: var(--muted-2); font-size: .82rem; } .quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .quick-card { display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; transition: all .15s var(--ease); } .quick-card:hover { border-color: rgba(76,198,255,.35); background: var(--panel-2); } .quick-card strong { font-family: var(--font-head); } /* ── Copilot ───────────────────────────────────────────────── */ .copilot-thread { display: flex; flex-direction: column; gap: 12px; min-height: 180px; max-height: 52vh; overflow-y: auto; padding: 4px 2px; } .copilot-msg { max-width: 88%; } .copilot-msg.mine { align-self: flex-end; text-align: right; } .copilot-who { display: block; color: var(--muted-2); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; font-family: var(--font-head); } .copilot-text { display: inline-block; text-align: left; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 14px; line-height: 1.5; } .copilot-msg.mine .copilot-text { background: rgba(41,171,226,.13); border-color: rgba(76,198,255,.3); } .copilot-input { display: flex; gap: 10px; margin-top: 14px; } .copilot-input input { flex: 1; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 11px 14px; font: inherit; outline: none; } .copilot-input input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(41,171,226,.18); } .copilot-summary { border-color: rgba(76,198,255,.35); background: rgba(41,171,226,.07); line-height: 1.55; } /* tags + folders */ .tag-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 4px; } .tag-x { cursor: pointer; margin-left: 5px; color: var(--muted-2); } .tag-x:hover { color: var(--red-soft); } .tag-input { background: transparent; border: 1px dashed var(--line-2); border-radius: 999px; color: var(--ink); padding: 2px 12px; font: inherit; font-size: .8rem; width: 90px; outline: none; } .tag-input:focus { border-color: var(--cyan); width: 150px; } .folder-row { display: flex; gap: 7px; } .folder-btn { width: 36px; height: 32px; cursor: pointer; border-radius: var(--radius-sm); font: inherit; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line-2); } .folder-btn.on { background: var(--grad-brand); color: #fff; border-color: transparent; } /* Run Payments */ .run-iframe-mount { min-height: 340px; margin-bottom: 8px; } /* The CardConnect tokenizer iframe defaults to 300x150 — the stacked fields (number, exp month, exp year, CVV) run ~340px tall, so the year dropdown and CVV get clipped without this. */ .run-iframe-mount iframe { width: 100%; height: 340px; border: 0; display: block; } .zip-in { width: 140px; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 9px 11px; font: inherit; outline: none; } .zip-in:focus { border-color: var(--cyan); } /* ── Reports ───────────────────────────────────────────────── */ .col-chart { display: flex; align-items: flex-end; gap: 6px; height: 178px; padding-top: 8px; } .col-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; } .col-bar { width: 100%; max-width: 34px; min-height: 2px; border-radius: 5px 5px 0 0; background: var(--grad-brand); transition: height .3s var(--ease); } .col-wrap:hover .col-bar { filter: brightness(1.25); } .col-label { font-size: .66rem; color: var(--muted-2); white-space: nowrap; } .bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; } .bar-label { width: 110px; flex-shrink: 0; font-size: .85rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bar-track { flex: 1; height: 18px; background: var(--bg-2); border-radius: 999px; overflow: hidden; } .bar-fill { height: 100%; background: var(--grad-brand); border-radius: 999px; min-width: 2px; transition: width .4s var(--ease); } .bar-fill.hot { background: var(--grad-hot); } .bar-val { width: 120px; flex-shrink: 0; text-align: right; font-size: .82rem; color: var(--ink); } .lb-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .lb-table th { text-align: left; color: var(--muted); font-family: var(--font-head); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; padding: 6px 10px; border-bottom: 1px solid var(--line); } .lb-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); } .lb-table tbody tr:hover td { background: rgba(41,171,226,.06); } .lb-table td:first-child { color: var(--cyan-bright); font-weight: 700; font-family: var(--font-head); width: 36px; } .lb-table td:last-child, .lb-table th:last-child { text-align: right; } /* ── TV Wallboard ──────────────────────────────────────────── */ .wall { position: fixed; inset: 0; background: radial-gradient(1200px 600px at 80% -10%, rgba(41,171,226,.16), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(28,74,134,.30), transparent 60%), var(--bg); color: var(--ink); padding: 2.2vh 2.4vw; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; } .wall-head { display: flex; align-items: center; gap: 18px; } .wall-logo { height: 56px; } .wall-clock { font-family: var(--font-head); font-size: 1.7rem; color: var(--muted); } .wall-test { margin-left: auto; display: flex; gap: 6px; opacity: .25; transition: opacity .2s; } .wall-test:hover { opacity: 1; } .wall-test button { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: .8rem; cursor: pointer; } .wall-title-txt { font-family: var(--font-head); font-size: 1.7rem; color: var(--cyan-bright); font-weight: 700; } .wall-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4vw; margin: 2.4vh 0; } .wall-goals { display: flex; gap: 1.6vw; margin-bottom: 2.2vh; } .goal { flex: 1; } .goal-head { display: flex; justify-content: space-between; color: var(--muted); font-size: 1vw; letter-spacing: .06em; margin-bottom: .8vh; text-transform: uppercase; } .goal-track { height: 2.2vh; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 99px; overflow: hidden; } .goal-fill { height: 100%; background: var(--grad-brand); border-radius: 99px; transition: width .6s var(--ease); } .goal-fill.hit { background: linear-gradient(90deg, #4cd47a, #ffd24c); } .wall-milestone { position: absolute; top: 12%; left: 50%; transform: translateX(-50%) scale(.6); opacity: 0; font-family: var(--font-head); font-weight: 800; font-size: 5vw; color: #ffd24c; text-shadow: 0 0 40px rgba(255,210,76,.6); animation: flashIn .5s var(--ease) forwards; white-space: nowrap; } .wall-milestone.out { animation: none; opacity: 0; transition: opacity .6s ease; } .wall-kpi { background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 140%); border: 1px solid var(--line-2); border-radius: 20px; padding: 2.4vh 2vw; text-align: center; box-shadow: var(--shadow); } .wall-kpi .k-val { display: block; font-family: var(--font-head); font-weight: 700; font-size: 4.2vw; line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .wall-kpi .k-lab { display: block; margin-top: 1vh; color: var(--muted); font-size: 1.1vw; letter-spacing: .08em; text-transform: uppercase; } .wall-board { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6vw; flex: 1; min-height: 0; } .wall-col { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 2vh 1.6vw; overflow: hidden; } .wall-col h3 { font-size: 1.5vw; margin: 0 0 1.4vh; color: var(--cyan-bright); } .wall-leader { display: flex; align-items: center; gap: 1vw; padding: 1.1vh 0; border-bottom: 1px solid var(--line); font-size: 1.5vw; } .wl-rank { width: 2.2vw; height: 2.2vw; display: grid; place-items: center; border-radius: 50%; background: var(--grad-brand); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.2vw; flex-shrink: 0; } .wl-name { flex: 1; font-weight: 600; } .wl-stat { color: var(--muted); } .wall-recent { display: flex; align-items: baseline; gap: 1vw; padding: 1.1vh 0; border-bottom: 1px solid var(--line); font-size: 1.4vw; } .wr-amt { font-family: var(--font-head); font-weight: 700; } .wr-who { font-weight: 600; } .wr-co { color: var(--muted); margin-left: auto; } /* ── CRM5 TV parity board ────────────────────────────────────────────── Three columns (alternating Top-10 · orange Company Totals · On The Phone) over a strip of rotating agent stat cards. Palatino + DarkOrange/green palette matches the CRM5 TVDisplay. */ /* Everything must FIT the screen at once — full top-10, totals, on-phone, AND the agent strip — so every font is capped in vh: shorter screens shrink text instead of clipping rows. */ .wall.wall-inset { padding-bottom: 7vh; } /* the /wallboard ⏱ between-calls banner floats here */ .wall5-board { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 1.4vw; flex: 1 1 auto; min-height: 0; margin-top: 1vh; } .wall5-board .wall5-col { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 1.2vh 1.4vw; overflow: hidden; display: flex; flex-direction: column; min-height: 0; } .wall5-board .wall-leader { padding: .3vh 0; font-size: min(1.35vw, 2.2vh); } .wall5-board .wl-rank { width: min(2.2vw, 3.2vh); height: min(2.2vw, 3.2vh); font-size: min(1.2vw, 1.8vh); } .wall5-title { font-family: "Palatino Linotype", Palatino, serif; font-size: min(1.6vw, 2.8vh); margin: 0 0 .8vh; padding: .5vh .8vw; border-radius: 10px; color: #0b0b0b; text-align: center; flex-shrink: 0; } .wall5-title.t-week { background: darkorange; } .wall5-title.t-annual { background: #02ec02; } .wall5-title.t-calls { background: var(--panel-2); color: var(--cyan-bright); } .wall5-totals h3 { font-family: "Palatino Linotype", Palatino, serif; font-size: min(1.5vw, 2.6vh); margin: 0 0 .6vh; color: var(--cyan-bright); text-align: center; } .wall5-totals div { font-family: "Palatino Linotype", Palatino, serif; font-weight: 700; font-size: min(1.9vw, 3.4vh); color: darkorange; text-align: center; line-height: 1.5; white-space: nowrap; } .wall5-agents { display: flex; gap: 1vw; margin-top: 1.2vh; min-height: 0; overflow: hidden; flex-shrink: 0; } .agent-card { flex: 1 1 0; min-width: 0; background: var(--panel); border: 2px solid darkorange; border-radius: 14px; padding: .8vh .7vw; text-align: center; font-family: "Palatino Linotype", Palatino, serif; animation: acIn .45s ease; } .agent-card.idle { background: #7a1010; } /* CRM5: whole card goes red when the agent isn't calling */ .agent-card .ac-name { color: #02ec02; font-weight: 700; font-size: min(1.35vw, 2.2vh); border-bottom: 1px solid var(--line); padding-bottom: .4vh; margin-bottom: .4vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .agent-card .ac-line { color: #fff; font-weight: 700; font-size: min(1.05vw, 1.8vh); line-height: 1.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .agent-card .ac-sec { color: hotpink; font-weight: 700; font-size: min(1.05vw, 1.8vh); line-height: 1.6; } .agent-card .c-orange { color: darkorange; } .agent-card .c-blue { color: #43bbeb; } .agent-card .c-purple { color: mediumpurple; } .agent-card .c-green { color: #02ec02; } @keyframes acIn { from { transform: translateX(30%); opacity: 0; } to { transform: none; opacity: 1; } } /* enters from the RIGHT (2026-08-21) */ /* Campaign-document picker with page-1 previews — agents SEE what they're attaching. */ .doc-pick-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .doc-pick { position: relative; width: 190px; cursor: pointer; border: 2px solid var(--line-2); border-radius: 10px; padding: 6px; background: var(--panel-2); text-align: center; user-select: none; } .doc-pick:hover { border-color: var(--muted-2); } .doc-pick.on { border-color: var(--cyan-bright); box-shadow: 0 0 0 1px var(--cyan-bright); } .doc-pick img { width: 100%; height: 230px; object-fit: contain; background: #fff; border-radius: 6px; display: block; } .doc-pick .doc-fallback { display: none; width: 100%; height: 230px; place-items: center; font-size: 2rem; background: var(--panel); border-radius: 6px; } .doc-pick .doc-name { display: block; margin-top: 5px; font-size: .88rem; line-height: 1.25; word-break: break-word; max-height: 2.6em; overflow: hidden; } .doc-pick .doc-check { position: absolute; top: 4px; right: 6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--cyan-bright); color: #04222b; font-weight: 800; } .doc-thumb-sm { width: 44px; height: 58px; object-fit: contain; background: #fff; border-radius: 4px; border: 1px solid var(--line-2); } /* celebration overlay */ .wall-stage { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; } .wall-flash { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.4); text-align: center; background: rgba(7,13,24,.86); border: 3px solid var(--accent); border-radius: 28px; padding: 5vh 6vw; box-shadow: 0 0 0 6px rgba(255,255,255,.04), 0 40px 120px -20px var(--accent); animation: flashIn .5s var(--ease) forwards, flashPulse 1.2s ease-in-out .5s infinite alternate; } .wall-flash.out { animation: flashOut .8s var(--ease) forwards; } .wall-emoji { font-size: 7vw; line-height: 1; animation: emojiBounce .6s ease infinite alternate; } .wall-title { font-family: var(--font-head); font-weight: 700; font-size: 4.5vw; letter-spacing: .02em; margin-top: 1vh; } .wall-amount { font-family: var(--font-head); font-weight: 700; font-size: 6vw; color: #fff; line-height: 1.05; } .wall-agent { font-size: 2.6vw; font-weight: 600; margin-top: 1vh; } .wall-meta { font-size: 1.4vw; color: var(--muted); margin-top: .6vh; } @keyframes flashIn { from { transform: translate(-50%,-50%) scale(.3); opacity: 0; } to { transform: translate(-50%,-50%) scale(1); opacity: 1; } } @keyframes flashOut { to { transform: translate(-50%,-50%) scale(1.3); opacity: 0; } } @keyframes flashPulse { from { box-shadow: 0 0 0 6px rgba(255,255,255,.04), 0 40px 120px -20px var(--accent); } to { box-shadow: 0 0 0 10px rgba(255,255,255,.10), 0 50px 160px -10px var(--accent); } } @keyframes emojiBounce { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-18px) rotate(6deg); } } .wall-rain { position: absolute; inset: 0; pointer-events: none; } .rain-piece { position: absolute; top: -8vh; animation: rainFall linear forwards; } @keyframes rainFall { to { transform: translateY(116vh) rotate(360deg); opacity: .85; } } /* ── Mail ──────────────────────────────────────────────────── */ .mail-row { cursor: pointer; transition: border-color .12s; } .mail-row:hover { border-color: rgba(76,198,255,.35); } .mail-row.on { border-color: var(--cyan); background: rgba(41,171,226,.08); } .mail-row.unread { border-left: 3px solid var(--cyan); } .mail-line1 { display: flex; justify-content: space-between; gap: 8px; font-size: .9rem; } .mail-when { color: var(--muted-2); font-size: .78rem; white-space: nowrap; } .mail-subj { font-size: .88rem; margin: 2px 0; } .mail-snip { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mail-body { background: #fff; color: #111; border-radius: var(--radius-sm); padding: 16px; max-height: 56vh; overflow: auto; } /* ── Notification toasts ───────────────────────────────────── */ #notify-host { position: fixed; top: 18px; right: 18px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; } .notify-toast { display: flex; gap: 12px; align-items: flex-start; width: 320px; background: var(--panel-2); border: 1px solid var(--line-2); border-left: 3px solid var(--cyan); border-radius: var(--radius-sm); padding: 13px 15px; box-shadow: var(--shadow); transform: translateX(380px); opacity: 0; transition: all .35s var(--ease); } .notify-toast.in { transform: translateX(0); opacity: 1; } .nt-kind { font-size: 1.3rem; line-height: 1; } .nt-title { font-weight: 600; font-size: .9rem; color: var(--ink); } .nt-text { color: var(--muted); font-size: .82rem; margin-top: 2px; } .neg { color: var(--red); } /* ── Deploy action bar ─────────────────────────────────────── */ .deploy-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } /* ── Address autocomplete ──────────────────────────────────── */ .addr-ac { position: relative; } .addr-input { width: 100%; } .addr-list { position: absolute; z-index: 60; left: 0; right: 0; margin-top: 2px; max-height: 240px; overflow: auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-sm); box-shadow: var(--shadow); } .addr-item { padding: 8px 12px; cursor: pointer; font-size: .9rem; border-bottom: 1px solid var(--line-2); } .addr-item:last-child { border-bottom: none; } .addr-item:hover { background: var(--panel-2); color: var(--cyan-bright); } /* ── Shell top bar (persistent softphone) ──────────────────── */ /* Sticky: the phone (and its keypad) stay reachable at the top of every page while scrolling. */ .shell-topbar { display: flex; justify-content: flex-end; align-items: center; padding: 8px 4px 14px; border-bottom: 1px solid var(--line-2); margin-bottom: 16px; position: sticky; top: 0; z-index: 800; background: var(--bg); box-shadow: 0 6px 18px rgba(4, 8, 16, .35); } /* ── Modal overlay (add-lead, etc.) ────────────────────────── */ .modal-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(4,8,16,.7); display: grid; place-items: center; padding: 20px; overflow: auto; } .modal-card { width: min(640px, 96vw); max-height: 92vh; overflow: auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-glow); } /* ── Employee editor tabs ──────────────────────────────────── */ .emp-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line-2); margin: 8px 0 14px; } .emp-tab { background: transparent; border: none; color: var(--muted); padding: 8px 14px; font: inherit; cursor: pointer; border-bottom: 2px solid transparent; } .emp-tab:hover { color: var(--ink); } .emp-tab.active { color: var(--ink); border-bottom-color: var(--cyan-bright); font-weight: 600; } .emp-photo-row { display: flex; align-items: center; gap: 16px; } .emp-photo { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line-2); } .emp-photo-empty { display: grid; place-items: center; color: var(--muted-2); background: var(--panel-2); font-size: .8rem; } /* ── Controller row status colors (tinted for the dark grid) ── */ tr.ctrl-ready td { background: rgba(245, 222, 80, .16) !important; } tr.ctrl-otd td { background: rgba(80, 215, 235, .16) !important; } tr.ctrl-received td { background: rgba(70, 200, 120, .16) !important; } tr.ctrl-credit td { background: rgba(150, 120, 230, .18) !important; } tr.ctrl-ach td { background: rgba(160, 210, 90, .16) !important; } tr.ctrl-mailin td { background: rgba(240, 110, 180, .16) !important; } tr.ctrl-mailout td { background: rgba(150, 150, 160, .16) !important; } tr.ctrl-returned td { background: rgba(240, 100, 70, .18) !important; } tr.ctrl-delete td { background: rgba(20, 20, 24, .55) !important; } tr.ctrl-deposited td { background: rgba(70, 120, 230, .20) !important; } /* ── Controller filters & saved views ──────────────────────── */ .head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .view-select { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 7px 10px; font: inherit; } .save-view-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .save-view-bar input[type=text], .save-view-bar input:not([type]) { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 7px 10px; font: inherit; min-width: 220px; } .filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .filter-dd { position: relative; } .filter-dd > summary { list-style: none; cursor: pointer; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 7px 12px; user-select: none; display: inline-flex; align-items: center; gap: 6px; } .filter-dd > summary::-webkit-details-marker { display: none; } .filter-dd > summary::after { content: "▾"; color: var(--muted-2); } .filter-dd[open] > summary { border-color: var(--cyan-bright); } .filter-dd .dd-body { position: absolute; z-index: 50; margin-top: 6px; min-width: 220px; max-height: 320px; overflow: auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 10px 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; } .dd-badge { background: var(--grad-brand); color: #fff; border-radius: 999px; font-size: .72rem; padding: 1px 7px; } .filter-date { display: inline-flex; gap: 6px; align-items: center; } .filter-date label { color: var(--muted); font-size: .85rem; } .filter-date input[type=date] { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 6px 8px; font: inherit; } .ctrl-search { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 7px 12px; font: inherit; min-width: 280px; } /* ── Co-browse ─────────────────────────────────────────────── */ .cobrowse-viewer { background: #fff; border-radius: var(--radius-sm); height: 74vh; overflow-y: auto; overflow-x: hidden; position: relative; } .cobrowse-viewer .cb-empty { color: var(--muted-2); padding: 40px; text-align: center; } .cobrowse-viewer .replayer-wrapper { transform-origin: top left; } .cobrowse-viewer iframe { border: 0; } #cobrowse-consent { position: fixed; inset: 0; z-index: 10000; background: rgba(4,8,16,.7); display: grid; place-items: center; } #cobrowse-consent .cb-card { width: min(440px, 92vw); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-glow); } #cobrowse-consent .cb-title { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--ink); } #cobrowse-consent .cb-text { color: var(--muted); margin: 12px 0 20px; line-height: 1.5; } #cobrowse-consent .cb-btns { display: flex; gap: 10px; justify-content: flex-end; } #cobrowse-consent .cb-allow { background: var(--grad-brand); color: #fff; border: none; border-radius: var(--radius-sm); padding: 10px 22px; font: inherit; font-weight: 600; cursor: pointer; } #cobrowse-consent .cb-deny { background: transparent; color: var(--muted); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 10px 22px; font: inherit; cursor: pointer; } #cobrowse-banner { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; align-items: center; gap: 12px; background: var(--panel-2); border: 1px solid var(--red-soft); border-radius: 999px; padding: 9px 16px; color: var(--ink); font-size: .88rem; box-shadow: var(--shadow); } #cobrowse-banner .cb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: emojiBounce 1s infinite alternate; } #cobrowse-banner .cb-stop { background: var(--red); color: #fff; border: none; border-radius: 999px; padding: 5px 14px; font: inherit; font-size: .8rem; cursor: pointer; } #cobrowse-banner.cb-controlling { border-color: var(--red); box-shadow: 0 0 0 2px var(--red-soft), var(--shadow); } #cobrowse-ctlbar { position: fixed; top: 0; left: 0; right: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 16px; background: var(--red); color: #fff; font-weight: 600; font-size: .92rem; } #cobrowse-ctlbar .cb-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; animation: emojiBounce 1s infinite alternate; } #cobrowse-ctlbar .cb-stop { background: #fff; color: var(--red); border: none; border-radius: 999px; padding: 5px 14px; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; } #cobrowse-ctlring { position: fixed; inset: 0; z-index: 10000; pointer-events: none; box-shadow: inset 0 0 0 4px var(--red); } /* ── Incoming call alert ───────────────────────────────────── */ .incoming-overlay { position: fixed; inset: 0; z-index: 8500; background: rgba(4,8,16,.72); display: grid; place-items: center; } .incoming-card { width: min(420px, 92vw); background: var(--panel); border: 2px solid var(--cyan); border-radius: var(--radius); padding: 30px 28px; text-align: center; box-shadow: var(--shadow-glow); animation: incomingPulse 1.2s infinite alternate; } .incoming-card .ic-title { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; } .incoming-card .ic-num { font-size: 1.6rem; font-weight: 700; margin-top: 8px; letter-spacing: .02em; } .incoming-card .ic-co { font-size: 1.05rem; margin-top: 4px; color: var(--cyan); } @keyframes incomingPulse { from { box-shadow: 0 0 0 0 rgba(41,171,226,.45); } to { box-shadow: 0 0 0 14px rgba(41,171,226,0); } } /* ── Briefcase — the CRM5 color code, verbatim (agents know these on sight) ── */ .bc-table td { white-space: nowrap; } tr.bc-green td, .chip.bc-green { background: limegreen; color: #111; } tr.bc-orange td, .chip.bc-orange { background: orange; color: #fff; } tr.bc-purple td, .chip.bc-purple { background: purple; color: #fff; } tr.bc-lightblue td, .chip.bc-lightblue { background: lightblue; color: #111; } tr.bc-darkblue td, .chip.bc-darkblue { background: darkblue; color: #fff; } tr.bc-red td, .chip.bc-red { background: #d0342c; color: #fff; } tr.bc-yellow td, .chip.bc-yellow { background: #ffe94a; color: #111; } .bc-table tr[class^="bc-"] td .muted { color: inherit; opacity: .75; } .bc-table tr[class^="bc-"] td .btn-call { background: rgba(0,0,0,.35); color: #fff; border-color: transparent; } .bc-table tbody tr { cursor: pointer; } .bc-table tbody tr:hover td { color: #fff; } .bc-table tbody tr:hover td .muted { color: #fff; opacity: .8; } .bc-table tr.bc-sel td { box-shadow: inset 0 3px 0 -1px var(--cyan), inset 0 -3px 0 -1px var(--cyan); color: #fff; } .bc-table tr.bc-sel td .muted { color: #fff; opacity: .8; } .bc-table tr.bc-sel td:first-child { box-shadow: inset 3px 0 0 var(--cyan), inset 0 3px 0 -1px var(--cyan), inset 0 -3px 0 -1px var(--cyan); } .bc-table tr.bc-sel td:last-child { box-shadow: inset -3px 0 0 var(--cyan), inset 0 3px 0 -1px var(--cyan), inset 0 -3px 0 -1px var(--cyan); } .mini-card.pickable { cursor: pointer; } .mini-card.pickable.picked { box-shadow: inset 0 0 0 2px var(--cyan); background: rgba(41,171,226,.10); } /* ── Call transcript + summary ─────────────────────────────── */ .call-summary { margin-bottom: 12px; border-left: 3px solid var(--cyan); } .transcript-body { max-height: 320px; overflow-y: auto; min-width: 340px; max-width: none; } .tr-turn { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid var(--line); } .tr-turn:last-child { border-bottom: 0; } .tr-who { font-weight: 600; font-size: .78rem; white-space: nowrap; } .tr-at { font-size: .72rem; white-space: nowrap; } .tr-s0 { color: var(--cyan); } .tr-s1 { color: #4cd47a; } .tr-s2 { color: #e8a33d; } .tr-s3 { color: #c98bdb; } .tr-turn.tr-ours { background: rgba(41,171,226,.07); } /* our agent's lines */ /* ── My Email ──────────────────────────────────────────────── */ .mail-row { cursor: pointer; } .mail-row.on { box-shadow: inset 0 0 0 2px var(--cyan); } .mail-row.unread strong { color: var(--cyan); } .mail-body { white-space: pre-wrap; max-height: 52vh; overflow-y: auto; line-height: 1.5; } .lead-place { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1rem; font-weight: 600; margin: 2px 0 6px; } /* Lead header: action buttons on their own row, then the company identity line beneath them. */ /* Click-to-pop wrapper (feedback #143) around the clean read-along script (#142). */ .script-details > summary { cursor: pointer; font-weight: 700; padding: 6px 2px; list-style: none; } .script-details > summary::-webkit-details-marker { display: none; } .script-details > summary::before { content: '▸ '; color: var(--muted); } .script-details[open] > summary::before { content: '▾ '; } /* Read-along campaign script (feedback #142) — the pitch is the focus, in clean readable type. */ .script-panel { margin: 8px 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 160%); overflow: hidden; } .script-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; background: var(--panel-2); font-weight: 700; border-bottom: 1px solid var(--line); } .script-ism { padding: 10px 16px; font-size: 1.05rem; font-weight: 600; color: var(--accent, #4cc6ff); border-bottom: 1px dashed var(--line-2); } .script-body { white-space: pre-wrap; padding: 12px 18px; line-height: 1.6; max-height: 46vh; overflow-y: auto; font-size: 1rem; } .script-body.zoom-0 { font-size: .9rem; line-height: 1.5; } .script-body.zoom-1 { font-size: 1.05rem; } .script-body.zoom-2 { font-size: 1.2rem; line-height: 1.7; } .script-body.zoom-3 { font-size: 1.4rem; line-height: 1.8; } .script-disclosure { border-top: 1px solid var(--line-2); background: rgba(255,180,80,.06); } .script-tag { padding: 8px 16px 0; font-size: .78rem; font-weight: 700; color: #ffb84d; letter-spacing: .03em; } .script-extras { border-top: 1px solid var(--line-2); padding: 4px 14px 8px; } .script-extras details { margin: 4px 0; } .script-extras summary { cursor: pointer; padding: 4px 0; font-weight: 600; } .lead-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .lead-actions .btn-call, .lead-actions .btn-primary { font-size: .78rem; padding: 5px 9px; } /* Editing a long lead form: pin the bar so Cancel/💾 Save stay reachable while scrolling. */ .lead-actions.actions-sticky { position: sticky; top: 0; z-index: 30; background: var(--panel); padding: 8px; margin: -8px -8px 8px; border-radius: var(--radius-sm); box-shadow: 0 10px 16px -12px rgba(0,0,0,.6); } .lead-identity { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; font-size: 1.15rem; } .lead-identity .chip { font-size: .92rem; vertical-align: middle; } /* Without the appointment sections the right panel is short — pin it so dispositions stay on screen (feedback #86). */ .edit-panel.dispo-sticky { position: sticky; top: 10px; align-self: flex-start; max-height: calc(100vh - 20px); overflow-y: auto; } /* ── Import ────────────────────────────────────────────────── */ .file-input { color: var(--muted); margin: 8px 0 12px; } .file-input::file-selector-button { background: var(--grad-brand); color: #fff; border: none; border-radius: var(--radius-sm); padding: 10px 18px; margin-right: 12px; font: inherit; font-weight: 600; cursor: pointer; } .map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } .map-cell label { display: block; font-size: .78rem; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .map-sample { display: block; font-size: .72rem; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .preview-scroll { overflow-x: auto; } .preview-table { border-collapse: collapse; font-size: .82rem; width: 100%; } .preview-table th { text-align: left; color: var(--cyan-bright); background: var(--bg-2); padding: 7px 10px; border: 1px solid var(--line); font-family: var(--font-head); white-space: nowrap; } .preview-table td { padding: 6px 10px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } /* DevExpress editor sizing + dark blending */ .w-70 { width: 70px !important; } .w-90 { width: 90px !important; } .w-180 { width: 180px !important; } .w-220 { width: 220px !important; } .w-320 { width: 320px !important; } /* Sale line items (workspace sale dialog) */ .sale-lines { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .sale-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sale-line-name { flex: 1; min-width: 120px; color: var(--ink); font-size: .92rem; } .sale-line-total { min-width: 70px; text-align: right; color: var(--cyan); font-weight: 600; } .sale-line-memo { flex-basis: 100%; background: var(--surface-2, #1a1f2b); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); padding: 5px 8px; font-size: .88rem; } .btn-x { background: transparent; border: none; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 4px; } .btn-x:hover { color: var(--danger, #e5484d); } .btn-x-text { background: transparent; border: none; color: var(--cyan); font-size: .85rem; cursor: pointer; padding: 2px 6px; } .btn-x-text:hover { text-decoration: underline; } .btn-x-text.danger { color: var(--danger, #e5484d); } /* ⭐ Primary-number picker on the lead — at .85rem it was a speck next to the Call buttons and agents kept missing it (user request 2026-08-21). Big enough to hit, and it lights up when set. */ .star-pick { font-size: 1.7rem; line-height: 1; padding: 0 5px; vertical-align: middle; transition: transform .12s ease, opacity .12s ease, color .12s ease; } .star-pick:hover { text-decoration: none; transform: scale(1.18); } .star-pick.on { color: #f5c518; text-shadow: 0 0 8px rgba(245, 197, 24, .55); } .star-pick.off { color: var(--muted-2, #8a8a8a); opacity: .55; } .star-pick.off:hover { opacity: 1; color: #f5c518; } /* Campaign logo bar on the open lead (feedback #224) — big enough to read across a desk. */ .camp-logo-bar { display: flex; align-items: center; gap: 14px; margin: 8px 0 10px; } .camp-logo-bar img { max-height: 92px; max-width: 340px; border-radius: 8px; background: #fff; padding: 5px 9px; } .camp-logo-name { font-size: 1.15rem; font-weight: 700; color: var(--cyan-bright); letter-spacing: .3px; } /* Lodge/association contact under the campaign name (feedback #231). */ .camp-logo-contact { font-size: .92rem; font-weight: 600; color: var(--text, #ddd); margin-top: 2px; } @media (max-width: 900px) { .camp-logo-bar img { max-height: 64px; max-width: 220px; } } /* Custom reports (user directive 2026-08-21). On screen it's a normal panel; printed — which is how it becomes a PDF — it drops all app chrome and prints as a plain black-on-white document. */ .report-sheet { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; } .report-head { border-bottom: 2px solid var(--line); padding-bottom: 10px; margin-bottom: 14px; } .report-section { margin: 0 0 22px; break-inside: avoid; } .report-section h3 { margin: 0 0 8px; font-size: 1.05rem; } @media print { @page { margin: 12mm; } body { background: #fff !important; color: #000 !important; } .no-print, nav, header, footer, .nav-rail, .sidebar, .app-nav, .page-head { display: none !important; } .report-sheet { border: none; border-radius: 0; padding: 0; background: #fff !important; color: #000 !important; } .report-sheet h2, .report-sheet h3, .report-sheet td, .report-sheet th, .report-sheet .muted { color: #000 !important; } .report-sheet .lb-table { width: 100%; border-collapse: collapse; } .report-sheet .lb-table th, .report-sheet .lb-table td { border-bottom: 1px solid #bbb; padding: 4px 6px; font-size: 11pt; } .report-sheet .lb-table thead { display: table-header-group; } /* repeat headers on each page */ .report-sheet tr { break-inside: avoid; } } /* Reminders / appointments / tasks */ .reminder-pop { border-left: 3px solid var(--cyan); } .reminder-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; } .reminder-stars { color: #ffd166; min-width: 60px; font-size: .85rem; } .reminder-text { flex: 1; color: var(--ink); } .appt-row { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); } .appt-time { min-width: 72px; color: var(--cyan); font-weight: 600; } .appt-dur { min-width: 48px; font-size: .85rem; } .appt-title { flex: 1; color: var(--ink); } .task-overdue td { color: #ffb4ab !important; } .consent-note { margin: 8px 0; padding: 7px 10px; border-radius: var(--radius-sm); background: rgba(255,210,76,.12); border: 1px solid rgba(255,210,76,.4); color: #ffd166; font-size: .9rem; } .research-panel { margin: 10px 0; border-left: 3px solid var(--cyan); background: rgba(41,171,226,.05); } .chat-panel { margin: 10px 0; border-left: 3px solid #8b5cf6; } .chat-log { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin: 8px 0; } .chat-msg { padding: 7px 11px; border-radius: 12px; max-width: 85%; white-space: pre-wrap; font-size: .92rem; line-height: 1.35; } .chat-msg.from-user { align-self: flex-end; background: var(--grad-brand); color: #fff; } .chat-msg.from-ai { align-self: flex-start; background: rgba(255,255,255,.05); color: var(--ink); border: 1px solid var(--line); } .chat-input-row { display: flex; gap: 8px; } .chat-input { flex: 1; background: var(--surface-2, #1a1f2b); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); padding: 8px 10px; } .lb-top td { font-weight: 600; color: var(--cyan-bright, var(--cyan)); } .role-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; color: var(--ink); } .role-item:hover { background: rgba(255,255,255,.04); } .role-item.on { background: var(--grad-brand); color: #fff; } .role-item.on .muted { color: rgba(255,255,255,.8); } /* Reports drill-down */ .clickable { cursor: pointer; } .bar-row.clickable:hover .bar-label, tr.clickable:hover td { color: var(--cyan); } .drill-detail { margin: 4px 0 10px; padding: 8px 10px; background: rgba(255,255,255,.03); border-radius: var(--radius-sm); } .drill-row { display: flex; gap: 14px; align-items: baseline; padding: 3px 0; font-size: .88rem; } .drill-co { flex: 1; color: var(--ink); } .drill-row a { color: var(--cyan); text-decoration: none; } .drill-row a:hover { text-decoration: underline; } .dxbl-text-edit, .dxbl-combobox, .dxbl-spin-edit, .dxbl-date-edit, .dxbl-memo { border-radius: var(--radius-sm) !important; } .dxbl-text-edit input, .dxbl-memo textarea { color: var(--ink) !important; } .dxbl-listbox, .dxbl-dropdown-dialog, .dxbl-popup { background: var(--panel-2) !important; border-color: var(--line-2) !important; color: var(--ink) !important; } /* ── Workspace ─────────────────────────────────────────────── */ .btn-play { padding: 11px 30px; border: none; cursor: pointer; border-radius: var(--radius-sm); background: var(--grad-brand); color: #fff; font: inherit; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; transition: transform .15s var(--ease), box-shadow .15s var(--ease); } .btn-play:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); } .play-campaign { background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 10px 12px; font: inherit; } .contact-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .btn-call { padding: 7px 14px; border: 1px solid rgba(76,198,255,.4); cursor: pointer; border-radius: var(--radius-sm); background: rgba(41,171,226,.12); color: var(--cyan-bright); font: inherit; } .btn-call:hover { background: rgba(41,171,226,.25); } .dispo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .btn-dispo { padding: 11px 8px; cursor: pointer; border-radius: var(--radius-sm); font: inherit; font-weight: 600; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-2); } .btn-dispo:hover { border-color: var(--cyan); } .btn-dispo.warn { color: #ffd479; border-color: rgba(255,200,100,.35); } .btn-dispo.danger { color: var(--red-soft); border-color: rgba(232,65,47,.4); } /* ── Softphone ─────────────────────────────────────────────── */ .softphone { display: flex; align-items: center; gap: 10px; position: relative; } .softphone .sp-keypad { position: absolute; top: calc(100% + 8px); right: 0; z-index: 3000; display: grid; grid-template-columns: repeat(3, 46px); gap: 6px; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-glow); } .softphone .sp-keypad .btn-call { min-width: 0; padding: 6px 0 4px; text-align: center; display: flex; flex-direction: column; align-items: center; line-height: 1.1; } .softphone .sp-keypad .kp-d { font-size: 1.05rem; font-weight: 600; } .softphone .sp-keypad .kp-l { font-size: .55rem; letter-spacing: .08em; color: var(--muted); min-height: .7em; } .softphone .line-live { box-shadow: inset 0 0 0 2px var(--cyan); } .softphone .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted-2); display: inline-block; } .softphone .dot-on { background: #4cd47a; box-shadow: 0 0 8px rgba(76,212,122,.7); } .softphone .dot-busy { background: var(--cyan-bright); box-shadow: 0 0 8px rgba(76,198,255,.7); } .softphone .dot-off { background: var(--red); box-shadow: 0 0 8px rgba(232,65,47,.6); } .btn-call.danger { color: var(--red-soft); border-color: rgba(232,65,47,.4); background: rgba(232,65,47,.08); } /* "New version available" banner (zero-downtime deploys) */ .ver-banner { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 14px; font-size: .9rem; color: #fff; background: linear-gradient(90deg, #1b2c4f, #2e5eaa); border-bottom: 1px solid rgba(255,255,255,.25); } .ver-banner .btn-swap { background: #fff; color: #1b2c4f; border: none; border-radius: 16px; padding: 4px 14px; font-weight: 700; cursor: pointer; font-size: .85rem; } .ver-banner .btn-later { background: transparent; color: rgba(255,255,255,.75); border: none; cursor: pointer; font-size: .95rem; } /* ══ Generated palette themes (Figma "100 color combinations", user directive 2026-08-19) ══ Produced by scratchpad gen.js from the card swatches: light base when ≥2 light swatches, else dark; accents pushed to ≥4.2:1 contrast, ink ≥9.5:1. Regenerate rather than hand-edit. */ /* Stormy morning — #6A89A7 · #BDDDFC · #88BDF2 · #384959 (dark, generated from the Figma palette) */ html.theme-stormy-morning { --cyan: #88BDF2; --cyan-bright: #a9cff6; --blue: #BDDDFC; --blue-deep: #849bb0; --bg: #101419; --bg-2: #151b21; --panel: #1f2831; --panel-2: #2c353d; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #e1f0fe; --muted: #909ca8; --muted-2: #69747f; --grad-brand: linear-gradient(120deg, #acd1f6 0%, #88BDF2 45%, #849bb0 100%); --grad-text: linear-gradient(100deg, #a9cff6 0%, #88BDF2 50%, #BDDDFC 100%); --shadow-glow: 0 0 0 1px rgba(136,189,242,0.25), 0 18px 50px -24px rgba(136,189,242,0.35); } html.theme-stormy-morning ::selection { background: rgba(136,189,242,0.3); } /* Mossy hollow — #636B2F · #BAC095 · #D4DE95 · #3D4127 (light, generated from the Figma palette) */ html.theme-mossy-hollow { --cyan: #636B2F; --cyan-bright: #4f5626; --blue: #3D4127; --blue-deep: #2c2f1c; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(21,23,14,0.35); --bg: #eaefca; --bg-2: #dde5ac; --panel: #ffffff; --panel-2: #f3f6e1; --line: rgba(21,23,14,0.28); --line-2: rgba(21,23,14,0.48); --ink: #15170e; --muted: #2b2e1b; --muted-2: #5a5c4d; --grad-brand: linear-gradient(120deg, #3D4127 0%, #636B2F 45%, #2c2f1c 100%); --grad-text: linear-gradient(100deg, #4f5626 0%, #636B2F 50%, #3D4127 100%); --shadow-glow: 0 0 0 1px rgba(99,107,47,0.25), 0 18px 50px -24px rgba(99,107,47,0.35); } html.theme-mossy-hollow ::selection { background: rgba(99,107,47,0.22); } html.theme-mossy-hollow * { scrollbar-color: #b3b8bf transparent; } html.theme-mossy-hollow *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-mossy-hollow *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Blue eclipse — #272757 · #8686AC · #505081 · #0F0E47 (dark, generated from the Figma palette) */ html.theme-blue-eclipse { --cyan: #7a7999; --cyan-bright: #9f9fb6; --blue: #272757; --blue-deep: #1b1b3d; --bg: #040414; --bg-2: #05051b; --panel: #080827; --panel-2: #171734; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #c9c9da; --muted: #78788f; --muted-2: #51516b; --grad-brand: linear-gradient(120deg, #a2a1b8 0%, #7a7999 45%, #1b1b3d 100%); --grad-text: linear-gradient(100deg, #9f9fb6 0%, #7a7999 50%, #272757 100%); --shadow-glow: 0 0 0 1px rgba(122,121,153,0.25), 0 18px 50px -24px rgba(122,121,153,0.35); } html.theme-blue-eclipse ::selection { background: rgba(122,121,153,0.3); } /* Lush forest — #2E6F40 · #CFFFDC · #68BA7F · #253D2C (dark, generated from the Figma palette) */ html.theme-lush-forest { --cyan: #CFFFDC; --cyan-bright: #dcffe6; --blue: #68BA7F; --blue-deep: #498259; --bg: #0a110c; --bg-2: #0e1710; --panel: #142218; --panel-2: #222f26; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #e9ffef; --muted: #90a295; --muted-2: #65766a; --grad-brand: linear-gradient(120deg, #ddffe7 0%, #CFFFDC 45%, #498259 100%); --grad-text: linear-gradient(100deg, #dcffe6 0%, #CFFFDC 50%, #68BA7F 100%); --shadow-glow: 0 0 0 1px rgba(207,255,220,0.25), 0 18px 50px -24px rgba(207,255,220,0.35); } html.theme-lush-forest ::selection { background: rgba(207,255,220,0.3); } /* Green juice — #4CBB17 · #48872B · #39542C · #293325 (dark, generated from the Figma palette) */ html.theme-green-juice { --cyan: #4CBB17; --cyan-bright: #7ece58; --blue: #48872B; --blue-deep: #325f1e; --bg: #0c0e0a; --bg-2: #10130e; --panel: #171c14; --panel-2: #252a22; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #aee097; --muted: #6f8e60; --muted-2: #506646; --grad-brand: linear-gradient(120deg, #82cf5d 0%, #4CBB17 45%, #325f1e 100%); --grad-text: linear-gradient(100deg, #7ece58 0%, #4CBB17 50%, #48872B 100%); --shadow-glow: 0 0 0 1px rgba(76,187,23,0.25), 0 18px 50px -24px rgba(76,187,23,0.35); } html.theme-green-juice ::selection { background: rgba(76,187,23,0.3); } /* Chili spice — #CD1C18 · #FFA896 · #9B1313 · #38000A (dark, generated from the Figma palette) */ html.theme-chili-spice { --cyan: #907077; --cyan-bright: #af989d; --blue: #CD1C18; --blue-deep: #901411; --bg: #100003; --bg-2: #150004; --panel: #1f0006; --panel-2: #2c0f15; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #ffd8d0; --muted: #a17d7b; --muted-2: #745253; --grad-brand: linear-gradient(120deg, #b19ba0 0%, #907077 45%, #901411 100%); --grad-text: linear-gradient(100deg, #af989d 0%, #907077 50%, #CD1C18 100%); --shadow-glow: 0 0 0 1px rgba(144,112,119,0.25), 0 18px 50px -24px rgba(144,112,119,0.35); } html.theme-chili-spice ::selection { background: rgba(144,112,119,0.3); } /* Chocolate truffle — #713600 · #C05800 · #FDFBD4 · #38240D (dark, generated from the Figma palette) */ html.theme-chocolate-truffle { --cyan: #c56514; --cyan-bright: #d59056; --blue: #713600; --blue-deep: #4f2600; --bg: #100a04; --bg-2: #150e05; --panel: #1f1407; --panel-2: #2c2216; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #fefdec; --muted: #a09b8c; --muted-2: #746d5e; --grad-brand: linear-gradient(120deg, #d6935b 0%, #c56514 45%, #4f2600 100%); --grad-text: linear-gradient(100deg, #d59056 0%, #c56514 50%, #713600 100%); --shadow-glow: 0 0 0 1px rgba(197,101,20,0.25), 0 18px 50px -24px rgba(197,101,20,0.35); } html.theme-chocolate-truffle ::selection { background: rgba(197,101,20,0.3); } /* Ink wash — #4A4A4A · #CBCBCB · #FFFFE3 · #6D8196 (light, generated from the Figma palette) */ html.theme-ink-wash { --cyan: #65788c; --cyan-bright: #516070; --blue: #4A4A4A; --blue-deep: #353535; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(26,26,26,0.35); --bg: #fffff1; --bg-2: #ffffe9; --panel: #ffffff; --panel-2: #fffff7; --line: rgba(26,26,26,0.28); --line-2: rgba(26,26,26,0.48); --ink: #1a1a1a; --muted: #343434; --muted-2: #616161; --grad-brand: linear-gradient(120deg, #6D8196 0%, #65788c 45%, #353535 100%); --grad-text: linear-gradient(100deg, #516070 0%, #65788c 50%, #4A4A4A 100%); --shadow-glow: 0 0 0 1px rgba(101,120,140,0.25), 0 18px 50px -24px rgba(101,120,140,0.35); } html.theme-ink-wash ::selection { background: rgba(101,120,140,0.22); } html.theme-ink-wash * { scrollbar-color: #b3b8bf transparent; } html.theme-ink-wash *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-ink-wash *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Golden taupe — #D4AF37 · #BDB76B · #FDFBD4 · #CE8946 (dark, generated from the Figma palette) */ html.theme-golden-taupe { --cyan: #D4AF37; --cyan-bright: #e0c56f; --blue: #CE8946; --blue-deep: #906031; --bg: #2a1c0f; --bg-2: #382514; --panel: #53371d; --panel-2: #5d432b; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #fefdec; --muted: #b6aa95; --muted-2: #94826c; --grad-brand: linear-gradient(120deg, #e1c773 0%, #D4AF37 45%, #906031 100%); --grad-text: linear-gradient(100deg, #e0c56f 0%, #D4AF37 50%, #CE8946 100%); --shadow-glow: 0 0 0 1px rgba(212,175,55,0.25), 0 18px 50px -24px rgba(212,175,55,0.35); } html.theme-golden-taupe ::selection { background: rgba(212,175,55,0.3); } /* Wisteria bloom — #D3D3FF · #9400D3 · #D8BFD8 · #ED80E9 (light, generated from the Figma palette) */ html.theme-wisteria-bloom { --cyan: #9400D3; --cyan-bright: #7600a9; --blue: #bf67bc; --blue-deep: #8a4a87; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(52,0,74,0.35); --bg: #e9e9ff; --bg-2: #ddddff; --panel: #ffffff; --panel-2: #f3f3ff; --line: rgba(52,0,74,0.28); --line-2: rgba(52,0,74,0.48); --ink: #34004a; --muted: #680094; --muted-2: #8938ac; --grad-brand: linear-gradient(120deg, #ED80E9 0%, #9400D3 45%, #8a4a87 100%); --grad-text: linear-gradient(100deg, #7600a9 0%, #9400D3 50%, #bf67bc 100%); --shadow-glow: 0 0 0 1px rgba(148,0,211,0.25), 0 18px 50px -24px rgba(148,0,211,0.35); } html.theme-wisteria-bloom ::selection { background: rgba(148,0,211,0.22); } html.theme-wisteria-bloom * { scrollbar-color: #b3b8bf transparent; } html.theme-wisteria-bloom *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-wisteria-bloom *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Burnt sienna — #E35336 · #F5F5DC · #F4A460 · #A0522D (dark, generated from the Figma palette) */ html.theme-burnt-sienna { --cyan: #eb856f; --cyan-bright: #f1a797; --blue: #F4A460; --blue-deep: #ab7343; --bg: #2c170d; --bg-2: #3c1f11; --panel: #582d19; --panel-2: #623a27; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #fbfbef; --muted: #b7a495; --muted-2: #967b6a; --grad-brand: linear-gradient(120deg, #f1aa9a 0%, #eb856f 45%, #ab7343 100%); --grad-text: linear-gradient(100deg, #f1a797 0%, #eb856f 50%, #F4A460 100%); --shadow-glow: 0 0 0 1px rgba(235,133,111,0.25), 0 18px 50px -24px rgba(235,133,111,0.35); } html.theme-burnt-sienna ::selection { background: rgba(235,133,111,0.3); } /* Blooming romance — #660033 · #E673AC · #469110 · #00520A (dark, generated from the Figma palette) */ html.theme-blooming-romance { --cyan: #578e5e; --cyan-bright: #86ae8b; --blue: #469110; --blue-deep: #31660b; --bg: #1c000e; --bg-2: #260013; --panel: #38001c; --panel-2: #440f2a; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #f4c0da; --muted: #a56f8a; --muted-2: #7f4964; --grad-brand: linear-gradient(120deg, #89b08e 0%, #578e5e 45%, #31660b 100%); --grad-text: linear-gradient(100deg, #86ae8b 0%, #578e5e 50%, #469110 100%); --shadow-glow: 0 0 0 1px rgba(87,142,94,0.25), 0 18px 50px -24px rgba(87,142,94,0.35); } html.theme-blooming-romance ::selection { background: rgba(87,142,94,0.3); } /* Desert dusk — #A2574F · #E68057 · #BF7587 · #993A8B (dark, generated from the Figma palette) */ html.theme-desert-dusk { --cyan: #E68057; --cyan-bright: #eda486; --blue: #993A8B; --blue-deep: #6b2961; --bg: #2a1026; --bg-2: #391634; --panel: #54204c; --panel-2: #5e2d57; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #f9ddd1; --muted: #b48e99; --muted-2: #93687f; --grad-brand: linear-gradient(120deg, #eea689 0%, #E68057 45%, #6b2961 100%); --grad-text: linear-gradient(100deg, #eda486 0%, #E68057 50%, #993A8B 100%); --shadow-glow: 0 0 0 1px rgba(230,128,87,0.25), 0 18px 50px -24px rgba(230,128,87,0.35); } html.theme-desert-dusk ::selection { background: rgba(230,128,87,0.3); } /* Lavender fields — #FDFBD4 · #BDB96A · #C1BFFF · #CF6DFC (light, generated from the Figma palette) */ html.theme-lavender-fields { --cyan: #9a51bd; --cyan-bright: #7b4197; --blue: #8e8b50; --blue-deep: #66643a; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(72,38,88,0.35); --bg: #fefdea; --bg-2: #fdfcdd; --panel: #ffffff; --panel-2: #fefef3; --line: rgba(72,38,88,0.28); --line-2: rgba(72,38,88,0.48); --ink: #482658; --muted: #914cb0; --muted-2: #a973c1; --grad-brand: linear-gradient(120deg, #CF6DFC 0%, #9a51bd 45%, #66643a 100%); --grad-text: linear-gradient(100deg, #7b4197 0%, #9a51bd 50%, #8e8b50 100%); --shadow-glow: 0 0 0 1px rgba(154,81,189,0.25), 0 18px 50px -24px rgba(154,81,189,0.35); } html.theme-lavender-fields ::selection { background: rgba(154,81,189,0.22); } html.theme-lavender-fields * { scrollbar-color: #b3b8bf transparent; } html.theme-lavender-fields *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-lavender-fields *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Hydrangea — #FF8DA1 · #FFC2BA · #FF9CE9 · #AD56C4 (light, generated from the Figma palette) */ html.theme-hydrangea { --cyan: #a150b6; --cyan-bright: #814092; --blue: #cd7182; --blue-deep: #94515e; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(61,30,69,0.35); --bg: #ffe1dd; --bg-2: #ffcfc9; --panel: #ffffff; --panel-2: #ffeeec; --line: rgba(61,30,69,0.28); --line-2: rgba(61,30,69,0.48); --ink: #3d1e45; --muted: #793c89; --muted-2: #9667a3; --grad-brand: linear-gradient(120deg, #AD56C4 0%, #a150b6 45%, #94515e 100%); --grad-text: linear-gradient(100deg, #814092 0%, #a150b6 50%, #cd7182 100%); --shadow-glow: 0 0 0 1px rgba(161,80,182,0.25), 0 18px 50px -24px rgba(161,80,182,0.35); } html.theme-hydrangea ::selection { background: rgba(161,80,182,0.22); } html.theme-hydrangea * { scrollbar-color: #b3b8bf transparent; } html.theme-hydrangea *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-hydrangea *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Cactus flower — #E491A6 · #845763 · #92E4BA · #90C67F (dark, generated from the Figma palette) */ html.theme-cactus-flower { --cyan: #92E4BA; --cyan-bright: #b1eccd; --blue: #90C67F; --blue-deep: #658b59; --bg: #25181b; --bg-2: #322125; --panel: #493036; --panel-2: #543c42; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #cef3e0; --muted: #96a199; --muted-2: #7c7a77; --grad-brand: linear-gradient(120deg, #b3eccf 0%, #92E4BA 45%, #658b59 100%); --grad-text: linear-gradient(100deg, #b1eccd 0%, #92E4BA 50%, #90C67F 100%); --shadow-glow: 0 0 0 1px rgba(146,228,186,0.25), 0 18px 50px -24px rgba(146,228,186,0.35); } html.theme-cactus-flower ::selection { background: rgba(146,228,186,0.3); } /* Wildflowers — #A8DCAB · #519755 · #DBAAA7 · #BE91BE (dark, generated from the Figma palette) */ html.theme-wildflowers { --cyan: #A8DCAB; --cyan-bright: #c0e6c3; --blue: #519755; --blue-deep: #396a3b; --bg: #132213; --bg-2: #192e1a; --panel: #254426; --panel-2: #324f33; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #e5f4e6; --muted: #94aa95; --muted-2: #6e876f; --grad-brand: linear-gradient(120deg, #c2e7c4 0%, #A8DCAB 45%, #396a3b 100%); --grad-text: linear-gradient(100deg, #c0e6c3 0%, #A8DCAB 50%, #519755 100%); --shadow-glow: 0 0 0 1px rgba(168,220,171,0.25), 0 18px 50px -24px rgba(168,220,171,0.35); } html.theme-wildflowers ::selection { background: rgba(168,220,171,0.3); } /* Country garden — #FFFFE3 · #DBD4FF · #808034 · #723480 (light, generated from the Figma palette) */ html.theme-country-garden { --cyan: #777730; --cyan-bright: #5f5f26; --blue: #723480; --blue-deep: #52255c; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(40,18,45,0.35); --bg: #fffff1; --bg-2: #ffffe9; --panel: #ffffff; --panel-2: #fffff7; --line: rgba(40,18,45,0.28); --line-2: rgba(40,18,45,0.48); --ink: #28122d; --muted: #50245a; --muted-2: #77547e; --grad-brand: linear-gradient(120deg, #808034 0%, #777730 45%, #52255c 100%); --grad-text: linear-gradient(100deg, #5f5f26 0%, #777730 50%, #723480 100%); --shadow-glow: 0 0 0 1px rgba(119,119,48,0.25), 0 18px 50px -24px rgba(119,119,48,0.35); } html.theme-country-garden ::selection { background: rgba(119,119,48,0.22); } html.theme-country-garden * { scrollbar-color: #b3b8bf transparent; } html.theme-country-garden *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-country-garden *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Lotus garden — #ADEBB3 · #FF857A · #EBAEE6 · #6B403C (light, generated from the Figma palette) */ html.theme-lotus-garden { --cyan: #b25d55; --cyan-bright: #8e4a44; --blue: #6B403C; --blue-deep: #4d2e2b; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(37,22,21,0.35); --bg: #d6f5d9; --bg-2: #bfefc4; --panel: #ffffff; --panel-2: #e8f9ea; --line: rgba(37,22,21,0.28); --line-2: rgba(37,22,21,0.48); --ink: #251615; --muted: #4b2d2a; --muted-2: #735b59; --grad-brand: linear-gradient(120deg, #FF857A 0%, #b25d55 45%, #4d2e2b 100%); --grad-text: linear-gradient(100deg, #8e4a44 0%, #b25d55 50%, #6B403C 100%); --shadow-glow: 0 0 0 1px rgba(178,93,85,0.25), 0 18px 50px -24px rgba(178,93,85,0.35); } html.theme-lotus-garden ::selection { background: rgba(178,93,85,0.22); } html.theme-lotus-garden * { scrollbar-color: #b3b8bf transparent; } html.theme-lotus-garden *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-lotus-garden *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Iris garden — #A47DAB · #692475 · #82AB7D · #6A6B4E (dark, generated from the Figma palette) */ html.theme-iris-garden { --cyan: #a47bab; --cyan-bright: #bda0c3; --blue: #82AB7D; --blue-deep: #5b7858; --bg: #1d0a20; --bg-2: #270e2c; --panel: #3a1440; --panel-2: #46224b; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #c7d9c5; --muted: #8c868d; --muted-2: #705f73; --grad-brand: linear-gradient(120deg, #bfa3c4 0%, #a47bab 45%, #5b7858 100%); --grad-text: linear-gradient(100deg, #bda0c3 0%, #a47bab 50%, #82AB7D 100%); --shadow-glow: 0 0 0 1px rgba(164,123,171,0.25), 0 18px 50px -24px rgba(164,123,171,0.35); } html.theme-iris-garden ::selection { background: rgba(164,123,171,0.3); } /* Fresh peach — #FFD3AC · #FFB5AB · #E39A7B · #DBB06B (light, generated from the Figma palette) */ html.theme-fresh-peach { --cyan: #8e7245; --cyan-bright: #725b37; --blue: #b67c63; --blue-deep: #835947; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(79,54,43,0.35); --bg: #ffe9d6; --bg-2: #ffddbe; --panel: #ffffff; --panel-2: #fff3e8; --line: rgba(79,54,43,0.28); --line-2: rgba(79,54,43,0.48); --ink: #4f362b; --muted: #946450; --muted-2: #ac8677; --grad-brand: linear-gradient(120deg, #DBB06B 0%, #8e7245 45%, #835947 100%); --grad-text: linear-gradient(100deg, #725b37 0%, #8e7245 50%, #b67c63 100%); --shadow-glow: 0 0 0 1px rgba(142,114,69,0.25), 0 18px 50px -24px rgba(142,114,69,0.35); } html.theme-fresh-peach ::selection { background: rgba(142,114,69,0.22); } html.theme-fresh-peach * { scrollbar-color: #b3b8bf transparent; } html.theme-fresh-peach *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-fresh-peach *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Golden hour — #FFBF00 · #CFB53B · #E0B0FF · #CCC550 (light, generated from the Figma palette) */ html.theme-golden-hour { --cyan: #8f6b00; --cyan-bright: #725600; --blue: #9a872c; --blue-deep: #6f6120; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(72,63,21,0.35); --bg: #ffdf80; --bg-2: #ffcd38; --panel: #ffffff; --panel-2: #ffedb8; --line: rgba(72,63,21,0.28); --line-2: rgba(72,63,21,0.48); --ink: #483f15; --muted: #7e6e23; --muted-2: #9a8e53; --grad-brand: linear-gradient(120deg, #c7b580 0%, #8f6b00 45%, #6f6120 100%); --grad-text: linear-gradient(100deg, #725600 0%, #8f6b00 50%, #9a872c 100%); --shadow-glow: 0 0 0 1px rgba(143,107,0,0.25), 0 18px 50px -24px rgba(143,107,0,0.35); } html.theme-golden-hour ::selection { background: rgba(143,107,0,0.22); } html.theme-golden-hour * { scrollbar-color: #b3b8bf transparent; } html.theme-golden-hour *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-golden-hour *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Spiced chai — #FDFBD4 · #D47E30 · #8D5A2B · #825E34 (dark, generated from the Figma palette) */ html.theme-spiced-chai { --cyan: #da9250; --cyan-bright: #e4b181; --blue: #8D5A2B; --blue-deep: #633f1e; --bg: #241a0f; --bg-2: #312314; --panel: #48341d; --panel-2: #53402b; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #fefdec; --muted: #b2a995; --muted-2: #8d806c; --grad-brand: linear-gradient(120deg, #e5b385 0%, #da9250 45%, #633f1e 100%); --grad-text: linear-gradient(100deg, #e4b181 0%, #da9250 50%, #8D5A2B 100%); --shadow-glow: 0 0 0 1px rgba(218,146,80,0.25), 0 18px 50px -24px rgba(218,146,80,0.35); } html.theme-spiced-chai ::selection { background: rgba(218,146,80,0.3); } /* Cherry blossom — #F2C7C7 · #FFFFFF · #D5F3D8 · #FFB7C5 (light, generated from the Figma palette) */ html.theme-cherry-blossom { --cyan: #8f666e; --cyan-bright: #725258; --blue: #9b8181; --blue-deep: #705d5d; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(83,60,64,0.35); --bg: #ffffff; --bg-2: #ffffff; --panel: #ffffff; --panel-2: #ffffff; --line: rgba(83,60,64,0.28); --line-2: rgba(83,60,64,0.48); --ink: #533c40; --muted: #8f676f; --muted-2: #a8888f; --grad-brand: linear-gradient(120deg, #FFB7C5 0%, #8f666e 45%, #705d5d 100%); --grad-text: linear-gradient(100deg, #725258 0%, #8f666e 50%, #9b8181 100%); --shadow-glow: 0 0 0 1px rgba(143,102,110,0.25), 0 18px 50px -24px rgba(143,102,110,0.35); } html.theme-cherry-blossom ::selection { background: rgba(143,102,110,0.22); } html.theme-cherry-blossom * { scrollbar-color: #b3b8bf transparent; } html.theme-cherry-blossom *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-cherry-blossom *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Evening rose — #DCA1A1 · #996666 · #8E4585 · #4A4A4A (dark, generated from the Figma palette) */ html.theme-evening-rose { --cyan: #ae7ba8; --cyan-bright: #c5a0c0; --blue: #DCA1A1; --blue-deep: #9a7171; --bg: #151515; --bg-2: #1c1c1c; --panel: #292929; --panel-2: #363636; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #efd5d5; --muted: #9c8d8d; --muted-2: #746a6a; --grad-brand: linear-gradient(120deg, #c6a3c2 0%, #ae7ba8 45%, #9a7171 100%); --grad-text: linear-gradient(100deg, #c5a0c0 0%, #ae7ba8 50%, #DCA1A1 100%); --shadow-glow: 0 0 0 1px rgba(174,123,168,0.25), 0 18px 50px -24px rgba(174,123,168,0.35); } html.theme-evening-rose ::selection { background: rgba(174,123,168,0.3); } /* Pastel garden — #C75F71 · #F0B8B8 · #A2AE9D · #54463A (dark, generated from the Figma palette) */ html.theme-pastel-garden { --cyan: #cf7886; --cyan-bright: #dc9ea8; --blue: #F0B8B8; --blue-deep: #a88181; --bg: #171410; --bg-2: #1f1b16; --panel: #2e2720; --panel-2: #3b342d; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #f8dfdf; --muted: #a3928f; --muted-2: #7b6d69; --grad-brand: linear-gradient(120deg, #dda1aa 0%, #cf7886 45%, #a88181 100%); --grad-text: linear-gradient(100deg, #dc9ea8 0%, #cf7886 50%, #F0B8B8 100%); --shadow-glow: 0 0 0 1px rgba(207,120,134,0.25), 0 18px 50px -24px rgba(207,120,134,0.35); } html.theme-pastel-garden ::selection { background: rgba(207,120,134,0.3); } /* Tuscan sunset — #E35336 · #FFD3AC · #9988A1 · #8A2B0E (dark, generated from the Figma palette) */ html.theme-tuscan-sunset { --cyan: #b87e6d; --cyan-bright: #cca296; --blue: #E35336; --blue-deep: #9f3a26; --bg: #260c04; --bg-2: #341005; --panel: #4c1808; --panel-2: #572617; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #ffebda; --muted: #b49282; --muted-2: #906858; --grad-brand: linear-gradient(120deg, #cda599 0%, #b87e6d 45%, #9f3a26 100%); --grad-text: linear-gradient(100deg, #cca296 0%, #b87e6d 50%, #E35336 100%); --shadow-glow: 0 0 0 1px rgba(184,126,109,0.25), 0 18px 50px -24px rgba(184,126,109,0.35); } html.theme-tuscan-sunset ::selection { background: rgba(184,126,109,0.3); } /* Zesty lemon — #FFFF66 · #FFE566 · #D6D58B · #B3B347 (light, generated from the Figma palette) */ html.theme-zesty-lemon { --cyan: #73732e; --cyan-bright: #5c5c25; --blue: #9a8a3d; --blue-deep: #6f632c; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(63,63,25,0.35); --bg: #ffffb3; --bg-2: #ffff88; --panel: #ffffff; --panel-2: #ffffd4; --line: rgba(63,63,25,0.28); --line-2: rgba(63,63,25,0.48); --ink: #3f3f19; --muted: #74742f; --muted-2: #93935d; --grad-brand: linear-gradient(120deg, #B3B347 0%, #73732e 45%, #6f632c 100%); --grad-text: linear-gradient(100deg, #5c5c25 0%, #73732e 50%, #9a8a3d 100%); --shadow-glow: 0 0 0 1px rgba(115,115,46,0.25), 0 18px 50px -24px rgba(115,115,46,0.35); } html.theme-zesty-lemon ::selection { background: rgba(115,115,46,0.22); } html.theme-zesty-lemon * { scrollbar-color: #b3b8bf transparent; } html.theme-zesty-lemon *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-zesty-lemon *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* California beaches — #FFC067 · #66F4FF · #66C4FF · #7D99AA (light, generated from the Figma palette) */ html.theme-california-beaches { --cyan: #3d759a; --cyan-bright: #315e7b; --blue: #b28548; --blue-deep: #806034; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(44,54,60,0.35); --bg: #b3faff; --bg-2: #88f6ff; --panel: #ffffff; --panel-2: #d4fcff; --line: rgba(44,54,60,0.28); --line-2: rgba(44,54,60,0.48); --ink: #2c363c; --muted: #586b77; --muted-2: #7d8c95; --grad-brand: linear-gradient(120deg, #66C4FF 0%, #3d759a 45%, #806034 100%); --grad-text: linear-gradient(100deg, #315e7b 0%, #3d759a 50%, #b28548 100%); --shadow-glow: 0 0 0 1px rgba(61,117,154,0.25), 0 18px 50px -24px rgba(61,117,154,0.35); } html.theme-california-beaches ::selection { background: rgba(61,117,154,0.22); } html.theme-california-beaches * { scrollbar-color: #b3b8bf transparent; } html.theme-california-beaches *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-california-beaches *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Freshly squeezed — #FFBF00 · #F2CF7E · #FFE642 · #FF7900 (light, generated from the Figma palette) */ html.theme-freshly-squeezed { --cyan: #b25500; --cyan-bright: #8e4400; --blue: #b28500; --blue-deep: #806000; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(89,42,0,0.35); --bg: #fff3a1; --bg-2: #ffec6c; --panel: #ffffff; --panel-2: #fff8ca; --line: rgba(89,42,0,0.28); --line-2: rgba(89,42,0,0.48); --ink: #592a00; --muted: #b35500; --muted-2: #c47a38; --grad-brand: linear-gradient(120deg, #FF7900 0%, #b25500 45%, #806000 100%); --grad-text: linear-gradient(100deg, #8e4400 0%, #b25500 50%, #b28500 100%); --shadow-glow: 0 0 0 1px rgba(178,85,0,0.25), 0 18px 50px -24px rgba(178,85,0,0.35); } html.theme-freshly-squeezed ::selection { background: rgba(178,85,0,0.22); } html.theme-freshly-squeezed * { scrollbar-color: #b3b8bf transparent; } html.theme-freshly-squeezed *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-freshly-squeezed *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Pistachio dream — #80EF80 · #E3F0A3 · #BADBA2 · #42D674 (light, generated from the Figma palette) */ html.theme-pistachio-dream { --cyan: #288145; --cyan-bright: #206737; --blue: #539a53; --blue-deep: #3c6f3c; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(23,75,41,0.35); --bg: #f1f8d1; --bg-2: #e9f3b7; --panel: #ffffff; --panel-2: #f7fbe5; --line: rgba(23,75,41,0.28); --line-2: rgba(23,75,41,0.48); --ink: #174b29; --muted: #288246; --muted-2: #579e6f; --grad-brand: linear-gradient(120deg, #42D674 0%, #288145 45%, #3c6f3c 100%); --grad-text: linear-gradient(100deg, #206737 0%, #288145 50%, #539a53 100%); --shadow-glow: 0 0 0 1px rgba(40,129,69,0.25), 0 18px 50px -24px rgba(40,129,69,0.35); } html.theme-pistachio-dream ::selection { background: rgba(40,129,69,0.22); } html.theme-pistachio-dream * { scrollbar-color: #b3b8bf transparent; } html.theme-pistachio-dream *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-pistachio-dream *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Mango popsicle — #F2B949 · #EDD377 · #F2E829 · #F27430 (light, generated from the Figma palette) */ html.theme-mango-popsicle { --cyan: #b45624; --cyan-bright: #90451d; --blue: #a78133; --blue-deep: #785d25; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(85,41,17,0.35); --bg: #f9f494; --bg-2: #f5ed58; --panel: #ffffff; --panel-2: #fbf9c3; --line: rgba(85,41,17,0.28); --line-2: rgba(85,41,17,0.48); --ink: #552911; --muted: #a95122; --muted-2: #bc7753; --grad-brand: linear-gradient(120deg, #F27430 0%, #b45624 45%, #785d25 100%); --grad-text: linear-gradient(100deg, #90451d 0%, #b45624 50%, #a78133 100%); --shadow-glow: 0 0 0 1px rgba(180,86,36,0.25), 0 18px 50px -24px rgba(180,86,36,0.35); } html.theme-mango-popsicle ::selection { background: rgba(180,86,36,0.22); } html.theme-mango-popsicle * { scrollbar-color: #b3b8bf transparent; } html.theme-mango-popsicle *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-mango-popsicle *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Guava — #FF8559 · #FFB578 · #E65447 · #CF5376 (dark, generated from the Figma palette) */ html.theme-guava { --cyan: #FF8559; --cyan-bright: #ffa787; --blue: #FFB578; --blue-deep: #b37f54; --bg: #34151e; --bg-2: #461c28; --panel: #67293b; --panel-2: #703647; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #ffefe2; --muted: #bf9c9c; --muted-2: #a1747a; --grad-brand: linear-gradient(120deg, #ffaa8b 0%, #FF8559 45%, #b37f54 100%); --grad-text: linear-gradient(100deg, #ffa787 0%, #FF8559 50%, #FFB578 100%); --shadow-glow: 0 0 0 1px rgba(255,133,89,0.25), 0 18px 50px -24px rgba(255,133,89,0.35); } html.theme-guava ::selection { background: rgba(255,133,89,0.3); } /* Glowing horizon — #FFB343 · #42EAFF · #4272FF · #FF7E42 (light, generated from the Figma palette) */ html.theme-glowing-horizon { --cyan: #b2572e; --cyan-bright: #8e4625; --blue: #4272FF; --blue-deep: #3052b8; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(23,40,89,0.35); --bg: #a1f5ff; --bg-2: #6cefff; --panel: #ffffff; --panel-2: #caf9ff; --line: rgba(23,40,89,0.28); --line-2: rgba(23,40,89,0.48); --ink: #172859; --muted: #2e50b3; --muted-2: #5c77c4; --grad-brand: linear-gradient(120deg, #FF7E42 0%, #b2572e 45%, #3052b8 100%); --grad-text: linear-gradient(100deg, #8e4625 0%, #b2572e 50%, #4272FF 100%); --shadow-glow: 0 0 0 1px rgba(178,87,46,0.25), 0 18px 50px -24px rgba(178,87,46,0.35); } html.theme-glowing-horizon ::selection { background: rgba(178,87,46,0.22); } html.theme-glowing-horizon * { scrollbar-color: #b3b8bf transparent; } html.theme-glowing-horizon *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-glowing-horizon *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Sunny day — #FFBF00 · #807040 · #007EFF · #2400FF (dark, generated from the Figma palette) */ html.theme-sunny-day { --cyan: #FFBF00; --cyan-bright: #ffd147; --blue: #007EFF; --blue-deep: #0058b3; --bg: #0a0046; --bg-2: #0e005f; --panel: #14008c; --panel-2: #220f93; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #ffe28c; --muted: #9c838c; --muted-2: #6d568c; --grad-brand: linear-gradient(120deg, #ffd24d 0%, #FFBF00 45%, #0058b3 100%); --grad-text: linear-gradient(100deg, #ffd147 0%, #FFBF00 50%, #007EFF 100%); --shadow-glow: 0 0 0 1px rgba(255,191,0,0.25), 0 18px 50px -24px rgba(255,191,0,0.35); } html.theme-sunny-day ::selection { background: rgba(255,191,0,0.3); } /* Retro sunset — #BE5103 · #FFCE1B · #069494 · #B7410E (dark, generated from the Figma palette) */ html.theme-retro-sunset { --cyan: #FFCE1B; --cyan-bright: #ffdc5b; --blue: #069494; --blue-deep: #046868; --bg: #331204; --bg-2: #451805; --panel: #652408; --panel-2: #6e3117; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #ffe998; --muted: #be965c; --muted-2: #a06f3f; --grad-brand: linear-gradient(120deg, #ffdd5f 0%, #FFCE1B 45%, #046868 100%); --grad-text: linear-gradient(100deg, #ffdc5b 0%, #FFCE1B 50%, #069494 100%); --shadow-glow: 0 0 0 1px rgba(255,206,27,0.25), 0 18px 50px -24px rgba(255,206,27,0.35); } html.theme-retro-sunset ::selection { background: rgba(255,206,27,0.3); } /* Bubblegum pop — #FF69B4 · #069494 · #FFFFFF · #00F0FF (light, generated from the Figma palette) */ html.theme-bubblegum-pop { --cyan: #068080; --cyan-bright: #056666; --blue: #009aa6; --blue-deep: #006f78; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(2,52,52,0.35); --bg: #ffffff; --bg-2: #ffffff; --panel: #ffffff; --panel-2: #ffffff; --line: rgba(2,52,52,0.28); --line-2: rgba(2,52,52,0.48); --ink: #023434; --muted: #046868; --muted-2: #3b8989; --grad-brand: linear-gradient(120deg, #069494 0%, #068080 45%, #006f78 100%); --grad-text: linear-gradient(100deg, #056666 0%, #068080 50%, #009aa6 100%); --shadow-glow: 0 0 0 1px rgba(6,128,128,0.25), 0 18px 50px -24px rgba(6,128,128,0.35); } html.theme-bubblegum-pop ::selection { background: rgba(6,128,128,0.22); } html.theme-bubblegum-pop * { scrollbar-color: #b3b8bf transparent; } html.theme-bubblegum-pop *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-bubblegum-pop *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Cotton candy skies — #B298E7 · #B8E3E9 · #F5B8D5 · #F9BEDD (light, generated from the Figma palette) */ html.theme-cotton-candy-skies { --cyan: #7c69a1; --cyan-bright: #635481; --blue: #aa8094; --blue-deep: #7a5c6b; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(62,53,81,0.35); --bg: #dcf1f4; --bg-2: #c8e9ee; --panel: #ffffff; --panel-2: #ebf7f9; --line: rgba(62,53,81,0.28); --line-2: rgba(62,53,81,0.48); --ink: #3e3551; --muted: #7d6aa2; --muted-2: #9a8bb6; --grad-brand: linear-gradient(120deg, #B298E7 0%, #7c69a1 45%, #7a5c6b 100%); --grad-text: linear-gradient(100deg, #635481 0%, #7c69a1 50%, #aa8094 100%); --shadow-glow: 0 0 0 1px rgba(124,105,161,0.25), 0 18px 50px -24px rgba(124,105,161,0.35); } html.theme-cotton-candy-skies ::selection { background: rgba(124,105,161,0.22); } html.theme-cotton-candy-skies * { scrollbar-color: #b3b8bf transparent; } html.theme-cotton-candy-skies *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-cotton-candy-skies *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Electric kiwi — #CCFF00 · #FFFF00 · #DFFF00 · #000000 (light, generated from the Figma palette) */ html.theme-electric-kiwi { --cyan: #637c00; --cyan-bright: #4f6300; --blue: #7c8f00; --blue-deep: #596700; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(0,0,0,0.35); --bg: #ffff80; --bg-2: #ffff38; --panel: #ffffff; --panel-2: #ffffb8; --line: rgba(0,0,0,0.28); --line-2: rgba(0,0,0,0.48); --ink: #000000; --muted: #000000; --muted-2: #383838; --grad-brand: linear-gradient(120deg, #CCFF00 0%, #637c00 45%, #596700 100%); --grad-text: linear-gradient(100deg, #4f6300 0%, #637c00 50%, #7c8f00 100%); --shadow-glow: 0 0 0 1px rgba(99,124,0,0.25), 0 18px 50px -24px rgba(99,124,0,0.35); } html.theme-electric-kiwi ::selection { background: rgba(99,124,0,0.22); } html.theme-electric-kiwi * { scrollbar-color: #b3b8bf transparent; } html.theme-electric-kiwi *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-electric-kiwi *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Watermelon Splash — #FC6C85 · #89F336 · #4A4A4A · #ADEBB3 (light, generated from the Figma palette) */ html.theme-watermelon-splash { --cyan: #bd5064; --cyan-bright: #974050; --blue: #589c23; --blue-deep: #3f7019; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(26,26,26,0.35); --bg: #d6f5d9; --bg-2: #bfefc4; --panel: #ffffff; --panel-2: #e8f9ea; --line: rgba(26,26,26,0.28); --line-2: rgba(26,26,26,0.48); --ink: #1a1a1a; --muted: #343434; --muted-2: #616161; --grad-brand: linear-gradient(120deg, #FC6C85 0%, #bd5064 45%, #3f7019 100%); --grad-text: linear-gradient(100deg, #974050 0%, #bd5064 50%, #589c23 100%); --shadow-glow: 0 0 0 1px rgba(189,80,100,0.25), 0 18px 50px -24px rgba(189,80,100,0.35); } html.theme-watermelon-splash ::selection { background: rgba(189,80,100,0.22); } html.theme-watermelon-splash * { scrollbar-color: #b3b8bf transparent; } html.theme-watermelon-splash *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-watermelon-splash *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Alchemical reaction — #9D00FF · #DE811D · #6BFF00 · #5B8040 (dark, generated from the Figma palette) */ html.theme-alchemical-reaction { --cyan: #6BFF00; --cyan-bright: #94ff47; --blue: #9D00FF; --blue-deep: #6e00b3; --bg: #2b0046; --bg-2: #3a005f; --panel: #56008c; --panel-2: #600f93; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #bcff8c; --muted: #91948c; --muted-2: #7d618c; --grad-brand: linear-gradient(120deg, #97ff4d 0%, #6BFF00 45%, #6e00b3 100%); --grad-text: linear-gradient(100deg, #94ff47 0%, #6BFF00 50%, #9D00FF 100%); --shadow-glow: 0 0 0 1px rgba(107,255,0,0.25), 0 18px 50px -24px rgba(107,255,0,0.35); } html.theme-alchemical-reaction ::selection { background: rgba(107,255,0,0.3); } /* Electropop — #CCFF00 · #FF6B00 · #F900FF · #5200FF (dark, generated from the Figma palette) */ html.theme-electropop { --cyan: #CCFF00; --cyan-bright: #daff47; --blue: #FF6B00; --blue-deep: #b34b00; --bg: #170046; --bg-2: #1f005f; --panel: #2d008c; --panel-2: #3a0f93; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #e8ff8c; --muted: #99948c; --muted-2: #74618c; --grad-brand: linear-gradient(120deg, #dbff4d 0%, #CCFF00 45%, #b34b00 100%); --grad-text: linear-gradient(100deg, #daff47 0%, #CCFF00 50%, #FF6B00 100%); --shadow-glow: 0 0 0 1px rgba(204,255,0,0.25), 0 18px 50px -24px rgba(204,255,0,0.35); } html.theme-electropop ::selection { background: rgba(204,255,0,0.3); } /* Cool revival — #00FFFF · #00AEFF · #00DE94 · #00FF52 (light, generated from the Figma palette) */ html.theme-cool-revival { --cyan: #0079b2; --cyan-bright: #00618e; --blue: #009a67; --blue-deep: #006f4a; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(0,61,89,0.35); --bg: #80ffff; --bg-2: #38ffff; --panel: #ffffff; --panel-2: #b8ffff; --line: rgba(0,61,89,0.28); --line-2: rgba(0,61,89,0.48); --ink: #003d59; --muted: #007ab3; --muted-2: #3897c4; --grad-brand: linear-gradient(120deg, #00AEFF 0%, #0079b2 45%, #006f4a 100%); --grad-text: linear-gradient(100deg, #00618e 0%, #0079b2 50%, #009a67 100%); --shadow-glow: 0 0 0 1px rgba(0,121,178,0.25), 0 18px 50px -24px rgba(0,121,178,0.35); } html.theme-cool-revival ::selection { background: rgba(0,121,178,0.22); } html.theme-cool-revival * { scrollbar-color: #b3b8bf transparent; } html.theme-cool-revival *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-cool-revival *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Neon jungle — #89F336 · #38A711 · #F23598 · #A835F2 (dark, generated from the Figma palette) */ html.theme-neon-jungle { --cyan: #89F336; --cyan-bright: #aaf66e; --blue: #38A711; --blue-deep: #27750c; --bg: #2e0f43; --bg-2: #3f145a; --panel: #5c1d85; --panel-2: #662b8c; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #e2facd; --muted: #aa9daf; --muted-2: #8f71a0; --grad-brand: linear-gradient(120deg, #acf772 0%, #89F336 45%, #27750c 100%); --grad-text: linear-gradient(100deg, #aaf66e 0%, #89F336 50%, #38A711 100%); --shadow-glow: 0 0 0 1px rgba(137,243,54,0.25), 0 18px 50px -24px rgba(137,243,54,0.35); } html.theme-neon-jungle ::selection { background: rgba(137,243,54,0.3); } /* Sharp edge — #898989 · #D9D9D9 · #FF4D4D · #4DFFBC (light, generated from the Figma palette) */ html.theme-sharp-edge { --cyan: #cd3e3e; --cyan-bright: #a43232; --blue: #898989; --blue-deep: #636363; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(48,48,48,0.35); --bg: #a6ffde; --bg-2: #74ffcb; --panel: #ffffff; --panel-2: #cdffec; --line: rgba(48,48,48,0.28); --line-2: rgba(48,48,48,0.48); --ink: #303030; --muted: #606060; --muted-2: #838383; --grad-brand: linear-gradient(120deg, #FF4D4D 0%, #cd3e3e 45%, #636363 100%); --grad-text: linear-gradient(100deg, #a43232 0%, #cd3e3e 50%, #898989 100%); --shadow-glow: 0 0 0 1px rgba(205,62,62,0.25), 0 18px 50px -24px rgba(205,62,62,0.35); } html.theme-sharp-edge ::selection { background: rgba(205,62,62,0.22); } html.theme-sharp-edge * { scrollbar-color: #b3b8bf transparent; } html.theme-sharp-edge *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-sharp-edge *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Electric fusion — #00F0FF · #00FF81 · #FFA900 · #FF6800 (light, generated from the Figma palette) */ html.theme-electric-fusion { --cyan: #bf4e00; --cyan-bright: #993e00; --blue: #bf7e00; --blue-deep: #8a5b00; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(89,36,0,0.35); --bg: #80ffc0; --bg-2: #38ff9d; --panel: #ffffff; --panel-2: #b8ffdc; --line: rgba(89,36,0,0.28); --line-2: rgba(89,36,0,0.48); --ink: #592400; --muted: #b34900; --muted-2: #c47138; --grad-brand: linear-gradient(120deg, #FF6800 0%, #bf4e00 45%, #8a5b00 100%); --grad-text: linear-gradient(100deg, #993e00 0%, #bf4e00 50%, #bf7e00 100%); --shadow-glow: 0 0 0 1px rgba(191,78,0,0.25), 0 18px 50px -24px rgba(191,78,0,0.35); } html.theme-electric-fusion ::selection { background: rgba(191,78,0,0.22); } html.theme-electric-fusion * { scrollbar-color: #b3b8bf transparent; } html.theme-electric-fusion *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-electric-fusion *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Fireworks — #ED2100 · #E88A38 · #960016 · #BF00AC (dark, generated from the Figma palette) */ html.theme-fireworks { --cyan: #f05238; --cyan-bright: #f48270; --blue: #BF00AC; --blue-deep: #860078; --bg: #2a0006; --bg-2: #380008; --panel: #53000c; --panel-2: #5d0f1b; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #f5caa5; --muted: #b17565; --muted-2: #914d46; --grad-brand: linear-gradient(120deg, #f58674 0%, #f05238 45%, #860078 100%); --grad-text: linear-gradient(100deg, #f48270 0%, #f05238 50%, #BF00AC 100%); --shadow-glow: 0 0 0 1px rgba(240,82,56,0.25), 0 18px 50px -24px rgba(240,82,56,0.35); } html.theme-fireworks ::selection { background: rgba(240,82,56,0.3); } /* Space berries — #FD3DB5 · #FFB8DC · #FB6A2C · #8C1946 (dark, generated from the Figma palette) */ html.theme-space-berries { --cyan: #FB6A2C; --cyan-bright: #fc9467; --blue: #FD3DB5; --blue-deep: #b12b7f; --bg: #270714; --bg-2: #340a1b; --panel: #4d0e27; --panel-2: #581c34; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #ffdfef; --muted: #b4879b; --muted-2: #915d73; --grad-brand: linear-gradient(120deg, #fc976b 0%, #FB6A2C 45%, #b12b7f 100%); --grad-text: linear-gradient(100deg, #fc9467 0%, #FB6A2C 50%, #FD3DB5 100%); --shadow-glow: 0 0 0 1px rgba(251,106,44,0.25), 0 18px 50px -24px rgba(251,106,44,0.35); } html.theme-space-berries ::selection { background: rgba(251,106,44,0.3); } /* Pop art — #00F0FF · #FF46A2 · #FFFF00 · #EE4B2B (light, generated from the Figma palette) */ html.theme-pop-art { --cyan: #ce4125; --cyan-bright: #a5341e; --blue: #ed4197; --blue-deep: #ab2f6d; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(83,26,15,0.35); --bg: #ffff80; --bg-2: #ffff38; --panel: #ffffff; --panel-2: #ffffb8; --line: rgba(83,26,15,0.28); --line-2: rgba(83,26,15,0.48); --ink: #531a0f; --muted: #a7351e; --muted-2: #ba6150; --grad-brand: linear-gradient(120deg, #EE4B2B 0%, #ce4125 45%, #ab2f6d 100%); --grad-text: linear-gradient(100deg, #a5341e 0%, #ce4125 50%, #ed4197 100%); --shadow-glow: 0 0 0 1px rgba(206,65,37,0.25), 0 18px 50px -24px rgba(206,65,37,0.35); } html.theme-pop-art ::selection { background: rgba(206,65,37,0.22); } html.theme-pop-art * { scrollbar-color: #b3b8bf transparent; } html.theme-pop-art *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-pop-art *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Urban graffiti — #FF2400 · #2CFF05 · #00F0FF · #5A5A5A (light, generated from the Figma palette) */ html.theme-urban-graffiti { --cyan: #dc1f00; --cyan-bright: #b01900; --blue: #009aa6; --blue-deep: #006f78; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(32,32,32,0.35); --bg: #96ff82; --bg-2: #5aff3c; --panel: #ffffff; --panel-2: #c4ffb9; --line: rgba(32,32,32,0.28); --line-2: rgba(32,32,32,0.48); --ink: #202020; --muted: #3f3f3f; --muted-2: #696969; --grad-brand: linear-gradient(120deg, #FF2400 0%, #dc1f00 45%, #006f78 100%); --grad-text: linear-gradient(100deg, #b01900 0%, #dc1f00 50%, #009aa6 100%); --shadow-glow: 0 0 0 1px rgba(220,31,0,0.25), 0 18px 50px -24px rgba(220,31,0,0.35); } html.theme-urban-graffiti ::selection { background: rgba(220,31,0,0.22); } html.theme-urban-graffiti * { scrollbar-color: #b3b8bf transparent; } html.theme-urban-graffiti *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-urban-graffiti *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Neon noir — #000000 · #2CFF05 · #BF00FF · #2D2D2D (dark, generated from the Figma palette) */ html.theme-neon-noir { --cyan: #2CFF05; --cyan-bright: #67ff4b; --blue: #BF00FF; --blue-deep: #8600b3; --bg: #000000; --bg-2: #000000; --panel: #000000; --panel-2: #0f0f0f; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #a0ff8f; --muted: #5d9453; --muted-2: #3d6136; --grad-brand: linear-gradient(120deg, #6bff50 0%, #2CFF05 45%, #8600b3 100%); --grad-text: linear-gradient(100deg, #67ff4b 0%, #2CFF05 50%, #BF00FF 100%); --shadow-glow: 0 0 0 1px rgba(44,255,5,0.25), 0 18px 50px -24px rgba(44,255,5,0.35); } html.theme-neon-noir ::selection { background: rgba(44,255,5,0.3); } /* Tropical punch — #FF8243 · #FFC0CB · #FCE883 · #069494 (light, generated from the Figma palette) */ html.theme-tropical-punch { --cyan: #068080; --cyan-bright: #056666; --blue: #dc713a; --blue-deep: #9e512a; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(2,52,52,0.35); --bg: #fef4c1; --bg-2: #fded9e; --panel: #ffffff; --panel-2: #fef9dc; --line: rgba(2,52,52,0.28); --line-2: rgba(2,52,52,0.48); --ink: #023434; --muted: #046868; --muted-2: #3b8989; --grad-brand: linear-gradient(120deg, #069494 0%, #068080 45%, #9e512a 100%); --grad-text: linear-gradient(100deg, #056666 0%, #068080 50%, #dc713a 100%); --shadow-glow: 0 0 0 1px rgba(6,128,128,0.25), 0 18px 50px -24px rgba(6,128,128,0.35); } html.theme-tropical-punch ::selection { background: rgba(6,128,128,0.22); } html.theme-tropical-punch * { scrollbar-color: #b3b8bf transparent; } html.theme-tropical-punch *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-tropical-punch *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Cobalt sky — #0047AB · #000080 · #82C8E5 · #6D8196 (dark, generated from the Figma palette) */ html.theme-cobalt-sky { --cyan: #487bc3; --cyan-bright: #7ba0d4; --blue: #000080; --blue-deep: #00005a; --bg: #000023; --bg-2: #000030; --panel: #000046; --panel-2: #0f0f51; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #c7e6f3; --muted: #7385aa; --muted-2: #4c5788; --grad-brand: linear-gradient(120deg, #7fa3d5 0%, #487bc3 45%, #00005a 100%); --grad-text: linear-gradient(100deg, #7ba0d4 0%, #487bc3 50%, #000080 100%); --shadow-glow: 0 0 0 1px rgba(72,123,195,0.25), 0 18px 50px -24px rgba(72,123,195,0.35); } html.theme-cobalt-sky ::selection { background: rgba(72,123,195,0.3); } /* Technicolor dream — #FF00FF · #00FFFF · #CCFF00 · #191970 (light, generated from the Figma palette) */ html.theme-technicolor-dream { --cyan: #cd00cd; --cyan-bright: #a400a4; --blue: #191970; --blue-deep: #121251; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(9,9,39,0.35); --bg: #e6ff80; --bg-2: #d7ff38; --panel: #ffffff; --panel-2: #f1ffb8; --line: rgba(9,9,39,0.28); --line-2: rgba(9,9,39,0.48); --ink: #090927; --muted: #12124e; --muted-2: #464675; --grad-brand: linear-gradient(120deg, #FF00FF 0%, #cd00cd 45%, #121251 100%); --grad-text: linear-gradient(100deg, #a400a4 0%, #cd00cd 50%, #191970 100%); --shadow-glow: 0 0 0 1px rgba(205,0,205,0.25), 0 18px 50px -24px rgba(205,0,205,0.35); } html.theme-technicolor-dream ::selection { background: rgba(205,0,205,0.22); } html.theme-technicolor-dream * { scrollbar-color: #b3b8bf transparent; } html.theme-technicolor-dream *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-technicolor-dream *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Jewel box — #50C878 · #0F52BA · #9966CC · #CFB53B (dark, generated from the Figma palette) */ html.theme-jewel-box { --cyan: #CFB53B; --cyan-bright: #dcca72; --blue: #0F52BA; --blue-deep: #0b3982; --bg: #041733; --bg-2: #051f45; --panel: #082d66; --panel-2: #173a6f; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #e9dea7; --muted: #8b948c; --muted-2: #5e707f; --grad-brand: linear-gradient(120deg, #ddcb76 0%, #CFB53B 45%, #0b3982 100%); --grad-text: linear-gradient(100deg, #dcca72 0%, #CFB53B 50%, #0F52BA 100%); --shadow-glow: 0 0 0 1px rgba(207,181,59,0.25), 0 18px 50px -24px rgba(207,181,59,0.35); } html.theme-jewel-box ::selection { background: rgba(207,181,59,0.3); } /* Quite clear — #CBCBCB · #F2F2F2 · #174D38 · #4D1717 (light, generated from the Figma palette) */ html.theme-quite-clear { --cyan: #174D38; --cyan-bright: #123e2d; --blue: #4D1717; --blue-deep: #371111; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(27,8,8,0.35); --bg: #f9f9f9; --bg-2: #f5f5f5; --panel: #ffffff; --panel-2: #fbfbfb; --line: rgba(27,8,8,0.28); --line-2: rgba(27,8,8,0.48); --ink: #1b0808; --muted: #361010; --muted-2: #624545; --grad-brand: linear-gradient(120deg, #4D1717 0%, #174D38 45%, #371111 100%); --grad-text: linear-gradient(100deg, #123e2d 0%, #174D38 50%, #4D1717 100%); --shadow-glow: 0 0 0 1px rgba(23,77,56,0.25), 0 18px 50px -24px rgba(23,77,56,0.35); } html.theme-quite-clear ::selection { background: rgba(23,77,56,0.22); } html.theme-quite-clear * { scrollbar-color: #b3b8bf transparent; } html.theme-quite-clear *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-quite-clear *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Quiet luxury — #F7E6CA · #E8D59E · #D9BBB0 · #AD9C8E (light, generated from the Figma palette) */ html.theme-quiet-luxury { --cyan: #796f52; --cyan-bright: #615942; --blue: #96877b; --blue-deep: #6c6159; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(61,55,50,0.35); --bg: #fbf3e5; --bg-2: #f9ecd6; --panel: #ffffff; --panel-2: #fdf8f0; --line: rgba(61,55,50,0.28); --line-2: rgba(61,55,50,0.48); --ink: #3d3732; --muted: #796d63; --muted-2: #968d85; --grad-brand: linear-gradient(120deg, #E8D59E 0%, #796f52 45%, #6c6159 100%); --grad-text: linear-gradient(100deg, #615942 0%, #796f52 50%, #96877b 100%); --shadow-glow: 0 0 0 1px rgba(121,111,82,0.25), 0 18px 50px -24px rgba(121,111,82,0.35); } html.theme-quiet-luxury ::selection { background: rgba(121,111,82,0.22); } html.theme-quiet-luxury * { scrollbar-color: #b3b8bf transparent; } html.theme-quiet-luxury *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-quiet-luxury *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Night sands — #CBBD93 · #FAE8B4 · #80775C · #574A24 (light, generated from the Figma palette) */ html.theme-night-sands { --cyan: #574A24; --cyan-bright: #463b1d; --blue: #80775C; --blue-deep: #5c5642; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(30,26,13,0.35); --bg: #fdf4da; --bg-2: #fbedc5; --panel: #ffffff; --panel-2: #fef9ea; --line: rgba(30,26,13,0.28); --line-2: rgba(30,26,13,0.48); --ink: #1e1a0d; --muted: #3d3419; --muted-2: #68614c; --grad-brand: linear-gradient(120deg, #80775C 0%, #574A24 45%, #5c5642 100%); --grad-text: linear-gradient(100deg, #463b1d 0%, #574A24 50%, #80775C 100%); --shadow-glow: 0 0 0 1px rgba(87,74,36,0.25), 0 18px 50px -24px rgba(87,74,36,0.35); } html.theme-night-sands ::selection { background: rgba(87,74,36,0.22); } html.theme-night-sands * { scrollbar-color: #b3b8bf transparent; } html.theme-night-sands *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-night-sands *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Old photograph — #FDFBD4 · #D9D7B6 · #878672 · #545333 (light, generated from the Figma palette) */ html.theme-old-photograph { --cyan: #545333; --cyan-bright: #434229; --blue: #878672; --blue-deep: #616052; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(29,29,18,0.35); --bg: #fefdea; --bg-2: #fdfcdd; --panel: #ffffff; --panel-2: #fefef3; --line: rgba(29,29,18,0.28); --line-2: rgba(29,29,18,0.48); --ink: #1d1d12; --muted: #3b3a24; --muted-2: #666554; --grad-brand: linear-gradient(120deg, #878672 0%, #545333 45%, #616052 100%); --grad-text: linear-gradient(100deg, #434229 0%, #545333 50%, #878672 100%); --shadow-glow: 0 0 0 1px rgba(84,83,51,0.25), 0 18px 50px -24px rgba(84,83,51,0.35); } html.theme-old-photograph ::selection { background: rgba(84,83,51,0.22); } html.theme-old-photograph * { scrollbar-color: #b3b8bf transparent; } html.theme-old-photograph *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-old-photograph *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Cappuccino — #D6B588 · #C6C0B9 · #705E46 · #422701 (dark, generated from the Figma palette) */ html.theme-cappuccino { --cyan: #8d7b65; --cyan-bright: #ada090; --blue: #D6B588; --blue-deep: #967f5f; --bg: #120b01; --bg-2: #180e01; --panel: #241501; --panel-2: #312310; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #e5e3e0; --muted: #948c82; --muted-2: #6d6356; --grad-brand: linear-gradient(120deg, #afa393 0%, #8d7b65 45%, #967f5f 100%); --grad-text: linear-gradient(100deg, #ada090 0%, #8d7b65 50%, #D6B588 100%); --shadow-glow: 0 0 0 1px rgba(141,123,101,0.25), 0 18px 50px -24px rgba(141,123,101,0.35); } html.theme-cappuccino ::selection { background: rgba(141,123,101,0.3); } /* Breakfast tea — #FFD3AC · #CCBEB1 · #664C36 · #331C08 (light, generated from the Figma palette) */ html.theme-breakfast-tea { --cyan: #331C08; --cyan-bright: #291606; --blue: #664C36; --blue-deep: #493727; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(18,10,3,0.35); --bg: #ffe9d6; --bg-2: #ffddbe; --panel: #ffffff; --panel-2: #fff3e8; --line: rgba(18,10,3,0.28); --line-2: rgba(18,10,3,0.48); --ink: #120a03; --muted: #241406; --muted-2: #54483d; --grad-brand: linear-gradient(120deg, #664C36 0%, #331C08 45%, #493727 100%); --grad-text: linear-gradient(100deg, #291606 0%, #331C08 50%, #664C36 100%); --shadow-glow: 0 0 0 1px rgba(51,28,8,0.25), 0 18px 50px -24px rgba(51,28,8,0.35); } html.theme-breakfast-tea ::selection { background: rgba(51,28,8,0.22); } html.theme-breakfast-tea * { scrollbar-color: #b3b8bf transparent; } html.theme-breakfast-tea *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-breakfast-tea *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Cozy campfire — #895129 · #AD7A32 · #8A6E29 · #660F09 (dark, generated from the Figma palette) */ html.theme-cozy-campfire { --cyan: #a97a76; --cyan-bright: #c19f9c; --blue: #AD7A32; --blue-deep: #795523; --bg: #1c0403; --bg-2: #260503; --panel: #380805; --panel-2: #441714; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #dac3a3; --muted: #967461; --muted-2: #764f41; --grad-brand: linear-gradient(120deg, #c3a29f 0%, #a97a76 45%, #795523 100%); --grad-text: linear-gradient(100deg, #c19f9c 0%, #a97a76 50%, #AD7A32 100%); --shadow-glow: 0 0 0 1px rgba(169,122,118,0.25), 0 18px 50px -24px rgba(169,122,118,0.35); } html.theme-cozy-campfire ::selection { background: rgba(169,122,118,0.3); } /* Stone path — #A49A87 · #A5A58D · #968F83 · #E8E5DF (dark, generated from the Figma palette) */ html.theme-stone-path { --cyan: #E8E5DF; --cyan-bright: #eeece8; --blue: #A49A87; --blue-deep: #736c5f; --bg: #22201e; --bg-2: #2e2c28; --panel: #44403b; --panel-2: #4f4b47; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #f8f6f4; --muted: #acaaa6; --muted-2: #888581; --grad-brand: linear-gradient(120deg, #efede9 0%, #E8E5DF 45%, #736c5f 100%); --grad-text: linear-gradient(100deg, #eeece8 0%, #E8E5DF 50%, #A49A87 100%); --shadow-glow: 0 0 0 1px rgba(232,229,223,0.25), 0 18px 50px -24px rgba(232,229,223,0.35); } html.theme-stone-path ::selection { background: rgba(232,229,223,0.3); } /* Desert mirage — #C2B280 · #E35336 · #98A869 · #272757 (dark, generated from the Figma palette) */ html.theme-desert-mirage { --cyan: #E35336; --cyan-bright: #eb836e; --blue: #C2B280; --blue-deep: #887d5a; --bg: #0b0b18; --bg-2: #0e0e21; --panel: #151530; --panel-2: #23233c; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #e4dcc6; --muted: #8d8887; --muted-2: #646169; --grad-brand: linear-gradient(120deg, #eb8772 0%, #E35336 45%, #887d5a 100%); --grad-text: linear-gradient(100deg, #eb836e 0%, #E35336 50%, #C2B280 100%); --shadow-glow: 0 0 0 1px rgba(227,83,54,0.25), 0 18px 50px -24px rgba(227,83,54,0.35); } html.theme-desert-mirage ::selection { background: rgba(227,83,54,0.3); } /* Honeycomb — #FFC107 · #F9E076 · #FFFDD0 · #895129 (light, generated from the Figma palette) */ html.theme-honeycomb { --cyan: #8f6b07; --cyan-bright: #725606; --blue: #895129; --blue-deep: #633a1e; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(48,28,14,0.35); --bg: #fffee8; --bg-2: #fffdda; --panel: #ffffff; --panel-2: #fffef2; --line: rgba(48,28,14,0.28); --line-2: rgba(48,28,14,0.48); --ink: #301c0e; --muted: #60391d; --muted-2: #83654f; --grad-brand: linear-gradient(120deg, #FFC107 0%, #8f6b07 45%, #633a1e 100%); --grad-text: linear-gradient(100deg, #725606 0%, #8f6b07 50%, #895129 100%); --shadow-glow: 0 0 0 1px rgba(143,107,7,0.25), 0 18px 50px -24px rgba(143,107,7,0.35); } html.theme-honeycomb ::selection { background: rgba(143,107,7,0.22); } html.theme-honeycomb * { scrollbar-color: #b3b8bf transparent; } html.theme-honeycomb *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-honeycomb *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Urban loft — #9C9A9A · #A35E47 · #000000 · #464646 (dark, generated from the Figma palette) */ html.theme-urban-loft { --cyan: #A35E47; --cyan-bright: #bd8b7b; --blue: #9C9A9A; --blue-deep: #6d6c6c; --bg: #000000; --bg-2: #000000; --panel: #000000; --panel-2: #0f0f0f; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #d2d2d2; --muted: #7a7a7a; --muted-2: #505050; --grad-brand: linear-gradient(120deg, #bf8e7e 0%, #A35E47 45%, #6d6c6c 100%); --grad-text: linear-gradient(100deg, #bd8b7b 0%, #A35E47 50%, #9C9A9A 100%); --shadow-glow: 0 0 0 1px rgba(163,94,71,0.25), 0 18px 50px -24px rgba(163,94,71,0.35); } html.theme-urban-loft ::selection { background: rgba(163,94,71,0.3); } /* Charming seaside — #B3EBF2 · #85D1DB · #B6F2D1 · #C9FDF2 (light, generated from the Figma palette) */ html.theme-charming-seaside { --cyan: #507d84; --cyan-bright: #40646a; --blue: #6b8e90; --blue-deep: #4d6668; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(44,68,72,0.35); --bg: #e4fef9; --bg-2: #d5fdf5; --panel: #ffffff; --panel-2: #f0fefb; --line: rgba(44,68,72,0.28); --line-2: rgba(44,68,72,0.48); --ink: #2c4448; --muted: #4a757b; --muted-2: #729398; --grad-brand: linear-gradient(120deg, #85D1DB 0%, #507d84 45%, #4d6668 100%); --grad-text: linear-gradient(100deg, #40646a 0%, #507d84 50%, #6b8e90 100%); --shadow-glow: 0 0 0 1px rgba(80,125,132,0.25), 0 18px 50px -24px rgba(80,125,132,0.35); } html.theme-charming-seaside ::selection { background: rgba(80,125,132,0.22); } html.theme-charming-seaside * { scrollbar-color: #b3b8bf transparent; } html.theme-charming-seaside *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-charming-seaside *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Beachfront views — #EDE8D0 · #6E632E · #DBD1ED · #ABBEED (light, generated from the Figma palette) */ html.theme-beachfront-views { --cyan: #6E632E; --cyan-bright: #584f25; --blue: #808eb2; --blue-deep: #5c6680; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(39,35,16,0.35); --bg: #f6f4e8; --bg-2: #f1edda; --panel: #ffffff; --panel-2: #faf9f2; --line: rgba(39,35,16,0.28); --line-2: rgba(39,35,16,0.48); --ink: #272310; --muted: #4d4520; --muted-2: #746e51; --grad-brand: linear-gradient(120deg, #ABBEED 0%, #6E632E 45%, #5c6680 100%); --grad-text: linear-gradient(100deg, #584f25 0%, #6E632E 50%, #808eb2 100%); --shadow-glow: 0 0 0 1px rgba(110,99,46,0.25), 0 18px 50px -24px rgba(110,99,46,0.35); } html.theme-beachfront-views ::selection { background: rgba(110,99,46,0.22); } html.theme-beachfront-views * { scrollbar-color: #b3b8bf transparent; } html.theme-beachfront-views *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-beachfront-views *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Under the moonlight — #CCCCFF · #A3A3CC · #5C5C99 · #292966 (dark, generated from the Figma palette) */ html.theme-under-the-moonlight { --cyan: #7c7ca2; --cyan-bright: #a1a1bc; --blue: #CCCCFF; --blue-deep: #8f8fb3; --bg: #0c0c1c; --bg-2: #101026; --panel: #171738; --panel-2: #252544; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #e8e8ff; --muted: #9090ab; --muted-2: #666684; --grad-brand: linear-gradient(120deg, #a3a3be 0%, #7c7ca2 45%, #8f8fb3 100%); --grad-text: linear-gradient(100deg, #a1a1bc 0%, #7c7ca2 50%, #CCCCFF 100%); --shadow-glow: 0 0 0 1px rgba(124,124,162,0.25), 0 18px 50px -24px rgba(124,124,162,0.35); } html.theme-under-the-moonlight ::selection { background: rgba(124,124,162,0.3); } /* Minty fresh — #98FBCB · #BFFFED · #7FCFA8 · #558B71 (light, generated from the Figma palette) */ html.theme-minty-fresh { --cyan: #497862; --cyan-bright: #3a604e; --blue: #5f9a7e; --blue-deep: #446f5b; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(30,49,40,0.35); --bg: #dffff6; --bg-2: #cdfff1; --panel: #ffffff; --panel-2: #edfffa; --line: rgba(30,49,40,0.28); --line-2: rgba(30,49,40,0.48); --ink: #1e3128; --muted: #3c614f; --muted-2: #678476; --grad-brand: linear-gradient(120deg, #558B71 0%, #497862 45%, #446f5b 100%); --grad-text: linear-gradient(100deg, #3a604e 0%, #497862 50%, #5f9a7e 100%); --shadow-glow: 0 0 0 1px rgba(73,120,98,0.25), 0 18px 50px -24px rgba(73,120,98,0.35); } html.theme-minty-fresh ::selection { background: rgba(73,120,98,0.22); } html.theme-minty-fresh * { scrollbar-color: #b3b8bf transparent; } html.theme-minty-fresh *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-minty-fresh *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Siltstone — #CBBD93 · #FFF5B8 · #FFB16E · #CCA25A (light, generated from the Figma palette) */ html.theme-siltstone { --cyan: #8e713f; --cyan-bright: #725a32; --blue: #b27b4c; --blue-deep: #805937; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(71,57,32,0.35); --bg: #fffadc; --bg-2: #fff7c8; --panel: #ffffff; --panel-2: #fffceb; --line: rgba(71,57,32,0.28); --line-2: rgba(71,57,32,0.48); --ink: #473920; --muted: #85693b; --muted-2: #a08a66; --grad-brand: linear-gradient(120deg, #CCA25A 0%, #8e713f 45%, #805937 100%); --grad-text: linear-gradient(100deg, #725a32 0%, #8e713f 50%, #b27b4c 100%); --shadow-glow: 0 0 0 1px rgba(142,113,63,0.25), 0 18px 50px -24px rgba(142,113,63,0.35); } html.theme-siltstone ::selection { background: rgba(142,113,63,0.22); } html.theme-siltstone * { scrollbar-color: #b3b8bf transparent; } html.theme-siltstone *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-siltstone *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Emerald odyssey — #00674F · #73E6CB · #3EBB9E · #0A3C30 (dark, generated from the Figma palette) */ html.theme-emerald-odyssey { --cyan: #489281; --cyan-bright: #7bb1a4; --blue: #3EBB9E; --blue-deep: #2b836f; --bg: #03110d; --bg-2: #041612; --panel: #06211a; --panel-2: #152e28; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #c0f4e8; --muted: #729b91; --muted-2: #4d7168; --grad-brand: linear-gradient(120deg, #7fb3a7 0%, #489281 45%, #2b836f 100%); --grad-text: linear-gradient(100deg, #7bb1a4 0%, #489281 50%, #3EBB9E 100%); --shadow-glow: 0 0 0 1px rgba(72,146,129,0.25), 0 18px 50px -24px rgba(72,146,129,0.35); } html.theme-emerald-odyssey ::selection { background: rgba(72,146,129,0.3); } /* Mountain mist — #6D8196 · #B0C4DE · #01796F · #5A5A5A (dark, generated from the Figma palette) */ html.theme-mountain-mist { --cyan: #58a7a1; --cyan-bright: #87c0bb; --blue: #B0C4DE; --blue-deep: #7b899b; --bg: #191919; --bg-2: #222222; --panel: #323232; --panel-2: #3e3e3e; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #dbe4f0; --muted: #9499a0; --muted-2: #72767a; --grad-brand: linear-gradient(120deg, #8ac1bd 0%, #58a7a1 45%, #7b899b 100%); --grad-text: linear-gradient(100deg, #87c0bb 0%, #58a7a1 50%, #B0C4DE 100%); --shadow-glow: 0 0 0 1px rgba(88,167,161,0.25), 0 18px 50px -24px rgba(88,167,161,0.35); } html.theme-mountain-mist ::selection { background: rgba(88,167,161,0.3); } /* Morning dew — #AFEEEE · #ADEBB3 · #C4C4C4 · #D3D3D3 (light, generated from the Figma palette) */ html.theme-morning-dew { --cyan: #5b7b5d; --cyan-bright: #49624a; --blue: #888888; --blue-deep: #626262; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(64,64,64,0.35); --bg: #d7f7f7; --bg-2: #c1f2f2; --panel: #ffffff; --panel-2: #e9fafa; --line: rgba(64,64,64,0.28); --line-2: rgba(64,64,64,0.48); --ink: #404040; --muted: #6e6e6e; --muted-2: #8e8e8e; --grad-brand: linear-gradient(120deg, #ADEBB3 0%, #5b7b5d 45%, #626262 100%); --grad-text: linear-gradient(100deg, #49624a 0%, #5b7b5d 50%, #888888 100%); --shadow-glow: 0 0 0 1px rgba(91,123,93,0.25), 0 18px 50px -24px rgba(91,123,93,0.35); } html.theme-morning-dew ::selection { background: rgba(91,123,93,0.22); } html.theme-morning-dew * { scrollbar-color: #b3b8bf transparent; } html.theme-morning-dew *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-morning-dew *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Olive grove — #808000 · #228B22 · #636B2F · #F2F0EF (dark, generated from the Figma palette) */ html.theme-olive-grove { --cyan: #a4a448; --cyan-bright: #bdbd7b; --blue: #228B22; --blue-deep: #186118; --bg: #1b1e0d; --bg-2: #252812; --panel: #363b1a; --panel-2: #424728; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #f9f8f8; --muted: #a7a99b; --muted-2: #80836e; --grad-brand: linear-gradient(120deg, #bfbf7f 0%, #a4a448 45%, #186118 100%); --grad-text: linear-gradient(100deg, #bdbd7b 0%, #a4a448 50%, #228B22 100%); --shadow-glow: 0 0 0 1px rgba(164,164,72,0.25), 0 18px 50px -24px rgba(164,164,72,0.35); } html.theme-olive-grove ::selection { background: rgba(164,164,72,0.3); } /* Coastal morning — #93C572 · #89CFF0 · #F5F5DC · #82C8E5 (light, generated from the Figma palette) */ html.theme-coastal-morning { --cyan: #5f7f4a; --cyan-bright: #4c663b; --blue: #6296ab; --blue-deep: #476c7b; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(51,69,40,0.35); --bg: #fafaee; --bg-2: #f7f7e4; --panel: #ffffff; --panel-2: #fcfcf5; --line: rgba(51,69,40,0.28); --line-2: rgba(51,69,40,0.48); --ink: #334528; --muted: #597745; --muted-2: #7e956e; --grad-brand: linear-gradient(120deg, #93C572 0%, #5f7f4a 45%, #476c7b 100%); --grad-text: linear-gradient(100deg, #4c663b 0%, #5f7f4a 50%, #6296ab 100%); --shadow-glow: 0 0 0 1px rgba(95,127,74,0.25), 0 18px 50px -24px rgba(95,127,74,0.35); } html.theme-coastal-morning ::selection { background: rgba(95,127,74,0.22); } html.theme-coastal-morning * { scrollbar-color: #b3b8bf transparent; } html.theme-coastal-morning *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-coastal-morning *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Eucalyptus grove — #B2AC88 · #898989 · #F2F0EF · #4B6E48 (dark, generated from the Figma palette) */ html.theme-eucalyptus-grove { --cyan: #F2F0EF; --cyan-bright: #f6f4f3; --blue: #B2AC88; --blue-deep: #7d785f; --bg: #151f14; --bg-2: #1c291b; --panel: #293d28; --panel-2: #364935; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #f9f8f8; --muted: #a2a9a1; --muted-2: #788477; --grad-brand: linear-gradient(120deg, #f6f5f4 0%, #F2F0EF 45%, #7d785f 100%); --grad-text: linear-gradient(100deg, #f6f4f3 0%, #F2F0EF 50%, #B2AC88 100%); --shadow-glow: 0 0 0 1px rgba(242,240,239,0.25), 0 18px 50px -24px rgba(242,240,239,0.35); } html.theme-eucalyptus-grove ::selection { background: rgba(242,240,239,0.3); } /* Soft spring — #6395EE · #90B8D6 · #88CFA8 · #85DECB (light, generated from the Figma palette) */ html.theme-soft-spring { --cyan: #4a70b3; --cyan-bright: #3b5a8f; --blue: #6c8aa0; --blue-deep: #4e6373; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(35,52,83,0.35); --bg: #c2efe5; --bg-2: #a0e5d6; --panel: #ffffff; --panel-2: #ddf6f0; --line: rgba(35,52,83,0.28); --line-2: rgba(35,52,83,0.48); --ink: #233453; --muted: #4568a7; --muted-2: #6e89ba; --grad-brand: linear-gradient(120deg, #6395EE 0%, #4a70b3 45%, #4e6373 100%); --grad-text: linear-gradient(100deg, #3b5a8f 0%, #4a70b3 50%, #6c8aa0 100%); --shadow-glow: 0 0 0 1px rgba(74,112,179,0.25), 0 18px 50px -24px rgba(74,112,179,0.35); } html.theme-soft-spring ::selection { background: rgba(74,112,179,0.22); } html.theme-soft-spring * { scrollbar-color: #b3b8bf transparent; } html.theme-soft-spring *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-soft-spring *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Autumn leaves — #FFB343 · #DB9A39 · #B37E2E · #614419 (dark, generated from the Figma palette) */ html.theme-autumn-leaves { --cyan: #FFB343; --cyan-bright: #ffc878; --blue: #DB9A39; --blue-deep: #996c28; --bg: #1b1307; --bg-2: #24190a; --panel: #35250e; --panel-2: #41321c; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #ffddaa; --muted: #aa9068; --muted-2: #826b49; --grad-brand: linear-gradient(120deg, #ffca7b 0%, #FFB343 45%, #996c28 100%); --grad-text: linear-gradient(100deg, #ffc878 0%, #FFB343 50%, #DB9A39 100%); --shadow-glow: 0 0 0 1px rgba(255,179,67,0.25), 0 18px 50px -24px rgba(255,179,67,0.35); } html.theme-autumn-leaves ::selection { background: rgba(255,179,67,0.3); } /* Winter chill — #B8E3E9 · #93B1B5 · #4F7C82 · #0B2E33 (dark, generated from the Figma palette) */ html.theme-winter-chill { --cyan: #6b8084; --cyan-bright: #94a4a6; --blue: #B8E3E9; --blue-deep: #819fa3; --bg: #030d0e; --bg-2: #041113; --panel: #06191c; --panel-2: #15272a; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #dff2f5; --muted: #84979a; --muted-2: #586b6e; --grad-brand: linear-gradient(120deg, #97a6a9 0%, #6b8084 45%, #819fa3 100%); --grad-text: linear-gradient(100deg, #94a4a6 0%, #6b8084 50%, #B8E3E9 100%); --shadow-glow: 0 0 0 1px rgba(107,128,132,0.25), 0 18px 50px -24px rgba(107,128,132,0.35); } html.theme-winter-chill ::selection { background: rgba(107,128,132,0.3); } /* Spring energy — #89F336 · #FFFC30 · #4FE0CB · #00BF33 (light, generated from the Figma palette) */ html.theme-spring-energy { --cyan: #008523; --cyan-bright: #006a1c; --blue: #589c23; --blue-deep: #3f7019; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(0,67,18,0.35); --bg: #fffe98; --bg-2: #fffd5e; --panel: #ffffff; --panel-2: #fffec5; --line: rgba(0,67,18,0.28); --line-2: rgba(0,67,18,0.48); --ink: #004312; --muted: #008624; --muted-2: #38a154; --grad-brand: linear-gradient(120deg, #00BF33 0%, #008523 45%, #3f7019 100%); --grad-text: linear-gradient(100deg, #006a1c 0%, #008523 50%, #589c23 100%); --shadow-glow: 0 0 0 1px rgba(0,133,35,0.25), 0 18px 50px -24px rgba(0,133,35,0.35); } html.theme-spring-energy ::selection { background: rgba(0,133,35,0.22); } html.theme-spring-energy * { scrollbar-color: #b3b8bf transparent; } html.theme-spring-energy *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-spring-energy *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Pumpkin spice season — #BE5103 · #8C4C1F · #544823 · #332216 (dark, generated from the Figma palette) */ html.theme-pumpkin-spice-season { --cyan: #c35f17; --cyan-bright: #d48c58; --blue: #8C4C1F; --blue-deep: #623516; --bg: #0e0a06; --bg-2: #130d08; --panel: #1c130c; --panel-2: #2a211b; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #e2b18e; --muted: #8f6f57; --muted-2: #674f3d; --grad-brand: linear-gradient(120deg, #d58f5d 0%, #c35f17 45%, #623516 100%); --grad-text: linear-gradient(100deg, #d48c58 0%, #c35f17 50%, #8C4C1F 100%); --shadow-glow: 0 0 0 1px rgba(195,95,23,0.25), 0 18px 50px -24px rgba(195,95,23,0.35); } html.theme-pumpkin-spice-season ::selection { background: rgba(195,95,23,0.3); } /* Island oasis — #CCFF00 · #FFF37E · #9DE05A · #FFAE25 (light, generated from the Figma palette) */ html.theme-island-oasis { --cyan: #9a6916; --cyan-bright: #7b5412; --blue: #7b9a00; --blue-deep: #596f00; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(89,61,13,0.35); --bg: #fff9bf; --bg-2: #fff69a; --panel: #ffffff; --panel-2: #fffcdb; --line: rgba(89,61,13,0.28); --line-2: rgba(89,61,13,0.48); --ink: #593d0d; --muted: #9a6916; --muted-2: #b08a49; --grad-brand: linear-gradient(120deg, #FFAE25 0%, #9a6916 45%, #596f00 100%); --grad-text: linear-gradient(100deg, #7b5412 0%, #9a6916 50%, #7b9a00 100%); --shadow-glow: 0 0 0 1px rgba(154,105,22,0.25), 0 18px 50px -24px rgba(154,105,22,0.35); } html.theme-island-oasis ::selection { background: rgba(154,105,22,0.22); } html.theme-island-oasis * { scrollbar-color: #b3b8bf transparent; } html.theme-island-oasis *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-island-oasis *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Autumn orchard — #8E4585 · #DAA520 · #2E6F40 · #660033 (dark, generated from the Figma palette) */ html.theme-autumn-orchard { --cyan: #DAA520; --cyan-bright: #e4be5e; --blue: #660033; --blue-deep: #470024; --bg: #1c000e; --bg-2: #260013; --panel: #38001c; --panel-2: #440f2a; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #eed79b; --muted: #a27d66; --muted-2: #7d524c; --grad-brand: linear-gradient(120deg, #e5c063 0%, #DAA520 45%, #470024 100%); --grad-text: linear-gradient(100deg, #e4be5e 0%, #DAA520 50%, #660033 100%); --shadow-glow: 0 0 0 1px rgba(218,165,32,0.25), 0 18px 50px -24px rgba(218,165,32,0.35); } html.theme-autumn-orchard ::selection { background: rgba(218,165,32,0.3); } /* Tropical rainforest — #50C878 · #7E8C54 · #4F7942 · #71AA34 (dark, generated from the Figma palette) */ html.theme-tropical-rainforest { --cyan: #7cb144; --cyan-bright: #a1c778; --blue: #50C878; --blue-deep: #388c54; --bg: #162212; --bg-2: #1d2e18; --panel: #2b4324; --panel-2: #384e31; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #e0f5e6; --muted: #94aa95; --muted-2: #70876e; --grad-brand: linear-gradient(120deg, #a3c87c 0%, #7cb144 45%, #388c54 100%); --grad-text: linear-gradient(100deg, #a1c778 0%, #7cb144 50%, #50C878 100%); --shadow-glow: 0 0 0 1px rgba(124,177,68,0.25), 0 18px 50px -24px rgba(124,177,68,0.35); } html.theme-tropical-rainforest ::selection { background: rgba(124,177,68,0.3); } /* Wildflower meadow — #FBF9E7 · #FDB813 · #82C8E5 · #7CFC00 (light, generated from the Figma palette) */ html.theme-wildflower-meadow { --cyan: #996f0c; --cyan-bright: #7a590a; --blue: #4a9900; --blue-deep: #356e00; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(43,65,74,0.35); --bg: #fdfcf3; --bg-2: #fcfaec; --panel: #ffffff; --panel-2: #fefdf8; --line: rgba(43,65,74,0.28); --line-2: rgba(43,65,74,0.48); --ink: #2b414a; --muted: #4f798b; --muted-2: #7696a5; --grad-brand: linear-gradient(120deg, #FDB813 0%, #996f0c 45%, #356e00 100%); --grad-text: linear-gradient(100deg, #7a590a 0%, #996f0c 50%, #4a9900 100%); --shadow-glow: 0 0 0 1px rgba(153,111,12,0.25), 0 18px 50px -24px rgba(153,111,12,0.35); } html.theme-wildflower-meadow ::selection { background: rgba(153,111,12,0.22); } html.theme-wildflower-meadow * { scrollbar-color: #b3b8bf transparent; } html.theme-wildflower-meadow *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-wildflower-meadow *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Harvest moon — #800020 · #FFCE1B · #A52A2A · #BE5103 (dark, generated from the Figma palette) */ html.theme-harvest-moon { --cyan: #FFCE1B; --cyan-bright: #ffdc5b; --blue: #BE5103; --blue-deep: #853902; --bg: #230009; --bg-2: #30000c; --panel: #460012; --panel-2: #510f20; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2); --ink: #ffe998; --muted: #b18760; --muted-2: #8c5945; --grad-brand: linear-gradient(120deg, #ffdd5f 0%, #FFCE1B 45%, #853902 100%); --grad-text: linear-gradient(100deg, #ffdc5b 0%, #FFCE1B 50%, #BE5103 100%); --shadow-glow: 0 0 0 1px rgba(255,206,27,0.25), 0 18px 50px -24px rgba(255,206,27,0.35); } html.theme-harvest-moon ::selection { background: rgba(255,206,27,0.3); } /* Winter berry — #8E0A1E · #2E6F40 · #ADD8E6 · #FFFFFF (light, generated from the Figma palette) */ html.theme-winter-berry { --cyan: #8E0A1E; --cyan-bright: #720818; --blue: #2E6F40; --blue-deep: #21502e; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(50,4,11,0.35); --bg: #ffffff; --bg-2: #ffffff; --panel: #ffffff; --panel-2: #ffffff; --line: rgba(50,4,11,0.28); --line-2: rgba(50,4,11,0.48); --ink: #32040b; --muted: #630715; --muted-2: #853e48; --grad-brand: linear-gradient(120deg, #2E6F40 0%, #8E0A1E 45%, #21502e 100%); --grad-text: linear-gradient(100deg, #720818 0%, #8E0A1E 50%, #2E6F40 100%); --shadow-glow: 0 0 0 1px rgba(142,10,30,0.25), 0 18px 50px -24px rgba(142,10,30,0.35); } html.theme-winter-berry ::selection { background: rgba(142,10,30,0.22); } html.theme-winter-berry * { scrollbar-color: #b3b8bf transparent; } html.theme-winter-berry *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-winter-berry *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Summer breeze — #FFEB3B · #F88379 · #82C8E5 · #E6D8C4 (light, generated from the Figma palette) */ html.theme-summer-breeze { --cyan: #ad5b55; --cyan-bright: #8a4944; --blue: #6296ab; --blue-deep: #476c7b; --red: #c62828; --red-soft: #d84315; --ring: 0 0 0 1px var(--line); --shadow: 0 12px 30px -18px rgba(87,46,42,0.35); --bg: #fff59d; --bg-2: #ffef66; --panel: #ffffff; --panel-2: #fff9c8; --line: rgba(87,46,42,0.28); --line-2: rgba(87,46,42,0.48); --ink: #572e2a; --muted: #ae5c55; --muted-2: #c0807a; --grad-brand: linear-gradient(120deg, #F88379 0%, #ad5b55 45%, #476c7b 100%); --grad-text: linear-gradient(100deg, #8a4944 0%, #ad5b55 50%, #6296ab 100%); --shadow-glow: 0 0 0 1px rgba(173,91,85,0.25), 0 18px 50px -24px rgba(173,91,85,0.35); } html.theme-summer-breeze ::selection { background: rgba(173,91,85,0.22); } html.theme-summer-breeze * { scrollbar-color: #b3b8bf transparent; } html.theme-summer-breeze *::-webkit-scrollbar-thumb { background: #b3b8bf; } html.theme-summer-breeze *::-webkit-scrollbar-thumb:hover { background: #8f97a1; } /* Incoming-call popup: the CAMPAIGN is the first thing an agent must read (feedback #217) */ .ic-camp { font-size: 1.45rem; font-weight: 800; letter-spacing: .3px; color: var(--cyan-bright); margin: 2px 0 6px; text-transform: uppercase; } .ic-camp.unknown { color: var(--muted); font-weight: 600; text-transform: none; font-size: 1.05rem; } /* Feedback #234 + follow-up 2026-08-25: display:none REMOVED the week-number cells and slid the day numbers out from under their weekday headers. visibility:hidden blanks the numbers while keeping the cells' space, so the grid stays aligned. */ .dxbl-calendar-week-number, th.dxbl-calendar-week-number, td.dxbl-calendar-week-number { visibility: hidden !important; } /* ── Brutus Tach — the call-floor RPM gauge (user mock 2026-08-27) ─────────────── */ .tach-scope{ position:relative; color:#e9edf3; font-family:'Barlow','Segoe UI',system-ui,sans-serif; overflow:hidden; } .tach-page{ position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; background: radial-gradient(120% 90% at 50% 8%, #131a24 0%, #0b0e12 55%, #07090c 100%); } .tach-page .tach-hd{ display:flex; align-items:center; gap:1.2vmin; padding:1.6vmin 2.4vmin 0; flex:0 0 auto; } .tach-page .tach-hd .mark{ font-family:'Chakra Petch','Arial Narrow',sans-serif; font-weight:700; font-size:2.6vmin; letter-spacing:.14em; text-transform:uppercase; } .tach-page .tach-hd .mark b{ color:#ffb01f; } .tach-page .tach-hd .sub{ font-size:1.7vmin; color:#5c6675; letter-spacing:.28em; text-transform:uppercase; padding-top:.4vmin; } .tach-page .tach-hd .spacer{ flex:1; } .tach-page .tach-hd .clock{ font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:2.4vmin; color:#949eae; font-variant-numeric:tabular-nums; } .tach-page .tach-hd a{ color:#5c6675; text-decoration:none; font-size:1.8vmin; } .tach-scope .tach-main{ flex:1; display:flex; align-items:center; justify-content:center; gap:2.4vmin; padding:0 2.4vmin; min-height:0; } .tach-scope .tach-names{ display:flex; flex-direction:column; gap:.9vmin; flex:0 0 auto; max-width:24vw; overflow:hidden; } .tach-scope .tach-name{ font-family:'Chakra Petch','Arial Narrow',sans-serif; font-weight:600; font-size:2.2vmin; color:#ffb01f; letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:rgba(18,22,29,.7); border:1px solid #212a37; border-radius:.6vmin; padding:.7vmin 1.3vmin; } .tach-scope.redline .tach-name{ color:#ff5a50; border-color:rgba(255,59,48,.4); } .tach-scope .tach-dialwrap{ position:relative; height:100%; display:flex; align-items:center; min-width:0; } .tach-page svg.tach-dial{ height:min(84vh,58vw); width:auto; display:block; filter:drop-shadow(0 0 3vmin rgba(0,0,0,.55)); } .tach-embed svg.tach-dial{ height:100%; width:auto; display:block; } .tach-scope.redline svg.tach-dial{ filter:drop-shadow(0 0 3.2vmin rgba(255,59,48,.45)); } .tach-scope .tach-side{ display:flex; flex-direction:column; gap:1.6vmin; width:28vw; max-width:32rem; flex:0 0 auto; } .tach-scope .tach-tile{ background:linear-gradient(180deg, rgba(30,38,50,.55), rgba(15,19,26,.85)); border:1px solid #212a37; border-radius:1vmin; padding:1.7vmin 2.2vmin 1.9vmin; } .tach-scope .tach-tile .lbl{ font-size:1.7vmin; letter-spacing:.3em; text-transform:uppercase; color:#5c6675; font-weight:600; margin-bottom:.7vmin; } .tach-scope .tach-tile .val{ font-family:'Chakra Petch',sans-serif; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; } .tach-scope .tach-tile .note{ font-size:1.7vmin; color:#949eae; margin-top:.8vmin; } .tach-scope .tach-tile.oncall .val{ font-size:9vmin; color:#ffb01f; text-shadow:0 0 2.4vmin rgba(255,176,31,.35); } .tach-scope .tach-tile.oncall .val small{ font-size:3.2vmin; color:#5c6675; font-weight:600; } .tach-scope.redline .tach-tile.oncall .val{ color:#ff3b30; text-shadow:0 0 2.6vmin rgba(255,59,48,.5); } .tach-scope .row2{ display:grid; grid-template-columns:1fr 1fr; gap:1.6vmin; } .tach-scope .tach-tile .val.mid{ font-size:4.6vmin; color:#e9edf3; } .tach-scope .tach-tile .val.mid small.pct{ font-size:2.2vmin; color:#5c6675; } .tach-scope .meter{ height:1.1vmin; border-radius:.6vmin; background:#1b222d; margin-top:1.2vmin; overflow:hidden; } .tach-scope .meter i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,#ff8a00,#ffb01f); border-radius:.6vmin; transition:width .6s cubic-bezier(.2,.7,.3,1); } .tach-scope.redline .meter i{ background:linear-gradient(90deg,#c81e14,#ff3b30); } .tach-scope .tach-ft{ flex:0 0 auto; display:flex; align-items:center; padding:0 2.4vmin 1.8vmin; gap:2vmin; } .tach-scope .tach-status{ font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:4.2vmin; letter-spacing:.22em; text-transform:uppercase; color:#949eae; } .tach-scope .tach-status.s-run{ color:#ffb01f; text-shadow:0 0 2vmin rgba(255,176,31,.3); } .tach-scope .tach-status.s-red{ color:#ff3b30; text-shadow:0 0 2.4vmin rgba(255,59,48,.55); } .tach-scope .tach-ft .spacer{ flex:1; } .tach-scope .tach-ft .quip{ font-size:2vmin; color:#5c6675; text-align:right; } .tach-scope .tach-flash{ position:absolute; inset:0; pointer-events:none; opacity:0; box-shadow:inset 0 0 18vmin rgba(255,59,48,.55); } .tach-scope.redline .tach-flash{ animation:tachflash 1.1s ease-in-out infinite; } @keyframes tachflash{ 0%,100%{opacity:.25} 50%{opacity:.9} } .tach-scope.redline .tach-status.s-red{ animation:tachblink 1.1s steps(2,jump-none) infinite; } @keyframes tachblink{ 0%,100%{opacity:1} 50%{opacity:.55} } @media (prefers-reduced-motion: reduce){ .tach-scope.redline .tach-flash, .tach-scope.redline .tach-status.s-red{ animation:none; } .tach-scope.redline .tach-flash{ opacity:.5; } } /* embedded (wallboard corner): container decides the height, names shrink */ .tach-embed{ display:flex; } .tach-embed .tach-main{ padding:0; gap:1vmin; align-items:center; } .tach-embed .tach-names{ max-width:12rem; } .tach-embed .tach-name{ font-size:.85rem; padding:.25rem .6rem; border-radius:.4rem; }