:root { color-scheme: light; --ink:#102a43; --muted:#627d98; --line:#d9e2ec; --paper:#f7fafc; --panel:#ffffff; --blue:#2f80b7; --blue-dark:#1e5f8c; --green:#18866b; --green-pale:#e9f7f1; --orange-pale:#fff2db; --red:#b42318; --shadow:0 18px 55px rgba(16,42,67,.09); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); }
button, input, select { font:inherit; }
.shell { width:min(1180px, calc(100% - 32px)); margin:0 auto; padding:28px 0 56px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
h1, h2, h3, p { margin:0; }
h1 { font-size:clamp(1.8rem, 3vw, 2.6rem); letter-spacing:-.04em; }
h2 { font-size:clamp(2rem, 4vw, 3.6rem); max-width:720px; letter-spacing:-.06em; line-height:1; }
h3 { font-size:1.3rem; letter-spacing:-.03em; }
.eyebrow { color:var(--blue-dark); font-size:.72rem; font-weight:800; letter-spacing:.16em; margin-bottom:8px; }
.muted, .helper { color:var(--muted); }
.helper { font-size:.84rem; }
.hero { display:flex; align-items:end; justify-content:space-between; gap:28px; padding:34px; border-radius:26px; color:#fff; background:linear-gradient(120deg,#102a43 0%,#195a7c 70%,#1d806b 100%); box-shadow:var(--shadow); }
.hero .eyebrow { color:#b9e6da; }
.hero .muted { color:#dbeaf2; max-width:650px; margin-top:16px; line-height:1.55; }
.hero-note { min-width:230px; padding:18px; border:1px solid rgba(255,255,255,.22); border-radius:18px; background:rgba(255,255,255,.1); }
.hero-note span { display:block; font-size:.75rem; color:#b9e6da; margin-bottom:9px; }
.hero-note strong { font-size:1.15rem; }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:16px 0; }
.metric-card, .panel { background:var(--panel); border:1px solid var(--line); border-radius:20px; box-shadow:0 7px 26px rgba(16,42,67,.05); }
.metric-card { padding:20px 22px; }
.metric-card span { display:block; color:var(--muted); font-size:.85rem; }
.metric-card strong { display:block; margin-top:7px; font-size:1.75rem; letter-spacing:-.04em; }
.layout-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:16px; margin:16px 0; }
.lower-grid { grid-template-columns:1fr 1fr; }
.panel { padding:22px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }
.participants-form { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
label { display:grid; gap:7px; color:var(--muted); font-size:.83rem; font-weight:650; }
input, select { width:100%; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); padding:11px 12px; outline:none; }
input:focus, select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(47,128,183,.14); }
.participants-form label { grid-template-columns:24px 1fr; align-items:center; color:var(--blue-dark); }
.participants-form input { grid-column:2; }
.button { border:0; border-radius:10px; padding:11px 15px; cursor:pointer; font-weight:750; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.button:hover { transform:translateY(-1px); }
.button.primary { color:white; background:var(--green); box-shadow:0 8px 18px rgba(24,134,107,.18); }
.button.secondary { color:var(--blue-dark); background:#e9f3f8; }
.button.ghost { color:var(--blue-dark); background:transparent; border:1px solid var(--line); }
.settings-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.settings-form label:last-of-type { grid-column:span 2; }
.settings-form .button { grid-column:span 2; justify-self:start; }
.expense-panel { padding:24px; }
.expense-form { display:grid; grid-template-columns:1.05fr 1.7fr 1.25fr .85fr .85fr; gap:13px; align-items:end; }
.expense-form .wide { min-width:0; }
.beneficiary-field { grid-column:span 3; }
.field-label { color:var(--muted); font-size:.83rem; font-weight:650; margin-bottom:7px; }
.check-pill { display:inline-flex; grid-template-columns:auto 1fr; align-items:center; gap:8px; padding:9px 11px; border-radius:10px; border:1px solid var(--line); background:#f8fbfd; color:var(--ink); font-size:.84rem; margin-right:7px; }
.check-pill input { width:auto; accent-color:var(--green); }
.all-pill { background:var(--green-pale); border-color:#b9e6d8; }
.link-button { border:0; padding:0; background:transparent; color:var(--blue-dark); cursor:pointer; font-weight:700; }
.beneficiary-list { margin-top:10px; }
.submit-expense { align-self:end; }
.form-error { min-height:20px; color:var(--red); font-size:.84rem; grid-column:1 / -1; }
.flash { color:var(--green); padding:12px 16px; margin:14px 0; border-radius:10px; background:var(--green-pale); }
.balance-list, .transfer-list { display:grid; gap:2px; }
.balance-row, .transfer-row { display:grid; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #edf2f6; }
.balance-row { grid-template-columns:1fr auto; }
.positive { color:var(--green); }.negative { color:var(--red); }.neutral { color:var(--muted); }
.transfer-row { grid-template-columns:1fr auto 1fr auto; }
.arrow { color:var(--muted); text-align:center; }.transfer-amount { color:var(--green); font-weight:800; }
.expense-list-panel { margin-top:16px; }
.expense-list { display:grid; gap:8px; }
.expense-row { display:grid; grid-template-columns:110px 1fr auto auto; align-items:center; gap:16px; padding:14px; border:1px solid #edf2f6; border-radius:14px; }
.expense-date { color:var(--muted); font-size:.86rem; }.expense-main { display:grid; gap:4px; }.expense-main span, .expense-main small { color:var(--muted); font-size:.82rem; }.expense-amount { display:grid; gap:4px; text-align:right; }.expense-amount span { color:var(--green); font-size:.82rem; }.icon-button { width:32px; height:32px; border:0; border-radius:50%; color:var(--red); background:#fff0ee; cursor:pointer; font-size:1.25rem; }.empty-state { color:var(--muted); padding:20px 0; text-align:center; }
.login-card { width:min(430px, calc(100% - 32px)); margin:12vh auto; padding:40px; border:1px solid var(--line); border-radius:26px; background:#fff; box-shadow:var(--shadow); }.brand-mark { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; color:#fff; background:var(--green); font-weight:900; font-size:1.4rem; margin-bottom:22px; }.login-card h1 { margin-bottom:12px; }.stack-form { display:grid; gap:16px; margin-top:25px; }.stack-form .button { width:100%; }.stack-form .form-error { margin:0; }.login-card .muted { line-height:1.5; }
@media (max-width: 900px) { .hero { align-items:start; flex-direction:column; }.hero-note { width:100%; }.layout-grid, .lower-grid { grid-template-columns:1fr; }.expense-form { grid-template-columns:repeat(2,1fr); }.expense-form .wide, .beneficiary-field { grid-column:span 2; }.submit-expense { grid-column:span 2; } }
@media (max-width: 600px) { .shell { width:min(100% - 20px, 1180px); padding-top:16px; }.topbar { align-items:start; }.topbar .button { padding:9px 10px; }.hero, .panel { padding:18px; border-radius:18px; }.metric-grid { grid-template-columns:1fr; }.participants-form, .settings-form, .expense-form { grid-template-columns:1fr; }.expense-form .wide, .beneficiary-field, .submit-expense, .settings-form label:last-of-type, .settings-form .button { grid-column:span 1; }.expense-row { grid-template-columns:1fr auto; gap:8px 14px; }.expense-date { grid-column:1 / -1; }.expense-main { grid-column:1; }.expense-amount { grid-column:2; grid-row:2; }.icon-button { grid-column:2; justify-self:end; }.transfer-row { grid-template-columns:1fr auto 1fr; }.transfer-amount { grid-column:1 / -1; text-align:right; }.panel-heading { align-items:start; flex-direction:column; gap:10px; } }