:root[data-theme="light"] {
  --bg: #f6f8fc;
  --bg2: #ffffff;
  --bg3: #eef2f7;
  --bg4: #e9edf4;
  --accent: #1864ff;
  --accent-glow: rgba(24, 100, 255, .25);
  --white: #111827;
  --dim: #4b5563;
  --dimmer: #6b7280;
  --border: rgba(17, 24, 39, .12);
}

:root[data-theme="light"] body {
  color-scheme: light;
}

:root[data-theme="light"] .nav-avatar-btn,
:root[data-theme="light"] .studio-avatar-btn,
:root[data-theme="light"] .avatar,
:root[data-theme="light"] .profile-avatar,
:root[data-theme="light"] .nav-profile-head-avatar {
  border-color: rgba(24, 100, 255, .35) !important;
}

:root[data-theme="light"] .nav-profile-menu,
:root[data-theme="light"] .nav-lang-menu,
:root[data-theme="light"] .studio-user-menu,
:root[data-theme="light"] .cookie-consent-panel {
  background: #ffffff;
  border-color: rgba(17, 24, 39, .14);
  box-shadow: 0 12px 30px rgba(17, 24, 39, .12);
}

:root[data-theme="light"] .nav-lang-trigger {
  border-color: rgba(17, 24, 39, .2);
  color: #374151;
}

:root[data-theme="light"] .cookie-btn {
  color: #111827;
  border-color: rgba(17, 24, 39, .2);
}

:root[data-theme="light"] .cookie-btn.primary {
  color: #fff;
}

/* Google Translate cleanup */
.skiptranslate,
.goog-te-banner-frame,
.goog-te-balloon-frame,
.goog-tooltip,
#goog-gt-tt {
  display: none !important;
}

iframe.goog-te-banner-frame,
iframe[id^=":"][id$=".container"],
.goog-te-gadget,
.goog-te-gadget-simple,
.goog-te-gadget-icon,
.goog-logo-link,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-l4eHX-hSRGPd,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-ORHb {
  display: none !important;
  visibility: hidden !important;
}

body {
  top: 0 !important;
}

#google_translate_element {
  position: fixed;
  left: -9999px;
  bottom: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Header polish */
#navbar {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

#navbar.scrolled {
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}

/* Clean nav links — plain text with an accent underline that slides in on
   hover and stays under the active page. No pills, no glow. */
#navbar .nav-links a {
  position: relative;
  padding: 6px 2px;
  background: none;
  border: none;
  color: var(--dim);
  letter-spacing: .08em;
  transition: color .2s ease;
}

#navbar .nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}

#navbar .nav-links a:hover {
  color: var(--white);
}

#navbar .nav-links a:hover::after,
#navbar .nav-links a.active::after {
  transform: scaleX(1);
}

#navbar .nav-links a.active {
  color: var(--white);
}

/* Clean glass Login button */
#navbar .btn-ghost {
  padding: 9px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--white);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

#navbar .btn-ghost:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .3);
  transform: translateY(-1px);
}

/* Light theme keeps the header buttons readable (dark ink instead of white) */
:root[data-theme="light"] #navbar .nav-links a:hover,
:root[data-theme="light"] #navbar .nav-links a.active {
  color: #111827;
}

:root[data-theme="light"] #navbar .btn-ghost {
  border-color: rgba(17, 24, 39, .16);
  background: rgba(17, 24, 39, .04);
  color: #111827;
}

:root[data-theme="light"] #navbar .btn-ghost:hover {
  background: rgba(17, 24, 39, .08);
  border-color: rgba(17, 24, 39, .3);
}

/* ───────────────────────────────────────────────────────────────────────────
   Light-mode fixes. The base stylesheets hardcode dark colors (#fff text,
   rgba(255,255,255,.x) surfaces/borders, near-black panel backgrounds) that the
   theme variables can't reach. These overrides re-point them at the light
   palette so menus, the credit bar, the profile header and settings render with
   correct contrast in light mode. (Home is forced to dark, so this only applies
   on the app/account pages.)
   ─────────────────────────────────────────────────────────────────────────── */

/* 1 + 4 — avatar dropdown (header AND perfil page share .nav-profile-menu) */
:root[data-theme="light"] .nav-profile-name,
:root[data-theme="light"] .nav-menu-plan-item,
:root[data-theme="light"] .nav-drop-item,
:root[data-theme="light"] .nav-drop-item:hover {
  color: var(--white);
}
:root[data-theme="light"] .nav-drop-item:hover {
  background: var(--bg3);
}
:root[data-theme="light"] .nav-profile-head,
:root[data-theme="light"] .nav-menu-usage,
:root[data-theme="light"] .nav-drop-sep,
:root[data-theme="light"] .nav-profile-plan-wrap,
:root[data-theme="light"] .nav-lang-group {
  border-color: var(--border);
}
:root[data-theme="light"] .nav-menu-usage-label,
:root[data-theme="light"] .nav-lang-title,
:root[data-theme="light"] .nav-lang-btn {
  color: var(--dim);
}
:root[data-theme="light"] .nav-lang-btn {
  border-color: var(--border);
}
:root[data-theme="light"] .nav-lang-option {
  color: var(--dim);
  border-color: var(--border);
}

/* 2 — credit progress bar: white-on-white track was invisible */
:root[data-theme="light"] .nav-menu-usage-track,
:root[data-theme="light"] .progress-track,
:root[data-theme="light"] .usage-bar-track {
  background: var(--bg3);
}

/* 3 — perfil page header bar stayed near-black */
:root[data-theme="light"] nav {
  background: rgba(246, 248, 252, .92);
  border-bottom-color: var(--border);
}

/* Main navbar turned near-black once scrolled (#navbar.scrolled has a dark bg in
   every page's stylesheet). Light surface on scroll, on all pages at once. */
:root[data-theme="light"] #navbar.scrolled {
  background: rgba(246, 248, 252, .92);
  border-color: var(--border);
}

/* 5 — settings / subscription dropdown + buttons */
:root[data-theme="light"] .subscription-menu {
  background: var(--bg2);
  border-color: var(--border);
  box-shadow: 0 12px 30px rgba(17, 24, 39, .12);
}
:root[data-theme="light"] .settings-avatar-btn {
  background: var(--bg3);
}

/* perfil tables / rows / hover borders that used white-on-white separators */
:root[data-theme="light"] .hist-table td,
:root[data-theme="light"] .notif-row {
  border-color: var(--border);
}
:root[data-theme="light"] .hist-table tr:hover {
  background: var(--bg3);
}
:root[data-theme="light"] .stat-card:hover,
:root[data-theme="light"] .btn-plan-default:hover,
:root[data-theme="light"] .btn-ghost-sm:hover {
  border-color: var(--border);
}

/* studio notifications panel stayed near-black on a light studio */
:root[data-theme="light"] .studio-notifications-panel {
  background: var(--bg2);
  border-color: var(--border);
}

/* ───────────────────────────────────────────────────────────────────────────
   Liquid glass header. Translucent, blurred surface with a saturation boost and
   a top edge highlight so the navbar reads as frosted glass over the content
   behind it (hero video / page). Applied site-wide; loaded last so it wins over
   each page's opaque #navbar background. Degrades to a translucent bar where
   backdrop-filter is unsupported.
   ─────────────────────────────────────────────────────────────────────────── */
#navbar {
  background: linear-gradient(180deg, rgba(22, 22, 30, .55), rgba(12, 12, 17, .40)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 30px rgba(0, 0, 0, .28) !important;
}

#navbar.scrolled {
  background: linear-gradient(180deg, rgba(18, 18, 25, .64), rgba(10, 10, 14, .50)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom-color: rgba(255, 255, 255, .11) !important;
}

:root[data-theme="light"] #navbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(246, 248, 252, .45)) !important;
  border-bottom-color: rgba(17, 24, 39, .08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 30px rgba(17, 24, 39, .08) !important;
}

:root[data-theme="light"] #navbar.scrolled {
  background: linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(246, 248, 252, .58)) !important;
  border-bottom-color: var(--border) !important;
}

/* Stable language handoff. The early bootstrap keeps translated pages behind
   a neutral branded loading state until the selected language is ready. */
html.parallax-language-loading {
  background: #08080d;
}

html.parallax-language-loading body {
  opacity: 0 !important;
  pointer-events: none !important;
}

html.parallax-language-loading::after {
  content: "VIZSTACK";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  color: #f5f7fb;
  background: #08080d;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

body { transition: opacity .14s ease; }