:root{
      --bg:#f3f6fb;
      --card:#ffffff;
      --border:#dbe4ef;
      --border-strong:#c5d2e3;
      --muted:#64748b;
      --text:#0f172a;
      --soft:#eef3f9;
      --soft-2:#f8fbff;
      --shadow:0 18px 50px rgba(15,23,42,.06);
      --active:#0f172a;
      --success-bg:#ecfdf5;
      --success-text:#047857;
      --success-border:#a7f3d0;
      --warn-bg:#fffbeb;
      --warn-text:#b45309;
      --warn-border:#fde68a;
      --danger-bg:#fef2f2;
      --danger-text:#b91c1c;
      --danger-border:#fecaca;
      --focus:0 0 0 3px rgba(15,23,42,.12);
    }

    *{ box-sizing:border-box; }
    html,body{ margin:0; min-height:100%; font-family:Inter,Segoe UI,Arial,sans-serif; background:linear-gradient(180deg,#f8fbff 0%,#f3f6fb 100%); color:var(--text); }
    button,input,select,textarea{ font:inherit; }
    button{ font-family:inherit; }

    .page{
      max-width:1900px;
      margin:0 auto;
      padding:28px 32px 36px;
    }

    .shell{
      display:grid;
      grid-template-columns:280px minmax(0,1fr);
      gap:24px;
      align-items:start;
      min-height:calc(100vh - 64px);
    }

    .panel{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:28px;
      box-shadow:var(--shadow);
    }

    .nav-shell{
      padding:20px;
      position:sticky;
      top:24px;
      display:grid;
      gap:18px;
    }

    .brand-block{
      padding:18px;
      border-radius:24px;
      background:linear-gradient(180deg,#f8fbff 0%,#eef4fb 100%);
      border:1px solid var(--border);
      min-height:156px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .brand-logo{
      display:block;
      max-width:100%;
      max-height:120px;
      width:auto;
      height:auto;
      object-fit:contain;
    }

    .eyebrow{
      font-size:11px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.08em;
      color:#94a3b8;
    }

    .brand-title{
      margin-top:8px;
      font-size:28px;
      font-weight:900;
      line-height:1.02;
      letter-spacing:-.03em;
    }

    .brand-subtitle{
      margin-top:10px;
      font-size:14px;
      line-height:1.5;
      color:var(--muted);
    }

    .nav-list{
      display:grid;
      gap:10px;
    }

    .nav-btn{
      width:100%;
      border:none;
      border-radius:20px;
      padding:15px 16px;
      background:#fff;
      color:#334155;
      border:1px solid var(--border);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      cursor:pointer;
      text-align:left;
      transition:transform .12s ease, background .12s ease, border-color .12s ease;
    }

    .nav-btn:hover{ transform:translateY(-1px); border-color:var(--border-strong); }
    .nav-btn.active{
      background:#0f172a;
      color:#fff;
      border-color:#0f172a;
    }

    .nav-copy{ min-width:0; }
    .nav-title{ font-weight:800; font-size:15px; }
    .nav-text{ margin-top:4px; font-size:12px; line-height:1.35; color:inherit; opacity:.78; }
    .nav-count{
      flex:0 0 auto;
      min-width:34px;
      padding:4px 8px;
      border-radius:999px;
      background:#f1f5f9;
      color:#475569;
      text-align:center;
      font-size:12px;
      font-weight:800;
    }
    .nav-btn.active .nav-count{
      background:rgba(255,255,255,.14);
      color:#fff;
    }

    .helper-card{
      background:var(--soft-2);
      border:1px solid var(--border);
      border-radius:22px;
      padding:16px;
      display:grid;
      gap:12px;
    }

    .helper-list{ display:grid; gap:10px; }
    .helper-item{
      display:grid;
      grid-template-columns:28px minmax(0,1fr);
      gap:10px;
      align-items:start;
    }
    .helper-num{
      width:28px; height:28px;
      border-radius:10px;
      background:#e2e8f0;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:12px;
      font-weight:900;
      color:#334155;
    }
    .helper-item strong{ display:block; font-size:13px; }
    .helper-item span{ display:block; margin-top:3px; font-size:12px; line-height:1.4; color:var(--muted); }

    .main-stage{
      display:grid;
      gap:20px;
      min-width:0;
    }

    .topbar{
      padding:24px 26px;
      display:flex;
      justify-content:space-between;
      gap:18px;
      align-items:flex-start;
      flex-wrap:wrap;
    }

    .topbar-title{
      margin-top:6px;
      font-size:34px;
      font-weight:900;
      line-height:1.04;
      letter-spacing:-.04em;
    }

    .topbar-text{
      margin-top:10px;
      color:var(--muted);
      line-height:1.55;
      max-width:840px;
      font-size:15px;
    }

    .topbar-actions{
      display:grid;
      grid-template-columns:repeat(4,minmax(150px,1fr));
      gap:10px;
      align-items:stretch;
     min-width:min(100%,760px);

    }

    .topbar-meta-card{
      border:1px solid var(--border);
      border-radius:18px;
      background:#f8fbff;
      padding:12px 14px;
      display:grid;
      gap:6px;
      min-width:0;
    }
    .env-card{
      position:relative;
      overflow:hidden;
    }

    .env-card .topbar-meta-value{
      display:flex;
      align-items:center;
      gap:8px;
    }

    .env-card .topbar-meta-value::before{
      content:"";
      width:10px;
      height:10px;
      border-radius:999px;
      flex:0 0 auto;
    }

    .env-card.env-live{
  background:linear-gradient(180deg,#f3fff7 0%,#ecfdf3 100%);
  border-color:#bbf7d0;
    }

    .env-card.env-live .topbar-meta-label{
    color:#15803d;
    }

    .env-card.env-live .topbar-meta-value{
    color:#166534;
    }

    .env-card.env-live .topbar-meta-value::before{
    background:#16a34a;
    box-shadow:0 0 0 4px rgba(22,163,74,.14);
   }

    .env-card.env-test .topbar-meta-value::before{
      background:#2563eb;
      box-shadow:0 0 0 4px rgba(37,99,235,.14);
    }
    .topbar-meta-label{
      font-size:11px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:#94a3b8;
    }

    .topbar-meta-value{
      font-size:14px;
      font-weight:800;
      color:#0f172a;
      line-height:1.35;
      word-break:break-word;
    }

    .network-status{
      display:inline-flex;
      align-items:center;
      gap:8px;
    }

    .network-dot{
      width:10px;
      height:10px;
      border-radius:999px;
      background:#22c55e;
      box-shadow:0 0 0 4px rgba(34,197,94,.12);
      flex:0 0 auto;
    }

    .network-dot.offline{
      background:#f59e0b;
      box-shadow:0 0 0 4px rgba(245,158,11,.14);
    }

    .pill{
      display:inline-flex;
      align-items:center;
      border-radius:999px;
      padding:7px 11px;
      font-size:12px;
      font-weight:800;
      border:1px solid transparent;
      white-space:nowrap;
    }
    .pill-neutral{ background:#f8fafc; color:#475569; border-color:#e2e8f0; }
    .pill-success{ background:var(--success-bg); color:var(--success-text); border-color:var(--success-border); }
    .pill-warning{ background:var(--warn-bg); color:var(--warn-text); border-color:var(--warn-border); }
    .pill-active{ background:var(--active); color:#fff; border-color:var(--active); }

    .btn{
      border-radius:16px;
      padding:12px 16px;
      font-size:14px;
      font-weight:800;
      border:1px solid transparent;
      cursor:pointer;
      transition:transform .12s ease, box-shadow .12s ease;
    }
    .btn:hover{ transform:translateY(-1px); }
    .btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
    .btn-primary{ background:#0f172a; color:#fff; }
    .btn-secondary{ background:#fff; color:#334155; border-color:#cbd5e1; }
    .btn-soft{ background:#eef3f9; color:#0f172a; border-color:#d9e4f0; }
    .btn-saved{ background:#e2e8f0; color:#64748b; border-color:#cbd5e1; }

    .stage-card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:28px;
      box-shadow:var(--shadow);
      overflow:hidden;
    }

    .section-header{
      padding:22px 24px;
      border-bottom:1px solid #edf2f7;
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:flex-start;
      flex-wrap:wrap;
    }

    .section-title{
      font-size:22px;
      font-weight:900;
      line-height:1.1;
      letter-spacing:-.03em;
    }

    .section-subtitle{
      margin-top:7px;
      color:var(--muted);
      font-size:14px;
      line-height:1.5;
    }

    .section-body{
      padding:24px;
    }

    .stats-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:16px;
    }

    .stat{
      background:#fff;
      border:1px solid var(--border);
      border-radius:24px;
      padding:20px;
      min-width:0;
    }

    .stat-label{
      color:var(--muted);
      font-size:13px;
      font-weight:700;
    }

    .stat-value{
      margin-top:12px;
      font-size:34px;
      font-weight:900;
      line-height:1.02;
      letter-spacing:-.03em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .stat-hint{
      margin-top:10px;
      color:#94a3b8;
      font-size:12px;
      line-height:1.4;
    }

    .home-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:20px;
      align-items:start;
    }

    .action-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:16px;
    }

    .action-grid-four{
      grid-template-columns:repeat(4,minmax(0,1fr));
    }

    .action-card{
      border:1px solid var(--border);
      border-radius:24px;
      padding:18px;
      background:linear-gradient(180deg,#fdfefe 0%,#f7fbff 100%);
      display:grid;
      gap:12px;
      align-content:start;
      min-height:190px;
    }

    .action-kicker{
      font-size:12px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:#94a3b8;
    }

    .action-title{
      font-size:20px;
      font-weight:900;
      line-height:1.1;
      letter-spacing:-.03em;
    }

    .action-text{
      color:var(--muted);
      font-size:14px;
      line-height:1.5;
    }

    .info-stack{ display:grid; gap:16px; }

    .soft-panel{
      background:#f8fbff;
      border:1px solid var(--border);
      border-radius:22px;
      padding:18px;
    }

    .soft-title{
      font-size:15px;
      font-weight:800;
    }

    .soft-copy{
      margin-top:8px;
      color:var(--muted);
      font-size:14px;
      line-height:1.5;
    }

    .bullet-list{ display:grid; gap:10px; margin-top:12px; }
    .bullet-item{
      display:flex;
      gap:10px;
      align-items:flex-start;
      color:#334155;
      font-size:14px;
      line-height:1.45;
    }

    .dot{
      width:8px; height:8px;
      border-radius:999px;
      background:#0f172a;
      margin-top:6px;
      flex:0 0 auto;
    }

    .review-grid{
      display:grid;
      grid-template-columns:minmax(0,1.4fr) minmax(238px,.52fr);
      gap:18px;
      align-items:start;
    }

    .drop-zone{
      border:2px dashed #cbd5e1;
      border-radius:26px;
      background:#fff;
      padding:28px;
      display:grid;
      gap:12px;
      justify-items:center;
      text-align:center;
      transition:.12s ease;
    }

    .drop-zone.dragging{
      background:#f8fafc;
      border-color:#0f172a;
    }

    .drop-icon{ font-size:34px; }
    .drop-title{ font-size:22px; font-weight:900; }
    .drop-text{ font-size:14px; color:var(--muted); max-width:540px; line-height:1.5; }

    .file-input,.text-input,.select-input,.textarea-input,.number-input{
      width:100%;
      border:1px solid #cbd5e1;
      border-radius:16px;
      padding:12px 14px;
      font-size:14px;
      outline:none;
      background:#fff;
      color:var(--text);
    }

    .textarea-input{
      min-height:114px;
      resize:vertical;
      line-height:1.5;
    }

    .file-input{ max-width:420px; padding:10px; }

    .file-input:focus,.text-input:focus,.select-input:focus,.textarea-input:focus,.number-input:focus,.nav-btn:focus,.btn:focus{
      box-shadow:var(--focus);
      outline:none;
    }

    .file-chip{
      background:#f1f5f9;
      border-radius:16px;
      padding:12px 14px;
      color:#334155;
      font-size:14px;
    }

    .actions{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      align-items:center;
      margin-top:16px;
    }

    .hint{ color:var(--muted); font-size:14px; line-height:1.45; }

    .error{
      margin-top:16px;
      background:var(--danger-bg);
      color:var(--danger-text);
      border:1px solid var(--danger-border);
      border-radius:16px;
      padding:12px 14px;
      font-size:14px;
      line-height:1.45;
    }

    .success-banner{
      margin-top:16px;
      background:var(--success-bg);
      color:var(--success-text);
      border:1px solid var(--success-border);
      border-radius:16px;
      padding:12px 14px;
      font-size:14px;
      line-height:1.45;
    }

    .progress-panel{
      background:#f8fbff;
      border:1px solid var(--border);
      border-radius:22px;
      padding:16px;
      margin-bottom:16px;
    }

    .progress-row{
      display:flex;
      justify-content:space-between;
      font-size:13px;
      margin-bottom:8px;
      color:#475569;
      font-weight:700;
      gap:12px;
    }

    .progress-track{
      height:8px;
      background:#e2e8f0;
      border-radius:999px;
      overflow:hidden;
    }

    .progress-fill{
      height:100%;
      background:#0f172a;
      border-radius:999px;
      transition:width 1.1s ease;
    }

    .status-line{ margin-top:12px; color:#475569; font-size:14px; line-height:1.45; }

    .import-outcome-banner{
      margin-top:16px;
      display:flex;
      justify-content:space-between;
      gap:14px;
      align-items:center;
    }

    .import-outcome-copy{
      display:grid;
      gap:6px;
      min-width:0;
    }

    .pipeline-list,.jobs-rail,.info-list{ display:grid; gap:12px; }
    .compact-actions{ justify-content:flex-end; }
    .import-stats-grid{ margin-bottom:4px; }
    .review-grid-import{ grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr); }
    .compact-jobs-rail{ gap:10px; }
    .compact-job-card{ border-radius:18px; padding:12px 13px; }
    .compact-job-top{ align-items:center; }
    .compact-job-meta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; color:#64748b; font-size:12px; font-weight:700; }

    .review-workspace-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
    .review-canvas-head{ display:block; }
    .review-top-layout{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(320px,380px);
      gap:22px;
      align-items:start;
      width:100%;
    }
    .review-description-column{
      display:grid;
      gap:18px;
      align-content:start;
      min-width:0;
    }
    .review-description-focus{
      display:grid;
      gap:10px;
      align-content:start;
      min-width:0;
    }
    .review-description-input{
      min-height:260px;
      resize:vertical;
      line-height:1.5;
      font-weight:700;
      color:#0f172a;
      white-space:pre-wrap;
    }
    .review-right-stack{
      display:grid;
      gap:16px;
      align-content:start;
      justify-self:end;
      width:100%;
      max-width:380px;
    }
    .review-manual-workspace{ grid-template-columns:minmax(0,1.35fr) minmax(330px,.82fr); }
    .review-workspace-stage .manual-hero{ border-bottom:1px solid #edf2f7; }
    .review-rail-card{ border:none; box-shadow:none; background:transparent; }
    .review-rail-body{ display:grid; gap:14px; }
    .review-filter-row{ grid-template-columns:1fr; }
    .review-rail-list{ display:grid; gap:10px; }
    .review-rail-item{ width:100%; border:1px solid var(--border); border-radius:18px; padding:14px; text-align:left; background:#fff; cursor:pointer; }
    .review-rail-item.active{ border-color:#0f172a; background:#f8fafc; }
    .review-rail-item-top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
    .review-rail-invoice{ font-weight:900; color:#0f172a; font-size:14px; }
    .review-rail-customer{ margin-top:5px; color:#334155; font-size:13px; font-weight:700; }
    .review-rail-load-item{ margin-top:6px; color:#475569; font-size:12px; line-height:1.45; }
    .review-rail-meta{ margin-top:10px; color:#64748b; font-size:12px; line-height:1.45; }
    .review-rail-footer{ margin-top:10px; display:flex; justify-content:space-between; gap:10px; align-items:center; color:#475569; font-size:12px; }
    .review-middle-layout{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(320px,380px);
      gap:22px;
      align-items:stretch;
      margin-top:16px;
    }
    .review-left-stack{
      display:grid;
      gap:16px;
      min-width:0;
      height:100%;
      align-content:start;
    }
    .review-jobsite-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:16px;
      min-width:0;
    }
    .review-load-item-card,
    .review-site-card{ align-content:start; }
    .review-load-item-input{
      min-height:92px;
      resize:vertical;
      line-height:1.5;
      font-weight:700;
      color:#0f172a;
      white-space:pre-wrap;
    }
    .review-site-card .review-location-box{
      min-height:140px;
      resize:vertical;
      white-space:pre-wrap;
    }
    .review-top-facts-card{
      display:grid;
      gap:14px;
      align-self:stretch;
      height:100%;
    }
    .review-workspace-actions{ margin-top:0; }
    .review-action-card .actions{ margin-top:0; }
    .review-readonly-field{ align-content:start; }
    .readonly-value{ border:1px solid #e2e8f0; border-radius:16px; background:#f8fafc; padding:13px 14px; color:#0f172a; font-weight:700; min-height:48px; line-height:1.5; }
    .readonly-value.multiline{ white-space:pre-wrap; min-height:96px; }
    .review-line-list{ display:grid; gap:10px; }
    .review-line-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:start; border:1px solid #e2e8f0; border-radius:18px; background:#fff; padding:14px; }
    .review-line-title{ font-size:14px; font-weight:900; color:#0f172a; }
    .review-line-total{ font-size:15px; font-weight:900; color:#0f172a; white-space:nowrap; }
    .review-total-card{ align-self:start; }
    .review-bottom-actions .actions{ justify-content:flex-end; }
    .review-empty-state{ padding:48px 28px; }
    .compact-empty{ padding:22px; }
    .pipeline-item{ display:flex; gap:12px; align-items:flex-start; }
    .pipeline-icon{
      width:32px; height:32px; border-radius:12px; background:#f1f5f9;
      display:inline-flex; align-items:center; justify-content:center; font-weight:900; flex:0 0 auto;
    }
    .pipeline-title{ font-weight:800; font-size:14px; }
    .pipeline-text{ color:var(--muted); font-size:12px; line-height:1.45; }

    .hero{
      background:#f8fbff;
      border-radius:24px;
      padding:20px;
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:flex-start;
      flex-wrap:wrap;
      margin:24px;
      margin-bottom:0;
      border:1px solid var(--border);
    }

    .hero-label{ font-size:13px; color:var(--muted); }
    .hero-title{ font-size:24px; font-weight:900; margin-top:4px; word-break:break-word; line-height:1.1; }
    .hero-meta{ margin-top:8px; color:var(--muted); font-size:14px; line-height:1.45; }

    .queue{
      margin:0 24px 24px;
      border:1px solid var(--border);
      border-radius:24px;
      overflow:hidden;
      background:#fff;
    }

    .queue-head{
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:flex-end;
      padding:20px;
      border-bottom:1px solid var(--border);
      flex-wrap:wrap;
    }

    .queue-title{ font-size:20px; font-weight:900; }
    .queue-subtitle{ margin-top:6px; color:var(--muted); font-size:14px; line-height:1.45; }

    .queue-toolbar{
      padding:20px;
      border-bottom:1px solid #f1f5f9;
      display:grid;
      gap:16px;
    }

    .tab-row{ display:flex; flex-wrap:wrap; gap:8px; }

    .tab{
      border:none;
      border-radius:16px;
      padding:10px 14px;
      background:#f1f5f9;
      color:#475569;
      font-weight:800;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      gap:8px;
    }

    .tab.active{ background:#0f172a; color:#fff; }

    .tab-count{
      background:#fff;
      color:#475569;
      border-radius:999px;
      padding:2px 8px;
      font-size:12px;
      font-weight:800;
    }

    .tab.active .tab-count{
      background:rgba(255,255,255,.16);
      color:#fff;
    }

    .filter-row{
      display:grid;
      grid-template-columns:minmax(0,1fr) 240px;
      gap:12px;
    }

    .mini-stats{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:16px;
      padding:20px;
      padding-top:16px;
      border-bottom:1px solid #f8fafc;
    }

    .mini-stat{
      background:#f8fafc;
      border-radius:18px;
      padding:16px;
      min-width:0;
    }

    .mini-label{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.06em;
      color:#94a3b8;
      font-weight:800;
    }

    .mini-value{
      margin-top:8px;
      font-size:24px;
      font-weight:900;
      color:#0f172a;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .table-wrap{ overflow-x:auto; }
    .table-head,.table-row{
      min-width:860px;
      display:grid;
      grid-template-columns:1.05fr 1.3fr .7fr .8fr .9fr 40px;
      gap:12px;
      padding:14px 20px;
      align-items:center;
    }

    .table-head{
      font-size:11px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.06em;
      color:#94a3b8;
      border-bottom:1px solid var(--border);
    }

    .table-row{
      padding:16px 20px;
      border-bottom:1px solid #f1f5f9;
      font-size:14px;
    }

    .invoice-number,.invoice-amount{ font-weight:800; color:#0f172a; }
    .muted{ color:#475569; }
    .arrow{ text-align:center; color:#94a3b8; font-size:22px; line-height:1; }

    .empty{
      padding:32px;
      text-align:center;
      color:var(--muted);
    }

    .empty-title{ font-weight:800; color:#334155; }
    .empty-text{ color:var(--muted); margin-top:8px; line-height:1.45; }

    .job-card{
      border:1px solid var(--border);
      border-radius:24px;
      padding:16px;
      background:#fff;
      cursor:pointer;
      text-align:left;
      width:100%;
    }

    .job-card.active{
      border-color:#0f172a;
      background:#f8fafc;
    }

    .job-top{
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:flex-start;
    }

    .job-file{
      font-weight:800;
      font-size:14px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .job-meta{
      margin-top:4px;
      color:var(--muted);
      font-size:12px;
      line-height:1.35;
    }

    .job-stats{
      margin-top:14px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }

    .manual-hero{
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:center;
      flex-wrap:wrap;
      padding:20px 24px;
      border-bottom:1px solid #edf2f7;
      background:linear-gradient(180deg,#fbfdff 0%,#f4f8fc 100%);
    }

    .manual-toolbar-actions{
      display:flex;
      gap:12px;
      align-items:center;
      justify-content:flex-start;
      flex-wrap:wrap;
    }

    .btn-create{
      padding:14px 22px;
      min-width:152px;
      font-size:15px;
      letter-spacing:.04em;
    }

    .btn-clear{
      padding:11px 16px;
      font-size:13px;
      letter-spacing:.04em;
    }

    .manual-toolbar-status{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
      align-items:center;
    }

    .manual-hero-copy{
      margin-top:10px;
      max-width:760px;
      color:var(--muted);
      font-size:15px;
      line-height:1.55;
    }

    .manual-workspace{
      display:grid;
      grid-template-columns:minmax(0,1.4fr) minmax(380px,.9fr);
      gap:20px;
      padding:24px;
      align-items:start;
    }

    .invoice-canvas{
      border:1px solid var(--border);
      border-radius:28px;
      background:#fff;
      overflow:hidden;
    }

    .invoice-canvas-head{
      padding:24px;
      border-bottom:1px solid #edf2f7;
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:18px;
      align-items:start;
    } 

    .review-invoice-canvas > .review-canvas-head{
      display:block;
}

.review-invoice-canvas > .review-canvas-head > .review-top-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,380px);
  gap:22px;
  align-items:start;
  width:100%;
}

.review-invoice-canvas > .review-canvas-head > .review-top-layout > .review-right-stack{
  display:grid;
  gap:16px;
  align-content:start;
  justify-self:end;
  width:100%;
  max-width:380px;
}
    .invoice-name{
      font-size:32px;
      font-weight:900;
      line-height:1.02;
      letter-spacing:-.04em;
    }

    .invoice-meta-card{
      background:#f8fbff;
      border:1px solid var(--border);
      border-radius:20px;
      padding:18px;
      display:grid;
      gap:14px;
    }

    .meta-block{
      border:1px solid #e2e8f0;
      border-radius:16px;
      background:#fff;
      padding:14px;
      display:grid;
      gap:6px;
    }

    .meta-label{
      color:#64748b;
      font-weight:800;
      font-size:11px;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .meta-value{ font-weight:900; color:#0f172a; font-size:18px; line-height:1.2; }

    .invoice-section{
      padding:24px;
      border-bottom:1px solid #edf2f7;
    }

    .invoice-section:last-child{ border-bottom:none; }

    .invoice-section-title{
      font-size:13px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.08em;
      color:#94a3b8;
      margin-bottom:14px;
    }

    .field-grid-two{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:16px;
    }

    .field-grid-three{
      display:grid;
      grid-template-columns:1.2fr .8fr .8fr;
      gap:14px;
      align-items:end;
    }

    .field{
      display:grid;
      gap:8px;
      min-width:0;
    }

    .field label{
      font-size:13px;
      font-weight:800;
      color:#334155;
    }

    .field-hint{
      color:#94a3b8;
      font-size:12px;
      line-height:1.35;
    }

    .line-list{
      display:grid;
      gap:14px;
      margin-top:16px;
    }

    .line-card{
      border:1px solid var(--border);
      border-radius:22px;
      padding:16px;
      background:#fbfdff;
    }

    .line-card-top{
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:center;
      margin-bottom:12px;
      flex-wrap:wrap;
    }

    .line-card-title{
      font-weight:900;
      font-size:15px;
    }

    .toggle-row{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:14px;
      color:#334155;
      font-weight:700;
    }

    .checkbox{
      width:18px;
      height:18px;
      accent-color:#0f172a;
    }

    .readonly-value{
      min-height:46px;
      border:1px solid var(--border);
      border-radius:14px;
      background:#f8fafc;
      display:flex;
      align-items:center;
      padding:0 14px;
      font-weight:800;
      color:#0f172a;
    }

    .line-warning{
      color:#92400e;
      font-weight:700;
    }

    .manual-line-grid{
      display:grid;
      grid-template-columns:repeat(6,minmax(0,1fr));
      gap:14px;
      align-items:start;
      margin-top:8px;
    }

    .manual-line-span-2{
      grid-column:span 2;
    }


    .aside-stack{ display:grid; gap:16px; }

    .aside-card{
      border:1px solid var(--border);
      border-radius:24px;
      background:#fff;
      padding:18px;
    }

    .aside-title{
      font-size:16px;
      font-weight:900;
    }

    .aside-text{
      margin-top:8px;
      color:var(--muted);
      font-size:14px;
      line-height:1.5;
    }

    .key-metrics{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
      margin-top:14px;
    }

    .metric{
      border:1px solid var(--border);
      border-radius:18px;
      padding:14px;
      background:#f8fbff;
    }

    .metric-label{
      color:#94a3b8;
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.06em;
      font-weight:900;
    }

    .metric-value{
      margin-top:8px;
      font-size:22px;
      font-weight:900;
      line-height:1.05;
    }

    .placeholder-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:16px;
    }

    .placeholder-card{
      border:1px dashed var(--border-strong);
      border-radius:22px;
      padding:18px;
      background:#fbfdff;
      min-height:160px;
    }

    .placeholder-card strong{
      display:block;
      font-size:15px;
    }

    .placeholder-card p{
      margin:8px 0 0;
      color:var(--muted);
      font-size:14px;
      line-height:1.5;
    }

 
@media (max-width: 1500px){
  .stats-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .action-grid{ grid-template-columns:1fr; }
  .home-grid,.review-grid,.manual-workspace,.review-manual-workspace,.review-notes-grid,.review-jobsite-grid{ grid-template-columns:1fr; }
  .review-hero-grid,.review-jobsite-grid,.review-notes-grid,.review-detail-grid-tight{ grid-template-columns:1fr; }
  .topbar-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
    min-width:0;
    width:100%;
  }
}

@media (max-width: 1120px){
  .page{ padding:18px; }
  .shell{ grid-template-columns:1fr; }
  .nav-shell{ position:static; }
   .invoice-canvas-head,.field-grid-two,.review-top-layout,.review-middle-layout{ grid-template-columns:1fr; }
  .placeholder-grid{ grid-template-columns:1fr; }
  .manual-hero,.topbar{ align-items:flex-start; }
}

@media (max-width: 760px){
  .topbar,.section-header,.manual-hero,.section-body,.manual-workspace,.invoice-section,.invoice-canvas-head{ padding:18px; }
  .filter-row,.mini-stats,.stats-grid,.key-metrics,.field-grid-three,.topbar-actions,.action-grid-four{ grid-template-columns:1fr; }
  .actions{ align-items:stretch; }
  .btn{ width:100%; }
  .manual-toolbar-actions,.manual-toolbar-status{ width:100%; justify-content:flex-start; }
  .table-head,.table-row{ min-width:720px; }
  .topbar-title,.invoice-name{ font-size:26px; }
}

.import-review-raw-json {
  margin: 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(10, 15, 27, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: #dbe4ff;
  font-size: 12px;
  line-height: 1.45;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}


    .review-permit-subline{
      border-top:1px dashed #dbe4ef;
      padding-top:10px;
    }

    .reference-shell{
      display:grid;
      grid-template-columns:minmax(0,1.3fr) minmax(240px,.5fr);
      gap:18px;
      align-items:start;
    }

    .reference-main-stack,
    .reference-side-stack,
    .reference-placeholder-grid{
      display:grid;
      gap:18px;
    }

    .reference-stage-card,
    .reference-placeholder-card,
    .reference-list-card,
    .reference-editor-card{
      border:1px solid var(--border);
      border-radius:24px;
      background:#fff;
      padding:18px;
    }

    .reference-placeholder-card{
      background:#f8fbff;
    }

    .reference-toolbar{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:14px;
      margin:18px 0;
    }

    .reference-toggle-row{
      align-self:center;
      white-space:nowrap;
    }

    .reference-grid{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(340px,.95fr);
      gap:18px;
      align-items:start;
    }

    .reference-customer-list{
      display:grid;
      gap:12px;
      margin-top:14px;
    }

    .reference-customer-item{
      border:1px solid #dbe4ef;
      border-radius:18px;
      padding:14px;
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:14px;
      align-items:start;
      background:#fff;
    }

    .reference-customer-item.editing{
      border-color:#0f172a;
      box-shadow:0 0 0 1px #0f172a inset;
      background:#f8fafc;
    }

    .reference-customer-item.inactive{
      background:#fcfcfd;
      opacity:.92;
    }

    .reference-customer-main,
    .reference-customer-actions,
    .reference-customer-top,
    .reference-customer-meta{
      display:grid;
      gap:8px;
    }

    .reference-customer-top{
      grid-template-columns:minmax(0,1fr) auto;
      align-items:center;
      gap:12px;
    }

    .reference-customer-meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      color:#64748b;
      font-size:12px;
      font-weight:700;
    }

    .reference-customer-actions{
      min-width:132px;
    }

    .reference-editor-grid{
      margin-top:16px;
    }

    .reference-editor-actions{
      justify-content:flex-end;
      margin-top:18px;
    }