:root{
  --bg:#faf9f7; --surface:#ffffff; --ink:#1c1917; --ink-2:#6b6258; --line:#e7e2db;
  --brand:#d02c22; --brand-press:#b3251c; --brand-text:#c22c23; --brand-vivid:#e2352b; --brand-soft:#fbeeec;
  --ok:#1e7d38; --ok-soft:#e7f3ea; --warn:#7c5300; --warn-soft:#faf0dc;
  --water:#2f7fd1; --water-text:#1d5fa8; --water-soft:#e8f1fb;
  --dark-bg:#0c0a09; --dark-ink:#f7f5f2; --dark-ink-2:#a8a29e; --dark-line:#292524;
  --r-lg:20px; --r-md:14px; --pill:999px;
  --shadow-sm:0 1px 2px rgba(28,25,23,.05), 0 6px 16px -6px rgba(28,25,23,.08);
  --shadow-lg:0 2px 4px rgba(28,25,23,.05), 0 20px 40px -16px rgba(28,25,23,.2);
  --ease:cubic-bezier(.3,.7,.3,1); --t:.2s var(--ease);
  --font-display:"Archivo","Archivo Fallback",-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:"Manrope","Manrope Fallback",-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
.wrap{max-width:1060px; margin:0 auto; padding:0 20px}
:is(a,button,input,summary):focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:6px}

.concept-ribbon{background:var(--ink); color:#fff; text-align:center; font-size:12.5px; padding:7px 16px; letter-spacing:.04em}
.concept-ribbon b{color:#ff9d97}
.concept-ribbon a{color:#ff9d97; font-weight:700}

/* ---------- Top nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(250,249,247,.9); backdrop-filter:saturate(1.6) blur(18px); -webkit-backdrop-filter:saturate(1.6) blur(18px); border-bottom:1px solid rgba(28,25,23,.08)}
.nav-inner{max-width:1060px; margin:0 auto; padding:0 20px; height:56px; display:flex; align-items:center; gap:14px}
.logo{font-family:var(--font-display); font-size:16px; letter-spacing:.02em}
.logo b{font-weight:900} .logo span{font-weight:600; color:var(--ink-2)} .logo em{color:var(--brand-text); font-style:normal; font-weight:900}
.nav .tag{font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--ink); padding:4px 11px; border-radius:var(--pill); white-space:nowrap}
.nav .back{margin-left:auto; font-size:14px; font-weight:600; color:var(--ink-2); display:flex; align-items:center; gap:6px; transition:color var(--t); white-space:nowrap}
.nav .back::before{
  content:""; width:14px; height:14px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.nav .back:hover{color:var(--ink)}
@media (max-width:430px){
  .nav-inner{gap:9px}
  .nav .tag{padding:4px 9px; letter-spacing:.06em}
  .nav .back{font-size:13px}
  .logo{font-size:15px}
}

/* ---------- Section sub-nav (tabs across the 5 modules) ---------- */
.subnav-scroll{border-bottom:1px solid rgba(28,25,23,.08); background:rgba(250,249,247,.9)}
.subnav{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding:0 20px}
.subnav::-webkit-scrollbar{display:none}
.subnav a{
  display:flex; align-items:center; gap:7px; white-space:nowrap; padding:13px 4px; margin-right:22px;
  font-size:13.5px; font-weight:700; color:var(--ink-2); border-bottom:2px solid transparent; transition:color var(--t), border-color var(--t);
}
.subnav a:last-child{margin-right:0}
.subnav a::before{content:""; width:16px; height:16px; flex-shrink:0; background:var(--ink-2); transition:background var(--t);
  -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat}
.subnav a.n-dash::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E")}
.subnav a.n-checkin::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12 12 15 21 6'/%3E%3Cpath d='M21 12v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E")}
.subnav a.n-sched::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E")}
.subnav a.n-members::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}
.subnav a.n-pay::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' x2='12' y1='2' y2='22'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E")}
.subnav a.n-msg::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E")}
.subnav a.n-lib::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='23 7 16 12 23 17 23 7'/%3E%3Crect width='15' height='14' x='1' y='5' rx='2'/%3E%3C/svg%3E")}
.subnav a.n-passes::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M13 5v2'/%3E%3Cpath d='M13 17v2'/%3E%3Cpath d='M13 11v2'/%3E%3C/svg%3E")}
.subnav a:hover{color:var(--ink)}
.subnav a:hover::before{background:var(--ink)}
.subnav a.active{color:var(--brand-text); border-color:var(--brand)}
.subnav a.active::before{background:var(--brand-text)}

/* ---------- Header ---------- */
.head{display:flex; align-items:flex-end; gap:16px; padding:32px 0 22px; flex-wrap:wrap}
.head h1{margin:0; font-family:var(--font-display); font-size:clamp(23px,4vw,32px); font-weight:800; letter-spacing:-.02em}
.head p{margin:2px 0 0; color:var(--ink-2); font-size:14.5px; font-weight:500}
.head .who{margin-left:auto; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-text); background:var(--brand-soft); padding:5px 12px; border-radius:var(--pill); white-space:nowrap}

h2{font-family:var(--font-display); font-size:19px; font-weight:800; letter-spacing:-.01em; margin:36px 0 14px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
h2 small{font-family:var(--font-body); font-size:12.5px; font-weight:600; color:var(--ink-2)}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow-sm)}
.card.tight{padding:0}

/* ---------- KPI row ---------- */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:6px}
@media (max-width:860px){ .kpis{grid-template-columns:repeat(2,1fr)} }
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--shadow-sm)}
.kpi .lbl{display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); margin:0 0 8px}
.kpi .lbl::before{content:""; width:15px; height:15px; flex-shrink:0; background:var(--brand-text);
  -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat}
.kpi.k-members .lbl::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}
.kpi.k-book .lbl::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E")}
.kpi.k-pay .lbl::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' x2='12' y1='2' y2='22'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E")}
.kpi.k-class .lbl::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E")}
.kpi.k-in .lbl::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12 12 15 21 6'/%3E%3Cpath d='M21 12v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E")}
.kpi.k-wait .lbl::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E")}
.kpi.k-collected .lbl::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.kpi.k-msg .lbl::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E")}
.kpi.k-passes .lbl::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3C/svg%3E")}
.kpi b{display:block; font-family:var(--font-display); font-size:27px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.05}
.kpi span{font-size:12.5px; font-weight:600; color:var(--ink-2)}
.kpi .up{color:var(--ok)} .kpi .due{color:var(--brand-text)}

/* ---------- Schedule (today list + builder day list) ---------- */
.sched{padding:6px 0}
.sched .row{display:grid; grid-template-columns:76px 1fr auto; gap:8px 14px; align-items:center; padding:13px 20px; border-top:1px solid var(--line)}
.sched .row:first-child{border-top:none}
.sched .time{font-family:var(--font-display); font-weight:800; font-size:14.5px; font-variant-numeric:tabular-nums; white-space:nowrap}
.sched .what{display:flex; align-items:center; gap:10px; min-width:0}
.sched .dot{width:9px; height:9px; border-radius:50%; flex-shrink:0}
.sched .what b{display:block; font-size:14.5px; font-weight:700}
.sched .what span{font-size:12.5px; color:var(--ink-2); font-weight:500}
.sched .cap{display:flex; align-items:center; gap:10px; justify-content:flex-end}
.sched .cap .n{font-size:12.5px; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap}
.mini-bar{width:52px; height:5px; background:var(--line); border-radius:var(--pill); overflow:hidden; flex-shrink:0}
.mini-bar i{display:block; height:100%; background:var(--brand); border-radius:var(--pill)}
.chip{font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:var(--pill); white-space:nowrap}
.chip.done{color:var(--ink-2); background:var(--bg); border:1px solid var(--line)}
.chip.live{color:var(--water-text); background:var(--water-soft)}
.chip.open{color:var(--ok); background:var(--ok-soft)}
.chip.full{color:var(--brand-text); background:var(--brand-soft)}
.chip.paid{color:var(--ok); background:var(--ok-soft)}
.chip.overdue{color:var(--brand-text); background:var(--brand-soft)}
.chip.checked{color:var(--ok); background:var(--ok-soft)}
.chip.notyet{color:var(--ink-2); background:var(--bg); border:1px solid var(--line)}
@media (max-width:560px){
  .sched .row{
    grid-template-columns:1fr auto;
    grid-template-areas:"time chip" "what what" "bar  n";
    gap:7px 12px; padding:15px 16px;
  }
  .sched .cap{display:contents}
  .sched .time{grid-area:time}
  .sched .what{grid-area:what}
  .sched .cap .chip{grid-area:chip; justify-self:end; align-self:center}
  .sched .cap .mini-bar{grid-area:bar; width:100%; align-self:center}
  .sched .cap .n{grid-area:n; justify-self:end}
}

/* ---------- Two-col zone ---------- */
.cols{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
@media (max-width:860px){ .cols{grid-template-columns:1fr} }
.list{padding:6px 0}
.list .row{display:flex; align-items:center; gap:12px; padding:11px 20px; border-top:1px solid var(--line)}
.list .row:first-child{border-top:none}
.avatar{width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--brand-vivid),#f0796f); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-size:13px; font-weight:800; flex-shrink:0}
.avatar.alt{background:linear-gradient(135deg,#3d3835,#6b6258)}
.avatar.lg{width:52px; height:52px; font-size:18px}
.list b{font-size:14px; font-weight:700; display:block}
.list .sub{font-size:12.5px; color:var(--ink-2); font-weight:500}
.list .end{margin-left:auto; text-align:right}
.list .end .amt{font-family:var(--font-display); font-weight:800; font-size:14.5px; font-variant-numeric:tabular-nums; display:block}
.list .end .od{font-size:11.5px; font-weight:700; color:var(--brand-text); white-space:nowrap}
.list .end .ok-t{font-size:11.5px; font-weight:700; color:var(--ok)}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 20px 12px}
.card-head h3{margin:0; font-family:var(--font-display); font-size:16px; font-weight:800}
.card-head .tot{font-size:12.5px; font-weight:700; color:var(--ink-2)}
.card-head .tot b{color:var(--brand-text)}
.foot-note{padding:12px 20px 16px; font-size:12.5px; color:var(--ink-2); font-weight:600; border-top:1px solid var(--line)}

/* ---------- Buttons ---------- */
.btn-sm{
  border:1px solid rgba(208,44,34,.4); background:transparent; color:var(--brand-text);
  font-family:inherit; font-size:12px; font-weight:800; padding:7px 13px; border-radius:var(--pill); cursor:pointer;
  transition:background var(--t), color var(--t), transform var(--t); white-space:nowrap; flex-shrink:0;
}
.btn-sm:hover{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-sm:active{transform:scale(.96)}
.btn-sm:disabled{opacity:.5; cursor:default; transform:none; background:transparent; color:var(--ink-2); border-color:var(--line)}
.btn-sm.ok{border-color:rgba(30,125,56,.4); color:var(--ok)}
.btn-sm.ok:hover{background:var(--ok); border-color:var(--ok); color:#fff}
.btn{
  display:inline-block; background:var(--brand); color:#fff; font-size:15px; font-weight:700; padding:12px 26px; border-radius:var(--pill);
  transition:background var(--t), transform var(--t); border:none; cursor:pointer; font-family:inherit;
}
.btn:hover{background:var(--brand-press)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent; color:var(--dark-ink); border:1.5px solid #3d3835}
.btn.ghost:hover{background:#1c1917}
.btn.light{background:transparent; color:var(--ink); border:1.5px solid var(--line)}
.btn.light:hover{background:var(--bg)}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ---------- Search + filter chips ---------- */
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:6px 0 18px}
.search{position:relative; flex:1 1 240px; min-width:0}
.search input{
  width:100%; border:1px solid var(--line); background:var(--surface); border-radius:var(--pill);
  padding:11px 16px 11px 40px; font-family:inherit; font-size:14.5px; color:var(--ink);
  transition:border-color var(--t), box-shadow var(--t);
}
.search input::placeholder{color:var(--ink-2)}
.search input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(208,44,34,.12)}
.search::before{
  content:""; position:absolute; left:15px; top:50%; transform:translateY(-50%); width:16px; height:16px; background:var(--ink-2); pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.filters{display:flex; gap:8px; flex-wrap:wrap}
.f-chip{
  font-family:inherit; font-size:13px; font-weight:700; color:var(--ink-2); background:var(--surface);
  border:1px solid var(--line); padding:9px 15px; border-radius:var(--pill); cursor:pointer; transition:all var(--t); white-space:nowrap;
}
.f-chip:hover{border-color:rgba(208,44,34,.4); color:var(--brand-text)}
.f-chip.active{background:var(--ink); border-color:var(--ink); color:#fff}
.f-chip .n{opacity:.7; margin-left:4px}

/* ---------- Day tabs (schedule builder) ---------- */
.day-tabs{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; margin-bottom:16px}
.day-tabs::-webkit-scrollbar{display:none}
.day-tab{
  font-family:var(--font-display); font-size:13px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink-2); background:var(--surface); border:1px solid var(--line); padding:10px 16px; border-radius:var(--r-md);
  cursor:pointer; white-space:nowrap; transition:all var(--t); flex-shrink:0;
}
.day-tab .num{display:block; font-size:16px; margin-top:2px}
.day-tab:hover{border-color:rgba(208,44,34,.4)}
.day-tab.active{background:var(--ink); border-color:var(--ink); color:#fff}

/* ---------- Member progress cards ---------- */
.prog{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:860px){ .prog{grid-template-columns:1fr} }
.prog .top{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.prog h3{margin:0; font-family:var(--font-display); font-size:15.5px; font-weight:800}
.prog .goal{font-size:12.5px; color:var(--ink-2); font-weight:500}
.prog .stat{display:flex; justify-content:space-between; gap:10px; font-size:13px; font-weight:600; color:var(--ink-2); padding:7px 0; border-top:1px solid var(--line)}
.prog .stat:first-of-type{border-top:none}
.prog .stat b{color:var(--ink); font-variant-numeric:tabular-nums}
.prog .stat b.good{color:var(--ok)}
.prog .bar{height:6px; background:var(--line); border-radius:var(--pill); overflow:hidden; margin:10px 0 4px}
.prog .bar i{display:block; height:100%; background:var(--brand); border-radius:var(--pill)}
.prog .nudge{color:var(--warn); background:var(--warn-soft); font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:var(--pill); margin-left:auto; white-space:nowrap}
.prog .btn-sm{width:100%; margin-top:12px}

/* ---------- Store ---------- */
.store{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:860px){ .store{grid-template-columns:1fr} }
.store .chip-b{align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--water-text); background:var(--water-soft); padding:4px 11px; border-radius:var(--pill); margin-bottom:8px; display:inline-block}
.store h3{margin:0 0 2px; font-family:var(--font-display); font-size:16px; font-weight:800}
.store p{margin:0; font-size:13px; color:var(--ink-2)}
.store .sale{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.store .price{font-family:var(--font-display); font-weight:800; font-size:19px; font-variant-numeric:tabular-nums}
.store .sold{font-size:12.5px; font-weight:700; color:var(--ok)}

/* ---------- Hours + chart ---------- */
.hours .row{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--line); font-size:14px}
.hours .row:first-of-type{border-top:none}
.hours .d{font-weight:800; font-family:var(--font-display); font-size:13px; letter-spacing:.04em}
.hours .h{color:var(--ink-2); font-weight:600; font-variant-numeric:tabular-nums}
.hours .note{font-size:12.5px; color:var(--ink-2); font-weight:600; margin:12px 0 0; display:flex; align-items:center; gap:7px}
.hours .note::before{content:""; width:14px; height:14px; flex-shrink:0; background:var(--ok);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.chart-wrap svg{width:100%; height:150px; margin-top:8px}
.chart-note{font-size:12.5px; color:var(--ink-2); font-weight:600; margin:8px 0 0}

/* ---------- Member directory table ---------- */
.mtable{padding:6px 0}
.mtable .row{
  display:grid; grid-template-columns:1fr 110px 90px 110px 28px; gap:12px; align-items:center;
  padding:13px 20px; border-top:1px solid var(--line); cursor:pointer; transition:background var(--t); text-align:left;
  width:100%; background:none; border-left:none; border-right:none; border-bottom:none; font:inherit; color:inherit;
}
.mtable .row:first-child{border-top:none}
.mtable .row:hover{background:var(--bg)}
.mtable .who{display:flex; align-items:center; gap:12px; min-width:0}
.mtable .who b{font-size:14px; font-weight:700; display:block}
.mtable .who span{font-size:12.5px; color:var(--ink-2); font-weight:500}
.mtable .plan-cell{font-size:13px; font-weight:600; color:var(--ink-2)}
.mtable .visit-cell{font-size:12.5px; font-weight:600; color:var(--ink-2); white-space:nowrap}
.mtable .chev{width:16px; height:16px; background:var(--ink-2); justify-self:end;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:640px){
  .mtable .row{grid-template-columns:1fr auto 16px; grid-template-areas:"who status chev" "plan plan plan"; row-gap:4px; padding:14px 16px}
  .mtable .who{grid-area:who}
  .mtable .chip{grid-area:status; justify-self:end}
  .mtable .chev{grid-area:chev}
  /* 34px de avatar + 12px de gap: así el plan cae alineado con el nombre */
  .mtable .plan-cell{grid-area:plan; padding-left:46px; margin-top:-4px}
  .mtable .visit-cell{display:none}
}

/* ---------- Drawer (member profile) ---------- */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(12,10,9,.5); opacity:0; pointer-events:none; transition:opacity var(--t); z-index:80;
}
.drawer-overlay.open{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(480px,100vw); background:var(--surface); z-index:81;
  transform:translateX(100%); transition:transform .3s var(--ease); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; overflow:hidden;
}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex; align-items:center; gap:14px; padding:20px; border-bottom:1px solid var(--line); flex-shrink:0}
.drawer-head h3{margin:0; font-family:var(--font-display); font-size:17px; font-weight:800}
.drawer-head .sub{font-size:12.5px; color:var(--ink-2); font-weight:600}
.drawer-close{
  margin-left:auto; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--surface);
  cursor:pointer; flex-shrink:0; position:relative; transition:background var(--t);
}
.drawer-close:hover{background:var(--bg)}
.drawer-close::before, .drawer-close::after{
  content:""; position:absolute; left:50%; top:50%; width:14px; height:2px; background:var(--ink); transform-origin:center;
}
.drawer-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.drawer-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.drawer-tabs{display:flex; gap:4px; padding:0 20px; border-bottom:1px solid var(--line); flex-shrink:0; overflow-x:auto; scrollbar-width:none}
.drawer-tabs::-webkit-scrollbar{display:none}
.drawer-tab{
  font-family:inherit; font-size:13px; font-weight:700; color:var(--ink-2); background:none; border:none; cursor:pointer;
  padding:13px 4px; margin-right:20px; border-bottom:2px solid transparent; transition:color var(--t), border-color var(--t); white-space:nowrap;
}
.drawer-tab.active{color:var(--brand-text); border-color:var(--brand)}
.drawer-body{padding:20px; overflow-y:auto; flex:1}
.dpane{display:none}
.dpane.active{display:block}
.field-row{display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-top:1px solid var(--line); font-size:14px}
.field-row:first-child{border-top:none}
.field-row .k{color:var(--ink-2); font-weight:600}
.field-row .v{font-weight:700; text-align:right}
.plan-block{margin-bottom:22px}
.plan-block h4{margin:0 0 10px; font-family:var(--font-display); font-size:14.5px; font-weight:800}
.ex-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid var(--line); font-size:13.5px}
.ex-row:first-of-type{border-top:none}
.ex-row .name{display:flex; align-items:center; min-width:0}
.ex-row .meta{color:var(--ink-2); font-weight:600; white-space:nowrap}
.ex-check{
  width:16px; height:16px; border-radius:50%; border:2px solid var(--line); position:relative; margin-right:10px; flex-shrink:0;
}
.ex-check.done{background:var(--brand); border-color:var(--brand)}
.ex-check.done::after{
  content:""; position:absolute; inset:2px; background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.meal-row{padding:10px 0; border-top:1px solid var(--line)}
.meal-row:first-of-type{border-top:none}
.meal-row .when{font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-text)}
.meal-row b{display:block; font-size:14px; font-weight:700; margin:2px 0 1px}
.meal-row .kcal{font-size:12.5px; color:var(--ink-2); font-weight:600}
.meas-table{width:100%; border-collapse:collapse; font-size:13px; margin-top:8px}
.meas-table th{text-align:left; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); padding:0 8px 8px 0; border-bottom:1px solid var(--line)}
.meas-table td{padding:9px 8px 9px 0; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; font-weight:600}
.meas-table tr:last-child td{border-bottom:none}
.meas-table td:first-child, .meas-table th:first-child{padding-left:0}
.hist-row{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:13.5px}
.hist-row:first-of-type{border-top:none}
.hist-row .meta{color:var(--ink-2); font-weight:600; text-align:right; white-space:nowrap}
.streak-box{display:flex; gap:16px; margin-bottom:16px}
.streak-box .s{flex:1; background:var(--bg); border-radius:var(--r-md); padding:12px 14px; text-align:center}
.streak-box b{display:block; font-family:var(--font-display); font-size:22px; font-weight:800; letter-spacing:-.02em}
.streak-box span{font-size:11px; font-weight:700; color:var(--ink-2); text-transform:uppercase; letter-spacing:.05em}
@media (max-width:520px){ .drawer{width:100vw} }

/* ---------- CTA + footer ---------- */
.phase-cta{margin:48px 0 0; background:var(--dark-bg); color:var(--dark-ink); border-radius:var(--r-lg); padding:36px 30px; text-align:center}
.phase-cta h2{justify-content:center; margin:0 0 8px; font-size:clamp(20px,3.4vw,26px); color:var(--dark-ink)}
.phase-cta p{margin:0 auto 22px; color:var(--dark-ink-2); max-width:56ch; font-size:15px}
footer{padding:36px 0 40px; text-align:center; color:var(--ink-2); font-size:13px}
footer a{font-weight:700; color:var(--ink)}

.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(80px); opacity:0;
  background:var(--ink); color:#fff; font-size:14px; font-weight:600; padding:12px 22px; border-radius:var(--pill);
  transition:transform .3s var(--ease), opacity .3s var(--ease); pointer-events:none; white-space:nowrap; z-index:99;
  box-shadow:var(--shadow-lg); max-width:calc(100vw - 32px); overflow:hidden; text-overflow:ellipsis;
}
.toast.show{transform:translateX(-50%) translateY(0); opacity:1}
.empty-note{padding:28px 20px; text-align:center; font-size:13.5px; color:var(--ink-2); font-weight:600}

/* ---------- Exercise library ---------- */
.lib-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px}
.lib-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; cursor:pointer;
  box-shadow:var(--shadow-sm); transition:transform var(--t), box-shadow var(--t); text-align:left;
}
@media (hover:hover){ .lib-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)} }
.lib-thumb{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--dark-bg)}
.lib-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.lib-card:hover .lib-thumb img{transform:scale(1.05)}
.lib-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(rgba(12,10,9,.05), rgba(12,10,9,.35));
}
.lib-play::before{
  content:""; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.92); flex-shrink:0;
  box-shadow:0 6px 16px rgba(12,10,9,.3);
}
.lib-play::after{
  content:""; position:absolute; width:15px; height:15px; background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpolygon points='6 3 20 12 6 21 6 3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpolygon points='6 3 20 12 6 21 6 3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.lib-dur{
  position:absolute; right:8px; bottom:8px; background:rgba(12,10,9,.75); color:#fff; font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:6px; font-variant-numeric:tabular-nums;
}
.lib-body{padding:14px 16px 16px}
.lib-cat{font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-text); margin:0 0 4px}
.lib-body h3{margin:0 0 3px; font-family:var(--font-display); font-size:15px; font-weight:800}
.lib-body p{margin:0; font-size:12.5px; color:var(--ink-2); font-weight:500}

/* Lightbox */
.lightbox-overlay{position:fixed; inset:0; background:rgba(12,10,9,.7); opacity:0; pointer-events:none; transition:opacity var(--t); z-index:90; display:flex; align-items:center; justify-content:center; padding:20px}
.lightbox-overlay.open{opacity:1; pointer-events:auto}
.lightbox{background:var(--surface); border-radius:var(--r-lg); overflow:hidden; max-width:480px; width:100%; box-shadow:var(--shadow-lg)}
.lightbox img{width:100%; aspect-ratio:4/3; object-fit:cover}
.lightbox-pad{padding:20px}
.lightbox-pad h3{margin:0 0 4px; font-family:var(--font-display); font-size:18px; font-weight:800}
.lightbox-pad p{margin:0 0 16px; font-size:13.5px; color:var(--ink-2)}

/* ---------- Messaging ---------- */
.msg-shell{display:grid; grid-template-columns:300px 1fr; gap:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); background:var(--surface); height:min(640px,72vh)}
.msg-list{border-right:1px solid var(--line); overflow-y:auto}
.msg-item{
  display:flex; align-items:center; gap:11px; width:100%; padding:13px 16px; border-top:1px solid var(--line);
  background:none; border-left:none; border-right:none; border-bottom:none; cursor:pointer; text-align:left; font:inherit; color:inherit;
  transition:background var(--t);
}
.msg-item:first-child{border-top:none}
.msg-item:hover{background:var(--bg)}
.msg-item.active{background:var(--brand-soft)}
.msg-item .who{flex:1; min-width:0}
.msg-item b{font-size:13.5px; font-weight:700; display:block}
.msg-item .prev{font-size:12px; color:var(--ink-2); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; max-width:170px}
.msg-item .meta{text-align:right; flex-shrink:0}
.msg-item .time{font-size:10.5px; color:var(--ink-2); font-weight:600; display:block}
.unread-dot{width:8px; height:8px; border-radius:50%; background:var(--brand); display:inline-block; margin-top:4px}
.msg-thread{display:flex; flex-direction:column; min-width:0}
.thread-head{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); flex-shrink:0}
.thread-head b{font-size:14.5px; font-weight:700; display:block}
.thread-head span{font-size:12px; color:var(--ink-2); font-weight:500}
.thread-head .back{display:none}
.thread-body{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px}
.bubble{max-width:74%; padding:10px 14px; border-radius:16px; font-size:13.5px; line-height:1.45}
.bubble.me{align-self:flex-end; background:var(--brand); color:#fff; border-bottom-right-radius:4px}
.bubble.them{align-self:flex-start; background:var(--bg); color:var(--ink); border-bottom-left-radius:4px}
.bubble .t{display:block; font-size:10px; opacity:.7; margin-top:4px; font-weight:600}
.thread-input{display:flex; gap:10px; padding:14px; border-top:1px solid var(--line); flex-shrink:0}
.thread-input input{
  flex:1; border:1px solid var(--line); border-radius:var(--pill); padding:10px 16px; font-family:inherit; font-size:13.5px;
  transition:border-color var(--t), box-shadow var(--t);
}
.thread-input input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(208,44,34,.12)}
.thread-input button{
  background:var(--brand); color:#fff; border:none; border-radius:50%; width:38px; height:38px; flex-shrink:0; cursor:pointer;
  display:grid; place-items:center; transition:background var(--t), transform var(--t);
}
.thread-input button:hover{background:var(--brand-press)}
.thread-input button:active{transform:scale(.92)}
.thread-input button::before{
  content:""; width:16px; height:16px; background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (max-width:760px){
  .msg-shell{grid-template-columns:1fr; height:min(600px,74vh); position:relative}
  .msg-list{border-right:none; position:absolute; inset:0; background:var(--surface); transition:transform var(--t); z-index:2}
  .msg-thread{position:absolute; inset:0; transform:translateX(100%); transition:transform var(--t); background:var(--surface)}
  .msg-shell.thread-open .msg-list{transform:translateX(-100%)}
  .msg-shell.thread-open .msg-thread{transform:translateX(0)}
  .thread-head .back{
    display:flex; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:var(--surface);
    align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
  .thread-head .back::before{
    content:""; width:15px; height:15px; background:var(--ink);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  }
}

/* ---------- Progress photo slots ---------- */
.photo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px}
.photo-slot{
  aspect-ratio:3/4; border-radius:var(--r-md); border:1.5px dashed var(--line); background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer;
  transition:border-color var(--t), background var(--t); position:relative;
}
.photo-slot:hover{border-color:rgba(208,44,34,.4); background:var(--brand-soft)}
.photo-slot::before{
  content:""; width:22px; height:22px; background:var(--ink-2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.photo-slot span{font-size:11px; font-weight:700; color:var(--ink-2); text-align:center; padding:0 6px}

/* Drawer header quick action */
.drawer-msg-btn{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--surface); cursor:pointer;
  flex-shrink:0; display:grid; place-items:center; transition:background var(--t), border-color var(--t); margin-left:8px;
}
.drawer-msg-btn:hover{background:var(--brand-soft); border-color:rgba(208,44,34,.4)}
/* ---------- Pass catalog + ledger ---------- */
.pass-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.pass-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden}
.pass-card::before{content:""; position:absolute; left:0; top:16px; bottom:16px; width:3px; background:var(--brand); border-radius:0 3px 3px 0}
.pass-card h3{margin:0 0 4px; font-family:var(--font-display); font-size:16.5px; font-weight:800}
.pass-card .pr{font-family:var(--font-display); font-size:28px; font-weight:800; letter-spacing:-.02em; margin:8px 0 2px}
.pass-card .meta{font-size:12.5px; color:var(--ink-2); font-weight:600; margin:0 0 16px}
.pass-card .btn-sm{width:100%}
.pass-row{display:flex; align-items:center; gap:12px; padding:14px 20px; border-top:1px solid var(--line); flex-wrap:wrap}
.pass-row:first-child{border-top:none}
.pass-row .who{flex:1; min-width:150px}
.pass-row .who b{font-size:14.5px; font-weight:700; display:block}
.pass-row .who span{font-size:12.5px; color:var(--ink-2); font-weight:500}
.pass-row .use-col{width:150px; flex-shrink:0}
.pass-row .use-col .n{font-size:12.5px; font-weight:700; color:var(--ink-2); margin-bottom:5px; display:block}
.pass-row .exp{font-size:12px; color:var(--ink-2); font-weight:600; width:110px; flex-shrink:0}
.pass-row .exp b{display:block; color:var(--ink); font-weight:700}
@media (max-width:700px){
  .pass-row{padding:14px 16px}
  .pass-row .who{flex:1 1 100%; order:1}
  .pass-row .use-col{order:2}
  .pass-row .exp{order:3; width:auto}
  .pass-row .actions{order:4; margin-left:auto}
}

/* ---------- Simple modal (sell a pass) ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(12,10,9,.55); opacity:0; pointer-events:none; transition:opacity var(--t); z-index:95; display:flex; align-items:center; justify-content:center; padding:20px}
.modal-overlay.open{opacity:1; pointer-events:auto}
.modal-box{background:var(--surface); border-radius:var(--r-lg); padding:24px; max-width:380px; width:100%; box-shadow:var(--shadow-lg)}
.modal-box h3{margin:0 0 4px; font-family:var(--font-display); font-size:18px; font-weight:800}
.modal-box .sub{font-size:12.5px; color:var(--ink-2); font-weight:600; margin:0 0 18px; display:block}
.modal-field{margin-bottom:14px}
.modal-field label{display:block; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); margin-bottom:6px}
.modal-field select, .modal-field input{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-family:inherit; font-size:14px; background:var(--surface); color:var(--ink);
}
.modal-field select:focus, .modal-field input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(208,44,34,.12)}
.modal-actions{display:flex; gap:10px; margin-top:18px}
.modal-actions .btn{flex:1; text-align:center}
.modal-actions .btn-cancel{
  flex:1; text-align:center; background:transparent; border:1.5px solid var(--line); color:var(--ink); border-radius:var(--pill);
  font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; padding:12px 20px; transition:background var(--t);
}
.modal-actions .btn-cancel:hover{background:var(--bg)}

.drawer-msg-btn::before{
  content:""; width:16px; height:16px; background:var(--brand-text);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important} }