:root {
  color-scheme: light;
  --bg: #f8f9fc;
  --paper: #fff;
  --text: #161c2d;
  --muted: #60697d;
  --soft: #747e93;
  --line: #e2e6ef;
  --accent: #315cfa;
  --accent-ink: #2450e5;
  --accent-bg: #e9efff;
  --on-accent: #fff;
  --danger: #c22b47;
  --warm: #9b5b1c;
  --warm-bg: #f8ebdc;
  --done: #4a7965;
  --shadow: 0 24px 90px #222e4d28;
  --edge: 32px;
  --bottom: max(12px, env(safe-area-inset-bottom), var(--tg-content-safe-area-inset-bottom, 0px));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #151925;
  --paper: #1d2332;
  --text: #f1f4ff;
  --muted: #aeb8cf;
  --soft: #9ba7c0;
  --line: #30394d;
  --accent: #7392ff;
  --accent-ink: #9eb3ff;
  --accent-bg: #283858;
  --on-accent: #101b43;
  --danger: #ff8398;
  --warm: #ffd1a0;
  --warm-bg: #42352b;
  --done: #91c2ad;
  --shadow: 0 24px 90px #0006;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: var(--bg); font-size: 15px; }
button, input, textarea { font: inherit; color: inherit; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button { border: 0; padding: 0; background: none; cursor: pointer; }
button:disabled { opacity: .52; cursor: default; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
a { color: var(--accent-ink); text-decoration: none; }
[hidden] { display: none !important; }
svg { display: block; flex: none; }
h1, h2, h3, p { margin: 0; }
img { display: block; width: 100%; object-fit: cover; }
.shell { width: min(100%, 672px); min-height: 100dvh; margin: auto; }
.top {
  display: flex; align-items: center; justify-content: space-between; height: 78px;
  padding-inline: var(--edge); gap: 12px;
}
.top-left, .top-actions, .brand { display: flex; align-items: center; gap: 8px; }
.brand img { width: 35px; height: 35px; border-radius: 10px; }
.brand { gap: 10px; font-size: 15px; font-weight: 750; letter-spacing: -.025em; }
.avatar {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  font-weight: 740; font-size: 12px; letter-spacing: .015em; color: var(--accent-ink); background: var(--accent-bg);
}
.icon {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px;
  color: var(--muted); transition: background .15s, color .15s, transform .15s;
}
.icon:active, .icon[aria-pressed=true] { background: var(--accent-bg); color: var(--accent-ink); }
.icon:active, .primary:active { transform: scale(.95); }
.icon.accent, .primary {
  color: var(--on-accent); background: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.icon.accent { width: 48px; height: 48px; }
.primary { min-height: 48px; padding: 0 18px; border-radius: 12px; font-weight: 700; transition: transform .15s; }
.primary.danger { color: white; background: #bc2b47; }
.primary.secondary { background: var(--accent-bg); color: var(--accent-ink); }
.danger-text { color: var(--danger) !important; }
.back { margin-inline-start: -11px; }
#main { padding: 0 var(--edge) 36px; }
.has-dock #main { padding-bottom: 105px; }
.hero { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 30px 0 22px; }
h1 { font-size: clamp(38px, 8.7vw, 60px); line-height: .99; font-weight: 780; letter-spacing: -.072em; overflow-wrap: anywhere; }
.hero .icon { margin-bottom: 1px; }
.detail-hero { padding: 19px 0 22px; }
.detail-hero h1 { font-size: clamp(34px, 7vw, 52px); line-height: 1.03; }
.cover { width: 100%; aspect-ratio: 3.3; border-radius: 14px; margin-bottom: 21px; background: var(--accent-bg); }
.line { border-top: 1px solid var(--line); }
.rows { margin: 0; padding: 0; list-style: none; }
.list-row {
  min-height: 78px; width: 100%; display: flex; align-items: center; gap: 13px; text-align: start;
  border-bottom: 1px solid var(--line); transition: background .15s;
}
.list-mark {
  width: 43px; height: 43px; flex: none; display: grid; place-items: center;
  border-radius: 12px; color: var(--accent-ink); background: var(--accent-bg); overflow: hidden;
}
.list-mark.budget { color: var(--warm); background: var(--warm-bg); }
.list-mark img { width: 100%; height: 100%; }
.list-copy, .person-copy { min-width: 0; flex: 1; }
.list-title, .person-name { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; line-height: 1.28; display: block; }
.list-meta, .person-meta { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 550; }
.list-meta svg { width: 15px; height: 15px; }
.progress { display: flex; align-items: center; gap: 11px; color: var(--soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.progress.finished { color: var(--done); }
.empty {
  min-height: min(49dvh, 350px); display: grid; place-content: center; justify-items: center;
  text-align: center; color: var(--muted); gap: 16px; padding: 28px 10px;
}
.empty p { font-size: 15px; font-weight: 600; }
.empty-drawing { color: var(--accent-ink); opacity: .75; }
.loading { min-height: 55dvh; display: grid; place-items: center; }
.spinner {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line);
  border-top-color: var(--accent); animation: spin .72s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.tabs { display: flex; align-items: stretch; gap: 24px; border-bottom: 1px solid var(--line); }
.tab {
  font-weight: 690; color: var(--muted); padding: 12px 1px; border-bottom: 2px solid transparent;
  margin-bottom: -1px; min-height: 44px;
}
.tab[aria-selected=true] { color: var(--accent-ink); border-bottom-color: var(--accent); }
.section-title {
  display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted);
  font-weight: 690; margin: 22px 0 5px;
}
.section-title span { color: var(--soft); font-size: 12px; font-weight: 580; }
.item-row {
  display: flex; align-items: center; gap: 4px; min-height: 62px;
  border-bottom: 1px solid var(--line); border-radius: 3px;
  touch-action: pan-y; transition: background .14s, transform .16s;
}
.item-row.swiping { background: var(--accent-bg); transition: none; }
.check {
  width: 42px; height: 48px; display: grid; place-items: center;
  flex: none; margin-inline-start: -9px; border-radius: 10px;
}
.check span {
  width: 22px; height: 22px; border: 1.5px solid var(--soft); border-radius: 7px;
  display: grid; place-items: center; transition: background .14s, border-color .14s;
}
.check span svg { opacity: 0; }
.check[aria-checked=true] span { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.check[aria-checked=true] span svg { opacity: 1; }
.item-content {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; min-height: 61px; width: 100%; text-align: start;
}
.item-copy { display: block; min-width: 0; padding-block: 9px; }
.item-name { display: block; font-size: 16px; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.item-row.is-done .item-name { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.item-meta { display: flex; gap: 6px; align-items: center; font-size: 12px; margin-top: 4px; color: var(--muted); }
.item-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amount { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 690; }
.item-row.is-done .amount { color: var(--muted); }
.totals { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 26px 0 24px; border-bottom: 1px solid var(--line); }
.total-cell + .total-cell { border-inline-start: 1px solid var(--line); padding-inline-start: 22px; }
.total-cell span { display: block; font-size: 12px; font-weight: 630; color: var(--muted); }
.total-cell strong { display: block; font-size: clamp(20px, 5.3vw, 36px); letter-spacing: -.06em; margin-top: 4px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.total-cell:first-child strong { color: var(--accent-ink); }
.expense-group { padding: 16px 0 13px; border-bottom: 1px solid var(--line); }
.expense-head, .expense-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.expense-head { font-weight: 700; font-size: 15px; }
.expense-head span:first-child, .expense-item span:first-child { min-width: 0; overflow-wrap: anywhere; }
.expense-item { padding-top: 8px; font-size: 13px; color: var(--muted); }
.expense-item .amount { font-weight: 550; }
#dock {
  position: fixed; z-index: 2; inset: auto 0 0; margin-inline: auto; width: min(100%, 672px);
  padding: 10px var(--edge) var(--bottom); background: var(--bg);
}
.composer { display: flex; align-items: center; gap: 9px; padding-top: 10px; border-top: 1px solid var(--line); }
.field, .quick-field {
  width: 100%; min-width: 0; display: block; border: 1px solid var(--line); border-radius: 11px;
  background: var(--bg); color: var(--text); font-size: 16px; padding: 11px 12px; line-height: 1.35;
}
.field::placeholder, .quick-field::placeholder { color: var(--soft); opacity: 1; }
.quick-field { height: 46px; background: var(--paper); }
.quick-price { width: 84px; flex: none; }
.composer .icon { width: 46px; height: 46px; }
dialog {
  background: var(--paper); color: var(--text); margin: auto; padding: 0; border: 0; border-radius: 20px;
  width: min(440px, calc(100% - 32px)); max-height: min(88dvh, 740px);
  box-shadow: var(--shadow); overscroll-behavior: contain;
}
dialog[open] { animation: appear .18s ease-out; }
dialog::backdrop { background: #0e162962; }
@keyframes appear { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.sheet-inner { padding: 19px 24px 24px; }
.sheet-head { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 13px; }
.sheet-head h2 { font-size: 24px; font-weight: 770; letter-spacing: -.04em; overflow-wrap: anywhere; }
.sheet-head .icon { margin-inline-end: -10px; }
.form-stack { display: grid; gap: 13px; }
.label { display: grid; gap: 5px; font-size: 12px; font-weight: 670; color: var(--muted); }
.label textarea { resize: vertical; min-height: 74px; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice, .currency {
  display: flex; justify-content: center; align-items: center; gap: 7px; min-height: 44px; border-radius: 10px;
  border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 650;
}
.choice[aria-pressed=true], .currency[aria-pressed=true] { color: var(--accent-ink); background: var(--accent-bg); border-color: transparent; }
.currencies { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.menu-row {
  display: flex; align-items: center; width: 100%; min-height: 50px; gap: 11px;
  text-align: start; font-weight: 630; border-top: 1px solid var(--line);
}
.menu-row svg { color: var(--muted); }
.menu-row.danger-text svg { color: inherit; }
.person-row { display: flex; align-items: center; gap: 9px; min-height: 57px; border-bottom: 1px solid var(--line); }
.person-row .icon:last-child { margin-inline-end: -9px; }
.person-meta { margin-top: 2px; }
.people-actions { display: flex; gap: 8px; margin-top: 16px; }
.people-actions .primary { flex: 1; }
.invite-status { color: var(--muted); font-size: 13px; line-height: 1.4; }
.invite-options { display: flex; gap: 8px; }
.invite-options .primary { flex: 1; }
.check-label { display: flex; align-items: center; gap: 9px; min-height: 42px; color: var(--muted); font-weight: 630; }
.check-label input { width: 17px; height: 17px; accent-color: var(--accent); }
.photo-preview { aspect-ratio: 2; border-radius: 10px; background: var(--accent-bg); }
.detail-tools { display: flex; align-items: center; gap: 3px; }
.detail-tools .end { margin-inline-start: auto; }
.fine, .read-note { font-size: 13px; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.read-note { color: var(--text); white-space: pre-wrap; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.toast {
  position: fixed; z-index: 5; left: 50%; bottom: calc(76px + var(--bottom)); transform: translate(-50%, 8px);
  opacity: 0; pointer-events: none; max-width: calc(100% - 38px); width: max-content;
  padding: 10px 14px; border-radius: 10px; color: var(--paper); background: var(--text);
  font-size: 13px; font-weight: 600; text-align: center; transition: transform .18s, opacity .18s;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
dialog .toast { bottom: calc(12px + var(--bottom)); }
@media (max-width: 560px) {
  :root { --edge: 21px; }
  .top { height: 63px; }
  .hero { padding-top: 24px; }
  .detail-hero { padding-top: 13px; }
  dialog { margin: auto 0 0; width: 100%; max-width: none; border-radius: 19px 19px 0 0; max-height: 88dvh; }
  .sheet-inner { padding-bottom: calc(14px + var(--bottom)); }
}
@media (max-width: 360px) {
  :root { --edge: 15px; }
  .quick-price { width: 69px; }
}
@media (hover: hover) {
  .icon:not(.accent):hover { background: var(--accent-bg); color: var(--accent-ink); }
  .list-row:hover, .menu-row:hover { color: var(--accent-ink); }
  .item-content:hover .item-name { color: var(--accent-ink); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}