:root{
    --black:#0d0d0f; --panel:#16161a; --ink:#1b1b1e; --red:#9e1b23; --red2:#c0202e; --reddeep:#7a141b;
    --bg:#f2f2f4; --card:#fff; --line:#e5e5ea; --muted:#6c6c73; --soft:#f7f7f9;
    --ice:#faeff0; --iceline:#f0d8da;
    --green:#2f9e70; --greenbg:#e6f5ee; --amber:#c9861f; --amberbg:#fdf2e0;
    --indigo:#5a54c9; --indigobg:#ecebfb; --teal:#1f8f8f; --tealbg:#e4f4f4; --grey:#8a8a92;
    --shadow:0 1px 2px rgba(13,13,15,.06),0 6px 20px rgba(13,13,15,.09);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
  button{font-family:inherit;cursor:pointer;border:none;background:none}
  input,textarea,select{font-family:inherit;font-size:14px}

  .demobar{background:#000;color:#c9c9cf;font-size:12.5px;padding:7px 16px;display:flex;
    align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;border-bottom:2px solid var(--red)}
  .demobar .tag{font-weight:800;letter-spacing:.06em;color:#fff}
  .switchbtn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#eaeaea;
    padding:5px 11px;border-radius:7px;font-size:12px;font-weight:600}
  .switchbtn:hover{background:rgba(255,255,255,.16)}

  .brandbar{background:linear-gradient(180deg,#0d0d0f,#171719);color:#fff;padding:12px 18px;display:flex;
    align-items:center;gap:14px;border-bottom:3px solid var(--red)}
  .emblem{height:50px;width:auto;flex-shrink:0;display:block}
  .brandtxt .co{font-weight:900;letter-spacing:.02em;font-size:18px;line-height:1;color:#fff}
  .brandtxt .co b{color:var(--red2)}
  .brandtxt .dep{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#cfcfd4;display:inline-block;font-weight:700}
  .brandbar .spacer{flex:1}
  .brandbar .env{font-size:11px;color:#9a9aa2;text-align:right}

  .app{max-width:1040px;margin:0 auto;padding:22px 18px 70px}

  .card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
  .btn{display:inline-flex;align-items:center;gap:7px;background:var(--black);color:#fff;padding:10px 16px;
    border-radius:9px;font-size:14px;font-weight:700;transition:.15s}
  .btn:hover{background:#000}
  .btn.red{background:var(--red)} .btn.red:hover{background:var(--reddeep)}
  .btn.ghost{background:#fff;color:var(--black);border:1.5px solid var(--line)}
  .btn.ghost:hover{border-color:var(--red);background:var(--ice)}
  .btn.green{background:var(--green)} .btn.green:hover{background:#25865d}
  .btn.sm{padding:7px 12px;font-size:12.5px;border-radius:8px}
  .btn[disabled]{opacity:.45;cursor:not-allowed}
  .link{color:var(--red);font-weight:700;font-size:13.5px;cursor:pointer}
  .link:hover{text-decoration:underline}
  .muted{color:var(--muted)}
  .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  h1{font-size:24px;font-weight:850;color:var(--black);letter-spacing:-.01em}
  .field{margin-bottom:14px}
  .field label{display:block;font-size:12.5px;font-weight:700;color:var(--black);margin-bottom:5px}
  .field .rq,.qlabel .rq,.opt .rq{color:var(--red2)}
  .field input,.field textarea,.field select{width:100%;padding:10px 12px;border:1.5px solid var(--line);
    border-radius:9px;background:#fbfbfc}
  .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--red);background:#fff}
  .field.err input,.field.err textarea,.field.err select,.opt.err{border-color:var(--red2)!important;background:#fdf3f4}
  .errmsg{color:var(--red2);font-size:11.5px;font-weight:600;margin-top:4px;display:none}
  .field.err .errmsg,.optblock.err .errmsg{display:block}

  .optblock{margin-bottom:16px}
  .optblock > .qlabel{font-size:12.5px;font-weight:700;color:var(--black);margin-bottom:7px;display:block}
  .opt{display:flex;gap:9px;align-items:flex-start;padding:8px 11px;border:1.5px solid var(--line);border-radius:9px;
    background:#fbfbfc;margin-bottom:7px;cursor:pointer;font-size:13.5px;transition:.12s}
  .opt:hover{border-color:var(--red);background:var(--ice)}
  .opt.sel{border-color:var(--red);background:var(--ice)}
  .opt input{margin-top:2px;accent-color:var(--red);width:16px;height:16px;flex-shrink:0}
  .opt .ot{flex:1}

  .badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:4px 10px;
    border-radius:999px;white-space:nowrap}
  .badge:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.9}
  .b0{background:#edeef1;color:#5a5a63}
  .b1{background:#e7eefb;color:#2E5FB5}
  .b2{background:var(--amberbg);color:var(--amber)}
  .b3{background:var(--indigobg);color:var(--indigo)}
  .b4{background:var(--tealbg);color:var(--teal)}
  .b5{background:var(--greenbg);color:var(--green)}
  .bonsite{background:var(--greenbg);color:var(--green)}
  .wbadge{font-size:11px;font-weight:800;padding:3px 9px;border-radius:6px;text-transform:uppercase;letter-spacing:.03em}
  .w-full{background:var(--greenbg);color:var(--green)}
  .w-hybrid{background:var(--amberbg);color:var(--amber)}
  .w-none{background:#edeef1;color:#5a5a63}
  .duebadge{background:#fdeaea;color:var(--red2);font-size:11px;font-weight:800;padding:3px 9px;border-radius:6px}
  .rolechip{font-size:11px;font-weight:800;padding:3px 9px;border-radius:6px;background:var(--black);color:#fff;text-transform:uppercase;letter-spacing:.03em}

  /* login / welcome */
  .welcome{padding:22px 24px;margin-bottom:16px}
  .welcome h2{font-size:19px;color:var(--black);margin-bottom:10px;font-weight:850}
  .welcome p{font-size:13px;color:var(--ink);margin-bottom:9px;line-height:1.6}
  .welcome p.small{font-size:12px;color:var(--muted)}
  .lg{margin-top:12px}
  .lg .lgt{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--red);margin-bottom:5px}
  .pinrow{display:flex;justify-content:space-between;align-items:center;padding:7px 0;cursor:pointer;border-bottom:1px dashed var(--line);font-size:13px}
  .pinrow:hover{color:var(--red)}
  .pinrow .pp{color:var(--muted);font-size:12.5px}

  .rolehead{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px;flex-wrap:wrap}
  .rolehead .who{display:flex;align-items:center;gap:12px}
  .avatar{width:42px;height:42px;border-radius:11px;background:var(--black);color:#fff;display:flex;
    align-items:center;justify-content:center;font-weight:800;font-size:15px}
  .avatar.red{background:var(--red)}
  .rolehead .sub{font-size:12.5px;color:var(--muted)}

  .req{display:flex;align-items:center;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line);cursor:pointer;transition:.12s}
  .req:last-child{border-bottom:none}
  .req:hover{background:var(--soft)}
  .req .thumb{width:46px;height:46px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:22px;background:#eef0f3;overflow:hidden}
  .req .thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .req .mid{flex:1;min-width:0}
  .req .mid .t{font-weight:750;font-size:15px;color:var(--black)}
  .req .mid .s{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .req .end{text-align:right;flex-shrink:0}
  .listhead{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:10px}
  .listhead h2{font-size:16px;color:var(--black)}

  .pbar{height:7px;border-radius:99px;background:#e9e9ee;overflow:hidden;margin-top:8px;width:160px;max-width:40vw}
  .pbar > i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--green));border-radius:99px;transition:width .4s}

  .tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
  .tab{padding:9px 15px;border-radius:9px;font-size:13.5px;font-weight:700;color:var(--muted);background:#fff;border:1.5px solid var(--line)}
  .tab.active{background:var(--black);color:#fff;border-color:var(--black)}
  .tab .ct{opacity:.7;font-weight:700}

  .detail-top{padding:20px 22px;border-bottom:1px solid var(--line)}
  .detail-body{padding:22px}
  .kv{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;font-size:13.5px;margin-top:12px}
  .kv .k{color:var(--muted);font-weight:600}
  .kv .v{color:var(--ink);font-weight:650}

  .tracker{display:flex;margin:22px 0 6px;overflow-x:auto}
  .tstep{flex:1;min-width:70px;text-align:center;position:relative}
  .tstep .c{width:30px;height:30px;border-radius:50%;background:#e6e6ec;color:#9a9aa4;border:2px solid #e6e6ec;
    display:flex;align-items:center;justify-content:center;margin:0 auto 7px;font-size:13px;font-weight:800;position:relative;z-index:2}
  .tstep.done .c{background:var(--green);border-color:var(--green);color:#fff}
  .tstep.cur .c{background:#fff;border-color:var(--red);color:var(--red);box-shadow:0 0 0 4px rgba(158,27,35,.16)}
  .tstep:not(:last-child):before{content:"";position:absolute;top:15px;left:50%;width:100%;height:3px;background:#e6e6ec;z-index:1}
  .tstep.done:not(:last-child):before{background:var(--green)}
  .tstep .lbl{font-size:10.5px;font-weight:700;color:var(--muted);line-height:1.25;padding:0 3px}
  .tstep.cur .lbl,.tstep.done .lbl{color:var(--black)}

  .photos{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
  .photo{width:84px;height:84px;border-radius:11px;background:#eef0f3;display:flex;align-items:center;justify-content:center;
    font-size:30px;overflow:hidden;border:1px solid var(--line)}
  .photo img{width:100%;height:100%;object-fit:cover}

  .tl{margin-top:8px}
  .tlrow{display:flex;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line)}
  .tlrow:last-child{border-bottom:none}
  .tlrow .mk{width:30px;height:30px;border-radius:50%;background:var(--ice);color:var(--red);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px}
  .tlrow .mk.cust{background:#e7eefb;color:#2E5FB5}
  .tlrow .body .top{font-size:13.5px}
  .tlrow .body .top b{color:var(--black)}
  .tlrow .body .when{font-size:11.5px;color:var(--grey);margin-top:2px}
  .tldisc{background:var(--soft);border:1px dashed var(--line);border-radius:9px;padding:9px 12px;font-size:11.8px;color:var(--muted);margin-top:10px}

  .section-label{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--red);margin:22px 0 8px}
  .section-label .sm{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted)}

  .adminstats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
  .astat{padding:13px 15px}
  .astat .n{font-size:22px;font-weight:850;color:var(--black)}
  .astat .l{font-size:11px;color:var(--muted);font-weight:650;margin-top:2px}
  .astat.due .n{color:var(--red2)}

  .pin-display{letter-spacing:.35em;font-size:26px;font-weight:800;color:var(--black);text-align:center;background:var(--soft);border-radius:10px;padding:14px;margin:6px 0 4px}
  .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--black);
    color:#fff;padding:12px 20px;border-radius:11px;font-size:13.5px;font-weight:650;box-shadow:0 10px 30px rgba(0,0,0,.3);opacity:0;transition:.35s;z-index:99;max-width:90vw;text-align:center}
  .toast.show{transform:translateX(-50%) translateY(0);opacity:1}
  .toast.warn{background:var(--red2)}
  .flash{animation:fl 1.3s ease}
  @keyframes fl{0%{background:#fff2d6}60%{background:#fff2d6}100%{background:transparent}}

  .hint{background:var(--amberbg);border:1px solid #f2dcae;border-radius:10px;padding:11px 14px;font-size:12.8px;color:#7a5714;margin-bottom:16px;display:flex;gap:8px;align-items:flex-start}
  .hint.red{background:var(--ice);border-color:var(--iceline);color:var(--reddeep)}
  .empty{padding:36px;text-align:center;color:var(--muted);font-size:14px}

  .wizsteps{display:flex;align-items:center;gap:0;margin:6px 0 20px}
  .wizsteps .s{display:flex;align-items:center;gap:8px;flex:1}
  .wizsteps .dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);background:#fff;color:var(--muted);
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0}
  .wizsteps .s.on .dot{border-color:var(--red);color:var(--red)}
  .wizsteps .s.done .dot{background:var(--red);border-color:var(--red);color:#fff}
  .wizsteps .bar{flex:1;height:2px;background:var(--line)}
  .wizsteps .s.done .bar{background:var(--red)}
  .wizsteps .nm{font-size:12px;font-weight:700;color:var(--muted)}
  .wizsteps .s.on .nm,.wizsteps .s.done .nm{color:var(--black)}

  .terms{max-height:150px;overflow:auto;background:var(--soft);border:1px solid var(--line);border-radius:9px;padding:12px 14px;font-size:12px;color:var(--muted);line-height:1.55;margin-bottom:10px}

  .repgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .barrow{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:13px}
  .barrow .bl{width:150px;flex-shrink:0;color:var(--ink);font-weight:600}
  .barrow .bt{flex:1;height:20px;background:#eef0f3;border-radius:6px;overflow:hidden}
  .barrow .bt > i{display:block;height:100%;background:var(--red);border-radius:6px}
  .barrow .bn{width:34px;text-align:right;font-weight:800;color:var(--black)}
  .repfilters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
  .repfilters .field{margin-bottom:0;min-width:150px}

  /* line-item table (on-site) */
  .litable{width:100%;border-collapse:collapse;margin-top:6px;table-layout:fixed}
  .litable col.qty{width:15%} .litable col.desc{width:85%}
  .litable th{background:var(--black);color:#fff;font-size:12px;padding:7px 9px;text-align:left}
  .litable td{border:1px solid var(--line);padding:0}
  .litable td input{width:100%;border:none;padding:9px 10px;background:transparent;border-radius:0}
  .litable td input:focus{outline:2px solid var(--red);outline-offset:-2px}

  .attachrow{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;margin-bottom:7px;font-size:13px;background:#fbfbfc}
  .attachrow .fx{font-size:17px}
  .attachrow .an{flex:1;font-weight:600;color:var(--ink);word-break:break-all}

  /* customer type-ahead */
  .ac-results{position:absolute;left:0;right:0;top:100%;z-index:30;background:#fff;border:1.5px solid var(--line);
    border-radius:9px;box-shadow:var(--shadow);max-height:260px;overflow:auto;margin-top:3px}
  .ac-item{padding:9px 12px;font-size:13.5px;cursor:pointer;border-bottom:1px solid var(--soft)}
  .ac-item:last-child{border-bottom:none}
  .ac-item:hover{background:var(--ice);color:var(--reddeep)}

  @media(max-width:820px){ .repgrid{grid-template-columns:1fr}
    .adminstats{grid-template-columns:1fr 1fr} .kv{grid-template-columns:1fr} .kv .k{margin-top:6px} }