:root {
  --bg: #0f172a;
  --panel: #111827;
  --panel2: #1e293b;
  --text: #e5e7eb;
  --muted: #cbd5e1;
  --soft: #a5b4fc;
  --border: #334155;
  --accent: #facc15;
  --accent2: #38bdf8;
  --danger: #ef4444;
  --good: #22c55e;
  --warn: #fb923c;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Segoe UI, Arial, sans-serif;
  background: radial-gradient(circle at top left, #1e293b, var(--bg) 50%);
  color: var(--text);
  min-height: 100vh;
}
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 22px 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(15, 23, 42, .96);
  position: sticky;
  top: 0;
  z-index: 5;
}
h1, h2, h3, h4, p { margin-top: 0; }
.topbar h1 { margin-bottom: 4px; letter-spacing: .03em; }
.topbar p { margin-bottom: 0; color: var(--muted); }
.badge {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  color: #fef9c3;
  background: #1f2937;
  font-size: 12px;
  white-space: nowrap;
}
main { max-width: 1220px; margin: 0 auto; padding: 28px; }
.panel, .dashboard-head {
  border: 1px solid var(--border);
  background: rgba(17, 24, 39, .94);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 18px 45px rgba(0,0,0,.24);
  margin-bottom: 18px;
}
.hero { min-height: 260px; display: flex; flex-direction: column; justify-content: center; }
.hidden { display: none !important; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.button-row.right { justify-content: flex-end; }
button, .button-link {
  appearance: none;
  border: 1px solid #475569;
  background: #334155;
  color: #f8fafc;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
}
button:hover, .button-link:hover { filter: brightness(1.12); }
button.secondary, .button-link.secondary { background: #1f2937; }
button.danger { background: #7f1d1d; border-color: #991b1b; }
button.success { background: #166534; border-color: #15803d; }
button.small { padding: 7px 10px; font-size: 13px; }
.icon-button { width: 38px; height: 38px; padding: 0; font-size: 22px; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-weight: 600; margin-bottom: 12px; }
input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #475569;
  background: #0f172a;
  color: #f8fafc;
  font: inherit;
}
textarea { resize: vertical; }
.message { min-height: 20px; color: var(--muted); }
.message.error { color: #fca5a5; }
.message.good { color: #86efac; }
.muted { color: var(--muted); }
.dashboard-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.status-card { border-color: #475569; }
.details {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: 8px 14px;
  margin: 0;
}
dt { color: var(--muted); font-weight: 700; }
dd { margin: 0; color: #f8fafc; }
.section-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.card-list { display: grid; gap: 10px; }
.mini-card, .task-card {
  border: 1px solid var(--border);
  background: rgba(30, 41, 59, .96);
  border-radius: 14px;
  padding: 14px;
}
.mini-card p, .task-card p { margin: 6px 0; color: var(--muted); }
.admin-card { border-color: var(--accent); }
.muted-card { color: var(--muted); }
.danger-card { border-color: var(--danger); }
.task-groups { display: grid; gap: 18px; }
.task-section { margin-top: 16px; }
.task-section h4 { margin-bottom: 10px; color: #f8fafc; }
.task-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 12px; }
.task-card { position: relative; border-width: 2px; }
.task-card.due { border-color: var(--warn); }
.task-card.overdue { border-color: var(--danger); }
.task-card.complete { border-color: var(--good); background: rgba(20, 83, 45, .45); }
.task-card.later { border-color: #475569; }
.task-title-row { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.task-title-row strong { font-size: 16px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pill { border: 1px solid #475569; background: #0f172a; color: #e2e8f0; border-radius: 999px; padding: 4px 8px; font-size: 12px; }
.pill.flight { border-color: var(--accent); color: #fef9c3; }
.pill.email { border-color: var(--accent2); }
.pill.due { border-color: var(--warn); color: #fed7aa; }
.pill.overdue { border-color: var(--danger); color: #fecaca; }
.pill.complete { border-color: var(--good); color: #bbf7d0; }
.task-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.empty-state { border: 1px dashed #475569; border-radius: 14px; padding: 16px; color: var(--muted); }
dialog.task-dialog, #taskDialog {
  width: min(850px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 1px solid #475569;
  background: #111827 !important;
  color: var(--text) !important;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
  z-index: 9999;
}
dialog.task-dialog form, #taskDialog form {
  background: #111827;
  color: var(--text);
}
dialog.task-dialog input, dialog.task-dialog select, dialog.task-dialog textarea,
#taskDialog input, #taskDialog select, #taskDialog textarea {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #64748b !important;
}
dialog.task-dialog label, #taskDialog label { color: #cbd5e1 !important; }
dialog.task-dialog::backdrop, #taskDialog::backdrop { background: rgba(2, 6, 23, .82); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.dialog-head h3 { margin: 0; }
.subfields { border: 1px solid var(--border); background: rgba(15, 23, 42, .6); border-radius: 14px; padding: 14px; margin: 12px 0; }
.debug-wrap { max-width: 1100px; }
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #020617;
  border: 1px solid #334155;
  border-radius: 14px;
  padding: 16px;
}
@media (max-width: 760px) {
  .topbar, .dashboard-head, .section-head { flex-direction: column; align-items: stretch; }
  .form-grid, .two-col { grid-template-columns: 1fr; }
  main { padding: 18px; }
}
.pill.builtin { border-color: #facc15; color: #fde68a; background: rgba(250, 204, 21, 0.10); }

.check-list { display: grid; gap: 8px; margin: 10px 0 12px; }
.check-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.03); }
.check-row input { width: auto; margin: 0; }
.pill.program { background: rgba(168,85,247,.18); border-color: rgba(168,85,247,.45); color: #e9d5ff; }
.program-card { border-left: 3px solid rgba(168,85,247,.55); }
.tracker-card { border-left: 3px solid #64748b; }
.tracker-card.due { border-left-color: var(--warn); }
.tracker-card.overdue { border-left-color: var(--danger); }
.tracker-card.soon { border-left-color: var(--accent2); }
.tracker-card.na { border-left-color: var(--good); opacity: .78; }
.tracker-edit-grid { margin-top: 10px; }
.inline-check { display: inline-flex; align-items: center; gap: 6px; width: auto; margin: 0; color: var(--text); }
.inline-check input { width: auto; margin: 0; }

/* Phase 6 reporting/config polish */
.report-bucket p { margin: 0.45rem 0; }
.cookie-notice {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 16px;
  background: rgba(18, 24, 38, .96);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}
.cookie-notice p { margin: .2rem 0 0; color: var(--muted); }
.cookie-notice.hidden { display: none; }

/* Hidden Recognition Layer v0.1 admin preview */
.admin-pill {
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
}
#recognitionPreviewPanel {
  border-color: rgba(245, 190, 80, 0.38);
  box-shadow: 0 0 0 1px rgba(245, 190, 80, 0.12), 0 22px 80px rgba(0,0,0,0.25);
}
#recognitionPreviewPanel .program-card {
  border-color: rgba(245, 190, 80, 0.45);
}

/* Command Rhythm UI Refresh v0.1 — WPF-inspired command dashboard shell */
:root {
  --bg: #0b1424;
  --panel: #0f1a2d;
  --panel2: #1d2a3d;
  --panel3: #26364e;
  --text: #f5f8ff;
  --muted: #cbd7ea;
  --border: #2c3b55;
  --border-strong: #3b4f70;
  --accent: #c15d12;
  --accent2: #6b7f9d;
  --danger: #c72136;
  --good: #3fb46a;
  --warn: #c15d12;
}

body {
  background: #0b1424;
}

body.dashboard-active .topbar {
  display: none;
}

body.dashboard-active main {
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

body.dashboard-active #dashboard {
  padding: 18px 26px 34px;
  max-width: none;
}

.command-shell {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
  padding: 10px 0 44px;
  margin-bottom: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.identity-block h2 {
  margin: 0 0 4px;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #ffffff;
}

.identity-block p {
  margin: 0;
  color: #dbeafe;
  font-size: 15px;
}

.identity-block .subtle-line {
  color: #b9c7dd;
  margin-top: 2px;
  font-size: 13px;
}

@media (min-width: 761px) {
  .identity-block {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-left: 10px;
  }
  .identity-block .top-dashboard-switcher {
    margin-left: 0;
    margin-right: 0;
  }
}

.command-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: min(980px, 70vw);
}

button, .button-link {
  border-radius: 0;
  border: 1px solid #41516a;
  background: #2d3d54;
  color: #ffffff;
  padding: 13px 24px;
  min-height: 42px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

button.secondary, .button-link.secondary {
  background: #33435b;
}

button.light-button, .button-link.light-button {
  background: #f3f0ec;
  color: #111827;
  border-color: #a7a7a7;
}

button.danger {
  background: #53323a;
  border-color: #74404a;
}

button.small {
  padding: 9px 18px;
  min-height: 38px;
  font-size: 14px;
}

button:hover, .button-link:hover {
  filter: brightness(1.12);
}

.compact-status {
  display: none;
}

#pendingUserPanel,
#taskPanel,
#programPanel,
#trackerPanel,
#reportsPanel,
#adminPanel,
#recognitionPreviewPanel {
  border: 1px solid var(--border);
  background: #0c1527;
  border-radius: 14px;
  padding: 16px;
  box-shadow: none;
  margin-bottom: 20px;
}

#taskPanel .section-head {
  display: none;
}

.task-scope-line {
  display: none;
}

.task-groups {
  display: grid;
  gap: 18px;
}

.task-section {
  margin-top: 0;
  padding: 16px 16px 14px;
  border: 1px solid #293a56;
  border-radius: 12px;
  background: #0d1729;
}

.task-section h4 {
  margin: 0 0 20px;
  font-size: 21px;
  line-height: 1.2;
  color: #f8fbff;
}

.task-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  gap: 22px;
}

.task-card {
  min-height: 256px;
  display: flex;
  flex-direction: column;
  background: #1e2b3f;
  border: 3px solid #34465f;
  border-radius: 14px;
  padding: 20px 16px 14px;
  box-shadow: none;
}

.task-card.due {
  border-color: #a65313;
}

.task-card.overdue {
  border-color: #a62231;
}

.task-card.complete {
  border-color: #31764f;
  background: #1a332c;
}

.task-card.later {
  border-color: #3d506c;
}

.task-title-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.task-title-row strong {
  font-size: 20px;
  line-height: 1.25;
  color: #f7fbff;
}

.trash-button {
  flex: 0 0 auto;
  min-width: 42px;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  background: #f2f2f2;
  border: 1px solid #a7a7a7;
  color: #111827;
  font-size: 22px;
  line-height: 1;
}

.task-status-line {
  margin: 20px 0 8px;
  color: #e9f0fb;
  font-weight: 700;
}

.task-status-line.due {
  color: #c15d12;
}

.task-status-line.overdue {
  color: #ff1748;
}

.task-status-line.future,
.task-status-line.none {
  color: #d8e6fb;
}

.task-description-line {
  margin: 0 0 20px;
  color: #d8e6fb;
  line-height: 1.35;
}

.task-actions {
  margin-top: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.task-actions button {
  min-width: 126px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.task-actions .copy-draft,
.task-actions .quiet-action {
  display: none;
}

.task-actions .archive-task-action {
  display: inline-flex;
}

.empty-state {
  border: 1px solid #33465f;
  border-radius: 12px;
  padding: 18px;
  color: #b9c7dd;
  background: #122036;
}

.section-head h3 {
  color: #ffffff;
  font-size: 21px;
}

.mini-card,
.tracker-card,
.program-card {
  background: #1e2b3f;
  border-color: #354864;
  border-radius: 12px;
}

.pill {
  background: #142038;
  border-color: #425676;
}

.cookie-notice {
  border-radius: 10px;
  background: #162238;
}

@media (max-width: 1200px) {
  .task-grid { grid-template-columns: repeat(2, minmax(300px, 1fr)); }
  .command-shell { flex-direction: column; padding-bottom: 22px; }
  .command-nav { min-width: 0; justify-content: flex-start; }
}

@media (max-width: 760px) {
  body.dashboard-active #dashboard { padding: 14px; }
  .task-grid { grid-template-columns: 1fr; }
  .task-card { min-height: 220px; }
  .command-nav button { width: 100%; }
}

/* UI pass v0.2: each task gets a distinct outer item box. Items in Due / Overdue pulse so they are visually separate inside the larger due container. */
.task-grid {
  align-items: stretch;
}

.task-item-box {
  position: relative;
  display: flex;
  min-height: 100%;
  padding: 7px;
  border: 2px solid #2f415d;
  border-radius: 18px;
  background: #101b2e;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .08), 0 10px 22px rgba(0, 0, 0, .16);
}

.task-item-box .task-card {
  flex: 1 1 auto;
  width: 100%;
  min-height: 244px;
}

.task-item-box.due-container-item {
  border-color: #a65313;
  animation: taskDueBoxPulse 1.45s ease-in-out infinite;
}

.task-item-box.due-container-item.overdue-item {
  border-color: #a62231;
  animation-name: taskOverdueBoxPulse;
}

.task-item-box.due-container-item .task-card {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
}

@keyframes taskDueBoxPulse {
  0%, 100% {
    border-color: #8b4510;
    box-shadow: inset 0 0 0 1px rgba(251, 146, 60, .16), 0 0 0 0 rgba(251, 146, 60, .08), 0 10px 22px rgba(0, 0, 0, .16);
  }
  50% {
    border-color: #f97316;
    box-shadow: inset 0 0 0 1px rgba(251, 146, 60, .28), 0 0 0 4px rgba(251, 146, 60, .18), 0 14px 28px rgba(0, 0, 0, .24);
  }
}

@keyframes taskOverdueBoxPulse {
  0%, 100% {
    border-color: #8f1d2b;
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .16), 0 0 0 0 rgba(239, 68, 68, .08), 0 10px 22px rgba(0, 0, 0, .16);
  }
  50% {
    border-color: #ff1748;
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .3), 0 0 0 4px rgba(239, 68, 68, .2), 0 14px 28px rgba(0, 0, 0, .24);
  }
}

@media (prefers-reduced-motion: reduce) {
  .task-item-box.due-container-item {
    animation: none;
  }
}

/* V0.10 task architecture controls */
.task-head-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.bucket-toggle {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(148, 163, 184, .42);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(15, 23, 42, .65);
}

.bucket-button {
  border: 0;
  border-radius: 0;
  min-width: 82px;
  background: transparent;
  color: var(--muted);
}

.bucket-button.active {
  background: var(--accent);
  color: #06111f;
}

.shared-completion-line {
  font-weight: 600;
}

.task-item-box.flagged-item {
  border-color: #facc15;
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, .22), 0 12px 24px rgba(0,0,0,.2);
}

.message.warning {
  color: #facc15;
}

.task-title-row .trash-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* V0.9 organization hierarchy admin tools */
.admin-org-tools {
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

.org-tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
  align-items: start;
}

.org-node-list {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.org-node-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.org-primary-check {
  margin-top: 24px;
}

@media (max-width: 980px) {
  .org-tool-grid {
    grid-template-columns: 1fr;
  }
}


/* UI Program Modal v0.3 */
body.program-modal-open { overflow: hidden; }
body.program-modal-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(3px);
  z-index: 900;
}
#programPanel.program-modal-panel {
  position: fixed;
  top: 6vh;
  left: 5vw;
  right: 5vw;
  max-height: 88vh;
  overflow: auto;
  z-index: 950;
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
}
#programPanel.program-modal-panel .section-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, #0c1527 0%, rgba(12,21,39,.94) 100%);
  border-bottom: 1px solid rgba(148, 163, 184, 0.20);
  margin: -16px -16px 16px -16px;
  padding: 16px;
}
#programPanel.program-modal-panel .two-col {
  align-items: start;
}
#closeProgramsButton {
  min-width: 44px;
  width: 44px;
  height: 40px;
  font-size: 22px;
  line-height: 1;
}
@media (max-width: 800px) {
  #programPanel.program-modal-panel {
    top: 3vh;
    left: 3vw;
    right: 3vw;
    max-height: 94vh;
  }
}


/* UI Program Switch v0.4 */
.program-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 14px;
  align-items: stretch;
}
.program-grid .program-card {
  margin: 0;
  min-height: 160px;
}
#switchProgramsPanel.program-modal-panel {
  position: fixed;
  top: 8vh;
  left: 18vw;
  right: 18vw;
  max-height: 84vh;
  overflow: auto;
  z-index: 950;
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
}
#switchProgramsPanel.program-modal-panel .section-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, #0c1527 0%, rgba(12,21,39,.94) 100%);
  border-bottom: 1px solid rgba(148, 163, 184, 0.20);
  margin: -16px -16px 16px -16px;
  padding: 16px;
}
#closeSwitchProgramsButton {
  min-width: 44px;
  width: 44px;
  height: 40px;
  font-size: 22px;
  line-height: 1;
}
@media (max-width: 900px) {
  .program-grid { grid-template-columns: 1fr; }
  #switchProgramsPanel.program-modal-panel {
    top: 3vh;
    left: 3vw;
    right: 3vw;
    max-height: 94vh;
  }
}

/* Program assignment v0.5 */
.program-request-card {
  border-color: rgba(245, 158, 11, .38);
}
#leaderProgramAssignmentArea select {
  width: 100%;
  margin-top: 6px;
}
#leaderProgramAssignmentEditor {
  margin-top: 14px;
}
#programRoleRequests:empty {
  display: none;
}


/* Program review v0.6: concise Switch Programs flow with separate pending-request review popup */
#switchProgramsPanel.program-modal-panel {
  left: 10vw;
  right: 10vw;
  top: 6vh;
  max-height: 88vh;
}
.switch-block {
  margin-bottom: 16px;
}
.pending-request-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.pending-request-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-color: rgba(245, 158, 11, .45);
}
.pending-request-card p {
  margin: 4px 0;
}
.pending-request-card button {
  flex: 0 0 auto;
}
.compact-program-admin {
  margin-top: 12px;
}
.compact-program-admin h5,
.member-program-profile h5 {
  margin: 0 0 8px;
  font-size: 15px;
  color: #f8fbff;
}
.program-assignment-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(360px, 1.35fr);
  gap: 18px;
  align-items: start;
}
.member-select-list {
  display: grid;
  gap: 8px;
  max-height: 50vh;
  overflow: auto;
  padding-right: 4px;
}
.member-select-button {
  width: 100%;
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 10px 12px;
  background: #18263b;
  border-color: #40526f;
}
.member-select-button span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-select-button.selected {
  border-color: #f59e0b;
  background: #26374f;
}
.member-program-profile {
  border: 1px solid #34465f;
  background: #18263b;
  border-radius: 12px;
  padding: 14px;
}
.compact-check-grid {
  grid-template-columns: repeat(2, minmax(210px, 1fr));
  gap: 8px 14px;
}
.compact-check-grid .check-row {
  min-height: 38px;
  padding: 7px 9px;
  margin: 0;
}
.program-review-panel {
  position: fixed;
  top: 10vh;
  left: 20vw;
  right: 20vw;
  max-height: 80vh;
  overflow: auto;
  z-index: 1010;
  border: 1px solid rgba(245, 158, 11, .55) !important;
  box-shadow: 0 32px 90px rgba(0,0,0,.65) !important;
}
.program-review-panel .section-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, #0c1527 0%, rgba(12,21,39,.96) 100%);
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  margin: -16px -16px 16px -16px;
  padding: 16px;
}
.request-review-summary {
  display: grid;
  gap: 4px;
  border: 1px solid #34465f;
  background: #111d31;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}
.request-review-summary p {
  margin: 0;
  color: var(--muted);
}
@media (max-width: 1000px) {
  #switchProgramsPanel.program-modal-panel,
  .program-review-panel {
    top: 3vh;
    left: 3vw;
    right: 3vw;
    max-height: 94vh;
  }
  .program-assignment-layout,
  .compact-check-grid {
    grid-template-columns: 1fr;
  }
}


/* Program dropdown v0.7: leader assignment uses a compact dropdown instead of a scrolling member list */
#leaderProgramAssignmentArea.compact-program-admin {
  padding: 14px;
}
.leader-member-select-row {
  display: grid;
  grid-template-columns: 140px minmax(260px, 1fr);
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 10px;
}
.leader-member-select-row label {
  color: var(--muted);
  font-size: 13px;
}
#leaderProgramMemberSelect {
  display: block !important;
  width: 100%;
  min-height: 38px;
}
.compact-summary {
  grid-column: 2;
  margin: -2px 0 0;
  font-size: 12px;
}
.program-assignment-layout,
.member-select-list {
  display: none !important;
}
#leaderProgramAssignmentEditor.member-program-profile {
  margin-top: 8px;
  padding: 12px;
}
.leader-program-grid {
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 6px 10px;
}
.leader-program-grid .check-row {
  min-height: 32px;
  padding: 5px 8px;
}
.leader-program-grid .check-row input {
  width: 16px;
  height: 16px;
}
#leaderProgramAssignmentEditor .button-row {
  margin-top: 10px;
}
@media (max-width: 1000px) {
  .leader-member-select-row {
    grid-template-columns: 1fr;
  }
  .compact-summary {
    grid-column: 1;
  }
  .leader-program-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}
@media (max-width: 650px) {
  .leader-program-grid {
    grid-template-columns: 1fr;
  }
}

/* Switch Programs v0.8: fixed-size leader assignment popup with no desktop scrolling */
#switchProgramsPanel.program-modal-panel {
  top: 50%;
  left: 50%;
  right: auto;
  width: min(1180px, calc(100vw - 56px));
  height: min(690px, calc(100vh - 56px));
  max-height: none;
  overflow: hidden;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  padding: 14px;
}

#switchProgramsPanel.program-modal-panel .section-head {
  position: static;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  margin: -14px -14px 10px -14px;
  padding: 12px 14px;
}

#switchProgramsPanel.program-modal-panel .section-head h3 {
  margin-bottom: 2px;
  font-size: 20px;
}

#switchProgramsPanel.program-modal-panel .section-head p {
  margin: 0;
  font-size: 13px;
}

#switchProgramsPanel .switch-block,
#switchProgramsPanel #memberProgramRequestArea,
#switchProgramsPanel #leaderProgramAssignmentArea {
  flex: 0 0 auto;
}

#switchProgramsPanel #programRequestsArea {
  margin-bottom: 8px;
}

#switchProgramsPanel #programRequestsArea h4,
#switchProgramsPanel #leaderProgramAssignmentArea h4,
#switchProgramsPanel #memberProgramRequestArea h4 {
  margin-bottom: 4px;
  font-size: 15px;
}

#switchProgramsPanel #programRequestsArea > p,
#switchProgramsPanel #leaderProgramAssignmentArea > p,
#switchProgramsPanel #memberProgramRequestArea > p {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.25;
}

#switchProgramsPanel .pending-request-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

#switchProgramsPanel .pending-request-card {
  min-height: 0;
  padding: 10px;
}

#switchProgramsPanel .pending-request-card p {
  font-size: 12px;
  line-height: 1.2;
}

#leaderProgramAssignmentArea.compact-program-admin {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(560px, 1.7fr);
  grid-template-rows: auto 1fr;
  gap: 8px 14px;
  min-height: 0;
  margin-top: 8px;
  padding: 12px;
}

#leaderProgramAssignmentArea.compact-program-admin > h4,
#leaderProgramAssignmentArea.compact-program-admin > p {
  grid-column: 1 / -1;
}

.leader-member-select-row {
  grid-template-columns: 1fr;
  align-content: start;
  gap: 6px;
  margin-bottom: 0;
}

.leader-member-select-row label {
  margin-bottom: 0;
}

#leaderProgramMemberSelect {
  min-height: 40px;
  padding: 8px 10px;
}

.compact-summary {
  grid-column: 1;
  margin: 0;
  line-height: 1.25;
}

#leaderProgramAssignmentEditor.member-program-profile {
  align-self: stretch;
  margin-top: 0;
  min-height: 0;
  padding: 10px;
}

#leaderProgramAssignmentTitle {
  margin-bottom: 6px;
}

.leader-program-grid {
  grid-template-columns: repeat(4, minmax(132px, 1fr));
  gap: 5px 8px;
}

.leader-program-grid .check-row {
  min-height: 30px;
  padding: 4px 6px;
  gap: 6px;
  line-height: 1.15;
}

.leader-program-grid .check-row span {
  font-size: 12px;
}

.leader-program-grid .check-row input {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

#leaderProgramAssignmentEditor .button-row {
  justify-content: flex-end;
  margin-top: 8px;
}

#leaderProgramAssignmentEditor .button-row button {
  min-height: 34px;
  padding: 7px 13px;
}

@media (max-width: 1000px) {
  #switchProgramsPanel.program-modal-panel {
    top: 3vh;
    left: 3vw;
    right: 3vw;
    width: auto;
    height: 94vh;
    transform: none;
  }

  #leaderProgramAssignmentArea.compact-program-admin {
    grid-template-columns: 1fr;
  }

  .leader-program-grid {
    grid-template-columns: repeat(3, minmax(132px, 1fr));
  }
}

@media (max-width: 650px) {
  #switchProgramsPanel.program-modal-panel {
    overflow: auto;
  }

  .leader-program-grid {
    grid-template-columns: 1fr;
  }
}

/* Switch Programs v0.8 member-list revision: two-column assignment panel */
#switchProgramsPanel.program-modal-panel {
  width: min(1040px, calc(100vw - 40px));
  height: min(680px, calc(100vh - 40px));
  padding: 14px;
}

#switchProgramsPanel #leaderProgramAssignmentArea.leader-assignment-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding: 12px;
}

#leaderProgramAssignmentArea.leader-assignment-panel > h4 {
  flex: 0 0 auto;
  margin: 0;
}

#leaderProgramAssignmentArea.leader-assignment-panel > p {
  flex: 0 0 auto;
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.25;
}

.leader-assignment-columns {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.leader-member-column,
#leaderProgramAssignmentEditor.member-program-profile {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid #34465f;
  background: #18263b;
  border-radius: 10px;
  padding: 10px;
}

.leader-member-column h5,
#leaderProgramAssignmentEditor.member-program-profile h5 {
  flex: 0 0 auto;
  margin: 0 0 8px;
  font-size: 14px;
  color: #f8fbff;
}

.leader-member-list {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 7px;
  overflow-y: auto;
  padding-right: 4px;
}

.leader-member-button.member-select-button {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leader-member-button.selected {
  border-color: #f59e0b;
  background: #26374f;
}

.leader-member-column .compact-summary {
  flex: 0 0 auto;
  margin: 8px 0;
  font-size: 12px;
  line-height: 1.25;
}

.leader-assignment-actions {
  flex: 0 0 auto;
  margin-top: auto;
}

.leader-assignment-actions button {
  flex: 1 1 100%;
  justify-content: center;
}

#leaderProgramAssignmentEditor.member-program-profile {
  margin: 0;
}

#leaderProgramAssignmentEditor.no-member-selected {
  opacity: .82;
}

#leaderProgramAssignmentChoices.leader-program-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 7px;
  padding-right: 4px;
}

#leaderProgramAssignmentChoices.leader-program-grid .check-row {
  min-height: 36px;
  padding: 7px 9px;
  gap: 8px;
  line-height: 1.2;
}

#leaderProgramAssignmentChoices.leader-program-grid .check-row span {
  font-size: 13px;
}

@media (max-width: 760px) {
  #switchProgramsPanel.program-modal-panel {
    overflow: auto;
  }

  .leader-assignment-columns {
    grid-template-columns: 1fr;
  }

  .leader-member-list,
  #leaderProgramAssignmentChoices.leader-program-grid {
    max-height: 240px;
  }
}

/* Switch Programs v0.8 spacing fix: align program checkbox rows horizontally */
#leaderProgramAssignmentChoices.leader-program-grid .check-row {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-align: left;
  margin: 0;
  min-height: 38px;
}

#leaderProgramAssignmentChoices.leader-program-grid .check-row input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
}

#leaderProgramAssignmentChoices.leader-program-grid .check-row span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* Switch Programs v0.8 member request revision: self-only two-column panel */
#switchProgramsPanel #memberProgramRequestArea.member-request-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding: 12px;
}

#memberProgramRequestArea.member-request-panel > h4 {
  flex: 0 0 auto;
  margin: 0;
}

#memberProgramRequestArea.member-request-panel > p {
  flex: 0 0 auto;
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.25;
}

.member-request-columns {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.member-request-identity-column,
.member-request-program-column {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid #34465f;
  background: #18263b;
  border-radius: 10px;
  padding: 10px;
}

.member-request-identity-column h5,
.member-request-program-column h5 {
  flex: 0 0 auto;
  margin: 0 0 8px;
  font-size: 14px;
  color: #f8fbff;
}

.member-self-name {
  border: 1px solid #40526f;
  background: #26374f;
  color: #f8fbff;
  border-radius: 8px;
  padding: 10px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-request-identity-column .compact-summary {
  flex: 0 0 auto;
  margin: 8px 0;
  font-size: 12px;
  line-height: 1.25;
}

.member-request-actions {
  flex: 0 0 auto;
  margin-top: auto;
}

.member-request-actions button {
  flex: 1 1 100%;
  justify-content: center;
}

#memberProgramChoices.member-program-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 7px;
  padding-right: 4px;
}

#memberProgramChoices.member-program-grid .check-row {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-align: left;
  margin: 0;
  min-height: 38px;
  padding: 7px 9px;
  gap: 8px;
  line-height: 1.2;
}

#memberProgramChoices.member-program-grid .check-row input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
}

#memberProgramChoices.member-program-grid .check-row span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  font-size: 13px;
}

@media (max-width: 760px) {
  .member-request-columns {
    grid-template-columns: 1fr;
  }

  #memberProgramChoices.member-program-grid {
    max-height: 240px;
  }
}


/* Account/password panel */
.account-button {
  white-space: nowrap;
}
.account-dialog .message.success {
  color: #166534;
  font-weight: 700;
}
.account-dialog .message.error {
  color: #991b1b;
  font-weight: 700;
}


.view-as-banner {
  border: 2px solid var(--warn);
  background: linear-gradient(135deg, rgba(251, 146, 60, .22), rgba(30, 41, 59, .96));
  border-radius: 16px;
  padding: 14px 16px;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
}
.view-as-banner strong {
  color: #fed7aa;
  letter-spacing: .04em;
}
.view-as-banner p {
  margin: 4px 0 0;
  color: #ffedd5;
}
.view-as-banner span {
  color: #fdba74;
  font-weight: 700;
}

/* Outside-user readiness Phase 1.2 */
.org-manage-card label { display:block; margin-top:0.75rem; }
.org-manage-card input { width:100%; }
button.icon.danger { min-width: 2.5rem; padding: 0.5rem 0.7rem; }


/* Outside-User Readiness Phase 5: task type examples/help */
.task-help-box {
  border: 1px solid rgba(56, 189, 248, .38);
  background: rgba(15, 23, 42, .74);
  border-radius: 14px;
  padding: 14px;
  margin: 4px 0 14px;
}
.task-help-box p { margin: 6px 0; color: var(--muted); }
.task-help-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.task-help-grid { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 10px; margin: 10px 0; }
.task-help-grid > div { border: 1px solid rgba(255,255,255,.10); border-radius: 10px; padding: 10px; background: rgba(255,255,255,.03); }
.help-examples { margin: 8px 0 10px; padding-left: 20px; color: var(--muted); }
.help-examples li { margin: 8px 0; }
@media (max-width: 760px) { .task-help-grid { grid-template-columns: 1fr; } }

/* Outside-user readiness Phase 7: account controls and personal-use registration */
.account-subsection {
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 14px;
  padding: 12px;
  margin: 12px 0;
  background: rgba(15, 23, 42, .45);
}
.account-subsection h4 { margin: 0 0 8px 0; }
.personal-org-field.hidden,
.personal-new-org-field.hidden,
.work-org-toggle.hidden { display: none !important; }

/* Outside-user readiness Phase 8: GUI polish and optional contact email */
.option-box {
  border: 1px solid rgba(148, 163, 184, .32);
  background: rgba(15, 23, 42, .52);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  gap: 10px;
}
.option-box-title {
  margin: 0 0 2px 0;
  color: #f8fafc;
  font-weight: 700;
}
.option-box .checkbox-label {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 10px;
  background: rgba(30, 41, 59, .62);
}
.reports-grid.reports-no-audit { grid-template-columns: 1fr; }
.audit-report-section.hidden { display: none !important; }
.compact-head { align-items: end; margin-bottom: 10px; }
.compact-select { min-width: 260px; margin-bottom: 0; }
.account-dialog .account-subsection .muted { font-weight: 400; }
@media (max-width: 760px) {
  .compact-head { align-items: stretch; }
  .compact-select { min-width: 0; width: 100%; }
}
.full-row { grid-column: 1 / -1; }

/* Outside-user readiness Phase 9.1: Home/Work access-code registration UI */
.phase91-use-box,
.phase91-home-field,
.phase91-work-field {
  align-items: stretch;
}
.usage-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
}
.option-box .usage-card,
.account-dialog .usage-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .20);
  border-radius: 12px;
  background: rgba(30, 41, 59, .62);
}
.option-box .usage-card input[type="checkbox"],
.account-dialog .usage-card input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
}
.option-box .usage-card span,
.account-dialog .usage-card span {
  display: grid;
  gap: 4px;
  line-height: 1.2;
}
.option-box .usage-card small,
.account-dialog .usage-card small {
  color: var(--muted);
  font-weight: 500;
}
.phase91-home-field.hidden,
.phase91-work-field.hidden,
.phase91-home-code-field.hidden,
.phase91-home-request-field.hidden { display: none !important; }
.compact-use-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
.compact-membership-list { margin: 8px 0 12px; }
.compact-membership-card p { margin: 4px 0; }
@media (max-width: 760px) {
  .usage-card-grid,
  .compact-use-grid { grid-template-columns: 1fr; }
}

/* Outside-user readiness Phase 9.1.2: true Home/Work dashboard switcher + invite-code feedback */
.top-dashboard-switcher {
  display: inline-flex;
  gap: 0.35rem;
  margin-top: 0.75rem;
  padding: 0.3rem;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  align-items: center;
}
.top-dashboard-switcher .bucket-button {
  min-width: 8.5rem;
}
.work-dashboard-task-panel {
  border-color: rgba(95, 175, 255, 0.35);
}
.home-dashboard-task-panel {
  border-color: rgba(255, 186, 95, 0.35);
}
.invite-user-box {
  margin-top: 0.85rem;
  padding: 0.8rem;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 0.9rem;
  background: rgba(255,255,255,0.045);
}
.invite-user-box code {
  display: inline-block;
  margin: 0.35rem 0 0.55rem;
  padding: 0.35rem 0.55rem;
  border-radius: 0.5rem;
  background: rgba(0,0,0,0.25);
  letter-spacing: 0.06em;
  font-weight: 700;
}
.inline-message {
  min-height: 1.1rem;
  margin: 0.35rem 0 0;
}

.account-email-message {
  grid-column: 1 / -1;
  margin: -0.45rem 0 0.35rem;
  min-height: 1.15rem;
}
.account-dialog .account-email-message.success {
  color: #86efac;
  font-weight: 700;
}
.account-dialog .account-email-message.error {
  color: #fca5a5;
  font-weight: 700;
}
@media (max-width: 720px) {
  .top-dashboard-switcher { width: 100%; justify-content: stretch; border-radius: 1rem; }
  .top-dashboard-switcher .bucket-button { flex: 1; min-width: 0; }
}

.task-dashboard-context-banner {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0 0 14px 0;
  padding: 10px 14px;
  border: 1px solid #64748b;
  border-radius: 14px;
  background: rgba(15, 23, 42, .98);
  color: #f8fafc;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 12px 28px rgba(2, 6, 23, .38);
}
.task-dashboard-context-banner.home {
  border-color: #38bdf8;
  background: linear-gradient(135deg, rgba(14, 116, 144, .92), rgba(15, 23, 42, .98));
}
.task-dashboard-context-banner.work {
  border-color: #f59e0b;
  background: linear-gradient(135deg, rgba(146, 64, 14, .92), rgba(15, 23, 42, .98));
}

.task-dashboard-context-banner.program {
  border-color: rgba(168, 85, 247, .65);
  background: linear-gradient(135deg, rgba(88, 28, 135, .92), rgba(15, 23, 42, .98));
  cursor: default;
}

.build-line { font-size: 0.82rem; margin-top: 3px; }
#dashboardBuildBadge { font-weight: 700; }

/* Command Rhythm NO CUI session banner */
.cr-cui-banner{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 16px;background:#7f1d1d;color:#fff;border-bottom:1px solid rgba(255,255,255,.22);font-weight:800;letter-spacing:.02em;text-align:center;position:sticky;top:0;z-index:10000;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.cr-cui-banner[hidden]{display:none!important}.cr-cui-banner button{border:1px solid rgba(255,255,255,.55);background:#111827;color:#fff;border-radius:999px;padding:6px 12px;font-weight:800;cursor:pointer;text-transform:none}.cr-cui-banner button:hover{background:#1f2937}.cr-cui-banner span{text-transform:uppercase}@media(max-width:640px){.cr-cui-banner{font-size:13px;flex-wrap:wrap;gap:8px}}

/* v.021 live UI stabilization */
.task-dashboard-context-banner {
  width: 100%;
  cursor: default;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  line-height: 1.2;
}
.task-dashboard-context-banner.switchable {
  cursor: pointer;
}
.task-dashboard-context-banner.switchable:hover,
.task-dashboard-context-banner.switchable:focus-visible {
  filter: brightness(1.12);
  outline: 2px solid rgba(248, 250, 252, .55);
  outline-offset: 2px;
}

.admin-org-tools,
.admin-org-tools * {
  box-sizing: border-box;
}
.admin-org-tools {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
.org-tool-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 100%;
}
.org-tool-grid > .mini-card {
  min-width: 0;
  overflow: hidden;
}
.org-tool-grid .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.org-tool-grid label,
.org-tool-grid input,
.org-tool-grid select {
  min-width: 0;
  max-width: 100%;
}
.org-primary-check {
  margin-top: 0;
  align-self: end;
  min-height: 40px;
}
@media (max-width: 1180px) {
  .org-tool-grid {
    grid-template-columns: 1fr;
  }
  .org-tool-grid .form-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}
@media (max-width: 720px) {
  .org-tool-grid .form-grid {
    grid-template-columns: 1fr;
  }
}

/* v.022 live UX stabilization */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* New Task modal: help moved to the searchable Help dialog, so the editor stays shorter. */
dialog.task-dialog:not(.help-dialog), #taskDialog {
  width: min(760px, calc(100vw - 28px));
}
#taskDialog .form-grid {
  gap: 12px;
}
#taskDialog textarea#taskDescription {
  min-height: 78px;
}

.help-dialog {
  width: min(860px, calc(100vw - 28px));
}
.help-topic-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.help-topic-card p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

/* Account creation role selectors */
#createPage select#homeRequestedRole,
#createPage select#workRequestedRole {
  min-width: 0;
  width: 100%;
}

/* Extra guard against admin org controls causing sideways page scroll on wide screens. */
#adminPanel,
#adminPanel .panel,
.admin-org-tools,
.org-tool-grid,
.org-tool-grid > * {
  max-width: 100%;
  min-width: 0;
}
.org-tool-grid .mini-card,
.org-tool-grid .form-grid,
.org-tool-grid label {
  overflow-wrap: anywhere;
}
@media (max-width: 1180px) {
  .org-tool-grid {
    grid-template-columns: 1fr;
  }
}

/* v.024 live admin/dashboard stabilization */
.top-dashboard-switcher {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(128px, 1fr));
  gap: 0.25rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.25rem;
  overflow: hidden;
}
.top-dashboard-switcher .bucket-button {
  border-radius: 999px;
  min-height: 44px;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  box-sizing: border-box;
}
.top-dashboard-switcher .bucket-button.active {
  border-radius: 999px;
}
.admin-account-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.admin-profile-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.25fr);
  gap: 12px;
  margin: 10px 0 12px;
}
.admin-profile-filters input,
.admin-profile-filters select {
  min-width: 0;
}
.approval-gate-dialog {
  width: min(760px, calc(100vw - 28px));
}
@media (max-width: 760px) {
  .admin-profile-filters { grid-template-columns: 1fr; }
  .top-dashboard-switcher { width: 100%; }
}

/* v.023 live account/task UX stabilization */
#taskDialog {
  width: min(720px, calc(100vw - 24px));
  padding: 14px;
}
#taskDialog .dialog-head {
  margin-bottom: 6px;
}
#taskDialog .dialog-head h3 {
  font-size: 20px;
}
#taskDialog .task-dashboard-context-banner {
  padding: 8px 12px;
  margin-bottom: 10px;
  letter-spacing: .16em;
}
#taskDialog .form-grid {
  gap: 8px 10px;
  margin-bottom: 10px;
}
#taskDialog label {
  gap: 4px !important;
  margin-bottom: 6px !important;
  font-size: 14px;
}
#taskDialog input,
#taskDialog select,
#taskDialog textarea {
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 14px;
}
#taskDialog textarea#taskDescription {
  min-height: 52px;
  rows: 2;
}
#taskDialog .subfields {
  padding: 10px;
  margin: 8px 0;
}
#taskDialog .button-row {
  margin-top: 8px;
}
#taskDialog .message {
  min-height: 16px;
}
#taskDialog input::placeholder {
  color: #94a3b8;
  opacity: 0.82;
}
.danger-zone {
  border-color: rgba(239, 68, 68, .42) !important;
  background: rgba(127, 29, 29, .12) !important;
}
.danger-zone h4 {
  color: #fecaca;
}
#deleteOwnAccountButton {
  background: #991b1b;
  border-color: #ef4444;
  color: #fff;
}
#deleteOwnAccountButton:hover {
  filter: brightness(1.14);
}
@media (max-height: 820px) {
  #taskDialog {
    max-height: calc(100vh - 18px);
    padding: 12px;
  }
  #taskDialog .form-grid {
    gap: 6px 10px;
  }
  #taskDialog label {
    margin-bottom: 4px !important;
  }
  #taskDialog input,
  #taskDialog select,
  #taskDialog textarea {
    padding: 7px 9px;
  }
  #taskDialog textarea#taskDescription {
    min-height: 44px;
  }
}

/* v.025 live access-request and invite teammate UX */
.pill.danger-pill, .danger-pill {
  border-color: rgba(248, 113, 113, .8);
  color: #fecaca;
  background: rgba(127, 29, 29, .24);
}
.pill.success-pill, .success-pill {
  border-color: rgba(74, 222, 128, .7);
  color: #bbf7d0;
  background: rgba(20, 83, 45, .24);
}
.invite-code-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.invite-code-grid section {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 14px;
  padding: 12px;
  background: rgba(15, 23, 42, .35);
}
.invite-code-grid h4 { margin-top: 0; }
.invite-dialog code, .compact-membership-card code {
  display: block;
  margin: 8px 0;
  padding: 8px;
  border-radius: 10px;
  background: rgba(2, 6, 23, .7);
  border: 1px solid rgba(148, 163, 184, .24);
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .invite-code-grid { grid-template-columns: 1fr; }
}

/* v.030 System Admin account-management polish */
.admin-profile-card-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}
.admin-account-select {
  margin: 0;
  font-size: .86rem;
}
.admin-edit-account-dialog {
  max-width: 760px;
}
.admin-edit-account-dialog .account-subsection {
  margin-top: 10px;
}

/* v.031: make protected System Admin shared-login warnings obvious in admin account management. */
.danger-text {
  color: #b42318;
  font-weight: 700;
}

/* v.032 System Admin access-code search and safer View As display */
.admin-access-codes-panel {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, .18);
}
.admin-access-code-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(150px, .35fr);
  gap: 12px;
  align-items: end;
}
.admin-access-code-filters input,
.admin-access-code-filters select {
  min-width: 0;
}
.admin-access-code-list {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
@media (max-width: 760px) {
  .admin-access-code-filters { grid-template-columns: 1fr; }
}

/* v.033/v.035: one account card per username, with a themed bulk selector outside/left of the box. */
#profilesList.card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-account-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.admin-account-select.outside-card {
  margin: 0 auto;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(251, 146, 60, .44);
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 20%, rgba(251, 191, 36, .18), transparent 40%),
    linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(30, 41, 59, .72));
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .65), 0 10px 22px rgba(2, 6, 23, .22);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.admin-account-select.outside-card:hover {
  transform: translateY(-1px);
  border-color: rgba(251, 191, 36, .72);
  box-shadow: 0 0 0 1px rgba(251, 146, 60, .24), 0 12px 24px rgba(2, 6, 23, .3);
}
.admin-account-select input {
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 7px;
  border: 2px solid rgba(226, 232, 240, .76);
  background: rgba(2, 6, 23, .62);
  box-shadow: inset 0 1px 3px rgba(2, 6, 23, .7);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.admin-account-select input::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #0f172a;
  border-bottom: 2px solid #0f172a;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform .12s ease;
}
.admin-account-select input:checked {
  border-color: rgba(251, 191, 36, .95);
  background: linear-gradient(135deg, #fbbf24, #fb923c);
}
.admin-account-select input:checked::after {
  transform: rotate(-45deg) scale(1);
}
.admin-account-select input:focus-visible {
  outline: 3px solid rgba(251, 191, 36, .38);
  outline-offset: 3px;
}
.admin-account-checkmark { display: none; }
.admin-account-select-spacer {
  min-width: 58px;
}
.admin-account-card {
  width: 100%;
}
.admin-account-card-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.admin-access-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.admin-access-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 12px;
  background: rgba(15, 23, 42, .18);
}
.admin-access-row p {
  margin: 3px 0 0;
}
.compact-row {
  gap: 6px;
  flex-wrap: nowrap;
}
@media (max-width: 760px) {
  .admin-account-row { grid-template-columns: 1fr; align-items: stretch; }
  .admin-account-select.outside-card { margin: 0 0 0 2px; }
  .admin-account-select-spacer { display: none; }
  .admin-account-card-title, .admin-access-row { flex-direction: column; align-items: stretch; }
}

/* v.036: keep Work/Home sections visible even when an account has no access for one side. */
.admin-access-row.no-access-row {
  border-style: dashed;
  background: rgba(15, 23, 42, .08);
  opacity: .86;
}
.admin-access-row.no-access-row strong {
  color: rgba(226, 232, 240, .86);
}

/* v.038 dashboard export/import and program-editor polish */
.task-dashboard-context-banner.program[aria-disabled="true"] {
  pointer-events: none;
}

/* v.039 theme presets. Default keeps the existing Command Rhythm look; BEE and Toxic Waste
   are built with shared variables so later custom themes can be added by defining a new body[data-cr-theme]. */
body[data-cr-theme="default"] {
  --bg: #0f172a;
  --panel: #111827;
  --panel2: #1e293b;
  --text: #e5e7eb;
  --muted: #cbd5e1;
  --soft: #a5b4fc;
  --border: #334155;
  --accent: #facc15;
  --accent2: #38bdf8;
  --danger: #ef4444;
  --good: #22c55e;
  --warn: #fb923c;
  background: radial-gradient(circle at top left, #1e293b, var(--bg) 50%);
}
body[data-cr-theme="bee"] {
  --bg: #160f05;
  --panel: #211707;
  --panel2: #35240a;
  --text: #fff8db;
  --muted: #f5d987;
  --soft: #fde68a;
  --border: #8a5b05;
  --accent: #facc15;
  --accent2: #f97316;
  --danger: #7f1d1d;
  --good: #84cc16;
  --warn: #f59e0b;
  background-color: #160f05;
  background-image:
    radial-gradient(circle at 18% 8%, rgba(250, 204, 21, .32), transparent 28%),
    linear-gradient(30deg, rgba(250, 204, 21, .11) 12%, transparent 12.5%, transparent 87%, rgba(250, 204, 21, .11) 87.5%, rgba(250, 204, 21, .11)),
    linear-gradient(150deg, rgba(250, 204, 21, .11) 12%, transparent 12.5%, transparent 87%, rgba(250, 204, 21, .11) 87.5%, rgba(250, 204, 21, .11)),
    radial-gradient(circle at bottom right, #3b2506, #160f05 55%);
  background-size: auto, 44px 76px, 44px 76px, auto;
}
body[data-cr-theme="toxic"] {
  --bg: #031006;
  --panel: #071607;
  --panel2: #102510;
  --text: #efffe5;
  --muted: #c8ff8a;
  --soft: #a3ff12;
  --border: #43ff00;
  --accent: #b6ff00;
  --accent2: #00ffd5;
  --danger: #ff007a;
  --good: #39ff14;
  --warn: #e7ff3c;
  background-color: #031006;
  background-image:
    radial-gradient(circle at 12% 14%, rgba(182, 255, 0, .35), transparent 22%),
    radial-gradient(circle at 84% 16%, rgba(0, 255, 213, .24), transparent 28%),
    radial-gradient(circle at 42% 82%, rgba(255, 0, 122, .20), transparent 25%),
    repeating-linear-gradient(-12deg, rgba(182, 255, 0, .08) 0 10px, transparent 10px 22px),
    linear-gradient(135deg, #020804, #0f2a0b 62%, #050805);
}
body[data-cr-theme="bee"] .topbar,
body[data-cr-theme="bee"] .panel,
body[data-cr-theme="bee"] .dashboard-head,
body[data-cr-theme="bee"] dialog.task-dialog,
body[data-cr-theme="bee"] #taskDialog {
  background: rgba(33, 23, 7, .94) !important;
  border-color: rgba(250, 204, 21, .55);
  box-shadow: 0 18px 46px rgba(0,0,0,.34), inset 0 0 0 1px rgba(250, 204, 21, .08);
}
body[data-cr-theme="bee"] .mini-card,
body[data-cr-theme="bee"] .task-card {
  background: rgba(53, 36, 10, .94);
  border-color: rgba(250, 204, 21, .48);
}
body[data-cr-theme="bee"] button,
body[data-cr-theme="bee"] .button-link {
  background: #4a3108;
  border-color: #b77905;
  color: #fff8db;
}
body[data-cr-theme="bee"] button.secondary,
body[data-cr-theme="bee"] .button-link.secondary { background: #2d1f08; }
body[data-cr-theme="bee"] input,
body[data-cr-theme="bee"] select,
body[data-cr-theme="bee"] textarea {
  background: #160f05;
  border-color: #a16207;
  color: #fff8db;
}
body[data-cr-theme="bee"] .task-card.due,
body[data-cr-theme="bee"] .admin-card { box-shadow: 0 0 0 2px rgba(250, 204, 21, .25), 0 0 22px rgba(250, 204, 21, .16); }
body[data-cr-theme="toxic"] .topbar,
body[data-cr-theme="toxic"] .panel,
body[data-cr-theme="toxic"] .dashboard-head,
body[data-cr-theme="toxic"] dialog.task-dialog,
body[data-cr-theme="toxic"] #taskDialog {
  background: rgba(7, 22, 7, .93) !important;
  border-color: rgba(67, 255, 0, .62);
  box-shadow: 0 0 34px rgba(57, 255, 20, .14), inset 0 0 0 1px rgba(182, 255, 0, .12);
}
body[data-cr-theme="toxic"] .mini-card,
body[data-cr-theme="toxic"] .task-card {
  background: linear-gradient(135deg, rgba(16, 37, 16, .96), rgba(6, 17, 7, .96));
  border-color: rgba(67, 255, 0, .55);
}
body[data-cr-theme="toxic"] .task-card.due,
body[data-cr-theme="toxic"] .admin-card {
  box-shadow: 0 0 0 2px rgba(182, 255, 0, .22), 0 0 30px rgba(57, 255, 20, .22);
}
body[data-cr-theme="toxic"] button,
body[data-cr-theme="toxic"] .button-link {
  background: #16340d;
  border-color: #78ff00;
  color: #efffe5;
  text-shadow: 0 0 6px rgba(182, 255, 0, .35);
}
body[data-cr-theme="toxic"] button.secondary,
body[data-cr-theme="toxic"] .button-link.secondary { background: #0d2208; }
body[data-cr-theme="toxic"] input,
body[data-cr-theme="toxic"] select,
body[data-cr-theme="toxic"] textarea {
  background: #031006;
  border-color: #39ff14;
  color: #efffe5;
}
body[data-cr-theme="toxic"] .badge,
body[data-cr-theme="toxic"] .pill {
  border-color: rgba(182, 255, 0, .7);
  background: rgba(3, 16, 6, .85);
  color: #e7ff3c;
}
.theme-settings-block {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
.theme-settings-block select {
  font-weight: 700;
}


/* v.040 theme polish: make the large dashboard/task boxes participate in BEE and Toxic themes. */
.theme-save-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 12000;
  max-width: min(420px, calc(100vw - 48px));
  padding: 14px 18px;
  border: 1px solid var(--accent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel2) 88%, #000 12%);
  color: var(--text);
  font-weight: 800;
  box-shadow: 0 18px 40px rgba(0,0,0,.38), 0 0 24px color-mix(in srgb, var(--accent) 24%, transparent);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.theme-save-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

body[data-cr-theme="bee"] #pendingUserPanel,
body[data-cr-theme="bee"] #taskPanel,
body[data-cr-theme="bee"] #programPanel,
body[data-cr-theme="bee"] #trackerPanel,
body[data-cr-theme="bee"] #reportsPanel,
body[data-cr-theme="bee"] #adminPanel,
body[data-cr-theme="bee"] #recognitionPreviewPanel {
  background: linear-gradient(180deg, rgba(33, 23, 7, .96), rgba(23, 15, 5, .96)) !important;
  border-color: rgba(250, 204, 21, .66) !important;
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, .12), 0 0 28px rgba(250, 204, 21, .08);
}
body[data-cr-theme="bee"] .task-section,
body[data-cr-theme="bee"] .program-card,
body[data-cr-theme="bee"] .tracker-card,
body[data-cr-theme="bee"] .account-subsection,
body[data-cr-theme="bee"] .empty-state {
  background: linear-gradient(180deg, rgba(45, 31, 8, .96), rgba(28, 19, 6, .96)) !important;
  border-color: rgba(250, 204, 21, .48) !important;
}
body[data-cr-theme="bee"] .task-item-box {
  background: repeating-linear-gradient(60deg, rgba(250, 204, 21, .10) 0 9px, rgba(33, 23, 7, .96) 9px 22px) !important;
  border-color: rgba(250, 204, 21, .72) !important;
}
body[data-cr-theme="bee"] .task-section h4,
body[data-cr-theme="bee"] .section-head h3,
body[data-cr-theme="bee"] .task-title-row strong { color: #fff8db !important; }
body[data-cr-theme="bee"] .task-description-line,
body[data-cr-theme="bee"] .task-status-line.future,
body[data-cr-theme="bee"] .task-status-line.none { color: #f5d987 !important; }
body[data-cr-theme="bee"] .task-status-line.due { color: #facc15 !important; }
body[data-cr-theme="bee"] .pill,
body[data-cr-theme="bee"] .badge {
  background: rgba(22, 15, 5, .9) !important;
  border-color: rgba(250, 204, 21, .7) !important;
  color: #fde68a !important;
}

body[data-cr-theme="toxic"] #pendingUserPanel,
body[data-cr-theme="toxic"] #taskPanel,
body[data-cr-theme="toxic"] #programPanel,
body[data-cr-theme="toxic"] #trackerPanel,
body[data-cr-theme="toxic"] #reportsPanel,
body[data-cr-theme="toxic"] #adminPanel,
body[data-cr-theme="toxic"] #recognitionPreviewPanel {
  background: radial-gradient(circle at top left, rgba(57, 255, 20, .13), transparent 26%), linear-gradient(180deg, rgba(4, 18, 5, .97), rgba(1, 8, 3, .97)) !important;
  border-color: rgba(67, 255, 0, .72) !important;
  box-shadow: inset 0 0 0 1px rgba(182, 255, 0, .14), 0 0 32px rgba(57, 255, 20, .14);
}
body[data-cr-theme="toxic"] .task-section,
body[data-cr-theme="toxic"] .program-card,
body[data-cr-theme="toxic"] .tracker-card,
body[data-cr-theme="toxic"] .account-subsection,
body[data-cr-theme="toxic"] .empty-state {
  background: linear-gradient(135deg, rgba(10, 34, 9, .98), rgba(3, 16, 6, .98)) !important;
  border-color: rgba(67, 255, 0, .62) !important;
}
body[data-cr-theme="toxic"] .task-item-box {
  background: repeating-linear-gradient(-18deg, rgba(182, 255, 0, .12) 0 10px, rgba(3, 16, 6, .96) 10px 24px) !important;
  border-color: rgba(182, 255, 0, .82) !important;
  box-shadow: inset 0 0 0 1px rgba(182, 255, 0, .12), 0 0 20px rgba(57, 255, 20, .16) !important;
}
body[data-cr-theme="toxic"] .task-section h4,
body[data-cr-theme="toxic"] .section-head h3,
body[data-cr-theme="toxic"] .task-title-row strong { color: #efffe5 !important; text-shadow: 0 0 8px rgba(57, 255, 20, .24); }
body[data-cr-theme="toxic"] .task-description-line,
body[data-cr-theme="toxic"] .task-status-line.future,
body[data-cr-theme="toxic"] .task-status-line.none { color: #c8ff8a !important; }
body[data-cr-theme="toxic"] .task-status-line.due { color: #e7ff3c !important; }
body[data-cr-theme="toxic"] .task-card.complete { background: linear-gradient(135deg, rgba(20, 83, 45, .62), rgba(3, 16, 6, .96)) !important; }

/* v.041 Settings cleanup and first custom-theme editor. */
/* v.043 Windows-style themed color picker. */
.account-dialog {
  scroll-behavior: auto;
}
.account-dialog .dialog-head {
  position: sticky;
  top: -18px;
  z-index: 2;
  padding: 0 0 10px;
  background: color-mix(in srgb, var(--panel) 94%, #000 6%);
}
.settings-section-head,
.settings-action-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.settings-section-head h4,
.settings-section-head p,
.settings-action-row p { margin-top: 0; }
.theme-select-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 12px;
  margin: 10px 0 12px;
}
.theme-select-grid label { margin-bottom: 0; }
.theme-settings-block .settings-action-row button,
.theme-settings-block .settings-section-head button { white-space: nowrap; }
@media (max-width: 760px) {
  .settings-section-head,
  .settings-action-row { display: grid; grid-template-columns: 1fr; }
  .theme-select-grid { grid-template-columns: 1fr; }
}

body[data-cr-theme="custom"] {
  background: radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 20%, transparent), transparent 30%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--bg) 74%, #000 26%));
}
body[data-cr-theme="custom"] .topbar,
body[data-cr-theme="custom"] .panel,
body[data-cr-theme="custom"] .dashboard-head,
body[data-cr-theme="custom"] dialog.task-dialog,
body[data-cr-theme="custom"] #taskDialog,
body[data-cr-theme="custom"] #pendingUserPanel,
body[data-cr-theme="custom"] #taskPanel,
body[data-cr-theme="custom"] #programPanel,
body[data-cr-theme="custom"] #trackerPanel,
body[data-cr-theme="custom"] #reportsPanel,
body[data-cr-theme="custom"] #adminPanel,
body[data-cr-theme="custom"] #recognitionPreviewPanel {
  background: color-mix(in srgb, var(--panel) 92%, #000 8%) !important;
  border-color: color-mix(in srgb, var(--border) 70%, var(--accent) 30%) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.34), 0 0 26px color-mix(in srgb, var(--accent) 16%, transparent);
}
body[data-cr-theme="custom"] .task-section,
body[data-cr-theme="custom"] .program-card,
body[data-cr-theme="custom"] .tracker-card,
body[data-cr-theme="custom"] .account-subsection,
body[data-cr-theme="custom"] .empty-state,
body[data-cr-theme="custom"] .mini-card,
body[data-cr-theme="custom"] .task-card,
body[data-cr-theme="custom"] .admin-card {
  background: color-mix(in srgb, var(--panel2) 90%, #000 10%) !important;
  border-color: color-mix(in srgb, var(--border) 70%, var(--accent) 30%) !important;
  color: var(--text) !important;
}
body[data-cr-theme="custom"] .task-item-box {
  background: linear-gradient(135deg, color-mix(in srgb, var(--panel2) 88%, var(--accent) 12%), color-mix(in srgb, var(--panel) 95%, #000 5%)) !important;
  border-color: var(--accent) !important;
}
body[data-cr-theme="custom"] button,
body[data-cr-theme="custom"] .button-link {
  background: color-mix(in srgb, var(--accent) 42%, var(--panel2) 58%);
  border-color: var(--accent);
  color: var(--text);
}
body[data-cr-theme="custom"] button.secondary,
body[data-cr-theme="custom"] .button-link.secondary { background: color-mix(in srgb, var(--panel2) 86%, #000 14%); }
body[data-cr-theme="custom"] button.danger { background: color-mix(in srgb, var(--danger) 45%, #000 55%); border-color: var(--danger); }
body[data-cr-theme="custom"] input,
body[data-cr-theme="custom"] select,
body[data-cr-theme="custom"] textarea {
  background: color-mix(in srgb, var(--bg) 88%, #000 12%) !important;
  border-color: color-mix(in srgb, var(--border) 65%, var(--accent) 35%) !important;
  color: var(--text) !important;
}
body[data-cr-theme="custom"] .muted,
body[data-cr-theme="custom"] .task-description-line,
body[data-cr-theme="custom"] .task-status-line.future,
body[data-cr-theme="custom"] .task-status-line.none { color: var(--muted) !important; }
body[data-cr-theme="custom"] .task-status-line.due,
body[data-cr-theme="custom"] .pill.due { color: var(--warn) !important; }
body[data-cr-theme="custom"] .pill,
body[data-cr-theme="custom"] .badge {
  background: color-mix(in srgb, var(--panel) 84%, #000 16%) !important;
  border-color: color-mix(in srgb, var(--border) 55%, var(--accent) 45%) !important;
  color: var(--text) !important;
}

.custom-theme-dialog { width: min(1160px, calc(100vw - 28px)) !important; }
.custom-theme-editor-layout {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(360px, 1fr);
  gap: 16px;
  align-items: start;
}
.custom-theme-controls,
.custom-theme-preview-panel {
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--accent) 30%);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel2) 70%, transparent 30%);
  padding: 14px;
}
.custom-theme-controls h4,
.custom-theme-preview-panel h4 { margin-top: 0; }
.instatheme-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 12px 0 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--accent) 30%);
  background: color-mix(in srgb, var(--panel) 78%, transparent 22%);
}
.instatheme-row strong { display: block; color: var(--text); }
.instatheme-row small { display: block; margin-top: 3px; color: var(--muted); line-height: 1.35; }
.instatheme-row button { white-space: nowrap; }
.custom-theme-color-list { display: grid; gap: 8px; }
.custom-theme-color-row {
  display: grid;
  grid-template-columns: 1fr 42px auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: color-mix(in srgb, var(--panel) 84%, #000 16%);
  border: 1px solid color-mix(in srgb, var(--border) 72%, var(--accent) 28%);
  border-radius: 14px;
  padding: 10px;
}
.custom-theme-color-row span:first-child { display: grid; gap: 3px; }
.custom-theme-color-row small { color: var(--muted); font-weight: 500; }
.custom-color-swatch {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 2px solid color-mix(in srgb, var(--text) 55%, transparent);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.25);
}
.custom-theme-color-row code { font-size: 12px; color: var(--muted); }
.custom-theme-preview {
  --bg: #0f172a;
  --panel: #111827;
  --panel2: #1e293b;
  --text: #e5e7eb;
  --muted: #cbd5e1;
  --border: #334155;
  --accent: #facc15;
  --accent2: #38bdf8;
  --danger: #ef4444;
  --good: #22c55e;
  --warn: #fb923c;
  display: grid;
  gap: 12px;
  min-height: 460px;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  color: var(--text);
  background: radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 18%, transparent), transparent 28%), var(--bg);
}
.preview-topbar,
.preview-panel,
.preview-mini-card,
.preview-popup-card {
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--accent) 30%);
  background: color-mix(in srgb, var(--panel) 92%, #000 8%);
  border-radius: 14px;
  padding: 12px;
}
.preview-topbar { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.custom-theme-preview button {
  width: auto;
  background: color-mix(in srgb, var(--accent) 42%, var(--panel2) 58%);
  border: 1px solid var(--accent);
  color: var(--text);
}
.custom-theme-preview button.secondary { background: var(--panel2); border-color: var(--border); }
.custom-theme-preview button.danger { background: color-mix(in srgb, var(--danger) 45%, #000 55%); border-color: var(--danger); }
.preview-switcher { display: inline-flex; gap: 8px; padding: 6px; border: 1px solid var(--border); border-radius: 999px; width: fit-content; background: color-mix(in srgb, var(--panel) 70%, transparent 30%); }
.preview-pill { padding: 8px 12px; border-radius: 999px; color: var(--muted); }
.preview-pill.active { background: var(--accent); color: var(--bg); }
.preview-panel h5 { margin: 0 0 10px; color: var(--text); }
.preview-task-card {
  border: 2px solid var(--accent);
  background: color-mix(in srgb, var(--panel2) 90%, #000 10%);
  border-radius: 16px;
  padding: 14px;
}
.preview-task-card p { color: var(--muted); }
.preview-task-card .preview-due { color: var(--warn); font-weight: 800; }
.preview-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 12px; }
.preview-popup-card input,
.preview-popup-card select { margin-top: 8px; background: var(--bg) !important; color: var(--text) !important; border-color: var(--border) !important; }
.hex-color-grid {
  margin: 14px 0;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--accent) 30%);
  background: color-mix(in srgb, var(--panel) 88%, #000 12%);
}
.windows-color-picker {
  display: grid;
  grid-template-columns: 310px minmax(360px, 1fr);
  gap: 18px;
  align-items: start;
}
.windows-color-left,
.windows-color-right {
  border: 1px solid color-mix(in srgb, var(--border) 72%, var(--accent) 28%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel2) 62%, transparent 38%);
  padding: 12px;
}
.windows-color-left h4 {
  margin: 0 0 8px;
  font-size: 15px;
}
.windows-color-left h4:not(:first-child) { margin-top: 18px; }
.windows-color-basic-grid,
.windows-color-custom-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
.windows-color-basic-tile,
.windows-color-custom-slot {
  width: 28px;
  height: 28px;
  min-width: 0;
  padding: 0;
  border-radius: 3px;
  border: 2px solid color-mix(in srgb, var(--text) 25%, transparent);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.34);
  background: color-mix(in srgb, var(--panel) 74%, #fff 26%);
  cursor: pointer;
}
.windows-color-custom-slot:not(.filled) {
  background:
    linear-gradient(135deg, rgba(255,255,255,.16) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.16) 75%),
    color-mix(in srgb, var(--panel) 80%, #fff 20%);
  background-size: 10px 10px;
}
.windows-color-basic-tile:hover,
.windows-color-custom-slot:hover,
.windows-color-basic-tile.active,
.windows-color-custom-slot.active {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 36%, transparent), inset 0 0 0 1px rgba(0,0,0,.45);
}
.windows-color-picker-main {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) 34px;
  gap: 12px;
  align-items: stretch;
}
.windows-color-field {
  position: relative;
  min-height: 260px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, #000 30%);
  cursor: crosshair;
  overflow: hidden;
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, transparent),
    hsl(var(--picker-hue, 0deg) 100% 50%);
}
.windows-color-field-marker {
  position: absolute;
  left: var(--picker-x, 100%);
  top: var(--picker-y, 0%);
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #000, 0 0 12px rgba(0,0,0,.55);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.windows-lum-slider {
  width: 260px;
  height: 28px;
  transform: rotate(90deg) translateY(-116px);
  transform-origin: left top;
  accent-color: var(--accent);
}
.windows-color-detail-grid {
  display: grid;
  grid-template-columns: minmax(120px, 160px) minmax(110px, 1fr) minmax(130px, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 14px;
}
.windows-color-preview-stack { display: grid; gap: 8px; justify-items: center; }
.windows-color-large-preview {
  width: 100%;
  min-height: 72px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, #000 20%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.28);
}
.windows-color-preview-label { color: var(--muted); font-size: 13px; }
.windows-color-preview-pair { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.windows-color-preview-pair span {
  width: 26px;
  height: 22px;
  display: inline-block;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, #000 20%);
}
.windows-color-numbers { display: grid; gap: 8px; }
.windows-color-numbers label {
  display: grid;
  grid-template-columns: 58px minmax(58px, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0;
}
.windows-color-numbers input,
.windows-hex-entry input {
  min-height: 34px;
  padding: 6px 8px;
}
.windows-hex-entry { margin-top: 10px; }
.windows-color-picker .full-width { width: 100%; margin-top: 12px; }
@media (max-width: 880px) {
  .custom-theme-editor-layout { grid-template-columns: 1fr; }
  .preview-mini-grid { grid-template-columns: 1fr; }
  .windows-color-picker { grid-template-columns: 1fr; }
  .windows-color-picker-main { grid-template-columns: 1fr; }
  .windows-lum-slider { width: 100%; height: auto; transform: none; }
  .windows-color-detail-grid { grid-template-columns: 1fr; }
}

/* v.044 compact custom theme editor and private custom-theme titles */
.custom-theme-name-field {
  display: grid;
  gap: 6px;
  margin-bottom: 12px !important;
}
.custom-theme-name-field input {
  min-height: 40px;
}
.custom-color-dialog {
  width: min(1000px, calc(100vw - 20px)) !important;
  max-height: calc(100vh - 20px) !important;
  padding: 12px !important;
  overflow: hidden !important;
}
.custom-color-dialog #customColorForm {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 8px;
  max-height: calc(100vh - 44px);
  overflow: hidden;
  min-width: 0;
}
.custom-color-dialog .dialog-head { margin-bottom: 0; }
.custom-color-dialog .muted { margin: 0 0 2px; }
.custom-color-dialog .message { min-height: 16px; margin: 0; }
.custom-color-dialog .hex-color-grid {
  margin: 0;
  padding: 10px;
  overflow: hidden;
  min-width: 0;
}
.custom-color-dialog .windows-color-picker {
  grid-template-columns: 286px minmax(0, 1fr);
  gap: 12px;
  max-width: 100%;
  min-width: 0;
}
.custom-color-dialog .windows-color-left,
.custom-color-dialog .windows-color-right {
  padding: 10px;
  min-width: 0;
  overflow: hidden;
}
.custom-color-dialog .windows-color-left h4 {
  font-size: 13px;
  margin-bottom: 6px;
}
.custom-color-dialog .windows-color-left h4:not(:first-child) { margin-top: 10px; }
.custom-color-dialog .windows-color-basic-grid,
.custom-color-dialog .windows-color-custom-grid {
  grid-template-columns: repeat(8, 25px);
  gap: 5px;
}
.custom-color-dialog .windows-color-basic-tile,
.custom-color-dialog .windows-color-custom-slot {
  width: 25px;
  height: 25px;
}
.custom-color-dialog .windows-color-picker .full-width {
  margin-top: 10px;
  min-height: 38px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.custom-color-dialog .windows-color-picker-main {
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 10px;
}
.custom-color-dialog .windows-color-field {
  min-height: 190px;
}
.custom-color-dialog .windows-lum-slider {
  width: 190px;
  height: 24px;
  transform: rotate(90deg) translateY(-83px);
}
.custom-color-dialog .windows-color-detail-grid {
  grid-template-columns: minmax(92px, 120px) minmax(92px, 1fr) minmax(104px, 1fr);
  gap: 9px;
  margin-top: 10px;
}
.custom-color-dialog .windows-color-large-preview {
  min-height: 54px;
}
.custom-color-dialog .windows-color-preview-label,
.custom-color-dialog .windows-color-preview-pair { font-size: 11px; }
.custom-color-dialog .windows-color-numbers { gap: 5px; }
.custom-color-dialog .windows-color-numbers label {
  grid-template-columns: 44px minmax(44px, 1fr);
  gap: 5px;
  font-size: 13px;
}
.custom-color-dialog .windows-color-numbers input,
.custom-color-dialog .windows-hex-entry input {
  min-height: 30px;
  padding: 4px 6px;
}
.custom-color-dialog .windows-hex-entry {
  margin-top: 0;
  display: grid;
  gap: 4px;
}
.custom-color-dialog .button-row {
  margin-top: 0;
}
@media (max-width: 820px), (max-height: 640px) {
  .custom-color-dialog {
    overflow: auto !important;
  }
  .custom-color-dialog #customColorForm {
    overflow: visible;
    max-height: none;
  }
}

/* v.045 private custom-theme deletion controls */
/* v.046 adds a separate themed visual check indicator because browser pseudo-elements on checkbox inputs can render inconsistently. */
.theme-custom-button-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.theme-custom-button-row button {
  flex: 1 1 220px;
  min-width: 220px;
}
button.danger-outline,
.secondary.danger-outline {
  border-color: color-mix(in srgb, var(--danger, #ef4444) 70%, var(--border, #334155) 30%);
  color: color-mix(in srgb, var(--danger, #ef4444) 85%, #fff 15%);
  background: color-mix(in srgb, var(--danger, #ef4444) 16%, var(--panel, #111827) 84%);
}
button.danger-outline:hover,
.secondary.danger-outline:hover {
  background: color-mix(in srgb, var(--danger, #ef4444) 28%, var(--panel, #111827) 72%);
  border-color: var(--danger, #ef4444);
}
.delete-custom-theme-dialog {
  max-width: min(680px, calc(100vw - 28px));
}
.custom-theme-delete-toolbar {
  justify-content: flex-start;
  margin: 10px 0;
}
.custom-theme-delete-list {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  max-height: min(420px, 52vh);
  overflow: auto;
  padding-right: 4px;
}
.custom-theme-manage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}
.custom-theme-manage-select {
  min-width: 0;
}
.custom-theme-manage-actions {
  display: flex;
  gap: 8px;
  align-items: stretch;
  justify-content: flex-end;
}
.custom-theme-manage-actions button {
  min-width: 76px;
  padding-inline: 14px;
}
.custom-theme-delete-row {
  position: relative;
  display: grid;
  grid-template-columns: 28px 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border, #334155) 72%, transparent 28%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel2, #1e293b) 72%, transparent 28%);
  cursor: pointer;
}
.custom-theme-delete-row:hover {
  border-color: var(--accent, #facc15);
  background: color-mix(in srgb, var(--panel2, #1e293b) 82%, var(--accent, #facc15) 18%);
}
.custom-theme-delete-row:has(.custom-theme-delete-input:checked) {
  border-color: var(--accent, #facc15);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #facc15) 55%, transparent 45%), 0 0 18px color-mix(in srgb, var(--accent, #facc15) 26%, transparent 74%);
  background: color-mix(in srgb, var(--panel2, #1e293b) 76%, var(--accent, #facc15) 24%);
}
.custom-theme-delete-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.custom-theme-delete-check {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 2px solid color-mix(in srgb, var(--muted, #cbd5e1) 78%, transparent 22%);
  background: color-mix(in srgb, var(--bg, #0f172a) 75%, #000 25%);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.custom-theme-delete-check::after {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 3px solid var(--bg, #0f172a);
  border-bottom: 3px solid var(--bg, #0f172a);
  transform: rotate(-45deg) scale(0);
  transition: transform .12s ease;
}
.custom-theme-delete-input:checked + .custom-theme-delete-check {
  background: linear-gradient(135deg, var(--accent, #facc15), var(--accent2, #38bdf8));
  border-color: var(--accent, #facc15);
}
.custom-theme-delete-input:checked + .custom-theme-delete-check::after { transform: rotate(-45deg) scale(1); }
.custom-theme-delete-input:focus-visible + .custom-theme-delete-check {
  outline: 2px solid var(--text, #f8fafc);
  outline-offset: 3px;
}
.custom-theme-delete-swatch {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border, #334155) 70%, #fff 30%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.custom-theme-delete-row strong,
.custom-theme-delete-row small {
  display: block;
  overflow-wrap: anywhere;
}
.custom-theme-delete-row small {
  color: var(--muted, #cbd5e1);
  margin-top: 3px;
  font-size: 12px;
}
@media (max-width: 760px) {
  .settings-section-head .theme-custom-button-row { justify-content: stretch; }
  .theme-custom-button-row button { flex: 1 1 180px; }
  .custom-theme-manage-row {
    grid-template-columns: 1fr;
  }
  .custom-theme-manage-actions {
    justify-content: stretch;
  }
  .custom-theme-manage-actions button {
    flex: 1 1 0;
  }
}

/* v.048 settings cleanup and global themed checkbox polish */
.account-identity-line.hidden,
#accountPasswordActualLoginNote.hidden {
  display: none !important;
}
.dashboard-access-grid .dashboard-use-card {
  min-height: 52px;
  align-items: center;
}
.dashboard-access-grid .dashboard-use-card span {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  line-height: 1.25;
}
.dashboard-access-grid .dashboard-use-card small::before {
  content: "— ";
  color: var(--muted, #cbd5e1);
}

input[type="checkbox"]:not(.custom-theme-delete-input) {
  appearance: none;
  -webkit-appearance: none;
  inline-size: 24px;
  block-size: 24px;
  min-inline-size: 24px;
  min-block-size: 24px;
  margin: 0;
  border-radius: 8px;
  border: 2px solid color-mix(in srgb, var(--muted, #cbd5e1) 78%, transparent 22%);
  background: color-mix(in srgb, var(--bg, #0f172a) 75%, #000 25%);
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 0 1px color-mix(in srgb, var(--border, #334155) 35%, transparent 65%);
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
input[type="checkbox"]:not(.custom-theme-delete-input)::after {
  content: "";
  inline-size: 11px;
  block-size: 6px;
  border-left: 3px solid var(--bg, #0f172a);
  border-bottom: 3px solid var(--bg, #0f172a);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform .12s ease;
}
input[type="checkbox"]:not(.custom-theme-delete-input):checked {
  background: linear-gradient(135deg, var(--accent, #facc15), var(--accent2, #38bdf8));
  border-color: var(--accent, #facc15);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #facc15) 55%, transparent 45%), 0 0 14px color-mix(in srgb, var(--accent, #facc15) 24%, transparent 76%);
}
input[type="checkbox"]:not(.custom-theme-delete-input):checked::after {
  transform: rotate(-45deg) scale(1);
}
input[type="checkbox"]:not(.custom-theme-delete-input):hover {
  border-color: var(--accent, #facc15);
  transform: translateY(-1px);
}
input[type="checkbox"]:not(.custom-theme-delete-input):focus-visible {
  outline: 2px solid var(--text, #f8fafc);
  outline-offset: 3px;
}
.check-row,
.checkbox-label,
.inline-check {
  align-items: center;
}
.admin-account-select.outside-card {
  border-color: color-mix(in srgb, var(--accent, #facc15) 55%, var(--border, #334155) 45%);
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent, #facc15) 20%, transparent 80%), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel, #111827) 92%, transparent 8%), color-mix(in srgb, var(--panel2, #1e293b) 78%, transparent 22%));
}
.admin-account-select input {
  inline-size: 24px;
  block-size: 24px;
  min-inline-size: 24px;
  min-block-size: 24px;
  border-radius: 8px;
  border-color: color-mix(in srgb, var(--muted, #cbd5e1) 78%, transparent 22%);
  background: color-mix(in srgb, var(--bg, #0f172a) 75%, #000 25%);
}
.admin-account-select input:checked {
  background: linear-gradient(135deg, var(--accent, #facc15), var(--accent2, #38bdf8));
  border-color: var(--accent, #facc15);
}

/* v.050 mobile field-checklist refactor
   Keeps the desktop command-center layout, but changes small screens into a compact checklist shell. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.mobile-fieldbar {
  display: none;
}
button, .button-link, input, select, textarea, label, .task-card, .mini-card {
  max-width: 100%;
}
table {
  width: 100%;
  border-collapse: collapse;
}

@media (max-width: 768px) {
  :root {
    --mobile-edge: max(12px, env(safe-area-inset-left));
    --mobile-edge-right: max(12px, env(safe-area-inset-right));
    --mobile-bottom: max(18px, env(safe-area-inset-bottom));
  }

  body {
    background: #0b1424;
    overscroll-behavior-y: contain;
  }

  .topbar {
    position: static;
    padding: 14px var(--mobile-edge-right) 12px var(--mobile-edge);
    gap: 8px;
  }
  .topbar h1 {
    font-size: 22px;
    line-height: 1.1;
  }
  .topbar p {
    font-size: 13px;
  }

  main {
    padding: 14px var(--mobile-edge-right) var(--mobile-bottom) var(--mobile-edge);
  }

  body.dashboard-active #dashboard {
    padding: max(10px, env(safe-area-inset-top)) var(--mobile-edge-right) var(--mobile-bottom) var(--mobile-edge);
  }

  .panel, .dashboard-head,
  #pendingUserPanel, #taskPanel, #programPanel, #trackerPanel, #reportsPanel, #adminPanel, #recognitionPreviewPanel {
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
  }

  .hero {
    min-height: 0;
  }

  .command-shell {
    padding: 4px 0 8px;
    gap: 8px;
  }
  .identity-block {
    align-items: flex-start;
    text-align: left;
    margin-left: 0;
  }
  .identity-block h2 {
    font-size: 22px;
  }
  .identity-block p,
  .identity-block .subtle-line {
    font-size: 12px;
    line-height: 1.35;
  }
  .identity-block .build-line {
    display: none;
  }
  .top-dashboard-switcher {
    display: none !important;
  }

  .mobile-fieldbar {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, .78fr);
    gap: 7px;
    position: sticky;
    top: 0;
    z-index: 820;
    margin: 0 calc(var(--mobile-edge-right) * -1) 12px calc(var(--mobile-edge) * -1);
    padding: 8px var(--mobile-edge-right) 8px var(--mobile-edge);
    background: rgba(11, 20, 36, .96);
    border-top: 1px solid rgba(148, 163, 184, .18);
    border-bottom: 1px solid rgba(148, 163, 184, .28);
    box-shadow: 0 14px 26px rgba(2, 6, 23, .26);
    backdrop-filter: blur(10px);
  }
  .mobile-fieldbar button {
    min-width: 0;
    min-height: 48px;
    padding: 7px 6px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.1;
    text-align: center;
  }
  .mobile-fieldbar .bucket-button.active {
    background: var(--accent);
    color: #06111f;
    font-weight: 800;
  }

  body.dashboard-active:not(.mobile-nav-open) .command-nav {
    display: none !important;
  }
  body.dashboard-active.mobile-nav-open .command-nav {
    display: grid;
  }
  .command-nav {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    justify-content: stretch;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 12px;
    background: rgba(15, 26, 45, .98);
  }
  .command-nav button,
  .command-nav .button-link {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 9px 8px;
    border-radius: 9px;
    font-size: 13px;
    line-height: 1.12;
    white-space: normal;
  }
  .command-nav #newTaskButton,
  .command-nav #accountButton,
  .command-nav #logoutButton {
    grid-column: span 2;
  }

  #viewAsBanner.view-as-banner {
    margin-bottom: 12px;
  }

  #taskPanel .section-head {
    display: flex !important;
    gap: 10px;
  }
  #taskPanel .section-head h3 {
    margin-bottom: 4px;
  }
  .task-scope-line {
    display: block;
    font-size: 12px;
    line-height: 1.35;
  }
  .task-head-actions {
    width: 100%;
    justify-content: stretch;
  }
  .task-head-actions .bucket-toggle {
    flex: 1 1 170px;
  }
  .task-head-actions #newTaskButton2 {
    flex: 1 1 120px;
    min-height: 44px;
  }

  .task-groups {
    gap: 12px;
  }
  .task-section {
    padding: 12px 10px;
    border-radius: 12px;
  }
  .task-section h4 {
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.15;
  }
  .task-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .task-item-box {
    padding: 5px;
    border-radius: 14px;
  }
  .task-item-box .task-card,
  .task-card {
    min-height: 0;
  }
  .task-card {
    padding: 14px 12px 12px;
    border-width: 2px;
    border-radius: 12px;
  }
  .task-title-row {
    gap: 10px;
  }
  .task-title-row strong {
    font-size: 17px;
    line-height: 1.22;
  }
  .trash-button {
    min-width: 44px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 10px;
  }
  .task-status-line {
    margin: 10px 0 6px;
    font-size: 14px;
  }
  .task-description-line {
    margin-bottom: 12px;
    font-size: 14px;
  }
  .task-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
  }
  .task-actions button,
  .task-actions .archive-task-action {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 6px;
    border-radius: 9px;
    font-size: 13px;
  }

  input, select, textarea,
  dialog.task-dialog input, dialog.task-dialog select, dialog.task-dialog textarea,
  #taskDialog input, #taskDialog select, #taskDialog textarea {
    min-height: 44px;
    padding: 10px 11px;
    font-size: 16px !important;
    line-height: 1.25;
  }
  textarea,
  dialog.task-dialog textarea,
  #taskDialog textarea {
    min-height: 92px;
  }
  label,
  dialog.task-dialog label,
  #taskDialog label {
    gap: 6px !important;
    margin-bottom: 10px !important;
    font-size: 14px;
    line-height: 1.25;
  }
  .form-grid, .two-col, .reports-grid, .theme-select-grid, .invite-code-grid {
    grid-template-columns: 1fr !important;
  }
  .button-row,
  .button-row.right {
    align-items: stretch;
    justify-content: stretch;
  }
  .button-row button,
  .button-row .button-link {
    flex: 1 1 140px;
    min-height: 44px;
    white-space: normal;
  }

  dialog.task-dialog,
  #taskDialog,
  dialog.task-dialog:not(.help-dialog),
  .account-dialog,
  .custom-theme-dialog,
  .delete-custom-theme-dialog,
  .custom-color-dialog,
  .invite-dialog,
  .admin-edit-account-dialog,
  .approval-gate-dialog {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: max(12px, env(safe-area-inset-top)) var(--mobile-edge-right) var(--mobile-bottom) var(--mobile-edge) !important;
    border-radius: 0 !important;
    overflow: auto !important;
  }
  dialog.task-dialog form,
  #taskDialog form {
    min-height: 100%;
  }
  dialog.task-dialog .dialog-head,
  #taskDialog .dialog-head {
    position: sticky;
    top: calc(max(12px, env(safe-area-inset-top)) * -1);
    z-index: 5;
    margin: calc(max(12px, env(safe-area-inset-top)) * -1) calc(var(--mobile-edge-right) * -1) 12px calc(var(--mobile-edge) * -1);
    padding: max(12px, env(safe-area-inset-top)) var(--mobile-edge-right) 10px var(--mobile-edge);
    background: rgba(15, 26, 45, .98);
    border-bottom: 1px solid rgba(148, 163, 184, .24);
  }
  dialog.task-dialog .dialog-head h3,
  #taskDialog .dialog-head h3 {
    font-size: 19px;
  }
  #taskDialog .task-dashboard-context-banner {
    min-height: 44px;
    border-radius: 10px;
    letter-spacing: .08em;
  }
  #taskDialog .form-grid {
    gap: 0;
  }
  #taskDialog textarea#taskDescription {
    min-height: 82px;
  }
  #taskDialog .subfields {
    padding: 10px;
    border-radius: 12px;
  }

  #programPanel.program-modal-panel,
  #switchProgramsPanel.program-modal-panel,
  .program-review-panel {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    transform: none !important;
    margin: 0 !important;
    padding: max(12px, env(safe-area-inset-top)) var(--mobile-edge-right) var(--mobile-bottom) var(--mobile-edge) !important;
    border-radius: 0 !important;
    overflow: auto !important;
  }
  #programPanel.program-modal-panel .section-head,
  #switchProgramsPanel.program-modal-panel .section-head,
  .program-review-panel .section-head {
    position: sticky;
    top: calc(max(12px, env(safe-area-inset-top)) * -1);
    z-index: 5;
    margin: calc(max(12px, env(safe-area-inset-top)) * -1) calc(var(--mobile-edge-right) * -1) 12px calc(var(--mobile-edge) * -1);
    padding: max(12px, env(safe-area-inset-top)) var(--mobile-edge-right) 10px var(--mobile-edge);
    background: rgba(15, 26, 45, .98);
  }

  .member-request-columns,
  .leader-assignment-columns,
  .custom-theme-editor-layout,
  .custom-theme-preview-panel,
  .leader-program-grid,
  .member-program-grid,
  .compact-check-grid {
    grid-template-columns: 1fr !important;
  }
  .leader-member-list,
  #leaderProgramAssignmentChoices.leader-program-grid,
  #memberProgramChoices.member-program-grid {
    max-height: none;
  }

  .check-row,
  .checkbox-label,
  .inline-check,
  .usage-card,
  .dashboard-use-card {
    min-height: 48px;
    padding: 10px;
    gap: 10px;
    align-items: center !important;
    border-radius: 12px;
  }
  .checkbox-label,
  .usage-card,
  .dashboard-use-card {
    flex-direction: row !important;
  }
  .checkbox-label span,
  .usage-card span,
  .dashboard-use-card span {
    min-width: 0;
  }
  input[type="checkbox"]:not(.custom-theme-delete-input) {
    inline-size: 28px;
    block-size: 28px;
    min-inline-size: 28px;
    min-block-size: 28px;
  }

  .admin-account-row {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
  .admin-account-select.outside-card {
    width: 100%;
    height: 52px;
    margin: 0;
    justify-content: flex-start;
    padding: 0 12px;
    gap: 10px;
  }
  .admin-account-select.outside-card::after {
    content: "Select account";
    color: var(--muted);
    font-weight: 800;
    font-size: 13px;
  }
  .admin-account-card-title,
  .admin-access-row,
  .org-node-card,
  .pending-request-card {
    flex-direction: column;
    align-items: stretch;
  }
  .compact-row {
    flex-wrap: wrap;
  }

  #dueReportSummary.pill-row,
  #trackerSummary.pill-row {
    gap: 8px;
  }
  #dueReportSummary .pill,
  #trackerSummary .pill {
    flex: 1 1 120px;
    text-align: center;
    padding: 8px 10px;
  }
  .report-bucket p {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
  }
  .report-bucket p:last-child {
    border-bottom: 0;
  }

  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  th, td {
    white-space: nowrap;
  }

  .cookie-notice {
    left: var(--mobile-edge);
    right: var(--mobile-edge-right);
    bottom: var(--mobile-bottom);
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  .mobile-fieldbar {
    grid-template-columns: 1.1fr .7fr .7fr .72fr;
    gap: 6px;
  }
  .mobile-fieldbar button {
    font-size: 12px;
  }
  .command-nav {
    grid-template-columns: 1fr;
  }
  .command-nav #newTaskButton,
  .command-nav #accountButton,
  .command-nav #logoutButton {
    grid-column: auto;
  }
  .task-actions {
    grid-template-columns: 1fr;
  }
  .button-row button,
  .button-row .button-link {
    flex-basis: 100%;
  }
  .badge {
    white-space: normal;
  }
}


/* v.051 checkbox contrast fix
   Make checked/unchecked states obvious on dark/custom themes, especially account dashboard toggles. */
input[type="checkbox"]:not(.custom-theme-delete-input) {
  inline-size: 28px;
  block-size: 28px;
  min-inline-size: 28px;
  min-block-size: 28px;
  border-width: 3px;
  border-radius: 9px;
  border-color: color-mix(in srgb, var(--text, #f8fafc) 74%, var(--accent, #facc15) 26%);
  background: linear-gradient(180deg, rgba(2, 6, 23, .98), rgba(15, 23, 42, .92));
  box-shadow:
    inset 0 0 0 2px rgba(2, 6, 23, .72),
    0 0 0 1px color-mix(in srgb, var(--text, #f8fafc) 18%, transparent 82%),
    0 2px 8px rgba(2, 6, 23, .36);
}
input[type="checkbox"]:not(.custom-theme-delete-input)::after {
  inline-size: 14px;
  block-size: 8px;
  border-left: 4px solid #020617;
  border-bottom: 4px solid #020617;
}
input[type="checkbox"]:not(.custom-theme-delete-input):checked {
  background: linear-gradient(135deg, var(--accent, #facc15), var(--accent2, #38bdf8));
  border-color: #f8fafc;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .45),
    0 0 0 2px color-mix(in srgb, var(--accent, #facc15) 82%, transparent 18%),
    0 0 18px color-mix(in srgb, var(--accent, #facc15) 42%, transparent 58%);
}
input[type="checkbox"]:not(.custom-theme-delete-input):checked::after {
  transform: rotate(-45deg) scale(1.08);
}
input[type="checkbox"]:not(.custom-theme-delete-input):focus-visible {
  outline: 3px solid #f8fafc;
  outline-offset: 4px;
}
input[type="checkbox"]:not(.custom-theme-delete-input):disabled {
  cursor: not-allowed;
  opacity: .62;
  filter: grayscale(.25);
}

.dashboard-access-grid .dashboard-use-card,
.option-box .usage-card.dashboard-use-card,
.account-dialog .usage-card.dashboard-use-card {
  position: relative;
  padding: 14px 76px 14px 14px;
  border-width: 1px;
}
.dashboard-access-grid .dashboard-use-card::after {
  content: "OFF";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 46px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text, #f8fafc) 50%, var(--border, #334155) 50%);
  background: rgba(2, 6, 23, .72);
  color: var(--muted, #cbd5e1);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
}
.dashboard-access-grid .dashboard-use-card:has(input[type="checkbox"]:checked) {
  border-color: color-mix(in srgb, var(--accent, #facc15) 88%, #f8fafc 12%);
  background:
    radial-gradient(circle at 22% 12%, color-mix(in srgb, var(--accent, #facc15) 24%, transparent 76%), transparent 46%),
    color-mix(in srgb, var(--panel2, #1e293b) 72%, var(--accent, #facc15) 18%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent, #facc15) 42%, transparent 58%),
    0 0 20px color-mix(in srgb, var(--accent, #facc15) 18%, transparent 82%);
}
.dashboard-access-grid .dashboard-use-card:has(input[type="checkbox"]:checked)::after {
  content: "ON";
  border-color: #f8fafc;
  background: linear-gradient(135deg, var(--accent, #facc15), var(--accent2, #38bdf8));
  color: #020617;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent, #facc15) 38%, transparent 62%);
}
.dashboard-access-grid .dashboard-use-card:has(input[type="checkbox"]:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--text, #f8fafc) 72%, var(--accent, #facc15) 28%);
  outline-offset: 3px;
}

.admin-account-select input {
  inline-size: 28px;
  block-size: 28px;
  min-inline-size: 28px;
  min-block-size: 28px;
  border-width: 3px;
  border-radius: 9px;
}
.admin-account-select input:checked {
  border-color: #f8fafc;
  background: linear-gradient(135deg, var(--accent, #facc15), var(--accent2, #38bdf8));
}
.admin-account-select input::after {
  width: 14px;
  height: 8px;
  border-left-width: 4px;
  border-bottom-width: 4px;
}

@media (max-width: 760px) {
  .dashboard-access-grid .dashboard-use-card,
  .option-box .usage-card.dashboard-use-card,
  .account-dialog .usage-card.dashboard-use-card {
    min-height: 64px;
    padding: 12px 72px 12px 12px;
  }
  input[type="checkbox"]:not(.custom-theme-delete-input),
  .admin-account-select input {
    inline-size: 32px;
    block-size: 32px;
    min-inline-size: 32px;
    min-block-size: 32px;
  }
  input[type="checkbox"]:not(.custom-theme-delete-input)::after,
  .admin-account-select input::after {
    inline-size: 16px;
    block-size: 9px;
  }
}

/* v.052 dashboard access toggle refinement
   Replace the separate checkbox + right-side badge with one ON/OFF pill in the checkbox position. */
.dashboard-access-grid .dashboard-use-card,
.option-box .usage-card.dashboard-use-card,
.account-dialog .usage-card.dashboard-use-card {
  padding: 14px;
}
.dashboard-access-grid .dashboard-use-card::after {
  content: none !important;
  display: none !important;
}
.dashboard-access-grid .dashboard-use-card input[type="checkbox"] {
  inline-size: 76px;
  block-size: 34px;
  min-inline-size: 76px;
  min-block-size: 34px;
  flex: 0 0 76px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text, #f8fafc) 46%, var(--border, #334155) 54%);
  background: rgba(2, 6, 23, .70);
  color: var(--muted, #cbd5e1);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 2px 8px rgba(2, 6, 23, .32);
  letter-spacing: .08em;
}
.dashboard-access-grid .dashboard-use-card input[type="checkbox"]::after {
  content: "OFF";
  inline-size: auto;
  block-size: auto;
  border: 0;
  transform: none;
  color: currentColor;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
}
.dashboard-access-grid .dashboard-use-card input[type="checkbox"]:checked {
  border-color: #f8fafc;
  background: linear-gradient(135deg, var(--accent, #facc15), var(--accent2, #38bdf8));
  color: #020617;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .45),
    0 0 0 2px color-mix(in srgb, var(--accent, #facc15) 45%, transparent 55%),
    0 0 16px color-mix(in srgb, var(--accent, #facc15) 36%, transparent 64%);
}
.dashboard-access-grid .dashboard-use-card input[type="checkbox"]:checked::after {
  content: "ON";
  transform: none;
}
.dashboard-access-grid .dashboard-use-card input[type="checkbox"]:hover {
  transform: translateY(-1px);
}
.dashboard-access-grid .dashboard-use-card input[type="checkbox"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--text, #f8fafc) 76%, var(--accent, #facc15) 24%);
  outline-offset: 3px;
}
@media (max-width: 760px) {
  .dashboard-access-grid .dashboard-use-card,
  .option-box .usage-card.dashboard-use-card,
  .account-dialog .usage-card.dashboard-use-card {
    min-height: 64px;
    padding: 12px;
  }
  .dashboard-access-grid .dashboard-use-card input[type="checkbox"] {
    inline-size: 72px;
    block-size: 36px;
    min-inline-size: 72px;
    min-block-size: 36px;
    flex-basis: 72px;
  }
}

/* v.053 mobile interaction hotfix
   Tightens the mobile shell without changing backend behavior. */
.account-subsection .dashboard-access-grid + .button-row.right {
  margin-top: 18px;
}
.account-subsection .dashboard-access-grid + .button-row.right #saveDashboardUsesButton {
  min-width: 260px;
}

.cr-ui-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border: 0;
  padding: 18px;
  box-sizing: border-box;
  background: rgba(2, 6, 23, .72);
  color: var(--text, #f8fafc);
  outline: none;
  backdrop-filter: blur(3px);
}
.cr-ui-modal::backdrop {
  background: transparent;
}
.cr-ui-modal.hidden {
  display: none !important;
}
.cr-ui-modal-card {
  width: min(440px, calc(100vw - 28px));
  border: 1px solid color-mix(in srgb, var(--accent, #facc15) 52%, var(--border, #334155) 48%);
  border-radius: 18px;
  padding: 18px;
  background: color-mix(in srgb, var(--panel, #111827) 94%, #000 6%);
  color: var(--text, #f8fafc);
  box-shadow: 0 28px 80px rgba(0,0,0,.55), 0 0 24px color-mix(in srgb, var(--accent, #facc15) 18%, transparent);
}
.cr-ui-modal-card h3 {
  margin: 0 0 8px;
  font-size: 20px;
}
.cr-ui-modal-card p {
  color: var(--muted, #cbd5e1);
  line-height: 1.45;
  white-space: pre-line;
}
.cr-ui-modal-card textarea {
  width: 100%;
  margin: 6px 0 14px;
  min-height: 92px;
}

@media (max-width: 768px) {
  html,
  body {
    min-height: 100%;
    height: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body {
    overscroll-behavior-y: auto;
    touch-action: pan-y;
  }
  body.dashboard-active #dashboard {
    min-height: auto;
    overflow: visible;
  }

  .mobile-fieldbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #mobileNewTaskButton,
  .command-nav #newTaskButton {
    display: none !important;
  }

  dialog.task-dialog,
  #taskDialog,
  dialog.task-dialog:not(.help-dialog),
  .account-dialog,
  .custom-theme-dialog,
  .delete-custom-theme-dialog,
  .custom-color-dialog,
  .invite-dialog,
  .admin-edit-account-dialog,
  .approval-gate-dialog,
  #programPanel.program-modal-panel,
  #switchProgramsPanel.program-modal-panel,
  .program-review-panel {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  #programPanel.program-modal-panel,
  #switchProgramsPanel.program-modal-panel,
  .program-review-panel {
    z-index: 950;
  }

  .account-subsection .dashboard-access-grid + .button-row.right {
    margin-top: 18px;
    justify-content: stretch;
  }
  .account-subsection .dashboard-access-grid + .button-row.right #saveDashboardUsesButton {
    width: 100%;
    min-width: 0;
  }

  .cr-ui-modal {
    align-items: end;
    padding: max(12px, env(safe-area-inset-top)) var(--mobile-edge-right) var(--mobile-bottom) var(--mobile-edge);
  }
  .cr-ui-modal-card {
    width: 100%;
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  .mobile-fieldbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* v.058 custom delete-symbol picker polish and OpenMoji attribution */
.trash-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.task-delete-symbol-img,
.preview-delete-symbol-img,
.custom-theme-delete-symbol-img,
.delete-symbol-option-img {
  display: block;
  width: 1em;
  height: 1em;
  object-fit: contain;
  pointer-events: none;
}
.task-delete-symbol-img {
  width: 28px;
  height: 28px;
}
.custom-theme-symbol-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: color-mix(in srgb, var(--panel) 84%, #000 16%);
  border: 1px solid color-mix(in srgb, var(--border) 72%, var(--accent) 28%);
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 10px;
}
.custom-theme-symbol-row:hover,
.custom-theme-symbol-row:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.custom-theme-symbol-row span:first-child {
  display: grid;
  gap: 3px;
}
.custom-theme-symbol-row small {
  color: var(--muted);
  font-weight: 500;
}
.custom-theme-delete-symbol-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 2px solid color-mix(in srgb, var(--accent) 70%, var(--text) 30%);
  background: color-mix(in srgb, var(--panel2) 78%, #000 22%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), 0 0 18px color-mix(in srgb, var(--accent) 24%, transparent);
}
.custom-theme-delete-symbol-img {
  width: 34px;
  height: 34px;
}
.preview-task-title-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}
.preview-task-title-row strong {
  font-size: 20px;
  line-height: 1.25;
}
.preview-delete-trash-button {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-width: 42px;
  width: 42px !important;
  height: 42px;
  min-height: 42px;
  padding: 0 !important;
  border-radius: 0;
  background: color-mix(in srgb, var(--accent) 42%, var(--panel2) 58%) !important;
  border: 1px solid var(--accent) !important;
  color: var(--text) !important;
}
.preview-delete-symbol-slot {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
}
.preview-delete-symbol-img {
  width: 28px;
  height: 28px;
}
.delete-symbol-dialog {
  width: min(1060px, calc(100vw - 24px)) !important;
  height: min(852px, calc(100dvh - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  padding: 14px !important;
  overflow: hidden !important;
}
.delete-symbol-dialog #deleteSymbolForm {
  display: grid;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto auto;
  gap: 10px;
  height: 100%;
  max-height: none;
  min-width: 0;
  overflow: hidden;
}
.openmoji-credit {
  margin: -2px 0 0;
  font-size: 13px;
}
.openmoji-credit a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.delete-symbol-search-field {
  display: grid;
  gap: 6px;
  margin: 0 !important;
  font-weight: 800;
}
.delete-symbol-search-field input {
  min-height: 46px;
  font-size: 16px;
}
.delete-symbol-status {
  margin: 0;
  min-height: 20px;
}
.delete-symbol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  grid-auto-rows: 78px;
  align-content: start;
  gap: 10px;
  min-height: 0;
  height: 100%;
  overflow: auto;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, var(--accent) 28%);
  background: color-mix(in srgb, var(--panel) 88%, #000 12%);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.delete-symbol-option {
  min-width: 0;
  min-height: 0;
  height: 78px;
  padding: 10px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, var(--accent) 28%);
  background: color-mix(in srgb, var(--panel2) 88%, #000 12%);
  color: var(--text);
}
.delete-symbol-option:hover,
.delete-symbol-option:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.delete-symbol-option.selected {
  border-color: var(--accent);
  background: radial-gradient(circle at top, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--panel2) 88%, #000 12%) 72%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 74%, var(--text) 26%), 0 0 24px color-mix(in srgb, var(--accent) 36%, transparent);
}
.delete-symbol-option-img {
  width: 36px;
  height: 36px;
}
.delete-symbol-option span {
  display: none;
}
.delete-symbol-option.selected span {
  display: none;
}
.delete-symbol-empty {
  grid-column: 1 / -1;
}
@media (max-width: 820px), (max-height: 640px) {
  .delete-symbol-dialog {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    padding: calc(12px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px)) !important;
    overflow: hidden !important;
  }
  .delete-symbol-dialog #deleteSymbolForm {
    height: calc(100vh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: none;
    overflow: hidden;
  }
  .delete-symbol-grid {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    grid-auto-rows: 68px;
    max-height: none;
    min-height: 0;
  }
  .delete-symbol-option {
    height: 68px;
  }
  .delete-symbol-option-img {
    width: 32px;
    height: 32px;
  }
}


/* v.061 mobile dashboard control cleanup
   Remove the duplicate Dashboard Tasks Home/Work switch and put New Task back in the mobile quick bar. */
#dashboardBucketToggle {
  display: none !important;
}

/* v.119: the installed app uses its persistent app-shell menu. Browser navigation is unchanged. */
html.cr-native-app #dashboardNav,
body.cr-native-app #dashboardNav {
  display: none !important;
}

/* v.121: retain the compact Work/Home switch in the app, but move every other
   website navigation action to the app-shell button. */
html.cr-native-app #mobileFieldbar,
body.cr-native-app #mobileFieldbar {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
}
html.cr-native-app #mobileFieldbar > button,
body.cr-native-app #mobileFieldbar > button {
  display: none !important;
}
html.cr-native-app #mobileWorkDashboardButton,
html.cr-native-app #mobileHomeDashboardButton,
body.cr-native-app #mobileWorkDashboardButton,
body.cr-native-app #mobileHomeDashboardButton,
html.cr-native-app #mobileShoppingSurfaceButton:not(.hidden),
body.cr-native-app #mobileShoppingSurfaceButton:not(.hidden) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
html.cr-native-app #mobileShoppingSurfaceButton.hidden,
body.cr-native-app #mobileShoppingSurfaceButton.hidden {
  display: none !important;
}

@media (max-width: 768px) {
  .mobile-fieldbar {
    grid-template-columns: .8fr .8fr 1fr .78fr !important;
  }
  #mobileNewTaskButton {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  #taskPanel .task-head-actions #newTaskButton2 {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .mobile-fieldbar {
    grid-template-columns: .78fr .78fr 1fr .72fr !important;
  }
}

/* v.063 persistent safety and cookie notices */
:root {
  --cr-cui-banner-height: 0px;
  --cr-cookie-notice-height: 0px;
}
body.cr-cui-visible {
  padding-top: calc(var(--cr-cui-banner-height, 0px) + env(safe-area-inset-top, 0px));
}
body.cr-cookie-visible {
  padding-bottom: calc(var(--cr-cookie-notice-height, 0px) + env(safe-area-inset-bottom, 0px));
}
.cr-cui-banner {
  position: fixed !important;
  top: env(safe-area-inset-top, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 20000 !important;
}
.cookie-notice {
  position: fixed !important;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 19950 !important;
}
@media (max-width: 768px) {
  .cookie-notice {
    max-height: min(34vh, 220px);
    overflow: auto;
  }
}

/* v.064 mobile delete-symbol picker action order
   On phones, keep the commit action closest to the symbol grid and move Cancel below it. */
@media (max-width: 768px) {
  .delete-symbol-dialog .button-row.right {
    display: flex;
    flex-direction: column;
  }
  .delete-symbol-dialog #setDeleteSymbolButton {
    order: 1;
  }
  .delete-symbol-dialog #cancelDeleteSymbolButton {
    order: 2;
  }
}

@media (max-width: 760px) {
  .instatheme-row { grid-template-columns: 1fr; }
  .instatheme-row button { width: 100%; }
}

/* v.069 queued feature batch */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:768px){
  .cr-cui-banner{top:env(safe-area-inset-top,0px)!important;margin-top:0!important;border-radius:0 0 16px 16px;z-index:2147483000}
  body.cr-cui-visible{padding-top:var(--cr-cui-banner-height,0px)}
  .mobile-fieldbar{grid-template-columns:repeat(6,minmax(0,1fr));gap:.35rem}
  .mobile-fieldbar button{font-size:.78rem;padding:.55rem .35rem;min-height:42px}
}
#taskPanel{background:transparent;border-color:transparent;box-shadow:none;padding-left:0;padding-right:0}
#taskPanel>.section-head{padding:0 0 .35rem 0;margin-bottom:.35rem}
#taskPanel .task-section{background:var(--panel-bg,rgba(255,255,255,.08));border:1px solid var(--border-color,rgba(255,255,255,.16));border-radius:18px;padding:1rem;margin-bottom:1rem;box-shadow:0 16px 34px rgba(0,0,0,.18)}
#taskPanel .task-section h4{font-size:1.15rem;margin-bottom:.75rem}
.work-hours-day-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.4rem;margin:.7rem 0}
.work-hours-day-grid label{display:flex;align-items:center;justify-content:center;gap:.25rem;border:1px solid var(--border-color,rgba(255,255,255,.18));border-radius:12px;padding:.55rem .25rem;background:rgba(255,255,255,.05);cursor:pointer}
.work-hours-day-grid input{width:20px;height:20px}.work-hours-time-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-billing-panel{margin-top:1rem}.billing-status-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.5rem}.billing-paid{border-color:rgba(56,189,248,.55)}.billing-unpaid{border-color:rgba(248,113,113,.65)}.billing-delinquent-warning{margin:0 0 1rem 0;border:1px solid rgba(248,113,113,.75);background:rgba(127,29,29,.22);color:var(--text-color,#fff);border-radius:16px;padding:1rem;box-shadow:0 18px 40px rgba(127,29,29,.22)}
.custom-theme-color-row{touch-action:none;user-select:none}.custom-theme-color-row.drag-ready,.custom-theme-color-row.drop-target{outline:2px solid var(--accent-color,#fbbf24);box-shadow:0 0 0 4px rgba(251,191,36,.18)}.custom-theme-drag-ghost{position:fixed;z-index:2147483600;pointer-events:none;width:46px;height:46px;border-radius:14px;border:2px solid rgba(255,255,255,.85);box-shadow:0 12px 30px rgba(0,0,0,.35);opacity:.72;transform:translate(-50%,-50%)}
.calendar-control-grid{grid-template-columns:120px minmax(160px,1fr)}.calendar-scope-box{border:1px solid var(--border-color,rgba(255,255,255,.16));background:rgba(255,255,255,.05);border-radius:16px;padding:1rem;margin:.75rem 0}.compact-check-row{gap:.75rem}.compact-checkbox-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.4rem;margin-top:.5rem}.calendar-output{margin-top:1rem;max-height:60vh;overflow:auto}.calendar-month{break-inside:avoid;margin-bottom:1.25rem}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:.35rem}.calendar-day,.calendar-head{border:1px solid var(--border-color,rgba(255,255,255,.14));border-radius:10px;min-height:92px;padding:.45rem;background:rgba(255,255,255,.04)}.calendar-head{min-height:auto;text-align:center;font-weight:700}.calendar-date{font-weight:700;margin-bottom:.3rem}.calendar-task-chip{border-left:4px solid var(--accent-color,#38bdf8);border-radius:8px;padding:.35rem;margin:.25rem 0;background:rgba(255,255,255,.08);font-size:.82rem}.calendar-task-chip small{display:block;opacity:.8}.calendar-print-actions{margin:.75rem 0}.calendar-workcenter-options{margin-top:.75rem}
@media print{body>*:not(main),.topbar,.mobile-fieldbar,.command-nav,.cookie-notice,.cr-cui-banner{display:none!important}.calendar-view-dialog,.calendar-view-dialog[open]{display:block!important;position:static!important;inset:auto!important;max-width:none!important;width:100%!important;border:0!important;box-shadow:none!important;background:#fff!important;color:#111!important}.calendar-view-dialog form{max-height:none!important}.calendar-output{max-height:none!important;overflow:visible!important}.calendar-control-grid,.calendar-scope-box,.calendar-view-dialog .dialog-head,.calendar-view-dialog .button-row,.calendar-view-dialog p.muted{display:none!important}.calendar-grid{grid-template-columns:repeat(7,1fr)}.calendar-day,.calendar-head{border-color:#bbb!important;background:#fff!important;color:#111!important}.calendar-task-chip{background:#f2f2f2!important;color:#111!important}}
@media (max-width:640px){.calendar-grid{grid-template-columns:1fr}.calendar-head{display:none}.calendar-day{min-height:auto}.work-hours-day-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.calendar-control-grid,.work-hours-time-grid{grid-template-columns:1fr}}


/* v.070 Calendar View toggle-card polish: avoid the recurring tiny-checkbox ambiguity. */
#calendarViewDialog .calendar-toggle-list {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: stretch;
}
#calendarViewDialog .compact-checkbox-list.calendar-toggle-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
#calendarViewDialog .calendar-toggle-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .7rem;
  min-width: 130px;
  min-height: 68px;
  padding: .75rem .9rem;
  border: 1px solid var(--border-color, var(--border));
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  cursor: pointer;
  user-select: none;
}
#calendarViewDialog .calendar-toggle-card input[type="checkbox"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
#calendarViewDialog .calendar-toggle-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 36px;
  border-radius: 999px;
  border: 2px solid rgba(203,213,225,.55);
  background: rgba(15,23,42,.88);
  color: var(--muted-text, #cbd5e1);
  font-weight: 900;
  font-size: .78rem;
  letter-spacing: .04em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
#calendarViewDialog .calendar-toggle-state::after { content: "OFF"; }
#calendarViewDialog .calendar-toggle-card:has(input[type="checkbox"]:checked) {
  border-color: var(--accent-color, #facc15);
  background: color-mix(in srgb, var(--accent-color, #facc15) 18%, rgba(255,255,255,.06));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color, #facc15) 35%, transparent), 0 0 18px color-mix(in srgb, var(--accent-color, #facc15) 28%, transparent);
}
#calendarViewDialog .calendar-toggle-card:has(input[type="checkbox"]:checked) .calendar-toggle-state {
  border-color: color-mix(in srgb, var(--accent-color, #facc15) 85%, white);
  background: linear-gradient(135deg, var(--accent-color, #facc15), color-mix(in srgb, var(--accent-color, #facc15) 55%, #22c55e));
  color: #07111f;
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent-color, #facc15) 50%, transparent);
}
#calendarViewDialog .calendar-toggle-card:has(input[type="checkbox"]:checked) .calendar-toggle-state::after { content: "ON"; }
#calendarViewDialog .calendar-toggle-card:has(input[type="checkbox"]:focus-visible) {
  outline: 3px solid var(--focus, #60a5fa);
  outline-offset: 3px;
}
#calendarViewDialog .calendar-toggle-label {
  font-weight: 800;
  color: var(--text-color, var(--text));
}
@media (max-width: 640px) {
  #calendarViewDialog .calendar-toggle-card {
    min-height: 60px;
    min-width: min(100%, 145px);
    padding: .65rem .75rem;
  }
  #calendarViewDialog .calendar-toggle-state { width: 56px; height: 34px; }
}

/* v.073 blocking account approval gate */
#pendingRequestsBlock.hidden { display: none !important; }
.approval-gate-dialog::backdrop { background: rgba(2, 6, 18, 0.82); backdrop-filter: blur(2px); }
.approval-gate-dialog .mini-card { border-width: 2px; }
.approval-gate-dialog .button-row button { min-width: 120px; }

/* v.089 email and password reset screens */
.auth-link-row {
  margin: 0.85rem 0 0;
  text-align: center;
  font-size: 0.95rem;
}
.auth-link-row a {
  color: var(--accent-color, #38bdf8);
  font-weight: 700;
}
.auth-page-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.auth-card {
  width: min(520px, 100%);
  border: 1px solid var(--border-color, rgba(255,255,255,.16));
  border-radius: 22px;
  background: var(--panel-bg, rgba(15,23,42,.9));
  box-shadow: var(--shadow, 0 24px 70px rgba(0,0,0,.28));
  padding: 1.5rem;
}
.auth-card h1 {
  margin-top: 0;
}
.auth-card .button-row {
  margin-top: 1rem;
}
.auth-card .notice {
  margin: .75rem 0;
}
.compact-check {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .35rem;
}


/* v.089 account email alert checkbox polish
   This one uses a dedicated visual box so the check mark stays centered in browsers that do not reliably center pseudo-elements on native checkbox inputs. */
.account-email-alert-toggle {
  position: relative;
  user-select: none;
}
.account-email-alert-toggle input[type="checkbox"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  min-inline-size: 1px;
  min-block-size: 1px;
  opacity: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}
.account-email-alert-toggle .checkbox-visual {
  inline-size: 24px;
  block-size: 24px;
  min-inline-size: 24px;
  min-block-size: 24px;
  border-radius: 8px;
  border: 2px solid color-mix(in srgb, var(--muted, #cbd5e1) 78%, transparent 22%);
  background: color-mix(in srgb, var(--bg, #0f172a) 75%, #000 25%);
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 0 1px color-mix(in srgb, var(--border, #334155) 35%, transparent 65%);
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.account-email-alert-toggle .checkbox-visual::after {
  content: "";
  inline-size: 11px;
  block-size: 6px;
  border-left: 3px solid var(--bg, #0f172a);
  border-bottom: 3px solid var(--bg, #0f172a);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform .12s ease;
}
.account-email-alert-toggle input[type="checkbox"]:checked + .checkbox-visual {
  background: linear-gradient(135deg, var(--accent, #facc15), var(--accent2, #38bdf8));
  border-color: var(--accent, #facc15);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #facc15) 55%, transparent 45%), 0 0 14px color-mix(in srgb, var(--accent, #facc15) 24%, transparent 76%);
}
.account-email-alert-toggle input[type="checkbox"]:checked + .checkbox-visual::after {
  transform: rotate(-45deg) scale(1);
}
.account-email-alert-toggle:hover .checkbox-visual {
  border-color: var(--accent, #facc15);
  transform: translateY(-1px);
}
.account-email-alert-toggle input[type="checkbox"]:focus-visible + .checkbox-visual {
  outline: 2px solid var(--text, #f8fafc);
  outline-offset: 3px;
}
@media (max-width: 760px) {
  .account-email-alert-toggle .checkbox-visual {
    inline-size: 28px;
    block-size: 28px;
    min-inline-size: 28px;
    min-block-size: 28px;
  }
}

/* v.092 password visibility buttons */
.password-visibility-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.password-visibility-wrap input {
  padding-right: 74px;
}
.password-toggle-button {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 56px;
  height: calc(100% - 10px);
  padding: 0 10px;
  border-radius: 8px;
  font-size: 0.86rem;
  line-height: 1;
  background: color-mix(in srgb, var(--panel2, #1e293b) 82%, #ffffff 18%);
  border: 1px solid color-mix(in srgb, var(--border, #475569) 80%, #ffffff 20%);
  color: var(--text, #f8fafc);
  box-shadow: none;
  user-select: none;
  touch-action: manipulation;
}
.password-toggle-button:hover,
.password-toggle-button:focus-visible {
  filter: brightness(1.12);
  border-color: var(--accent, #38bdf8);
}
.auth-card .password-visibility-wrap {
  margin-top: 0;
}


/* v.093 site-wide native checkbox checkmark alignment
   Native checkbox pseudo-elements can render their generated checkmark outside the box in some browsers.
   Use a centered SVG background for standard checkbox inputs instead. Keep custom visual toggles/pills untouched. */
input[type="checkbox"]:not(.custom-theme-delete-input):not(.account-email-alert-toggle input[type="checkbox"]):not(.dashboard-access-grid .dashboard-use-card input[type="checkbox"]):not(#calendarViewDialog .calendar-toggle-card input[type="checkbox"]) {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
}

input[type="checkbox"]:not(.custom-theme-delete-input):not(.account-email-alert-toggle input[type="checkbox"]):not(.dashboard-access-grid .dashboard-use-card input[type="checkbox"]):not(#calendarViewDialog .calendar-toggle-card input[type="checkbox"])::after {
  content: none !important;
  display: none !important;
}

input[type="checkbox"]:not(.custom-theme-delete-input):not(.account-email-alert-toggle input[type="checkbox"]):not(.dashboard-access-grid .dashboard-use-card input[type="checkbox"]):not(#calendarViewDialog .calendar-toggle-card input[type="checkbox"]):checked {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.7l4.25 4.25L19.25 7' fill='none' stroke='%23020617' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--accent, #facc15), var(--accent2, #38bdf8));
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 70% 70%, cover;
}

/* v.102 Shared Lists / Home Shopping Lists */
.shopping-panel {
  border-color: color-mix(in srgb, var(--accent, #38bdf8) 42%, var(--border, #334155));
}
.shopping-head .shopping-top-actions { align-items: center; }
.shopping-create-box { margin-bottom: 1rem; }
.shopping-create-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.75rem;
  align-items: end;
}
.shopping-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.35fr);
  gap: 1rem;
  align-items: start;
}
.shopping-overview {
  display: grid;
  gap: 0.75rem;
}
.shopping-list-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.65rem;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--border, #334155) 70%, transparent);
}
.shopping-list-card.active {
  border-color: var(--accent, #38bdf8);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #38bdf8) 55%, transparent), 0 0 18px color-mix(in srgb, var(--accent, #38bdf8) 18%, transparent);
}
.shopping-list-card-main strong,
.shopping-detail-head h4 {
  overflow-wrap: anywhere;
}
.shopping-list-actions,
.shopping-item-actions,
.shopping-completed-head,
.shopping-detail-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}
.shopping-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(5rem, 8rem) auto;
  gap: 0.6rem;
  align-items: center;
  margin: 0.75rem 0;
}
.shopping-items-block {
  margin-top: 1rem;
}
.shopping-items-block h5,
.shopping-completed-head h5 {
  margin: 0.25rem 0 0.65rem;
  font-size: 0.98rem;
}
.shopping-items-list {
  display: grid;
  gap: 0.55rem;
}
.shopping-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 0.75rem;
  align-items: center;
  padding: 0.68rem 0.72rem;
  border: 1px solid color-mix(in srgb, var(--border, #334155) 72%, transparent);
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--panel2, #111827) 82%, transparent);
}
.shopping-check-label {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  min-width: 0;
  font-weight: 700;
}
.shopping-check-label span {
  overflow-wrap: anywhere;
}
.shopping-item-row.completed .shopping-check-label span {
  text-decoration: line-through;
  opacity: 0.72;
}
.shopping-item-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.88rem;
}
.shopping-empty,
.compact-empty {
  padding: 0.85rem;
}

.shopping-add-row {
  grid-template-columns: minmax(0, 1fr) auto;
}
.shopping-category-group {
  display: grid;
  gap: 0.5rem;
  padding: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--border, #334155) 55%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--panel, #0f172a) 62%, transparent);
}
.shopping-category-group.needs-sorting {
  border-color: color-mix(in srgb, var(--warning, #f59e0b) 70%, var(--border, #334155));
}
.shopping-category-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0.15rem;
}
.shopping-category-heading strong {
  color: var(--accent, #38bdf8);
}
.shopping-category-select {
  min-width: 11.5rem;
  max-width: 100%;
  padding: 0.48rem 0.62rem;
  border-radius: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--border, #334155) 82%, transparent);
  background: var(--input-bg, #020617);
  color: var(--text, #e5e7eb);
  font-weight: 700;
}
.shopping-item-row.needs-sorting-item {
  border-color: color-mix(in srgb, var(--warning, #f59e0b) 62%, var(--border, #334155));
}

@media (max-width: 820px) {
  .shopping-layout,
  .shopping-create-row,
  .shopping-add-row {
    grid-template-columns: 1fr;
  }
  .shopping-list-actions,
  .shopping-item-actions {
    justify-content: flex-start;
  }
  .shopping-category-select {
    width: 100%;
  }
  .shopping-item-row {
    grid-template-columns: 1fr;
  }
}

/* v.106 Shopping usability pass: compact rows, planner/shopper modes, and mobile-first shopper view */
.shopping-create-row {
  align-items: end;
}
.shopping-create-row label {
  margin: 0;
}
.shopping-create-row > button {
  min-height: 3.25rem;
  align-self: end;
}
.shopping-detail-head {
  align-items: center;
}
.shopping-mode-switch {
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.22rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border, #334155) 70%, transparent);
  background: color-mix(in srgb, var(--panel2, #111827) 62%, transparent);
}
.shopping-mode-switch button {
  border-radius: 999px;
  min-height: 2.25rem;
  padding-inline: 0.8rem;
}
.shopping-mode-switch button.active {
  background: linear-gradient(135deg, var(--accent, #facc15), var(--accent2, #38bdf8));
  color: var(--bg, #020617);
  border-color: var(--accent, #facc15);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #facc15) 45%, transparent), 0 0 14px color-mix(in srgb, var(--accent, #facc15) 20%, transparent);
}
.shopping-category-group {
  gap: 0.28rem;
  padding: 0.42rem;
  border-radius: 0.75rem;
}
.shopping-category-heading {
  min-height: 1.5rem;
  font-size: 0.92rem;
}
.shopping-items-list {
  gap: 0.36rem;
}
.shopping-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.32rem 0.55rem;
  align-items: center;
  padding: 0.34rem 0.48rem;
  min-height: 3rem;
  border-radius: 0.65rem;
}
.shopping-check-label,
.shopping-plan-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  font-weight: 800;
  line-height: 1.18;
}
.shopping-check-label input[type="checkbox"] {
  flex: 0 0 auto;
  inline-size: 1.65rem;
  block-size: 1.65rem;
  min-inline-size: 1.65rem;
  min-block-size: 1.65rem;
  margin: 0;
}
.shopping-item-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.shopping-item-actions {
  gap: 0.35rem;
  justify-content: flex-end;
}
.shopping-item-actions button.small,
.shopping-item-actions select {
  min-height: 2.25rem;
}
.shopping-category-select {
  min-width: 9.5rem;
  padding: 0.34rem 0.52rem;
  border-radius: 0.55rem;
}
.shopping-item-row.completed {
  opacity: 0.78;
  background: color-mix(in srgb, var(--panel2, #111827) 58%, #000 42%);
  border-style: dashed;
}
.shopping-item-row.completed .shopping-item-text {
  text-decoration-line: line-through;
  text-decoration-thickness: 0.22em;
  text-decoration-color: color-mix(in srgb, var(--accent, #facc15) 85%, var(--text, #f8fafc));
  opacity: 0.62;
}
.shopping-completed-tag {
  flex: 0 0 auto;
  font-size: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--accent, #facc15) 55%, transparent);
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
  color: var(--accent, #facc15);
}
.shopping-mode-shopper .shopping-add-row.shopper-muted-add {
  opacity: 0.72;
}
.shopping-mode-shopper .shopping-category-heading .tiny {
  display: none;
}
.shopping-mode-shopper .shopping-item-row {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 3.6rem;
  padding: 0.42rem 0.52rem;
}
.shopping-mode-shopper .shopping-check-label {
  font-size: 1.05rem;
}
.shopping-mode-shopper .shopping-check-label input[type="checkbox"] {
  inline-size: 2.05rem;
  block-size: 2.05rem;
  min-inline-size: 2.05rem;
  min-block-size: 2.05rem;
}
.shopping-mode-shopper .shopping-shopper-actions button {
  min-height: 2.35rem;
}

@media (max-width: 820px) {
  .shopping-detail-card {
    padding: 0.72rem;
  }
  .shopping-detail-head {
    gap: 0.6rem;
  }
  .shopping-mode-switch {
    width: 100%;
  }
  .shopping-mode-switch button {
    flex: 1 1 0;
  }
  .shopping-add-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .shopping-create-row {
    grid-template-columns: 1fr;
  }
  .shopping-create-row > button {
    width: 100%;
  }
  .shopping-category-group {
    padding: 0.35rem;
    gap: 0.24rem;
  }
  .shopping-category-heading {
    font-size: 0.9rem;
    padding: 0 0.1rem;
  }
  .shopping-item-row,
  .shopping-row-planner,
  .shopping-row-shopper {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.34rem 0.42rem;
    min-height: 2.85rem;
  }
  .shopping-row-planner .shopping-item-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    width: 100%;
  }
  .shopping-row-planner .shopping-category-select {
    width: 100%;
    min-width: 0;
  }
  .shopping-mode-shopper .shopping-add-row {
    display: none;
  }
  .shopping-mode-shopper .shopping-add-hint {
    margin-top: 0.2rem;
  }
  .shopping-mode-shopper .shopping-item-row {
    grid-template-columns: minmax(0, 1fr);
    min-height: 3.35rem;
    padding: 0.48rem 0.48rem;
  }
  .shopping-mode-shopper .shopping-check-label {
    font-size: 1.08rem;
    gap: 0.7rem;
  }
  .shopping-mode-shopper .shopping-check-label input[type="checkbox"] {
    inline-size: 2.35rem;
    block-size: 2.35rem;
    min-inline-size: 2.35rem;
    min-block-size: 2.35rem;
  }
  .shopping-mode-shopper .shopping-category-group {
    border-radius: 0.7rem;
  }
  .shopping-mode-shopper .shopping-completed-head {
    align-items: center;
  }
}

@media (max-width: 520px) {
  .shopping-panel {
    padding-inline: 0.75rem;
  }
  .shopping-row-planner .shopping-item-actions {
    grid-template-columns: 1fr 1fr;
  }
  .shopping-row-planner .shopping-category-select {
    grid-column: 1 / -1;
  }
}

/* v.113 task notification-rule editor */
.task-notification-panel {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--border, #334155) 78%, var(--accent, #38bdf8) 22%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel2, #1e293b) 78%, transparent 22%);
}
.task-notification-panel legend {
  padding: 0 .45rem;
  font-weight: 800;
}
.task-notification-master,
.task-notification-preset-grid .checkbox-label {
  display: flex;
  gap: .65rem;
  align-items: center;
}
.task-notification-help {
  margin: .55rem 0 .8rem;
}
.task-notification-options {
  display: grid;
  gap: .8rem;
}
.task-notification-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem 1rem;
}
.task-notification-custom {
  margin: 0;
}
.task-notification-state {
  margin: 0;
}
@media (max-width: 640px) {
  .task-notification-preset-grid { grid-template-columns: 1fr; }
}


/* v.123 Home shopping surface toggle and live-list polish */
.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.home-dashboard-sub-switcher {
  display: inline-flex;
  margin-top: 0.35rem;
  margin-left: calc(8.5rem + 0.7rem);
  padding: 0.22rem;
  border: 1px solid color-mix(in srgb, var(--border, #334155) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel2, #111827) 70%, transparent);
  align-items: center;
}
.home-shopping-toggle-button {
  border-radius: 999px;
  opacity: 0.58;
  filter: saturate(0.7);
  background: color-mix(in srgb, var(--panel2, #111827) 78%, #000 22%);
  border-color: color-mix(in srgb, var(--border, #334155) 82%, transparent);
  color: var(--muted, #cbd5e1);
  box-shadow: none;
}
.home-shopping-toggle-button.active {
  opacity: 1;
  filter: none;
  background: linear-gradient(135deg, var(--accent, #facc15), var(--accent2, #38bdf8));
  color: var(--bg, #020617);
  border-color: var(--accent, #facc15);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #facc15) 45%, transparent), 0 0 18px color-mix(in srgb, var(--accent, #facc15) 28%, transparent);
}
body.shopping-surface-active #shoppingPanel {
  scroll-margin-top: 1rem;
}

@media (max-width: 720px) {
  .home-dashboard-sub-switcher {
    display: flex;
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
    border-radius: 1rem;
  }
  .home-dashboard-sub-switcher .home-shopping-toggle-button {
    width: 100%;
  }
}

@media (max-width: 820px) {
  #mobileShoppingSurfaceButton.home-shopping-toggle-button {
    min-width: 0;
  }
  .mobile-fieldbar #mobileShoppingSurfaceButton.active {
    background: linear-gradient(135deg, var(--accent, #facc15), var(--accent2, #38bdf8));
    color: var(--bg, #020617);
    border-color: var(--accent, #facc15);
  }
}


/* v.125 Shopping group/list language and global planner/shopper controls */
.shopping-top-actions {
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.shopping-head .shopping-mode-switch {
  flex: 0 0 auto;
}
.shopping-detail-head {
  justify-content: flex-start;
}
.shopping-detail-head h4 {
  margin-bottom: 0;
}
.shopping-list-card-main {
  min-width: 0;
}
.shopping-list-card-main strong {
  display: block;
  line-height: 1.2;
}
.shopping-list-card .shopping-list-actions {
  margin-top: 0.1rem;
}
@media (max-width: 720px) {
  .shopping-head {
    align-items: flex-start;
  }
  .shopping-top-actions {
    width: 100%;
    justify-content: stretch;
  }
  .shopping-head .shopping-mode-switch {
    width: 100%;
  }
  .shopping-head .shopping-mode-switch button,
  .shopping-top-actions > button {
    flex: 1 1 0;
  }
}


/* v.126 Shopping mobile/app cleanup */
/* Only the main Shopping Lists header owns Planner/Shopper mode. Hide any older per-list mode switch if stale markup remains cached or injected. */
#shoppingListDetail .shopping-mode-switch {
  display: none !important;
}
/* Remove legacy active/completed count text from list cards on all screen sizes, including mobile/app cached views. */
.shopping-list-card-main > p.muted,
.shopping-list-card .shopping-list-counts,
.shopping-list-card .shopping-counts,
.shopping-list-card .shopping-list-meta {
  display: none !important;
}
@media (max-width: 820px) {
  .mobile-fieldbar #mobileShoppingSurfaceButton.home-shopping-toggle-button:not(.hidden) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* v.129 shopping list selection, mobile checkbox alignment, and open-scroll polish */
.shopping-list-card.active,
.shopping-list-card[aria-current="true"] {
  position: relative;
  border-width: 3px !important;
  border-color: var(--accent, #facc15) !important;
  outline: 2px solid color-mix(in srgb, var(--accent, #facc15) 62%, transparent) !important;
  outline-offset: 2px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent, #facc15) 16%, transparent), transparent 42%),
    color-mix(in srgb, var(--panel2, #111827) 88%, var(--accent, #facc15) 12%) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #facc15) 76%, transparent), 0 0 24px color-mix(in srgb, var(--accent, #facc15) 30%, transparent) !important;
}
.shopping-list-card.active::after,
.shopping-list-card[aria-current="true"]::after {
  content: "Selected";
  position: absolute;
  top: 0.38rem;
  right: 0.48rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent, #facc15), var(--accent2, #38bdf8));
  color: var(--bg, #020617);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.shopping-list-card.active .shopping-list-card-main,
.shopping-list-card[aria-current="true"] .shopping-list-card-main {
  padding-right: 4.8rem;
}

.shopping-check-label {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: start !important;
  column-gap: 0.65rem !important;
  row-gap: 0 !important;
  width: 100%;
}
.shopping-check-label input[type="checkbox"] {
  grid-column: 1;
  grid-row: 1;
  align-self: center !important;
  justify-self: start !important;
  margin: 0 !important;
}
.shopping-check-label .shopping-item-text {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: 0;
}
.shopping-row-shopper,
.shopping-mode-shopper .shopping-item-row {
  align-items: center !important;
}

@media (max-width: 820px) {
  .shopping-row-shopper,
  .shopping-mode-shopper .shopping-item-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .shopping-mode-shopper .shopping-check-label {
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
  }
  .shopping-list-card.active::after,
  .shopping-list-card[aria-current="true"]::after {
    top: 0.32rem;
    right: 0.4rem;
  }
}


/* v.130 shopping mobile controls and category drag popup */
#homeDashboardSubSwitcher,
#homeShoppingSurfaceButton {
  display: none !important;
}
#topShoppingSurfaceButton.hidden,
#mobileShoppingSurfaceButton.hidden {
  display: none !important;
}
#topShoppingSurfaceButton.active,
#mobileShoppingSurfaceButton.active {
  background: linear-gradient(135deg, var(--accent, #facc15), var(--accent2, #38bdf8));
  color: var(--bg, #020617);
  border-color: var(--accent, #facc15);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #facc15) 55%, transparent), 0 0 16px color-mix(in srgb, var(--accent, #facc15) 22%, transparent);
}
.shopping-row-shopper > .shopping-check-label,
.shopping-mode-shopper .shopping-item-row > .shopping-check-label {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-auto-flow: column !important;
  align-items: center !important;
  justify-content: start !important;
  column-gap: 0.7rem !important;
  width: 100% !important;
}
.shopping-row-shopper > .shopping-check-label input[type="checkbox"],
.shopping-mode-shopper .shopping-item-row > .shopping-check-label input[type="checkbox"] {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: start !important;
}
.shopping-row-shopper > .shopping-check-label .shopping-item-text,
.shopping-mode-shopper .shopping-item-row > .shopping-check-label .shopping-item-text {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  min-width: 0 !important;
}
.shopping-category-popup-open {
  overflow: hidden;
}
.shopping-category-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(7px);
}
.shopping-category-popup {
  width: min(680px, 100%);
  max-height: min(86vh, 760px);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--accent, #facc15) 40%, var(--border, #334155));
  border-radius: 1rem;
  background: color-mix(in srgb, var(--panel, #0f172a) 96%, #000 4%);
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
  padding: 1rem;
}
.shopping-category-popup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.shopping-category-popup-head h4 {
  margin: 0 0 0.2rem;
}
.shopping-drag-tray {
  display: flex;
  justify-content: center;
  margin: 0.7rem 0 1rem;
}
.shopping-drag-chip {
  touch-action: none;
  user-select: none;
  cursor: grab;
  max-width: 100%;
  padding: 0.72rem 1rem;
  border: 2px solid var(--accent, #facc15);
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #facc15) 86%, #fff 14%), color-mix(in srgb, var(--accent2, #38bdf8) 78%, #fff 22%));
  color: var(--bg, #020617);
  font-weight: 900;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.shopping-drag-chip.dragging {
  cursor: grabbing;
  opacity: 0.92;
}
.shopping-category-drop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.55rem;
}
.shopping-category-drop-target {
  min-height: 3.15rem;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--border, #334155) 78%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--panel2, #111827) 84%, transparent);
  color: var(--text, #e5e7eb);
  font-weight: 850;
}
.shopping-category-drop-target span {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.72rem;
  color: var(--accent, #facc15);
}
.shopping-category-drop-target.current {
  border-color: var(--accent, #facc15);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #facc15) 45%, transparent);
}
.shopping-category-drop-target.drag-over,
.shopping-category-drop-target:hover,
.shopping-category-drop-target:focus-visible {
  border-color: var(--accent, #facc15);
  background: color-mix(in srgb, var(--accent, #facc15) 18%, var(--panel2, #111827));
  outline: 2px solid color-mix(in srgb, var(--accent, #facc15) 55%, transparent);
  outline-offset: 2px;
}
@media (max-width: 820px) {
  #mobileFieldbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #mobileNewTaskButton,
  #mobileCalendarViewButton,
  #mobileOutOfOfficeButton,
  #mobileNavToggle {
    grid-column: auto;
  }
  .shopping-category-popup-backdrop {
    align-items: flex-end;
    padding: 0.7rem;
  }
  .shopping-category-popup {
    max-height: 88vh;
    border-radius: 1rem 1rem 0.8rem 0.8rem;
    padding: 0.85rem;
  }
  .shopping-category-drop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }
  .shopping-category-drop-target {
    min-height: 2.85rem;
    padding-inline: 0.55rem;
    font-size: 0.92rem;
  }
}


/* v.131 shopping checked-item flow */
.shopping-detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}
.shopping-live-items-block {
  margin-top: 0.85rem;
}
.shopping-item-row.completed {
  opacity: 0.82;
  background: color-mix(in srgb, var(--panel2, #111827) 48%, #000 52%);
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent, #facc15) 55%, var(--border, #334155));
}
.shopping-item-row.completed .shopping-item-text {
  text-decoration-line: line-through;
  text-decoration-thickness: 0.24em;
  text-decoration-color: color-mix(in srgb, var(--accent, #facc15) 90%, var(--danger, #ef4444));
  opacity: 0.54;
}
.shopping-mode-shopper .shopping-item-row.completed .shopping-check-label {
  opacity: 0.82;
}
@media (max-width: 820px) {
  .shopping-detail-head {
    align-items: stretch;
  }
  .shopping-detail-actions {
    justify-content: stretch;
  }
  .shopping-detail-actions button {
    width: 100%;
  }
}

/* v.135 public splash page */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.topbar-logo {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(56, 189, 248, .28);
  box-shadow: 0 0 28px rgba(14, 165, 233, .12);
}

.landing-page {
  display: grid;
  gap: 24px;
  padding-bottom: 18px;
}

.landing-page h2,
.landing-page h3 {
  color: #fff;
}

.landing-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  min-height: min(720px, calc(100vh - 150px));
  padding: clamp(34px, 6vw, 78px);
  border: 1px solid rgba(103, 232, 249, .2);
  border-radius: 28px;
  background:
    radial-gradient(circle at 78% 22%, rgba(14, 165, 233, .17), transparent 34%),
    radial-gradient(circle at 4% 92%, rgba(193, 93, 18, .14), transparent 30%),
    linear-gradient(145deg, rgba(7, 17, 31, .98), rgba(13, 30, 51, .96));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .34);
}

.landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .23;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.landing-hero-copy,
.landing-hero-visual {
  position: relative;
  z-index: 1;
}

.landing-eyebrow {
  margin: 0 0 14px;
  color: #67e8f9;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.landing-hero h2 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(42px, 5.5vw, 76px);
  line-height: .99;
  letter-spacing: -.045em;
}

.landing-hero h2 span {
  color: #9bdff5;
}

.landing-lead {
  max-width: 760px;
  margin: 28px 0 0;
  color: #d5e1ef;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.62;
}

.landing-actions {
  margin-top: 30px;
}

button.landing-primary,
.button-link.landing-primary {
  border-color: #22d3ee;
  background: linear-gradient(135deg, #0891b2, #0369a1);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 32px rgba(8, 145, 178, .26);
}

.landing-contact {
  border-color: rgba(255, 255, 255, .19);
  background: rgba(255, 255, 255, .055);
}

.landing-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 27px;
  color: #b9cbe0;
  font-size: 13px;
  font-weight: 700;
}

.landing-proof span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.landing-proof span::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 12px rgba(34, 211, 238, .65);
}

.landing-hero-visual {
  display: grid;
  gap: 18px;
}

.landing-image-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(103, 232, 249, .2);
  border-radius: 24px;
  background: #020b17;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38), 0 0 70px rgba(14, 165, 233, .08);
}

.landing-image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 44px rgba(2, 6, 23, .45);
  pointer-events: none;
}

.landing-image-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.landing-hero blockquote {
  margin: 0;
  padding: 0 10px;
  color: #e8f6ff;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.45;
  font-weight: 700;
  text-align: center;
}

.landing-section,
.landing-rhythm,
.landing-principle,
.landing-final {
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(15, 26, 45, .94);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .2);
}

.landing-intro {
  padding: clamp(34px, 5vw, 62px);
  text-align: center;
}

.landing-intro h3 {
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.12;
  letter-spacing: -.025em;
}

.landing-intro > p:last-child {
  max-width: 850px;
  margin: 20px auto 0;
  color: #cbd7e7;
  font-size: 18px;
  line-height: 1.7;
}

.landing-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.landing-feature-card {
  position: relative;
  min-height: 300px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(29, 42, 61, .98), rgba(10, 22, 39, .98));
  box-shadow: 0 18px 45px rgba(0, 0, 0, .2);
}

.landing-feature-card::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, .1), transparent 68%);
}

.landing-card-number {
  display: inline-block;
  margin-bottom: 48px;
  color: #67e8f9;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .16em;
}

.landing-feature-card h3 {
  margin-bottom: 14px;
  font-size: 25px;
}

.landing-feature-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #c3d0e0;
  line-height: 1.68;
}

.landing-rhythm {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 46px;
  padding: clamp(34px, 5vw, 62px);
}

.landing-rhythm-copy h3,
.landing-principle h3,
.landing-final h3 {
  margin: 0;
  font-size: clamp(27px, 3vw, 43px);
  line-height: 1.12;
  letter-spacing: -.025em;
}

.landing-rhythm-copy > p:last-child,
.landing-final p {
  margin: 18px 0 0;
  color: #c3d0e0;
  font-size: 17px;
  line-height: 1.68;
}

.landing-steps {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: landing-step;
}

.landing-steps li {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 96px;
  padding: 20px 20px 20px 70px;
  border: 1px solid rgba(103, 232, 249, .13);
  border-radius: 17px;
  background: rgba(5, 15, 28, .55);
  counter-increment: landing-step;
}

.landing-steps li::before {
  content: counter(landing-step);
  position: absolute;
  left: 20px;
  top: 21px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(8, 145, 178, .2);
  color: #67e8f9;
  font-weight: 900;
}

.landing-steps strong {
  color: #fff;
  font-size: 17px;
}

.landing-steps span {
  color: #b8c8dc;
  line-height: 1.5;
}

.landing-principle {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(260px, .82fr);
  gap: 44px;
  align-items: center;
  padding: clamp(34px, 5vw, 62px);
  border-color: rgba(193, 93, 18, .45);
  background:
    radial-gradient(circle at 85% 20%, rgba(193, 93, 18, .12), transparent 38%),
    linear-gradient(135deg, rgba(24, 26, 34, .98), rgba(12, 23, 40, .98));
}

.landing-principle > p {
  margin: 0;
  padding: 23px;
  border-left: 3px solid #c15d12;
  color: #d4deea;
  font-size: 17px;
  line-height: 1.68;
  background: rgba(255, 255, 255, .025);
}

.landing-final {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: clamp(32px, 5vw, 54px);
}

.landing-final > div:first-child {
  max-width: 760px;
}

.landing-final-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.landing-signoff {
  margin: clamp(18px, 4vw, 38px) 0 clamp(8px, 2vw, 18px);
  color: #f4f8fc;
  font-size: clamp(30px, 5vw, 58px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  text-align: center;
  text-wrap: balance;
}

.landing-signoff::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: #c15d12;
}

.landing-footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 8px 2px;
  color: #8fa3bd;
  font-size: 13px;
}

.landing-footer a {
  color: #9bdff5;
  text-decoration: none;
}

@media (max-width: 980px) {
  .landing-hero,
  .landing-rhythm,
  .landing-principle {
    grid-template-columns: 1fr;
  }

  .landing-hero {
    min-height: auto;
  }

  .landing-hero-visual {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
  }

  .landing-feature-grid {
    grid-template-columns: 1fr;
  }

  .landing-feature-card {
    min-height: 0;
  }

  .landing-card-number {
    margin-bottom: 28px;
  }

  .landing-final {
    align-items: flex-start;
    flex-direction: column;
  }

  .landing-final-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .topbar {
    padding: 15px 18px;
  }

  .topbar-brand {
    align-items: center;
  }

  .topbar-logo {
    width: 44px;
    height: 44px;
    border-radius: 11px;
  }

  .topbar h1 {
    font-size: 21px;
  }

  .topbar p {
    font-size: 12px;
  }

  .topbar .badge {
    align-self: flex-start;
    padding: 6px 9px;
  }

  #homePage.landing-page {
    gap: 16px;
  }

  .landing-hero {
    gap: 32px;
    padding: 30px 22px;
    border-radius: 20px;
  }

  .landing-hero h2 {
    font-size: clamp(38px, 12vw, 54px);
  }

  .landing-lead {
    font-size: 17px;
    line-height: 1.58;
  }

  .landing-actions > * {
    width: 100%;
    text-align: center;
  }

  .landing-proof {
    display: grid;
    gap: 10px;
  }

  .landing-image-frame,
  .landing-section,
  .landing-feature-card,
  .landing-rhythm,
  .landing-principle,
  .landing-final {
    border-radius: 18px;
  }

  .landing-intro,
  .landing-rhythm,
  .landing-principle,
  .landing-final {
    padding: 28px 22px;
  }

  .landing-feature-card {
    padding: 26px 22px;
  }

  .landing-rhythm,
  .landing-principle {
    gap: 28px;
  }

  .landing-principle > p {
    padding: 18px;
  }

  .landing-final-actions {
    width: 100%;
  }

  .landing-final-actions > * {
    width: 100%;
    text-align: center;
  }

  .landing-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* v.136 reminder checkbox visibility and mobile task-dialog scrolling hotfix */
.task-notification-checkbox-wrap {
  position: relative;
  display: inline-grid;
  grid-template-areas: "check";
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  min-inline-size: 28px;
  min-block-size: 28px;
  flex: 0 0 28px;
}
.task-notification-checkbox-wrap > input[type="checkbox"] {
  grid-area: check;
  inline-size: 28px;
  block-size: 28px;
  min-inline-size: 28px;
  min-block-size: 28px;
  margin: 0;
}
.task-notification-visible-check {
  grid-area: check;
  z-index: 2;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-1px) scale(.72);
  transform-origin: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 3px rgba(0, 0, 0, .85);
  transition: opacity .12s ease, transform .12s ease;
}
.task-notification-checkbox-wrap > input[type="checkbox"]:checked + .task-notification-visible-check {
  opacity: 1;
  transform: translateY(-1px) scale(1);
}
.task-notification-checkbox-wrap > input[type="checkbox"]:focus-visible + .task-notification-visible-check {
  filter: drop-shadow(0 0 2px #ffffff);
}

html.task-dialog-open,
body.task-dialog-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
body.task-dialog-open {
  position: fixed !important;
  left: 0;
  right: 0;
  width: 100%;
}
#taskDialog {
  overflow: hidden !important;
  overscroll-behavior: contain;
}
#taskDialog #taskForm {
  max-height: calc(100vh - 72px);
  max-height: calc(100dvh - 72px);
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-gutter: stable;
}

@media (max-width: 768px) {
  #taskDialog {
    overflow: hidden !important;
    contain: layout paint;
  }
  #taskDialog #taskForm {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    scroll-behavior: auto;
  }
  #taskDialog .dialog-head {
    top: 0 !important;
    margin-top: 0 !important;
  }
  #taskDialog .button-row.right {
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }
}