/* ─── Header ─── */
.header {
  padding: 8px 20px 12px;
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-shrink: 0;
}
.hd-meta { font-size: 11px; font-weight: 600; color: var(--pink-mid); letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 2px; }
.hd-title { display: flex; align-items: center; gap: 8px; font-size: 28px; font-weight: 800; color: var(--text1); letter-spacing: -0.5px; line-height: 1; }
.hd-title .sparkle { font-size: 22px; }
.settings-btn {
  width: 44px; height: 44px; border-radius: 16px;
  background: rgba(var(--surface-rgb),0.65);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1.5px solid var(--glass-border);
  box-shadow: 0 2px 12px rgba(var(--shadow-rgb),0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer; padding: 0; font-family: inherit;
  transition: transform .15s;
}
.settings-btn:active { transform: scale(0.9); }

/* ─── Progress / summary card ─── */
.progress-card {
  margin: 0 16px 14px; flex-shrink: 0;
  background: rgba(var(--surface-rgb),0.68);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 24px rgba(var(--shadow-rgb),0.10), inset 0 1px 0 var(--glass-hi);
  padding: 18px 20px;
  display: flex; gap: 16px; align-items: flex-start;
  animation: fadeUp .3s ease both;
}
.pc-left { flex-shrink: 0; text-align: center; min-width: 56px; }
.pc-nums { font-size: 32px; font-weight: 800; color: var(--text1); line-height: 1; letter-spacing: -1px; }
.pc-nums span { color: var(--pink-mid); }
.pc-today { font-size: 10px; font-weight: 600; color: var(--text3); letter-spacing: 1px; text-transform: uppercase; margin-top: 3px; }
.pc-right { flex: 1; min-width: 0; }
.pc-label { font-size: 10px; font-weight: 600; color: var(--pink-mid); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.pc-title { font-size: 17px; font-weight: 700; color: var(--text1); line-height: 1.25; margin-bottom: 10px; }
.pc-track { height: 6px; border-radius: 3px; background: rgba(var(--accent-rgb),0.2); overflow: hidden; margin-bottom: 6px; }
.pc-fill { height: 100%; border-radius: 3px; background: var(--grad-progress); transition: width .5s ease; }
.pc-pct { font-size: 11px; font-weight: 600; color: var(--pink-mid); display: flex; align-items: center; gap: 4px; }
.all-tasks-link {
  margin-top: 10px; background: rgba(var(--accent-rgb),0.12);
  border: 1px solid rgba(var(--accent-rgb),0.25); color: var(--pink-mid);
  font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: 12px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Inter', sans-serif;
}
.all-tasks-link:active { transform: scale(0.96); }

/* Perfectly centered plus icon (used in FAB + add-task-bar) */
.plus-icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.plus-icon::before, .plus-icon::after { content: ''; position: absolute; background: #fff; border-radius: 2px; }
.plus-icon::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.plus-icon::after  { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }

/* ─── FAB ─── */
.fab {
  position: fixed; right: 20px; bottom: calc(var(--sb) + 78px);
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--grad-tab);
  box-shadow: 0 6px 24px rgba(var(--accent-rgb),0.50);
  border: none; cursor: pointer; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.fab:active { transform: scale(0.88); }
.fab .plus-icon { width: 20px; height: 20px; }
.fab .plus-icon::before, .fab .plus-icon::after { border-radius: 3px; }

/* ─── Bottom tab bar ─── */
.bottom-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  height: calc(var(--sb) + 66px);
  background: rgba(var(--surface-rgb),0.75);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-top: 1.5px solid var(--glass-border);
  box-shadow: 0 -4px 20px rgba(var(--shadow-rgb),0.10);
  display: flex; align-items: flex-start; padding-top: 8px;
  padding-bottom: var(--sb);
}
.bar-tab { flex: 1; display: flex; justify-content: center; cursor: pointer; -webkit-user-select: none; }
.bt-pill {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 18px; border-radius: 16px;
  transition: all .22s cubic-bezier(.34,1.3,.64,1);
}
.bar-tab.active .bt-pill { background: var(--grad-tab); box-shadow: 0 3px 14px rgba(var(--accent-rgb),0.4); }
.bt-icon { font-size: 16px; color: var(--text3); transition: color .2s; }
.bar-tab.active .bt-icon { color: #fff; }
.bt-lbl { font-size: 11px; font-weight: 600; color: var(--text3); letter-spacing: 0.2px; transition: color .2s; }
.bar-tab.active .bt-lbl { color: #fff; }
.bar-tab:active .bt-pill { opacity: 0.8; }