/* ============================================================
   EkhoniJanao — PRO DESIGN LAYER
   Loaded last, so it refines (never rewrites) styles.css / enhance.css.
   Sections:
     1. Type system (fonts)           6. Dark-mode map
     2. Brand + tagline               7. Navigation: history buttons, rail, mobile bar
     3. Welcome page                  8. Command palette + shortcuts
     4. Top bar                       9. Motion, scroll helpers, polish
     5. Layout modes (wide / split)  10. Learn & Tips structure
   ============================================================ */

/* ---------- 1. TYPE SYSTEM ---------------------------------------------
   English: Plus Jakarta Sans (body) + Outfit (headlines).
   Bengali: Hind Siliguri (body) + Anek Bangla (headlines).
   Each stack lists the Latin face first and the Bengali face second, so a
   mixed English/Bengali line always renders every glyph in a matching weight. */
:root {
  --font-sans: 'Plus Jakarta Sans', 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', 'Anek Bangla', 'Plus Jakarta Sans', 'Hind Siliguri', system-ui, sans-serif;
  --font-bn: 'Anek Bangla', 'Hind Siliguri', 'Outfit', sans-serif;
  --accent-grad: linear-gradient(120deg, #006a4e 0%, #00a878 55%, #14b8a6 100%);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.3, 1.4, .5, 1);
}
body { font-family: var(--font-sans); line-height: 1.55; text-rendering: optimizeLegibility; font-synthesis: none; }
/* Bengali needs a little more leading than Latin script */
html[lang="bn"] body { line-height: 1.7; font-family: 'Hind Siliguri', var(--font-sans); }
h1, h2, h3, h4, .page-title, .card-title, .nav-label, .splash-title, .logo-text h1,
.auth-brand h2, .fact-num, .stat-num, .qc-num, .tip-card h4, .rf-hero-title, .em-name {
  font-family: var(--font-display);
}
html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3, html[lang="bn"] h4,
html[lang="bn"] .page-title, html[lang="bn"] .card-title { font-family: var(--font-bn); }
p, li, .learn-lead, .accordion-body { font-size: .92rem; line-height: 1.7; }
button, input, select, textarea { font-family: inherit; }
::selection { background: rgba(0, 168, 120, .25); }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
button:focus:not(:focus-visible) { outline: none; }

/* ---------- 2. BRAND + TAGLINE ---------------------------------------- */
.logo-text h1 {
  font-size: 1.28rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="dark"] .logo-text h1 { background: linear-gradient(120deg, #00e6a5, #5eead4); -webkit-background-clip: text; background-clip: text; }
.logo-text .brand-tag, .auth-brand .brand-tag {
  display: block; margin-top: 3px; font-family: var(--font-bn); font-size: .82rem; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--accent); opacity: .95;
}
.auth-brand .brand-tag { color: rgba(255, 255, 255, .88); font-size: .9rem; }
#aboutTagline {
  font-family: var(--font-bn); font-size: 1.35rem; font-weight: 700; line-height: 1.35;
  color: var(--accent); letter-spacing: 0; text-transform: none;
}
.sidebar-header { padding-bottom: 14px; }
.sidebar-welcome {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px;
  padding: 8px 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: transparent;
  color: var(--text-muted); font-size: .74rem; font-weight: 700; cursor: pointer; transition: var(--transition);
}
.sidebar-welcome:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }

/* ---------- 3. WELCOME PAGE ------------------------------------------- */
.splash.hidden { display: none !important; }
.splash-stage { position: relative; z-index: 2; width: min(960px, 100%); }
.splash-stage .splash-inner { width: 100%; }
.splash-logo-wrap {
  position: relative; width: 140px; height: 140px;
  margin: 0 auto 14px; pointer-events: none;
}
.splash-ring { width: 140px; height: 140px; }
.splash-ring .ring-spin { transform-origin: center; }
.splash-logo-wrap .logo-halo { inset: -14%; opacity: .45; filter: blur(8px); }
.splash-logo {
  inset: 4px; background: #fff; border: none; border-radius: 50%; overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18); animation: none;
}
.splash-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: none; }
.logo-icon {
  width: 64px; height: 64px; border-radius: 50%; background: #fff; object-fit: cover;
  box-shadow: 0 4px 14px rgba(0, 106, 78, .22);
}
.about-hero-lockup { display: flex; align-items: center; gap: 22px; text-align: left; position: relative; }
.about-hero-copy { min-width: 0; }
.about-hero-copy .about-hero-badge { margin-bottom: 8px; }
.about-hero-logo { width: 112px; height: 112px; margin: 0; flex: none; padding: 0; border-radius: 50%; overflow: hidden; background: #fff; }
.about-hero-chips { justify-content: flex-start; }
@media (max-width: 640px) {
  .about-hero-lockup { gap: 14px; }
  .about-hero-logo { width: 72px; height: 72px; }
}
.about-hero-logo img { border-radius: 50%; object-fit: cover; width: 100%; height: 100%; }
.auth-brand-icon { width: 72px; height: 72px; background: #fff; border-radius: 50%; overflow: hidden; border: none; padding: 0; }
.auth-brand-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.splash-motto {
  margin: -6px auto 14px; text-align: center; font-family: var(--font-display); font-weight: 800; letter-spacing: .04em;
  font-size: .92rem; color: #166534;
}
.splash-motto span { color: #ca8a04; padding: 0 4px; }
[data-theme="dark"] .splash-motto { color: #bbf7d0; }
@media (max-width: 640px) {
  .splash-logo-wrap, .splash-ring { width: 112px; height: 112px; }
  .splash-logo { inset: 3px; }
}
.splash-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; gap: 0; font-size: clamp(2.6rem, 9vw, 5rem); }
.splash-title span { display: inline; }
.splash-kicker { font-family: var(--font-display); letter-spacing: .35em; font-size: .78rem; margin-bottom: 4px; }
.splash-bn {
  margin: -2px auto 18px; font-family: var(--font-bn); font-weight: 700; line-height: 1.3;
  font-size: clamp(1.5rem, 4.4vw, 2.4rem); animation: fadeInUp .7s var(--ease-out) .8s both;
}
.splash-bn span {
  display: inline-block; position: relative; padding: 0 6px 8px;
  background: linear-gradient(100deg, #0f766e, #16a34a 45%, #ca8a04); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.splash-bn span::after {
  content: ''; position: absolute; left: 4px; right: 4px; bottom: 0; height: 5px; border-radius: 6px;
  background: linear-gradient(90deg, #16a34a, #facc15); transform-origin: left; transform: scaleX(0);
  animation: underlineGrow .9s var(--ease-out) 1.4s forwards;
}
@keyframes underlineGrow { to { transform: scaleX(1); } }
.splash-tag { font-size: 1.02rem; font-family: var(--font-sans); }

/* Back / Forward on the welcome page */
.splash-nav { position: absolute; top: 24px; left: 24px; z-index: 3; display: flex; gap: 10px; }
.nav-arrow {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid rgba(22, 101, 52, .18); background: rgba(255, 255, 255, .78); color: #166534;
  font-size: .8rem; font-weight: 800; backdrop-filter: blur(12px); box-shadow: 0 3px 12px rgba(0, 0, 0, .07);
  transition: transform .25s var(--ease-out), box-shadow .25s, background .2s, opacity .2s;
}
.nav-arrow:hover:not(:disabled) { transform: translateY(-2px); background: #fff; box-shadow: 0 8px 20px rgba(22, 163, 74, .22); }
.nav-arrow:active:not(:disabled) { transform: scale(.96); }
.nav-arrow:disabled { opacity: .4; cursor: not-allowed; }
#splashBack:hover:not(:disabled) i { animation: nudgeL .5s ease; }
#splashFwd:hover:not(:disabled) i { animation: nudgeR .5s ease; }
@keyframes nudgeL { 50% { transform: translateX(-4px); } }
@keyframes nudgeR { 50% { transform: translateX(4px); } }
.splash-skip { top: 24px; right: 24px; }
@media (max-width: 640px) {
  .splash-nav { top: 12px; left: 12px; }
  .splash-skip { top: 12px; right: 12px; padding: 10px 14px; }
  .nav-arrow { padding: 10px 12px; }
  .nav-arrow span { display: none; }
}
/* dark-mode welcome page */
[data-theme="dark"] .splash {
  background:
    radial-gradient(88% 68% at 12% 6%, rgba(165, 155, 202, .08), transparent 58%),
    radial-gradient(72% 56% at 90% 12%, rgba(202, 175, 126, .06), transparent 56%),
    var(--bg-primary);
  color: var(--text-primary);
}
[data-theme="dark"] .splash::before { background: radial-gradient(circle at 50% 44%, rgba(253, 230, 138, .03), transparent 62%); }
[data-theme="dark"] .splash-inner { background: var(--glass-bg); border-color: var(--border); backdrop-filter: blur(8px); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
[data-theme="dark"] .splash-title { color: #fdf8ee; text-shadow: 0 2px 20px rgba(253, 230, 138, .2); }
[data-theme="dark"] .splash-kicker, [data-theme="dark"] .splash-tag, [data-theme="dark"] .splash-rotator, [data-theme="dark"] .splash-rot-static { color: #a7f3d0; text-shadow: none; }
[data-theme="dark"] .splash-hint { color: #6ee7b7; }
[data-theme="dark"] .splash-hint kbd { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .15); color: #a7f3d0; }
[data-theme="dark"] .splash-skip, [data-theme="dark"] .nav-arrow { background: var(--bg-secondary); border-color: var(--border); color: var(--text-secondary); }
[data-theme="dark"] .nav-arrow:hover:not(:disabled), [data-theme="dark"] .splash-skip:hover { background: var(--bg-tertiary); color: var(--text-primary); }
[data-theme="dark"] .splash-bn span { background: linear-gradient(100deg, #5eead4, #4ade80 50%, #fde047); -webkit-background-clip: text; background-clip: text; }
[data-theme="dark"] .logo-halo { opacity: .6; }
[data-theme="dark"] .splash-glow { background: radial-gradient(circle, rgba(255, 247, 224, .22) 0%, rgba(253, 230, 138, .13) 34%, rgba(56, 189, 248, .10) 54%, transparent 70%); }

/* ---------- 4. TOP BAR ------------------------------------------------- */
.top-bar { position: relative; z-index: 120; gap: 14px; backdrop-filter: saturate(1.4) blur(14px); background: color-mix(in srgb, var(--bg-secondary) 88%, transparent); }
.top-bar-left { min-width: 0; flex: 1 1 auto; }
.top-title { min-width: 0; }
.page-title { font-size: 1.2rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-bar-right { flex: 0 0 auto; }
.nav-history { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg-tertiary); border-radius: 12px; border: 1px solid var(--border); flex: 0 0 auto; }
.nav-hist-btn {
  width: 34px; height: 34px; border-radius: 9px; border: none; background: transparent; color: var(--text-secondary);
  display: grid; place-items: center; cursor: pointer; font-size: .85rem; transition: background .2s, color .2s, transform .2s var(--ease-spring);
}
.nav-hist-btn:hover:not(:disabled) { background: var(--bg-secondary); color: var(--accent); box-shadow: var(--shadow-sm); }
.nav-hist-btn:active:not(:disabled) { transform: scale(.88); }
.nav-hist-btn:disabled { opacity: .32; cursor: default; }
.sync-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary);
  font-size: 0.74rem; font-weight: 800; letter-spacing: .01em; flex: 0 0 auto; white-space: nowrap;
}
.sync-pill i { font-size: 0.74rem; color: #b45309; }
.sync-pill.is-live i { color: #16a34a; }
.palette-btn { width: auto; padding: 0 11px; gap: 8px; font-size: .8rem; }
.civic-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; margin-bottom: 16px; }
.pulse-row { display: flex; gap: 16px; align-items: flex-start; }
.pulse-score { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; line-height: .9; letter-spacing: -.04em; color: var(--accent); min-width: 2.2ch; }
.civic-pulse[data-band="active"] .pulse-score { color: #b45309; }
.civic-pulse[data-band="strain"] .pulse-score { color: var(--danger); }
.pulse-band { font-weight: 800; font-size: .95rem; }
.pulse-read, .pulse-note, .watch-lead, .watch-empty { color: var(--text-secondary); font-size: .8rem; line-height: 1.5; margin: 4px 0 0; }
.pulse-meter { height: 8px; border-radius: 99px; background: var(--bg-tertiary); overflow: hidden; margin: 12px 0; }
.pulse-meter > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent-grad); transition: width .45s var(--ease-out); }
.civic-pulse[data-band="active"] .pulse-meter > span { background: linear-gradient(90deg, #f59e0b, #ea580c); }
.civic-pulse[data-band="strain"] .pulse-meter > span { background: linear-gradient(90deg, #f97316, #dc2626); }
.pulse-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pulse-chip { font-size: 0.74rem; font-weight: 700; padding: 4px 8px; border-radius: 999px; background: var(--bg-tertiary); color: var(--text-secondary); }
.watch-add { position: relative; margin-top: 10px; }
.watch-add input {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--border);
  background: var(--bg-primary); color: var(--text-primary); font: inherit; font-size: .85rem;
}
.watch-suggest {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-md, 0 10px 30px rgba(0,0,0,.12)); overflow: hidden;
}
.watch-suggest button, .watch-row, .watch-chip button {
  font: inherit; cursor: pointer;
}
.watch-suggest button {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border: none; background: transparent;
  color: var(--text-primary); font-size: .82rem; font-weight: 650;
}
.watch-suggest button:hover { background: var(--accent-bg); }
.watch-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.watch-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; border-radius: 999px;
  background: var(--accent-bg); color: var(--accent); font-size: .74rem; font-weight: 800;
}
.watch-chip button { border: none; background: transparent; color: inherit; padding: 0 2px; }
.watch-block { margin-top: 10px; }
.watch-place { font-size: 0.74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.watch-row {
  width: 100%; display: flex; justify-content: space-between; gap: 10px; align-items: center;
  padding: 8px 0; border: none; border-top: 1px solid var(--border); background: transparent;
  color: var(--text-primary); text-align: left; font-size: .8rem;
}
.watch-row:hover { color: var(--accent); }
.watch-dist { flex: none; color: var(--text-muted); font-weight: 700; font-size: 0.74rem; }
.nearby-hint {
  margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; font-size: .78rem; line-height: 1.45;
  background: var(--warning-light); color: #7a5800;
}
[data-theme="dark"] .nearby-hint { color: #fde68a; background: rgba(251, 188, 4, .12); }
@media (max-width: 900px) {
  .civic-grid { grid-template-columns: 1fr; }
  .sync-pill span { display: none; }
  .sync-pill { padding: 8px; }
}
.palette-btn kbd {
  font-family: var(--font-sans); font-size: 0.74rem; font-weight: 800; color: var(--text-muted);
  background: var(--bg-tertiary); border: 1px solid var(--border); padding: 2px 6px; border-radius: 6px;
}
.top-btn { border-radius: 10px; }

/* ---------- 5. LAYOUT MODES -------------------------------------------
   split : form / list on the left, live map on the right  (report + map pages)
   wide  : full-width reading & dashboard pages, map tucked away             */
.app-layout { height: 100vh; height: 100dvh; }
.app-layout[data-layout="wide"] .map-wrapper { display: none; }
.app-layout[data-layout="wide"] .panel {
  width: 100%; flex: 1 1 auto; border-right: none; padding: 28px clamp(18px, 4vw, 56px) 40px;
}
.app-layout[data-layout="wide"] .tab-panel { max-width: 1160px; margin-inline: auto; }
.app-layout[data-layout="wide"] .card { box-shadow: var(--shadow-xs); }
.app-layout[data-layout="split"] .panel { width: clamp(400px, 38vw, 560px); }
.panel { scroll-behavior: smooth; overscroll-behavior: contain; }
.content-area { position: relative; }

/* ---------- 6. DARK-MODE MAP -----------------------------------------
   OpenStreetMap tiles re-coloured to a calm dark palette (keyless, no API).   */
.tiles-dark, [data-theme="dark"] .tiles-street {
  filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.92) saturate(.7);
}
[data-theme="dark"] .leaflet-container { background: #11151c; }
[data-theme="dark"] .leaflet-control-zoom a, [data-theme="dark"] .leaflet-bar a { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border); }
[data-theme="dark"] .leaflet-control-attribution, [data-theme="dark"] .leaflet-control-scale-line {
  background: rgba(20, 23, 32, .75); color: var(--text-muted); border-color: var(--border);
}
[data-theme="dark"] .leaflet-control-attribution a { color: var(--accent); }
[data-theme="dark"] .leaflet-popup-content-wrapper, [data-theme="dark"] .leaflet-popup-tip { background: var(--bg-secondary); color: var(--text-primary); }

/* ---------- 7. NAVIGATION --------------------------------------------- */
.nav-item { border-radius: 10px; }
.nav-item.active { background: var(--accent-bg); color: var(--accent); font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }
.nav-item:not(.active):hover { transform: translateX(3px); }
.nav-label { font-family: var(--font-sans); }

/* compact icon rail on small laptops so the map keeps its room */
@media (min-width: 769px) and (max-width: 1180px) {
  :root { --sidebar-width: 76px; }
  .sidebar-header { padding: 16px 10px; }
  .logo { justify-content: center; }
  .logo-text, .sidebar-welcome span, .nav-label, .sidebar-user-info, .theme-toggle span span,
  .nav-item .nav-badge { display: none; }
  .sidebar-welcome { font-size: 0; padding: 10px 0; }
  .sidebar-welcome i { font-size: .95rem; }
  .nav-section { padding: 10px 8px; }
  .nav-item { justify-content: center; padding: 12px 0; font-size: 0; gap: 0; }
  .nav-item i { font-size: 1.05rem; width: auto; }
  .nav-item.active { box-shadow: inset 3px 0 0 var(--accent); }
  .sidebar-user { justify-content: center; padding: 8px; }
  .theme-toggle { justify-content: center; padding: 10px 0; font-size: 0; }
  .theme-toggle i { font-size: 1rem; }
  .theme-toggle .toggle-switch { display: none; }
  .page-subtitle, .streak-badge { display: none; }
}
@media (min-width: 769px) and (max-width: 1280px) {
  .user-profile-btn > div:last-child { display: none; }
  .palette-btn kbd { display: none; }
  .palette-btn { width: 38px; padding: 0; }
}
@media (min-width: 769px) and (max-width: 1500px) { .streak-badge { display: none; } }

/* mobile: bottom bar + slide-over drawer (the sidebar was previously unreachable) */
.mobile-bar, .drawer-scrim, .mobile-drawer-tools { display: none; }
@media (max-width: 768px) {
  :root { --mobile-nav-height: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .app-layout { padding-bottom: var(--mobile-nav-height); }
  .mobile-drawer-tools { display: block; border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
  .sidebar {
    display: flex; position: fixed; inset: env(safe-area-inset-top, 0px) auto var(--mobile-nav-height) 0; width: min(88vw, 320px); z-index: 12000;
    transform: translateX(-102%); transition: transform .35s var(--ease-out); box-shadow: none;
  }
  .sidebar.open { transform: none; box-shadow: 0 0 60px rgba(0, 0, 0, .35); }
  .drawer-scrim { display: block; position: fixed; inset: 0; z-index: 11990; background: rgba(0, 0, 0, .45); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .drawer-scrim.open { opacity: 1; pointer-events: auto; }
  .mobile-bar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 11000;
    height: var(--mobile-nav-height); padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    backdrop-filter: blur(16px); border-top: 1px solid var(--border); box-shadow: 0 -6px 24px rgba(0, 0, 0, .06);
  }
  .mobile-bar button {
    border: none; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--text-muted); font-size: 0.74rem; font-weight: 700; cursor: pointer; border-radius: 12px; position: relative;
    transition: color .2s, background .2s, transform .2s var(--ease-spring);
  }
  .mobile-bar button i { font-size: 1.1rem; transition: transform .3s var(--ease-spring); }
  .mobile-bar button.active { color: var(--accent); background: var(--accent-bg); }
  .mobile-bar button.active i { transform: translateY(-2px) scale(1.12); }
  .mobile-bar button:active { transform: scale(.92); }
  .top-bar { padding: 8px 12px; gap: 8px; }
  .page-subtitle, .streak-badge, .lang-toggle span, .user-profile-btn > div:last-child, .palette-btn kbd,
  .top-btn[title^="Export"], .sos-btn span { display: none; }
  .lang-toggle { padding: 6px 9px; }
  .top-bar-right { gap: 6px; }
  .top-bar-left { gap: 8px; }
  .page-title { font-size: 1rem; }
  .sos-btn { padding: 9px 12px; }
  .palette-btn { width: 38px; padding: 0; }
  .app-layout[data-layout="wide"] .panel { padding: 16px 14px 28px; }
  .app-layout[data-layout="split"] .panel { width: 100%; height: 48vh; }
  .app-layout[data-layout="split"] .map-wrapper { height: calc(52vh - var(--topbar-height) - 64px); }
}

/* ---------- 8. COMMAND PALETTE + SHORTCUTS ---------------------------- */
.pal-scrim {
  position: fixed; inset: 0; z-index: 13000; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px;
  background: rgba(8, 15, 12, .5); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .2s;
}
.pal-scrim.open { opacity: 1; pointer-events: auto; }
.pal {
  width: min(640px, 100%); max-height: 70vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-2xl);
  transform: translateY(-14px) scale(.97); transition: transform .28s var(--ease-spring);
}
.pal-scrim.open .pal { transform: none; }
.pal-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.pal-head i { color: var(--accent); font-size: 1.05rem; }
.pal-head input { flex: 1; border: none; outline: none; background: transparent; color: var(--text-primary); font-size: 1.02rem; font-weight: 500; }
.pal-head kbd, .kbd {
  font-family: var(--font-sans); font-size: 0.74rem; font-weight: 800; padding: 3px 8px; border-radius: 7px;
  background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-muted);
}
.pal-list { overflow-y: auto; padding: 8px; }
.pal-group { padding: 10px 12px 4px; font-size: 0.74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.pal-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: none; background: transparent;
  border-radius: 11px; cursor: pointer; text-align: left; color: var(--text-primary); transition: background .12s;
}
.pal-item .pi-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); flex: 0 0 auto; }
.pal-item .pi-txt { flex: 1; min-width: 0; }
.pal-item .pi-name { font-size: .9rem; font-weight: 700; }
.pal-item .pi-sub { font-size: .74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-item.sel, .pal-item:hover { background: var(--bg-tertiary); }
.pal-item.sel .pi-ico { background: var(--accent); color: #fff; }
.pal-empty { padding: 34px 16px; text-align: center; color: var(--text-muted); font-size: .9rem; }
.pal-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--border); background: var(--bg-primary); font-size: 0.74rem; color: var(--text-muted); }
.pal-foot span { display: inline-flex; align-items: center; gap: 6px; }

.sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; padding: 18px 22px 22px; }
.sc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: .86rem; }
.sc-row .keys { display: inline-flex; gap: 4px; }
@media (max-width: 560px) { .sc-grid { grid-template-columns: 1fr; } }

/* ---------- 9. MOTION, SCROLL HELPERS, POLISH ------------------------- */
.scroll-progress { position: absolute; top: 0; left: 0; right: auto; width: 100%; height: 3px; z-index: 50; pointer-events: none; }
.scroll-progress i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--accent-grad); box-shadow: 0 0 10px rgba(0, 168, 120, .6); }
.to-top {
  position: absolute; right: 22px; bottom: 22px; z-index: 60; width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent-grad); color: #fff; font-size: 1rem; box-shadow: 0 8px 22px rgba(0, 106, 78, .4);
  opacity: 0; transform: translateY(14px) scale(.8); pointer-events: none; transition: opacity .25s, transform .3s var(--ease-spring);
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { transform: translateY(-3px) scale(1.06); }
@media (max-width: 768px) { .to-top { bottom: 16px; right: 14px; } }

/* page entrance: children of the active view rise in with a light stagger */
@keyframes proRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tab-panel.active > * { animation: proRise .5s var(--ease-out) both; }
.tab-panel.active > *:nth-child(1) { animation-delay: .00s; }
.tab-panel.active > *:nth-child(2) { animation-delay: .05s; }
.tab-panel.active > *:nth-child(3) { animation-delay: .10s; }
.tab-panel.active > *:nth-child(4) { animation-delay: .15s; }
.tab-panel.active > *:nth-child(5) { animation-delay: .20s; }
.tab-panel.active > *:nth-child(6) { animation-delay: .25s; }
.tab-panel.active > *:nth-child(n+7) { animation-delay: .30s; }

.card { border-radius: 18px; }
.card:hover { box-shadow: var(--shadow-md); }
.btn:active, .quick-action:active, .layer-toggle:active { transform: scale(.97); }
.btn-primary, .auth-submit { background-size: 160% 100%; transition: background-position .5s, transform .2s, box-shadow .25s; }
.btn-primary:hover { background-position: 100% 0; }

/* kinder to batteries: stop decorative loops when the tab is in the background */
html.tab-hidden *, html.tab-hidden *::before, html.tab-hidden *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
html.reduce-motion .tab-panel.active > * { animation: none; }

/* ---------- 11. WELCOME + SIGN-IN SURFACES ----------------------------
   The living garden (js/nature.js) rains flowers and leaves through these
   screens; the card sits above it on a slow breath. */
.splash-features { perspective: 1100px; }
.splash-feat { transform-style: preserve-3d; }
/* Each card takes one colour from the garden, matched to what it is about, so
   the row reads as six different subjects and not six copies. */
.splash-feat:nth-child(1) { --fc-tint: rgba(20, 184, 166, .16); --fc-line: rgba(13, 148, 136, .34); --fc-ink: #0f766e; } /* waterlogging */
.splash-feat:nth-child(2) { --fc-tint: rgba(220, 38, 38, .13);  --fc-line: rgba(185, 28, 28, .32); --fc-ink: #b91c1c; } /* mosquitoes */
.splash-feat:nth-child(3) { --fc-tint: rgba(234, 88, 12, .15);  --fc-line: rgba(194, 65, 12, .32); --fc-ink: #c2410c; } /* waste */
.splash-feat:nth-child(4) { --fc-tint: rgba(22, 163, 74, .15);  --fc-line: rgba(21, 128, 61, .34); --fc-ink: #15803d; } /* map */
.splash-feat:nth-child(5) { --fc-tint: rgba(2, 132, 199, .15);  --fc-line: rgba(3, 105, 161, .34); --fc-ink: #0369a1; } /* learn */
.splash-feat:nth-child(6) { --fc-tint: rgba(202, 138, 4, .17);  --fc-line: rgba(161, 98, 7, .34);  --fc-ink: #a16207; } /* points */
.splash-feat {
  border-color: var(--fc-line);
  background-image: radial-gradient(125% 95% at 10% -6%, var(--fc-tint), transparent 64%);
}
.splash-feat:hover {
  border-color: var(--fc-line);
  background: rgba(255, 255, 255, .98) radial-gradient(125% 95% at 10% -6%, var(--fc-tint), transparent 64%);
}
.splash-inner {
  background: rgba(255, 255, 255, .46);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 18px 60px rgba(12, 56, 38, .13), 0 0 0 1px rgba(255, 255, 255, .55);
  animation: splashIn .8s cubic-bezier(.2, .8, .3, 1) both, cardFloat 9s ease-in-out 1s infinite;
}
.splash-inner::before { display: none; }
/* The branded half of the sign-in card keeps its green, but picks up the same
   garden light as the rest of the page. */
.auth-left::before {
  background:
    radial-gradient(circle at 76% 10%, rgba(253, 230, 138, .26), transparent 56%),
    radial-gradient(circle at 16% 84%, rgba(94, 234, 212, .18), transparent 54%);
}
/* A breath short enough that the type never drifts while you are reading it. */
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
html.reduce-motion .splash-inner { animation: none !important; }

/* ---------- 11b. WELCOME PAGE — PROFESSIONAL PASS ---------------------
   The panel used to lean on oversized emoji, deep bounces and 900-weight type
   everywhere, which read as a game rather than as a civic product. It keeps
   the garden behind it, but the surface now carries its hierarchy through size
   and spacing, uses real iconography, and moves in millimetres. */

/* Headings set as an eyebrow → title → standfirst stack instead of four
   things all shouting at the same weight. */
.splash-kicker { font-size: 0.74rem; letter-spacing: .3em; font-weight: 800; color: #0f766e; margin-bottom: 10px; text-shadow: none; }
.splash-title { font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.35rem); margin-bottom: 10px; text-shadow: none; }
.splash-title span { animation: fadeInUp .55s var(--ease-out) both; }
.splash-title span:nth-of-type(2) { animation-delay: .08s; }
.splash-motto {
  margin: -2px auto 14px; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; color: #0f766e;
}
.splash-motto span { color: #94a3b8; }
.splash-tag { font-size: .96rem; line-height: 1.7; font-weight: 450; color: #334155; max-width: 620px; text-shadow: none; }
/* The typing caret was a leftover from an effect that never ran; it just made
   the standfirst look broken. */
.splash-tag::after { content: none; }
.splash-rotator { gap: 8px; font-size: .88rem; font-weight: 600; color: #334155; margin-bottom: 22px; }
.splash-rot-static { font-weight: 700; color: #166534; }
.splash-word-wrap b { color: #0f766e; font-weight: 800; font-size: .92rem; }

/* Feature cards: a tinted icon disc in place of a 3.5rem floating emoji. */
.sf-ico {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
  font-size: 1.15rem; color: var(--fc-ink); background: var(--fc-tint);
  border: 1px solid var(--fc-line); animation: none; filter: none;
  transition: transform .28s var(--ease-out), box-shadow .28s;
}
.splash-feat {
  gap: 12px; padding: 22px 16px 20px; border-width: 1px; border-radius: 14px;
  background: rgba(255, 255, 255, .72); box-shadow: 0 2px 10px rgba(12, 56, 38, .06);
}
.splash-feat::before { display: none; }
.splash-feat::after { border-width: 1px; border-radius: 14px; border-color: var(--fc-line); }
.splash-feat:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(12, 56, 38, .13); }
.splash-feat:hover .sf-ico { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(12, 56, 38, .12); }
.splash-features { gap: 14px; margin: 26px 0 22px; }
.sf-name { font-size: .98rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 4px; text-shadow: none; }
.sf-hint { font-size: .8rem; line-height: 1.55; font-weight: 450; color: #4b5563; max-width: 100%; }

/* Counters: the number leads, the label sits under it, and the accent moves
   from a bar floating below the card to a rule along its top edge. */
.splash-stats { gap: 14px; margin: 26px 0; }
.stat-item {
  min-width: 150px; padding: 15px 22px 14px; border-radius: 12px; border-width: 1px;
  border-color: rgba(12, 56, 38, .12); background: rgba(255, 255, 255, .74);
  box-shadow: 0 2px 10px rgba(12, 56, 38, .05);
}
.stat-item::after {
  top: 0; bottom: auto; left: 0; transform: none; width: 100%; height: 3px;
  border-radius: 12px 12px 0 0; background: var(--accent-grad); box-shadow: none;
}
.stat-num { font-size: 1.95rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 4px; color: #15803d; text-shadow: none; }
.stat-label { font-size: 0.74rem; letter-spacing: .09em; font-weight: 700; color: #4b5563; }

/* Trust marks as quiet pills rather than six chunky chips. */
.splash-badges { gap: 8px; margin: 22px 0; }
.splash-badge {
  gap: 8px; padding: 8px 14px; border-radius: 999px; border-width: 1px;
  border-color: rgba(12, 56, 38, .14); background: rgba(255, 255, 255, .7);
  font-size: .74rem; font-weight: 700; color: #166534; box-shadow: none;
}
.splash-badge i { font-size: .8rem; color: var(--accent); }
.splash-badge:hover {
  transform: translateY(-2px); background: rgba(255, 255, 255, .94);
  border-color: rgba(21, 128, 61, .32); box-shadow: 0 6px 16px rgba(12, 56, 38, .1);
}

.splash-feat-copy { font-size: .84rem; line-height: 1.6; color: #475569; max-width: 560px; margin: 0 auto 22px; }

/* One clear primary action, no idle pulse competing with the falling garden. */
.splash-enter {
  gap: 10px; padding: 15px 34px; border-radius: 12px; font-size: 1rem; font-weight: 800;
  letter-spacing: .01em; box-shadow: 0 8px 22px rgba(21, 128, 61, .26);
  animation: fadeInUp .5s var(--ease-out) .9s both;
}
.splash-enter:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(21, 128, 61, .32); }
.splash-enter:active { transform: translateY(0); }
.splash-hint { margin-top: 14px; font-size: .74rem; color: #64748b; }
.splash-hint kbd {
  padding: 3px 8px; border: 1px solid rgba(12, 56, 38, .16); border-radius: 6px;
  background: rgba(255, 255, 255, .8); font-size: 0.74rem; font-weight: 700; color: #475569; box-shadow: none;
}

/* The ring is decoration, not a progress bar — a short arc on a slow turn
   reads as a seal rather than as something the visitor is waiting on. */
.splash-ring .ring-track { stroke: rgba(12, 56, 38, .1); }
.splash-ring .ring-spin { stroke-dasharray: 56 400; animation-duration: 6s; opacity: .85; }

@media (max-width: 900px) { .splash-stats { gap: 10px; } .stat-item { min-width: 132px; padding: 13px 16px 12px; } }
@media (max-width: 640px) {
  .splash-features { gap: 10px; margin: 20px auto; }
  .splash-feat { gap: 10px; padding: 18px 16px; }
  .sf-ico { width: 40px; height: 40px; border-radius: 11px; font-size: 1rem; }
  .splash-badge span { display: none; }
  .splash-badge { padding: 9px; }
  .stat-num { font-size: 1.6rem; }
}

/* ---------- 10. LEARN & TIPS STRUCTURE --------------------------------
   The widgets were readable in logic but messy on screen: 120px flip cards
   clipped the fact text, lifecycle pills squeezed three lines, and labels
   used tracking that made words look jammed. These rules sit last so they
   win over enhance.css without rewriting the widgets. */
.learn-cats { gap: 10px; margin-bottom: 22px; }
.learn-cat {
  font-family: var(--font-sans); letter-spacing: 0; line-height: 1.2;
  padding: 10px 16px; font-size: .82rem;
}
.learn-lead, .learn-panel p, .accordion-body {
  font-family: var(--font-sans); letter-spacing: 0; word-spacing: .01em;
  line-height: 1.7; font-size: .92rem;
}
.learn-panel .card-title { letter-spacing: -.02em; margin-bottom: 10px; }
.tip-rotator-text { letter-spacing: 0; word-spacing: .02em; line-height: 1.6; font-size: .9rem; }
.tip-rotator-label { letter-spacing: .08em; }

.flip-card { height: 210px; overflow: hidden; }
.flip-inner { height: 100%; }
.flip-face { padding: 16px 18px; justify-content: flex-start; }
.flip-card p {
  font-size: .84rem; line-height: 1.55; letter-spacing: 0;
  color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 6;
  -webkit-box-orient: vertical; overflow: hidden;
}
.flip-back p { color: var(--text-primary); }

.lc-node {
  border-radius: 16px; padding: 14px 10px; min-height: 108px;
  letter-spacing: 0; line-height: 1.25;
}
.lc-name { font-family: var(--font-display); font-size: .86rem; letter-spacing: 0; }
.lc-day { letter-spacing: 0; }
.lc-detail { text-align: left; line-height: 1.65; }
.lc-detail p { text-align: left; }

.dl-name { letter-spacing: .04em; }
.depth-info p, .di-tips, .bin-label, .bin-hint, .si-name, .judge-scenario, .judge-opt {
  letter-spacing: 0; line-height: 1.55;
}
.depth-header h3, .myths-header h3, .lifecycle-header h3, .spotter-header h3 {
  font-family: var(--font-display); letter-spacing: -.02em; line-height: 1.25;
}
.depth-header p, .myths-header p, .lifecycle-header p, .spotter-header p {
  letter-spacing: 0; line-height: 1.55;
}

[data-theme="dark"] .depth-scene {
  background: linear-gradient(180deg, #1e3a5f 0%, #2c5282 42%, #2b6cb0 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
[data-theme="dark"] .depth-background { background: linear-gradient(180deg, rgba(56,189,248,.12), rgba(14,165,233,.08)); }
[data-theme="dark"] .depth-marks, [data-theme="dark"] .depth-marks i { color: rgba(226,232,240,.78); }
[data-theme="dark"] .flip-front { background: var(--bg-secondary); }
[data-theme="dark"] .flip-back { background: color-mix(in srgb, var(--accent) 16%, var(--bg-secondary)); }

/* Decorative layers never intercept input; the scenery remains when motion is off. */
.nature-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; z-index: -1; }

.nature-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.nature-stage--app { position: fixed; }

/* Three nested wrappers, one animated property each: the fall drops, the
   sway drifts sideways, the spin tumbles. Together they read as wind. */
.nf-fall {
  position: absolute; top: 0; left: 0; display: block; opacity: 0;
  animation: nfFall var(--dur, 22s) linear var(--delay, 0s) infinite;
}
.nf-sway {
  display: block;
  animation: nfSway var(--sway-dur, 5s) ease-in-out var(--sway-delay, 0s) infinite alternate;
}
.nf-spin { display: block; animation: nfSpin var(--spin-dur, 9s) linear var(--spin-delay, 0s) infinite; }
.nf-art { display: block; }

@keyframes nfFall {
  0%   { transform: translate3d(0, -16vh, 0); opacity: 0; }
  7%   { opacity: min(1, calc(var(--op, .5) * var(--dim, 1) * var(--lift, 1))); }
  90%  { opacity: min(1, calc(var(--op, .5) * var(--dim, 1) * var(--lift, 1))); }
  100% { transform: translate3d(var(--dx, 6vw), 116vh, 0); opacity: 0; }
}
@keyframes nfSway {
  from { transform: translate3d(calc(var(--sway, 30px) * -1), 0, 0) rotate(-7deg); }
  to   { transform: translate3d(var(--sway, 30px), 0, 0) rotate(7deg); }
}
@keyframes nfSpin {
  from { transform: rotate(var(--tilt, 0deg)); }
  to   { transform: rotate(calc(var(--tilt, 0deg) + var(--spin, 360deg))); }
}

/* Rooted grass along the bottom edge of the welcome page and sign-in gate. */
.nature-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 420px; pointer-events: none; }
.nature-ground::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px;
  background: linear-gradient(180deg, transparent, rgba(21, 128, 61, .14) 48%, rgba(20, 83, 45, .26));
  filter: blur(5px);
}
.ng-blade, .ng-flower {
  position: absolute; bottom: -6px; display: block; transform-origin: 50% 100%;
  animation: ngSway var(--g-dur, 4s) ease-in-out var(--g-delay, 0s) infinite alternate;
}
.ng-blade svg, .ng-flower svg { display: block; }
.ng-back { bottom: -16px; opacity: .5; filter: saturate(.75); }
.ng-flower { bottom: calc(var(--g-h, 90px) - 16px); }
@keyframes ngSway {
  from { transform: scaleX(var(--g-flip, 1)) rotate(calc(var(--g-tilt, 0deg) - var(--g-amp, 5deg))); }
  to   { transform: scaleX(var(--g-flip, 1)) rotate(calc(var(--g-tilt, 0deg) + var(--g-amp, 5deg))); }
}

/* Golden pollen rising on the warm air. Small, soft, and the only motion in
   the scene that goes up, which is what stops it reading as more falling. */
.nature-pollen { position: absolute; inset: 0; pointer-events: none; }
.np-mote {
  position: absolute; bottom: -10px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 34% 30%, #fffef5, var(--p-hue, #fcd34d) 56%, rgba(251, 191, 36, 0) 74%);
  box-shadow: 0 0 9px 2px rgba(253, 224, 71, .3);
  animation: npRise var(--p-dur, 22s) linear var(--p-delay, 0s) infinite;
}
@keyframes npRise {
  0%   { transform: translate3d(0, 0, 0) scale(.5); opacity: 0; }
  12%  { opacity: var(--p-op, .5); }
  50%  { transform: translate3d(calc(var(--p-dx, 4vw) * .4), -54vh, 0) scale(1); opacity: var(--p-op, .5); }
  86%  { opacity: var(--p-op, .5); }
  100% { transform: translate3d(var(--p-dx, 4vw), -112vh, 0) scale(.6); opacity: 0; }
}

/* A handful of large blossoms drift past the reader over the content itself —
   the garden reaching into the map and the reading column, not just sitting
   behind them. This layer lives inside #appLayout, which is its own stacking
   context, so 900 keeps the drift above the map and the cards but below the
   map's own controls (999/1000), the notification panel, every dialog (2000),
   the drawer (12000) and the toasts. */
.nature-stage--front { position: fixed; z-index: 900; --dim: .55; }

/* Stop spending frames on a garden nobody is looking at. */
body.splash-open .nature-stage--app *,
body:has(.auth-gate:not(.hidden)) .nature-stage--app *,
.auth-gate.hidden .nature-stage *,
.splash.hidden .nature-stage *,
.splash.leaving .nature-stage * { animation-play-state: paused; }

/* Motion turned off used to hide the garden entirely, which left the page
   bare. The scenery is painted, not animated, so it stays; only the things
   that fall, sway and rise are stopped — and the rooted grass keeps its
   random lean instead of snapping upright. */
html.reduce-motion .nf-fall,
html.reduce-motion .nf-sway,
html.reduce-motion .nf-spin,
html.reduce-motion .np-mote { animation: none; }
html.reduce-motion .nature-ground--still .ng-blade,
html.reduce-motion .nature-ground--still .ng-flower {
  animation: none;
  transform: scaleX(var(--g-flip, 1)) rotate(var(--g-tilt, 0deg));
}
@media (prefers-reduced-motion: reduce) {
  .nf-fall, .nf-sway, .nf-spin, .np-mote { animation: none; }
  .nature-ground--still .ng-blade,
  .nature-ground--still .ng-flower {
    animation: none;
    transform: scaleX(var(--g-flip, 1)) rotate(var(--g-tilt, 0deg));
  }
}

/* ============================================================
   12b. CARD GARDENS — flowers and grass growing inside reports,
   posts and events. Built at runtime by js/nature.js (NatureFX.bloom).

   Each card gets a seeded arrangement, so no two match, and the
   whole garden sits on one decorative layer behind the content:
   nothing here can be clicked, focused or read aloud.
   ============================================================ */

/* Registering these lets the sway widen *smoothly* on hover instead of
   snapping: a keyframe re-reads the variable every frame, and a registered
   custom property is interpolatable. Where @property is unsupported the
   garden still works, it just steps on hover. */
@property --bd-amp-k { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --bd-wash-op { syntax: '<number>'; inherits: true; initial-value: 0.1; }

.bloom-host { position: relative; isolation: isolate; --bd-amp-k: 1; --bd-wash-op: .1; }
/* The garden is one layer; every real child of the card sits above it. */
.bloom-host > *:not(.bloom-decor) { position: relative; z-index: 1; }
.report-item::before { z-index: 2; }

.bloom-decor {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  border-radius: inherit; pointer-events: none; contain: layout paint;
  background:
    radial-gradient(120% 96% at 100% 104%, hsl(var(--bd-hue) / .11), transparent 58%),
    radial-gradient(92% 74% at 98% -6%, hsl(var(--bd-hue) / .07), transparent 56%);
}

/* Hovering a card stirs its garden: the sway widens, the wash brightens and
   the card picks up a shadow in its own flower's colour. */
.bloom-host { transition: --bd-amp-k .5s ease, --bd-wash-op .5s ease, border-color .25s ease, box-shadow .25s ease; }
.bloom-host:hover, .bloom-host:focus-within { --bd-amp-k: 2.2; --bd-wash-op: .2; }
.bloom-host:hover { border-color: hsl(var(--bd-hue) / .5); box-shadow: 0 12px 30px -14px hsl(var(--bd-hue) / .5), var(--shadow-md); }

/* ---------- wash of light + watermark bloom ---------- */
.bd-wash {
  position: absolute; left: var(--bd-wash-x, 72%); top: var(--bd-wash-y, 46%);
  width: var(--bd-wash-s, 100px); height: var(--bd-wash-s, 100px);
  transform: translate(-50%, -50%) rotate(var(--bd-tilt, 0deg));
  opacity: var(--bd-wash-op, .1);
  transition: opacity .4s ease;
}
.bd-wash::before {
  content: ''; position: absolute; inset: -34%; border-radius: 50%;
  background: radial-gradient(circle, hsl(var(--bd-hue) / .3), hsl(var(--bd-hue) / 0) 68%);
  animation: bdPulse 7.5s ease-in-out infinite alternate;
}
.bd-wash svg { display: block; width: 100%; height: 100%; animation: bdTurn var(--bd-turn-dur, 80s) linear infinite; }
@keyframes bdTurn { from { transform: rotate(0deg); } to { transform: rotate(var(--bd-turn, 60deg)); } }
@keyframes bdPulse { from { opacity: .45; transform: scale(.9); } to { opacity: 1; transform: scale(1.12); } }

/* ---------- sprig: stem, leaves and blooms rooted in a corner ---------- */
.bd-sprig { position: absolute; width: 0; height: 0; bottom: -2px; opacity: 0; transform-origin: 50% 100%; }
.bd-br { right: var(--bd-inset, 22px); }
.bd-bl { left: var(--bd-inset, 22px); }
.bd-bc { left: 46%; }
.bd-in .bd-sprig { animation: bdGrow .88s cubic-bezier(.16, 1.14, .3, 1) var(--bd-d, 0s) both; }
@keyframes bdGrow {
  0%   { opacity: 0; transform: translate(var(--bd-nx, 0px), calc(var(--bd-ny, 0px) + 14px)) rotate(calc(var(--bd-rot, 0deg) - 26deg)) scaleX(var(--bd-sflip, 1)) scale(.15); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translate(var(--bd-nx, 0px), var(--bd-ny, 0px)) rotate(var(--bd-rot, 0deg)) scaleX(var(--bd-sflip, 1)) scale(var(--bd-ms, 1)); }
}

.bd-stem, .bd-leaf { position: absolute; bottom: 0; left: 50%; display: block; transform-origin: 50% 100%; }
.bd-stem { animation: bdSway var(--bd-sway-dur, 4.4s) ease-in-out var(--bd-sway-del, 0s) infinite alternate; }
.bd-leaf {
  bottom: var(--bd-lh, 18px); left: calc(50% + var(--bd-lx, 0px));
  animation: bdSwayLeaf var(--bd-sway-dur, 5s) ease-in-out var(--bd-sway-del, 0s) infinite alternate;
}
.bd-stem svg, .bd-leaf svg, .bd-bloom svg, .bd-blade svg, .bd-fringe-bloom svg { display: block; }

/* One shared sway, with the amplitude multiplied by --bd-amp-k so a hover
   leans the whole sprig further over without restarting the animation. */
@keyframes bdSway {
  from { transform: translateX(-50%) rotate(calc(var(--bd-tilt, 0deg) - var(--bd-amp, 4deg) * var(--bd-amp-k, 1))); }
  to   { transform: translateX(-50%) rotate(calc(var(--bd-tilt, 0deg) + var(--bd-amp, 4deg) * var(--bd-amp-k, 1))); }
}
@keyframes bdSwayLeaf {
  from { transform: translateX(-50%) scaleX(var(--bd-lflip, 1)) rotate(calc(var(--bd-lrot, 0deg) - var(--bd-amp, 5deg) * var(--bd-amp-k, 1))); }
  to   { transform: translateX(-50%) scaleX(var(--bd-lflip, 1)) rotate(calc(var(--bd-lrot, 0deg) + var(--bd-amp, 5deg) * var(--bd-amp-k, 1))); }
}

.bd-bloom {
  position: absolute; bottom: var(--bd-by, 24px); left: calc(50% + var(--bd-bx, 0px));
  display: block; transform-origin: 50% 88%; opacity: 0;
  animation: bdBreathe var(--bd-breath, 5s) ease-in-out var(--bd-breath-del, 0s) infinite,
             bdPop .7s cubic-bezier(.2, 1.3, .35, 1) var(--bd-d, 0s) both;
}
.bd-bloom > svg { animation: bdTurn var(--bd-turn-dur, 30s) linear infinite; transform-origin: 50% 50%; }
@keyframes bdBreathe {
  0%, 100% { transform: translateX(-50%) rotate(var(--bd-tilt, 0deg)) scale(1); }
  50%      { transform: translateX(-50%) rotate(var(--bd-tilt, 0deg)) scale(calc(1 + .085 * var(--bd-amp-k, 1))); }
}
/* Two animations both write transform, so the pop runs on a wrapper-free
   element via opacity+filter and lets bdBreathe own the transform. */
@keyframes bdPop { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: blur(0); } }

/* ---------- grass fringe along the bottom edge ---------- */
.bd-fringe { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; opacity: 0; transform-origin: 50% 100%; }
.bd-fringe::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 16px;
  background: linear-gradient(180deg, transparent, hsl(var(--bd-hue) / .12));
  filter: blur(4px);
}
.bd-in .bd-fringe { animation: bdRise .95s cubic-bezier(.16, 1.1, .3, 1) .08s both; }
@keyframes bdRise { from { opacity: 0; transform: scaleY(.12); } to { opacity: 1; transform: scaleY(1); } }

.bd-blade {
  position: absolute; bottom: -3px; display: block; transform-origin: 50% 100%;
  animation: bdSwayBlade var(--bd-sway-dur, 4.2s) ease-in-out var(--bd-sway-del, 0s) infinite alternate;
}
.bd-back { bottom: -8px; opacity: .5; filter: saturate(.72); }
@keyframes bdSwayBlade {
  from { transform: translateX(-50%) scaleX(var(--bd-flip, 1)) rotate(calc(var(--bd-tilt, 0deg) - var(--bd-amp, 5deg) * var(--bd-amp-k, 1))); }
  to   { transform: translateX(-50%) scaleX(var(--bd-flip, 1)) rotate(calc(var(--bd-tilt, 0deg) + var(--bd-amp, 5deg) * var(--bd-amp-k, 1))); }
}
.bd-fringe-bloom {
  position: absolute; bottom: var(--bd-by, 20px); display: block; transform-origin: 50% 88%;
  animation: bdSwayBloom var(--bd-sway-dur, 4.6s) ease-in-out var(--bd-sway-del, 0s) infinite alternate;
}
@keyframes bdSwayBloom {
  from { transform: translateX(-50%) rotate(calc(var(--bd-tilt, 0deg) - var(--bd-amp, 5deg) * var(--bd-amp-k, 1))) scale(.96); }
  to   { transform: translateX(-50%) rotate(calc(var(--bd-tilt, 0deg) + var(--bd-amp, 5deg) * var(--bd-amp-k, 1))) scale(1.05); }
}

/* ---------- petals drifting across the card ---------- */
.bd-air { position: absolute; inset: 0; }
.bd-mote { position: absolute; display: block; opacity: 0; will-change: transform, opacity;
  animation: bdDrift var(--bd-dur, 16s) linear var(--bd-del, 0s) infinite; }
.bd-mote-spin { display: block; transform: rotate(var(--bd-tilt, 0deg)); }
.bd-mote-spin > svg { animation: bdTurn var(--bd-turn-dur, 10s) linear var(--bd-del, 0s) infinite; }
@keyframes bdDrift {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  14%  { opacity: var(--bd-op, .45); }
  84%  { opacity: var(--bd-op, .45); }
  100% { transform: translate3d(var(--bd-dx, 20px), var(--bd-dy, 90px), 0); opacity: 0; }
}

/* ---------- pollen sparkling in the wash ---------- */
.bd-sparks { position: absolute; inset: 0; }
.bd-spark {
  position: absolute; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 34% 30%, #fffdf2, hsl(var(--bd-hue) / .95) 56%, hsl(var(--bd-hue) / 0) 76%);
  box-shadow: 0 0 7px 1px hsl(var(--bd-hue) / .38);
  animation: bdTwinkle var(--bd-dur, 5s) ease-in-out var(--bd-del, 0s) infinite;
}
@keyframes bdTwinkle {
  0%, 100% { opacity: .1; transform: translate(0, 0) scale(.6); }
  50%      { opacity: .9; transform: translate(var(--bd-drift, 6px), -9px) scale(1.2); }
}

/* ---------- hover: a sheen sweeps and the sprig sheds petals ---------- */
.bd-sheen {
  position: absolute; top: -40%; bottom: -40%; left: 0; width: 34%; opacity: 0;
  transform: translateX(-170%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, hsl(var(--bd-hue) / .2), rgba(255, 255, 255, .62) 46%, hsl(var(--bd-hue) / .18), transparent);
  will-change: transform, opacity;
}
.bloom-host:hover .bd-sheen { animation: bdSheen 1s cubic-bezier(.3, .7, .3, 1); }
@keyframes bdSheen {
  0%   { transform: translateX(-170%) skewX(-18deg); opacity: 0; }
  16%  { opacity: 1; }
  100% { transform: translateX(430%) skewX(-18deg); opacity: 0; }
}

.bd-gust { position: absolute; inset: 0; }
.bd-gust-petal { position: absolute; top: -8%; left: var(--bd-gx, 70%); opacity: 0; }
.bloom-host:hover .bd-gust-petal { animation: bdShed var(--bd-dur, 2s) cubic-bezier(.28, .68, .4, 1) var(--bd-del, 0s) both; }
@keyframes bdShed {
  0%   { transform: translate(0, 0) rotate(0deg) scale(.7); opacity: 0; }
  18%  { opacity: .9; }
  100% { transform: translate(var(--bd-dx, -40px), var(--bd-dy, 70px)) rotate(var(--bd-turn, 400deg)) scale(1); opacity: 0; }
}

/* Cards that have scrolled away stop spending frames; cards not yet revealed
   stay bare so a long feed never builds a hundred gardens at once. */
.bd-off .bloom-decor, .bd-off .bloom-decor * { animation-play-state: paused; }

/* ---------- reduced motion: keep the garden, drop the movement ---------- */
html.reduce-motion .bloom-decor *,
html.reduce-motion .bloom-decor { animation: none !important; }
html.reduce-motion .bd-sprig {
  opacity: 1;
  transform: translate(var(--bd-nx, 0px), var(--bd-ny, 0px)) rotate(var(--bd-rot, 0deg)) scaleX(var(--bd-sflip, 1)) scale(var(--bd-ms, 1));
}
html.reduce-motion .bd-bloom { opacity: 1; filter: none; transform: translateX(-50%) rotate(var(--bd-tilt, 0deg)); }
html.reduce-motion .bd-fringe { opacity: 1; transform: none; }
html.reduce-motion .bd-wash { opacity: .12; }
html.reduce-motion .bloom-host:hover { --bd-amp-k: 1; }
@media (prefers-reduced-motion: reduce) {
  .bloom-decor, .bloom-decor * { animation: none !important; }
  .bd-sprig {
    opacity: 1;
    transform: translate(var(--bd-nx, 0px), var(--bd-ny, 0px)) rotate(var(--bd-rot, 0deg)) scaleX(var(--bd-sflip, 1)) scale(var(--bd-ms, 1));
  }
  .bd-bloom { opacity: 1; filter: none; transform: translateX(-50%) rotate(var(--bd-tilt, 0deg)); }
  .bd-fringe { opacity: 1; transform: none; }
  .bd-wash { opacity: .12; }
  .bloom-host:hover { --bd-amp-k: 1; }
}

/* Small screens: keep the sprig out of the way of the text. */
@media (max-width: 640px) {
  .bd-sprig { --bd-ms: .82; }
  .bd-wash { opacity: calc(var(--bd-wash-op, .1) * .7); }
  .bd-bc { left: 52%; }
}

/* Let the garden show through the app. The page background becomes a soft
   floral light, the reading column turns to frosted glass, and the cards on
   top of it stay nearly solid so text keeps its contrast. */
body {
  background:
    radial-gradient(78% 58% at 6% 2%, rgba(224, 242, 254, .9), transparent 62%),
    radial-gradient(66% 52% at 98% 10%, rgba(254, 243, 199, .85), transparent 60%),
    radial-gradient(60% 46% at 88% 88%, rgba(226, 232, 240, .72), transparent 62%),
    radial-gradient(92% 66% at 46% 112%, rgba(220, 252, 231, .95), transparent 68%),
    linear-gradient(180deg, #fbfdfe 0%, #f7faf8 50%, #f1f8f1 100%);
  background-attachment: fixed;
}
[data-theme="dark"] body {
  background:
    radial-gradient(70% 52% at 8% 4%, rgba(30, 58, 138, .28), transparent 62%),
    radial-gradient(60% 48% at 96% 12%, rgba(120, 53, 15, .24), transparent 60%),
    radial-gradient(88% 62% at 46% 112%, rgba(6, 78, 59, .30), transparent 68%),
    linear-gradient(180deg, #0a0c10 0%, #0b0f14 50%, #0a1014 100%);
  background-attachment: fixed;
}

.app-layout { position: relative; z-index: 1; }
.panel .card { background: rgba(255, 255, 255, .95); }
.sidebar { background: rgba(255, 255, 255, .78); }
[data-theme="dark"] .panel .card { background: rgba(24, 28, 39, .96); }
[data-theme="dark"] .sidebar { background: rgba(20, 23, 32, .88); }

/* ============================================================
   13. ADVANCED TYPE — variable axes, fluid scale, OpenType
   ============================================================ */

/* Metric-matched stand-ins: the page keeps its shape while the real faces
   download, so nothing jumps when they land. */
@font-face {
  font-family: 'PJS Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 101%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Outfit Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 105%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Bangla Fallback';
  src: local('Nirmala UI'), local('Bangla MN'), local('Noto Sans Bengali'), local('Arial');
  size-adjust: 100%; ascent-override: 100%; descent-override: 34%; line-gap-override: 0%;
}

:root {
  --font-sans: 'Plus Jakarta Sans', 'PJS Fallback', 'Hind Siliguri', 'Bangla Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', 'Outfit Fallback', 'Anek Bangla', 'Bangla Fallback', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-bn: 'Anek Bangla', 'Bangla Fallback', 'Hind Siliguri', 'Outfit', sans-serif;

  /* One fluid token per step, so headings breathe with the viewport. */
  --step--1: clamp(.81rem, .78rem + .16vw, .90rem);
  --step-0: clamp(.92rem, .88rem + .20vw, 1.02rem);
  --step-1: clamp(1.05rem, .99rem + .30vw, 1.22rem);
  --step-2: clamp(1.22rem, 1.12rem + .50vw, 1.50rem);
  --step-3: clamp(1.45rem, 1.28rem + .86vw, 1.96rem);
  --step-5: clamp(2.15rem, 1.58rem + 2.80vw, 3.75rem);

  --track-tight: -.028em;
  --track-snug: -.011em;
}

/* Pin the root at the standard 16px baseline and stop mobile browsers from
   auto-shrinking text — everything rem-based derives from this. */
html { font-size: 16px; font-optical-sizing: auto; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  font-variant-ligatures: common-ligatures contextual;
  letter-spacing: var(--track-snug);
  hanging-punctuation: first allow-end;
}

/* Headings get tighter tracking and balanced line ends; prose gets "pretty"
   wrapping so the last line of a paragraph is never a single orphan word. */
h1, h2, h3, h4, .page-title, .card-title, .about-section-title, .auth-hero h1,
.splash-title, .splash-bn span, .celeb-name, .rf-hero-title {
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}
p, li, .learn-lead, .accordion-body, .splash-tag, .sf-hint { text-wrap: pretty; }

/* Every number on screen is tabular: digits keep a fixed width, so a counter
   ticking upward no longer wobbles the layout around it. */
.stat-num, .fact-num, .qc-num, .profile-stat-value, .about-stat-value,
[data-count], [data-target], .nav-badge, .af-mono {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* Fluid steps on the display sizes. */
.sf-hint { font-size: var(--step--1); }
.card-title { font-size: var(--step-0); }
.page-title { font-size: var(--step-1); }
.about-section-title { font-size: var(--step-2); }
.auth-hero h1 { font-size: var(--step-3); }
.splash-title { font-size: var(--step-5); }

/* Variable-weight morph: these faces ship a weight axis, so the weight can
   glide on hover instead of snapping between two static cuts. */
@supports (font-variation-settings: normal) {
  .nav-item, .tab, .comm-tab, .sidebar-welcome, .af-btn {
    transition: font-variation-settings .32s var(--ease-out), color .2s, background-color .2s,
      border-color .2s, transform .2s, box-shadow .25s;
  }
  .nav-item { font-variation-settings: 'wght' 500; }
  .nav-item:hover { font-variation-settings: 'wght' 700; }
  .nav-item.active { font-variation-settings: 'wght' 780; }
  .tab, .comm-tab { font-variation-settings: 'wght' 600; }
  .tab:hover, .comm-tab:hover { font-variation-settings: 'wght' 740; }
  .tab.active, .comm-tab.active { font-variation-settings: 'wght' 800; }
  .sidebar-welcome, .af-btn { font-variation-settings: 'wght' 700; }
  .sidebar-welcome:hover, .af-btn:hover { font-variation-settings: 'wght' 820; }
  /* Eyebrow labels get their weight from the axis, never a synthesised one. */
  .nav-label, .af-kicker, .points-card-title { font-variation-settings: 'wght' 780; }

  /* Anek Bangla carries a width axis too — open it up a little so Bengali
     display type does not look cramped next to the Latin faces. */
  .splash-bn span, [lang="bn"] h1, [lang="bn"] h2, [lang="bn"] h3, html[lang="bn"] .page-title {
    font-variation-settings: 'wdth' 108, 'wght' 700;
  }
}

/* Bengali prose needs a touch more air than Latin. */
html[lang="bn"] body { line-height: 1.78; letter-spacing: 0; word-spacing: .04em; }
.splash-bn, [lang="bn"] { font-feature-settings: 'kern' 1, 'liga' 1, 'clig' 1, 'pres' 1, 'psts' 1; }

/* A slow sheen travelling through the brand gradient. */
.logo-text h1 {
  background: linear-gradient(110deg, #006a4e 0%, #00a878 34%, #5eead4 48%, #00a878 62%, #006a4e 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: typeSheen 11s linear infinite;
}
/* "Janao" wears the garden's own colours — leaf green through marigold gold
   to river blue — with sunlight sweeping slowly across them. */
.splash-title .accent {
  background: linear-gradient(110deg, #15803d 0%, #ca8a04 28%, #fef3c7 46%, #f59e0b 60%, #0369a1 82%, #15803d 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(202, 138, 4, .16));
  animation: typeSheen 9s linear infinite;
}
[data-theme="dark"] .splash-title .accent {
  background: linear-gradient(110deg, #4ade80 0%, #fde047 30%, #fffbeb 46%, #fbbf24 62%, #7dd3fc 84%, #4ade80 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
}
@keyframes typeSheen { from { background-position: 180% 0; } to { background-position: -60% 0; } }
html.reduce-motion .logo-text h1, html.reduce-motion .splash-title .accent { animation: none; }

/* The phone bottom bar is z-index 11000, above the old sign-in layer, so the
   Create Account button slid underneath it. Taps hit Dashboard instead of
   submitting, and the taller form looked like the card was growing. */
.auth-gate { z-index: 12100; }
#legalModal { z-index: 12200; }
.auth-grid-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.auth-grid-2 > .auth-input-group:nth-child(n+3) { grid-column: 1 / -1; }
/* The eye icon sits inside the field. A broad rule was pulling it out to the edge. */
.password-toggle i { position: static; left: auto; top: auto; transform: none; }
.auth-input-wrap:has(.password-toggle) .auth-input { padding-right: 42px; }
/* Keep the green submit button one height. Ripples must not join the layout. */
.auth-submit { min-height: 48px; max-height: 52px; flex-shrink: 0; }
.auth-submit > .ripple { position: absolute; z-index: 2; pointer-events: none; margin: 0; }
@media (max-width: 768px) {
  .auth-gate { padding: 10px; align-items: stretch; }
  .auth-container {
    flex: 1 1 auto; width: min(100%, 520px); height: auto;
    max-height: 100%; min-height: 0; margin: 0 auto; overflow: hidden;
  }
  .auth-left { flex: none; padding: 18px 18px 8px; }
  .auth-right {
    flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto;
    justify-content: flex-start; padding: 16px 18px 24px;
  }
  .auth-grid-2 { grid-template-columns: 1fr; }
  .auth-form .auth-subtitle { margin-bottom: 14px; }
  .auth-input-group { margin-bottom: 12px; }
}

/* ---------- 12. TEXT VISIBILITY ----------------------------------------
   Secondary and muted text were a few shades too pale on both themes.
   Same hierarchy (primary > secondary > muted), more contrast. */
:root {
  --text-primary: #10131a;
  --text-secondary: #2f343f;
  --text-muted: #4b515d;
  --border: #d3d9e1;
}
[data-theme="dark"] {
  --text-primary: #f8f9fb;
  --text-secondary: #d6dae2;
  --text-muted: #b0b5c0;
  --border: #363b47;
}
p, li, .learn-lead, .accordion-body { font-size: .95rem; }
.form-input::placeholder, .auth-input::placeholder { opacity: 1; }
/* the compact icon rail (769–1180px) hides its labels with font-size:0, so keep that */
@media (min-width: 1181px), (max-width: 768px) { .nav-item { font-size: .9rem; } }
.nav-label { color: var(--text-secondary); }
.auth-input-group label, .form-label { color: var(--text-secondary); }

/* ---------- 13. WELCOME PAGE — BRAND LOCKUP ----------------------------
   No panel behind the writing: it sits straight on the scenery.
   Colours come from the scenery itself —
     title    "Ekhoni" = sky blue -> teal,  "Janao" = teal -> leaf/grass green
     tagline  warm marigold gold -> amber (the sun side of the sky), so it reads
              as its own line instead of repeating the title's blues and greens. */
/* A transparent frosted cover: the scenery still shows through, the writing sits clear of it. */
.splash-inner {
  background: rgba(255, 255, 255, .44);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .65); border-radius: 28px;
  box-shadow: 0 18px 50px rgba(12, 74, 110, .12), inset 0 1px 0 rgba(255, 255, 255, .7);
  animation: splashIn .8s cubic-bezier(.2, .8, .3, 1) both;
}
[data-theme="dark"] .splash-inner {
  background: var(--glass-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.splash-kicker {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: .78rem; letter-spacing: .34em; font-weight: 800; color: #0a4f49; margin-bottom: 12px;
}
.splash-kicker::before, .splash-kicker::after { content: ''; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, #0f766e); }
.splash-kicker::after { transform: scaleX(-1); }

/* title */
.splash-title {
  font-size: clamp(3rem, 1.7rem + 5.2vw, 5.4rem); font-weight: 800; letter-spacing: -.035em;
  line-height: 1.02; margin: 0 0 10px; color: #0f766e; text-shadow: none;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .85)) drop-shadow(0 8px 16px rgba(12, 74, 110, .2));
}
.splash-title span, .splash-title .accent {
  display: inline-block; padding: 0 .02em .08em; color: transparent; -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; background-clip: text;
  background-size: 100% 100%; background-repeat: no-repeat;
}
.splash-title span:first-child { background-image: linear-gradient(100deg, #0a3d6b 0%, #0c5f8f 40%, #0e7490 75%, #0f766e 100%); }
.splash-title .accent {
  background-image: linear-gradient(100deg, #0f766e 0%, #15803d 45%, #3f8f1f 100%); filter: none;
  animation: fadeInUp .55s var(--ease-out) .08s both;
}

/* tagline: its own warm gold, with a hairline in the scenery's three colours */
.splash-bn { margin: 4px auto 18px; font-size: clamp(1.8rem, 1.15rem + 2.6vw, 2.9rem); font-weight: 800; }
.splash-bn span {
  padding: 0 10px 12px;
  background-image: linear-gradient(100deg, #a04a06 0%, #c2680a 38%, #d4830b 62%, #b4530a 100%);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)) drop-shadow(0 6px 12px rgba(180, 83, 9, .25));
}
.splash-bn span::after { height: 4px; background: linear-gradient(90deg, #0e7490, #15803d 52%, #f59e0b); }

/* motto: three plain coloured words, no boxes */
.splash-motto {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin: 8px auto 18px; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800;
}
.splash-motto .mw { padding: 0 2px; font-weight: 800; color: var(--mc-ink); background: none; border: 0; }
.splash-motto .mw1 { --mc-ink: #0c4a6e; }
.splash-motto .mw2 { --mc-ink: #166534; }
.splash-motto .mw3 { --mc-ink: #92400e; }
.splash-motto .dot { width: 5px; height: 5px; border-radius: 50%; background: #64748b; flex: none; }

.splash-tag { font-size: 1.07rem; line-height: 1.72; max-width: 650px; margin: 0 auto 24px; }
.splash-rotator { font-size: .98rem; }
.splash-rot-static { color: #14532d; }
.splash-word-wrap b { color: #0b6b5f; font-size: 1.02rem; }
.sf-name { font-size: 1.04rem; color: #0f172a; }
.sf-hint { font-size: .86rem; }
.stat-label { font-size: .76rem; }
.stat-num { color: #0f766e; }
.splash-badge { font-size: .8rem; color: #14532d; }
.splash-feat-copy { font-size: .9rem; }
.splash-hint { font-size: .82rem; }
.nav-arrow, .splash-skip { color: #14532d; }

/* soft halo so writing on the open scenery stays crisp */
.splash-kicker, .splash-motto, .splash-tag, .splash-rotator, .stat-num, .stat-label, .sf-name, .sf-hint,
.splash-badge, .splash-feat-copy, .splash-hint {
  text-shadow: 0 0 2px rgba(255, 255, 255, .95), 0 0 12px rgba(255, 255, 255, .9), 0 0 24px rgba(255, 255, 255, .7);
}
.splash-tag, .splash-rotator, .stat-label, .sf-hint, .splash-feat-copy { color: #111827; font-weight: 600; }
.splash-hint { color: #475569; }
.splash-stats { gap: 40px; }

.splash-enter {
  padding: 16px 40px; border-radius: 14px; font-size: 1.06rem; color: #fff;
  background: linear-gradient(120deg, #0e7490 0%, #0f766e 36%, #15803d 100%);
  box-shadow: 0 12px 30px rgba(15, 118, 110, .32); text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}
.splash-enter:hover { box-shadow: 0 18px 38px rgba(15, 118, 110, .4); }

/* ---- dark: the same lockup lifted into light tones ---- */
[data-theme="dark"] .splash-kicker { color: #99f6e4; }
[data-theme="dark"] .splash-kicker::before, [data-theme="dark"] .splash-kicker::after { background: linear-gradient(90deg, transparent, #5eead4); }
[data-theme="dark"] .splash-title { text-shadow: none; filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .55)); }
[data-theme="dark"] .splash-title span:first-child { background-image: linear-gradient(100deg, #bae6fd 0%, #7dd3fc 45%, #5eead4 100%); }
[data-theme="dark"] .splash-title .accent { background-image: linear-gradient(100deg, #5eead4 0%, #4ade80 50%, #a3e635 100%); }
[data-theme="dark"] .splash-bn span {
  background-image: linear-gradient(100deg, #fde68a 0%, #fcd34d 40%, #fbbf24 70%, #fb923c 100%);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .5));
}
[data-theme="dark"] .splash-motto .mw1 { --mc-ink: #bae6fd; }
[data-theme="dark"] .splash-motto .mw2 { --mc-ink: #bbf7d0; }
[data-theme="dark"] .splash-motto .mw3 { --mc-ink: #fde68a; }
[data-theme="dark"] .splash-motto .dot { background: #94a3b8; }
[data-theme="dark"] .splash-kicker, [data-theme="dark"] .splash-motto, [data-theme="dark"] .splash-tag,
[data-theme="dark"] .splash-rotator, [data-theme="dark"] .stat-num, [data-theme="dark"] .stat-label,
[data-theme="dark"] .sf-name, [data-theme="dark"] .sf-hint, [data-theme="dark"] .splash-badge,
[data-theme="dark"] .splash-feat-copy, [data-theme="dark"] .splash-hint {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 14px rgba(0, 0, 0, .7), 0 0 28px rgba(0, 0, 0, .5);
}
[data-theme="dark"] .splash-tag, [data-theme="dark"] .splash-rotator { color: #f4fff9; }
[data-theme="dark"] .splash-rot-static { color: #a7f3d0; }
[data-theme="dark"] .splash-word-wrap b { color: #5eead4; }
[data-theme="dark"] .splash-hint { color: #a7f3d0; }
[data-theme="dark"] .stat-num { color: #5eead4; }
[data-theme="dark"] .stat-label, [data-theme="dark"] .sf-hint, [data-theme="dark"] .splash-feat-copy { color: #e4f5ee; }
[data-theme="dark"] .sf-name { color: #f1fbf6; }
[data-theme="dark"] .splash-badge { color: #bbf7d0; }
[data-theme="dark"] .nav-arrow, [data-theme="dark"] .splash-skip { color: #a7f3d0; }

@media (max-width: 640px) {
  .splash-kicker::before, .splash-kicker::after { width: 24px; }
  .splash-motto { font-size: .72rem; gap: 8px; }
  .splash-enter { padding: 14px 28px; }
}

/* ---------- 14. WELCOME PAGE — FINISH ---------------------------------
   Everything on the welcome panel now sits in a properly bordered container:
   a hairline-bordered glass panel with a three-colour rule across its top
   edge, six colour-keyed feature cards, framed counters, outlined trust
   pills and a framed "Right now you can" line. Colours stay the scenery's:
   sky blue, leaf green, marigold gold. */
.splash-inner { padding: 44px 40px 34px; max-width: 980px; border-width: 1.5px; }
.splash-inner::before {
  content: ''; display: block; position: absolute; inset: 0 0 auto 0; height: 5px; border-radius: 28px 28px 0 0;
  background: linear-gradient(90deg, #0e7490 0%, #15803d 55%, #f59e0b 100%); pointer-events: none;
}

/* counters */
.splash-stats { gap: 16px; margin: 30px auto 24px; max-width: 760px; }
.stat-item {
  flex: 1 1 180px; max-width: 232px; min-width: 150px; padding: 20px 20px 16px; border-radius: 18px;
  background: rgba(255, 255, 255, .82); border: 1.5px solid rgba(15, 118, 110, .3);
  box-shadow: 0 6px 18px rgba(12, 74, 110, .09), inset 0 1px 0 rgba(255, 255, 255, .9);
  backdrop-filter: none; -webkit-backdrop-filter: none; overflow: hidden;
}
.stat-item::after { top: 0; bottom: auto; left: 0; width: 100%; height: 4px; border-radius: 0; background: linear-gradient(90deg, #0e7490, #15803d); }
.stat-item:nth-child(2)::after { background: linear-gradient(90deg, #15803d, #65a30d); }
.stat-item:nth-child(3)::after { background: linear-gradient(90deg, #d97706, #f59e0b); }
.stat-num { font-size: 2.3rem; color: #0f766e; text-shadow: none; }
.stat-item:nth-child(2) .stat-num { color: #15803d; }
.stat-item:nth-child(3) .stat-num { color: #b45309; }
.stat-label { text-shadow: none; color: #374151; }

/* "Right now you can" — a framed line, wide enough that the typed phrase never clips */
.splash-rotator {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px; margin: 0 auto 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .8); border: 1.5px solid rgba(15, 118, 110, .28);
  box-shadow: 0 4px 14px rgba(12, 74, 110, .08); text-shadow: none;
}
.splash-word-wrap { min-width: 380px; height: 26px; }
.splash-word-wrap b { text-shadow: none; }
.splash-rot-static { text-shadow: none; }

/* feature cards */
.splash-features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 22px 0 26px; }
.splash-feat {
  position: relative; overflow: hidden; align-items: center; text-align: center; gap: 12px;
  padding: 26px 20px 22px; border-radius: 20px; border: 1.5px solid var(--fc-line);
  background: rgba(255, 255, 255, .86) radial-gradient(125% 95% at 50% -10%, var(--fc-tint), transparent 62%);
  box-shadow: 0 6px 18px rgba(12, 56, 38, .09), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform .28s var(--ease-out), box-shadow .28s, border-color .28s;
}
.splash-feat::before {
  content: ''; display: block; position: absolute; inset: 0 0 auto 0; height: 4px; opacity: 1;
  background: var(--fc-ink); border-radius: 0;
}
.splash-feat::after { display: none; }
.splash-feat:hover {
  transform: translateY(-5px); border-color: var(--fc-ink);
  background: #fff radial-gradient(125% 95% at 50% -10%, var(--fc-tint), transparent 62%);
  box-shadow: 0 16px 34px rgba(12, 56, 38, .16);
}
.sf-ico { width: 54px; height: 54px; border-radius: 16px; font-size: 1.3rem; border-width: 1.5px; background: var(--fc-tint); }
.sf-name { font-size: 1.06rem; font-weight: 800; color: #0f172a; text-shadow: none; }
.sf-hint { font-size: .85rem; line-height: 1.6; color: #374151; text-shadow: none; font-weight: 500; }

/* trust pills */
.splash-badges { gap: 10px; margin: 6px 0 22px; }
.splash-badge {
  padding: 9px 16px; border-radius: 999px; border: 1.5px solid rgba(21, 128, 61, .3);
  background: rgba(255, 255, 255, .82); box-shadow: 0 3px 10px rgba(12, 56, 38, .06); text-shadow: none;
}
.splash-badge:nth-child(2) { border-color: rgba(14, 116, 144, .32); }
.splash-badge:nth-child(2) i { color: #0e7490; }
.splash-badge:nth-child(3) { border-color: rgba(217, 119, 6, .38); }
.splash-badge:nth-child(3) i { color: #d97706; }
.splash-badge:nth-child(4) { border-color: rgba(190, 18, 60, .28); }
.splash-badge:nth-child(4) i { color: #be123c; }

.splash-feat-copy { text-shadow: none; }
.splash-enter { padding: 17px 44px; border-radius: 14px; font-size: 1.08rem; border: 1.5px solid rgba(255, 255, 255, .45); }
.splash-hint { text-shadow: none; }
.splash-hint kbd { border-width: 1.5px; }

/* ---- dark ---- */
[data-theme="dark"] .splash-inner { border-width: 1.5px; }
[data-theme="dark"] .stat-item {
  background: var(--bg-tertiary); border-color: var(--border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .06);
}
[data-theme="dark"] .stat-num { color: #5eead4; }
[data-theme="dark"] .stat-item:nth-child(2) .stat-num { color: #86efac; }
[data-theme="dark"] .stat-item:nth-child(3) .stat-num { color: #fcd34d; }
[data-theme="dark"] .stat-label { color: var(--text-secondary); }
[data-theme="dark"] .splash-rotator { background: var(--bg-tertiary); border-color: var(--border); box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
[data-theme="dark"] .splash-feat:nth-child(1) { --fc-tint: rgba(45, 212, 191, .16); --fc-line: rgba(94, 234, 212, .4); --fc-ink: #5eead4; }
[data-theme="dark"] .splash-feat:nth-child(2) { --fc-tint: rgba(248, 113, 113, .16); --fc-line: rgba(252, 165, 165, .4); --fc-ink: #fca5a5; }
[data-theme="dark"] .splash-feat:nth-child(3) { --fc-tint: rgba(251, 146, 60, .16); --fc-line: rgba(253, 186, 116, .4); --fc-ink: #fdba74; }
[data-theme="dark"] .splash-feat:nth-child(4) { --fc-tint: rgba(74, 222, 128, .16); --fc-line: rgba(134, 239, 172, .4); --fc-ink: #86efac; }
[data-theme="dark"] .splash-feat:nth-child(5) { --fc-tint: rgba(56, 189, 248, .16); --fc-line: rgba(125, 211, 252, .4); --fc-ink: #7dd3fc; }
[data-theme="dark"] .splash-feat:nth-child(6) { --fc-tint: rgba(250, 204, 21, .15); --fc-line: rgba(253, 224, 71, .4); --fc-ink: #fde047; }
[data-theme="dark"] .splash-feat {
  background: var(--bg-tertiary);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .05);
}
[data-theme="dark"] .splash-feat:hover {
  background: var(--bg-quaternary);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .45);
}
[data-theme="dark"] .sf-name { color: var(--text-primary); }
[data-theme="dark"] .sf-hint { color: var(--text-secondary); }
[data-theme="dark"] .splash-badge { background: rgba(255, 255, 255, .07); color: #d1fae5; box-shadow: none; }
[data-theme="dark"] .splash-badge:nth-child(1) { border-color: rgba(134, 239, 172, .4); }
[data-theme="dark"] .splash-badge:nth-child(2) { border-color: rgba(125, 211, 252, .4); }
[data-theme="dark"] .splash-badge:nth-child(2) i { color: #7dd3fc; }
[data-theme="dark"] .splash-badge:nth-child(3) { border-color: rgba(252, 211, 77, .42); }
[data-theme="dark"] .splash-badge:nth-child(3) i { color: #fcd34d; }
[data-theme="dark"] .splash-badge:nth-child(4) { border-color: rgba(253, 164, 175, .4); }
[data-theme="dark"] .splash-badge:nth-child(4) i { color: #fda4af; }

@media (max-width: 860px) {
  .splash-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .splash-inner { padding: 38px 24px 28px; }
}
@media (max-width: 640px) {
  .splash-inner { padding: 34px 16px 24px; border-radius: 22px; }
  .splash-inner::before { border-radius: 22px 22px 0 0; }
  .splash-features { grid-template-columns: 1fr; max-width: 380px; margin-left: auto; margin-right: auto; }
  .splash-word-wrap { min-width: 0; width: 100%; text-align: center; }
  .splash-rotator { padding: 10px 16px; }
  .stat-item { min-width: 0; flex: 1 1 100px; padding: 16px 10px 12px; }
  .stat-num { font-size: 1.7rem; }
}

/* ---------- 15. WELCOME — SLIMMER PANEL, TALL GRASS BEHIND ------------
   The panel keeps its place and height but is narrower, so the tall grass and
   leaves standing along the bottom show at both sides and the panel sits in
   front of them. */
.splash-stage { width: min(830px, 92%); }
.splash-inner { max-width: 830px; padding: 44px 32px 34px; }
.splash-feat { padding: 22px 14px 18px; }
.splash-stats { max-width: 700px; }
.splash-title { font-size: clamp(2.3rem, 1.3rem + 3.6vw, 3.7rem); margin-bottom: 6px; }
.splash-bn { font-size: clamp(1.4rem, 1rem + 1.7vw, 2.05rem); margin: 2px auto 14px; }
.splash-bn span { padding-bottom: 9px; }
.stat-item { min-width: 130px; }
.splash-word-wrap { min-width: 300px; }

/* The main app gets the same fringe, kept low so it never crowds content. */
.nature-ground--app { height: 130px; z-index: 0; opacity: .9; }
.nature-ground--app::before { height: 36px; }
.nature-ground--app .ng-blade, .nature-ground--app .ng-flower { bottom: -4px; }

/* ---------- 16. ABOUT PAGE — LEGIBLE AND POLISHED -----------------------
   The Bangla tagline used the page accent (dark green) on a green banner and
   disappeared; the privacy panel set mid-blue text on pale blue. Everything
   here is checked against its own background, in light and dark. */
.about-hero {
  background: linear-gradient(135deg, #064e3b 0%, #0b6b52 48%, #15803d 100%);
  padding: 38px 40px 32px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 14px 38px rgba(6, 78, 59, .22);
}
.about-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, #38bdf8, #4ade80 50%, #fbbf24); pointer-events: none;
}
.about-hero h1 { color: #fff; font-size: 2.15rem; margin-bottom: 6px; text-shadow: 0 2px 14px rgba(0, 0, 0, .25); }
.about-hero p#aboutTagline, #aboutTagline {
  color: #fde68a; font-size: 1.5rem; font-weight: 800; opacity: 1; margin: 0; max-width: none;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .3);
}
.about-hero-logo { border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 10px 28px rgba(0, 0, 0, .3); }
.hero-chip { background: rgba(255, 255, 255, .14); border: 1.5px solid rgba(255, 255, 255, .45); color: #fff; font-size: .8rem; }
.about-hero-chips { margin-top: 22px; }

.about-section { margin-bottom: 34px; }
.about-section-title {
  font-size: 1.35rem; color: var(--text-primary); padding-bottom: 12px; margin-bottom: 18px;
  border-bottom: 2px solid var(--border); position: relative;
}
.about-section-title::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 74px; height: 2px;
  background: linear-gradient(90deg, #0e7490, #15803d, #f59e0b);
}
.about-section-title i {
  width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--accent); background: var(--accent-bg); border: 1.5px solid var(--accent);
}

.about-card, .about-card:hover { transform: none; }
.about-card {
  border: 1.5px solid var(--border); border-radius: 18px; padding: 28px 30px;
  box-shadow: 0 4px 16px rgba(12, 56, 38, .06); position: relative; overflow: hidden;
}
.about-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #0e7490, #15803d); }
.about-card p { font-size: .96rem; line-height: 1.8; color: var(--text-secondary); margin-bottom: 14px; }
.about-card p:last-child { margin-bottom: 0; }
.about-card ul { margin: 0; padding-left: 1.15rem; display: grid; gap: 12px; }
.about-card li { font-size: .96rem; line-height: 1.75; color: var(--text-secondary); }
.about-card p:first-child { font-size: 1.04rem; color: var(--text-primary); }
.about-card strong { color: var(--text-primary); }
.about-card em { color: var(--accent); font-style: italic; font-weight: 600; }

.about-steps { gap: 16px; margin-top: 22px; }
.about-step, .about-step:hover { transform: none; }
.about-step {
  border: 1.5px solid var(--border); border-radius: 16px; padding: 24px 18px 20px; position: relative; overflow: hidden;
  background: var(--bg-primary); box-shadow: 0 3px 10px rgba(12, 56, 38, .05);
}
.about-step::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #0e7490; }
.about-step:nth-child(2)::before { background: #15803d; }
.about-step:nth-child(3)::before { background: #d97706; }
.about-step:nth-child(4)::before { background: #7c3aed; }
.about-step:hover { border-color: var(--accent); box-shadow: 0 8px 22px rgba(12, 56, 38, .12); }
.about-step-number { width: 44px; height: 44px; font-size: 1.15rem; box-shadow: 0 4px 12px rgba(6, 78, 59, .28); }
.about-step h4 { font-size: 1.02rem; color: var(--text-primary); margin-bottom: 8px; }
.about-step p { font-size: .88rem; line-height: 1.65; color: var(--text-secondary); }

.about-privacy {
  background: var(--bg-secondary); border: 1.5px solid rgba(14, 116, 144, .4); border-radius: 18px; padding: 28px 30px;
  margin-top: 0; box-shadow: 0 4px 16px rgba(12, 74, 110, .07); position: relative; overflow: hidden;
}
.about-privacy::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #0e7490, #38bdf8); }
.about-privacy h3 { color: #0e7490; font-size: 1.12rem; margin-bottom: 12px; }
.about-privacy p { font-size: .96rem; line-height: 1.75; color: var(--text-secondary); }
.about-privacy li { font-size: .93rem; line-height: 1.65; color: var(--text-secondary); padding: 10px 0 10px 36px; display: block; position: relative; border-bottom: 1px solid var(--border); }
.about-privacy li:last-child { border-bottom: 0; }
.about-privacy li strong { color: var(--text-primary); }
.about-privacy li::before {
  content: '✓'; position: absolute; left: 0; top: 11px; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: .74rem;
  color: #fff; background: #0e7490;
}
.trust-badge { border: 1.5px solid var(--border); border-radius: 14px; font-size: .84rem; color: var(--text-primary); background: var(--bg-primary); }
.trust-badge i { color: #0e7490; }
.privacy-actions .btn { font-size: .88rem; }

.about-stats { gap: 16px; margin-top: 0; }
.about-stat {
  border: 1.5px solid var(--border); border-radius: 16px; padding: 24px 16px 20px; position: relative; overflow: hidden;
  background: var(--bg-secondary); box-shadow: 0 3px 10px rgba(12, 56, 38, .05);
}
.about-stat::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #0e7490; }
.about-stat:nth-child(2)::before { background: #15803d; }
.about-stat:nth-child(3)::before { background: #d97706; }
.about-stat:nth-child(4)::before { background: #7c3aed; }
.about-stat-value { font-size: 2.3rem; color: var(--text-primary); }
.about-stat:nth-child(1) .about-stat-value { color: #0e7490; }
.about-stat:nth-child(2) .about-stat-value { color: #15803d; }
.about-stat:nth-child(3) .about-stat-value { color: #b45309; }
.about-stat:nth-child(4) .about-stat-value { color: #6d28d9; }
.about-stat-label { font-size: .8rem; color: var(--text-secondary); letter-spacing: .06em; font-weight: 700; }

.about-cta {
  background: linear-gradient(135deg, #064e3b 0%, #0b6b52 55%, #15803d 100%); border-radius: 20px;
  padding: 38px 32px; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 14px 38px rgba(6, 78, 59, .22);
}
.about-cta::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #38bdf8, #4ade80 50%, #fbbf24); }
.about-cta h3 { color: #fff; font-size: 1.5rem; }
.about-cta p { color: #ecfdf5; font-size: 1rem; opacity: 1; }
.about-cta .btn { color: #064e3b !important; background: #fff !important; font-weight: 800; border: 2px solid #fde68a; padding: 13px 28px; }

/* dark */
[data-theme="dark"] .about-hero { background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary)); border-color: var(--border); box-shadow: var(--shadow-lg); }
[data-theme="dark"] .about-card, [data-theme="dark"] .about-privacy, [data-theme="dark"] .about-stat { box-shadow: 0 4px 16px rgba(0, 0, 0, .3); }
[data-theme="dark"] .about-card em { color: #5eead4; }
[data-theme="dark"] .about-privacy { border-color: rgba(125, 211, 252, .38); }
[data-theme="dark"] .about-privacy h3 { color: #7dd3fc; }
[data-theme="dark"] .about-privacy li::before { background: #0e7490; }
[data-theme="dark"] .trust-badge i { color: #7dd3fc; }
[data-theme="dark"] .about-stat:nth-child(1) .about-stat-value { color: #5eead4; }
[data-theme="dark"] .about-stat:nth-child(2) .about-stat-value { color: #86efac; }
[data-theme="dark"] .about-stat:nth-child(3) .about-stat-value { color: #fcd34d; }
[data-theme="dark"] .about-stat:nth-child(4) .about-stat-value { color: #c4b5fd; }
[data-theme="dark"] .about-cta { background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary)); border-color: var(--border); box-shadow: var(--shadow-lg); }

@media (max-width: 640px) {
  .about-hero { padding: 26px 20px 24px; }
  .about-hero h1 { font-size: 1.6rem; }
  #aboutTagline { font-size: 1.2rem; }
  .about-card, .about-privacy { padding: 22px 18px; }
}

/* the bottom fringe on the app pages: lighter so it never fights with text */
.nature-ground--app { opacity: .72; }
/* room under the last line of every page for the grass fringe */
.app-layout .panel { padding-bottom: 84px !important; }

/* ---------- 17. FLUID LAYOUT -------------------------------------------
   Layout only. Colours, type, and the class names scripts rely on stay put.
   These rules come last so they win over earlier fixed widths on small screens. */
img { max-width: 100%; height: auto; }
.leaflet-container img,
.leaflet-pane img,
.marker-cluster img {
  max-width: none !important;
  max-height: none !important;
}
.main-content, .content-area, .panel, .map-wrapper, .tab-panel { min-width: 0; max-width: 100%; }
#map { width: 100%; max-width: 100%; }

.leaflet-popup { max-width: calc(100vw - 28px); }
.leaflet-popup-content-wrapper { max-width: min(320px, calc(100vw - 36px)); }
.leaflet-popup-content { max-width: min(280px, calc(100vw - 72px)); }
.custom-popup, .event-popup { max-width: min(280px, calc(100vw - 80px)); overflow-wrap: anywhere; }

.leaderboard-item { min-width: 0; }
.leaderboard-info { min-width: 0; }
.leaderboard-name, .leaderboard-detail, .lbd-name { overflow: hidden; text-overflow: ellipsis; }

.toast, .undo-toast { min-width: 0; max-width: calc(100vw - 24px); }
.notif-panel { max-width: calc(100vw - 16px); }

@media (max-width: 768px) {
  .form-input, .form-select, textarea.form-input, .auth-input { width: 100%; max-width: 100%; }
  .btn-full, .rf-submit, .auth-submit, .route-go, .exp-dl { width: 100%; }
  .modal-box, .legal-modal-box, .exp-box { width: 100%; max-width: 100%; }
  .top-bar { height: auto; min-height: var(--topbar-height); flex: none; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; }
  .top-bar-left { min-width: 0; flex: none; width: 100%; }
  .top-title { width: 100%; }
  .page-title { overflow: visible; white-space: normal; max-width: none; font-size: 1.1rem; line-height: 1.3; }
  .top-bar-right { min-width: 0; flex: none; width: 100%; max-width: 100%; overflow: visible; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
  .top-bar-right .sync-pill, .top-bar-right .guide-btn, .top-bar-right .top-export-btn { display: none; }
  .top-bar-right .top-btn, .lang-toggle { width: 40px; height: 40px; padding: 0; flex: 0 0 40px; justify-content: center; }
  #signInBtn, .sos-btn { flex: none; white-space: nowrap; min-height: 40px; padding: 8px 10px; }
  .user-profile-btn { min-height: 40px; padding: 3px; }
  .hazard-picker { min-width: 0; max-width: min(260px, calc(100vw - 88px)); }
  .selection-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-layout[data-layout="split"] .content-area { flex-direction: column; min-height: 0; }
  .app-layout[data-layout="split"] .panel {
    width: 100%; height: auto; flex: 1 1 50%; min-height: 0;
  }
  .app-layout[data-layout="split"] .map-wrapper {
    width: 100%;
    height: 50vh;
    flex: 0 0 50vh;
    min-height: 280px;
    max-height: 50vh;
  }
  .app-layout[data-layout="split"] #map { height: 100%; }
  .app-layout[data-layout="wide"] .panel { height: auto; min-height: 0; flex: 1 1 auto; }
}

@media (min-width: 768px) {
  .leaderboard-item, .report-item, .lbd-row { flex-direction: row; }
}

@media (max-width: 640px) {
  .splash-stage { width: min(830px, 94%); }
  .splash-inner { padding: 28px 16px 22px; }
  .splash-word-wrap { min-width: 0; width: 100%; }
  .stat-item { min-width: 0; flex: 1 1 calc(50% - 12px); max-width: 100%; }
  .notif-panel { position: fixed; top: calc(var(--topbar-height) + 8px); left: 8px; right: 8px; width: auto; }
}

@media (min-width: 1600px) {
  .app-layout[data-layout="wide"] .tab-panel { max-width: min(1240px, 92vw); }
}

@media (max-width: 400px) {
  .top-bar-right { gap: 4px; }
  .top-bar-right .sos-btn i { display: none; }
}

/* ---------- 18. MOBILE POLISH ------------------------------------------
   Spacing, type, and quieter decoration for phones. Desktop rules above
   stay as they are. */
@media (max-width: 768px) {
  .report-item,
  .mr-card,
  .comm-card,
  .event-card,
  .leaderboard-item,
  .lbd-item,
  .comment-item,
  .card {
    padding: 12px;
  }
  .report-item + .report-item,
  .mr-card + .mr-card,
  .comm-card + .comm-card,
  .event-card + .event-card,
  .leaderboard-item + .leaderboard-item,
  .lbd-item + .lbd-item {
    margin-top: 12px;
  }

  .comm-body,
  .comm-reply p,
  .comment-text,
  .report-meta,
  .empty-state p,
  .event-card p,
  .about-card p,
  .about-step p,
  .learn-lead,
  .accordion-body,
  .pulse-read,
  .pulse-note {
    line-height: 1.5;
  }

  .bloom-decor { opacity: 0.22; }
  .nature-ground--app { opacity: 0.2; }
  .nature-stage--front { --dim: 0.2; }

  .form-input,
  .form-select,
  textarea.form-input,
  .auth-input,
  .comment-input input {
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-primary) 92%, #fff);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
  }
  [data-theme="dark"] .form-input,
  [data-theme="dark"] .form-select,
  [data-theme="dark"] textarea.form-input,
  [data-theme="dark"] .auth-input,
  [data-theme="dark"] .comment-input input {
    background: color-mix(in srgb, var(--bg-tertiary) 88%, #000);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
  }

  .map-legend {
    top: 10px;
    bottom: auto;
    left: 10px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
    max-width: min(220px, calc(100% - 64px));
    padding: 10px 12px;
  }
  .map-legend .legend-items { gap: 6px; }
  .map-legend .legend-title { color: var(--text-muted); }
  .map-legend .legend-item { color: var(--text-secondary); }

  .toast-container {
    left: 12px;
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    align-items: stretch;
  }
  .toast,
  .undo-toast {
    width: 100%;
    min-width: 0;
    background: rgba(255, 255, 255, 0.95);
    color: #1e293b;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  }
}

@media (max-width: 480px) {
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
  .dash-table { font-size: 0.9rem; }
  .dash-table thead th,
  .dash-table tbody td {
    font-size: 0.9rem;
    padding: 10px 12px;
    text-align: left;
    vertical-align: middle;
  }
  #areaBreakdown .dash-table th:nth-child(n + 3),
  #areaBreakdown .dash-table td:nth-child(n + 3),
  #categoryTable .dash-table th:nth-child(n + 2),
  #categoryTable .dash-table td:nth-child(n + 2) {
    text-align: right;
  }
  .dash-table td.tbl-num,
  .dash-table .tbl-rate,
  .leaderboard-score,
  .lbd-score {
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .dash-table td.tbl-num,
  .dash-table .tbl-rate { text-align: right; }
  .leaderboard-item,
  .lbd-item { align-items: center; gap: 10px; }
  .leaderboard-score,
  .lbd-score { flex: none; margin-left: auto; }
}


/* Mobile type overrides also cover smaller inline sizes in generated content. */
@media (max-width: 768px) {
  p, li,
  .comm-body, .event-desc, .comment-text, .comm-reply, .learn-lead, .accordion-body, .notif-item, .dz-text, .kb-term-body, .pulse-read, .pulse-note {
    font-size: .9375rem !important;
  }

  /* Keep inputs at least 16px to avoid iOS focus zoom, even with smaller text selected. */
  input, textarea, select {
    font-size: max(1rem, 16px) !important;
  }

  /* Sub-labels, metadata, chips, pills, buttons: never below 14px. */
  #storageLabel,
  .about-hero-badge,
  .about-stat-label,
  .accordion summary,
  .ach-progress-text,
  .ach-rarity,
  .achievement-badge,
  .achievement-card .ach-desc,
  .achievement-card .ach-name,
  .achievement-card .ach-points,
  .af-btn,
  .af-btn i,
  .af-chip,
  .af-credit,
  .af-flag,
  .af-kicker,
  .af-legal,
  .af-mark-copy,
  .aqi-advice-k,
  .aqi-band,
  .aqi-eg,
  .aqi-eg b,
  .aqi-note,
  .auth-anonymous-btn,
  .auth-anonymous-note,
  .auth-brand .brand-tag,
  .auth-brand span,
  .auth-divider,
  .auth-error,
  .auth-feature,
  .auth-footer-brand,
  .auth-footer-dev,
  .auth-form .auth-subtitle,
  .auth-input-group label,
  .auth-last-used,
  .auth-remember,
  .auth-rules span,
  .auth-social-btn,
  .auth-success,
  .auth-switch,
  .auth-tab,
  .badge-inline,
  .btn,
  .btn-sm,
  .btn-xs,
  .card-sub,
  .card-title-tag,
  .cb-cluster,
  .celeb-desc,
  .celeb-kicker,
  .celeb-points,
  .celeb-rarity,
  .chart-empty,
  .check-txt,
  .checklist-text,
  .chip,
  .cloud-progress,
  .co-body strong,
  .co-step,
  .comm-area,
  .comm-author-sub,
  .comm-btn,
  .comm-cat,
  .comm-cat-opt,
  .comm-extra-row,
  .comm-meta,
  .comm-resolved-tag,
  .comm-tab,
  .comm-tab-count,
  .comment-author,
  .comment-input input,
  .conn-info span,
  .conn-info strong,
  .conn-tag,
  .contact-card em,
  .contact-card span,
  .contact-card strong,
  .dash-table,
  .dash-table thead th,
  .dc-carbon,
  .dc-name,
  .delete-btn,
  .depth-level,
  .detail-label,
  .di-danger,
  .di-tips strong,
  .dl-name,
  .dz-sub,
  .ef-next,
  .ek-badge,
  .ek-content small,
  .ek-content strong,
  .em-call,
  .em-name,
  .em-number,
  .ev-counter,
  .ev-remind-head,
  .ev-remind-sub,
  .ev-remind-title,
  .event-host,
  .event-media-label,
  .event-meta,
  .event-mine-tag,
  .event-pop-title,
  .event-status,
  .event-tag,
  .event-type,
  .exp-all,
  .exp-date,
  .exp-dl,
  .exp-file,
  .exp-label,
  .exp-match,
  .exp-sec-txt small,
  .exp-sec-txt strong,
  .exp-sub,
  .explore-cat,
  .explore-cat span,
  .fg-t,
  .flip-tag,
  .form-label,
  .hero-chip,
  .hp-txt b,
  .impact-cap,
  .judge-fb,
  .kb-chips .chip,
  .kb-cite-foot,
  .kb-cite-note,
  .kb-count,
  .kb-kind,
  .kb-learn,
  .kb-level,
  .kb-literacy-foot,
  .kb-open,
  .kb-org,
  .kb-prog-pct,
  .kb-prog-txt,
  .kb-saved-chip span,
  .kb-star,
  .kb-term summary,
  .kb-topic,
  .kf-txt,
  .kf-unit,
  .kl-item b,
  .kl-item span,
  .kp-check,
  .kp-d,
  .kp-jump,
  .kp-meta,
  .kp-meter b,
  .kp-t,
  .kpi-label,
  .lang-toggle,
  .lbd-crown-label,
  .lbd-detail,
  .lbd-stat-l,
  .lbd-you-tag,
  .lbx-caption,
  .lbx-counter,
  .lc-name,
  .lc-science-item,
  .lc-tips strong,
  .leaderboard-detail,
  .leaderboard-rank,
  .learn-cat,
  .learn-score,
  .legal-num,
  .legal-p,
  .legal-social,
  .legend-row,
  .logo-text .brand-tag,
  .logo-text span,
  .lt-count,
  .lt-name,
  .map-search-card .search-wrap .search-clear i,
  .media-count,
  .media-pts,
  .metric-item,
  .mr-btn,
  .mr-chip,
  .mr-id,
  .mr-resolved-tag,
  .mr-stat-l,
  .mr-type,
  .nav-hist-btn,
  .nav-item,
  .notif-head-count,
  .notif-item-main strong,
  .notif-markread,
  .notif-tab,
  .pach-name,
  .pach-pts,
  .page-subtitle,
  .pal-foot,
  .pal-group,
  .pal-item .pi-sub,
  .palette-btn,
  .pc-badge,
  .pc-name,
  .pm-item,
  .pod-name,
  .pod-score,
  .points-breakdown-label,
  .points-card-tier-name,
  .points-card-title,
  .points-popup,
  .points-progress-label,
  .prb-label,
  .profile-stat-label,
  .pulse-chip,
  .ql-best,
  .ql-blurb,
  .ql-meta,
  .qo-key,
  .qo-txt,
  .qr-body,
  .qr-n,
  .qr-q,
  .qr-rule,
  .quick-action,
  .quick-action-label,
  .qz-earned span,
  .qz-fb-head,
  .qz-fb-why,
  .qz-lead,
  .qz-level-tag,
  .qz-note,
  .qz-nudge,
  .qz-quit,
  .qz-review summary,
  .qz-score,
  .qz-stats .qs span,
  .qz-streak,
  .qz-verdict-meta,
  .rain-amount,
  .rc-roads summary,
  .rc-roads summary .rc-roads-n,
  .rc-stat span,
  .rc-why,
  .re-dot,
  .report-id,
  .report-meta,
  .report-time,
  .resolve-btn,
  .rf-after b,
  .rf-after code,
  .rf-after span,
  .rf-btn-badge,
  .rf-btn-icon,
  .rf-card .selection-card .sel-desc,
  .rf-hero-kicker,
  .rf-hero-pts span,
  .rf-hero-sub,
  .rf-meter-steps span,
  .rf-meter-val,
  .rf-next,
  .rf-pts-now,
  .rf-pts-now b,
  .rf-submit,
  .rf-suggest,
  .rf-track-label,
  .rf-track-pct,
  .rh-depth,
  .risk-badge,
  .risk-pill,
  .route-live,
  .route-quick-chip,
  .route-quick-label,
  .rr-km,
  .rr-ok,
  .rr-warn,
  .rrr-detail,
  .rs-lab,
  .rt-badge,
  .rt-haz-item,
  .rt-road,
  .rt-safe-note,
  .rt-sub,
  .sc-row,
  .section-head a,
  .seg-control button,
  .sel-desc,
  .sel-label,
  .selection-card,
  .settings-about-foot,
  .settings-note,
  .settings-row-text span,
  .settings-row-text strong,
  .sf-hint,
  .si-cat,
  .si-name,
  .sidebar-user-avatar,
  .sidebar-user-name,
  .sidebar-user-tier,
  .sidebar-welcome,
  .sos-btn,
  .splash-badge,
  .splash-hint,
  .splash-kicker,
  .splash-motto,
  .splash-skip,
  .st-fix,
  .st-flag,
  .st-name,
  .st-tap,
  .stat-label,
  .status-pill,
  .streak-badge,
  .streak-card .streak-label,
  .streak-card h4,
  .streak-sub-l,
  .sync-pill,
  .tab,
  .tbl-pill,
  .tbl-rank,
  .tbl-rate,
  .template-card h5,
  .theme-toggle,
  .tier-range,
  .timeline-label,
  .tip-count,
  .tip-rotator-label,
  .tip-rotator-text,
  .toast,
  .tour-actions .btn,
  .tour-auto,
  .tour-chip,
  .tour-eyebrow,
  .tour-fact,
  .tour-skip,
  .trust-badge,
  .undo-countdown,
  .undo-toast,
  .undo-toast button,
  .upload-area small,
  .user-points,
  .verify-btn,
  .warning-badge,
  .watch-add input,
  .watch-chip,
  .watch-dist,
  .watch-empty,
  .watch-lead,
  .watch-place,
  .watch-row,
  .watch-suggest button,
  .ws-desc,
  .wt-content strong {
    font-size: 0.875rem !important;
  }

  /* Fixed-geometry chrome (avatar initials, badge dots, map overlays,
     diagram labels, timestamps, hints): a readable 12.8px floor that
     still fits its container. */
  .about-privacy li::before,
  .af-chip i,
  .aqi-eg small,
  .aqi-eg span,
  .aqi-ticks,
  .aqi-unit,
  .auth-caps,
  .auth-hint,
  .auth-rules span i,
  .auth-strength-text,
  .bar-chart-label,
  .bar-chart-value,
  .bin-hint,
  .cal-cell,
  .cal-dow,
  .cal-head,
  .char-counter,
  .check-box i,
  .check-icon,
  .check-list li::before,
  .comm-reply .comm-time,
  .comm-reply-avatar,
  .comm-search i,
  .comment-time,
  .dc-time,
  .depth-marks,
  .depth-marks i,
  .detail-hint,
  .donut-center-label,
  .ef-source,
  .ek-check,
  .ev-coord-note,
  .ev-min-note,
  .event-date-mon,
  .event-pop-going,
  .event-pop-line,
  .event-popup,
  .form-hint,
  .hp-area,
  .hp-arrow,
  .hp-coords,
  .hp-foot,
  .hp-txt small,
  .kb-card.opened .kb-title::after,
  .kb-cite li::before,
  .kb-term summary i,
  .kb-time,
  .kbd,
  .kf-src,
  .lc-day,
  .lc-node,
  .leaderboard-score i,
  .legal-hint,
  .legal-updated,
  .legend-icon,
  .legend-item,
  .legend-title,
  .lifecycle-label,
  .loc-gps,
  .loc-status,
  .map-await-pin::after,
  .map-basemap-btn,
  .map-tip,
  .mobile-bar button,
  .mr-chip i,
  .mr-thumb-badge,
  .nav-arrow,
  .nav-badge,
  .nav-label,
  .nearby-hint,
  .notif-count,
  .notif-item-time,
  .pal-head kbd,
  .palette-btn kbd,
  .preview-thumb .remove-photo,
  .qr-src,
  .qz-fb-src,
  .qz-ring-txt span,
  .rc-stat i,
  .rf-card .form-group > .form-label::after,
  .rf-hero-pts i,
  .rf-hint,
  .rf-meter-hint,
  .rf-meter-val i,
  .route-foot-note,
  .route-quick-chip i,
  .search-hint,
  .selection-card.selected::after,
  .splash-badge i,
  .splash-hint kbd,
  .streak-badge i,
  .streak-day,
  .sync-pill i,
  .thumb-tag,
  .timeline-dot,
  .tip-rotator-src,
  .tour-actions .btn i,
  .tour-chip i,
  .tour-fact i,
  .tour-kbd,
  .tour-kbd kbd,
  .user-avatar,
  .user-points i,
  .video-play-badge,
  .wt-arrow {
    font-size: 0.8rem !important;
  }

  /* JS templates set tiny inline font-sizes (0.65-0.85rem); outrank them. */
  [style*="font-size:0.6"], [style*="font-size: 0.6"],
  [style*="font-size:0.7"], [style*="font-size: 0.7"],
  [style*="font-size:0.8"], [style*="font-size: 0.8"] {
    font-size: 0.875rem !important;
  }

  /* Fluid shells on narrow screens. */
  .app-layout, .content-area, .panel, .map-wrapper, .modal-box {
    max-width: 100%;
  }
  .notif-panel { width: min(360px, calc(100vw - 24px)); }
}

/* ---------- 20. PHONE WIDTH + MAP STABILITY ---------------------------
   Stops the page from dragging sideways and keeps the map at one height.
   The sidebar stays a slide-over drawer. Blur is dropped on the large
   layers only, because a full-page blur is what stalls a phone GPU. */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
  .app-layout, .content-area, .main-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .content-area { flex-direction: column; }
  .app-layout[data-layout="split"] .panel,
  .app-layout[data-layout="wide"] .panel,
  .map-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .app-layout[data-layout="split"] .map-wrapper {
    height: min(350px, 50vh);
    flex: 0 0 min(350px, 50vh);
    min-height: 0;
    max-height: min(350px, 50vh);
  }
  .app-layout[data-layout="split"] #map,
  .app-layout[data-layout="split"] .leaflet-container {
    width: 100%;
    height: 100%;
  }
  .form-row,
  .detail-grid,
  .selection-grid,
  .dash-grid-2,
  .route-summary,
  .civic-grid {
    grid-template-columns: 1fr;
  }
  input, select, textarea {
    font-size: 16px;
  }
  .top-bar,
  .mobile-bar,
  .drawer-scrim,
  .nature-stage,
  .toast,
  .undo-toast,
  .map-legend {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Dark pages swallow the deep petal colours. Brighten the paint and
   raise the fall so red, gold, blue and green still read. */
[data-theme="dark"] .nature-stage { --lift: 1.45; }
[data-theme="dark"] .nature-stage--front { --dim: .85; }
[data-theme="dark"] .ng-blade svg,
[data-theme="dark"] .ng-flower svg,
[data-theme="dark"] .bloom-decor svg {
  filter: brightness(1.08) saturate(1.05);
}

/* ---------- Brand lock-up: identical in English and Bangla ----------------
   "EkhoniJanao" and "সমস্যা কোথায়?" are the name, not interface copy. The
   Bengali body rules (heading face, width axis, extra leading, word spacing)
   must not reach them, so the lock-up is pinned to its English-mode paint. */
html[lang="bn"] .splash-title,
html[lang="bn"] .splash-title span,
html[lang="bn"] .logo-text h1,
html[lang="bn"] .auth-brand h2 {
  font-family: var(--font-display);
  font-variation-settings: normal;
  word-spacing: 0;
}
html[lang="bn"] .splash-bn,
html[lang="bn"] .splash-bn span,
html[lang="bn"] .brand-tag,
html[lang="bn"] #aboutTagline {
  word-spacing: 0;
}
html[lang="bn"] .auth-brand .brand-tag,
html[lang="bn"] .auth-brand h2 { line-height: 1.55; }

/* ---------- Light-theme garden ---------------------------------------------
   On a pale page the paint was too thin: petals sat at 25-60% opacity and
   washed into the background, and the rear grass row was faded and
   desaturated. Light pages get a fuller fall, richer colour, and a soft
   contact shadow on the nearer petals so each one has depth against the page. */
html:not([data-theme="dark"]) .nature-stage { --lift: 1.55; }
html:not([data-theme="dark"]) .nature-stage--front { --dim: .7; }
html:not([data-theme="dark"]) .ng-back { opacity: .82; filter: saturate(1); }
html:not([data-theme="dark"]) .ng-blade svg { filter: saturate(1.18); }
html:not([data-theme="dark"]) .ng-flower svg {
  filter: saturate(1.25) drop-shadow(0 2px 2px rgba(24, 62, 38, .24));
}
html:not([data-theme="dark"]) .nature-ground::before {
  background: linear-gradient(180deg, transparent, rgba(34, 139, 70, .2) 46%, rgba(20, 83, 45, .34));
}
html:not([data-theme="dark"]) .bloom-decor svg { filter: saturate(1.15); }

/* ============================================================================
   21. GOVERNMENT DESK
   Officials act on the public record, so this module is deliberately quieter
   than the rest of the app: an institutional navy and an engraved gold, sharp
   edges, and motion reserved for the moments that mean something — a status
   being stamped, a row leaving the queue, the seal catching the light.
   ========================================================================== */
:root {
  --gov-navy: 213 64% 32%;
  --gov-navy-2: 206 74% 40%;
  --gov-gold: 41 76% 46%;
  --gov-gold-2: 46 92% 62%;
  --gov-pad: 6px;
}
[data-theme="dark"] {
  --gov-navy: 208 78% 66%;
  --gov-navy-2: 200 88% 74%;
  --gov-gold: 45 88% 64%;
  --gov-gold-2: 48 96% 74%;
}

/* ---------- the seal ------------------------------------------------------ */
.gov-seal {
  position: relative; display: inline-flex; flex: none;
  width: 18px; height: 18px; vertical-align: -0.28em;
}
.gov-seal svg { position: relative; z-index: 1; width: 100%; height: 100%; display: block; overflow: visible; }
.gov-seal-shield {
  fill: hsl(var(--gov-navy));
  stroke: hsl(var(--gov-gold) / .85);
  stroke-width: 1.1;
  filter: drop-shadow(0 1px 1.5px hsl(var(--gov-navy) / .45));
}
.gov-seal-star { fill: hsl(var(--gov-gold-2)); }
/* A slow golden sweep, like light catching foil on an embossed stamp. */
.gov-seal::before {
  content: ''; position: absolute; inset: -22%; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 0deg,
    transparent 0 58%, hsl(var(--gov-gold-2) / .7) 76%, transparent 90%);
  filter: blur(2.5px); opacity: .8;
  animation: govSweep 6s linear infinite;
}
@keyframes govSweep { to { transform: rotate(360deg); } }
.gov-seal--xs { width: 13px; height: 13px; }
.gov-seal--sm { width: 24px; height: 24px; }
.gov-seal--lg { width: 52px; height: 52px; }
.gov-seal--lg::before { filter: blur(5px); }

/* ---------- the tag on an official's comment ----------------------------- */
.gov-tag {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 8px; padding: 2.5px 9px 2.5px 6px;
  border-radius: var(--radius-full); vertical-align: middle;
  font-size: .63rem; font-weight: 800; line-height: 1.5;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  color: hsl(var(--gov-navy));
  background: linear-gradient(120deg, hsl(var(--gov-gold) / .2), hsl(var(--gov-gold-2) / .34));
  border: 1px solid hsl(var(--gov-gold) / .55);
  position: relative; overflow: hidden;
}
[data-theme="dark"] .gov-tag { color: hsl(var(--gov-gold-2)); }
.gov-tag-txt { position: relative; z-index: 1; }
.gov-tag .gov-seal { vertical-align: 0; }
/* A sheen crossing the tag now and then, so it reads as metal rather than paint. */
.gov-tag::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: 0;
  background: linear-gradient(100deg, transparent, hsl(0 0% 100% / .55), transparent);
  animation: govSheen 5.5s ease-in-out infinite;
}
@keyframes govSheen { 0%, 62% { transform: translateX(-140%); } 88%, 100% { transform: translateX(300%); } }
.gov-tag--inline { margin-left: 6px; font-size: .6rem; }

.comment-item--gov {
  border-left: 3px solid hsl(var(--gov-gold));
  background: linear-gradient(90deg, hsl(var(--gov-gold) / .09), transparent 62%);
  padding-left: 11px;
}
.comment-item--gov .comment-author { color: hsl(var(--gov-navy)); font-weight: 800; }
[data-theme="dark"] .comment-item--gov .comment-author { color: hsl(var(--gov-navy-2)); }

/* ---------- the control panel inside a report ---------------------------- */
.gov-panel {
  position: relative; overflow: hidden;
  margin: 4px 0 18px; padding: 15px 16px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--gov-navy) / .28);
  background:
    linear-gradient(160deg, hsl(var(--gov-navy) / .07), transparent 55%),
    var(--bg-secondary);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .gov-panel { border-color: hsl(var(--gov-navy) / .3); }
.gov-panel--read { padding: 13px 15px; }
/* Engraved corner rule, the one bit of ornament the panel allows itself. */
.gov-panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, hsl(var(--gov-navy)), hsl(var(--gov-gold)) 52%, hsl(var(--gov-navy)));
  opacity: .8;
}

.gov-panel-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.gov-panel-id { flex: 1; min-width: 0; }
.gov-panel-title {
  font-family: var(--font-display); font-size: .93rem; font-weight: 800;
  letter-spacing: .01em; color: var(--text-primary);
}
.gov-panel-sub {
  font-size: .72rem; color: var(--text-muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gov-sla {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--radius-full);
  font-size: .68rem; font-weight: 800; letter-spacing: .03em;
  color: hsl(var(--gov-navy)); background: hsl(var(--gov-navy) / .1);
  border: 1px solid hsl(var(--gov-navy) / .24); font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .gov-sla { color: hsl(var(--gov-navy-2)); }
.gov-sla.is-late {
  color: #b3261e; background: rgba(234, 67, 53, .13); border-color: rgba(234, 67, 53, .38);
  animation: govUrgent 2.2s ease-in-out infinite;
}
[data-theme="dark"] .gov-sla.is-late { color: #ff8a80; }
@keyframes govUrgent { 0%, 100% { box-shadow: 0 0 0 0 rgba(234, 67, 53, .34); } 50% { box-shadow: 0 0 0 5px rgba(234, 67, 53, 0); } }
.gov-sla.is-done { color: var(--success); background: var(--success-light); border-color: rgba(52, 168, 83, .34); }

/* ---------- the four-stage track ----------------------------------------- */
.gov-track {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 5px; padding: var(--gov-pad);
  border-radius: 14px; border: 1px solid var(--border);
  background: var(--bg-tertiary);
}
.gov-track-fill {
  position: absolute; top: var(--gov-pad); bottom: var(--gov-pad); left: var(--gov-pad);
  width: calc((100% - var(--gov-pad) * 2) * var(--gov-to, 0));
  border-radius: 10px; pointer-events: none;
  background: linear-gradient(100deg, hsl(var(--gov-navy) / .2), hsl(var(--gov-gold) / .26));
  border: 1px solid hsl(var(--gov-gold) / .4);
  transition: width .62s cubic-bezier(.22, 1, .36, 1);
}

.gov-stage {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; gap: 6px; padding: 9px 4px 8px;
  border: 1px solid transparent; border-radius: 10px; background: transparent;
  cursor: pointer; color: var(--text-muted);
  font-family: inherit; font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  transition: color .2s, background .2s, border-color .2s, transform .28s cubic-bezier(.22, 1, .36, 1);
}
.gov-stage-dot {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-size: .8rem; background: var(--bg-secondary); color: var(--text-muted);
  border: 1.5px solid var(--border);
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s, transform .3s;
}
.gov-stage:hover { color: var(--text-primary); background: hsl(var(--gov-c) / .07); }
.gov-stage:hover .gov-stage-dot { transform: translateY(-2px); border-color: hsl(var(--gov-c) / .5); }
.gov-stage.is-on { color: hsl(var(--gov-c)); }
.gov-stage.is-on .gov-stage-dot {
  background: hsl(var(--gov-c) / .16); color: hsl(var(--gov-c));
  border-color: hsl(var(--gov-c) / .5);
}
.gov-stage.is-cur .gov-stage-dot {
  background: hsl(var(--gov-c)); color: #fff; border-color: hsl(var(--gov-c));
  box-shadow: 0 0 0 4px hsl(var(--gov-c) / .18);
}
[data-theme="dark"] .gov-stage.is-cur .gov-stage-dot { color: #0a0c10; }
.gov-stage.is-cur { color: hsl(var(--gov-c)); font-weight: 800; }
/* Lifted and lit while it is the pending choice, waiting for the stamp. */
.gov-stage.is-picked {
  color: hsl(var(--gov-c)); background: hsl(var(--gov-c) / .12);
  border-color: hsl(var(--gov-c) / .55); transform: translateY(-2px);
  box-shadow: 0 6px 16px -8px hsl(var(--gov-c) / .8);
}
.gov-stage.is-picked .gov-stage-dot {
  background: hsl(var(--gov-c)); color: #fff; border-color: hsl(var(--gov-c));
  animation: govReady 1.5s ease-in-out infinite;
}
[data-theme="dark"] .gov-stage.is-picked .gov-stage-dot { color: #0a0c10; }
@keyframes govReady { 0%, 100% { box-shadow: 0 0 0 0 hsl(var(--gov-c) / .5); } 60% { box-shadow: 0 0 0 7px hsl(var(--gov-c) / 0); } }
.gov-stage-label { text-align: center; line-height: 1.25; }

.gov-stage[data-status="new"]      { --gov-c: 4 76% 55%; }
.gov-stage[data-status="review"]   { --gov-c: 38 92% 46%; }
.gov-stage[data-status="progress"] { --gov-c: 217 88% 56%; }
.gov-stage[data-status="resolved"] { --gov-c: 152 66% 38%; }
[data-theme="dark"] .gov-stage[data-status="review"]   { --gov-c: 43 96% 60%; }
[data-theme="dark"] .gov-stage[data-status="resolved"] { --gov-c: 152 72% 52%; }

/* ---------- note + stamp button ------------------------------------------ */
.gov-commit { display: flex; gap: 8px; margin-top: 11px; align-items: stretch; }
.gov-note {
  flex: 1; min-width: 0; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-primary); color: var(--text-primary);
  font-family: inherit; font-size: .82rem;
  transition: border-color .2s, box-shadow .2s;
}
.gov-note:focus {
  outline: none; border-color: hsl(var(--gov-navy) / .6);
  box-shadow: 0 0 0 3px hsl(var(--gov-navy) / .14);
}
.gov-btn {
  position: relative; overflow: hidden; flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 10px; border: 1px solid transparent;
  background: linear-gradient(135deg, hsl(var(--gov-navy)), hsl(var(--gov-navy-2)));
  color: #fff; font-weight: 800; font-size: .78rem; letter-spacing: .02em;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 4px 14px -6px hsl(var(--gov-navy) / .9);
  transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .22s, filter .22s, opacity .2s;
}
[data-theme="dark"] .gov-btn { color: #0a0c10; }
.gov-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 8px 20px -8px hsl(var(--gov-navy) / 1); }
.gov-btn:active:not(:disabled) { transform: translateY(0) scale(.985); }
.gov-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.gov-btn.is-busy { pointer-events: none; }
.gov-btn.is-busy i { animation: govSpin .8s linear infinite; }
@keyframes govSpin { to { transform: rotate(360deg); } }
/* The press: the button drops like a stamp coming down on paper. */
.gov-btn.is-stamped { animation: govPress .55s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes govPress {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(3px) scale(.955); filter: brightness(1.25); }
  55% { transform: translateY(-2px) scale(1.03); }
  100% { transform: translateY(0) scale(1); }
}

/* The whole panel rings once when a status lands. */
.gov-panel.is-stamping::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 78% 18%, hsl(var(--gov-gold-2) / .4), transparent 62%);
  animation: govInk .9s ease-out forwards;
}
@keyframes govInk { 0% { opacity: 0; transform: scale(.72); } 26% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35); } }
.gov-panel.is-stamping .gov-seal { animation: govSealHit .7s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes govSealHit {
  0% { transform: scale(1) rotate(0); }
  26% { transform: scale(.82) rotate(-9deg); }
  52% { transform: scale(1.16) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ---------- audit trail --------------------------------------------------- */
.gov-audit { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.gov-audit-title {
  font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 9px;
}
.gov-audit-title i { margin-right: 5px; }
.gov-audit-row {
  position: relative; display: flex; align-items: flex-start; gap: 9px;
  padding: 0 0 11px 0; font-size: .78rem;
}
.gov-audit-row:not(:last-child)::before {
  content: ''; position: absolute; left: 8px; top: 19px; bottom: 1px; width: 1.5px;
  background: linear-gradient(var(--border), transparent);
}
.gov-audit-dot {
  flex: none; display: grid; place-items: center; width: 17px; height: 17px;
  border-radius: 50%; font-size: .55rem; margin-top: 1px;
  background: var(--bg-tertiary); color: var(--text-muted); border: 1px solid var(--border);
}
.gov-audit-dot[data-s="resolved"] { background: var(--success-light); color: var(--success); border-color: rgba(52, 168, 83, .4); }
.gov-audit-dot[data-s="progress"] { background: var(--info-light); color: var(--info); border-color: rgba(66, 133, 244, .4); }
.gov-audit-dot[data-s="review"]  { background: var(--warning-light); color: #b58105; border-color: rgba(251, 188, 4, .45); }
.gov-audit-body { flex: 1; min-width: 0; color: var(--text-secondary); line-height: 1.5; }
.gov-audit-body b { color: var(--text-primary); font-weight: 700; }
.gov-audit-who { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); }
.gov-audit-who--gov { color: hsl(var(--gov-navy)); font-weight: 700; }
[data-theme="dark"] .gov-audit-who--gov { color: hsl(var(--gov-navy-2)); }
.gov-audit-note { display: block; color: var(--text-secondary); font-style: italic; margin-top: 2px; }
.gov-audit-org { display: block; font-size: .7rem; color: var(--text-muted); margin-top: 1px; }
.gov-audit-when { flex: none; font-size: .7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---------- sidebar + nav -------------------------------------------------- */
.sidebar-seal {
  display: flex; align-items: center; gap: 5px; margin-top: 5px;
  padding: 2.5px 8px 2.5px 5px; border-radius: var(--radius-full);
  font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: hsl(var(--gov-gold)); background: hsl(var(--gov-gold) / .13);
  border: 1px solid hsl(var(--gov-gold) / .38);
  max-width: 100%; overflow: hidden;
  animation: govSealIn .5s cubic-bezier(.22, 1, .36, 1) both;
}
.sidebar-seal span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes govSealIn { from { opacity: 0; transform: translateY(4px) scale(.94); } }
.nav-item--gov { color: hsl(var(--gov-navy)); font-weight: 700; }
[data-theme="dark"] .nav-item--gov { color: hsl(var(--gov-navy-2)); }
.nav-item--gov::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px;
  border-radius: 0 3px 3px 0; background: linear-gradient(hsl(var(--gov-gold)), hsl(var(--gov-navy)));
  opacity: 0; transform: scaleY(.4); transition: opacity .25s, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.nav-item--gov:hover::before, .nav-item--gov.active::before { opacity: 1; transform: scaleY(1); }
.nav-badge--gov { background: linear-gradient(135deg, #c62828, #ea4335); color: #fff; }

/* ---------- desk layout ---------------------------------------------------- */
.gov-desk { display: flex; flex-direction: column; gap: 16px; }
.gov-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 15px;
  padding: 20px 22px; border-radius: var(--radius-xl);
  border: 1px solid hsl(var(--gov-navy) / .3);
  background:
    radial-gradient(120% 140% at 100% 0%, hsl(var(--gov-gold) / .16), transparent 58%),
    linear-gradient(125deg, hsl(var(--gov-navy) / .16), hsl(var(--gov-navy) / .05) 60%, transparent),
    var(--bg-secondary);
  box-shadow: var(--shadow-md);
}
.gov-hero-txt { flex: 1; min-width: 0; position: relative; z-index: 1; }
.gov-hero-txt h2 {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 800;
  letter-spacing: -.01em; color: var(--text-primary); margin-bottom: 3px;
}
.gov-hero-txt p { font-size: .8rem; color: var(--text-secondary); }
.gov-hero .gov-seal { position: relative; z-index: 1; }
.gov-hero-live {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--radius-full);
  font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--success); background: var(--success-light); border: 1px solid rgba(52, 168, 83, .35);
}
.gov-hero-live i { font-size: .6rem; animation: govPulse 2s ease-in-out infinite; }
@keyframes govPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.gov-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.gov-stat {
  padding: 13px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--bg-secondary);
  box-shadow: var(--shadow-xs);
  animation: govStatIn .5s cubic-bezier(.22, 1, .36, 1) both;
}
.gov-stat:nth-child(1) { animation-delay: .04s; }
.gov-stat:nth-child(2) { animation-delay: .09s; }
.gov-stat:nth-child(3) { animation-delay: .14s; }
.gov-stat:nth-child(4) { animation-delay: .19s; }
.gov-stat:nth-child(5) { animation-delay: .24s; }
.gov-stat:nth-child(6) { animation-delay: .29s; }
@keyframes govStatIn { from { opacity: 0; transform: translateY(10px); } }
.gov-stat b {
  display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 800;
  line-height: 1.1; color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.gov-stat span { display: block; margin-top: 3px; font-size: .68rem; color: var(--text-muted); font-weight: 600; }
.gov-stat--late { border-color: rgba(234, 67, 53, .4); background: linear-gradient(160deg, rgba(234, 67, 53, .1), var(--bg-secondary) 62%); }
.gov-stat--late b { color: #c62828; }
[data-theme="dark"] .gov-stat--late b { color: #ff8a80; }
.gov-stat--ok { border-color: rgba(52, 168, 83, .34); background: linear-gradient(160deg, rgba(52, 168, 83, .1), var(--bg-secondary) 62%); }
.gov-stat--ok b { color: var(--success); }

.gov-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-secondary); box-shadow: var(--shadow-xs); overflow: hidden;
}
.gov-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, hsl(var(--gov-navy) / .05), transparent);
}
.gov-card-head h3 {
  font-family: var(--font-display); font-size: .98rem; font-weight: 800; color: var(--text-primary);
}
.gov-card-head h3 i { color: hsl(var(--gov-navy)); margin-right: 6px; }
[data-theme="dark"] .gov-card-head h3 i { color: hsl(var(--gov-navy-2)); }
.gov-count {
  margin-left: auto; font-size: .7rem; font-weight: 700; color: var(--text-muted);
  padding: 3px 9px; border-radius: var(--radius-full);
  background: var(--bg-tertiary); border: 1px solid var(--border);
}

/* ---------- filters -------------------------------------------------------- */
.gov-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.gov-filters-sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; }
.gov-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--bg-primary);
  color: var(--text-secondary); font-family: inherit; font-size: .74rem; font-weight: 700;
  cursor: pointer; transition: var(--transition-fast);
}
.gov-chip b {
  font-size: .68rem; font-weight: 800; padding: 0 5px; border-radius: var(--radius-full);
  background: var(--bg-quaternary); color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.gov-chip:hover { border-color: hsl(var(--gov-navy) / .45); color: var(--text-primary); transform: translateY(-1px); }
.gov-chip.is-on {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, hsl(var(--gov-navy)), hsl(var(--gov-navy-2)));
  box-shadow: 0 4px 12px -6px hsl(var(--gov-navy) / 1);
}
[data-theme="dark"] .gov-chip.is-on { color: #0a0c10; }
.gov-chip.is-on b { background: rgba(255, 255, 255, .26); color: inherit; }
.gov-select {
  padding: 5px 10px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--bg-primary);
  color: var(--text-secondary); font-family: inherit; font-size: .74rem; font-weight: 700;
  cursor: pointer; transition: var(--transition-fast);
}
.gov-select:hover { border-color: hsl(var(--gov-navy) / .45); }

/* ---------- queue rows ----------------------------------------------------- */
.gov-rows { padding: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 62vh; overflow-y: auto; }
.gov-row {
  position: relative; display: flex; align-items: stretch; gap: 8px;
  border-radius: var(--radius-md); border: 1px solid transparent;
  background: var(--bg-primary); overflow: hidden;
  transition: border-color .2s, box-shadow .25s, transform .25s cubic-bezier(.22, 1, .36, 1), background .2s;
}
/* A status spine down the left edge, so a scan of the list reads as a chart. */
.gov-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gov-row-c, var(--border)); transition: width .2s;
}
.gov-row[data-status="new"]      { --gov-row-c: #ea4335; }
.gov-row[data-status="review"]   { --gov-row-c: #f0a500; }
.gov-row[data-status="progress"] { --gov-row-c: #4285f4; }
.gov-row[data-status="resolved"] { --gov-row-c: #34a853; }
.gov-row:hover { border-color: hsl(var(--gov-navy) / .3); box-shadow: var(--shadow-md); transform: translateX(2px); background: var(--bg-secondary); }
.gov-row:hover::before { width: 5px; }
.gov-row.is-late { background: linear-gradient(90deg, rgba(234, 67, 53, .09), var(--bg-primary) 45%); }
.gov-row-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; text-align: left; color: inherit;
}
.gov-row-ico {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; font-size: .9rem; color: #fff;
}
.gov-row-ico--wl { background: linear-gradient(135deg, #4285f4, #1a73e8); }
.gov-row-ico--dg { background: linear-gradient(135deg, #ea4335, #c62828); }
.gov-row-ico--gb { background: linear-gradient(135deg, #f0a500, #b58105); }
.gov-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gov-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gov-row-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; font-weight: 700; color: var(--text-primary); }
.gov-late {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .66rem; font-weight: 800; color: #c62828;
  animation: govBlink 2.4s ease-in-out infinite;
}
[data-theme="dark"] .gov-late { color: #ff8a80; }
@keyframes govBlink { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.gov-row-where { font-size: .79rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gov-row-where i { color: var(--text-muted); margin-right: 4px; font-size: .7rem; }
.gov-row-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .68rem; color: var(--text-muted); }
.gov-row-meta i { margin-right: 3px; }
.gov-row-act { flex: none; display: flex; align-items: center; gap: 5px; padding: 8px 10px 8px 0; }

.gov-mini {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-secondary);
  color: var(--text-secondary); font-family: inherit; font-size: .7rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: var(--transition-fast);
}
.gov-mini:hover { border-color: hsl(var(--gov-navy) / .5); color: hsl(var(--gov-navy)); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .gov-mini:hover { color: hsl(var(--gov-navy-2)); }
.gov-mini--ok:hover { border-color: rgba(52, 168, 83, .6); color: var(--success); background: var(--success-light); }
.gov-mini--no:hover { border-color: rgba(234, 67, 53, .6); color: #c62828; background: var(--danger-light); }
.gov-mini.is-armed {
  border-color: rgba(234, 67, 53, .7); color: #fff; background: #c62828;
  animation: govArm .5s cubic-bezier(.3, 1.4, .5, 1);
}
@keyframes govArm { 0% { transform: scale(1); } 45% { transform: scale(1.09); } 100% { transform: scale(1); } }

/* A row leaving the queue: it flashes the colour it just became, then folds away. */
.gov-row.is-flashing { animation: govFold .62s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes govFold {
  0%   { opacity: 1; transform: translateX(0); background: var(--success-light); }
  45%  { opacity: 1; transform: translateX(7px); background: var(--success-light); box-shadow: 0 8px 22px -12px rgba(52, 168, 83, .9); }
  100% { opacity: 0; transform: translateX(26px); max-height: 0; padding-block: 0; margin-bottom: -6px; }
}
.gov-empty {
  padding: 34px 18px; text-align: center; color: var(--text-muted); font-size: .84rem;
}
.gov-empty i { display: block; font-size: 1.6rem; margin-bottom: 9px; opacity: .55; }

/* ---------- register of officials ------------------------------------------ */
.gov-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 9px; padding: 14px 16px; }
.gov-person {
  display: flex; align-items: center; gap: 10px; padding: 10px 11px;
  border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-primary);
  transition: var(--transition-fast);
}
.gov-person:hover { border-color: hsl(var(--gov-gold) / .55); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.gov-person.is-self { border-color: hsl(var(--gov-gold) / .6); background: linear-gradient(120deg, hsl(var(--gov-gold) / .1), var(--bg-primary) 62%); }
.gov-person-av {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font-size: .74rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, hsl(var(--gov-navy)), hsl(var(--gov-navy-2)));
}
[data-theme="dark"] .gov-person-av { color: #0a0c10; }
.gov-person-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gov-person-body b { font-size: .82rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gov-person-body > span { font-size: .7rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gov-person-org { display: inline-flex; align-items: center; gap: 4px; color: hsl(var(--gov-navy)) !important; font-weight: 700; }
[data-theme="dark"] .gov-person-org { color: hsl(var(--gov-navy-2)) !important; }
.gov-you {
  flex: none; font-size: .6rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-full);
  color: hsl(var(--gov-gold)); background: hsl(var(--gov-gold) / .15); border: 1px solid hsl(var(--gov-gold) / .42);
}

.gov-appoint { padding: 4px 16px 16px; border-top: 1px dashed var(--border); margin-top: 2px; padding-top: 15px; }
.gov-appoint-title {
  font-size: .78rem; font-weight: 800; color: var(--text-primary); margin-bottom: 11px;
}
.gov-appoint-title i { color: hsl(var(--gov-gold)); margin-right: 5px; }
.gov-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 9px; margin-bottom: 11px; }
.gov-fields label { display: flex; flex-direction: column; gap: 4px; font-size: .68rem; font-weight: 700; color: var(--text-muted); letter-spacing: .03em; text-transform: uppercase; }
.gov-fields input {
  padding: 8px 11px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-primary); color: var(--text-primary);
  font-family: inherit; font-size: .82rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  transition: border-color .2s, box-shadow .2s;
}
.gov-fields input:focus { outline: none; border-color: hsl(var(--gov-navy) / .6); box-shadow: 0 0 0 3px hsl(var(--gov-navy) / .14); }
.gov-muted { color: var(--text-muted); font-size: .8rem; line-height: 1.6; }
.gov-tiny { font-size: .71rem; margin-top: 8px; }

/* ---------- locked / setup state ------------------------------------------- */
.gov-locked {
  position: relative; overflow: hidden; text-align: center;
  padding: 46px 26px; border-radius: var(--radius-xl);
  border: 1px solid hsl(var(--gov-navy) / .26); background: var(--bg-secondary);
  box-shadow: var(--shadow-md); max-width: 620px; margin: 8px auto;
}
.gov-locked h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; margin: 14px 0 8px; }
.gov-locked p { font-size: .85rem; color: var(--text-secondary); line-height: 1.65; max-width: 46ch; margin: 0 auto; }
.gov-locked > .gov-seal { margin: 0 auto; }
.gov-setup {
  margin-top: 18px; padding: 15px 17px; text-align: left;
  border-radius: var(--radius-md); border: 1px dashed hsl(var(--gov-gold) / .6);
  background: linear-gradient(140deg, hsl(var(--gov-gold) / .1), transparent 68%);
}
.gov-setup b { display: block; font-size: .84rem; margin-bottom: 6px; color: var(--text-primary); }
.gov-setup p { font-size: .79rem; color: var(--text-secondary); margin: 0 0 10px; max-width: none; }
.gov-setup code {
  padding: 1px 6px; border-radius: var(--radius-xs); font-size: .76rem;
  background: var(--bg-tertiary); border: 1px solid var(--border); color: hsl(var(--gov-navy));
}
[data-theme="dark"] .gov-setup code { color: hsl(var(--gov-navy-2)); }
.gov-setup--local { border-color: hsl(var(--gov-navy) / .45); background: linear-gradient(140deg, hsl(var(--gov-navy) / .1), transparent 68%); }

/* ---------- public service workspace ---------------------------------------
   Desk-only refinements: report controls and the officials register retain
   their existing presentation. The garden remains visible between surfaces. */
.gov-desk {
  --gov-teal: 174 72% 28%;
  --gov-amber: 35 88% 32%;
  --gov-alert: 8 65% 41%;
  gap: 20px; min-width: 0;
}
[data-theme="dark"] .gov-desk {
  --gov-teal: 171 63% 65%;
  --gov-amber: 40 92% 67%;
  --gov-alert: 9 88% 74%;
}
.gov-desk .gov-hero {
  align-items: flex-start; gap: 20px; padding: 28px;
  border-color: hsl(var(--gov-navy) / .22);
  background:
    radial-gradient(85% 150% at 100% 0%, hsl(var(--gov-teal) / .09), transparent 65%),
    linear-gradient(120deg, hsl(var(--gov-navy) / .07), transparent 65%),
    var(--bg-secondary);
  box-shadow: var(--shadow-sm);
}
.gov-desk .gov-hero::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, hsl(var(--gov-navy)), hsl(var(--gov-teal)), hsl(var(--gov-gold) / .55));
}
.gov-desk .gov-hero .gov-seal { margin-top: 5px; }
.gov-desk .gov-hero .gov-seal::before {
  animation: none; opacity: .25;
  background: radial-gradient(circle, hsl(var(--gov-gold-2) / .5), transparent 70%);
}
.gov-desk .gov-eyebrow {
  display: block; margin: 0 0 7px; font-size: .65rem; font-weight: 800;
  letter-spacing: .14em; line-height: 1.5; color: hsl(var(--gov-navy));
}
.gov-desk .gov-hero-txt h2 {
  margin: 0 0 8px; font-size: clamp(1.55rem, 2.4vw, 2rem);
  line-height: 1.2; letter-spacing: -.025em;
}
.gov-desk .gov-hero-desc { max-width: 58ch; margin: 0; font-size: .9rem; line-height: 1.65; }
.gov-desk .gov-identity { margin-top: 13px; }
.gov-desk .gov-identity, .gov-desk .gov-identity p {
  font-size: .78rem; line-height: 1.6; color: var(--text-secondary); overflow-wrap: anywhere;
}
.gov-desk .gov-identity i { margin-right: 5px; color: hsl(var(--gov-navy)); }
.gov-desk .gov-hero-meta {
  display: flex; flex: 0 1 210px; flex-direction: column; align-items: flex-end;
  gap: 10px; min-width: 0; padding-top: 4px; text-align: right;
}
.gov-desk .gov-data-mode {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px;
  border: 1px solid hsl(var(--gov-teal) / .2); border-radius: var(--radius-full);
  background: hsl(var(--gov-teal) / .07); color: hsl(var(--gov-teal));
  font-size: .71rem; font-weight: 700; line-height: 1.5;
}
.gov-desk .gov-scope { font-size: .73rem; line-height: 1.6; color: var(--text-secondary); overflow-wrap: anywhere; }

/* Actionable metrics and the four-stage workload. */
.gov-desk .gov-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gov-desk .gov-stat {
  --gov-accent: var(--gov-navy);
  position: relative; min-width: 0; min-height: 144px; padding: 20px 18px;
  text-align: left; font-family: inherit; cursor: pointer; color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 14px;
  background: linear-gradient(145deg, hsl(var(--gov-accent) / .045), transparent 75%), var(--bg-secondary);
  animation: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.gov-desk .gov-stat--late { --gov-accent: var(--gov-alert); }
.gov-desk .gov-stat--soon { --gov-accent: var(--gov-amber); }
.gov-desk .gov-stat--ok { --gov-accent: var(--gov-teal); }
.gov-desk .gov-stat .gov-stat-icon {
  position: absolute; top: 18px; right: 16px; display: grid; place-items: center;
  width: 32px; height: 32px; margin: 0; border-radius: 9px;
  background: hsl(var(--gov-accent) / .09); color: hsl(var(--gov-accent)); font-size: .9rem;
}
.gov-desk .gov-stat b {
  padding-right: 38px; font-size: clamp(1.7rem, 2.8vw, 2.15rem);
  font-weight: 700; line-height: 1.15; color: hsl(var(--gov-accent)); overflow-wrap: anywhere;
}
.gov-desk .gov-stat > span:not(.gov-stat-icon) {
  margin-top: 9px; font-size: .81rem; line-height: 1.4; color: var(--text-primary); font-weight: 700;
}
.gov-desk .gov-stat small { display: block; margin-top: 5px; color: var(--text-secondary); font-size: .71rem; line-height: 1.5; }
.gov-desk .gov-stat:is(.is-on, [aria-pressed="true"]) {
  border-color: hsl(var(--gov-accent) / .6); box-shadow: inset 0 -3px hsl(var(--gov-accent));
}
.gov-desk .gov-workload {
  min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-secondary); box-shadow: var(--shadow-xs);
}
.gov-desk .gov-workload-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 19px; }
.gov-desk .gov-workload-head h3, .gov-desk .gov-section-title h3 {
  margin: 0; color: var(--text-primary); font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; line-height: 1.4;
}
.gov-desk .gov-workload-head p, .gov-desk .gov-section-title p { margin: 4px 0 0; color: var(--text-secondary); font-size: .8rem; line-height: 1.6; }
.gov-desk .gov-resolution { flex: none; text-align: right; }
.gov-desk .gov-resolution strong {
  display: block; color: hsl(var(--gov-teal)); font-family: var(--font-display);
  font-size: 1.6rem; line-height: 1.2; font-variant-numeric: tabular-nums;
}
.gov-desk .gov-resolution span { color: var(--text-secondary); font-size: .7rem; }
.gov-desk .gov-workflow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gov-desk .gov-flow {
  --gov-accent: var(--gov-navy);
  display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0;
  padding: 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-primary); color: var(--text-primary); text-align: left; cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.gov-desk .gov-flow[data-stage="review"] { --gov-accent: var(--gov-amber); }
.gov-desk .gov-flow[data-stage="progress"], .gov-desk .gov-flow[data-stage="resolved"] { --gov-accent: var(--gov-teal); }
.gov-desk .gov-flow-label { display: flex; align-items: center; gap: 7px; font-size: .75rem; font-weight: 700; line-height: 1.5; }
.gov-desk .gov-flow-label i { color: hsl(var(--gov-accent)); }
.gov-desk .gov-flow > b { font-size: 1.3rem; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.gov-desk .gov-flow-meter, .gov-desk .gov-clock-meter {
  display: block; height: 5px; overflow: hidden; border-radius: var(--radius-full); background: hsl(var(--gov-accent) / .12);
}
.gov-desk .gov-flow-meter > i, .gov-desk .gov-clock-meter > i {
  display: block; width: clamp(0%, var(--gov-share, 0%), 100%); height: 100%;
  border-radius: inherit; background: hsl(var(--gov-accent)); transform-origin: left;
  transition: width .35s ease;
}
.gov-desk .gov-flow-meter > i { animation: govWorkloadFill .42s var(--ease-out) backwards; }
.gov-desk .gov-flow:is(.is-on, [aria-pressed="true"]) { border-color: hsl(var(--gov-accent) / .6); background: hsl(var(--gov-accent) / .06); }
@keyframes govWorkloadFill { from { transform: scaleX(0); } }

/* Tabs, search and independent status/deadline filters. */
.gov-desk .gov-tabs {
  display: flex; gap: 6px; padding: 6px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--bg-secondary);
}
.gov-desk .gov-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 0; min-height: 46px; padding: 10px 14px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--text-secondary); font-size: .83rem; font-weight: 700; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.gov-desk .gov-tab > span { min-width: 0; }
.gov-desk .gov-tab b, .gov-desk .gov-tab .gov-count {
  flex: none; margin: 0; padding: 1px 6px; border: 0; border-radius: var(--radius-full);
  background: hsl(var(--gov-navy) / .08); color: inherit; font-size: .67rem; font-variant-numeric: tabular-nums;
}
.gov-desk .gov-tab[aria-selected="true"] {
  color: hsl(var(--gov-navy)); background: hsl(var(--gov-navy) / .08); border-color: hsl(var(--gov-navy) / .17);
  box-shadow: inset 0 -2px hsl(var(--gov-navy));
}
.gov-desk .gov-tab-panel { min-width: 0; animation: govTabEnter .18s ease-out backwards; }
.gov-desk .gov-tab-panel[hidden] { display: none !important; }
@keyframes govTabEnter { from { opacity: 0; transform: translateY(4px); } }
.gov-desk .gov-section-title { flex: 1; min-width: 0; padding: 3px 0; }
.gov-desk .gov-toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px; padding: 18px 18px 12px; }
.gov-desk .gov-search {
  display: flex; flex: 1 1 240px; align-items: center; gap: 10px; min-width: 0;
  min-height: 46px; padding: 0 13px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-primary); color: var(--text-muted);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.gov-desk .gov-search input {
  flex: 1; width: 100%; min-width: 0; min-height: 44px; padding: 10px 0;
  border: 0; border-radius: 0; outline: none; box-shadow: none;
  background: transparent; color: var(--text-primary); font-family: inherit; font-size: .88rem;
}
.gov-desk .gov-search input::placeholder { color: var(--text-muted); opacity: 1; }
.gov-desk .gov-search:focus-within { border-color: hsl(var(--gov-navy) / .65); box-shadow: 0 0 0 3px hsl(var(--gov-navy) / .12); }
.gov-desk .gov-selects { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 10px; min-width: 0; }
.gov-desk .gov-selects label { display: flex; flex: 1 1 130px; flex-direction: column; gap: 5px; min-width: 0; }
.gov-desk .gov-selects label > span { color: var(--text-secondary); font-size: .7rem; font-weight: 700; }
.gov-desk .gov-selects .gov-select {
  width: 100%; max-width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px;
  border-radius: 10px; color: var(--text-primary); font-size: .82rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.gov-desk .gov-filters { padding: 8px 18px; border-bottom: 0; }
.gov-desk .gov-deadlines { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 4px 18px 14px; }
.gov-desk :is(.gov-filters, .gov-deadlines) .gov-chip {
  min-height: 44px; padding: 8px 12px; font-size: .75rem;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.gov-desk :is(.gov-filters, .gov-deadlines) .gov-chip:hover { transform: none; }
.gov-desk .gov-queue-note, .gov-desk .gov-activity-intro {
  margin: 0; padding: 12px 18px; border-block: 1px solid var(--border);
  background: hsl(var(--gov-navy) / .025); color: var(--text-secondary); font-size: .76rem; line-height: 1.65;
}
.gov-desk .gov-result-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 18px; }
.gov-desk .gov-result-count { color: var(--text-secondary); font-size: .77rem; line-height: 1.5; }
.gov-desk .gov-result-count b, .gov-desk .gov-result-count strong { color: var(--text-primary); }
.gov-desk .gov-clear {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: hsl(var(--gov-navy)); font-size: .75rem; font-weight: 700; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

/* A page-sized queue, not a nested scrolling region. */
.gov-desk .gov-rows { max-height: none; overflow: visible; gap: 10px; padding: 0 14px 14px; }
.gov-desk .gov-row {
  gap: 12px; border-color: var(--border); border-radius: 12px;
  background: var(--bg-primary); transform: none;
  animation: govQueueEnter .25s ease-out backwards;
  animation-delay: min(calc(var(--gov-row-index, 0) * 24ms), 144ms);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.gov-desk .gov-row:hover { transform: none; box-shadow: none; }
.gov-desk .gov-row:hover::before { width: 3px; }
.gov-desk .gov-row.is-late { border-left-color: hsl(var(--gov-alert) / .45); }
.gov-desk .gov-row-main { gap: 12px; padding: 17px 14px; min-height: 44px; }
.gov-desk .gov-row-body { gap: 7px; }
.gov-desk .gov-row-top { gap: 7px; }
.gov-desk .gov-row-id { font-size: .8rem; }
.gov-desk .gov-hazard { color: var(--text-secondary); font-size: .7rem; font-weight: 600; }
.gov-desk .gov-row-where { font-size: .87rem; font-weight: 600; color: var(--text-primary); }
.gov-desk .gov-row-summary {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere; margin: 0;
  color: var(--text-secondary); font-size: .79rem; line-height: 1.6;
}
.gov-desk .gov-row-meta { font-size: .71rem; line-height: 1.5; overflow-wrap: anywhere; }
.gov-desk .gov-row-act {
  flex: 0 0 154px; flex-direction: column; justify-content: center; align-items: stretch;
  gap: 10px; padding: 14px 14px 14px 0;
}
.gov-desk .gov-clock { --gov-accent: var(--gov-navy); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gov-desk .gov-clock.is-late { --gov-accent: var(--gov-alert); }
.gov-desk .gov-clock.is-soon { --gov-accent: var(--gov-amber); }
.gov-desk .gov-clock b { color: hsl(var(--gov-accent)); font-size: .71rem; font-weight: 800; line-height: 1.4; }
.gov-desk .gov-clock > span { color: var(--text-secondary); font-size: .7rem; line-height: 1.5; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gov-desk .gov-clock .gov-clock-meter { height: 4px; margin-top: 3px; }
.gov-desk .gov-late { animation: none; }
.gov-desk :is(.gov-row-act, .gov-pagination, .gov-empty) .gov-mini {
  min-height: 44px; justify-content: center; padding: 10px 12px; border-radius: 8px;
  color: hsl(var(--gov-navy)); font-size: .75rem;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.gov-desk :is(.gov-row-act, .gov-pagination, .gov-empty) .gov-mini:hover { transform: none; box-shadow: none; }
.gov-desk :is(.gov-row-act, .gov-pagination, .gov-empty) .gov-mini:disabled {
  opacity: .45; cursor: not-allowed; border-color: var(--border); background: var(--bg-secondary); transform: none; box-shadow: none;
}
.gov-desk .gov-pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px; border-top: 1px solid var(--border);
}
.gov-desk .gov-page-label { min-width: 0; color: var(--text-secondary); font-size: .76rem; text-align: center; font-variant-numeric: tabular-nums; }
.gov-desk .gov-page-label b { color: var(--text-primary); }
.gov-desk .gov-empty { padding: 40px 20px; }
.gov-desk .gov-empty h4 { margin: 0 0 8px; color: var(--text-primary); font-size: 1.05rem; }
.gov-desk .gov-empty p { max-width: 48ch; margin: 0 auto 18px; color: var(--text-secondary); font-size: .85rem; line-height: 1.65; }
.gov-desk .gov-empty button i { display: inline; margin: 0; font-size: inherit; opacity: 1; }
@keyframes govQueueEnter { from { opacity: 0; transform: translateY(6px); } }

/* Readable, chronological activity with restrained status accents. */
.gov-desk .gov-activity { margin: 0; padding: 4px 22px; list-style: none; }
.gov-desk .gov-activity-item { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 20px 0; }
.gov-desk .gov-activity-item:not(:last-child) { border-bottom: 1px solid var(--border); }
.gov-desk .gov-activity-icon {
  --gov-accent: var(--gov-navy);
  flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid hsl(var(--gov-accent) / .18);
  background: hsl(var(--gov-accent) / .08); color: hsl(var(--gov-accent)); font-size: .84rem;
}
.gov-desk .gov-activity-icon[data-stage="review"] { --gov-accent: var(--gov-amber); }
.gov-desk .gov-activity-icon[data-stage="resolved"] { --gov-accent: var(--gov-teal); }
.gov-desk .gov-activity-body { flex: 1; min-width: 0; }
.gov-desk .gov-activity-body header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.gov-desk .gov-activity-link {
  display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0; padding: 6px 0;
  border: 0; border-radius: 4px; background: transparent; color: hsl(var(--gov-navy));
  font-size: .84rem; font-weight: 800; text-align: left; overflow-wrap: anywhere; cursor: pointer;
  text-decoration: underline; text-decoration-color: hsl(var(--gov-navy) / .25); text-underline-offset: 4px;
  transition: text-decoration-color .18s ease;
}
.gov-desk .gov-activity-body p { margin: 5px 0 0; color: var(--text-secondary); font-size: .81rem; line-height: 1.6; overflow-wrap: anywhere; }
.gov-desk .gov-activity-body blockquote {
  margin: 10px 0; padding: 10px 13px; border-left: 2px solid hsl(var(--gov-navy) / .3);
  border-radius: 0 7px 7px 0; background: var(--bg-primary);
  color: var(--text-secondary); font-size: .81rem; line-height: 1.7; overflow-wrap: anywhere;
}
.gov-desk .gov-activity-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 8px; color: var(--text-muted); font-size: .71rem; line-height: 1.6; overflow-wrap: anywhere; }
.gov-desk .gov-activity-meta i { margin-right: 4px; }

/* Keyboard feedback is independent of pointer hover. */
.gov-desk :is(.gov-stat, .gov-flow, .gov-tab, .gov-chip, .gov-select, .gov-clear, .gov-row-main, .gov-activity-link):focus-visible,
.gov-desk :is(.gov-row-act, .gov-pagination, .gov-empty) .gov-mini:focus-visible {
  outline: 2px solid hsl(var(--gov-navy)); outline-offset: 3px;
}
.gov-desk .gov-row-main:focus-visible { outline-offset: -4px; border-radius: 10px; }
.gov-desk .gov-row:focus-within { border-color: hsl(var(--gov-navy) / .5); }
@media (hover: hover) and (pointer: fine) {
  .gov-desk .gov-stat:hover { transform: translateY(-2px); border-color: hsl(var(--gov-accent) / .45); box-shadow: var(--shadow-sm); }
  .gov-desk .gov-flow:hover { border-color: hsl(var(--gov-accent) / .45); background: hsl(var(--gov-accent) / .04); }
  .gov-desk .gov-tab:hover { color: hsl(var(--gov-navy)); background: hsl(var(--gov-navy) / .05); }
  .gov-desk .gov-clear:hover { border-color: hsl(var(--gov-navy) / .2); background: hsl(var(--gov-navy) / .05); }
  .gov-desk .gov-row:hover { border-color: hsl(var(--gov-navy) / .35); background: var(--bg-secondary); }
  .gov-desk :is(.gov-row-act, .gov-pagination, .gov-empty) .gov-mini:hover:not(:disabled) { background: hsl(var(--gov-navy) / .07); border-color: hsl(var(--gov-navy) / .4); }
  .gov-desk .gov-activity-link:hover { text-decoration-color: currentColor; }
}
@media (max-width: 1000px) {
  .gov-desk .gov-hero { flex-wrap: wrap; }
  .gov-desk .gov-hero-meta { flex: 1 0 100%; flex-direction: row; align-items: center; flex-wrap: wrap; text-align: left; padding-top: 2px; }
  .gov-desk .gov-selects { flex: 1 1 260px; }
}

/* ---------- phones --------------------------------------------------------- */
@media (max-width: 768px) {
  .gov-hero { flex-wrap: wrap; padding: 16px; gap: 11px; }
  .gov-hero-live { order: 3; }
  .gov-hero-txt h2 { font-size: 1.12rem; }
  .gov-seal--lg { width: 40px; height: 40px; }
  .gov-track { grid-template-columns: repeat(4, 1fr); gap: 3px; }
  .gov-stage { padding: 7px 2px 6px; font-size: .58rem; gap: 4px; }
  .gov-stage-dot { width: 26px; height: 26px; font-size: .7rem; }
  .gov-commit { flex-direction: column; }
  .gov-btn { justify-content: center; }
  .gov-row { flex-direction: column; }
  .gov-row-act { padding: 0 10px 10px; justify-content: flex-end; }
  .gov-row-meta { gap: 9px; }
  .gov-rows { max-height: none; }
  .gov-stats { grid-template-columns: repeat(2, 1fr); }
  .gov-tag { font-size: .57rem; padding: 2px 7px 2px 4px; margin-left: 5px; }
  .gov-panel { padding: 13px 12px 14px; }
  .gov-filters-sep { display: none; }

  .gov-desk { gap: 16px; }
  .gov-desk .gov-hero { padding: 20px 16px; gap: 14px; }
  .gov-desk .gov-hero-txt h2 { font-size: 1.55rem; }
  .gov-desk .gov-eyebrow { font-size: .59rem; letter-spacing: .1em; }
  .gov-desk .gov-hero-desc { font-size: .83rem; }
  .gov-desk .gov-hero-meta { gap: 8px 12px; padding-top: 12px; border-top: 1px solid hsl(var(--gov-navy) / .12); }
  .gov-desk .gov-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gov-desk .gov-stat { min-height: 136px; padding: 16px 12px; }
  .gov-desk .gov-stat .gov-stat-icon { top: 16px; right: 12px; width: 28px; height: 28px; font-size: .8rem; }
  .gov-desk .gov-stat b { font-size: 1.8rem; padding-right: 30px; }
  .gov-desk .gov-stat > span:not(.gov-stat-icon) { font-size: .78rem; }
  .gov-desk .gov-workload { padding: 18px 14px; }
  .gov-desk .gov-workload-head { gap: 10px; }
  .gov-desk .gov-workload-head h3, .gov-desk .gov-section-title h3 { font-size: 1rem; }
  .gov-desk .gov-workload-head p { font-size: .75rem; }
  .gov-desk .gov-resolution strong { font-size: 1.4rem; }
  .gov-desk .gov-workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gov-desk .gov-flow { padding: 12px; }
  .gov-desk .gov-tabs { gap: 3px; padding: 4px; }
  .gov-desk .gov-tab { gap: 6px; min-height: 48px; padding: 10px 6px; font-size: .75rem; flex-wrap: wrap; }
  .gov-desk .gov-toolbar { flex-direction: column; align-items: stretch; padding: 16px 14px 10px; gap: 12px; }
  .gov-desk .gov-search { flex: none; width: 100%; }
  .gov-desk .gov-search input { font-size: 1rem; }
  .gov-desk .gov-selects { flex: none; width: 100%; gap: 8px; }
  .gov-desk .gov-selects label { flex-basis: 120px; }
  .gov-desk .gov-selects .gov-select { padding-inline: 8px; font-size: 1rem; font-weight: 500; }
  .gov-desk .gov-filters { padding: 8px 14px; gap: 6px; }
  .gov-desk .gov-deadlines { padding: 4px 14px 12px; gap: 6px; }
  .gov-desk :is(.gov-filters, .gov-deadlines) .gov-chip { padding-inline: 10px; font-size: .72rem; }
  .gov-desk .gov-queue-note, .gov-desk .gov-activity-intro { padding: 12px 14px; }
  .gov-desk .gov-result-head { padding: 8px 14px; flex-wrap: wrap; gap: 2px 8px; }
  .gov-desk .gov-clear { margin-left: auto; }
  .gov-desk .gov-rows { padding: 0 10px 10px; }
  .gov-desk .gov-row { flex-direction: column; gap: 0; }
  .gov-desk .gov-row-main { width: 100%; padding: 15px 12px; gap: 10px; }
  .gov-desk .gov-row-top { gap: 6px; }
  .gov-desk .gov-row-where { font-size: .82rem; }
  .gov-desk .gov-row-act {
    flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 12px; padding: 12px; border-top: 1px solid var(--border);
  }
  .gov-desk .gov-row-act .gov-mini { padding-inline: 10px; }
  .gov-desk .gov-pagination { gap: 8px; padding: 12px 10px; }
  .gov-desk .gov-pagination .gov-mini { padding-inline: 9px; }
  .gov-desk .gov-page-label { font-size: .7rem; }
  .gov-desk .gov-activity { padding: 0 14px; }
  .gov-desk .gov-activity-item { gap: 10px; padding: 18px 0; }
  .gov-desk .gov-activity-icon { width: 30px; height: 30px; font-size: .76rem; }
  .gov-desk .gov-activity-body blockquote { padding: 9px 10px; }
}
@media (max-width: 420px) {
  .gov-desk .gov-tab > i { display: none; }
  .gov-desk .gov-tab b, .gov-desk .gov-tab .gov-count { padding-inline: 4px; }
  .gov-desk .gov-resolution { max-width: 82px; }
}

/* ---------- respect a request for less motion ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .gov-seal::before, .gov-tag::after, .gov-sla.is-late, .gov-late,
  .gov-hero-live i, .gov-stage.is-picked .gov-stage-dot { animation: none !important; }
  .gov-panel.is-stamping::after, .gov-panel.is-stamping .gov-seal,
  .gov-btn.is-stamped, .gov-row.is-flashing, .gov-mini.is-armed { animation: none !important; }
  .gov-track-fill, .gov-stage, .gov-row, .gov-stat { transition: none !important; }
  .gov-row.is-flashing { opacity: .35; }
  .gov-desk, .gov-desk *, .gov-desk::before, .gov-desk::after,
  .gov-desk *::before, .gov-desk *::after { animation: none !important; transition: none !important; }
}
html.reduce-motion .gov-desk,
html.reduce-motion .gov-desk *,
html.reduce-motion .gov-desk::before,
html.reduce-motion .gov-desk::after,
html.reduce-motion .gov-desk *::before,
html.reduce-motion .gov-desk *::after { animation: none !important; transition: none !important; }
html.reduce-motion .gov-seal::before,
html.reduce-motion .gov-tag::after,
html.reduce-motion .gov-sla.is-late,
html.reduce-motion .gov-late,
html.reduce-motion .gov-hero-live i,
html.reduce-motion .gov-stage.is-picked .gov-stage-dot,
html.reduce-motion .gov-panel.is-stamping::after,
html.reduce-motion .gov-panel.is-stamping .gov-seal,
html.reduce-motion .gov-btn.is-stamped,
html.reduce-motion .gov-row.is-flashing { animation: none !important; }

/* The government nav entry, its label and the sidebar seal are toggled with the
   [hidden] attribute, but .nav-item and .sidebar-seal set their own display and
   would otherwise win, leaving the entry visible to everyone. */
.nav-item[hidden],
.nav-label[hidden],
.sidebar-seal[hidden],
.nav-badge[hidden] { display: none !important; }
.comment-author .btn,
.comm-reply-main .btn,
.event-actions .btn-danger { margin-left: 8px; }
#adminReason { width: 100%; margin-top: 4px; }

/* Site administration: ink surfaces, clear authority, deliberate actions. */
.admin-desk, .admin-confirm-dialog {
  --admin-blue: 216 78% 38%;
  --admin-cyan: 190 74% 28%;
  --admin-danger: 6 65% 40%;
  --admin-amber: 35 85% 30%;
  --bg-primary: #f5f7fb;
  --bg-secondary: #ffffff;
  --bg-tertiary: #edf1f7;
  --text-primary: #16243b;
  --text-secondary: #4c5b70;
  --text-muted: #627087;
  --border: #d9e1eb;
  --gov-navy: var(--admin-blue);
  color: var(--text-primary); min-width: 0; overflow-wrap: anywhere;
}
[data-theme="dark"] :is(.admin-desk, .admin-confirm-dialog) {
  --admin-blue: 213 90% 75%;
  --admin-cyan: 186 64% 66%;
  --admin-danger: 7 88% 76%;
  --admin-amber: 40 92% 71%;
  --bg-primary: #101a2a;
  --bg-secondary: #172337;
  --bg-tertiary: #1f2e44;
  --text-primary: #edf3fc;
  --text-secondary: #c1cee0;
  --text-muted: #a1b1c7;
  --border: #34455e;
  color-scheme: dark;
}
.admin-desk > *, .admin-desk .gov-card { min-width: 0; max-width: 100%; }
.admin-desk .admin-hero {
  display: flex; align-items: flex-start; gap: 20px; padding: 28px;
  border: 1px solid #304665; border-radius: var(--radius-xl);
  background: radial-gradient(ellipse at 100% 0%, #1a4d68 0%, transparent 62%), linear-gradient(120deg, #142139, #172f51);
  color: #f1f6ff; box-shadow: var(--shadow-sm);
}
.admin-desk .admin-mark {
  display: grid; place-items: center; flex: none; width: 52px; height: 58px;
  border: 1px solid #557b9b; border-radius: 14px; background: #ffffff0d;
  color: #b4e9f4; font-size: 1.55rem;
}
.admin-desk .admin-hero-copy { flex: 1; min-width: 0; }
.admin-desk .admin-eyebrow {
  display: block; margin: 0 0 8px; color: #b4dbe9; font-size: .66rem;
  font-weight: 800; line-height: 1.5; letter-spacing: .13em; text-transform: uppercase;
}
.admin-desk .admin-hero h2 {
  margin: 0 0 10px; color: #f5f8ff; font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.15rem); font-weight: 700; line-height: 1.2; letter-spacing: -.025em;
}
.admin-desk .admin-hero-copy > p { max-width: 57ch; margin: 0; color: #cfdaeb; font-size: .87rem; line-height: 1.7; }
.admin-desk .admin-identity, .admin-desk .admin-identity p {
  margin: 14px 0 0; color: #d9e5f4; font-size: .76rem; line-height: 1.6; overflow-wrap: anywhere;
}
.admin-desk .admin-identity i { margin-right: 6px; color: #a9d8ed; }
.admin-desk .admin-hero-side {
  display: flex; flex: 0 1 225px; flex-direction: column; align-items: flex-end;
  gap: 10px; min-width: 0; text-align: right;
}
.admin-desk .admin-authority {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 7px 10px;
  border: 1px solid #7596b4; border-radius: 7px; background: #ffffff0a;
  color: #ecf6ff; font-size: .71rem; font-weight: 800; line-height: 1.5;
}
.admin-desk .admin-authority i { color: #b5eaf2; }
.admin-desk .admin-mode { color: #b9e4ee; font-size: .73rem; line-height: 1.5; }
.admin-desk .admin-sync { margin: 0; color: #bfcee0; font-size: .69rem; line-height: 1.6; font-variant-numeric: tabular-nums; }
.admin-desk :is(.admin-action, .admin-primary, .admin-refresh), .admin-confirm-dialog .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 0; min-height: 44px; max-width: 100%; padding: 10px 13px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-secondary);
  color: hsl(var(--admin-blue)); font-family: inherit; font-size: .77rem; font-weight: 700;
  line-height: 1.5; text-align: center; white-space: normal; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.admin-desk .admin-refresh { border-color: #7895b2; background: #ffffff0d; color: #f1f6ff; }
.admin-desk .admin-primary, .admin-confirm-dialog .btn-primary {
  border-color: hsl(var(--admin-blue)); background: hsl(var(--admin-blue)); color: var(--bg-secondary); box-shadow: none;
}
.admin-desk .admin-action.is-danger {
  border-color: hsl(var(--admin-danger) / .3); color: hsl(var(--admin-danger)); background: hsl(var(--admin-danger) / .035);
}
.admin-desk .admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.admin-desk .admin-stat {
  display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-content: start; gap: 6px 8px;
  min-width: 0; min-height: 145px; padding: 18px; border: 1px solid var(--border); border-radius: 12px;
  background: linear-gradient(135deg, hsl(var(--admin-blue) / .035), transparent 70%), var(--bg-secondary);
  color: var(--text-primary); text-align: left; cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.admin-desk .admin-stat-icon {
  display: grid; place-items: center; grid-column: 2; grid-row: 1;
  width: 34px; height: 34px; border-radius: 9px; background: hsl(var(--admin-blue) / .08);
  color: hsl(var(--admin-blue)); font-size: .95rem;
}
.admin-desk .admin-stat strong {
  grid-column: 1; grid-row: 1; align-self: center; min-width: 0;
  color: var(--text-primary); font-family: var(--font-display); font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums;
}
.admin-desk .admin-stat > span:not(.admin-stat-icon) { grid-column: 1 / -1; margin-top: 3px; font-size: .81rem; font-weight: 700; line-height: 1.5; }
.admin-desk .admin-stat small { grid-column: 1 / -1; color: var(--text-secondary); font-size: .71rem; line-height: 1.5; }
.admin-desk .admin-stat:is(.is-on, [aria-pressed="true"]) { border-color: hsl(var(--admin-blue) / .65); box-shadow: inset 0 -3px hsl(var(--admin-blue)); }
.admin-desk .admin-stat[data-kind="officials"] .admin-stat-icon { background: hsl(var(--admin-cyan) / .09); color: hsl(var(--admin-cyan)); }
.admin-desk .admin-nav {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 5px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-secondary);
}
.admin-desk .admin-tab {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 46px; padding: 10px;
  border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-secondary);
  font-size: .81rem; font-weight: 700; line-height: 1.5; white-space: normal; cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.admin-desk .admin-tab > span { min-width: 0; }
.admin-desk .admin-tab[aria-selected="true"] {
  border-color: hsl(var(--admin-blue) / .2); background: hsl(var(--admin-blue) / .08);
  color: hsl(var(--admin-blue)); box-shadow: inset 0 -2px hsl(var(--admin-blue));
}
.admin-desk .admin-panel { min-width: 0; animation: govTabEnter .18s ease-out backwards; }
.admin-desk [hidden], .admin-confirm-dialog [hidden] { display: none !important; }
.admin-desk .admin-section-head {
  display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
  gap: 12px; padding: 22px 22px 16px; border-bottom: 1px solid var(--border);
}
.admin-desk .admin-section-head > div { flex: 1; min-width: 0; }
.admin-desk :is(.admin-section-head, .admin-appoint) :is(h3, h4) { margin: 0; color: var(--text-primary); font-size: 1.1rem; font-weight: 700; line-height: 1.4; }
.admin-desk :is(.admin-section-head, .admin-appoint) p { margin: 5px 0 0; color: var(--text-secondary); font-size: .8rem; line-height: 1.65; }
.admin-desk .admin-section-head > :is(span, small, strong) { font-size: .73rem; line-height: 1.6; color: var(--text-secondary); }
.admin-desk .admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px 22px 8px; }
.admin-desk .admin-search {
  display: flex; flex: 1 1 240px; align-items: center; gap: 10px; min-width: 0; min-height: 46px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg-primary); color: var(--text-muted);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.admin-desk .admin-search input {
  width: 100%; min-width: 0; min-height: 44px; padding: 10px 0; margin: 0; border: 0; border-radius: 4px;
  box-shadow: none; background: transparent; color: var(--text-primary); font-size: 1rem;
}
.admin-desk .admin-search:focus-within { border-color: hsl(var(--admin-blue)); box-shadow: 0 0 0 3px hsl(var(--admin-blue) / .12); }
.admin-desk .admin-select { flex: 1 1 155px; }
.admin-desk .admin-select, .admin-desk .admin-appoint :is(input, select, textarea), .admin-confirm-dialog :is(input, select, textarea) {
  min-width: 0; max-width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg-primary);
  color: var(--text-primary); font: inherit; font-size: 1rem; line-height: 1.5;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.admin-desk input::placeholder, .admin-desk textarea::placeholder, .admin-confirm-dialog textarea::placeholder { color: var(--text-muted); opacity: 1; }
.admin-desk .admin-results { min-width: 0; }
.admin-desk .admin-result-head { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 22px; color: var(--text-secondary); font-size: .75rem; line-height: 1.6; }
.admin-desk .admin-result-head strong { color: var(--text-primary); }
.admin-desk .admin-content-list { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }
.admin-desk .admin-content-row {
  display: flex; align-items: stretch; gap: 18px; min-width: 0; padding: 18px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--bg-primary);
  animation: govQueueEnter .22s ease-out backwards;
  animation-delay: min(calc(var(--admin-row-index, 0) * 20ms), 100ms);
  transition: border-color .18s ease;
}
.admin-desk .admin-content-body { flex: 1; min-width: 0; }
.admin-desk .admin-content-top { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.admin-desk .admin-kind {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 5px;
  background: hsl(var(--admin-blue) / .09); color: hsl(var(--admin-blue)); font-size: .65rem; font-weight: 800; line-height: 1.5;
}
.admin-desk .admin-content-top code { min-width: 0; color: var(--text-muted); font-size: .72rem; white-space: normal; overflow-wrap: anywhere; }
.admin-desk .admin-content-top .status-pill { max-width: 100%; font-size: .64rem; white-space: normal; }
.admin-desk .admin-content-body h4 { margin: 0 0 7px; color: var(--text-primary); font-size: .98rem; font-weight: 700; line-height: 1.5; }
.admin-desk .admin-content-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin: 0; color: var(--text-secondary); font-size: .8rem; line-height: 1.65; overflow-wrap: anywhere;
}
.admin-desk .admin-content-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 12px; color: var(--text-muted); font-size: .71rem; line-height: 1.6; }
.admin-desk .admin-content-meta > * { min-width: 0; }
.admin-desk .admin-content-meta i { margin-right: 4px; }
.admin-desk .admin-content-actions { display: flex; flex: 0 0 118px; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
.admin-desk .admin-pagination {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 14px 22px; border-top: 1px solid var(--border);
}
.admin-desk .admin-pagination > span { min-width: 0; color: var(--text-secondary); font-size: .74rem; text-align: center; font-variant-numeric: tabular-nums; }
.admin-desk .admin-empty { padding: 44px 20px; text-align: center; }
.admin-desk .admin-empty > i { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 14px; background: hsl(var(--admin-blue) / .07); color: hsl(var(--admin-blue)); font-size: 1.25rem; }
.admin-desk .admin-empty h4 { margin: 0 0 8px; color: var(--text-primary); font-size: 1.08rem; }
.admin-desk .admin-empty p { max-width: 48ch; margin: 0 auto; color: var(--text-secondary); font-size: .84rem; line-height: 1.7; }
.admin-desk .admin-empty .admin-action { margin-top: 16px; }

/* Access management and an unclipped audit trail. */
.admin-desk :is(.admin-access-notice, .admin-safety-note, .admin-banner) {
  min-width: 0; padding: 14px 16px; border: 1px solid hsl(var(--admin-blue) / .2); border-radius: 9px;
  background: hsl(var(--admin-blue) / .045); color: var(--text-secondary); font-size: .8rem; line-height: 1.7;
}
.admin-desk :is(.admin-access-notice, .admin-safety-note) { margin: 18px 22px; }
.admin-desk :is(.admin-access-notice, .admin-safety-note, .admin-banner) p { margin: 0; font-size: inherit; line-height: inherit; }
.admin-desk :is(.admin-access-notice, .admin-safety-note, .admin-banner) p + p { margin-top: 8px; }
.admin-desk :is(.admin-access-notice, .admin-safety-note, .admin-banner) i { color: hsl(var(--admin-blue)); margin-right: 5px; }
.admin-desk .admin-banner:is(.is-warning, .is-setup) { border-color: hsl(var(--admin-amber) / .35); background: hsl(var(--admin-amber) / .07); }
.admin-desk .admin-banner:is(.is-warning, .is-setup) i { color: hsl(var(--admin-amber)); }
.admin-desk .admin-banner code {
  padding: 2px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-secondary);
  color: var(--text-primary); font-size: .76rem; white-space: pre-wrap; overflow-wrap: anywhere;
}
.admin-desk .admin-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 12px; padding: 0 22px 22px; }
.admin-desk .admin-person { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-primary); }
.admin-desk .admin-avatar { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid hsl(var(--admin-blue) / .15); border-radius: 11px; background: hsl(var(--admin-blue) / .09); color: hsl(var(--admin-blue)); font-size: .83rem; font-weight: 800; }
.admin-desk .admin-person > :not(.admin-avatar) { min-width: 0; }
.admin-desk .admin-person h4 { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--text-primary); }
.admin-desk .admin-person p { margin: 3px 0 0; color: var(--text-secondary); font-size: .76rem; line-height: 1.6; }
.admin-desk .admin-person-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; margin-top: 9px; color: var(--text-secondary); font-size: .69rem; line-height: 1.6; }
.admin-desk .admin-person-meta :is(.badge, .gov-tag) { max-width: 100%; margin: 0; white-space: normal; }
.admin-desk .admin-person > .admin-action { grid-column: 2; justify-self: start; }
.admin-desk .admin-appoint { margin: 0; padding: 22px; border-top: 1px solid var(--border); }
.admin-desk .admin-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0 14px; }
.admin-desk .admin-appoint label, .admin-confirm-dialog .admin-status-options label { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--text-secondary); font-size: .76rem; font-weight: 700; line-height: 1.6; }
.admin-desk .admin-appoint :is(input, select, textarea), .admin-confirm-dialog :is(input, select, textarea) { width: 100%; font-weight: 400; }
.admin-desk .admin-appoint textarea, .admin-confirm-dialog textarea { min-height: 106px; resize: vertical; }
.admin-desk .admin-appoint .admin-primary { margin-top: 16px; }
.admin-desk .admin-log-list { padding: 0 22px; }
.admin-desk .admin-log-entry { display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 22px 0; }
.admin-desk .admin-log-entry + .admin-log-entry { border-top: 1px solid var(--border); }
.admin-desk .admin-log-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1px solid hsl(var(--admin-blue) / .18); border-radius: 10px; background: hsl(var(--admin-blue) / .07); color: hsl(var(--admin-blue)); font-size: .85rem; }
.admin-desk .admin-log-body { flex: 1; min-width: 0; }
.admin-desk .admin-log-body header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; }
.admin-desk .admin-log-body header :is(h4, strong) { margin: 0; font-size: .88rem; font-weight: 700; color: var(--text-primary); line-height: 1.5; }
.admin-desk .admin-log-body time { color: var(--text-muted); font-size: .71rem; line-height: 1.6; font-variant-numeric: tabular-nums; }
.admin-desk .admin-log-target { margin-top: 7px; color: hsl(var(--admin-blue)); font-size: .73rem; line-height: 1.6; overflow-wrap: anywhere; }
.admin-desk .admin-log-body p {
  display: block; max-height: none; overflow: visible; margin: 10px 0 0; padding: 11px 13px;
  border-left: 2px solid hsl(var(--admin-blue) / .3); border-radius: 0 6px 6px 0; background: var(--bg-primary);
  color: var(--text-secondary); font-size: .81rem; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-line-clamp: unset;
}
.admin-desk .admin-permissions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; padding: 22px 22px 0; }
.admin-desk .admin-role { min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-primary); }
.admin-desk .admin-role.is-admin { border-color: hsl(var(--admin-blue) / .45); background: linear-gradient(145deg, hsl(var(--admin-blue) / .08), transparent 80%), var(--bg-primary); box-shadow: inset 0 3px hsl(var(--admin-blue)); }
.admin-desk .admin-role h4 { margin: 0 0 13px; font-size: .98rem; line-height: 1.5; color: var(--text-primary); }
.admin-desk .admin-role h4 i { margin-right: 7px; color: hsl(var(--admin-blue)); }
.admin-desk .admin-role ul { margin: 0; padding-left: 18px; }
.admin-desk .admin-role li { padding: 3px 0; color: var(--text-secondary); font-size: .79rem; line-height: 1.7; }
.admin-desk .admin-role li::marker { color: hsl(var(--admin-blue)); }

/* Confirmation remains a separate, explicit step. */
.admin-confirm-dialog.modal-box, .admin-confirm-dialog .modal-box {
  min-width: 0; padding: 24px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--bg-secondary); color: var(--text-primary); animation: govTabEnter .18s ease-out backwards;
}
.admin-confirm-dialog .modal-head { align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.admin-confirm-dialog .modal-head h2 { min-width: 0; margin: 7px 0 0; font-size: 1.22rem; line-height: 1.4; }
.admin-confirm-dialog .modal-close-btn { flex: none; width: 44px; height: 44px; }
.admin-confirm-dialog .modal-close-btn:hover { transform: none; background: var(--bg-tertiary); color: var(--text-primary); }
.admin-confirm-dialog .admin-confirm-summary { display: flex; flex-direction: column; gap: 5px; margin: 0 0 16px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-primary); font-size: .84rem; line-height: 1.6; }
.admin-confirm-dialog .admin-confirm-summary :is(small, span) { color: var(--text-secondary); font-size: .74rem; }
.admin-confirm-dialog .admin-confirm-summary code { color: hsl(var(--admin-blue)); font-size: .75rem; white-space: pre-wrap; }
.admin-confirm-dialog .admin-status-options { display: flex; flex-direction: column; gap: 6px; margin: 16px 0; }
.admin-confirm-dialog.modal-box { max-width: 560px; }
.admin-confirm-dialog .admin-confirm-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: .8rem; line-height: 1.6; }
.admin-confirm-dialog .admin-confirm-check input { flex: none; width: 20px; min-height: 20px; margin-top: 3px; accent-color: hsl(var(--admin-blue)); }
.admin-confirm-dialog .admin-confirm-actions { display: flex; gap: 10px; margin-top: 18px; }
.admin-confirm-dialog .admin-confirm-actions > button { flex: 1; }
.admin-desk .admin-result-head { justify-content: space-between; align-items: center; }
.admin-desk .admin-identity { display: block; }
.admin-confirm-dialog .admin-danger-note { margin: 14px 0; padding: 11px 13px; border: 1px solid hsl(var(--admin-danger) / .25); border-radius: 8px; background: hsl(var(--admin-danger) / .05); color: hsl(var(--admin-danger)); font-size: .78rem; line-height: 1.65; }
.admin-confirm-dialog .admin-confirm-error { margin: 12px 0; color: hsl(var(--admin-danger)); font-size: .8rem; font-weight: 700; line-height: 1.6; }
.admin-confirm-dialog .admin-confirm-error:empty { display: none; }
.admin-confirm-dialog .btn-danger { border-color: hsl(var(--admin-danger)); background: hsl(var(--admin-danger)); color: var(--bg-secondary); box-shadow: none; }
.admin-desk button:disabled, .admin-confirm-dialog button:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.admin-confirm-dialog #adminConfirmButton.is-busy { opacity: .7; cursor: wait; }
.admin-confirm-dialog #adminConfirmButton.is-busy i { animation: none; }
.admin-desk :is(button, a, input, select, textarea):focus-visible,
.admin-confirm-dialog :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid hsl(var(--admin-blue)); outline-offset: 3px;
}
.admin-desk .admin-hero :is(button, a):focus-visible { outline-color: #b4e9f4; }
.admin-desk .admin-search input:focus-visible { outline-offset: -2px; }
.admin-desk .admin-content-row:focus-within { border-color: hsl(var(--admin-blue) / .65); }
.admin-desk .admin-appoint :is(input, select, textarea):focus,
.admin-confirm-dialog :is(input, select, textarea):focus { border-color: hsl(var(--admin-blue)); box-shadow: 0 0 0 3px hsl(var(--admin-blue) / .12); }
@media (hover: hover) and (pointer: fine) {
  .admin-desk .admin-stat:hover:not(:disabled) { border-color: hsl(var(--admin-blue) / .5); box-shadow: var(--shadow-sm); }
  .admin-desk .admin-tab:hover:not(:disabled) { background: hsl(var(--admin-blue) / .06); color: hsl(var(--admin-blue)); }
  .admin-desk .admin-action:hover:not(:disabled), .admin-confirm-dialog .btn-ghost:hover:not(:disabled) { border-color: hsl(var(--admin-blue) / .45); background: hsl(var(--admin-blue) / .07); }
  .admin-desk .admin-action.is-danger:hover:not(:disabled) { border-color: hsl(var(--admin-danger) / .6); background: hsl(var(--admin-danger) / .09); }
  .admin-desk .admin-primary:hover:not(:disabled), .admin-confirm-dialog :is(.btn-primary, .btn-danger):hover:not(:disabled) { box-shadow: inset 0 0 0 100px #00000014; transform: none; }
  .admin-desk .admin-refresh:hover:not(:disabled) { border-color: #c1d9ed; background: #ffffff1a; }
  .admin-desk .admin-content-row:hover { border-color: hsl(var(--admin-blue) / .35); }
}
@media (max-width: 1000px) {
  .admin-desk .admin-hero { flex-wrap: wrap; }
  .admin-desk .admin-hero-side { flex: 1 0 100%; flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; padding-top: 16px; border-top: 1px solid #526884; }
  .admin-desk .admin-sync { flex: 1 1 160px; }
}
@media (max-width: 768px) {
  .admin-desk .admin-hero { padding: 20px 16px; gap: 14px; }
  .admin-desk .admin-mark { width: 42px; height: 48px; font-size: 1.2rem; }
  .admin-desk .admin-hero h2 { font-size: 1.6rem; }
  .admin-desk .admin-hero-copy > p { font-size: .81rem; }
  .admin-desk .admin-eyebrow { font-size: .6rem; letter-spacing: .09em; }
  .admin-desk .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .admin-desk .admin-stat { padding: 14px 12px; min-height: 140px; grid-template-columns: minmax(0, 1fr) 28px; gap: 6px; }
  .admin-desk .admin-stat-icon { width: 28px; height: 28px; font-size: .8rem; }
  .admin-desk .admin-stat strong { font-size: 1.8rem; }
  .admin-desk .admin-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .admin-desk .admin-tab { min-height: 48px; font-size: .76rem; padding: 10px 6px; gap: 6px; }
  .admin-desk .admin-section-head { padding: 18px 14px 14px; }
  .admin-desk .admin-toolbar { flex-direction: column; align-items: stretch; padding: 14px 14px 6px; }
  .admin-desk :is(.admin-search, .admin-select) { flex: none; width: 100%; }
  .admin-desk .admin-result-head { padding: 10px 14px; }
  .admin-desk .admin-content-list { padding: 0 10px 10px; }
  .admin-desk .admin-content-row { flex-direction: column; gap: 14px; padding: 14px 12px; }
  .admin-desk .admin-content-actions { flex: none; padding-top: 12px; border-top: 1px solid var(--border); }
  .admin-desk .admin-content-actions .admin-action { width: 100%; }
  .admin-desk .admin-pagination { padding: 12px 10px; gap: 8px; }
  .admin-desk .admin-pagination .admin-action { padding-inline: 10px; }
  .admin-desk :is(.admin-access-notice, .admin-safety-note) { margin: 14px; padding: 12px; }
  .admin-desk .admin-people { grid-template-columns: minmax(0, 1fr); padding: 0 14px 16px; }
  .admin-desk .admin-person { padding: 13px; gap: 10px; }
  .admin-desk .admin-person > .admin-action { grid-column: 1 / -1; justify-self: stretch; }
  .admin-desk .admin-appoint { padding: 18px 14px; }
  .admin-desk .admin-fields { grid-template-columns: minmax(0, 1fr); }
  .admin-desk .admin-appoint .admin-primary { width: 100%; }
  .admin-desk .admin-log-list { padding: 0 14px; }
  .admin-desk .admin-log-entry { gap: 10px; padding: 18px 0; }
  .admin-desk .admin-log-icon { width: 30px; height: 30px; font-size: .76rem; }
  .admin-desk .admin-log-body p { padding: 10px; }
  .admin-desk .admin-permissions { grid-template-columns: minmax(0, 1fr); padding: 16px 14px 0; }
  .admin-confirm-dialog.modal-box, .admin-confirm-dialog .modal-box { padding: 18px; }
}
@media (max-width: 360px) {
  .admin-desk .admin-hero { gap: 12px; }
  .admin-desk .admin-hero-copy { flex-basis: 100%; }
  .admin-desk .admin-stat { grid-template-columns: minmax(0, 1fr); }
  .admin-desk .admin-stat-icon { grid-column: 1; grid-row: 1; }
  .admin-desk .admin-stat strong { grid-column: 1; grid-row: 2; }
  .admin-desk .admin-tab { flex-direction: column; gap: 3px; }
  .admin-desk .admin-pagination > span { flex-basis: 100%; order: -1; }
  .admin-desk .admin-pagination .admin-action { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.admin-desk, .admin-confirm-dialog), :is(.admin-desk, .admin-confirm-dialog) *,
  :is(.admin-desk, .admin-confirm-dialog)::before, :is(.admin-desk, .admin-confirm-dialog)::after,
  :is(.admin-desk, .admin-confirm-dialog) *::before, :is(.admin-desk, .admin-confirm-dialog) *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
}
html.reduce-motion :is(.admin-desk, .admin-confirm-dialog),
html.reduce-motion :is(.admin-desk, .admin-confirm-dialog) *,
html.reduce-motion :is(.admin-desk, .admin-confirm-dialog)::before,
html.reduce-motion :is(.admin-desk, .admin-confirm-dialog)::after,
html.reduce-motion :is(.admin-desk, .admin-confirm-dialog) *::before,
html.reduce-motion :is(.admin-desk, .admin-confirm-dialog) *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* ============================================================
   22. PHONE PERFORMANCE
   A phone GPU pays for every blurred layer and every endlessly
   animated ornament with an off-screen render pass, every frame,
   out of the battery. Below the tablet breakpoint the frosted
   panels become nearly-solid, the ambient garden thins out and
   freezes once planted (fewer pieces are built — see nature.js),
   and long lists skip rendering whatever is off screen. Every
   rule lives inside this one media query, so laptops keep the
   full glass-and-motion experience untouched.
   ============================================================ */
@media (max-width: 768px), (pointer: coarse) {

  /* ---- frosted glass -> solid panels -------------------------------
     backdrop-filter is the single most expensive paint on the page;
     the surfaces below already carry strong backgrounds, so raising
     them to (near-)solid keeps the same read for zero compositing. */
  .top-bar, .mobile-bar, .drawer, .drawer-scrim, .pal-scrim,
  .modal-backdrop, .map-legend, .map-floating, .nav-arrow, .stat-item,
  .splash-inner, .splash-feat, .splash-logo, .splash-badge, .splash-lang, .splash-dock,
  .auth-brand-icon, .auth-success-overlay, .celeb-overlay, .lbx-backdrop,
  .points-card-tier, .points-breakdown-item, .about-hero-badge, .hero-chip, .thumb-tag {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .top-bar, .mobile-bar, .drawer { background: var(--bg-secondary) !important; }
  .drawer-scrim { background: rgba(0, 0, 0, .55) !important; }
  .pal-scrim { background: rgba(8, 15, 12, .6) !important; }
  .map-legend { background: var(--bg-secondary) !important; }
  .nav-arrow { background: rgba(255, 255, 255, .92) !important; }
  .stat-item, .splash-feat { background: rgba(255, 255, 255, .94) !important; }
  .splash-inner { background: rgba(255, 255, 255, .93) !important; }
  [data-theme="dark"] .nav-arrow,
  [data-theme="dark"] .stat-item,
  [data-theme="dark"] .splash-feat { background: var(--bg-tertiary) !important; }
  [data-theme="dark"] .splash-inner { background: var(--bg-secondary) !important; }

  .bloom-decor *, .bloom-decor *::before, .bloom-decor *::after,
  .ng-blade, .ng-flower {
    animation: none !important;
    will-change: auto !important;
  }
  .ng-blade, .ng-flower { transform: scaleX(var(--g-flip, 1)) rotate(var(--g-tilt, 0deg)); }
  .bd-sprig {
    opacity: 1;
    transform: translate(var(--bd-nx, 0px), var(--bd-ny, 0px)) rotate(var(--bd-rot, 0deg)) scaleX(var(--bd-sflip, 1)) scale(var(--bd-ms, 1));
  }
  .bd-fringe { opacity: 1; transform: none; }
  .bd-bloom { opacity: 1; filter: none; transform: translateX(-50%) rotate(var(--bd-tilt, 0deg)); }
  .bd-stem, .bd-fringe-bloom { transform: translateX(-50%) rotate(var(--bd-tilt, 0deg)); }
  .bd-leaf { transform: translateX(-50%) scaleX(var(--bd-lflip, 1)) rotate(var(--bd-lrot, 0deg)); }
  .bd-blade { transform: translateX(-50%) scaleX(var(--bd-flip, 1)) rotate(var(--bd-tilt, 0deg)); }
  .splash-veil, .splash-glow, .logo-halo { display: none; }
  .splash-logo, .splash-bn span, .splash-motto .mw, .sd-cue i,
  .soc-pulse-leaf, .ev-hero2 .leaf, .ev-spot::before, .ev-spot-kicker i,
  .ev-spot-medal, .ev-cover-emoji, .ev-progress2 .event-progress-fill::after {
    animation: none !important;
  }
  .reveal, .soc-card, .event-card, .ev-card2, .report-item, .mr-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition-property: color, background-color, border-color;
  }
  /* The ambient shower and its depth-of-field layers. */
  .nf-fall, .nf-sway, .nf-spin, .np-mote { will-change: auto; }

  /* ---- scenery that only ever decorates ----------------------------- */
  .splash-particle, .splash-veil, .logo-halo, .splash-ring .ring-spin,
  .splash-tag::after, .wave, .wave-foam, .raindrop, .celeb-rays,
  .gov-seal::before, .gov-tag::after {
    animation: none !important;
  }
  .splash-inner { animation: splashIn .8s cubic-bezier(.2, .8, .3, 1) both !important; }

  /* ---- long feeds skip what nobody is looking at --------------------
     content-visibility:auto lets the browser skip layout and paint for
     cards below the fold; the intrinsic size keeps the scrollbar honest
     until each card is measured for real. */
  .report-item, .comm-card, .event-card, .ev-card2, .mr-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 190px;
  }

  /* ---- taps answer at once -------------------------------------------
     With pinch zoom still allowed, browsers otherwise wait ~300ms on
     every tap to see whether a double-tap is coming. manipulation keeps
     pinch zoom and drops the wait. */
  a, button, [onclick], input, select, textarea, label,
  .nav-item, .mobile-bar a {
    touch-action: manipulation;
  }
}

#view-education {
  --lh-green: #23694e;
  --lh-soft: #eef5ed;
  --lh-ink: #163e2f;
  --lh-line: #d5e4d6;
}
[data-theme="dark"] #view-education {
  --lh-green: var(--accent);
  --lh-soft: var(--bg-tertiary);
  --lh-ink: var(--text-primary);
  --lh-line: var(--border);
}
#view-education [hidden] { display: none !important; }
#view-education button { touch-action: manipulation; }
#view-education :is(button, input, select, a):focus-visible { outline: 3px solid var(--lh-green); outline-offset: 4px; }
#view-education :is(h2, h3, h5)[tabindex="-1"]:focus { outline: none; }
#view-education .lh-nav {
  display: flex; gap: 6px; width: fit-content; max-width: 100%; padding: 6px;
  margin: 0 0 24px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--bg-secondary); overflow-x: auto;
}
#view-education .lh-nav .learn-cat {
  display: flex; gap: 9px; align-items: center; min-height: 44px;
  padding: 10px 18px; border: 0; border-radius: 11px; background: transparent;
  color: var(--text-secondary); font-size: .88rem; box-shadow: none; white-space: nowrap;
}
#view-education .lh-nav .learn-cat.active { background: var(--lh-green); color: var(--bg-secondary); }
#view-education .lh-hero {
  position: relative; overflow: hidden; isolation: isolate; padding: 38px 40px 32px;
  border: 1px solid var(--lh-line); border-radius: 25px; background: var(--lh-soft);
}
#view-education .lh-hero h2 {
  max-width: 75%; margin: 14px 0; font-size: clamp(1.85rem, 3.4vw, 3rem);
  font-weight: 750; letter-spacing: -.045em; line-height: 1.16; color: var(--lh-ink);
}
#view-education .lh-hero > p { max-width: 460px; margin: 0 0 22px; color: var(--text-secondary); font-size: .98rem; line-height: 1.75; }
#view-education .lh-eyebrow { display: flex; align-items: center; gap: 8px; font-size: .7rem; font-weight: 750; letter-spacing: .06em; color: var(--lh-green); line-height: 1.6; }
#view-education .lh-garden { position: absolute; right: 10px; bottom: -10px; width: 34%; max-width: 320px; color: #6b9478; z-index: -1; pointer-events: none; opacity: .8; }
#view-education .lh-hero-note { margin-top: 12px; font-size: .76rem; color: var(--text-secondary); max-width: 72%; }
#view-education :is(.lh-primary, .lh-secondary, .lh-back, .lh-open) {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; border: 0; border-radius: 11px; padding: 10px 16px;
  font: inherit; font-size: .85rem; font-weight: 650; cursor: pointer;
  transition: transform .18s ease, background-color .18s ease;
}
#view-education .lh-primary { background: var(--lh-green); color: var(--bg-secondary); }
#view-education .lh-secondary { background: var(--bg-secondary); border: 1px solid var(--lh-line); color: var(--lh-green); }
#view-education :is(.lh-back, .lh-open) { color: var(--lh-green); background: transparent; padding-inline: 4px; }
#view-education button:disabled { opacity: .55; cursor: not-allowed; }
#view-education .lh-overview {
  display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 24px; align-items: center;
  margin: 18px 0 34px; padding: 20px 26px; background: var(--bg-secondary);
  border: 1px solid var(--border); border-radius: 18px;
}
#view-education .lh-overview > div { display: flex; flex-direction: column; gap: 3px; }
#view-education .lh-overview strong { font-size: 1.6rem; line-height: 1.2; color: var(--lh-ink); }
#view-education .lh-overview small { font-size: .95rem; color: var(--text-muted); font-weight: 500; }
#view-education .lh-overview span { font-size: .76rem; color: var(--text-secondary); }
#view-education progress { width: 100%; height: 8px; margin-top: 10px; border: 0; border-radius: 20px; overflow: hidden; background: var(--lh-soft); accent-color: var(--lh-green); }
#view-education progress::-webkit-progress-bar { background: var(--lh-soft); }
#view-education progress::-webkit-progress-value { background: var(--lh-green); border-radius: 20px; }
#view-education progress::-moz-progress-bar { background: var(--lh-green); border-radius: 20px; }
#view-education .lh-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 20px; }
#view-education .lh-section-heading h3 { font-size: 1.3rem; letter-spacing: -.025em; margin: 5px 0 0; line-height: 1.4; }
#view-education .lh-search .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#view-education .lh-search { display: flex; align-items: center; gap: 10px; width: 290px; max-width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-secondary); color: var(--text-muted); }
#view-education .lh-search input { width: 100%; min-width: 0; border: 0; outline-offset: 6px; padding: 12px 0; background: transparent; color: var(--text-primary); font: inherit; font-size: .85rem; }
#view-education .lh-filters { display: flex; flex-wrap: wrap; gap: 8px; }
#view-education .lh-filters button { min-height: 40px; padding: 8px 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 24px; color: var(--text-secondary); font: inherit; font-size: .78rem; cursor: pointer; }
#view-education .lh-filters button[aria-pressed="true"] { background: var(--lh-soft); border-color: var(--lh-green); color: var(--lh-green); font-weight: 700; }
#view-education .lh-result-count { color: var(--text-muted); font-size: .75rem; margin: 12px 0; }
#view-education .lh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#view-education .lh-card { display: flex; flex-direction: column; min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg-secondary); transition: transform .2s ease, border-color .2s ease; }
#view-education .lh-green { --lh-tone: #3e7752; --lh-tint: #edf4e9; }
#view-education .lh-blue { --lh-tone: #39738a; --lh-tint: #eaf3f5; }
#view-education .lh-rose { --lh-tone: #aa5866; --lh-tint: #fbefee; }
#view-education .lh-amber { --lh-tone: #987029; --lh-tint: #f8f1df; }
[data-theme="dark"] #view-education .lh-green { --lh-tone: #a1d69f; --lh-tint: #253729; }
[data-theme="dark"] #view-education .lh-blue { --lh-tone: #91cbdc; --lh-tint: #24373f; }
[data-theme="dark"] #view-education .lh-rose { --lh-tone: #e9a4af; --lh-tint: #3d2a31; }
[data-theme="dark"] #view-education .lh-amber { --lh-tone: #e1c187; --lh-tint: #3b3425; }
#view-education .lh-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
#view-education .lh-topic-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px 16px 16px 5px; color: var(--lh-tone); background: var(--lh-tint); font-size: 1.3rem; }
#view-education .lh-duration { display: flex; gap: 5px; margin-left: auto; color: var(--text-muted); font-size: .7rem; white-space: nowrap; }
#view-education .lh-bookmark { flex-shrink: 0; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 50%; color: var(--text-muted); background: transparent; cursor: pointer; }
#view-education :is(.lh-bookmark, .lh-save-lesson)[aria-pressed="true"] { background: var(--lh-green); color: var(--bg-secondary); border-color: var(--lh-green); }
#view-education .lh-card-topic { display: block; font-size: .73rem; font-weight: 650; color: var(--lh-tone, var(--lh-green)); margin-bottom: 8px; }
#view-education .lh-card h4 { font-size: 1.14rem; line-height: 1.42; margin: 0 0 10px; letter-spacing: -.02em; }
#view-education .lh-card > p { color: var(--text-secondary); font-size: .85rem; line-height: 1.7; margin: 0 0 20px; }
#view-education .lh-card-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px; }
#view-education .lh-state { display: flex; gap: 6px; color: var(--text-muted); font-size: .68rem; }
#view-education .lh-open { font-size: .78rem; }
#view-education .lh-storage { font-size: .75rem; color: var(--text-muted); text-align: center; margin: 24px 0 12px; }
#view-education .lh-empty { grid-column: 1 / -1; padding: 48px 20px; text-align: center; background: var(--bg-secondary); border: 1px dashed var(--lh-line); border-radius: 18px; }
#view-education .lh-empty > i { color: var(--lh-green); font-size: 2rem; margin-bottom: 15px; }
#view-education .lh-empty h4 { font-size: 1.2rem; margin-bottom: 8px; }
#view-education .lh-empty p { color: var(--text-secondary); margin-bottom: 18px; }
#view-education #learn-lesson { max-width: 920px; margin-inline: auto; }
#view-education .lh-lesson-head { position: relative; margin-bottom: 24px; padding-right: 160px; }
#view-education .lh-lesson-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); letter-spacing: -.035em; line-height: 1.3; margin: 4px 0 10px; }
#view-education .lh-lesson-head > p { color: var(--text-secondary); line-height: 1.6; }
#view-education .lh-lesson-head .lh-back { margin-bottom: 20px; }
#view-education .lh-save-lesson { position: absolute; right: 0; bottom: 0; }
#view-education .lh-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
#view-education .lh-steps button { min-height: 54px; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--bg-secondary); color: var(--text-secondary); font: inherit; font-size: .83rem; font-weight: 600; cursor: pointer; }
#view-education .lh-steps button > span { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--bg-primary); font-size: .76rem; }
#view-education .lh-steps [aria-current="step"] { background: var(--lh-soft); color: var(--lh-green); border-color: var(--lh-green); }
#view-education .lh-steps [aria-current="step"] > span { background: var(--lh-green); color: var(--bg-secondary); }
#view-education .lh-step-surface { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 22px; padding: 30px; }
#view-education .lh-step-surface h3 { font-size: 1.35rem; line-height: 1.5; letter-spacing: -.025em; margin: 0 0 15px; }
#view-education .lh-takeaways { display: grid; gap: 0; }
#view-education .lh-takeaways > div { display: flex; gap: 18px; align-items: flex-start; padding: 19px 0; border-bottom: 1px solid var(--border); }
#view-education .lh-takeaways > div:last-child { border: 0; }
#view-education .lh-takeaways > div > span { font-size: .78rem; color: var(--lh-green); background: var(--lh-soft); padding: 7px 9px; border-radius: 8px; font-weight: 700; }
#view-education .lh-takeaways p { font-size: .95rem; line-height: 1.8; color: var(--text-secondary); margin: 0; }
#view-education .lh-step-footer { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding-top: 24px; margin-top: 20px; border-top: 1px solid var(--border); }
#view-education .lh-step-footer > span { font-size: .76rem; line-height: 1.7; color: var(--text-muted); max-width: 55%; }
#view-education .lh-step-footer button { flex-shrink: 0; }
#view-education .lh-source-footer { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 18px 5px 0; align-items: center; }
#view-education .lh-source-footer > span { width: 100%; color: var(--text-muted); font-size: .74rem; }
#view-education .lh-source-footer a { padding: 7px 0; font-size: .78rem; }
#view-education .lh-tool { display: grid; grid-template-columns: 1fr 180px; gap: 24px; align-items: center; padding: 23px; margin: 20px 0 0; border-radius: 16px; background: var(--lh-soft); border: 1px solid var(--lh-line); }
#view-education .lh-tool h4 { font-size: 1.07rem; line-height: 1.5; margin: 5px 0 15px; color: var(--lh-ink); }
#view-education .lh-tool p { font-size: .82rem; line-height: 1.75; color: var(--text-secondary); }
#view-education .lh-depth-options { display: flex; gap: 8px; margin-bottom: 16px; }
#view-education .lh-depth-options button { min-height: 44px; padding: 8px 13px; border: 1px solid var(--lh-line); border-radius: 9px; background: var(--bg-secondary); color: var(--lh-green); cursor: pointer; font: inherit; font-size: .8rem; }
#view-education .lh-depth-options [aria-pressed="true"] { background: var(--lh-green); color: var(--bg-secondary); }
#view-education .lh-depth-scene { align-self: stretch; min-height: 185px; position: relative; overflow: hidden; border-radius: 14px; background: var(--bg-secondary); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; }
#view-education .lh-depth-scene > i { font-size: 135px; color: var(--text-secondary); }
#view-education .lh-depth-scene > div { position: absolute; bottom: 0; left: 0; right: 0; background: #5babc38a; border-top: 3px solid #5babc3; transition: height .45s cubic-bezier(.2,.7,.3,1); }
#view-education .lh-depth-scene > span { position: absolute; bottom: 8px; left: 6px; right: 6px; text-align: center; font-size: .61rem; padding: 4px; color: var(--text-primary); background: var(--bg-secondary); border-radius: 6px; }
#view-education .lh-aqi-tool { grid-template-columns: 1fr 1fr; }
#view-education .lh-aqi-tool label { font-size: .8rem; }
#view-education .lh-aqi-tool input { width: 100%; min-height: 44px; accent-color: var(--lh-green); margin-top: 6px; }
#view-education .lh-scale { display: flex; justify-content: space-between; font-size: .7rem; color: var(--text-muted); }
#view-education .lh-aqi-reading { padding: 18px; border: 1px solid var(--lh-line); background: var(--bg-secondary); border-radius: 12px; }
#view-education .lh-aqi-reading strong { display: block; font-size: 2.5rem; line-height: 1.2; margin-bottom: 8px; color: var(--lh-green); }
#view-education .lh-aqi-reading b { font-size: .83rem; }
#view-education .lh-aqi-reading p { margin: 8px 0 0; }
#view-education .lh-aqi-reading[data-band="3"] strong,
#view-education .lh-aqi-reading[data-band="4"] strong,
#view-education .lh-aqi-reading[data-band="5"] strong { color: var(--danger); }
#view-education .lh-number-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#view-education .lh-number-fields label { display: flex; flex-direction: column; gap: 7px; font-size: .75rem; }
#view-education .lh-number-fields input { min-width: 0; width: 100%; min-height: 44px; padding: 10px; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--lh-line); border-radius: 9px; font: inherit; }
#view-education .lh-calculator output { display: flex; flex-direction: column; gap: 7px; overflow-wrap: anywhere; color: var(--lh-ink); }
#view-education .lh-calculator output strong { font-size: 2.5rem; line-height: 1.2; }
#view-education .lh-calculator output span { font-size: .8rem; }
#view-education .lh-calculator output small { font-size: .7rem; color: var(--text-secondary); }
#view-education .lh-practice-top, #view-education .lh-action-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
#view-education .lh-practice-top > span:last-child, #view-education #lhCheckCount { padding: 6px 12px; background: var(--lh-soft); color: var(--lh-green); border-radius: 20px; font-size: .75rem; white-space: nowrap; }
#view-education .lh-muted { color: var(--text-secondary); font-size: .85rem; line-height: 1.75; margin: 0 0 20px; }
#view-education .lh-options { display: grid; gap: 10px; }
#view-education .lh-option { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 14px; border: 1px solid var(--border); background: var(--bg-primary); border-radius: 12px; color: var(--text-primary); text-align: left; font: inherit; font-size: .92rem; line-height: 1.6; cursor: pointer; }
#view-education .lh-option > span { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; font-size: .75rem; }
#view-education .lh-option.correct { border-color: var(--lh-green); background: var(--lh-soft); color: var(--lh-green); }
#view-education .lh-option.incorrect { border-color: var(--danger); }
#view-education .lh-option:disabled { opacity: 1; cursor: default; }
#view-education .lh-feedback { margin-top: 18px; padding: 20px; border-radius: 12px; background: var(--lh-soft); border-left: 4px solid var(--lh-green); animation: lhReveal .25s ease-out; }
#view-education .lh-feedback.is-review { background: var(--bg-primary); border-color: var(--warning); }
#view-education .lh-feedback strong { display: flex; gap: 9px; align-items: center; font-size: .9rem; }
#view-education .lh-feedback p { margin: 9px 0 0; font-size: .88rem; line-height: 1.75; color: var(--text-secondary); }
#view-education .lh-practice-summary { padding: 30px 12px; text-align: center; }
#view-education .lh-practice-summary > i, #view-education .lh-completion > i { display: block; font-size: 2.8rem; color: var(--lh-green); margin-bottom: 20px; }
#view-education .lh-practice-summary .lh-eyebrow { justify-content: center; margin-bottom: 14px; }
#view-education .lh-practice-summary p { color: var(--text-secondary); line-height: 1.8; }
#view-education .lh-summary-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
#view-education .lh-action-title h3 { margin-bottom: 0; }
#view-education .lh-checks { display: grid; gap: 10px; }
#view-education .lh-checks label { display: flex; align-items: flex-start; gap: 13px; padding: 16px; min-height: 54px; border: 1px solid var(--border); border-radius: 12px; font-size: .9rem; line-height: 1.6; cursor: pointer; }
#view-education .lh-checks input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--lh-green); }
#view-education .lh-checks label:has(:checked) { border-color: var(--lh-line); background: var(--lh-soft); }
#view-education .lh-checks input:checked + span { color: var(--lh-green); }
#view-education .lh-completion { margin: 26px 0 20px; padding: 25px; background: var(--lh-soft); border: 1px solid var(--lh-line); border-radius: 15px; }
#view-education .lh-completion h4 { font-size: 1.2rem; color: var(--lh-ink); margin-bottom: 10px; }
#view-education .lh-completion p { color: var(--text-secondary); line-height: 1.75; font-size: .87rem; margin-bottom: 18px; }
#view-education #lhResetPrompt p { font-size: .85rem; margin: 12px 0; line-height: 1.7; }
#view-education .lh-celebrate { animation: lhReveal .4s cubic-bezier(.2,.8,.3,1); }
#view-education .kb-path-head { width: 100%; border: 0; text-align: left; background: transparent; color: inherit; font: inherit; }
#view-education .kb-star, #view-education .kp-check { min-width: 40px; min-height: 40px; }
#view-education .kp-jump, #view-education .kb-open { min-height: 40px; display: inline-flex; align-items: center; }
#view-education .kp-head-txt strong { display: block; font-size: .95rem; margin-bottom: 5px; }
#view-education .kp-head-txt > span { display: block; font-size: .8rem; line-height: 1.6; color: var(--text-secondary); }
#view-education .kb-path.open .kb-path-steps { max-height: none; }
#view-education .qz-mode { padding: 18px; background: var(--lh-soft); border: 1px solid var(--lh-line); border-radius: 12px; margin: 16px 0; }
#view-education .qz-mode label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: .95rem; font-weight: 650; cursor: pointer; }
#view-education .qz-mode p { color: var(--text-secondary); font-size: .82rem; line-height: 1.75; margin-top: 8px; }
#view-education .qz-mode input { width: 20px; height: 20px; accent-color: var(--lh-green); }
#view-education .qz-clock { color: var(--text-secondary); font-size: .8rem; margin: 14px 0; }
#view-education .qz-opt { min-height: 52px; }

/* Hands-on community labs: solid surfaces, useful objects and quiet feedback. */
#view-education :is(.lh-lab, .lh-lab-strip, .lh-practice-tabs, .lh-activity-tag, .lh-lab-link),
#view-education :is(.lh-lab, .lh-lab-strip, .lh-practice-tabs) * {
  box-sizing: border-box; min-width: 0; max-width: 100%; overflow-wrap: anywhere;
}
#view-education :is(.lh-lab, .lh-lab-strip, .lh-practice-tabs) button,
#view-education .lh-lab-link {
  min-height: 44px; min-width: 44px; white-space: normal; line-height: 1.55;
  transition: background-color .18s ease, border-color .18s ease;
}
#view-education .lh-lab-strip {
  display: grid; gap: 18px; margin: 24px 0; padding: 22px 24px;
  border: 1px solid var(--lh-line); border-inline-start: 4px solid var(--lh-green);
  border-radius: 8px 20px 20px 8px; background: var(--bg-secondary); color: var(--text-primary);
}
#view-education .lh-lab-strip header { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
#view-education .lh-lab-strip header > div { flex: 1 1 180px; }
#view-education .lh-lab-strip :is(header > i, header > svg) {
  flex: 0 0 44px; width: 44px; height: 44px; padding: 12px;
  border-radius: 14px 14px 14px 4px; background: var(--lh-soft); color: var(--lh-green); font-size: 1.2rem;
}
#view-education .lh-lab-strip h3 { margin: 0 0 6px; font-size: 1.12rem; line-height: 1.5; }
#view-education .lh-lab-strip p { margin: 0; color: var(--text-secondary); font-size: .85rem; line-height: 1.75; }
#view-education :is(.lh-lab-links, .lh-sim-presets) { display: flex; flex-wrap: wrap; gap: 9px; }
#view-education :is(.lh-lab-links, .lh-sim-presets) > button { flex: 0 1 auto; }
#view-education .lh-activity-tag {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  margin: 0 0 14px; padding: 5px 9px; border-radius: 7px;
  background: var(--lh-soft); color: var(--lh-green); font-size: max(.75rem, 12px); line-height: 1.6;
}
#view-education :where(.lh-site, .lh-lab-choices button, .lh-destinations button, .lh-supply, .lh-plan-options button, .lh-practice-tabs button, .lh-lab-link) {
  display: flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px;
  padding: 12px 14px; border: 2px solid var(--lh-line); border-radius: 12px;
  background: var(--bg-secondary); color: var(--text-primary); text-align: start;
  font: inherit; font-size: .85rem; line-height: 1.6; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
#view-education .lh-lab-link { justify-content: center; margin-top: 12px; color: var(--lh-green); background: var(--lh-soft); }
#view-education .lh-practice-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; margin-bottom: 22px;
  border: 1px solid var(--lh-line); border-radius: 15px; background: var(--bg-primary);
}
#view-education .lh-practice-tabs button { flex: 1 1 150px; justify-content: center; border-color: transparent; background: var(--bg-primary); }
#view-education .lh-practice-tabs button[aria-pressed="true"] {
  border-color: var(--lh-green); background: var(--bg-secondary); color: var(--lh-green); font-weight: 750;
  box-shadow: inset 0 -3px 0 var(--lh-green);
}
#view-education .lh-lab { width: 100%; container: lh-lab / inline-size; color: var(--text-primary); padding: clamp(16px, 2.6vw, 26px); border: 1px solid var(--lh-line); border-radius: 22px; background: linear-gradient(165deg, var(--bg-secondary), var(--bg-primary) 62%); box-shadow: 0 22px 46px -34px rgba(18, 58, 40, .55); }
#view-education .lh-lab h3 { margin: 0 0 12px; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.5; }
#view-education .lh-lab-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
#view-education .lh-lab-heading h3 { flex: 1 1 220px; margin: 0; }
#view-education .lh-lab-badge,
#view-education .lh-lab-heading > :is(span, small) {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--lh-line);
  border-radius: 20px; background: var(--lh-soft); color: var(--lh-green);
  font-size: max(.75rem, 12px); font-weight: 650; line-height: 1.6; white-space: normal;
}
#view-education .lh-lab > .lh-lab-badge { margin-bottom: 12px; }
#view-education .lh-lab-progress { display: grid; gap: 7px; margin: 18px 0; }
#view-education .lh-lab-progress > span { font-size: .8rem; font-weight: 650; color: var(--text-secondary); }
#view-education :is(.lh-lab-progress, .lh-budget) progress { display: block; min-width: 0; width: 100%; height: 9px; margin: 0; background: var(--bg-tertiary); }
#view-education :is(.lh-lab-progress, .lh-budget) progress::-webkit-progress-bar { background: var(--bg-tertiary); }
#view-education :is(.lh-lab-progress, .lh-budget) progress::-webkit-progress-value { transition: width .2s ease; }
#view-education :is(.lh-lab-progress, .lh-budget) progress::-moz-progress-bar { transition: width .2s ease; }
#view-education .lh-lab-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); gap: 18px; align-items: start; margin-top: 18px; }
#view-education .lh-inspection-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#view-education :is(.lh-site, .lh-supply) { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-content: start; align-items: start; gap: 5px 10px; min-height: 112px; }
#view-education :is(.lh-site, .lh-supply) > :is(i, svg) {
  grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center;
  width: 34px; height: 38px; padding: 8px; border-radius: 11px 11px 11px 3px;
  background: var(--lh-soft); color: var(--lh-green); font-size: 1.1rem;
}
#view-education :is(.lh-site, .lh-supply) > :is(strong, small, span) { grid-column: 2; }
#view-education :is(.lh-site, .lh-supply) strong { display: block; font-size: .86rem; line-height: 1.5; }
#view-education :is(.lh-site, .lh-supply) small { display: block; color: var(--text-secondary); font-size: max(.75rem, 12px); line-height: 1.65; font-weight: 400; }
#view-education .lh-site.is-solved { border-inline-start: 5px solid var(--lh-green); background: var(--lh-soft); }
#view-education .lh-site.is-solved > :is(i, svg) { background: var(--lh-green); color: var(--bg-secondary); }
#view-education :is(.lh-site, .lh-supply, .lh-destinations button, .lh-plan-options button)[aria-pressed="true"],
#view-education .lh-lab-choices button[aria-pressed="true"] {
  border-color: var(--lh-green); background: var(--lh-soft); box-shadow: inset 0 0 0 1px var(--lh-green);
}
#view-education .lh-lab-detail {
  padding: 20px; border: 1px solid var(--lh-line); border-radius: 16px;
  background: var(--bg-primary); color: var(--text-primary);
}
#view-education :is(.lh-lab-detail, .lh-object-card) h4 { margin: 8px 0; font-size: 1.1rem; line-height: 1.5; }
#view-education :is(.lh-lab-detail, .lh-object-card, .lh-sim-result) p { margin: 8px 0 0; color: var(--text-secondary); font-size: .85rem; line-height: 1.75; }
#view-education .lh-lab-choices { display: grid; gap: 9px; margin-top: 18px; }
#view-education .lh-lab-choices button { width: 100%; min-height: 52px; }
#view-education :is(.lh-lab-choices, .lh-destinations, .lh-plan-options) button > :is(i, svg) { flex: 0 0 20px; width: 20px; color: var(--lh-green); }
#view-education .lh-lab :is(.lh-lab-choices, .lh-destinations, .lh-plan-options) .is-correct {
  border-color: var(--lh-green); border-inline-start-width: 5px; background: var(--lh-soft); font-weight: 700;
}
#view-education .lh-lab :is(.lh-lab-choices, .lh-destinations, .lh-plan-options) .is-review {
  border-color: var(--text-secondary); border-style: dashed; background: var(--bg-secondary); box-shadow: none;
}
#view-education .lh-lab button:is(.is-correct, .is-review, .is-solved):disabled { opacity: 1; }
#view-education .lh-lab-feedback {
  margin-top: 18px; padding: 16px 18px; border: 1px solid var(--lh-line); border-inline-start: 4px solid var(--lh-green);
  border-radius: 4px 12px 12px 4px; background: var(--lh-soft); animation: lhReveal .2s ease-out;
}
#view-education .lh-lab-feedback strong { display: flex; align-items: center; gap: 8px; font-size: .9rem; line-height: 1.6; }
#view-education .lh-lab-feedback p { margin: 7px 0 0; color: var(--text-secondary); font-size: .85rem; line-height: 1.75; }
#view-education .lh-lab-feedback.is-review { border-inline-start-style: dashed; border-inline-start-color: var(--text-secondary); background: var(--bg-primary); }
#view-education .lh-lab-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--lh-line); }
#view-education .lh-lab-footer .lh-back { margin-inline-end: auto; padding-inline: 10px; }
#view-education .lh-lab-footer > div { display: flex; flex-wrap: wrap; gap: 10px; }
#view-education .lh-lab-context { margin-top: 18px; padding: 0 14px; border: 1px solid var(--lh-line); border-radius: 12px; background: var(--bg-secondary); }
#view-education .lh-lab-context summary { min-height: 44px; padding: 12px 0; color: var(--lh-green); font-size: .82rem; font-weight: 650; line-height: 1.6; cursor: pointer; }
#view-education .lh-lab-context summary:focus-visible { outline: 3px solid var(--lh-green); outline-offset: 4px; }
#view-education .lh-lab-context[open] summary { border-bottom: 1px solid var(--lh-line); }
#view-education .lh-lab-context p { margin: 12px 0 16px; color: var(--text-secondary); font-size: .82rem; line-height: 1.8; }

/* Sorting and neighbourhood stories. */
#view-education .lh-object-card { padding: 24px 20px; text-align: center; border: 1px solid var(--lh-line); border-radius: 18px; background: var(--bg-primary); }
#view-education .lh-object-card > :is(i, svg) {
  display: block; width: 80px; height: 80px; margin: 0 auto 15px; padding: 20px;
  border-radius: 26px 26px 26px 8px; background: var(--lh-soft); color: var(--lh-green); font-size: 2.4rem;
}
#view-education .lh-object-card header { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--lh-line); }
#view-education .lh-object-card header .lh-eyebrow { justify-content: center; }
#view-education .lh-destinations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
#view-education .lh-destinations button { min-height: 76px; }
#view-education .lh-story-track { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; }
#view-education .lh-story-track > span {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px;
  border: 1px solid var(--lh-line); border-radius: 9px; background: var(--bg-secondary);
  color: var(--text-secondary); font-size: max(.75rem, 12px); line-height: 1.6;
}
#view-education .lh-story-track > span > :is(b, strong) { font-variant-numeric: tabular-nums; color: var(--lh-green); }
#view-education .lh-story-track > span:is([data-active="true"], [data-active="current"], [data-current="true"], [aria-current="step"]) {
  background: var(--lh-soft); border-color: var(--lh-green); box-shadow: inset 0 -2px 0 var(--lh-green); color: var(--text-primary); font-weight: 700;
}

/* Assemble a useful report or a practical household kit. */
#view-education .lh-report-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#view-education :is(.lh-report-parts, .lh-sim-controls) label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: .85rem; font-weight: 650; line-height: 1.65; }
#view-education .lh-report-parts label > span { flex-basis: 100%; }
#view-education :is(.lh-report-parts, .lh-sim-controls) select {
  display: block; flex-basis: 100%; width: 100%; min-width: 0; min-height: 46px; max-width: 100%;
  padding: 10px 12px; border: 1px solid var(--lh-line); border-radius: 10px;
  background: var(--bg-secondary); color: var(--text-primary); font: inherit; font-size: 1rem;
}
#view-education .lh-report-preview {
  margin: 20px 0 0; padding: 18px 20px; border: 1px solid var(--lh-line); border-inline-start: 4px solid var(--lh-green);
  border-radius: 4px 14px 14px 4px; background: var(--bg-primary); color: var(--text-primary);
}
#view-education .lh-report-preview p { margin: 0; font-size: .95rem; line-height: 1.85; }
#view-education .lh-report-preview p + p { margin-top: 10px; }
#view-education .lh-part-feedback { display: grid; gap: 8px; margin: 16px 0 0; padding-inline-start: 22px; font-size: .82rem; line-height: 1.7; }
#view-education .lh-part-feedback li { padding: 8px 10px; border: 1px solid var(--lh-line); border-radius: 8px; background: var(--bg-secondary); }
#view-education .lh-part-feedback .is-correct { border-inline-start: 4px solid var(--lh-green); background: var(--lh-soft); }
#view-education .lh-part-feedback .is-correct::marker { color: var(--lh-green); }
#view-education .lh-part-feedback .is-review { border-style: dashed; border-color: var(--text-secondary); }
#view-education .lh-supply-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
#view-education .lh-supply { position: relative; padding-inline-end: 30px; }
#view-education .lh-supply::after {
  content: ""; position: absolute; inset-inline-end: 10px; top: 13px; width: 12px; height: 12px;
  border: 1px solid var(--lh-line); border-radius: 3px; background: var(--bg-primary);
}
#view-education .lh-supply[aria-pressed="true"]::after {
  width: 7px; height: 12px; top: 10px; inset-inline-end: 12px; border: solid var(--lh-green); border-width: 0 2px 2px 0;
  border-radius: 0; background: transparent; transform: rotate(45deg);
}
#view-education .lh-token-cost { justify-self: start; margin-top: 4px; padding: 3px 7px; border: 1px solid var(--lh-line); border-radius: 6px; background: var(--bg-primary); color: var(--text-secondary); font-size: max(.75rem, 12px); font-weight: 650; }
#view-education .lh-budget { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 16px; border: 2px solid var(--lh-line); border-radius: 14px; background: var(--bg-primary); }
#view-education .lh-budget strong { color: var(--lh-green); font-size: 1.25rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
#view-education .lh-budget small { color: var(--text-secondary); font-size: max(.75rem, 12px); line-height: 1.65; }
#view-education .lh-budget progress { flex-basis: 100%; }
#view-education .lh-budget.is-overbudget { border-style: dashed; border-color: var(--text-secondary); background: var(--bg-tertiary); }
#view-education .lh-budget.is-overbudget strong { color: var(--text-primary); text-decoration: underline double; text-underline-offset: 4px; }
#view-education .lh-kit-preview { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; padding: 14px; border: 1px solid var(--lh-line); border-radius: 12px; background: var(--bg-secondary); }
#view-education .lh-kit-preview > span { padding: 5px 9px; border: 1px solid var(--lh-line); border-radius: 8px; background: var(--lh-soft); color: var(--lh-green); font-size: .8rem; line-height: 1.6; }

/* Simulators keep their meaning in the meters, not in decorative motion. */
#view-education .lh-sim-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 18px; }
#view-education .lh-sim-controls { display: grid; gap: 18px; }
#view-education .lh-sim-controls label :is(strong, output) { margin-inline-start: auto; color: var(--lh-green); font-variant-numeric: tabular-nums; }
#view-education .lh-sim-controls input[type="range"] { display: block; flex-basis: 100%; width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 0; accent-color: var(--lh-green); cursor: pointer; }
#view-education .lh-sim-presets { margin-top: 4px; }
#view-education .lh-rain-scene { position: relative; isolation: isolate; min-height: 190px; overflow: hidden; border: 1px solid var(--lh-line); border-radius: 16px; background: var(--bg-primary); }
#view-education .lh-sim-buildings { position: absolute; inset-inline: 14px; bottom: 8px; z-index: 0; display: flex; justify-content: space-around; align-items: flex-end; gap: 12px; color: var(--text-secondary); }
#view-education .lh-sim-buildings > :is(i, svg) { flex: 0 1 72px; width: 72px; max-width: 28%; font-size: clamp(2.25rem, 5vw, 4.5rem); line-height: 1.2; }
#view-education .lh-sim-water { position: absolute; inset-inline-start: 0; bottom: 0; z-index: 1; width: 100%; max-height: 100%; height: var(--water-level, 0%); background: linear-gradient(180deg, #65a9c37a, #65a9c345); border-top: 2px solid #65a9c3; pointer-events: none; transition: height .25s ease; }
#view-education .lh-rain-fall { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .45; background-image: repeating-linear-gradient(102deg, transparent 0 7px, rgba(125, 185, 215, .5) 7px 8px, transparent 8px 16px); background-size: 200% 200%; animation: lhRainFall 1.15s linear infinite; }
#view-education .lh-sim-ground { position: absolute; inset-inline: 0; bottom: 0; z-index: 0; height: 16px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(35, 105, 78, .2)); }
#view-education .lh-wave { position: absolute; inset-inline: 0; top: -7px; height: 8px; opacity: .55; background: radial-gradient(circle at 7px 8px, transparent 6px, #65a9c3 6px) repeat-x; background-size: 16px 8px; animation: lhWave 2.6s ease-in-out infinite; }
@keyframes lhRainFall { from { background-position: 0 0; } to { background-position: -34px 130px; } }
@keyframes lhWave { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-8px); } }
#view-education .lh-sim-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
#view-education .lh-sim-meters > * { padding: 12px 10px; border: 1px solid var(--lh-line); border-radius: 11px; background: var(--bg-secondary); }
#view-education .lh-sim-meters small { display: block; color: var(--text-secondary); font-size: max(.75rem, 12px); line-height: 1.6; }
#view-education .lh-sim-meters :is(output, strong) { display: block; margin-top: 5px; color: var(--lh-green); font-size: 1.15rem; font-weight: 750; line-height: 1.45; font-variant-numeric: tabular-nums; }
#view-education .lh-sim-meters output strong { margin-top: 0; }
#view-education .lh-meter { position: relative; overflow: hidden; }
#view-education .lh-meter i { display: block; height: 5px; margin-top: 9px; border-radius: 3px; background: linear-gradient(90deg, var(--lh-green), rgba(35, 105, 78, .35)); transition: width .3s ease; }
#view-education .lh-sim-result { margin-top: 16px; padding: 16px 18px; border: 1px solid var(--lh-line); border-inline-start: 4px solid var(--lh-green); border-radius: 4px 12px 12px 4px; background: var(--bg-primary); }
#view-education .lh-sim-result > strong { display: block; font-size: .95rem; line-height: 1.6; }
#view-education .lh-water-jars { display: flex; align-items: flex-end; gap: 7px; padding: 20px 12px 12px; border-bottom: 2px solid var(--lh-line); }
#view-education .lh-water-jars > div { position: relative; flex: 1 1 0; height: 104px; min-width: 0; overflow: hidden; border: 2px solid var(--lh-line); border-top-width: 5px; border-radius: 5px 5px 10px 10px; background: var(--bg-primary); }
#view-education .lh-water-jars > div > i { display: block; position: absolute; bottom: 0; inset-inline-start: 0; width: 100%; max-height: 100%; background: linear-gradient(180deg, #65a9c3b0, #65a9c35c); border-top: 2px solid #65a9c3; transition: height .25s ease; }
#view-education .lh-savings-number { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px 12px; padding: 20px 12px; text-align: center; }
#view-education .lh-savings-number strong { color: var(--lh-green); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; font-variant-numeric: tabular-nums; }
#view-education .lh-savings-number span { color: var(--text-secondary); font-size: .85rem; line-height: 1.6; }
#view-education .lh-air-scene { --lh-band: var(--lh-green); display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 190px; padding: 24px 18px; border: 1px solid var(--lh-line); border-radius: 16px; background: var(--bg-primary); text-align: center; }
#view-education .lh-air-scene[data-band="0"] { --lh-band: #4f9d52; }
#view-education .lh-air-scene[data-band="1"] { --lh-band: #c9a13b; }
#view-education .lh-air-scene[data-band="2"] { --lh-band: #cf7a35; }
#view-education .lh-air-scene[data-band="3"] { --lh-band: #c65454; }
#view-education .lh-air-scene[data-band="4"] { --lh-band: #8f62a8; }
#view-education .lh-air-scene[data-band="5"] { --lh-band: #94404f; }
#view-education .lh-air-scene > :is(i, svg) { width: 56px; color: var(--lh-band); font-size: 2.8rem; transition: color .3s ease; }
#view-education .lh-air-scene > strong { color: var(--lh-band); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; font-variant-numeric: tabular-nums; transition: color .3s ease; }
#view-education .lh-air-band { padding: 6px 12px; border: 1px solid var(--lh-band); border-radius: 20px; background: var(--lh-soft); color: var(--lh-band); font-size: .85rem; font-weight: 700; line-height: 1.6; transition: color .3s ease, border-color .3s ease; }
#view-education .lh-plan-options { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
#view-education .lh-plan-options button { flex: 1 1 170px; }
#view-education .lh-facts { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 18px; padding: 16px 18px; border: 1px dashed var(--lh-line); border-radius: 16px; background: var(--lh-soft); }
#view-education .lh-facts-title { display: inline-flex; align-items: center; gap: 8px; color: var(--lh-green); font-size: .76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; line-height: 1.5; }
#view-education .lh-facts-title > :is(i, svg) { font-size: 1rem; }
#view-education .lh-fact { display: flex; align-items: flex-start; gap: 11px; animation: lhReveal .45s ease both; }
#view-education .lh-fact:nth-child(3) { animation-delay: .06s; }
#view-education .lh-fact:nth-child(4) { animation-delay: .12s; }
#view-education .lh-fact:nth-child(5) { animation-delay: .18s; }
#view-education .lh-fact > :is(i, svg) { flex: 0 0 auto; margin-top: 2px; width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--bg-primary); color: var(--lh-green); font-size: .78rem; }
#view-education .lh-fact b { font-weight: 500; color: var(--text-primary); font-size: .88rem; line-height: 1.7; }
@media (hover: hover) {
  #view-education :is(.lh-site, .lh-supply, .lh-lab-choices button, .lh-destinations button, .lh-plan-options button, .lh-practice-tabs button, .lh-lab-link):not(:disabled):hover { border-color: var(--lh-green); background: var(--lh-soft); }
  #view-education :is(.lh-site, .lh-supply, .lh-plan-options button, .lh-lab-choices button, .lh-destinations button):not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 12px 26px -18px rgba(18, 58, 40, .7); }
  #view-education .lh-lab .lh-primary:not(:disabled):hover,
  #view-education .lh-lab-strip .lh-primary:not(:disabled):hover { transform: none; }
}
@container lh-lab (max-width: 620px) {
  #view-education :is(.lh-lab-layout, .lh-sim-layout, .lh-report-parts) { grid-template-columns: minmax(0, 1fr); }
}
@container lh-lab (max-width: 380px) {
  #view-education :is(.lh-inspection-board, .lh-supply-grid, .lh-destinations, .lh-sim-meters) { grid-template-columns: minmax(0, 1fr); }
  #view-education :is(.lh-site, .lh-supply) { min-height: 88px; }
  #view-education .lh-lab-detail { padding: 16px 12px; }
  #view-education .lh-lab-footer { align-items: stretch; }
  #view-education .lh-lab-footer > :is(button, div) { flex: 1 1 100%; }
  #view-education .lh-lab-footer > div > button { flex: 1 1 120px; }
}
@media (max-width: 600px) {
  #view-education :is(.lh-lab-layout, .lh-sim-layout, .lh-report-parts) { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #view-education .lh-lab { padding: 16px 14px; border-radius: 18px; }
  #view-education .lh-facts { padding: 14px; gap: 9px; }
  #view-education .lh-fact b { font-size: .85rem; line-height: 1.65; }
  #view-education .lh-lab-strip { padding: 18px 16px; }
  #view-education .lh-lab-links > button { flex: 1 1 150px; }
}
@media (max-width: 380px) {
  #view-education :is(.lh-inspection-board, .lh-supply-grid, .lh-destinations, .lh-sim-meters) { grid-template-columns: minmax(0, 1fr); }
  #view-education .lh-lab-detail { padding: 16px 12px; }
  #view-education .lh-lab-footer > :is(button, div) { flex: 1 1 100%; }
  #view-education .lh-lab-footer > div > button { flex: 1 1 100%; }
}

@keyframes lhReveal { from { opacity: .45; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (hover: hover) {
  #view-education .lh-card:hover { transform: translateY(-3px); border-color: var(--lh-line); }
  #view-education .lh-primary:not(:disabled):hover { transform: translateY(-2px); }
  #view-education .lh-option:not(:disabled):hover { border-color: var(--lh-green); }
}
@media (max-width: 1150px) {
  #view-education .lh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-education .lh-section-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
  #view-education .lh-search { width: 100%; }
}
@media (max-width: 600px) {
  #view-education .lh-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 3px; padding: 4px; margin-bottom: 12px; }
  #view-education .lh-nav .learn-cat { min-width: 0; flex-direction: column; padding: 7px 5px; font-size: .75rem; line-height: 1.4; white-space: normal; justify-content: center; gap: 4px; }
  #view-education .lh-hero { padding: 18px; border-radius: 16px; }
  #view-education .lh-hero h2 { max-width: 100%; font-size: 1.625rem; margin: 10px 0; }
  #view-education .lh-hero > p { max-width: 100%; font-size: .9375rem; line-height: 1.5; margin-bottom: 14px; }
  #view-education .lh-garden { opacity: .2; width: 42%; right: -10px; }
  #view-education .lh-eyebrow { font-size: .75rem; letter-spacing: .02em; }
  #view-education .lh-hero-note { max-width: 100%; margin-top: 8px; }
  #view-education .lh-overview { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 14px; margin: 12px 0 18px; }
  #view-education .lh-overview strong { font-size: 1.3rem; }
  #view-education .lh-overview .lh-grow { grid-column: 1 / -1; }
  #view-education .lh-overview progress { margin-top: 4px; }
  #view-education .lh-grid { grid-template-columns: 1fr; gap: 10px; }
  #view-education .lh-card { padding: 14px; border-radius: 16px; }
  #view-education .lh-card-top { margin-bottom: 8px; }
  #view-education .lh-topic-icon { width: 38px; height: 38px; font-size: 1.1rem; }
  #view-education .lh-bookmark { width: 44px; height: 44px; }
  #view-education .lh-card-topic { margin-bottom: 4px; }
  #view-education .lh-card h4 { font-size: 1.075rem; margin-bottom: 6px; }
  #view-education .lh-card > p { font-size: .9375rem; line-height: 1.5; margin-bottom: 12px; }
  #view-education .lh-card-footer { padding-top: 6px; }
  #view-education .lh-lab-link { margin-top: 6px; padding: 8px 12px; }
  #view-education .lh-lab-strip { padding: 14px; gap: 12px; margin: 16px 0; }
  #view-education .lh-lab-strip header > :is(i, svg) { display: none; }
  #view-education .lh-lab-strip p { font-size: .875rem !important; line-height: 1.5; }
  #view-education .lh-lab-links { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 4px; }
  #view-education .lh-lab-links > button { flex: 0 0 auto; max-width: 85%; }
  #view-education .lh-section-heading { gap: 10px; margin-bottom: 12px; }
  #view-education .lh-section-heading h3 { font-size: 1.125rem; }
  #view-education .lh-filters { gap: 6px; }
  #view-education .lh-filters button { padding: 8px 12px; min-height: 44px; }
  #view-education .lh-lesson-head { padding-right: 0; margin-bottom: 16px; }
  #view-education .lh-lesson-head h2 { font-size: 1.4rem; }
  #view-education .lh-lesson-head .lh-back { margin-bottom: 10px; }
  #view-education .lh-save-lesson { position: static; margin-top: 10px; }
  #view-education .lh-steps { gap: 6px; }
  #view-education .lh-steps button { flex-direction: column; padding: 8px 5px; gap: 4px; font-size: .75rem; line-height: 1.5; }
  #view-education .lh-step-surface { padding: 16px 14px; border-radius: 16px; }
  #view-education .lh-takeaways > div { gap: 10px; padding: 12px 0; }
  #view-education .lh-takeaways p { font-size: .9375rem; line-height: 1.6; }
  #view-education .lh-step-footer { align-items: stretch; flex-direction: column; gap: 12px; padding-top: 16px; margin-top: 12px; }
  #view-education .lh-step-footer > span { max-width: 100%; }
  #view-education .lh-tool { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
  #view-education .lh-depth-scene { min-height: 160px; }
  #view-education .lh-calculator output strong { font-size: 2rem; }
  #view-education .lh-practice-summary { padding: 15px 0; }
  #view-education .lh-summary-actions > button { width: 100%; }
  #view-education .lh-checks label { padding: 14px 12px; }
  #view-education .lh-completion { padding: 20px 16px; }
  #view-education .lh-action-title { align-items: flex-start; }
  #view-education .kb-tools { flex-wrap: wrap; }
  #view-education .kb-tools > * { max-width: 100%; min-width: 0; }
  #view-education .kb-path-head { padding: 15px 10px; gap: 10px; }
  #view-education .kp-head-txt { min-width: 0; }
  #view-education .kp-meter { min-width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  #view-education *, #view-education *::before, #view-education *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
html.reduce-motion #view-education *, html.reduce-motion #view-education *::before, html.reduce-motion #view-education *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

[data-theme="dark"] {
  color-scheme: dark;
  --bg-primary: #141518;
  --bg-secondary: #1e2024;
  --bg-tertiary: #282b30;
  --bg-quaternary: #32363d;
  --text-primary: #f1f2f4;
  --text-secondary: #c3c7ce;
  --text-muted: #a1a7b1;
  --border: #3b4048;
  --border-light: #2d3036;
  --accent: #9cdbb3;
  --accent-light: #b9ebca;
  --accent-dark: #74be92;
  --accent-bg: rgba(156, 219, 179, .09);
  --accent-bg-hover: rgba(156, 219, 179, .15);
  --gradient-accent: linear-gradient(135deg, #245b44, #36714f);
  --gradient-accent-hover: linear-gradient(135deg, #1d4937, #2b6044);
  --glass-bg: rgba(30, 32, 36, .94);
}
body {
  background: radial-gradient(ellipse at 3% 4%, #edf2e0, transparent 55%), radial-gradient(ellipse at 95% 40%, #f3e5df, transparent 60%), #f5f8f1;
  background-attachment: scroll;
}
[data-theme="dark"] body {
  background: var(--bg-primary);
  background-attachment: scroll;
}
.panel {
  background: var(--bg-secondary);
  isolation: isolate;
  --garden-opacity: .26;
}
[data-theme="dark"] .panel {
  background: var(--bg-primary);
  --garden-opacity: .34;
}
.panel-garden {
  position: sticky; top: 0; height: 0; z-index: -1;
  pointer-events: none; user-select: none;
}
.panel-garden-art {
  position: absolute; top: 0; left: calc(-1 * var(--garden-inset));
  width: var(--garden-width); height: var(--garden-height);
  overflow: hidden; container-type: inline-size;
}
.panel-flower {
  position: absolute; left: var(--flower-x); top: var(--flower-y);
  width: var(--flower-size); height: auto; opacity: var(--garden-opacity);
  transform: translate(-50%, -50%) rotate(var(--flower-turn));
}
@container (max-width: 600px) {
  .panel-flower { width: calc(var(--flower-size) * .8); }
  .panel-flower:nth-child(n + 9) { display: none; }
}
.sidebar { isolation: isolate; --sidebar-flower-opacity: .38; }
[data-theme="dark"] .sidebar { --sidebar-flower-opacity: .3; }
.sidebar-garden {
  position: absolute; inset: var(--sidebar-garden-top) 0 0; z-index: -1;
  overflow: hidden; pointer-events: none; user-select: none; container-type: inline-size;
  mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .2) 25%, rgba(0, 0, 0, .2) 70%, #000);
}
.sidebar-garden-scene {
  position: absolute; inset: 0; opacity: 0;
  animation: sidebar-garden-cycle 60s linear infinite;
}
.sidebar-garden-scene:first-child { opacity: 1; }
.sidebar-garden-scene:last-child { animation-delay: -30s; }
.sidebar-flower {
  position: absolute; left: var(--flower-x); top: var(--flower-y);
  width: min(var(--flower-size), 65cqw); height: auto; opacity: var(--sidebar-flower-opacity);
  transform: translate(-50%, -50%) rotate(var(--flower-turn));
}
@keyframes sidebar-garden-cycle {
  0%, 44%, 100% { opacity: 1; }
  50%, 94% { opacity: 0; }
}
@container (max-width: 100px) {
  .sidebar-flower:nth-child(even) { display: none; }
}
@media (min-width: 769px) {
  .sidebar { position: relative; }
}
@media (max-width: 768px) {
  .sidebar { background: var(--bg-secondary); }
  .sidebar:not(.open) .sidebar-garden-scene { animation-play-state: paused; }
}
body.splash-open .sidebar-garden-scene { animation-play-state: paused; }
html.reduce-motion .sidebar-garden-scene { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .sidebar-garden-scene { animation: none; }
}

/* ---------- still scenes -------------------------------------------------- */
/* The panel's faint flower field, replanted inside surfaces that cover it:
   dialogs and the intent chooser. Same art, same light touch, no motion —
   the flowers sit behind every real child so text keeps full contrast. */
.still-host { position: relative; isolation: isolate; --still-op: .2; }
[data-theme="dark"] .still-host { --still-op: .26; }
.still-host > *:not(.still-scene) { position: relative; z-index: 1; }
.still-scene {
  position: absolute; top: 0; left: 0; width: 100%;
  /* Dialogs scroll inside their own box, so the planting is stretched to the
     full content height rather than the first screenful; --still-h is fitted
     from JS the same way the panel garden fits --garden-height. */
  height: var(--still-h, 100%);
  z-index: 0; overflow: hidden;
  border-radius: inherit; pointer-events: none; user-select: none;
  container-type: inline-size;
}
.still-flower {
  position: absolute; left: var(--flower-x); top: var(--flower-y);
  width: var(--flower-size); height: auto; opacity: var(--still-op);
  transform: translate(-50%, -50%) rotate(var(--flower-turn));
}
@container (max-width: 420px) {
  .still-flower { width: calc(var(--flower-size) * .78); }
  .still-flower:nth-child(n + 5) { display: none; }
}
/* Report cards keep their flowers. The coloured wash that spread out of the list is off. */
.report-item .bloom-decor { background: none; }
.report-item .bd-wash,
.report-item .bd-sheen { display: none; }
[data-theme="dark"] .panel .card { background: var(--bg-secondary); border-color: var(--border); }
[data-theme="dark"] .sidebar { background: var(--bg-secondary); border-right-color: var(--border-light); }
[data-theme="dark"] .top-bar { background: var(--bg-secondary); border-bottom-color: var(--border-light); }
[data-theme="dark"] :is(.comm-card, .event-card, .report-item, .mr-card, .soc-card, .ev-card2, .judge-card, .ef-card, .water-tip-card, .fg-month) { background-color: var(--bg-secondary); border-color: var(--border); }
[data-theme="dark"] .bloom-decor { background: radial-gradient(ellipse at 100% 100%, hsl(var(--bd-hue) / .07), transparent 62%); }
[data-theme="dark"] .bd-wash { opacity: .08; }
[data-theme="dark"] .auth-gate { background: var(--bg-primary); }
[data-theme="dark"] .auth-gate::before { background: radial-gradient(ellipse at 20% 0%, rgba(165, 155, 202, .08), transparent 60%); }
[data-theme="dark"] .auth-left { background: linear-gradient(160deg, var(--bg-tertiary), var(--bg-secondary)); }
[data-theme="dark"] .auth-left::before { background: none; }
[data-theme="dark"] .auth-right { background: var(--bg-secondary); }
[data-theme="dark"] :is(.points-card, .auth-submit) { background: var(--gradient-accent); }
[data-theme="dark"] :is(.map-fab:hover, .map-fab.active, .map-basemap-btn.active, .pal-item.sel .pi-ico,
  .depth-level.active, .flip-tag.fact, .lc-node.active, .step-num, .fg-month.active, .fg-n,
  .notif-tab.active, .tip-rotator-next:hover, .auth-anonymous-btn:hover, .comm-tab.active,
  .comm-btn.voted:not(.comm-like), .comm-cat-opt.active, .explore-cat.active, .explore-cat.active span,
  .re-locate:hover, .route-quick-chip.active, .route-quick-chip.active i, .lbd-you-tag,
  .ev-remind-map, .kb-open:hover, .kp-step.on .kp-check, .kp-jump:hover, .auth-last-used) { color: var(--text-inverse); }
[data-theme="dark"] .selection-card.selected::after { color: var(--text-inverse); }
#notifPanel {
  position: fixed; top: calc(var(--app-header-bottom, var(--topbar-height)) + 8px);
  max-height: min(520px, calc(100dvh - var(--app-header-bottom, var(--topbar-height)) - 24px)); z-index: 9500;
}
.guide-ring { animation-iteration-count: 3; }

body.splash-open .mobile-bar { visibility: hidden; pointer-events: none; }

.demo-report-tag {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 8px;
  border: 1px solid #dbc395; border-radius: 6px; background: #fff5df; color: #75501b;
  font-size: .68rem; font-weight: 750; line-height: 1.5; vertical-align: middle; white-space: normal;
}
.demo-report-notice {
  margin: 0 0 16px; padding: 13px 15px; border: 1px solid #dbc395; border-radius: 10px;
  background: #fff9ec; color: #644923; font-size: .8rem; line-height: 1.65; overflow-wrap: anywhere;
}
.demo-report-notice p { margin: 7px 0 0; color: inherit; font-size: inherit; line-height: inherit; }
.demo-report-notice[hidden] { display: none; }
.report-item .demo-report-tag { margin-top: 5px; }
.custom-popup:has(> .demo-report-notice) { width: min(260px, calc(100vw - 90px)); }
.custom-popup .demo-report-notice { margin: 8px 0; padding: 10px; font-size: .73rem; }
[data-theme="dark"] .demo-report-tag { border-color: #826c43; background: #392f20; color: #f3d599; }
[data-theme="dark"] .demo-report-notice { border-color: #75613e; background: #2c271e; color: #ead7b4; }

/* ---------- 23. WELCOME PAGE — LANGUAGE + SCROLL PASS -------------------
   The lockup, the counters and the six cards stay exactly where they are.
   Two things are added around them:
     · a language pill, because Bangla readers should not have to enter the app
       first to find the switch;
     · a vine down the right edge plus a small dock, because the panel is taller
       than a phone screen and the "Enter" button used to sit out of sight with
       nothing pointing at it.
   Colours are the scenery's: river blue, leaf green and marigold gold. */

/* language pill */
.splash-lang {
  position: absolute; top: 20px; right: 20px; z-index: 4;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; cursor: pointer;
  border-radius: 999px; border: 1.5px solid rgba(15, 118, 110, .28); background: rgba(255, 255, 255, .84);
  font-family: inherit; font-size: .78rem; font-weight: 800; color: #0f766e;
  box-shadow: 0 4px 14px rgba(12, 74, 110, .1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .25s var(--ease-out), box-shadow .25s, background .2s, color .2s;
  animation: fadeInUp .5s var(--ease-out) .3s both;
}
.splash-lang i { font-size: .98rem; }
.splash-lang:hover { transform: translateY(-2px); background: #fff; color: #15803d; box-shadow: 0 8px 20px rgba(21, 128, 61, .2); }
.splash-lang:active { transform: translateY(0) scale(.97); }

/* the vine: how much of the panel is left below */
.splash-rail {
  position: absolute; right: 14px; top: 50%; z-index: 3; width: 4px; height: min(230px, 42vh);
  transform: translateY(-50%); border-radius: 99px; background: rgba(15, 118, 110, .16);
  overflow: hidden; transition: opacity .35s ease;
}
.splash-rail-fill {
  display: block; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top;
  border-radius: 99px; background: linear-gradient(180deg, #0e7490 0%, #15803d 58%, #f59e0b 100%);
  transition: transform .18s linear;
}
.splash-rail.off { opacity: 0; }

/* the dock: the same action, within reach */
.splash-dock {
  position: absolute; left: 50%; bottom: 18px; z-index: 4;
  display: flex; align-items: center; gap: 14px; padding: 8px 9px 8px 17px;
  border-radius: 999px; border: 1.5px solid rgba(15, 118, 110, .3); background: rgba(255, 255, 255, .93);
  box-shadow: 0 14px 34px rgba(12, 56, 38, .2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transform: translate(-50%, 150%);
  transition: transform .45s var(--ease-spring), opacity .3s ease;
}
.splash-dock.on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.sd-cue { display: inline-flex; align-items: center; gap: 8px; font-size: .76rem; font-weight: 750; color: #475569; }
.sd-cue i { color: #0f766e; animation: sdBob 1.9s ease-in-out infinite; }
@keyframes sdBob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
.splash-dock.moved .sd-cue { display: none; }
.sd-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; cursor: pointer;
  border: 0; border-radius: 999px; font-family: inherit; font-size: .87rem; font-weight: 800; color: #fff;
  background: linear-gradient(120deg, #0e7490 0%, #0f766e 40%, #15803d 100%);
  box-shadow: 0 6px 16px rgba(15, 118, 110, .3); text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
  transition: transform .25s var(--ease-out), box-shadow .25s;
}
.sd-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 118, 110, .38); }
.sd-btn:active { transform: translateY(0) scale(.98); }
.splash.leaving .splash-dock, .splash.hidden .splash-dock,
.splash.leaving .splash-rail, .splash.hidden .splash-rail { opacity: 0; pointer-events: none; }

/* one light pass along the primary button when it is hovered */
.splash-enter::after {
  content: ''; position: absolute; top: -60%; left: 0; width: 22%; height: 220%;
  transform: rotate(18deg) translateX(-180%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
}
.splash-enter:hover::after { animation: enterSheen .9s var(--ease-out); }
@keyframes enterSheen { to { transform: rotate(18deg) translateX(560%); } }

/* keyboard visitors get the same lift the pointer gets */
.splash-feat:focus-visible {
  transform: translateY(-5px); border-color: var(--fc-ink);
  box-shadow: 0 16px 34px rgba(12, 56, 38, .16); outline: 2.5px solid var(--fc-ink); outline-offset: 3px;
}

/* ---- dark ---- */
[data-theme="dark"] .splash-lang { background: var(--bg-secondary); border-color: var(--border); color: var(--text-secondary); }
[data-theme="dark"] .splash-lang:hover { background: var(--bg-tertiary); color: var(--text-primary); }
[data-theme="dark"] .splash-rail { background: var(--border); }
[data-theme="dark"] .splash-dock { background: var(--bg-secondary); border-color: var(--border); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }
[data-theme="dark"] .sd-cue { color: var(--text-secondary); }
[data-theme="dark"] .sd-cue i { color: var(--accent); }

/* ---- phone ---- */
@media (max-width: 768px) {
  .splash-lang { top: 12px; right: 12px; padding: 8px 13px; font-size: .74rem; }
  .splash-rail { right: 5px; width: 3px; height: 30vh; }
  .splash-dock {
    left: 12px; right: 12px; bottom: 12px; justify-content: space-between; gap: 10px;
    padding: 7px 7px 7px 15px; transform: translate(0, 160%);
  }
  .splash-dock.on { transform: translate(0, 0); }
  .sd-btn { padding: 10px 16px; font-size: .82rem; }
}
@media (max-width: 400px) {
  .sd-cue { display: none; }
}

/* ---- motion off: the bob stops, the words still change ---- */
html.reduce-motion .sd-cue i,
html.reduce-motion .splash-lang { animation: none; }
html.reduce-motion .splash-enter:hover::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .sd-cue i { animation: none; }
  .splash-rail-fill { transition: none; }
}

/* ---------- 24. WAS IT REALLY FIXED? ------------------------------------
   A resolved report is a claim, not a fact. This is the question, the two
   answers and the tally everyone reads before trusting the green pill.
   Colours follow the meaning: leaf green for "really clear", marigold for
   "still a problem" (a warning, not an accusation), slate for "no answer". */
.fix-badge {
  display: inline-flex; align-items: center; gap: 5px; margin: 5px 6px 0 0; padding: 3px 9px;
  border: 1.5px solid; border-radius: 999px; font-size: .68rem; font-weight: 750; line-height: 1.5;
  vertical-align: middle; white-space: nowrap;
}
.fix-badge i { font-size: .72rem; }
.fix-badge.ok { border-color: rgba(21, 128, 61, .34); background: #ecfdf3; color: #14532d; }
.fix-badge.no { border-color: rgba(180, 83, 9, .34); background: #fffbeb; color: #78350f; }
.fix-badge.none { border-color: rgba(100, 116, 139, .3); background: #f8fafc; color: #475569; }

.fix-check {
  margin: 0 0 18px; padding: 15px 16px 14px; border: 1.5px solid rgba(21, 128, 61, .26); border-radius: 14px;
  background: linear-gradient(150deg, rgba(236, 253, 243, .95), rgba(255, 255, 255, .9) 62%);
  box-shadow: 0 6px 18px rgba(12, 74, 55, .07); animation: fixIn .5s var(--ease-out) both;
}
.fix-check.disputed {
  border-color: rgba(180, 83, 9, .32);
  background: linear-gradient(150deg, rgba(255, 251, 235, .96), rgba(255, 255, 255, .9) 62%);
}
@keyframes fixIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fix-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fix-q { font-size: .95rem; font-weight: 800; letter-spacing: -.01em; color: #14532d; }
.fix-q i { margin-right: 6px; color: #15803d; }
.fix-check.disputed .fix-q { color: #78350f; }
.fix-count { font-size: .7rem; font-weight: 800; letter-spacing: .04em; color: #64748b; white-space: nowrap; }
.fix-count.ok { color: #15803d; }
.fix-count.no { color: #b4530a; }
/* One bar, two answers: the green share is the share that says "really fixed". */
.fix-meter { position: relative; height: 7px; margin: 11px 0 9px; border-radius: 99px; overflow: hidden; background: rgba(180, 83, 9, .22); }
.fix-meter i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #15803d, #22c55e); transition: width .5s var(--ease-out); }
.fix-tally { margin: 0 0 12px; font-size: .82rem; font-weight: 650; line-height: 1.55; color: #1f2937; }
.fix-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.fix-btn {
  flex: 1 1 160px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px; cursor: pointer; border: 1.5px solid; border-radius: 11px; background: #fff;
  font-family: inherit; font-size: .83rem; font-weight: 800;
  transition: transform .22s var(--ease-out), box-shadow .22s, background .2s, color .2s, border-color .2s;
}
.fix-btn.ok { border-color: rgba(21, 128, 61, .38); color: #15803d; }
.fix-btn.no { border-color: rgba(180, 83, 9, .38); color: #b4530a; }
.fix-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(12, 74, 55, .14); }
.fix-btn.ok:hover, .fix-btn.ok.mine { background: #15803d; border-color: #15803d; color: #fff; }
.fix-btn.no:hover, .fix-btn.no.mine { background: #b4530a; border-color: #b4530a; color: #fff; }
.fix-btn:active { transform: translateY(0) scale(.98); }
.fix-btn:focus-visible { outline: 2.5px solid currentColor; outline-offset: 3px; }
.fix-you {
  padding: 2px 6px; border-radius: 99px; background: rgba(255, 255, 255, .22);
  font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .9;
}
.fix-note { margin: 10px 0 0; font-size: .73rem; line-height: 1.6; color: #64748b; }
/* Room is tight inside a map popup, so the pill wraps instead of overflowing. */
.custom-popup .fix-badge { margin: 6px 0 2px; white-space: normal; }

[data-theme="dark"] .fix-badge.ok { border-color: rgba(110, 231, 183, .35); background: rgba(6, 78, 59, .5); color: #a7f3d0; }
[data-theme="dark"] .fix-badge.no { border-color: rgba(253, 230, 138, .34); background: rgba(69, 26, 3, .55); color: #fde68a; }
[data-theme="dark"] .fix-badge.none { border-color: rgba(148, 163, 184, .3); background: rgba(30, 41, 59, .6); color: #cbd5e1; }
[data-theme="dark"] .fix-check {
  border-color: rgba(110, 231, 183, .28); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  background: linear-gradient(150deg, rgba(6, 40, 28, .8), rgba(12, 30, 24, .7) 60%);
}
[data-theme="dark"] .fix-check.disputed {
  border-color: rgba(253, 230, 138, .3);
  background: linear-gradient(150deg, rgba(50, 30, 8, .8), rgba(20, 24, 20, .7) 60%);
}
[data-theme="dark"] :is(.fix-q, .fix-tally) { color: #ecfdf5; }
[data-theme="dark"] .fix-check.disputed .fix-q { color: #fde68a; }
[data-theme="dark"] .fix-q i { color: #6ee7b7; }
[data-theme="dark"] .fix-count { color: #94a3b8; }
[data-theme="dark"] .fix-count.ok { color: #6ee7b7; }
[data-theme="dark"] .fix-count.no { color: #fcd34d; }
[data-theme="dark"] .fix-meter { background: rgba(253, 230, 138, .22); }
[data-theme="dark"] .fix-meter i { background: linear-gradient(90deg, #059669, #34d399); }
[data-theme="dark"] .fix-btn { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .fix-btn.ok { border-color: rgba(110, 231, 183, .4); color: #a7f3d0; }
[data-theme="dark"] .fix-btn.no { border-color: rgba(253, 230, 138, .4); color: #fde68a; }
[data-theme="dark"] .fix-btn.ok:hover, [data-theme="dark"] .fix-btn.ok.mine { background: #059669; border-color: #059669; color: #04231a; }
[data-theme="dark"] .fix-btn.no:hover, [data-theme="dark"] .fix-btn.no.mine { background: #d97706; border-color: #d97706; color: #2b1602; }
[data-theme="dark"] .fix-note { color: #94a3b8; }

@media (max-width: 640px) {
  .fix-check { padding: 13px 13px 12px; }
  .fix-btn { flex: 1 1 100%; }
  .fix-badge { white-space: normal; }
}
html.reduce-motion .fix-check { animation: none; }
html.reduce-motion .fix-meter i { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .fix-check { animation: none; }
  .fix-meter i { transition: none; }
}

.map-wrapper { container: map-viewport / size; }
.map-floating {
  right: 12px; padding: 6px; gap: 5px; z-index: 1000;
  border: 1px solid var(--border); border-radius: 16px;
}
.map-style-picker { position: relative; }
.map-style-toggle, .legend-title { list-style: none; cursor: pointer; }
.map-style-toggle::-webkit-details-marker, .legend-title::-webkit-details-marker { display: none; }
.map-style-picker[open] .map-style-toggle { color: var(--accent); background: var(--accent-bg); }
.map-basemaps {
  position: absolute; right: calc(100% + 14px); bottom: 0; width: 150px;
  margin: 0; padding: 8px; gap: 5px;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-md);
}
.map-basemap-btn { min-height: 36px; white-space: normal; }
.map-legend {
  top: 12px; bottom: auto; left: 12px; max-width: calc(100% - 82px);
  max-height: calc(100cqh - 92px); overflow-y: auto;
  padding: 0; border-radius: 14px;
}
.legend-title {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 40px; margin: 0; padding: 10px 12px;
}
.legend-title i { font-size: .7rem; }
.map-legend[open] .legend-title i { transform: rotate(180deg); }
.legend-items { padding: 0 12px 10px; }
@container map-viewport (max-height: 440px) {
  .map-floating {
    top: auto; bottom: 26px; right: 12px; transform: none;
    flex-direction: row; gap: 4px; padding: 5px;
  }
  .map-floating .map-fab { width: 36px; height: 36px; font-size: .9rem; }
  .map-basemaps {
    right: 0; bottom: calc(100% + 12px); width: 220px;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container map-viewport (max-width: 280px) and (max-height: 440px) {
  .map-floating { display: grid; grid-template-columns: repeat(3, 36px); }
}

.explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.place-chip { min-width: 0; }
.rf-card { container: report-card / inline-size; }
@container report-card (max-width: 420px) {
  .rf-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; }
  .rf-hero-art { grid-column: 1; grid-row: 1; width: 46px; height: 46px; }
  .rf-hero-pts { grid-column: 2; grid-row: 1; align-self: center; }
  .rf-hero-body { grid-column: 1 / -1; }
  .rf-hero-title { font-size: 1.12rem; line-height: 1.35; }
  .rf-hero-sub { line-height: 1.65; }
  .rf-meter { flex-wrap: wrap; gap: 10px; }
  .rf-meter-txt { flex-basis: 150px; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
}

.splash { min-height: 0; }
.splash-inner { max-height: calc(100dvh - 40px); }
.splash-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-item { min-width: 0; }
.modal-box, .legal-modal-box, .exp-box { max-height: calc(100dvh - 40px); }
#notifPanel.show { display: flex; flex-direction: column; }
#notifPanel .notif-scroll { min-height: 0; }
#notifPanel .notif-head { flex-wrap: wrap; gap: 8px; }
.toast { pointer-events: none; }
[data-theme="dark"] .toast { background: var(--bg-secondary); color: var(--text-primary); }

@media (max-width: 768px) {
  .mobile-bar { z-index: 1100; }
  .top-bar { padding: max(8px, env(safe-area-inset-top, 0px)) 12px 8px; gap: 6px; }
  .top-bar-right { flex-wrap: wrap; column-gap: 3px; }
  .top-bar-right .top-btn, .lang-toggle { width: 44px; height: 44px; flex-basis: 44px; }
  #signInBtn, .sos-btn, .user-profile-btn { min-height: 44px; }
  #signInBtn, .sos-btn { min-width: 44px; padding-inline: 6px; }
  .app-layout[data-layout] .panel { padding: 12px; padding-bottom: 28px !important; }
  .app-layout[data-layout="split"] .map-wrapper {
    height: clamp(180px, 24dvh, 240px); flex: 0 0 clamp(180px, 24dvh, 240px);
    max-height: none; min-height: 0;
  }
  .app-layout[data-layout="split"] .panel { flex: 1 1 0; height: auto; min-height: 0; }
  .card { border-radius: 16px; margin-bottom: 12px; }
  .card-title { gap: 8px; margin-bottom: 12px; font-size: 1rem; }
  .card-title .icon { width: 32px; height: 32px; flex-shrink: 0; }
  .weather-widget { padding: 10px 12px; gap: 10px; margin-bottom: 10px; }
  .weather-widget .weather-icon { font-size: 1.5rem; }
  .weather-info p, .info-banner p, .rf-hero-sub, .rf-meter-hint,
  .demo-report-notice p, .watch-lead { font-size: .875rem !important; line-height: 1.5; }
  .info-banner { padding: 10px 12px; gap: 8px; margin-bottom: 12px; }
  .rf-card { padding: 12px; }
  .rf-hero { display: block; padding: 12px; margin-bottom: 10px; }
  .rf-hero-art, .rf-hero-pts { display: none; }
  .rf-hero-title { font-size: 1.05rem; margin: 4px 0 6px; }
  .rf-meter { flex-wrap: nowrap; padding: 10px; gap: 10px; margin-bottom: 12px; }
  .rf-meter-txt { flex: 1; min-width: 0; }
  .rf-pile-viz { width: 2rem; flex-direction: column; align-items: center; gap: 4px; font-size: 1.125rem; }
  .rf-meter-steps { gap: 4px; margin-top: 6px; }
  .rf-meter-steps span { min-height: 44px; display: inline-flex; align-items: center; padding: 4px 8px; }
  .report-top { flex-wrap: wrap; }
  .report-top > div { flex: 1 1 180px; min-width: 0; }
  .report-top > div > div { flex-wrap: wrap; }
  .report-top span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .rf-card .form-group { margin-bottom: 14px; }
  .rf-card .form-label { margin-bottom: 6px; }
  .rf-card .form-input, .rf-card .form-select { min-height: 44px; padding: 10px 12px; }
  .demo-report-notice { padding: 10px 12px; margin-bottom: 12px; }
  .demo-report-notice p { margin-top: 4px; }
  .kpi-grid { gap: 8px; margin-bottom: 12px; }
  .kpi-card { padding: 10px; }
  .kpi-icon { width: 30px; height: 30px; font-size: .875rem; }
  .kpi-value { font-size: 1.25rem; }
  .kpi-label { font-size: .8125rem !important; line-height: 1.4; }
  .civic-grid, .dash-grid-2 { gap: 12px; margin-bottom: 12px; }
  .pulse-row { gap: 10px; }
  .pulse-score { font-size: 2.25rem; }
  .chart-box { height: 160px; }
  .chart-box.chart-wide { height: 150px; }
  .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .impact-tile { min-width: 0; overflow-wrap: anywhere; }
  .watch-add input { font-size: max(1rem, 16px) !important; }
  .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-action { min-width: 0; white-space: normal; }
  .map-tip { display: block; }
  .map-tip i { margin-right: 6px; }
  .profile-stats, .points-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .profile-stat, .points-breakdown-item { min-width: 0; padding: 12px 8px; }
  .settings-row { gap: 10px; padding: 10px 0; }
  .settings-row > :last-child { flex-shrink: 0; }
  .settings-note { padding: 8px 10px; font-size: .875rem !important; line-height: 1.5; }
  .connected-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px 10px; padding: 10px; }
  .conn-icon { width: 32px; height: 32px; }
  .conn-info { overflow-wrap: anywhere; }
  .connected-row > :last-child { grid-column: 2; justify-self: start; max-width: 100%; }
  #notifPanel {
    left: 8px; right: 8px; width: auto; padding: 10px;
    max-height: min(520px, calc(100dvh - var(--app-header-bottom, 108px) - var(--mobile-nav-height) - 24px));
  }
  .modal-backdrop { padding: 12px; }
  .modal-box { padding: 16px; max-height: calc(100dvh - 24px); }
  #eventModal .legal-body, #communityModal .legal-body { padding: 0 4px 8px; }
  .modal-box .modal-head { margin-bottom: 14px; padding-bottom: 10px; gap: 8px; }
  .modal-box .modal-close-btn { min-width: 44px; min-height: 44px; flex-shrink: 0; }
  .splash {
    padding: calc(56px + env(safe-area-inset-top, 0px)) 12px calc(76px + env(safe-area-inset-bottom, 0px));
  }
  .splash-stage { width: min(830px, 100%); }
  .splash-inner {
    max-height: calc(100dvh - 132px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding: 26px 16px 22px;
  }
  .splash-lang { top: calc(12px + env(safe-area-inset-top, 0px)); }
  .splash-dock { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 7px; }
  .sd-btn { flex: 1; justify-content: center; min-height: 42px; }
  .splash-stats { gap: 7px; margin: 22px auto; }
  .stat-item { padding: 14px 5px 12px; }
  .stat-num { font-size: clamp(1.3rem, 5vw, 2rem); }
  .stat-label { font-size: .75rem !important; letter-spacing: 0; line-height: 1.45; }
  .splash-rotator { display: flex; width: 100%; border-radius: 18px; gap: 4px; }
  .splash-word-wrap { min-width: 0; width: 100%; height: auto; min-height: 3em; overflow: visible; }
  .splash-word-wrap b { position: static; display: block; white-space: normal; line-height: 1.5; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-card { min-width: 0; flex-direction: row; align-items: center; gap: 8px; }
  .kpi-label { white-space: normal; overflow-wrap: anywhere; }
  .splash-title { font-size: clamp(1.8rem, 8.2vw, 2.65rem); letter-spacing: -.04em; }
  .splash-bn { font-size: 1.5rem; }
  .splash-motto { gap: 6px; flex-wrap: wrap; }
  .splash-feat {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px;
    padding: 16px 12px; text-align: left; align-items: start;
  }
  .splash-feat .sf-ico { grid-row: 1 / 3; width: 44px; height: 44px; margin: 0; }
  .sf-name { margin: 0; }
  .sf-hint { line-height: 1.6; }
}
@media (min-width: 769px) and (max-width: 1000px) {
  .top-bar-right .sync-pill { display: none; }
}
@media (min-width: 769px) and (max-width: 1000px) and (orientation: portrait) {
  .app-layout[data-layout="split"] .content-area { flex-direction: column; }
  .app-layout[data-layout="split"] .panel { width: 100%; flex: 1 1 0; min-height: 0; }
  .app-layout[data-layout="split"] .map-wrapper {
    width: 100%; flex: 0 0 32dvh; height: 32dvh; max-height: 360px;
  }
}
.about-lead { font-size: 1.08rem; line-height: 1.65; color: var(--text-primary); margin: 0; }
.about-mosaic, .about-roles, .about-note-grid {
  display: grid; gap: 12px;
}
.about-mosaic { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.about-kicker {
  grid-column: 1 / -1; margin: 10px 0 0;
  font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.about-tile, .about-role, .about-note, .about-credit {
  background: var(--bg-secondary); border: 1.5px solid var(--border); border-radius: 16px;
  padding: 16px 16px 14px; position: relative; overflow: hidden;
}
.about-tile, .about-role { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.about-tile::before, .about-role::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #0e7490, #15803d);
}
.about-tile h3, .about-role h3 { margin: 2px 0 0; font-size: 1rem; line-height: 1.35; color: var(--text-primary); }
.about-tile p, .about-role p, .about-credit p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--text-secondary); }
.about-tile-ico {
  width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-bg); color: var(--accent); font-size: .95rem;
}
.about-tile-ico.t-water, .about-tile-ico.t-map { background: var(--info-light); color: var(--info); }
.about-tile-ico.t-dengue, .about-tile-ico.t-sos { background: var(--danger-light); color: var(--danger); }
.about-tile-ico.t-waste, .about-tile-ico.t-pulse { background: var(--warning-light); color: #b45309; }
.about-tile-ico.t-route, .about-tile-ico.t-learn, .about-tile-ico.t-verify { background: var(--success-light); color: var(--success); }
.about-tile-ico.t-quiz, .about-tile-ico.t-admin, .about-tile-ico.t-board2 { background: var(--purple-light); color: var(--purple); }
.about-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.about-note-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.about-note strong { display: block; margin-bottom: 4px; color: var(--text-primary); font-size: .92rem; }
.about-note span { display: block; font-size: .84rem; line-height: 1.55; color: var(--text-secondary); }
.about-stat-note { margin: -6px 0 14px; font-size: .88rem; line-height: 1.5; color: var(--text-secondary); }
.about-credit { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.about-credit p { flex: 1 1 240px; }
.about-credit .btn { margin-left: auto; }
.ct-error { color: var(--danger); font-size: .84rem; line-height: 1.45; margin: 8px 0 0; }
[data-theme="dark"] .about-tile, [data-theme="dark"] .about-role, [data-theme="dark"] .about-note, [data-theme="dark"] .about-credit {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
}
@media (max-width: 860px) {
  .about-roles { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .about-hero { padding: 20px 16px; }
  .about-section { margin-bottom: 22px; }
  .about-section-title { font-size: 1.125rem; margin-bottom: 12px; padding-bottom: 10px; }
  .about-card, .about-privacy, .about-step, .about-tile, .about-role, .about-note { padding: 14px; border-radius: 14px; }
  .about-card :is(p, li), .about-privacy :is(p, li), .about-step p { line-height: 1.55; }
  .about-card ul { gap: 8px; }
  .about-steps, .about-stats { gap: 10px; }
  .about-stat { padding: 14px 10px; }
  .about-stat-value { font-size: 1.7rem; }
  .about-cta { padding: 22px 16px; }
}

@media (min-width: 480px) and (max-width: 768px) and (max-height: 500px) {
  .top-bar { flex-direction: row; align-items: center; min-height: 56px; padding: 8px 12px; }
  .top-bar-left { flex: 1; width: auto; }
  .page-title { font-size: .95rem; }
  .top-bar-right { width: auto; flex: 0 0 auto; gap: 6px; }
  .app-layout[data-layout="split"] .content-area { flex-direction: row; }
  .app-layout[data-layout="split"] .panel { width: 50%; flex: 0 0 50%; }
  .app-layout[data-layout="split"] .map-wrapper { flex: 1; height: 100%; max-height: none; }
}

/* Phone and portrait tablet: the page is the form. The map opens from the map button. */
.top-brand { display: none; }
.phone-map-btn, .phone-map-close { display: none; }
.phone-map-btn[hidden], .phone-map-close[hidden] { display: none !important; }
@media (max-width: 768px), (max-width: 1000px) and (orientation: portrait) {
  .app-layout:not([data-layout="wide"]):not(.phone-map) .map-wrapper { display: none !important; }
  .app-layout:not([data-layout="wide"]):not(.phone-map) .panel {
    width: 100% !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 76px !important;
  }
  .app-layout[data-layout="split"].phone-map .panel { display: none !important; }
  .app-layout[data-layout="split"].phone-map .content-area { flex-direction: column !important; }
  .app-layout[data-layout="split"].phone-map .map-wrapper {
    display: block !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .app-layout[data-layout="split"].phone-map #map,
  .app-layout[data-layout="split"].phone-map .leaflet-container { height: 100% !important; }

  .top-bar {
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center !important;
    gap: 8px;
    min-height: 56px;
    padding: max(8px, env(safe-area-inset-top, 0px)) 10px 8px;
  }
  .top-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
  }
  .top-brand img {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
  }
  .top-brand span {
    font-weight: 800;
    font-size: 1.08rem;
    letter-spacing: -0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .top-bar-left { display: none !important; }
  .top-bar-right {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: auto;
    flex: none;
    margin-left: auto;
  }
  .top-bar-right .guide-btn,
  .top-bar-right .top-export-btn,
  .top-bar-right .sync-pill { display: none !important; }
  .top-bar-right .top-btn:not(.guide-btn):not(.top-export-btn),
  .top-bar-right .lang-toggle,
  .top-bar-right .phone-map-btn:not([hidden]) {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .top-bar-right #signInBtn,
  .top-bar-right .sos-btn,
  .top-bar-right .user-profile-btn {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: 0;
    justify-content: center;
  }
  .top-bar-right #signInBtn i,
  .top-bar-right .sos-btn i { font-size: 1rem; }
  .phone-map-btn:not([hidden]) {
    border-radius: 12px;
    background: var(--accent-bg);
    color: var(--accent);
    border: 1.5px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  }
  .app-layout.phone-map .phone-map-btn:not([hidden]) {
    background: var(--accent);
    color: #fff;
  }

  .selection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .selection-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .selection-card { padding: 8px 4px; min-height: 72px; }
  .selection-card .sel-icon { font-size: 1.2rem; line-height: 1; }
  .selection-card .sel-label { font-size: .78rem; line-height: 1.25; }
  .selection-card .sel-desc { font-size: .68rem; line-height: 1.25; }

  .to-top {
    position: fixed;
    right: 14px;
    left: auto;
    bottom: calc(var(--mobile-nav-height, 16px) + 12px);
    z-index: 40;
  }
  .phone-map-close {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    left: 16px;
    bottom: calc(var(--mobile-nav-height, 16px) + 12px);
    z-index: 1200;
    border: none;
    border-radius: 999px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font: inherit;
    font-size: .88rem;
    font-weight: 800;
    box-shadow: var(--shadow-md);
    cursor: pointer;
  }
  .app-layout.phone-map .map-legend { top: 12px; left: 12px; }
  .app-layout.phone-map .map-floating { bottom: 64px; }
}
@media (max-width: 768px) {
  html { font-size: 15px; }
  #phoneMapBtn,
  .top-bar-right .palette-btn { display: none !important; }
  .panel .card,
  .panel .rf-card,
  .panel .about-card,
  .panel .about-tile,
  .panel .about-role { padding: 10px; }
  .rf-hero { padding: 10px; }
  .rf-hero-sub,
  .info-banner p,
  .form-label { font-size: .86rem; }
}