/* =====================================================================================
peleh-app.css — طراحی جدید پله (سرمه‌ای و طلایی)
فقط از توکن‌های peleh-theme.css استفاده می‌کنه؛ هیچ رنگی اینجا مستقیم نوشته نشده.
• طلایی (--gold) فقط برای کار اصلی و پیشرفت: دکمه‌ی اصلی، تیک، حلقه، نوارها، تب فعال.
• سلسله‌مراتب: عددهای کلیدی درشت و سنگین (۹۰۰)، عنوان‌ها سبک‌تر (۷۰۰)، متن فرعی --muted.
• بدون backdrop-filter (روی WebView ضعیف کند بود)؛ عمق با --elev-1/--elev-2 و --hero-grad/--glow.
===================================================================================== */
:root{
--font-scale:1;
--safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
--safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
--fs-11:calc(11px * var(--font-scale)); --fs-12:calc(12px * var(--font-scale)); --fs-13:calc(13px * var(--font-scale));
--fs-14:calc(14px * var(--font-scale)); --fs-15:calc(15px * var(--font-scale)); --fs-16:calc(16px * var(--font-scale));
--fs-17:calc(17px * var(--font-scale)); --fs-19:calc(19px * var(--font-scale)); --fs-22:calc(22px * var(--font-scale));
--fs-28:calc(28px * var(--font-scale)); --fs-36:calc(36px * var(--font-scale)); --fs-44:calc(44px * var(--font-scale));
--r-xl:26px; --r-lg:22px; --r-md:16px; --r-sm:12px;
--tap:44px;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ min-height:100%; }
body{
margin:0; font-family:'Vazirmatn', Tahoma, sans-serif; color:var(--text); background:var(--bg);
font-size:var(--fs-14); line-height:1.7; min-height:100vh; overscroll-behavior-y:none; -webkit-font-smoothing:antialiased;
}
button{ font-family:inherit; border:none; cursor:pointer; background:none; color:inherit; font-size:inherit; }
input, select, textarea{ font-family:inherit; color:inherit; }
a{ color:var(--text); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
/* ---- آیکون خطی ---- */
.pi{ width:1.15em; height:1.15em; display:inline-block; vertical-align:-.22em; flex:none;
fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pi-fill{ fill:currentColor; }
.pi-gold{ color:var(--gold); } .pi-flame{ color:var(--flame); } .pi-ok{ color:var(--ok); } .pi-warn{ color:var(--warn); }
.pi-danger{ color:var(--danger); } .pi-muted{ color:var(--muted); } .pi-m1{ color:var(--medal-1); } .pi-m2{ color:var(--medal-2); } .pi-m3{ color:var(--medal-3); }
.pi-dot{ width:.7em; height:.7em; vertical-align:.02em; }
/* ---- قاب اپ ---- */
.app{ max-width:520px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column;
padding-top:calc(var(--safe-top) + 14px); padding-bottom:calc(var(--safe-bottom) + 96px); }
.topbar{ padding:2px 20px 6px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tb-titles{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tb-title{ font-size:var(--fs-17); font-weight:700; line-height:1.6; }
.tb-sub{ font-size:var(--fs-13); color:var(--muted); font-weight:500; }
.tb-end{ display:flex; align-items:center; gap:10px; flex:none; }
.brand{ font-weight:900; font-size:calc(24px * var(--font-scale)); letter-spacing:-.3px; display:flex; align-items:center; gap:8px; }
.brand-mark{ width:28px; height:21px; display:block; color:var(--gold); }
.brand .rungs{ display:none; }
.brand-sub{ font-size:var(--fs-11); color:var(--muted); }
.topbar-profile{ display:flex; align-items:center; cursor:pointer; border-radius:16px; }
.tb-btn{ width:var(--tap); height:var(--tap); border-radius:14px; border:1px solid var(--border); background:var(--surface);
color:var(--muted); display:flex; align-items:center; justify-content:center; position:relative; box-shadow:var(--elev-1); }
.tb-btn .pi{ width:20px; height:20px; }
.screen{ display:none; padding:6px 20px 24px; animation:fadein .22s ease; }
.screen.active{ display:block; }
@keyframes fadein{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
/* ---- عنوان بخش (نوار طلایی کوچک + عنوان سبک) ---- */
.section-title{ font-size:var(--fs-17); font-weight:700; color:var(--text); margin:26px 2px 12px; text-align:start;
display:flex; align-items:center; gap:10px; justify-content:flex-start; line-height:1.5; }
.section-title::before{ content:""; width:4px; height:18px; border-radius:2px; background:var(--gold); flex:none; }
.section-title .pi{ width:18px; height:18px; color:var(--muted); }
.section-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:26px 2px 12px; }
.section-row .section-title{ margin:0; }
.mini-btn{ min-height:36px; padding:0 12px; border-radius:12px; border:1px solid var(--border); background:var(--surface);
color:var(--text); font-size:var(--fs-13); font-weight:700; display:inline-flex; align-items:center; gap:6px; }
.page-title{ font-size:var(--fs-22); font-weight:800; margin:4px 2px 4px; }
.page-sub{ font-size:var(--fs-13); color:var(--muted); margin:0 2px 14px; }
/* ---- کارت‌ها ---- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px;
margin-bottom:14px; box-shadow:var(--elev-1); position:relative; }
.card.list-card{ padding:0; overflow:hidden; }
.card.list-card > .fab{ margin:12px 16px 16px; width:calc(100% - 32px); }
.card.list-card > .empty{ padding:22px 16px; }
.card.list-card > .tip-banner, .card.list-card > .tick-hint{ margin:12px 16px 4px; }
.card.raised{ background:var(--surface-2); }
.card.accent{ border-color:var(--gold-line); }
.profile-card{ display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--border);
border-radius:var(--r-lg); padding:14px 16px; margin-bottom:14px; box-shadow:var(--elev-1); }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.note{ font-size:var(--fs-13); color:var(--muted); line-height:1.9; text-align:start; }
.empty{ text-align:center; padding:26px 10px; color:var(--muted); font-size:var(--fs-14); }
.chev{ color:var(--faint); display:flex; }
.chev .pi{ width:18px; height:18px; }
/* ---- کارت اصلی «امروز» (بزرگ) ---- */
.hero-card{ background:var(--hero-grad); border:1px solid var(--border); border-radius:var(--r-xl); padding:20px;
box-shadow:var(--elev-2); margin-bottom:12px; display:flex; flex-direction:column; gap:16px; }
.hero-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.hero-text{ display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; }
.hero-title{ font-size:var(--fs-19); font-weight:700; }
.hero-sub{ font-size:var(--fs-13); color:var(--muted); line-height:1.8; }
.hero-cta{ margin-top:8px; align-self:flex-start; min-height:48px; padding:0 20px; border-radius:var(--r-md); background:var(--gold);
color:var(--on-gold); font-size:var(--fs-15); font-weight:800; display:inline-flex; align-items:center; gap:8px; }
.hero-cta .pi{ width:18px; height:18px; stroke-width:2.4; }
.ring-wrap{ position:relative; display:flex; align-items:center; justify-content:center; flex:none; }
.ring-wrap::before{ content:""; position:absolute; inset:-18px; border-radius:50%; background:var(--glow); pointer-events:none; }
.ring-wrap svg{ position:relative; display:block; }
.ring-track{ stroke:var(--track); }
.ring-fill{ stroke:var(--gold); transition:stroke-dashoffset .45s ease; }
.ring-label{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.ring-num{ font-size:var(--fs-36); font-weight:900; line-height:1; }
.ring-sub{ font-size:var(--fs-12); color:var(--muted); }
.level-strip{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-md); background:var(--surface-2);
border:1px solid var(--border); color:var(--text); width:100%; text-align:start; }
.level-strip .ls-ic{ width:36px; height:36px; border-radius:12px; background:var(--gold-soft); color:var(--gold); display:flex; align-items:center; justify-content:center; flex:none; }
.level-strip .ls-ic .pi{ width:20px; height:20px; stroke-width:2; }
.level-strip .ls-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.level-strip .ls-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.level-strip b{ font-size:var(--fs-15); font-weight:800; }
.level-strip span{ font-size:var(--fs-12); color:var(--muted); }
.day-title{ text-align:center; font-size:var(--fs-22); font-weight:800; margin-top:4px; }
.day-sub{ text-align:center; font-size:var(--fs-13); color:var(--muted); margin-bottom:6px; }
/* ---- ردیف دو کارت کوچک ---- */
.stat-pair{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-bottom:12px; }
.stat-tile{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px 16px;
box-shadow:var(--elev-1); display:flex; flex-direction:column; gap:4px; text-align:start; color:var(--text); min-height:104px; }
.stat-tile .st-head{ display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:var(--fs-13); color:var(--muted); font-weight:600; }
.stat-tile .st-head .pi{ width:20px; height:20px; }
.stat-tile .st-num{ font-size:var(--fs-36); font-weight:900; line-height:1.1; letter-spacing:-.5px; }
.stat-tile .st-unit{ font-size:var(--fs-12); color:var(--muted); }
/* ---- الگوی پله: ۷ روز اخیر، هر روز یه پله ---- */
.stairs-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 16px 12px;
box-shadow:var(--elev-1); margin-bottom:12px; color:var(--text); width:100%; text-align:start; display:block; }
.stairs-head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:12px; }
.stairs-head b{ font-size:var(--fs-15); font-weight:700; }
.stairs-head span{ font-size:var(--fs-12); color:var(--muted); }
.stairs{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px; align-items:end; height:96px; }
.stair{ position:relative; border-radius:9px 9px 4px 4px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden; }
/* پله‌ی هر روز از پایین با طلایی پر می‌شه (نسبت امتیاز اون روز)؛ روز کامل = پله‌ی کاملاً طلایی */
.stair i{ position:absolute; left:0; right:0; bottom:0; background:var(--gold); border-radius:6px 6px 3px 3px; }
.stair.done{ border-color:var(--gold-line); }
.stair.full{ border-color:var(--gold); }
.stair.today{ outline:2px solid var(--gold); outline-offset:2px; }
.stair-days{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px; margin-top:8px; }
.stair-days span{ text-align:center; font-size:var(--fs-11); color:var(--muted); font-weight:600; }
.stair-days span.today{ color:var(--text); font-weight:800; }
/* ---- ردیف عادت/فعالیت ---- */
.act-row{ display:flex; align-items:center; gap:12px; min-height:64px; padding:10px 16px; border-bottom:1px solid var(--divider); cursor:pointer; }
.act-row:last-of-type{ border-bottom:none; }
/* ردیف لینکی با همون ظاهر (کتاب امروز، مهم‌ترین قدم) — عمداً جدا از .act-row تا با عادت‌ها قاطی نشه */
.link-row{ display:flex; align-items:center; gap:12px; min-height:64px; padding:10px 16px; cursor:pointer; }
.link-row .act-title{ font-weight:700; }
.card:not(.list-card) .act-row{ padding:10px 2px; }
.act-check{ width:28px; height:28px; border-radius:9px; border:2px solid var(--ctrl-border); display:flex; align-items:center; justify-content:center; flex:none; transition:background .18s, border-color .18s; }
.act-check.done{ background:var(--gold); border-color:var(--gold); }
.act-check svg{ width:16px; height:16px; opacity:0; color:var(--on-gold); stroke:var(--on-gold); stroke-width:3; transition:opacity .15s; }
.act-check.done svg{ opacity:1; }
.act-icon{ width:26px; height:26px; color:var(--muted); display:flex; align-items:center; justify-content:center; flex:none; }
.act-icon .pi{ width:24px; height:24px; stroke-width:1.7; color:inherit; } /* آیکون عادت رنگ ردیف رو می‌گیره (ستاره‌ی پیش‌فرض طلایی نشه) */
.act-row.is-done .act-icon{ color:var(--gold); }
.act-title{ flex:1; min-width:0; font-size:var(--fs-15); font-weight:700; text-align:start; line-height:1.55; }
.act-row.is-done .act-title{ color:var(--muted); text-decoration:line-through; text-decoration-thickness:1px; }
.act-title .alt-tag{ display:block; font-size:var(--fs-12); font-weight:500; color:var(--muted); margin-top:1px; text-decoration:none; }
.act-meta{ display:flex; align-items:center; gap:8px; font-size:var(--fs-12); color:var(--muted); white-space:nowrap; flex:none; }
.act-meta .sep{ width:1px; height:14px; background:var(--divider); }
.act-meta .pi{ width:14px; height:14px; }
.act-pts{ font-size:var(--fs-12); font-weight:800; color:var(--muted); display:inline-flex; align-items:center; gap:3px; flex:none; }
.act-pts.done{ color:var(--gold); }
.icon-btn{ width:36px; height:36px; border-radius:12px; background:var(--surface-2); color:var(--muted); display:flex; align-items:center; justify-content:center; flex:none; }
.icon-btn .pi, .icon-btn svg{ width:17px; height:17px; }
.act-row .icon-btn{ width:36px; height:36px; }
/* ---- کارها ---- */
.task-tier{ font-size:var(--fs-12); font-weight:700; color:var(--muted); padding:12px 16px 4px; display:flex; align-items:center; gap:6px; }
.task-row{ display:flex; align-items:center; gap:10px; min-height:58px; padding:8px 16px; border-bottom:1px solid var(--divider); }
.task-row:last-of-type{ border-bottom:none; }
.card:not(.list-card) .task-row{ padding:8px 2px; }
.task-check{ width:26px; height:26px; border-radius:8px; border:2px solid var(--ctrl-border); display:flex; align-items:center; justify-content:center; flex:none; cursor:pointer; }
.task-check.done{ background:var(--gold); border-color:var(--gold); }
.task-check svg{ width:15px; height:15px; opacity:0; color:var(--on-gold); stroke:var(--on-gold); stroke-width:3; }
.task-check.done svg{ opacity:1; }
.task-text{ flex:1; min-width:0; font-size:var(--fs-15); font-weight:600; text-align:start; }
.task-text.done{ text-decoration:line-through; color:var(--muted); }
.task-tools{ display:flex; gap:4px; flex:none; }
.task-tools .icon-btn{ width:34px; height:34px; background:transparent; }
.priority-tag{ font-size:var(--fs-11); font-weight:800; padding:3px 10px; border-radius:999px; flex:none; }
.priority-urgent{ background:var(--danger-soft); color:var(--danger); }
.priority-important{ background:var(--gold-soft); color:var(--text); }
.priority-deferrable{ background:var(--surface-2); color:var(--muted); }
.priority-picker{ display:flex; gap:8px; margin-top:2px; }
.priority-opt{ flex:1; min-height:44px; padding:9px; border-radius:12px; font-size:var(--fs-13); font-weight:700; text-align:center; background:var(--surface-2); border:1.5px solid var(--border); color:var(--text); }
.priority-opt.on.urgent{ background:var(--danger-soft); border-color:var(--danger); }
.priority-opt.on.important{ background:var(--gold-soft); border-color:var(--gold); }
.priority-opt.on.deferrable{ background:var(--surface-3); border-color:var(--ctrl-border); }
.star-btn{ width:34px; height:34px; flex:none; color:var(--faint); display:flex; align-items:center; justify-content:center; }
.star-btn svg{ width:19px; height:19px; }
.star-btn.on{ color:var(--gold); }
.star-btn.on svg{ fill:currentColor; }
.dot-urgent{ color:var(--danger); } .dot-important{ color:var(--warn); } .dot-deferrable{ color:var(--faint); }
/* ---- کارت تمرین سلامت پلاس در «امروز» ---- */
.workout-card{ display:flex; align-items:center; gap:14px; padding:16px; border-radius:var(--r-lg); background:var(--surface-2);
border:1px solid var(--border); box-shadow:var(--elev-1); margin-bottom:12px; }
.workout-card .wc-ic{ width:52px; height:52px; border-radius:16px; background:var(--surface-3); color:var(--gold); display:flex; align-items:center; justify-content:center; flex:none; }
.workout-card .wc-ic .pi{ width:28px; height:28px; }
.workout-card .wc-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.workout-card .wc-kicker{ font-size:var(--fs-12); color:var(--muted); font-weight:700; }
.workout-card .wc-title{ font-size:var(--fs-15); font-weight:800; }
.workout-card .wc-go{ flex:none; min-height:44px; padding:0 16px; border-radius:14px; background:var(--text); color:var(--bg); font-weight:800; font-size:var(--fs-14); }
/* ---- جمله‌ی روز با تصویر پله ---- */
.quote-card{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:148px;
padding:20px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); box-shadow:var(--elev-1); margin-bottom:12px; }
.quote-card .q-text{ position:relative; z-index:1; font-size:var(--fs-17); font-weight:700; line-height:1.9; flex:1; min-width:0; }
.quote-narrator{ font-size:var(--fs-12); color:var(--muted); font-weight:600; margin-top:6px; }
.quote-art{ width:150px; height:118px; flex:none; display:block; }
.quote-art .qa-sun{ fill:var(--gold); }
.quote-art .qa-hill{ fill:var(--surface-3); }
.quote-art .qa-step{ fill:var(--gold); }
.quote-art .qa-step.dim{ fill:var(--gold); opacity:.45; }
/* ---- حال، یادداشت، نوار پیشرفت ---- */
.mood-row{ display:flex; justify-content:space-between; gap:8px; margin-bottom:12px; }
.mood-emoji{ flex:1; max-width:56px; aspect-ratio:1; border-radius:16px; background:var(--surface-2); border:1.5px solid var(--border);
color:var(--muted); display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s; }
.mood-emoji .pi{ width:26px; height:26px; }
.mood-emoji.on{ background:var(--gold-soft); border-color:var(--gold); color:var(--text); }
.mood-text, .note-field textarea{ width:100%; min-height:64px; resize:vertical; background:var(--surface-2); border:1px solid var(--border);
border-radius:14px; color:var(--text); font-size:var(--fs-14); padding:11px 13px; text-align:start; line-height:1.8; }
.mood-text:focus, .note-field textarea:focus{ outline:none; border-color:var(--gold); }
.note-field{ margin-bottom:14px; }
.note-field label{ display:block; font-size:var(--fs-13); color:var(--muted); font-weight:600; margin-bottom:6px; text-align:start; }
.pbar-track{ height:8px; border-radius:99px; background:var(--track); overflow:hidden; }
.pbar-fill{ height:100%; background:var(--gold); border-radius:99px; transition:width .4s ease; }
.list-field{ background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:6px 12px; }
.list-item-row{ display:flex; align-items:center; gap:8px; min-height:44px; padding:4px 0; border-bottom:1px solid var(--divider); }
.list-item-row:last-of-type{ border-bottom:none; }
.list-item-text{ flex:1; font-size:var(--fs-14); text-align:start; }
/* ---- جایزه‌ها ---- */
.reward-hero{ text-align:center; padding:22px 18px; background:var(--hero-grad); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--elev-2); margin-bottom:14px; }
.reward-hero .rh-num{ font-size:var(--fs-44); font-weight:900; line-height:1.1; }
.reward-hero .rh-lbl{ font-size:var(--fs-13); color:var(--muted); margin-top:2px; }
.reward-row{ display:flex; align-items:center; gap:12px; min-height:68px; padding:12px 16px; border-bottom:1px solid var(--divider); }
.reward-row:last-of-type{ border-bottom:none; }
.reward-row.reached .reward-title{ color:var(--text); }
.reward-pts{ font-size:var(--fs-16); font-weight:900; color:var(--muted); min-width:44px; text-align:center; }
.reward-body{ flex:1; text-align:start; min-width:0; }
.reward-title{ font-size:var(--fs-15); font-weight:700; }
.reward-sub{ font-size:var(--fs-12); color:var(--muted); margin-top:2px; }
.claim-btn{ background:var(--gold); color:var(--on-gold); font-weight:800; font-size:var(--fs-13); min-height:40px; padding:0 16px; border-radius:12px; flex:none; }
.manage-row{ display:flex; align-items:center; gap:10px; min-height:60px; padding:10px 16px; border-bottom:1px solid var(--divider); }
.manage-row:last-of-type{ border-bottom:none; }
.rotation-body .manage-row{ padding:10px 2px; }
.manage-body{ flex:1; text-align:start; min-width:0; }
.manage-title{ font-size:var(--fs-15); font-weight:700; }
.manage-days{ font-size:var(--fs-12); color:var(--muted); margin-top:4px; display:flex; gap:4px; justify-content:flex-start; flex-wrap:wrap; }
.day-chip{ background:var(--surface-2); padding:2px 8px; border-radius:8px; }
.manage-pts{ font-size:var(--fs-14); font-weight:800; color:var(--muted); min-width:32px; text-align:center; }
.manage-actions{ display:flex; gap:6px; }
.rotation-toggle-row{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; min-height:var(--tap); }
.rotation-toggle-label{ font-size:var(--fs-14); font-weight:700; color:var(--text); }
.rotation-caret{ color:var(--muted); display:inline-flex; transition:transform .2s ease; }
.rotation-caret.open{ transform:rotate(180deg); }
.rotation-body{ margin-top:10px; padding-top:6px; border-top:1px solid var(--divider); }
.list-card > .rotation-body{ margin:0; padding:0; border-top:none; }
.list-card > .rotation-body .manage-row{ padding:10px 16px; }
.badge-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--gold); vertical-align:middle; }
.tabbtn .badge-dot{ box-shadow:0 0 0 2px var(--nav-bg); }
/* ---- دکمه‌ها ---- */
.fab{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:52px; padding:12px; margin-top:14px;
background:transparent; border:1.5px dashed var(--ctrl-border); border-radius:var(--r-md); color:var(--text); font-weight:700; font-size:var(--fs-14); }
.btn{ flex:1; min-height:48px; padding:12px; border-radius:var(--r-md); font-weight:800; font-size:var(--fs-15); text-align:center;
display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn-primary{ background:var(--gold); color:var(--on-gold); }
.btn-ghost{ background:var(--surface-2); color:var(--text); border:1px solid var(--border); }
.btn-danger{ background:var(--danger-soft); color:var(--danger); border:1px solid var(--danger-soft); }
.btn.is-dim{ opacity:.55; }
.btn:disabled{ opacity:.55; }
.link-btn{ color:var(--muted); font-size:var(--fs-13); text-decoration:underline; text-underline-offset:3px; padding:10px; min-height:var(--tap); }
.row-mini{ flex:none; min-height:40px; padding:6px 12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border);
color:var(--text); font-size:var(--fs-13); font-weight:700; display:inline-flex; align-items:center; gap:6px; }
.row-mini.primary{ background:var(--gold); color:var(--on-gold); border-color:var(--gold); }
.claim-btn .pi, .btn .pi, .row-mini .pi, .fab .pi, .mini-btn .pi{ width:18px; height:18px; }
/* ---- انتخاب‌گر «هفته | ماه» و زیرتب‌ها ---- */
.seg{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:4px; padding:4px; border-radius:var(--r-md);
background:var(--surface-2); border:1px solid var(--border); margin:2px 0 16px; }
.seg button{ min-height:40px; border-radius:12px; color:var(--muted); font-size:var(--fs-14); font-weight:700; }
.seg button[aria-pressed="true"]{ background:var(--surface); color:var(--text); font-weight:800; box-shadow:var(--elev-1); border:1px solid var(--border); }
/* ---- چیپ‌ها ---- */
.suggest-chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start; }
.suggest-chip{ min-height:40px; font-size:var(--fs-13); font-weight:600; padding:7px 14px; border-radius:999px;
background:var(--surface-2); border:1px solid var(--border); color:var(--text); display:inline-flex; align-items:center; gap:6px; }
.suggest-chip b{ color:var(--text); }
.suggest-chip.on{ background:var(--gold); color:var(--on-gold); border-color:var(--gold); font-weight:800; }
.suggest-chip.on b{ color:var(--on-gold); }
.suggest-chip.picked{ border-color:var(--gold); box-shadow:0 0 0 2px var(--gold) inset; } /* چیپ انتخاب‌شده در شیت «عادت جدید» (هنوز ذخیره نشده) */
.suggest-chip.on::before{ content:""; width:14px; height:14px; flex:none; background:currentColor;
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat; }
.h-tabbar{ scrollbar-width:thin; scrollbar-color:var(--divider) transparent; }
.h-tabbar::-webkit-scrollbar{ height:4px; }
.h-tabbar::-webkit-scrollbar-thumb{ background:var(--divider); border-radius:4px; }
/* ---- برگه و فرم ---- */
.overlay{ position:fixed; inset:0; background:var(--scrim); display:none; align-items:flex-end; justify-content:center; z-index:50; }
.overlay.show{ display:flex; }
.sheet{ width:100%; max-width:520px; background:var(--sheet-bg); border-radius:28px 28px 0 0; padding:26px 20px calc(24px + var(--safe-bottom));
border:1px solid var(--border); border-bottom:none; max-height:88vh; overflow-y:auto; animation:slideup .24s ease; box-shadow:var(--elev-2); position:relative; }
.sheet::before{ content:""; position:absolute; top:9px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:4px; background:var(--ctrl-border); }
@keyframes slideup{ from{ transform:translateY(24px); opacity:0; } to{ transform:none; opacity:1; } }
.sheet h3{ margin:0 0 16px; font-size:var(--fs-19); font-weight:800; text-align:start; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:var(--fs-13); color:var(--muted); font-weight:600; margin-bottom:6px; text-align:start; }
.field input[type=text], .field input[type=number], .field input[type=tel], .field input[type=email], .field input[type=password], .field textarea, .field select, .goal-input{
width:100%; max-width:100%; min-width:0; min-height:48px; padding:11px 14px; border-radius:14px; border:1px solid var(--border);
background:var(--surface-2); color:var(--text); font-size:var(--fs-15); text-align:start; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus, .goal-input:focus{ outline:none; border-color:var(--gold); }
::placeholder{ color:var(--muted); opacity:1; }
input[type="date"].goal-input{ direction:ltr; text-align:right; }
.date-field{ position:relative; width:100%; overflow:hidden; border-radius:14px; border:1px solid var(--border); background:var(--surface-2); padding:11px 14px; min-height:48px; }
.date-field .date-display{ font-size:var(--fs-15); color:var(--text); }
.date-field .date-display.placeholder{ color:var(--muted); }
.date-field input[type="date"]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; border:0; padding:0; margin:0; cursor:pointer; }
.days-grid{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-start; }
.day-toggle{ min-height:40px; padding:8px 12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); font-size:var(--fs-13); font-weight:700; color:var(--muted); }
.day-toggle.on{ background:var(--gold); color:var(--on-gold); border-color:var(--gold); }
.sheet-actions{ display:flex; gap:10px; margin-top:20px; }
.field-error{ color:var(--danger); font-size:var(--fs-13); text-align:start; margin:-6px 0 10px; min-height:14px; }
.af-more{ margin:4px 0 12px; }
.af-more summary{ cursor:pointer; color:var(--muted); font-size:var(--fs-13); padding:8px 0; min-height:var(--tap); }
/* ---- تنظیمات و اجزای کوچک ---- */
.switch{ position:relative; width:48px; height:28px; border-radius:20px; background:var(--track); border:1px solid var(--border); flex-shrink:0; transition:.2s; }
.switch.on{ background:var(--gold); border-color:var(--gold); }
.switch::after{ content:''; position:absolute; top:2px; inset-inline-start:2px; width:22px; height:22px; border-radius:50%; background:var(--text); transition:.2s; }
.switch.on::after{ background:var(--on-gold); transform:translateX(-20px); }
.tip-banner{ display:flex; align-items:flex-start; gap:10px; background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:10px 12px; margin-bottom:12px; }
.tip-banner-text{ flex:1; font-size:var(--fs-13); color:var(--text); line-height:1.8; }
.tip-banner-close{ flex:none; width:32px; height:32px; border-radius:10px; background:var(--surface-3); color:var(--muted); display:flex; align-items:center; justify-content:center; }
.step{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
.step-num{ width:26px; height:26px; border-radius:50%; background:var(--surface-3); color:var(--text); display:flex; align-items:center; justify-content:center; font-size:var(--fs-12); font-weight:900; flex-shrink:0; }
.step-body{ flex:1; text-align:start; }
.step-title{ font-size:var(--fs-14); font-weight:700; }
.step-desc{ font-size:var(--fs-13); color:var(--muted); margin-top:2px; line-height:1.8; }
.badge-soft{ display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:999px; background:var(--surface-3); color:var(--text); font-size:var(--fs-12); font-weight:700; }
.badge-ok{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; background:var(--ok-soft); color:var(--ok); font-size:var(--fs-12); font-weight:700; }
.badge-warn{ display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:999px; background:var(--warn-soft); color:var(--warn); font-size:var(--fs-12); font-weight:700; }
.badge-gold{ display:inline-flex; align-items:center; gap:4px; padding:3px 12px; border-radius:999px; background:var(--gold); color:var(--on-gold); font-size:var(--fs-12); font-weight:800; }
.top3-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.top3-num{ width:24px; height:24px; border-radius:50%; background:var(--surface-3); color:var(--text); font-size:var(--fs-12); font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
/* ---- آواتار ---- */
.avatar{ width:var(--tap); height:var(--tap); padding:0; border-radius:14px; overflow:hidden; flex-shrink:0; background:var(--surface-2); border:1px solid var(--border);
display:flex; align-items:center; justify-content:center; color:var(--muted); cursor:pointer; box-shadow:var(--elev-1); }
.avatar .pi{ width:22px; height:22px; }
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar-lg{ width:72px; height:72px; border-radius:22px; }
.avatar-lg .pi{ width:34px; height:34px; }
/* ---- تقویم ---- */
.cal-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:8px; }
.cal-nav-btn{ width:var(--tap); height:var(--tap); border-radius:14px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); display:flex; align-items:center; justify-content:center; }
.cal-nav-btn svg{ width:18px; height:18px; }
.cal-title{ font-size:var(--fs-16); font-weight:800; text-align:center; }
.cal-grid{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:5px; width:100%; }
.cal-dow{ font-size:var(--fs-11); color:var(--muted); text-align:center; padding-bottom:4px; font-weight:700; min-width:0; }
.cal-cell{ aspect-ratio:1; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:var(--fs-13); font-weight:700;
position:relative; min-width:0; overflow:hidden; background:var(--surface-2); color:var(--muted); cursor:pointer; }
.cal-cell.empty{ background:none; cursor:default; }
.cal-cell.has-points{ background:var(--gold-soft); color:var(--text); border:1px solid var(--gold-line); }
.cal-cell.today{ outline:2px solid var(--gold); outline-offset:1.5px; color:var(--text); }
.cal-cell.holiday{ color:var(--danger); border:1px solid var(--danger-soft); }
.cal-cell .dot{ position:absolute; bottom:3px; width:5px; height:5px; border-radius:50%; background:var(--gold); }
.cal-cell .dot.event-dot{ background:var(--info); right:3px; left:auto; }
.cal-cell .dot.pts-dot{ left:3px; }
.cal-cell .dot.occasion-dot{ background:var(--warn); top:3px; right:3px; bottom:auto; left:auto; }
.cal-cell .bday{ position:absolute; top:2px; left:2px; color:var(--warn); }
.cal-cell .bday .pi{ width:11px; height:11px; }
.cal-legend{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:14px; font-size:var(--fs-12); color:var(--muted); }
.cal-legend span{ display:inline-flex; align-items:center; gap:5px; }
.legend-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.legend-dot.l-active{ background:var(--gold); } .legend-dot.l-event{ background:var(--info); } .legend-dot.l-holiday{ background:var(--danger); } .legend-dot.l-occasion{ background:var(--warn); }
.hm-0{ fill:var(--track); } .hm-1{ fill:var(--gold); fill-opacity:.28; } .hm-2{ fill:var(--gold); fill-opacity:.5; } .hm-3{ fill:var(--gold); fill-opacity:.75; } .hm-4{ fill:var(--gold); }
.hm-label{ fill:var(--muted); }
.mbar{ fill:var(--track); } .mbar.on{ fill:var(--gold); fill-opacity:.55; } .mbar.today{ fill:var(--gold); fill-opacity:1; }
.event-row{ display:flex; align-items:center; gap:10px; min-height:44px; }
.event-day{ width:30px; height:30px; border-radius:10px; background:var(--info-soft); color:var(--info); font-size:var(--fs-12); font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.event-title{ font-size:var(--fs-14); text-align:start; flex:1; }
.event-row.holiday .event-title{ color:var(--danger); }
.day-flag{ padding:10px 14px; margin-bottom:10px; border-radius:14px; border:1px solid var(--border); border-inline-start:3px solid var(--danger); background:var(--surface-2); }
.day-flag.occasion{ border-inline-start-color:var(--warn); }
.memory-photo{ border:6px solid var(--photo-frame); border-radius:12px; overflow:hidden; box-shadow:var(--elev-2); }
.week-bar-row{ display:flex; align-items:center; gap:10px; min-height:36px; }
.week-bar-pts{ font-size:var(--fs-12); font-weight:800; color:var(--text); width:30px; text-align:center; flex-shrink:0; }
.week-bar-day{ font-size:var(--fs-13); color:var(--muted); width:64px; text-align:start; flex-shrink:0; }
.week-bar-day.today{ color:var(--text); font-weight:800; }
.stat-grid{ display:flex; gap:10px; }
.stat-box{ flex:1; min-width:0; text-align:center; background:var(--surface-2); border-radius:16px; padding:14px 6px; }
.stat-num{ font-size:var(--fs-28); font-weight:900; color:var(--text); line-height:1.15; }
.stat-lbl{ font-size:var(--fs-12); color:var(--muted); margin-top:4px; }
.xp-badge{ display:inline-flex; align-items:baseline; gap:6px; color:var(--text); font-weight:900; font-size:var(--fs-28); }
.xp-badge small{ font-size:var(--fs-13); color:var(--muted); font-weight:700; }
/* ---- جشن تیک ---- */
.celebrate-toast{ position:fixed; top:18%; left:50%; transform:translateX(-50%) scale(.5); font-size:calc(56px * var(--font-scale)); z-index:999; pointer-events:none;
color:var(--gold); animation:celebrate-pop .85s ease forwards; }
.celebrate-toast .pi{ stroke-width:1.4; }
.celebrate-toast.big{ font-size:calc(88px * var(--font-scale)); animation:celebrate-pop-big 1.1s ease forwards; }
@keyframes celebrate-pop{ 0%{ transform:translateX(-50%) scale(.4); opacity:0; } 25%{ transform:translateX(-50%) scale(1.15); opacity:1; } 45%{ transform:translateX(-50%) scale(1); opacity:1; } 100%{ transform:translateX(-50%) scale(1.1) translateY(-30px); opacity:0; } }
@keyframes celebrate-pop-big{ 0%{ transform:translateX(-50%) scale(.3); opacity:0; } 30%{ transform:translateX(-50%) scale(1.25); opacity:1; } 60%{ transform:translateX(-50%) scale(1.08); opacity:1; } 100%{ transform:translateX(-50%) scale(1.2) translateY(-40px); opacity:0; } }
/* ---- جدول امتیاز (کتاب) ---- */
.lb-podium{ display:flex; align-items:flex-start; justify-content:center; gap:14px; margin:4px 0 20px; padding:0 2px; }
.lb-podium-col{ display:flex; flex-direction:column; align-items:center; flex:1; max-width:100px; min-width:0; }
.lb-podium-crown{ font-size:var(--fs-19); line-height:1.3; margin-bottom:2px; color:var(--medal-1); }
.lb-podium-avatar-wrap{ position:relative; }
.lb-podium-avatar{ border-radius:50%; display:flex; align-items:center; justify-content:center; width:62px; height:62px; font-size:var(--fs-19); font-weight:900; color:var(--on-color); border:3px solid var(--surface); box-shadow:var(--elev-1); }
.lb-podium-col.p1 .lb-podium-avatar{ width:78px; height:78px; font-size:var(--fs-22); border-color:var(--gold); }
.lb-podium-badge{ position:absolute; top:-2px; left:-4px; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:var(--fs-11); font-weight:900; color:var(--on-color); border:2px solid var(--surface); }
.lb-podium-name{ margin-top:8px; font-size:var(--fs-13); font-weight:800; text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-podium-pts{ font-size:var(--fs-12); color:var(--muted); font-weight:700; margin-top:1px; }
.lb-list{ display:flex; flex-direction:column; border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.lb-row{ display:flex; align-items:center; gap:10px; min-height:52px; padding:8px 12px; border-bottom:1px solid var(--divider); }
.lb-row:last-child{ border-bottom:none; }
.lb-row.me{ background:var(--gold-soft); }
.lb-row-pinned{ border:1px dashed var(--gold-line); border-radius:16px; margin-top:8px; }
.lb-badge{ flex:none; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:var(--fs-11); font-weight:900; color:var(--on-color); }
.lb-avatar{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--on-color); font-size:var(--fs-13); flex:none; }
.lb-name{ flex:1; min-width:0; font-size:var(--fs-14); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:start; }
.lb-pts{ flex:none; font-size:var(--fs-13); color:var(--text); font-weight:900; }
.lbc-1{ background:var(--gold); } .lbc-2{ background:var(--info); } .lbc-3{ background:var(--ok); } .lbc-4{ background:var(--warn); } .lbc-5{ background:var(--danger); } .lbc-6{ background:var(--muted); }
.lbm-1{ background:var(--medal-1); } .lbm-2{ background:var(--medal-2); } .lbm-3{ background:var(--medal-3); } .lbm-n{ background:var(--faint); }
/* ---- انتخاب تم: پیش‌نمایش با کلاس خود اون تم (بدون رنگ ثابت) ---- */
.theme-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.theme-opt{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 6px; border-radius:16px; background:var(--surface-2); border:1.5px solid var(--border); position:relative; color:var(--text); }
.theme-opt.on{ border-color:var(--gold); }
.theme-swatch{ display:flex; gap:3px; padding:6px; border-radius:12px; background:var(--bg); border:1px solid var(--border); }
.theme-swatch span{ width:14px; height:14px; border-radius:50%; border:1px solid var(--border); }
.theme-swatch .sw-bg{ background:var(--surface); } .theme-swatch .sw-gold{ background:var(--gold); } .theme-swatch .sw-text{ background:var(--text); }
.theme-name{ font-size:var(--fs-12); font-weight:700; text-align:center; color:var(--text); }
.theme-lock{ position:absolute; top:6px; left:6px; color:var(--muted); }
.theme-lock .pi{ width:14px; height:14px; }
.theme-preview{ border-radius:18px; overflow:hidden; margin-bottom:14px; border:1px solid var(--gold-line); }
.theme-preview .tp-bg{ height:128px; background:var(--bg); display:flex; align-items:center; justify-content:center; position:relative; }
.theme-preview .tp-card{ width:70%; padding:14px; border-radius:14px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--elev-1); }
.theme-preview .tp-l1{ width:40%; height:8px; border-radius:4px; background:var(--gold); margin-bottom:8px; }
.theme-preview .tp-l2{ width:70%; height:6px; border-radius:3px; background:var(--muted); opacity:.6; }
.theme-preview .tp-dot{ position:absolute; bottom:12px; left:12px; width:30px; height:30px; border-radius:50%; background:var(--gold); }
/* ---- ورود و شروع سریع ---- */
.onboard-wrap{ max-width:420px; margin:0 auto; padding:56px 22px 40px; }
.profile-row{ display:flex; align-items:center; gap:10px; min-height:56px; padding:10px 4px; border-bottom:1px solid var(--divider); }
.profile-row:last-child{ border-bottom:none; }
.qs-wrap{ padding-top:max(28px, env(safe-area-inset-top)); }
.qs-title{ font-weight:800; font-size:var(--fs-22); text-align:center; line-height:1.6; margin-bottom:6px; }
.qs-sub{ color:var(--muted); font-size:var(--fs-14); text-align:center; line-height:1.8; margin-bottom:18px; }
.qs-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.qs-chip{ display:flex; align-items:center; gap:10px; min-height:58px; padding:10px 14px; border-radius:var(--r-md); background:var(--surface);
border:1.5px solid var(--border); color:var(--text); text-align:start; font-weight:700; font-size:var(--fs-14); transition:transform .12s, background .15s, border-color .15s; box-shadow:var(--elev-1); }
.qs-chip:active{ transform:scale(.97); }
.qs-chip.on{ background:var(--gold-soft); border-color:var(--gold); }
.qs-chip .qs-ic{ font-size:calc(24px * var(--font-scale)); line-height:1; flex:none; color:var(--muted); display:flex; }
.qs-chip.on .qs-ic{ color:var(--gold); }
.qs-chip .qs-lb small{ display:block; color:var(--muted); font-weight:500; font-size:var(--fs-12); }
.qs-ref{ margin-top:16px; text-align:center; }
.qs-ref summary{ cursor:pointer; color:var(--muted); font-size:var(--fs-13); }
.tick-hint{ background:var(--gold-soft); color:var(--text); border-radius:12px; padding:9px 12px; margin-bottom:10px; font-size:var(--fs-13); font-weight:700; animation:tickHintPulse 1.8s ease-in-out infinite; display:flex; align-items:center; gap:8px; }
@keyframes tickHintPulse{ 50%{ box-shadow:0 0 0 4px var(--gold-soft); } }
.empty-habits{ text-align:center; padding:20px 14px; }
.reminder-ask{ margin-bottom:12px; text-align:center; border:1px solid var(--gold-line); }
.simple-mode-foot{ text-align:center; margin-top:6px; }
.peleh-toast{ position:fixed; left:50%; bottom:calc(98px + var(--safe-bottom)); transform:translate(-50%, 16px); display:flex; align-items:center; gap:12px;
max-width:min(92vw, 460px); padding:12px 16px; border-radius:16px; background:var(--toast-bg); color:var(--toast-text); border:1px solid var(--border);
box-shadow:var(--elev-2); font-size:var(--fs-14); font-weight:700; opacity:0; pointer-events:none; z-index:9500; transition:opacity .18s, transform .18s; }
.peleh-toast.show{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.peleh-toast-btn{ flex:none; color:var(--gold); font-weight:900; padding:6px 8px; min-height:40px; }
.sys-banner{ position:fixed; left:50%; top:calc(12px + var(--safe-top)); transform:translateX(-50%); z-index:9999; background:var(--danger); color:var(--on-color);
padding:10px 16px; border-radius:14px; font-size:var(--fs-13); font-weight:700; box-shadow:var(--elev-2); max-width:92vw; text-align:center; line-height:1.7; }
.bottom-toast{ position:fixed; left:50%; bottom:calc(98px + var(--safe-bottom)); transform:translateX(-50%); z-index:9999; background:var(--gold); color:var(--on-gold);
padding:10px 18px; border-radius:14px; font-size:var(--fs-14); font-weight:800; box-shadow:var(--elev-2); max-width:92vw; text-align:center; }
@media (prefers-reduced-motion: reduce){ .tick-hint{ animation:none; } .peleh-toast, .screen, .sheet{ transition:none; animation:none; } .celebrate-toast{ animation-duration:.01s; } }
/* ---- آموزش (coachmark) ---- */
.cm-spot{ position:fixed; border-radius:16px; border:2px solid var(--gold); box-shadow:0 0 0 9999px var(--scrim); z-index:901; }
.cm-dim{ position:fixed; inset:0; background:var(--scrim); z-index:901; }
.cm-close{ position:fixed; top:calc(14px + var(--safe-top)); left:14px; z-index:903; width:var(--tap); height:var(--tap); border-radius:14px; border:1px solid var(--border); background:var(--surface); color:var(--text); display:flex; align-items:center; justify-content:center; }
.cm-tip{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:min(290px,84vw); z-index:902; background:var(--sheet-bg); color:var(--text);
border:1px solid var(--gold-line); border-radius:18px; padding:16px 18px; box-shadow:var(--elev-2); }
.cm-title{ font-weight:800; margin-bottom:6px; font-size:var(--fs-15); display:flex; align-items:center; gap:6px; }
.cm-body{ font-size:var(--fs-13); color:var(--muted); line-height:1.85; margin-bottom:14px; }
.cm-actions{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.cm-skip{ color:var(--muted); font-size:var(--fs-13); padding:8px 4px; min-height:var(--tap); }
.cm-next{ background:var(--gold); color:var(--on-gold); border-radius:12px; min-height:var(--tap); padding:0 18px; font-weight:800; font-size:var(--fs-14); }
/* ---- منوی پایین: ۵ تب ---- */
.tabbar{ position:fixed; left:0; right:0; bottom:0; max-width:520px; margin:0 auto; z-index:20; }
.tabbar:has(.tabbtn), .tabbar.has-tabs{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:4px; padding:10px 12px calc(12px + var(--safe-bottom));
background:var(--nav-bg); border-top:1px solid var(--border); border-radius:26px 26px 0 0; box-shadow:var(--elev-2); }
.tabbtn{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:56px; border-radius:18px;
color:var(--muted); font-size:var(--fs-12); font-weight:700; transition:background .18s, color .18s; min-width:0; }
.tabbtn span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.tabbtn svg{ width:22px; height:22px; }
.tabbtn.active{ background:var(--gold); color:var(--on-gold); font-weight:800; }
.tabbtn .badge-dot{ position:absolute; top:8px; left:calc(50% - 17px); }
.tabbtn.active .badge-dot{ background:var(--on-gold); box-shadow:none; }
/* ---- «بیشتر» ---- */
.more-list{ padding:0; overflow:hidden; }
.more-row{ display:flex; align-items:center; gap:14px; min-height:68px; padding:12px 16px; border-bottom:1px solid var(--divider); cursor:pointer; color:var(--text); width:100%; text-align:start; }
.more-row:last-child{ border-bottom:none; }
.more-row .mr-ic{ width:42px; height:42px; border-radius:14px; background:var(--surface-2); color:var(--muted); display:flex; align-items:center; justify-content:center; flex:none; position:relative; }
.more-row .mr-ic .pi{ width:22px; height:22px; }
.more-row .mr-ic .badge-dot{ position:absolute; top:-2px; left:-2px; box-shadow:0 0 0 2px var(--surface); }
.more-row .mr-body{ flex:1; min-width:0; }
.more-row .mr-title{ font-size:var(--fs-15); font-weight:700; }
.more-row .mr-sub{ font-size:var(--fs-12); color:var(--muted); }
.more-row .mr-val{ font-size:var(--fs-15); font-weight:900; color:var(--text); }
/* ---- سلامت پلاس ---- */
.plus-head{ display:flex; align-items:center; gap:10px; margin:6px 0 14px; }
.plus-head h2, .plus-head .plus-title{ font-size:var(--fs-19); font-weight:800; margin:0; flex:1; min-width:0; }
.plus-back{ width:var(--tap); height:var(--tap); flex:none; border-radius:14px; border:1px solid var(--border); background:var(--surface); color:var(--text); display:flex; align-items:center; justify-content:center; }
.plus-back svg{ width:20px; height:20px; }
.plus-program-card{ cursor:pointer; border:1px solid var(--gold-line); }
.plus-cta{ color:var(--text); font-weight:800; margin-top:8px; font-size:var(--fs-14); }
.plus-value{ border:1px dashed var(--ctrl-border); line-height:2; }
.plus-actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.plus-actions .btn{ min-width:140px; font-size:var(--fs-14); }
.plus-coach-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--divider); cursor:pointer; min-height:60px; }
.plus-coach-row:last-of-type{ border-bottom:none; }
.plus-avatar{ width:44px; height:44px; border-radius:14px; background:var(--surface-2); color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:var(--fs-19); font-weight:800; overflow:hidden; flex:none; }
.plus-avatar img{ width:100%; height:100%; object-fit:cover; }
.plus-avatar.lg{ width:78px; height:78px; border-radius:24px; font-size:var(--fs-36); margin:0 auto; }
.plus-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px 0; border-bottom:1px solid var(--divider); cursor:pointer; min-height:var(--tap); }
.plus-row:last-child{ border-bottom:none; }
.plus-advice{ padding:12px 0; border-bottom:1px solid var(--divider); }
.plus-advice:last-child{ border-bottom:none; }
.plus-advice-body{ white-space:pre-wrap; line-height:1.9; margin-top:4px; }
.plus-notifs{ border:1px solid var(--gold-line); }
.plus-notif{ padding:4px 0; font-weight:700; display:flex; align-items:center; gap:6px; }
.plus-code-input{ direction:ltr; text-align:center; letter-spacing:6px; font-size:var(--fs-22); font-weight:900; text-transform:uppercase; }
.plus-consent-grid{ display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:560px){ .plus-consent-grid{ grid-template-columns:1fr 1fr; } }
.plus-consent-col{ border-radius:14px; padding:12px 14px; line-height:1.9; font-size:var(--fs-14); }
.plus-consent-col div:not(.plus-consent-h)::before{ content:"• "; }
.plus-consent-col.yes{ background:var(--ok-soft); }
.plus-consent-col.no{ background:var(--danger-soft); }
.plus-consent-h{ font-weight:800; margin-bottom:4px; }
.plus-stats{ display:flex; justify-content:space-around; margin:14px 0 8px; }
.plus-stats div{ display:flex; flex-direction:column; align-items:center; }
.plus-stats b{ font-size:var(--fs-28); font-weight:900; color:var(--text); line-height:1.2; }
.plus-stats span{ font-size:var(--fs-12); color:var(--muted); }
.plus-cred, .plus-item{ padding:12px 0; border-bottom:1px solid var(--divider); }
.plus-cred:last-child, .plus-item:last-child{ border-bottom:none; }
.plus-ex{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; padding:12px 0; border-bottom:1px solid var(--divider); }
.plus-ex:last-of-type{ border-bottom:none; }
.plus-ex-main{ flex:1 1 180px; min-width:0; }
.plus-ex-tags{ display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start; }
.plus-path summary{ cursor:pointer; padding:4px 0; min-height:var(--tap); }
.plus-path ol{ margin:8px 22px 4px 0; line-height:2.1; }
.plus-coach-entry{ text-align:center; }
.plus-entry-chip{ display:inline-flex; align-items:center; gap:8px; }
/* ---- تمرین امروز (طبق طرح) ---- */
.pw-head{ display:flex; align-items:center; gap:12px; margin:4px 0 16px; }
.pw-head .pw-titles{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pw-head h2{ margin:0; font-size:var(--fs-19); font-weight:800; line-height:1.5; }
.pw-head .pw-meta{ font-size:var(--fs-13); color:var(--muted); }
.pw-progress{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.pw-progress .pp-top{ display:flex; justify-content:space-between; font-size:var(--fs-13); color:var(--muted); }
.pw-progress .pp-top b{ color:var(--text); font-weight:800; }
.pw-top{ display:flex; justify-content:space-between; align-items:center; padding:0 2px 10px; }
.pw-day{ cursor:pointer; }
.pw-day.suggested{ border-color:var(--gold-line); }
.pw-item{ display:flex; flex-direction:column; gap:12px; padding:16px; }
.pw-item.skipped{ opacity:.6; }
.pw-item.ss-first{ border-color:var(--gold-line); border-radius:22px 22px 8px 8px; margin-bottom:4px; }
.pw-item.ss-second{ border-color:var(--gold-line); border-radius:8px 8px 22px 22px; }
.pw-ss{ border-color:var(--gold-line) !important; }
.pw-ss-label{ display:flex; align-items:center; gap:8px; font-size:var(--fs-13); font-weight:800; color:var(--text); }
.pw-ss-label .pi{ color:var(--gold); }
.pw-item-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.pw-item-head h3{ margin:0; font-size:var(--fs-16); font-weight:800; line-height:1.5; }
.pw-item-head .pw-sub{ font-size:var(--fs-13); color:var(--muted); line-height:1.8; }
.pw-tag{ flex:none; padding:3px 10px; border-radius:999px; background:var(--surface-3); color:var(--text); font-size:var(--fs-12); font-weight:800; }
.pw-sets{ display:flex; flex-direction:column; gap:8px; }
.pw-set{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:6px; border-radius:16px; border:1px solid transparent; min-width:0; }
.pw-set.done{ opacity:.72; }
/* نوار طلایی سمت شروع (راست در RTL): سایه‌ی inset با x منفی سمت راست می‌شینه */
.pw-set.active{ background:var(--surface-3); border-color:var(--gold-line); box-shadow:inset -3px 0 0 var(--gold); }
[dir="ltr"] .pw-set.active{ box-shadow:inset 3px 0 0 var(--gold); }
.pw-set .pw-vals{ display:flex; align-items:center; gap:14px; flex:1; min-width:0; font-size:var(--fs-14); font-weight:700; }
.pw-set .pw-vals .muted{ color:var(--muted); font-weight:600; }
.pw-set .pw-ctrls{ display:flex; align-items:center; gap:8px; flex:1 1 220px; min-width:0; flex-wrap:wrap; }
.pw-check{ width:var(--tap); height:var(--tap); flex:none; border-radius:50%; border:2px solid var(--ctrl-border); color:var(--muted); font-weight:900; font-size:var(--fs-15);
background:transparent; display:flex; align-items:center; justify-content:center; }
.pw-set.active .pw-check{ border-color:var(--gold); color:var(--text); }
.pw-set.done .pw-check{ background:var(--gold); border-color:var(--gold); color:var(--on-gold); }
.pw-check .pi{ width:20px; height:20px; stroke-width:3; }
.pw-step{ display:flex; align-items:center; gap:2px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:2px; flex:1 1 140px; min-width:0; max-width:220px; }
.pw-step span{ flex:1; min-width:48px; text-align:center; font-weight:800; font-size:var(--fs-14); white-space:nowrap; }
.pw-step button{ width:var(--tap); height:var(--tap); flex:none; border-radius:12px; background:var(--surface-2); color:var(--text); display:flex; align-items:center; justify-content:center; }
.pw-step button .pi{ width:18px; height:18px; stroke-width:2.4; }
.pw-item-actions{ display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-start; align-items:center; }
.pw-prev{ font-size:var(--fs-13); color:var(--muted); flex:1; min-width:0; }
.pw-item-actions .link-btn{ text-decoration:none; color:var(--text); font-weight:700; font-size:var(--fs-13); min-height:40px; padding:8px 10px; }
.pw-live{ position:sticky; top:calc(8px + var(--safe-top)); z-index:5; display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--surface-2);
border:1px solid var(--gold-line); border-radius:20px; padding:12px 14px; margin-bottom:14px; box-shadow:var(--elev-2); }
.pw-live .pl-ring{ position:relative; width:56px; height:56px; flex:none; }
.pw-live .pl-ring svg{ display:block; }
.pw-live .pl-ring b{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:var(--fs-14); font-weight:900; }
.pw-live .pl-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pw-live .pl-title{ font-size:var(--fs-15); font-weight:800; }
.pw-live .pl-sub{ font-size:var(--fs-13); color:var(--muted); }
.pw-live .btn{ flex:none; min-height:40px; padding:0 14px; font-size:var(--fs-13); }
.pw-rest-bar{ flex:1 1 100%; height:6px; border-radius:6px; background:var(--track); overflow:hidden; }
.pw-rest-bar i{ display:block; height:100%; background:var(--gold); transition:width .4s linear; }
.pw-pref{ display:flex; align-items:center; gap:10px; min-height:var(--tap); font-size:var(--fs-14); }
.pw-pref input{ width:22px; height:22px; accent-color:var(--gold); flex:none; }
.pw-prs{ margin-top:10px; padding:12px; border-radius:14px; background:var(--gold-soft); font-weight:800; display:flex; align-items:center; gap:8px; justify-content:center; }
.pw-km{ width:104px; min-height:var(--tap); text-align:center; direction:ltr; padding:6px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text); }
.pw-finish{ display:flex; flex-direction:column; gap:10px; }
.pw-finish label{ font-size:var(--fs-13); font-weight:700; color:var(--muted); }
.pw-finish .btn-primary{ min-height:56px; font-size:var(--fs-16); font-weight:900; border-radius:18px; }
/* ==========================================================================
دسکتاپ (۹۰۰+): همون اپ، منوی شناور وسط پایین و چیدمان پازلی
========================================================================== */
@media (min-width: 900px){
body{ display:flex; justify-content:center; }
.app{ max-width:680px; padding-top:32px; padding-bottom:116px; }
.screen{ padding:4px 8px 24px; }
.topbar{ padding:0 8px 14px; }
.tabbar{ left:50%; right:auto; bottom:22px; transform:translateX(-50%); max-width:none; width:auto; margin:0; }
.tabbar:has(.tabbtn), .tabbar.has-tabs{ display:flex; gap:4px; padding:8px; border-radius:24px; border:1px solid var(--border); }
.tabbtn{ flex-direction:row; gap:8px; padding:0 18px; min-height:48px; font-size:var(--fs-13); }
.tabbtn:hover{ background:var(--surface-2); color:var(--text); }
.tabbtn.active:hover{ background:var(--gold); color:var(--on-gold); }
.tabbtn svg{ width:19px; height:19px; }
.tabbtn .badge-dot{ top:8px; left:10px; }
.overlay{ align-items:center; }
.sheet{ max-width:500px; border-radius:26px; border-bottom:1px solid var(--border); animation:sheet-pop .2s ease; }
.sheet::before{ display:none; }
@keyframes sheet-pop{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; } }
body:has(.onboard-wrap) .app{ max-width:none; padding:0; }
.onboard-wrap{ max-width:420px; margin:0 auto; padding:48px 28px; }
.peleh-toast, .bottom-toast{ bottom:96px; }
body:has(.today-grid) .app{ max-width:1200px; }
.today-grid{ display:grid; grid-template-columns:1fr 1.3fr 1fr; grid-template-areas:"profile hero tip" "notes hero tip" "notes activities tasks"; gap:14px; padding:10px 0 20px; align-items:start; }
.today-grid .tile{ display:flex; flex-direction:column; gap:12px; }
.today-grid .tile-profile{ grid-area:profile; } .today-grid .tile-hero{ grid-area:hero; } .today-grid .tile-tip{ grid-area:tip; }
.today-grid .tile-notes{ grid-area:notes; } .today-grid .tile-activities{ grid-area:activities; } .today-grid .tile-tasks{ grid-area:tasks; }
.today-grid .section-title, .today-grid .section-row{ margin:0 0 4px; }
.today-grid .card, .today-grid .hero-card, .today-grid .stat-pair, .today-grid .stairs-card, .today-grid .quote-card, .today-grid .workout-card{ margin-bottom:0; }
body:has(.books-grid) .app, body:has(.calendar-grid) .app, body:has(.weekly-grid) .app, body:has(.rewards-grid) .app{ max-width:1200px; }
.books-grid, .calendar-grid, .weekly-grid, .rewards-grid{ display:grid; gap:14px; padding:10px 0 20px; align-items:start; }
.books-grid .tile, .calendar-grid .tile, .weekly-grid .tile, .rewards-grid .tile{ display:flex; flex-direction:column; gap:12px; }
.books-grid .section-title, .calendar-grid .section-title, .weekly-grid .section-title, .rewards-grid .section-title{ margin:0 0 4px; }
.books-grid .card, .calendar-grid .card, .weekly-grid .card, .rewards-grid .card, .rewards-grid .reward-hero{ margin-bottom:0; }
.books-grid{ grid-template-columns:1fr 1.2fr; grid-template-areas:"coach current" "level current" "recs recs"; }
.books-grid .tile-coach{ grid-area:coach; } .books-grid .tile-level{ grid-area:level; } .books-grid .tile-current{ grid-area:current; } .books-grid .tile-recs{ grid-area:recs; }
.calendar-grid{ grid-template-columns:1fr 1.3fr 1fr; grid-template-areas:"recap cal chart" "heatmap cal stats" "heatmap cal events"; }
.calendar-grid .tile-recap{ grid-area:recap; } .calendar-grid .tile-heatmap{ grid-area:heatmap; } .calendar-grid .tile-cal{ grid-area:cal; }
.calendar-grid .tile-chart{ grid-area:chart; } .calendar-grid .tile-stats{ grid-area:stats; } .calendar-grid .tile-events{ grid-area:events; }
.weekly-grid{ grid-template-columns:1fr 1.2fr; grid-template-areas:"overview review" "goal review"; }
.weekly-grid .tile-overview{ grid-area:overview; } .weekly-grid .tile-goal{ grid-area:goal; } .weekly-grid .tile-review{ grid-area:review; }
.rewards-grid{ grid-template-columns:1fr 1.3fr; grid-template-areas:"summary list"; }
.rewards-grid .tile-summary{ grid-area:summary; } .rewards-grid .tile-list{ grid-area:list; }
.tile-draggable{ cursor:grab; } .tile-draggable:active{ cursor:grabbing; } .tile-dragging{ opacity:.4; }
.tile-drop-target{ outline:2px dashed var(--gold); outline-offset:-2px; border-radius:16px; background:var(--gold-faint); }
.card:hover, .stat-tile:hover{ border-color:var(--ctrl-border); }
.fab:hover, .btn:hover, .theme-opt:hover, .more-row:hover{ filter:brightness(1.06); }
}
@media (min-width: 900px) and (max-width: 1199px){
.books-grid, .calendar-grid, .weekly-grid, .rewards-grid{ display:grid; grid-template-columns:1fr 1fr; grid-template-areas:none; gap:14px; padding:10px 0 20px; align-items:start; }
.books-grid .tile, .calendar-grid .tile, .weekly-grid .tile, .rewards-grid .tile{ grid-area:auto; }
.today-grid{ grid-template-columns:1fr 1fr; grid-template-areas:"profile hero" "tip hero" "notes activities" "tasks tasks"; }
}
/* گوشی‌های خیلی باریک */
@media (max-width: 360px){
.screen{ padding-left:14px; padding-right:14px; }
.stat-tile .st-num{ font-size:var(--fs-28); }
.ring-wrap svg{ width:108px; height:108px; }
}
/* =====================================================================================
طراحی نهایی «عادت‌های زنده» — v2.4.0
===================================================================================== */
.stairs-head span.up{ color:var(--ok); font-weight:700; }
.habit-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
@media (min-width: 900px){ .habit-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.ht.act-row{ display:flex; flex-direction:column; align-items:stretch; gap:8px; min-height:0; padding:12px; border:1px solid var(--border);
border-radius:22px; background:var(--surface); box-shadow:var(--elev-1); cursor:pointer; transition:border-color .15s, transform .12s; }
.ht.act-row:active{ transform:scale(.985); }
.ht.act-row.done{ border-color:var(--gold-line); }
.ht.act-row:last-of-type{ border-bottom:1px solid var(--border); }
.ht.act-row.done .act-title{ text-decoration:none; color:var(--text); }
.ht .ht-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.ht .ic{ width:40px; height:40px; flex:none; border-radius:13px; background:var(--gold-soft); color:var(--gold); display:flex; align-items:center; justify-content:center; }
.ht .ic .pi{ width:22px; height:22px; }
.ht-name{ font-size:var(--fs-15); font-weight:800; line-height:1.5; overflow-wrap:anywhere; }
.ht .meta, .mini-sum .meta{ font-size:var(--fs-12); color:var(--muted); }
.chk{ width:44px; height:44px; flex:none; border-radius:22px; border:2px solid var(--ctrl-border); background:transparent; display:flex; align-items:center;
justify-content:center; cursor:pointer; color:transparent; padding:0; }
.chk svg, .chk .pi{ width:22px; height:22px; }
.chk.on{ background:var(--gold); border-color:var(--gold); color:var(--on-gold); }
.chk:focus-visible, .ib:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.hdots{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; }
.hdots span{ height:10px; border-radius:5px; background:var(--track); }
.hdots span.d{ background:var(--gold); }
.hdots span.t{ background:transparent; outline:1.5px solid var(--gold); outline-offset:-1.5px; }
.hdots span.off{ background:transparent; outline:1px dashed var(--ctrl-border); outline-offset:-1px; }
.ht-foot{ display:flex; align-items:center; justify-content:space-between; min-height:32px; }
.ht-streak{ font-size:var(--fs-12); font-weight:800; color:var(--flame); display:inline-flex; align-items:center; gap:3px; }
.ib{ width:44px; height:44px; flex:none; border:0; border-radius:12px; background:transparent; color:var(--muted); display:flex; align-items:center;
justify-content:center; cursor:pointer; margin:-8px -10px -10px 0; }
.ib .pi{ width:20px; height:20px; }
.habit-add{ grid-column:1 / -1; min-height:52px; border-radius:18px; border:1.5px dashed var(--ctrl-border); background:transparent; color:var(--text);
font-size:var(--fs-15); font-weight:700; cursor:pointer; margin:0 !important; width:100% !important; }
/* فعالیت چرخشی: کارت افقی */
.ht.ht-row{ flex-direction:row; align-items:center; gap:12px; margin-bottom:10px; }
.card.list-card > .ht.ht-row{ margin:10px; }
.ht-mid{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.ht-line{ display:flex; justify-content:space-between; gap:8px; }
/* تمرین و کتاب امروز */
.sum-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-top:14px; }
.sum-grid.one{ grid-template-columns:1fr; }
.mini-sum{ padding:14px; display:flex; flex-direction:column; gap:6px; text-align:right; color:var(--text); cursor:pointer; border:1px solid var(--border);
border-radius:20px; background:var(--surface); box-shadow:var(--elev-1); font-family:inherit; min-width:0; }
.mini-sum b{ font-size:var(--fs-16, 16px); font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini-top{ display:flex; justify-content:space-between; align-items:center; gap:6px; }
.chip-gold{ display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border-radius:9px; font-size:11px; font-weight:800; color:var(--gold); background:var(--gold-soft); }
.mini-bars{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:3px; align-items:end; height:30px; }
.mini-bars i{ display:block; background:var(--gold); border-radius:3px; }
.mini-sum.workout-card{ display:flex; flex-direction:column; align-items:stretch; }
.mini-sum .wc-go{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; border-radius:12px; background:var(--gold);
color:var(--on-gold); font-weight:800; font-size:var(--fs-13, 13px); margin-top:4px; }
.mini-sum .wc-go .pi{ width:18px; height:18px; }
/* روند حال */
.mood-week{ display:inline-flex; align-items:flex-end; gap:3px; height:20px; vertical-align:middle; margin-inline-start:4px; }
.mood-week i{ width:6px; height:4px; border-radius:3px; background:var(--track); display:block; }
.mood-week i.on{ background:var(--gold); }
/* تب‌های سلامت: شبکه‌ی ۳ستونه (طراحی نهایی) */
.htabs{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; margin-bottom:14px; }
.hchip{ min-height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; gap:6px; color:var(--text); font-size:var(--fs-14, 14px);
font-weight:600; background:var(--surface); border:1px solid var(--border); cursor:pointer; font-family:inherit; padding:0 6px; position:relative; }
.hchip .pi{ width:18px; height:18px; flex:none; }
.hchip.on{ background:var(--gold); border-color:var(--gold); color:var(--on-gold); font-weight:800; }
.hchip .badge-dot{ position:static; }
.h-sec{ margin-top:6px; scroll-margin-top:16px; }
@media (min-width: 900px){ .htabs{ grid-template-columns:repeat(6, minmax(0, 1fr)); } .htabs.five{ grid-template-columns:repeat(5, minmax(0, 1fr)); } }
/* سلامت › ورزش (سه حالت) */
.hs-hero{ display:flex; flex-direction:column; gap:12px; padding:18px; margin-bottom:12px; }
.hs-title{ font-size:var(--fs-20, 20px); font-weight:900; }
.hs-coach{ display:flex; align-items:center; gap:12px; }
.hs-av{ width:48px; height:48px; flex:none; border-radius:24px; background:var(--gold-soft); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:900; }
.hs-cname{ font-weight:800; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.hs-btns{ display:flex; gap:10px; }
.hs-btns .btn-primary{ flex:1; min-height:50px; }
.hs-btns .btn-ghost{ flex:none; min-height:50px; padding:0 16px; }
.hs-it{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:16px; background:var(--surface-2); }
.hs-it .ic{ width:40px; height:40px; flex:none; border-radius:13px; background:var(--gold-soft); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:20px; }
.hs-it .grow, .hs-opt .grow, .hs-coachlink .grow{ flex:1; min-width:0; display:flex; flex-direction:column; text-align:right; }
.hs-done{ display:flex; align-items:center; gap:6px; font-weight:800; color:var(--ok); }
.hs-opt{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:16px; border:1px solid var(--border); background:var(--surface-2); color:var(--text);
cursor:pointer; font-family:inherit; min-height:60px; }
.hs-opt > .pi:first-child{ width:24px; height:24px; color:var(--gold); }
.hs-note{ display:block; font-size:var(--fs-14); line-height:1.9; border-color:var(--gold-line); margin-bottom:12px; }
.badge-soft{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:800; border-radius:10px; padding:3px 9px; color:var(--gold); background:var(--gold-soft); }
.badge-soft.ok{ color:var(--ok); background:var(--ok-soft); }
.badge-soft .pi{ width:14px; height:14px; }
.hs-week{ display:flex; flex-direction:column; gap:12px; margin-bottom:6px; }
.wk{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px; text-align:center; }
.wk > div{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; color:var(--muted); font-weight:600; }
.wk b{ color:var(--text); }
.wk i{ width:34px; height:34px; border-radius:11px; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--on-gold); }
.wk i .pi{ width:16px; height:16px; }
.wk i.d{ background:var(--gold); border-color:var(--gold); }
.wk i.p{ border:1.5px dashed var(--gold); }
.wk i.r{ background:transparent; border-style:dashed; border-color:var(--ctrl-border); }
.et-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.et{ background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:14px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--elev-1); min-width:0; }
.et .badge-soft{ align-self:flex-start; }
.et-name{ font-size:var(--fs-15); font-weight:800; }
.hs-stairs{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.hs-stairs .up{ font-size:12px; font-weight:700; color:var(--ok); }
.stairs4{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; align-items:end; height:80px; }
.stairs4 .stair{ position:relative; border-radius:9px 9px 4px 4px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden; }
.stairs4 .stair i{ position:absolute; left:0; right:0; bottom:0; background:var(--gold); }
.stairs4 .stair.today{ outline:2px solid var(--gold); outline-offset:2px; }
.stairs4-l{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); text-align:center; font-size:12px; color:var(--muted); }
.stairs4-l .cur{ color:var(--text); font-weight:800; }
.hs-coachlink{ margin-top:14px; display:flex; align-items:center; gap:12px; padding:14px; width:100%; color:var(--text); cursor:pointer; font-family:inherit; }
.hs-coachlink .ic{ width:40px; height:40px; flex:none; border-radius:13px; background:var(--surface-2); color:var(--muted); display:flex; align-items:center; justify-content:center; }
/* ورود یک‌قدمی و شروع سریع (طراحی نهایی) */
.auth-wrap{ display:flex; flex-direction:column; gap:14px; }
.auth-brand{ display:flex; flex-direction:column; align-items:center; gap:6px; margin:18px 0 6px; }
.auth-stairs{ display:grid; grid-template-columns:repeat(7, 22px); gap:6px; align-items:end; height:64px; margin-top:10px; }
.auth-stairs span{ position:relative; border-radius:7px 7px 3px 3px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden; }
.auth-stairs span:last-child{ outline:2px solid var(--gold); outline-offset:2px; }
.auth-stairs i{ position:absolute; inset:0; background:var(--gold); }
.auth-card{ padding:18px; display:flex; flex-direction:column; gap:6px; }
.auth-or{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:var(--fs-12); margin:10px 0 0; }
.auth-or span{ flex:1; height:1px; background:var(--divider); }
.auth-gift{ display:flex; align-items:center; gap:12px; padding:14px; }
.auth-gift .ic{ width:40px; height:40px; flex:none; border-radius:13px; background:var(--gold-soft); color:var(--gold); display:flex; align-items:center; justify-content:center; }
.auth-sub{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.auth-sub h1{ margin:0; font-size:var(--fs-20, 20px); font-weight:900; }
.ib.box{ margin:0; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:14px; }
.auth-otp-hero{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:18px; }
.auth-otp-hero .ic{ width:48px; height:48px; border-radius:16px; background:var(--gold-soft); color:var(--gold); display:flex; align-items:center; justify-content:center; }
.auth-next .act-title b{ margin-inline-end:4px; }
.qs-head{ display:flex; align-items:center; justify-content:space-between; margin:10px 0 12px; }
.qs-head .brand{ font-size:calc(22px * var(--font-scale)); }
.qs-hello{ margin:0 0 12px; font-size:var(--fs-26, 26px); font-weight:900; }
.auth-next .act-title{ font-weight:500; } .auth-next .act-title b{ font-weight:800; }
.pw-setprev{ flex-basis:100%; font-size:var(--fs-12); color:var(--muted); padding-inline-start:52px; margin-top:-2px; }
.pw-setprev b{ font-weight:800; color:var(--muted); }
.pw-setprev b.up{ color:var(--ok); }
.pw-set{ flex-wrap:wrap; }
.book-forecast{ color:var(--gold); font-weight:700; display:flex; align-items:center; gap:4px; margin-top:4px; }
.lb-trend{ padding:12px 14px; margin-bottom:12px; display:flex; flex-direction:column; gap:8px; }
.lb-trend .up{ color:var(--ok); font-weight:700; font-size:var(--fs-12); }
.lb-trend-bars{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; align-items:end; height:40px; }
.lb-trend-bars i{ display:block; border-radius:4px 4px 2px 2px; background:var(--gold-soft); }
.lb-trend-bars i.now{ background:var(--gold); }