:root {
  --bg: #f6f7fb;
  --text: #263238;
  --muted: #607d8b;
  --brand: #e53935;
  --brand-2: #1e88e5;
  --ok: #22c55e;
  --warn: #ef4444;
  --card: #ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Fredoka', 'Noto Sans SC', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 20% -10%, #e3f2fd 0%, transparent 40%),
              radial-gradient(1200px 800px at 100% 0%, #e8eaf6 0%, transparent 40%),
              var(--bg);
  color: var(--text);
}

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.brand .logo-text { font-size: 22px; letter-spacing: 0.5px; }
.nav a { color: var(--muted); text-decoration: none; margin-left: 14px; }
.nav a:hover { color: var(--text); }

.flash-container { max-width: 1800px; margin: 0 auto; padding: 0 16px; }
.flash { padding: 10px 12px; border-radius: 10px; margin: 6px 0; box-shadow: var(--shadow); background: var(--card); }
.flash.success { border-left: 6px solid var(--ok); }
.flash.error { border-left: 6px solid var(--warn); }
.flash.info { border-left: 6px solid var(--brand-2); }

.main { max-width: 1800px; margin: 0 auto; padding: 16px; }
.table-input { border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px 8px; font: inherit; }
.quick-add td { background: #f9fafb; }
.banner { padding: 10px 14px; border-radius: 12px; box-shadow: var(--shadow); margin-bottom: 10px; }
.banner.warning { background: #fff7ed; color: #9a3412; }
.banner.info { background: #e0f2fe; color: #075985; }
.zebra tbody tr:nth-child(odd) { background: #fcfcfd; }
.truncate { max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.add-row { background: #f8fafc; }
.row-saved { animation: flashSaved .6s ease-in-out 1; }
@keyframes flashSaved { 0% { background:#ecfeff; } 100% { background: transparent; } }

.btn { border: 0; background: #eee; color: var(--text); padding: 10px 16px; border-radius: 12px; box-shadow: var(--shadow); cursor: pointer; transition: transform .05s ease, filter .2s;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn:hover { filter: brightness(0.98); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(135deg, #e53935, #ff5722); color: #fff; }
.btn.secondary { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; font-weight: 600; }
.btn.success { background: linear-gradient(135deg, #34d399, #22c55e); color: #fff; }
.btn.danger { background: linear-gradient(135deg, #fb7185, #ef4444); color: #fff; }
.btn.small { padding: 6px 10px; border-radius: 10px; }
.btn.small { font-size: 13px; line-height: 1.2; }
/* compact icon buttons for dense action cells */
.icon-btn { width: 28px; height: 28px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow); cursor: pointer; }
.icon-btn:hover { filter: brightness(0.98); }
.icon-btn.ok { border-color: #22c55e; }

.rewards .section-title { margin: 8px 0 12px; font-size: 20px; }
.rewards .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.card { background: var(--card); border-radius: 18px; padding: 14px; box-shadow: var(--shadow); position: relative; }
.card-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }
.sticker { font-size: 20px; }
.reason { margin: 10px 0 6px; font-size: 16px; font-weight: 600; }
.pts { color: var(--brand-2); font-weight: 700; }
.pts .num { font-size: 24px; }

.card.spend .pts { color: var(--warn); }
.card.spend .sticker { filter: drop-shadow(0 2px 6px rgba(239,68,68,.35)); }

.view-all-records-btn { text-align: center; margin-top: 20px; }
.view-all-records-btn .btn {
  font-size: 14px;
  padding: 10px 20px;
  background: rgba(102, 126, 234, 0.08);
  color: #667eea;
  font-weight: 600;
  box-shadow: none;
  border: 1px solid rgba(102, 126, 234, 0.2);
}
.view-all-records-btn .btn:hover {
  background: rgba(102, 126, 234, 0.12);
  border-color: rgba(102, 126, 234, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}
.admin-table td.pos { color: var(--brand-2); font-weight: 700; }
.admin-table td.neg { color: var(--warn); font-weight: 700; }

.auth .form, .form-wrap .form { max-width: 520px; margin: 0 auto; }
.form h2 { margin: 4px 0 16px; }
.field { display: grid; gap: 6px; margin: 12px 0; }
.field input, .field textarea {
  border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; font: inherit; background: #fff;
}
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }

.admin-header { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 14px; }
.admin-table table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.admin-table th, .admin-table td { padding: 12px 10px; border-bottom: 1px solid #f0f2f5; text-align: left; }
.admin-table thead th { background: #f9fafb; color: var(--muted); font-weight: 600; }
.admin-table .row-actions { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-table .row-actions.tight { gap: 4px; }
.inline { display: inline; }
.create-list input[type="text"] { min-width: 220px; }
.admin-table .inline { display: inline; margin: 0; }

/* task list helpers */
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.muted { color: var(--muted); font-size: 12px; }

/* pills */
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill-new { background: #e0f2fe; color: #0369a1; }
.pill-sub { background: #fef9c3; color: #a16207; }
.pill-done { background: #dcfce7; color: #166534; }

/* table tweaks in task sections */
.tasks table, .task-table table { width: 100%; border-collapse: collapse; }
.tasks thead th, .task-table thead th { background: #f9fafb; color: var(--muted); font-weight: 600; }
.tasks th, .tasks td, .task-table th, .task-table td { padding: 10px 8px; border-bottom: 1px solid #f0f2f5; }
.col-content { width: 34%; }
.col-start { width: 210px; }
.col-end { width: 210px; }
.col-status { width: 130px; }
.col-pts { width: 80px; white-space: nowrap; }
.col-actions { min-width: 240px; }
.editor-row td { vertical-align: top; }
.table-input { width: 100%; }
.show-more { text-align: center; margin-top: 8px; }
.collapsed tbody tr:nth-child(n+7) { display: none; }

/* admin toolbars and responsive tables */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 14px; }
.toolbar-left { display: flex; align-items: center; gap: 10px; }
.toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.table-wrap { overflow: auto; border-radius: 14px; box-shadow: var(--shadow); background: var(--card); }
.table-wrap table { min-width: 720px; }
/* prevent inline editor from widening the page */
.editor-card .table-wrap { overflow-x: auto; }
.editor-card .table-wrap table { min-width: 0; width: 100%; table-layout: fixed; }
.admin-sticky thead th { position: sticky; top: 0; z-index: 1; }
.create-list input[type="text"] { border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; }
.card input[type="text"], .card input[type="date"], .card select { border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 10px; }

.site-footer { padding: 24px; text-align: center; color: var(--muted); }

#confetti-container { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.wiggle { animation: wiggle .35s ease-in-out 1; }
@keyframes wiggle {
  0% { transform: rotate(0deg) }
  33% { transform: rotate(-3deg) }
  66% { transform: rotate(3deg) }
  100% { transform: rotate(0deg) }
}

/* highlight today */
.card.today-highlight { box-shadow: 0 12px 40px rgba(102, 204, 102, 0.35), var(--shadow); outline: 2px solid rgba(34,197,94,0.35); }
.card.today-highlight .sticker { filter: drop-shadow(0 2px 6px rgba(34,197,94,.4)); }

/* toast */
.toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); background: #111827; color: #fff; padding: 10px 14px; border-radius: 12px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .highlight { color: #fde68a; font-weight: 700; }

/* badges */
.badges .badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.badge { background: var(--card); border-radius: 16px; padding: 12px; box-shadow: var(--shadow); text-align: center; }
.badge .badge-icon { font-size: 28px; margin-bottom: 6px; }
.badge.achieved { opacity: 1; }
.badge.locked { opacity: 0.4; filter: grayscale(0.4); }

/* Task add form - new card-style layout */
.task-add-form {
  padding: 16px;
  background: linear-gradient(135deg, #f8fafc, #ffffff);
  border-radius: 12px;
  border: 2px dashed #e5e7eb;
}
.task-form-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr 0.8fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
@media (max-width: 900px) {
  .task-form-row {
    grid-template-columns: 1fr;
  }
}
.task-input {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.task-input:focus {
  outline: none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(106,166,255,0.1);
}
.task-content { min-width: 180px; }
.task-time { min-width: 150px; }
.task-points { width: 80px; }

/* Task edit form - compact inline editing */
.task-edit-form {
  padding: 12px 16px;
  background: #ffffff;
  border-bottom: 1px solid #f0f2f5;
  transition: background 0.2s;
}
.task-edit-form:hover {
  background: #fafbfc;
}
.task-edit-main {
  display: grid;
  grid-template-columns: 2fr 1.3fr 1.3fr 1fr 0.6fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 0;
}
@media (max-width: 1100px) {
  .task-edit-main {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .task-edit-actions {
    grid-column: 1 / -1;
  }
}
.task-edit-input {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.task-edit-input:focus {
  outline: none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 2px rgba(106,166,255,0.1);
}
.task-time-input { min-width: 140px; }
.task-status-select { min-width: 90px; }
.task-points-input { width: 70px; }
.task-edit-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.quick-time-toggle {
  background: linear-gradient(135deg, #fff7ed, #fffbf5) !important;
  border-color: #fed7aa !important;
}
.quick-time-toggle:hover {
  background: linear-gradient(135deg, #ffedd5, #fff7ed) !important;
  border-color: #fdba74 !important;
}
.visual-time-toggle {
  background: linear-gradient(135deg, #e6f0ff, #f0f7ff) !important;
  border-color: #bfdbfe !important;
}
.visual-time-toggle:hover {
  background: linear-gradient(135deg, #dbeafe, #e6f0ff) !important;
  border-color: #93c5fd !important;
}
.btn.small.visual-time-toggle {
  padding: 6px 12px;
  font-size: 13px;
}

/* Quick time selection controls */
.quick-time-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: #fafbfc;
  border-radius: 8px;
  border: 1px solid #f0f2f5;
  margin-top: 8px;
  animation: slideDown 0.2s ease;
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.quick-time-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.quick-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  margin-right: 4px;
}
.quick-btn {
  border: 1px solid #d1d5db;
  background: linear-gradient(135deg, #ffffff, #f9fafb);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.quick-btn:hover {
  border-color: var(--brand-2);
  background: linear-gradient(135deg, #e6f0ff, #f0f7ff);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(106,166,255,0.15);
}
.quick-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.quick-btn.duration {
  background: linear-gradient(135deg, #fff7ed, #fffbf5);
  border-color: #fed7aa;
}
.quick-btn.duration:hover {
  background: linear-gradient(135deg, #ffedd5, #fff7ed);
  border-color: #fdba74;
  box-shadow: 0 2px 6px rgba(251,146,60,0.15);
}

/* Child home page - friendly task time display */
.task-content-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.time-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.time-badge.overdue {
  background: #fee2e2;
  color: #991b1b;
}
.time-badge.urgent {
  background: #fff7ed;
  color: #c2410c;
}
.task-time-cell {
  font-size: 13px;
  color: var(--muted);
}
.time-range {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.time-start {
  color: var(--brand-2);
  font-weight: 500;
}
.time-end {
  color: var(--text);
  font-weight: 600;
}
.time-arrow {
  color: var(--muted);
  font-size: 12px;
}
.task-points {
  color: var(--brand);
  font-weight: 600;
}
.task-row.overdue {
  background: #fef2f2;
}
.task-row.urgent {
  background: #fffbeb;
}

/* Time Window Picker - Visual time range selector */
.time-window-picker {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin: 12px 0;
}

.twp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.twp-date-selector {
  display: flex;
  align-items: center;
  gap: 12px;
}

.twp-current-date {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  min-width: 120px;
  text-align: center;
}

.twp-date-btn, .twp-quick-btn {
  border: 1px solid #e5e7eb;
  background: #fff;
  color: var(--text);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.twp-date-btn:hover, .twp-quick-btn:hover {
  border-color: var(--brand-2);
  background: #f0f7ff;
}

.twp-quick-dates {
  display: flex;
  gap: 6px;
}

.twp-interval-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f9fafb;
  border-radius: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.twp-interval-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.twp-interval-btn {
  border: 1px solid #d1d5db;
  background: #fff;
  color: var(--text);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.twp-interval-btn:hover {
  border-color: var(--brand-2);
  background: #f0f7ff;
}

.twp-interval-btn.active {
  background: linear-gradient(135deg, var(--brand-2), #7cc6ff);
  color: #fff;
  border-color: var(--brand-2);
  font-weight: 600;
}

.twp-timeline-container {
  position: relative;
  margin: 16px 0;
  background: #f9fafb;
  border-radius: 10px;
  padding: 12px;
  overflow-x: auto;
}

.twp-timeline {
  display: flex;
  gap: 2px;
  min-width: max-content;
  position: relative;
  user-select: none;
}

.twp-block {
  flex-shrink: 0;
  width: 32px;
  height: 60px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.twp-block.hour-mark {
  border-left: 2px solid #d1d5db;
}

.twp-block:hover {
  background: #e6f0ff;
  border-color: var(--brand-2);
}

.twp-block.selected {
  background: linear-gradient(135deg, #6aa6ff, #7cc6ff);
  border-color: var(--brand-2);
  color: #fff;
}

.twp-hour-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 4px;
  white-space: nowrap;
}

.twp-block.selected .twp-hour-label {
  color: #fff;
}

.twp-presets {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
  padding: 12px;
  background: #f9fafb;
  border-radius: 10px;
}

.twp-preset-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.twp-preset-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  min-width: 80px;
}

.twp-preset-btn, .twp-duration-btn {
  border: 1px solid #d1d5db;
  background: linear-gradient(135deg, #ffffff, #f9fafb);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.twp-preset-btn:hover {
  border-color: var(--brand-2);
  background: linear-gradient(135deg, #e6f0ff, #f0f7ff);
  transform: translateY(-1px);
}

.twp-duration-btn {
  background: linear-gradient(135deg, #fff7ed, #fffbf5);
  border-color: #fed7aa;
}

.twp-duration-btn:hover {
  background: linear-gradient(135deg, #ffedd5, #fff7ed);
  border-color: #fdba74;
  transform: translateY(-1px);
}

.twp-selected-time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: linear-gradient(135deg, #f0f7ff, #ffffff);
  border-radius: 10px;
  border: 2px solid #e6f0ff;
}

.twp-time-display {
  display: flex;
  align-items: center;
  gap: 8px;
}

.twp-time-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.twp-time-value {
  color: var(--brand-2);
  font-size: 14px;
  font-weight: 700;
}

.twp-clear-btn {
  border: 1px solid #e5e7eb;
  background: #fff;
  color: var(--text);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.twp-clear-btn:hover {
  border-color: var(--warn);
  background: #fef2f2;
  color: var(--warn);
}

@media (max-width: 768px) {
  .twp-header {
    flex-direction: column;
    align-items: stretch;
  }

  .twp-date-selector {
    justify-content: center;
  }

  .twp-quick-dates {
    justify-content: center;
  }

  .twp-block {
    width: 24px;
    height: 50px;
  }

  .twp-hour-label {
    font-size: 9px;
  }
}

/* Task Scheduler - Timeline view for all tasks */
.task-scheduler {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin: 16px 0;
}

.ts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0f2f5;
}

.ts-date-selector {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ts-current-date {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  min-width: 120px;
  text-align: center;
}

.ts-date-btn, .ts-quick-btn {
  border: 1px solid #e5e7eb;
  background: #fff;
  color: var(--text);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
}

.ts-date-btn:hover, .ts-quick-btn:hover {
  border-color: var(--brand-2);
  background: #f0f7ff;
}

.ts-quick-dates {
  display: flex;
  gap: 6px;
}

.ts-interval-selector {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ts-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.ts-interval-btn {
  border: 1px solid #d1d5db;
  background: #fff;
  color: var(--text);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.ts-interval-btn:hover {
  border-color: var(--brand-2);
  background: #f0f7ff;
}

.ts-interval-btn.active {
  background: linear-gradient(135deg, var(--brand-2), #7cc6ff);
  color: #fff;
  border-color: var(--brand-2);
  font-weight: 600;
}

.ts-timeline-wrapper {
  display: flex;
  gap: 0;
  max-height: 600px;
  overflow-y: auto;
}

.ts-time-labels {
  display: flex;
  flex-direction: column;
  width: 60px;
  flex-shrink: 0;
}

.ts-time-label {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid #f0f2f5;
  flex-shrink: 0;
}

.ts-timeline-container {
  flex: 1;
  background: #fafbfc;
  border-radius: 8px;
  padding: 8px;
  position: relative;
}

.ts-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.ts-grid-cell {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  transition: background 0.15s;
  flex-shrink: 0;
}

.ts-grid-cell:hover {
  background: #f8f9fa;
}

.ts-grid-cell.hour-mark {
  border-bottom: 2px solid #d1d5db;
}

.ts-tasks-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.ts-task {
  position: absolute;
  width: calc(100% - 20px);
  min-height: 40px;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: move;
  pointer-events: all;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform 0.15s, box-shadow 0.15s;
  opacity: 0.92;
  border: 2px solid rgba(255,255,255,0.8);
  overflow: hidden;
}

.ts-task:hover {
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  opacity: 1;
  z-index: 10;
}

.ts-task.dragging {
  opacity: 0.7;
  cursor: grabbing;
  z-index: 100;
}

.ts-task.overlap {
  background: linear-gradient(135deg, #fff3e0, #ffe0b2) !important;
  border-color: #ff9800;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 2px 6px rgba(255,152,0,0.3);
  }
  50% {
    box-shadow: 0 2px 12px rgba(255,152,0,0.6);
  }
}

.ts-task-content {
  position: relative;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.ts-task-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.ts-task-time {
  font-size: 11px;
  color: rgba(255,255,255,0.95);
  margin-top: 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.ts-task-resize-handle {
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
  z-index: 2;
  transition: background 0.15s;
}

.ts-task-resize-handle:hover {
  background: rgba(255,255,255,0.3);
}

.ts-task-resize-handle.top {
  top: 0;
  border-radius: 6px 6px 0 0;
}

.ts-task-resize-handle.bottom {
  bottom: 0;
  border-radius: 0 0 6px 6px;
}

.ts-add-task {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
  padding: 12px;
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border-radius: 8px;
  border: 2px solid #bae6fd;
}

.ts-add-task-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

.ts-add-task-input:focus {
  outline: none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(106, 166, 255, 0.1);
}

.ts-add-task-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--brand-2), #7cc6ff);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.ts-add-task-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(106, 166, 255, 0.3);
}

.ts-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  font-size: 12px;
  flex-wrap: wrap;
}

.ts-legend-label {
  color: var(--muted);
  font-weight: 600;
}

.ts-legend-item {
  color: var(--muted);
}

@media (max-width: 1024px) {
  .ts-header {
    flex-direction: column;
    align-items: stretch;
  }

  .ts-date-selector,
  .ts-quick-dates,
  .ts-interval-selector {
    justify-content: center;
  }

  .ts-timeline-container {
    overflow-x: scroll;
  }
}

/* ============================================================
   记录查询页
   ============================================================ */

.records-page {
  padding: 0;
}

.records-header {
  margin-bottom: 24px;
}

.back-nav {
  margin-bottom: 16px;
}

.back-link {
  color: var(--brand-2);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.2s;
}

.back-link:hover {
  transform: translateX(-4px);
}

.page-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 8px 0;
}

.page-subtitle {
  color: var(--muted);
  margin: 0;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--card);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow);
  transition: transform 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-icon {
  font-size: 36px;
  line-height: 1;
}

.stat-info { flex: 1; }

.stat-label {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: 800;
}

.reward-stat .stat-value { color: var(--ok); }
.spend-stat .stat-value { color: var(--warn); }
.balance-stat .stat-value { color: var(--brand-2); }

.filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  background: #f0f2f8;
  padding: 6px;
  border-radius: 14px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}

.filter-tab {
  flex: 1;
  text-align: center;
  padding: 12px 20px;
  border-radius: 10px;
  text-decoration: none;
  color: #64748b;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}

.filter-tab:hover:not(.active) {
  background: rgba(30,136,229,0.08);
  color: var(--brand-2);
  transform: translateY(-1px);
}

.filter-tab.active {
  background: linear-gradient(135deg, var(--brand-2), #5c6bc0);
  color: #fff;
  box-shadow: 0 4px 12px rgba(30,136,229,0.4);
  transform: translateY(-1px);
}

.records-list {
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.date-divider {
  text-align: center;
  margin: 24px 0 16px;
}

.date-divider:first-child { margin-top: 8px; }

.date-text {
  background: var(--card);
  color: var(--muted);
  padding: 4px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 20px;
  border: 2px solid #e5e7eb;
  display: inline-block;
}

.record-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 8px;
  transition: all 0.2s;
}

.record-item:hover {
  background: rgba(30,136,229,0.05);
  transform: translateX(4px);
}

.record-item.reward { border-left: 4px solid var(--ok); }
.record-item.spend { border-left: 4px solid var(--warn); }

.record-icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.record-content { flex: 1; min-width: 0; }
.record-reason { font-weight: 600; color: var(--text); margin-bottom: 4px; word-break: break-word; }
.record-time { font-size: 12px; color: var(--muted); }
.record-points { font-size: 24px; font-weight: 800; flex-shrink: 0; }
.record-points.positive { color: var(--ok); }
.record-points.negative { color: var(--warn); }

.empty-state { text-align: center; padding: 60px 20px; }
.empty-icon { font-size: 64px; margin-bottom: 16px; }
.empty-text { color: var(--muted); font-size: 16px; }

@media (max-width: 768px) {
  .stats-cards { grid-template-columns: 1fr; }
  .page-title { font-size: 24px; }
  .stat-value { font-size: 20px; }
  .record-points { font-size: 20px; }
}

/* ============================================================
   每日打卡
   ============================================================ */

.checkin-section {
  margin-bottom: 1.5rem;
}

.checkin-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.checkin-card {
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  width: 120px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.checkin-card:hover { transform: translateY(-2px); }

.checkin-card.checked {
  opacity: 0.65;
}

.checkin-icon {
  font-size: 2rem;
  line-height: 1;
}

.checkin-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.checkin-points {
  font-size: 12px;
  color: var(--brand-2);
  font-weight: 600;
}

.checkin-btn {
  margin-top: 4px;
  background: linear-gradient(135deg, var(--ok), #66bb6a);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(34,197,94,0.3);
}

.checkin-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(34,197,94,0.4);
}

.checkin-btn:active { transform: scale(0.97); }

.checkin-done {
  font-size: 12px;
  color: var(--ok);
  font-weight: 600;
  margin-top: 4px;
}

.checkin-pending {
  font-size: 12px;
  color: #ff9800;
  font-weight: 600;
  margin-top: 4px;
}

.checkin-card.pending {
  opacity: 0.7;
}

.checkin-card.approved {
  opacity: 0.55;
}

/* 管理端待审批卡片 */
.checkin-pending-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: var(--shadow);
  border-left: 4px solid #ff9800;
}

.checkin-pending-icon {
  font-size: 1.5rem;
}

.checkin-pending-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 打卡成功弹跳动画 */
.checkin-card.anim-success {
  animation: checkinBounce 0.5s ease;
}

@keyframes checkinBounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.15); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* 管理端表单 */
.checkin-form-grid {
  display: grid;
  grid-template-columns: 100px 1fr 80px 160px;
  gap: 12px;
  align-items: end;
}

.checkin-form-grid .field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checkin-form-grid .field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.checkin-form-grid .field select,
.checkin-form-grid .field input {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  background: #fff;
}

.checkin-icon-select {
  font-size: 1.2rem;
}

.checkin-custom-days {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.checkin-day-checkbox {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .checkin-form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .checkin-card {
    width: 100px;
    padding: 12px;
  }
}

/* ============================================================
   管理仪表盘
   ============================================================ */

.dashboard-shortcuts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.dashboard-shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 24px;
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
  min-width: 100px;
}

.dashboard-shortcut:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.dashboard-shortcut-icon {
  font-size: 2rem;
}

/* 周对比趋势 */
.weekly-trend {
  font-size: 14px;
  font-weight: 800;
  margin-left: 4px;
}

.weekly-trend.up { color: var(--ok); }
.weekly-trend.down { color: var(--warn); }
.weekly-trend.flat { color: var(--muted); }

.stat-compare {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* ============================================================
   AI 生成计划
   ============================================================ */

.ai-plan-btn {
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
  border: none;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(124,58,237,0.3);
}

.ai-plan-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(124,58,237,0.4);
  filter: brightness(1.1);
}

.ai-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: aiFadeIn 0.2s ease;
}

@keyframes aiFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ai-dialog {
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  width: 560px;
  max-width: 94vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
}

.ai-dialog h3 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
}

.ai-dialog-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 18px;
}

.ai-field {
  margin-bottom: 14px;
}

.ai-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}

.ai-field select,
.ai-field textarea,
.ai-field input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  transition: border-color 0.15s;
}

.ai-field select:focus,
.ai-field textarea:focus,
.ai-field input:focus {
  border-color: #7c3aed;
  outline: none;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}

.ai-field textarea {
  resize: vertical;
  min-height: 60px;
}

.ai-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ai-status {
  text-align: center;
  padding: 24px;
}

.ai-loading-icon {
  font-size: 2rem;
  animation: aiSpin 1.5s linear infinite;
  display: inline-block;
  margin-bottom: 8px;
}

@keyframes aiSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.ai-status-text {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}

.ai-summary {
  background: linear-gradient(135deg, #f0e6ff, #e8eaff);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #5b21b6;
  font-weight: 500;
}

.ai-task-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.ai-task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background 0.15s;
  border-bottom: 1px solid #f0f0f0;
}

.ai-task-item:hover {
  background: #f8f6ff;
}

.ai-task-item:last-child {
  border-bottom: none;
}

.ai-task-check {
  width: 18px;
  height: 18px;
  accent-color: #7c3aed;
  flex-shrink: 0;
}

.ai-task-day {
  font-size: 12px;
  font-weight: 700;
  color: #7c3aed;
  background: #f0e6ff;
  padding: 2px 8px;
  border-radius: 6px;
  flex-shrink: 0;
  min-width: 36px;
  text-align: center;
}

.ai-task-content {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}

.ai-task-time {
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}

.ai-task-points {
  font-size: 12px;
  font-weight: 700;
  color: var(--ok);
  flex-shrink: 0;
}

.ai-error {
  color: var(--warn);
  background: #fef2f2;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 12px;
}

.ai-dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

.ai-dialog-actions .btn {
  min-width: 80px;
}

.btn.ai-confirm {
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
  border: none;
  font-weight: 700;
}

.btn.ai-confirm:hover {
  filter: brightness(1.1);
}

.ai-select-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.ai-select-bar span {
  font-size: 13px;
  color: var(--muted);
}

.ai-select-bar button {
  background: none;
  border: none;
  color: #7c3aed;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
}

.ai-select-bar button:hover {
  text-decoration: underline;
}

.ai-new-title-wrap {
  margin-top: 8px;
  transition: all 0.2s;
}