:root{
  --gold:#A760E1;
  --gold-rgb:167,96,225;
  --bronze:#4C15B2;
  --bronze-rgb:76,21,178;
  --bg:#09080D;
  --bg-rgb:9,8,13;
  --bg2:#0D1016;
  --panel:#11151D;
  --panel-rgb:17,21,29;
  --panel2:#161B25;
  --line:#242C39;
  --text:#F7F8FB;
  --muted:#98A2B3;
  --green:#61D095;
  --red:#FF7878;
  --gold-soft:color-mix(in srgb,var(--gold) 62%,white);
  --gold-pale:color-mix(in srgb,var(--gold) 34%,white);
  --gold-deep:color-mix(in srgb,var(--bronze) 82%,black);
  --muted2:color-mix(in srgb,var(--muted) 68%,var(--bg));
  --teal:#66D9C8;
  --on-accent:#17120A;
  --shadow:0 30px 100px rgba(0,0,0,.38);
}
html[data-theme="light"]{
  color-scheme:light;
  --gold:#A760E1;
  --gold-rgb:167,96,225;
  --bronze:#4C15B2;
  --bronze-rgb:76,21,178;
  --bg:#F7F8FB;
  --bg-rgb:247,248,251;
  --bg2:#EEF1F5;
  --panel:#FFFFFF;
  --panel-rgb:255,255,255;
  --panel2:#F2F4F7;
  --line:#D5DAE3;
  --text:#151922;
  --muted:#596579;
  --green:#18794E;
  --red:#B42318;
  --gold-soft:color-mix(in srgb,var(--gold) 72%,white);
  --gold-pale:color-mix(in srgb,var(--gold) 18%,white);
  --gold-deep:color-mix(in srgb,var(--bronze) 88%,black);
  --muted2:color-mix(in srgb,var(--muted) 76%,var(--bg));
  --teal:#087E75;
  --on-accent:#FFFFFF;
  --shadow:0 24px 70px rgba(21,25,34,.12);
}
.site-header{background:color-mix(in srgb,var(--bg) 82%,transparent)}
.btn-primary{background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 76%,white),var(--gold) 54%,var(--bronze));border-color:color-mix(in srgb,var(--gold) 55%,transparent);box-shadow:0 12px 28px color-mix(in srgb,var(--bronze) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-primary:hover{box-shadow:0 16px 35px color-mix(in srgb,var(--bronze) 30%,transparent)}
.brand-mark span,.wave span,.sim-mini-wave span{background:linear-gradient(var(--gold-soft),var(--bronze))}
body,.app-main{background-color:var(--bg);color:var(--text)}
.app-sidebar{background:color-mix(in srgb,var(--bg2) 94%,black)}
.panel,.metric-card,.quick-card,.price-card,.checkout-plan-card,.checkout-payment-card{border-color:var(--line)}
.form-control,.select-control{border-color:var(--line);color:var(--text)}
html[data-theme="light"] .app-sidebar{background:color-mix(in srgb,var(--bg2) 88%,white)}
.palette-swatch-light-primary{background:#A760E1}
.palette-swatch-light-secondary{background:#4C15B2}
.palette-swatch-light-background{background:#F7F8FB}
.palette-swatch-light-surface{background:#FFFFFF}
.palette-swatch-light-text{background:#151922}

/* Brand accents are shared in light and dark mode. Only neutral surfaces and
   text palettes change when users toggle appearance. This file loads after app.css. */
:root {
  --on-accent: #FFFFFF;
  --accent-label: color-mix(in srgb, var(--gold) 72%, var(--text));
  --accent-subtle: color-mix(in srgb, var(--gold) 42%, var(--muted));
  --accent-gradient: linear-gradient(145deg, color-mix(in srgb, var(--gold) 78%, white) 0%, var(--gold) 52%, var(--bronze) 100%);
}
html[data-theme="light"] {
  --on-accent: #FFFFFF;
  --accent-label: #9155C4;
  --accent-subtle: color-mix(in srgb, var(--accent-label) 45%, var(--muted));
  --accent-gradient: linear-gradient(145deg, color-mix(in srgb, var(--gold) 85%, white) 0%, var(--gold) 52%, var(--bronze) 100%);
}

/* Header, remaining minutes and its icon. */
.minutes-badge-icon,
html[data-theme="light"] .minutes-badge-icon {
  background:var(--accent-gradient);
  color:var(--on-accent);
}
.minutes-badge-copy strong,
html[data-theme="light"] .minutes-badge-copy strong {color:var(--accent-label)}
.minutes-badge-copy small,
html[data-theme="light"] .minutes-badge-copy small {color:var(--muted)}

/* Landing-page simulation: use the selected accent rather than gold-only artwork. */
.sim-voice-player {
  background:radial-gradient(circle at 0% 50%,rgba(var(--gold-rgb),.18),transparent 15rem),
    linear-gradient(135deg,color-mix(in srgb,var(--gold) 8%,var(--panel)),var(--panel) 62%,var(--bg2));
}
.sim-voice-icon {background:var(--accent-gradient);color:var(--on-accent)}
.sim-voice-copy strong {color:var(--accent-label)}
.sim-audio-wave>span,
.sim-voice-player .sim-audio-wave.sound-wave>span,
.sim-voice-player .sim-audio-wave.sound-wave>span:nth-child(odd) {
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 57%,white),var(--gold) 52%,var(--bronze));
}
.sim-wave-shimmer {
  background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.48),transparent);
}
.sim-voice-player .sim-audio-wave.sound-wave:after {
  background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.22),transparent);
}

/* Top-level calls to action and compact mobile navigation. */
.btn-primary,.sidebar-upgrade-cta,.price-badge {color:var(--on-accent)}
.sidebar-upgrade-cta {
  background:var(--accent-gradient);
  border-color:color-mix(in srgb,var(--gold) 40%,var(--line));
}
.mobile-app-nav a.mobile-nav-hero,
.mobile-app-nav a.mobile-nav-hero.active {
  background:var(--accent-gradient);
  border-color:color-mix(in srgb,var(--gold) 56%,transparent);
  color:var(--on-accent);
}
.mobile-app-nav a.mobile-nav-hero span,
.mobile-app-nav a.mobile-nav-hero small {color:var(--on-accent)}

/* Dashboard, admin and subscription components with legacy gold literals. */
.admin-data-panel .panel-head a,
.admin-table-panel .panel-head a {color:var(--accent-label)}
.admin-plan-toggle input {accent-color:var(--gold)}
.admin-avatar {
  background:linear-gradient(135deg,var(--gold),var(--bronze)) !important;
  color:var(--on-accent) !important;
}
.admin-table code {color:var(--accent-label)}
.super-admin-tabs a.active {color:var(--accent-label)}
.account-hero-balance strong {color:var(--accent-label)}
.account-tabs a.active {color:var(--accent-label)}
.invoice-status.open,.invoice-status.draft {color:var(--accent-label)}
.checkout-kicker {color:var(--accent-label)}
.checkout-upgrade-gain span {color:var(--muted)}
.verification-expired {color:var(--accent-label)}
.utterance.translation p,.saved-utterance.translation p,.broadcast-line {color:var(--accent-label)}

/* Remove fixed warm/beige backgrounds that remain visible with a purple palette. */
.sidebar-upgrade-card {
  background:radial-gradient(circle at 100% 0%,rgba(var(--gold-rgb),.18),transparent 12rem),
    linear-gradient(145deg,color-mix(in srgb,var(--gold) 4%,var(--panel)),var(--panel));
}
html[data-theme="light"] .sidebar-upgrade-card {
  background:radial-gradient(circle at 100% 0%,rgba(var(--gold-rgb),.14),transparent 12rem),
    linear-gradient(145deg,var(--panel),var(--panel2));
}
html[data-theme="light"] .sidebar-upgrade-cta {
  background:var(--accent-gradient);
  color:var(--on-accent);
}


/* Light mode: preserve the global brand hues in actions and visible labels.
   A contrast-adjusted shade is used only where accent appears as text. */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .price-badge,
html[data-theme="light"] .sidebar-upgrade-cta {
  background: var(--accent-gradient);
  color: var(--on-accent);
}
html[data-theme="light"] .sidebar-upgrade-kicker,
html[data-theme="light"] .sidebar-upgrade-title,
html[data-theme="light"] .sidebar-upgrade-card p b,
html[data-theme="light"] .sidebar-upgrade-price strong,
html[data-theme="light"] .checkout-price strong,
html[data-theme="light"] .checkout-upgrade-gain strong,
html[data-theme="light"] .notification-browser-enable,
html[data-theme="light"] .notification-mark-all,
html[data-theme="light"] .language-option.active,
html[data-theme="light"] .mobile-app-nav a.active,
html[data-theme="light"] .settings-card-icon {
  color:var(--accent-label);
}
html[data-theme="light"] .download-windows-action {color:var(--on-accent)}


/* Brand foreground consistency, 2026-09-29.
   Accent-filled controls use white foreground in both appearances. Neutral
   buttons, input fields and ordinary accent-colored text are not affected. */
:root,
html[data-theme="light"] {
  --on-accent: #FFFFFF;
}

/* Existing MeetOS logo is a pale badge in app.css; make it a branded gradient. */
.brand-mark,
html[data-theme="light"] .brand-mark {
  background: var(--accent-gradient);
  border-color: color-mix(in srgb, var(--gold) 52%, transparent);
  color: var(--on-accent) !important;
}
.brand-mark > span,
html[data-theme="light"] .brand-mark > span {
  background: #FFFFFF !important;
}

/* Buttons and compact accent-filled icon containers. */
.btn.btn-primary,
html[data-theme="light"] .btn.btn-primary,
.sidebar-upgrade-cta,
html[data-theme="light"] .sidebar-upgrade-cta,
.minutes-badge-icon,
html[data-theme="light"] .minutes-badge-icon,
.sidebar-upgrade-kicker > .ui-icon,
.sim-voice-icon,
.price-badge,
.admin-avatar,
.mobile-app-nav a.mobile-nav-hero,
.mobile-app-nav a.mobile-nav-hero.active,
html[data-theme="light"] .mobile-app-nav a.mobile-nav-hero,
html[data-theme="light"] .mobile-app-nav a.mobile-nav-hero.active,
html[data-theme="light"] .download-windows-action,
.has-accent-gradient {
  color: var(--on-accent) !important;
}
.sidebar-upgrade-kicker > .ui-icon {
  background: var(--accent-gradient);
}

/* Child labels and icon glyphs must not inherit light-mode dark text. */
.btn.btn-primary > *,
.btn.btn-primary .ui-icon,
.sidebar-upgrade-cta > *,
.sidebar-upgrade-cta .ui-icon,
.minutes-badge-icon .ui-icon,
.sidebar-upgrade-kicker > .ui-icon,
.sim-voice-icon > *,
.mobile-app-nav a.mobile-nav-hero > *,
.mobile-app-nav a.mobile-nav-hero .ui-icon,
.price-badge > *,
.admin-avatar > *,
.has-accent-gradient > *,
.has-accent-gradient .ui-icon {
  color: var(--on-accent) !important;
}

/* Preserve icon geometry: never globally force SVG fill to currentColor. */
.btn.btn-primary svg,
.sidebar-upgrade-cta svg,
.minutes-badge-icon svg,
.sim-voice-icon svg,
.mobile-app-nav a.mobile-nav-hero svg,
.has-accent-gradient svg {
  color: var(--on-accent) !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus-visible,
.sidebar-upgrade-cta:hover,
.sidebar-upgrade-cta:focus-visible,
.mobile-app-nav a.mobile-nav-hero:hover,
.mobile-app-nav a.mobile-nav-hero:focus-visible {
  color: var(--on-accent) !important;
}


/* Dashboard-managed brand assets. */
.brand-logo-image{
  width:37px;height:37px;flex:0 0 37px;display:block;object-fit:contain;
  object-position:center;border-radius:10px;
}
.brand-assets-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:4px 0 20px}
.brand-asset-preview{padding:14px;border:1px solid var(--line);border-radius:15px;background:color-mix(in srgb,var(--panel2) 75%,transparent)}
.brand-asset-preview>span{display:block;font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.brand-asset-preview-box{height:92px;border-radius:13px;border:1px dashed color-mix(in srgb,var(--gold) 30%,var(--line));background:color-mix(in srgb,var(--bg) 74%,transparent);display:grid;place-items:center;padding:13px;overflow:hidden}
.brand-asset-preview-box img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.brand-asset-logo-box img{width:auto;height:60px}
.brand-asset-favicon-box img{width:48px;height:48px}
.brand-asset-preview small{display:block;margin-top:8px;color:var(--muted);font-size:10px}
.brand-file-input{padding:9px 11px;height:auto;min-height:49px}
.brand-file-input::file-selector-button{border:1px solid var(--line);border-radius:9px;padding:7px 10px;margin-right:10px;background:var(--panel2);color:var(--text);font-weight:750;cursor:pointer}
.brand-reset-check{display:flex!important;align-items:center;gap:8px;margin-top:9px!important;color:var(--muted)!important;font-weight:650!important}
.brand-reset-check input{accent-color:var(--gold)}
.brand-security-note{display:flex;gap:8px;align-items:flex-start;margin:2px 0 14px;padding:10px 12px;border-radius:11px;background:color-mix(in srgb,var(--gold) 7%,var(--panel));border:1px solid color-mix(in srgb,var(--gold) 17%,var(--line));color:var(--muted);font-size:10px;line-height:1.5}
.brand-security-note .ui-icon{color:var(--gold);margin-top:2px}
@media(max-width:760px){.brand-logo-image{width:34px;height:34px;flex-basis:34px}.brand-assets-preview-grid{grid-template-columns:1fr}}

/* Homepage light-mode contrast refinement, 2026-09-30.
   Keeps the saved brand palette while giving the hero platform capsules and
   Zoom-style simulation proper light surfaces and readable contrast. */
html[data-theme="light"] .platform-pill {
  background:linear-gradient(180deg,#FFFFFF 0%,color-mix(in srgb,var(--gold) 4%,#FFFFFF) 100%);
  border-color:color-mix(in srgb,var(--gold) 28%,var(--line));
  color:var(--text);
  box-shadow:0 7px 20px rgba(30,35,50,.055),inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .platform-pill svg {
  color:var(--gold);
}
html[data-theme="light"] .platform-pill:hover {
  background:color-mix(in srgb,var(--gold) 7%,#FFFFFF);
  border-color:color-mix(in srgb,var(--gold) 43%,var(--line));
  color:var(--text);
  box-shadow:0 10px 26px rgba(30,35,50,.08),0 0 0 3px color-mix(in srgb,var(--gold) 6%,transparent);
}

/* Light outer shell for the homepage Zoom/live-translation simulation. */
html[data-theme="light"] .hero-simulation {
  background:
    radial-gradient(circle at 16% 0%,rgba(var(--gold-rgb),.10),transparent 27rem),
    linear-gradient(145deg,#FFFFFF 0%,color-mix(in srgb,var(--gold) 3%,var(--panel2)) 100%);
  border-color:color-mix(in srgb,var(--gold) 20%,var(--line));
  box-shadow:0 30px 80px rgba(31,36,50,.11),0 0 90px rgba(var(--gold-rgb),.06);
}
html[data-theme="light"] .hero-simulation .window-bar {
  border-bottom-color:var(--line);
}
html[data-theme="light"] .hero-simulation .dot {
  background:color-mix(in srgb,var(--muted) 58%,#FFFFFF);
}
html[data-theme="light"] .hero-simulation .window-title {
  color:var(--muted);
}
html[data-theme="light"] .simulation-shell {
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 2%,#F8FAFD),#F4F6FA);
  border-color:var(--line);
}
html[data-theme="light"] .sim-stage-overlay-a {
  background:rgba(var(--gold-rgb),.095);
}
html[data-theme="light"] .sim-stage-overlay-b {
  background:rgba(102,217,200,.075);
}
html[data-theme="light"] .sim-call-panel,
html[data-theme="light"] .sim-translation-panel {
  background:linear-gradient(145deg,#FFFFFF,color-mix(in srgb,var(--gold) 2.5%,var(--panel2)));
  border-color:var(--line);
  box-shadow:0 16px 34px rgba(30,35,50,.055),inset 0 1px 0 rgba(255,255,255,.9);
  color:var(--text);
}
html[data-theme="light"] .sim-panel-head strong,
html[data-theme="light"] .sim-video-meta strong,
html[data-theme="light"] .sim-source-card p,
html[data-theme="light"] .sim-mini-stat strong,
html[data-theme="light"] .sim-language-title {
  color:var(--text);
}
html[data-theme="light"] .mock-kicker,
html[data-theme="light"] .sim-video-meta span,
html[data-theme="light"] .sim-card-label,
html[data-theme="light"] .sim-mini-stat span,
html[data-theme="light"] .sim-voice-copy span {
  color:var(--muted);
}
html[data-theme="light"] .sim-panel-badge {
  background:color-mix(in srgb,var(--gold) 7%,#FFFFFF);
  border-color:color-mix(in srgb,var(--gold) 22%,var(--line));
  color:var(--accent-label);
}
html[data-theme="light"] .sim-video-card {
  background:#FFFFFF;
  border-color:var(--line);
  box-shadow:0 8px 20px rgba(31,36,50,.035);
}
html[data-theme="light"] .sim-video-card.speaker,
html[data-theme="light"] .sim-video-card.is-speaking {
  border-color:color-mix(in srgb,var(--gold) 42%,var(--line));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 7%,transparent),0 12px 28px rgba(var(--gold-rgb),.10);
}

/* The webcam placeholders remain distinct but are no longer black in light mode. */
html[data-theme="light"] .sim-video-visual {
  background:linear-gradient(145deg,#EEF1F7,#E5EAF2);
}
html[data-theme="light"] .sim-video-visual:before {
  background-image:linear-gradient(rgba(62,70,88,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(62,70,88,.045) 1px,transparent 1px);
}
html[data-theme="light"] .visual-one {
  background:radial-gradient(circle at 50% 35%,rgba(var(--gold-rgb),.18),transparent 30%),linear-gradient(145deg,#F5F0FF,#E9EDF5);
}
html[data-theme="light"] .visual-two {
  background:radial-gradient(circle at 68% 32%,rgba(37,176,157,.13),transparent 26%),linear-gradient(145deg,#F3F7FA,#E6EDF2);
}
html[data-theme="light"] .visual-three {
  background:radial-gradient(circle at 42% 40%,rgba(var(--gold-rgb),.12),transparent 24%),linear-gradient(145deg,#F3F1FA,#E7EAF3);
}
html[data-theme="light"] .visual-four {
  background:radial-gradient(circle at 58% 36%,rgba(var(--gold-rgb),.12),transparent 25%),linear-gradient(145deg,#F7F3FA,#E9ECF3);
}
html[data-theme="light"] .sim-grid-lines {
  border-color:rgba(64,73,92,.10);
}
html[data-theme="light"] .sim-grid-lines:before,
html[data-theme="light"] .sim-grid-lines:after {
  background:rgba(64,73,92,.08);
}

html[data-theme="light"] .sim-control {
  background:#FFFFFF;
  border-color:var(--line);
  color:var(--muted);
}
html[data-theme="light"] .sim-control.active {
  color:var(--text);
  background:color-mix(in srgb,var(--text) 3%,#FFFFFF);
}
html[data-theme="light"] .sim-control.accent {
  background:color-mix(in srgb,var(--gold) 9%,#FFFFFF);
  border-color:color-mix(in srgb,var(--gold) 28%,var(--line));
  color:var(--accent-label);
}
html[data-theme="light"] .sim-language-chip {
  background:#FFFFFF;
  border-color:var(--line);
  color:var(--muted);
}
html[data-theme="light"] .sim-language-chip:hover {
  background:color-mix(in srgb,var(--gold) 5%,#FFFFFF);
  border-color:color-mix(in srgb,var(--gold) 26%,var(--line));
  color:var(--text);
}
html[data-theme="light"] .sim-language-chip.active {
  background:color-mix(in srgb,var(--gold) 10%,#FFFFFF);
  border-color:color-mix(in srgb,var(--gold) 32%,var(--line));
  color:var(--accent-label);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
html[data-theme="light"] .sim-source-card,
html[data-theme="light"] .sim-target-card {
  background:#FFFFFF;
  border-color:var(--line);
}
html[data-theme="light"] .sim-target-card {
  background:linear-gradient(145deg,color-mix(in srgb,var(--gold) 7%,#FFFFFF),color-mix(in srgb,var(--gold) 2%,#FFFFFF));
  border-color:color-mix(in srgb,var(--gold) 24%,var(--line));
}
html[data-theme="light"] .sim-target-text {
  color:var(--accent-label);
}
html[data-theme="light"] .sim-mini-stat {
  background:#FFFFFF;
  border-color:var(--line);
  box-shadow:0 6px 16px rgba(31,36,50,.03);
}

/* Voice player follows the same light surface language while preserving purple accents. */
html[data-theme="light"] .sim-voice-player {
  background:
    radial-gradient(circle at 0% 50%,rgba(var(--gold-rgb),.11),transparent 15rem),
    linear-gradient(135deg,#FFFFFF,color-mix(in srgb,var(--gold) 4%,var(--panel2)) 62%,#FFFFFF);
  border-color:color-mix(in srgb,var(--gold) 24%,var(--line));
  box-shadow:0 14px 30px rgba(31,36,50,.065),inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .sim-voice-copy strong {
  color:var(--accent-label);
}
html[data-theme="light"] .sim-audio-wave,
html[data-theme="light"] .sim-voice-player .sim-audio-wave.sound-wave {
  background:linear-gradient(180deg,#FFFFFF,color-mix(in srgb,var(--gold) 3%,var(--panel2)));
  border-color:var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
html[data-theme="light"] .sim-audio-wave:before,
html[data-theme="light"] .sim-voice-player .sim-audio-wave.sound-wave:before {
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--muted) 24%,transparent),transparent);
}
html[data-theme="light"] .sim-voice-live {
  border-color:rgba(29,143,91,.20);
  background:linear-gradient(145deg,rgba(40,171,108,.10),rgba(40,171,108,.045));
  color:#14724A;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}