/* Shared iPhone layout and automation screens. */
:root { --canvas:#f4f5f8; --accent:#386bf3; --accent-soft:#edf1ff; --radius:24px; --hero:#2355d6; }
:root[data-theme="dark"] { --canvas:#0b0c10; --paper:#191b22; --fill:#242730; --elevated:#2c303a; --ink:#f4f5f9; --muted:#a3a8b7; --line:#2e323e; --accent:#8ba8ff; --accent-soft:#202c4a; --on-accent:#101b36; --hero:#2249a8; --bar:rgba(25,27,34,.94); }
.app-shell { padding-inline:22px; padding-bottom:calc(160px + var(--safe-bottom)); }
.topbar { min-height:80px; }
.brand-mark { border-radius:12px; width:34px; height:34px; }
.brand strong { font-size:20px; }
.header-actions { gap:4px; }
.header-actions .icon-button { background:var(--paper); width:38px; height:38px; }
.page-heading { margin:12px 0 24px; gap:12px; }
.page-title { font-size:31px; letter-spacing:-1.2px; }
.month-picker { background:var(--paper); border-radius:12px; font-size:12px; }
.month-picker button { width:26px; }
.card { border:1px solid color-mix(in srgb,var(--line) 45%,transparent); }
.balance-card { background:linear-gradient(125deg,var(--hero),#173c94); color:#fff; padding:24px; border:0; box-shadow:0 12px 30px #103b981a; }
.balance-label { display:flex; justify-content:space-between; color:#e0e8ff; font-size:13px; }
.currency-badge { border:1px solid #ffffff35; padding:4px 9px; border-radius:8px; font-size:10px; letter-spacing:1px; }
.balance-value { font-size:clamp(28px,8.2vw,40px); margin:16px 0 8px; letter-spacing:-1.5px; }
.balance-value small { font-size:16px; font-weight:400; letter-spacing:0; color:#c8d7ff; }
.balance-caption { color:#c8d7ff; font-size:11px; margin:0 0 22px; }
.balance-stat { border-color:#ffffff30; }
.balance-stat > span { color:#c8d7ff; }
.balance-stat strong { color:#fff; font-size:15px; }
.balance-stat strong.income { color:#c4f3da; }
.balance-stat strong.expense:before { color:#c8d7ff; }
.quick-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:18px 0; }
.quick-actions button { border:0; background:var(--paper); border-radius:18px; padding:14px 8px; display:flex; flex-direction:column; align-items:center; gap:9px; font-size:12px; font-weight:500; }
.quick-action-icon { display:grid; place-items:center; width:34px; height:34px; background:var(--accent-soft); border-radius:11px; color:var(--accent); font-size:23px; }
.quick-action-icon.income { color:var(--success); background:color-mix(in srgb,var(--success) 12%,transparent); }
.quick-action-icon .ui-icon { width:19px; height:19px; }
.automation-entry { width:100%; text-align:left; display:flex; align-items:center; gap:12px; background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 18%,transparent); border-radius:20px; padding:16px; }
.automation-symbol { color:var(--accent); }
.automation-entry > span:nth-child(2) { flex:1; }
.automation-entry strong { font-size:13px; font-weight:600; display:block; }
.automation-entry small { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
.automation-entry > span:last-child { color:var(--accent); font-size:23px; }
.section-row { margin:28px 2px 13px; }
.section-row h2 { font-size:17px; }
.daily-plan { padding:20px; }
.daily-top { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.daily-top h3 { font-size:26px; letter-spacing:-.8px; margin:6px 0 0; }
.daily-top .eyebrow { font-size:12px; }
.daily-foot { border-top:1px solid var(--line); padding-top:14px; margin-top:18px; font-size:12px; display:flex; justify-content:space-between; gap:12px; color:var(--muted); }
.daily-foot strong { color:var(--ink); font-weight:500; }
.ring { width:56px; height:56px; flex-shrink:0; }
.transaction-row { grid-template-columns:36px minmax(0,1fr) auto; gap:10px; position:relative; padding:16px 0; }
.transaction-row .tx-info { padding-right:0; }
.transaction-row .tx-amount { font-size:12px; }
.transaction-row .tx-actions { grid-column:2 / 4; justify-self:end; display:flex; gap:8px; margin-top:-12px; }
.transaction-row .tx-more { grid-column:auto; justify-self:auto; height:30px; min-height:30px; min-width:52px; padding:4px 0; font-size:10px; color:var(--muted); }
.budget-alert { display:flex; align-items:center; gap:12px; margin:14px 0 4px; padding:14px 16px; border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); border-radius:18px; background:var(--accent-soft); }
.budget-alert.is-over { border-color:color-mix(in srgb,var(--red) 35%,var(--line)); background:color-mix(in srgb,var(--red) 9%,var(--paper)); }
.budget-alert-icon { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; border-radius:10px; background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); font-weight:700; }
.budget-alert.is-over .budget-alert-icon { background:color-mix(in srgb,var(--red) 15%,transparent); color:var(--red); }
.budget-alert > div { flex:1; min-width:0; }
.budget-alert strong { display:block; font-size:12px; }
.budget-alert p { margin:4px 0 0; color:var(--muted); font-size:11px; line-height:1.4; }
.budget-alert .text-button { flex:0 0 auto; font-size:11px; }
.transaction-row[data-tx-category="food"] .tx-icon { color:#459d6a; background:#459d6a18; }
.transaction-row[data-tx-category="cafe"] .tx-icon { color:#ce965e; background:#ce965e18; }
.transaction-row[data-tx-category="transport"] .tx-icon { color:#788fe4; background:#788fe418; }
.transaction-row[data-tx-category="health"] .tx-icon { color:#dd708d; background:#dd708d18; }
.tx-info small { color:var(--accent); font-size:9px; margin-left:5px; }
.bottom-nav { bottom:calc(12px + var(--safe-bottom)); border:1px solid var(--line); border-radius:24px; width:min(440px,calc(100% - 28px)); padding:8px; box-shadow:0 8px 28px #00000012; }
.nav-item { border-radius:16px; font-size:10px; }
.nav-item.is-active { background:var(--accent-soft); }
.quick-add { bottom:calc(91px + var(--safe-bottom)); width:50px; height:50px; }
.goal-percent { color:var(--accent); font-size:20px; }
.goal-progress { margin-bottom:0; }
.upcoming-card { display:flex; align-items:center; gap:12px; padding:18px; width:100%; text-align:left; }
.upcoming-card > span:nth-child(2) { flex:1; min-width:0; }
.upcoming-card strong { font-size:13px; display:block; overflow-wrap:anywhere; }
.upcoming-card small { font-size:10px; color:var(--muted); display:block; margin-top:4px; }
.upcoming-card b { font-size:12px; }
.local-footnote { margin:28px 0 0; display:flex; align-items:center; justify-content:center; gap:7px; font-size:10px; color:var(--tertiary); }
.local-footnote .ui-icon { width:13px; height:13px; }
.automation-hero { background:var(--accent-soft); padding:24px; border-radius:24px; }
.hero-kicker { color:var(--accent); font-size:10px; font-weight:600; letter-spacing:1.6px; }
.automation-hero h2 { font-size:25px; font-weight:650; line-height:1.23; letter-spacing:-.8px; margin:16px 0 12px; }
.automation-hero p { color:var(--muted); font-size:13px; line-height:1.6; margin:0 0 20px; }
.auto-status { display:inline-flex; align-items:center; gap:7px; font-size:11px; padding:6px 10px; background:var(--paper); border-radius:20px; }
.auto-status i { width:6px; height:6px; border-radius:50%; background:var(--accent); }
.auto-empty { padding:24px; text-align:center; }
.auto-empty .category-icon { margin:auto; width:44px; height:44px; }
.auto-empty h3 { font-size:16px; font-weight:600; margin:16px 0 8px; }
.auto-empty p { color:var(--muted); font-size:13px; line-height:1.6; margin:0; }
.auto-empty .primary-button { font-size:14px; }
.auto-empty.compact { text-align:left; }
.auto-empty.compact h3 { margin-top:0; }
.auto-empty.compact .text-button { margin-top:8px; }
.automation-item { margin:10px 0; padding:18px; }
.auto-row { display:flex; align-items:center; gap:12px; }
.auto-copy { flex:1; min-width:0; }
.auto-copy strong { display:block; font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.auto-copy small { display:block; color:var(--muted); font-size:12px; margin-top:4px; }
.ios-toggle { width:48px; height:30px; padding:3px; border:0; background:var(--line); border-radius:20px; flex-shrink:0; }
.ios-toggle span { display:block; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0002; transition:transform .2s; }
.ios-toggle.is-on { background:var(--accent); }
.ios-toggle.is-on span { transform:translateX(18px); }
.auto-item-footer { margin-top:13px; padding-top:10px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.auto-item-footer span { color:var(--muted); font-size:10px; }
.auto-item-footer button { min-height:32px; border:0; background:none; color:var(--accent); font-size:12px; }
.auto-help { display:flex; gap:10px; align-items:center; padding:16px 4px; width:100%; border:0; background:none; color:var(--accent); text-align:left; font-size:12px; }
.auto-help span:first-of-type { flex:1; }
.rule-preview { margin-top:24px; padding:16px; background:var(--accent-soft); border-radius:16px; }
.rule-preview .form-label { margin-top:0; }
.rule-preview input { background:var(--paper); }
.rule-preview p { color:var(--accent); font-size:12px; margin:12px 0 0; }
.danger-text { color:var(--red); }
.modal-sheet { scroll-padding:20px; }
.modal-heading { position:sticky; top:-10px; z-index:1; background:var(--paper); padding:10px 0; }
.history-search { display:flex; align-items:center; gap:9px; min-height:46px; margin:0 0 12px; padding:0 14px; background:var(--paper); border:1px solid var(--line); border-radius:15px; color:var(--muted); }
.history-search span { font-size:22px; line-height:1; }
.history-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font-size:14px; }
.history-search .ui-icon { width:18px; height:18px; flex-shrink:0; }
.history-search input::placeholder { color:var(--tertiary); }
.backup-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:14px 16px 0; padding-top:14px; border-top:1px solid var(--line); }
.backup-actions button { min-height:40px; border:0; border-radius:12px; background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:600; }
.backup-note { margin:10px 16px 2px; font-size:11px; }
.month-compare { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding:16px 18px; }
.month-compare div { min-width:0; }
.month-compare span:first-child { display:block; color:var(--muted); font-size:11px; }
.month-compare strong { display:block; margin-top:5px; font-size:18px; }
.compare-badge { flex-shrink:0; padding:7px 10px; border-radius:12px; background:var(--accent-soft); color:var(--accent); font-size:11px; font-weight:600; }
.compare-badge.is-up { color:var(--red); background:color-mix(in srgb,var(--red) 12%,transparent); }
@media(max-width:360px) { .app-shell { padding-inline:16px; } .balance-card { padding:20px; } .page-title { font-size:28px; } .automation-hero h2 { font-size:23px; } .balance-stat strong { font-size:13px; } }
@media(prefers-reduced-motion:reduce) { *, *:before, *:after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }