/* ═══════════════════════════════════════════════════════════════
   اپِ درون — خانه (.hm-*) و برگ‌ریزونِ داخلِ اپ (.bg-*)

   خانه کوتاه و آرام است: بخش‌ها زیرِ هم، هرکدام یک عنوان و یک سطح؛ دکمه‌های کوچک آیکنی و آن‌سوی عنوان.
   همان زبانِ باغچه و دفترچه: سطحِ گرد، سایه‌ی نرم، بی‌شلوغی.
   بعد از a/app/app.css و extra.css بار می‌شود و فقط چیزِ تازه اضافه می‌کند.
   ═══════════════════════════════════════════════════════════════ */

/* دکمه‌ی برگشتِ نوارِ بالا (#dBack) هم‌نامِ دکمه‌ی «برگشتِ ۱۵ ثانیه»ی پخش‌کننده‌ی سایت است و a/app.css روی گوشی (تا ۶۲۰px)
   با «#dBack,#dFwd{display:none}» پنهانش می‌کرد؛ یعنی روی گوشی هیچ زیرصفحه‌ای (شنیدن، تمرکز، برگ‌ریزون) برگشت نداشت. */
.dapp #dBack:not([hidden]){display:grid}

/* ═══════════════════ خانه ═══════════════════ */
.dapp .hm{display:flex;flex-direction:column;gap:20px;padding-bottom:76px}   /* جا برای دکمه‌ی شناورِ «افزودن» */
.dapp .hm > .dcard,.dapp .hm-today > *{margin-bottom:0}
.dapp .hm > .dhello{padding-bottom:0}
.dapp .hm-sec{animation:d-rise .55s var(--d-ease) both;animation-delay:calc(var(--i,0) * 55ms)}

/* عنوانِ هر بخش، با دکمه‌های آیکنی آن‌سو */
.dapp .hm-h{display:flex;align-items:center;gap:8px;min-height:38px;margin:0 2px 8px}
.dapp .hm-h h2{flex:1;min-width:0;margin:0;font-size:18px;font-weight:600}
.dapp .hm-h-acts{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
.dapp .hm-ib{width:38px;height:38px;border-radius:12px;color:var(--d-acc)}
.dapp .hm-h-year h2 span{margin-inline-start:8px;color:var(--d-sub);font-size:14px;font-weight:500}

/* امروز: عادت‌ها و تمرکز کنارِ هم (روی صفحه‌ی پهن) */
.dapp .hm-today{display:grid;gap:12px}
@media (min-width:760px){.dapp .hm-today{grid-template-columns:1.35fr 1fr;align-items:start}}

/* ——— بنرِ برگ‌ریزون ——— */
.dapp .hm-leaf{cursor:pointer;padding:16px 18px;-webkit-tap-highlight-color:transparent;transition:transform .15s var(--d-ease)}
.dapp .hm-leaf:active{transform:scale(.992)}
.dapp .hm-leaf:focus-visible{outline:2px solid var(--d-acc);outline-offset:2px}
.dapp .hm-leaf-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.dapp .hm-leaf-h h2{margin:2px 0 0;font-size:24px;font-weight:600}
.dapp .hm-leaf-line{margin:10px 0 12px;font-size:14px;line-height:1.85;opacity:.92}
.dapp .hm-leaf-all{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;margin-bottom:14px;font-size:12.5px;opacity:.95}
.dapp .hm-leaf-all .dbar{grid-column:1 / -1}
.dapp .hm-leaf-go{display:flex;align-items:center;gap:12px}
.dapp .hm-leaf-go .dbtn{flex:0 0 auto}
.dapp .hm-leaf-dots{display:flex;gap:2px}
.dapp .hm-leaf-dots .ic{width:21px;height:21px;color:var(--d-leaf);filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.dapp .hm-leaf-dots i.used .ic{color:rgba(255,255,255,.2);filter:none}
:root[data-theme="paper"] .dapp .hm-leaf-dots i.used .ic{color:rgba(90,50,20,.2)}
.dapp .hm-leaf-more{margin-inline-start:auto;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;opacity:.85}
.dapp .hm-leaf-more .ic{width:16px;height:16px}

/* ——— کتاب ——— */
.dapp .hm-read-top{display:grid;gap:10px;margin-bottom:12px}
@media (min-width:640px){.dapp .hm-read-top{grid-template-columns:1.4fr 1fr}}
.dapp .hm-streak,.dapp .hm-goal,.dapp .hm-year-g{background:var(--d-surf);border:1px solid var(--d-line);border-radius:var(--d-r);box-shadow:var(--d-shadow);color:inherit}
.dapp .hm-streak{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"f t" "w w";align-items:center;gap:12px 12px;
  width:100%;padding:14px 16px;text-align:start;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s var(--d-ease)}
.dapp .hm-streak:active{transform:scale(.985)}
.dapp .hm-flame{grid-area:f;width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:var(--d-surf2);color:var(--d-faint)}
.dapp .hm-flame .ic{width:26px;height:26px}
.dapp .hm-streak.lit .hm-flame{background:radial-gradient(circle at 50% 70%,rgba(255,138,60,.28),transparent 70%),var(--d-surf2);color:var(--d-fire2)}
.dapp .hm-streak.lit .hm-flame .ic{animation:d-flicker 1.6s ease-in-out infinite;transform-origin:50% 90%}
.dapp .hm-streak-t{grid-area:t;display:flex;flex-direction:column;gap:2px;min-width:0}
.dapp .hm-streak-t b{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.dapp .hm-streak.lit .hm-streak-t b{color:var(--d-fire)}
.dapp .hm-streak-t small{font-size:12.5px;color:var(--d-sub);line-height:1.6}
.dapp .hm-week{grid-area:w;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.dapp .hm-week i{display:block;height:8px;border-radius:4px;background:var(--d-surf3)}
.dapp .hm-week i.on{background:linear-gradient(90deg,var(--d-fire),var(--d-fire2))}
.dapp .hm-week i.td:not(.on){outline:1.5px dashed var(--d-fire);outline-offset:1px}
.dapp .hm-week i.ft{opacity:.4}

.dapp .hm-goal{display:flex;align-items:center;gap:12px;padding:12px 14px}
.dapp .hm-goal-r{position:relative;width:46px;height:46px;flex:none}
.dapp .hm-goal-r .dring{position:absolute;inset:0}
.dapp .hm-goal-r b{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.dapp .hm-goal-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.dapp .hm-goal-t b{font-size:15px;font-weight:600}
.dapp .hm-goal-t small{font-size:12.5px;color:var(--d-sub)}
.dapp .hm-goal .hm-ib{margin-inline-start:auto}

.dapp .hm-book-main .reading-card{margin:0}
.dapp .hm-empty{padding:22px 10px;border:1px dashed var(--d-line2);border-radius:var(--d-r)}

.dapp .hm-books{display:flex;flex-direction:column;margin-top:10px;border-radius:var(--d-r);background:var(--d-surf);
  border:1px solid var(--d-line);box-shadow:var(--d-shadow);overflow:hidden}
.dapp .hm-book{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;text-align:start;color:inherit;
  border-bottom:1px solid var(--d-line);-webkit-tap-highlight-color:transparent;transition:background .15s}
.dapp .hm-book:last-child{border-bottom:0}
.dapp .hm-book:hover{background:var(--d-surf2)}
.dapp .hm-book.paused{opacity:.75}
.dapp .hm-book-c{flex:none;width:34px}
.dapp .hm-book-c .cover-fake .a{display:none}
.dapp .hm-book-c .cover-fake .t{font-size:7px;line-height:1.3}
.dapp .hm-book-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dapp .hm-book-t b{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dapp .hm-book-t small{font-size:12px;color:var(--d-sub)}
.dapp .hm-book-p{font-size:12.5px;font-weight:600;color:var(--d-acc);font-variant-numeric:tabular-nums}
.dapp .hm-book-go{width:16px;height:16px;color:var(--d-faint)}
.dapp .hm-all{margin-top:6px}
.dapp .hm-aside{margin-top:10px}
.dapp .hm-aside summary{display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 2px;font-size:13.5px;font-weight:600;color:var(--d-sub);list-style:none}
.dapp .hm-aside summary::-webkit-details-marker{display:none}
.dapp .hm-aside summary::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin-inline-start:2px;transition:transform .2s}
.dapp .hm-aside[open] summary::after{transform:rotate(-135deg)}
.dapp .hm-next{margin-top:14px}
.dapp .hm-next h3{margin:0 2px 8px;font-size:14px;font-weight:600;color:var(--d-sub)}
.dapp .hm-rail{margin-inline:-16px;padding-inline:16px}
.dapp .hm-heat{display:flex;flex-direction:column;gap:6px}
.dapp .hm-rec{display:inline-flex;align-items:center;gap:6px}
.dapp .hm-rec .ic{width:16px;height:16px;color:var(--d-acc)}

/* بریده‌ی امروز اگر چیزی نداشت، کارتِ خالی نماند */
.dapp .hm > .dcard.dmod:empty,.dapp .hm > .dcard.dmod:has(.kd-today:empty){display:none}

/* ——— شنیدن: یک ردیف ——— */
.dapp .hm-ep{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--d-r);background:var(--d-surf);
  border:1px solid var(--d-line);box-shadow:var(--d-shadow)}
.dapp .hm-ep-img{flex:none;width:60px;height:60px;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:var(--d-surf2);color:var(--d-faint)}
.dapp .hm-ep-img img{width:100%;height:100%;object-fit:cover;display:block}
.dapp .hm-ep.kid .hm-ep-img{box-shadow:0 0 0 2px color-mix(in srgb,var(--d-violet) 55%,transparent)}
.dapp .hm-ep-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;text-align:start;color:inherit}
.dapp .hm-ep-mid small{font-size:12px;color:var(--d-sub)}
.dapp .hm-ep-mid b{font-size:15px;font-weight:600;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dapp .hm-ep-m{font-size:12px;color:var(--d-faint)}
.dapp .hm-ep-play{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--d-acc);color:var(--d-acc-ink);
  box-shadow:0 3px 0 var(--d-acc-deep);transition:transform .12s var(--d-ease),box-shadow .12s}
.dapp .hm-ep-play:active{transform:translateY(3px);box-shadow:none}
.dapp .hm-ep-play .ic{width:22px;height:22px}

/* ——— امسال تا این‌جا: یک خط ——— */
.dapp .hm-year-g{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%;padding:14px 6px;text-align:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .15s var(--d-ease)}
.dapp .hm-year-g:active{transform:scale(.99)}
.dapp .hm-year-g > span{display:flex;flex-direction:column;align-items:center;gap:2px;border-inline-start:1px solid var(--d-line)}
.dapp .hm-year-g > span:first-child{border-inline-start:0}
.dapp .hm-year-g b{font-size:21px;font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums}
.dapp .hm-year-g small{font-size:11.5px;color:var(--d-sub)}
.dapp .hm-year.empty{padding:16px 18px;border-radius:var(--d-r);background:var(--d-surf);border:1px solid var(--d-line)}
.dapp .hm-year.empty .hm-h{margin-inline:0}
.dapp .hm-year .st-empty-go{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* ═══════════════════ برگ‌ریزون در اپ ═══════════════════ */
.dapp .bg{gap:16px}
.dapp .bg > .dcard{margin-bottom:0}
.dapp .bg-hero .dleaf-h h2{font-size:28px}
.dapp .bg-tag{margin:4px 0 0;font-size:13.5px;opacity:.85}
.dapp .bg-hero .dleaf-stats{margin:14px 0 12px;gap:8px}
.dapp .bg-hero .dleaf-stats > div{padding:10px 12px}
.dapp .bg-hero .dleaf-stats b{font-size:22px}
.dapp .bg-hero .dleaf-bar{margin-bottom:14px}
.dapp .bg-cta{display:flex;align-items:center;gap:14px}
.dapp .bg-cta .dbtn{flex:1 1 auto}

.dapp .bg-tabs{position:sticky;top:calc(var(--d-top) + var(--d-safe-t) + 6px);z-index:6;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  padding:4px;border-radius:15px;background:var(--d-surf2);box-shadow:0 8px 22px -16px rgba(0,0,0,.7)}
.dapp .bg-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 6px;border-radius:11px;
  font-size:13.5px;font-weight:500;color:var(--d-sub);white-space:nowrap;transition:background .2s,color .2s}
.dapp .bg-tabs button.on{background:var(--d-surf);color:var(--d-ink);font-weight:600;box-shadow:0 1px 6px rgba(0,0,0,.25)}
:root[data-theme="paper"] .dapp .bg-tabs button.on{box-shadow:0 1px 4px rgba(60,45,20,.15)}
.dapp .bg-tabs .dcnt{font-size:11.5px;padding:1px 7px}
.dapp .bg-body{min-height:120px}
.dapp .bg-body.enter > *{animation:d-fade .3s ease both}

/* برگ‌های من: دکمه‌ها آیکنی و آن‌سوی کارت، نه کنارِ متن */
.dapp .dmine-top{min-height:34px}
.dapp .dmine-act{display:flex;align-items:center;gap:0;margin:-4px 0 -4px auto}
.dapp .bg-ic{width:34px;height:34px;border-radius:11px;color:var(--d-sub)}
.dapp .bg-ic .ic{width:19px;height:19px}
.dapp .bg-ic:hover{color:var(--d-acc)}
.dapp .bg-ic.danger:hover{color:var(--d-bad)}
.dapp .dmine-book time{color:var(--d-faint)}
.dapp .bg-body .dnudge{margin-bottom:12px}

/* زمین */
.dapp .bg-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 12px}
.dapp .bg-sort{display:inline-flex;padding:3px;border-radius:12px;background:var(--d-surf2);margin-inline-start:auto}
.dapp .bg-sort button{min-height:32px;padding:0 12px;border-radius:9px;font-size:12.5px;font-weight:500;color:var(--d-sub);white-space:nowrap}
.dapp .bg-sort button.on{background:var(--d-surf);color:var(--d-ink);font-weight:600}
.dapp .bg-ground{display:grid;gap:12px}
@media (min-width:760px){.dapp .bg-ground{grid-template-columns:1fr 1fr;align-items:start}}
.dapp .bg-leaf{padding:16px 18px 14px;border-radius:var(--d-r);background:var(--d-surf);border:1px solid var(--d-line);
  border-inline-start:3px solid var(--tc,var(--d-leaf));box-shadow:var(--d-shadow);animation:d-rise .5s var(--d-ease) both}
.dapp .bg-leaf.star{background:linear-gradient(160deg,color-mix(in srgb,var(--tc) 14%,var(--d-surf)),var(--d-surf) 70%)}
.dapp .bg-badge{display:inline-flex;margin-bottom:8px;padding:2px 10px;border-radius:99px;font-size:11.5px;font-weight:600;background:var(--d-acc-soft);color:var(--d-acc)}
.dapp .bg-line{margin:0 0 10px;font-size:16px;line-height:2;white-space:pre-line;quotes:"«" "»"}
.dapp .bg-line::before{content:open-quote;color:var(--tc,var(--d-leaf))}
.dapp .bg-line::after{content:close-quote;color:var(--tc,var(--d-leaf))}
.dapp .bg-book{font-size:13px;color:var(--d-sub);line-height:1.8}
.dapp .bg-book b{color:var(--d-ink2)}
.dapp .bg-note{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--d-surf2);font-size:13px;line-height:1.85;color:var(--d-ink2)}
.dapp .bg-by{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;color:var(--d-faint)}
.dapp .bg-by span{color:var(--d-sub);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dapp .bg-by em{font-style:normal;font-size:11px;padding:1px 8px;border-radius:99px;background:var(--d-surf2)}
.dapp .bg-by time{margin-inline-start:auto;white-space:nowrap}
.dapp .bg-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--tc,var(--d-leaf))}
.dapp .bg-more{margin-top:14px}

/* جدول */
.dapp .bg-crowd{margin:0 2px 14px}
.dapp .bg-podium{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:8px;align-items:end;margin-bottom:20px}
.dapp .bg-pp{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;min-width:0;padding:16px 6px 14px;border-radius:var(--d-r);
  background:var(--d-surf);border:1px solid var(--d-line);box-shadow:var(--d-shadow);color:inherit}
.dapp .bg-pp.pp-1{padding:24px 6px 20px;background:linear-gradient(180deg,rgba(227,176,98,.2),var(--d-surf) 85%);border-color:rgba(227,176,98,.42)}
.dapp .bg-pp.me{outline:2px solid var(--d-acc);outline-offset:-1px}
.dapp .bg-pp b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px;font-weight:600}
.dapp .bg-pp b em{font-style:normal;color:var(--d-acc);font-size:12px}
.dapp .bg-pp small{font-size:12px;color:var(--d-sub);font-variant-numeric:tabular-nums}
.dapp .bg-pp-r{font-size:11.5px;font-weight:600;color:var(--d-acc)}
.dapp .bg-pp-leaf .ic{width:26px;height:26px;color:#ffc56a}
.dapp .bg-pp.empty{border-style:dashed;background:transparent;box-shadow:none;color:var(--d-faint);cursor:pointer}
.dapp .bg-pp.empty b{color:var(--d-sub);font-weight:500}
.dapp .bg-pp.empty small{font-size:11.5px;line-height:1.6}
.dapp .bg-sec h3{margin:0 2px 8px;font-size:15px;font-weight:600;color:var(--d-sub)}
.dapp .bg-rank{padding:4px 10px;border-radius:var(--d-r);background:var(--d-surf);border:1px solid var(--d-line);box-shadow:var(--d-shadow)}
.dapp .bg-rank li.sticky-me{margin-top:6px;border-top:1px dashed var(--d-line2)}
.dapp .bg-rank small{font-size:11.5px;font-weight:400;color:var(--d-faint)}
.dapp .bg-me0{margin-top:16px}
.dapp .bg-rules{margin-top:18px;padding:2px 2px}
.dapp .bg-rules summary{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 2px;font-size:13.5px;font-weight:600;color:var(--d-sub);list-style:none}
.dapp .bg-rules summary::-webkit-details-marker{display:none}
.dapp .bg-rules summary::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin-inline-start:2px;transition:transform .2s}
.dapp .bg-rules[open] summary::after{transform:rotate(-135deg)}
.dapp .bg-rules ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.dapp .bg-rules li{position:relative;padding-inline-start:16px;font-size:13px;line-height:1.9;color:var(--d-sub)}
.dapp .bg-rules li::before{content:"";position:absolute;inset-inline-start:2px;top:.85em;width:6px;height:6px;border-radius:50%;background:var(--d-leaf)}

@media (prefers-reduced-motion:reduce){
  .dapp .hm-streak.lit .hm-flame .ic{animation:none}
}