:root{
  --magenta:#C81C6E; --magenta-d:#A8125B;
  --green:#3E9E47; --green-d:#2f7d37;
  --orange:#F2A30F; --orange-d:#d68e07;
  --blue:#5E8FD0; --blue-d:#4a78b6;
  --gray:#D2D4D6; --gray-d:#9aa0a6;
  --crimson:#C41E5F;
  --ink:#21252b; --paper:#fbf7f3; --line:#e7ddd5;
  --gold:#F2C200;
  --shadow:0 6px 18px rgba(40,20,30,.12);
  --shadow-lg:0 14px 40px rgba(40,20,30,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Nunito",system-ui,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 15% -10%, #ffe9f3 0%, transparent 55%),
    radial-gradient(1000px 500px at 100% 0%, #fff4dc 0%, transparent 50%),
    linear-gradient(180deg,#fdfbf8,#f4eee8);
  min-height:100vh;
}
body.auth-pending header,
body.auth-pending #app,
body.auth-pending footer,
body.auth-pending #fxCanvas,
body.auth-pending #celebrateRoot,
body.auth-pending #toast,
body.auth-pending #modalRoot,
body.auth-pending #rulesRoot,
body.auth-pending #facilitatorPanel{
  display:none !important;
}
body.game-locked header,
body.game-locked #app,
body.game-locked footer,
body.game-locked #fxCanvas,
body.game-locked #celebrateRoot,
body.game-locked #toast,
body.game-locked #modalRoot,
body.game-locked #rulesRoot,
body.game-locked #facilitatorPanel{
  display:none !important;
}
h1,h2,h3,.disp{font-family:"Fredoka",sans-serif;font-weight:600}
button{font-family:inherit;cursor:pointer}
.hidden{display:none !important}

/* ===== Top bar ===== */
header{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(120deg,var(--magenta),#d83b86);
  color:#fff;box-shadow:0 4px 18px rgba(150,20,80,.25);
}
.bar{max-width:1280px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.balloon{width:42px;height:52px;flex:0 0 auto}
.brand .t1{font-family:"Fredoka";font-weight:600;font-size:1.08rem;line-height:1.05}
.brand .t2{font-weight:800;font-size:.72rem;letter-spacing:.5px;opacity:.92;text-transform:uppercase}
.spacer{flex:1 1 auto}
.pill{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
  padding:6px 12px;border-radius:999px;font-weight:800;font-size:.82rem;display:flex;align-items:center;gap:7px;white-space:nowrap}
.pill b{font-family:"Fredoka"}
.btn{
  border:none;border-radius:12px;padding:9px 15px;font-weight:800;font-size:.86rem;
  background:#fff;color:var(--magenta);box-shadow:var(--shadow);transition:.15s transform,.15s box-shadow}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.4);box-shadow:none}
.btn.sm{padding:6px 11px;font-size:.78rem;border-radius:10px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ===== Layout ===== */
.wrap{max-width:1280px;margin:0 auto;padding:18px;display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:start}
@media (max-width:980px){.wrap{grid-template-columns:1fr}}
.card-surface{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.sec-title{font-family:"Fredoka";font-weight:600;font-size:1.05rem;display:flex;align-items:center;gap:9px}
.muted{color:#7b7068}
.tiny{font-size:.74rem}

/* ===== Teamboard ===== */
.board{padding:16px}
.board-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.tb-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.zone{
  border-radius:16px;color:#fff;padding:12px;min-height:96px;position:relative;
  display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow);
  cursor:default;transition:.15s transform,.2s box-shadow}
.zone.act{cursor:pointer}
.zone.locked .zicon{opacity:.4}
.zone.locked .zt{opacity:.82}
.zone.locked .zcount{background:rgba(0,0,0,.22)}
.zone.act:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.zone .zt{font-family:"Fredoka";font-weight:600;font-size:.96rem;line-height:1.05;text-shadow:0 1px 2px rgba(0,0,0,.12)}
.zone .zcount{font-size:.68rem;font-weight:800;opacity:.85;align-self:flex-start;display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.18);padding:2px 9px;border-radius:999px}
.z-orange .zcount,.z-gray .zcount{background:rgba(0,0,0,.12)}
.z-green{background:linear-gradient(160deg,var(--green),var(--green-d))}
.z-fuchsia{background:linear-gradient(160deg,#d23a86,var(--magenta-d))}
.z-orange{background:linear-gradient(160deg,#f6b53c,var(--orange-d));color:#3a2600}
.z-orange .zt{text-shadow:none}
.z-blue{background:linear-gradient(160deg,#6f9cd8,var(--blue-d))}
.z-gray{background:linear-gradient(160deg,#dcdee0,#b9bdc2);color:#3a3f45}
.z-gray .zt{text-shadow:none}
.z-crimson{background:linear-gradient(160deg,#d2356f,var(--crimson))}
.zone .lvlbadge{position:absolute;top:8px;right:8px;font-size:.62rem;font-weight:900;
  background:rgba(255,255,255,.9);color:#333;border-radius:7px;padding:1px 6px}
.z-orange .lvlbadge,.z-gray .lvlbadge{background:rgba(0,0,0,.18);color:#fff}

/* center strip */
.tb-center{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.bankcard{border-radius:16px;background:linear-gradient(160deg,#fff,#fff);border:2px solid var(--magenta);
  padding:10px;text-align:center;box-shadow:var(--shadow)}
.bankcard h4{margin:0 0 4px;color:var(--magenta);font-family:"Fredoka";font-size:.82rem}
.bankcard .big{font-family:"Fredoka";font-weight:700;font-size:1.5rem;color:var(--ink);line-height:1}
.bankcard .lbl{font-size:.66rem;font-weight:800;color:#8a8079;text-transform:uppercase;letter-spacing:.4px;margin-top:3px}
.buzzer{grid-column:1 / -1;margin-top:2px;display:flex;align-items:center;gap:12px;justify-content:center;
  background:linear-gradient(120deg,#fff5fa,#fff);border:2px dashed var(--magenta);border-radius:16px;padding:10px}
.buzz-btn{width:70px;height:70px;border-radius:50%;border:none;color:#fff;font-family:"Fredoka";font-weight:700;
  font-size:.8rem;background:radial-gradient(circle at 35% 30%,#ff5fa0,var(--magenta));
  box-shadow:0 8px 0 var(--magenta-d),0 12px 18px rgba(160,20,90,.4);transition:.08s}
.buzz-btn:active{transform:translateY(5px);box-shadow:0 3px 0 var(--magenta-d),0 6px 10px rgba(160,20,90,.4)}

/* ===== Players strip ===== */
.players-strip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px}
.pchip{flex:0 0 auto;min-width:128px;border-radius:14px;padding:9px 11px;background:#fff;border:2px solid var(--line);
  box-shadow:var(--shadow);cursor:pointer;transition:.15s}
.pchip:hover{transform:translateY(-2px)}
.pchip.cur{border-color:var(--magenta);box-shadow:0 0 0 3px rgba(200,28,110,.15),var(--shadow)}
.pchip.lead{outline:2px solid var(--gold);outline-offset:1px}
.pchip .pn{font-family:"Fredoka";font-weight:600;display:flex;align-items:center;gap:6px;font-size:.9rem}
.av{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:.7rem;font-weight:900;flex:0 0 auto}
.pchip .pm{font-size:.74rem;color:#7b7068;margin-top:3px;display:flex;gap:8px;flex-wrap:wrap}
.pchip .pm b{color:var(--ink)}
.turn-tag{font-size:.6rem;font-weight:900;color:#fff;background:var(--magenta);padding:1px 6px;border-radius:999px;vertical-align:middle;text-transform:uppercase;letter-spacing:.3px}

/* ===== Panel (right) ===== */
.panel{padding:16px;min-height:200px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.lvl-dot{width:30px;height:30px;border-radius:9px;color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Fredoka";font-weight:700;flex:0 0 auto}

/* playing card */
.gcard{border-radius:18px;padding:20px;color:#fff;box-shadow:var(--shadow-lg);position:relative;margin:6px 0 4px}
.gcard.green{background:linear-gradient(160deg,var(--green),var(--green-d))}
.gcard.fuchsia{background:linear-gradient(160deg,#d23a86,var(--magenta-d))}
.gcard.orange{background:linear-gradient(160deg,#f6b53c,var(--orange-d));color:#3a2600}
.gcard.blue{background:linear-gradient(160deg,#6f9cd8,var(--blue-d))}
.gcard .frame{border:3px solid rgba(255,255,255,.5);border-radius:12px;padding:16px;min-height:90px;display:flex;flex-direction:column;justify-content:center}
.gcard.orange .frame{border-color:rgba(0,0,0,.18)}
.gcard .ctxt{font-size:1.02rem;line-height:1.5;font-weight:700;text-align:center}
.gcard .cnum{position:absolute;top:10px;left:14px;font-weight:900;opacity:.6;font-size:.8rem}
.gcard .cterm{font-family:"Fredoka";font-weight:600;text-align:center;font-size:1.15rem;margin-bottom:6px}
/* card header with icon */
.gcard .ghead{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.gcard .gicon{font-size:1.7rem;width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.28);box-shadow:0 2px 6px rgba(0,0,0,.1);flex:0 0 auto}
.gcard.orange .gicon{background:rgba(0,0,0,.10)}
.gcard .glabel{font-family:"Fredoka";font-weight:600;font-size:.94rem;opacity:.95;flex:1;line-height:1.1}
.gcard .gnum{font-weight:900;opacity:.55;font-size:.82rem}
/* guided action bar */
.actionbar{display:flex;align-items:center;gap:11px;background:linear-gradient(120deg,#fff6fb,#fff);border:2px solid var(--magenta);
  border-radius:14px;padding:10px 13px;margin-bottom:12px}
.actionbar .ab-av{width:34px;height:34px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto;font-family:"Fredoka"}
.actionbar .ab-txt{font-size:.9rem;line-height:1.3}
.actionbar .ab-txt b{font-family:"Fredoka"}
.actionbar.l1{border-color:var(--green);background:linear-gradient(120deg,#f0faf1,#fff)}
.actionbar.l3{border-color:var(--orange-d);background:linear-gradient(120deg,#fff8ea,#fff)}
.actionbar.l5{border-color:var(--blue-d);background:linear-gradient(120deg,#eef4fc,#fff)}
.progress-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;align-items:center}
.pdlabel{font-size:.72rem;font-weight:800;color:#8a8079}
.pchipdot{width:13px;height:13px;border-radius:50%;border:2px solid var(--gray-d);background:#fff}
.pchipdot.done{background:var(--green);border-color:var(--green)}
.pchipdot.now{border-color:var(--magenta);box-shadow:0 0 0 3px rgba(200,28,110,.15)}
.level-done{text-align:center;padding:18px 10px}
.level-done .big{font-family:"Fredoka";font-size:1.3rem;color:var(--green-d);margin:6px 0}
.btn.pulse,.cta.pulse{animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(200,28,110,.5)}50%{box-shadow:0 0 0 8px rgba(200,28,110,0)}}
.zicon{position:absolute;bottom:9px;right:10px;font-size:1.35rem;opacity:.9}
/* fx: confetti + celebration */
#fxCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:95}
.celebrate{position:fixed;inset:0;z-index:96;display:flex;align-items:center;justify-content:center;pointer-events:none}
.celebrate .badge{background:linear-gradient(135deg,var(--magenta),#ff6aa6);color:#fff;padding:22px 36px;border-radius:24px;
  box-shadow:var(--shadow-lg);text-align:center;transform:scale(.4);opacity:0;animation:cpop .55s cubic-bezier(.2,1.5,.4,1) forwards}
.celebrate .badge .em{font-size:2.7rem;line-height:1}
.celebrate .badge .ti{font-family:"Fredoka";font-weight:700;font-size:1.55rem;margin-top:6px}
.celebrate .badge .su{opacity:.93;font-size:.92rem;margin-top:5px;max-width:320px}
@keyframes cpop{to{transform:scale(1);opacity:1}}
.celebrate.out .badge{animation:cpopout .42s ease forwards}
@keyframes cpopout{to{transform:scale(.82) translateY(-12px);opacity:0}}
.buzz-btn.ring{animation:buzzring .35s ease}
@keyframes buzzring{0%{transform:scale(1)}40%{transform:scale(.9) rotate(-3deg)}100%{transform:scale(1)}}

.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row.end{justify-content:flex-end}
.field{width:100%;padding:11px 13px;border:2px solid var(--line);border-radius:12px;font-family:inherit;font-size:1rem}
.field:focus{outline:none;border-color:var(--magenta)}
.opt{width:100%;text-align:left;background:#fff;border:2px solid var(--line);border-radius:12px;padding:11px 13px;font-weight:700;font-size:.92rem;margin:6px 0;transition:.12s}
.opt:hover{border-color:var(--magenta);background:#fff5fa}
.opt.correct{border-color:var(--green);background:#eafaec}
.opt.wrong{border-color:#e0524e;background:#fdeceb}
.note{background:#fff8ee;border:1px solid #f3e2c2;border-radius:12px;padding:10px 12px;font-size:.86rem;margin:8px 0}
.note.ok{background:#eafaec;border-color:#bfe6c5}
.note.bad{background:#fdeceb;border-color:#f3c7c5}

.cta{border:none;border-radius:12px;padding:11px 16px;font-weight:800;color:#fff;box-shadow:var(--shadow);transition:.15s transform}
.cta:hover{transform:translateY(-1px)}
.cta.green{background:var(--green)} .cta.magenta{background:var(--magenta)}
.cta.orange{background:var(--orange-d)} .cta.blue{background:var(--blue-d)}
.cta.gray{background:#7d848b} .cta.red{background:#d3514c}
.cta:disabled{opacity:.5;cursor:not-allowed;transform:none}

.steps{display:flex;gap:6px;margin:2px 0 10px;flex-wrap:wrap}
.step{flex:1 1 0;min-width:54px;text-align:center;font-size:.66rem;font-weight:800;padding:7px 4px;border-radius:9px;background:#f1ece6;color:#9a9089}
.step.on{color:#fff}
.step.l1{background:var(--green)} .step.l2{background:var(--magenta)} .step.l3{background:var(--orange-d)}
.step.l4{background:#7d848b} .step.l5{background:var(--blue-d)} .step.lf{background:var(--crimson)}

/* portfolio */
.pf-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px}
@media (max-width:560px){.pf-grid{grid-template-columns:1fr 1fr}}
.pf-cell{background:linear-gradient(160deg,#fff,#fff);border:2px solid var(--magenta);border-radius:13px;padding:8px;text-align:center;position:relative}
.pf-cell .pf-l{font-size:.66rem;font-weight:900;color:var(--magenta);text-transform:uppercase;letter-spacing:.3px;line-height:1.1;min-height:24px;display:flex;align-items:center;justify-content:center}
.pf-cell .pf-v{font-family:"Fredoka";font-weight:700;font-size:1.25rem;margin-top:3px}
.pf-cell .ic{font-size:1.2rem}
.move-row{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.held{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.held .h{font-size:.72rem;font-weight:800;padding:4px 9px;border-radius:999px;color:#fff}
.held .h.green{background:var(--green)} .held .h.orange{background:var(--orange-d)}
.held .h.fuchsia{background:var(--magenta)}

/* word search */
.ws-wrap{overflow:auto;border-radius:12px;border:2px solid var(--blue-d);padding:8px;background:#eef4fc}
table.ws{border-collapse:collapse;margin:0 auto}
table.ws td{width:26px;height:26px;text-align:center;font-family:"Fredoka";font-weight:600;font-size:.82rem;
  color:#27384f;cursor:pointer;user-select:none;border-radius:6px}
table.ws td.sel{background:var(--gold);color:#5a4500}
table.ws td.found{background:var(--blue-d);color:#fff}
.wordlist{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.wchip{font-size:.76rem;font-weight:800;padding:5px 10px;border-radius:999px;background:#e7eefa;color:#3a557e;border:1px solid #cdddf3}
.wchip.done{background:var(--green);color:#fff;border-color:var(--green);text-decoration:line-through}
.hintbox{font-size:.8rem;margin:6px 0;padding:8px 10px;background:#eef4fc;border-radius:10px;border:1px solid #cdddf3}

/* log + toast */
.logbox{max-height:148px;overflow:auto;font-size:.78rem;line-height:1.5}
.logbox div{padding:3px 0;border-bottom:1px dashed var(--line)}
.logbox .pos{color:var(--green-d);font-weight:800}
.logbox .neg{color:#c4403b;font-weight:800}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--ink);color:#fff;padding:11px 18px;border-radius:12px;font-weight:800;z-index:90;
  box-shadow:var(--shadow-lg);transition:.25s;pointer-events:none;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.ok{background:#2f8a3a}#toast.bad{background:#c4403b}

/* setup / modal */
.overlay{position:fixed;inset:0;background:rgba(30,12,22,.55);z-index:80;display:flex;align-items:center;justify-content:center;padding:18px}
.modal{background:#fff;border-radius:22px;max-width:560px;width:100%;box-shadow:var(--shadow-lg);overflow:hidden;max-height:92vh;display:flex;flex-direction:column}
.modal .mh{background:linear-gradient(120deg,var(--magenta),#d83b86);color:#fff;padding:18px 22px}
.modal .mb{padding:20px 22px;overflow:auto}
.seg{display:flex;gap:8px;margin:8px 0 14px}
.seg button{flex:1;border:2px solid var(--line);background:#fff;border-radius:12px;padding:12px;font-weight:800;font-family:"Fredoka"}
.seg button.on{border-color:var(--magenta);background:#fff5fa;color:var(--magenta)}
.name-row{display:flex;align-items:center;gap:8px;margin:7px 0}
.name-row input{flex:1}
.infobar{background:#fff8ee;border:1px solid #f3e2c2;border-radius:12px;padding:10px 12px;font-size:.82rem;margin:10px 0}
.rules{font-size:.84rem;line-height:1.55}
.rules h4{margin:12px 0 4px;font-family:"Fredoka";color:var(--magenta)}
.kbd{background:#f1ece6;border-radius:6px;padding:1px 6px;font-weight:800;font-size:.78rem}
/* timer */
.timer{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:4px 6px 4px 12px}
.timer #timeTxt{font-family:"Fredoka";font-weight:700;font-variant-numeric:tabular-nums;min-width:50px;text-align:center;color:#fff;cursor:pointer;font-size:.95rem}
.timer.low #timeTxt{color:#ffe08a}
.timer.done{animation:flash 1s infinite}
.timer button{border:none;background:#fff;color:var(--magenta);width:26px;height:26px;border-radius:50%;font-weight:900;cursor:pointer;line-height:1;font-size:.8rem}
.timer button:hover{transform:scale(1.08)}
@keyframes flash{0%,100%{background:rgba(255,255,255,.16)}50%{background:rgba(255,90,90,.7)}}
/* pendo notes */
.note-p{border-radius:11px;background:linear-gradient(135deg,#d2356f,var(--magenta-d));padding:5px;box-shadow:var(--shadow)}
.note-p .inner{border-radius:7px;padding:7px 11px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.note-p .nside{display:flex;flex-direction:column;line-height:1.05}
.note-p .nside.r{align-items:flex-end;text-align:right}
.note-p .nl{font-family:"Fredoka";font-weight:700;font-size:1.25rem;color:#163b59}
.note-p .nd{font-size:.56rem;font-weight:800;letter-spacing:.6px;color:#4a4a4a;opacity:.8}
.note-p .nm{font-family:"Fredoka";font-weight:600;font-size:.74rem;color:#333}
.note-p .face{font-size:1.7rem;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));display:flex;align-items:center;justify-content:center}
.char-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.char-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.char-note{position:relative;height:120px;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid var(--line)}
.char-den{position:absolute;top:8px;right:8px;background:var(--magenta);color:#fff;font-size:.66rem;font-weight:800;padding:3px 9px;border-radius:999px}
.char-word{position:absolute;top:8px;left:10px;color:#7a2c52;font-size:.66rem;font-weight:800;opacity:.85}
.char-body{padding:10px 13px}
.char-nm{font-family:"Fredoka";font-weight:600;font-size:1.05rem}
.char-role{color:var(--magenta);font-weight:800;font-size:.78rem;margin:1px 0 5px}
.char-desc{font-size:.82rem;color:#6b6058;line-height:1.45}
.bankcard.act{cursor:pointer;transition:.15s transform,.2s box-shadow}
.bankcard.act:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.bankcard .hint{font-size:.6rem;font-weight:800;color:var(--magenta);margin-top:3px}
.note-p.big{width:100%;max-width:320px}
.note-p.big .inner{min-height:66px}
.walrow{display:flex;align-items:center;gap:12px;margin:9px 0}
.walx{font-family:"Fredoka";font-weight:700;font-size:1.15rem;color:var(--magenta);min-width:38px}
.wallet-strip{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.note-mini{display:flex;align-items:center;gap:5px;border-radius:8px;padding:3px 8px 3px 4px;background:linear-gradient(135deg,#d2356f,var(--magenta-d));box-shadow:var(--shadow)}
.note-mini .mv{font-family:"Fredoka";font-weight:700;color:#fff;font-size:.9rem;background:rgba(255,255,255,.18);border-radius:6px;padding:0 7px}
.note-mini .mx{font-weight:800;color:#fff;font-size:.78rem}
.savebar{background:#eafaec;border:1px solid #bfe6c5;border-radius:13px;padding:11px 13px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.deckbody{display:grid;gap:10px}
.deckcard{border-radius:12px;border:1px solid var(--line);overflow:hidden;background:#fff}
.deckcard .dch{display:flex;align-items:center;gap:9px;padding:8px 12px;color:#fff;font-family:"Fredoka";font-weight:600;font-size:.9rem}
.deckcard .dci{font-size:1.15rem}
.deckcard .dcb{padding:10px 13px;font-size:.86rem;line-height:1.5;color:var(--ink)}
.deckcard .dca{margin-top:7px;font-size:.82rem;font-weight:800;color:var(--green-d)}
.deckhead{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.deckhead .dt{font-size:.74rem;font-weight:800;padding:4px 10px;border-radius:999px;color:#fff}
/* badges */
.dimblock{margin-bottom:14px}
.dimhd{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:.95rem}
.dimdot{width:12px;height:12px;border-radius:50%;display:inline-block;flex:0 0 auto}
.dimcount{margin-left:auto;font-weight:800;color:#8a8079;font-size:.8rem}
.badgegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:9px}
.badge{border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center;opacity:.55;filter:grayscale(.6)}
.badge.on{opacity:1;filter:none;box-shadow:var(--shadow)}
.badge .bic{width:42px;height:42px;border-radius:12px;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:#ece7e1}
.badge .bt{font-family:"Fredoka";font-weight:600;font-size:.84rem;line-height:1.05}
.badge .bd{font-size:.68rem;color:#8a8079;margin-top:3px;line-height:1.3}
/* feedback */
.fbblock{margin-bottom:14px}
.fbhd{display:flex;align-items:center;gap:7px;margin-bottom:7px;font-size:.95rem}
.fbrow{margin:8px 0}
.fbq{font-size:.86rem;margin-bottom:5px}
.scale{display:flex;gap:6px}
.scale .sc{flex:1;border:2px solid var(--line);background:#fff;border-radius:10px;padding:8px 0;font-family:"Fredoka";font-weight:700;font-size:.95rem;color:#8a8079;cursor:pointer;transition:.12s}
.scale .sc:hover{border-color:var(--ac)}
.scale .sc.on{background:var(--ac);border-color:var(--ac);color:#fff}
.pbrow{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:9px}
.pbhd{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:.95rem}
.pbicons{display:flex;gap:7px;flex-wrap:wrap}
.pbadge{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;background:#ece7e1;border:2px solid var(--line);color:#fff;opacity:.5;filter:grayscale(.5)}
.pbadge.on{opacity:1;filter:none;box-shadow:var(--shadow)}
footer{max-width:1280px;margin:0 auto;padding:8px 18px 30px;color:#9a9089;font-size:.74rem;text-align:center}
footer a{color:var(--magenta)}

/* ===== PostgreSQL / facilitated-session layer ===== */
.app-shell{max-width:1280px;margin:18px auto 0;padding:0 18px;display:grid;gap:14px}
.session-panel{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:14px}
.session-panel.access-panel{max-width:1280px;width:100%;margin:0 auto;padding:20px}
.session-panel[data-hidden="true"]{display:none}
.session-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.session-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.session-grid.access-choice{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.session-grid.access-choice .session-form{padding:16px;border:1px solid var(--line);border-radius:14px;background:#fffdfb}
@media(max-width:860px){.session-grid,.session-grid.two,.session-grid.access-choice{grid-template-columns:1fr}}
.session-form{display:grid;gap:10px}
.session-form label{font-weight:800;font-size:.82rem;color:#756b64;display:grid;gap:5px}
.session-form label.check-row{display:flex;align-items:flex-start;gap:9px;line-height:1.35}
.session-form label.check-row input[type="checkbox"]{flex:0 0 auto;margin:2px 0 0;width:16px;height:16px}
.facilitator-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 12px}
.fac-step{border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;gap:8px;align-items:flex-start;padding:9px}
.fac-step.done{background:#eafaec;border-color:#bfe6c5}
.fac-step-num{width:24px;height:24px;border-radius:999px;background:var(--magenta);color:#fff;font-family:"Fredoka";font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.fac-step.done .fac-step-num{background:var(--green)}
.fac-step b{display:block;font-family:"Fredoka";font-size:.86rem;line-height:1.1}
.fac-step span:last-child{display:block;color:#6b6058;font-size:.74rem;line-height:1.25;margin-top:2px}
@media(max-width:980px){.facilitator-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.facilitator-steps{grid-template-columns:1fr}}
.session-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.84rem}
.status-dot{width:10px;height:10px;border-radius:50%;background:var(--gray-d);display:inline-block}
.status-dot.ok{background:var(--green)}.status-dot.warn{background:var(--orange)}.status-dot.bad{background:#d3514c}
.session-card{border:1px solid var(--line);border-radius:14px;padding:11px;background:#fffdfb;display:grid;gap:8px}
.session-card h3{margin:0;font-size:1rem}
.participant-summary{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff;display:grid;gap:3px;font-size:.82rem}
.participant-summary b{font-family:"Fredoka";color:var(--magenta)}
.participant-summary span{color:#6b6058}
.session-actions{display:flex;gap:8px;flex-wrap:wrap}
.join-requests{border-top:1px solid var(--line);padding-top:8px;display:grid;gap:7px}
.join-request-row{border:1px solid #f1d7aa;background:#fff8ea;border-radius:10px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.join-request-row .session-actions{flex-wrap:nowrap}
@media(max-width:560px){.join-request-row{align-items:stretch;flex-direction:column}.join-request-row .session-actions{flex-wrap:wrap}}
.facilitator-panel{max-width:1280px;margin:0 auto 18px;padding:0 18px}
.facilitator-panel-inner{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:12px;display:grid;gap:10px}
.control-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
@media(max-width:980px){.control-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.control-grid .btn{width:100%;min-height:38px}
.join-copy{font-size:.92rem;line-height:1.45;color:#5f554e}
.save-state{font-weight:900;color:var(--green-d)}
.pending-list{display:grid;gap:8px}
.pending-item{border:1px dashed var(--orange-d);background:#fff8ea;border-radius:12px;padding:9px;display:flex;align-items:center;justify-content:space-between;gap:8px}