/* macOS Golden Gate visual layer: native SF typography and system materials. */
:root {
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: rgba(255, 255, 255, 0.72);
  --blue: #007aff;
  --green: #30d158;
  --violet: #8e5af7;
  --orange: #ff9f0a;
  --glass: rgba(246, 246, 248, 0.78);
  --shadow: 0 12px 36px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
  --mac-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --mac-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

html {
  font-family: var(--mac-font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: linear-gradient(135deg, rgba(233, 239, 248, 0.18), rgba(100, 123, 139, 0.18)), url('/mountains.svg') center/cover fixed;
}

.shell {
  position: relative;
  padding: 42px 24px 24px;
  border-color: rgba(255, 255, 255, 0.72);
  border-radius: 24px;
  background: rgba(242, 242, 247, 0.62);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: saturate(160%) blur(30px);
  backdrop-filter: saturate(160%) blur(30px);
}

.shell::before {
  position: absolute;
  top: 17px;
  left: 21px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 19px 0 #febc2e, 38px 0 #28c840;
  content: "";
}

.topbar { padding-bottom: 5px; }
.brand small, .metric span, .badge, .hint, .plan-item span { font-size: 12px; }

.hero h1, .login-card h1 {
  font-family: var(--mac-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.hero p, .section-head p, .form-card > p { font-size: 13px; }

.nav {
  width: max-content;
  margin: auto;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 12px;
  background: rgba(118, 118, 128, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.nav button, .seg button {
  min-height: 36px;
  padding: 7px 16px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.nav button.active, .seg button.active {
  color: #1d1d1f;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  font-weight: 600;
}

.avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(145deg, #343a46, #111827);
  font-size: 13px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 2px 8px rgba(0, 0, 0, 0.16);
}

.link-button { min-height: 36px; padding: 0 8px; border-radius: 8px; font-size: 13px; }
.link-button:hover { background: rgba(118, 118, 128, 0.1); }

.glass {
  border-color: rgba(255, 255, 255, 0.74);
  border-radius: 16px;
  background: var(--glass);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: saturate(145%) blur(24px);
  backdrop-filter: saturate(145%) blur(24px);
}

.section-card { padding: 20px; }
.section-head { margin-bottom: 16px; }
.section-head h2 { font-family: var(--mac-display); font-size: 20px; font-weight: 650; letter-spacing: -0.02em; }
.section-head h2 {
  display: flex;
  align-items: center;
  gap: 9px;
}

.mac-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: #4b5563;
}

.section-head .mac-icon {
  width: 22px;
  height: 22px;
  color: #007aff;
}

.greeting-icon {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-left: 4px;
  color: #ff9f0a;
  vertical-align: -3px;
}
.badge { padding: 6px 10px; background: rgba(0, 122, 255, 0.1); color: #0066cc; font-weight: 600; }
.account-grid { gap: 14px; }

.account-card, .plan-item {
  border-color: rgba(60, 60, 67, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.account-card.total {
  border-color: rgba(0, 122, 255, 0.22);
  background: linear-gradient(145deg, rgba(235, 245, 255, 0.88), rgba(255, 255, 255, 0.68));
}

.metric strong, .plan-item strong, .table td {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}

.metric strong { font-family: var(--mac-display); font-size: 22px; font-weight: 650; }
.metric span { color: #73737a; }
.bar { height: 7px; background: rgba(118, 118, 128, 0.16); }

.period-panel select, .period-panel input, .form-card input, .form-card select, .login-card input {
  min-height: 44px;
  border-color: rgba(60, 60, 67, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  color: #1d1d1f;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.primary, .secondary, .tabs button {
  min-height: 44px;
  border-radius: 10px;
  font-weight: 600;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}

.primary { background: #007aff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 122, 255, 0.18); }
.primary:hover { background: #0071e3; }
.primary:active, .secondary:active, .tabs button:active { transform: scale(0.985); }
.secondary, .tabs button { border-color: rgba(60, 60, 67, 0.16); background: rgba(255, 255, 255, 0.78); color: #333338; }

.tabs { width: max-content; padding: 3px; border-radius: 12px; background: rgba(118, 118, 128, 0.1); }
.tabs button { min-height: 36px; padding: 6px 13px; border-color: transparent; background: transparent; }
.tabs button.active { border-color: transparent; background: rgba(255, 255, 255, 0.86); color: #1d1d1f; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }

button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(0, 122, 255, 0.32);
  outline-offset: 2px;
}

input:focus, select:focus { border-color: #007aff; }

.login-card {
  border-color: rgba(255, 255, 255, 0.76);
  border-radius: 24px;
  background: rgba(246, 246, 248, 0.84);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: saturate(160%) blur(30px);
  backdrop-filter: saturate(160%) blur(30px);
}

.login-card h1 { font-size: 31px; }
.toast { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; background: rgba(29, 29, 31, 0.92); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.22); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .shell, .glass, .login-card { background: rgba(246, 246, 248, 0.97); }
}

@media (max-width: 650px) {
  .shell { padding: 14px; }
  .shell::before { display: none; }
  .nav { width: 100%; margin: 0; overflow: auto; }
  .nav button { flex: 0 0 auto; }
  .hero h1 { font-size: 29px; }
}

.period-picker { position: relative; }
.period-range { align-self: center; color: #6e6e73; font-size: 13px; font-weight: 600; white-space: nowrap; }
.logs-card { overflow: hidden; }
.logs-table td:last-child { min-width: 360px; white-space: normal; line-height: 1.4; }
.period-toggle { min-width: 138px; min-height: 42px; display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 13px 0 15px; border: 1px solid rgba(60,60,67,.14); border-radius: 13px; background: rgba(255,255,255,.72); color: #1d1d1f; font: inherit; font-weight: 600; box-shadow: 0 4px 14px rgba(60,60,67,.08); cursor: pointer; }
.period-toggle:hover, .period-picker.open .period-toggle { border-color: rgba(0,122,255,.35); box-shadow: 0 5px 18px rgba(0,122,255,.12); }
.period-toggle .mac-icon { width: 15px; height: 15px; stroke-width: 1.9; }
.period-menu { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; width: 178px; padding: 6px; display: none; gap: 3px; border: 1px solid rgba(60,60,67,.16); border-radius: 15px; background: rgba(250,250,252,.94); box-shadow: 0 16px 40px rgba(0,0,0,.16); backdrop-filter: blur(22px); }
.period-picker.open .period-menu { display: grid; animation: calendar-in .16s ease-out; }
.period-menu button { display: flex; align-items: center; justify-content: space-between; min-height: 35px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: #303038; font: inherit; text-align: left; cursor: pointer; }
.period-menu button:hover { background: rgba(0,122,255,.1); }
.period-menu button[aria-selected="true"] { background: #007aff; color: #fff; font-weight: 600; }
.period-check { font-size: 15px; line-height: 1; }

.chart { position: relative; }
.chart svg { overflow: visible; }
.chart-points { position: absolute; inset: 0; pointer-events: none; }
.chart-point { position: absolute; width: 9px; height: 9px; margin: 0; padding: 0; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%; background: #007aff; box-shadow: 0 1px 4px rgba(0,92,190,.3); pointer-events: auto; cursor: pointer; transition: transform .14s ease, background .14s ease, box-shadow .14s ease; }
.chart-point:hover, .chart-point:focus { transform: translate(-50%, -50%) scale(1.35); background: #005ecb; outline: none; box-shadow: 0 0 0 3px rgba(0,122,255,.18), 0 1px 5px rgba(0,92,190,.35); }
.chart-tooltip { position: absolute; z-index: 5; left: 50%; top: 0; transform: translate(-50%, -100%); max-width: 210px; padding: 7px 10px; border: 1px solid rgba(60,60,67,.14); border-radius: 9px; background: rgba(28,28,30,.9); color: #fff; font-size: 11px; line-height: 1.25; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s ease; }
.chart-tooltip.visible { opacity: 1; }

.balance-section { margin-bottom: 24px; }
.balance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.balance-item { min-height: 104px; padding: 16px; border: 1px solid rgba(60,60,67,.08); border-radius: 16px; background: rgba(255,255,255,.56); }
.balance-item span, .balance-item small { display: block; color: #6e6e73; font-size: 12px; }
.balance-item strong { display: block; margin-top: 12px; color: #1d1d1f; font-size: 22px; letter-spacing: -.02em; }
.balance-total { border-color: rgba(0,122,255,.2); background: linear-gradient(145deg, rgba(0,122,255,.1), rgba(255,255,255,.7)); }
.balance-total strong { color: #007aff; }
.balance-item small { margin-top: 8px; line-height: 1.35; }
.balance-editor { max-width: 860px; }
.balance-preview { display: flex; align-items: baseline; gap: 14px; margin-top: 18px; padding: 17px 18px; border-radius: 15px; background: rgba(0,122,255,.08); }
.balance-preview span { color: #6e6e73; }
.balance-preview strong { color: #007aff; font-size: 26px; }
.balance-preview small { color: #6e6e73; }

@media (max-width: 900px) { .balance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .period-menu { left: 0; right: auto; } .balance-grid { grid-template-columns: 1fr; } .balance-preview { display: grid; gap: 5px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Custom date and month picker. */
.modern-date-control {
  position: relative;
  min-width: 158px;
}

.modern-date-control.hidden { display: none; }

.modern-date-input {
  width: 100%;
  min-height: 44px;
  padding: 0 43px 0 13px !important;
  border: 1px solid rgba(60, 60, 67, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  color: #1d1d1f;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  caret-color: transparent;
}

.modern-date-input:hover { border-color: rgba(60, 60, 67, 0.32); background: rgba(255, 255, 255, 0.9); }

.modern-date-trigger {
  position: absolute;
  top: 50%;
  right: 5px;
  display: grid;
  width: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  place-items: center;
  background: transparent;
  color: #596273;
  transform: translateY(-50%);
  cursor: pointer;
}

.modern-date-trigger:hover { background: rgba(118, 118, 128, 0.1); color: #007aff; }
.modern-date-trigger .mac-icon { width: 18px; height: 18px; color: currentColor; }

.modern-calendar {
  position: fixed;
  z-index: 200;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 18px;
  background: rgba(248, 248, 250, 0.96);
  color: #1d1d1f;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  transform-origin: top center;
  animation: calendar-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes calendar-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.calendar-head {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.calendar-head strong {
  font-family: var(--mac-display);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.015em;
  text-align: center;
}

.calendar-head button {
  display: grid;
  width: 38px;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  place-items: center;
  background: rgba(118, 118, 128, 0.08);
  color: #3a3a3c;
  cursor: pointer;
}

.calendar-head button:hover { background: rgba(118, 118, 128, 0.16); }
.calendar-head .mac-icon { width: 18px; height: 18px; color: currentColor; }

.calendar-weekdays, .calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.calendar-weekdays { margin-bottom: 4px; }

.calendar-weekdays span {
  display: grid;
  height: 26px;
  place-items: center;
  color: #8e8e93;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.calendar-day {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  place-items: center;
  background: transparent;
  color: #1d1d1f;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.calendar-day:hover { background: rgba(118, 118, 128, 0.12); }
.calendar-day.outside { color: #aeaeb2; }
.calendar-day.today:not(.selected) { box-shadow: inset 0 0 0 1.5px rgba(0, 122, 255, 0.72); color: #0066cc; font-weight: 650; }
.calendar-day.selected { background: #007aff; color: #fff; box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3); font-weight: 650; }
.calendar-day:focus-visible, .calendar-month:focus-visible, .calendar-head button:focus-visible, .calendar-footer button:focus-visible { outline: 3px solid rgba(0, 122, 255, 0.3); outline-offset: 2px; }

.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.calendar-month {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 11px;
  background: rgba(118, 118, 128, 0.08);
  color: #333338;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
}

.calendar-month:hover { background: rgba(118, 118, 128, 0.16); }
.calendar-month.selected { background: #007aff; color: #fff; box-shadow: 0 4px 12px rgba(0, 122, 255, 0.26); }

.calendar-footer {
  display: flex;
  justify-content: center;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(60, 60, 67, 0.1);
}

.calendar-footer button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #007aff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.calendar-footer button:hover { background: rgba(0, 122, 255, 0.08); }

@media (max-width: 650px) {
  .modern-date-control { width: 100%; min-width: 0; }
  .period-panel .modern-date-control { width: min(190px, 100%); }
  .modern-calendar {
    top: auto !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 10px !important;
    width: auto !important;
    padding: 18px;
    border-radius: 22px;
    transform-origin: bottom center;
  }
  .calendar-day { min-height: 42px; }
  .calendar-month { min-height: 48px; }
}