:root{--g:#007a65;--g2:#006b5a;--mint:#e8f7f1;--navy:#0c1451;--mut:#5a6896;--bd:#dce6f1;--sh:0 6px 22px rgba(20,50,90,.08);--topH:64px}
*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#88cbb5 #edf6f2}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:#edf6f2;border-radius:8px}
::-webkit-scrollbar-thumb{background:#88cbb5;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--g,#007a65)}
::-webkit-scrollbar-thumb:active{background:var(--g2,#006b5a)}
::-webkit-scrollbar-corner{background:transparent}
body{font-family:Lato,system-ui,sans-serif;background:linear-gradient(180deg,#f6fafd,#eaf2f9);color:var(--navy);min-height:100vh;margin:0}
body.noscroll{overflow:hidden}
h1,h2,h3,p{margin:0}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid #19b89a;outline-offset:2px}
.btn-g,.btn-o{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:12px;font-weight:700;border:1.5px solid transparent;font-size:1rem}
.btn-g{background:linear-gradient(180deg,var(--g),var(--g2));color:#fff;box-shadow:0 6px 14px rgba(0,122,101,.25)}
.btn-g:disabled{opacity:.6}
.btn-o{background:#fff;color:var(--navy);border-color:#aab6d6}
.ctl{width:100%;height:46px;border:1px solid var(--bd);border-radius:10px;background:#fff;color:var(--navy);padding:0 12px;font:inherit}
.err{color:#b42318;font-size:.85rem;min-height:0}
.err:not(:empty){margin:4px 0}
label{font-weight:700;display:block;margin:0 0 6px}
.emp{text-align:center;color:var(--mut);padding:20px}.emp.boxed{background:#fff;border:1px solid var(--bd);border-radius:14px}
.tw{overflow-x:auto}
/* header */
.top{position:fixed;inset:0 0 auto 0;height:var(--topH);background:#fff;box-shadow:0 2px 14px rgba(20,50,90,.08);z-index:1000;padding-top:env(safe-area-inset-top)}
.top-in{max-width:1180px;margin:0 auto;height:var(--topH);display:flex;align-items:center;gap:16px;padding:0 16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy);min-width:190px}
.logo{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,#00a384,#006b5a);display:grid;place-items:center}.logo svg{width:26px}
.bt{display:flex;flex-direction:column;line-height:1.1}.bt b{font-size:1.2rem}.bt small{font-size:.85rem;color:var(--navy)}
.topnav{display:flex;gap:6px;flex:1;justify-content:center}
.topnav a,.bottomnav a{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;color:var(--mut);text-decoration:none;font-weight:700;font-size:.95rem}
.topnav a i{color:#4a5a96;font-size:1.15rem}
.topnav a.active,.bottomnav a.active{background:var(--mint);color:var(--g)}.topnav a.active i,.bottomnav a.active i{color:var(--g)}
.acct{position:relative;margin-left:auto}
.acbtn{display:flex;align-items:center;gap:10px;border:0;background:none;color:var(--mut)}
.av{width:46px;height:46px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center;font-weight:700}
.menu{display:none;position:absolute;right:0;top:56px;min-width:200px;background:#fff;border:1px solid var(--bd);border-radius:12px;box-shadow:var(--sh);padding:8px}
.menu.show{display:block}.menu .mname{padding:8px 10px;font-weight:700;margin-bottom:6px}.mname small{display:block;font-weight:400;color:var(--mut)}
.menu button{width:100%;text-align:left;border:0;background:none;padding:10px;border-radius:8px;color:var(--navy);font-weight:700}.menu button:hover{background:var(--mint)}
.page{max-width:1000px;margin:0 auto;padding:calc(var(--topH) + env(safe-area-inset-top) + 22px) 16px 40px}
.bottomnav{display:none}
/* panels */
.panel,.wrap{background:transparent}
.panel{background:rgba(255,255,255,.7);border:1px solid #e6eef6;border-radius:18px;box-shadow:var(--sh);padding:22px;max-width:960px;margin:0 auto}
.wrap{max-width:960px;margin:0 auto}
.ph{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}
.ph h1{font-size:2rem;font-weight:900;color:#0a1150}.ph p{color:var(--mut)}
.ph.one{justify-content:flex-start;align-items:center;gap:14px}
.back{border:0;background:none;font-size:1.6rem;color:var(--navy)}.mico{font-size:2.3rem;color:var(--g)}
.rangebtn{display:flex;align-items:center;gap:10px;width:auto;white-space:nowrap;font-weight:700;text-align:left}.rangebtn i:first-child{color:var(--g)}
.rangebtn span{flex:1}
/* meal cells */
.mc{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.mc .hd{display:flex;flex-direction:column;align-items:center;color:var(--mut);font-size:.85rem}
.mc .mi{font-size:1.5rem;color:var(--fg);line-height:1}
.mc .mn{width:100%;max-width:110px;text-align:center;background:var(--bg);border-radius:9px;padding:7px 0;font-weight:700;font-size:1.1rem}
.mc.muted .mi{color:#8d96a8}.mc.muted .mn{background:#e9ecf1;color:#9aa3b2}.mc.muted .hd{color:#9aa3b2}
.mc.cf .hd{flex-direction:row;gap:6px}
/* dashboard */
.drow{background:#fff;border:1px solid #e6eef6;border-radius:14px;margin-bottom:12px;overflow:hidden}
.drow.empty{background:#f1f3f6}.drow.empty .dd,.drow.empty .dd b{color:#8d96a8}
.dmain{display:grid;grid-template-columns:170px 1fr 56px;align-items:center;padding:16px 16px 16px 20px}
.dd{display:flex;flex-direction:column}.dd span{color:var(--mut);font-size:1.05rem}.dd b{font-size:1.15rem;font-weight:900}
.dm{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;border-left:1px solid #e6eef6;padding-left:12px}
.chev{width:42px;height:42px;border-radius:10px;border:1px solid transparent;background:var(--mint);color:var(--g);font-size:1.1rem;justify-self:end;transition:transform .15s}
.drow.empty .chev{background:#e9ecf1;color:#8d96a8}.chev[aria-expanded=true]{transform:rotate(90deg)}
.dtl{border-top:1px solid #e6eef6;padding:10px 20px 14px}
table{border-collapse:collapse;width:100%}
.dtl table th,.dtl table td,.rep th,.rep td{padding:8px 10px;text-align:center;font-size:.92rem;white-space:nowrap}
.dtl th,.rep th{color:var(--mut);font-weight:700;border-bottom:1px solid var(--bd)}
.dtl td:first-child,.rep td:nth-child(2){text-align:left}
/* booking */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin-bottom:18px}
.sel{position:relative}.sel>i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#4a5a96;z-index:1;pointer-events:none}
.sel .ctl{padding-left:40px}.sel.ro .ctl{background:#eef1f5;color:#7b86a3}
select.ctl{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%230c1451' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center}
.sdates{background:#f4faf8;border:1px solid #e3efec;border-radius:14px;padding:14px}
.sdates h2{font-size:1.15rem;font-weight:900;margin-bottom:12px}
.brow{display:grid;grid-template-columns:200px 1fr;align-items:center;background:#fff;border:1px solid #e6eef6;border-radius:12px;padding:10px 14px;margin-bottom:8px}
.bl{display:flex;align-items:center;gap:14px}
.del{width:44px;height:44px;border:0;border-radius:10px;background:#fde8ec;color:#e11d48;font-size:1.15rem}
.bm{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;border-left:1px solid #e6eef6;padding-left:10px}
.ct{display:flex;flex-direction:column;align-items:center;gap:5px}
.ct .hd{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--mut)}.ct .mi{color:var(--fg);font-size:1.25rem;line-height:1}
.cc{display:flex;align-items:center;justify-content:space-between;background:var(--bg);border-radius:9px;padding:2px;min-width:106px}
.cc button{width:32px;height:32px;border:0;background:transparent;font-size:1.2rem;font-weight:700;color:var(--navy);border-radius:8px}
.cc button:hover{background:rgba(255,255,255,.6)}
.cc output{min-width:26px;text-align:center;font-weight:700}
.acts{display:flex;justify-content:flex-end;gap:16px;margin-top:20px}
.acts .btn-o,.acts .btn-g{min-width:180px}
.acts.sm{margin-top:12px}.acts.sm .btn-o,.acts.sm .btn-g{min-width:0;flex:1}
/* members */
.mbar{display:flex;gap:16px;margin-bottom:18px}
.search{flex:1;position:relative}.search i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#4a5a96}
.search input{width:100%;height:56px;border:1px solid var(--bd);border-radius:12px;padding:0 16px 0 46px;font:inherit;background:#fff;box-shadow:0 2px 8px rgba(20,50,90,.05)}
.mt{background:#fff;border:1px solid var(--bd);border-radius:16px;overflow:hidden;box-shadow:var(--sh);overflow-x:auto}
.mt th{background:#e8f7f1;padding:16px 8px;font-weight:900}
.mt td{padding:11px 8px;border-top:1px solid #e6eef6;text-align:center}.mt th,.mt td{text-align:center;border-right:1px solid #eef3f8}.mt th:last-child,.mt td:last-child{border-right:0}
.bkbtn{width:46px;height:38px;border:0;border-radius:9px;background:var(--mint);color:var(--g);font-size:1.25rem}
/* reports */
.totals{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}
.mc.tot{background:#fff;border:1px solid #e6eef6;border-radius:14px;padding:14px 8px}.mc.tot .mn{max-width:none;width:70%}
.mc.tot.all{--bg:var(--mint)}.mc.tot.all .ml{font-weight:700;color:var(--navy)}
.rep{background:#fff;border:1px solid #e6eef6;border-radius:14px;padding:8px}
/* overlays */
.ov{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}
.pop{background:#fff;border-radius:16px;width:330px;max-width:100%;padding:16px;box-shadow:var(--sh)}
.calh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.calh button{border:0;background:var(--mint);color:var(--g);width:36px;height:36px;border-radius:9px}
.cgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}.wdn span{color:var(--mut);font-size:.8rem;padding:4px 0}
.cd{height:40px;border:0;border-radius:10px;background:none;color:var(--navy);font-weight:700}.cd:hover{background:var(--mint)}.cd.in{background:var(--mint);border-radius:0}.cd.sel{background:var(--g);color:#fff}
.chint{text-align:center;color:var(--mut);font-size:.9rem;margin-top:8px}
.dlg{background:#fff;border-radius:18px;width:100%;max-width:760px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.25);border:1px solid var(--bd)}
.dlg.small{max-width:440px}
.dlg-h{display:flex;align-items:center;gap:14px;padding:20px 22px 8px}.dlg-h>div{flex:1}.dlg-h h2{font-size:1.6rem;font-weight:900}.dlg-h p{color:var(--mut)}
.okc{width:60px;height:60px;border-radius:50%;background:var(--mint);color:var(--g);display:grid;place-items:center;font-size:1.8rem}
.x{width:38px;height:38px;border-radius:50%;border:0;background:#eef1f6;color:var(--navy)}
.dlg-b{padding:10px 22px;overflow:auto}.dlg-f{display:flex;justify-content:flex-end;gap:14px;padding:14px 22px 20px;border-top:1px solid #eef3f8}
.dlg-f .btn-o,.dlg-f .btn-g{min-width:160px}
.grab{display:none}
.sumbar{display:grid;grid-template-columns:repeat(3,1fr);background:var(--mint);border-radius:12px;padding:12px 16px;margin-bottom:12px}
.sumbar div{padding:0 12px;border-left:1px solid #cfe6de}.sumbar div:first-child{border:0;padding-left:0}.sumbar small{display:block;color:var(--mut)}
.crow{display:grid;grid-template-columns:160px 1fr;align-items:center;border:1px solid #e6eef6;border-radius:12px;padding:8px 14px;margin-bottom:8px}
.cm{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.cf .mn{font-size:1rem;padding:5px 0}.cf .hd{font-size:.8rem}
.dlg-b .ctl{margin-bottom:10px}.dlg-b label{margin-top:8px}
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--g2);color:#fff;padding:12px 20px;border-radius:12px;opacity:0;pointer-events:none;transition:.2s;z-index:80;max-width:90vw}
#toast.show{opacity:1;transform:translate(-50%,0)}#toast.bad{background:#b42318}
/* login */
body.lg{background:linear-gradient(135deg,#004D46,#006B5A)}
.login{min-height:100vh;display:flex;justify-content:center;padding:28px 16px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 20% 0%,rgba(0,190,160,.35),transparent 55%),radial-gradient(ellipse at 100% 60%,rgba(0,150,125,.3),transparent 50%),linear-gradient(135deg,#004D46,#006B5A)}
.lg-in{width:100%;max-width:450px;text-align:center;color:#fff;margin:auto}
.logo-lg{display:inline-flex;align-items:center;justify-content:center;padding:12px 28px;margin:0 auto 18px;border-radius:18px;background:#fff;box-shadow:0 10px 28px rgba(0,0,0,.25);transition:transform .2s ease,box-shadow .2s ease}.logo-lg:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.3)}.logo-lg img{height:38px;width:auto;max-width:100%;object-fit:contain;display:block}.logo-lg svg{width:52px}
.lg-in h1{font-size:2.5rem;font-weight:900;line-height:1.1;margin-bottom:22px}.lg-in h2{font-size:1.5rem;font-weight:700}.tag{opacity:.9;margin:8px 0 18px}
.lcard{background:#fff;border:3px solid #2fd0ae;border-radius:22px;padding:26px 24px;color:var(--navy);text-align:left;box-shadow:0 18px 45px rgba(0,0,0,.35)}
.lcard h3{text-align:center;font-size:1.9rem;font-weight:900}.sub{text-align:center;color:var(--mut);margin-bottom:18px}
.inp{position:relative;margin-bottom:4px}.inp>i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#5a6896}
.inp input{width:100%;height:52px;border:1px solid var(--bd);border-radius:12px;background:#f7f8fd;padding:0 46px;font:inherit}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:#4a5a96;width:40px;height:40px;font-size:1.15rem}
.lrow{display:flex;justify-content:space-between;align-items:center;margin:14px 0 16px}.lrow a{color:var(--g);font-weight:700;text-decoration:none}
.chk{display:flex;align-items:center;gap:10px;margin:0;font-weight:400}.chk input{width:22px;height:22px;accent-color:var(--g)}
.lcard label{margin-top:12px}.lrow label{margin:0}
.demo{margin-top:16px;font-size:.85rem;opacity:.85}
/* mobile */
@media(max-width:767.98px){
 :root{--topH:60px}
 .topnav,.brand .bt small+*{display:none}.brand{min-width:0}.bt b{font-size:1.1rem}
 .page{padding:calc(var(--topH) + env(safe-area-inset-top) + 14px) 12px calc(96px + env(safe-area-inset-bottom))}
 .bottomnav{display:flex;position:fixed;inset:auto 0 0 0;background:#fff;border-top:1px solid #e6eef6;padding:6px 6px calc(8px + env(safe-area-inset-bottom));justify-content:space-around;z-index:30}
 .bottomnav a{flex-direction:column;gap:2px;font-size:.78rem;padding:8px 10px;flex:1;text-align:center}.bottomnav a i{font-size:1.3rem}
 .panel{padding:0;background:none;border:0;box-shadow:none}
 .ph h1{font-size:1.7rem}.hide-m{display:none}.rangebtn{font-size:.82rem;padding:0 10px;gap:6px}
 .dmain{grid-template-columns:92px 1fr 22px;padding:12px 6px 12px 12px}.dd span{font-size:.9rem}.dd b{font-size:.9rem}
 .dm{gap:6px;padding-left:8px}.mc .hd{font-size:.72rem}.mc .mi{font-size:1.2rem}.mc .mn{font-size:.95rem;padding:6px 0}
 .chev{width:22px;height:34px;background:none!important;border:0}
 .dtl{padding:8px 10px}
 .fgrid{grid-template-columns:repeat(20,1fr);gap:12px 10px}.fgrid>div:nth-child(1){grid-column:span 13}.fgrid>div:nth-child(2){grid-column:span 7}.fgrid>div:nth-child(n+3){grid-column:span 10}.fgrid .ctl{font-size:.9rem}.sel .ctl{padding-left:36px}.sel>i{left:11px}
 .sdates{padding:10px 8px}
 .brow{grid-template-columns:1fr;gap:10px;padding:10px 8px}.bm{border:0;padding:0;gap:0}
 .bl{flex-direction:row-reverse;justify-content:space-between;gap:10px}.del{width:38px;height:38px}
 .ct{padding:0 4px;border-left:1px solid rgba(12,20,81,.12)}.ct:first-child{border-left:0;padding-left:0}.ct:last-child{padding-right:0}
 .ct .mi{height:1.3rem;display:grid;place-items:center}
 .ct .hd{flex-direction:column;gap:0;font-size:.7rem}.cc{min-width:0;width:100%}.cc button{width:22px;height:30px;font-size:1rem}.cc output{min-width:18px;font-size:.9rem}
 .acts{gap:10px}.acts .btn-o,.acts .btn-g{min-width:0;flex:1;padding:0 8px}
 .mbar{gap:10px}.mbar .btn-g span{display:inline}.search input{height:52px}
 .mt th,.mt td{padding:9px 4px;font-size:.85rem}.mt th{padding:12px 4px}.bkbtn{width:40px}
 .totals{grid-template-columns:repeat(2,1fr)}
 .ov.sheet{align-items:center;justify-content:center;padding:16px}
 .ov.sheet .dlg{border-radius:18px;max-height:86vh}
 .dlg-h{padding:12px 16px 4px}.dlg-h h2{font-size:1.4rem}.dlg-h p{font-size:.9rem}.okc{width:46px;height:46px;font-size:1.3rem}
 .dlg-b{padding:8px 14px}.dlg-f{padding:12px 14px}.dlg-f .btn-o,.dlg-f .btn-g{min-width:0;flex:1}
 .crow{grid-template-columns:96px 1fr;padding:6px 8px}.cf .ml{display:none}.sumbar b{font-size:.9rem}.sumbar div{padding:0 6px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.sumbar div:first-child{padding-left:6px}
 .ov{padding:12px}#toast{bottom:calc(84px + env(safe-area-inset-bottom))}
 .lcard{padding:22px 18px}
}

.sel select.ctl,.sel input.ctl{padding-right:34px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}

.fgrid .rangebtn{width:100%}
.menu{min-width:260px;padding:10px}
.mhead{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:6px 6px 12px;border-bottom:1px solid var(--bd);margin-bottom:6px}
.mwho{display:flex;flex-direction:column;min-width:0}.mwho b{font-size:1.05rem}.mwho small{color:var(--mut)}
.av.lg{width:52px;height:52px;flex:none;font-size:1.1rem}
.menu button i{margin-right:6px;color:var(--g)}

/* ===== admin dashboard & submission details ===== */
.adm{max-width:1100px;margin:0 auto}.adm>.ph h1{display:flex;align-items:center;gap:12px}.adm>.ph h1 i{color:var(--g)}
.mcards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.mcard{display:flex;align-items:center;gap:16px;background:var(--bg);border:1px solid rgba(12,20,81,.06);border-radius:16px;padding:18px;box-shadow:var(--sh)}
.mci{width:56px;height:56px;flex:none;border-radius:50%;background:rgba(255,255,255,.55);display:grid;place-items:center;font-size:1.9rem;color:var(--fg)}
.mcard small{display:block;color:var(--mut);font-size:1rem}.mcard b{font-size:2rem;font-weight:900;line-height:1.1}
.panel.sub{max-width:none}.ph h2{font-size:1.35rem;font-weight:900}
.at th,.at td{border:1px solid #e3ebf4;padding:8px 6px;text-align:center;white-space:normal}.at td:nth-child(2){text-align:left}
tr.paid td{background:linear-gradient(90deg,rgba(34,197,94,.2),rgba(34,197,94,.07))}
tr[data-act=entry]{cursor:pointer}tr[data-act=entry]:hover td{filter:brightness(.96)}.at .tr td{font-weight:900;background:#fff}
.bs{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:8px;font-weight:700;font-size:.85rem}.bs.ok{background:#15803d;color:#fff}.bs.pend{background:#e5e8ee;color:#556}
.fin{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px;margin-top:16px}
.fc{border:1px solid;border-radius:14px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px}.fc span{font-weight:700;display:block}.fc small{color:var(--mut)}.fc b{font-size:1.5rem}
.fc.tot{background:linear-gradient(90deg,#e3f5ec,#f2faf6);border-color:#cfeadd}.fc.tot b{background:#cdeedd;color:var(--g2);padding:6px 16px;border-radius:10px;font-size:1.7rem}.fc.paid{background:#effaf3;border-color:#d3ecdc;color:#15803d}.fc.pend{background:#f3f5f8;border-color:#e0e5ec}
.apop{max-width:620px}.apop .logo{flex:none}
.pmc{display:flex;align-items:center;gap:14px;background:var(--mint);border-radius:14px;padding:14px;margin-bottom:12px}.pmc.paid{background:linear-gradient(90deg,rgba(34,197,94,.22),rgba(34,197,94,.06))}
.ini{width:60px;height:60px;flex:none;border-radius:50%;background:#cdeedd;color:var(--g2);display:grid;place-items:center;font-weight:900;font-size:1.35rem}
.pmc .who{flex:1;min-width:0}.pmc .who b{font-size:1.2rem;display:block}.pmc .who span{color:var(--mut)}.pst{text-align:right;font-size:.78rem;color:var(--mut)}.pst .bs{margin-bottom:4px}
.pinfo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.pinfo>div{display:flex;gap:10px;align-items:center}.pinfo small{display:block;color:var(--mut)}.pinfo i{font-size:1.5rem}
.t4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.mt4{background:var(--bg);border-radius:12px;padding:10px 6px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}.mt4 .hd{display:flex;gap:5px;align-items:center;font-size:.85rem;color:var(--mut)}.mt4 .mi{color:var(--fg)}.mt4 b{font-size:1.5rem}.mt4 small{color:var(--mut);font-size:.75rem}.mt4 .cc{background:rgba(255,255,255,.65);min-width:0;width:100%}
.ptot{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#f3f7fd;border:1px solid #e3ebf4;border-radius:12px;padding:12px 14px}.ptot small.d{display:block;color:var(--mut)}.ptot b.amt{font-size:1.8rem;color:var(--g2);background:#d9f2e6;padding:6px 16px;border-radius:10px}
.btn-o.red{color:#e11d48;border-color:#f6b9c6;background:#fff5f7}.demo a{color:#fff;font-weight:700}
@media(max-width:767.98px){
 .mcards{grid-template-columns:repeat(2,1fr);gap:10px}.mcard{padding:12px;gap:10px}.mci{width:44px;height:44px;font-size:1.4rem}.mcard b{font-size:1.6rem}
 .panel.sub{padding:12px;background:rgba(255,255,255,.7);border:1px solid #e6eef6;border-radius:16px}.ph h2{font-size:1.1rem}
 .at th,.at td{padding:6px 2px;font-size:.74rem}.bs{padding:3px 7px;font-size:.72rem}
 .fin{grid-template-columns:1fr}.fc b{font-size:1.3rem}
 .t4{gap:6px}.mt4{padding:8px 2px}.mt4 b{font-size:1.2rem}.mt4 small{font-size:.6rem}.mt4 .hd{font-size:.7rem;flex-direction:column;gap:0}.pmc{padding:10px;gap:10px}.ini{width:48px;height:48px;font-size:1.1rem}.ptot b.amt{font-size:1.4rem;padding:4px 10px}.ptot small.d{font-size:.7rem}
 .dlg-f .btn-o,.dlg-f .btn-g{padding:0 8px}
}

/* ===== design refresh: squared nav tiles, banner headers, stat cards ===== */
.topnav{gap:8px}
.topnav a{flex-direction:column;justify-content:center;gap:2px;width:92px;height:54px;padding:0;border:1px solid #e3ebf4;border-radius:12px;background:#fff;font-size:.8rem;position:relative}
.topnav a i{font-size:1.2rem}
.topnav a.active{background:var(--mint);border-color:#9fd8c4}
.topnav a.active::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:3px;border-radius:3px;background:var(--g)}
.acbtn{gap:8px}.aname{font-weight:700;color:var(--mut)}
.adm>.ph,section.panel:not(.bk):not(.sub)>.ph{align-items:center;background:linear-gradient(90deg,#e3f6ee,#f3fbf8);border:1px solid #cfeadd;border-radius:16px;padding:12px 14px;margin-bottom:14px}
.adm>.ph h1,section.panel:not(.bk):not(.sub)>.ph h1{font-size:1.5rem}
.adm>.ph h1 i{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:#d4efe3;font-size:1.4rem}
.mcard{flex-direction:column;text-align:center;gap:8px;padding:16px 10px}
.mci{width:52px;height:52px;margin:0 auto}
.mcard small{font-weight:700;color:var(--navy);font-size:.95rem}.mcard b{font-size:2rem;color:var(--navy)}
.fin{grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid #e3ebf4;border-radius:16px;padding:12px;gap:10px}
.fin .fc,.fin .fc.tot,.fin .fc.paid,.fin .fc.pend{background:#fff;border-color:#e3ebf4;justify-content:flex-start;padding:10px 12px;color:var(--navy)}
.fin .fc>div{flex:1}.fin .fc b{font-size:1.3rem;background:none;padding:0;color:var(--navy)}
.fi{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.2rem}
.fc.tot .fi{background:var(--g)}.fc.paid .fi{background:#16a34a}.fc.pend .fi{background:#f59e0b}
@media(max-width:767.98px){
 .bottomnav{gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));justify-content:stretch}
 .bottomnav a{height:58px;justify-content:center;padding:6px 2px;border:1px solid #e3ebf4;border-radius:12px;background:#fff;font-size:.72rem}
 .bottomnav a.active{background:var(--mint);border-color:#9fd8c4}
 .page{padding-bottom:calc(106px + env(safe-area-inset-bottom))}
 .fin{grid-template-columns:1fr}
 .mcard{padding:12px 8px}.mci{width:46px;height:46px}.mcard b{font-size:1.7rem}
 .adm>.ph h1,section.panel:not(.bk):not(.sub)>.ph h1{font-size:1.25rem}.adm>.ph h1 i{width:38px;height:38px}
 #toast{bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* ===== UXPeak UI-only visual refresh based on the supplied Chairs Admin reference ===== */
:root{
 --g:#07866f;--g2:#05745f;--mint:#e2f7ef;--navy:#101b5b;--mut:#66718f;
 --bd:#e4eaf3;--sh:0 5px 18px rgba(27,48,89,.055);--topH:70px;
}
body{background:linear-gradient(180deg,#f8fafc 0%,#f2f6fb 100%);color:var(--navy)}
.top{background:rgba(255,255,255,.97);border-bottom:1px solid #edf1f6;box-shadow:0 3px 14px rgba(25,45,80,.045)}
.top-in{max-width:1240px;gap:14px;padding:0 20px}
.brand{gap:12px;min-width:205px}.logo{width:48px;height:48px;border-radius:13px;box-shadow:0 4px 10px rgba(7,134,111,.15)}
.bt b{font-size:1.24rem;letter-spacing:-.025em}.bt small{font-size:.86rem;color:#5e6886;margin-top:3px}
.topnav{gap:7px}.topnav a{width:94px;height:58px;border-radius:13px;border-color:transparent;background:transparent;color:#66718f;font-size:.8rem;transition:background .15s,border-color .15s}
.topnav a i{font-size:1.15rem;color:#66718f}.topnav a:hover,.bottomnav a:hover{background:#f4f8fb}
.topnav a.active,.bottomnav a.active{background:#e3f7f0;border-color:#c6ecdf;color:#08775f}
.topnav a.active i,.bottomnav a.active i{color:#08775f}.topnav a.active::after{left:15px;right:15px;height:3px;background:#07866f}
.av{background:linear-gradient(145deg,#109c80,#04745f);box-shadow:0 2px 6px rgba(7,134,111,.12)}
.acct{position:relative;margin-left:auto}
.acbtn{color:#596582;cursor:pointer;padding:4px 6px;border-radius:10px;transition:background .15s ease}
.acbtn:hover{background:rgba(0,109,91,.05)}
.acbtn .bi-chevron-down{transition:transform .2s ease;font-size:.85rem}
.acbtn[aria-expanded="true"] .bi-chevron-down{transform:rotate(180deg)}
.menu{border-color:#e6edf4;border-radius:15px;box-shadow:0 14px 36px rgba(22,39,75,.14);z-index:1050;min-width:250px}
.mwho .mname{font-size:1.05rem;font-weight:800;color:#101b5b;line-height:1.25;margin:0}
.mwho .mfellowship{font-size:.82rem;font-weight:600;color:#007a65;line-height:1.25;margin-top:3px;display:block}
.menu .mbody{display:flex;flex-direction:column;gap:4px}
.menu .mbody button{width:100%;text-align:left;border:0;background:none;padding:10px 12px;border-radius:8px;color:#101b5b;font-weight:700;font-size:.88rem;display:flex;align-items:center;gap:8px;cursor:pointer;transition:background .14s ease,color .14s ease}
.menu .mbody button i{color:#007a65;font-size:1.05rem}
.menu .mbody button:hover{background:#eaf7f2;color:#006d5b}
.page{max-width:1160px;padding-top:calc(var(--topH) + env(safe-area-inset-top) + 22px)}
.panel,.wrap{max-width:1060px}.panel{background:#fff;border:1px solid #edf1f6;border-radius:20px;box-shadow:0 5px 20px rgba(27,48,89,.045);padding:24px}
.ph{margin-bottom:20px;align-items:center}.ph h1{font-size:1.85rem;letter-spacing:-.035em;color:#101b5b}.ph p{color:#68738f;font-size:.94rem;margin-top:4px}
.adm{max-width:1120px}.adm>.ph,section.panel:not(.bk):not(.sub)>.ph{background:linear-gradient(105deg,#e8f8f3,#f2fbf8);border-color:#d8f0e8;border-radius:17px;padding:15px 17px;margin-bottom:18px}
.adm>.ph h1,section.panel:not(.bk):not(.sub)>.ph h1{font-size:1.5rem}.adm>.ph h1 i{background:#d5f1e7;border-radius:13px;color:#07866f}
.btn-g,.btn-o{height:46px;border-radius:12px;padding:0 18px;font-size:.94rem;transition:transform .12s,box-shadow .12s,background .12s}
.btn-g{background:linear-gradient(135deg,#0a9478,#05745f);box-shadow:0 4px 10px rgba(7,134,111,.17)}.btn-g:hover{box-shadow:0 6px 14px rgba(7,134,111,.23);transform:translateY(-1px)}
.btn-o{border-color:#dce4ee;background:#fff;color:#4e5b7c}.btn-o:hover{background:#f7fafc;border-color:#c8d4e4}
.ctl{border-color:#e0e7f0;border-radius:11px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.015);transition:border-color .15s,box-shadow .15s}
.ctl:focus,.search input:focus{border-color:#76cbb5;box-shadow:0 0 0 3px rgba(7,134,111,.1);outline:0}
label{font-size:.91rem;color:#27345f;margin-bottom:7px}.sel>i,.rangebtn i:first-child{color:#07866f}
.drow{border-color:#e9eef5;border-radius:16px;box-shadow:0 2px 9px rgba(27,48,89,.025);margin-bottom:11px}.dmain{padding:17px 18px 17px 20px}.dd span{font-size:.91rem;color:#707b97}.dd b{font-size:1.05rem;color:#15215e}
.dm{gap:10px;border-color:#edf1f6;padding-left:14px}.mc .hd{color:#697590}.mc .mn{border-radius:10px;padding:8px 0;font-size:1.06rem}.chev{border-color:#e2eee9;background:#e7f7f1;color:#07866f;border-radius:11px}
.dtl{border-color:#edf1f6;background:#fbfcfe}.dtl table th,.rep th{color:#697590}.dtl table th,.dtl table td,.rep th,.rep td{padding:10px 11px}
.sdates{background:#f4fbf8;border-color:#dff1e9;border-radius:16px;padding:16px}.sdates h2{font-size:1.08rem;color:#17225b}
.brow{border-color:#e9eef5;border-radius:14px;padding:13px 15px;box-shadow:0 2px 7px rgba(27,48,89,.025)}.bm{border-color:#edf1f6;gap:12px}.cc{border-radius:10px}.cc button{border-radius:8px;color:#087b64}.cc button:hover{background:#fff}.del{border-radius:11px;background:#fff0f2;color:#df3655}
.mbar{gap:12px}.search input{border-color:#e0e7f0;border-radius:13px;box-shadow:none}.mt{border-color:#e6edf5;border-radius:16px;box-shadow:0 4px 16px rgba(27,48,89,.04)}.mt th{background:#e7f7f1;color:#176d5b}.mt td{border-color:#edf1f6}.bkbtn{border-radius:10px;background:#e6f7f1;color:#087b64}
.totals{gap:12px}.mc.tot{border-radius:15px;border-color:#e8eef5;box-shadow:0 3px 12px rgba(27,48,89,.035)}.rep{border-color:#e8eef5;border-radius:15px}
.mcards{gap:12px}.mcard{border-radius:16px;border-color:rgba(20,40,80,.045);box-shadow:0 3px 12px rgba(27,48,89,.035);padding:18px 12px}.mcard small{font-size:.9rem;color:#455274}.mcard b{font-size:2.05rem;letter-spacing:-.03em}.mci{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.panel.sub{background:#fff;border-color:#edf1f6;border-radius:18px;box-shadow:0 4px 16px rgba(27,48,89,.035);padding:20px}.panel.sub .ph{margin-bottom:14px}.panel.sub .ph h2{color:#14205c}
.at th{background:#f4f8fc;color:#66718f;border-color:#e7edf5}.at td{border-color:#e7edf5}.bs{border-radius:9px}.bs.ok{background:#e0f6eb;color:#087c60}.bs.pend{background:#fff4d8;color:#95630b}
.fin{border-color:#e8eef5;border-radius:16px;box-shadow:0 3px 12px rgba(27,48,89,.03)}.fin .fc{border-radius:12px}.fc.tot .fi{background:#07866f}.fc.paid .fi{background:#119b76}.fc.pend .fi{background:#efa91c}
.dlg{border-color:#e6edf5;border-radius:20px;box-shadow:0 24px 70px rgba(14,27,64,.22)}.dlg-h{border-bottom:1px solid #f0f3f7}.dlg-f{border-top:1px solid #f0f3f7}.pop{border:1px solid #e6edf5;border-radius:18px}.calh button{border-radius:10px}
.lcard{border:1px solid #e7edf5;border-radius:22px;box-shadow:0 14px 40px rgba(20,40,80,.09)}
#toast{border-radius:12px;box-shadow:0 8px 24px rgba(15,23,42,.16)}
@media(max-width:767.98px){
 :root{--topH:62px}
 .top-in{padding:0 13px;gap:10px}.brand{gap:10px}.logo{width:42px;height:42px;border-radius:12px}.bt b{font-size:1.12rem}.bt small{font-size:.78rem}
 .page{padding:calc(var(--topH) + env(safe-area-inset-top) + 13px) 12px calc(104px + env(safe-area-inset-bottom))}
 .panel{padding:16px;border-radius:17px}.ph{gap:10px;margin-bottom:15px}.ph h1{font-size:1.55rem}.ph p{font-size:.86rem}
 .bottomnav{gap:6px;padding:7px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.98);border-top:1px solid #e9eef5;box-shadow:0 -5px 18px rgba(27,48,89,.045)}
 .bottomnav a{height:62px;border-radius:12px;border-color:transparent;gap:4px;font-size:.69rem;font-weight:700;color:#687390}.bottomnav a i{font-size:1.2rem}.bottomnav a.active{border-color:#cceee2;background:#e4f8f1;color:#08775f}
 .drow{border-radius:14px}.dmain{padding:12px 7px 12px 10px}.dm{gap:5px;padding-left:7px}.mc .hd{font-size:.68rem}.mc .mi{font-size:1.1rem}.mc .mn{font-size:.91rem;padding:6px 0}.dd span{font-size:.8rem}.dd b{font-size:.88rem}
 .sdates{padding:12px 9px}.brow{border-radius:12px;padding:10px 8px}.bm{gap:4px}.ct{border-color:#e8edf4}.ct .hd{font-size:.68rem}.cc button{color:#087b64}
 .mcards{gap:9px}.mcard{border-radius:14px;padding:12px 7px}.mci{width:43px;height:43px;font-size:1.35rem}.mcard small{font-size:.82rem}.mcard b{font-size:1.65rem}
 .panel.sub{padding:13px 10px;border-radius:15px}.panel.sub .ph{padding:0;background:none;border:0}.at th,.at td{font-size:.72rem;padding:6px 2px}
 .fin{padding:9px;gap:8px}.fin .fc,.fin .fc.tot,.fin .fc.paid,.fin .fc.pend{border-radius:11px;padding:10px}.fi{width:35px;height:35px;font-size:1rem}
 .acts{gap:9px}.acts .btn-o,.acts .btn-g{min-height:44px;font-size:.86rem}.totals{gap:9px}.mc.tot{padding:12px 7px}
 .mt{border-radius:13px}.mt th,.mt td{font-size:.8rem}.dlg{border-radius:18px}
}

/* Mobile booking fixes: give the fellowship its own row so the full name is readable. */
#f-fel{ text-overflow:clip!important; padding-right:8px!important; font-size:.88rem; letter-spacing:-.01em; }
@media(max-width:767.98px){
  .fgrid>div:nth-child(1),.fgrid>div:nth-child(2){grid-column:span 20;min-width:0}
  .fgrid>div:nth-child(n+3){grid-column:span 10;min-width:0}
  #f-fel{font-size:.92rem}
}


/* Members page: separate family cards and compact 2-by-2 member grid */
.members-page{max-width:1060px}
.member-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 18px;background:#f7fbf9;border:1px solid #e1efe8;border-radius:14px;margin-bottom:16px}
.member-stat-total{display:flex;align-items:center;gap:9px}
.member-stat-total .stat-icon{color:var(--g);font-size:1.15rem;display:inline-flex;align-items:center}
.member-stat-total .stat-label{font-size:.88rem;font-weight:700;color:#65738e}
.member-stat-total .stat-val{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 8px;border-radius:8px;background:#e2f4ed;color:var(--g);font-size:.95rem;font-weight:900}
.member-stat-breakdown{display:flex;align-items:center;gap:16px}
.member-stat-breakdown .stat-sub{display:flex;align-items:center;gap:7px}
.member-stat-breakdown .stat-icon{font-size:.95rem;display:inline-flex;align-items:center}
.member-stat-breakdown .stat-icon.male{color:#2563eb}
.member-stat-breakdown .stat-icon.female{color:#e11d48}
.member-stat-breakdown .stat-label{font-size:.84rem;font-weight:700;color:#65738e}
.member-stat-breakdown .stat-val{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 7px;border-radius:7px;font-size:.88rem;font-weight:800}
.member-stat-breakdown .stat-val.male{background:#eff6ff;color:#1d4ed8;border:1px solid #dbeafe}
.member-stat-breakdown .stat-val.female{background:#fdf2f8;color:#be185d;border:1px solid #fce7f3}
.member-tools{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:12px;margin:0 0 16px;align-items:center}
.member-tools .search input{height:48px;font-size:.95rem}
.sort-control{position:relative;display:flex;align-items:center;gap:8px;height:48px;margin:0;padding:0 12px;border:1px solid var(--bd);border-radius:12px;background:#fff;color:#697590}
.sort-control>i:first-child{font-size:1.15rem;color:#697590;flex:none}
.sort-control .ctl{height:44px;border:0;box-shadow:none;padding:0 24px 0 0;background:transparent;appearance:none;font-size:.9rem;min-width:0}
.sort-control>i:last-child{position:absolute;right:12px;pointer-events:none;font-size:.8rem}
.member-groups{display:flex;flex-direction:column;gap:14px}
.family-card{overflow:hidden;background:#fff;border:1px solid #e1e9f0;border-radius:14px;box-shadow:0 2px 8px rgba(24,42,70,.04)}
.family-head{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 16px;background:rgba(0,122,101,.06);border-bottom:1px solid #e3ede8}
.family-title{display:flex;align-items:center;gap:8px;min-width:0;flex:1;color:#171b24}
.family-title b{font-size:1rem;font-weight:700;color:#171b24;overflow-wrap:anywhere}
.family-icon{display:grid;place-items:center;color:var(--g);font-size:1.25rem;flex:none;width:28px}
.family-count{color:#697590;font-size:.88rem;font-weight:500;white-space:nowrap}
.book-family{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:0 14px;border:0;border-radius:9px;background:var(--g);color:#fff;font-weight:700;font-size:.83rem;white-space:nowrap;box-shadow:0 2px 6px rgba(0,122,101,.2);transition:background .15s ease,transform .15s ease,box-shadow .15s ease}
.book-family:hover{background:var(--g2);color:#fff;box-shadow:0 4px 10px rgba(0,122,101,.3);transform:translateY(-1px)}
.book-family:active{transform:translateY(0)}
.family-collapse{display:grid;place-items:center;width:32px;height:34px;flex:none;border:0;border-radius:8px;background:transparent;color:#667085;font-size:1.05rem;transition:background .15s ease,color .15s ease}
.family-collapse:hover{background:rgba(0,122,101,.08);color:var(--g)}
.member-grid,.member-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:11px;background:#fff}
.member-card{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0;min-height:62px;padding:8px 10px;border:1px solid #e7eff2;border-radius:11px;background:#fbfdfc;box-shadow:0 1px 3px rgba(18,38,63,.03);transition:background .15s ease,border-color .15s ease,transform .15s ease}
.member-card:hover{background:#f2f8f6;border-color:#badfd5}
.member-avatar{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:50%;overflow:hidden;background:#edf3f8;border:1.5px solid #dce6ef}
.member-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.member-avatar.male,.member-avatar.female{background:#edf3f8}
.member-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.member-info b{font-size:.86rem;font-weight:700;line-height:1.2;color:#152046;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member-info small{font-size:.74rem;color:#697590;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member-book{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:32px;padding:0 10px;border:0;border-radius:8px;background:var(--g);color:#fff;font-size:.8rem;font-weight:700;white-space:nowrap;box-shadow:0 2px 5px rgba(0,122,101,.18);transition:background .15s ease,transform .15s ease,box-shadow .15s ease;flex:none}
.member-book i{font-size:.85rem}
.member-book:hover{background:var(--g2);color:#fff;box-shadow:0 3px 8px rgba(0,122,101,.28);transform:translateY(-1px)}
.member-book:active{transform:translateY(0)}
@media(max-width:991.98px){
 .member-grid,.member-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:10px}
}
@media(max-width:767.98px){
 .member-toolbar{padding:10px 14px;gap:10px;margin-bottom:12px}
 .member-stat-total{gap:7px}
 .member-stat-total .stat-label{font-size:.82rem}
 .member-stat-total .stat-val{min-width:26px;height:26px;font-size:.88rem;padding:0 6px}
 .member-stat-breakdown{gap:12px}
 .member-stat-breakdown .stat-label{font-size:.78rem}
 .member-stat-breakdown .stat-val{min-width:24px;height:24px;font-size:.82rem;padding:0 5px}
 .member-tools{grid-template-columns:minmax(0,1fr) 156px;gap:8px;margin-bottom:12px}
 .member-tools .search input{height:44px;padding-left:39px;font-size:.8rem}
 .member-tools .search i{left:12px}
 .sort-control{height:44px;padding:0 8px;gap:5px}
 .sort-control>i:first-child{font-size:1rem}
 .sort-control .ctl{height:40px;font-size:.72rem;padding-right:14px}
 .sort-control>i:last-child{right:7px;font-size:.7rem}
 .member-groups{gap:11px}
 .family-card{border-radius:12px}
 .family-head{min-height:46px;padding:7px 10px;gap:8px}
 .family-title{gap:6px}
 .family-title b{font-size:.88rem}
 .family-icon{width:22px;font-size:1.1rem}
 .family-count{font-size:.78rem}
 .book-family{min-height:32px;padding:0 10px;gap:5px;font-size:.75rem;border-radius:8px}
 .family-collapse{width:26px;height:30px}
 .member-grid,.member-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:8px}
 .member-card{grid-template-columns:32px minmax(0,1fr) 28px;gap:6px;min-height:54px;padding:6px 8px;border-radius:9px}
 .member-avatar{width:32px;height:32px;flex:0 0 32px}
 .member-info{gap:1px}
 .member-info b{font-size:.78rem}
 .member-info small{font-size:.68rem}
 .member-book{width:28px;height:28px;min-height:28px;padding:0;border-radius:7px}
 .member-book span{display:none}
 .member-book i{font-size:.8rem}
}
@media(max-width:360px){
 .member-toolbar{padding:8px 10px;gap:8px}
 .member-stat-total .stat-icon{display:none}
 .member-stat-total .stat-label{font-size:.76rem}
 .member-stat-breakdown{gap:8px}
 .member-stat-breakdown .stat-sub{gap:5px}
 .member-stat-breakdown .stat-label{font-size:.72rem}
 .member-tools{grid-template-columns:minmax(0,1fr) 130px}
 .sort-control .ctl{font-size:.67rem}
 .family-head{padding:6px 8px;gap:6px}
 .family-title b{font-size:.8rem}
 .book-family{font-size:.7rem;padding:0 8px;gap:4px}
 .member-grid,.member-list{gap:5px;padding:6px 5px}
 .member-card{grid-template-columns:28px minmax(0,1fr) 26px;gap:5px;padding:5px 6px;min-height:50px}
 .member-avatar{width:28px;height:28px;flex:0 0 28px}
 .member-info b{font-size:.73rem}
 .member-info small{font-size:.64rem}
 .member-book{width:26px;height:26px;min-height:26px}
}

/* Booking page refinement: compact three-card layout and family selection */
.booking-people-card,.sdates,.booking-actions{background:#fff;border:1px solid #e1ece8;border-radius:16px;box-shadow:0 2px 8px rgba(20,50,90,.025)}
.booking-people-card{padding:16px;margin:0 0 12px}
.sdates{padding:13px;margin:0 0 12px;background:#fff}
.sdates-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.sdates-head h2{margin:0;font-size:1rem;font-weight:800;color:var(--navy)}
.date-add{height:34px;padding:0 10px;gap:7px;font-size:.78rem;border-color:#d8e9e3;background:#fff;min-width:0}
.date-add i{color:var(--g)}
.sdates .brow{grid-template-columns:78px minmax(0,1fr);gap:8px;padding:10px 8px;margin-bottom:8px;align-items:center}
.sdates .brow:last-child{margin-bottom:0}
.sdates .bl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0}
.sdates .dd{align-items:center;text-align:center;min-width:0}
.sdates .dd span{font-size:.78rem}
.sdates .dd b{font-size:.9rem;white-space:nowrap}
.sdates .del{width:28px;height:28px;min-width:28px;border:1px solid #f0d8da;border-radius:8px;background:#fffafa;color:#b87980;font-size:.85rem;display:grid;place-items:center;padding:0}
.sdates .bm{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding-left:8px;min-width:0}
.sdates .ct{min-width:0;gap:4px;padding:0 2px}
.sdates .ct .hd{gap:2px;font-size:.68rem}
.sdates .ct .mi{font-size:1.2rem}
.sdates .ct .ml{font-size:.68rem;white-space:nowrap}
.sdates .cc{min-width:0;width:100%;padding:1px;border-radius:8px;background:color-mix(in srgb,var(--bg) 42%, white)}
.sdates .cc button{width:20px;height:29px;flex:0 0 20px;font-size:1rem;padding:0}
.sdates .cc output{min-width:14px;font-size:.86rem}
.booking-actions{display:flex;justify-content:stretch;gap:10px;margin:0;padding:10px}
.booking-actions .btn-o,.booking-actions .btn-g{min-width:0;flex:1;height:46px;padding:0 10px}
.booking-actions .btn-o{color:#b87980;border-color:#dfbfc2;background:#fff}
.booking-actions .btn-o i{color:#b87980}
.booking-actions .btn-g{box-shadow:0 4px 10px rgba(0,122,101,.16)}
@media(max-width:767.98px){
  .panel.bk{padding:0;background:transparent;border:0;box-shadow:none}
  .panel.bk>.ph{margin:0 2px 12px}
  .panel.bk>.ph .back{padding:0 4px}
  .booking-people-card{padding:12px;margin-bottom:10px}
  .sdates{padding:10px 7px;margin-bottom:10px}
  .sdates-head{padding:0 2px;margin-bottom:8px}
  .sdates-head h2{font-size:.92rem}
  .date-add{height:32px;padding:0 8px;font-size:.74rem}
  .sdates .brow{grid-template-columns:65px minmax(0,1fr);gap:5px;padding:9px 5px;margin-bottom:7px}
  .sdates .bl{gap:4px}
  .sdates .dd span{font-size:.72rem}
  .sdates .dd b{font-size:.78rem}
  .sdates .del{width:26px;height:26px;min-width:26px}
  .sdates .bm{gap:2px;padding-left:5px}
  .sdates .ct{padding:0 1px;border-left:0}
  .sdates .ct .hd{font-size:.62rem}
  .sdates .ct .mi{font-size:1.12rem;height:auto}
  .sdates .ct .ml{font-size:.61rem}
  .sdates .cc button{width:17px;height:27px;flex-basis:17px;font-size:.9rem}
  .sdates .cc output{min-width:12px;font-size:.8rem}
  .booking-actions{padding:8px;gap:8px}
  .booking-actions .btn-o,.booking-actions .btn-g{height:44px;font-size:.86rem}
}
@media(max-width:360px){
  .sdates .brow{grid-template-columns:58px minmax(0,1fr)}
  .sdates .ct .ml{font-size:.57rem}
  .sdates .cc button{width:15px;flex-basis:15px}
}

/* Dashboard mobile spacing: reclaim unused space after the day/date column. */
@media(max-width:767.98px){
  .dmain{grid-template-columns:76px minmax(0,1fr) 18px;padding:12px 4px 12px 10px;column-gap:0}
  .dd{min-width:0}
  .dd span{font-size:.84rem;line-height:1.15}
  .dd b{font-size:.84rem;white-space:nowrap;letter-spacing:-.025em}
  .dm{min-width:0;gap:4px;padding-left:6px}
  .dm .mc{min-width:0}
  .dm .mc .hd{font-size:.68rem;white-space:nowrap}
  .dm .mc .mn{padding:6px 0;font-size:.92rem}
  .chev{width:18px;justify-self:end}
}

/* ===== UXPeak Chairs module ===== */
.chair-page{max-width:1050px;margin:0 auto;padding:18px;background:#fff;border:1px solid #e5eee9;border-radius:20px;box-shadow:0 4px 18px rgba(24,55,48,.035)}
.chair-page>.ph{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.chair-page .ph h1{margin:0;color:var(--navy);font-weight:900;letter-spacing:-.035em}
.chair-page .muted,.chair-page small{color:#69758a}
.chair-event-pill{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:10px 13px;border:1px solid #dce9e4;border-radius:12px;background:#fbfefd;color:#174e46;font-weight:700;font-size:.88rem}
.chair-subhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border-radius:14px;background:#eef8f4;border:1px solid #e0f0e9;margin-bottom:12px}
.chair-subhead>div{min-width:0;display:flex;flex-direction:column;gap:5px}.chair-subhead b{color:#123e38;font-size:1.02rem}.chair-subhead small{font-size:.8rem}
.chair-edit-disabled{display:flex;align-items:center;gap:7px;border:0;border-radius:10px;background:#e3e6e9;color:#858c94;padding:10px 15px;font-weight:700;white-space:nowrap;cursor:not-allowed}
.chair-notice,.chair-edit-banner{padding:12px 14px;border-radius:12px;background:#fff8e8;border:1px solid #f3e7c7;color:#806126;font-size:.9rem;line-height:1.45;margin-bottom:14px}
.chair-edit-banner{background:#eff8f4;border-color:#dceee6;color:#356b5e}
.chair-table-wrap{overflow:auto;border:1px solid #e6efeb;border-radius:12px;margin:12px 0}
.chair-table{width:100%;border-collapse:separate;border-spacing:0;min-width:420px;color:#17224f;font-size:.9rem}
.chair-table th{background:#eaf6f1;color:#14574d;font-weight:800;text-align:left;padding:11px 12px;white-space:nowrap}
.chair-table td{padding:10px 12px;border-top:1px solid #e9efed;background:#fff}
.chair-table th:not(:first-child),.chair-table td:not(:first-child){text-align:center}
.chair-table td b{display:inline-block;min-width:42px;border-radius:8px;padding:5px 8px;background:#eaf6f1;color:#12584d;font-size:1rem}
.chair-table tfoot th{background:#e4f3ed;color:#12584d}
.chair-grand{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:12px 4px;border-radius:13px;background:#eaf6f2;border:1px solid #dceee7;margin:12px 0}
.chair-grand>div{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;padding:0 5px}.chair-grand>div+div{border-left:1px solid #d1e4dd}
.chair-grand small{font-size:.78rem;font-weight:700;color:#66758a}.chair-grand b{font-size:1.65rem;line-height:1.1;color:#12695b;font-weight:900}
.chair-event-details{border:1px solid #e1eee8;border-radius:13px;padding:14px;margin-top:14px;background:#fbfefd}.chair-event-details h2{font-size:1.1rem;color:#164a42;font-weight:900;margin:0 0 12px}.chair-event-details dl{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;margin:0;font-size:.88rem}.chair-event-details dt{color:#748097;font-weight:500}.chair-event-details dd{margin:0;color:#15224f;font-weight:700}.chair-status{display:inline-flex;align-items:center;border-radius:20px;padding:5px 10px;background:#e2f4e9;color:#23724e;font-size:.75rem;font-weight:800;white-space:nowrap}.chair-status.pending{background:#fff4df;color:#91651a}
.chair-count-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid #e8efec}.chair-count-row:last-child{border-bottom:0}.chair-cat-title{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:-4px;padding:10px 12px;border-radius:10px;background:#eaf6f1;color:#174f46;font-weight:900;font-size:1.02rem}.chair-cat-title strong{font-size:1.35rem;color:#12695b;font-weight:900}.chair-mf{min-width:0}.chair-mf>label{display:block;margin:0 0 5px;color:#6b7690;font-size:.78rem;font-weight:700}.chair-step{display:grid;grid-template-columns:32px minmax(0,1fr) 32px;gap:5px;align-items:center}.chair-step button{height:38px;border:0;border-radius:9px;background:#dff2eb;color:#13836f;font-size:1.2rem;font-weight:900}.chair-step button:last-child{background:#138875;color:white}.chair-step button:disabled{opacity:.45}.chair-step .ctl{height:38px;min-width:0;text-align:center;padding:0 5px;border-color:#dce7e3;background:#fff;color:#15224f}
.chair-admin-top{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.chair-admin-top>div{display:flex;flex-direction:column;gap:3px;padding:14px;border:1px solid #dfeee7;border-radius:13px;background:#eff8f4}.chair-admin-top small{font-size:.78rem;color:#6b788b}.chair-admin-top b{font-size:1.8rem;line-height:1.1;color:#12695b;font-weight:900}.chair-admin-top span{font-size:.78rem;color:#65758a}
.chair-admin-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.chair-admin-cat{border:1px solid #e0eee8;border-radius:12px;overflow:hidden;background:#fff}.chair-admin-cathead{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 12px;background:#eaf6f1;color:#164e45}.chair-admin-cathead b{font-size:.92rem;font-weight:900}.chair-admin-cathead strong{font-size:1.35rem;color:#12695b;font-weight:900}.chair-admin-mf{display:flex;gap:12px;justify-content:space-between;padding:10px 12px;color:#6c778b;font-size:.78rem}.chair-admin-mf span{display:flex;gap:5px;align-items:center}.chair-admin-mf b{color:#193d38;font-size:.94rem}
.chair-zone-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:18px 0 10px}.chair-zone-title h2{margin:0;color:var(--navy);font-size:1.1rem;font-weight:900}.chair-zone-title .ctl{width:auto;height:36px;font-size:.78rem;display:flex;align-items:center;gap:7px}.chair-zone-search{margin-bottom:10px;height:40px}.chair-zones{display:grid;gap:9px}.chair-zone{border:1px solid #e3eee9;border-radius:12px;overflow:hidden;background:#fff}.chair-zone-head{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:12px;border:0;background:#fff;color:#163d38}.chair-zone-head>span:first-child{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}.chair-zone-head b{font-weight:900}.chair-zone-head small{font-size:.75rem;color:#718093}.chair-zone-progress{width:94px;display:flex;flex-direction:column;gap:3px}.chair-zone-progress>b{font-size:.8rem;text-align:right}.chair-progress{height:5px;border-radius:8px;background:#edf2ef;overflow:hidden}.chair-progress i{display:block;height:100%;border-radius:8px;background:#138875}.chair-zone-head>i{color:#168875;font-size:1rem}.chair-fellowships{padding:0 10px 8px;border-top:1px solid #edf2ef}.chair-fellow-row{display:flex;align-items:center;gap:8px;padding:10px 2px;border-bottom:1px solid #eef2f0}.chair-fellow-row:last-of-type{border-bottom:0}.chair-fellow-info{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.chair-fellow-info b{font-size:.86rem;color:#18234d}.chair-fellow-info small{font-size:.72rem;color:#7b8596}.chair-fellow-right{display:flex;align-items:center;gap:7px}.chair-fellow-total{color:#12695b;font-size:.9rem}.chair-row-arrow{width:30px;height:30px;border:0;border-radius:8px;background:#edf7f3;color:#168875;display:grid;place-items:center}.chair-more{margin:8px 2px 2px;color:#748093;font-size:.75rem}
.chair-searchbar{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:8px;margin-bottom:12px}.chair-searchbar .ctl{height:42px}.chair-event-total{display:flex;align-items:center;gap:9px;padding:12px;border-radius:12px;background:#eaf6f1;margin-bottom:12px}.chair-event-total>div{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.chair-event-total b{color:#153f39}.chair-event-total small{font-size:.76rem}.chair-event-total strong{font-size:1.45rem;color:#12695b}.chair-event-total>span{font-size:.78rem;color:#68758a}.event-sub-table{min-width:660px;font-size:.78rem}.event-sub-table td:first-child{min-width:140px}.event-sub-table td:first-child small{display:block;margin-top:3px;font-size:.68rem}.chair-edit-admin{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:8px;align-items:center;padding:12px;border:1px solid #e2eee8;background:#f8fcfa;border-radius:12px;margin-top:12px}.chair-edit-admin label{grid-column:1/-1;margin:0;font-weight:800;color:#244d45}.chair-edit-admin .btn-g{grid-column:1/-1;min-height:42px}.chair-edit-admin small{grid-column:1/-1;font-size:.76rem}.chair-edit-until{color:#16755e!important;font-weight:700}
.chair-sheet.ov{align-items:flex-end;justify-content:center;padding:0 8px calc(86px + env(safe-area-inset-bottom));background:rgba(17,28,32,.42)}.chair-sheet .dlg{border-radius:22px 22px 18px 18px;max-height:min(78vh,780px);max-width:700px;width:100%;box-shadow:0 14px 40px rgba(20,50,45,.18);border-color:#e0eee8}.chair-sheet .dlg-h{padding:14px 16px 10px;align-items:flex-start}.chair-sheet .dlg-h h2{font-size:1.25rem;color:#164e45;font-weight:900}.chair-sheet .dlg-h p{margin:4px 0 0;color:#6e788b;font-size:.84rem}.chair-sheet .dlg-b{padding:8px 14px 12px}.chair-sheet .dlg-f{padding:12px 14px 14px;gap:9px}.chair-sheet .dlg-f button{min-height:46px}.chair-confirm-event{padding:12px;border-radius:10px;background:#eaf6f1;color:#174e45;font-weight:900;margin-bottom:8px}.chair-confirm-dlg .chair-table{font-size:.78rem;min-width:0}.chair-confirm-dlg .chair-table th,.chair-confirm-dlg .chair-table td{padding:8px 7px}.chair-confirm-dlg .chair-grand b{font-size:1.45rem}.chair-confirm-dlg .chair-grand{margin:10px 0 0}.chair-confirm-dlg .btn-o{color:#c86a70;border-color:#e5bfc2;background:#fffafa}.chair-confirm-dlg .btn-g{background:linear-gradient(180deg,#078a75,#087563)}
@media(max-width:767.98px){.chair-page{padding:14px 12px;border-radius:17px}.chair-page>.ph h1{font-size:1.55rem}.chair-event-pill{font-size:.76rem;padding:9px}.chair-count-row{gap:8px;padding:10px 0}.chair-cat-title{font-size:.94rem;padding:9px 10px}.chair-cat-title strong{font-size:1.2rem}.chair-step{grid-template-columns:28px minmax(0,1fr) 28px;gap:4px}.chair-step button{height:35px}.chair-step .ctl{height:35px;font-size:.9rem}.chair-admin-top b{font-size:1.55rem}.chair-admin-cats{gap:7px}.chair-admin-cathead{padding:9px}.chair-admin-cathead b{font-size:.8rem}.chair-admin-cathead strong{font-size:1.2rem}.chair-admin-mf{padding:8px;gap:7px;font-size:.7rem}.chair-admin-mf b{font-size:.85rem}.chair-zone-title{align-items:flex-start}.chair-zone-title h2{font-size:1rem}.chair-zone-title .ctl{font-size:.7rem;padding:0 8px}.chair-searchbar{grid-template-columns:minmax(0,1fr) 112px}.chair-grand b{font-size:1.45rem}.chair-event-details dl{grid-template-columns:90px minmax(0,1fr)}.chair-sheet.ov{padding:0 0 calc(80px + env(safe-area-inset-bottom))}.chair-sheet .dlg{border-radius:22px 22px 0 0;max-height:calc(82vh - 30px);max-width:none}.chair-sheet .dlg-h{padding:12px 14px 8px}.chair-sheet .dlg-h h2{font-size:1.08rem}.chair-sheet .dlg-b{padding:6px 10px 10px}.chair-confirm-dlg .chair-table{font-size:.69rem}.chair-confirm-dlg .chair-table th,.chair-confirm-dlg .chair-table td{padding:7px 5px}.chair-confirm-dlg .chair-table td b{min-width:28px;padding:4px}.chair-confirm-dlg .chair-grand small{font-size:.68rem}.chair-confirm-dlg .chair-grand b{font-size:1.25rem}.chair-sheet .dlg-f{padding:10px 10px 12px}.chair-sheet .dlg-f button{font-size:.86rem}.chair-subhead{padding:11px}.chair-subhead b{font-size:.9rem}.chair-notice{font-size:.82rem}.chair-table{font-size:.8rem}}
.chair-admin-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.chair-admin-head-actions>.ctl{width:auto;height:38px;font-size:.78rem;font-weight:800;color:#17675a;border-color:#d8e9e2;background:#fff}.chair-manage-status{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:12px;border-radius:12px;background:#eff8f4;border:1px solid #dceee6}.chair-manage-status>b{flex:1;color:#174e45}.chair-manage-status .btn-o{padding:8px 10px;font-size:.78rem;color:#a95e64;border-color:#e5c8ca;background:#fff}.chair-manage-status small{flex:0 0 100%;font-size:.76rem;color:#6e7b8c}.chair-manage-subtitle{font-size:1rem;font-weight:900;color:#174e45;margin:18px 0 4px}.chair-manage-help{font-size:.8rem;color:#6e7b8c;margin:0 0 10px}.chair-category-setting{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 2px;border:0;border-bottom:1px solid #e8efec;background:#fff;text-align:left;color:#17234c;font-weight:700}.chair-category-setting:last-child{border-bottom:0}.chair-switch{min-width:54px;text-align:center;border-radius:30px;padding:5px 8px;font-size:.72rem;font-weight:900}.chair-switch.on{background:#e2f4e9;color:#23724e}.chair-switch.off{background:#f0f1f2;color:#7b8289}
@media(max-width:767.98px){.chair-admin-head-actions{width:100%;justify-content:space-between}.chair-admin-head-actions .chair-event-pill{flex:1;min-width:0}.chair-admin-head-actions>.ctl{flex:none}.chair-manage-status{gap:7px}}

/* Native hidden states used by the separated HTML page shells. */
[hidden] { display: none !important; }

/* Approved mobile refinements: keep confirmation sheets above the fixed navbar. */
@media (max-width: 767.98px) {
  .ov.sheet {
    z-index: 29;
    align-items: flex-end;
    justify-content: center;
    padding: 0 8px calc(80px + env(safe-area-inset-bottom));
  }
  .ov.sheet .dlg {
    width: 100%;
    max-height: calc(88vh - 80px);
    border-radius: 18px 18px 0 0;
  }
  .chair-sheet.ov { z-index: 29; }
}

@media (min-width: 768px) and (max-width: 900px) {
  .top-in { gap: 10px; padding-left: 12px; padding-right: 12px; }
  .brand { min-width: 160px; gap: 8px; }
  .topnav { gap: 2px; }
  .topnav a { gap: 6px; padding: 9px 8px; font-size: .84rem; }
  .acbtn { gap: 6px; }
  .av { width: 40px; height: 40px; }
}

@media (min-width: 361px) and (max-width: 600px) {
  .cc button { width: 28px; height: 34px; }
  .cc output { min-width: 20px; }
}

@media (max-width: 360px) {
  .bm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-left: 0; padding-left: 0; }
  .ct { border: 1px solid #e8edf4; border-radius: 10px; padding: 6px 4px; }
  .ct .hd { flex-direction: row; justify-content: center; gap: 5px; font-size: .72rem; }
  .ct .mi { height: auto; }
  .cc { width: 100%; min-width: 0; max-width: 130px; }
  .cc button { width: 32px; height: 32px; flex-shrink: 0; }
  .cc output { min-width: 22px; }
  .del { width: 44px; height: 44px; }
}
@media (max-width: 767.98px) {
  .chair-sheet.ov .dlg { max-height: calc(82vh - 80px); }
}

/* Keep the fixed header's visual box aligned with the iOS safe-area inset. */
.top { height: calc(var(--topH) + env(safe-area-inset-top)); }

/* ==========================================================================
   Error Page Component - Open Immersive Canvas (Seamless Background)
   ========================================================================== */
.er-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(72vh - var(--topH, 64px));
	padding: 40px 16px;
	text-align: center;
	background: transparent;
}

/* Atmospheric Ambient Glow Orb (Feathered Radial Gradient without GPU blur clipping) */
.er-glow-aura {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 560px;
	height: 560px;
	max-width: 92vw;
	max-height: 92vw;
	border-radius: 50%;
	background: radial-gradient(circle at center, rgba(7, 134, 111, 0.15) 0%, rgba(7, 134, 111, 0.07) 35%, rgba(32, 200, 166, 0.02) 60%, transparent 75%);
	pointer-events: none;
	z-index: 0;
}

/* Grand atmospheric 404 watermark floating seamlessly in background */
.er-watermark {
	position: absolute;
	top: 48%;
	left: 50%;
	transform: translate(-50%, -56%);
	font-size: clamp(9rem, 22vw, 17rem);
	font-weight: 900;
	color: rgba(7, 134, 111, 0.042);
	line-height: 1;
	letter-spacing: -0.06em;
	user-select: none;
	pointer-events: none;
	z-index: 1;
	font-family: inherit;
}

/* Open Content Layer */
.er-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 580px;
	width: 100%;
}

/* Floating Elevated Emblem Badge - Seamless Circular Contour */
.er-badge {
	width: 86px;
	height: 86px;
	border-radius: 50%;
	background: linear-gradient(145deg, #ffffff 0%, #e6f7f1 100%);
	border: 1px solid rgba(7, 134, 111, 0.22);
	color: #07866f;
	display: grid;
	place-items: center;
	font-size: 2.6rem;
	margin: 0 auto 20px;
	box-shadow: 0 12px 32px rgba(7, 134, 111, 0.16),
	            0 2px 6px rgba(12, 20, 81, 0.04);
	transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
	            box-shadow 0.28s ease;
}

.er-content:hover .er-badge {
	transform: translateY(-4px) scale(1.05);
	box-shadow: 0 18px 40px rgba(7, 134, 111, 0.22),
	            0 4px 10px rgba(12, 20, 81, 0.05);
}

/* Status Pill with Breathing Glow */
.er-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(10px);
	border: 1px solid #c2e8db;
	color: #06725e;
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 16px;
	box-shadow: 0 4px 14px rgba(7, 134, 111, 0.08);
}

.er-pulse-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #07866f;
	box-shadow: 0 0 10px rgba(7, 134, 111, 0.6);
	animation: erSoftGlow 2.4s ease-in-out infinite;
}

@keyframes erSoftGlow {
	0%, 100% { opacity: 0.75; transform: scale(0.95); box-shadow: 0 0 6px rgba(7, 134, 111, 0.4); }
	50% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 14px rgba(7, 134, 111, 0.75); }
}

.er-code-chip {
	background: #ffffff;
	color: var(--navy, #0c1451);
	padding: 1px 7px;
	border-radius: 8px;
	font-weight: 900;
	font-size: 0.72rem;
	border: 1px solid #bce3d4;
}

/* Typography */
.er-title {
	font-size: clamp(2rem, 4.5vw, 2.45rem);
	font-weight: 900;
	color: var(--navy, #0c1451);
	letter-spacing: -0.035em;
	line-height: 1.18;
	margin: 0 0 14px;
}

.er-desc {
	font-size: 1.02rem;
	color: var(--mut, #5a6896);
	line-height: 1.65;
	margin: 0 0 24px;
	max-width: 490px;
}

/* Frosted Guidance Strip - Seamless Ambient Integration */
.er-hint {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	background: rgba(232, 247, 241, 0.55);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(7, 134, 111, 0.16);
	border-radius: 14px;
	font-size: 0.88rem;
	color: #3b506b;
	line-height: 1.5;
	text-align: left;
	margin-bottom: 32px;
	width: 100%;
	max-width: 480px;
	box-shadow: none;
}

.er-hint i {
	color: #07866f;
	font-size: 1.15rem;
	flex-shrink: 0;
}

/* Actions */
.er-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
	flex-wrap: wrap;
}

.er-btn {
	min-width: 165px;
	height: 50px;
	padding: 0 26px;
	border-radius: 14px;
	font-weight: 800;
	font-size: 0.98rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.er-btn.btn-o {
	background: #ffffff;
	color: var(--navy, #0c1451);
	border: 1px solid #c4d2e4;
	box-shadow: 0 2px 8px rgba(12, 20, 81, 0.04);
}

.er-btn.btn-o:hover {
	border-color: #7b94ba;
	background: #f8fafc;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(12, 20, 81, 0.08);
}

.er-btn.btn-o i {
	transition: transform 0.2s ease;
}

.er-btn.btn-o:hover i {
	transform: translateX(-4px);
}

.er-btn.btn-g {
	background: linear-gradient(135deg, #07866f 0%, #056a57 100%);
	color: #ffffff;
	border: 1px solid transparent;
	box-shadow: 0 6px 20px rgba(7, 134, 111, 0.25);
}

.er-btn.btn-g:hover {
	box-shadow: 0 14px 32px rgba(7, 134, 111, 0.38);
	transform: translateY(-2px);
	color: #ffffff;
}

.er-btn.btn-g i {
	transition: transform 0.2s ease;
}

.er-btn.btn-g:hover i {
	transform: scale(1.15);
}

/* Mobile responsive adjustments */
@media (max-width: 575.98px) {
	.er-wrap {
		padding: 26px 12px;
		min-height: auto;
	}
	.er-watermark {
		font-size: 6.5rem;
	}
	.er-title {
		font-size: 1.55rem;
	}
	.er-desc {
		font-size: 0.92rem;
		margin-bottom: 18px;
	}
	.er-hint {
		font-size: 0.82rem;
		padding: 10px 14px;
		margin-bottom: 24px;
	}
	.er-actions {
		flex-direction: column;
		gap: 12px;
	}
	.er-btn {
		width: 100%;
	}
}


/* ==========================================================================
   Food Coupon Count - Two-Card Theme Layout
   ========================================================================== */

/* Theme-friendly Custom Scrollbars (Global & Containers) */
* {
    scrollbar-width: thin;
    scrollbar-color: #88cbb5 #edf6f2;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #edf6f2;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background: #88cbb5;
    border-radius: 8px;
    border: 1px solid transparent;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--g, #007a65);
}

::-webkit-scrollbar-thumb:active {
    background: var(--g2, #006b5a);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Main Container */
.fc-page-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: calc(var(--topH, 64px) + 18px) 16px 48px;
}

/* Sticky Page Header Bar (Sleek with Generous Spacing) */
.fc-page-head {
    position: sticky !important;
    top: calc(var(--topH, 64px) + 10px) !important;
    z-index: 500 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 12px 20px !important;
    margin-bottom: 22px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid #dce8e2 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(12, 20, 81, 0.05) !important;
    transition: all 0.2s ease !important;
}

.fc-head-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
}

.fc-back-btn {
    display: inline-grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    border: 1px solid #dce8e2 !important;
    background: #ffffff !important;
    color: var(--g, #007a65) !important;
    font-size: 1.1rem !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 4px rgba(0, 122, 101, 0.06) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

.fc-back-btn:hover {
    background: var(--mint, #e8f7f1) !important;
    color: var(--g2, #006b5a) !important;
    transform: translateX(-1px) !important;
}

.fc-member-head-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
}

.fc-page-title {
    margin: 0 !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: var(--navy, #0c1451) !important;
    letter-spacing: -0.015em !important;
    line-height: 1.2 !important;
}

.fc-member-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.fc-page-sub {
    margin: 3px 0 0 !important;
    color: var(--g, #007a65) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: 0.03em !important;
}

/* Right-end Header Stat Pills */
.fc-head-stats {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

.fc-stat-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 6px 14px !important;
    background: #f7fbf9 !important;
    border: 1px solid #d8e9e1 !important;
    border-radius: 10px !important;
    color: var(--navy, #0c1451) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    transition: all 0.15s ease !important;
}

.fc-stat-pill:hover {
    background: #edf7f3 !important;
    border-color: #c2e2d5 !important;
}

.fc-stat-pill i {
    font-size: 0.95rem !important;
    color: var(--g, #007a65) !important;
}

.fc-stat-pill b {
    color: var(--navy, #0c1451) !important;
    font-weight: 900 !important;
}

/* Mobile Responsive Tuning for Sticky Header & Page */
@media (max-width: 767.98px) {
    .fc-page-container {
        padding-top: calc(var(--topH, 62px) + env(safe-area-inset-top, 0px) + 8px) !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .fc-page-head {
        top: calc(var(--topH, 62px) + env(safe-area-inset-top, 0px) + 6px) !important;
        padding: 9px 14px !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        box-shadow: 0 3px 12px rgba(12, 20, 81, 0.05) !important;
    }

    .fc-head-left {
        gap: 10px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .fc-back-btn {
        width: 34px !important;
        height: 34px !important;
        border-radius: 8px !important;
        font-size: 1rem !important;
    }

    .fc-member-head-info {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .fc-page-title {
        font-size: 0.96rem !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
    }

    .fc-member-name {
        max-width: 140px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .fc-page-sub {
        font-size: 0.68rem !important;
        color: var(--g, #007a65) !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        margin-top: 1px !important;
    }

    .fc-head-stats {
        gap: 4px !important;
        flex-shrink: 0 !important;
    }

    .fc-stat-pill {
        padding: 3px 7px !important;
        border-radius: 6px !important;
        font-size: 0.72rem !important;
        gap: 3px !important;
        background: #f4faf7 !important;
        border: 1px solid #d5ece0 !important;
    }

    .fc-stat-pill i {
        font-size: 0.78rem !important;
    }

    .fc-stat-pill b {
        font-size: 0.76rem !important;
    }

    .fc-stat-pill span {
        display: none !important;
    }

    /* Cards Mobile Font & Spacing */
    .fc-booking-grid {
        gap: 14px !important;
    }

    .fc-card {
        border-radius: 14px !important;
    }

    .fc-card-body {
        padding: 12px 11px !important;
    }
}

@media (max-width: 360px) {
    .fc-back-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.95rem !important;
    }

    .fc-page-title {
        font-size: 0.9rem !important;
    }

    .fc-member-name {
        max-width: 95px !important;
    }

    .fc-page-sub {
        max-width: 110px !important;
        font-size: 0.66rem !important;
    }

    .fc-stat-pill {
        padding: 4px 6px !important;
        gap: 3px !important;
    }

    .fc-stat-pill i {
        font-size: 0.76rem !important;
    }

    .fc-stat-pill b {
        font-size: 0.76rem !important;
    }
}

/* Two-Card Grid Layout */
.fc-booking-grid {
    display: grid;
    grid-template-columns: minmax(350px, 430px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

@media (max-width: 991.98px) {
    .fc-booking-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* Individual Cards */
.fc-card {
    background: #ffffff;
    border: 1px solid #dce8e2;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(12, 20, 81, 0.035);
    overflow: visible;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fc-card.fc-card-attendees {
    position: relative;
    z-index: 20;
    overflow: visible !important;
}

.fc-card:hover {
    border-color: #c4ded5;
    box-shadow: 0 6px 22px rgba(12, 20, 81, 0.055);
}

/* Card Body */
.fc-card-body {
    padding: 20px;
}

/* Neutralize legacy styles inside the new cards */
.fc-card .booking-people-card,
.fc-card .sdates {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Date Selection Input (Left Card Multi-Select) */
.fc-dates-picker-block {
    margin-bottom: 14px;
}

.fc-date-input-field {
    position: relative;
    display: flex;
    align-items: center;
}

.fc-date-input-field > i {
    position: absolute;
    left: 12px;
    font-size: 0.95rem;
    color: #687999;
    pointer-events: none;
    z-index: 2;
}

.fc-date-multi-input {
    padding-left: 36px !important;
    padding-right: 110px !important;
    background: #ffffff !important;
    border: 1px solid #dce8e2 !important;
    border-radius: 12px !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    color: var(--navy, #0c1451) !important;
    height: 44px !important;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(12, 20, 81, 0.03);
    transition: all 0.15s ease;
}

.fc-date-multi-input:hover,
.fc-date-multi-input:focus {
    border-color: var(--g, #007a65) !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 101, 0.12) !important;
}

.fc-date-add-btn {
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;
    height: auto !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 12px !important;
    background: linear-gradient(180deg, var(--g, #007a65), var(--g2, #006b5a)) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 9px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0, 122, 101, 0.22) !important;
    transition: all 0.15s ease !important;
    z-index: 3;
}

.fc-date-add-btn:hover {
    box-shadow: 0 4px 10px rgba(0, 122, 101, 0.32) !important;
    transform: translateY(-0.5px);
}

.fc-multi-date-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.fc-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    background: #edf8f4;
    border: 1px solid #cce8dd;
    color: #075a4b;
    font-size: 0.78rem;
    font-weight: 700;
    transition: all 0.15s ease;
}

.fc-date-chip i {
    color: var(--g, #007a65);
    font-size: 0.82rem;
}

.fc-chip-remove {
    background: none;
    border: 0;
    padding: 0;
    margin-left: 2px;
    color: #075a4b;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.fc-chip-remove:hover {
    opacity: 1;
    color: #b91c1c;
    transform: scale(1.15);
}
/* Section of Cards: Standalone Date Cards (Outside Container Card) */
.fc-meals-flow {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fc-date-row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    background: #ffffff !important;
    border: 1px solid #dce8e2 !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 14px rgba(12, 20, 81, 0.04) !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.fc-date-row:last-child {
    margin-bottom: 0 !important;
}

.fc-date-row:hover {
    background: #ffffff !important;
    border-color: #b8e2d4 !important;
    box-shadow: 0 6px 20px rgba(0, 122, 101, 0.08) !important;
    transform: translateY(-1px);
}

.fc-date-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.fc-date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 72px;
    padding: 8px 6px;
    background: linear-gradient(135deg, #e8f7f1, #f2fbf8);
    border: 1px solid #cbe6dc;
    border-radius: 12px;
}

.fc-date-badge .fc-day {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--g, #007a65);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fc-date-badge .fc-date-num {
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--navy, #0c1451);
    white-space: nowrap;
}

.fc-del-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #f3d4d7;
    border-radius: 8px;
    background: #fff5f6;
    color: #e11d48;
    font-size: 0.88rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.fc-del-btn:hover {
    background: #ffe3e6;
    border-color: #e11d48;
}

.fc-meals-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    border-left: 1px solid #e3eee9;
    padding-left: 14px;
}

/* =======================================================
   Meal Toggle Tiles — modern toggle tile with check badge
   ======================================================= */

.fc-meal-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px 8px 11px;
    min-height: 74px;
    background: color-mix(in srgb, var(--fg) 13%, #ffffff);
    border: 1.75px solid color-mix(in srgb, var(--fg) 36%, transparent);
    border-radius: 14px;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.16s ease, background 0.16s ease, border-color 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    box-shadow: 0 2px 7px color-mix(in srgb, var(--fg) 10%, transparent);
}

/* Hidden native checkbox */
.fc-meal-cell input[type="checkbox"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Checkmark badge top-right (Active / Checked) */
.fc-meal-cell::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--fg);
    border: 2px solid #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23ffffff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2.5 7 5.5 10 11.5 4'/%3E%3C/svg%3E");
    background-size: 75% 75%;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 1px 4px rgba(0,0,0,0.24);
    opacity: 1;
    transform: scale(1);
    transition: all 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Unchecked / Disabled state — highly noticeable */
.fc-meal-cell:has(input:not(:checked)),
.fc-meal-cell.is-unchecked {
    background: #edf1f4 !important;
    border: 1.75px dashed #cbd5e1 !important;
    opacity: 0.8 !important;
    box-shadow: none !important;
}

/* Unchecked empty circle badge indicator */
.fc-meal-cell:has(input:not(:checked))::after,
.fc-meal-cell.is-unchecked::after {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 2px solid #94a3b8 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    opacity: 0.85 !important;
    transform: scale(0.85) !important;
}

.fc-meal-cell:has(input:not(:checked)) .fc-mi,
.fc-meal-cell.is-unchecked .fc-mi {
    filter: grayscale(100%) !important;
    opacity: 0.45 !important;
    color: #64748b !important;
}

.fc-meal-cell:has(input:not(:checked)) .fc-ml,
.fc-meal-cell.is-unchecked .fc-ml {
    color: #64748b !important;
    opacity: 0.75 !important;
}

/* Hover on unchecked */
.fc-meal-cell:has(input:not(:checked)):hover,
.fc-meal-cell.is-unchecked:hover {
    opacity: 0.82 !important;
    background: color-mix(in srgb, var(--fg) 8%, #ffffff) !important;
    border: 1.75px solid color-mix(in srgb, var(--fg) 45%, #cbd5e1) !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 9px rgba(0,0,0,0.06) !important;
}

.fc-meal-cell:has(input:not(:checked)):hover::after,
.fc-meal-cell.is-unchecked:hover::after {
    border-color: var(--fg) !important;
    background-color: color-mix(in srgb, var(--fg) 12%, #ffffff) !important;
}

/* Hover on checked */
.fc-meal-cell:has(input:checked):hover,
.fc-meal-cell.is-checked:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 5px 16px color-mix(in srgb, var(--fg) 28%, transparent);
}

.fc-meal-cell:active {
    transform: scale(0.96) !important;
}

/* Meal icon */
.fc-mi {
    color: var(--fg);
    font-size: 1.55rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.16s ease, opacity 0.16s ease, color 0.16s ease;
}

.fc-mi svg {
    width: 1em;
    height: 1em;
}

/* Meal name */
.fc-ml {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--fg);
    white-space: nowrap;
    letter-spacing: 0.02em;
    line-height: 1;
    transition: color 0.16s ease, opacity 0.16s ease;
}

@media (max-width: 600px) {
    .fc-date-row {
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 8px;
        padding: 10px 8px;
    }
    .fc-meals-grid {
        gap: 5px;
        padding-left: 8px;
    }
    .fc-meal-cell {
        padding: 9px 4px 7px;
        min-height: 60px;
        border-radius: 10px;
        gap: 4px;
    }
    .fc-mi {
        font-size: 1.25rem;
    }
    .fc-ml {
        font-size: 0.62rem;
    }
    .fc-meal-cell::after {
        width: 12px;
        height: 12px;
        top: 3px;
        right: 3px;
    }
}

/* Sticky Bottom Save Actions Bar */
.fc-booking-actions {
    position: sticky !important;
    bottom: 14px !important;
    z-index: 24 !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 18px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid #dce8e2 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 22px rgba(12, 20, 81, 0.09) !important;
    margin: 16px 0 0 !important;
    transition: all 0.2s ease !important;
}

.fc-actions-btns {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.fc-booking-actions .btn-g {
    height: 44px;
    min-width: 140px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 800;
    font-size: 0.92rem;
    border-radius: 12px;
    border: 0;
    background: linear-gradient(180deg, var(--g, #007a65), var(--g2, #006b5a));
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 122, 101, 0.22);
    transition: all 0.15s ease;
}

.fc-booking-actions .btn-g:hover {
    box-shadow: 0 6px 16px rgba(0, 122, 101, 0.32);
    transform: translateY(-1px);
}

@media (max-width: 767.98px) {
    .fc-booking-actions {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
    }
    .fc-actions-btns {
        width: 100%;
    }
    .fc-actions-btns .btn-g,
    .fc-booking-actions .btn-g {
        width: 100%;
        height: 42px;
        font-size: 0.86rem;
    }
}


/* Header Z-Index Layering (Ensure top fixed & sticky headers always stay above scrolled content) */
.top {
    z-index: 1000 !important;
}

.fc-page-head {
    z-index: 500 !important;
}

/* Multi-Select Date Picker Popover & Calendar */
.fc-card-attendees {
    position: relative;
    z-index: 20;
    overflow: visible !important;
    transition: min-height 0.2s ease;
}

@media (min-width: 992px) {
    .fc-card-attendees {
        min-height: 220px;
    }
}

.fc-card-attendees.cal-open,
.fc-card-attendees:has(.fc-cal-popover.show) {
    z-index: 35 !important;
    min-height: 440px !important;
}

.fc-dates-picker-block {
    position: relative;
    margin-bottom: 14px;
    overflow: visible !important;
}

.fc-date-input-field {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.fc-date-input-field > i {
    position: absolute;
    left: 12px;
    font-size: 0.95rem;
    color: #687999;
    pointer-events: none;
    z-index: 2;
}

.fc-date-multi-input {
    padding-left: 36px !important;
    padding-right: 105px !important;
    background: #ffffff !important;
    border: 1px solid #dce8e2 !important;
    border-radius: 12px !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    color: var(--navy, #0c1451) !important;
    height: 44px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(12, 20, 81, 0.03);
    transition: all 0.15s ease;
}

.fc-date-multi-input:hover,
.fc-date-input-field:hover .fc-date-multi-input {
    border-color: var(--g, #007a65) !important;
}

.fc-date-add-btn {
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;
    height: auto !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 12px !important;
    background: linear-gradient(180deg, var(--g, #007a65), var(--g2, #006b5a)) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 9px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0, 122, 101, 0.22) !important;
    transition: all 0.15s ease !important;
    z-index: 3;
}

.fc-date-add-btn:hover {
    box-shadow: 0 4px 10px rgba(0, 122, 101, 0.32) !important;
    transform: translateY(-0.5px);
}

/* Calendar Popover Dropdown */
.fc-cal-popover {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 40 !important;
    background: #ffffff;
    border: 1.5px solid #d2e5dd;
    border-radius: 16px;
    box-shadow: 0 14px 40px rgba(12, 20, 81, 0.18);
    padding: 14px;
    animation: fcCalFadeIn 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.fc-cal-popover.show {
    display: block;
}

@keyframes fcCalFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.fc-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 2px;
}

.fc-cal-month-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--navy, #0c1451);
}

.fc-cal-nav {
    width: 32px;
    height: 32px;
    border: 1px solid #dce8e2;
    background: #f4faf7;
    color: var(--g, #007a65);
    border-radius: 8px;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 0.82rem;
    transition: all 0.14s ease;
}

.fc-cal-nav:hover {
    background: var(--g, #007a65);
    color: #ffffff;
    border-color: var(--g, #007a65);
}

.fc-cal-nav:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
}

.fc-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
    margin-bottom: 6px;
}

.fc-cal-weekdays span {
    font-size: 0.72rem;
    font-weight: 800;
    color: #7b88a4;
    text-transform: uppercase;
    padding: 2px 0;
}

.fc-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    text-align: center;
}

.fc-cal-empty {
    height: 34px;
}

.fc-cal-day {
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--navy, #0c1451);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.12s ease;
    user-select: none;
}

.fc-cal-day:hover {
    background: #e8f7f1;
    color: var(--g, #007a65);
}

.fc-cal-day.selected {
    background: linear-gradient(135deg, #008770, #006654) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 6px rgba(0, 122, 101, 0.3) !important;
    transform: scale(0.96);
}

.fc-cal-day.is-today:not(.selected) {
    border: 1.5px solid var(--g, #007a65);
    color: var(--g, #007a65);
    font-weight: 800;
}

.fc-cal-day:disabled,
.fc-cal-day.disabled {
    opacity: 0.32 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background: transparent !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    transform: none !important;
}

.fc-cal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eef4f1;
}

.fc-cal-count {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--g, #007a65);
}

.fc-cal-done-btn {
    padding: 5px 14px;
    border-radius: 8px;
    background: var(--g, #007a65);
    color: #ffffff;
    border: 0;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s ease;
}

.fc-cal-done-btn:hover {
    background: #006654;
}

@media (max-width: 480px) {
    .fc-cal-popover {
        padding: 10px !important;
        border-radius: 14px !important;
    }
    .fc-cal-day, .fc-cal-empty {
        height: 32px !important;
    }
    .fc-cal-day {
        font-size: 0.78rem !important;
    }
}

/* =======================================================
   Meal Toggle Tiles — modern toggle tile with check badge
   ======================================================= */
.fc-meals-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    border-left: 1px solid #e3eee9;
    padding-left: 14px;
}

.fc-meal-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px 8px 11px;
    min-height: 74px;
    background: color-mix(in srgb, var(--fg) 13%, #ffffff);
    border: 1.75px solid color-mix(in srgb, var(--fg) 36%, transparent);
    border-radius: 14px;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.16s ease, background 0.16s ease, border-color 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    box-shadow: 0 2px 7px color-mix(in srgb, var(--fg) 10%, transparent);
}

/* Hidden native checkbox */
.fc-meal-cell input[type="checkbox"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Checkmark badge top-right (Active / Checked) */
.fc-meal-cell::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--fg);
    border: 2px solid #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23ffffff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2.5 7 5.5 10 11.5 4'/%3E%3C/svg%3E");
    background-size: 75% 75%;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 1px 4px rgba(0,0,0,0.24);
    opacity: 1;
    transform: scale(1);
    transition: all 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Unchecked / Disabled state — highly noticeable */
.fc-meal-cell:has(input:not(:checked)),
.fc-meal-cell.is-unchecked {
    background: #edf1f4 !important;
    border: 1.75px dashed #cbd5e1 !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

/* Unchecked empty circle badge indicator */
.fc-meal-cell:has(input:not(:checked))::after,
.fc-meal-cell.is-unchecked::after {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 2px solid #94a3b8 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    opacity: 0.85 !important;
    transform: scale(0.85) !important;
}

.fc-meal-cell:has(input:not(:checked)) .fc-mi,
.fc-meal-cell.is-unchecked .fc-mi {
    filter: grayscale(100%) !important;
    opacity: 0.45 !important;
    color: #64748b !important;
}

.fc-meal-cell:has(input:not(:checked)) .fc-ml,
.fc-meal-cell.is-unchecked .fc-ml {
    color: #64748b !important;
    opacity: 0.75 !important;
}

/* Hover on unchecked */
.fc-meal-cell:has(input:not(:checked)):hover,
.fc-meal-cell.is-unchecked:hover {
    opacity: 0.82 !important;
    background: color-mix(in srgb, var(--fg) 8%, #ffffff) !important;
    border: 1.75px solid color-mix(in srgb, var(--fg) 45%, #cbd5e1) !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 9px rgba(0,0,0,0.06) !important;
}

.fc-meal-cell:has(input:not(:checked)):hover::after,
.fc-meal-cell.is-unchecked:hover::after {
    border-color: var(--fg) !important;
    background-color: color-mix(in srgb, var(--fg) 12%, #ffffff) !important;
}

/* Hover on checked */
.fc-meal-cell:has(input:checked):hover,
.fc-meal-cell.is-checked:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 5px 16px color-mix(in srgb, var(--fg) 28%, transparent);
}

.fc-meal-cell:active {
    transform: scale(0.96) !important;
}

/* Meal icon */
.fc-mi {
    color: var(--fg);
    font-size: 1.55rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.16s ease, opacity 0.16s ease, color 0.16s ease;
}

.fc-mi svg {
    width: 1em;
    height: 1em;
}

/* Meal label */
.fc-ml {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--fg);
    white-space: nowrap;
    letter-spacing: 0.02em;
    line-height: 1;
    transition: color 0.16s ease, opacity 0.16s ease;
}

@media (max-width: 600px) {
    .fc-meals-grid {
        gap: 5px;
        padding-left: 8px;
    }
    .fc-meal-cell {
        padding: 9px 4px 7px;
        min-height: 60px;
        border-radius: 10px;
        gap: 4px;
    }
    .fc-mi {
        font-size: 1.25rem;
    }
    .fc-ml {
        font-size: 0.62rem;
    }
    .fc-meal-cell::after {
        width: 12px;
        height: 12px;
        top: 3px;
        right: 3px;
    }
}

/* =======================================================
   Custom Alert & Confirm Modals
   ======================================================= */
.fc-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    animation: fcModalFadeIn 0.18s ease-out;
}

@keyframes fcModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fcDlgSlideUp {
    from { transform: translateY(14px) scale(0.97); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Custom Alert Dialog */
.fc-alert-dlg {
    background: #ffffff;
    border-radius: 18px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.28);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    animation: fcDlgSlideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.fc-alert-h {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #f1f5f9;
}

.fc-alert-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.fc-alert-icon-box.warning {
    background: #fef3c7;
    color: #d97706;
}

.fc-alert-icon-box.danger,
.fc-alert-icon-box.error {
    background: #fee2e2;
    color: #dc2626;
}

.fc-alert-icon-box.info {
    background: #e0f2fe;
    color: #0284c7;
}

.fc-alert-icon-box.success {
    background: #d1fae5;
    color: #059669;
}

.fc-alert-head-text {
    flex: 1;
    min-width: 0;
}

.fc-alert-head-text h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
}

.fc-alert-b {
    padding: 18px 20px;
}

.fc-alert-msg {
    margin: 0;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.5;
}

.fc-alert-f {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px 16px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}

.fc-alert-ok-btn {
    min-width: 120px;
    padding: 9px 18px;
    font-size: 0.88rem;
    font-weight: 700;
}

/* Confirm Dialog */
.fc-confirm-dlg {
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    box-shadow: 0 25px 70px rgba(15, 23, 42, 0.3);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fcDlgSlideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.fc-confirm-h {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #f1f5f9;
}

.fc-confirm-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #e6f6f1;
    color: var(--g, #007a65);
    display: grid;
    place-items: center;
    font-size: 1.55rem;
    flex-shrink: 0;
}

.fc-confirm-head-text {
    flex: 1;
    min-width: 0;
}

.fc-confirm-head-text h2 {
    margin: 0 0 2px;
    font-size: 1.25rem;
    font-weight: 900;
    color: #0f172a;
}

.fc-confirm-head-text p {
    margin: 0;
    color: #64748b;
    font-size: 0.82rem;
}

.fc-confirm-b {
    padding: 16px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: calc(90vh - 160px);
}

.fc-confirm-summary-bar {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    background: #f1f7f5;
    border: 1px solid #d2e8df;
    border-radius: 12px;
    padding: 10px 14px;
    gap: 8px;
}

.fc-confirm-sum-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fc-confirm-sum-item:not(:first-child) {
    border-left: 1px solid #d2e8df;
    padding-left: 12px;
}

.fc-confirm-sum-item small {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.fc-confirm-sum-item b {
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-confirm-dates-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.fc-confirm-date-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: border-color 0.15s ease;
}

.fc-confirm-date-card:hover {
    border-color: #cbd5e1;
}

.fc-confirm-date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 52px;
    background: #ffffff;
    border: 1.5px solid #d8e5e0;
    border-radius: 10px;
    flex-shrink: 0;
}

.fc-confirm-day {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #64748b;
    line-height: 1;
}

.fc-confirm-num {
    font-size: 0.92rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.2;
}

.fc-confirm-meals-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

.fc-confirm-meal-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 800;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.fc-confirm-meal-pill svg {
    width: 1em;
    height: 1em;
}

.fc-confirm-no-meals {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #94a3b8;
    font-size: 0.8rem;
    font-style: italic;
    font-weight: 600;
}

.fc-confirm-f {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 22px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}

.fc-confirm-f .btn-o,
.fc-confirm-f .btn-g {
    min-width: 140px;
    padding: 10px 18px;
    font-size: 0.88rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 10px;
}

@media (max-width: 600px) {
    .fc-confirm-dlg {
        max-height: 88vh;
        border-radius: 18px 18px 0 0;
        width: 100%;
    }
    .fc-modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .fc-alert-dlg {
        margin: 16px;
        border-radius: 18px;
    }
    .fc-confirm-summary-bar {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .fc-confirm-sum-item:not(:first-child) {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid #d2e8df;
        padding-top: 4px;
    }
    .fc-confirm-date-card {
        gap: 10px;
        padding: 8px 10px;
    }
    .fc-confirm-f {
        padding: 12px 16px;
        gap: 8px;
    }
    .fc-confirm-f .btn-o,
    .fc-confirm-f .btn-g {
        min-width: 0;
        flex: 1;
        padding: 10px 8px;
        font-size: 0.82rem;
    }
}