/* ==========================================================
   PowerZone Gym — style.css
   Tema gelap premium. Mobile first. Tanpa framework.
   ========================================================== */

:root{
  --bg:#0E1116;
  --panel:#171B22;
  --panel-2:#1C212A;
  --line:#252B35;
  --gold:#D4A437;
  --gold-soft:rgba(212,164,55,.14);
  --steel:#3E6B8C;
  --text:#F5F7FA;
  --muted:#9AA3B0;
  --ok:#3FA96A;
  --warn:#E0952F;
  --err:#E06B67;
  --wa:#25D366;

  --r-card:20px;
  --r-btn:14px;
  --r-input:12px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow-sm:0 4px 14px rgba(0,0,0,.25);

  --font-h:"Poppins","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-b:"Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;

  --nav-h:68px;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-b);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{font-family:var(--font-h);margin:0;line-height:1.25;letter-spacing:-.01em;}
p{margin:0;}
button{font-family:inherit;font-size:inherit;color:inherit;}
img,svg{max-width:100%;}
svg{width:100%;height:100%;display:block;}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px;}

.wrap{width:100%;max-width:480px;margin:0 auto;padding:0 20px;}

/* ---------- LAYAR ---------- */
.screen{display:none;}
.screen.is-active{display:block;}
#app.is-active{display:block;padding-bottom:calc(var(--nav-h) + 24px);}

/* ---------- TOMBOL ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:52px;padding:14px 20px;
  border:none;border-radius:var(--r-btn);
  font-weight:600;font-family:var(--font-h);font-size:16px;
  cursor:pointer;
  transition:transform .12s ease,background .2s ease,opacity .2s ease;
}
.btn:active{transform:scale(.975);}
.btn + .btn{margin-top:12px;}
.btn svg{width:20px;height:20px;flex:0 0 20px;}

.btn-primary{background:var(--gold);color:#0E1116;box-shadow:0 8px 24px rgba(212,164,55,.22);}
.btn-primary:hover{background:#E0B24C;}
.btn-primary:disabled{opacity:.35;cursor:not-allowed;box-shadow:none;}
.btn-lg{min-height:56px;font-size:17px;}

.btn-ghost{background:transparent;color:var(--muted);box-shadow:none;font-weight:500;}
.btn-ghost:hover{color:var(--text);}

.btn-outline{background:transparent;border:1px solid var(--line);color:var(--text);}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);}

.btn-wa{background:var(--wa);color:#07301A;}
.btn-wa:hover{background:#31E074;}

.btn-danger{background:var(--err);color:#2A0C0B;}

.icon-btn{
  width:40px;height:40px;flex:0 0 40px;padding:9px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;cursor:pointer;
}

/* ==========================================================
   LANDING
   ========================================================== */
.lp-hero{
  padding:28px 0 44px;
  background:
    radial-gradient(120% 70% at 78% 0%,rgba(212,164,55,.16) 0%,rgba(14,17,22,0) 58%),
    linear-gradient(180deg,#141922 0%,var(--bg) 100%);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:38px;}
.brand-mark{
  width:36px;height:36px;display:grid;place-items:center;
  background:var(--gold);color:#0E1116;border-radius:10px;
  font-family:var(--font-h);font-weight:700;font-size:15px;letter-spacing:-.02em;
}
.brand-name{font-family:var(--font-h);font-weight:600;font-size:16px;}

.hero-kicker{color:var(--gold);font-size:13px;font-weight:600;margin-bottom:12px;}
.hero-title{font-size:38px;font-weight:700;margin-bottom:18px;letter-spacing:-.03em;}
.hero-accent{color:var(--gold);}
.hero-lead{color:var(--muted);font-size:16px;margin-bottom:28px;max-width:38ch;}

.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:32px 0 0;padding-top:26px;border-top:1px solid var(--line);}
.hero-stats div{min-width:0;}
.hero-stats dt{font-family:var(--font-h);font-weight:600;font-size:17px;color:var(--gold);}
.hero-stats dd{margin:4px 0 0;font-size:12.5px;color:var(--muted);line-height:1.4;}

.lp-section{padding:48px 0;}
.lp-section--alt{background:var(--panel);border-block:1px solid var(--line);}
.sec-title{font-size:24px;font-weight:600;margin-bottom:24px;}
.sec-title.sm{font-size:18px;margin:28px 0 14px;}

.benefit-list{display:grid;gap:14px;}
.benefit{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-card);padding:20px;box-shadow:var(--shadow-sm);
}
.lp-section--alt .benefit{background:var(--panel-2);}
.benefit-icon{width:42px;height:42px;flex:0 0 42px;padding:10px;border-radius:12px;background:var(--gold-soft);color:var(--gold);}
.benefit h3{font-size:16.5px;font-weight:600;margin-bottom:6px;}
.benefit p{color:var(--muted);font-size:14.5px;line-height:1.55;}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:22px;}
.steps li{display:flex;gap:16px;align-items:flex-start;}
.step-n{
  width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;
  border:1px solid var(--gold);color:var(--gold);border-radius:50%;
  font-family:var(--font-h);font-weight:600;font-size:15px;
}
.steps h3{font-size:16px;font-weight:600;margin-bottom:5px;}
.steps p{color:var(--muted);font-size:14.5px;}

.quote-list{display:grid;gap:14px;}
.quote{margin:0;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r-card);padding:22px;}
.quote blockquote{margin:0 0 14px;font-size:15.5px;line-height:1.6;}
.quote figcaption{display:flex;flex-direction:column;gap:2px;}
.quote figcaption strong{font-size:14px;}
.quote figcaption span{color:var(--muted);font-size:13px;}

.trust-row{display:grid;gap:10px;margin-top:22px;}
.trust-row span{
  display:block;padding:12px 16px;border:1px dashed var(--line);border-radius:12px;
  color:var(--muted);font-size:13.5px;text-align:center;
}

.lp-cta{padding:52px 0;background:linear-gradient(180deg,var(--panel) 0%,var(--bg) 100%);border-top:1px solid var(--line);text-align:center;}
.lp-cta h2{font-size:26px;font-weight:600;margin-bottom:12px;}
.lp-cta p{color:var(--muted);margin-bottom:26px;font-size:15px;}

.lp-footer{padding:32px 0 44px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:13.5px;}
.foot-brand{font-family:var(--font-h);font-weight:600;color:var(--text);font-size:16px;margin-bottom:4px;}
.foot-small{margin-top:12px;font-size:12.5px;opacity:.7;}

/* ==========================================================
   ONBOARDING
   ========================================================== */
#screen-onboarding.is-active{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;}
.ob-top{display:flex;align-items:center;gap:14px;padding:16px 20px;max-width:480px;margin:0 auto;width:100%;}
.ob-bar{flex:1;height:5px;background:var(--line);border-radius:99px;overflow:hidden;}
.ob-bar span{display:block;height:100%;width:25%;background:var(--gold);border-radius:99px;transition:width .3s ease;}
.ob-count{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;}

.ob-body{flex:1;padding-top:18px;padding-bottom:24px;}
.ob-step{display:none;}
.ob-step.is-active{display:block;animation:fade .22s ease-out;}
@keyframes fade{from{opacity:0}to{opacity:1}}

.ob-q{font-size:26px;font-weight:600;margin-bottom:8px;}
.ob-help{color:var(--muted);font-size:14.5px;margin-bottom:24px;}

.choice-grid{display:grid;gap:12px;}
.choice{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--panel);border:1.5px solid var(--line);
  border-radius:var(--r-card);padding:18px 20px;
  transition:border-color .18s ease,background .18s ease,transform .1s ease;
}
.choice:active{transform:scale(.99);}
.choice strong{display:block;font-family:var(--font-h);font-weight:600;font-size:16px;margin-bottom:4px;}
.choice span{display:block;color:var(--muted);font-size:13.5px;line-height:1.45;}
.choice.is-on{border-color:var(--gold);background:var(--gold-soft);}
.choice.is-on strong{color:var(--gold);}

.ob-foot{position:sticky;bottom:0;padding:14px 0 calc(16px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(14,17,22,0) 0%,var(--bg) 38%);}

/* ---------- FORM ---------- */
.field{margin-bottom:16px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
label{display:block;font-size:13.5px;font-weight:500;color:var(--muted);margin-bottom:7px;}
input,select{
  width:100%;min-height:50px;padding:13px 15px;
  background:var(--panel);color:var(--text);
  border:1.5px solid var(--line);border-radius:var(--r-input);
  font-family:var(--font-b);font-size:16px;
  transition:border-color .18s ease;
  appearance:none;-webkit-appearance:none;
}
select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:42px;}
input::placeholder{color:#5D6672;}
input:focus,select:focus{border-color:var(--gold);outline:none;}
input.is-bad,select.is-bad{border-color:var(--err);}
input[type="date"]{min-height:50px;}

.err{color:var(--err);font-size:13px;margin-top:6px;display:none;}
.err.is-on{display:block;}

.more{margin-top:4px;margin-bottom:16px;}
.more summary{cursor:pointer;color:var(--gold);font-size:14px;font-weight:500;padding:10px 0;list-style:none;}
.more summary::-webkit-details-marker{display:none;}
.more summary::before{content:"+ ";}
.more[open] summary::before{content:"– ";}

/* ==========================================================
   LAYAR HASIL
   ========================================================== */
#screen-result.is-active{display:flex;align-items:center;min-height:100vh;min-height:100dvh;padding:40px 0;}
.result-wrap{text-align:center;}
.result-badge{
  display:inline-block;padding:7px 16px;border-radius:99px;
  background:var(--gold-soft);color:var(--gold);font-size:13px;font-weight:600;margin-bottom:18px;
}
.result-title{font-size:28px;font-weight:700;margin-bottom:8px;}
.result-sub{color:var(--muted);font-size:15px;margin-bottom:30px;}

.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:26px;}
.res-cell{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 8px;}
.res-cell span{display:block;font-family:var(--font-h);font-weight:700;font-size:26px;color:var(--gold);line-height:1.1;}
.res-cell em{display:block;font-style:normal;color:var(--muted);font-size:12px;margin-top:6px;line-height:1.35;}

.res-weeks{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:9px;text-align:left;}
.res-weeks li{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 18px;font-size:14.5px;
}
.res-weeks li span{color:var(--muted);font-size:13px;text-align:right;}

/* ==========================================================
   APLIKASI — HEADER & NAV
   ========================================================== */
.app-head{position:sticky;top:0;z-index:40;background:rgba(14,17,22,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top);}
.app-head-in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:16px;}
.greet{font-family:var(--font-h);font-weight:600;font-size:18px;}
.greet-sub{color:var(--muted);font-size:13px;}
.avatar{
  width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:14px;
  background:var(--gold-soft);color:var(--gold);border:1px solid rgba(212,164,55,.3);
  font-family:var(--font-h);font-weight:600;font-size:16px;
}

.app-body{padding:22px 0 10px;}
.view{display:none;}
.view.is-active{display:block;animation:fade .2s ease-out;}
.view-title{font-size:24px;font-weight:600;margin-bottom:6px;}
.view-sub{color:var(--muted);font-size:14px;margin-bottom:22px;}

.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(23,27,34,.96);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav button{
  background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:var(--nav-h);padding:8px 2px;color:var(--muted);
  transition:color .18s ease;
}
.bottom-nav svg{width:21px;height:21px;}
.bottom-nav span{font-size:10.5px;font-weight:500;letter-spacing:.01em;}
.bottom-nav button.is-on{color:var(--gold);}

.fab{
  position:fixed;right:18px;bottom:calc(var(--nav-h) + 22px + env(safe-area-inset-bottom));z-index:45;
  width:56px;height:56px;padding:15px;border:none;border-radius:50%;
  background:var(--wa);color:#fff;cursor:pointer;
  box-shadow:0 10px 26px rgba(37,211,102,.32);
  transition:transform .12s ease;
}
.fab:active{transform:scale(.93);}

/* ==========================================================
   DASBOR
   ========================================================== */
.streak-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;box-shadow:var(--shadow-sm);margin-bottom:14px;}
.streak-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px;}
.streak-num{font-family:var(--font-h);font-weight:700;font-size:30px;line-height:1.1;}
.streak-num span{color:var(--gold);}
.streak-lbl{color:var(--muted);font-size:13px;margin-top:4px;}
.flame{width:40px;height:40px;flex:0 0 40px;padding:9px;border-radius:12px;background:var(--gold-soft);color:var(--gold);}

.week-dots{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;}
.wd{display:flex;flex-direction:column;align-items:center;gap:6px;}
.wd em{font-style:normal;font-size:10.5px;color:var(--muted);}
.wd i{display:block;width:100%;height:7px;border-radius:99px;background:var(--line);}
.wd.done i{background:var(--ok);}
.wd.miss i{background:#3A2A2A;}
.wd.today i{background:var(--gold);}

.today-card{
  background:linear-gradient(140deg,#20262F 0%,var(--panel) 62%);
  border:1px solid var(--line);border-radius:var(--r-card);padding:22px;margin-bottom:14px;
  box-shadow:var(--shadow);
}
.today-tag{display:inline-block;padding:5px 12px;border-radius:99px;background:var(--gold-soft);color:var(--gold);font-size:11.5px;font-weight:600;margin-bottom:14px;}
.today-name{font-family:var(--font-h);font-weight:600;font-size:21px;margin-bottom:6px;}
.today-focus{color:var(--muted);font-size:14px;margin-bottom:16px;}
.today-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.chip{padding:6px 12px;border-radius:99px;background:var(--panel-2);border:1px solid var(--line);font-size:12.5px;color:var(--muted);}
.today-card.rest{background:var(--panel);}
.today-done{display:flex;align-items:center;gap:10px;color:var(--ok);font-size:14px;font-weight:500;margin-bottom:4px;}
.today-done svg{width:20px;height:20px;flex:0 0 20px;}

.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
.mini-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;}
.mini-lbl{color:var(--muted);font-size:12.5px;margin-bottom:8px;}
.mini-val{font-family:var(--font-h);font-weight:600;font-size:24px;line-height:1.1;}
.mini-delta{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.4;}
.mini-delta.good{color:var(--ok);}

.reminder{
  display:flex;gap:14px;align-items:center;
  background:rgba(224,149,47,.1);border:1px solid rgba(224,149,47,.28);
  border-radius:18px;padding:16px 18px;margin-bottom:14px;cursor:pointer;width:100%;text-align:left;
}
.reminder svg{width:22px;height:22px;flex:0 0 22px;color:var(--warn);}
.reminder strong{display:block;font-size:14.5px;font-weight:600;margin-bottom:3px;}
.reminder span{display:block;color:var(--muted);font-size:13px;line-height:1.4;}

.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.quick{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;cursor:pointer;text-align:left;
  transition:border-color .18s ease;
}
.quick:hover{border-color:var(--gold);}
.quick svg{width:24px;height:24px;flex:0 0 24px;color:var(--gold);}
.quick span{font-size:14px;font-weight:500;}

/* ==========================================================
   PROGRAM & SESI
   ========================================================== */
.week-tabs,.day-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:18px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.week-tabs::-webkit-scrollbar,.day-tabs::-webkit-scrollbar{display:none;}
.tab{
  flex:0 0 auto;padding:10px 18px;border-radius:99px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);color:var(--muted);
  font-size:13.5px;font-weight:500;white-space:nowrap;
}
.tab.is-on{background:var(--gold);border-color:var(--gold);color:#0E1116;font-weight:600;}

.day-row{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px 18px;margin-bottom:10px;
  transition:border-color .18s ease;
}
.day-row:hover{border-color:#39414E;}
.day-row.rest{background:transparent;border-style:dashed;cursor:default;}
.day-date{
  width:48px;flex:0 0 48px;text-align:center;
  border-right:1px solid var(--line);padding-right:12px;
}
.day-date b{display:block;font-family:var(--font-h);font-size:17px;font-weight:600;line-height:1.1;}
.day-date em{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:2px;}
.day-info{flex:1;min-width:0;}
.day-info strong{display:block;font-size:15px;font-weight:600;margin-bottom:3px;}
.day-info span{display:block;color:var(--muted);font-size:12.5px;}
.day-flag{width:22px;height:22px;flex:0 0 22px;color:var(--ok);}
.day-flag.pending{color:#3D4551;}

.back-link{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:0;margin-bottom:18px;}
.back-link svg{width:17px;height:17px;flex:0 0 17px;}

.sess-head{margin-bottom:20px;}
.sess-head h2{font-size:23px;font-weight:600;margin-bottom:6px;}
.sess-head p{color:var(--muted);font-size:14px;}
.sess-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:18px 0 8px;}
.sess-bar i{display:block;height:100%;background:linear-gradient(90deg,#B8862A,var(--gold));border-radius:99px;transition:width .3s ease;}
.sess-count{color:var(--muted);font-size:13px;margin-bottom:22px;}

.ex{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:10px;
  transition:border-color .2s ease,opacity .2s ease;
}
.ex.done{border-color:rgba(63,169,106,.4);opacity:.72;}
.ex.done .ex-name{text-decoration:line-through;text-decoration-color:var(--muted);}
.ex-check{
  width:30px;height:30px;flex:0 0 30px;margin:1px 0 0;padding:0;
  border:1.8px solid var(--line);border-radius:9px;background:transparent;cursor:pointer;
  display:grid;place-items:center;position:relative;
}
.ex-check::after{content:"";position:absolute;inset:-9px;}
.ex-check svg{width:17px;height:17px;opacity:0;color:#0E1116;transition:opacity .15s ease;}
.ex.done .ex-check{background:var(--ok);border-color:var(--ok);}
.ex.done .ex-check svg{opacity:1;}
.ex-body{flex:1;min-width:0;}
.ex-name{font-family:var(--font-h);font-weight:600;font-size:15.5px;margin-bottom:5px;}
.ex-spec{color:var(--gold);font-size:13px;font-weight:500;margin-bottom:6px;}
.ex-tip{color:var(--muted);font-size:13px;line-height:1.45;}

.rest-timer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-top:12px;
}
.rest-timer b{font-family:var(--font-h);font-size:18px;color:var(--gold);font-variant-numeric:tabular-nums;}
.rest-timer span{color:var(--muted);font-size:13px;}
.rest-timer button{background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;text-decoration:underline;padding:6px;}

.sess-finish{
  background:rgba(63,169,106,.1);border:1px solid rgba(63,169,106,.3);
  border-radius:18px;padding:22px;text-align:center;margin-top:18px;
}
.sess-finish h3{font-size:18px;font-weight:600;color:var(--ok);margin-bottom:8px;}
.sess-finish p{color:var(--muted);font-size:14px;margin-bottom:18px;}

/* ==========================================================
   PROGRES
   ========================================================== */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:22px;margin-bottom:18px;}
.panel-title{font-size:17px;font-weight:600;margin-bottom:18px;}
.panel-note{color:var(--muted);font-size:13.5px;margin-bottom:16px;line-height:1.5;}

.metric-tabs{display:flex;gap:8px;overflow-x:auto;margin-bottom:16px;scrollbar-width:none;}
.metric-tabs::-webkit-scrollbar{display:none;}

.chart-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:20px 16px;margin-bottom:18px;}
.chart-box svg{width:100%;height:auto;display:block;}
.chart-sum{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:16px;padding:0 4px;}
.chart-sum b{font-family:var(--font-h);font-size:24px;font-weight:600;}
.chart-sum span{font-size:13.5px;color:var(--muted);}
.chart-sum span.good{color:var(--ok);}

.empty{
  background:var(--panel);border:1px dashed var(--line);border-radius:var(--r-card);
  padding:36px 24px;text-align:center;margin-bottom:18px;
}
.empty-ico{width:46px;height:46px;margin:0 auto 16px;padding:11px;border-radius:14px;background:var(--gold-soft);color:var(--gold);}
.empty h3{font-size:16.5px;font-weight:600;margin-bottom:8px;}
.empty p{color:var(--muted);font-size:14px;line-height:1.55;max-width:32ch;margin:0 auto;}
.empty .btn{margin-top:20px;}

.hist{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:15px 18px;margin-bottom:10px;}
.hist-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;}
.hist-top b{font-family:var(--font-h);font-size:16px;font-weight:600;}
.hist-top time{color:var(--muted);font-size:12.5px;}
.hist-tags{display:flex;flex-wrap:wrap;gap:7px;}
.hist-tags i{font-style:normal;font-size:11.5px;color:var(--muted);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:4px 9px;}
.hist-note{color:var(--muted);font-size:13px;margin-top:9px;font-style:italic;}

/* ==========================================================
   KELAS & TRAINER
   ========================================================== */
.class-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:12px;}
.class-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;}
.class-name{font-family:var(--font-h);font-weight:600;font-size:17px;margin-bottom:4px;}
.class-inst{color:var(--muted);font-size:13px;}
.class-badge{flex:0 0 auto;padding:5px 12px;border-radius:99px;font-size:11.5px;font-weight:600;}
.badge-yoga{background:rgba(107,144,128,.18);color:#8DBBA6;}
.badge-hiit{background:rgba(196,87,63,.18);color:#E08A72;}
.badge-zumba{background:rgba(142,90,125,.2);color:#C296B4;}
.class-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.class-desc{color:var(--muted);font-size:13.5px;line-height:1.5;margin-bottom:16px;}
.btn-sm{min-height:46px;font-size:14.5px;}

.trainer-list{display:grid;gap:12px;margin-bottom:22px;}
.trainer{
  display:flex;gap:15px;align-items:center;width:100%;text-align:left;cursor:pointer;
  background:var(--panel);border:1.5px solid var(--line);border-radius:18px;padding:16px;
  transition:border-color .18s ease,background .18s ease;
}
.trainer.is-on{border-color:var(--gold);background:var(--gold-soft);}
.tr-ava{
  width:52px;height:52px;flex:0 0 52px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,#2A303A,#1C212A);border:1px solid var(--line);
  font-family:var(--font-h);font-weight:600;font-size:18px;color:var(--gold);
}
.tr-info{flex:1;min-width:0;}
.tr-info strong{display:block;font-family:var(--font-h);font-size:16px;font-weight:600;margin-bottom:3px;}
.tr-info span{display:block;color:var(--muted);font-size:13px;line-height:1.4;}
.tr-exp{color:var(--gold);font-size:12px;margin-top:4px;}

.success-box{
  background:rgba(63,169,106,.1);border:1px solid rgba(63,169,106,.3);
  border-radius:16px;padding:18px;margin-top:16px;
}
.success-box strong{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--ok);margin-bottom:8px;}
.success-box strong svg{width:19px;height:19px;flex:0 0 19px;}
.success-box p{color:var(--muted);font-size:13.5px;line-height:1.55;}

/* ==========================================================
   KARTU MEMBER
   ========================================================== */
.mcard{
  background:linear-gradient(145deg,#232935 0%,#13171E 70%);
  border:1px solid rgba(212,164,55,.28);border-radius:22px;padding:24px;margin-bottom:20px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.mcard::after{content:"";position:absolute;top:-70px;right:-70px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(212,164,55,.18),transparent 70%);}
.mcard-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:28px;position:relative;}
.mcard-brand{font-family:var(--font-h);font-weight:600;font-size:15px;color:var(--gold);}
.mcard-type{font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:4px 11px;}
.mcard-name{font-family:var(--font-h);font-weight:600;font-size:22px;margin-bottom:20px;position:relative;}
.mcard-bars{display:flex;align-items:flex-end;gap:3px;height:44px;margin-bottom:20px;position:relative;}
.mcard-bars i{display:block;flex:1;background:var(--text);border-radius:2px;opacity:.85;}
.mcard-foot{display:flex;justify-content:space-between;gap:16px;position:relative;}
.mcard-foot span{display:block;color:var(--muted);font-size:11px;margin-bottom:4px;}
.mcard-foot strong{font-family:var(--font-h);font-size:14.5px;font-weight:600;letter-spacing:.04em;}

/* ==========================================================
   LOADER · TOAST · MODAL
   ========================================================== */
.loader{
  position:fixed;inset:0;z-index:90;display:none;
  background:var(--bg);place-items:center;text-align:center;padding:24px;
}
.loader.is-on{display:grid;}
.loader-ring{
  width:52px;height:52px;margin:0 auto 22px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--gold);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
#loader-text{color:var(--muted);font-size:15px;}

.toast{
  position:fixed;left:50%;bottom:calc(var(--nav-h) + 90px);transform:translate(-50%,16px);
  z-index:95;max-width:90vw;padding:14px 20px;border-radius:14px;
  background:var(--panel-2);border:1px solid var(--line);box-shadow:var(--shadow);
  font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;
}
.toast.is-on{opacity:1;transform:translate(-50%,0);}
.toast.ok{border-color:rgba(63,169,106,.45);}
.toast.bad{border-color:rgba(224,107,103,.45);}

.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:24px;background:rgba(8,10,14,.78);}
.modal.is-on{display:grid;}
.modal-box{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:26px;box-shadow:var(--shadow);}
.modal-box h3{font-size:19px;font-weight:600;margin-bottom:10px;}
.modal-box p{color:var(--muted);font-size:14.5px;line-height:1.55;margin-bottom:24px;}
.modal-act{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.modal-act .btn{margin-top:0;}

/* ==========================================================
   RESPONSIF
   ========================================================== */
@media (max-width:359px){
  .hero-title{font-size:32px;}
  .hero-stats{grid-template-columns:1fr;gap:10px;text-align:left;}
  .hero-stats dt{font-size:16px;}
  .field-row{grid-template-columns:1fr;}
  .result-grid{grid-template-columns:1fr;}
  .res-cell{display:flex;align-items:baseline;gap:10px;justify-content:center;}
  .res-cell em{margin-top:0;}
  .mini-grid,.quick-grid{grid-template-columns:1fr;}
  .bottom-nav span{font-size:9.5px;}
}

@media (min-width:640px){
  .wrap{max-width:520px;}
  .hero-title{font-size:44px;}
  .benefit-list,.quote-list{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}