:root { font-family: system-ui, -apple-system, "PingFang SC", sans-serif; color: #172033; background: #f4f6f8; }
body { margin: 0; }
nav { background: #173f5f; color: white; padding: 14px 4%; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.top-nav { justify-content: space-between; }
.desktop-nav-links { display: flex; gap: 18px; align-items: center; }
.mobile-bottom-nav { display: none; }
.install-app-banner { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); max-width: 520px; margin: auto; background: white; border: 1px solid #dfe5eb; border-radius: 14px; box-shadow: 0 8px 30px #0003; padding: 10px; align-items: center; gap: 10px; }.install-app-banner:not([hidden]) { display: flex; }.install-app-banner img { width: 46px; height: 46px; border-radius: 11px; }.install-app-banner div { display: grid; flex: 1; }.install-app-banner small { color: #687386; }.install-app-banner .install-ios { display: none; }.install-app-banner.ios-install .install-ios { display: block; }.install-app-banner.ios-install .install-default, .install-app-banner.ios-install #install-app-button { display: none; }.install-close { background: transparent; color: #687386; padding: 6px; font-size: 1.2rem; }.offline-page { text-align: center; max-width: 380px; padding-top: 18vh; }.offline-page img { width: 92px; border-radius: 22px; }
nav a { color: white; text-decoration: none; }
main { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.card, .panel { background: white; border-radius: 12px; padding: 18px; box-shadow: 0 2px 10px #0000000d; }
.number { font-size: 1.55rem; font-weight: 700; margin-top: 8px; }
.muted { color: #687386; font-size: .9rem; }
table { width: 100%; border-collapse: collapse; background: white; }
th, td { padding: 10px; border-bottom: 1px solid #e8ecf0; text-align: left; white-space: nowrap; }
.table-wrap { overflow-x: auto; border-radius: 12px; }
input, textarea, select, button { box-sizing: border-box; padding: 10px; border: 1px solid #ccd4dd; border-radius: 8px; font: inherit; }
input, textarea, select { width: 100%; background: white; }
button, .button { box-sizing: border-box; background: #1473e6; color: white; border: 0; cursor: pointer; padding: 10px 14px; border-radius: 8px; text-decoration: none; display: inline-block; }
.secondary { background: #526273; }
.form-error { color: #b42318; background: #fff1f0; border-radius: 8px; padding: 10px; }
.confirm { display: flex; grid-column: 1 / -1; align-items: center; gap: 8px; background: #fff8e6; padding: 10px; border-radius: 8px; }
.confirm input { width: auto; }
.danger { background: #b42318; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.record-form { max-width: 820px; margin: 0 auto; }
.form-section { grid-column: 1 / -1; font-weight: 700; color: #173f5f; border-bottom: 2px solid #e8ecf0; padding: 8px 0 6px; }
.form-actions { display: flex; gap: 8px; align-items: center; }
.small { padding: 6px 9px; font-size: .82rem; }
.preset { margin-top: 5px; justify-self: start; }
.success-message { background: #ecfdf3; color: #067647; padding: 10px; border-radius: 8px; }
label { display: grid; gap: 6px; }
pre { white-space: pre-wrap; background: #f6f8fa; padding: 14px; border-radius: 8px; }
.dashboard-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.compact-panel { padding: 12px 16px; margin-bottom: 14px; }
.month-nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.month-nav > a { color: #1473e6; text-decoration: none; font-weight: 600; }
.period-picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.period-picker input, .period-picker select { width: 96px; }
.period-picker button { height: 42px; }
.quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0; }
.quick { color: white; text-decoration: none; padding: 16px; border-radius: 12px; font-weight: 700; text-align: center; box-shadow: 0 2px 10px #0001; }
.quick span, .quick small { display: block; }.quick small { margin-top: 5px; font-weight: 400; opacity: .9; }
.quick.work { background: #1473e6; }.quick.daily { background: #8b5cf6; }.quick.full { background: #526273; }
.dashboard-section { margin: 18px 0; }
.hero-card { background: linear-gradient(135deg, #e8fff6, #fff); border: 1px solid #a7f3d0; }
.hero-card .number { font-size: 2rem; }
.delta { margin-top: 6px; font-size: .85rem; }.positive { color: #067647; }.negative { color: #b42318; }
.module-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; margin: 16px 0; }
.metric-list { display: grid; gap: 8px; }.metric-list > div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid #eef1f4; }.metric-list .subtotal { font-weight: 600; }.metric-list .total { font-size: 1.08rem; font-weight: 700; color: #173f5f; border-top: 2px solid #dbe4ec; }
.reminders { margin: 16px 0; background: #fffdf5; }.reminders ul { margin-bottom: 0; padding-left: 22px; }.reminders li { margin: 7px 0; }
.charts { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(420px, 1.5fr); gap: 14px; margin: 16px 0 24px; }
.chart-panel h2 { margin: 0 0 4px; }
.chart-panel canvas { display: block; width: 100%; }
.chart-legend { display: grid; gap: 7px; }
.chart-legend > div { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 7px; font-size: .88rem; }.chart-legend small { display: block; color: #687386; }
.legend-color { width: 10px; height: 10px; border-radius: 3px; }
.line-legend { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; font-size: .86rem; }
.line-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.income-dot::before { background: #1473e6; }
.work-dot::before { background: #ef4444; }
.daily-dot::before { background: #f59e0b; }
.retained-dot::before { background: #10b981; }
.channel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.channel-grid > div { background: #f7f9fb; border-radius: 10px; padding: 14px; }.channel-grid h3 { margin: 0; }
.inline { display: inline; }.mobile-records { display: none; }.record-card { background: white; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 10px #0000000d; }.record-date { font-size: 1.1rem; font-weight: 700; }.record-card h3 { font-size: .88rem; color: #687386; margin: 16px 0 5px; }.record-row, .record-net { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; }.record-net { border-top: 2px solid #dbe4ec; margin-top: 14px; padding-top: 12px; font-size: 1.05rem; }.record-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }.record-actions .button, .record-actions button { width: 100%; text-align: center; }
@media (max-width: 820px) { .charts { grid-template-columns: 1fr; } }
@media (max-width: 650px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .top-nav { padding: calc(12px + env(safe-area-inset-top)) 16px 12px; flex-wrap: nowrap; position: sticky; top: 0; z-index: 20; }
  .top-nav strong { font-size: 1rem; }.top-nav .desktop-nav-links { display: none; }.top-nav form { margin-left: auto; }.top-nav button { padding: 7px 10px; font-size: .82rem; background: #ffffff20; }
  .mobile-bottom-nav { display: grid; grid-template-columns: repeat(5,1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); gap: 0; background: rgba(255,255,255,.96); border-top: 1px solid #dfe5eb; box-shadow: 0 -4px 18px #0001; backdrop-filter: blur(12px); }
  .mobile-bottom-nav a { color: #526273; text-decoration: none; text-align: center; font-size: .72rem; padding: 2px; }.mobile-bottom-nav a span { display: block; color: #1473e6; font-size: 1.35rem; line-height: 1.25; }
  main { margin: 12px auto 0; padding: 0 12px; }
  h1 { font-size: 1.45rem; margin: 8px 0; } h2 { font-size: 1.15rem; }
  .dashboard-header .muted { margin: 5px 0 10px; }.dashboard-header .button { display: none; }
  .form-grid, .module-grid, .channel-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr 1fr; gap: 9px; }.card, .panel { padding: 14px; }.hero-card { grid-column: 1 / -1; }.hero-card .number { font-size: 2rem; }.cards .card:not(.hero-card) { font-size: .78rem; }.cards .card:not(.hero-card) .number { font-size: 1.15rem; }
  .quick-actions { grid-template-columns: 1fr 1fr; gap: 9px; scroll-margin-top: 70px; }.quick { min-height: 62px; padding: 12px 8px; display: grid; place-content: center; }.quick.full { grid-column: 1/-1; min-height: auto; }.quick small { font-size: .72rem; }
  .month-nav { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; text-align: center; }.month-nav > a { font-size: .82rem; padding: 6px 1px; }.period-picker { grid-column: 1/-1; margin: 2px 0 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr auto; }.period-picker input, .period-picker select { width: 100%; }
  .module-grid { gap: 10px; }.metric-list > div { padding: 8px 0; }.reminders ul { padding-left: 18px; }
  .charts { gap: 10px; }.chart-panel { overflow: hidden; }.chart-panel canvas { min-width: 100%; }.line-legend { gap: 8px 12px; font-size: .74rem; }
  .desktop-records { display: none; }.mobile-records { display: block; }.anchor-heading { scroll-margin-top: 70px; }
  .record-card { padding: 14px; }.record-card:not(.expanded) h3, .record-card:not(.expanded) .record-row, .record-card:not(.expanded) .record-actions { display: none; }.record-card:not(.expanded) .record-net { margin-top: 10px; }.record-toggle { width: 100%; margin-top: 10px; background: #eef5ff; color: #1473e6; padding: 9px; }.record-card.expanded .record-toggle { background: #f4f6f8; color: #526273; }
  .record-form { padding-bottom: 74px; }.record-form input[type="number"], .record-form input[type="date"], .record-form textarea { min-height: 48px; font-size: 16px; }.form-actions { position: fixed; left: 0; right: 0; bottom: calc(61px + env(safe-area-inset-bottom)); z-index: 25; background: rgba(255,255,255,.97); border-top: 1px solid #dfe5eb; padding: 10px 12px; box-shadow: 0 -3px 12px #0001; align-items: stretch; }.form-actions button, .form-actions .button { flex: 1 1 0; width: 0; height: 46px; min-height: 46px; padding: 0 14px; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.2; }
}

/* C2 mobile theme: calm dark dashboard, bright record forms */
.brand { display: grid; gap: 1px; }.brand small { opacity: .68; font-size: .68rem; }
@media (max-width: 650px) {
  body.dashboard-page { background: #152230; color: #e7eef2; }
  .dashboard-page .top-nav { background: #152230; }
  .dashboard-page main { background: #152230; }
  .dashboard-page .dashboard-header h1 { color: #e7eef2; }
  .dashboard-page .muted { color: #9fb0bc; }
  .dashboard-page .month-nav { background: #1e3040; box-shadow: none; }
  .dashboard-page .month-nav > a { color: #9fb0bc; }
  .dashboard-page .period-picker input, .dashboard-page .period-picker select { background: #263b4b; color: #e7eef2; border-color: #304a5c; }
  .dashboard-page .period-picker button { background: #438ead; }
  .dashboard-page .result-section > h2 { font-size: .78rem; color: #9fb0bc; text-transform: uppercase; letter-spacing: .08em; }
  .dashboard-page .hero-card { background: linear-gradient(135deg,#e9f3ef,#d8eae4); border: 0; color: #1a3035; box-shadow: 0 9px 24px #08121b55; }
  .dashboard-page .hero-card .muted { color: #668078; }
  .dashboard-page .hero-card .positive { color: #356759; background: #c4dfd5; display: inline-block; padding: 4px 9px; border-radius: 20px; }
  .dashboard-page .hero-card .negative { color: #9f555d; background: #f0d4d6; display: inline-block; padding: 4px 9px; border-radius: 20px; }
  .dashboard-page .cards .card:not(.hero-card), .dashboard-page .panel { background: #1e3040; color: #e7eef2; box-shadow: none; border: 1px solid #304a5c; }
  .dashboard-page .cards .card:nth-child(2) .number { color: #8bc2d8; }
  .dashboard-page .cards .card:nth-child(3) .number { color: #d98282; }
  .dashboard-page .cards .card:nth-child(4) .number { color: #72d6ad; }
  .dashboard-page .quick.work { background: #438ead; }.dashboard-page .quick.daily { background: #294254; }.dashboard-page .quick.full { background: #1e3040; border: 1px solid #304a5c; }
  .dashboard-page .metric-list > div { border-color: #304555; }.dashboard-page .metric-list .total { color: #72d6ad; border-color: #40596a; }
  .dashboard-page .reminders { background: #1e3040; }.dashboard-page .reminders li::marker { color: #72d6ad; }
  .dashboard-page .chart-panel, .dashboard-page section.panel { scroll-margin-top: 74px; }
  .dashboard-page .income-dot::before { background: #8bc2d8; }.dashboard-page .work-dot::before { background: #d98282; }.dashboard-page .daily-dot::before { background: #d5ad72; }.dashboard-page .retained-dot::before { background: #72d6ad; }
  .dashboard-page .chart-legend small, .dashboard-page .line-legend, .dashboard-page .record-card h3 { color: #9fb0bc; }
  .dashboard-page .channel-grid > div { background: #263b4b; }.dashboard-page .channel-grid p { color: #d5e0e6; }
  .dashboard-page .record-card { background: #1e3040; color: #e7eef2; border: 1px solid #304a5c; box-shadow: none; }
  .dashboard-page .record-net { border-color: #40596a; }.dashboard-page .record-net strong { color: #72d6ad; }
  .dashboard-page .record-toggle { background: #294254; color: #8bc2d8; }
  .dashboard-page .mobile-bottom-nav { grid-template-columns: repeat(5,1fr); background: rgba(26,42,56,.97); border-color: #304555; box-shadow: 0 -4px 18px #08121b66; }
  .dashboard-page .mobile-bottom-nav a { color: #8fa2ae; }.dashboard-page .mobile-bottom-nav a:first-child, .dashboard-page .mobile-bottom-nav a:first-child span { color: #72d6ad; }.dashboard-page .mobile-bottom-nav a span { color: #8fa2ae; }

  body.record-page { background: #fff; color: #20363d; }
  .record-page .top-nav { background: #fff; color: #20363d; border-bottom: 1px solid #e2eaec; }
  .record-page .top-nav .brand small { color: #71878c; }.record-page .top-nav button { color: #526a72; background: #f2f6f7; }
  .record-page main { margin-top: 0; padding: 0; background: #fff; }
  .record-page .record-form { border: 0; border-radius: 0; box-shadow: none; padding: 18px 16px 86px; background: #fff; }
  .record-page .record-form h1 { color: #20363d; }.record-page .record-form .muted { color: #71878c; }
  .record-page .form-section { color: #205b68; border-color: #dce8ea; margin-top: 6px; }
  .record-page label { color: #314950; font-weight: 600; }
  .record-page input, .record-page textarea, .record-page select { background: #f5f8f8; color: #20363d; border-color: #d7e2e4; }
  .record-page input:focus, .record-page textarea:focus { outline: 2px solid #8bc2d8; border-color: #438ead; }
  .record-page .preset { background: #edf4f5; color: #356e84; }
  .record-page .form-actions { background: rgba(255,255,255,.98); border-color: #dce6e8; }
  .record-page .form-actions button { background: #438ead; }.record-page .form-actions .secondary { background: #edf2f3; color: #526a72; }
  .record-page .mobile-bottom-nav { grid-template-columns: repeat(5,1fr); background: rgba(255,255,255,.97); border-color: #dce6e8; }.record-page .mobile-bottom-nav a { color: #82969a; }.record-page .mobile-bottom-nav a:nth-child(2), .record-page .mobile-bottom-nav a:nth-child(2) span { color: #438ead; }

  html:has(body.settings-page) { min-height: 100%; background: #fff; }
  body.settings-page { min-height: 100dvh; background: #fff; color: #20363d; }
  .settings-page .top-nav { background: #fff; color: #20363d; border-bottom: 1px solid #e2eaec; }
  .settings-page .top-nav .brand small { color: #71878c; }.settings-page .top-nav button { color: #526a72; background: #f2f6f7; }
  .settings-page main { min-height: calc(100dvh - 190px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin-top: 0; padding: 0; background: #fff; }
  .settings-page .record-form { border: 0; border-radius: 0; box-shadow: none; padding: 18px 16px; background: #fff; }
  .settings-page input { background: #f5f8f8; color: #20363d; border-color: #d7e2e4; }
  .settings-page .form-actions { position: static; margin-top: 6px; padding: 0; border: 0; box-shadow: none; background: #fff; }
  .settings-page .form-actions button { background: #438ead; }.settings-page .form-actions .secondary { background: #edf2f3; color: #526a72; }
  .settings-page .mobile-bottom-nav { background: rgba(255,255,255,.97); border-color: #dce6e8; }.settings-page .mobile-bottom-nav a, .settings-page .mobile-bottom-nav a span { color: #82969a; }.settings-page .mobile-bottom-nav a:nth-child(5), .settings-page .mobile-bottom-nav a:nth-child(5) span { color: #438ead; }
}