/* Self-host Vietnamese and basic Latin subsets so glyphs never mix fonts. */
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-display: swap; font-weight: 400; src: url("/fonts/be-vietnam-pro-vietnamese-400-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-display: swap; font-weight: 400; src: url("/fonts/be-vietnam-pro-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-display: swap; font-weight: 500; src: url("/fonts/be-vietnam-pro-vietnamese-500-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-display: swap; font-weight: 500; src: url("/fonts/be-vietnam-pro-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-display: swap; font-weight: 600; src: url("/fonts/be-vietnam-pro-vietnamese-600-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-display: swap; font-weight: 600; src: url("/fonts/be-vietnam-pro-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-display: swap; font-weight: 700; src: url("/fonts/be-vietnam-pro-vietnamese-700-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-display: swap; font-weight: 700; src: url("/fonts/be-vietnam-pro-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --primary: #245cc8;
  --primary-pressed: #1f53ae;
  --blue: #4285f4;
  --blue-soft: #ddebff;
  --amber: #f9ae09;
  --amber-soft: #fff0b8;
  --coral: #ff7b6b;
  --background: #f8fbff;
  --surface: #fff;
  --text: #18243d;
  --text-secondary: #43516e;
  --muted: #68758c;
  --border: #cbd5e1;
  --success: #218a5a;
  --error: #d63b32;
  --shadow: 0 6px 20px rgba(31,83,174,.10);
  --content: 1120px;
}

* { box-sizing: border-box; }
html { background: var(--background); color: var(--text); font-family: "Be Vietnam Pro", Arial, sans-serif; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
select:not([multiple]) { appearance: none; -webkit-appearance: none; min-height: 52px; padding: 12px 44px 12px 14px; border: 1px solid var(--border); border-radius: 14px; background-color: var(--surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2368758c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; color: var(--text); cursor: pointer; }
select:not([multiple]):focus { border-color: var(--primary); outline: 2px solid color-mix(in srgb,var(--primary) 25%,transparent); outline-offset: 1px; }
.custom-select-native { height: 1px !important; margin: 0 !important; opacity: 0 !important; overflow: hidden !important; padding: 0 !important; pointer-events: none; position: absolute !important; width: 1px !important; }
.custom-select { display: block; min-width: 0; position: relative; width: 100%; }
.custom-select-trigger { align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; color: var(--text); cursor: pointer; display: flex; gap: 12px; min-height: 52px; padding: 11px 14px; text-align: left; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; width: 100%; }
.custom-select-trigger:hover { border-color: color-mix(in srgb,var(--primary) 55%,var(--border)); }
.custom-select-trigger:focus-visible,.custom-select.is-open .custom-select-trigger { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent); outline: none; }
.custom-select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-chevron { border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; flex: 0 0 auto; height: 8px; margin: -4px 3px 0 0; opacity: .65; transform: rotate(45deg); transition: transform .18s ease; width: 8px; }
.custom-select.is-open .custom-select-chevron { margin-top: 4px; transform: rotate(225deg); }
.custom-select-menu { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 18px 50px rgba(20,35,65,.18),0 4px 14px rgba(20,35,65,.10); box-sizing: border-box; display: grid; gap: 3px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 7px; position: fixed; z-index: 1000; }
.custom-select-group { color: var(--muted); display: block; font-size: 12px; font-weight: 700; letter-spacing: .045em; padding: 10px 11px 5px; text-transform: uppercase; }
.custom-select-option { align-items: center; background: transparent; border: 0; border-radius: 11px; color: var(--text); cursor: pointer; display: flex; font-size: 14px; line-height: 1.4; min-height: 44px; overflow-wrap: anywhere; padding: 10px 38px 10px 11px; position: relative; text-align: left; white-space: normal; width: 100%; }
.custom-select-option:hover,.custom-select-option:focus-visible { background: var(--blue-soft); color: var(--primary-pressed); outline: none; }
.custom-select-option.is-selected { background: color-mix(in srgb,var(--primary) 10%,var(--surface)); color: var(--primary); font-weight: 700; }
.custom-select-option.is-selected::after { border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; content: ''; height: 10px; position: absolute; right: 15px; top: 14px; transform: rotate(45deg); width: 5px; }
.custom-select-option:disabled { cursor: not-allowed; opacity: .45; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
.app-shell { min-height: 100vh; padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
.app-header { align-items: center; display: flex; height: 72px; justify-content: space-between; margin: auto; max-width: var(--content); padding: 12px 20px; }
.wordmark { align-items: baseline; display: flex; font-family: "Be Vietnam Pro", Arial, sans-serif; font-size: 25px; font-weight: 700; gap: 5px; letter-spacing: -.04em; }
.wordmark small { color: var(--muted); font-family: "Be Vietnam Pro", sans-serif; font-size: 10px; font-weight: 600; }
.wordmark-icon { align-self: center; flex: 0 0 36px; width: 36px; height: 36px; object-fit: contain; }
.avatar, .member-avatar { align-items: center; background: var(--primary); border: 0; border-radius: 999px; color: white; display: inline-flex; flex: 0 0 auto; font-size: 12px; font-weight: 600; height: 42px; justify-content: center; width: 42px; }
.avatar-large { font-size: 19px; height: 64px; width: 64px; }
.page { margin: auto; max-width: var(--content); padding: 8px 20px 32px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Be Vietnam Pro", Arial, sans-serif; letter-spacing: -.035em; }
h1 { font-size: clamp(28px, 6vw, 40px); line-height: 1.12; margin-bottom: 12px; }
h2 { font-size: 23px; margin-bottom: 0; }
h3 { font-size: 19px; }
.eyebrow { color: var(--primary); font-size: 12px; font-weight: 600; letter-spacing: .08em; margin-bottom: 6px; text-transform: uppercase; }
.caption, small { color: var(--muted); font-size: 12px; }
.hero-card { align-items: center; background: linear-gradient(135deg, #eaf3ff, #fff8df); border: 1px solid rgba(36,92,200,.08); border-radius: 28px; display: flex; min-height: 310px; overflow: hidden; padding: 28px 30px; position: relative; }
.hero-copy { max-width: 560px; position: relative; width: 62%; z-index: 1; }
.hero-copy > p:not(.eyebrow) { color: var(--text-secondary); font-size: 14px; line-height: 1.6; margin-bottom: 22px; max-width: 420px; }
.mascot { display: block; height: auto; object-fit: contain; }
.mascot-sm { width: 96px; }
.mascot-md { width: 150px; }
.mascot-lg { width: 180px; }
.mascot-hero { width: min(38vw, 280px); }
.hero-card > .mascot { align-self: flex-end; margin-bottom: -45px; margin-left: auto; mix-blend-mode: multiply; }
.button { align-items: center; border: 0; border-radius: 16px; cursor: pointer; display: inline-flex; font-size: 14px; font-weight: 600; justify-content: center; min-height: 48px; padding: 12px 20px; }
.button-primary { background: var(--primary); color: white; }
.button-primary:hover { background: var(--primary-pressed); }
.button-secondary { background: var(--blue-soft); color: var(--primary-pressed); }
.button-ghost { background: transparent; color: var(--primary); }
.button-reward { background: var(--amber); color: #3a2a00; }
.button-full { justify-content: space-between; width: 100%; }
.section-heading, .page-title { align-items: end; display: flex; justify-content: space-between; margin: 32px 2px 16px; }
.section-heading a, .text-button { background: none; border: 0; color: var(--primary); cursor: pointer; font-size: 13px; font-weight: 600; }
.section-heading p, .section-heading h2, .page-title p, .page-title h1 { margin-bottom: 0; }
.page-title { align-items: center; margin-top: 12px; }
.page-title h1 { font-size: 32px; }
.page-title.compact { margin-bottom: 12px; }
.group-strip { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.group-card { border-radius: 22px; min-height: 225px; padding: 20px; }
.group-blue { background: #eaf2ff; }
.group-amber { background: #fff5d6; }
.group-icon, .expense-icon { align-items: center; background: white; border-radius: 14px; display: flex; font-size: 22px; height: 48px; justify-content: center; margin-bottom: 18px; width: 48px; }
.group-card h3 { margin: 4px 0 14px; }
.group-card .money { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.empty-group-card { align-items: flex-start; display: flex; flex-direction: column; justify-content: center; }.empty-group-card .group-icon { color: var(--primary); }.empty-group-card h3 { margin-bottom: 6px; }
.balance { color: var(--text-secondary); font-size: 12px; }
.balance b { display: block; font-size: 14px; margin-top: 2px; }
.positive b, .positive-text { color: var(--success); }
.negative b, .negative-text { color: var(--error); }
.list-card, .wide-card, .form-card, .profile-card, .settings-list, .settlement-card, .showcase { background: var(--surface); border: 1px solid rgba(203,213,225,.65); border-radius: 20px; box-shadow: var(--shadow); }
.expense-row { align-items: center; display: flex; gap: 12px; min-height: 82px; padding: 14px 16px; }
.expense-row + .expense-row { border-top: 1px solid #edf1f6; }
.expense-row .expense-icon { background: var(--background); height: 44px; margin: 0; width: 44px; }
.expense-main, .expense-amount { display: flex; flex-direction: column; gap: 4px; }
.expense-main { flex: 1; min-width: 0; }
.expense-main b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expense-amount { align-items: flex-end; }
.expense-amount b { font-size: 14px; }
.bottom-nav { align-items: center; background: rgba(255,255,255,.94); border-top: 1px solid rgba(203,213,225,.7); bottom: 0; display: flex; height: calc(72px + env(safe-area-inset-bottom)); justify-content: space-around; left: 0; padding-bottom: env(safe-area-inset-bottom); position: fixed; right: 0; z-index: 20; }
.nav-item { align-items: center; color: var(--muted); display: flex; flex-direction: column; font-size: 11px; font-weight: 600; gap: 3px; min-width: 58px; }
.nav-icon { font-size: 23px; line-height: 24px; }
.nav-item.active { color: var(--primary); }
.fab { align-items: center; background: var(--primary); border: 4px solid var(--background); border-radius: 999px; bottom: calc(52px + env(safe-area-inset-bottom)); box-shadow: 0 10px 24px rgba(36,92,200,.28); color: white; display: flex; gap: 4px; left: 50%; min-height: 48px; padding: 0 17px 0 12px; position: fixed; transform: translateX(-50%); z-index: 25; }
.fab span { font-size: 22px; }.fab b { font-size: 13px; }
.stack { display: grid; gap: 14px; }
.wide-card { padding: 18px; }
.card-actions { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.wide-card-top, .profile-card { align-items: center; display: flex; gap: 13px; }
.wide-card-top .group-icon { background: var(--background); margin: 0; }
.grow { display: flex; flex: 1; flex-direction: column; gap: 4px; }
.more-button { background: none; border: 0; color: var(--muted); }
.metric-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin: 18px 0; }
.metric-grid span { background: var(--background); border-radius: 14px; display: flex; flex-direction: column; gap: 5px; padding: 12px; }
.metric-grid b { font-size: 14px; }
.icon-button { align-items: center; background: var(--blue-soft); border: 0; border-radius: 14px; color: var(--primary); display: inline-flex; font-size: 21px; height: 44px; justify-content: center; width: 44px; }
.filter-row { display: flex; gap: 8px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 2px; }
.chip { background: white; border: 1px solid var(--border); border-radius: 999px; flex: 0 0 auto; font-size: 12px; font-weight: 600; min-height: 38px; padding: 8px 14px; }
.chip.active { background: var(--primary); border-color: var(--primary); color: white; }
.summary-card { background: var(--primary); border-radius: 20px; color: white; display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-bottom: 14px; padding: 18px; }
.summary-card span { display: flex; flex-direction: column; gap: 6px; }.summary-card small { color: #ddebff; }.summary-card b { font-size: 17px; }
.expense-form { display: grid; gap: 14px; }
.amount-panel { background: linear-gradient(135deg, var(--primary), #4285f4); border-radius: 22px; color: white; padding: 24px; }
.amount-panel label { color: #ddebff; font-size: 13px; }
.amount-panel small { color: #ddebff; }
.amount-input { align-items: center; display: flex; margin: 4px 0; }
.amount-input input { background: transparent; border: 0; color: white; font-family: "Be Vietnam Pro", Arial, sans-serif; font-size: 38px; font-weight: 700; min-width: 0; outline: 0; width: 100%; }
.amount-input span { font-size: 26px; font-weight: 600; }
.form-card { box-shadow: none; display: grid; gap: 18px; padding: 18px; }
.form-card label, .field-label, .field-heading span { display: grid; font-size: 13px; font-weight: 600; gap: 7px; }
.form-card input:not([type=checkbox]):not([type=radio]), .form-card select { background: white; border: 1px solid var(--border); border-radius: 14px; color: var(--text); min-height: 52px; padding: 12px 14px; width: 100%; }
.form-card input:focus, .form-card select:focus { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); outline: none; }
.two-cols { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.field-heading { align-items: center; display: flex; justify-content: space-between; }.field-heading small { font-weight: 400; }
.member-grid { display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr); }
.member-choice { align-items: center; cursor: pointer; display: flex !important; font-size: 11px !important; font-weight: 500 !important; gap: 5px !important; text-align: center; }
.member-choice input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.member-choice .member-avatar { background: var(--avatar); box-shadow: 0 0 0 3px white, 0 0 0 5px var(--primary); }
.member-choice input:not(:checked) + .member-avatar { filter: grayscale(1); opacity: .45; box-shadow: none; }
.segmented { background: var(--background); border-radius: 14px; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; }
.segmented-four { grid-template-columns: repeat(4, 1fr); }
.segmented label { cursor: pointer; }.segmented input { opacity: 0; position: absolute; }
.segmented span { border-radius: 11px; display: block; font-size: 12px; padding: 10px 4px; text-align: center; }
.segmented input:checked + span { background: white; box-shadow: 0 2px 8px rgba(31,83,174,.12); color: var(--primary); }
.segmented .coming-soon { cursor: not-allowed; }.segmented .coming-soon span { color: var(--muted); opacity: .55; }
.split-preview { color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.empty-list { align-items: center; display: flex; flex-direction: column; gap: 10px; padding: 28px; text-align: center; }.empty-list p { color: var(--muted); font-size: 13px; margin: 0; }
.balance-hero { align-items: center; background: linear-gradient(135deg, #e8f7ef, #eaf2ff); border-radius: 24px; display: flex; min-height: 220px; overflow: hidden; padding: 24px; }
.balance-hero div { flex: 1; z-index: 1; }.balance-hero p { color: var(--text-secondary); margin-bottom: 5px; }.balance-hero strong { color: var(--success); display: block; font-family: "Be Vietnam Pro", Arial, sans-serif; font-size: 34px; margin-bottom: 5px; }.balance-hero .mascot { margin-bottom: -42px; mix-blend-mode: multiply; }
.balance-hero.is-debt { background: linear-gradient(135deg, #fff1ed, #fff8df); }
.balance-hero.is-debt strong { color: var(--coral); }
.balance-groups { display: grid; gap: 10px; }
.balance-group-card { align-items: center; background: white; border: 1px solid rgba(203,213,225,.65); border-radius: 18px; display: flex; gap: 12px; padding: 14px; }
.balance-group-card .group-icon { color: white; flex: 0 0 auto; margin: 0; }
.balance-value { color: var(--success); font-size: 14px; text-align: right; }
.balance-value.negative { color: var(--coral); }
.settlement-card { align-items: center; display: flex; gap: 12px; padding: 15px; }
.settlement-card .member-avatar { background: var(--avatar); }.settlement-action { align-items: end; display: flex; flex-direction: column; gap: 5px; }.settlement-action button { background: none; border: 0; color: var(--primary); cursor: pointer; font-size: 11px; font-weight: 600; padding: 0; }
.profile-card { padding: 18px; }.profile-card h2, .profile-card p { margin-bottom: 2px; }.profile-card p { color: var(--muted); font-size: 13px; }.profile-card .icon-button { margin-left: auto; }
.settings-list { margin-top: 14px; overflow: hidden; }.settings-list button, .settings-list a { align-items: center; background: white; border: 0; display: flex; gap: 13px; min-height: 70px; padding: 14px 17px; text-align: left; width: 100%; }.settings-list > * + * { border-top: 1px solid #edf1f6 !important; }
.empty-page { align-items: center; display: flex; flex-direction: column; padding: 40px 16px; text-align: center; }.empty-page .mascot { mix-blend-mode: multiply; }.empty-page p { color: var(--muted); }
.showcase { margin-bottom: 14px; padding: 18px; }.showcase h2 { margin-bottom: 14px; }.swatches, .button-row, .mascot-grid { display: flex; flex-wrap: wrap; gap: 10px; }.swatch { border-radius: 12px; color: white; font-size: 12px; padding: 16px; }.swatch.primary { background: var(--primary); }.swatch.amber { background: var(--amber); color: #3a2a00; }.swatch.coral { background: var(--coral); }.swatch.success { background: var(--success); }.mascot-grid figure { margin: 0; text-align: center; width: 112px; }.mascot-grid figcaption { color: var(--muted); font-size: 11px; }.mascot-grid img { mix-blend-mode: multiply; }
.toast { background: var(--text); border-radius: 12px; bottom: 100px; color: white; font-size: 13px; left: 50%; max-width: calc(100% - 40px); opacity: 0; padding: 12px 16px; pointer-events: none; position: fixed; transform: translate(-50%,12px); transition: .2s ease; z-index: 40; }.toast.show { opacity: 1; transform: translate(-50%,0); }

.group-form { display: grid; gap: 14px; }
.group-step { padding: 20px; }
.group-type-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 759px) { .group-type-grid { grid-template-columns: minmax(0, 1fr); } }
.type-choice { cursor: pointer; }
.type-choice input, .color-picker input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.type-choice-card { background: var(--background); border: 2px solid transparent; border-radius: 18px; display: grid; gap: 5px; min-height: 150px; padding: 16px; }
.type-choice-card strong { font-size: 14px; }
.type-choice-card small { font-weight: 400; line-height: 1.5; }
.type-icon { align-items: center; background: white; border-radius: 14px; color: var(--primary); display: inline-flex; font-size: 22px; height: 44px; justify-content: center; margin-bottom: 8px; width: 44px; }
.type-choice input:checked + .type-choice-card { background: #f4f8ff; border-color: var(--primary); box-shadow: 0 5px 14px rgba(36,92,200,.10); }
.type-choice input:checked + .type-choice-card .type-icon { background: var(--primary); color: white; }
.group-identity { align-items: end; display: grid; gap: 14px; grid-template-columns: 72px 1fr; }
.group-icon-preview { align-items: center; background: var(--primary); border: 4px solid white; border-radius: 22px; box-shadow: 0 0 0 2px var(--primary); color: white; display: flex; font-size: 30px; height: 68px; justify-content: center; margin-bottom: 3px; width: 68px; }
.color-picker { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.color-picker span { background: var(--swatch); border: 3px solid white; border-radius: 999px; box-shadow: 0 0 0 1px var(--border); display: block; height: 36px; width: 36px; }
.color-picker input:checked + span { box-shadow: 0 0 0 3px var(--text); }
.mascot-tip { align-items: center; background: var(--amber-soft); border-radius: 20px; display: flex; gap: 10px; overflow: hidden; padding: 12px 18px 12px 5px; }
.mascot-tip .mascot { margin: -12px 0 -18px; mix-blend-mode: multiply; width: 88px; }
.mascot-tip b { font-size: 14px; }.mascot-tip p { color: var(--text-secondary); font-size: 12px; line-height: 1.5; margin: 4px 0 0; }
.member-summary { align-items: center; background: linear-gradient(135deg, var(--blue-soft), #fff8df); border-radius: 22px; display: flex; justify-content: space-between; margin-bottom: 16px; padding: 22px; }
.member-summary div { align-items: center; display: flex; gap: 12px; }.member-summary strong { color: var(--primary); font-family: "Be Vietnam Pro", sans-serif; font-size: 44px; }.member-summary span { color: var(--text-secondary); font-size: 13px; font-weight: 600; line-height: 1.4; }.member-summary p { color: var(--text-secondary); font-size: 12px; margin: 0; max-width: 270px; }
.member-list { display: grid; gap: 10px; }
.member-card { align-items: center; background: white; border: 1px solid rgba(203,213,225,.65); border-radius: 18px; display: flex; gap: 12px; min-height: 82px; padding: 14px; }
.member-avatar-lg { background: var(--avatar); font-size: 15px; height: 50px; width: 50px; }
.role-badge { background: var(--blue-soft); border-radius: 999px; color: var(--primary); font-size: 10px; font-weight: 700; padding: 6px 9px; }.role-badge.owner { background: var(--amber-soft); color: #664700; }
.info-card { align-items: flex-start; background: #eaf2ff; border-radius: 20px; display: flex; gap: 12px; margin-top: 16px; padding: 18px; }.info-icon { align-items: center; background: var(--primary); border-radius: 999px; color: white; display: flex; flex: 0 0 auto; font-family: serif; font-weight: 700; height: 34px; justify-content: center; width: 34px; }.info-card b { font-size: 14px; }.info-card p { color: var(--text-secondary); font-size: 12px; line-height: 1.65; margin: 5px 0 0; }
.notice { border-radius: 14px; font-size: 13px; font-weight: 600; margin-bottom: 14px; padding: 12px 15px; }.notice-success { background: #e8f7ef; color: #155c3d; }
.notice-error { background: #fdeEec; color: #8e211b; }
.add-member-form { box-shadow: none; margin-top: 14px; scroll-margin-top: 20px; }.add-member-fields { align-items: end; display: grid; gap: 10px; grid-template-columns: 1.3fr 1fr auto; }.add-member-fields .button { margin-bottom: 0; }
.empty-inline { align-items: center; background: white; border: 1px solid rgba(203,213,225,.65); border-radius: 22px; display: flex; gap: 18px; grid-column: 1 / -1; overflow: hidden; padding: 18px 24px; }.empty-inline .mascot { margin: -18px 0 -34px; mix-blend-mode: multiply; }.empty-inline h2 { margin-bottom: 5px; }.empty-inline p { color: var(--muted); font-size: 13px; line-height: 1.6; margin-bottom: 14px; }
.auth-actions { align-items: center; display: flex; font-size: 13px; font-weight: 600; gap: 12px; }.auth-actions .button { min-height: 40px; padding: 8px 14px; }
.auth-page { align-items: center; display: grid; gap: 24px; grid-template-columns: 1fr 1fr; margin: 36px auto; max-width: 920px; }
.auth-visual { align-items: flex-start; display: flex; flex-direction: column; padding: 20px 36px; }.auth-visual .mascot { align-self: center; margin: -30px 0 -10px; mix-blend-mode: multiply; }.auth-visual > p:not(.eyebrow) { color: var(--text-secondary); font-size: 14px; line-height: 1.7; max-width: 390px; }
.auth-card { background: white; border: 1px solid rgba(203,213,225,.65); border-radius: 24px; box-shadow: var(--shadow); display: grid; gap: 16px; padding: 28px; }.auth-card h2 { font-size: 28px; }.auth-card label { display: grid; font-size: 13px; font-weight: 600; gap: 7px; }.auth-card input { border: 1px solid var(--border); border-radius: 14px; min-height: 52px; padding: 12px 14px; width: 100%; }.auth-card input:focus { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); outline: none; }.auth-switch { color: var(--muted); font-size: 12px; margin: 0; text-align: center; }.auth-switch a { color: var(--primary); font-weight: 600; }
.logout-form { margin-top: 14px; text-align: center; }.logout-form button { color: var(--error); }

@media (min-width: 760px) {
  .page { padding-left: 28px; padding-right: 28px; }
  .group-strip { grid-template-columns: repeat(2, minmax(0, 360px)); }
  .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .expense-form { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .amount-panel { grid-row: span 2; }.sticky-submit { grid-column: 2; }
  .group-form { grid-template-columns: 1fr 1fr; }.group-form .mascot-tip, .group-form > .button { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .hero-card { min-height: 330px; padding: 24px 20px; }
  .hero-copy { width: 68%; }.hero-copy h1 { font-size: 28px; }.hero-copy > p:not(.eyebrow) { font-size: 13px; }
  .hero-card > .mascot { margin-bottom: -20px; margin-right: -55px; width: 190px; }
  .group-strip { grid-template-columns: 1fr 1fr; gap: 10px; }.group-card { min-height: 220px; padding: 15px; }.group-card h3 { font-size: 17px; }
  .member-grid { grid-template-columns: repeat(5, minmax(48px,1fr)); overflow-x: auto; padding: 4px 2px; }
  .balance-hero { min-height: 200px; padding: 20px; }.balance-hero .mascot { margin-right: -45px; width: 155px; }
  .member-summary { align-items: flex-start; flex-direction: column; gap: 8px; }.member-summary p { max-width: none; }
  .add-member-fields { grid-template-columns: 1fr 1fr; }.add-member-fields .button { grid-column: 1 / -1; }
  .auth-page { display: block; margin: 0; }.auth-visual { align-items: center; padding: 0 14px 18px; text-align: center; }.auth-visual .mascot { margin: -20px 0 -25px; width: 180px; }.auth-visual h1 { font-size: 26px; }.auth-visual > p:not(.eyebrow) { display: none; }.auth-card { border-radius: 22px; padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }