/* =============================================================================
   ui/screens.css — per-screen layout.

   base.css owns tokens and typography, kit.css owns the widgets, shell.css owns
   the frame. This file owns the screens themselves, and it is where the desktop
   layouts live: every screen collapses to one column on a phone, becomes two
   columns from 1024px and gets a third rail from 1440px.

   Nothing here loads an external resource.
   ========================================================================== */

/* Auth uses static tab markup, not kit.segmented()'s measured glider. Keep
   the selected label legible without waiting for nonexistent glider geometry. */
#authTabs > button.on { background:linear-gradient(140deg, var(--primary), var(--grad-a)); }

/* ---------------------------------------------------------------- utilities */

.col { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.between, .between { justify-content: space-between; }
.row.center, .center { justify-content: center; }
.center-col { display: flex; flex-direction: column; align-items: center; }
.grow { flex: 1 1 auto; min-width: 0; }
.gap2 { gap: var(--s2); } .gap3 { gap: var(--s3); } .gap4 { gap: var(--s4); }
.mt2 { margin-top: var(--s2); } .mt3 { margin-top: var(--s3); } .mt4 { margin-top: var(--s4); }
.dim { opacity: .62; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.num { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.num.big { font-size: 1.42rem; font-weight: 800; }
.danger { color: var(--rose); }
.only-phone { display: none; }
.glass {
  background: color-mix(in srgb, var(--surf) 72%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.c-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.kbd {
  font: 600 .68rem/1 ui-monospace, monospace; padding: 3px 6px; border-radius: 7px;
  background: var(--elev); border: 1px solid var(--line); color: var(--muted); margin-inline-start: 6px;
}
.pill {
  padding: 3px 9px; border-radius: 999px; background: var(--elev);
  border: 1px solid var(--line); color: var(--muted);
}

/* section head used on every card */
.card-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .95rem; margin-bottom: var(--s3);
}
.card-title svg { color: var(--accent); }

/* generic settings-style row, reused by many screens */
.srow {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; padding: var(--s3); border-radius: var(--r-sm);
  background: transparent; border: 0; color: inherit; text-align: start;
  cursor: pointer; transition: background var(--t-fast) var(--e-standard);
}
.srow:hover { background: var(--elev); }
.srow.col-start { align-items: flex-start; flex-wrap: wrap; }
.srow .body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.srow .lead-mini {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  background: var(--elev); color: var(--accent); flex: 0 0 auto;
}
.srow.danger .lead-mini { color: var(--rose); }

/* progress bar primitive */
.bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar > i {
  display: block; height: 100%; border-radius: 999px; background: var(--accent);
  transition: width 520ms var(--e-decel);
}
.cbar { display: flex; flex-direction: column; gap: 6px; }

/* colour swatch */
.swatch {
  width: 30px; height: 30px; border-radius: 11px; border: 2px solid transparent;
  cursor: pointer; transition: transform var(--t-fast) var(--e-spring), box-shadow var(--t-fast);
}
.swatch:hover { transform: scale(1.12); }
.swatch.on { border-color: var(--fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* form field */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: .82rem; color: var(--muted); font-weight: 600; }
.input-icon { position: relative; display: flex; align-items: center; }
.input-icon > svg { position: absolute; inset-inline-start: 12px; color: var(--muted); pointer-events: none; }
.input-icon .input { padding-inline-start: 40px; }
.pw-eye { position: absolute; inset-inline-end: 8px; }

/* ============================================================ auth =========*/

.auth-wrap {
  min-height: 100dvh; display: grid; place-items: center; padding: var(--s5);
  background:
    radial-gradient(120% 90% at 85% -10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
    radial-gradient(90% 80% at 10% 110%, color-mix(in srgb, var(--cyan) 20%, transparent), transparent 60%),
    var(--bg);
}
.auth-grid { display: grid; gap: var(--s6); width: 100%; max-width: 1080px; align-items: center; }
.auth-brand { display: none; }
.ab-mark {
  width: 74px; height: 74px; border-radius: 24px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent), var(--cyan)); color: #04120c;
  box-shadow: 0 18px 44px -18px color-mix(in srgb, var(--accent) 70%, transparent);
}
.ab-list { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s5); }
.ab-list > div { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.ab-list svg { color: var(--accent); flex: 0 0 auto; }
.auth-card {
  width: 100%; max-width: 430px; margin-inline: auto; padding: var(--s5);
  border-radius: var(--r-lg); background: var(--surf); border: 1px solid var(--line);
  box-shadow: var(--sh-lg);
}
.otp-row { display: flex; gap: var(--s2); direction: ltr; justify-content: center; }
.otp-box {
  width: 48px; height: 58px; text-align: center; font: 700 1.35rem/1 inherit;
  border-radius: var(--r-xs); border: 1.5px solid var(--line); background: var(--elev); color: var(--fg);
  font-variant-numeric: tabular-nums; transition: border-color var(--t-fast), transform var(--t-fast);
}
.otp-box:focus { outline: 0; border-color: var(--accent); transform: translateY(-2px); }
.shake { animation: shake .42s var(--e-standard); }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  30%, 70% { transform: translateX(4px); }
  50% { transform: translateX(-6px); }
}

@media (min-width: 980px) {
  .auth-grid { grid-template-columns: 1.05fr .95fr; }
  .auth-brand { display: block; }
  .auth-card { margin-inline: 0; }
}

/* ============================================================ home =========*/

.home { display: flex; flex-direction: column; gap: var(--s4); }
.home-hero {
  position: relative; overflow: hidden; padding: var(--s5);
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 58%),
    var(--surf);
}
.home-hero h1 { font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); margin: 0 0 4px; }
.hero-grid {
  display: grid; gap: var(--s3); margin-top: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.hero-grid .row { flex-wrap: wrap; min-width: 0; }
.hero-grid .col { min-width: 0; }
.hero-grid .sm.muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-grid b.num { flex: none; white-space: nowrap; }
.quick-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.quick {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: var(--s4) var(--s2); border-radius: var(--r-md);
  background: var(--surf); border: 1px solid var(--line); cursor: pointer;
  font-weight: 600; font-size: .82rem; color: inherit;
  transition: transform var(--t-fast) var(--e-spring), border-color var(--t-fast), background var(--t-fast);
}
.quick:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.quick:active { transform: translateY(0) scale(.97); }
.q-ic {
  width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--qc, var(--accent)) 16%, transparent); color: var(--qc, var(--accent));
}
.stat-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stat {
  display: flex; flex-direction: column; gap: 4px; padding: var(--s4);
  border-radius: var(--r-md); background: var(--surf); border: 1px solid var(--line);
}
.course-row, .task-row {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s3);
  border-radius: var(--r-sm); background: var(--elev);
}
.week { display: flex; gap: 6px; align-items: flex-end; height: 96px; }
.wk { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.wk-bar {
  width: 100%; flex: 1 1 auto; display: flex; align-items: flex-end;
  background: var(--line); border-radius: 8px; overflow: hidden;
}
.wk-bar > i { width: 100%; background: var(--accent); border-radius: 8px; transition: height 600ms var(--e-decel); }
.rank-row { display: flex; flex-direction: column; gap: var(--s2); }
.rank {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3);
  border-radius: var(--r-sm); background: var(--elev);
}
.rank.me { outline: 1.5px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.rank .pos { width: 26px; text-align: center; font-weight: 800; color: var(--muted); }
.mood { display: flex; gap: var(--s2); flex-wrap: wrap; }
.mood button {
  width: 46px; height: 46px; border-radius: 15px; font-size: 1.3rem;
  background: var(--elev); border: 1.5px solid transparent; cursor: pointer;
  transition: transform var(--t-fast) var(--e-spring);
}
.mood button:hover { transform: translateY(-3px) scale(1.06); }
.mood button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }

.home-cols { display: grid; gap: var(--s4); }
@media (min-width: 1024px) { .home-cols { grid-template-columns: 1.35fr 1fr; align-items: start; } }

/* ============================================================ study ========*/

.study { display: grid; gap: var(--s4); }
@media (min-width: 1024px) { .study { grid-template-columns: 1.1fr .9fr; align-items: start; } }

.study-main {
  display: flex; flex-direction: column; align-items: center; gap: var(--s4);
  padding: var(--s6) var(--s4); border-radius: var(--r-lg);
  background:
    radial-gradient(90% 90% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    var(--surf);
  border: 1px solid var(--line);
}
.ss-dial { position: relative; width: min(74vw, 320px); aspect-ratio: 1; display: grid; place-items: center; }
.ss-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ss-dial .tr { fill: none; stroke: var(--line); stroke-width: 10; }
.ss-dial .fi {
  fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round;
  transition: stroke-dashoffset 900ms linear;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 55%, transparent));
}
.ss-inner { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; }
.ss-time { font: 800 clamp(2.2rem, 1.4rem + 4vw, 3.4rem)/1 inherit; font-variant-numeric: tabular-nums; }
.ss-phase { font-size: .86rem; color: var(--muted); font-weight: 600; }
.ss-play {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  border: 0; cursor: pointer; color: #04120c;
  background: linear-gradient(140deg, var(--accent), var(--cyan));
  box-shadow: 0 16px 38px -14px color-mix(in srgb, var(--accent) 75%, transparent);
  transition: transform var(--t-fast) var(--e-spring);
}
.ss-play:hover { transform: scale(1.06); }
.ss-play:active { transform: scale(.94); }
.ss-hint { font-size: .76rem; color: var(--muted); }
.study-side { display: flex; flex-direction: column; gap: var(--s4); }
.amb-grid { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
.amb {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--s3);
  border-radius: var(--r-sm); background: var(--elev); border: 1.5px solid transparent;
  cursor: pointer; font-size: .76rem; color: inherit; font-weight: 600;
}
.amb.on { border-color: var(--accent); color: var(--accent); }

/* ============================================================ room =========*/

.room { display: grid; gap: var(--s4); }
@media (min-width: 1024px) { .room { grid-template-columns: 1.25fr .75fr; align-items: start; } }
.room-live { display: flex; flex-direction: column; gap: var(--s4); }
.room-side { display: flex; flex-direction: column; gap: var(--s4); }
.user-wall { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.u-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--s3); border-radius: var(--r-md); background: var(--surf);
  border: 1px solid var(--line); cursor: pointer; text-align: center;
  transition: transform var(--t-fast) var(--e-spring), border-color var(--t-fast);
}
.u-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.u-tile.studying { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.u-tile .u-name { font-size: .78rem; font-weight: 700; max-width: 100%; }
.group-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
/* the create-group tile must be exactly the size of a group tile */
.g-tile, .g-new {
  display: flex; flex-direction: column; gap: 8px; min-height: 118px;
  padding: var(--s3); border-radius: var(--r-md); background: var(--surf);
  border: 1px solid var(--line); cursor: pointer; color: inherit; text-align: start;
  transition: transform var(--t-fast) var(--e-spring), border-color var(--t-fast);
}
.g-tile:hover, .g-new:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.g-new { align-items: center; justify-content: center; border-style: dashed; color: var(--accent); text-align: center; }
.g-ic {
  width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent);
}
.shop-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.shop-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--s3);
  border-radius: var(--r-md); background: var(--elev); border: 1.5px solid transparent; cursor: pointer;
}
.shop-item.on { border-color: var(--accent); }
.shop-item.locked { opacity: .5; }
.si-face { font-size: 1.8rem; }

/* ================================================ messages / group chat ====*/

.pane { display: grid; gap: var(--s4); min-height: calc(100dvh - var(--top-h) - var(--nav-h) - var(--s6)); }
.pane-list { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.pane-detail { display: flex; flex-direction: column; min-width: 0; min-height: 0; max-height: calc(100dvh - var(--top-h) - var(--nav-h) - var(--s6)); border-radius: var(--r-lg);
  background: var(--surf); border: 1px solid var(--line); overflow: hidden; }
.pl-head, .pd-head {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s3);
  border-bottom: 1px solid var(--line);
}
.pl-body { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.pd-body { flex: 1 1 auto; overflow-y: auto; padding: var(--s4); display: flex; flex-direction: column; gap: 6px; scroll-behavior: smooth; }
.pd-input { padding: var(--s3); border-top: 1px solid var(--line); background: var(--elev); }
.pd-wrap { display: flex; align-items: flex-end; gap: var(--s2); }
/* The thread is a vertical stack: header, scrollable body, composer. */
.pd-thread {
  flex: 1 1 auto; display: flex; flex-direction: column;
  min-width: 0; min-height: 0; overflow: hidden;
}
.pd-thread.hidden { display: none; }
.pd-thread .pd-head { flex: none; }
.pd-thread .pd-body { flex: 1 1 auto; min-height: 0; overflow-wrap: anywhere; }
.pd-thread .pd-input { flex: none; display: flex; align-items: flex-end; gap: var(--s2); }
.pd-thread .pd-input .dm-text { flex: 1 1 auto; min-width: 0; }
.b-text, .b-file { overflow-wrap: anywhere; }
.pd-empty { flex: 1 1 auto; display: grid; place-items: center; color: var(--muted); }
.conv {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s3);
  border-radius: var(--r-sm); background: transparent; border: 0; color: inherit;
  cursor: pointer; text-align: start; width: 100%;
}
.conv:hover { background: var(--elev); }
.conv.on { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* bubbles */
.bub { max-width: min(78%, 560px); align-self: flex-start; display: flex; flex-direction: column; gap: 4px; }
.bub.me { align-self: flex-end; }
.b-text, .b-img, .b-file, .b-sticker {
  padding: 9px 13px; border-radius: 18px; background: var(--elev);
  border: 1px solid var(--line); line-height: 1.65; word-break: break-word;
}
.bub.me .b-text, .bub.me .b-file {
  background: color-mix(in srgb, var(--accent) 18%, var(--surf)); border-color: transparent;
}
.bub:not(.me) .b-text { border-start-start-radius: 6px; }
.bub.me .b-text { border-start-end-radius: 6px; }
.b-img { padding: 4px; }
.b-img img { display: block; max-width: 100%; border-radius: 14px; cursor: zoom-in; }
.b-sticker { background: transparent; border: 0; font-size: 3rem; line-height: 1; padding: 0; }
.b-who { font-size: .72rem; color: var(--muted); font-weight: 700; }
.b-quote {
  border-inline-start: 3px solid var(--accent); padding-inline-start: 8px; margin-bottom: 4px;
  font-size: .8rem; color: var(--muted); opacity: .9;
}
.b-meta { display: flex; align-items: center; gap: 5px; font-size: .68rem; color: var(--muted); align-self: flex-end; }
.bub:not(.me) .b-meta { align-self: flex-start; }
.b-meta svg { color: var(--cyan); }
.b-reacts { display: flex; gap: 4px; flex-wrap: wrap; }
.react {
  font-size: .74rem; padding: 2px 7px; border-radius: 999px;
  background: var(--surf); border: 1px solid var(--line); cursor: pointer;
}
.react.mine { border-color: var(--accent); }
.day-sep { align-self: center; font-size: .7rem; color: var(--muted); padding: 3px 12px;
  border-radius: 999px; background: var(--elev); margin: var(--s2) 0; }
.dm-reply {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-bottom: 6px;
  border-radius: var(--r-xs); background: var(--surf); border-inline-start: 3px solid var(--accent);
  font-size: .8rem;
}
.dm-text { resize: none; max-height: 148px; }
.stick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--s2); }
.stick { font-size: 2rem; background: var(--elev); border: 0; border-radius: var(--r-sm); padding: 8px; cursor: pointer; }
.drop { outline: 2px dashed var(--accent); outline-offset: -8px; }

@media (min-width: 900px) {
  .pane { grid-template-columns: minmax(260px, 320px) 1fr; }
  .pane[data-view] .pane-list, .pane[data-view] .pane-detail { display: flex; }
}
@media (max-width: 899px) {
  .pane[data-view="list"] .pane-detail { display: none; }
  .pane[data-view="detail"] .pane-list { display: none; }
  .only-phone { display: inline-flex; }
}

/* group screen: chat + info aside */
.grp { display: grid; gap: var(--s4); }
.grp-chat { display: flex; flex-direction: column; min-height: 60dvh; border-radius: var(--r-lg);
  background: var(--surf); border: 1px solid var(--line); overflow: hidden; }
.grp-info { display: flex; flex-direction: column; gap: var(--s4); }
@media (min-width: 1100px) { .grp { grid-template-columns: 1fr minmax(280px, 340px); align-items: start; } }
@media (max-width: 1099px) {
  .grp-info { display: none; }
  .grp.show-info .grp-info { display: flex; }
  .grp.show-info .grp-chat { display: none; }
}
.code-box {
  font: 700 1.1rem/1 ui-monospace, monospace; text-align: center; padding: var(--s4);
  border-radius: var(--r-sm); background: var(--elev); border: 1px dashed var(--line);
  user-select: all;
}

/* ============================================================ community ====*/

.feed { display: grid; gap: var(--s4); }
.feed-main { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.feed-side { display: flex; flex-direction: column; gap: var(--s4); }
@media (min-width: 1100px) { .feed { grid-template-columns: minmax(0, 1fr) minmax(280px, 330px); align-items: start; } }

.composer { display: flex; gap: var(--s3); }
.composer textarea { resize: none; min-height: 54px; max-height: 200px; }
.cp-prev { position: relative; margin-top: var(--s3); }
.cp-prev img { width: 100%; border-radius: var(--r-sm); display: block; }
.cp-x { position: absolute; top: 8px; inset-inline-end: 8px; }
.post {
  padding: var(--s4); border-radius: var(--r-lg); background: var(--surf);
  border: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s3);
}
.pb-who { display: flex; align-items: center; gap: var(--s3); }
.p-text { line-height: 1.8; word-break: break-word; white-space: pre-wrap; }
.p-img img { width: 100%; border-radius: var(--r-md); display: block; cursor: zoom-in; }
.p-act { display: flex; gap: var(--s2); flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: var(--s3); }
.p-act button { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; }
.p-act .on { color: var(--rose); }
.p-menu { margin-inline-start: auto; }
.p-comments { display: flex; flex-direction: column; gap: var(--s2); }
.cmt-row { display: flex; gap: var(--s2); align-items: flex-start; font-size: .86rem; }
.cmt-form { display: flex; gap: var(--s2); }
.fd-more { min-height: 40px; display: grid; place-items: center; }
.pop { display: flex; flex-direction: column; gap: var(--s2); }
.sum { display: flex; gap: var(--s3); align-items: center; padding: var(--s2); border-radius: var(--r-sm); }
.sum:hover { background: var(--elev); }
.mini-post { display: flex; flex-direction: column; gap: 6px; padding: var(--s3);
  border-radius: var(--r-sm); background: var(--elev); }
.mini-post img { width: 100%; border-radius: var(--r-xs); }

/* ============================================================ library ======*/

.lib { display: grid; gap: var(--s4); }
.lib-main { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.lib-side { display: flex; flex-direction: column; gap: var(--s4); }
@media (min-width: 1100px) { .lib { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); align-items: start; } }
.track {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3);
  border-radius: var(--r-sm); cursor: pointer; user-select: none;
}
.track:hover { background: var(--elev); }
.track.on { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.track.on b { color: var(--accent); }
.t-play, .t-add { flex: 0 0 auto; }
.player-bar {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3); border-radius: var(--r-md); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surf) 88%, transparent); backdrop-filter: blur(14px);
}
.pb-seek { flex: 1 1 auto; }

/* ============================================================ tasks ========*/

.task-card {
  display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3);
  border-radius: var(--r-md); background: var(--surf); border: 1px solid var(--line);
}
.task-card.done { opacity: .55; }
.tc-check {
  width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--line);
  display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; background: transparent;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--e-spring);
}
.tc-check:hover { transform: scale(1.08); }
.task-card.done .tc-check { background: var(--accent); border-color: var(--accent); color: #04120c; }
.tc-title { font-weight: 600; line-height: 1.6; word-break: break-word; }
.task-card.done .tc-title { text-decoration: line-through; }
.tc-del { opacity: 0; transition: opacity var(--t-fast); }
.task-card:hover .tc-del, .tc-del:focus-visible { opacity: 1; }

/* ============================================================ flashcards ===*/

.deck-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.deck {
  display: flex; flex-direction: column; gap: 4px; padding: var(--s4);
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: linear-gradient(150deg, color-mix(in srgb, var(--dk, var(--accent)) 16%, var(--surf)), var(--surf));
  transition: transform var(--t-fast) var(--e-spring);
}
.deck:hover { transform: translateY(-3px); }
.dk-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s2); }
.dk-ic {
  width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--dk, var(--accent)) 22%, transparent); color: var(--dk, var(--accent));
}
.badge {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; font-size: .72rem; font-weight: 800;
  background: var(--accent); color: #04120c;
}
.fcard { display: flex; align-items: center; gap: var(--s3); padding: var(--s3);
  border-radius: var(--r-sm); background: var(--surf); border: 1px solid var(--line); }

/* review session */
.rev { display: flex; flex-direction: column; min-height: 100dvh; padding: var(--s4); gap: var(--s4); }
.rev-top { display: flex; align-items: center; gap: var(--s3); }
.rev-prog { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.rev-prog > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 320ms var(--e-decel); }
.rev-stage { flex: 1 1 auto; display: grid; place-items: center; }
.flip {
  width: min(100%, 620px); min-height: min(52dvh, 380px); position: relative;
  transform-style: preserve-3d; cursor: pointer;
  transition: transform 520ms var(--e-spring);
}
.flip.on { transform: rotateY(180deg); }
.flip .face {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3);
  padding: var(--s6); text-align: center; border-radius: var(--r-lg);
  background: var(--surf); border: 1px solid var(--line); box-shadow: var(--sh-md);
}
.flip .back { transform: rotateY(180deg); background: color-mix(in srgb, var(--accent) 10%, var(--surf)); }
.f-txt { font-size: clamp(1.1rem, .9rem + 1.2vw, 1.7rem); font-weight: 700; line-height: 1.7; }
.grade-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.grade {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--s3) var(--s2);
  border-radius: var(--r-sm); border: 1.5px solid var(--line); background: var(--surf);
  cursor: pointer; color: inherit; font-size: .82rem;
}
.grade.g1 { border-color: color-mix(in srgb, var(--rose) 60%, var(--line)); color: var(--rose); }
.grade.g2 { border-color: color-mix(in srgb, var(--amber) 60%, var(--line)); color: var(--amber); }
.grade.g3 { border-color: color-mix(in srgb, var(--cyan) 60%, var(--line)); color: var(--cyan); }
.grade.g4 { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); color: var(--accent); }
.grade:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .flip { transition: none; } .flip.on { transform: none; } .flip .back { display: none; } .flip.on .back { display: flex; transform: none; } .flip.on .front { display: none; } }

/* ============================================================ stats ========*/

.stats-cols { display: grid; gap: var(--s4); }
@media (min-width: 1100px) { .stats-cols { grid-template-columns: 1.3fr .7fr; align-items: start; } }

.barchart { display: flex; align-items: flex-end; gap: 6px; height: var(--bc-h, 148px); }
.bc-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; min-width: 0; }
.bc-track { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end;
  background: var(--line); border-radius: 9px; overflow: hidden; }
.bc-track > i { width: 100%; height: 0; border-radius: 9px; transition: height 620ms var(--e-decel); }
.barchart.in .bc-track > i { height: var(--h, auto); }
.bc-lab { color: var(--muted); font-size: .68rem; white-space: nowrap; }
.linechart { width: 100%; height: 110px; overflow: visible; }
.donut { display: grid; gap: var(--s3); grid-template-columns: 116px 1fr; align-items: center; position: relative; }
.dn-svg { width: 116px; height: 116px; transform: rotate(-90deg); }
.dn-seg { transition: stroke-dasharray 700ms var(--e-decel); }
.dn-mid { position: absolute; inset-inline-start: 0; width: 116px; display: grid; place-items: center; text-align: center; }
.dn-legend { display: flex; flex-direction: column; gap: 6px; }
.dn-row { display: flex; align-items: center; gap: 8px; }
.dn-row > i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.hours { display: flex; align-items: flex-end; gap: 3px; height: 78px; }
.hr { flex: 1 1 0; background: var(--accent); opacity: .85; border-radius: 4px; height: var(--v, 2%); min-height: 3px; }

/* heatmap */
.heat { display: flex; flex-direction: column; gap: var(--s2); }
.hm-scroll { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.hm-days { display: grid; grid-template-rows: repeat(7, 12px); gap: 3px; font-size: .6rem; color: var(--muted); }
.hm-grid { display: flex; gap: 3px; }
.hm-col { display: grid; grid-template-rows: repeat(7, 12px); gap: 3px; }
.hm-cell { width: 12px; height: 12px; border-radius: 3px; background: var(--line); display: block; }
.hm-cell.blank { background: transparent; }
.hm-cell.l1 { background: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.hm-cell.l2 { background: color-mix(in srgb, var(--accent) 52%, var(--line)); }
.hm-cell.l3 { background: color-mix(in srgb, var(--accent) 76%, var(--line)); }
.hm-cell.l4 { background: var(--accent); }
.hm-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.hm-legend { display: inline-flex; align-items: center; gap: 3px; }

/* ============================================================ profile ======*/

.prof { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.prof-cols, .prof-cols > .col, .prof-head, .ph-body, .ph-stats { min-width: 0; }
.ph-body { flex-wrap: wrap; }
.hm-scroll { max-width: 100%; }
.prof-head { padding: 0; overflow: hidden; }
.ph-cover {
  height: 116px;
  background:
    radial-gradient(90% 140% at 80% 0%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 60%),
    linear-gradient(120deg, color-mix(in srgb, var(--cyan) 30%, transparent), transparent);
}
.ph-body { display: flex; align-items: flex-end; gap: var(--s3); padding: 0 var(--s4); margin-top: -34px; flex-wrap: wrap; }
.ph-body h1 { font-size: 1.2rem; margin: 0; }
.ph-av { background: transparent; border: 0; padding: 0; cursor: pointer; border-radius: 50%; }
.ph-body .avatar, .ph-av .avatar { border: 3px solid var(--surf); }
.ph-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: var(--s2); padding: var(--s4); }
.pstat { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: var(--s3);
  border-radius: var(--r-sm); background: var(--elev); text-align: center; }
.soc { display: flex; flex-direction: column; align-items: center; gap: 2px; color: inherit; }
.prof-cols { display: grid; gap: var(--s4); }
@media (min-width: 1024px) { .prof-cols { grid-template-columns: 1.25fr .75fr; align-items: start; } }

/* ============================================================ settings =====*/

.set-cols { display: grid; gap: var(--s4); }
@media (min-width: 1024px) { .set-cols { grid-template-columns: 1fr 1fr; align-items: start; } }

/* goal dial */
.goal { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 620px) { .goal { grid-template-columns: 168px 1fr; } }
.gd-dial { position: relative; width: 168px; height: 168px; margin-inline: auto; }
.gd-svg { width: 100%; height: 100%; touch-action: none; cursor: grab; }
.gd-svg:active { cursor: grabbing; }
.gd-track { fill: none; stroke: var(--line); stroke-width: 11; }
.gd-fill {
  fill: none; stroke: url(#none) var(--accent); stroke: var(--accent);
  stroke-width: 11; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 70px 70px;
  transition: stroke-dashoffset 220ms var(--e-decel);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 45%, transparent));
}
.gd-knob { fill: var(--fg); stroke: var(--accent); stroke-width: 3; transition: cx 140ms linear, cy 140ms linear; }
.gd-mid { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; pointer-events: none; }
.gd-mid .num { font-size: 1.5rem; font-weight: 800; }
.gd-tier { color: var(--accent); font-weight: 700; }
.gd-side { display: flex; flex-direction: column; gap: var(--s3); }
.gd-steps { display: flex; align-items: center; gap: var(--s2); }
.gd-range { flex: 1 1 auto; accent-color: var(--accent); }
.gd-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.gd-chip {
  padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 700;
  background: var(--elev); border: 1.5px solid transparent; color: var(--muted); cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--e-spring);
}
.gd-chip:hover { transform: translateY(-2px); }
.gd-chip.on { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.gd-week { display: flex; flex-direction: column; gap: 6px; }

/* ============================================================ telegram =====*/

.tg-hero { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.tg-mark {
  width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center;
  background: linear-gradient(140deg, #2AABEE, #229ED9); color: #fff;
}
.tg-cols { display: grid; gap: var(--s4); }
@media (min-width: 1024px) { .tg-cols { grid-template-columns: 1fr 1fr; align-items: start; } }
.tg-prev { padding: var(--s3); border-radius: var(--r-sm); background: var(--elev);
  border-inline-start: 3px solid #229ED9; }

/* ============================================================ report =======*/

.rp-cols { display: grid; gap: var(--s4); }
@media (min-width: 1024px) { .rp-cols { grid-template-columns: minmax(0, 460px) 1fr; align-items: start; } }
.rp-canvas { width: 100%; max-width: 420px; height: auto; border-radius: var(--r-md); cursor: zoom-in; box-shadow: var(--sh-md); }
.rp-text { white-space: pre-wrap; font: inherit; margin: 0; padding: var(--s3);
  border-radius: var(--r-sm); background: var(--elev); line-height: 1.9; }

/* ============================================================ notif ========*/

.nrow { display: flex; align-items: center; gap: var(--s3); padding: var(--s3);
  border-radius: var(--r-sm); background: var(--surf); border: 1px solid var(--line);
  cursor: pointer; color: inherit; text-align: start; width: 100%; }
.nrow:hover { background: var(--elev); }
.nrow.unread { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.nrow .body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.n-ic { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c, var(--accent)) 16%, transparent); color: var(--c, var(--accent)); flex: 0 0 auto; }

/* ============================================================ 404 ==========*/

.nf { min-height: 56dvh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--s2); text-align: center; }
.nf-art { width: 96px; height: 96px; border-radius: 32px; display: grid; place-items: center;
  background: var(--elev); color: var(--accent); margin-bottom: var(--s3); }

/* ============================================================ motion =======*/

.m-pre { opacity: 0; }
.m-in { opacity: 1; }
.m-enter { animation: mEnter var(--m-dur, 340ms) var(--e-decel) both; }
@keyframes mEnter {
  from { opacity: 0; transform: translateY(var(--m-y, 10px)) scale(.995); }
  to { opacity: 1; transform: none; }
}
.m-page { animation: mPage 260ms var(--e-decel) both; }
@keyframes mPage { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.m-pulse { animation: mPulse 420ms var(--e-spring); }
@keyframes mPulse { 40% { transform: scale(1.14); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .m-enter, .m-page, .m-pulse { animation: none !important; }
  .m-pre { opacity: 1; }
}

/* =========================================================== wide desktop ==*/

@media (min-width: 1600px) {
  .home-cols { grid-template-columns: 1.4fr 1fr; }
  .hero-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .user-wall { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); }
  .deck-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* print the report screen cleanly, just in case someone tries */
@media print {
  .rp-cols { grid-template-columns: 1fr; }
  .card-title svg, .btn, .icon-btn { display: none !important; }
}

/* ========================================================== mini player ====*/
/* Frame-level bar so audio survives navigation. It sits above the bottom nav
   on a phone and above the content edge on desktop. */

#miniPlayer {
  position: fixed; z-index: 58; inset-inline: 0; bottom: var(--nav-h, 74px);
  padding: 4px 14px calc(4px + env(safe-area-inset-bottom));
  animation: mpIn 260ms var(--e-decel) both;
}
@keyframes mpIn { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }

/* MiniPlayer — PlayerUi.kt: کارت گرد ۲۲dp با حاشیهٔ کم‌رنگ و سایه */
#miniPlayer .mp-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 22px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .45);
}
#miniPlayer .mp-cov {
  width: 42px; height: 42px; flex: none; border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, var(--grad-a, var(--primary)), var(--primary) 55%, var(--secondary));
  display: grid; place-items: center; color: var(--on-primary, #fff);
}
#miniPlayer .mp-cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
#miniPlayer .mp-meta {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; padding: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  color: inherit; font: inherit; cursor: pointer; text-align: start;
}
#miniPlayer .mp-title { font-size: 13.5px; font-weight: 700; max-width: 100%; }
#miniPlayer .mp-art { font-size: 11px; color: var(--muted); max-width: 100%; }
#miniPlayer .mp-tgl {
  width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--on-primary, #fff);
  background: linear-gradient(135deg, var(--grad-a, var(--primary)), var(--primary) 55%, var(--secondary));
  box-shadow: 0 6px 16px -8px rgba(var(--primary-rgb) / .8);
  transition: transform 140ms var(--e-spring, ease);
}
#miniPlayer .mp-tgl:active { transform: scale(.9); }
#miniPlayer .icon-btn { flex: none; }
#miniPlayer.loading .mp-tgl { animation: mpPulse 900ms ease-in-out infinite; }
@keyframes mpPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

body.no-chrome #miniPlayer, body.immersive #miniPlayer { display: none; }

@media (min-width: 900px) {
  #miniPlayer { bottom: 14px; inset-inline-start: var(--rail-w, 82px); }
  body.has-player #content { padding-bottom: 84px; }
}
@media (min-width: 1280px) {
  #miniPlayer { inset-inline-start: var(--side-w, 260px); }
  body.side-collapsed #miniPlayer { inset-inline-start: var(--rail-w, 82px); }
  #miniPlayer .mp-card { max-width: var(--maxw, 840px); margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  #miniPlayer { animation: none; }
  #miniPlayer.loading .mp-tgl { animation: none; }
}

/* -------------------- FullPlayerSheet (PlayerUi.kt) ----------------------- */
/* basicMarquee: متن سِررفتنی به‌آرامی می‌لغزد و برمی‌گردد */
.mq { overflow: hidden; }
.mq > span { display: inline-block; white-space: nowrap; }
.mq.on > span { animation: mqX 7s ease-in-out infinite alternate; }
@keyframes mqX { from { transform: translateX(0); } to { transform: translateX(var(--mqx, 40px)); } }

#fullPlayer { position: fixed; inset: 0; z-index: 75; }
#fullPlayer[hidden] { display: none; }
#fullPlayer .fp-scrim {
  position: absolute; inset: 0; background: var(--scrim, rgba(0,0,0,.5));
  opacity: 0; transition: opacity 240ms ease;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
#fullPlayer.open .fp-scrim { opacity: 1; }
#fullPlayer .fp-sheet {
  position: absolute; inset-inline: 0; bottom: 0; margin-inline: auto;
  max-width: 560px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: 28px 28px 0 0;
  padding: 8px 24px calc(34px + env(safe-area-inset-bottom));
  transform: translateY(103%);
  transition: transform 420ms var(--e-decel);
  text-align: center;
  box-shadow: 0 -18px 50px -20px rgba(0, 0, 0, .5);
}
#fullPlayer.open .fp-sheet { transform: none; }
#fullPlayer .fp-grip { width: 44px; height: 5px; border-radius: 99px; background: var(--line); margin: 2px auto 16px; }
#fullPlayer .fp-cov {
  width: 230px; height: 230px; margin: 0 auto 18px; border-radius: 30px; overflow: hidden;
  background: linear-gradient(135deg, var(--grad-a, var(--primary)), var(--primary) 55%, var(--secondary));
  display: grid; place-items: center; color: var(--on-primary, #fff);
  box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .55);
}
#fullPlayer .fp-cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
#fullPlayer .fp-title { font-size: 20px; font-weight: 800; max-width: 100%; margin-inline: auto; }
#fullPlayer .fp-artist { font-size: 14px; color: var(--muted); margin-top: 2px; }
#fullPlayer .fp-up { font-size: 11px; color: var(--muted); opacity: .7; margin-top: 2px; min-height: 14px; }
#fullPlayer .fp-seek {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 24px; margin: 12px 0 0; padding: 0; background: none; cursor: pointer;
  --fpp: 0%;
}
#fullPlayer .fp-seek::-webkit-slider-runnable-track {
  height: 4px; border-radius: 99px;
  background: linear-gradient(to left, var(--primary) 0 var(--fpp), var(--line) var(--fpp) 100%);
}
#fullPlayer .fp-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary); margin-top: -8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
#fullPlayer .fp-seek::-moz-range-track {
  height: 4px; border-radius: 99px;
  background: linear-gradient(to left, var(--primary) 0 var(--fpp), var(--line) var(--fpp) 100%);
}
#fullPlayer .fp-seek::-moz-range-thumb {
  width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
#fullPlayer .fp-times {
  display: flex; justify-content: space-between; direction: ltr;
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}
#fullPlayer .fp-ctls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
#fullPlayer .fp-ctls .icon-btn { width: 44px; height: 44px; color: var(--muted); }
#fullPlayer .fp-ctls .fp-tint.on { color: var(--primary); }
#fullPlayer .fp-play {
  width: 70px; height: 70px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--on-primary, #fff);
  background: linear-gradient(135deg, var(--grad-a, var(--primary)), var(--primary) 55%, var(--secondary));
  box-shadow: 0 14px 30px -12px rgba(var(--primary-rgb) / .9);
  transition: transform 150ms var(--e-spring, ease);
}
#fullPlayer .fp-play:active { transform: scale(.93); }
@media (prefers-reduced-motion: reduce) {
  .mq.on > span { animation: none; }
}

/* ===== Android-parity home (v3) ===== */
.hero-card{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:20px 18px 18px;
  background:linear-gradient(140deg,var(--grad-a),var(--primary) 52%,var(--secondary));
  color:var(--on-primary);box-shadow:0 18px 40px -22px rgba(var(--primary-rgb) /.75)}
.hero-card::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 85% -10%,rgba(255,255,255,.22),transparent 60%)}
.hc-top{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.hc-txt{flex:1;min-width:0}
.hc-label{font-size:.82rem;font-weight:600;opacity:.86}
.hc-num{font-weight:900;font-size:2.5rem;line-height:1.05;letter-spacing:-.5px}
.hc-unit{font-size:.9rem;font-weight:700;opacity:.88;margin-inline-start:6px}
.hc-orb{width:62px;height:62px;border-radius:var(--r-full);display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.28);color:var(--on-primary);
  cursor:pointer;transition:transform var(--t-fast) var(--e-spring)}
.hc-orb:active{transform:scale(.92)}
.hc-orb::before{content:'';position:absolute;width:62px;height:62px;border-radius:var(--r-full);
  background:rgba(255,255,255,.18);animation:hcPulse 2.4s var(--e-standard) infinite}
@keyframes hcPulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
.hc-bars{position:relative;z-index:1;display:grid;gap:7px;margin-top:14px}
.hb{display:flex;align-items:center;gap:9px;font-size:.78rem;font-weight:600}
.hb-name{width:74px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.9}
.hb-track{flex:1;height:7px;border-radius:var(--r-full);background:rgba(255,255,255,.22);overflow:hidden}
.hb-fill{height:100%;border-radius:var(--r-full);background:rgba(255,255,255,.92);
  transition:width var(--t-slow) var(--e-decel)}
.hb-val{opacity:.9;font-variant-numeric:lining-nums}
.hc-actions{position:relative;z-index:1;display:flex;gap:9px;margin-top:16px}
.hc-actions button{flex:1;height:44px;border-radius:var(--r-full);font-weight:800;font-size:.9rem;
  cursor:pointer;transition:transform var(--t-fast) var(--e-spring),filter var(--t-fast)}
.hc-actions button:active{transform:scale(.96)}
#hcStart{background:#fff;color:var(--primary-c,#0B100E);border:none}
#hcRoom{background:rgba(255,255,255,.16);color:var(--on-primary);border:1px solid rgba(255,255,255,.34)}
.goal-card{margin-top:12px;padding:14px 16px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--outline-v)}
.gc-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.gc-ttl{font-weight:700;font-size:.9rem}
.gc-val{font-weight:800;font-size:.86rem;color:var(--primary);font-variant-numeric:lining-nums}
.gc-rest{margin-top:8px;font-size:.76rem;color:var(--on-surface-v,#8FA39A)}
.hero-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.hchip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  border-radius:var(--r-full);font-size:.78rem;font-weight:700;border:1px solid var(--outline-v);
  background:var(--surface-v)}
.hchip svg{width:15px;height:15px}
.t-mint{color:#4ADE9F}.t-cyan{color:#38BDF8}.t-amber{color:#FBBF24}.t-grape{color:#A78BFA}
.quick-wrap{display:grid;gap:12px}
.short-row{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.short{display:grid;justify-items:center;gap:7px;padding:13px 6px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--outline-v);cursor:pointer;
  transition:transform var(--t-fast) var(--e-spring),background var(--t-fast)}
.short:active{transform:scale(.93)}
.sh-ic{width:44px;height:44px;border-radius:var(--r-full);display:grid;place-items:center}
.sh-ic svg{width:21px;height:21px}
.sh-ic.t-mint{background:linear-gradient(145deg,rgba(74,222,159,.26),rgba(74,222,159,.10))}
.sh-ic.t-cyan{background:linear-gradient(145deg,rgba(56,189,248,.26),rgba(56,189,248,.10))}
.sh-ic.t-amber{background:linear-gradient(145deg,rgba(251,191,36,.26),rgba(251,191,36,.10))}
.sh-ic.t-grape{background:linear-gradient(145deg,rgba(167,139,250,.26),rgba(167,139,250,.10))}
.sh-lb{font-size:.76rem;font-weight:700;color:var(--on-bg)}
.fc-banner{display:flex;align-items:center;gap:12px;padding:14px 15px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,#A78BFA,#7C3AED);color:#fff;cursor:pointer;border:none;width:100%;
  text-align:start;transition:transform var(--t-fast) var(--e-spring)}
.fc-banner:active{transform:scale(.97)}
.fc-banner.has-due{box-shadow:0 14px 34px -20px rgba(124,58,237,.9)}
.fb-orb{width:42px;height:42px;flex:none;border-radius:var(--r-full);display:grid;place-items:center;
  background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.28)}
.fb-txt{flex:1;min-width:0}
#fbTitle{font-weight:800;font-size:.92rem}
#fbSub{font-size:.76rem;opacity:.88;margin-top:2px}
@media (max-width:400px){.hc-num{font-size:2.1rem}.short{padding:11px 4px}.sh-ic{width:40px;height:40px}}


/* ===== settings / toggle rows (Android SettingsRow) ===== */
.srow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--outline-v);margin-bottom:8px;cursor:default;
  transition:background var(--t-fast),transform var(--t-fast) var(--e-spring)}
.srow.tap{cursor:pointer}
.srow.tap:active{transform:scale(.985)}
.srow > .lead{width:38px;height:38px;flex:none;border-radius:var(--r-full);display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(var(--primary-rgb) /.22),rgba(var(--primary-rgb) /.08));color:var(--primary)}
.srow > .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.srow > .body > b{font-size:.9rem;font-weight:700;color:var(--on-bg)}
.srow > .body > span{font-size:.75rem;color:var(--on-surface-v,#8FA39A);line-height:1.5}
.srow > .trail{flex:none;display:flex;align-items:center;color:var(--on-surface-v,#8FA39A)}
.srow.col-row{flex-wrap:wrap}
.srow.col-row > .trail{width:100%;margin-top:10px;justify-content:stretch}
.srow.col-row > .trail > .seg{width:100%}
.srow .switch{position:relative;width:46px;height:27px;flex:none}
.srow .switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:2}
.srow .switch .track{position:absolute;inset:0;border-radius:var(--r-full);background:var(--surface-v);
  border:1px solid var(--outline);transition:background var(--t-med),border-color var(--t-med)}
.srow .switch .thumb{position:absolute;top:4px;inset-inline-start:4px;width:19px;height:19px;border-radius:var(--r-full);
  background:var(--on-surface-v,#8FA39A);transition:transform var(--t-med) var(--e-spring),background var(--t-med)}
.srow .switch input:checked ~ .track{background:linear-gradient(135deg,var(--primary),var(--secondary));border-color:transparent}
.srow .switch input:checked ~ .thumb{background:#fff;transform:translateX(calc(-19px * var(--sw-dir,1)))}
[dir="ltr"] .srow .switch input:checked ~ .thumb{transform:translateX(19px)}

/* ===== telegram screen ===== */
.tg-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:13px;padding:17px;
  border-radius:var(--r-xl);background:linear-gradient(135deg,#1D9BF0,#0B79C4);color:#fff;border:none}
.tg-hero::after{content:'';position:absolute;inset:0;
  background:radial-gradient(110% 80% at 90% -20%,rgba(255,255,255,.25),transparent 60%);pointer-events:none}
.tg-mark{width:52px;height:52px;flex:none;border-radius:var(--r-full);display:grid;place-items:center;
  background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.30);position:relative;z-index:1}
.tg-hero .grow{position:relative;z-index:1;min-width:0}
#tgState{font-size:1rem;font-weight:800;display:block}
#tgSub{font-size:.76rem;opacity:.9;margin-top:2px}
.tg-hero .btn{position:relative;z-index:1;background:#fff;color:#0B79C4;border:none;font-weight:800}
.tg-cols{display:grid;gap:12px}
@media (min-width:900px){.tg-cols{grid-template-columns:1fr 1fr}}
.tg-chan{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-md);
  background:var(--surface-v);border:1px dashed var(--outline)}
.tg-chan b{font-size:.88rem}
.tg-chan .tiny{color:var(--on-surface-v,#8FA39A)}
.chip-row{display:flex;flex-wrap:wrap;gap:7px}
.gd-chip{height:29px;padding:0 11px;border-radius:var(--r-full);font-size:.74rem;font-weight:700;
  background:var(--surface-v);border:1px solid var(--outline-v);color:var(--on-bg);cursor:pointer;
  transition:transform var(--t-fast) var(--e-spring),border-color var(--t-fast)}
.gd-chip:active{transform:scale(.93)}
.gd-chip:hover{border-color:var(--primary);color:var(--primary)}
.tg-prev{padding:13px 14px;border-radius:var(--r-md);background:var(--surface-v);
  border:1px solid var(--outline-v);min-height:66px}
.tg-prev .tiny{display:block;margin-bottom:6px;color:var(--on-surface-v,#8FA39A)}
#tgPrev{white-space:pre-wrap;line-height:1.85;font-size:.86rem}
.code-box{padding:14px;border-radius:var(--r-md);background:var(--surface-v);border:1px solid var(--outline);
  font-family:ui-monospace,Menlo,monospace;font-size:1.35rem;font-weight:800;letter-spacing:5px;text-align:center}
.tg-group{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--outline-v);margin-bottom:7px}
.tg-group .grow{min-width:0}


/* ===== study room stage (Android StudyRoomScreen parity) ===== */
.stage{display:grid;gap:12px;margin-bottom:var(--s4)}
.st-tools{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.st-tools::-webkit-scrollbar{display:none}
.st-tool{width:42px;height:42px;flex:none;border-radius:var(--r-full);display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--outline-v);color:var(--on-bg);cursor:pointer;
  transition:transform var(--t-fast) var(--e-spring),color var(--t-fast),border-color var(--t-fast)}
.st-tool:active{transform:scale(.9)}
.st-tool:hover{color:var(--primary);border-color:var(--primary)}
.st-scene{position:relative;height:210px;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--outline-v);
  background:linear-gradient(180deg,#0E1A2B,#132A3E 55%,#0B1A16)}
.st-scene[data-tod="morning"]{background:linear-gradient(180deg,#20344A,#2E5A6E 55%,#123028)}
.st-scene[data-tod="day"]{background:linear-gradient(180deg,#27455F,#3C7A8C 55%,#13322A)}
.st-scene[data-tod="evening"]{background:linear-gradient(180deg,#241D3A,#4A2A46 55%,#171A2A)}
.st-glow{position:absolute;inset:-30% -10% 40%;
  background:radial-gradient(60% 60% at 70% 30%,rgba(var(--primary-rgb) /.30),transparent 70%)}
.st-clock{position:absolute;top:14px;inset-inline-start:16px;color:#EAF3EE}
.st-clock b{display:block;font-size:1.6rem;font-weight:900;letter-spacing:1px;font-variant-numeric:tabular-nums}
.st-clock span{font-size:.72rem;opacity:.75}
.st-char{position:absolute;bottom:44px;inset-inline-end:26px;font-size:74px;line-height:1;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.45));animation:stFloat 4.6s var(--e-standard) infinite}
@keyframes stFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.st-books{position:absolute;bottom:44px;inset-inline-start:28px;display:flex;align-items:flex-end;gap:5px}
.st-books i{display:block;width:11px;border-radius:3px 3px 0 0;background:var(--primary);opacity:.85}
.st-books i:nth-child(1){height:26px}
.st-books i:nth-child(2){height:38px;background:var(--secondary)}
.st-books i:nth-child(3){height:20px;background:var(--amber)}
.st-desk{position:absolute;inset-inline:0;bottom:0;height:44px;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.6));
  border-top:1px solid rgba(255,255,255,.10)}
.st-widgets{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.st-w{display:grid;justify-items:center;gap:4px;padding:12px 8px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--outline-v)}
.st-w > b{font-size:1.02rem;font-weight:900}
.st-w > span:last-child{font-size:.7rem;color:var(--muted)}
.st-wi{width:34px;height:34px;border-radius:var(--r-full);display:grid;place-items:center}
.st-wi.t-mint{background:rgba(74,222,159,.18);color:#4ADE9F}
.st-wi.t-amber{background:rgba(251,191,36,.18);color:#FBBF24}
.st-wi.t-cyan{background:rgba(56,189,248,.18);color:#38BDF8}
.st-actions{display:flex;gap:9px}
.st-actions .btn{height:46px;border-radius:var(--r-full);font-weight:800}
@media (min-width:900px){.st-scene{height:260px}.st-char{font-size:92px}}


/* ===== messages: pinned rooms, FAB, seen ticks ===== */
.pl-pins{display:flex;flex-direction:column;gap:6px;padding:0 var(--s3) var(--s3);
  border-bottom:1px solid var(--outline-v)}
.conv.pin{gap:10px}
.pin-ic{width:42px;height:42px;flex:none;border-radius:var(--r-full);display:grid;place-items:center}
.pin-ic.t-mint{background:rgba(74,222,159,.18);color:#4ADE9F}
.pin-ic.t-cyan{background:rgba(56,189,248,.18);color:#38BDF8}
.pin-ic.t-amber{background:rgba(251,191,36,.18);color:#FBBF24}
.conv.pin > svg{color:var(--muted);opacity:.7}
.fab-mini{position:absolute;inset-inline-end:16px;bottom:calc(var(--nav-h) + 16px);width:52px;height:52px;
  border-radius:var(--r-full);border:none;display:grid;place-items:center;cursor:pointer;z-index:4;
  background:linear-gradient(135deg,var(--primary),var(--secondary));color:var(--on-primary);
  box-shadow:0 16px 34px -14px rgba(var(--primary-rgb) /.85);
  transition:transform var(--t-fast) var(--e-spring)}
.fab-mini:active{transform:scale(.92)}
.pane-list{position:relative}
@media (min-width:900px){.fab-mini{bottom:16px}}
.seen{opacity:.45}
.seen.on{opacity:1;color:var(--primary)}


/* ===== profile (Android ProfileScreen parity) ===== */
.prof-head{padding:0 !important;overflow:hidden}
.ph-cover{height:112px;
  background:linear-gradient(135deg,var(--grad-a),var(--primary) 55%,var(--secondary));
  position:relative}
.ph-cover::after{content:'';position:absolute;inset:0;
  background:radial-gradient(70% 120% at 80% -20%,rgba(255,255,255,.22),transparent 60%)}
.ph-body{display:flex;align-items:flex-end;gap:var(--s3);padding:0 var(--s4) var(--s4);margin-top:-38px}
.ph-av{padding:0;border:3px solid var(--surface);border-radius:var(--r-full);background:var(--surface);
  line-height:0;cursor:pointer;box-shadow:var(--sh-md)}
.ph-body h1{font-size:1.2rem;font-weight:900;margin:0 0 2px}
.ph-body .row{padding-bottom:4px}
.ph-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 var(--s4) var(--s4)}
.pstat{display:grid;justify-items:center;gap:3px;padding:12px 6px;border-radius:var(--r-md);
  background:var(--surface-v);border:1px solid var(--outline-v)}
.pstat > b{font-size:.98rem;font-weight:900}
.pstat .lead-mini{width:32px;height:32px;border-radius:var(--r-full);display:grid;place-items:center;
  background:rgba(var(--primary-rgb) /.16);color:var(--primary)}
.pstat:nth-child(2) .lead-mini{background:rgba(251,191,36,.18);color:#FBBF24}
.pstat:nth-child(3) .lead-mini{background:rgba(56,189,248,.18);color:#38BDF8}
.pstat:nth-child(4) .lead-mini{background:rgba(167,139,250,.20);color:#A78BFA}
@media (max-width:420px){.ph-stats{grid-template-columns:repeat(2,1fr)}}
.soc{display:grid;justify-items:center;gap:2px;text-decoration:none;color:inherit;padding:6px 14px;
  border-radius:var(--r-sm)}
.soc > b{font-size:1.05rem;font-weight:900}
.srow.danger b{color:#FB7185}
.lead-mini{width:34px;height:34px;flex:none;border-radius:var(--r-full);display:grid;place-items:center;
  background:var(--surface-v);border:1px solid var(--outline-v);color:var(--primary)}

/* ===== settings: palette swatches + goal dial ===== */
.pal-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.pal{position:relative;aspect-ratio:1;border-radius:var(--r-full);border:2px solid transparent;cursor:pointer;
  transition:transform var(--t-fast) var(--e-spring),border-color var(--t-fast)}
.pal:active{transform:scale(.9)}
.pal.on{border-color:var(--on-bg);transform:scale(1.06)}
.pal > i{position:absolute;inset:0;display:grid;place-items:center;color:#fff;opacity:0}
.pal.on > i{opacity:1}
.pal-names{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:6px;
  font-size:.63rem;color:var(--muted);text-align:center}
@media (max-width:430px){
  .pal-grid,.pal-names{grid-template-columns:repeat(3,1fr)}
}
.goal-dial{display:grid;justify-items:center;gap:var(--s3);padding:var(--s4) 0 var(--s2)}
.gd-ring{position:relative;width:184px;height:184px}
.gd-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.gd-ring .gd-bg{fill:none;stroke:var(--outline-v);stroke-width:14}
.gd-ring .gd-fg{fill:none;stroke:url(#gdGrad);stroke-width:14;stroke-linecap:round;
  transition:stroke-dashoffset var(--t-med) var(--e-decel)}
.gd-mid{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:2px}
.gd-mid b{font-size:1.6rem;font-weight:900;font-variant-numeric:tabular-nums}
.gd-mid span{font-size:.7rem;color:var(--muted)}
.gd-slider{width:100%;max-width:340px}
.gd-slider input[type=range]{width:100%;accent-color:var(--primary);height:26px}
.gd-steps{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.gd-step{padding:6px 12px;border-radius:var(--r-full);font-size:.74rem;font-weight:800;cursor:pointer;
  background:var(--surface-v);border:1px solid var(--outline-v);color:var(--muted)}
.gd-step.on{background:rgba(var(--primary-rgb) /.18);border-color:transparent;color:var(--primary)}

/* ===== small shared bits the screens assumed ===== */
.card-title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.95rem;margin-bottom:var(--s3)}
.card-title > .pill,.card-title > b{margin-inline-start:auto}
.rank-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
  text-decoration:none;color:inherit;background:var(--surface-v);border:1px solid var(--outline-v)}
.rank{width:24px;height:24px;flex:none;border-radius:var(--r-full);display:grid;place-items:center;
  font-size:.72rem;font-weight:900;background:var(--surface);color:var(--muted)}
.rank.r1{background:#FBBF24;color:#251B00}
.rank.r2{background:#CBD5E1;color:#1B2227}
.rank.r3{background:#D08A5A;color:#241206}
.u-tile{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-md);
  background:var(--surface-v);border:1px solid var(--outline-v);cursor:pointer;width:100%;text-align:start}
.user-wall{display:grid;gap:8px}
.group-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:9px}
.g-tile{position:relative;display:grid;justify-items:center;gap:5px;padding:14px 10px;border-radius:var(--r-md);
  background:var(--surface-v);border:1px solid var(--outline-v);cursor:pointer;min-height:96px;
  transition:transform var(--t-fast) var(--e-spring)}
.g-tile:active{transform:scale(.95)}
.g-ic{width:38px;height:38px;border-radius:var(--r-full);display:grid;place-items:center;font-weight:900;
  background:linear-gradient(135deg,var(--primary),var(--secondary));color:var(--on-primary)}
.g-tile.g-new{border-style:dashed;color:var(--muted)}
.g-tile.g-new b{font-size:.8rem}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.shop-item{display:grid;justify-items:center;gap:4px;padding:14px 8px;border-radius:var(--r-md);
  background:var(--surface-v);border:1px solid var(--outline-v);cursor:pointer}
.shop-item.owned{border-color:var(--primary);background:rgba(var(--primary-rgb) /.12)}
.si-face{font-size:34px;line-height:1}


/* ===== theme palette swatches (settings) ===== */
#stPal{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.swatch{aspect-ratio:1;border-radius:var(--r-full);border:2px solid transparent;cursor:pointer;position:relative;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
  transition:transform var(--t-fast) var(--e-spring),border-color var(--t-fast)}
.swatch:active{transform:scale(.9)}
.swatch.on{border-color:var(--on-bg);transform:scale(1.08)}
.swatch.on::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.9) 0 22%,transparent 24%)}
@media (max-width:430px){#stPal{grid-template-columns:repeat(3,1fr)}}

/* ===== goal dial (ui/goaldial.js) ===== */
.goal{display:grid;gap:var(--s4);align-items:center}
@media (min-width:640px){.goal{grid-template-columns:190px 1fr}}
.gd-dial{position:relative;width:180px;height:180px;margin-inline:auto}
.gd-svg{width:100%;height:100%;transform:rotate(-90deg);touch-action:none;cursor:grab;outline:none}
.gd-svg:focus-visible{filter:drop-shadow(0 0 6px rgba(var(--primary-rgb) /.9))}
.gd-track{fill:none;stroke:var(--outline-v);stroke-width:12}
.gd-fill{fill:none;stroke:var(--primary);stroke-width:12;stroke-linecap:round;
  transition:stroke-dashoffset var(--t-med) var(--e-decel)}
.gd-knob{fill:var(--primary);stroke:var(--surface);stroke-width:3;
  transition:transform var(--t-med) var(--e-decel);filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.gd-mid{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:1px;text-align:center}
.gd-mid > b{font-size:1.55rem;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.1}
.gd-mid > span{font-size:.7rem;color:var(--muted)}
.gd-tier{font-weight:800;color:var(--primary) !important;margin-top:3px}
.gd-side{display:grid;gap:var(--s3);min-width:0}
.gd-steps{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0}
.gd-range{flex:1;width:100%;height:26px;accent-color:var(--primary);background:none;border:0;padding:0}
.gd-presets{display:flex;flex-wrap:wrap;gap:6px}
.gd-presets > button{padding:6px 12px;border-radius:var(--r-full);font-size:.74rem;font-weight:800;cursor:pointer;
  background:var(--surface-v);border:1px solid var(--outline-v);color:var(--muted)}
.gd-presets > button.on{background:rgba(var(--primary-rgb) /.18);border-color:transparent;color:var(--primary)}
.gd-week{display:grid;gap:6px;padding-top:var(--s2);border-top:1px solid var(--outline-v)}
.gd-week .dim{color:var(--muted)}


/* ===== weekly bar chart (home / stats) ===== */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;align-items:end;height:132px}
.wk{display:grid;grid-template-rows:1fr auto;gap:6px;justify-items:center;height:100%}
.wk-bar{width:100%;max-width:26px;height:100%;display:flex;align-items:flex-end;
  border-radius:var(--r-xs);background:var(--surface-v);overflow:hidden}
.wk-bar > i{display:block;width:100%;border-radius:var(--r-xs);
  background:linear-gradient(180deg,var(--secondary),var(--primary));
  animation:wkGrow .5s var(--e-decel) both}
@keyframes wkGrow{from{transform:scaleY(.02);transform-origin:bottom}to{transform:scaleY(1)}}
.wk > span{font-size:.66rem;color:var(--muted)}
.wk.today .wk-bar{outline:1.5px solid var(--primary);outline-offset:1px}

/* ===== empty states: quieter, on-brand ===== */
.empty{display:grid;justify-items:center;gap:6px;text-align:center;padding:var(--s8) var(--s4);color:var(--muted)}
.empty .e{font-size:34px;display:grid;place-items:center;width:64px;height:64px;border-radius:var(--r-full);
  margin:0 0 var(--s2);background:var(--surface-v);border:1px solid var(--outline-v)}
.empty b{display:block;color:var(--on-bg);font-size:.95rem;font-weight:800}
.empty small{font-size:.78rem}

/* ===== study space: ambient + mood chips, session rows ===== */
.amb-row,.mood-row{display:flex;gap:8px;flex-wrap:wrap}
.amb,.mood-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:var(--r-full);
  background:var(--surface-v);border:1px solid var(--outline-v);color:var(--on-bg);font-size:.8rem;
  font-weight:700;cursor:pointer;transition:transform var(--t-fast) var(--e-spring),border-color var(--t-fast)}
.amb:active,.mood-chip:active{transform:scale(.94)}
.amb.on,.mood-chip.on{border-color:transparent;background:rgba(var(--primary-rgb) /.18);color:var(--primary)}
.sess-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);
  background:var(--surface-v);border:1px solid var(--outline-v)}
.sess-row .num{font-variant-numeric:tabular-nums;font-weight:800}

/* ===== year heatmap ===== */
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:3px;overflow-x:auto;padding-bottom:4px}
.hm-cell{width:11px;height:11px;border-radius:3px;background:var(--surface-v)}
.hm-cell[data-l="1"]{background:rgba(var(--primary-rgb) /.30)}
.hm-cell[data-l="2"]{background:rgba(var(--primary-rgb) /.55)}
.hm-cell[data-l="3"]{background:rgba(var(--primary-rgb) /.78)}
.hm-cell[data-l="4"]{background:var(--primary)}

/* ===== flashcard screens ===== */
.fc-deck{display:flex;align-items:center;gap:11px;padding:13px;border-radius:var(--r-md);
  background:var(--surface-v);border:1px solid var(--outline-v);cursor:pointer;width:100%;text-align:start}
.fc-deck .d-ic{width:42px;height:42px;flex:none;border-radius:var(--r-md);display:grid;place-items:center;
  background:linear-gradient(135deg,#A78BFA,#7C3AED);color:#fff}
.pill{padding:3px 9px;border-radius:var(--r-full);font-size:.7rem;font-weight:800;
  background:rgba(var(--primary-rgb) /.16);color:var(--primary)}

/* ===== onboarding-safe fallbacks ===== */
.hidden{display:none !important}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ==========================================================================
   PROFILE  (port of ui/profile/ProfileScreen.kt + StudyAnalytics.kt)
   ========================================================================== */

.pf { display: flex; flex-direction: column; gap: 14px; padding: 16px 0 40px; }
.pf-card {
  background: var(--surface); border: 1px solid var(--outline-v);
  border-radius: var(--r-lg, 22px); padding: 14px;
}
.pf-title { margin: 4px 2px -4px; font-size: 0.95rem; font-weight: 700; }

/* ------------------------------- head card -------------------------------- */

.pf-hrow { display: flex; align-items: center; gap: 12px; }
.pf-avring {
  flex: none; width: 66px; height: 66px; padding: 3px; border: 0; cursor: pointer;
  border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--grad-a), var(--primary), var(--secondary));
}
.pf-avring .av-wrap, .pf-avring .avatar { border-radius: 50%; }
.pf-avring:active { transform: scale(0.96); }
.pf-hmeta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-name { font-size: 1.16rem; font-weight: 800; }
.pf-status {
  font-size: 0.82rem; color: var(--on-surface-v);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-follow { display: flex; gap: 14px; margin-top: 4px; }
.pf-fbtn {
  display: flex; align-items: baseline; gap: 4px; padding: 0;
  background: none; border: 0; cursor: pointer; color: inherit; font: inherit;
}
.pf-fbtn b { font-weight: 800; font-size: 0.92rem; }
.pf-fbtn span { font-size: 0.76rem; color: var(--on-surface-v); }
.pf-streakpill {
  flex: none; align-self: flex-start; padding: 6px 13px; border-radius: 999px;
  font-size: 0.86rem; font-weight: 700; color: var(--tertiary, var(--amber));
  background: rgba(var(--tertiary-rgb) / 0.13);
  border: 1px solid rgba(var(--tertiary-rgb) / 0.28);
}
.pf-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.pf-pill {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px; border-radius: 16px; text-align: center;
  background: rgba(var(--primary-rgb) / 0.1);
}
.pf-pill.s { background: rgba(var(--secondary-rgb) / 0.1); }
.pf-pill.t { background: rgba(var(--tertiary-rgb) / 0.1); }
.pf-pill b { font-size: 0.9rem; font-weight: 800; }
.pf-pill.p b { color: var(--primary); }
.pf-pill.s b { color: var(--secondary); }
.pf-pill.t b { color: var(--tertiary, var(--amber)); }
.pf-pill span { font-size: 0.72rem; color: var(--on-surface-v); }

/* ------------------------------ streak card ------------------------------- */

.pf-streak {
  border-radius: 22px; padding: 18px; color: #FFF3E9;
  background: linear-gradient(150deg, #3A2A20, #120C09);
  border: 1px solid rgba(255, 112, 67, 0.22);
}
.pf-srow { display: flex; align-items: center; gap: 16px; }
.pf-orb { position: relative; width: 96px; height: 96px; flex: none; display: grid; place-items: center; }
.pf-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.pf-ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.pf-ring .tr { stroke: rgba(255, 193, 7, 0.16); }
.pf-ring .vl { stroke: #FFC107; transition: stroke-dashoffset 0.9s var(--e-decel); }
.pf-flame {
  font-size: 44px; line-height: 1; filter: drop-shadow(0 0 18px rgba(255, 112, 67, 0.55));
  animation: pfPulse 880ms ease-in-out infinite alternate;
}
@keyframes pfPulse { from { transform: scale(1); } to { transform: scale(1.14); } }
.pf-sinfo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pf-snum { font-size: 2.2rem; font-weight: 900; line-height: 1.1; color: #FF7043; }
.pf-slab { font-size: 0.8rem; opacity: 0.78; }
.pf-tier {
  align-self: flex-start; margin-top: 5px; padding: 3px 10px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; color: #FFC107;
  background: rgba(255, 193, 7, 0.13); border: 1px solid rgba(255, 193, 7, 0.3);
}
.pf-next { margin-top: 5px; font-size: 0.74rem; opacity: 0.66; }
.pf-dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 16px; }
.pf-dot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pf-dot i {
  width: 100%; aspect-ratio: 1; max-width: 34px; border-radius: 11px;
  display: grid; place-items: center; font-size: 15px; font-style: normal;
  background: rgba(255, 255, 255, 0.05);
}
.pf-dot.on i { background: rgba(255, 112, 67, 0.22); }
.pf-dot.now i { outline: 2px solid #FFC107; outline-offset: 1px; }
.pf-dot em { font-size: 0.66rem; font-style: normal; opacity: 0.6; }
.pf-sfoot {
  margin-top: 14px; padding: 9px 12px; border-radius: 14px; font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.05); text-align: center;
}
.pf-sfoot.done { background: rgba(255, 193, 7, 0.12); color: #FFD98A; }

/* ----------------------------- weekly chart ------------------------------ */

.pf-week { display: flex; align-items: flex-end; gap: 6px; height: 150px; }
.pf-wcol { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; justify-content: flex-end; height: 100%; }
.pf-wv { font-size: 0.66rem; color: var(--on-surface-v); min-height: 12px; }
.pf-wbar {
  width: 100%; border-radius: 8px 8px 3px 3px; background: var(--surface-v);
  transition: height 0.5s var(--e-decel);
}
.pf-wbar.on { background: rgba(var(--primary-rgb) / 0.55); }
.pf-wbar.top { background: linear-gradient(to top, var(--secondary), var(--primary)); }
.pf-wcol em { font-size: 0.68rem; font-style: normal; color: var(--on-surface-v); }

/* ---------------------------- shamsi calendar ---------------------------- */

.pf-calhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.pf-nav {
  width: 30px; height: 30px; flex: none; border: 0; cursor: pointer; border-radius: 9px;
  background: rgba(var(--on-surface-rgb) / 0.07); color: inherit; font-size: 1.1rem; line-height: 1;
}
.pf-calmid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pf-calmid b { font-size: 0.95rem; font-weight: 800; }
.pf-calmid em { font-size: 0.72rem; font-style: normal; color: var(--tertiary, var(--amber)); }
.pf-cw { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.pf-cwh { margin-bottom: 3px; }
.pf-cc {
  height: 38px; border: 0; cursor: pointer; border-radius: 9px; color: inherit;
  background: rgba(var(--on-surface-rgb) / 0.05);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
}
.pf-cc b { font-size: 0.8rem; font-weight: 600; }
.pf-cc em { font-size: 0.58rem; font-style: normal; color: var(--on-surface-v); }
.pf-cc.head { background: none; cursor: default; height: 22px; font-size: 0.72rem; color: var(--on-surface-v); }
.pf-cc.empty { background: none; cursor: default; }
.pf-cc.today { outline: 2px solid var(--primary); outline-offset: -2px; }
.pf-cc.today b { font-weight: 800; }
.pf-cstats { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.pf-cstats span { display: flex; flex-direction: column; align-items: center; gap: 1px; flex: 1 1 0; }
.pf-cstats b { font-size: 0.88rem; font-weight: 800; }
.pf-cstats em { font-size: 0.7rem; font-style: normal; color: var(--on-surface-v); }

/* ---------------------------- analytics card ----------------------------- */

.pf-antitle { display: block; font-size: 0.92rem; font-weight: 800; margin-bottom: 9px; }
.pf-anr { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.pf-anchip {
  padding: 7px 13px; cursor: pointer; border-radius: 9px; color: inherit;
  font-size: 0.76rem; font-weight: 600;
  background: rgba(var(--on-surface-rgb) / 0.10);
  border: 1px solid var(--line);
  transition: background var(--t-fast) var(--e-standard), transform var(--t-fast);
}
.pf-anchip:hover { background: rgba(var(--on-surface-rgb) / 0.18); }
.pf-anchip:active { transform: scale(0.95); }
.pf-anchip.on {
  background: rgba(var(--primary-rgb) / 0.25); color: var(--primary);
  border-color: rgba(var(--primary-rgb) / 0.55); font-weight: 800;
}
.pf-anavg { margin-top: 7px; font-size: 0.74rem; color: var(--on-surface-v); }
.pf-anlab { display: block; font-size: 0.82rem; font-weight: 700; margin: 15px 0 7px; }
.pf-anc { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.pf-ancn { width: 84px; flex: none; font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-antrack { flex: 1 1 auto; height: 14px; border-radius: 7px; background: rgba(var(--on-surface-rgb) / 0.08); overflow: hidden; }
.pf-antrack b { display: block; height: 100%; border-radius: 7px; background: var(--primary); }
.pf-ancv { flex: none; font-size: 0.72rem; color: var(--on-surface-v); }
.pf-anwd { display: flex; align-items: flex-end; height: 74px; gap: 4px; }
.pf-wdcol { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px; justify-content: flex-end; }
.pf-wdcol i { width: 55%; border-radius: 5px; background: var(--primary); }
.pf-wdcol em { font-size: 0.66rem; font-style: normal; color: var(--on-surface-v); }
.pf-anhr { display: flex; gap: 2px; height: 26px; }
.pf-anhr i { flex: 1 1 0; border-radius: 2px; background: rgba(var(--on-surface-rgb) / 0.07); }
.pf-anhrl { display: flex; justify-content: space-between; margin-top: 3px; font-size: 0.66rem; color: var(--on-surface-v); }

/* ------------------------------ course rows ------------------------------ */

.pf-crow {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 8px 8px; padding: 7px 0;
}
.pf-cic { font-size: 15px; }
.pf-cname { font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-cval { font-size: 0.76rem; color: var(--on-surface-v); }
.pf-ctrack {
  grid-column: 1 / -1; height: 7px; border-radius: 999px;
  background: rgba(var(--on-surface-rgb) / 0.08); overflow: hidden;
}
.pf-ctrack b { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--secondary)); }

/* ------------------------- actions / settings row ------------------------ */

.pf-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-obtn {
  height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 16px; cursor: pointer; font-size: 0.88rem; font-weight: 700;
  background: none; color: var(--primary); border: 1px solid rgba(var(--primary-rgb) / 0.45);
}
.pf-obtn:active { transform: scale(0.98); }
.pf-out { color: var(--rose); border-color: rgba(var(--tertiary-rgb) / 0.2); }
.pf-setrow { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.pf-sic {
  width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: rgba(var(--primary-rgb) / 0.12); color: var(--primary);
}
.pf-sbody { display: flex; flex-direction: column; gap: 1px; }
.pf-sbody b { font-size: 0.92rem; }
.pf-sbody small { font-size: 0.74rem; color: var(--on-surface-v); }
.pf-ver { text-align: center; font-size: 0.72rem; color: var(--on-surface-v); padding: 6px 0 10px; }

/* -------------------------------- sheets --------------------------------- */

.pf-part { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--outline-v); }
.pf-part:last-child { border-bottom: 0; }
.pf-pbody { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pf-pbody b { font-size: 0.86rem; font-weight: 700; }
.pf-pbody em { font-size: 0.72rem; font-style: normal; color: var(--on-surface-v); }
.pf-ptime { font-size: 0.74rem; color: var(--on-surface-v); }
.pf-dhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.pf-dhead b { font-size: 0.98rem; font-weight: 800; }
.pf-dhead em { font-size: 0.74rem; font-style: normal; color: var(--on-surface-v); }
.pf-dtotal {
  display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-radius: 16px;
  background: rgba(var(--primary-rgb) / 0.1); color: var(--primary); font-size: 0.84rem;
}
.pf-dtotal b { margin-inline-start: auto; font-weight: 800; }
.pf-repcard {
  border-radius: 20px; padding: 16px; color: #fff;
  background: linear-gradient(140deg, var(--secondary), var(--primary));
}
.pf-repname { font-size: 1.2rem; font-weight: 900; }
.pf-repdate { display: block; font-size: 0.78rem; opacity: 0.88; margin-bottom: 12px; }
.pf-rline { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 0.84rem; }
.pf-rline b { font-weight: 800; }
.pf-full { width: 100%; margin-top: 12px; justify-content: center; }
.pf-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.pf-tab {
  padding: 7px 14px; border: 0; cursor: pointer; border-radius: 999px; color: inherit;
  font-size: 0.8rem; background: rgba(var(--on-surface-rgb) / 0.07);
}
.pf-tab.on { background: rgba(var(--primary-rgb) / 0.22); color: var(--primary); font-weight: 700; }
.pf-strip {
  position: relative; height: 22px; border-radius: 8px; margin-bottom: 2px;
  background: rgba(var(--on-surface-rgb) / 0.07); overflow: hidden;
}
.pf-strip i { position: absolute; top: 0; bottom: 0; background: var(--primary); border-radius: 4px; }
.pf-frow {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 0;
  background: none; border: 0; cursor: pointer; color: inherit; text-align: start;
}
.pf-fbody { display: flex; flex-direction: column; gap: 1px; }
.pf-fbody b { font-size: 0.88rem; }
.pf-fbody em { font-size: 0.72rem; font-style: normal; color: var(--on-surface-v); }

/* ==========================================================================
   SETTINGS  (port of ui/settings/SettingsScreen.kt + SettingsKit.kt)
   ========================================================================== */

.set { display: flex; flex-direction: column; gap: 16px; padding: 16px 0 40px; }
.sg { display: flex; flex-direction: column; gap: 7px; }
.sg-t { font-size: 0.82rem; font-weight: 700; color: var(--primary); padding-inline-start: 4px; }
.sg-box { border-radius: 18px; background: rgba(var(--on-surface-rgb) / 0.045); overflow: hidden; }
.sg-back { cursor: pointer; }
.sg-back .sg-row b { font-size: 1.05rem; font-weight: 800; }
.sg-back .sg-ic svg { transform: scaleX(-1); }
.sg-row { display: flex; align-items: center; gap: 12px; padding: 14px 12px; cursor: pointer; }
.sg-row:active { background: rgba(var(--on-surface-rgb) / 0.05); }
.sg-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; color: var(--primary); }
.sg-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sg-body b { font-size: 0.92rem; font-weight: 600; }
.sg-body small { font-size: 0.74rem; color: var(--on-surface-v); }
.sg-div { height: 1px; margin-inline-start: 58px; background: rgba(var(--on-surface-rgb) / 0.09); }

.sg-sw {
  flex: none; width: 46px; height: 27px; border-radius: 999px; cursor: pointer;
  background: rgba(var(--on-surface-rgb) / 0.16); position: relative;
  transition: background var(--t-fast) var(--e-standard);
}
.sg-sw i {
  position: absolute; top: 3px; inset-inline-start: 3px; width: 21px; height: 21px;
  border-radius: 50%; background: #fff;
  transition: transform var(--t-fast) var(--e-standard);
}
.sg-sw.on { background: var(--primary); }
.sg-sw.on i { transform: translateX(calc(19px * var(--sw-dir, -1))); }

/* ------------------------------ goal section ----------------------------- */

.sg-goal { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px 14px 18px; }
.sg-seg {
  position: relative; display: inline-flex; padding: 3px; border-radius: 999px;
  background: rgba(var(--on-surface-rgb) / 0.08);
}
.sg-seg .glide {
  position: absolute; top: 3px; bottom: 3px; border-radius: 999px; background: var(--primary);
  transition: left var(--t-med) var(--e-spring), width var(--t-med) var(--e-spring);
}
.sg-seg button {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  padding: 7px 18px; font: inherit; font-size: 0.82rem; color: var(--on-surface-v);
  transition: color var(--t-fast) linear;
}
.sg-seg button.on { color: var(--on-primary, #fff); font-weight: 700; }
.sg-mode { padding: 2px; }
.sg-mode button { padding: 6px 12px; font-size: 0.76rem; }

.sg-dial { position: relative; width: 168px; height: 168px; display: grid; place-items: center; }
.sg-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sg-dial path { fill: none; stroke-width: 14; stroke-linecap: round; }
.sg-dial .tr { stroke: rgba(var(--on-surface-rgb) / 0.1); }
.sg-dial .vl { stroke: var(--primary); transition: stroke-dashoffset 0.45s var(--e-decel); }
.sg-dmid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sg-dmid b { font-size: 2.1rem; font-weight: 900; line-height: 1; }
.sg-dmid b.pop { animation: sgPop 160ms var(--e-decel); }
@keyframes sgPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sg-dmid em { font-size: 0.76rem; font-style: normal; color: var(--on-surface-v); }

.sg-step { display: flex; align-items: center; gap: 12px; width: 100%; }
.sg-rb {
  width: 38px; height: 38px; flex: none; border-radius: 50%; cursor: pointer; color: var(--primary);
  background: rgba(var(--primary-rgb) / 0.12); border: 0; display: grid; place-items: center;
}
.sg-rb:disabled { opacity: 0.4; cursor: default; }
.sg-range { flex: 1 1 auto; accent-color: var(--primary); }
.sg-hint { margin: 0; font-size: 0.74rem; color: var(--on-surface-v); text-align: center; line-height: 1.7; }

/* -------------------------------- palette ------------------------------- */

.sg-pal { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.sg-pal > b { font-size: 0.84rem; font-weight: 600; }
.sg-dots { display: flex; gap: 12px; flex-wrap: wrap; }
.sg-dot {
  width: 48px; border: 0; background: none; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.sg-dot b {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font-size: 18px; color: #fff; background: inherit;
}
.sg-dot { background-clip: padding-box; }
.sg-dot em { font-size: 0.68rem; font-style: normal; color: var(--on-surface-v); }
.sg-dot.on em { color: var(--primary); font-weight: 700; }

/* --------------------------- auto download sheet ------------------------- */

.sg-line {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; font-size: 0.88rem; border-bottom: 1px solid var(--outline-v);
}
.sg-mbl { margin: 14px 0 8px; font-size: 0.82rem; font-weight: 700; }
.sg-mbs { display: flex; gap: 8px; flex-wrap: wrap; }
.sg-chip {
  padding: 8px 14px; border: 0; cursor: pointer; border-radius: 999px; color: inherit;
  font-size: 0.8rem; background: rgba(var(--on-surface-rgb) / 0.08);
}
.sg-chip.on { background: rgba(var(--primary-rgb) / 0.22); color: var(--primary); font-weight: 700; }

/* ------------------------------- wakeup done ----------------------------- */

.an-wake.done {
  background: rgba(var(--primary-rgb) / 0.12);
  border-color: rgba(var(--primary-rgb) / 0.24);
}
.an-wake.done .aw-ic { color: var(--primary); }
.an-wake.done .aw-btn { background: rgba(var(--primary-rgb) / 0.22); color: var(--primary); }

/* ------------------------------ wide screens ----------------------------- */

@media (min-width: 900px) {
  .pf-pills { grid-template-columns: repeat(3, 1fr); }
  .pf-acts { grid-template-columns: repeat(2, minmax(0, 260px)); }
  .pf-cc { height: 44px; }
}

/* ======================= patch 15: settings polish ======================= */

/* switch: visible track in both states, RTL-safe knob travel */
.sg-sw {
  background:rgba(var(--on-surface-rgb) / .22);
  box-shadow:inset 0 0 0 1px rgba(var(--on-surface-rgb) / .10);
}
.sg-sw i { transform:none !important; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.sg-sw.on { background:var(--primary); box-shadow:none; }
.sg-sw.on i { inset-inline-start:auto; inset-inline-end:3px; }

/* segmented controls: readable container + smooth pill */
.sg-seg { background:rgba(var(--on-surface-rgb) / .10); box-shadow:inset 0 0 0 1px rgba(var(--on-surface-rgb) / .06); }
.sg-seg .glide { box-shadow:0 3px 10px rgba(var(--primary-rgb) / .35); }
.sg-mode { flex:none; }

/* goal dial: real 270deg ring */
.sg-goal { gap:16px; padding:18px 16px 20px; }
.sg-dial { width:186px; height:186px; }
.sg-dial svg { overflow:visible; }
.sg-dial circle {
  fill:none; stroke-width:13; stroke-linecap:round;
  stroke-dasharray:329.9 439.8;
  transform:rotate(135deg); transform-origin:50% 50%;
}
.sg-dial .tr { stroke:rgba(var(--on-surface-rgb) / .12); }
.sg-dial .vl { stroke:var(--primary); filter:drop-shadow(0 0 8px rgba(var(--primary-rgb) / .45)); }
.sg-dmid b { font-size:2.2rem; letter-spacing:-.5px; }

/* stepper row */
.sg-step { gap:14px; padding-inline:2px; }
.sg-rb:active { transform:scale(.9); }
.sg-range {
  -webkit-appearance:none; appearance:none; height:6px; border-radius:99px;
  background:rgba(var(--on-surface-rgb) / .14); outline:none;
}
.sg-range::-webkit-slider-thumb {
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--primary); border:3px solid var(--surface); cursor:grab;
  box-shadow:0 2px 8px rgba(var(--primary-rgb) / .45);
}
.sg-range::-moz-range-thumb {
  width:16px; height:16px; border-radius:50%; background:var(--primary);
  border:3px solid var(--surface); cursor:grab;
}

/* palette swatches: round dots, gradient on the dot only */
.sg-dots { gap:14px; }
.sg-dot { width:auto; min-width:56px; }
.sg-dot b {
  width:46px; height:46px; font-size:20px; line-height:46px;
  box-shadow:0 3px 10px rgba(0,0,0,.28);
  transition:transform var(--t-fast) var(--e-spring), box-shadow var(--t-fast) linear;
}
.sg-dot.on b { transform:scale(1.06); box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--primary); }
.sg-dot:active b { transform:scale(.92); }
.sg-dot em { max-width:64px; text-align:center; }

/* rows: comfortable touch targets */
.sg-row { min-height:60px; padding:13px 14px; }
.sg-row:hover { background:rgba(var(--on-surface-rgb) / .03); }

/* ======================== patch 15: profile polish ====================== */

/* stat pills stay on one line */
.pf-pills { gap:10px; }
.pf-pill { min-width:0; padding:11px 8px; }
.pf-pill b { font-size:.94rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.pf-pill span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* weekly chart: bars must not be squeezed away by flex shrinking */
.pf-week { height:138px; gap:8px; padding-top:4px; }
.pf-wcol { min-width:0; }
.pf-wbar { flex:none !important; min-height:5px; border-radius:8px 8px 4px 4px; }
.pf-wbar.on { background:linear-gradient(to top, rgba(var(--primary-rgb) / .45), rgba(var(--primary-rgb) / .8)); }
.pf-wv { font-weight:700; color:var(--on-surface); }

/* hour strip: keep tiny values visible */
.pf-anhr { align-items:flex-end; gap:3px; height:30px; }
.pf-anhr i { min-height:5px; border-radius:3px; }

/* course progress tracks */
.pf-ctrack { background:rgba(var(--on-surface-rgb) / .12) !important; }

/* ==== round 16 — telegram screen + notification settings ================= */

.tg-card { position: relative; overflow: hidden; display: flex; flex-direction: column;
  align-items: center; gap: 12px; padding: 22px 18px; text-align: center;
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.tg-orb { width: 74px; height: 74px; border-radius: var(--r-full); display: grid;
  place-items: center; font-size: 32px; background: linear-gradient(145deg, #38BDF8, #2563EB);
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.35);
  animation: tgpulse 1600ms var(--e-standard) infinite alternate; }
@keyframes tgpulse { from { transform: scale(0.94); } to { transform: scale(1.06); } }
.tg-title { font-size: 1.02rem; font-weight: 800; }
.tg-desc { margin: 0; font-size: 0.82rem; line-height: 1.75; color: var(--on-surface-v); }
.tg-steps { display: flex; flex-direction: column; gap: 9px; width: 100%;
  text-align: start; margin-top: 2px; }
.tg-step { display: flex; align-items: center; gap: 9px; font-size: 0.82rem; line-height: 1.6; }
.tg-step b { flex: none; width: 26px; height: 26px; border-radius: var(--r-full);
  display: grid; place-items: center; font-size: 0.76rem; color: #fff;
  background: linear-gradient(145deg, #38BDF8, #2563EB); }
.tg-cta { margin-top: 4px; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px 26px; border: 0; border-radius: var(--r-full); cursor: pointer;
  font: inherit; font-size: 0.9rem; font-weight: 800; color: #fff;
  background: linear-gradient(145deg, #38BDF8, #2563EB);
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.3); }
.tg-cta:active { transform: scale(0.97); }
.tg-code { width: 100%; padding: 22px 12px; border-radius: 20px; direction: ltr;
  font-size: 34px; font-weight: 800; letter-spacing: 6px; color: var(--primary);
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.22), rgba(37, 99, 235, 0.22)); }
.tg-exp { font-size: 0.74rem; color: var(--on-surface-v); }
.tg-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }
.tg-acts.start { justify-content: flex-start; }
.tg-auto { display: flex; align-items: center; gap: 8px; text-align: start;
  font-size: 0.76rem; color: var(--on-surface-v); }
.tg-spin { flex: none; display: inline-block; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(var(--primary-rgb) / 0.25); border-top-color: var(--primary);
  animation: tgspin 780ms linear infinite; }
.tg-spin.big { width: 26px; height: 26px; border-width: 3px; }
@keyframes tgspin { to { transform: rotate(360deg); } }
.tg-note { margin: 0; font-size: 0.74rem; color: var(--on-surface-v); }
.tg-conn { display: flex; align-items: center; gap: 11px; padding: 14px 15px;
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.tg-cmark { flex: none; width: 42px; height: 42px; border-radius: var(--r-full);
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #38BDF8, #2563EB); }
.tg-cbody { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tg-cbody b { font-size: 0.9rem; font-weight: 800; }
.tg-cbody small { font-size: 0.76rem; color: var(--on-surface-v); direction: ltr; text-align: start; }
.tg-ed { display: flex; flex-direction: column; gap: 8px; padding: 4px 14px 14px; }
.tg-ta { width: 100%; resize: vertical; padding: 11px 12px; border-radius: 14px;
  font: inherit; font-size: 0.84rem; line-height: 1.8; color: var(--fg);
  background: var(--surface-v); border: 1px solid var(--line); }
.tg-ta:focus { outline: none; border-color: rgba(var(--primary-rgb) / 0.6); }
.tg-lab { font-size: 0.74rem; font-weight: 700; color: var(--on-surface-v); }
.tg-lab.dim { font-weight: 400; }
.tg-vars { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-var { padding: 5px 9px; border-radius: 12px; cursor: pointer; direction: ltr;
  font: inherit; font-size: 0.72rem; color: var(--primary);
  background: rgba(var(--primary-rgb) / 0.10); border: 1px solid rgba(var(--primary-rgb) / 0.28); }
.tg-var:active { transform: scale(0.96); }
.tg-prev { padding: 13px 14px; border-radius: 14px; white-space: pre-wrap;
  font-size: 0.84rem; line-height: 1.85; background: var(--surface-v);
  border: 1px solid var(--line); }

.ns-time { padding: 7px 9px; border-radius: 12px; font: inherit; font-size: 0.82rem;
  direction: ltr; color: var(--fg); background: var(--surface-v); border: 1px solid var(--line); }
.ns-foot { height: 10px; }

.sg-note { margin: 0; padding: 12px 14px; font-size: 0.76rem; line-height: 1.8; color: var(--on-surface-v); }
.sg-note code { direction: ltr; font-size: 0.74rem; padding: 1px 5px; border-radius: 6px; background: var(--surface-v); }
.sg-tb { padding: 7px 12px; border-radius: var(--r-full); cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 700; color: var(--primary); background: transparent; border: 1px solid var(--line); }
.sg-tb[disabled] { opacity: 0.45; cursor: default; }
.sg-chev { display: grid; place-items: center; color: var(--on-surface-v); transition: transform var(--t-fast) var(--e-standard); }
.sg-chev.up { transform: rotate(180deg); }
.sg-row.tap { cursor: pointer; }

/* ---------------------- global chronometer pill (v22) --------------------- */
#studyBar {
  position: fixed; z-index: 44;
  inset-inline: 0; margin-inline: auto; width: max-content;
  bottom: calc(var(--nav-h, 74px) + env(safe-area-inset-bottom) + 14px);
  display: flex; align-items: center; gap: 7px;
  padding: 11px 18px;
  border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--grad-a, var(--primary)), var(--primary) 55%, var(--secondary));
  color: var(--on-primary, #fff);
  font-size: 13px; font-weight: 700; letter-spacing: .2px;
  box-shadow: 0 12px 26px -12px rgba(var(--primary-rgb) / .9);
  cursor: pointer;
}
#studyBar.in { animation: sbIn 300ms var(--e-decel) both; }
#studyBar:active { transform: scale(.96); }
#studyBar .sb-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--on-primary, #fff);
  animation: sbPulse 1400ms ease-in-out infinite;
}
#studyBar .sb-lb { font-variant-numeric: tabular-nums; }
body.has-player #studyBar { bottom: calc(var(--nav-h, 74px) + env(safe-area-inset-bottom) + 74px); }
body.no-chrome #studyBar, body.immersive #studyBar { display: none; }
@keyframes sbIn { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes sbPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (min-width: 900px) {
  #studyBar { bottom: 22px; inset-inline-start: var(--rail-w, 82px); }
  body.has-player #studyBar { bottom: 86px; }
}
@media (prefers-reduced-motion: reduce) {
  #studyBar.in { animation: none; }
  #studyBar .sb-dot { animation: none; }
}

/* ---- study part actions (parts list, delete, change course) ---- */
.pf-part { position: relative; }
.pf-pmenu {
  width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: transparent; color: var(--on-surface-v);
  cursor: pointer; opacity: .65; transition: opacity var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.pf-pmenu:hover { opacity: 1; background: var(--surface-v); }
.pf-pmenu:active { transform: scale(.9); }
.pf-picks { display: flex; flex-direction: column; gap: 8px; }
.pf-pick {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0;
  padding: 11px 12px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--outline-v); background: var(--surface);
  color: inherit; font: inherit; text-align: right;
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.pf-pick > span { font-size: 18px; flex: 0 0 auto; }
.pf-pick > b { flex: 1 1 auto; min-width: 0; font-size: .88rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-pick:active { transform: scale(.98); }
.pf-pick.on { border-color: rgb(var(--primary-rgb)); background: rgba(var(--primary-rgb) / .10); }