:root {
      --brand: #1e5ba8;
      --brand-tint: #e3f2fd;
      --accent: #f7941d;
      --gray-50: #f9fafb;
      --gray-100: #f3f4f6;
      --gray-200: #e5e7eb;
      --gray-300: #d1d5db;
      --gray-400: #9ca3af;
      --gray-500: #6b7280;
      --gray-600: #4b5563;
      --gray-700: #374151;
      --gray-900: #111827;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html {
      height: 100%;
    }
    body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, sans-serif;
      background: var(--gray-50);
      color: var(--gray-900);
      min-height: 100%;
      min-height: 100dvh;
    }
    body.has-app-shell {
      display: flex;
      flex-direction: column;
    }

    /* —— App shell & dual-column sidebar —— */
    .app-shell {
      display: flex;
      flex: 1 1 auto;
      min-height: 100dvh;
      width: 100%;
    }
    .app-main {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      min-height: 100dvh;
    }
    .app-content {
      flex: 1 0 auto;
      min-height: 0;
      width: 100%;
      padding-bottom: 2rem;
    }

    .app-sidebar {
      --nav-rail-bg: #f3f4f6;
      --nav-panel-bg: #ffffff;
      --nav-text: var(--gray-900);
      --nav-muted: var(--gray-500);
      --nav-border: var(--gray-200);
      --nav-item-hover: var(--gray-100);
      --nav-item-active-bg: #eef2ff;
      --nav-item-active-text: var(--brand);
      --nav-search-bg: var(--gray-50);
      --sidebar-width: 17.5rem;
      position: relative;
      flex-shrink: 0;
      width: var(--sidebar-width);
      height: 100dvh;
      min-height: 100dvh;
      margin: 0;
      padding: 0;
      align-self: stretch;
      display: flex;
      flex-direction: column;
      transition: width 0.24s ease, padding 0.24s ease, transform 0.24s ease;
      border-bottom: 0.005rem solid var(--nav-border);
    }
    body[data-nav-theme="dark"] .app-sidebar {
      --nav-rail-bg: #0f172a;
      --nav-panel-bg: #1e293b;
      --nav-text: #f8fafc;
      --nav-muted: #94a3b8;
      --nav-border: #334155;
      --nav-item-hover: rgba(255,255,255,0.06);
      --nav-item-active-bg: rgba(255,255,255,0.1);
      --nav-item-active-text: #fff;
      --nav-search-bg: #0f172a;
    }
    body[data-nav-theme="blue"] .app-sidebar {
      --nav-rail-bg: #1e40af;
      --nav-panel-bg: #2563eb;
      --nav-text: #ffffff;
      --nav-muted: rgba(255,255,255,0.75);
      --nav-border: rgba(255,255,255,0.15);
      --nav-item-hover: rgba(255,255,255,0.1);
      --nav-item-active-bg: rgba(255,255,255,0.18);
      --nav-item-active-text: #ffffff;
      --nav-search-bg: rgba(255,255,255,0.12);
    }

    .app-sidebar-inner {
      display: flex;
      flex: 1;
      height: 100%;
      min-height: 0;
      border-radius: 0;
      overflow: hidden;
      border: none;
      border-right: 1px solid var(--nav-border);
      box-shadow: none;
    }

    .nav-rail {
      width: 3.5rem;
      flex-shrink: 0;
      background: var(--nav-rail-bg);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0.625rem 0;
      gap: 0.25rem;
      border-right: 1px solid var(--nav-border);
      position: relative;
      z-index: 2;
      overflow: visible;
    }
    .nav-rail-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.25rem;
      height: 2.25rem;
      border-radius: 9999px;
      overflow: hidden;
      margin-bottom: 0.5rem;
      background: #fff;
    }
    .nav-rail-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .nav-rail-icons {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
      flex: 1;
      width: 100%;
      padding: 0 0.375rem;
    }
    .nav-rail-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.25rem;
      height: 2.25rem;
      border: none;
      border-radius: 0.625rem;
      background: transparent;
      color: var(--nav-muted);
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      list-style: none;
    }
    .nav-rail-btn svg { width: 1.125rem; height: 1.125rem; }
    .nav-rail-btn:hover { background: var(--nav-item-hover); color: var(--nav-text); }
    .nav-rail-btn.is-active {
      background: var(--nav-item-active-bg);
      color: var(--nav-item-active-text);
    }
    .nav-rail-theme {
      background: linear-gradient(135deg, rgba(30, 91, 168, 0.12), rgba(247, 148, 29, 0.12));
      color: var(--brand);
    }
    .nav-rail-theme:hover {
      background: linear-gradient(135deg, rgba(30, 91, 168, 0.2), rgba(247, 148, 29, 0.2));
      color: var(--brand);
    }
    body[data-nav-theme="dark"] .nav-rail-theme {
      background: linear-gradient(135deg, rgba(148, 163, 184, 0.2), rgba(30, 41, 59, 0.35));
      color: #e2e8f0;
    }
    body[data-nav-theme="blue"] .nav-rail-theme {
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
    }
    .nav-rail-footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
      width: 100%;
      padding: 0.75rem 0.375rem 0.75rem;
      margin-top: auto;
      position: relative;
      z-index: 3;
      border-top: 1px solid var(--nav-border);
      box-sizing: border-box;
    }
    .nav-rail-user { position: relative; z-index: 4; }
    .nav-rail-user > summary { list-style: none; cursor: pointer; }
    .nav-rail-user > summary::-webkit-details-marker { display: none; }
    .nav-rail-avatar .avatar {
      width: 2rem;
      height: 2rem;
      border-radius: 9999px;
      background: var(--brand);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .nav-rail-user .user-panel {
      position: absolute;
      top: auto;
      right: auto;
      left: calc(100% + 0.5rem);
      bottom: 0;
      margin-top: 0;
      width: 14rem;
      z-index: 200;
    }
    .nav-rail-user[open] .nav-rail-avatar {
      background: var(--nav-item-active-bg);
      color: var(--nav-item-active-text);
      border-radius: 0.625rem;
    }

    .nav-panel {
      flex: 1;
      min-width: 0;
      background: var(--nav-panel-bg);
      color: var(--nav-text);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: width 0.24s ease, opacity 0.24s ease;
    }
    .nav-panel-section {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow: auto;
      padding: 0.625rem 0.875rem 1rem 1rem;
    }
    .nav-panel-head { margin-bottom: 0.75rem; }
    .nav-panel-title {
      margin: 0;
      font-size: 1.125rem;
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    .nav-panel-search {
      position: relative;
      margin-bottom: 1rem;
    }
    .nav-panel-search svg {
      position: absolute;
      left: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      width: 1rem;
      height: 1rem;
      color: var(--nav-muted);
      pointer-events: none;
    }
    .nav-panel-search input {
      width: 100%;
      padding: 0.5rem 0.75rem 0.5rem 2.25rem;
      border: 1px solid var(--nav-border);
      border-radius: 0.625rem;
      background: var(--nav-search-bg);
      color: inherit;
      font-size: 0.875rem;
    }
    .nav-panel-search input:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(30, 91, 168, 0.15);
    }
    .nav-panel-search input::placeholder { color: var(--nav-muted); }

    .nav-quick-links {
      display: flex;
      flex-direction: column;
      gap: 0.125rem;
      margin-bottom: 1rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--nav-border);
    }
    .nav-groups { flex: 1; min-height: 0; }
    .nav-group {
      scroll-margin-top: 0.75rem;
    }
    .nav-group.is-section-active .nav-group-label {
      color: var(--nav-item-active-text);
      font-weight: 700;
    }
    .nav-group.is-section-active .nav-item {
      background: var(--nav-item-active-bg);
      color: var(--nav-item-active-text);
    }
    .nav-group.is-section-active .nav-item .nav-item-icon {
      opacity: 1;
      color: var(--nav-item-active-text);
    }
    .nav-group.is-section-active .nav-item.is-active {
      font-weight: 700;
      box-shadow: inset 0 0 0 1px rgba(30, 91, 168, 0.22);
    }
    .nav-group.is-filter-hidden { display: none; }
    .nav-group-label {
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--nav-muted);
      margin: 0 0 0.5rem 0.5rem;
    }
    .nav-group-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.125rem;
    }
    .nav-item {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      padding: 0.5rem 0.625rem;
      border-radius: 0.625rem;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--nav-text);
      transition: background 0.15s, color 0.15s;
    }
    .nav-item:hover { background: var(--nav-item-hover); }
    .nav-item.is-active {
      background: var(--nav-item-active-bg);
      color: var(--nav-item-active-text);
      font-weight: 600;
    }
    .nav-item.is-hidden { display: none !important; }
    .nav-item-icon {
      flex-shrink: 0;
      width: 1.125rem;
      height: 1.125rem;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.85;
    }
    .nav-item-icon svg { width: 1rem; height: 1rem; }
    .nav-item-label { flex: 1; min-width: 0; }
    .nav-item-badge {
      flex-shrink: 0;
      min-width: 1.25rem;
      height: 1.25rem;
      padding: 0 0.35rem;
      font-size: 0.65rem;
      font-weight: 700;
      line-height: 1.25rem;
      text-align: center;
      color: #fff;
      background: var(--accent);
      border-radius: 9999px;
    }

    .header-slim .header-inner { padding: 0.625rem 1.25rem; }
    .header-page {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      min-width: 0;
    }
    .header-menu-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.25rem;
      height: 2.25rem;
      border: 1px solid var(--gray-200);
      border-radius: 0.5rem;
      background: #fff;
      color: var(--gray-700);
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .header-menu-toggle:hover {
      background: var(--gray-50);
      border-color: var(--gray-300);
      color: var(--brand);
    }
    .header-menu-toggle svg { width: 1.125rem; height: 1.125rem; }
    .sidebar-toggle-icon { display: block; }
    .sidebar-toggle-icon--show { display: none; }
    body.sidebar-collapsed .sidebar-toggle-icon--hide { display: none; }
    body.sidebar-collapsed .sidebar-toggle-icon--show { display: block; }
    .header-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
    .header-brand-text .name { font-weight: 700; font-size: 1rem; color: var(--brand); }
    .header-brand-text .ver { font-size: 0.6875rem; color: var(--gray-500); }
    .header-file-search input { width: 14rem; }

    body.sidebar-collapsed .app-sidebar {
      width: 0;
      padding-left: 0;
      overflow: hidden;
      pointer-events: none;
    }
    body.sidebar-collapsed .app-sidebar-inner {
      opacity: 0;
      pointer-events: none;
    }

    .sidebar-backdrop {
      position: fixed;
      inset: 0;
      z-index: 90;
      border: none;
      background: rgba(15, 23, 42, 0.42);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.24s ease;
    }
    .sidebar-backdrop.is-visible {
      opacity: 1;
      pointer-events: auto;
    }

    @media (max-width: 900px) {
      .app-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: 100dvh;
        min-height: 100dvh;
        margin: 0;
        z-index: 100;
        width: var(--sidebar-width);
        padding: 0;
        pointer-events: auto;
      }
      body.sidebar-collapsed .app-sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width);
        padding: 0;
        pointer-events: none;
      }
      body.sidebar-collapsed .app-sidebar-inner {
        opacity: 1;
      }
      .header-file-search { display: none; }
    }

    a { color: inherit; text-decoration: none; }
    button, select, input { font: inherit; }

    .header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: #fff;
      border-bottom: 1px solid var(--gray-200);
      box-shadow: 0 1px 2px rgba(0,0,0,.05);
    }
    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.75rem 1.5rem;
      flex-wrap: wrap;
    }
    .brand-row {
      display: flex;
      align-items: center;
      gap: 2rem;
    }
    .brand-link {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    .brand-link img { height: 48px; width: auto; }
    .brand-text {
      border-left: 1px solid var(--gray-300);
      padding-left: 0.75rem;
    }
    .brand-text .name { font-weight: 700; font-size: 1.25rem; color: var(--brand); }
    .brand-text .ver { font-size: 0.75rem; color: var(--gray-500); }

    .modules-wrap { position: relative; }
    details.modules-wrap > summary {
      list-style: none;
    }
    details.modules-wrap > summary::-webkit-details-marker {
      display: none;
    }
    .modules-btn {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      color: var(--gray-700);
      background: transparent;
      border: none;
      border-radius: 0.5rem;
      cursor: pointer;
    }
    .modules-btn:hover { background: var(--gray-100); }
    .modules-btn svg { width: 1rem; height: 1rem; transition: transform 0.2s; }
    .modules-wrap[open] .modules-btn svg { transform: rotate(180deg); }
    .modules-panel {
      position: absolute;
      top: 100%;
      left: 0;
      margin-top: 0.5rem;
      width: 14rem;
      background: #fff;
      border-radius: 0.5rem;
      box-shadow: 0 10px 25px rgba(0,0,0,.1);
      border: 1px solid var(--gray-200);
      padding: 0.5rem 0;
      list-style: none;
      margin: 0;
      display: flex;
      flex-direction: column;
    }
    .modules-panel a {
      display: block;
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
      color: var(--gray-700);
    }
    .modules-panel a:hover {
      background: var(--brand);
      color: #fff;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .role-pill {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.375rem 0.75rem;
      border-radius: 0.5rem;
      border: 1px solid var(--brand);
      background: var(--brand-tint);
    }
    .role-pill span { font-size: 0.875rem; color: var(--brand); }
    .role-pill select {
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--brand);
      background: transparent;
      border: none;
      outline: none;
      cursor: pointer;
    }

    .search-wrap { position: relative; }
    .search-wrap svg {
      position: absolute;
      left: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      width: 1rem;
      height: 1rem;
      color: var(--gray-400);
    }
    .search-wrap input {
      padding: 0.5rem 1rem 0.5rem 2.5rem;
      width: 16rem;
      max-width: 100%;
      border: 1px solid var(--gray-300);
      border-radius: 0.5rem;
      font-size: 0.875rem;
    }
    .search-wrap input:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(30, 91, 168, 0.2);
    }

    .notif-wrap, .user-wrap { position: relative; }
    .icon-btn {
      position: relative;
      padding: 0.5rem;
      color: var(--gray-600);
      background: transparent;
      border: none;
      border-radius: 0.5rem;
      cursor: pointer;
    }
    .icon-btn:hover { background: var(--gray-100); }
    .icon-btn svg { width: 1.25rem; height: 1.25rem; }
    .badge {
      position: absolute;
      top: 0;
      right: 0;
      min-width: 1.25rem;
      height: 1.25rem;
      padding: 0 4px;
      font-size: 0.65rem;
      font-weight: 700;
      color: #fff;
      background: var(--accent);
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .notif-panel, .user-panel {
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 0.5rem;
      width: 20rem;
      max-width: 90vw;
      background: #fff;
      border-radius: 0.5rem;
      box-shadow: 0 10px 25px rgba(0,0,0,.1);
      border: 1px solid var(--gray-200);
      overflow: hidden;
    }
    .user-panel { width: 12rem; }
    .notif-head {
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--gray-200);
      background: var(--gray-50);
    }
    .notif-head h3 { margin: 0; font-size: 0.875rem; font-weight: 600; }
    .notif-head p { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--gray-500); }
    .notif-item {
      display: flex;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--gray-100);
    }
    .notif-item:hover { background: var(--gray-50); }
    .notif-icon {
      flex-shrink: 0;
      width: 2rem;
      height: 2rem;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .notif-icon svg { width: 1rem; height: 1rem; }
    .notif-item p { margin: 0; font-size: 0.875rem; font-weight: 500; }
    .notif-item .sub { font-size: 0.75rem; color: var(--gray-600); margin-top: 0.25rem; }
    .notif-item .time { font-size: 0.75rem; color: var(--gray-500); margin-top: 0.25rem; }
    .notif-footer {
      display: block;
      padding: 0.75rem;
      text-align: center;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--brand);
    }
    .notif-footer:hover { background: var(--gray-50); }

    .user-menu-btn {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.75rem;
      background: transparent;
      border: none;
      border-radius: 0.5rem;
      cursor: pointer;
      color: var(--gray-700);
    }
    .user-menu-btn:hover { background: var(--gray-100); }
    .avatar {
      width: 2rem;
      height: 2rem;
      border-radius: 9999px;
      background: var(--brand);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .avatar svg { width: 1rem; height: 1rem; }
    .user-panel button, .user-panel a {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
      padding: 0.5rem 1rem;
      border: none;
      background: none;
      text-align: left;
      font-size: 0.875rem;
      color: var(--gray-700);
      cursor: pointer;
    }
    .user-panel button:hover, .user-panel a:hover { background: var(--gray-50); }
    .user-panel .danger { color: #dc2626; }
    .user-panel hr { border: none; border-top: 1px solid var(--gray-200); margin: 0.25rem 0; }

    #fms-header {
      flex-shrink: 0;
    }
    main {
      flex: 1 0 auto;
      min-height: 0;
      width: 100%;
      padding-bottom: 2rem;
    }
    #fms-footer {
      flex-shrink: 0;
      margin-top: auto;
      width: 100%;
    }

    .section-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--gray-900);
      margin: 0 0 1rem;
    }
    .actions-header {
      background: #fff;
      border-bottom: 1px solid var(--gray-200);
      padding: 1.5rem;
    }
    .card-grid-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
    }
    @media (max-width: 1024px) { .card-grid-4 { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 520px) { .card-grid-4 { grid-template-columns: 1fr; } }

    .action-card {
      display: block;
      background: linear-gradient(to bottom right, #fff, var(--gray-50));
      border: 1px solid var(--gray-200);
      border-radius: 0.75rem;
      padding: 1.5rem;
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .action-card:hover {
      box-shadow: 0 10px 25px rgba(0,0,0,.08);
      transform: scale(1.02);
    }
    .action-card .icon-box {
      width: fit-content;
      padding: 0.75rem;
      border-radius: 0.5rem;
      color: #fff;
      margin-bottom: 0.75rem;
    }
    .action-card .icon-box svg { width: 1.5rem; height: 1.5rem; display: block; }
    .bg-purple { background: #a855f7; }
    .bg-blue { background: #3b82f6; }
    .bg-red { background: #ef4444; }
    .bg-green { background: #22c55e; }
    .bg-orange { background: #f97316; }
    .bg-amber { background: #f59e0b; }
    .action-card .num {
      font-size: 1.875rem;
      font-weight: 700;
      color: var(--gray-900);
      margin-bottom: 0.25rem;
    }
    .action-card .label { font-size: 0.875rem; color: var(--gray-600); }

    .content-pad { padding: 0 1.5rem; margin-top: 1.5rem; }

    .panel {
      background: #fff;
      border-radius: 0.75rem;
      border: 1px solid var(--gray-200);
      padding: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .panel h2, .panel h3 {
      margin: 0 0 1rem;
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--gray-900);
    }
    .panel-head-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .panel-head-row h3 { margin: 0; }
    .panel-head-row select {
      font-size: 0.875rem;
      border: 1px solid var(--gray-300);
      border-radius: 0.5rem;
      padding: 0.375rem 0.75rem;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 1rem;
    }
    @media (max-width: 1024px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 520px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
    .stat-cell {
      text-align: center;
      padding: 1rem;
      border-radius: 0.5rem;
    }
    .stat-cell .n { font-size: 1.875rem; font-weight: 700; }
    .stat-cell .l { font-size: 0.875rem; color: var(--gray-600); margin-top: 0.25rem; }
    .stat-blue { background: #eff6ff; } .stat-blue .n { color: #2563eb; }
    .stat-purple { background: #faf5ff; } .stat-purple .n { color: #9333ea; }
    .stat-green { background: #f0fdf4; } .stat-green .n { color: #16a34a; }
    .stat-amber { background: #fffbeb; } .stat-amber .n { color: #d97706; }
    .stat-red { background: #fef2f2; } .stat-red .n { color: #dc2626; }
    .stat-indigo { background: #eef2ff; } .stat-indigo .n { color: #4f46e5; }

    .grid-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
      margin-bottom: 1.5rem;
    }
    @media (max-width: 1024px) { .grid-2 { grid-template-columns: 1fr; } }

    .chart-wrap { width: 100%; height: 250px; }

    .bar-chart {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      height: 200px;
      padding: 0 0.5rem;
      border-left: 1px solid var(--gray-200);
      border-bottom: 1px solid var(--gray-200);
      gap: 4px;
    }
    .bar-group {
      flex: 1;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 3px;
      height: 100%;
    }
    .bar {
      width: 42%;
      max-width: 14px;
      border-radius: 3px 3px 0 0;
      background: #3b82f6;
    }
    .bar.rates { background: #10b981; }
    .bar-labels {
      display: flex;
      justify-content: space-between;
      padding: 0.5rem 0.5rem 0;
      font-size: 0.75rem;
      color: var(--gray-500);
    }

    .line-chart-svg { width: 100%; height: 200px; }
    .chart-legend {
      display: flex;
      gap: 1.25rem;
      justify-content: center;
      margin-top: 0.5rem;
      font-size: 0.75rem;
      color: var(--gray-600);
    }
    .chart-legend span { display: flex; align-items: center; gap: 0.35rem; }
    .dot { width: 8px; height: 8px; border-radius: 2px; }

    .donut-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      flex-wrap: wrap;
      min-height: 200px;
    }
    .donut-ring {
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: conic-gradient(
        #10b981 0 129.12deg,
        #f59e0b 129.12deg 228.59deg,
        #3b82f6 228.59deg 360deg
      );
      -webkit-mask: radial-gradient(farthest-side, transparent calc(50% - 22px), #000 calc(50% - 21px) calc(50% + 21px), transparent calc(50% + 22px));
      mask: radial-gradient(farthest-side, transparent calc(50% - 22px), #000 calc(50% - 21px) calc(50% + 21px), transparent calc(50% + 22px));
    }
    .donut-legend { font-size: 0.875rem; }
    .donut-legend div { display: flex; align-items: center; gap: 0.5rem; margin: 0.35rem 0; }
    .swatch { width: 12px; height: 12px; border-radius: 2px; }

    .outstanding-center {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 200px;
    }
    .outstanding-center .big {
      font-size: 3rem;
      font-weight: 700;
      color: #dc2626;
      margin-bottom: 0.5rem;
      text-align: center;
    }
    .outstanding-center .sub { color: var(--gray-600); text-align: center; }
    .aging {
      margin-top: 1rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      font-size: 0.875rem;
    }
    .aging-box { padding: 0.75rem; border-radius: 0.5rem; text-align: center; }
    .aging-box.amber { background: #fffbeb; }
    .aging-box.amber .amt { font-weight: 600; color: #d97706; }
    .aging-box.red { background: #fef2f2; }
    .aging-box.red .amt { font-weight: 600; color: #dc2626; }

    table.data {
      width: 100%;
      border-collapse: collapse;
    }
    table.data thead { background: var(--gray-50); border-bottom: 1px solid var(--gray-200); }
    table.data th {
      text-align: left;
      padding: 0.75rem 1rem;
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--gray-700);
    }
    table.data td {
      padding: 0.75rem 1rem;
      font-size: 0.875rem;
      border-bottom: 1px solid var(--gray-200);
    }
    table.data tbody tr:hover { background: var(--gray-50); cursor: pointer; }
    .link-file { font-weight: 500; color: #2563eb; }
    .text-muted { color: var(--gray-600); }

    /* —— Auth / login (aligned with dashboard: panels, brand, Inter) —— */
    .page-login {
      display: block;
      margin: 0;
      min-height: 100%;
      min-height: 100dvh;
      background: var(--gray-50);
    }
    .auth-shell {
      display: grid;
      min-height: 100vh;
      min-height: 100dvh;
      grid-template-columns: minmax(0, 1fr);
    }
    @media (min-width: 960px) {
      .auth-shell {
        grid-template-columns: minmax(280px, 42%) minmax(0, 1fr);
      }
    }
    .auth-aside {
      display: none;
      position: relative;
      flex-direction: column;
      justify-content: center;
      padding: 2.5rem 3rem;
      background: linear-gradient(155deg, #1e5ba8 0%, #0f3460 55%, #0a2544 100%);
      color: #fff;
      overflow: hidden;
    }
    @media (min-width: 960px) {
      .auth-aside { display: flex; }
    }
    .auth-aside-pattern {
      position: absolute;
      inset: 0;
      opacity: 0.12;
      background-image: radial-gradient(circle at 20% 20%, #fff 0, transparent 45%),
        radial-gradient(circle at 80% 60%, #f7941d 0, transparent 35%);
      pointer-events: none;
    }
    .auth-aside-inner {
      position: relative;
      z-index: 1;
      max-width: 22rem;
    }
    .auth-aside-brand {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.75rem;
      color: inherit;
    }
    .auth-aside-logo {
      opacity: 0.98;
      filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.25));
    }
    .auth-aside-text {
      display: flex;
      flex-direction: column;
      gap: 0.125rem;
      border-left: 1px solid rgba(255, 255, 255, 0.25);
      padding-left: 1rem;
    }
    .auth-aside-name {
      font-weight: 700;
      font-size: 1.35rem;
      letter-spacing: -0.02em;
    }
    .auth-aside-ver {
      font-size: 0.75rem;
      opacity: 0.85;
    }
    .auth-aside-tagline {
      margin: 0 0 1.5rem;
      font-size: 0.9375rem;
      line-height: 1.55;
      color: rgba(255, 255, 255, 0.88);
    }
    .auth-aside-points {
      margin: 0;
      padding-left: 1.15rem;
      font-size: 0.875rem;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.82);
    }
    .auth-aside-points li { margin-bottom: 0.5rem; }
    .auth-main {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1.5rem 1.25rem 2rem;
      background: linear-gradient(180deg, var(--gray-100) 0%, var(--gray-50) 40%, #fff 100%);
    }
    .auth-card {
      position: relative;
      width: 100%;
      max-width: 26rem;
      background: #fff;
      border: 1px solid var(--gray-200);
      border-radius: 0.75rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 10px 25px -5px rgba(0, 0, 0, 0.08);
      overflow: hidden;
    }
    .auth-card-accent {
      height: 4px;
      background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);
    }
    .auth-card-body {
      padding: 1.75rem 1.75rem 1.5rem;
    }
    @media (max-width: 480px) {
      .auth-card-body { padding: 1.35rem 1.25rem 1.25rem; }
    }
    .auth-card-head {
      margin-bottom: 1.5rem;
    }
    .auth-card-brand-mobile {
      display: inline-flex;
      margin-bottom: 1rem;
    }
    @media (min-width: 960px) {
      .auth-card-brand-mobile { display: none; }
    }
    .auth-card-title {
      margin: 0 0 0.35rem;
      font-size: 1.375rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--gray-900);
    }
    .auth-card-sub {
      margin: 0;
      font-size: 0.875rem;
      line-height: 1.5;
      color: var(--gray-600);
    }
    .auth-alert {
      display: flex;
      align-items: flex-start;
      gap: 0.65rem;
      padding: 0.75rem 1rem;
      margin-bottom: 1.25rem;
      font-size: 0.875rem;
      line-height: 1.45;
      color: #991b1b;
      background: #fef2f2;
      border: 1px solid #fecaca;
      border-radius: 0.5rem;
    }
    .auth-alert-icon { flex-shrink: 0; margin-top: 0.1rem; }
    .auth-form { margin: 0; }
    .auth-field { margin-bottom: 1.1rem; }
    .auth-label {
      display: block;
      margin-bottom: 0.35rem;
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--gray-700);
    }
    .auth-input {
      display: block;
      width: 100%;
      padding: 0.65rem 0.85rem;
      font-size: 0.9375rem;
      border: 1px solid var(--gray-300);
      border-radius: 0.5rem;
      background: #fff;
      color: var(--gray-900);
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .auth-input::placeholder { color: var(--gray-400); }
    .auth-input:hover { border-color: var(--gray-400); }
    .auth-input:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(30, 91, 168, 0.18);
    }
    .auth-row {
      margin-bottom: 1.35rem;
    }
    .auth-check {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.875rem;
      color: var(--gray-600);
      cursor: pointer;
      user-select: none;
    }
    .auth-check-input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }
    .auth-check-ui {
      width: 1.05rem;
      height: 1.05rem;
      border-radius: 0.25rem;
      border: 1px solid var(--gray-300);
      background: #fff;
      flex-shrink: 0;
      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    }
    .auth-check-input:focus-visible + .auth-check-ui {
      box-shadow: 0 0 0 3px rgba(30, 91, 168, 0.18);
    }
    .auth-check-input:checked + .auth-check-ui {
      background: var(--brand);
      border-color: var(--brand);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
      background-size: 0.7rem;
      background-position: center;
      background-repeat: no-repeat;
    }
    .auth-submit {
      width: 100%;
      margin-top: 0.25rem;
      padding: 0.7rem 1rem;
      font-size: 0.9375rem;
      font-weight: 600;
      color: #fff;
      background: var(--brand);
      border: none;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    }
    .auth-submit:hover {
      background: #1a4f92;
      box-shadow: 0 4px 12px rgba(30, 91, 168, 0.35);
    }
    .auth-submit:active { transform: scale(0.99); }
    .auth-hint {
      margin: 1.25rem 0 0;
      font-size: 0.75rem;
      line-height: 1.5;
    }
    .auth-hint strong { color: var(--gray-700); font-weight: 600; }
    .auth-footer {
      margin-top: 1.5rem;
      font-size: 0.75rem;
      text-align: center;
    }
    .auth-footer a {
      color: var(--brand);
      font-weight: 500;
      text-decoration: none;
    }
    .auth-footer a:hover { text-decoration: underline; }

    .st-red { font-weight: 500; color: #dc2626; }
    .st-green { font-weight: 500; color: #16a34a; }
    .st-amber { font-weight: 500; color: #d97706; }

    .risk-panel {
      background: linear-gradient(to bottom right, #fef2f2, #fff7ed);
      border: 2px solid #fecaca;
      border-radius: 0.75rem;
      padding: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .risk-panel .head {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 1rem;
    }
    .risk-panel .head h3 { margin: 0; color: #7f1d1d; font-size: 1.125rem; }
    .risk-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }
    @media (max-width: 768px) { .risk-grid { grid-template-columns: 1fr; } }
    .risk-card {
      background: #fff;
      border-radius: 0.5rem;
      padding: 1rem;
      border: 1px solid #fecaca;
    }
    .risk-card.orange-border { border-color: #fed7aa; }
    .risk-card .row { display: flex; gap: 0.75rem; align-items: flex-start; }
    .risk-card .row svg { flex-shrink: 0; margin-top: 0.15rem; }

    .quick-panel {
      background: linear-gradient(to bottom right, #eff6ff, #eef2ff);
      border: 1px solid #bfdbfe;
      border-radius: 0.75rem;
      padding: 1.5rem;
    }
    .quick-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
    }
    @media (max-width: 900px) { .quick-grid { grid-template-columns: repeat(2, 1fr); } }
    .quick-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      padding: 1rem;
      background: #fff;
      border: 1px solid var(--gray-200);
      border-radius: 0.5rem;
      text-align: center;
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .quick-card:hover {
      box-shadow: 0 10px 25px rgba(0,0,0,.08);
      transform: scale(1.03);
    }
    .quick-card .qc-icon {
      width: 3rem;
      height: 3rem;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
    .quick-card span { font-size: 0.875rem; font-weight: 500; color: var(--gray-900); }

    footer {
      background: #fff;
      border-top: 1px solid var(--gray-200);
      margin-top: 0;
    }
    .footer-inner {
      max-width: 80rem;
      margin: 0 auto;
      padding: 1rem 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.5rem;
      font-size: 0.875rem;
      color: var(--gray-600);
    }
    .footer-inner a {
      color: var(--brand);
      font-weight: 500;
      text-decoration: none;
    }
    .footer-inner a:hover { text-decoration: underline; }

    details.notif-dd summary, details.user-dd summary { list-style: none; }
    details.notif-dd summary::-webkit-details-marker, details.user-dd summary::-webkit-details-marker { display: none; }

    /* Modules menu — flat text list (Figma-style) */
    .modules-wrap.modules-rich .modules-panel {
      width: min(15.75rem, calc(100vw - 2rem));
      max-height: min(78vh, 560px);
      overflow-y: auto;
      padding: 0.45rem 0;
      margin-top: 0.5rem;
      background: #fff;
      border: 1px solid var(--gray-200);
      border-radius: 0.5rem;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04);
    }
    .modules-wrap.modules-rich .mod-link {
      display: block;
      padding: 0.65rem 1.15rem;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-700);
      text-decoration: none;
      border-left: none;
      line-height: 1.35;
    }
    .modules-wrap.modules-rich .mod-link span {
      display: block;
    }
    .modules-wrap.modules-rich .mod-link:hover {
      background: var(--gray-50);
      color: var(--gray-900);
    }
    .modules-wrap.modules-rich .mod-link.is-active {
      background: var(--gray-100);
      color: var(--gray-900);
      font-weight: 600;
    }

    /* Inner pages */
    .page-wrap { max-width: 80rem; margin: 0 auto; padding: 1.5rem; }
    .page-hero h1 { margin: 0 0 0.35rem; font-size: 1.5rem; font-weight: 700; color: var(--gray-900); }
    .page-hero p { margin: 0; color: var(--gray-600); font-size: 0.9375rem; }
    .breadcrumb { font-size: 0.8125rem; color: var(--gray-500); margin-bottom: 1rem; }
    .breadcrumb a { color: var(--brand); }
    .breadcrumb a:hover { text-decoration: underline; }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }
    @media (max-width: 900px) { .form-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
    .field label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-700);
      margin-bottom: 0.35rem;
    }
    .field .req { color: #dc2626; }
    .field input,
    .field select,
    .field textarea {
      width: 100%;
      border: 1px solid var(--gray-300);
      border-radius: 0.5rem;
      padding: 0.5rem 0.65rem;
      font-size: 0.875rem;
    }
    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(30, 91, 168, 0.15);
    }
    .field-hint { font-size: 0.75rem; color: var(--gray-500); margin-top: 0.25rem; }

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
    }
    .toolbar .cluster {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: center;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      font-size: 0.875rem;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: filter 0.15s, background 0.15s;
    }
    .btn-primary { background: var(--brand); color: #fff; }
    .btn-primary:hover { filter: brightness(1.06); }
    .btn-secondary { background: #fff; color: var(--gray-700); border: 1px solid var(--gray-300); }
    .btn-secondary:hover { background: var(--gray-50); }
    .btn-accent { background: var(--accent); color: #fff; }
    .btn-accent:hover { filter: brightness(1.05); }

    .tag {
      display: inline-block;
      padding: 0.15rem 0.5rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 500;
    }
    .tag-green { background: #dcfce7; color: #166534; }
    .tag-amber { background: #fef3c7; color: #92400e; }
    .tag-red { background: #fee2e2; color: #991b1b; }
    .tag-blue { background: #dbeafe; color: #1e40af; }
    .tag-gray { background: var(--gray-100); color: var(--gray-700); }

    .tabs {
      display: flex;
      gap: 0.25rem;
      border-bottom: 1px solid var(--gray-200);
      margin-bottom: 1rem;
      flex-wrap: wrap;
    }
    .tab {
      padding: 0.6rem 1rem;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-600);
      border: none;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      cursor: pointer;
      background: none;
    }
    .tab:hover { color: var(--gray-900); }
    .tab.is-active {
      color: var(--brand);
      border-bottom-color: var(--brand);
    }

    .split-panels {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }
    @media (max-width: 900px) { .split-panels { grid-template-columns: 1fr; } }

    .empty-hint {
      text-align: center;
      padding: 2rem 1rem;
      color: var(--gray-500);
      font-size: 0.875rem;
    }

    /* Open File page — matches Figma file-opening layout */
    .page-file-opening main.page-wrap {
      max-width: none;
      padding: 0;
      background: var(--gray-50);
    }
    .fo-inner {
      max-width: 72rem;
      margin: 0 auto;
      padding: 1.5rem;
    }
    .fo-hero {
      background: #fff;
      border-radius: 0.75rem;
      border: 1px solid var(--gray-200);
      padding: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .fo-hero h1 {
      margin: 0 0 0.5rem;
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--gray-900);
    }
    .fo-hero p {
      margin: 0;
      color: var(--gray-600);
    }
    .fo-section {
      background: #fff;
      border-radius: 0.75rem;
      border: 1px solid var(--gray-200);
      padding: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .fo-section h2 {
      margin: 0 0 1rem;
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--gray-900);
    }
    .fo-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }
    @media (max-width: 1024px) {
      .fo-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 560px) {
      .fo-grid {
        grid-template-columns: 1fr;
      }
    }
    .fo-grid-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }
    @media (max-width: 560px) {
      .fo-grid-2 {
        grid-template-columns: 1fr;
      }
    }
    .fo-grid .span-2 {
      grid-column: span 2;
    }
    @media (max-width: 560px) {
      .fo-grid .span-2 {
        grid-column: span 1;
      }
    }
    .fo-field label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-700);
      margin-bottom: 0.25rem;
    }
    .fo-field input,
    .fo-field select,
    .fo-field textarea {
      width: 100%;
      padding: 0.5rem 0.75rem;
      border: 1px solid var(--gray-300);
      border-radius: 0.5rem;
      font-size: 0.875rem;
    }
    .fo-field input:focus,
    .fo-field select:focus,
    .fo-field textarea:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(30, 91, 168, 0.15);
    }
    .fo-field input[readonly] {
      background: var(--gray-50);
      color: var(--gray-600);
    }
    .fo-field input.mono-lg {
      font-family: ui-monospace, monospace;
      font-size: 1.125rem;
    }
    .fo-hint {
      font-size: 0.75rem;
      color: var(--gray-500);
      margin-top: 0.25rem;
    }
    .fo-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      justify-content: flex-end;
      background: #fff;
      border-radius: 0.75rem;
      border: 1px solid var(--gray-200);
      padding: 1.5rem;
    }
    .fo-btn-brand {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      background: var(--brand);
      color: #fff;
      border: none;
      border-radius: 0.5rem;
      font-size: 0.875rem;
      font-weight: 600;
      cursor: pointer;
    }
    .fo-btn-brand:hover {
      filter: brightness(0.92);
    }
    .fo-container-card {
      background: var(--gray-50);
      border: 1px solid var(--gray-200);
      border-radius: 0.5rem;
      padding: 1rem;
      margin-bottom: 1rem;
    }
    .fo-container-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }
    .fo-container-head h3 {
      margin: 0;
      font-size: 1rem;
      font-weight: 600;
    }
    .fo-btn-remove {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.35rem 0.75rem;
      font-size: 0.8125rem;
      background: #dc2626;
      color: #fff;
      border: none;
      border-radius: 0.5rem;
      cursor: pointer;
    }
    .fo-btn-remove:hover {
      background: #b91c1c;
    }
    .fo-grid-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
    }
    @media (max-width: 1024px) {
      .fo-grid-4 {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 560px) {
      .fo-grid-4 {
        grid-template-columns: 1fr;
      }
    }
    .fo-dropzone {
      position: relative;
      border: 2px dashed var(--gray-300);
      border-radius: 0.5rem;
      padding: 1rem;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.15s;
    }
    .fo-dropzone:hover,
    .fo-dropzone.fo-drag {
      border-color: var(--brand);
    }
    .fo-dropzone input[type="file"] {
      position: absolute;
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      z-index: -1;
      pointer-events: none;
    }
    .fo-dropzone-inner {
      position: relative;
    }
    .fo-error-banner {
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #991b1b;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
      margin-bottom: 1rem;
      font-size: 0.875rem;
    }
    .fo-error-banner ul {
      margin: 0.35rem 0 0 1.25rem;
      padding: 0;
    }

    /* File Tracker (Figma /file-tracking) */
    .page-file-tracking .ft-modal-overlay {
      padding: 0.75rem clamp(0.5rem, 2.5vw, 1.5rem);
      align-items: flex-start;
    }
    @media (min-width: 900px) {
      .page-file-tracking .ft-modal-overlay {
        align-items: center;
      }
    }
    .page-file-tracking main.page-wrap {
      max-width: none;
      padding: 0;
      background: var(--gray-50);
    }
    .ft-inner {
      max-width: 80rem;
      margin: 0 auto;
      padding: 1.5rem;
    }
    .ft-filter-bar {
      background: #fff;
      border-radius: 0.75rem;
      border: 1px solid var(--gray-200);
      padding: 1rem;
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .ft-filter-bar select {
      padding: 0.5rem 1rem;
      border: 1px solid var(--gray-300);
      border-radius: 0.5rem;
      font-size: 0.875rem;
      min-width: 12rem;
    }
    .ft-filter-bar select:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(30, 91, 168, 0.15);
    }
    .ft-count {
      font-size: 0.875rem;
      color: var(--gray-600);
    }
    .ft-table-card {
      background: #fff;
      border-radius: 0.75rem;
      border: 1px solid var(--gray-200);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
      overflow: hidden;
    }
    table.ft-table {
      width: 100%;
      border-collapse: collapse;
    }
    table.ft-table thead {
      background: var(--gray-50);
      border-bottom: 1px solid var(--gray-200);
    }
    table.ft-table th {
      text-align: left;
      padding: 0.75rem 1rem;
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--gray-500);
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }
    table.ft-table td {
      padding: 1rem;
      font-size: 0.875rem;
      border-bottom: 1px solid var(--gray-200);
      vertical-align: top;
    }
    table.ft-table tbody tr:hover {
      background: var(--gray-50);
    }
    .ft-file-cell {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      white-space: nowrap;
    }
    .ft-file-cell svg {
      flex-shrink: 0;
      width: 0.9375rem;
      height: 0.9375rem;
      display: block;
      color: var(--brand);
    }
    .ft-file-num {
      font-weight: 600;
      color: var(--gray-900);
    }
    .ft-sub {
      font-size: 0.75rem;
      color: var(--gray-500);
    }
    .ft-pill {
      display: inline-block;
      padding: 0.25rem 0.5rem;
      font-size: 0.75rem;
      font-weight: 600;
      border-radius: 9999px;
    }
    .ft-pill-offloaded {
      background: #dcfce7;
      color: #166534;
    }
    .ft-pill-at-dest {
      background: #dbeafe;
      color: #1e40af;
    }
    .ft-pill-cross {
      background: #f3e8ff;
      color: #6b21a8;
    }
    .ft-pill-loading {
      background: #ffedd5;
      color: #9a3412;
    }
    .ft-pill-customs {
      background: #fef9c3;
      color: #854d0e;
    }
    .ft-pill-at-port {
      background: #e0e7ff;
      color: #3730a3;
    }
    .ft-pill-transit {
      background: #fef3c7;
      color: #92400e;
    }
    .ft-pill-default {
      background: var(--gray-100);
      color: var(--gray-800);
    }
    .ft-pill-pending-finance {
      background: #ede9fe;
      color: #5b21b6;
    }
    .ft-pill-approved {
      background: #d1fae7;
      color: #065f46;
    }
    .ft-storage-red {
      color: #dc2626;
      font-weight: 700;
    }
    .ft-storage-orange {
      color: #ea580c;
      font-weight: 600;
    }
    .ft-storage-yellow {
      color: #ca8a04;
      font-weight: 500;
    }
    .ft-storage-green {
      color: #16a34a;
      font-weight: 600;
    }
    .ft-storage-muted {
      color: var(--gray-500);
      font-weight: 500;
    }
    .ft-icon-btn {
      padding: 0.5rem;
      border: none;
      border-radius: 0.5rem;
      background: transparent;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
    }
    .ft-icon-btn:hover {
      background: #eff6ff;
    }
    .ft-icon-btn.ft-download:hover {
      background: #f0fdf4;
    }
    .ft-icon-btn svg {
      width: 1rem;
      height: 1rem;
    }
    .ft-icon-btn.ft-view {
      color: #2563eb;
    }
    .ft-icon-btn.ft-download {
      color: #16a34a;
    }
    .ft-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
      padding: 1rem;
      overflow-y: auto;
    }
    .ft-modal-overlay[hidden] {
      display: none;
    }
    .ft-modal {
      background: #fff;
      border-radius: 0.75rem;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
      max-width: 72rem;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
    }
    .ft-modal.ft-modal--tracking {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      max-height: min(92vh, 56rem);
      width: min(96vw, 88rem);
      max-width: min(96vw, 88rem);
    }
    .ft-modal.ft-modal--tracking .ft-modal-head {
      position: relative;
      flex-shrink: 0;
    }
    .ft-modal.ft-modal--tracking .ft-modal-body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 1.25rem clamp(1rem, 2vw, 1.75rem) 1.25rem;
      -webkit-overflow-scrolling: touch;
      width: 100%;
      box-sizing: border-box;
    }
    .ft-modal.ft-modal--tracking .ft-modal-footer {
      flex-shrink: 0;
      padding: 1rem clamp(1rem, 2vw, 1.75rem) 1.25rem;
      background: #fff;
      border-top: 1px solid var(--gray-200);
    }
    .ft-modal.ft-modal--tracking .ft-modal-actions {
      border-top: none;
      padding-top: 0;
      margin-top: 0;
    }
    .ft-modal-head {
      position: sticky;
      top: 0;
      background: #fff;
      border-bottom: 1px solid var(--gray-200);
      padding: 1rem clamp(1rem, 2vw, 1.75rem);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
    }
    .ft-modal.ft-modal--tracking .ft-modal-head {
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    }
    .ft-modal-title {
      margin: 0;
      font-size: 1.375rem;
      font-weight: 700;
      color: var(--gray-900);
      letter-spacing: -0.02em;
    }
    .ft-modal-sub {
      margin: 0.35rem 0 0;
      font-size: 0.875rem;
      color: var(--gray-500);
    }
    .ft-modal-close {
      border: none;
      background: none;
      font-size: 1.5rem;
      line-height: 1;
      color: var(--gray-400);
      cursor: pointer;
      padding: 0.25rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.375rem;
    }
    .ft-modal-close:hover {
      color: var(--gray-700);
      background: var(--gray-100);
    }
    .ft-stage {
      border: 1px solid var(--gray-200);
      border-radius: 0.5rem;
      padding: 1.25rem;
      margin-bottom: 0.9375rem;
      background: #fff;
    }
    .ft-modal.ft-modal--tracking .ft-stage {
      width: 100%;
      box-sizing: border-box;
      margin-bottom: 1rem;
      padding: clamp(1rem, 2vw, 1.35rem);
      border-radius: 0.625rem;
      border-color: var(--gray-200);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .ft-modal.ft-modal--tracking .ft-stage:last-of-type {
      margin-bottom: 0;
    }
    .ft-modal-body > .ft-update {
      margin-top: 0.125rem;
    }
    .ft-stage-head {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1.125rem;
    }
    .ft-stage-title {
      margin: 0;
      font-size: 1.0625rem;
      font-weight: 600;
      color: var(--brand);
    }
    .ft-stage-icon {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      flex-shrink: 0;
    }
    .ft-stage-icon--1 {
      background: #3b82f6;
    }
    .ft-stage-icon--2 {
      background: #6366f1;
    }
    .ft-stage-icon--3 {
      background: #eab308;
    }
    .ft-stage-icon--4 {
      background: #a855f7;
    }
    .ft-stage-icon--5 {
      background: #f97316;
    }
    .ft-stage-icon--6 {
      background: #14b8a6;
    }
    .ft-stage-icon--7 {
      background: #22c55e;
    }
    .ft-stage-icon svg {
      width: 1.25rem;
      height: 1.25rem;
    }
    /* File tracker — uploaded documents: 2 columns × N rows */
    .ft-modal.ft-modal--tracking .ft-stage--documents {
      background: linear-gradient(180deg, #fafbfc 0%, #fff 0.75rem);
    }
    .ft-doc-list {
      list-style: none;
      margin: 0;
      padding: 0;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.65rem 1rem;
      align-items: stretch;
    }
    @media (max-width: 480px) {
      .ft-doc-list {
        grid-template-columns: 1fr;
      }
    }
    .ft-doc-li {
      display: flex;
      align-items: stretch;
      gap: 0.35rem;
      margin: 0;
      min-width: 0;
    }
    .ft-doc-link-main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 0.2rem;
      padding: 0.75rem 0.85rem;
      min-height: 3.25rem;
      border: 1px solid var(--gray-200);
      border-radius: 0.5rem;
      background: #fff;
      color: var(--brand-600);
      text-decoration: none;
      transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    }
    .ft-doc-link-main:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    }
    .ft-doc-item-name {
      font-weight: 600;
      font-size: 0.875rem;
      text-decoration: underline;
      word-break: break-word;
    }
    .ft-doc-item-kind {
      font-size: 0.8125rem;
    }
    .ft-doc-external {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.25rem;
      border: 1px solid var(--gray-200);
      border-radius: 0.5rem;
      color: var(--gray-600);
      background: #fff;
      transition: background 0.15s, color 0.15s;
    }
    .ft-doc-external:hover {
      background: var(--gray-100);
      color: var(--brand);
    }
    .ft-stage-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
    }
    @media (max-width: 900px) {
      .ft-stage-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 520px) {
      .ft-stage-grid {
        grid-template-columns: 1fr;
      }
    }
    .ft-stage-grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }
    /* Full-width single column (Containers — avoids .ft-stage-grid breakpoint overrides) */
    .ft-stage-grid-full {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 0.75rem;
    }
    .ft-modal.ft-modal--tracking .ft-stage-grid-full .ft-field .ft-v {
      font-weight: 500;
      line-height: 1.5;
      white-space: normal;
      word-break: break-word;
    }
    .ft-stage-table-shell {
      width: 100%;
      min-width: 0;
    }
    .ft-container-table-wrap {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: 0.5rem;
      border: 1px solid var(--gray-200);
      background: #fff;
    }
    .ft-container-table {
      width: 100%;
      min-width: 44rem;
      border-collapse: collapse;
      font-size: 0.8125rem;
    }
    .ft-container-table thead {
      background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
      border-bottom: 2px solid var(--gray-200);
    }
    .ft-container-table th {
      text-align: left;
      font-weight: 600;
      color: var(--gray-700);
      padding: 0.65rem 0.75rem;
      white-space: nowrap;
    }
    .ft-container-table td,
    .ft-container-table tbody th {
      padding: 0.55rem 0.75rem;
      border-bottom: 1px solid var(--gray-100);
      color: var(--gray-900);
      vertical-align: top;
    }
    .ft-container-table tbody th {
      font-weight: 600;
      color: var(--gray-600);
      width: 2.25rem;
    }
    .ft-container-table tbody tr:last-child td,
    .ft-container-table tbody tr:last-child th {
      border-bottom: none;
    }
    .ft-container-table tbody tr:hover td,
    .ft-container-table tbody tr:hover th {
      background: #f8fafc;
    }
    .ft-table-empty {
      margin: 0;
      padding: 1rem 0.25rem;
      font-size: 0.875rem;
      color: var(--gray-500);
    }
    @media (max-width: 900px) {
      .ft-stage-grid-3 {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    .ft-field {
      min-width: 0;
    }
    .ft-k {
      font-size: 0.75rem;
      color: var(--gray-500);
      margin: 0 0 0.35rem;
      font-weight: 500;
    }
    .ft-v {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--gray-900);
      margin: 0;
      line-height: 1.35;
    }
    .ft-v-muted {
      color: var(--gray-500);
      font-weight: 500;
    }
    .ft-field-span-full {
      grid-column: 1 / -1;
    }
    .ft-update {
      background: #eff6ff;
      border: 1px solid #93c5fd;
      border-radius: 0.5rem;
      padding: 1rem 1.125rem;
      display: flex;
      gap: 0.75rem;
      align-items: flex-start;
    }
    .ft-update-icon {
      flex-shrink: 0;
      color: var(--brand);
      margin-top: 0.125rem;
    }
    .ft-update-title {
      margin: 0 0 0.35rem;
      font-size: 0.875rem;
      font-weight: 700;
      color: var(--brand);
    }
    .ft-update-msg {
      margin: 0;
      font-size: 0.8125rem;
      font-weight: 500;
      color: #1e40af;
      line-height: 1.45;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }
    .ft-modal-actions {
      display: flex;
      gap: 0.75rem;
      padding-top: 1rem;
      margin-top: 0.5rem;
      border-top: 1px solid var(--gray-200);
      flex-wrap: wrap;
      align-items: center;
    }
    .ft-modal.ft-modal--tracking .ft-modal-actions {
      justify-content: flex-end;
    }
    .ft-modal.ft-modal--tracking .ft-modal-actions .btn.btn-primary,
    .ft-modal.ft-modal--tracking .ft-modal-actions .btn.btn-secondary,
    .ft-modal.ft-modal--tracking .ft-modal-actions form .btn {
      padding: 0.75rem 1.5rem;
      border-radius: 0.5rem;
      box-sizing: border-box;
    }
    .ft-btn-primary-wide {
      flex: 1 1 auto;
      max-width: 22rem;
      min-width: 12rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.75rem 1.25rem;
      background: var(--brand);
      color: #fff;
      border: none;
      border-radius: 0.5rem;
      font-weight: 600;
      font-size: 0.875rem;
      cursor: pointer;
    }
    .ft-btn-primary-wide svg {
      width: 1.125rem;
      height: 1.125rem;
      flex-shrink: 0;
      stroke: currentColor;
    }
    .ft-btn-primary-wide:hover {
      filter: brightness(0.92);
    }
    .ft-btn-close {
      padding: 0.75rem 1.5rem;
      border: 1px solid var(--gray-300);
      background: #fff;
      border-radius: 0.5rem;
      font-weight: 500;
      cursor: pointer;
      color: var(--gray-700);
    }
    .ft-btn-close:hover {
      background: var(--gray-50);
    }
    .ft-td-nowrap {
      white-space: nowrap;
    }
    .ft-span2 {
      grid-column: span 2;
    }
    @media (max-width: 520px) {
      .ft-span2 {
        grid-column: span 1;
      }
    }

    /* Create Quotation (Figma /quotation) + Invoicing (Figma /invoicing) */
    .page-quotation main.page-wrap,
    .page-invoicing main.page-wrap {
      max-width: none;
      padding: 0;
      background: var(--gray-50);
    }
    .qt-inner {
      max-width: 80rem;
      margin: 0 auto;
      padding: 1.5rem;
    }
    .qt-doc-shell {
      background: #fff;
      border-radius: 0.75rem;
      border: 2px solid #1e5ba8;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
      margin-bottom: 1.5rem;
      overflow: hidden;
    }
    .qt-doc-header {
      background: linear-gradient(135deg, #1e5ba8 0%, #2b6ec4 100%);
      padding: 2rem;
    }
    .qt-doc-header-inner {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1.5rem;
      flex-wrap: wrap;
    }
    .qt-doc-brand {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .qt-logo-wrap {
      background: #fff;
      padding: 0.75rem;
      border-radius: 0.5rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
    .qt-logo {
      display: block;
      height: 4rem;
      width: auto;
      object-fit: contain;
    }
    .qt-doc-company {
      color: #fff;
    }
    .qt-doc-title {
      font-size: 1.875rem;
      font-weight: 700;
      margin: 0 0 0.25rem;
      line-height: 1.2;
    }
    .qt-doc-meta {
      font-size: 0.875rem;
      opacity: 0.92;
    }
    .qt-doc-meta p {
      margin: 0.125rem 0;
    }
    .qt-doc-refbox {
      background: #fff;
      padding: 1rem 1.5rem;
      border-radius: 0.5rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      text-align: right;
      min-width: 12rem;
    }
    .qt-doc-reflabel {
      font-size: 0.75rem;
      color: var(--gray-600);
      margin-bottom: 0.25rem;
    }
    .qt-doc-refnum {
      font-size: 1.5rem;
      font-weight: 700;
      color: #1e5ba8;
      margin-bottom: 0.5rem;
    }
    .qt-doc-refdate {
      font-size: 0.875rem;
      color: var(--gray-600);
    }
    .qt-section {
      background: #fff;
      border-radius: 0.75rem;
      border: 1px solid var(--gray-200);
      padding: 1.5rem;
      margin-bottom: 1.5rem;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .qt-section.qt-legal {
      border-width: 2px;
      border-color: #1e5ba8;
    }
    .qt-h2 {
      font-size: 1.125rem;
      font-weight: 600;
      color: #1e5ba8;
      margin: 0 0 1rem;
    }
    .qt-h2-inline {
      margin: 0;
    }
    .qt-h3 {
      font-size: 0.875rem;
      font-weight: 700;
      color: #1e5ba8;
      margin: 0 0 0.5rem;
    }
    .qt-grid-4 {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    @media (min-width: 768px) {
      .qt-grid-4 {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (min-width: 1024px) {
      .qt-grid-4 {
        grid-template-columns: repeat(4, 1fr);
      }
    }
    .qt-grid-2 {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    @media (min-width: 768px) {
      .qt-grid-2 {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    .qt-field.qt-span2 {
      grid-column: 1 / -1;
    }
    .qt-field label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-700);
      margin-bottom: 0.25rem;
    }
    .qt-field .req {
      color: #dc2626;
    }
    .qt-input,
    .qt-readonly {
      width: 100%;
      padding: 0.5rem 0.75rem;
      border: 1px solid var(--gray-300);
      border-radius: 0.5rem;
      font-size: 0.875rem;
      box-sizing: border-box;
    }
    .qt-input:focus {
      outline: none;
      border-color: #1e5ba8;
      box-shadow: 0 0 0 2px rgba(30, 91, 168, 0.15);
    }
    .qt-readonly {
      background: var(--gray-50);
      color: var(--gray-600);
    }
    textarea.qt-input {
      resize: vertical;
      min-height: 6rem;
    }
    .qt-cost-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      margin-bottom: 1rem;
    }
    .qt-add-line {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
      font-weight: 500;
      color: #fff;
      background: #f7941d;
      border: none;
      border-radius: 0.5rem;
      cursor: pointer;
    }
    .qt-add-line:hover {
      filter: brightness(0.95);
    }
    .qt-table-wrap {
      overflow-x: auto;
    }
    table.qt-cost-table {
      width: 100%;
      border-collapse: collapse;
    }
    table.qt-cost-table thead {
      border-bottom: 2px solid #1e5ba8;
    }
    table.qt-cost-table th {
      text-align: left;
      padding: 0.75rem 0.5rem;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--gray-700);
    }
    table.qt-cost-table td.qt-td {
      padding: 0.5rem;
      border-bottom: 1px solid var(--gray-200);
      vertical-align: middle;
    }
    .qt-in {
      width: 100%;
      max-width: 100%;
      padding: 0.375rem 0.5rem;
      font-size: 0.875rem;
      border: 1px solid var(--gray-300);
      border-radius: 0.375rem;
      box-sizing: border-box;
    }
    .qt-in:focus {
      outline: none;
      border-color: #1e5ba8;
      box-shadow: 0 0 0 2px rgba(30, 91, 168, 0.12);
    }
    select.qt-in.qt-curr {
      width: auto;
      min-width: 5rem;
    }
    input.qt-qty {
      max-width: 5rem;
    }
    input.qt-price {
      max-width: 8rem;
    }
    .qt-line-del {
      padding: 0.35rem;
      border: none;
      background: transparent;
      color: #dc2626;
      cursor: pointer;
      border-radius: 0.25rem;
    }
    .qt-line-del:hover {
      background: #fef2f2;
      color: #b91c1c;
    }
    .qt-totals-wrap {
      display: flex;
      justify-content: flex-end;
      margin-top: 1.5rem;
    }
    .qt-totals {
      width: 100%;
      max-width: 22rem;
    }
    .qt-total-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--gray-200);
    }
    .qt-total-label,
    .qt-total-val {
      font-size: 0.875rem;
    }
    .qt-total-val {
      font-weight: 600;
      color: var(--gray-900);
    }
    .qt-vat-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }
    .qt-vat-label {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.875rem;
      color: var(--gray-700);
      cursor: pointer;
      margin: 0;
    }
    .qt-vat-label input {
      width: 1rem;
      height: 1rem;
      accent-color: #1e5ba8;
    }
    .qt-total-grand {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0.5rem;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
      background: #e3f2fd;
    }
    .qt-grand-label {
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--gray-900);
    }
    .qt-grand-val {
      font-size: 1.5rem;
      font-weight: 700;
      color: #1e5ba8;
    }
    .qt-legal-inner {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      font-size: 0.875rem;
    }
    .qt-legal-p {
      margin: 0;
      color: var(--gray-700);
      line-height: 1.6;
    }
    .qt-legal-ul {
      margin: 0;
      padding-left: 1.25rem;
      color: var(--gray-700);
      line-height: 1.5;
    }
    .qt-legal-ul li {
      margin-bottom: 0.25rem;
    }
    .qt-signoff {
      padding-top: 1rem;
      border-top: 1px solid var(--gray-200);
    }
    .qt-sign-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      margin-top: 2rem;
    }
    @media (max-width: 640px) {
      .qt-sign-grid {
        grid-template-columns: 1fr;
      }
    }
    .qt-sign-label {
      font-weight: 600;
      margin: 0 0 0.5rem;
    }
    .qt-sign-line {
      border-bottom: 1px solid var(--gray-400);
      min-height: 4rem;
      margin-bottom: 0.5rem;
    }
    .qt-sign-hint {
      font-size: 0.75rem;
      color: var(--gray-600);
      margin: 0;
    }
    .qt-btn-print {
      background: #f7941d !important;
      border-color: #f7941d !important;
      color: #fff !important;
    }
    .qt-btn-print:hover {
      filter: brightness(0.95);
    }
    @media print {
      .page-quotation #fms-sidebar,
      .page-quotation #fms-header,
      .page-quotation #fms-footer,
      .page-quotation .qt-no-print,
      .page-invoicing #fms-sidebar,
      .page-invoicing #fms-header,
      .page-invoicing #fms-footer,
      .page-invoicing .qt-no-print {
        display: none !important;
      }
      .page-quotation main.page-wrap,
      .page-invoicing main.page-wrap {
        background: #fff;
        padding: 0;
      }
      .qt-inner {
        max-width: none;
        padding: 0;
      }
    }

    /* Invoicing — Payment Information (single card: 2 dropdowns + bank panel per design ref) */
    .inv-payment-section {
      padding: 1.375rem 1.5rem 1.5rem;
    }
    .inv-pay-heading {
      margin: 0 0 1.25rem;
      font-size: 1.125rem;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.02em;
    }
    .inv-payment-section .qt-field {
      margin: 0;
    }
    .inv-payment-section .qt-field label {
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--gray-500);
      margin-bottom: 0.35rem;
    }
    .inv-pay-dropdowns {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem 1.25rem;
      margin-bottom: 1.5rem;
    }
    @media (max-width: 520px) {
      .inv-pay-dropdowns {
        grid-template-columns: 1fr;
      }
    }
    .inv-bank-panel {
      border-radius: 0.625rem;
      border: 1px solid #c7dbf0;
      background: #f0f7ff;
      padding: 1.125rem 1.25rem 1.25rem;
    }
    .inv-bank-panel-title {
      margin: 0 0 1rem;
      font-size: 0.9375rem;
      font-weight: 700;
      color: #0c2744;
      letter-spacing: -0.01em;
    }
    .inv-bank-cols {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.25rem 2rem;
      align-items: start;
    }
    @media (max-width: 640px) {
      .inv-bank-cols {
        grid-template-columns: 1fr;
      }
    }
    .inv-bank-col {
      display: flex;
      flex-direction: column;
      gap: 1.125rem;
      text-align: left;
    }
    .inv-bank-item {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      align-items: flex-start;
    }
    .inv-bank-lbl {
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--gray-500);
      line-height: 1.3;
    }
    .inv-bank-txt {
      font-size: 0.875rem;
      font-weight: 700;
      color: #0c2744;
      line-height: 1.4;
      word-break: break-word;
    }
    .inv-bank-mono {
      font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;
      font-weight: 700;
      font-size: 0.8125rem;
      letter-spacing: 0.02em;
    }
    @media print {
      .inv-bank-panel {
        background: #f0f7ff !important;
        border-color: #c7dbf0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
    }
    .inv-footer-wrap {
      margin-top: 0.25rem;
      margin-bottom: 1.5rem;
    }
    .inv-footer-bar {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.5rem;
      padding: 0.875rem 1rem;
      background: #fff;
      border: 1px solid var(--gray-200);
      border-radius: 0.75rem;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .inv-footer-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 0.5rem;
    }
    .inv-footer-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.5rem 0.875rem;
      font-size: 0.875rem;
      font-weight: 600;
      border-radius: 0.5rem;
      cursor: pointer;
      border: 1px solid transparent;
      font-family: inherit;
      line-height: 1.25;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
        filter 0.15s ease, opacity 0.15s ease;
    }
    .inv-footer-btn--outline {
      background: #fff;
      border-color: #d1d5db;
      color: #1e3a5f;
    }
    .inv-footer-btn--outline:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }
    .inv-footer-btn--outline .inv-footer-btn__icon {
      color: #1e5ba8;
    }
    .inv-footer-btn--orange {
      background: #f97316;
      border-color: #f97316;
      color: #fff;
    }
    .inv-footer-btn--orange:hover {
      filter: brightness(1.05);
    }
    .inv-footer-btn--green {
      background: #16a34a;
      border-color: #16a34a;
      color: #fff;
    }
    .inv-footer-btn--green:hover:not(:disabled) {
      filter: brightness(1.05);
    }
    .inv-footer-btn--green:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .inv-footer-btn__icon {
      display: inline-flex;
      flex-shrink: 0;
      width: 1.125rem;
      height: 1.125rem;
    }
    .inv-footer-btn__icon svg {
      display: block;
      width: 100%;
      height: 100%;
    }
    .inv-footer-btn--orange .inv-footer-btn__icon,
    .inv-footer-btn--green .inv-footer-btn__icon {
      color: #fff;
    }
    .inv-vat-cell {
      white-space: nowrap;
      font-size: 0.8125rem;
    }
    .inv-vat-cell label {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      cursor: pointer;
      margin: 0;
      font-weight: 500;
      color: var(--gray-700);
    }
    .inv-vat-amt {
      display: block;
      margin-top: 0.25rem;
      color: var(--gray-600);
      font-variant-numeric: tabular-nums;
    }

    /* Quotation Tracker (Figma /quotation-management) */
    .page-quotation-management main.page-wrap,
    .page-invoice-management main.page-wrap,
    .page-expense-management main.page-wrap {
      max-width: none;
      padding: 0;
      background: var(--gray-50);
    }
    .qm-inner {
      max-width: 80rem;
      margin: 0 auto;
      padding: 1.5rem;
    }
    .qm-toolbar {
      background: #fff;
      border-radius: 0.75rem;
      border: 1px solid var(--gray-200);
      padding: 0.75rem 1rem 0;
      margin-bottom: 1.5rem;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .qm-toolbar .qm-tabs {
      margin-bottom: 0;
      border-bottom: none;
      flex: 1;
      min-width: 0;
    }
    .qm-toolbar .qm-tabs .tab {
      margin-bottom: 0;
      border-bottom: 2px solid transparent;
    }
    .qm-toolbar .qm-tabs .tab.is-active {
      border-bottom-color: var(--brand);
    }
    .qm-count {
      font-size: 0.875rem;
      color: var(--gray-600);
      padding-bottom: 0.6rem;
      white-space: nowrap;
    }
    .qm-ref {
      font-weight: 600;
      color: var(--brand);
    }
    .qm-email {
      font-size: 0.875rem;
      color: var(--gray-700);
      max-width: 14rem;
      word-break: break-word;
    }
    .qm-pill {
      display: inline-block;
      padding: 0.25rem 0.5rem;
      font-size: 0.75rem;
      font-weight: 600;
      border-radius: 9999px;
    }
    .qm-pill-pending {
      background: #fef3c7;
      color: #92400e;
    }
    .qm-pill-approved {
      background: #dbeafe;
      color: #1e40af;
    }
    .qm-pill-sent {
      background: #dcfce7;
      color: #166534;
    }
    .qm-pill-default {
        background: var(--gray-100);
        color: var(--gray-800);
    }
    .qm-status-cell {
        vertical-align: middle;
        min-width: 9rem;
    }
    .qm-status-cell .qm-pill {
        display: inline-block;
    }
    .qm-status-sub {
        margin-top: 0.375rem;
    }
    .qm-status-subline {
        display: block;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--gray-500);
        line-height: 1.35;
    }
    .qm-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem;
    }
    .qm-actions a.ft-icon-btn {
      text-decoration: none;
    }
    .qm-btn {
      padding: 0.35rem 0.65rem;
      font-size: 0.75rem;
      font-weight: 600;
      border-radius: 0.375rem;
      border: none;
      cursor: pointer;
      white-space: nowrap;
    }
    .qm-btn-approve {
      background: var(--brand);
      color: #fff;
    }
    .qm-btn-approve:hover {
      filter: brightness(0.92);
    }
    .qm-btn-send {
      background: #f7941d;
      color: #fff;
    }
    .qm-btn-send:hover {
      filter: brightness(0.95);
    }
    .qm-empty {
      text-align: center;
      padding: 2rem 1rem !important;
      color: var(--gray-500);
      font-size: 0.875rem;
    }
    table.qm-table thead {
      border-bottom: 2px solid var(--brand);
    }
    .im-lines-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.8125rem;
    }
    .im-lines-table th,
    .im-lines-table td {
      border: 1px solid var(--gray-200);
      padding: 0.5rem 0.65rem;
      text-align: left;
      vertical-align: top;
    }
    .im-lines-table thead th {
      background: var(--gray-50);
      font-weight: 600;
      color: var(--gray-700);
    }
    .im-lines-table .im-num {
      text-align: right;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    .im-pay-info-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      max-width: 40rem;
    }
    @media (max-width: 520px) {
      .im-pay-info-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Credit / Debit note doc pages — Figma /credit-note, /debit-note */
    .page-credit-note .cn-main,
    .page-debit-note .cn-main {
      background: var(--gray-50);
      max-width: none;
      padding-bottom: 2rem;
    }
    .page-credit-note .cn-inner,
    .page-debit-note .cn-inner {
      max-width: 72rem;
      margin: 0 auto;
      padding: 0 1.5rem 1.5rem;
    }
    .page-credit-note .cn-breadcrumb,
    .page-debit-note .cn-breadcrumb {
      max-width: 72rem;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
    .page-credit-note .cn-create-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem 1rem;
      max-width: 72rem;
      margin: 0 auto 1.5rem;
      padding: 0 1.5rem;
    }
    .page-credit-note .cn-create-head .cn-breadcrumb {
      margin: 0;
      padding: 0;
      max-width: none;
    }
    .page-credit-note .cn-create-head a.cn-btn {
      text-decoration: none;
    }
    .page-credit-note .cn-list-pagination {
      margin-top: 1.25rem;
    }
    .page-credit-note .cn-items-table td.cn-td-empty {
      text-align: center;
      color: var(--gray-600);
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
      font-size: 0.9375rem;
    }
    .page-credit-note .cn-items-table td.cn-mono-cell {
      font-family: ui-monospace, monospace;
      font-size: 0.8125rem;
    }
    .page-credit-note .cn-doc-shell,
    .page-debit-note .cn-doc-shell {
      background: #fff;
      border-radius: 0.75rem;
      border: 2px solid var(--brand);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
      margin-bottom: 1.5rem;
      overflow: hidden;
    }
    .page-credit-note .cn-doc-gradient,
    .page-debit-note .cn-doc-gradient {
      background: linear-gradient(135deg, #1e5ba8 0%, #2b6ec4 100%);
      padding: 2rem;
    }
    .page-credit-note .cn-doc-head-row,
    .page-debit-note .cn-doc-head-row {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1.5rem;
    }
    .page-credit-note .cn-doc-brand,
    .page-debit-note .cn-doc-brand {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex: 1;
      min-width: 0;
    }
    .page-credit-note .cn-doc-logo-wrap,
    .page-debit-note .cn-doc-logo-wrap {
      background: #fff;
      padding: 0.75rem;
      border-radius: 0.5rem;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
      flex-shrink: 0;
    }
    .page-credit-note .cn-doc-logo,
    .page-debit-note .cn-doc-logo {
      height: 4rem;
      width: auto;
      display: block;
    }
    .page-credit-note .cn-doc-company,
    .page-debit-note .cn-doc-company {
      color: #fff;
      min-width: 0;
    }
    .page-credit-note .cn-doc-title,
    .page-debit-note .cn-doc-title {
      margin: 0 0 0.35rem;
      font-size: 1.75rem;
      font-weight: 700;
      line-height: 1.2;
    }
    .page-credit-note .cn-doc-meta,
    .page-debit-note .cn-doc-meta {
      font-size: 0.8125rem;
      opacity: 0.92;
      line-height: 1.5;
    }
    .page-credit-note .cn-doc-meta p,
    .page-debit-note .cn-doc-meta p {
      margin: 0.15rem 0 0;
    }
    .page-credit-note .cn-doc-refbox,
    .page-debit-note .cn-doc-refbox {
      background: #fff;
      padding: 1rem 1.5rem;
      border-radius: 0.5rem;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
      text-align: right;
      flex-shrink: 0;
    }
    .page-credit-note .cn-doc-reflabel,
    .page-debit-note .cn-doc-reflabel {
      font-size: 0.75rem;
      color: var(--gray-600);
      margin-bottom: 0.25rem;
    }
    .page-credit-note .cn-doc-refnum,
    .page-debit-note .cn-doc-refnum {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 0.35rem;
    }
    .page-credit-note .cn-doc-refnum {
      color: var(--brand);
    }
    .page-debit-note .cn-doc-refnum {
      color: var(--accent);
    }
    .page-credit-note .cn-doc-refdate,
    .page-debit-note .cn-doc-refdate {
      font-size: 0.875rem;
      color: var(--gray-600);
    }
    .page-credit-note .cn-toast,
    .page-debit-note .cn-toast {
      margin-bottom: 1rem;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
      background: #dcfce7;
      color: #166534;
      font-size: 0.875rem;
      font-weight: 500;
      border: 1px solid #86efac;
    }
    .page-credit-note .cn-error-banner,
    .page-debit-note .cn-error-banner {
      margin-bottom: 1rem;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #991b1b;
      font-size: 0.875rem;
    }
    .page-credit-note .cn-error-banner p,
    .page-debit-note .cn-error-banner p {
      margin: 0.25rem 0 0;
    }
    .page-credit-note .cn-error-banner p:first-child,
    .page-debit-note .cn-error-banner p:first-child {
      margin-top: 0;
    }
    .page-credit-note .cn-form,
    .page-debit-note .cn-form {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    .page-credit-note .cn-card,
    .page-debit-note .cn-card {
      background: #fff;
      border-radius: 0.75rem;
      border: 1px solid var(--gray-200);
      padding: 1.5rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }
    .page-credit-note .cn-h2,
    .page-debit-note .cn-h2 {
      margin: 0 0 1rem;
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--brand);
    }
    .page-credit-note .cn-h2-inline,
    .page-debit-note .cn-h2-inline {
      margin: 0;
    }
    .page-credit-note .cn-info-grid,
    .page-debit-note .cn-info-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    @media (min-width: 768px) {
      .page-credit-note .cn-info-grid,
      .page-debit-note .cn-info-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (min-width: 1024px) {
      .page-credit-note .cn-info-grid,
      .page-debit-note .cn-info-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    .page-credit-note .cn-span-2,
    .page-debit-note .cn-span-2 {
      grid-column: span 1;
    }
    @media (min-width: 768px) {
      .page-credit-note .cn-span-2,
      .page-debit-note .cn-span-2 {
        grid-column: span 2;
      }
    }
    @media (min-width: 1024px) {
      .page-credit-note .cn-span-2,
      .page-debit-note .cn-span-2 {
        grid-column: span 2;
      }
    }
    .page-credit-note .cn-field label,
    .page-debit-note .cn-field label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-700);
      margin-bottom: 0.25rem;
    }
    .page-credit-note .cn-field .req,
    .page-debit-note .cn-field .req {
      color: #dc2626;
    }
    .page-credit-note .cn-label-block,
    .page-debit-note .cn-label-block {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-700);
      margin-bottom: 0.5rem;
    }
    .page-credit-note .cn-input,
    .page-debit-note .cn-input,
    .page-credit-note .cn-textarea,
    .page-debit-note .cn-textarea {
      width: 100%;
      padding: 0.5rem 0.75rem;
      border: 1px solid var(--gray-300);
      border-radius: 0.5rem;
      font-size: 0.875rem;
    }
    .page-credit-note .cn-input:focus,
    .page-debit-note .cn-input:focus,
    .page-credit-note .cn-textarea:focus,
    .page-debit-note .cn-textarea:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(30, 91, 168, 0.2);
    }
    .page-credit-note .cn-input-readonly,
    .page-debit-note .cn-input-readonly {
      background: var(--gray-50);
      color: var(--gray-600);
    }
    .page-credit-note .cn-input.mono,
    .page-debit-note .cn-input.mono {
      font-family: ui-monospace, monospace;
    }
    .page-credit-note .cn-items-head,
    .page-debit-note .cn-items-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1rem;
    }
    .page-credit-note .cn-btn-add,
    .page-debit-note .cn-btn-add {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
      font-weight: 600;
      color: #fff;
      background: var(--accent);
      border: none;
      border-radius: 0.5rem;
      cursor: pointer;
    }
    .page-credit-note .cn-btn-add:hover,
    .page-debit-note .cn-btn-add:hover {
      filter: brightness(1.05);
    }
    .page-credit-note .cn-table-wrap,
    .page-debit-note .cn-table-wrap {
      overflow-x: auto;
    }
    .page-credit-note .cn-items-table,
    .page-debit-note .cn-items-table {
      width: 100%;
      border-collapse: collapse;
    }
    .page-credit-note .cn-items-table thead tr,
    .page-debit-note .cn-items-table thead tr {
      border-bottom: 2px solid var(--brand);
    }
    .page-credit-note .cn-items-table th,
    .page-debit-note .cn-items-table th {
      text-align: left;
      padding: 0.65rem 0.5rem;
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--gray-700);
    }
    .page-credit-note .cn-items-table .cn-col-narrow,
    .page-debit-note .cn-items-table .cn-col-narrow {
      width: 5rem;
      text-align: center;
    }
    .page-credit-note .cn-items-table .cn-col-price,
    .page-debit-note .cn-items-table .cn-col-price {
      width: 7.5rem;
      text-align: right;
    }
    .page-credit-note .cn-items-table .cn-col-vat,
    .page-debit-note .cn-items-table .cn-col-vat {
      width: 5rem;
      text-align: center;
    }
    .page-credit-note .cn-items-table .cn-col-action,
    .page-debit-note .cn-items-table .cn-col-action {
      width: 2.5rem;
    }
    .page-credit-note .cn-items-table td,
    .page-debit-note .cn-items-table td {
      border-bottom: 1px solid var(--gray-100);
      vertical-align: middle;
      padding: 0.65rem 0.5rem;
    }
    .page-credit-note .cn-td-center,
    .page-debit-note .cn-td-center {
      text-align: center;
    }
    .page-credit-note .cn-td-right,
    .page-debit-note .cn-td-right {
      text-align: right;
    }
    .page-credit-note .cn-td-amt,
    .page-debit-note .cn-td-amt {
      text-align: right;
      font-weight: 500;
      font-size: 0.875rem;
      padding: 0.65rem 0.5rem;
    }
    .page-credit-note .cn-input-cell,
    .page-debit-note .cn-input-cell {
      padding: 0.35rem 0.5rem;
      font-size: 0.8125rem;
    }
    .page-credit-note .cn-line-vat,
    .page-debit-note .cn-line-vat {
      width: 1rem;
      height: 1rem;
      accent-color: var(--brand);
      cursor: pointer;
    }
    .page-credit-note .cn-line-remove,
    .page-debit-note .cn-line-remove {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.25rem;
      margin: 0 auto;
      border: none;
      background: transparent;
      color: #ef4444;
      border-radius: 0.25rem;
      cursor: pointer;
    }
    .page-credit-note .cn-line-remove:hover,
    .page-debit-note .cn-line-remove:hover {
      background: #fef2f2;
    }
    .page-credit-note .cn-totals,
    .page-debit-note .cn-totals {
      display: flex;
      justify-content: flex-end;
      margin-top: 1.5rem;
    }
    .page-credit-note .cn-totals-inner,
    .page-debit-note .cn-totals-inner {
      width: 100%;
      max-width: 20rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .page-credit-note .cn-total-row,
    .page-debit-note .cn-total-row {
      display: flex;
      justify-content: space-between;
      font-size: 0.875rem;
    }
    .page-credit-note .cn-total-label,
    .page-debit-note .cn-total-label {
      color: var(--gray-600);
    }
    .page-credit-note .cn-total-grand,
    .page-debit-note .cn-total-grand {
      border-top: 2px solid var(--brand);
      padding-top: 0.5rem;
      margin-top: 0.25rem;
      font-weight: 700;
      font-size: 1.125rem;
      color: var(--brand);
    }
    .page-debit-note .cn-total-grand {
      border-top-color: var(--accent);
      color: var(--accent);
    }
    .page-credit-note .cn-actions-card .cn-actions-row,
    .page-debit-note .cn-actions-card .cn-actions-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .page-credit-note .cn-required-note,
    .page-debit-note .cn-required-note {
      margin: 0;
      font-size: 0.875rem;
      color: var(--gray-600);
    }
    .page-credit-note .cn-actions-btns,
    .page-debit-note .cn-actions-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      align-items: center;
    }
    .page-credit-note .cn-btn,
    .page-debit-note .cn-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.625rem 1.25rem;
      font-size: 0.875rem;
      font-weight: 600;
      border-radius: 0.5rem;
      cursor: pointer;
      border: 1px solid transparent;
      transition: filter 0.15s, background 0.15s;
    }
    .page-credit-note .cn-btn-muted,
    .page-debit-note .cn-btn-muted {
      background: #fff;
      color: var(--gray-700);
      border-color: var(--gray-300);
    }
    .page-credit-note .cn-btn-muted:hover,
    .page-debit-note .cn-btn-muted:hover {
      background: var(--gray-50);
    }
    .page-credit-note .cn-btn-brand,
    .page-debit-note .cn-btn-brand {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
    }
    .page-credit-note .cn-btn-brand:hover,
    .page-debit-note .cn-btn-brand:hover {
      filter: brightness(1.06);
    }
    .page-credit-note .cn-btn-accent,
    .page-debit-note .cn-btn-accent {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }
    .page-credit-note .cn-btn-accent:hover,
    .page-debit-note .cn-btn-accent:hover {
      filter: brightness(1.05);
    }
    .page-debit-note .cn-payment-callout {
      background: #fff7ed;
      border: 1px solid #fed7aa;
      border-radius: 0.5rem;
      padding: 1rem;
    }
    .page-debit-note .cn-payment-list {
      margin: 0;
      padding: 0;
      list-style: none;
      font-size: 0.875rem;
      color: var(--gray-700);
      line-height: 1.45;
    }
    .page-debit-note .cn-payment-list li {
      display: flex;
      gap: 0.5rem;
      align-items: flex-start;
      margin-top: 0.5rem;
    }
    .page-debit-note .cn-payment-list li:first-child {
      margin-top: 0;
    }
    .page-debit-note .cn-payment-bullet {
      color: #f97316;
      font-weight: 700;
      flex-shrink: 0;
    }
    @media print {
      .page-credit-note #fms-sidebar,
      .page-debit-note #fms-sidebar,
      .page-credit-note #fms-header,
      .page-debit-note #fms-header,
      .page-credit-note #fms-footer,
      .page-debit-note #fms-footer,
      .page-credit-note .cn-breadcrumb,
      .page-debit-note .cn-breadcrumb,
      .page-credit-note .cn-create-head,
      .page-credit-note .cn-actions-card,
      .page-debit-note .cn-actions-card,
      .page-credit-note .cn-toast,
      .page-debit-note .cn-toast,
      .page-credit-note .cn-error-banner,
      .page-debit-note .cn-error-banner {
        display: none !important;
      }
      .page-credit-note .cn-main,
      .page-debit-note .cn-main {
        padding: 0;
        background: #fff;
      }
      .page-credit-note .cn-inner,
      .page-debit-note .cn-inner {
        max-width: none;
        padding: 0;
      }
      .page-credit-note .cn-card,
      .page-debit-note .cn-card {
        box-shadow: none;
        border: 1px solid var(--gray-300);
        break-inside: avoid;
      }
    }

    /* Clients page — matches Figma /clients */
    .page-clients .cl-main {
      background: var(--gray-50);
      max-width: none;
      padding-bottom: 2rem;
    }
    .page-clients .cl-inner {
      max-width: 72rem;
      margin: 0 auto;
      padding: 0 1.5rem 1.5rem;
    }
    .page-clients .cl-breadcrumb {
      max-width: 72rem;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
    .page-clients .cl-create-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem 1rem;
      max-width: 72rem;
      margin: 0 auto 1rem;
      padding: 0 1.5rem;
    }
    .page-clients .cl-create-head .cl-breadcrumb {
      margin: 0;
      padding: 0;
      max-width: none;
    }
    .page-clients .cl-create-head a.cl-btn {
      text-decoration: none;
    }
    .page-clients .cl-hero {
      background: #fff;
      border-radius: 0.75rem;
      border: 1px solid var(--gray-200);
      padding: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .page-clients .cl-hero h1 {
      margin: 0 0 0.5rem;
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--gray-900);
    }
    .page-clients .cl-hero p {
      margin: 0;
      font-size: 0.9375rem;
      color: var(--gray-600);
    }
    .page-clients .cl-toast {
      margin-bottom: 1rem;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
      background: #dcfce7;
      color: #166534;
      font-size: 0.875rem;
      font-weight: 500;
      border: 1px solid #86efac;
    }
    .page-clients .cl-error-banner {
      margin-bottom: 1rem;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #991b1b;
      font-size: 0.875rem;
    }
    .page-clients .cl-error-banner p {
      margin: 0.25rem 0 0;
    }
    .page-clients .cl-error-banner p:first-child {
      margin-top: 0;
    }
    .page-clients .cl-form {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    .page-clients .cl-card {
      background: #fff;
      border-radius: 0.75rem;
      border: 1px solid var(--gray-200);
      padding: 1.5rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }
    .page-clients .cl-h2 {
      margin: 0 0 1rem;
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--gray-900);
    }
    .page-clients .cl-grid {
      display: grid;
      gap: 1rem;
    }
    .page-clients .cl-grid-2 {
      grid-template-columns: 1fr;
    }
    @media (min-width: 768px) {
      .page-clients .cl-grid-2 {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    .page-clients .cl-grid-3 {
      grid-template-columns: 1fr;
    }
    @media (min-width: 768px) {
      .page-clients .cl-grid-3 {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (min-width: 1024px) {
      .page-clients .cl-grid-3 {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    .page-clients .cl-grid-4 {
      grid-template-columns: 1fr;
    }
    @media (min-width: 768px) {
      .page-clients .cl-grid-4 {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (min-width: 1024px) {
      .page-clients .cl-grid-4 {
        grid-template-columns: repeat(4, 1fr);
      }
    }
    .page-clients .cl-span-2 {
      grid-column: span 1;
    }
    @media (min-width: 768px) {
      .page-clients .cl-span-2 {
        grid-column: span 2;
      }
    }
    .page-clients .cl-field label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-700);
      margin-bottom: 0.25rem;
    }
    .page-clients .cl-field .req {
      color: #dc2626;
    }
    .page-clients .cl-label-note {
      font-weight: 400;
      font-size: 0.75rem;
      color: var(--gray-500);
    }
    .page-clients .cl-hint {
      margin: 0.25rem 0 0;
      font-size: 0.75rem;
      color: var(--gray-500);
    }
    .page-clients .cl-input,
    .page-clients .cl-textarea {
      width: 100%;
      padding: 0.5rem 0.75rem;
      border: 1px solid var(--gray-300);
      border-radius: 0.5rem;
      font-size: 0.875rem;
    }
    .page-clients .cl-textarea {
      resize: vertical;
      min-height: 2.75rem;
    }
    .page-clients .cl-input:focus,
    .page-clients .cl-textarea:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(30, 91, 168, 0.2);
    }
    .page-clients .cl-input-readonly {
      background: var(--gray-50);
      color: var(--gray-600);
    }
    .page-clients .cl-upload-block {
      margin-top: 1rem;
    }
    .page-clients .cl-upload-label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-700);
      margin-bottom: 0.5rem;
    }
    .page-clients .cl-file-input {
      position: absolute;
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      z-index: -1;
    }
    .page-clients .cl-dropzone {
      display: block;
      width: 100%;
      border: 2px dashed var(--gray-300);
      border-radius: 0.5rem;
      padding: 1rem;
      text-align: center;
      cursor: pointer;
      background: #fff;
      transition: border-color 0.15s, background 0.15s;
    }
    .page-clients .cl-dropzone:hover,
    .page-clients .cl-dropzone.is-drag {
      border-color: var(--brand);
      background: var(--brand-tint);
    }
    .page-clients .cl-drop-ico {
      color: var(--gray-400);
      margin: 0 auto 0.25rem;
      display: block;
    }
    .page-clients .cl-drop-title {
      margin: 0;
      font-size: 0.875rem;
      color: var(--gray-600);
    }
    .page-clients .cl-drop-sub {
      margin: 0.25rem 0 0;
      font-size: 0.75rem;
      color: var(--gray-500);
    }
    .page-clients .cl-checkbox-row {
      display: flex;
      align-items: center;
      min-height: 2.625rem;
    }
    .page-clients .cl-check {
      width: 1rem;
      height: 1rem;
      accent-color: var(--brand);
      cursor: pointer;
    }
    .page-clients .cl-check-label {
      margin-left: 0.5rem;
      font-size: 0.875rem;
      color: var(--gray-700);
    }
    .page-clients .cl-actions-card .cl-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      justify-content: flex-end;
    }
    .page-clients .cl-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.625rem 1.25rem;
      font-size: 0.875rem;
      font-weight: 600;
      border-radius: 0.5rem;
      cursor: pointer;
      border: 1px solid transparent;
      transition: filter 0.15s, background 0.15s;
    }
    .page-clients .cl-btn-outline {
      background: #fff;
      color: var(--gray-700);
      border-color: var(--gray-300);
    }
    .page-clients .cl-btn-outline:hover {
      background: var(--gray-50);
    }
    .page-clients .cl-btn-primary {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
    }
    .page-clients .cl-btn-primary:hover {
      filter: brightness(1.06);
    }
    .page-clients .cl-btn-muted {
      background: #fff;
      color: var(--gray-700);
      border-color: var(--gray-300);
    }
    .page-clients .cl-btn-muted:hover {
      background: var(--gray-50);
    }
    .page-clients .cl-btn-warn {
      background: #f7941d;
      color: #fff;
      border-color: #f7941d;
    }
    .page-clients .cl-btn-warn:hover {
      filter: brightness(0.95);
    }
    .page-clients .cl-btn-sm {
      padding: 0.5rem 1rem;
      font-size: 0.8125rem;
    }
    .page-clients a.cl-btn {
      text-decoration: none;
    }

    /* Suppliers page — matches Figma /suppliers */
    .page-suppliers .sp-main {
      background: var(--gray-50);
      max-width: none;
      padding-bottom: 2rem;
    }
    .page-suppliers .sp-inner {
      max-width: 72rem;
      margin: 0 auto;
      padding: 0 1.5rem 1.5rem;
    }
    .page-suppliers .sp-breadcrumb {
      max-width: 72rem;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
    .page-suppliers .ct-breadcrumb {
      max-width: 72rem;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
    .page-suppliers .ct-create-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem 1rem;
      max-width: 72rem;
      margin: 0 auto 1rem;
      padding: 0 1.5rem;
    }
    .page-suppliers .ct-create-head .ct-breadcrumb {
      margin: 0;
      padding: 0;
      max-width: none;
    }
    .page-suppliers .ct-create-head a.ct-btn {
      text-decoration: none;
    }
    .page-suppliers .ct-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.625rem 1.25rem;
      font-size: 0.875rem;
      font-weight: 600;
      border-radius: 0.5rem;
      cursor: pointer;
      border: 1px solid transparent;
      transition: filter 0.15s, background 0.15s;
    }
    .page-suppliers .ct-btn-sm {
      padding: 0.5rem 1rem;
      font-size: 0.8125rem;
    }
    .page-suppliers .ct-btn-muted {
      background: #fff;
      color: var(--gray-700);
      border-color: var(--gray-300);
    }
    .page-suppliers .ct-btn-muted:hover {
      background: var(--gray-50);
    }
    .page-suppliers .ct-btn-primary {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
    }
    .page-suppliers .ct-btn-primary:hover {
      filter: brightness(0.94);
    }
    .page-suppliers .ct-btn-warn {
      background: #f7941d;
      color: #fff;
      border-color: #f7941d;
    }
    .page-suppliers .ct-btn-warn:hover {
      filter: brightness(0.95);
    }
    .page-suppliers .ct-list-pagination {
      margin-top: 1.25rem;
    }
    .page-suppliers .ct-hero-bar {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      background: #fff;
      border-radius: 0.75rem;
      border: 1px solid var(--gray-200);
      padding: 1.5rem;
      margin-bottom: 1.5rem;
    }
    @media (min-width: 768px) {
      .page-suppliers .ct-hero-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
    }
    .page-suppliers .ct-hero-text h1 {
      margin: 0 0 0.5rem;
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--gray-900);
    }
    .page-suppliers .ct-hero-text p {
      margin: 0;
      font-size: 0.9375rem;
      color: var(--gray-600);
    }
    .page-suppliers .sp-toast {
      margin-bottom: 1rem;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
      background: #dcfce7;
      color: #166534;
      font-size: 0.875rem;
      font-weight: 500;
      border: 1px solid #86efac;
    }
    .page-suppliers .sp-error-banner {
      margin-bottom: 1rem;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #991b1b;
      font-size: 0.875rem;
    }
    .page-suppliers .sp-error-banner p {
      margin: 0.25rem 0 0;
    }
    .page-suppliers .sp-error-banner p:first-child {
      margin-top: 0;
    }
    .page-suppliers .sp-form {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    .page-suppliers .sp-card {
      background: #fff;
      border-radius: 0.75rem;
      border: 1px solid var(--gray-200);
      padding: 1.5rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }
    .page-suppliers .sp-h2 {
      margin: 0 0 1rem;
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--gray-900);
    }
    .page-suppliers .sp-h2-rule {
      padding-bottom: 0.5rem;
      border-bottom: 1px solid var(--gray-200);
    }
    .page-suppliers .sp-grid {
      display: grid;
      gap: 1rem;
    }
    .page-suppliers .sp-grid-4 {
      grid-template-columns: 1fr;
    }
    @media (min-width: 768px) {
      .page-suppliers .sp-grid-4 {
        grid-template-columns: repeat(4, 1fr);
      }
    }
    .page-suppliers .sp-span-2 {
      grid-column: span 1;
    }
    @media (min-width: 768px) {
      .page-suppliers .sp-span-2 {
        grid-column: span 2;
      }
    }
    .page-suppliers .sp-field label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-700);
      margin-bottom: 0.25rem;
    }
    .page-suppliers .sp-field .req {
      color: #dc2626;
    }
    .page-suppliers .sp-input {
      width: 100%;
      padding: 0.5rem 0.75rem;
      border: 1px solid var(--gray-300);
      border-radius: 0.5rem;
      font-size: 0.875rem;
    }
    .page-suppliers .sp-input:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(30, 91, 168, 0.2);
    }
    .page-suppliers .sp-input-readonly {
      background: var(--gray-50);
      color: var(--gray-600);
    }
    .page-suppliers .sp-file {
      padding: 0.35rem 0.5rem;
      font-size: 0.8125rem;
    }
    .page-suppliers .sp-fin-outer {
      display: grid;
      gap: 1rem;
      grid-template-columns: 1fr;
    }
    @media (min-width: 768px) {
      .page-suppliers .sp-fin-outer {
        grid-template-columns: 1fr 1fr;
      }
    }
    .page-suppliers .sp-fin-pair {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    @media (min-width: 480px) {
      .page-suppliers .sp-fin-pair {
        grid-template-columns: 1fr 1fr;
      }
    }
    .page-suppliers .sp-actions {
      display: flex;
      justify-content: flex-end;
    }
    .page-suppliers .sp-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.625rem 1.5rem;
      font-size: 0.875rem;
      font-weight: 600;
      border-radius: 0.5rem;
      cursor: pointer;
      border: 1px solid transparent;
      transition: filter 0.15s, background 0.15s;
    }
    .page-suppliers .sp-btn-primary {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
    }
    .page-suppliers .sp-btn-primary:hover {
      filter: brightness(0.94);
    }

    /* Shipping Lines page — matches Figma /shipping-lines */
    .page-shipping-lines .sl-main {
      background: var(--gray-50);
      max-width: none;
      padding-bottom: 2rem;
    }
    .page-shipping-lines .sl-inner {
      max-width: 72rem;
      margin: 0 auto;
      padding: 0 1.5rem 1.5rem;
    }
    .page-shipping-lines .sl-breadcrumb {
      max-width: 72rem;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
    .page-shipping-lines .sl-hero {
      background: #fff;
      border-radius: 0.75rem;
      border: 1px solid var(--gray-200);
      padding: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .page-shipping-lines .sl-hero h1 {
      margin: 0 0 0.5rem;
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--gray-900);
    }
    .page-shipping-lines .sl-hero p {
      margin: 0;
      font-size: 0.9375rem;
      color: var(--gray-600);
    }
    .page-shipping-lines .sl-toast {
      margin-bottom: 1rem;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
      background: #dcfce7;
      color: #166534;
      font-size: 0.875rem;
      font-weight: 500;
      border: 1px solid #86efac;
    }
    .page-shipping-lines .sl-error-banner {
      margin-bottom: 1rem;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #991b1b;
      font-size: 0.875rem;
    }
    .page-shipping-lines .sl-error-banner p {
      margin: 0.25rem 0 0;
    }
    .page-shipping-lines .sl-error-banner p:first-child {
      margin-top: 0;
    }
    .page-shipping-lines .sl-form {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    .page-shipping-lines .sl-card {
      background: #fff;
      border-radius: 0.75rem;
      border: 1px solid var(--gray-200);
      padding: 1.5rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }
    .page-shipping-lines .sl-sec-title {
      margin: 0 0 1rem;
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--gray-900);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .page-shipping-lines .sl-badge {
      width: 2rem;
      height: 2rem;
      border-radius: 0.5rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.875rem;
      flex-shrink: 0;
    }
    .page-shipping-lines .sl-badge-a {
      background: var(--brand);
      color: #fff;
    }
    .page-shipping-lines .sl-badge-b {
      background: #dbeafe;
      color: #1d4ed8;
    }
    .page-shipping-lines .sl-badge-c {
      background: #f3e8ff;
      color: #7c3aed;
    }
    .page-shipping-lines .sl-badge-d {
      background: #dcfce7;
      color: #15803d;
    }
    .page-shipping-lines .sl-grid {
      display: grid;
      gap: 1rem;
    }
    .page-shipping-lines .sl-grid-2 {
      grid-template-columns: 1fr;
    }
    @media (min-width: 768px) {
      .page-shipping-lines .sl-grid-2 {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    .page-shipping-lines .sl-grid-3 {
      grid-template-columns: 1fr;
    }
    @media (min-width: 768px) {
      .page-shipping-lines .sl-grid-3 {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (min-width: 1024px) {
      .page-shipping-lines .sl-grid-3 {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    .page-shipping-lines .sl-field label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-700);
      margin-bottom: 0.25rem;
    }
    .page-shipping-lines .sl-field .req {
      color: #dc2626;
    }
    .page-shipping-lines .sl-hint {
      margin: 0.25rem 0 0;
      font-size: 0.75rem;
      color: var(--gray-500);
    }
    .page-shipping-lines .sl-input {
      width: 100%;
      padding: 0.5rem 0.75rem;
      border: 1px solid var(--gray-300);
      border-radius: 0.5rem;
      font-size: 0.875rem;
    }
    .page-shipping-lines .sl-input:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(30, 91, 168, 0.2);
    }
    .page-shipping-lines .sl-input-readonly {
      background: var(--gray-50);
      color: var(--gray-600);
    }
    .page-shipping-lines .sl-mono-upper {
      font-family: ui-monospace, monospace;
      text-transform: uppercase;
    }
    .page-shipping-lines .sl-contract-top {
      display: grid;
      gap: 1rem;
      grid-template-columns: 1fr;
      margin-bottom: 1rem;
    }
    @media (min-width: 768px) {
      .page-shipping-lines .sl-contract-top {
        grid-template-columns: 1fr 1fr;
      }
    }
    .page-shipping-lines .sl-date-pair {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
    @media (max-width: 480px) {
      .page-shipping-lines .sl-date-pair {
        grid-template-columns: 1fr;
      }
    }
    .page-shipping-lines .sl-contract-bottom {
      margin-top: 1rem;
    }
    .page-shipping-lines .sl-contract-banner {
      margin-bottom: 1rem;
      padding: 1rem;
      border-radius: 0.5rem;
      border: 2px solid var(--gray-200);
    }
    .page-shipping-lines .sl-contract-banner--not-started {
      border-color: #93c5fd;
      background: #eff6ff;
      color: #1d4ed8;
    }
    .page-shipping-lines .sl-contract-banner--expired {
      border-color: #fecaca;
      background: #fef2f2;
      color: #b91c1c;
    }
    .page-shipping-lines .sl-contract-banner--expiring {
      border-color: #fcd34d;
      background: #fffbeb;
      color: #b45309;
    }
    .page-shipping-lines .sl-contract-banner--active {
      border-color: #86efac;
      background: #f0fdf4;
      color: #15803d;
    }
    .page-shipping-lines .sl-contract-banner-title {
      font-weight: 600;
      font-size: 0.875rem;
    }
    .page-shipping-lines .sl-contract-banner-msg {
      font-size: 0.875rem;
      margin-top: 0.25rem;
    }
    .page-shipping-lines .sl-upload-label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-700);
      margin-bottom: 0.5rem;
    }
    .page-shipping-lines .sl-file-input {
      position: absolute;
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      z-index: -1;
    }
    .page-shipping-lines .sl-dropzone {
      display: block;
      width: 100%;
      border: 2px dashed var(--gray-300);
      border-radius: 0.5rem;
      padding: 1.5rem;
      text-align: center;
      cursor: pointer;
      background: #fff;
      transition: border-color 0.15s, background 0.15s;
    }
    .page-shipping-lines .sl-dropzone:hover,
    .page-shipping-lines .sl-dropzone.is-drag {
      border-color: var(--brand);
      background: var(--brand-tint);
    }
    .page-shipping-lines .sl-drop-ico {
      color: var(--gray-400);
      margin: 0 auto 0.5rem;
      display: block;
    }
    .page-shipping-lines .sl-drop-title {
      margin: 0;
      font-size: 0.875rem;
      color: var(--gray-600);
    }
    .page-shipping-lines .sl-drop-sub {
      margin: 0.25rem 0 0;
      font-size: 0.75rem;
      color: var(--gray-500);
    }
    .page-shipping-lines .sl-status-label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-700);
      margin-bottom: 0.25rem;
    }
    .page-shipping-lines .sl-status-list {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      padding-top: 0.35rem;
    }
    .page-shipping-lines .sl-status-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      font-size: 0.875rem;
      color: var(--gray-700);
    }
    .page-shipping-lines .sl-status-row input {
      width: 1rem;
      height: 1rem;
      accent-color: var(--brand);
      cursor: pointer;
    }
    .page-shipping-lines .sl-status-dot {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 9999px;
      flex-shrink: 0;
    }
    .page-shipping-lines .sl-dot-green {
      background: #22c55e;
    }
    .page-shipping-lines .sl-dot-gray {
      background: #9ca3af;
    }
    .page-shipping-lines .sl-dot-red {
      background: #ef4444;
    }
    .page-shipping-lines .sl-actions-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .page-shipping-lines .sl-required-note {
      margin: 0;
      font-size: 0.875rem;
      color: var(--gray-600);
    }
    .page-shipping-lines .sl-actions-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
    }
    .page-shipping-lines .sl-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.625rem 1.25rem;
      font-size: 0.875rem;
      font-weight: 600;
      border-radius: 0.5rem;
      cursor: pointer;
      border: 1px solid transparent;
      transition: filter 0.15s, background 0.15s;
    }
    .page-shipping-lines .sl-btn-muted {
      background: #fff;
      color: var(--gray-700);
      border-color: var(--gray-300);
    }
    .page-shipping-lines .sl-btn-muted:hover {
      background: var(--gray-50);
    }
    .page-shipping-lines .sl-btn-primary {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
    }
    .page-shipping-lines .sl-btn-primary:hover {
      filter: brightness(0.94);
    }

    /* Shipping Lines — top bar matches /containers (breadcrumb + action) */
    .page-shipping-lines .ct-create-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem 1rem;
      max-width: 72rem;
      margin: 0 auto 1rem;
      padding: 0 1.5rem;
    }
    .page-shipping-lines .ct-create-head .ct-breadcrumb {
      margin: 0;
      padding: 0;
      max-width: none;
    }
    .page-shipping-lines .ct-create-head a.ct-btn {
      text-decoration: none;
    }
    .page-shipping-lines .ct-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.625rem 1.25rem;
      font-size: 0.875rem;
      font-weight: 600;
      border-radius: 0.5rem;
      cursor: pointer;
      border: 1px solid transparent;
      transition: filter 0.15s, background 0.15s;
    }
    .page-shipping-lines .ct-btn-muted {
      background: #fff;
      color: var(--gray-700);
      border-color: var(--gray-300);
    }
    .page-shipping-lines .ct-btn-muted:hover {
      background: var(--gray-50);
    }
    .page-shipping-lines .ct-btn-primary {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
    }
    .page-shipping-lines .ct-btn-primary:hover {
      filter: brightness(0.94);
    }
    .page-shipping-lines .ct-btn-sm {
      padding: 0.5rem 1rem;
      font-size: 0.8125rem;
    }
    .page-shipping-lines .ct-btn-warn {
      background: #f7941d;
      color: #fff;
      border-color: #f7941d;
    }
    .page-shipping-lines .ct-btn-warn:hover {
      filter: brightness(0.95);
    }
    .page-shipping-lines .ct-list-pagination {
      margin-top: 1.25rem;
    }

    /* Containers page — matches Figma /containers (gq + mq) */
    .page-containers .ct-field .req {
      color: #dc2626;
    }
    .page-containers .ct-main {
      background: var(--gray-50);
      max-width: none;
      padding-bottom: 2rem;
    }
    .page-containers .ct-breadcrumb {
      max-width: 72rem;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
    .page-containers .ct-create-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem 1rem;
      max-width: 72rem;
      margin: 0 auto 1rem;
      padding: 0 1.5rem;
    }
    .page-containers .ct-create-head .ct-breadcrumb {
      margin: 0;
      padding: 0;
      max-width: none;
    }
    .page-containers .ct-create-head a.ct-btn {
      text-decoration: none;
    }
    .page-containers .ct-list-pagination {
      margin-top: 1.25rem;
    }
    .page-containers .ct-inner {
      max-width: 72rem;
      margin: 0 auto;
      padding: 0 1.5rem 2rem;
    }
    .page-containers .ct-inner > .ct-card + .ct-card {
      margin-top: 1.5rem;
    }
    .page-containers .ct-hero-bar {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      background: #fff;
      border-radius: 0.75rem;
      border: 1px solid var(--gray-200);
      padding: 1.5rem;
      margin-bottom: 1.5rem;
    }
    @media (min-width: 768px) {
      .page-containers .ct-hero-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
    }
    .page-containers .ct-hero-text h1 {
      margin: 0 0 0.5rem;
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--gray-900);
      max-width: 550px;
    }
    .page-containers .ct-hero-text p {
      margin: 0;
      font-size: 0.9375rem;
      color: var(--gray-600);
    }
    .page-containers .ct-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem;
      padding: 0.25rem;
      background: var(--gray-100);
      border-radius: 0.5rem;
    }
    .page-containers .ct-tab {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-500);
      background: transparent;
      border: none;
      border-radius: 0.375rem;
      cursor: pointer;
      transition: color 0.15s, background 0.15s, box-shadow 0.15s;
    }
    .page-containers .ct-tab:hover {
      color: var(--gray-700);
    }
    .page-containers .ct-tab--active {
      background: #fff;
      color: var(--brand);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    }
    .page-containers .ct-tab-ico {
      flex-shrink: 0;
      opacity: 0.85;
    }
    .page-containers .ct-toast {
      margin-bottom: 1rem;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
      background: #dcfce7;
      color: #166534;
      font-size: 0.875rem;
      font-weight: 500;
      border: 1px solid #86efac;
    }
    .page-containers .ct-toast.ct-toast--warn {
      background: #fef3c7;
      color: #92400e;
      border-color: #fcd34d;
    }
    .page-containers .ct-error-banner {
      margin-bottom: 1rem;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #991b1b;
      font-size: 0.875rem;
    }
    .page-containers .ct-error-banner p {
      margin: 0.25rem 0 0;
    }
    .page-containers .ct-error-banner p:first-child {
      margin-top: 0;
    }
    .page-containers .ct-form {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    .page-containers .ct-card {
      background: #fff;
      border-radius: 0.75rem;
      border: 1px solid var(--gray-200);
      padding: 1.75rem 1.875rem 2rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }
    .page-containers .ct-card--flat {
      box-shadow: none;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    @media (min-width: 768px) {
      .page-containers .ct-card--flat {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
    }
    .page-containers .ct-card-title {
      margin: 0 0 1.25rem;
      padding: 0 0 1rem;
      border-bottom: 1px solid var(--gray-200);
      font-size: 1.0625rem;
      font-weight: 600;
      color: var(--gray-900);
    }
    .page-containers .ct-grid {
      display: grid;
      gap: 1rem;
    }
    .page-containers .ct-grid-2 {
      grid-template-columns: 1fr;
    }
    @media (min-width: 768px) {
      .page-containers .ct-grid-2 {
        grid-template-columns: 1fr 1fr;
      }
    }
    .page-containers .ct-grid-3 {
      grid-template-columns: 1fr;
    }
    @media (min-width: 1024px) {
      .page-containers .ct-grid-3 {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    .page-containers .ct-grid-4 {
      grid-template-columns: 1fr;
    }
    @media (min-width: 768px) {
      .page-containers .ct-grid-4 {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (min-width: 1024px) {
      .page-containers .ct-grid-4 {
        grid-template-columns: repeat(4, 1fr);
      }
    }
    .page-containers .ct-field-span-2 {
      grid-column: span 1;
    }
    @media (min-width: 1024px) {
      .page-containers .ct-field-span-2 {
        grid-column: span 2;
      }
    }
    .page-containers .ct-field-span-4 {
      grid-column: span 1;
    }
    @media (min-width: 1024px) {
      .page-containers .ct-field-span-4 {
        grid-column: span 4;
      }
    }
    .page-containers .ct-field label,
    .page-containers .ct-label {
      display: block;
      margin-bottom: 0.25rem;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-700);
    }
    .page-containers .ct-input {
      width: 100%;
      padding: 0.5rem 0.75rem;
      font-size: 0.875rem;
      border: 1px solid var(--gray-300);
      border-radius: 0.5rem;
      font-family: inherit;
    }
    .page-containers .ct-input:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(30, 91, 168, 0.2);
    }
    .page-containers .ct-input-readonly {
      background: var(--gray-50);
      color: var(--gray-600);
    }
    .page-containers .ct-mono-upper {
      font-family: ui-monospace, monospace;
      text-transform: uppercase;
    }
    .page-containers .ct-textarea {
      resize: vertical;
      min-height: 4.5rem;
    }
    .page-containers .ct-file-input {
      position: absolute;
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      z-index: -1;
    }
    .page-containers .ct-dropzone {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 1rem;
      border: 2px dashed var(--gray-300);
      border-radius: 0.5rem;
      background: transparent;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
      font: inherit;
      text-align: center;
    }
    .page-containers .ct-dropzone:hover {
      border-color: var(--brand);
      background: #eff6ff;
    }
    .page-containers .ct-dropzone--lg {
      padding: 2rem;
      border-radius: 0.75rem;
    }
    .page-containers .ct-drop-ico {
      color: var(--gray-400);
      margin-bottom: 0.25rem;
    }
    .page-containers .ct-drop-title {
      margin: 0;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-600);
    }
    .page-containers .ct-drop-hint {
      margin: 0.25rem 0 0;
      font-size: 0.75rem;
      color: var(--gray-500);
    }
    .page-containers .ct-stack {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .page-containers .ct-free-banner {
      margin-top: 1rem;
      padding: 1rem;
      border-radius: 0.5rem;
      border-width: 2px;
      border-style: solid;
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
    }
    .page-containers .ct-free-banner--danger {
      border-color: #fecaca;
      background: #fef2f2;
      color: #b91c1c;
    }
    .page-containers .ct-free-banner--warning {
      border-color: #fcd34d;
      background: #fffbeb;
      color: #b45309;
    }
    .page-containers .ct-free-banner--safe {
      border-color: #86efac;
      background: #f0fdf4;
      color: #15803d;
    }
    .page-containers .ct-free-banner__title {
      font-weight: 700;
    }
    .page-containers .ct-free-banner__sub {
      margin-top: 0.25rem;
      font-size: 0.875rem;
    }
    .page-containers .ct-actions-card {
      padding: 1.5rem;
    }
    .page-containers .ct-actions-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .page-containers .ct-required-note {
      margin: 0;
      font-size: 0.875rem;
      color: var(--gray-600);
    }
    .page-containers .ct-actions-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      justify-content: flex-end;
    }
    .page-containers .ct-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.625rem 1.25rem;
      font-size: 0.875rem;
      font-weight: 600;
      border-radius: 0.5rem;
      cursor: pointer;
      border: 1px solid transparent;
      transition: filter 0.15s, background 0.15s;
    }
    .page-containers .ct-btn-sm {
      padding: 0.5rem 1rem;
      font-size: 0.8125rem;
    }
    .page-containers .ct-btn-muted {
      background: #fff;
      color: var(--gray-700);
      border-color: var(--gray-300);
    }
    .page-containers .ct-btn-muted:hover {
      background: var(--gray-50);
    }
    .page-containers .ct-btn-warn {
      background: #f7941d;
      color: #fff;
      border-color: #f7941d;
    }
    .page-containers .ct-btn-warn:hover {
      filter: brightness(0.95);
    }
    .page-containers .ct-btn-primary {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
    }
    .page-containers .ct-btn-primary:hover {
      filter: brightness(0.94);
    }
    .page-containers .ct-dn-title {
      margin: 0 0 0.25rem;
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--gray-900);
    }
    .page-containers .ct-dn-sub {
      margin: 0;
      font-size: 0.875rem;
      color: var(--gray-600);
    }
    .page-containers .ct-dn-header-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .page-containers .ct-card-head {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 1rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--gray-200);
    }
    .page-containers .ct-head-ico {
      flex-shrink: 0;
    }
    .page-containers .ct-head-ico--brand {
      color: var(--brand);
    }
    .page-containers .ct-head-ico--warn {
      color: #f7941d;
    }
    .page-containers .ct-sec-heading {
      margin: 0;
      font-size: 1rem;
      font-weight: 600;
      color: var(--gray-900);
    }
    .page-containers .ct-sec-heading--plain {
      margin: 0 0 1rem;
      padding-bottom: 0.75rem;
      border-bottom: 1px solid var(--gray-200);
    }
    .page-containers .ct-card--pod {
      border-left: 4px solid #22c55e;
    }
    .page-containers .ct-pod-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }
    .page-containers .ct-pod-title {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .page-containers .ct-pod-ico {
      color: #16a34a;
    }
    .page-containers .ct-pod-badge {
      font-size: 0.6875rem;
      font-weight: 700;
      color: #15803d;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
    }
    .page-containers .ct-pod-grid {
      align-items: start;
    }
    .page-containers .ct-check-label {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      padding: 0.75rem;
      border: 1px solid var(--gray-200);
      border-radius: 0.5rem;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-700);
    }
    .page-containers .ct-check-label:hover {
      background: var(--gray-50);
    }
    .page-containers .ct-check {
      width: 1.25rem;
      height: 1.25rem;
      accent-color: var(--brand);
    }
    .page-containers .ct-success-banner {
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
      background: #dcfce7;
      border: 1px solid #4ade80;
      color: #166534;
      font-size: 0.875rem;
    }
    .page-containers .ct-success-banner strong {
      display: inline;
      margin-right: 0.35rem;
    }
    .page-containers .ct-history-card {
      text-align: center;
      padding: 3rem 1.5rem;
    }
    .page-containers .ct-history-hero-ico {
      color: var(--gray-300);
      margin: 0 auto 1rem;
      display: block;
    }
    .page-containers .ct-history-title {
      margin: 0 0 0.5rem;
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--gray-900);
    }
    .page-containers .ct-history-sub {
      margin: 0 auto 2rem;
      max-width: 28rem;
      color: var(--gray-500);
      font-size: 0.9375rem;
    }
    .page-containers .ct-timeline {
      max-width: 32rem;
      margin: 0 auto;
      text-align: left;
      border-left: 2px solid #dbeafe;
      padding-left: 2rem;
      position: relative;
    }
    .page-containers .ct-timeline-item {
      position: relative;
      padding-bottom: 1.5rem;
    }
    .page-containers .ct-timeline-item:last-child {
      padding-bottom: 0;
    }
    .page-containers .ct-timeline-dot {
      position: absolute;
      left: -2.3125rem;
      top: 0.25rem;
      width: 1rem;
      height: 1rem;
      border-radius: 9999px;
      background: var(--brand);
      border: 2px solid #fff;
      box-shadow: 0 0 0 1px #dbeafe;
    }
    .page-containers .ct-timeline-status {
      font-weight: 700;
      color: var(--gray-900);
    }
    .page-containers .ct-timeline-meta {
      font-size: 0.75rem;
      color: var(--gray-500);
      margin-top: 0.125rem;
    }

    /* Reports & Analytics — Figma /reports layout */
    .page-reports .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .page-reports .rp-main {
      background: var(--gray-50);
      max-width: none;
      padding-bottom: 2rem;
    }
    .page-reports .rp-inner {
      max-width: 72rem;
      margin: 0 auto;
      padding: 0 1.5rem 1.5rem;
    }
    .page-reports .rp-breadcrumb {
      padding-top: 1.5rem;
      margin-bottom: 1rem;
    }
    .page-reports .rp-hero {
      background: #fff;
      border-radius: 0.625rem;
      border: 1px solid var(--gray-200);
      padding: 1.5rem 1.75rem;
      margin-bottom: 1.25rem;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .page-reports .rp-hero h1 {
      margin: 0 0 0.35rem;
      font-size: 1.5rem;
      font-weight: 700;
      color: #0a1f44;
      letter-spacing: -0.02em;
    }
    .page-reports .rp-hero p {
      margin: 0;
      font-size: 0.9375rem;
      color: var(--gray-500);
      line-height: 1.5;
    }
    .page-reports .rp-toast {
      margin-bottom: 1rem;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
      background: #dcfce7;
      color: #166534;
      font-size: 0.875rem;
      font-weight: 500;
      border: 1px solid #86efac;
    }
    .page-reports .rp-toast--err {
      background: #fef2f2;
      color: #991b1b;
      border-color: #fecaca;
    }
    .page-reports .rp-layout {
      display: grid;
      gap: 1.5rem;
      grid-template-columns: 1fr;
      align-items: start;
    }
    @media (min-width: 1024px) {
      .page-reports .rp-layout {
        grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 22rem);
      }
    }
    .page-reports .rp-layout-aside {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }
    .page-reports .rp-card {
      background: #fff;
      border-radius: 0.625rem;
      border: 1px solid var(--gray-200);
      padding: 1.5rem 1.5rem;
      margin-bottom: 0;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .page-reports .rp-criteria {
      margin-bottom: 0;
    }
    .page-reports .rp-h2 {
      margin: 0 0 1.25rem;
      font-size: 1.0625rem;
      font-weight: 600;
      color: #0a1f44;
      padding-bottom: 0.875rem;
      border-bottom: 1px solid var(--gray-200);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .page-reports .rp-h2-icon {
      display: flex;
      color: var(--brand);
      flex-shrink: 0;
    }
    .page-reports .rp-h3 {
      margin: 0 0 1rem;
      font-size: 1rem;
      font-weight: 600;
      color: #0a1f44;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .page-reports .rp-h3-icon {
      display: flex;
      color: var(--brand);
      flex-shrink: 0;
    }
    .page-reports .rp-recent-card .rp-h3 {
      margin-bottom: 0.5rem;
      padding-bottom: 0.75rem;
      border-bottom: 1px solid var(--gray-100);
    }
    .page-reports .rp-form-grid {
      display: grid;
      gap: 1.125rem 1.25rem;
      grid-template-columns: 1fr;
    }
    @media (min-width: 640px) {
      .page-reports .rp-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    .page-reports .rp-span-2 {
      grid-column: 1 / -1;
    }
    .page-reports .rp-field label,
    .page-reports .rp-label-block {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-700);
      margin-bottom: 0.35rem;
    }
    .page-reports .rp-field .req {
      color: #dc2626;
    }
    .page-reports .rp-field input,
    .page-reports .rp-field select {
      width: 100%;
      padding: 0.5rem 0.75rem;
      border: 1px solid var(--gray-300);
      border-radius: 0.5rem;
      font-size: 0.875rem;
      background: #fff;
    }
    .page-reports .rp-field input:focus,
    .page-reports .rp-field select:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(30, 91, 168, 0.15);
    }
    .page-reports .rp-date-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
    .page-reports .rp-date-input-wrap {
      position: relative;
    }
    .page-reports .rp-date-input-wrap input[type="date"] {
      width: 100%;
      padding: 0.5rem 2.35rem 0.5rem 0.75rem;
      min-height: 2.375rem;
    }
    .page-reports .rp-date-input-wrap input[type="date"]::-webkit-calendar-picker-indicator {
      opacity: 0;
      position: absolute;
      right: 0;
      width: 2.5rem;
      height: 100%;
      cursor: pointer;
    }
    .page-reports .rp-date-cal {
      position: absolute;
      right: 0.65rem;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      color: var(--gray-500);
      display: flex;
    }
    .page-reports .rp-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-top: 0.25rem;
      padding-top: 1.25rem;
      border-top: 1px solid var(--gray-200);
    }
    .page-reports .rp-actions-right {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.75rem;
    }
    .page-reports .rp-reset-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      background: none;
      border: none;
      color: var(--gray-600);
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      padding: 0.35rem 0;
      font-family: inherit;
    }
    .page-reports .rp-reset-btn:hover {
      color: var(--brand);
    }
    .page-reports .rp-reset-ico {
      display: flex;
      color: var(--gray-500);
    }
    .page-reports .rp-reset-btn:hover .rp-reset-ico {
      color: var(--brand);
    }
    .page-reports .rp-format-select {
      min-width: 9.5rem;
      padding: 0.5rem 2rem 0.5rem 0.75rem;
      border-radius: 0.5rem;
      border: 1px solid var(--gray-300);
      font-size: 0.875rem;
      background: #fff;
      color: var(--gray-800);
      font-family: inherit;
      cursor: pointer;
    }
    .page-reports .rp-format-select:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(30, 91, 168, 0.15);
    }
    .page-reports .rp-generate-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }
    .page-reports .rp-gen-ico {
      display: flex;
    }
    .page-reports .rp-recent-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .page-reports .rp-recent-item {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 0.65rem 0.75rem;
      padding: 0.85rem 0;
      border-bottom: 1px solid var(--gray-100);
    }
    .page-reports .rp-recent-item:first-child {
      padding-top: 0.25rem;
    }
    .page-reports .rp-recent-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    .page-reports .rp-recent-body {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }
    .page-reports .rp-recent-name {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--gray-900);
      word-break: break-word;
    }
    .page-reports .rp-recent-meta {
      font-size: 0.75rem;
      color: var(--gray-500);
    }
    .page-reports .rp-icon-dl {
      flex-shrink: 0;
      padding: 0.35rem;
      border: none;
      border-radius: 0.5rem;
      background: transparent;
      color: var(--brand);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s;
    }
    .page-reports .rp-icon-dl:hover {
      background: rgba(30, 91, 168, 0.08);
      color: #174a86;
    }
    .page-reports .rp-recent-chev {
      display: flex;
      color: var(--gray-400);
      flex-shrink: 0;
    }
    .page-reports .rp-auto {
      background: var(--brand);
      border-color: var(--brand);
      box-shadow: 0 4px 16px rgba(30, 91, 168, 0.28);
    }
    .page-reports .rp-h3--on-dark {
      color: #fff;
    }
    .page-reports .rp-auto-text {
      margin: 0 0 1.125rem;
      font-size: 0.875rem;
      color: rgba(255, 255, 255, 0.92);
      line-height: 1.55;
    }
    .page-reports .rp-schedule-btn {
      width: 100%;
      background: #f97316;
      color: #fff;
      border: none;
      font-weight: 600;
      font-size: 0.9375rem;
      padding: 0.65rem 1.25rem;
      border-radius: 9999px;
      cursor: pointer;
      font-family: inherit;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }
    .page-reports .rp-schedule-btn:hover {
      filter: brightness(1.06);
    }
    .page-reports .rp-desc {
      margin-bottom: 0;
    }
    .page-reports .rp-desc-list {
      display: flex;
      flex-direction: column;
      gap: 1.125rem;
    }
    .page-reports .rp-desc-item {
      margin: 0;
      padding: 0;
      border: none;
      background: transparent;
    }
    .page-reports .rp-desc-item-title {
      margin: 0 0 0.25rem;
      font-size: 0.9375rem;
      font-weight: 700;
      color: var(--brand);
    }
    .page-reports .rp-desc-item-p {
      margin: 0;
      font-size: 0.8125rem;
      color: var(--gray-600);
      line-height: 1.5;
    }
    .page-reports .rp-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 100;
      background: rgba(0, 0, 0, 0.45);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      overflow-y: auto;
    }
    .page-reports .rp-modal-overlay[hidden] {
      display: none;
    }
    .page-reports .rp-modal {
      width: 100%;
      max-width: 26rem;
      background: #fff;
      border-radius: 0.75rem;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
      border: 1px solid var(--gray-200);
    }
    .page-reports .rp-modal-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 1rem 1.25rem;
      border-bottom: 1px solid var(--gray-200);
    }
    .page-reports .rp-modal-title {
      margin: 0;
      font-size: 1.0625rem;
      font-weight: 600;
      color: var(--gray-900);
    }
    .page-reports .rp-modal-close {
      border: none;
      background: none;
      font-size: 1.5rem;
      line-height: 1;
      color: var(--gray-400);
      cursor: pointer;
      padding: 0 0.25rem;
    }
    .page-reports .rp-modal-close:hover {
      color: var(--gray-700);
    }
    .page-reports .rp-modal-body {
      padding: 1.25rem;
    }
    .page-reports .rp-modal-foot {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 0.5rem;
      padding: 1rem 1.25rem;
      border-top: 1px solid var(--gray-200);
      background: var(--gray-50);
      border-radius: 0 0 0.75rem 0.75rem;
    }

    /* —— Expense Submit (Figma-aligned) —— */
    .page-expenses {
      background: #f8f9fa;
    }
    .page-expenses .exp-main {
      max-width: 70rem;
    }
    .page-expenses .exp-form {
      padding-bottom: 2rem;
    }
    .page-expenses .exp-hero-card,
    .page-expenses .exp-card {
      background: #fff;
      border: 1px solid var(--gray-200);
      border-radius: 0.5rem;
      padding: 1.25rem 1.5rem;
      margin-bottom: 1.25rem;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .page-expenses .exp-page-title {
      margin: 0 0 0.35rem;
      font-size: 1.5rem;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.02em;
    }
    .page-expenses .exp-page-sub {
      margin: 0;
      font-size: 0.9375rem;
      color: var(--gray-600);
      line-height: 1.45;
    }
    .page-expenses .exp-section-title {
      margin: 0 0 1rem;
      font-size: 1.0625rem;
      font-weight: 700;
      color: #1e3a8a;
    }
    .page-expenses .exp-grid {
      display: grid;
      gap: 1rem 1.25rem;
    }
    .page-expenses .exp-grid-2 {
      grid-template-columns: repeat(2, 1fr);
    }
    .page-expenses .exp-grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }
    .page-expenses .exp-grid-4 {
      grid-template-columns: repeat(4, 1fr);
    }
    .page-expenses .exp-grid-mt {
      margin-top: 1rem;
    }
    @media (max-width: 900px) {
      .page-expenses .exp-grid-4,
      .page-expenses .exp-grid-3 {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 560px) {
      .page-expenses .exp-grid-4,
      .page-expenses .exp-grid-3,
      .page-expenses .exp-grid-2 {
        grid-template-columns: 1fr;
      }
    }
    .page-expenses .exp-field label,
    .page-expenses .exp-checkbox-label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-700);
      margin-bottom: 0.35rem;
    }
    .page-expenses .exp-field .req {
      color: #dc2626;
    }
    .page-expenses .exp-input,
    .page-expenses .exp-textarea {
      width: 100%;
      border: 1px solid var(--gray-300);
      border-radius: 0.375rem;
      padding: 0.5rem 0.65rem;
      font-size: 0.875rem;
      background: #fff;
      color: var(--gray-900);
    }
    .page-expenses .exp-textarea {
      min-height: 6rem;
      resize: vertical;
    }
    .page-expenses .exp-input:focus,
    .page-expenses .exp-textarea:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(30, 91, 168, 0.15);
    }
    .page-expenses .exp-input-readonly {
      background: var(--gray-50);
      color: var(--gray-600);
      cursor: default;
    }
    .page-expenses .exp-input-total {
      background: #f3e8ff;
      color: #581c87;
      font-weight: 600;
      border-color: #e9d5ff;
    }
    .page-expenses .exp-hint {
      font-size: 0.75rem;
      color: var(--gray-500);
      margin: 0.25rem 0 0;
    }
    .page-expenses .exp-field-checkbox {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-bottom: 0.15rem;
    }
    .page-expenses .exp-check-row {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.875rem;
      color: var(--gray-700);
      cursor: pointer;
      margin: 0;
    }
    .page-expenses .exp-check-row input {
      width: 1rem;
      height: 1rem;
      accent-color: #7c3aed;
    }
    .page-expenses .exp-upload-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.25rem;
    }
    @media (max-width: 640px) {
      .page-expenses .exp-upload-row {
        grid-template-columns: 1fr;
      }
    }
    .page-expenses .exp-upload-heading {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-700);
      margin-bottom: 0.35rem;
    }
    .page-expenses .exp-dropzone {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      min-height: 10rem;
      padding: 1.25rem;
      border: 2px dashed var(--gray-300);
      border-radius: 0.5rem;
      background: #fafafa;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
    }
    .page-expenses .exp-dropzone:hover,
    .page-expenses .exp-dropzone-active {
      border-color: #a78bfa;
      background: #faf5ff;
    }
    .page-expenses .exp-file-input {
      position: absolute;
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      z-index: -1;
    }
    .page-expenses .exp-field-upload {
      position: relative;
    }
    .page-expenses .exp-drop-icon {
      color: var(--gray-400);
      margin-bottom: 0.5rem;
    }
    .page-expenses .exp-drop-title {
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-700);
    }
    .page-expenses .exp-drop-meta {
      font-size: 0.75rem;
      color: var(--gray-500);
      margin-top: 0.25rem;
    }
    .page-expenses .exp-drop-file {
      margin-top: 0.75rem;
      font-size: 0.8125rem;
      color: var(--brand);
      word-break: break-all;
    }
    .page-expenses .exp-card.exp-footer-actions {
      padding: 1.125rem 1.25rem;
      border-radius: 0.625rem;
      border-color: #e5e7eb;
      margin-top: 0;
    }
    .page-expenses .exp-footer-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      gap: 0.875rem;
      width: 100%;
      margin-top: 0;
      padding-top: 0;
    }
    .page-expenses .exp-footer-actions .btn {
      padding: 0.625rem 1.25rem;
      border-radius: 0.5rem;
      font-weight: 600;
      font-size: 0.875rem;
    }
    .page-expenses .exp-btn-icon {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }
    .page-expenses .exp-btn-submit {
      background: #7c3aed;
      color: #fff;
      border: none;
    }
    .page-expenses .exp-btn-submit:hover {
      filter: brightness(1.06);
    }
    .page-expenses .exp-error-banner {
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #991b1b;
      border-radius: 0.5rem;
      padding: 0.75rem 1rem;
      margin-bottom: 1rem;
      font-size: 0.875rem;
    }
    .page-expenses .exp-error-banner ul {
      margin: 0;
      padding-left: 1.25rem;
    }
    .page-expenses .exp-error-banner[hidden] {
      display: none;
    }
    .page-expenses .exp-toast {
      position: fixed;
      bottom: 1.5rem;
      right: 1.5rem;
      z-index: 200;
      padding: 0.75rem 1.25rem;
      background: #0f172a;
      color: #fff;
      border-radius: 0.5rem;
      font-size: 0.875rem;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }
    .page-expenses .exp-toast[hidden] {
      display: none;
    }

    /* —— Settings & Administration (Figma-aligned) —— */
    .page-settings {
      background: #f8f9fb;
    }
    .page-settings .st-main {
      max-width: 80rem;
    }
    .page-settings .st-hero-card {
      background: #fff;
      border: 1px solid var(--gray-200);
      border-radius: 0.625rem;
      padding: 1.25rem 1.5rem;
      margin-bottom: 1.25rem;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .page-settings .st-page-title {
      margin: 0 0 0.35rem;
      font-size: 1.5rem;
      font-weight: 700;
      color: #0f172a;
    }
    .page-settings .st-page-sub {
      margin: 0;
      font-size: 0.9375rem;
      color: var(--gray-600);
      line-height: 1.45;
    }
    .page-settings .st-layout {
      display: grid;
      grid-template-columns: 15.5rem 1fr;
      gap: 1.25rem;
      align-items: start;
    }
    @media (max-width: 900px) {
      .page-settings .st-layout {
        grid-template-columns: 1fr;
      }
    }
    .page-settings .st-sidebar {
      background: #fff;
      border: 1px solid var(--gray-200);
      border-radius: 0.625rem;
      padding: 0.5rem;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
    .page-settings .st-nav-item {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      width: 100%;
      padding: 0.75rem 1rem;
      border: none;
      border-radius: 0.5rem;
      border-left: 4px solid transparent;
      background: transparent;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-600);
      text-align: left;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .page-settings .st-nav-item:hover {
      background: var(--gray-50);
      color: var(--gray-800);
    }
    .page-settings .st-nav-item.is-active {
      background: var(--brand-tint);
      color: var(--brand);
      border-left-color: var(--brand);
      font-weight: 600;
    }
    .page-settings .st-nav-ico {
      flex-shrink: 0;
      opacity: 0.85;
    }
    .page-settings .st-nav-item.is-active .st-nav-ico {
      color: var(--brand);
    }
    .page-settings .st-content {
      min-width: 0;
    }
    /* Tab panels: [hidden] must win over .st-tab-stack { display:flex } (otherwise all sections stay visible). */
    .page-settings #st-panel-users[hidden],
    .page-settings #st-panel-roles[hidden],
    .page-settings #st-panel-system[hidden] {
      display: none !important;
    }
    .page-settings .st-tab-stack {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }
    .page-settings .st-panel {
      background: #fff;
      border: 1px solid var(--gray-200);
      border-radius: 0.625rem;
      padding: 1.25rem 1.5rem;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .page-settings .st-card {
      background: #fff;
      border: 1px solid var(--gray-200);
      border-radius: 0.625rem;
      padding: 1.25rem 1.5rem;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .page-settings .st-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-bottom: 1.25rem;
    }
    .page-settings .st-panel-title {
      margin: 0;
      font-size: 1.125rem;
      font-weight: 700;
      color: #1e3a8a;
    }
    .page-settings .st-btn-add {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }
    .page-settings .st-btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }
    .page-settings .st-table-wrap {
      overflow-x: auto;
      border-radius: 0.5rem;
      border: 1px solid var(--gray-200);
    }
    .page-settings .st-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.875rem;
    }
    .page-settings .st-table thead {
      background: var(--gray-100);
    }
    .page-settings .st-table th {
      text-align: left;
      padding: 0.85rem 1.1rem;
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--gray-500);
      border-bottom: 1px solid var(--gray-200);
    }
    .page-settings .st-table td {
      padding: 1rem 1.1rem;
      border-bottom: 1px solid var(--gray-100);
      vertical-align: middle;
      color: var(--gray-900);
    }
    .page-settings .st-table tbody tr:last-child td {
      border-bottom: none;
    }
    .page-settings .st-cell-user {
      line-height: 1.35;
    }
    .page-settings .st-user-line {
      display: block;
      font-weight: 600;
      color: var(--gray-900);
    }
    .page-settings .st-user-email {
      display: block;
      font-size: 0.8125rem;
      color: var(--gray-500);
    }
    .page-settings .st-muted {
      color: var(--gray-500);
      font-size: 0.8125rem;
    }
    .page-settings .st-pill {
      display: inline-block;
      padding: 0.2rem 0.55rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
    }
    .page-settings .st-pill-role {
      background: #dbeafe;
      color: #1d4ed8;
    }
    .page-settings .st-pill-active {
      background: #dcfce7;
      color: #166534;
    }
    .page-settings .st-pill-inactive {
      background: #fee2e2;
      color: #991b1b;
    }
    .page-settings .st-actions {
      display: flex;
      gap: 0.35rem;
      align-items: center;
    }
    .page-settings .st-icon-btn {
      padding: 0.4rem;
      border: none;
      background: transparent;
      color: var(--gray-600);
      border-radius: 0.375rem;
      cursor: pointer;
      line-height: 0;
    }
    .page-settings .st-icon-btn:hover {
      background: var(--gray-100);
      color: var(--gray-900);
    }
    .page-settings .st-roles-area {
      gap: 1.35rem;
    }
    .page-settings .st-roles-card,
    .page-settings .st-matrix-card {
      padding: 1.35rem 1.5rem;
      border-radius: 0.625rem;
    }
    .page-settings .st-roles-card-head {
      margin-bottom: 1.35rem;
    }
    .page-settings .st-btn-create-role {
      background: #fff;
      color: var(--gray-800);
      font-weight: 600;
      border: 1px solid var(--gray-300);
      box-shadow: none;
    }
    .page-settings .st-btn-create-role:hover {
      background: var(--gray-50);
      border-color: var(--gray-400);
    }
    .page-settings .st-role-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 1rem;
    }
    @media (max-width: 1200px) {
      .page-settings .st-role-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    @media (max-width: 700px) {
      .page-settings .st-role-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 420px) {
      .page-settings .st-role-grid {
        grid-template-columns: 1fr;
      }
    }
    .page-settings .st-role-card {
      position: relative;
      text-align: left;
      padding: 1.1rem 1rem 1.1rem 1rem;
      border: 1.5px solid var(--gray-200);
      border-radius: 0.5rem;
      background: #fff;
      cursor: pointer;
      transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
    }
    .page-settings .st-role-card:hover {
      border-color: #cbd5e1;
      box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    }
    .page-settings .st-role-card.is-selected {
      border-color: var(--brand);
      background: linear-gradient(180deg, #f0f7ff 0%, #fff 42%);
      box-shadow: 0 0 0 1px rgba(30, 91, 168, 0.22);
    }
    .page-settings .st-role-card-shield {
      position: absolute;
      top: 0.7rem;
      right: 0.7rem;
      color: var(--gray-400);
      opacity: 0.85;
    }
    .page-settings .st-role-card-name {
      display: block;
      font-weight: 700;
      font-size: 0.9375rem;
      color: var(--brand);
      letter-spacing: -0.01em;
      margin-bottom: 0.75rem;
      padding-right: 1.75rem;
    }
    .page-settings .st-role-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }
    .page-settings .st-role-tag {
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      padding: 0.3rem 0.45rem;
      border-radius: 0.3rem;
      background: #eef2f6;
      color: var(--gray-600);
      border: 1px solid #e2e8f0;
    }
    .page-settings .st-subpanel-title,
    .page-settings .st-matrix-card-title {
      margin: 0 0 1.1rem;
      font-size: 1.0625rem;
      font-weight: 700;
      color: #1e3a8a;
    }
    .page-settings .st-matrix-wrap {
      margin-bottom: 1.25rem;
      border: none;
      background: transparent;
      overflow: visible;
    }
    .page-settings .st-matrix-list {
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
    }
    .page-settings .st-matrix-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem 1.25rem;
      flex-wrap: wrap;
      padding: 0.9rem 1.15rem;
      border-radius: 0.625rem;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      font-size: 0.875rem;
    }
    .page-settings .st-matrix-module-name {
      font-weight: 600;
      color: #0f172a;
      letter-spacing: -0.01em;
      min-width: min(11rem, 40%);
    }
    .page-settings .st-matrix-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 0.35rem 1.1rem;
      flex: 1 1 auto;
    }
    .page-settings .st-matrix-empty {
      margin: 0;
      padding: 1rem 1.1rem;
      border-radius: 0.625rem;
      background: #f8fafc;
      border: 1px dashed var(--gray-200);
    }
    @media (max-width: 640px) {
      .page-settings .st-matrix-row {
        align-items: flex-start;
      }
      .page-settings .st-matrix-module-name {
        min-width: 100%;
      }
      .page-settings .st-matrix-actions {
        justify-content: flex-start;
        width: 100%;
      }
    }
    .page-settings .st-check {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .page-settings .st-check input {
      width: 1.1rem;
      height: 1.1rem;
      accent-color: var(--brand);
      cursor: pointer;
    }
    /* Permission matrix: row checkboxes (blue fill, white tick) */
    .page-settings #st-panel-roles .st-matrix-check {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      cursor: pointer;
      user-select: none;
    }
    .page-settings #st-panel-roles .st-matrix-check-label {
      font-size: 0.8125rem;
      font-weight: 500;
      color: #334155;
    }
    .page-settings #st-panel-roles .st-matrix-check input {
      appearance: none;
      -webkit-appearance: none;
      width: 1.125rem;
      height: 1.125rem;
      margin: 0;
      flex-shrink: 0;
      border: 1.5px solid #cbd5e1;
      border-radius: 0.25rem;
      background-color: #fff;
      cursor: pointer;
      transition: background-color 0.15s, border-color 0.15s;
    }
    .page-settings #st-panel-roles .st-matrix-check input:checked {
      background-color: var(--brand);
      border-color: var(--brand);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.5L4.5 9L11 1' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-size: 0.65rem auto;
      background-position: center;
      background-repeat: no-repeat;
    }
    .page-settings #st-panel-roles .st-matrix-check input:focus {
      outline: none;
      box-shadow: 0 0 0 2px rgba(30, 91, 168, 0.28);
    }
    .page-settings .st-sr {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .page-settings .st-matrix-footer {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
    @media (max-width: 560px) {
      .page-settings .st-matrix-footer {
        grid-template-columns: 1fr;
      }
    }
    .page-settings .st-field label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-700);
      margin-bottom: 0.35rem;
    }
    .page-settings .st-field .req {
      color: #dc2626;
    }
    .page-settings .st-hint {
      font-size: 0.75rem;
      color: var(--gray-500);
      margin: 0 0 0.35rem;
    }
    .page-settings .st-input,
    .page-settings .st-textarea {
      width: 100%;
      border: 1px solid var(--gray-300);
      border-radius: 0.375rem;
      padding: 0.5rem 0.65rem;
      font-size: 0.875rem;
      background: #fff;
    }
    .page-settings .st-textarea {
      resize: vertical;
      min-height: 5rem;
    }
    .page-settings .st-input:focus,
    .page-settings .st-textarea:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(30, 91, 168, 0.12);
    }
    .page-settings .st-system-form {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }
    .page-settings .st-card-head {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0 0 1.25rem;
      font-size: 1.0625rem;
      font-weight: 700;
      color: var(--brand);
    }
    .page-settings .st-card-ico {
      flex-shrink: 0;
      color: var(--brand);
    }
    .page-settings .st-branding-grid {
      display: grid;
      grid-template-columns: 1fr minmax(11rem, 15rem);
      gap: 1.25rem;
      align-items: start;
    }
    @media (max-width: 768px) {
      .page-settings .st-branding-grid {
        grid-template-columns: 1fr;
      }
    }
    .page-settings .st-logo-zone {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      min-height: 11rem;
      padding: 1rem;
      border: 2px dashed var(--gray-300);
      border-radius: 0.5rem;
      background: #fafafa;
      cursor: pointer;
      color: var(--gray-500);
      transition: border-color 0.15s, background 0.15s;
    }
    .page-settings .st-logo-zone:hover {
      border-color: var(--brand);
      background: var(--brand-tint);
      color: var(--gray-600);
    }
    .page-settings .st-file-input {
      position: absolute;
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      z-index: -1;
    }
    .page-settings .st-field-upload {
      position: relative;
    }
    .page-settings .st-logo-title {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--gray-700);
      margin-top: 0.35rem;
    }
    .page-settings .st-logo-meta {
      font-size: 0.75rem;
      margin-top: 0.2rem;
    }
    .page-settings .st-logo-filename {
      margin-top: 0.5rem;
      font-size: 0.8125rem;
      color: var(--brand);
      word-break: break-all;
    }
    .page-settings .st-grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }
    .page-settings .st-grid-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }
    @media (max-width: 900px) {
      .page-settings .st-grid-3 {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 560px) {
      .page-settings .st-grid-3,
      .page-settings .st-grid-2 {
        grid-template-columns: 1fr;
      }
    }
    .page-settings .st-toggle-row {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem 1.15rem;
      background: var(--gray-50);
      border: 1px solid var(--gray-200);
      border-radius: 0.5rem;
      margin-bottom: 0.75rem;
    }
    .page-settings .st-toggle-row:last-of-type {
      margin-bottom: 0;
    }
    .page-settings .st-toggle-ico {
      flex-shrink: 0;
      color: var(--gray-500);
      display: flex;
    }
    .page-settings .st-toggle-text {
      flex: 1;
      min-width: 0;
    }
    .page-settings .st-toggle-text strong {
      display: block;
      font-size: 0.875rem;
      color: var(--gray-900);
      margin-bottom: 0.2rem;
    }
    .page-settings .st-toggle-text p {
      margin: 0;
      font-size: 0.8125rem;
      color: var(--gray-600);
      line-height: 1.45;
    }
    .page-settings .st-switch {
      position: relative;
      display: inline-block;
      width: 48px;
      height: 26px;
      flex-shrink: 0;
    }
    .page-settings .st-switch input {
      opacity: 0;
      width: 0;
      height: 0;
      position: absolute;
    }
    .page-settings .st-switch-track {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background: var(--gray-300);
      border-radius: 9999px;
      transition: background 0.2s;
    }
    .page-settings .st-switch-track::after {
      content: "";
      position: absolute;
      width: 20px;
      height: 20px;
      left: 3px;
      bottom: 3px;
      background: #fff;
      border-radius: 50%;
      transition: transform 0.2s;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    }
    .page-settings .st-switch input:checked + .st-switch-track {
      background: var(--brand);
    }
    .page-settings .st-switch input:checked + .st-switch-track::after {
      transform: translateX(22px);
    }
    .page-settings .st-audit-row {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 1rem;
    }
    .page-settings .st-field-grow {
      flex: 1;
      min-width: 12rem;
    }
    .page-settings .st-field-btn {
      flex-shrink: 0;
    }
    .page-settings .st-label-spacer {
      display: block;
      height: 0;
      margin: 0;
      padding: 0;
      overflow: hidden;
      visibility: hidden;
    }
    .page-settings .st-btn-cache {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      background: #fff;
      color: #dc2626;
      border: 1px solid #fca5a5;
      font-weight: 600;
    }
    .page-settings .st-btn-cache:hover {
      background: #fef2f2;
    }
    .page-settings .st-card.st-footer-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      gap: 0.75rem;
      width: 100%;
      margin-top: 0.25rem;
      box-sizing: border-box;
    }
    .page-settings .st-btn-cancel {
      background: var(--gray-100);
      color: var(--gray-800);
      border: 1px solid var(--gray-200);
      font-weight: 600;
    }
    .page-settings .st-btn-cancel:hover {
      background: var(--gray-200);
    }
    .page-settings .st-btn-save {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      background: var(--accent);
      color: #fff;
      border: none;
      font-weight: 600;
      padding: 0.55rem 1.15rem;
    }
    .page-settings .st-btn-save:hover {
      filter: brightness(1.05);
    }
    .page-settings .st-toast {
      position: fixed;
      bottom: 1.5rem;
      right: 1.5rem;
      z-index: 200;
      padding: 0.75rem 1.25rem;
      background: #0f172a;
      color: #fff;
      border-radius: 0.5rem;
      font-size: 0.875rem;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }
    .page-settings .st-toast[hidden] {
      display: none;
    }
    body.has-fms-toast [data-fms-toast-proxy="1"] {
      display: none !important;
    }
    .fms-toast-root {
      position: fixed;
      right: 1.5rem;
      top: 1.5rem;
      z-index: 1400;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.75rem;
      width: min(24rem, calc(100vw - 2rem));
      pointer-events: none;
    }
    .fms-toast {
      width: 100%;
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      padding: 0.85rem 1rem;
      border-radius: 0.85rem;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: #1e5ba8;
      color: #fff;
      box-shadow: 0 16px 38px rgba(30, 91, 168, 0.28);
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.18s ease, transform 0.18s ease;
      pointer-events: auto;
    }
    .fms-toast.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .fms-toast--success {
      background: linear-gradient(135deg, #1e5ba8, #256dc4);
    }
    .fms-toast--warning {
      background: linear-gradient(135deg, #92400e, #d97706);
    }
    .fms-toast--error {
      background: linear-gradient(135deg, #991b1b, #dc2626);
    }
    .fms-toast__content {
      flex: 1;
      font-size: 0.9375rem;
      line-height: 1.45;
    }
    .fms-toast__close {
      border: none;
      background: transparent;
      color: inherit;
      cursor: pointer;
      font: inherit;
      font-size: 1rem;
      line-height: 1;
      padding: 0.15rem;
      opacity: 0.9;
    }
    .fms-toast__close:hover {
      opacity: 1;
    }
    @media (max-width: 640px) {
      .fms-toast-root {
        right: 1rem;
        left: 1rem;
        top: 1rem;
        width: auto;
      }
    }