/* Shared spacing and typography. Keep calendar colors/theme independent. */
:root {
  --mfx-text-3: #687386;
  --mfx-shadow: 0 3px 16px rgba(15, 23, 42, .045);
  --fs-body: 15px;
  --fs-label: 13px;
  --fs-help: 13px;
  --fs-table: 14px;
  --fs-h1: 26px;
  --fs-h2: 18px;
  --lh-body: 1.7;
  --lh-tight: 1.4;
}
body { -webkit-text-size-adjust: 100%; }
body.mfx-no-topnav, body.login-page, .chart-index, .chart-account {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  line-height: 1.7;
}
body.mfx-no-topnav #main { padding: 32px !important; }
body.mfx-no-topnav .pagetitle { margin-bottom: 28px; gap: 16px; flex-wrap: wrap; }
body.mfx-no-topnav .pagetitle h1 { font-size: 26px !important; line-height: 1.4; letter-spacing: -.02em; margin: 0 0 8px; }
body.mfx-no-topnav .pagetitle .breadcrumb { margin-bottom: 0; font-size: 13px; }
body.mfx-no-topnav .card { margin-bottom: 24px; }
body.mfx-no-topnav .card-header { padding: 20px 24px; }
body.mfx-no-topnav .card-header h5 { font-size: 17px !important; line-height: 1.5; }
body.mfx-no-topnav .card-body { padding: 24px; }
body.mfx-no-topnav .card-footer { padding: 16px 24px; }
body.mfx-no-topnav .card-title { font-size: 18px; padding: 0; margin: 0 0 16px; line-height: 1.5; }
body.mfx-no-topnav .card-body p { line-height: 1.8; }
body.mfx-no-topnav .table th, body.mfx-no-topnav .table td { padding: 14px 12px; line-height: 1.6; }
body.mfx-no-topnav .table th { font-size: 13px; color: #526075; }
body.mfx-no-topnav .form-label, .mfx-settings-label { font-size: 14px; line-height: 1.5; margin-bottom: 8px; font-weight: 600; }
body.mfx-no-topnav .form-control, body.mfx-no-topnav .form-select { min-height: 44px; padding: 10px 12px; font-size: 16px; line-height: 1.5; }
body.mfx-no-topnav .btn { min-height: 44px; padding: 10px 16px; font-size: 14px; line-height: 1.5; border-radius: 9px; }
body.mfx-no-topnav .btn-sm { padding: 10px 12px; }
body.mfx-no-topnav .card-body small { display: inline-block; margin-top: 6px; line-height: 1.7; }
.mfx-settings-hint, .mfx-dash-card-sub { font-size: 13px; line-height: 1.65; }
.mfx-dash-cards { gap: 20px; margin-bottom: 24px; }
.mfx-dash-card { padding: 22px 24px; min-width: 0; }
.mfx-dash-card-label { font-size: 13px; letter-spacing: 0; margin-bottom: 12px; }
.mfx-dash-card-value { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mfx-dash-card-sub { margin-top: 8px; }
.ob-step-card { padding: 20px; }
.ob-step-card-title { font-size: 16px; line-height: 1.5; flex-wrap: wrap; gap: 8px; }
.ob-step-card-desc, .mfx-ob-done-body { font-size: 14px; line-height: 1.8; }
.ob-warn { padding: 14px 16px; font-size: 13px; line-height: 1.75; }
.sidebar .nav-item .nav-link { min-height: 44px; font-size: 14px; }
#mfx-bottom-nav { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
#mfx-bottom-nav .mfx-nav-item { min-height: 52px; gap: 5px; }
#mfx-bottom-nav .mfx-nav-label { font-size: 11px; line-height: 1.35; }
#mfx-mobile-header .mfx-icon-btn { width: 44px; height: 44px; }
#mfx-drawer .mfx-drawer-item { min-height: 48px; }
#mfx-drawer .mfx-drawer-item-label { font-size: 14px; }

/* Portfolio: put the amount first in the visual hierarchy. */
main.chart-portfolio { width: min(calc(100% - 48px), 720px); margin: 32px auto; padding: 32px; text-align: left; }
main.chart-portfolio h2 { font-size: 22px; line-height: 1.5; margin-bottom: 12px; }
main.chart-portfolio #total-revenue { font-size: 28px; line-height: 1.4; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
main.chart-portfolio .chart-portfolio__visual { padding: 24px 0; min-height: 340px; }
main.chart-portfolio .chart-portfolio__visual.is-empty { min-height: 112px; }
main.chart-portfolio .chart-portfolio__empty { text-align: center; line-height: 1.7; padding: 16px; text-wrap: balance; }
main.chart-portfolio .form-check { margin: 8px 0 20px; min-height: 44px; padding: 12px 14px; background: #f5f7fb; border-radius: 10px; }
main.chart-portfolio .form-check-label { font-size: 14px; line-height: 1.5; }
main.chart-portfolio .revenue-table th { font-size: 13px; font-weight: 600; color: #526075; background: #f5f7fb; }
main.chart-portfolio .revenue-table td { font-size: 15px; font-variant-numeric: tabular-nums; }
main.chart-portfolio .revenue-table th, main.chart-portfolio .revenue-table td { padding: 16px 8px; line-height: 1.6; }
main.chart-portfolio .revenue-table th:first-child, main.chart-portfolio .revenue-table td:first-child { text-align: left; }
main.chart-portfolio .revenue-table th:last-child, main.chart-portfolio .revenue-table td:last-child { text-align: right; width: 44%; }
main.chart-portfolio .revenue-table small { font-size: 12px; }

/* Account cards and calendar use their existing light/dark colors. */
.chart-index { padding: 24px 16px; }
.chart-index .app-header { gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.chart-index .app-title { font-size: 26px; line-height: 1.4; }
.chart-index .totals-card, .chart-index .acc-card { box-sizing: border-box; padding: 24px; }
.chart-index .accounts-list { gap: 20px; }
.chart-index .acc-card__head { gap: 12px; flex-wrap: wrap; }
.chart-index .acc-card__grid { gap: 16px; margin-top: 20px; }
.chart-index .acc-metric .label, .chart-index .totals-card__item .label { font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
.chart-index .acc-metric .value { font-size: 20px; line-height: 1.4; }
.chart-account { gap: 24px; }
.chart-account .card--full { padding: 28px; }
.calendar-container .calendar-header { padding: 12px; gap: 8px; margin-bottom: 20px; }
.calendar-container .calendar-btn { width: 44px; height: 44px; flex-shrink: 0; }
.calendar-container .calendar-title { font-size: 20px; line-height: 1.4; }
.calendar-container .tag-filter { margin: 16px 0; }
.calendar-container .tag-filter select { min-height: 44px; max-width: 100%; font-size: 16px; padding: 8px 12px; }
.calendar-container .month-total { margin-top: 20px; line-height: 1.5; }
.calendar-container .rate-note { font-size: 12px; line-height: 1.7; margin: 8px 0 20px; }
.calendar-container .ea-card { padding: 18px; margin-bottom: 16px; }
.calendar-container .ea-values { line-height: 1.8; }

/* Sign-in and registration. */
body.login-page { font-size: 15px; line-height: 1.75; }
body.login-page .card-head h1, body.login-page .mfx-card-head h1 { font-size: 24px; line-height: 1.4; margin-bottom: 12px; }
body.login-page .card-head p, body.login-page .mfx-card-head p { font-size: 14px; line-height: 1.75; }
body.login-page input:not([type=checkbox]):not([type=radio]):not([type=hidden]), body.login-page select { min-height: 46px; font-size: 16px; line-height: 1.5; }
body.login-page button[type=submit], body.login-page .btn { min-height: 46px; font-size: 15px; }

/* Public homepage: comfortable text measure and consistent section rhythm. */
body.home { font-size: 16px; line-height: 1.8; }
body.home *, body.home *::before, body.home *::after { box-sizing: border-box; }
body.home header.main-visual { padding: 96px 24px 72px; }
body.home .main-text h1 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.4; letter-spacing: -.025em; margin-bottom: 24px; }
body.home .main-text p { font-size: 17px; line-height: 1.9; margin-bottom: 32px; }
body.home section.section { margin: 80px auto; padding: 0 24px; }
body.home section.section h2, body.home .testimonial-title, body.home .feature-preview .section-title, body.home .steps-header h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.5; margin-bottom: 28px; }
body.home .flow-blocks, body.home .feature-blocks { gap: 24px; }
body.home .flow-block, body.home .feature-block, body.home .faq-item, body.home .voice-item { padding: 28px; }
body.home .flow-block h3, body.home .feature-block h3, body.home .step-box h3, body.home .faq-item h3 { font-size: 18px; line-height: 1.6; margin: 12px 0; }
body.home .flow-block p, body.home .feature-block p, body.home .faq-item p, body.home .step-desc { font-size: 15px; line-height: 1.85; }
body.home .simple-steps, body.home .feature-preview, body.home .testimonial-section, body.home .blog-feature-pro { padding: 72px 24px; }
body.home .btn-main, body.home .cta-banner-btn { min-height: 48px; border-radius: 10px; line-height: 1.5; }
body.home .lp-footer__inner { padding: 32px 24px; line-height: 2; }

@media (max-width: 768px) {
  body.mfx-no-topnav { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  body.mfx-no-topnav #main { padding: 24px 16px !important; }
  body.mfx-no-topnav .pagetitle { margin-bottom: 24px; }
  body.mfx-no-topnav .pagetitle h1 { font-size: 24px !important; }
  body.mfx-no-topnav .card-header, body.mfx-no-topnav .card-body { padding: 20px; }
  body.mfx-no-topnav .card-footer { padding: 16px 20px; }
  .mfx-dash-cards { gap: 16px; }
  .mfx-dash-card { padding: 20px; }
  .chart-index .totals-card, .chart-index .acc-card { padding: 20px; }
  .chart-index .app-title { font-size: 24px; }
  .chart-account .card--full { padding: 20px; }
  main.chart-portfolio { width: calc(100% - 32px); margin: 24px auto; padding: 24px 20px; }
  main.chart-portfolio h2 { font-size: 20px; }
  main.chart-portfolio #total-revenue { font-size: 24px; }
  main.chart-portfolio .chart-portfolio__visual { min-height: 280px; padding: 20px 0; }
  main.chart-portfolio .chart-portfolio__visual.is-empty { min-height: 100px; }
  main.chart-portfolio .revenue-table td { font-size: 14px; }
  main.chart-portfolio .revenue-table th { font-size: 12px; }
  main.chart-portfolio .revenue-table th, main.chart-portfolio .revenue-table td { padding: 14px 4px; }
  main.chart-portfolio .revenue-table small { font-size: 11px; }
  body.home header.main-visual { padding: 88px 20px 48px; }
  body.home .main-text { padding: 0; }
  body.home .main-text p { font-size: 16px; line-height: 1.85; }
  body.home section.section { margin: 56px auto; padding: 0 20px; }
  body.home .simple-steps, body.home .feature-preview, body.home .testimonial-section, body.home .blog-feature-pro { padding: 48px 20px; }
  body.home .flow-blocks, body.home .feature-blocks { gap: 16px; }
  body.home .flow-block, body.home .feature-block, body.home .faq-item, body.home .voice-item { padding: 24px 20px; }
  body.home .feature-blocks { grid-template-columns: 1fr; }
  body.home .step-box { width: 100%; max-width: 420px; }
}
@media (max-width: 360px) {
  main.chart-portfolio { padding: 20px 12px; }
  main.chart-portfolio #total-revenue { font-size: 22px; }
  .chart-index .acc-card { padding: 16px; }
}