/* «نفس تازه» theme: white, sky blue and pink — bright, cheerful, health-minded.
   Text colours keep ≥4.5:1 on white; button gradient ends keep ≥4.5:1 under white text. */
:root {
  --primary: #2563EB; --primary-2: #DB2777; --primary-dark: #1D4FC4;
  --blue: #4FA8FF; --pink: #FF7EB9;
  --grad: linear-gradient(135deg, #2563EB 0%, #7C5CF0 55%, #DB2777 100%);
  --grad-soft: linear-gradient(135deg, #4FA8FF 0%, #8E9BFF 55%, #FF7EB9 100%);
  --ink: #1E2A44; --body: #3D4760; --sec: #5A6378; --ter: #6E7790;
  --sep: #E6EBF3; --grouped: #F4F7FC; --card: #fff; --tint: #EAF2FF; --tint-2: #DCE9FF; --tint-pink: #FFEAF4;
  --success: #22B07D; --success-t: #127A55; --success-bg: #E3F7EF;
  --error: #E5484D; --warn-t: #B4361F;
  --s1: #2F7BE6; --s2: #E5559A; --s3: #1FA8C4; --s4: #7C5CF0;
  --shadow: 0 8px 24px rgba(47, 111, 228, .09);
  --shadow-btn: 0 10px 22px rgba(124, 92, 240, .28);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: "Vazirmatn", Tahoma, -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-display: "Lalezar", "Vazirmatn", Tahoma, sans-serif;
}

/* Self-hosted fonts (no Google Fonts, which can be unreachable in Iran). Both are SIL OFL — see fonts/OFL-*.txt */
@font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face {
  font-family: "Lalezar"; src: url("../fonts/Lalezar-arabic.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Lalezar"; src: url("../fonts/Lalezar-latin.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lalezar is a single heavy weight: use it for titles and big numbers only, never faux-bold it. */
h1, .display, .stats3 .v, .hero .status-title, .h-xl, .h-lg, .h-md {
  font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: 0 !important;
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
html { background: #F6F9FF; }
body {
  margin: 0; font-family: var(--font); color: var(--ink);
  background: linear-gradient(160deg, #FFE8F3 0%, #EAF3FF 50%, #F5FBFF 100%) fixed;
  min-height: 100dvh;
}
button, input { font-family: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; transition: transform .2s, box-shadow .2s, filter .2s, background .2s, opacity .2s; }
button:disabled { cursor: not-allowed; }
a { color: var(--primary); text-decoration: none; }
::selection { background: #FFD3E8; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
h1, h2, p { margin: 0; }

/* App column: phone-width on every screen size */
.app {
  position: relative; max-width: 480px; min-height: 100dvh; margin: 0 auto;
  background: linear-gradient(180deg, #FFEFF7 0%, #EEF6FF 28%, #FFFFFF 62%);
  overflow-x: hidden;
}
@media (min-width: 520px) { .app { box-shadow: 0 0 60px rgba(47, 111, 228, .12); } }
.app.dark { background: linear-gradient(170deg, #2F7BE6 0%, #7C5CF0 50%, #E5559A 100%); color: #fff; }
.view { padding: max(env(safe-area-inset-top), 16px) 18px 34px; display: flex; flex-direction: column; gap: 16px; }
.view.with-tabs { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

/* Staggered entrance, only when a screen first appears */
@keyframes up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes breath { 0%, 100% { transform: scale(1); box-shadow: 0 12px 30px rgba(79, 168, 255, .3); } 50% { transform: scale(1.05); box-shadow: 0 18px 40px rgba(255, 126, 185, .4); } }
@keyframes shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.08); } 66% { transform: translate(-30px, 24px) scale(.95); } }
@keyframes spin { to { transform: rotate(360deg); } }
.stagger > * { animation: up .6s var(--ease) both; }
.stagger > *:nth-child(2) { animation-delay: .06s; } .stagger > *:nth-child(3) { animation-delay: .12s; }
.stagger > *:nth-child(4) { animation-delay: .18s; } .stagger > *:nth-child(5) { animation-delay: .24s; }
.stagger > *:nth-child(6) { animation-delay: .3s; } .stagger > *:nth-child(7) { animation-delay: .36s; }
.stagger > *:nth-child(n+8) { animation-delay: .42s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Text */
.h-xl { font-size: 32px; font-weight: 800; letter-spacing: -.01em; line-height: 1.4; }
.h-lg { font-size: 24px; font-weight: 800; line-height: 1.55; }
.h-md { font-size: 22px; font-weight: 800; line-height: 1.6; }
.kicker { font-size: 13px; font-weight: 600; color: var(--primary); }
.muted { font-size: 13px; color: var(--sec); line-height: 1.85; }
.label { font-size: 13px; color: var(--sec); padding: 4px 4px 0; }
.body { font-size: 14px; line-height: 2; color: var(--body); }
.center { text-align: center; align-items: center; }
.row { display: flex; gap: 10px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 6px; }
.grow { flex: 1; min-width: 0; }

/* Cards */
.card { background: var(--card); box-shadow: var(--shadow); border-radius: 18px; }
.card.pad { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.card.r22 { border-radius: 22px; }
.list { display: flex; flex-direction: column; padding: 0 16px; }
.list > * + * { border-top: 1px solid var(--sep); }
.hr { height: 1px; background: var(--sep); }
.stats3 { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.stats3 > div { padding: 14px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.stats3 > div + div { border-right: 1px solid var(--sep); }
.stats3 .v { font-size: 20px; font-weight: 800; color: var(--primary); }
.stats3 .k { font-size: 11.5px; color: var(--sec); }

/* Buttons */
.btn {
  height: 52px; border-radius: 18px; font-size: 16px; font-weight: 600; color: #fff;
  background: var(--grad); box-shadow: var(--shadow-btn); width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px;
}
.btn:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(91, 99, 217, .35); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .4; }
.btn.soft { background: var(--tint); color: var(--primary); box-shadow: none; }
.btn.soft:hover:not(:disabled) { background: var(--tint-2); filter: none; }
.btn.white { background: #fff; color: var(--primary); box-shadow: none; }
.btn.auto { width: auto; }
.btn.h48 { height: 48px; border-radius: 15px; }
.link { font-size: 13px; color: var(--ter); padding: 8px; }
.link:hover { color: var(--primary); }
.back { font-size: 16px; color: var(--primary); display: flex; align-items: center; gap: 2px; height: 44px; }
.spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }

/* Logo */
.logo { width: 96px; height: 96px; border-radius: 30px; display: grid; place-items: center; animation: breath 3.6s ease-in-out infinite; }
.logo svg { width: 100%; height: 100%; display: block; }

/* Numbered goals */
.goal { display: flex; gap: 14px; align-items: flex-start; }
.goal .n { width: 36px; height: 36px; border-radius: 12px; color: #fff; font-size: 15px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.goal span:last-child { font-size: 14px; line-height: 1.9; color: var(--body); }

/* Ethics strip */
.ethics { padding: 12px 14px; display: flex; align-items: center; gap: 12px; font-size: 13px; line-height: 1.8; font-weight: 500; }
.ethics.green { background: linear-gradient(135deg, #EAF3FF, #FFEDF6); border-radius: 18px; }
.ethics [data-ethics] { transition: opacity .3s; }

/* Inputs */
.code-input { font-size: 17px; letter-spacing: .06em; text-align: center; height: 52px; padding: 0 14px; border: 0; border-radius: 18px; background: #fff; outline: none; width: 100%; direction: ltr; text-transform: uppercase; }
.field-error { font-size: 13px; color: var(--warn-t); padding: 0 4px; line-height: 1.8; }
.field-error:empty { display: none; }
.alert { background: #FFF1E8; color: var(--warn-t); border-radius: 14px; padding: 12px 14px; font-size: 13.5px; line-height: 1.8; }

/* Consent switch */
.switch-row { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 18px; padding: 14px 16px; text-align: right; width: 100%; }
.switch { position: relative; width: 51px; height: 31px; border-radius: 999px; flex-shrink: 0; background: var(--sep); transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 2px; right: 2px; width: 27px; height: 27px; border-radius: 999px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: right .2s; }
.switch.on { background: var(--success); }
.switch.on::after { right: 22px; }

/* Survey */
.segs { display: flex; gap: 4px; }
.segs > div { flex: 1; height: 5px; border-radius: 999px; background: var(--sep); overflow: hidden; }
.segs > div > div { height: 100%; background: var(--primary); border-radius: 999px; transition: width .3s; }
.q { padding: 16px; display: flex; flex-direction: column; gap: 12px; border: 2px solid transparent; }
.q.missing { border-color: #F3C2A8; }
.q-head { display: flex; gap: 10px; align-items: flex-start; }
.q-head .n { font-size: 13px; font-weight: 700; color: var(--ter); min-width: 18px; padding-top: 1px; }
.q-head .t { font-size: 15px; line-height: 1.85; font-weight: 500; }
.num { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--sec); }
.num input { font-size: 16px; width: 110px; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--grouped); outline: none; text-align: center; }
.seg { display: flex; background: #F2EDE8; border-radius: 12px; padding: 2px; gap: 2px; }
.seg button { flex: 1; min-height: 40px; border-radius: 10px; font-size: 14px; font-weight: 500; }
.seg button.on { background: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.opts { display: flex; flex-direction: column; margin: 0 -16px -4px; }
.opts button { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; border-top: 1px solid var(--sep); font-size: 14.5px; text-align: right; }
.opts button span { flex: 1; }
.opts button.on { background: #F6F4FF; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.scale button { height: 44px; border-radius: 10px; font-size: 15px; font-weight: 600; background: var(--grouped); }
.scale button.on { background: var(--primary); color: #fff; }
.save-state { font-size: 12px; color: var(--ter); text-align: center; min-height: 18px; }

/* Home hero */
.hero {
  position: relative; overflow: hidden; border-radius: 22px; padding: 20px; color: #fff;
  background: linear-gradient(135deg, #2F7BE6 0%, #7C5CF0 50%, #E5559A 100%); background-size: 200% 200%;
  animation: shift 9s ease-in-out infinite; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 14px 34px rgba(124, 92, 240, .3);
}
.hero .blob { position: absolute; border-radius: 999px; background: rgba(255, 255, 255, .14); pointer-events: none; }
.hero > :not(.blob) { position: relative; }
.hero .badge { width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .22); display: grid; place-items: center; flex-shrink: 0; }
.hero .bar { height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.hero .bar > div { height: 100%; background: #fff; border-radius: 999px; transition: width .4s; }

/* Milestones */
.ms { display: flex; gap: 5px; }
.ms > div { flex: 1; display: flex; flex-direction: column; gap: 7px; align-items: center; }
.ms .b { width: 100%; height: 8px; border-radius: 999px; background: var(--sep); }
.ms .done .b { background: var(--primary); }
.ms .cur .b { background: #BFB7F5; }
.ms span { font-size: 11.5px; color: var(--ter); font-weight: 500; }
.ms .done span { color: var(--ink); }
.ms .cur span { color: var(--ink); font-weight: 700; }

/* Session list rows */
.srow { display: flex; gap: 14px; align-items: flex-start; padding: 0 16px; width: 100%; text-align: right; }
.srow + .srow .sbody { border-top: 1px solid var(--sep); }
.srow .sn { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #fff; margin-top: 12px; }
.srow .sbody { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 12px 0; }
.srow .tt { font-size: 15px; font-weight: 600; line-height: 1.6; }
.srow .gg { font-size: 12.5px; color: var(--sec); line-height: 1.7; }
.srow.locked { cursor: default; }

/* Timeline */
.tl { display: flex; gap: 14px; }
.tl .rail { display: flex; flex-direction: column; align-items: center; width: 16px; flex-shrink: 0; }
.tl .dot { width: 14px; height: 14px; border-radius: 999px; margin-top: 5px; background: #DDD6D0; flex-shrink: 0; }
.tl .line { flex: 1; width: 2px; margin: 4px 0; background: var(--sep); }
.tl.done .dot { background: var(--success); } .tl.done .line { background: var(--success); }
.tl.cur .dot { background: #fff; border: 3px solid var(--primary); }
.tl:last-child .line { background: transparent; }
.tag { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; height: fit-content; white-space: nowrap; background: var(--grouped); color: var(--ter); }
.tag.done { background: var(--success-bg); color: var(--success-t); }
.tag.cur { background: var(--tint); color: var(--primary); }
.kv { display: flex; justify-content: space-between; align-items: center; min-height: 46px; gap: 8px; font-size: 14.5px; }

/* Tab bar */
/* Bottom tabs (shared with the researcher panel): compact, sits low, bold coloured icons.
   Each tab has its own colour (--c); the active tab gets a tinted pill and a coloured label. */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 10;
  padding: 6px 6px max(env(safe-area-inset-bottom), 6px); align-items: center;
  background: rgba(255, 255, 255, .97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--sep); box-shadow: 0 -6px 20px rgba(47, 111, 228, .06);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
}
.tabbar button {
  --c: var(--primary);
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  min-height: 54px; font-size: 13.5px; font-weight: 800; color: var(--body); line-height: 1.35;
}
.tabbar button .ti { width: 60px; height: 34px; border-radius: 999px; display: grid; place-items: center; color: var(--c); transition: background .2s, transform .2s; }
/* Inside the Android app the native shell already keeps content above the system navigation bar,
   so the web page must not add the safe-area gap a second time (it left an empty band under the tabs). */
.in-app .tabbar { padding-bottom: 6px; }
.in-app .view.with-tabs { padding-bottom: 86px; }
.tabbar button.on { color: var(--c); font-weight: 800; }
.tabbar button.on .ti { background: var(--tint); background: color-mix(in srgb, var(--c) 15%, white); transform: translateY(-1px); }
.tabbar button:active .ti { transform: scale(.92); }
.tabbar .badge { position: absolute; top: 2px; left: calc(50% - 26px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--error); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }

/* Tip toast */
.toast {
  position: fixed; top: max(env(safe-area-inset-top), 10px); left: 50%; width: calc(100% - 20px); max-width: 460px; z-index: 30;
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: 22px; text-align: right;
  background: rgba(250, 250, 252, .97); box-shadow: 0 8px 30px rgba(0, 0, 0, .16);
  transform: translate(-50%, -170%); opacity: 0;
  transition: transform .5s cubic-bezier(.2, .9, .3, 1.15), opacity .35s;
}
.toast.on { transform: translate(-50%, 0); opacity: 1; }
.toast .ic { width: 38px; height: 38px; border-radius: 12px; background: var(--grad-soft); display: grid; place-items: center; flex-shrink: 0; }

/* Session stepper */
.stepper { display: flex; align-items: flex-start; }
.stepper > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
/* Each step's line runs from its dot back to the previous step (to the right in RTL). */
.stepper .ln { position: absolute; top: 13px; left: 50%; width: 100%; height: 2px; background: var(--sep); }
.stepper > div:first-child .ln { background: transparent; }
.stepper .dt { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--sep); color: var(--ter); }
.stepper .lb { font-size: 11.5px; color: var(--ter); font-weight: 500; }
.stepper .done .dt, .stepper .cur .dt { background: var(--primary); color: #fff; }
.stepper .done .ln, .stepper .cur .ln { background: var(--primary); }
.stepper > div:first-child .ln { background: transparent !important; }
.stepper .cur .dt { box-shadow: 0 0 0 4px #DCD8FF; }
.stepper .cur .lb { color: var(--primary); font-weight: 700; }
.stepper .done .lb { color: var(--ink); }

.media { position: relative; aspect-ratio: 16/9; border-radius: 18px; background: var(--ink); display: grid; place-items: center; overflow: hidden; }
.media video { width: 100%; height: 100%; display: block; background: #000; }
.media .play { width: 62px; height: 62px; border-radius: 999px; background: rgba(255, 255, 255, .92); display: grid; place-items: center; }
.media .len { position: absolute; bottom: 10px; left: 10px; font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .55); padding: 3px 9px; border-radius: 6px; }
.media .ph { position: absolute; top: 10px; right: 12px; font-size: 11px; color: #B3ACB8; }

.msg-card { padding: 22px 20px; display: flex; flex-direction: column; gap: 16px; min-height: 280px; }
.msg-card p { font-size: 18px; line-height: 2.05; font-weight: 500; flex: 1; }
.dots { display: flex; gap: 5px; }
.dots span { height: 6px; width: 6px; border-radius: 999px; background: var(--sep); transition: width .2s; }
.dots span.on { background: var(--s2); }
.dots span.cur { width: 18px; }

.audio-box { padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.audio-ic { width: 72px; height: 72px; border-radius: 22px; background: var(--grad-soft); display: grid; place-items: center; }
.track { width: 100%; height: 5px; border-radius: 999px; background: var(--sep); overflow: hidden; direction: ltr; cursor: pointer; }
.track > div { height: 100%; background: var(--primary); border-radius: 999px; }
.times { width: 100%; display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ter); direction: ltr; }
.playbtn { width: 60px; height: 60px; border-radius: 999px; background: var(--primary); display: grid; place-items: center; }
.playbtn:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-2px); }
.playbtn:disabled { opacity: .4; }

.quiz button { display: flex; align-items: center; gap: 14px; padding: 14px 16px; width: 100%; text-align: right; font-size: 14.5px; line-height: 1.85; }
.quiz button + button { border-top: 1px solid var(--sep); }
.quiz .radio { width: 24px; height: 24px; border-radius: 999px; flex-shrink: 0; display: grid; place-items: center; font-size: 13px; font-weight: 700; border: 2px solid #D4CDC6; color: #fff; }
.quiz button.right { background: #EEF8F3; }
.quiz button.right .radio { border-color: var(--success); background: var(--success); }
.quiz button.wrong .radio { border-color: var(--error); background: var(--error); }
.feedback { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 18px; background: var(--tint); }
.feedback.ok { background: var(--success-bg); }
.feedback b { font-size: 15px; color: var(--primary); }
.feedback.ok b { color: var(--success-t); }

.check-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; font-size: 14.5px; line-height: 1.95; }
.res { padding: 14px 16px; display: flex; align-items: center; gap: 12px; width: 100%; text-align: right; }
.res .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--s3); display: grid; place-items: center; flex-shrink: 0; }

.big-check { display: grid; place-items: center; filter: drop-shadow(0 12px 22px rgba(124, 92, 240, .28)); }
.notif { width: 100%; background: rgba(255, 255, 255, .9); border-radius: 22px; padding: 14px; display: flex; gap: 12px; align-items: flex-start; color: var(--ink); text-align: right; }

.tip-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.tip-row .d { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; margin-top: 11px; }
.tip-row span:last-child { font-size: 14px; line-height: 1.95; color: var(--body); flex: 1; }

/* Modal */
.modal-bg { position: fixed; inset: 0; background: rgba(42, 38, 51, .45); z-index: 50; display: grid; place-items: end center; padding: 16px; }
.modal { width: 100%; max-width: 448px; background: #fff; border-radius: 22px; padding: 22px 20px; display: flex; flex-direction: column; gap: 14px; animation: up .35s var(--ease) both; margin-bottom: env(safe-area-inset-bottom); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.9; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 4px; accent-color: var(--primary); }

.loading { min-height: 60dvh; display: grid; place-items: center; }
.loading .spinner { width: 34px; height: 34px; border-color: var(--tint-2); border-top-color: var(--primary); }
.footer-links { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }

/* ---------- Splash: cinematic smoke (canvas, see js/smoke.js), then the air clears ---------- */
.splash {
  position: fixed; inset: 0; z-index: 100; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(120% 90% at 50% 45%, #1C2438 0%, #0C1120 55%, #05070E 100%); color: #EDEFF5;
  transition: opacity .6s ease, visibility .6s;
}
.splash.out { opacity: 0; visibility: hidden; }
.splash canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Soft vignette + film grain feel on top of the smoke */
.splash::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 70% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%); transition: opacity 1s; }
.splash .fresh { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; background: linear-gradient(180deg, #FFEFF7 0%, #EEF6FF 45%, #FFFFFF 100%); }
.splash.cleared .fresh { opacity: 1; }
.splash.cleared::after { opacity: 0; }
.splash .mark, .splash .name, .splash .rule, .splash .tagline { position: relative; z-index: 2; }
.splash .mark { width: 104px; height: 104px; border-radius: 32px; opacity: 0; filter: blur(14px); transform: scale(.92);
  animation: emerge 1.4s .3s cubic-bezier(.2, .7, .2, 1) forwards; box-shadow: 0 0 60px rgba(124, 92, 240, .45); }
.splash .mark svg { width: 100%; height: 100%; display: block; border-radius: 32px; }
.splash .name { font-family: var(--font-display); font-size: 46px; line-height: 1.25; letter-spacing: .04em; color: #F4F1EA;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .6); opacity: 0; filter: blur(10px); animation: emerge 1.4s .8s cubic-bezier(.2, .7, .2, 1) forwards; transition: color 1s; }
.splash .rule { display: flex; align-items: center; gap: 10px; width: 210px; opacity: 0; animation: emerge 1.2s 1.3s ease forwards; }
.splash .rule i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(237, 239, 245, .75), transparent); transition: background 1s; }
.splash .rule b { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid rgba(237, 239, 245, .85); transition: border-color 1s; }
.splash .tagline { font-size: 13.5px; letter-spacing: .02em; color: rgba(237, 239, 245, .9); text-shadow: 0 1px 12px rgba(0, 0, 0, .8); opacity: 0; animation: emerge 1.2s 1.6s ease forwards; transition: color 1s; }
.splash.cleared .name { color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; text-shadow: none; }
.splash.cleared .tagline { color: var(--sec); }
.splash.cleared .rule i { background: linear-gradient(90deg, transparent, #9AA4BA, transparent); }
.splash.cleared .rule b { border-color: #DB2777; }
@keyframes emerge { to { opacity: 1; filter: blur(0); transform: none; } }

/* Decorative bubbles behind headers */
.bg-bubbles { position: absolute; top: 0; left: 0; width: 100%; height: 300px; z-index: 0; pointer-events: none; }
.view > * { position: relative; z-index: 1; }
.view > .bg-bubbles { position: absolute; z-index: 0; }

.hero .hero-lungs { position: absolute; left: -14px; bottom: -18px; opacity: .16; pointer-events: none; line-height: 0; }
.hero .badge svg { display: block; }
.brand-name { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.code-input { font-size: 22px !important; letter-spacing: .3em !important; font-weight: 700; background: var(--grouped) !important; direction: rtl !important; }
.code-input::placeholder { font-size: 14px; letter-spacing: 0; font-weight: 400; color: var(--ter); }

/* Signed-in bar (home, progress, tips, waiting) */
.acct { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }
.acct-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .85); box-shadow: var(--shadow); font-size: 13px; color: var(--sec); }
.acct-chip b { color: var(--ink); letter-spacing: .08em; font-size: 14px; }
.acct-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); }
.acct-out { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  background: var(--tint-pink); color: #B42A6F; font-size: 13.5px; font-weight: 700; }
.acct-out:active { transform: scale(.96); }

/* Session illustrations */
.sart { flex-shrink: 0; line-height: 0; }
.session-hero { display: flex; align-items: center; gap: 14px; }
.session-hero .sart svg { width: 104px; height: auto; }

/* ---------- Media players ---------- */
.player { position: relative; border-radius: 20px; overflow: hidden; background: #0E1630; color: #fff; aspect-ratio: 16/9; box-shadow: var(--shadow); }
.player video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.player .ov { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, rgba(14, 22, 48, 0) 50%, rgba(14, 22, 48, .7) 100%); transition: opacity .25s; }
.player.playing .ov { opacity: 0; }
.player.playing:hover .ov, .player.show .ov { opacity: 1; }
.player .big { width: 68px; height: 68px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--primary); display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.player .bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; direction: ltr; }
.player .bar button { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.player .bar button:hover { background: rgba(255, 255, 255, .15); }
.player .t { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .9; min-width: 78px; text-align: center; }
.seek { flex: 1; height: 24px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.seek .rail { position: relative; width: 100%; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .3); }
.seek .fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--pink)); }
.seek .knob { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.player.ph { display: grid; place-items: center; background: var(--grad-soft); }
.player.ph .msg { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-size: 12.5px; opacity: .95; }

.aplayer { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.aplayer .head { display: flex; gap: 14px; align-items: center; }
.aplayer .cover { width: 64px; height: 64px; border-radius: 20px; background: var(--grad-soft); display: grid; place-items: center; flex-shrink: 0; }
.eq { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.eq i { width: 4px; border-radius: 2px; background: #fff; height: 30%; }
.aplayer.playing .eq i { animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: .2s !important; } .eq i:nth-child(3) { animation-delay: .4s !important; } .eq i:nth-child(4) { animation-delay: .1s !important; } .eq i:nth-child(5) { animation-delay: .3s !important; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.aplayer .seek .rail { background: var(--sep); }
.aplayer .seek .knob { background: var(--primary); }
.aplayer .times { margin-top: -6px; }
.ctrls { display: flex; align-items: center; justify-content: center; gap: 18px; direction: ltr; }
.ctrls .skip { width: 48px; height: 48px; border-radius: 999px; background: var(--tint); color: var(--primary); display: grid; place-items: center; position: relative; }
.ctrls .skip small { position: absolute; font-size: 10px; font-weight: 800; bottom: 6px; }
.ctrls .main { width: 64px; height: 64px; border-radius: 999px; background: var(--grad); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-btn); }
.ctrls .main:disabled, .ctrls .skip:disabled { opacity: .4; box-shadow: none; }
.speed { min-width: 52px; height: 36px; border-radius: 999px; background: var(--grouped); font-size: 13px; font-weight: 700; color: var(--body); }