:root{
    --ink:#16243D; --ink-soft:#3A4A66; --paper:#F5F2EC; --card:#FFFFFF;
    --line:#E3DDD2; --line-strong:#CFC7B8; --muted:#7C7464; --gold:#C9A227;
    --s1:#2E7D6B; --s2:#7A9B4E; --s3:#C9A227; --s4:#D27D3F; --s5:#AE3F3C;
    --ok-bg:#E7F1ED; --ok-fg:#1F6B57; --err-bg:#F7E7E5; --err-fg:#9B3531;
    --mono:"SF Mono","JetBrains Mono","Roboto Mono",Consolas,"Courier New",monospace;
    --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Tahoma,Arial,sans-serif;
    --shadow:0 1px 2px rgba(22,36,61,.04),0 8px 24px rgba(22,36,61,.06);
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.5;
    -webkit-font-smoothing:antialiased;padding:48px 20px 72px}
  .wrap{max-width:780px;margin:0 auto}

  .eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
    font-weight:700;margin:0 0 10px}
  .masthead h1{font-size:38px;line-height:1.04;letter-spacing:-.02em;font-weight:700;margin:0}
  .masthead .lede{margin:14px 0 0;color:var(--ink-soft);font-size:16px;max-width:60ch}
  .privacy{margin:18px 0 0;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;
    color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px}
  .privacy .dot{width:7px;height:7px;border-radius:50%;background:var(--s1);flex:none}

  .drop{margin:30px 0 0;background:var(--card);border:1.5px dashed var(--line-strong);
    border-radius:16px;padding:46px 28px;text-align:center;cursor:pointer;
    transition:border-color .18s,background .18s,transform .18s;box-shadow:var(--shadow)}
  .drop:hover{border-color:var(--ink-soft)}
  .drop:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
  .drop.drag{border-color:var(--gold);background:#FFFDF6;transform:translateY(-1px)}
  .drop .ic{width:46px;height:46px;margin:0 auto 14px;color:var(--ink-soft)}
  .drop h2{margin:0 0 6px;font-size:19px;font-weight:600}
  .drop p{margin:0;color:var(--muted);font-size:14px}
  .drop .pick{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);
    text-underline-offset:3px;font-weight:600}
  .hint{margin:14px 2px 0;font-size:12.5px;color:var(--muted);text-align:center}

  .bar{height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin:22px 0 0;display:none}
  .bar.on{display:block}
  .bar i{display:block;height:100%;width:35%;background:var(--gold);border-radius:2px;
    animation:slide 1.05s ease-in-out infinite}
  @keyframes slide{0%{margin-left:-35%}100%{margin-left:100%}}

  .error{display:none;margin:24px 0 0;background:var(--err-bg);border:1px solid #EBCDCA;
    border-left:4px solid var(--err-fg);border-radius:10px;padding:16px 18px;color:#5e2422}
  .error.on{display:block}
  .error b{color:var(--err-fg)}

  .results{display:none}
  .results.on{display:block;animation:rise .4s ease both}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  .sec-label{display:flex;align-items:center;gap:12px;margin:34px 0 14px;
    font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700}
  .sec-label::after{content:"";flex:1;height:1px;background:var(--line)}

  .card{background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:22px 24px;box-shadow:var(--shadow)}

  .headline{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
  .headline .big{font-family:var(--mono);font-size:40px;font-weight:600;letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;line-height:1}
  .headline .big .cur{font-size:18px;color:var(--muted);margin-right:8px;font-weight:500}
  .headline .meta{font-size:13px;color:var(--muted);text-align:right;line-height:1.7}
  .chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
    border-radius:999px;padding:5px 12px;margin-top:10px}
  .chip.ok{background:var(--ok-bg);color:var(--ok-fg)}
  .chip.bad{background:var(--err-bg);color:var(--err-fg)}

  .supplier{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
    display:grid;grid-template-columns:1fr 1fr;gap:9px 22px;font-size:13.5px}
  .supplier .row{display:flex;justify-content:space-between;gap:12px}
  .supplier .k{color:var(--muted)}
  .supplier .v{font-weight:600;text-align:right}
  .supplier .ar{direction:rtl;unicode-bidi:plaintext}
  .supplier .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

  .aging{margin-top:2px}
  .ar-row{display:grid;grid-template-columns:128px 1fr 132px;align-items:center;gap:14px;
    padding:13px 0;border-bottom:1px solid var(--line)}
  .ar-row:last-child{border-bottom:none}
  .ar-band{display:flex;align-items:center;gap:9px}
  .ar-swatch{width:11px;height:11px;border-radius:3px;flex:none}
  .ar-band .rng{font-size:13.5px;font-weight:600}
  .ar-band .days{font-size:11px;color:var(--muted);margin-left:2px}
  .track{height:13px;background:#F1ECE2;border-radius:7px;overflow:hidden}
  .track i{display:block;height:100%;border-radius:7px;width:0;
    transition:width .7s cubic-bezier(.22,1,.36,1)}
  .ar-amt{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
  .ar-amt .n{font-size:14.5px;font-weight:600}
  .ar-amt .p{font-size:11.5px;color:var(--muted)}
  .ar-total{display:grid;grid-template-columns:128px 1fr 132px;gap:14px;align-items:center;
    margin-top:6px;padding-top:14px;border-top:2px solid var(--ink)}
  .ar-total .lbl{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
  .ar-total .n{text-align:right;font-family:var(--mono);font-weight:700;font-size:16px;
    font-variant-numeric:tabular-nums}

  .recon{margin-top:2px;font-size:13.5px}
  .recon .line{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line)}
  .recon .line:last-child{border-bottom:none}
  .recon .line.tot{font-weight:700;border-top:1.5px solid var(--ink);border-bottom:none;margin-top:4px;padding-top:12px}
  .recon .num{font-family:var(--mono);font-variant-numeric:tabular-nums}

  .actions{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
  .btn{appearance:none;border:none;cursor:pointer;font-family:var(--sans);font-size:15px;font-weight:600;
    background:var(--ink);color:#fff;border-radius:11px;padding:14px 24px;display:inline-flex;
    align-items:center;gap:10px;transition:transform .14s,box-shadow .14s,background .14s;
    box-shadow:0 6px 16px rgba(22,36,61,.18)}
  .btn:hover{background:#1f3257;transform:translateY(-1px)}
  .btn:active{transform:translateY(0)}
  .btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
  .btn .ic{width:18px;height:18px}
  .btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line-strong);box-shadow:none}
  .btn.ghost:hover{background:#FBF9F4;border-color:var(--ink-soft)}
  .save-note{font-size:12.5px;color:var(--muted)}

  canvas#chart{display:none}

  .foot{margin:40px 0 0;font-size:12px;color:var(--muted);line-height:1.6}
  .foot b{color:var(--ink-soft);font-weight:600}

  @media (max-width:560px){
    .masthead h1{font-size:30px}
    .headline .big{font-size:32px}
    .ar-row,.ar-total{grid-template-columns:92px 1fr 100px;gap:10px}
    .supplier{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }