:root {
    --fs: 1;
    --nav-h: 3.75rem;
    --bg: #F2F4F9;
    --surface: #FFFFFF;
    --ink: #16223B;
    --muted: #5B6784;
    --line: #DCE2EE;
    --accent: #2F5BEA;
    --accent-ink: #FFFFFF;
    --done: #1E9E75;
    --danger: #C8453B;
    --track: #E1E6F1;
    --shadow: 0 .75rem 2rem rgba(22, 34, 59, .18);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0F1626;
      --surface: #182136;
      --ink: #E8ECF6;
      --muted: #9AA5C0;
      --line: #2A3550;
      --accent: #7C9BFF;
      --accent-ink: #0F1626;
      --done: #3CC79A;
      --danger: #F07A70;
      --track: #26324D;
      --shadow: 0 .75rem 2rem rgba(0, 0, 0, .55);
      color-scheme: dark;
    }
  }

  * { box-sizing: border-box; }
  html { font-size: calc(100% * var(--fs)); -webkit-text-size-adjust: 100%; }
  html, body { margin: 0; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: Vazirmatn, Tahoma, "Segoe UI", system-ui, sans-serif;
    line-height: 1.75;
  }
  button, input, select { font: inherit; color: inherit; }
  button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  :focus-visible { outline: .1875rem solid var(--accent); outline-offset: .125rem; border-radius: .5rem; }
  [hidden] { display: none !important; }
  h1, h2, h3, p { margin: 0; }

  .app { max-width: 68rem; margin: 0 auto; padding: 1.25rem 1rem calc(3rem + env(safe-area-inset-bottom)); }

  /* ---------- top bar ---------- */
  .top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.25rem; }
  h1 { font-size: 1.75rem; line-height: 1.35; font-weight: 800; letter-spacing: -.01em; }
  .date { margin-top: .125rem; color: var(--muted); font-size: .875rem; }
  .date b { unicode-bidi: plaintext; font-weight: 600; color: var(--ink); }
  .actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
  .sync {
    display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; color: var(--muted);
    padding: .3rem .75rem; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  }
  .sync i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--muted); flex: none; }
  .sync[data-s="ok"] i { background: var(--done); }
  .sync[data-s="wait"] i { background: #E0A100; }
  .sync[data-s="off"] i { background: var(--danger); }

  /* ---------- buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px;
    padding: .65rem 1.25rem; font-weight: 700; min-height: 2.75rem;
  }
  .btn.ghost { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--ink); }
  .btn.small { min-height: 2.25rem; padding: .3rem .95rem; font-size: .875rem; }
  .btn.wide { width: 100%; }
  .btn { white-space: nowrap; }
  .btn:disabled { opacity: .45; cursor: not-allowed; }
  .btn svg { width: 1.125rem; height: 1.125rem; }
  .icon-btn {
    background: transparent; border: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%;
    color: var(--muted); display: grid; place-items: center; flex: none; padding: 0;
  }
  .icon-btn:hover { background: var(--track); color: var(--ink); }
  .icon-btn.del:hover { color: var(--danger); }
  .icon-btn svg { width: 1.25rem; height: 1.25rem; }
  .link-btn {
    background: none; border: 0; padding: 0; color: var(--muted); font-size: .8125rem;
    text-decoration: underline; text-underline-offset: .2em; justify-self: start;
  }

  /* ---------- week summary ---------- */
  .week { background: var(--surface); border-radius: 1.25rem; padding: 1rem 1.125rem; box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 1rem; display: grid; gap: .5rem; }
  .week-row { display: flex; justify-content: space-between; align-items: baseline; gap: .25rem .75rem; flex-wrap: wrap; font-size: .875rem; color: var(--muted); }
  .week-row span { white-space: nowrap; }
  .week-row b { color: var(--ink); font-weight: 700; }
  .meter { height: .625rem; border-radius: 999px; background: var(--track); overflow: hidden; }
  .meter > i { display: block; height: 100%; border-radius: inherit; background: var(--done); transition: width .35s ease; }

  /* ---------- day tabs ---------- */
  .days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .375rem; margin-bottom: 1.25rem; }
  .day {
    border: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: 1rem;
    padding: .6rem .125rem .5rem; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-height: 4.25rem;
  }
  .day .nm { font-weight: 700; font-size: .9375rem; line-height: 1.4; }
  .day .nm-s { display: none; }
  .day .cnt { font-size: .75rem; color: var(--muted); min-height: 1.2em; line-height: 1.2; font-variant-numeric: tabular-nums; }
  .day .mini { width: 70%; height: .25rem; border-radius: 99px; background: var(--track); overflow: hidden; }
  .day .mini > i { display: block; height: 100%; background: var(--done); }
  .day.today .nm::after { content: ""; display: inline-block; width: .375rem; height: .375rem; border-radius: 50%; background: var(--accent); margin-inline-start: .3rem; vertical-align: middle; }
  .day[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
  .day[aria-selected="true"] .cnt { color: inherit; opacity: .85; }
  .day[aria-selected="true"] .mini { background: color-mix(in srgb, var(--accent-ink) 30%, transparent); }
  .day[aria-selected="true"] .mini > i { background: var(--accent-ink); }
  .day[aria-selected="true"].today .nm::after { background: var(--accent-ink); }

  /* ---------- layout ---------- */
  .layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.5rem 1.25rem; align-items: start; }
  .col-side { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
  .panel { background: var(--surface); border-radius: 1.5rem; padding: 1.25rem; box-shadow: inset 0 0 0 1px var(--line); }
  .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .875rem; flex-wrap: wrap; }
  h2 { font-size: 1.125rem; font-weight: 800; line-height: 1.5; }
  .panel-head .tot { font-size: .8125rem; color: var(--muted); }
  .flat { padding: 0 .25rem; }
  .flat > h2 { margin-bottom: .75rem; }

  /* ---------- sessions ---------- */
  .sessions { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
  .session {
    display: flex; align-items: center; gap: .5rem; padding: .625rem .625rem .625rem .5rem; border-radius: 1.125rem;
    background: var(--surface); background: color-mix(in srgb, var(--c) 11%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent);
  }
  .session .body { flex: 1; min-width: 0; margin-inline-start: .25rem; }
  .session .subject { font-weight: 700; font-size: .9375rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0 .5rem; line-height: 1.6; }
  .session .subject::before { content: ""; width: .625rem; height: .625rem; border-radius: 50%; background: var(--c); flex: none; }
  .session .title { font-size: .8125rem; color: var(--muted); overflow-wrap: anywhere; }
  .session.done { opacity: .75; }
  .session.done .sn, .session.done .title { text-decoration: line-through; }
  .by { font-weight: 400; font-size: .75rem; color: var(--muted); }
  .check {
    width: 2.25rem; height: 2.25rem; border-radius: 50%; border: .125rem solid var(--muted); background: transparent;
    display: grid; place-items: center; flex: none; padding: 0;
  }
  .check svg { width: 1.125rem; height: 1.125rem; opacity: 0; stroke: #fff; }
  .session.done .check { background: var(--done); border-color: var(--done); }
  .session.done .check svg { opacity: 1; }
  .empty { padding: 1.25rem; border-radius: 1.125rem; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted); text-align: center; font-size: .875rem; }

  /* ---------- forms ---------- */
  .add { border-top: 1px solid var(--line); padding-top: 1rem; display: grid; gap: .75rem; }
  .add h3 { font-size: .9375rem; font-weight: 700; }
  .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
  label.f { display: flex; flex-direction: column; gap: .25rem; font-size: .8125rem; color: var(--muted); min-width: 0; }
  .field {
    background: var(--bg); border: 1px solid var(--line); border-radius: .875rem; padding: .55rem .8rem;
    width: 100%; min-height: 2.75rem; color: var(--ink);
  }
  .quick { display: flex; flex-wrap: wrap; gap: .375rem; }
  .q { border: 0; border-radius: 999px; padding: .25rem .85rem; font-size: .8125rem; background: var(--track); color: var(--ink); min-height: 2rem; }
  .q[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

  /* ---------- focus timer ---------- */
  .timer {
    display: grid; justify-items: center; gap: .875rem; text-align: center; border-radius: 1.75rem; padding: 1.5rem 1.25rem;
    background: var(--surface); background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, var(--line));
  }
  .timer .ring { position: relative; width: 11rem; height: 11rem; }
  .timer svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
  .timer circle { fill: none; stroke-width: 8; stroke-linecap: round; }
  .timer .trk { stroke: color-mix(in srgb, var(--ink) 13%, transparent); }
  .timer .prg { stroke: var(--accent); transition: stroke-dashoffset .9s linear; }
  .timer .clock {
    position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.25rem; font-weight: 800;
    font-variant-numeric: tabular-nums; direction: ltr; line-height: 1;
  }
  .timer .info { display: grid; gap: .625rem; justify-items: center; min-width: 0; }
  .timer .what { font-weight: 700; overflow-wrap: anywhere; }
  .timer .ctrls { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
  .timer .note { font-size: .8125rem; color: var(--done); font-weight: 700; min-height: 1.25rem; }
  .timer.idle { padding: 1rem 1.25rem; background: none; box-shadow: inset 0 0 0 1.5px var(--line); border-radius: 1.25rem; }
  .timer.idle .ring, .timer.idle .ctrls, .timer.idle .note { display: none; }
  .timer.idle .what { font-weight: 500; color: var(--muted); font-size: .875rem; }

  /* ---------- stats and subjects ---------- */
  .person { margin-bottom: 1rem; }
  .person:last-child { margin-bottom: 0; }
  .pname { font-weight: 700; }
  .pnums { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .125rem .75rem; font-size: .8125rem; color: var(--muted); margin: .125rem 0 .375rem; }
  .subject-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; }
  .subject-item { display: flex; align-items: center; gap: .625rem; padding: .125rem 0; border-bottom: 1px solid var(--line); }
  .subject-item:last-child { border-bottom: 0; }
  .dot { width: .875rem; height: .875rem; border-radius: 50%; background: var(--c); flex: none; }
  .subject-item .nm { flex: 1; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
  .subject-item .tot { font-size: .75rem; color: var(--muted); }
  .swatches { display: flex; flex-wrap: wrap; gap: .625rem; }
  .sw {
    width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 0; padding: 0; background: var(--c);
    box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .45);
  }
  .sw[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .45), 0 0 0 .1875rem var(--surface), 0 0 0 .3125rem var(--ink); }
  .sw.auto { background: linear-gradient(135deg, #F2F4F9 50%, #0F1626 50%); }
  .new-subject { display: grid; gap: .75rem; }

  /* ---------- gate ---------- */
  .gate { max-width: 29rem; margin: 6vh auto 0; display: grid; gap: .875rem; }
  .gate p { color: var(--muted); font-size: .875rem; }
  .gate .share { margin-top: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display: grid; gap: .875rem; }

  /* ---------- responsive ---------- */
  @media (max-width: 800px) {
    .layout { grid-template-columns: 1fr; }
    .col-side { display: contents; }
    .timer { order: -1; }
    .timer.idle { display: none; }
    .timer:not(.idle) {
      position: sticky; top: calc(var(--nav-h) + .5rem); z-index: 20; grid-template-columns: auto 1fr; justify-items: stretch; text-align: start;
      align-items: center; gap: .875rem; padding: .75rem 1rem; border-radius: 1.5rem;
      box-shadow: var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, var(--line));
    }
    .timer:not(.idle) .ring { width: 4.75rem; height: 4.75rem; }
    .timer:not(.idle) .clock { font-size: 1.125rem; }
    .timer:not(.idle) .info { justify-items: start; gap: .4rem; }
    .timer:not(.idle) .ctrls { justify-content: flex-start; }
    .stats-sec { order: 2; }
    .subj-sec { order: 3; }
  }
  @media (max-width: 520px) {
    h1 { font-size: 1.5rem; }
    .fgrid { grid-template-columns: 1fr; }
    .day .nm-f { display: none; }
    .day .nm-s { display: inline; }
    .day { min-height: 3.75rem; border-radius: .875rem; }
    .panel { padding: 1rem; border-radius: 1.375rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .meter > i, .timer .prg { transition: none; }
    .cheer:not([hidden]) { animation: none; }
  }

  /* ---------- main tabs ---------- */
  .maintabs {
    position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: .375rem;
    padding: .5rem 0 .5rem; margin: -.25rem 0 .75rem; background: var(--bg); min-height: var(--nav-h);
  }
  .mtab {
    position: relative; border: 0; border-radius: 1rem; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
    display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .4rem .5rem; min-height: 2.75rem;
    font-weight: 700; font-size: .875rem; line-height: 1.3;
  }
  .mtab svg { width: 1.25rem; height: 1.25rem; flex: none; }
  .mtab[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
  .badge { position: absolute; top: .35rem; inset-inline-start: .55rem; width: .625rem; height: .625rem; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 .125rem var(--surface); }
  .mtab[aria-selected="true"] .badge { box-shadow: 0 0 0 .125rem var(--accent); }

  /* ---------- chat ---------- */
  .chat { display: grid; gap: .75rem; }
  .msgs {
    display: flex; flex-direction: column; gap: .5rem; height: min(60dvh, 34rem); min-height: 14rem; overflow-y: auto;
    padding: .25rem .125rem; overscroll-behavior: contain;
  }
  .msg { max-width: 85%; padding: .5rem .8rem; border-radius: 1.125rem; background: var(--track); align-self: flex-start; }
  .msg.mine { align-self: flex-end; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
  .msg .who { font-size: .75rem; font-weight: 700; color: var(--muted); display: flex; gap: .5rem; align-items: center; }
  .msg .txt { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
  .msg .time { font-size: .6875rem; color: var(--muted); margin-top: .125rem; font-variant-numeric: tabular-nums; }
  .msg .row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
  .msg .icon-btn { width: 1.75rem; height: 1.75rem; }
  .msg .icon-btn svg { width: 1rem; height: 1rem; }
  .dsep { align-self: center; font-size: .75rem; color: var(--muted); padding: .125rem .75rem; border-radius: 999px; background: var(--track); }
  .composer { display: flex; gap: .5rem; align-items: flex-end; }
  .composer textarea { resize: none; max-height: 8rem; line-height: 1.6; flex: 1; min-width: 0; }

  /* ---------- settings and history ---------- */
  .seg { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: 1rem; }
  .pane { display: grid; gap: 1rem; }
  .pane.panel { gap: 1.5rem; }
  .pane > .quick { margin: 0; }
  .set { display: grid; gap: .75rem; }
  .check-row { display: flex; gap: .625rem; align-items: center; font-size: .9375rem; }
  .check-row input { width: 1.25rem; height: 1.25rem; accent-color: var(--accent); flex: none; }
  .hsum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
  .stat { background: var(--surface); border-radius: 1.25rem; padding: .75rem 1rem; box-shadow: inset 0 0 0 1px var(--line); }
  .stat b { display: block; font-size: 1.125rem; font-weight: 800; line-height: 1.5; }
  .stat span { font-size: .8125rem; color: var(--muted); }
  .panel > h2 { margin-bottom: .75rem; }
  .bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: .25rem; align-items: end; height: 8rem; }
  .bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: .25rem; min-width: 0; }
  .bar i { display: block; width: 100%; max-width: 1.5rem; min-height: .1875rem; border-radius: .375rem .375rem .125rem .125rem; background: var(--accent); }
  .bar.zero i { background: var(--track); }
  .bar span { font-size: .625rem; color: var(--muted); line-height: 1; }
  .hrow { display: grid; gap: .125rem; margin-bottom: .75rem; }
  .hrow:last-child { margin-bottom: 0; }
  .hrow .top2 { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; }
  .hrow .top2 span { font-size: .8125rem; color: var(--muted); }
  .hrow .nm2 { font-weight: 700; display: flex; align-items: center; gap: .5rem; min-width: 0; overflow-wrap: anywhere; }
  .hrow .nm2::before { content: ""; width: .625rem; height: .625rem; border-radius: 50%; background: var(--c, var(--accent)); flex: none; }
  .hrow .meter > i { background: var(--c, var(--done)); }
  .hday { margin-bottom: 1rem; }
  .hday h3 { font-size: .875rem; font-weight: 700; color: var(--muted); display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .375rem; }
  .hitem { display: flex; align-items: baseline; gap: .5rem; padding: .375rem 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
  .hitem::before { content: ""; width: .625rem; height: .625rem; border-radius: 50%; background: var(--c); flex: none; align-self: center; }
  .hitem .hm { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .hitem .hm small { display: block; color: var(--muted); font-size: .75rem; }
  .hitem .hd { font-size: .8125rem; color: var(--muted); white-space: nowrap; }

  /* ---------- cheer ---------- */
  .cheer {
    position: fixed; z-index: 50; inset-inline: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); margin: 0 auto; max-width: 30rem;
    display: flex; align-items: center; gap: .75rem; padding: .875rem 1rem; border-radius: 1.5rem;
    background: var(--surface); color: var(--ink); box-shadow: var(--shadow), inset 0 0 0 1.5px var(--done);
  }
  .cheer:not([hidden]) { animation: cheer-in .3s ease-out; }
  @keyframes cheer-in { from { transform: translateY(1.5rem) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
  .cheer-ico { font-size: 2rem; line-height: 1; flex: none; }
  .cheer-body { flex: 1; min-width: 0; }
  .cheer-kind { font-size: .75rem; font-weight: 800; color: var(--done); }
  .cheer-txt { font-weight: 600; line-height: 1.7; overflow-wrap: anywhere; }
  .cheer.big { box-shadow: var(--shadow), inset 0 0 0 2.5px var(--accent); }
  .cheer.big .cheer-ico { font-size: 2.5rem; }
  .cheer.big .cheer-kind { color: var(--accent); }
  @media (max-width: 380px) { .mtab svg { display: none; } .mtab { font-size: .8125rem; } }

  /* ---------- settings controls ---------- */
  .set-h { font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; }
  .set-h span { font-weight: 400; font-size: .8125rem; color: var(--muted); }
  .fs-row { display: flex; align-items: center; gap: .75rem; }
  .fs-row input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 0; height: 2rem; }
  .sample { padding: .75rem 1rem; border-radius: 1rem; background: var(--bg); color: var(--ink); }
  .color-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
  .cinput { width: 2.5rem; height: 2.25rem; padding: 0; border: 1px solid var(--line); border-radius: .625rem; background: transparent; }
  .set-note { font-size: .8125rem; color: var(--muted); }

/* ---------- many subject colors, saved groups ---------- */
.swatches.many { gap: .5rem; }
.swatches.many .sw { width: 2rem; height: 2rem; }
.new-subject .color-row { flex-wrap: nowrap; align-items: flex-start; }
.new-subject .color-row .swatches { flex: 1; }
.gate .my-groups { display: grid; gap: .5rem; }
.group-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.group-item { display: flex; align-items: center; gap: .25rem; background: var(--surface); border-radius: 1rem; box-shadow: inset 0 0 0 1px var(--line); padding-inline-end: .25rem; }
.group-open { flex: 1; min-width: 0; display: grid; gap: .125rem; text-align: start; background: none; border: 0; padding: .75rem 1rem; color: var(--ink); font: inherit; cursor: pointer; border-radius: 1rem; }
.group-open b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: end; }
.group-open span { color: var(--muted); font-size: .8125rem; }
.group-open:hover { background: var(--track); }

/* ---------- sessions of future days cannot be ticked ---------- */
.session .check:disabled, .session .icon-btn:disabled { opacity: .35; cursor: not-allowed; }