:root{
  --bg:#0f1115; --panel:#171a21; --panel2:#1e222b; --line:#2b3140;
  --txt:#e8ecf3; --dim:#8b94a7; --accent:#3b82f6; --accent2:#22c55e;
  --warn:#f43f5e; --warnbg:#3a1420;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  font-size:15px; line-height:1.6;
}
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px;
  padding:14px 24px; background:var(--bg);
  border-bottom:1px solid var(--line);
}
.topbar h1{font-size:17px; margin:0; font-weight:700; letter-spacing:.02em}
.status{margin-left:auto; font-size:13px; color:var(--dim)}
.status.ready{color:var(--accent2)}
main{max-width:1080px; margin:0 auto; padding:24px}

/* dropzone */
.dropzone{
  border:2px dashed var(--line); border-radius:16px; background:var(--panel);
  padding:40px 20px; text-align:center; cursor:pointer; transition:.15s;
}
.dropzone:hover{border-color:var(--accent); background:var(--panel2)}
.dropzone.drag{border-color:var(--accent); background:#16233a; transform:scale(1.005)}
.dz-icon{font-size:32px; color:var(--accent); line-height:1}
.dz-title{font-size:17px; font-weight:700; margin-top:10px}
.dz-sub{font-size:13px; color:var(--dim); margin-top:6px}
kbd{background:var(--panel2); border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-size:12px}

/* toolbar */
.toolbar{
  margin-top:20px; padding:14px 20px; border-radius:14px;
  background:var(--panel); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:12px;
}
.tb-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.tb-row + .tb-row{border-top:1px solid var(--line); padding-top:12px}
.tb-field{font-size:13px; color:var(--dim); font-weight:700; display:flex; align-items:center; gap:8px}
.tb-field select, .tb-field input{
  background:var(--bg); border:1px solid var(--line); color:var(--txt);
  font:inherit; font-size:14px; padding:6px 10px; border-radius:8px;
}
.tb-field select:focus, .tb-field input:focus{border-color:var(--accent); outline:none}
.tb-check{font-size:12px; color:var(--dim); font-weight:700; display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none}
.tb-check input{accent-color:var(--accent); width:15px; height:15px; cursor:pointer}
.tb-status{font-size:12px; color:var(--dim); flex:1; min-width:200px}
.tb-status.is-ok{color:var(--accent2)}
.tb-status.is-warn{color:#e0a72c}
.funds{font-size:13px; color:var(--dim); font-weight:700; display:flex; align-items:center; gap:8px}
.funds input{
  background:var(--bg); border:1px solid var(--line); color:var(--txt);
  font:inherit; font-size:15px; font-weight:800; padding:6px 10px; border-radius:8px;
  width:120px; text-align:right; font-variant-numeric:tabular-nums;
}
.funds input:focus{border-color:var(--accent); outline:none}
.toolbar-note{font-size:12px; color:var(--dim)}
.toolbar .btn{margin-left:auto}
.btn{
  background:var(--accent); color:#fff; border:0; border-radius:9px;
  padding:9px 16px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit;
}
.btn:hover{filter:brightness(1.12)}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--dim)}
.btn-sm{padding:5px 11px; font-size:12px}
.copybtn{
  background:var(--accent); color:#fff; border:0; border-radius:7px;
  padding:4px 10px; font-size:11px; font-weight:700; cursor:pointer;
  font-family:inherit; white-space:nowrap; flex:none;
}
.copybtn:hover{filter:brightness(1.15)}

/* race block */
.race{margin-top:24px; background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.race-head{display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--panel2)}
.race-no{display:flex; align-items:baseline; gap:2px; font-weight:800; font-size:17px}
.race-no input{
  background:var(--bg); border:1px solid var(--line); color:var(--txt);
  font:inherit; font-weight:800; font-size:17px; padding:3px 4px; border-radius:7px;
  width:44px; text-align:center; font-variant-numeric:tabular-nums;
}
.race-no input:focus{border-color:var(--accent); outline:none}
.race-file{font-size:12px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:320px}
.race-total{margin-left:auto; font-size:20px; font-weight:800; font-variant-numeric:tabular-nums}
.race-body{display:flex; gap:18px; padding:18px; align-items:flex-start; flex-wrap:wrap}
.thumb{width:260px; flex:none}
.thumb canvas{width:100%; border-radius:10px; border:1px solid var(--line); background:#fff; display:block}
.thumb-cap{font-size:11px; color:var(--dim); margin-top:6px; text-align:center}
.players{flex:1; min-width:420px; display:flex; flex-direction:column; gap:16px}

/* player card */
.player{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel2)}
.player-head{display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.pay{font-size:11px; color:var(--dim); font-weight:700; display:flex; align-items:center; gap:5px}
.pay input{
  background:var(--bg); border:1px solid var(--line); color:var(--txt);
  font:inherit; font-size:13px; padding:4px 8px; border-radius:7px;
  width:88px; text-align:right; font-variant-numeric:tabular-nums;
}
.pay input:focus{border-color:var(--accent); outline:none}
.player-head input{
  background:transparent; border:1px solid transparent; color:var(--txt);
  font:inherit; font-weight:700; font-size:15px; padding:3px 7px; border-radius:6px; width:200px;
}
.player-head input:hover{border-color:var(--line)}
.player-head input:focus{border-color:var(--accent); outline:none; background:var(--bg)}
.player-total{margin-left:auto; font-weight:800; font-size:17px; font-variant-numeric:tabular-nums}
table{width:100%; border-collapse:collapse; font-size:14px}
th{font-size:11px; color:var(--dim); font-weight:700; text-align:left; padding:6px 10px; border-bottom:1px solid var(--line)}
td{padding:4px 10px; border-bottom:1px solid #232833}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
td input{
  background:var(--bg); border:1px solid var(--line); color:var(--txt);
  font:inherit; font-size:14px; padding:5px 8px; border-radius:6px; width:100%;
  font-variant-numeric:tabular-nums;
}
td input:focus{border-color:var(--accent); outline:none}
td input.amt{text-align:right}
tr.bad td input{border-color:var(--warn); background:var(--warnbg)}
tr.bad{background:rgba(244,63,94,.06)}
tr.shaky td input{border-color:#d99a1e; background:#33270c}
tr.shaky{background:rgba(217,154,30,.07)}
tr.shaky .msg{color:#e0a72c}
.pts{color:var(--dim); font-size:13px; white-space:nowrap}
.sub{font-weight:700; white-space:nowrap}
.msg{font-size:11px; color:var(--warn); padding:0 10px 6px}
.rowdel{background:none; border:0; color:var(--dim); cursor:pointer; font-size:16px; line-height:1; padding:2px 4px}
.rowdel:hover{color:var(--warn)}
.player-foot{padding:8px 12px; border-top:1px solid var(--line)}

/* misc */
.legend{margin-top:32px; padding:20px 24px; background:var(--panel); border:1px solid var(--line); border-radius:16px; color:var(--dim); font-size:13px}
.legend h2{font-size:13px; color:var(--txt); margin:0 0 10px}
.legend ul{margin:0; padding-left:20px}
.legend li{margin:3px 0}
.legend b{color:var(--txt); font-variant-numeric:tabular-nums}
.legend-note{margin:12px 0 0}
.warn-inline{color:var(--warn); font-weight:700}
.shaky-inline{color:#e0a72c; font-weight:700}
.hidden{display:none !important}
.overlay{position:fixed; inset:0; background:rgba(10,12,16,.82); display:flex; align-items:center; justify-content:center; z-index:50}
.overlay-box{text-align:center}
.spinner{width:40px; height:40px; margin:0 auto 14px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{
  position:fixed; bottom:28px; left:50%; transform:translate(-50%,80px);
  background:var(--accent2); color:#04210f; font-weight:700; font-size:14px;
  padding:11px 22px; border-radius:10px; opacity:0; transition:.25s; z-index:60; pointer-events:none;
}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* 演者ごとの集計 */
.sum-title{font-size:13px; color:var(--dim); font-weight:700; margin:32px 0 12px}
.sum{margin-bottom:16px; background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.sum-head{display:flex; align-items:baseline; gap:12px; padding:13px 18px; border-bottom:1px solid var(--line); background:var(--panel2)}
.sum-name{font-size:17px; font-weight:800}
.sum-races{font-size:11px; color:var(--dim)}
.sum-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line)}
.sum-grid .cell{background:var(--panel); padding:14px 16px; display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.sum-grid .cap{font-size:11px; color:var(--dim); font-weight:700}
.sum-grid .val{font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1.1}
.sum-grid .unit{font-size:15px; margin-left:2px}
.sum-grid .cell.rate .val{color:#facc15}
.sum-grid .val.minus{color:var(--warn)}
.sum-grid .val.plus{color:var(--accent2)}
.sum-left{display:flex; align-items:center; gap:12px; padding:14px 18px; border-top:1px solid var(--line); background:linear-gradient(90deg,rgba(217,119,6,.16),transparent 60%)}
.sum-left .cap{font-size:13px; font-weight:800; color:#fbbf24}
.sum-left .val{font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.sum-left .note{font-size:11px; color:var(--dim); margin-left:auto}
@media (max-width:760px){ .sum-grid{grid-template-columns:repeat(2,1fr)} }

/* レース結果と的中表示 */
.race-result{
  display:flex; align-items:baseline; gap:8px; padding:3px 10px; border-radius:8px;
  background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.35);
}
.race-pending{
  font-size:11px; color:var(--dim); padding:3px 10px; border-radius:8px;
  background:var(--panel2); border:1px solid var(--line);
}
.race-result b{font-size:15px; font-weight:800; letter-spacing:.04em; color:var(--accent2)}
.race-result span{font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums}
tr.hit td{background:rgba(34,197,94,.09)}
tr.hit td input{border-color:rgba(34,197,94,.5)}
.hitbadge{
  display:inline-block; background:var(--accent2); color:#04210f;
  font-size:10px; font-weight:800; padding:1px 5px; border-radius:4px; margin-right:6px;
}