/* ═══════════════════════════════════════════════════════════════
   برگ‌ریزون — چالشِ کتاب‌خوانیِ پاییزِ درون

   صفحه همیشه شب است، حتی وقتی تمِ سایت کاغذی است، و دکمه‌ی تم پنهان.
   پالتِ پاییز مستقل از پالتِ سایت است — این بخش هویتِ فصلیِ خودش را دارد.
   ═══════════════════════════════════════════════════════════════ */

body.barg{
  --bg:#0e0f12;
  --bg-2:#16181c;
  --fg:#ede6d8;
  --sub:#a29685;
  --faint:#77705f;
  --hair:#23252a;
  --hair-2:#33363c;
  --accent:#e3b062;
  --accent-ink:#0e0f12;

  --autumn-1:#d0652f;
  --autumn-2:#a33a36;
  --autumn-3:#b27b47;
  --autumn-4:#cdb968;
}
:root[data-theme="paper"] body.barg{ --bg:#0e0f12; --fg:#ede6d8 }

body.barg .head{background:color-mix(in srgb,#0e0f12 88%,transparent);border-bottom-color:#23252a}
body.barg .tgl{display:none}   /* شب می‌ماند */

/* ════════════════ صحنه: کوچه، چراغ، نیمکت ════════════════
   نقشه عمداً پهن است (۱۰۰۰×۳۰۰) و همه‌ی چیزهای مهم وسط و پایین نشسته‌اند،
   تا slice روی گوشی فقط از دو طرف ببرد و روی دسکتاپ سرِ چراغ را نزند. */

.bhero{position:relative;padding:74px 0 40px;isolation:isolate}
.bscene{position:absolute;inset-inline:calc(var(--gut) * -1);top:0;height:300px;z-index:-1;
  overflow:hidden;border-radius:0 0 var(--r-lg) var(--r-lg);
  mask-image:linear-gradient(180deg,#000 62%,transparent);
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent)}
.bscene.short{height:200px}
.bsvg{width:100%;height:100%;display:block}

/* ════════════════ برگ‌های افتان ════════════════ */

.bleaves{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bleaf{position:absolute;top:-34px;animation:fall var(--d,14s) linear var(--dl,0s) infinite}
.bleaf i{display:block;animation:spin var(--d,14s) linear var(--dl,0s) infinite}
.bleaf svg{width:22px;height:22px}
@keyframes fall{
  from{transform:translateY(-40px) translateX(0)}
  to  {transform:translateY(340px) translateX(var(--dx,18px))}
}
@keyframes spin{ from{transform:rotate(0)} to{transform:rotate(var(--rot,360deg))} }
@media (prefers-reduced-motion:reduce){ .bleaves{display:none} }

.bkick{font-size:13px;font-weight:600;color:var(--accent);margin-bottom:16px}
.bslogan{font-size:clamp(38px,9vw,78px);line-height:1.12}
.bname{font-size:clamp(30px,6.5vw,56px)}
.blead{font-size:clamp(16px,2.2vw,20px);color:var(--sub);max-width:46ch;margin-top:20px}

/* ════════════════ شمارشِ معکوس ════════════════ */

.bcd{margin:34px 0 30px}
.bcd-t{font-size:12.5px;color:var(--faint);margin-bottom:10px}
/* ⚠ ltr لازم است: وگرنه در صفحه‌ی راست‌به‌چپ ترتیبِ روز/ساعت/دقیقه/ثانیه برعکس می‌نشیند. */
.bcd-r{display:flex;gap:10px;direction:ltr}
.bcd-i{min-width:66px;padding:12px 8px;text-align:center;
  border:1px solid var(--hair);border-radius:var(--r);background:var(--bg-2)}
.bcd-i b{display:block;font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}
.bcd-i span{display:block;font-size:11px;color:var(--faint);margin-top:3px}
.bcd.started{color:var(--accent);font-size:15px}

/* ════════════════ شمارنده‌ی هزار برگ ════════════════ */

.goal{padding:26px 28px;border:1px solid var(--hair);border-radius:var(--r-lg);margin-bottom:30px}
.goal-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.goal-n{font-size:clamp(32px,7vw,52px);font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent)}
.goal-of{font-size:16px;color:var(--sub)}
.goal-pct{margin-inline-start:auto;font-size:15px;color:var(--faint);font-variant-numeric:tabular-nums}
.goal-bar{height:10px;border-radius:99px;background:var(--hair);overflow:hidden;margin-top:16px}
.goal-fill{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--autumn-2),var(--autumn-1),var(--accent));
  transition:width 1.1s cubic-bezier(.2,.8,.3,1)}
.goal-note{font-size:13px;color:var(--faint);margin-top:12px}

/* ════════════════ کارت‌ها ════════════════ */

.bcard{padding:28px;border:1px solid var(--hair);border-radius:var(--r-lg);margin-bottom:20px}
.bcard h2{font-size:22px;margin-bottom:10px}
.bnote{font-size:13.5px;color:var(--faint);line-height:1.85}
.bwarn{font-size:12.5px;color:var(--warn,#e0a96d);margin-top:10px}
.berr{color:#e0796d;font-size:14px;padding:11px 15px;margin-bottom:16px;
  border:1px solid rgba(224,121,109,.35);border-radius:var(--r)}
.blist{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:8px}
.blist li{position:relative;padding-inline-start:20px;font-size:14.5px;color:var(--sub)}
.blist li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--autumn-1)}

.bteam{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--sub);
  padding:5px 13px;border-radius:99px;border:1px solid var(--hair);margin-bottom:16px}
.bteam .bdot{width:9px;height:9px;border-radius:50%;background:var(--tc,var(--accent))}

/* ════════════════ دو راه که گمت نکنیم ════════════════ */

.bway{display:grid;grid-template-columns:36px 1fr;gap:14px;margin-top:22px}
.bway-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--hair-2);color:var(--accent);font-size:14px;font-weight:600}
.bway-b h3{font-size:17px;margin-bottom:6px}
.bway-b p{font-size:14px;color:var(--sub)}

.bcopy{display:flex;gap:8px;margin-top:12px}
.bfield{flex:1;min-width:0;padding:10px 13px;background:var(--bg-2);
  border:1px solid var(--hair);border-radius:var(--r);font-size:13px}
.bmini{padding:9px 16px;border-radius:var(--r);border:1px solid var(--hair-2);
  font-size:13.5px;transition:.16s}
.bmini:hover{background:var(--bg-2)}

/* کلیدِ چهارکلمه‌ای */
.bkey{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}
.bkey span{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;
  border:1px solid var(--hair-2);border-radius:var(--r);font-size:15.5px;font-weight:600}
.bkey i{font-style:normal;font-size:11px;color:var(--faint);font-weight:500}

.bkeyin{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
@media (max-width:560px){ .bkeyin{grid-template-columns:repeat(2,1fr)} }
.bki{position:relative}
.bki-n{display:block;font-size:11.5px;color:var(--faint);margin-bottom:6px}
.bki input{width:100%;padding:12px 13px;background:var(--bg-2);
  border:1px solid var(--hair);border-radius:var(--r);outline:none;text-align:center;font-size:15px}
.bki input:focus{border-color:var(--accent)}
.bsug{position:absolute;inset-inline:0;top:100%;z-index:20;margin-top:5px;
  background:var(--bg-2);border:1px solid var(--hair-2);border-radius:var(--r);
  overflow:hidden;box-shadow:0 18px 34px -22px #000}
.bsug button{display:block;width:100%;text-align:right;padding:9px 13px;font-size:14.5px}
.bsug button:hover{background:var(--hair)}

/* ════════════════ زمینِ برگ‌ها ════════════════
   چیدمانِ آجری با ستون‌های CSS: بدونِ JS، بدونِ پرش هنگامِ بارگذاری. */

.gfilter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.gfilter a{padding:7px 15px;border-radius:99px;border:1px solid var(--hair);
  font-size:13.5px;color:var(--sub);transition:.16s}
.gfilter a:hover{border-color:var(--hair-2);color:var(--fg)}
.gfilter a.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.gfilter a .dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-inline-end:6px;vertical-align:middle;background:var(--tc,var(--accent))}

.ground{columns:3 300px;column-gap:18px}
@media (max-width:640px){ .ground{columns:1} }

.leaf{break-inside:avoid;margin-bottom:18px;padding:24px 24px 20px;
  border:1px solid var(--hair);border-radius:var(--r-lg);position:relative;
  border-top:3px solid var(--tc,var(--autumn-1));transition:border-color .2s,transform .2s}
.leaf:hover{transform:translateY(-2px)}
.leaf.star{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent)}
.leaf-q{width:26px;height:20px;color:var(--tc,var(--autumn-1));opacity:.55;margin-bottom:10px}
.leaf-q svg{width:100%;height:100%}
.leaf-line{font-size:17px;line-height:1.85;text-align:justify;text-align-last:right}
.leaf-book{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);font-size:14px}
.leaf-book b{font-weight:600}
.leaf-book span{color:var(--faint)}
.leaf-note{margin-top:10px;font-size:13.5px;color:var(--sub);font-style:italic}
.leaf-by{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--faint)}
.leaf-by .dot{width:8px;height:8px;border-radius:50%;background:var(--tc,var(--autumn-1))}
.leaf-by time{margin-inline-start:auto}
.leaf-badge{position:absolute;top:-10px;inset-inline-end:16px;font-size:11px;font-weight:600;
  padding:3px 11px;border-radius:99px;background:var(--accent);color:var(--accent-ink)}

.more-wrap{text-align:center;margin-top:12px}

/* ════════════════ برگ‌های من ════════════════ */

.mine{display:flex;flex-direction:column;gap:14px}
.mine-item{padding:20px 22px;border:1px solid var(--hair);border-radius:var(--r);
  border-inline-start:3px solid var(--hair-2)}
.mine-item.ok{border-inline-start-color:var(--ok,#7fb894)}
.mine-item.pending{border-inline-start-color:var(--warn,#e0a96d)}
.mine-item.rejected{border-inline-start-color:var(--bad,#e0796d);opacity:.8}
.mine-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.mine-top b{font-size:15.5px;font-weight:600}
.mine-st{font-size:11.5px;padding:2px 10px;border-radius:99px;border:1px solid var(--hair-2);color:var(--faint)}
.mine-st.ok{color:var(--ok,#7fb894)}
.mine-st.pending{color:var(--warn,#e0a96d)}
.mine-st.rejected{color:var(--bad,#e0796d)}
.mine-line{font-size:14.5px;color:var(--sub);line-height:1.8}
.mine-why{margin-top:10px;font-size:13px;color:var(--bad,#e0796d)}
.mine-act{display:flex;gap:14px;margin-top:12px;font-size:12.5px;color:var(--faint)}
.mine-act button:hover,.mine-act a:hover{color:var(--fg)}

.tally{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.tally div{flex:1;min-width:104px;padding:16px;text-align:center;
  border:1px solid var(--hair);border-radius:var(--r)}
.tally b{display:block;font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}
.tally span{font-size:12px;color:var(--faint)}

/* ════════════════ دو جدول ════════════════ */

.board{margin-bottom:40px}
.board table{width:100%;border-collapse:collapse;font-size:14.5px}
.board th,.board td{padding:12px 10px;text-align:right;border-bottom:1px solid var(--hair)}
.board th{font-size:12px;font-weight:600;color:var(--faint);white-space:nowrap}
.board td.r{width:2.6rem;color:var(--faint);font-variant-numeric:tabular-nums}
.board td.n{font-variant-numeric:tabular-nums;font-weight:600}
.board tr.me{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.board tr.me td{border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
/* سه‌تای اول کمی درشت‌تر — بدونِ مدال و بدونِ سروصدا */
.board tbody tr:nth-child(-n+3) td.n{font-size:16px;color:var(--accent)}
.board .tdot{display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-inline-end:7px;vertical-align:middle}
.board .sticky-me{margin-top:8px;border-top:2px dashed var(--hair-2)}

@media (max-width:620px){
  .board thead{display:none}
  .board table,.board tbody,.board tr,.board td{display:block;width:auto}
  .board tr{border:1px solid var(--hair);border-radius:var(--r);padding:12px 14px;margin-bottom:10px}
  .board td{border:0;padding:3px 0}
  .board td.r{display:inline-block;margin-inline-end:10px}
  .board td[data-l]::before{content:attr(data-l) " ";opacity:.55;font-size:12px}
}

/* ════════════════ فرمِ ثبتِ برگ ════════════════ */

.leafform .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){ .leafform .row2{grid-template-columns:1fr} }
.leafform textarea{min-height:130px;line-height:1.85}
.leafform .len{font-size:12px;color:var(--faint);text-align:left;
  margin-top:-10px;margin-bottom:16px;font-variant-numeric:tabular-nums}

.bout{margin-top:32px}
.bout button{font-size:13.5px;color:var(--faint);text-decoration:underline;text-underline-offset:4px}
.bout button:hover{color:var(--fg)}

/* ════════════════ فرمِ ثبت‌نام و ورود ════════════════
   از نسخه‌ی ۱ آمده و به توکن‌های تازه ترجمه شده.
   این تکه در بازطراحی جا مانده بود؛ بدونش صفحه‌ی /barg بی‌قالب می‌شد. */

.bmain{padding-bottom:10px}
.bsoon p{margin-bottom:10px}
.bways h2{margin-bottom:6px}

.bfrm{margin-top:18px;position:relative}
.bf{display:block;margin-bottom:16px}
.bf > span{display:block;font-size:14px;font-weight:600;margin-bottom:7px}
.bf > span i{display:inline-block;font-style:normal;font-weight:500;font-size:11.5px;
  color:var(--faint);background:var(--bg-2);border:1px solid var(--hair);
  border-radius:20px;padding:2px 9px;margin-inline-start:6px;vertical-align:1px;line-height:1.7}
.bf input,.bfield{width:100%;background:var(--bg);border:1px solid var(--hair-2);border-radius:13px;
  color:var(--fg);font-family:inherit;font-weight:500;font-size:16px;padding:13px 14px;transition:.18s}
.bf input::placeholder{color:#5f5a51}
.bf input:focus,.bfield:focus,.bki input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(227,176,98,.15)}
.bhint{display:block;font-style:normal;font-size:12.5px;color:var(--faint);margin-top:7px;line-height:1.8}

/* تله‌ی مخفی: با left منفی، صفحه‌ی راست‌به‌چپ از پهنا بیرون می‌زد و گوشی افقی اسکرول می‌شد.
   این شکل هیچ فضایی نمی‌گیرد و هیچ سرریزی نمی‌سازد. */
.btrap{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.bbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);
  color:var(--accent-ink);border:0;border-radius:13px;font-family:inherit;font-weight:700;font-size:16px;
  padding:14px 20px;cursor:pointer;transition:.18s;line-height:1.6}
.bbtn:hover{filter:brightness(1.07)}
.bbtn[disabled]{background:var(--bg-2);color:var(--faint);cursor:default;filter:none}
.bbtn.wide{width:100%}

/* دکمه‌های رفتن به صفحه‌های تازه، در خانه‌ی عضو */
.bgo{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.bgo a{display:inline-flex;align-items:center;padding:11px 18px;border-radius:var(--r);
  font-size:14.5px;font-weight:600;background:var(--accent);color:var(--accent-ink)}
.bgo a.ghost{background:transparent;color:var(--fg);border:1px solid var(--hair-2);font-weight:500}
.bgo a.ghost:hover{background:var(--bg-2)}