:root{
  --app-max:440px;
  --bg:#edf3f6;
  --surface:#ffffff;
  --surface-soft:#f9fbfc;
  --line:#e4ebf0;
  --text:#19324d;
  --muted:#6b7a90;
  --teal:#149a8f;
  --teal-2:#0f887f;
  --teal-3:#0c6b65;
  --teal-soft:#e6f8f5;
  --teal-pale:#f2fbf9;
  --yellow:#ffd331;
  --yellow-2:#f4b800;
  --red:#d63c4c;
  --red-soft:#fdecef;
  --shadow:0 12px 34px rgba(16,24,40,.08);
  --shadow-soft:0 24px 56px rgba(16,24,40,.12);
  --radius:28px;
  --radius-lg:32px;
  --radius-md:20px;
  --radius-sm:16px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#f2f7f8 0%,#eef2f6 100%);
}
a,button,input,textarea,select{font:inherit}
a{color:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
svg{display:block}

.app{
  width:min(100%,var(--app-max));
  min-height:100dvh;
  margin:0 auto;
  background:var(--bg);
  position:relative;
  overflow-x:hidden;
}

.screen{
  min-height:100dvh;
  padding:24px 22px 30px;
  background:linear-gradient(180deg,#179d92 0%,#108780 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
}

.back-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:14px;
  color:#fff;
  text-decoration:none;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.back-btn svg{width:24px;height:24px;stroke:currentColor;stroke-width:2.3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.auth-head{display:flex;align-items:center;gap:12px;margin-top:max(6px,env(safe-area-inset-top))}
.title{font-size:clamp(2rem,7vw,2.75rem);line-height:1.06;font-weight:850;margin:28px 0 10px}
.subtitle{font-size:1.03rem;line-height:1.55;color:#e7fcf8;margin:0 0 28px;max-width:320px}
.auth-form{position:relative;z-index:2}
.field{
  width:100%;
  min-height:58px;
  border:1px solid #d8dee6;
  border-radius:18px;
  padding:16px 18px;
  font-size:1.04rem;
  color:var(--text);
  background:#fff;
  outline:none;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.field::placeholder{color:#8a95a7}
.field:focus{border-color:#6ad6ca;box-shadow:0 0 0 4px rgba(20,154,143,.14)}
.field-soft{background:#fff7f7}
.field + .field{margin-top:14px}
.textarea{min-height:140px;resize:vertical;padding-top:16px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:56px;
  border:0;
  border-radius:18px;
  padding:14px 20px;
  font-size:1rem;
  font-weight:800;
  text-decoration:none;
  letter-spacing:.01em;
}
.btn-yellow{background:linear-gradient(180deg,#ffd93f 0%,#ffc91d 100%);color:#111827;box-shadow:0 14px 24px rgba(255,211,49,.28)}
.btn-white{background:#fff;color:var(--teal-2);box-shadow:0 10px 20px rgba(16,24,40,.10)}
.btn-teal{background:linear-gradient(180deg,#15a094 0%,#10867f 100%);color:#fff;box-shadow:0 14px 24px rgba(20,154,143,.22)}
.btn-outline{background:#fff;color:var(--teal);border:1.6px solid #bde8e2}
.btn-danger-soft{background:#f8dede;color:#a51f2d;box-shadow:none}
.error,.success,.notice{padding:14px 16px;border-radius:18px;font-weight:700;line-height:1.48;margin-bottom:18px}
.error{background:#fde7eb;color:#a0163b}
.success{background:#dff8e8;color:#116534}
.notice{background:#eef5ff;color:#1e4ea3}

.rings{position:absolute;inset:auto auto auto auto;pointer-events:none}
.rings.welcome-ring-1{width:560px;height:560px;border-radius:50%;border:3px solid rgba(255,255,255,.13);right:-190px;top:8px}
.rings.welcome-ring-1::before,.rings.welcome-ring-1::after{content:"";position:absolute;border-radius:50%;border:3px solid rgba(255,255,255,.14)}
.rings.welcome-ring-1::before{inset:82px}
.rings.welcome-ring-1::after{inset:160px;background:rgba(255,255,255,.1)}

.splash{display:flex;align-items:center;justify-content:center;text-align:center}
.splash::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right, rgba(255,255,255,.10), transparent 30%), linear-gradient(180deg,#179d92 0%,#118880 100%)}
.splash .rings{width:560px;height:560px;border-radius:50%;border:3px solid rgba(255,255,255,.12);left:50%;top:50%;transform:translate(-50%,-50%)}
.splash .rings::before,.splash .rings::after{content:"";position:absolute;border-radius:50%;border:3px solid rgba(255,255,255,.14)}
.splash .rings::before{inset:86px}
.splash .rings::after{inset:170px;background:rgba(255,255,255,.1)}
.splash-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:18px}
.splash-logo{width:128px;height:128px;border-radius:36px;background:rgba(255,255,255,.16);display:grid;place-items:center;box-shadow:0 18px 40px rgba(0,0,0,.12);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18)}
.splash-logo .logo-circle{width:88px;height:88px;border-width:6px}
.splash .brand{font-size:2.9rem;font-weight:900;letter-spacing:-.03em}
.splash-note{font-size:1rem;color:#eaf9f8;max-width:280px;line-height:1.5}

.welcome{padding-top:max(18px,env(safe-area-inset-top))}
.welcome-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;min-height:calc(100dvh - 48px);padding-top:22px}
.logo-showcase{position:relative;margin-top:10px}
.logo-halo{position:absolute;inset:-22px;border-radius:50%;background:radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);filter:blur(2px)}
.logo-circle{position:relative;width:142px;height:142px;border-radius:50%;background:#e70038;border:8px solid #fff;display:grid;place-items:center;box-shadow:0 20px 38px rgba(0,0,0,.16)}
.logo-circle svg{width:84px;height:42px;stroke:#fff;stroke-width:10;fill:none;stroke-linecap:round;stroke-linejoin:round}
.brand{font-size:clamp(2.5rem,9vw,3.3rem);font-weight:900;line-height:1;letter-spacing:-.03em;margin-top:24px}
.tagline{margin-top:12px;font-size:1.03rem;line-height:1.45;color:#eaf9f8;text-align:center;max-width:320px}
.hero-card{
  width:100%;
  margin-top:36px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.15);
  border-radius:30px;
  padding:24px 20px;
  box-shadow:0 16px 38px rgba(5,61,57,.16);
  backdrop-filter:blur(6px);
}
.join{font-size:2.3rem;font-weight:900;line-height:1.08;margin:0 0 12px;text-align:left}
.join-sub{font-size:1.02rem;line-height:1.58;color:#edfcfa;text-align:left;max-width:320px}
.welcome-features{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.welcome-chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);padding:12px 10px;border-radius:18px;text-align:center;font-size:.82rem;font-weight:700;line-height:1.35}
.welcome-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;margin-top:auto;padding-top:26px;padding-bottom:max(14px,env(safe-area-inset-bottom))}

.dashboard{min-height:100dvh;background:linear-gradient(180deg,#edf4f6 0,#eef2f6 100%);padding-bottom:108px}
.hero{
  position:relative;
  padding:calc(20px + env(safe-area-inset-top)) 18px 22px;
  background:linear-gradient(180deg,#139a90 0%,#0f857d 100%);
  color:#fff;
  overflow:hidden;
}
.hero::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;right:-120px;top:-90px;border:2px solid rgba(255,255,255,.12)}
.hero::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:20px;top:30px;border:2px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08)}
.hero-grid{position:relative;z-index:1}
.brand-row{display:flex;align-items:center;gap:12px;font-weight:850;font-size:1.22rem}
.brand-mini{width:42px;height:42px;border-radius:50%;background:#e70038;border:2px solid #fff;display:grid;place-items:center;box-shadow:0 12px 18px rgba(0,0,0,.10)}
.brand-mini svg{width:26px;height:26px;stroke:#fff;stroke-width:8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.greeting{font-size:clamp(2.2rem,8vw,3.1rem);font-weight:900;line-height:1.08;letter-spacing:-.03em;margin:20px 0 10px;max-width:280px}
.health-tip{font-size:1.02rem;line-height:1.58;color:#eaf9f7;margin:0 0 18px;max-width:325px}
.promo-wrap{background:#dceeed;border-radius:28px;overflow:hidden;box-shadow:0 14px 32px rgba(16,24,40,.14);border:1px solid rgba(255,255,255,.22)}
.promo-slide{display:none;width:100%;aspect-ratio:1.78/1;object-fit:cover}
.promo-slide.active{display:block}
.promo-dots{position:absolute;right:14px;bottom:14px;display:flex;gap:6px}
.promo-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.58)}
.promo-dot.active{background:#fff;transform:scale(1.12)}
.content{padding:16px}
.card,.med-card,.family-card,.plain-card{
  background:var(--surface);
  border-radius:28px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.card{padding:20px;margin-bottom:16px}
.med-card,.family-card,.plain-card{padding:20px;margin-top:16px}
.med-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.time-label{font-size:1.08rem;font-weight:850;color:var(--teal-3)}
.status-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:8px 12px;background:#e7fbf7;color:#0a916b;font-size:.88rem;font-weight:800}
.med-name{font-size:1.55rem;font-weight:900;line-height:1.2;margin:14px 0 8px;letter-spacing:-.02em}
.med-note{font-size:.98rem;color:var(--muted);line-height:1.55;margin:0 0 18px}
.section-heading{margin:26px 4px 12px;font-size:.98rem;font-weight:900;letter-spacing:.09em;color:#334155;text-transform:uppercase}
.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.menu-card{
  min-height:172px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  padding:18px 16px;
  background:#fff;
  border:1px solid #e4ebf0;
  border-radius:24px;
  box-shadow:var(--shadow);
  text-decoration:none;
}
.menu-card.danger{background:linear-gradient(180deg,#fff7f8 0%,#fff1f3 100%)}
.menu-icon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:#e9fbf7;color:var(--teal)}
.menu-icon svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.menu-card.danger .menu-icon{background:#fdecef;color:var(--red)}
.menu-copy{width:100%}
.menu-title{font-size:1.04rem;font-weight:900;color:#0f172a;line-height:1.22;margin-top:22px}
.menu-sub{font-size:.92rem;color:var(--muted);line-height:1.4;margin-top:6px}
.menu-card.danger .menu-title,.menu-card.danger .menu-sub{color:#a11e2b}
.orange{color:#d88000!important;font-weight:800}
.extra-card{
  display:grid;
  grid-template-columns:58px 1fr auto;
  align-items:center;
  gap:12px;
  padding:16px;
  margin-top:16px;
  text-decoration:none;
  border-radius:24px;
  background:linear-gradient(180deg,#e6fbf7 0%,#dff8f4 100%);
  border:1px solid #cceee8;
  box-shadow:var(--shadow);
}
.extra-icon{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:#cff6ee;color:var(--teal)}
.extra-icon svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.extra-title{font-size:1.03rem;font-weight:900;color:#067b73}
.extra-sub{font-size:.92rem;line-height:1.42;color:#285d59;margin-top:4px}
.extra-open{font-size:.96rem;font-weight:900;color:#067b73;white-space:nowrap}
.family-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.family-title{font-size:.94rem;font-weight:900;letter-spacing:.06em;color:#15936d;text-transform:uppercase}
.family-status{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:#eafaf4;color:#099669;font-size:.88rem;font-weight:800}
.family-person{display:flex;align-items:center;gap:14px;background:#f7fbfd;border:1px solid #edf2f7;border-radius:22px;padding:14px;margin:18px 0 14px}
.avatar{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:#e4f7fb;color:var(--teal)}
.avatar svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.family-name{font-size:1.08rem;font-weight:900;color:#0f172a}
.family-phone{font-size:.94rem;color:#526072;margin-top:4px}
.family-copy{font-size:.96rem;color:var(--muted);line-height:1.5;margin:0}
.family-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.wa-btn,.phone-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:14px;padding:12px 16px;color:#fff;text-decoration:none;font-size:.96rem;font-weight:900}
.wa-btn{background:#0ea470}
.phone-btn{background:#101b43}
.wa-btn svg,.phone-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bottom-nav{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:min(100%,var(--app-max));
  height:92px;
  padding:10px 8px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  border-top:1px solid rgba(228,235,240,.92);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  z-index:30;
  box-shadow:0 -10px 22px rgba(15,23,42,.06);
}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#748095;text-decoration:none;font-size:.8rem;font-weight:700}
.bottom-nav a.active{color:var(--teal)}
.nav-icon{width:24px;height:24px;color:currentColor}
.nav-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.tensi-action{position:relative;top:-22px}
.tensi-circle{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#14a094 0%,#0f857e 100%);border:6px solid #fff;box-shadow:0 12px 28px rgba(16,24,40,.18);margin:0 auto;color:#fff}
.tensi-circle svg{width:44px;height:44px;stroke:currentColor;fill:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.tensi-label{margin-top:2px;color:var(--teal)!important;font-weight:900}

.topbar{
  position:relative;
  background:linear-gradient(180deg,#169b91 0%,#108980 100%);
  color:#fff;
  padding:calc(18px + env(safe-area-inset-top)) 16px 18px;
  overflow:hidden;
}
.topbar::after{content:"";position:absolute;inset:auto -80px -110px auto;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.07)}
.topbar-row{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px}
.topbar .name{font-size:1.25rem;font-weight:900;letter-spacing:-.02em}
.topbar .logout{color:#fff;text-decoration:none;font-weight:800;font-size:.95rem}
.icon-link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:14px;color:#fff;text-decoration:none;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.icon-link svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.page-body{padding:16px 16px 116px}
.page-body .card:last-child{margin-bottom:0}
.card h3{margin:0 0 10px;font-size:1.08rem}
.small{font-size:.92rem;color:var(--muted);line-height:1.5}
.metric{font-size:2rem;font-weight:900;color:var(--teal-3);letter-spacing:-.03em}
.center{text-align:center}
.timer{font-size:3.25rem;font-weight:900;letter-spacing:-.04em;color:var(--teal-3);margin:24px 0}
.circle-btn{width:120px;height:120px;border-radius:50%;border:0;background:linear-gradient(180deg,#ffd93f 0%,#ffc61f 100%);font-weight:900;font-size:1.06rem;box-shadow:0 18px 34px rgba(255,211,49,.26)}
.install-note{font-size:.85rem;color:#72808f;line-height:1.5;margin-top:10px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row .btn{flex:1 1 0}
.row-between{display:flex;gap:14px;align-items:center;justify-content:space-between}
.list-item{padding:16px 0;border-bottom:1px solid #edf1f5}
.list-item:last-child{border-bottom:0}
.inline-form{display:inline}
.danger-link{border:0;background:none;color:#b91c1c;font-weight:800}
.form-label{display:block;font-size:.98rem;font-weight:850;color:#384659;margin:0 0 10px}
.form-help{font-size:.84rem;color:#72808f;margin:-8px 0 16px}

/* Profile page V4 */
.profile-page{background:var(--bg)}
.profile-topbar{padding:calc(20px + env(safe-area-inset-top)) 18px 18px;background:linear-gradient(180deg,#159b90 0%,#10867f 100%);color:#fff}
.profile-bar{display:flex;align-items:center;gap:16px}
.profile-title{font-size:1.2rem;font-weight:900;letter-spacing:-.02em}
.profile-shell{padding:16px 16px 120px}
.profile-section{padding:24px 20px;background:#fff;border-radius:30px;border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:16px}
.profile-section.soft{background:linear-gradient(180deg,#eef8f7 0%,#edf7f6 100%)}
.profile-section-title{font-size:1.05rem;font-weight:900;color:#147f78;margin:0 0 8px;letter-spacing:-.02em}
.profile-section-desc{font-size:.98rem;line-height:1.5;color:var(--muted);margin:0 0 18px}
.select-wrap{position:relative}
.select-wrap::after{content:"";position:absolute;right:18px;top:50%;width:10px;height:10px;border-right:2px solid #23334c;border-bottom:2px solid #23334c;transform:translateY(-65%) rotate(45deg);pointer-events:none}
.select-wrap select{appearance:none;-webkit-appearance:none;padding-right:46px}
.form-stack{display:grid;gap:16px}
.action-stack{display:grid;gap:16px;margin-top:20px}

@media (max-width:390px){
  .screen{padding-left:16px;padding-right:16px}
  .welcome-chip{font-size:.76rem;padding:10px 8px}
  .join{font-size:2rem}
  .menu-grid{gap:12px}
  .menu-card{min-height:164px;padding:16px 14px}
  .menu-title{font-size:.98rem}
  .menu-sub{font-size:.85rem}
  .extra-card{grid-template-columns:54px 1fr;gap:12px}
  .extra-open{grid-column:2}
  .family-head{align-items:flex-start;flex-direction:column}
  .family-actions{grid-template-columns:1fr}
  .bottom-nav a{font-size:.74rem}
  .tensi-circle{width:76px;height:76px}
  .tensi-circle svg{width:40px;height:40px}
  .profile-title{font-size:1.08rem}
}

@media (min-width:900px){
  body{padding:16px 0}
  .app{min-height:calc(100vh - 32px);border-radius:34px;box-shadow:var(--shadow-soft);overflow:hidden}
  .screen,.dashboard{min-height:calc(100vh - 32px)}
  .bottom-nav{bottom:0;border-radius:0 0 34px 34px}
}

/* ===== V5: preserve original TensAware opening screens ===== */
.screen.classic-splash,
.screen.classic-welcome{
  background:#218f84;
  color:#fff;
  padding:0;
  min-height:100dvh;
}
.classic-splash{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.classic-splash-rings{
  position:absolute;
  width:min(83vw,520px);
  aspect-ratio:1;
  border:3px solid rgba(255,255,255,.16);
  border-radius:50%;
  left:50%;top:50%;transform:translate(-50%,-50%);
}
.classic-splash-rings::before,.classic-splash-rings::after{
  content:"";position:absolute;border-radius:50%;border:3px solid rgba(255,255,255,.18)
}
.classic-splash-rings::before{inset:17%}
.classic-splash-rings::after{inset:33%;background:rgba(255,255,255,.13)}
.classic-splash-brand{position:relative;z-index:2;font-size:clamp(2.25rem,8vw,3.2rem);font-weight:850;line-height:1;text-align:center}

.classic-welcome{position:relative;overflow:hidden}
.classic-welcome-rings{
  position:absolute;
  width:min(79vw,520px);
  aspect-ratio:1;
  border:3px solid rgba(255,255,255,.16);
  border-radius:50%;
  right:-30%;top:0;
}
.classic-welcome-rings::before,.classic-welcome-rings::after{
  content:"";position:absolute;border-radius:50%;border:3px solid rgba(255,255,255,.18)
}
.classic-welcome-rings::before{inset:17%}
.classic-welcome-rings::after{inset:33%;background:rgba(255,255,255,.13)}
.classic-welcome-content{
  position:relative;z-index:2;
  min-height:100dvh;
  padding:calc(64px + env(safe-area-inset-top)) 38px calc(28px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.classic-logo-circle{
  width:132px;height:132px;border-radius:50%;background:#e60036;border:8px solid #fff;
  display:grid;place-items:center;box-shadow:0 9px 22px rgba(0,0,0,.13)
}
.classic-logo-circle svg{width:72%;height:auto}
.classic-logo-circle path{fill:none;stroke:#fff;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.classic-brand{font-size:clamp(2.15rem,7.5vw,3rem);font-weight:850;line-height:1;margin-top:22px}
.classic-tagline{font-size:clamp(1rem,3.8vw,1.35rem);margin-top:15px;color:#e9f8f6;line-height:1.4}
.classic-join{font-size:clamp(2rem,7vw,2.9rem);font-weight:850;line-height:1.1;margin:clamp(64px,12vh,118px) 0 18px}
.classic-join-sub{font-size:clamp(1.05rem,4vw,1.35rem);line-height:1.45;color:#e7f5f3}
.classic-actions{display:grid;grid-template-columns:1fr 1fr;gap:28px;width:100%;margin-top:auto}
.classic-btn{display:flex;align-items:center;justify-content:center;min-height:64px;border-radius:4px;text-decoration:none;font-size:1.15rem;font-weight:850;box-shadow:0 3px 7px rgba(0,0,0,.18)}
.classic-btn-white{background:#fff;color:#0f766e}
.classic-btn-yellow{background:#ffdb43;color:#111827}

/* ===== V5: Riwayat & Evaluasi Kesehatan ===== */
.history-page{min-height:100dvh;background:#f4f6f8;padding-bottom:28px}
.history-topbar{
  min-height:126px;
  padding:calc(26px + env(safe-area-inset-top)) 28px 24px;
  background:#149a8f;color:#fff;
  display:flex;align-items:flex-end;gap:18px;
  box-shadow:0 2px 7px rgba(15,23,42,.10)
}
.history-back{width:40px;height:40px;display:grid;place-items:center;color:#fff;text-decoration:none;flex:0 0 auto}
.history-back svg{width:29px;height:29px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.history-title{font-size:clamp(1.28rem,5vw,1.75rem);font-weight:850;line-height:1.2;padding-bottom:4px}
.history-shell{padding:20px 16px 36px}
.history-section-label{font-size:1.02rem;letter-spacing:.03em;color:#334155;margin:0 4px 18px;font-weight:850}
.evaluation-card{
  display:block;text-decoration:none;background:#fff;border:1px solid #e5e8ec;border-radius:28px;
  padding:22px 20px 20px;margin-bottom:16px;box-shadow:0 7px 14px rgba(15,23,42,.12)
}
.eval-card-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.eval-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center}
.eval-icon svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.eval-icon-red{background:#fee2e2;color:#dc2d35}
.eval-icon-blue{background:#dbeafe;color:#2563eb}
.eval-icon-purple{background:#ede9fe;color:#7c3aed}
.eval-badge{display:inline-flex;align-items:center;min-width:104px;justify-content:flex-start;padding:8px 10px;border-radius:4px;font-size:.95rem;font-weight:850;text-transform:none}
.badge-green{background:#d9f8e5;color:#1e7b38}
.badge-yellow{background:#fff1b8;color:#ad5a0a}
.badge-purple{background:#f2ddff;color:#7a2aa7}
.eval-label{font-size:1.08rem;color:#67778b;margin-top:18px}
.eval-value{font-size:clamp(2.35rem,9vw,3rem);font-weight:900;letter-spacing:.01em;color:#101827;margin-top:7px;line-height:1.1}
.eval-value span{font-size:1rem;font-weight:800;color:#667085;letter-spacing:0}
.eval-link{font-size:.96rem;color:#0d9488;margin-top:14px;line-height:1.4}

.detail-card{background:#fff;border:1px solid #e5e8ec;border-radius:26px;padding:20px;margin-bottom:16px;box-shadow:0 7px 18px rgba(15,23,42,.08)}
.detail-card h2{font-size:1.08rem;margin:0 0 14px;color:#25364d}
.detail-summary{font-size:.95rem;line-height:1.5;color:#5f6f84;margin:14px 0 18px}
.chart-box{height:158px;border-radius:18px;background:linear-gradient(180deg,#f9fcfd,#f4f8fa);padding:12px;overflow:hidden}
.chart-box svg{width:100%;height:100%}
.grid-line{fill:none;stroke:#dce5ea;stroke-width:1}
.chart-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.chart-sys{stroke:#e43c49}
.chart-dia{stroke:#149a8f}
.chart-legend{display:flex;gap:18px;margin:12px 0 2px;font-size:.86rem;color:#64748b}
.chart-legend span{display:flex;align-items:center;gap:7px}
.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block}.legend-dot.sys{background:#e43c49}.legend-dot.dia{background:#149a8f}
.history-row{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:14px 0;border-bottom:1px solid #edf1f4}
.history-row:last-child{border-bottom:0}
.history-row strong{display:block;color:#172033;font-size:1rem}
.history-row span{display:block;color:#748095;font-size:.86rem;margin-top:4px}
.history-row time{font-size:.82rem;color:#8490a2;white-space:nowrap}
.metric-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:12px}
.metric-head>div span{display:block;font-size:.9rem;color:#738095;margin-bottom:4px}
.metric-head strong{display:block;font-size:2.5rem;line-height:1;color:#101827}
.metric-head strong small{font-size:1rem;color:#667085}

@media(max-width:390px){
  .classic-welcome-content{padding-left:26px;padding-right:26px}
  .classic-actions{gap:14px}
  .classic-btn{min-height:58px}
  .history-topbar{padding-left:20px;padding-right:20px}
  .history-shell{padding-left:14px;padding-right:14px}
  .evaluation-card{padding:20px 18px}
  .eval-badge{min-width:auto}
}

/* Education / Materi V6 */
.education-page{background:#f5f7fa;min-height:100dvh;padding-bottom:28px}
.education-header{
  min-height:164px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:calc(26px + env(safe-area-inset-top)) 28px 24px;
  background:#149a8f;
  color:#fff;
  box-shadow:0 3px 10px rgba(15,23,42,.08);
}
.education-header h1{margin:0;font-size:1.72rem;line-height:1.12;font-weight:900;letter-spacing:-.02em}
.education-header p{margin:8px 0 0;font-size:1.02rem;line-height:1.35;color:#e7fbf8}
.education-back{width:48px;height:48px;display:grid;place-items:center;flex:0 0 auto;color:#fff;text-decoration:none}
.education-back svg{width:36px;height:36px;stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.education-shell{padding:20px 16px 28px}
.education-hint{padding:18px 18px;background:#e8fbf3;color:#0c6c58;border-radius:0;font-size:1rem;line-height:1.5;margin-bottom:18px}
.education-list{display:grid;gap:14px}
.education-card{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  min-height:126px;
  padding:18px 18px;
  background:#fff;
  border:1px solid #e4e7ec;
  border-radius:22px;
  text-decoration:none;
  box-shadow:0 6px 15px rgba(16,24,40,.10);
}
.education-number{width:56px;height:56px;display:grid;place-items:center;font-size:1.5rem;font-weight:900}
.education-copy{min-width:0}
.education-title{font-size:1.16rem;font-weight:900;line-height:1.25;color:#111827}
.education-subtitle{font-size:.96rem;line-height:1.38;color:#6b7a90;margin-top:6px}
.education-open{font-size:1rem;font-weight:900;color:#149a8f;white-space:nowrap}
.edu-blue{background:#dff2ff;color:#1186c4}
.edu-yellow{background:#fff3c8;color:#d57a00}
.edu-red{background:#ffe0e0;color:#d61f35}
.edu-green{background:#e5faef;color:#0c9b6a}
.edu-purple{background:#f2e5ff;color:#8d34e6}
.edu-cyan{background:#c9f8ef;color:#0b837c}
.edu-slate{background:#e1e8f0;color:#334155}
.education-detail-shell{padding:20px 16px 32px}
.education-detail-card{background:#fff;border-radius:26px;border:1px solid #e4e7ec;box-shadow:0 10px 26px rgba(16,24,40,.09);padding:22px}
.education-detail-number{width:64px;height:64px;display:grid;place-items:center;font-size:1.6rem;font-weight:900;margin-bottom:18px}
.education-detail-card h2{margin:0;color:#111827;font-size:1.5rem;line-height:1.22;font-weight:900;letter-spacing:-.02em}
.education-detail-lead{margin:10px 0 20px;color:#65758b;line-height:1.5;font-size:1rem}
.education-detail-points{display:grid;gap:12px;margin:0 0 22px}
.education-point{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:flex-start;padding:14px;border-radius:16px;background:#f8fafc}
.education-point span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#ddf6f2;color:#0c837a;font-weight:900}
.education-point p{margin:1px 0 0;color:#405066;line-height:1.55;font-size:.96rem}
.education-note{margin-top:14px;padding:15px 16px;border-radius:16px;background:#eef5ff;color:#375274;font-size:.88rem;line-height:1.5}

@media (max-width:390px){
  .education-header{min-height:148px;padding-left:18px;padding-right:18px;gap:10px}
  .education-header h1{font-size:1.46rem}
  .education-header p{font-size:.92rem}
  .education-shell{padding-left:12px;padding-right:12px}
  .education-card{grid-template-columns:54px minmax(0,1fr) auto;gap:10px;min-height:116px;padding:16px 14px}
  .education-number{width:50px;height:50px;font-size:1.35rem}
  .education-title{font-size:1.04rem}
  .education-subtitle{font-size:.88rem}
  .education-open{font-size:.92rem}
}