:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #1f2937; background: #f7f7f3; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
main { max-width: 1180px; margin: 0 auto; padding: 32px 20px 60px; }
.hero { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: stretch; margin-bottom: 24px; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; color: #6b7280; font-weight: 700; margin: 0 0 8px; }
h1 { font-size: clamp(2.15rem, 5vw, 4.15rem); line-height: 0.95; margin: 0; letter-spacing: -0.06em; }
.intro { font-size: 1.08rem; color: #4b5563; max-width: 760px; line-height: 1.6; }
.heroCard, .panel, .ratingCard, .habitCard, .activeCard, .indexCard { background: #fff; border: 1px solid #e5e7eb; border-radius: 22px; box-shadow: 0 12px 30px rgba(17, 24, 39, 0.06); }
.heroCard { padding: 24px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.heroIcon { font-size: 2rem; }
.heroCard span, .fineprint, .meta, .ratingCard p, .empty, .why { color: #6b7280; }
.panel { padding: 22px; margin: 22px 0; }
.sectionTitle { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.sectionTitle h2 { margin: 0; font-size: 1.25rem; }
.ratingsGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ratingCard { padding: 16px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.ratingCard p { margin: 4px 0 0; font-size: 0.92rem; }
.stars { display: flex; gap: 2px; flex-shrink: 0; }
.starButton, .iconButton { border: 0; background: transparent; cursor: pointer; padding: 4px; }
.star { font-size: 1.45rem; color: #d1d5db; line-height: 1; }
.star.filled { color: #b7791f; }
.toolbar { display: flex; gap: 12px; margin-bottom: 8px; }
.resultCount { margin: 0 0 16px; color: #6b7280; font-size: 0.92rem; }
.search { flex: 1; display: flex; align-items: center; gap: 8px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 14px; padding: 10px 12px; }
.search input { border: 0; background: transparent; outline: 0; width: 100%; }
select { border: 1px solid #e5e7eb; border-radius: 14px; background: #f9fafb; padding: 10px; }
.categoryIndex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.indexCard { padding: 16px; }
.indexCard h3 { margin: 0 0 8px; }
.indexCard button { display: inline-flex; align-items: center; margin: 5px 6px 0 0; border: 1px solid #d1d5db; background: #f9fafb; color: #1f2937; border-radius: 999px; padding: 6px 10px; cursor: pointer; }
.indexCard button:hover { background: #eef2ff; }
.habitList, .activeList { display: grid; gap: 14px; }
.habitCard { padding: 18px; }
.habitHeader { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.habitCard h3 { margin: 0 0 6px; }
.meta { margin: 0; font-size: 0.9rem; }
.why { margin: 12px 0 0; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 14px; padding: 10px 12px; }
.badge { border-radius: 999px; background: #eef2ff; padding: 5px 10px; font-size: 0.82rem; font-weight: 700; color: #3730a3; white-space: nowrap; }
.columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 16px; }
ul { margin: 8px 0 0; padding-left: 20px; }
li { margin: 6px 0; }
.linkButton, .reminderBar button { border: 1px solid #d1d5db; background: #111827; color: #fff; border-radius: 999px; padding: 7px 11px; cursor: pointer; margin-left: 6px; font-size: 0.86rem; transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease; }
.linkButton:hover, .reminderBar button:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(17, 24, 39, 0.18); }
.linkButton.active, .reminderBar button.active { background: #166534; border-color: #166534; box-shadow: 0 0 0 3px rgba(22, 101, 52, 0.18); }
.linkButton[disabled] { cursor: default; opacity: 0.95; }
.linkButton.secondary { background: #374151; }
.reminderBar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.activeCard { padding: 14px; display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 12px; align-items: center; }
.activeCard p { margin: 4px 0 0; }
.iconButton { font-size: 1.2rem; }
.danger { color: #b91c1c; }
.smallInput { width: 155px; border: 1px solid #d1d5db; border-radius: 999px; padding: 7px 10px; }
@media (max-width: 820px) { .hero, .ratingsGrid, .columns, .categoryIndex { grid-template-columns: 1fr; } .ratingCard, .toolbar, .activeCard { align-items: flex-start; } .toolbar { flex-direction: column; } .activeCard { grid-template-columns: auto 1fr; } }
.summaryGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.summaryCard { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 18px; padding: 16px; }
.summaryCard strong { display: block; margin: 6px 0; font-size: 1.05rem; }
.summaryCard p { margin: 0; color: #6b7280; line-height: 1.5; }
.summaryLabel, .rankLabel { display: inline-flex; color: #6b7280; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 6px; }
.showMore { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.showMore button, .browsePanel > summary { border: 1px solid #d1d5db; background: #111827; color: #fff; border-radius: 999px; padding: 9px 14px; cursor: pointer; font-weight: 700; }
.showMore span { color: #6b7280; font-size: 0.92rem; }
.browsePanel { margin-top: 20px; border-top: 1px solid #e5e7eb; padding-top: 18px; }
.browsePanel > summary { display: inline-flex; list-style: none; }
.browsePanel > summary::-webkit-details-marker { display: none; }
.browsePanel[open] > summary { background: #374151; }
.compactCatalog { display: grid; gap: 14px; margin-top: 14px; }
@media (max-width: 820px) { .summaryGrid { grid-template-columns: 1fr; } }
.priorityPanel { border-color: #bbf7d0; box-shadow: 0 14px 34px rgba(22, 101, 52, 0.08); }
.completeButton { border: 1px solid #166534; background: #166534; color: #fff; border-radius: 999px; padding: 8px 12px; cursor: pointer; font-weight: 700; white-space: nowrap; }
.completeButton:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(22, 101, 52, 0.2); }
.reminderBar button[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width: 820px) { .completeButton { grid-column: 1 / -1; width: 100%; } }
.dashboardStats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.dashboardStats div { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 16px; padding: 14px; }
.dashboardStats span { display: block; color: #4b5563; font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.dashboardStats strong { display: block; font-size: 1.8rem; margin-top: 4px; }
.segmented { display: inline-flex; gap: 4px; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 999px; padding: 4px; margin-bottom: 14px; }
.segmented button { border: 0; border-radius: 999px; padding: 8px 12px; background: transparent; color: #374151; cursor: pointer; font-weight: 700; }
.segmented button.selected { background: #111827; color: #fff; }
.activeCard { grid-template-columns: 1fr auto; align-items: start; }
.activeCard.due { border-color: #86efac; }
.activeCard.notDue { opacity: 0.94; }
.activeMain { min-width: 0; }
.activeHeader { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nextStep { margin: 8px 0 4px; }
.activeActions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.dueBadge, .doneBadge, .laterBadge { border-radius: 999px; padding: 4px 9px; font-size: 0.78rem; font-weight: 800; }
.dueBadge { background: #dcfce7; color: #166534; }
.doneBadge { background: #eef2ff; color: #3730a3; }
.laterBadge { background: #f3f4f6; color: #4b5563; }
.completeButton[disabled] { opacity: 0.7; cursor: default; transform: none; box-shadow: none; }
.reflection { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: end; margin-top: 12px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 14px; padding: 10px; }
.reflection label { color: #4b5563; font-size: 0.88rem; font-weight: 700; }
.noteLabel { display: grid; gap: 4px; }
.noteInput { width: 100%; border: 1px solid #d1d5db; border-radius: 999px; padding: 8px 12px; background: #fff; }
.toolsPanel { margin-top: 20px; border-top: 1px solid #e5e7eb; padding-top: 18px; }
.toolsPanel summary { display: inline-flex; list-style: none; border: 1px solid #d1d5db; background: #374151; color: #fff; border-radius: 999px; padding: 9px 14px; cursor: pointer; font-weight: 700; }
.toolsPanel summary::-webkit-details-marker { display: none; }
.dangerButton { border: 1px solid #b91c1c; background: #b91c1c; color: #fff; border-radius: 999px; padding: 9px 14px; cursor: pointer; font-weight: 700; }
.archivedCard { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 16px; padding: 12px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: center; }
@media (max-width: 820px) { .dashboardStats, .reflection, .archivedCard { grid-template-columns: 1fr; } .activeCard { grid-template-columns: 1fr; } .activeActions { justify-content: flex-start; } .activeActions > * { width: 100%; margin-left: 0; } .segmented { width: 100%; } .segmented button { flex: 1; } }

.nextReminderBox { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 16px; padding: 12px 14px; margin-bottom: 16px; }
.nextReminderBox p { margin: 6px 0 0; }
.timeInput { min-width: 125px; }
.stepList { padding-left: 0; list-style: none; }
.stepRow { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; border: 1px solid #e5e7eb; background: #f9fafb; border-radius: 14px; padding: 10px; }
.stepSource { display: block; color: #6b7280; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 3px; }
.stepActions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.customStepForm { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 12px; }
.customStepForm input { border: 1px solid #d1d5db; border-radius: 999px; padding: 9px 12px; background: #fff; width: 100%; }
.customStepForm button { border: 1px solid #111827; background: #111827; color: #fff; border-radius: 999px; padding: 9px 12px; cursor: pointer; font-weight: 700; white-space: nowrap; }
.historyPanel { margin-top: 10px; }
.historyPanel summary { display: inline-flex; cursor: pointer; color: #374151; font-weight: 800; }
.historyPanel ul { margin-top: 8px; color: #4b5563; }
@media (max-width: 820px) { .stepRow, .customStepForm { grid-template-columns: 1fr; } .stepActions { justify-content: flex-start; flex-wrap: wrap; } .stepActions > * { margin-left: 0; } }

.diagnosticsPanel {
  margin-top: 1.25rem;
}

.diagnosticGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
  margin: 1rem 0;
}

.diagnosticRow {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  padding: .85rem;
  display: grid;
  gap: .25rem;
}

.diagnosticRow span {
  color: var(--muted, #6b7280);
  font-size: .86rem;
}

.diagnosticRow strong {
  color: var(--ink, #111827);
}

.diagnosticRow small {
  color: var(--muted, #6b7280);
  line-height: 1.35;
}

.diagnosticActions {
  align-items: center;
}

.diagnosticCallout { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 16px; padding: 12px 14px; margin: 12px 0; color: #1e3a8a; line-height: 1.45; }
.notificationLog { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 16px; padding: 12px 18px 12px 32px; }
.notificationLog li { line-height: 1.45; }

.heroLogo { width: 94px; height: 94px; border-radius: 22px; object-fit: cover; box-shadow: 0 10px 24px rgba(17,24,39,.18); margin-bottom: 12px; }
@media (max-width: 820px) { .heroLogo { width: 80px; height: 80px; } }

/* v0.9.0 compact home screen */
.homeCard { background: #fff; border: 1px solid #e5e7eb; border-radius: 26px; box-shadow: 0 14px 34px rgba(17, 24, 39, 0.07); padding: 20px; margin-bottom: 18px; }
.homeIdentity { display: flex; align-items: center; gap: 14px; }
.homeLogo { width: 64px; height: 64px; border-radius: 18px; object-fit: cover; box-shadow: 0 8px 18px rgba(17,24,39,.14); flex: 0 0 auto; }
.homeCard h1 { font-size: clamp(1.45rem, 4.5vw, 2.35rem); line-height: 1.03; letter-spacing: -0.045em; }
.homePrompt { margin: 14px 0 12px; color: #4b5563; line-height: 1.45; max-width: 760px; }
.homeStep { display: grid; gap: 4px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 16px; padding: 12px 14px; margin: 10px 0 14px; }
.homeStep span { color: #4b5563; }
.homeActions, .assessmentActions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.primaryAction, .secondaryAction { border-radius: 999px; padding: 10px 14px; cursor: pointer; font-weight: 800; border: 1px solid #111827; }
.primaryAction { background: #111827; color: #fff; }
.secondaryAction { background: #f9fafb; color: #111827; border-color: #d1d5db; }
.primaryAction:hover, .secondaryAction:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(17,24,39,.12); }
.primaryAction[disabled] { opacity: .65; cursor: default; transform: none; box-shadow: none; }
.collapsiblePanel { padding: 0; overflow: hidden; }
.collapsiblePanel > summary { list-style: none; cursor: pointer; padding: 18px 22px; }
.collapsiblePanel > summary::-webkit-details-marker { display: none; }
.collapsiblePanel > summary .sectionTitle { margin-bottom: 0; }
.collapsiblePanel[open] { padding-bottom: 22px; }
.collapsiblePanel[open] > :not(summary) { margin-left: 22px; margin-right: 22px; }
.collapsiblePanel > summary:hover { background: #f9fafb; }
.collapsiblePanel > summary::after { content: 'Open'; float: right; margin-top: -28px; color: #6b7280; font-size: .85rem; font-weight: 800; }
.collapsiblePanel[open] > summary::after { content: 'Close'; }
@media (max-width: 820px) { main { padding: 18px 14px 44px; } .homeActions > *, .assessmentActions > * { width: 100%; } .collapsiblePanel[open] > :not(summary) { margin-left: 14px; margin-right: 14px; } .collapsiblePanel > summary { padding: 16px 14px; } }

/* v0.9.1 next-action-first refinements */
.focusPanel { margin-top: 18px; }
.starsBlock { display: grid; justify-items: end; gap: 4px; }
.ratingStatus { color: #6b7280; font-size: 0.82rem; font-weight: 800; }
.starButton[aria-pressed="true"] { background: #fef3c7; border-radius: 999px; }
.aboutAction { border: 1px solid #d1d5db; background: #fff; color: #374151; border-radius: 999px; padding: 10px 14px; cursor: pointer; font-weight: 800; }
.aboutAction:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(17,24,39,.12); }
.aboutBox { margin-top: 14px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 16px; padding: 12px 14px; max-width: 760px; }
.aboutBox p { margin: 6px 0 0; color: #4b5563; line-height: 1.45; }
@media (max-width: 820px) { .starsBlock { justify-items: start; } }

/* v0.9.2 guided-choice home screen */
.moreOptionsBox { margin-top: 14px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 16px; padding: 12px 14px; max-width: 820px; }
.moreOptionsBox > strong { display: block; margin-bottom: 10px; }
.moreOptionsGrid { display: flex; gap: 8px; flex-wrap: wrap; }
.moreOptionsGrid .secondaryAction { background: #fff; }
@media (max-width: 820px) { .moreOptionsGrid { display: grid; grid-template-columns: 1fr; } .moreOptionsGrid .secondaryAction { width: 100%; } }

/* v0.9.3 gentle coaching signals */
.coachingNote { margin-top: 12px; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 14px; padding: 10px 12px; color: #334155; }
.coachingNote p { margin: 5px 0 10px; line-height: 1.45; }
.coachingHint { margin: -4px 0 12px; color: #64748b; font-size: 0.9rem; line-height: 1.45; }

/* v0.9.4 profile-aware foundation */
.overallRating { margin-bottom: 14px; }
.profilePanel { margin: 0 0 18px; border: 1px solid #e5e7eb; background: #f9fafb; border-radius: 18px; padding: 12px 14px; }
.profilePanel summary { cursor: pointer; font-weight: 800; list-style: none; }
.profilePanel summary::-webkit-details-marker { display: none; }
.profileGrid { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-top: 12px; }
.profileGrid label { display: grid; gap: 5px; color: #4b5563; font-size: 0.88rem; font-weight: 800; }
.profileGrid select { min-width: 180px; background: #fff; }
.dangerText { color: #991b1b; border-color: #fecaca; }
.dangerText[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 820px) { .profileGrid { display: grid; grid-template-columns: 1fr; } .profileGrid > *, .profileGrid select { width: 100%; } }

/* v0.9.5 optional ratings and profile selector polish */
.profileSelectLabel { display: grid; gap: 5px; color: #4b5563; font-size: 0.88rem; font-weight: 800; }
.profileSelectLabel select { min-width: 220px; background: #fff; }
.compactProfileSelect { margin: 2px 0 8px; max-width: 280px; }
.compactProfileSelect span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #6b7280; }
.compactProfileSelect select { min-width: 180px; padding: 7px 10px; border-radius: 999px; background: #f9fafb; }
.profilePanel > strong { display: block; margin-bottom: 4px; }
@media (max-width: 820px) { .compactProfileSelect, .compactProfileSelect select, .profileSelectLabel select { max-width: none; width: 100%; } }


/* v0.9.6 mobile card containment polish */
html, body { max-width: 100%; overflow-x: clip; }
main, .panel, .homeCard, .habitCard, .activeCard, .ratingCard, .indexCard { min-width: 0; }
.activeCard { width: 100%; max-width: 100%; overflow: hidden; }
.activeCard *, .habitCard *, .homeCard *, .panel * { min-width: 0; }
.activeActions { max-width: 100%; }
.activeActions > * { max-width: 100%; }
.activeMetaList { display: grid; gap: 3px; margin-top: 8px; }
.activeMetaList span { display: block; }
.reflection { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
.reflection select, .reflection input { max-width: 100%; }
@media (max-width: 520px) {
  main { padding-left: 12px; padding-right: 12px; }
  .panel, .homeCard, .habitCard, .activeCard { border-radius: 18px; }
  .activeCard { padding: 12px; gap: 10px; }
  .activeHeader strong { overflow-wrap: anywhere; }
  .nextStep, .meta, .fineprint, .historyPanel li { overflow-wrap: anywhere; }
  .reflection { grid-template-columns: 1fr; align-items: stretch; padding: 10px; }
  .reflection label { display: grid; gap: 5px; }
  .reflection .smallInput, .reflection .noteInput { width: 100%; }
  .activeActions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .activeActions > * { width: 100%; margin-left: 0; }
  .iconButton.danger { min-height: 42px; border: 1px solid #fecaca; border-radius: 999px; background: #fff; }
}

/* v0.10.0 habit-centered refinements */
.dailyRhythm { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 16px; padding: 12px 14px; margin: 0 0 16px; color: #14532d; }
.dailyRhythm p { margin: 4px 0 0; color: #166534; line-height: 1.45; }
.habitCardActions { margin: 12px 0; }
.habitDetails { margin-top: 10px; border: 1px solid #e5e7eb; border-radius: 14px; background: #f9fafb; padding: 10px 12px; }
.habitDetails summary { cursor: pointer; font-weight: 800; color: #374151; }
.habitDetails ul { margin-bottom: 0; }
.editHabitGrid { display: grid; gap: 10px; margin-top: 10px; }
.editHabitGrid label { display: grid; gap: 5px; color: #4b5563; font-size: .9rem; font-weight: 800; }
.textAreaInput { width: 100%; min-height: 76px; border: 1px solid #d1d5db; border-radius: 14px; padding: 9px 12px; background: #fff; font: inherit; resize: vertical; }

/* v0.11.0 guided first habit flow */
.guidedFlow { display: grid; gap: 14px; margin: 14px 0; }
.categoryChoiceGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.categoryChoiceCard { text-align: left; border: 1px solid #e5e7eb; background: #f9fafb; border-radius: 18px; padding: 14px; cursor: pointer; display: grid; gap: 6px; color: #1f2937; }
.categoryChoiceCard:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(17,24,39,.10); background: #fff; }
.categoryChoiceCard strong { font-size: 1rem; }
.categoryChoiceCard span, .categoryDetails p { color: #4b5563; line-height: 1.45; }
.guidedHeader { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 16px; padding: 12px 14px; display: grid; gap: 3px; }
.guidedHeader strong { font-size: 1.15rem; }
.categoryDetails { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 16px; padding: 12px 14px; }
.categoryDetails p { margin: 6px 0; }
.categoryDetails summary { cursor: pointer; font-weight: 800; color: #374151; }
.guidedRating { margin: 0; }
.guidedStepCard { background: #fff; border: 1px solid #e5e7eb; border-radius: 20px; box-shadow: 0 10px 24px rgba(17,24,39,.06); padding: 16px; }
.guidedStepCard h3 { margin: 4px 0 6px; font-size: 1.2rem; }
.guidedStepCard .habitDetails { margin-top: 12px; }
@media (max-width: 820px) { .categoryChoiceGrid { grid-template-columns: 1fr; } .guidedRating { display: grid; grid-template-columns: 1fr; } }


/* v0.11.1 scoped catalog summary styling */
.browsePanel .habitDetails summary {
  background: transparent;
  color: #374151;
  border: 0;
  border-radius: 0;
  padding: 0;
}


/* v0.11.2 life review rating layout fix */
.ratingCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.ratingCard > div:first-child {
  min-width: 0;
}
.ratingCard > div:first-child strong,
.ratingCard > div:first-child p {
  overflow-wrap: anywhere;
}
.ratingCard .starsBlock {
  min-width: max-content;
  max-width: 100%;
  justify-items: end;
}
.ratingCard .stars {
  flex-wrap: nowrap;
}
@media (max-width: 700px) {
  .ratingCard {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 12px;
  }
  .ratingCard .starsBlock {
    min-width: 0;
    justify-items: start;
  }
  .ratingCard .stars {
    flex-wrap: wrap;
  }
}

/* v0.12.0 coaching insights and trend notes */
.dashboardStats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.insightBox { background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 16px; padding: 12px 14px; margin: 12px 0 16px; color: #334155; }
.insightBox p { margin: 5px 0 0; line-height: 1.45; color: #475569; }
.insightBox ul { margin-top: 8px; color: #475569; }
.activeInsight { margin: 10px 0; }
@media (max-width: 920px) { .dashboardStats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .dashboardStats { grid-template-columns: 1fr; } }

/* v0.13 daily coaching flow */
.dailyFocus { border-color: #cbd5e1; background: #f8fafc; }
.completedFocus { border-color: #bbf7d0; background: #f0fdf4; }
.dailyPrompt { margin: 8px 0 12px; color: #4b5563; line-height: 1.45; }
.commitmentStats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.commitmentStats div { border: 1px solid #e5e7eb; background: #fff; border-radius: 14px; padding: 10px; display: grid; gap: 3px; }
.commitmentStats span { color: #6b7280; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.commitmentStats strong { color: #111827; font-size: .95rem; }
.completeButton.completed { background: #065f46; border-color: #065f46; }
@media (max-width: 820px) { .commitmentStats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .commitmentStats { grid-template-columns: 1fr; } }

.activeCard.notificationFocus { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18), 0 12px 30px rgba(17, 24, 39, 0.08); }
.notificationFocusNotice { grid-column: 1 / -1; background: #fffbeb; border: 1px solid #fde68a; border-radius: 14px; padding: 10px 12px; font-size: 0.92rem; color: #78350f; }

.versionBadge {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 30;
  background: #111827;
  color: #fff;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 0.76rem;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(17,24,39,.16);
}

.notificationCenter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(154, 52, 18, 0.08);
  padding: 16px;
  margin-bottom: 18px;
}

.notificationCenter h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
}

.notificationCenter p {
  margin: 4px 0 0;
  color: #4b5563;
  line-height: 1.45;
}

.notificationActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.notificationActions .secondaryAction[disabled] {
  opacity: .55;
  cursor: default;
}

@media (max-width: 820px) {
  .versionBadge { top: 6px; right: 8px; font-size: .7rem; }
  .notificationCenter { grid-template-columns: 1fr; }
  .notificationActions { justify-content: flex-start; }
  .notificationActions > * { width: 100%; }
}


/* v0.13.4 active habits wide-screen layout fix */
.activeCard {
  grid-template-columns: 1fr;
  align-items: stretch;
}
.activeMain {
  width: 100%;
}
.activeActions {
  width: 100%;
  justify-content: flex-start;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid #e5e7eb;
}
.activeActions > * {
  margin-left: 0;
}
.activeActions .completeButton {
  min-width: 150px;
}
.activeActions .iconButton.danger {
  border: 1px solid #fecaca;
  border-radius: 999px;
  background: #fff;
  min-height: 38px;
  min-width: 42px;
}
.nextStep, .dailyPrompt, .activeInsight, .habitDetails, .reflection, .historyPanel {
  width: 100%;
}


.roleTags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.miniTag {
  border: 1px solid rgba(31, 41, 55, 0.16);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  font-size: 0.76rem;
  color: #374151;
  background: rgba(255, 255, 255, 0.74);
}


/* v0.15.0 profile-specific habit review */
.habitRatingCard { border: 1px solid #dbe3ea; border-radius: 18px; padding: 1.1rem; background: #fff; display: grid; gap: .8rem; }
.habitRatingCard h3, .habitRatingCard p { margin: 0; }
.habitRatingCard label { display: grid; gap: .35rem; font-weight: 700; }
.habitRatingCard textarea { min-height: 90px; resize: vertical; }
.habitRatingStars { justify-content: flex-start; }
.ratingScale { color: #4b5563; font-size: .9rem; }
.habitRatingActions, .ratingExportActions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .9rem; }
.ratingViews { margin-bottom: 1rem; }
@media (max-width: 640px) { .habitRatingActions > *, .ratingExportActions > * { width: 100%; } }

/* v0.15.1 Find a Habit */
.habitFinderSearch { display:flex; align-items:center; gap:.5rem; width:100%; margin:1rem 0; }
.habitFinderSearch input { width:100%; min-width:0; }
.habitSearchResults { display:grid; gap:1rem; }
.habitSearchCard { border:1px solid var(--border, #d9d9d9); border-radius:14px; padding:1rem; background:var(--card, #fff); }
.habitSearchCard .habitCardActions { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:.8rem; }
.improvementForm { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border, #ddd); display:grid; gap:.75rem; }
.improvementForm label { display:grid; gap:.35rem; }
.improvementForm input, .improvementForm select, .improvementForm textarea { width:100%; }
.improvementForm textarea { min-height:7rem; }

/* v0.17.0 simplified daily experience */
.simplifiedHome { max-width: 960px; }
.homeHabitList { display: grid; gap: 8px; margin-top: 18px; }
.homeHabitRow { border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; overflow: hidden; }
.homeHabitRow.completed { background: #f8fafc; }
.homeHabitSummary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; }
.homeHabitTitle { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 4px; border: 0; background: transparent; color: #111827; font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
.homeHabitTitle span:last-child { overflow-wrap: anywhere; }
.homeHabitChevron { color: #6b7280; flex: 0 0 auto; }
.homeCompleteButton { border: 1px solid #111827; background: #111827; color: #fff; border-radius: 999px; padding: 8px 12px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.homeCompletedSignal { color: #166534; font-weight: 800; white-space: nowrap; }
.homeHabitDetails { border-top: 1px solid #e5e7eb; background: #f9fafb; padding: 14px 18px 16px 38px; display: grid; gap: 10px; }
.homeHabitDetails p { margin: 0; line-height: 1.45; }
.homeHabitDetails ul { margin: 6px 0 0; padding-left: 20px; }
.homeHabitDetailActions { display: flex; gap: 8px; flex-wrap: wrap; }
.homeFooter { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; color: #6b7280; font-size: .9rem; }
@media (max-width: 620px) {
  .homeHabitSummary { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 8px 10px; }
  .homeCompleteButton { padding: 7px 10px; font-size: .84rem; }
  .homeCompletedSignal { font-size: .84rem; }
  .homeHabitDetails { padding: 12px 14px; }
  .homeFooter { align-items: stretch; flex-direction: column; }
  .homeFooter .aboutAction { width: 100%; }
}

/* v0.17.8: habit-specific options stay with the expanded home habit. */
.homeHabitOptions { margin-top: 0.85rem; }
.homeHabitOptions > summary { cursor: pointer; font-weight: 700; }
.homeHabitOptionsBody { display: grid; gap: 0.85rem; padding-top: 0.75rem; }
.homeHabitOptionSection { display: grid; gap: 0.5rem; }
.homeHabitOptionControls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* v0.17.9 reminder-time guidance */
.reminderTimeEditor { display: grid; gap: 6px; min-width: min(100%, 280px); }
.reminderTimeEditor label { display: grid; gap: 4px; font-weight: 600; }
.timeHelp { margin: 0; color: #4b5563; font-size: 0.9rem; line-height: 1.4; }
.timeConfirmation { margin: 0; color: #166534; font-weight: 700; font-size: 0.9rem; }

/* v0.18.5 Find a Habit clarity and source attribution */
.habitFinderLabel{display:block;margin:.75rem 0 .35rem}.habitFinderSearchBox{display:flex;align-items:center;gap:.6rem;border:1px solid #94a3b8;border-radius:.65rem;padding:.65rem .8rem;background:#fff}.habitFinderSearchBox:focus-within{outline:3px solid rgba(37,99,235,.2);border-color:#2563eb}.habitFinderSearchBox input{flex:1;border:0;outline:0;font:inherit;min-width:0;background:transparent}.sourceInspiration{margin:.75rem 0 0;font-size:.92rem;color:#475569}