/* ============================================================
   ENDURANCE GYM - gym system
   Concrete floor, chalk paper, rubber black. Every section is a
   weight plate in its own colour; the page you are on sets --plate.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  --concrete: #DEE1DC;
  --chalk:    #FBFBF8;
  --rubber:   #1F2328;
  --muted:    #5C6168;
  --line:     #C7CBC5;
  --red:      #D7261E;
  --blue:     #1F5FBF;
  --yellow:   #F4B400;
  --green:    #1F8F4E;
  --silver:   #A9AFB5;
  --plate:    var(--rubber);
  --on-plate: #fff;
  --display:  'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --body:     'Hanken Grotesk', system-ui, sans-serif;
  --shadow:   4px 4px 0 rgba(31, 35, 40, .18);
}
body[data-plate="rubber"] { --plate: var(--rubber); --on-plate: #fff; }
body[data-plate="green"]  { --plate: var(--green);  --on-plate: #fff; }
body[data-plate="blue"]   { --plate: var(--blue);   --on-plate: #fff; }
body[data-plate="yellow"] { --plate: var(--yellow); --on-plate: var(--rubber); }
body[data-plate="red"]    { --plate: var(--red);    --on-plate: #fff; }
body[data-plate="chalk"]  { --plate: #fff;          --on-plate: var(--rubber); }
body[data-plate="silver"] { --plate: var(--silver); --on-plate: var(--rubber); }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--body); font-size: 15px; line-height: 1.5; color: var(--rubber);
  background: var(--concrete); -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- the rail: Olympic barbell loaded with bumper plates ---------- */
.rail {
  position: fixed; inset: 0 auto 0 0; width: 96px; z-index: 60;
  display: flex; flex-direction: column; align-items: center; padding: 18px 0 14px;
  background: #0f1114;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
  color: #fff;
}
.rail__brand img {
  width: 44px; height: 44px; padding: 4px; background: #fff;
  border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform .2s ease;
}
.rail__brand:hover img { transform: scale(1.05); }

.rail__bar {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 4px; margin-top: 14px; width: 100%;
}
.rail__bar::before, .rail__bar::after { display: none; }

.plate {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; width: 100%; padding: 2px 0; text-decoration: none; color: #8e95a0;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}

.plate__disc {
  position: relative; display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  transition: all .25s cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.55));
}
/* the bumper plate SVG fills the disc */
.plate__disc .bumper-plate {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transition: transform .3s ease, filter .3s ease;
}
/* the icon sits in the chrome bore hole center */
.plate__ic {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: 50%; z-index: 2;
  color: rgba(210, 218, 230, 0.85);
  transition: color .25s ease, filter .25s ease;
}
.plate__ic svg { width: 16px; height: 16px; }

.plate--rubber { --c: #1a1d22; --glow: rgba(26, 29, 34, 0.5); }
.plate--green  { --c: #D7261E; --glow: rgba(215, 38, 30, 0.6); }
.plate--blue   { --c: #FBFBF8; --glow: rgba(251, 251, 248, 0.45); }
.plate--yellow { --c: #D7261E; --glow: rgba(215, 38, 30, 0.6); }
.plate--red    { --c: #1a1d22; --glow: rgba(26, 29, 34, 0.5); }
.plate--chalk  { --c: #FBFBF8; --glow: rgba(251, 251, 248, 0.45); }
.plate--silver { --c: #D7261E; --glow: rgba(215, 38, 30, 0.6); }

.plate span {
  position: relative; padding: 0 4px; color: #6e7580;
  font-size: 10px; font-weight: 700;
  transition: color .2s ease;
}

/* hover: plate lifts off the bar */
.plate:hover .plate__disc {
  transform: translateY(-3px) scale(1.08);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.65)) drop-shadow(0 0 8px var(--glow));
}
.plate:hover .plate__ic { color: #fff; }
.plate:hover span { color: #d1d5db; }

/* active page: plate glows */
.plate.is-on { color: #fff; }
.plate.is-on .plate__disc {
  filter: drop-shadow(0 0 10px var(--glow)) drop-shadow(0 4px 8px rgba(0,0,0,.6));
}
.plate.is-on .plate__ic {
  color: #fff;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.6));
}
.plate.is-on span {
  color: #fff; font-weight: 800;
}
/* bright active indicator bar on the rail edge */
.plate.is-on::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px;
  background: var(--c); border-radius: 0 4px 4px 0;
  box-shadow: 0 0 10px var(--c), 0 0 4px var(--c);
}

.rail__foot { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; }
.rail__who {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: #1e2228; color: #fff; border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); font: 800 13px var(--body);
}
.rail__out {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px;
  color: #8e95a0; border: 1px solid transparent; transition: all .2s ease;
}
.rail__out:hover { background: #22262d; border-color: rgba(255, 255, 255, 0.12); color: #fff; }
.topline { display: none; }

body.billing { padding-left: 96px; min-height: 100vh; }

/* ---------- page frame ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 26px 28px 70px; }

/* the title plate */
.phead {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-bottom: 22px; padding: 22px 26px 20px;
  background: var(--plate); color: var(--on-plate);
  border: 2px solid var(--rubber); border-radius: 4px; box-shadow: var(--shadow);
}
.phead h1 { margin: 0; font: 900 clamp(46px, 7vw, 88px)/.92 var(--display); letter-spacing: .005em; text-transform: uppercase; }
.phead h1 i { font-style: normal; color: inherit; }
.eyebrow { margin: 0 0 6px; font: 600 15px/1.2 var(--body); color: inherit; opacity: .85; text-transform: none; letter-spacing: 0; }
.phead__right { display: flex; align-items: flex-end; gap: 10px; }
.phead .fld > span { color: inherit; opacity: .85; }
.phead .ctl { background: #fff; color: var(--rubber); }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.muted { color: var(--muted); font-size: 13px; }
.muted b { color: var(--rubber); }
.mono { font-variant-numeric: tabular-nums; font-weight: 600; }
.right { text-align: right; }

/* ---------- panels ---------- */
.card { background: var(--chalk); border: 2px solid var(--rubber); border-radius: 4px; box-shadow: var(--shadow); padding: 18px 20px; overflow: hidden; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.card__head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font: 800 26px/1 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.card__head h2::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--plate); box-shadow: 0 0 0 2px var(--rubber); flex: none; }
.card__head .num { display: none; }
.pill { padding: 2px 10px; border: 2px solid var(--rubber); border-radius: 999px; background: #fff; font: 700 12px var(--body); }
.sub { margin: 18px 0 10px; font: 700 14px var(--body); }

/* ---------- forms ---------- */
.fld { display: block; min-width: 0; }
.fld > span { display: block; margin-bottom: 5px; font: 700 13px var(--body); color: #3d4248; }
.req { color: var(--red); }
.ctl {
  width: 100%; height: 46px; padding: 0 12px; background: #fff;
  border: 2px solid var(--rubber); border-radius: 3px; font: 500 15px var(--body);
}
.ctl[readonly] { background: #ECEEEA; }
.ctl:focus { outline: 0; box-shadow: 0 0 0 3px var(--plate), 0 0 0 5px var(--rubber); }
select.ctl { appearance: none; padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--rubber) 50%), linear-gradient(135deg, var(--rubber) 50%, transparent 50%);
  background-position: calc(100% - 17px) 20px, calc(100% - 12px) 20px; background-size: 5px 5px; background-repeat: no-repeat; }
input[type=file].ctl { height: auto; min-height: 46px; padding: 8px 10px; font-size: 13px; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.check { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 2px solid var(--rubber); border-radius: 3px; background: #fff; font-weight: 600; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--plate, var(--rubber)); }

.seg3 { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 2px solid var(--rubber); border-radius: 3px; overflow: hidden; background: #fff; }
.seg3 label { position: relative; display: flex; align-items: center; justify-content: center; height: 42px; font: 700 14px var(--body); cursor: pointer; text-align: center; padding: 0 6px; }
.seg3 label + label { border-left: 2px solid var(--rubber); }
.seg3 input { position: absolute; opacity: 0; pointer-events: none; }
.seg3 label:has(input:checked) { background: var(--rubber); color: #fff; }
.seg3 label:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: -3px; }

.who { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px dashed var(--rubber); border-radius: 4px; background: #fff; min-height: 64px; }
.who__av { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--plate); color: var(--on-plate); box-shadow: 0 0 0 2px var(--rubber); font: 800 20px var(--display); flex: none; }
.who b { display: block; font-size: 16px; }
.who small { display: block; font-size: 12.5px; color: var(--muted); }
.who.is-empty { color: var(--muted); font-size: 14px; }

/* ---------- buttons ---------- */
.ghost, .btn-dark, .btn-red, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 2px solid var(--rubber); border-radius: 3px; font: 800 14px var(--body); text-decoration: none; cursor: pointer;
  box-shadow: 3px 3px 0 var(--rubber); transition: transform .08s ease, box-shadow .08s ease;
}
.ghost { background: var(--chalk); color: var(--rubber); }
.btn-dark { background: var(--rubber); color: #fff; box-shadow: 3px 3px 0 rgba(31,35,40,.35); }
.btn-red, .btn--red { background: var(--plate); color: var(--on-plate); width: 100%; }
.ghost:hover, .btn-dark:hover, .btn-red:hover, .btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--rubber); }
.btn { background: var(--chalk); color: var(--rubber); }
.btn--sm { min-height: 38px; font-size: 13px; }
.btn.btn--red { background: var(--red); color: #fff; }
.btn--block { width: 100%; }
.iconbtn { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--rubber); border-radius: 3px; background: var(--chalk); }

.notice { margin-bottom: 18px; padding: 13px 16px; border: 2px solid var(--rubber); border-left-width: 10px; border-radius: 3px; background: #fff; font-weight: 700; }
.notice.ok  { border-left-color: var(--green); }
.notice.bad { border-left-color: var(--red); }

/* ---------- the summary: a rubber panel with the page's plate on top ---------- */
.sum2 { position: sticky; top: 24px; background: var(--rubber); color: #fff; border: 2px solid var(--rubber); border-top: 12px solid var(--plate); border-radius: 4px; box-shadow: 6px 6px 0 var(--plate); padding: 20px; }
.sum2__eyebrow { display: flex; align-items: center; justify-content: space-between; font: 700 13px var(--body); color: #b9bdc2; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--plate); box-shadow: 0 0 0 2px #fff; }
.sum2__cust { margin-top: 8px; font: 800 36px/1 var(--display); text-transform: uppercase; word-break: break-word; }
.sum2__meta { margin-top: 6px; font-size: 13px; color: #b9bdc2; }
.sum2__rows { margin-top: 16px; border-top: 2px solid #3b4148; }
.sum2__rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 2px solid #3b4148; font-size: 14px; color: #cfd2d6; }
.sum2__rows b { color: #fff; font: 800 22px var(--display); letter-spacing: .02em; }
.sum2__rows .is-bill span { color: #fff; }
.sum2__total { display: flex; justify-content: space-between; align-items: flex-end; padding: 14px 0 4px; }
.sum2__total > span { font: 700 14px var(--body); }
.sum2__total b { font: 900 60px/.9 var(--display); color: #fff; }
.sum2__lbl { display: block; margin: 16px 0 6px; font: 700 13px var(--body); color: #b9bdc2; }
.sum2__paid { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 14px; background: #2b3036; border: 2px solid #4a5058; border-radius: 3px; }
.sum2__paid:focus-within { border-color: var(--plate); box-shadow: 0 0 0 3px var(--plate); }
.sum2__paid span { color: #b9bdc2; font: 700 20px var(--display); }
.sum2__paid input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; text-align: right; color: #fff; font: 800 28px var(--display); }
.sum2__bal { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 12px 14px; background: #2b3036; border-radius: 3px; font-size: 14px; color: #cfd2d6; }
.sum2__bal b { font: 800 30px var(--display); color: #fff; }
.sum2__bal.is-clear b { color: #6fd39b; }
.sum2 .seg3 { background: #2b3036; border-color: #4a5058; }
.sum2 .seg3 label { color: #cfd2d6; }
.sum2 .seg3 label + label { border-left-color: #4a5058; }
.sum2 .seg3 label:has(input:checked) { background: var(--plate); color: var(--on-plate); }
.sum2__save { display: block; width: 100%; margin-top: 20px; min-height: 54px; border: 2px solid #fff; border-radius: 3px; background: var(--plate); color: var(--on-plate); font: 900 22px var(--display); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; box-shadow: 4px 4px 0 rgba(255,255,255,.35); transition: transform .08s, box-shadow .08s; }
.sum2__save:hover { transform: translate(3px, 3px); box-shadow: 1px 1px 0 rgba(255,255,255,.35); }
.sum2__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.sum2__acts a { display: flex; align-items: center; justify-content: center; min-height: 42px; border: 2px solid #4a5058; border-radius: 3px; color: #e6e8ea; font: 700 13px var(--body); text-decoration: none; }
.sum2__acts a:hover { background: #fff; color: var(--rubber); }
.sum2 .check { background: #2b3036; border-color: #4a5058; color: #e6e8ea; }
.sum2 .ctl { background: #2b3036; border-color: #4a5058; color: #fff; }
.sum2 .ctl:focus { box-shadow: 0 0 0 3px var(--plate); }
.sum2__save.is-always { display: block !important; }

/* payment amount */
.card--pay { display: flex; flex-direction: column; gap: 16px; }
.card--pay .card__head { margin-bottom: 0; }
.amt { display: flex; align-items: center; gap: 12px; height: 84px; padding: 0 20px; background: #fff; border: 2px solid var(--rubber); border-radius: 3px; }
.amt:focus-within { box-shadow: 0 0 0 3px var(--plate), 0 0 0 5px var(--rubber); }
.amt i { font: 800 36px var(--display); font-style: normal; color: var(--muted); }
.amt input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 900 56px var(--display); color: var(--rubber); }
.amt input::placeholder { color: #c5c8cc; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -4px; }
.chips button { padding: 6px 14px; border: 2px solid var(--rubber); border-radius: 3px; background: #fff; font: 700 14px var(--body); cursor: pointer; }
.chips button:hover { background: var(--plate); color: var(--on-plate); }
.chips button[hidden] { display: none; }

/* ---------- dashboard ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi { position: relative; background: var(--chalk); border: 2px solid var(--rubber); border-radius: 4px; box-shadow: var(--shadow); padding: 16px 18px 14px; min-width: 0; }
.kpi::before { content: ""; position: absolute; top: 14px; right: 14px; width: 16px; height: 16px; border-radius: 50%; background: var(--c, var(--silver)); box-shadow: 0 0 0 2px var(--rubber); }
.kpi:nth-child(1)::before { --c: var(--green); }
.kpi:nth-child(2)::before { --c: var(--blue); }
.kpi:nth-child(3)::before { --c: var(--yellow); }
.kpi:nth-child(4)::before { --c: var(--red); }
.kpi span { display: block; font: 700 13px var(--body); color: #3d4248; }
.kpi b { display: block; margin-top: 2px; font: 900 clamp(34px, 4vw, 54px)/1 var(--display); letter-spacing: .005em; white-space: nowrap; }
.kpis[style] .kpi b { font-size: clamp(18px, 1.6vw, 26px); }
.kpi.is-dark { background: var(--rubber); color: #fff; }
.kpi.is-dark span { color: #b9bdc2; }
.kpi.is-red b { color: var(--red); }
.kpi.is-dark.is-red b { color: #ff7a73; }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px; background: var(--chalk); border: 2px solid var(--rubber); border-radius: 4px; box-shadow: var(--shadow); text-decoration: none; transition: transform .1s, box-shadow .1s; }
.tile:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(31,35,40,.18); }
.tile__ic { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 8px; border-radius: 50%; background: var(--c); color: var(--ic, #fff); box-shadow: inset 0 0 0 4px rgba(0,0,0,.14), inset 0 0 0 8px var(--c), 0 0 0 2px var(--rubber); }
.tile:nth-child(1) { --c: var(--green); }
.tile:nth-child(2) { --c: var(--blue); }
.tile:nth-child(3) { --c: var(--yellow); --ic: var(--rubber); }
.tile:nth-child(4) { --c: var(--red); }
.tile:nth-child(5) { --c: #fff; --ic: var(--rubber); }
.tile:nth-child(6) { --c: var(--silver); --ic: var(--rubber); }
.tile b { font: 800 28px/1 var(--display); text-transform: uppercase; }
.tile small { font-size: 13.5px; color: var(--muted); }
.tile i { position: absolute; top: 16px; right: 18px; font: 800 22px var(--display); font-style: normal; }

/* ---------- tables ---------- */
.dt-wrap { overflow-x: auto; margin: 0 -20px -18px; border-top: 2px solid var(--rubber); }
.dt { width: 100%; border-collapse: collapse; font-size: 14px; }
.dt th { position: static; padding: 10px 14px; background: var(--rubber); color: #fff; border: 0; font: 700 13px var(--body); text-align: left; white-space: nowrap; }
.dt td { padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dt .r { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.dt .m { font-variant-numeric: tabular-nums; font-size: 13px; }
.dt td:last-child, .dt th:last-child { padding-right: 22px; }
.dt tr.grp td { padding: 7px 14px; background: #EEF0EC; font: 700 13px var(--body); color: var(--muted); }
.dt tr.grp.mon td { background: var(--plate); color: var(--on-plate); font: 800 20px var(--display); text-transform: uppercase; letter-spacing: .03em; }
.dt tbody tr:not(.grp):hover td { background: #F1F3EF; }
.empty-row td { padding: 32px 14px; text-align: center; color: var(--muted); white-space: normal; }
.pillst { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border: 2px solid var(--rubber); border-radius: 999px; font: 700 12.5px var(--body); text-decoration: none; background: #fff; }
.pillst.ok  { background: var(--green); color: #fff; }
.pillst.due { background: #fff; color: var(--red); border-color: var(--red); }
a.pillst.due:hover { background: var(--red); color: #fff; }

.filters { display: grid; grid-template-columns: 1fr 1fr 1.4fr auto auto; gap: 14px; align-items: end; }
.setup { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 22px; align-items: start; }

/* ---------- sign-in ---------- */
.gate { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--concrete); }
.gate__art { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; padding: clamp(24px, 5vw, 60px); background: var(--rubber) url('../hero-bg.jpg') center/cover no-repeat; color: #fff; }
.gate__art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(31,35,40,.6), rgba(31,35,40,.94) 72%); }
.gate__brand { display: flex; align-items: center; gap: 12px; width: fit-content; text-decoration: none; }
.gate__brand img { width: 44px; height: 44px; padding: 5px; background: var(--chalk); border-radius: 4px; }
.gate__brand b { font: 800 22px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.gate__copy h2 { margin: 0; font: 900 clamp(56px, 9vw, 120px)/.88 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.gate__copy h2 i { font-style: normal; color: inherit; }
.gate__copy p { margin: 16px 0 0; max-width: 40ch; color: #d8dbde; font-size: 16px; }
.stackbar { display: flex; align-items: center; height: 120px; margin-top: 22px; }
.stackbar::before, .stackbar::after { content: ""; display: block; height: 10px; background: linear-gradient(180deg, #d7dadd, #6f757c); }
.stackbar::before { width: 18px; }
.stackbar::after { width: 160px; border-radius: 0 5px 5px 0; }
.stackbar i { display: block; border-radius: 3px; box-shadow: 0 0 0 2px #fff; margin-right: 2px; }
.stackbar i:nth-child(1) { width: 26px; height: 120px; background: var(--red); }
.stackbar i:nth-child(2) { width: 22px; height: 120px; background: var(--blue); }
.stackbar i:nth-child(3) { width: 18px; height: 120px; background: var(--yellow); }
.stackbar i:nth-child(4) { width: 14px; height: 120px; background: var(--green); }
.stackbar i:nth-child(5) { width: 10px; height: 96px;  background: #fff; }
.gate__foot { font-size: 12.5px; color: #b9bdc2; }
.gate__form { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 6vw, 72px); }
.gate__form h1 { margin: 0 0 4px; font: 900 56px/1 var(--display); text-transform: uppercase; }
.gate__form .sub { margin: 0 0 26px; color: var(--muted); font-weight: 600; }
.gate__form form { display: flex; flex-direction: column; gap: 18px; max-width: 400px; }
.gate__err { padding: 12px 14px; border: 2px solid var(--rubber); border-left: 10px solid var(--red); background: #fff; font-weight: 700; }
.gate__links { display: flex; gap: 10px; margin-top: 22px; }
.field { min-width: 0; }
.lbl { display: block; margin: 0 0 5px; font: 700 13px var(--body); color: #3d4248; }
.in { width: 100%; height: 50px; padding: 0 14px; background: #fff; border: 2px solid var(--rubber); border-radius: 3px; font: 500 16px var(--body); }
.in:focus { outline: 0; box-shadow: 0 0 0 3px var(--red), 0 0 0 5px var(--rubber); }
.pw { position: relative; }
.pw .in { padding-right: 70px; }
.pw button { position: absolute; right: 6px; top: 7px; height: 36px; padding: 0 10px; border: 0; background: transparent; font: 800 12px var(--body); cursor: pointer; }
@media (max-width: 860px) { .gate { grid-template-columns: 1fr; } .gate__art { min-height: 46vh; } .stackbar { height: 80px; } .stackbar i { height: 80px !important; } .stackbar i:nth-child(5) { height: 64px !important; } }

/* ---------- tablet / phone ---------- */
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .sum2 { position: static; }
  .setup { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis[style] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { grid-template-columns: 1fr 1fr; }
  .filters > :nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  body.billing { padding-left: 0; padding-bottom: 80px; }
  .rail {
    inset: auto 0 0 0; width: 100%; height: 76px; flex-direction: row; padding: 0 4px;
    border-right: none; border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
  }
  .rail__brand, .rail__foot { display: none; }
  .rail__bar {
    flex-direction: row; justify-content: space-around; gap: 0; margin: 0; height: 100%; align-items: center;
  }
  /* horizontal barbell bar */
  .rail__bar::before {
    top: 50%; bottom: auto; left: 6px; right: 6px; width: auto; height: 8px;
    transform: translateY(-50%);
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,.1) 0 1.5px, transparent 1.5px 3.5px),
      linear-gradient(180deg, #3a3f46 0%, #b0b7c0 18%, #e2e6ea 35%, #c0c6cc 50%, #8a9099 72%, #4d545c 100%);
  }
  .rail__bar::after {
    top: 50%; left: 0; width: 8px; height: 14px;
    transform: translateY(-50%) translateX(0);
    background: linear-gradient(180deg, #6c727a, #d7dadd 40%, #9aa0a6);
  }
  .plate { width: auto; flex: 1; padding: 2px 0; font-size: 9px; gap: 1px; }
  .plate span { padding: 0 2px; font-size: 8.5px; }
  .plate__disc { width: 42px; height: 42px; }
  .plate__ic svg { width: 13px; height: 13px; }
  .plate.is-on::before {
    left: 20%; right: 20%; top: auto; bottom: 0; width: auto; height: 3px;
    border-radius: 3px 3px 0 0;
  }
  .topline { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--rubber); color: #fff; }
  .topline__brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: 1; min-width: 0; }
  .topline__brand img { width: 30px; height: 30px; padding: 3px; background: var(--chalk); border-radius: 4px; }
  .topline__brand b { font: 800 19px var(--display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topline__user { font-size: 12px; color: #b9bdc2; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topline__out { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid #4a5058; border-radius: 4px; }
  .wrap { padding: 16px 14px 24px; }
  .phead { padding: 16px 16px 14px; margin-bottom: 16px; }
  .phead h1 { font-size: clamp(40px, 13vw, 60px); }
  .phead__right { width: 100%; justify-content: space-between; }
  .phead__right .fld { flex: 1; }
  .card { padding: 16px 14px; }
  .dt-wrap { margin: 0 -14px -16px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tile { padding: 14px; }
  .tile small { display: none; }
  .tile b { font-size: 24px; }
  .kpi b { font-size: 40px; }
  .amt { height: 72px; } .amt input { font-size: 44px; }
  .sum2__cust { font-size: 30px; } .sum2__total b { font-size: 50px; }
  /* dues table -> cards */
  .dt thead { display: none; }
  .dt, .dt tbody { display: block; width: 100%; }
  .dt tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 14px; border-bottom: 2px solid var(--line); }
  .dt td { display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; white-space: normal; min-width: 0; }
  .dt td::before { content: attr(data-label); font: 700 12px var(--body); color: var(--muted); }
  .dt td.name { grid-column: 1 / -1; order: -1; font-size: 17px; }
  .dt td.name::before { display: none; }
  .dt .r { text-align: left; }
  .dt tr.grp { display: block; padding: 0; border: 0; }
  .dt tr.grp td { display: block; padding: 8px 14px; }
  .dt tr.grp td::before { display: none; }
  .dt tr.empty-row { display: block; }
  .dt tr.empty-row td::before { display: none; }
  .filters { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* equipment drawn on the staff pages */
.phead { position: relative; overflow: hidden; }
.phead__bar { position: absolute; right: -40px; bottom: 6px; width: min(46%, 520px); height: auto; opacity: .9; pointer-events: none; }
.gate__plates { display: flex; margin-top: 22px; }
.gate__plates svg { width: 120px; height: 120px; margin-right: -34px; filter: drop-shadow(4px 6px 0 rgba(0,0,0,.35)); }
@media (max-width: 760px) { .phead__bar { display: none; } .gate__plates svg { width: 84px; height: 84px; margin-right: -24px; } }


/* ---------- dashboard ---------- */
.dash { max-width: 1240px; margin: 0 auto; padding: 26px 28px 70px; }
.dash-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.dash-top small { display: block; font: 800 12px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dash-top h1 { margin: 2px 0 0; font: 900 clamp(44px, 6vw, 70px)/.9 var(--display); text-transform: uppercase; }
.dash-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-search { position: relative; }
.dash-search input { width: 320px; max-width: 100%; height: 44px; padding: 0 14px 0 38px; border: 1px solid #cfd3cd; border-radius: 10px; background: #fff; font: 500 14px var(--body); }
.dash-search svg { position: absolute; left: 12px; top: 13px; color: var(--muted); }
.dash-search input:focus { outline: 2px solid var(--rubber); outline-offset: 1px; }
.dbtn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 10px; font: 800 14px var(--body); text-decoration: none; white-space: nowrap; }
.dbtn--dark { background: var(--rubber); color: #fff; }
.dbtn--yellow { background: var(--yellow); color: var(--rubber); }
.dbtn:hover { filter: brightness(1.12); }

.dkpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.dkpi { position: relative; padding: 16px 18px 14px; background: #fff; border: 1px solid #d3d7d1; border-radius: 12px; }
.dkpi span { display: flex; align-items: center; gap: 8px; font: 700 13px var(--body); color: var(--muted); }
.dkpi span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--rubber)); }
.dkpi b { display: block; margin: 8px 0 2px; font: 900 clamp(34px, 3.4vw, 46px)/1 var(--display); }
.dkpi small { font-size: 12.5px; color: var(--muted); }
.dkpi:nth-child(1) { --dot: var(--green); } .dkpi:nth-child(2) { --dot: var(--blue); } .dkpi:nth-child(3) { --dot: var(--yellow); }
.dkpi--red { --dot: var(--red); background: #fdf1ef; border-color: #f0c6c1; }
.dkpi--red b { color: #b3201a; }

.dfee { margin-bottom: 16px; padding: 22px 26px 20px; background: #15181b; color: #fff; border-radius: 12px; }
.dfee__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.dfee h2 { margin: 0; font: 900 26px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.dfee p { margin: 0; font-size: 14px; color: #c3c7cb; } .dfee p b { color: #fff; }
.dfee__bar { display: flex; align-items: center; margin: 18px 0 14px; }
.dfee__pl { flex: none; display: flex; align-items: center; gap: 2px; }
.dfee__pl i { display: block; width: 9px; border-radius: 2px; }
.dfee__pl.r { flex-direction: row-reverse; }
.dfee__pl i:nth-child(1) { height: 44px; background: var(--red); } .dfee__pl i:nth-child(2) { height: 38px; background: var(--blue); }
.dfee__pl i:nth-child(3) { height: 32px; background: var(--yellow); } .dfee__pl i:nth-child(4) { height: 26px; background: var(--green); }
.dfee__cap { width: 14px; height: 10px; background: linear-gradient(180deg,#e9ecef,#7d838a); border-radius: 2px; }
.dfee__track { flex: 1; height: 9px; margin: 0 2px; background: #3a3f46; border-radius: 2px; overflow: hidden; }
.dfee__track i { display: block; height: 100%; background: var(--yellow); }
.dfee__leg { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: #c3c7cb; }
.dfee__leg span::before { content: ""; display: inline-block; width: 12px; height: 7px; margin-right: 7px; border-radius: 2px; background: var(--yellow); }
.dfee__leg span + span::before { background: #4a5058; }

.dcols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-bottom: 16px; }
.dcard { background: #fff; border: 1px solid #d3d7d1; border-radius: 12px; padding: 18px 20px 14px; min-width: 0; }
.dcard__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.dcard h2 { margin: 0; font: 900 22px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.dcard__head a { font: 800 13px var(--body); text-decoration: none; border-bottom: 2px solid var(--rubber); }

.dtbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.dtbl th { padding: 8px 6px; font: 800 11.5px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: left; border-bottom: 1px solid #e3e6e1; }
.dtbl td { padding: 11px 6px; border-bottom: 1px solid #eceee9; vertical-align: middle; }
.dtbl tr:last-child td { border-bottom: 0; }
.dtbl .r { text-align: right; }
.dtbl .nm b { font-weight: 800; }
.dtbl .due { font-weight: 800; color: #b3201a; }
.dtbl .mut { color: var(--muted); }
.mode { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #e9efe8; font: 700 12px var(--body); }
.dcollect { display: inline-block; padding: 6px 14px; border-radius: 8px; background: #eef0ec; font: 800 12.5px var(--body); text-decoration: none; }
.dcollect:hover { background: var(--rubber); color: #fff; }
.dempty { padding: 18px 6px; color: var(--muted); }

.dqa { display: grid; }
.dqa a { display: flex; align-items: center; gap: 14px; padding: 10px 4px; border-bottom: 1px solid #eceee9; text-decoration: none; }
.dqa a:last-child { border-bottom: 0; }
.dqa a:hover { background: #f6f7f4; }
.dqa__disc {
  position: relative; flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #262b33 0%, #15181d 100%);
  border: 1.5px solid var(--c);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 0 10px var(--glow);
  color: var(--c);
  transition: all .2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dqa__ic { display: grid; place-items: center; width: 100%; height: 100%; }
.dqa a:hover .dqa__disc {
  transform: scale(1.08);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35), 0 0 14px var(--glow);
  filter: brightness(1.15);
}
.dqa b { display: block; font-weight: 800; font-size: 15px; }
.dqa small { color: var(--muted); font-size: 13px; }
.dqa i { margin-left: auto; font-style: normal; color: var(--muted); }

@media (max-width: 1000px) { .dkpis { grid-template-columns: repeat(2, 1fr); } .dcols { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .dash { padding: 16px 16px 40px; }
  .dash-act { width: 100%; } .dash-search { flex: 1 1 100%; } .dash-search input { width: 100%; }
  .dbtn { flex: 1; justify-content: center; }
  .dfee { padding: 18px 16px; }
  .dfee__pl i { width: 7px; }
  .dtbl thead { display: none; }
  .dtbl, .dtbl tbody, .dtbl tr, .dtbl td { display: block; width: 100%; }
  .dtbl tr { padding: 10px 0; border-bottom: 1px solid #eceee9; }
  .dtbl tr:last-child { border-bottom: 0; }
  .dtbl td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  .dtbl td::before { content: attr(data-label); font: 700 12px var(--body); color: var(--muted); text-align: left; }
  .dtbl td.nm { font-size: 16px; }
}
@media (max-width: 760px) {
  .dtbl--owes tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; }
  .dtbl--owes td { display: block; padding: 0; text-align: left; }
  .dtbl--owes td::before { display: none; }
  .dtbl--owes td.nm { grid-column: 1; grid-row: 1; font-size: 16px; }
  .dtbl--owes td.due { grid-column: 2; grid-row: 1; text-align: right; font-size: 16px; }
  .dtbl--owes td.mut { grid-column: 1; grid-row: 2; }
  .dtbl--owes td:last-child { grid-column: 2; grid-row: 2; text-align: right; }
  .dtbl:not(.dtbl--owes) td.nm::before, .dtbl:not(.dtbl--owes) td[data-label="Date"]::before { display: none; }
  .dtbl:not(.dtbl--owes) td.nm { justify-content: flex-start; }
}

/* ============ sidebar: red, white and black ============ */
body.billing { padding-left: 260px; }
.rail { display: none; }
.side { position: fixed; inset: 0 auto 0 0; z-index: 60; width: 260px; display: flex; flex-direction: column; padding: 18px 14px 14px;
  background: #111316; color: #fff; border-right: 1px solid #23272c; overflow-y: auto; }
.side__brand { display: flex; align-items: center; gap: 11px; padding: 2px 6px 18px; text-decoration: none; }
.side__brand img { width: 38px; height: 38px; padding: 4px; background: #fff; border-radius: 8px; }
.side__brand b { display: block; font: 900 19px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.side__brand small { display: block; margin-top: 3px; font-size: 12px; color: #8b9198; }
.side__group { margin: 12px 8px 6px; font: 800 11px var(--body); letter-spacing: .12em; text-transform: uppercase; color: #6c727a; }
.side__nav { display: flex; flex-direction: column; gap: 3px; }
.side__item { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; text-decoration: none; color: #fff; transition: background .15s; }
.side__item:hover { background: #1c1f24; }
.side__ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #4a5058; color: #e6e8ea; }
.side__txt { min-width: 0; flex: 1; }
.side__txt b { display: block; font: 800 14.5px/1.15 var(--body); }
.side__txt small { display: block; font-size: 12px; color: #8b9198; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side__badge { flex: none; min-width: 26px; padding: 2px 8px; border-radius: 999px; background: #2a2e34; font: 800 11.5px var(--body); font-style: normal; text-align: center; color: #e6e8ea; }
.side__badge.is-hot { background: var(--red); color: #fff; }
/* the page you are on: a solid red bar */
.side__item.is-on { background: var(--red); box-shadow: 0 6px 18px rgba(215,38,30,.35); }
.side__item.is-on .side__ic { background: #fff; border-color: #fff; color: var(--red); }
.side__item.is-on .side__txt small { color: rgba(255,255,255,.82); }
.side__item.is-on .side__badge { background: #fff; color: var(--red); }
/* a little loaded bar on the active item */
.side__db { display: flex; align-items: center; gap: 1.5px; }
.side__db s { display: block; width: 3.5px; border-radius: 1px; background: #fff; }
.side__db s:nth-child(1), .side__db s:nth-child(5) { height: 10px; }
.side__db s:nth-child(2), .side__db s:nth-child(4) { height: 16px; background: #111316; }
.side__db s:nth-child(3) { width: 10px; height: 3px; }

.side__fee { margin-top: auto; padding: 14px 14px 12px; border: 1px solid #2a2e34; border-radius: 14px; background: #181b1f; }
.side__feehead { display: flex; align-items: baseline; justify-content: space-between; }
.side__feehead span { font: 800 11px var(--body); letter-spacing: .12em; text-transform: uppercase; color: #8b9198; }
.side__feehead b { font: 900 24px/1 var(--display); color: var(--red); }
.side__bar { display: flex; align-items: center; gap: 2px; margin: 10px 0 8px; }
.side__bar .pl { display: block; width: 4px; height: 16px; border-radius: 1px; background: var(--red); }
.side__bar .pl:nth-of-type(2), .side__bar .pl:nth-of-type(3) { height: 12px; background: #fff; }
.side__bar .tr { flex: 1; height: 5px; border-radius: 3px; background: #33383e; overflow: hidden; }
.side__bar .tr s { display: block; height: 100%; background: linear-gradient(90deg, #fff, var(--red)); }
.side__fee p { margin: 0 0 12px; font-size: 12px; color: #a3a8ae; }
.side__cta { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 10px; background: var(--red); color: #fff; font: 800 13.5px var(--body); text-decoration: none; }
.side__cta:hover { background: #ee2f26; }
.side__user { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 4px 6px; }
.side__who { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #111316; font: 800 13px var(--body); }
.side__mail { flex: 1; min-width: 0; font-size: 12.5px; color: #a3a8ae; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side__user a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: #a3a8ae; }
.side__user a:hover { background: #fff; color: #111316; }
.dock { display: none; }

@media (max-width: 760px) {
  body.billing { padding-left: 0; padding-bottom: 74px; }
  .side { display: none; }
  .topline { background: #111316; }
  .dock { position: fixed; inset: auto 0 0 0; z-index: 60; display: flex; justify-content: space-around; height: 66px; padding: 6px 4px 8px;
    background: #111316; border-top: 2px solid var(--red); }
  .dock__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 10px; color: #a3a8ae; text-decoration: none; font: 700 10.5px var(--body); }
  .dock__item.is-on { background: var(--red); color: #fff; }
}

/* ---------- dashboard in red, white and black ---------- */
.dqa .dqa__ic { display: grid; place-items: center; width: 100%; height: 100%; }
.dqa__disc { background: #15181b; }
.dbtn--red { background: var(--red); color: #fff; }
.dkpi:nth-child(1) { --dot: #15181b; } .dkpi:nth-child(2) { --dot: #9aa0a6; } .dkpi:nth-child(3) { --dot: var(--red); }
.dfee__pl i:nth-child(1) { background: var(--red); } .dfee__pl i:nth-child(2) { background: #fff; }
.dfee__pl i:nth-child(3) { background: var(--red); } .dfee__pl i:nth-child(4) { background: #fff; }
.dfee__track i { background: linear-gradient(90deg, #fff, var(--red)); }
.dfee__leg span::before { background: var(--red); }
.mode { background: #f1e3e1; color: #8f1a14; }

/* sidebar: never show a scrollbar; tighten up on shorter screens so it all fits */
.side { scrollbar-width: none; -ms-overflow-style: none; }
.side::-webkit-scrollbar { display: none; }
@media (max-height: 920px) {
  .side { padding-top: 12px; padding-bottom: 10px; }
  .side__brand { padding-bottom: 8px; }
  .side__group { margin: 6px 8px 3px; }
  .side__nav { gap: 1px; }
  .side__item { padding: 6px 10px; }
  .side__ic { width: 32px; height: 32px; }
  .side__fee { padding: 10px 12px; }
  .side__bar { margin: 6px 0 5px; }
  .side__fee p { margin-bottom: 8px; }
  .side__cta { height: 36px; }
  .side__user { margin-top: 6px; }
}
@media (max-height: 760px) {
  .side__txt small, .side__fee p { display: none; }
}

/* ---------- sidebar opens on hover: icons only until the pointer (or keyboard focus) arrives ---------- */
@media (min-width: 761px) {
  body.billing { padding-left: 84px; }
  .side { width: 84px; overflow-x: hidden; transition: width .22s ease, box-shadow .22s ease; }
  .side:hover, .side:focus-within { width: 264px; box-shadow: 14px 0 40px rgba(0,0,0,.45); }
  .side__brand span, .side__group, .side__txt, .side__db, .side__mail, .side__user a, .side__feehead, .side__bar, .side__fee p {
    white-space: nowrap; transition: opacity .15s ease; }
  .side:not(:hover):not(:focus-within) :is(.side__brand span, .side__txt, .side__db, .side__mail, .side__user a) { opacity: 0; pointer-events: none; }
  .side:not(:hover):not(:focus-within) .side__group { opacity: 0; }
  /* collapsed: badges ride on the icon */
  .side:not(:hover):not(:focus-within) .side__badge { position: absolute; left: 36px; top: 3px; min-width: 18px; padding: 1px 5px; font-size: 10px; }
  /* collapsed: the collection card shrinks to its button */
  .side:not(:hover):not(:focus-within) .side__fee { padding: 0; border-color: transparent; background: none; }
  .side:not(:hover):not(:focus-within) :is(.side__feehead, .side__bar, .side__fee p) { display: none; }
  .side:not(:hover):not(:focus-within) .side__cta { width: 56px; height: 44px; font-size: 0; gap: 0; }
}
@media (min-width: 761px) and (prefers-reduced-motion: reduce) { .side { transition: none; } }

/* BMI colour scale on the registration page */
.bmiscale { position: relative; margin-top: 16px; padding: 18px 16px 12px; border: 2px solid var(--rubber); border-radius: 4px; background: #fff; }
.bmiscale__mark { position: absolute; top: 4px; width: 0; height: 0; margin-left: -6px; border: 6px solid transparent; border-top: 8px solid var(--rubber); border-bottom: 0; transition: left .3s ease; }
.bmiscale__bar, .bmiscale__ticks { display: grid; grid-template-columns: 6.5fr 6.5fr 5fr 10fr; gap: 3px; }
.bmiscale__bar s { height: 9px; border-radius: 5px; }
.bmiscale__bar s:nth-child(1) { background: #3b82f6; } .bmiscale__bar s:nth-child(2) { background: #22c55e; }
.bmiscale__bar s:nth-child(3) { background: #f5b301; } .bmiscale__bar s:nth-child(4) { background: #ef4444; }
.bmiscale__ticks { margin-top: 6px; font-size: 12px; color: var(--muted); }
.bmiscale p { margin: 10px 0 0; font-size: 14px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .bmiscale__mark { transition: none; } }

/* ---------- attendance ---------- */
.att-clock { text-align: right; }
.att-clock b { display: block; font: 900 clamp(40px, 5vw, 64px)/.9 var(--display); }
.att-clock span { font-size: 13px; opacity: .8; }
.att-preview { margin-bottom: 16px; }
.att-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: stretch; }
.att-form { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.att-form .ctl { height: 54px; font-size: 18px; }
.att-go { height: 54px; padding: 0 26px; border: 2px solid var(--rubber); border-radius: 4px; background: var(--red); color: #fff; font: 800 22px var(--display); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; box-shadow: 3px 3px 0 var(--rubber); }
.att-go.is-out { background: var(--rubber); }
.att-go:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--rubber); }
.att-hint { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.att-who { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px 14px; border: 2px solid var(--rubber); border-radius: 4px; background: #fff; }
.att-who b { display: block; font-size: 16px; } .att-who small { color: var(--muted); }
.att-who .pillst { margin-left: auto; font-style: normal; }
.att-ini { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--rubber); color: #fff; font: 800 20px var(--display); }
.att-ini.sm { width: 34px; height: 34px; font-size: 16px; }
.att-flash { min-height: 0; margin-top: 0; font-weight: 700; font-size: 14px; color: var(--green); opacity: 0; transition: opacity .2s; }
.att-flash.show { opacity: 1; margin-top: 10px; }
.att-flash.bad { color: var(--red); }
.att-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; margin: 0; }
.att-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.att-filter { width: auto; }
.att-filter label { padding: 0 14px; }
button.pillst { cursor: pointer; font-family: var(--body); }
.att-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 170px; align-items: end; }
.att-week > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; }
.att-week i { display: block; width: 100%; max-width: 30px; border-radius: 3px 3px 0 0; background: var(--rubber); }
.att-week b { font: 800 14px var(--display); }
.att-week span { font: 700 12px var(--body); color: var(--muted); }
.att-week .is-today i { background: var(--red); }
.att-week .is-today span { color: var(--red); }
.att-week .is-future i { background: #d5d8d3; }
.att-miss { margin: 0; padding: 0; list-style: none; }
.att-miss li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.att-miss li:last-child { border-bottom: 0; }
.att-miss b { display: block; font-size: 14px; } .att-miss small { color: var(--muted); font-size: 12.5px; }
.att-miss a { margin-left: auto; font: 700 12.5px var(--body); text-decoration: none; border-bottom: 2px solid var(--red); }
@media (max-width: 1100px) { .att-top, .att-cols { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .att-form { grid-template-columns: 1fr; }
  .att-clock { text-align: left; }
  .card__head:has(.att-filter) { flex-wrap: wrap; }
}
.att-who[hidden] { display: none; }

/* ---------- staff ---------- */
.stf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.stf-grid.is-solo { grid-template-columns: minmax(0, 420px); }
.stf-side { display: flex; flex-direction: column; gap: 16px; }
.stf-table td { vertical-align: middle; }
.stf-table tr.is-off td { color: var(--muted); }
.stf-you { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--rubber); color: #fff; font: 700 11px var(--body); font-style: normal; }
.stf-inline { display: inline; margin: 0; }
.stf-sel { height: 34px; padding: 0 30px 0 10px; font-size: 13.5px; min-width: 130px; }
.stf-acts { white-space: nowrap; }
.stf-acts > * { margin-left: 10px; }
.stf-reset { display: inline-block; position: relative; }
.stf-reset summary { cursor: pointer; font: 700 13px var(--body); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.stf-reset summary::-webkit-details-marker { display: none; }
.stf-reset[open] form { position: absolute; right: 0; top: 26px; z-index: 5; display: flex; gap: 8px; padding: 10px; background: #fff; border: 2px solid var(--rubber); border-radius: 4px; box-shadow: var(--shadow); }
.stf-reset form .ctl { width: 180px; height: 38px; }
.stf-link { border: 0; background: none; padding: 0; font: 700 13px var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--rubber); }
.stf-link.is-red { color: var(--red); }
a.side__mail, a.topline__user { text-decoration: none; }
a.side__mail:hover, a.topline__user:hover { text-decoration: underline; }
@media (max-width: 1100px) { .stf-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .stf-acts { white-space: normal; }
  .stf-acts > * { margin: 6px 12px 0 0; }
  .stf-reset[open] form { position: static; margin-top: 8px; }
}
.stf-you { display: inline-block !important; width: auto !important; }

/* ---------- page loading bar + spinner on the clicked menu item ---------- */
.pgload { position: fixed; inset: 0 0 auto 0; z-index: 999; height: 3px; pointer-events: none; }
.pgload[hidden] { display: none; }
.pgload i { display: block; height: 100%; width: 0; background: var(--red); box-shadow: 0 0 10px var(--red), 0 0 4px var(--red); }
.pgload.is-go i { animation: pgload 8s cubic-bezier(.08,.8,.2,1) forwards; }
@keyframes pgload { 0% { width: 0; } 10% { width: 35%; } 40% { width: 65%; } 100% { width: 92%; } }
.pg-busy, .pg-busy * { cursor: progress; }
.side__item.is-loading .side__ic svg, .dock__item.is-loading svg { visibility: hidden; }
.side__item.is-loading .side__ic, .dock__item.is-loading { position: relative; }
.side__item.is-loading .side__ic::after, .dock__item.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent; animation: pgspin .7s linear infinite; }
.side__item.is-loading .side__ic::after { inset: 0; margin: auto; }
.dock__item.is-loading::after { top: 9px; left: calc(50% - 9px); }
@keyframes pgspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pgload.is-go i { animation: none; width: 70%; }
  .side__item.is-loading .side__ic::after, .dock__item.is-loading::after { animation-duration: 2s; }
}

/* ---------- member picker (payment page) ---------- */
.pick { position: relative; }
.pick .ctl { padding-right: 40px; }
.pick__caret { position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--rubber); border-bottom: 2px solid var(--rubber); transform: rotate(45deg); pointer-events: none; }
.pick__list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; max-height: 320px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: #fff; border: 2px solid var(--rubber); border-radius: 6px; box-shadow: 0 16px 34px rgba(0,0,0,.18); }
.pick__list[hidden] { display: none; }
.pick__list li[data-id] { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 4px; cursor: pointer; }
.pick__list li[data-id]:hover, .pick__list li.is-act { background: #FBEAEA; }
.pick__av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--rubber); color: #fff; font: 800 15px var(--display); }
.pick__txt { flex: 1; min-width: 0; }
.pick__txt b { display: block; font-size: 15px; text-transform: capitalize; }
.pick__txt small { display: block; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pick__due { flex: none; padding: 2px 9px; border-radius: 999px; background: #EEF0EC; font: 700 12px var(--body); }
.pick__due.is-due { background: #FBEAEA; color: var(--red); }
.pick__none { padding: 12px; color: var(--muted); }
.card:has(.pick) { overflow: visible; }

.sum2__save.is-busy { opacity: .85; cursor: progress; }
.card:has(.pick) { overflow: visible; }

/* ---------- rebuild: small additions (same red / white / black look) ---------- */
.sum2 .ctl.dark { background: #1E1E1C; border-color: #34342f; color: #fff; }
.sum2__disc { width: 80px; padding: 2px 6px; border: 1px solid #34342f; border-radius: 3px; background: #1E1E1C; color: #fff; font: inherit; text-align: right; }
.tag-st { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font: 700 12px var(--body); white-space: nowrap; }
.tag-st.active { background: #EEF0EC; color: var(--rubber); }
.tag-st.expiring { background: #FFF1D6; color: #8a5a00; }
.tag-st.expired, .tag-st.due { background: #FBEAEA; color: var(--red); }
.tag-st.none { background: #F1F1EF; color: var(--muted); }
.rate-row input.ctl { height: 38px; }
.inline-form { display: inline; }
.link-btn { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.facts { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; margin: 0; font-size: 14px; }
.facts dt { color: var(--muted); font-weight: 600; }
.facts dd { margin: 0; word-break: break-word; }
/* action buttons sitting on the dark title plate (member profile, members list) */
.phead .head-btn { width: auto; min-height: 42px; white-space: nowrap; background: var(--red); color: #fff; border-color: #fff; box-shadow: 3px 3px 0 rgba(255,255,255,.35); }
.phead .head-btn.alt { background: #fff; color: var(--rubber); }
.kpi .tag-st { display: inline-flex; width: auto; }
.layout--profile { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1100px) { .layout--profile { grid-template-columns: 1fr; } }
/* dashboard search uses the same picker; its list is wider than the box */
.dash-pick { flex: 0 1 auto; }
.dash-pick .pick__list { left: auto; right: 0; width: min(420px, calc(100vw - 32px)); }
.dash-pick .ctl, .dash-pick input { padding-right: 14px; }
@media (max-width: 760px) { .dash-pick { flex: 1 1 100%; } .dash-pick .pick__list { left: 0; width: auto; } }
/* registration city suggestions: plain rows, no avatar */
.pick--plain .pick__list li[data-id] { padding: 8px 10px; }
.dash-pick .dash-search { display: block; }
.dash-pick .pick__txt small { display: block; font: 400 12.5px var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); }