:root{
    --steel-900:#1F2958;
    --steel-800:#161D3E;
    --steel-600:#6B6A68;
    --steel-300:#B7B4AC;
    --steel-100:#F4F0E2;
    --cream:#FDFBF3;
    --panel:#ffffff;
    --rib:#E6E1D2;
    --accent:#5CA2D8;
    --accent-dark:#42749B;
    --good:#1f7a4d;
    --error:#B3261E;
    --font-display: 'Montserrat', 'Arial Black', sans-serif;
    --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
  }
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

  *{box-sizing:border-box;}
  .fr-root{
    font-family:var(--font-body);
    background:var(--cream);
    color:var(--steel-900);
    min-height:100%;
    padding:0 0 48px 0;
  }
  .fr-header{
    background:var(--cream);
    color:var(--steel-900);
    padding:26px 24px 22px;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid var(--rib);
  }
  .fr-header::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-1px; height:3px;
    background:linear-gradient(90deg, #AACBF2, #4F86E8);
  }
  .fr-header-inner{ position:relative; }
  .fr-logo{ height:44px; display:block; flex-shrink:0; }
  .fr-header-top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

  .fr-tabs{ background:var(--panel); border-bottom:1px solid var(--rib); }
  .fr-tabs-inner{ display:flex; }
  .fr-tab-btn{
    flex:1; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:7px;
    background:none; border:none; padding:14px 16px; font-family:var(--font-display); font-weight:700;
    font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--steel-600);
    cursor:pointer; white-space:nowrap; border-bottom:3px solid transparent; margin-bottom:-1px;
    transition:background .12s ease, color .12s ease;
  }
  .fr-tab-icon{ display:flex; flex-shrink:0; }
  .fr-tab-icon svg{ width:18px; height:18px; }
  .fr-tab-btn:hover{ color:var(--steel-900); }
  .fr-tab-btn.active{ color:var(--steel-900); border-bottom-color:var(--accent); }
  /* Desktop default: the "More" button is hidden (all tabs fit in the row). Mobile CSS re-shows it. */
  .fr-tab-more-btn{ display:none; }
  /* Leads is a placeholder until its feature is built — dimmed and not clickable. */

  /* ---------- "More" overflow sheet (mobile) ---------- */
  .fr-more-sheet{ position:fixed; inset:0; z-index:1000; }
  .fr-more-backdrop{ position:absolute; inset:0; background:rgba(15,37,87,.38); }
  .fr-more-panel{
    position:absolute; left:0; right:0; bottom:0;
    background:var(--panel); border-top-left-radius:18px; border-top-right-radius:18px;
    padding:10px 14px calc(14px + env(safe-area-inset-bottom, 0));
    box-shadow:0 -10px 30px rgba(15,37,87,.22);
  }
  .fr-more-head{
    font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    font-size:12px; color:var(--steel-600); text-align:center; padding:6px 0 10px;
  }
  .fr-more-item{
    display:flex; align-items:center; gap:12px; width:100%;
    background:none; border:none; border-radius:12px; padding:14px 12px; cursor:pointer;
    font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--steel-900); text-align:left;
  }
  .fr-more-item:hover{ background:#eef3fb; }
  .fr-more-icon{ display:flex; color:var(--accent-dark); }
  .fr-more-icon svg{ width:22px; height:22px; }
  .fr-more-text{ flex:1; }
  .fr-more-badge{
    font-family:var(--font-body); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.03em;
    color:#8a6d00; background:#fff2c2; padding:3px 8px; border-radius:999px;
  }
  .fr-more-item-soon{ opacity:.6; cursor:default; }
  .fr-more-item-soon:hover{ background:none; }
  .fr-more-cancel{
    width:100%; margin-top:6px; padding:13px; border:none; border-radius:12px; cursor:pointer;
    background:var(--accent-dark); color:#fff; font-family:var(--font-display); font-weight:700; font-size:14px;
  }

  /* Below 640px, the tab bar becomes a fixed bottom nav — icon-over-label, rounded active pill,
     the pattern agents already know from native apps, instead of a scrolled-past top bar. */
  @media (max-width:640px){
    .fr-tabs{
      position:fixed; left:0; right:0; bottom:0; z-index:900;
      border-bottom:none; border-top:1px solid var(--rib);
      box-shadow:0 -6px 20px rgba(15,37,87,.10);
      padding-bottom:env(safe-area-inset-bottom, 0);
    }
    /* Mobile bottom nav: show the first three tabs + a "More" button. No sideways scrolling —
       everything is reachable with a tap. Overflow tabs (Leads, Tracking, Supplier) live in the sheet. */
    .fr-tabs-inner{
      padding:6px 4px; gap:2px;
      display:flex; justify-content:space-around;
    }
    /* Hide the overflow tabs from the bar itself — they appear inside the "More" sheet instead. */
    .fr-tab-overflow{ display:none !important; }
    /* Show the More button (hidden on desktop). */
    .fr-tab-more-btn{ display:flex !important; }
    .fr-tab-btn{
      flex:1 1 0; min-width:0;
      flex-direction:column; gap:3px; padding:7px 4px 8px; font-size:9.5px;
      border-bottom:none; margin-bottom:0; border-radius:12px; letter-spacing:.02em;
    }
    /* Use the short label on mobile so names don't overlap. Replaces the full text via data-short. */
    .fr-tab-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
    .fr-tab-label[data-short]{ font-size:0; }
    .fr-tab-label[data-short]::after{
      content:attr(data-short); font-size:9.5px; display:block;
    }
    .fr-tab-icon svg{ width:22px; height:22px; }
    .fr-tab-btn.active{ background:#e3edfa; color:var(--accent-dark); border-bottom:none; }
    /* keep page content from ever hiding behind the fixed bottom nav */
    .fr-root{ padding-bottom:76px; }
  }

  .fr-doc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
  .fr-doc-card{
    display:block; border:1.5px solid var(--rib); border-radius:6px; padding:18px; text-decoration:none;
    background:#fbfaf6; transition:border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .fr-doc-card:hover{ border-color:var(--accent); background:#fff; transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,37,87,.10); }
  .fr-doc-icon{ font-size:26px; margin-bottom:10px; }
  .fr-doc-title{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--steel-900); margin-bottom:4px; }
  .fr-doc-sub{ font-size:12px; color:var(--steel-600); line-height:1.4; }

  .fr-photo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .fr-photo-card{
    display:block; border:1.5px solid var(--rib); border-radius:6px; overflow:hidden; aspect-ratio:1/1.05;
    background:var(--steel-100); padding:0; cursor:pointer; width:100%;
    transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .fr-photo-card:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,37,87,.14); }
  .fr-photo-card img{ width:100%; height:100%; object-fit:cover; display:block; }

  .fr-lightbox{
    display:none; position:fixed; inset:0; background:rgba(15,20,30,.9); z-index:1100;
    align-items:center; justify-content:center; padding:32px;
  }
  .fr-lightbox.open{ display:flex; }
  .fr-lightbox img{ max-width:100%; max-height:100%; border-radius:6px; box-shadow:0 20px 60px rgba(0,0,0,.4); }
  .fr-lightbox-close{
    position:absolute; top:18px; right:22px; background:rgba(255,255,255,.15); border:none; color:#fff;
    font-size:26px; line-height:1; width:40px; height:40px; border-radius:50%; cursor:pointer;
  }
  .fr-lightbox-close:hover{ background:rgba(255,255,255,.3); }

  .fr-preview-overlay{
    display:none; position:fixed; inset:0; background:rgba(15,20,30,.7); z-index:1200;
    align-items:center; justify-content:center; padding:20px;
  }
  .fr-preview-overlay.open{ display:flex; }
  .fr-preview-modal{
    background:#fff; border-radius:8px; max-width:640px; width:100%; padding:24px; position:relative;
    box-shadow:0 20px 60px rgba(0,0,0,.3);
  }
  .fr-preview-close{
    position:absolute; top:12px; right:14px; background:none; border:none; font-size:22px;
    line-height:1; cursor:pointer; color:var(--steel-600); padding:4px;
  }
  .fr-preview-close:hover{ color:var(--steel-900); }
  .fr-preview-canvas-wrap{ border:1px solid var(--rib); border-radius:6px; overflow:hidden; margin-top:10px; }
  .fr-preview-canvas-wrap canvas{ width:100%; height:auto; display:block; }
  .fr-preview-actions{ margin-top:16px; }

  .fr-doc-overlay{
    display:none; position:fixed; inset:0; background:#525659; z-index:1300;
    flex-direction:column;
  }
  .fr-doc-overlay.open{ display:flex; }
  .fr-doc-viewer-bar{
    display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--steel-900);
    flex-shrink:0; flex-wrap:wrap;
  }
  .fr-doc-viewer-title{ color:#fff; font-family:var(--font-display); font-weight:700; font-size:13px; flex:1; min-width:100px; }
  .fr-doc-viewer-download{
    color:#fff; text-decoration:none; font-size:12.5px; font-weight:700; border:1.5px solid rgba(255,255,255,.4);
    border-radius:4px; padding:7px 12px;
  }
  .fr-doc-viewer-download:hover{ background:rgba(255,255,255,.12); }
  .fr-doc-viewer-close{
    background:var(--accent); border:none; color:#fff; font-weight:700; font-size:12.5px;
    border-radius:4px; padding:7px 14px; cursor:pointer; display:flex; align-items:center; gap:4px;
  }
  .fr-doc-viewer-close:hover{ background:var(--accent-dark); }
  .fr-doc-viewer-frame{ flex:1; width:100%; border:none; background:#525659; }

  .fr-track-view-toggle{ display:flex; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
  .fr-track-view-btn{
    background:#fff; border:1.5px solid var(--rib); color:var(--steel-600); border-radius:20px;
    padding:7px 16px; font-family:var(--font-body); font-weight:700; font-size:12.5px; cursor:pointer;
  }
  .fr-track-view-btn.active{ background:var(--steel-900); border-color:var(--steel-900); color:#fff; }
  .fr-track-scroll-outer{ position:relative; }
  .fr-track-table-wrap{
    overflow-x:auto; margin-top:14px; position:relative;
    -webkit-overflow-scrolling:touch;
  }
  /* Right-edge fade: a soft cue that the table scrolls sideways to reveal more columns. */
  .fr-track-scroll-outer::after{
    content:""; position:absolute; top:0; right:0; bottom:0; width:24px;
    pointer-events:none; z-index:2;
    background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.92));
  }
  /* Small "swipe for more" hint, shown only on narrow screens where scrolling is actually needed. */
  .fr-track-swipe-hint{ display:none; }
  @media (max-width:640px){
    .fr-track-swipe-hint{
      display:block; text-align:right; font-size:11px; color:var(--steel-600);
      margin:6px 2px 0; font-style:italic; letter-spacing:.02em;
    }
    /* The grey scroll-indicator bar is rendered as a static element below the table
       (.fr-track-scrollbar) so it's reliably visible on iOS. Native scrollbar hidden there. */
  }
  /* Static grey scroll indicator (guaranteed visible on iOS where native scrollbars hide). */
  .fr-track-scrollbar{ display:none; }
  @media (max-width:640px){
    .fr-track-table-wrap{ scrollbar-width:none; }
    .fr-track-table-wrap::-webkit-scrollbar{ display:none; }
    .fr-track-scrollbar{
      display:block; height:5px; border-radius:999px; background:#e6e9f0;
      margin:8px 2px 0; position:relative; overflow:hidden;
    }
    .fr-track-scrollbar-thumb{
      position:absolute; left:0; top:0; bottom:0; width:42%;
      background:#b9c2d4; border-radius:999px;
      transition:left .05s linear;
    }
  }
  .fr-track-table{ width:100%; border-collapse:collapse; font-size:13px; white-space:nowrap; }
  .fr-track-table th{
    text-align:left; font-family:var(--font-display); font-size:11px; text-transform:uppercase;
    letter-spacing:.03em; color:var(--steel-600); padding:8px 12px; border-bottom:2px solid var(--rib);
  }
  .fr-track-table td{ padding:10px 12px; border-bottom:1px solid var(--rib); color:var(--steel-900); }
  .fr-track-table tbody tr:hover{ background:#faf8f2; }
  .fr-badge{
    display:inline-block; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.02em;
  }
  .fr-badge-green{ background:#dff0da; color:#2e6b1f; }
  .fr-badge-amber{ background:#fbe9c8; color:#8a5a00; }
  .fr-badge-red{ background:#fbdada; color:#a3211c; }
  .fr-track-manage-btn{
    background:none; border:1.5px solid var(--steel-900); color:var(--steel-900); border-radius:4px;
    padding:5px 12px; font-weight:700; font-size:11.5px; cursor:pointer; font-family:var(--font-body);
  }
  .fr-track-manage-btn:hover{ background:var(--steel-900); color:#fff; }
  .fr-track-delete-btn{
    background:none; border:1.5px solid var(--error); color:var(--error); border-radius:4px;
    padding:5px 12px; font-weight:700; font-size:11.5px; cursor:pointer; font-family:var(--font-body);
    margin-left:6px;
  }
  .fr-track-delete-btn:hover{ background:var(--error); color:#fff; }
  .fr-track-install-btn{
    background:none; border:1.5px solid #1a7a3c; color:#1a7a3c; border-radius:4px;
    padding:5px 12px; font-weight:700; font-size:11.5px; cursor:pointer; font-family:var(--font-body);
    white-space:nowrap;
  }
  .fr-track-install-btn:hover:not(:disabled){ background:#1a7a3c; color:#fff; }
  .fr-track-install-btn:disabled{ opacity:.45; cursor:default; }
  .fr-track-installed{
    display:inline-block; color:#1a7a3c; font-weight:700; font-size:11.5px;
    font-family:var(--font-body); white-space:nowrap;
  }
  .fr-track-notinstalled{ color:var(--steel-600); font-size:13px; }
  .fr-track-warranty-btn{
    background:none; border:1.5px solid var(--accent-dark); color:var(--accent-dark); border-radius:4px;
    padding:5px 12px; font-weight:700; font-size:11.5px; cursor:pointer; font-family:var(--font-body);
    white-space:nowrap;
  }
  .fr-track-warranty-btn:hover{ background:var(--accent-dark); color:#fff; }
  /* Warranty share popup */
  .fr-warranty-overlay{
    position:fixed; inset:0; z-index:1100; background:rgba(15,37,87,.42);
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .fr-warranty-modal{
    position:relative; background:#fff; border-radius:16px; padding:26px 24px; width:100%; max-width:340px;
    text-align:center; box-shadow:0 14px 44px rgba(15,37,87,.3);
  }
  .fr-warranty-close{
    position:absolute; top:10px; right:14px; background:none; border:none; font-size:26px; line-height:1;
    color:var(--steel-600); cursor:pointer;
  }
  .fr-warranty-title{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--steel-900); }
  .fr-warranty-sub{ font-size:13px; color:var(--steel-600); margin:8px 0 18px; line-height:1.4; }
  .fr-warranty-qr{ display:flex; justify-content:center; margin-bottom:16px; }
  .fr-warranty-qr svg{ border-radius:8px; }
  .fr-warranty-url{
    font-size:11.5px; color:var(--accent-dark); word-break:break-all; margin-bottom:18px;
    background:#eef3fb; padding:8px 10px; border-radius:8px;
  }
  .fr-warranty-actions{ display:flex; gap:10px; }
  .fr-warranty-copy, .fr-warranty-share{
    flex:1; border-radius:8px; padding:11px; font-weight:700; font-size:13px; cursor:pointer;
    font-family:var(--font-body); border:1.5px solid var(--accent-dark);
  }
  .fr-warranty-copy{ background:none; color:var(--accent-dark); }
  .fr-warranty-copy:hover{ background:#eef3fb; }
  .fr-warranty-share{ background:var(--accent-dark); color:#fff; border-color:var(--accent-dark); }
  /* Install-date picker modal */
  .fr-installdate-overlay{
    position:fixed; inset:0; z-index:1100; background:rgba(15,37,87,.38);
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .fr-installdate-modal{
    background:#fff; border-radius:14px; padding:22px; width:100%; max-width:320px;
    box-shadow:0 12px 40px rgba(15,37,87,.28);
  }
  .fr-installdate-title{
    font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--steel-900); margin-bottom:12px;
  }
  .fr-installdate-input{
    width:100%; padding:11px 12px; border:1.5px solid var(--rib); border-radius:8px;
    font-size:15px; font-family:var(--font-body); margin-bottom:16px;
  }
  .fr-installdate-actions{ display:flex; gap:10px; justify-content:flex-end; }
  .fr-installdate-cancel{
    background:none; border:1.5px solid var(--rib); color:var(--steel-600); border-radius:8px;
    padding:9px 16px; font-weight:700; font-size:13px; cursor:pointer; font-family:var(--font-body);
  }
  .fr-installdate-confirm{
    background:#1a7a3c; border:none; color:#fff; border-radius:8px;
    padding:9px 18px; font-weight:700; font-size:13px; cursor:pointer; font-family:var(--font-body);
  }
  .fr-track-edit-body{ flex:1; overflow-y:auto; background:#fff; padding:24px; }
  .fr-track-edit-section{ max-width:640px; margin:0 auto 28px; }
  .fr-track-edit-section h3{
    font-family:var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:.03em;
    color:var(--steel-600); margin:0 0 12px;
  }
  .fr-track-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
  .fr-track-row label{ font-size:13px; font-weight:600; color:var(--steel-900); min-width:150px; }
  .fr-track-row input[type=date], .fr-track-row select{
    font-family:var(--font-body); font-size:13px; padding:6px 8px; border:1.5px solid var(--rib);
    border-radius:4px; background:#fff;
  }
  .fr-track-supplier-card{
    border:1.5px solid var(--rib); border-radius:6px; padding:14px; margin-bottom:10px; background:#fbfaf6;
  }
  .fr-track-supplier-card h4{ margin:0 0 10px; font-size:13px; font-family:var(--font-display); }
  .fr-track-save-btn{
    background:var(--accent); color:#fff; border:none; border-radius:5px; padding:10px 18px;
    font-weight:700; font-size:13px; cursor:pointer; font-family:var(--font-body);
  }
  .fr-track-save-btn:hover{ background:var(--accent-dark); }
  .fr-track-save-status{ font-size:12px; margin-top:8px; min-height:16px; }

  .fr-supplier-dropzone{
    border:2.5px dashed var(--rib); border-radius:8px; padding:36px 20px; text-align:center;
    margin-top:16px; cursor:pointer; transition:border-color .15s ease, background .15s ease;
  }
  .fr-supplier-dropzone:hover, .fr-supplier-dropzone.dragover{ border-color:var(--accent); background:#f5f9ff; }
  .fr-supplier-drop-icon{ font-size:30px; margin-bottom:8px; }
  .fr-supplier-drop-text{ font-size:14px; color:var(--steel-600); }
  .fr-supplier-drop-link{ color:var(--accent-dark); font-weight:700; text-decoration:underline; }
  .fr-supplier-or{ text-align:center; font-size:12px; color:var(--steel-600); margin:14px 0; text-transform:uppercase; letter-spacing:.05em; }
  .fr-supplier-manual-row{ display:flex; gap:10px; max-width:420px; margin:0 auto; }
  .fr-supplier-manual-row input{
    flex:1; font-family:var(--font-body); font-size:14px; padding:12px 14px; border:1.5px solid var(--rib);
    border-radius:5px;
  }
  .fr-supplier-status{ text-align:center; font-size:13px; margin-top:16px; min-height:18px; color:var(--steel-600); }
  .fr-supplier-status.err{ color:var(--error); }
  .fr-supplier-status.ok{ color:#2e6b1f; }

  .fr-supplier-job-summary{
    background:#f5f9ff; border:1.5px solid #cfe0f7; border-radius:8px; padding:16px 20px; margin-top:20px;
    font-size:13px; line-height:1.7;
  }
  .fr-supplier-job-summary strong{ color:var(--steel-900); }
  .fr-supplier-pdf-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:18px; }
  .fr-supplier-pdf-card{
    border:1.5px solid var(--rib); border-radius:8px; padding:20px; text-align:center; background:#fbfaf6;
  }
  .fr-supplier-pdf-card h4{ font-family:var(--font-display); font-size:15px; margin:0 0 6px; }
  .fr-supplier-pdf-card .line-count{ font-size:12px; color:var(--steel-600); margin-bottom:14px; }
  .fr-supplier-warning{
    background:#fbe9c8; border:1.5px solid #e8c988; border-radius:6px; padding:10px 14px; font-size:12px;
    color:#8a5a00; margin-top:14px; text-align:left;
  }

  .fr-eyebrow{
    font-family:var(--font-display); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--accent-dark); font-weight:700; margin-bottom:6px;
  }
  .fr-title{
    font-family:var(--font-display); font-weight:800; font-size:clamp(24px,5vw,34px); line-height:1.05; margin:0;
    letter-spacing:-0.01em; color:var(--steel-900);
  }
  .fr-sub{ font-size:12px; color:var(--steel-600); margin-top:6px; max-width:560px; line-height:1.45; }
  .fr-whoami{
    display:inline-flex; align-items:center; gap:6px; margin-top:10px; background:#eaf1fb;
    border:1px solid #cfe0f7; color:var(--accent-dark); font-family:var(--font-display);
    font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em;
    padding:5px 12px; border-radius:14px;
  }
  .fr-whoami::before{ content:'\1F464'; font-size:12px; }
  .fr-whoami-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .fr-logout-btn{
    margin-top:10px; background:none; border:1px solid #cfd6e4; color:var(--steel-600);
    font-family:var(--font-display); font-weight:700; font-size:11px; text-transform:uppercase;
    letter-spacing:.03em; padding:5px 14px; border-radius:14px; cursor:pointer;
    transition:background .12s ease, color .12s ease, border-color .12s ease;
  }
  .fr-logout-btn:hover{ background:#f4e9e9; border-color:#e0b4b4; color:#b3261e; }
  @media (max-width:480px){ .fr-logo{ height:36px; } .fr-title{ font-size:22px; } .fr-sub{ font-size:11px; } }

  .fr-install-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:0; }
  .fr-footer{ background:var(--panel); margin-top:28px; padding:22px 0; border-top:3px solid transparent; border-image:linear-gradient(90deg,#AACBF2,#4F86E8) 1; }
  .fr-footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
  .fr-footer-label{ font-family:var(--font-display); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--steel-600); }
  .fr-footer-label-suffix{ display:none; }
  .fr-footer .fr-install-btn{ background:#fff; border-color:var(--steel-900); color:var(--steel-900); }
  .fr-footer .fr-install-btn:hover{ background:var(--steel-900); color:#fff; }
  .fr-footer-left{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
  .fr-role-toggle-btn{
    background:#fff3d6; border:1.5px solid #e0b84a; color:#7a5b00; border-radius:16px;
    padding:5px 14px; font-family:var(--font-body); font-weight:700; font-size:11.5px; cursor:pointer;
  }
  .fr-role-toggle-btn:hover{ background:#ffe9b3; }
  .fr-install-btn{
    background:#fff; border:1.5px solid var(--steel-900); color:var(--steel-900);
    font-family:var(--font-body); font-weight:700; font-size:12.5px; padding:9px 14px;
    border-radius:4px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  }
  .fr-install-btn:hover{ background:var(--steel-900); color:#fff; }
  .fr-install-short{ display:none; }
  @media (max-width:640px){
    .fr-install-row{ flex-wrap:nowrap; gap:8px; width:100%; }
    .fr-install-btn{ flex:1; justify-content:center; padding:8px 6px; font-size:11px; }
    .fr-install-full{ display:none; }
    .fr-install-short{ display:inline; }
    .fr-footer-label-suffix{ display:inline; }
  }
  .fr-install-overlay{
    display:none; position:fixed; inset:0; background:rgba(15,20,30,.55); z-index:1000;
    align-items:center; justify-content:center; padding:20px;
  }
  .fr-install-overlay.open{ display:flex; }
  .fr-install-modal{
    background:#fff; border-radius:8px; max-width:420px; width:100%; padding:24px;
    position:relative; box-shadow:0 20px 60px rgba(0,0,0,.3);
  }
  .fr-install-close{
    position:absolute; top:12px; right:14px; background:none; border:none; font-size:22px;
    line-height:1; cursor:pointer; color:var(--steel-600); padding:4px;
  }
  .fr-install-close:hover{ color:var(--steel-900); }
  .fr-install-modal-title{ font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--steel-900); margin:0 0 14px; }
  .fr-install-steps{ list-style:none; margin:0; padding:0; counter-reset:step; }
  .fr-install-steps li{
    counter-increment:step; display:flex; gap:12px; align-items:flex-start;
    padding:10px 0; border-bottom:1px solid var(--rib); font-size:14px; color:var(--steel-900); line-height:1.4;
  }
  .fr-install-steps li:last-child{ border-bottom:none; }
  .fr-install-steps li::before{
    content:counter(step); flex-shrink:0; width:24px; height:24px; border-radius:50%;
    background:var(--accent); color:#fff; font-weight:800; font-size:12px;
    display:flex; align-items:center; justify-content:center;
  }
  .fr-install-steps b{ color:var(--accent-dark); }
  .fr-install-note{ font-size:12px; color:var(--steel-600); margin-top:14px; }

  .fr-wrap{ max-width:920px; margin:0 auto; padding:0 20px; }

  .fr-section{
    background:var(--panel);
    border:1px solid var(--rib);
    border-radius:6px;
    margin-top:20px;
    overflow:hidden;
    box-shadow:0 1px 2px rgba(15,37,87,.04), 0 4px 14px rgba(15,37,87,.04);
    transition:box-shadow .15s ease;
  }
  .fr-section-head{
    display:flex; align-items:baseline; gap:10px;
    padding:14px 18px; border-bottom:1px solid var(--rib);
    background:var(--steel-100);
  }
  .fr-section-num{
    font-family:var(--font-mono); font-weight:700; font-size:12px; color:#fff;
    background:var(--steel-900); border-radius:3px; padding:3px 7px;
  }
  .fr-section-title{ font-family:var(--font-display); font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.02em; color:var(--steel-900); }
  .fr-section-body{ padding:18px; }

  .fr-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
  .fr-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  @media (max-width:640px){ .fr-grid,.fr-grid3{ grid-template-columns:1fr; } }

  .fr-field label{
    display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:var(--steel-600); margin-bottom:5px;
  }
  .fr-field input[type=text], .fr-field input[type=email], .fr-field input[type=tel], .fr-field input[type=date], .fr-field select, .fr-field textarea{
    width:100%; padding:9px 10px; border:1.5px solid var(--rib); border-radius:3px;
    font-family:var(--font-body); font-size:14px; background:#fbfaf6; color:var(--steel-900);
    box-sizing:border-box; max-width:100%;
  }
  /* iOS Safari has a known bug where date inputs ignore width:100% and size themselves to fit
     the displayed date text, overflowing their container. This is the standard fix: forcing the
     intrinsic width down to near-zero so min-width:100% (which IS respected) takes over entirely. */
  .fr-field input[type=date]{
    width:1px; min-width:100%; display:block;
  }
  .fr-field input:focus, .fr-field select:focus, .fr-field textarea:focus{
    outline:none; border-color:var(--accent); background:#fff;
  }
  .fr-field textarea{ resize:vertical; min-height:56px; }
  .fr-hint{ font-size:11px; color:var(--steel-600); margin-top:4px; }

  .fr-required::after{ content:" *"; color:var(--error); }

  .fr-note{
    font-size:12px; color:var(--steel-600); background:var(--steel-100);
    border-left:3px solid var(--accent); padding:8px 10px; border-radius:2px; margin-bottom:14px;
  }

  /* extra parts table */
  .fr-parts-scroll{ overflow-x:visible; }
  .fr-parts-table{ width:100%; border-collapse:collapse; font-size:13px; }
  .fr-parts-table th{
    text-align:left; font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase;
    letter-spacing:.06em; color:var(--steel-600); padding:6px 8px; border-bottom:2px solid var(--steel-900);
  }
  .fr-parts-table td{ padding:7px 8px; border-bottom:1px solid var(--rib); vertical-align:middle; }
  .fr-parts-table tr:last-child td{ border-bottom:none; }
  .fr-parts-name{ font-weight:600; }
  .fr-parts-base{ font-family:var(--font-mono); color:var(--steel-600); text-align:center; }
  .fr-parts-total{ font-family:var(--font-mono); font-weight:700; font-size:14px; margin-left:4px; white-space:nowrap; color:var(--steel-900); }
  .fr-step-equals{ color:var(--steel-600); margin-left:8px; margin-right:2px; font-size:12px; }
  .fr-stepper{ display:flex; align-items:center; justify-content:center; gap:0; white-space:nowrap; }
  .fr-step-btn{
    width:26px; height:26px; border:1.5px solid var(--rib); background:#fff; color:var(--steel-900);
    font-family:var(--font-body); font-size:15px; font-weight:700; cursor:pointer; line-height:1;
    display:flex; align-items:center; justify-content:center; user-select:none; padding:0; flex-shrink:0;
  }
  .fr-step-btn:first-child{ border-radius:3px 0 0 3px; border-right:none; }
  .fr-step-btn:last-child{ border-radius:0 3px 3px 0; border-left:none; }
  .fr-step-btn:hover{ background:var(--steel-100); }
  .fr-step-btn:active{ background:var(--accent); color:#fff; border-color:var(--accent); }
  .fr-step-btn:disabled{ opacity:.35; cursor:not-allowed; background:#fff; color:var(--steel-900); }
  .fr-step-val{
    min-width:38px; text-align:center; font-family:var(--font-mono); font-weight:700; font-size:13px;
    border-top:1.5px solid var(--rib); border-bottom:1.5px solid var(--rib); padding:5px 2px; flex-shrink:0;
    color:var(--steel-900);
  }
  .fr-step-val.fr-step-neg{ color:var(--accent-dark); }

  /* On narrow screens, a 3-column table has no room to show everything at once — turn each row into
     a stacked card instead, so the running total sits directly under the buttons with no scrolling. */
  @media (max-width:640px){
    .fr-parts-table thead{ display:none; }
    .fr-parts-table, .fr-parts-table tbody, .fr-parts-table tr, .fr-parts-table td{ display:block; width:100%; }
    .fr-parts-table tr{ border:1.5px solid var(--rib); border-radius:4px; margin-bottom:10px; padding:10px 12px; }
    .fr-parts-table tr:last-child{ margin-bottom:0; }
    .fr-parts-table td{ padding:0; border-bottom:none; }
    .fr-parts-name{ font-size:14px; margin-bottom:8px; }
    .fr-parts-base{ text-align:left; font-size:13px; }
    .fr-parts-base::before{ content:"Calculated: "; font-family:var(--font-body); font-weight:600; color:var(--steel-900); }
    .fr-parts-extra{ margin-top:8px; }
    .fr-stepper{ justify-content:flex-start; }
    .fr-step-val{ min-width:44px; }
    .fr-parts-total{ font-size:16px; }
  }

  /* summary */
  .fr-summary-section .fr-section-head{ background:var(--steel-900); color:#fff; border-bottom:none; }
  .fr-summary-section .fr-section-title{ color:#fff; }
  .fr-summary-section .fr-section-num{ background:var(--accent); }
  .fr-summary-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
  @media (max-width:640px){ .fr-summary-grid{ grid-template-columns:1fr; } }
  .fr-sum-block + .fr-sum-block{ margin-top:18px; }
  .fr-sum-block-title{
    font-family:var(--font-display); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--accent-dark); font-weight:700; margin-bottom:8px; padding-bottom:6px;
    border-bottom:1px solid var(--rib);
  }
  .fr-sum-row{ display:flex; justify-content:space-between; align-items:baseline; padding:5px 0; font-size:13.5px; }
  .fr-sum-row .fr-val{ font-family:var(--font-mono); font-weight:600; }
  .fr-sum-row.fr-total{ border-top:1.5px solid var(--steel-900); margin-top:4px; padding-top:8px; font-weight:800; font-size:15px; }
  .fr-sum-row.fr-total .fr-val{ color:var(--accent-dark); }
  .fr-rrp-highlight{
    background:linear-gradient(135deg,#EEF3FC,#DCE7FA); border:1.5px solid var(--accent);
    border-radius:4px; padding:14px; margin-top:16px; grid-column:1/-1;
  }
  .fr-rrp-highlight .fr-sum-row{ font-size:14px; }
  .fr-rrp-main{ font-family:var(--font-mono); font-weight:800; font-size:22px; color:var(--accent-dark); }

  .fr-actions{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
  .fr-btn{
    flex:1; min-width:220px; padding:14px 18px; border-radius:5px; border:none; cursor:pointer;
    font-family:var(--font-body); font-weight:700; font-size:14px; letter-spacing:.01em;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:transform .08s ease, box-shadow .15s ease;
  }
  .fr-btn:active{ transform:scale(.98); }
  .fr-btn-primary{ background:var(--accent); color:#fff; }
  .fr-btn-primary:hover{ background:var(--accent-dark); box-shadow:0 6px 16px rgba(79,134,232,.35); }
  .fr-btn-secondary{ background:var(--steel-900); color:#fff; }
  .fr-btn-secondary:hover{ background:var(--steel-800); box-shadow:0 6px 16px rgba(31,41,88,.35); }
  .fr-btn:disabled{ opacity:.5; cursor:not-allowed; }

  .fr-status{ font-size:12px; margin-top:10px; font-family:var(--font-mono); }
  .fr-status.ok{ color:var(--good); }
  .fr-status.err{ color:var(--error); }

  .fr-toggle{
    background:none; border:1.5px solid var(--steel-900); color:var(--steel-900); border-radius:3px;
    font-size:11px; font-weight:700; padding:5px 10px; cursor:pointer; font-family:var(--font-mono);
    text-transform:uppercase; letter-spacing:.05em;
  }
  .fr-toggle:hover{ background:var(--steel-900); color:#fff; }

  /* nested sub-panels within Other Parts (Metal / Brackets / Sheets / Other Parts) */
  .fr-subsection{ border:1px solid var(--rib); border-radius:4px; margin-bottom:10px; overflow:hidden; }
  .fr-subsection:last-child{ margin-bottom:0; }
  .fr-subsection-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:10px 14px; background:var(--steel-100); cursor:default;
  }
  .fr-subsection-title{ font-family:var(--font-display); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.02em; color:var(--steel-900); }
  .fr-subsection-count{ font-family:var(--font-mono); font-size:11px; color:var(--steel-600); margin-left:8px; }
  .fr-subsection-body{ padding:12px 14px; }
  .fr-subsection-nested{ margin-left:16px; border-color:var(--rib); }
  .fr-subsection-nested .fr-subsection-head{ background:#fbfaf6; padding:8px 12px; }
  .fr-subsection-nested .fr-subsection-title{ font-size:12.5px; font-weight:600; }
  .fr-subsection-nested .fr-subsection-body{ padding:10px 12px; }
  @media (max-width:640px){ .fr-subsection-nested{ margin-left:8px; } }

  .fr-gate{
    position:fixed; inset:0; background:var(--cream); z-index:2000;
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .fr-gate.unlocked{ display:none; }
  .fr-gate-card{
    background:#fff; border:1px solid var(--rib); border-radius:8px; max-width:360px; width:100%;
    padding:32px 28px; text-align:center; box-shadow:0 10px 40px rgba(15,37,87,.1);
  }
  .fr-gate-logo{ height:30px; margin:0 auto 20px; display:block; }
  .fr-gate-title{ font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--steel-900); margin:0 0 6px; }
  .fr-gate-sub{ font-size:13px; color:var(--steel-600); margin:0 0 20px; }
  .fr-gate input[type=password], .fr-gate input[type=email]{
    width:100%; padding:11px 12px; border:1.5px solid var(--rib); border-radius:4px;
    font-size:16px; text-align:center; letter-spacing:.02em; margin-bottom:12px; font-family:var(--font-body);
  }
  .fr-gate input[type=password]:focus, .fr-gate input[type=email]:focus{ outline:none; border-color:var(--accent); }
  .fr-gate-btn{
    width:100%; background:var(--accent); color:#fff; border:none; border-radius:4px;
    font-family:var(--font-body); font-weight:700; font-size:14px; padding:12px; cursor:pointer;
  }
  .fr-gate-btn:hover{ background:var(--accent-dark); }
  .fr-gate-error{ color:var(--error); font-size:12px; margin-top:10px; min-height:14px; }

  /* ---------- Installation completion photos ---------- */
  .fr-photos-overlay{
    position:fixed; inset:0; z-index:1100; background:rgba(15,37,87,.42);
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .fr-photos-modal{
    position:relative; background:#fff; border-radius:16px; padding:26px 24px; width:100%; max-width:380px;
    box-shadow:0 14px 44px rgba(15,37,87,.3); max-height:88vh; overflow-y:auto;
  }
  .fr-photos-close{
    position:absolute; top:10px; right:14px; background:none; border:none; font-size:26px; line-height:1;
    color:var(--steel-600); cursor:pointer;
  }
  .fr-photos-title{
    font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--steel-900);
    padding-right:24px; line-height:1.3;
  }
  .fr-photos-sub{ font-size:13px; color:var(--steel-600); margin:8px 0 16px; line-height:1.45; }
  .fr-photos-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px; margin-bottom:14px;
  }
  .fr-photos-loading, .fr-photos-empty{
    grid-column:1 / -1; font-size:13px; color:var(--steel-600); text-align:center;
    padding:22px 10px; background:var(--steel-100); border-radius:10px;
  }
  .fr-photo-tile{
    position:relative; aspect-ratio:1 / 1; border-radius:10px; overflow:hidden;
    background:var(--steel-100); border:1px solid var(--rib);
  }
  .fr-photo-tile img{
    width:100%; height:100%; object-fit:cover; display:block; cursor:pointer;
  }
  .fr-photo-tile-bar{
    position:absolute; top:0; right:0; display:flex; gap:2px; padding:4px;
  }
  .fr-photo-dl, .fr-photo-rm{
    width:26px; height:26px; border:none; border-radius:6px; cursor:pointer;
    background:rgba(15,37,87,.62); color:#fff; font-size:15px; line-height:1;
    display:flex; align-items:center; justify-content:center; font-family:var(--font-body);
  }
  .fr-photo-dl:hover{ background:rgba(15,37,87,.85); }
  .fr-photo-rm{ background:rgba(179,38,30,.72); font-size:18px; }
  .fr-photo-rm:hover{ background:rgba(179,38,30,.92); }
  .fr-photos-status{ font-size:12.5px; color:var(--steel-600); min-height:17px; margin-bottom:12px; line-height:1.4; }
  .fr-photos-actions{ display:flex; gap:10px; }
  .fr-photos-add, .fr-photos-done{
    flex:1; border-radius:8px; padding:11px; font-weight:700; font-size:13px; cursor:pointer;
    font-family:var(--font-body); border:1.5px solid var(--accent-dark);
  }
  .fr-photos-add{ background:var(--accent-dark); color:#fff; }
  .fr-photos-add:disabled{ opacity:.45; cursor:default; }
  .fr-photos-done{ background:none; color:var(--accent-dark); }
  .fr-photos-done:hover{ background:#eef3fb; }
  .fr-photos-done:disabled{ opacity:.45; cursor:default; }
  .fr-track-photos-btn{
    background:none; border:1.5px solid var(--accent-dark); color:var(--accent-dark);
    border-radius:6px; padding:5px 10px; font-size:11.5px; font-weight:700; cursor:pointer;
    font-family:var(--font-body); white-space:nowrap;
  }
  .fr-track-photos-btn:hover{ background:#eef3fb; }
  /* Filled-in Photos button = this job already has photos attached */
  .fr-track-photos-btn.has-photos{
    background:var(--accent-dark); color:#fff; border-color:var(--accent-dark);
  }
  .fr-track-photos-btn.has-photos:hover{ background:var(--steel-900); border-color:var(--steel-900); }
  /* Who marked the job installed, shown under the tick */
  .fr-track-markedby{
    display:block; font-size:10.5px; color:var(--steel-600); margin-top:2px; white-space:nowrap;
  }
  .fr-installdate-note{
    font-size:12.5px; color:var(--steel-600); line-height:1.45; margin:8px 0 4px;
  }

  /* ---------- Leads ----------
     Design intent: this is a worklist. Age since last contact is the organising signal, so a
     neglected lead looks different from a fresh one. Each card offers exactly one obvious next
     step; everything else lives in a bottom sheet. Lost leads recede to grey rather than
     shouting in red - the eye should land on what still needs doing. */

  /* Four fixed tiles. Same size whatever the data does; each one filters the list. */
  .fr-lead-tiles{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
  .fr-lead-tile{
    position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
    border:1px solid var(--rib); background:var(--panel); border-radius:10px;
    padding:11px 10px 10px; cursor:pointer; overflow:hidden; text-align:left;
    font-family:var(--font-body);
  }
  .fr-lead-tile::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; }
  .fr-lead-tile[data-s="New"]::before{ background:var(--accent); }
  .fr-lead-tile[data-s="Contacted"]::before{ background:#B8791F; }
  .fr-lead-tile[data-s="Won"]::before{ background:var(--good); }
  .fr-lead-tile[data-s="Lost"]::before{ background:var(--steel-300); }
  .fr-lead-tile-n{
    font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--steel-900);
    line-height:1.1;
  }
  .fr-lead-tile-l{
    font-family:var(--font-mono); font-size:9.5px; letter-spacing:.5px; text-transform:uppercase;
    color:var(--steel-600);
  }
  .fr-lead-tile:hover:not(.empty){ border-color:var(--steel-300); }
  .fr-lead-tile.active{ border-color:var(--steel-900); box-shadow:inset 0 0 0 1px var(--steel-900); }
  .fr-lead-tile.empty{ opacity:.42; cursor:default; }
  .fr-lead-tilebar{
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    font-size:12px; color:var(--steel-600); margin:9px 0 16px;
  }
  .fr-lead-stale{ color:var(--error); font-weight:700; }
  .fr-lead-pipe-clear{
    background:none; border:none; color:var(--accent-dark); cursor:pointer;
    font-size:12px; font-weight:700; padding:0; text-decoration:underline;
    font-family:var(--font-body);
  }

  .fr-lead-search{ position:relative; display:flex; align-items:center; margin-bottom:12px; }
  .fr-lead-search svg{
    position:absolute; left:12px; width:15px; height:15px; stroke:var(--steel-300);
    fill:none; stroke-width:2; stroke-linecap:round; pointer-events:none;
  }
  .fr-lead-search input{
    width:100%; box-sizing:border-box; border:1px solid var(--rib); border-radius:8px;
    padding:10px 34px; font-size:13.5px; font-family:var(--font-body);
    background:var(--panel); color:var(--steel-900);
  }
  .fr-lead-search input::placeholder{ color:var(--steel-300); }
  .fr-lead-search input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
  .fr-lead-search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
  .fr-lead-search button{
    position:absolute; right:8px; width:22px; height:22px; border:none; background:var(--steel-100);
    color:var(--steel-600); border-radius:50%; cursor:pointer; font-size:15px; line-height:1;
    display:flex; align-items:center; justify-content:center; padding:0;
  }

  .fr-leads-list{ display:flex; flex-direction:column; gap:10px; }

  .fr-lead-empty{
    text-align:center; padding:34px 18px; border:1px dashed var(--rib); border-radius:10px;
    color:var(--steel-600); font-size:13.5px; line-height:1.6; background:var(--panel);
  }
  .fr-lead-empty strong{ display:block; font-family:var(--font-display); font-size:15px;
    color:var(--steel-900); margin-bottom:5px; font-weight:700; }

  .fr-lead-card{
    position:relative; background:var(--panel); border:1px solid var(--rib);
    border-radius:10px; padding:14px 16px 14px 18px; overflow:hidden;
  }
  .fr-lead-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; }
  .fr-lead-card[data-s="New"]::before{ background:var(--accent); }
  .fr-lead-card[data-s="Contacted"]::before{ background:#B8791F; }
  .fr-lead-card[data-s="Won"]::before{ background:var(--good); }
  .fr-lead-card[data-s="Lost"]::before{ background:var(--steel-300); }
  .fr-lead-card[data-closed="1"]{ background:#FCFBF7; }
  .fr-lead-card[data-closed="1"] .fr-lead-name{ color:var(--steel-600); }

  .fr-lead-meta{
    font-family:var(--font-mono); font-size:10.5px; letter-spacing:.5px;
    text-transform:uppercase; color:var(--steel-600); margin-bottom:4px;
    display:flex; align-items:center; gap:6px;
  }
  .fr-lead-meta .s-new{ color:var(--accent-dark); font-weight:600; }
  .fr-lead-meta .s-contacted{ color:#B8791F; font-weight:600; }
  .fr-lead-meta .s-won{ color:var(--good); font-weight:600; }
  .fr-lead-meta .s-lost{ color:var(--steel-300); font-weight:600; }
  .fr-lead-stale{ color:var(--error); font-weight:600; }

  .fr-lead-name{
    font-family:var(--font-display); font-weight:700; font-size:17px;
    color:var(--steel-900); line-height:1.25;
  }
  .fr-lead-where{ font-size:13px; color:var(--steel-600); line-height:1.45; margin-top:2px; }

  /* Contact rows: the number dials, the address copies. Nothing opens a mail app. */
  .fr-lead-contact{ margin-top:11px; display:flex; flex-direction:column; gap:7px; }
  .fr-lead-row{ display:flex; gap:7px; align-items:stretch; }
  .fr-lead-detail{
    flex:1; min-width:0; display:flex; align-items:center; gap:9px;
    border:1px solid var(--rib); background:var(--steel-100); border-radius:8px;
    padding:11px 12px; font-size:14px; font-weight:600; color:var(--steel-900);
  }
  .fr-lead-detail span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fr-lead-detail svg{
    flex:none; width:15px; height:15px; stroke:var(--steel-600); fill:none;
    stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
  }
  /* The action sits beside the detail, so each row has exactly one thing to press. */
  .fr-lead-act{
    flex:none; display:flex; align-items:center; justify-content:center; text-decoration:none;
    border:1px solid var(--rib); background:var(--panel); color:var(--steel-600);
    border-radius:8px; min-width:72px; padding:0 14px; font-size:13px; font-weight:700;
    cursor:pointer; font-family:var(--font-body);
  }
  .fr-lead-act:hover{ background:var(--steel-100); color:var(--steel-900); }
  .fr-lead-act-call{
    background:var(--accent-dark); border-color:var(--accent-dark); color:#fff;
  }
  .fr-lead-act-call:hover{ background:var(--steel-900); border-color:var(--steel-900); color:#fff; }
  .fr-lead-copy.copied{ background:var(--good); border-color:var(--good); color:#fff; }

  /* Source / agent / creator as one quiet line rather than a scatter of chips. */
  .fr-lead-facts{
    font-family:var(--font-mono); font-size:10.5px; color:var(--steel-300);
    letter-spacing:.3px; margin-top:11px;
  }

  .fr-lead-lost{
    font-size:12.5px; color:var(--steel-600); margin-top:10px; padding-left:10px;
    border-left:2px solid var(--steel-300);
  }
  .fr-lead-note{
    font-size:12.5px; color:var(--steel-600); margin-top:10px; line-height:1.5;
    padding-left:10px; border-left:2px solid var(--rib); white-space:pre-wrap;
  }
  .fr-lead-note-more{
    font-family:var(--font-mono); font-size:10px; color:var(--steel-300);
    letter-spacing:.4px; margin-top:4px;
  }

  /* One obvious action, plus everything else behind More. No gaps, no wrapping. */
  .fr-lead-actions{
    display:flex; gap:8px; margin-top:14px; padding-top:13px; border-top:1px solid var(--rib);
  }
  .fr-lead-primary{
    flex:1; background:var(--steel-900); border:1px solid var(--steel-900); color:#fff;
    border-radius:8px; padding:12px; font-size:13.5px; font-weight:700; cursor:pointer;
    font-family:var(--font-body);
  }
  .fr-lead-primary:hover{ background:var(--steel-800); }
  .fr-lead-primary-quiet{
    background:var(--panel); color:var(--steel-600); border-color:var(--rib); font-weight:600;
  }
  .fr-lead-primary-quiet:hover{ background:var(--steel-100); color:var(--steel-900); }
  .fr-lead-more{
    flex:none; border:1px solid var(--rib); background:var(--panel); color:var(--steel-600);
    border-radius:8px; padding:12px 18px; font-size:13.5px; font-weight:600; cursor:pointer;
    font-family:var(--font-body);
  }
  .fr-lead-more:hover{ background:var(--steel-100); color:var(--steel-900); }

  /* The More sheet: big, plainly worded choices. */
  .fr-leadmenu{ position:fixed; inset:0; z-index:1200; display:flex; align-items:flex-end; justify-content:center; }
  .fr-leadmenu-backdrop{ position:absolute; inset:0; background:rgba(15,37,87,.42); }
  .fr-leadmenu-panel{
    position:relative; background:var(--panel); width:100%; max-width:440px;
    border-radius:16px 16px 0 0; padding:8px 14px calc(14px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 40px rgba(15,37,87,.25);
  }
  @media (min-width:600px){
    .fr-leadmenu{ align-items:center; }
    .fr-leadmenu-panel{ border-radius:14px; padding-bottom:14px; }
  }
  .fr-leadmenu-head{
    font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--steel-900);
    text-align:center; padding:14px 8px 12px; border-bottom:1px solid var(--rib); margin-bottom:6px;
  }
  .fr-leadmenu-item{
    display:block; width:100%; text-align:left; border:none; background:none;
    padding:15px 10px; font-size:15px; color:var(--steel-900); cursor:pointer;
    font-family:var(--font-body); border-radius:8px;
  }
  .fr-leadmenu-item:hover{ background:var(--steel-100); }
  .fr-leadmenu-item.danger{ color:var(--error); }
  .fr-leadmenu-cancel{
    display:block; width:100%; margin-top:6px; border:1px solid var(--rib);
    background:var(--panel); color:var(--steel-600); border-radius:10px; padding:14px;
    font-size:14px; font-weight:700; cursor:pointer; font-family:var(--font-body);
  }

  .fr-lead-form{ display:flex; flex-direction:column; gap:3px; margin-bottom:12px; }
  .fr-lead-form label{
    font-family:var(--font-mono); font-size:10px; font-weight:600; color:var(--steel-600);
    text-transform:uppercase; letter-spacing:.5px; margin-top:9px;
  }
  .fr-lead-form input, .fr-lead-form select, .fr-lead-form textarea{
    border:1px solid var(--rib); border-radius:7px; padding:9px 10px; font-size:13.5px;
    font-family:var(--font-body); background:var(--cream); width:100%; box-sizing:border-box;
  }
  .fr-lead-form input:focus, .fr-lead-form select:focus, .fr-lead-form textarea:focus{
    outline:2px solid var(--accent); outline-offset:1px; background:var(--panel);
  }
  .fr-lead-select{
    border:1px solid var(--rib); border-radius:7px; padding:10px; font-size:13.5px;
    font-family:var(--font-body); width:100%; box-sizing:border-box; margin:10px 0 4px;
    background:var(--cream);
  }

  @media (prefers-reduced-motion: reduce){
    .fr-lead-pipe-seg, .fr-lead-card{ transition:none; }
  }
  .fr-lead-tag-who{ background:#E8EFF7; color:var(--accent-dark); font-weight:600; }
  .fr-lead-search{
    position:relative; display:flex; align-items:center; margin-bottom:14px;
  }
  .fr-lead-search svg{
    position:absolute; left:12px; width:15px; height:15px; stroke:var(--steel-300);
    fill:none; stroke-width:2; stroke-linecap:round; pointer-events:none;
  }
  .fr-lead-search input{
    width:100%; box-sizing:border-box; border:1px solid var(--rib); border-radius:8px;
    padding:10px 34px 10px 34px; font-size:13.5px; font-family:var(--font-body);
    background:var(--panel); color:var(--steel-900);
  }
  .fr-lead-search input::placeholder{ color:var(--steel-300); }
  .fr-lead-search input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
  .fr-lead-search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
  .fr-lead-search button{
    position:absolute; right:8px; width:22px; height:22px; border:none; background:var(--steel-100);
    color:var(--steel-600); border-radius:50%; cursor:pointer; font-size:15px; line-height:1;
    display:flex; align-items:center; justify-content:center; padding:0;
  }
  .fr-lead-search button:hover{ background:var(--rib); }

  /* ---------- Quote vs Order actions ---------- */
  .fr-btn-confirm{
    background:var(--good); color:#fff; border:1.5px solid var(--good);
  }
  .fr-btn-confirm:hover{ background:#186039; border-color:#186039; }
  .fr-actions-hint{
    font-size:12px; color:rgba(255,255,255,.72); line-height:1.55; margin-top:10px;
  }
  .fr-actions-hint strong{ color:#fff; font-weight:700; }
  .fr-confirmed{
    margin-top:16px; background:#fff; border-radius:12px; padding:22px 20px; text-align:center;
  }
  .fr-confirmed-tick{
    width:44px; height:44px; border-radius:50%; background:var(--good); color:#fff;
    font-size:23px; line-height:44px; margin:0 auto 12px;
  }
  .fr-confirmed-title{
    font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--steel-900);
  }
  .fr-confirmed-sub{ font-size:13px; color:var(--steel-600); margin-top:6px; line-height:1.5; }
  .fr-confirmed-actions{
    display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px;
  }
  .fr-confirmed-actions .fr-btn{ flex:0 1 auto; min-width:170px; }
  /* Unseen-order count on the Tracking tab (managers only) */
  .fr-tab-badge{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; padding:0 5px; border-radius:9px;
    background:var(--error); color:#fff; font-family:var(--font-mono);
    font-size:10.5px; font-weight:700; line-height:1; margin-left:2px;
  }
  .fr-track-new{
    display:inline-block; background:var(--error); color:#fff; font-family:var(--font-mono);
    font-size:9.5px; font-weight:700; letter-spacing:.4px; padding:2px 6px;
    border-radius:4px; margin-left:6px; vertical-align:middle;
  }
  .fr-neworder-badge{
    width:42px; height:42px; border-radius:50%; background:var(--error); color:#fff;
    font-family:var(--font-mono); font-size:18px; font-weight:700;
    display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
  }
  .fr-neworder-list{
    list-style:none; padding:0; margin:12px 0 4px; font-size:12.5px; color:var(--steel-600);
    line-height:1.7; text-align:left;
  }
  .fr-neworder-list li{
    padding:6px 10px; background:var(--steel-100); border-radius:6px; margin-bottom:5px;
  }
  .fr-neworder-list strong{ color:var(--steel-900); }
  /* My details screen */
  .fr-profile-locked, .fr-profile-hint{
    font-size:11.5px; color:var(--steel-600); line-height:1.5; margin-top:5px;
  }
  .fr-lead-form input:disabled, .fr-lead-form textarea:disabled{
    background:var(--steel-100); color:var(--steel-600); cursor:not-allowed;
  }

  /* ---------- Header account control ----------
     A workflow tool's header should be a thin utility bar, not a landing page. Brand left,
     account right, and the screen below gets the room. The old version spent three pills and a
     paragraph of instructions on every screen, on every visit. */
  .fr-header-top{ display:flex; align-items:center; gap:12px; }
  .fr-account{ position:relative; margin-left:auto; }
  .fr-account-btn{
    display:flex; align-items:center; gap:9px; cursor:pointer;
    border:1px solid var(--rib); background:var(--panel); border-radius:999px;
    padding:5px 12px 5px 5px; font-family:var(--font-body);
  }
  .fr-account-btn:hover{ border-color:var(--steel-300); }
  .fr-avatar{
    width:30px; height:30px; border-radius:50%; flex:none;
    background:var(--steel-900); color:#fff; font-family:var(--font-mono);
    font-size:11.5px; font-weight:700; letter-spacing:.5px;
    display:flex; align-items:center; justify-content:center;
  }
  .fr-account-name{
    font-size:13px; font-weight:600; color:var(--steel-900);
    max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .fr-account-chev{
    width:14px; height:14px; flex:none; stroke:var(--steel-600); fill:none;
    stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  }
  .fr-account-menu{
    position:absolute; right:0; top:calc(100% + 8px); z-index:900;
    background:var(--panel); border:1px solid var(--rib); border-radius:11px;
    box-shadow:0 10px 34px rgba(15,37,87,.16); min-width:230px; padding:6px;
  }
  .fr-account-head{
    display:flex; flex-direction:column; gap:2px; padding:10px 11px 11px;
    border-bottom:1px solid var(--rib); margin-bottom:5px;
  }
  .fr-account-head-name{ font-size:13.5px; font-weight:700; color:var(--steel-900); }
  .fr-account-head-mail{
    font-family:var(--font-mono); font-size:10.5px; color:var(--steel-600);
    overflow:hidden; text-overflow:ellipsis;
  }
  .fr-account-item{
    display:block; width:100%; text-align:left; border:none; background:none;
    padding:11px; font-size:13.5px; color:var(--steel-900); cursor:pointer;
    font-family:var(--font-body); border-radius:7px;
  }
  .fr-account-item:hover{ background:var(--steel-100); }
  .fr-account-item-out{ color:var(--error); }
  .fr-req-note{
    margin-left:auto; font-family:var(--font-mono); font-size:10px; letter-spacing:.4px;
    color:var(--steel-600);
  }
  @media (max-width:600px){
    /* On a phone the name is the first thing to go — the initials still identify who's in. */
    .fr-account-name{ display:none; }
    .fr-account-btn{ padding:5px; }
    .fr-account-chev{ display:none; }
  }
  /* The header was sized like a landing page: 26px of padding and a 34px title above every
     screen. As a utility bar it should be thin and stay out of the way. */
  .fr-header{ padding:13px 24px 12px; overflow:visible; }  /* overflow only contained the
     gradient strip, which is pinned to the edges and doesn't need clipping */
  .fr-header-top{ flex-wrap:nowrap; }                       /* the earlier rule allowed wrapping,
     which pushed the account control onto its own line */
  .fr-title{ font-size:clamp(17px,2.6vw,21px); font-weight:700; letter-spacing:0; }
  .fr-logo{ height:32px; }
  @media (max-width:480px){
    .fr-header{ padding:10px 16px; }
    .fr-logo{ height:26px; }
    .fr-title{ font-size:16px; }
  }
  /* Brand lockup: the logo carries the brand, "Agent Portal" names the product beside it.
     Deliberately not centred — a centred title only looks centred while both sides stay the
     same width, and it drifts the moment a longer name appears in the account button. It also
     spends the most prominent spot in the bar on a word that never changes. */
  .fr-header-top{ gap:0; }
  .fr-logo{ margin-right:13px; }
  .fr-title{ font-weight:600; color:#3A4A6B; }
  .fr-title::before{
    content:""; display:inline-block; width:1px; height:18px; background:var(--rib);
    margin-right:13px; vertical-align:-2px;
  }
  .fr-account{ margin-left:auto; }
  @media (max-width:480px){
    .fr-logo{ margin-right:10px; }
    .fr-title::before{ height:15px; margin-right:10px; }
  }
  /* Interactive shelter preview */
  .fr-preview-canvas-wrap{ position:relative; width:100%; aspect-ratio:16/10; }
  .fr-preview-canvas-wrap canvas{
    width:100% !important; height:100% !important; display:block; border-radius:10px;
    touch-action:none; cursor:grab;
  }
  .fr-preview-canvas-wrap canvas:active{ cursor:grabbing; }
  .fr-preview-hint{
    font-family:var(--font-mono); font-size:10.5px; letter-spacing:.5px; text-transform:uppercase;
    color:var(--steel-600); text-align:center; margin:10px 0 2px;
  }
  /* Installed to the home screen, the app runs full-screen and `viewport-fit=cover` lets our
     content sit underneath the iPhone clock, signal and battery. The bottom bar already
     reserved space for the home indicator; the top never reserved any for the status bar,
     so the logo collided with the clock. env() resolves to 0 in a normal browser tab, so this
     costs nothing there. */
  .fr-header{ padding-top:calc(13px + env(safe-area-inset-top, 0px)); }
  @media (max-width:480px){
    .fr-header{ padding-top:calc(10px + env(safe-area-inset-top, 0px)); }
  }
  /* Freight and the custom-colour surcharge sit side by side */
  .fr-charge-row{ display:flex; gap:14px; margin-top:14px; flex-wrap:wrap; }
  .fr-charge-row .fr-field{ max-width:180px; flex:0 1 180px; }
  .fr-charge-row input[readonly]{ background:rgba(255,255,255,.55); cursor:default; }

  /* ---------- Agent Supply Items ---------- */
  .fr-agentitems-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .fr-agentitems-table{ width:100%; border-collapse:collapse; min-width:520px; }
  .fr-agentitems-table th{
    text-align:left; font-family:var(--font-mono); font-size:10px; letter-spacing:.5px;
    text-transform:uppercase; color:var(--steel-600); padding:8px 6px;
    border-bottom:1px solid var(--rib); font-weight:600;
  }
  .fr-agentitems-table td{ padding:6px; border-bottom:1px solid var(--rib); vertical-align:middle; }
  .fr-agentitems-table input{
    width:100%; box-sizing:border-box; border:1px solid var(--rib); border-radius:6px;
    padding:8px 9px; font-size:13.5px; font-family:var(--font-body); background:var(--panel);
  }
  .fr-agentitems-table input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
  .fr-ai-total{ font-family:var(--font-mono); font-size:12.5px; color:var(--steel-900); white-space:nowrap; }
  .fr-ai-remove{
    width:28px; height:28px; border:1px solid var(--rib); background:var(--panel);
    color:var(--error); border-radius:6px; font-size:16px; line-height:1; cursor:pointer;
  }
  .fr-ai-remove:hover{ background:#FBEFEE; }
  .fr-agentitems-empty{
    text-align:center; color:var(--steel-600); font-size:13px; padding:20px 10px;
  }
  .fr-agentitems-add{
    margin-top:12px; border:1px solid var(--accent-dark); background:none; color:var(--accent-dark);
    border-radius:7px; padding:9px 15px; font-size:13px; font-weight:700; cursor:pointer;
    font-family:var(--font-body);
  }
  .fr-agentitems-add:hover{ background:#eef3fb; }
  .fr-agentitems-totals{
    margin-top:14px; padding-top:12px; border-top:1px solid var(--rib); max-width:320px;
  }
  /* A dropdown that doesn't apply to the chosen kit reads as switched off, not just inert */
  .fr-field select:disabled{
    background:var(--steel-100); color:var(--steel-300); cursor:not-allowed; opacity:1;
  }
  /* A row that won't appear on the quote says so, rather than showing a misleading total */
  .fr-ai-incomplete{
    color:var(--error); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.3px;
  }