/* =====================================================
       CSS CUSTOM PROPERTIES — THEMES
       ===================================================== */
    :root {
      --bg:          #1c1c1e;
      --card-bg:     #2a2a2e;
      --accent:      #4a90c4;
      --accent2:     #6aaee0;
      --text:        #e8e8ea;
      --text-muted:  #8a8a8f;
      --border:      #3a3a3f;
      --font:        'Inter', sans-serif;
      --header-prefix: '';
      --card-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 -1px 0 rgba(0,0,0,0.25) inset, 0 8px 24px rgba(0,0,0,0.55), 0 3px 8px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.3);
      --radius:      10px;
      --green:       #32d74b;
      --yellow:      #ffd60a;
      --red:         #ff453a;
    }

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

    html, body {
      height: 100%;
      overflow-x: hidden;
    }

    body {
      font-family: var(--font);
      color: var(--text);
      background: var(--bg);
      transition: background 0.4s, color 0.3s;
      min-height: 100vh;
    }

    /* Modern theme — dark textured background */
    body {
      background-color: #1c1c1e;
      background-image:
        repeating-linear-gradient(
          0deg,
          transparent,
          transparent 2px,
          rgba(255,255,255,0.015) 2px,
          rgba(255,255,255,0.015) 3px
        ),
        repeating-linear-gradient(
          90deg,
          transparent,
          transparent 4px,
          rgba(255,255,255,0.01) 4px,
          rgba(255,255,255,0.01) 5px
        );
    }

    a { color: var(--accent); text-decoration: none; }
    button { cursor: pointer; font-family: var(--font); }

    /* =====================================================
       SCROLLBAR
       ===================================================== */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    /* =====================================================
       UTILITY CLASSES
       ===================================================== */
    .hidden { display: none !important; }
    .flex { display: flex; }
    .flex-col { display: flex; flex-direction: column; }
    .items-center { align-items: center; }
    .justify-between { justify-content: space-between; }
    .gap-2 { gap: 8px; }
    .gap-4 { gap: 16px; }
    .gap-6 { gap: 24px; }
    .text-center { text-align: center; }
    .w-full { width: 100%; }
    .mt-2 { margin-top: 8px; }
    .mt-4 { margin-top: 16px; }
    .relative { position: relative; }

    /* =====================================================
       CARD
       ===================================================== */
    .card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--card-shadow);
      padding: 20px;
      position: relative;
      z-index: 1;
      transition: background 0.3s, border 0.3s, box-shadow 0.3s;
    }


    .card-title {
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      margin-bottom: 8px;
    }


    .card-value {
      font-size: 1.7rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.1;
    }


    /* =====================================================
       LOGIN WRAPPER
       ===================================================== */
    #login-wrapper {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 40px 16px 40px;
      overflow-y: auto;
    }

    /* Full-screen backdrop: deep gradient with faded logo watermark */
    #dashboard-blur-backdrop {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background: radial-gradient(ellipse at 60% 40%, #0d1b2a 0%, #080f18 60%, #050a10 100%);
      overflow: hidden;
    }

    /* Large faded logo watermark in backdrop — fills background */
    #login-watermark {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: min(130vw, 130vh);
      height: auto;
      opacity: 0.09;
      mix-blend-mode: screen;
      filter: brightness(1.5);
      user-select: none;
    }

    /* Subtle vignette over backdrop */
    #dashboard-blur-backdrop::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at center, transparent 30%, rgba(5,10,16,0.7) 100%);
    }

    /* Login card */
    #login-card-overlay {
      position: relative;
      z-index: 10;
      background: rgba(18, 24, 36, 0.92);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      box-shadow:
        0 2px 0 rgba(255,255,255,0.04) inset,
        0 32px 80px rgba(0,0,0,0.85),
        0 8px 24px rgba(0,0,0,0.5);
      padding: 44px 52px 40px;
      width: 100%;
      max-width: 420px;
      text-align: center;
      backdrop-filter: blur(20px);
      margin: auto;
    }

    /* Accent top bar on card */
    #login-card-overlay::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      border-radius: 16px 16px 0 0;
      opacity: 0.8;
    }


    /* Logo in login card — 3D medallion */
    #login-logo-wrap {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #2a2a2a, #0a0a0a);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      overflow: hidden;
      transform: perspective(200px) rotateX(8deg);
      box-shadow:
        0 0 0 2px rgba(255,255,255,0.12),
        0 0 0 4px rgba(0,0,0,0.6),
        0 -2px 0 rgba(255,255,255,0.18) inset,
        0 2px 0 rgba(0,0,0,0.5) inset,
        0 12px 30px rgba(0,0,0,0.9),
        0 4px 8px rgba(0,0,0,0.6),
        0 20px 40px rgba(0,0,0,0.4);
    }
    #login-logo-wrap img {
      width: 120%;
      height: 120%;
      border-radius: 50%;
      object-fit: cover;
      object-position: 50% 55%;
      display: block;
      margin: -10%;
    }

    /* Thin divider below logo */
    #login-divider {
      width: 48px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      margin: 0 auto 20px;
      opacity: 0.5;
    }

    #login-title {
      font-family: 'Orbitron', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: 0.26em;
      color: #c8d8e8;
      margin-bottom: 6px;
      line-height: 1.3;
      text-transform: uppercase;
      text-shadow: none;
    }

    #login-subtitle {
      font-size: 0.72rem;
      color: var(--text-muted);
      margin-bottom: 28px;
      line-height: 1.6;
      letter-spacing: 0.03em;
    }

    #login-label {
      display: block;
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-muted);
      text-align: left;
      margin-bottom: 6px;
    }

    #passcode-input {
      width: 100%;
      padding: 12px 16px;
      background: var(--bg);
      border: 1.5px solid var(--border);
      border-radius: calc(var(--radius) - 4px);
      color: var(--text);
      font-size: 1.4rem;
      letter-spacing: 0.5em;
      text-align: center;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      font-family: var(--font);
      margin-bottom: 16px;
    }

    #passcode-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
    }


    #passcode-error {
      color: var(--red);
      font-size: 0.78rem;
      margin-bottom: 12px;
      min-height: 18px;
      transition: opacity 0.2s;
    }

    /* ── Idle timeout banner ─────────────────────────────────── */
    #idle-timeout-banner {
      display: none;
      background: rgba(220, 38, 38, 0.12);
      border: 1px solid rgba(220, 38, 38, 0.4);
      color: #fca5a5;
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 0.8rem;
      text-align: center;
      margin-bottom: 12px;
      letter-spacing: 0.02em;
      line-height: 1.5;
    }
    #idle-timeout-banner.visible { display: block; }

    #login-submit {
      width: 100%;
      padding: 12px;
      background: var(--accent);
      color: #fff;
      font-size: 0.9rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      border: none;
      border-radius: calc(var(--radius) - 4px);
      transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
      margin-bottom: 24px;
    }

    #login-submit:hover { filter: brightness(1.15); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
    #login-submit:active { transform: translateY(0); }

    #passcode-wrap {
      position: relative; width: 100%; margin-bottom: 0;
    }
    #passcode-wrap #passcode-input {
      width: 100%; padding-right: 80px; box-sizing: border-box;
    }
    #face-icon-btn {
      position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
      background: none; border: none; cursor: pointer;
      color: var(--text-muted); padding: 6px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      transition: color 0.2s, background 0.2s;
    }
    #face-icon-btn:hover { color: var(--accent); background: rgba(255,255,255,0.06); }
    /* Eye toggle button — shared by both login forms */
    .eye-toggle-btn {
      position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
      background: none; border: none; cursor: pointer;
      color: var(--text-muted); padding: 6px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      transition: color 0.2s, background 0.2s;
    }
    .eye-toggle-btn:hover { color: var(--accent); background: rgba(255,255,255,0.06); }
    /* Live gate eye button — positioned inside the gate wrap */
    #live-gate-pw-wrap { position: relative; width: 100%; }
    #live-gate-pw-wrap #live-mode-gate-input { padding-right: 40px; width: 100%; box-sizing: border-box; }
    #live-gate-pw-wrap .eye-toggle-btn { right: 4px; }
    #face-icon-btn.scanning { color: var(--accent); }
    #face-icon-btn.scanning #face-scan-line { opacity: 1; animation: faceScanLine 1.2s ease-in-out infinite; }
    #face-icon-btn.success { color: #22c55e; }
    @keyframes faceScanLine {
      0%   { transform: translateY(-36px); opacity: 0.9; }
      50%  { transform: translateY(0px);   opacity: 1; }
      100% { transform: translateY(36px);  opacity: 0.9; }
    }
    #face-reset-wrap { width: 100%; text-align: center; margin-top: -6px; margin-bottom: 2px; }
    #face-reset-btn {
      background: none; border: none; cursor: pointer;
      color: var(--text-muted); font-size: 0.73rem;
      text-decoration: underline; padding: 2px 6px;
      transition: color 0.15s;
    }
    #face-reset-btn:hover { color: var(--accent); }

    /* ── Face Webcam Modal ── */
    #face-cam-modal {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.88); z-index: 11000;
      align-items: center; justify-content: center;
    }
    #face-cam-modal.open { display: flex; }
    .face-cam-inner {
      background: var(--card-bg); border: 1px solid var(--border);
      border-radius: 20px; padding: 24px;
      display: flex; flex-direction: column; align-items: center; gap: 14px;
      min-width: 360px; box-shadow: 0 24px 64px rgba(0,0,0,0.7);
    }
    .face-cam-header {
      width: 100%; display: flex; align-items: center; justify-content: space-between;
    }
    .face-cam-title { font-weight: 700; font-size: 1rem; color: var(--text); }
    .face-cam-close {
      background: none; border: none; color: var(--text-muted); font-size: 18px;
      cursor: pointer; padding: 2px 6px; border-radius: 6px;
      transition: color 0.15s;
    }
    .face-cam-close:hover { color: var(--text); }
    .face-cam-video-wrap {
      position: relative; border-radius: 14px; overflow: hidden;
      width: 320px; height: 240px; background: #000;
    }
    #face-cam-video {
      display: block;
      width: 320px; height: 240px;
      object-fit: cover;
      background: #000;
    }
    #face-cam-canvas {
      display: none;
    }
    #face-cam-status {
      font-size: 0.82rem; color: var(--text-muted); text-align: center;
      min-height: 20px; transition: color 0.2s;
    }
    #face-cam-status.good { color: #22c55e; }
    #face-cam-status.bad  { color: #ff453a; }
    .face-cam-bar-wrap {
      width: 100%; height: 4px; background: var(--border);
      border-radius: 2px; overflow: hidden;
    }
    #face-cam-bar {
      height: 100%; width: 0%; background: var(--accent);
      border-radius: 2px; transition: width 0.1s linear;
    }
    .face-cam-hint {
      font-size: 0.72rem; color: var(--text-muted); text-align: center;
    }

    #login-divider-or {
      display: flex; align-items: center; gap: 10px;
      color: var(--text-muted); font-size: 0.78rem; margin: 4px 0 10px;
    }
    #login-divider-or::before, #login-divider-or::after {
      content: ''; flex: 1; height: 1px; background: var(--border);
    }

    /* Face fail popup */
    #face-fail-popup {
      display: none; flex-direction: column; align-items: center;
      position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
      background: var(--card-bg); border: 1.5px solid rgba(255,68,58,0.4);
      border-radius: 16px; padding: 28px 32px; z-index: 9999;
      box-shadow: 0 20px 60px rgba(0,0,0,0.7); text-align: center;
      animation: faceFailIn 0.3s ease;
    }
    #face-fail-popup.show { display: flex; }
    @keyframes faceFailIn {
      from { opacity: 0; transform: translate(-50%, -48%) scale(0.94); }
      to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
    #face-fail-icon { font-size: 2.8rem; margin-bottom: 10px; }
    #face-fail-title { font-size: 1rem; font-weight: 700; color: #ff453a; margin-bottom: 6px; }
    #face-fail-sub { font-size: 0.82rem; color: var(--text-muted); }

    #google-login-btn {
      width: 100%; padding: 11px 14px; margin-top: 0;
      background: #fff; border: 1.5px solid #dadce0;
      border-radius: calc(var(--radius) - 4px);
      color: #3c4043; font-size: 0.88rem; font-weight: 600;
      cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
      transition: box-shadow 0.2s, transform 0.1s;
    }
    #google-login-btn:hover:not(:disabled) {
      box-shadow: 0 2px 8px rgba(0,0,0,0.18); transform: translateY(-1px);
    }
    #google-login-btn:disabled { opacity: 0.6; cursor: wait; }


    /* =====================================================
       LOGIN → DASHBOARD ZOOM TRANSITION
       ===================================================== */
    #login-zoom-overlay {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #050a10;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    #login-zoom-overlay.active {
      opacity: 1;
      pointer-events: all;
    }
    #login-zoom-logo {
      width: 180px;
      height: 180px;
      object-fit: cover;
      border-radius: 50%;
      mix-blend-mode: screen;
      transform: scale(1);
      transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
                  opacity 0.35s ease;
      opacity: 1;
    }
    #login-zoom-overlay.zooming #login-zoom-logo {
      transform: scale(12);
      opacity: 0;
    }

    /* Login card fade-out on submit */
    #login-card-overlay.fading-out {
      opacity: 0;
      transform: scale(0.96);
      transition: opacity 0.35s ease, transform 0.35s ease;
    }

    /* =====================================================
       ACCESS SEQUENCE OVERLAY
       ===================================================== */
    #access-overlay {
      position: fixed;
      inset: 0;
      z-index: 2000;
      background: #000;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .access-welcome {
      font-size: 3rem;
      font-weight: 900;
      letter-spacing: 0.15em;
      color: #fff;
      opacity: 0;
      animation: fadeInUp 0.8s ease forwards;
      text-shadow: 0 0 30px rgba(255,255,255,0.3);
    }

    .access-granted {
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      color: #22c55e;
      opacity: 0;
      animation: fadeInUp 0.8s ease 0.5s forwards;
      text-shadow: 0 0 20px rgba(34,197,94,0.8);
      margin-top: 16px;
    }

    .access-sub {
      font-size: 1rem;
      color: rgba(255,255,255,0.6);
      letter-spacing: 0.1em;
      opacity: 0;
      animation: fadeInUp 0.6s ease 1s forwards;
      margin-top: 10px;
    }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ---- Modern transition ---- */
    #modern-transition {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }

    .modern-bar {
      position: absolute;
      height: 3px;
      background: linear-gradient(90deg, transparent, #6366f1, #818cf8, transparent);
      animation: modernBarSweep 0.6s ease forwards;
      opacity: 0;
    }

    @keyframes modernBarSweep {
      0%   { left: -100%; opacity: 0; width: 40%; }
      40%  { opacity: 1; }
      100% { left: 110%; opacity: 0; width: 60%; }
    }

    /* =====================================================
       DEMO INTRO OVERLAY
       ===================================================== */
    #demo-intro-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.88);
      backdrop-filter: blur(8px);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: fadeIn 0.4s ease;
    }
    #demo-intro-overlay.hidden { display: none !important; }

    #demo-intro-modal {
      background: linear-gradient(135deg, #0d1b0d 0%, #0a1a2e 50%, #1a0d2e 100%);
      border: 1px solid #32d74b;
      border-radius: 20px;
      padding: 40px 48px;
      max-width: 680px;
      width: 92%;
      box-shadow: 0 0 60px rgba(50,215,75,0.18), 0 0 120px rgba(100,210,255,0.1), 0 32px 80px rgba(0,0,0,0.7);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    #demo-intro-modal::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(ellipse at center, rgba(50,215,75,0.04) 0%, transparent 70%);
      animation: rotateSlow 20s linear infinite;
      pointer-events: none;
    }
    @keyframes rotateSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

    .dim-logo-wrap {
      font-size: 3rem;
      margin-bottom: 12px;
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

    .dim-title {
      font-size: 1.6rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: 0.02em;
      margin-bottom: 6px;
      font-family: 'Orbitron', sans-serif;
    }
    .dim-subtitle {
      font-size: 0.95rem;
      color: #32d74b;
      font-weight: 600;
      margin-bottom: 20px;
      letter-spacing: 0.05em;
    }
    .dim-desc {
      font-size: 0.88rem;
      color: #aaa;
      line-height: 1.65;
      margin-bottom: 24px;
    }
    .dim-checklist {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 28px;
      text-align: left;
    }
    .dim-check-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.83rem;
      color: #ccc;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 8px 14px;
    }
    .dim-check-icon { font-size: 1rem; flex-shrink: 0; }
    .dim-check-label { font-weight: 500; }
    .dim-check-desc { color: #666; font-size: 0.78rem; margin-left: auto; }

    .dim-btns {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .dim-btn-play {
      background: linear-gradient(135deg, #32d74b, #22c55e);
      color: #000;
      border: none;
      border-radius: 12px;
      padding: 14px 36px;
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(50,215,75,0.4);
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .dim-btn-play:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(50,215,75,0.5); }
    .dim-btn-skip {
      background: rgba(255,255,255,0.06);
      color: #888;
      border: 1px solid #333;
      border-radius: 12px;
      padding: 14px 24px;
      font-size: 0.85rem;
      font-weight: 500;
      cursor: pointer;
      transition: color 0.15s;
    }
    .dim-btn-skip:hover { color: #ccc; }

    /* =====================================================
       DEMO TOUR POPUP
       ===================================================== */
    #demo-tour-popup {
      position: fixed;
      z-index: 9990;
      pointer-events: auto;
      animation: tourPopIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      max-width: 420px;
      width: 92%;
    }
    #demo-tour-popup.hidden { display: none !important; }
    @keyframes tourPopIn {
      from { opacity: 0; transform: scale(0.93) translateY(10px); filter: blur(1px); }
      60%  { opacity: 1; transform: scale(1.01) translateY(-1px); filter: blur(0); }
      to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
    }

    .dtp-card {
      background: linear-gradient(135deg, #0f1f0f 0%, #0a1628 60%, #150a28 100%);
      border: 1px solid rgba(50,215,75,0.45);
      border-radius: 16px;
      padding: 20px 24px 16px;
      box-shadow: 0 0 40px rgba(50,215,75,0.15), 0 20px 50px rgba(0,0,0,0.7);
      position: relative;
      overflow: hidden;
    }
    .dtp-card::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, #32d74b, #64d2ff, #32d74b, transparent);
      animation: shimmer 2s linear infinite;
    }
    @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

    .dtp-step-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .dtp-step-badge {
      font-size: 0.7rem;
      color: #32d74b;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .dtp-skip-btn {
      background: none;
      border: none;
      color: #555;
      font-size: 0.72rem;
      cursor: pointer;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .dtp-skip-btn:hover { color: #888; }

    .dtp-mute-btn {
      background: none;
      border: none;
      font-size: 1rem;
      cursor: pointer;
      padding: 2px 5px;
      border-radius: 4px;
      opacity: 0.75;
      transition: opacity 0.2s;
      line-height: 1;
    }
    .dtp-mute-btn:hover { opacity: 1; }
    .dtp-mute-btn.muted { opacity: 0.4; }

    .dtp-title {
      font-size: 1rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 8px;
      line-height: 1.3;
    }
    .dtp-desc {
      font-size: 0.8rem;
      color: #aaa;
      line-height: 1.6;
      margin-bottom: 14px;
    }
    .dtp-progress-track {
      height: 3px;
      background: rgba(255,255,255,0.1);
      border-radius: 2px;
      overflow: hidden;
      margin-bottom: 12px;
    }
    .dtp-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #32d74b, #64d2ff);
      border-radius: 2px;
      transition: width 0.5s linear;
    }
    .dtp-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .dtp-dots {
      display: flex;
      gap: 5px;
    }
    .dtp-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #333;
      transition: background 0.3s;
    }
    .dtp-dot.active { background: #32d74b; }
    .dtp-dot.done { background: #555; }
    .dtp-prev-btn {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.2);
      color: rgba(255,255,255,0.7);
      padding: 6px 14px;
      font-size: 0.8rem;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      letter-spacing: 0.03em;
      transition: background 0.15s;
    }
    .dtp-prev-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }

    .dtp-next-btn {
      background: rgba(50,215,75,0.15);
      border: 1px solid rgba(50,215,75,0.4);
      color: #32d74b;
      border-radius: 8px;
      padding: 6px 16px;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s;
    }
    .dtp-next-btn:hover { background: rgba(50,215,75,0.25); }

    /* ── Tour Pause/Play Overlay ───────────────────────── */
    #tour-pause-overlay {
      position: fixed;
      inset: 0;
      z-index: 9980;
      display: none;
      cursor: pointer;
    }
    #tour-pause-overlay.active {
      display: block;
      background: rgba(0,0,0,0.35);
    }
    #tour-pause-overlay .pause-play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 6rem;
      color: rgba(255,255,255,0.5);
      pointer-events: none;
      text-shadow: 0 4px 30px rgba(0,0,0,0.5);
    }
    #tour-pause-overlay .pause-play-icon.flash-play {
      animation: flashPlay 0.7s ease-out forwards;
    }
    @keyframes flashPlay {
      0%   { opacity: 0.7; transform: translate(-50%,-50%) scale(1); }
      100% { opacity: 0;   transform: translate(-50%,-50%) scale(1.5); }
    }

    /* Highlight pulse ring around key sections during tour */
    .demo-tour-highlight {
      box-shadow: 0 0 0 3px rgba(50,215,75,0.6), 0 0 20px rgba(50,215,75,0.3) !important;
      border-radius: 8px;
      transition: box-shadow 0.4s;
      position: relative;
      z-index: 1;
    }

    /* 3D bounce effect for pointed-out elements */
    @keyframes tourBounce3D {
      0%   { transform: perspective(800px) translateZ(0) scale(1); }
      30%  { transform: perspective(800px) translateZ(28px) scale(1.04); }
      60%  { transform: perspective(800px) translateZ(12px) scale(1.02); }
      80%  { transform: perspective(800px) translateZ(18px) scale(1.025); }
      100% { transform: perspective(800px) translateZ(0) scale(1); }
    }
    .demo-bounce-3d {
      animation: tourBounce3D 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
      transform-origin: center center;
      transform-style: preserve-3d;
    }

    /* Green flash when a section is spotlighted */
    @keyframes tourGreenFlash {
      0%   { box-shadow: 0 0 0 0 rgba(50,215,75,0); }
      20%  { box-shadow: 0 0 0 5px rgba(50,215,75,0.75), 0 0 35px rgba(50,215,75,0.45); background-color: rgba(50,215,75,0.07); }
      65%  { box-shadow: 0 0 0 3px rgba(50,215,75,0.5), 0 0 20px rgba(50,215,75,0.25); background-color: rgba(50,215,75,0.04); }
      100% { box-shadow: 0 0 0 3px rgba(50,215,75,0.55), 0 0 18px rgba(50,215,75,0.28); background-color: transparent; }
    }
    .demo-green-flash {
      animation: tourGreenFlash 0.85s ease-out forwards !important;
      border-radius: 8px;
      position: relative;
      z-index: 1;
    }

    /* Repeating attention pulse — used on connectivity badge */
    @keyframes tourAttentionPulse {
      0%   { box-shadow: 0 0 0 0 rgba(100,210,255,0.9), 0 0 0 0 rgba(50,215,75,0.6); transform: scale(1); }
      30%  { box-shadow: 0 0 0 8px rgba(100,210,255,0.5), 0 0 28px rgba(100,210,255,0.6); transform: scale(1.12); }
      50%  { box-shadow: 0 0 0 14px rgba(100,210,255,0.15), 0 0 40px rgba(100,210,255,0.35); transform: scale(1.06); }
      70%  { box-shadow: 0 0 0 8px rgba(50,215,75,0.4), 0 0 22px rgba(50,215,75,0.45); transform: scale(1.1); }
      100% { box-shadow: 0 0 0 0 rgba(100,210,255,0), 0 0 0 0 rgba(50,215,75,0); transform: scale(1); }
    }
    .demo-attention-pulse {
      animation: tourAttentionPulse 4.05s ease-in-out infinite !important;
      border-radius: 8px;
      position: relative;
      z-index: 3;
    }

    /* Red outline drawn around section, then fades */
    @keyframes tourRedOutlineDraw {
      0%   { outline: 2px solid rgba(255,59,48,0);   outline-offset: 0px;  box-shadow: 0 0 0 0 rgba(255,59,48,0); }
      25%  { outline: 2px solid rgba(255,59,48,1);   outline-offset: 5px;  box-shadow: 0 0 18px rgba(255,59,48,0.6); }
      65%  { outline: 2px solid rgba(255,59,48,0.7); outline-offset: 5px;  box-shadow: 0 0 12px rgba(255,59,48,0.35); }
      100% { outline: 2px solid rgba(255,59,48,0);   outline-offset: 10px; box-shadow: 0 0 0 0 rgba(255,59,48,0); }
    }
    .demo-red-outline {
      animation: tourRedOutlineDraw 2.2s ease-out forwards !important;
      border-radius: 8px;
      position: relative;
      z-index: 2;
    }

    /* Popup content fade on step change */
    @keyframes dtpContentFade {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .dtp-content-anim {
      animation: dtpContentFade 0.3s ease-out forwards;
    }

    /* =====================================================
       LIVE-MODE PASSWORD GATE (shown when exiting demo)
       ===================================================== */
    #live-mode-gate {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.82);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: fadeIn 0.3s ease;
    }
    #live-mode-gate.hidden { display: none !important; }
    #live-mode-gate-modal {
      background: linear-gradient(135deg, #0a1628 0%, #0d1b0d 60%, #1a0d2e 100%);
      border: 1px solid rgba(100,210,255,0.35);
      border-radius: 20px;
      padding: 36px 44px 32px;
      max-width: 380px;
      width: 90%;
      box-shadow: 0 0 60px rgba(100,210,255,0.15), 0 32px 80px rgba(0,0,0,0.8);
      text-align: center;
      position: relative;
    }
    #live-mode-gate-modal .gate-icon { font-size: 2.4rem; margin-bottom: 10px; }
    #live-mode-gate-modal .gate-title {
      font-size: 1.15rem; font-weight: 800; color: #fff;
      margin-bottom: 6px; letter-spacing: 0.02em;
    }
    #live-mode-gate-modal .gate-sub {
      font-size: 0.8rem; color: #888; margin-bottom: 22px; line-height: 1.5;
    }
    #live-mode-gate-input {
      width: 100%; box-sizing: border-box;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 10px;
      color: #fff; font-size: 1.4rem; font-weight: 700;
      text-align: center; letter-spacing: 0.25em;
      padding: 12px 16px;
      outline: none;
      margin-bottom: 14px;
      transition: border-color 0.2s;
    }
    #live-mode-gate-input:focus { border-color: rgba(100,210,255,0.5); }
    #live-mode-gate-input.gate-error {
      border-color: rgba(255,59,48,0.7);
      animation: gateShake 0.35s ease;
    }
    @keyframes gateShake {
      0%,100% { transform: translateX(0); }
      25% { transform: translateX(-8px); }
      75% { transform: translateX(8px); }
    }
    #live-mode-gate-err {
      font-size: 0.78rem; color: #ff453a; margin-bottom: 12px;
      min-height: 18px; transition: opacity 0.2s;
    }
    .gate-btn-row { display: flex; gap: 10px; justify-content: center; }
    #live-mode-gate-submit {
      background: linear-gradient(135deg, #64d2ff, #0a84ff);
      color: #000; border: none; border-radius: 10px;
      padding: 11px 30px; font-size: 0.9rem; font-weight: 800;
      cursor: pointer; letter-spacing: 0.04em;
      transition: transform 0.15s, box-shadow 0.15s;
      box-shadow: 0 4px 16px rgba(100,210,255,0.3);
    }
    #live-mode-gate-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(100,210,255,0.45); }
    #live-mode-gate-cancel {
      background: rgba(255,255,255,0.05); color: #666;
      border: 1px solid #333; border-radius: 10px;
      padding: 11px 20px; font-size: 0.85rem; cursor: pointer;
      transition: color 0.15s;
    }
    #live-mode-gate-cancel:hover { color: #aaa; }

    /* =====================================================
       DEMO MODE BANNER
       ===================================================== */
    #demo-banner {
      display: none !important;  /* Banner hidden — clean UI for demo & commercial */
    }

    /* =====================================================
       DASHBOARD ROOT
       ===================================================== */
    #dashboard-root {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    /* =====================================================
       TOP BAR
       ===================================================== */
    #top-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 24px;
      background: var(--card-bg);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 200;
      gap: 12px;
    }

    .top-bar-left {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    #logo-circle {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.65rem;
      font-weight: 800;
      color: var(--accent);
      letter-spacing: 0.05em;
      border: 2px solid var(--accent);
      flex-shrink: 0;
      text-align: center;
    }

    /* 3D circular logo in navbar */
    #logo-3d-wrap {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #2a2a2a, #0a0a0a);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
      transform: perspective(150px) rotateX(6deg);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      box-shadow:
        0 0 0 2px rgba(255,255,255,0.1),
        0 0 0 3px rgba(0,0,0,0.5),
        0 -2px 0 rgba(255,255,255,0.15) inset,
        0 2px 0 rgba(0,0,0,0.4) inset,
        0 8px 20px rgba(0,0,0,0.8),
        0 3px 6px rgba(0,0,0,0.5),
        0 16px 32px rgba(0,0,0,0.3);
    }
    #logo-3d-wrap:hover {
      transform: perspective(150px) rotateX(0deg) translateY(-1px);
      box-shadow:
        0 0 0 2px rgba(255,255,255,0.12),
        0 0 0 3px rgba(0,0,0,0.5),
        0 -2px 0 rgba(255,255,255,0.15) inset,
        0 2px 0 rgba(0,0,0,0.4) inset,
        0 12px 28px rgba(0,0,0,0.85),
        0 4px 8px rgba(0,0,0,0.5),
        0 20px 40px rgba(0,0,0,0.35);
    }
    #logo-img {
      width: 120%;
      height: 120%;
      object-fit: cover;
      object-position: 50% 55%;
      border-radius: 50%;
      display: block;
      margin: -10%;
    }

    .top-bar-titles h1 {
      font-family: 'Orbitron', sans-serif;
      font-size: 0.82rem;
      font-weight: 700;
      color: #c8d8e8;
      letter-spacing: 0.24em;
      line-height: 1.1;
      text-transform: uppercase;
      text-shadow: none;
      border-bottom: 1px solid rgba(200,216,232,0.14);
      padding-bottom: 3px;
      margin-bottom: 2px;
    }
    .top-bar-titles p { color: #4e5d6e; letter-spacing: 0.07em; font-size: 0.6rem; }

    .top-bar-titles p {
      font-size: 0.65rem;
      color: var(--text-muted);
      letter-spacing: 0.04em;
    }

    .top-bar-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .top-bar-center {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
    }
    .top-bar-center .fintech-powered-badge {
      flex-direction: column;
      align-items: center;
      gap: 2px;
      text-align: center;
    }
    #top-bar .fintech-powered-badge img {
      height: 42px;
      width: auto;
      object-fit: contain;
    }
    .top-bar-center .ftb-text {
      font-size: 0.6rem;
      font-weight: 600;
      color: var(--text-muted);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      line-height: 1.4;
      text-align: center;
    }
    .top-bar-center .ftb-text span {
      display: block;
      font-size: 0.6rem;
      font-weight: 700;
      color: #6aaee0;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* ── Connectivity Badge ─────────────────────────── */
    #connectivity-badge {
      display: flex; align-items: center; gap: 5px;
      padding: 5px 10px; border-radius: 8px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      cursor: pointer; font-family: var(--font);
      transition: background 0.2s, border-color 0.2s;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
      margin-right: 4px;
      position: relative;
      z-index: 300;
    }
    #connectivity-badge:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); }
    #connectivity-pct {
      font-family: 'Orbitron', sans-serif;
      font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
      color: #22c55e;
    }
    #connectivity-pct.warn  { color: #ffd60a; }
    #connectivity-pct.error { color: #ff453a; }
    #connectivity-label {
      font-size: 0.65rem; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase;
    }

    /* ── Connectivity Popup ─────────────────────────── */
    #connectivity-overlay {
      position: fixed; inset: 0; z-index: 99990;
      background: rgba(0,0,0,0.6);
      display: flex; align-items: center; justify-content: center;
      backdrop-filter: blur(3px);
    }
    #connectivity-modal {
      background: var(--card-bg);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px;
      width: 360px;
      max-height: calc(100vh - 80px);
      display: flex;
      flex-direction: column;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.05) inset,
        0 -1px 0 rgba(0,0,0,0.3) inset,
        0 24px 60px rgba(0,0,0,0.8),
        0 6px 16px rgba(0,0,0,0.5);
      overflow: hidden;
      animation: connSlideIn 0.25s cubic-bezier(0.22,1,0.36,1);
    }
    /* Scrollable body between fixed header and fixed footer */
    #connectivity-modal-body {
      overflow-y: auto;
      flex: 1;
      min-height: 0;
    }
    #connectivity-modal-body::-webkit-scrollbar { width: 4px; }
    #connectivity-modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    @keyframes connSlideIn {
      from { opacity: 0; transform: translateY(-12px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .connectivity-close {
      position: absolute; top: 12px; right: 14px;
      background: none; border: 1px solid var(--border);
      color: var(--text-muted); font-size: 1rem; cursor: pointer;
      padding: 1px 8px; border-radius: 5px; transition: color 0.15s, background 0.15s;
      line-height: 1.6;
    }
    .connectivity-close:hover { color: var(--text); background: var(--hover); }
    #connectivity-modal-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 20px 20px 16px;
      border-bottom: 1px solid var(--border);
      position: relative;
    }
    #connectivity-modal-header::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      opacity: 0.7;
    }
    #connectivity-modal-title {
      font-family: 'Orbitron', sans-serif;
      font-size: 0.78rem; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: #c8d8e8;
    }
    #connectivity-modal-pct-wrap {
      position: relative; width: 52px; height: 52px;
      display: flex; align-items: center; justify-content: center;
    }
    #connectivity-ring { width: 52px; height: 52px; position: absolute; top: 0; left: 0; }
    #connectivity-modal-pct {
      font-family: 'Orbitron', sans-serif;
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
      color: #22c55e; position: relative; z-index: 1;
    }
    #connectivity-sources { padding: 8px 0; }
    .conn-source-row {
      display: flex; align-items: center; gap: 12px;
      padding: 11px 20px;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      transition: background 0.15s;
    }
    .conn-source-row:last-child { border-bottom: none; }
    .conn-source-row:hover { background: rgba(255,255,255,0.03); }
    .conn-dot {
      width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
      box-shadow: 0 0 6px currentColor;
    }
    .conn-dot.live          { background: #22c55e; color: #22c55e; }
    .conn-dot.stale         { background: #ffd60a; color: #ffd60a; }
    .conn-dot.error         { background: #ff453a; color: #ff453a; }
    .conn-dot.not_configured { background: #555; color: #555; box-shadow: none; }
    .conn-dot.syncing       { background: #60a5fa; color: #60a5fa; animation: connPulse 0.8s ease-in-out infinite; }
    @keyframes connPulse { 0%,100%{opacity:1;} 50%{opacity:0.35;} }
    .conn-source-info { flex: 1; min-width: 0; }
    .conn-source-name { font-size: 0.82rem; font-weight: 600; color: var(--text); }
    .conn-source-msg  { font-size: 0.7rem; color: var(--text-muted); margin-top: 1px; }
    .conn-source-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
    .conn-source-schedule { font-size: 0.65rem; color: rgba(255,255,255,0.25); }
    .conn-countdown {
      font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em;
      color: rgba(96,165,250,0.7); font-variant-numeric: tabular-nums;
    }
    .conn-countdown.urgent { color: #ffd60a; }
    .conn-countdown.imminent { color: #ff453a; animation: pulse-red 1s ease infinite; }
    .conn-sync-btn {
      font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
      padding: 4px 10px; border-radius: 6px;
      border: 1px solid rgba(96,165,250,0.45);
      background: rgba(96,165,250,0.1); color: #60a5fa;
      cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s;
      white-space: nowrap; display: flex; align-items: center; gap: 4px;
    }
    .conn-sync-btn:hover:not(:disabled) {
      background: rgba(96,165,250,0.22); border-color: rgba(96,165,250,0.75);
      transform: scale(1.04);
    }
    .conn-sync-btn:active:not(:disabled) { transform: scale(0.97); }
    .conn-sync-btn:disabled { opacity: 0.35; cursor: not-allowed; }
    .conn-sync-btn.not-available { border-color: rgba(255,255,255,0.1); background: none; color: rgba(255,255,255,0.18); cursor: default; }
    .conn-sync-btn.not-available:hover { background: none; border-color: rgba(255,255,255,0.1); transform: none; }
    #connectivity-footer {
      padding: 10px 20px;
      font-size: 0.65rem; color: rgba(255,255,255,0.2);
      border-top: 1px solid var(--border);
      text-align: center; letter-spacing: 0.04em;
    }
    /* ── Cron Job Health Section ─────────────────────────── */
    #cron-health-section { border-top: 1px solid var(--border); }
    #cron-health-title {
      padding: 10px 20px 4px;
      font-size: 0.65rem; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--text-muted);
    }
    .cron-job-row {
      display: flex; align-items: center; gap: 10px;
      padding: 7px 20px;
      border-bottom: 1px solid rgba(255,255,255,0.03);
      transition: background 0.15s;
    }
    .cron-job-row:last-child { border-bottom: none; }
    .cron-job-row:hover { background: rgba(255,255,255,0.03); }
    .cron-job-icon { font-size: 0.8rem; flex-shrink: 0; width: 16px; text-align: center; }
    .cron-job-info { flex: 1; min-width: 0; }
    .cron-job-name {
      font-size: 0.76rem; font-weight: 600; color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .cron-job-detail { font-size: 0.63rem; color: var(--text-muted); margin-top: 1px; }
    .cron-job-right {
      font-size: 0.63rem; color: var(--text-muted);
      text-align: right; flex-shrink: 0; line-height: 1.4;
    }
    .cron-lag-warn  { color: #ffd60a !important; font-weight: 700; }
    .cron-lag-error { color: #ff453a !important; font-weight: 700; }

    /* ── QBO Status Bar (dashboard overview) ───────────────────── */
    #qbo-status-bar {
      display: flex; align-items: center; gap: 10px;
      font-size: 0.74rem; font-weight: 600;
      padding: 6px 14px; border-radius: 7px; margin-bottom: 14px;
      border: 1px solid transparent; transition: all 0.3s;
    }
    #qbo-status-bar.qbo-live          { background: rgba(34,197,94,0.08);  border-color: rgba(34,197,94,0.2);  color: #22c55e; }
    #qbo-status-bar.qbo-stale         { background: rgba(255,214,10,0.08); border-color: rgba(255,214,10,0.2); color: #ffd60a; }
    #qbo-status-bar.qbo-error         { background: rgba(255,69,58,0.08);  border-color: rgba(255,69,58,0.2);  color: #ff453a; }
    #qbo-status-bar.qbo-disconnected  { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.4); }
    #qbo-status-bar .qbo-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    #qbo-status-bar.qbo-live  .qbo-dot { background: #22c55e; box-shadow: 0 0 5px #22c55e; }
    #qbo-status-bar.qbo-stale .qbo-dot { background: #ffd60a; box-shadow: 0 0 5px #ffd60a; }
    #qbo-status-bar.qbo-error .qbo-dot { background: #ff453a; box-shadow: 0 0 5px #ff453a; }
    #qbo-status-bar.qbo-disconnected .qbo-dot { background: #555; }
    #qbo-status-bar .qbo-action {
      margin-left: auto; font-size: 0.68rem; padding: 2px 10px;
      border-radius: 5px; border: 1px solid currentColor;
      background: transparent; color: inherit; cursor: pointer;
      font-weight: 700; letter-spacing: 0.03em;
      transition: background 0.15s;
    }
    #qbo-status-bar .qbo-action:hover { background: rgba(255,255,255,0.08); }

    .feed-toggle-btn {
      padding: 7px 14px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      border: none;
      border-radius: calc(var(--radius) - 4px);
      transition: all 0.2s;
      font-family: var(--font);
    }

    .feed-toggle-btn.active { background: #16a34a; color: #fff; }
    .feed-toggle-btn.inactive { background: #dc2626; color: #fff; }

    #logout-btn {
      padding: 7px 14px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      border: 1px solid #475569;
      border-radius: calc(var(--radius) - 4px);
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      font-family: var(--font);
      transition: all 0.2s;
      margin-left: 8px;
    }
    #logout-btn:hover { background: #dc2626; color: #fff; border-color: #dc2626; }

    /* Dashboard view tabs */
    #dashboard-tabs {
      display: flex;
      gap: 6px;
      padding: 14px 24px 0;
      border-bottom: 2px solid var(--border);
      background: var(--card-bg);
      overflow: visible;
      position: relative;
      z-index: 100;
    }
    .dash-tab {
      padding: 10px 22px;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      box-shadow: 0 -2px 8px rgba(0,0,0,0.25), 2px 0 6px rgba(0,0,0,0.1), -2px 0 6px rgba(0,0,0,0.1);
      border: none;
      border-bottom: 3px solid transparent;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      font-family: var(--font);
      transition: all 0.2s;
      margin-bottom: -2px;
      border-radius: 6px 6px 0 0;
    }
    .dash-tab:hover { color: var(--accent); background: rgba(255,255,255,0.04); }
    .dash-tab.active {
      color: #fff;
      border-bottom: 3px solid var(--accent);
      background: linear-gradient(180deg, rgba(74,144,196,0.14) 0%, rgba(74,144,196,0.04) 100%);
      box-shadow: 0 -2px 8px rgba(74,144,196,0.18), 2px 0 6px rgba(0,0,0,0.15), -2px 0 6px rgba(0,0,0,0.15);
      position: relative;
    }
    /* Top accent line on active tab */
    .dash-tab.active::before {
      content: '';
      position: absolute;
      top: 0; left: 4px; right: 4px;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      border-radius: 0 0 2px 2px;
      opacity: 0.8;
    }

    /* ── Tab dropdown menus ── */
    .tab-dropdown-wrap { position: relative; display: inline-block; }
    .tab-dropdown-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 180px;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 0 8px 8px 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
      z-index: 500;
      overflow: hidden;
    }
    .tab-dropdown-menu.open { display: block; }
    .tab-dropdown-item {
      display: block;
      width: 100%;
      padding: 11px 16px;
      background: transparent;
      border: none;
      color: var(--text);
      font-size: .85rem;
      font-weight: 600;
      text-align: left;
      cursor: pointer;
      font-family: var(--font);
      transition: background 0.15s;
    }
    .tab-dropdown-item:hover { background: rgba(255,255,255,0.07); color: var(--accent); }
    .tab-dropdown-item + .tab-dropdown-item { border-top: 1px solid var(--border); }

    /* ── Freezer live dot ── */
    .live-dot-red {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ff453a;
      margin-left: 5px;
      vertical-align: middle;
      animation: pulse-red 1.4s ease-in-out infinite;
    }
    @keyframes pulse-red {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.4; transform: scale(0.7); }
    }

    /* ── Freezer hero stats bar ── */
    #freezer-stats-bar {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-bottom: 18px;
    }
    @media (max-width: 900px) { #freezer-stats-bar { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 500px) { #freezer-stats-bar { grid-template-columns: 1fr; } }

    .freezer-stat-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 20px;
      box-shadow: var(--card-shadow);
    }
    .freezer-stat-label {
      font-size: 0.68rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      margin-bottom: 6px;
    }
    .freezer-stat-value {
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1.1;
    }
    .freezer-stat-value.green { color: var(--green); }
    .freezer-stat-value.red   { color: var(--red);   }
    .freezer-stat-value.blue  { color: var(--accent); }
    .freezer-stat-value.white { color: var(--text); }

    /* ── Freezer alert banner ── */
    #freezer-alert-banner {
      display: none;
      background: rgba(255, 69, 58, 0.12);
      border: 1px solid rgba(255, 69, 58, 0.4);
      border-radius: var(--radius);
      padding: 14px 18px;
      margin-bottom: 16px;
    }
    #freezer-alert-banner.visible { display: block; }
    .freezer-banner-title {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--red);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 8px;
    }
    .freezer-banner-item {
      font-size: 0.8rem;
      color: var(--text);
      padding: 3px 0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .freezer-banner-item:last-child { border-bottom: none; }

    /* ── Order Quick-Edit (pencil icon + modal) ── */
    .order-card-edit-btn {
      position: absolute; top: 7px; right: 7px;
      background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.13);
      border-radius: 6px; padding: 3px 6px; font-size: 0.75rem; cursor: pointer;
      color: var(--text-muted); line-height: 1; transition: background 0.15s, color 0.15s;
      z-index: 2;
    }
    .order-card-edit-btn:hover { background: rgba(255,255,255,0.15); color: var(--text); }
    .order-card { position: relative; }
    /* Push name text left so it never slides under the pencil button */
    .order-card.has-edit-btn .order-card-name { padding-right: 36px; }

    /* ── Grouped customer card ── */
    .order-card-grouped {
      border-color: rgba(74,144,196,0.4);
      background: linear-gradient(135deg, var(--card-bg) 55%, rgba(74,144,196,0.07) 100%);
    }
    .order-card-group-count {
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--accent); color: #fff;
      font-size: 0.7em; font-weight: 800; letter-spacing: 0.03em;
      padding: 1px 7px; border-radius: 10px;
      margin-left: 6px; vertical-align: middle; flex-shrink: 0;
    }
    .order-card-group-summary {
      font-size: 0.76em; color: var(--text-muted); margin-top: 3px; line-height: 1.4;
    }
    .order-card-group-hint {
      font-size: 0.7em; color: var(--accent); margin-top: 5px; opacity: 0.8;
    }

    /* ── Customer Group Detail Modal ── */
    #cust-group-modal {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.78); z-index: 8500;
      align-items: flex-start; justify-content: center;
      padding: 48px 16px 32px; overflow-y: auto;
    }
    #cust-group-modal.open { display: flex; }
    .cgm-inner {
      background: var(--card-bg); border: 1px solid var(--border);
      border-radius: 18px; width: 100%; max-width: 580px;
      box-shadow: 0 28px 64px rgba(0,0,0,0.75);
      overflow: hidden; flex-shrink: 0;
    }
    .cgm-header {
      padding: 20px 24px 16px; border-bottom: 1px solid var(--border);
      display: flex; justify-content: space-between; align-items: flex-start;
    }
    .cgm-title   { font-weight: 800; font-size: 1.05rem; color: var(--text); }
    .cgm-subtitle { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
    .cgm-close   { background: none; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; padding: 2px 8px; border-radius: 6px; }
    .cgm-close:hover { color: var(--text); }
    .cgm-list    { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
    .cgm-item {
      background: rgba(255,255,255,0.04); border: 1px solid var(--border);
      border-radius: 11px; padding: 13px 15px; position: relative;
    }
    .cgm-item-animal { font-weight: 700; font-size: 0.88rem; color: var(--text); }
    .cgm-item-detail { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }
    .cgm-item-value  { font-size: 0.82rem; color: var(--green); font-weight: 600; margin-top: 5px; }
    .cgm-item-fee    { font-size: 0.78rem; color: var(--red); margin-top: 3px; }
    .cgm-item-aging  {
      height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; margin-top: 8px;
    }
    .cgm-item-aging-fill { height: 100%; border-radius: 2px; background: var(--accent); }
    .cgm-item-aging-label { font-size: 0.72em; color: var(--text-muted); margin-top: 2px; }
    .cgm-item-actions { display: flex; gap: 8px; margin-top: 10px; }
    .cgm-item-btn {
      padding: 5px 14px; border-radius: 7px; border: none;
      font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: opacity 0.15s;
    }
    .cgm-item-btn:hover { opacity: 0.8; }
    .cgm-item-btn.edit     { background: rgba(74,144,196,0.15); color: var(--accent); border: 1px solid rgba(74,144,196,0.3); }
    .cgm-item-btn.complete { background: rgba(34,197,94,0.15);  color: #22c55e; border: 1px solid rgba(34,197,94,0.3); }
    .cgm-item-btn.del      { background: rgba(239,68,68,0.1);   color: #ef4444; border: 1px solid rgba(239,68,68,0.25); }
    .cgm-footer {
      padding: 14px 20px; border-top: 1px solid var(--border);
      display: flex; justify-content: flex-end;
    }
    .cgm-dismiss {
      padding: 9px 22px; border-radius: 9px; border: 1px solid var(--border);
      background: none; color: var(--text-muted); font-weight: 600; font-size: 0.88rem; cursor: pointer;
    }
    .cgm-dismiss:hover { color: var(--text); }

    /* ── Pickup Queue (Freezer tab) ── */
    #pickup-queue-wrap { margin-bottom: 20px; }
    #pickup-queue-wrap .pq-section-label {
      font-size: 0.75rem; font-weight: 700; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px;
    }
    #pickup-queue-cards {
      display: flex; flex-wrap: wrap; gap: 10px;
    }
    .pq-card {
      position: relative;
      background: var(--card-bg); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 12px 14px;
      min-width: 200px; max-width: 260px; flex: 1 1 200px;
      font-size: 0.82rem;
    }
    .pq-card.pq-overdue { border-left: 3px solid var(--red); }
    .pq-card.pq-due-today { border-left: 3px solid var(--yellow); }
    .pq-card.pq-free { border-left: 3px solid var(--green); }
    .pq-card-name { font-weight: 700; color: var(--text); margin-bottom: 4px; padding-right: 36px; }
    .pq-card-detail { color: var(--text-muted); margin-bottom: 2px; }
    .pq-card-days-free  { color: var(--green); font-size: 0.78rem; font-weight: 600; }
    .pq-card-days-warn  { color: var(--yellow); font-size: 0.78rem; font-weight: 600; }
    .pq-card-days-over  { color: var(--red); font-size: 0.78rem; font-weight: 600; }
    .pq-card-value      { color: var(--green); font-weight: 600; margin-top: 4px; }

    #order-edit-modal {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.75); z-index: 9000;
      align-items: center; justify-content: center;
    }
    #order-edit-modal.open { display: flex; }
    .order-edit-inner {
      background: var(--card-bg); border: 1px solid var(--border);
      border-radius: 18px; padding: 28px 28px 24px; min-width: 340px; max-width: 420px;
      width: 90%; box-shadow: 0 24px 60px rgba(0,0,0,0.7);
      display: flex; flex-direction: column; gap: 16px;
    }
    .order-edit-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .order-edit-title { font-weight: 700; font-size: 1rem; color: var(--text); }
    .order-edit-meta  { font-size: 0.8rem; color: var(--text-muted); margin-top: 3px; }
    .order-edit-close { background: none; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
    .order-edit-close:hover { color: var(--text); }
    .order-edit-divider { height: 1px; background: var(--border); }
    .order-edit-btn {
      width: 100%; padding: 13px 16px; border-radius: 10px; border: none;
      font-size: 0.9rem; font-weight: 600; cursor: pointer; text-align: left;
      display: flex; align-items: center; gap: 12px; transition: opacity 0.15s;
    }
    .order-edit-btn:hover { opacity: 0.85; }
    .order-edit-btn.complete { background: rgba(34,197,94,0.15); color: #22c55e; border: 1px solid rgba(34,197,94,0.3); }
    .order-edit-btn.delete   { background: rgba(239,68,68,0.12);  color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
    .order-edit-btn.cancel   { background: rgba(255,255,255,0.05); color: var(--text-muted); border: 1px solid var(--border); }
    .order-edit-btn-icon { font-size: 1.1rem; flex-shrink: 0; }
    .order-edit-btn-text { display: flex; flex-direction: column; }
    .order-edit-btn-label { font-weight: 700; }
    .order-edit-btn-sub { font-size: 0.75rem; font-weight: 400; opacity: 0.75; margin-top: 1px; }

    #order-delete-confirm {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.82); z-index: 9500;
      align-items: center; justify-content: center;
    }
    #order-delete-confirm.open { display: flex; }
    .order-delete-inner {
      background: var(--card-bg); border: 1px solid rgba(239,68,68,0.4);
      border-radius: 16px; padding: 28px; min-width: 320px; max-width: 380px;
      width: 88%; box-shadow: 0 20px 50px rgba(0,0,0,0.7);
      display: flex; flex-direction: column; gap: 14px; text-align: center;
    }
    .order-delete-icon  { font-size: 2rem; }
    .order-delete-title { font-weight: 700; font-size: 1rem; color: #ef4444; }
    .order-delete-body  { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }
    .order-delete-btns  { display: flex; gap: 10px; margin-top: 4px; }
    .order-delete-yes   { flex: 1; padding: 11px; border-radius: 9px; border: none; background: #ef4444; color: #fff; font-weight: 700; font-size: 0.9rem; cursor: pointer; }
    .order-delete-yes:hover { background: #dc2626; }
    .order-delete-no    { flex: 1; padding: 11px; border-radius: 9px; border: 1px solid var(--border); background: none; color: var(--text-muted); font-weight: 600; font-size: 0.9rem; cursor: pointer; }
    .order-delete-no:hover { color: var(--text); }

    /* ── Freezer orders table ── */
    #freezer-table-wrap {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--card-shadow);
      overflow: auto;
    }
    #freezer-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.8rem;
    }
    #freezer-table th {
      text-align: left;
      padding: 10px 14px;
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--text-muted);
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
      background: var(--card-bg);
    }
    #freezer-table td {
      padding: 10px 14px;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      vertical-align: middle;
    }
    #freezer-table tbody tr:last-child td { border-bottom: none; }
    #freezer-table tbody tr {
      cursor: pointer;
      transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
      position: relative;
    }
    #freezer-table tbody tr:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 22px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35);
      background: rgba(255,255,255,0.07) !important;
      z-index: 2;
    }
    #freezer-table tbody tr:active { transform: translateY(0); }

    /* Freezer order detail popup */
    #fz-detail-modal {
      display: none; position: fixed; inset: 0; z-index: 9000;
      background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
      align-items: center; justify-content: center;
    }
    #fz-detail-modal.open { display: flex; }
    .fz-dm-inner {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: calc(var(--radius) + 2px); width: 460px; max-width: 94vw;
      box-shadow: 0 24px 64px rgba(0,0,0,0.7);
      overflow: hidden;
    }
    .fz-dm-header {
      background: #1c1a18; padding: 16px 20px 14px;
      display: flex; align-items: flex-start; justify-content: space-between;
      border-bottom: 3px solid #c0392b;
    }
    .fz-dm-title  { font-size: 1rem; font-weight: 700; color: #fff; }
    .fz-dm-sub    { font-size: 0.72rem; color: rgba(255,255,255,0.45); margin-top: 3px; }
    .fz-dm-close  { background: none; border: none; color: rgba(255,255,255,0.5); font-size: 1.1rem; cursor: pointer; padding: 0 0 0 12px; }
    .fz-dm-close:hover { color: #fff; }
    .fz-dm-body   { padding: 18px 22px 20px; }
    .fz-dm-row    {
      display: flex; justify-content: space-between; align-items: baseline;
      padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
      font-size: 0.82rem;
    }
    .fz-dm-row:last-child { border-bottom: none; }
    .fz-dm-label  { color: var(--text-muted); font-weight: 500; }
    .fz-dm-val    { font-weight: 600; color: var(--text); text-align: right; max-width: 55%; }
    .fz-dm-items  { font-size: 0.75rem; color: var(--text-muted); padding: 10px 0 4px; line-height: 1.6; }
    .fz-dm-footer { padding: 12px 22px 14px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }
    .fz-dm-close-btn {
      padding: 7px 22px; border-radius: var(--radius);
      background: rgba(255,255,255,0.06); border: 1px solid var(--border);
      color: var(--text-muted); font-size: 0.8rem; cursor: pointer;
      transition: background 0.15s;
    }
    .fz-dm-close-btn:hover { background: rgba(255,255,255,0.12); color: var(--text); }

    /* Row tinting by age */
    #freezer-table tbody tr.row-green  { background: rgba(50, 215, 75, 0.04); }
    #freezer-table tbody tr.row-yellow { background: rgba(255, 214, 10, 0.07); }
    #freezer-table tbody tr.row-red-1  { background: rgba(255, 69, 58, 0.08); }
    #freezer-table tbody tr.row-red-2  { background: rgba(255, 69, 58, 0.14); }
    #freezer-table tbody tr.row-red-3  { background: rgba(255, 69, 58, 0.22); }

    /* Status badges */
    .fz-badge {
      display: inline-block;
      padding: 3px 9px;
      border-radius: 20px;
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      white-space: nowrap;
    }
    .fz-badge.free    { background: rgba(50,215,75,0.15);  color: var(--green); border: 1px solid rgba(50,215,75,0.3); }
    .fz-badge.warning { background: rgba(255,214,10,0.15); color: var(--yellow); border: 1px solid rgba(255,214,10,0.3); }
    .fz-badge.urgent  { background: rgba(255,140,0,0.15);  color: #ff8c00; border: 1px solid rgba(255,140,0,0.3); }
    .fz-badge.fee     { background: rgba(255,69,58,0.15);  color: var(--red); border: 1px solid rgba(255,69,58,0.3); }

    .fz-items { color: var(--text-muted); font-size: 0.72rem; max-width: 200px; }
    .fz-money { font-variant-numeric: tabular-nums; }
    .fz-fee-amt { color: var(--red); font-weight: 700; }
    .fz-total { font-weight: 700; }

    #two-col-monthly { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    @media (max-width: 768px) { #two-col-monthly { grid-template-columns: 1fr; } }

    /* Print button + dropdown */
    #print-wrap {
      position: relative;
      display: inline-block;
      margin-left: 8px;
    }
    #print-btn {
      padding: 7px 14px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      border: 1px solid var(--accent);
      border-radius: calc(var(--radius) - 4px);
      background: transparent;
      color: var(--accent);
      cursor: pointer;
      font-family: var(--font);
      transition: all 0.2s;
    }
    #print-btn:hover { background: var(--accent); color: #fff; }

    #print-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      min-width: 260px;
      z-index: 999;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
      overflow: hidden;
    }
    #print-dropdown.open { display: block; }
    .print-option {
      display: flex; align-items: center;
      padding: 10px 14px;
      font-size: 0.82rem; font-weight: 600;
      color: var(--text);
      border-bottom: 1px solid var(--border);
      font-family: var(--font); gap: 8px;
    }
    .print-option:last-child { border-bottom: none; }
    .print-option .print-icon { margin-right: 2px; flex-shrink: 0; }
    .print-option-label { flex: 1; }
    .print-action-btns { display: flex; gap: 5px; flex-shrink: 0; }
    .print-action-btn {
      padding: 4px 9px; border-radius: 5px; font-size: 0.72rem;
      font-weight: 700; cursor: pointer; border: 1px solid var(--border);
      background: rgba(255,255,255,0.05); color: var(--text-muted);
      font-family: var(--font); transition: all 0.15s; white-space: nowrap;
    }
    .print-action-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
    .print-action-btn.email-btn:hover { background: #2563eb; border-color: #2563eb; color: #fff; }
    .print-action-btn.text-btn:hover { background: #16a34a; border-color: #16a34a; color: #fff; }

    /* ── Schedule Reports Button ─────────────────────────── */
    #schedule-btn {
      padding: 7px 14px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      border: 1px solid var(--accent);
      border-radius: calc(var(--radius) - 4px);
      background: transparent;
      color: var(--accent);
      cursor: pointer;
      font-family: var(--font);
      transition: all 0.2s;
      margin-left: 8px;
    }
    #schedule-btn:hover { background: var(--accent); color: #fff; }

    /* ── Scheduled Reports Modal ─────────────────────────── */
    #schedule-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.65);
      z-index: 9500;
      align-items: center;
      justify-content: center;
    }
    #schedule-modal-overlay.open { display: flex; }
    #schedule-modal {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      width: 420px;
      max-width: calc(100vw - 32px);
      max-height: calc(100vh - 48px);
      overflow-y: auto;
      box-shadow: 0 16px 48px rgba(0,0,0,0.7);
    }
    .sched-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 20px 14px;
      border-bottom: 1px solid var(--border);
    }
    .sched-modal-title {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.02em;
    }
    .sched-modal-close {
      background: transparent;
      border: none;
      color: var(--text-muted);
      font-size: 1rem;
      cursor: pointer;
      padding: 2px 6px;
      border-radius: 4px;
      transition: background 0.15s, color 0.15s;
    }
    .sched-modal-close:hover { background: rgba(255,255,255,0.1); color: var(--text); }

    .sched-form-section {
      padding: 16px 20px 0;
    }
    .sched-form-group {
      margin-bottom: 14px;
    }
    .sched-hidden { display: none !important; }
    .sched-label {
      display: block;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 6px;
    }
    .sched-input {
      width: 100%;
      padding: 8px 10px;
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 0.83rem;
      font-family: var(--font);
      outline: none;
      transition: border-color 0.15s;
    }
    .sched-input:focus { border-color: var(--accent); }
    .sched-input option { background: var(--card-bg); color: var(--text); }

    .sched-freq-btns, .sched-delivery-btns {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .sched-freq-btn, .sched-delivery-btn {
      padding: 6px 12px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.05);
      color: var(--text-muted);
      font-size: 0.75rem;
      font-weight: 700;
      font-family: var(--font);
      cursor: pointer;
      transition: all 0.15s;
      letter-spacing: 0.03em;
    }
    .sched-freq-btn:hover, .sched-delivery-btn:hover {
      background: rgba(255,255,255,0.1);
      color: var(--text);
    }
    .sched-freq-btn.active, .sched-delivery-btn.active {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }

    .sched-submit-btn {
      width: 100%;
      padding: 10px;
      margin-bottom: 16px;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 7px;
      font-size: 0.83rem;
      font-weight: 700;
      font-family: var(--font);
      cursor: pointer;
      transition: background 0.15s, transform 0.1s;
      letter-spacing: 0.03em;
    }
    .sched-submit-btn:hover { background: var(--accent2); }
    .sched-submit-btn:active { transform: scale(0.98); }

    .sched-list-section {
      border-top: 1px solid var(--border);
      padding: 14px 20px 16px;
    }
    .sched-list-title {
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.07em;
      margin-bottom: 10px;
    }
    .sched-list-empty {
      font-size: 0.8rem;
      color: var(--text-muted);
      text-align: center;
      padding: 12px 0;
    }
    .sched-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 10px;
      border-radius: 7px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.03);
      margin-bottom: 7px;
    }
    .sched-item-info {
      flex: 1;
      min-width: 0;
    }
    .sched-item-name {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sched-item-meta {
      font-size: 0.7rem;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .sched-item-actions {
      display: flex;
      gap: 5px;
      flex-shrink: 0;
    }
    .sched-item-btn {
      padding: 4px 9px;
      border-radius: 5px;
      font-size: 0.7rem;
      font-weight: 700;
      cursor: pointer;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.05);
      color: var(--text-muted);
      font-family: var(--font);
      transition: all 0.15s;
      white-space: nowrap;
    }
    .sched-item-btn:hover { background: rgba(255,255,255,0.12); color: var(--text); }
    .sched-item-btn.toggle-on  { color: var(--green); border-color: var(--green); }
    .sched-item-btn.toggle-off { color: var(--yellow); border-color: var(--yellow); }
    .sched-item-btn.delete-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
    .sched-item.inactive { opacity: 0.5; }

    /* ── Quarter Strategy Info Popover ─────────────────── */
    .info-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 17px; height: 17px; border-radius: 50%;
      background: rgba(255,255,255,0.08); border: 1px solid var(--border);
      color: var(--text-muted); font-size: 0.65rem; font-weight: 700;
      cursor: pointer; margin-left: 7px; vertical-align: middle;
      transition: background 0.15s, color 0.15s; flex-shrink: 0;
      line-height: 1; font-family: var(--font);
    }
    .info-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
    .info-popover {
      display: none;
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9000;
      background: var(--card-bg); border: 1px solid var(--border);
      border-radius: 12px; padding: 20px 22px;
      width: 340px; box-shadow: 0 16px 48px rgba(0,0,0,0.65);
      font-size: 0.82rem; color: var(--text); line-height: 1.6;
    }
    .info-popover.open { display: block; }
    .info-popover-title {
      font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.07em; color: var(--accent); margin-bottom: 10px;
    }
    .info-popover p { margin: 0 0 10px; }
    .info-popover p:last-child { margin: 0; }
    .info-popover strong { color: var(--text); }
    .info-popover-wrap { position: relative; display: inline-block; }

    /* =====================================================
       PRINT STYLES — MLMC Branded Reports
       ===================================================== */
    @media print {
      body > *:not(#print-area) { display: none !important; }
      #print-area {
        display: block !important;
        position: fixed !important;
        top: 0; left: 0;
        width: 100%; min-height: 100%;
        background: #fff; color: #1a1a1a;
        font-family: 'Arial', 'Helvetica', sans-serif;
        padding: 0;
        font-size: 11px;
        line-height: 1.5;
        z-index: 99999;
      }

      /* ── Branded banner ── */
      .print-banner {
        background: #1c1a18;
        display: flex;
        align-items: center;
        padding: 14px 36px;
        gap: 18px;
      }
      .print-logo-img {
        height: 58px;
        width: auto;
        object-fit: contain;
        flex-shrink: 0;
      }
      .print-banner-company { flex: 1; }
      .print-company-name {
        font-size: 19px;
        font-weight: 800;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: #ffffff;
        font-family: 'Arial Black', 'Arial', sans-serif;
        line-height: 1.1;
      }
      .print-company-sub {
        font-size: 8px;
        color: rgba(255,255,255,0.45);
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin-top: 4px;
      }
      .print-banner-right { text-align: right; flex-shrink: 0; }
      .print-confidential-badge {
        display: inline-block;
        background: #8b0000;
        color: #fff;
        font-size: 7.5px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        padding: 3px 10px;
        border-radius: 2px;
      }
      .print-prepared-line {
        font-size: 8px;
        color: rgba(255,255,255,0.5);
        margin-top: 6px;
        letter-spacing: 0.3px;
      }

      /* Red accent stripe */
      .print-accent-stripe {
        height: 4px;
        background: linear-gradient(90deg, #6b0000 0%, #c0392b 30%, #e74c3c 60%, #c0392b 80%, #6b0000 100%);
      }

      /* Report title bar */
      .print-title-bar {
        background: #fafafa;
        border-bottom: 1px solid #ddd;
        padding: 12px 36px 11px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
      }
      .print-report-title {
        font-size: 17px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #1a1a1a;
        font-family: 'Arial', sans-serif;
      }
      .print-report-sub {
        font-size: 10px;
        color: #555;
        margin-top: 3px;
      }
      .print-title-bar-right {
        font-size: 8.5px;
        color: #999;
        text-align: right;
        line-height: 1.6;
      }

      /* Content body padding */
      .print-body { padding: 18px 36px 28px; }

      /* ── Section titles ── */
      .print-section { margin-bottom: 20px; page-break-inside: avoid; }
      .print-section-title {
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: #fff;
        background: #2c2c2c;
        padding: 5px 10px 5px 14px;
        margin-bottom: 0;
        margin-top: 16px;
        border-left: 4px solid #c0392b;
      }
      /* keep old .print-divider for any reports that still use it */
      .print-divider {
        border: none;
        border-top: 2px solid #1a1a1a;
        margin: 10px 0 18px;
      }

      /* ── Financial table ── */
      .print-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
      .pnl-table thead tr th {
        background: #2c2c2c;
        color: #fff;
        padding: 7px 10px;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        border-bottom: 3px solid #c0392b;
      }
      .pnl-table thead tr th.num { text-align: right; }
      .pnl-table .print-label { padding: 4px 10px; color: #222; }
      .pnl-table .print-val { padding: 4px 10px; text-align: right; font-family: 'Courier New', monospace; }
      .pnl-table .print-pct { padding: 4px 10px; text-align: right; color: #555; font-size: 10px; }
      .pnl-table .indent { padding-left: 24px; }
      .pnl-table .sub-row td { border-bottom: 1px solid #f0f0f0; }
      .pnl-table tbody tr:nth-child(even) td { background: #f9f9f9; }
      .pnl-table .section-head-row td {
        background: #f2f2f2;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 9.5px;
        letter-spacing: 0.6px;
        padding: 5px 10px;
        color: #333;
        border-top: 1px solid #ddd;
        border-left: 3px solid #c0392b;
      }
      .pnl-table .blank-row td { height: 8px; background: transparent !important; }
      .pnl-table .total-row td {
        font-weight: 700;
        border-top: 2px solid #333;
        border-bottom: 3px double #333;
        padding: 5px 10px;
        background: #f0f0f0 !important;
        font-size: 11.5px;
      }
      .pnl-table .gross-profit-row td { background: #e8f5e9 !important; }
      .pnl-table .net-positive td { background: #e8f5e9 !important; color: #1a5c2a; }
      .pnl-table .net-negative td { background: #fdecea !important; color: #a31515; }
      .pnl-table .best-scenario td { background: #fff8e1 !important; }
      .pnl-table .over-budget td { color: #a31515; }
      .pnl-table .neg { color: #a31515; }
      .pnl-table .print-notes { padding: 8px 12px; color: #444; font-style: italic; line-height: 1.7; }

      /* ── Signature block ── */
      .print-signature-block {
        display: flex;
        justify-content: space-between;
        margin-top: 40px;
        padding-top: 10px;
        border-top: 1px solid #ccc;
        gap: 24px;
      }
      .sig-col { flex: 1; text-align: center; }
      .sig-line { border-bottom: 1px solid #333; margin-bottom: 4px; height: 28px; }
      .sig-label { font-size: 9px; color: #666; text-transform: uppercase; letter-spacing: 0.5px; }

      /* ── Disclaimer ── */
      .print-disclaimer {
        margin-top: 16px;
        font-size: 8px;
        color: #aaa;
        text-align: center;
        font-style: italic;
        border-top: 1px solid #eee;
        padding-top: 8px;
      }

      /* ── Branded footer ── */
      .print-footer {
        border-top: 3px solid #1c1a18;
        background: #f8f8f8;
        padding: 8px 36px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 8px;
        color: #888;
        margin-top: 28px;
      }
      .print-footer-logo {
        height: 20px;
        width: auto;
        opacity: 0.35;
      }
      .print-footer-center { text-align: center; }
      .print-footer-right  { text-align: right; }
    }

    /* =====================================================
       MAIN CONTENT
       ===================================================== */
    #main-content {
      flex: 1;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      position: relative;
      z-index: 1;
    }

    /* =====================================================
       SECTION HEADER
       ===================================================== */
    .section-header {
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--text-muted);
      margin-bottom: 12px;
      border-bottom: 1px solid var(--border);
      padding-bottom: 8px;
    }


    /* =====================================================
       SUMMARY CARDS ROW
       ===================================================== */
    #summary-cards {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 14px;
    }

    .summary-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--card-shadow);
      padding: 16px 18px;
      position: relative;
      overflow: hidden;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .summary-card:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 -1px 0 rgba(0,0,0,0.3) inset, 0 14px 36px rgba(0,0,0,0.65), 0 5px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3); }


    .summary-card::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: var(--accent);
    }


    .s-label {
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      margin-bottom: 6px;
    }

    .s-value {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--text);
    }


    .s-value.positive { color: #22c55e; }
    .s-value.negative { color: #ef4444; }

    /* =====================================================
       TWO COLUMN SECTION
       ===================================================== */
    #two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    /* Budget table */
    .budget-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.82rem;
    }

    .budget-table th {
      text-align: left;
      padding: 8px 10px;
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      border-bottom: 1px solid var(--border);
      font-weight: 600;
    }

    .budget-table td {
      padding: 10px 10px;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      vertical-align: middle;
    }

    .budget-table tr:last-child td { border-bottom: none; }

    .progress-bar-wrap {
      background: rgba(255,255,255,0.07);
      border-radius: 4px;
      height: 6px;
      width: 120px;
      overflow: hidden;
    }

    .progress-bar-fill {
      height: 100%;
      border-radius: 4px;
      transition: width 0.6s ease;
    }

    .pct-text {
      font-size: 0.7rem;
      margin-left: 8px;
      color: var(--text-muted);
    }

    /* Alert panel */
    .alert-item {
      display: flex;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
    }

    .alert-item:last-child { border-bottom: none; }

    .severity-badge {
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
      align-self: flex-start;
      flex-shrink: 0;
    }

    .severity-INFO     { background: rgba(99,102,241,0.2);  color: #a5b4fc; border: 1px solid rgba(99,102,241,0.3); }
    .severity-WARNING  { background: rgba(234,179,8,0.2);   color: #fbbf24; border: 1px solid rgba(234,179,8,0.3); }
    .severity-CRITICAL { background: rgba(239,68,68,0.2);   color: #f87171; border: 1px solid rgba(239,68,68,0.3); }

    .alert-body p { font-size: 0.82rem; color: var(--text); margin-bottom: 3px; }
    .alert-rec { font-size: 0.72rem; color: var(--text-muted); }

    /* =====================================================
       QUARTERLY SCORECARD
       ===================================================== */
    .scorecard-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.85rem;
    }

    .scorecard-table th {
      padding: 10px 14px;
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-muted);
      border-bottom: 1px solid var(--border);
      text-align: right;
      font-weight: 600;
    }

    .scorecard-table th:first-child { text-align: left; }

    .scorecard-table td {
      padding: 10px 14px;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      text-align: right;
    }

    .scorecard-table td:first-child { text-align: left; color: var(--text-muted); font-size: 0.78rem; }
    .scorecard-table tr:last-child td { border-bottom: none; font-weight: 700; }

    .td-positive { color: #22c55e; }
    .td-negative { color: #ef4444; }

    .status-badge {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    .status-ON_TRACK { background: rgba(34,197,94,0.2);  color: #22c55e; border: 1px solid rgba(34,197,94,0.4); }
    .status-AT_RISK  { background: rgba(234,179,8,0.2);  color: #eab308; border: 1px solid rgba(234,179,8,0.4); }
    .status-BEHIND   { background: rgba(239,68,68,0.2);  color: #ef4444; border: 1px solid rgba(239,68,68,0.4); }
    .status-CLOSED   { background: rgba(148,163,184,0.15); color: #94a3b8; border: 1px solid rgba(148,163,184,0.3); }

    /* Scorecard Q1–Q4 tabs */
    .sc-qtab {
      display: flex; flex-direction: column; align-items: center;
      padding: 5px 14px; border-radius: 7px; border: 1px solid var(--border);
      background: transparent; color: var(--text-muted);
      cursor: pointer; font-family: var(--font); font-size: 0.78rem; font-weight: 700;
      letter-spacing: 0.04em; transition: all 0.18s; line-height: 1.2;
    }
    .sc-qtab:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,255,255,0.04); }
    .sc-qtab.active { border-color: var(--accent); color: var(--accent); background: rgba(34,197,94,0.1); }
    .sc-qtab.closed { border-color: rgba(148,163,184,0.3); color: #94a3b8; }
    .sc-qtab.closed.active { background: rgba(148,163,184,0.1); }
    .sc-qtab-sub { font-size: 0.55rem; font-weight: 500; letter-spacing: 0.03em; opacity: 0.7; margin-top: 1px; }

    /* =====================================================
       YEAR-TO-DATE / YEAR-OVER-YEAR (Overview Tab)
       ===================================================== */
    #ytd-metrics {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 4px;
    }
    .ytd-metric-block {
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 16px;
    }
    .ytd-metric-label {
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      margin-bottom: 6px;
    }
    .ytd-metric-value {
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--text);
      font-variant-numeric: tabular-nums;
      margin-bottom: 6px;
      line-height: 1.1;
    }
    .ytd-metric-value.green { color: var(--green); }
    .ytd-metric-value.red   { color: var(--red); }
    .ytd-yoy-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .ytd-compare-val {
      font-size: 0.75rem;
      color: var(--text-muted);
    }
    .ytd-yoy-badge {
      font-size: 0.7rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 10px;
    }
    .ytd-yoy-up   { background: rgba(34,197,94,0.15);  color: #22c55e; border: 1px solid rgba(34,197,94,0.3); }
    .ytd-yoy-down { background: rgba(239,68,68,0.15);  color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
    .ytd-yoy-flat { background: rgba(255,255,255,0.06); color: var(--text-muted); border: 1px solid var(--border); }

    /* Month-by-month comparison table */
    .ytd-month-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.8rem;
    }
    .ytd-month-table th {
      text-align: right;
      padding: 6px 10px;
      color: var(--text-muted);
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }
    .ytd-month-table th:first-child { text-align: left; }
    .ytd-month-table td {
      text-align: right;
      padding: 7px 10px;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      font-variant-numeric: tabular-nums;
      color: var(--text);
    }
    .ytd-month-table td:first-child { text-align: left; font-weight: 600; color: var(--text); }
    .ytd-month-table tr:last-child td { border-bottom: none; font-weight: 700; background: rgba(255,255,255,0.03); }
    .ytd-net-pos { color: var(--green); }
    .ytd-net-neg { color: var(--red); }
    .ytd-yoy-cell-up   { color: #22c55e; font-weight: 700; }
    .ytd-yoy-cell-down { color: #ef4444; font-weight: 700; }

    @media (max-width: 800px) {
      #ytd-metrics { grid-template-columns: 1fr; }
    }

    /* =====================================================
       QUARTERLY GAME PLAN (Quarterly Tab)
       ===================================================== */
    #qgp-summary-bar {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 16px;
    }
    .qgp-metric {
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 12px;
    }
    .qgp-metric-label {
      font-size: 0.68rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--text-muted);
      margin-bottom: 4px;
    }
    .qgp-metric-value {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text);
    }
    .qgp-metric-value.green { color: var(--green); }
    .qgp-metric-value.red   { color: var(--red); }

    #qgp-months {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 14px;
    }
    .qgp-month-card {
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px;
      position: relative;
    }
    .qgp-month-card.current-month {
      border-color: rgba(74,144,196,0.5);
      background: rgba(74,144,196,0.06);
    }
    .qgp-month-label {
      font-size: 0.62rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-muted);
      margin-bottom: 2px;
    }
    .qgp-month-name {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 10px;
    }
    .qgp-month-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.78rem;
      margin-bottom: 4px;
      color: var(--text-muted);
    }
    .qgp-month-row span:last-child { font-weight: 600; }
    .qgp-month-row .green { color: var(--green); }
    .qgp-month-row .red   { color: var(--red); }
    .qgp-month-pill {
      display: inline-block;
      margin-top: 10px;
      padding: 3px 10px;
      border-radius: 12px;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .qgp-pill-complete { background: rgba(34,197,94,0.2); color: #22c55e; border: 1px solid rgba(34,197,94,0.4); }
    .qgp-pill-current  { background: rgba(74,144,196,0.2); color: #4a90c4; border: 1px solid rgba(74,144,196,0.4); }
    .qgp-pill-upcoming { background: rgba(255,255,255,0.06); color: var(--text-muted); border: 1px solid var(--border); }

    #qgp-strategy-note {
      background: rgba(74,144,196,0.06);
      border: 1px solid rgba(74,144,196,0.15);
      border-radius: 7px;
      padding: 9px 13px;
      font-size: 0.78rem;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    #qgp-strategy-note .highlight { color: var(--text); font-weight: 600; }

    /* =====================================================
       MONTHLY DAYS REMAINING BANNER
       ===================================================== */
    #month-days-banner {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--card-shadow);
      padding: 14px 20px;
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    .month-days-left {
      display: flex;
      align-items: baseline;
      gap: 6px;
      flex-shrink: 0;
    }
    .month-days-number {
      font-size: 2rem;
      font-weight: 800;
      color: var(--accent);
      font-variant-numeric: tabular-nums;
    }
    .month-days-label {
      font-size: 0.82rem;
      color: var(--text-muted);
    }
    .month-days-progress-wrap {
      flex: 1;
      min-width: 140px;
    }
    .month-days-progress-bar {
      height: 7px;
      background: rgba(255,255,255,0.07);
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 4px;
    }
    .month-days-progress-fill {
      height: 100%;
      background: var(--accent);
      border-radius: 4px;
      transition: width 0.6s ease;
    }
    .month-days-pct-label {
      font-size: 0.7rem;
      color: var(--text-muted);
    }
    .month-days-projected {
      font-size: 0.82rem;
      color: var(--text-muted);
      white-space: nowrap;
    }
    .month-days-projected strong { color: var(--text); }

    /* =====================================================
       PACE TABLE (Monthly tab)
       ===================================================== */
    .pace-table th:nth-child(6),
    .pace-table td:nth-child(6) { min-width: 130px; }
    .pace-table th:nth-child(7),
    .pace-table td:nth-child(7) { min-width: 100px; }
    .pace-status-ok       { color: var(--green); font-weight: 600; font-size: 0.78rem; }
    .pace-status-watch    { color: var(--yellow); font-weight: 600; font-size: 0.78rem; }
    .pace-status-over     { color: var(--red); font-weight: 600; font-size: 0.78rem; }
    .pace-status-nobudget { color: var(--text-muted); font-size: 0.78rem; }

    /* =====================================================
       RECOVERY SUGGESTIONS
       ===================================================== */
    #recovery-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .recovery-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .recovery-card.best-option {
      border: 2px solid #ffd700;
      box-shadow: 0 0 20px rgba(255,215,0,0.2);
    }

    .recovery-card.best-option::before {
      content: '★ BEST OPTION';
      display: block;
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: #ffd700;
      margin-bottom: 8px;
    }

    .recovery-type {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--accent);
      margin-bottom: 12px;
    }

    .feasibility-wrap {
      margin-bottom: 14px;
    }

    .feasibility-label {
      font-size: 0.65rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 4px;
      display: flex;
      justify-content: space-between;
    }

    .feasibility-bar {
      background: rgba(255,255,255,0.07);
      border-radius: 4px;
      height: 8px;
      overflow: hidden;
    }

    .feasibility-fill {
      height: 100%;
      border-radius: 4px;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      transition: width 0.8s ease;
    }

    .recovery-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 12px;
      font-size: 0.75rem;
    }

    .rec-stat-label { color: var(--text-muted); font-size: 0.65rem; }
    .rec-stat-value { color: var(--text); font-weight: 600; }

    .recovery-text {
      font-size: 0.75rem;
      color: var(--text-muted);
      line-height: 1.5;
      border-top: 1px solid var(--border);
      padding-top: 10px;
    }

    /* =====================================================
       FUTURE EXPENSES TABS
       ===================================================== */
    .tab-buttons {
      display: flex;
      gap: 4px;
      margin-bottom: 16px;
      border-bottom: 1px solid var(--border);
      padding-bottom: 0;
    }

    .tab-btn {
      padding: 8px 18px;
      font-size: 0.75rem;
      font-weight: 600;
      background: transparent;
      color: var(--text-muted);
      border: none;
      border-bottom: 2px solid transparent;
      transition: all 0.2s;
      margin-bottom: -1px;
      font-family: var(--font);
      letter-spacing: 0.04em;
    }

    .tab-btn:hover { color: var(--text); }
    .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

    .tab-pane { display: none; }
    .tab-pane.active { display: block; }

    .expenses-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.82rem;
    }

    .expenses-table th {
      text-align: left;
      padding: 8px 12px;
      font-size: 0.63rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      border-bottom: 1px solid var(--border);
      font-weight: 600;
    }

    .expenses-table td {
      padding: 10px 12px;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }

    .expenses-table tr:last-child td { border-bottom: none; }

    .exp-status-badge {
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.06em;
    }

    .status-PENDING  { background: rgba(234,179,8,0.15);  color: #fbbf24; border: 1px solid rgba(234,179,8,0.3); }
    .status-PAID     { background: rgba(34,197,94,0.15);  color: #22c55e; border: 1px solid rgba(34,197,94,0.3); }
    .status-OVERDUE  { background: rgba(239,68,68,0.15);  color: #f87171; border: 1px solid rgba(239,68,68,0.3); }

    /* =====================================================
       FOOTER
       ===================================================== */
    #footer {
      padding: 16px 24px;
      text-align: right;
      font-size: 0.7rem;
      color: var(--text-muted);
      border-top: 1px solid var(--border);
      letter-spacing: 0.04em;
    }

    /* =====================================================
       FINTECH BRANDING
       ===================================================== */
    .fintech-powered-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      text-decoration: none;
      transition: opacity 0.2s;
    }
    .fintech-powered-badge:hover { opacity: 0.8; }
    .fintech-powered-badge img {
      height: 22px;
      width: auto;
      object-fit: contain;
    }
    .fintech-powered-badge .ftb-text {
      font-size: 0.65rem;
      font-weight: 600;
      color: var(--text-muted);
      letter-spacing: 0.04em;
      line-height: 1.2;
      text-transform: uppercase;
    }
    .fintech-powered-badge .ftb-text span {
      display: block;
      font-size: 0.58rem;
      font-weight: 400;
      color: #6aaee0;
    }
    /* Login screen variant */
    #login-fintech-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,0.1);
      cursor: pointer;
    }
    #login-fintech-badge img { height: 28px; }
    #login-fintech-badge .lfb-text {
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
    }
    #login-fintech-badge:hover .lfb-text { color: rgba(255,255,255,0.7); }
    /* Footer */
    #footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
    }
    #footer .fintech-powered-badge img { height: 20px; }
    #footer .footer-email {
      font-size: 0.66rem;
      color: var(--text-muted);
      opacity: 0.7;
    }

    /* FinTech Contact Popup */
    #fintech-contact-popup {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 99999;
      background: rgba(0,0,0,0.65);
      backdrop-filter: blur(6px);
      align-items: center;
      justify-content: center;
    }
    #fintech-contact-popup.open { display: flex; }
    #fintech-contact-modal {
      background: linear-gradient(145deg, #1e2230, #252b3b);
      border: 1px solid rgba(106,174,224,0.3);
      border-radius: 16px;
      padding: 36px 44px;
      text-align: center;
      max-width: 380px;
      width: 90%;
      box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(106,174,224,0.12);
      animation: tourPopIn 0.38s cubic-bezier(0.34,1.15,0.64,1) both;
    }
    #fintech-contact-modal img { height: 168px; margin-bottom: 16px; }
    #fintech-contact-modal h3 {
      font-size: 1.1rem;
      font-weight: 700;
      color: #e8e8ea;
      margin-bottom: 4px;
    }
    #fintech-contact-modal .fcp-sub {
      font-size: 0.75rem;
      color: #6aaee0;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 20px;
    }
    #fintech-contact-modal .fcp-name {
      font-size: 1rem;
      font-weight: 600;
      color: #e8e8ea;
      margin-bottom: 8px;
    }
    #fintech-contact-modal .fcp-email {
      display: inline-block;
      font-size: 0.88rem;
      color: #6aaee0;
      text-decoration: none;
      padding: 8px 20px;
      border: 1px solid rgba(106,174,224,0.4);
      border-radius: 24px;
      margin-bottom: 20px;
      transition: background 0.2s;
    }
    #fintech-contact-modal .fcp-email:hover { background: rgba(106,174,224,0.15); }
    #fintech-contact-modal .fcp-close {
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.12);
      color: var(--text-muted);
      padding: 8px 28px;
      border-radius: 20px;
      cursor: pointer;
      font-size: 0.82rem;
      transition: background 0.2s;
    }
    #fintech-contact-modal .fcp-close:hover { background: rgba(255,255,255,0.13); }

    /* FinTech Fullscreen Video Overlay */
    #fintech-video-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 99998;
      background: #000;
      align-items: center;
      justify-content: center;
    }
    #fintech-video-overlay.open { display: flex; }
    #fintech-video-overlay video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* =====================================================
       COMMERCIAL CINEMATIC OVERLAY — BLOCKBUSTER EDITION
       ===================================================== */
    #commercial-cinematic-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 99999;
      background: #000;
      overflow: hidden;
    }
    #commercial-cinematic-overlay.open { display: block; }

    /* Canvas fills entire overlay */
    #cco-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    /* Vignette overlay */
    .cco-vignette {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.7) 100%);
      pointer-events: none;
      z-index: 2;
    }

    /* Lens flare — horizontal light streak */
    .cco-flare {
      position: absolute;
      top: 50%; left: -100%;
      width: 300%;
      height: 2px;
      background: linear-gradient(90deg, transparent 0%, transparent 30%, rgba(74,144,196,0.01) 35%, rgba(255,255,255,0.8) 48%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.8) 52%, rgba(74,144,196,0.01) 65%, transparent 70%, transparent 100%);
      box-shadow: 0 0 60px 20px rgba(74,144,196,0.3), 0 0 120px 40px rgba(167,139,250,0.15);
      transform: translateY(-50%);
      opacity: 0;
      z-index: 5;
      pointer-events: none;
    }
    .cco-flare.sweep {
      animation: ccoFlareSweep 1.8s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
    }
    @keyframes ccoFlareSweep {
      0%   { left: -100%; opacity: 0; }
      15%  { opacity: 1; }
      85%  { opacity: 1; }
      100% { left: 100%; opacity: 0; }
    }

    /* Second flare — vertical subtle */
    .cco-flare-v {
      position: absolute;
      left: 50%; top: -100%;
      height: 300%;
      width: 1px;
      background: linear-gradient(180deg, transparent 30%, rgba(167,139,250,0.6) 48%, rgba(255,255,255,0.5) 50%, rgba(167,139,250,0.6) 52%, transparent 70%);
      box-shadow: 0 0 40px 10px rgba(167,139,250,0.2);
      transform: translateX(-50%);
      opacity: 0;
      z-index: 4;
      pointer-events: none;
    }
    .cco-flare-v.sweep {
      animation: ccoFlareVSweep 1.5s cubic-bezier(0.25,0.46,0.45,0.94) 0.3s forwards;
    }
    @keyframes ccoFlareVSweep {
      0%   { top: -100%; opacity: 0; }
      20%  { opacity: 0.7; }
      80%  { opacity: 0.7; }
      100% { top: 100%; opacity: 0; }
    }

    /* Glow pulse behind logo — multi-layer */
    .cco-glow-core {
      position: absolute;
      top: 50%; left: 50%;
      width: 600px; height: 600px;
      transform: translate(-50%, -50%) scale(0);
      border-radius: 50%;
      pointer-events: none;
      z-index: 3;
    }
    .cco-glow-core.active {
      animation: ccoGlowPulse 4s ease-in-out infinite, ccoGlowExpand 2s cubic-bezier(0.22,1,0.36,1) forwards;
    }
    @keyframes ccoGlowExpand {
      0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
      100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    }
    @keyframes ccoGlowPulse {
      0%,100% { box-shadow: 0 0 80px 40px rgba(74,144,196,0.15), 0 0 160px 80px rgba(167,139,250,0.08), 0 0 240px 120px rgba(50,215,75,0.04); }
      50%     { box-shadow: 0 0 120px 60px rgba(74,144,196,0.25), 0 0 200px 100px rgba(167,139,250,0.12), 0 0 300px 150px rgba(50,215,75,0.06); }
    }

    /* Logo — cinematic entrance */
    .cco-logo-wrap {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      z-index: 10;
      opacity: 0;
      filter: blur(12px);
      transform: scale(0.3);
    }
    .cco-logo-wrap.enter {
      animation: ccoLogoEnter 2.5s cubic-bezier(0.16,1,0.3,1) forwards;
    }
    @keyframes ccoLogoEnter {
      0%   { opacity: 0; transform: scale(0.3); filter: blur(12px); }
      40%  { opacity: 0.6; filter: blur(4px); }
      100% { opacity: 1; transform: scale(1); filter: blur(0); }
    }
    .cco-logo-wrap img {
      height: 320px;
      filter: drop-shadow(0 0 60px rgba(74,144,196,0.7)) drop-shadow(0 0 120px rgba(167,139,250,0.4)) drop-shadow(0 0 180px rgba(74,144,196,0.2));
    }

    /* Title — light sweep reveal */
    .cco-title {
      font-family: 'Orbitron', sans-serif;
      font-size: 5.5rem;
      font-weight: 800;
      color: transparent;
      letter-spacing: 0.12em;
      margin-top: -10px;
      min-height: 6rem;
      text-shadow: 0 0 40px rgba(74,144,196,0.5), 0 0 80px rgba(167,139,250,0.25);
      background: linear-gradient(90deg, #fff 0%, #fff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      position: relative;
      opacity: 0;
    }
    .cco-title.reveal {
      animation: ccoTitleReveal 1.2s ease-out forwards;
    }
    @keyframes ccoTitleReveal {
      0%   { opacity: 0; letter-spacing: 0.3em; filter: blur(8px); }
      50%  { opacity: 0.7; filter: blur(2px); }
      100% { opacity: 1; letter-spacing: 0.08em; filter: blur(0); }
    }
    /* Shimmer sweep over revealed title */
    .cco-title.reveal::after {
      content: '';
      position: absolute;
      top: 0; left: -100%; bottom: 0;
      width: 60%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
      animation: ccoShimmer 1.5s ease-in-out 0.8s forwards;
    }
    @keyframes ccoShimmer {
      0%   { left: -60%; }
      100% { left: 160%; }
    }

    /* Subtitle */
    .cco-subtitle {
      font-size: 1.25rem;
      color: rgba(167,139,250,0.9);
      font-weight: 500;
      letter-spacing: 0.12em;
      margin-top: -50px;
      opacity: 0;
      text-shadow: 0 0 20px rgba(167,139,250,0.4);
    }
    .cco-subtitle.visible {
      animation: ccoSubIn 1s ease-out forwards;
    }
    @keyframes ccoSubIn {
      0%   { opacity: 0; transform: translateY(15px); letter-spacing: 0.3em; }
      100% { opacity: 1; transform: translateY(0); letter-spacing: 0.12em; }
    }

    /* Credits */
    .cco-credits {
      font-size: 0.82rem;
      color: rgba(255,255,255,0.45);
      letter-spacing: 0.06em;
      margin-top: 16px;
      opacity: 0;
    }
    .cco-credits.visible { animation: ccoSubIn 1s ease-out forwards; }

    /* Fade-out */
    .cco-fadeout { animation: ccoFadeOut 2s ease-in forwards; }
    @keyframes ccoFadeOut { to { opacity: 0; } }

    /* Energy ring around logo */
    .cco-ring {
      position: absolute;
      top: 50%; left: 50%;
      width: 400px; height: 400px;
      transform: translate(-50%, -50%);
      border: 1px solid rgba(74,144,196,0.2);
      border-radius: 50%;
      z-index: 8;
      opacity: 0;
      pointer-events: none;
    }
    .cco-ring.active {
      animation: ccoRingExpand 2s cubic-bezier(0.22,1,0.36,1) forwards, ccoRingSpin 8s linear 2s infinite;
    }
    .cco-ring-2 { width: 480px; height: 480px; border-color: rgba(167,139,250,0.12); }
    .cco-ring-2.active {
      animation: ccoRingExpand 2.5s cubic-bezier(0.22,1,0.36,1) 0.3s forwards, ccoRingSpin 12s linear 2.5s infinite reverse;
    }
    @keyframes ccoRingExpand {
      0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
      100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
    @keyframes ccoRingSpin {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to   { transform: translate(-50%, -50%) rotate(360deg); }
    }

    /* =====================================================
       ANIMATIONS
       ===================================================== */
    @keyframes fadeIn {
      from { opacity: 0; } to { opacity: 1; }
    }

    @keyframes slideDown {
      from { opacity: 0; transform: translateY(-20px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .animate-slide-down { animation: slideDown 0.5s ease forwards; }

    /* =====================================================
       LOADING SPINNER
       ===================================================== */
    .spinner {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid var(--border);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      vertical-align: middle;
      margin-right: 6px;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    /* =====================================================
       RESPONSIVE
       ===================================================== */
    @media (max-width: 1100px) {
      #summary-cards { grid-template-columns: repeat(3, 1fr); }
    }

    @media (max-width: 800px) {
      #summary-cards    { grid-template-columns: repeat(2, 1fr); }
      #two-col          { grid-template-columns: 1fr; }
      #recovery-cards   { grid-template-columns: 1fr; }
      #top-bar          { flex-direction: column; align-items: flex-start; }
      .top-bar-right    { width: 100%; justify-content: flex-start; }
      #qgp-summary-bar  { grid-template-columns: repeat(2, 1fr); }
      #qgp-months       { grid-template-columns: 1fr; }
      #two-col-monthly  { grid-template-columns: 1fr; }
    }

    @media (max-width: 480px) {
      #summary-cards    { grid-template-columns: 1fr 1fr; }
      #main-content     { padding: 14px; }
      #login-card-overlay { padding: 28px 20px; }
      #qgp-summary-bar  { grid-template-columns: repeat(2, 1fr); }
      #month-days-banner { flex-direction: column; align-items: flex-start; }
    }


    /* Pulse animation for live indicator */
    .live-dot {
      display: inline-block;
      width: 7px; height: 7px;
      background: #22c55e;
      border-radius: 50%;
      margin-right: 5px;
      animation: pulse-dot 1.5s ease-in-out infinite;
      vertical-align: middle;
    }

    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.4; transform: scale(0.7); }
    }

    /* =====================================================
       [AUTO-BUDGET] Auto-budget button
       ===================================================== */
    .auto-budget-btn {
      padding: 4px 10px;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      border: 1px solid var(--accent);
      border-radius: calc(var(--radius) - 4px);
      background: transparent;
      color: var(--accent);
      cursor: pointer;
      font-family: var(--font);
      transition: all 0.2s;
      white-space: nowrap;
    }
    .auto-budget-btn:hover { background: var(--accent); color: #fff; }

    .budget-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .budget-header-row .section-header {
      margin-bottom: 0;
      border-bottom: none;
      padding-bottom: 0;
    }

    /* =====================================================
       [TOAST NOTIFICATIONS]
       ===================================================== */
    #toast-container {
      position: fixed;
      bottom: 48px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9999;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      pointer-events: none;
    }

    .toast {
      padding: 13px 26px;
      border-radius: 10px;
      font-size: 0.9rem;
      font-weight: 600;
      color: #fff;
      box-shadow: 0 6px 28px rgba(0,0,0,0.5);
      animation: toastIn 0.3s ease forwards;
      pointer-events: auto;
      max-width: 480px;
      text-align: center;
      white-space: pre-line;
    }

    .toast-success { background: #16a34a; border: 1px solid #22c55e; }
    .toast-error   { background: #dc2626; border: 1px solid #ef4444; }
    .toast-info    { background: #2563eb; border: 1px solid #3b82f6; }
    .toast-out     { animation: toastOut 0.3s ease forwards; }

    @keyframes toastIn  { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
    @keyframes toastOut { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(12px); } }

    /* =====================================================
       [NOTIFICATION BELL]
       ===================================================== */
    #notif-wrap {
      position: relative;
      display: inline-block;
    }

    #notif-btn {
      padding: 7px 12px;
      font-size: 0.85rem;
      font-weight: 700;
      border: 1px solid #475569;
      border-radius: calc(var(--radius) - 4px);
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      font-family: var(--font);
      transition: all 0.2s;
    }
    #notif-btn:hover { border-color: var(--accent); color: var(--accent); }

    #notif-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      background: #dc2626;
      color: #fff;
      font-size: 0.55rem;
      font-weight: 800;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      border: 1.5px solid var(--card-bg);
    }

    /* =====================================================
       [ANNUAL P&L ALERT] Gold star badge
       ===================================================== */
    .severity-ANNUAL_PNL {
      background: rgba(255,215,0,0.15);
      color: #ffd700;
      border: 1px solid rgba(255,215,0,0.5);
    }

    .alert-item-annual-pnl {
      border: 1px solid rgba(255,215,0,0.4) !important;
      border-radius: 6px;
      padding: 12px !important;
      background: rgba(255,215,0,0.04);
    }

    /* Highlight flash for alerts panel scroll */
    @keyframes alertHighlight {
      0%   { box-shadow: 0 0 0 0 rgba(255,215,0,0.6); }
      50%  { box-shadow: 0 0 0 8px rgba(255,215,0,0.15); }
      100% { box-shadow: 0 0 0 0 rgba(255,215,0,0); }
    }
    .alert-panel-flash { animation: alertHighlight 1s ease 3; }

    /* =====================================================
       ORDER PIPELINE STYLES
       ===================================================== */

    /* Pipeline summary bar */
    #pipeline-summary-bar {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 20px;
    }
    @media (max-width: 768px) {
      #pipeline-summary-bar { grid-template-columns: repeat(2, 1fr); }
    }

    .pipeline-stat-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px 18px;
      box-shadow: var(--card-shadow);
    }
    .pipeline-stat-label {
      font-size: 0.68rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      margin-bottom: 6px;
    }
    .pipeline-stat-value {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.1;
    }
    .pipeline-stat-value.green  { color: #22c55e; }
    .pipeline-stat-value.red    { color: #ef4444; }
    .pipeline-stat-value.yellow { color: #eab308; }
    .pipeline-stat-value.blue   { color: #60a5fa; }

    /* Kanban pipeline board */
    #pipeline-board {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 10px;
      margin-bottom: 20px;
      overflow-x: auto;
    }
    @media (max-width: 1100px) {
      #pipeline-board { grid-template-columns: repeat(4, minmax(140px, 1fr)); }
    }
    @media (max-width: 600px) {
      #pipeline-board { grid-template-columns: repeat(2, 1fr); }
    }

    .pipeline-col {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      min-height: 200px;
      display: flex;
      flex-direction: column;
    }
    .pipeline-col-header {
      padding: 10px 12px 8px;
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
      white-space: nowrap;
      overflow: hidden;
    }
    .pipeline-col-count {
      font-size: 0.7rem;
      font-weight: 800;
      padding: 1px 6px;
      border-radius: 10px;
      background: rgba(255,255,255,0.1);
      margin-left: auto;
    }
    .pipeline-col-body {
      padding: 8px;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    /* Stage color accents */
    .stage-SLAUGHTERED    { border-top: 3px solid #6b7280; }
    .stage-AGING          { border-top: 3px solid #3b82f6; }
    .stage-PROCESSING     { border-top: 3px solid #f97316; }
    .stage-FABRICATION        { border-top: 3px solid #f97316; }
    .stage-GENERATING_INVOICES { border-top: 3px solid #a855f7; }
    .stage-AWAITING_PICKUP { border-top: 3px solid #22c55e; }
    .stage-COMPLETE       { border-top: 3px solid #16a34a; }

    /* Aging batch color stripes — left border shows which batch is next for fabrication */
    .order-card.aging-batch-0 { border-left: 4px solid #22c55e; }   /* green  = next up */
    .order-card.aging-batch-1 { border-left: 4px solid #ffd60a; }   /* yellow = second  */
    .order-card.aging-batch-2 { border-left: 4px solid #ff453a; }   /* red    = third   */
    .order-card.aging-batch-3 { border-left: 4px solid #ff453a; }   /* red    = fourth+ */

    /* Aging progress bar inside order card */
    .order-card-aging-bar {
      height: 3px;
      background: rgba(255,255,255,0.1);
      border-radius: 2px;
      margin-top: 5px;
      overflow: hidden;
    }
    .order-card-aging-fill {
      height: 100%;
      border-radius: 2px;
      background: #3b82f6;
      transition: width 0.3s;
    }
    .order-card-aging-fill.ready { background: #22c55e; }

    /* Late fee badge on order card */
    .order-card-late-fee {
      margin-top: 4px;
      font-size: 0.7rem;
      font-weight: 700;
      color: #ef4444;
    }
    .order-card-yield {
      margin-top: 2px;
      font-size: 0.68rem;
      color: #22c55e;
    }

    /* Completed orders table */
    #completed-orders-wrap {
      margin-top: 28px;
    }
    #completed-search {
      width: 100%;
      padding: 7px 12px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--card-bg);
      color: var(--text);
      font-size: 0.82rem;
      margin-bottom: 12px;
    }
    #completed-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.78rem;
    }
    #completed-table th {
      text-align: left;
      padding: 8px 10px;
      color: var(--text-muted);
      font-weight: 600;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border-bottom: 1px solid var(--border);
    }
    #completed-table td {
      padding: 9px 10px;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      color: var(--text);
    }
    #completed-table tbody tr:hover { background: rgba(255,255,255,0.03); }
    .td-yield-good { color: #22c55e; font-weight: 600; }
    .td-yield-low  { color: #ef4444; font-weight: 600; }
    .td-late-fee   { color: #ef4444; }

    /* Efficiency stats section */
    #efficiency-stats-wrap {
      margin-top: 28px;
    }
    #efficiency-cards {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 12px;
      margin-bottom: 20px;
    }
    @media (max-width: 1200px) { #efficiency-cards { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 700px)  { #efficiency-cards { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 500px)  { #efficiency-cards { grid-template-columns: 1fr; } }
    .eff-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 16px;
      text-align: center;
    }
    .eff-card-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
    .eff-card-value { font-size: 1.5rem; font-weight: 700; color: var(--text); }
    .eff-card-sub   { font-size: 0.68rem; color: var(--text-muted); margin-top: 3px; }
    #throughput-chart-wrap {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 16px;
    }
    #throughput-chart-title {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 12px;
    }

    /* Order cards in pipeline */
    .order-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 8px 10px;
      font-size: 0.78rem;
      cursor: pointer;
      transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
      box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 10px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
    }
    .order-card:hover { background: rgba(255,255,255,0.07); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 7px 16px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3); }
    .order-card-name {
      font-weight: 600;
      color: var(--text);
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .order-card-detail {
      font-size: 0.7rem;
      color: var(--text-muted);
    }
    .order-card-fee {
      margin-top: 4px;
      font-size: 0.7rem;
      font-weight: 700;
      color: #ef4444;
    }
    .order-card-warning {
      margin-top: 4px;
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--yellow);
    }
    .order-card-yield {
      margin-top: 3px;
      font-size: 0.68rem;
      font-weight: 600;
    }
    .order-card-yield.yield-good { color: #22c55e; }
    .order-card-yield.yield-low  { color: #ef4444; }
    /* Aging progress bar (inside order card) */
    .aging-progress-wrap {
      height: 5px;
      background: rgba(255,255,255,0.1);
      border-radius: 3px;
      margin: 5px 0 2px;
      overflow: hidden;
    }
    .aging-progress-bar {
      height: 100%;
      background: linear-gradient(90deg, #48cae4, #0096c7);
      border-radius: 3px;
      transition: width 0.3s;
    }
    .aging-days-label {
      font-size: 0.65rem;
      color: var(--text-muted);
      margin-bottom: 2px;
    }
    .order-card-empty {
      font-size: 0.7rem;
      color: var(--text-muted);
      text-align: center;
      padding: 20px 8px;
      opacity: 0.55;
      border: 1px dashed rgba(255,255,255,0.08);
      border-radius: 8px;
      margin: 4px 2px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
    }
    .order-card-empty::before {
      content: '○';
      font-size: 1.1rem;
      opacity: 0.4;
      display: block;
    }

    /* Pipeline loading skeleton card */
    .order-card-skeleton {
      border-radius: 8px;
      padding: 10px 12px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.05);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .order-card-skeleton-line {
      height: 9px;
      border-radius: 4px;
      background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s ease-in-out infinite;
    }
    .order-card-skeleton-line.short { width: 55%; }
    .order-card-skeleton-line.med   { width: 75%; }

    /* Late-fee alerts (lives in Freezer tab) */
    #pipeline-alerts {
      margin-bottom: 16px;
    }
    #pipeline-alerts:empty {
      display: none;
    }
    .pipeline-alert-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 8px;
      margin-bottom: 6px;
      font-size: 0.82rem;
    }
    .pipeline-alert-item.approaching {
      background: rgba(234,179,8,0.12);
      border: 1px solid rgba(234,179,8,0.4);
    }
    .pipeline-alert-item.active-fee {
      background: rgba(239,68,68,0.12);
      border: 1px solid rgba(239,68,68,0.4);
    }
    .pipeline-alert-icon {
      font-size: 1.1rem;
      flex-shrink: 0;
    }
    .pipeline-alert-text { flex: 1; }
    .pipeline-alert-name { font-weight: 600; color: var(--text); }
    .pipeline-alert-msg  { color: var(--text-muted); font-size: 0.76rem; }
    .pipeline-alert-fee  { font-weight: 700; color: #ef4444; white-space: nowrap; }

    /* Add Order button */
    #add-order-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: calc(var(--radius) - 2px);
      font-size: 0.83rem;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.2s;
    }
    #add-order-btn:hover { opacity: 0.85; }

    #upload-excel-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 14px;
      background: transparent;
      color: var(--text-muted);
      border: 1.5px dashed var(--border);
      border-radius: calc(var(--radius) - 2px);
      font-size: 0.83rem; font-weight: 600;
      cursor: pointer; transition: all 0.2s;
    }

    /* ── Customer Report Modal ──────────────────────── */
    #customer-modal-overlay {
      position: fixed; inset: 0; z-index: 600;
      background: rgba(0,0,0,0.75);
      display: flex; align-items: center; justify-content: center;
      backdrop-filter: blur(4px);
    }
    #customer-modal {
      background: var(--card-bg);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 14px;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.05) inset,
        0 -1px 0 rgba(0,0,0,0.3) inset,
        0 32px 80px rgba(0,0,0,0.8),
        0 8px 24px rgba(0,0,0,0.5),
        0 2px 6px rgba(0,0,0,0.4);
      transform: perspective(900px) rotateX(1.5deg);
      overflow: hidden;
      padding: 28px 32px;
      width: 100%; max-width: 620px;
      max-height: 88vh; overflow-y: auto;
      position: relative;
    }
    #customer-modal::before {
      content: '';
      display: block;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      opacity: 0.7;
      margin: -20px -24px 20px;
    }
    #customer-modal h3 {
      font-family: 'Orbitron', sans-serif;
      font-size: 0.9rem;
      font-weight: 700;
      color: #c8d8e8;
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: 0.22em;
      text-align: center;
      text-shadow: none;
      border-bottom: 1px solid rgba(200,216,232,0.12);
      padding-bottom: 10px;
    }
    .customer-modal-close {
      position: absolute; top: 14px; right: 16px;
      background: none; border: 1px solid var(--border);
      color: var(--text-muted); font-size: 1.1rem;
      cursor: pointer; padding: 2px 10px; border-radius: 6px;
      transition: color 0.15s, background 0.15s;
      line-height: 1.6;
    }
    .customer-modal-close:hover { color: var(--text); background: var(--hover); }
    .cust-stat-grid {
      display: grid; grid-template-columns: 1fr 1fr 1fr;
      gap: 10px; margin: 14px 0;
    }
    .cust-stat-box {
      background: var(--bg); border: 1px solid var(--border);
      border-radius: 8px; padding: 10px 14px; text-align: center;
      box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 12px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.3);
    }
    .cust-stat-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
    .cust-stat-value { font-size: 1.15rem; font-weight: 700; color: var(--text); }
    .cust-section-title {
      font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.07em; color: var(--text-muted);
      margin: 18px 0 8px; border-bottom: 1px solid var(--border); padding-bottom: 4px;
    }
    .cust-order-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 7px 10px; border-radius: 6px; font-size: 0.82rem;
      border: 1px solid var(--border); margin-bottom: 5px;
      background: var(--bg);
    }
    .cust-order-stage {
      font-size: 0.7rem; padding: 2px 7px; border-radius: 12px;
      font-weight: 600; background: var(--hover); color: var(--text-muted);
    }
    .cust-confidence {
      font-size: 0.72rem; padding: 2px 8px; border-radius: 10px; font-weight: 600;
    }
    .cust-confidence.high  { background: rgba(34,197,94,0.15); color: #22c55e; }
    .cust-confidence.low   { background: rgba(255,214,10,0.15); color: #d4a800; }
    .cust-confidence.none  { background: rgba(150,150,150,0.15); color: #888; }
    .cust-name-link { cursor: pointer; border-bottom: 1px dotted var(--text-muted); }
    .cust-name-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

    /* ── Customer Archive Sidebar ───────────────────── */
    #pipeline-with-sidebar {
      display: flex; gap: 14px; align-items: flex-start;
    }
    #pipeline-board { flex: 1; min-width: 0; }
    #customer-archive-sidebar {
      width: 210px; flex-shrink: 0;
      background: var(--card-bg); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 14px;
      position: sticky; top: 20px;
      box-shadow: var(--card-shadow);
    }
    #customer-archive-sidebar h4 {
      font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.07em; color: var(--text-muted); margin: 0 0 10px;
    }
    #customer-archive-search {
      width: 100%; padding: 7px 10px; border-radius: 6px;
      border: 1px solid var(--border); background: var(--bg);
      color: var(--text); font-size: 0.82rem; box-sizing: border-box;
    }
    #customer-archive-search:focus { outline: none; border-color: var(--accent); }
    #customer-archive-results { margin-top: 8px; }
    .customer-archive-result {
      display: flex; align-items: center; justify-content: space-between;
      padding: 6px 8px; border-radius: 6px; cursor: pointer;
      font-size: 0.8rem; transition: background 0.15s; gap: 6px;
    }
    .customer-archive-result:hover { background: var(--hover); }
    .cust-result-name {
      flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      cursor: pointer;
    }
    .cust-result-name:hover { color: var(--accent); }
    .cust-add-to-group {
      flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
      background: none; border: 1px solid var(--border);
      color: var(--text-muted); font-size: 0.85rem; line-height: 1;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: all 0.15s; padding: 0;
    }
    .cust-add-to-group:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
    .cust-add-to-group.in-group { background: var(--accent); border-color: var(--accent); color: #fff; }
    .customer-archive-empty { font-size: 0.78rem; color: var(--text-muted); padding: 6px 2px; }

    /* ── Report Group Queue ─────────────────────────── */
    #cust-group-section {
      margin-top: 14px; padding-top: 12px;
      border-top: 1px solid var(--border);
    }
    #cust-group-section h5 {
      font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 8px;
      display: flex; align-items: center; justify-content: space-between;
    }
    #cust-group-clear {
      font-size: 0.65rem; color: var(--text-muted); cursor: pointer;
      background: none; border: none; padding: 0; letter-spacing: 0.05em;
      text-transform: uppercase; transition: color 0.15s;
    }
    #cust-group-clear:hover { color: var(--red); }
    #cust-group-chips { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
    .cust-group-chip {
      display: flex; align-items: center; justify-content: space-between;
      background: rgba(255,255,255,0.04); border: 1px solid var(--border);
      border-radius: 6px; padding: 5px 8px; font-size: 0.78rem; gap: 6px;
    }
    .cust-group-chip-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cust-group-chip-remove {
      background: none; border: none; color: var(--text-muted); cursor: pointer;
      font-size: 0.8rem; padding: 0; line-height: 1; transition: color 0.15s; flex-shrink: 0;
    }
    .cust-group-chip-remove:hover { color: var(--red); }
    #cust-group-view-btn {
      width: 100%; padding: 8px; border-radius: 6px;
      background: var(--accent); color: #fff; border: none;
      font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em;
      cursor: pointer; transition: filter 0.15s;
      text-transform: uppercase;
    }
    #cust-group-view-btn:hover { filter: brightness(1.15); }
    #cust-group-empty { font-size: 0.75rem; color: var(--text-muted); font-style: italic; }

    /* Order modal */
    #order-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 500;
      background: rgba(0,0,0,0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
    }
    #order-modal {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 20px 60px rgba(0,0,0,0.6);
      padding: 28px 32px;
      width: 100%;
      max-width: 520px;
      max-height: 90vh;
      overflow-y: auto;
    }
    #order-modal h3 {
      font-size: 1rem;
      font-weight: 700;
      color: var(--accent);
      margin-bottom: 20px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .order-form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 12px;
    }
    .order-form-row.full { grid-template-columns: 1fr; }
    .order-form-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .order-form-field label {
      font-size: 0.72rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
    }
    .order-form-field input,
    .order-form-field select,
    .order-form-field textarea {
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 8px 10px;
      color: var(--text);
      font-family: var(--font);
      font-size: 0.85rem;
      outline: none;
      transition: border-color 0.2s;
    }
    .order-form-field input:focus,
    .order-form-field select:focus,
    .order-form-field textarea:focus { border-color: var(--accent); }
    .order-form-field select option { background: var(--card-bg); }
    .order-form-field textarea { resize: vertical; min-height: 60px; }
    .order-modal-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      margin-top: 20px;
    }
    .btn-primary {
      padding: 8px 20px;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      font-family: var(--font);
    }
    .btn-primary:hover { opacity: 0.85; }
    .btn-secondary {
      padding: 8px 16px;
      background: transparent;
      color: var(--text-muted);
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      font-family: var(--font);
    }
    .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

    /* Order detail panel */
    .order-detail-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 0.7rem;
      font-weight: 700;
    }
    .badge-SLAUGHTERED    { background: rgba(107,114,128,0.25); color: #9ca3af; }
    .badge-AGING          { background: rgba(59,130,246,0.25);  color: #60a5fa; }
    .badge-PROCESSING     { background: rgba(249,115,22,0.25);  color: #fb923c; }
    .badge-FABRICATION         { background: rgba(249,115,22,0.25);  color: #fb923c; }
    .badge-GENERATING_INVOICES { background: rgba(168,85,247,0.25);  color: #c084fc; }
    .badge-AWAITING_PICKUP { background: rgba(34,197,94,0.25); color: #4ade80; }
    .badge-LATE_FEE       { background: rgba(239,68,68,0.25);  color: #f87171; }
    .badge-COMPLETE       { background: rgba(22,163,74,0.25);  color: #4ade80; }
    .badge-CANCELLED    { background: rgba(107,114,128,0.15); color: #6b7280; }

    /* ─── Debug Monitor Panel ────────────────────────────────── */
    #debug-monitor-btn {
      position: fixed;
      bottom: 18px;
      right: 18px;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--card-bg);
      border: 1.5px solid var(--border);
      color: var(--text-muted);
      font-size: 18px;
      cursor: pointer;
      z-index: 8000;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(0,0,0,0.35);
      transition: border-color 0.2s, color 0.2s, transform 0.15s;
    }
    #debug-monitor-btn:hover { transform: scale(1.1); }
    #debug-monitor-btn.dbg-ok    { border-color: #22c55e; color: #22c55e; }
    #debug-monitor-btn.dbg-warn  { border-color: #ffd60a; color: #ffd60a; }
    #debug-monitor-btn.dbg-error { border-color: #ff453a; color: #ff453a; }
    #debug-monitor-btn.dbg-fix   { border-color: #818cf8; color: #818cf8; }
    #debug-monitor-btn .dbg-badge {
      position: absolute;
      top: -4px; right: -4px;
      min-width: 16px; height: 16px;
      border-radius: 8px;
      background: #ff453a;
      color: #fff;
      font-size: 9px;
      font-weight: 700;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 0 3px;
      line-height: 1;
    }

    #debug-monitor-panel {
      position: fixed;
      bottom: 64px;
      right: 18px;
      width: 340px;
      max-height: 420px;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.55);
      z-index: 7999;
      display: none;
      flex-direction: column;
      overflow: hidden;
      font-size: 0.8rem;
    }
    #debug-monitor-panel.open { display: flex; }
    .dbg-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px 10px;
      border-bottom: 1px solid var(--border);
      background: rgba(255,255,255,0.03);
    }
    .dbg-panel-title {
      font-weight: 700;
      font-size: 0.82rem;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .dbg-live-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #22c55e;
      animation: dbg-pulse 2s infinite;
    }
    .dbg-live-dot.disconnected { background: #ff453a; animation: none; }
    @keyframes dbg-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.8); }
    }
    .dbg-panel-actions { display: flex; gap: 6px; align-items: center; }
    .dbg-run-btn {
      background: none;
      border: 1px solid var(--border);
      color: var(--text-muted);
      border-radius: 6px;
      padding: 3px 8px;
      font-size: 0.72rem;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s;
    }
    .dbg-run-btn:hover { color: var(--text); border-color: var(--text-muted); }
    .dbg-close-btn {
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 16px;
      cursor: pointer;
      line-height: 1;
      padding: 0 2px;
    }
    .dbg-close-btn:hover { color: var(--text); }
    #debug-event-list {
      overflow-y: auto;
      flex: 1;
      padding: 8px 0;
    }
    #debug-event-list::-webkit-scrollbar { width: 4px; }
    #debug-event-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .dbg-event {
      padding: 8px 16px;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      display: flex;
      gap: 10px;
      align-items: flex-start;
      animation: dbg-slide-in 0.25s ease;
    }
    @keyframes dbg-slide-in {
      from { opacity: 0; transform: translateX(12px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .dbg-event:last-child { border-bottom: none; }
    .dbg-event-icon { font-size: 14px; margin-top: 1px; flex-shrink: 0; }
    .dbg-event-body { flex: 1; min-width: 0; }
    .dbg-event-title { color: var(--text); font-weight: 600; line-height: 1.35; }
    .dbg-event-detail { color: var(--text-muted); font-size: 0.72rem; margin-top: 2px; line-height: 1.4; word-break: break-word; }
    .dbg-event-time { color: var(--text-muted); font-size: 0.68rem; margin-top: 3px; }
    .dbg-event.sev-info    .dbg-event-title { color: var(--text-muted); font-weight: 400; }
    .dbg-event.sev-success .dbg-event-title { color: #22c55e; }
    .dbg-event.sev-warning .dbg-event-title { color: #ffd60a; }
    .dbg-event.sev-error   .dbg-event-title { color: #ff453a; }
    .dbg-event.sev-fix     .dbg-event-title { color: #818cf8; }
    .dbg-panel-footer {
      padding: 7px 16px;
      border-top: 1px solid var(--border);
      color: var(--text-muted);
      font-size: 0.7rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .dbg-reconnect-bar {
      padding: 10px 16px;
      background: rgba(255,68,58,0.12);
      border-bottom: 1px solid rgba(255,68,58,0.25);
      color: #ff453a;
      font-size: 0.75rem;
      display: none;
      align-items: center;
      gap: 8px;
    }
    .dbg-reconnect-bar.show { display: flex; }
    .dbg-spinner {
      width: 12px; height: 12px;
      border: 2px solid rgba(255,68,58,0.3);
      border-top-color: #ff453a;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      flex-shrink: 0;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Bottom-right popup notification (appears even when panel closed) */
    #debug-popup-tray {
      position: fixed;
      bottom: 64px;
      right: 18px;
      width: 300px;
      z-index: 7998;
      display: flex;
      flex-direction: column;
      gap: 8px;
      pointer-events: none;
    }
    .dbg-popup {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 14px;
      box-shadow: 0 6px 24px rgba(0,0,0,0.45);
      display: flex;
      gap: 10px;
      align-items: flex-start;
      animation: dbg-pop-in 0.3s ease;
      pointer-events: all;
    }
    @keyframes dbg-pop-in {
      from { opacity: 0; transform: translateX(20px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .dbg-popup-out {
      animation: dbg-pop-out 0.3s ease forwards;
    }
    @keyframes dbg-pop-out {
      to { opacity: 0; transform: translateX(20px); }
    }
    .dbg-popup-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
    .dbg-popup-body { flex: 1; min-width: 0; }
    .dbg-popup-title { font-size: 0.78rem; font-weight: 600; color: var(--text); line-height: 1.35; }
    .dbg-popup-detail { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }
    .dbg-popup.sev-fix   { border-color: rgba(129,140,248,0.5); }
    .dbg-popup.sev-fix .dbg-popup-title { color: #818cf8; }
    .dbg-popup.sev-warning { border-color: rgba(255,214,10,0.4); }
    .dbg-popup.sev-warning .dbg-popup-title { color: #ffd60a; }
    .dbg-popup.sev-error { border-color: rgba(255,68,58,0.4); }
    .dbg-popup.sev-error .dbg-popup-title { color: #ff453a; }

    /* ── Smart AI Notes ─────────────────────────────────── */
    #smart-notes-btn {
      background: rgba(255,255,255,0.07);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-muted);
      font-size: 1rem;
      width: 34px; height: 34px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.2s;
      position: relative;
    }
    #smart-notes-btn:hover { background: rgba(255,255,255,0.12); color: var(--text); }
    #smart-notes-btn.has-notes::after {
      content: '';
      position: absolute;
      top: 5px; right: 5px;
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--accent);
    }

    #smart-notes-panel {
      position: fixed;
      top: 70px; right: 20px;
      width: 340px;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.6);
      z-index: 5000;
      display: none;
      flex-direction: column;
      max-height: calc(100vh - 100px);
    }
    #smart-notes-panel.open { display: flex; }
    .sn-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .sn-title { font-size: 0.88rem; font-weight: 700; color: var(--text); }
    .sn-subtitle { font-size: 0.68rem; color: var(--text-muted); margin-top: 1px; }
    .sn-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; padding: 2px 6px; border-radius: 6px; }
    .sn-close:hover { color: var(--text); }
    .sn-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
    .sn-note-item {
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 12px;
    }
    .sn-note-scenario {
      font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.06em; color: var(--accent); margin-bottom: 4px;
    }
    .sn-note-text { font-size: 0.78rem; color: var(--text); line-height: 1.5; }
    .sn-note-time { font-size: 0.62rem; color: var(--text-muted); margin-top: 5px; }
    .sn-note-del { float: right; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.7rem; padding: 0; }
    .sn-note-del:hover { color: #ff453a; }
    .sn-empty { font-size: 0.78rem; color: var(--text-muted); text-align: center; padding: 20px; }
    .sn-footer { padding: 12px; border-top: 1px solid var(--border); flex-shrink: 0; }
    .sn-textarea {
      width: 100%; box-sizing: border-box;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 0.8rem;
      padding: 8px 10px;
      resize: none;
      font-family: inherit;
      line-height: 1.5;
    }
    .sn-textarea:focus { outline: none; border-color: var(--accent); }
    .sn-textarea-wrap { position: relative; }
    .sn-paste-btn {
      position: absolute; top: 6px; right: 6px;
      background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
      color: var(--text-muted); border-radius: 5px;
      padding: 2px 7px; font-size: 0.65rem; cursor: pointer; line-height: 1.6;
      transition: background 0.15s, color 0.15s;
    }
    .sn-paste-btn:hover { background: rgba(255,255,255,0.16); color: var(--text); }
    .sn-textarea-row { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
    .sn-scenario-sel {
      flex: 1;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 0.75rem;
      padding: 5px 8px;
    }
    /* AI response in smart notes panel */
    @keyframes snThinkDot {
      0%,80%,100% { opacity: 0.2; transform: scale(0.8); }
      40%          { opacity: 1;   transform: scale(1.2); }
    }
    .sn-think-dots span {
      display: inline-block; width: 6px; height: 6px; border-radius: 50%;
      background: #a78bfa; margin: 0 2px;
      animation: snThinkDot 1.2s ease-in-out infinite;
    }
    .sn-think-dots span:nth-child(2) { animation-delay: 0.2s; }
    .sn-think-dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes snSlideIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .sn-ai-result-card {
      animation: snSlideIn 0.35s ease-out forwards;
    }
    .sn-ai-note-echo {
      font-size: 0.68rem; color: #a78bfa; font-style: italic;
      border-left: 2px solid rgba(167,139,250,0.4);
      padding-left: 8px; margin-bottom: 8px; line-height: 1.45;
    }
    .sn-ai-action {
      margin-top: 8px; padding: 7px 10px;
      background: rgba(74,144,196,0.1); border: 1px solid rgba(74,144,196,0.25);
      border-radius: 7px; font-size: 0.72rem; color: #4a90c4; line-height: 1.45;
    }
    .sn-ai-action-label {
      font-size: 0.58rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.06em; color: #4a90c4; margin-bottom: 3px;
    }
    .sn-ask-again-btn {
      margin-top: 8px; width: 100%;
      background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.3);
      border-radius: 7px; color: #a78bfa; font-size: 0.74rem; font-weight: 600;
      padding: 6px 10px; cursor: pointer; transition: background 0.2s;
    }
    .sn-ask-again-btn:hover { background: rgba(167,139,250,0.22); }
    .sn-save-btn {
      background: var(--accent);
      border: none; border-radius: 6px;
      color: #fff; font-size: 0.78rem; font-weight: 700;
      padding: 6px 14px; cursor: pointer;
      white-space: nowrap;
    }
    .sn-save-btn:hover { opacity: 0.85; }

    /* Recovery card action buttons */
    .rec-card-actions {
      display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap;
    }
    .rec-action-btn {
      font-size: 0.7rem; font-weight: 600;
      padding: 5px 11px; border-radius: 6px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.05);
      color: var(--text-muted);
      cursor: pointer; transition: all 0.15s;
    }
    .rec-action-btn:hover { background: rgba(255,255,255,0.1); color: var(--text); }
    .rec-action-btn.wont-work { border-color: rgba(255,68,58,0.4); color: #ff6b63; }
    .rec-action-btn.wont-work:hover { background: rgba(255,68,58,0.12); }
    .rec-action-btn.applied { border-color: rgba(50,215,75,0.4); color: #32d74b; }
    .rec-action-btn.applied:hover { background: rgba(50,215,75,0.12); }
    .rec-action-btn.add-note { border-color: rgba(74,144,196,0.4); color: #4a90c4; }
    .rec-action-btn.add-note:hover { background: rgba(74,144,196,0.12); }
    .rec-dismissed { opacity: 0.35; }
    .rec-dismissed .rec-card-actions .rec-action-btn.wont-work { opacity: 0.5; }

    /* ── Lean Six Sigma Tab ─────────────────────────────── */
    #view-lean { padding: 0 0 40px; }
    .lean-hero {
      background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
      border-radius: 14px;
      padding: 28px 28px 24px;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
    }
    .lean-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 40px,
        rgba(255,255,255,0.015) 40px,
        rgba(255,255,255,0.015) 80px
      );
    }
    .lean-hero-title {
      font-size: 1.35rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: 0.02em;
      margin-bottom: 6px;
      position: relative;
    }
    .lean-hero-sub {
      font-size: 0.82rem;
      color: rgba(255,255,255,0.55);
      position: relative;
    }
    .lean-sigma-badge {
      position: absolute;
      top: 20px; right: 24px;
      font-size: 3.5rem;
      font-weight: 900;
      color: rgba(255,255,255,0.07);
      letter-spacing: -2px;
      user-select: none;
    }
    .lean-score-bar {
      display: flex;
      gap: 10px;
      margin-top: 18px;
      position: relative;
    }
    .lean-score-pill {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 0.78rem;
      color: rgba(255,255,255,0.75);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .lean-score-pill .lsp-val {
      font-weight: 700;
      font-size: 0.9rem;
      color: #fff;
    }
    .lean-score-pill.good .lsp-val  { color: #32d74b; }
    .lean-score-pill.warn .lsp-val  { color: #ffd60a; }
    .lean-score-pill.bad  .lsp-val  { color: #ff453a; }

    /* Section cards */
    .lean-section {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      margin-bottom: 18px;
      overflow: hidden;
    }
    .lean-section-hdr {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 18px;
      background: rgba(255,255,255,0.03);
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      user-select: none;
    }
    .lean-section-hdr:hover { background: rgba(255,255,255,0.05); }
    .lean-section-icon { font-size: 1.1rem; }
    .lean-section-title {
      font-size: 0.88rem;
      font-weight: 700;
      color: var(--text);
      flex: 1;
    }
    .lean-section-score {
      font-size: 0.75rem;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 20px;
    }
    .score-green { background: rgba(50,215,75,0.15); color: #32d74b; }
    .score-yellow { background: rgba(255,214,10,0.15); color: #ffd60a; }
    .score-red { background: rgba(255,68,58,0.15); color: #ff453a; }
    .lean-section-chevron { color: var(--text-muted); font-size: 0.75rem; transition: transform 0.2s; }
    .lean-section.open .lean-section-chevron { transform: rotate(180deg); }
    .lean-section-body { display: none; padding: 18px; }
    .lean-section.open .lean-section-body { display: block; }

    /* KPI metric rows */
    .lean-kpi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 16px;
    }
    @media (max-width: 700px) { .lean-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
    .lean-kpi-card {
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 12px;
      text-align: center;
    }
    .lean-kpi-label { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
    .lean-kpi-value { font-size: 1.15rem; font-weight: 700; }
    .lean-kpi-bench { font-size: 0.62rem; color: var(--text-muted); margin-top: 2px; }

    /* Recommendations */
    .lean-rec-list { list-style: none; padding: 0; margin: 0; }
    .lean-rec-item {
      display: flex;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .lean-rec-item:last-child { border-bottom: none; }
    .lean-rec-priority {
      flex-shrink: 0;
      width: 52px;
      height: 52px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 0.6rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .pri-high   { background: rgba(255,68,58,0.15);  color: #ff453a; border: 1px solid rgba(255,68,58,0.3); }
    .pri-medium { background: rgba(255,214,10,0.15); color: #ffd60a; border: 1px solid rgba(255,214,10,0.3); }
    .pri-low    { background: rgba(50,215,75,0.12);  color: #32d74b; border: 1px solid rgba(50,215,75,0.25); }
    .lean-rec-priority .pri-icon { font-size: 1.3rem; }
    .lean-rec-body { flex: 1; }
    .lean-rec-title { font-size: 0.85rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
    .lean-rec-desc  { font-size: 0.77rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 5px; }
    .lean-rec-impact {
      font-size: 0.7rem;
      color: #32d74b;
      font-weight: 600;
    }
    .lean-rec-impact.warn { color: #ffd60a; }
    .lean-rec-impact.crit { color: #ff453a; }

    /* Waste type badges */
    .lean-waste-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
    .lean-waste-tag {
      font-size: 0.62rem;
      padding: 2px 7px;
      border-radius: 10px;
      background: rgba(255,255,255,0.07);
      color: var(--text-muted);
      border: 1px solid var(--border);
    }

    /* AI Learning Engine Panel */
    /* ── AI ENGINE PANEL — ENERGIZED VISUAL EFFECTS ── */
    @keyframes aiPanelPulse {
      0%   { box-shadow: 0 0 0 0 rgba(74,144,196,0), 0 0 30px rgba(74,144,196,0.08); }
      50%  { box-shadow: 0 0 0 4px rgba(74,144,196,0.08), 0 0 50px rgba(74,144,196,0.18); }
      100% { box-shadow: 0 0 0 0 rgba(74,144,196,0), 0 0 30px rgba(74,144,196,0.08); }
    }
    @keyframes aiBorderFlow {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    @keyframes aiParticleFloat {
      0%   { transform: translateY(0px) translateX(0px) scale(1); opacity: 0.5; }
      33%  { transform: translateY(-12px) translateX(5px) scale(1.2); opacity: 0.8; }
      66%  { transform: translateY(-6px) translateX(-4px) scale(0.9); opacity: 0.6; }
      100% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0.5; }
    }
    @keyframes aiScanLine {
      0%   { transform: translateY(-100%); opacity: 0; }
      10%  { opacity: 0.6; }
      90%  { opacity: 0.6; }
      100% { transform: translateY(400%); opacity: 0; }
    }
    @keyframes aiDataStream {
      0%   { opacity: 0; transform: scaleX(0); }
      20%  { opacity: 1; }
      80%  { opacity: 1; }
      100% { opacity: 0; transform: scaleX(1); }
    }
    @keyframes aiGlowPulse {
      0%,100% { text-shadow: 0 0 8px rgba(74,144,196,0.4); }
      50%      { text-shadow: 0 0 20px rgba(74,144,196,0.9), 0 0 40px rgba(74,144,196,0.3); }
    }
    @keyframes aiOrb {
      0%   { transform: translate(0%, 0%) scale(1); }
      25%  { transform: translate(3%, -4%) scale(1.05); }
      50%  { transform: translate(-2%, 3%) scale(0.97); }
      75%  { transform: translate(4%, 2%) scale(1.03); }
      100% { transform: translate(0%, 0%) scale(1); }
    }
    .ai-engine-panel {
      background: linear-gradient(135deg, rgba(74,144,196,0.10), rgba(50,215,75,0.05), rgba(167,139,250,0.07));
      border: 1px solid rgba(74,144,196,0.35);
      border-radius: 14px;
      padding: 22px 24px;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
      animation: aiPanelPulse 4s ease-in-out infinite;
    }
    /* Animated top-edge glow line */
    .ai-engine-panel::before {
      content: '';
      position: absolute;
      top: 0; left: -100%; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(74,144,196,0.9), rgba(167,139,250,0.7), rgba(50,215,75,0.6), transparent);
      animation: aiDataStream 3.5s ease-in-out infinite;
      z-index: 1;
    }
    /* Scan line sweep */
    .ai-engine-panel::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(74,144,196,0.5), transparent);
      animation: aiScanLine 6s linear infinite;
      z-index: 1;
      pointer-events: none;
    }
    /* Floating ambient orbs (via pseudo on children) */
    .ai-engine-bg-orbs {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }
    .ai-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(40px);
    }
    .ai-orb-1 {
      width: 140px; height: 140px;
      background: radial-gradient(circle, rgba(74,144,196,0.18) 0%, transparent 70%);
      top: -40px; right: 10%;
      animation: aiOrb 8s ease-in-out infinite;
    }
    .ai-orb-2 {
      width: 100px; height: 100px;
      background: radial-gradient(circle, rgba(167,139,250,0.15) 0%, transparent 70%);
      bottom: -20px; left: 5%;
      animation: aiOrb 11s ease-in-out infinite reverse;
    }
    .ai-orb-3 {
      width: 80px; height: 80px;
      background: radial-gradient(circle, rgba(50,215,75,0.10) 0%, transparent 70%);
      top: 40%; right: 5%;
      animation: aiOrb 14s ease-in-out infinite 2s;
    }
    /* Dot grid overlay */
    .ai-engine-panel > *:not(.ai-engine-bg-orbs) { position: relative; z-index: 2; }
    /* Particle dots */
    @keyframes aiDot {
      0%,100% { opacity: 0.15; transform: scale(1); }
      50%      { opacity: 0.55; transform: scale(1.6); }
    }
    .ai-particle-field {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }
    .ai-dot {
      position: absolute;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: #4a90c4;
      animation: aiDot var(--dur, 3s) ease-in-out infinite var(--delay, 0s);
    }
    .ai-engine-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      flex-wrap: wrap;
      gap: 10px;
    }
    .ai-engine-title {
      font-size: 1rem;
      font-weight: 800;
      color: #4a90c4;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ai-engine-badge {
      font-size: 0.6rem;
      padding: 2px 8px;
      border-radius: 20px;
      background: rgba(50,215,75,0.15);
      color: #32d74b;
      border: 1px solid rgba(50,215,75,0.3);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      animation: aiBlink 2.5s ease-in-out infinite;
    }
    @keyframes aiBlink {
      0%,100% { opacity: 1; }
      50%      { opacity: 0.5; }
    }
    .ai-score-row {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 18px;
      flex-wrap: wrap;
    }
    @keyframes aiRingRotate {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    @keyframes aiScoreGlow {
      0%,100% { box-shadow: 0 0 10px rgba(74,144,196,0.3), inset 0 0 10px rgba(74,144,196,0.05); }
      50%      { box-shadow: 0 0 24px rgba(74,144,196,0.7), inset 0 0 16px rgba(74,144,196,0.15); }
    }
    .ai-score-circle {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      border: 2px solid rgba(74,144,196,0.3);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
      animation: aiScoreGlow 3s ease-in-out infinite;
    }
    .ai-score-circle::before {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 2px solid transparent;
      border-top-color: #4a90c4;
      border-right-color: rgba(167,139,250,0.5);
      animation: aiRingRotate 2.5s linear infinite;
    }
    .ai-score-circle::after {
      content: '';
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      border: 1px solid transparent;
      border-bottom-color: rgba(50,215,75,0.4);
      border-left-color: rgba(74,144,196,0.2);
      animation: aiRingRotate 4s linear infinite reverse;
    }
    .ai-score-num  { font-size: 1.4rem; font-weight: 900; color: #4a90c4; line-height: 1; }
    .ai-score-lbl  { font-size: 0.5rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
    .ai-insights-list { display: flex; flex-direction: column; gap: 10px; }
    .ai-insight-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px;
      border-left: 3px solid #4a90c4;
      cursor: pointer;
      transition: background 0.2s;
    }
    .ai-insight-card.critical { border-left-color: #ff453a; }
    .ai-insight-card.warn     { border-left-color: #ffd60a; }
    .ai-insight-card.good     { border-left-color: #32d74b; }
    .ai-insight-card:hover { background: rgba(255,255,255,0.07); }
    .ai-insight-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 6px;
    }
    .ai-insight-title { font-size: 0.82rem; font-weight: 700; color: var(--text); flex: 1; }
    .ai-insight-weight {
      font-size: 0.6rem;
      color: var(--text-muted);
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 2px 6px;
      flex-shrink: 0;
    }
    .ai-insight-body { font-size: 0.76rem; color: var(--text-muted); line-height: 1.5; display: none; }
    .ai-insight-card.expanded .ai-insight-body { display: block; }
    .ai-insight-category {
      font-size: 0.58rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-weight: 700;
      margin-bottom: 3px;
    }
    .ai-weights-toggle {
      font-size: 0.72rem;
      color: #4a90c4;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 2px;
      margin-top: 12px;
      display: inline-block;
    }
    .ai-weights-panel {
      display: none;
      margin-top: 12px;
    }
    .ai-weights-panel.open { display: block; }
    .ai-weight-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 0;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      font-size: 0.72rem;
    }
    .ai-weight-row:last-child { border-bottom: none; }
    .ai-weight-name { flex: 1; color: var(--text-muted); }
    .ai-weight-bar-wrap { width: 100px; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; flex-shrink: 0; }
    .ai-weight-bar { height: 100%; border-radius: 3px; background: #4a90c4; transition: width 0.5s; }
    .ai-weight-val { font-weight: 700; color: var(--text); width: 32px; text-align: right; }
    .ai-engine-empty { color: var(--text-muted); font-size: 0.8rem; padding: 10px 0; }
    .ai-insight-note-area { margin-top: 10px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 10px; display: none; }
    .ai-insight-card.expanded .ai-insight-note-area { display: block; }
    .ai-insight-note-input {
      width: 100%;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(167,139,250,0.3);
      border-radius: 7px;
      color: var(--text);
      font-size: 0.75rem;
      padding: 8px 10px;
      resize: none;
      min-height: 56px;
      box-sizing: border-box;
      font-family: inherit;
    }
    .ai-insight-note-input:focus { outline: none; border-color: #a78bfa; }
    .ai-insight-note-btn {
      margin-top: 6px;
      background: rgba(167,139,250,0.15);
      border: 1px solid rgba(167,139,250,0.4);
      color: #a78bfa;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 0.72rem;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.2s;
    }
    .ai-insight-note-btn:hover { background: rgba(167,139,250,0.28); }
    .ai-insight-note-sent { font-size: 0.7rem; color: #32d74b; margin-top: 4px; display: none; }

    /* Overall sigma meter */
    /* ── AI Detail Popup Modal ─────────────────────────────── */
    #ai-detail-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9000;
      background: rgba(0,0,0,0.65);
      backdrop-filter: blur(4px);
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    #ai-detail-modal.open { display: flex; }
    .ai-detail-inner {
      background: #1e1e24;
      border: 1px solid rgba(74,144,196,0.35);
      border-radius: 16px;
      width: 100%;
      max-width: 500px;
      max-height: 85vh;
      overflow-y: auto;
      padding: 22px 24px;
      position: relative;
      box-shadow: 0 30px 80px rgba(0,0,0,0.7);
    }
    .ai-detail-close {
      position: absolute;
      top: 14px; right: 16px;
      background: rgba(255,255,255,0.07);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-muted);
      font-size: 0.9rem;
      padding: 2px 8px;
      cursor: pointer;
    }
    .ai-detail-close:hover { color: var(--text); }
    .ai-detail-label {
      font-size: 0.58rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 8px;
    }
    .ai-detail-title {
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 14px;
      line-height: 1.3;
    }
    .ai-detail-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 9px 0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      gap: 12px;
    }
    .ai-detail-row:last-child { border-bottom: none; }
    .ai-detail-row-label {
      font-size: 0.72rem;
      color: var(--text-muted);
      flex: 1;
    }
    .ai-detail-row-val {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--text);
      text-align: right;
      flex-shrink: 0;
    }
    .ai-score-deduct-bar {
      height: 6px;
      border-radius: 3px;
      background: rgba(255,255,255,0.08);
      margin-top: 5px;
      overflow: hidden;
    }
    .ai-score-deduct-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 0.6s ease;
    }
    .ai-score-item {
      padding: 10px 12px;
      border-radius: 9px;
      margin-bottom: 8px;
    }
    .ai-score-item-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px; }
    .ai-score-item-desc  { font-size: 0.74rem; color: var(--text-muted); line-height: 1.45; margin-bottom: 5px; }
    .ai-score-item-gain  { font-size: 0.7rem; font-weight: 700; }
    .ai-score-total-bar {
      height: 10px;
      border-radius: 5px;
      background: rgba(255,255,255,0.08);
      overflow: hidden;
      margin: 10px 0 4px;
    }
    .ai-score-total-fill {
      height: 100%;
      border-radius: 5px;
      transition: width 0.8s ease;
      background: linear-gradient(90deg, #ff453a 0%, #ffd60a 50%, #32d74b 100%);
      background-size: 200%;
    }
    .ai-score-circle { cursor: pointer; }
    .ai-score-circle:hover::before { border-top-color: #32d74b; }
    .lean-sigma-meter {
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px 22px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .lean-sigma-num {
      font-size: 3.2rem;
      font-weight: 900;
      line-height: 1;
      background: linear-gradient(135deg, #4a90c4, #32d74b);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .lean-sigma-meta { flex: 1; }
    .lean-sigma-label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px; }
    .lean-sigma-track { height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
    .lean-sigma-fill  { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ff453a, #ffd60a, #32d74b); transition: width 0.8s ease; }
    .lean-sigma-ticks { display: flex; justify-content: space-between; font-size: 0.6rem; color: var(--text-muted); margin-top: 3px; }
    .lean-refresh-btn {
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-muted);
      font-size: 0.78rem;
      padding: 8px 14px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .lean-refresh-btn:hover { background: rgba(255,255,255,0.1); color: var(--text); }

    /* ── Kill Switch Button ── */
    .lss-kill-switch {
      background: linear-gradient(135deg, #667eea, #764ba2);
      border: none;
      color: #fff;
      border-radius: 8px;
      padding: 8px 16px;
      font-size: 0.78rem;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      transition: opacity 0.2s;
    }
    .lss-kill-switch:hover { opacity: 0.85; }
    .lss-kill-switch.level-off { background: linear-gradient(135deg, #dc2626, #991b1b); }

    /* ── Smart Level Modal ── */
    .smart-lvl-btn {
      display: flex; flex-direction: column;
      width: 100%; text-align: left;
      padding: 12px 14px; margin-bottom: 8px;
      border-radius: 10px; cursor: pointer;
      border: 2px solid #e2e8f0; background: #fff;
      transition: border-color 0.15s, background 0.15s;
    }
    .smart-lvl-btn:hover { border-color: #667eea; background: #f5f3ff; }
    .smart-lvl-btn.active { border-color: #667eea; background: #eef2ff; }
    .smart-lvl-btn.active-off { border-color: #dc2626; background: #fef2f2; }
    .smart-lvl-btn .lvl-name { font-weight: 800; font-size: 16px; color: #1e293b; }
    .smart-lvl-btn.active .lvl-name { color: #4f46e5; }
    .smart-lvl-btn.active-off .lvl-name { color: #dc2626; }
    .smart-lvl-btn .lvl-desc { font-size: 12px; color: #64748b; margin-top: 3px; }

    /* Last updated */
    .lean-updated { font-size: 0.7rem; color: var(--text-muted); text-align: right; margin-bottom: 16px; }

    /* ── LSS Charts ────────────────────────────────────────────── */
    .lss-section { margin-top:32px; border-top:1px solid var(--border); padding-top:24px; }
    .lss-section-hdr { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
    .lss-section-title { font-size:1rem; font-weight:700; }
    .lss-section-sub { font-size:.78rem; color:var(--text-muted); margin-top:2px; }
    .lss-refresh-btn {
      padding:8px 16px; background:rgba(74,144,196,.1); border:1px solid rgba(74,144,196,.3);
      color:#4a90c4; border-radius:9px; cursor:pointer; font-weight:700; font-size:.8rem;
      transition:all .15s;
    }
    .lss-refresh-btn:hover { background:rgba(74,144,196,.2); }
    .lss-card {
      background:var(--card-bg); border:1px solid var(--border); border-radius:14px;
      padding:18px 20px; margin-bottom:16px; position:relative; overflow:hidden;
    }
    .lss-card-hdr { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
    .lss-card-title { font-size:.88rem; font-weight:700; display:flex; align-items:center; gap:8px; }
    .lss-card-sub { font-size:.7rem; color:var(--text-muted); }
    .lss-live-badge {
      font-size:.58rem; font-weight:700; padding:2px 8px; border-radius:20px;
      background:rgba(50,215,75,.15); color:#32d74b; border:1px solid rgba(50,215,75,.3);
      text-transform:uppercase; letter-spacing:.05em; animation:aiBlink 2.5s ease-in-out infinite;
    }
    .lss-sigma-badge {
      font-size:.62rem; font-weight:700; padding:2px 9px; border-radius:20px;
      background:rgba(74,144,196,.15); color:#4a90c4; border:1px solid rgba(74,144,196,.3);
    }
    .lss-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    @media (max-width:860px) { .lss-grid-2 { grid-template-columns:1fr; } }
    /* VSM */
    .lss-vsm-wrap { overflow-x:auto; padding-bottom:6px; }
    .lss-vsm { display:flex; align-items:center; gap:0; min-width:520px; }
    .lss-vsm-stage { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
    .lss-vsm-box {
      width:108px; border-radius:12px; padding:12px 8px; text-align:center;
      position:relative; transition:border-color .3s, box-shadow .3s;
      border:1px solid var(--border); background:rgba(255,255,255,.03);
    }
    .lss-vsm-box.flowing   { border-color:rgba(50,215,75,.45); background:rgba(50,215,75,.05); }
    .lss-vsm-box.warning   { border-color:rgba(255,214,10,.5); background:rgba(255,214,10,.05); box-shadow:0 0 14px rgba(255,214,10,.12); }
    .lss-vsm-box.bottleneck { border-color:#ff453a; background:rgba(255,69,58,.06); box-shadow:0 0 18px rgba(255,69,58,.22); }
    .lss-vsm-icon { font-size:1.5rem; margin-bottom:5px; display:block; }
    .lss-vsm-name { font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:8px; }
    .lss-vsm-count { font-size:1.8rem; font-weight:800; line-height:1; margin-bottom:2px; }
    .lss-vsm-count.c-low  { color:#32d74b; }
    .lss-vsm-count.c-med  { color:#ffd60a; }
    .lss-vsm-count.c-high { color:#ff453a; }
    .lss-vsm-lbl { font-size:.58rem; color:var(--text-muted); }
    .lss-vsm-arrow { display:flex; align-items:center; flex-shrink:0; padding:0 2px; margin-bottom:20px; }
    .lss-vsm-line { width:18px; height:2px; background:rgba(255,255,255,.12); }
    .lss-vsm-head { width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:7px solid rgba(255,255,255,.15); }
    .lss-vsm-push { font-size:.5rem; color:rgba(255,255,255,.2); text-transform:uppercase; letter-spacing:.04em; text-align:center; margin-bottom:18px; writing-mode:vertical-lr; padding:0 2px; }
    .lss-vsm-customer { flex-shrink:0; display:flex; flex-direction:column; align-items:center; margin-left:4px; }
    .lss-vsm-customer-circle {
      width:72px; height:72px; border-radius:50%; background:rgba(50,215,75,.08);
      border:1px solid rgba(50,215,75,.35); display:flex; flex-direction:column;
      align-items:center; justify-content:center; text-align:center;
    }
    .lss-vsm-footer {
      display:flex; flex-wrap:wrap; gap:20px; margin-top:16px; padding-top:14px;
      border-top:1px solid var(--border);
    }
    .lss-vsm-stat { text-align:center; }
    .lss-vsm-stat-val { font-size:1.05rem; font-weight:700; color:#4a90c4; }
    .lss-vsm-stat-lbl { font-size:.6rem; color:var(--text-muted); margin-top:2px; text-transform:uppercase; letter-spacing:.05em; }
    /* SPC legend */
    .lss-spc-legend { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:10px; }
    .lss-spc-leg-item { display:flex; align-items:center; gap:5px; font-size:.65rem; color:var(--text-muted); }
    .lss-spc-leg-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }

    /* ── P&L Audit ──────────────────────────────────────────────── */
    .pla-section { margin-top:32px; border-top:1px solid var(--border); padding-top:24px; }
    .pla-run-btn {
      padding:9px 20px; background:linear-gradient(135deg,#1a6b3c,#22c55e);
      border:none; color:#fff; border-radius:10px; cursor:pointer;
      font-weight:700; font-size:.82rem; display:flex; align-items:center; gap:7px;
      transition:opacity .2s; box-shadow:0 2px 12px rgba(34,197,94,.25);
    }
    .pla-run-btn:disabled { opacity:.5; cursor:not-allowed; }
    .pla-run-btn:hover:not(:disabled) { opacity:.88; }
    /* Score ring */
    .pla-score-wrap { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:20px; }
    .pla-score-ring {
      position:relative; width:80px; height:80px; flex-shrink:0;
    }
    .pla-score-ring svg { transform:rotate(-90deg); }
    .pla-score-val {
      position:absolute; inset:0; display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      font-size:1.4rem; font-weight:800; line-height:1;
    }
    .pla-score-lbl { font-size:.55rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
    .pla-score-info { flex:1; min-width:0; }
    .pla-score-period { font-size:.78rem; color:var(--text-muted); margin-bottom:4px; }
    .pla-score-summary { font-size:.85rem; line-height:1.5; color:var(--text); }
    /* Flags strip */
    .pla-flags { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
    .pla-flag {
      display:flex; align-items:center; gap:6px; padding:5px 11px; border-radius:20px;
      font-size:.72rem; font-weight:600; border:1px solid;
    }
    .pla-flag.OVERSPEND   { background:rgba(255,69,58,.1);  color:#ff453a; border-color:rgba(255,69,58,.25); }
    .pla-flag.UNDERSPEND  { background:rgba(74,144,196,.1); color:#4a90c4; border-color:rgba(74,144,196,.25); }
    .pla-flag.ANOMALY     { background:rgba(255,159,10,.1); color:#ff9f0a; border-color:rgba(255,159,10,.25); }
    .pla-flag.TREND       { background:rgba(167,139,250,.1); color:#a78bfa; border-color:rgba(167,139,250,.25); }
    .pla-flag.FORECAST    { background:rgba(255,214,10,.1); color:#ffd60a; border-color:rgba(255,214,10,.25); }
    .pla-flag.POSITIVE    { background:rgba(50,215,75,.1);  color:#32d74b; border-color:rgba(50,215,75,.25); }
    /* Finding cards */
    .pla-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
    @media (max-width:760px) { .pla-grid { grid-template-columns:1fr; } }
    .pla-finding {
      background:var(--card-bg); border:1px solid var(--border); border-radius:11px;
      padding:13px 15px; border-left:3px solid;
      transition:border-color .2s;
    }
    .pla-finding.sev-CRITICAL { border-left-color:#ff453a; }
    .pla-finding.sev-WARNING  { border-left-color:#ffd60a; }
    .pla-finding.sev-INFO     { border-left-color:#4a90c4; }
    .pla-finding.sev-POSITIVE { border-left-color:#32d74b; }
    .pla-finding-hdr { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:5px; }
    .pla-finding-title { font-size:.83rem; font-weight:700; flex:1; }
    .pla-finding-metric { font-size:.82rem; font-weight:800; flex-shrink:0; white-space:nowrap; }
    .pla-finding-metric.CRITICAL { color:#ff453a; }
    .pla-finding-metric.WARNING  { color:#ffd60a; }
    .pla-finding-metric.INFO     { color:#4a90c4; }
    .pla-finding-metric.POSITIVE { color:#32d74b; }
    .pla-finding-cat { font-size:.62rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; }
    .pla-finding-detail { font-size:.77rem; color:var(--text-muted); line-height:1.45; }
    .pla-trend { font-size:.68rem; margin-top:5px; }
    .pla-trend.UP   { color:#32d74b; }
    .pla-trend.DOWN { color:#ff453a; }
    .pla-trend.STABLE { color:var(--text-muted); }
    /* Recommendations */
    .pla-rec {
      background:rgba(255,255,255,.02); border:1px solid var(--border);
      border-radius:9px; padding:12px 14px; margin-bottom:9px;
      display:flex; align-items:flex-start; gap:12px;
    }
    .pla-rec-impact {
      flex-shrink:0; width:36px; height:36px; border-radius:9px;
      display:flex; align-items:center; justify-content:center;
      font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
    }
    .pla-rec-impact.HIGH   { background:rgba(34,197,94,.15); color:#22c55e; border:1px solid rgba(34,197,94,.3); }
    .pla-rec-impact.MEDIUM { background:rgba(255,214,10,.12); color:#ffd60a; border:1px solid rgba(255,214,10,.25); }
    .pla-rec-impact.LOW    { background:rgba(74,144,196,.12); color:#4a90c4; border:1px solid rgba(74,144,196,.25); }
    .pla-rec-body { flex:1; }
    .pla-rec-title { font-size:.83rem; font-weight:700; margin-bottom:3px; }
    .pla-rec-detail { font-size:.75rem; color:var(--text-muted); line-height:1.45; }
    .pla-rec-tags { display:flex; gap:5px; margin-top:6px; flex-wrap:wrap; }
    .pla-rec-tag {
      font-size:.6rem; padding:2px 7px; border-radius:8px;
      background:rgba(255,255,255,.05); color:var(--text-muted); border:1px solid var(--border);
    }
    /* History selector */
    .pla-history-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
    .pla-history-pill {
      padding:4px 12px; border-radius:18px; border:1px solid var(--border);
      background:transparent; color:var(--text-muted); font-size:.75rem;
      font-weight:600; cursor:pointer; transition:all .15s;
    }
    .pla-history-pill.active { background:var(--accent); color:#fff; border-color:var(--accent); }
    .pla-empty { text-align:center; padding:32px; color:var(--text-muted); font-size:.82rem; }
    .pla-section-label {
      font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
      color:var(--text-muted); margin:18px 0 10px; padding-bottom:6px;
      border-bottom:1px solid var(--border);
    }

    /* ── Root Cause Engine ─────────────────────────────────────── */
    .rce-section { margin-top: 32px; border-top: 1px solid var(--border); padding-top: 24px; }
    .rce-section-hdr {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 12px; margin-bottom: 18px;
    }
    .rce-section-title { font-size: 1rem; font-weight: 700; }
    .rce-section-sub { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
    .rce-run-btn {
      padding: 9px 18px; background: #e84c1e; border: none; color: #fff;
      border-radius: 9px; cursor: pointer; font-weight: 700; font-size: .82rem;
      display: flex; align-items: center; gap: 6px; transition: opacity .2s;
    }
    .rce-run-btn:disabled { opacity: .5; cursor: not-allowed; }
    .rce-run-btn:hover:not(:disabled) { opacity: .85; }
    /* Finding cards */
    .rce-finding {
      background: var(--card-bg); border: 1px solid var(--border);
      border-radius: 12px; margin-bottom: 14px; overflow: hidden;
      transition: border-color .2s;
    }
    .rce-finding.sev-CRITICAL { border-left: 4px solid #ff453a; }
    .rce-finding.sev-HIGH     { border-left: 4px solid #ff9f0a; }
    .rce-finding.sev-MEDIUM   { border-left: 4px solid #ffd60a; }
    .rce-finding.sev-LOW      { border-left: 4px solid #32d74b; }
    .rce-finding-hdr {
      padding: 14px 16px; cursor: pointer; display: flex;
      align-items: flex-start; gap: 12px;
    }
    .rce-finding-hdr:hover { background: rgba(255,255,255,.03); }
    .rce-finding-meta { flex: 1; min-width: 0; }
    .rce-finding-title { font-size: .9rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
    .rce-finding-stmt  { font-size: .77rem; color: var(--text-muted); line-height: 1.45; }
    .rce-badge-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
    .rce-badge {
      font-size: .6rem; font-weight: 700; padding: 2px 8px; border-radius: 20px;
      text-transform: uppercase; letter-spacing: .04em;
    }
    .rce-badge.sev-CRITICAL { background: rgba(255,69,58,.15); color: #ff453a; border: 1px solid rgba(255,69,58,.3); }
    .rce-badge.sev-HIGH     { background: rgba(255,159,10,.15); color: #ff9f0a; border: 1px solid rgba(255,159,10,.3); }
    .rce-badge.sev-MEDIUM   { background: rgba(255,214,10,.12); color: #ffd60a; border: 1px solid rgba(255,214,10,.25); }
    .rce-badge.sev-LOW      { background: rgba(50,215,75,.10); color: #32d74b; border: 1px solid rgba(50,215,75,.2); }
    .rce-badge.esc-WATCH     { background: rgba(74,144,196,.12); color: #4a90c4; border: 1px solid rgba(74,144,196,.25); }
    .rce-badge.esc-ACTION_RECOMMENDED { background: rgba(255,159,10,.12); color: #ff9f0a; border: 1px solid rgba(255,159,10,.25); }
    .rce-badge.esc-ESCALATED  { background: rgba(255,69,58,.12); color: #ff453a; border: 1px solid rgba(255,69,58,.25); }
    .rce-badge.esc-REPEATING  { background: rgba(167,139,250,.12); color: #a78bfa; border: 1px solid rgba(167,139,250,.25); }
    .rce-badge.esc-EXECUTIVE  { background: rgba(255,69,58,.2); color: #ff453a; border: 1px solid #ff453a; }
    .rce-badge.status-OPEN      { background: rgba(74,144,196,.1); color: #4a90c4; border: 1px solid rgba(74,144,196,.2); }
    .rce-badge.status-IN_PROGRESS { background: rgba(50,215,75,.1); color: #32d74b; border: 1px solid rgba(50,215,75,.2); }
    .rce-badge.status-RESOLVED  { background: rgba(100,100,100,.1); color: var(--text-muted); border: 1px solid var(--border); }
    .rce-badge.status-DISMISSED { background: rgba(100,100,100,.1); color: var(--text-muted); border: 1px solid var(--border); }
    .rce-badge.area { background: rgba(255,255,255,.05); color: var(--text-muted); border: 1px solid var(--border); }
    .rce-badge.conf { background: rgba(50,215,75,.08); color: #32d74b; border: 1px solid rgba(50,215,75,.15); }
    .rce-finding-chevron { color: var(--text-muted); font-size: .75rem; transition: transform .2s; padding-top: 3px; }
    .rce-finding.open .rce-finding-chevron { transform: rotate(180deg); }
    /* Finding body */
    .rce-finding-body { display: none; border-top: 1px solid var(--border); }
    .rce-finding.open .rce-finding-body { display: block; }
    /* Root causes list */
    .rce-causes {
      padding: 16px 16px 0; margin-bottom: 16px;
    }
    .rce-causes-title { font-size: .7rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .07em; color: var(--text-muted); margin-bottom: 10px; }
    .rce-cause-row {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.04);
    }
    .rce-cause-row:last-child { border-bottom: none; }
    .rce-cause-rank {
      flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
      background: rgba(255,255,255,.07); font-size: .7rem; font-weight: 700;
      display: flex; align-items: center; justify-content: center; color: var(--text-muted);
    }
    .rce-cause-info { flex: 1; min-width: 0; }
    .rce-cause-stmt { font-size: .82rem; font-weight: 600; color: var(--text); margin-bottom: 3px; }
    .rce-cause-detail { font-size: .73rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 4px; }
    .rce-cause-pills { display: flex; flex-wrap: wrap; gap: 5px; }
    .rce-cause-pill {
      font-size: .6rem; padding: 2px 7px; border-radius: 10px;
      background: rgba(255,255,255,.05); color: var(--text-muted); border: 1px solid var(--border);
    }
    .rce-cause-prob {
      flex-shrink: 0; text-align: right;
    }
    .rce-cause-prob-val { font-size: .82rem; font-weight: 700; color: #4a90c4; }
    .rce-cause-prob-lbl { font-size: .6rem; color: var(--text-muted); }
    /* Corrective actions */
    .rce-actions { padding: 0 16px 16px; }
    .rce-actions-title { font-size: .7rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .07em; color: var(--text-muted); margin-bottom: 10px; padding-top: 16px;
      border-top: 1px solid var(--border); }
    .rce-action {
      background: rgba(255,255,255,.02); border: 1px solid var(--border);
      border-radius: 9px; padding: 12px 14px; margin-bottom: 10px;
    }
    .rce-action-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
    .rce-action-title { font-size: .83rem; font-weight: 700; color: var(--text); }
    .rce-action-cat {
      font-size: .6rem; padding: 2px 8px; border-radius: 10px; flex-shrink: 0;
      background: rgba(124,58,237,.12); color: #a78bfa; border: 1px solid rgba(124,58,237,.25);
      font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    }
    .rce-action-rationale { font-size: .75rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 8px; }
    .rce-action-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
    .rce-action-meta-pill {
      font-size: .62rem; padding: 2px 8px; border-radius: 10px;
      background: rgba(255,255,255,.04); color: var(--text-muted); border: 1px solid var(--border);
    }
    .rce-action-meta-pill.attacks-root { background: rgba(50,215,75,.08); color: #32d74b; border-color: rgba(50,215,75,.2); }
    /* Action status buttons */
    .rce-action-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
    .rce-action-btn {
      font-size: .7rem; font-weight: 600; padding: 5px 10px; border-radius: 7px;
      border: 1px solid var(--border); background: transparent; color: var(--text-muted);
      cursor: pointer; transition: all .15s;
    }
    .rce-action-btn:hover { border-color: #4a90c4; color: #4a90c4; background: rgba(74,144,196,.08); }
    .rce-action-btn.active-btn { background: #4a90c4; color: #fff; border-color: #4a90c4; }
    /* Feedback buttons */
    .rce-feedback-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
    .rce-fb-btn {
      font-size: .65rem; font-weight: 600; padding: 4px 9px; border-radius: 6px;
      border: 1px solid var(--border); background: transparent; color: var(--text-muted);
      cursor: pointer; transition: all .15s;
    }
    .rce-fb-btn:hover { opacity: .8; }
    .rce-fb-btn.fb-WORKED_WELL     { border-color: #32d74b; color: #32d74b; }
    .rce-fb-btn.fb-HELPED_SOMEWHAT { border-color: #ffd60a; color: #ffd60a; }
    .rce-fb-btn.fb-DID_NOT_HELP    { border-color: #ff453a; color: #ff453a; }
    .rce-fb-btn.fb-NOT_IMPLEMENTED { border-color: var(--border); color: var(--text-muted); }
    .rce-fb-btn.fb-ALREADY_IN_PLACE { border-color: #4a90c4; color: #4a90c4; }
    .rce-fb-btn.fb-NEEDS_MORE_TIME  { border-color: #a78bfa; color: #a78bfa; }
    .rce-fb-btn.selected { background: currentColor; color: #fff !important; }
    .rce-fb-btn.selected.fb-WORKED_WELL { background: #32d74b; }
    .rce-fb-btn.selected.fb-HELPED_SOMEWHAT { background: #ffd60a; color: #000 !important; }
    .rce-fb-btn.selected.fb-DID_NOT_HELP { background: #ff453a; }
    .rce-fb-btn.selected.fb-NOT_IMPLEMENTED { background: rgba(255,255,255,.1); color: var(--text) !important; }
    .rce-fb-btn.selected.fb-ALREADY_IN_PLACE { background: #4a90c4; }
    .rce-fb-btn.selected.fb-NEEDS_MORE_TIME { background: #a78bfa; }
    /* Operator context */
    .rce-context-row { padding: 0 16px 16px; }
    .rce-context-area {
      width: 100%; padding: 8px 10px; border-radius: 8px; font-size: .8rem;
      background: rgba(255,255,255,.04); border: 1px solid var(--border);
      color: var(--text); resize: vertical; min-height: 56px; font-family: inherit;
    }
    .rce-context-save {
      margin-top: 6px; padding: 5px 14px; font-size: .77rem; font-weight: 700;
      border: 1px solid var(--accent); color: var(--accent); background: transparent;
      border-radius: 7px; cursor: pointer; transition: all .15s;
    }
    .rce-context-save:hover { background: var(--accent); color: #fff; }
    /* Finding status actions */
    .rce-finding-actions {
      padding: 12px 16px; border-top: 1px solid var(--border);
      display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    }
    .rce-status-btn {
      font-size: .7rem; font-weight: 600; padding: 5px 11px; border-radius: 7px;
      border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer;
    }
    .rce-status-btn:hover { background: rgba(255,255,255,.06); color: var(--text); }
    .rce-status-btn.active-status { background: var(--accent); color: #fff; border-color: var(--accent); }
    /* Business rules / exceptions panels */
    .rce-panel {
      background: var(--card-bg); border: 1px solid var(--border);
      border-radius: 12px; margin-bottom: 14px; overflow: hidden;
    }
    .rce-panel-hdr {
      padding: 13px 16px; display: flex; align-items: center;
      justify-content: space-between; cursor: pointer;
    }
    .rce-panel-hdr:hover { background: rgba(255,255,255,.03); }
    .rce-panel-title { font-size: .88rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
    .rce-panel-count { font-size: .65rem; background: rgba(255,255,255,.08); padding: 2px 7px; border-radius: 10px; color: var(--text-muted); }
    .rce-panel-chevron { color: var(--text-muted); font-size: .75rem; transition: transform .2s; }
    .rce-panel.open .rce-panel-chevron { transform: rotate(180deg); }
    .rce-panel-body { display: none; border-top: 1px solid var(--border); padding: 14px 16px; }
    .rce-panel.open .rce-panel-body { display: block; }
    .rce-rule-row {
      padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
      margin-bottom: 8px; display: flex; align-items: flex-start; gap: 10px;
    }
    .rce-rule-info { flex: 1; min-width: 0; }
    .rce-rule-title { font-size: .82rem; font-weight: 700; margin-bottom: 2px; }
    .rce-rule-text { font-size: .75rem; color: var(--text-muted); line-height: 1.4; }
    .rce-rule-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
    .rce-rule-pill {
      font-size: .6rem; padding: 2px 7px; border-radius: 10px;
      background: rgba(255,255,255,.05); color: var(--text-muted); border: 1px solid var(--border);
    }
    .rce-rule-pill.active { background: rgba(50,215,75,.08); color: #32d74b; border-color: rgba(50,215,75,.2); }
    .rce-rule-pill.inactive { background: rgba(255,69,58,.08); color: #ff453a; border-color: rgba(255,69,58,.2); }
    .rce-rule-actions { display: flex; gap: 5px; flex-shrink: 0; }
    .rce-icon-btn {
      width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border);
      background: transparent; color: var(--text-muted); cursor: pointer; font-size: .8rem;
      display: flex; align-items: center; justify-content: center; transition: all .15s;
    }
    .rce-icon-btn:hover { background: rgba(255,255,255,.07); color: var(--text); }
    .rce-icon-btn.del:hover { border-color: #ff453a; color: #ff453a; background: rgba(255,69,58,.07); }
    .rce-add-form {
      background: rgba(255,255,255,.03); border: 1px solid var(--border);
      border-radius: 9px; padding: 14px; margin-top: 12px;
    }
    .rce-add-form input, .rce-add-form textarea, .rce-add-form select {
      width: 100%; padding: 7px 10px; border-radius: 7px;
      border: 1px solid var(--border); background: rgba(255,255,255,.04);
      color: var(--text); font-size: .8rem; font-family: inherit; margin-bottom: 8px;
      box-sizing: border-box;
    }
    .rce-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    @media (max-width: 600px) { .rce-form-row { grid-template-columns: 1fr; } }
    .rce-add-form-btns { display: flex; gap: 8px; margin-top: 4px; }
    .rce-save-btn {
      padding: 7px 16px; border-radius: 7px; border: none;
      background: var(--accent); color: #fff; font-size: .8rem; font-weight: 700; cursor: pointer;
    }
    .rce-cancel-btn {
      padding: 7px 16px; border-radius: 7px; border: 1px solid var(--border);
      background: transparent; color: var(--text-muted); font-size: .8rem; font-weight: 600; cursor: pointer;
    }
    .rce-empty { text-align: center; padding: 24px; color: var(--text-muted); font-size: .82rem; }
    /* filter bar */
    .rce-filter-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
    .rce-filter-btn {
      padding: 4px 12px; border-radius: 18px; border: 1px solid var(--border);
      background: transparent; color: var(--text-muted); font-size: .75rem;
      font-weight: 600; cursor: pointer; transition: all .15s;
    }
    .rce-filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    /* Historical section */
    .rce-history-row {
      padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.04);
      font-size: .78rem; color: var(--text-muted); display: flex; gap: 10px;
    }
    .rce-history-row:last-child { border-bottom: none; }
    .rce-history-icon { flex-shrink: 0; }
    .rce-history-text { flex: 1; }
    .rce-history-text strong { color: var(--text); }
    /* Note textarea in action */
    .rce-note-area {
      display: none; margin-top: 8px;
    }
    .rce-action.note-open .rce-note-area { display: block; }
    .rce-note-area textarea {
      width: 100%; padding: 7px 10px; border-radius: 7px; font-size: .77rem;
      border: 1px solid var(--border); background: rgba(255,255,255,.04);
      color: var(--text); font-family: inherit; resize: vertical; min-height: 48px;
      box-sizing: border-box;
    }
    .rce-note-save {
      margin-top: 5px; padding: 4px 12px; font-size: .73rem; font-weight: 700;
      border: 1px solid var(--accent); color: var(--accent); background: transparent;
      border-radius: 6px; cursor: pointer;
    }
    .rce-note-save:hover { background: var(--accent); color: #fff; }

    /* ── RCE Smart Notes Chat Panel ──────────────────────────── */
    .rce-smart-notes { padding: 0 16px 16px; border-top: 1px solid var(--border); }
    .rce-sn-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 8px; }
    .rce-sn-title  { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
    .rce-sn-badge  { font-size: .61rem; background: rgba(74,144,196,.14); color: #4a90c4; border: 1px solid rgba(74,144,196,.25); padding: 2px 7px; border-radius: 10px; }
    .rce-sn-msgs   { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; margin-bottom: 10px; scroll-behavior: smooth; }
    .rce-sn-msg    { display: flex; flex-direction: column; gap: 2px; }
    .rce-sn-msg.user  { align-items: flex-end; }
    .rce-sn-msg.assistant { align-items: flex-start; }
    .rce-sn-bubble { padding: 8px 11px; max-width: 88%; font-size: .78rem; line-height: 1.5; }
    .rce-sn-msg.user      .rce-sn-bubble { background: rgba(74,144,196,.16); color: var(--text); border-radius: 10px 10px 3px 10px; }
    .rce-sn-msg.assistant .rce-sn-bubble { background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 10px 10px 10px 3px; }
    .rce-sn-label  { font-size: .58rem; color: var(--text-muted); padding: 0 3px; }
    .rce-sn-suggest { background: rgba(167,139,250,.09); border: 1px solid rgba(167,139,250,.25); border-radius: 8px; padding: 8px 11px; margin-top: 4px; max-width: 88%; }
    .rce-sn-suggest-title  { font-size: .63rem; font-weight: 700; color: #a78bfa; margin-bottom: 3px; text-transform: uppercase; letter-spacing: .05em; }
    .rce-sn-suggest-reason { font-size: .73rem; color: var(--text-muted); margin-bottom: 6px; line-height: 1.4; }
    .rce-sn-suggest-apply  { font-size: .7rem; background: rgba(167,139,250,.18); border: 1px solid rgba(167,139,250,.4); color: #a78bfa; padding: 3px 10px; border-radius: 5px; cursor: pointer; font-weight: 700; }
    .rce-sn-suggest-apply:hover { background: rgba(167,139,250,.35); }
    .rce-sn-input-row { display: flex; gap: 6px; }
    .rce-sn-input { flex: 1; background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: .8rem; padding: 8px 10px; outline: none; font-family: inherit; }
    .rce-sn-input:focus { border-color: #4a90c4; }
    .rce-sn-send  { background: #4a90c4; border: none; border-radius: 8px; color: #fff; font-size: .78rem; font-weight: 700; padding: 8px 14px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
    .rce-sn-send:hover:not(:disabled) { opacity: .85; }
    .rce-sn-send:disabled { opacity: .45; cursor: not-allowed; }
    .rce-sn-dots { display: flex; gap: 4px; align-items: center; padding: 8px 11px; }
    .rce-sn-dot  { width: 5px; height: 5px; border-radius: 50%; background: #4a90c4; animation: snBounce .9s infinite; }
    .rce-sn-dot:nth-child(2) { animation-delay: .2s; }
    .rce-sn-dot:nth-child(3) { animation-delay: .4s; }
    @keyframes snBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-4px)} }

    /* ── HACCP Tab ─────────────────────────────────────────────── */
    #view-haccp { padding: 0 0 40px; }
    .haccp-form-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      cursor: pointer;
      transition: border-color .2s, background .2s, transform .15s;
    }
    .haccp-form-card:hover {
      border-color: #7c3aed;
      background: rgba(124,58,237,.06);
      transform: translateY(-2px);
    }
    .haccp-card-icon { font-size: 1.6rem; margin-bottom: 8px; }
    .haccp-card-title { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
    .haccp-card-sub { font-size: .75rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 8px; }
    .haccp-card-count { font-size: .72rem; color: #7c3aed; font-weight: 600; }
    .haccp-section-label {
      font-size: .72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .08em; color: #7c3aed;
      margin: 18px 0 10px; padding-bottom: 6px;
      border-bottom: 1px solid rgba(124,58,237,.2);
    }
    .haccp-check-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 7px 0; border-bottom: 1px solid var(--border);
      font-size: .875rem; color: var(--text); gap: 12px;
    }
    .haccp-check-row:last-child { border-bottom: none; }
    .haccp-check-label { flex: 1; }
    .haccp-radio-group { display: flex; gap: 12px; flex-shrink: 0; }
    .haccp-radio-group label {
      display: flex; align-items: center; gap: 5px;
      cursor: pointer; font-size: .82rem; color: var(--text-muted);
      white-space: nowrap;
    }
    .haccp-radio-group input[type=radio] { accent-color: #7c3aed; }
    .haccp-input-sm {
      background: var(--surface); border: 1px solid var(--border);
      color: var(--text); border-radius: 6px; padding: 6px 10px;
      font-size: .85rem; width: 100%; box-sizing: border-box;
    }
    .haccp-input-sm:focus { outline: none; border-color: #7c3aed; }
    .haccp-temp-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr));
      gap: 10px; margin-bottom: 12px;
    }
    .haccp-temp-field label {
      display: block; font-size: .72rem; color: var(--text-muted);
      margin-bottom: 3px; font-weight: 600;
    }
    .haccp-livestock-entry {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 14px; margin-bottom: 10px;
    }
    .haccp-livestock-entry-header {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 10px;
    }
    .haccp-add-row-btn {
      background: rgba(124,58,237,.1); border: 1px dashed #7c3aed;
      color: #7c3aed; border-radius: 8px; padding: 8px 16px;
      cursor: pointer; font-size: .82rem; font-weight: 600;
      width: 100%; margin-top: 8px; transition: background .15s;
    }
    .haccp-add-row-btn:hover { background: rgba(124,58,237,.2); }
    .haccp-recent-row:hover td { background: rgba(124,58,237,.04); }
    .haccp-type-badge {
      display: inline-block; font-size: .7rem; font-weight: 700;
      padding: 2px 7px; border-radius: 4px;
      background: rgba(124,58,237,.12); color: #7c3aed;
      text-transform: uppercase; letter-spacing: .04em;
    }

    /* ─────────────────────────────────────────────
       INTELLIGENCE LAYER — 7-layer command center
       ───────────────────────────────────────────── */
    .intel-layer { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }

    .intel-section-label {
      font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 12px;
    }

    /* Top row: health + focus + tracker */
    .intel-top-row {
      display: grid;
      grid-template-columns: 230px 1fr 270px;
      gap: 16px;
      align-items: start;
    }

    /* Health Score Ring */
    .intel-health-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 16px 16px; }
    .intel-ring-wrap { position: relative; width: 136px; height: 136px; margin: 0 auto 14px; }
    .intel-ring-wrap svg { width: 136px; height: 136px; transform: rotate(-90deg); display: block; }
    .intel-ring-bg { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 10; }
    .intel-ring-fill {
      fill: none; stroke-width: 10; stroke-linecap: round;
      transition: stroke-dashoffset 1.3s cubic-bezier(0.34,1.2,0.64,1), stroke 0.6s ease;
      filter: drop-shadow(0 0 6px currentColor);
    }
    .intel-ring-center {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      text-align: center; pointer-events: none;
    }
    .intel-score-number { font-size: 2.0rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
    .intel-score-status { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

    .intel-breakdown { width: 100%; display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
    .intel-brow { display: flex; align-items: center; gap: 6px; }
    .intel-blabel { width: 88px; color: var(--text-muted); text-align: right; font-size: 0.6rem; flex-shrink: 0; white-space: nowrap; }
    .intel-bbar-w { flex: 1; height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
    .intel-bbar { height: 100%; border-radius: 2px; transition: width 0.9s ease; }
    .intel-bval { font-size: 0.58rem; color: var(--text-muted); width: 22px; text-align: left; }

    /* Today's Focus */
    .intel-focus-card { padding: 18px; }
    .intel-focus-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .intel-focus-item:last-child { border-bottom: none; padding-bottom: 0; }
    .intel-focus-icon {
      width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center;
      justify-content: center; font-size: 0.8rem; flex-shrink: 0; margin-top: 1px;
    }
    .intel-focus-content { flex: 1; min-width: 0; }
    .intel-focus-title { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 2px; }
    .intel-focus-detail { font-size: 0.8rem; color: var(--text); line-height: 1.4; }

    /* Net Positive Tracker */
    .intel-tracker-card { padding: 18px; }
    .intel-tracker-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
    .intel-t-stat { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; }
    .intel-t-slabel { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 2px; }
    .intel-t-sval { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
    .intel-t-sval.green { color: var(--green); }
    .intel-t-sval.yellow { color: var(--yellow); }
    .intel-t-sval.red { color: var(--red); }
    .intel-pace-label-row { display: flex; justify-content: space-between; font-size: 0.62rem; color: var(--text-muted); margin-bottom: 4px; }
    .intel-pace-wrap { background: rgba(255,255,255,0.06); border-radius: 4px; height: 10px; overflow: hidden; position: relative; margin-bottom: 6px; }
    .intel-pace-fill { height: 100%; border-radius: 4px; transition: width 1.1s ease; position: relative; }
    .intel-pace-fill::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 3px; background: rgba(255,255,255,0.5); border-radius: 2px; }
    .intel-pace-sublabel { font-size: 0.62rem; color: var(--text-muted); text-align: center; }
    .intel-t-recs { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
    .intel-t-rec { font-size: 0.76rem; color: var(--text-muted); padding-left: 10px; border-left: 2px solid var(--accent); line-height: 1.3; }

    /* KPI Strip */
    .intel-kpi-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
    .intel-kpi-card {
      background: var(--card-bg); border: 1px solid var(--border);
      border-radius: var(--radius); box-shadow: var(--card-shadow);
      padding: 12px 14px 10px; position: relative; overflow: hidden;
      transition: transform 0.15s ease;
    }
    .intel-kpi-card:hover { transform: translateY(-2px); }
    .intel-kpi-card::before {
      content: ''; position: absolute; left: 0; top: 0; bottom: 0;
      width: 3px; border-radius: var(--radius) 0 0 var(--radius);
    }
    .intel-kpi-card.green::before { background: var(--green); }
    .intel-kpi-card.yellow::before { background: var(--yellow); }
    .intel-kpi-card.red::before { background: var(--red); }
    .intel-kpi-card.gray::before { background: var(--text-muted); }
    .intel-kpi-lbl { font-size: 0.61rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .intel-kpi-val { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 4px; }
    .intel-kpi-val.green { color: var(--green); }
    .intel-kpi-val.yellow { color: var(--yellow); }
    .intel-kpi-val.red { color: var(--red); }
    .intel-kpi-val.gray { color: var(--text-muted); }
    .intel-kpi-trend { font-size: 0.68rem; display: flex; align-items: center; gap: 3px; color: var(--text-muted); }
    .intel-kpi-trend.up { color: var(--green); }
    .intel-kpi-trend.dn { color: var(--red); }
    .intel-kpi-tip { font-size: 0.62rem; color: var(--text-muted); line-height: 1.3; margin-top: 5px; display: none; }
    .intel-kpi-card:hover .intel-kpi-tip { display: block; }

    /* Status Grid */
    .intel-status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .intel-si {
      background: var(--card-bg); border: 1px solid var(--border);
      border-radius: var(--radius); box-shadow: var(--card-shadow);
      padding: 12px 14px; position: relative; overflow: hidden;
    }
    .intel-si::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius) var(--radius) 0 0; }
    .intel-si.strong::before { background: var(--green); }
    .intel-si.stable::before { background: #60a5fa; }
    .intel-si.caution::before { background: var(--yellow); }
    .intel-si.critical::before { background: var(--red); animation: intel-pulse 1.5s ease-in-out infinite; }
    @keyframes intel-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
    .intel-si-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
    .intel-si-area { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); }
    .intel-si-badge { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 3px; }
    .intel-si-badge.strong { background: rgba(50,215,75,0.15); color: var(--green); }
    .intel-si-badge.stable { background: rgba(96,165,250,0.12); color: #60a5fa; }
    .intel-si-badge.caution { background: rgba(255,214,10,0.15); color: var(--yellow); }
    .intel-si-badge.critical { background: rgba(255,69,58,0.15); color: var(--red); }
    .intel-si-val { font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
    .intel-si-desc { font-size: 0.7rem; color: var(--text-muted); line-height: 1.35; }

    /* Bottom row */
    .intel-bottom-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .intel-be-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
    .intel-be-item { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; }
    .intel-be-lbl { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 3px; }
    .intel-be-val { font-size: 0.95rem; font-weight: 700; }
    .intel-be-highlight {
      margin-top: 12px; background: rgba(74,144,196,0.08);
      border: 1px solid rgba(74,144,196,0.25); border-radius: 8px; padding: 12px;
      text-align: center;
    }
    .intel-be-hl-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 4px; }
    .intel-be-hl-val { font-size: 1.8rem; font-weight: 800; }
    .intel-be-hl-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 3px; }
    .intel-be-progress { margin-top: 10px; }
    .intel-be-prog-wrap { background: rgba(255,255,255,0.06); border-radius: 4px; height: 8px; overflow: hidden; margin: 5px 0; }
    .intel-be-prog-fill { height: 100%; border-radius: 4px; transition: width 1s ease; }
    .intel-be-prog-labels { display: flex; justify-content: space-between; font-size: 0.62rem; color: var(--text-muted); }

    .intel-rec-item { display: flex; align-items: flex-start; gap: 9px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .intel-rec-item:last-child { border-bottom: none; padding-bottom: 0; }
    .intel-rec-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 5px; }
    .intel-rec-text { font-size: 0.8rem; color: var(--text); line-height: 1.4; }
    .intel-empty { font-size: 0.82rem; color: var(--text-muted); text-align: center; padding: 20px 0; }

    .intel-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0 20px; }

    @media (max-width: 1000px) {
      .intel-top-row { grid-template-columns: 1fr 1fr; }
      .intel-health-card { grid-column: span 2; }
      .intel-kpi-strip { grid-template-columns: repeat(3, 1fr); }
      .intel-status-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 700px) {
      .intel-top-row { grid-template-columns: 1fr; }
      .intel-health-card { grid-column: auto; }
      .intel-kpi-strip { grid-template-columns: 1fr 1fr; }
      .intel-status-grid { grid-template-columns: 1fr 1fr; }
      .intel-bottom-row { grid-template-columns: 1fr; }
    }

    /* Blurred wage display — click to reveal */
    .wage-blur {
      filter: blur(5px);
      user-select: none;
      cursor: pointer;
      transition: filter 0.2s;
      display: inline-block;
    }
    .wage-blur.wage-revealed {
      filter: none;
    }

    /* =====================================================
       MOBILE RESPONSIVE — COMPREHENSIVE FIX
       All changes are additive; desktop behavior unchanged.
       ===================================================== */

    /* Prevent horizontal overflow globally */
    body { max-width: 100vw; overflow-x: hidden; }
    #dashboard-root { max-width: 100%; overflow-x: hidden; }

    /* ── 600px: Small tablet / large phone ─────────────── */
    @media (max-width: 600px) {
      /* Tab bar: wrap to multiple rows so position:absolute dropdowns still work */
      #dashboard-tabs {
        flex-wrap: wrap;
        gap: 4px;
        padding: 8px 10px 0;
      }
      .dash-tab {
        padding: 6px 10px;
        font-size: 0.70rem;
        min-height: 32px;
        letter-spacing: 0.03em;
      }

      /* Top bar */
      #top-bar { padding: 8px 12px; gap: 8px; }
      .top-bar-center { display: none; }
      .top-bar-right { flex-wrap: wrap; gap: 6px; }
      #logo-3d-wrap, #logo-circle { width: 38px; height: 38px; }

      /* Main content */
      #main-content { padding: 12px; gap: 16px; }

      /* Cards */
      .card { padding: 14px; }
      .summary-card { padding: 12px 14px; }
      .pipeline-stat-card { padding: 12px 14px; }
      #summary-cards { gap: 10px; }

      /* Tables: prevent blowout */
      .budget-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

      /* Toast: don't exceed viewport */
      .toast { max-width: calc(100vw - 32px); font-size: 0.82rem; padding: 10px 16px; }
    }

    /* ── 480px: Typical phone ──────────────────────────── */
    @media (max-width: 480px) {
      /* Main content */
      #main-content { padding: 10px; gap: 12px; }

      /* Cards */
      .card { padding: 12px 10px; }
      .summary-card { padding: 10px 12px; }
      .pipeline-stat-card { padding: 10px 12px; }

      /* Summary card values */
      .s-value { font-size: 1.05rem; }
      .s-label { font-size: 0.6rem; }
      .pipeline-stat-value { font-size: 1.1rem; }

      /* Grid collapses not covered by existing breakpoints */
      .intel-status-grid { grid-template-columns: 1fr; }
      #qgp-summary-bar { grid-template-columns: 1fr; }
      #efficiency-cards { grid-template-columns: 1fr; }
      #pipeline-summary-bar { grid-template-columns: 1fr 1fr; }

      /* Prevent iOS auto-zoom on input focus (requires font-size >= 16px) */
      input, select, textarea { font-size: 16px !important; }

      /* Top bar */
      #top-bar { padding: 6px 10px; gap: 6px; }
      #logo-3d-wrap, #logo-circle { width: 32px; height: 32px; }
      .top-bar-titles h1 { font-size: 0.7rem; letter-spacing: 0.12em; }
      .top-bar-titles p { font-size: 0.55rem; }

      /* Modals: reduce top padding so content fits on screen */
      #cust-group-modal,
      #order-edit-modal,
      #fz-detail-modal,
      #schedule-modal-overlay,
      #customer-modal-overlay,
      #fintech-contact-modal { padding: 12px 10px 16px; }

      /* Section headers */
      .section-header { font-size: 0.65rem; }

      /* Tab bar */
      #dashboard-tabs { padding: 6px 8px 0; gap: 3px; }
      .dash-tab { padding: 5px 9px; font-size: 0.68rem; }
    }

    /* ── 375px: Small phone (iPhone SE / 13 mini) ──────── */
    @media (max-width: 375px) {
      #main-content { padding: 8px; gap: 10px; }
      .card { padding: 10px 8px; }
      .summary-card { padding: 8px 10px; }
      #summary-cards { gap: 8px; }
      .s-value { font-size: 0.9rem; }
      #dashboard-tabs { padding: 5px 6px 0; gap: 3px; }
      .dash-tab { padding: 5px 7px; font-size: 0.64rem; }
      #top-bar { padding: 5px 8px; }
      #logo-3d-wrap, #logo-circle { width: 28px; height: 28px; }
      .top-bar-titles h1 { font-size: 0.62rem; }
    }