:root{--bg:#0b0c10;--ink:#e8eaf1;--ring:#202635;--focus:#1fa3ff;--accent:#00ffc2;--rowH:56px;--gap:.4rem}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,Segoe UI,Roboto,Arial,sans-serif}
.vh{position:absolute;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap;border:0;padding:0;margin:-1px}

/* Header */
.bar{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem;border-bottom:1px solid var(--ring);background:#0e121a;position:sticky;top:0;z-index:5}
.brand .muted{opacity:.7;font-weight:400;margin-left:.4rem}
.btn{cursor:pointer;padding:.45rem .7rem;border:1px solid var(--ring);border-radius:10px;background:#151a25;color:inherit;text-decoration:none;display:inline-grid;place-items:center}
.btn:hover{outline:2px solid var(--focus);outline-offset:2px}
.full-btn{margin-left:auto}

/* Show/hide sections */
#show_full:not(:checked) ~ .nav{display:block}
#show_full:not(:checked) ~ .full{display:none}
#show_full:checked ~ .nav{display:none}
#show_full:checked ~ .full{display:block}

/* NAV */
.nav{padding:1rem;max-width:1200px;margin:0 auto}
.roulette{display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem}
.rl{display:none}
.rl .btn{width:40px;height:40px;border-radius:10px}
.dots{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.5rem}
.dot{display:inline-grid;place-items:center;min-width:28px;height:28px;border:1px solid var(--ring);border-radius:999px;background:#141a25;cursor:pointer}
.dot:hover{outline:2px solid var(--focus);outline-offset:2px}

/* Preview 3×7 */
.preview{position:relative;display:grid;grid-template-rows:repeat(3,70px);grid-template-columns:repeat(7,minmax(110px,1fr));gap:.5rem}
.g{display:none;grid-row:1/-1;grid-column:1/-1;display:grid;grid-template-rows:repeat(3,70px);grid-template-columns:repeat(7,minmax(110px,1fr));gap:.5rem}
.cell{display:grid;place-items:center;border:1px solid var(--ring);border-radius:12px;background:#121726;padding:.25rem .4rem}
.cell:hover{outline:2px solid var(--focus);outline-offset:2px}
.cell[contenteditable="true"]{outline:1px dashed transparent}
.cell[contenteditable="true"]:focus{outline:2px solid var(--accent);outline-offset:2px;background:#0f1522}
.cell details summary{cursor:pointer}
.highlight{pointer-events:none;position:absolute;left:0;right:0;top:calc(70px + .25rem);height:70px;border:2px dashed var(--accent);border-radius:12px}

/* FULL TABLE */
.full{padding:1rem}
.grid{display:grid;grid-template-columns:repeat(7,minmax(170px,1fr));gap:10px;max-width:1400px;margin:0 auto}
.col{display:grid;gap:10px}

/* Column header toggler */
.col-header{position:sticky;top:60px;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:.5rem .65rem;border:1px solid var(--ring);border-radius:12px;background:#121a27}
.col-header .title{font-weight:700}
.col-header .btn{padding:.35rem .55rem;border-radius:8px}

/* Groups keep fixed footprint; only content visibility changes */
.grp{border:1px solid var(--ring);border-radius:12px;background:#10151f;overflow:hidden}
.grp header{display:flex;align-items:center;justify-content:space-between;padding:.45rem .6rem;border-bottom:1px solid var(--ring);background:#121a27}
.grp .rows{
  height:calc((var(--rowH) * 3) + (var(--gap) * 2) + .6rem);
  padding:.3rem .45rem;
  display:grid;grid-template-rows:repeat(3,var(--rowH));gap:var(--gap);
}
.grp.collapsed .rows{visibility:hidden;pointer-events:none}
.row{display:grid;place-items:center;border:1px dashed #223046;border-radius:10px;min-height:var(--rowH);background:#0f141f;padding:.25rem}
.row[contenteditable="true"]{outline:1px dashed transparent}
.row[contenteditable="true"]:focus{outline:2px solid var(--accent);outline-offset:2px;background:#0f1522}
.row details summary{cursor:pointer}

/* Column-wide toggle: expand/collapse entire column */
.col > input[type="checkbox"]:checked ~ .grp .rows{visibility:visible;pointer-events:auto}
.col > input[type="checkbox"]:checked ~ .grp.collapsed .rows{visibility:visible;pointer-events:auto}

/* Individual group toggle */
.grp-toggle{display:none}
.grp-toggle:not(:checked) ~ .grp .rows{visibility:hidden;pointer-events:none}
.grp-toggle:checked ~ .grp .rows{visibility:visible;pointer-events:auto}

/* Center highlight */
#b4g6:checked ~ .grp header{box-shadow:inset 0 0 0 2px var(--focus)}

/* Actions buttons + modals */
.actions{display:flex;gap:.6rem;justify-content:flex-end;max-width:1400px;margin:1rem auto 0}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;place-items:center;padding:1rem}
.modal:target{display:grid}
.modal .box{max-width:560px;width:min(92vw,560px);background:#0f141f;border:1px solid var(--ring);border-radius:14px;padding:1rem}
.modal h3{margin:.2rem 0 1rem}
.modal .btn.close{margin-top:.8rem}
.modal .btn.ghost{background:#0e131c}
@media print{.bar,.actions,.modal{display:none!important}body{background:#fff;color:#000}.grid{gap:6px}.grp .rows{height:auto}}

#g2_1:checked ~ .roulette .rl1{display:flex}
#g2_1:checked ~ .preview .g1{display:grid}
#g2_2:checked ~ .roulette .rl2{display:flex}
#g2_2:checked ~ .preview .g2{display:grid}
#g2_3:checked ~ .roulette .rl3{display:flex}
#g2_3:checked ~ .preview .g3{display:grid}
#g2_4:checked ~ .roulette .rl4{display:flex}
#g2_4:checked ~ .preview .g4{display:grid}
#g2_5:checked ~ .roulette .rl5{display:flex}
#g2_5:checked ~ .preview .g5{display:grid}
#g2_6:checked ~ .roulette .rl6{display:flex}
#g2_6:checked ~ .preview .g6{display:grid}
#g2_7:checked ~ .roulette .rl7{display:flex}
#g2_7:checked ~ .preview .g7{display:grid}
#g2_8:checked ~ .roulette .rl8{display:flex}
#g2_8:checked ~ .preview .g8{display:grid}
#g2_9:checked ~ .roulette .rl9{display:flex}
#g2_9:checked ~ .preview .g9{display:grid}
#g2_10:checked ~ .roulette .rl10{display:flex}
#g2_10:checked ~ .preview .g10{display:grid}
#g2_11:checked ~ .roulette .rl11{display:flex}
#g2_11:checked ~ .preview .g11{display:grid}