:root{
  --bg:#0d1f21; --bg2:#122a2b; --panel:#1f242d; --panel2:#262c36; --line:#343b47;
  --ink:#eef1f3; --muted:#a1a1aa; --orange:#ff9e1b; --orange-ink:#1a1204;
  --ok:#7fd1a0; --err:#ff8a7a;
  --font:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;font-family:var(--font);color:var(--ink);line-height:1.5;
  background:linear-gradient(160deg,var(--bg2) 0%,var(--bg) 55%,#0a1517 100%) fixed}
a{color:var(--orange)}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
h1{font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.1;margin:.2em 0 .5em;font-weight:800;letter-spacing:-.02em}
h2{font-size:1.45rem;margin:0 0 .3em;font-weight:700}
h3{font-size:1.05rem;margin:0 0 .5em}
.muted{color:var(--muted)} .lead{color:#c9ced3;margin:0 0 1.2em;max-width:60ch}
.intro{background:var(--panel);border-left:3px solid var(--orange);padding:.8em 1em;border-radius:6px;max-width:64ch;white-space:pre-line}

.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem clamp(1rem,4vw,2.5rem);border-bottom:1px solid #ffffff14}
.brand{text-decoration:none;font-weight:800;font-size:1.25rem;letter-spacing:.02em}
.brand .k{color:var(--orange)} .brand .l{color:#fff}
.top nav{display:flex;gap:.3rem}
.top nav a{color:var(--muted);text-decoration:none;padding:.4rem .8rem;border-radius:6px}
.top nav a:hover{color:#fff} .top nav a.on{color:#fff;background:#ffffff12}
.wrap{max-width:860px;margin:0 auto;padding:clamp(1.2rem,4vw,2.5rem) clamp(1rem,4vw,1.5rem) 4rem}

.stepper{list-style:none;display:flex;gap:.5rem;padding:0;margin:0 0 1.4rem;flex-wrap:wrap}
.stepper li{display:flex;align-items:center;gap:.5rem;padding:.4rem .8rem .4rem .4rem;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.92rem}
.stepper b{display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--panel2);font-weight:700;font-size:.85rem}
.stepper .cur{color:#fff;border-color:var(--orange)} .stepper .cur b{background:var(--orange);color:var(--orange-ink)}
.stepper .past b{background:#2f4a3b;color:var(--ok)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:clamp(1rem,3vw,1.6rem)}
.rows{display:grid;gap:.6rem;margin-bottom:1.2rem}
.row{display:grid;grid-template-columns:1.6rem minmax(7rem,11rem) 1fr auto;gap:.5rem;align-items:center}
.idx{color:var(--muted);text-align:center}
input,select,textarea{font:inherit;color:var(--ink);background:#151a21;border:1px solid var(--line);border-radius:8px;padding:.65rem .8rem;width:100%;min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--orange);outline:none}
input::placeholder{color:#6b7280}
.x{font:inherit;background:none;border:0;color:var(--muted);cursor:pointer;padding:.4rem .5rem;border-radius:6px;text-decoration:underline}
.x:hover{color:var(--err)}
@media(max-width:560px){.row{grid-template-columns:1fr 1fr;} .idx{display:none} .row .x{grid-column:1/-1;justify-self:end}}

.actions{display:flex;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-top:1.3rem}
.btn{font:inherit;font-weight:700;display:inline-block;text-decoration:none;cursor:pointer;border:1px solid var(--orange);background:var(--orange);color:var(--orange-ink);padding:.7rem 1.3rem;border-radius:8px}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn.ghost:hover{border-color:var(--muted)}
.btn.danger{background:transparent;color:var(--err);border-color:#5b2f2a}
.btn.small{padding:.4rem .8rem;font-size:.9rem}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none}

.opts{display:grid;gap:.5rem}
.opt{font:inherit;color:var(--ink);text-align:left;display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;padding:.8rem 1rem;background:var(--panel2);border:1px solid var(--line);border-radius:8px;cursor:pointer}
.opt em{font-style:normal;font-size:.85rem;color:var(--muted);white-space:nowrap}
.opt small{color:var(--muted);margin-left:.4rem}
.opt:hover:not(:disabled){border-color:var(--muted)}
.opt.mine{border-color:var(--orange);background:#2d2a22} .opt.mine em{color:var(--orange)}
.opt.taken,.opt.held{opacity:.45;cursor:not-allowed;text-decoration:line-through} .opt.held{text-decoration:none}
.empty{color:var(--muted);padding:1rem;border:1px dashed var(--line);border-radius:8px}
.summary{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line);color:#c9ced3} .summary ul{margin:.3rem 0 0;padding-left:1.1rem}

.err{background:#3a1f1c;border:1px solid #6b3029;color:#ffc9c1;padding:.7rem 1rem;border-radius:8px;margin-bottom:1rem}
.ok{color:var(--ok)}
.err[hidden]{display:none}

.done{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:clamp(1.2rem,4vw,2.2rem)}
.bigletter{font-size:clamp(7rem,28vw,13rem);line-height:.9;font-weight:800;color:var(--orange);letter-spacing:-.04em;margin:.1em 0 .2em}
.done dl{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.2rem;margin:1rem 0 1.5rem}
.done dt{color:var(--muted)} .done dd{margin:0}
@media(max-width:560px){.done dl{grid-template-columns:1fr}.done dt{margin-top:.6rem}}

/* liste.php */
.search{display:flex;gap:.6rem;margin:0 0 2rem;flex-wrap:wrap} .search input{flex:1;min-width:14rem}
.hit{background:var(--panel);border:1px solid var(--orange);border-radius:12px;padding:1rem 1.2rem;margin-bottom:1rem;display:flex;gap:1.2rem;align-items:center}
.sched{display:grid;gap:1rem}
.week{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem}
.week.past{opacity:.55}
.week h3{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:0 0 .8rem;font-size:1.1rem}
.week h3 span{color:var(--muted);font-weight:400;font-size:.9rem}
.grp{display:grid;grid-template-columns:4.2rem 1fr;gap:1rem;padding:.7rem 0;border-top:1px solid var(--line);align-items:start}
.grp .let{font-size:3rem;font-weight:800;line-height:1;color:var(--orange);text-align:center}
.grp .let.sm{font-size:2.4rem}
.grp p{margin:0 0 .15rem} .grp .names{color:var(--muted);font-size:.93rem}
.vacant{color:var(--muted);font-size:.93rem;padding:.6rem 0 0;border-top:1px solid var(--line)}

/* admin */
.admin-body.center{display:grid;place-items:center;padding:1rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.6rem} .narrow{width:min(420px,100%)}
.stack{display:grid;gap:.9rem} .stack label{display:grid;gap:.3rem;color:var(--muted);font-size:.92rem}
.anav{display:flex;gap:.2rem;flex-wrap:wrap;align-items:center;padding:.8rem clamp(1rem,4vw,2.5rem);border-bottom:1px solid #ffffff14}
.anav .brand{margin-right:1rem} .anav a:not(.brand){color:var(--muted);text-decoration:none;padding:.4rem .8rem;border-radius:6px}
.anav a.on{color:#fff;background:#ffffff12} .anav a:hover{color:#fff} .anav .sp{flex:1}
.wide{max-width:1000px}
.flash{padding:.7rem 1rem;border-radius:8px;margin-bottom:1rem;background:#1f3326;border:1px solid #2f5a40;color:#c5f0d6}
.flash.err{background:#3a1f1c;border-color:#6b3029;color:#ffc9c1}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin-bottom:1.5rem}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1rem}
.stat b{display:block;font-size:2rem;line-height:1.1} .stat span{color:var(--muted);font-size:.9rem}
table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
th,td{padding:.6rem .8rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-weight:500;font-size:.88rem;background:var(--panel2)}
tr:last-child td{border-bottom:0}
td form{display:inline-flex;gap:.4rem;align-items:center;margin:0}
td input,td select{padding:.4rem .6rem}
.tablewrap{overflow-x:auto}
.inline{display:flex;gap:.6rem;flex-wrap:wrap;align-items:end;margin-bottom:1.5rem}
.inline label{display:grid;gap:.3rem;color:var(--muted);font-size:.9rem}
.badge{display:inline-block;padding:.1rem .6rem;border-radius:999px;font-size:.82rem;background:var(--panel2);border:1px solid var(--line);color:var(--muted)}
.badge.on{color:var(--orange-ink);background:var(--orange);border-color:var(--orange)}
.gcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;margin-bottom:.9rem;display:grid;grid-template-columns:4.5rem 1fr;gap:1rem}
.gcard .let{font-size:3.2rem;font-weight:800;line-height:1;color:var(--orange);text-align:center}
.gcard ul{margin:.2rem 0 .8rem;padding-left:1.1rem}
.gcard form{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.3rem 0}
.gcard select{width:auto;max-width:100%}
@media(prefers-reduced-motion:no-preference){.opt,.btn{transition:border-color .15s,filter .15s}}