:root{
  --ground:#F6F4EB; --surface:#FFFFFF; --surface-2:#EFEADA; --border:#DCD3B9;
  --ink:#1B2A22; --ink-soft:#5B6B5C; --ink-faint:#8B9186;
  --green:#2F6B4F; --green-deep:#1F4A36; --green-soft:#E4EEE6;
  --sand:#A97A2E; --sand-soft:#F3E7CE;
  --birdie:#B23A48; --birdie-soft:#F6DFE1;
  --eagle:#9C6E14; --eagle-soft:#F5E7C0;
  --bogey:#75655A; --bogey-soft:#EFEAE0;
  --danger:#B23A3A; --danger-soft:#F6DFDF;
  --shadow:0 1px 2px rgba(27,42,34,.07),0 6px 18px rgba(27,42,34,.07);
  --radius:14px; --radius-sm:9px;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#10150F; --surface:#171D18; --surface-2:#1E251E; --border:#2C342A;
    --ink:#ECEFE7; --ink-soft:#AEB6A7; --ink-faint:#727A6D;
    --green:#5FAD82; --green-deep:#84CBA0; --green-soft:#1B2921;
    --sand:#D9B267; --sand-soft:#2B2415;
    --birdie:#E38A93; --birdie-soft:#2E1B1E;
    --eagle:#E3C264; --eagle-soft:#2C2510;
    --bogey:#A79C8F; --bogey-soft:#20241E;
    --danger:#E38A8A; --danger-soft:#2E1B1B;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.4);
  }
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:700; text-wrap:balance; margin:0}
.mono{font-family:"Cascadia Mono","Consolas",ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums}
a{color:inherit}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--green); outline-offset:2px}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important} }

#app{min-height:100vh; display:flex; flex-direction:column}
.boot{padding:4rem 1rem; text-align:center; color:var(--ink-faint); font-family:Georgia,serif; font-size:1.1rem}

.topbar{position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--border)}
.topbar-inner{max-width:1080px; margin:0 auto; padding:.85rem 1.25rem; display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap}
.brand{display:flex; align-items:baseline; gap:.5rem}
.brand h1{font-size:1.25rem; color:var(--green-deep)}
.brand .tag{font-size:.72rem; color:var(--ink-faint); letter-spacing:.06em; text-transform:uppercase}
.brand .mode{font-size:.68rem; color:var(--sand); border:1px solid var(--sand); border-radius:999px; padding:.1rem .5rem; letter-spacing:.03em}
#league-switcher{width:auto; max-width:220px; font-weight:600; background:var(--surface-2); border-color:var(--border)}
nav.tabs{display:flex; gap:.25rem; overflow-x:auto; margin-left:auto}
nav.tabs button{background:none; border:none; padding:.5rem .85rem; border-radius:999px; font-size:.88rem; font-weight:600; color:var(--ink-soft); cursor:pointer; white-space:nowrap}
nav.tabs button.active{background:var(--green-soft); color:var(--green-deep)}
nav.tabs button:hover:not(.active){background:var(--surface-2)}

main{max-width:1080px; margin:0 auto; padding:1.5rem 1.25rem 5rem; width:100%; flex:1}
.stack{display:flex; flex-direction:column; gap:1.25rem}
.row{display:flex; gap:.75rem; flex-wrap:wrap; align-items:center}
.between{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow)}
.card > h2{font-size:1.05rem; margin-bottom:.15rem}
.card .sub{color:var(--ink-soft); font-size:.85rem; margin-bottom:.9rem}
.section-title{font-size:1.4rem; margin-bottom:.2rem}
.empty{color:var(--ink-faint); font-size:.9rem; padding:1.25rem 0; text-align:center}

.grid-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.85rem}
.stat{background:var(--surface-2); border-radius:var(--radius-sm); padding:.85rem .95rem}
.stat .num{font-family:Georgia,serif; font-size:1.7rem; font-weight:700; color:var(--green-deep)}
.stat .lbl{font-size:.76rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em}

table{width:100%; border-collapse:collapse; font-size:.9rem}
.tbl-wrap{overflow-x:auto}
th{text-align:left; color:var(--ink-soft); font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; padding:.45rem .6rem; border-bottom:1px solid var(--border)}
th.sortable{cursor:pointer; user-select:none; white-space:nowrap}
th.sortable:hover{color:var(--ink)}
.sort-arrow{font-size:.7rem; margin-left:.1rem}
td{padding:.5rem .6rem; border-bottom:1px solid var(--border)}
tr:last-child td{border-bottom:none}
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:var(--surface-2)}

.btn{display:inline-flex; align-items:center; gap:.4rem; border-radius:999px; border:1px solid transparent; padding:.55rem 1.05rem; font-size:.88rem; font-weight:600; cursor:pointer; background:var(--green); color:#fff}
.btn:hover{background:var(--green-deep)}
.btn.secondary{background:var(--surface); border-color:var(--border); color:var(--ink)}
.btn.secondary:hover{background:var(--surface-2)}
.btn.ghost{background:none; border:none; color:var(--green-deep); padding:.4rem .6rem}
.btn.ghost:hover{background:var(--green-soft)}
.btn.danger{background:var(--surface); border-color:var(--border); color:var(--danger)}
.btn.danger:hover{background:var(--danger-soft)}
.btn.small{padding:.35rem .75rem; font-size:.78rem}
.btn:disabled{opacity:.45; cursor:not-allowed}

input[type=text],input[type=number],input[type=date],input[type=password],select{
  font-family:inherit; font-size:.9rem; padding:.5rem .65rem; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--surface); color:var(--ink); width:100%;
}
input:focus,select:focus{border-color:var(--green)}
.view-badge{display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .65rem; border-radius:999px; font-size:.76rem; font-weight:700; background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--border); white-space:nowrap}
.signin-form{display:flex; gap:.4rem; align-items:center; margin:0}
.signin-form input[type=password]{width:130px}
label{font-size:.78rem; font-weight:600; color:var(--ink-soft); display:block; margin-bottom:.3rem}
.field{display:flex; flex-direction:column; gap:.2rem}
.badge{display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .55rem; border-radius:999px; font-size:.74rem; font-weight:700; letter-spacing:.02em}
.badge.eagle{background:var(--eagle-soft); color:var(--eagle)}
.badge.birdie{background:var(--birdie-soft); color:var(--birdie)}
.badge.sandy{background:var(--sand-soft); color:var(--sand)}
.badge.win{background:var(--green-soft); color:var(--green-deep)}
.badge.neutral{background:var(--surface-2); color:var(--ink-soft)}

.toast{position:fixed; bottom:1.25rem; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--ground); padding:.6rem 1.1rem; border-radius:999px; font-size:.85rem; box-shadow:var(--shadow); z-index:50; opacity:0; pointer-events:none; transition:opacity .2s ease}
.toast.show{opacity:1}

.checklist{max-height:320px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius-sm); padding:.5rem}
.checkrow{display:flex; align-items:center; gap:.55rem; padding:.4rem .3rem; border-radius:6px}
.checkrow:hover{background:var(--surface-2)}
.checkrow input{width:auto}

.player-card{border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden}
.player-head{display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; cursor:pointer; background:var(--surface-2)}
.player-head .name{font-weight:700}
.player-head .meta{font-size:.8rem; color:var(--ink-soft)}
.player-body{padding:1rem; display:none}
.player-card.open .player-body{display:block}
.player-card.open .chev{transform:rotate(180deg)}
.chev{transition:transform .15s ease; color:var(--ink-faint)}

.nine-wrap{overflow-x:auto; padding-bottom:.25rem}
.nine{display:grid; grid-template-columns:56px repeat(9,minmax(42px,1fr)); gap:4px; min-width:520px; margin-bottom:.6rem}
.nine .hd{font-size:.68rem; color:var(--ink-faint); text-align:center; padding:.2rem 0}
.nine .hd.lbl{text-align:left; font-weight:700; color:var(--ink-soft)}
.hole-num{font-size:.72rem; font-weight:700; text-align:center; color:var(--ink-soft)}
.hole-par{font-size:.66rem; text-align:center; color:var(--ink-faint)}
.score-cell input{text-align:center; padding:.4rem .2rem; font-family:"Cascadia Mono","Consolas",monospace; font-weight:600; font-size:.92rem; border-width:2px}
.score-cell input.eagle{border-color:var(--eagle); background:var(--eagle-soft); color:var(--eagle)}
.score-cell input.birdie{border-color:var(--birdie); background:var(--birdie-soft); color:var(--birdie)}
.score-cell input.bogey{color:var(--ink-soft)}
.score-cell input.double{color:var(--danger)}
.sandy-btn{width:100%; border:1px dashed var(--border); background:var(--surface); color:var(--ink-faint); border-radius:6px; font-size:.85rem; padding:.25rem 0; cursor:pointer; margin-top:2px}
.sandy-btn.on{background:var(--sand-soft); border-style:solid; border-color:var(--sand); color:var(--sand)}
.totals-row{display:flex; gap:1rem; margin-top:.5rem; font-size:.82rem; color:var(--ink-soft)}
.totals-row b{color:var(--ink); font-family:"Cascadia Mono","Consolas",monospace}

.save-bar{position:sticky; bottom:0; background:var(--surface); border-top:1px solid var(--border); padding:.85rem 1.25rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:0 -1.25rem; box-shadow:0 -4px 14px rgba(27,42,34,.06)}

.skins-list{display:flex; flex-direction:column; gap:.4rem}
.skin-item{display:flex; align-items:center; gap:.6rem; padding:.5rem .65rem; border-radius:var(--radius-sm); background:var(--surface-2); font-size:.87rem}
.skin-item .hole{font-family:"Cascadia Mono","Consolas",monospace; font-weight:700; color:var(--ink-soft); min-width:2.4em}

.pair-row{display:flex; align-items:center; justify-content:space-between; padding:.6rem .75rem; border-radius:var(--radius-sm); background:var(--surface-2); margin-bottom:.4rem}
.pair-row.winner{background:var(--green-soft); border:1px solid var(--green)}
.pair-names{font-weight:600}
.pair-total{font-family:"Cascadia Mono","Consolas",monospace; font-weight:700}

.help{font-size:.82rem; color:var(--ink-soft); line-height:1.5}
.help b{color:var(--ink)}
details.rules{margin-top:.5rem}
details.rules summary{cursor:pointer; font-weight:600; color:var(--green-deep); font-size:.85rem}
.banner{background:var(--sand-soft); border:1px solid var(--sand); color:var(--sand); border-radius:var(--radius-sm); padding:.65rem .9rem; font-size:.85rem}

@media (max-width:640px){
  .topbar-inner{gap:.6rem}
  nav.tabs{width:100%; justify-content:space-between}
  nav.tabs button{padding:.45rem .55rem; font-size:.8rem}
  main{padding:1rem .85rem 5rem}
}