/* =====================================================================
   TaskIt! — Mobile-first CSS
   Accent: #7c3aed  Danger: #dc2626  Success: #16a34a
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
.hidden { display: none !important; }

html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f5f3ff;
  color: #1a1a2e;
  min-height: 100vh;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

.view {
  padding: 16px 16px 80px;
  max-width: 540px;
  margin: 0 auto;
}
.view-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.view-header h1 { font-size: 1.4rem; flex: 1; }
.loading { text-align: center; padding: 3rem 1rem; color: #666; }

.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 14px;
  padding: 2rem 1rem;
  text-align: center;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
}
.loading-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
}
.loading-status {
  font-size: 0.95rem;
  color: #c4b5fd;
  min-height: 1.4em;
}
.loading-error {
  font-size: 0.9rem;
  color: #991b1b;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: 10px;
  padding: 12px 16px;
  max-width: 340px;
  word-break: break-word;
}
.loading-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-glow { 0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(253,230,138,.8); } 50% { opacity: .75; box-shadow: 0 0 12px rgba(253,230,138,1); } }
.loading-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(255,255,255,.2);
  border-top-color: #c4b5fd;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.card {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  margin-bottom: 14px;
}
.card-title { font-weight: 700; margin-bottom: 8px; font-size: 1rem; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 14px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  text-align: center;
}
.stat-number { font-size: 2rem; font-weight: 800; color: #7c3aed; line-height: 1.1; }
.stat-label { font-size: 0.8rem; color: #555; margin-top: 4px; }

.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: #333;
}
.input, .select, .textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #d1d5db;
  border-radius: 10px;
  font-size: 1rem;
  background: #fff;
  color: #1a1a2e;
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
.select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.textarea { min-height: 100px; resize: vertical; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 20px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  min-height: 48px;
  text-decoration: none;
  transition: opacity .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: #fff; box-shadow: 0 2px 8px rgba(124,58,237,.3); }
.btn-primary:hover { opacity: .9; box-shadow: 0 4px 14px rgba(124,58,237,.4); }
.btn-danger  { background: #dc2626; color: #fff; }
.btn-danger:hover { opacity: .9; }
.btn-secondary { background: #e5e7eb; color: #1a1a2e; }
.btn-secondary:hover { background: #d1d5db; }
.btn-outline {
  background: transparent;
  border: 2px solid #7c3aed;
  color: #7c3aed;
}
.btn-full { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: .875rem; min-height: 36px; }

.alert {
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: .9rem;
  line-height: 1.5;
}
.alert-error   { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; }
.alert-success { background: #dcfce7; border: 1px solid #86efac; color: #166534; }
.alert-warning { background: #fef9c3; border: 1px solid #fde047; color: #854d0e; }
.alert-info    { background: #ede9fe; border: 1px solid #93c5fd; color: #5b21b6; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge-blue    { background: #ede9fe; color: #5b21b6; }
.badge-purple  { background: #f3e8ff; color: #6b21a8; }
.badge-warn    { background: #fef9c3; color: #854d0e; }
.badge-green   { background: #dcfce7; color: #166534; }
.badge-danger  { background: #fee2e2; color: #991b1b; }
.badge-gray    { background: #f1f5f9; color: #475569; }
.badge-recur   { background: #ede9fe; color: #5b21b6; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  padding: 0;
}
.modal-sheet {
  background: #fff;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-body {
  padding: 24px 20px 8px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.modal-footer {
  padding: 10px 20px 28px;
  background: #fff;
  border-top: 1px solid #f3f4f6;
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.modal-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 12px; }

@media (min-width: 640px) {
  .modal-overlay {
    align-items: center;
    padding: 20px;
  }
  .modal-sheet {
    border-radius: 16px;
    max-width: 540px;
    margin: 0 auto;
    max-height: 82vh;
  }
  .modal-footer { padding-bottom: 20px; }
}

.nav-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, #1e1b4b 0%, #312e81 100%);
  border-top: none;
  display: flex;
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -2px 16px rgba(49,46,129,0.4);
}
.nav-btn {
  flex: 1;
  padding: 10px 4px 8px;
  border: none;
  background: transparent;
  font-size: .7rem;
  color: rgba(196,181,253,0.7);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 56px;
  -webkit-tap-highlight-color: transparent;
}
.nav-btn .nav-icon { font-size: 1.4rem; line-height: 1; }
.nav-btn.active { color: #e9d5ff; }

a { color: #7c3aed; text-decoration: none; }
a:hover { text-decoration: underline; }
.link-btn {
  background: none;
  border: none;
  color: #7c3aed;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
}

.section-heading {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b7280;
  margin: 20px 0 10px;
}

.divider { height: 1px; background: #e5e7eb; margin: 16px 0; }

#update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  background: #7c3aed;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: .9rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
#update-banner button {
  background: #fff;
  color: #7c3aed;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
#update-banner button:hover { background: #e0e7ff; }

/* ── TaskIt!-specific additions ──────────────────────────────────── */

/* Auth page */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 45%, #4c1d95 100%);
  padding: 24px 16px;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08);
  padding: 32px 24px;
}
.auth-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
}
.auth-logo-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 4px 20px rgba(124,58,237,.45);
}
.auth-logo h1 { font-size: 1.8rem; font-weight: 800; color: #1a1a2e; }
.auth-logo p  { font-size: .9rem; color: #6b7280; margin-top: 2px; }

.tab-group {
  display: flex;
  background: #f5f3ff;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 24px;
  /* Allow scrolling on narrow screens so tabs never overflow off-screen */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.tab-group::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.tab-btn {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: #6b7280;
  transition: background .15s, color .15s, box-shadow .15s;
  min-height: 40px;
  white-space: nowrap; /* never wrap button text mid-word */
}
.tab-btn.active {
  background: #fff;
  color: #7c3aed;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

/* On narrow screens stop stretching tabs to fill full width so their
   text isn't crushed. The group becomes a scroll container instead. */
@media (max-width: 540px) {
  .tab-btn {
    flex: none;
    padding: 8px 10px;
    font-size: .78rem;
  }
}

/* Filter chips */
.filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.chip {
  padding: 8px 14px;
  border-radius: 20px;
  font-size: .82rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: #fff;
  color: #6b7280;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  transition: background .15s, color .15s;
  min-height: 36px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.chip.active { background: #7c3aed; color: #fff; }

/* Task card */
.task-card {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  position: relative;
  box-shadow: 0 2px 12px rgba(124,58,237,.08), 0 1px 3px rgba(0,0,0,.05);
  margin-bottom: 12px;
  cursor: pointer;
  transition: box-shadow .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  border-left: 3px solid #7c3aed;
}
.task-card:active { transform: scale(.99); }
.task-card:hover { box-shadow: 0 6px 20px rgba(124,58,237,.13), 0 2px 6px rgba(0,0,0,.06); }
.task-card-title { font-weight: 700; font-size: 1rem; margin-bottom: 8px; color: #1a1a2e; }
.task-card-title-group { color: #7c3aed; }
.task-card-meta { font-size: .82rem; color: #6b7280; margin-top: 6px; }
.task-card-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.task-card-has-timer { padding-right: 96px; }
.task-card-timer {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
  z-index: 1;
}
.task-card-timer-expired {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

/* Status badges */
.badge-not-started { background: #f1f5f9; color: #475569; }
.badge-started     { background: #ede9fe; color: #5b21b6; }
.badge-complete    { background: #dcfce7; color: #166534; }
.badge-archived    { background: #fef9c3; color: #854d0e; }

/* Group card */
.group-card {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  margin-bottom: 12px;
}
.group-card-title { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.group-key-box {
  background: #f8faff;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}
.group-key-code { font-family: 'Courier New', monospace; font-weight: 800; color: #7c3aed; letter-spacing: .1em; font-size: 1.1rem; flex: 1; }

/* Profile avatar */
.profile-avatar {
  width: 72px;
  height: 72px;
  background: #ede9fe;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  color: #7c3aed;
  margin: 0 auto 12px;
}

/* Notification item */
.notif-item {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:active { background: #f8faff; }
.notif-item-title { font-weight: 600; font-size: .9rem; margin-bottom: 3px; }
.notif-item-sub { font-size: .8rem; color: #6b7280; }
.notif-item-sub.overdue { color: #dc2626; font-weight: 700; }
.notif-item-sub.soon    { color: #d97706; font-weight: 600; }

/* Note item */
.note-item {
  background: #f8faff;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.note-item-text { font-size: .9rem; white-space: pre-wrap; }
.note-item-meta { font-size: .75rem; color: #9ca3af; margin-top: 4px; }

/* Member row */
.member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f6;
}
.member-row:last-child { border-bottom: none; }
.member-info-name { font-weight: 600; font-size: .95rem; }
.member-info-email { font-size: .8rem; color: #9ca3af; }
.member-actions { display: flex; gap: 6px; }

/* Assignee checkboxes */
.assignee-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
}
.assignee-label:last-child { border-bottom: none; }
.assignee-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #7c3aed;
  flex-shrink: 0;
}

/* Admin form */
.admin-field-row { display: flex; gap: 12px; }
.admin-field-row .form-group { flex: 1; }

/* Admin collapsible cards */
.admin-collapsible { padding: 0; }
.admin-collapsible > .admin-collapsible-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 1rem;
  color: #1a1a2e;
  user-select: none;
  gap: 8px;
}
.admin-collapsible > .admin-collapsible-summary::-webkit-details-marker { display: none; }
.admin-collapsible > .admin-collapsible-summary::before {
  content: '▶';
  font-size: .7rem;
  color: #9ca3af;
  transition: transform .2s;
  flex-shrink: 0;
  order: -1;
}
.admin-collapsible[open] > .admin-collapsible-summary::before { transform: rotate(90deg); }
.admin-collapsible > div { padding: 0 16px 16px; }

/* Toast */
.toast-container {
  position: fixed;
  bottom: 74px; /* above bottom nav */
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: min(calc(100vw - 32px), 380px);
}
.toast {
  padding: 12px 18px;
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 600;
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  animation: toastIn .25s ease;
  width: 100%;
  text-align: center;
}
.toast-success { background: #16a34a; color: #fff; }
.toast-error   { background: #dc2626; color: #fff; }
.toast-info    { background: #7c3aed; color: #fff; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Version footer in profile */
.version-footer {
  text-align: center;
  font-size: .78rem;
  color: #9ca3af;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}
.version-footer a { color: #6b7280; }

/* Notification bell button in nav */
.nav-btn-notif { position: relative; }
.nav-notif-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 18px);
  min-width: 16px;
  height: 16px;
  background: #dc2626;
  border-radius: 20px;
  font-size: .65rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* Checkbox toggle for "show archived", "assigned to me" */
.toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  padding: 8px 0;
}
.toggle-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #7c3aed;
}

/* Select filter (group filter) */
.filter-select {
  padding: 8px 32px 8px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 20px;
  font-size: .82rem;
  font-weight: 600;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%23666' d='M5 7L0 0h10z'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: #475569;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  min-height: 36px;
}
.filter-select:focus { outline: none; border-color: #7c3aed; }

/* Due date warning */
.due-overdue { color: #dc2626; font-weight: 700; }
.due-soon    { color: #d97706; font-weight: 600; }

/* Task card urgency / due-soon highlights */
.task-card-urgent   { background: #fff0f0; }
.task-card-due-soon { border: 2px solid #dc2626; }
.task-card-started {
  background: #ecfdf5;
  border-left-color: #22c55e;
}
.task-card-started-timed {
  animation: task-card-started-pulse 1.8s ease-in-out infinite;
}

@keyframes task-card-started-pulse {
  0%, 100% { background: #ecfdf5; box-shadow: 0 2px 12px rgba(34,197,94,.10), 0 1px 3px rgba(0,0,0,.05); }
  50% { background: #bbf7d0; box-shadow: 0 4px 18px rgba(34,197,94,.18), 0 1px 3px rgba(0,0,0,.05); }
}

/* Far-future tasks collapsible toggle button */
.task-far-future-toggle {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: #ede9fe;
  border: 1px dashed #c4b5fd;
  border-radius: 10px;
  color: #7c3aed;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  margin: 4px 0 8px;
  transition: background .15s;
}
.task-far-future-toggle:hover { background: #ddd6fe; }

/* Inline new-type row in task modal */
.new-type-row { display: flex; gap: 8px; margin-top: 8px; align-items: center; }

/* Detail modal sections */
.detail-section { margin-bottom: 16px; }
.detail-section-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; margin-bottom: 8px; }

/* Status quick buttons */
.status-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.status-btn {
  flex: 1;
  min-width: 80px;
  padding: 10px 8px;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 700;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  min-height: 42px;
  -webkit-tap-highlight-color: transparent;
}
.status-btn-not-started { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.status-btn-not-started:hover { background: #e2e8f0; }
.status-btn-started { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.status-btn-started:hover { background: #ddd6fe; }
.status-btn-complete { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.status-btn-complete:hover { background: #bbf7d0; }

/* Wider admin view on desktop */
@media (min-width: 700px) {
  .view--wide { max-width: 800px; }
  .admin-field-row .form-group { margin-bottom: 16px; }
}

/* Safe area padding for iOS bottom notch */
.nav-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* =====================================================================
   LANDING PAGE
   ===================================================================== */

/* ── Reset / container ────────────────────────────────────────────── */
#landingPage {
  min-height: 100vh;
  background: #fff;
  overflow-x: hidden;
}

/* ── Navigation bar ──────────────────────────────────────────────── */
.lp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}
.lp-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.lp-nav-logo {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.25);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.3);
}
.lp-nav-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
}
.lp-nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
}
.lp-nav-links a {
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 700;
}
.lp-nav-links a:hover { color: #fff; }
.lp-nav-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.lp-btn-nav-signin {
  padding: 9px 18px;
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 700;
  border: 2px solid rgba(255,255,255,0.55);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  min-height: 40px;
}
.lp-btn-nav-signin:hover { background: rgba(255,255,255,0.15); border-color: #fff; }
.lp-btn-nav-started {
  padding: 9px 18px;
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 700;
  border: none;
  background: #fff;
  color: #7c3aed;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  min-height: 40px;
}
.lp-btn-nav-started:hover { opacity: .9; }
.lp-btn-nav-started:active { transform: scale(.97); }

/* ── Hero ────────────────────────────────────────────────────────── */
.lp-hero {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 40%, #4c1d95 100%);
  padding: 120px 24px 80px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.lp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='1' fill='rgba(255,255,255,.06)'/%3E%3C/svg%3E") repeat;
  pointer-events: none;
}
.lp-hero h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-bottom: 18px;
}
.lp-hero-sub {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: rgba(255,255,255,0.82);
  max-width: 560px;
  margin: 0 auto 36px;
  line-height: 1.65;
}
.lp-hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.lp-btn-hero-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 800;
  border: none;
  background: #fff;
  color: #7c3aed;
  cursor: pointer;
  transition: opacity .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  min-height: 52px;
  text-decoration: none;
}
.lp-btn-hero-primary:hover { opacity: .92; box-shadow: 0 6px 28px rgba(0,0,0,0.22); }
.lp-btn-hero-primary:active { transform: scale(.97); }
.lp-btn-hero-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 700;
  border: 2px solid rgba(255,255,255,0.6);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  min-height: 52px;
  text-decoration: none;
}
.lp-btn-hero-outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.lp-hero-note {
  font-size: .82rem;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
}
.lp-hero-proof {
  max-width: 760px;
  margin: 18px auto 14px;
  padding: 0;
}
.lp-hero-proof li {
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.18);
  color: #f8fafc;
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
  font-size: .9rem;
  line-height: 1.55;
  list-style: none;
  margin-top: 10px;
}

/* ── Stats strip ─────────────────────────────────────────────────── */
.lp-stats {
  background: #fff;
  border-radius: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.09);
}
.lp-stat-item {
  text-align: center;
  padding: 28px 16px;
  border-right: 1px solid #f1f5f9;
}
.lp-stat-item:last-child { border-right: none; }
.lp-stat-num {
  font-size: 1.9rem;
  font-weight: 900;
  color: #7c3aed;
  line-height: 1.1;
}
.lp-stat-label {
  font-size: .8rem;
  color: #6b7280;
  margin-top: 4px;
  font-weight: 500;
}

/* ── Section generic ─────────────────────────────────────────────── */
.lp-section {
  padding: 72px 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.lp-section-center { text-align: center; }
.lp-section-label {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7c3aed;
  margin-bottom: 10px;
}
.lp-section-heading {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 900;
  color: #1a1a2e;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin-bottom: 14px;
}
.lp-section-sub {
  font-size: 1rem;
  color: #6b7280;
  max-width: 560px;
  margin: 0 auto 48px;
  line-height: 1.65;
}

/* ── Features grid ────────────────────────────────────────────────── */
.lp-features-bg {
  background: #f8faff;
}
.lp-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.lp-feature-card {
  background: #fff;
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  transition: transform .2s, box-shadow .2s;
}
.lp-feature-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.11); }
.lp-feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 16px;
}
.lp-feature-icon-blue   { background: #ede9fe; }
.lp-feature-icon-purple { background: #f3e8ff; }
.lp-feature-icon-green  { background: #dcfce7; }
.lp-feature-icon-amber  { background: #fef3c7; }
.lp-feature-icon-rose   { background: #fee2e2; }
.lp-feature-icon-cyan   { background: #cffafe; }
.lp-feature-card h3 {
  font-size: 1rem;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 8px;
}
.lp-feature-card p {
  font-size: .88rem;
  color: #6b7280;
  line-height: 1.6;
}

/* ── Screenshots / Phone frames ──────────────────────────────────── */
.lp-screens-bg {
  background: linear-gradient(160deg, #1e1b4b 0%, #312e81 60%, #4c1d95 100%);
  overflow: visible;
}
.lp-screens-bg .lp-section-heading,
.lp-screens-bg .lp-section-label { color: #fff; }
.lp-screens-bg .lp-section-sub   { color: rgba(255,255,255,0.72); }
.lp-phones-row {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-bottom: 40px;
}
.lp-phone-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.lp-phone-label {
  font-size: .8rem;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.lp-phone {
  width: 210px;
  background: #1a1a2e;
  border-radius: 32px;
  padding: 14px 8px 16px;
  box-shadow: 0 28px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08);
  position: relative;
  flex-shrink: 0;
}
.lp-phone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 22px;
  background: #1a1a2e;
  border-radius: 0 0 16px 16px;
  z-index: 5;
}
.lp-phone-inner {
  background: #f5f3ff;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
}
/* Mini status bar inside phone */
.lp-phone-statusbar {
  background: #fff;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 8px;
  font-weight: 700;
  color: #1a1a2e;
}
/* Mini nav bar at bottom of phone */
.lp-phone-navbar {
  background: linear-gradient(180deg, #1e1b4b 0%, #312e81 100%);
  border-top: none;
  display: flex;
  padding: 6px 0 4px;
}
.lp-phone-navbtn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 5px;
  color: rgba(196,181,253,0.65);
  font-weight: 700;
}
.lp-phone-navbtn.active { color: #e9d5ff; }
.lp-phone-navbtn-icon { font-size: 11px; line-height: 1; }
/* Phone screen content */
.lp-phone-content {
  padding: 8px;
  font-size: 9px;
  line-height: 1.35;
  color: #1a1a2e;
}
.lp-mini-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 2px;
}
.lp-mini-header-title {
  font-size: 11px;
  font-weight: 900;
  color: #1a1a2e;
}
.lp-mini-header-btn {
  background: #7c3aed;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 7px;
  font-weight: 700;
  cursor: default;
}
.lp-mini-chips {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.lp-mini-chip {
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 7px;
  font-weight: 700;
  background: #fff;
  color: #6b7280;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.lp-mini-chip.active { background: #7c3aed; color: #fff; }
/* Mini task cards */
.lp-mini-card {
  background: #fff;
  border-radius: 8px;
  padding: 7px 8px;
  box-shadow: 0 1px 5px rgba(0,0,0,.07);
  margin-bottom: 5px;
}
.lp-mini-card-title {
  font-size: 9px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-mini-card-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.lp-mini-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 6px;
  font-size: 6.5px;
  font-weight: 700;
  white-space: nowrap;
}
.lp-mini-badge-blue   { background: #ede9fe; color: #5b21b6; }
.lp-mini-badge-gray   { background: #f1f5f9; color: #475569; }
.lp-mini-badge-green  { background: #dcfce7; color: #166534; }
.lp-mini-badge-yellow { background: #fef3c7; color: #92400e; }
.lp-mini-badge-purple { background: #ede9fe; color: #5b21b6; }
.lp-mini-badge-red    { background: #fee2e2; color: #991b1b; }
.lp-mini-card-meta {
  font-size: 7px;
  color: #9ca3af;
  margin-top: 3px;
}
/* Mini group cards */
.lp-mini-group-card {
  background: #fff;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 1px 5px rgba(0,0,0,.07);
  margin-bottom: 5px;
}
.lp-mini-group-title { font-size: 9px; font-weight: 800; color: #1a1a2e; margin-bottom: 3px; }
.lp-mini-group-meta  { font-size: 7px; color: #6b7280; }
.lp-mini-group-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}
.lp-mini-group-btn {
  background: #f1f5f9;
  border: none;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 6.5px;
  font-weight: 700;
  color: #475569;
  cursor: default;
}
/* Mini detail card */
.lp-mini-detail-title { font-size: 11px; font-weight: 900; color: #1a1a2e; margin-bottom: 5px; }
.lp-mini-section-title {
  font-size: 6.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #9ca3af;
  margin: 7px 0 4px;
}
.lp-mini-note {
  background: #f8faff;
  border-radius: 5px;
  padding: 4px 5px;
  font-size: 7px;
  color: #374151;
  margin-bottom: 3px;
}
.lp-mini-note-meta { font-size: 6px; color: #9ca3af; margin-top: 2px; }
.lp-mini-status-row {
  display: flex;
  gap: 3px;
  margin-top: 5px;
}
.lp-mini-status-btn {
  flex: 1;
  padding: 3px 2px;
  border-radius: 4px;
  font-size: 6.5px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: default;
  text-align: center;
}
.lp-mini-status-btn.ns { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.lp-mini-status-btn.started { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.lp-mini-status-btn.done    { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
/* Demo only banner inside phone */
.lp-demo-banner {
  background: #fef9c3;
  color: #854d0e;
  font-size: 6.5px;
  font-weight: 700;
  text-align: center;
  padding: 3px 6px;
}

/* ── Use cases section ────────────────────────────────────────────── */
.lp-usecases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.lp-usecase-card {
  background: #fff;
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border: 1px solid #f1f5f9;
  transition: transform .2s, box-shadow .2s;
}
.lp-usecase-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.12); }
.lp-usecase-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.lp-usecase-emoji {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.lp-usecase-emoji-green  { background: #dcfce7; }
.lp-usecase-emoji-blue   { background: #ede9fe; }
.lp-usecase-emoji-amber  { background: #fef3c7; }
.lp-usecase-emoji-purple { background: #f3e8ff; }
.lp-usecase-header h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 3px;
}
.lp-usecase-header p { font-size: .82rem; color: #6b7280; }
.lp-usecase-tasks { list-style: none; }
.lp-usecase-task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 10px;
  margin-bottom: 7px;
  background: #f8faff;
  font-size: .85rem;
}
.lp-usecase-task-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: #1a1a2e;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-usecase-task-badge {
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.lp-uc-ns     { background: #f1f5f9; color: #475569; }
.lp-uc-started{ background: #ede9fe; color: #5b21b6; }
.lp-uc-done   { background: #dcfce7; color: #166534; }
.lp-uc-overdue{ background: #fee2e2; color: #991b1b; }
.lp-usecase-disclaimer {
  margin-top: 14px;
  font-size: .72rem;
  color: #9ca3af;
  font-style: italic;
  text-align: center;
}

/* ── How it works ────────────────────────────────────────────────── */
.lp-how-bg { background: #f8faff; }
.lp-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  position: relative;
}
.lp-step {
  text-align: center;
}
.lp-step-num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 4px 14px rgba(124,58,237,0.35);
}
.lp-step h3 { font-size: 1rem; font-weight: 800; color: #1a1a2e; margin-bottom: 8px; }
.lp-step p  { font-size: .88rem; color: #6b7280; line-height: 1.6; }

/* ── Testimonials ─────────────────────────────────────────────────── */
/* ── Comparison ───────────────────────────────────────────────────── */
.lp-compare-bg { background: #fff; }
.lp-compare-wrap {
  overflow-x: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(15,23,42,.06);
}
.lp-compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.lp-compare-table th,
.lp-compare-table td {
  padding: 16px 18px;
  border-bottom: 1px solid #eef2f7;
  text-align: left;
  font-size: .9rem;
  color: #374151;
}
.lp-compare-table thead th {
  background: #f8faff;
  color: #111827;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.lp-compare-table tbody th {
  font-weight: 800;
  color: #111827;
  background: #fcfcff;
}
.lp-compare-table tbody tr:last-child th,
.lp-compare-table tbody tr:last-child td { border-bottom: none; }
.lp-check {
  color: #15803d;
  font-weight: 900;
}
.lp-cross {
  color: #9ca3af;
  font-weight: 900;
}
.lp-footnote {
  margin-top: 14px;
  text-align: center;
  font-size: .78rem;
  color: #6b7280;
}

/* ── FAQ ──────────────────────────────────────────────────────────── */
.lp-faq-bg { background: #f8faff; }
.lp-faq-grid {
  display: grid;
  gap: 16px;
  max-width: 920px;
  margin: 0 auto;
}
.lp-faq-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 0 18px;
  box-shadow: 0 4px 20px rgba(15,23,42,.04);
}
.lp-faq-item summary {
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: 800;
  color: #111827;
  padding: 18px 0;
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item p {
  margin: 0 0 18px;
  font-size: .92rem;
  color: #4b5563;
  line-height: 1.7;
}

/* ── Bottom CTA ──────────────────────────────────────────────────── */
.lp-cta-bg {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
}
.lp-cta-section {
  text-align: center;
  padding: 88px 24px;
  max-width: 700px;
  margin: 0 auto;
}
.lp-cta-section h2 {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -.02em;
}
.lp-cta-section p {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.78);
  margin-bottom: 36px;
  line-height: 1.65;
}
.lp-cta-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.lp-btn-cta-white {
  padding: 16px 36px;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 800;
  border: none;
  background: #fff;
  color: #7c3aed;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  min-height: 54px;
}
.lp-btn-cta-white:hover { opacity: .92; }
.lp-btn-cta-white:active { transform: scale(.97); }
.lp-btn-cta-outline {
  padding: 16px 36px;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 700;
  border: 2px solid rgba(255,255,255,0.65);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  min-height: 54px;
}
.lp-btn-cta-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ── Landing footer ──────────────────────────────────────────────── */
.lp-footer {
  background: #0f172a;
  color: rgba(255,255,255,0.55);
  text-align: center;
  padding: 28px 24px;
  font-size: .82rem;
  line-height: 1.7;
}
.lp-footer a { color: rgba(255,255,255,0.65); text-decoration: none; }
.lp-footer a:hover { color: #fff; text-decoration: underline; }
.lp-footer-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }

/* ── Hero trust badges ────────────────────────────────────────────── */
.lp-hero-badges {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}
.lp-hero-badge {
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.24);
  color: rgba(255,255,255,.85);
  font-size: .78rem;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 20px;
  letter-spacing: .01em;
}

/* ── Hero floating XP / achievement bubbles ──────────────────────── */
.lp-hero-float {
  position: absolute;
  z-index: 3;
  border-radius: 28px;
  padding: 8px 16px;
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,.28);
  display: none;
}
@media (min-width: 900px) {
  .lp-hero-float { display: block; }
}
.lp-float-xp {
  background: linear-gradient(135deg, #22c55e, #15803d);
  color: #fff;
  top: 28%;
  right: 7%;
  animation: lp-float-bob 5s ease-in-out infinite;
}
.lp-float-achievement {
  background: linear-gradient(135deg, #f59e0b, #b45309);
  color: #fff;
  top: 52%;
  left: 4%;
  animation: lp-float-bob 6.5s ease-in-out infinite .8s;
}
.lp-float-streak {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
  bottom: 24%;
  right: 8%;
  animation: lp-float-bob 5.8s ease-in-out infinite 1.6s;
}
@keyframes lp-float-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%       { transform: translateY(-14px) rotate(1.5deg); }
}

/* ── "Why TaskIt?" section ───────────────────────────────────────── */
.lp-why-bg {
  background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 60%, #2d1b69 100%);
}
.lp-why-bg .lp-section-label   { color: #c4b5fd; }
.lp-why-bg .lp-section-heading { color: #fff; }
.lp-why-bg .lp-section-sub     { color: rgba(196,181,253,.82); }
.lp-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}
.lp-why-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  transition: background .2s, border-color .25s, transform .2s;
}
.lp-why-card:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(196,181,253,.55);
  transform: translateY(-4px);
}
.lp-why-icon {
  font-size: 2.4rem;
  margin-bottom: 14px;
  display: block;
}
.lp-why-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}
.lp-why-card p {
  font-size: .875rem;
  color: rgba(196,181,253,.85);
  line-height: 1.65;
  margin: 0;
}

/* ── Privacy highlight band ──────────────────────────────────────── */
.lp-privacy-band {
  background: #0f172a;
  padding: 60px 24px;
  text-align: center;
}
.lp-privacy-inner {
  max-width: 740px;
  margin: 0 auto;
}
.lp-privacy-icon {
  font-size: 2.8rem;
  margin-bottom: 14px;
}
.lp-privacy-band h2 {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 14px;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.lp-privacy-band p {
  font-size: 1rem;
  color: rgba(196,181,253,.82);
  line-height: 1.7;
  margin-bottom: 0;
}
.lp-privacy-pills {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}
.lp-privacy-pill {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  color: #c4b5fd;
  font-size: .82rem;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 20px;
}

/* ── Responsive tweaks ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .lp-nav { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
  .lp-nav-title { font-size: 1.1rem; }
  .lp-nav-links {
    width: 100%;
    order: 3;
    justify-content: center;
    gap: 14px;
    padding-top: 2px;
  }
  .lp-nav-links a { font-size: .8rem; }
  .lp-btn-nav-signin { padding: 8px 12px; font-size: .82rem; }
  .lp-btn-nav-started { padding: 8px 12px; font-size: .82rem; }
  .lp-hero { padding: 100px 16px 60px; }
  .lp-stats { grid-template-columns: repeat(2, 1fr); }
  .lp-stat-num { font-size: 1.5rem; }
  .lp-section { padding: 52px 16px; }
  .lp-hero-proof li { font-size: .86rem; }
  .lp-phones-row { gap: 16px; }
  .lp-phone { width: 170px; }
  .lp-phone-content { font-size: 8px; }
  .lp-mini-header-title { font-size: 10px; }
  .lp-mini-card-title { font-size: 8px; }
  .lp-phones-row .lp-phone-wrap:nth-child(4) { display: none; }
}
@media (max-width: 440px) {
  .lp-phones-row .lp-phone-wrap:nth-child(3),
  .lp-phones-row .lp-phone-wrap:nth-child(4) { display: none; }
}

/* =====================================================================
   GAMIFICATION UI
   ===================================================================== */

/* Toggle switch (iOS-style) */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-switch-track {
  width: 46px;
  height: 26px;
  background: #d1d5db;
  border-radius: 999px;
  position: relative;
  flex-shrink: 0;
  transition: background .2s;
}
.toggle-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
  transition: transform .2s;
}
.toggle-switch input:checked + .toggle-switch-track { background: #7c3aed; }
.toggle-switch input:checked + .toggle-switch-track::after { transform: translateX(20px); }
.toggle-switch input:disabled + .toggle-switch-track { opacity: .55; cursor: not-allowed; }

/* Title / stats banner */
.gamif-banner {
  background: linear-gradient(135deg, #312e81 0%, #7c3aed 100%);
  border-radius: 12px;
  padding: 16px 14px 14px;
  margin-bottom: 16px;
  text-align: center;
}
.gamif-banner-title { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 2px; }
.gamif-banner-sub   { font-size: .75rem; color: #c4b5fd; margin-bottom: 12px; }
.gamif-banner-stats { display: flex; justify-content: center; gap: 28px; }
.gamif-banner-stat  { text-align: center; }
.gamif-banner-stat-num           { font-size: 1.4rem; font-weight: 800; color: #fde68a; }
.gamif-banner-stat-num.credits   { color: #ddd6fe; }
.gamif-banner-stat-label         { font-size: .68rem; color: #c4b5fd; margin-top: 1px; }

/* Skill bars */
.gamif-skill-row { margin-bottom: 12px; }
.gamif-skill-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.gamif-skill-name { font-size: .875rem; font-weight: 600; color: #374151; }
.gamif-skill-lvl-badge {
  font-size: .72rem;
  font-weight: 700;
  color: #7c3aed;
  background: #ede9fe;
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
}
.gamif-skill-bar-track {
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.gamif-skill-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #60a5fa);
  border-radius: 999px;
  transition: width .45s ease;
}
.gamif-skill-xp-sub { font-size: .7rem; color: #9ca3af; margin-top: 2px; }

/* Achievement grid */
.gamif-ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.gamif-ach {
  border-radius: 10px;
  padding: 10px 6px 8px;
  text-align: center;
  border: 1px solid;
}
.gamif-ach-unlocked { background: #f0fdf4; border-color: #86efac; }
.gamif-ach-locked   { background: #f9fafb; border-color: #e5e7eb; opacity: .5; }
.gamif-ach-icon     { font-size: 1.6rem; display: block; margin-bottom: 4px; }
.gamif-ach-name     { font-size: .72rem; font-weight: 700; color: #374151; line-height: 1.3; }
.gamif-ach-desc     { font-size: .65rem; color: #6b7280; margin-top: 2px; line-height: 1.35; }
.gamif-ach-game     { font-size: .6rem; color: #7c3aed; margin-top: 3px; font-style: italic; line-height: 1.3; }
.gamif-ach-date     { font-size: .62rem; color: #9ca3af; margin-top: 3px; }

/* Streak rows in profile */
.gamif-streak-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fafafa;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid #f3f4f6;
}
.gamif-streak-info { flex: 1; min-width: 0; }
.gamif-streak-title {
  font-size: .875rem;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gamif-streak-sub   { font-size: .72rem; color: #9ca3af; }
.gamif-streak-right { text-align: right; flex-shrink: 0; margin-left: 10px; }
.gamif-streak-num   { font-size: 1.25rem; font-weight: 800; color: #f97316; }
.gamif-streak-best  { font-size: .65rem; color: #9ca3af; }

/* Streak panel inside task-detail modal */
#detailStreakSection {
  background: linear-gradient(135deg, #fff7ed, #fef3c7);
  border: 1px solid #fed7aa;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.detail-streak-left  { flex: 1; }
.detail-streak-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #9ca3af;
  margin-bottom: 4px;
}
.detail-streak-count { font-size: 2rem; font-weight: 900; color: #f97316; line-height: 1; }
.detail-streak-best  { font-size: .75rem; color: #6b7280; margin-top: 2px; }
.detail-streak-right { flex-shrink: 0; }
.detail-freeze-badge {
  font-size: .8rem;
  font-weight: 600;
  color: #5b21b6;
  background: #ede9fe;
  border-radius: 8px;
  padding: 7px 10px;
  text-align: center;
  white-space: nowrap;
}

/* =====================================================================
   v1.3.1 — Floating Action Button, Gamification Strip, Filter Badge,
             Cookie Notice
   ===================================================================== */

/* Floating Action Button — New Task */
.fab-btn {
  position: fixed;
  bottom: 74px;
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #fff;
  font-size: 1.9rem;
  font-weight: 300;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.5);
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s ease, box-shadow .14s ease;
}
.fab-btn:active {
  transform: scale(.91);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
}

/* FAB popup menu */
.fab-menu-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 44;
}
.fab-menu {
  position: fixed;
  bottom: 140px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 46;
  align-items: flex-end;
}
/* scale() removed: combined scale+translateY matrix decomposition fails silently on
   some Android GPU drivers. Opacity-only + translateY is reliably composited. */
@-webkit-keyframes fab-item-in {
  from { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); }
  to   { opacity: 1; -webkit-transform: translateY(0);    transform: translateY(0); }
}
@keyframes fab-item-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@-webkit-keyframes fab-item-out {
  from { opacity: 1; -webkit-transform: translateY(0);    transform: translateY(0); }
  to   { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); }
}
@keyframes fab-item-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(20px); }
}
/* Items default to invisible so there is no flash during the double-rAF window
   before the animation class is applied. The animation fill-mode handles all
   visibility changes once the class is present. */
.fab-menu .fab-menu-item {
  opacity: 0;
  pointer-events: none;
}
/* Open: items slide up staggered.
   will-change forces a compositor layer so the animation tween is never skipped. */
.fab-menu.fab-menu-open .fab-menu-item {
  pointer-events: auto;
  -webkit-will-change: opacity, transform;
  will-change: opacity, transform;
  -webkit-animation: fab-item-in .22s cubic-bezier(.25,.46,.45,.94) both;
  animation: fab-item-in .22s cubic-bezier(.25,.46,.45,.94) both;
}
.fab-menu.fab-menu-open .fab-menu-item:nth-child(1) { -webkit-animation-delay: .04s; animation-delay: .04s; }
.fab-menu.fab-menu-open .fab-menu-item:nth-child(2) { -webkit-animation-delay: .09s; animation-delay: .09s; }
.fab-menu.fab-menu-open .fab-menu-item:nth-child(3) { -webkit-animation-delay: .14s; animation-delay: .14s; }
/* Close: items slide down in reverse stagger (bottom item first) */
.fab-menu.fab-menu-closing .fab-menu-item {
  -webkit-will-change: opacity, transform;
  will-change: opacity, transform;
  -webkit-animation: fab-item-out .18s cubic-bezier(.55,.06,.68,.19) both;
  animation: fab-item-out .18s cubic-bezier(.55,.06,.68,.19) both;
}
.fab-menu.fab-menu-closing .fab-menu-item:nth-child(3) { -webkit-animation-delay: 0s;   animation-delay: 0s; }
.fab-menu.fab-menu-closing .fab-menu-item:nth-child(2) { -webkit-animation-delay: .05s; animation-delay: .05s; }
.fab-menu.fab-menu-closing .fab-menu-item:nth-child(1) { -webkit-animation-delay: .1s;  animation-delay: .1s; }
.fab-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  font-size: .92rem;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s;
}
.fab-menu-item:active { background: #f3f4f6; }
.fab-menu-icon { font-size: 1.1rem; }

/* Gamification strip on My Tasks */
.gamif-strip {
  background: linear-gradient(135deg, #312e81 0%, #7c3aed 100%);
  border-radius: 12px;
  padding: 11px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .14s;
}
.gamif-strip:active { opacity: .85; }
.gamif-strip-left { flex: 1; min-width: 0; }
.gamif-strip-skill-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.gamif-strip-skill-name {
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gamif-strip-lvl-badge {
  font-size: .68rem;
  font-weight: 700;
  color: #312e81;
  background: #fde68a;
  border-radius: 20px;
  padding: 2px 7px;
  flex-shrink: 0;
  margin-left: 6px;
}
.gamif-strip-bar-track {
  height: 5px;
  background: rgba(255,255,255,.25);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 3px;
}
.gamif-strip-bar-fill {
  height: 100%;
  background: #fde68a;
  border-radius: 999px;
  transition: width .45s ease;
}
.gamif-strip-xp-sub { font-size: .65rem; color: #c4b5fd; }
.gamif-strip-right {
  flex-shrink: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.gamif-strip-streak { font-size: 1.05rem; font-weight: 800; color: #fde68a; }
.gamif-strip-ach-badge {
  font-size: .95rem;
  animation: achPulse 1.6s ease infinite;
}
@keyframes achPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}

/* Filter toggle active badge */
.filter-active-badge {
  background: #7c3aed;
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  border-radius: 50%;
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  margin-left: 2px;
}

/* Cookie / storage informational notice */
.cookie-notice {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1a1a2e;
  color: #e5e7eb;
  font-size: .82rem;
  line-height: 1.5;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 90;
  box-shadow: 0 -2px 12px rgba(0,0,0,.18);
}
.cookie-notice p { flex: 1; margin: 0; }
.cookie-notice a { color: #93c5fd; text-decoration: underline; }
.cookie-notice-close {
  background: none;
  border: 1px solid #4b5563;
  color: #e5e7eb;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: .8rem;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.cookie-notice-close:hover { background: #374151; }

/* =========================================================
   TASKIT! ARCADE — full-screen overlay (Stage 1)
   ========================================================= */

/* Body lock — prevents background scroll while arcade is open */
body.arcade-open { overflow: hidden; }

/* Full-screen overlay — animation is triggered by JS via .arcade-animating */
.arcade-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: linear-gradient(160deg, #0f0c29 0%, #1a1040 40%, #24243e 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.arcade-overlay.hidden { display: none; }

/* Animation class — added by JS on every open so it always replays */
.arcade-overlay.arcade-animating {
  animation: arcadeIn .22s ease both;
}

@keyframes arcadeIn {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* Top bar — CSS Grid for perfect centering independent of button width */
.arcade-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 16px;
  background: rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
  gap: 8px;
}

.arcade-back-btn {
  justify-self: start;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #e0e7ff;
  font-size: .85rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.arcade-back-btn:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.45); }

.arcade-logo {
  font-size: 1rem;
  font-weight: 800;
  color: #c4b5fd;
  letter-spacing: .04em;
  text-align: center;
}

/* Third grid cell — invisible but keeps the logo centred */
.arcade-topbar-spacer { visibility: hidden; pointer-events: none; }

/* Game title section */
.arcade-title-bar {
  text-align: center;
  padding: 14px 16px 10px;
  flex-shrink: 0;
}
.arcade-game-icon {
  font-size: 2.4rem;
  line-height: 1;
  display: block;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 12px rgba(196,181,253,.6));
}
.arcade-game-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: .01em;
}
.arcade-game-subtitle {
  font-size: .85rem;
  color: #a5b4fc;
  margin: 0;
}

/* Main game container — fills remaining vertical space */
.arcade-container {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 8px 12px 12px;
  overflow: hidden;
  min-height: 0;
}

/* The frame where game canvases / Stage 2 content is injected */
.arcade-game-frame {
  width: 100%;
  max-width: 640px;
  min-height: 180px;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Coming-soon placeholder (replaced by Stage 2 games) */
.arcade-coming-soon {
  text-align: center;
  padding: 28px 20px;
  animation: arcadeIn .3s ease both;
}
.arcade-coming-soon-icon {
  font-size: 3.6rem;
  display: block;
  margin-bottom: 14px;
  animation: arcadeBounce 1.8s ease-in-out infinite;
}
.arcade-coming-soon-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #e0e7ff;
  margin: 0 0 8px;
}
.arcade-coming-soon-sub {
  font-size: .82rem;
  color: #6b7280;
  margin: 0;
}

@keyframes arcadeBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* Clickable unlocked achievement badges */
.gamif-ach-unlocked.arcade-playable,
.gamif-ach-admin-preview.arcade-playable,
.gamif-ach-game-ready.arcade-playable {
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.gamif-ach-unlocked.arcade-playable:hover,
.gamif-ach-admin-preview.arcade-playable:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 14px rgba(134,239,172,.35);
}

/* Admin-preview badge style (not yet earned but admin can test) */
.gamif-ach-admin-preview {
  background: #fffbeb;
  border-color: #fcd34d;
  opacity: .85;
}

/* Game-ready: game slot is accessible by achievement count but this specific
   achievement hasn't been earned yet. Purple tint to distinguish from both
   the green (earned+playable) and grey (locked, no access) states. */
.gamif-ach-game-ready {
  background: #f5f3ff;
  border-color: #a78bfa;
}
.gamif-ach-game-ready.arcade-playable:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 14px rgba(167,139,250,.35);
}

.gamif-ach-play-hint {
  font-size: .6rem;
  color: #16a34a;
  margin-top: 4px;
  font-weight: 600;
}

/* Responsive tweaks */
@media (max-width: 480px) {
  .arcade-game-title  { font-size: 1.05rem; }
  .arcade-game-icon   { font-size: 1.9rem; }
  .arcade-logo        { font-size: .82rem; }
  .arcade-back-btn    { font-size: .75rem; padding: 6px 10px; }
  .arcade-title-bar   { padding: 10px 12px 8px; }
}

/* Landscape + short viewport: shrink title area to maximise game space */
@media (max-height: 500px) {
  .arcade-title-bar   { padding: 6px 12px 4px; }
  .arcade-game-icon   { font-size: 1.4rem; margin-bottom: 3px; }
  .arcade-game-title  { font-size: .95rem; }
  .arcade-game-subtitle { display: none; }
}

/* =========================================================
   TASKIT! ARCADE — Stage 2: Shared game theme + Hangman + Word Search
   =========================================================
   All colours are declared as CSS custom properties on each game's
   root element so they can be overridden from a parent stylesheet
   to restyle every game at once without touching the JS files.
   ========================================================= */

/* ── Theme variables (scoped to each game's root element) ── */
.hm-root, .ws-root {
  /* Text colours */
  --jba-text:        #e0e7ff;
  --jba-text-dim:    rgba(196,181,253,.7);
  /* Brand accent */
  --jba-accent:      #7c3aed;
  --jba-purple:      #c4b5fd;
  /* Success (correct / found) */
  --jba-ok-bg:       rgba(22,163,74,.42);
  --jba-ok-text:     #4ade80;
  /* Danger (wrong / lost) */
  --jba-err-bg:      rgba(220,38,38,.35);
  --jba-err-text:    #f87171;
  /* Cell / key surfaces */
  --jba-surface:     rgba(255,255,255,.08);
  --jba-surface-hi:  rgba(255,255,255,.2);
  --jba-border:      rgba(255,255,255,.18);
  /* Drag-selection highlight */
  --jba-sel-bg:      rgba(196,181,253,.38);
  /* SVG gallows stroke */
  --jba-gallows:     rgba(196,181,253,.6);
  /* SVG hangman figure stroke/fill */
  --jba-figure:      #f9a8d4;
}

/* ── Shared game-root rules ── */
/* align-self:stretch overrides the parent arcade-game-frame's
   align-items:center so the game fills the full frame height.    */
.hm-root, .ws-root {
  width: 100%;
  align-self: stretch;
  box-sizing: border-box;
  overflow-y: auto;    /* scroll on very short viewports instead of clipping */
  overflow-x: hidden;
}

/* ── Shared replay / new-game button ── */
.hm-replay, .ws-replay {
  display: none;              /* shown by JS when the game ends */
  padding: 7px 16px;
  border-radius: 8px;
  border: none;
  background: var(--jba-accent);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
  transition: opacity .15s;
}
.hm-replay:hover, .ws-replay:hover { opacity: .86; }

/* =========================================================
   HANGMAN
   ========================================================= */

/* Root — two-column flex row */
.hm-root {
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 12px 14px;
}

/* Left column — SVG gallows */
.hm-svg-col {
  flex-shrink: 0;
  width: 130px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
}
.hm-svg-col svg { display: block; width: 100%; max-width: 130px; }

/* SVG stroke/fill classes — scoped under .hm-svg-col so they never
   accidentally match HTML elements with the same class name           */
.hm-svg-col .hm-gallows {
  stroke: var(--jba-gallows);
  stroke-width: 3;
  stroke-linecap: round;
  fill: none;
}
.hm-svg-col .hm-body {
  stroke: var(--jba-figure);
  stroke-width: 3;
  stroke-linecap: round;
  fill: none;
}
.hm-svg-col circle.hm-body {
  fill: var(--jba-figure);
  stroke: none;
}

/* Right panel */
.hm-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

/* Wrong-guess counter */
.hm-wrong-count {
  font-size: .75rem;
  font-weight: 700;
  color: var(--jba-err-text);
  margin: 0;
}

/* Word display — row of letter slots */
.hm-word {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Individual letter slot — underline style */
.hm-letter-slot {
  display: inline-flex;
  width: 20px;
  height: 28px;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--jba-purple);
  font-size: .9rem;
  font-weight: 700;
  color: var(--jba-ok-text);   /* correctly guessed letters shown in green */
}
/* Unguessed letters are invisible (slot is still shown) */
.hm-letter-slot--hidden { color: transparent; }
/* Revealed on loss — shown in red */
.hm-letter-slot--revealed { color: var(--jba-err-text); }

/* Win / lose message */
.hm-msg {
  font-size: .88rem;
  font-weight: 700;
  min-height: 1.3em;
  color: var(--jba-text);
  margin: 0;
}
.hm-msg--win  { color: var(--jba-ok-text); }
.hm-msg--lose { color: var(--jba-err-text); }

/* A–Z keyboard */
.hm-keyboard {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

/* Individual letter key */
.hm-key {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid var(--jba-border);
  background: var(--jba-surface);
  color: var(--jba-text);
  font-size: .68rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .1s, transform .1s;
}
.hm-key:not(:disabled):hover {
  background: var(--jba-surface-hi);
  transform: scale(1.1);
}
.hm-key:disabled { cursor: not-allowed; }

/* Correct guess — green tint */
.hm-key--correct {
  background: var(--jba-ok-bg);
  color: var(--jba-ok-text);
  border-color: transparent;
}
/* Wrong guess — red tint, dimmed text */
.hm-key--wrong {
  background: var(--jba-err-bg);
  color: rgba(255,255,255,.3);
  border-color: transparent;
}

/* =========================================================
   WORD SEARCH
   ========================================================= */

/* Root — grid (flex:1) + word-list panel (fixed) */
.ws-root {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 8px 10px;
}

/* Grid wrapper — fills remaining horizontal space */
.ws-grid-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 12-column CSS Grid for the letter cells */
.ws-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;   /* prevent browser scroll-gestures during drag */
}

/* Individual letter cell */
.ws-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;   /* overridden to best-fit value by JS after layout */
  font-weight: 700;
  border-radius: 2px;
  cursor: pointer;
  color: var(--jba-purple);
  background: var(--jba-surface);
  transition: background .07s;
}
/* Active drag-selection highlight */
.ws-cell--sel {
  background: var(--jba-sel-bg);
  color: #fff;
}
/* Permanently found cell — green */
.ws-cell--found {
  background: var(--jba-ok-bg);
  color: var(--jba-ok-text);
}

/* Right-hand word-list panel */
.ws-panel {
  width: 100px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 2px 0;
  justify-content: center;
  overflow-y: auto;
}
.ws-panel-title {
  font-size: .66rem;
  font-weight: 700;
  color: var(--jba-text-dim);
  margin: 0 0 3px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Word items in the panel */
.ws-word-item {
  font-size: .72rem;
  font-weight: 600;
  color: var(--jba-text);
  transition: color .2s;
}
.ws-word-item--found {
  color: var(--jba-ok-text);
  text-decoration: line-through;
}

/* Win message */
.ws-win-msg {
  display: none;     /* shown by JS when all words are found */
  font-size: .72rem;
  font-weight: 700;
  color: var(--jba-ok-text);
  margin-top: 6px;
}
.ws-replay { margin-top: 4px; }

/* Narrow screens (≤ 380 px): stack word list below the grid */
@media (max-width: 380px) {
  .ws-root    { flex-direction: column; }
  .ws-panel   { width: 100%; flex-direction: row; flex-wrap: wrap;
                gap: 8px; justify-content: flex-start; }
  .ws-panel-title { width: 100%; margin-bottom: 0; }
  .ws-win-msg, .ws-replay { margin: 0; }
}

/* ========== Collectibles & Loot Drop ========== */

/* Rarity badge colours */
.badge-rarity-common { background: #f1f5f9; color: #475569; }
.badge-rarity-rare   { background: #ede9fe; color: #5b21b6; }
.badge-rarity-epic   { background: #fdf4ff; color: #7e22ce; border: 1px solid #e879f9; }

/* Loot-drop modal — centred presentation on all screen sizes */
#lootDropModal .modal-sheet {
  max-width: 380px;
  margin: 0 auto;
}
#lootDropModal .modal-body {
  text-align: center;
}
.loot-drop-icon {
  font-size: 3.2rem;
  margin-bottom: 8px;
  display: block;
}
.loot-drop-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 6px;
}
.loot-drop-category {
  font-size: .78rem;
  color: #6b7280;
  margin-bottom: 8px;
}
.loot-drop-desc {
  font-size: .85rem;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* Inventory section on the progress page */
.gamif-inv-category {
  margin-bottom: 18px;
}
.gamif-inv-category-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #9ca3af;
  margin-bottom: 8px;
}
.gamif-inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}
.gamif-inv-item {
  border-radius: 10px;
  padding: 10px 6px 8px;
  text-align: center;
  border: 1px solid #e5e7eb;
  background: #fff;
  transition: box-shadow .15s;
}
.gamif-inv-item.owned {
  background: #f5f3ff;
  border-color: #c4b5fd;
}
.gamif-inv-item.owned.epic {
  background: #fdf4ff;
  border-color: #e879f9;
  box-shadow: 0 0 0 1px #e879f9;
}
.gamif-inv-item.unowned {
  opacity: .4;
  filter: grayscale(1);
}
.gamif-inv-item-icon {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 4px;
}
.gamif-inv-item-name {
  font-size: .68rem;
  font-weight: 600;
  color: #374151;
  line-height: 1.3;
  word-break: break-word;
}
.gamif-inv-item-count {
  font-size: .6rem;
  color: #9ca3af;
  margin-top: 2px;
}

/* =========================================================
   ARCADE — Token economy & Time Budget UI
   ========================================================= */

/* Token balance display in the arcade topbar (right column) */
.arcade-topbar-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
}
.arcade-token-display {
  font-size: .78rem;
  font-weight: 700;
  color: #fde68a;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(253,230,138,.35);
  border-radius: 20px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* Time budget row — shown below title bar when a game is active */
.arcade-time-budget {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 16px 4px;
  background: rgba(0,0,0,.2);
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.arcade-time-budget-text {
  font-size: .76rem;
  color: #a5b4fc;
  font-weight: 600;
}
.arcade-spend-token-btn {
  background: rgba(253,230,138,.15);
  border: 1px solid rgba(253,230,138,.4);
  color: #fde68a;
  font-size: .72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.arcade-spend-token-btn:hover { background: rgba(253,230,138,.28); }
.arcade-spend-token-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* Time-budget locked screen */
.arcade-time-locked {
  text-align: center;
  padding: 28px 20px;
  animation: arcadeIn .3s ease both;
}
.arcade-time-locked-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 12px;
}
.arcade-time-locked-title {
  font-size: 1rem;
  font-weight: 700;
  color: #f87171;
  margin: 0 0 8px;
}
.arcade-time-locked-sub {
  font-size: .82rem;
  color: #a5b4fc;
  margin: 0;
}

/* =========================================================
   ARCADE — Game 3: Whac-A-Bug
   ========================================================= */

.wab-root {
  --wab-text:     #e0e7ff;
  --wab-accent:   #7c3aed;
  --wab-surface:  rgba(255,255,255,.08);
  --wab-border:   rgba(255,255,255,.15);
  --wab-ok:       #4ade80;
  --wab-ok-bg:    rgba(22,163,74,.38);
  --wab-err:      #f87171;
  --wab-err-bg:   rgba(220,38,38,.32);
  --wab-gold:     #fbbf24;
  --wab-gold-bg:  rgba(251,191,36,.28);

  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}

/* HUD row: score + timer */
.wab-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  background: var(--wab-surface);
  border-radius: 8px;
  border: 1px solid var(--wab-border);
  font-size: .82rem;
  font-weight: 700;
  color: var(--wab-text);
  flex-shrink: 0;
}
.wab-timer-danger { color: var(--wab-err); }

/* 4×4 bug grid */
.wab-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  flex: 1;
}

/* Individual bug hole */
.wab-cell {
  aspect-ratio: 1;
  border-radius: 10px;
  background: var(--wab-surface);
  border: 1px solid var(--wab-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .08s, background .1s;
  position: relative;
  overflow: hidden;
}
.wab-cell:empty::after {
  content: '';
  display: block;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
}
.wab-cell--bug    { background: var(--wab-ok-bg);   border-color: var(--wab-ok);   cursor: pointer; }
.wab-cell--golden { background: var(--wab-gold-bg); border-color: var(--wab-gold); cursor: pointer; }
.wab-cell--error  { background: var(--wab-err-bg);  border-color: var(--wab-err);  cursor: pointer; }
.wab-cell--bug:hover,
.wab-cell--golden:hover,
.wab-cell--error:hover   { transform: scale(1.08); }
.wab-cell--whacked       { animation: wabWhack .2s ease; }
@keyframes wabWhack {
  0%   { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* End-state */
.wab-msg {
  font-size: .9rem;
  font-weight: 700;
  color: var(--wab-ok);
  text-align: center;
  min-height: 1.4em;
  margin: 0;
}
.wab-replay {
  display: none;
  padding: 7px 18px;
  border-radius: 8px;
  border: none;
  background: var(--wab-accent);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  align-self: center;
  transition: opacity .15s;
}
.wab-replay:hover { opacity: .86; }

/* =========================================================
   ARCADE — Game 4: Code Breaker (Mastermind)
   ========================================================= */

.cb-root {
  --cb-text:      #e0e7ff;
  --cb-text-dim:  rgba(196,181,253,.65);
  --cb-surface:   rgba(255,255,255,.07);
  --cb-border:    rgba(255,255,255,.14);
  --cb-accent:    #7c3aed;
  --cb-ok:        #4ade80;
  --cb-err:       #f87171;

  /* Color palette tokens */
  --cb-red:    #ef4444;
  --cb-blue:   #3b82f6;
  --cb-green:  #22c55e;
  --cb-yellow: #eab308;
  --cb-orange: #f97316;
  --cb-purple: #a855f7;
  --cb-empty:  rgba(255,255,255,.12);

  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Board — scrollable list of guess rows */
.cb-board {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  min-height: 0;
}

/* One attempt row */
.cb-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 8px;
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  transition: border-color .15s;
}
.cb-row--active {
  border-color: rgba(196,181,253,.5);
  background: rgba(196,181,253,.08);
}

/* Row number label */
.cb-row-num {
  font-size: .65rem;
  font-weight: 700;
  color: var(--cb-text-dim);
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

/* Four color pegs */
.cb-pegs {
  display: flex;
  gap: 5px;
  flex: 1;
}
.cb-peg {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cb-empty);
  border: 2px solid rgba(255,255,255,.18);
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
  flex-shrink: 0;
}
.cb-peg--active:hover { transform: scale(1.12); box-shadow: 0 0 8px currentColor; }
.cb-peg--red    { background: var(--cb-red);    border-color: var(--cb-red); }
.cb-peg--blue   { background: var(--cb-blue);   border-color: var(--cb-blue); }
.cb-peg--green  { background: var(--cb-green);  border-color: var(--cb-green); }
.cb-peg--yellow { background: var(--cb-yellow); border-color: var(--cb-yellow); }
.cb-peg--orange { background: var(--cb-orange); border-color: var(--cb-orange); }
.cb-peg--purple { background: var(--cb-purple); border-color: var(--cb-purple); }

/* 2×2 feedback mini-pegs */
.cb-feedback {
  display: grid;
  grid-template-columns: repeat(2, 10px);
  grid-template-rows: repeat(2, 10px);
  gap: 2px;
  flex-shrink: 0;
}
.cb-fb-peg {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.15);
}
.cb-fb-peg--black { background: #1f2937; border-color: #9ca3af; }
.cb-fb-peg--white { background: #f9fafb; border-color: #d1d5db; }

/* Submit button */
.cb-submit {
  padding: 5px 12px;
  border-radius: 7px;
  border: none;
  background: var(--cb-accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity .15s;
  white-space: nowrap;
}
.cb-submit:hover { opacity: .86; }
.cb-submit:disabled { opacity: .35; cursor: not-allowed; }

/* Color palette row */
.cb-palette {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 8px;
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  flex-shrink: 0;
}
.cb-palette-label {
  font-size: .65rem;
  color: var(--cb-text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.cb-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
  flex-shrink: 0;
}
.cb-swatch:hover { transform: scale(1.15); }
.cb-swatch--selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.5);
  transform: scale(1.15);
}

/* Secret code reveal */
.cb-secret {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(220,38,38,.18);
  border: 1px solid rgba(248,113,113,.3);
  border-radius: 8px;
  flex-shrink: 0;
}
.cb-secret-label {
  font-size: .7rem;
  color: var(--cb-err);
  font-weight: 700;
}
.cb-secret-pegs { display: flex; gap: 5px; }

/* End message */
.cb-msg {
  font-size: .88rem;
  font-weight: 700;
  text-align: center;
  color: var(--cb-ok);
  min-height: 1.3em;
  flex-shrink: 0;
}
.cb-msg--lose { color: var(--cb-err); }

/* Replay button */
.cb-replay {
  display: none;
  padding: 7px 18px;
  border-radius: 8px;
  border: none;
  background: var(--cb-accent);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  align-self: center;
  flex-shrink: 0;
  transition: opacity .15s;
}
.cb-replay:hover { opacity: .86; }

/* ─── Sub-tasks ──────────────────────────────────────────────────────────────── */

/* Progress bar used on task cards and in the detail modal */
.subtask-progress-bar {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}
.subtask-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #60a5fa);
  border-radius: 999px;
  transition: width .3s ease;
}

/* Compact progress text on task card */
.subtask-card-meta {
  font-size: .78rem;
  color: #6b7280;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Expandable sub-task section inside the task create/edit modal */
.subtask-add-toggle {
  width: 100%;
  background: none;
  border: 1px dashed #d1d5db;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .88rem;
  color: #7c3aed;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .15s, border-color .15s;
  margin-top: 4px;
}
.subtask-add-toggle:hover { background: #f5f3ff; border-color: #7c3aed; }

/* Individual sub-task row inside the form */
.subtask-form-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.subtask-form-input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: .88rem;
  color: #1a1a2e;
  background: #fff;
  outline: none;
  transition: border-color .15s;
}
.subtask-form-input:focus { border-color: #7c3aed; }
.subtask-form-remove {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
.subtask-form-remove:hover { color: #dc2626; background: #fee2e2; }
.subtask-add-item-btn {
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: .82rem;
  color: #7c3aed;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  margin-top: 2px;
}
.subtask-add-item-btn:hover { background: #f5f3ff; }

/* Sub-task checklist inside the task detail modal */
.subtask-checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
}
.subtask-checklist-item:last-child { border-bottom: none; }
.subtask-check {
  width: 18px;
  height: 18px;
  accent-color: #7c3aed;
  flex-shrink: 0;
  cursor: pointer;
}
.subtask-check:disabled { cursor: default; opacity: .6; }
.subtask-label {
  flex: 1;
  font-size: .9rem;
  color: #1a1a2e;
  line-height: 1.35;
}
.subtask-label-done {
  text-decoration: line-through;
  color: #9ca3af;
}
.subtask-delete-btn {
  background: none;
  border: none;
  color: #d1d5db;
  font-size: .9rem;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 5px;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
.subtask-delete-btn:hover { color: #dc2626; background: #fee2e2; }

/* ── Sporadic Tasks ─────────────────────────────────────────────────── */

.sporadic-container {
  margin-bottom: 14px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 14px;
  background-color: #f0f9ff;
}

.significantly-overdue-container {
  border-color: #fca5a5;
  background-color: #fef2f2;
}

.significantly-overdue-toggle {
  color: #b91c1c;
  font-weight: 700;
}

.significantly-overdue-toggle:hover {
  color: #991b1b;
}

.sporadic-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0284c7;
  padding: 0;
}

.toggle-btn:hover {
  color: #0369a1;
  text-decoration: none;
}

.sporadic-tasks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sporadic-task-card {
  background: white;
  border-left: 3px solid #3b82f6;
  padding: 12px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.sporadic-task-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: #1a1a2e;
  margin-bottom: 6px;
}

.sporadic-last-done {
  font-size: 0.82rem;
  color: #6b7280;
  font-style: normal;
  margin-bottom: 8px;
}

.sporadic-last-done.overdue {
  color: #dc2626;
}

.sporadic-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.sporadic-complete-btn {
  background-color: #3b82f6;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: opacity .15s;
}

.sporadic-complete-btn:hover {
  opacity: 0.9;
}