/* Mes listes. Load after styles.css; the view owns its own layout. */
.habits-view {
  --habit-muted: #65745e;
  --habit-line: #dfe7d8;
  --habit-paper: #fff;
  width: 100%;
  max-width: 1128px;
  min-width: 0;
  margin: 3px auto 0;
  grid-column: 1 / -1;
  color: var(--ink, #20372d);
  font-size: 14px;
  line-height: 1.6;
}
.habits-view[hidden] { display: none !important; }
.shell:has(> #habitsView:not(.hidden):not([hidden])) > .workspace,
.shell:has(> #habitsView:not(.hidden):not([hidden])) > .page-heading { display: none; }

.habits-view .habits-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 21px; }
.habits-view .habits-intro > div:first-child { min-width: 0; }
.habits-view .habits-intro h2 { margin: 0; font-size: 34px; font-weight: 650; letter-spacing: -.9px; line-height: 1.2; }
.habits-view .habits-intro p { margin: 8px 0 0; color: var(--habit-muted); font-size: 14px; line-height: 1.7; }
.habits-view .habits-tools { flex: 0 0 auto; }
.habits-view .habits-tools .button { min-height: 44px; }
.habits-view .habits-counters { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 14px; margin-top: 11px; color: var(--habit-muted); font-size: 12.5px; }
.habits-view .habits-counters strong { color: #47633c; font-weight: 650; }
.habits-view .button { font-size: 13px; }
.habits-view .button.small { min-height: 39px; padding: 8px 12px; font-size: 12.5px; line-height: 1.4; }
.habits-view .text-button { min-height: 38px; padding: 9px 2px; font-size: 12.5px; line-height: 1.5; }
.habits-view .button svg { width: 17px; height: 17px; }

.habits-view .habits-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; margin-bottom: 13px; }
.habits-view .habits-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 4px; border: 1px solid #dfe7d5; border-radius: 12px; background: #eaf0e3; }
.habits-view .habits-tabs button { min-width: 0; min-height: 41px; padding: 8px 15px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #617456; font-size: 13px; line-height: 1.4; }
.habits-view .habits-tabs button:is(.active, [aria-pressed="true"]) { border-color: #dce5d3; background: #fff; color: var(--green, #244f3e); box-shadow: 0 1px 4px #20372d08; font-weight: 650; }
.habits-view .habits-tabs button:hover { color: var(--green-dark, #173c2c); }
.habits-view .habits-tabs button span { display: inline-block; min-width: 18px; margin-left: 3px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.habits-view .habits-search { flex: 0 1 280px; min-width: 180px; }
.habits-view .habits-search input { display: block; width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--habit-line); border-radius: 11px; background: #fff; color: var(--ink, #20372d); font-size: 14px; }
.habits-view .habits-search input::placeholder { color: #6f7d66; opacity: 1; }

.habits-view .habits-disclosure { margin: 0 0 21px; border: 1px solid var(--habit-line); border-radius: 12px; background: #f9fbf6; }
.habits-view .habits-disclosure > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 11px 16px; color: #405b37; font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.habits-view .habits-disclosure > summary::-webkit-details-marker,
.habits-view .habit-detail > summary::-webkit-details-marker { display: none; }
.habits-view .habits-disclosure > summary small { margin-left: auto; color: var(--habit-muted); font-size: 12.5px; font-weight: 400; text-align: right; }
.habits-view .disclosure-mark { flex: 0 0 17px; width: 17px; color: #81936e; font-size: 20px; line-height: 1; text-align: center; }
.habits-view .habits-disclosure[open] > summary { margin-bottom: 14px; border-bottom: 1px solid var(--habit-line); }
.habits-view .habits-disclosure[open] > summary .disclosure-mark,
.habits-view .habit-detail[open] > summary > span { transform: rotate(45deg); }
.habits-view .habits-disclosure > summary:focus-visible,
.habits-view .habit-detail > summary:focus-visible { outline: 3px solid #9cad7e; outline-offset: 3px; border-radius: 7px; }
.habits-view .habits-disclosure-body { padding: 0 17px 17px; }
.habits-view .habits-method { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 18px; }
.habits-view .habits-method p { margin: 0; color: var(--habit-muted); font-size: 13px; line-height: 1.75; }
.habits-view .habits-method strong { color: #45623b; }
.habits-view .habit-mode-switch { display: inline-flex; flex: 0 0 auto; gap: 3px; padding: 3px; border: 1px solid #d7e1ce; border-radius: 10px; background: #fff; }
.habits-view .habit-mode-switch button { min-height: 38px; padding: 8px 12px; border: 0; border-radius: 7px; background: transparent; color: #5d7451; font-size: 12.5px; line-height: 1.4; }
.habits-view .habit-mode-switch button:is(.active, [aria-pressed="true"]) { background: var(--green, #244f3e); color: #fff; font-weight: 600; }
.habits-view .habits-method-note,
.habits-view .habits-footnote { margin: 12px 0 0; color: var(--habit-muted); font-size: 12.5px; line-height: 1.75; }
.habits-view .habits-calculation .text-button { margin-top: 6px; }

.habits-view .habit-country { min-width: 0; }
.habits-view .habit-country > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.habits-view .habit-country h3 { margin: 0; color: #2f4b39; font-size: 19px; font-weight: 650; letter-spacing: -.3px; line-height: 1.4; }
.habits-view .habit-country > header p { margin: 4px 0 0; color: var(--habit-muted); font-size: 12.5px; line-height: 1.6; }
.habits-view .habit-country > header .button { flex-shrink: 0; }
.habits-view .habit-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
.habits-view .habit-item { display: grid; grid-template-columns: [image] 48px [copy] minmax(0, 1fr); align-items: start; gap: 13px 12px; min-width: 0; padding: 17px; border: 1px solid var(--habit-line); border-radius: 16px; background: var(--habit-paper); box-shadow: 0 3px 12px #20372d03; }
.habits-view .habit-item:has(> .habit-check) { grid-template-columns: [check] 20px [image] 48px [copy] minmax(0, 1fr); }
.habits-view .habit-check { display: grid; place-items: center; grid-column: check; grid-row: 1; min-height: 48px; margin: 0; }
.habits-view .habit-check input[type="checkbox"] { appearance: auto; width: 18px; height: 18px; min-height: 18px; margin: 0; padding: 0; accent-color: var(--green, #244f3e); cursor: pointer; }
.habits-view .habit-thumb { display: grid; place-items: center; grid-column: image; grid-row: 1; width: 48px; height: 48px; overflow: hidden; border: 1px solid #edf0e8; border-radius: 9px; background: #fff; color: #819371; font-size: 22px; }
.habits-view .habit-thumb img { display: block; width: 48px; height: 48px; object-fit: contain; }
.habits-view .habit-copy { grid-column: copy; grid-row: 1; min-width: 0; }
.habits-view .habit-copy h4 { margin: 0 0 4px; font-size: 16px; font-weight: 650; letter-spacing: -.15px; line-height: 1.4; overflow-wrap: anywhere; }
.habits-view .habit-copy p { margin: 0; color: var(--habit-muted); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.habits-view .habit-status { display: inline-flex; max-width: 100%; margin-top: 7px; padding: 3px 7px; border-radius: 6px; background: #edf4e5; color: #587748; font-size: 12.5px; line-height: 1.5; }
.habits-view .habit-status.pending { background: #fff2d7; color: #80622d; }
.habits-view .is-checked .habit-copy h4 { color: #7b8874; text-decoration: line-through; }
.habits-view .is-checked .habit-thumb { opacity: .65; }

/* Cash and extra quantity share equal prominence. Neither implies unit savings. */
.habits-view .habit-purchase { grid-column: 1 / -1; min-width: 0; padding: 13px 15px; border: 1px solid #e4e8dc; border-radius: 11px; background: #f5f7f1; }
.habits-view .habit-purchase.is-higher { border-color: #e6e4d9; background: #f7f6f0; }
.habits-view .habit-purchase.is-lower { border-color: #dce7d1; background: #f0f5e9; }
.habits-view .habit-cash-label { margin: 0 0 7px; color: #65715c; font-size: 12.5px; line-height: 1.5; }
.habits-view .habit-cash-quantity { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; color: #344a36; font-size: 27px; font-weight: 650; letter-spacing: -.6px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.habits-view .habit-cash-quantity > span { white-space: nowrap; }
.habits-view .habit-cash-quantity .habit-delta-separator { color: #87947a; font-size: 20px; font-weight: 400; }
.habits-view .habit-purchase.is-lower .habit-cash-quantity { color: #2c5b3e; }
.habits-view .habit-purchase-total { margin: 9px 0 0; color: #5d6c53; font-size: 13px; line-height: 1.65; }
.habits-view .habit-purchase-total strong { color: #3e5738; font-size: 14px; font-weight: 650; }
.habits-view .habit-purchase-total > span { white-space: nowrap; }
.habits-view .habit-unit-note { margin: 7px 0 0; color: #68705d; font-size: 12.5px; line-height: 1.6; }
.habits-view .habit-kept { grid-column: 1 / -1; padding: 12px 14px; border-radius: 10px; background: #f3f5ef; }
.habits-view .habit-kept > span { color: var(--habit-muted); font-size: 12.5px; }
.habits-view .habit-kept strong { display: block; margin-top: 4px; color: #3f5a37; font-size: 22px; font-weight: 650; line-height: 1.3; }
.habits-view .habit-kept small { display: block; margin-top: 5px; color: var(--habit-muted); font-size: 12.5px; font-weight: 400; line-height: 1.6; }

.habits-view .habit-card-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 12px; grid-column: 1 / -1; min-width: 0; }
.habits-view .habit-rechoose { justify-self: start; max-width: 100%; }
.habits-view .habit-detail { grid-column: 2; min-width: 0; margin: 0; color: var(--habit-muted); font-size: 12.5px; line-height: 1.7; }
.habits-view .habit-detail > summary { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-height: 39px; color: #56704a; font-size: 12.5px; cursor: pointer; list-style: none; }
.habits-view .habit-detail > summary > span { color: #81936e; font-size: 19px; line-height: 1; }
.habits-view .habit-detail[open] { grid-column: 1 / -1; padding-top: 9px; border-top: 1px solid #e9ede3; }
.habits-view .habit-detail-body { padding-top: 7px; }
.habits-view .habit-detail-body > p { margin: 11px 0; overflow-wrap: anywhere; }
.habits-view .habit-detail-body > .button { margin-top: 12px; }
.habits-view .habit-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.habits-view .habit-prices > div { min-width: 0; padding: 10px 11px; border: 1px solid #e9eee1; border-radius: 9px; background: #f8faf5; overflow-wrap: anywhere; }
.habits-view .habit-prices span,
.habits-view .habit-prices small { display: block; color: var(--habit-muted); font-size: 12.5px; line-height: 1.6; }
.habits-view .habit-prices strong { display: block; margin: 4px 0; color: var(--ink, #20372d); font-size: 16px; font-weight: 650; line-height: 1.5; font-variant-numeric: tabular-nums; }
.habits-view .habit-source-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 12px; margin-top: 13px; }
.habits-view .habit-source-link { color: #466b3e; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.habits-view .habit-source-date { color: var(--habit-muted); font-size: 12.5px; }
.habits-view .habit-pending-reason { padding: 10px 12px; border-left: 3px solid #c4a65f; border-radius: 7px; background: #fff8e8; color: #80622d; font-size: 12.5px; line-height: 1.7; }
.habits-view .habit-empty { display: grid; place-items: center; grid-column: 1 / -1; min-height: 130px; margin: 0; padding: 24px; border: 1px dashed #d6e0ca; border-radius: 13px; background: #ffffffa8; color: var(--habit-muted); font-size: 14px; line-height: 1.75; text-align: center; }
.habits-view .habit-empty p { max-width: 50ch; margin: 0; }
.habits-view .habits-list-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin: 7px 0 15px; }
.habits-view .habits-list-footer > :only-child { margin-left: auto; }

.habits-view .habits-history { margin: 0; background: #fff; }
.habits-view .history-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 7px; }
.habits-view .history-intro p { margin: 0; color: var(--habit-muted); font-size: 13px; line-height: 1.6; }
.habits-view .history-intro .button { flex-shrink: 0; }
.habits-view .ticket-history-list { max-height: 480px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.habits-view .history-ticket { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; align-items: center; gap: 10px 14px; padding: 16px 0; border-bottom: 1px solid #e9eee3; }
.habits-view .history-ticket:last-child { border-bottom: 0; }
.habits-view .ticket-stamp { display: grid; place-items: center; width: 38px; height: 43px; border: 1px solid #e0e7d7; border-radius: 9px; background: #f3f7ec; color: #7c9567; font-size: 23px; }
.habits-view .history-ticket-copy { min-width: 0; }
.habits-view .history-ticket h4 { margin: 0 0 3px; font-size: 16px; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
.habits-view .history-ticket p { margin: 0; color: var(--habit-muted); font-size: 12.5px; line-height: 1.65; overflow-wrap: anywhere; }
.habits-view .history-ticket-amount { text-align: right; font-variant-numeric: tabular-nums; }
.habits-view .history-ticket-amount strong { display: block; font-size: 16px; font-weight: 650; white-space: nowrap; }
.habits-view .history-ticket-amount small { display: block; color: var(--habit-muted); font-size: 12.5px; }
.habits-view .habits-backup-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 22px; margin-top: 15px; padding-top: 16px; border-top: 1px solid var(--habit-line); }
.habits-view .habits-backup-toolbar > div:first-child { flex: 1 1 290px; }
.habits-view .habits-backup-toolbar strong { font-size: 13px; font-weight: 650; }
.habits-view .habits-backup-toolbar p { margin: 5px 0 0; color: var(--habit-muted); font-size: 12.5px; line-height: 1.7; }
.habits-view .habits-backup-actions { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 920px) {
  .habits-view .habits-method { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .habits-view .habit-mode-switch { justify-self: start; }
}
@media (max-width: 860px) {
  .habits-view .habit-items { grid-template-columns: minmax(0, 1fr); }
  .habits-view .habits-controls { gap: 12px; }
  .habits-view .habits-tabs button { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 680px) {
  /* Existing mobile navigation, now with three views. */
  .topbar nav { display: grid; grid-template-columns: 1.12fr .88fr 1.12fr; gap: 4px; }
  .topbar nav .nav { min-width: 0; padding: 0 3px; font-size: 12.5px; line-height: 1.25; white-space: normal; }
  .topbar nav .nav span { padding: 2px 4px; margin-left: 3px; }
  .habits-view { margin-top: 0; }
  .habits-view .habits-intro { display: block; margin-bottom: 17px; }
  .habits-view .habits-intro h2 { font-size: 31px; }
  .habits-view .habits-intro p { max-width: 39ch; }
  .habits-view .habits-counters { gap: 4px 12px; margin-top: 9px; }
  .habits-view .habits-tools { margin-top: 14px; }
  .habits-view .habits-tools .button { width: 100%; }
  .habits-view .habits-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .habits-view .habits-tabs { width: 100%; }
  .habits-view .habits-tabs button { min-height: 44px; padding: 8px 6px; }
  .habits-view .habits-search { min-width: 0; width: 100%; }
  .habits-view .habits-search input { min-height: 44px; font-size: 16px; }
  .habits-view .habits-disclosure { margin-bottom: 18px; }
  .habits-view .habits-disclosure > summary { padding: 10px 13px; gap: 8px; }
  .habits-view .habits-disclosure-body { padding: 0 13px 14px; }
  .habits-view .habit-mode-switch { width: 100%; }
  .habits-view .habit-mode-switch button { flex: 1; min-height: 41px; padding: 8px 9px; }
  .habits-view .habit-country > header { align-items: start; gap: 12px; margin-bottom: 12px; }
  .habits-view .habit-country h3 { font-size: 18px; }
  .habits-view .habit-country > header p { max-width: 34ch; }
  .habits-view .habit-country > header .button { padding: 8px 10px; }
  .habits-view .habit-items { gap: 13px; }
  .habits-view .habit-item { padding: 15px; gap: 12px 10px; border-radius: 14px; }
  .habits-view .habit-purchase { padding: 12px 13px; }
  .habits-view .habit-cash-quantity { font-size: 28px; gap: 4px 8px; }
  .habits-view .habit-cash-label { font-size: 12.5px; }
  .habits-view .habit-card-footer { gap: 8px; }
  .habits-view .habit-rechoose { min-height: 41px; }
  .habits-view .habit-detail > summary { min-height: 41px; }
  .habits-view .habit-detail-body > .button { width: 100%; }
  .habits-view .habit-prices { gap: 8px; }
  .habits-view .habit-prices > div { padding: 9px 10px; }
  .habits-view .history-intro { flex-wrap: wrap; gap: 10px; }
  .habits-view .history-ticket { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px 10px; }
  .habits-view .ticket-stamp { grid-column: 1; grid-row: 1; width: 34px; height: 40px; }
  .habits-view .history-ticket-copy { grid-column: 2; grid-row: 1; }
  .habits-view .history-ticket-amount { grid-column: 3; grid-row: 1; }
  .habits-view .history-ticket > button { grid-column: 2 / -1; justify-self: start; }
  .habits-view .habits-backup-actions .button { min-height: 41px; }
  .habits-view .habits-history { margin-bottom: 0; }
}
@media (max-width: 380px) {
  .topbar nav { left: 16px; right: 16px; gap: 2px; }
  .habits-view .habit-item { padding: 13px; gap: 11px 9px; }
  .habits-view .habit-item:has(> .habit-check) { grid-template-columns: [check] 18px [image] 48px [copy] minmax(0, 1fr); }
  .habits-view .habit-country > header { flex-wrap: wrap; }
  .habits-view .habit-country > header .button { min-height: 38px; }
  .habits-view .habit-cash-quantity { font-size: 26px; }
  .habits-view .habit-cash-quantity .habit-delta-separator { font-size: 18px; }
  .habits-view .habit-rechoose { padding: 8px 10px; }
  .habits-view .habit-prices > div { padding: 8px; }
  .habits-view .history-ticket-amount { grid-column: 2 / -1; grid-row: auto; text-align: left; }
  .habits-view .history-ticket-amount strong,
  .habits-view .history-ticket-amount small { display: inline; }
  .habits-view .history-ticket-amount small { margin-left: 6px; }
  .habits-view .habits-backup-actions .button { flex: 1 1 auto; }
}

/* Existing shared accessibility and comparison styles, retained unchanged. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.price-verdict{margin:0 28px 14px;padding:12px 15px;border-radius:10px;font-size:11px;line-height:1.65;border:1px solid #e1e8d5}
.price-verdict.favorable{background:#eff5e8;color:#4d6c3c}
.price-verdict.costlier{background:#fff6e8;color:#8d662a;border-color:#f1e1c3}
.offer-retailer{font-size:11px;font-weight:600;color:#607b50;margin-top:7px}
@media(max-width:680px){.price-verdict{margin-left:18px;margin-right:18px;font-size:11px}.habits-view .habit-country>header>div{gap:7px}.habits-view .habit-country h3{font-size:18px}}

.option-total{padding:10px!important;background:#f0f5e8;border-radius:8px;color:#45683a!important;margin:10px 0!important}.option-total strong,.option-total small{display:block}.option-total strong{font-size:13px}.option-total small{font-size:10px;margin-top:3px}.retailer-leads{display:grid;gap:10px}.retailer-lead{border:1px dashed #d9e2ce;border-radius:10px;padding:13px;font-size:11px}.retailer-lead p{font-size:11px;color:#7b8f69;line-height:1.7;margin:6px 0}.retailer-lead .text-button{display:block;padding-bottom:0}