:root{
  --green:#2D5A3D;--green-d:#1F4029;--green-l:#E4EFE8;--bg:#F5F8F6;--card:#fff;
  --ink:#1B2620;--mute:#5E6B64;--line:#DCE5DF;--warn:#B45309;--warn-bg:#FEF3C7;
  --bad:#B42318;--bad-bg:#FDECEA;--ok:#1E7A47;--gold:#C8963E;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.45}
h1,h2,h3{font-family:'DM Serif Display',Georgia,serif;font-weight:400;margin:0;color:var(--green-d)}
h2{font-size:1.5rem}h3{font-size:1.2rem}
button,input,select,textarea{font:inherit;color:inherit}
.boot{padding:3rem;text-align:center;color:var(--mute)}
.wrap{max-width:980px;margin:0 auto;padding:0 1rem 4rem}

/* header */
.top{background:var(--green);color:#fff}
.top .in{max-width:980px;margin:0 auto;padding:.8rem 1rem;display:flex;align-items:center;gap:.8rem}
.brand{font-family:'DM Serif Display',serif;font-size:1.35rem;letter-spacing:.04em;line-height:1}
.brand small{display:block;font-family:'DM Sans',sans-serif;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;opacity:.8;margin-top:.2rem}
.top .who{margin-left:auto;text-align:right;font-size:.85rem;line-height:1.2}
.top .who b{display:block}
.top .link{background:none;border:0;color:#fff;opacity:.85;text-decoration:underline;cursor:pointer;padding:0;font-size:.8rem}
.nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.nav .in{max-width:980px;margin:0 auto;display:flex;gap:.25rem;padding:0 .6rem;overflow-x:auto}
.nav button{background:none;border:0;border-bottom:3px solid transparent;padding:.8rem .9rem;cursor:pointer;font-weight:600;color:var(--mute);white-space:nowrap}
.nav button.on{color:var(--green);border-color:var(--green)}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.1rem;margin-top:1rem}
.card h3{margin-bottom:.5rem}
.hero{background:linear-gradient(135deg,var(--green) 0%,var(--green-d) 100%);color:#fff;border:0}
.hero h2{color:#fff;font-size:1.9rem}
.hero .sub{opacity:.85;font-size:.92rem;margin-top:.25rem}
.hero .lvl{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-bottom:.3rem}
.chip{display:inline-block;padding:.2rem .65rem;border-radius:99px;font-size:.78rem;font-weight:600;background:var(--green-l);color:var(--green-d)}
.chip.gold{background:#F7E8C8;color:#7A5410}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.bad{background:var(--bad-bg);color:var(--bad)}
.chip.gray{background:#EDF0EE;color:var(--mute)}
.hero .chip{background:rgba(255,255,255,.18);color:#fff}
.banner{border-radius:12px;padding:.8rem 1rem;margin-top:1rem;font-size:.92rem}
.banner.bad{background:var(--bad-bg);color:var(--bad);border:1px solid #F3C4BE}
.banner.ok{background:var(--green-l);color:var(--green-d);border:1px solid #BFD8C9}
.grid2{display:grid;gap:1rem}
@media(min-width:720px){.grid2{grid-template-columns:1fr 1fr}}

/* progress */
.bar{margin:.7rem 0}
.bar .lab{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:.25rem}
.bar .lab span:last-child{color:var(--mute)}
.track{height:10px;background:#E8EEEA;border-radius:99px;overflow:hidden}
.fill{height:100%;background:var(--green);border-radius:99px;transition:width .4s}
.fill.done{background:var(--ok)}

/* lists */
.chk{list-style:none;margin:0;padding:0}
.chk li{display:flex;gap:.65rem;padding:.55rem 0;border-bottom:1px solid #EEF2EF;align-items:flex-start}
.chk li:last-child{border:0}
.dot{flex:0 0 22px;height:22px;border-radius:50%;border:2px solid #C5D1CA;display:grid;place-items:center;font-size:.8rem;color:#fff;margin-top:1px}
.dot.on{background:var(--ok);border-color:var(--ok)}
.chk .t{flex:1;min-width:0}
.chk .m{display:block;color:var(--mute);font-size:.8rem}
.chk input[type=checkbox]{width:22px;height:22px;margin:1px 0 0;accent-color:var(--green);flex:0 0 22px}
.opt{font-size:.72rem;color:var(--mute);border:1px solid var(--line);border-radius:6px;padding:0 .35rem;margin-left:.3rem}
ul.plain{margin:.3rem 0 0 1.1rem;padding:0}
ul.plain li{margin:.25rem 0}

/* roster */
.roster{display:grid;gap:.75rem;margin-top:.8rem}
@media(min-width:720px){.roster{grid-template-columns:1fr 1fr}}
.pcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem;cursor:pointer;text-align:left;width:100%}
.pcard:hover{border-color:var(--green)}
.pcard .nm{font-weight:700;font-size:1.05rem}
.pcard .row{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.45rem}
.mini{display:grid;grid-template-columns:auto 1fr auto;gap:.5rem;align-items:center;font-size:.8rem;color:var(--mute);margin-top:.4rem}
.mini .track{height:7px}

/* forms */
label{display:block;font-size:.85rem;font-weight:600;margin:.7rem 0 .25rem}
input,select,textarea{width:100%;padding:.6rem .7rem;border:1px solid #C9D5CD;border-radius:10px;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green);outline-offset:0;border-color:var(--green)}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end}
.row>*{flex:1 1 120px}
.btn{background:var(--green);color:#fff;border:0;border-radius:10px;padding:.65rem 1.1rem;font-weight:600;cursor:pointer;flex:0 0 auto;width:auto}
.btn:hover{background:var(--green-d)}
.btn.ghost{background:#fff;color:var(--green);border:1px solid var(--green)}
.btn.danger{background:var(--bad)}
.btn.sm{padding:.35rem .7rem;font-size:.85rem}
.btn[disabled]{opacity:.5;cursor:default}
.link{background:none;border:0;color:var(--green);text-decoration:underline;cursor:pointer;padding:0;font-size:.85rem;width:auto}
.link.bad{color:var(--bad)}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
.scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.4rem .8rem}

/* login */
.login{max-width:380px;margin:12vh auto 0;padding:0 1rem}
.login .card{padding:1.5rem}
.login h1{font-size:2rem;text-align:center}
.login p.s{text-align:center;color:var(--mute);margin:.3rem 0 1rem}
.err{background:var(--bad-bg);color:var(--bad);padding:.55rem .75rem;border-radius:10px;margin-top:.8rem;font-size:.9rem}

/* review history */
.rev{border-top:1px solid #EEF2EF;padding:.7rem 0}
.rev:first-of-type{border-top:0}
.rev .head{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.cat{display:flex;justify-content:space-between;font-size:.85rem;padding:.1rem 0;border-bottom:1px dotted #E1E8E3}
.s1,.s2{color:var(--bad);font-weight:700}.s3{color:var(--ink)}.s4{color:var(--ok);font-weight:700}

details.lv{border:1px solid var(--line);border-radius:12px;margin-top:.7rem;background:#fff}
details.lv summary{padding:.85rem 1rem;cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:.5rem;align-items:center}
details.lv summary::-webkit-details-marker{display:none}
details.lv .body{padding:0 1rem 1rem}
details.lv h4{margin:1rem 0 .2rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
.back{margin-top:1rem}

/* modal + toast */
#modal-root:empty{display:none}
#modal-root{position:fixed;inset:0;background:rgba(15,25,19,.55);display:flex;align-items:flex-start;justify-content:center;padding:6vh 1rem;overflow:auto;z-index:50}
.modal{background:#fff;border-radius:16px;padding:1.3rem;max-width:460px;width:100%}
.modal .row.end{justify-content:flex-end;margin-top:1rem}
.pw{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.3rem;background:var(--green-l);padding:.7rem;border-radius:10px;text-align:center;letter-spacing:.06em;margin:.6rem 0;user-select:all}
#toast{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.65rem 1rem;border-radius:10px;font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .25s;z-index:60;max-width:90vw}
#toast.show{opacity:1}
#toast.bad{background:var(--bad)}
.mute{color:var(--mute)}.small{font-size:.85rem}
.sp{height:.4rem}
table.t{width:100%;border-collapse:collapse;font-size:.88rem}
table.t td,table.t th{padding:.4rem .3rem;border-bottom:1px solid #EEF2EF;text-align:left}