/* macOS-inspired website styling: calendar surfaces, soft depth and pill controls. */
:root {
  color-scheme: light;
  --mac-ink: #252433;
  --mac-muted: #777586;
  --mac-line: #d9d7e7b8;
  --mac-glass: #ffffffb8;
  --mac-solid: #fff;
  --mac-soft: #f0eef8;
  --mac-accent: #735bd5;
  --mac-accent-2: #9382ea;
  --mac-shadow: 0 16px 44px #48425f14, 0 2px 8px #48425f0a;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", "Pretendard", sans-serif;
  color: var(--mac-ink);
  background: #ecebf3;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  min-height: 100vh;
  color: var(--mac-ink);
  background:
    radial-gradient(ellipse at 8% 0%, #fff4df 0, transparent 30%),
    radial-gradient(ellipse at 92% 8%, #dedaff 0, transparent 31%),
    radial-gradient(ellipse at 52% 100%, #d9edf2 0, transparent 35%),
    linear-gradient(135deg, #f0ebf4, #eef0f7 56%, #f6f3f7);
  background-attachment: fixed;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", "Pretendard", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease; }
a { transition: color .18s ease, background-color .18s ease; }
::selection { background: #cfc7ff; color: #28233c; }

/* App navigation and work/pay forms */
body:has(#recordsView, #salaryView) .top {
  position: sticky; top: 0; z-index: 20; min-height: 66px; height: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding: 10px max(22px, calc((100vw - 1180px) / 2));
  border: 0; border-bottom: 1px solid #ffffffaa;
  background: #f8f7f9c9; backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 4px 20px #4540560a;
}
body:has(#recordsView, #salaryView) .brand { color: var(--mac-ink); font-size: 15px; font-weight: 720; text-decoration: none; }
.page-tabs { display: flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid #ffffffb8; border-radius: 13px; background: #eae8f0a6; }
.page-tabs a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 10px; color: var(--mac-muted); font-size: 12px; font-weight: 620; text-decoration: none; }
.page-tabs a:hover { color: var(--mac-ink); background: #ffffff8c; }
.page-tabs a.active { color: var(--mac-ink); background: #ffffffed; box-shadow: 0 2px 7px #2c29400e; }
body:has(#recordsView, #salaryView) .save-state { color: var(--mac-muted); font-size: 11px; }
body:has(#recordsView, #salaryView) main { max-width: 1180px; padding: 28px 24px 80px; }
body:has(#recordsView, #salaryView) h1 { color: var(--mac-ink); font-size: 26px; font-weight: 720; letter-spacing: -.8px; }
body:has(#recordsView, #salaryView) .sub, body:has(#recordsView, #salaryView) .help { color: var(--mac-muted); }
body:has(#recordsView, #salaryView) .card,
body:has(#recordsView, #salaryView) .panel,
body:has(#recordsView, #salaryView) .metric {
  border: 1px solid #ffffffd9; border-radius: 18px; background: var(--mac-glass);
  box-shadow: var(--mac-shadow); backdrop-filter: blur(22px) saturate(145%);
}
body:has(#recordsView, #salaryView) .panel { padding: 21px; }
body:has(#recordsView, #salaryView) .metric { background: #ffffff9c; }
body:has(#recordsView, #salaryView) .metric:last-child { background: linear-gradient(145deg, #8875e5, #6854c9); color: #fff; }
body:has(#recordsView, #salaryView) .metric:last-child .value { color: #fff; }
body:has(#recordsView, #salaryView) .metric:last-child .label { color: #f0edff; }
body:has(#recordsView, #salaryView) .metric .value { letter-spacing: -.5px; }
body:has(#recordsView, #salaryView) th { background: #f5f3f9e8; color: var(--mac-muted); }
body:has(#recordsView, #salaryView) th, body:has(#recordsView, #salaryView) td { border-color: #e6e3edbd; }
body:has(#recordsView, #salaryView) .month-head { background: #ffffff4d; border-color: var(--mac-line); }
body:has(#recordsView, #salaryView) .month-label, body:has(#recordsView, #salaryView) .section-title { color: var(--mac-ink); }
body:has(#recordsView, #salaryView) input,
body:has(#recordsView, #salaryView) select,
body:has(#recordsView, #salaryView) .select {
  border: 1px solid #d9d6e5; border-radius: 11px; background: #ffffffd4; color: var(--mac-ink);
  outline: none; transition: border-color .18s, box-shadow .18s, background .18s;
}
body:has(#recordsView, #salaryView) input:focus,
body:has(#recordsView, #salaryView) select:focus { border-color: #9585e6; box-shadow: 0 0 0 4px #8772df20; }
body:has(#recordsView, #salaryView) .btn,
body:has(#recordsView, #salaryView) .logout {
  border: 1px solid #ffffffd9; border-radius: 11px; background: #ffffffae; color: #494658;
  box-shadow: 0 2px 7px #39334d0a;
}
body:has(#recordsView, #salaryView) .btn:hover,
body:has(#recordsView, #salaryView) .logout:hover { transform: translateY(-1px); background: #fff; box-shadow: 0 6px 16px #39334d12; }
body:has(#recordsView, #salaryView) .btn.primary { background: linear-gradient(145deg, #8875e5, #6956cd); color: #fff; }
body:has(#recordsView, #salaryView) .note { border-radius: 12px; background: #f3f1fa; }
body:has(#recordsView, #salaryView) .remove,
body:has(#recordsView, #salaryView) .additional-income-remove { border-radius: 10px; background: #ffffffb8; }

/* Site picker: preserve its cards and the already-requested concise layout. */
body:has(.site) .top {
  height: 64px; display: flex; align-items: center; padding: 0 max(22px, calc((100vw - 1080px) / 2));
  border: 0; border-bottom: 1px solid #ffffffa8; background: #f8f7f9b8; backdrop-filter: blur(22px);
}
body:has(.site) .brand { color: var(--mac-ink); font-size: 15px; font-weight: 720; text-decoration: none; }
body:has(.site) main { max-width: 1080px; margin: 0 auto; padding: 70px 28px 82px; }
body:has(.site) .site { border: 1px solid #ffffffd9; border-radius: 20px; background: #ffffffa8; box-shadow: var(--mac-shadow); backdrop-filter: blur(22px) saturate(145%); }
body:has(.site) .site:hover { transform: translateY(-4px); border-color: #c8c0f4; box-shadow: 0 18px 44px #4e43721b; }
body:has(.site) .icon { border-radius: 15px; background: linear-gradient(145deg, #f1efff, #e5e1fa); color: var(--mac-accent); }
body:has(.site) .site h3 { color: var(--mac-ink); }
body:has(.site) .site p { color: var(--mac-muted); }
body:has(.site) .site-foot { color: var(--mac-accent); }

/* Calendar page uses calendar-native navigation, event sections and view controls. */
body:has(.calendar-box) .app { min-height: 100vh; grid-template-columns: 268px minmax(0, 1fr); gap: 0; background: transparent; }
body:has(.calendar-box) .side {
  position: sticky; top: 0; height: 100dvh; padding: 23px 17px 18px; gap: 19px;
  color: var(--mac-ink); background: #f6f4f9a8; border-right: 1px solid #ffffffba; backdrop-filter: blur(26px) saturate(145%);
}
body:has(.calendar-box) .brand { color: var(--mac-ink); }
body:has(.calendar-box) .brand-icon { border-radius: 12px; background: linear-gradient(145deg, #8b79e7, #5e4abf); box-shadow: 0 5px 14px #735bd538; }
body:has(.calendar-box) .side-create, body:has(.calendar-box) .primary {
  border: 1px solid #8b78e3; border-radius: 12px; background: linear-gradient(145deg, #8875e5, #6956cd);
  color: #fff; box-shadow: 0 6px 15px #735bd52c;
}
body:has(.calendar-box) .side-create:hover, body:has(.calendar-box) .primary:hover { transform: translateY(-1px); box-shadow: 0 9px 20px #735bd53a; }
body:has(.calendar-box) .mini-head, body:has(.calendar-box) .mini-grid .wd { color: var(--mac-muted); }
body:has(.calendar-box) .mini-grid span { color: #625f70; border-radius: 50%; }
body:has(.calendar-box) .mini-grid .picked { background: var(--mac-accent); color: #fff; }
body:has(.calendar-box) .mini-grid .today:not(.picked) { color: var(--mac-accent); font-weight: 800; }
body:has(.calendar-box) .side-section { border-color: #dcd9e5; color: var(--mac-muted); }
body:has(.calendar-box) .cal-entry { color: #504d5d; }
body:has(.calendar-box) .main { padding: 24px clamp(18px, 3vw, 40px) 42px; }
body:has(.calendar-box) .main { background: #ffffff40; }
body:has(.calendar-box) .topbar { height: 42px; margin-bottom: 25px; }
body:has(.calendar-box) .crumb { color: var(--mac-muted); }
body:has(.calendar-box) .crumb strong, body:has(.calendar-box) .headline h1 { color: var(--mac-ink); }
body:has(.calendar-box) .search,
body:has(.calendar-box) .navbtn,
body:has(.calendar-box) .todaybtn,
body:has(.calendar-box) .viewbtn,
body:has(.calendar-box) .settings {
  border: 1px solid #ffffffd9; border-radius: 11px; background: #ffffffad; color: #514e60; box-shadow: 0 2px 8px #423d5609;
}
body:has(.calendar-box) .navbtn:hover,
body:has(.calendar-box) .todaybtn:hover,
body:has(.calendar-box) .settings:hover { background: #fff; transform: translateY(-1px); }
body:has(.calendar-box) .view-tabs { border: 1px solid #ffffffb8; border-radius: 12px; background: #e8e5efb8; padding: 4px; }
body:has(.calendar-box) .view-tab { border-radius: 9px; padding: 8px 15px; color: var(--mac-muted); font-size: 12px; }
body:has(.calendar-box) .view-tab.active { color: var(--mac-ink); background: #ffffffed; box-shadow: 0 2px 8px #39334d12; }
body:has(.calendar-box) .calendar-box,
body:has(.calendar-box) .mobile-agenda { border: 1px solid #ffffffd9; border-radius: 18px; background: #ffffffba; box-shadow: var(--mac-shadow); backdrop-filter: blur(22px) saturate(140%); }
body:has(.calendar-box) .week-head { background: #f9f8fbe8; }
body:has(.calendar-box) .week-head, body:has(.calendar-box) .all-day-row, body:has(.calendar-box) .week-date, body:has(.calendar-box) .week-day-column, body:has(.calendar-box) .hour-lines i { border-color: #e6e3edc9; }
body:has(.calendar-box) .week-date.today b { background: var(--mac-accent); }
body:has(.calendar-box) .week-body, body:has(.calendar-box) .all-day-row { background: #ffffff52; }
body:has(.calendar-box) .hour-lines i:nth-child(odd) { border-top-color: #efedf3; }
body:has(.calendar-box) .day { background: #ffffff55; }
body:has(.calendar-box) .day.outside { background: #eeecf480; }
body:has(.calendar-box) .day.today .daynum { background: var(--mac-accent); }
body:has(.calendar-box) .event, body:has(.calendar-box) .week-event { border-radius: 8px; }
body:has(.calendar-box) .modal { border: 1px solid #ffffffed; border-radius: 20px; background: #f7f6fbeF; box-shadow: 0 24px 70px #25203832; backdrop-filter: blur(26px); }
body:has(.calendar-box) .field input, body:has(.calendar-box) .field textarea, body:has(.calendar-box) .field select { border-radius: 11px; }
body:has(.calendar-box) .secondary { border-radius: 10px; background: #ffffffbd; }
body:has(.calendar-box) .summary-item { border-radius: 11px; color: #504d5d; }
body:has(.calendar-box) .summary-item:hover { background: #ffffffad; }
body:has(.calendar-box) .summary-date { color: var(--mac-ink); }
body:has(.calendar-box) .summary-copy small { color: var(--mac-muted); }
body:has(.calendar-box) .summary-heading { color: #514e60; }
body:has(.calendar-box) .summary-empty { color: var(--mac-muted); }

/* One unobtrusive, shared theme switch. */
.mac-theme-toggle {
  position: fixed !important; z-index: 50; right: max(20px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  min-height: 40px; padding: 0 15px !important; border: 1px solid #ffffffdf !important; border-radius: 999px !important;
  color: #4c495a !important; background: #ffffffc9 !important; box-shadow: 0 8px 24px #39334d18 !important;
  backdrop-filter: blur(20px); font-size: 12px !important; font-weight: 650;
}
.mac-theme-toggle:hover { transform: translateY(-2px); box-shadow: 0 12px 28px #39334d24 !important; }

html[data-theme="dark"] {
  color-scheme: dark; --mac-ink: #f0eef7; --mac-muted: #b9b6c8; --mac-line: #ffffff24; --mac-glass: #302f3bdc;
  --mac-solid: #2c2b37; --mac-soft: #393746; --mac-shadow: 0 16px 44px #0003, 0 2px 8px #0002;
  background: #1c1c27;
}
html[data-theme="dark"] body { color: var(--mac-ink); background: radial-gradient(ellipse at 12% 0%, #433956 0, transparent 34%), radial-gradient(ellipse at 90% 7%, #303454 0, transparent 32%), linear-gradient(145deg, #1b1b25, #252533 58%, #1d202b); background-attachment: fixed; }
html[data-theme="dark"] body:has(#recordsView, #salaryView) .top,
html[data-theme="dark"] body:has(.site) .top { background: #252430cf; border-color: #ffffff1b; }
html[data-theme="dark"] body:has(#recordsView, #salaryView) .brand,
html[data-theme="dark"] body:has(.site) .brand,
html[data-theme="dark"] body:has(#recordsView, #salaryView) h1,
html[data-theme="dark"] body:has(.site) .site h3 { color: var(--mac-ink); }
html[data-theme="dark"] .page-tabs { background: #17172088; border-color: #ffffff18; }
html[data-theme="dark"] .page-tabs a { color: #c0bdce; }
html[data-theme="dark"] .page-tabs a.active { color: #fff; background: #ffffff20; }
html[data-theme="dark"] body:has(#recordsView, #salaryView) .card,
html[data-theme="dark"] body:has(#recordsView, #salaryView) .panel,
html[data-theme="dark"] body:has(#recordsView, #salaryView) .metric,
html[data-theme="dark"] body:has(.site) .site { color: var(--mac-ink); background: #302f3bdc; border-color: #ffffff24; }
html[data-theme="dark"] body:has(#recordsView, #salaryView) .metric:last-child { background: linear-gradient(145deg, #7767cf, #51439c); }
html[data-theme="dark"] body:has(#recordsView, #salaryView) th { background: #353440; }
html[data-theme="dark"] body:has(#recordsView, #salaryView) th,
html[data-theme="dark"] body:has(#recordsView, #salaryView) td { border-color: #ffffff17; }
html[data-theme="dark"] body:has(#recordsView, #salaryView) input,
html[data-theme="dark"] body:has(#recordsView, #salaryView) select,
html[data-theme="dark"] body:has(#recordsView, #salaryView) .select,
html[data-theme="dark"] body:has(#recordsView, #salaryView) .btn,
html[data-theme="dark"] body:has(#recordsView, #salaryView) .logout { color: var(--mac-ink); background: #3b3948; border-color: #ffffff24; }
html[data-theme="dark"] body:has(#recordsView, #salaryView) .btn.primary { background: linear-gradient(145deg, #8875e5, #6956cd); color: #fff; }
html[data-theme="dark"] body:has(#recordsView, #salaryView) .note { color: #d1cede; background: #353341; }
html[data-theme="dark"] body:has(.site) .site p,
html[data-theme="dark"] body:has(#recordsView, #salaryView) .sub,
html[data-theme="dark"] body:has(#recordsView, #salaryView) .help { color: var(--mac-muted); }
html[data-theme="dark"] body:has(.site) .icon { color: #c7bcff; background: #47425f; }
html[data-theme="dark"] body:has(.calendar-box) .side { color: var(--mac-ink); background: #252430d9; border-color: #ffffff1b; }
html[data-theme="dark"] body:has(.calendar-box) .main { background: #18182040; }
html[data-theme="dark"] body:has(.calendar-box) .brand,
html[data-theme="dark"] body:has(.calendar-box) .headline h1,
html[data-theme="dark"] body:has(.calendar-box) .crumb strong { color: var(--mac-ink); }
html[data-theme="dark"] body:has(.calendar-box) .mini-grid span,
html[data-theme="dark"] body:has(.calendar-box) .cal-entry { color: #d2cfdd; }
html[data-theme="dark"] body:has(.calendar-box) .side-section { color: #bdb9ca; border-color: #ffffff20; }
html[data-theme="dark"] body:has(.calendar-box) .search,
html[data-theme="dark"] body:has(.calendar-box) .navbtn,
html[data-theme="dark"] body:has(.calendar-box) .todaybtn,
html[data-theme="dark"] body:has(.calendar-box) .settings { color: #eeeaf8; background: #373644; border-color: #ffffff24; }
html[data-theme="dark"] body:has(.calendar-box) .view-tabs { background: #201f2a; border-color: #ffffff1e; }
html[data-theme="dark"] body:has(.calendar-box) .view-tab { color: #c3bfd0; }
html[data-theme="dark"] body:has(.calendar-box) .view-tab.active { color: #fff; background: #494656; }
html[data-theme="dark"] body:has(.calendar-box) .calendar-box,
html[data-theme="dark"] body:has(.calendar-box) .mobile-agenda { color: var(--mac-ink); background: #302f3bdc; border-color: #ffffff24; }
html[data-theme="dark"] body:has(.calendar-box) .week-head,
html[data-theme="dark"] body:has(.calendar-box) .all-day-row,
html[data-theme="dark"] body:has(.calendar-box) .week-body,
html[data-theme="dark"] body:has(.calendar-box) .day { background: #302f3b; }
html[data-theme="dark"] body:has(.calendar-box) .day.outside { background: #ffffff08; }
html[data-theme="dark"] body:has(.calendar-box) .week-head,
html[data-theme="dark"] body:has(.calendar-box) .all-day-row,
html[data-theme="dark"] body:has(.calendar-box) .week-date,
html[data-theme="dark"] body:has(.calendar-box) .week-day-column,
html[data-theme="dark"] body:has(.calendar-box) .hour-lines i { border-color: #ffffff18; }
html[data-theme="dark"] body:has(.calendar-box) .week-date small,
html[data-theme="dark"] body:has(.calendar-box) .hour-labels,
html[data-theme="dark"] body:has(.calendar-box) .daynum { color: #c0bdcc; }
html[data-theme="dark"] body:has(.calendar-box) .modal { color: var(--mac-ink); background: #302f3bf2; border-color: #ffffff26; }
html[data-theme="dark"] body:has(.calendar-box) .field input,
html[data-theme="dark"] body:has(.calendar-box) .field textarea,
html[data-theme="dark"] body:has(.calendar-box) .field select,
html[data-theme="dark"] body:has(.calendar-box) .secondary { color: var(--mac-ink); background: #3a3947; border-color: #ffffff24; }
html[data-theme="dark"] body:has(.calendar-box) .summary-heading,
html[data-theme="dark"] body:has(.calendar-box) .summary-date,
html[data-theme="dark"] body:has(.calendar-box) .summary-copy b { color: #ece9f4; }
html[data-theme="dark"] body:has(.calendar-box) .summary-item { color: #ece9f4; }
html[data-theme="dark"] body:has(.calendar-box) .summary-item:hover { background: #ffffff12; }
html[data-theme="dark"] .mac-theme-toggle { color: #f1eff8 !important; background: #393746e8 !important; border-color: #ffffff30 !important; }

@media (max-width: 760px) {
  body:has(#recordsView, #salaryView) .top { gap: 8px; padding: 9px 12px; }
  .page-tabs { order: 3; width: 100%; }
  .page-tabs a { flex: 1; justify-content: center; min-height: 40px; }
  body:has(#recordsView, #salaryView) .save-state { margin-left: auto; font-size: 10px; }
  body:has(#recordsView, #salaryView) main { padding: 19px 12px 85px; }
  body:has(#recordsView, #salaryView) .panel { padding: 15px; }
  body:has(#recordsView, #salaryView) tbody#recordRows { background: #eae8f1a8; }
  body:has(#recordsView, #salaryView) tbody#recordRows tr { border-color: #ffffffd9; background: #ffffffc7; box-shadow: var(--mac-shadow); }
  body:has(.site) .top { height: 58px; padding: 0 17px; }
  body:has(.site) main { padding: 34px 17px 80px; }
  body:has(.site) .site { min-height: 174px; padding: 18px; border-radius: 17px; }
  body:has(.calendar-box) .app { display: block; }
  body:has(.calendar-box) .side { position: relative; top: auto; height: auto; padding: 12px 14px; gap: 10px; border-right: 0; border-bottom: 1px solid #ffffffba; }
  body:has(.calendar-box) .main { padding: 13px 12px 85px; }
  body:has(.calendar-box) .topbar { height: 34px; margin-bottom: 16px; }
  body:has(.calendar-box) .calendar-box, body:has(.calendar-box) .mobile-agenda { border-radius: 15px; }
  .mac-theme-toggle { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); min-height: 38px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }