/* Production build: beta panel and formula trace are developer-only. */
#optionalFeaturesSection,
#betaFeaturesCard,
#formulaTraceSection {
  display: none !important;
}
:root {
      --bg: #f8fafc;
      --ink: #1c1c1c;
      --muted: #5f5f5f;
      --card: #ffffff;
      --line: #e1ded8;
      --brand: #1f5e63;
      --brand-2: #0f2f32;
      --shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
      --radius: 12px;
      --watermark-logo: url('logo.jpeg');
    }

    /* Loading overlay */
    .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at 12% 4%, rgba(31, 94, 99, 0.14) 0%, transparent 36%),
                  radial-gradient(circle at 88% 98%, rgba(15, 47, 50, 0.13) 0%, transparent 52%),
                  linear-gradient(180deg, rgba(248, 251, 253, 0.98) 0%, rgba(241, 247, 250, 0.98) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      padding: clamp(12px, 2vw, 24px);
      backdrop-filter: blur(5px);
      overflow: hidden;
      animation: loadingBackdropPulse 8s ease-in-out infinite;
    }
    @keyframes loadingBackdropPulse {
      0%, 100% { background-position: 0% 0%, 100% 100%, center; }
      50% { background-position: 8% -3%, 92% 104%, center; }
    }
    .loading-overlay.hidden {
      display: none;
    }

    .loading-shell {
      width: min(96vw, 1260px);
      height: min(94vh, 920px);
      max-height: 94vh;
      display: grid;
      grid-template-rows: minmax(132px, 24%) minmax(260px, 43%) minmax(180px, 33%);
      gap: clamp(12px, 1.6vw, 20px);
      position: relative;
      z-index: 2;
      padding: clamp(10px, 1.4vw, 18px);
      border-radius: 22px;
      border: 1px solid rgba(31, 94, 99, 0.18);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(245, 251, 252, 0.88) 100%);
      box-shadow: 0 30px 60px rgba(9, 30, 32, 0.22);
      overflow: hidden;
    }

    .loading-shell::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(31, 94, 99, 0.03) 0%, rgba(31, 94, 99, 0) 34%, rgba(15, 47, 50, 0.05) 100%);
      pointer-events: none;
    }

    .loading-top-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(10px, 1.1vw, 14px);
      position: relative;
      z-index: 2;
    }

    .loading-top-card {
      border-radius: 14px;
      border: 1px solid rgba(31, 94, 99, 0.17);
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 8px 20px rgba(11, 48, 53, 0.12);
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 7px;
      min-height: 0;
    }

    .loading-top-label {
      margin: 0;
      font-family: "JetBrains Mono", monospace;
      font-size: 0.72rem;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: #44666a;
      font-weight: 700;
    }

    .loading-top-value {
      margin: 0;
      font-size: clamp(0.92rem, 1.5vw, 1.06rem);
      color: #113a3e;
      line-height: 1.42;
      font-weight: 600;
    }

    .loading-card {
      position: relative;
      z-index: 2;
      border-radius: 18px;
      border: 1px solid rgba(31, 94, 99, 0.18);
      background: linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%);
      box-shadow: 0 20px 48px rgba(9, 30, 32, 0.2);
      padding: clamp(18px, 3vw, 30px);
      text-align: center;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 7px;
      animation: loadingCardIn 0.35s ease-out;
    }

    @keyframes loadingCardIn {
      from { opacity: 0; transform: translateY(8px) scale(0.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .loading-brand {
      font-family: "JetBrains Mono", monospace;
      letter-spacing: 2px;
      font-size: 0.78rem;
      color: #53767a;
      margin-bottom: 4px;
      text-transform: uppercase;
      font-weight: 700;
    }

    .loading-spinner {
      width: 58px;
      height: 58px;
      border: 4px solid #e1ded8;
      border-top: 4px solid var(--brand);
      border-radius: 50%;
      margin: 0 auto;
      animation: spin 0.95s linear infinite;
      position: relative;
    }

    .loading-spinner::after {
      content: '';
      position: absolute;
      inset: 7px;
      border: 3px solid transparent;
      border-right-color: rgba(31, 94, 99, 0.55);
      border-bottom-color: rgba(31, 94, 99, 0.55);
      border-radius: 50%;
      animation: spinReverse 1.4s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @keyframes spinReverse {
      0% { transform: rotate(360deg); }
      100% { transform: rotate(0deg); }
    }

    .loading-text {
      margin-top: 9px;
      font-size: clamp(1.2rem, 2vw, 1.9rem);
      color: var(--brand);
      font-weight: 700;
      letter-spacing: 0.2px;
      line-height: 1.2;
    }

    .loading-detail-text {
      margin: 3px auto 8px;
      color: #35575b;
      font-size: clamp(0.94rem, 1.25vw, 1.08rem);
      line-height: 1.54;
      min-height: 3.2em;
      max-width: min(78ch, 96%);
      font-weight: 600;
    }

    .loading-progress-track {
      width: min(840px, 95%);
      height: 12px;
      border-radius: 999px;
      background: #d9e3e5;
      overflow: hidden;
      margin-top: 4px;
    }

    .loading-progress-fill {
      width: 12%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #1f5e63 0%, #2d7f86 100%);
      background-size: 200% 100%;
      transition: width 0.35s ease;
      animation: loadingProgressSweep 1.8s linear infinite;
    }

    @keyframes loadingProgressSweep {
      from { background-position: 0% 50%; }
      to { background-position: 200% 50%; }
    }

    .loading-progress-value {
      margin-top: 4px;
      color: #2f6166;
      font-size: 0.84rem;
      font-weight: 700;
      letter-spacing: 0.8px;
    }

    .loading-funny-stage {
      position: relative;
      z-index: 2;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.35s ease, transform 0.35s ease;
      border-radius: 16px;
      border: 1px solid rgba(31, 94, 99, 0.18);
      background: linear-gradient(180deg, rgba(244, 250, 251, 0.9) 0%, rgba(234, 243, 246, 0.92) 100%);
      box-shadow: inset 0 10px 20px rgba(255, 255, 255, 0.55);
      padding: 10px 14px 0;
      overflow: hidden;
      display: grid;
      grid-template-rows: auto 1fr;
      min-height: 0;
    }

    .loading-overlay.quick-search-funny-mode .loading-funny-stage {
      opacity: 1;
      transform: translateY(0);
    }

    .loading-funny-comment {
      margin: 0 0 8px;
      justify-self: center;
      text-align: center;
      max-width: min(96%, 85ch);
      color: #0f4348;
      font-size: clamp(0.95rem, 1.35vw, 1.1rem);
      font-weight: 700;
      line-height: 1.4;
      min-height: 2.8em;
      padding: 6px 12px;
      background: rgba(255, 255, 255, 0.74);
      border: 1px solid rgba(31, 94, 99, 0.18);
      border-radius: 12px;
    }

    .loading-funny-road-wrap {
      position: relative;
      min-height: 0;
    }

    .loading-funny-road {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: min(100%, 130px);
      background: linear-gradient(180deg, rgba(72, 88, 96, 0.14) 0%, rgba(54, 66, 72, 0.2) 100%);
      border-top: 2px dashed rgba(31, 94, 99, 0.24);
      border-bottom: 2px dashed rgba(31, 94, 99, 0.18);
    }

    .loading-funny-cone {
      position: absolute;
      font-size: 1.45rem;
      bottom: 42px;
      opacity: 0.9;
      animation: coneHop 2.2s ease-in-out infinite;
    }

    .loading-funny-cone.c1 { left: 12%; animation-delay: 0s; }
    .loading-funny-cone.c2 { left: 23%; animation-delay: 0.4s; }
    .loading-funny-cone.c3 { right: 24%; animation-delay: 0.8s; }
    .loading-funny-cone.c4 { right: 12%; animation-delay: 1.15s; }

    .loading-funny-controller {
      position: absolute;
      bottom: 34px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      animation: controllerBob 1.6s ease-in-out infinite;
      filter: drop-shadow(0 4px 10px rgba(16, 50, 54, 0.2));
    }

    .loading-funny-controller .worker {
      font-size: 2rem;
      line-height: 1;
    }

    .loading-funny-controller .paddle {
      font-size: 1.35rem;
      transform-origin: 15% 50%;
      animation: paddleWave 1.1s ease-in-out infinite;
    }

    .loading-funny-controller .label {
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 1px;
      color: #1f5e63;
      background: rgba(255, 255, 255, 0.75);
      border: 1px solid rgba(31, 94, 99, 0.25);
      border-radius: 999px;
      padding: 2px 8px;
      text-transform: uppercase;
    }

    .loading-funny-controller.controller-left { left: 7%; }
    .loading-funny-controller.controller-right { right: 7%; animation-delay: 0.45s; }
    .loading-funny-controller.controller-right .paddle { animation-delay: 0.35s; }

    .loading-funny-truck {
      position: absolute;
      bottom: 10px;
      font-size: 1.85rem;
      animation: funnyTruckDrive 7s linear infinite;
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));
    }

    .loading-funny-police {
      position: absolute;
      bottom: 12px;
      font-size: 1.55rem;
      animation: funnyPolicePatrol 6.3s linear infinite;
      animation-delay: 1.05s;
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
    }

    @keyframes funnyTruckDrive {
      0% { transform: translateX(-18vw); opacity: 0; }
      10% { opacity: 1; }
      85% { opacity: 1; }
      100% { transform: translateX(118vw); opacity: 0; }
    }

    @keyframes funnyPolicePatrol {
      0% { transform: translateX(108vw) scaleX(-1); opacity: 0; }
      12% { opacity: 1; }
      82% { opacity: 1; }
      100% { transform: translateX(-14vw) scaleX(-1); opacity: 0; }
    }

    @keyframes controllerBob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }

    @keyframes paddleWave {
      0%, 100% { transform: rotate(8deg); }
      50% { transform: rotate(-26deg); }
    }

    @keyframes coneHop {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }

    @media (max-width: 920px) {
      .loading-shell {
        grid-template-rows: minmax(168px, 29%) minmax(250px, 40%) minmax(180px, 31%);
      }
      .loading-top-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .loading-shell {
        width: 98vw;
        height: 96vh;
        gap: 10px;
        padding: 10px;
        grid-template-rows: minmax(190px, 34%) minmax(245px, 34%) minmax(190px, 32%);
      }
      .loading-card {
        padding: 16px 12px;
      }
      .loading-text {
        font-size: 1.08rem;
      }
      .loading-detail-text {
        font-size: 0.88rem;
        min-height: 3.8em;
      }
      .loading-funny-comment {
        font-size: 0.88rem;
        min-height: 3.2em;
      }
      .loading-funny-controller .worker {
        font-size: 1.55rem;
      }
      .loading-funny-truck,
      .loading-funny-police {
        font-size: 1.3rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .loading-funny-stage,
      .loading-funny-controller,
      .loading-funny-controller .paddle,
      .loading-funny-cone,
      .loading-funny-truck,
      .loading-funny-police,
      .loading-spinner,
      .loading-progress-fill {
        animation: none !important;
        transition: none !important;
      }
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --watermark-logo: url("https://cromptonconcepts.sharepoint.com/:i:/g/IQCIAS3nE53LTZq0oRs0BxUrAbh8svEyp-63IEc5o5sg_L8?e=CVlWTb");
      }
    }

    * { box-sizing: border-box; }

    body {
      font-family: "Source Sans 3", "Segoe UI", Tahoma, Verdana, sans-serif;
      background: radial-gradient(1200px 600px at 0% -20%, #eef4fb 0%, transparent 55%),
                  radial-gradient(900px 500px at 100% 0%, #f1f5f9 0%, transparent 50%),
                  var(--bg);
      margin: 0;
      padding: 24px;
      color: var(--ink);
      line-height: 1.5;
    }

    h1, h2, h3, h4, summary, .navbar, .home-button, .logout-button, .contact-dev-button {
      font-family: "Space Grotesk", "Segoe UI", sans-serif;
    }

    .container {
      max-width: 1400px;
      margin: 0 auto;
      background: linear-gradient(180deg, #ffffff 0%, #fcfbf9 100%);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 24px;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }
    
    /* Decorative header background */
    .container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 280px;
      background: 
        radial-gradient(circle at 20% 50%, rgba(31, 94, 99, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(15, 47, 50, 0.03) 0%, transparent 50%),
        linear-gradient(180deg, rgba(31, 94, 99, 0.02) 0%, transparent 100%);
      pointer-events: none;
      z-index: 0;
    }
    
    .main-report-heading, .subtitle {
      position: relative;
      z-index: 1;
    }

    .navbar {
      display: flex;
      align-items: center;
      margin-bottom: 14px;
      gap: 5px;
      padding: 0 14px;
      height: 58px;
      background: linear-gradient(135deg, #020d0f 0%, #071c20 55%, #041418 100%);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 14px;
      box-shadow: 0 8px 28px rgba(2, 10, 12, 0.70), 0 1px 0 rgba(255,255,255,0.07) inset;
      position: relative;
      z-index: 5;
      overflow: visible;
    }

    .navbar::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 45%);
      pointer-events: none;
    }

    .navbar-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      padding-right: 14px;
      border-right: 1px solid rgba(255,255,255,0.14);
      margin-right: 6px;
    }

    /* .navbar-brand-mark replaced by tier badge in brand slot */

    .navbar-acct-sep {
      display: inline-block;
      width: 1px;
      height: 28px;
      background: rgba(255,255,255,0.15);
      border-radius: 1px;
      flex-shrink: 0;
      margin: 0 4px;
    }

    .navbar-user-greeting {
      flex: 0 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.88rem;
      font-weight: 800;
      color: #12343a;
      text-shadow: none;
      letter-spacing: 0.015em;
    }

    .navbar-actions {
      margin-left: auto;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      min-width: 0;
      flex: 1 1 auto;
    }

    .navbar-account-name {
      display: inline-block;
      min-width: 0;
      max-width: min(200px, 22vw);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.8rem;
      font-weight: 800;
      color: #12343a;
      text-shadow: none;
      padding: 0 4px;
    }

    .nav-label-full,
    .nav-label-short {
      font-weight: 800;
    }

    .nav-label-short {
      display: none;
    }

    @media (max-width: 1180px) {
      .nav-label-full {
        display: none;
      }

      .nav-label-short {
        display: inline;
      }

      .navbar-actions {
        gap: 8px;
      }

      .contact-dev-button,
      .home-button,
      .logout-button {
        padding-left: 12px;
        padding-right: 12px;
      }
    }

    .home-button {
      background: #eef4f6;
      color: #12343a;
      padding: 7px 14px;
      border: 1px solid #b7c8cf;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 800;
      font-size: 13px;
      transition: background 0.18s ease, border-color 0.18s ease;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      width: auto;
      text-decoration: none;
      letter-spacing: 0.01em;
      white-space: nowrap;
    }

    .home-button:hover {
      background: #e4edf1;
      border-color: #97adb6;
    }
    .home-button::before { content: '🏠'; font-size: 1em; }

    .logout-button {
      width: auto;
      margin-top: 0;
      background: #fff1f2;
      color: #b42318;
      border: 1px solid #fda4af;
      padding: 7px 16px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 800;
      font-size: 13px;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }

    .logout-button:hover {
      background: #ffe4e6;
      border-color: #fb7185;
      color: #9f1239;
    }

    .contact-dev-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
    }

    .contact-dev-button {
      width: auto;
      margin-top: 0;
      background: #eef4f6;
      color: #12343a;
      border: 1px solid #b7c8cf;
      padding: 7px 12px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 800;
      font-size: 13px;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      letter-spacing: 0.01em;
      white-space: nowrap;
    }

    .contact-dev-button:hover {
      background: #e4edf1;
      border-color: #97adb6;
      color: #0f2f32;
    }

    .contact-dev-panel {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: min(320px, 84vw);
      background: #ffffff;
      border: 1px solid #d7e0e3;
      border-radius: 10px;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
      padding: 10px 12px;
      z-index: 2100;
    }

    .contact-dev-title {
      margin: 0 0 6px;
      font-size: 0.9rem;
      font-weight: 700;
      color: #1f5e63;
    }

    .contact-dev-note {
      margin: 0 0 8px;
      font-size: 0.8rem;
      color: #4f5d67;
      line-height: 1.4;
    }

    .contact-dev-link {
      display: block;
      margin: 0 0 6px;
      color: #0d47a1;
      font-size: 0.82rem;
      text-decoration: none;
      word-break: break-word;
      font-weight: 600;
    }

    .snapshot-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }

    .snapshot-toolbar-copy {
      flex: 1 1 280px;
      min-width: 220px;
    }

    .snapshot-toolbar-copy p {
      margin: 4px 0 0;
      font-size: 0.84rem;
      line-height: 1.45;
      color: #0d47a1;
    }

    .snapshot-actions {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .snapshot-btn {
      width: auto;
      margin-top: 0;
      padding: 10px 16px;
      border-radius: 999px;
      border: 1px solid transparent;
      cursor: pointer;
      font-weight: 700;
      font-size: 0.9rem;
      letter-spacing: 0.2px;
      box-shadow: 0 6px 16px rgba(15, 47, 50, 0.16);
      transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

    .snapshot-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 20px rgba(15, 47, 50, 0.2);
    }

    .snapshot-btn-import {
      background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
      color: #ffffff;
    }

    .snapshot-btn-export {
      background: linear-gradient(135deg, #1f5e63 0%, #0f2f32 100%);
      color: #ffffff;
    }

    .snapshot-status {
      font-size: 0.78rem;
      font-weight: 700;
      color: #35575b;
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid rgba(21, 101, 192, 0.2);
      border-radius: 999px;
      padding: 6px 10px;
      white-space: nowrap;
    }

    .snapshot-footer-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 12px;
    }

    @media (max-width: 640px) {
      .snapshot-toolbar,
      .snapshot-footer-actions {
        align-items: stretch;
      }

      .snapshot-actions,
      .snapshot-footer-actions {
        width: 100%;
      }

      .snapshot-btn,
      .snapshot-status {
        width: 100%;
        justify-content: center;
        text-align: center;
      }
    }

    .contact-dev-link:hover {
      text-decoration: underline;
    }
    
    /* Sites loaded badge styling - Hidden as requested */
    .sites-loaded-badge {
      display: none !important; /* Forces the badge to hide */
    }
    
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    
    .sites-loaded-badge:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    }
    
    .sites-loaded-badge::before {
      content: '📍';
      font-size: 1.1em;
    }

    h1 {
      text-align: center;
      margin: 24px 0 6px;
      color: var(--brand-2);
      letter-spacing: 0.5px;
      font-size: clamp(1.8rem, 2.5vw, 2.4rem);
      font-weight: 700;
      position: relative;
      padding-bottom: 12px;
      animation: fadeInUp 0.6s ease-out;
    }
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    h1::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 4px;
      background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
      border-radius: 2px;
      animation: expandWidth 0.8s ease-out 0.3s backwards;
    }
    
    @keyframes expandWidth {
      from {
        width: 0;
      }
      to {
        width: 80px;
      }
    }

    .subtitle {
      text-align: center;
      margin: 10px auto 28px;
      color: #3a5a5e;
      font-size: 0.93rem;
      font-weight: 500;
      max-width: 720px;
      padding: 9px 26px;
      background: rgba(31, 94, 99, 0.06);
      border-radius: 30px;
      border: 1px solid rgba(31, 94, 99, 0.16);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: auto;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0 2px 12px rgba(15, 47, 50, 0.08);
      animation: fadeInUp 0.7s ease-out 0.2s backwards;
      letter-spacing: 0.02em;
    }
    
    .subtitle::before {
      content: '📊';
      font-size: 1em;
      flex-shrink: 0;
    }

      .copyright-footer {
        text-align: center;
        color: #66727d;
        font-size: 0.85rem;
        padding: 14px 0 18px;
        letter-spacing: 0.02em;
      }

    h2 {
      margin: 0 0 12px;
      color: var(--brand-2);
      font-size: 1rem;
      font-weight: 600;
      border-bottom: 1px solid #e1ded8;
      padding-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .section-help {
      margin: -4px 0 12px;
      color: #4f5d67;
      font-size: 0.86rem;
      line-height: 1.45;
      background: #f4f8fa;
      border: 1px solid #d8e2e8;
      border-left: 4px solid #90a4ae;
      border-radius: 8px;
      padding: 8px 10px;
    }

    .field-help {
      margin: 6px 0 0;
      color: #4f5d67;
      font-size: 0.8rem;
      line-height: 1.35;
    }

    .queue-calculator-module {
      background: linear-gradient(180deg, #f8fbff 0%, #f2f8fd 100%);
      border: 1px solid #c7d4db;
      border-radius: 8px;
      padding: 12px;
      margin: 0 0 12px 0;
    }
    .queue-calculator-module h3 {
      margin: 0 0 10px 0;
      color: #1f5e63;
      font-size: 1em;
      border-bottom: 1px solid #d7e4ec;
      padding-bottom: 6px;
    }
    .queue-calculator-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(180px, 1fr));
      gap: 8px 10px;
    }
    .queue-calculator-module .input-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin: 0;
    }
    .queue-calculator-module .input-group label {
      color: #33505c;
      font-size: 0.82em;
      font-weight: 700;
    }
    .queue-calculator-module .input-group input {
      border: 1px solid #90a4ae;
      background: #ffffff;
      border-radius: 4px;
      padding: 6px 8px;
      font-size: 0.9em;
    }
    .queue-calculator-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 10px;
    }
    .queue-calc-btn {
      width: auto;
      margin: 0;
      padding: 7px 12px;
      font-size: 0.88em;
      font-weight: 700;
      border-radius: 6px;
      border: 1px solid #0f2f32;
      background: linear-gradient(135deg, #1f5e63 0%, #0f2f32 100%);
      color: #fff;
      cursor: pointer;
    }
    .queue-calc-btn:hover { filter: brightness(1.06); }
    .queue-calculator-module .result-container {
      margin: 0;
      padding: 6px 10px;
      border-radius: 6px;
      background: #ffffff;
      border: 1px solid #d7e4ec;
      min-width: 260px;
      text-align: right;
    }
    .queue-calculator-module .result-container h4 {
      margin: 0;
      color: #1f5e63;
      font-size: 0.95em;
    }

    @media (max-width: 760px) {
      .queue-calculator-grid { grid-template-columns: 1fr; }
      .queue-calculator-actions { flex-direction: column; align-items: stretch; }
      .queue-calculator-module .result-container { min-width: 0; text-align: left; }
    }

    .queue-calculator-card {
      background: #ffffff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      font-family: 'Space Grotesk', sans-serif;
    }
    .queue-calculator-card h3 {
      margin: 0 0 10px 0;
      color: #1f5e63;
      font-size: 1.02em;
      border-bottom: 1px solid #d6e3ea;
      padding-bottom: 6px;
    }
    .queue-calculator-card .input-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 15px;
      margin-bottom: 20px;
    }
    .queue-calculator-card .input-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .queue-calculator-card .input-group label {
      display: block;
      font-size: 14px;
      margin-bottom: 5px;
      color: #555;
    }
    .queue-calculator-card .input-group input {
      width: 100%;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .queue-calculator-card .results-panel {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      background: #f8f9fa;
      padding: 15px;
      border-radius: 6px;
    }
    .queue-calculator-card .result-box {
      display: flex;
      flex-direction: column;
      padding: 10px;
      background: #ffffff;
      border: 1px solid #eee;
      border-radius: 4px;
    }
    .queue-calculator-card .result-box span {
      font-size: 0.76em;
      color: #546e7a;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.2px;
    }
    .queue-calculator-card .result-box strong {
      font-size: 1.24em;
      color: #1f5e63;
      line-height: 1.1;
    }
    .queue-calculator-card .result-box.highlight {
      border-color: #0056b3;
      background: #e9f2fc;
    }
    .queue-calculator-card .los-badge {
      display: inline-block;
      padding: 4px 8px;
      border-radius: 4px;
      font-weight: bold;
      text-align: center;
      color: white;
      margin-top: 5px;
    }

    /* Updated Austroads/HCM Aligned LOS Colors */
    .queue-calculator-card .los-a { background-color: #2e7d32; color: #ffffff; } /* <= 0.60 */
    .queue-calculator-card .los-b { background-color: #8bc34a; color: #111827; } /* <= 0.70 */
    .queue-calculator-card .los-c { background-color: #ffeb3b; color: #111827; } /* <= 0.80 */
    .queue-calculator-card .los-d { background-color: #ffb300; color: #111827; } /* <= 0.90 */
    .queue-calculator-card .los-e { background-color: #f57c00; color: #ffffff; } /* <= 1.00 */
    .queue-calculator-card .los-f { background-color: #c62828; color: #ffffff; } /* > 1.00 */

    .ux-intro {
      margin-top: 16px;
      border: 1px solid #cfdde3;
      border-radius: 14px;
      background: linear-gradient(135deg, #f4f9fa 0%, #edf5f7 100%);
      padding: 18px 20px;
    }

    .ux-intro-title {
      margin: 0 0 14px;
      color: var(--brand-2);
      font-size: 0.74rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .ux-intro-title::before {
      content: '';
      display: inline-block;
      width: 16px;
      height: 3px;
      background: var(--brand);
      border-radius: 2px;
      flex-shrink: 0;
    }

    .ux-intro-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      counter-reset: step;
    }

    .ux-intro-list li {
      margin: 0;
      padding: 10px 12px 10px 38px;
      background: #ffffff;
      border: 1px solid #dce8ec;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(15, 47, 50, 0.05);
      position: relative;
      counter-increment: step;
      color: #3a4d55;
      font-size: 0.82rem;
      line-height: 1.5;
    }

    .ux-intro-list li::before {
      content: counter(step);
      position: absolute;
      top: 11px;
      left: 12px;
      width: 20px;
      height: 20px;
      background: linear-gradient(135deg, #1f5e63, #0f2f32);
      color: #ffffff;
      font-size: 0.68rem;
      font-weight: 800;
      border-radius: 50%;
      text-align: center;
      line-height: 20px;
      font-family: "Space Grotesk", sans-serif;
    }

    @media (max-width: 860px) {
      .ux-intro-list { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 520px) {
      .ux-intro-list { grid-template-columns: 1fr; }
    }

    .grid { display:grid; grid-template-columns:repeat(4, minmax(180px,1fr)); gap:12px; }
    .grid-2 { display:grid; grid-template-columns:repeat(2, minmax(180px,1fr)); gap:12px; }

    .card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 24px;
      margin-top: 14px;
      margin-bottom: 20px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
      contain: layout style;
    }

    .card:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.28);
      border-color: #cbd5e1;
    }

    details.card > summary {
      list-style: none;
      border-radius: 8px;
      padding: 8px 10px;
      background: linear-gradient(180deg, #ffffff 0%, #f7faf9 100%);
      border: 1px solid #e4ebe8;
      margin-bottom: 10px;
      position: relative;
      padding-right: 34px;
    }

    details.card > summary::after {
      content: '⬇️';
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%) rotate(0deg);
      color: var(--brand);
      font-size: 0.95rem;
      transition: transform 0.18s ease;
    }

    details.card[open] > summary::after {
      transform: translateY(-50%) rotate(180deg);
    }

    details.card > summary::-webkit-details-marker {
      display: none;
    }

    .detour-card-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 16px;
      margin-top: 16px;
    }

    .detour-card {
      background: #ffffff;
      border: 1px solid #e1ded8;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }

    .detour-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
      border-color: #1f5e63;
    }

    .detour-card h4 {
      margin: 0 0 12px 0;
      color: #0f2f32;
      font-size: 1rem;
      font-weight: 700;
      border-bottom: 2px solid #1f5e63;
      padding-bottom: 8px;
    }

    .detour-card p {
      margin: 6px 0;
      font-size: 0.9rem;
      color: #5f5f5f;
      line-height: 1.4;
    }

    .detour-card p strong {
      color: #0f2f32;
      font-weight: 600;
    }

    label {
      display: block;
      font-size: 0.76rem;
      font-weight: 500;
      margin-bottom: 5px;
      color: #64748b;
      text-transform: none;
      letter-spacing: 0;
    }

    .grid > div,
    .grid-2 > div {
      background: linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px;
      box-shadow: 0 1px 2px rgba(15, 47, 50, 0.05);
    }

    input, select, textarea {
      width: 100%;
      padding: 10px 12px;
      min-height: 42px;
      border: 1px solid #c3ceda;
      border-radius: 8px;
      background: linear-gradient(180deg, #ffffff 0%, #fdfefe 100%);
      font-family: inherit;
      font-size: 0.95rem;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.16s ease, background-color 0.2s ease;
      box-shadow: inset 0 1px 2px rgba(15, 47, 50, 0.03), 0 1px 0 rgba(255,255,255,0.8);
      color: #1f2937;
    }

    input::placeholder { color: #8a8f96; }

    input:not([readonly]):not(:disabled):not([type="range"]):not([type="checkbox"]):not([type="radio"]):hover,
    select:not([readonly]):not(:disabled):hover,
    textarea:not([readonly]):not(:disabled):hover {
      border-color: #9fb2c9;
      box-shadow: 0 2px 8px rgba(31, 94, 99, 0.08);
    }

    input:focus, select:focus, textarea:focus {
      outline: none;
      border-color: #1f5e63;
      background: #ffffff;
      box-shadow: 0 0 0 3px rgba(31, 94, 99, 0.18), 0 6px 14px rgba(31, 94, 99, 0.12);
    }

    input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
      outline: 2px solid #0d47a1;
      outline-offset: 2px;
    }

    input[readonly], select[readonly] {
      background-color: #f8f9fa !important;
      border-color: #e9ecef !important;
      color: #6c757d !important;
      cursor: not-allowed;
    }

    input[type="checkbox"],
    input[type="radio"] {
      accent-color: #1f5e63;
    }

    input[type="range"] {
      accent-color: #1f5e63;
    }

    .input-group label {
      display: block;
      font-size: 0.75rem;
      font-weight: 600;
      color: #475569;
      margin-bottom: 4px;
    }

    .input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
    }

    .input-wrapper > input,
    .input-wrapper > select {
      width: 100%;
      padding-right: 54px;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
    }

    .unit-tag {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      color: #94a3b8;
      font-size: 0.67rem;
      font-weight: 500;
      letter-spacing: 0.02em;
      text-transform: none;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      padding: 1px 5px;
      font-family: "JetBrains Mono", monospace;
      pointer-events: none;
      line-height: 1.2;
    }

    .input-wrapper > input:focus + .unit-tag,
    .input-wrapper > select:focus + .unit-tag {
      color: #3b82f6;
    }

    input.input-committed,
    select.input-committed,
    textarea.input-committed {
      border-color: #16a34a !important;
      box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18) !important;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    /* Engineering readout scale for computed values */
    .kpi-value,
    input[readonly],
    #queue-result,
    #sgD1Green,
    #sgClearance,
    #sgD2Green,
    #srPerVehicle,
    #srTotalHours,
    #predictedVADT,
    #predictedD1VADT,
    #predictedD2VADT,
    #pedAddedDelay {
      font-family: "JetBrains Mono", "Roboto Mono", "Consolas", "Menlo", monospace;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.01em;
    }

    .kpi-value,
    #queue-result,
    #sgD1Green,
    #sgClearance,
    #sgD2Green,
    #srPerVehicle,
    #srTotalHours,
    #pedAddedDelay {
      font-size: 1.08rem;
    }

    .field-instruction {
      margin: 0 0 10px;
      padding: 8px 10px;
      border-radius: 8px;
      font-size: 0.84rem;
      line-height: 1.4;
      font-weight: 600;
    }

    .field-instruction.user {
      color: #b71c1c;
      background: #ffebee;
      border: 1px solid #ef9a9a;
    }

    .field-instruction.auto {
      color: #1b5e20;
      background: #e8f5e9;
      border: 1px solid #a5d6a7;
    }

    .input-legend-panel {
      margin: 10px 0 14px;
      border: 1px solid #d9e2e8;
      border-left: 4px solid #1f5e63;
      border-radius: 10px;
      padding: 10px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .input-legend-title {
      margin: 0 0 8px;
      color: #0f2f32;
      font-size: 0.92rem;
      font-weight: 700;
      letter-spacing: 0.1px;
    }

    .input-legend-grid {
      display: grid;
      gap: 8px;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .input-legend-grid .field-instruction {
      margin: 0;
    }

    .auto-fill-zone input,
    .auto-fill-zone select {
      border: 1px solid #81c784 !important;
      background-color: #f1f8f6 !important;
      color: #1b5e20 !important;
    }

    .auto-fill-zone input[readonly],
    .auto-fill-zone select[readonly] {
      border: 1px solid #81c784 !important;
      background-color: #f1f8f6 !important;
      color: #1b5e20 !important;
    }

    .user-input-zone input:not([readonly]),
    .user-input-zone select:not([readonly]) {
      border: 1px solid #e57373 !important;
      background-color: #fff5f5 !important;
      color: #b71c1c !important;
    }

    .input-color-mode input:not([readonly]):not([type="range"]):not([type="checkbox"]):not([type="file"]),
    .input-color-mode select:not([readonly]):not([disabled]),
    .input-color-mode textarea:not([readonly]) {
      border: 1px solid #cbd5e1 !important;
      background: #ffffff !important;
      color: var(--ink) !important;
    }

    .input-color-mode input:not([readonly]):not([type="range"]):not([type="checkbox"]):not([type="file"]):focus,
    .input-color-mode select:not([readonly]):not([disabled]):focus,
    .input-color-mode textarea:not([readonly]):focus {
      border-color: #d84343 !important;
      box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.2), 0 6px 14px rgba(183, 28, 28, 0.12) !important;
    }

    .input-color-mode input[readonly],
    .input-color-mode select[readonly],
    .input-color-mode input:disabled,
    .input-color-mode select:disabled,
    .input-color-mode textarea[readonly],
    .input-color-mode textarea:disabled {
      border: 1px solid #81c784 !important;
      background: #f7fdf9 !important;
      color: #1b5e20 !important;
    }

    select {
      appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 1em;
      padding-right: 32px;
    }

    .tooltip {
      position: relative;
      cursor: help;
      border-bottom: 1px dotted #999;
    }

    .tooltip::after {
      content: attr(data-tip);
      position: absolute;
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%);
      background: var(--ink);
      color: #fff;
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 11px;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: 0.2s;
      font-weight: normal;
      z-index: 10;
    }

    .tooltip:hover::after { opacity: 1; visibility: visible; }

    .route-node-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      font-size: 14px;
      line-height: 1;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
      transform: translate(-8px, -8px);
      pointer-events: none;
    }

    button {
      width: 100%;
      margin-top: 14px;
      padding: 11px 14px;
      border: none;
      border-radius: 8px;
      background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
      color: #fff;
      font-weight: 700;
      cursor: pointer;
      font-size: 0.98rem;
      letter-spacing: 0.15px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow: 0 6px 14px rgba(31, 94, 99, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2);
      transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, background 0.2s ease;
    }

    button:hover {
      filter: brightness(1.03);
      transform: translateY(-1px);
      box-shadow: 0 10px 18px rgba(31, 94, 99, 0.28);
    }

    button:active {
      transform: translateY(0);
      filter: brightness(0.98);
      box-shadow: 0 4px 10px rgba(31, 94, 99, 0.2);
    }

    button:disabled {
      cursor: not-allowed;
      opacity: 0.7;
      filter: grayscale(0.1);
      transform: none;
      box-shadow: none;
    }

    .kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(140px, 1fr)); gap: 10px; margin-top: 8px; }

    .kpi {
      border: none;
      border-radius: 8px;
      padding: 10px 12px;
      background: #f4f7f8;
      box-shadow: none;
    }

    .kpi-label {
      font-size: 0.72rem;
      color: #64748b;
      font-weight: 500;
      margin-bottom: 3px;
      text-transform: none;
      letter-spacing: 0;
    }

    .kpi-value { font-size: 1.1rem; font-weight: 600; color: var(--brand-2); font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }

    .formula-inline {
      display: none;
      margin-top: 4px;
      color: #5b6470;
      font-size: 0.72rem;
      line-height: 1.3;
      font-family: Consolas, "Courier New", monospace;
      word-break: break-word;
    }

    .table-wrap {
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: linear-gradient(180deg, #ffffff 0%, #fcfdfc 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
      content-visibility: auto;
      contain-intrinsic-size: auto 300px;
    }

    .chart-panel {
      background: linear-gradient(180deg, #fafdfd 0%, #f5f8f8 100%);
      border: 1px solid #dde6e6;
      border-radius: 10px;
      padding: 10px;
      margin-bottom: 10px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
      content-visibility: auto;
      contain-intrinsic-size: auto 350px;
    }
    .chart-panel canvas { width: 100%; }
    .chart-canvas-280 { max-height: 280px; }
    .chart-canvas-300 { max-height: 300px; }
    .chart-canvas-350 { max-height: 350px; }
    .chart-canvas-360 { max-height: 360px; }
    .chart-canvas-250 { max-height: 250px; }

    /* Make the 24-hour queue profile easier to read (less vertically compressed). */
    #hourlyQueueChart {
      height: 340px !important;
      max-height: 340px !important;
    }

    .table-actions { display: flex; justify-content: flex-end; align-items: center; margin: 8px 0; }
    #hourlyQueueSplitView,
    #hourlyVcrSplitView {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 14px;
      row-gap: 8px;
      align-items: start;
    }
    #hourlyQueueD1Title, #hourlyVcrD1Title { grid-column: 1; grid-row: 1; }
    #hourlyQueueWrapD1, #hourlyVcrWrapD1 { grid-column: 1; grid-row: 2; }
    #hourlyQueueD2Title, #hourlyVcrD2Title { grid-column: 2; grid-row: 1; margin-top: 10px !important; }
    #hourlyQueueWrapD2, #hourlyVcrWrapD2 { grid-column: 2; grid-row: 2; }

    @media (max-width: 980px) {
      #hourlyQueueSplitView,
      #hourlyVcrSplitView {
        grid-template-columns: 1fr;
        row-gap: 10px;
      }
      #hourlyQueueD1Title, #hourlyVcrD1Title,
      #hourlyQueueWrapD1, #hourlyVcrWrapD1,
      #hourlyQueueD2Title, #hourlyVcrD2Title,
      #hourlyQueueWrapD2, #hourlyVcrWrapD2 {
        grid-column: 1;
        grid-row: auto;
      }
    }

    .copy-table-btn, .vcr-toggle-btn, .queue-toggle-btn, .hourly-queue-toggle-btn, .hourly-vcr-toggle-btn {
      box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
      height: 31px; padding: 6px 10px; border-radius: 4px; font-size: 0.82rem; line-height: 1.2;
    }
    .copy-table-btn {
      width: auto; margin: 1px 0 0 0; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
      color: #fff; border: 1px solid transparent; cursor: pointer; font-weight: 600; box-shadow: none;
    }
    .copy-table-btn:hover { filter: brightness(1.03); transform: translateY(-1px); }

    table { width:100%; border-collapse:collapse; font-size:13px; }
    th, td { border:1px solid #dbe2ea; padding:8px; text-align:center; }
    th { background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%); color:#fff; position: sticky; top: 0; z-index: 1; letter-spacing: 0.2px; }
    tbody tr:nth-child(even) td { background: #f8fbfb; }
    tbody tr:hover td { background: #eef6f6; }
    .rowhead { text-align:left; font-weight:700; background:#f4f3f0; position: sticky; left: 0; z-index: 1; }
    .status-yes { background:#d1fae5; }
    .status-no { background:#fee2e2; }
    .hidden { display:none; }
    .table-note { margin: 8px 0 0; color: var(--muted); font-size: 0.82rem; }

    #quickSearchCard,
    #siteSelectionHeading,
    #formulaTraceSection,
    #hourlyEstimateCard,
    #macroDataVizSection {
      scroll-margin-top: 16px;
    }

    .dir-heading { margin: 12px 0 8px 0; font-size: 1.05em; font-weight: 700; letter-spacing: 0.1px; }
    .dir-heading-spaced { margin-top: 20px; }
    .dir-heading-negative { color: #c30000; }
    .dir-heading-positive { color: #2e7d32; }

    .print-toggle-btn {
      width: auto !important; margin-top: 0 !important; padding: 5px 10px !important;
      border-radius: 999px; font-size: 0.78rem; font-weight: 700; line-height: 1;
      background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
      box-shadow: 0 3px 8px rgba(27, 94, 32, 0.24);
    }
    .print-toggle-btn.is-off {
      background: linear-gradient(135deg, #757575 0%, #424242 100%);
      box-shadow: 0 3px 8px rgba(66, 66, 66, 0.22);
    }
    .section-print-toggle { position: static; z-index: 2; }
    .section-print-toggle-row { display: flex; justify-content: flex-end; align-items: center; margin: -2px 0 8px 0; min-height: 26px; }

    .diag-card { border: 1px dashed #90a4ae; background: #f8fbfd; }
    .diag-summary { margin: 0 0 8px 0; font-weight: 700; color: #1f5e63; }
    .diag-pass { color: #1b5e20; font-weight: 700; }
    .diag-fail { color: #b71c1c; font-weight: 700; }
    .diag-btn { width: auto; margin-top: 0; padding: 8px 12px; border-radius: 8px; font-size: 0.82rem; box-shadow: 0 4px 10px rgba(13, 71, 161, 0.22); background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%); }
    .diag-note { font-size: 0.8rem; color: #607d8b; margin: 6px 0 0 0; }

    .print-custom-card { border: 1px dashed #90a4ae; background: #f9fcfe; }
    .print-custom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .print-custom-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px 0; }
    .print-custom-actions button { width: auto; margin-top: 0; padding: 6px 10px; font-size: 0.78rem; border-radius: 999px; box-shadow: 0 3px 8px rgba(31, 94, 99, 0.22); background: linear-gradient(135deg, #1f5e63 0%, #0f2f32 100%); }
    .print-custom-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
    .print-custom-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid #dde6ec; border-radius: 8px; padding: 6px 8px; background: #ffffff; }
    .print-custom-name { font-size: 0.82rem; color: #29434e; line-height: 1.25; overflow-wrap: anywhere; }
    .print-scope-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; color: #455a64; background: #ecf3f7; border: 1px solid #d3e2ea; }
    .print-mini-toggle { width: auto !important; margin-top: 0 !important; padding: 4px 8px !important; border-radius: 999px; font-size: 0.74rem; line-height: 1; background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%); box-shadow: 0 2px 6px rgba(27, 94, 32, 0.24); white-space: nowrap; }
    .print-mini-toggle.is-off { background: linear-gradient(135deg, #757575 0%, #424242 100%); box-shadow: 0 2px 6px rgba(66, 66, 66, 0.22); }
    .print-narrative-editor-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
    .print-narrative-row { border: 1px solid #d6e2ea; border-radius: 10px; background: #ffffff; padding: 10px; }
    .print-narrative-row-title { font-size: 0.83rem; font-weight: 700; color: #1f5e63; margin-bottom: 8px; }
    .print-narrative-grid { display: grid; grid-template-columns: repeat(3, minmax(190px, 1fr)); gap: 8px; }
    .print-narrative-field label { display: block; margin: 0 0 4px 0; font-size: 0.68rem; color: #607d8b; letter-spacing: 0.04em; }
    .print-narrative-input, .print-narrative-textarea {
      width: 100%; border: 1px solid #c9d5de; border-radius: 8px; padding: 8px 9px; background: #fcfeff; color: #1c1c1c;
      font-size: 0.82rem; line-height: 1.35; min-height: 36px; box-shadow: inset 0 1px 2px rgba(15, 47, 50, 0.03);
    }
    .print-narrative-textarea { min-height: 86px; resize: vertical; }
    .print-narrative-input:focus, .print-narrative-textarea:focus { outline: none; border-color: #1f5e63; box-shadow: 0 0 0 3px rgba(31, 94, 99, 0.16); background: #fff; }

    #optionalFeaturesSection > summary {
      font-size: 1.12em !important;
      font-weight: 700 !important;
      color: #1f5e63 !important;
    }
    #optionalFeaturesSection .optional-section-summary {
      margin-bottom: 10px;
      cursor: pointer;
    }
    #optionalFeaturesSection .optional-section-note {
      margin: 0 0 12px 0;
      color: #8a6d3b;
      font-size: 0.95em;
      font-weight: 700;
      border: 1px solid #faebcc;
      background: #fcf8e3;
      padding: 8px 10px;
      border-radius: 6px;
    }
    #optionalFeaturesSection .card {
      margin-top: 12px;
      padding: 18px;
    }
    #optionalFeaturesSection .optional-card-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: none !important;
      margin-bottom: 0 !important;
    }
    #scenarioManagerCard .optional-card-title { color: #004c99; }
    #agttmGeometryCard .optional-card-title { color: #004d40; }
    #asdCard .optional-card-title { color: #4527a0; }
    #roadTypeSensitivityCard .optional-card-title { color: #01579b; }
    #speedDelayCard .optional-card-title { color: #37474f; }
    #workWindowCard .optional-card-title { color: #1f5e63; }
    #stopGoCard .optional-card-title { color: #e65100; }
    #austroadsVizCard .optional-card-title { color: #1a237e; }
    #detourCard .optional-card-title { color: #6a1b9a; }
    #pedestrianCard .optional-card-title { color: #004d40; }
    #optionalFeaturesSection .card h2 {
      font-size: 1.02rem;
      line-height: 1.3;
      letter-spacing: 0.1px;
      margin-bottom: 0 !important;
    }
    #optionalFeaturesSection .optional-card-note {
      font-size: 0.85em;
      color: #555;
      margin: 4px 0 12px 0;
      line-height: 1.45;
    }
    #optionalFeaturesSection .optional-card-note-spaced {
      margin-bottom: 16px !important;
    }
    #optionalFeaturesSection .optional-subtitle-center {
      margin: 0 0 10px 0;
      text-align: center;
      font-weight: 700;
    }
    #optionalFeaturesSection .optional-subtitle-default {
      color: #333;
    }
    #optionalFeaturesSection .optional-subtitle-teal {
      color: #00695c;
    }
    #optionalFeaturesSection .optional-warning-note {
      font-size: 0.85em;
      color: #666;
      margin: 10px 0 0 0;
      text-align: center;
    }
    #optionalFeaturesSection .card > p:first-of-type {
      margin: 6px 0 14px 0 !important;
      font-size: 0.85rem !important;
      line-height: 1.45;
      color: #4f5d67 !important;
    }
    #optionalFeaturesSection .card .grid { gap: 10px; }
    #optionalFeaturesSection .section-print-toggle-row {
      margin: -2px 0 10px 0;
      min-height: 28px;
    }

    .app-status-banner {
      max-width: 1400px;
      margin: 0 auto 12px;
      border-radius: 10px;
      border: 1px solid #ffcc80;
      border-left: 4px solid #ef6c00;
      background: #fff8e1;
      color: #6d4c41;
      padding: 10px 12px;
      font-size: 0.9rem;
      line-height: 1.4;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    .app-status-banner.hidden { display: none; }
    .app-status-banner.info {
      border-color: #90caf9;
      border-left-color: #1565c0;
      background: #e3f2fd;
      color: #0d47a1;
    }
    .app-status-banner.error {
      border-color: #ef9a9a;
      border-left-color: #c62828;
      background: #ffebee;
      color: #b71c1c;
    }

    #macroMap { height: 320px; width: 100%; border: 2px solid #0056b3; border-radius: 8px; margin-top: 10px; }

    .leaflet-control-map-fullscreen {
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #0f2f32;
      text-decoration: none;
      font-weight: 700;
      background: #ffffff;
      border-bottom: 1px solid #d4d4d4;
    }

    .leaflet-control-map-fullscreen:hover {
      background: #f3f8f9;
      color: #1f5e63;
    }

    #macroMap:fullscreen,
    #detourMap:fullscreen,
    #macroMap:-webkit-full-screen,
    #detourMap:-webkit-full-screen {
      width: 100vw !important;
      height: 100vh !important;
      margin: 0 !important;
      border: none !important;
      border-radius: 0 !important;
      z-index: 99999;
    }

    @media (max-width: 1180px) { .grid, .kpi-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); } }
    @media (max-width: 760px) {
      body { padding: 12px; }
      .container { padding: 14px; }
      .grid, .grid-2, .kpi-grid, .assumptions-grid { grid-template-columns: 1fr; }
      table { font-size: 12px; }
      .company-logo-prominent { width: min(220px, 62vw); top: 10px; opacity: 1; }
      .company-logo-watermark-layer { background-size: 120px auto; opacity: 0.015; filter: grayscale(100%) brightness(1.35) contrast(0.7) saturate(60%); }
    }

    @media (max-width: 760px) {
      body { padding: 8px !important; }
      .container { padding: 10px !important; border-radius: 12px !important; }
      .navbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
      .card, details.card { margin-top: 10px; padding: 12px !important; border-radius: 12px; }
      h1 { margin-top: 14px; margin-bottom: 8px; }
      h2 { font-size: 1.06rem; }
      h3 { font-size: 0.98rem; }
      label { font-size: 0.7rem; margin-bottom: 4px; }
      .grid, .grid-2, .kpi-grid, .assumptions-grid { gap: 8px !important; }
      .grid > div, .grid-2 > div { padding: 9px; border-radius: 9px; }
      .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
      table { min-width: 680px; }
      input, select, button, textarea {
        font-size: 16px !important;
        min-height: 46px !important;
        border-radius: 10px !important;
      }
      button { padding: 11px 14px !important; margin-top: 10px; }
      .home-button, .logout-button, .contact-dev-button { width: 100%; justify-content: center; }
      .navbar-user-greeting { flex: 1 1 100%; padding-right: 0; }
      .navbar-actions { flex: 1 1 100%; width: 100%; }
      .navbar-account-name { max-width: 100%; }
      #calcStickyContainer { bottom: 10px !important; margin-top: 14px !important; }
      #calcBtn { border-radius: 10px !important; padding: 14px !important; }
      #macroMap, #detourMap { height: 280px !important; min-height: 280px !important; }
      [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
      [style*="display:grid"], [style*="display: grid"] { display: grid !important; }
    }

    @media (max-width: 520px) {
      body { padding: 6px !important; }
      .container { padding: 8px !important; }
      .navbar { gap: 6px; }
      .card, details.card { padding: 10px !important; }
      .kpi-grid { grid-template-columns: 1fr !important; gap: 7px !important; }
      .kpi { padding: 9px; }
      .section-help, .field-help, .table-note { font-size: 0.82rem; }
      #macroMap, #detourMap { height: 250px !important; min-height: 250px !important; }
    }

    @media (max-width: 760px) {
      #detourSegmentDetailedTable, #postDiversionTable { min-width: 0 !important; width: 100% !important; border-collapse: separate; border-spacing: 0 8px; }
      #detourSegmentDetailedTable thead, #postDiversionTable thead { display: none; }
      #detourSegmentDetailedTable tbody tr, #postDiversionTable tbody tr { display: block; background: #fff; border: 1px solid #e1bee7; border-radius: 8px; padding: 8px; }
      #detourSegmentDetailedTable tbody td, #postDiversionTable tbody td { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; border: none !important; padding: 6px 4px; text-align: right; }
      #detourSegmentDetailedTable tbody td::before, #postDiversionTable tbody td::before { content: attr(data-label); font-weight: 700; color: #6a1b9a; text-align: left; flex: 1; }
      #detourSegmentDetailedTable tbody td .vcr-badge, #postDiversionTable tbody td .vcr-badge { margin-left: auto; }
      #detourSegmentDetailedTable tbody td .directional-stack, #postDiversionTable tbody td .directional-stack { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; width: 100%; }
      #detourSegmentDetailedTable tbody td .directional-row, #postDiversionTable tbody td .directional-row { display: flex; justify-content: flex-end; align-items: center; gap: 6px; width: 100%; flex-wrap: wrap; }
      #detourSegmentDetailedTable tbody td .direction-label, #postDiversionTable tbody td .direction-label { min-width: 24px; text-align: left; font-size: 0.78em; font-weight: 700; }

      #hourlyQueueTable, #hourlyVcrTable { min-width: 0 !important; width: 100% !important; border-collapse: separate; border-spacing: 0 8px; }
      #hourlyQueueTable thead, #hourlyVcrTable thead { display: none; }
      #hourlyQueueTable tbody tr, #hourlyVcrTable tbody tr { display: block; background: #fff; border: 1px solid #cfd8dc; border-radius: 8px; padding: 8px; }
      #hourlyQueueTable tbody td, #hourlyVcrTable tbody td { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; border: none !important; padding: 6px 4px; text-align: right; }
      #hourlyQueueTable tbody td::before, #hourlyVcrTable tbody td::before { content: attr(data-label); font-weight: 700; color: #1f5e63; text-align: left; flex: 1; }
    }

    /* Upgrade 6: Mobile — single-column layout + sticky run button */
    @media (max-width: 760px) {
      .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      #calcBtn {
        position: sticky;
        bottom: 16px;
        z-index: 500;
        box-shadow: 0 8px 24px rgba(31, 94, 99, 0.35);
        border-radius: 999px !important;
        margin: 8px 0 0 0;
      }

      .navbar-actions {
        flex-wrap: wrap;
        gap: 6px;
      }
    }

    .print-header { display: none; }
    .print-meta-grid { display: none; }
    .print-btn { background: #4caf50; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.9em; margin-left: 10px; transition: background 0.2s; }
    .print-btn:hover { background: #45a049; }
    .report-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
    .report-actions .print-btn { margin-left: 0; }

    @media (prefers-reduced-motion: reduce) {
      .card, .home-button, button, .copy-table-btn, details.card > summary::after { transition: none !important; }
      .card:hover, .home-button:hover, button:hover, .copy-table-btn:hover { transform: none !important; }
    }

    .source-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.82em; font-weight: 700; border: 1px solid transparent; }
    .source-tmr { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }
    .source-gold-coast { background: #fff3e0; color: #ef6c00; border-color: #ffcc80; }
    .source-brisbane { background: #ede7f6; color: #512da8; border-color: #b39ddb; }
    .source-ipswich { background: #f3e5f5; color: #7b1fa2; border-color: #ce93d8; }
    .source-logan { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
    .source-nsw { background: #e8eaf6; color: #1a237e; border-color: #9fa8da; }
    .source-custom-address { background: #ede7f6; color: #5e35b1; border-color: #b39ddb; }
    
    .quality-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.82em; font-weight: 700; border: 1px solid transparent; }
    .quality-measured { background: #e8f5e9; color: #1b5e20; border-color: #81c784; }
    .quality-derived { background: #fff8e1; color: #ef6c00; border-color: #ffcc80; }
    .quality-estimated { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
    
    .assumptions-grid { display: grid; grid-template-columns: repeat(3, minmax(200px, 1fr)); gap: 10px; }
    .assumption-item { background: #f7fbfc; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
    .assumption-key { font-size: 0.74rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.35px; margin-bottom: 2px; }
    .assumption-value { font-size: 0.9rem; color: var(--brand-2); font-weight: 700; }

    .detour-list-item { padding: 10px 12px; border: 1px solid #ce93d8; border-radius: 6px; background: #fff; cursor: pointer; transition: all 0.2s ease; }
    .detour-list-item:hover { background: #f3e5f5; border-color: #8e24aa; transform: translateX(2px); }
    .detour-list-item.selected { background: #e1bee7; border-color: #8e24aa; box-shadow: 0 2px 4px rgba(142, 36, 170, 0.2); }
    #detourListContainer::-webkit-scrollbar { width: 6px; }
    #detourListContainer::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
    #detourListContainer::-webkit-scrollbar-thumb { background: #ce93d8; border-radius: 4px; }
    #detourListContainer::-webkit-scrollbar-thumb:hover { background: #ab47bc; }

    .company-logo-prominent { position: absolute; left: 50%; transform: translateX(-50%); top: 12px; width: min(340px, 40vw); max-height: 110px; object-fit: contain; opacity: 1; z-index: 180; pointer-events: none; user-select: none; filter: saturate(1) contrast(1.12); background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; mix-blend-mode: multiply; }
    .company-logo-prominent-dark { display: none; }
    @media (prefers-color-scheme: dark) { .company-logo-prominent-light { display: block; } .company-logo-prominent-dark { display: none; } }

    .company-logo-watermark-layer { position: fixed; inset: 0; z-index: 120; pointer-events: none; user-select: none; background-image: var(--watermark-logo); background-repeat: repeat; background-size: 180px auto; background-position: 40px 60px; opacity: 0.018; filter: grayscale(100%) brightness(1.35) contrast(0.7) saturate(60%); }

    /* ─── Auth variables (aliases for legacy var(--primary) refs) ─── */
    :root { --primary: #1f5e63; --success-clr: #1b7e37; --success-bg-clr: #e8f5e9; --error-clr: #c62828; --error-bg-clr: #fef2f2; }
    body.app-locked { overflow: hidden; }
    body.app-locked .container { filter: blur(6px); pointer-events: none; user-select: none; }

    /* ─── Login Gate backdrop ──────────────────────────────────── */
    #loginGate {
      position: fixed; inset: 0; z-index: 2000;
      display: flex; align-items: center; justify-content: center; padding: 14px;
      background:
        radial-gradient(ellipse at 25% 15%, rgba(31,94,99,0.38) 0%, transparent 52%),
        radial-gradient(ellipse at 78% 85%, rgba(15,47,50,0.32) 0%, transparent 52%),
        linear-gradient(155deg, rgba(6,18,20,0.76) 0%, rgba(4,14,16,0.82) 100%);
      backdrop-filter: blur(12px);
      animation: fadeIn 0.38s ease-out;
    }

    /* ─── Split card shell ─────────────────────────────────────── */
    .login-card {
      width: min(880px, 97vw); max-height: 96vh;
      display: flex; flex-direction: row;
      background: #ffffff; border-radius: 22px; overflow: hidden;
      box-shadow: 0 36px 90px rgba(0,0,0,0.38), 0 0 0 1px rgba(255,255,255,0.08);
      animation: loginCardIn 0.42s cubic-bezier(0.175,0.885,0.32,1.1);
    }
    @keyframes loginCardIn { from { opacity:0; transform:translateY(18px) scale(0.97); } to { opacity:1; transform:none; } }

    /* ─── Left branding panel (desktop) ───────────────────────── */
    .login-brand-panel {
      display: none; flex-direction: column; justify-content: space-between;
      padding: 44px 36px; flex: 0 0 300px;
      background: linear-gradient(162deg, #1a5157 0%, #0b2c2f 55%, #07191b 100%);
      color: #fff; position: relative; overflow: hidden;
    }
    .login-brand-panel::before {
      content:''; position:absolute; inset:0; pointer-events:none;
      background:
        radial-gradient(ellipse at 15% 15%, rgba(255,255,255,0.07) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 85%, rgba(255,255,255,0.04) 0%, transparent 50%);
    }
    .login-brand-panel::after {
      content:''; position:absolute; bottom:-60px; right:-60px;
      width:220px; height:220px; border-radius:50%;
      background: rgba(255,255,255,0.03); pointer-events:none;
    }
    .login-brand-logo { width:80px; height:80px; object-fit:contain; border-radius:16px; box-shadow:0 10px 28px rgba(0,0,0,0.35); margin-bottom:22px; }
    .login-brand-title { font-size:1.28rem; font-weight:700; color:#fff; margin:0 0 6px; line-height:1.35; letter-spacing:-0.2px; }
    .login-brand-tagline { font-size:0.82rem; color:rgba(255,255,255,0.58); margin:0 0 30px; line-height:1.55; font-weight:400; }
    .login-brand-features { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:13px; }
    .login-brand-features li { display:flex; align-items:center; gap:12px; font-size:0.84rem; color:rgba(255,255,255,0.8); font-weight:500; }
    .login-brand-feat-icon { width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,0.11); display:flex; align-items:center; justify-content:center; font-size:0.78rem; color:rgba(255,255,255,0.9); flex-shrink:0; }
    .login-brand-footer { font-size:0.72rem; color:rgba(255,255,255,0.3); margin-top:auto; padding-top:24px; position:relative; z-index:1; }
    @media (min-width:700px) { .login-brand-panel { display:flex; } }

    /* ─── Right form panel ─────────────────────────────────────── */
    .login-form-panel { flex:1; min-width:0; padding:36px 32px; overflow-y:auto; display:flex; flex-direction:column; }
    @media (min-width:700px) { .login-form-panel { padding:40px 38px; } }
    @media (max-width:440px) { .login-form-panel { padding:24px 18px; } }

    /* Logo (mobile only – hidden when brand panel visible) */
    .login-logo { width:min(180px,44vw); display:block; margin:0 auto 16px; object-fit:contain; border-radius:12px; box-shadow:0 6px 18px rgba(31,94,99,0.14); }
    @media (min-width:700px) { .login-logo { display:none; } }

    .login-title { margin:0 0 4px; color:var(--brand-2); font-size:1.48rem; font-weight:700; letter-spacing:-0.4px; }
    .login-note { margin:0 0 22px; color:var(--muted); font-size:0.88rem; line-height:1.5; }

    /* ─── Feedback banners ─────────────────────────────────────── */
    .login-error { margin-top:12px; font-size:0.875rem; color:var(--error-clr); min-height:1.2em; text-align:center; font-weight:600; background:var(--error-bg-clr); border:1px solid rgba(198,40,40,0.18); border-radius:9px; padding:9px 12px; opacity:0; transform:translateY(-4px); transition:all 0.25s ease; }
    .login-error.show { opacity:1; transform:translateY(0); }
    .login-success { margin-top:12px; font-size:0.875rem; color:var(--success-clr); min-height:1.2em; text-align:center; font-weight:600; background:var(--success-bg-clr); border:1px solid rgba(27,126,55,0.18); border-radius:9px; padding:9px 12px; opacity:0; transform:translateY(-4px); transition:all 0.25s ease; }
    .login-success.show { opacity:1; transform:translateY(0); }
    @keyframes shake { 0%,100%{transform:translateX(0)} 10%,30%,50%,70%,90%{transform:translateX(-5px)} 20%,40%,60%,80%{transform:translateX(5px)} }
    .shake { animation:shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }

    /* ─── Tabs ─────────────────────────────────────────────────── */
    .login-tabs { display:flex; border-bottom:2px solid var(--line); margin-bottom:20px; }
    .login-tab-btn { flex:1; padding:10px 8px; background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; font-size:0.92rem; font-weight:600; color:var(--muted); transition:all 0.2s ease; margin-bottom:-2px; border-radius:6px 6px 0 0; }
    .login-tab-btn:hover { color:var(--brand); background:rgba(31,94,99,0.04); }
    .login-tab-btn.active { color:var(--brand); border-bottom-color:var(--brand); }
    .login-tab-pane { display:none; animation:fadeIn 0.25s ease-out; }
    .login-tab-pane.active { display:block; }

    /* ─── Form fields ──────────────────────────────────────────── */
    .login-field-group { margin-bottom:14px; position:relative; }
    .login-field-group label { display:block; margin-bottom:5px; font-size:0.8rem; font-weight:700; color:var(--brand-2); letter-spacing:0.06em; text-transform:uppercase; }
    .login-input-wrapper { position:relative; display:flex; align-items:center; }
    .login-input-wrapper i.input-icon,
    .login-input-wrapper > i:not(.toggle-pw-icon) { position:absolute; left:13px; color:#94a3b8; transition:color 0.25s; pointer-events:none; font-size:0.85rem; z-index:1; }
    .login-input-wrapper:focus-within i.input-icon,
    .login-input-wrapper:focus-within > i:not(.toggle-pw-icon) { color:var(--brand); }
    .toggle-pw-btn { position:absolute; right:11px; background:none; border:none; cursor:pointer; color:#94a3b8; padding:5px; font-size:0.82rem; transition:color 0.2s; z-index:1; border-radius:4px; }
    .toggle-pw-btn:hover { color:var(--brand); }
    .login-field-group input, .login-field-group select {
      width:100%; box-sizing:border-box; padding:11px 14px 11px 38px;
      border:1.5px solid #d1dae3; border-radius:10px; font-size:0.92rem;
      background:#f8fafc; color:var(--ink); transition:all 0.25s ease;
      box-shadow:inset 0 1px 3px rgba(0,0,0,0.04);
    }
    .login-field-group input::placeholder { color:#b0bec5; }
    .login-field-group input:focus, .login-field-group select:focus { border-color:var(--brand); background:#fff; box-shadow:0 0 0 3px rgba(31,94,99,0.11); outline:none; }
    .login-field-group input[type=password] { padding-right:40px; }

    /* ─── Submit button ────────────────────────────────────────── */
    .login-submit-btn { width:100%; padding:13px 16px; background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); color:#fff; border:none; border-radius:10px; font-size:0.97rem; font-weight:700; cursor:pointer; margin-top:6px; transition:filter 0.2s, transform 0.2s, box-shadow 0.2s; display:flex; justify-content:center; align-items:center; gap:8px; box-shadow:0 6px 18px rgba(15,47,50,0.22); letter-spacing:0.01em; }
    .login-submit-btn:hover { filter:brightness(1.09); transform:translateY(-1px); box-shadow:0 10px 22px rgba(15,47,50,0.28); }
    .login-submit-btn:active { transform:translateY(0); filter:brightness(0.97); }
    .login-submit-btn .fa-spinner { display:none; animation:spin 1s linear infinite; }
    .login-submit-btn.loading .fa-spinner { display:inline-block; }
    .login-submit-btn.loading .btn-text { opacity:0.7; }
    .login-submit-btn.loading { pointer-events:none; }

    /* ─── Forgot / back link ───────────────────────────────────── */
    .forgot-pw-link { font-size:0.77rem; color:var(--brand); text-decoration:none; font-weight:500; transition:color 0.2s; }
    .forgot-pw-link:hover { color:var(--brand-2); text-decoration:underline; }
    .login-back-link { display:block; text-align:center; margin-top:8px; background:none; border:none; cursor:pointer; font-size:0.84rem; color:var(--brand); padding:6px 10px; border-radius:6px; transition:background 0.2s; width:100%; }
    .login-back-link:hover { background:rgba(31,94,99,0.06); text-decoration:underline; }

    /* ─── Tier cards ───────────────────────────────────────────── */
    .tier-select-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:12px; }
    .tier-card { border:2px solid #e2e8f0; border-radius:10px; padding:12px 8px; cursor:pointer; transition:all 0.2s ease; text-align:center; user-select:none; background:#fafbfc; }
    .tier-card:hover { border-color:#b0c4cc; transform:translateY(-1px); box-shadow:0 3px 10px rgba(0,0,0,0.06); }
    .tier-card.selected { border-color:var(--brand); background:#f0f9fa; box-shadow:0 3px 10px rgba(31,94,99,0.12); }
    .tier-card-name { font-weight:700; font-size:0.88rem; color:var(--brand-2); }
    .tier-card-price { font-size:0.8rem; color:var(--brand); font-weight:700; margin-top:3px; }
    .tier-card-desc { font-size:0.72rem; color:var(--muted); margin-top:3px; line-height:1.3; }
    /* Tier badge in navbar */
    .tier-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 20px; font-size: 0.72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; border: 1.5px solid transparent; white-space: nowrap; }
    /* On dark navbar these overrides apply */
    .navbar .tier-badge { font-size: 0.70rem; padding: 4px 10px; }
    .tier-badge-free { background: rgba(255,255,255,0.85); color: #12343a; border-color: #cbd5e1; text-shadow: none; }
    .tier-badge-basic { background: rgba(59,130,246,0.34); color: #f0f7ff; border-color: rgba(147,197,253,0.78); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); }
    .tier-badge-pro { background: rgba(34,197,94,0.32); color: #f0fff4; border-color: rgba(134,239,172,0.78); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); }
    .tier-badge-proplus { background: linear-gradient(135deg, rgba(245,232,255,0.98), rgba(255,243,199,0.98)); color: #4c1d95; border-color: #8b5cf6; }
    /* Feature lock overlay */
    .feature-lock-wrap { position: relative; }
    .feature-lock-overlay { position: absolute; inset: 0; z-index: 55; background: rgba(248,250,252,0.92); backdrop-filter: blur(3px); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; text-align: center; padding: 24px 20px; }
    .feature-lock-icon { font-size: 2rem; margin-bottom: 8px; }
    .feature-lock-title { font-size: 1rem; font-weight: 700; color: var(--brand-2); margin-bottom: 6px; }
    .feature-lock-desc { font-size: 0.84rem; color: var(--muted); margin-bottom: 14px; max-width: 280px; line-height: 1.5; }
    .feature-lock-btn { padding: 9px 22px; background: var(--brand); color: #fff; border: none; border-radius: 8px; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: background 0.2s; }
    .feature-lock-btn:hover { background: var(--brand-2); }
    /* Upgrade modal */
    #upgradeModal { position: fixed; inset: 0; z-index: 30000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(7,20,22,0.55); backdrop-filter: blur(4px); }
    #upgradeModal.open { display: flex; }
    .upgrade-modal-card { background: #fff; border-radius: 16px; padding: 32px 28px; max-width: 420px; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,0.22); text-align: center; }
    .upgrade-modal-icon { font-size: 2.5rem; margin-bottom: 12px; }
    .upgrade-modal-title { font-size: 1.2rem; font-weight: 700; color: var(--brand-2); margin-bottom: 8px; }
    .upgrade-modal-desc { font-size: 0.9rem; color: var(--muted); margin-bottom: 20px; line-height: 1.6; }
    .upgrade-modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
    .upgrade-modal-btn { padding: 10px 22px; border-radius: 8px; font-size: 0.9rem; font-weight: 700; cursor: pointer; border: none; transition: background 0.2s; }
    .upgrade-modal-btn-primary { background: var(--brand); color: #fff; }
    .upgrade-modal-btn-primary:hover { background: var(--brand-2); }
    .upgrade-modal-btn-secondary { background: #f3f4f6; color: #374151; }
    .upgrade-modal-btn-secondary:hover { background: #e5e7eb; }

    /* Demo payment portal (temporary placeholder for real gateway) */
    .demo-payment-overlay {
      position: fixed;
      inset: 0;
      z-index: 31000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(7, 20, 22, 0.6);
      backdrop-filter: blur(4px);
    }
    .demo-payment-overlay.open { display: flex; }
    .demo-payment-card {
      width: min(520px, 95vw);
      background: #ffffff;
      border-radius: 14px;
      border: 1px solid #d8e2e6;
      box-shadow: 0 22px 54px rgba(0, 0, 0, 0.25);
      padding: 18px;
    }
    .demo-payment-title {
      margin: 0 0 8px;
      font-size: 1.15rem;
      color: #0f2f32;
      font-weight: 700;
    }
    .demo-payment-note {
      margin: 0 0 12px;
      font-size: 0.84rem;
      color: #5f6f79;
      line-height: 1.45;
    }
    .demo-payment-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-radius: 999px;
      border: 1px solid #c7d8de;
      background: #f2f8fa;
      color: #1f5e63;
      font-size: 0.8rem;
      font-weight: 700;
      padding: 6px 10px;
      margin: 0 0 12px;
    }
    .demo-payment-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 10px;
    }
    .demo-payment-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }
    .demo-payment-btn {
      width: auto;
      margin: 0;
      padding: 10px 14px;
      border-radius: 8px;
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
      border: none;
    }
    .demo-payment-btn-primary {
      background: linear-gradient(135deg, #1f5e63 0%, #0f2f32 100%);
      color: #ffffff;
    }
    .demo-payment-btn-secondary {
      background: #eef3f5;
      color: #2b3f4b;
      border: 1px solid #d3dee3;
    }
    .demo-payment-error {
      margin: 8px 0 0;
      color: #b71c1c;
      font-size: 0.82rem;
      font-weight: 700;
      min-height: 1.1em;
    }

    @media (max-width: 640px) {
      .demo-payment-grid { grid-template-columns: 1fr; }
      .demo-payment-actions { flex-direction: column; }
      .demo-payment-btn { width: 100%; }
    }

    /* === GLOBAL UI POLISH === */
    body { line-height: 1.5; }
    p { line-height: 1.6; margin-top: 0; }
    li { line-height: 1.55; }
    ::-webkit-scrollbar { width: 7px; height: 7px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(31,94,99,0.22); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(31,94,99,0.42); }
    details.card > summary::after { content: "" !important; width: 9px; height: 9px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); display: inline-block; transform: translateY(-55%) rotate(45deg); transition: transform 0.22s ease; font-size: 0 !important; }
    details.card[open] > summary::after { transform: translateY(-25%) rotate(225deg); }
    details.card > summary { cursor: pointer; user-select: none; transition: background 0.18s ease; }
    details.card > summary:hover { background: linear-gradient(180deg, #f3f9fa 0%, #eaf4f5 100%); }
    details.card > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }
    .navbar { background: linear-gradient(180deg, #ffffff 0%, #fafcfc 100%); border-color: #dde6e6; }
    .card, details.card { box-shadow: 0 2px 8px rgba(15,47,50,0.07), 0 0 0 1px rgba(15,47,50,0.04); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
    .card:hover, details.card:hover { box-shadow: 0 8px 22px rgba(15,47,50,0.12), 0 0 0 1px rgba(31,94,99,0.08); border-color: #c8d8da; }
    input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(31,94,99,0.14), 0 2px 8px rgba(31,94,99,0.08); }
    .container { padding: 28px; }
    @media (max-width: 760px) { .container { padding: 14px !important; } }
    h2 { font-size: 1.02rem; letter-spacing: 0.01em; }
    button:disabled { opacity: 0.55; cursor: not-allowed; filter: saturate(0.5); }
    th { font-size: 0.8rem; letter-spacing: 0.04em; padding: 9px 8px; }
    td { padding: 8px; font-size: 0.88rem; }
    a { color: var(--brand); text-decoration: none; }
    a:hover { text-decoration: underline; color: var(--brand-2); }
    .app-status-banner { border-radius: 12px; font-size: 0.88rem; }
    @media (max-width: 760px) { #calcBtn { bottom: 14px !important; } }

    @media print {
      /* 1. Global Setup for Engineering Reports */
      @page {
        margin: 2cm 1.5cm;
        size: A4 portrait;
      }
      * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        transition: none !important;
      }
      body { 
        background: white !important; 
        padding: 0 !important; 
        color: #000 !important;
        font-family: "Times New Roman", Times, serif !important;
        font-size: 10pt !important;
        line-height: 1.4 !important;
        orphans: 3 !important;
        widows: 3 !important;
      }
      .container { 
        box-shadow: none !important; 
        border: none !important; 
        padding: 0 !important;
        max-width: 100% !important;
        background: white !important;
      }

      /* Hide Emojis and Web-App UI */
      .hide-print, .navbar, button, .copy-table-btn, .print-btn, .logout-button,
      input[type="range"], input[type="checkbox"], select,
      .leaflet-control-container,
      .section-print-toggle-row, .print-toggle-btn, .table-actions,
      #loginGate, .company-logo-watermark-layer, .company-logo-prominent, 
      .tooltip::after, .copyright-footer, #macroSiteSearchPanel, 
      #macroLocationHelp, #macroMapStatusWrap, a[href^="javascript:"], 
      #pedMeasureGoogleLink, #pedMeasureMetroLink, #detourMeasureGoogleLink, #detourMeasureMetroLink, .exclude-from-print,
      #calcBtn, #calcStickyContainer, legend, details.card > summary::after,
      .nav-bar, .debug-url, .ui-controls, .dropdown { 
        display: none !important; 
      }

      /* 2. Formal Typography & Headings */
      h1 { font-family: Arial, Helvetica, sans-serif !important; font-size: 16pt !important; text-align: left !important; border-bottom: 2px solid #000 !important; margin: 20px 0 10px 0 !important; color: #000 !important; page-break-after: avoid !important; page-break-inside: avoid !important; orphans: 3 !important; widows: 3 !important; }
      h2 { font-family: Arial, Helvetica, sans-serif !important; font-size: 13pt !important; color: #000 !important; border-bottom: 1px solid #000 !important; margin: 15px 0 8px 0 !important; padding-bottom: 4px !important; page-break-after: avoid !important; page-break-inside: avoid !important; orphans: 3 !important; widows: 3 !important; }
      h3 { font-family: Arial, Helvetica, sans-serif !important; font-size: 11pt !important; color: #333 !important; page-break-after: avoid !important; page-break-inside: avoid !important; margin-top: 12px !important; orphans: 3 !important; widows: 3 !important; }
      h4, h5, h6 { page-break-after: avoid !important; page-break-inside: avoid !important; orphans: 3 !important; widows: 3 !important; }
      
      /* Prevent orphans in paragraphs and list items */
      p, li { orphans: 3 !important; widows: 3 !important; }

      /* 3. Engineering / Academic Table Formatting */
      table { 
        font-size: 9pt !important; 
        width: 100% !important; 
        border-collapse: collapse !important; 
        margin-bottom: 15px !important;
        border-top: 2px solid #000 !important;
        border-bottom: 2px solid #000 !important;
        page-break-inside: auto !important;
      }
      thead { display: table-header-group !important; }
      tfoot { display: table-footer-group !important; }
      tr { page-break-inside: avoid !important; page-break-after: auto !important; }
      th, td { 
        padding: 6px 8px !important; 
        line-height: 1.2 !important; 
        border: none !important;
        border-bottom: 1px solid #ddd !important;
      }
      th { 
        background: transparent !important; 
        color: #000 !important; 
        border-bottom: 1px solid #000 !important;
        font-weight: bold !important;
      }
      .status-yes, .status-no, td[style*="background"]:not(.vcr-cell):not(.hourly-vcr-cell) {
        background: transparent !important;
        color: #000 !important;
      }
      .vcr-cell, .hourly-vcr-cell {
        color: #000 !important;
        font-weight: 700 !important;
      }
      
      /* Keep sections together intelligently */
      .card, .detour-card, details { 
        page-break-inside: avoid !important; 
        margin-bottom: 18px !important;
        border: none !important;
        box-shadow: none !important;
      }
      /* Allow breaks inside very large sections when needed */
      .card > table, details > table { page-break-inside: auto !important; }
      .card > div, details > div { page-break-inside: avoid !important; }
      
      /* Keep related content together */
      .grid, .grid-2, .chart-panel, .table-wrap { page-break-inside: avoid !important; }
      
      /* Start new sections on fresh pages when needed */
      .card:has(h2), details:has(h2) { page-break-before: auto !important; }

      /* 4. Document Header Block */
      .print-header { 
        display: block !important; 
        text-align: left !important; 
        margin-bottom: 20px !important; 
      }
      .print-header .report-logo { display: block !important; max-width: 180px !important; margin-bottom: 10px !important; }
      .print-header h2 { border: none !important; font-size: 22pt !important; margin: 0 0 5px 0 !important; }
      .print-header p { margin: 3px 0 !important; font-size: 10pt !important; color: #444 !important; font-family: Arial, sans-serif !important; }

      /* 5. Clean up Form Inputs (Turn them into clean text displays) */
      input, select {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important; margin: 0 !important;
        color: #000 !important;
        font-weight: bold !important;
        font-size: 10pt !important;
        -webkit-appearance: none !important; appearance: none !important;
        width: auto !important;
      }

      /* Grid formatting */
      .grid, .grid-2 { display: grid !important; gap: 5px 15px !important; padding: 5px 0 !important; border: none !important; background: transparent !important; page-break-inside: avoid !important; }
      .grid > div, .grid-2 > div { background: transparent !important; border: none !important; padding: 4px 0 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; border-bottom: 1px dotted #ccc !important; page-break-inside: avoid !important; }
      
      /* Maps & Charts Layout */
      #macroMap, #detourMap { height: 250px !important; border: 1px solid #000 !important; margin-top: 8px !important; page-break-inside: avoid !important; page-break-before: auto !important; page-break-after: auto !important; }
      .chart-panel, .table-wrap, canvas, #vizCanvasContainer { page-break-inside: avoid !important; box-shadow: none !important; border: none !important; page-break-before: auto !important; page-break-after: auto !important; }
      
      .main-report-heading, .subtitle { display: none !important; }
      details { display: block !important; }
      details > * { display: block !important; }

      /* VCR badges in print */
      .vcr-badge {
        border: 1px solid #999 !important;
        padding: 2px 6px !important;
        border-radius: 3px !important;
      }
    }

    /* VCR Color Coding Badge Classes (screen and print) */
    .vcr-badge {
      padding: 3px 10px;
      border-radius: 999px;
      font-weight: 700;
      color: #0f172a;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.83rem;
      border: 1px solid rgba(15, 23, 42, 0.18);
      letter-spacing: 0.02em;
    }
    .vcr-los-a { background-color: #2e7d32; color: #ffffff; border: 1px solid #1b5e20; } /* LOS A: VCR ≤ 0.60 */
    .vcr-los-b { background-color: #8bc34a; color: #111827; border: 1px solid #689f38; } /* LOS B: VCR ≤ 0.70 */
    .vcr-los-c { background-color: #ffeb3b; color: #111827; border: 1px solid #f9a825; } /* LOS C: VCR ≤ 0.80 */
    .vcr-los-d { background-color: #ffb300; color: #111827; border: 1px solid #ef6c00; } /* LOS D: VCR ≤ 0.90 */
    .vcr-los-e { background-color: #f57c00; color: #ffffff; border: 1px solid #d84315; } /* LOS E: VCR ≤ 1.00 */
    .vcr-los-f { background-color: #c62828; color: #ffffff; border: 1px solid #8e0000; } /* LOS F: VCR > 1.00 */

    .section-icon {
      color: #1f5e63;
      font-size: 0.95em;
      vertical-align: baseline;
    }

    /* =========================================================
       EDITABLE PRINT PREVIEW & ACTUAL PRINT STYLES (A4 LANDSCAPE)
       ========================================================= */

    /* 1. Simulate A4 Landscape Paper on Screen */
    body.print-preview-mode {
      background-color: #525659 !important;
      padding: 20px 12px 80px 12px !important;
      overflow: auto !important;
    }

    body.print-preview-mode .container {
      width: 297mm !important;
      max-width: 297mm !important;
      min-height: 210mm !important;
      margin: 0 auto !important;
      background-color: #ffffff !important;
      padding: 15mm 20mm !important;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
      overflow: hidden !important;
    }

    /* 2. Page Setup for Actual PDF Print */
    @media print {
      @page {
        size: A4 landscape !important;
        margin: 15mm 20mm !important;
      }

      body {
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
      }

      .container {
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        padding: 0 !important;
      }
    }

    /* 3. Hide Web UI Elements (Preview) */
    body.print-preview-mode .hide-print,
    body.print-preview-mode .navbar,
    body.print-preview-mode button:not(#exitPreviewBtn),
    body.print-preview-mode .print-btn,
    body.print-preview-mode #macroSiteSearchPanel,
    body.print-preview-mode .ui-controls,
    body.print-preview-mode .field-help {
      display: none !important;
    }

    /* 3. Hide Web UI Elements (Print) */
    @media print {
      .hide-print,
      .navbar,
      button,
      .print-btn,
      #macroSiteSearchPanel,
      .ui-controls,
      .field-help,
      #exitPreviewBtn {
        display: none !important;
      }
    }

    /* 4. Professional Typography & Layout (Preview) */
    body.print-preview-mode,
    body.print-preview-mode .container {
      color: #000000 !important;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
      font-size: 9.5pt !important;
      line-height: 1.4 !important;
    }

    body.print-preview-mode h1,
    body.print-preview-mode h2,
    body.print-preview-mode h3,
    body.print-preview-mode h4 {
      color: #000 !important;
      margin-top: 0 !important;
    }

    body.print-preview-mode h2 {
      font-size: 13pt !important;
      border-bottom: 1pt solid #000 !important;
      margin: 15px 0 8px 0 !important;
      padding-bottom: 3px !important;
    }

    body.print-preview-mode .card,
    body.print-preview-mode details.card,
    body.print-preview-mode details {
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important;
      margin: 0 0 20px 0 !important;
    }

    body.print-preview-mode details > * {
      display: block !important;
    }

    /* 4. Professional Typography & Layout (Print) */
    @media print {
      body,
      .container {
        color: #000000 !important;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
        font-size: 9.5pt !important;
        line-height: 1.4 !important;
      }

      h1,
      h2,
      h3,
      h4 {
        color: #000 !important;
        margin-top: 0 !important;
      }

      h2 {
        font-size: 13pt !important;
        border-bottom: 1pt solid #000 !important;
        margin: 15px 0 8px 0 !important;
        padding-bottom: 3px !important;
      }

      .card,
      details.card,
      details {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 0 20px 0 !important;
      }

      details > * {
        display: block !important;
      }
    }

    /* 5. Engineering Tables (Booktabs Style - Preview) */
    body.print-preview-mode table {
      width: 100% !important;
      border-collapse: collapse !important;
      border-top: 1.5pt solid #000 !important;
      border-bottom: 1.5pt solid #000 !important;
      font-size: 8.5pt !important;
    }

    body.print-preview-mode th {
      border-bottom: 1pt solid #000 !important;
      background: transparent !important;
      color: #000 !important;
      padding: 6px 4px !important;
      text-align: left !important;
    }

    body.print-preview-mode td {
      border-bottom: 0.5pt solid #ccc !important;
      padding: 4px !important;
      color: #000 !important;
    }

    /* 5. Engineering Tables (Booktabs Style - Print) */
    @media print {
      table {
        width: 100% !important;
        border-collapse: collapse !important;
        border-top: 1.5pt solid #000 !important;
        border-bottom: 1.5pt solid #000 !important;
        font-size: 8.5pt !important;
      }

      th {
        border-bottom: 1pt solid #000 !important;
        background: transparent !important;
        color: #000 !important;
        padding: 6px 4px !important;
        text-align: left !important;
      }

      td {
        border-bottom: 0.5pt solid #ccc !important;
        padding: 4px !important;
        color: #000 !important;
      }
    }

    /* 6. Editable inputs look like plain text (Preview) */
    body.print-preview-mode input,
    body.print-preview-mode textarea,
    body.print-preview-mode select {
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
      color: #000 !important;
      font-weight: bold !important;
      font-family: inherit !important;
      padding: 0 !important;
      -webkit-appearance: none !important;
      appearance: none !important;
    }

    /* 6. Editable inputs look like plain text (Print) */
    @media print {
      input,
      textarea,
      select {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #000 !important;
        font-weight: bold !important;
        font-family: inherit !important;
        padding: 0 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
      }
    }

    /* 7. Hover effect only in preview mode */
    body.print-preview-mode input:hover,
    body.print-preview-mode textarea:hover {
      background: rgba(255, 255, 0, 0.2) !important;
      border-bottom: 1px dashed #666 !important;
      cursor: text;
    }

    /* 8. Fix maps & charts size for landscape (Preview) */
    body.print-preview-mode #macroMap,
    body.print-preview-mode .chart-panel {
      height: 220px !important;
      border: 1pt solid #000 !important;
      margin-bottom: 15px !important;
      page-break-inside: avoid !important;
    }

    /* 8. Fix maps & charts size for landscape (Print) */
    @media print {
      #macroMap,
      .chart-panel {
        height: 220px !important;
        border: 1pt solid #000 !important;
        margin-bottom: 15px !important;
        page-break-inside: avoid !important;
      }
    }

    /* 9. Floating Action Button to Exit Preview Mode */
    #exitPreviewBtn {
      display: none;
      position: fixed;
      top: auto;
      right: 16px;
      bottom: 16px;
      z-index: 2147483647;
      padding: 10px 20px;
      background: #d9534f;
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 14px;
      cursor: pointer;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    }

    body.print-preview-mode #exitPreviewBtn {
      display: inline-flex !important;
      align-items: center;
      gap: 6px;
    }

    /* =========================================================
       EDITABLE REPORT VIEW MODE
       ========================================================= */
    body.report-mode {
      background: #cfd8dc !important;
      padding: 40px 20px 88px 20px !important;
    }
    
    body.report-mode .container {
      max-width: 210mm; /* A4 Width */
      margin: 0 auto;
      background: #ffffff !important;
      padding: 20mm 15mm !important;
      box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
      border-radius: 4px !important;
    }
    
    body.report-mode .container::before {
      display: none !important;
    }

    /* Hide Web-App UI controls in Report Mode */
    body.report-mode .navbar,
    body.report-mode .report-actions,
    body.report-mode .table-actions,
    body.report-mode button:not(.report-mode-btn):not(.report-remove-x),
    body.report-mode .field-help,
    body.report-mode .section-help,
    body.report-mode .field-instruction,
    body.report-mode .optional-card-note,
    body.report-mode .formula-inline,
    body.report-mode .hide-print:not(#reportModeBar):not(#reportModeBottomBar):not(#reportShareMenu),
    body.report-mode details.card > summary::after,
    body.report-mode .ux-intro,
    body.report-mode .input-legend-panel,
    body.report-mode #quickSearchCard,
    body.report-mode #printCustomizationCard,
    body.report-mode #selfDiagnosticsCard {
      display: none !important;
    }

    /* Transform inputs into clean text for the report */
    body.report-mode input, 
    body.report-mode select {
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
      color: #000 !important;
      font-weight: bold !important;
      appearance: none !important;
      -webkit-appearance: none !important;
      padding: 0 !important;
      margin: 0 !important;
      pointer-events: none;
    }

    /* Force Details Open and Show Print Header */
    body.report-mode details { display: block !important; }
    body.report-mode details > * { display: block !important; }
    body.report-mode .print-header { display: block !important; margin-bottom: 20px; }
    body.report-mode .print-meta-grid { display: grid !important; }
    body.report-mode .main-report-heading, 
    body.report-mode .subtitle { display: none !important; }

    /* Keep every table and content block inside the report page width */
    body.report-mode .container,
    body.report-mode .card,
    body.report-mode details.card,
    body.report-mode .table-wrap,
    body.report-mode .chart-panel,
    body.report-mode #vizCanvasContainer {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      overflow-x: hidden !important;
      box-sizing: border-box !important;
    }

    body.report-mode table,
    body.report-mode #hourlyQueueTable,
    body.report-mode #hourlyVcrTable,
    body.report-mode #detourDetailedTable,
    body.report-mode #scenarioComparisonTable,
    body.report-mode #diagTable {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      table-layout: fixed !important;
      font-size: 9.2pt !important;
    }

    body.report-mode th,
    body.report-mode td {
      white-space: normal !important;
      overflow-wrap: anywhere !important;
      word-break: break-word !important;
      padding: 4px 5px !important;
      line-height: 1.25 !important;
    }

    body.report-mode .grid,
    body.report-mode .grid-2,
    body.report-mode .kpi-grid,
    body.report-mode .assumptions-grid,
    body.report-mode .queue-calculator-grid,
    body.report-mode .print-custom-grid,
    body.report-mode [style*="grid-template-columns"] {
      grid-template-columns: 1fr !important;
    }

    body.report-mode .report-keep-two-col {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 12px !important;
    }

    body.report-mode canvas,
    body.report-mode .chart-panel canvas,
    body.report-mode #managementVizCanvas,
    body.report-mode #hourlyQueueChart,
    body.report-mode #hourlyVcrChart,
    body.report-mode #queueChartD1,
    body.report-mode #queueChartD2,
    body.report-mode #vcrChartD1,
    body.report-mode #vcrChartD2 {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      max-height: 210px !important;
      object-fit: contain !important;
    }

    body.report-mode #hourlyQueueChart {
      height: 300px !important;
      max-height: 300px !important;
    }

    @media (max-width: 900px) {
      #hourlyQueueChart {
        height: 280px !important;
        max-height: 280px !important;
      }
    }

    .report-heading-editor,
    .report-section-tools {
      display: none;
    }
    body.report-mode .report-heading-source {
      display: none !important;
    }
    body.report-mode .report-heading-editor {
      display: block;
      margin: 6px 0 10px 0;
      padding: 6px 10px;
      border: 1px dashed #b39ddb;
      border-radius: 4px;
      background: #faf7ff;
      color: #311b92;
      font-size: 1.1rem;
      font-weight: 700;
      line-height: 1.35;
      outline: none;
    }
    body.report-mode .report-heading-editor:focus {
      background: #ffffff;
      border-color: #6a1b9a;
      box-shadow: 0 0 0 2px rgba(106, 27, 154, 0.15);
    }
    body.report-mode .report-section-tools {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 6px 0 10px 0;
      padding: 6px 8px;
      border: 1px solid #d7dbe0;
      border-radius: 6px;
      background: #f7f9fb;
    }
    body.report-mode .report-section-toggle {
      border: 1px solid #b0bec5;
      border-radius: 4px;
      background: #ffffff;
      color: #263238;
      font-size: 0.82rem;
      font-weight: 700;
      padding: 5px 10px;
      cursor: pointer;
    }
    body.report-mode .report-section-toggle.exclude {
      background: #ffebee;
      border-color: #ef9a9a;
      color: #b71c1c;
    }
    body.report-mode .report-section-status {
      font-size: 0.78rem;
      color: #546e7a;
      font-weight: 600;
    }

    /* Start Analysis Parameters on a fresh page in report view. */
    body.report-mode #analysisParametersCard {
      break-before: page;
      page-break-before: always;
    }

    .report-field-table-wrapper {
      display: none;
    }

    body.report-mode .report-field-box-source {
      display: none !important;
    }

    body.report-mode .report-field-table-wrapper {
      display: block;
      margin: 10px 0;
      border: 1px solid #d6e1e6;
      border-radius: 8px;
      background: #ffffff;
      overflow: hidden;
    }

    body.report-mode .report-field-table-title {
      margin: 0;
      padding: 8px 10px;
      border-bottom: 1px solid #d6e1e6;
      background: #f2f7fa;
      color: #1f5e63;
      font-size: 0.86rem;
      font-weight: 700;
    }

    body.report-mode .report-field-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      font-size: 0.82rem;
    }

    body.report-mode .report-field-table th,
    body.report-mode .report-field-table td {
      border: 1px solid #dfe7eb;
      padding: 6px 8px;
      text-align: left;
      vertical-align: top;
      word-break: break-word;
    }

    body.report-mode .report-field-table th {
      width: 42%;
      color: #2b4a4f;
      background: #f8fbfc;
      font-weight: 700;
    }

    /* Editable table cells styling */
    body.report-mode [contenteditable="true"] {
      background-color: #fffacd;
      cursor: text;
      outline: 1px dashed #fbc02d;
      padding: 4px;
    }

    body.report-mode [contenteditable="true"]:focus {
      background-color: #fff9c4;
      outline: 2px solid #f57f17;
      box-shadow: 0 0 4px rgba(245, 127, 23, 0.3);
    }

    body.report-mode .report-field-table-title[contenteditable="true"] {
      outline-offset: -2px;
    }

    body.report-mode .report-field-table td[contenteditable="true"] {
      position: relative;
      padding-right: 32px;
    }

    body.report-mode #analysisParametersCard .auto-fill-zone,
    body.report-mode #analysisParametersCard .user-input-zone {
      display: none !important;
    }

    #analysisParamsReportSummary {
      display: none;
    }

    body.report-mode #analysisParamsReportSummary {
      display: block;
      margin: 10px 0 4px;
      padding: 10px;
      border: 1px solid #d1d9de;
      border-radius: 8px;
      background: #fbfdff;
    }

    body.report-mode .report-summary-title {
      margin: 0 0 8px;
      color: #1f5e63;
      font-size: 0.95rem;
      font-weight: 700;
    }

    body.report-mode .report-summary-note {
      margin: 8px 0 0;
      font-size: 0.78rem;
      color: #455a64;
    }

    body.report-mode .report-summary-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      font-size: 0.82rem;
    }

    body.report-mode .report-summary-table th,
    body.report-mode .report-summary-table td {
      border: 1px solid #d7e0e3;
      padding: 6px 8px;
      text-align: left;
      vertical-align: top;
      word-break: break-word;
    }

    body.report-mode .report-summary-table th {
      width: 34%;
      background: #eef4f7;
      color: #24484c;
      font-weight: 700;
    }

    .report-remove-x {
      display: none;
    }
    body.report-mode .report-remove-x {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border: 1px solid #d32f2f;
      border-radius: 999px;
      background: #ffffff;
      color: #d32f2f;
      font-size: 0.86rem;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
      z-index: 8;
    }
    body.report-mode .card {
      position: relative;
    }
    body.report-mode .report-remove-section-btn {
      position: absolute;
      top: 8px;
      right: 8px;
    }
    body.report-mode .report-part-removable {
      position: relative;
    }
    body.report-mode .report-remove-part-btn {
      position: absolute;
      top: 6px;
      right: 6px;
    }
    body.report-mode .report-part-excluded {
      display: none !important;
    }
    body.report-mode .report-auto-empty {
      display: none !important;
    }
    .report-share-wrap {
      position: relative;
      overflow: visible;
    }
    .report-share-menu {
      display: none;
      position: absolute;
      top: 44px;
      right: 0;
      min-width: 240px;
      max-width: min(92vw, 360px);
      padding: 10px;
      border-radius: 10px;
      background: #ffffff;
      border: 1px solid #cfd8dc;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
      z-index: 99999;
    }
    .report-share-menu.open {
      display: block;
    }
    .report-share-title {
      color: #1f5e63;
      font-size: 0.78rem;
      font-weight: 700;
      margin: 0 0 8px 0;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }
    .report-share-item {
      width: 100%;
      text-align: left;
      border: 1px solid #dce5e9;
      border-radius: 8px;
      background: #f8fbfc;
      color: #12363a;
      padding: 8px 10px;
      margin: 4px 0;
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
    }
    .report-share-item:hover {
      background: #edf4f6;
      border-color: #b8c9d1;
    }
    #reportModeBar {
      flex-wrap: wrap;
      row-gap: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.16);
      backdrop-filter: blur(8px);
    }
    
    /* AI Summary Modal */
    .ai-summary-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.75);
      z-index: 100000;
      align-items: center;
      justify-content: center;
    }
    .ai-summary-modal.open {
      display: flex;
    }
    .ai-summary-content {
      background: white;
      border-radius: 12px;
      padding: 24px;
      max-width: 800px;
      width: 90%;
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    }
    .ai-summary-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      border-bottom: 2px solid #1f5e63;
      padding-bottom: 12px;
    }
    .ai-summary-title {
      font-size: 1.5em;
      font-weight: bold;
      color: #1f5e63;
    }
    .ai-summary-close {
      background: #e53935;
      color: white;
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      font-size: 1.2em;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ai-summary-close:hover {
      background: #c62828;
    }
    .ai-summary-body {
      margin: 20px 0;
    }
    .ai-summary-section {
      margin-bottom: 20px;
    }
    .ai-summary-section-title {
      font-weight: bold;
      color: #0f2f32;
      margin-bottom: 8px;
      font-size: 1.1em;
    }
    .ai-summary-output {
      background: #f5f5f5;
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 16px;
      min-height: 150px;
      white-space: pre-wrap;
      font-family: 'Segoe UI', Arial, sans-serif;
      line-height: 1.6;
      color: #333;
    }
    .ai-summary-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 20px;
    }
    .ai-summary-btn {
      padding: 10px 20px;
      border: none;
      border-radius: 6px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.2s;
    }
    .ai-summary-btn.primary {
      background: #4caf50;
      color: white;
    }
    .ai-summary-btn.primary:hover {
      background: #45a049;
    }
    .ai-summary-btn.secondary {
      background: #2196f3;
      color: white;
    }
    .ai-summary-btn.secondary:hover {
      background: #1976d2;
    }
    .ai-summary-loading {
      display: none;
      text-align: center;
      padding: 20px;
      color: #666;
    }
    .ai-summary-loading.active {
      display: block;
    }
    .ai-summary-spinner {
      border: 3px solid #f3f3f3;
      border-top: 3px solid #1f5e63;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      animation: spin 1s linear infinite;
      margin: 0 auto 10px;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .report-mode-btn {
      width: auto !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      white-space: nowrap;
      padding: 7px 14px !important;
      border-radius: 8px !important;
      font-size: 0.9rem !important;
      font-weight: 700;
      letter-spacing: 0.01em;
      line-height: 1.1;
    }
    .report-mode-btn:hover {
      transform: translateY(-1px);
      filter: brightness(1.04);
    }
    .report-share-item {
      width: 100% !important;
      justify-content: flex-start !important;
      white-space: normal !important;
      overflow-wrap: anywhere;
      word-break: break-word;
      line-height: 1.25;
    }
    #reportModeBottomBar {
      display: none;
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 8px 14px;
      z-index: 9999;
      background: linear-gradient(135deg, #0f2f32 0%, #1f5e63 100%);
      box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.25);
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      box-sizing: border-box;
      border-top: 1px solid rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(8px);
    }
    #reportModeBar .report-mode-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: flex-end;
      margin-left: auto;
    }
    #reportModeBottomBar .report-mode-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    @media (max-width: 1100px) {
      #reportModeBar {
        padding: 10px 12px !important;
      }
      #reportModeBottomBar {
        padding: 10px 12px !important;
      }
      #reportModeBar .report-mode-intro {
        width: 100%;
        gap: 10px !important;
      }
      #reportModeBar .report-mode-actions {
        width: 100%;
        justify-content: flex-start;
      }
      #reportModeBottomBar {
        flex-wrap: wrap;
      }
      #reportModeBottomBar .report-mode-actions {
        width: 100%;
        justify-content: flex-start;
      }
    }
    body.report-mode .print-editable {
      display: inline-block;
      min-width: 56px;
      padding: 2px 4px;
      border: 1px dashed #90a4ae;
      border-radius: 4px;
      background: #f7fbfd;
      outline: none;
    }
    body.report-mode .print-editable:focus {
      border-color: #1f5e63;
      box-shadow: 0 0 0 2px rgba(31, 94, 99, 0.2);
      background: #ffffff;
    }
    body.report-mode .card.report-section-excluded {
      border: 1px dashed #ef9a9a !important;
      background: #fff7f7 !important;
      padding: 10px 12px !important;
    }
    body.report-mode .card.report-section-excluded > * {
      display: none !important;
    }
    body.report-mode .card.report-section-excluded > .report-section-tools {
      display: flex !important;
      margin: 0 !important;
    }
    body.printing-final-report .report-remove-x,
    body.printing-final-report .report-section-tools,
    body.printing-final-report .report-section-toggle,
    body.printing-final-report .report-section-status {
      display: none !important;
    }

    /* The Editable Narrative Block */
    .report-narrative {
      display: none;
    }
    body.report-mode .report-narrative {
      display: block;
      margin: 10px 0 15px 0;
      padding: 12px 15px;
      background: #fdfbf7;
      border: 1px dashed #d1c4e9;
      border-left: 4px solid #6a1b9a;
      border-radius: 4px;
      font-family: "Merriweather", Georgia, serif;
      font-size: 11pt;
      line-height: 1.5;
      color: #111;
      outline: none;
      transition: all 0.2s;
    }
    body.report-mode .report-narrative:focus {
      background: #fff;
      border: 1px dashed #6a1b9a;
      box-shadow: 0 0 8px rgba(106, 27, 154, 0.15);
    }
    body.report-mode .report-narrative::before {
      content: '✎ EDITABLE COMMENTARY:';
      display: block;
      font-size: 7.5pt;
      font-family: Arial, sans-serif;
      font-weight: bold;
      color: #8e24aa;
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    body.report-mode .report-summary-top::before {
      content: '✎ TOP SUMMARY (ABOVE SECTION):';
    }
    body.report-mode .report-summary-bottom::before {
      content: '✎ BOTTOM SUMMARY (FROM SECTION DATA):';
    }

    /* Ensure Print Dialog ignores the editing borders */
    @media print {
      body.report-mode,
      body.report-mode .container,
      body.report-mode p,
      body.report-mode li,
      body.report-mode td,
      body.report-mode th,
      body.report-mode .report-narrative {
        font-family: "Merriweather", Georgia, serif !important;
        line-height: 1.56 !important;
      }

      body.report-mode h1,
      body.report-mode h2,
      body.report-mode h3,
      body.report-mode h4,
      body.report-mode summary,
      body.report-mode .main-report-heading,
      body.report-mode .report-heading-editor {
        font-family: "Source Sans 3", "Segoe UI", Tahoma, Verdana, sans-serif !important;
        letter-spacing: 0.01em;
      }

      body.report-mode td,
      body.report-mode th {
        font-size: 9.6pt !important;
      }

      body.report-mode p,
      body.report-mode li,
      body.report-mode .report-narrative {
        font-size: 10.8pt !important;
      }

      body.report-mode .table-wrap,
      body.report-mode .chart-panel,
      body.report-mode #vizCanvasContainer,
      body.report-mode table,
      body.report-mode [style*="grid-template-columns"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: 1fr !important;
      }

      body.report-mode .report-keep-two-col {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      body.report-mode table {
        table-layout: fixed !important;
      }

      .report-narrative {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 0 12px 0 !important;
      }
      .print-editable {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
      }
      .report-remove-x {
        display: none !important;
      }
      .report-section-tools,
      .report-section-toggle,
      .report-section-status {
        display: none !important;
      }
      body.report-mode .report-remove-x,
      body.report-mode .report-section-tools,
      body.report-mode .report-section-toggle,
      body.report-mode .report-section-status {
        display: none !important;
      }
      .card.report-section-excluded {
        display: none !important;
      }
      .report-narrative::before { display: none !important; }
      #reportModeBar,
      #reportModeBottomBar { display: none !important; }
    }

    /* Final print overrides for final report export layout. */
    @media print {
      @page {
        size: A4 landscape !important;
        margin: 1.5cm 1.5cm 1.5cm 2cm !important;
      }

      html,
      body,
      .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
      }

      p,
      li,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      .table-wrap,
      table,
      figure,
      .chart-panel,
      #vizCanvasContainer {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
      }

      .table-wrap {
        padding: 0 !important;
        overflow: visible !important;
        margin-bottom: 0.35cm !important;
      }

      fieldset,
      .user-input-zone,
      .auto-fill-zone {
        page-break-inside: auto !important;
        break-inside: auto !important;
        margin-bottom: 0.35cm !important;
        padding-top: 0.2cm !important;
        padding-bottom: 0.2cm !important;
      }

      .grid > div,
      .grid-2 > div {
        page-break-inside: auto !important;
        break-inside: auto !important;
      }

      /* Keep one blank-line style spacing between adjacent tables in same section. */
      .table-wrap + .table-wrap,
      table + table {
        margin-top: 0.35cm !important;
      }

      table,
      #hourlyQueueTable,
      #hourlyVcrTable,
      #detourDetailedTable,
      #scenarioComparisonTable,
      #diagTable {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
        font-size: 8.2pt !important;
      }

      tr {
        page-break-inside: avoid !important;
      }

      th,
      td {
        padding: 2px 4px !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
      }

      img,
      svg,
      canvas,
      #managementVizCanvas,
      #hourlyQueueChart,
      #hourlyVcrChart,
      #queueChartD1,
      #queueChartD2,
      #vcrChartD1,
      #vcrChartD2,
      #macroMap,
      #detourMap {
        width: 100% !important;
        max-width: 100% !important;
      }

      /* Leaflet print hardening: avoid tile suppression in Chromium PDF output. */
      .leaflet-container,
      .leaflet-pane,
      .leaflet-map-pane,
      .leaflet-tile-pane,
      .leaflet-overlay-pane,
      .leaflet-marker-pane {
        visibility: visible !important;
        opacity: 1 !important;
      }
      .leaflet-container img,
      .leaflet-pane img,
      .leaflet-tile {
        max-width: none !important;
        width: auto !important;
      }
      #macroMap,
      #detourMap {
        min-height: 220px !important;
        page-break-inside: avoid !important;
      }

      /* Each report section starts on a fresh page. */
      .card,
      details.card,
      details,
      .table-wrap,
      .chart-panel,
      #vizCanvasContainer,
      .grid,
      .grid-2 {
        page-break-inside: auto !important;
        break-inside: auto !important;
      }

      .container > .card + .card,
      .container > .card + details.card,
      .container > details.card + .card,
      .container > details.card + details.card {
        page-break-before: auto !important;
        break-before: auto !important;
      }

      .print-page-break,
      .force-page-break {
        page-break-before: always !important;
        break-before: page !important;
      }

      #analysisParametersCard {
        page-break-before: always !important;
        break-before: page !important;
      }
    }

    /* =========================================================
       PDF PRINT FIXES (Logo, Margins, Tables, Charts)
       ========================================================= */
    @media print {
      /* Prevent bad page breaks */
      p, td, li {
        orphans: 3 !important; /* Minimum lines at the bottom of a page */
        widows: 3 !important;  /* Minimum lines at the top of a page */
      }

      /* Keep descriptions attached to their tables/charts */
      .card > p, details > p {
        page-break-after: avoid !important;
      }

      /* Keep canvas/charts attached to their titles */
      .chart-panel, .table-wrap {
        page-break-before: avoid !important;
      }

      /* 1. Remove Grey Margins */
      html, body, body.print-preview-mode {
        background-color: #ffffff !important;
        background: none !important;
        margin: 0 !important;
        padding: 0 !important;
      }

      @page {
        size: A4 landscape !important;
        margin: 12mm 15mm !important; /* Hardcode white margins to block browser grey */
      }

      .container {
        background-color: #ffffff !important;
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
      }

      /* Enhanced Section Headers */
      h2 {
        font-family: "Space Grotesk", "Helvetica Neue", sans-serif !important;
        font-size: 14pt !important;
        font-weight: 700 !important;
        color: #111 !important;
        border-bottom: 2pt solid #000 !important;
        border-left: 4pt solid #333 !important; /* Adds a professional engineering accent block */
        padding-left: 8px !important;
        margin: 20px 0 10px 0 !important;
        page-break-after: avoid !important;
      }

      h3 {
        font-size: 11pt !important;
        color: #333 !important;
        margin: 15px 0 5px 0 !important;
        page-break-after: avoid !important;
      }

      /* 2. Center the Crompton Logo & Header */
      .print-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        justify-content: center !important;
        border-bottom: 2pt solid #000 !important;
        padding-bottom: 15px !important;
        margin-bottom: 20px !important;
      }

      .print-header img, .company-logo {
        display: block !important;
        margin: 0 auto 10px auto !important;
        max-height: 50px !important; /* Adjust if logo is too big */
      }

      /* 3. Make Tables fit to page height */
      .table-wrap {
        page-break-inside: auto !important;
        margin-bottom: 15px !important;
      }
      table {
        page-break-inside: auto !important;
        width: 100% !important;
        font-size: 8pt !important; /* Slightly smaller text to ensure it fits */
        border-top: 2pt solid #000 !important;
        border-bottom: 2pt solid #000 !important;
      }
      th {
        background-color: #f2f2f2 !important; /* Subtle grey for header distinction */
        border-bottom: 1.5pt solid #000 !important;
        color: #000 !important;
        font-weight: bold !important;
        padding: 8px 6px !important;
        text-transform: uppercase !important;
        font-size: 7.5pt !important;
        letter-spacing: 0.5px !important;
      }
      td {
        border-bottom: 0.5pt solid #ddd !important; /* Softer row lines */
        padding: 6px !important;
        font-size: 8.5pt !important;
      }
      tr {
        page-break-inside: avoid !important;
        page-break-after: auto !important;
      }
      /* Optional: alternating row colors for very long tables */
      tr:nth-child(even) td {
        background-color: #fafafa !important;
      }

      /* Engineering Title Block Style */
      .print-meta-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        border: 2pt solid #000 !important; /* Heavy outer border */
        margin-top: 10px !important;
        margin-bottom: 20px !important;
        background-color: #fff !important;
      }
      .print-meta-item {
        border: 0.5pt solid #000 !important; /* Thinner inner borders */
        padding: 8px !important;
      }
      .print-meta-item strong {
        color: #666 !important;
        font-size: 7pt !important;
        text-transform: uppercase !important;
      }
      .print-meta-item span, .print-meta-item input {
        color: #000 !important;
        font-size: 9pt !important;
        font-weight: 700 !important;
        font-family: "JetBrains Mono", monospace !important; /* Gives numbers a technical data look */
      }

      /* 4. Make Charts fit page height */
      .chart-panel, canvas, #vizCanvasContainer {
        max-height: 180px !important; /* Force charts to stay short */
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        page-break-inside: avoid !important;
        object-fit: contain !important;
      }

      /* 5. Ensure Map Tiles Print */
      #macroMap, #detourMap {
        height: 250px !important;
        background: transparent !important;
        page-break-inside: avoid !important;
      }
      .leaflet-tile-pane, .leaflet-tile {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        opacity: 1 !important;
        visibility: visible !important;
      }

      /* Hide input fields that don't wrap, show the injected span instead (See JS below) */
      input.print-long-text { display: none !important; }
      span.print-long-text-display { display: inline-block !important; font-weight: bold; white-space: normal; word-wrap: break-word; }
    }

    /* Ensure the injected span is hidden on the normal screen */
    @media screen {
      span.print-long-text-display { display: none !important; }
    }

    /* Short Report Mode - hide all cards except essential ones for CTMP */
    body.report-mode-short #quickSearchCard,
    body.report-mode-short #detourCard,
    body.report-mode-short #hourlyEstimateCard,
    body.report-mode-short #macroDataVizSection,
    body.report-mode-short #selfDiagnosticsCard,
    body.report-mode-short #printCustomizationCard,
    body.report-mode-short #scenarioManagerCard,
    body.report-mode-short #agttmGeometryCard,
    body.report-mode-short #asdCard,
    body.report-mode-short #roadTypeSensitivityCard,
    body.report-mode-short #speedDelayCard,
    body.report-mode-short #workWindowCard,
    body.report-mode-short #stopGoCard,
    body.report-mode-short #austroadsVizCard,
    body.report-mode-short #pedestrianCard,
    body.report-mode-short #formulaTraceSection,
    body.report-mode-short #betaFeaturesCard,
    body.report-mode-short #assumptionsCard {
      display: none !important;
    }
    
    /* Don't start Analysis Parameters on new page in short report */
    body.report-mode-short #analysisParametersCard {
      break-before: auto;
      page-break-before: auto;
    }

    @media print {
      body.report-mode-short #quickSearchCard,
      body.report-mode-short #detourCard,
      body.report-mode-short #hourlyEstimateCard,
      body.report-mode-short #macroDataVizSection,
      body.report-mode-short #selfDiagnosticsCard,
      body.report-mode-short #printCustomizationCard,
      body.report-mode-short #scenarioManagerCard,
      body.report-mode-short #agttmGeometryCard,
      body.report-mode-short #asdCard,
      body.report-mode-short #roadTypeSensitivityCard,
      body.report-mode-short #speedDelayCard,
      body.report-mode-short #workWindowCard,
      body.report-mode-short #stopGoCard,
      body.report-mode-short #austroadsVizCard,
      body.report-mode-short #pedestrianCard,
      body.report-mode-short #formulaTraceSection,
      body.report-mode-short #betaFeaturesCard,
      body.report-mode-short #assumptionsCard {
        display: none !important;
      }
      
      body.report-mode-short #analysisParametersCard {
        break-before: auto !important;
        page-break-before: auto !important;
      }
    }