:root {
  --ink: #21191a;
  --muted: #7d6d6c;
  --paper: #f5efee;
  --card: #fffafa;
  --jade: #873b40;
  --jade-2: #f0dfde;
  --red: #873b40;
  --line: rgba(105, 52, 56, .13);
  --shadow: 0 10px 30px rgba(76, 34, 38, .06);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body { background: var(--paper); -webkit-font-smoothing: antialiased; }
.topbar { background: linear-gradient(var(--paper) 78%, transparent); }
.brand-mark { background: #873b40; font-family: inherit; font-weight: 850; box-shadow: none; }
.brand strong, .hero h1, .section-head h2, .title-row h1, .info-card h3, .money-total, form h2 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 820;
  letter-spacing: -.045em;
}
.brand strong { font-size: 17px; letter-spacing: -.025em; }
.avatar { background: #ecdedd; color: #713238; }
.hero { background: linear-gradient(145deg, #693237, #8b3e43); box-shadow: 0 14px 36px rgba(92, 36, 40, .14); }
.hero:after { color: rgba(255,255,255,.04); }
.hero h1 { font-size: 35px; line-height: 1.02; }
.quick-icon, .item-icon, .estimate-box { background: #f0dfde !important; color: #78353a; }
.quick:nth-child(2) .quick-icon, .quick:nth-child(3) .quick-icon, .quick:nth-child(4) .quick-icon { background: #f0dfde; }
.quick, .progress-card, .card, .empty, .item { box-shadow: none; }
.add-btn { background: #873b40; box-shadow: none; }
.chip.active { background: #6d3034; border-color: #6d3034; }
.info-card { background: #ebe8e3; }
.info-card.jade { background: #6d3034; }
.bottom-nav button.active, .link-btn, .icon-btn { color: #873b40; }
.bottom-nav { box-shadow: 0 10px 28px rgba(35, 25, 25, .10); }
.primary { background: #873b40; }
.field input:focus, .field textarea:focus { border-color: #873b40; }
.loader span { border-color: #eadbda; border-top-color: #873b40; }
.setup-btn { margin-top: 24px; border: 1px solid rgba(255,255,255,.32); border-radius: 13px; padding: 11px 14px; color: white; background: rgba(255,255,255,.08); font-size: 12px; font-weight: 800; }
.item-icon { overflow: hidden; }
.item-icon img { width: 100%; height: 100%; object-fit: cover; }
.source-link { display: inline-block; margin-top: 4px; color: #873b40; font-size: 10px; font-weight: 750; text-decoration: none; }
.supported-shops { margin: -4px 0 12px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.primary:disabled { opacity: .65; }
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 18px 0; padding: 4px; border-radius: 13px; background: #eee6e4; }
.mode-switch button { border: 0; border-radius: 10px; padding: 10px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 800; }
.mode-switch button.active { color: white; background: #873b40; }
.manual-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bottom-nav { width: min(calc(100% - 24px), 300px); }
.bottom-nav button { padding: 7px 10px; }
.bottom-nav span { font-size: 9px; }
.settings-page { display: grid; gap: 12px; }
.settings-card { width: 100%; position: relative; border: 1px solid var(--line); border-radius: 20px; padding: 19px; color: var(--ink); background: var(--card); text-align: left; box-shadow: none; }
.settings-card h2 { margin: 5px 0 13px; font-size: 19px; letter-spacing: -.035em; }
.settings-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.settings-kicker { color: #873b40; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.theme-choice { display: grid; gap: 5px; border: 1px solid var(--line); border-radius: 16px; padding: 10px; color: var(--ink); background: transparent; text-align: left; }
.theme-choice.active { border-color: #873b40; box-shadow: inset 0 0 0 1px #873b40; }
.theme-choice b { font-size: 12px; }
.theme-choice small { color: var(--muted); font-size: 9px; }
.theme-preview { height: 66px; position: relative; overflow: hidden; border-radius: 11px; background: #f5efee; border: 1px solid rgba(0,0,0,.05); }
.theme-preview.dark { background: #171316; border-color: rgba(255,255,255,.08); }
.theme-preview:before, .theme-preview:after, .theme-preview i { content: ''; position: absolute; left: 10px; right: 10px; height: 7px; border-radius: 5px; background: #873b40; }
.theme-preview:before { top: 11px; width: 34%; }
.theme-preview:after { top: 26px; background: rgba(135,59,64,.25); }
.theme-preview i { top: 41px; background: rgba(135,59,64,.14); }
.trip-settings { padding-right: 48px; }
.settings-arrow { position: absolute; right: 19px; top: 50%; transform: translateY(-50%); color: #873b40; font-size: 22px; }

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f3ecec;
  --muted: #ad9fa1;
  --paper: #171316;
  --card: #211b1e;
  --jade: #a9545a;
  --jade-2: #3b282d;
  --red: #a9545a;
  --line: rgba(255,255,255,.09);
  --shadow: none;
  background: #171316;
}
html[data-theme="dark"] body { background: #171316; }
html[data-theme="dark"] .topbar { background: linear-gradient(#171316 78%, transparent); }
html[data-theme="dark"] .avatar { color: #e5c5c7; background: #38282c; }
html[data-theme="dark"] .quick-icon,
html[data-theme="dark"] .item-icon,
html[data-theme="dark"] .estimate-box { color: #ddaeb1; background: #3b282d !important; }
html[data-theme="dark"] .quick:nth-child(2) .quick-icon,
html[data-theme="dark"] .quick:nth-child(3) .quick-icon,
html[data-theme="dark"] .quick:nth-child(4) .quick-icon { background: #3b282d; }
html[data-theme="dark"] .progress { background: #332c2e; }
html[data-theme="dark"] .info-card { background: #292225; }
html[data-theme="dark"] .info-card.jade { background: #6f3439; }
html[data-theme="dark"] .bottom-nav { background: rgba(33,27,30,.95); border-color: rgba(255,255,255,.09); }
html[data-theme="dark"] #sheet-content { background: #211b1e; }
html[data-theme="dark"] dialog::backdrop { background: rgba(0,0,0,.62); }
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .field select { color: var(--ink); background: #181416; }
html[data-theme="dark"] .secondary { color: var(--ink); background: #342d2f; }
html[data-theme="dark"] .mode-switch { background: #181416; }
html[data-theme="dark"] .settings-kicker,
html[data-theme="dark"] .settings-arrow,
html[data-theme="dark"] .source-link { color: #d88c91; }
html[data-theme="dark"] .theme-choice.active { border-color: #b65f65; box-shadow: inset 0 0 0 1px #b65f65; }
@media(min-width:700px){.app-shell{background:var(--paper);box-shadow:0 24px 70px rgba(38,28,28,.12)}}