:root {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif;
  color: #1c1c1e;
  background: #f2f2f7;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { overflow-y: auto; scrollbar-gutter: stable both-edges; scrollbar-color: var(--scrollbar-thumb, #8e8e93) transparent; }
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-track,
html::-webkit-scrollbar-corner { border: 0; background: transparent; }
html::-webkit-scrollbar-thumb { border: 0; border-radius: var(--radius-full, 999px); background: var(--scrollbar-thumb, #8e8e93); }
[hidden] { display: none !important; }
body { min-width: 320px; margin: 0; padding-bottom: calc(5.2rem + env(safe-area-inset-bottom)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.offline-status { position: sticky; z-index: 30; top: 0; padding: .65rem 1rem; background: #8b231a; color: #fff; font-size: .9rem; font-weight: 700; text-align: center; }
.is-offline button[type="submit"] { cursor: not-allowed; }
.permission-overlay { position: fixed; z-index: 50; inset: 0; display: grid; padding: 1.25rem; place-items: center; background: rgb(0 0 0 / 48%); }
.permission-card { width: min(100%, 24rem); padding: 1.5rem; border: 1px solid var(--threads-border, #d7ded8); border-radius: 1.25rem; background: var(--threads-surface, #fff); box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 25%); text-align: center; }
.permission-card h2 { margin: .5rem 0; }
.permission-card p { margin: 0; color: var(--threads-secondary, #58645c); }
.permission-icon { font-size: 2.5rem; }
.permission-actions { display: grid; gap: .6rem; margin-top: 1.25rem; }
.app-modal-open { overflow: hidden; }
.app-alert-dialog {
  width: min(calc(100% - 2.5rem), 22rem);
  max-width: none;
  padding: 0;
  border: 1px solid var(--threads-border, #e6e6e6);
  border-radius: var(--radius-surface, 1.4rem);
  background: var(--threads-surface, #fff);
  color: var(--threads-text, #0a0a0a);
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 32%);
  overflow: hidden;
}
.app-alert-dialog::backdrop {
  background: rgb(0 0 0 / 55%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.app-alert-content { padding: 1.5rem 1.35rem 1.25rem; text-align: center; }
.app-alert-content h2 { margin: 0; font-size: 1.15rem; letter-spacing: -.02em; }
.app-alert-content p { margin: .55rem 0 0; color: var(--threads-secondary, #777); font-size: .94rem; line-height: 1.55; white-space: pre-line; }
.app-alert-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--threads-border, #e6e6e6); }
.app-alert-actions:has(.app-alert-cancel[hidden]) { grid-template-columns: 1fr; }
.app-alert-actions button {
  min-height: 3.25rem;
  padding: .7rem 1rem;
  border-radius: 0;
  background: transparent;
  color: var(--threads-text, #0a0a0a);
  font-weight: 650;
}
.app-alert-actions button + button { border-left: 1px solid var(--threads-border, #e6e6e6); }
.app-alert-actions button:hover { background: var(--threads-raised, #f7f7f7); }
.app-alert-actions button:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px #007aff; }
.app-alert-actions .app-alert-confirm { color: #007aff; }
.app-alert-actions .app-alert-confirm.danger { color: #d70015; }
.settings-detail { display: block; margin-top: .15rem; color: var(--threads-secondary, #58645c); font-weight: 400; }
.shell { width: min(100% - 2rem, 42rem); margin: 0 auto; padding: 2rem 0 1.5rem; }
.card { padding: 1.5rem; border: 1px solid #d7ded8; border-radius: 1.25rem; background: #fff; box-shadow: 0 0.75rem 2rem rgb(31 50 38 / 8%); }
.eyebrow { margin: 0; color: #39734f; font-weight: 700; letter-spacing: .04em; }
h1 { margin: .2rem 0; font-size: clamp(2rem, 8vw, 3rem); line-height: 1.1; }
h2 { margin-top: 0; }
.muted { color: #58645c; }
form { display: grid; gap: .75rem; margin-top: 1.5rem; }
label { font-weight: 700; }
input, button { min-height: 3rem; border-radius: .75rem; font: inherit; }
input { width: 100%; padding: .65rem .8rem; border: 1px solid #9ca9a0; background: #fff; color: #17211b; }
button { padding: .65rem 1rem; border: 0; background: #007aff; color: #fff; font-weight: 600; cursor: pointer; }
button:hover { background: #006ee6; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #007aff; outline-offset: 2px; }
.secondary { background: #e4ebe5; color: #23452f; }
.password-field { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.compact { min-width: 4rem; }
.login-form { gap: 1.1rem; margin-top: 1.75rem; }
.login-card h1 { text-wrap: balance; }
.login-field { display: grid; gap: .5rem; }
.login-submit { margin-top: .3rem; }
.signup-card h1 { margin: 0; }
.signup-intro { margin: .65rem 0 0; }
.signup-form { gap: 1rem; margin-top: 1.6rem; }
.signup-field { display: grid; gap: .45rem; }
.signup-submit { margin-top: .35rem; }
.password-toggle.secondary { display: grid; width: 3rem; min-width: 3rem; padding: 0; place-items: center; border: 1px solid var(--threads-border); background: var(--threads-raised); color: var(--threads-text); }
.password-toggle.secondary:hover { background: var(--completion-idle-hover); }
.password-toggle svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.password-toggle svg[hidden] { display: none; }
.error { margin-top: 1rem; padding: .75rem; border-radius: .75rem; background: #ffe9e7; color: #8b231a; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.topbar form { margin: 0; }
.topbar button { white-space: nowrap; }
.empty { text-align: center; padding-block: 3rem; }
.empty-icon { font-size: 3rem; }
.date-label { margin: .5rem 0 0; }
.page-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-bottom: 1rem; }
.button-link { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; padding: .65rem 1rem; border-radius: .75rem; background: #236b43; color: #fff; font-weight: 700; text-decoration: none; }
.button-link.secondary { background: #e4ebe5; color: #23452f; }
.error-slot:not(:empty) { margin-bottom: 1rem; padding: .75rem; border-radius: .75rem; background: #ffe9e7; color: #8b231a; }
.habit-list { display: grid; gap: .8rem; }
.habit-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid #d7ded8; border-radius: 1rem; background: #fff; }
.habit-card.completed { background: #eaf6ed; border-color: #86ad91; }
.habit-card form { margin: 0; }
.habit-card-actions, .management-actions { display: flex; align-items: center; gap: .4rem; }
.share-link { color: #007aff; }
.habit-toggle { display: grid; width: 3rem; min-height: 3rem; padding: 0; place-items: center; border: 2px solid #6d7b71; border-radius: 50%; background: transparent; color: #fff; }
.habit-toggle[aria-pressed="true"] { border-color: #236b43; background: #236b43; }
.checkmark { font-size: 1.4rem; line-height: 1; }
.habit-content { display: flex; min-width: 0; align-items: center; gap: .8rem; }
.habit-content h2 { margin: 0; overflow-wrap: anywhere; font-size: 1.1rem; }
.habit-emoji { font-size: 2rem; }
.streak { margin: .15rem 0 0; color: #39734f; font-weight: 700; }
.edit-link, .back-link { color: #2d6643; font-weight: 700; }
.form-header { margin-bottom: 1.5rem; }
.form-header h1 { margin-top: 1rem; }
.habit-form { gap: 1rem; }
fieldset { margin: .5rem 0; padding: 0; border: 0; }
legend { margin-bottom: .65rem; font-weight: 700; }
.required-note { color: #58645c; font-size: .85rem; font-weight: 400; }
.weekday-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.weekday-option input, .preset-option input { position: absolute; width: 1px; min-height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.weekday-option span { display: grid; min-height: 2.8rem; place-items: center; border: 1px solid #9ca9a0; border-radius: .7rem; cursor: pointer; }
.weekday-option input:checked + span { border-color: #236b43; background: #236b43; color: #fff; font-weight: 700; }
.weekday-option input:focus-visible + span, .preset-option input:focus-visible + span { outline: 3px solid #f0a53b; outline-offset: 2px; }
.preset-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.preset-option span { display: flex; min-height: 3.5rem; align-items: flex-end; padding: .6rem; border: 2px solid transparent; border-radius: .75rem; color: #fff; cursor: pointer; text-transform: capitalize; text-shadow: 0 1px 3px #000; }
.preset-option input:checked + span { border-color: #17211b; box-shadow: inset 0 0 0 2px #fff; }
.preset-option[data-preset="dawn"] span { background: linear-gradient(135deg, #f39d72, #815ac0); }
.preset-option[data-preset="forest"] span { background: linear-gradient(135deg, #174f36, #70a37f); }
.preset-option[data-preset="ocean"] span { background: linear-gradient(135deg, #075985, #38bdf8); }
.preset-option[data-preset="sunset"] span { background: linear-gradient(135deg, #9f1239, #fb923c); }
.preset-option[data-preset="lavender"] span { background: linear-gradient(135deg, #6d28d9, #c4b5fd); }
.preset-option[data-preset="citrus"] span { background: linear-gradient(135deg, #a16207, #facc15); }
.preset-option[data-preset="midnight"] span { background: linear-gradient(135deg, #020617, #334155); }
.preset-option[data-preset="rose"] span { background: linear-gradient(135deg, #9f1239, #fda4af); }
.preset-option[data-preset="sky"] span { background: linear-gradient(135deg, #0369a1, #bae6fd); }
.preset-option[data-preset="stone"] span { background: linear-gradient(135deg, #44403c, #a8a29e); }
.form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.reminder-settings { display: grid; gap: .8rem; padding: 1rem; border: 1px solid #d7ded8; border-radius: 1rem; }
.setting-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.setting-toggle span { display: grid; gap: .1rem; }
.setting-toggle small { color: #58645c; font-weight: 400; }
.setting-toggle input { width: 1.35rem; min-height: 1.35rem; accent-color: #0a0a0a; }
.reminder-help { margin: -.35rem 0 .2rem; }
.timezone-note { margin: 0; color: #58645c; font-size: .82rem; }
.archive-form { margin-top: 1.5rem; padding: 1rem; border: 1px solid #d9b7b2; border-radius: 1rem; }
.danger-secondary { background: #f7e7e5; color: #8b231a; }
.management-list { display: grid; gap: .75rem; }
.management-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid #d7ded8; border-radius: 1rem; background: #fff; }
.management-card h2 { margin: 0; font-size: 1.1rem; }
.management-card.archived { opacity: .7; }
.status-label { margin: .15rem 0 0; }
.calendar-card { padding: 1rem; border: 1px solid #d7ded8; border-radius: 1.2rem; background: #fff; }
.calendar-nav { display: grid; grid-template-columns: 2.75rem 1fr 2.75rem; align-items: center; gap: .5rem; margin-bottom: 1rem; text-align: center; }
.calendar-nav h2,
.calendar-nav h3 { margin: 0; font-size: 1.25rem; }
.month-button { display: grid; width: 2.75rem; height: 2.75rem; min-height: 2.75rem; padding: 0; place-items: center; border-radius: 50%; background: #e4ebe5; color: #23452f; text-decoration: none; }
.month-button svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.weekday-header { margin-bottom: .3rem; color: #58645c; font-size: .8rem; font-weight: 700; text-align: center; }
.calendar-day { display: flex; min-height: 3.55rem; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; margin: .12rem; border: 2px solid transparent; border-radius: .7rem; color: #17211b; text-decoration: none; }
.calendar-day:hover { background: #edf2ed; }
.calendar-day.outside-month { opacity: .4; }
.calendar-day.selected { border-color: #236b43; }
.calendar-day[aria-current="date"] .day-number { text-decoration: none; }
.day-number { font-weight: 700; }
.day-summary { min-height: 1rem; color: #58645c; font-size: .68rem; }
.calendar-day.state-complete { background: #d8f0de; }
.calendar-day.state-partial { background: #fff0bf; }
.calendar-day.state-missed { background: #f8dfdc; }
.calendar-day.state-future { color: #7a837d; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin-top: 1rem; color: #58645c; font-size: .75rem; }
.calendar-legend span { display: flex; align-items: center; gap: .3rem; }
.legend-dot { width: .65rem; height: .65rem; border-radius: 50%; background: #d7ded8; }
.legend-dot.complete { background: #70a37f; }
.legend-dot.partial { background: #e2b93f; }
.legend-dot.missed { background: #d98d83; }
.selected-day { margin-top: 1.5rem; }
.selected-day-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.selected-day-header h2 { margin: .2rem 0 0; font-size: 1.25rem; }
.calendar-habit-list { display: grid; gap: .65rem; }
.calendar-habit-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .9rem; border: 1px solid #d7ded8; border-radius: 1rem; background: #fff; }
.calendar-habit-card.completed { border-color: #86ad91; background: #eaf6ed; }
.calendar-habit-content h3 { margin: 0; font-size: 1rem; }
.calendar-habit-content .status-label { color: #39734f; font-weight: 700; }
.historical-streak { margin: .1rem 0 0; font-size: .8rem; }
.calendar-habit-card form { margin: 0; }
.compact-empty { padding-block: 1.5rem; }
.htmx-request { opacity: .65; }
.share-composer { display: grid; gap: 1.1rem; }
.share-preview-frame { width: min(100%, 21.5rem); margin: 0 auto; overflow: hidden; border: 1px solid var(--threads-border); border-radius: 1.4rem; background: #e9e9eb; box-shadow: 0 .75rem 2rem rgb(0 0 0 / 13%); }
.share-preview-frame canvas { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; }
.share-status { min-height: 1.5rem; margin: 0; color: #58645c; text-align: center; }
.share-actions { position: relative; z-index: 1; display: flex; justify-content: center; gap: .75rem; }
.share-actions button { display: grid; width: 3.15rem; min-height: 3.15rem; padding: 0; place-items: center; border-radius: 50%; background: var(--threads-strong, #0a0a0a); color: var(--threads-bg, #fff); }
.share-actions button:hover { background: var(--threads-strong, #0a0a0a); opacity: .82; }
.share-actions svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.share-actions button:disabled { cursor: progress; opacity: .55; }
.share-help { margin-top: 0; text-align: center; }

@media (prefers-color-scheme: dark) {
  :root { color: #edf4ee; background: #111713; }
  .card { border-color: #334139; background: #1a221d; }
  .muted { color: #b8c3bb; }
  input { border-color: #64736a; background: #111713; color: #edf4ee; }
  .secondary { background: #334139; color: #edf4ee; }
  .habit-card { border-color: #334139; background: #1a221d; }
  .management-card { border-color: #334139; background: #1a221d; }
  .calendar-card, .calendar-habit-card { border-color: #334139; background: #1a221d; }
  .calendar-habit-card.completed { border-color: #4f765b; background: #1c3524; }
  .calendar-day { color: #edf4ee; }
  .calendar-day:hover { background: #29332d; }
  .calendar-day.state-complete { background: #1c4a2a; }
  .calendar-day.state-partial { background: #4d3d13; }
  .calendar-day.state-missed { background: #4b2521; }
  .habit-card.completed { border-color: #4f765b; background: #1c3524; }
  .button-link.secondary { background: #334139; color: #edf4ee; }
  .edit-link, .back-link { color: #8fd3a5; }
}

/* Mobile app navigation and iOS-inspired grouped surfaces */
.app-header { margin-bottom: 1.4rem; }
.app-header h1 { letter-spacing: -.035em; }
.eyebrow { color: #6e6e73; font-size: .85rem; letter-spacing: .01em; }
.habit-list, .management-list { gap: .7rem; }
.habit-card, .management-card {
  min-height: 5rem;
  gap: .9rem;
  padding: .9rem 1rem;
  border-color: rgb(60 60 67 / 12%);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 3%);
}
.habit-card.completed { border-color: #b9ddc0; background: #eef8f0; }
.habit-toggle[aria-pressed="true"] { border-color: #34c759; background: #34c759; }
.habit-emoji { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; flex: 0 0 auto; }
.default-habit-icon { border-radius: .75rem; background: #e9e9eb; color: #6e6e73; }
.default-habit-icon svg { width: 1.65rem; height: 1.65rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.streak { color: #248a3d; font-weight: 600; }
.edit-link, .back-link { color: #007aff; font-weight: 600; }
.icon-button { display: grid; width: 2.75rem; min-height: 2.75rem; place-items: center; border-radius: 50%; background: #f2f2f7; text-decoration: none; }
.icon-button svg { width: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.add-habit-row { display: flex; min-height: 3.75rem; align-items: center; justify-content: center; gap: .65rem; margin-top: .85rem; border: 1.5px dashed #a7a7ad; border-radius: 1rem; color: #007aff; font-weight: 600; text-decoration: none; }
.add-habit-row:hover { background: rgb(0 122 255 / 6%); }
.add-habit-icon { display: block; width: 1.7rem; height: 1.7rem; flex: 0 0 1.7rem; padding: .3rem; border-radius: 50%; background: #007aff; color: #fff; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }
.required-note, .optional-note { color: #8e8e93; font-size: .85rem; font-weight: 400; }
.field-help { margin: -.55rem 0 0; color: #6e6e73; font-size: .82rem; }
.calendar-day.selected { border-color: #007aff; }
.month-button { background: #e9e9eb; color: #007aff; }
.tab-bar { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(4, 1fr); width: min(100%, 44rem); min-height: calc(4.7rem + env(safe-area-inset-bottom)); margin: 0 auto; padding: .45rem .55rem calc(.35rem + env(safe-area-inset-bottom)); border-top: .5px solid rgb(60 60 67 / 28%); background: rgb(249 249 249 / 92%); box-shadow: 0 -.25rem 1.5rem rgb(0 0 0 / 5%); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.tab-item { display: flex; min-width: 0; min-height: 3.65rem; flex-direction: column; align-items: center; justify-content: center; gap: .18rem; border-radius: .7rem; color: #8e8e93; font-size: .68rem; font-weight: 500; line-height: 1.15; text-align: center; text-decoration: none; }
.tab-item svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.tab-item.active { color: #007aff; }
.section-title { margin: 0 0 .5rem .9rem; color: #6e6e73; font-size: .8rem; font-weight: 500; text-transform: uppercase; }
.settings-group { margin-bottom: 1.5rem; }
.settings-form { padding: .85rem 1rem; border-bottom: .5px solid #d1d1d6; border-radius: .85rem .85rem 0 0; background: #fff; }
.settings-form label { display: block; margin-bottom: .45rem; font-weight: 600; }
.settings-inline-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; }
.settings-inline-control input { min-width: 0; }
.settings-inline-control button { align-self: stretch; }
.settings-inline-error, .settings-inline-success { margin: .45rem 0 0; font-size: .82rem; }
.settings-inline-error { color: #d70015; }
.settings-inline-success { color: #236b43; }
.settings-row { display: flex; min-height: 3.4rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-bottom: .5px solid #d1d1d6; background: #fff; }
.settings-row button { flex: 0 0 auto; }
.settings-row:last-child { border-bottom: 0; border-radius: 0 0 .85rem .85rem; }
.settings-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.settings-value { overflow-wrap: anywhere; color: #6e6e73; text-align: right; }
.settings-action { margin: 0; }
.settings-button { width: 100%; min-height: 3.4rem; border-radius: .85rem; background: #fff; color: #ff3b30; font-weight: 500; }
.settings-button:hover { background: #fff; }

@media (prefers-color-scheme: dark) {
  :root { color: #f5f5f7; background: #000; }
  .default-habit-icon, .icon-button { background: #2c2c2e; color: #aeaeb2; }
  .add-habit-row { border-color: #48484a; color: #0a84ff; }
  .tab-bar { border-color: #38383a; background: rgb(28 28 30 / 90%); }
  .tab-item { color: #8e8e93; }
  .tab-item.active { color: #0a84ff; }
  .settings-form, .settings-row, .settings-button { border-color: #38383a; background: #1c1c1e; }
  .settings-inline-success { color: #62c47b; }
  .settings-button:hover { background: #1c1c1e; }
  .edit-link, .back-link { color: #0a84ff; }
  .calendar-day.selected { border-color: #0a84ff; }
  .month-button { background: #2c2c2e; color: #0a84ff; }
  .share-preview-frame { background: #2c2c2e; }
  .share-status { color: #aeaeb2; }
}

/* Threads-inspired monochrome content with a Liquid Glass navigation layer */
:root {
  color: #0a0a0a;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
  --threads-bg: #fff;
  --threads-surface: #fff;
  --threads-raised: #f7f7f7;
  --threads-text: #0a0a0a;
  --threads-secondary: #777;
  --threads-border: #e6e6e6;
  --threads-strong: #000;
  --completion-accent: #34c759;
  --completion-muted: #c7c7cc;
  --completion-idle-bg: #f2f2f7;
  --completion-idle-hover: #e5e5ea;
  --scrollbar-thumb: #8e8e93;
  --radius-surface: 1.4rem;
  --radius-section: 1.25rem;
  --radius-control: .875rem;
  --radius-full: 999px;
}

body {
  padding-bottom: calc(6.8rem + env(safe-area-inset-bottom));
  background: var(--threads-bg);
  color: var(--threads-text);
}

.shell {
  width: min(100% - 2rem, 40rem);
  padding-top: 1.5rem;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 8vw, 2.65rem);
  font-weight: 750;
  letter-spacing: -.05em;
}

h2, h3 { letter-spacing: -.02em; }
.muted, .date-label, .field-help, .settings-value { color: var(--threads-secondary); }
.app-header { margin-bottom: 1.5rem; padding: .25rem .15rem 0; }
.app-header .date-label { margin-top: .45rem; font-size: .92rem; }

button,
.button-link {
  border-radius: var(--radius-full);
  background: var(--threads-strong);
  color: var(--threads-bg);
  font-weight: 650;
}

button:hover, .button-link:hover { background: color-mix(in srgb, var(--threads-strong) 82%, var(--threads-bg)); color: var(--threads-bg); }
button:focus-visible, input:focus-visible, a:focus-visible { outline-color: var(--threads-text); }
.secondary, .button-link.secondary { background: var(--threads-raised); color: var(--threads-text); }
.secondary:hover, .button-link.secondary:hover { background: var(--completion-idle-hover); color: var(--threads-text); }

input {
  border-color: var(--threads-border);
  border-radius: var(--radius-control);
  background: var(--threads-surface);
  color: var(--threads-text);
}

.card,
.calendar-card {
  border: 1px solid var(--threads-border);
  border-radius: var(--radius-surface);
  background: var(--threads-surface);
  box-shadow: none;
}

.habit-list,
.management-list {
  overflow: hidden;
  gap: 0;
  border: 1px solid var(--threads-border);
  border-radius: var(--radius-surface);
  background: var(--threads-surface);
}

.habit-card,
.management-card {
  min-height: 5.3rem;
  border: 0;
  border-bottom: 1px solid var(--threads-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.habit-card:last-child,
.management-card:last-child { border-bottom: 0; }
.habit-card { grid-template-columns: minmax(0, 1fr) auto; }
.habit-card.completed { border-color: var(--threads-border); background: var(--threads-raised); }
.habit-toggle {
  border: 0;
  background: var(--completion-idle-bg);
  color: var(--completion-muted);
  transition: background-color 150ms ease, color 150ms ease;
}
.habit-toggle:hover { background: var(--completion-idle-hover); }
.habit-toggle[aria-pressed="true"] { background: var(--completion-accent); color: #fff; }
.streak { color: var(--threads-secondary); font-size: .86rem; font-weight: 500; }

.default-habit-icon,
.icon-button {
  background: var(--threads-raised);
  color: var(--threads-text);
}

.icon-button:hover { background: #ededed; }
.edit-link, .back-link { color: var(--threads-text); }
.back-link { text-decoration: none; }

.add-habit-row {
  border: 1px solid var(--threads-border);
  border-radius: var(--radius-surface);
  background: var(--threads-surface);
  color: var(--threads-text);
}

.add-habit-row:hover { background: var(--threads-raised); }
.add-habit-icon { background: var(--threads-strong); color: var(--threads-bg); }

.weekday-option span { border-color: var(--threads-border); border-radius: var(--radius-full); }
.weekday-option input:checked + span { border-color: var(--threads-strong); background: var(--threads-strong); color: var(--threads-bg); }
.weekday-option input:focus-visible + span,
.preset-option input:focus-visible + span { outline-color: var(--threads-text); }

.preset-option input:checked + span { border-color: var(--threads-strong); }
.archive-form { border-color: var(--threads-border); }
.danger-secondary { background: #fff1f0; color: #d70015; }
.danger-secondary:hover { background: #ffe2df; color: #b42318; }

.calendar-card { padding: 1rem .75rem; }
.month-button { border-radius: 50%; background: var(--threads-raised); color: var(--threads-text); }
.calendar-day { position: relative; border-radius: var(--radius-control); color: var(--threads-text); }
.calendar-day:hover { background: var(--threads-raised); }
.calendar-day.selected { border-color: transparent; background: transparent; box-shadow: inset 0 0 0 1.5px rgb(10 10 10 / 38%); }
.calendar-day[aria-current="date"] { box-shadow: inset 0 0 0 1px rgb(10 10 10 / 16%); }
.calendar-day[aria-current="date"].selected { box-shadow: inset 0 0 0 1.5px rgb(10 10 10 / 38%); }
.calendar-day[aria-current="date"].selected { background: transparent; }
.calendar-day[aria-current="date"] .day-number { font-weight: 800; }
.calendar-day.state-complete,
.calendar-day.state-partial,
.calendar-day.state-missed { background: transparent; color: var(--threads-text); }
.calendar-day.state-future { color: #8e8e8e; }
.calendar-status-dot { display: block; width: .38rem; height: .38rem; border-radius: 50%; }
.calendar-status-dot.complete { background: #34c759; }
.calendar-status-dot.partial { background: #ffd60a; }
.calendar-status-dot.missed { background: #aeaeb2; }
.calendar-legend { justify-content: center; margin-top: .75rem; text-align: center; }
.legend-dot.complete { background: #34c759; }
.legend-dot.partial { background: #ffd60a; }
.legend-dot.missed { background: #aeaeb2; }

.calendar-habit-list {
  overflow: hidden;
  gap: 0;
  border: 1px solid var(--threads-border);
  border-radius: var(--radius-section);
}

.calendar-habit-card {
  border: 0;
  border-bottom: 1px solid var(--threads-border);
  border-radius: 0;
  background: var(--threads-surface);
}

.calendar-habit-card:last-child { border-bottom: 0; }
.calendar-habit-card.completed { border-color: var(--threads-border); background: var(--threads-raised); }
.calendar-habit-toggle { width: 3rem; min-width: 3rem; }

.settings-row,
.settings-button {
  border-color: var(--threads-border);
  background: var(--threads-surface);
}

.settings-surface {
  overflow: hidden;
  border: 1px solid var(--threads-border);
  border-radius: var(--radius-surface);
  background: var(--threads-surface);
}
.settings-surface .settings-form,
.settings-surface .settings-row,
.settings-surface .settings-button { border-radius: 0; }
.settings-surface .settings-row { border-bottom: 0; }
.settings-surface .settings-action { border-top: 1px solid var(--threads-border); }
.settings-surface-message { margin: 0; padding: 0 1rem .75rem; }
.settings-navigation-row { width: 100%; margin: 0; border: 0; color: var(--threads-text); font-weight: 500; text-align: left; }
.settings-navigation-row:hover { background: var(--threads-raised); }
.settings-navigation-row svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--threads-secondary); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.invitation-surface { overflow: visible; }
.member-invite-card { display: grid; gap: .8rem; padding: 1rem; }
.member-invite-empty { display: flex; min-height: 4.25rem; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem 1rem; }
.member-invite-empty p, .member-invite-empty form { margin: 0; }
.member-invite-empty p { color: var(--threads-secondary); font-size: .88rem; }
.member-invite-empty button { min-height: 2.6rem; }
.member-invite-link { display: flex; min-width: 0; align-items: center; gap: .65rem; padding: .75rem .85rem; border-radius: var(--radius-control); background: var(--threads-raised); }
.member-invite-link svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; fill: none; stroke: var(--threads-secondary); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.member-invite-link span { min-width: 0; overflow: hidden; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.member-invite-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.member-invite-footer p { display: grid; min-width: 0; gap: .05rem; margin: 0; }
.member-invite-footer strong { font-size: .88rem; }
.member-invite-footer span { color: var(--threads-secondary); font-size: .72rem; }
.member-invite-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .4rem; }
.member-invite-actions form { margin: 0; }
.settings-password-dialog { width: min(calc(100% - 2rem), 28rem); max-width: none; padding: 0; border: 1px solid var(--threads-border); border-radius: var(--radius-surface); background: var(--threads-surface); color: var(--threads-text); box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 32%); }
.settings-password-dialog::backdrop { background: rgb(0 0 0 / 55%); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.settings-password-dialog form { gap: 0; margin: 0; }
.settings-password-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.25rem 1rem; }
.settings-password-dialog h2 { margin: 0; font-size: 1.2rem; }
.settings-password-dialog header p { margin: .25rem 0 0; color: var(--threads-secondary); font-size: .82rem; }
.dialog-close { display: grid; width: 2.25rem; min-width: 2.25rem; min-height: 2.25rem; padding: 0; place-items: center; border-radius: var(--radius-full); background: var(--threads-raised); color: var(--threads-secondary); }
.dialog-close:hover { background: var(--completion-idle-hover); }
.dialog-close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.settings-password-fields { display: grid; gap: .45rem; padding: 0 1.25rem 1.25rem; }
.settings-password-fields label:not(:first-of-type) { margin-top: .35rem; }
.settings-password-error { margin: .5rem 0 0; padding: .7rem .8rem; border-radius: var(--radius-control); background: var(--danger-surface, #fff0ef); color: #d70015; font-size: .84rem; }
.settings-password-dialog footer { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--threads-border); }
.settings-password-dialog footer button { min-height: 2.85rem; }
.settings-theme-row { display: flex; }
.theme-options { display: flex; justify-content: flex-end; gap: .3rem; margin: 0; }
.theme-option { position: relative; font-weight: 500; }
.theme-option input { position: absolute; width: 1px; min-height: 1px; opacity: 0; pointer-events: none; }
.theme-option span { display: grid; width: 2.5rem; min-height: 2.5rem; place-items: center; border-radius: var(--radius-full); background: var(--threads-raised); color: var(--threads-secondary); cursor: pointer; }
.theme-option svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.theme-option input:checked + span { background: var(--threads-strong); color: var(--threads-bg); font-weight: 650; }
.theme-option input:focus-visible + span { outline: 3px solid var(--threads-text); outline-offset: 2px; }
.timezone-device-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.timezone-device-copy { display: grid; min-width: 0; gap: .1rem; }
.timezone-device-copy output { overflow-wrap: anywhere; }
.timezone-device-row + .settings-detail { margin-top: .45rem; }

.settings-button { color: #d70015; }
.section-title { color: var(--threads-secondary); }

.tab-bar {
  right: auto;
  bottom: calc(.75rem + env(safe-area-inset-bottom));
  left: 50%;
  width: min(calc(100% - 1.5rem), 40rem);
  min-height: 4.65rem;
  overflow: hidden;
  isolation: isolate;
  padding: .38rem;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: var(--radius-full);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 72%), rgb(242 242 242 / 55%));
  box-shadow:
    0 14px 36px rgb(0 0 0 / 16%),
    0 2px 8px rgb(0 0 0 / 8%),
    inset 0 1px 0 rgb(255 255 255 / 92%),
    inset 0 -1px 0 rgb(255 255 255 / 38%);
  transform: translateX(-50%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}

.tab-bar::before {
  position: absolute;
  z-index: -1;
  top: -55%;
  left: 7%;
  width: 55%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(255 255 255 / 78%), transparent 68%);
  content: "";
  pointer-events: none;
}

.tab-item {
  position: relative;
  min-height: 3.85rem;
  gap: .08rem;
  border-radius: var(--radius-full);
  color: #929292;
  font-size: .64rem;
  font-weight: 550;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.tab-item svg { width: 1.6rem; height: 1.6rem; stroke-width: 1.9; }
.tab-item.active { background: rgb(255 255 255 / 62%); color: var(--threads-text); box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%); }
.tab-item:active { transform: scale(.96); }

@media (prefers-reduced-transparency: reduce) {
  .tab-bar { border-color: var(--threads-border); background: var(--threads-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .tab-bar::before { display: none; }
}

@media (prefers-color-scheme: dark) {
  :root {
    color: #f5f5f5;
    background: #000;
    --threads-bg: #000;
    --threads-surface: #080808;
    --threads-raised: #1c1c1e;
    --threads-text: #f5f5f5;
    --threads-secondary: #b0b0b5;
    --threads-border: #3a3a3c;
    --threads-strong: #fff;
    --completion-accent: #30d158;
    --completion-muted: #a1a1a6;
    --completion-idle-bg: #2c2c2e;
    --completion-idle-hover: #3a3a3c;
    --scrollbar-thumb: #636366;
  }

  .habit-card, .management-card { background: transparent; }
  .habit-card.completed, .calendar-habit-card.completed { background: var(--threads-raised); }
  .habit-toggle[aria-pressed="true"] { color: #071208; }
  .icon-button:hover { background: #202020; }
  .danger-secondary { background: #2b0b0c; color: #ff6961; }
  .calendar-day { color: var(--threads-text); }
  .calendar-day:hover { background: #171717; }
  .calendar-day.selected { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 38%); }
  .calendar-day[aria-current="date"] { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%); }
  .calendar-day[aria-current="date"].selected { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 38%); }
  .calendar-day.state-complete,
  .calendar-day.state-partial,
  .calendar-day.state-missed { background: transparent; color: var(--threads-text); }
  .calendar-status-dot.complete { background: #30d158; }
  .calendar-status-dot.partial { background: #ffd60a; }
  .calendar-status-dot.missed { background: #8e8e93; }
  .calendar-day.state-future { color: #777; }
  .legend-dot.complete { background: #30d158; }
  .legend-dot.partial { background: #ffd60a; }
  .legend-dot.missed { background: #8e8e93; }
  .secondary, .button-link.secondary, .detail-action, .month-button { border: 1px solid var(--threads-border); background: #121214; color: var(--threads-text); }
  .detail-action:hover, .secondary:hover, .button-link.secondary:hover, .month-button:hover { background: #242426; color: var(--threads-text); }
  .danger-secondary:hover { background: #431416; color: #ff8a84; }
  .detail-delete .detail-action { border-color: #5b2428; background: #251113; color: #ff6961; }
  .detail-delete .detail-action:hover { background: #351719; }
  .settings-form, .settings-row, .settings-button { background: var(--threads-surface); }
  .settings-button { color: #ff6961; }
  .tab-bar {
    border-color: rgb(255 255 255 / 16%);
    background: linear-gradient(180deg, rgb(42 42 42 / 72%), rgb(18 18 18 / 64%));
    box-shadow:
      0 16px 42px rgb(0 0 0 / 58%),
      0 2px 10px rgb(0 0 0 / 45%),
      inset 0 1px 0 rgb(255 255 255 / 20%),
      inset 0 -1px 0 rgb(255 255 255 / 5%);
  }
  .tab-bar::before { background: radial-gradient(ellipse, rgb(255 255 255 / 16%), transparent 68%); }
  .tab-item { color: #a0a0a5; }
  .tab-item.active { background: rgb(255 255 255 / 11%); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%); }
}

/* Compact icon-only navigation, proportioned from the Threads iPhone bar */
body { padding-bottom: calc(6.25rem + env(safe-area-inset-bottom)); }

.tab-bar {
  bottom: calc(.95rem + env(safe-area-inset-bottom));
  left: 50%;
  width: min(calc(100% - 3.5rem), 35rem);
  min-height: 3.45rem;
  padding: .28rem;
  border-radius: var(--radius-full);
}

.tab-item {
  min-height: 2.9rem;
  gap: 0;
  border-radius: var(--radius-full);
}

.tab-item .tab-icon {
  width: 1.65rem;
  height: 1.65rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.85;
}

.tab-item.active .tab-icon { stroke-width: 2.15; }
.tab-item .home-fill { fill: transparent; stroke: none; }
.tab-item.active .home-fill { fill: currentColor; }
.tab-item.active .home-icon > path:last-child { stroke: currentColor; }
.tab-item.active { background: rgb(0 0 0 / 6%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 75%); }

@media (prefers-color-scheme: dark) {
  .tab-item.active { background: rgb(255 255 255 / 11%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%); }
}

/* Habit rows use separate navigation and completion targets. */
.habit-card-main {
  display: flex;
  min-width: 0;
  min-height: 5.3rem;
  align-items: center;
  gap: .8rem;
  margin: -.9rem 0 -.9rem -1rem;
  padding: .9rem 0 .9rem 1rem;
  border-radius: 0;
  color: var(--threads-text);
  text-decoration: none;
}

.habit-card { transition: background-color 150ms ease; }
.habit-card:hover { background: #f2f2f2; }
.habit-card-main:hover { background: transparent; }
.habit-card-main h2 { margin: 0; overflow-wrap: anywhere; font-size: 1.1rem; }
.habit-card .habit-toggle { flex: 0 0 3rem; }
.habit-card .habit-toggle:hover { background: var(--completion-idle-hover); }
.habit-card .habit-toggle[aria-pressed="true"],
.habit-card .habit-toggle[aria-pressed="true"]:hover {
  background: var(--completion-accent);
  color: #fff;
}

.management-card { display: block; padding: 0; }
.management-card-link {
  display: grid;
  width: 100%;
  min-height: 5.3rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  padding: .9rem 1rem;
  color: var(--threads-text);
  text-decoration: none;
}

.management-card-link:hover { background: var(--threads-raised); }
.management-card-copy { min-width: 0; }
.habit-metadata { display: flex; min-width: 0; flex-wrap: wrap; gap: 0 .35rem; margin: .2rem 0 0; color: var(--threads-secondary); font-size: .82rem; font-weight: 500; }
.reminder-time { display: inline-flex; align-items: center; gap: .2rem; }
.reminder-clock { width: .9rem; height: .9rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.row-chevron { width: 1.15rem; height: 1.15rem; justify-self: end; fill: none; stroke: var(--threads-secondary); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.past-habits { margin-top: 1.25rem; }
.past-habits > summary { display: grid; min-height: 3.5rem; grid-template-columns: auto auto 1fr; align-items: center; justify-content: start; gap: .35rem; padding: 0 .25rem; color: var(--threads-text); font-weight: 650; cursor: pointer; list-style: none; }
.past-habits > summary::-webkit-details-marker { display: none; }
.past-habit-chevron { width: 1.15rem; height: 1.15rem; justify-self: start; fill: none; stroke: var(--threads-secondary); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: transform 150ms ease; }
.past-habits[open] .past-habit-chevron { transform: rotate(180deg); }
.past-habit-list { margin-top: .35rem; }
.additional-habits { margin-top: .8rem; }
.additional-habits > summary { display: grid; min-height: 3.5rem; grid-template-columns: auto auto 1fr; align-items: center; justify-content: start; gap: .35rem; padding: 0 .25rem; color: var(--threads-text); font-weight: 650; cursor: pointer; list-style: none; }
.additional-habits > summary::-webkit-details-marker { display: none; }
.additional-habits-chevron { width: 1.15rem; height: 1.15rem; justify-self: start; fill: none; stroke: var(--threads-secondary); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: transform 150ms ease; }
.additional-habits[open] .additional-habits-chevron { transform: rotate(180deg); }
.additional-habit-list { overflow: hidden; margin-top: .35rem; border: 1px solid var(--threads-border); border-radius: var(--radius-section); background: var(--threads-surface); }
.additional-habit-card { border: 0; border-bottom: 1px solid var(--threads-border); border-radius: 0; }
.additional-habit-card:last-child { border-bottom: 0; }
.detail-header { margin-bottom: 1.25rem; }
.detail-title { display: flex; min-width: 0; align-items: center; gap: .55rem; margin-top: 1.25rem; }
.detail-title h1 { overflow-wrap: anywhere; }
.detail-icon { width: 3.75rem; height: 3.75rem; font-size: 3rem; }
.detail-start-date { margin: .3rem 0 0; font-size: .82rem; }
.detail-status { margin: .2rem 0 0; }
.detail-achievements { padding: .55rem; border: 1px solid var(--threads-border); border-radius: var(--radius-section); }
.detail-achievement-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; margin: 0; }
.detail-achievement { min-width: 0; padding: .9rem .2rem .85rem; border-radius: calc(var(--radius-section) - .45rem); text-align: center; }
.detail-achievement dt { color: var(--threads-secondary); font-size: .69rem; font-weight: 650; line-height: 1.35; letter-spacing: -.01em; white-space: nowrap; }
.detail-achievement dd { display: flex; align-items: baseline; justify-content: center; margin: .55rem 0 0; }
.detail-achievement strong { font-size: 2.25rem; font-variant-numeric: tabular-nums; line-height: .95; letter-spacing: -.06em; }
.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .8rem; }
.detail-action { display: flex; min-height: 3.25rem; align-items: center; justify-content: center; gap: .5rem; border: 1px solid var(--threads-border); border-radius: var(--radius-full); background: var(--threads-surface); color: var(--threads-text); font-weight: 650; text-decoration: none; }
.detail-action:hover { background: var(--threads-raised); }
.detail-action svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.habit-calendar-section { margin-top: 1.5rem; }
.habit-calendar-card { padding: 1rem .75rem; }
.habit-calendar-day { cursor: default; }
.habit-calendar-day:hover { background: transparent; }
.habit-calendar-section + .detail-delete,
.habit-calendar-section + .detail-restore { margin-top: 1.5rem; }
.detail-delete { margin-top: .8rem; }
.detail-delete .detail-action { width: 100%; color: #d70015; }
.detail-restore { margin-top: .8rem; }
.detail-restore .detail-action { width: 100%; }
.detail-notice { margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid var(--threads-border); border-radius: var(--radius-control); background: var(--threads-raised); }
.section-heading-row, .invite-link-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.section-heading-row .section-title { margin: 0; }
.admin-item { padding: 1rem; border-bottom: 1px solid var(--threads-border); }
.admin-item:last-child { border-bottom: 0; }
.admin-item p { margin: .35rem 0; }
.section-count { margin-left: .2rem; font-variant-numeric: tabular-nums; }
.admin-surface .settings-surface-message { padding: 1rem; }
.member-disclosure { border-bottom: 1px solid var(--threads-border); }
.member-disclosure:last-child { border-bottom: 0; }
.member-disclosure > summary { display: flex; min-height: 3.75rem; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 1rem; cursor: pointer; list-style: none; }
.member-disclosure > summary::-webkit-details-marker { display: none; }
.member-disclosure > summary:hover { background: var(--threads-raised); }
.member-summary-text { display: grid; min-width: 0; gap: .12rem; }
.member-summary-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-summary-text > span { color: var(--threads-secondary); font-size: .78rem; }
.member-disclosure-chevron { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; fill: none; stroke: var(--threads-secondary); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: transform 150ms ease; }
.member-disclosure[open] .member-disclosure-chevron { transform: rotate(180deg); }
.member-details { padding: 1rem; border-top: 1px solid var(--threads-border); background: transparent; }
.member-facts { display: grid; gap: .6rem; margin: 0; }
.member-facts > div { display: grid; grid-template-columns: minmax(6rem, auto) minmax(0, 1fr); gap: .75rem; }
.member-facts dt { color: var(--threads-secondary); font-size: .82rem; }
.member-facts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: .82rem; text-align: right; }
.member-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: 1rem; }
.member-actions form { margin: 0; }
.member-actions .member-invite-action { grid-column: 1 / -1; }
.member-actions button { width: 100%; min-height: 2.75rem; padding: .5rem .65rem; font-size: .82rem; }
.member-invitation { margin: .85rem 0; padding: .8rem; border: 1px solid var(--threads-border); border-radius: var(--radius-control); background: var(--threads-raised); }
.member-invitation > .settings-detail:first-child { display: block; margin-bottom: .4rem; }
.invite-url { overflow-wrap: anywhere; font-size: .82rem; }
.detail-list { overflow: hidden; margin-top: 1.5rem; border: 1px solid var(--threads-border); border-radius: var(--radius-section); }
.detail-row { display: flex; min-height: 3.6rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--threads-border); }
.detail-row:last-child { border-bottom: 0; }
.detail-row > span { color: var(--threads-secondary); }
.detail-row > strong { overflow-wrap: anywhere; text-align: right; }
.habit-form { gap: .9rem; }
.habit-form-section { display: grid; gap: .8rem; padding: 1rem; border: 1px solid var(--threads-border); border-radius: var(--radius-surface); background: var(--threads-surface); }
.habit-form-section fieldset { margin: 0; }
.schedule-form-section { gap: 1rem; }
.habit-form-field { display: grid; gap: .45rem; }
.setting-toggle.habit-form-field { display: flex; }
.time-toggle { padding: .15rem 0; }
.time-settings { display: grid; gap: .8rem; transition: opacity 150ms ease; }
.time-settings.is-disabled { opacity: .42; }
.time-settings:disabled { pointer-events: none; }
.notification-toggle { padding: .85rem; border: 1px solid var(--threads-border); border-radius: var(--radius-control); background: var(--threads-raised); }
.share-header { margin-bottom: .8rem; }
.habit-form > .form-actions { margin-top: .15rem; }

/* Radius hierarchy: surfaces > nested sections > compact controls > circles/pills. */
.permission-card,
.share-preview-frame { border-radius: var(--radius-surface); }
.reminder-settings,
.archive-form { border-radius: var(--radius-section); }
.default-habit-icon,
.preset-option span,
.error,
.error-slot:not(:empty) { border-radius: var(--radius-control); }

@media (prefers-color-scheme: dark) {
  .habit-card:hover { background: #1b1b1b; }
  .habit-card-main:hover { background: transparent; }
}

/* Per-device theme overrides. System mode continues to use prefers-color-scheme. */
:root[data-theme="light"] {
  color: #0a0a0a;
  background: #fff;
  color-scheme: light;
  --threads-bg: #fff;
  --threads-surface: #fff;
  --threads-raised: #f7f7f7;
  --threads-text: #0a0a0a;
  --threads-secondary: #777;
  --threads-border: #e6e6e6;
  --threads-strong: #000;
  --completion-accent: #34c759;
  --completion-muted: #c7c7cc;
  --completion-idle-bg: #f2f2f7;
  --completion-idle-hover: #e5e5ea;
  --scrollbar-thumb: #8e8e93;
}

:root[data-theme="dark"] {
  color: #f5f5f5;
  background: #000;
  color-scheme: dark;
  --threads-bg: #000;
  --threads-surface: #080808;
    --threads-raised: #1c1c1e;
    --threads-text: #f5f5f5;
    --threads-secondary: #b0b0b5;
    --threads-border: #3a3a3c;
  --threads-strong: #fff;
  --completion-accent: #30d158;
    --completion-muted: #a1a1a6;
  --completion-idle-bg: #2c2c2e;
  --completion-idle-hover: #3a3a3c;
  --scrollbar-thumb: #636366;
}

:root[data-theme="light"] .default-habit-icon,
:root[data-theme="light"] .icon-button { background: var(--threads-raised); color: var(--threads-text); }
:root[data-theme="light"] .icon-button:hover { background: #ededed; }
:root[data-theme="light"] .danger-secondary { background: #fff1f0; color: #d70015; }
:root[data-theme="light"] .calendar-day:hover { background: var(--threads-raised); }
:root[data-theme="light"] .calendar-day.selected { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(10 10 10 / 38%); }
:root[data-theme="light"] .calendar-day[aria-current="date"] { box-shadow: inset 0 0 0 1px rgb(10 10 10 / 16%); }
:root[data-theme="light"] .calendar-day[aria-current="date"].selected { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(10 10 10 / 38%); }
:root[data-theme="light"] .calendar-status-dot.complete,
:root[data-theme="light"] .legend-dot.complete { background: #34c759; }
:root[data-theme="light"] .calendar-status-dot.partial,
:root[data-theme="light"] .legend-dot.partial { background: #ffd60a; }
:root[data-theme="light"] .calendar-status-dot.missed,
:root[data-theme="light"] .legend-dot.missed { background: #aeaeb2; }
:root[data-theme="light"] .settings-form,
:root[data-theme="light"] .settings-row,
:root[data-theme="light"] .settings-button { background: var(--threads-surface); }
:root[data-theme="light"] .settings-button { color: #d70015; }
:root[data-theme="light"] .tab-bar {
  border-color: rgb(255 255 255 / 72%);
  background: linear-gradient(180deg, rgb(255 255 255 / 72%), rgb(242 242 242 / 55%));
  box-shadow: 0 14px 36px rgb(0 0 0 / 16%), 0 2px 8px rgb(0 0 0 / 8%), inset 0 1px 0 rgb(255 255 255 / 92%), inset 0 -1px 0 rgb(255 255 255 / 38%);
}
:root[data-theme="light"] .tab-bar::before { background: radial-gradient(ellipse, rgb(255 255 255 / 78%), transparent 68%); }
:root[data-theme="light"] .tab-item { color: #929292; }
:root[data-theme="light"] .tab-item.active { background: rgb(0 0 0 / 6%); color: var(--threads-text); box-shadow: inset 0 1px 0 rgb(255 255 255 / 75%); }
:root[data-theme="light"] .habit-card:hover { background: #f2f2f2; }

:root[data-theme="dark"] .habit-card,
:root[data-theme="dark"] .management-card { background: transparent; }
:root[data-theme="dark"] .habit-card.completed,
:root[data-theme="dark"] .calendar-habit-card.completed { background: var(--threads-raised); }
:root[data-theme="dark"] .habit-toggle[aria-pressed="true"] { color: #071208; }
:root[data-theme="dark"] .icon-button:hover { background: #202020; }
:root[data-theme="dark"] .danger-secondary { background: #2b0b0c; color: #ff6961; }
:root[data-theme="dark"] .calendar-day:hover { background: #171717; }
:root[data-theme="dark"] .calendar-day.selected { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 38%); }
:root[data-theme="dark"] .calendar-day[aria-current="date"] { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%); }
:root[data-theme="dark"] .calendar-day[aria-current="date"].selected { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 38%); }
:root[data-theme="dark"] .calendar-status-dot.complete,
:root[data-theme="dark"] .legend-dot.complete { background: #30d158; }
:root[data-theme="dark"] .calendar-status-dot.partial,
:root[data-theme="dark"] .legend-dot.partial { background: #ffd60a; }
:root[data-theme="dark"] .calendar-status-dot.missed,
:root[data-theme="dark"] .legend-dot.missed { background: #8e8e93; }
:root[data-theme="dark"] .secondary,
:root[data-theme="dark"] .button-link.secondary,
:root[data-theme="dark"] .detail-action,
:root[data-theme="dark"] .month-button { border: 1px solid var(--threads-border); background: #121214; color: var(--threads-text); }
:root[data-theme="dark"] .detail-action:hover,
:root[data-theme="dark"] .secondary:hover,
:root[data-theme="dark"] .button-link.secondary:hover,
:root[data-theme="dark"] .month-button:hover { background: #242426; color: var(--threads-text); }
:root[data-theme="dark"] .danger-secondary:hover { background: #431416; color: #ff8a84; }
:root[data-theme="dark"] .detail-delete .detail-action { border-color: #5b2428; background: #251113; color: #ff6961; }
:root[data-theme="dark"] .detail-delete .detail-action:hover { background: #351719; }
:root[data-theme="dark"] .settings-form,
:root[data-theme="dark"] .settings-row,
:root[data-theme="dark"] .settings-button { background: var(--threads-surface); }
:root[data-theme="dark"] .settings-button { color: #ff6961; }
:root[data-theme="dark"] .tab-bar {
  border-color: rgb(255 255 255 / 16%);
  background: linear-gradient(180deg, rgb(42 42 42 / 72%), rgb(18 18 18 / 64%));
  box-shadow: 0 16px 42px rgb(0 0 0 / 58%), 0 2px 10px rgb(0 0 0 / 45%), inset 0 1px 0 rgb(255 255 255 / 20%), inset 0 -1px 0 rgb(255 255 255 / 5%);
}
:root[data-theme="dark"] .tab-bar::before { background: radial-gradient(ellipse, rgb(255 255 255 / 16%), transparent 68%); }
:root[data-theme="dark"] .tab-item { color: #a0a0a5; }
:root[data-theme="dark"] .tab-item.active { background: rgb(255 255 255 / 11%); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%); }
:root[data-theme="dark"] .habit-card:hover { background: #1b1b1b; }
:root[data-theme="dark"] .app-alert-actions button { background: transparent; color: var(--threads-text); }
:root[data-theme="dark"] .app-alert-actions button:hover { background: var(--threads-raised); }
:root[data-theme="dark"] .app-alert-actions .app-alert-confirm { color: #0a84ff; }
:root[data-theme="dark"] .app-alert-actions .app-alert-confirm.danger { color: #ff6961; }

/* Keep a comfortable touch target while reducing the visible completion control. */
.habit-toggle,
.calendar-habit-toggle,
.habit-card .habit-toggle {
  width: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  flex: 0 0 2.75rem;
  background: transparent;
  color: var(--completion-muted);
}

.habit-toggle:hover,
.habit-card .habit-toggle:hover { background: transparent; }
.habit-toggle .checkmark {
  display: grid;
  width: 2.3rem;
  height: 2.3rem;
  place-items: center;
  border-radius: 50%;
  background: var(--completion-idle-bg);
  color: var(--completion-muted);
  transition: background-color 150ms ease, color 150ms ease;
}
.habit-toggle:hover .checkmark { background: var(--completion-idle-hover); }
.habit-toggle[aria-pressed="true"],
.habit-card .habit-toggle[aria-pressed="true"],
.habit-card .habit-toggle[aria-pressed="true"]:hover { background: transparent; }
.habit-toggle[aria-pressed="true"] .checkmark { background: var(--completion-accent); color: #fff; }
:root[data-theme="dark"] .habit-toggle[aria-pressed="true"] .checkmark { color: #071208; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .habit-toggle[aria-pressed="true"] .checkmark { color: #071208; }
}