
:root{
  --bg:#F6F7F4;
  --card:#FFFFFF;
  --text:#141A17;
  --sub:#6B736E;
  --green:#1A6B42;
  --green-dark:#0F291C;
  --green-soft:#EAF4EE;
  --border:#DBE0DB;
  --danger:#B82929;
  --danger-bg:#FAE8E8;
  --shadow:0 8px 24px rgba(15,41,28,.06);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",sans-serif}
body{min-height:100vh}
button,select,input{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.45;cursor:default}
.app-shell{max-width:480px;margin:0 auto;min-height:100vh;padding:env(safe-area-inset-top) 20px calc(102px + env(safe-area-inset-bottom))}
.header{padding-top:26px;margin-bottom:16px}
h1{font-size:28px;line-height:1.2;margin:0 0 8px}
.subtitle{color:var(--sub);font-size:14px}
.top-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.top-nav .btn{min-height:42px;border-radius:12px}
.match-card{background:white;border:1px solid var(--border);border-radius:18px;padding:14px;margin-bottom:16px;box-shadow:var(--shadow)}
.match-label{font-size:12px;color:var(--sub);margin-bottom:6px}
.match-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.match-title{font-size:17px;font-weight:800;line-height:1.3}
.match-date{font-size:12px;color:var(--sub);margin-top:4px}
.small-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 14px}
.small-actions .btn{min-height:44px;border-radius:12px;font-size:14px}
.player-list,.stack{display:flex;flex-direction:column;gap:10px}
.player-row{display:grid;grid-template-columns:1fr 118px;gap:10px}
.player-name,.role-btn,.option-card,.btn{
  min-height:56px;border-radius:16px;border:1px solid var(--border);background:var(--card);color:var(--text)
}
.player-name{padding:0 16px;text-align:left;font-weight:700;font-size:17px;box-shadow:var(--shadow)}
.role-btn{padding:0 12px;color:var(--green);font-weight:700;background:#fff}
.add-btn{width:100%;margin-top:12px;min-height:54px;border-radius:16px;border:1px dashed #9BA49E;background:transparent;color:var(--green);font-weight:800;font-size:17px}
.bottom-bar,.footer-actions{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(480px,100%);
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(246,247,244,0),#F6F7F4 30%)
}
.bottom-bar{display:grid;grid-template-columns:1fr 2fr;gap:10px}
.footer-actions{display:grid;grid-template-columns:112px 1fr;gap:10px;background:var(--bg)}
.btn{padding:0 16px;font-weight:800}
.btn.primary{background:var(--green-dark);color:white;border-color:var(--green-dark)}
.btn.soft{background:var(--green-soft);color:var(--green);border-color:transparent}
.btn.danger{background:var(--danger-bg);color:var(--danger);border-color:transparent}
.btn.success{background:var(--green);color:white;border-color:var(--green)}
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.action-grid .option-card:last-child:nth-child(odd){grid-column:1/-1}
.option-card{padding:0 16px;text-align:left;font-weight:700;font-size:17px}
.option-card.selected{border-color:var(--green);color:var(--green);box-shadow:0 0 0 1px var(--green) inset}
.option-card.error.selected{border-color:var(--danger);color:var(--danger);background:var(--danger-bg);box-shadow:none}
.divider{height:1px;background:var(--border);margin:18px 0}
.section-label{font-size:14px;color:var(--sub);margin:0 0 10px;font-weight:700}
.secondary-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.secondary-row.three{grid-template-columns:repeat(3,1fr)}
.secondary-row .btn{min-width:0;padding:0 8px}
.toast{position:fixed;top:calc(18px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:#142219;color:#fff;padding:10px 14px;border-radius:999px;font-size:13px;z-index:30;box-shadow:var(--shadow)}
.role-menu{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.role-chip{border:1px solid var(--border);background:white;border-radius:999px;padding:10px 12px;font-weight:700}
.role-chip.active{background:var(--green-dark);color:#fff;border-color:var(--green-dark)}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.metric{background:white;border-radius:14px;padding:12px;box-shadow:var(--shadow)}
.metric small{display:block;color:var(--sub);margin-bottom:4px}
.metric strong{font-size:22px}
.stats-card,.match-list-card{background:white;border-radius:18px;padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}
.stats-head,.match-list-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.stats-head h2,.match-list-head h2{font-size:18px;margin:0}
.badge{font-size:12px;color:var(--green);font-weight:800}
.stat-section{padding:11px 0;border-top:1px solid #EEF0EE}
.stat-section:first-of-type{border-top:0}
.stat-section-title{font-weight:800;margin-bottom:6px}
.stat-line{font-size:13px;line-height:1.75;color:#343B37}
.stat-percent{font-size:12px;color:var(--sub);line-height:1.7;margin-top:3px}
.formula-pill{display:inline-block;background:var(--green-soft);color:var(--green);padding:5px 8px;border-radius:999px;margin:3px 4px 0 0;font-weight:700}
.empty{padding:32px 12px;text-align:center;color:var(--sub)}
.install-hint,.note{font-size:12px;color:var(--sub);margin-top:12px;line-height:1.6}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);display:grid;place-items:center;padding:24px;z-index:20}
.modal{width:min(360px,100%);max-height:80vh;overflow:auto;background:white;border-radius:20px;padding:20px;box-shadow:0 18px 48px rgba(0,0,0,.18)}
.modal h3{margin:0 0 8px}
.modal p{color:var(--sub);font-size:14px;line-height:1.5}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.rename-input,.form-input{width:100%;height:48px;border:1px solid var(--border);border-radius:12px;padding:0 12px;margin-top:8px;background:white}
.match-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid #EEF0EE}
.match-row:first-of-type{border-top:0}
.match-row-main{min-width:0}
.match-row-name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.match-row-meta{font-size:12px;color:var(--sub);margin-top:3px}
.match-row-actions{display:flex;gap:6px}
.mini-btn{border:1px solid var(--border);background:white;border-radius:10px;padding:8px 10px;font-size:12px;font-weight:800}
.mini-btn.active{background:var(--green-dark);color:white;border-color:var(--green-dark)}
.mini-btn.danger{color:var(--danger);background:var(--danger-bg);border-color:transparent}
.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
