/* Sources: PROJECT_SCOPE §8.x, FusionX Web UI Guideline v1.3.pdf, Sales Summary format (1).xlsx, LOLCTECH CRM Automation (2).xlsx, Target (1).xlsx */
    :root {
      --fx-primary: #2b6ff3;
      --fx-primary-dark: #1e56c9;
      --fx-navy: #092c4c;
      --fx-muted: #7e91a1;
      --fx-success: #51d277;
      --fx-success-bg: #e8f8ed;
      --fx-warn: #ffc736;
      --fx-warn-bg: #fff8e6;
      --fx-danger: #ff6363;
      --fx-danger-bg: #ffecec;
      --fx-border: #e5e4e5;
      --fx-ice: #e2eaf2;
      --fx-snow: #fafafa;
      --fx-white: #ffffff;
      --fx-shadow: 0 1px 3px rgba(9, 44, 76, 0.08);
      --fx-shadow-lg: 0 10px 40px rgba(9, 44, 76, 0.12);
      --nav-w: 272px;
      --r-lg: 12px;
      --r-md: 8px;
      --gap: 20px;
      --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
      --font-body: "IBM Plex Sans", system-ui, sans-serif;
      --icon-stroke: 1.5;
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; }
    body {
      font-family: var(--font-body);
      font-size: 14px;
      line-height: 1.5;
      color: var(--fx-navy);
      background: linear-gradient(165deg, var(--fx-ice) 0%, #eef2f7 45%, #f4f6f9 100%);
      -webkit-font-smoothing: antialiased;
    }
    .app { display: flex; min-height: 100vh; align-items: stretch; }

    .sidebar {
      width: var(--nav-w);
      flex: 0 0 var(--nav-w);
      background: linear-gradient(180deg, var(--fx-navy) 0%, #0d3a5f 50%, var(--fx-navy) 100%);
      color: #f8fafc;
      display: flex;
      flex-direction: column;
      box-shadow: 4px 0 20px rgba(9, 44, 76, 0.1);
      z-index: 40;
    }
    .brand { padding: 1.25rem 1.1rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
    .brand-row { display: flex; align-items: center; gap: 0.75rem; }
    .brand-mark {
      width: 40px; height: 40px; border-radius: 10px;
      background: linear-gradient(135deg, var(--fx-primary), #5b9fff);
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 0.62rem;
      letter-spacing: 0.06em;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .brand h1 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1rem; letter-spacing: -0.02em; line-height: 1.25; color: #fff; }
    .brand a { color: inherit; text-decoration: none; }
    .nav {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0.5rem 0.55rem 1rem;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: 2px;
    }
    .nav-cap {
      font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em;
      color: rgba(248, 250, 252, 0.38); padding: 0.75rem 0.65rem 0.25rem;
      width: 100%; flex: 0 0 auto;
    }
    .nav-item {
      display: flex; align-items: center; gap: 0.65rem;
      width: 100%;
      box-sizing: border-box;
      padding: 0.55rem 0.7rem; border-radius: var(--r-md);
      font-size: 0.8125rem; font-weight: 600; color: rgba(248, 250, 252, 0.85);
      margin-bottom: 0; transition: background 0.15s;
      flex: 0 0 auto;
    }
    .nav-item i, .nav-item svg { flex-shrink: 0; opacity: 0.85; font-size: 1rem; width: 1.1rem; text-align: center; }
    .nav-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
    .nav-item.on { background: rgba(43, 111, 243, 0.3); color: #fff; box-shadow: inset 0 0 0 1px rgba(91, 159, 255, 0.35); }
    .nav-item.on i, .nav-item.on svg { opacity: 1; color: #bfdbfe; }
    .sidebar-foot {
      flex-shrink: 0; padding: 0.75rem 1rem; font-size: 0.62rem; line-height: 1.45;
      color: rgba(248, 250, 252, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.07);
    }

    .main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow-x: hidden; }

    .skip {
      position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
    }
    .skip:focus {
      left: 0.75rem; top: 0.75rem; width: auto; height: auto; padding: 0.5rem 0.85rem;
      background: var(--fx-primary); color: #fff; border-radius: var(--r-md); z-index: 10000; font-weight: 700;
    }

    .top {
      flex-shrink: 0;
      padding: 0.75rem 1.25rem;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--fx-border);
      position: sticky; top: 0; z-index: 100;
      overflow: visible;
    }
    /* Row 1: title (left) + profile (top-right). Row 2: search, env, help, notifications, role switch. */
    .top-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: auto auto;
      gap: 0.65rem 1.25rem;
      align-items: start;
      max-width: 100%;
    }
    .top-lead { grid-column: 1; grid-row: 1; min-width: 0; }
    .top-profile {
      grid-column: 2;
      grid-row: 1;
      align-self: start;
      justify-self: end;
    }
    .top h2 {
      margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.22rem;
      letter-spacing: -0.03em; color: var(--fx-navy);
    }
    .top .desc { margin: 0.2rem 0 0; font-size: 0.8125rem; color: var(--fx-muted); max-width: 62ch; }
    .fresh { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; font-size: 0.75rem; color: var(--fx-muted); }
    .fresh i { width: 7px; height: 7px; border-radius: 50%; background: var(--fx-success); box-shadow: 0 0 0 3px var(--fx-success-bg); }

    .top-tools {
      grid-column: 1 / -1;
      grid-row: 2;
      display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
      gap: 10px; min-width: 0; position: relative; overflow: visible;
    }
    .top-search-wrap { position: relative; width: min(260px, 100%); flex: 0 1 260px; }
    .top-search {
      width: 100%; height: 38px; padding: 0 0.65rem 0 2.35rem;
      border: 1px solid var(--fx-border); border-radius: var(--r-md);
      background: var(--fx-white); font-family: inherit; font-size: 0.8125rem;
      box-shadow: var(--fx-shadow);
    }
    .top-search-wrap svg {
      position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%);
      color: var(--fx-muted); pointer-events: none;
    }
    .env-badge {
      flex-shrink: 0;
      font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
      padding: 0.28rem 0.55rem; border-radius: 4px; background: var(--fx-warn-bg); color: #92400e;
      border: 1px solid rgba(245, 158, 11, 0.35); line-height: 1.2;
    }

    /* Highlighted LIVE / OFFLINE connectivity toggle */
    .tt-live-toggle {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      min-height: 38px;
      padding: 0.28rem 0.7rem 0.28rem 0.55rem;
      border-radius: 999px;
      border: 1px solid rgba(0, 242, 254, 0.55);
      background: linear-gradient(135deg, rgba(0, 242, 254, 0.22), rgba(79, 172, 254, 0.18));
      color: #04101f;
      font-family: "Plus Jakarta Sans", system-ui, sans-serif;
      cursor: pointer;
      box-shadow: 0 0 0 1px rgba(0, 242, 254, 0.25), 0 0 18px rgba(0, 242, 254, 0.35);
      position: relative;
      transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .tt-live-toggle.is-live {
      animation: tt-live-pulse 2.2s ease-in-out infinite;
    }
    .tt-live-toggle.is-offline {
      border-color: rgba(245, 158, 11, 0.65);
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(251, 191, 36, 0.18));
      box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.3), 0 0 16px rgba(245, 158, 11, 0.35);
      color: #78350f;
      animation: none;
    }
    .tt-live-dot {
      width: 9px; height: 9px; border-radius: 50%;
      background: #00f2fe;
      box-shadow: 0 0 8px #00f2fe;
      flex-shrink: 0;
    }
    .tt-live-toggle.is-offline .tt-live-dot {
      background: #f59e0b;
      box-shadow: 0 0 8px #f59e0b;
    }
    .tt-live-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
    .tt-live-label {
      font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    }
    .tt-live-sub {
      font-size: 0.55rem; font-weight: 600; opacity: 0.75; letter-spacing: 0.02em;
    }
    .tt-offline-pending {
      min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem;
      border-radius: 999px; background: #e11d48; color: #fff;
      font-size: 0.58rem; font-weight: 800;
      display: inline-flex; align-items: center; justify-content: center;
    }
    @keyframes tt-live-pulse {
      0%, 100% { box-shadow: 0 0 0 1px rgba(0, 242, 254, 0.25), 0 0 14px rgba(0, 242, 254, 0.3); }
      50% { box-shadow: 0 0 0 2px rgba(0, 242, 254, 0.45), 0 0 26px rgba(0, 242, 254, 0.55); }
    }
    .tt-offline-banner {
      position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%);
      z-index: 10050; max-width: min(520px, 92vw);
      padding: 0.55rem 1rem; border-radius: 999px;
      background: rgba(15, 23, 42, 0.92); color: #f8fafc;
      border: 1px solid rgba(245, 158, 11, 0.55);
      font-size: 0.78rem; font-weight: 600;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
      pointer-events: none;
    }
    html.theme-dark .tt-live-toggle.is-live { color: #e0f7fa; }
    html.theme-dark .tt-live-toggle.is-offline { color: #ffedd5; }

    /* Futuristic neumorphic theme switch (ref: soft UI light/dark) */
    .tt-theme-toggle {
      --tt-neo-bg: #e8edf3;
      --tt-neo-ink: #6b7c8f;
      --tt-neo-ink-on: #3d4f63;
      --tt-neo-ink-off: #a0aec0;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 0.65rem;
      height: 42px;
      padding: 0 0.35rem;
      border: none;
      background: transparent;
      cursor: pointer;
      font-family: "Plus Jakarta Sans", system-ui, sans-serif;
      box-shadow: none;
    }
    .tt-theme-toggle:focus-visible {
      outline: 2px solid #00e5ff;
      outline-offset: 3px;
      border-radius: 8px;
    }
    .tt-theme-label {
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      line-height: 1;
      white-space: nowrap;
      color: var(--tt-neo-ink-off);
      transition: color 0.2s ease, text-shadow 0.2s ease;
    }
    .tt-theme-track {
      position: relative;
      width: 52px;
      height: 26px;
      border-radius: 999px;
      background: var(--tt-neo-bg);
      box-shadow:
        inset 3px 3px 6px rgba(163, 177, 198, 0.55),
        inset -3px -3px 6px rgba(255, 255, 255, 0.9);
      flex-shrink: 0;
    }
    .tt-theme-knob {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: linear-gradient(145deg, #ffffff, #e8eef5);
      box-shadow:
        3px 3px 6px rgba(163, 177, 198, 0.55),
        -2px -2px 5px rgba(255, 255, 255, 0.95);
      transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s ease, box-shadow 0.25s ease;
    }
    .tt-theme-toggle.is-light .tt-theme-label-light,
    .tt-theme-toggle:not(.is-dark) .tt-theme-label-light {
      color: var(--tt-neo-ink-on);
    }
    .tt-theme-toggle.is-light .tt-theme-label-dark,
    .tt-theme-toggle:not(.is-dark) .tt-theme-label-dark {
      color: var(--tt-neo-ink-off);
    }
    .tt-theme-toggle.is-dark {
      --tt-neo-bg: #1a2233;
      --tt-neo-ink-on: #e8eef8;
      --tt-neo-ink-off: #5a6a82;
    }
    .tt-theme-toggle.is-dark .tt-theme-track {
      background: #151c2c;
      box-shadow:
        inset 3px 3px 7px rgba(0, 0, 0, 0.65),
        inset -2px -2px 5px rgba(255, 255, 255, 0.06),
        0 0 0 1px rgba(0, 229, 255, 0.12);
    }
    .tt-theme-toggle.is-dark .tt-theme-knob {
      left: 29px;
      background: linear-gradient(145deg, #3d4f6a, #243044);
      box-shadow:
        3px 3px 8px rgba(0, 0, 0, 0.55),
        -1px -1px 3px rgba(255, 255, 255, 0.08),
        0 0 12px rgba(0, 229, 255, 0.45);
    }
    .tt-theme-toggle.is-dark .tt-theme-label-dark {
      color: var(--tt-neo-ink-on);
      text-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
    }
    .tt-theme-toggle.is-dark .tt-theme-label-light {
      color: var(--tt-neo-ink-off);
    }
    @media (max-width: 900px) {
      .tt-theme-toggle .tt-theme-label { display: none; }
    }
    .icon-btn {
      flex-shrink: 0;
      width: 38px; height: 38px; border-radius: var(--r-md); border: 1px solid var(--fx-border);
      background: var(--fx-white); display: inline-flex; align-items: center; justify-content: center;
      color: var(--fx-muted); cursor: pointer; box-shadow: var(--fx-shadow); padding: 0;
    }
    .icon-btn:hover { color: var(--fx-primary); border-color: rgba(43, 111, 243, 0.35); background: var(--fx-ice); }

    details.notif { position: relative; flex-shrink: 0; }
    details.notif > summary {
      list-style: none; width: 38px; height: 38px; border-radius: var(--r-md);
      border: 1px solid var(--fx-border); background: var(--fx-white);
      display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--fx-shadow);
      position: relative;
    }
    .notif-badge {
      position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px;
      border-radius: 999px; background: #dc2626; color: #fff; font-size: 0.625rem; font-weight: 800;
      line-height: 16px; text-align: center; border: 2px solid var(--fx-white); pointer-events: none;
    }
    details.notif > summary::-webkit-details-marker { display: none; }
    details.notif[open] > summary { border-color: var(--fx-primary); color: var(--fx-primary); }
    .notif-panel {
      position: absolute; right: 0; top: calc(100% + 8px);
      width: min(320px, calc(100vw - 2rem));
      background: var(--fx-white); border: 1px solid var(--fx-border); border-radius: var(--r-lg);
      box-shadow: var(--fx-shadow-lg); z-index: 200; overflow: hidden;
    }
    .notif-panel-head {
      display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
      padding: 0.6rem 0.85rem; background: var(--fx-snow); border-bottom: 1px solid var(--fx-border);
    }
    .notif-panel h4 {
      margin: 0; font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
      letter-spacing: 0.07em; color: var(--fx-muted);
    }
    .notif-mark-all {
      border: none; background: transparent; color: var(--fx-primary); font-size: 0.6875rem;
      font-weight: 700; cursor: pointer; padding: 0.15rem 0.25rem;
    }
    .notif-mark-all:hover { text-decoration: underline; }
    .notif-row {
      width: 100%; text-align: left; border: none; background: var(--fx-white);
      padding: 0.65rem 0.85rem; font-size: 0.8125rem; border-bottom: 1px solid var(--fx-border);
      display: flex; gap: 0.5rem; align-items: flex-start; cursor: pointer;
    }
    .notif-row:hover { background: var(--fx-ice); }
    .notif-row:last-child { border-bottom: none; }
    .notif-row.is-read { opacity: 0.72; }
    .notif-row strong { display: block; font-weight: 700; color: var(--fx-navy); font-size: 0.8125rem; }
    .notif-body { display: block; color: var(--fx-muted); margin-top: 0.15rem; line-height: 1.35; }
    .notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fx-primary); margin-top: 0.35rem; flex-shrink: 0; }
    .notif-dot.muted { background: var(--fx-border); }
    .notif-row time { display: block; font-size: 0.65rem; color: var(--fx-muted); margin-top: 0.15rem; }
    .notif-empty { padding: 1rem 0.85rem; font-size: 0.8125rem; color: var(--fx-muted); }

    .field { flex-shrink: 0; }
    .field label { display: block; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fx-muted); margin-bottom: 0.15rem; }
    select#role {
      height: 38px; min-width: 148px; max-width: 100%;
      padding: 0 1.75rem 0 0.55rem; border: 1px solid var(--fx-border); border-radius: var(--r-md);
      background: var(--fx-white); font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem;
      color: var(--fx-navy); cursor: pointer; box-shadow: var(--fx-shadow);
    }
    .user {
      flex-shrink: 0;
      display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem 0.25rem 0.25rem;
      border-radius: 999px; border: 1px solid var(--fx-border); background: var(--fx-white); box-shadow: var(--fx-shadow);
      max-width: 100%;
    }
    .user-av {
      width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, #1e3a5f, #0d233a); color: #fff;
      font-family: var(--font-display); font-weight: 800; font-size: 0.65rem;
      display: flex; align-items: center; justify-content: center;
    }
    .user-txt { min-width: 0; }
    .user .n { font-family: var(--font-display); font-weight: 800; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
    .user .r { font-size: 0.66rem; color: var(--fx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }

    .context-bar {
      flex-shrink: 0;
      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
      padding: 0.5rem 1.25rem; background: var(--fx-white); border-bottom: 1px solid var(--fx-border);
      font-size: 0.78rem; color: var(--fx-muted);
    }
    .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; min-width: 0; }
    .breadcrumb a { color: var(--fx-primary); font-weight: 700; text-decoration: none; }
    .breadcrumb a:hover { text-decoration: underline; }
    .breadcrumb strong { color: var(--fx-navy); }
    .fy-pill {
      display: inline-flex; align-items: center; padding: 0.18rem 0.5rem; border-radius: 999px;
      background: var(--fx-ice); font-weight: 700; color: var(--fx-navy); font-size: 0.7rem; margin-left: 0.25rem;
    }
    .classify { font-size: 0.72rem; color: var(--fx-muted); text-align: right; max-width: 100%; line-height: 1.35; }

    .role-switch {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      align-self: center;
      height: 38px;
      border-left: 1px solid var(--fx-border);
      padding-left: 10px;
      margin-left: 2px;
    }
    /* One toolbar row: label + select share 38px visual line with search, icons, badge. */
    .role-switch .field {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.45rem;
      margin-bottom: 0;
    }
    .role-switch .field label {
      display: inline;
      margin-bottom: 0;
      line-height: 1;
      white-space: nowrap;
    }
    @media (max-width: 520px) {
      .role-switch {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
      }
    }

    /* overflow-y visible so twin footer below page is not clipped inside nested scroll */
    .page { flex: 1 1 auto; min-height: 0; padding: 1rem 1.25rem 1.5rem; overflow-y: visible; overflow-x: hidden; }
    @media (max-width: 900px) {
      .page { padding-bottom: 5.5rem; }
    }
    .toolbar {
      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.65rem; margin-bottom: 1rem;
    }
    .btn {
      height: 38px; padding: 0 1rem; border-radius: var(--r-md); font-family: var(--font-display); font-weight: 700;
      font-size: 0.8125rem; cursor: pointer; border: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
    }
    .btn-p { background: linear-gradient(180deg, var(--fx-primary), var(--fx-primary-dark)); color: #fff; box-shadow: 0 2px 6px rgba(43, 111, 243, 0.3); }
    .btn-s { background: var(--fx-white); color: var(--fx-navy); border: 1px solid var(--fx-border); font-weight: 600; }
    .btn-t { background: transparent; color: var(--fx-primary); font-weight: 700; padding: 0.25rem 0.5rem; border: none; cursor: pointer; font-size: 0.8125rem; }
    .btn-t:hover { text-decoration: underline; }

    .kpi-grid {
      display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); align-items: stretch;
    }
    @media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 520px) { .kpi-grid { grid-template-columns: 1fr; } }
    .kpi {
      background: var(--fx-white); border: 1px solid var(--fx-border); border-radius: var(--r-lg);
      padding: 0.9rem 1rem; box-shadow: var(--fx-shadow); position: relative; overflow: hidden;
      display: flex; flex-direction: column; min-width: 0;
    }
    .kpi::before {
      content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
      background: linear-gradient(90deg, var(--fx-primary), #5b9fff);
    }
    .kpi.warn::before { background: linear-gradient(90deg, #ea580c, var(--fx-warn)); }
    .kpi-head {
      display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: start; margin-bottom: 0.35rem;
    }
    .kpi-head span { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fx-muted); line-height: 1.35; min-width: 0; }
    .spark { width: 72px; height: 26px; flex-shrink: 0; align-self: start; }
    svg.spark path { stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
    .kpi-val { font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; letter-spacing: -0.03em; line-height: 1.15; }
    .mono { font-variant-numeric: tabular-nums; }
    .kpi-note { margin-top: auto; padding-top: 0.35rem; font-size: 0.78rem; color: #556575; line-height: 1.4; }
    .kpi-delta { margin-top: 0.35rem; font-size: 0.72rem; font-weight: 700; }
    .kpi-delta.up { color: #15803d; }
    .kpi-delta.down { color: #b91c1c; }

    .mgmt-targets {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: var(--gap);
    }
    @media (max-width: 700px) { .mgmt-targets { grid-template-columns: 1fr; } }
    .mini-kpi {
      background: var(--fx-white); border: 1px solid var(--fx-border); border-radius: var(--r-md); padding: 0.65rem 0.85rem; box-shadow: var(--fx-shadow);
    }
    .mini-kpi .lbl { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; color: var(--fx-muted); letter-spacing: 0.06em; }
    .mini-kpi .val { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; margin-top: 0.2rem; }
    .mini-kpi .src { font-size: 0.65rem; color: var(--fx-muted); margin-top: 0.25rem; }

    .layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: var(--gap); align-items: stretch; }
    .layout > .card { min-width: 0; height: 100%; display: flex; flex-direction: column; }
    .layout > section.card .table-wrap { flex: 1 1 auto; min-height: 0; }
    @media (max-width: 1040px) { .layout { grid-template-columns: 1fr; } }

    .funnel-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.85rem; align-items: center; }
    .funnel-chips span {
      font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
      padding: 0.32rem 0.6rem; border-radius: 999px; border: 1px solid var(--fx-border); background: var(--fx-white); color: var(--fx-muted);
    }
    .funnel-chips span.on { border-color: var(--fx-primary); color: var(--fx-primary); background: var(--fx-ice); }

    .card { background: var(--fx-white); border: 1px solid var(--fx-border); border-radius: var(--r-lg); box-shadow: var(--fx-shadow); overflow: hidden; min-width: 0; }
    .card-h {
      padding: 0.75rem 1rem; border-bottom: 1px solid var(--fx-border);
      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem;
    }
    .card-h h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 0.86rem; color: var(--fx-navy); }
    .card-h .hint { font-size: 0.7rem; color: var(--fx-muted); max-width: 100%; }

    .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.t { width: 100%; border-collapse: collapse; font-size: 0.8125rem; min-width: 880px; }
    .t th, .t td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--fx-border); vertical-align: middle; }
    .t th {
      text-align: left; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--fx-muted); background: var(--fx-snow); white-space: nowrap;
    }
    .t td { background: var(--fx-white); }
    .t tbody tr:hover td { background: #fafbfc; }
    .t th.num, .t td.num { text-align: right; }

    .tag { display: inline-flex; padding: 0.12rem 0.45rem; border-radius: 4px; font-size: 0.65rem; font-weight: 800; white-space: nowrap; }
    .tag-ok { background: var(--fx-success-bg); color: #166534; }
    .tag-warn { background: var(--fx-warn-bg); color: #a16207; }
    .tag-info { background: var(--fx-ice); color: var(--fx-primary-dark); }
    .tag-danger { background: var(--fx-danger-bg); color: #b91c1c; }

    .cust { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
    .cust-ico {
      width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
      background: var(--fx-ice); color: var(--fx-primary-dark); font-family: var(--font-display); font-weight: 800; font-size: 0.58rem;
      display: flex; align-items: center; justify-content: center;
    }
    .cust b { display: block; font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
    .cust small { display: block; color: var(--fx-muted); font-size: 0.7rem; }

    .bar { height: 4px; border-radius: 99px; background: #eef1f5; margin-top: 0.25rem; max-width: 100px; overflow: hidden; }
    .bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--fx-primary), #5b9fff); }

    .task {
      padding: 0.85rem 1rem;
      border-bottom: 1px solid var(--fx-border);
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0.65rem;
    }
    .task:last-of-type { border-bottom: none; }
    .task > div { min-width: 0; }
    .task input { margin-top: 0.2rem; accent-color: var(--fx-primary); flex-shrink: 0; }
    .task strong { font-size: 0.8125rem; display: block; }
    .task p { margin: 0.15rem 0 0; font-size: 0.74rem; color: var(--fx-muted); }
    .task > .btn {
      align-self: flex-start;
      width: 132px;
      min-width: 132px;
      max-width: 132px;
      height: 36px;
      justify-content: center;
      white-space: nowrap;
      padding: 0 0.65rem;
      line-height: 1.1;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .timeline { padding: 0.5rem 0.85rem 0.85rem; }
    .tl { border-left: 2px solid var(--fx-ice); margin-left: 5px; padding: 0.4rem 0 0.4rem 0.75rem; position: relative; }
    .tl::before {
      content: ""; position: absolute; left: -6px; top: 0.5rem; width: 9px; height: 9px; border-radius: 50%;
      background: var(--fx-primary); box-shadow: 0 0 0 3px rgba(43, 111, 243, 0.2);
    }
    .tl p { margin: 0; font-size: 0.76rem; color: var(--fx-muted); }
    .tl time { font-size: 0.64rem; color: var(--fx-muted); }

    .alert {
      margin-top: var(--gap); padding: 0.85rem 1rem; border-radius: var(--r-lg);
      border: 1px solid rgba(245, 158, 11, 0.45); background: linear-gradient(135deg, var(--fx-warn-bg), #fff);
      display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.84rem; color: #713f12; box-shadow: var(--fx-shadow);
    }
    .alert strong { color: var(--fx-navy); }

    .grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
    .g8 { grid-column: span 8; } .g4 { grid-column: span 4; } .g6 { grid-column: span 6; } .g12 { grid-column: span 12; }
    @media (max-width: 1100px) { .g8, .g4, .g6 { grid-column: span 12; } }

    .chart-pad { padding: 0.45rem 0.85rem 0.85rem; }
    .pager {
      display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem;
      padding: 0.5rem 0.85rem; font-size: 0.72rem; color: var(--fx-muted); background: var(--fx-snow); border-top: 1px solid var(--fx-border);
    }
    .pager-b { display: flex; gap: 0.25rem; flex-shrink: 0; }
    .pager-b button { min-width: 28px; height: 28px; border: 1px solid var(--fx-border); border-radius: 5px; background: #fff; font-weight: 700; font-size: 0.7rem; cursor: pointer; }
    .pager-b button.on { background: var(--fx-navy); color: #fff; border-color: var(--fx-navy); }

    .inv-strip {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem 1rem;
      padding: 0.75rem 1rem; font-size: 0.72rem; background: var(--fx-snow); border-bottom: 1px solid var(--fx-border);
    }
    .inv-strip div { color: var(--fx-muted); min-width: 0; }
    .inv-strip strong { display: block; color: var(--fx-navy); font-size: 0.76rem; margin-top: 0.08rem; word-break: break-word; }

    .app-footer {
      flex-shrink: 0; padding: 0.65rem 1.25rem; border-top: 1px solid var(--fx-border);
      background: rgba(255, 255, 255, 0.95); font-size: 0.66rem; color: var(--fx-muted);
      display: flex; flex-wrap: wrap; gap: 0.65rem; justify-content: space-between; align-items: center;
    }
    .app-footer a { color: var(--fx-primary); font-weight: 700; text-decoration: none; }
    .app-footer a:hover { text-decoration: underline; }

    [data-p] { display: none; opacity: 0; transform: translateY(6px); }
    [data-p].on { display: block; animation: in 0.35s ease forwards; }
    @keyframes in { to { opacity: 1; transform: translateY(0); } }

    .menu-fab {
      display: none; position: fixed; bottom: 1rem; left: 1rem; z-index: 300;
      width: 48px; height: 48px; border-radius: 50%; border: none;
      background: linear-gradient(135deg, var(--fx-primary), #5b9fff); color: #fff; box-shadow: var(--fx-shadow-lg); cursor: pointer;
      align-items: center; justify-content: center;
    }
    .backdrop { display: none; position: fixed; inset: 0; background: rgba(9, 44, 76, 0.45); z-index: 90; }
    .backdrop.on { display: block; }

    :focus-visible { outline: 2px solid var(--fx-primary); outline-offset: 2px; }

    @media (max-width: 900px) {
      .sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform 0.25s ease; z-index: 120; }
      .sidebar.open { transform: translateX(0); box-shadow: 8px 0 32px rgba(0, 0, 0, 0.2); }
      .menu-fab { display: inline-flex; }
    }

/* Route mock additions */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem 1.25rem; }
.form-field > label,
.form-field label:not(.form-check-label) { display: block; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fx-muted); margin-bottom: 0.25rem; }
.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select { width: 100%; height: 38px; border: 1px solid var(--fx-border); border-radius: var(--r-md); padding: 0 0.55rem; font-family: inherit; font-size: 0.8125rem; box-shadow: var(--fx-shadow); }
.form-field textarea { width: 100%; min-height: 88px; border: 1px solid var(--fx-border); border-radius: var(--r-md); padding: 0.5rem; font-family: inherit; font-size: 0.8125rem; resize: vertical; }
/* REF NO + search: keep magnifier button on the same row as the input */
.form-field .input-group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  gap: 0;
}
.form-field .input-group > .form-control,
.form-field .input-group > input:not([type="checkbox"]):not([type="radio"]) {
  flex: 1 1 auto;
  width: 1% !important;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.form-field .input-group > .btn,
.form-field .input-group > button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  min-width: 38px;
  margin: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.form-field-full { grid-column: 1 / -1; }
.form-field .form-check { display: flex; align-items: center; gap: 0.55rem; min-height: 38px; margin: 0; padding: 0; }
.form-field .form-check-input { width: 1.15rem; height: 1.15rem; min-width: 1.15rem; margin: 0; flex-shrink: 0; }
.form-field .form-check-label { display: inline-block; width: auto; margin: 0; padding: 0; white-space: nowrap; font-size: 0.8125rem; font-weight: 600; text-transform: none; letter-spacing: 0.02em; color: var(--fx-navy); }
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.auth-card { width: 100%; max-width: 400px; background: var(--fx-white); border-radius: var(--r-lg); box-shadow: var(--fx-shadow-lg); padding: 2rem 1.75rem; border: 1px solid var(--fx-border); }
.auth-card h1 { margin: 0 0 0.35rem; font-family: var(--font-display); font-size: 1.35rem; }
.auth-card p { margin: 0 0 1.25rem; font-size: 0.84rem; color: var(--fx-muted); }
.nav-item { text-decoration: none; color: inherit; }
a.nav-item.on { cursor: default; }