/* ============================================================================
   Leader Gym — application design system
   Anton headlines, Oswald labels,
   Work Sans body, near-black panels, gold accent, sharp 2px corners,
   hairline grids and dashed seal rings.
   ========================================================================== */

:root{
  /* Tells the browser to render its own widgets dark: select popups, date
     pickers, scrollbars and checkboxes. Without it Chrome draws the dropdown
     list on white, and our light option text disappears into it. */
  color-scheme:dark;
  accent-color:#f0c419;

  --void:#0b0b0c; --panel:#151517; --panel-2:#1c1c1f; --panel-3:#232326;
  --line:#2a2a2d; --line-2:#3a3a3e;
  --gold:#f0c419; --gold-2:#ffd84a; --gold-dim:#a37c08;
  --bone:#f2efe9; --steel:#8b8b88; --mute:#5f5f5c;
  --good:#5fd8a0; --warn:#e8823a; --bad:#e2685f;
  --sidebar:264px;
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{margin:0; padding:0; box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--void); color:var(--bone);
  font-family:'Work Sans',sans-serif; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
button{font:inherit; cursor:pointer;}

h1,h2,h3,.display{
  font-family:'Anton',sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.01em; line-height:.95;
}
.eyebrow{
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.28em; font-size:.7rem; color:var(--gold);
}
.oswald{font-family:'Oswald',sans-serif;}
.num{font-family:'Anton',sans-serif; letter-spacing:.01em;}

/* ---------------------------------------------------------------- shell --- */
.shell{display:flex; min-height:100vh;}

.sidebar{
  width:var(--sidebar); flex-shrink:0; position:fixed; top:0; bottom:0; left:0;
  background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; z-index:60;
}
.side-brand{
  display:flex; align-items:center; gap:12px;
  padding:20px 22px; border-bottom:1px solid var(--line);
}
/* The crest need not be square, so never force it — contain keeps it undistorted. */
.crest{object-fit:contain; flex-shrink:0;}
.side-brand .crest{width:42px; height:42px;}
.side-brand .bt{
  font-family:'Oswald',sans-serif; font-weight:700; font-size:.9rem;
  letter-spacing:.04em; text-transform:uppercase; line-height:1.25;
}
.side-brand .bt span{
  display:block; font-size:.58rem; color:var(--steel);
  letter-spacing:.2em; font-weight:500;
}
.side-nav{padding:16px 12px; flex:1; overflow-y:auto;}
.side-label{
  font-family:'Oswald',sans-serif; font-size:.6rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mute); padding:14px 10px 8px;
}
.side-link{
  display:flex; align-items:center; gap:12px; padding:11px 12px;
  font-family:'Oswald',sans-serif; font-size:.82rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--steel); border-radius:2px;
  border-left:2px solid transparent; transition:all .18s;
}
.side-link:hover{color:var(--bone); background:var(--panel-2);}
.side-link.active{
  color:var(--bone); background:linear-gradient(90deg,rgba(240,196,25,.14),transparent);
  border-left-color:var(--gold);
}
.side-link .ic{width:18px; height:18px; flex-shrink:0;}
.side-link .count{
  margin-left:auto; font-family:'Oswald',sans-serif; font-size:.68rem;
  background:var(--panel-3); color:var(--steel); padding:2px 7px; border-radius:2px;
}
.side-link.active .count{background:var(--gold); color:var(--void);}
.side-foot{border-top:1px solid var(--line); padding:14px 16px;}
.side-user{display:flex; align-items:center; gap:11px; margin-bottom:12px;}
.side-user .who{min-width:0;}
.side-user .who b{
  display:block; font-family:'Oswald',sans-serif; font-size:.82rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.side-user .who span{
  display:block; font-size:.66rem; color:var(--gold);
  text-transform:uppercase; letter-spacing:.12em; font-family:'Oswald',sans-serif;
}

.main{flex:1; min-width:0; margin-left:var(--sidebar); display:flex; flex-direction:column;}
.wrap{max-width:1240px; width:100%; margin:0 auto; padding:0 32px;}

/* -------------------------------------------------------------- top bar --- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,12,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-in{
  max-width:1240px; margin:0 auto; padding:18px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.topbar h1{font-size:1.7rem;}
.topbar .sub{color:var(--steel); font-size:.85rem; margin-top:7px;}
.topbar-actions{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.mobile-brand{display:none;}

.page{padding:34px 0 60px; flex:1;}

/* ------------------------------------------------------------- marquee --- */
.ticker{
  background:var(--panel); border-bottom:1px solid var(--line);
  overflow:hidden; padding:11px 0;
}
.ticker-track{display:flex; width:max-content; animation:tick 34s linear infinite;}
.ticker-track span{
  font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; font-size:.76rem; color:var(--steel);
  padding:0 24px; white-space:nowrap; border-right:1px solid var(--line);
}
.ticker-track span b{color:var(--gold);}
@keyframes tick{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* --------------------------------------------------------- section head --- */
.head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px;}
.head-l{min-width:0;}
.head .eyebrow{display:flex; align-items:center; gap:10px; margin-bottom:11px;}
.head .eyebrow .rule{width:26px; height:1px; background:var(--gold); flex-shrink:0;}
.head h2{font-size:1.45rem;}
.head p{color:var(--steel); margin-top:9px; font-size:.9rem; line-height:1.6; max-width:620px;}
.section{margin-bottom:44px;}

/* ----------------------------------------------------------------- KPI --- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px;
      background:var(--line); border:1px solid var(--line);}
.kpi{background:var(--void); padding:22px 22px 20px; position:relative; transition:background .25s;}
.kpi:hover{background:var(--panel);}
.kpi::before{content:""; position:absolute; top:0; left:0; width:34px; height:2px; background:var(--gold);}
.kpi b{display:block; font-family:'Anton',sans-serif; font-size:2.1rem; line-height:1; color:var(--bone);}
.kpi b.sm{font-family:'Oswald',sans-serif; font-size:1.15rem; font-weight:600;}
.kpi span{
  display:block; margin-top:9px; font-size:.68rem; color:var(--steel);
  letter-spacing:.14em; text-transform:uppercase; font-family:'Oswald',sans-serif;
}
.kpi .delta{margin-top:8px; font-size:.72rem; font-family:'Oswald',sans-serif; letter-spacing:.06em;}
.kpi .delta.up{color:var(--good);} .kpi .delta.down{color:var(--bad);}
.kpi.alert b{color:var(--warn);} .kpi.alert::before{background:var(--warn);}
.kpi.danger b{color:var(--bad);} .kpi.danger::before{background:var(--bad);}

/* ---------------------------------------------------------------- card --- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:2px; padding:22px;}
.card + .card{margin-top:16px;}
.card h3{
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  font-size:.92rem; letter-spacing:.08em; margin-bottom:4px;
}
.card .sub{color:var(--steel); font-size:.85rem; line-height:1.6;}
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line);
}
.card-head h3{margin:0;}
.card.accent{border-left:2px solid var(--gold);}

.cols{display:grid; gap:16px;}
.cols.c2{grid-template-columns:1fr 1fr;}
.cols.c3{grid-template-columns:repeat(3,1fr);}
.cols.side{grid-template-columns:1.6fr 1fr; align-items:start;}
.cols.side-l{grid-template-columns:1fr 1.6fr; align-items:start;}

/* --------------------------------------------------------- hairline grid --- */
.grid-hair{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);}
.grid-hair > *{background:var(--void);}

/* ----------------------------------------------------------- list rows --- */
.rows{border:1px solid var(--line); background:var(--panel);}
.row{
  display:flex; align-items:center; gap:16px; padding:15px 18px;
  border-bottom:1px solid var(--line); transition:background .18s;
}
.row:last-child{border-bottom:none;}
a.row:hover{background:var(--panel-2);}
.row .grow{flex:1; min-width:0;}
.row .rt{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:.95rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.row .rs{color:var(--steel); font-size:.78rem; margin-top:4px;
         white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.row .chev{color:var(--mute); font-size:1.2rem; flex-shrink:0;}
.row-actions{display:flex; gap:8px; flex-shrink:0;}

/* -------------------------------------------------------------- avatar --- */
.avatar{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Anton',sans-serif; font-size:.9rem; color:#180d06;
  background:linear-gradient(145deg,var(--gold-2),var(--gold-dim));
}
.avatar.lg{width:64px; height:64px; font-size:1.3rem;}
.avatar.sm{width:32px; height:32px; font-size:.72rem;}
.avatar.ghost{background:var(--panel-3); color:var(--steel); border:1px dashed var(--line-2);}

/* --------------------------------------------------------------- pills --- */
.pill{
  display:inline-block; font-family:'Oswald',sans-serif; font-size:.62rem;
  text-transform:uppercase; letter-spacing:.12em; padding:4px 9px;
  border-radius:2px; border:1px solid var(--line-2); color:var(--steel);
  white-space:nowrap;
}
.pill.good{border-color:rgba(95,216,160,.4); color:var(--good);}
.pill.warn{border-color:rgba(232,130,58,.4); color:var(--warn);}
.pill.bad{border-color:rgba(226,104,95,.4); color:var(--bad);}
.pill.solid{background:var(--gold); border-color:var(--gold); color:var(--void);}

/* ------------------------------------------------------------- buttons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Oswald',sans-serif; font-weight:700; font-size:.78rem;
  letter-spacing:.08em; text-transform:uppercase; padding:13px 24px;
  border-radius:2px; border:1px solid transparent; transition:all .2s;
}
.btn-primary{background:var(--gold); color:var(--void);}
.btn-primary:hover{background:var(--gold-2); transform:translateY(-1px);}
.btn-ghost{border-color:var(--line-2); color:var(--bone); background:transparent;}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold-2);}
.btn-sm{padding:9px 15px; font-size:.7rem;}
.btn-danger{border-color:rgba(226,104,95,.4); color:var(--bad); background:transparent;}
.btn-danger:hover{border-color:var(--bad); background:rgba(226,104,95,.08);}
.btn-good{border-color:rgba(95,216,160,.4); color:var(--good); background:transparent;}
.btn-good:hover{border-color:var(--good); background:rgba(95,216,160,.08);}
.btn-block{width:100%;}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none;}
.actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}

/* --------------------------------------------------------------- forms --- */
.field{margin-bottom:15px;}
.field label{
  display:block; font-family:'Oswald',sans-serif; font-weight:600; font-size:.66rem;
  text-transform:uppercase; letter-spacing:.16em; color:var(--steel); margin-bottom:7px;
}
.field .opt{color:var(--mute); letter-spacing:.04em; text-transform:none; font-size:.66rem;}
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; border-radius:2px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--bone); font-size:.92rem;
  font-family:'Work Sans',sans-serif; transition:all .18s;
}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--steel) 50%),linear-gradient(135deg,var(--steel) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:38px;}
/* Belt and braces for the popup list, for browsers that ignore color-scheme. */
.field select option,
.field select optgroup{background:#1c1c1f; color:#f2efe9;}
.field select option:checked{background:#f0c419; color:#0b0b0c;}

.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--gold); background:rgba(240,196,25,.05);
  box-shadow:0 0 0 3px rgba(240,196,25,.1);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field-row.c3{grid-template-columns:repeat(3,1fr);}

.search{position:relative;}
.search input{padding-left:42px;}
.search .ic{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--mute);}

/* ---------------------------------------------------------------- tabs --- */
.tabs{display:flex; gap:0; border-bottom:1px solid var(--line); margin-bottom:22px;}
.tab{
  padding:12px 20px; font-family:'Oswald',sans-serif; font-weight:600; font-size:.8rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--steel);
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .18s;
  display:inline-flex; align-items:center; gap:8px;
}
.tab:hover{color:var(--bone);}
.tab.active{color:var(--gold); border-bottom-color:var(--gold);}
.tab-count{
  font-size:.66rem; padding:1px 7px; border-radius:2px;
  background:var(--panel-3); color:var(--steel); margin-inline-start:2px;
}
.tab.active .tab-count{background:var(--gold); color:var(--void);}

/* ---------------------------------------------------------------- plan --- */
.plan-editor{
  width:100%; padding:18px; border-radius:2px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--bone); resize:vertical; min-height:420px;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.86rem; line-height:1.75; transition:all .18s;
}
.plan-editor:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(240,196,25,.1); background:rgba(240,196,25,.03);
}
.plan-doc{
  white-space:pre-wrap; overflow-wrap:break-word;
  font-size:.95rem; line-height:1.9; color:var(--bone);
}
.plan-doc-wrap{border-left:2px solid var(--gold); padding-left:20px;}
.plan-meta{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  color:var(--steel); font-size:.78rem; margin-bottom:16px;
}

/* -------------------------------------------------------------- charts --- */
.chart{width:100%; display:block; overflow:visible;}
.chart .bar{fill:var(--gold-dim); transition:fill .2s;}
.chart .bar:hover{fill:var(--gold-2);}
.chart .bar.zero{fill:var(--panel-3);}
.chart .grid-line{stroke:var(--line); stroke-width:1;}
.chart .axis{fill:var(--mute); font-family:'Oswald',sans-serif; font-size:9px; letter-spacing:.08em;}
.chart .line{fill:none; stroke:var(--gold); stroke-width:2; stroke-linejoin:round; stroke-linecap:round;}
.chart .area{fill:url(#chartFade);}
.chart .dot{fill:var(--gold-2); stroke:var(--void); stroke-width:2;}
.chart-legend{display:flex; gap:18px; flex-wrap:wrap; color:var(--steel);
  font-size:.72rem; font-family:'Oswald',sans-serif; letter-spacing:.08em;
  text-transform:uppercase; margin-top:12px;}

.meter{height:5px; background:var(--panel-3); border-radius:2px; overflow:hidden; margin-top:10px;}
.meter i{display:block; height:100%; background:linear-gradient(90deg,var(--gold-dim),var(--gold-2));}
.meter.good i{background:var(--good);} .meter.warn i{background:var(--warn);} .meter.bad i{background:var(--bad);}

/* ------------------------------------------------------------ timeline --- */
.timeline{position:relative; padding-left:22px;}
.timeline::before{content:""; position:absolute; left:4px; top:6px; bottom:6px; width:1px; background:var(--line);}
.tl-item{position:relative; padding:0 0 18px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:""; position:absolute; left:-22px; top:5px; width:9px; height:9px;
  border-radius:50%; background:var(--void); border:1px solid var(--gold-dim);
}
.tl-item b{font-family:'Oswald',sans-serif; font-weight:600; font-size:.85rem;}
.tl-item span{display:block; color:var(--steel); font-size:.75rem; margin-top:3px;}

/* --------------------------------------------------------------- misc ---- */
.empty{
  text-align:center; padding:44px 20px; color:var(--steel);
  font-family:'Oswald',sans-serif; font-size:.85rem; letter-spacing:.04em;
  border:1px dashed var(--line); border-radius:2px;
}
.empty::before{content:"○"; display:block; font-size:1.5rem; color:var(--gold-dim); margin-bottom:10px;}

.flash{
  padding:14px 18px; border-radius:2px; margin-bottom:20px;
  font-family:'Oswald',sans-serif; font-size:.85rem; letter-spacing:.03em;
  border:1px solid; animation:rise .3s ease both;
}
.flash.ok{background:rgba(95,216,160,.08); border-color:rgba(95,216,160,.3); color:var(--good);}
.flash.err{background:rgba(226,104,95,.08); border-color:rgba(226,104,95,.3); color:var(--bad);}
.flash.info{background:rgba(240,196,25,.07); border-color:rgba(240,196,25,.25); color:var(--gold-2);}
.flash a{text-decoration:underline;}
@keyframes rise{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

.pw-reveal{
  border:1px dashed var(--gold); background:linear-gradient(180deg,rgba(240,196,25,.08),transparent);
  padding:22px; border-radius:2px; margin-bottom:22px;
}
.pw-reveal .eyebrow{display:block; margin-bottom:14px;}
.pw-creds{display:flex; gap:34px; flex-wrap:wrap; margin:14px 0 12px;}
.pw-creds div span{
  display:block; font-size:.64rem; color:var(--steel); text-transform:uppercase;
  letter-spacing:.16em; font-family:'Oswald',sans-serif; margin-bottom:5px;
}
.pw-creds div b{font-family:'Anton',sans-serif; font-size:1.5rem; color:var(--gold-2); letter-spacing:.02em;}
.pw-note{color:var(--steel); font-size:.78rem; line-height:1.55;}

.kv{display:flex; justify-content:space-between; align-items:baseline; gap:16px;
    padding:11px 0; border-bottom:1px solid var(--line); font-size:.88rem;}
.kv:last-child{border-bottom:none;}
.kv > span{color:var(--steel); flex-shrink:0;}
.kv > b{font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.02em; text-align:right;}

.ic{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7;
    stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;}
.seal-ring{position:absolute; border-radius:50%; border:1px dashed var(--line); pointer-events:none;}
.muted{color:var(--steel);}
.right{text-align:right;}
.nowrap{white-space:nowrap;}
.stack-sm > * + *{margin-top:10px;}

/* --------------------------------------------------------- bottom nav ---- */
.bottom-nav{display:none;}

/* ---------------------------------------------------------- login page --- */
.login-lang{position:absolute; top:20px; inset-inline-end:24px; z-index:5;}
.login{min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr;}
.login-art{
  position:relative; overflow:hidden; border-right:1px solid var(--line);
  background:radial-gradient(circle at 74% 22%, rgba(240,196,25,.18), transparent 46%),var(--void);
  display:flex; flex-direction:column; justify-content:center; padding:70px 64px;
}
.login-art .seal-ring:nth-of-type(1){width:620px; height:620px; top:-200px; right:-190px;}
.login-art .seal-ring:nth-of-type(2){width:440px; height:440px; top:-90px; right:-60px; border-color:rgba(240,196,25,.2);}
.login-art .inner{position:relative; z-index:2; max-width:520px;}
.login-art h1{font-size:clamp(2.4rem,4.4vw,3.9rem); margin:20px 0 24px; line-height:1.02;}
.login-art h1 span{display:block;}          /* one phrase per line */
.login-art h1 .accent{color:var(--gold);}
.login-art p{color:var(--steel); font-size:1rem; line-height:1.7; max-width:430px;}
.login-form{display:flex; align-items:center; justify-content:center; padding:60px 44px; background:var(--panel);}
.login-card{width:100%; max-width:390px;}
.login-logo{width:104px; height:auto; margin-bottom:26px; filter:drop-shadow(0 14px 30px rgba(0,0,0,.6));}
.login-card h2{font-size:1.7rem; margin:8px 0 8px;}
.login-card .lead{color:var(--steel); font-size:.88rem; line-height:1.6; margin-bottom:26px;}
.login-help{margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
  color:var(--steel); font-size:.82rem; line-height:1.65;}
.login-help b{color:var(--bone);}

/* -------------------------------------------------- stepped create form --- */
.new-account{padding:0; overflow:hidden;}
.step{
  display:flex; gap:18px; padding:24px 26px;
  border-bottom:1px solid var(--line); position:relative;
}
.step:last-of-type{border-bottom:none;}
.step-n{
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Anton',sans-serif; font-size:.9rem; line-height:1;
  background:var(--panel-3); color:var(--steel); border:1px solid var(--line-2);
}
.step:focus-within .step-n{background:var(--gold); color:var(--void); border-color:var(--gold);}
.step-body{flex:1; min-width:0;}
.step-body h4{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.14em; color:var(--bone);
  margin:0 0 16px;
}
.step-hint{
  color:var(--steel); font-size:.83rem; line-height:1.6; margin:2px 0 0;
  padding-inline-start:2px; border-inline-start:2px solid var(--gold-dim);
  padding-inline-start:12px;
}
.new-account > .btn{margin:0; border-radius:0; width:100%;}
.btn-lg{padding:18px 28px; font-size:.88rem; letter-spacing:.12em;}
@media (max-width:560px){
  .step{padding:20px 16px; gap:13px;}
  .step-n{width:26px; height:26px; font-size:.78rem;}
}

/* ---------------------------------------------------- permission picker --- */
.perm{
  border:1px solid var(--line-2); border-radius:2px; background:var(--panel-2);
  margin-bottom:16px;
}
.perm > summary{
  list-style:none; cursor:pointer; padding:15px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-family:'Oswald',sans-serif; font-weight:600; font-size:.86rem;
  text-transform:uppercase; letter-spacing:.08em;
}
.perm > summary::-webkit-details-marker{display:none;}
.perm > summary::after{
  content:"▾"; color:var(--steel); font-size:.9rem; transition:transform .2s;
  margin-inline-start:auto;
}
.perm[open] > summary::after{transform:rotate(180deg);}
.perm > summary:hover{background:var(--panel-3);}
.perm-title{display:inline-flex; align-items:center; gap:9px;}
.perm-count{
  font-family:'Oswald',sans-serif; font-size:.72rem; color:var(--steel);
  letter-spacing:.06em; white-space:nowrap;
}
.perm-count b{color:var(--gold-2); font-size:.95rem;}
.perm-blurb{
  color:var(--steel); font-size:.82rem; line-height:1.6;
  padding:0 18px 12px; margin:0;
}
.perm-actions{display:flex; gap:8px; flex-wrap:wrap; padding:0 18px 14px;}
.perm-groups{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:1px; background:var(--line); border-top:1px solid var(--line);
}
.perm-group{
  background:var(--void); border:none; margin:0; padding:0 0 10px;
  display:flex; flex-direction:column;
}
/* A real header bar, so each column reads as its own block */
.perm-group legend{
  padding:0; margin:0; width:100%;
  float:left;                       /* legend ignores width without this */
}
.perm-ghead{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:13px 16px; margin-bottom:6px;
  background:var(--panel); border-bottom:1px solid var(--line);
  font-family:'Oswald',sans-serif; font-weight:600; font-size:.74rem;
  text-transform:uppercase; letter-spacing:.11em; color:var(--bone);
  cursor:pointer; transition:background .18s;
}
.perm-ghead:hover{background:var(--panel-3);}
.perm-ghead .ic{width:15px; height:15px; color:var(--gold);}
.perm-ghead-label{display:inline-flex; align-items:center; gap:8px; min-width:0;}
.perm-gcount{
  margin-inline-start:auto; font-size:.68rem; letter-spacing:.04em;
  color:var(--mute); flex-shrink:0;
}
.perm-gcount.some{color:var(--gold-2);}
.perm-gcount.all{color:var(--good);}

.perm-item{
  padding:8px 16px; align-items:flex-start; gap:11px;
  font-size:.82rem; line-height:1.45; color:var(--steel);
  border-inline-start:2px solid transparent; transition:all .15s;
}
.perm-item input{margin-top:2px; flex-shrink:0;}
.perm-item:hover{color:var(--bone); background:var(--panel-2);}
.perm-item:has(input:checked){color:var(--bone); border-inline-start-color:var(--gold);}

/* ------------------------------------------------------------ entry pass --- */
.pass{text-align:center; padding:20px 0 4px;}
.pass-code span{
  display:block; font-family:'Oswald',sans-serif; font-size:.62rem; color:var(--steel);
  text-transform:uppercase; letter-spacing:.2em; margin-bottom:6px;
}
.pass-code b{
  display:block; font-family:'Anton',sans-serif; font-size:2.4rem; letter-spacing:.16em;
  color:var(--gold-2); line-height:1; margin-bottom:18px;
}
.pass-qr{
  width:220px; height:220px; margin:0 auto; display:block;
  border:6px solid var(--bone); border-radius:2px; background:var(--bone);
  box-shadow:0 14px 34px rgba(0,0,0,.5);
}
.pass-note{color:var(--steel); font-size:.78rem; line-height:1.6; margin:16px auto 0; max-width:290px;}

.upsell{border:1px solid var(--gold-dim);
  background:linear-gradient(180deg, rgba(240,196,25,.08), transparent 55%);}
.ticks{list-style:none; margin:0; padding:0;}
.ticks li{padding:9px 0 9px 26px; position:relative; color:var(--steel); font-size:.88rem;
  border-bottom:1px solid var(--line);}
.ticks li:last-child{border-bottom:none;}
.ticks li::before{content:"✓"; position:absolute; left:0; color:var(--gold-2); font-weight:700;}
[dir="rtl"] .ticks li{padding-left:0; padding-right:26px;}
[dir="rtl"] .ticks li::before{left:auto; right:0;}

.scan-box input{
  font-family:'Anton',sans-serif; font-size:1.5rem; letter-spacing:.18em;
  text-align:center; padding:18px 14px;
}

/* ------------------------------------------------------ personal records --- */
.pr-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);}
.pr{background:var(--void); padding:14px 10px; text-align:center; transition:background .2s;}
.pr:hover{background:var(--panel-2);}
.pr.on{background:linear-gradient(180deg,rgba(240,196,25,.16),transparent);}
.pr b{display:block; font-family:'Anton',sans-serif; font-size:1.35rem; color:var(--gold-2); line-height:1;}
.pr b small{font-family:'Oswald',sans-serif; font-size:.62rem; color:var(--steel); margin-inline-start:3px;}
.pr span{display:block; margin-top:6px; font-size:.66rem; color:var(--steel);
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.06em;}

/* --------------------------------------------------------- progress photos --- */
.photo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:10px;}
.photo{margin:0; border:1px solid var(--line); border-radius:2px; overflow:hidden; background:var(--panel-2);}
.photo img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block; transition:transform .25s;}
.photo:hover img{transform:scale(1.03);}
.photo figcaption{padding:8px 9px; font-size:.68rem; color:var(--steel);
  font-family:'Oswald',sans-serif; letter-spacing:.03em;
  display:flex; align-items:center; justify-content:space-between; gap:6px;}
.linkish{background:none; border:none; color:var(--bad); font-size:.66rem;
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.06em; padding:0;}
.linkish:hover{text-decoration:underline;}
.check{display:flex; align-items:center; gap:9px; color:var(--steel); font-size:.85rem; cursor:pointer;}
.check input{width:16px; height:16px; accent-color:var(--gold);}
.field input[type="file"]{padding:10px; font-size:.82rem;}

/* --------------------------------------------------------- busy heatmap --- */
.heat{border-collapse:separate; border-spacing:3px; width:100%;}
.heat th{
  font-family:'Oswald',sans-serif; font-size:.6rem; font-weight:500; color:var(--mute);
  letter-spacing:.04em; text-align:center; padding:0;
}
.heat th.day{text-align:start; padding-inline-end:8px; white-space:nowrap; color:var(--steel);}
.heat td{height:19px; min-width:15px; border-radius:2px; background:var(--panel-2);}
.heat td.l0{background:var(--panel-2);}
.heat td.l1{background:rgba(240,196,25,.25);}
.heat td.l2{background:rgba(240,196,25,.5);}
.heat td.l3{background:rgba(240,196,25,.75);}
.heat td.l4{background:var(--gold-2);}
.heat-key{display:inline-flex; gap:3px; align-items:center;}
.heat-key i{width:15px; height:12px; border-radius:2px; display:block;}
.heat-key i.l0{background:var(--panel-2);}
.heat-key i.l1{background:rgba(240,196,25,.25);}
.heat-key i.l2{background:rgba(240,196,25,.5);}
.heat-key i.l3{background:rgba(240,196,25,.75);}
.heat-key i.l4{background:var(--gold-2);}

/* -------------------------------------------------------------- receipt --- */
.receipt-page{background:var(--void); padding:30px 16px;}
.receipt{
  max-width:460px; margin:0 auto; background:var(--panel);
  border:1px solid var(--line); border-radius:2px; padding:28px;
}
.receipt-head{display:flex; align-items:center; gap:14px; padding-bottom:18px;
  margin-bottom:18px; border-bottom:1px solid var(--line);}
.receipt-head h2{font-size:1.15rem; font-family:'Oswald',sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;}
.receipt-head .muted{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;}
.receipt-no{margin-inline-start:auto; text-align:end;}
.receipt-no span{display:block; font-size:.6rem; color:var(--steel); text-transform:uppercase;
  letter-spacing:.14em; font-family:'Oswald',sans-serif;}
.receipt-no b{font-family:'Anton',sans-serif; font-size:1.2rem; color:var(--gold-2);}
.receipt-total{
  display:flex; justify-content:space-between; align-items:center; margin-top:18px;
  padding:16px 18px; background:var(--void); border:1px dashed var(--gold); border-radius:2px;
}
.receipt-total span{font-family:'Oswald',sans-serif; text-transform:uppercase;
  letter-spacing:.14em; font-size:.72rem; color:var(--steel);}
.receipt-total b{font-family:'Anton',sans-serif; font-size:1.5rem; color:var(--gold-2);}
.receipt-due{display:flex; justify-content:space-between; margin-top:10px; padding:12px 18px;
  border:1px solid rgba(232,130,58,.35); border-radius:2px; color:var(--warn);
  font-family:'Oswald',sans-serif; font-size:.82rem;}
.receipt-foot{margin-top:20px; text-align:center; color:var(--steel); font-size:.78rem;}
@media print{
  .receipt-page{background:#fff; padding:0;}
  .receipt{border:none; background:#fff; color:#000; max-width:none;}
  .receipt .kv > span, .receipt-head .muted, .receipt-foot{color:#555;}
  .receipt-total{background:#fff; border-color:#000;}
  .receipt-total b, .receipt-no b{color:#000;}
}

/* ------------------------------------------------------ language switch --- */
.lang-toggle{display:inline-flex; border:1px solid var(--line-2); border-radius:2px; overflow:hidden; flex-shrink:0;}
.lang-toggle a{
  padding:8px 12px; font-family:'Oswald',sans-serif; font-weight:600; font-size:.72rem;
  letter-spacing:.1em; color:var(--steel); line-height:1; transition:all .18s;
}
.lang-toggle a + a{border-inline-start:1px solid var(--line-2);}
.lang-toggle a:hover{color:var(--bone); background:var(--panel-2);}
.lang-toggle a.on{background:var(--gold); color:var(--void);}

/* ------------------------------------------------------------ Arabic ------ */
/* Anton and Oswald have no Arabic glyphs, so Cairo carries the whole page.
   Weight, not letterform, has to do the work that Anton did in English. */
[dir="rtl"] body,
[dir="rtl"] .oswald,
[dir="rtl"] .field label,
[dir="rtl"] .btn,
[dir="rtl"] .pill,
[dir="rtl"] .eyebrow,
[dir="rtl"] .side-link,
[dir="rtl"] .tab{font-family:'Cairo',sans-serif;}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .display,
[dir="rtl"] .num,[dir="rtl"] .kpi b,[dir="rtl"] .stat-num,
[dir="rtl"] .pw-creds div b,[dir="rtl"] .login-art h1{
  font-family:'Cairo',sans-serif; font-weight:900; letter-spacing:0; line-height:1.3;
}
[dir="rtl"] .eyebrow{letter-spacing:.06em;}
[dir="rtl"] .side-link,[dir="rtl"] .tab,[dir="rtl"] .btn,[dir="rtl"] .pill{letter-spacing:0;}
[dir="rtl"] .kpi span,[dir="rtl"] .side-label{letter-spacing:.04em;}

/* Mirror the fixed chrome. */
[dir="rtl"] .sidebar{left:auto; right:0; border-right:none; border-left:1px solid var(--line);}
[dir="rtl"] .main{margin-left:0; margin-right:var(--sidebar);}
[dir="rtl"] .side-link{border-left:none; border-right:2px solid transparent;}
[dir="rtl"] .side-link.active{
  border-right-color:var(--gold);
  background:linear-gradient(270deg,rgba(240,196,25,.14),transparent);
}
[dir="rtl"] .side-link .count{margin-left:0; margin-right:auto;}
[dir="rtl"] .kpi::before{left:auto; right:0;}
[dir="rtl"] .card.accent{border-left:1px solid var(--line); border-right:2px solid var(--gold);}
[dir="rtl"] .plan-doc-wrap{border-left:none; border-right:2px solid var(--gold); padding-left:0; padding-right:20px;}
[dir="rtl"] .chev{transform:scaleX(-1);}
[dir="rtl"] .timeline{padding-left:0; padding-right:22px;}
[dir="rtl"] .timeline::before{left:auto; right:4px;}
[dir="rtl"] .tl-item::before{left:auto; right:-22px;}
[dir="rtl"] .search input{padding-left:14px; padding-right:42px;}
[dir="rtl"] .search .ic{left:auto; right:14px;}
[dir="rtl"] .field select{
  background-position:18px 50%, 13px 50%;
  padding-right:14px; padding-left:38px;
}
[dir="rtl"] .meter i{margin-left:auto;}

/* The plan text itself is written by a coach and may be either language;
   let the browser decide per paragraph rather than forcing a direction. */
.plan-doc, .plan-editor{unicode-bidi:plaintext;}
[dir="rtl"] .plan-doc, [dir="rtl"] .plan-editor{text-align:start;}

@media (max-width:900px){
  [dir="rtl"] .main{margin-right:0;}
  [dir="rtl"] .sidebar{border-left:none;}
  [dir="rtl"] .side-link{border-right:none; border-top:2px solid transparent;}
  [dir="rtl"] .side-link.active{border-top-color:var(--gold); background:none;}
}

/* --------------------------------------------------------------- print --- */
@media print{
  .sidebar,.topbar,.bottom-nav,.actions,.tabs,.ticker,.no-print{display:none !important;}
  body{background:#fff; color:#000;}
  .main{margin:0;}
  .card{border:1px solid #ccc; background:#fff;}
  .plan-doc{color:#000;}
}

/* ---------------------------------------------------------- responsive --- */
@media (max-width:1100px){
  .cols.c3{grid-template-columns:1fr 1fr;}
  .cols.side,.cols.side-l{grid-template-columns:1fr;}
}

@media (max-width:900px){
  :root{--sidebar:0px;}
  .sidebar{
    position:fixed; left:0; right:0; top:auto; bottom:0; width:100%;
    flex-direction:row; border-right:none; border-top:1px solid var(--line);
    background:rgba(11,11,12,.96); backdrop-filter:blur(12px);
    padding:8px 6px calc(8px + var(--safe-bottom));
  }
  .side-brand,.side-label,.side-foot,.side-link .count{display:none;}
  /* The owner has more entries than fit across a phone, so the bar scrolls. */
  .side-nav{display:flex; padding:0; flex:1; overflow-x:auto; overflow-y:hidden;
            -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .side-nav::-webkit-scrollbar{display:none;}
  .side-link{
    flex:1 0 auto; min-width:70px; flex-direction:column; gap:5px; padding:7px 6px;
    border-left:none; border-top:2px solid transparent;
    font-size:.58rem; letter-spacing:.06em; text-align:center; white-space:nowrap;
  }
  .side-link.active{background:none; border-left:none; border-top-color:var(--gold); color:var(--gold-2);}
  .side-link .ic{width:19px; height:19px;}
  .main{margin-left:0; padding-bottom:76px;}
  .wrap{padding:0 18px;}
  .topbar-in{padding:15px 18px;}
  .topbar h1{font-size:1.3rem;}
  .mobile-brand{display:block; width:38px; height:38px; object-fit:contain; flex-shrink:0;}
  .cols.c2,.cols.c3{grid-template-columns:1fr;}
  .field-row,.field-row.c3{grid-template-columns:1fr;}
  .login{grid-template-columns:1fr;}
  .login-art{display:none;}
  .login-form{padding:40px 22px; min-height:100vh; background:var(--void);}
  .page{padding:24px 0 40px;}
  .head{flex-direction:column; align-items:flex-start; gap:14px;}
  .kpis{grid-template-columns:1fr 1fr;}
}

@media (max-width:560px){
  .pw-creds{gap:22px;}
  .row{padding:13px 14px; gap:12px;}
  .tabs{overflow-x:auto; scrollbar-width:none;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{padding:11px 15px; white-space:nowrap;}

  /* One ellipsised line is right on a wide desk screen and wrong on a phone:
     .rs carries the code, the expiry and the plan, and only the code survived
     the truncation at this width. Wrap to two lines instead of cutting. */
  .row .rt{white-space:normal; text-overflow:clip; overflow:hidden;
           display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
           line-height:1.3;}
  .row .rs{white-space:normal; text-overflow:clip;
           display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
           overflow:hidden; line-height:1.45; margin-top:5px;}

  /* Everything below was under ~11px, which is small on a phone held at arm's
     length in a gym. Sizes only — weights, tracking and colours are untouched. */
  .kpi{padding:18px 16px 16px;}
  .kpi span{font-size:.74rem; letter-spacing:.1em;}
  .kpi b{font-size:1.85rem;}
  .kpi .delta{font-size:.76rem;}
  .pill{font-size:.7rem; padding:5px 10px;}
  .btn-sm{font-size:.74rem; padding:10px 15px;}
  .perm-gcount{font-size:.74rem;}
  .heat th{font-size:.68rem;}
  .heat th.day{font-size:.72rem;}
  /* A long page title must not shove the buttons off the bar. */
  .topbar-actions{flex-wrap:wrap; justify-content:flex-end;}
}

/* ------------------------------------------------------- camera scanner --- */
.no-scroll{overflow:hidden;}

.cam{
  position:fixed; inset:0; z-index:200;
  background:rgba(11,11,12,.94); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.cam[hidden]{display:none;}

.cam-box{
  width:100%; max-width:460px; background:var(--panel);
  border:1px solid var(--line); border-radius:2px; padding:18px;
}
.cam-head{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px;}
.cam-head h3{display:flex; align-items:center; gap:9px; font-size:1.05rem;}
.cam-head .ic{color:var(--gold);}

.cam-stage{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:var(--void); border:1px solid var(--line); border-radius:2px;
}
.cam-stage video{width:100%; height:100%; object-fit:cover; display:block;}

/* Four corner ticks, so the desk knows where to hold the member's phone. */
.cam-frame{
  position:absolute; inset:14%; pointer-events:none;
  background:
    linear-gradient(var(--gold),var(--gold)) 0    0   /2px 34px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 0    0   /34px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 100% 0   /2px 34px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 100% 0   /34px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 0    100%/2px 34px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 0    100%/34px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 100% 100%/2px 34px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 100% 100%/34px 2px no-repeat;
}

.cam-note{
  margin-top:12px; min-height:1.3em; text-align:center; color:var(--steel);
  font-family:'Oswald',sans-serif; font-size:.76rem;
  letter-spacing:.05em; text-transform:uppercase;
}
.cam-note.bad{
  color:var(--bad); font-family:'Work Sans',sans-serif; font-size:.82rem;
  letter-spacing:0; text-transform:none; line-height:1.45;
}

.cam-flip{width:100%; margin-top:12px;}
.cam-flip[hidden]{display:none;}

@media (max-width:560px){
  .cam{align-items:flex-start; padding:12px; padding-top:calc(12px + env(safe-area-inset-top,0px));}
  .cam-box{padding:14px;}
}