/* =====================================================
   SmartWorkout — Design System
   Dua tema (gelap & terang) lewat [data-theme] + CSS vars.
   Aksen brand: coral → tangerine → sun.
   ===================================================== */

/* ---------- Token warna (dipakai Tailwind via rgb(var(--x) / <alpha>)) ---------- */
:root {
  --c-coral: 255 106 77;
  --c-coral-dark: 233 74 47;
  --c-coral-light: 255 141 116;
  --c-sun: 255 193 50;
  --c-sun-deep: 255 168 26;
  --c-tang: 255 140 46;
  --c-ok: 52 211 153;
  --c-sky: 122 176 255;
  --c-ink: 240 238 246;
  --c-mist: 12 12 18;

  --radius-sm: .75rem;
  --radius: 1.15rem;
  --radius-lg: 1.6rem;
  --radius-xl: 2rem;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .16s var(--ease);
  --t: .28s var(--ease);
}

/* ================== TEMA GELAP (default) ================== */
[data-theme='dark'] {
  --c-ink: 240 238 246;
  --c-coral: 255 106 77;
  --c-coral-dark: 255 141 116;
  --c-sun: 255 197 61;
  --c-sun-deep: 255 197 61;
  --c-tang: 255 145 54;
  --c-ok: 52 211 153;

  --bg-0: #08080d;
  --bg-1: #0d0d15;
  --surface: rgba(255, 255, 255, .045);
  --surface-2: rgba(255, 255, 255, .07);
  --surface-hi: rgba(255, 255, 255, .1);
  --stroke: rgba(255, 255, 255, .085);
  --stroke-hi: rgba(255, 255, 255, .16);
  --shadow-card: 0 18px 50px -20px rgba(0, 0, 0, .9);
  --shadow-pop: 0 30px 80px -24px rgba(0, 0, 0, .95);
  --orb-a: rgba(255, 106, 77, .16);
  --orb-b: rgba(110, 90, 255, .16);
  --orb-c: rgba(255, 193, 50, .08);
  --grid-line: rgba(255, 255, 255, .028);
  --input-bg: rgba(255, 255, 255, .05);
  --scroll-thumb: rgba(255, 255, 255, .16);
  color-scheme: dark;
}

/* ================== TEMA TERANG ================== */
[data-theme='light'] {
  --c-ink: 24 22 33;
  --c-coral: 232 84 63;
  --c-coral-dark: 190 54 36;
  --c-coral-light: 255 122 102;
  --c-sun: 249 179 0;
  --c-sun-deep: 176 122 0;
  --c-tang: 247 148 29;
  --c-ok: 13 148 106;
  --c-sky: 80 140 230;
  --c-mist: 236 238 246;

  --bg-0: #f4f5fa;
  --bg-1: #eceef6;
  --surface: rgba(255, 255, 255, .78);
  --surface-2: rgba(255, 255, 255, .92);
  --surface-hi: rgba(255, 255, 255, 1);
  --stroke: rgba(24, 22, 33, .07);
  --stroke-hi: rgba(24, 22, 33, .14);
  --shadow-card: 0 16px 40px -18px rgba(30, 28, 56, .28);
  --shadow-pop: 0 30px 70px -20px rgba(30, 28, 56, .35);
  --orb-a: rgba(255, 106, 77, .2);
  --orb-b: rgba(120, 140, 255, .2);
  --orb-c: rgba(255, 193, 50, .22);
  --grid-line: rgba(24, 22, 33, .035);
  --input-bg: rgba(255, 255, 255, .8);
  --scroll-thumb: rgba(24, 22, 33, .2);
  color-scheme: light;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg-0);
  letter-spacing: -.011em;
  overflow-x: hidden;
}

::selection { background: rgb(var(--c-coral) / .3); }

.font-display { font-family: Sora, 'Plus Jakarta Sans', system-ui, sans-serif; }

/* ---------- Latar: gradien mesh + grid halus + orb ---------- */
.app-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 45%, var(--bg-1) 100%);
  overflow: hidden;
}
.app-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 60% at 50% 20%, #000 0%, transparent 85%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 20%, #000 0%, transparent 85%);
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.orb-a { width: 46rem; height: 46rem; top: -18rem; right: -14rem; background: var(--orb-a); animation: drift 22s ease-in-out infinite; }
.orb-b { width: 38rem; height: 38rem; bottom: -16rem; left: -12rem; background: var(--orb-b); animation: drift 28s ease-in-out infinite reverse; }
.orb-c { width: 30rem; height: 30rem; top: 40%; left: 45%; background: var(--orb-c); animation: drift 34s ease-in-out infinite; }
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-4rem, 3rem, 0) scale(1.12); }
}

/* =====================================================
   PRIMITIF
   ===================================================== */
.glass,
.card {
  position: relative;
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.card { padding: 1.35rem; }
@media (max-width: 640px) { .card { padding: 1.1rem; border-radius: var(--radius); } }

/* Highlight tipis di tepi atas kartu */
.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--stroke-hi), transparent);
  pointer-events: none;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}
.card-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: Sora, 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: .98rem;
}
.card-title i { color: rgb(var(--c-coral)); font-size: .9em; }

.page-head { padding-top: .25rem; }
.eyebrow {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgb(var(--c-ink) / .42);
}
.page-title {
  font-family: Sora, 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  margin-top: .15rem;
}

.stack { display: flex; flex-direction: column; gap: .5rem; }

.divider { height: 1px; background: var(--stroke); margin: 1.15rem 0; }

.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 700;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  color: rgb(var(--c-ink) / .6);
  white-space: nowrap;
}
.badge-soft:empty { display: none; }

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .74rem;
  font-weight: 800;
  color: rgb(var(--c-coral));
  transition: gap var(--t-fast), opacity var(--t-fast);
}
.link-btn:hover { gap: .6rem; opacity: .85; }

/* =====================================================
   TOMBOL
   ===================================================== */
.btn-primary,
.btn-sun,
.btn-ghost,
.btn-danger,
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 700;
  border-radius: 999px;
  padding: .7rem 1.35rem;
  transition: transform var(--t-fast), box-shadow var(--t), filter var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.btn-primary:active, .btn-sun:active, .btn-ghost:active, .btn-danger:active, .btn-cta:active { transform: scale(.965); }

.btn-primary {
  position: relative;
  color: #fff;
  background: linear-gradient(135deg, rgb(var(--c-coral)) 0%, rgb(var(--c-tang)) 60%, rgb(var(--c-sun)) 130%);
  box-shadow: 0 10px 26px -8px rgb(var(--c-coral) / .65), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-primary:hover { filter: brightness(1.07); box-shadow: 0 14px 34px -8px rgb(var(--c-coral) / .78), inset 0 1px 0 rgba(255, 255, 255, .28); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; filter: none; }

.btn-sun {
  color: #3a2600;
  background: linear-gradient(135deg, rgb(var(--c-sun)) 0%, rgb(var(--c-tang)) 110%);
  box-shadow: 0 10px 24px -10px rgb(var(--c-sun) / .8), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn-sun:hover { filter: brightness(1.06); }

.btn-ghost {
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  color: rgb(var(--c-ink) / .85);
}
.btn-ghost:hover { background: var(--surface-hi); border-color: var(--stroke-hi); }
.btn-ghost:disabled { opacity: .35; cursor: not-allowed; }

.btn-danger {
  background: rgb(var(--c-coral) / .12);
  border: 1px solid rgb(var(--c-coral) / .28);
  color: rgb(var(--c-coral-dark));
}
.btn-danger:hover { background: rgb(var(--c-coral) / .2); }

.icon-btn {
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  color: rgb(var(--c-ink) / .7);
  transition: all var(--t-fast);
}
.icon-btn:hover { background: var(--surface-hi); color: rgb(var(--c-coral)); transform: translateY(-1px); }

.theme-toggle {
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  color: rgb(var(--c-sun));
  transition: all var(--t-fast);
}
.theme-toggle:hover { background: var(--surface-hi); transform: rotate(-18deg); }
.theme-toggle-float { position: fixed; top: 1.1rem; right: 1.1rem; z-index: 95; backdrop-filter: blur(12px); }

/* =====================================================
   FORM
   ===================================================== */
.field { display: block; }
.field-label {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgb(var(--c-ink) / .45);
  margin-bottom: .4rem;
}
.field-wrap { position: relative; display: block; }
.field-icon {
  position: absolute;
  left: .95rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .82rem;
  color: rgb(var(--c-ink) / .35);
  pointer-events: none;
  transition: color var(--t-fast);
}
.field-wrap:focus-within .field-icon { color: rgb(var(--c-coral)); }

.input {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
  background: var(--input-bg);
  padding: .78rem .95rem;
  font-size: .9rem;
  font-weight: 600;
  color: rgb(var(--c-ink));
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input.has-icon { padding-left: 2.5rem; }
.input.has-toggle { padding-right: 2.7rem; }
.input::placeholder { color: rgb(var(--c-ink) / .32); font-weight: 500; }
.input:hover { border-color: var(--stroke-hi); }
.input:focus {
  border-color: rgb(var(--c-coral) / .7);
  background: var(--surface-2);
  box-shadow: 0 0 0 3.5px rgb(var(--c-coral) / .16);
}
.input[type='date'], .input[type='number'] { font-variant-numeric: tabular-nums; }
.input::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
[data-theme='dark'] .input::-webkit-calendar-picker-indicator { filter: invert(1); }

select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.2rem;
  cursor: pointer;
}
select.input option { background: var(--bg-1); color: rgb(var(--c-ink)); }

.pw-toggle {
  position: absolute;
  right: .55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: rgb(var(--c-ink) / .4);
  font-size: .82rem;
  transition: color var(--t-fast), background var(--t-fast);
}
.pw-toggle:hover { color: rgb(var(--c-coral)); background: var(--surface-2); }

/* =====================================================
   AUTH — layar masuk / daftar
   ===================================================== */
.auth-mode .app-shell { display: none; }
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  overflow-y: auto;
}
.auth-mode .auth-screen { display: flex; }

.auth-shell {
  width: 100%;
  max-width: 62rem;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--stroke);
  background: var(--surface);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: var(--shadow-pop);
  animation: riseIn .55s var(--ease) both;
}
@media (min-width: 1024px) { .auth-shell { grid-template-columns: 1.05fr .95fr; } }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Panel kiri: showcase brand */
.auth-hero {
  display: none;
  position: relative;
  padding: 2.75rem 2.5rem;
  color: #fff;
  background:
    linear-gradient(150deg, rgb(var(--c-coral-dark)) 0%, rgb(var(--c-coral)) 38%, rgb(var(--c-tang)) 78%, rgb(var(--c-sun)) 130%);
  overflow: hidden;
}
@media (min-width: 1024px) { .auth-hero { display: block; } }
.auth-hero-glow {
  position: absolute;
  inset: -40% -30% auto -30%;
  height: 130%;
  background: radial-gradient(45% 45% at 30% 15%, rgba(255, 255, 255, .38), transparent 70%);
  pointer-events: none;
}
.auth-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(200deg, #000 10%, transparent 75%);
  -webkit-mask-image: linear-gradient(200deg, #000 10%, transparent 75%);
  pointer-events: none;
}
.auth-hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; gap: 1.5rem; }
.auth-hero .brand-name { color: #fff; }
.auth-hero .brand-name span { color: #fff; opacity: .78; }
.auth-hero .brand-tag { color: rgba(255, 255, 255, .72); }
.auth-hero .brand-mark { box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }

.auth-hero-title {
  font-family: Sora, sans-serif;
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.035em;
  margin-top: .5rem;
}
.auth-hero-title em { font-style: normal; color: #fff6d9; text-shadow: 0 2px 20px rgba(255, 220, 140, .5); }
.auth-hero-sub { font-size: .9rem; line-height: 1.6; color: rgba(255, 255, 255, .8); max-width: 26rem; }

.auth-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.auth-feats li {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .84rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
}
.auth-feats span {
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: .7rem;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .25);
  font-size: .78rem;
}

.auth-stats {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.auth-stats div { display: flex; flex-direction: column; }
.auth-stats b { font-family: Sora, sans-serif; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.auth-stats span { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .7); }

/* Panel kanan: form */
.auth-card {
  padding: 2rem 1.75rem;
  background: color-mix(in srgb, var(--bg-1) 88%, transparent);
}
@media (min-width: 640px) { .auth-card { padding: 2.5rem 2.25rem; } }
.auth-card-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.5rem; }
.auth-title {
  font-family: Sora, sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.2;
}
.auth-subtitle { font-size: .82rem; font-weight: 500; color: rgb(var(--c-ink) / .5); margin-top: .2rem; }

.auth-tabs {
  position: relative;
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: .3rem;
  gap: .25rem;
  margin-bottom: 1.5rem;
}
.auth-tab-pill {
  position: absolute;
  top: .3rem;
  bottom: .3rem;
  left: .3rem;
  width: calc(50% - .4rem);
  border-radius: 999px;
  background: linear-gradient(135deg, rgb(var(--c-coral)), rgb(var(--c-tang)));
  box-shadow: 0 6px 18px -6px rgb(var(--c-coral) / .8);
  transition: transform var(--t);
}
.auth-tabs.reg .auth-tab-pill { transform: translateX(calc(100% + .3rem)); }
.auth-tab {
  position: relative;
  z-index: 1;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .6rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  color: rgb(var(--c-ink) / .55);
  transition: color var(--t);
}
.auth-tab.active { color: #fff; }

.auth-form { display: flex; flex-direction: column; gap: .9rem; animation: fadeUp .35s var(--ease) both; }

.auth-error {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .8rem;
  font-weight: 600;
  color: rgb(var(--c-coral-dark));
  background: rgb(var(--c-coral) / .12);
  border: 1px solid rgb(var(--c-coral) / .28);
  border-radius: var(--radius-sm);
  padding: .7rem .85rem;
  animation: shake .4s var(--ease) both;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.auth-demo {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: .74rem;
  font-weight: 600;
  color: rgb(var(--c-ink) / .45);
  padding: .6rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px dashed var(--stroke-hi);
}
.auth-demo b { color: rgb(var(--c-coral)); font-weight: 800; }

/* =====================================================
   SHELL: sidebar (desktop) / bottom nav (mobile)
   ===================================================== */
.app-shell { position: relative; z-index: 1; display: flex; min-height: 100vh; }

.brand-mark {
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border-radius: .95rem;
  object-fit: cover;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .5);
  border: 1px solid var(--stroke-hi);
}
.brand-name {
  font-family: Sora, sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.brand-name span { color: rgb(var(--c-coral)); }
.brand-tag { font-size: .68rem; font-weight: 600; color: rgb(var(--c-ink) / .45); margin-top: .1rem; }

/* --- Sidebar (≥1024px) --- */
.app-nav {
  display: none;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  width: 16.5rem;
  flex: none;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 1rem;
  border-right: 1px solid var(--stroke);
  background: var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
@media (min-width: 1024px) { .app-nav { display: flex; } }

.nav-brand { display: flex; align-items: center; gap: .7rem; padding: .25rem .4rem; }
.nav-list { display: flex; flex-direction: column; gap: .25rem; }

.nav-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  padding: .72rem .85rem;
  border-radius: var(--radius-sm);
  font-size: .86rem;
  font-weight: 700;
  color: rgb(var(--c-ink) / .55);
  transition: all var(--t-fast);
}
.nav-btn i { width: 1.15rem; text-align: center; font-size: .95rem; transition: transform var(--t-fast); }
.nav-btn:hover { background: var(--surface-2); color: rgb(var(--c-ink) / .9); }
.nav-btn:hover i { transform: scale(1.12); }
.nav-btn.active {
  color: #fff;
  background: linear-gradient(135deg, rgb(var(--c-coral)) 0%, rgb(var(--c-tang)) 100%);
  box-shadow: 0 10px 24px -10px rgb(var(--c-coral) / .9);
}

.nav-foot { margin-top: auto; display: flex; flex-direction: column; gap: .6rem; }
.nav-user {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .7rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--stroke);
}
.nav-install {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .62rem;
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: 700;
  color: rgb(var(--c-coral));
  background: rgb(var(--c-coral) / .1);
  border: 1px dashed rgb(var(--c-coral) / .35);
  transition: background var(--t-fast);
}
.nav-install:hover { background: rgb(var(--c-coral) / .18); }

/* --- Bottom nav (<1024px) --- */
@media (max-width: 1023px) {
  .app-nav {
    display: flex;
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    width: auto;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: .45rem .5rem calc(.45rem + env(safe-area-inset-bottom));
    border-right: 0;
    border-top: 1px solid var(--stroke);
    background: color-mix(in srgb, var(--bg-0) 82%, transparent);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    z-index: 50;
    box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .6);
  }
  .nav-brand, .nav-foot { display: none; }
  .nav-list { flex: 1; flex-direction: row; gap: .15rem; }
  .nav-btn {
    flex: 1;
    flex-direction: column;
    gap: .22rem;
    padding: .5rem .2rem;
    font-size: .63rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
  }
  .nav-btn i { font-size: 1.02rem; width: auto; }
  .nav-btn.active { background: none; color: rgb(var(--c-coral)); box-shadow: none; }
  .nav-btn.active i { transform: translateY(-1px) scale(1.14); }
  .nav-btn.active::after {
    content: '';
    position: absolute;
    top: .1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.6rem;
    height: 2.5px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgb(var(--c-coral)), rgb(var(--c-sun)));
    box-shadow: 0 0 12px rgb(var(--c-coral) / .8);
  }
}

/* --- Body & header --- */
.app-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--bg-0) 78%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.header-brand { display: flex; align-items: center; gap: .7rem; flex: 1; min-width: 0; }
.header-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
@media (min-width: 1024px) {
  .app-header {
    padding: 1rem 2rem;
    border-bottom-color: transparent;
    /* Gradasi lembut agar konten yang lewat di bawah header tidak bertabrakan */
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-0) 94%, transparent) 45%, transparent 100%);
  }
  .header-brand { display: none; }
  /* Tombol instal sudah ada di sidebar — hindari duplikat di header */
  #btnInstallTop { display: none; }
}

.app-main {
  flex: 1;
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  padding: 1rem 1rem 6.5rem;
}
@media (min-width: 1024px) { .app-main { padding: .5rem 2rem 3rem; } }

/* View router */
.view { display: none; }
.view.active { display: block; animation: fadeUp .4s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* =====================================================
   DASHBOARD
   ===================================================== */
.stat-card {
  position: relative;
  overflow: hidden;
  padding: 1.1rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-card);
  transition: transform var(--t), border-color var(--t);
}
.stat-card:hover { transform: translateY(-3px); border-color: var(--stroke-hi); }
.stat-ico {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: .7rem;
  font-size: .82rem;
  margin-bottom: .65rem;
}
.ico-coral { background: rgb(var(--c-coral) / .14); color: rgb(var(--c-coral)); }
.ico-tang  { background: rgb(var(--c-tang) / .14);  color: rgb(var(--c-tang)); }
.ico-sun   { background: rgb(var(--c-sun) / .16);   color: rgb(var(--c-sun-deep)); }
.ico-ok    { background: rgb(var(--c-ok) / .14);    color: rgb(var(--c-ok)); }

.stat-label {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgb(var(--c-ink) / .45);
}
.stat-value {
  font-family: Sora, sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.035em;
  margin-top: .15rem;
  font-variant-numeric: tabular-nums;
}
.stat-value small { font-size: .78rem; font-weight: 700; color: rgb(var(--c-ink) / .4); margin-left: .18rem; }

/* CTA */
.cta-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.5rem;
  border-radius: var(--radius-lg);
  color: #fff;
  background: linear-gradient(115deg, rgb(var(--c-coral-dark)) 0%, rgb(var(--c-coral)) 35%, rgb(var(--c-tang)) 72%, rgb(var(--c-sun)) 125%);
  box-shadow: 0 22px 50px -22px rgb(var(--c-coral) / .9);
}
[data-theme='dark'] .cta-card { color: #fff; }
.cta-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: linear-gradient(120deg, #000, transparent 70%);
  -webkit-mask-image: linear-gradient(120deg, #000, transparent 70%);
}
.cta-shine {
  position: absolute;
  top: -60%;
  left: -20%;
  width: 45%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: rotate(18deg);
  animation: sweep 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sweep {
  0%, 65% { left: -30%; }
  100%    { left: 115%; }
}
.cta-label { font-size: .78rem; font-weight: 700; color: rgba(255, 255, 255, .8); }
.cta-title { font-family: Sora, sans-serif; font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; margin-top: .1rem; }
.cta-bar {
  margin-top: .8rem;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
  overflow: hidden;
  max-width: 22rem;
}
.cta-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, .8);
  transition: width .6s var(--ease);
}
.btn-cta {
  position: relative;
  z-index: 1;
  flex: none;
  background: #fff;
  color: rgb(var(--c-coral-dark));
  font-weight: 800;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55);
}
[data-theme='dark'] .btn-cta { color: #c0341f; }
.btn-cta:hover { box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .7); }

/* Rekap ringkas */
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; text-align: center; }
.mini-stats > div {
  padding: .9rem .4rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--stroke);
}
.mini-stats i { font-size: .92rem; opacity: .9; }
.mini-val {
  font-family: Sora, sans-serif;
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-top: .3rem;
  font-variant-numeric: tabular-nums;
}
.mini-lbl { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgb(var(--c-ink) / .45); margin-top: .1rem; }

/* =====================================================
   LIST ITEM (checklist, riwayat, panduan)
   ===================================================== */
.task-item {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .75rem .85rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.task-item.done { background: rgb(var(--c-ok) / .1); border-color: rgb(var(--c-ok) / .22); }
.task-item.clickable { cursor: pointer; }
.task-item.clickable:hover { background: var(--surface-hi); border-color: rgb(var(--c-coral) / .35); transform: translateX(3px); }
.task-item.clickable:active { transform: scale(.99); }

.task-check {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  flex: none;
  border: 1.8px solid var(--stroke-hi);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 800;
  color: rgb(var(--c-ink) / .5);
  transition: all var(--t-fast);
}
.task-item.done .task-check {
  background: rgb(var(--c-ok));
  border-color: rgb(var(--c-ok));
  color: #04231a;
  box-shadow: 0 0 14px rgb(var(--c-ok) / .5);
}

.item-title { font-size: .875rem; font-weight: 700; }
.item-sub { font-size: .72rem; font-weight: 500; color: rgb(var(--c-ink) / .5); margin-top: .1rem; }
.item-muted { text-decoration: line-through; color: rgb(var(--c-ink) / .42); }

.ex-thumb {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .8rem;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgb(var(--c-coral) / .16), rgb(var(--c-sun) / .16));
  border: 1px solid rgb(var(--c-coral) / .22);
  color: rgb(var(--c-coral));
}
.ex-thumb svg { width: 1.55rem; height: 1.55rem; }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 2rem 1rem;
  text-align: center;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--stroke-hi);
  color: rgb(var(--c-ink) / .5);
  font-size: .82rem;
  font-weight: 600;
}
.empty-state i { font-size: 1.6rem; color: rgb(var(--c-ink) / .3); }

.pill-done {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: rgb(var(--c-ok) / .16);
  color: rgb(var(--c-ok));
  white-space: nowrap;
}

/* =====================================================
   JADWAL — week strip & editor
   ===================================================== */
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; }
.week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: .7rem .2rem;
  border-radius: var(--radius-sm);
  font-size: .68rem;
  font-weight: 700;
  color: rgb(var(--c-ink) / .5);
  background: var(--surface-2);
  border: 1px solid transparent;
  transition: all var(--t-fast);
}
.week-day:hover { border-color: var(--stroke-hi); }
.week-dot { width: .7rem; height: .7rem; border-radius: 999px; background: rgb(var(--c-ink) / .16); border: 2px solid transparent; }
.week-dot.selesai  { background: rgb(var(--c-ok)); box-shadow: 0 0 10px rgb(var(--c-ok) / .6); }
.week-dot.sebagian { background: rgb(var(--c-sun)); box-shadow: 0 0 10px rgb(var(--c-sun) / .6); }
.week-dot.terlewat { background: rgb(var(--c-coral) / .5); }
.week-dot.belum    { background: rgb(var(--c-ink) / .16); }
.week-dot.libur    { background: transparent; border-color: rgb(var(--c-ink) / .25); }
.week-day.today {
  color: #fff;
  background: linear-gradient(160deg, rgb(var(--c-coral)), rgb(var(--c-tang)));
  border-color: transparent;
  box-shadow: 0 10px 22px -12px rgb(var(--c-coral) / .9);
}
.week-day.today .week-dot { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.week-count { font-size: .6rem; font-weight: 700; opacity: .65; font-variant-numeric: tabular-nums; }

.editor-grid { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 640px) { .editor-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .editor-grid { grid-template-columns: repeat(3, 1fr); } }

.day-card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .85rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  transition: border-color var(--t-fast);
}
.day-card:hover { border-color: var(--stroke-hi); }
.day-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.day-name { font-size: .82rem; font-weight: 800; }
.day-count { font-size: .62rem; font-weight: 700; color: rgb(var(--c-ink) / .4); }

.chip-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .74rem;
  font-weight: 600;
  padding: .38rem .55rem .38rem .7rem;
  border-radius: .6rem;
  background: var(--surface);
  border: 1px solid var(--stroke);
}
.chip-row .chip-dur { color: rgb(var(--c-ink) / .4); font-weight: 700; }
.chip-rm {
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: .62rem;
  color: rgb(var(--c-ink) / .4);
  transition: all var(--t-fast);
}
.chip-rm:hover { background: rgb(var(--c-coral) / .18); color: rgb(var(--c-coral)); }
.day-rest { font-size: .72rem; font-weight: 600; color: rgb(var(--c-ink) / .4); display: flex; align-items: center; gap: .4rem; padding: .3rem 0; }

/* =====================================================
   PLAYER
   ===================================================== */
.player-card { display: flex; flex-direction: column; gap: 1rem; }
.phase-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgb(var(--c-coral));
}
.player-name {
  font-family: Sora, sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.2;
  margin-top: .25rem;
}

.player-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: center;
  justify-items: center;
}
@media (min-width: 768px) { .player-stage { grid-template-columns: 1fr 1fr; } }

/* Animasi Lottie punya latar putih bawaan — bingkai supaya menyatu dengan kartu */
.lottie-box {
  width: 100%;
  aspect-ratio: 1/1;
  max-width: 300px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--stroke);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.lottie-box:empty { display: none; }
.lottie-box svg, .lottie-box canvas { width: 100% !important; height: 100% !important; }
@media (min-width: 768px) { .player-stage:has(.lottie-box:empty) { grid-template-columns: 1fr; } }

.timer-wrap { position: relative; width: 15rem; height: 15rem; }
.timer-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-bg { fill: none; stroke: rgb(var(--c-ink) / .09); stroke-width: 10; }
.ring-fg {
  fill: none;
  stroke: url(#gradRing);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 552.92;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .25s linear;
  filter: drop-shadow(0 0 10px rgb(var(--c-coral) / .5));
}
.phase-rest .ring-fg { stroke: url(#gradRingRest); filter: drop-shadow(0 0 10px rgb(var(--c-ok) / .5)); }
.timer-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.time-text {
  font-family: Sora, sans-serif;
  font-size: 3.1rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}
.time-hint { font-size: .7rem; font-weight: 600; color: rgb(var(--c-ink) / .45); margin-top: .4rem; }
.phase-work .time-text { color: rgb(var(--c-coral)); }
.phase-rest .time-text { color: rgb(var(--c-ok)); }

.dots-wrap { display: flex; justify-content: center; gap: .45rem; }
.ex-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: rgb(var(--c-ink) / .18);
  transition: all var(--t);
}
.ex-dot.done { background: rgb(var(--c-sun)); width: 1.1rem; }
.ex-dot.current {
  background: rgb(var(--c-coral));
  width: 1.6rem;
  box-shadow: 0 0 12px rgb(var(--c-coral) / .8);
}

.player-controls { display: flex; justify-content: center; align-items: center; gap: .9rem; }
.btn-round { width: 3rem; height: 3rem; padding: 0; border-radius: 999px; font-size: .95rem; }
.btn-play { min-width: 10rem; padding: .95rem 1.6rem; font-size: .95rem; }
.player-note { text-align: center; font-size: .74rem; font-weight: 500; color: rgb(var(--c-ink) / .45); min-height: 1rem; }

.pulse-dot { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Panduan */
.panduan-mini {
  width: 4.4rem;
  height: 2.6rem;
  flex: none;
  border-radius: .7rem;
  background: linear-gradient(135deg, rgb(var(--c-sky) / .12), rgb(var(--c-coral) / .1));
  border: 1px solid var(--stroke);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.panduan-mini svg { width: 4.1rem; height: 2.3rem; }

.panduan-illust {
  border-radius: var(--radius);
  padding: 1.1rem;
  background: linear-gradient(135deg, rgb(var(--c-sky) / .12), rgb(var(--c-coral) / .09));
  border: 1px solid var(--stroke);
}
.panduan-illust svg { width: 100%; height: auto; display: block; }
/* Ilustrasi SVG memakai warna gelap statis → balik di tema gelap agar tetap terbaca */
[data-theme='dark'] .panduan-illust svg [stroke='#2E2A33'],
[data-theme='dark'] .panduan-mini svg [stroke='#2E2A33'] { stroke: #E9E6F2; }

.panduan-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.panduan-steps li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .85rem;
  font-weight: 500;
  color: rgb(var(--c-ink) / .85);
  padding: .4rem 0;
  line-height: 1.55;
}
.panduan-steps li b {
  flex: none;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  margin-top: .08rem;
  background: linear-gradient(135deg, rgb(var(--c-coral)), rgb(var(--c-tang)));
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px -4px rgb(var(--c-coral) / .9);
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .02em;
  padding: .28rem .65rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  color: rgb(var(--c-ink) / .6);
  white-space: nowrap;
}
.meta-pill.coral { background: rgb(var(--c-coral) / .13); border-color: rgb(var(--c-coral) / .25); color: rgb(var(--c-coral)); }
.meta-pill.sun   { background: rgb(var(--c-sun) / .14);  border-color: rgb(var(--c-sun) / .28);  color: rgb(var(--c-sun-deep)); }

/* =====================================================
   TRACKER
   ===================================================== */
.chart-box { height: 16rem; }
@media (min-width: 1024px) { .chart-box { height: 19rem; } }

.tile {
  padding: .9rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--stroke);
}
.tile-val {
  font-family: Sora, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-top: .2rem;
  font-variant-numeric: tabular-nums;
}

/* =====================================================
   PROFIL
   ===================================================== */
.profile-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-card);
}
.profile-hero-glow {
  position: absolute;
  inset: -60% 40% auto -20%;
  height: 200%;
  background: radial-gradient(40% 40% at 30% 40%, rgb(var(--c-coral) / .3), transparent 70%);
  pointer-events: none;
}

.facts-grid { display: grid; grid-template-columns: 1fr; gap: .5rem; }
@media (min-width: 640px) { .facts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .facts-grid { grid-template-columns: repeat(3, 1fr); } }
.fact {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem .9rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--stroke);
}
.fact-ico {
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: .65rem;
  background: rgb(var(--c-coral) / .12);
  color: rgb(var(--c-coral));
  font-size: .8rem;
}
.fact-val { font-size: .86rem; font-weight: 800; margin-top: .05rem; }

.avatar-chip {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  flex: none;
  background: linear-gradient(135deg, rgb(var(--c-coral)), rgb(var(--c-tang)));
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px -8px rgb(var(--c-coral) / .9);
  transition: transform var(--t-fast);
}
.avatar-chip:hover { transform: scale(1.07); }
.avatar-big {
  position: relative;
  width: 4rem;
  height: 4rem;
  border-radius: 1.3rem;
  flex: none;
  background: linear-gradient(135deg, rgb(var(--c-coral)), rgb(var(--c-tang)));
  color: #fff;
  font-family: Sora, sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px -12px rgb(var(--c-coral) / .95);
}

/* =====================================================
   OVERLAY & TOAST
   ===================================================== */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(6, 6, 12, .6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.overlay.show { display: flex; animation: fadeIn .25s var(--ease) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.overlay-card {
  width: 100%;
  max-width: 24rem;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--stroke-hi);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-pop);
  animation: riseIn .35s var(--ease) both;
}

#toast {
  position: fixed;
  left: 50%;
  bottom: 5.5rem;
  transform: translateX(-50%) translateY(90px);
  z-index: 80;
  max-width: min(90vw, 26rem);
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--bg-1);
  border: 1px solid var(--stroke-hi);
  color: rgb(var(--c-ink));
  font-weight: 600;
  font-size: .84rem;
  padding: .75rem 1.2rem;
  border-radius: 999px;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transition: all .35s var(--ease);
  pointer-events: none;
}
@media (min-width: 1024px) { #toast { bottom: 1.6rem; } }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast i { color: rgb(var(--c-ok)); }
#toast.err { border-color: rgb(var(--c-coral) / .5); }
#toast.err i { color: rgb(var(--c-coral)); }

/* Scrollbar */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-coral) / .5); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Aksesibilitas */
:focus-visible { outline: 2px solid rgb(var(--c-coral)); outline-offset: 2px; border-radius: .5rem; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 380px) {
  .nav-btn span { font-size: .58rem; }
  .timer-wrap { width: 12.5rem; height: 12.5rem; }
  .time-text { font-size: 2.6rem; }
  .btn-play { min-width: 8.5rem; }
}

/* Utility Tailwind `hidden` harus menang atas display komponen di atas */
.hidden { display: none !important; }

/* =====================================================
   PENGINGAT LATIHAN — switch, pilih hari, info status
   ===================================================== */
.switch-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem .95rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.switch-row:hover { border-color: var(--stroke-hi); }
.switch-title { font-size: .85rem; font-weight: 700; }
.switch-sub { font-size: .72rem; font-weight: 500; color: rgb(var(--c-ink) / .5); margin-top: .12rem; line-height: 1.45; }

/* Toggle iOS-style dari <input type=checkbox> */
.switch {
  appearance: none;
  flex: none;
  width: 2.9rem;
  height: 1.65rem;
  border-radius: 999px;
  background: rgb(var(--c-ink) / .18);
  border: 1px solid var(--stroke);
  position: relative;
  cursor: pointer;
  transition: background var(--t);
}
.switch::after {
  content: '';
  position: absolute;
  top: 50%;
  left: .18rem;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  transition: transform var(--t);
}
.switch:checked {
  background: linear-gradient(135deg, rgb(var(--c-coral)), rgb(var(--c-tang)));
  border-color: transparent;
}
.switch:checked::after { transform: translateY(-50%) translateX(1.2rem); }

/* Bagian detail meredup saat pengingat dimatikan */
#remDetail { transition: opacity var(--t), filter var(--t); }
#remDetail.is-off { opacity: .45; filter: grayscale(.4); }

.day-toggle { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.day-chip {
  height: 2.6rem;
  border-radius: .7rem;
  font-size: .8rem;
  font-weight: 800;
  color: rgb(var(--c-ink) / .5);
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  transition: all var(--t-fast);
}
.day-chip:hover { border-color: var(--stroke-hi); }
.day-chip.on {
  color: #fff;
  background: linear-gradient(135deg, rgb(var(--c-coral)), rgb(var(--c-tang)));
  border-color: transparent;
  box-shadow: 0 6px 16px -8px rgb(var(--c-coral) / .9);
}

.rem-info {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.55;
  color: rgb(var(--c-ink) / .55);
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  padding: .65rem .8rem;
}
.rem-info i { margin-top: .12rem; flex: none; }
.rem-info.ok { background: rgb(var(--c-ok) / .1); border-color: rgb(var(--c-ok) / .25); color: rgb(var(--c-ok)); }
.rem-info.warn { background: rgb(var(--c-sun) / .1); border-color: rgb(var(--c-sun) / .3); color: rgb(var(--c-sun-deep)); }
.rem-info b { font-weight: 800; }

/* =====================================================
   OPTIMALISASI TAMPILAN PONSEL
   ===================================================== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body { overscroll-behavior-y: none; }

/* Area aman notch / home indicator */
.app-header { padding-top: calc(.85rem + env(safe-area-inset-top)); }
.app-main {
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

@media (max-width: 1023px) {
  /* iOS memperbesar halaman bila font input < 16px saat difokus */
  .input, select.input { font-size: 16px; padding: .8rem .95rem; }
  .input.has-icon { padding-left: 2.6rem; }

  /* Target sentuh minimal ~44px */
  .nav-btn { min-height: 3.1rem; }
  .icon-btn, .theme-toggle { width: 2.65rem; height: 2.65rem; }
  .btn-primary, .btn-sun, .btn-ghost, .btn-danger, .btn-cta { min-height: 2.9rem; }
  .task-item { padding: .8rem; }
  .chip-rm { width: 2rem; height: 2rem; }
  .day-chip { height: 2.9rem; }

  /* Header lebih ringkas, judul halaman tidak boros ruang */
  .app-header { padding: calc(.7rem + env(safe-area-inset-top)) 1rem .7rem; }
  .brand-mark { width: 2.3rem; height: 2.3rem; }
  .page-head { padding-top: 0; }

  /* Blur berat mahal di GPU ponsel — turunkan tanpa mengubah tampilan */
  .card, .glass { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .orb { filter: blur(60px); animation: none; }
  .orb-c { display: none; }
  .cta-shine { display: none; }

  /* CTA: tombol turun ke bawah agar judul tidak terpotong */
  .cta-card { flex-direction: column; align-items: stretch; gap: .9rem; padding: 1.15rem 1.15rem 1.25rem; }
  .cta-title { font-size: 1.12rem; }
  .btn-cta { width: 100%; }
  .cta-bar { max-width: none; }

  /* Statistik & rekap lebih padat */
  .stat-card { padding: .9rem; }
  .stat-ico { width: 1.8rem; height: 1.8rem; margin-bottom: .5rem; font-size: .72rem; }
  .stat-value { font-size: 1.4rem; }
  .mini-stats { gap: .45rem; }
  .mini-stats > div { padding: .75rem .3rem; }
  .mini-val { font-size: 1.1rem; }

  /* Strip mingguan: 7 kolom harus tetap muat di layar sempit */
  .week-strip { gap: .25rem; }
  .week-day { padding: .55rem .1rem; font-size: .62rem; gap: .3rem; }
  .week-count { font-size: .55rem; }

  /* Player: timer jadi fokus utama */
  .player-stage { gap: .75rem; }
  .lottie-box { max-width: 210px; }
  .timer-wrap { width: 13.5rem; height: 13.5rem; }
  .time-text { font-size: 2.8rem; }
  .player-controls { gap: 1.1rem; }
  .btn-round { width: 3.4rem; height: 3.4rem; }
  .btn-play { min-width: 9rem; }

  /* Editor jadwal satu kolom penuh */
  .editor-grid { grid-template-columns: 1fr; }

  /* Kartu profil */
  .profile-hero { padding: 1.15rem; gap: .9rem; }
  .avatar-big { width: 3.4rem; height: 3.4rem; font-size: 1.35rem; border-radius: 1.1rem; }

  .card-head { flex-wrap: wrap; gap: .5rem; }
}

/* Modal tampil sebagai bottom sheet di ponsel — lebih mudah dijangkau jempol */
@media (max-width: 640px) {
  .overlay { align-items: flex-end; padding: 0; }
  .overlay-card {
    max-width: none;
    max-height: 90vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 1.4rem 1.15rem calc(1.4rem + env(safe-area-inset-bottom));
    animation: sheetUp .32s var(--ease) both;
  }
  @keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
  /* Gagang sheet */
  .overlay-card::before {
    content: '';
    display: block;
    width: 2.5rem;
    height: .25rem;
    border-radius: 999px;
    background: rgb(var(--c-ink) / .25);
    margin: -.4rem auto 1rem;
  }
  .panduan-steps li { font-size: .82rem; }
}

/* Layar sangat sempit */
@media (max-width: 360px) {
  .nav-btn span { font-size: .55rem; }
  .stat-value { font-size: 1.25rem; }
  .day-chip { font-size: .72rem; }
}

/* Ponsel lanskap: jangan buang tinggi layar yang terbatas */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 520px) {
  .player-stage { grid-template-columns: 1fr 1fr; }
  .timer-wrap { width: 11rem; height: 11rem; }
  .time-text { font-size: 2.2rem; }
  .lottie-box { max-width: 160px; }
}

/* =====================================================
   NERACA KALORI & NUTRISI
   ===================================================== */
.energi-atas { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.energi-angka {
  font-family: Sora, sans-serif;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -.035em;
  color: rgb(var(--c-ok));
  font-variant-numeric: tabular-nums;
}
.energi-angka.lebih { color: rgb(var(--c-coral)); }
.energi-angka small { font-size: .8rem; font-weight: 700; color: rgb(var(--c-ink) / .4); margin-left: .25rem; }
.energi-rinci { display: flex; flex-direction: column; gap: .2rem; text-align: right; }
.energi-rinci span { font-size: .72rem; font-weight: 600; color: rgb(var(--c-ink) / .55); }
.energi-rinci b { color: rgb(var(--c-ink)); font-variant-numeric: tabular-nums; }
.energi-rinci i { width: 1rem; color: rgb(var(--c-ink) / .35); }

.energi-bar {
  margin-top: .9rem;
  height: 8px;
  border-radius: 999px;
  background: rgb(var(--c-ink) / .1);
  overflow: hidden;
}
.energi-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--c-ok)), rgb(var(--c-sun)));
  transition: width .5s var(--ease);
}
.energi-bar span.lebih { background: linear-gradient(90deg, rgb(var(--c-sun)), rgb(var(--c-coral))); }
.energi-kaki { margin-top: .7rem; font-size: .7rem; font-weight: 500; color: rgb(var(--c-ink) / .45); }
.energi-kaki i { margin-right: .3rem; }

.grup-judul {
  display: flex; align-items: center; gap: .45rem;
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: rgb(var(--c-ink) / .45);
  margin: .9rem 0 .35rem;
}
.grup-judul:first-child { margin-top: 0; }
.grup-judul span { margin-left: auto; text-transform: none; letter-spacing: 0; color: rgb(var(--c-coral)); }

/* Saran makanan dari katalog */
.saran-kotak { display: none; margin-top: .4rem; }
.saran-kotak.buka { display: flex; flex-direction: column; gap: .25rem; }
.saran-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .7rem; border-radius: .6rem;
  background: var(--surface-2); border: 1px solid var(--stroke);
  text-align: left; transition: all var(--t-fast);
}
.saran-item:hover { border-color: rgb(var(--c-coral) / .4); background: var(--surface-hi); }
.saran-item b { display: block; font-size: .8rem; font-weight: 700; }
.saran-item small { font-size: .68rem; color: rgb(var(--c-ink) / .45); }
.saran-kosong { font-size: .74rem; color: rgb(var(--c-ink) / .45); padding: .4rem .2rem; }

/* =====================================================
   PROYEKSI TARGET
   ===================================================== */
.proy-grid { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 768px) { .proy-grid { grid-template-columns: repeat(3, 1fr); } }
.proy-kotak {
  padding: .95rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--stroke);
}
.proy-kotak.utama { border-color: rgb(var(--c-coral) / .3); background: rgb(var(--c-coral) / .07); }
.proy-kotak.waspada { border-color: rgb(var(--c-sun) / .35); background: rgb(var(--c-sun) / .08); }
.proy-nilai {
  font-family: Sora, sans-serif; font-size: 1.25rem; font-weight: 800;
  letter-spacing: -.03em; margin-top: .2rem; font-variant-numeric: tabular-nums;
}
.proy-nilai small { font-size: .7rem; font-weight: 700; color: rgb(var(--c-ink) / .4); margin-left: .2rem; }
.proy-sub { font-size: .72rem; font-weight: 500; color: rgb(var(--c-ink) / .5); margin-top: .2rem; line-height: 1.5; }
.proy-catatan {
  font-size: .7rem; font-weight: 600; line-height: 1.5; margin-top: .5rem;
  color: rgb(var(--c-sun-deep));
}
.proy-catatan i { margin-right: .3rem; }

/* =====================================================
   UKURAN BADAN & FOTO PROGRES
   ===================================================== */
.ukuran-baris {
  padding: .65rem .8rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--stroke);
}
.ukuran-tgl { font-size: .68rem; font-weight: 700; color: rgb(var(--c-ink) / .45); }
.ukuran-nilai { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: .3rem; }
.ukuran-nilai span { font-size: .74rem; font-weight: 600; color: rgb(var(--c-ink) / .55); }
.ukuran-nilai b { font-weight: 800; color: rgb(var(--c-ink)); font-variant-numeric: tabular-nums; }
.ukuran-nilai em {
  font-style: normal; font-size: .68rem; font-weight: 800; margin-left: .25rem;
  padding: .05rem .3rem; border-radius: .35rem;
}
.ukuran-nilai em.turun { color: rgb(var(--c-ok)); background: rgb(var(--c-ok) / .14); }
.ukuran-nilai em.naik { color: rgb(var(--c-coral)); background: rgb(var(--c-coral) / .14); }

.foto-galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .6rem; }
.foto-item {
  margin: 0; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--stroke);
}
.foto-gambar {
  aspect-ratio: 3/4; display: grid; place-items: center;
  background: rgb(var(--c-ink) / .06); color: rgb(var(--c-ink) / .3);
}
.foto-gambar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-item figcaption {
  display: flex; align-items: center; gap: .3rem;
  padding: .4rem .5rem; font-size: .68rem; font-weight: 700;
  color: rgb(var(--c-ink) / .55);
}
.foto-item figcaption span { flex: 1; min-width: 0; }
.foto-catatan {
  padding: 0 .5rem .5rem; font-size: .68rem; font-weight: 500;
  color: rgb(var(--c-ink) / .45); line-height: 1.4;
}
input[type="file"].input { padding: .55rem .75rem; font-size: .78rem; cursor: pointer; }
input[type="file"].input::file-selector-button {
  margin-right: .7rem; padding: .35rem .8rem; border: 0; border-radius: .5rem;
  font-family: inherit; font-size: .74rem; font-weight: 700; cursor: pointer;
  background: rgb(var(--c-coral) / .15); color: rgb(var(--c-coral));
}

/* =====================================================
   ONBOARDING
   ===================================================== */
.onb-progress {
  height: 4px; border-radius: 999px; overflow: hidden;
  background: rgb(var(--c-ink) / .1);
}
.onb-progress span {
  display: block; height: 100%; width: 25%; border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--c-coral)), rgb(var(--c-sun)));
  transition: width .35s var(--ease);
}
.onb-pilihan { display: flex; flex-direction: column; gap: .5rem; }
.onb-opsi {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .8rem .95rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1.5px solid var(--stroke);
  text-align: left; transition: all var(--t-fast);
}
.onb-opsi:hover { border-color: var(--stroke-hi); }
.onb-opsi.aktif {
  border-color: rgb(var(--c-coral));
  background: rgb(var(--c-coral) / .1);
  box-shadow: 0 0 0 3px rgb(var(--c-coral) / .12);
}
.onb-opsi-judul { font-size: .88rem; font-weight: 800; }
.onb-opsi-ket { font-size: .73rem; font-weight: 500; color: rgb(var(--c-ink) / .5); line-height: 1.45; }

/* =====================================================
   INDIKATOR ANTREAN OFFLINE
   ===================================================== */
.antrean-bar {
  position: fixed;
  left: 50%;
  bottom: 5.5rem;
  transform: translateX(-50%);
  z-index: 75;
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  font-size: .76rem; font-weight: 700;
  background: rgb(var(--c-sun) / .16);
  border: 1px solid rgb(var(--c-sun) / .35);
  color: rgb(var(--c-sun-deep));
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-card);
}
@media (min-width: 1024px) { .antrean-bar { bottom: 4.5rem; } }

/* Enam tab masih muat di layar sempit */
@media (max-width: 1023px) {
  .nav-btn { padding: .5rem .1rem; }
  .nav-btn span { font-size: .58rem; }
  .energi-rinci { text-align: left; }
  .proy-grid { gap: .5rem; }
}
@media (max-width: 380px) {
  .nav-btn span { font-size: .52rem; }
  .nav-btn i { font-size: .95rem; }
}

/* Ilustrasi pose untuk gerakan tanpa animasi Lottie */
.pose-statis {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  padding: 1rem;
  background: linear-gradient(135deg, rgb(var(--c-sky) / .12), rgb(var(--c-coral) / .09));
}
.pose-statis svg { width: 100%; height: auto; }
[data-theme='dark'] .pose-statis svg [stroke='#2E2A33'] { stroke: #E9E6F2; }

/* =====================================================
   PANDUAN GERAKAN INTERAKTIF
   ===================================================== */
.pd-visual-wrap { display: flex; flex-direction: column; gap: .55rem; }
.pd-visual { position: relative; min-height: 8rem; display: grid; place-items: center; overflow: hidden; }
.pd-visual.is-lottie { padding: .25rem; aspect-ratio: 4 / 3; max-height: 17rem; }
.pd-visual.is-lottie svg { width: 100% !important; height: 100% !important; }
/* Pose SVG: posisi yang tidak aktif diredupkan dengan mask */
.pd-pose { width: 100%; padding-bottom: 1.4rem; }
.pd-pose[data-pose='1'] svg {
  -webkit-mask-image: linear-gradient(90deg, #000 0 44%, rgba(0, 0, 0, .16) 56% 100%);
  mask-image: linear-gradient(90deg, #000 0 44%, rgba(0, 0, 0, .16) 56% 100%);
}
.pd-pose[data-pose='2'] svg {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .16) 0 44%, #000 56% 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .16) 0 44%, #000 56% 100%);
}
.pd-pose-label {
  position: absolute; left: 50%; bottom: .55rem; transform: translateX(-50%);
  font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: .2rem .6rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--stroke); color: rgb(var(--c-ink) / .7);
  white-space: nowrap;
}

.pd-vctrl { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pd-mini-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-width: 2.1rem; height: 2.1rem; padding: 0 .6rem;
  border-radius: 999px; font-size: .74rem; font-weight: 800;
  background: var(--surface-2); border: 1px solid var(--stroke); color: rgb(var(--c-ink) / .8);
  transition: all var(--t-fast);
}
.pd-mini-btn:hover:not(:disabled) { border-color: var(--stroke-hi); background: var(--surface-hi); }
.pd-mini-btn:disabled { opacity: .4; cursor: not-allowed; }
.pd-mini-btn[aria-pressed='true'] {
  background: rgb(var(--c-coral) / .14); border-color: rgb(var(--c-coral) / .4); color: rgb(var(--c-coral));
}
.pd-mini-btn.wide { padding: 0 .9rem; }
.pd-seg {
  display: inline-flex; padding: .18rem; gap: .15rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--stroke);
}
.pd-seg button {
  padding: .3rem .65rem; border-radius: 999px; font-size: .7rem; font-weight: 800;
  color: rgb(var(--c-ink) / .55); transition: all var(--t-fast); white-space: nowrap;
}
.pd-seg button:hover { color: rgb(var(--c-ink) / .85); }
.pd-seg button.aktif {
  color: #fff;
  background: linear-gradient(135deg, rgb(var(--c-coral)), rgb(var(--c-tang)));
  box-shadow: 0 4px 12px -5px rgb(var(--c-coral) / .9);
}

/* Tab bagian panduan */
.pd-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .2rem;
  padding: .22rem; margin-bottom: .9rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--stroke);
}
.pd-tabs button {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .5rem .25rem; border-radius: .6rem;
  font-size: .72rem; font-weight: 800; color: rgb(var(--c-ink) / .5);
  transition: all var(--t-fast);
}
.pd-tabs button i { font-size: .8em; }
.pd-tabs button:hover { color: rgb(var(--c-ink) / .85); }
.pd-tabs button.aktif { background: var(--bg-1); color: rgb(var(--c-coral)); box-shadow: 0 4px 14px -8px rgba(0, 0, 0, .5); }
@media (max-width: 420px) { .pd-tabs button i { display: none; } }
.pd-pane { animation: fadeIn .25s var(--ease) both; }

/* Stepper langkah */
.pd-step-bar { display: flex; gap: .3rem; margin: .5rem 0 .7rem; }
.pd-step-bar button {
  flex: 1; height: .38rem; border-radius: 999px; background: rgb(var(--c-ink) / .1);
  transition: background var(--t);
}
.pd-step-bar button.lewat { background: rgb(var(--c-coral) / .45); }
.pd-step-bar button.aktif { background: linear-gradient(90deg, rgb(var(--c-coral)), rgb(var(--c-sun))); }
.pd-step-card {
  display: flex; gap: .85rem; align-items: flex-start;
  min-height: 6.2rem; padding: 1rem 1.05rem; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--stroke);
  touch-action: pan-y; user-select: none;
}
.pd-step-card.anim { animation: pdStepIn .32s var(--ease) both; }
.pd-step-card.anim.mundur { animation-name: pdStepInBack; }
@keyframes pdStepIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes pdStepInBack { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.pd-step-num {
  flex: none; width: 2.2rem; height: 2.2rem; border-radius: 999px;
  display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: #fff;
  background: linear-gradient(135deg, rgb(var(--c-coral)), rgb(var(--c-tang)));
  box-shadow: 0 6px 14px -6px rgb(var(--c-coral) / .9);
}
.pd-step-text { font-size: .95rem; font-weight: 600; line-height: 1.55; color: rgb(var(--c-ink) / .9); }
.pd-step-card.bicara .pd-step-num { animation: pdPulse 1.1s ease-in-out infinite; }
@keyframes pdPulse { 50% { box-shadow: 0 0 0 7px rgb(var(--c-coral) / .18); } }
.pd-step-nav { display: flex; align-items: center; gap: .45rem; margin-top: .75rem; }
.pd-step-nav .btn-ghost { flex: 1; padding-top: .55rem; padding-bottom: .55rem; }
.pd-step-nav .btn-ghost.aktif { color: rgb(var(--c-coral)); border-color: rgb(var(--c-coral) / .4); background: rgb(var(--c-coral) / .1); }
.panduan-steps li { cursor: pointer; border-radius: .6rem; }
.panduan-steps li.aktif span { color: rgb(var(--c-coral)); font-weight: 700; }

/* Isi tab Otot / Hindari / Variasi */
.pd-otot { display: flex; flex-wrap: wrap; gap: .4rem; }
.pd-otot span {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .75rem; border-radius: 999px; font-size: .76rem; font-weight: 800;
  background: rgb(var(--c-coral) / .1); border: 1px solid rgb(var(--c-coral) / .22); color: rgb(var(--c-coral));
}
.pd-info {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .8rem .9rem; margin-top: .6rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--stroke);
  font-size: .82rem; font-weight: 600; line-height: 1.5; color: rgb(var(--c-ink) / .8);
}
.pd-info > i { margin-top: .2rem; color: rgb(var(--c-sky)); }
.pd-info.warn > i { color: rgb(var(--c-sun-deep)); }
.pd-info.ok > i { color: rgb(var(--c-ok)); }
.pd-info b { display: block; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--c-ink) / .5); margin-bottom: .1rem; }
.pd-var {
  padding: .9rem 1rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1.5px solid var(--stroke);
}
.pd-var + .pd-var { margin-top: .55rem; }
.pd-var.saran { border-color: rgb(var(--c-coral) / .5); box-shadow: 0 0 0 3px rgb(var(--c-coral) / .1); }
.pd-var-judul { display: flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 800; margin-bottom: .25rem; }
.pd-var-judul .meta-pill { margin-left: auto; }
.pd-var p { font-size: .82rem; font-weight: 500; line-height: 1.5; color: rgb(var(--c-ink) / .75); }

/* Latihan percobaan */
.pd-coba {
  margin-bottom: 1rem; padding: .9rem 1rem; border-radius: var(--radius);
  background: linear-gradient(135deg, rgb(var(--c-coral) / .12), rgb(var(--c-sun) / .08));
  border: 1px solid rgb(var(--c-coral) / .3);
}
.pd-coba-body { display: flex; align-items: center; gap: 1rem; margin: .5rem 0 .7rem; }
.pd-coba-angka {
  flex: none; min-width: 3.4rem; text-align: center;
  font-family: Sora, sans-serif; font-size: 2.4rem; font-weight: 800; line-height: 1; color: rgb(var(--c-coral));
}
.pd-coba-cue { font-size: .86rem; font-weight: 600; line-height: 1.5; color: rgb(var(--c-ink) / .85); }
.pd-coba-bar { height: .38rem; border-radius: 999px; overflow: hidden; background: rgb(var(--c-ink) / .1); }
.pd-coba-bar span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--c-coral)), rgb(var(--c-sun)));
  transition: width .2s linear;
}

/* Filter daftar panduan */
.pd-filter { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .8rem; }
.pd-cari {
  display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem;
  border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--stroke);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pd-cari:focus-within { border-color: rgb(var(--c-coral) / .5); box-shadow: 0 0 0 3px rgb(var(--c-coral) / .12); }
.pd-cari i { color: rgb(var(--c-ink) / .4); font-size: .85rem; }
.pd-cari input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; font-size: .86rem; font-weight: 600; color: rgb(var(--c-ink)); }
.pd-cari input::placeholder { color: rgb(var(--c-ink) / .38); }
.pd-chips { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .15rem; scrollbar-width: none; }
.pd-chips::-webkit-scrollbar { display: none; }
.pd-chips button {
  flex: none; display: inline-flex; align-items: center; gap: .35rem;
  padding: .38rem .75rem; border-radius: 999px; font-size: .72rem; font-weight: 800;
  background: var(--surface-2); border: 1px solid var(--stroke); color: rgb(var(--c-ink) / .6);
  transition: all var(--t-fast);
}
.pd-chips button.aktif { background: rgb(var(--c-coral) / .14); border-color: rgb(var(--c-coral) / .4); color: rgb(var(--c-coral)); }
.pd-chips button small { font-size: .62rem; opacity: .65; }
.pd-item-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.pd-item-tags .meta-pill { padding: .15rem .5rem; font-size: .6rem; }

/* Aba-aba langkah di Ruang Latihan */
.pl-cue {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-top: 1rem; padding: .75rem .9rem; border-radius: var(--radius-sm);
  background: rgb(var(--c-sun) / .1); border: 1px solid rgb(var(--c-sun) / .28);
  font-size: .86rem; font-weight: 600; line-height: 1.5; color: rgb(var(--c-ink) / .88);
}
.pl-cue > i { margin-top: .2rem; color: rgb(var(--c-sun-deep)); }
.pl-cue.ganti { animation: pdStepIn .3s var(--ease) both; }
.pl-cue-no { flex: none; font-size: .68rem; font-weight: 800; color: rgb(var(--c-ink) / .45); margin-top: .15rem; }
.pl-tools { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }

/* =====================================================
   BANNER MELAYANG — AJAKAN PASANG PWA
   ===================================================== */
.install-banner {
  position: fixed;
  left: .75rem;
  right: .75rem;
  bottom: calc(4.9rem + env(safe-area-inset-bottom));
  z-index: 55; /* di atas nav bawah (50), di bawah modal (60+) */
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  max-width: 26rem;
  margin: 0 auto;
  padding: .9rem 2.4rem .9rem .9rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-1) 90%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgb(var(--c-coral) / .32);
  box-shadow: var(--shadow-pop), 0 0 0 4px rgb(var(--c-coral) / .06);
  animation: installNaik .5s var(--ease) both;
}
.install-banner.keluar { animation: installTurun .28s var(--ease) both; }
@keyframes installNaik { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes installTurun { to { opacity: 0; transform: translateY(20px) scale(.97); } }

.install-ico {
  flex: none; width: 2.75rem; height: 2.75rem; border-radius: .8rem; object-fit: cover;
  box-shadow: 0 8px 18px -8px rgb(var(--c-coral) / .8);
}
.install-body { min-width: 0; flex: 1; }
.install-title { font-family: Sora, 'Plus Jakarta Sans', sans-serif; font-size: .95rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.install-desc { margin-top: .2rem; font-size: .78rem; font-weight: 500; line-height: 1.5; color: rgb(var(--c-ink) / .62); }
.install-actions { display: flex; gap: .5rem; margin-top: .7rem; }
.install-btn { padding: .5rem .95rem !important; font-size: .78rem !important; border-radius: 999px !important; }
.install-x {
  position: absolute; top: .55rem; right: .55rem;
  width: 1.9rem; height: 1.9rem; border-radius: 999px;
  display: grid; place-items: center; font-size: .8rem;
  color: rgb(var(--c-ink) / .5); transition: all var(--t-fast);
}
.install-x:hover { background: var(--surface-2); color: rgb(var(--c-ink) / .9); }

/* Langkah pemasangan (iOS Safari) */
.install-steps { list-style: none; margin: .55rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.install-steps li { display: flex; gap: .55rem; align-items: flex-start; font-size: .78rem; font-weight: 500; line-height: 1.5; color: rgb(var(--c-ink) / .8); }
.install-steps li b {
  flex: none; width: 1.25rem; height: 1.25rem; margin-top: .1rem; border-radius: 999px;
  display: grid; place-items: center; font-size: .64rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, rgb(var(--c-coral)), rgb(var(--c-tang)));
}
.install-steps i { color: rgb(var(--c-coral)); margin: 0 .1rem; }

/* Layar login: tidak ada nav bawah dan berada di atas lapisan login (90) */
.auth-mode .install-banner { z-index: 96; bottom: calc(1rem + env(safe-area-inset-bottom)); }

/* Desktop: pojok kanan bawah, tidak menutupi sidebar */
@media (min-width: 1024px) {
  .install-banner { left: auto; right: 1.5rem; bottom: 1.5rem; margin: 0; width: 24rem; }
  .auth-mode .install-banner { bottom: 1.5rem; }
}