:root{
  --ink:#22303f; --ink-soft:#4a5b6b;
  --line:#c9d2d8; --line-strong:#9aa8b2;
  --bg:#eef1f3; --panel:#ffffff;
  --grass:#2f7d54; --grass-bg:#e5f2ea;
  --walk:#2f5f9e; --walk-bg:#e6edf6;
  --out:#6b7783;  --out-bg:#eef1f3;
  --sac:#8a6d2f;  --sac-bg:#f3eddf;
  --err:#a4472e;  --err-bg:#f6e8e2;
  --radius:6px;
  --mono:'SF Mono','Menlo','Consolas','Courier New',monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Hiragino Sans','Noto Sans JP',sans-serif;
}
*{box-sizing:border-box;}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;}
button{font-family:var(--sans);}

/* ---- レイアウト ---- */
.app{display:flex;min-height:100vh;}
.sidebar{width:210px;background:var(--panel);border-right:1px solid var(--line);flex-shrink:0;padding:16px 0;display:flex;flex-direction:column;}
.brand{padding:0 18px 14px;border-bottom:1px solid var(--line);margin-bottom:10px;}
.brand b{font-size:15px;} .brand span{display:block;font-size:11px;color:var(--ink-soft);font-family:var(--mono);margin-top:2px;}
.nav{flex:1;} .nav a{display:block;padding:11px 18px;font-size:14px;color:var(--ink-soft);cursor:pointer;border-left:3px solid transparent;}
.nav a:hover{background:var(--bg);} .nav a.active{color:var(--ink);border-left-color:var(--grass);font-weight:600;background:var(--bg);}
.nav-foot{padding:10px 18px;border-top:1px solid var(--line);}
.main{flex:1;padding:22px 26px;max-width:1040px;}
.screen{display:none;} .screen.show{display:block;}
h1{font-size:20px;margin:0 0 4px;} .sub{color:var(--ink-soft);font-size:13px;margin:0 0 18px;}

/* ---- 部品 ---- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:16px;}
.panel h2{font-size:14px;margin:0 0 12px;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:8px;}
label{display:block;font-size:12px;color:var(--ink-soft);margin:0 0 4px;}
input,select{font-family:var(--sans);font-size:14px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:4px;background:#fff;width:100%;}
.row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px;} .row>div{flex:1;min-width:150px;}
.btn{font-size:14px;padding:9px 16px;border-radius:4px;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;}
.btn.ghost{background:#fff;color:var(--ink);} .btn.sm{padding:5px 10px;font-size:13px;} .btn:hover{opacity:.9;}
.btn.danger{background:#fff;color:var(--err);border-color:var(--err);}
table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{border:1px solid var(--line);padding:7px 9px;text-align:left;}
th{background:var(--bg);font-weight:600;font-size:12px;color:var(--ink-soft);}
td.num,th.num{text-align:center;font-family:var(--mono);}
.pill{display:inline-block;font-size:11px;padding:2px 7px;border-radius:10px;background:var(--bg);border:1px solid var(--line);margin:1px;}
.muted{color:var(--ink-soft);font-size:12px;}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;flex-wrap:wrap;}
.grid-wrap{overflow-x:auto;}
.empty{padding:26px;text-align:center;color:var(--ink-soft);}

/* ---- タブ ---- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap;}
.tabs button{background:none;border:none;border-bottom:2px solid transparent;padding:9px 13px;font-size:13px;color:var(--ink-soft);cursor:pointer;}
.tabs button.active{color:var(--ink);border-bottom-color:var(--grass);font-weight:600;}
.tabpane{display:none;} .tabpane.show{display:block;}

/* ---- 打席グリッド ---- */
table.grid td.cell{text-align:center;cursor:pointer;font-family:var(--mono);min-width:56px;height:40px;font-size:13px;}
table.grid td.cell:hover{outline:2px solid var(--grass);outline-offset:-2px;}
table.grid td.pname{text-align:left;white-space:nowrap;}
.c-hit{background:var(--grass-bg);color:var(--grass);font-weight:700;}
.c-out{background:var(--out-bg);color:var(--out);}
.c-walk{background:var(--walk-bg);color:var(--walk);font-weight:600;}
.c-sac{background:var(--sac-bg);color:var(--sac);}
.c-err{background:var(--err-bg);color:var(--err);}
.innb{display:inline-block;font-size:9px;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:6px;padding:0 3px;margin-left:3px;vertical-align:super;font-family:var(--mono);}

/* ---- モーダル ---- */
.overlay{position:fixed;inset:0;background:rgba(20,30,40,.45);display:none;align-items:center;justify-content:center;z-index:50;padding:16px;}
.overlay.show{display:flex;}
.modal{background:#fff;border-radius:8px;max-width:440px;width:100%;padding:20px;box-shadow:0 12px 40px rgba(0,0,0,.25);max-height:90vh;overflow:auto;}
.modal h3{margin:0 0 4px;font-size:16px;}
.modal .step-label{font-size:12px;color:var(--ink-soft);font-family:var(--mono);margin-bottom:14px;}
.inning-row{font-size:13px;background:var(--bg);padding:9px 11px;border-radius:6px;margin-bottom:14px;}
.inning-row select{width:auto;display:inline-block;padding:4px 8px;margin:0 4px;}
.bigbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;} .bigbtns.one{grid-template-columns:1fr;}
.bigbtn{padding:16px 12px;border:1.5px solid var(--line-strong);border-radius:8px;background:#fff;cursor:pointer;text-align:center;font-size:15px;}
.bigbtn small{display:block;font-size:11px;color:var(--ink-soft);margin-top:3px;font-family:var(--mono);}
.bigbtn:hover{border-color:var(--grass);background:var(--grass-bg);}
.bigbtn.k-walk:hover{border-color:var(--walk);background:var(--walk-bg);}
.bigbtn.k-err:hover{border-color:var(--err);background:var(--err-bg);}
.posgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.modal-foot{display:flex;justify-content:space-between;margin-top:18px;align-items:center;gap:8px;}
.link{background:none;border:none;color:var(--walk);cursor:pointer;font-size:13px;text-decoration:underline;}
.checks{display:flex;flex-wrap:wrap;gap:8px;} .checks label{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--ink);}
.checks input{width:auto;}

/* ---- ログイン ---- */
.login-wrap{max-width:360px;margin:70px auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;text-align:center;}
.diamond{width:54px;height:54px;margin:0 auto 14px;transform:rotate(45deg);border:3px solid var(--grass);border-radius:6px;}
.err-msg{color:var(--err);font-size:13px;min-height:18px;margin:8px 0;}

/* ---- toast ---- */
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:6px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:100;}
#toast.show{opacity:1;}

.hidden{display:none !important;}
@media(max-width:640px){
  .app{flex-direction:column;} .sidebar{width:100%;flex-direction:row;overflow-x:auto;padding:6px 0;}
  .brand{display:none;} .nav{display:flex;} .nav a{border-left:none;border-bottom:3px solid transparent;white-space:nowrap;}
  .nav a.active{border-left:none;border-bottom-color:var(--grass);} .nav-foot{border-top:none;}
  .main{padding:16px;}
}

/* ---- 印刷（スコアシート）---- */
#print-sheet{display:none;}
@media print{
  body *{visibility:hidden;}
  #print-sheet, #print-sheet *{visibility:visible;}
  #print-sheet{display:block;position:absolute;top:0;left:0;width:100%;padding:10px;}
  @page{size:A4 landscape;margin:10mm;}
}