/* ============================================================
       DESIGN TOKENS — CSS Variables
       เปลี่ยนค่าที่นี่ที่เดียว UI เปลี่ยนทั้งหมด
    ============================================================ */
    :root {
      /* — 10% Accent — Cyan (CTA, active state, badge) — */
      --color-primary:       #0891b2;
      --color-primary-dark:  #0e7490;
      --color-primary-light: #06b6d4;
      --color-primary-50:    #e0f7fc;
      --color-primary-100:   #b2ebf5;

      /* — 30% Structure — Teal-Navy (secondary elements) — */
      --color-navy:          #0f2d4a;
      --color-navy-light:    #ddeaf3;
      --color-navy-dark:     #071d33;

      /* — Semantic Colors — */
      --color-success:       #059669;
      --color-success-light: #d1fae5;
      --color-warning:       #d97706;
      --color-warning-light: #fef3c7;
      --color-warning-text:  #92400e;
      --color-danger:        #dc2626;
      --color-danger-light:  #fee2e2;
      --color-info:          #0891b2;
      --color-info-light:    #e0f7fc;

      /* — 60% Dominant — Neutral (bg, surface) — */
      --color-white:   #ffffff;
      --color-gray-50: #f0f6f9;
      --color-gray-100:#e8f0f6;
      --color-gray-200:#c8d9e6;
      --color-gray-300:#a0b8cc;
      --color-gray-400:#7a9ab0;
      --color-gray-500:#3d5c75;
      --color-gray-600:#2a4a60;
      --color-gray-700:#1c3550;
      --color-gray-800:#0f2d4a;
      --color-gray-900:#071d33;

      /* — Typography — */
      --font-family:      'Sarabun', 'Segoe UI', sans-serif;
      --font-family-mono: 'IBM Plex Mono', 'Courier New', monospace;
      --font-size-xs:     0.75rem;    /* 12px */
      --font-size-sm:     0.875rem;   /* 14px */
      --font-size-base:   1rem;       /* 16px */
      --font-size-lg:     1.125rem;   /* 18px */
      --font-size-xl:     1.25rem;    /* 20px */
      --font-size-2xl:    1.5rem;     /* 24px */
      --font-size-3xl:    1.875rem;   /* 30px */
      --font-size-4xl:    2.25rem;    /* 36px */
      --font-size-5xl:    3rem;       /* 48px */
      --font-weight-normal:  400;
      --font-weight-medium:  500;
      --font-weight-semibold:600;
      --font-weight-bold:    700;
      --line-height-tight:   1.25;
      --line-height-normal:  1.8;
      --line-height-relaxed: 1.75;

      /* — Spacing — */
      --space-1:  0.25rem;   /* 4px */
      --space-2:  0.5rem;    /* 8px */
      --space-3:  0.75rem;   /* 12px */
      --space-4:  1rem;      /* 16px */
      --space-5:  1.25rem;   /* 20px */
      --space-6:  1.5rem;    /* 24px */
      --space-8:  2rem;      /* 32px */
      --space-10: 2.5rem;    /* 40px */
      --space-12: 3rem;      /* 48px */
      --space-16: 4rem;      /* 64px */
      --space-20: 5rem;      /* 80px */
      --space-24: 6rem;      /* 96px */

      /* — Border Radius — */
      --radius-sm:   4px;
      --radius-md:   8px;
      --radius-lg:   12px;
      --radius-xl:   16px;
      --radius-2xl:  24px;
      --radius-full: 9999px;

      /* — Shadows — */
      --shadow-xs:  0 1px 2px rgba(0,0,0,.05);
      --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
      --shadow-md:  0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
      --shadow-lg:  0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);
      --shadow-xl:  0 20px 25px rgba(0,0,0,.1), 0 10px 10px rgba(0,0,0,.04);
      --shadow-2xl: 0 25px 50px rgba(0,0,0,.25);

      /* — Transitions — */
      --transition-fast:   150ms ease;
      --transition-base:   250ms ease;
      --transition-slow:   400ms ease;

      /* — Z-index layers — */
      --z-base:      1;
      --z-dropdown:  100;
      --z-sticky:    200;
      --z-navbar:    300;
      --z-overlay:   400;
      --z-modal:     500;
      --z-toast:     600;
      --z-tooltip:   700;

      /* — Layout — */
      --navbar-height:    64px;
      --container-max:    1280px;
      --content-max:      800px;
      --sidebar-width:    260px;
    }

    /* ============================================================
       ACCESSIBILITY UTILITIES
    ============================================================ */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* Thai body text — line-height สำหรับภาษาไทยที่อ่านง่าย */
    .text-thai-body { line-height: 1.8; }

    /* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; font-size: 16px; }

    body {
      font-family: var(--font-family);
      font-size: var(--font-size-base);
      line-height: var(--line-height-normal);
      color: var(--color-gray-800);
      background: var(--color-gray-50);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button { cursor: pointer; font-family: inherit; border: none; background: none; }
    ul, ol { list-style: none; }
    input, select, textarea { font-family: inherit; }

    /* Engineering notation: clean sub/sup at small sizes */
    sub, sup {
      font-size: 0.72em;
      font-family: var(--font-family-mono);
      line-height: 0;
      position: relative;
      vertical-align: baseline;
    }
    sub { top: 0.4em; }
    sup { top: -0.5em; }

    /* Tabular numbers for all data tables sitewide */
    table { font-variant-numeric: tabular-nums; }

    .container {
      max-width: var(--container-max);
      margin: 0 auto;
      padding: 0 var(--space-6);
    }

    /* ============================================================
       NAVBAR
    ============================================================ */
    .navbar {
      position: sticky;
      top: 0;
      height: var(--navbar-height);
      background: var(--color-white);
      border-bottom: 1px solid var(--color-gray-200);
      box-shadow: var(--shadow-sm);
      z-index: var(--z-navbar);
    }

    .navbar-inner {
      max-width: var(--container-max);
      margin: 0 auto;
      padding: 0 var(--space-6);
      height: 100%;
      display: flex;
      align-items: center;
      gap: var(--space-4);
    }

    /* Logo */
    .navbar-logo {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      font-weight: var(--font-weight-bold);
      font-size: var(--font-size-lg);
      color: var(--color-primary-dark);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .navbar-logo .logo-icon {
      width: 36px; height: 36px;
      border-radius: var(--radius-md);
      display: block;
      object-fit: contain;
    }
    .navbar-logo .logo-text span { color: var(--color-navy); }

    /* Menu Button */
    .navbar-menu-btn {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-2) var(--space-3);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-md);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-medium);
      color: var(--color-gray-700);
      background: var(--color-white);
      transition: background var(--transition-fast), border-color var(--transition-fast);
      position: relative;
    }
    .navbar-menu-btn:hover { background: var(--color-gray-50); border-color: var(--color-gray-300); }
    .navbar-menu-btn.active { background: var(--color-primary-50); border-color: var(--color-primary); color: var(--color-primary); }

    /* Global Search */
    .navbar-search {
      flex: 1;
      max-width: 400px;
      position: relative;
    }
    .navbar-search input {
      width: 100%;
      padding: var(--space-2) var(--space-4) var(--space-2) 2.5rem;
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-full);
      font-size: var(--font-size-sm);
      background: var(--color-gray-50);
      transition: border-color var(--transition-fast), background var(--transition-fast);
      outline: none;
    }
    .navbar-search input:focus {
      background: var(--color-white);
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px var(--color-primary-50);
    }
    .navbar-search .search-icon {
      position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%);
      color: var(--color-gray-400); pointer-events: none;
    }
    /* Mobile search icon — clickable trigger */
    .navbar-search .search-icon-btn {
      display: none;
      width: 36px; height: 36px;
      align-items: center; justify-content: center;
      border-radius: var(--radius-md);
      font-size: 1.1rem;
      color: var(--color-gray-600);
      cursor: pointer;
      transition: background var(--transition-fast);
      flex-shrink: 0;
    }
    .navbar-search .search-icon-btn:hover { background: var(--color-gray-100); }

    /* Search Dropdown Results */
    .search-results {
      position: absolute;
      top: calc(100% + var(--space-2));
      left: 0; right: 0;
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-xl);
      z-index: var(--z-dropdown);
      display: none;
      max-height: 400px;
      overflow-y: auto;
    }
    .search-results.show { display: block; }
    .search-result-item {
      padding: var(--space-3) var(--space-4);
      display: flex; align-items: center; gap: var(--space-3);
      border-bottom: 1px solid var(--color-gray-100);
      cursor: pointer;
      transition: background var(--transition-fast);
    }
    .search-result-item:hover { background: var(--color-gray-50); }
    .search-result-item:last-child { border-bottom: none; }
    .search-result-icon { font-size: 1.2rem; }
    .search-result-text .result-title { font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); }
    .search-result-text .result-category { font-size: var(--font-size-xs); color: var(--color-gray-500); }

    /* Navbar right actions */
    .navbar-actions {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      margin-left: auto;
    }

    /* Notification Bell */
    .btn-notification {
      position: relative;
      width: 40px; height: 40px;
      border-radius: var(--radius-md);
      display: flex; align-items: center; justify-content: center;
      color: var(--color-gray-600);
      font-size: 1.2rem;
      transition: background var(--transition-fast), color var(--transition-fast);
    }
    .btn-notification:hover { background: var(--color-gray-100); color: var(--color-primary); }
    .notification-badge {
      position: absolute; top: 6px; right: 6px;
      background: var(--color-danger);
      color: white;
      font-size: 10px; font-weight: 700;
      width: 16px; height: 16px;
      border-radius: var(--radius-full);
      display: flex; align-items: center; justify-content: center;
      display: none;
    }
    .notification-badge.show { display: flex; }

    /* Login Button / Avatar */
    .btn-login {
      padding: var(--space-2) var(--space-4);
      background: var(--color-primary);
      color: white;
      border-radius: var(--radius-md);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      transition: background var(--transition-fast);
    }
    .btn-login:hover { background: var(--color-primary-dark); }

    .user-avatar-btn {
      display: none;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-1) var(--space-2);
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: background var(--transition-fast);
    }
    .user-avatar-btn:hover { background: var(--color-gray-100); }
    .user-avatar-btn .avatar {
      width: 32px; height: 32px;
      border-radius: var(--radius-full);
      background: linear-gradient(135deg, var(--color-primary), var(--color-navy));
      display: flex; align-items: center; justify-content: center;
      color: white; font-weight: 700; font-size: var(--font-size-sm);
    }
    .user-avatar-btn .user-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }

    /* ============================================================
       DROPDOWN MENU
    ============================================================ */
    .dropdown-overlay {
      position: fixed; inset: 0;
      z-index: calc(var(--z-dropdown) - 1);
      display: none;
    }
    .dropdown-overlay.show { display: block; }

    .main-dropdown {
      position: absolute;
      top: calc(var(--navbar-height) + 6px);
      left: 0;
      width: min(700px, calc(100vw - 16px));
      max-height: calc(92vh - var(--navbar-height));
      overflow-y: auto;
      overflow-x: hidden;
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      box-shadow: 0 8px 40px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.07);
      z-index: var(--z-dropdown);
      padding: var(--space-3);
      display: none;
    }
    .main-dropdown.show { display: block; }

    /* 5-column mega menu */
    .dd-cols-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr 0.85fr 0.85fr 0.75fr;
      align-items: start;
      gap: 0;
    }
    .dd-col-hdr {
      font-size: .65rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--color-gray-400);
      padding: var(--space-3) var(--space-3) var(--space-2);
      white-space: nowrap;
    }
    .dd-col + .dd-col {
      border-left: 1px solid var(--color-gray-100);
    }
    .dd-col { padding: var(--space-1) var(--space-1); }

    /* Item with description text */
    .dd-item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .dd-item-label { font-size: var(--font-size-sm); font-weight: 500; line-height: 1.3; }
    .dd-item-desc  { font-size: .68rem; color: var(--color-gray-400); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .dropdown-item {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-2) var(--space-3);
      border-radius: var(--radius-md);
      font-size: var(--font-size-sm);
      color: var(--color-gray-700);
      cursor: pointer;
      transition: background var(--transition-fast), color var(--transition-fast);
      position: relative;
      min-height: 36px;
    }
    .dropdown-item:hover { background: var(--color-primary-50); color: var(--color-primary); }
    .dropdown-item:hover .dd-item-desc { color: var(--color-primary); opacity: .75; }
    .dropdown-item .item-icon,
    .submenu-item .item-icon { font-size: 1.1rem; width: 22px; text-align: center; flex-shrink: 0; }

    .item-icon img { border-radius: 3px; }
    .dropdown-item .item-arrow { margin-left: auto; font-size: var(--font-size-xs); color: var(--color-gray-400); }
    .dropdown-divider { height: 1px; background: var(--color-gray-100); margin: var(--space-2) var(--space-2); }

    /* Submenu */
    .dropdown-submenu {
      position: relative;
    }
    .submenu-panel {
      position: absolute;
      left: calc(100% + var(--space-2));
      top: 0;
      min-width: 220px;
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-xl);
      padding: var(--space-2);
      display: none;
      z-index: calc(var(--z-dropdown) + 1);
    }
    .dropdown-submenu:hover .submenu-panel { display: block; }
    /* Touch/Mobile: toggle via JS class แทน hover */
    .submenu-panel.submenu-open { display: block !important; }
    @media (max-width: 768px) {
      .dropdown-submenu:hover .submenu-panel { display: none; }
      .submenu-panel.submenu-open {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        box-shadow: none;
        border-radius: 0;
        border-top: 1px solid var(--color-gray-100);
        padding-left: var(--space-6);
      }
    }

    .submenu-item {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-3) var(--space-4);
      min-height: 44px; /* Touch target WCAG 2.5.5 */
      border-radius: var(--radius-md);
      font-size: var(--font-size-sm);
      color: var(--color-gray-700);
      cursor: pointer;
      transition: background var(--transition-fast);
    }
    .submenu-item:hover { background: var(--color-primary-50); color: var(--color-primary); }
    .coming-soon-badge {
      font-size: 10px;
      background: var(--color-gray-200);
      color: var(--color-gray-500);
      padding: 2px 6px;
      border-radius: var(--radius-full);
      margin-left: auto;
    }

    /* User dropdown */
    .user-dropdown {
      position: absolute;
      top: calc(var(--navbar-height) + 4px);
      right: 0;
      min-width: 200px;
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-xl);
      z-index: var(--z-dropdown);
      padding: var(--space-2);
      display: none;
    }
    .user-dropdown.show { display: block; }

    /* ============================================================
       NOTIFICATION PANEL
    ============================================================ */
    .notification-panel {
      position: absolute;
      top: calc(var(--navbar-height) + 4px);
      right: 0;
      width: 360px;
      max-width: calc(100vw - 16px);
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-xl);
      z-index: var(--z-dropdown);
      display: none;
      overflow: hidden;
    }
    .notification-panel.show { display: block; }
    .notif-header {
      padding: var(--space-4);
      border-bottom: 1px solid var(--color-gray-100);
      display: flex; align-items: center; justify-content: space-between;
    }
    .notif-header h3 { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
    .notif-mark-read { font-size: var(--font-size-xs); color: var(--color-primary); cursor: pointer; }
    .notif-list { max-height: 320px; overflow-y: auto; }
    .notif-item {
      padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid var(--color-gray-100);
      display: flex; gap: var(--space-3);
      cursor: pointer;
      transition: background var(--transition-fast);
    }
    .notif-item:hover { background: var(--color-gray-50); }
    .notif-item.unread { background: var(--color-primary-50); }
    .notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; margin-top: 6px; }
    .notif-content .notif-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
    .notif-content .notif-time { font-size: var(--font-size-xs); color: var(--color-gray-500); margin-top: 2px; }
    .notif-empty { padding: var(--space-8); text-align: center; color: var(--color-gray-400); }

    /* ============================================================
       MAIN CONTENT AREA
    ============================================================ */
    .main-content { flex: 1; }

    /* Page sections — toggled by JS router */
    .page { display: none; }
    .page.active { display: block; }

    /* ============================================================
       HOME PAGE
    ============================================================ */
    /* Hero — Full-screen Dark */
    .hero {
      height: 100vh;
      min-height: 600px;
      background: #060d1f;
      color: white;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #hero-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
    }
    .hero-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      pointer-events: none;
      z-index: 0;
    }
    .hero-blob-1 {
      width: 560px; height: 560px;
      background: radial-gradient(circle, rgba(0,121,107,.52) 0%, transparent 70%);
      bottom: -140px; left: -140px;
    }
    .hero-blob-2 {
      width: 320px; height: 320px;
      background: radial-gradient(circle, rgba(21,101,192,.42) 0%, transparent 70%);
      top: 8%; right: 6%;
    }
    .hero-content {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 0 var(--space-6);
    }
    .hero-title {
      font-family: 'Bebas Neue', 'Prompt', sans-serif;
      font-size: clamp(3.5rem, 13vw, 10rem);
      font-weight: 400;
      letter-spacing: 0.04em;
      line-height: 0.9;
      color: #fff;
      text-shadow: 0 0 60px rgba(0,188,162,.4), 0 0 120px rgba(21,101,192,.25);
      margin-bottom: 1.5rem;
    }
    .hero-tagline {
      font-family: 'Sarabun', sans-serif;
      font-size: clamp(1rem, 2.2vw, 1.2rem);
      color: rgba(255,255,255,.72);
      letter-spacing: .06em;
      margin-bottom: 2.8rem;
      line-height: 1.8;
    }
    .hero-tag-en {
      font-size: .78em;
      opacity: .55;
      display: block;
      letter-spacing: .22em;
      text-transform: uppercase;
      margin-top: .3rem;
    }
    .btn-hero-start {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      padding: .85rem 2.4rem;
      background: linear-gradient(135deg, #00796b 0%, #1565c0 100%);
      color: white;
      border-radius: var(--radius-full);
      font-family: 'Sarabun', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      letter-spacing: .1em;
      text-transform: lowercase;
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 28px rgba(0,121,107,.45);
      transition: transform .2s, box-shadow .2s;
    }
    .btn-hero-start:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 36px rgba(0,121,107,.55);
    }
    .btn-hero-start svg { transition: transform .3s; }
    .btn-hero-start:hover svg { transform: translateY(4px); }
    .hero-scroll-hint {
      position: absolute;
      bottom: 1.8rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .4rem;
      color: rgba(255,255,255,.3);
      font-size: .68rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      cursor: pointer;
      z-index: 1;
      font-family: 'Sarabun', sans-serif;
    }
    .hero-scroll-bar {
      width: 1px;
      height: 36px;
      background: linear-gradient(to bottom, rgba(0,200,170,.5), transparent);
      animation: heroScrollBar 1.8s ease-in-out infinite;
      transform-origin: top;
    }
    @keyframes heroScrollBar {
      0%,100% { opacity: 1; transform: scaleY(1); }
      60%      { opacity: 0; transform: scaleY(.2); }
    }

    /* ── Landing Overlay ── */
    #landing-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      overflow: hidden;
      transition: opacity .7s ease, transform .7s ease;
    }
    #landing-overlay.lnd-out {
      opacity: 0;
      transform: scale(1.04);
      pointer-events: none;
    }
    .lnd-sec {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    /* ── Section 1: Hero ── */
    .lnd-sec-hero {
      background: #060d1f;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    #landing-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
    }
    .lnd-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      pointer-events: none;
      z-index: 0;
      animation: lndOrbDrift 9s ease-in-out infinite alternate;
    }
    .lnd-orb-1 {
      width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(0,121,107,.5) 0%, transparent 70%);
      bottom: -150px; left: -180px;
      animation-duration: 9s;
    }
    .lnd-orb-2 {
      width: 360px; height: 360px;
      background: radial-gradient(circle, rgba(21,101,192,.4) 0%, transparent 70%);
      top: 5%; right: 5%;
      animation-duration: 7s;
      animation-delay: -3s;
    }
    .lnd-orb-3 {
      width: 200px; height: 200px;
      background: radial-gradient(circle, rgba(0,188,162,.22) 0%, transparent 70%);
      top: 38%; left: 48%;
      animation-duration: 11s;
      animation-delay: -6s;
    }
    @keyframes lndOrbDrift {
      from { transform: translate(0,0) scale(1); }
      to   { transform: translate(28px,18px) scale(1.08); }
    }
    .lnd-hero-content {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 0 var(--space-6);
    }
    .lnd-eyebrow {
      font-family: 'IBM Plex Mono', monospace;
      font-size: clamp(.58rem, 1.3vw, .75rem);
      letter-spacing: .28em;
      color: rgba(0,188,162,.75);
      text-transform: uppercase;
      margin-bottom: 1.2rem;
      animation: lndFadeUp .8s ease both;
    }
    .lnd-title {
      font-family: 'Bebas Neue', 'Prompt', sans-serif;
      font-size: clamp(4.5rem, 15vw, 11rem);
      font-weight: 400;
      letter-spacing: 0.04em;
      line-height: 0.88;
      color: #fff;
      text-shadow: 0 0 80px rgba(0,188,162,.5), 0 0 160px rgba(21,101,192,.3);
      margin-bottom: 1rem;
      animation: lndFadeUp .8s .15s ease both;
    }
    .lnd-title-pro { color: #00bca2; }
    .lnd-tagline {
      font-family: 'Sarabun', sans-serif;
      font-size: clamp(.95rem, 2vw, 1.2rem);
      color: rgba(255,255,255,.65);
      letter-spacing: .04em;
      margin-bottom: 1.5rem;
      animation: lndFadeUp .8s .3s ease both;
    }
    .lnd-for {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .55rem;
      margin-bottom: 2rem;
      animation: lndFadeUp .8s .42s ease both;
    }
    .lnd-for-label {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.35);
      font-family: 'Sarabun', sans-serif;
    }
    .lnd-for-chips {
      display: flex;
      gap: .5rem;
      flex-wrap: wrap;
      justify-content: center;
    }
    .lnd-for-chip {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .3rem .85rem;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 999px;
      font-size: .78rem;
      font-weight: 500;
      color: rgba(255,255,255,.8);
      font-family: 'Sarabun', sans-serif;
      backdrop-filter: blur(4px);
    }
    .lnd-for-chip svg { opacity: .7; flex-shrink: 0; }
    .lnd-stats {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      margin-bottom: 2.8rem;
      animation: lndFadeUp .8s .45s ease both;
    }
    .lnd-stat { display: flex; flex-direction: column; align-items: center; }
    .lnd-stat-n {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      color: #00bca2;
      line-height: 1;
    }
    .lnd-stat-l {
      font-family: 'Sarabun', sans-serif;
      font-size: .75rem;
      color: rgba(255,255,255,.5);
      letter-spacing: .08em;
      margin-top: .2rem;
    }
    .lnd-stat-div {
      width: 1px; height: 40px;
      background: rgba(255,255,255,.15);
    }
    .lnd-scroll-hint {
      position: absolute;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .5rem;
      animation: lndFadeIn 1s 1.2s ease both;
    }
    .lnd-scroll-mouse {
      width: 24px; height: 38px;
      border: 2px solid rgba(255,255,255,.3);
      border-radius: 12px;
      display: flex;
      justify-content: center;
      padding-top: 6px;
    }
    .lnd-scroll-dot {
      width: 4px; height: 8px;
      background: rgba(255,255,255,.6);
      border-radius: 2px;
      animation: lndScrollDot 1.6s ease-in-out infinite;
    }
    .lnd-scroll-text {
      font-family: 'IBM Plex Mono', monospace;
      font-size: .6rem;
      letter-spacing: .2em;
      color: rgba(255,255,255,.3);
    }
    @keyframes lndScrollDot {
      0%   { transform: translateY(0); opacity: 1; }
      80%  { transform: translateY(14px); opacity: 0; }
      100% { transform: translateY(0); opacity: 0; }
    }
    @keyframes lndFadeUp {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes lndFadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    .lnd-enter-btn {
      display: inline-flex;
      align-items: center;
      gap: .65rem;
      background: linear-gradient(90deg, #00bca2 0%, #0277bd 100%);
      color: #fff;
      font-family: 'Sarabun', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: .08em;
      border: none;
      border-radius: 50px;
      padding: .9rem 2.5rem;
      cursor: pointer;
      box-shadow: 0 0 30px rgba(0,188,162,.35), 0 4px 20px rgba(0,0,0,.45);
      animation: lndFadeUp .8s .65s ease both, lndPulseBtn 2.8s 1.5s ease-in-out infinite;
      transition: transform .2s, box-shadow .2s;
    }
    .lnd-enter-btn:hover {
      transform: translateY(-2px) scale(1.04);
      box-shadow: 0 0 55px rgba(0,188,162,.6), 0 8px 28px rgba(0,0,0,.5);
    }
    @keyframes lndPulseBtn {
      0%,100% { box-shadow: 0 0 30px rgba(0,188,162,.35), 0 4px 20px rgba(0,0,0,.45); }
      50%      { box-shadow: 0 0 60px rgba(0,188,162,.65), 0 8px 28px rgba(0,0,0,.5); }
    }

    /* ── HOME HERO ── */
    .home-hero {
      position: relative;
      background: linear-gradient(135deg, #0d47a1 0%, #1565c0 52%, #00695c 100%);
      overflow: hidden;
    }
    .home-hero::before {
      content: '';
      position: absolute;
      top: -80px; right: -80px;
      width: 340px; height: 340px;
      background: rgba(255,255,255,.04);
      border-radius: 50%;
      pointer-events: none;
    }
    .home-hero::after {
      content: '';
      position: absolute;
      bottom: 30px; left: -60px;
      width: 200px; height: 200px;
      background: rgba(255,255,255,.03);
      border-radius: 50%;
      pointer-events: none;
    }
    .hero-inner {
      position: relative;
      padding: 2.75rem var(--space-4) 2rem;
    }
    .hero-eyebrow {
      display: inline-block;
      font-size: .72rem;
      font-weight: 600;
      color: rgba(255,255,255,.65);
      letter-spacing: .05em;
      margin-bottom: .7rem;
    }
    .hero-headline {
      font-size: 2rem;
      font-weight: 800;
      color: #fff;
      line-height: 1.2;
      margin: 0 0 .75rem;
    }
    .hero-sub {
      font-size: .9rem;
      color: rgba(255,255,255,.75);
      margin: 0 0 1.6rem;
      line-height: 1.65;
    }
    .hero-ctas {
      display: flex;
      gap: .75rem;
      flex-wrap: wrap;
    }
    .btn-hero-primary {
      padding: .7rem 1.75rem;
      background: #fff;
      color: var(--color-primary, #1565c0);
      border: none;
      border-radius: var(--radius-md);
      font-size: .95rem;
      font-weight: 800;
      cursor: pointer;
      font-family: inherit;
      box-shadow: 0 2px 12px rgba(0,0,0,.2);
      transition: transform .15s, box-shadow .15s;
    }
    .btn-hero-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0,0,0,.28);
    }
    .btn-hero-secondary {
      padding: .7rem 1.5rem;
      background: rgba(255,255,255,.12);
      color: #fff;
      border: 1.5px solid rgba(255,255,255,.35);
      border-radius: var(--radius-md);
      font-size: .9rem;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: background .15s;
    }
    .btn-hero-secondary:hover { background: rgba(255,255,255,.22); }
    /* Metric strip */
    .hero-metrics {
      background: rgba(0,0,0,.22);
      border-top: 1px solid rgba(255,255,255,.1);
    }
    .hero-metrics-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: .85rem var(--space-4);
    }
    .hero-metric {
      text-align: center;
      padding: 0 2rem;
    }
    .metric-num {
      display: block;
      font-size: 1.6rem;
      font-weight: 900;
      color: #fff;
      line-height: 1;
    }
    .metric-label {
      display: block;
      font-size: .7rem;
      color: rgba(255,255,255,.6);
      margin-top: .2rem;
      white-space: nowrap;
    }
    .hero-metric-divider {
      width: 1px;
      height: 2.5rem;
      background: rgba(255,255,255,.2);
      flex-shrink: 0;
    }

    /* Feature Cards */
    .features-section {
      padding: var(--space-16) 0 var(--space-8);
    }
    .section-header {
      text-align: center;
      margin-bottom: var(--space-12);
    }
    .section-header .section-tag {
      display: inline-block;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      color: var(--color-primary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: var(--space-3);
    }
    .section-header h2 {
      font-size: var(--font-size-3xl);
      font-weight: var(--font-weight-bold);
      margin-bottom: var(--space-4);
      background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-primary) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .section-header p {
      font-size: var(--font-size-lg);
      color: var(--color-gray-500);
      max-width: 560px;
      margin: 0 auto;
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: var(--space-6);
    }
    .feature-card {
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-2xl);
      padding: var(--space-8);
      cursor: pointer;
      transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.28s ease, border-color 0.2s ease;
    }
    .feature-card:hover {
      transform: translateY(-6px) scale(1.01);
      box-shadow: var(--shadow-lg);
      border-color: var(--color-primary-100);
    }
    .feature-card .card-icon {
      width: 56px; height: 56px;
      border-radius: var(--radius-lg);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.75rem;
      margin-bottom: var(--space-5);
    }
    .feature-card h3 {
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-semibold);
      margin-bottom: var(--space-3);
    }
    .feature-card p {
      font-size: var(--font-size-sm);
      color: var(--color-gray-500);
      line-height: var(--line-height-relaxed);
      margin-bottom: var(--space-5);
    }
    .feature-card .card-tags {
      display: flex; flex-wrap: wrap; gap: var(--space-2);
    }
    .tag {
      font-size: var(--font-size-xs);
      padding: 2px var(--space-3);
      border-radius: var(--radius-full);
      font-weight: var(--font-weight-medium);
    }
    .tag-blue   { background: var(--color-primary-50); color: var(--color-primary); }
    .tag-teal   { background: var(--color-navy-light); color: var(--color-navy); }
    .tag-green  { background: var(--color-success-light); color: var(--color-success); }
    .tag-orange { background: var(--color-warning-light); color: var(--color-warning); }
    .tag-gray   { background: var(--color-gray-100); color: var(--color-gray-600); }

    /* Icon color themes — gradient */
    .icon-blue   { background: linear-gradient(135deg, #bbdefb 0%, #e3f2fd 100%); box-shadow: 0 4px 12px rgba(21,101,192,0.20); }
    .icon-teal   { background: linear-gradient(135deg, #b2dfdb 0%, #e0f2f1 100%); box-shadow: 0 4px 12px rgba(0,121,107,0.20); }
    .icon-green  { background: linear-gradient(135deg, #c8e6c9 0%, #e8f5e9 100%); box-shadow: 0 4px 12px rgba(46,125,50,0.20); }
    .icon-orange { background: linear-gradient(135deg, #ffe0b2 0%, #fff3e0 100%); box-shadow: 0 4px 12px rgba(180,83,9,0.20); }
    .icon-purple { background: linear-gradient(135deg, #d1c4e9 0%, #ede7f6 100%); box-shadow: 0 4px 12px rgba(124,58,237,0.20); }

    /* ── G+D: Showcase Section ── */
    .showcase-section {
      padding: var(--space-8) 0 var(--space-16);
      background: linear-gradient(180deg, #f0f9ff 0%, var(--color-white) 100%);
    }

    /* — G: Treatment Journey Animation — */
    .treatment-journey {
      background: #fff;
      border-radius: var(--radius-2xl);
      padding: var(--space-8) var(--space-6) var(--space-6);
      box-shadow: var(--shadow-md);
      overflow: hidden;
      margin-bottom: var(--space-8);
    }
    .tj-title {
      text-align: center;
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-semibold);
      color: var(--color-gray-700);
      margin-bottom: var(--space-6);
    }
    .tj-flow {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      overflow-x: auto;
      padding: var(--space-2) 0 var(--space-4);
      gap: 0;
    }
    .tj-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-2);
      min-width: 80px;
    }
    .tj-tank {
      width: 72px; height: 72px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      position: relative;
      overflow: hidden;
    }
    .tj-tank-img { background: none; border: none; padding: 0; }
    .tj-tank-img img { width: 72px; height: 72px; object-fit: cover; border-radius: 14px; display: block; }
    .tj-label {
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--color-gray-500);
      text-align: center;
      line-height: 1.4;
    }
    .tj-arrow {
      flex-shrink: 0;
      width: 36px; height: 2px;
      background: linear-gradient(90deg, var(--color-primary-100), var(--color-primary));
      position: relative;
      margin-top: 36px;
    }
    .tj-arrow::after {
      content: '';
      position: absolute;
      right: -1px; top: -4px;
      border: 5px solid transparent;
      border-left-color: var(--color-primary);
    }
    .tj-pipe-dot {
      position: absolute;
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--color-primary);
      top: 50%; left: 0;
      transform: translateY(-50%);
      animation: tjPipeDot 1.4s linear infinite;
    }

    /* Tank color themes */
    .tj-source  .tj-tank { background: #efebe922; border: 2px solid #a1887f55; }
    .tj-screen  .tj-tank { background: #eceff122; border: 2px solid #90a4ae66; }
    .tj-aerate  .tj-tank { background: #e3f2fd44; border: 2px solid #42a5f566; }
    .tj-clarify .tj-tank { background: #e8eaf644; border: 2px solid #5c6bc066; }
    .tj-output  .tj-tank { background: #e8f5e944; border: 2px solid #66bb6a66; }

    /* Water wave */
    .tj-wave {
      position: absolute;
      bottom: 0; left: 0; right: 0; height: 38%;
      border-radius: 0 0 12px 12px;
      animation: tjWave 2s ease-in-out infinite alternate;
    }
    .tj-source .tj-wave { background: linear-gradient(180deg, #a1887f88, #6d4c4199); }
    .tj-output .tj-wave { background: linear-gradient(180deg, #4fc3f799, #0288d1aa); }

    /* Bubbles */
    .tj-bubbles { position: absolute; inset: 0; pointer-events: none; }
    .tj-bubble {
      position: absolute;
      bottom: 4px;
      width: 6px; height: 6px;
      background: #90caf9cc;
      border-radius: 50%;
      animation: tjBubble 1.6s ease-in infinite;
    }
    .tj-bubble:nth-child(1) { left: 18%; animation-delay: 0s;    animation-duration: 1.5s; }
    .tj-bubble:nth-child(2) { left: 48%; animation-delay: 0.55s; animation-duration: 1.9s; width: 4px; height: 4px; }
    .tj-bubble:nth-child(3) { left: 72%; animation-delay: 1.0s;  animation-duration: 1.4s; }

    /* Fish + sparkle */
    .tj-fish {
      position: absolute;
      bottom: 8px; left: 5px;
      font-size: 1rem;
      animation: tjFish 3.2s ease-in-out infinite alternate;
    }
    .tj-sparkle {
      position: absolute;
      top: 5px; right: 7px;
      font-size: 0.7rem;
      animation: tjSparkle 1.8s ease-in-out infinite;
    }

    /* Keyframes */
    @keyframes tjWave {
      0%   { height: 36%; transform: scaleX(1); }
      100% { height: 44%; transform: scaleX(1.05); }
    }
    @keyframes tjBubble {
      0%   { transform: translateY(0)     scale(1);   opacity: .8; }
      85%  { transform: translateY(-46px) scale(1.3); opacity: .25; }
      100% { transform: translateY(-54px) scale(1.4); opacity: 0; }
    }
    @keyframes tjFish {
      0%   { transform: translateX(2px)  scaleX(1);  }
      100% { transform: translateX(-10px) scaleX(-1); }
    }
    @keyframes tjSparkle {
      0%, 100% { opacity: 1;   transform: scale(1);    }
      50%       { opacity: .25; transform: scale(0.7);  }
    }
    @keyframes tjPipeDot {
      0%   { left: 0%;   opacity: 1; }
      88%  { left: 90%;  opacity: 1; }
      100% { left: 100%; opacity: 0; }
    }

    /* — D: Standards Table — */
    .standards-wrap {
      background: #fff;
      border-radius: var(--radius-2xl);
      padding: var(--space-8) var(--space-6);
      box-shadow: var(--shadow-md);
    }
    .std-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: var(--space-3);
      margin-bottom: var(--space-5);
    }
    .std-header h3 {
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-bold);
      color: var(--color-gray-900);
      margin: 0;
    }
    .std-ref {
      font-size: var(--font-size-xs);
      color: var(--color-gray-400);
    }
    .std-tabs {
      display: flex;
      gap: 0;
      margin-bottom: var(--space-6);
      border-bottom: 2px solid var(--color-gray-200);
      flex-wrap: wrap;
    }
    .std-tab {
      padding: var(--space-2) var(--space-5);
      border: none;
      background: none;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-medium);
      color: var(--color-gray-500);
      cursor: pointer;
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      transition: all .2s;
      font-family: inherit;
    }
    .std-tab.active {
      color: var(--color-primary);
      border-bottom-color: var(--color-primary);
    }
    .std-tab:hover:not(.active) { color: var(--color-gray-700); }
    .std-panel { display: none; }
    .std-panel.active { display: block; }
    .std-table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--font-size-sm);
    }
    .std-table th {
      text-align: left;
      padding: var(--space-3) var(--space-4);
      background: var(--color-primary-50);
      color: var(--color-primary-dark);
      font-weight: var(--font-weight-semibold);
      border-bottom: 2px solid var(--color-primary-100);
    }
    .std-table th:not(:first-child) { text-align: center; }
    .std-table td {
      padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid var(--color-gray-100);
      color: var(--color-gray-700);
    }
    .std-table td:not(:first-child) { text-align: center; }
    .std-table tr:last-child td { border-bottom: none; }
    .std-table tr:hover td { background: var(--color-gray-50); }
    .std-table-wrap { overflow-x: auto; }
    .std-table th:first-child,
    .std-table td:first-child { position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: 1px 0 0 var(--color-gray-100); }
    .std-table thead th:first-child { background: var(--color-primary-50, #e3f2fd); z-index: 3; }
    .std-table tr.std-group td:first-child { background: var(--color-primary-50, #e3f2fd); }
    .std-table tr:hover td:first-child { background: var(--color-gray-50); }
    .std-val { color: #1b5e20; font-weight: 700; }
    .std-table tr.std-group td {
      background: var(--color-primary-50, #e3f2fd);
      color: var(--color-primary, #1565c0);
      font-weight: 700;
      font-size: var(--font-size-xs);
      letter-spacing: 0.04em;
      padding: var(--space-2) var(--space-4);
      border-bottom: none;
    }
    .std-table tr.std-group:hover td { background: var(--color-primary-50, #e3f2fd); }
    .std-note {
      margin-top: var(--space-4);
      font-size: var(--font-size-xs);
      color: var(--color-gray-400);
      line-height: 1.6;
    }
    .std-na { color: #cbd5e1; font-style: italic; }
    .std-compare-strict  { color: #c62828; font-weight: 600; font-size: var(--font-size-xs); }
    .std-compare-lenient { color: #1b5e20; font-weight: 600; font-size: var(--font-size-xs); }
    .std-section-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-6) 0 var(--space-3); }
    .std-section-divider::before, .std-section-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-gray-200); }
    .std-section-divider span { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-primary); white-space: nowrap; padding: var(--space-1) var(--space-3); background: var(--color-primary-50,#e3f2fd); border-radius: var(--radius-full); }
    .std-ieat-note { font-size: var(--font-size-xs); color: var(--color-gray-600); background: #fff8e1; border-left: 3px solid #f59e0b; padding: var(--space-2) var(--space-3); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: var(--space-3); line-height: 1.6; }
    .std-bld-ref { margin-top: var(--space-4); border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); }
    .std-bld-ref summary { font-size: var(--font-size-sm); color: var(--color-primary); cursor: pointer; padding: var(--space-2) var(--space-4); user-select: none; }
    .std-bld-ref summary::marker { color: var(--color-primary); }
    .std-bld-ref-body { padding: 0 var(--space-4) var(--space-4); }
    .std-bld-type { margin-bottom: var(--space-3); }
    .std-bld-type h5 { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-1); }
    .std-bld-type ul { list-style: disc; padding-left: var(--space-5); margin: 0; }
    .std-bld-type li { font-size: var(--font-size-xs); color: var(--color-gray-600); line-height: 1.7; }

    /* — Process Toggle Buttons — */
    .tj-toggle-group {
      display: flex;
      justify-content: center;
      gap: var(--space-2);
      margin-bottom: var(--space-5);
      flex-wrap: wrap;
    }
    .tj-toggle-btn {
      padding: var(--space-1) var(--space-5);
      border: 2px solid var(--color-gray-200);
      border-radius: 999px;
      background: var(--color-gray-50);
      font-size: var(--font-size-xs);
      font-weight: 600;
      color: var(--color-gray-600);
      cursor: pointer;
      transition: all .2s;
      font-family: inherit;
    }
    .tj-toggle-btn.active {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: #fff;
    }
    .tj-toggle-btn:hover:not(.active) {
      border-color: var(--color-primary);
      color: var(--color-primary);
    }

    /* — Node Tooltip (JS-positioned, fixed) — */
    .tj-global-tip {
      display: none;
      position: fixed;
      background: #1e293b;
      color: #fff;
      border-radius: 12px;
      padding: 12px 16px;
      font-size: .75rem;
      line-height: 1.75;
      z-index: 9500;
      max-width: 230px;
      box-shadow: 0 8px 28px rgba(0,0,0,.3);
      pointer-events: none;
      transform: translate(-50%, calc(-100% - 12px));
    }
    .tj-global-tip::after {
      content: '';
      position: absolute;
      top: 100%; left: 50%;
      transform: translateX(-50%);
      border: 7px solid transparent;
      border-top-color: #1e293b;
    }
    .tj-global-tip strong {
      display: block;
      margin-bottom: 5px;
      font-size: .82rem;
      color: #90caf9;
      border-bottom: 1px solid rgba(255,255,255,.15);
      padding-bottom: 5px;
    }
    .tj-node { cursor: pointer; }
    .tj-tank { transition: transform .2s; }
    .tj-node:hover .tj-tank { transform: scale(1.09); }

    /* — Quick Check — */
    .std-quickcheck {
      margin-top: var(--space-6);
      padding-top: var(--space-6);
      border-top: 2px solid var(--color-gray-100);
    }
    .std-quickcheck h4 {
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-semibold);
      color: var(--color-gray-800);
      margin-bottom: var(--space-4);
    }
    .qc-inputs {
      display: flex;
      gap: var(--space-3);
      flex-wrap: wrap;
      align-items: flex-end;
      margin-bottom: var(--space-4);
    }
    .qc-field { display: flex; flex-direction: column; gap: var(--space-1); }
    .qc-field label {
      font-size: var(--font-size-xs);
      font-weight: 600;
      color: var(--color-gray-600);
    }
    .qc-field input {
      width: 110px;
      padding: var(--space-2) var(--space-3);
      border: 2px solid var(--color-gray-200);
      border-radius: var(--radius-lg);
      font-size: var(--font-size-sm);
      font-family: inherit;
      outline: none;
      transition: border-color .2s;
    }
    .qc-field input:focus { border-color: var(--color-primary); }
    .qc-btn {
      padding: var(--space-2) var(--space-5);
      background: var(--color-primary);
      color: #fff;
      border: none;
      border-radius: var(--radius-lg);
      font-size: var(--font-size-sm);
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: background .2s;
    }
    .qc-btn:hover { background: var(--color-primary-dark); }
    .qc-results { display: flex; flex-direction: column; gap: var(--space-2); }
    .qc-row {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-2) var(--space-4);
      border-radius: var(--radius-lg);
      font-size: var(--font-size-sm);
    }
    .qc-row.pass { background: #e8f5e9; }
    .qc-row.fail { background: #ffebee; }
    .qc-row.warn { background: #fff8e1; }
    .qc-icon { font-size: 1.1rem; flex-shrink: 0; }
    .qc-param { flex: 1; font-weight: 600; }
    .qc-detail { color: var(--color-gray-500); font-size: var(--font-size-xs); }
    .qc-row.pass .qc-param { color: #2e7d32; }
    .qc-row.fail .qc-param { color: #c62828; }
    .qc-row.warn .qc-param { color: #d97706; }

    /* — Recent Activity — */
    .recent-activity-section {
      padding: var(--space-8) 0 var(--space-12);
      background: var(--color-gray-50);
      border-top: 1px solid var(--color-gray-100);
    }
    .ra-header {
      text-align: center;
      margin-bottom: var(--space-6);
    }
    .ra-header .section-tag {
      display: inline-block;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      color: var(--color-primary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: var(--space-2);
    }
    .ra-header h2 {
      font-size: var(--font-size-2xl);
      font-weight: var(--font-weight-bold);
      color: var(--color-gray-800);
    }
    .ra-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: var(--space-4);
      max-width: 880px;
      margin: 0 auto;
    }
    .ra-card {
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      padding: var(--space-5);
      display: flex;
      align-items: flex-start;
      gap: var(--space-4);
      cursor: pointer;
      transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
    }
    .ra-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: var(--color-primary-100);
    }
    .ra-icon {
      font-size: 1.4rem;
      flex-shrink: 0;
      width: 42px; height: 42px;
      display: flex; align-items: center; justify-content: center;
      background: var(--color-gray-100);
      border-radius: var(--radius-lg);
    }
    .ra-body { flex: 1; min-width: 0; }
    .ra-type {
      font-size: var(--font-size-xs);
      color: var(--color-gray-400);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 2px;
    }
    .ra-label {
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      color: var(--color-gray-800);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ra-detail {
      font-size: var(--font-size-xs);
      color: var(--color-gray-500);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ra-time {
      font-size: var(--font-size-xs);
      color: var(--color-gray-400);
      margin-top: var(--space-1);
    }

    /* — Personalized Quick Links (UX-B1) — */
    #homePersonalDash {
      padding: var(--space-8) 0;
      background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
      border-top: 1px solid var(--color-gray-100);
    }
    .hpd-wrap { max-width: 960px; margin: 0 auto; }
    .hpd-header { text-align: center; margin-bottom: var(--space-6); }
    .hpd-header .section-tag {
      display: inline-block;
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-semibold);
      color: var(--color-primary);
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: var(--space-2);
    }
    .hpd-header h2 {
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-bold);
      color: var(--color-gray-900);
      margin: 0;
    }
    .hpd-links {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: var(--space-4);
    }
    .hpd-link {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-5) var(--space-4);
      background: #fff;
      border: 1.5px solid var(--color-gray-100);
      border-radius: var(--radius-xl);
      cursor: pointer;
      text-align: center;
      transition: border-color .18s, box-shadow .18s, transform .15s;
      box-shadow: 0 1px 3px rgba(0,0,0,.06);
    }
    .hpd-link:hover {
      border-color: var(--color-primary);
      box-shadow: 0 4px 14px rgba(21,101,192,.14);
      transform: translateY(-2px);
    }
    .hpd-icon { font-size: 2rem; }
    .hpd-link strong { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-gray-900); }
    .hpd-link small  { font-size: var(--font-size-xs); color: var(--color-gray-500); }

    /* ── Zeigarnik: Pending work card ── */
    .hpd-pending {
      margin: var(--space-4) auto var(--space-2);
      max-width: 960px;
    }
    .hpd-pending-card {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      background: linear-gradient(135deg, #fff8e1, #fff3e0);
      border: 1.5px solid #ffe082;
      border-left: 4px solid #f59e0b;
      border-radius: var(--radius-lg);
      padding: var(--space-4) var(--space-5);
      flex-wrap: wrap;
    }
    .hpd-pending-icon { font-size: 1.5rem; flex-shrink: 0; }
    .hpd-pending-text { flex: 1; min-width: 0; }
    .hpd-pending-title {
      font-size: .8rem;
      font-weight: 700;
      color: #78350f;
      margin: 0 0 .15rem;
    }
    .hpd-pending-sub {
      font-size: .78rem;
      color: #92400e;
      margin: 0;
    }
    .hpd-pending-actions { display: flex; gap: .5rem; flex-shrink: 0; }
    .btn-pending-resume {
      padding: .4rem 1rem;
      background: #f59e0b;
      color: #fff;
      border: none;
      border-radius: 999px;
      font-size: .8rem;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      transition: background .15s;
    }
    .btn-pending-resume:hover { background: #d97706; }
    .btn-pending-dismiss {
      padding: .4rem .85rem;
      background: transparent;
      color: #92400e;
      border: 1.5px solid #f59e0b;
      border-radius: 999px;
      font-size: .78rem;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
    }

    /* ── Micro-interaction: Bookmark bounce ── */
    @keyframes bm-bounce {
      0%   { transform: scale(1);    }
      35%  { transform: scale(1.45); }
      60%  { transform: scale(.85);  }
      80%  { transform: scale(1.15); }
      100% { transform: scale(1);    }
    }
    .bm-bounce { animation: bm-bounce .42s cubic-bezier(.36,.07,.19,.97) both; }

    /* — Glossary Page — */
    .gls-page { min-height: 100vh; background: var(--color-gray-50); }
    .gls-hero {
      background: linear-gradient(135deg, #1e40af 0%, #0e7490 100%);
      padding: var(--space-12) 0 var(--space-8);
      color: #fff;
      text-align: center;
    }
    .gls-hero h1 { font-size: var(--font-size-3xl); font-weight: 800; margin-bottom: var(--space-2); }
    .gls-hero p { font-size: var(--font-size-lg); opacity: .8; margin-bottom: var(--space-6); }
    .gls-search-wrap {
      display: flex; align-items: center; gap: var(--space-3);
      background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius-full);
      padding: var(--space-3) var(--space-5); max-width: 480px; margin: 0 auto;
    }
    .gls-search-wrap input {
      background: none; border: none; outline: none; flex: 1;
      font-size: var(--font-size-base); color: var(--color-gray-900); font-family: inherit;
    }
    .gls-search-wrap input::placeholder { color: rgba(0,0,0,.4); }
    .gls-filter-row {
      display: flex; gap: var(--space-2); flex-wrap: wrap;
      padding: var(--space-5) 0 var(--space-3);
    }
    .gls-chip {
      padding: var(--space-1) var(--space-4); border-radius: var(--radius-full);
      border: 1.5px solid var(--color-gray-300); background: var(--color-white);
      font-size: var(--font-size-sm); cursor: pointer; font-family: inherit;
      color: var(--color-gray-600); transition: all .15s;
    }
    .gls-chip:hover, .gls-chip.active {
      background: var(--color-primary); color: #fff; border-color: var(--color-primary);
    }
    .gls-count { font-size: var(--font-size-xs); color: var(--color-gray-400); margin-bottom: var(--space-4); }

    /* — Glossary Table — */
    .gls-table-wrap { overflow-x: auto; margin-bottom: var(--space-12); }
    .gls-table {
      width: 100%; border-collapse: collapse;
      font-size: var(--font-size-sm); background: var(--color-white);
      border-radius: var(--radius-xl); overflow: hidden;
      box-shadow: 0 1px 4px rgba(0,0,0,.07);
    }
    .gls-table thead th {
      background: var(--color-primary); color: #fff;
      padding: var(--space-3) var(--space-4); text-align: left;
      font-size: var(--font-size-xs); font-weight: 700;
      text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
    }
    .gls-table thead th:first-child { border-radius: var(--radius-xl) 0 0 0; }
    .gls-table thead th:last-child  { border-radius: 0 var(--radius-xl) 0 0; }
    .gls-table tbody tr { border-bottom: 1px solid var(--color-gray-100); }
    .gls-table tbody tr:last-child { border-bottom: none; }
    .gls-table tbody tr:hover { background: var(--color-primary-50); }
    .gls-table td { padding: var(--space-3) var(--space-4); vertical-align: top; }

    /* category group row */
    .gls-table .gls-group-row td {
      background: var(--color-gray-100); padding: var(--space-2) var(--space-4);
      font-weight: 700; font-size: var(--font-size-xs); color: var(--color-gray-700);
      text-transform: uppercase; letter-spacing: .04em;
    }
    .gls-table .gls-group-row td span {
      font-weight: 400; color: var(--color-gray-400); margin-left: var(--space-2); text-transform: none;
    }

    /* cell styles */
    .gls-abbr {
      display: inline-block;
      background: var(--color-primary); color: #fff; font-size: .7rem;
      font-weight: 800; padding: .15rem .55rem; border-radius: var(--radius-md);
      white-space: nowrap; font-family: monospace; letter-spacing: .02em;
    }
    .gls-td-name .gls-en { font-weight: 700; color: var(--color-gray-900); line-height: 1.3; }
    .gls-td-name .gls-th { color: var(--color-gray-500); font-size: .8rem; margin-top: 2px; }
    .gls-unit-badge {
      font-size: .7rem; color: var(--color-gray-500);
      background: var(--color-gray-100); padding: .1rem .45rem;
      border-radius: var(--radius-md); font-family: monospace; white-space: nowrap;
    }
    .gls-def-th { color: var(--color-gray-800); line-height: 1.6; margin-bottom: var(--space-1); }
    .gls-def-en { color: var(--color-gray-500); font-size: .78rem; line-height: 1.5; }
    .gls-ref    { font-size: .72rem; color: var(--color-gray-400); font-style: italic; margin-top: var(--space-1); }

    .gls-empty  { text-align: center; color: var(--color-gray-400); padding: var(--space-16); font-size: var(--font-size-base); }

    /* ============================================================
       GENERIC PAGE (Placeholder)
    ============================================================ */
    .page-placeholder {
      padding: var(--space-20) 0;
      text-align: center;
    }
    .placeholder-icon { font-size: 4rem; margin-bottom: var(--space-6); }
    .page-placeholder h1 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-4); color: var(--color-gray-900); }
    .page-placeholder p { font-size: var(--font-size-lg); color: var(--color-gray-500); margin-bottom: var(--space-8); }

    /* ============================================================
       FOOTER
    ============================================================ */
    .footer {
      background: var(--color-gray-900);
      color: var(--color-gray-300);
      padding: var(--space-6) 0 var(--space-4);
      margin-top: auto;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: var(--space-8);
      margin-bottom: var(--space-5);
    }
    .footer-brand .brand-logo {
      display: flex; align-items: center; gap: var(--space-2);
      font-size: var(--font-size-base); font-weight: var(--font-weight-bold);
      color: white; margin-bottom: var(--space-2);
    }
    .footer-brand p { font-size: var(--font-size-xs); line-height: var(--line-height-relaxed); color: var(--color-gray-400); }
    .footer-col h4 { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: white; margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: 0.05em; }
    .footer-col a {
      display: block;
      font-size: var(--font-size-xs);
      color: var(--color-gray-400);
      padding: 2px 0;
      transition: color var(--transition-fast);
      cursor: pointer;
    }
    .footer-col a:hover { color: white; }
    .footer-bottom {
      border-top: 1px solid var(--color-gray-800);
      padding-top: var(--space-4);
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: var(--space-4);
    }
    .footer-bottom p { font-size: var(--font-size-xs); color: var(--color-gray-500); }
    .footer-bottom-links { display: flex; gap: var(--space-4); }
    .footer-bottom-links a { font-size: var(--font-size-xs); color: var(--color-gray-500); cursor: pointer; }
    .footer-bottom-links a:hover { color: white; }

    /* ============================================================
       COOKIE CONSENT BANNER
    ============================================================ */
    .cookie-banner {
      position: fixed;
      bottom: var(--space-6);
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - var(--space-12));
      max-width: 800px;
      background: var(--color-gray-900);
      color: white;
      padding: var(--space-5) var(--space-6);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-2xl);
      z-index: var(--z-toast);
      display: flex;
      align-items: center;
      gap: var(--space-6);
      flex-wrap: wrap;
    }
    .cookie-banner.hidden { display: none; }
    .cookie-text { flex: 1; min-width: 200px; }
    .cookie-text p { font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); color: var(--color-gray-300); }
    .cookie-text a { color: var(--color-primary-100); text-decoration: underline; cursor: pointer; }
    .cookie-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
    .btn-cookie-reject {
      padding: var(--space-2) var(--space-4);
      border: 1px solid var(--color-gray-600);
      color: var(--color-gray-300);
      border-radius: var(--radius-md);
      font-size: var(--font-size-sm);
      transition: all var(--transition-fast);
    }
    .btn-cookie-reject:hover { border-color: white; color: white; }
    .btn-cookie-essential {
      padding: var(--space-2) var(--space-4);
      border: 1px solid var(--color-gray-400);
      color: white;
      border-radius: var(--radius-md);
      font-size: var(--font-size-sm);
      transition: all var(--transition-fast);
    }
    .btn-cookie-essential:hover { background: rgba(255,255,255,0.1); }
    .btn-cookie-accept {
      padding: var(--space-2) var(--space-4);
      background: var(--color-primary);
      color: white;
      border-radius: var(--radius-md);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      transition: background var(--transition-fast);
    }
    .btn-cookie-accept:hover { background: var(--color-primary-light); }

    /* ============================================================
       ERROR PAGES
    ============================================================ */
    .error-page {
      min-height: calc(100vh - var(--navbar-height));
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: var(--space-12);
    }
    .error-content { max-width: 480px; }
    .error-code {
      font-size: 6rem;
      font-weight: 900;
      line-height: 1;
      background: linear-gradient(135deg, var(--color-primary), var(--color-navy));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: var(--space-4);
    }
    .error-title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-gray-900); margin-bottom: var(--space-4); }
    .error-msg { font-size: var(--font-size-base); color: var(--color-gray-500); margin-bottom: var(--space-8); line-height: var(--line-height-relaxed); }
    .error-actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

    /* ============================================================
       LOADING SKELETON
    ============================================================ */
    @keyframes ww-shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .skeleton {
      background: linear-gradient(90deg, #ebebeb 25%, #d6d6d6 50%, #ebebeb 75%);
      background-size: 400% 100%;
      border-radius: var(--radius-md);
      animation: ww-shimmer 1.4s ease-in-out infinite;
    }
    .skeleton-text { height: 1em; margin-bottom: var(--space-3); }
    .skeleton-text.w-75 { width: 75%; }
    .skeleton-text.w-50 { width: 50%; }

    .loading-skeleton-page {
      padding: var(--space-8) 0;
      display: none;
    }
    .loading-skeleton-page.active { display: block; }
    .skeleton-card {
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      padding: var(--space-6);
    }
    .skeleton-img { height: 200px; margin-bottom: var(--space-4); }
    .skeleton-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: var(--space-6);
    }

    /* Offline State */
    .offline-banner {
      position: fixed;
      top: var(--navbar-height);
      left: 0; right: 0;
      background: var(--color-warning);
      color: white;
      padding: var(--space-3) var(--space-6);
      text-align: center;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-medium);
      z-index: var(--z-sticky);
      display: none;
    }
    .offline-banner.show { display: block; }

    /* ============================================================
       ONBOARDING TOUR
    ============================================================ */
    .tour-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.6);
      z-index: var(--z-overlay);
      display: none;
    }
    .tour-overlay.show { display: block; }

    .tour-modal {
      position: fixed;
      bottom: var(--space-12);
      left: 50%;
      transform: translateX(-50%);
      width: 480px;
      max-width: calc(100vw - var(--space-8));
      background: white;
      border-radius: var(--radius-2xl);
      box-shadow: var(--shadow-2xl);
      z-index: var(--z-modal);
      padding: var(--space-8);
      display: none;
    }
    .tour-modal.show { display: block; }

    .tour-step-indicator {
      display: flex;
      gap: var(--space-2);
      margin-bottom: var(--space-6);
    }
    .tour-step-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--color-gray-200);
      transition: background var(--transition-fast);
    }
    .tour-step-dot.active { background: var(--color-primary); width: 24px; border-radius: var(--radius-full); }

    .tour-icon { font-size: 3rem; margin-bottom: var(--space-4); }
    .tour-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-3); }
    .tour-desc { font-size: var(--font-size-base); color: var(--color-gray-600); line-height: var(--line-height-relaxed); margin-bottom: var(--space-6); }

    .tour-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .btn-tour-skip {
      font-size: var(--font-size-sm);
      color: var(--color-gray-400);
      padding: var(--space-2);
    }
    .btn-tour-skip:hover { color: var(--color-gray-600); }
    .tour-nav { display: flex; gap: var(--space-3); }
    .btn-tour-prev {
      padding: var(--space-3) var(--space-5);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-md);
      font-size: var(--font-size-sm);
      color: var(--color-gray-600);
    }
    .btn-tour-prev:hover { background: var(--color-gray-50); }
    .btn-tour-next {
      padding: var(--space-3) var(--space-6);
      background: var(--color-primary);
      color: white;
      border-radius: var(--radius-md);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
    }
    .btn-tour-next:hover { background: var(--color-primary-dark); }

    /* Tour start prompt */
    .tour-start-modal {
      position: fixed;
      inset: 0;
      z-index: var(--z-modal);
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.5);
      display: none;
    }
    .tour-start-modal.show { display: flex; }
    .tour-start-box {
      background: white;
      border-radius: var(--radius-2xl);
      padding: var(--space-10);
      max-width: 440px;
      width: 90%;
      text-align: center;
      box-shadow: var(--shadow-2xl);
    }
    .tour-start-box .tour-big-icon { font-size: 4rem; margin-bottom: var(--space-5); }
    .tour-start-box h2 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-3); }
    .tour-start-box p { color: var(--color-gray-500); line-height: var(--line-height-relaxed); margin-bottom: var(--space-6); }
    .tour-start-btns { display: flex; gap: var(--space-3); justify-content: center; }
    .btn-start-tour {
      padding: var(--space-3) var(--space-6);
      background: var(--color-primary);
      color: white;
      border-radius: var(--radius-md);
      font-weight: var(--font-weight-semibold);
    }
    .btn-skip-tour {
      padding: var(--space-3) var(--space-5);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-md);
      color: var(--color-gray-600);
    }


    /* ============================================================
       BUTTONS (reusable)
    ============================================================ */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
      padding: var(--space-3) var(--space-5);
      border-radius: var(--radius-md);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      transition: all var(--transition-fast);
      cursor: pointer;
      border: none;
    }
    .btn-primary { background: var(--color-primary); color: white; }
    .btn-primary:hover { background: var(--color-primary-dark); }
    .btn-secondary { background: var(--color-gray-100); color: var(--color-gray-700); }
    .btn-secondary:hover { background: var(--color-gray-200); }
    .btn-outline { background: transparent; border: 1px solid var(--color-gray-300); color: var(--color-gray-700); }
    .btn-outline:hover { background: var(--color-gray-50); border-color: var(--color-gray-400); }
    .btn-danger { background: var(--color-danger); color: white; }
    .btn-danger:hover { background: #b71c1c; }
    .btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--font-size-base); }
    .btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--font-size-xs); }

    /* ============================================================
       MODAL BASE
    ============================================================ */
    .modal-backdrop {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: var(--z-overlay);
      display: none;
      align-items: center;
      justify-content: center;
      padding: var(--space-4);
    }
    .modal-backdrop.show { display: flex; }
    .modal-box {
      background: white;
      border-radius: var(--radius-2xl);
      box-shadow: var(--shadow-2xl);
      max-width: 560px;
      width: 100%;
      overflow: hidden;
    }
    .modal-header {
      padding: var(--space-6);
      border-bottom: 1px solid var(--color-gray-100);
      display: flex; align-items: center; justify-content: space-between;
    }
    .modal-header h3 { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
    .modal-close { font-size: 1.5rem; color: var(--color-gray-400); cursor: pointer; line-height: 1; }
    .modal-close:hover { color: var(--color-gray-700); }
    .modal-body { padding: var(--space-6); }
    .modal-footer {
      padding: var(--space-4) var(--space-6);
      border-top: 1px solid var(--color-gray-100);
      display: flex; gap: var(--space-3); justify-content: flex-end;
    }

    /* ============================================================
       COMING SOON PAGE (P&ID)
    ============================================================ */
    .coming-soon-page {
      min-height: calc(100vh - var(--navbar-height));
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: var(--space-12);
    }
    .coming-soon-content { max-width: 480px; }
    .coming-soon-badge {
      display: inline-block;
      padding: var(--space-2) var(--space-4);
      background: var(--color-warning-light);
      color: var(--color-warning);
      border-radius: var(--radius-full);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      margin-bottom: var(--space-5);
    }
    .coming-soon-content h1 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-4); }
    .coming-soon-content p { color: var(--color-gray-500); line-height: var(--line-height-relaxed); }

    /* ============================================================
       AUTH PAGES — Login / Register / Forgot Password
    ============================================================ */
    .auth-page {
      min-height: calc(100vh - var(--navbar-height));
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-8) var(--space-4);
      background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-navy-light) 100%);
    }
    .auth-card {
      background: var(--color-white);
      border-radius: var(--radius-2xl);
      box-shadow: var(--shadow-xl);
      width: 100%;
      max-width: 440px;
      overflow: hidden;
    }
    .auth-header {
      padding: var(--space-8) var(--space-8) var(--space-6);
      text-align: center;
      border-bottom: 1px solid var(--color-gray-100);
    }
    .auth-logo { font-size: 2.5rem; margin-bottom: var(--space-3); }
    .auth-header h1 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); }
    .auth-header p { font-size: var(--font-size-sm); color: var(--color-gray-500); }

    /* Tab switcher */
    .auth-tabs {
      display: flex;
      border-bottom: 2px solid var(--color-gray-100);
    }
    .auth-tab {
      flex: 1;
      padding: var(--space-4);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      color: var(--color-gray-500);
      text-align: center;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      transition: color var(--transition-fast), border-color var(--transition-fast);
    }
    .auth-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
    .auth-tab:hover:not(.active) { color: var(--color-gray-700); }

    /* Auth panels */
    .auth-panel { display: none; padding: var(--space-6) var(--space-8) var(--space-8); }
    .auth-panel.active { display: block; }

    /* Form fields */
    .form-group { margin-bottom: var(--space-5); }
    .form-label {
      display: block;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-medium);
      color: var(--color-gray-700);
      margin-bottom: var(--space-2);
    }
    .form-label span { color: var(--color-danger); margin-left: 2px; }
    .form-input {
      width: 100%;
      padding: var(--space-3) var(--space-4);
      border: 1.5px solid var(--color-gray-300);
      border-radius: var(--radius-md);
      font-size: var(--font-size-base);
      font-family: var(--font-family);
      color: var(--color-gray-800);
      background: var(--color-white);
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
      outline: none;
    }
    .form-input:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px var(--color-primary-50);
    }
    .form-input.error { border-color: var(--color-danger); }
    .form-input.error:focus { box-shadow: 0 0 0 3px var(--color-danger-light); }

    /* Password field with show/hide */
    .input-password-wrap { position: relative; }
    .input-password-wrap .form-input { padding-right: 2.75rem; }
    .btn-toggle-password {
      position: absolute; right: var(--space-3); top: 50%;
      transform: translateY(-50%);
      font-size: 1.1rem; color: var(--color-gray-400);
      cursor: pointer; padding: var(--space-1);
      transition: color var(--transition-fast);
    }
    .btn-toggle-password:hover { color: var(--color-gray-700); }

    /* Hint / Range text under fields */
    .form-hint {
      font-size: var(--font-size-xs);
      color: var(--color-gray-400);
      margin-top: var(--space-1);
    }

    /* Inline error message */
    .form-error {
      display: none;
      font-size: var(--font-size-xs);
      color: var(--color-danger);
      margin-top: var(--space-1);
      font-weight: var(--font-weight-medium);
    }
    .form-error.show { display: block; }

    /* Alert banner (form-level error) */
    .auth-alert {
      display: none;
      padding: var(--space-3) var(--space-4);
      border-radius: var(--radius-md);
      font-size: var(--font-size-sm);
      margin-bottom: var(--space-5);
      font-weight: var(--font-weight-medium);
    }
    .auth-alert.show { display: block; }
    .auth-alert.error   { background: var(--color-danger-light); color: var(--color-danger); border: 1px solid #ef9a9a; }
    .auth-alert.success { background: var(--color-success-light); color: var(--color-success); border: 1px solid #a5d6a7; }
    .auth-alert.warning { background: var(--color-warning-light); color: var(--color-warning); border: 1px solid #ffcc80; }

    /* Checkbox row */
    .form-check {
      display: flex; align-items: flex-start; gap: var(--space-3);
      margin-bottom: var(--space-5);
    }
    .form-check input[type="checkbox"] {
      width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
      accent-color: var(--color-primary); cursor: pointer;
    }
    .form-check label {
      font-size: var(--font-size-sm); color: var(--color-gray-600); cursor: pointer;
      line-height: var(--line-height-relaxed);
    }
    .form-check label a { color: var(--color-primary); text-decoration: underline; cursor: pointer; }

    /* Submit button with loading state */
    .btn-auth {
      width: 100%;
      padding: var(--space-4);
      background: var(--color-primary);
      color: white;
      border-radius: var(--radius-md);
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-bold);
      transition: background var(--transition-fast), opacity var(--transition-fast);
      position: relative;
    }
    .btn-auth:hover:not(:disabled) { background: var(--color-primary-dark); }
    .btn-auth:disabled { opacity: 0.65; cursor: not-allowed; }
    .btn-auth .spinner {
      display: none;
      width: 18px; height: 18px;
      border: 2px solid rgba(255,255,255,0.4);
      border-top-color: white;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      margin: 0 auto;
    }
    .btn-auth.loading .spinner { display: block; }
    .btn-auth.loading .btn-text { display: none; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Footer links inside auth card */
    .auth-footer-links {
      margin-top: var(--space-5);
      text-align: center;
      font-size: var(--font-size-sm);
      color: var(--color-gray-500);
    }
    .auth-footer-links a {
      color: var(--color-primary); cursor: pointer;
      font-weight: var(--font-weight-medium);
    }
    .auth-footer-links a:hover { text-decoration: underline; }
    .auth-divider {
      text-align: center; font-size: var(--font-size-xs);
      color: var(--color-gray-400); margin: var(--space-4) 0;
      position: relative;
    }
    .auth-divider::before, .auth-divider::after {
      content:''; position: absolute; top: 50%; width: 42%; height: 1px;
      background: var(--color-gray-200);
    }
    .auth-divider::before { left: 0; } .auth-divider::after { right: 0; }

    /* reCAPTCHA notice */
    .recaptcha-notice {
      font-size: 10px; color: var(--color-gray-400);
      text-align: center; margin-top: var(--space-4);
      line-height: 1.4;
    }
    .recaptcha-notice a { color: var(--color-gray-400); text-decoration: underline; }

    /* Lock timer bar */
    .lock-timer {
      display: none; text-align: center; padding: var(--space-3);
      background: var(--color-warning-light); border-radius: var(--radius-md);
      font-size: var(--font-size-sm); color: var(--color-warning);
      margin-bottom: var(--space-4); font-weight: var(--font-weight-medium);
    }
    .lock-timer.show { display: block; }

    /* Password strength indicator */
    .strength-bar {
      display: flex; gap: 4px; margin-top: var(--space-2);
    }
    .strength-bar-seg {
      flex: 1; height: 4px; border-radius: 2px;
      background: var(--color-gray-200);
      transition: background var(--transition-base);
    }
    .strength-bar-seg.weak   { background: var(--color-danger); }
    .strength-bar-seg.medium { background: var(--color-warning); }
    .strength-bar-seg.strong { background: var(--color-success); }
    .strength-label { font-size: var(--font-size-xs); color: var(--color-gray-400); margin-top: 4px; }

    /* ============================================================
       MY ACCOUNT PAGE
    ============================================================ */
    .account-page { padding: var(--space-8) 0 var(--space-16); }

    .account-header {
      background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
      color: white;
      padding: var(--space-10) 0;
      margin-bottom: var(--space-8);
    }
    .account-profile {
      display: flex; align-items: center; gap: var(--space-6);
      flex-wrap: wrap;
    }
    .account-avatar {
      width: 80px; height: 80px;
      border-radius: var(--radius-full);
      background: rgba(255,255,255,0.2);
      border: 3px solid rgba(255,255,255,0.4);
      display: flex; align-items: center; justify-content: center;
      font-size: 2rem; font-weight: 700; color: white;
      flex-shrink: 0;
    }
    .account-info h2 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); }
    .account-info p { font-size: var(--font-size-base); opacity: 0.85; }
    .plan-badge {
      display: inline-flex; align-items: center; gap: var(--space-2);
      padding: var(--space-2) var(--space-4);
      border-radius: var(--radius-full);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      margin-top: var(--space-3);
    }
    .plan-badge.free   { background: rgba(255,255,255,0.2); color: white; }
    .plan-badge.paid   { background: #ffd54f; color: #5d4037; }
    .plan-badge.admin  { background: #ef5350; color: white; }

    /* Account Tabs */
    .account-tabs {
      display: flex; gap: 0;
      border-bottom: 2px solid var(--color-gray-200);
      margin-bottom: var(--space-6);
      overflow-x: auto;
    }
    .account-tab {
      padding: var(--space-3) var(--space-5);
      font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
      color: var(--color-gray-500); cursor: pointer; white-space: nowrap;
      border-bottom: 2px solid transparent; margin-bottom: -2px;
      transition: color var(--transition-fast), border-color var(--transition-fast);
    }
    .account-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
    .account-tab:hover:not(.active) { color: var(--color-gray-700); }

    .account-tab-panel { display: none; }
    .account-tab-panel.active { display: block; }

    /* Account cards */
    .account-card {
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      padding: var(--space-6);
      margin-bottom: var(--space-5);
    }
    .account-card h3 {
      font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold);
      margin-bottom: var(--space-4); padding-bottom: var(--space-3);
      border-bottom: 1px solid var(--color-gray-100);
    }

    /* Saved item row */
    .saved-item {
      display: flex; align-items: center; gap: var(--space-3);
      padding: var(--space-3) 0;
      border-bottom: 1px solid var(--color-gray-100);
    }
    .saved-item:last-child { border-bottom: none; }
    .saved-item-icon { font-size: 1.3rem; }
    .saved-item-info { flex: 1; }
    .saved-item-info .item-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
    .saved-item-info .item-meta  { font-size: var(--font-size-xs); color: var(--color-gray-500); margin-top: 2px; }
    .saved-item-actions { display: flex; gap: var(--space-2); }

    /* Submission status badges */
    .status-badge {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px var(--space-3);
      border-radius: var(--radius-full);
      font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
    }
    .status-pending  { background: var(--color-warning-light); color: var(--color-warning); }
    .status-approved { background: var(--color-success-light); color: var(--color-success); }
    .status-rejected { background: var(--color-danger-light);  color: var(--color-danger); }

    /* Toggle switch */
    .toggle-switch {
      position: relative; width: 44px; height: 24px;
      display: inline-block;
    }
    .toggle-switch input { opacity: 0; width: 0; height: 0; }
    .toggle-slider {
      position: absolute; inset: 0; background: var(--color-gray-300);
      border-radius: var(--radius-full); cursor: pointer;
      transition: background var(--transition-base);
    }
    .toggle-slider::before {
      content: ''; position: absolute;
      width: 18px; height: 18px; left: 3px; top: 3px;
      background: white; border-radius: 50%;
      transition: transform var(--transition-base);
    }
    .toggle-switch input:checked + .toggle-slider { background: var(--color-primary); }
    .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

    /* Upgrade card */
    .upgrade-card {
      position: relative;
      background: linear-gradient(135deg, #0d47a1 0%, #1565c0 45%, #00796b 100%);
      border: none;
      border-radius: var(--radius-xl);
      padding: var(--space-6);
      margin-bottom: var(--space-5);
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(21,101,192,.3);
    }
    .upgrade-card::before {
      content: '';
      position: absolute;
      top: -40px; right: -40px;
      width: 160px; height: 160px;
      background: rgba(255,255,255,.06);
      border-radius: 50%;
    }
    .upgrade-badge {
      display: inline-block;
      background: #fbbf24;
      color: #78350f;
      font-size: .7rem;
      font-weight: 800;
      letter-spacing: .05em;
      padding: .2rem .65rem;
      border-radius: 99px;
      margin-bottom: .75rem;
      text-transform: uppercase;
    }
    .upgrade-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .upgrade-title { font-size: 1.05rem; font-weight: 800; color: #fff; margin-bottom: .2rem; }
    .upgrade-sub { font-size: .8rem; color: rgba(255,255,255,.75); }
    .upgrade-price-block { text-align: right; flex-shrink: 0; }
    .upgrade-annual { font-size: .72rem; color: rgba(255,255,255,.65); margin-top: .15rem; }
    .upgrade-annual strong { color: #86efac; }
    .upgrade-divider { height: 1px; background: rgba(255,255,255,.2); margin: var(--space-4) 0; }
    .upgrade-features { list-style: none; margin: 0 0 var(--space-5); }
    .upgrade-features li {
      font-size: .85rem;
      padding: .3rem 0;
      color: rgba(255,255,255,.9);
    }
    .upgrade-features li strong { color: #fff; }
    .upgrade-features li::before { content: '✓ '; color: #86efac; font-weight: 800; }
    .price-tag { font-size: 1.75rem; font-weight: 900; color: #fff; line-height: 1; }
    .price-tag span { font-size: .78rem; font-weight: 400; color: rgba(255,255,255,.65); margin-left: .1rem; }
    .btn-upgrade-cta {
      display: block;
      width: 100%;
      padding: .75rem 1.5rem;
      background: #fff;
      color: var(--color-primary, #1565c0);
      border: none;
      border-radius: var(--radius-md);
      font-size: .95rem;
      font-weight: 800;
      cursor: pointer;
      font-family: inherit;
      transition: background .15s, transform .1s, box-shadow .15s;
      box-shadow: 0 2px 8px rgba(0,0,0,.15);
    }
    .btn-upgrade-cta:hover {
      background: #f0f7ff;
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(0,0,0,.2);
    }
    .btn-upgrade-cta:active { transform: translateY(0); }

    /* Danger zone */
    .danger-zone {
      border: 1px solid var(--color-danger-light);
      border-radius: var(--radius-xl);
      padding: var(--space-6);
      background: var(--color-danger-light);
    }
    .danger-zone h3 { color: var(--color-danger); margin-bottom: var(--space-3); }
    .danger-zone p { font-size: var(--font-size-sm); color: var(--color-gray-600); margin-bottom: var(--space-4); }

    /* Delete Confirm Modal */
    .delete-confirm-input {
      margin: var(--space-4) 0;
    }
    .delete-confirm-input .form-label { color: var(--color-danger); font-weight: var(--font-weight-semibold); }

    /* ============================================================
       SYSTEMS PAGE
    ============================================================ */
    .systems-page { padding-bottom: var(--space-16); }

    /* Page Hero */
    .systems-hero {
      background: linear-gradient(135deg, #1a237e 0%, #283593 60%, #00695c 100%);
      color: white; padding: var(--space-12) 0 var(--space-16);
      position: relative; overflow: hidden;
    }
    .systems-hero::after { content: none; }
    .systems-hero h1 { font-size: var(--font-size-3xl); font-weight: 900; margin-bottom: var(--space-3); }
    .systems-hero p  { font-size: var(--font-size-lg); opacity: 0.88; max-width: 540px; }

    /* Filter bar */
    .systems-filter-bar {
      background: var(--color-white);
      border-bottom: 1px solid var(--color-gray-200);
      padding: var(--space-4) 0;
      position: sticky; top: var(--navbar-height);
      z-index: var(--z-sticky);
      box-shadow: var(--shadow-sm);
    }
    .filter-inner {
      display: flex; align-items: center; gap: var(--space-4);
      flex-wrap: wrap;
    }
    .filter-label { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-gray-600); white-space: nowrap; }
    .filter-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
    .filter-chip {
      padding: var(--space-2) var(--space-4);
      border: 1.5px solid var(--color-gray-200);
      border-radius: var(--radius-full);
      font-size: var(--font-size-sm);
      cursor: pointer; font-weight: 500;
      color: var(--color-gray-600);
      transition: all var(--transition-fast); white-space: nowrap;
    }
    .filter-chip:hover  { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-50); }
    .filter-chip.active { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-50); font-weight: 700; }
    .filter-chip:active { transform: scale(.93); transition: transform .08s; }
    .filter-divider { width: 1px; height: 24px; background: var(--color-gray-200); }

    .systems-search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 280px; }
    .systems-search-wrap input {
      width: 100%; padding: var(--space-2) var(--space-4) var(--space-2) 2.25rem;
      border: 1.5px solid var(--color-gray-200); border-radius: var(--radius-full);
      font-size: var(--font-size-sm); font-family: var(--font-family); outline: none;
      transition: border-color var(--transition-fast);
    }
    .systems-search-wrap input:focus { border-color: var(--color-primary); }
    .systems-search-wrap .si { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--color-gray-400); font-size: 0.9rem; }

    /* Results meta */
    .systems-meta {
      padding: var(--space-5) 0 var(--space-3);
      display: flex; align-items: center; justify-content: space-between;
    }
    .systems-meta p { font-size: var(--font-size-sm); color: var(--color-gray-500); }

    /* Card Grid */
    .systems-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: var(--space-6);
    }

    /* System Card */
    .sys-card {
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
      transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
      cursor: pointer;
    }
    .sys-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.08); border-color: #90caf9; }

    /* Card diagram area */
    .sys-card-diagram {
      height: 160px;
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
    }
    .sys-card-diagram svg { width: 100%; height: 100%; }
    .sys-card-diagram.has-photo { background: #000; }
    .sys-card-photo { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; transition: opacity .2s; }
    .sys-card:hover .sys-card-photo { opacity: 1; }
    .sys-card-diagram.type-anaerobic { background: linear-gradient(135deg, #ede7f6, #d1c4e9); }
    .sys-card-diagram.type-aerobic   { background: linear-gradient(135deg, #e3f2fd, #bbdefb); }
    .sys-card-diagram.type-pond      { background: linear-gradient(135deg, #e0f2f1, #b2dfdb); }
    .sys-card-diagram.type-other     { background: linear-gradient(135deg, #f3e5f5, #e1bee7); }

    /* Paid badge on diagram */
    .sys-paid-overlay-badge {
      position: absolute; top: var(--space-3); right: var(--space-3);
      background: rgba(0,0,0,0.6); color: white;
      font-size: var(--font-size-xs); font-weight: 700;
      padding: 3px var(--space-2); border-radius: var(--radius-full);
      backdrop-filter: blur(4px);
    }
    .sys-free-badge {
      position: absolute; top: var(--space-3); right: var(--space-3);
      background: rgba(46,125,50,0.85); color: white;
      font-size: var(--font-size-xs); font-weight: 700;
      padding: 3px var(--space-2); border-radius: var(--radius-full);
    }

    /* Card body */
    .sys-card-body { padding: var(--space-5); }
    .sys-card-type {
      font-size: var(--font-size-xs); font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.05em;
      margin-bottom: var(--space-2);
    }
    .sys-card-type.anaerobic { color: #7e57c2; }
    .sys-card-type.aerobic   { color: var(--color-primary); }
    .sys-card-type.pond      { color: var(--color-navy); }
    .sys-card-name {
      font-size: var(--font-size-xl); font-weight: 800;
      margin-bottom: var(--space-1); color: var(--color-gray-900);
    }
    .sys-card-name-en { font-size: var(--font-size-xs); color: var(--color-gray-400); margin-bottom: var(--space-3); font-style: italic; }
    .sys-card-desc {
      font-size: var(--font-size-sm); color: var(--color-gray-600);
      line-height: var(--line-height-relaxed);
      margin-bottom: var(--space-4);
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    .sys-card-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }

    /* Card footer */
    .sys-card-footer {
      padding: var(--space-4) var(--space-5);
      border-top: 1px solid var(--color-gray-100);
      display: flex; gap: var(--space-2);
    }
    .btn-sys-detail {
      flex: 1; padding: var(--space-3);
      background: var(--color-primary); color: white;
      border-radius: var(--radius-md);
      font-size: var(--font-size-sm); font-weight: 700; text-align: center;
      transition: background var(--transition-fast);
    }
    .btn-sys-detail:hover { background: var(--color-primary-dark); }
    .btn-sys-share {
      width: 40px; height: 40px;
      border: 1.5px solid var(--color-gray-200);
      border-radius: var(--radius-md);
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; color: var(--color-gray-500);
      transition: all var(--transition-fast);
    }
    .btn-sys-share:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-50); }

    /* Empty state */
    .systems-empty {
      grid-column: 1 / -1;
      text-align: center; padding: var(--space-16);
      color: var(--color-gray-400);
    }
    .systems-empty .empty-icon { font-size: 4rem; margin-bottom: var(--space-4); }

    /* ── SYSTEM DETAIL MODAL ── */
    .sys-modal-bg {
      position: fixed; inset: 0; background: rgba(0,0,0,0.55);
      z-index: var(--z-overlay); display: none; align-items: center; justify-content: center;
      padding: var(--space-4);
    }
    .sys-modal-bg.show { display: flex; }
    .sys-modal {
      background: var(--color-white); border-radius: var(--radius-2xl);
      max-width: 760px; width: 100%; max-height: 90vh;
      display: flex; flex-direction: column;
      box-shadow: var(--shadow-2xl); overflow: hidden;
    }
    .sys-modal-head {
      padding: var(--space-6); border-bottom: 1px solid var(--color-gray-100);
      display: flex; align-items: flex-start; gap: var(--space-4);
    }
    .sys-modal-head-diagram {
      width: 120px; height: 80px; flex-shrink: 0;
      border-radius: var(--radius-lg); overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .sys-modal-head-diagram svg { width: 100%; height: 100%; }
    .sys-modal-head-diagram.has-photo { width: 160px; height: 110px; }

    /* Photo inside modal body */
    .sys-modal-photo-wrap {
      margin-bottom: var(--space-5);
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,.10);
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
    .sys-modal-photo {
      width: 100%; height: auto;
      max-height: 500px;
      object-fit: contain; display: block;
      cursor: zoom-in;
      transition: opacity .15s;
    }
    .sys-modal-photo:hover { opacity: .88; }

    /* ── Image Lightbox ── */
    .sys-img-lightbox {
      position: fixed; inset: 0; z-index: 10000;
      background: rgba(0,0,0,.92);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none;
      transition: opacity .2s;
    }
    .sys-img-lightbox.show { opacity: 1; pointer-events: auto; cursor: zoom-out; }
    .sys-img-lightbox img {
      max-width: 95vw; max-height: 92vh;
      object-fit: contain;
      border-radius: var(--radius-lg);
      box-shadow: 0 12px 48px rgba(0,0,0,.7);
      cursor: default;
      user-select: none;
    }
    .sys-lightbox-close {
      position: absolute; top: 16px; right: 20px;
      color: #fff; font-size: 2rem; line-height: 1;
      cursor: pointer; opacity: .7; transition: opacity .15s;
      background: none; border: none; padding: 4px 8px;
    }
    .sys-lightbox-close:hover { opacity: 1; }
    .sys-modal-head-info { flex: 1; }
    .sys-modal-head-info .modal-type-tag { font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; color: var(--color-primary); letter-spacing: 0.05em; margin-bottom: var(--space-1); }
    .sys-modal-head-info h2 { font-size: var(--font-size-2xl); font-weight: 900; margin-bottom: 4px; }
    .sys-modal-head-info .modal-en { font-size: var(--font-size-sm); color: var(--color-gray-400); font-style: italic; }
    .sys-modal-close { font-size: 1.5rem; color: var(--color-gray-400); cursor: pointer; flex-shrink: 0; }
    .sys-modal-close:hover { color: var(--color-gray-700); }
    .sys-modal-body { flex: 1; overflow-y: auto; padding: var(--space-6); }

    /* Principle section */
    .detail-section { margin-bottom: var(--space-6); }
    .detail-section h3 {
      font-size: var(--font-size-base); font-weight: 700; color: var(--color-gray-900);
      margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2);
      padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-primary-50);
    }
    .detail-section p { font-size: var(--font-size-sm); color: var(--color-gray-700); line-height: var(--line-height-relaxed); }

    /* Pros / Cons grid */
    .pros-cons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
    .pros-col, .cons-col { padding: var(--space-4); border-radius: var(--radius-lg); }
    .pros-col { background: var(--color-success-light); }
    .cons-col { background: var(--color-danger-light); }
    .pros-col h4 { color: var(--color-success); font-weight: 700; margin-bottom: var(--space-3); }
    .cons-col h4 { color: var(--color-danger);  font-weight: 700; margin-bottom: var(--space-3); }
    .pros-col li, .cons-col li {
      font-size: var(--font-size-sm); padding: var(--space-1) 0;
      display: flex; gap: var(--space-2); align-items: flex-start;
    }
    .pros-col li::before { content: '✓'; color: var(--color-success); font-weight: 900; flex-shrink: 0; }
    .cons-col li::before { content: '✗'; color: var(--color-danger);  font-weight: 900; flex-shrink: 0; }

    /* Suitable for chips */
    .suitable-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
    .suitable-chip {
      padding: var(--space-2) var(--space-3);
      background: var(--color-navy-light); color: var(--color-navy-dark);
      border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: 500;
    }

    /* Reference */
    .reference-box {
      background: var(--color-gray-50); border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
      font-size: var(--font-size-xs); color: var(--color-gray-500);
      display: flex; gap: var(--space-2); align-items: center;
    }

    /* Extra detail sections — reactions, sludge, selection, installation */
    .detail-list { padding-left: 0; list-style: none; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
    .detail-list li { font-size: var(--font-size-sm); color: var(--color-gray-700); line-height: 1.55;
      padding: .35rem .5rem .35rem 1.6rem; position: relative; border-radius: var(--radius-sm);
      background: var(--color-gray-50); }
    .detail-list li::before { content: '⚗'; position: absolute; left: .4rem; color: var(--color-primary); font-size: .8rem; }
    .detail-list-check li::before { content: '✔'; color: #16a34a; }
    .detail-list-wrench li::before { content: '🔩'; font-size: .75rem; }

    .sludge-info { font-size: var(--font-size-sm); color: var(--color-gray-700);
      background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
    .sludge-row { margin-bottom: .4rem; line-height: 1.5; }
    .sludge-row:last-child { margin-bottom: 0; }
    .sludge-row ul { margin: .2rem 0 0 1.2rem; padding: 0; }
    .sludge-row li { list-style: disc; font-size: .8rem; }

    /* Paid lock blur overlay inside modal */
    .sys-locked-overlay {
      position: relative; overflow: hidden;
      border-radius: var(--radius-lg);
    }
    .sys-locked-overlay::after {
      content: '';
      position: absolute; inset: 0;
      backdrop-filter: blur(8px);
      background: rgba(255,255,255,0.6);
      border-radius: var(--radius-lg);
    }
    /* Paywall wrap */
    .sys-paywall-wrap {
      position: relative;
      min-height: 300px;
      overflow: hidden;
      border-radius: 12px;
      margin: 1rem 0;
    }
    .sys-paywall-blur {
      pointer-events: none;
      user-select: none;
      filter: blur(4px);
      opacity: 0.25;
      padding: 1rem;
    }
    .sys-paywall-placeholder {
      height: 260px;
      background: linear-gradient(135deg, #e8f0fe 0%, #f0fdf4 50%, #fef9c3 100%);
      border-radius: 8px;
    }
    .sys-paywall-cta {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      text-align: center;
      background: linear-gradient(135deg, rgba(21,101,192,.08) 0%, rgba(0,121,107,.08) 100%);
      backdrop-filter: blur(2px);
    }
    .sys-paywall-lock { font-size: 2rem; margin-bottom: .5rem; }
    .sys-paywall-title { font-size: 1.05rem; font-weight: 800; color: var(--color-gray-900); margin: 0 0 .4rem; }
    .sys-paywall-desc { font-size: .85rem; color: var(--color-gray-600); margin: 0 0 .85rem; line-height: 1.5; }
    .sys-paywall-price {
      font-size: 1.5rem;
      font-weight: 900;
      color: var(--color-primary, #1565c0);
      margin-bottom: 1rem;
    }
    .sys-paywall-price span { font-size: .8rem; font-weight: 400; color: var(--color-gray-500); }
    .sys-paywall-actions { display: flex; gap: .65rem; flex-wrap: wrap; justify-content: center; }
    .sys-paywall-btn-primary {
      padding: .65rem 1.5rem;
      background: var(--color-primary, #1565c0);
      color: #fff;
      border: none;
      border-radius: 999px;
      font-size: .9rem;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      box-shadow: 0 2px 10px rgba(21,101,192,.3);
      transition: transform .15s;
    }
    .sys-paywall-btn-primary:hover { transform: translateY(-1px); }
    .sys-paywall-btn-secondary {
      padding: .65rem 1.25rem;
      background: transparent;
      color: var(--color-primary, #1565c0);
      border: 1.5px solid var(--color-primary, #1565c0);
      border-radius: 999px;
      font-size: .85rem;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
    }

    /* Share toast */
    .share-toast {
      position: fixed; bottom: var(--space-8); left: 50%; transform: translateX(-50%);
      background: var(--color-gray-900); color: white;
      padding: var(--space-3) var(--space-6);
      border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: 600;
      z-index: var(--z-toast); opacity: 0; transition: opacity var(--transition-base);
      pointer-events: none;
    }
    .share-toast.show { opacity: 1; }

    /* ============================================================
       ADMIN PANEL
    ============================================================ */
    .admin-page { min-height: calc(100vh - var(--navbar-height)); background: var(--color-gray-50); }

    /* Access denied */
    .admin-denied {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      min-height: calc(100vh - var(--navbar-height));
      text-align: center; padding: var(--space-12);
    }
    .admin-denied .denied-icon { font-size: 4rem; margin-bottom: var(--space-4); }
    .admin-denied h2 { font-size: var(--font-size-2xl); font-weight: 700; margin-bottom: var(--space-3); }
    .admin-denied p { color: var(--color-gray-500); margin-bottom: var(--space-6); }

    /* Admin header bar */
    .admin-topbar {
      background: var(--color-gray-900);
      color: white;
      padding: var(--space-4) var(--space-6);
      display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    }
    .admin-topbar h1 { font-size: var(--font-size-xl); font-weight: 700; display: flex; align-items: center; gap: var(--space-3); }
    .admin-topbar .admin-badge {
      display: inline-flex; align-items: center; gap: var(--space-2);
      background: rgba(255,255,255,0.15);
      padding: var(--space-1) var(--space-3);
      border-radius: var(--radius-full);
      font-size: var(--font-size-xs);
    }
    .admin-topbar .pending-count {
      background: var(--color-danger);
      color: white;
      font-size: 10px; font-weight: 700;
      padding: 2px 6px;
      border-radius: var(--radius-full);
      min-width: 20px; text-align: center;
    }

    /* Admin tab nav */
    .admin-tabs {
      background: var(--color-white);
      border-bottom: 2px solid var(--color-gray-200);
      display: flex;
      overflow-x: auto;
      padding: 0 var(--space-4);
      gap: 0;
    }
    .admin-tab {
      padding: var(--space-4) var(--space-5);
      font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
      color: var(--color-gray-500); cursor: pointer; white-space: nowrap;
      border-bottom: 2px solid transparent; margin-bottom: -2px;
      transition: color var(--transition-fast), border-color var(--transition-fast);
      display: flex; align-items: center; gap: var(--space-2);
    }
    .admin-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
    .admin-tab:hover:not(.active) { color: var(--color-gray-700); }
    .admin-tab .tab-badge {
      background: var(--color-danger);
      color: white; font-size: 10px; font-weight: 700;
      padding: 1px 5px; border-radius: var(--radius-full);
      display: none;
    }
    .admin-tab .tab-badge.show { display: inline-block; }

    /* Admin content wrapper */
    .admin-content { padding: var(--space-6); max-width: var(--container-max); margin: 0 auto; }
    .admin-panel { display: none; }
    .admin-panel.active { display: block; }

    /* Admin toolbar row */
    .admin-toolbar {
      display: flex; align-items: center; justify-content: space-between;
      gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap;
    }
    .admin-toolbar h2 { font-size: var(--font-size-xl); font-weight: 700; }
    .admin-search-wrap { position: relative; flex: 1; max-width: 320px; }
    .admin-search-wrap input {
      width: 100%; padding: var(--space-2) var(--space-4) var(--space-2) 2.25rem;
      border: 1px solid var(--color-gray-200); border-radius: var(--radius-md);
      font-size: var(--font-size-sm); font-family: var(--font-family); outline: none;
    }
    .admin-search-wrap input:focus { border-color: var(--color-primary); }
    .admin-search-wrap .s-icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--color-gray-400); }

    /* Data table */
    .admin-table-wrap {
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      overflow: hidden;
    }
    .admin-table {
      width: 100%; border-collapse: collapse;
      font-size: var(--font-size-sm);
    }
    .admin-table th {
      background: var(--color-gray-50);
      padding: var(--space-3) var(--space-4);
      text-align: left; font-weight: var(--font-weight-semibold);
      color: var(--color-gray-600); font-size: var(--font-size-xs);
      text-transform: uppercase; letter-spacing: 0.04em;
      border-bottom: 1px solid var(--color-gray-200);
    }
    .admin-table td {
      padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid var(--color-gray-100);
      vertical-align: middle;
    }
    .admin-table tr:last-child td { border-bottom: none; }
    .admin-table tr:hover td { background: var(--color-gray-50); }

    /* Action buttons in table */
    .tbl-actions { display: flex; gap: var(--space-2); }
    .btn-icon-sm {
      width: 30px; height: 30px; border-radius: var(--radius-sm);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.9rem; cursor: pointer;
      transition: background var(--transition-fast);
    }
    .btn-icon-sm.edit   { background: var(--color-primary-50); color: var(--color-primary); }
    .btn-icon-sm.delete { background: var(--color-danger-light); color: var(--color-danger); }
    .btn-icon-sm.view   { background: var(--color-info-light); color: var(--color-info); }
    .btn-icon-sm.approve { background: var(--color-success-light); color: var(--color-success); }
    .btn-icon-sm.reject  { background: var(--color-danger-light); color: var(--color-danger); }
    .btn-icon-sm:hover { filter: brightness(0.92); }

    /* Badges in table */
    .badge-paid   { background: #fce4ec; color: #c2185b; font-size:10px; padding:2px 8px; border-radius: var(--radius-full); font-weight:600; }
    .badge-free   { background: var(--color-gray-100); color: var(--color-gray-600); font-size:10px; padding:2px 8px; border-radius: var(--radius-full); font-weight:600; }
    .badge-high   { background: var(--color-danger-light); color: var(--color-danger); font-size:10px; padding:2px 8px; border-radius: var(--radius-full); font-weight:600; }
    .badge-medium { background: var(--color-warning-light); color: var(--color-warning); font-size:10px; padding:2px 8px; border-radius: var(--radius-full); font-weight:600; }
    .badge-low    { background: var(--color-success-light); color: var(--color-success); font-size:10px; padding:2px 8px; border-radius: var(--radius-full); font-weight:600; }

    /* Admin CRUD Modal (right-slide panel) */
    .admin-modal-bg {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.45);
      z-index: var(--z-overlay);
      display: none;
    }
    .admin-modal-bg.show { display: block; }
    .admin-modal-panel {
      position: fixed; top: 0; right: -560px; bottom: 0;
      width: min(560px, 95vw);
      background: white;
      box-shadow: var(--shadow-2xl);
      z-index: var(--z-modal);
      transition: right var(--transition-slow);
      display: flex; flex-direction: column;
    }
    .admin-modal-panel.open { right: 0; }
    .admin-modal-head {
      padding: var(--space-5) var(--space-6);
      border-bottom: 1px solid var(--color-gray-100);
      display: flex; align-items: center; justify-content: space-between;
      flex-shrink: 0;
    }
    .admin-modal-head h3 { font-size: var(--font-size-lg); font-weight: 700; }
    .admin-modal-body { flex: 1; overflow-y: auto; padding: var(--space-6); }
    .admin-modal-foot {
      padding: var(--space-4) var(--space-6);
      border-top: 1px solid var(--color-gray-100);
      display: flex; gap: var(--space-3); justify-content: flex-end;
      flex-shrink: 0;
    }

    /* Form styles inside admin modal */
    .admin-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
    .admin-form-group { margin-bottom: var(--space-4); }
    .admin-form-group label { display:block; font-size:var(--font-size-sm); font-weight:600; color:var(--color-gray-700); margin-bottom:var(--space-2); }
    .admin-form-group input,
    .admin-form-group select,
    .admin-form-group textarea {
      width: 100%; padding: var(--space-3); border: 1.5px solid var(--color-gray-300);
      border-radius: var(--radius-md); font-size: var(--font-size-sm);
      font-family: var(--font-family); outline: none; transition: border-color var(--transition-fast);
    }
    .admin-form-group input:focus,
    .admin-form-group select:focus,
    .admin-form-group textarea:focus { border-color: var(--color-primary); }
    .admin-form-group textarea { min-height: 100px; resize: vertical; }

    /* Mode tabs inside form (ทั่วไป / วิชาการ) */
    .form-mode-tabs { display: flex; border-bottom: 2px solid var(--color-gray-100); margin-bottom: var(--space-4); }
    .form-mode-tab {
      padding: var(--space-2) var(--space-4);
      font-size: var(--font-size-sm); cursor: pointer;
      border-bottom: 2px solid transparent; margin-bottom: -2px; color: var(--color-gray-500);
    }
    .form-mode-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
    .form-mode-panel { display: none; }
    .form-mode-panel.active { display: block; }

    /* Upload zone */
    .upload-zone {
      border: 2px dashed var(--color-gray-300);
      border-radius: var(--radius-md);
      padding: var(--space-8);
      text-align: center;
      cursor: pointer;
      transition: border-color var(--transition-fast), background var(--transition-fast);
    }
    .upload-zone:hover { border-color: var(--color-primary); background: var(--color-primary-50); }
    .upload-zone input[type="file"] { display: none; }
    .upload-zone .upload-icon { font-size: 2.5rem; margin-bottom: var(--space-3); }
    .upload-zone p { font-size: var(--font-size-sm); color: var(--color-gray-500); }
    .upload-zone .upload-hint { font-size: var(--font-size-xs); color: var(--color-gray-400); margin-top: var(--space-2); }
    .file-selected { margin-top: var(--space-3); font-size: var(--font-size-sm); color: var(--color-primary); font-weight: 600; }

    /* Image tag picker */
    .img-tag-grid { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
    .img-tag-chip {
      padding: var(--space-1) var(--space-3);
      border: 1.5px solid var(--color-gray-300);
      border-radius: var(--radius-full);
      font-size: var(--font-size-xs); cursor: pointer;
      transition: all var(--transition-fast);
    }
    .img-tag-chip.selected { background: var(--color-primary); border-color: var(--color-primary); color: white; }

    /* Submission review card */
    .submission-card {
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      padding: var(--space-5);
      margin-bottom: var(--space-4);
      transition: box-shadow var(--transition-fast);
    }
    .submission-card:hover { box-shadow: var(--shadow-md); }
    .submission-card.pending  { border-left: 4px solid var(--color-warning); }
    .submission-card.approved { border-left: 4px solid var(--color-success); }
    .submission-card.rejected { border-left: 4px solid var(--color-danger); }
    .submission-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
    .submission-meta strong { font-weight: 700; }
    .submission-body { font-size: var(--font-size-sm); color: var(--color-gray-700); margin-bottom: var(--space-3); }
    .submission-actions { display: flex; gap: var(--space-3); }
    .admin-note-box {
      background: var(--color-danger-light);
      border-radius: var(--radius-md);
      padding: var(--space-3);
      font-size: var(--font-size-sm);
      color: var(--color-danger);
      margin-top: var(--space-2);
    }

    /* Analytics */
    .analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-5); margin-bottom: var(--space-6); }
    .stat-card {
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      padding: var(--space-6);
    }
    .stat-card .s-label { font-size: var(--font-size-xs); color: var(--color-gray-500); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2); }
    .stat-card .s-value { font-size: var(--font-size-4xl); font-weight: 900; color: var(--color-gray-900); }
    .stat-card .s-sub   { font-size: var(--font-size-xs); color: var(--color-gray-400); margin-top: var(--space-1); }
    .stat-card.blue  .s-value { color: var(--color-primary); }
    .stat-card.teal  .s-value { color: var(--color-navy); }
    .stat-card.green .s-value { color: var(--color-success); }
    .stat-card.red   .s-value { color: var(--color-danger); }

    .analytics-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-5); }
    .analytics-card {
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      padding: var(--space-5);
    }
    .analytics-card h3 { font-size: var(--font-size-base); font-weight: 700; margin-bottom: var(--space-4); }

    /* CSS bar chart */
    .bar-chart-row { margin-bottom: var(--space-3); }
    .bar-label { display: flex; justify-content: space-between; font-size: var(--font-size-xs); color: var(--color-gray-600); margin-bottom: 4px; }
    .bar-track { background: var(--color-gray-100); border-radius: var(--radius-full); height: 8px; overflow: hidden; }
    .bar-fill  { height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--color-primary), var(--color-navy)); transition: width 0.8s ease; }
    .bar-fill.danger  { background: linear-gradient(90deg, var(--color-danger), #ef5350); }
    .bar-fill.success { background: linear-gradient(90deg, var(--color-success), #43a047); }

    /* User plan toggle */
    .plan-toggle-wrap { display: flex; gap: var(--space-2); align-items: center; }
    .plan-toggle-wrap select {
      padding: var(--space-1) var(--space-3);
      border: 1px solid var(--color-gray-300);
      border-radius: var(--radius-md);
      font-size: var(--font-size-xs);
      font-family: var(--font-family);
      cursor: pointer;
    }

    /* Reject reason modal */
    .reject-modal-bg {
      position: fixed; inset: 0; background: rgba(0,0,0,0.5);
      z-index: calc(var(--z-modal) + 10);
      display: none; align-items: center; justify-content: center;
    }
    .reject-modal-bg.show { display: flex; }
    .reject-modal-box {
      background: white; border-radius: var(--radius-2xl);
      padding: var(--space-6); max-width: 440px; width: 90%;
      box-shadow: var(--shadow-2xl);
    }

    /* ============================================================
       RESPONSIVE — Tablet (≤ 1024px)
    ============================================================ */
    @media (max-width: 1024px) {
      .hero h1 { font-size: var(--font-size-4xl); }
      .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
      .hero-stats { gap: var(--space-8); }
    }

    @media (max-width: 768px) {
      :root { --navbar-height: 56px; }

      /* Search bar: ซ่อน input ปกติ — แสดง icon button แทน */
      .navbar-search {
        display: flex;
        align-items: center;
        width: auto;
        max-width: none;
        background: none;
        border: none;
        padding: 0;
        position: static;
        flex-shrink: 0;
      }
      /* Input ซ่อนไว้ก่อน — drop ลงมาใต้ navbar เมื่อเปิด */
      .navbar-search #globalSearch {
        display: none;
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        right: 0;
        width: 100%;
        z-index: var(--z-sticky);
        border-radius: 0;
        border: none;
        border-top: 1px solid var(--color-gray-200);
        border-bottom: 1px solid var(--color-gray-200);
        background: var(--color-white);
        padding: .6rem 1rem .6rem 2.5rem;
        font-size: var(--font-size-base);
        box-shadow: var(--shadow-md);
      }
      .navbar-search #globalSearch.mobile-open { display: block; }
      /* Icon เดิม (ภายใน input) ให้หายไปบน mobile */
      .navbar-search > .search-icon { display: none; }
      /* Icon button สำหรับ tap */
      .navbar-search .search-icon-btn { display: flex; }
      /* Dropdown results ยืดเต็มความกว้างใต้ input */
      .search-results {
        top: calc(var(--navbar-height) + 48px);
        left: 0;
        right: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        max-height: 60vh;
      }

      .hero { padding: var(--space-16) 0 var(--space-20); }
      .hero h1 { font-size: var(--font-size-3xl); }
      .hero p { font-size: var(--font-size-base); }
      .hero-stats { flex-wrap: wrap; gap: var(--space-6); }
      .feature-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
      .cookie-banner { flex-direction: column; }
      .tj-flow { justify-content: flex-start; }
      .std-tabs { flex-wrap: wrap; }
      .std-table { font-size: .75rem; }
      .std-table th, .std-table td { padding: var(--space-2) var(--space-3); }
    }

    /* ============================================================
       ENGINEERING SUITE THEME — Strategy A + D
       Blueprint Grid Background · Functional Accent Borders
    ============================================================ */

    /* ── A: Engineering Grid Background ── */
    body {
      background-color: #f1f5f9;
      background-image:
        radial-gradient(circle, rgba(100,130,180,0.18) 1px, transparent 1px);
      background-size: 28px 28px;
    }

    /* All pages inherit the grid — keep content areas white */
    .page { background: transparent; }
    .main-content { background: transparent; }

    /* Override sections that were setting their own white/gradient backgrounds */
    .features-section {
      position: relative;
      background:
        radial-gradient(ellipse 55% 50% at 8%  30%, rgba(21,101,192,0.09)  0%, transparent 70%),
        radial-gradient(ellipse 50% 55% at 88% 65%, rgba(0,121,107,0.08)   0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 60% 15%, rgba(124,58,237,0.07)  0%, transparent 70%),
        #f8fafc;
    }
    .showcase-section { background: transparent; }

    /* ── A: Non-feature card surfaces stay solid white ── */
    .sys-card,
    .treatment-journey,
    .ts-filter-bar,
    .ra-item,
    .std-panel > div,
    .recent-activity-section {
      background: #ffffff;
    }

    /* ── D: Feature Cards — Glassmorphism ── */
    .feature-card {
      background: rgba(255,255,255,0.72);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(255,255,255,0.92);
      border-radius: var(--radius-2xl);
      box-shadow:
        0 2px 8px  rgba(0,0,0,0.05),
        0 1px 2px  rgba(0,0,0,0.04),
        inset 0 1px 0 rgba(255,255,255,0.9);
    }

    .feature-card:hover {
      transform: translateY(-6px) scale(1.01);
      border-color: rgba(255,255,255,1);
    }

    /* Per-card colored glow on hover */
    .feature-grid > .feature-card:nth-child(1):hover {
      box-shadow: 0 20px 40px rgba(21,101,192,0.20), 0 4px 12px rgba(21,101,192,0.10), inset 0 1px 0 rgba(255,255,255,0.9);
    }
    .feature-grid > .feature-card:nth-child(2):hover {
      box-shadow: 0 20px 40px rgba(180,83,9,0.18), 0 4px 12px rgba(180,83,9,0.10), inset 0 1px 0 rgba(255,255,255,0.9);
    }
    .feature-grid > .feature-card:nth-child(3):hover {
      box-shadow: 0 20px 40px rgba(0,121,107,0.18), 0 4px 12px rgba(0,121,107,0.10), inset 0 1px 0 rgba(255,255,255,0.9);
    }
    .feature-grid > .feature-card:nth-child(4):hover {
      box-shadow: 0 20px 40px rgba(124,58,237,0.18), 0 4px 12px rgba(124,58,237,0.10), inset 0 1px 0 rgba(255,255,255,0.9);
    }
    .feature-grid > .feature-card:nth-child(5):hover {
      box-shadow: 0 20px 40px rgba(46,125,50,0.18), 0 4px 12px rgba(46,125,50,0.10), inset 0 1px 0 rgba(255,255,255,0.9);
    }

    /* ── D: Systems Cards — Teal accent ── */
    .sys-card {
      border-top: 3.5px solid var(--color-navy);
      box-shadow: 0 1px 4px rgba(0,121,107,0.07);
    }
    .sys-card:hover {
      box-shadow: 0 6px 24px rgba(0,121,107,0.13);
      border-top-color: var(--color-navy-dark);
    }

    /* ── D: Troubleshoot Cards — severity-aware ── */
    .ts-card {
      border-top: 3.5px solid var(--color-warning);
      box-shadow: 0 1px 4px rgba(230,81,0,0.07);
    }
    .ts-card:hover {
      box-shadow: 0 6px 24px rgba(230,81,0,0.12);
    }
    .sev-shape {
      font-size: .75em;
      font-style: normal;
      margin-right: .15em;
      display: inline-block;
    }

    /* ── D: Document Cards — Green accent ── */
    .doc-card {
      border-top: 3.5px solid var(--color-success) !important;
      box-shadow: 0 1px 4px rgba(46,125,50,0.07) !important;
    }
    .doc-card:hover {
      box-shadow: 0 6px 24px rgba(46,125,50,0.12) !important;
    }

    /* ── D: Standards Panels — semantic tab colors ── */

    /* Wrapper card for each std-panel content */
    .std-panel.active {
      background: #ffffff;
      border-radius: var(--radius-xl);
      padding: var(--space-6);
      box-shadow: 0 1px 6px rgba(21,101,192,0.07);
    }

    /* Tab active indicator — semantic colors per tab */
    .std-tab[onclick*="industry"].active {
      color: #1565c0;
      border-bottom-color: #1565c0;         /* Steel Blue — Factory */
    }
    .std-tab[onclick*="estate"].active {
      color: var(--color-navy);
      border-bottom-color: var(--color-navy); /* Teal Signal — IEAT */
    }
    .std-tab[onclick*="building"].active {
      color: #546e7a;
      border-bottom-color: #546e7a;           /* Blue-Gray — Building */
    }
    .std-tab[onclick*="glossary"].active {
      color: #5e35b1;
      border-bottom-color: #5e35b1;           /* Deep Violet — Glossary */
    }

    /* Top accent stripe on each active panel */
    #std-industry  { border-top: 3.5px solid #1565c0; border-radius: 0 var(--radius-xl) var(--radius-xl) var(--radius-xl); }
    #std-estate    { border-top: 3.5px solid var(--color-navy); border-radius: 0 var(--radius-xl) var(--radius-xl) var(--radius-xl); }
    #std-building  { border-top: 3.5px solid #546e7a; border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
    #std-glossary  { border-top: 3.5px solid #5e35b1; border-radius: 0 0 var(--radius-xl) var(--radius-xl); }

    /* ── D: Calculator Context Cards — already has border-top, reinforce ── */
    .calc-ctx-card {
      box-shadow: 0 2px 10px rgba(10,35,66,0.09);
    }

    /* ── D: Compliance rows — semantic semantic colors ── */
    .qc-row.pass td:first-child { border-left: 3px solid var(--color-success); }
    .qc-row.warn td:first-child { border-left: 3px solid #f59e0b; }
    .qc-row.fail td:first-child { border-left: 3px solid var(--color-danger); }

    /* ── A: Form fields fit the blueprint aesthetic ── */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      transition: border-color .2s, box-shadow .2s;
    }
    input[type="text"]:focus,
    input[type="number"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    select:focus,
    textarea:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(21,101,192,0.12);
      outline: none;
    }

    /* ── A: Data tables on grid background ── */
    .std-table th { background: #e8edf5; color: #1e3a5f; }
    .std-table tr:hover td { background: #f5f8ff; }
    .std-table tr.std-group td { background: #dbeafe; color: #1e3a5f; }
    .std-table tr.std-group:hover td { background: #dbeafe; }
    .std-table thead th:first-child { background: #e8edf5; }
    .std-table td:first-child { background: #fff; }
    .std-table tr:hover td:first-child { background: #f5f8ff; }
    .std-table tr.std-group td:first-child { background: #dbeafe; }

    /* ── Navbar: elevate above grid ── */
    .navbar {
      background: rgba(255,255,255,0.97);
      backdrop-filter: blur(8px);
      box-shadow: 0 1px 0 rgba(21,101,192,0.10), 0 2px 8px rgba(21,101,192,0.06);
    }

    /* ============================================================
       DARK MODE — :root[data-theme="dark"]
    ============================================================ */
    :root[data-theme="dark"] {
      /* — 10% Accent — Cyan bright on black — */
      --color-primary:       #22d3ee;
      --color-primary-dark:  #06b6d4;
      --color-primary-light: #67e8f9;
      --color-primary-50:    #0a2228;
      --color-primary-100:   #0d3040;

      /* — 30% Structure — muted on black — */
      --color-navy:          #22d3ee;
      --color-navy-light:    #0a2228;
      --color-navy-dark:     #67e8f9;

      /* — Semantic Colors — */
      --color-success:       #34d399;
      --color-success-light: #052e16;
      --color-warning:       #fbbf24;
      --color-warning-light: #1c0a00;
      --color-warning-text:  #fde68a;
      --color-danger:        #f87171;
      --color-danger-light:  #1f0505;
      --color-info:          #22d3ee;
      --color-info-light:    #0a2228;

      /* — 60% Dominant — Slate-navy surfaces (ไม่ดำสนิท) — */
      --color-white:    #111827;
      --color-gray-50:  #0b1120;
      --color-gray-100: #162032;
      --color-gray-200: #1e2d42;
      --color-gray-300: #2e3f58;
      --color-gray-400: #4a5e78;
      --color-gray-500: #7a90a8;
      --color-gray-600: #a8bcce;
      --color-gray-700: #cad8e6;
      --color-gray-800: #e2eaf2;
      --color-gray-900: #f0f5fa;

      --color-text-primary:   #f0f0f0;
      --color-text-secondary: #8a8a8a;
      --color-text-muted:     #5a5a5a;
      --color-border:         #2a2a2a;
      --color-surface:        #0d0d0d;
      --color-surface-raised: #1a1a1a;
    }

    :root[data-theme="dark"] body {
      background: #0f172a;
      color: #f0f5fa;
    }

    :root[data-theme="dark"] .navbar {
      background: rgba(11,17,32,0.97);
      box-shadow: 0 1px 0 rgba(34,211,238,0.10), 0 2px 12px rgba(0,0,0,0.6);
    }

    :root[data-theme="dark"] .main-dropdown {
      background: #1a2236;
      border-color: #2a3a54;
      box-shadow: 0 8px 40px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
    }

    :root[data-theme="dark"] .dd-col + .dd-col { border-color: #2a3a54; }
    :root[data-theme="dark"] .dd-col-hdr { color: #7a90a8; }
    :root[data-theme="dark"] .dropdown-item { color: #d4e4f4; }

    :root[data-theme="dark"] .dropdown-item:hover,
    :root[data-theme="dark"] .submenu-item:hover {
      background: rgba(34,211,238,0.10);
      color: #22d3ee;
    }

    :root[data-theme="dark"] .submenu-panel {
      background: #1a2236;
      border-color: #2a3a54;
    }

    :root[data-theme="dark"] .submenu-item { color: #d4e4f4; }

    :root[data-theme="dark"] .dropdown-divider { background: #2a3a54; }

    /* Engineering Tools module */
    :root[data-theme="dark"] .eng-tabs { background: #111827; border-color: #2a3a54; }
    :root[data-theme="dark"] .eng-tab { color: #7a90a8; }
    :root[data-theme="dark"] .eng-tab:hover,
    :root[data-theme="dark"] .eng-tab.active { color: #22d3ee; border-bottom-color: #22d3ee; }
    :root[data-theme="dark"] .eng-card { background: #1a2236; border-color: #2a3a54; box-shadow: none; }
    :root[data-theme="dark"] .eng-card h3 { color: #d4e4f4; border-color: #2a3a54; }
    :root[data-theme="dark"] .eng-field label { color: #7a90a8; }
    :root[data-theme="dark"] .eng-field input,
    :root[data-theme="dark"] .eng-field select { background: #111827; border-color: #2a3a54; color: #d4e4f4; }
    :root[data-theme="dark"] .eng-field .hint { color: #4a5e78; }
    :root[data-theme="dark"] .eng-btn-outline { background: #1a2236; color: #22d3ee; border-color: #22d3ee; }
    :root[data-theme="dark"] .eng-btn-outline:hover { background: rgba(34,211,238,0.08); }
    :root[data-theme="dark"] .eng-results { background: rgba(34,211,238,0.05); border-color: #2a3a54; }
    :root[data-theme="dark"] .eng-results-title { color: #22d3ee; }
    :root[data-theme="dark"] .eng-result-item { background: #111827; border-color: #2a3a54; }
    :root[data-theme="dark"] .eng-result-value { color: #22d3ee; }
    :root[data-theme="dark"] .eng-result-unit,
    :root[data-theme="dark"] .eng-result-label { color: #7a90a8; }
    :root[data-theme="dark"] .eng-header { background: linear-gradient(135deg, #0b1120 0%, #0d1f3c 100%); }

    /* Cost Estimator table */
    :root[data-theme="dark"] .cost-table td { background: #1a2236; color: #d4e4f4; border-color: #2a3a54; }
    :root[data-theme="dark"] .cost-table th { background: #111d30; color: #7a90a8; border-color: #2a3a54; }
    :root[data-theme="dark"] .cost-table tr:hover td { background: #1e2c44; }
    :root[data-theme="dark"] .cost-best { background: rgba(34,211,238,0.08) !important; }
    :root[data-theme="dark"] .cost-tier-low  { color: #4ade80; }
    :root[data-theme="dark"] .cost-tier-mid  { color: #60a5fa; }
    :root[data-theme="dark"] .cost-tier-high { color: #f87171; }
    :root[data-theme="dark"] .cost-kpi { background: #111d30; }
    :root[data-theme="dark"] .cost-kpi-label { color: #7a90a8; }

    /* Global modal safety net — catches JS-injected modals with hardcoded #fff */
    :root[data-theme="dark"] #tsModalContent,
    :root[data-theme="dark"] #tsDecisionModal > div,
    :root[data-theme="dark"] #tsSubmitModal > div,
    :root[data-theme="dark"] #fd-leave-modal > div,
    :root[data-theme="dark"] .calc-disclaimer-box,
    :root[data-theme="dark"] #calc-disclaimer-box,
    :root[data-theme="dark"] #calc-compare-box {
      background: #1a2236 !important;
      color: #d4e4f4 !important;
      border-color: #2a3a54 !important;
    }

    :root[data-theme="dark"] .navbar .nav-logo-text { color: #22d3ee; }
    :root[data-theme="dark"] .navbar .nav-link { color: #d0d0d0; }
    :root[data-theme="dark"] .navbar .nav-link:hover { color: #22d3ee; }
    :root[data-theme="dark"] .navbar .nav-link.active { color: #22d3ee; }

    :root[data-theme="dark"] .hero-section {
      background: linear-gradient(135deg, #0b1120 0%, #111827 60%, #0b1120 100%);
    }

    :root[data-theme="dark"] .page-section {
      background: #0f172a;
    }

    :root[data-theme="dark"] .section-alt {
      background: #111827;
    }

    :root[data-theme="dark"] .card,
    :root[data-theme="dark"] .sys-card {
      background: #141414;
      border-color: #2a2a2a;
      color: #f0f0f0;
    }

    :root[data-theme="dark"] .sys-card:hover {
      box-shadow: 0 8px 32px rgba(34,211,238,0.12);
      border-color: #22d3ee;
    }

    :root[data-theme="dark"] .sys-card-title { color: #f0f0f0; }
    :root[data-theme="dark"] .sys-card-desc  { color: #8a8a8a; }

    :root[data-theme="dark"] .tag {
      background: #2a2a2a;
      color: #d0d0d0;
    }

    :root[data-theme="dark"] .filter-bar {
      background: #0d0d0d;
      border-color: #2a2a2a;
    }

    :root[data-theme="dark"] .filter-chip {
      background: #1a1a1a;
      color: #d0d0d0;
      border-color: #3a3a3a;
    }

    :root[data-theme="dark"] .filter-chip.active,
    :root[data-theme="dark"] .filter-chip:hover {
      background: #0a2228;
      color: #22d3ee;
      border-color: #22d3ee;
    }

    :root[data-theme="dark"] .search-box input {
      background: #0d0d0d;
      border-color: #2a2a2a;
      color: #f0f0f0;
    }

    :root[data-theme="dark"] .sys-modal-bg {
      background: rgba(0,0,0,0.85);
    }

    :root[data-theme="dark"] .sys-modal {
      background: #141414;
      border-color: #2a2a2a;
    }

    :root[data-theme="dark"] .sys-modal-header {
      background: #0d0d0d;
      border-bottom-color: #2a2a2a;
    }

    :root[data-theme="dark"] .sys-modal-title { color: #f0f0f0; }
    :root[data-theme="dark"] .sys-modal-subtitle { color: #8a8a8a; }

    :root[data-theme="dark"] .detail-section-title { color: #22d3ee; }

    :root[data-theme="dark"] .detail-list li {
      background: #1a1a1a;
      color: #d0d0d0;
    }

    :root[data-theme="dark"] .sludge-info {
      background: #1a1400;
      border-color: #5a3e00;
      color: #fde68a;
    }

    :root[data-theme="dark"] .std-table th {
      background: #0a2228;
      color: #a5f3fc;
    }

    :root[data-theme="dark"] .std-table td {
      background: #141414;
      color: #d0d0d0;
      border-color: #2a2a2a;
    }

    :root[data-theme="dark"] .std-table tr:hover td {
      background: #1a1a1a;
    }

    :root[data-theme="dark"] .std-table tr.std-group td {
      background: #0a2228;
      color: #a5f3fc;
    }

    :root[data-theme="dark"] input[type="text"],
    :root[data-theme="dark"] input[type="number"],
    :root[data-theme="dark"] input[type="email"],
    :root[data-theme="dark"] select,
    :root[data-theme="dark"] textarea {
      background: #0d0d0d;
      border-color: #2a2a2a;
      color: #f0f0f0;
    }

    :root[data-theme="dark"] .btn-outline {
      border-color: #3a3a3a;
      color: #d0d0d0;
    }

    :root[data-theme="dark"] .btn-outline:hover {
      background: #1a1a1a;
      color: #f0f0f0;
    }

    :root[data-theme="dark"] .footer {
      background: #0d1f35;
      color: #94a3b8;
    }
    :root[data-theme="dark"] .footer-col h4 { color: #e2e8f0; }
    :root[data-theme="dark"] .footer-col a { color: #94a3b8; }
    :root[data-theme="dark"] .footer-col a:hover { color: #ffffff; }
    :root[data-theme="dark"] .footer-brand p { color: #94a3b8; }
    :root[data-theme="dark"] .footer-bottom { border-color: #1e3a5f; }
    :root[data-theme="dark"] .footer-bottom p { color: #64748b; }
    :root[data-theme="dark"] .footer-bottom-links a { color: #64748b; }
    :root[data-theme="dark"] .footer-bottom-links a:hover { color: #e2e8f0; }

    /* Hero — dark mode (gradient stays dark, just deepen slightly) */
    :root[data-theme="dark"] .home-hero {
      background: linear-gradient(135deg, #0a2e6e 0%, #0d47a1 52%, #004d3f 100%);
    }
    :root[data-theme="dark"] .hero-metrics { background: rgba(0,0,0,.4); }

    /* Home page sections */
    :root[data-theme="dark"] .features-section,
    :root[data-theme="dark"] .showcase-section,
    :root[data-theme="dark"] .main-content,
    :root[data-theme="dark"] #page-home {
      background: #0f172a;
    }

    :root[data-theme="dark"] .features-section {
      background:
        radial-gradient(ellipse 55% 50% at 8%  30%, rgba(34,211,238,0.06)  0%, transparent 70%),
        radial-gradient(ellipse 50% 55% at 88% 65%, rgba(34,211,238,0.04)  0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 60% 15%, rgba(34,211,238,0.03)  0%, transparent 70%),
        #0f172a;
    }

    :root[data-theme="dark"] .feature-card {
      background: rgba(20,20,20,0.90);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 2px 8px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
      color: #f1f5f9;
    }

    :root[data-theme="dark"] .feature-card:hover {
      border-color: rgba(255,255,255,0.14);
      transform: translateY(-6px) scale(1.01);
    }

    :root[data-theme="dark"] .feature-grid > .feature-card:nth-child(1):hover {
      box-shadow: 0 20px 40px rgba(96,165,250,0.22), 0 4px 12px rgba(96,165,250,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
    }
    :root[data-theme="dark"] .feature-grid > .feature-card:nth-child(2):hover {
      box-shadow: 0 20px 40px rgba(251,191,36,0.20), 0 4px 12px rgba(251,191,36,0.10), inset 0 1px 0 rgba(255,255,255,0.06);
    }
    :root[data-theme="dark"] .feature-grid > .feature-card:nth-child(3):hover {
      box-shadow: 0 20px 40px rgba(45,212,191,0.20), 0 4px 12px rgba(45,212,191,0.10), inset 0 1px 0 rgba(255,255,255,0.06);
    }
    :root[data-theme="dark"] .feature-grid > .feature-card:nth-child(4):hover {
      box-shadow: 0 20px 40px rgba(167,139,250,0.22), 0 4px 12px rgba(167,139,250,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
    }
    :root[data-theme="dark"] .feature-grid > .feature-card:nth-child(5):hover {
      box-shadow: 0 20px 40px rgba(74,222,128,0.20), 0 4px 12px rgba(74,222,128,0.10), inset 0 1px 0 rgba(255,255,255,0.06);
    }

    :root[data-theme="dark"] .feature-card h3 { color: #f1f5f9; }
    :root[data-theme="dark"] .feature-card p  { color: #94a3b8; }

    :root[data-theme="dark"] .icon-blue   { background: linear-gradient(135deg, #0a2228 0%, #141414 100%); box-shadow: 0 4px 12px rgba(34,211,238,0.25); }
    :root[data-theme="dark"] .icon-teal   { background: linear-gradient(135deg, #134e4a 0%, #141414 100%); box-shadow: 0 4px 12px rgba(45,212,191,0.25); }
    :root[data-theme="dark"] .icon-green  { background: linear-gradient(135deg, #14532d 0%, #141414 100%); box-shadow: 0 4px 12px rgba(74,222,128,0.25); }
    :root[data-theme="dark"] .icon-orange { background: linear-gradient(135deg, #422006 0%, #141414 100%); box-shadow: 0 4px 12px rgba(251,191,36,0.25); }
    :root[data-theme="dark"] .icon-purple { background: linear-gradient(135deg, #2e1065 0%, #141414 100%); box-shadow: 0 4px 12px rgba(167,139,250,0.25); }

    :root[data-theme="dark"] .section-header h2 {
      background: linear-gradient(135deg, #f1f5f9 0%, #22d3ee 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    :root[data-theme="dark"] .section-header h2 { color: #f1f5f9; }
    :root[data-theme="dark"] .section-header p  { color: #94a3b8; }
    :root[data-theme="dark"] .section-header .section-tag {
      background: #0a2228;
      color: #22d3ee;
    }

    /* Recent Activity */
    :root[data-theme="dark"] .ra-item {
      background: #141414;
      border-color: #2a2a2a;
      color: #f0f0f0;
    }

    :root[data-theme="dark"] .ra-item:hover { background: #1a1a1a; }

    /* Personalized quick links */
    :root[data-theme="dark"] .hpd-link {
      background: #141414;
      border-color: #2a2a2a;
      color: #f0f0f0;
    }

    :root[data-theme="dark"] .hpd-link:hover {
      background: #1a1a1a;
      border-color: #22d3ee;
    }

    :root[data-theme="dark"] .hpd-pending-card {
      background: linear-gradient(135deg, #1c1500, #1a1000);
      border-color: #92400e;
      border-left-color: #f59e0b;
    }
    :root[data-theme="dark"] .hpd-pending-title { color: #fcd34d; }
    :root[data-theme="dark"] .hpd-pending-sub   { color: #fbbf24; opacity: .8; }
    :root[data-theme="dark"] .btn-pending-dismiss {
      color: #fbbf24;
      border-color: #92400e;
    }

    /* Standards panel */
    :root[data-theme="dark"] .std-panel.active {
      background: #141414;
      border-color: #2a2a2a;
    }

    /* Treatment journey */
    :root[data-theme="dark"] .treatment-journey {
      background: #141414;
      border-color: #2a2a2a;
    }

    /* Troubleshoot filter bar */
    :root[data-theme="dark"] .ts-filter-bar {
      background: #141414;
      border-color: #2a2a2a;
    }

    /* Hardcoded white backgrounds in blueprint theme overrides */
    :root[data-theme="dark"] .sys-card,
    :root[data-theme="dark"] .treatment-journey,
    :root[data-theme="dark"] .ts-filter-bar,
    :root[data-theme="dark"] .ra-item,
    :root[data-theme="dark"] .std-panel > div {
      background: #141414;
    }

    :root[data-theme="dark"] .std-panel.active { background: #141414; }

    :root[data-theme="dark"] input[type="text"],
    :root[data-theme="dark"] input[type="number"],
    :root[data-theme="dark"] input[type="email"],
    :root[data-theme="dark"] input[type="password"],
    :root[data-theme="dark"] select,
    :root[data-theme="dark"] textarea {
      background: #0d0d0d;
    }

    /* Standards section */
    :root[data-theme="dark"] .standards-wrap {
      background: #141414;
      border-color: #2a2a2a;
    }

    :root[data-theme="dark"] .std-header h3 { color: #f0f0f0; }
    :root[data-theme="dark"] .std-ref { color: #5a5a5a; }

    :root[data-theme="dark"] .std-tabs {
      border-bottom-color: #2a2a2a;
    }

    :root[data-theme="dark"] .std-tab {
      color: #8a8a8a;
      background: transparent;
      border-bottom-color: transparent;
    }

    :root[data-theme="dark"] .std-tab:hover:not(.active) { color: #f0f0f0; }
    :root[data-theme="dark"] .std-tab.active { color: #22d3ee; border-bottom-color: #22d3ee; }

    :root[data-theme="dark"] .std-tab[onclick*="industry"].active { color: #22d3ee; border-bottom-color: #22d3ee; }
    :root[data-theme="dark"] .std-tab[onclick*="estate"].active   { color: #22d3ee; border-bottom-color: #22d3ee; }
    :root[data-theme="dark"] .std-tab[onclick*="building"].active { color: #8a8a8a; border-bottom-color: #8a8a8a; }
    :root[data-theme="dark"] .std-tab[onclick*="glossary"].active { color: #a78bfa; border-bottom-color: #a78bfa; }

    :root[data-theme="dark"] .std-panel.active { background: #141414; }

    :root[data-theme="dark"] .std-table th { background: #0a2228; color: #a5f3fc; }
    :root[data-theme="dark"] .std-table td { background: #141414; color: #d0d0d0; border-color: #2a2a2a; }
    :root[data-theme="dark"] .std-table td:first-child { background: #1a1a1a; box-shadow: 1px 0 0 #2a2a2a; }
    :root[data-theme="dark"] .std-table tr:hover td { background: #1a1a1a; }
    :root[data-theme="dark"] .std-table tr:hover td:first-child { background: #202020; }
    :root[data-theme="dark"] .std-table tr.std-group td { background: #0a2228; color: #a5f3fc; }
    :root[data-theme="dark"] .std-table tr.std-group td:first-child { background: #0a2228; }
    :root[data-theme="dark"] .std-table tr.std-group:hover td { background: #0d2a30; }

    :root[data-theme="dark"] .std-quickcheck { border-top-color: #2a2a2a; }
    :root[data-theme="dark"] .std-quickcheck h4 { color: #f0f0f0; }

    :root[data-theme="dark"] .qc-row.pass { background: rgba(52,211,153,0.08); }
    :root[data-theme="dark"] .qc-row.warn { background: rgba(251,191,36,0.08); }
    :root[data-theme="dark"] .qc-row.fail { background: rgba(248,113,113,0.08); }

    /* Treatment Journey animation */
    :root[data-theme="dark"] .treatment-journey {
      background: #141414;
      border-color: #2a2a2a;
    }

    :root[data-theme="dark"] .tj-title { color: #22d3ee; }

    :root[data-theme="dark"] .tj-toggle-btn {
      background: #1a1a1a;
      color: #8a8a8a;
      border-color: #3a3a3a;
    }

    :root[data-theme="dark"] .tj-toggle-btn.active {
      background: var(--color-primary);
      color: #000;
      border-color: var(--color-primary);
    }

    :root[data-theme="dark"] .tj-tank {
      background: #1a1a1a;
      border-color: #3a3a3a;
    }

    :root[data-theme="dark"] .tj-label { color: #8a8a8a; }
    :root[data-theme="dark"] .tj-pipe-dot { background: #3a3a3a; }

    /* ============================================================
       BOOKMARK STYLES
    ============================================================ */
    /* Bookmark button (card footer + modal header) */
    .sys-bm-btn {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      font-size: var(--font-size-sm);
      padding: .3rem .8rem;
      border-radius: var(--radius-md);
      border: 1.5px solid var(--color-gray-300);
      background: transparent;
      color: var(--color-gray-600);
      cursor: pointer;
      transition: all .2s;
    }

    .sys-bm-btn:hover {
      border-color: var(--color-primary);
      color: var(--color-primary);
      background: var(--color-primary-50);
    }

    .sys-bm-btn.active {
      background: #fef3c7;
      border-color: #f59e0b;
      color: #b45309;
    }

    :root[data-theme="dark"] .sys-bm-btn.active {
      background: #422006;
      border-color: #d97706;
      color: #fbbf24;
    }

    /* Filter chip for bookmarks */
    .filter-chip-bm {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
    }

    .bm-count-badge {
      background: var(--color-primary);
      color: #fff;
      font-size: .65rem;
      font-weight: 700;
      border-radius: 99px;
      padding: 0 .42rem;
      min-width: 1.1rem;
      text-align: center;
      line-height: 1.4;
    }

    .bm-count-badge:empty { display: none; }

    /* Wizard launch button in systems meta bar */
    .btn-wizard {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      background: linear-gradient(135deg, #7c3aed, #5b21b6);
      color: #fff;
      border: none;
      border-radius: var(--radius-md);
      padding: .45rem 1rem;
      font-size: var(--font-size-sm);
      font-weight: 600;
      cursor: pointer;
      transition: opacity .2s, transform .1s;
      white-space: nowrap;
    }

    .btn-wizard:hover { opacity: .88; transform: translateY(-1px); }

    /* Dark mode toggle button in navbar */
    .btn-darkmode {
      background: transparent;
      border: 1.5px solid var(--color-gray-300);
      border-radius: var(--radius-md);
      font-size: 1rem;
      padding: .3rem .55rem;
      cursor: pointer;
      line-height: 1;
      transition: background .2s, border-color .2s;
      color: inherit;
    }

    .btn-darkmode:hover {
      background: var(--color-gray-100);
      border-color: var(--color-primary);
    }

    :root[data-theme="dark"] .btn-darkmode {
      border-color: #3a3a3a;
      color: #fbbf24;
    }

    :root[data-theme="dark"] .btn-darkmode:hover {
      background: #2a2a2a;
    }

    /* ============================================================
       WIZARD MODAL STYLES
    ============================================================ */
    .wizard-bg {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      z-index: 3000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }

    .wizard-bg.show { display: flex; }

    .wizard-modal {
      background: #fff;
      border-radius: var(--radius-xl);
      width: 100%;
      max-width: 560px;
      max-height: 90vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    }

    :root[data-theme="dark"] .wizard-modal {
      background: #141414;
      color: #f0f0f0;
    }

    .wizard-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 1.25rem 1.5rem 1rem;
      border-bottom: 1px solid var(--color-gray-200);
    }

    :root[data-theme="dark"] .wizard-header { border-color: #2a2a2a; }

    .wizard-title {
      font-size: var(--font-size-lg);
      font-weight: 700;
      color: var(--color-primary);
      margin: 0 0 .2rem;
    }

    .wizard-step-indicator {
      font-size: var(--font-size-xs);
      color: var(--color-gray-500);
    }

    .wizard-progress {
      height: 4px;
      background: var(--color-gray-200);
    }

    :root[data-theme="dark"] .wizard-progress { background: #2a2a2a; }

    .wizard-progress-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--color-primary), var(--color-navy));
      transition: width .35s ease;
    }

    .wizard-body {
      flex: 1;
      overflow-y: auto;
      padding: 1.5rem;
    }

    .wizard-footer {
      display: flex;
      align-items: center;
      gap: .75rem;
      padding: 1rem 1.5rem;
      border-top: 1px solid var(--color-gray-200);
    }

    :root[data-theme="dark"] .wizard-footer { border-color: #2a2a2a; }

    .wizard-footer button {
      padding: .55rem 1.25rem;
      border-radius: var(--radius-md);
      border: 1.5px solid var(--color-gray-300);
      background: transparent;
      font-size: var(--font-size-sm);
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
      color: var(--color-gray-700);
    }

    .wizard-footer button:hover {
      background: var(--color-gray-100);
      border-color: var(--color-primary);
      color: var(--color-primary);
    }

    .wizard-footer button#wizBtnNext {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: #fff;
    }

    .wizard-footer button#wizBtnNext:hover {
      background: var(--color-primary-dark);
    }

    :root[data-theme="dark"] .wizard-footer button {
      border-color: #3a3a3a;
      color: #d0d0d0;
    }

    :root[data-theme="dark"] .wizard-footer button:hover {
      background: #2a2a2a;
    }

    :root[data-theme="dark"] .wizard-footer button#wizBtnNext {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: #fff;
    }

    /* Wizard step content */
    .wiz-step-head {
      font-weight: 700;
      font-size: var(--font-size-base);
      margin: 0 0 .4rem;
      color: var(--color-gray-900);
    }

    :root[data-theme="dark"] .wiz-step-head { color: #f1f5f9; }

    .wiz-step-sub {
      font-size: var(--font-size-sm);
      color: var(--color-gray-500);
      margin: 0 0 1.25rem;
    }

    .wiz-options {
      display: flex;
      flex-direction: column;
      gap: .6rem;
    }

    .wiz-option {
      display: flex;
      align-items: flex-start;
      gap: .85rem;
      padding: .85rem 1rem;
      border: 2px solid var(--color-gray-200);
      border-radius: var(--radius-lg);
      cursor: pointer;
      transition: border-color .18s, background .18s;
    }

    :root[data-theme="dark"] .wiz-option { border-color: #2a2a2a; background: #1a1a1a; }

    .wiz-option:hover {
      border-color: var(--color-primary-light);
      background: var(--color-primary-50);
    }

    :root[data-theme="dark"] .wiz-option:hover {
      border-color: #22d3ee;
      background: #0a2228;
    }

    .wiz-option.selected {
      border-color: var(--color-primary);
      background: var(--color-primary-50);
    }

    :root[data-theme="dark"] .wiz-option.selected {
      border-color: #22d3ee;
      background: #0a2228;
    }

    .wiz-option-icon {
      font-size: 1.4rem;
      line-height: 1;
      flex-shrink: 0;
      margin-top: .05rem;
    }

    .wiz-option-text strong {
      display: block;
      font-size: var(--font-size-sm);
      color: var(--color-gray-800);
      font-weight: 600;
    }

    :root[data-theme="dark"] .wiz-option-text strong { color: #f1f5f9; }

    .wiz-option-text span {
      font-size: var(--font-size-xs);
      color: var(--color-gray-500);
    }

    /* Wizard results */
    .wiz-results-head {
      font-weight: 700;
      font-size: var(--font-size-base);
      margin: 0 0 .3rem;
      color: var(--color-gray-900);
    }

    :root[data-theme="dark"] .wiz-results-head { color: #f1f5f9; }

    .wiz-results-sub {
      font-size: var(--font-size-sm);
      color: var(--color-gray-500);
      margin: 0 0 1.25rem;
    }

    .wiz-results {
      display: flex;
      flex-direction: column;
      gap: .75rem;
    }

    .wiz-result-item {
      display: flex;
      align-items: center;
      gap: .85rem;
      padding: .85rem 1rem;
      border: 1.5px solid var(--color-gray-200);
      border-radius: var(--radius-lg);
      cursor: pointer;
      transition: box-shadow .15s, border-color .15s;
    }

    .wiz-result-item:hover {
      border-color: var(--color-primary);
      box-shadow: 0 2px 10px rgba(21,101,192,0.10);
    }

    :root[data-theme="dark"] .wiz-result-item {
      border-color: #2a2a2a;
      background: #1a1a1a;
    }

    :root[data-theme="dark"] .wiz-result-item:hover {
      border-color: #22d3ee;
    }

    .wiz-rank {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--color-gray-400);
      min-width: 2rem;
      text-align: center;
      flex-shrink: 0;
    }

    .wiz-result-item:first-child .wiz-rank { color: #f59e0b; }
    .wiz-result-item:nth-child(2) .wiz-rank { color: var(--color-gray-400); }
    .wiz-result-item:nth-child(3) .wiz-rank { color: #b45309; }

    .wiz-result-info { flex: 1; min-width: 0; }

    .wiz-result-name {
      font-weight: 700;
      font-size: var(--font-size-sm);
      color: var(--color-gray-800);
    }

    :root[data-theme="dark"] .wiz-result-name { color: #f1f5f9; }

    .wiz-result-detail {
      font-size: var(--font-size-xs);
      color: var(--color-gray-500);
      margin-top: .15rem;
    }

    .wiz-score-wrap {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: .2rem;
      flex-shrink: 0;
      min-width: 80px;
    }

    .wiz-score-pct {
      font-size: var(--font-size-sm);
      font-weight: 700;
      color: var(--color-primary);
    }

    :root[data-theme="dark"] .wiz-score-pct { color: #22d3ee; }

    .wiz-score-bar-bg {
      width: 80px;
      height: 5px;
      background: var(--color-gray-200);
      border-radius: 99px;
      overflow: hidden;
    }

    :root[data-theme="dark"] .wiz-score-bar-bg { background: #2a2a2a; }

    .wiz-score-bar {
      height: 100%;
      border-radius: 99px;
      background: linear-gradient(90deg, var(--color-primary), var(--color-navy));
      transition: width .4s ease;
    }

    .wiz-no-result {
      text-align: center;
      color: var(--color-gray-500);
      padding: 2rem 1rem;
      font-size: var(--font-size-sm);
    }

    /* ── Footer: solid so grid doesn't bleed through ── */
    .footer { background: #0f2d4a; }

/* ============================================================
   DARK MODE — Engineering Tools (.eng-*) + Jar Test (.jt-*)
============================================================ */

/* ── Page shell ── */
:root[data-theme="dark"] #page-engineering {
  background: #000;
}
:root[data-theme="dark"] .eng-header {
  background: linear-gradient(135deg, #0a2228 0%, #0d1f1c 100%);
}

/* ── Tab bar ── */
:root[data-theme="dark"] .eng-tabs {
  background: #0d0d0d;
  border-bottom-color: #2a2a2a;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
:root[data-theme="dark"] .eng-tab {
  color: #8a8a8a;
}
:root[data-theme="dark"] .eng-tab:hover { color: #22d3ee; }
:root[data-theme="dark"] .eng-tab.active { color: #22d3ee; border-bottom-color: #22d3ee; }

/* ── Card ── */
:root[data-theme="dark"] .eng-card {
  background: #141414;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
:root[data-theme="dark"] .eng-card h3 {
  color: #f0f0f0;
  border-bottom-color: #2a2a2a;
}

/* ── Form fields ── */
:root[data-theme="dark"] .eng-field label { color: #a0a0a0; }
:root[data-theme="dark"] .eng-field .hint { color: #5a5a5a; }
:root[data-theme="dark"] .eng-field input,
:root[data-theme="dark"] .eng-field select {
  background: #1e1e1e;
  border-color: #3a3a3a;
  color: #f0f0f0;
}
:root[data-theme="dark"] .eng-field input:focus,
:root[data-theme="dark"] .eng-field select:focus {
  border-color: #22d3ee;
  box-shadow: 0 0 0 3px rgba(34,211,238,.12);
}
:root[data-theme="dark"] .eng-field input::placeholder { color: #4a4a4a; }

/* ── Buttons ── */
:root[data-theme="dark"] .eng-btn-outline {
  background: #1a1a1a;
  color: #22d3ee;
  border-color: #22d3ee;
}
:root[data-theme="dark"] .eng-btn-outline:hover { background: #0a2228; }

/* ── Results box ── */
:root[data-theme="dark"] .eng-results {
  background: linear-gradient(135deg, #0a2228, #0d1f1c);
  border-color: #164e63;
}
:root[data-theme="dark"] .eng-results-title { color: #22d3ee; }
:root[data-theme="dark"] .eng-result-item {
  background: #1a1a1a;
  border-color: #2a2a2a;
}
:root[data-theme="dark"] .eng-result-value { color: #22d3ee; }
:root[data-theme="dark"] .eng-result-unit  { color: #5a5a5a; }
:root[data-theme="dark"] .eng-result-label { color: #8a8a8a; }

/* ── Price table ── */
:root[data-theme="dark"] .eng-price-table th {
  background: #1a1a1a;
  color: #a0a0a0;
}
:root[data-theme="dark"] .eng-price-table td {
  border-top-color: #2a2a2a;
  color: #d0d0d0;
}
:root[data-theme="dark"] .eng-price-table tr:hover td { background: #202020; }

/* ── Anaerobic: FOS/TAC result cards ── */
:root[data-theme="dark"] .fosTac-ok    { background: rgba(74,222,128,.1);  border-color: #166534; }
:root[data-theme="dark"] .fosTac-warn1 { background: rgba(251,191,36,.08); border-color: #92400e; }
:root[data-theme="dark"] .fosTac-warn2 { background: rgba(249,115,22,.1);  border-color: #7c2d12; }
:root[data-theme="dark"] .fosTac-crit  { background: rgba(248,113,113,.1); border-color: #991b1b; }
:root[data-theme="dark"] .fosTac-low1  { background: rgba(96,165,250,.08); border-color: #1e40af; }
:root[data-theme="dark"] .fosTac-low2  { background: rgba(125,211,252,.08);border-color: #0c4a6e; }
:root[data-theme="dark"] .fosTac-ok    .ft-status { color: #4ade80; }
:root[data-theme="dark"] .fosTac-warn1 .ft-status { color: #fbbf24; }
:root[data-theme="dark"] .fosTac-warn2 .ft-status { color: #fb923c; }
:root[data-theme="dark"] .fosTac-crit  .ft-status { color: #f87171; }
:root[data-theme="dark"] .fosTac-low1  .ft-status { color: #60a5fa; }
:root[data-theme="dark"] .fosTac-low2  .ft-status { color: #7dd3fc; }
:root[data-theme="dark"] .fosTac-needle { background: #22d3ee; }
:root[data-theme="dark"] .ft-ratio-big { color: #f0f0f0; }
:root[data-theme="dark"] .ft-action    { color: #a0a0a0; }

/* ── Anaerobic: Inhibitor cards ── */
:root[data-theme="dark"] .inhib-card {
  background: #1a1a1a;
  border-color: #2a2a2a;
}
:root[data-theme="dark"] .inhib-card label { color: #c0c0c0; }
:root[data-theme="dark"] .inhib-card input {
  background: #252525;
  border-color: #3a3a3a;
  color: #f0f0f0;
}
:root[data-theme="dark"] .inhib-card input::placeholder { color: #4a4a4a; }
:root[data-theme="dark"] .inhib-card .in-note { color: #5a5a5a; }
:root[data-theme="dark"] .inhib-result-row.ok   { background: rgba(74,222,128,.08); }
:root[data-theme="dark"] .inhib-result-row.warn { background: rgba(251,191,36,.08); }
:root[data-theme="dark"] .inhib-result-row.crit { background: rgba(248,113,113,.1); }

/* ── Anaerobic: FOS/TAC reference table (inside <details>) ── */
:root[data-theme="dark"] details { border-color: #2a2a2a !important; }
:root[data-theme="dark"] details summary {
  background: #1a1a1a !important;
  color: #a0a0a0 !important;
}
:root[data-theme="dark"] details > div { background: #141414; }
:root[data-theme="dark"] details table tr { background: transparent !important; }
:root[data-theme="dark"] details table td { color: #d0d0d0; }

/* ──────────────────────────────────────────────────────────
   Jar Test (.jt-*)
────────────────────────────────────────────────────────── */

/* ── Sub-tabs ── */
:root[data-theme="dark"] .jt-subtabs { border-bottom-color: #2a2a2a; }
:root[data-theme="dark"] .jt-subtab  { color: #8a8a8a; }
:root[data-theme="dark"] .jt-subtab:hover  { color: #22d3ee; }
:root[data-theme="dark"] .jt-subtab.active { color: #22d3ee; border-bottom-color: #22d3ee; }

/* ── User guide ── */
:root[data-theme="dark"] .jt-guide {
  background: #111;
  border-color: #2a2a2a;
}
:root[data-theme="dark"] .jt-guide-header { color: #d0d0d0; }
:root[data-theme="dark"] .jt-guide-header:hover { background: #1a1a1a; }
:root[data-theme="dark"] .jt-guide-body { color: #c0c0c0; }
:root[data-theme="dark"] .jt-guide-section h4 { color: #22d3ee; }
:root[data-theme="dark"] .jt-guide-row { border-bottom-color: #222; }
:root[data-theme="dark"] .jt-guide-field { color: #c0c0c0; }
:root[data-theme="dark"] .jt-guide-desc  { color: #7a7a7a; }
:root[data-theme="dark"] .jt-flow-step {
  background: #1a1a1a;
  border-color: #164e63;
  color: #22d3ee;
}
:root[data-theme="dark"] .jt-flow-arrow { color: #4a4a4a; }

/* ── Context banner ── */
:root[data-theme="dark"] .jt-ctx {
  background: #0a1e2a;
  border-left-color: #0891b2;
  color: #7dd3fc;
}
:root[data-theme="dark"] .jt-ctx b { color: #22d3ee; }

/* ── Protocol card ── */
:root[data-theme="dark"] .jt-protocol-card {
  background: linear-gradient(135deg, #0a1e2a, #0a1a0e);
  border-color: #164e63;
}
:root[data-theme="dark"] .jt-protocol-title { color: #22d3ee; }
:root[data-theme="dark"] .jt-step { border-bottom-color: #1a2e3a; }
:root[data-theme="dark"] .jt-step-label { color: #e0e0e0; }
:root[data-theme="dark"] .jt-step-body  { color: #c0c0c0; }
:root[data-theme="dark"] .jt-dose-chip  { background: #0a2228; color: #a5f3fc; border-color: #164e63; }
:root[data-theme="dark"] .jt-dose-chip.optimal { background: #0a2014; color: #4ade80; border-color: #166534; }

/* ── G & Gt boxes ── */
:root[data-theme="dark"] .jt-g-grid .jt-g-box {
  background: #1a1a1a;
  border-color: #2a2a2a;
}
:root[data-theme="dark"] .jt-g-box h4    { color: #5a5a5a; }
:root[data-theme="dark"] .jt-g-val       { color: #22d3ee; }
:root[data-theme="dark"] .jt-g-unit      { color: #4a4a4a; }
:root[data-theme="dark"] .jt-g-sub       { color: #7a7a7a; }

/* ── Results table ── */
:root[data-theme="dark"] .jt-table th {
  background: #1a1a1a;
  color: #a0a0a0;
  border-bottom-color: #2a2a2a;
}
:root[data-theme="dark"] .jt-table td   { border-bottom-color: #222; }
:root[data-theme="dark"] .jt-table tr:hover td { background: #1c1c1c; }
:root[data-theme="dark"] .jt-table tr.jt-best td { background: #0a2014; }
:root[data-theme="dark"] .jt-jar-num    { color: #d0d0d0; }
:root[data-theme="dark"] .jt-table input[type=number] {
  background: #1e1e1e;
  border-color: #3a3a3a;
  color: #f0f0f0;
}
:root[data-theme="dark"] .jt-table input[type=number]:focus { border-color: #22d3ee; }

/* ── Optimal banner ── */
:root[data-theme="dark"] .jt-optimal-banner {
  background: rgba(74,222,128,.08);
  border-color: #166534;
}
:root[data-theme="dark"] .jt-optimal-label { color: #4ade80; }
:root[data-theme="dark"] .jt-optimal-val   { color: #86efac; }

/* ── Scale-up box ── */
:root[data-theme="dark"] .jt-scaleup {
  background: #1e1208;
  border-color: #7c3419;
}
:root[data-theme="dark"] .jt-scaleup-title { color: #fb923c; }
:root[data-theme="dark"] .jt-scaleup-val   { color: #fb923c; }
:root[data-theme="dark"] .jt-scaleup-lbl   { color: #7a6a5a; }

/* ── Note text ── */
:root[data-theme="dark"] .jt-note { color: #5a5a5a; }
:root[data-theme="dark"] .jt-best-badge { background: #0a2014; color: #4ade80; }

/* ── Image gallery ── */
:root[data-theme="dark"] .jt-vis-section { border-color: #2a2a2a; }
:root[data-theme="dark"] .jt-vis-header  {
  background: #1a1a1a;
  color: #d0d0d0;
}
:root[data-theme="dark"] .jt-vis-header:hover { background: #202020; }
:root[data-theme="dark"] .jt-vis-body  { background: #141414; }
:root[data-theme="dark"] .jt-vis-card  { background: #1a1a1a; border-color: #2a2a2a; }
:root[data-theme="dark"] .jt-vis-img   { background: #252525; }
:root[data-theme="dark"] .jt-vis-cap   { color: #c0c0c0; border-top-color: #2a2a2a; }
:root[data-theme="dark"] .jt-vis-cap span { color: #7a7a7a; }
:root[data-theme="dark"] .jt-vis-img-placeholder {
  background: linear-gradient(135deg, #1a1a1a, #252525);
  color: #4a4a4a;
}

/* ── pH-Metal chart ── */
:root[data-theme="dark"] .jt-metal-canvas-wrap {
  background: #141414;
  border-color: #2a2a2a;
}
:root[data-theme="dark"] .jt-ph-badge {
  background: #0a2228;
  border-color: #164e63;
  color: #22d3ee;
}
:root[data-theme="dark"] .jt-ph-slider-row label { color: #d0d0d0; }
:root[data-theme="dark"] .jt-metal-table th {
  background: #1a1a1a;
  color: #a0a0a0;
  border-bottom-color: #2a2a2a;
}
:root[data-theme="dark"] .jt-metal-table td   { border-bottom-color: #222; }
:root[data-theme="dark"] .jt-metal-table tr:hover td { background: #1c1c1c; }

/* ═══════════════════════════════════════════════════
   CALCULATOR — DARK MODE
   ═══════════════════════════════════════════════════ */

/* ── Page wrapper ── */
:root[data-theme="dark"] #page-calculator { background: #000; }

/* ── Disclaimer Modal ── */
:root[data-theme="dark"] #calc-disclaimer-box {
  background: #1a1a1a;
}
:root[data-theme="dark"] #calc-disclaimer-box h2 { color: #f87171; }
:root[data-theme="dark"] #calc-disclaimer-box ol li { color: #c0c0c0; }
:root[data-theme="dark"] .calc-disclaimer-check span { color: #c0c0c0; }

/* ── Banner ── */
:root[data-theme="dark"] #calc-banner {
  background: #2d1a00;
  border-left-color: #d97706;
  color: #fbbf24;
}

/* ── Progress Bar ── */
.calc-progress-wrap {
  margin-bottom: .75rem;
}
.calc-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .78rem;
  color: var(--color-gray-500);
  margin-bottom: .35rem;
  font-weight: 500;
}
.calc-progress-meta #calc-step-pct {
  font-weight: 700;
  color: var(--color-primary);
}
.calc-progress-track {
  height: 6px;
  background: var(--color-gray-200);
  border-radius: 99px;
  overflow: hidden;
}
.calc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary) 0%, #0288d1 100%);
  border-radius: 99px;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
:root[data-theme="dark"] .calc-progress-track { background: #2a2a2a; }
:root[data-theme="dark"] .calc-progress-meta { color: #888; }

/* ── Step Nav ── */
:root[data-theme="dark"] .calc-steps { border-color: #2a2a2a; }
:root[data-theme="dark"] .calc-step-btn { background: #111; color: #5a5a5a; }
:root[data-theme="dark"] .calc-step-btn.active { background: #1565c0; color: #fff; }
:root[data-theme="dark"] .calc-step-btn.done { background: #0a2228; color: #22d3ee; }

/* ── System Cards ── */
:root[data-theme="dark"] .calc-sys-card {
  background: #141414;
  border-color: #2a2a2a;
}
:root[data-theme="dark"] .calc-sys-card:hover {
  border-color: #22d3ee;
  background: #0a2228;
}
:root[data-theme="dark"] .calc-sys-card.selected {
  border-color: #22d3ee;
  background: #0a2228;
}
:root[data-theme="dark"] .calc-sys-card .sys-label { color: #e0e0e0; }
:root[data-theme="dark"] .calc-sys-card .sys-group { color: #6a6a6a; }
:root[data-theme="dark"] .calc-sys-card.calc-sys-soon { background: #111; border-color: #2a2a2a; }
:root[data-theme="dark"] .sys-soon-badge { background: #222; color: #5a5a5a; }
:root[data-theme="dark"] .calc-group-label { color: #5a5a5a; }

/* ── Input Form ── */
:root[data-theme="dark"] .calc-field label { color: #a0a0a0; }
:root[data-theme="dark"] .calc-field .field-unit { color: #5a5a5a; }
:root[data-theme="dark"] .calc-field .range-hint { color: #4a4a4a; }
:root[data-theme="dark"] .calc-field input,
:root[data-theme="dark"] .calc-field select {
  background: #1e1e1e;
  border-color: #3a3a3a;
  color: #f0f0f0;
}
:root[data-theme="dark"] .calc-field input:focus,
:root[data-theme="dark"] .calc-field select:focus {
  border-color: #22d3ee;
  background: #0a2228;
  box-shadow: 0 0 0 3px rgba(34,211,238,.12);
}
:root[data-theme="dark"] .calc-field input.is-valid  { background: #0a1f0a; border-color: #4ade80; }
:root[data-theme="dark"] .calc-field input.is-warning { background: #1f1400; border-color: #fbbf24; }
:root[data-theme="dark"] .calc-field input.is-error  { background: #1f0808; border-color: #f87171; }

/* ── DB Selector ── */
:root[data-theme="dark"] .calc-db-row label { color: #a0a0a0; }
:root[data-theme="dark"] .calc-db-row select {
  background: #1e1e1e;
  border-color: #3a3a3a;
  color: #f0f0f0;
}

/* ── Buttons ── */
:root[data-theme="dark"] .calc-btn-example { border-color: #22d3ee; color: #22d3ee; }
:root[data-theme="dark"] .calc-btn-example:hover { background: #0a2228; }
:root[data-theme="dark"] .btn-calc-back { background: #1a1a1a; color: #d0d0d0; }
:root[data-theme="dark"] .btn-calc-back:hover { background: #252525; }
:root[data-theme="dark"] .btn-calc-next:disabled { background: #2a2a2a; color: #5a5a5a; }
:root[data-theme="dark"] .btn-calc-reset { border-color: #3a3a3a; color: #5a5a5a; }
:root[data-theme="dark"] .btn-calc-reset:hover { background: #1a1a1a; border-color: #5a5a5a; }

/* ── Nitrification Toggle ── */
:root[data-theme="dark"] .calc-nitri-label { color: #4ade80; }

/* ── Limit Notice ── */
:root[data-theme="dark"] .calc-limit-notice {
  background: #2a0808;
  border-color: #7f1d1d;
  color: #fca5a5;
}

/* ── USS Spreadsheet ── */
:root[data-theme="dark"] .uss-wrap { border-color: #2a2a2a; }
:root[data-theme="dark"] .uss-title { background: #0d1f3c; color: #cce0ff; }
:root[data-theme="dark"] .uss-instr {
  background: #0a1f3c;
  color: #93c5fd;
  border-bottom-color: #1e3a6a;
}
:root[data-theme="dark"] .uss-sec-hdr { background: #132040; color: #bfdbfe; }
:root[data-theme="dark"] .uss-sec-hdr .uss-sec-num { background: #1e3a6a; color: #93c5fd; }
:root[data-theme="dark"] .uss-tbl tr:nth-child(even) { background: #161616; }
:root[data-theme="dark"] .uss-tbl tr:hover { background: #1c1c1c; }
:root[data-theme="dark"] .uss-lbl { color: #c0c0c0; }
:root[data-theme="dark"] .uss-lbl-th { color: #6a6a6a; }
:root[data-theme="dark"] .uss-eq { color: #4a4a4a; }
:root[data-theme="dark"] .uss-unit { color: #6a6a6a; }
:root[data-theme="dark"] .uss-range { color: #4a4a4a; }
:root[data-theme="dark"] .uss-inp {
  background: #0a2040;
  border-color: #1d4ed8;
  color: #e0f2fe;
}
:root[data-theme="dark"] .uss-inp:focus {
  border-color: #3b82f6;
  background: #0d1f3c;
  box-shadow: 0 0 0 3px rgba(59,130,246,.2);
}
:root[data-theme="dark"] .uss-calc { background: #1f1a00; border-color: #92400e; color: #fde68a; }
:root[data-theme="dark"] .uss-calc.ok  { background: #052e16; border-color: #166534; color: #4ade80; }
:root[data-theme="dark"] .uss-calc.warn { background: #3b0a0a; border-color: #7f1d1d; color: #fca5a5; }
:root[data-theme="dark"] .uss-calc.hi  { background: #0a1f3c; border-color: #1d4ed8; color: #93c5fd; }
:root[data-theme="dark"] .uss-sub-hdr { background: #0f1d3a; color: #93c5fd; border-top-color: #1a2e5a; }
:root[data-theme="dark"] .uss-note { color: #4a4a4a; }
:root[data-theme="dark"] .uss-divider { border-top-color: #222; }

/* ============================================================
   ACCESSIBILITY — Focus Visible Ring (WCAG 2.4.7 Level AA)
   ใช้ :focus-visible เพื่อแสดง outline เฉพาะ keyboard nav
   ไม่ขึ้นเมื่อคลิกด้วย mouse
============================================================ */
*:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}
/* Elements ที่มี box-shadow focus ring อยู่แล้ว — ไม่ต้องซ้ำ */
.navbar-search input:focus-visible,
.form-input:focus-visible,
.admin-form-group input:focus-visible,
.admin-form-group select:focus-visible,
.admin-form-group textarea:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(21,101,192,0.25) !important;
}

/* Dark mode — focus ring ใช้สี cyan แทน navy ให้ contrast เพียงพอ */
:root[data-theme="dark"] *:focus-visible {
  box-shadow: 0 0 0 3px rgba(34,211,238,0.35) !important;
  outline-color: #22d3ee;
}

/* ============================================================
   RESPONSIVE — 480px Breakpoint (รองรับ 375px mobile)
   วิศวกรภาคสนามใช้ mobile — WCAG 2.5.5 Touch Target
============================================================ */
@media (max-width: 480px) {

  /* Hero — mobile */
  .hero-headline { font-size: 1.5rem; }
  .hero-sub { font-size: .82rem; }
  .hero-inner { padding: 2rem var(--space-4) 1.5rem; }
  .hero-metric { padding: 0 1.1rem; }
  .metric-num { font-size: 1.3rem; }
  .metric-label { font-size: .62rem; }

  /* Systems Filter Bar — compact horizontal scroll on mobile */
  .systems-filter-bar {
    padding: var(--space-2) 0 !important;
  }
  .systems-filter-bar .filter-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-2) !important;
    padding: var(--space-1) var(--space-3) !important;
    align-items: center !important;
  }
  .systems-filter-bar .filter-inner::-webkit-scrollbar { display: none; }
  .systems-filter-bar .filter-label { display: none !important; }
  .systems-filter-bar .filter-divider { display: none !important; }
  .systems-filter-bar .filter-chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--space-2) !important;
    flex-shrink: 0;
  }
  .systems-filter-bar .filter-chip {
    font-size: .72rem !important;
    padding: .28rem .7rem !important;
    white-space: nowrap !important;
    flex-shrink: 0;
  }
  .systems-filter-bar .systems-search-wrap {
    flex-shrink: 0;
    min-width: 120px;
  }

  /* Navigation — Mobile dropdown (2-column compact) */
  .dropdown-item, .submenu-item { min-height: 44px; }

  .main-dropdown {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    width: 100% !important;
    max-height: calc(88vh - var(--navbar-height));
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    border-top: 1px solid var(--color-gray-200);
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    padding: var(--space-2);
  }

  /* On mobile: collapse to 2 columns, hide descriptions */
  .dd-cols-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  /* Last column spans both on small screens */
  .dd-col:last-child {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid var(--color-gray-100);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .dd-col:last-child .dd-col-hdr { grid-column: 1 / -1; }

  .dd-col + .dd-col { border-left: 1px solid var(--color-gray-100); }
  .dd-col:nth-child(2) { border-left: 1px solid var(--color-gray-100); }
  .dd-col:nth-child(3) { border-left: none; border-top: 1px solid var(--color-gray-100); }
  .dd-col:nth-child(4) { border-left: 1px solid var(--color-gray-100); border-top: 1px solid var(--color-gray-100); }

  .dd-col-hdr {
    font-size: .62rem !important;
    padding: var(--space-2) var(--space-2) var(--space-1) !important;
  }

  /* Hide descriptions on mobile to save space */
  .dd-item-desc { display: none !important; }

  .dd-col .dropdown-item {
    font-size: .72rem;
    padding: var(--space-2) var(--space-2);
    min-height: 36px;
    gap: var(--space-2);
  }

  .dd-col .item-icon img { width: 16px !important; height: 16px !important; }
  .dd-col .item-icon { width: 16px; font-size: .9rem; }

  /* Calculator Step Bar — wrap เมื่อหน้าจอแคบ */
  .calc-steps { flex-wrap: wrap; border-radius: var(--radius-lg); }
  .calc-step-btn {
    flex: 0 0 auto;
    min-width: 80px;
    min-height: 44px;
    font-size: .7rem;
    padding: .6rem .4rem;
  }

  /* Calculator System Cards — 1 คอลัมน์ */
  .calc-system-grid { grid-template-columns: 1fr 1fr !important; }

  /* Documents Grid — 1 คอลัมน์ */
  .doc-grid { grid-template-columns: 1fr !important; }
  .doc-card { min-width: unset; }

  /* Flow Diagram Sidebar — แคบลงเพื่อให้ canvas มีพื้นที่ */
  .fd-sidebar { width: 160px !important; min-width: 160px !important; }
  .fd-icon-item {
    min-height: 44px;
    padding: .5rem .4rem;
  }

  /* Troubleshoot Wizard — 2 คอลัมน์ */
  .ts-wiz-grid { grid-template-columns: 1fr 1fr !important; }

  /* Forms — full width */
  .systems-search-wrap { max-width: 100% !important; min-width: unset !important; }
  .qc-field input { width: 100% !important; }

  /* Mobile: flatten Workspace submenu — no hover/toggle needed */
  .dropdown-submenu .submenu-panel {
    display: block !important;
    position: static;
    left: auto;
    top: auto;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin: 0;
  }
  .dropdown-submenu > .dropdown-item .item-arrow { display: none; }
  .submenu-item {
    padding-left: 2.5rem;
    background: rgba(21,101,192,.04);
    border-left: 2px solid rgba(21,101,192,.15);
    margin-left: .5rem;
    border-radius: 0;
    font-size: .875rem;
  }

  /* Thai body text */
  body { line-height: 1.8; }
  .text-thai-body { line-height: 1.9; }
}
:root[data-theme="dark"] .uss-criteria-tbl tr:nth-child(even) { background: #161616; }

/* ── Compare Panel ── */
:root[data-theme="dark"] #calc-compare-panel { background: #141414; border-color: #2a2a2a; }
:root[data-theme="dark"] .cmp-group-label { color: #5a5a5a; }
:root[data-theme="dark"] .btn-cmp { background: #0a1f3c; color: #93c5fd; border-color: #1d4ed8; }
:root[data-theme="dark"] .btn-cmp:hover { background: #0d2a50; }
:root[data-theme="dark"] .btn-cmp.active { background: #1565c0; color: #fff; border-color: #1565c0; }
:root[data-theme="dark"] .btn-print { background: #052e16; color: #4ade80; border-color: #166534; }
:root[data-theme="dark"] .btn-print:hover { background: #063a1c; }
:root[data-theme="dark"] .cmp-chip-empty { background: #1a1a1a; color: #5a5a5a; }

/* ── Compare Modal ── */
:root[data-theme="dark"] #calc-compare-box { background: #141414; }
:root[data-theme="dark"] .cmp-tbl th { background: #0d1f3c; color: #93c5fd; }
:root[data-theme="dark"] .cmp-tbl th.sys-col { background: #0a1830; }
:root[data-theme="dark"] .cmp-tbl td { border-bottom-color: #222; color: #d0d0d0; }
:root[data-theme="dark"] .cmp-tbl tr:nth-child(even) td { background: #161616; }
:root[data-theme="dark"] .cmp-tbl .cmp-sec { background: #0d1f3c; color: #93c5fd; }
:root[data-theme="dark"] .cmp-na { color: #3a3a3a; }

/* ── Formula Inline Panel ── */
:root[data-theme="dark"] .formula-inline-panel {
  border-color: #1d4ed8;
  border-top-color: #22d3ee;
}
:root[data-theme="dark"] .formula-inline-hdr { background: #0d1f3c; color: #bfdbfe; }
:root[data-theme="dark"] .formula-inline-tbl tr:nth-child(even) { background: #161616; }
:root[data-theme="dark"] .fi-rhs { color: #93c5fd; }
:root[data-theme="dark"] .fi-unit { color: #5a5a5a; }
:root[data-theme="dark"] .fi-note { color: #4a4a4a; }

/* ── Unit Ref Panel ── */
:root[data-theme="dark"] .unit-ref-panel { background: #0a1f3c; border-color: #1d4ed8; }
:root[data-theme="dark"] .unit-ref-panel summary { color: #93c5fd; }
:root[data-theme="dark"] .unit-ref-tbl th { background: #0d1f3c; color: #bfdbfe; }
:root[data-theme="dark"] .unit-ref-tbl td { border-bottom-color: #222; color: #a0a0a0; }
:root[data-theme="dark"] .unit-ref-tbl tr:nth-child(even) td { background: #0d1830; }
:root[data-theme="dark"] .unit-ref-tbl td:first-child { color: #93c5fd; }

/* ── Preflight Validation ── */
:root[data-theme="dark"] .pf-errors .pf-hdr { background: #3b0a0a; color: #fca5a5; }
:root[data-theme="dark"] .pf-errors .pf-item { background: #2a0808; color: #fca5a5; }
:root[data-theme="dark"] .pf-warns .pf-hdr  { background: #2a1600; color: #fde68a; }
:root[data-theme="dark"] .pf-warns .pf-item  { background: #1f1000; color: #fbbf24; }

/* ── Live Calculation Panel ── */
:root[data-theme="dark"] #calc-live-panel {
  background: #0a1a0a;
  border-color: #166534;
  border-top-color: #15803d;
}
:root[data-theme="dark"] .live-panel-hdr { color: #4ade80; }
:root[data-theme="dark"] .live-chip { background: #1a1a1a; border-color: #2a2a2a; }
:root[data-theme="dark"] .lc-val { color: #e0e0e0; }
:root[data-theme="dark"] .lc-unit,
:root[data-theme="dark"] .lc-lbl { color: #5a5a5a; }
:root[data-theme="dark"] .live-chip.lc-pass { background: #052e16; border-color: #166534; }
:root[data-theme="dark"] .live-chip.lc-pass .lc-val { color: #4ade80; }
:root[data-theme="dark"] .live-chip.lc-warn { background: #2a1600; border-color: #92400e; }
:root[data-theme="dark"] .live-chip.lc-warn .lc-val { color: #fbbf24; }
:root[data-theme="dark"] .live-chip.lc-fail { background: #3b0a0a; border-color: #7f1d1d; }
:root[data-theme="dark"] .live-chip.lc-fail .lc-val { color: #fca5a5; }
:root[data-theme="dark"] .btn-live-toggle { background: #052e16; color: #4ade80; border-color: #166534; }
:root[data-theme="dark"] .btn-live-toggle.active { background: #15803d; border-color: #15803d; }

/* ── Effluent Compliance Panel ── */
:root[data-theme="dark"] .calc-compliance-panel { border-color: #2a2a2a; }
:root[data-theme="dark"] .cpl-tbl th { background: #0d1f3c; color: #bfdbfe; }
:root[data-theme="dark"] .cpl-tbl td { border-bottom-color: #222; }
:root[data-theme="dark"] .cpl-param { color: #e0e0e0; }
:root[data-theme="dark"] .cpl-unit  { color: #5a5a5a; }
:root[data-theme="dark"] .cpl-limit { color: #a0a0a0; }
:root[data-theme="dark"] .cpl-desc  { color: #5a5a5a; }
:root[data-theme="dark"] .cpl-note  { background: #141414; border-top-color: #2a2a2a; color: #6a6a6a; }

/* ── Design Check Panel ── */
:root[data-theme="dark"] .dc-panel { border-color: #2a2a2a; }
:root[data-theme="dark"] .dc-chip { background: #1a1a1a; border-color: #2a2a2a; }
:root[data-theme="dark"] .dc-lbl  { color: #5a5a5a; }
:root[data-theme="dark"] .dc-chip.dc-pass { border-color: #166534; }
:root[data-theme="dark"] .dc-chip.dc-pass .dc-val   { color: #4ade80; }
:root[data-theme="dark"] .dc-chip.dc-pass .dc-range { color: #4ade80; }
:root[data-theme="dark"] .dc-chip.dc-warn { border-color: #92400e; }
:root[data-theme="dark"] .dc-chip.dc-warn .dc-val   { color: #fbbf24; }
:root[data-theme="dark"] .dc-chip.dc-warn .dc-range { color: #d97706; }
:root[data-theme="dark"] .dc-chip.dc-fail { border-color: #7f1d1d; }
:root[data-theme="dark"] .dc-chip.dc-fail .dc-val   { color: #fca5a5; }
:root[data-theme="dark"] .dc-chip.dc-fail .dc-range { color: #f87171; }

/* ── Context Card ── */
:root[data-theme="dark"] .calc-ctx-card {
  background: #141414;
  border-color: #2a2a2a;
  border-top-color: #22d3ee;
}
:root[data-theme="dark"] .calc-ctx-hdr { background: #0d1f3c; color: #bfdbfe; }

/* ── S2 Group Headers ── */
:root[data-theme="dark"] .s2-group-hdr.influent { background: #062030; color: #22d3ee; border-color: #0284c7; }
:root[data-theme="dark"] .s2-group-hdr.target   { background: #1f1000; color: #fbbf24; border-color: #d97706; }
:root[data-theme="dark"] .s2-group-hdr.design   { background: #0a1f3c; color: #93c5fd; border-color: #1565c0; }
:root[data-theme="dark"] details.s2-kinetics > summary { background: #1a1a1a; color: #a0a0a0; }
:root[data-theme="dark"] .s2-kinetics-preview { color: #5a5a5a; }

/* ── New Form Card ── */
:root[data-theme="dark"] .uss-form-card { background: #141414; border-color: #2a2a2a; }
:root[data-theme="dark"] .uss-form-card h3 { background: #0d1f3c; color: #bfdbfe; }

/* ── New KPI / Result Classes ── */
:root[data-theme="dark"] .calc-kpi { background: #0a1f3c; border-color: #1d4ed8; }
:root[data-theme="dark"] .calc-kpi-val { color: #22d3ee; }
:root[data-theme="dark"] .calc-kpi-lbl { color: #6a6a6a; }
:root[data-theme="dark"] .calc-section-card { background: #141414; border-color: #2a2a2a; }
:root[data-theme="dark"] .calc-section-card h3 { background: #0d1f3c; color: #bfdbfe; }
:root[data-theme="dark"] .calc-res-table td { border-bottom-color: #2a2a2a; }
:root[data-theme="dark"] .calc-res-table tr:nth-child(even) td { background: #1a1a1a; }
:root[data-theme="dark"] .calc-res-table td:first-child { color: #a0a0a0; }
:root[data-theme="dark"] .calc-res-table td:nth-child(2) { background: #1f1a00; color: #fde68a; }
:root[data-theme="dark"] .calc-res-table td:last-child { color: #5a5a5a; }
:root[data-theme="dark"] .calc-source-note {
  background: #0a1f3c;
  border-color: #1d4ed8;
  color: #93c5fd;
}

/* ============================================================
   FONT SIZE SCALING
============================================================ */
:root[data-fontsize="sm"] { font-size: 14px; }
:root[data-fontsize="md"] { font-size: 16px; }
:root[data-fontsize="lg"] { font-size: 18px; }

/* ============================================================
   COMPACT MODE
============================================================ */
:root[data-compact="true"] {
  --space-3:  0.5rem;
  --space-4:  0.75rem;
  --space-5:  1rem;
  --space-6:  1.125rem;
  --space-8:  1.5rem;
  --space-10: 2rem;
  --space-12: 2.25rem;
  --navbar-height: 52px;
}
:root[data-compact="true"] .navbar { height: 52px; min-height: 52px; }
:root[data-compact="true"] .page { padding-top: 52px; }
:root[data-compact="true"] .account-card { padding: var(--space-4); }
:root[data-compact="true"] .card { padding: var(--space-4); }
:root[data-compact="true"] .system-card { padding: var(--space-4); }
:root[data-compact="true"] .ts-card { padding: var(--space-4); }
:root[data-compact="true"] .btn { padding: 0.35rem 0.85rem; font-size: 0.82rem; }
:root[data-compact="true"] .btn-sm { padding: 0.25rem 0.6rem; font-size: 0.78rem; }
:root[data-compact="true"] .container { padding-left: var(--space-4); padding-right: var(--space-4); }

/* ============================================================
   PAGE TRANSITION
============================================================ */
.page {
  animation: none;
}
.page.page-enter {
  animation: pageEnter 220ms ease forwards;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Appearance settings card ── */
.appearance-card { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); padding: var(--space-5); margin-bottom: var(--space-4); }
:root[data-theme="dark"] .appearance-card { background: #1a1a1a; border-color: #2a2a2a; }
.appearance-card h3 { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-gray-800); margin: 0 0 var(--space-4); }
:root[data-theme="dark"] .appearance-card h3 { color: #e0e0e0; }
.appearance-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-gray-100); }
:root[data-theme="dark"] .appearance-row { border-bottom-color: #2a2a2a; }
.appearance-row:last-child { border-bottom: none; padding-bottom: 0; }
.appearance-row-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-gray-700); }
:root[data-theme="dark"] .appearance-row-label { color: #c0c0c0; }
.appearance-row-sub { font-size: var(--font-size-xs); color: var(--color-gray-500); margin-top: 2px; }
.font-size-btns { display: flex; gap: var(--space-2); }
.font-size-btn { border: 1.5px solid var(--color-gray-300); background: transparent; border-radius: var(--radius-md); padding: 0.3rem 0.75rem; cursor: pointer; font-family: var(--font-family); color: var(--color-gray-600); transition: var(--transition-fast); }
.font-size-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.font-size-btn.active { border-color: var(--color-primary); background: var(--color-primary); color: #fff; font-weight: 600; }
:root[data-theme="dark"] .font-size-btn { border-color: #444; color: #aaa; }
:root[data-theme="dark"] .font-size-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ============================================================
   TROUBLESHOOT CARDS — DARK MODE
============================================================ */
:root[data-theme="dark"] .ts-card { background: #1a1a1a; border-color: #2a2a2a; border-top-color: var(--color-warning); }
:root[data-theme="dark"] .ts-card--high  { border-top-color: var(--color-danger); }
:root[data-theme="dark"] .ts-card--low   { border-top-color: var(--color-success); }
:root[data-theme="dark"] .ts-card:hover  { box-shadow: 0 8px 28px rgba(0,0,0,.45); }
:root[data-theme="dark"] .ts-card-body   { background: #1a1a1a; }
:root[data-theme="dark"] .ts-card-title  { color: #e2e8f0; }
:root[data-theme="dark"] .ts-card-cause  { color: #94a3b8; }
:root[data-theme="dark"] .ts-card-category { color: #64b5f6; }
:root[data-theme="dark"] .ts-card-footer { background: #141414; border-top-color: #2a2a2a; }
:root[data-theme="dark"] .ts-card-image  { background: #111; }
:root[data-theme="dark"] .ts-system-tag  { background: #1e293b; color: #94a3b8; border-color: #2a2a2a; }
:root[data-theme="dark"] #tsModalContent { background: #1a1a1a !important; color: #e2e8f0; }
:root[data-theme="dark"] #tsSubmitModal > div,
:root[data-theme="dark"] #tsDecisionModal > div { background: #1a1a1a !important; color: #e2e8f0; }

/* ============================================================
   PRICING PAGE — DARK MODE
============================================================ */
:root[data-theme="dark"] #page-pricing { background: #0a0a0a; }
:root[data-theme="dark"] .pricing-hero h1 { color: #e2e8f0; }
:root[data-theme="dark"] .pricing-hero p  { color: #94a3b8; }

/* Cards */
:root[data-theme="dark"] .pricing-card { background: #1a1a1a; border-color: #2a2a2a; }
:root[data-theme="dark"] .pricing-card:hover { border-color: #3b82f6; box-shadow: 0 8px 32px rgba(0,0,0,.5); transform: translateY(-2px); }
:root[data-theme="dark"] .pricing-card.featured { background: linear-gradient(180deg, #0d1f3c 0%, #1a1a1a 100px); border-color: #3b82f6; box-shadow: 0 8px 40px rgba(59,130,246,.25); }
:root[data-theme="dark"] .pricing-plan-name { color: #e2e8f0; }
:root[data-theme="dark"] .pricing-plan-desc { color: #94a3b8; }
:root[data-theme="dark"] .pricing-price-amount { color: #64b5f6; }
:root[data-theme="dark"] .pricing-price-unit   { color: #64748b; }
:root[data-theme="dark"] .pricing-price-note   { color: #64748b; }
:root[data-theme="dark"] .pricing-features { border-top-color: #2a2a2a; }
:root[data-theme="dark"] .pricing-features li { color: #94a3b8; }
:root[data-theme="dark"] .pricing-features li.pf-no { color: #475569; }
:root[data-theme="dark"] .pricing-cta-outline { border-color: #3a3a3a; color: #d0d0d0; }
:root[data-theme="dark"] .pricing-cta-outline:hover { background: #1a1a1a; border-color: #5a5a5a; }
:root[data-theme="dark"] .pricing-cta-disabled { background: #1a1a1a; color: #4a4a4a; }

/* Compare table */
:root[data-theme="dark"] .pricing-compare h2 { color: #e2e8f0; }
:root[data-theme="dark"] .compare-table th { background: #141414; color: #a0a0a0; border-bottom-color: #2a2a2a; }
:root[data-theme="dark"] .compare-table td { border-bottom-color: #222; color: #d0d0d0; }
:root[data-theme="dark"] .compare-table tr:hover td { background: #1c1c1c; }
:root[data-theme="dark"] .compare-table .section-row td { background: #0d1f3c; color: #93c5fd; }

/* FAQ */
:root[data-theme="dark"] .pricing-faq h2 { color: #e2e8f0; }
:root[data-theme="dark"] .pf-item { border-color: #2a2a2a; }
:root[data-theme="dark"] .pf-q { color: #d0d0d0; }
:root[data-theme="dark"] .pf-q:hover { background: #1a1a1a; }
:root[data-theme="dark"] .pf-a { color: #94a3b8; border-top-color: #2a2a2a; }

/* Contact CTA */
:root[data-theme="dark"] .pricing-contact { background: linear-gradient(135deg, #0d1f3c, #0d2b26); }

/* ============================================================
   HERO BANNERS — DARK MODE (all pages)
============================================================ */

/* Systems page hero */
:root[data-theme="dark"] .systems-hero {
  background: linear-gradient(135deg, #0d1a5c 0%, #0a2a35 60%, #003a28 100%);
}

/* Troubleshoot hero */
:root[data-theme="dark"] .ts-hero {
  background: linear-gradient(135deg, #0d2060 0%, #003a2a 100%);
}

/* Documents hero */
:root[data-theme="dark"] .doc-hero {
  background: linear-gradient(135deg, #0a1f5c 0%, #003d2c 100%);
}

/* Glossary hero */
:root[data-theme="dark"] .gls-hero {
  background: linear-gradient(135deg, #0f1f6a 0%, #093545 100%);
}
:root[data-theme="dark"] .gls-search-wrap {
  background: rgba(20,20,20,.92);
  border-color: rgba(255,255,255,.15);
}
:root[data-theme="dark"] .gls-search-wrap input {
  background: transparent;
  color: #f0f0f0;
}
:root[data-theme="dark"] .gls-search-wrap input::placeholder { color: #5a5a5a; }

/* About/Legal hero */
:root[data-theme="dark"] .about-hero {
  background: linear-gradient(135deg, #0d2060 0%, #003a2a 100%);
}

/* Personalized quick links section */
:root[data-theme="dark"] #homePersonalDash {
  background: linear-gradient(135deg, #050f1f 0%, #071410 100%);
  border-top-color: #1a1a1a;
}

/* ============================================================
   RECENT ACTIVITY CARDS — DARK MODE
============================================================ */
:root[data-theme="dark"] .recent-activity-section {
  background: #080808;
  border-top-color: #1a1a1a;
}
:root[data-theme="dark"] .ra-header h2   { color: #e2e8f0; }
:root[data-theme="dark"] .ra-header .section-tag { color: #22d3ee; }
:root[data-theme="dark"] .ra-card {
  background: #1a1a1a;
  border-color: #2a2a2a;
}
:root[data-theme="dark"] .ra-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
}
:root[data-theme="dark"] .ra-label  { color: #e2e8f0; }
:root[data-theme="dark"] .ra-type   { color: #64748b; }
:root[data-theme="dark"] .ra-detail { color: #64748b; }
:root[data-theme="dark"] .ra-time   { color: #475569; }
:root[data-theme="dark"] .ra-icon   { background: #252525; }

/* ============================================================
   SKELETON — DARK MODE
============================================================ */
:root[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #1e1e1e 25%, #2c2c2c 50%, #1e1e1e 75%);
  background-size: 400% 100%;
}
:root[data-theme="dark"] .skeleton-card {
  background: #141414;
  border-color: #2a2a2a;
}

/* ── SBR Phase Guide — dark mode ── */
:root[data-theme="dark"] .sbr-phase-guide { background: #0d0d0d; border-top-color: #2a2a2a; }
:root[data-theme="dark"] .sbr-phase-guide > summary { color: #93c5fd; }
:root[data-theme="dark"] .spg-phase { background: #141414; border-color: #2a2a2a; }
:root[data-theme="dark"] .spg-phase-name { color: #f1f5f9; }
:root[data-theme="dark"] .spg-phase-desc { color: #94a3b8; }
:root[data-theme="dark"] .spg-up  { background: #052e16; color: #4ade80; }
:root[data-theme="dark"] .spg-dn  { background: #2a1600; color: #fbbf24; }
:root[data-theme="dark"] .spg-divider { border-top-color: #2a2a2a; }
:root[data-theme="dark"] .spg-fix-title { color: #c084fc; }
:root[data-theme="dark"] .spg-fix-table td { border-bottom-color: #1e1e1e; color: #d0d0d0; }
:root[data-theme="dark"] .spg-fix-table td:first-child { color: #f87171; }

/* O&G warning banners — dark mode */
:root[data-theme="dark"] .uss-og-ok { background: #052e16; border-color: #166534; color: #4ade80; }
:root[data-theme="dark"] .uss-og-warn { background: #2a1600; border-color: #b45309; color: #fbbf24; }
:root[data-theme="dark"] .uss-og-warn small { color: #fcd34d; }

/* ============================================================
   DOCUMENTS — DARK MODE
============================================================ */
/* .doc-card อยู่ใน wastewater.css */
:root[data-theme="dark"] .doc-card {
  background: #1a1a1a;
  border-color: #2a2a2a;
  color: #e2e8f0;
}
:root[data-theme="dark"] .doc-card:hover {
  background: #222;
  box-shadow: 0 6px 24px rgba(0,0,0,.4) !important;
}
/* .doc-tab, .doc-search-input, .doc-skeleton — injected via documents.js */
:root[data-theme="dark"] .doc-tab {
  background: #1a1a1a;
  border-color: #2a2a2a;
  color: #94a3b8;
}
:root[data-theme="dark"] .doc-tab:hover { border-color: #22d3ee; color: #22d3ee; }
:root[data-theme="dark"] .doc-tab.active { background: #0a2228; color: #22d3ee; border-color: #22d3ee; }
:root[data-theme="dark"] .doc-search-input {
  background: #1e1e1e;
  color: #e2e8f0;
  border-color: #3a3a3a;
}
:root[data-theme="dark"] .doc-search-input:focus { border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34,211,238,.12); }
:root[data-theme="dark"] .doc-skeleton {
  background: #1a1a1a;
  border-color: #2a2a2a;
}
:root[data-theme="dark"] .doc-skeleton-line {
  background: linear-gradient(90deg, #1e1e1e 25%, #2c2c2c 50%, #1e1e1e 75%);
  background-size: 200% 100%;
}

/* — Viewer modal — */
:root[data-theme="dark"] .doc-viewer-content {
  background: #141414;
}
:root[data-theme="dark"] .doc-viewer-header {
  background: #0a0a0a !important;
  color: #e2e8f0;
  border-bottom: 1px solid #2a2a2a;
}
:root[data-theme="dark"] .doc-viewer-body {
  background: #0d0d0d;
}
:root[data-theme="dark"] .doc-viewer-footer {
  background: #141414;
  border-top-color: #2a2a2a;
}

/* — Blurred premium overlay — */
:root[data-theme="dark"] .doc-blur-cta {
  background: rgba(10,10,10,.78);
}
:root[data-theme="dark"] .doc-blur-cta h3 { color: #e2e8f0; }
:root[data-theme="dark"] .doc-blur-cta p  { color: #8a8a8a; }

/* — Plan badges — */
:root[data-theme="dark"] .doc-plan-free { background: #052e16; color: #4ade80; }
:root[data-theme="dark"] .doc-plan-paid { background: #1c0a00; color: #fbbf24; }

/* — Filter select — */
:root[data-theme="dark"] .doc-filter-select {
  background: #1e1e1e;
  border-color: #3a3a3a;
  color: #e2e8f0;
}
:root[data-theme="dark"] .doc-filter-select:focus { border-color: #22d3ee; }

/* — Results count — */
:root[data-theme="dark"] .doc-results-count        { color: #5a5a5a; }
:root[data-theme="dark"] .doc-results-count strong { color: #d0d0d0; }

/* — Card action divider + skeleton footer — */
:root[data-theme="dark"] .doc-card-actions    { border-top-color: #2a2a2a; }
:root[data-theme="dark"] .doc-skeleton-footer { border-top-color: #2a2a2a; }

/* — Page image shadow — */
:root[data-theme="dark"] .doc-page-img { box-shadow: 0 2px 16px rgba(0,0,0,.55); }

/* ============================================================
   FLOW DIAGRAM — DARK MODE
============================================================ */

/* Page background + canvas */
:root[data-theme="dark"] #page-flow-diagram.active,
:root[data-theme="dark"] #page-flow-diagram:fullscreen,
:root[data-theme="dark"] #page-flow-diagram:-webkit-full-screen,
:root[data-theme="dark"] #page-flow-diagram:-moz-full-screen {
  background: #0a0a0a;
}
:root[data-theme="dark"] .fd-canvas-wrap { background: #0d0d0d; }

/* Toolbar */
:root[data-theme="dark"] .fd-toolbar {
  background: #141414;
  border-bottom-color: #2a2a2a;
}
:root[data-theme="dark"] .fd-toolbar-sep { background: #2a2a2a; }
:root[data-theme="dark"] .fd-tool-btn {
  background: #1a1a1a;
  border-color: #2a2a2a;
  color: #d0d0d0;
}
:root[data-theme="dark"] .fd-tool-btn:hover,
:root[data-theme="dark"] .fd-tool-btn.active {
  background: #0a2228;
  border-color: #22d3ee;
  color: #22d3ee;
}
:root[data-theme="dark"] .fd-tool-btn.group-active {
  background: #052e16;
  border-color: #10b981;
  color: #34d399;
}
:root[data-theme="dark"] .fd-tool-btn.fs-active {
  background: #1a1a1a;
  border-color: #3a3a3a;
  color: #f0f0f0;
}
:root[data-theme="dark"] .fd-tool-btn.fs-active:hover {
  background: #2a2a2a;
  border-color: #4a4a4a;
  color: #f0f0f0;
}

/* Alignment bar */
:root[data-theme="dark"] .fd-align-bar {
  background: #0a1a2a;
  border-bottom-color: #1a3050;
}
:root[data-theme="dark"] .fd-align-bar-label { color: #7dd3fc; }
:root[data-theme="dark"] .fd-align-btn {
  background: #141414;
  border-color: #2a4060;
  color: #7dd3fc;
}
:root[data-theme="dark"] .fd-align-btn:hover {
  background: #0a2228;
  border-color: #22d3ee;
  color: #22d3ee;
}
:root[data-theme="dark"] .fd-align-sep { background: #2a4060; }

/* System label + unsaved badge */
:root[data-theme="dark"] .fd-sys-label { color: #e2e8f0; }
:root[data-theme="dark"] .fd-sys-label:hover { background: #1a1a1a; }
:root[data-theme="dark"] .fd-unsaved-badge { background: #2a0808; color: #f87171; }

/* Sidebar */
:root[data-theme="dark"] .fd-sidebar {
  background: #141414;
  border-right-color: #2a2a2a;
}
:root[data-theme="dark"] .fd-sidebar::-webkit-scrollbar-thumb { background: #3a3a3a; }
:root[data-theme="dark"] .fd-group-label { color: #5a6a7a; }
:root[data-theme="dark"] .fd-icon-item:hover {
  background: #0a2228;
  border-color: #22d3ee;
}
:root[data-theme="dark"] .fd-icon-label { color: #b0b8c4; }

/* Empty hint box (drag-to-start prompt) */
:root[data-theme="dark"] .fd-empty-hint-box {
  background: rgba(20,20,20,.95);
  border-color: rgba(255,255,255,.12);
}
:root[data-theme="dark"] .fd-empty-hint-box h3 { color: #e2e8f0; }
:root[data-theme="dark"] .fd-empty-hint-box ol { color: #94a3b8; }
:root[data-theme="dark"] .fd-eh-btn-skip {
  color: #5a6a7a;
  border-color: #2a2a2a;
}
:root[data-theme="dark"] .fd-eh-btn-skip:hover {
  background: #1a1a1a;
  color: #94a3b8;
}

/* SVG node — selected state: cyan drop-shadow instead of blue */
:root[data-theme="dark"] .fd-node-group.selected .fd-node-body {
  stroke: #22d3ee !important;
  filter: drop-shadow(0 0 8px rgba(34,211,238,.5));
}
:root[data-theme="dark"] .fd-sel-handle {
  fill: #1a1a1a;
  stroke: #22d3ee;
}

/* Selection rubber-band rectangle */
:root[data-theme="dark"] .fd-sel-rect {
  stroke: #22d3ee;
  fill: rgba(34,211,238,.07);
}

/* Group draw rect */
:root[data-theme="dark"] .fd-group-draw {
  stroke: #34d399;
  fill: rgba(52,211,153,.07);
}

/* Edge label */
:root[data-theme="dark"] .fd-edge-label { fill: #5a6a7a; }

/* Legend overlay */
:root[data-theme="dark"] .fd-legend {
  background: rgba(20,20,20,.92);
  border-color: #2a2a2a;
}
:root[data-theme="dark"] .fd-legend-title { color: #5a6a7a; }
:root[data-theme="dark"] .fd-legend-text  { color: #b0b8c4; }

/* Modal dialog */
:root[data-theme="dark"] .fd-modal-overlay { background: rgba(0,0,0,.75); }
:root[data-theme="dark"] .fd-modal {
  background: #141414;
  color: #e2e8f0;
}
:root[data-theme="dark"] .fd-modal h2    { color: #e2e8f0; }
:root[data-theme="dark"] .fd-modal label { color: #b0b8c4; }
:root[data-theme="dark"] .fd-modal input {
  background: #1e1e1e;
  border-color: #3a3a3a;
  color: #e2e8f0;
}
:root[data-theme="dark"] .fd-start-card {
  background: #1a1a1a;
  border-color: #2a2a2a;
}
:root[data-theme="dark"] .fd-start-card:hover {
  border-color: #22d3ee;
  background: #0a2228;
}
:root[data-theme="dark"] .fd-start-card h4 { color: #e2e8f0; }
:root[data-theme="dark"] .fd-start-card p  { color: #64748b; }

/* Edge type popup */
:root[data-theme="dark"] .fd-edge-popup {
  background: #1a1a1a;
  border-color: #2a2a2a;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
:root[data-theme="dark"] .fd-edge-popup button:hover { background: #252525; }

/* Status bar — deeper black (was already dark navy) */
:root[data-theme="dark"] .fd-statusbar {
  background: #0a0a0a;
  color: #5a6a7a;
  border-top-color: #1a1a1a;
}
:root[data-theme="dark"] .fd-sb-item strong { color: #d0d0d0; }
:root[data-theme="dark"] .fd-sb-sep         { background: #1a1a1a; }
:root[data-theme="dark"] .fd-sb-btn {
  border-color: #2a2a2a;
  color: #5a6a7a;
}
:root[data-theme="dark"] .fd-sb-btn:hover {
  border-color: #3a3a3a;
  color: #94a3b8;
}