:root{
  --orange:#E2640A; --orange-dk:#B44E06;
  --ink:#1d2024; --grey:#5a6168; --line:#d6d9dd;
  --bg:#f5f6f8; --card:#ffffff; --good:#1c7c3c;
  --warn:#9a6700; --bad:#b4232a;
  --tap:44px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:17px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-text-size-adjust:100%;
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#appbar{
  background:var(--orange); color:#fff;
  padding:14px 16px 12px; position:sticky; top:0; z-index:5;
}
#appbar h1{margin:0; font-size:20px; font-weight:800; letter-spacing:.3px}
#appbar h1 span{font-weight:500; opacity:.85}
.meta{font-size:12px; opacity:.9; margin-top:2px}

#tabs{
  display:flex; background:var(--card);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:4;
}
.tab{
  flex:1; min-height:var(--tap); border:0; background:none;
  font-size:16px; font-weight:600; color:var(--grey);
  padding:12px 4px; cursor:pointer;
  border-bottom:3px solid transparent;
}
.tab.active{color:var(--orange-dk); border-bottom-color:var(--orange)}

#app{padding:14px 12px 40px; max-width:760px; margin:0 auto}
.panel.hidden,.hidden{display:none}
.loading{padding:40px 12px; text-align:center; color:var(--grey)}

.srch{display:block; margin-bottom:14px}
.srch input,.srch select{
  width:100%; min-height:var(--tap); font-size:17px;
  padding:11px 12px; border:2px solid var(--line);
  border-radius:10px; background:var(--card); color:var(--ink);
}
.srch input:focus,.srch select:focus{
  outline:0; border-color:var(--orange)
}

.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:14px; margin-bottom:12px;
}
.card h2{margin:0 0 4px; font-size:19px}
.card .sub{color:var(--grey); font-size:14px; margin-bottom:8px}
.stat-row{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0}
.stat{
  background:var(--bg); border:1px solid var(--line);
  border-radius:8px; padding:6px 10px; font-size:13px;
}
.stat b{display:block; font-size:17px; color:var(--orange-dk)}

.sec-h{
  font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--grey);
  margin:16px 0 8px; border-bottom:1px solid var(--line); padding-bottom:4px;
}
details{border:1px solid var(--line); border-radius:10px; margin-bottom:8px;
  background:var(--card)}
details>summary{
  list-style:none; cursor:pointer; min-height:var(--tap);
  display:flex; justify-content:space-between; align-items:center;
  gap:8px; padding:11px 12px; font-weight:600;
}
details>summary::-webkit-details-marker{display:none}
details>summary::after{content:"▾"; color:var(--grey)}
details[open]>summary::after{content:"▴"}
.det-body{padding:0 12px 12px}

.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:0 -2px}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{text-align:left; padding:8px 6px; border-bottom:1px solid var(--line);
  vertical-align:top}
th{color:var(--grey); font-size:12px; text-transform:uppercase;
  letter-spacing:.4px; cursor:pointer; white-space:nowrap}
th[data-sort]::after{content:" ⇅"; opacity:.4}
th.asc::after{content:" ▲"; opacity:1}
th.desc::after{content:" ▼"; opacity:1}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums;
  white-space:nowrap}
.muted{color:var(--grey)}
.np{color:var(--grey); font-style:italic}

.badge{display:inline-block; font-size:12px; font-weight:700;
  padding:2px 8px; border-radius:999px; vertical-align:middle}
.b-good{background:#e4f4e8; color:var(--good)}
.b-warn{background:#fbeed0; color:var(--warn)}
.b-bad{background:#f7dcdd; color:var(--bad)}

.fee{display:flex; justify-content:space-between; gap:12px;
  padding:8px 0; border-bottom:1px solid var(--line)}
.fee .q{flex:1}
.fee .a{font-weight:600; white-space:pre-wrap; text-align:right;
  max-width:48%}
.fee.empty .a{color:var(--bad); font-style:italic; font-weight:600}

.info{display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:var(--grey); color:#fff; font-size:11px; font-weight:700;
  margin-left:5px; cursor:pointer; vertical-align:middle}
.tip{position:fixed; left:12px; right:12px; bottom:18px; z-index:20;
  background:var(--ink); color:#fff; padding:14px 16px;
  border-radius:12px; font-size:14px; line-height:1.4;
  box-shadow:0 6px 24px rgba(0,0,0,.3)}
.tip b{color:#ffd9b3}
.empty-note{padding:30px 12px; text-align:center; color:var(--grey)}
.warn-note{background:#fbeed0; border:1px solid #e6c98a; color:var(--warn);
  padding:10px 12px; border-radius:10px; font-size:14px; margin-bottom:12px}
.linkish{color:var(--orange-dk); font-weight:600; cursor:pointer}

@media (max-width:430px){
  #app{padding:12px 10px 40px}
  .card{padding:12px}
  th,td{padding:8px 6px; font-size:13px}
  .tab{font-size:15px}
  .fee .a{max-width:44%}
}