@font-face { font-family: Vazirmatn; font-weight: 400; font-display: swap; src: url(fonts/vazirmatn_regular.ttf) format("truetype"); }
@font-face { font-family: Vazirmatn; font-weight: 500; font-display: swap; src: url(fonts/vazirmatn_medium.ttf) format("truetype"); }
@font-face { font-family: Vazirmatn; font-weight: 700; font-display: swap; src: url(fonts/vazirmatn_bold.ttf) format("truetype"); }
@font-face { font-family: Vazirmatn; font-weight: 800; font-display: swap; src: url(fonts/vazirmatn_extrabold.ttf) format("truetype"); }

/* زبان طراحی: «Podcast App MVP» — نیلی + مرجانی + زرد + آبی ملایم، کارت‌های سفید گرد */
:root {
  --canvas: #F5F4FB; --surface: #FFFFFF; --card: #F3F2F9; --primary: #5A52B6; --primary-d: #4A43A0; --on-primary: #FFFFFF;
  --primary-soft: #E6E4F7; --coral: #EF7B5E; --coral-soft: #FDE3DB; --sky: #9AD3F2; --sky-soft: #DDF0FB; --yellow: #FFD86B; --yellow-soft: #FFF0C2;
  --mint-soft: #D9F3E7; --ink: #1E1B3A; --muted: #8683A3; --outline: #E9E7F4; --error: #B3261E;
  --shadow: 0 10px 30px -18px rgba(60, 52, 140, .45);
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #14122A; --surface: #1F1C3D; --card: #2A2650; --primary: #8F87F0; --primary-d: #7B73E0; --on-primary: #14122A;
    --primary-soft: #35306A; --coral: #F28B70; --coral-soft: #4A2E3A; --sky: #6FB6DD; --sky-soft: #243B52; --yellow: #FFD86B; --yellow-soft: #4C4224;
    --mint-soft: #234438; --ink: #F1F0FB; --muted: #A9A6C9; --outline: #342F63; --error: #FFB4AB;
    --shadow: 0 10px 30px -18px rgba(0, 0, 0, .7);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 16px/1.9 Vazirmatn, system-ui, sans-serif; min-height: 100vh; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
h1 { font-size: 30px; font-weight: 800; line-height: 1.4; }
h2 { font-size: 18px; font-weight: 700; line-height: 1.6; }
h3 { font-size: 16px; font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.boot { text-align: center; color: var(--muted); padding: 60px 0; }

main { max-width: 480px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top)) 20px calc(104px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 18px; }
main.no-tabs { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }

/* ── نوار بالا ── */
.appbar { display: flex; align-items: center; justify-content: space-between; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; }
.logo img { width: 34px; height: 34px; border-radius: 10px; }
.iconbtn { width: 46px; height: 46px; border-radius: 16px; background: var(--surface); border: 0; display: grid; place-items: center; color: var(--ink); cursor: pointer; box-shadow: var(--shadow); padding: 0; min-height: 46px; }
.iconbtn svg, .skybtn svg { width: 22px; height: 22px; }
.titlerow { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.skybtn { width: 62px; height: 62px; border-radius: 22px; background: var(--sky); color: #fff; display: grid; place-items: center; flex: none; }
.skybtn svg { width: 26px; height: 26px; }

/* ── کارت و دکمه ── */
.card { background: var(--surface); border-radius: 26px; padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { background: var(--primary-soft); color: var(--primary); border-radius: 999px; padding: 0 14px; font-size: 13px; font-weight: 700; }
button, .btn { font: 700 16px/1.4 Vazirmatn, system-ui, sans-serif; cursor: pointer; border: 0; border-radius: 18px; min-height: 52px; padding: 12px 24px; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: inherit; background: none; }
.primary { background: var(--primary); color: var(--on-primary); width: 100%; }
.coral { background: var(--coral); color: #fff; width: 100%; }
.outline { border: 1.5px solid var(--outline); color: var(--primary); width: 100%; background: transparent; }
.text { color: var(--primary); min-height: 40px; padding: 8px 12px; }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
input[type=text], input[type=tel], textarea { width: 100%; font: 400 16px/1.8 Vazirmatn, system-ui, sans-serif; color: var(--ink); background: var(--card); border: 1.5px solid transparent; border-radius: 16px; padding: 10px 14px; }
input:focus, textarea:focus { border-color: var(--primary); outline: 0; }
textarea { min-height: 110px; resize: vertical; }
input[dir=ltr] { text-align: left; }
label.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.9; }
label.check input { margin-top: 7px; width: 20px; height: 20px; accent-color: var(--primary); flex: none; }
.err { color: var(--error); font-size: 13px; }
.ok { color: var(--primary); }

/* ── بنر «امروز» (نیلی) ── */
.banner { background: var(--primary); color: #fff; border-radius: 28px; padding: 20px; display: flex; align-items: center; gap: 14px; position: relative; overflow: hidden; box-shadow: 0 18px 34px -20px rgba(90, 82, 182, .9); }
.banner::after { content: ""; position: absolute; width: 190px; height: 190px; border-radius: 50%; background: rgba(255, 255, 255, .07); inset-inline-start: -60px; top: -70px; }
.banner-text { flex: 1; display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; }
.banner-text .lbl { font-size: 13px; opacity: .8; }
.banner-text h2 { font-size: 21px; line-height: 1.6; }
.banner .btn { background: #fff; color: var(--primary); min-height: 46px; padding: 8px 22px; border-radius: 16px; align-self: flex-start; margin-top: 6px; }
.banner .btn.ghost { background: rgba(255, 255, 255, .16); color: #fff; }
.banner svg.ring { width: 118px; height: 118px; flex: none; position: relative; z-index: 1; }
.ring .bn { font: 800 30px/1 Vazirmatn; fill: #fff; } .ring .bs { font: 400 11px/1 Vazirmatn; fill: rgba(255,255,255,.8); }

/* ── بخش‌ها ── */
.sec-h { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; }
.sec-h a { color: var(--muted); font-size: 13px; }
.hscroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 20px 14px; margin-inline: -20px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.chap { scroll-snap-align: start; flex: none; width: 152px; border-radius: 26px; padding: 14px; display: flex; flex-direction: column; gap: 4px; min-height: 150px; }
.chap .num { font-size: 12px; font-weight: 700; opacity: .7; }
.chap h3 { font-size: 16px; line-height: 1.7; flex: 1; }
.chap .bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .7); overflow: hidden; margin-top: 6px; }
.chap .bar i { display: block; height: 100%; background: var(--ink); border-radius: 3px; }
.chap .cnt { font-size: 12px; opacity: .8; }
.c0 { background: var(--coral-soft); } .c1 { background: var(--sky-soft); } .c2 { background: var(--yellow-soft); } .c3 { background: var(--primary-soft); } .c4 { background: var(--mint-soft); }
.k0 { background: var(--coral); } .k1 { background: var(--sky); } .k2 { background: var(--yellow); } .k3 { background: var(--primary); } .k4 { background: #6CCBA0; }

/* ── ردیف جلسه (Continue Listening) ── */
.list { display: flex; flex-direction: column; gap: 4px; }
.item { display: flex; align-items: center; gap: 14px; padding: 10px 4px; border-radius: 20px; }
.item.locked { opacity: .5; }
.item.today { background: var(--surface); padding-inline: 10px; box-shadow: var(--shadow); }
.cover { width: 62px; height: 62px; border-radius: 18px; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 22px; color: #fff; position: relative; overflow: hidden; }
.cover::after { content: ""; position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); inset-inline-end: -16px; bottom: -16px; }
.item .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item .t { font-weight: 700; font-size: 16px; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .s { color: var(--muted); font-size: 13px; line-height: 1.5; }
.prog { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.prog .bar { flex: 1; height: 5px; border-radius: 3px; background: var(--outline); overflow: hidden; }
.prog .bar i { display: block; height: 100%; background: var(--coral); border-radius: 3px; }
.prog b { font-size: 11px; color: var(--muted); font-weight: 500; }
.go { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; flex: none; }
.go.off { background: var(--card); color: var(--muted); }
.go svg { width: 16px; height: 16px; }
.done-mark { color: #3DAA7A; width: 40px; height: 40px; display: grid; place-items: center; flex: none; }
.done-mark svg { width: 22px; height: 22px; }

/* ── کارت‌های رنگی ── */
.card.coralcard { background: linear-gradient(140deg, #EF7B5E, #F49A7E); color: #fff; position: relative; overflow: hidden; }
.card.coralcard::after { content: ""; position: absolute; width: 170px; height: 170px; border-radius: 50%; background: var(--yellow); opacity: .85; inset-inline-start: -50px; bottom: -80px; }
.card.coralcard > * { position: relative; z-index: 1; }
.card.coralcard button { background: rgba(255,255,255,.22); color: #fff; width: auto; align-self: flex-start; min-height: 44px; }
.quote { font-size: 19px; font-weight: 800; line-height: 2; }
.card.yellow { background: var(--yellow-soft); box-shadow: none; }
.stats { background: var(--yellow); color: #3B2A00; border-radius: 26px; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding: 14px 6px; }
.stats b { display: block; font-size: 26px; font-weight: 800; line-height: 1.4; }
.stats span { font-size: 13px; }
.avatar { width: 92px; height: 92px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 36px; font-weight: 800; align-self: center; }
.menu { display: flex; flex-direction: column; background: var(--surface); border-radius: 26px; box-shadow: var(--shadow); overflow: hidden; }
.menu > * { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--outline); width: 100%; min-height: 56px; border-radius: 0; font-weight: 500; text-align: start; }
.menu > *:last-child { border-bottom: 0; }
.menu small { color: var(--muted); font-weight: 400; }

/* ── پخش‌کننده (گرامافون + موج) ── */
.top { display: flex; align-items: center; justify-content: space-between; }
.player-title { text-align: center; display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.turn { position: relative; width: 100%; max-width: 300px; margin: 6px auto 4px; aspect-ratio: 1; }
.vinyl { position: absolute; inset: 6% 12% 6% 4%; border-radius: 50%; background: repeating-radial-gradient(circle at center, #101018 0 2px, #181824 2px 4px); box-shadow: 0 30px 40px -24px rgba(30, 27, 58, .8); display: grid; place-items: center; }
.vinyl::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 20%, rgba(255,255,255,.07) 25% 30%, transparent 35% 70%, rgba(255,255,255,.06) 75% 80%, transparent 85%); }
.vinyl .label { width: 38%; aspect-ratio: 1; border-radius: 50%; background: var(--coral); display: grid; place-items: center; }
.vinyl .label svg { width: 82%; height: 82%; }
.playing .vinyl { animation: spin 9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.arm { position: absolute; inset-inline-end: 3%; top: 2%; width: 34%; height: 56%; }
.arm::before { content: ""; position: absolute; top: 4%; inset-inline-end: 22%; width: 10px; height: 78%; background: var(--primary); border-radius: 8px; transform-origin: top; transform: rotate(18deg); transition: transform .5s; }
.arm::after { content: ""; position: absolute; top: 0; inset-inline-end: 8%; width: 34px; height: 34px; border-radius: 50%; background: var(--primary); border: 6px solid var(--primary-soft); }
.playing .arm::before { transform: rotate(32deg); }
.wave { display: flex; align-items: center; gap: 3px; height: 54px; direction: ltr; cursor: pointer; padding: 0 2px; }
.wave i { flex: 1; background: var(--outline); border-radius: 3px; min-width: 2px; }
.wave i.on { background: var(--coral); }
.times { display: flex; justify-content: space-between; direction: ltr; color: var(--muted); font-size: 13px; }
.controls { display: flex; align-items: center; justify-content: center; gap: 18px; }
.round { width: 76px; height: 76px; padding: 0; border-radius: 50%; background: var(--coral); color: #fff; box-shadow: 0 16px 26px -14px rgba(239, 123, 94, .9); }
.round svg { width: 28px; height: 28px; }
.skip { width: 54px; height: 54px; padding: 0; border-radius: 18px; background: var(--primary-soft); color: var(--primary); font-size: 14px; min-height: 54px; }
.speed { align-self: center; background: var(--card); min-height: 38px; padding: 4px 18px; font-size: 14px; border-radius: 14px; color: var(--primary); }

/* ── نوار تب پایین ── */
.tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; display: flex; justify-content: center; padding: 0 12px calc(10px + env(safe-area-inset-bottom)); pointer-events: none; }
.tabbar nav { pointer-events: auto; width: 100%; max-width: 456px; background: var(--surface); border-radius: 26px; box-shadow: 0 18px 40px -14px rgba(60, 52, 140, .5); display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 6px; }
.tabbar a { display: flex; flex-direction: column; align-items: center; color: var(--muted); font-size: 11.5px; font-weight: 500; padding: 4px 0; border-radius: 18px; line-height: 1.7; }
.tabbar a svg { width: 24px; height: 24px; }
.tabbar a.on { color: var(--primary); font-weight: 700; }
.tabbar[hidden] { display: none; }

dialog { border: 0; border-radius: 28px; background: var(--surface); color: var(--ink); padding: 22px; width: min(92vw, 440px); font: inherit; }
dialog::backdrop { background: rgba(20, 18, 42, .55); }
dialog .actions { display: flex; gap: 8px; justify-content: flex-start; margin-top: 12px; flex-wrap: wrap; }
dialog pre { white-space: pre-wrap; font: inherit; margin: 8px 0 0; }
canvas.cert { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--outline); }
.choices { display: flex; flex-direction: column; gap: 8px; }
.note { background: var(--card); border-radius: 16px; padding: 10px 14px; }
@media (min-width: 700px) { body { background: radial-gradient(900px 500px at 50% -10%, var(--primary-soft), var(--canvas)); } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }