/* فونت از خود سایت بارگذاری می‌شود (بدون CDN؛ برای اینترنت ایران) */
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Vazirmatn-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Vazirmatn-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Vazirmatn-Bold.woff2') format('woff2'); }

:root {
  --font: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
  --gold: #c9a45c;
  --warn: #c98a3d;
  --ok: #5e9c7a;
  --bad: #c0506a;
  color-scheme: light;
  --bg: #f6f3fa; --bg2: #efe9f7; --surface: rgba(255,255,255,.78); --solid: #fff; --ink: #2b2236; --muted: #85799a;
  --line: rgba(80,60,110,.13); --shadow: 0 14px 34px -16px rgba(70,45,110,.32);
  --accent: #8d6bc9; --accent2: #c58bb8; --tint: #efe7fa; --on: #fff;
}
[data-palette="sage"]  { --bg:#f5f2ea; --bg2:#ebe7da; --ink:#2f3329; --muted:#80796a; --line:rgba(70,80,50,.15); --accent:#6f8460; --accent2:#b8a35f; --tint:#e7edde; --shadow:0 14px 34px -16px rgba(60,70,40,.30); }
[data-palette="navy"]  { --bg:#eef2f6; --bg2:#e1e9f0; --ink:#1f2f3d; --muted:#667a8a; --line:rgba(40,70,100,.15); --accent:#2f5d7a; --accent2:#3f8f8a; --tint:#dde9f1; --shadow:0 14px 34px -16px rgba(30,60,90,.32); }
[data-palette="rose"]  { --bg:#fbf3f1; --bg2:#f6e6e3; --ink:#3a2a2c; --muted:#94767a; --line:rgba(120,70,70,.14); --accent:#b76e79; --accent2:#d4a373; --tint:#f8e4e4; --shadow:0 14px 34px -16px rgba(120,60,70,.28); }

[data-palette="teal"]  { --bg:#eef6f5; --bg2:#dff0ee; --ink:#1d3331; --muted:#668682; --line:rgba(30,90,85,.15); --accent:#2a8c86; --accent2:#5bb59a; --tint:#dcf0ed; --shadow:0 14px 34px -16px rgba(20,80,75,.30); }
[data-palette="coral"] { --bg:#fdf1ec; --bg2:#f9e1d8; --ink:#3b2620; --muted:#9a7a6f; --line:rgba(140,70,50,.15); --accent:#e0694f; --accent2:#f0a35e; --tint:#fbe3da; --shadow:0 14px 34px -16px rgba(150,70,50,.28); }
[data-palette="honey"] { --bg:#fbf6e8; --bg2:#f4ecd0; --ink:#33301f; --muted:#8c8566; --line:rgba(110,90,30,.16); --accent:#b8892a; --accent2:#d9b45a; --tint:#f5ecd0; --shadow:0 14px 34px -16px rgba(120,90,20,.26); }
[data-palette="gray"]  { --bg:#f2f3f5; --bg2:#e6e8eb; --ink:#26282c; --muted:#787d86; --line:rgba(40,45,55,.14); --accent:#5d6674; --accent2:#8f98a6; --tint:#e4e7ec; --shadow:0 14px 34px -16px rgba(30,35,45,.26); }

[data-mode="dark"] { color-scheme: dark; --bg:#0f0c15; --bg2:#171320; --surface:rgba(255,255,255,.06); --solid:#1c1727; --ink:#efeaf6; --muted:#a69cb5; --line:rgba(255,255,255,.11); --shadow:0 16px 36px -16px rgba(0,0,0,.75); --on:#14101b; --warn:#e0a85c; --ok:#7cc29c; --bad:#e27c93; }
[data-mode="dark"][data-palette="lavender"] { --accent:#b399f0; --accent2:#e7a9cf; --tint:rgba(179,153,240,.16); }
[data-mode="dark"][data-palette="sage"]     { --bg:#0e110c; --bg2:#151a12; --solid:#192015; --accent:#a3bd8e; --accent2:#d8c47f; --tint:rgba(163,189,142,.16); }
[data-mode="dark"][data-palette="navy"]     { --bg:#0a1018; --bg2:#101a26; --solid:#131f2d; --accent:#6aa7cc; --accent2:#5fc2b8; --tint:rgba(106,167,204,.16); }
[data-mode="dark"][data-palette="rose"]     { --bg:#140d0e; --bg2:#1d1214; --solid:#241719; --accent:#e5959f; --accent2:#e6bb8b; --tint:rgba(229,149,159,.16); }
[data-mode="dark"][data-palette="teal"]  { --bg:#091312; --bg2:#0f1d1c; --solid:#132624; --accent:#5fc4bb; --accent2:#8ad6a8; --tint:rgba(95,196,187,.16); }
[data-mode="dark"][data-palette="coral"] { --bg:#150e0b; --bg2:#1e1411; --solid:#261a16; --accent:#f08a72; --accent2:#f2b676; --tint:rgba(240,138,114,.16); }
[data-mode="dark"][data-palette="honey"] { --bg:#131008; --bg2:#1c170c; --solid:#241e10; --accent:#dcb55a; --accent2:#e8d08a; --tint:rgba(220,181,90,.16); }
[data-mode="dark"][data-palette="gray"]  { --bg:#0e0f11; --bg2:#16181b; --solid:#1b1d21; --accent:#a7b0bf; --accent2:#c9d0dc; --tint:rgba(167,176,191,.14); }

/* حالت «خاکستری»: تیره ولی نرم‌تر از شب (مناسب چشم و روشنایی کم) */
[data-mode="slate"] { color-scheme: dark; --bg:#222428; --bg2:#2a2d32; --surface:rgba(255,255,255,.06); --solid:#30343a; --ink:#eceef1; --muted:#a6abb4; --line:rgba(255,255,255,.12); --shadow:0 14px 30px -16px rgba(0,0,0,.5); --on:#17191c; --warn:#e0a85c; --ok:#7cc29c; --bad:#e27c93; }
[data-mode="slate"][data-palette="lavender"] { --accent:#b8a0ee; --accent2:#e3aed0; --tint:rgba(184,160,238,.17); }
[data-mode="slate"][data-palette="sage"]     { --accent:#a9c294; --accent2:#d8c882; --tint:rgba(169,194,148,.17); }
[data-mode="slate"][data-palette="navy"]     { --accent:#78afd2; --accent2:#68c6bc; --tint:rgba(120,175,210,.17); }
[data-mode="slate"][data-palette="rose"]     { --accent:#e89ba5; --accent2:#e8c08f; --tint:rgba(232,155,165,.17); }
[data-mode="slate"][data-palette="teal"]     { --accent:#63c8bf; --accent2:#8fd9ab; --tint:rgba(99,200,191,.17); }
[data-mode="slate"][data-palette="coral"]    { --accent:#f28f78; --accent2:#f3b97c; --tint:rgba(242,143,120,.17); }
[data-mode="slate"][data-palette="honey"]    { --accent:#dfb95f; --accent2:#ead48f; --tint:rgba(223,185,95,.17); }
[data-mode="slate"][data-palette="gray"]     { --accent:#b0b9c7; --accent2:#cfd5e0; --tint:rgba(176,185,199,.15); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); line-height: 1.7; font-size: 15px;
  background:
    radial-gradient(900px 520px at 88% -8%, var(--tint), transparent 62%),
    radial-gradient(760px 480px at -8% 108%, var(--tint), transparent 58%),
    var(--bg);
  background-attachment: fixed; min-height: 100vh;
}
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.4; }
h1 { font-size: 26px; font-weight: 800; letter-spacing: -.2px; }
h2 { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
p { margin: 6px 0; }
small { font-size: 12px; }
.muted { color: var(--muted); font-size: 13px; }
.eyebrow { font-size: 12px; letter-spacing: .4px; color: var(--gold); font-weight: 700; }
.hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--tint); }

/* layout */
.app { display: flex; min-height: 100vh; }
.side { display: none; position: sticky; top: 0; height: 100vh; width: 252px; flex: none; padding: 22px 14px; flex-direction: column; gap: 4px;
  background: var(--surface); backdrop-filter: blur(18px); border-inline-end: 1px solid var(--line); overflow-y: auto; }
.main { flex: 1; min-width: 0; padding: 16px 16px 120px; }
.wrap { max-width: 980px; margin: 0 auto; }
@media (min-width: 900px) { .side { display: flex; } .bottom, .more { display: none !important; } .main { padding: 26px 42px 48px; } }

.brand { display: flex; align-items: center; gap: 12px; padding: 4px 10px 18px; }
.orb { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: var(--on);
  background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 10px 22px -10px var(--accent), inset 0 0 0 1px rgba(255,255,255,.35); }
.orb svg { width: 22px; height: 22px; }
.brand b { display: block; font-size: 19px; letter-spacing: 1.5px; }
.brand span { font-size: 11px; color: var(--muted); }
.navb { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; padding: 10px 12px; border-radius: 14px; cursor: pointer; color: var(--muted); text-align: start; position: relative; transition: background .15s, color .15s; }
.navb svg, .bottom svg, .more svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.navb:hover { background: var(--tint); color: var(--ink); }
.navb.on { background: var(--tint); color: var(--accent); font-weight: 700; }
.navb.on::before { content: ''; position: absolute; inset-inline-start: -14px; top: 22%; bottom: 22%; width: 4px; border-radius: 4px; background: linear-gradient(var(--accent), var(--accent2)); }
.navb .badge { margin-inline-start: auto; background: var(--accent); color: var(--on); border-radius: 99px; font-size: 11px; padding: 0 7px; min-width: 20px; text-align: center; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.topbar .brand { padding: 0; }
.topbar .brand b { font-size: 16px; }
.tools { display: flex; gap: 8px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 10px; border-radius: 99px; background: var(--tint); color: var(--accent); }
.pill.warn { background: rgba(201,138,61,.16); color: var(--warn); }
.pill.gold { background: rgba(201,164,92,.16); color: var(--gold); }
.pill.ok { background: rgba(94,156,122,.16); color: var(--ok); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; }
.dot.off { background: var(--warn); }

.bottom { position: fixed; inset-inline: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 30; display: flex; justify-content: space-around; gap: 2px; padding: 8px 6px;
  background: var(--solid); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); }
.bottom button { flex: 1; min-width: 0; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; color: var(--muted); padding: 6px 2px; border-radius: 16px; cursor: pointer; position: relative; }
.bottom button.on { color: var(--accent); background: var(--tint); font-weight: 700; }
.bottom .badge { position: absolute; top: 0; inset-inline-end: 14%; background: var(--accent2); color: var(--on); border-radius: 99px; font-size: 10px; padding: 0 5px; }
.more { position: fixed; inset-inline: 12px; bottom: 86px; z-index: 31; display: none; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; background: var(--solid); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.more.show { display: grid; animation: rise .18s ease; }
.more button { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: var(--tint); color: var(--ink); border-radius: 16px; padding: 12px 4px; font-size: 12px; cursor: pointer; }

/* surfaces */
.card { background: var(--surface); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 22px; padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow); }
.hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--tint), var(--surface) 70%); }
.hero::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .8; }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid2 > .card { margin-bottom: 0; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 12px; text-align: center; }
.stat b { display: block; font-size: 22px; color: var(--accent); }
.stat span { font-size: 12px; color: var(--muted); }
@media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } .grid2 > .card { margin-bottom: 0; } h1 { font-size: 22px; } }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.stack > * + * { margin-top: 10px; }
.form { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.form > * { flex: 1; min-width: 110px; }
.lbl { display: block; font-size: 12px; color: var(--muted); margin: 8px 0 4px; }

.ring { --p: 0; width: 96px; height: 96px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--tint) 0); transition: background .4s; }
.ring > div { width: 76px; height: 76px; border-radius: 50%; background: var(--solid); display: grid; place-items: center; text-align: center; line-height: 1.2; }
.ring b { font-size: 24px; display: block; color: var(--accent); }
.ring small { color: var(--muted); font-size: 11px; }
.bar { height: 8px; background: var(--tint); border-radius: 9px; overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 9px; transition: width .4s; }

/* controls */
.btn { border: 1px solid var(--line); background: var(--solid); color: var(--ink); min-height: 42px; padding: 8px 16px; border-radius: 99px; cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn.primary { border: 0; font-weight: 700; color: var(--on); background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 10px 22px -10px var(--accent); }
.btn.soft { border: 0; background: var(--tint); color: var(--accent); }
.btn.sm { min-height: 34px; padding: 4px 12px; font-size: 13px; }
.btn.danger { color: var(--bad); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.field { width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--line); background: var(--solid); border-radius: 14px; padding: 9px 12px; }
textarea.field { min-height: 80px; resize: vertical; }
.field:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px var(--tint); }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button, .chip { flex: 1; min-width: 70px; border: 1px solid var(--line); background: var(--solid); border-radius: 14px; padding: 10px 8px; cursor: pointer; transition: all .15s; }
.seg button.on, .chip.on { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--on); border-color: transparent; font-weight: 700; box-shadow: 0 8px 18px -10px var(--accent); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.chips .chip { flex: none; min-width: 0; padding: 4px 12px; font-size: 13px; border-radius: 99px; }
.jd { display: flex; gap: 6px; }
.jd select { flex: 1; min-width: 0; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.sw { width: 44px; height: 44px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; box-shadow: 0 0 0 1px var(--line); }
.sw.on { border-color: var(--ink); }
.sw[data-v="lavender"] { background: linear-gradient(135deg, #8d6bc9, #c58bb8); }
.sw[data-v="sage"] { background: linear-gradient(135deg, #6f8460, #b8a35f); }
.sw[data-v="navy"] { background: linear-gradient(135deg, #2f5d7a, #3f8f8a); }
.sw[data-v="rose"] { background: linear-gradient(135deg, #b76e79, #d4a373); }
.sw[data-v="teal"] { background: linear-gradient(135deg, #2a8c86, #5bb59a); }
.sw[data-v="coral"] { background: linear-gradient(135deg, #e0694f, #f0a35e); }
.sw[data-v="honey"] { background: linear-gradient(135deg, #b8892a, #d9b45a); }
.sw[data-v="gray"] { background: linear-gradient(135deg, #5d6674, #aab2bf); }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; }
.switch input { width: 22px; height: 22px; accent-color: var(--accent); }

/* tasks */
.trow { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.trow:last-child { border-bottom: 0; }
.tmain { flex: 1; min-width: 0; }
.ttitle { font-weight: 600; word-break: break-word; }
.trow.done .ttitle { text-decoration: line-through; color: var(--muted); font-weight: 400; }
.tmeta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tmeta .pill { font-size: 11.5px; padding: 1px 8px; }
.tfirst { font-size: 13px; color: var(--ok); margin-top: 4px; }
.thint { font-size: 12.5px; background: var(--tint); border-radius: 12px; padding: 8px 10px; margin-top: 6px; }
.tact { display: flex; gap: 2px; flex: none; }
.ib { border: 0; background: transparent; border-radius: 10px; min-width: 34px; min-height: 34px; cursor: pointer; font-size: 15px; color: var(--muted); }
.ib:hover { background: var(--tint); color: var(--ink); }
.chk { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 2px solid var(--accent); background: transparent; cursor: pointer; position: relative; margin-top: 1px; transition: transform .15s, background .15s; }
.chk:active { transform: scale(.85); }
.chk.on { background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: transparent; animation: pop .3s ease; }
.chk.on::after { content: ''; position: absolute; top: 5px; inset-inline-start: 9px; width: 6px; height: 12px; border: solid var(--on); border-width: 0 2.5px 2.5px 0; transform: rotate(40deg); }
.empty { text-align: center; color: var(--muted); padding: 18px 8px; font-size: 14px; }
details.card summary { cursor: pointer; font-weight: 700; }
details.mini { border-bottom: 1px solid var(--line); padding: 8px 0; }
details.mini:last-child { border: 0; }
details.mini summary { cursor: pointer; font-weight: 600; }
details.mini p { color: var(--muted); font-size: 14px; }

/* calendar */
.calhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; }
.calhead h2 { margin: 0; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal .wd { text-align: center; font-size: 12px; color: var(--muted); padding: 4px 0; }
.cal .wd.fri { color: var(--bad); }
.cd { aspect-ratio: 1 / 1; border-radius: 14px; border: 1px solid var(--line); background: var(--solid); cursor: pointer; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; position: relative; min-width: 0; }
.cd b { font-size: 15px; }
.cd small { font-size: 9.5px; color: var(--muted); line-height: 1; }
.cd.fri b { color: var(--bad); }
.cd.today { outline: 2px solid var(--accent); }
.cd.sel { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--on); border-color: transparent; }
.cd.sel b, .cd.sel small { color: var(--on); }
.cd.per { background: rgba(224,130,160,.22); }
.cd.blank { visibility: hidden; }
.dots { display: flex; gap: 3px; height: 6px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.dots i.w { background: var(--gold); } .dots i.b { background: var(--bad); }
.cd.sel .dots i { background: var(--on); }

/* chat */
.chat { max-height: 52vh; min-height: 160px; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; margin: 8px 0 12px; }
.bubble { background: var(--tint); padding: 10px 14px; border-radius: 18px 18px 18px 6px; max-width: 88%; font-size: 14px; white-space: pre-wrap; word-break: break-word; align-self: flex-start; }
.bubble.me { align-self: flex-end; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--on); border-radius: 18px 18px 6px 18px; }
.bubble.typing { opacity: .7; }

/* overlays */
.modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15,10,25,.5); backdrop-filter: blur(6px); overflow: auto; }
.sheet { width: 100%; max-width: 460px; background: var(--solid); border: 1px solid var(--line); border-radius: 26px; padding: 22px; box-shadow: var(--shadow); max-height: 94vh; overflow: auto; animation: rise .2s ease; }
.gate { position: fixed; inset: 0; z-index: 99; display: flex; align-items: center; justify-content: center; padding: 18px; overflow: auto;
  background: radial-gradient(900px 520px at 80% -10%, var(--tint), transparent 60%), var(--bg); }
.remind { position: fixed; top: 10px; inset-inline: 10px; z-index: 80; max-width: 560px; margin: 0 auto; background: var(--solid); border: 1px solid var(--gold); border-radius: 20px; padding: 14px; box-shadow: var(--shadow); animation: rise .25s ease; }
.remind .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.toast { position: fixed; z-index: 95; inset-inline: 0; bottom: 100px; margin: auto; width: fit-content; max-width: 90%; background: var(--ink); color: var(--bg); padding: 8px 18px; border-radius: 99px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; transform: translateY(8px); }
.toast.show { opacity: 1; transform: none; }
.notice { background: rgba(201,138,61,.14); color: var(--warn); border-radius: 14px; padding: 10px 12px; font-size: 13px; }
.sep { height: 1px; background: var(--line); margin: 14px 0; }

@keyframes pop { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.page { display: none; animation: rise .22s ease; }
.page.on { display: block; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* v9 */
.dots i.e { background: var(--ok); }
.cups { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; }
.cup { width: 40px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--solid); font-size: 20px; cursor: pointer; filter: grayscale(1); opacity: .45; transition: .2s; }
.cup.on { filter: none; opacity: 1; background: var(--tint); border-color: var(--accent); }
.hdots { display: flex; gap: 6px; margin: 8px 0; }
.hd { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--solid); border-radius: 12px; padding: 6px 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; color: var(--ink); }
.hd small { font-size: 10px; color: var(--muted); }
.hd.on { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--on); border-color: transparent; }
.hd.on small { color: var(--on); }
.hd.today { outline: 2px solid var(--accent); }

/* v9.1: وضعیت کار، جمع‌شدن، کشیدن */
.rads { display: flex; gap: 14px; margin-top: 6px; }
.rad { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--muted); font-size: 12.5px; cursor: pointer; padding: 2px 0; }
.rad i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--muted); display: inline-block; position: relative; }
.rad.on { color: var(--ink); font-weight: 700; }
.rad.on i { border-color: var(--accent); }
.rad.on i::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--accent); }
.trow.cancelled .ttitle { text-decoration: line-through; color: var(--muted); font-weight: 400; font-style: italic; }
.trow.cancelled { opacity: .7; }
.hl { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.hl h3 { margin: 0; cursor: pointer; }
.colb { border: 0; background: var(--tint); color: var(--accent); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; flex: none; line-height: 1; }
.drag-h { cursor: grab; touch-action: none; user-select: none; color: var(--muted); font-size: 20px; padding: 0 4px; flex: none; line-height: 1; }
.dcard { position: relative; transition: box-shadow .15s; }
.dcard.dragging { box-shadow: 0 18px 40px -10px rgba(0,0,0,.4); z-index: 6; opacity: .95; transition: none; }
.dcard.drop-before { box-shadow: 0 -4px 0 0 var(--accent); }
.dcard.drop-after { box-shadow: 0 4px 0 0 var(--accent); }
.colall { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* دسته‌ها به شکل کاشی ۲×۲ ورق‌زدنی */
.pgwrap { display: flex; align-items: center; gap: 6px; max-width: 460px; margin: 0 auto; }
.pager { flex: 1; min-width: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: 22px; }
.pager::-webkit-scrollbar { display: none; }
.ppage { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 2px; }
.tile { aspect-ratio: 1.12; border-radius: 22px; border: 1px solid var(--line); background: var(--solid); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; padding: 8px; text-align: center; min-width: 0; }
.tile .te { font-size: 28px; line-height: 1.2; }
.tile b { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile small { color: var(--muted); }
.tile.on { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--on); border-color: transparent; box-shadow: var(--shadow); }
.tile.on small { color: var(--on); opacity: .85; }
.tile.ghost { visibility: hidden; }
.pgb { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--solid); cursor: pointer; font-size: 20px; line-height: 1; color: var(--accent); }
.pdots { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.pdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); display: inline-block; }
.pdots i.on { background: var(--accent); }

/* چیدمان خانه (ترتیب با order) */
#p-home.on { display: flex; flex-direction: column; }
#p-home > .hero { order: 0; }
.modrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.modrow:last-child { border-bottom: 0; }
.modrow .mt { flex: 1; min-width: 0; }
.modrow .mt small { display: block; color: var(--muted); }
.modrow input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }