@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

    :root {
      --bg: #f6f2eb;
      --paper: #fffdf8;
      --paper-2: #f0ebe1;
      --paper-3: #e7e0d4;
      --ink: #171411;
      --muted: #665e52;
      --faint: #91877a;
      --line: #d8d0c2;
      --line-2: #c7bcac;
      --navy: #10275f;
      --navy-2: #1c3d81;
      --navy-soft: #e7edf8;
      --green: #28734d;
      --green-soft: #e6f3ea;
      --amber: #95670f;
      --amber-soft: #fff1d2;
      --red: #8b1d1d;
      --red-soft: #fde8e8;
      --shadow: 0 16px 44px rgba(33, 27, 20, 0.12);
      --mono: "Roboto", Arial, sans-serif;
      --serif: "Roboto", Arial, sans-serif;
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      background:
        linear-gradient(180deg, rgba(16,39,95,0.06), transparent 280px),
        var(--bg);
      color: var(--ink);
      font-family: var(--mono);
      min-height: 100vh;
    }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    .app { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
    .topbar {
      height: 64px;
      background: rgba(255,253,248,0.94);
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 22px;
      position: sticky;
      top: 0;
      z-index: 10;
      backdrop-filter: blur(12px);
    }
    .brand { display: grid; gap: 1px; flex: 0 0 auto; min-width: 210px; }
    .brand h1 {
      margin: 0;
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 600;
      letter-spacing: 0;
    }
    .brand span {
      color: var(--faint);
      text-transform: uppercase;
      font-size: 10px;
      letter-spacing: 0.08em;
    }
    .tabs { display: flex; gap: 4px; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; overflow: visible; flex-wrap: wrap; }
    .tab {
      border: 1px solid transparent;
      background: transparent;
      color: var(--muted);
      padding: 8px 12px;
      border-radius: 6px;
      text-transform: uppercase;
      font-size: 11px;
      letter-spacing: 0.06em;
    }
    .tab:hover { background: var(--paper-2); color: var(--ink); }
    .tab.active { background: var(--navy); color: #fff; }
    .admin-nav-menu { position: relative; display: inline-flex; }
    .admin-nav-menu .tab { white-space: nowrap; }
    .admin-nav-dropdown {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      min-width: 190px;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--paper);
      box-shadow: 0 14px 32px rgba(18, 16, 12, .16);
      display: grid;
      gap: 4px;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-4px);
      transition: opacity .14s ease, transform .14s ease;
      z-index: 50;
    }
    .admin-nav-menu:hover .admin-nav-dropdown,
    .admin-nav-menu:focus-within .admin-nav-dropdown { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .admin-nav-dropdown .tab { justify-content: flex-start; width: 100%; text-align: left; }
    .top-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex: 0 0 auto; }
    .user-pill {
      border: 1px solid var(--line);
      background: var(--paper);
      border-radius: 999px;
      padding: 8px 11px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 11px;
      max-width: 260px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .initials {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: var(--navy);
      color: #fff;
      display: inline-grid;
      place-items: center;
      font-size: 10px;
      flex: 0 0 auto;
    }
    .shell { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - 104px); }
    .app-footer {
      border-top: 1px solid var(--line);
      background: rgba(255,253,248,0.82);
      color: var(--faint);
      text-align: center;
      padding: 12px 18px;
      font-size: 11px;
      letter-spacing: 0.04em;
    }
    .sidebar {
      border-right: 1px solid var(--line);
      background: rgba(255,253,248,0.78);
      padding: 18px 16px;
      min-width: 0;
      display: none;
    }
    .side-block { min-width: 0; }
    .panel-title {
      text-transform: uppercase;
      color: var(--faint);
      font-size: 10px;
      letter-spacing: 0.1em;
      margin: 0 0 8px;
    }
    .side-block { margin-bottom: 20px; }
    .field { display: grid; gap: 6px; }
    .field label {
      color: var(--faint);
      text-transform: uppercase;
      letter-spacing: 0.07em;
      font-size: 10px;
    }
    input, select, textarea {
      width: 100%;
      min-width: 0;
      border: 1px solid var(--line);
      background: var(--paper);
      color: var(--ink);
      border-radius: 6px;
      padding: 9px 10px;
      outline: none;
    }
    input:focus, select:focus, textarea:focus { border-color: var(--navy-2); box-shadow: 0 0 0 3px var(--navy-soft); }
    textarea { resize: vertical; min-height: 78px; }
    .filter-list { display: grid; gap: 4px; }
    .filter {
      text-align: left;
      border: 0;
      border-left: 3px solid transparent;
      background: transparent;
      color: var(--muted);
      padding: 7px 9px;
      border-radius: 5px;
      font-size: 12px;
    }
    .filter:hover { background: var(--paper-2); color: var(--ink); }
    .filter.active { background: var(--navy-soft); color: var(--navy); border-left-color: var(--navy); }
    .content { padding: 24px; min-width: 0; max-width: 1480px; width: 100%; margin: 0 auto; animation: pageFade .18s ease; }
    @keyframes pageFade {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
    .eyebrow { color: var(--faint); text-transform: uppercase; font-size: 10px; letter-spacing: 0.1em; margin-bottom: 4px; }
    h2 {
      margin: 0;
      font-family: var(--serif);
      font-size: 28px;
      font-weight: 600;
      letter-spacing: 0;
    }
    .subtle { color: var(--muted); font-size: 12px; line-height: 1.6; }
    .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
    .btn {
      border: 1px solid var(--line);
      background: var(--paper);
      color: var(--muted);
      border-radius: 6px;
      padding: 9px 12px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-size: 11px;
      font-weight: 500;
      min-height: 36px;
    }
    .btn:hover { background: var(--paper-2); color: var(--ink); }
    .btn.primary { background: var(--navy); color: white; border-color: var(--navy); }
    .btn.primary:hover { background: var(--navy-2); }
    .btn.danger { border-color: #d7a5a5; color: var(--red); }
    .btn.icon { width: 34px; padding: 0; justify-content: center; }
    .btn i { font-size: 13px; line-height: 1; }
    .btn.icon i { pointer-events: none; }
    .grid { display: grid; gap: 14px; }
    .metrics { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
    .dashboard-panels { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr); gap: 14px; align-items: stretch; margin-top: 14px; }
    .dashboard-table-scroll { max-height: 470px; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); scrollbar-gutter: stable; }
    .dashboard-movement-scroll { max-height: 470px; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); max-width: 100%; scrollbar-gutter: stable; }
    .dashboard-table-static { overflow: visible; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
    .dashboard-table { width: 100%; min-width: 0; table-layout: fixed; }
    .dashboard-table th, .dashboard-table td { white-space: normal; vertical-align: top; }
    .dashboard-table thead th { position: sticky; top: 0; z-index: 2; background: #eee8dd; box-shadow: 0 1px 0 var(--line); }
    .dashboard-best-table th:first-child, .dashboard-best-table td:first-child { width: 44%; }
    .dashboard-best-table th:not(:first-child), .dashboard-best-table td:not(:first-child) { width: 18.66%; }
    .dashboard-movement-table th:nth-child(1), .dashboard-movement-table td:nth-child(1) { width: 37%; }
    .dashboard-movement-table th:nth-child(2), .dashboard-movement-table td:nth-child(2) { width: 27%; }
    .dashboard-movement-table th:nth-child(3), .dashboard-movement-table td:nth-child(3) { width: 17%; }
    .dashboard-movement-table th:nth-child(4), .dashboard-movement-table td:nth-child(4) { width: 19%; }
    .dashboard-movement-summary { min-height: 58px; margin-bottom: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .dashboard-movement-stat { border: 1px solid var(--line); border-radius: 7px; background: #fbf8f2; padding: 8px 9px; min-width: 0; }
    .dashboard-movement-stat strong { display: block; color: var(--ink); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
    .dashboard-rate-source { color: var(--faint); font-size: 10px; line-height: 1.25; display: block; margin-top: 2px; overflow-wrap: anywhere; }
    .dashboard-equal-card { display: flex; flex-direction: column; }
    .dashboard-fab { position: fixed; right: 24px; bottom: 28px; z-index: 80; display: grid; justify-items: end; gap: 10px; }
    .dashboard-fab-menu { display: grid; gap: 8px; opacity: 0; transform: translateY(10px) scale(.96); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
    .dashboard-fab.open .dashboard-fab-menu,
    .dashboard-fab:hover .dashboard-fab-menu,
    .dashboard-fab:focus-within .dashboard-fab-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
    .quote-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
    .quote-details-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; }
    .quote-details-grid .span-2 { grid-column: span 2; }
    .quote-details-grid .span-4 { grid-column: 1 / -1; }
    .quote-area-grid { display: grid; grid-template-columns: minmax(160px, 1fr) 110px minmax(150px, 1fr) 42px; gap: 8px; align-items: center; }
    .quote-area-grid.header { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
    .quote-area-box { border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: #fffdfa; display: grid; gap: 8px; }
    .quote-area-build { border-top: 1px solid var(--line); }
    .quote-area-build:first-child { border-top: 0; }
    .quote-build-subhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: #fffdfa; border-bottom: 1px solid var(--line); }
    .quote-build-subhead h3 { margin: 0; font-size: 16px; }
    .quote-area-stats { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
    .quote-table-wrap { border: 1px solid var(--line); border-radius: 8px; overflow: auto; max-height: 620px; background: #fffdfa; }
    .quote-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; background: var(--stone-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .quote-section-head:first-child { border-top: 0; }
    .quote-section-material { background: #e6f4ea; border-color: #b9dfc4; }
    .quote-section-labour { background: #eef1f7; border-color: #c7d0e2; }
    .quote-section-plant { background: #f7efe2; border-color: #e2cfaa; }
    .quote-section-default { background: #f1eee7; border-color: #d8d0c1; }
    .quote-section-title { display: flex; align-items: center; gap: 8px; font-weight: 800; }
    .quote-grid { display: grid; grid-template-columns: minmax(220px, 2fr) 82px 86px 90px 96px 108px minmax(150px, 1fr) 44px; align-items: stretch; min-width: 980px; }
    .quote-grid.header { position: sticky; top: 0; z-index: 2; background: #ebe5d9; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
    .quote-grid > div { padding: 6px 8px; border-bottom: 1px solid var(--line); min-width: 0; }
    .quote-grid .total-cell { color: var(--navy); font-weight: 900; }
    .quote-row-input, .quote-row-select { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; background: #fffdfa; font-family: inherit; font-size: 12px; }
    .quote-row-notes { min-height: 30px; resize: vertical; }
    .quote-material-choice { display: grid; gap: 5px; }
    .quote-rate-context { color: var(--muted); font-size: 11px; line-height: 1.35; }
    .quote-assistant { position: sticky; top: 86px; display: grid; gap: 12px; }
    .assistant-box { border: 1px solid var(--line); border-radius: 8px; background: #fffdfa; padding: 14px; }
    .assistant-box h3 { margin: 0 0 8px; font-size: 16px; }
    .assistant-list { display: grid; gap: 8px; font-size: 13px; color: var(--muted); }
    .quote-summary-bar { position: sticky; bottom: 0; z-index: 5; margin-top: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fffdfa; box-shadow: 0 -8px 24px rgba(28, 24, 18, .08); padding: 10px; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
    .quote-total-pill { border: 1px solid var(--line); border-radius: 7px; padding: 8px 9px; background: var(--stone); min-width: 0; }
    .quote-total-pill span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .quote-total-pill b { display: block; color: var(--navy); font-size: 14px; margin-top: 3px; }
    .quote-total-pill.strong { background: #e8f6ef; border-color: #bee0ce; }
    .quote-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
    .quote-preview-doc { background: white; color: #18211b; border: 1px solid var(--line); border-radius: 8px; padding: 22px; display: grid; gap: 16px; }
    .quote-preview-head { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; border-bottom: 3px solid var(--green); padding-bottom: 14px; }
    .quote-preview-logo { max-width: 210px; max-height: 82px; object-fit: contain; }
    .quote-preview-title { text-align: right; display: grid; gap: 4px; }
    .quote-preview-title h2 { margin: 0; font-size: 26px; text-transform: uppercase; letter-spacing: .04em; }
    .quote-preview-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
    .quote-preview-meta div { padding: 9px 10px; border-right: 1px solid var(--line); background: #fbf8f2; }
    .quote-preview-meta div:last-child { border-right: 0; }
    .quote-preview-meta span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
    .quote-preview-section h3 { margin: 0; padding: 9px 10px; background: #e6f4ea; border: 1px solid #b9dfc4; border-radius: 7px 7px 0 0; }
    .quote-preview-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .quote-preview-table th, .quote-preview-table td { border: 1px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: top; }
    .quote-preview-table th { background: #f1eee7; color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: .05em; }
    .quote-preview-totals { margin-left: auto; width: min(420px, 100%); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
    .quote-preview-totals div { display: flex; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--line); }
    .quote-preview-totals div:last-child { border-bottom: 0; background: #e6f4ea; font-weight: 900; }
    .dashboard-fab-action { box-shadow: 0 12px 30px rgba(11,35,91,.16); background: var(--paper); }
    .dashboard-fab-main { width: 54px; height: 54px; border-radius: 999px; border: 1px solid var(--navy); background: var(--navy); color: white; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 16px 36px rgba(11,35,91,.28); cursor: pointer; }
    .dashboard-fab-main i { font-size: 18px; pointer-events: none; }
    .card {
      background: rgba(255,253,248,0.88);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: 0 1px 0 rgba(255,255,255,0.8);
    }
    .metric { padding: 16px; }
    .metric-value { font-family: var(--serif); font-size: 27px; font-weight: 600; margin-top: 4px; }
    .metric-note { color: var(--muted); font-size: 11px; margin-top: 4px; }
    .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
    .admin-split { grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr); }
    .categories-layout { grid-template-columns: minmax(260px, 0.78fr) minmax(420px, 1.22fr); gap: 18px; }
    .search-form { grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr); align-items: start; }
    .search-field-shell { display: grid; gap: 6px; }
    .search-field-shell input, .search-field-shell .material-combo > input { height: 38px; }
    .rate-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; }
    .rate-stats { display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 10px; }
    .rate-stat { border: 1px solid var(--line); background: #fbf8f2; border-radius: 7px; padding: 10px; min-width: 0; }
    .rate-stat .eyebrow { margin-bottom: 3px; }
    .rate-stat-value { color: var(--ink); font-weight: 500; font-size: 14px; overflow-wrap: anywhere; }
    .comparison-stack { display: grid; gap: 14px; margin-top: 14px; }
    .section { padding: 16px; }
    .section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
    .section h3 { margin: 0; font-family: var(--serif); font-size: 18px; letter-spacing: 0; }
    .table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); }
    table { width: 100%; border-collapse: collapse; min-width: 760px; }
    .compact-table { min-width: 620px; }
    .compact-table th, .compact-table td { padding: 9px 8px; }
    .table-input { width: 100%; min-width: 70px; padding: 7px 8px; border-radius: 7px; }
    .table-select { width: 100%; min-width: 150px; padding: 7px 8px; border-radius: 7px; background: var(--paper); }
    .table-input:disabled { opacity: .45; background: var(--wash); }
    .modifier-panel { border: 1px solid var(--line); border-radius: 8px; background: rgba(255,253,248,0.7); padding: 10px; }
    .modifier-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
    .modifier-head .subtle { margin: 0; }
    .modifier-rows { display: grid; gap: 8px; }
    .modifier-row { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(90px, .55fr) minmax(160px, 1fr) 38px; gap: 8px; align-items: center; }
    .modifier-row select,
    .modifier-row input { width: 100%; min-width: 0; }
    .modifier-details summary { cursor: pointer; list-style: none; }
    .modifier-details summary::-webkit-details-marker { display: none; }
    .modifier-mini-table { width: 100%; min-width: 0; margin-top: 8px; font-size: 12px; }
    .modifier-mini-table th,
    .modifier-mini-table td { padding: 6px 7px; }
    .modifier-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
    .user-table-scroll { max-height: 430px; overflow-y: auto; overflow-x: hidden; }
    .user-table { min-width: 0; table-layout: fixed; }
    .user-table th, .user-table td { white-space: normal; overflow-wrap: anywhere; }
    .user-table th:nth-child(1), .user-table td:nth-child(1) { width: 28%; }
    .user-table th:nth-child(2), .user-table td:nth-child(2) { width: 32%; }
    .user-table th:nth-child(3), .user-table td:nth-child(3) { width: 25%; }
    .user-table th:nth-child(4), .user-table td:nth-child(4) { width: 15%; }
    .ancillary-table { min-width: 0; table-layout: fixed; }
    .ancillary-table th, .ancillary-table td { white-space: normal; overflow-wrap: anywhere; }
    .ancillary-table th:nth-child(1), .ancillary-table td:nth-child(1) { width: 22%; }
    .ancillary-table th:nth-child(2), .ancillary-table td:nth-child(2) { width: 24%; }
    .ancillary-table th:nth-child(3), .ancillary-table td:nth-child(3) { width: 18%; }
    .ancillary-table th:nth-child(4), .ancillary-table td:nth-child(4) { width: 12%; }
    .ancillary-table th:nth-child(5), .ancillary-table td:nth-child(5) { width: 14%; }
    .ancillary-table th:nth-child(6), .ancillary-table td:nth-child(6) { width: 10%; }
    .supplier-charge-preview { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 6px; }
    .charge-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; font-size: 11px; color: var(--muted); }
    th {
      text-align: left;
      color: var(--faint);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 10px;
      background: var(--paper-2);
      border-bottom: 1px solid var(--line);
      white-space: nowrap;
    }
    td { padding: 11px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; vertical-align: middle; }
    tr:last-child td { border-bottom: 0; }
    tbody tr:hover td { background: #fbf8f1; }
    .name-cell { color: var(--ink); font-weight: 500; }
    .price { color: var(--ink); font-weight: 500; white-space: nowrap; }
    .price.best { color: var(--navy); }
    .chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border: 1px solid var(--line);
      background: var(--paper-2);
      color: var(--muted);
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      white-space: nowrap;
    }
    .chip.good { background: var(--green-soft); color: var(--green); border-color: #badcc7; }
    .chip.warn { background: var(--amber-soft); color: var(--amber); border-color: #ebd29a; }
    .chip.bad { background: var(--red-soft); color: var(--red); border-color: #ebb4b4; }
    button.chip { font-family: inherit; cursor: pointer; }
    button.chip:hover { background: var(--navy-soft); color: var(--navy); border-color: #b9c8e8; }
    .materials { display: grid; gap: 10px; }
    .material-card { overflow: hidden; }
    .material-summary {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 14px;
      align-items: center;
      padding: 14px 16px;
    }
    .material-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .material-title strong { font-family: var(--serif); font-size: 17px; font-weight: 600; }
    .material-meta { color: var(--faint); font-size: 11px; margin-top: 4px; }
    .best-pair { display: grid; grid-template-columns: repeat(3, minmax(104px, 1fr)); gap: 8px; min-width: 372px; }
    .mini-price { border: 1px solid var(--line); border-radius: 6px; background: #fbf8f2; padding: 8px; }
    .mini-price span { display: block; color: var(--faint); font-size: 9px; text-transform: uppercase; letter-spacing: 0.07em; }
    .mini-price b { color: var(--navy); font-size: 14px; }
    .material-detail { border-top: 1px solid var(--line); padding: 14px 16px 16px; background: rgba(240,235,225,0.36); }
    .chart-card { min-height: 286px; }
    .chart { width: 100%; height: 250px; display: block; }
    .chart-grid { stroke: #ded6ca; stroke-width: 1; }
    .chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
    .chart-dot { stroke: var(--paper); stroke-width: 2; }
    .legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
    .legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
    .swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
    .empty { padding: 34px; text-align: center; color: var(--faint); border: 1px dashed var(--line); border-radius: 8px; background: rgba(255,253,248,0.6); }
    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(23,20,17,0.52);
      display: none;
      align-items: flex-start;
      justify-content: center;
      z-index: 50;
      padding: clamp(12px, 4vh, 28px) 12px;
      overflow-y: auto;
    }
    .modal-backdrop.open { display: flex; }
    .modal {
      width: min(760px, calc(100vw - 24px));
      max-width: 100%;
      max-height: calc(100vh - 32px);
      overflow: auto;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
      padding: 20px;
    }
    .modal.modal-wide { width: min(1320px, calc(100vw - 24px)); }
    .modal h3 { margin: 0 0 16px; font-family: var(--serif); font-size: 22px; }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .full { grid-column: 1 / -1; }
    .check-row { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
    .check-row label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
    .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
    .login-screen {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: clamp(18px, 4vw, 44px);
      background:
        linear-gradient(140deg, rgba(16,39,95,0.10), transparent 38%),
        linear-gradient(0deg, rgba(255,255,255,0.42), rgba(255,255,255,0.42)),
        var(--bg);
    }
    .login-panel {
      display: grid;
      place-items: center;
      width: min(460px, 100%);
    }
    .login-card {
      width: 100%;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
      padding: clamp(24px, 4vw, 34px);
    }
    .login-logo {
      display: block;
      width: min(260px, 78%);
      height: auto;
      margin: 0 auto 24px;
    }
    .login-card h2 { font-size: 26px; margin-bottom: 8px; text-align: center; }
    .login-card .eyebrow, .login-card .subtle { text-align: center; }
    .login-help {
      margin-top: 16px;
      border-top: 1px solid var(--line);
      padding-top: 14px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.6;
    }
    .toast {
      position: fixed;
      right: 22px;
      bottom: 22px;
      background: var(--navy);
      color: white;
      border-radius: 8px;
      padding: 11px 14px;
      box-shadow: var(--shadow);
      font-size: 12px;
      display: none;
      z-index: 70;
    }
    .toast.show { display: block; }
    .status-stack { display: grid; gap: 8px; }
    .status-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-top: 1px solid var(--line);
      padding: 10px 0;
      font-size: 12px;
    }
    .admin-stats .status-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 9px 0; }
    .admin-stats .chip { padding: 3px 7px; }
    .status-row:first-child { border-top: 0; padding-top: 0; }
    .area-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
    .area-item,
    .supplier-item,
    .plant-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: start;
      border: 1px solid var(--line);
      background: var(--paper);
      border-radius: 8px;
      padding: 12px;
    }
    .category-sort-list,
    .supplier-list,
    .plant-list { display: grid; gap: 10px; }
    .supplier-list {
      display: block;
      columns: 3 280px;
      column-gap: 10px;
    }
    .supplier-card {
      border: 1px solid var(--line);
      background: var(--paper);
      border-radius: 8px;
      padding: 14px;
      display: grid;
      gap: 12px;
      min-width: 0;
      break-inside: avoid;
      margin: 0 0 10px;
    }
    .password-control { position: relative; display: grid; }
    .password-control input { padding-right: 44px; }
    .password-toggle {
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--muted);
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .password-toggle:hover { color: var(--ink); border-color: var(--line); background: var(--paper); }
    .supplier-top {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: start;
      min-width: 0;
    }
    .supplier-contact { overflow-wrap: anywhere; word-break: break-word; }
    .supplier-group { display: grid; gap: 10px; min-width: 0; }
    .supplier-depot-toggle {
      width: 100%;
      border: 1px solid var(--line);
      background: #fbf8f2;
      color: var(--muted);
      border-radius: 7px;
      padding: 7px 9px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
    }
    .supplier-depot-toggle:hover { background: var(--paper-2); color: var(--ink); }
    .supplier-depot-toggle span:first-child { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
    .supplier-depots {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      margin-top: 0;
      padding-top: 10px;
      border-top: 1px solid var(--line);
      max-height: min(360px, 48vh);
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 4px;
      scrollbar-gutter: stable;
    }
    .supplier-depots.collapsed { display: none; }
    .supplier-board { background: transparent; border: 0; box-shadow: none; padding: 0; }
    .supplier-board .section-head { padding: 0 0 10px; margin-bottom: 0; }
    .supplier-group > .supplier-item { min-height: 0; }
    .category-sort-item { cursor: grab; }
    .category-sort-item:active { cursor: grabbing; }
    .route-note { color: var(--muted); font-size: 11px; margin-top: 8px; }
    .material-combo { position: relative; }
    .import-combo { min-width: 180px; }
    .import-combo .material-options { position: fixed; min-width: 240px; z-index: 1200; }
    .material-options {
      position: absolute;
      z-index: 80;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      display: none;
      max-height: 184px;
      overflow-y: auto;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--paper);
      box-shadow: var(--shadow);
      padding: 4px;
    }
    .material-combo.open .material-options { display: grid; gap: 3px; }
    .material-option {
      border: 0;
      background: transparent;
      color: var(--ink);
      border-radius: 5px;
      padding: 8px;
      text-align: left;
      display: grid;
      gap: 2px;
      font-size: 12px;
    }
    .material-option:hover { background: var(--paper-2); }
    .audit-list { display: grid; gap: 8px; }
    .panel-scroll { max-height: 384px; overflow-y: auto; padding-right: 4px; }
    .table-panel-scroll { max-height: 62vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
    .table-panel-scroll .table-wrap { border: 0; border-radius: 0; overflow: visible; }
    .list-search { margin-bottom: 12px; }
    .user-role-list { display: grid; gap: 8px; }
    .user-role-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); background: var(--paper); border-radius: 7px; padding: 10px; min-width: 0; }
    .user-role-actions { display: flex; gap: 6px; align-items: center; }
    .user-role-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
    .audit-table { width: 100%; min-width: 0; }
    .audit-table td, .audit-table th { white-space: normal; }
    .audit-entry { border: 1px solid var(--line); border-radius: 7px; background: var(--paper); overflow: hidden; }
    .audit-entry summary {
      list-style: none;
      cursor: pointer;
      display: grid;
      grid-template-columns: 22px 84px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      color: var(--muted);
      font-size: 12px;
    }
    .audit-entry summary::-webkit-details-marker { display: none; }
    .audit-arrow { color: var(--faint); transition: transform .16s ease; }
    .audit-entry[open] .audit-arrow { transform: rotate(90deg); }
    .audit-detail { margin: 0 12px 12px 128px; border: 1px solid var(--line); border-radius: 7px; background: #fbf8f2; padding: 10px; color: var(--muted); font-size: 12px; display: grid; gap: 6px; }
    .area-title,
    .supplier-title,
    .plant-title { font-family: var(--serif); font-size: 16px; font-weight: 600; margin-bottom: 5px; }
    .area-meta,
    .supplier-meta,
    .plant-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .area-address { display: grid; gap: 4px; margin-top: 9px; min-width: 0; }
    .area-address-line {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .area-address-label { color: var(--faint); text-transform: uppercase; font-size: 9px; letter-spacing: 0.08em; margin-right: 5px; }
    .area-actions,
    .supplier-actions,
    .plant-actions { display: flex; align-items: center; gap: 6px; }
    .map-helper {
      border: 1px solid var(--line);
      background: #fbf8f1;
      border-radius: 8px;
      padding: 12px;
    }
    .map-helper-row {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 8px;
      align-items: end;
    }
    .map-preview {
      margin-top: 10px;
      border: 1px dashed var(--line-2);
      border-radius: 7px;
      min-height: 74px;
      display: grid;
      place-items: center;
      color: var(--muted);
      background: var(--paper);
      text-align: center;
      padding: 10px;
      font-size: 12px;
    }
    .timeline { display: grid; gap: 9px; }
    .event { display: grid; grid-template-columns: 82px 1fr; gap: 12px; font-size: 12px; border-bottom: 1px solid var(--line); padding-bottom: 9px; }
    .event-date { color: var(--faint); }
    .event-body strong { color: var(--ink); }
    .hidden { display: none !important; }
    @media (max-width: 980px) {
      .topbar { height: auto; min-height: 64px; flex-wrap: wrap; padding: 12px; gap: 10px; }
      .brand, .top-actions { min-width: 0; }
      .tabs { order: 3; width: 100%; overflow: visible; justify-content: flex-start; }
      .shell { grid-template-columns: 1fr; }
      .sidebar { display: none; }
      .metrics { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
      .dashboard-panels { grid-template-columns: 1fr; }
      .split { grid-template-columns: 1fr; }
      .categories-layout { grid-template-columns: 1fr; }
      .rate-summary-grid { grid-template-columns: 1fr; }
      .material-summary { grid-template-columns: 1fr; }
      .best-pair { min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 620px) {
      .content { padding: 16px; }
      .page-head { display: grid; }
      .actions { justify-content: start; }
      .metrics { grid-template-columns: 1fr; }
      .best-pair { grid-template-columns: 1fr; }
      .dashboard-table { min-width: 620px; }
      .audit-entry summary { grid-template-columns: 18px minmax(0, 1fr); }
      .audit-entry summary .event-date, .audit-entry summary .chip { display: none; }
      .audit-detail { margin-left: 12px; }
      .search-form, .rate-stats { grid-template-columns: 1fr; }
      .form-grid { grid-template-columns: 1fr; }
      .full { grid-column: auto; }
      .quote-layout { grid-template-columns: 1fr; }
      .quote-assistant { position: static; }
      .quote-summary-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .brand { display: grid; gap: 2px; }
      .modal-actions { justify-content: stretch; }
      .modal-actions .btn { flex: 1; justify-content: center; }
      .supplier-list { columns: 1; }
      .area-item, .supplier-item, .plant-item, .supplier-top { grid-template-columns: 1fr; }
      .area-actions, .supplier-actions, .plant-actions { justify-content: flex-start; }
      .map-helper-row { grid-template-columns: 1fr; }
      .quote-details-grid { grid-template-columns: 1fr; }
      .quote-details-grid .span-2, .quote-details-grid .span-4 { grid-column: auto; }
      .quote-summary-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }