:root {
      --green-900:#0e5f52;
      --green-800:#126b5d;
      --green-700:#177764;
      --green-100:#e8fff0;
      --mint:#e5fff3;
      --lime:#e8ffd8;
      --card:#ffffff;
      --text:#222;
      --muted:#6b7280;
      --line:#d7ded8;
      --input:#eeeeec;
      --danger:#b42318;
      --warning:#b54708;
      --ok:#087443;
      --shadow: 0 12px 30px rgba(0, 0, 0, .12);
      --radius: 16px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: "Segoe UI", Arial, sans-serif;
      color: var(--text);
      background: linear-gradient(110deg, #dff7ee 0%, #e8ffd7 100%);
      min-height: 100vh;
    }

    .app-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,.88);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(14,95,82,.15);
    }

    .header-inner {
      max-width: 1180px;
      margin: 0 auto;
      padding: 14px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 260px;
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: linear-gradient(145deg, var(--green-900), #1ea381);
      color: white;
      display: grid;
      place-items: center;
      font-weight: 800;
      letter-spacing: .5px;
      box-shadow: 0 8px 18px rgba(14,95,82,.25);
    }

    .brand h1 {
      margin: 0;
      font-size: 19px;
      line-height: 1.1;
    }

    .brand small {
      color: var(--muted);
      font-size: 12px;
    }

    nav {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }

    .nav-btn, button, .file-label {
      border: 0;
      border-radius: 10px;
      background: var(--green-900);
      color: white;
      padding: 10px 14px;
      font-weight: 700;
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
      font-family: inherit;
      font-size: 14px;
    }

    .nav-btn {
      background: transparent;
      color: var(--green-900);
      border: 1px solid rgba(14,95,82,.18);
    }

    .nav-btn.active, .nav-btn:hover, button:hover, .file-label:hover {
      background: var(--green-900);
      color: white;
      box-shadow: 0 8px 18px rgba(14,95,82,.18);
      transform: translateY(-1px);
    }

    button.secondary, .file-label.secondary {
      background: #f5fbf8;
      color: var(--green-900);
      border: 1px solid rgba(14,95,82,.2);
    }

    button.ghost {
      background: transparent;
      color: var(--green-900);
      border: 1px solid rgba(14,95,82,.2);
    }

    button.danger { background: var(--danger); }
    button.small, .file-label.small { padding: 7px 10px; font-size: 12px; border-radius: 8px; }
    button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

    main {
      max-width: 1180px;
      margin: 0 auto;
      padding: 28px 20px 70px;
    }

    .page { display: none; }
    .page.active { display: block; animation: fadeIn .25s ease; }
    @keyframes fadeIn { from {opacity: 0; transform: translateY(6px);} to {opacity: 1; transform: translateY(0);} }

    .hero {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 26px;
      align-items: stretch;
      margin-top: 12px;
    }

    .hero-card, .card {
      background: rgba(255,255,255,.95);
      border: 1px solid rgba(14,95,82,.12);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .hero-card { padding: 42px; }
    .hero h2 {
      margin: 0 0 14px;
      font-size: clamp(32px, 5vw, 56px);
      line-height: 1.05;
      letter-spacing: -.8px;
    }

    .hero p {
      color: #425047;
      font-size: 17px;
      line-height: 1.7;
      margin: 0 0 22px;
    }

    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

    .feature-panel {
      padding: 28px;
      display: grid;
      gap: 14px;
    }

    .feature-tile {
      padding: 18px;
      border-radius: 14px;
      background: linear-gradient(145deg, #ffffff, #f1fff6);
      border: 1px solid rgba(14,95,82,.1);
    }

    .feature-tile h3 { margin: 0 0 6px; font-size: 17px; }
    .feature-tile p { margin: 0; color: var(--muted); line-height: 1.5; }

    .section-title {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 18px;
    }

    .section-title h2 { margin: 0; font-size: 30px; }
    .section-title p { margin: 8px 0 0; color: var(--muted); line-height: 1.5; }

    .section-tabs, .filters, .toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    .section-tabs { margin-bottom: 18px; }
    .section-tab {
      background: rgba(255,255,255,.9);
      color: var(--green-900);
      border: 1px solid rgba(14,95,82,.18);
      box-shadow: none;
    }
    .section-tab.active { background: var(--green-900); color: white; }

    .workspace {
      background: rgba(255,255,255,.92);
      border-radius: var(--radius);
      border: 1px solid rgba(14,95,82,.12);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .workspace-head {
      padding: 22px 24px;
      border-bottom: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: flex-start;
    }

    .workspace-head h3 { margin: 0; font-size: 24px; }
    .workspace-head p { margin: 6px 0 0; color: var(--muted); }
    .workspace-body { padding: 22px 24px 26px; }

    .table-wrap {
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: white;
      scroll-behavior: auto;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-gutter: stable;
      contain: layout paint;
      transform: translateZ(0);
    }

    .table-wrap th {
      position: static;
      top: auto;
      z-index: auto;
    }

    .table-wrap::-webkit-scrollbar { height: 12px; }
    .table-wrap::-webkit-scrollbar-track { background: #edf5fb; border-radius: 999px; }
    .table-wrap::-webkit-scrollbar-thumb { background: #74aee8; border-radius: 999px; border: 2px solid #edf5fb; }
    .table-wrap::-webkit-scrollbar-thumb:hover { background: #3b8bd5; }

    table {
      width: 100%;
      min-width: 1080px;
      border-collapse: collapse;
      font-size: 13px;
    }

    th, td {
      padding: 11px 12px;
      text-align: left;
      border-bottom: 1px solid #edf1ed;
      vertical-align: top;
    }

    th {
      background: #f1fbf6;
      color: #21352d;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .04em;
      position: sticky;
      top: 0;
      z-index: 1;
      text-align: center;
      vertical-align: middle;
    }

    tr:hover td { background: #fbfffc; }
    .table-wrap.is-scrolling tr:hover td { background: inherit !important; }
    tr.highlight td { background: #fff8d9; }
    .empty-state { text-align: center; padding: 42px 18px; color: var(--muted); }

    .status {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 4px 9px;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }
    .status.completed { background: #dcfce7; color: #14532d; }
    .status.pending { background: #fff7ed; color: #9a3412; }
    .status.nil { background: #f1f5f9; color: #334155; }
    .status.custom { background: #eef2ff; color: #3730a3; }
    .record-remarks { display: grid; gap: 6px; min-width: 210px; }
    .record-remarks .status-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .record-remarks .general-note { color: var(--muted); font-size: 12px; line-height: 1.45; }
    .record-caps { display: grid; gap: 8px; min-width: 220px; }
    .record-caps .cap-line { display: grid; gap: 5px; padding: 6px 7px; border: 1px solid #dbeafe; border-radius: 8px; background: #f8fbff; }
    .record-caps .cap-line-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
    .record-caps .cap-detail { color: #334155; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
    .record-caps .cap-detail b { color: #0f172a; }
    .cat-pill { background: #e0f2fe; color: #075985; }

    .cat-status-summary { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
    .cat-status-table { min-width: 980px; table-layout: fixed; }
    .cat-cell { display: grid; gap: 8px; min-width: 0; }
    .cat-count-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .cat-badge {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 4px 9px;
      font-size: 12px;
      font-weight: 900;
      color: #111827;
      white-space: nowrap;
    }
    .cat-badge.cat2 { background: #fde047; color: #713f12; }
    .cat-badge.cat3 { background: #fb923c; color: #7c2d12; }
    .cat-badge.cat4 { background: #ef4444; color: #fff; }
    .cap-progress-list { display: grid; gap: 6px; }
    .cap-progress-row { display: grid; grid-template-columns: 86px minmax(72px, 1fr) 28px; align-items: center; gap: 7px; font-size: 11px; color: #475569; }
    .cap-progress-track { height: 8px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
    .cap-progress-fill { display: block; height: 100%; min-width: 0; border-radius: inherit; }
    .cap-progress-fill.completed { background: #16a34a; }
    .cap-progress-fill.pending { background: #f97316; }
    .dashboard-detail-table { min-width: 1760px; table-layout: fixed; }
    .dashboard-detail-table .col-detail-area { width: 300px; }
    .dashboard-detail-table .col-detail-total { width: 115px; text-align: center; }
    .dashboard-detail-table .col-detail-completed { width: 125px; text-align: center; }
    .dashboard-detail-table .col-detail-pending { width: 115px; text-align: center; }
    .dashboard-detail-table .col-detail-finding { width: 560px; }
    .dashboard-detail-table .col-detail-cat { width: 150px; }
    .dashboard-detail-table .col-detail-status { width: 395px; }
    .finding-detail-list { display: grid; gap: 10px; }
    .finding-detail-line {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: start;
      gap: 8px;
      padding: 9px 10px;
      border: 1px solid #bae6fd;
      border-left: 4px solid #0284c7;
      border-radius: 10px;
      background: #f0f9ff;
      color: #0f172a;
      line-height: 1.55;
    }
    .finding-detail-line.observation {
      border-color: #ddd6fe;
      border-left-color: #8b5cf6;
      background: #faf5ff;
    }
    .finding-detail-label {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-width: 88px;
      font-weight: 900;
      white-space: nowrap;
    }
    .finding-detail-text { min-width: 0; overflow-wrap: anywhere; }
    .cat-detail-list, .cap-detail-list { display: grid; gap: 7px; }
    .cat-detail-line, .cap-detail-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .cat-detail-line b, .cap-detail-line b { min-width: 72px; color: #475569; font-size: 12px; }
    .item-kind-badge {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap;
      vertical-align: middle;
      margin-right: 6px;
    }
    .item-kind-badge.finding { background: #e0f2fe; color: #075985; }
    .item-kind-badge.observation { background: #f3e8ff; color: #6b21a8; }

    .modal {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, .55);
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding: 28px 14px;
      overflow-y: auto;
      z-index: 100;
    }
    .modal.open { display: flex; }

    .form-card {
      width: min(720px, 100%);
      background: white;
      border-radius: 14px;
      box-shadow: 0 18px 55px rgba(0,0,0,.24);
      padding: 34px 42px;
      animation: scaleIn .18s ease;
    }
    @keyframes scaleIn { from {opacity: 0; transform: scale(.98);} to {opacity: 1; transform: scale(1);} }

    .form-top {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: flex-start;
      margin-bottom: 26px;
    }
    .form-top h2 { margin: 0 0 12px; font-size: 26px; }
    .form-top p { margin: 0; color: #4b5563; font-size: 13px; line-height: 1.55; }

    .field { margin-bottom: 18px; }
    .field label {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
      color: #2f3b35;
      font-weight: 600;
    }
    .field label::before {
      content: "▣";
      color: var(--green-900);
      margin-right: 6px;
      font-size: 11px;
    }
    input, select, textarea {
      width: 100%;
      border: 1px solid transparent;
      border-radius: 5px;
      background: var(--input);
      padding: 11px 12px;
      font: inherit;
      min-height: 40px;
      outline: none;
    }
    textarea { min-height: 86px; resize: vertical; }
    .finding-builder {
      display: grid;
      gap: 12px;
      margin-top: 6px;
    }
    .finding-item {
      border: 1px solid #dbe8df;
      border-radius: 12px;
      background: #fbfffc;
      padding: 14px;
    }
    .finding-item-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      font-weight: 800;
      color: var(--green-900);
    }
    .finding-item textarea { min-height: 78px; }
    .finding-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      align-items: end;
    }
    .finding-meta.has-cat {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .finding-meta .finding-text-field,
    .finding-meta .finding-cap-field { grid-column: 1 / -1; }
    .finding-meta .field { margin-bottom: 0; }
    @media (max-width: 760px) {
      .finding-meta,
      .finding-meta.has-cat { grid-template-columns: 1fr; }
    }
    .muted-box {
      border: 1px dashed #cfdad3;
      border-radius: 12px;
      background: #f8faf9;
      color: var(--muted);
      padding: 14px;
      font-size: 13px;
    }
    .line-list { white-space: pre-line; line-height: 1.55; }
    input:focus, select:focus, textarea:focus {
      border-color: var(--green-700);
      background: #fff;
      box-shadow: 0 0 0 3px rgba(14,95,82,.12);
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 16px;
    }
    .form-actions { display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; margin-top: 20px; }

    .summary-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-bottom: 18px;
    }
    .stat-card {
      background: white;
      border: 1px solid rgba(14,95,82,.12);
      border-radius: 14px;
      padding: 18px;
      box-shadow: 0 8px 20px rgba(0,0,0,.06);
    }
    .stat-card span { color: var(--muted); font-size: 13px; font-weight: 700; }
    .stat-card strong { display: block; font-size: 30px; margin-top: 8px; color: var(--green-900); }

    .dashboard-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .chart-card {
      background: white;
      border-radius: var(--radius);
      border: 1px solid rgba(14,95,82,.12);
      box-shadow: 0 8px 20px rgba(0,0,0,.06);
      padding: 20px;
    }
    .chart-card h3 { margin: 0 0 4px; font-size: 20px; }
    .chart-card p { margin: 0 0 16px; color: var(--muted); }
    canvas { width: 100%; max-width: 100%; height: 360px; border-radius: 10px; background: #ffffff; }

    .filter-card {
      background: rgba(255,255,255,.94);
      border: 1px solid rgba(14,95,82,.12);
      border-radius: var(--radius);
      padding: 18px;
      margin-bottom: 18px;
      box-shadow: 0 8px 20px rgba(0,0,0,.06);
    }
    .filter-card h3 { margin: 0 0 14px; }
    .check-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(100px, 1fr));
      gap: 8px;
      margin-top: 10px;
    }
    .check-item {
      display: flex;
      gap: 7px;
      align-items: center;
      background: #f7fcf9;
      border: 1px solid #e2eee7;
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 13px;
      cursor: pointer;
    }
    .check-item input { width: auto; min-height: auto; }

    .inline-field { min-width: 220px; }
    .inline-field label { display: block; font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
    .hidden { display: none !important; }
    .note { color: var(--muted); font-size: 13px; line-height: 1.5; }
    .footer-note { text-align: center; color: #6b7280; font-size: 12px; margin-top: 34px; }

    @media (max-width: 900px) {
      .header-inner { align-items: flex-start; flex-direction: column; }
      nav { justify-content: flex-start; }
      .hero { grid-template-columns: 1fr; }
      .summary-grid { grid-template-columns: repeat(2, 1fr); }
      .check-grid { grid-template-columns: repeat(3, 1fr); }
      .workspace-head { flex-direction: column; }
      .form-card { padding: 26px 20px; }
    }
    @media (max-width: 620px) {
      main { padding: 18px 12px 60px; }
      .hero-card { padding: 28px 22px; }
      .form-grid { grid-template-columns: 1fr; }
      .finding-meta { grid-template-columns: 1fr !important; }
      .summary-grid { grid-template-columns: 1fr; }
      .check-grid { grid-template-columns: repeat(2, 1fr); }
      .section-title { flex-direction: column; }
      .workspace-body, .workspace-head { padding: 18px; }
    }


    /* === Modern Advanced UI refresh + table/label crop fixes === */
    :root {
      --green-900:#064e45;
      --green-800:#08715f;
      --green-700:#0f8f78;
      --green-100:#ddfff0;
      --mint:#effff8;
      --lime:#ecffd9;
      --card:#ffffff;
      --text:#17211d;
      --muted:#64756d;
      --line:#dce8e2;
      --input:#f4f7f5;
      --shadow: 0 18px 48px rgba(6,78,69,.14);
      --radius: 22px;
    }

    body {
      font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
      background:
        radial-gradient(circle at top left, rgba(15,143,120,.22), transparent 34%),
        radial-gradient(circle at top right, rgba(172,230,74,.23), transparent 30%),
        linear-gradient(135deg, #f7fffb 0%, #e8fff3 46%, #f8fff0 100%);
      letter-spacing: -.01em;
    }

    .app-header {
      background: rgba(255,255,255,.72);
      backdrop-filter: blur(18px) saturate(135%);
      box-shadow: 0 12px 35px rgba(6,78,69,.08);
    }

    .header-inner, main { max-width: 1440px; }
    main { padding-top: 34px; }

    .brand-mark {
      border-radius: 16px;
      background: linear-gradient(145deg, #053f38, #11a884);
      box-shadow: 0 14px 28px rgba(6,78,69,.24);
    }

    .brand h1 { font-size: 20px; letter-spacing: -.03em; }
    .brand small { font-weight: 700; color: #70827a; }

    nav {
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(6,78,69,.12);
      border-radius: 18px;
      padding: 6px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
    }

    .nav-btn {
      border: 0;
      border-radius: 13px;
      padding: 10px 13px;
      font-size: 13px;
    }

    .nav-btn.active, .nav-btn:hover {
      background: linear-gradient(145deg, var(--green-900), #109879);
      box-shadow: 0 10px 22px rgba(6,78,69,.18);
    }

    .hero { grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); }
    .hero-card, .card, .workspace, .filter-card, .chart-card, .stat-card {
      border: 1px solid rgba(6,78,69,.12);
      box-shadow: var(--shadow);
      backdrop-filter: blur(8px);
    }

    .hero-card {
      position: relative;
      overflow: hidden;
      padding: clamp(28px, 5vw, 56px);
      background:
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(242,255,248,.96));
    }

    .hero-card::after {
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      right: -90px;
      top: -90px;
      background: radial-gradient(circle, rgba(17,168,132,.18), transparent 68%);
      pointer-events: none;
    }

    .hero h2 {
      max-width: 820px;
      background: linear-gradient(90deg, #053f38, #0f8f78);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .feature-panel {
      background: rgba(255,255,255,.78);
      align-content: start;
    }

    .feature-tile {
      border-radius: 18px;
      background: linear-gradient(145deg, #ffffff, #f3fff8);
      box-shadow: 0 10px 24px rgba(6,78,69,.07);
    }

    button, .file-label {
      border-radius: 14px;
      background: linear-gradient(145deg, var(--green-900), #0f9679);
      box-shadow: 0 10px 22px rgba(6,78,69,.18);
    }

    button.secondary, .file-label.secondary, button.ghost {
      background: rgba(255,255,255,.82);
      box-shadow: 0 8px 18px rgba(6,78,69,.08);
    }

    .section-tabs {
      padding: 8px;
      border-radius: 20px;
      background: rgba(255,255,255,.66);
      border: 1px solid rgba(6,78,69,.1);
    }

    .section-tab { border-radius: 14px; }
    .workspace { background: rgba(255,255,255,.82); }
    .workspace-head {
      background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(240,255,247,.92));
      align-items: center;
    }

    .toolbar { justify-content: flex-end; }
    .workspace-body { padding: 24px; }

    /* Keep every dashboard/chart/table section stacked vertically */
    .dashboard-layout {
      display: flex !important;
      flex-direction: column !important;
      gap: 24px;
      width: 100%;
    }

    .chart-card, .filter-card, .workspace, .table-wrap {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    .chart-card {
      padding: clamp(18px, 2.2vw, 28px);
      overflow: hidden;
      background: rgba(255,255,255,.9);
    }

    .chart-card h3, .workspace-head h3, .section-title h2 {
      letter-spacing: -.04em;
      color: #0b332e;
    }

    /* Stat cards remain clean on desktop, then become one-by-one on small screens */
    .summary-grid {
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 16px;
    }

    .stat-card {
      position: relative;
      overflow: hidden;
      background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(240,255,247,.9));
    }

    .stat-card::after {
      content: "";
      position: absolute;
      width: 86px;
      height: 86px;
      right: -28px;
      bottom: -30px;
      border-radius: 50%;
      background: rgba(15,143,120,.12);
    }

    .stat-card strong { font-size: clamp(28px, 4vw, 38px); }

    /* Table word-crop and crowded-column fix */
    .table-wrap {
      overflow-x: auto;
      overflow-y: hidden;
      border-radius: 18px;
      border: 1px solid rgba(6,78,69,.12);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 24px rgba(6,78,69,.08);
    }

    table {
      min-width: 1180px;
      table-layout: fixed;
      border-collapse: separate;
      border-spacing: 0;
    }

    th, td {
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
      line-height: 1.55;
      padding: 13px 14px;
    }

    th {
      top: 0;
      background: linear-gradient(180deg, #f0fff7, #e9fbf1);
      border-bottom: 1px solid rgba(6,78,69,.12);
    }

    tbody tr:nth-child(even) td { background: rgba(248,252,250,.7); }
    tr:hover td { background: #f2fff8; }
    .line-list { white-space: pre-wrap; overflow-wrap: anywhere; }
    .status { box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }

    /* Chart canvas: do not force a small fixed height; JS sets readable height */
    canvas {
      display: block;
      width: 100% !important;
      height: auto !important;
      min-height: 320px;
      border: 1px solid rgba(6,78,69,.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,1), rgba(248,255,251,1));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
    }

    input, select, textarea {
      border-radius: 12px;
      border: 1px solid rgba(6,78,69,.08);
    }

    .form-card {
      border-radius: 24px;
      border: 1px solid rgba(6,78,69,.12);
    }

    @media (max-width: 980px) {
      .header-inner { gap: 12px; }
      nav { width: 100%; justify-content: flex-start; }
      .hero { grid-template-columns: 1fr; }
      .workspace-head { align-items: flex-start; }
      .toolbar { justify-content: flex-start; }
    }

    @media (max-width: 760px) {
      .summary-grid { grid-template-columns: 1fr; }
      .check-grid { grid-template-columns: 1fr 1fr; }
      table { min-width: 1040px; }
      .nav-btn { flex: 1 1 170px; }
    }

    @media (max-width: 520px) {
      .check-grid { grid-template-columns: 1fr; }
      .toolbar > * { width: 100%; text-align: center; }
      .brand { min-width: 0; }
    }



    /* === Fix: prevent CAP status badges from overlapping Month/Year columns === */
    .table-wrap {
      overflow-x: auto !important;
      overflow-y: hidden !important;
      scroll-behavior: auto !important;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-gutter: stable;
      contain: layout paint;
      transform: translateZ(0);
    }

    table.records-table {
      width: max-content !important;
      min-width: 1720px !important;
      table-layout: fixed !important;
      border-collapse: separate;
      border-spacing: 0;
    }

    table.records-table th,
    table.records-table td {
      overflow: hidden;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    table.records-table .col-actions { width: 140px; min-width: 140px; }
    table.records-table .col-section { width: 125px; min-width: 125px; }
    table.records-table .col-serial { width: 110px; min-width: 110px; }
    table.records-table .col-type { width: 135px; min-width: 135px; }
    table.records-table .col-audit-date { width: 120px; min-width: 120px; }
    table.records-table .col-reference { width: 110px; min-width: 110px; }
    table.records-table .col-area { width: 175px; min-width: 175px; }
    table.records-table .col-conducted-by { width: 120px; min-width: 120px; }
    table.records-table .col-findings { width: 250px; min-width: 250px; }
    table.records-table .col-count { width: 95px; min-width: 95px; text-align: center; }
    table.records-table .col-caps { width: 430px; min-width: 430px; }
    table.records-table .col-cat { width: 150px; min-width: 150px; }
    table.records-table .col-followup { width: 130px; min-width: 130px; white-space: nowrap; text-align: center; }
    table.records-table .col-month { width: 120px; min-width: 120px; white-space: nowrap; text-align: center; }
    table.records-table .col-year { width: 90px; min-width: 90px; white-space: nowrap; text-align: center; }
    table.records-table .col-remarks { width: 135px; min-width: 135px; }

    table.records-table .record-remarks {
      display: grid;
      gap: 8px;
      min-width: 0 !important;
      width: 100%;
    }

    table.records-table .record-remarks .status-line {
      display: grid;
      grid-template-columns: 82px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      width: 100%;
      min-width: 0;
    }

    table.records-table .record-remarks .status-line b {
      white-space: nowrap;
      font-size: 12px;
      line-height: 1.2;
    }

    table.records-table .record-remarks .status-line .status {
      width: fit-content;
      max-width: 100%;
      white-space: nowrap;
      line-height: 1.2;
    }

    table.records-table td.col-month,
    table.records-table td.col-year {
      position: relative;
      z-index: 1;
      background-clip: padding-box;
    }

    #sectionTableWrap {
      overflow-x: scroll !important;
      overflow-y: hidden !important;
      padding-bottom: 10px;
      scrollbar-width: auto;
    }

    table.records-table.activity-records-table {
      width: max-content !important;
      min-width: 2080px !important;
      font-size: 10.5px;
    }

    table.records-table.activity-records-table th,
    table.records-table.activity-records-table td {
      padding: 8px 7px;
      font-size: 10.5px;
      line-height: 1.35;
    }

    table.records-table.activity-records-table th {
      font-size: 10px;
      letter-spacing: .015em;
    }

    table.records-table.activity-records-table .col-actions { width: 92px; min-width: 92px; }
    table.records-table.activity-records-table .col-section { width: 78px; min-width: 78px; }
    table.records-table.activity-records-table .col-serial { width: 58px; min-width: 58px; }
    table.records-table.activity-records-table .col-type { width: 74px; min-width: 74px; }
    table.records-table.activity-records-table .col-audit-date { width: 86px; min-width: 86px; }
    table.records-table.activity-records-table .col-reference { width: 110px; min-width: 110px; }
    table.records-table.activity-records-table .col-area { width: 130px; min-width: 130px; }
    table.records-table.activity-records-table .col-conducted-by { width: 90px; min-width: 90px; }
    table.records-table.activity-records-table .col-findings { width: 430px; min-width: 430px; }
    table.records-table.activity-records-table .col-count { width: 82px; min-width: 82px; text-align: center; }
    table.records-table.activity-records-table .col-caps { width: 440px; min-width: 440px; }
    table.records-table.activity-records-table .col-cat { width: 150px; min-width: 150px; }
    table.records-table.activity-records-table .col-followup { width: 115px; min-width: 115px; text-align: center; }
    table.records-table.activity-records-table .col-month { width: 90px; min-width: 90px; text-align: center; }
    table.records-table.activity-records-table .col-year { width: 75px; min-width: 75px; text-align: center; }
    table.records-table.activity-records-table .col-remarks { width: 120px; min-width: 120px; }

    table.records-table.activity-records-table button.small {
      padding: 5px 7px;
      font-size: 10px;
      border-radius: 7px;
      margin: 1px;
    }


    /* Cleaner table layout: centered headers, wider CAPs, smaller final Remarks, stronger row separation */
    table.records-table th,
    .dashboard-detail-table th,
    .cat-status-table th,
    .table-wrap th {
      text-align: center !important;
      vertical-align: middle !important;
    }

    table.records-table tbody tr td {
      border-bottom: 3px solid #c9dff0 !important;
    }

    table.records-table tbody tr + tr td {
      border-top: 1px solid #edf6ff !important;
    }

    table.records-table tbody tr:nth-child(even) td {
      background: #f6fbff;
    }

    table.records-table tbody tr:hover td {
      background: #eef8ff !important;
    }

    table.records-table td.col-remarks {
      color: #475569;
      font-size: 10px;
      line-height: 1.35;
    }

    table.records-table .record-caps,
    table.records-table .report-cap-cell {
      min-width: 0 !important;
      width: 100%;
    }

    table.records-table .record-caps .cap-line {
      padding: 8px 9px;
      border-left: 4px solid #38bdf8;
    }

    .finding-cap {
      min-height: 112px !important;
    }

    .record-finding-list, .record-cat-list { display: grid; gap: 7px; }
    .record-finding-line, .record-cat-line {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: start;
      gap: 6px;
      min-width: 0;
    }
    .record-finding-line {
      grid-template-columns: 1fr;
      gap: 5px;
      padding: 6px 7px;
      border: 1px solid #bae6fd;
      border-left: 3px solid #0284c7;
      border-radius: 8px;
      background: #f0f9ff;
    }
    .record-finding-line.observation {
      border-color: #ddd6fe;
      border-left-color: #8b5cf6;
      background: #faf5ff;
    }
    .record-finding-head {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
    }
    .record-cat-badge {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 2px 7px;
      font-size: 9.5px;
      font-weight: 900;
      line-height: 1.2;
      white-space: nowrap;
      background: #fde68a;
      color: #713f12;
    }
    .record-finding-label, .record-cat-label {
      min-width: 72px;
      font-weight: 900;
      white-space: nowrap;
    }
    .record-finding-text, .record-cat-value {
      min-width: 0;
      overflow-wrap: anywhere;
    }
    table.records-table.activity-records-table .item-kind-badge {
      padding: 2px 6px;
      font-size: 9.5px;
      margin-right: 3px;
    }



    /* === Login, year control, admin access and read-only user mode === */
    body:not(.authenticated) .app-header,
    body:not(.authenticated) main,
    body:not(.authenticated) .modal { display: none !important; }

    body.authenticated #loginScreen { display: none !important; }

    .login-screen {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
      background:
        radial-gradient(circle at 18% 16%, rgba(15,143,120,.24), transparent 32%),
        radial-gradient(circle at 82% 10%, rgba(172,230,74,.28), transparent 30%),
        linear-gradient(135deg, #f7fffb 0%, #e8fff3 48%, #f8fff0 100%);
    }

    .login-card {
      width: min(460px, 100%);
      background: rgba(255,255,255,.9);
      border: 1px solid rgba(6,78,69,.12);
      border-radius: 28px;
      box-shadow: 0 24px 70px rgba(6,78,69,.18);
      padding: clamp(24px, 4vw, 38px);
      backdrop-filter: blur(16px);
    }

    .login-card .brand { margin-bottom: 24px; }
    .login-card h2 { margin: 0 0 8px; color: #063f38; letter-spacing: -.04em; font-size: 30px; }
    .login-card p { margin: 0 0 20px; color: var(--muted); line-height: 1.55; }
    .login-error { display: none; margin: 12px 0 0; color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; padding: 10px 12px; font-weight: 700; }
    .login-error.show { display: block; }
    .auth-secondary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
    .auth-secondary-actions button { width: 100%; }
    .invited-signup-panel { margin-top: 14px; padding: 14px; border: 1px solid rgba(125,221,244,.22); border-radius: 14px; background: rgba(3,18,39,.34); }
    .invited-signup-panel.hidden { display: none !important; }
    .auth-help { margin: 10px 0 0 !important; font-size: 12px; text-align: center; }

    .session-bar {
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 20px 14px;
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    body.authenticated .session-bar { display: flex; }

    .session-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(6,78,69,.12);
      background: rgba(255,255,255,.82);
      border-radius: 999px;
      padding: 8px 12px;
      color: #0b332e;
      font-size: 13px;
      font-weight: 800;
      box-shadow: 0 8px 18px rgba(6,78,69,.06);
    }

    .session-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .session-controls select { min-height: 36px; width: auto; min-width: 110px; padding: 7px 10px; }
    .admin-only, .user-only { display: none !important; }
    body.admin-session .admin-only:not(.page) { display: inline-flex !important; }
    body.admin-session .page.admin-only.active { display: block !important; }
    body.user-session .user-only { display: block !important; }
    body.readonly-session .admin-write { display: none !important; }

    .readonly-banner {
      display: none;
      margin-bottom: 14px;
      padding: 12px 14px;
      border-radius: 14px;
      color: #075985;
      background: #e0f2fe;
      border: 1px solid #bae6fd;
      font-weight: 700;
    }
    body.readonly-session .readonly-banner { display: block; }

    .access-grid {
      display: grid;
      grid-template-columns: minmax(280px, .82fr) minmax(420px, 1.18fr);
      gap: 18px;
      align-items: start;
    }

    .access-checks {
      display: grid;
      grid-template-columns: 1fr;
      gap: 9px;
      margin-top: 8px;
    }

    .access-checks .check-item { justify-content: flex-start; }
    .access-note { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #f8faf9; border: 1px dashed #cfe0d7; color: var(--muted); line-height: 1.55; font-size: 13px; }

    @media (max-width: 980px) {
      .access-grid { grid-template-columns: 1fr; }
      .session-bar { padding-inline: 12px; }
      .session-controls { width: 100%; }
      .session-controls > * { flex: 1 1 auto; }
    }


    /* === Security Equipment fleet overview tab === */
    .fleet-shell {
      position: relative;
      overflow: hidden;
      border-radius: 24px;
      background: #000;
      color: #fff;
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 22px 58px rgba(0,0,0,.28);
      min-height: 520px;
    }
    .fleet-shell::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: #f7c400;
      z-index: 2;
    }
    .fleet-shell::after {
      display: none;
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0;
      border-color: transparent;
      z-index: 0;
      pointer-events: none;
    }
    .fleet-chart-head {
      position: relative;
      z-index: 1;
      padding: 20px 22px 0;
      text-align: center;
    }
    .fleet-chart-title {
      margin: 0;
      font-size: clamp(28px, 4vw, 38px);
      color: #fff;
      letter-spacing: -.04em;
    }
    .fleet-note {
      color: #cbd5e1;
      margin: 8px 0 0;
      font-size: 13px;
    }
    .fleet-scroll {
      position: relative;
      z-index: 1;
      overflow-x: auto;
      padding: 0 10px 14px;
    }
    .fleet-svg {
      display: block;
      min-width: 1120px;
      width: 100%;
      height: auto;
      font-family: "Segoe UI", Arial, sans-serif;
      user-select: none;
    }
    .fleet-axis-text, .fleet-label, .fleet-month-label, .fleet-now-text, .fleet-legend-text, .fleet-key-text {
      fill: #fff;
      font-family: "Segoe UI", Arial, sans-serif;
    }
    .fleet-axis-text { font-size: 12px; fill: #f8fafc; }
    .fleet-label { font-size: 11px; font-weight: 700; }
    .fleet-month-label { font-size: 11px; font-weight: 800; }
    .fleet-now-text { font-size: 14px; font-weight: 800; }
    .fleet-grid { stroke: rgba(255,255,255,.08); stroke-width: 1; }
    .fleet-axis-line { stroke: rgba(255,255,255,.55); stroke-width: 1; }
    .fleet-bar { cursor: grab; }
    .fleet-bar:active { cursor: grabbing; }
    .fleet-bar.sla { fill: #ff1111; }
    .fleet-bar.current { fill: #0096d6; }
    .fleet-bar.extension { fill: #f29a38; stroke: rgba(0,0,0,.45); stroke-width: 1; }
    .fleet-current-line { stroke: #0096d6; stroke-width: 5; stroke-linecap: square; }
    .fleet-now-line { stroke: #2b76c0; stroke-width: 4; }
    .fleet-now-arrow { fill: #2b76c0; }
    .fleet-key-text { font-size: 9px; font-weight: 700; fill: #000; }
    .fleet-legend-swatch { rx: 2; ry: 2; }
    .fleet-table table { min-width: 1220px; table-layout: fixed; }
    .fleet-table .col-fleet-actions { width: 260px; }
    .fleet-table .col-fleet-name { width: 330px; }
    .fleet-table .col-fleet-year { width: 112px; text-align: center; }
    .fleet-table .col-fleet-notes { width: 260px; }
    .fleet-table td, .fleet-table th { vertical-align: middle; }
    .fleet-table th.col-fleet-year,
    .fleet-table td.col-fleet-year { text-align: center; padding-left: 8px; padding-right: 8px; }
    .fleet-table th.col-fleet-name,
    .fleet-table td.col-fleet-name,
    .fleet-table th.col-fleet-notes,
    .fleet-table td.col-fleet-notes { text-align: left; }
    .fleet-action-row { display: flex; flex-wrap: wrap; gap: 6px; }
    .fleet-action-row button { box-shadow: none; }
    .fleet-controls-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
      align-items: end;
      margin-top: 14px;
    }
    .fleet-mini-help {
      border: 1px dashed rgba(6,78,69,.22);
      background: rgba(255,255,255,.74);
      border-radius: 16px;
      padding: 12px 14px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }
    .fleet-color-key {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      margin-top: 10px;
      color: #475569;
      font-size: 13px;
      font-weight: 700;
    }
    .fleet-color-key span { display: inline-flex; align-items: center; gap: 6px; }
    .fleet-color-dot { width: 18px; height: 10px; border-radius: 2px; display: inline-block; }
    .fleet-red { background:#ff1111; }
    .fleet-blue { background:#0096d6; }
    .fleet-orange { background:#f29a38; }
    .fleet-field-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 16px;
    }
    .fleet-date-pair {
      display: grid;
      grid-template-columns: minmax(92px, .75fr) minmax(130px, 1fr);
      gap: 8px;
    }
    .fleet-checkbox-label {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: #f7fcf9;
      border: 1px solid #dbe8df;
      border-radius: 12px;
      padding: 10px 12px;
      font-weight: 800;
      color: #0b332e;
    }
    .fleet-checkbox-label input { width: auto; min-height: auto; }
    @media (max-width: 700px) {
      .fleet-field-grid { grid-template-columns: 1fr; }
      .fleet-date-pair { grid-template-columns: 1fr; }
      .fleet-shell::after { border-width: 0 0 190px 190px; }
    }


    /* === Documents drive storage tab === */
    .document-setup-grid,
    .document-upload-grid {
      display: grid;
      grid-template-columns: minmax(160px, .85fr) minmax(220px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr) auto;
      gap: 14px;
      align-items: end;
    }
    .document-setup-grid { grid-template-columns: minmax(320px, 1fr) auto; margin-bottom: 18px; }
    .document-url-actions,
    .document-upload-actions { margin-top: 0; align-items: end; }
    .document-upload-actions { justify-content: flex-start; }
    .document-status {
      margin: 0 0 16px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }
    .document-status.error {
      color: #991b1b;
      background: #fef2f2;
      border: 1px solid #fecaca;
      border-radius: 12px;
      padding: 10px 12px;
      font-weight: 700;
    }
    .document-status.ok {
      color: #075985;
      background: #e0f2fe;
      border: 1px solid #bae6fd;
      border-radius: 12px;
      padding: 10px 12px;
      font-weight: 700;
    }
    .documents-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 16px;
    }
    .document-card {
      overflow: hidden;
      border: 1px solid rgba(6,78,69,.13);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 10px 24px rgba(6,78,69,.08);
    }
    .document-card-head {
      padding: 14px 16px;
      border-bottom: 1px solid #e8f0eb;
      display: flex;
      gap: 12px;
      justify-content: space-between;
      align-items: flex-start;
      background: linear-gradient(135deg, #ffffff, #f2fff8);
    }
    .document-card-head h3 {
      margin: 0;
      font-size: 16px;
      color: #0b332e;
      line-height: 1.35;
      word-break: break-word;
    }
    .document-meta {
      margin-top: 6px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }
    .document-preview {
      width: 100%;
      height: 420px;
      border: 0;
      display: block;
      background: #f8faf9;
    }
    .document-card-actions {
      padding: 12px 16px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      border-top: 1px solid #e8f0eb;
    }
    .document-card-actions a,
    .document-folder-file-actions a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      border-radius: 10px;
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 800;
      color: var(--green-900);
      background: #f5fbf8;
      border: 1px solid rgba(14,95,82,.2);
    }
    .document-folder-card {
      padding: 18px;
      border: 1px solid rgba(6,78,69,.13);
      border-radius: 18px;
      background: linear-gradient(145deg, #ffffff, #eefaff);
      box-shadow: 0 10px 24px rgba(6,78,69,.08);
    }
    .document-folder-head {
      display: flex;
      gap: 12px;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 12px;
    }
    .document-folder-title {
      margin: 0;
      color: #0b332e;
      font-size: 18px;
      line-height: 1.35;
      word-break: break-word;
    }
    .document-folder-files {
      display: grid;
      gap: 8px;
    }
    .document-folder-file {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid rgba(6,78,69,.1);
      border-radius: 12px;
      background: rgba(255,255,255,.84);
    }
    .document-folder-file-name {
      color: #0b332e;
      font-weight: 800;
      word-break: break-word;
    }
    .document-folder-file-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .document-upload-actions button {
      white-space: nowrap;
    }
    @media (max-width: 900px) {
      .document-setup-grid,
      .document-upload-grid { grid-template-columns: 1fr; }
      .document-url-actions,
      .document-upload-actions { justify-content: flex-start; }
    }


    /* === Role-based access, category documents and animated login upgrade === */
    .super-admin-only { display: none !important; }
    body.super-admin-session .super-admin-only:not(.page) { display: inline-flex !important; }
    body.super-admin-session .page.super-admin-only.active,
    body.super-admin-session .page.admin-only.active { display: block !important; }
    body:not(.super-admin-session) .admin-only { display: none !important; }
    body.super-admin-session .admin-only:not(.page) { display: inline-flex !important; }

    .login-screen {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 20% 20%, rgba(17,168,132,.34), transparent 34%),
        radial-gradient(circle at 82% 16%, rgba(247,196,0,.28), transparent 31%),
        linear-gradient(135deg, #041b18 0%, #063f38 44%, #0f8f78 100%);
    }
    .login-bg-orbs, .login-grid-lines { position: fixed; inset: 0; pointer-events: none; }
    .login-bg-orbs span {
      position: absolute;
      width: clamp(90px, 16vw, 230px);
      height: clamp(90px, 16vw, 230px);
      border-radius: 999px;
      background: rgba(255,255,255,.14);
      filter: blur(2px);
      animation: floatOrb 12s ease-in-out infinite alternate;
    }
    .login-bg-orbs span:nth-child(1) { left: 8%; top: 12%; animation-delay: -2s; }
    .login-bg-orbs span:nth-child(2) { right: 10%; top: 18%; width: 150px; height: 150px; animation-delay: -5s; }
    .login-bg-orbs span:nth-child(3) { left: 18%; bottom: 8%; width: 180px; height: 180px; animation-delay: -8s; }
    .login-bg-orbs span:nth-child(4) { right: 20%; bottom: 14%; width: 120px; height: 120px; animation-delay: -1s; }
    .login-bg-orbs span:nth-child(5) { left: 48%; top: 42%; width: 80px; height: 80px; animation-delay: -4s; }
    .login-grid-lines {
      opacity: .2;
      background-image:
        linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
      background-size: 58px 58px;
      animation: gridDrift 18s linear infinite;
    }
    @keyframes floatOrb {
      from { transform: translate3d(0,0,0) scale(1); }
      to { transform: translate3d(38px,-32px,0) scale(1.13); }
    }
    @keyframes gridDrift {
      from { background-position: 0 0; }
      to { background-position: 116px 58px; }
    }
    .login-card {
      position: relative;
      z-index: 2;
      background: rgba(255,255,255,.86);
      border: 1px solid rgba(255,255,255,.34);
      box-shadow: 0 30px 90px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.7);
      backdrop-filter: blur(22px) saturate(150%);
      animation: loginCardIn .55s ease both;
    }
    @keyframes loginCardIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
    .setup-panel {
      display: none;
      border: 1px solid rgba(6,78,69,.14);
      background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(232,255,244,.74));
      border-radius: 20px;
      padding: 16px;
      margin: 18px 0;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
    }
    body.needs-super-admin-setup .setup-panel { display: block; }
    body.needs-super-admin-setup #loginFields { display: none; }
    .setup-badge {
      display: inline-flex;
      border-radius: 999px;
      padding: 6px 10px;
      margin-bottom: 12px;
      color: #063f38;
      font-weight: 900;
      font-size: 12px;
      background: #dcfce7;
      border: 1px solid rgba(6,78,69,.12);
    }
    .role-pill {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 4px 9px;
      font-size: 12px;
      font-weight: 900;
      background: #eef2ff;
      color: #3730a3;
    }
    .document-category-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 0 0 16px;
      padding: 8px;
      border: 1px solid rgba(6,78,69,.1);
      border-radius: 20px;
      background: rgba(255,255,255,.7);
    }
    .document-category-tab {
      background: rgba(255,255,255,.9);
      color: var(--green-900);
      border: 1px solid rgba(6,78,69,.14);
      box-shadow: none;
    }
    .document-category-tab.active { background: linear-gradient(145deg, var(--green-900), #0f9679); color: #fff; }
    .document-section-manager {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) auto auto;
      gap: 12px;
      align-items: end;
      margin-bottom: 16px;
    }
    .document-section-block {
      grid-column: 1 / -1;
      display: grid;
      gap: 14px;
    }
    .document-section-title {
      margin: 6px 0 0;
      padding: 12px 14px;
      border-radius: 16px;
      background: linear-gradient(135deg, #ffffff, #f2fff8);
      border: 1px solid rgba(6,78,69,.12);
      color: #0b332e;
      font-weight: 900;
      box-shadow: 0 8px 20px rgba(6,78,69,.06);
    }

    .document-upload-grid {
      grid-template-columns: minmax(160px, .85fr) minmax(220px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr) auto;
    }
    @media (max-width: 1050px) {
      .document-upload-grid,
      .document-section-manager { grid-template-columns: 1fr; }
    }
    .document-card-category {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 7px;
      padding: 4px 8px;
      border-radius: 999px;
      background: #e0f2fe;
      color: #075985;
      font-size: 11px;
      font-weight: 900;
    }




    /* === QA Calendar tab === */
    .qa-calendar-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
      gap: 18px;
      align-items: start;
    }

    .qa-calendar-card {
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(6,78,69,.12);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .qa-calendar-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 18px 20px;
      border-bottom: 1px solid rgba(6,78,69,.1);
      background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(240,255,247,.92));
      flex-wrap: wrap;
    }

    .qa-calendar-head h3 {
      margin: 0;
      color: #0b332e;
      letter-spacing: -.04em;
      font-size: clamp(21px, 2.4vw, 30px);
    }

    .qa-calendar-actions,
    .qa-calendar-month-actions {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }

    .qa-calendar-grid {
      padding: 16px;
    }

    .qa-calendar-weekdays,
    .qa-calendar-days {
      display: grid;
      grid-template-columns: repeat(7, minmax(82px, 1fr));
      gap: 8px;
    }

    .qa-calendar-weekday {
      text-align: center;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .05em;
      padding: 8px 2px;
    }

    .qa-calendar-day {
      min-height: 112px;
      border: 1px solid rgba(6,78,69,.12);
      border-radius: 16px;
      background: #fff;
      padding: 9px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
      overflow: hidden;
      position: relative;
    }

    .qa-calendar-day:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(6,78,69,.12);
      border-color: rgba(6,78,69,.32);
    }

    .qa-calendar-day.is-other-month {
      opacity: .46;
      background: #f8faf9;
    }

    .qa-calendar-day.is-today {
      box-shadow: inset 0 0 0 2px rgba(6,78,69,.34);
    }

    .qa-calendar-day.is-selected {
      outline: 3px solid rgba(6,78,69,.28);
      outline-offset: 2px;
    }

    .qa-calendar-day.has-inspection { background: linear-gradient(145deg, #ecfdf3, #ffffff 70%); border-color: #16a34a; }
    .qa-calendar-day.has-audit { background: linear-gradient(145deg, #f5f0ff, #ffffff 70%); border-color: #7c3aed; }
    .qa-calendar-day.has-test { background: linear-gradient(145deg, #eff6ff, #ffffff 70%); border-color: #2563eb; }
    .qa-calendar-day.has-night { background: linear-gradient(145deg, #e5e7eb, #ffffff 70%); border-color: #111827; }
    .qa-calendar-day.has-exercise { background: linear-gradient(145deg, #ecfeff, #ffffff 70%); border-color: #0891b2; }
    .qa-calendar-day.has-riskbase { background: linear-gradient(145deg, #fff1f2, #ffffff 70%); border-color: #dc2626; }
    .qa-calendar-day.has-equipment { background: linear-gradient(145deg, #fffbeb, #ffffff 70%); border-color: #f59e0b; }
    .qa-calendar-day.has-other { background: linear-gradient(145deg, #e0f2fe, #ffffff 70%); border-color: #38bdf8; }

    .qa-date-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 999px;
      background: rgba(255,255,255,.85);
      color: #0b332e;
      font-weight: 900;
      border: 1px solid rgba(6,78,69,.08);
      flex: 0 0 auto;
    }

    .qa-event-chip-list {
      display: grid;
      gap: 5px;
      min-width: 0;
    }

    .qa-event-chip {
      border-radius: 999px;
      padding: 4px 7px;
      color: #111827;
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid rgba(0,0,0,.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
    }

    .qa-event-chip.inspection, .qa-color-inspection { background:#22c55e; color:#052e16; }
    .qa-event-chip.audit, .qa-color-audit { background:#a855f7; color:#fff; }
    .qa-event-chip.test, .qa-color-test { background:#3b82f6; color:#fff; }
    .qa-event-chip.night, .qa-color-night { background:#111827; color:#fff; }
    .qa-event-chip.exercise, .qa-color-exercise { background:#06b6d4; color:#083344; }
    .qa-event-chip.riskbase, .qa-color-riskbase { background:#ef4444; color:#fff; }
    .qa-event-chip.equipment, .qa-color-equipment { background:#facc15; color:#422006; }
    .qa-event-chip.other, .qa-color-other { background:#bae6fd; color:#075985; }

    .qa-calendar-legend {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
      gap: 10px;
      padding: 14px 16px 18px;
      border-top: 1px solid rgba(6,78,69,.09);
      background: rgba(255,255,255,.72);
    }

    .qa-legend-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #334155;
      font-size: 13px;
      font-weight: 800;
    }

    .qa-legend-shape {
      width: 28px;
      height: 14px;
      border-radius: 999px;
      display: inline-block;
      border: 1px solid rgba(0,0,0,.08);
      flex: 0 0 auto;
    }

    .qa-calendar-side {
      display: grid;
      gap: 18px;
    }

    .qa-selected-date-box {
      padding: 18px;
    }

    .qa-selected-date-box h3 {
      margin: 0 0 8px;
      color: #0b332e;
      letter-spacing: -.03em;
    }

    .qa-calendar-table {
      min-width: 760px !important;
      width: 100% !important;
      table-layout: fixed;
    }

    .qa-calendar-table th,
    .qa-calendar-table td {
      white-space: normal;
      word-break: break-word;
      overflow-wrap: anywhere;
    }

    .qa-type-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 5px 9px;
      font-size: 12px;
      font-weight: 900;
      border: 1px solid rgba(0,0,0,.08);
      white-space: nowrap;
    }

    .qa-type-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      display: inline-block;
    }


    .qa-auto-popup-toggle.is-on {
      background: linear-gradient(145deg, var(--green-900), #0f9679);
      color: #fff;
      border: 1px solid rgba(6,78,69,.18);
    }

    .qa-auto-popup-toggle.is-off {
      background: #f8fafc;
      color: #475569;
      border: 1px solid #cbd5e1;
      box-shadow: none;
    }

    #calendarNoticeModal.open {
      align-items: center;
      justify-content: center;
      padding: 22px;
    }

    #calendarNoticeModal .qa-event-notice-card {
      width: min(860px, calc(100vw - 32px));
      max-height: calc(100vh - 44px);
      overflow: auto;
      border-radius: 28px;
      box-shadow: 0 30px 90px rgba(0,0,0,.34);
    }

    .qa-event-notice-list {
      display: grid;
      gap: 12px;
      margin: 18px 0;
    }

    .qa-event-notice-group {
      border: 1px solid rgba(6,78,69,.12);
      background: linear-gradient(135deg, #ffffff, #f2fff8);
      border-radius: 18px;
      padding: 14px;
    }

    .qa-event-notice-group h3 {
      margin: 0 0 10px;
      color: #0b332e;
      font-size: 18px;
    }

    .qa-event-notice-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: start;
      padding: 10px 0;
      border-top: 1px solid rgba(6,78,69,.08);
    }

    .qa-event-notice-item:first-of-type { border-top: 0; padding-top: 0; }
    .qa-event-notice-item-title { font-weight: 900; color: #0b332e; margin-bottom: 5px; }
    .qa-event-notice-item-meta { color: var(--muted); font-size: 13px; line-height: 1.45; }
    .qa-event-notice-actions { justify-content: flex-end; }

    @media (max-width: 620px) {
      .qa-event-notice-item { grid-template-columns: 1fr; }
      .qa-event-notice-actions { justify-content: flex-start; }
    }

    @media (max-width: 1100px) {
      .qa-calendar-layout { grid-template-columns: 1fr; }
    }

    @media (max-width: 760px) {
      .qa-calendar-grid { overflow-x: auto; }
      .qa-calendar-weekdays,
      .qa-calendar-days { min-width: 720px; }
      .qa-calendar-head { align-items: flex-start; }
      .qa-calendar-actions,
      .qa-calendar-month-actions { width: 100%; }
      .qa-calendar-actions > *,
      .qa-calendar-month-actions > * { flex: 1 1 auto; }
    }

  

/* === Premium AVSEC QA theme refresh: imported visual language from the reference file === */
:root{
  --green-900:#06345f;
  --green-800:#0b4b86;
  --green-700:#0876c6;
  --green-100:#e8f5ff;
  --mint:#eefaff;
  --lime:#eaf7ff;
  --card:#ffffff;
  --text:#102033;
  --muted:#64748b;
  --line:#d7e2ee;
  --input:#f3f7fb;
  --shadow:0 22px 58px rgba(4,18,38,.14);
  --radius:24px;
  --premium-dark:#020b1c;
  --premium-navy:#061a35;
  --premium-blue:#0b3d91;
  --premium-cyan:#0097a7;
  --premium-gold:#ffd166;
}
*{scrollbar-width:thin;scrollbar-color:rgba(8,118,198,.55) rgba(231,240,248,.75)}
*::-webkit-scrollbar{height:10px;width:10px}*::-webkit-scrollbar-track{background:rgba(231,240,248,.75);border-radius:999px}*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#0876c6,#0097a7);border-radius:999px;border:2px solid rgba(231,240,248,.75)}
body{
  font-family:Inter,"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 12%,rgba(0,151,167,.18),transparent 28%),
    radial-gradient(circle at 86% 8%,rgba(11,61,145,.15),transparent 30%),
    radial-gradient(circle at 78% 88%,rgba(255,209,102,.18),transparent 26%),
    linear-gradient(135deg,#f8fbff 0%,#eef7ff 45%,#f7fbff 100%);
  letter-spacing:-.01em;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(rgba(11,61,145,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(11,61,145,.045) 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,.08));}
.app-header{background:rgba(255,255,255,.72)!important;backdrop-filter:blur(20px) saturate(145%);-webkit-backdrop-filter:blur(20px) saturate(145%);border-bottom:1px solid rgba(11,61,145,.12);box-shadow:0 16px 42px rgba(4,18,38,.08)}
.header-inner,main,.session-bar{max-width:1500px}.header-inner{padding-top:15px;padding-bottom:13px}.brand-mark{position:relative;border-radius:17px;background:linear-gradient(145deg,#0a2a52,#0876c6 62%,#0097a7);box-shadow:0 16px 32px rgba(8,118,198,.22),0 0 22px rgba(0,151,167,.12);overflow:hidden}.brand-mark::after{content:"";position:absolute;inset:9px;border:1px solid rgba(255,255,255,.24);border-radius:12px}.brand h1{color:#08233f;letter-spacing:-.04em}.brand small{font-weight:800;color:#718096}
nav{background:rgba(255,255,255,.68);border:1px solid rgba(11,61,145,.1);border-radius:19px;padding:7px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.nav-btn{border:0;background:transparent;color:#0b3d91;border-radius:13px;font-weight:900;letter-spacing:-.015em}.nav-btn.active,.nav-btn:hover{background:linear-gradient(110deg,#0876c6,#16a9c0,#1160c4,#008f9a);background-size:260% 260%;color:#fff;box-shadow:0 12px 26px rgba(8,118,198,.22);animation:loginButtonGradient 5.5s ease infinite}.nav-btn:focus-visible,button:focus-visible,.file-label:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(0,151,167,.28);outline-offset:2px}
button,.file-label{position:relative;isolation:isolate;border-radius:14px;background:linear-gradient(110deg,#0876c6,#16a9c0,#1160c4,#008f9a);background-size:260% 260%;box-shadow:0 12px 24px rgba(8,118,198,.18);font-weight:900;overflow:hidden}button:hover,.file-label:hover{animation:loginButtonGradient 5.5s ease infinite;filter:brightness(1.04)}button::after,.file-label::after{content:"";position:absolute;top:-90%;bottom:-90%;left:-42%;width:24%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-20deg);opacity:0;z-index:-1}button:hover::after,.file-label:hover::after{animation:loginButtonSweep 3.1s ease-in-out infinite}button.secondary,.file-label.secondary,button.ghost{background:rgba(255,255,255,.84);color:#0b3d91;border:1px solid rgba(11,61,145,.16);box-shadow:0 10px 22px rgba(4,18,38,.07)}button.danger{background:linear-gradient(145deg,#b42318,#dc3545)}
.session-pill{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(236,247,255,.88));border-color:rgba(11,61,145,.12);color:#08233f}.hero-card,.card,.workspace,.filter-card,.chart-card,.stat-card,.qa-calendar-card,.document-card{border:1px solid rgba(11,61,145,.12);box-shadow:var(--shadow);background:rgba(255,255,255,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.hero-card{background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(238,249,255,.92));overflow:hidden}.hero-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 12%,rgba(0,151,167,.16),transparent 26%),radial-gradient(circle at 8% 100%,rgba(11,61,145,.09),transparent 34%);pointer-events:none}.hero h2,.section-title h2,.workspace-head h3,.chart-card h3,.qa-calendar-head h3{background:linear-gradient(90deg,#08233f,#0876c6 55%,#0097a7);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.055em}.hero p,.section-title p,.workspace-head p,.chart-card p,.note{line-height:1.68}.feature-panel{background:rgba(255,255,255,.76)}.feature-tile{background:linear-gradient(145deg,#fff,#eefaff);border-color:rgba(11,61,145,.1);box-shadow:0 12px 26px rgba(4,18,38,.07)}.feature-tile h3{color:#08233f}.section-tabs,.document-category-tabs{background:rgba(255,255,255,.66);border:1px solid rgba(11,61,145,.1);border-radius:22px;padding:8px}.section-tab,.document-category-tab{border-radius:14px;color:#0b3d91}.section-tab.active,.document-category-tab.active{background:linear-gradient(110deg,#0876c6,#16a9c0,#1160c4,#008f9a);color:#fff}.workspace-head,.document-card-head,.qa-calendar-head{background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(235,248,255,.92));border-bottom-color:rgba(11,61,145,.09)}
.stat-card{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(239,249,255,.9));border-left:5px solid #0876c6}.stat-card::after{content:"";position:absolute;width:95px;height:95px;right:-32px;bottom:-34px;border-radius:50%;background:rgba(0,151,167,.12)}.stat-card strong{color:#0b3d91}.table-wrap{border:1px solid rgba(11,61,145,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 12px 28px rgba(4,18,38,.08)}th{background:linear-gradient(180deg,#0b315d,#08233f)!important;color:#fff!important;border-bottom-color:rgba(255,255,255,.16)}tbody tr:nth-child(even) td{background:rgba(248,252,255,.85)}tr:hover td{background:#eefaff!important}input,select,textarea{background:#f5f9fd;border:1px solid rgba(11,61,145,.12);border-radius:12px}input:focus,select:focus,textarea:focus{border-color:#0876c6;background:#fff;box-shadow:0 0 0 3px rgba(0,151,167,.14)}.status.completed{background:#dcfce7;color:#14532d}.status.pending{background:#fff1d6;color:#92400e}.status.nil{background:#e8f1ff;color:#0b3d91}.status.custom{background:#e0f2fe;color:#075985}.cat-pill,.qa-type-pill,.document-card-category{background:#e0f2fe;color:#075985}.readonly-banner,.document-status.ok{background:#e0f2fe;color:#075985;border-color:#bae6fd}.empty-state{background:linear-gradient(145deg,#ffffff,#f4fbff)}
.page.active{animation:premiumPageIn .34s cubic-bezier(.2,.82,.2,1)}.workspace,.card,.filter-card,.chart-card,.qa-calendar-card,.document-card,.stat-card{animation:premiumRise .42s cubic-bezier(.2,.82,.2,1) both}@keyframes premiumPageIn{from{opacity:0;transform:translateY(9px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}@keyframes premiumRise{from{opacity:.82;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Premium animated login portal */
.login-screen.premium-login-screen{position:fixed;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 12% 16%,rgba(0,193,255,.24),transparent 24%),radial-gradient(circle at 88% 78%,rgba(0,151,167,.22),transparent 27%),radial-gradient(circle at 70% 10%,rgba(73,89,255,.18),transparent 24%),linear-gradient(135deg,#020b1c 0%,#061a35 42%,#092e5f 76%,#07384b 100%)}.login-visual-layer{position:absolute;inset:-12%;pointer-events:none;z-index:0}.login-grid-layer{opacity:.38;background-image:linear-gradient(rgba(100,211,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(100,211,255,.12) 1px,transparent 1px);background-size:54px 54px;transform:perspective(720px) rotateX(58deg) translateY(21%);transform-origin:center bottom;animation:loginGridDrift 20s linear infinite;mask-image:linear-gradient(to bottom,transparent 3%,#000 44%,#000 100%)}.login-scan-layer{inset:0;opacity:.72;background:linear-gradient(180deg,transparent 0%,transparent 44%,rgba(78,218,255,.2) 49%,rgba(78,218,255,.04) 52%,transparent 57%,transparent 100%);animation:loginScan 8s ease-in-out infinite}.login-orb{position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none;z-index:1;mix-blend-mode:screen}.login-orb.one{width:390px;height:390px;left:-115px;top:-135px;background:radial-gradient(circle,rgba(62,206,255,.28),rgba(17,95,194,.05) 65%,transparent 72%);animation:loginOrbOne 12s ease-in-out infinite alternate}.login-orb.two{width:460px;height:460px;right:-150px;bottom:-190px;background:radial-gradient(circle,rgba(0,213,189,.25),rgba(30,112,191,.04) 66%,transparent 73%);animation:loginOrbTwo 14s ease-in-out infinite alternate}.login-orb.three{width:220px;height:220px;right:14%;top:11%;background:radial-gradient(circle,rgba(113,130,255,.2),transparent 70%);animation:loginOrbThree 10s ease-in-out infinite alternate}.login-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}.login-particles span{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:rgba(176,235,255,.8);box-shadow:0 0 18px rgba(96,215,255,.85);animation:loginParticleFloat var(--d) ease-in-out var(--delay) infinite alternate}.login-circuit{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.4;background:linear-gradient(90deg,transparent 8%,rgba(84,210,255,.22) 8.12%,transparent 8.24%,transparent 91.6%,rgba(84,210,255,.2) 91.72%,transparent 91.84%)}.login-circuit::before,.login-circuit::after{content:"";position:absolute;height:1px;width:28%;background:linear-gradient(90deg,transparent,rgba(87,219,255,.8),transparent);animation:loginCircuitPulse 5s ease-in-out infinite}.login-circuit::before{left:3%;top:26%}.login-circuit::after{right:3%;bottom:23%;animation-delay:-2.2s}.login-card.premium-login-card{position:relative;z-index:4;width:min(500px,100%);padding:34px;border-radius:28px;text-align:left;color:#e9f8ff;background:linear-gradient(145deg,rgba(9,31,63,.9),rgba(6,25,51,.73));border:1px solid rgba(160,228,255,.3);box-shadow:0 30px 90px rgba(0,0,0,.47),0 0 0 1px rgba(255,255,255,.04) inset,0 0 42px rgba(17,154,227,.15);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);overflow:hidden;animation:loginCardRise .9s cubic-bezier(.2,.82,.2,1) both}.login-card.premium-login-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(125deg,rgba(167,239,255,.78),transparent 26%,transparent 68%,rgba(51,218,205,.58));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.login-card.premium-login-card::after{content:"";position:absolute;left:-25%;right:-25%;top:-2px;height:2px;background:linear-gradient(90deg,transparent,rgba(135,242,255,.95),transparent);animation:loginCardTopLine 4s ease-in-out infinite}.login-card.premium-login-card .brand{justify-content:center;text-align:left;margin-bottom:22px}.login-card.premium-login-card .brand-mark{width:78px;height:78px;border-radius:25px;font-size:29px;background:linear-gradient(145deg,rgba(30,145,230,.8),rgba(0,174,171,.62));box-shadow:0 15px 35px rgba(0,116,196,.35),0 0 35px rgba(51,218,255,.16)}.login-card.premium-login-card .brand-mark::before{content:"";position:absolute;inset:-9px;border-radius:32px;border:1px solid rgba(139,233,255,.36);animation:loginMarkOrbit 9s linear infinite}.login-card.premium-login-card .brand h1{color:#fff!important;font-size:26px;text-shadow:0 0 24px rgba(93,223,255,.25)}.login-card.premium-login-card .brand small,.login-card.premium-login-card p,.login-card.premium-login-card .note{color:#b9d3e8}.login-card.premium-login-card h2{color:#fff;font-size:31px;text-align:center;letter-spacing:1.2px;margin-top:6px}.login-card.premium-login-card h2::before{content:"AVIATION SECURITY QUALITY ASSURANCE";display:block;font-size:10px;line-height:1.4;letter-spacing:3px;font-weight:900;color:#7de9ff;margin-bottom:7px}.login-card.premium-login-card h2::after{content:"SECURE ACCESS";display:block;margin:14px 0 2px;color:#7dddf4;font-size:10px;font-weight:900;letter-spacing:2px}.login-card.premium-login-card label{color:#b4d8e8;text-transform:uppercase;font-size:11px;letter-spacing:1px;font-weight:900}.login-card.premium-login-card .field label::before{content:""}.login-card.premium-login-card input,.login-card.premium-login-card select{color:#effbff;background:rgba(3,18,39,.62);border:1px solid rgba(137,216,241,.25);border-radius:12px;min-height:46px}.login-card.premium-login-card input::placeholder{color:#7893a6}.login-card.premium-login-card input:focus,.login-card.premium-login-card select:focus{border-color:rgba(104,226,255,.78);box-shadow:0 0 0 3px rgba(41,187,226,.16),0 0 20px rgba(45,186,224,.12);background:rgba(4,24,49,.78)}.login-card.premium-login-card button[type="submit"],.login-card.premium-login-card #setupSuperAdminBtn{width:100%;margin-top:8px;color:white;background:linear-gradient(110deg,#0876c6,#16a9c0,#1160c4,#008f9a);background-size:280% 280%;animation:loginButtonGradient 5.5s ease infinite;box-shadow:0 11px 24px rgba(0,123,210,.3);border-radius:13px;padding:13px 15px}.login-error{color:#ffb0b0!important;background:rgba(127,29,29,.28)!important;border-color:rgba(254,202,202,.24)!important}.setup-panel{background:linear-gradient(145deg,rgba(9,31,63,.62),rgba(6,25,51,.45));border-color:rgba(160,228,255,.22)}.setup-badge{background:rgba(66,245,182,.18);border-color:rgba(66,245,182,.28);color:#baffdf}.login-card.premium-login-card::selection{background:rgba(125,233,255,.28)}
/* Launch overlay / refresh animation */
.avsec-launch-overlay{position:fixed;inset:0;z-index:14000;display:none;align-items:center;justify-content:center;overflow:hidden;isolation:isolate;background:#041226;opacity:0}.avsec-launch-overlay.active{display:flex;animation:launchOverlayIn .32s ease forwards}.launch-bg{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(12,102,173,.31),transparent 34%),radial-gradient(circle at 19% 18%,rgba(0,199,232,.15),transparent 26%),linear-gradient(135deg,#020a18,#062547 58%,#052137)}.launch-grid{position:absolute;inset:-16%;opacity:.35;background-image:linear-gradient(rgba(94,219,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(94,219,255,.15) 1px,transparent 1px);background-size:62px 62px;animation:launchGridMove 14s linear infinite}.launch-radar{position:absolute;width:min(74vw,740px);height:min(74vw,740px);border-radius:50%;border:1px solid rgba(99,219,255,.2);box-shadow:0 0 0 70px rgba(78,202,255,.025),0 0 0 145px rgba(78,202,255,.018),0 0 0 220px rgba(78,202,255,.012);animation:launchRadarPulse 3.4s ease-in-out infinite}.launch-radar::before{content:"";position:absolute;inset:12%;border-radius:50%;border:1px solid rgba(99,219,255,.18)}.launch-radar::after{content:"";position:absolute;left:50%;top:0;bottom:50%;width:1px;transform-origin:bottom;background:linear-gradient(transparent,rgba(108,232,255,.85));box-shadow:0 0 20px rgba(75,211,255,.5);animation:launchRadarSweep 3.2s linear infinite}.launch-center{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:260px;width:100%;pointer-events:none}.launch-emblem{position:relative;width:80px;height:80px;display:grid;place-items:center;border-radius:26px;background:linear-gradient(145deg,rgba(23,139,226,.9),rgba(0,184,176,.7));box-shadow:0 0 42px rgba(61,213,255,.28);color:white;font-size:29px;font-weight:900;margin-bottom:20px;animation:launchEmblemIn .9s cubic-bezier(.16,1,.3,1) both}.launch-emblem::before{content:"";position:absolute;inset:-10px;border:1px solid rgba(130,236,255,.45);border-radius:32px;animation:loginMarkOrbit 7s linear infinite}.launch-title-wrap{position:relative;width:100%;height:68px;overflow:visible;filter:drop-shadow(0 0 16px rgba(90,222,255,.3))}.launch-title{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:clamp(34px,6vw,76px);line-height:1;font-weight:900;letter-spacing:clamp(5px,1vw,15px);white-space:nowrap;animation:launchTitleIn 1.05s .2s cubic-bezier(.16,1,.3,1) both}.launch-title-left{clip-path:inset(0 50% 0 0)}.launch-title-right{clip-path:inset(0 0 0 50%)}.launch-subtitle{margin-top:13px;color:#8fe8ff;font-size:clamp(10px,1.2vw,14px);font-weight:800;letter-spacing:4px;animation:launchSubtitleIn .8s .75s ease both}.launch-progress{position:relative;width:min(330px,70vw);height:3px;margin-top:24px;background:rgba(116,222,255,.14);border-radius:10px;overflow:hidden;animation:launchSubtitleIn .8s .9s ease both}.launch-progress span{display:block;height:100%;width:42%;border-radius:inherit;background:linear-gradient(90deg,transparent,#69eaff,#38bdf8,transparent);animation:launchProgress 1.45s ease-in-out infinite}.launch-curtain{position:absolute;top:0;bottom:0;width:50.2%;z-index:3;background:linear-gradient(135deg,rgba(2,15,34,.97),rgba(5,45,78,.97));transition:transform 1.15s cubic-bezier(.77,0,.18,1);box-shadow:0 0 48px rgba(0,0,0,.22)}.launch-curtain-left{left:0;border-right:1px solid rgba(115,226,255,.28)}.launch-curtain-right{right:0;border-left:1px solid rgba(115,226,255,.28)}.avsec-launch-overlay.launch-exit .launch-curtain-left{transform:translateX(-103%)}.avsec-launch-overlay.launch-exit .launch-curtain-right{transform:translateX(103%)}.avsec-launch-overlay.launch-exit .launch-title-left{animation:launchTitleSplitLeft .95s cubic-bezier(.77,0,.18,1) forwards}.avsec-launch-overlay.launch-exit .launch-title-right{animation:launchTitleSplitRight .95s cubic-bezier(.77,0,.18,1) forwards}.avsec-launch-overlay.launch-exit .launch-emblem,.avsec-launch-overlay.launch-exit .launch-subtitle,.avsec-launch-overlay.launch-exit .launch-progress{animation:launchFadeOut .35s ease forwards}.avsec-launch-overlay.launch-exit{animation:launchOverlayOut .3s 1.02s ease forwards}
@keyframes loginGridDrift{0%{background-position:0 0,0 0}100%{background-position:54px 54px,54px 54px}}@keyframes loginScan{0%,100%{transform:translateY(-58%);opacity:.2}50%{transform:translateY(58%);opacity:.82}}@keyframes loginOrbOne{to{transform:translate(55px,42px) scale(1.12)}}@keyframes loginOrbTwo{to{transform:translate(-48px,-36px) scale(1.1)}}@keyframes loginOrbThree{to{transform:translate(-36px,40px) scale(.9)}}@keyframes loginParticleFloat{to{transform:translate3d(22px,-42px,0) scale(1.45);opacity:.35}}@keyframes loginCircuitPulse{0%,100%{transform:scaleX(.5);opacity:.25}50%{transform:scaleX(1.15);opacity:1}}@keyframes loginCardRise{0%{opacity:0;transform:translateY(26px) scale(.965)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes loginCardTopLine{0%,100%{transform:translateX(-32%);opacity:.25}50%{transform:translateX(32%);opacity:1}}@keyframes loginMarkOrbit{to{transform:rotate(360deg)}}@keyframes loginButtonGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes loginButtonSweep{0%,42%{transform:translateX(-320%) skewX(-20deg);opacity:0}58%{opacity:1}100%{transform:translateX(710%) skewX(-20deg);opacity:0}}@keyframes launchOverlayIn{to{opacity:1}}@keyframes launchOverlayOut{to{opacity:0}}@keyframes launchGridMove{to{transform:translate(62px,62px)}}@keyframes launchRadarPulse{0%,100%{transform:scale(.93);opacity:.56}50%{transform:scale(1.03);opacity:1}}@keyframes launchRadarSweep{to{transform:rotate(360deg)}}@keyframes launchEmblemIn{0%{opacity:0;transform:scale(.35) rotate(-30deg)}100%{opacity:1;transform:scale(1) rotate(0)}}@keyframes launchTitleIn{0%{opacity:0;letter-spacing:32px;filter:blur(14px);transform:scale(.92)}100%{opacity:1;filter:blur(0);transform:scale(1)}}@keyframes launchSubtitleIn{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}@keyframes launchProgress{0%{transform:translateX(-120%)}100%{transform:translateX(330%)}}@keyframes launchTitleSplitLeft{to{transform:translateX(-42vw);opacity:0;filter:blur(8px)}}@keyframes launchTitleSplitRight{to{transform:translateX(42vw);opacity:0;filter:blur(8px)}}@keyframes launchFadeOut{to{opacity:0;transform:scale(.82)}}
@media(max-width:760px){.login-card.premium-login-card{padding:28px 20px;border-radius:24px}.login-card.premium-login-card .brand{align-items:center}.login-card.premium-login-card .brand-mark{width:66px;height:66px;border-radius:22px}.login-card.premium-login-card h2{font-size:26px}.launch-title{letter-spacing:5px}.launch-subtitle{letter-spacing:2.3px}}
@media(prefers-reduced-motion:reduce){.login-grid-layer,.login-scan-layer,.login-orb,.login-particles span,.login-circuit::before,.login-circuit::after,.login-card.premium-login-card,.login-card.premium-login-card::after,.login-card.premium-login-card .brand-mark::before,.nav-btn.active,.nav-btn:hover,button,.file-label,.launch-grid,.launch-radar,.launch-radar::after,.launch-emblem,.launch-emblem::before,.launch-title,.launch-subtitle,.launch-progress,.launch-progress span,.page.active,.workspace,.card,.filter-card,.chart-card,.qa-calendar-card,.document-card,.stat-card{animation:none!important}.launch-curtain{transition-duration:.35s}.avsec-launch-overlay.launch-exit{animation:none!important;opacity:0;transition:opacity .2s ease}}


/* === Final fix pack: full-screen login, non-cropped AVSEC launch, always-animated QA logos === */
html, body { width: 100%; min-height: 100%; }

/* Login must occupy the whole viewport, not only the content-width left strip. */
body:not(.authenticated) {
  overflow-x: hidden;
}
.login-screen.premium-login-screen,
#loginScreen.login-screen.premium-login-screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(16px, 3vw, 34px) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  z-index: 9999 !important;
  background:
    radial-gradient(circle at 12% 16%, rgba(0,193,255,.24), transparent 24%),
    radial-gradient(circle at 88% 78%, rgba(0,151,167,.22), transparent 27%),
    radial-gradient(circle at 70% 10%, rgba(73,89,255,.18), transparent 24%),
    linear-gradient(135deg, #020b1c 0%, #061a35 42%, #092e5f 76%, #07384b 100%) !important;
}
body.authenticated #loginScreen.login-screen.premium-login-screen { display: none !important; }
#loginScreen .login-visual-layer,
#loginScreen .login-circuit,
#loginScreen .login-orb,
#loginScreen .login-particles,
#loginScreen .login-bg-orbs,
#loginScreen .login-grid-lines { position: absolute !important; pointer-events: none !important; }
#loginScreen .login-bg-orbs,
#loginScreen .login-grid-lines { inset: 0 !important; }
#loginScreen .login-card.premium-login-card {
  width: min(500px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  overflow: auto !important;
  margin: 0 auto !important;
  transform-origin: center !important;
}

/* Launch overlay must cover the whole screen and avoid title/emblem crop. */
.avsec-launch-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100dvh !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #041226 !important;
  z-index: 14000 !important;
  opacity: 0;
  pointer-events: none !important;
}
.avsec-launch-overlay.active {
  display: flex !important;
  pointer-events: auto !important;
  animation: launchOverlayIn .32s ease forwards !important;
}
.avsec-launch-overlay:not(.active) { opacity: 0 !important; pointer-events: none !important; }
.launch-bg, .launch-grid { position: absolute !important; inset: -2px !important; }
.launch-grid { inset: -18% !important; }
.launch-radar {
  width: min(78vw, 760px) !important;
  height: min(78vw, 760px) !important;
}
.launch-center {
  width: min(1120px, 96vw) !important;
  min-height: 340px !important;
  padding: 30px 16px !important;
  transform: translateZ(0);
}
.launch-title-wrap {
  width: 100% !important;
  height: clamp(82px, 9vw, 116px) !important;
  min-height: clamp(82px, 9vw, 116px) !important;
  overflow: visible !important;
  display: grid !important;
  place-items: center !important;
}
.launch-title {
  line-height: 1.08 !important;
  font-size: clamp(34px, 6vw, 76px) !important;
  padding: .08em 0 .14em !important;
  transform-origin: center !important;
  will-change: transform, opacity, filter, letter-spacing;
}
.launch-subtitle { margin-top: 4px !important; }
.launch-progress { margin-top: 20px !important; }
.launch-curtain { will-change: transform; }

/* Always animate every QA mark in login, header, app and launch overlay. */
.brand-mark,
.login-card.premium-login-card .brand-mark,
.launch-emblem {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  isolation: isolate !important;
  transform-style: preserve-3d;
  animation: qaLogoFloat 4.2s ease-in-out infinite, qaLogoGlow 2.8s ease-in-out infinite alternate !important;
}
.brand-mark::before,
.login-card.premium-login-card .brand-mark::before,
.launch-emblem::before {
  content: "" !important;
  position: absolute !important;
  inset: -9px !important;
  border-radius: inherit !important;
  border: 1px solid rgba(125,233,255,.52) !important;
  box-shadow: 0 0 22px rgba(61,213,255,.22), inset 0 0 18px rgba(255,255,255,.08) !important;
  animation: qaLogoOrbit 7.2s linear infinite !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
.brand-mark::after,
.login-card.premium-login-card .brand-mark::after,
.launch-emblem::after {
  content: "" !important;
  position: absolute !important;
  inset: 7px !important;
  border-radius: calc(inherit - 4px);
  border: 1px solid rgba(255,255,255,.28) !important;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.18) 42%, transparent 70%);
  transform: translateX(-130%) skewX(-22deg);
  animation: qaLogoSweep 3.2s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.brand-mark { color: #fff !important; text-shadow: 0 0 14px rgba(255,255,255,.45); }
.brand-mark, .brand-mark * { z-index: 2; }
.launch-emblem { overflow: visible !important; }

@keyframes qaLogoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  35% { transform: translateY(-4px) rotate(-1.3deg) scale(1.035); }
  70% { transform: translateY(2px) rotate(1deg) scale(.995); }
}
@keyframes qaLogoGlow {
  0% { box-shadow: 0 14px 30px rgba(8,118,198,.22), 0 0 18px rgba(0,151,167,.16); filter: saturate(1); }
  100% { box-shadow: 0 18px 42px rgba(8,118,198,.38), 0 0 34px rgba(0,214,214,.34); filter: saturate(1.18); }
}
@keyframes qaLogoOrbit {
  to { transform: rotate(360deg); }
}
@keyframes qaLogoSweep {
  0%, 45% { transform: translateX(-135%) skewX(-22deg); opacity: 0; }
  58% { opacity: .9; }
  100% { transform: translateX(135%) skewX(-22deg); opacity: 0; }
}

@media (max-width: 620px) {
  #loginScreen .login-card.premium-login-card { width: min(500px, calc(100vw - 24px)) !important; padding: 24px 18px !important; }
  .launch-title-wrap { height: 72px !important; min-height: 72px !important; }
  .launch-title { font-size: clamp(27px, 8.8vw, 42px) !important; letter-spacing: 4px !important; }
  .launch-subtitle { letter-spacing: 2px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark, .login-card.premium-login-card .brand-mark, .launch-emblem,
  .brand-mark::before, .login-card.premium-login-card .brand-mark::before, .launch-emblem::before,
  .brand-mark::after, .login-card.premium-login-card .brand-mark::after, .launch-emblem::after {
    animation: none !important;
  }
}


    /* === Data connection and backup center === */
    .connection-status-card {
      margin-bottom: 18px;
      background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(238,249,255,.9));
    }
    .connection-status-grid,
    .backup-actions-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
      align-items: stretch;
    }
    .connection-metric,
    .backup-upload-box {
      border: 1px solid rgba(11,61,145,.12);
      border-radius: 16px;
      background: rgba(255,255,255,.82);
      padding: 14px;
      box-shadow: 0 8px 18px rgba(4,18,38,.06);
    }
    .connection-metric span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-bottom: 7px;
    }
    .connection-metric strong {
      display: block;
      color: #08233f;
      font-size: 15px;
      line-height: 1.35;
      word-break: break-word;
    }
    .connection-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      border-radius: 999px;
      padding: 7px 11px;
      font-size: 12px;
      font-weight: 900;
      border: 1px solid rgba(0,0,0,.08);
      background: #f1f5f9;
      color: #334155;
    }
    .connection-pill::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: currentColor;
      box-shadow: 0 0 0 4px rgba(100,116,139,.12);
    }
    .connection-pill.online { background:#dcfce7; color:#166534; }
    .connection-pill.connecting { background:#fef9c3; color:#854d0e; }
    .connection-pill.offline { background:#fee2e2; color:#991b1b; }
    .backup-table table { min-width: 1040px !important; table-layout: fixed; }
    .backup-table .col-backup-actions { width: 330px; }
    .backup-table .backup-action-row { display: flex; gap: 6px; flex-wrap: wrap; }
    .auto-backup-toggle.is-on {
      background: linear-gradient(145deg, var(--green-900), #0f9679);
      color: #fff;
      border: 1px solid rgba(6,78,69,.18);
    }
    .auto-backup-toggle.is-off {
      background: #f8fafc;
      color: #475569;
      border: 1px solid #cbd5e1;
      box-shadow: none;
    }
    .auto-backup-status {
      margin-top: 10px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }
    .backup-note {
      margin-top: 12px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }
    .danger-zone {
      border: 1px solid rgba(220, 38, 38, .22);
      background: linear-gradient(145deg, rgba(254, 242, 242, .98), rgba(255, 247, 237, .9));
      box-shadow: 0 16px 34px rgba(127, 29, 29, .1);
    }
    .danger-zone-head {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .danger-bulb {
      width: 14px;
      height: 14px;
      border-radius: 999px;
      background: #dc2626;
      box-shadow: 0 0 0 0 rgba(220, 38, 38, .55);
      animation: dangerBlink 1s ease-in-out infinite;
    }
    .danger-zone h3 {
      color: #7f1d1d;
    }
    .danger-zone .backup-note {
      color: #7f1d1d;
    }
    .danger-zone .danger {
      background: linear-gradient(145deg, #b91c1c, #ef4444);
      color: #fff;
      border-color: rgba(127, 29, 29, .2);
    }
    @keyframes dangerBlink {
      0%, 100% { opacity: .55; box-shadow: 0 0 0 0 rgba(220, 38, 38, .45); }
      50% { opacity: 1; box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
    }



    /* === Risk Assessment System external launch button + modern loading animation === */
    .risk-assessment-nav {
      background: linear-gradient(110deg, #071a3a, #0876c6, #00c7d8, #0b3d91) !important;
      background-size: 260% 260% !important;
      color: #fff !important;
      border: 1px solid rgba(0,151,167,.28) !important;
      box-shadow: 0 12px 28px rgba(8,118,198,.24), 0 0 0 1px rgba(255,255,255,.22) inset !important;
      white-space: nowrap;
    }
    .risk-assessment-nav:hover {
      animation: loginButtonGradient 5.5s ease infinite;
      transform: translateY(-2px) scale(1.01);
    }
    .risk-assessment-nav::before {
      content: "↗";
      margin-right: 7px;
      font-weight: 900;
    }
    .avsec-launch-overlay.risk-launch {
      background: #020b1c !important;
    }
    .avsec-launch-overlay.risk-launch .launch-bg {
      background:
        radial-gradient(circle at 50% 46%, rgba(0,199,216,.30), transparent 33%),
        radial-gradient(circle at 22% 20%, rgba(8,118,198,.28), transparent 28%),
        radial-gradient(circle at 80% 78%, rgba(255,209,102,.16), transparent 28%),
        linear-gradient(135deg, #020b1c 0%, #061a35 42%, #092e5f 78%, #07384b 100%) !important;
    }
    .avsec-launch-overlay.risk-launch .launch-emblem {
      background: linear-gradient(145deg, #00c7d8, #0876c6, #0b3d91) !important;
      color: #ffffff !important;
      box-shadow: 0 0 44px rgba(0,199,216,.36), 0 18px 44px rgba(4,18,38,.38) !important;
      letter-spacing: -.04em;
    }
    .avsec-launch-overlay.risk-launch .launch-title {
      text-transform: none !important;
      letter-spacing: clamp(3px, .9vw, 12px) !important;
      background: linear-gradient(90deg, #ffffff, #7de9ff 48%, #ffd166 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent !important;
      text-shadow: 0 0 30px rgba(0,199,216,.20);
    }
    .avsec-launch-overlay.risk-launch .launch-subtitle {
      color: #b9f7ff !important;
      letter-spacing: clamp(2px, .55vw, 7px) !important;
    }
    .avsec-launch-overlay.risk-launch .launch-progress span {
      background: linear-gradient(90deg, transparent, #7de9ff, #ffd166, transparent) !important;
    }

    /* Fix: keep the full “Risk Assessment System” title visible on all screen sizes. */
    .avsec-launch-overlay.risk-launch .launch-center {
      width: 100vw !important;
      max-width: none !important;
      padding-left: max(14px, 3vw) !important;
      padding-right: max(14px, 3vw) !important;
    }
    .avsec-launch-overlay.risk-launch .launch-title-wrap {
      width: min(1640px, 96vw) !important;
      max-width: 96vw !important;
      height: clamp(78px, 8vw, 112px) !important;
      min-height: clamp(78px, 8vw, 112px) !important;
      overflow: visible !important;
    }
    .avsec-launch-overlay.risk-launch .launch-title {
      font-size: clamp(34px, 5vw, 66px) !important;
      letter-spacing: clamp(1px, .42vw, 7px) !important;
      width: 100% !important;
      max-width: 100% !important;
      white-space: nowrap !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      transform-origin: center center !important;
    }
    @media (max-width: 760px) {
      .avsec-launch-overlay.risk-launch .launch-title-wrap {
        width: 98vw !important;
        max-width: 98vw !important;
        height: 66px !important;
        min-height: 66px !important;
      }
      .avsec-launch-overlay.risk-launch .launch-title {
        font-size: clamp(22px, 6.7vw, 38px) !important;
        letter-spacing: clamp(.5px, .8vw, 2.5px) !important;
      }
      .avsec-launch-overlay.risk-launch .launch-subtitle {
        letter-spacing: 1.5px !important;
      }
    }

    /* Mobile usability pass: login, navigation, controls, and wide data tables. */
    @media (max-width: 760px) {
      html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
      }

      #loginScreen.login-screen.premium-login-screen {
        align-items: flex-start !important;
        justify-content: center !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: max(12px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
      }

      #loginScreen .login-card.premium-login-card {
        width: min(100%, 440px) !important;
        max-height: none !important;
        margin: 0 auto !important;
        padding: 22px 16px !important;
        border-radius: 20px !important;
        overflow: visible !important;
      }

      .login-card.premium-login-card .brand {
        gap: 12px !important;
        margin-bottom: 14px !important;
      }

      .login-card.premium-login-card .brand-mark {
        width: 58px !important;
        height: 58px !important;
        border-radius: 18px !important;
        font-size: 22px !important;
      }

      .login-card.premium-login-card .brand h1 {
        font-size: 19px !important;
        line-height: 1.15 !important;
      }

      .login-card.premium-login-card h2 {
        font-size: 23px !important;
        line-height: 1.15 !important;
        letter-spacing: .4px !important;
      }

      .login-card.premium-login-card h2::before,
      .login-card.premium-login-card h2::after {
        letter-spacing: 1.4px !important;
      }

      .login-card.premium-login-card p,
      .login-card.premium-login-card .note {
        font-size: 13px !important;
        line-height: 1.45 !important;
      }

      input, select, textarea, button, .file-label {
        font-size: 16px !important;
      }

      .app-header {
        position: static !important;
      }

      .header-inner,
      .session-bar,
      main {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
      }

      .header-inner {
        gap: 12px !important;
      }

      .brand {
        width: 100% !important;
        align-items: center !important;
      }

      .brand h1 {
        font-size: 20px !important;
        line-height: 1.15 !important;
      }

      nav {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 8px !important;
      }

      .nav-btn {
        width: 100% !important;
        min-height: 44px !important;
        padding: 10px 8px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
      }

      .session-bar,
      .session-controls,
      .toolbar,
      .filters,
      .workspace-head,
      .section-title {
        flex-direction: column !important;
        align-items: stretch !important;
      }

      .session-controls > *,
      .toolbar > *,
      .filters > *,
      .workspace-head button,
      .workspace-head .file-label {
        width: 100% !important;
      }

      .page {
        padding: 12px 0 !important;
      }

      .hero-card,
      .card,
      .workspace,
      .filter-card,
      .chart-card,
      .qa-calendar-card {
        border-radius: 12px !important;
      }

      .workspace-head,
      .workspace-body,
      .card,
      .filter-card,
      .chart-card {
        padding: 14px !important;
      }

      .table-wrap,
      .backup-table-wrap,
      .fleet-table,
      .qa-calendar-grid {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
      }

      .table-wrap {
        max-height: 68vh !important;
        max-height: 68dvh !important;
      }

      canvas {
        max-height: 300px !important;
      }

      .avsec-launch-overlay .launch-title {
        max-width: 96vw !important;
        white-space: normal !important;
        line-height: 1.05 !important;
      }
    }

    @media (max-width: 420px) {
      nav {
        grid-template-columns: 1fr !important;
      }

      #loginScreen .login-card.premium-login-card {
        padding: 18px 14px !important;
      }

      .login-card.premium-login-card .brand {
        flex-direction: column !important;
        text-align: center !important;
      }
    }

    @media (min-width: 1100px) {
      .header-inner,
      .session-bar,
      main {
        width: min(98vw, 1720px) !important;
        max-width: min(98vw, 1720px) !important;
      }

      main {
        padding-left: 10px !important;
        padding-right: 10px !important;
      }

      .workspace-body {
        padding-left: 16px !important;
        padding-right: 16px !important;
      }

      #sectionTableWrap {
        margin-left: -4px;
        margin-right: -4px;
        width: calc(100% + 8px) !important;
      }
    }

    #activeSectionTitle {
      display: inline-block;
      max-width: 100%;
      padding-right: .2em;
      margin-right: .05em;
      line-height: 1.25;
      letter-spacing: -.025em !important;
      overflow: visible;
      white-space: normal;
    }

    .workspace-head > div:first-child {
      min-width: 0;
      overflow: visible;
      padding-right: 8px;
    }



    /* === v40: align table body content with centered titles === */
    .table-wrap table th,
    .table-wrap table td,
    table.records-table th,
    table.records-table td,
    .dashboard-detail-table th,
    .dashboard-detail-table td,
    .cat-status-table th,
    .cat-status-table td,
    .qa-calendar-table th,
    .qa-calendar-table td,
    .fleet-table table th,
    .fleet-table table td,
    .backup-table table th,
    .backup-table table td {
      text-align: center !important;
      vertical-align: middle !important;
    }

    .table-wrap table td > *,
    table.records-table td > * {
      margin-left: auto;
      margin-right: auto;
    }

    table.records-table td,
    .dashboard-detail-table td,
    .cat-status-table td {
      padding-left: 8px !important;
      padding-right: 8px !important;
    }

    table.records-table.activity-records-table td {
      padding-left: 6px !important;
      padding-right: 6px !important;
    }

    .record-finding-list,
    .record-cat-list,
    .record-caps,
    .finding-detail-list,
    .cat-detail-list,
    .cap-detail-list,
    .report-finding-list,
    .report-cap-list {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }

    .record-finding-line,
    .record-cat-line,
    .record-caps .cap-line,
    .finding-detail-line,
    .cat-detail-line,
    .cap-detail-line,
    .report-finding-line,
    .report-cap-line,
    .cap-detail,
    .cap-detail-text,
    .report-cap-detail,
    .general-note,
    .qa-calendar-table td:nth-child(4),
    .qa-calendar-table td:nth-child(5) {
      text-align: left !important;
    }

    .record-caps .cap-line-head,
    .record-remarks,
    .record-remarks .status-line,
    .cap-progress-list,
    .cat-cell {
      justify-content: center;
      justify-items: center;
      text-align: center !important;
    }

    .record-caps .cap-detail,
    .record-caps .cap-detail b,
    .cap-detail-text,
    .report-cap-detail {
      display: block;
      width: 100%;
    }

    table.records-table td.col-area,
    table.records-table td.col-conducted-by,
    table.records-table td.col-serial,
    table.records-table td.col-type,
    table.records-table td.col-reference,
    table.records-table td.col-month,
    table.records-table td.col-year,
    table.records-table td.col-followup,
    table.records-table td.col-count,
    table.records-table td.col-remarks {
      text-align: center !important;
    }