/* ============ PO Portal — "The Ledger" theme, shared with the Trading Portal ============ */
:root{
  --bg-0:#0a0a0c; --bg-1:#101015; --bg-2:#16161d; --bg-elev:#1a1a22; --bg-3:#20202a;
  --border-1:#24242c; --border-2:#303039; --border-3:#3a3a47;
  --text-1:#f4f4f5; --text-2:#a6a6b0; --text-3:#70707c; --text-4:#4a4a55;
  --profit:#22c55e; --profit-2:#4ade80; --profit-soft:rgba(34,197,94,.13);
  --loss:#ef4444;   --loss-2:#f87171;   --loss-soft:rgba(239,68,68,.13);
  --gold:#e0b352;   --gold-2:#f0c970;   --gold-soft:rgba(224,179,82,.12);
  --accent:#a78bfa; --info:#60a5fa;     --warn:#eab308; --warn-soft:rgba(234,179,8,.12);
  --radius:14px;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.35);
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  /* system sans for numbers => plain un-slashed zero, offline-safe */
  --mono:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(224,179,82,.05), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(34,197,94,.04), transparent 55%),
    var(--bg-0);
  color:var(--text-1); font-family:var(--sans); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased; min-height:100%;
}
button{font-family:inherit; cursor:pointer}
input,select{font-family:inherit}
.num,.mono{font-family:var(--mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"zero" 0}

/* ---------- shell ---------- */
main{max-width:1760px; margin:0 auto; padding:22px 26px 64px}
footer{max-width:1760px; margin:0 auto; padding:0 26px 32px; color:var(--text-4); font-size:12px}

header.app-head{
  max-width:1760px; margin:0 auto; padding:22px 26px 0;
  display:flex; align-items:center; gap:14px;
}
header.app-head a{display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit}
header.app-head .signout{margin-left:auto; color:var(--text-3); font-size:13px; font-weight:600}
header.app-head .signout:hover{color:var(--gold-2)}
.logo{
  width:42px; height:42px; border-radius:12px; flex:0 0 auto;
  background:linear-gradient(160deg,var(--gold-2),var(--gold));
  display:grid; place-items:center; color:#1a1305; font-weight:800; font-size:13px; letter-spacing:.04em;
  box-shadow:0 6px 16px rgba(224,179,82,.25);
}
.title-h1{font-size:22px; font-weight:800; letter-spacing:-.02em}
.title-sub{font-size:12.5px; color:var(--text-3)}

/* ---------- hero ---------- */
.hero{margin:18px 0 16px}
.hero h1{font-size:24px; font-weight:800; letter-spacing:-.02em; margin-bottom:6px}
.hero p{color:var(--text-2); max-width:70ch}

/* ---------- panels ---------- */
.card,.panel{
  background:var(--bg-2); border:1px solid var(--border-1); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:16px; padding:16px 18px;
}
.card h2,.panel h2{font-size:15px; font-weight:700; letter-spacing:-.01em; margin-bottom:12px}
.fine{color:var(--text-3); font-size:12.5px; margin-top:10px}
code{
  background:var(--bg-0); border:1px solid var(--border-2); border-radius:6px;
  padding:1px 6px; font-size:12px; color:var(--gold-2); font-family:var(--mono);
}

/* ---------- upload ---------- */
.dropzone{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  border:2px dashed var(--border-2); border-radius:12px; padding:36px 20px;
  background:var(--bg-1); cursor:pointer; text-align:center; transition:.15s; position:relative;
}
.dropzone:hover,.dropzone.over{border-color:var(--gold); background:var(--gold-soft)}
.dropzone.has-file{border-style:solid; border-color:var(--gold); background:var(--gold-soft)}
.dropzone input{position:absolute; width:1px; height:1px; opacity:0}
.dz-icon{font-size:30px}
.dz-main{font-weight:700}
.dz-sub{color:var(--text-3); font-size:12.5px}

.row{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-top:16px}
.field{display:flex; flex-direction:column; gap:6px}
.field span{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); font-weight:700}
.field em{font-style:normal; opacity:.7; text-transform:none; letter-spacing:0}
.field select,.field input{
  background:var(--bg-0); border:1px solid var(--border-2); color:var(--text-1);
  padding:9px 11px; border-radius:9px; font-size:13.5px; outline:none; min-width:170px;
}
.field select:focus,.field input:focus{border-color:var(--gold)}
.field select option{background:var(--bg-elev); color:var(--text-1)}

.btn{
  background:linear-gradient(180deg,var(--gold-2),var(--gold)); color:#1a1305; border:none;
  padding:10px 16px; border-radius:10px; font-size:13.5px; font-weight:700; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{
  background:var(--bg-elev); border:1px solid var(--border-2); color:var(--text-1);
}
.btn.ghost:hover{border-color:var(--border-3); background:var(--bg-3); filter:none}

.alert{
  background:var(--loss-soft); border:1px solid rgba(239,68,68,.35); color:var(--loss-2);
  border-radius:10px; padding:12px 16px; margin-bottom:16px; font-size:13.5px;
}
.alert ul{margin:8px 0 0; padding-left:20px}

.cols{columns:3; margin:8px 0 4px; padding-left:18px; font-size:13px; color:var(--text-2)}
.cols li{margin-bottom:4px; break-inside:avoid}

/* ---------- preview ---------- */
.crumb{display:flex; justify-content:space-between; align-items:baseline;
  margin:14px 0; font-size:13px; color:var(--text-3)}
.crumb b{color:var(--text-1)}
.crumb a{color:var(--gold-2); text-decoration:none; font-weight:700}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:0 0 16px}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
.stats div{
  background:var(--bg-2); border:1px solid var(--border-1); border-radius:var(--radius);
  padding:16px 18px; position:relative; overflow:hidden; box-shadow:var(--shadow);
}
.stats div::after{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--dot,var(--gold)); opacity:.85}
.stats b{display:block; font-size:30px; font-weight:800; font-family:var(--mono);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; margin-bottom:2px}
.stats span{color:var(--text-3); font-size:11px; letter-spacing:.07em; text-transform:uppercase; font-weight:700}
.stats .hi{--dot:var(--gold)}
.stats .hi b{color:var(--gold-2)}
.stats div:nth-child(2){--dot:var(--accent)}
.stats div:nth-child(3){--dot:var(--info)}
.stats div:nth-child(4){--dot:var(--profit)}
.stats .bad{--dot:var(--loss)}
.stats .bad b{color:var(--loss-2)}

/* ---------- message blocks ---------- */
.block{padding:0; overflow:hidden}
.block h2{
  display:flex; align-items:center; gap:10px; margin:0; padding:14px 18px;
  border-bottom:1px solid var(--border-1); border-left:3px solid var(--edge,var(--gold));
}
.count{
  background:var(--bg-elev); border:1px solid var(--border-2); border-radius:999px;
  padding:1px 10px; font-size:12px; font-weight:700; color:var(--text-2); font-family:var(--mono);
}
.msgs{margin:0; padding:14px 18px 14px 40px; font-size:13px; color:var(--text-2)}
.msgs li{margin-bottom:6px}
.msgs li::marker{color:var(--text-4)}
.block.conflict{--edge:var(--loss)}
.block.conflict h2{color:var(--loss-2); background:var(--loss-soft)}
.block.conflict .count{color:var(--loss-2); border-color:rgba(239,68,68,.35)}
.block.conflict .msgs{color:var(--text-1)}
.block.price{--edge:var(--profit)}
.block.price h2{color:var(--profit-2)}
.block.check{--edge:var(--warn)}
.block.check h2{color:var(--warn); background:var(--warn-soft)}

/* ---------- table ---------- */
.scroll{overflow-x:auto; margin:0 -18px -16px; padding:0 18px 16px}
.grid{border-collapse:collapse; width:100%; font-size:13px; white-space:nowrap}
.grid th{
  padding:11px 12px; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-3); font-weight:700; border-bottom:1px solid var(--border-2);
  text-align:center; position:sticky; top:0; background:var(--bg-2);
}
.grid td{padding:11px 12px; border-bottom:1px solid var(--border-1); text-align:center}
.grid tbody tr:hover td{background:rgba(255,255,255,.02)}
.grid .num{font-family:var(--mono); font-variant-numeric:tabular-nums}
.grid .sz{color:var(--text-3); width:34px}
.grid .style{font-weight:700; color:var(--gold-2)}
.grid .tick{width:34px}
.grid input[type=checkbox]{accent-color:var(--gold); width:15px; height:15px}
.grid tfoot td{
  background:var(--bg-elev); font-weight:800; border-top:2px solid var(--border-2);
  border-bottom:none; font-family:var(--mono);
}
.grid tr.warnrow td{background:var(--warn-soft)}
.grid tr.warnrow:hover td{background:rgba(234,179,8,.18)}

/* ---------- login ---------- */
.login{display:flex; justify-content:center; padding-top:8vh}
.login .card{width:100%; max-width:380px; padding:24px}
.login .field{margin-top:0}
.login .field input{min-width:0; width:100%}