:root{--bg:#f4f5f7;--card:#fff;--ink:#1c2430;--mute:#667085;--line:#e3e6ec;
        --red:#CE161E;--red-dk:#C00000;--navy:#002060;--grey:#D9D9D9;--lgreen:#E2EFD9;--cream:#FFF2CC;
        --accent:var(--red);--accent2:var(--navy);--ok:#15803d;
        --p1:#FF0000;--p2:#FFBF00;--p3:#006400;--p4:#00FF00;--es:#6A1B9A}
  *{box-sizing:border-box}
  body{margin:0;font:14px/1.5 Calibri,Carlito,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
  header{background:#fff;color:var(--navy);padding:0 24px;display:flex;align-items:center;gap:26px;min-height:58px;border-bottom:3px solid var(--red);flex-wrap:wrap}
  header .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy);font-weight:700;font-size:15px}
  header .brand img{display:block}
  header a{color:var(--navy);text-decoration:none;font-size:14px;font-weight:600}
  header a:hover{color:var(--red)}
  header span{color:var(--mute)!important}
  main{max-width:1180px;margin:24px auto;padding:0 20px}
  h1{font-size:22px;margin:0 0 4px;color:var(--navy)} h2{font-size:16px;margin:0 0 10px;color:var(--navy)}
  .sub{color:var(--mute);margin-bottom:18px}
  .grid{display:grid;gap:16px} .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)}
  @media(max-width:860px){.g2,.g3{grid-template-columns:1fr}}
  .card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:16px;overflow-x:auto}
  table{border-collapse:collapse;width:100%} th,td{padding:7px 9px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
  th{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--mute);font-weight:600}
  a{color:var(--navy)} .mute{color:var(--mute)} .num{text-align:right;font-variant-numeric:tabular-nums}
  .btn{display:inline-block;background:var(--red);color:#fff;border:0;border-radius:4px;padding:8px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none}
  .btn:hover{background:var(--red-dk)}
  .btn.sec{background:#fff;color:var(--navy);border:1px solid #b8bfcc} .btn.sec:hover{background:#f1f3f7}
  .tag{display:inline-block;padding:1px 9px;border-radius:3px;font-size:12px;font-weight:700;color:#fff;border:1px solid rgba(0,0,0,.25)}
  .P1{background:var(--p1);color:#fff} .P2{background:var(--p2);color:#000} .P3{background:var(--p3);color:#fff} .P4{background:var(--p4);color:#000} .ES{background:var(--es);color:#fff}
  .warn{color:#b45309} .bad{color:#b91c1c} .good{color:var(--ok)}
  .bar{height:14px;background:var(--navy);border-radius:3px;min-width:2px}
  .barrow{display:grid;grid-template-columns:200px 1fr 36px;gap:8px;align-items:center;margin:4px 0;font-size:13px}
  .stack{display:flex;height:16px;border-radius:3px;overflow:hidden;background:#eef0f4}
  input,select,textarea{font:inherit;padding:5px 7px;border:1px solid #b8bfcc;border-radius:4px;background:#fff;max-width:100%}
  input.n{width:72px} .flag{font-size:12px;color:#b45309}
  .low{background:#fff7ed}
  details summary{cursor:pointer;color:var(--mute);font-size:12px}
  .small{font-size:12px} .tl td,.tl th{white-space:nowrap} .tl td.w{white-space:normal;min-width:200px}
  .note{background:var(--cream);border:1px solid #f0d98a;border-radius:4px;padding:8px 12px;margin:8px 0;font-size:13px}
  .pill{display:inline-block;padding:0 7px;border-radius:9px;font-size:12px;border:1px solid var(--line);background:#fff}
  .pill.up{border-color:#fca5a5;color:#b91c1c} .pill.down{border-color:#86efac;color:#15803d} .pill.flat{color:var(--mute)}
  .btn.sm{padding:4px 10px;font-size:12px}
  .actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-bottom:12px}
  progress{vertical-align:middle}

  /* ---- customer report ---- */
  .cr-frame{background:#fff;border:1px solid var(--line);border-radius:6px;padding:28px 34px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
  .cr{color:#1c2430;font-size:14.5px;line-height:1.55}
  .cr h1{font-size:30px;margin:2px 0 2px;color:var(--navy);letter-spacing:.2px}
  .cr h2{font-size:19px;margin:30px 0 6px;color:var(--navy);padding-bottom:4px;border-bottom:2px solid var(--red);break-after:avoid}
  .cr h3{font-size:14px;margin:6px 0;color:var(--navy)}
  .cr-head{display:flex;gap:24px;align-items:center;border-bottom:4px solid var(--red);padding-bottom:16px;margin-bottom:18px}
  .cr-logo{height:auto;flex:0 0 auto}
  .cr-kicker{text-transform:uppercase;letter-spacing:1.5px;font-size:12px;color:var(--red);font-weight:700}
  .cr-client{font-size:20px;font-weight:700}
  .cr-meta{color:var(--mute);font-size:13px}
  .cr-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:6px 0 4px}
  .tile.es{background:#f1e6f7;border-left-color:var(--es)} .tile.es .v{color:var(--es)}
  @media(max-width:760px){.cr-tiles{grid-template-columns:1fr 1fr}.cr-head{flex-direction:column;align-items:flex-start}.cr-frame{padding:18px}}
  .tile{background:var(--grey);border-radius:4px;padding:12px 14px;border-left:5px solid var(--navy)}
  .tile.alert{background:#fde4e4;border-left-color:var(--red)}
  .tile .v{font-size:32px;font-weight:700;color:var(--navy);line-height:1.1} .tile.alert .v{color:var(--red-dk)}
  .tile .l{font-size:12px;color:#444;margin-top:2px}
  .cr-sum{margin:4px 0 0;padding-left:20px} .cr-sum li{margin:5px 0}
  .cr-cap{color:#444;margin:2px 0 8px}
  .cr-fig{margin:6px 0 10px;overflow-x:auto}
  .cr-note{font-size:12.5px;color:#555;background:var(--cream);border-left:4px solid #e6b800;padding:6px 10px;margin:8px 0}
  .cr-notes{font-size:13px;color:#333;padding-left:20px} .cr-notes li{margin:4px 0}
  .cr-table{width:100%;border-collapse:collapse;margin:6px 0 4px;font-size:13.5px}
  .cr-table th{background:var(--navy);color:#fff;text-transform:none;font-size:12.5px;letter-spacing:0;padding:7px 9px}
  .cr-table td{border-bottom:1px solid #cfd3da}
  .cr-table tr:nth-child(even) td{background:#f6f7f9}
  .cr-table.key td:first-child{white-space:nowrap}
  .cr-table .mv{font-size:12px;font-weight:700;margin-top:2px} .mv.worsened{color:var(--red-dk)} .mv.improved{color:var(--p3)} .mv.unchanged{color:var(--mute)}
  .again{color:var(--red-dk)}
  .cr-two{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:860px){.cr-two{grid-template-columns:1fr}}
  .panels{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
  .panel{border:1px solid var(--grey);border-radius:4px;padding:6px;background:#fff;break-inside:avoid}
  .cr-foot{margin-top:28px;padding-top:8px;border-top:1px solid var(--grey);font-size:11px;color:var(--mute);text-align:center}
  .staff-area{margin-top:34px;border-top:4px dashed #b8bfcc;padding-top:14px}
  .staff-banner{background:var(--navy);color:#fff;padding:8px 14px;border-radius:4px;margin-bottom:14px;font-weight:600}
  .staff-h{font-size:17px}
  body.standalone{background:#fff} body.standalone main{max-width:980px;margin:0 auto;padding:24px}

  @page{size:A4;margin:14mm}
  @media print{
    *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
    header,.noprint{display:none!important} body{background:#fff;font-size:11pt} main{margin:0;max-width:none;padding:0}
    .cr-frame{border:0;box-shadow:none;padding:0} .card{border:0;padding:0;break-inside:avoid}
    .cr h2{break-after:avoid} .cr-table tr,.panel,.tile{break-inside:avoid}
    body.standalone main{padding:0;max-width:none}
  }
  #filelist td.num{white-space:nowrap}