:root{
  --bg:#ffffff; --ink:#0a0a0a; --ink2:#525252; --ink3:#a3a3a3;
  --line:#ebebeb; --line2:#dcdcdc; --card:#ffffff; --soft:#fafafa;
  --good:#16a34a; --good-bg:#f0fdf4; --maybe:#d97706; --maybe-bg:#fffbeb;
  --bad:#9ca3af; --hit:#16a34a; --miss:#dc2626;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'IBM Plex Sans Thai',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.5;
  font-size:15px;padding:24px 16px 48px;-webkit-font-smoothing:antialiased}
#app{max-width:760px;margin:0 auto}

/* header */
.hd{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:18px;
  border-bottom:2px solid var(--ink);margin-bottom:22px}
.hd h1{font-size:26px;font-weight:700;letter-spacing:-.01em}
.sub{color:var(--ink2);font-size:13px;font-weight:300;margin-top:2px}
.hd-r{text-align:right}
.next{font-family:var(--mono);font-size:19px;font-weight:700}
.next-sub{color:var(--ink2);font-size:12px;text-transform:uppercase;letter-spacing:.08em}

/* banner */
.banner{border:1px solid var(--line2);border-left:3px solid var(--maybe);background:var(--maybe-bg);
  border-radius:8px;padding:12px 14px;margin-bottom:22px;font-size:13.5px;color:#7c4a06}
.banner b{font-weight:600}

/* calculator */
.calc{margin-bottom:16px;border:1.5px solid var(--ink)}
.calc-controls{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.calc-budget{display:flex;flex-direction:column;gap:5px;flex:1;min-width:170px}
.calc-budget span{font-size:12px;color:var(--ink2)}
.calc-budget input{font-family:var(--mono);font-size:24px;font-weight:700;padding:8px 12px;
  border:1px solid var(--line2);border-radius:9px;width:100%;color:var(--ink);background:var(--soft)}
.calc-budget input:focus{outline:none;border-color:var(--ink)}
.calc-hint{font-size:12px;color:var(--ink2);line-height:1.5;text-align:right;align-self:center}
.calc-opts{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.seg button{font-family:var(--sans);font-size:13px;padding:8px 13px;border:0;background:#fff;color:var(--ink2);cursor:pointer;border-right:1px solid var(--line2)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--ink);color:#fff;font-weight:600}
.calc-n{font-size:13px;color:var(--ink2);display:flex;align-items:center;gap:6px}
.calc-n select{font-family:var(--mono);font-size:14px;padding:6px 8px;border:1px solid var(--line2);border-radius:7px;background:#fff}

.calc-out{display:flex;flex-direction:column;gap:9px}
.cb{display:flex;flex-direction:column;gap:2px;padding:9px 12px;background:var(--soft);border-radius:9px}
.cb-h{display:flex;justify-content:space-between;font-weight:600;font-size:14px}
.cb-h span{font-family:var(--mono)}
.cb-d{font-size:12px;color:var(--ink2)}
.cb-d b{font-family:var(--mono);color:var(--good)}
.cb-total{display:flex;flex-direction:column;gap:7px;padding:11px 12px;border:1px solid var(--line2);border-radius:9px;margin-top:2px}
.cb-total>div{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px}
.cb-total>div span{color:var(--ink2)}
.cb-total>div b{font-family:var(--mono);font-size:16px;font-weight:700}
.cb-total .neg b{color:var(--miss)}
.cb-total .mix b{color:var(--maybe)}
.cb-note{font-size:11.5px;color:var(--ink2);line-height:1.5;padding:2px 2px 0}

.stake{font-family:var(--mono);font-size:14px;font-weight:700;min-width:46px;text-align:right;color:var(--ink)}
.stake.off{color:var(--ink3);font-weight:400}
.num.good .stake{color:var(--good)} .num.maybe .stake{color:var(--maybe)}

/* cards */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.card{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:16px 16px 14px}
.card-hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.card-hd h2{font-size:15px;font-weight:600;letter-spacing:.01em}
.cov{font-family:var(--mono);font-size:11.5px;color:var(--ink3);font-weight:500}

/* number rows */
.nums{list-style:none;display:flex;flex-direction:column;gap:1px}
.num{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:8px 8px;border-radius:7px}
.num:nth-child(odd){background:var(--soft)}
.num .n{font-family:var(--mono);font-size:21px;font-weight:700;letter-spacing:.02em;min-width:34px}
.num .an{font-size:12.5px;color:var(--ink2);font-weight:300;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.num .p{display:flex;align-items:center;gap:8px;justify-self:end;text-align:right}
.num .pct{font-family:var(--mono);font-size:13px;font-weight:700}
.num .ev{font-family:var(--mono);font-size:10.5px;color:var(--ink3);min-width:50px;text-align:right}
.dotc{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:var(--bad)}
.num.good .dotc{background:var(--good)} .num.good .pct{color:var(--good)}
.num.good{background:var(--good-bg)!important}
.num.maybe .dotc{background:var(--maybe)} .num.maybe .pct{color:var(--maybe)}
.num.bad .pct{color:var(--ink)}

.card-ft{margin-top:11px;padding-top:10px;border-top:1px dashed var(--line2);
  font-size:11.5px;color:var(--ink2);line-height:1.45}
.card-ft .be{font-family:var(--mono);color:var(--ink)}

/* animals */
.animals{margin-bottom:16px}
.animal-row{list-style:none;display:flex;gap:10px;flex-wrap:wrap}
.animal-row li{flex:1;min-width:140px;display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.animal-row .rk{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--ink3)}
.animal-row .am{font-weight:600;font-size:15px}
.animal-row .an-nums{font-family:var(--mono);font-size:11px;color:var(--ink3);margin-left:auto}

/* result */
.result-body{display:flex;flex-direction:column;gap:10px}
.r-main{display:flex;gap:14px;align-items:center}
.r-4{font-family:var(--mono);font-size:34px;font-weight:700;letter-spacing:.03em}
.r-seg{display:flex;gap:8px}
.r-chip{font-family:var(--mono);font-size:13px;border:1px solid var(--line2);border-radius:6px;
  padding:3px 8px;font-weight:700}
.r-chip.hit{border-color:var(--hit);color:var(--hit);background:var(--good-bg)}
.r-chip.miss{color:var(--ink2)}
.r-verdict{font-size:13px;font-weight:600}
.r-verdict.hit{color:var(--hit)} .r-verdict.miss{color:var(--miss)}

/* stats */
.stat-rows{display:flex;flex-direction:column;gap:12px}
.st{display:grid;grid-template-columns:84px 1fr auto;align-items:center;gap:10px}
.st .lbl{font-size:13px;color:var(--ink2)}
.st .bar{height:6px;background:var(--line);border-radius:3px;position:relative;overflow:hidden}
.st .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);border-radius:3px}
.st .bar .be{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--maybe)}
.st .val{font-family:var(--mono);font-size:12.5px;font-weight:700;text-align:right;white-space:nowrap}
.st .val .ci{color:var(--ink3);font-weight:500;font-size:10.5px}

.fresh{font-size:13px;color:var(--ink);line-height:1.6;padding:6px 0}
.fresh span{color:var(--ink2);font-size:12px}

/* legend + footer */
.legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--ink2);
  margin:18px 2px 14px}
.legend .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.legend .dot.good{background:var(--good)} .legend .dot.maybe{background:var(--maybe)} .legend .dot.bad{background:var(--bad)}
.legend .sp{flex:1}
.ft{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:14px;
  font-size:11.5px;color:var(--ink3)}
.ft .warn{color:var(--ink2)}

@media(max-width:620px){
  .grid2{grid-template-columns:1fr}
  .hd h1{font-size:22px}
  .r-4{font-size:28px}
}