:root {
  --lux-ink: #0f2821;
  --lux-text: #172138;
  --lux-muted: #697184;
  --lux-green: #007a59;
  --lux-green-dark: #004b3b;
  --lux-mint: #e9f5ef;
  --lux-cream: #fcfaf5;
  --lux-gold: #d6a338;
  --lux-line: #e7e2d8;
  --lux-shadow: 0 10px 30px rgba(22, 53, 43, .08);
  --lux-serif: Georgia, "Times New Roman", serif;
}

html {
  background: var(--lux-cream);
}

body {
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,.98), rgba(252,250,245,.92) 44%, #faf7f0 100%);
  color: var(--lux-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

button, input, textarea, select {
  font: inherit;
}

.primary-button {
  background: linear-gradient(135deg, #008965, #007553);
  box-shadow: 0 8px 18px rgba(0, 122, 89, .16);
}

@media (max-width: 760px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    background: var(--lux-cream);
  }

  body {
    min-height: 100dvh;
    padding-top: env(safe-area-inset-top);
  }

  .app-shell, .main, .view, .view.active {
    min-width: 0;
    max-width: 100%;
  }

  .main {
    padding: 0 0 calc(82px + env(safe-area-inset-bottom));
    background: transparent;
  }

  .topbar, .side-rail {
    display: none !important;
  }

  .view.active {
    overflow-x: clip;
  }

  .screen-page-header,
  .review-page-header,
  .final-plan-header,
  .today-top-bar {
    padding-top: 19px;
  }

  .mobile-bottom-nav {
    height: calc(72px + env(safe-area-inset-bottom));
    padding: 7px 11px env(safe-area-inset-bottom);
    border-top: 1px solid rgba(24, 51, 42, .1);
    background: rgba(255, 254, 250, .96);
    box-shadow: 0 -12px 28px rgba(33, 48, 43, .05);
    backdrop-filter: blur(18px);
  }

  .mobile-nav-item {
    min-width: 0;
    height: 58px;
    border-radius: 15px;
    color: #64706e;
    gap: 3px;
  }

  .mobile-nav-item.active {
    background: transparent !important;
    color: var(--lux-green) !important;
    box-shadow: inset 0 3px 0 var(--lux-green);
  }

  .mobile-nav-item span {
    font-size: 10px;
    font-weight: 650;
  }

  /* Today */
  .today-clean-container {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    gap: 11px;
    padding: 0 17px 22px;
  }

  .today-top-bar {
    position: relative;
    min-height: 104px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 34px;
    align-items: start;
    gap: 10px;
    padding-left: 8px;
    padding-right: 5px;
  }

  .today-top-date {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    gap: 2px;
  }

  .today-top-date small {
    order: 0;
    color: var(--lux-green-dark);
    font-size: 11px;
    font-weight: 700;
  }

  .today-top-date h2 {
    order: 1;
    margin: 0;
    color: var(--lux-ink);
    font-family: var(--lux-serif);
    font-size: 27px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.035em;
  }

  .today-top-date p {
    display: none;
  }

  .today-top-right {
    display: contents;
  }

  .today-account-avatar {
    grid-column: 2;
    grid-row: 1;
    order: 2;
    width: 38px;
    height: 38px;
    border: 1px solid #d7e3dc;
    border-radius: 50%;
    background: var(--lux-mint);
    color: var(--lux-green-dark);
    font-size: 11px;
    font-weight: 850;
  }

  .today-goal-pill {
    position: static;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    height: 34px;
    justify-content: flex-start;
    border: 1px solid #dcded7;
    border-radius: 999px;
    background: rgba(255,255,255,.65);
    color: var(--lux-green-dark);
    padding: 0 13px;
    font-size: 10px;
    box-shadow: none;
  }

  .today-goal-pill::before {
    content: "◎";
    margin-right: 7px;
    color: var(--lux-green);
  }

  .now-hero-card {
    min-height: 236px;
    border: 0;
    border-radius: 13px;
    background:
      radial-gradient(circle at 92% 44%, transparent 0 28px, rgba(140,235,197,.12) 29px 30px, transparent 31px 52px, rgba(140,235,197,.1) 53px 54px, transparent 55px),
      linear-gradient(145deg, #00523f, #003c31);
    color: white;
    padding: 17px;
    box-shadow: 0 12px 26px rgba(0, 65, 49, .18);
  }

  .now-card-top {
    align-items: center;
  }

  .now-badge {
    background: transparent;
    color: #91e5bd;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
  }

  .now-badge::before {
    content: "◷";
    margin-right: 6px;
  }

  .now-time-pill {
    color: rgba(255,255,255,.72);
    font-size: 10px;
  }

  .now-card-main {
    margin: 8px 0 13px;
  }

  .now-card-main h3 {
    margin: 0;
    color: #fffaf0;
    font-family: var(--lux-serif);
    font-size: 27px;
    font-weight: 500;
    line-height: 1.08;
  }

  .now-card-step {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    border-radius: 7px;
    background: rgba(255,255,255,.1);
    color: #bce8d6 !important;
    padding: 0 9px;
    font-size: 10px !important;
  }

  .primary-focus-btn {
    min-height: 51px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #04b584, #00a779);
    color: white;
    font-size: 15px;
    font-weight: 750;
    box-shadow: 0 8px 18px rgba(0,0,0,.14);
  }

  .today-card-section {
    border: 1px solid var(--lux-line);
    border-radius: 12px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 5px 15px rgba(41, 50, 45, .05);
    padding: 12px 13px;
  }

  .today-section-head h3 {
    margin: 0;
    color: var(--lux-ink);
    font-family: var(--lux-serif);
    font-size: 20px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: -.02em;
  }

  .section-sub-label, .text-link-btn {
    color: var(--lux-green);
    font-size: 11px;
  }

  .must-do-item {
    min-height: 47px;
    grid-template-columns: 29px minmax(0,1fr) auto 25px;
    border-top: 1px solid #ece9e2;
    border-radius: 0;
    background: transparent;
    padding: 5px 0;
  }

  .must-do-item:first-child { border-top: 0; }
  .must-do-rank {
    width: 24px;
    height: 24px;
    border-color: #9dbdac;
    background: transparent;
    color: transparent;
  }
  .must-do-item.done .must-do-rank {
    background: var(--lux-green);
    color: white;
  }
  .must-do-title { font-size: 12px; }
  .must-do-time { color: var(--lux-muted); font-size: 9px; }

  .today-card-section:has(#todayTimelineList) {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 2px 8px 0;
  }

  .today-timeline-list {
    position: relative;
    padding-left: 4px;
  }

  .today-timeline-list::before {
    content: "";
    position: absolute;
    top: 15px;
    bottom: 15px;
    left: 8px;
    width: 1px;
    background: #c8d8cf;
  }

  .timeline-period-label { display: none !important; }

  .today-timeline-row {
    min-height: 42px;
    grid-template-columns: 13px 55px minmax(0,1fr);
    gap: 7px;
    border: 0;
    background: transparent;
    padding: 3px 0;
  }
  .today-timeline-dot {
    z-index: 1;
    width: 11px;
    height: 11px;
    border: 2px solid #94b4a4;
    background: var(--lux-cream);
    color: transparent;
  }
  .today-timeline-time { color: var(--lux-text); font-size: 10px; }
  .today-timeline-copy strong { font-size: 11px; }
  .today-timeline-copy small { color: var(--lux-muted); font-size: 9px; }

  .quick-add-section {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
  .quick-add-input-wrapper {
    grid-template-columns: minmax(0,1fr) 44px;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(24, 54, 44, .07);
  }
  .quick-add-input-wrapper input { height: 43px; border-radius: 999px 0 0 999px; }
  .quick-add-input-wrapper button { border-radius: 50%; }

  /* Plan */
  .final-plan-layout {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    gap: 14px;
    padding: 0 18px 30px;
  }

  .final-plan-header {
    position: relative;
    min-height: 70px;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
  }

  .final-plan-header .screen-title {
    display: grid;
    justify-items: center;
    gap: 2px;
  }

  .final-plan-header .screen-title h2 {
    margin: 0;
    color: var(--lux-ink);
    font-family: var(--lux-serif);
    font-size: 31px;
    font-weight: 500;
  }

  .final-plan-header .screen-title small {
    display: block !important;
    color: #4f565c;
    font-size: 14px;
  }

  .plan-date-nav {
    position: absolute;
    top: 27px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
  }
  .plan-date-nav button {
    pointer-events: auto;
    width: 42px;
    height: 42px;
    border: 1px solid var(--lux-green);
    border-radius: 50%;
    background: transparent;
    color: var(--lux-green-dark);
    font-size: 24px;
  }
  #planTodayDate, #planDate { display: none; }

  .plan-clarity-card {
    border: 1px solid #eee9df;
    border-radius: 15px;
    background: rgba(255,255,255,.82);
    box-shadow: var(--lux-shadow);
    padding: 15px;
  }
  .plan-clarity-card > div:first-child small { display: none; }
  .plan-clarity-card h3 {
    margin: 0;
    color: var(--lux-ink);
    font-family: var(--lux-serif);
    font-size: 21px;
    font-weight: 600;
  }
  .plan-clarity-card p {
    margin: 4px 0 10px;
    color: var(--lux-muted);
    font-size: 10px;
  }
  .plan-clarity-input {
    grid-template-columns: 1fr;
  }
  .plan-clarity-input textarea {
    min-height: 104px;
    border-color: #b9d4c7;
    border-radius: 11px;
    background: white;
    padding: 13px;
    font-size: 14px;
    line-height: 1.4;
  }
  .plan-clarity-input .primary-button {
    min-height: 49px;
    border-radius: 10px;
    font-size: 15px;
  }
  #planBuildResult:not(:empty)::before {
    content: "✓";
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--lux-green);
    color: white;
  }
  #planBuildResult:not(:empty) {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #cae2d6;
    border-radius: 11px;
    background: #eef8f3;
    padding: 10px;
  }
  #planBuildResult:has(.plan-confirmation-draft)::before { display: none; }

  .plan-timeline-panel {
    border: 0;
    background: transparent;
    padding: 0;
  }
  .plan-timeline-panel > .section-head { display: none; }
  .builder-route-board { gap: 6px; }
  .plan-period-label {
    min-height: 28px;
    padding: 7px 2px 2px;
    color: var(--lux-green-dark);
  }
  .builder-route-row {
    border: 1px solid #e0e5df;
    border-radius: 10px;
    background: rgba(255,255,255,.72);
    box-shadow: none;
  }
  .route-select {
    min-height: 58px;
    grid-template-columns: 61px 28px minmax(0,1fr);
    padding: 7px 34px 7px 8px;
  }
  .route-time {
    color: var(--lux-green-dark);
    font-size: 12px;
  }
  .route-time small { display: none; }
  .route-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 11px;
  }
  .route-copy strong { font-size: 12px; }
  .route-copy small { font-size: 9px; }
  .route-select em, .route-actions, .route-link { display: none; }
  .route-sheet-action { top: 13px; right: 5px; }
  .plan-backlog {
    margin-top: 14px;
    border: 1px solid #d8e2dc;
    border-radius: 13px;
    background: rgba(255,255,255,.75);
    padding: 12px;
  }
  .board-subhead strong {
    color: var(--lux-ink);
    font-family: var(--lux-serif);
    font-size: 19px;
  }
  .unscheduled-task {
    grid-template-columns: 10px minmax(0,1fr) auto;
    gap: 9px;
    min-height: 52px;
    padding: 6px 0;
  }
  .unscheduled-copy {
    min-width: 0;
    width: 100%;
    display: grid;
    gap: 2px;
  }
  .unscheduled-copy strong,
  .unscheduled-copy small {
    width: 100%;
    word-break: normal !important;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .unscheduled-copy strong { font-size: 11px; }
  .unscheduled-copy small { color: var(--lux-muted); font-size: 9px; }
  .unscheduled-task > button {
    min-width: 76px;
    height: 36px;
    border-radius: 9px;
  }

  /* Focus */
  body:has(#focusView.active) {
    height: 100dvh;
    overflow: hidden;
    padding-top: 0;
    background: var(--lux-green-dark);
  }
  body:has(#focusView.active) .main {
    height: 100dvh;
    padding: 0;
  }
  #focusView.active {
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    padding: 0 !important;
  }
  .focus-fullscreen, .focus-layout {
    width: 100%;
    height: 100dvh;
    min-height: 0;
  }
  .focus-room {
    box-sizing: border-box;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(7px, 1.5vh, 14px);
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(circle at 50% 38%, rgba(23, 129, 96, .24), transparent 42%),
      linear-gradient(150deg, #00513f, #00372f);
    padding: calc(env(safe-area-inset-top) + 17px) 22px calc(env(safe-area-inset-bottom) + 15px);
    color: #fffaf0;
  }
  .focus-screen-header {
    width: 100%;
    flex: 0 0 42px;
    grid-template-columns: 42px 1fr 42px;
  }
  .focus-screen-header > div strong {
    color: white;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .focus-screen-header > div small { display: none; }
  #focusClose {
    font-size: 29px;
    font-weight: 200;
  }
  #focusSound { font-size: 18px; }
  #focusLabel {
    color: var(--lux-gold);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  #focusTitle {
    margin: 0;
    max-width: 350px;
    color: #fffaf0;
    font-family: var(--lux-serif);
    font-size: clamp(25px, 4.3vh, 37px);
    font-weight: 500;
    line-height: 1.06;
    text-align: center;
  }
  .focus-schedule-label { display: none; }
  .focus-timing-note {
    order: 8;
    margin: 0;
    color: rgba(255,255,255,.68);
    font-size: 10px;
  }
  .focus-timer-ring-container {
    flex: 0 1 min(39vh, 330px);
    width: min(72vw, 310px);
    height: min(72vw, 310px);
    margin: 3px 0;
  }
  .focus-timer-clock {
    color: #fffaf0;
    font-family: var(--lux-serif);
    font-size: clamp(52px, 12vw, 74px);
    font-weight: 400;
  }
  .focus-total-label { color: rgba(255,255,255,.68); }
  .focus-instruction { display: none; }
  .focus-primary-controls {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin: 0;
  }
  #focusStart { grid-column: 1 / -1; }
  .focus-round-control {
    width: 100%;
    height: 49px;
    border-radius: 10px;
    background: #fffaf0;
    color: var(--lux-green-dark);
  }
  .focus-round-control span { font-size: 14px; }
  .focus-round-control small { font-size: 12px; }
  .focus-outline {
    display: grid;
    border: 1px solid rgba(255,255,255,.45);
    background: rgba(255,255,255,.06);
    color: #fffaf0;
  }
  .focus-finish {
    border: 1px solid rgba(255,255,255,.75);
    background: transparent;
    color: #fffaf0;
  }
  .focus-secondary-controls {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .focus-secondary-controls button {
    min-height: 37px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 9px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.8);
    font-size: 10px;
  }
  .focus-distraction {
    width: 100%;
    margin: 0;
    border-color: rgba(255,255,255,.16);
    border-radius: 10px;
  }
  .focus-distraction summary { min-height: 39px; padding: 11px; }

  /* Goals */
  .goals-2026-layout {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    gap: 10px;
    padding: 0 17px 24px;
  }
  .screen-page-header {
    min-height: 68px;
    align-items: center;
  }
  .screen-page-header small { display: none; }
  .screen-page-header h2 {
    margin: 0;
    color: var(--lux-ink);
    font-family: var(--lux-serif);
    font-size: 31px;
    font-weight: 500;
  }
  .header-add-button {
    width: 40px;
    height: 40px;
    border: 1px solid #d8dfda;
    border-radius: 11px;
    background: rgba(255,255,255,.7);
    color: var(--lux-green);
    font-size: 24px;
  }
  .year-finish-card {
    min-height: 0;
    grid-template-columns: 1fr auto;
    align-items: center;
    border: 1px solid #d8e0db;
    border-radius: 12px;
    background: rgba(255,255,255,.72);
    color: var(--lux-text);
    padding: 11px 13px;
    box-shadow: none;
  }
  .year-finish-copy { gap: 0; }
  .year-finish-copy small, .year-finish-copy span { display: none; }
  .year-finish-copy strong {
    color: var(--lux-ink);
    font-size: 17px;
    letter-spacing: -.02em;
  }
  .year-finish-progress {
    width: 120px;
    gap: 4px;
  }
  .year-progress-track {
    height: 5px;
    background: #e3ece7;
  }
  .year-progress-track span { background: var(--lux-green); }
  .year-finish-progress small {
    color: var(--lux-muted);
    font-size: 8px;
    text-align: right;
  }
  .goals-list-panel .section-head { display: none; }
  .goals-grid {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 0 3px;
  }
  .annual-goal-row {
    width: auto !important;
    flex: 0 0 auto;
    min-width: 92px;
    border-radius: 9px;
  }
  .annual-goal-main {
    grid-template-columns: 22px auto;
    min-height: 36px;
    padding: 5px 10px;
  }
  .annual-goal-icon {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }
  .annual-goal-copy strong { font-size: 9px; }
  .annual-goal-copy small { display: none; }
  .goal-focus-panel {
    position: relative;
    gap: 0;
    border: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }
  .goal-focus-head {
    min-height: 166px;
    grid-template-columns: minmax(0,1fr) 32px;
    border-radius: 12px;
    background:
      radial-gradient(circle at 90% 50%, transparent 0 36px, rgba(174,236,205,.2) 37px 38px, transparent 39px 57px, rgba(174,236,205,.15) 58px 59px, transparent 60px),
      linear-gradient(145deg, #00503e, #003b31);
    padding: 19px;
    color: white;
  }
  .primary-goal-hero-icon { display: none; }
  .goal-focus-head small { color: #b1e4d0; }
  .goal-focus-head h2 {
    margin: 8px 0 5px;
    color: #fffaf0;
    font-family: var(--lux-serif);
    font-size: 29px;
    font-weight: 500;
    line-height: 1.04;
  }
  .goal-focus-head p {
    color: rgba(255,255,255,.7);
    font-size: 11px;
  }
  .goal-more-button { color: rgba(255,255,255,.7); }
  .goal-focus-meta {
    position: absolute;
    top: 120px;
    left: 19px;
    right: 19px;
    border-top: 1px solid rgba(255,255,255,.15);
    padding-top: 10px;
  }
  .goal-focus-meta strong { color: #c3edda; }
  .goal-focus-meta span { color: rgba(255,255,255,.65); }
  .goal-execution-ladder {
    margin-top: 10px;
    border: 1px solid var(--lux-line);
    border-radius: 11px;
    background: rgba(255,255,255,.74);
    overflow: hidden;
  }
  .goal-execution-ladder > .execution-rung {
    min-height: 57px;
    grid-template-columns: minmax(0,1fr) auto;
    border: 0;
    border-bottom: 1px solid #ebe8e1;
    border-radius: 0;
    background: transparent;
    padding: 9px 11px;
    box-shadow: none;
  }
  .goal-execution-ladder > .execution-rung:last-child { border-bottom: 0; }
  .execution-rung small { font-size: 7px; }
  .execution-rung strong { font-size: 10px; }
  .execution-rung i { font-size: 9px; }
  .goal-execution-ladder > .next-action-rung {
    grid-template-columns: 1fr;
    gap: 7px;
    background: transparent;
  }
  .next-action-rung .next-action-button {
    width: 100%;
    min-height: 39px;
    border-radius: 8px;
  }
  .goal-current-milestone { display: none; }
  .goal-weekly-head {
    margin: 13px 2px 7px;
  }
  .goal-weekly-head strong {
    color: var(--lux-ink);
    font-family: var(--lux-serif);
    font-size: 18px;
    font-weight: 500;
  }
  .goal-weekly-actions {
    border: 1px solid var(--lux-line);
    border-radius: 10px;
    background: rgba(255,255,255,.68);
    padding: 4px 10px;
  }
  .vision-secondary {
    border: 0;
    background: transparent;
    padding: 0;
  }
  .vision-secondary summary {
    min-height: 49px;
    padding: 10px 2px;
  }
  .vision-secondary summary small { display: none; }
  .vision-secondary summary strong {
    color: var(--lux-ink);
    font-family: var(--lux-serif);
    font-size: 19px;
    font-weight: 500;
  }
  .vision-actions { display: none; }
  .vision-board-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 7px;
    overflow: visible;
  }
  .vision-card {
    min-width: 0;
    min-height: 88px;
    border: 0;
    border-radius: 10px;
    background:
      linear-gradient(145deg, rgba(5,78,60,.15), rgba(213,186,123,.18)),
      #edf3ee;
    padding: 8px;
  }
  .vision-card div, .vision-card button { display: none; }

  /* Persistent focus: one calm, compact status strip above navigation. */
  .focus-pill {
    left: 12px;
    right: 12px;
    bottom: calc(68px + env(safe-area-inset-bottom));
    z-index: 58;
    min-height: 52px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    background: rgba(4, 91, 70, .96);
    padding: 7px 8px 7px 12px;
    box-shadow: 0 8px 22px rgba(0, 46, 35, .18);
    color: white;
  }
  .focus-pill.hidden { display: none; }
  .focus-pill span {
    min-width: 0;
    overflow: hidden;
    color: white;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .focus-pill strong,
  .focus-pill #pillBreak,
  .focus-pill #pillStop { display: none; }
  .focus-pill em {
    color: white;
    font-size: 15px;
    font-style: normal;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
  }
  .focus-pill button {
    min-width: 55px;
    min-height: 36px;
    border: 0;
    border-radius: 9px;
    background: rgba(255,255,255,.16);
    color: white;
    font-size: 10px;
    font-weight: 800;
    padding: 0 9px;
  }
  .focus-pill #pillDone { display: none; }

  /* Couple */
  .couple-layout {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    gap: 11px;
    padding: 0 17px 25px;
  }
  #coupleView .screen-page-header h2 {
    font-size: 46px;
  }
  .couple-hero {
    grid-template-columns: 1fr;
    border: 1px solid #cfe1d7;
    border-radius: 12px;
    background: linear-gradient(135deg, #e8f5ee, #f5faf7);
    padding: 14px;
    box-shadow: none;
  }
  .couple-hero-copy small {
    color: var(--lux-green);
  }
  .couple-hero-copy h3 {
    margin: 4px 0;
    color: var(--lux-ink);
    font-family: var(--lux-serif);
    font-size: 20px;
    font-weight: 500;
  }
  .couple-hero-copy p { color: #52635c; }
  .couple-hero-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
  }
  .couple-plan-panel, .couple-add-panel, .couple-side > .panel {
    border: 1px solid var(--lux-line);
    border-radius: 12px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 5px 16px rgba(33, 49, 43, .045);
  }
  .couple-plan-panel .section-head h3, .couple-side .section-head h3 {
    color: var(--lux-ink);
    font-family: var(--lux-serif);
    font-size: 20px;
    font-weight: 500;
  }
  .couple-shared-block {
    border-radius: 10px;
    background: #f5f0fb;
  }
  .couple-block-main {
    min-height: 63px;
  }
  .share-day-panel, .couple-rules-panel { display: none !important; }

  /* Review */
  .review-grid {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    gap: 12px;
    padding: 0 18px 28px;
  }
  .review-page-header {
    display: grid;
    gap: 2px;
    padding-left: 6px;
  }
  .review-page-header small {
    color: var(--lux-green-dark);
    font-size: 12px;
  }
  .review-page-header h2 {
    margin: 0;
    color: var(--lux-ink);
    font-family: var(--lux-serif);
    font-size: 46px;
    font-weight: 500;
    line-height: 1;
  }
  .review-page-header p {
    margin: 6px 0 0;
    color: #5f605e;
    font-size: 18px;
  }
  .review-summary {
    grid-template-columns: repeat(3,1fr);
    border-color: var(--lux-line);
    border-radius: 12px;
    background: rgba(255,255,255,.7);
    padding: 13px 5px;
  }
  .review-summary > div { border-right-color: var(--lux-line); }
  .review-summary strong {
    color: var(--lux-green-dark);
    font-family: var(--lux-serif);
    font-size: 27px;
    font-weight: 500;
  }
  .review-summary span {
    color: #565d5a;
    font-size: 10px;
  }
  .review-hidden-stat { display: none !important; }
  .review-unfinished-panel, .review-completed-panel, .review-reflection-panel {
    border: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }
  .review-grid .section-head h3, .review-reflection-panel h3 {
    color: var(--lux-ink);
    font-family: var(--lux-serif);
    font-size: 25px;
    font-weight: 500;
  }
  .review-task-card {
    border-color: var(--lux-line);
    border-radius: 12px;
    background: rgba(255,255,255,.78);
    padding: 12px;
    box-shadow: 0 5px 14px rgba(38, 50, 44, .04);
  }
  .review-task-title strong { font-size: 13px; }
  .review-decision-actions {
    grid-template-columns: repeat(3,1fr);
    border: 1px solid var(--lux-line);
    border-radius: 9px;
    overflow: hidden;
    gap: 0;
  }
  .review-btn {
    height: 48px;
    border: 0;
    border-right: 1px solid var(--lux-line);
    border-radius: 0;
    background: transparent;
    color: var(--lux-green-dark);
    font-size: 9px;
  }
  .review-more-actions { grid-column: 3; }
  .review-decision-actions > button:nth-child(3) { display: none; }
  .review-completed-panel {
    border: 1px solid rgba(214,163,56,.55);
    border-radius: 12px;
    background: linear-gradient(145deg, #fffaf0, #fffdf8);
    padding: 13px;
  }
  .review-completed-item {
    min-height: 48px;
  }
  .review-completed-item .check-icon {
    background: var(--lux-green-dark);
    color: var(--lux-gold);
  }
  .review-reflection-panel {
    border: 1px solid var(--lux-line);
    border-radius: 12px;
    background: rgba(255,255,255,.72);
    padding: 13px;
  }
  .review-reflection-panel textarea {
    min-height: 58px;
    border-color: #dedbd2;
    background: #fff;
  }
  #saveReview {
    min-height: 51px;
    border-radius: 10px;
    font-size: 13px;
  }
  .review-history-panel {
    display: block;
    border: 1px solid var(--lux-line);
    border-radius: 12px;
    background: rgba(255,255,255,.72);
    padding: 13px;
  }
  .review-history-panel .section-head h3 {
    margin: 2px 0 0;
    font-size: 24px;
  }
  .weekly-review-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 9px 0;
    border: 1px solid var(--lux-line);
    border-radius: 10px;
    overflow: hidden;
  }
  .weekly-review-summary > div {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 10px 4px;
    border-right: 1px solid var(--lux-line);
    text-align: center;
  }
  .weekly-review-summary > div:last-child { border-right: 0; }
  .weekly-review-summary strong {
    color: var(--lux-green-dark);
    font-family: var(--lux-serif);
    font-size: 20px;
  }
  .weekly-review-summary span { color: var(--lux-muted); font-size: 8px; }
  .weekly-review-days { display: grid; }
  .weekly-review-day {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 8px;
    align-items: center;
    min-width: 0;
    padding: 10px 2px;
    border-bottom: 1px solid #ebe9e3;
  }
  .weekly-review-day:last-child { border-bottom: 0; }
  .weekly-review-day > div { min-width: 0; display: grid; gap: 2px; }
  .weekly-review-day strong { color: var(--lux-ink); font-size: 11px; }
  .weekly-review-day small, .weekly-review-day > span { color: var(--lux-muted); font-size: 8px; }
  .weekly-review-day.has-review > span { color: var(--lux-green); font-weight: 800; }
  .weekly-review-day p {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    color: #49534f;
    font-size: 10px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  /* iPhone Safari zooms controls below 16px. Keep all editable fields at 16px. */
  input, textarea, select {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    font-size: 16px !important;
  }
  html, body, .app-shell, .main, .view {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  img, svg, canvas { max-width: 100%; }

  /* overlays */
  .mobile-action-sheet {
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    max-height: min(720px, calc(100dvh - 36px));
    overflow-y: auto;
    border-radius: 18px;
    background: rgba(255,254,250,.98);
  }
  .mobile-action-backdrop {
    background: rgba(7, 29, 23, .42);
    backdrop-filter: blur(2px);
  }
  .quick-dock { display: none !important; }
}

@media (min-width: 761px) {
  body {
    background: #f8f7f3;
  }
  .main {
    background: #fdfcf8;
  }
}