:root {
  --green: #1e6f4f;
  --green-dark: #16543c;
  --green-light: #e8f3ee;
  --bg: #f7f8f7;
  --card: #ffffff;
  --border: #e6e8e6;
  --text: #1c1f1e;
  --muted: #70756f;
  --muted-light: #9aa09a;
  --danger: #d9534f;
  --warn: #e0a030;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 1px 12px rgba(0,0,0,0.03);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
button { font-family: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.muted.small { font-size: 12px; margin-top: 10px; }

/* ---------- Auth gate ---------- */
.auth-gate {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #f0f6f3 0%, #f7f8f7 60%);
  padding: 20px;
}
.auth-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 32px;
  text-align: center;
  max-width: 360px;
  width: 100%;
}
.auth-card h1 { margin: 16px 0 4px; font-size: 22px; }
.logo-badge {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--green); color: white; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin: 0 auto;
}

/* ---------- Buttons ---------- */
.btn {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--green); border-color: var(--green); color: white; }
.btn-primary:hover { background: var(--green-dark); }
.btn-google { width: 100%; justify-content: center; margin-top: 24px; }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--green-light); }
.btn-small { font-size: 12px; padding: 6px 10px; width: 100%; justify-content: center; }
.btn-danger-ghost { background: transparent; color: var(--danger); border-color: #f3d6d4; }
.btn-icon { padding: 6px 10px; }

/* ---------- Layout ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--card);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 20px 14px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; gap: 10px; align-items: center; padding: 4px 6px 20px; }
.brand-title { font-weight: 700; font-size: 15px; }
.brand-sub { font-size: 10px; letter-spacing: .04em; color: var(--muted-light); }

.nav-group-label {
  font-size: 11px; font-weight: 700; color: var(--muted-light);
  letter-spacing: .05em; padding: 14px 10px 6px;
}
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px;
  border: none; background: transparent; text-align: left;
  font-size: 14px; color: var(--text); cursor: pointer;
  width: 100%;
}
.nav-item:hover { background: var(--green-light); }
.nav-item.active { background: var(--green-light); color: var(--green-dark); font-weight: 600; }
.nav-icon { width: 18px; display: inline-block; text-align: center; opacity: .8; }
.nav-badge {
  margin-left: auto; background: var(--border); color: var(--muted);
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 10px;
}
.nav-item.active .nav-badge { background: var(--green); color: white; }

.sidebar-bottom { border-top: 1px solid var(--border); padding-top: 14px; }
.account-row { display: flex; align-items: center; gap: 10px; padding: 6px; margin-bottom: 8px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--green);
  color: white; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; flex-shrink: 0; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-info { overflow: hidden; }
.account-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-email { font-size: 11px; color: var(--muted-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: rgba(247,248,247,0.85); backdrop-filter: blur(6px);
  z-index: 5;
}
.topbar-date { font-size: 13px; color: var(--muted); font-weight: 600; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.view-root { padding: 24px 28px 60px; max-width: 1200px; }

/* ---------- Cards / grid ---------- */
.greeting { font-size: 28px; font-weight: 700; margin: 4px 0 2px; }
.greeting-sub { color: var(--muted); margin-bottom: 24px; font-size: 14px; }

.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px;
}
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow);
}
.stat-card .stat-label { font-size: 12px; color: var(--muted); display:flex; justify-content:space-between; }
.stat-card .stat-value { font-size: 26px; font-weight: 700; margin-top: 6px; }
.stat-card .stat-sub { font-size: 12px; color: var(--muted-light); margin-top: 2px; }

.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

.card-title-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.card-title { font-weight: 700; font-size: 15px; }
.card-sub { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.card-link { font-size: 12px; color: var(--green); font-weight: 600; cursor: pointer; background:none; border:none; }

.task-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px; border-radius: var(--radius-sm); margin-bottom: 6px;
  background: var(--bg);
}
.task-row input[type=checkbox] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--green); }
.task-row .task-title { font-weight: 600; font-size: 13.5px; }
.task-row .task-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.task-row .task-tag {
  margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 3px 8px;
  border-radius: 20px; background: var(--green-light); color: var(--green-dark);
  white-space: nowrap; height: fit-content;
}
.task-row.done .task-title { text-decoration: line-through; color: var(--muted-light); }

.tag-zdrowie { background: #e8f3ee; color: #1e6f4f; }
.tag-rozwoj { background: #ede8fb; color: #6c4fc9; }
.tag-projekt { background: #fbeee0; color: #b96b1f; }
.tag-sluzbowe { background: #e3eefb; color: #2064b9; }
.tag-prywatne { background: #f3e8f8; color: #8a2fb9; }
.tag-finanse { background: #fdeaea; color: #c23d3d; }
.tag-dom { background: #eaf6fb; color: #1d8aa8; }

.progress-row { margin-bottom: 14px; }
.progress-row:last-child { margin-bottom: 0; }
.progress-label-row { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; }
.progress-bar-bg { height: 8px; border-radius: 6px; background: var(--border); overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--green); border-radius: 6px; }
.progress-sub { font-size: 11px; color: var(--muted-light); margin-top: 3px; }

.habit-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.habit-row:last-child { margin-bottom: 0; }
.habit-name { font-size: 13px; font-weight: 600; }
.habit-sub { font-size: 11px; color: var(--muted-light); }
.habit-dots { display: flex; gap: 4px; }
.dot {
  width: 16px; height: 16px; border-radius: 50%; background: var(--green);
  border: 2px solid var(--green);
}
.dot.empty { background: transparent; border-color: var(--border); }
.dot.future { background: transparent; border-color: var(--border); opacity: .5; }

.event-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.event-row:last-child { border-bottom: none; }
.event-time { font-size: 12px; color: var(--muted); width: 44px; flex-shrink: 0; padding-top: 2px; }
.event-bar { width: 3px; border-radius: 2px; background: var(--green); align-self: stretch; }
.event-bar.bill { background: #c23d3d; }
.event-bar.waste { background: #1d8aa8; }
.event-bar.training { background: #b96b1f; }
.event-title { font-size: 13.5px; font-weight: 600; }
.event-sub { font-size: 11.5px; color: var(--muted); }
.event-content { flex:1; display:flex; flex-direction: column; }
.event-row-inner { display:flex; justify-content:space-between; align-items:center; width:100%; }

.empty-state { text-align: center; padding: 30px 10px; color: var(--muted-light); font-size: 13px; }

/* ---------- Tasks view ---------- */
.filter-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-chip {
  border: 1px solid var(--border); background: var(--card); border-radius: 20px;
  padding: 6px 14px; font-size: 12.5px; cursor: pointer; font-weight: 600; color: var(--muted);
}
.filter-chip.active { background: var(--green); color: white; border-color: var(--green); }
.task-list .task-row { background: var(--card); border: 1px solid var(--border); align-items: center; }
.task-row .row-actions { display:flex; gap:4px; margin-left: 8px; }
.row-actions button { border:none; background:none; cursor:pointer; color: var(--muted-light); font-size: 14px; padding: 4px; }
.row-actions button:hover { color: var(--text); }

/* ---------- Calendar view ---------- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 20px; }
.cal-day-head { font-size: 11px; font-weight: 700; color: var(--muted-light); text-align: center; padding-bottom: 4px; }
.cal-cell {
  border: 1px solid var(--border); border-radius: 10px; background: var(--card);
  min-height: 86px; padding: 6px; font-size: 11px; cursor: pointer; position: relative;
}
.cal-cell:hover { border-color: var(--green); }
.cal-cell.other-month { opacity: .35; }
.cal-cell.today { border-color: var(--green); background: var(--green-light); }
.cal-cell .day-num { font-weight: 700; font-size: 12px; margin-bottom: 4px; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 2px; }
.cal-month-nav { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cal-month-nav button { border:none; background: var(--card); border:1px solid var(--border); border-radius:8px; width:30px; height:30px; cursor:pointer; }
.cal-month-nav .cal-title { font-weight: 700; font-size: 16px; }

/* ---------- Habits view ---------- */
.habit-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 10px; margin-top: 10px; }
.habit-pick-item {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px;
  background: var(--card); cursor: pointer; font-size: 13px;
}
.habit-pick-item.selected { border-color: var(--green); background: var(--green-light); }
.habit-pick-cat { font-size: 10.5px; color: var(--muted-light); text-transform: uppercase; letter-spacing: .03em; }

.habit-card { display: flex; justify-content: space-between; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; background: var(--card); }
.habit-card-left { display: flex; flex-direction: column; gap: 4px; }
.streak-badge { font-size: 12px; font-weight: 700; color: var(--green); }

/* ---------- Finance view ---------- */
.bill-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; background: var(--card); }
.bill-row.overdue { border-color: #f1c6c4; background: #fdf3f2; }
.bill-amount { font-weight: 700; font-size: 14px; margin-left: auto; }
.bill-status { font-size: 11px; padding: 3px 8px; border-radius: 20px; font-weight: 700; }
.bill-status.paid { background: var(--green-light); color: var(--green-dark); }
.bill-status.unpaid { background: #fdeaea; color: #c23d3d; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20,22,20,0.45);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px;
}
.modal {
  background: var(--card); border-radius: var(--radius); padding: 24px;
  width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.modal h2 { margin: 0 0 16px; font-size: 17px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--muted); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px;
  font-size: 14px; font-family: inherit; background: var(--bg);
}
.form-group textarea { resize: vertical; min-height: 60px; }
.form-row { display: flex; gap: 10px; }
.form-row > .form-group { flex: 1; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.radio-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.radio-pill { border: 1px solid var(--border); border-radius: 20px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; }
.radio-pill.selected { background: var(--green); color: white; border-color: var(--green); }
.weekday-pills { display: flex; gap: 4px; }
.weekday-pill { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; font-size: 11px; font-weight: 700; }
.weekday-pill.selected { background: var(--green); color: white; border-color: var(--green); }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .app { flex-direction: column; }

  /* Stały pasek zakładek na DOLE ekranu (jak w natywnych appkach iOS) */
  .sidebar {
    width: 100%; height: auto;
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 30;
    flex-direction: row; align-items: stretch; justify-content: space-between;
    padding: 2px 2px calc(2px + env(safe-area-inset-bottom));
    border-right: none; border-top: 1px solid var(--border);
    box-shadow: 0 -2px 14px rgba(0,0,0,0.08);
    overflow: visible;
  }
  .brand { display: none; }
  .sidebar-bottom { display: none; }

  .sidebar-top {
    display: flex; align-items: stretch; flex: 1; min-width: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .sidebar-top::-webkit-scrollbar { display: none; }
  .sidebar-top .nav-group-label { display: none; }
  /* "display:contents" na obu grupach .nav pozwala ustawić wspólną kolejność
     (order) dla wszystkich przycisków razem, niezależnie z której grupy pochodzą. */
  .sidebar-top .nav { display: contents; }

  .nav-item {
    flex: 1 1 0; min-width: 58px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 2px 6px; border-radius: 10px;
    font-size: 10.5px; font-weight: 600; min-height: 56px; position: relative;
  }
  .nav-item .nav-icon {
    width: auto; font-size: 20px; opacity: 1;
  }
  .nav-item.active { background: transparent; color: var(--green); }
  .nav-item.active .nav-icon { color: var(--green); }
  .nav-badge {
    position: absolute; top: 2px; right: 10px; margin-left: 0;
    min-width: 16px; height: 16px; font-size: 10px; display: flex;
    align-items: center; justify-content: center; padding: 0 4px;
  }

  /* Kolejność wg priorytetu: Nawyki, Zadania, Zakupy, Finanse, potem reszta */
  .nav-item[data-view="habits"]    { order: 1; }
  .nav-item[data-view="tasks"]     { order: 2; }
  .nav-item[data-view="shopping"]  { order: 3; }
  .nav-item[data-view="finance"]   { order: 4; }
  .nav-item[data-view="dashboard"] { order: 5; }
  .nav-item[data-view="calendar"]  { order: 6; }
  .nav-item[data-view="contracts"] { order: 7; }

  .topbar {
    position: static; backdrop-filter: none; background: var(--bg);
    padding: 12px 16px; z-index: 1;
  }
  .view-root { padding: 16px 16px calc(84px + env(safe-area-inset-bottom)); }
  .two-col, .stat-grid { grid-template-columns: 1fr; }
}


/* Garmin-inspired health dashboard */
.garmin-dashboard{margin:0 0 22px;padding:clamp(18px,2.2vw,30px);border:1px solid #e6edf5;border-radius:22px;background:linear-gradient(145deg,#fff,#f7faff);box-shadow:0 10px 30px rgba(24,54,94,.08);color:#101b35;overflow:hidden}.garmin-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}.garmin-title{font-size:clamp(22px,2vw,30px);font-weight:800;letter-spacing:-.7px}.garmin-title span{font-weight:600}.garmin-subtitle{margin-top:5px;color:#64748b;font-size:14px}.garmin-sync-note{margin-top:10px;color:#64748b;font-size:12px}.garmin-period{display:flex;gap:4px;padding:4px;border-radius:12px;background:#eef3fa;white-space:nowrap;font-size:12px}.garmin-period span{padding:9px 12px;border-radius:9px}.garmin-period-active{background:#267cff;color:#fff;font-weight:700;box-shadow:0 3px 8px #267cff33}.garmin-metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.garmin-metric{min-width:0;padding:19px;border:1px solid #e8edf5;border-radius:18px;background:#fff;box-shadow:0 5px 16px rgba(25,50,85,.045)}.garmin-metric-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;font-weight:750;color:#1e66c4}.garmin-period-label{font-size:11px;font-weight:500;color:#8290a5}.garmin-value{margin-top:13px;font-size:clamp(28px,3vw,38px);font-weight:800;letter-spacing:-1.2px}.garmin-value small{font-size:14px;font-weight:600;letter-spacing:0;color:#64748b}.garmin-caption{font-size:12px;color:#718096;margin-top:2px}.garmin-spark{display:block;width:100%;height:105px;margin-top:12px;overflow:visible}.garmin-spark text{font-size:10px;fill:#77869c}.garmin-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-top:1px solid #edf1f6;padding-top:13px;margin-top:7px}.garmin-stats span{display:flex;flex-direction:column;gap:5px;font-size:11px;color:#748198}.garmin-stats b{font-size:15px;color:#14213d}.garmin-empty-chart{height:105px;display:grid;place-items:center;text-align:center;color:#718096;font-size:12px}.garmin-history{margin-top:18px;padding:18px;border:1px solid #e8edf5;border-radius:18px;background:#fff}.garmin-history-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.garmin-history-head span{font-size:12px;color:#718096}.garmin-date-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:14px}.garmin-day{display:flex;flex-direction:column;gap:6px;padding:10px 9px;background:#f7f9fd;border:1px solid #edf1f7;border-radius:10px;font-size:11px;color:#52617a}.garmin-day b{font-size:12px;color:#17233d;margin-bottom:2px}.garmin-day strong{color:#14213d}
@media(max-width:900px){.garmin-metric-grid{grid-template-columns:1fr 1fr}.garmin-date-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.garmin-head{flex-direction:column}}@media(max-width:560px){.garmin-dashboard{padding:14px;border-radius:16px}.garmin-metric-grid{grid-template-columns:1fr}.garmin-date-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.garmin-period span{padding:8px}.garmin-history-head{align-items:flex-start;flex-direction:column}}


/* ---------- Przestrzeń UI refresh: calm Apple-inspired silver system ---------- */
:root {
  --green: #3978e8;
  --green-dark: #2865cf;
  --green-light: #edf4ff;
  --bg: #f3f5f8;
  --card: rgba(255,255,255,.94);
  --border: #e4e8ef;
  --text: #172033;
  --muted: #6c7688;
  --muted-light: #9099a8;
  --danger: #d84d58;
  --warn: #d79b35;
  --radius: 20px;
  --radius-sm: 13px;
  --shadow: 0 4px 18px rgba(28,42,68,.045), 0 1px 2px rgba(28,42,68,.025);
}
html, body { min-height:100%; background:#f3f5f8; color:var(--text); font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif; letter-spacing:-.01em; }
body { background-image:none !important; background-color:#f3f5f8 !important; }
button, input, select, textarea { font:inherit; }
button { transition:transform .16s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid rgba(57,120,232,.25); outline-offset:2px; }
.app { background:transparent; gap:0; }
.sidebar { width:258px; padding:24px 16px; background:rgba(250,251,253,.92); border-right:1px solid #e2e6ed; box-shadow:4px 0 24px rgba(22,34,56,.025); }
.brand { padding:4px 8px 26px; gap:12px; }
.logo-badge { background:linear-gradient(145deg,#6f9ef5,#3978e8); border-radius:14px; box-shadow:0 5px 12px rgba(57,120,232,.22); }
.brand-title { font-size:17px; letter-spacing:-.04em; font-weight:750; }
.brand-sub { margin-top:3px; font-size:9px; letter-spacing:.12em; color:#929bab; }
.nav-group-label { padding:18px 10px 8px; font-size:10px; letter-spacing:.12em; color:#9aa3b1; }
.nav { gap:4px; }
.nav-item { min-height:42px; padding:10px 12px; border-radius:12px; color:#596477; font-size:13px; font-weight:560; }
.nav-item:hover { background:#eef2f8; }
.nav-item.active { background:#e8f0ff; color:#2865cf; box-shadow:inset 0 0 0 1px rgba(57,120,232,.06); }
.nav-icon { width:20px; font-size:17px; }
.nav-badge { background:#e9edf3; color:#697488; border-radius:8px; padding:2px 7px; }
.sidebar-bottom { border-color:#e5e9ef; padding-top:16px; }
.avatar { background:#e2eafa; color:#3269c3; }
.account-name { color:#202a3b; }
.account-email { color:#8b94a4; }
.main { min-width:0; }
.topbar { min-height:72px; padding:16px clamp(18px,3vw,40px); background:rgba(243,245,248,.86); border-bottom:1px solid rgba(220,226,235,.8); backdrop-filter:blur(18px); }
.topbar-date { color:#7b8595; font-size:12px; font-weight:600; text-transform:capitalize; }
.topbar-actions { gap:8px; }
.btn { border-color:#e0e5ed; border-radius:12px; padding:10px 14px; background:#fff; color:#344055; font-size:13px; box-shadow:0 1px 1px rgba(20,30,50,.02); }
.btn:hover { border-color:#cbd6e8; background:#f8faff; box-shadow:0 4px 12px rgba(30,50,80,.06); }
.btn-primary { background:#3978e8; color:#fff; border-color:#3978e8; box-shadow:0 4px 10px rgba(57,120,232,.18); }
.btn-primary:hover { background:#2865cf; border-color:#2865cf; }
.btn-ghost { background:rgba(255,255,255,.68); }
.btn-ghost:hover { background:#edf3fc; }
.view-root { padding:clamp(20px,3vw,38px); max-width:1700px; width:100%; margin:0 auto; }
.card, .auth-card { border:1px solid rgba(224,229,238,.92); border-radius:20px; background:var(--card); box-shadow:var(--shadow); }
.card { padding:22px; }
.card-title, .card-title-row { letter-spacing:-.025em; }
.card-title { font-size:15px; font-weight:720; color:#202a3b; }
.card-sub, .greeting-sub { color:#7c8696; font-size:13px; line-height:1.55; }
.greeting { font-size:clamp(27px,3vw,38px); line-height:1.16; font-weight:760; letter-spacing:-.055em; color:#151e2f; }
.greeting-sub { margin:8px 0 22px; }
.stat-grid { gap:14px; margin-bottom:18px; }
.stat-card { min-height:126px; padding:20px; }
.stat-label { color:#7a8597; font-size:12px; font-weight:600; }
.stat-value { margin-top:10px; color:#172033; font-size:32px; font-weight:760; letter-spacing:-.05em; }
.stat-sub { color:#8a94a4; font-size:11px; }
.two-col { gap:18px; margin-bottom:18px; }
.task-row, .habit-row, .event-row { border-color:#edf0f5; }
.task-row { border-radius:12px; padding:12px 10px; }
.task-row:hover { background:#f7f9fc; }
.task-title, .habit-name, .event-title { color:#273247; font-weight:650; }
.task-meta, .habit-sub, .event-sub { color:#8791a1; }
.filter-chip { border-radius:999px; border:1px solid #e1e6ee; background:#fff; padding:8px 13px; color:#6c7789; }
.filter-chip.active { color:#2865cf; border-color:#c9dafb; background:#edf4ff; }
.task-tag { border-radius:8px; font-weight:650; }
.empty-state { padding:28px 14px; color:#8993a2; }
.cal-cell { border-radius:12px; border-color:#edf0f5; }
.cal-cell:hover { background:#f3f7ff; }
.cal-cell.today { background:#edf4ff; border-color:#b9d0ff; }
.cal-cell[style*="outline"] { outline-color:#3978e8 !important; }
.modal, .modal-card, .modal-content { border-radius:20px; }
input, select, textarea { border-radius:11px; border-color:#dfe5ed; }
.garmin-dashboard { border-color:#e3e8f0; background:linear-gradient(145deg,#fff,#f7f9fc); box-shadow:0 5px 20px rgba(28,42,68,.045); color:#172033; }
.garmin-metric, .garmin-history { border-radius:17px; border-color:#e7ebf2; box-shadow:none; }
.garmin-metric-top { color:#3978e8; }
.garmin-period-active { background:#3978e8; box-shadow:0 3px 8px rgba(57,120,232,.18); }
.garmin-day { border-radius:12px; background:#f7f9fc; }
.home-feature-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:16px; margin:22px 0 18px; }
.home-feature-grid > .card { min-width:0; padding:22px; }
.home-feature-heading { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.home-feature-heading > div { min-width:0; flex:1; }
.home-feature-icon { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; flex-shrink:0; font-size:22px; }
.weather-icon { color:#b7791f; background:linear-gradient(145deg,#fff3d5,#ffebbd); }
.health-icon { color:#3477e4; background:linear-gradient(145deg,#e9f1ff,#dbe8ff); }
.home-feature-title { color:#202a3b; font-size:15px; font-weight:740; letter-spacing:-.025em; }
.home-feature-sub { color:#8993a2; font-size:11px; margin-top:4px; line-height:1.4; }
.home-feature-foot { border-top:1px solid #eef1f5; margin-top:16px; padding-top:12px; color:#929bab; font-size:10px; }
.home-weather-content { min-height:142px; }
.weather-loading { min-height:142px; display:flex; gap:10px; align-items:center; justify-content:center; color:#8a94a4; font-size:12px; }
.weather-loader { width:17px; height:17px; border:2px solid #e1e8f4; border-top-color:#3978e8; border-radius:50%; animation:weather-spin .8s linear infinite; }
@keyframes weather-spin { to { transform:rotate(360deg); } }
.weather-main { display:flex; align-items:center; gap:15px; }
.weather-symbol { width:64px; height:64px; display:grid; place-items:center; border-radius:20px; background:linear-gradient(145deg,#f6f8fc,#e9eff8); color:#647b9d; font-size:34px; }
.weather-main > div { display:flex; flex-direction:column; gap:3px; }
.weather-main strong { font-size:42px; line-height:1; letter-spacing:-.06em; font-weight:760; color:#172033; }
.weather-main span:not(.weather-symbol) { color:#6f7b8d; font-size:12px; }
.weather-details, .weather-range { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:17px; color:#8791a1; font-size:10px; }
.weather-details b, .weather-range b { color:#344055; font-weight:700; }
.weather-range { padding-top:12px; border-top:1px solid #edf0f5; margin-top:12px; }
.weather-unavailable { padding:30px 10px; text-align:center; color:#8993a2; font-size:12px; line-height:1.8; }
.weather-retry { margin-top:8px; border:0; background:#edf4ff; color:#2865cf; border-radius:9px; padding:8px 12px; cursor:pointer; }
.home-health-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.home-health-metric { min-width:0; display:flex; flex-direction:column; gap:7px; padding:14px 12px; background:#f7f9fc; border:1px solid #edf0f5; border-radius:14px; }
.home-health-metric > span { color:#7f8999; font-size:11px; }
.home-health-metric strong { color:#172033; font-size:27px; line-height:1.1; letter-spacing:-.045em; white-space:nowrap; }
.home-health-metric strong small { font-size:11px; color:#7d8797; letter-spacing:0; font-weight:600; }
.home-health-metric em { color:#929bab; font-size:9px; font-style:normal; line-height:1.35; }
.home-health-card .card-link { font-size:11px; white-space:nowrap; }
.auth-gate { background:radial-gradient(ellipse at top,#fdfefe 0%,#f3f5f8 70%); }
.auth-card { box-shadow:0 20px 70px rgba(25,40,65,.1); }
@media (max-width:1100px) { .sidebar { width:224px; } .home-feature-grid { grid-template-columns:1fr; } }
@media (max-width:900px) { .home-health-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:560px) {
  .topbar { gap:8px; align-items:flex-start; flex-direction:column; padding:12px 16px; }
  .topbar-actions { width:100%; flex-wrap:wrap; }
  .topbar-actions .btn { flex:1 1 auto; justify-content:center; padding:9px 10px; font-size:12px; }
  .view-root { padding:18px 14px calc(88px + env(safe-area-inset-bottom)); }
  .card { padding:17px; border-radius:17px; }
  .home-feature-grid { gap:12px; margin-top:18px; }
  .home-feature-grid > .card { padding:17px; }
  .home-health-metrics { gap:6px; }
  .home-health-metric { padding:11px 8px; }
  .home-health-metric strong { font-size:22px; }
  .weather-main strong { font-size:38px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }


/* Personal organizer: actionable weekly review */
.weekly-focus { margin:0 0 18px; padding:22px; }
.focus-pill { align-self:center; color:#6f86aa; background:#f0f4fa; border:1px solid #e4ebf5; border-radius:999px; padding:6px 9px; font-size:9px; font-weight:750; letter-spacing:.09em; white-space:nowrap; }
.focus-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px; }
.focus-item { display:flex; align-items:center; gap:12px; width:100%; min-width:0; padding:14px; text-align:left; color:inherit; border:1px solid #e9edf4; background:linear-gradient(135deg,#fbfcfe,#f6f8fb); border-radius:15px; cursor:pointer; }
.focus-item:hover { background:#f0f5ff; border-color:#cbdcf8; transform:translateY(-1px); }
.focus-item.focus-alert { background:linear-gradient(135deg,#fffafa,#fff5f4); border-color:#f4dddd; }
.focus-item-icon { width:34px; height:34px; display:grid; place-items:center; flex-shrink:0; border-radius:11px; color:#3978e8; background:#e9f1ff; font-size:17px; font-weight:750; }
.focus-alert .focus-item-icon { color:#c34d52; background:#fde9e9; }
.focus-item-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:4px; }
.focus-item-copy strong { font-size:12px; color:#263249; font-weight:740; }
.focus-item-copy small { color:#8792a3; font-size:10px; line-height:1.45; }
.focus-arrow { color:#a1adbd; font-size:16px; }
.focus-progress { display:block; width:100%; max-width:190px; height:4px; margin-top:4px; overflow:hidden; border-radius:99px; background:#e4eaf3; }
.focus-progress i { display:block; height:100%; border-radius:99px; background:#3978e8; }
@media(max-width:650px) { .weekly-focus { padding:17px; } .focus-grid { grid-template-columns:1fr; gap:8px; } .focus-pill { display:none; } }