:root {
  --paper: #f2f6f9;
  --white: #ffffff;
  --ink: #17262f;
  --navy: #0f2a3d;
  --ice: #d9e8f1;
  --muted: #6b7c87;
  --line: #dce5ea;
  --accent: #d9703a;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 14px/1.55 var(--sans); }
.shell { max-width: 1120px; margin: 0 auto; padding: 0 20px 40px; }
.site-auth-screen { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: radial-gradient(circle at 80% 15%, #3f7ea622, transparent 55%), linear-gradient(135deg, #0b2233, #1e4f6e 70%, #6aa5c4); }
.site-auth-card { width: min(100%, 440px); padding: clamp(24px, 5vw, 42px); border: 1px solid #ffffff55; border-radius: 6px; background: var(--paper); box-shadow: 0 20px 60px #08172455; }
.site-auth-card h1 { margin: 10px 0; color: var(--navy); font: 700 clamp(32px, 6vw, 44px)/1.1 var(--serif); }
.site-auth-card > p:not(.site-auth-error) { color: var(--muted); }
.site-login-form { display: grid; gap: 14px; margin-top: 22px; }
.site-login-form label { display: grid; gap: 5px; color: #43524b; font-size: 11px; font-weight: 700; }
.site-login-form input { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 4px; padding: 9px 10px; color: var(--ink); background: var(--white); font: 500 13px var(--sans); }
.site-login-form input:focus { outline: 2px solid #7da694; outline-offset: 1px; }
.site-login-form .btn { margin-top: 4px; }
.site-auth-error, .site-notice { padding: 10px; border: 1px solid #d99; color: #8a2525; background: #fff3f0; font-size: 12px; }
.site-account { display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding: 8px 2px; color: var(--muted); font-size: 11px; }
.site-notice { margin: 8px 0; }
.eyebrow { display: block; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

.hero { position: relative; min-height: 330px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; overflow: hidden; margin-top: 26px; padding: 37px 45px; color: #fff; border-radius: 6px;
  background: radial-gradient(circle at 80% 15%, #3f7ea6aa, transparent 55%), linear-gradient(135deg, #0b2233, #1e4f6e 70%, #6aa5c4); }
.hero::before, .hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#ffffffcc 1.5px, transparent 2px), radial-gradient(#ffffff88 1px, transparent 1.5px); background-size: 90px 110px, 47px 61px; background-position: 0 0, 20px 30px; opacity: .5; animation: snow 18s linear infinite; pointer-events: none; }
.hero::after { background-size: 130px 150px, 73px 83px; animation-duration: 28s; opacity: .35; }
@keyframes snow { to { background-position: -30px 110px, -10px 91px; } }
@media (prefers-reduced-motion: reduce) { .hero::before, .hero::after { animation: none; } }
.hero-copy, .hero-stats { position: relative; z-index: 1; }
.hero h1 { margin: 14px 0 10px; font: 700 clamp(40px, 6vw, 66px)/1 var(--serif); letter-spacing: -.03em; }
.hero h1 em { color: #a8d8f0; font-weight: 500; }
.hero-copy > p { margin: 0; color: #d3e4ee; }
.hero-stats { display: flex; gap: clamp(18px, 3.5vw, 44px); }
.hero-stats > div { display: grid; gap: 2px; text-align: center; }
.hero-stats b { font: 500 clamp(30px, 4vw, 44px)/1 var(--serif); }
.hero-stats span { color: #bcd3e0; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.hero-msg { font: 500 22px var(--serif); }

.tabbar { display: flex; gap: 24px; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--line); scrollbar-width: thin; position: sticky; top: 0; z-index: 5; background: var(--paper); }
.tab { position: relative; min-height: 58px; flex: none; display: flex; align-items: center; gap: 8px; border: 0; padding: 0 2px; color: var(--muted); background: transparent; font: inherit; font-size: 13px; cursor: pointer; }
.tab:hover, .tab[aria-selected="true"] { color: var(--navy); }
.tab[aria-selected="true"] { font-weight: 700; }
.tab[aria-selected="true"]::after { content: ''; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--navy); }
.tab small { color: #9aa8b1; font-size: 10px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 26px; }
.block { margin-top: 26px; padding: 26px 28px; background: var(--white); border: 1px solid var(--line); border-radius: 6px; }
.grid .block { margin-top: 0; }
.block h2 { margin: 4px 0 16px; font: 700 26px/1.15 var(--serif); color: var(--navy); }
.block h3 { margin: 20px 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.count { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.lead { margin: 0 0 12px; color: var(--muted); }

ul.plain { margin: 0; padding: 0; list-style: none; }
ul.plain li { padding: 9px 0; border-bottom: 1px solid var(--line); }
ul.plain li:last-child { border-bottom: 0; }
ul.bullets { margin: 0; padding-left: 20px; }
ul.bullets li { margin: 5px 0; }
ol.steps { margin: 0; padding-left: 22px; }
ol.steps li { margin: 7px 0; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 16px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 500; }
a { color: #1e6a96; }
.pill { display: inline-block; padding: 1px 9px; border-radius: 99px; background: var(--ice); color: var(--navy); font-size: 11px; font-weight: 700; }
.pill.hot { background: #fbe3d4; color: #8a3b10; }
.pill.ok { background: #d9eedd; color: #1d5a2d; }
.muted { color: var(--muted); }

.check { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.check:last-child { border-bottom: 0; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--navy); flex: none; }
.check input:checked + span { color: #8a98a1; text-decoration: line-through; }
.check .qty { flex: none; min-width: 26px; color: var(--accent); font-weight: 700; }
.check small { display: block; color: var(--muted); }
.check-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.check-row .check { flex: 1; min-width: 0; border-bottom: 0; }
.checklist-item-actions { display: flex; flex: none; gap: 12px; }
.checklist-delete { color: #a33; }
.checklist-manager { margin: 18px 0; padding: 14px; border: 1px solid var(--line); background: var(--white); }
.checklist-add-form, .checklist-edit-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; gap: 12px; margin-top: 14px; }
.checklist-edit-form { grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); width: 100%; margin: 0; padding: 12px; background: #f8fafb; }
.checklist-add-form label, .checklist-edit-form label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.checklist-add-form input, .checklist-add-form select, .checklist-edit-form input, .checklist-edit-form select { min-width: 0; width: 100%; min-height: 38px; border: 1px solid var(--line); padding: 8px; color: var(--ink); background: var(--white); font: inherit; }
.checklist-form-actions { display: flex; align-items: center; gap: 12px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.total td { font-weight: 700; border-bottom: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.chip { border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px; background: var(--white); font: inherit; cursor: pointer; color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.progress { height: 6px; margin: 0 0 14px; border-radius: 9px; background: var(--ice); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--navy); transition: width .2s; }
.btn { display: inline-block; padding: 9px 16px; border: 0; border-radius: 4px; background: var(--navy); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--navy); }
.card-row { display: grid; grid-template-columns: 110px 1fr; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.card-row:last-child { border-bottom: 0; }
.card-row b { color: var(--navy); }
.finance-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(270px, .8fr); gap: clamp(26px, 5vw, 66px); padding: 36px 0 20px; }
.finance-main .heading { margin-bottom: 14px; }
.finance-main h2 { margin: 4px 0 0; color: var(--ink); font: 700 36px/1.12 var(--serif); }
.expense-summary { display: grid; grid-template-columns: minmax(135px, .8fr) minmax(180px, 1.2fr); gap: 19px; margin-bottom: 24px; border: 1px solid var(--line); padding: 18px; background: #e9eee9; }
.expense-total { display: grid; align-content: center; gap: 8px; border-right: 1px solid #ccd7d0; padding-right: 15px; }
.expense-total > span { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.expense-total strong { color: var(--navy); font: 500 29px/1 var(--serif); }
.expense-total small { color: var(--muted); font-size: 10px; }
.participant-balances { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; align-content: center; }
.participant-balances > div { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; font-size: 10px; }
.participant-balances small { color: var(--muted); white-space: nowrap; }
.participant-balances strong { color: var(--muted); font-size: 10px; white-space: nowrap; }
.participant-balances strong.owes { color: #a75525; }
.participant-balances strong.owed { color: #256b4e; }
.reimbursements { margin-bottom: 20px; border: 1px solid var(--line); padding: 18px; background: var(--white); }
.reimbursements h3 { margin: 0 0 4px; color: var(--ink); font: 500 22px/1.2 var(--serif); letter-spacing: 0; text-transform: none; }
.reimbursements > p { margin: 0 0 12px; font-size: 11px; }
.transfer-row { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding: 10px 0; font-size: 11px; }
.transfer-row strong { white-space: nowrap; }
.finance-private { color: var(--muted); font-size: 11px; }
.expense-list { margin-top: 18px; border-top: 1px solid var(--line); }
.expense-row { min-height: 64px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding: 10px 3px; }
.expense-icon { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: #eee5d8; }
.expense-description { flex: 1; font-size: 12px; font-weight: 700; }
.expense-description small { display: block; color: var(--muted); font-size: 10px; font-weight: 400; }
.expense-row > strong { font-size: 11px; white-space: nowrap; }
.delete-button { border: 0; padding: 5px; color: var(--muted); background: transparent; font-size: 18px; line-height: 1; cursor: pointer; }
.delete-button:hover { color: #a33; }
.finance-aside { align-self: start; }
.finance-auth-wrap { display: flex; justify-content: center; padding: 36px 0; }
.finance-auth-wrap .finance-form-card { width: min(100%, 450px); }
.finance-auth-wrap h2 { margin: 5px 0 12px; color: var(--navy); font: 700 30px/1.15 var(--serif); }
.finance-form-card { padding: 22px; border: 1px solid var(--line); background: var(--white); }
.finance-form-card h3 { margin: 5px 0 14px; color: var(--ink); font: 500 23px/1.2 var(--serif); }
.expense-form { display: grid; gap: 13px; }
.expense-form label { display: grid; gap: 5px; color: #43524b; font-size: 10px; font-weight: 700; }
.expense-form input, .expense-form select { width: 100%; min-height: 40px; border: 1px solid #d9ddd5; border-radius: 0; padding: 9px 10px; color: var(--ink); background: #fffefa; font: 500 11px var(--sans); }
.expense-form input:focus, .expense-form select:focus { outline: 2px solid #7da694; outline-offset: 1px; }
.amount-input { display: flex; align-items: center; border: 1px solid #d9ddd5; background: #fffefa; }
.amount-input > span { padding-left: 10px; color: var(--muted); font-size: 12px; }
.amount-input input { border: 0; }
.amount-input input:focus { outline: 0; }
.form-hint { color: var(--muted); font-size: 10px; }
.submit-expense { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 46px; margin-top: 2px; border-radius: 0; background: #174635; font-size: 11px; }
.submit-expense:hover { background: #0f382a; }
.finance-error { padding: 10px; border: 1px solid #d99; color: #8a2525; background: #fff3f0; font-size: 12px; }
.finance-account { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; color: var(--muted); font-size: 10px; }
.text-button { border: 0; padding: 4px 0; color: #1e6a96; background: transparent; font: inherit; font-size: 11px; text-decoration: underline; cursor: pointer; }
.footer { margin-top: 36px; color: var(--muted); font-size: 12px; text-align: center; }

@media (max-width: 700px) {
  .shell { padding: 0 12px 30px; }
  .hero { padding: 26px 20px; min-height: 300px; }
  .block { padding: 20px 16px; }
  .kv, .card-row { grid-template-columns: 1fr; }
  .tabbar { gap: 16px; }
  .finance-layout { grid-template-columns: 1fr; gap: 22px; padding-top: 24px; }
  .expense-summary { grid-template-columns: 1fr; gap: 14px; }
  .expense-total { border-right: 0; border-bottom: 1px solid #ccd7d0; padding: 0 0 13px; }
  .participant-balances { grid-template-columns: 1fr; }
  .check-row { align-items: flex-start; gap: 4px; flex-wrap: wrap; }
  .check-row .check { width: 100%; }
  .checklist-item-actions { padding: 0 0 8px 28px; }
  .checklist-edit-form { grid-template-columns: 1fr; }
}