/* ==========================================================
   TruBible design system: base, accessibility and shared components
   (nav, buttons, forms, cards, modals, toasts, tables…).
   Tokens live in tokens.css; older page blocks in style-pages.css.
   ========================================================== */

/* ---- Reset ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-body);
  background: var(--ambient, none) no-repeat, var(--bg-page);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.6;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--text);
  text-wrap: balance;
}
h3, h4, h5, h6 { font-weight: 650; line-height: 1.25; letter-spacing: -0.015em; }
/* Korean breaks lines between words, never inside one (long strings may still wrap). */
:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }
:lang(ko) :is(h1, h2), :lang(zh) :is(h1, h2) { letter-spacing: -0.02em; }
/* The one emphasised phrase of a hero, and Scripture: an italic serif in the same ink (tokens.css --font-accent) */
.tb-accent { font-family: var(--font-accent); font-style: italic; font-weight: 500; letter-spacing: -0.02em; }
:lang(ko) .tb-accent, :lang(zh) .tb-accent { font-style: normal; font-weight: 700; }
p { text-wrap: pretty; }

a { color: var(--primary); text-decoration: none; transition: color var(--dur) ease, opacity var(--dur) ease; }
a:hover { color: var(--primary-dark); text-decoration: none; }
/* A link inside running text: the accent, underlined (colour alone must never be the only sign). */
:is(p, li, td, dd, small, label, figcaption, .form-hint, .card-subtitle, .page-subtitle) > a:not(.btn):not([class]) { color: var(--brand); text-decoration: underline; text-decoration-color: var(--brand-line); text-underline-offset: 3px; }
:is(p, li, td, dd, small, label, figcaption, .form-hint, .card-subtitle, .page-subtitle) > a:not(.btn):not([class]):hover { text-decoration-color: currentColor; }

img, svg, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }

::selection { background: rgba(var(--primary-rgb), 0.18); color: var(--text); }

/* Keyboard focus: one consistent ring everywhere, never on mouse click. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}
.btn:focus-visible, .form-control:focus-visible, .tab:focus-visible { outline: none; box-shadow: var(--ring); }

/* Visually hidden but readable by screen readers */
/* The hidden attribute always wins over component display rules. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: var(--z-toast);
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--text); color: var(--bg); font-weight: 600;
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: 12px; color: var(--bg); }

/* Thin, quiet scrollbars on desktop */
@media (hover: hover) and (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
  *::-webkit-scrollbar-thumb:hover { background-color: var(--text-faint); }
}

/* ---- Page transitions (cross-document View Transitions, progressive) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut 160ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: vtIn 280ms var(--ease-out) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(6px); } }
.navbar { view-transition-name: site-nav; }
/* Theme switch (theme.js): the new theme opens in a circle from the button that was pressed. */
html.tb-theme-switching .navbar { view-transition-name: none; }
html.tb-theme-switching::view-transition-old(root) { animation: none; z-index: 1; }
html.tb-theme-switching::view-transition-new(root) { animation: tbThemeOpen 640ms var(--ease-out) both; z-index: 2; }
@keyframes tbThemeOpen {
  from { clip-path: circle(0 at var(--tb-vt-x, 100%) var(--tb-vt-y, 0)); }
  to   { clip-path: circle(var(--tb-vt-r, 150vmax) at var(--tb-vt-x, 100%) var(--tb-vt-y, 0)); }
}

/* ---- Animations ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(133, 133, 133,0.2); }
  50%      { box-shadow: 0 0 30px rgba(133, 133, 133,0.4); }
}
@keyframes freePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 16px rgba(16,185,129,0.30); }
  50%      { transform: scale(1.08); box-shadow: 0 8px 28px rgba(16,185,129,0.55); }
}
@keyframes freeShine {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes waveBar {
  0%, 100% { height: 8px; }
  50%      { height: 28px; }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes borderGlow {
  0%, 100% { border-color: var(--primary); }
  50%      { border-color: var(--accent); }
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes ripple {
  0%   { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Scroll reveal. Content is only hidden when JS is running (html.js), so
   no-JS visitors, crawlers and print always see everything. */
html.js .animate-on-scroll,
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
html.js [data-reveal="fade"] { transform: none; }
html.js [data-reveal="left"] { transform: translateX(-28px); }
html.js [data-reveal="right"] { transform: translateX(28px); }
html.js [data-reveal="scale"] { transform: scale(0.94); }
html.js .animate-on-scroll.visible,
html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
.animate-delay-1 { --reveal-delay: 0.08s; }
.animate-delay-2 { --reveal-delay: 0.16s; }
.animate-delay-3 { --reveal-delay: 0.24s; }
.animate-delay-4 { --reveal-delay: 0.32s; }
.animate-delay-5 { --reveal-delay: 0.40s; }
.animate-delay-6 { --reveal-delay: 0.48s; }

/* Respect users who ask for less motion: keep fades, drop movement and loops. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html.js .animate-on-scroll,
  html.js [data-reveal] { opacity: 1; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---- Layout ---- */
.container { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; }
.container-sm { max-width: 800px; margin: 0 auto; padding: 0 24px; }
.container-lg { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.page { padding: 40px 24px 64px; max-width: 1040px; margin: 0 auto; }
.page-wide { max-width: 1240px; }
.section { padding: 104px 24px; }
.section-sm { padding: 64px 24px; }
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, 16px); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, 8px); }

/* Page header: the page's title on the left, its actions on the right. Plain: no card, no colour. */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.page-header h1 { font-size: var(--fs-3xl); }
.page-header .page-subtitle { color: var(--text-muted); margin-top: 4px; font-size: var(--fs-base); }
.page-header .page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--primary);
}
.breadcrumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--text-light); margin-bottom: 10px;
}
.breadcrumb a { color: var(--text-light); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb svg { width: 14px; height: 14px; opacity: 0.6; }

/* ---- Announcement strip (free setup offer). Quiet: one line of small text and a small pill. ---- */
.support-bar {
  position: relative;
  z-index: calc(var(--z-nav) + 1);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  text-align: center;
  padding: 7px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.support-bar strong { font-weight: 600; color: var(--text); }
.support-bar a {
  color: var(--on-solid);
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 11px;
  border-radius: var(--radius-full);
  background: var(--solid);
  transition: opacity var(--dur) ease;
}
.support-bar a:hover { color: var(--on-solid); opacity: 0.85; }
.support-bar .support-bar-emoji { display: none; }
.support-bar-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur) ease;
}
.support-bar-close:hover { background: var(--bg-hover); color: var(--text); }
.support-bar-close svg { width: 16px; height: 16px; }
@media (max-width: 600px) {
  .support-bar { font-size: 0.78rem; padding: 7px 40px 7px 12px; gap: 6px; justify-content: flex-start; text-align: left; }
}

/* ---- Navbar: a plain bar. Clear at the top of the page, frosted with a hairline once you scroll. ---- */
.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  padding: 0 max(24px, calc((100vw - 1320px) / 2 + 24px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Always a visible bar (surface + hairline), so the navigation reads as navigation at first sight. */
  background: var(--glass-strong);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--border);
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.navbar.scrolled { border-bottom-color: var(--border-strong); box-shadow: 0 6px 24px -18px rgba(0, 0, 0, 0.35); }
.navbar .logo {
  font-family: var(--font-brand);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
}
.navbar .logo:hover { color: var(--text); }
/* The mark exists in two drawings: one for light, one lifted for dark */
.logo .logo-mark { height: 32px; width: 32px; object-fit: contain; transition: transform var(--dur-slow) var(--ease-spring); }
.logo .logo-mark.is-night, [data-theme="dark"] .logo .logo-mark.is-dawn { display: none; }
[data-theme="dark"] .logo .logo-mark.is-night { display: block; }
.navbar .logo:hover .logo-mark { transform: rotate(-8deg) scale(1.06); }
.navbar .nav-links {
  display: flex;
  gap: 2px;
  align-items: center;
  margin-left: auto;
}
.navbar .nav-links > a:not(.btn),
.navbar .nav-link {
  position: relative;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 550;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-full);
  transition: color var(--dur) ease, background var(--dur) ease;
}
.navbar .nav-links > a:not(.btn):hover,
.navbar .nav-link:hover { color: var(--text); background: var(--bg-hover); }
/* Where you are: the accent, on a tint. */
.navbar .nav-links > a:not(.btn).active,
.navbar .nav-link.active { color: var(--brand); background: var(--brand-soft); font-weight: 650; }
.navbar .nav-links > a svg { width: 16px; height: 16px; }
.navbar .nav-cta { margin-left: 6px; }
/* Signed in, the bar carries four products, the language and the account. On tablets and small
   laptops it keeps the labels and drops the rest (link icons, the name beside the avatar); below
   980px the labels no longer fit on one line in every language, so the menu button takes over. */
@media (max-width: 1240px) {
  .navbar.nav-user .nav-links > a:not(.btn) { padding: 8px 10px; }
  .navbar.nav-user .nav-links > a:not(.btn) svg { display: none; }
  .navbar.nav-user .user-menu-name, .navbar.nav-user .user-menu-btn > svg { display: none; }
}
@media (max-width: 980px) {
  .navbar.nav-user .nav-links { display: none; }
  .navbar.nav-user .theme-btn { margin-left: auto; }
  .navbar.nav-user .nav-hamburger { display: inline-flex; }
}

/* Theme switch (Light / Dark): the sun sets and the moon rises in the same round button */
.theme-btn {
  position: relative; flex-shrink: 0;
  width: 36px; height: 36px; margin-left: 4px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: transparent; color: var(--text-secondary);
  cursor: pointer; overflow: hidden;
  transition: border-color var(--dur) ease, background var(--dur) ease, transform var(--dur-fast) var(--ease-out);
}
.theme-btn:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.theme-btn:active { transform: scale(0.94); }
.theme-btn svg { grid-area: 1 / 1; width: 17px; height: 17px; transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur) ease; }
.theme-btn .theme-moon { opacity: 0; transform: translateY(120%) rotate(-60deg); }
[data-theme="dark"] .theme-btn .theme-sun { opacity: 0; transform: translateY(-120%) rotate(60deg); }
[data-theme="dark"] .theme-btn .theme-moon { opacity: 1; transform: none; }
/* A pinned page (one that owns its theme) never shows the switch */
html[data-theme-lock] .theme-btn { display: none; }

/* User menu (avatar button + dropdown) */
.user-menu { position: relative; margin-left: 4px; }
.user-menu-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-card);
  cursor: pointer;
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary);
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
  max-width: 220px;
}
.user-menu-btn:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.user-menu-btn .user-menu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-btn svg { width: 14px; height: 14px; color: var(--text-light); transition: transform var(--dur) var(--ease-out); }
.user-menu.open .user-menu-btn svg { transform: rotate(180deg); }
.avatar-initials {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-brand); color: #fff;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* Generic dropdown menu (user menu, kebab menus, lang menu) */
.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
.menu.open,
.user-menu.open > .menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.menu-header { padding: 10px 12px 8px; border-bottom: 1px solid var(--border-light); margin-bottom: 6px; }
.menu-header .menu-title { font-weight: 600; font-size: var(--fs-sm); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-header .menu-subtitle { font-size: var(--fs-xs); color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0; background: none;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.menu-item:hover { background: var(--bg-hover); color: var(--text); }
.menu-item svg { width: 16px; height: 16px; color: var(--text-light); flex-shrink: 0; }
.menu-item.danger, .menu-item.danger svg { color: var(--danger); }
.menu-item.danger:hover { background: var(--danger-bg); }
.menu-sep { height: 1px; background: var(--border-light); margin: 6px 4px; }

/* Hamburger */
.nav-hamburger {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur) ease;
}
.nav-hamburger:hover { background: var(--bg-hover); }
.nav-hamburger svg { display: block; width: 22px; height: 22px; }

/* Mobile drawer */
.nav-drawer-backdrop {
  position: fixed; inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-drawer);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px);
  background: var(--bg-card);
  z-index: calc(var(--z-drawer) + 1);
  box-shadow: var(--shadow-xl);
  transform: translateX(104%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
  display: flex;
  flex-direction: column;
  padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.drawer-open { overflow: hidden; }
body.drawer-open .nav-drawer { transform: none; visibility: visible; transition: transform var(--dur-slow) var(--ease-out); }
body.drawer-open .nav-drawer-backdrop { opacity: 1; visibility: visible; transition: opacity var(--dur-slow) var(--ease-out); }
.nav-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.nav-drawer-head .logo { font-family: var(--font-brand); font-weight: 600; font-size: 1.25rem; display: flex; align-items: center; gap: 8px; color: var(--text); }
.nav-drawer-head .logo .logo-mark { width: 34px; height: 34px; }
.nav-drawer-close {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text); cursor: pointer;
}
.nav-drawer-close svg { width: 20px; height: 20px; }
.nav-drawer-user { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius); background: var(--bg-subtle); border: 1px solid var(--border-light); margin-bottom: 12px; }
.nav-drawer-user .avatar-initials { width: 42px; height: 42px; font-size: 0.95rem; }
.nav-drawer-user .u-name { font-weight: 600; color: var(--text); line-height: 1.3; }
.nav-drawer-user .u-email { font-size: var(--fs-xs); color: var(--text-light); word-break: break-all; }
.nav-drawer-links { display: flex; flex-direction: column; gap: 2px; }
.nav-drawer-links a, .nav-drawer-links button {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-base); font-weight: 500;
  color: var(--text-secondary);
  background: none; border: 0; width: 100%; text-align: left; cursor: pointer;
  opacity: 0; transform: translateX(16px);
  transition: background var(--dur-fast) ease, opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
body.drawer-open .nav-drawer-links a, body.drawer-open .nav-drawer-links button { opacity: 1; transform: none; }
body.drawer-open .nav-drawer-links > :nth-child(2) { transition-delay: 30ms; }
body.drawer-open .nav-drawer-links > :nth-child(3) { transition-delay: 60ms; }
body.drawer-open .nav-drawer-links > :nth-child(4) { transition-delay: 90ms; }
body.drawer-open .nav-drawer-links > :nth-child(5) { transition-delay: 120ms; }
body.drawer-open .nav-drawer-links > :nth-child(6) { transition-delay: 150ms; }
.nav-drawer-links a:hover, .nav-drawer-links button:hover { background: var(--bg-hover); color: var(--text); }
.nav-drawer-links a.active { background: var(--brand-soft); color: var(--brand); font-weight: 650; }
.nav-drawer-links svg { width: 20px; height: 20px; color: var(--text-light); }
.nav-drawer-links a.active svg { color: var(--brand); }
.nav-drawer-section { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); padding: 18px 14px 6px; }
.nav-drawer-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.nav-drawer-langs .lang-option { border: 1px solid var(--border); border-radius: var(--radius-sm); }
.nav-drawer-foot { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }

/* ---- Language Switcher ---- */
.lang-switcher { position: relative; margin-left: 4px; }
.lang-flag { width: 22px; height: 15px; object-fit: cover; border-radius: 3px; vertical-align: middle; box-shadow: 0 0 0 1px rgba(23, 23, 23,0.08); }
.lang-btn {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 7px 10px; cursor: pointer; display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: var(--text-muted);
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.lang-btn:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.lang-btn svg { width: 12px; height: 12px; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); min-width: 180px; z-index: var(--z-dropdown);
  overflow: hidden; padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top right;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
.lang-menu.open { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.lang-option {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) ease; font-size: var(--fs-sm); color: var(--text-secondary);
}
.lang-option:hover { background: var(--bg-hover); }
.lang-option.active { background: var(--primary-bg); color: var(--primary); font-weight: 600; }

/* ---- Buttons ----
   Pills. The main action is solid ink (white in Dark); everything else is quiet. No gradients, no glow.
   .btn-accent, .btn-brand and .btn-dawn are the same solid button (kept as names for existing markup). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease, opacity var(--dur) ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); transition-duration: 60ms; }

/* The main button of a screen: the accent. Everything else is an outline or ink. */
.btn-primary, .btn-accent, .btn-brand, .btn-dawn { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover, .btn-accent:hover, .btn-brand:hover, .btn-dawn:hover { color: var(--on-brand); background: var(--brand-hover); }

.btn-danger { background: #c81e1e; color: #fff; }
.btn-danger:hover { color: #fff; background: #b91c1c; }

.btn-success { background: #047857; color: #fff; }
.btn-success:hover { color: #fff; background: #065f46; }

.btn-outline, .btn-secondary {
  background: var(--bg-card);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-outline:hover, .btn-secondary:hover { color: var(--text); background: var(--bg-hover); }

.btn-soft {
  background: var(--bg-hover);
  color: var(--text);
  border-color: transparent;
}
.btn-soft:hover { color: var(--text); background: var(--bg-active); }
.btn-soft-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.btn-soft-danger:hover { color: var(--danger); background: rgba(220,38,38,0.1); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
}
.btn-ghost:hover { color: var(--text); background: var(--bg-hover); transform: none; }

.btn-white {
  background: #fff;
  color: #0d0d0d;
}
.btn-white:hover { color: #0d0d0d; opacity: 0.9; }

.btn-sm { min-height: 32px; padding: 5px 13px; font-size: 0.8rem; }
.btn-sm svg { width: 14px; height: 14px; }
.btn-lg { min-height: 48px; padding: 12px 24px; font-size: var(--fs-base); }
.btn-xl { min-height: 56px; padding: 14px 30px; font-size: 1.0625rem; }
.btn-block { width: 100%; justify-content: center; }
.btn-icon { padding: 0; width: 42px; min-width: 42px; }
.btn-icon.btn-sm { width: 34px; min-width: 34px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; box-shadow: none; }

/* Loading state: APP.setLoading(btn, true) */
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  top: 50%; left: 50%;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--on-solid) 30%, transparent);
  border-top-color: var(--on-solid);
  animation: spin 0.7s linear infinite;
}
.btn-outline.is-loading::after, .btn-secondary.is-loading::after, .btn-ghost.is-loading::after, .btn-soft.is-loading::after, .btn-white.is-loading::after {
  border-color: var(--border-strong); border-top-color: var(--primary);
}

.btn-glow { }

/* Ripple (kept for existing markup) */
.btn-ripple::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10.01%);
  transform: scale(10);
  opacity: 0;
  transition: transform 0.5s, opacity 1s;
}
.btn-ripple:active::after { transform: scale(0); opacity: 0.3; transition: 0s; }

/* ---- Cards ---- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 16px;
  transition: border-color var(--dur) ease, box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.card-flat { box-shadow: none; }
.card-interactive { cursor: pointer; }
.card-interactive:hover, .card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.card-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.015em; color: var(--text); }
.card-subtitle { color: var(--text-light); font-size: var(--fs-sm); margin-top: 2px; }
.card h2 { font-size: var(--fs-xl); font-weight: 600; }
.card h3 { font-size: var(--fs-base); font-weight: 650; margin-bottom: 8px; }
.card-section + .card-section { border-top: 1px solid var(--border-light); margin-top: 20px; padding-top: 20px; }

/* Icon chip used in cards, list rows, stats */
.icon-chip {
  width: 40px; height: 40px;
  display: inline-grid; place-items: center;
  border-radius: 12px;
  background: var(--primary-bg);
  color: var(--primary);
  flex-shrink: 0;
}
.icon-chip svg { width: 20px; height: 20px; }
.icon-chip.accent { background: var(--accent-bg); color: var(--accent); }
.icon-chip.success { background: var(--success-bg); color: var(--success); }
.icon-chip.warning { background: var(--warning-bg); color: var(--warning); }
.icon-chip.danger { background: var(--danger-bg); color: var(--danger); }
.icon-chip.lg { width: 52px; height: 52px; border-radius: 16px; }
.icon-chip.lg svg { width: 26px; height: 26px; }

/* Stat card / KPI tile */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) ease;
  position: relative;
  overflow: hidden;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.stat-card .stat-value {
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.stat-card .stat-label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 500;
}
.stat-card .stat-icon {
  color: var(--primary);
  margin-bottom: 10px;
}
.kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.kpi-label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-muted); font-weight: 500; }
.kpi-label svg { width: 16px; height: 16px; color: var(--text-light); }
.kpi-value { font-family: var(--font-heading); font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.03em; color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-meta { font-size: var(--fs-xs); color: var(--text-light); }
.trend-up { color: var(--success); font-weight: 600; }
.trend-down { color: var(--danger); font-weight: 600; }

/* Progress */
.progress {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--bg-active);
  overflow: hidden;
  position: relative;
}
.progress > .progress-bar,
.progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--grad-brand);
  width: var(--value, 0%);
  transition: width 900ms var(--ease-out);
}
.progress.success > span, .progress.success > .progress-bar { background: var(--success); }
.progress.warning > span, .progress.warning > .progress-bar { background: var(--warning); }
.progress.danger > span, .progress.danger > .progress-bar { background: var(--danger); }

/* ---- Forms ---- */
.form-group { margin-bottom: 18px; }
.form-group label, .form-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.form-hint { font-size: var(--fs-xs); color: var(--text-light); margin-top: 6px; line-height: 1.5; }
.form-error { font-size: var(--fs-xs); color: var(--danger); margin-top: 6px; font-weight: 500; }
.form-error:empty { display: none; }
.form-control {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.4;
  outline: none;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease, background var(--dur) ease;
}
.form-control:hover { border-color: var(--text-faint); }
.form-control:focus {
  border-color: var(--primary);
  box-shadow: var(--ring);
}
.form-control[aria-invalid="true"], .form-control.is-invalid { border-color: var(--danger); }
.form-control[aria-invalid="true"]:focus, .form-control.is-invalid:focus { box-shadow: var(--ring-danger); }
.form-control:disabled { background: var(--bg-hover); color: var(--text-light); cursor: not-allowed; }
.form-control::placeholder { color: var(--text-faint); }
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
textarea.form-control { resize: vertical; min-height: 96px; line-height: 1.55; }
/* iOS zooms into inputs smaller than 16px; keep them at 16px on touch screens. */
@media (pointer: coarse) {
  .form-control, .search-input, .tag-input-field, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], select, textarea { font-size: 16px; }
}
.input-group { position: relative; display: flex; align-items: center; }
.input-group > .form-control { flex: 1; }
.input-group > .input-icon { position: absolute; left: 13px; color: var(--text-light); pointer-events: none; width: 18px; height: 18px; }
.input-group > .input-icon ~ .form-control { padding-left: 40px; }
.input-group > .input-action {
  position: absolute; right: 6px;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; background: none; border-radius: 8px; color: var(--text-light); cursor: pointer;
}
.input-group > .input-action:hover { background: var(--bg-hover); color: var(--text); }
.input-group > .input-action svg { width: 18px; height: 18px; }
.input-group > .input-action ~ .form-control, .input-group > .form-control:has(~ .input-action) { padding-right: 46px; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); width: 18px; height: 18px; cursor: pointer; }

/* Toggle switch: <label class="switch"><input type="checkbox"><span class="switch-track"></span> Label</label> */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: var(--fs-sm); color: var(--text-secondary); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track {
  position: relative; width: 42px; height: 24px; flex-shrink: 0;
  border-radius: var(--radius-full); background: var(--bg-active);
  transition: background var(--dur) ease;
}
.switch-track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(23, 23, 23,0.25);
  transition: transform var(--dur) var(--ease-spring);
}
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { box-shadow: var(--ring); }
.switch input:disabled + .switch-track { opacity: 0.5; cursor: not-allowed; }

/* Segmented control: .segmented > button.active */
.segmented {
  display: inline-flex; padding: 4px; gap: 2px;
  background: var(--bg-hover); border: 1px solid var(--border); border-radius: 12px;
}
.segmented > button, .segmented > a {
  border: 0; background: none; cursor: pointer;
  padding: 7px 14px; border-radius: 9px;
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--dur) ease, color var(--dur) ease, box-shadow var(--dur) ease;
}
.segmented > button:hover, .segmented > a:hover { color: var(--text); }
.segmented > .active { background: var(--bg-card); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 600; }

.form-range {
  width: 100%;
  height: 6px;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(to right, var(--primary) var(--fill, 50%), var(--bg-active) var(--fill, 50%));
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  cursor: grab;
  border: 2px solid var(--primary);
  box-shadow: 0 2px 6px rgba(23, 23, 23,0.18);
  transition: transform var(--dur-fast) ease;
}
.form-range::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
.form-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  cursor: grab;
  border: 2px solid var(--primary);
  box-shadow: 0 2px 6px rgba(23, 23, 23,0.18);
}
.form-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring); }

/* ---- Grid ---- */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge svg { width: 12px; height: 12px; }
.badge-live {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-border);
}
.badge-live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 rgba(239,68,68,0.6);
  animation: livePing 1.6s var(--ease-out) infinite;
}
.badge-draft, .badge-neutral {
  background: var(--bg-hover);
  color: var(--text-muted);
  border-color: var(--border);
}
.badge-scheduled, .badge-warning {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: var(--warning-border);
}
.badge-ended {
  background: var(--bg-hover);
  color: var(--text-light);
  border-color: var(--border);
}
.badge-success { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.badge-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.badge-role, .badge-accent {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent-border);
}
.badge-owner, .badge-primary {
  background: var(--primary-bg);
  color: var(--primary);
  border-color: var(--primary-border);
}
.badge-plan {
  background: var(--grad-brand);
  color: #fff;
  border: 0;
}
.badge-soft { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--fs-xs); }
@keyframes livePing {
  0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
  80%, 100% { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
}

/* Live dot for inline use */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: livePing 1.6s var(--ease-out) infinite; }

/* ---- Tag Input (language chips) ---- */
.tag-input-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  min-height: 44px;
  align-items: center;
  cursor: text;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.tag-input-wrapper:focus-within {
  border-color: var(--primary);
  box-shadow: var(--ring);
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 10px;
  background: var(--primary-bg);
  color: var(--primary-dark);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  animation: chipIn var(--dur) var(--ease-spring);
}
@keyframes chipIn { from { opacity: 0; transform: scale(0.85); } }
.tag-chip .tag-remove {
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  width: 18px; height: 18px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  opacity: 0.6;
  transition: opacity var(--dur-fast), background var(--dur-fast);
}
.tag-chip .tag-remove:hover { opacity: 1; background: rgba(var(--primary-rgb), 0.15); }
.tag-input-field {
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--fs-sm);
  min-width: 120px;
  flex: 1;
  padding: 2px 0;
  color: var(--text);
}
.tag-input-field::placeholder { color: var(--text-faint); }
.tag-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 240px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
  box-shadow: var(--shadow-lg);
  display: none;
  padding: 4px;
}
.tag-dropdown.open { display: block; animation: menuIn var(--dur) var(--ease-out); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } }
.tag-dropdown-item {
  padding: 9px 12px;
  cursor: pointer;
  font-size: var(--fs-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
}
.tag-dropdown-item:hover,
.tag-dropdown-item.highlighted { background: var(--bg-hover); }
.tag-dropdown-item .lang-native { color: var(--text-muted); font-size: 0.75rem; }

/* ---- Alerts ---- */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: var(--fs-sm);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid transparent;
  line-height: 1.5;
  animation: fadeIn var(--dur) ease;
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-error { background: var(--danger-bg); border-color: var(--danger-border); color: #b91c1c; }
.alert-success { background: var(--success-bg); border-color: var(--success-border); color: #047857; }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-ink); }
.alert-info { background: var(--primary-bg); border-color: var(--primary-border); color: var(--primary-dark); }
[data-theme="dark"] .alert-error { color: var(--danger); }
[data-theme="dark"] .alert-success { color: var(--success); }
[data-theme="dark"] .alert-warning { color: var(--warning); }
[data-theme="dark"] .alert-info { color: var(--primary); }

/* ---- Table ---- */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.table-wrap > .table th:first-child { border-top-left-radius: var(--radius); }
.table-wrap > .table th:last-child { border-top-right-radius: var(--radius); }
.table-wrap > .table tr:last-child td { border-bottom: 0; }
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
}
.table th, .table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
.table th {
  color: var(--text-light);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bg-subtle);
  border-bottom-color: var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.table td { color: var(--text-secondary); }
.table tbody tr { transition: background var(--dur-fast) ease; }
.table tbody tr:hover { background: var(--bg-subtle); }
.table .num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Stack rows into cards on phones: add .table-stack and data-label on each td */
@media (max-width: 640px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .table-stack td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .table-stack td::before { content: attr(data-label); font-weight: 600; color: var(--text-light); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; text-align: left; }
}

/* ---- Modal (centered on desktop, bottom sheet on phones) ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: 24px;
  overscroll-behavior: contain;
}
.modal-overlay.active { display: flex; animation: fadeIn var(--dur) ease both; }
.modal-overlay.closing { animation: fadeOut var(--dur) ease both; }
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  width: 100%;
  max-width: 520px;
  max-height: min(90vh, 900px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--shadow-xl);
  position: relative;
  animation: modalIn var(--dur-slow) var(--ease-out) both;
}
.modal-overlay.closing .modal { animation: modalOut var(--dur) var(--ease-in-out) both; }
.modal h2 { margin-bottom: 20px; font-size: var(--fs-2xl); }
.modal-lg { max-width: 760px; }
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-light); cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.modal-close:hover { background: var(--bg-hover); color: var(--text); }
.modal-close svg { width: 20px; height: 20px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
@keyframes modalOut { to { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes sheetIn { from { transform: translateY(100%); } }
@keyframes sheetOut { to { transform: translateY(100%); } }
@media (max-width: 640px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal, .modal-lg {
    max-width: none;
    border-radius: 22px 22px 0 0;
    padding: 28px 20px calc(24px + var(--safe-bottom));
    max-height: 92vh;
    animation: sheetIn var(--dur-slow) var(--ease-out) both;
    border-bottom: 0;
  }
  .modal::before {
    content: '';
    position: sticky; top: -16px; display: block;
    width: 40px; height: 4px; border-radius: 4px; background: var(--border-strong);
    margin: -14px auto 16px;
  }
  .modal-overlay.closing .modal { animation: sheetOut var(--dur) var(--ease-in-out) both; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
}

/* ---- Toasts: APP.toast(message, { type }) ---- */
.toast-stack {
  position: fixed;
  z-index: var(--z-toast);
  right: 20px;
  bottom: calc(20px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 32px);
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 280px;
  max-width: 420px;
  padding: 14px 14px 14px 16px;
  border-radius: var(--radius);
  background: #171717;
  color: #f8fafc;
  box-shadow: var(--shadow-xl);
  font-size: var(--fs-sm);
  line-height: 1.45;
  animation: toastIn var(--dur-slow) var(--ease-spring) both;
  position: relative;
  overflow: hidden;
}
.toast.leaving { animation: toastOut var(--dur) var(--ease-in-out) both; }
.toast-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.toast-success .toast-icon { color: #34d399; }
.toast-error .toast-icon { color: #f87171; }
.toast-warning .toast-icon { color: #c8c8c8; }
.toast-info .toast-icon { color: #c1c1c1; }
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-weight: 600; margin-bottom: 2px; }
.toast-action {
  border: 0; background: rgba(255,255,255,0.12); color: #fff; cursor: pointer;
  padding: 4px 10px; border-radius: 8px; font-weight: 600; font-size: var(--fs-xs); margin-left: 4px;
}
.toast-action:hover { background: rgba(255,255,255,0.22); }
.toast-close { border: 0; background: none; color: rgba(255,255,255,0.6); cursor: pointer; padding: 2px; border-radius: 6px; display: grid; place-items: center; }
.toast-close:hover { color: #fff; background: rgba(255,255,255,0.1); }
.toast-close svg { width: 16px; height: 16px; }
.toast-progress { position: absolute; left: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.35); transform-origin: left; animation: toastTimer linear forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(0.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(24px); } }
@keyframes toastTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 640px) {
  .toast-stack { left: 12px; right: 12px; bottom: calc(12px + var(--safe-bottom)); align-items: stretch; }
  .toast { min-width: 0; max-width: none; }
  @keyframes toastOut { to { opacity: 0; transform: translateY(16px); } }
}

/* ---- Skeleton loaders ---- */
.skeleton {
  display: block;
  background: linear-gradient(90deg, var(--bg-hover) 0%, var(--bg-active) 50%, var(--bg-hover) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
  min-height: 12px;
}
.skeleton-text { height: 12px; margin: 8px 0; }
.skeleton-title { height: 22px; width: 40%; margin-bottom: 12px; }
.skeleton-circle { border-radius: 50%; }
.skeleton-card { height: 96px; border-radius: var(--radius); margin-bottom: 12px; }

/* ---- Empty state ---- */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  animation: fadeUp var(--dur-slow) var(--ease-out) both;
}
.empty-state .empty-icon {
  width: 64px; height: 64px; margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 20px;
  background: var(--grad-brand-soft);
  color: var(--primary);
}
.empty-state .empty-icon svg { width: 30px; height: 30px; }
.empty-state h3 { font-size: var(--fs-xl); margin-bottom: 6px; }
.empty-state p { color: var(--text-muted); max-width: 420px; margin: 0 auto; font-size: var(--fs-sm); }
.empty-state .empty-actions { margin-top: 20px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---- Tabs ---- */
.tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 24px;
  padding: 4px;
  background: var(--bg-hover);
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 9px 16px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 9px;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: color var(--dur) ease, background var(--dur) ease, box-shadow var(--dur) ease;
  text-align: center;
  flex: 1 0 auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  background: none;
  scroll-snap-align: start;
}
.tab svg { width: 16px; height: 16px; }
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--text);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}
.tab-panel { animation: fadeUp var(--dur-slow) var(--ease-out) both; }
/* Underline variant for dense app tabs */
.tabs-underline { background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 0; gap: 4px; }
.tabs-underline .tab { flex: 0 0 auto; border-radius: 0; padding: 12px 14px; position: relative; }
.tabs-underline .tab.active { background: none; box-shadow: none; color: var(--brand); }
.tabs-underline .tab::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transition: transform var(--dur) var(--ease-out); }
.tabs-underline .tab.active::after { transform: scaleX(1); }

/* ---- Status ---- */
.status-bar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background var(--dur) ease, box-shadow var(--dur) ease;
}
.status-dot.live {
  background: var(--live);
  animation: livePing 1.6s var(--ease-out) infinite;
}
.status-dot.connected {
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(5,150,105,0.15);
}

/* Status ring */
.status-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  transition: border-color var(--dur-slow) ease, box-shadow var(--dur-slow) ease;
}
.status-ring.live {
  border-color: var(--danger);
  box-shadow: 0 0 30px rgba(220,38,38,0.2);
  animation: pulseGlow 2s infinite;
}
.status-ring.connected {
  border-color: var(--success);
  box-shadow: 0 0 30px rgba(5,150,105,0.2);
}
.status-ring.reconnecting {
  border-color: var(--warning);
  box-shadow: 0 0 30px rgba(245,158,11,0.2);
  animation: pulseGlow 1.5s infinite;
}
.status-ring .status-icon { color: var(--text-light); transition: color var(--dur) ease; }
.status-ring.live .status-icon { color: var(--danger); }
.status-ring.connected .status-icon { color: var(--success); }
.status-ring.reconnecting .status-icon { color: var(--warning); }

/* Audio visualizer */
.audio-visualizer {
  width: 100%;
  height: 80px;
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.wave-bar {
  width: 4px;
  height: 8px;
  background: var(--primary);
  border-radius: 2px;
  animation: waveBar 1s ease-in-out infinite;
}
.wave-bar:nth-child(1) { animation-delay: 0s; }
.wave-bar:nth-child(2) { animation-delay: 0.1s; }
.wave-bar:nth-child(3) { animation-delay: 0.2s; }
.wave-bar:nth-child(4) { animation-delay: 0.3s; }
.wave-bar:nth-child(5) { animation-delay: 0.4s; }
.wave-bar:nth-child(6) { animation-delay: 0.5s; }
.wave-bar:nth-child(7) { animation-delay: 0.6s; }
.wave-bar:nth-child(8) { animation-delay: 0.7s; }
.wave-bar:nth-child(9) { animation-delay: 0.3s; }
.wave-bar:nth-child(10) { animation-delay: 0.15s; }

/* Language grid */
.language-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 12px;
  margin-top: 20px;
}
.language-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: border-color var(--dur) ease, background var(--dur) ease, transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  box-shadow: var(--shadow-xs);
}
.language-card:hover {
  border-color: var(--primary);
  background: var(--primary-bg);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.language-card:active { transform: scale(0.98); }
.language-card.selected {
  border-color: var(--primary);
  background: var(--primary-bg);
  box-shadow: var(--shadow-glow);
}
.language-card .lang-name { font-weight: 600; font-size: 0.95rem; color: var(--text); }
.language-card .lang-native { color: var(--text-muted); font-size: 0.85rem; margin-top: 2px; }
.language-card.featured {
  border-color: var(--primary);
  background: var(--primary-bg);
  position: relative;
}
.language-card.featured::after {
  content: '\2605';
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--primary);
  font-size: 0.7rem;
}
.lang-section-divider {
  grid-column: 1 / -1;
  text-align: center;
  padding: 8px 0;
  position: relative;
}
.lang-section-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}
.lang-section-divider span {
  position: relative;
  background: var(--divider-bg, var(--bg-card));
  padding: 0 12px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.language-card .lang-listeners {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ---- Phone tab bar (APP.renderNav(…, { tabbar: true })) ----
   A floating glass bar with the five places a signed-in person goes. Phones only; the page
   gets bottom padding so nothing hides behind it. */
.tabbar { display: none; }
@media (max-width: 720px) {
  .tabbar {
    position: fixed; z-index: var(--z-sticky);
    left: 10px; right: 10px; bottom: calc(10px + var(--safe-bottom));
    height: var(--tabbar-h);
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch;
    padding: 6px;
    border-radius: 24px;
    background: var(--glass-strong);
    -webkit-backdrop-filter: saturate(170%) blur(20px);
    backdrop-filter: saturate(170%) blur(20px);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: tabbarIn var(--dur-slow) var(--ease-out) both;
  }
  @keyframes tabbarIn { from { opacity: 0; transform: translateY(24px); } }
  .tabbar-item {
    position: relative; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border-radius: 18px;
    color: var(--text-light); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.01em;
    transition: color var(--dur) ease, background var(--dur) ease, transform var(--dur-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar-item:active { transform: scale(0.94); }
  .tabbar-ico { display: grid; place-items: center; width: 44px; height: 26px; border-radius: 13px; transition: background var(--dur) ease; }
  .tabbar-ico svg { width: 21px; height: 21px; }
  .tabbar-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar-item.active { color: var(--brand); font-weight: 650; }
  .tabbar-item.active .tabbar-ico { background: var(--brand-soft); }
  body.has-tabbar { padding-bottom: calc(var(--tabbar-h) + 28px + var(--safe-bottom)); }
  body.has-tabbar .toast-stack { bottom: calc(var(--tabbar-h) + 22px + var(--safe-bottom)); }
  body.drawer-open .tabbar, body:has(.modal-overlay.active) .tabbar { display: none; }
}

/* ---- Touch screens (phones, tablets, the apps): a finger-sized tap area on everything small.
   Measured on the live sites at six screen sizes (untracked/redesign/v3/touch.js). The look stays
   the same: controls grow to 44px, or get an invisible larger area (::after) where growing them
   would change the layout. A link inside a sentence is exempt. ---- */
@media (pointer: coarse) {
  .theme-btn { width: 44px; height: 44px; }
  .navbar .logo, .auth-mobile-logo { min-height: 44px; display: inline-flex; align-items: center; }
  .auth-back { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .navbar .nav-links > a.nav-cta, .lang-btn { min-height: 44px; }
  .support-bar-close, .support-bar a, .auth-forgot, .settings-section-foot a, .kpi-meta a, .breadcrumb a { position: relative; }
  .support-bar-close::after { content: ''; position: absolute; inset: -8px; }
  .support-bar a::after, .auth-forgot::after, .settings-section-foot a::after, .kpi-meta a::after, .breadcrumb a::after { content: ''; position: absolute; inset: -12px -8px; }
}