/* app.css — აპლიკაციის ფენა დიზაინ-სისტემაზე (design/tokens.css).
 * წესი: ფერი მხოლოდ როლის ტოკენიდან; ნედლი hex აქ არ იწერება.
 */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--sur-ground);
  color: var(--tx-primary);
  font-optical-sizing: auto;
  overflow-x: hidden;
}
button, input { font: inherit; color: inherit; }
img { max-width: 100%; }

.app { min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 84px; }
.main { flex: 1; max-width: 1000px; width: 100%; margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-8); }
.screen { display: grid; gap: var(--sp-4); }
.screen-title { font-size: var(--fs-h2); font-weight: var(--w-max);
  text-transform: uppercase; letter-spacing: var(--ls-caps); }
.note { font-size: var(--fs-small); color: var(--tx-muted); max-width: 75ch; }
.note.footnote { border-top: 1px solid var(--rule-hair); padding-top: var(--sp-3); }
.sub { font-size: var(--fs-small); color: var(--tx-muted); }
.warn-text { color: var(--st-warning); font-weight: var(--w-strong); }
.flat { color: var(--tx-muted); }
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.glyph { width: 12px; height: 12px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -1px; }
.glyph.filled { fill: currentColor; stroke: none; }

/* ---------- Z0 ---------- */
.topbar { background: var(--sur-card); display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); position: sticky; top: 0; z-index: 20;
  box-shadow: var(--shadow-raised); }
.topbar .phase { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st-live); flex: 0 0 8px; }
.topbar .count { margin-left: auto; color: var(--tx-muted); min-width: 0;
  display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.topbar .count strong { color: var(--pl-signal); font-weight: var(--w-max); font-size: 1.05rem; }
.topbar .bell { position: relative; display: inline-flex; background: none; border: 0;
  cursor: pointer; padding: 4px; border-radius: var(--rad-pill); }
.topbar .bell .pip { position: absolute; top: 0; right: 0; width: 8px; height: 8px;
  border-radius: 50%; background: var(--pl-signal); }
@keyframes heartbeat { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.2); } }
.topbar .dot.beat, .mrow .live-min::before, .chip.prov .pd {
  animation: heartbeat 2.2s var(--ease-standard) infinite;
}

/* ---------- ტაბები ---------- */
.tabbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--sp-4);
  z-index: 20; display: flex; gap: var(--sp-1); background: var(--sur-card);
  border-radius: var(--rad-pill); padding: var(--sp-1); box-shadow: var(--shadow-overlay);
  width: min(520px, calc(100vw - 32px)); }
.tabbar button { flex: 1; font-size: var(--fs-label); font-weight: var(--w-strong);
  text-transform: uppercase; letter-spacing: var(--ls-caps); background: none; border: 0;
  cursor: pointer; color: var(--tx-secondary); padding: 10px 0; border-radius: var(--rad-pill);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background var(--dur-fast) var(--ease-standard); }
.tabbar button .icon { width: 16px; height: 16px; }
.tabbar button:hover { color: var(--tx-primary); }
.tabbar button.active { background: var(--pl-signal); color: var(--pl-ink); }

/* ---------- ჰერო ---------- */
.hero { display: grid; gap: var(--sp-4); }
.answer h1 { font-size: clamp(1.6rem, 5.5vw, var(--fs-display)); font-weight: var(--w-max);
  line-height: var(--lh-tight); letter-spacing: -0.02em; }
.answer p { color: var(--tx-secondary); margin-top: var(--sp-2); }
.answer.live h1 em { font-style: normal; color: var(--pl-signal); font-size: .55em; }
.livebar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.guestbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  background: var(--sur-card); border-radius: var(--rad-lg); padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-raised); }
.guestbar span { flex: 1; min-width: 200px; font-size: var(--fs-small); }
.nextcard { text-align: center; color: var(--tx-muted); padding: var(--sp-2) 0;
  display: grid; gap: 2px; }
.recap { display: grid; gap: 2px; text-align: left; width: 100%; cursor: pointer;
  background: var(--sur-card); border: 0; border-left: 3px solid var(--pl-signal);
  border-radius: var(--rad-lg); padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-raised); }
.recap b { font-size: 1.2rem; font-weight: var(--w-max); }
.recap:hover { box-shadow: var(--shadow-overlay); }
.tierstrip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  color: var(--tx-secondary); font-size: var(--fs-small); }
.favhint { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3);
  background: var(--sur-card); border-radius: var(--rad-lg); padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-small); color: var(--tx-secondary); }
.favhint .pl-label { color: var(--st-power); }
.mine-tag { color: var(--tx-muted); margin-right: 2px; }
.mrow.live .mine-tag { color: var(--pl-n800); }
.live-min .pl-label, .ft-score .pl-label { color: inherit; opacity: .7; margin-right: 4px; }
.setting.col { display: grid; gap: var(--sp-3); }
.setting-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.setting-head span { display: grid; gap: 2px; }
.setting-head small { color: var(--tx-muted); font-size: var(--fs-small); }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* ---------- ბენტო ---------- */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.bento.tight { grid-template-columns: repeat(2, 1fr); }
.widget { background: var(--sur-card); border-radius: var(--rad-xl);
  padding: var(--sp-4) var(--sp-6) var(--sp-6); box-shadow: var(--shadow-raised);
  display: grid; align-content: start; gap: var(--sp-2); min-width: 0; }
.widget.tappable { cursor: pointer; }
.widget.tappable:hover { box-shadow: var(--shadow-overlay); }
.widget .head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.widget .lbl { color: var(--tx-muted); }
.widget .val { font-size: var(--fs-value); font-weight: var(--w-max); line-height: var(--lh-tight); }
.widget .val.big { font-size: clamp(1.9rem, 6vw, var(--fs-display)); }
.widget .sub { font-size: var(--fs-small); color: var(--tx-muted); }
.widget.signal { background: var(--sur-signal); color: var(--tx-on-signal); }
.widget.signal .lbl, .widget.signal .sub { color: var(--pl-n800); }
.widget.signal .pl-tag.inv { color: var(--pl-signal); }
.widget.power { background: var(--sur-power); color: var(--tx-on-power); }
.widget.power .lbl, .widget.power .sub { color: #3b2761; }
.widget.power .pl-tag.inv { color: var(--pl-power); }
.widget.paper { background: var(--sur-paper); color: var(--tx-on-paper); }
.widget.paper .lbl, .widget.paper .sub { color: var(--pl-n600); }
.widget.tall { grid-row: span 2; }
.widget.span-all { grid-column: 1 / -1; }
.delta-up { color: var(--st-success); font-weight: var(--w-strong); }
.delta-dn { color: var(--st-error); font-weight: var(--w-strong); }
tr.me .delta-up, tr.me .delta-dn { color: var(--pl-ink); }

/* ---------- ვიზუალიზაციები ---------- */
.ringwrap { display: grid; place-items: center; position: relative; padding: var(--sp-3) 0; }
.ringwrap svg { width: min(190px, 46vw); height: min(190px, 46vw); }
.ringwrap svg circle.seg { transition: stroke-dasharray 900ms var(--ease-standard); }
.ringnum { position: absolute; text-align: center; }
.ringnum .n { font-size: 3rem; font-weight: var(--w-max); line-height: 1; }
.ringnum .u { font-size: var(--fs-label); color: var(--tx-muted);
  text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: var(--w-mid); }
.legend { display: grid; gap: var(--sp-2); }
.legend .li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-small); }
.legend .li .sw2 { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.legend .li b { margin-left: auto; font-weight: var(--w-max); }
.bars { display: flex; gap: var(--sp-3); padding-top: var(--sp-2); max-width: 560px; }
.bars .bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bars .bar .pct { font-size: var(--fs-label); font-weight: var(--w-strong); color: var(--tx-secondary); }
.bars .bar .plot { width: 100%; height: 100px; display: flex; align-items: flex-end; }
.bars .bar .col { width: 100%; border-radius: 8px 8px 4px 4px; background: var(--viz-b);
  position: relative; transition: height 700ms var(--ease-standard); }
.bars .bar .col.ex::after { content: ""; position: absolute; inset: 0 0 auto; height: 6px;
  border-radius: 8px; background: var(--viz-a); }
.bars .bar .gw { font-size: var(--fs-label); color: var(--tx-muted);
  text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: var(--w-mid); }
.bars-cap { display: block; margin-top: var(--sp-2); color: var(--tx-muted); }
.spark { width: 100%; height: 56px; }
.spark polyline { fill: none; stroke: var(--pl-ink); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round; }
.spark circle { fill: var(--pl-ink); }

/* ---------- მატჩები ---------- */
.card { background: var(--sur-card); border-radius: var(--rad-xl); overflow: hidden;
  box-shadow: var(--shadow-raised); padding: var(--sp-2); }
.mrow { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-4);
  align-items: center; padding: var(--sp-4); border-radius: var(--rad-lg); }
.mrow + .mrow { margin-top: var(--sp-1); }
.mrow > * { min-width: 0; }
.mrow.live { background: var(--sur-signal); color: var(--tx-on-signal); }
.mrow.void { opacity: .55; }
.teams { display: grid; gap: var(--sp-2); min-width: 0; }
.team { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.team .name { font-weight: var(--w-strong); overflow-wrap: break-word;
  flex: 1 1 auto; min-width: 0; }
.team .ge { flex: 0 0 auto; }
.team .ge { font-size: var(--fs-label); font-weight: var(--w-strong); color: var(--st-success);
  border: 1px solid currentColor; border-radius: var(--rad-pill); padding: 0 6px; }
.crest { flex: 0 0 var(--crest-size); width: var(--crest-size); height: var(--crest-size);
  border-radius: 50%; background: var(--sur-cell); border: 1px solid var(--pl-n700);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-label); font-weight: var(--w-max); color: var(--pl-n300); overflow: hidden; }
.mrow.live .crest { background: rgba(10, 12, 11, .16); color: var(--pl-ink); border-color: rgba(10, 12, 11, .25); }
.mrow.live .team .ge { color: var(--pl-ink); }
.mmeta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px var(--sp-4); min-width: 0; font-size: var(--fs-small); color: var(--tx-muted); }
.mrow.live .mmeta { color: var(--pl-n800); }
.mmeta .fav { color: var(--st-power); font-weight: var(--w-strong); }
.favbtn { background: none; border: 0; cursor: pointer; color: var(--tx-muted);
  font-size: 1.05rem; line-height: 1; padding: 2px 6px; border-radius: var(--rad-pill); }
.favbtn:hover { color: var(--st-power); background: var(--sur-cell); }
.mrow.live .favbtn:hover { background: rgba(10, 12, 11, .14); color: var(--pl-ink); }
.mrow.live .mmeta .fav { color: var(--pl-ink); }
.mmeta .alive { font-weight: var(--w-strong); }
.mrow .live-min { color: var(--pl-ink); font-weight: var(--w-max); font-size: var(--fs-body);
  display: inline-flex; align-items: center; gap: 6px; }
.mrow .live-min::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pl-ink); }
.ft-score { font-weight: var(--w-max); color: var(--tx-primary); }
.scorebox { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--w-max);
  background: none; border: 0; padding: 0; cursor: default; }
.scorebox.tappable { cursor: pointer; }
.scorebox .colon { color: var(--tx-muted); }
.scorebox .cell { width: 46px; height: 46px; border-radius: var(--rad-md);
  background: var(--sur-cell); border: 1px solid var(--pl-n700);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.scorebox .cell.empty { color: var(--tx-muted); border-style: dashed; background: transparent; }
.scorebox .cell.warn { border-color: var(--st-warning); }
.mrow.live .scorebox .cell { background: rgba(10, 12, 11, .14);
  border-color: rgba(10, 12, 11, .3); color: var(--pl-ink); }
.blind { color: var(--tx-muted); letter-spacing: 4px; font-weight: var(--w-max); }
.mrow-extra { grid-column: 1 / -1; padding-top: var(--sp-3); }

.picker { background: var(--sur-cell); border-radius: var(--rad-xl); padding: var(--sp-3);
  max-width: 340px; box-shadow: var(--shadow-raised); }
.picker .pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.picker button { font-weight: var(--w-strong); padding: 12px 0; background: var(--sur-card);
  color: var(--tx-primary); border: 0; border-radius: var(--rad-pill); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard); }
.picker button:hover { background: var(--pl-n700); }
.picker button.active { background: var(--pl-signal); color: var(--pl-ink); font-weight: var(--w-max); }
.picker .other { grid-column: 1 / -1; color: var(--tx-secondary); }
.picker .pcustom { display: grid; gap: var(--sp-3); }
.stepper { display: flex; align-items: center; gap: var(--sp-3); }
.stepper span { font-size: 1.4rem; font-weight: var(--w-max); min-width: 2ch; text-align: center; }
.stepper button { width: 40px; height: 40px; }

.detail { display: grid; gap: var(--sp-3); background: var(--sur-cell);
  border-radius: var(--rad-lg); padding: var(--sp-3) var(--sp-4); }
.mrow.live .detail { background: rgba(10, 12, 11, .1); }
.detail-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); font-size: var(--fs-small); }
.detail-line.col { flex-direction: column; align-items: stretch; }
.pick-pill { background: var(--sur-card); border-radius: var(--rad-pill); padding: 2px 10px; }
.distbar { display: flex; height: 26px; border-radius: var(--rad-pill); overflow: hidden; }
.distbar span { display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-label); font-weight: var(--w-strong); }
.distbar .h { background: var(--viz-a); color: var(--pl-ink); }
.distbar .d { background: var(--viz-track); color: var(--tx-primary); }
.distbar .a { background: var(--viz-b); color: var(--pl-ink); }

/* ---------- ცხრილები ---------- */
.segmented { display: flex; gap: var(--sp-1); background: var(--sur-card);
  border-radius: var(--rad-pill); padding: var(--sp-1); box-shadow: var(--shadow-raised);
  overflow-x: auto; }
.segmented button { flex: 1; white-space: nowrap; font-size: var(--fs-label);
  font-weight: var(--w-strong); text-transform: uppercase; letter-spacing: var(--ls-caps);
  background: none; border: 0; cursor: pointer; color: var(--tx-secondary);
  padding: 9px 14px; border-radius: var(--rad-pill); }
.segmented button.active { background: var(--pl-signal); color: var(--pl-ink); }
.segmented.scope button.active { background: var(--pl-bone); }
.tablecard { background: var(--sur-card); border-radius: var(--rad-xl);
  box-shadow: var(--shadow-raised); padding: var(--sp-2) var(--sp-2) var(--sp-3); overflow-x: auto; }
.windowline { font-size: var(--fs-label); font-weight: var(--w-mid); color: var(--tx-muted);
  text-transform: uppercase; letter-spacing: var(--ls-caps); padding: var(--sp-3) var(--sp-4); }
table { width: 100%; border-collapse: separate; border-spacing: 0 4px; }
thead th { text-align: right; padding: var(--sp-2) var(--sp-4); color: var(--tx-muted);
  font-size: var(--fs-label); font-weight: var(--w-mid);
  letter-spacing: var(--ls-caps); text-transform: uppercase; white-space: nowrap; }
thead th.l { text-align: left; }
tbody td { padding: var(--sp-3) var(--sp-4); text-align: right; font-weight: var(--w-strong);
  background: var(--sur-cell); }
tbody tr td:first-child { border-radius: var(--rad-md) 0 0 var(--rad-md); }
tbody tr td:last-child { border-radius: 0 var(--rad-md) var(--rad-md) 0; }
tbody td.l { text-align: left; }
tbody td.rank { color: var(--tx-muted); width: 52px; font-weight: var(--w-max); }
tbody td.pts { font-size: 1.1rem; font-weight: var(--w-max); }
tr.me td { background: var(--sur-signal); color: var(--pl-ink); }
tr.me td.rank { color: var(--pl-ink); }
.prov-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--st-live); }
.squad { background: var(--sur-card); border-radius: var(--rad-xl); padding: var(--sp-4) var(--sp-6);
  box-shadow: var(--shadow-raised); display: grid; gap: var(--sp-2); }
.squad ol { margin: 0; padding-left: var(--sp-6); display: grid; gap: 4px; }
.squad li { display: flex; justify-content: space-between; gap: var(--sp-3); }
.squad li.me { color: var(--pl-signal); font-weight: var(--w-max); }

.cup { display: grid; gap: var(--sp-4); }
.champ { display: flex; align-items: center; gap: var(--sp-3); background: var(--sur-signal);
  color: var(--pl-ink); border-radius: var(--rad-xl); padding: var(--sp-4) var(--sp-6); }
.champ b { font-size: 1.3rem; font-weight: var(--w-max); }
.round { background: var(--sur-card); border-radius: var(--rad-xl); padding: var(--sp-4) var(--sp-6);
  box-shadow: var(--shadow-raised); display: grid; gap: var(--sp-2); }
.tie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule-hair); }
.tie:last-child { border-bottom: 0; }
.tie .side { flex: 1; min-width: 120px; display: flex; justify-content: space-between; gap: var(--sp-2); }
.tie .side.win { color: var(--pl-signal); font-weight: var(--w-max); }
.tie .side.mine { text-decoration: underline; text-underline-offset: 3px; }
.tie .vs { color: var(--tx-muted); font-size: var(--fs-label); }
.tie .why { flex-basis: 100%; font-size: var(--fs-label); color: var(--tx-muted); }

/* ---------- ლიგები ---------- */
.league-forms { display: grid; gap: var(--sp-3); }
.form-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.input { flex: 1; min-width: 160px; background: var(--sur-card); border: 1px solid var(--rule-mid);
  border-radius: var(--rad-pill); padding: 11px 18px; }
.input::placeholder { color: var(--tx-muted); }
.league-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }
.league-detail { display: grid; gap: var(--sp-4); }
.detail-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.detail-head h2 { font-size: var(--fs-h2); font-weight: var(--w-max); }
.code { background: var(--sur-cell); border-radius: var(--rad-pill); padding: 6px 14px;
  font-weight: var(--w-max); letter-spacing: .1em; }
.member-picks { background: var(--sur-card); border-radius: var(--rad-xl); padding: var(--sp-4) var(--sp-6);
  box-shadow: var(--shadow-raised); display: grid; gap: var(--sp-2); }
.member-picks ul { list-style: none; padding: 0; display: grid; gap: 4px; }
.member-picks li { display: flex; justify-content: space-between; gap: var(--sp-3); }

/* ---------- პროფილი ---------- */
.idrow { display: flex; align-items: center; gap: var(--sp-4); }
.idrow > div { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.idrow b { font-size: 1.4rem; font-weight: var(--w-max); }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--sur-signal);
  color: var(--pl-ink); display: grid; place-items: center; font-size: 1.4rem; font-weight: var(--w-max); }
.explain { background: var(--sur-card); border-radius: var(--rad-xl); padding: var(--sp-4) var(--sp-6);
  box-shadow: var(--shadow-raised); display: grid; gap: var(--sp-2); }
.explain b { font-weight: var(--w-max); }
.hist, .activity { background: var(--sur-card); border-radius: var(--rad-xl);
  padding: var(--sp-4) var(--sp-6); box-shadow: var(--shadow-raised); display: grid; gap: var(--sp-3); }
.histlist { list-style: none; padding: 0; display: grid; gap: 4px; }
.histlist button { width: 100%; display: flex; justify-content: space-between; gap: var(--sp-3);
  background: var(--sur-cell); border: 0; border-radius: var(--rad-md); padding: var(--sp-3) var(--sp-4);
  cursor: pointer; font-weight: var(--w-strong); }
.histlist button:hover { background: var(--pl-n700); }
.actrow { display: flex; gap: var(--sp-6); }
.actrow b { font-size: 1.4rem; font-weight: var(--w-max); }
.trophies { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hist-total { display: flex; align-items: baseline; gap: var(--sp-3); }
.hist-total .big { font-size: var(--fs-display); font-weight: var(--w-max); }

/* ---------- ცარიელი / ბანერი / toast ---------- */
.empty { text-align: center; padding: var(--sp-8) var(--sp-6); background: var(--sur-card);
  border-radius: var(--rad-xl); box-shadow: var(--shadow-raised); color: var(--tx-secondary);
  display: grid; justify-items: center; gap: var(--sp-2); }
.empty b { font-size: 1.2rem; font-weight: var(--w-max); color: var(--tx-primary); }
.empty .mascot { height: 110px; width: auto; }
.banner { background: var(--sur-card); border-radius: var(--rad-lg); box-shadow: var(--shadow-raised);
  padding: var(--sp-4) var(--sp-6); display: grid; gap: 6px; justify-items: start; }
.banner b { font-weight: var(--w-max); }
.banner .body { font-size: var(--fs-small); color: var(--tx-secondary); }
.toast-slot { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 40; }
.toast { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--sur-paper);
  color: var(--pl-ink); border-radius: var(--rad-pill); padding: 10px 20px;
  box-shadow: var(--shadow-overlay); font-size: var(--fs-small); font-weight: var(--w-strong); }
.toast .paul { height: 15px; width: auto; }

/* ---------- ფურცელი ---------- */
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 50;
  display: grid; place-items: center; padding: var(--sp-4); overflow-y: auto; }
.sheet { background: var(--sur-card); border-radius: var(--rad-xl); width: min(560px, 100%);
  max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--shadow-overlay); }
.sheet.wide { width: min(760px, 100%); }
.sheet-head { display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--rule-hair); }
.sheet-head h2 { font-size: var(--fs-h2); font-weight: var(--w-max);
  text-transform: uppercase; letter-spacing: var(--ls-caps); }
.iconbtn { background: none; border: 0; cursor: pointer; font-size: 1.1rem; padding: 4px 8px;
  border-radius: var(--rad-pill); color: var(--tx-secondary); }
.iconbtn:hover { color: var(--tx-primary); background: var(--sur-cell); }
.sheet-body { padding: var(--sp-6); overflow-y: auto; display: grid; gap: var(--sp-4); }
body.sheet-open { overflow: hidden; }
.rules { display: grid; gap: var(--sp-3); padding-left: var(--sp-6); }
.rules li { line-height: var(--lh-body); }
.ruletable { display: grid; gap: var(--sp-3); }
.ruletable td { background: none; padding: var(--sp-2) var(--sp-3); text-align: left; }
.notif { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.notif li { display: grid; gap: 2px; background: var(--sur-cell); border-radius: var(--rad-lg);
  padding: var(--sp-3) var(--sp-4); }
.notif li.unread { box-shadow: inset 3px 0 0 var(--pl-signal); }
.notif b { font-weight: var(--w-max); }
.settings { display: grid; gap: var(--sp-3); }
.setting { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  background: var(--sur-cell); border-radius: var(--rad-lg); padding: var(--sp-3) var(--sp-4); }
.setting span { display: grid; gap: 2px; }
.setting small { color: var(--tx-muted); font-size: var(--fs-small); }
.setting.actions { flex-wrap: wrap; gap: var(--sp-2); }
.setting input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--pl-signal); }

/* ---------- რეგისტრაცია ---------- */
.onboarding { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-6) var(--sp-4); }
.ob-card { width: min(560px, 100%); background: var(--sur-card); border-radius: var(--rad-xl);
  box-shadow: var(--shadow-overlay); padding: var(--sp-8) var(--sp-6); display: grid; gap: var(--sp-4); }
.ob-logo { height: 34px; width: auto; justify-self: start; }
.ob-lede { color: var(--tx-secondary); }
.field { display: grid; gap: var(--sp-2); }
.muni-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-2); max-height: 260px; overflow-y: auto; }
.muni { text-align: left; background: var(--sur-cell); border: 1px solid transparent;
  border-radius: var(--rad-md); padding: 10px 14px; cursor: pointer; display: grid; gap: 2px; }
.muni small { color: var(--tx-muted); font-size: var(--fs-label); }
.muni:hover { border-color: var(--rule-mid); }
.muni.active { background: var(--pl-signal); color: var(--pl-ink); }
.muni.active small { color: var(--pl-n800); }
.check { display: flex; align-items: center; gap: var(--sp-3); }
.check input { width: 20px; height: 20px; accent-color: var(--pl-signal); }

/* ---------- გაზიარება ---------- */
.sharecard { background: var(--sur-card); border-radius: var(--rad-xl); padding: var(--sp-6);
  display: grid; gap: var(--sp-2); border: 1px solid var(--rule-hair); }
.sc-head { display: flex; align-items: center; gap: var(--sp-3); }
.sc-head img { height: 22px; width: auto; }
.sc-total { font-size: 3.4rem; font-weight: var(--w-max); line-height: 1; color: var(--pl-signal); }
.sc-row { display: flex; justify-content: space-between; gap: var(--sp-3);
  border-top: 1px solid var(--rule-hair); padding-top: var(--sp-2); }

/* ---------- სიმულაციის პულტი ---------- */
.simconsole { position: fixed; right: var(--sp-4); bottom: 96px; z-index: 30;
  display: grid; justify-items: end; gap: var(--sp-2); }
.sim-toggle { background: var(--sur-cell); color: var(--tx-secondary); border: 1px solid var(--rule-mid);
  border-radius: var(--rad-pill); padding: 7px 14px; cursor: pointer;
  font-size: var(--fs-label); font-weight: var(--w-strong); text-transform: uppercase;
  letter-spacing: var(--ls-caps); }
.sim-toggle:hover { color: var(--tx-primary); }
.sim-body { background: var(--sur-card); border-radius: var(--rad-lg); padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-overlay); display: grid; gap: var(--sp-2); width: 260px; }
.sim-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.spd { background: var(--sur-cell); border: 0; border-radius: var(--rad-pill); padding: 5px 11px;
  cursor: pointer; color: var(--tx-secondary); font-size: var(--fs-label); font-weight: var(--w-strong); }
.spd.active { background: var(--pl-signal); color: var(--pl-ink); }
.sim-note { font-size: var(--fs-label); color: var(--tx-muted); }

/* ---------- ქულის ჩიპი — ერთი ფორმა ყველგან (DESIGN.md: ერთი ანბანის წესი) ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px;
  border-radius: var(--rad-pill); font-weight: var(--w-max); font-size: var(--fs-small);
  position: relative; }
.chip.t8 { background: var(--tier8-bg); color: var(--tier8-tx); }
.chip.t5 { background: var(--tier5-bg); color: var(--tier5-tx); }
.chip.t3 { background: var(--tier3-bg); color: var(--tier3-tx); }
.chip.t0 { background: var(--tier0-bg); color: var(--tier0-tx); border: 1.5px solid var(--rule-mid); }
.chip.prov { border: 1.5px dashed var(--pl-n500); background: transparent; color: var(--tx-primary); }
.chip.prov .pd { width: 7px; height: 7px; border-radius: 50%; background: var(--st-live); }
.mrow.live .chip.t3 { background: rgba(10, 12, 11, .16); color: var(--pl-ink); }
.mrow.live .chip.t0 { color: var(--pl-n800); border-color: rgba(10, 12, 11, .35); }
.mrow.live .chip.prov { color: var(--pl-ink); border-color: rgba(10, 12, 11, .4); }
.mrow.live .chip.prov .pd { background: var(--pl-ink); }

/* ---------- ოდომეტრი და მოძრაობა ---------- */
.odo { display: inline-flex; overflow: hidden; height: 1em; line-height: 1;
  vertical-align: baseline; white-space: pre; }
.odo .d { display: inline-block; }
.odo .strip { display: flex; flex-direction: column; height: 1em; line-height: 1;
  transition: transform 620ms cubic-bezier(.34, 1.3, .3, 1); will-change: transform; }
.odo .strip span { height: 1em; display: block; }
@keyframes settle { 0% { transform: scale(1.25); opacity: 0; } 60% { transform: scale(.96); opacity: 1; } 100% { transform: scale(1); } }
.chip.settling { animation: settle var(--dur-settle) var(--ease-standard); }
@keyframes inksplash { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.8); } }
.chip { position: relative; }
.chip.t8.settling::after { content: ""; position: absolute; inset: -4px; border-radius: inherit;
  border: 2px solid var(--pl-signal); pointer-events: none;
  animation: inksplash var(--dur-settle) var(--ease-exit) forwards; }

@media (prefers-reduced-motion: reduce) {
  .odo .strip, .ringwrap svg circle.seg, .bars .bar .col { transition: none; }
  .topbar .dot.beat, .mrow .live-min::before, .chip.prov .pd { animation: none; }
  .chip.settling, .chip.t8.settling::after { animation: none; }
}

/* ---------- ადაპტაცია ---------- */
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .main { padding: var(--sp-4) var(--sp-3) var(--sp-8); }
  .bento, .bento.tight, .livebar { grid-template-columns: 1fr; }
  .widget.tall { grid-row: auto; }
  .topbar { gap: var(--sp-3); font-size: var(--fs-small); }
  .count-full { display: none; }
  .tabbar button .tab-word { display: none; }
  .scorebox .cell { width: 42px; height: 42px; }
  /* ვიწრო ეკრანზე გუნდის სახელს სრული ადგილი სჭირდება — ჭდე ქრება, სახელი არ იჭრება */
  .team .ge { display: none; }
  .team { gap: var(--sp-2); }
  .scrim { place-items: end stretch; padding: 0; }
  .sheet { border-radius: var(--rad-xl) var(--rad-xl) 0 0; max-height: 92vh; }
  .simconsole { bottom: 92px; right: var(--sp-3); }
  .sim-body { width: min(260px, calc(100vw - 24px)); }
}