:root {
  --club-plum: #492b88;
  --club-ink: #2e2551;
  --club-coral: #ff8573;
  --club-peach: #ffbc82;
  --club-mint: #b8eadb;
  --club-lime: #e2ef8d;
  --club-lilac: #d8c4f4;
  --club-cream: #fffbf4;
}

body:not(.is-assessment) {
  background: #281c49;
  color: var(--club-ink);
  font-family: var(--font-ui);
}

body:not(.is-assessment) .app-shell {
  width: min(100%, 430px);
  margin: 0 auto;
  background: var(--club-cream);
  box-shadow: 0 0 75px rgba(15, 8, 36, .28);
}

body:not(.is-assessment) .topbar,
body:not(.is-assessment) .footer { display: none; }
body:not(.is-assessment) .main-wrap { width: 100%; max-width: none; margin: 0; padding: 0; }
body:not(.is-assessment) #screen-landing { width: 100%; }

.club-app { position: relative; min-height: 100vh; padding-bottom: calc(128px + env(safe-area-inset-bottom)); background: var(--club-cream); }
.club-app button { cursor: pointer; font-family: inherit; }
.club-app button:focus-visible,.club-app a:focus-visible { outline: 3px solid #e5f37b; outline-offset: 3px; }
.club-top {
  position: relative;
  z-index: 1;
  padding: max(18px, env(safe-area-inset-top)) 18px 44px;
  border-radius: 0 0 38px 38px;
  background:
    radial-gradient(circle at 102% 15%, rgba(255,255,255,.10) 0 78px, transparent 79px),
    radial-gradient(circle at -8% 67%, rgba(255,255,255,.06) 0 95px, transparent 96px),
    var(--club-plum);
  overflow: hidden;
}
body.dog-menu-open .club-top { z-index: auto; overflow: visible; }
body.dog-menu-open .calendar-page-header { position: relative; z-index: 40; }
.club-top::before,
.club-top::after { content: "✳"; position: absolute; color: rgba(255,255,255,.15); pointer-events: none; }
.club-top::before { top: 88px; right: 20px; font-size: 31px; transform: rotate(20deg); }
.club-top::after { top: 191px; left: 1px; font-size: 22px; }
.club-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.club-logo { display: flex; align-items: center; gap: 8px; color: #fff; }
.club-logo-mark {
  width: 40px; height: 40px; border-radius: 15px 15px 15px 6px; display: grid; place-items: center;
  background: #f8e678; color: var(--club-plum); font: 800 22px/1 var(--font-ui); transform: rotate(-7deg);
}
.club-logo > span:last-child { display: grid; font: 800 24px/.95 var(--font-ui); letter-spacing: -.06em; }
.club-logo small { margin-top: 3px; color: #dfd2f3; font: 800 8px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
.club-header-actions { display: flex; gap: 8px; }
.club-header-actions button { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 14px; display: grid; place-items: center; }
.club-bell { position: relative; background: rgba(255,255,255,.18); color: #fff; }
.club-bell svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.club-bell i { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border: 2px solid var(--club-plum); border-radius: 50%; background: #f8e678; }
.club-avatar { background: var(--club-coral); color: var(--club-ink); font-size: 12px; font-weight: 800; }
.club-welcome { position: relative; z-index: 5; margin: 20px 2px 12px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.club-welcome .walk-weather { min-width: 0; flex: 1 1 0; min-height: 60px; margin: 0; padding: 7px 8px; grid-template-columns: 23px minmax(0,1fr) auto; gap: 5px; border-radius: 16px; }
.club-welcome .walk-weather > img { width: 22px; height: 22px; }
.club-welcome .walk-weather-copy { display: block; }
.club-welcome .walk-weather-copy strong { display: block; white-space: normal; font-size: 12px; line-height: 1.2; }
.club-welcome .walk-weather-copy small { display: none; }
.club-welcome .walk-weather-temp { font-size: 15px; }
.dog-switcher { position: relative; flex: 0 0 auto; }
.dog-switch { width: 146px; min-height: 60px; padding: 6px 10px 6px 6px; border: 0; border-radius: 22px; background: #fff; display: grid; grid-template-columns: 43px 1fr 16px; align-items: center; gap: 7px; color: var(--club-ink); text-align: left; box-shadow: 0 10px 24px rgba(28,12,64,.16); }
.dog-switch img { width: 43px; height: 43px; border-radius: 15px; background: #f2e8dc; object-fit: cover; object-position: center top; }
.dog-switch > span { min-width: 0; display: grid; gap: 2px; }
.dog-switch strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 14px/1.1 var(--font-ui); }
.dog-switch small { color: #6b5f78; font-size: 11px; font-weight: 700; }
.dog-switch svg { width: 16px; fill: none; stroke: #75678e; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.dog-switch[aria-expanded="true"] svg { transform: rotate(180deg); }
.dog-switch:focus-visible,.dog-menu button:focus-visible { outline: 3px solid #e6f58f; outline-offset: 3px; }
.dog-menu { position: absolute; z-index: 10; top: calc(100% + 9px); right: 0; width: 230px; padding: 9px; border: 1px solid #eee6f4; border-radius: 21px; background: #fff; display: grid; gap: 3px; box-shadow: 0 18px 40px rgba(22,12,52,.28); color: var(--club-ink); }
.dog-menu[hidden] { display: none; }
.dog-menu-heading { padding: 5px 7px 7px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dog-menu-heading strong { font: 800 12px/1 var(--font-ui); }
.dog-menu-heading small { color: #78678a; font-size: 9px; font-weight: 800; letter-spacing: .05em; }
.dog-options-list { display: grid; grid-auto-rows: 56px; gap: 3px; max-height: 233px; }
.dog-menu.has-more-dogs .dog-options-list { overflow-y: scroll; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #bda9d8 #f4edfa; }
.dog-options-list::-webkit-scrollbar { width: 6px; }
.dog-options-list::-webkit-scrollbar-track { background: #f4edfa; border-radius: 6px; }
.dog-options-list::-webkit-scrollbar-thumb { background: #bda9d8; border-radius: 6px; }
.dog-menu button[role="menuitemradio"] { width: 100%; min-height: 56px; padding: 6px; border: 0; border-radius: 13px; background: transparent; display: grid; grid-template-columns: 43px 1fr 21px; align-items: center; gap: 8px; color: var(--club-ink); text-align: left; }
.dog-menu button[role="menuitemradio"]:hover,.dog-menu button[aria-checked="true"] { background: #f4edfa; }
.dog-menu button[role="menuitemradio"] img { width: 43px; height: 43px; border-radius: 12px; background: #f5e8d8; object-fit: cover; object-position: center top; }
.dog-menu button[role="menuitemradio"] > span { display: grid; gap: 2px; }
.dog-menu button[role="menuitemradio"] strong { font: 800 12px/1 var(--font-ui); }
.dog-menu button[role="menuitemradio"] small { color: #6c5f78; font-size: 11px; }
.dog-menu button[role="menuitemradio"] i { display: none; width: 20px; height: 20px; border-radius: 50%; place-items: center; background: var(--club-plum); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; }
.dog-menu button[aria-checked="true"] i { display: grid; }
.dog-menu .dog-add { min-height: 44px; margin-top: 3px; padding: 10px 9px; border: 1px dashed #cdbbe4; border-radius: 11px; background: #fff; color: var(--club-plum); text-align: left; font-size: 12px; font-weight: 800; }
.dog-menu .dog-profile-link { min-height: 40px; padding: 9px; border: 0; border-radius: 11px; background: #f0e9fa; color: var(--club-plum); text-align: left; font-size: 12px; font-weight: 800; }

.club-hero {
  position: relative; min-height: 252px; border-radius: 27px 27px 34px 27px;
  background: linear-gradient(135deg, #ffc18a, #ffae80 77%); color: var(--club-ink);
  overflow: hidden; box-shadow: 0 18px 28px rgba(27,15,72,.18);
}
.club-hero::before { content: ""; position: absolute; top: -64px; right: -65px; width: 210px; height: 210px; border: 27px solid rgba(255,255,255,.19); border-radius: 50%; }
.club-hero-copy { position: relative; z-index: 3; width: 61%; padding: 21px 0 20px 20px; }
.club-kicker { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border-radius: 999px; background: rgba(255,255,255,.7); color: #5e305a; font-size: 10px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; }
.club-kicker i { width: 6px; height: 6px; border-radius: 50%; background: #5abfa0; }
.club-hero h2 { margin: 12px 0 8px; font: 800 clamp(28px,7.5vw,34px)/1.02 var(--font-ui); letter-spacing: -.05em; }
.club-hero-copy p { max-width: 190px; margin: 0 0 14px; color: #594452; font-size: 12px; line-height: 1.42; }
.club-hero-copy button { min-height: 46px; padding: 0 14px; border: 0; border-radius: 13px; background: var(--club-plum); color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; box-shadow: 0 7px 13px rgba(48,28,87,.16); }
.club-hero-copy button span { margin-left: 5px; font-size: 18px; }
.club-hero-copy button[hidden] { display: none; }
.club-hero-art { position: absolute; z-index: 2; right: -15px; top: 15px; width: 56%; height: 220px; }
.hero-sun { position: absolute; inset: 2px 0 0 6px; border-radius: 50% 44% 46% 53%; background: #ffe6a1; transform: rotate(-14deg); }
.club-hero-art img { position: absolute; top: 10px; right: -6px; width: 205px; height: 205px; object-fit: cover; object-position: center top; border-radius: 50%; -webkit-mask-image: radial-gradient(circle at center, #000 57%, transparent 73%); mask-image: radial-gradient(circle at center, #000 57%, transparent 73%); }
.hero-daisy { position: absolute; z-index: 3; top: -5px; left: 2px; color: #fffdf5; font-size: 25px; transform: rotate(-13deg); }
.club-content { position: relative; z-index: 2; padding: 0 18px 25px; }
.club-top[hidden],.club-content[hidden],.calendar-page[hidden],.dog-profile-page[hidden],.profile-health[hidden],.profile-health #profileHealthComplete[hidden],.profile-health #profileHealthEmpty[hidden],.profile-field-error[hidden],.profile-saved-note[hidden] { display: none; }
.dog-profile-page { min-height: 100vh; background: #fffaf4; }
.dog-profile-header { padding: max(18px,env(safe-area-inset-top)) 18px 37px; border-radius: 0 0 36px 36px; color: #fff; background: radial-gradient(circle at 92% 12%,#a082d2 0 72px,transparent 73px),linear-gradient(140deg,#492b88,#6743a6); }
.dog-profile-kicker { display: block; margin-top: 27px; color: #ede5fa; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.dog-profile-header h1 { margin: 6px 0; font: 800 32px/1.05 var(--font-ui); letter-spacing: -.04em; }
.dog-profile-header p { margin: 0; color: #f2eafd; font-size: 13px; line-height: 1.4; }
.dog-profile-content { padding: 0 18px 34px; }
.profile-card { margin: 17px 0; padding: 18px; border: 1px solid #eee5ec; border-radius: 25px; background: #fff; box-shadow: 0 9px 25px rgba(48,32,81,.06); }
.profile-photo-card { position: relative; margin-top: -21px; }
.profile-section-heading span { color: #8766a4; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.profile-section-heading h2 { margin: 3px 0 0; color: var(--club-ink); font: 800 21px/1.1 var(--font-ui); letter-spacing: -.03em; }
.profile-card > p,.profile-health p { margin: 10px 0 15px; color: #6b6272; font-size: 12px; line-height: 1.5; }
.profile-photo-preview { display: flex; align-items: center; gap: 17px; padding: 12px; border-radius: 19px; background: #f5ecfb; }
.profile-photo-preview img { width: 85px; height: 85px; border-radius: 24px; background: #f7e3d0; object-fit: cover; object-position: center top; }
.profile-photo-preview label { min-height: 44px; padding: 0 13px; border-radius: 13px; background: var(--club-plum); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; cursor: pointer; }
.profile-photo-preview input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.profile-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 12px; }
.profile-gallery button { position: relative; min-height: 83px; padding: 5px; border: 2px solid #eae1ec; border-radius: 17px; background: #fff9f5; }
.profile-gallery button[aria-pressed="true"] { border-color: var(--club-plum); background: #f0eafa; }
.profile-gallery img { width: 67px; height: 67px; border-radius: 12px; object-fit: cover; object-position: center top; }
.profile-gallery button[aria-pressed="true"]::after { content: "✓"; position: absolute; right: 4px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--club-plum); color: #fff; font-size: 11px; font-weight: 800; }
.profile-field-error { color: #a43142 !important; font-weight: 700; }
.profile-fields { display: grid; gap: 9px; margin-top: 17px; }
.profile-fields label:not(.profile-check),.profile-health-field > label { color: var(--club-ink); font-size: 12px; font-weight: 800; }
.profile-fields label em { margin-left: 3px; color: #80618b; font-size: 10px; font-style: normal; font-weight: 600; }
.profile-fields input:not([type="checkbox"]),.profile-fields select,.profile-health-field select,.profile-health-field textarea { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid #dbd1e2; border-radius: 12px; outline: none; background: #fff; color: var(--club-ink); font: 700 14px var(--font-ui); }
.profile-fields input:focus,.profile-fields select:focus,.profile-health-field select:focus,.profile-health-field textarea:focus { border-color: var(--club-plum); box-shadow: 0 0 0 3px #eee4fa; }
.profile-two-col { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.profile-two-col > div { display: grid; gap: 9px; }
.profile-check { min-height: 35px; display: flex; align-items: center; gap: 9px; color: #655a6e; font-size: 12px; font-weight: 600; }
.profile-check input { width: 18px; height: 18px; accent-color: var(--club-plum); }
.profile-save,.profile-quiz-button { width: 100%; min-height: 51px; border: 0; border-radius: 15px; background: var(--club-plum); color: #fff; font-size: 14px; font-weight: 800; box-shadow: 0 9px 18px rgba(73,43,136,.16); }
.profile-storage-note { margin: 8px 0 1px; color: #746a79; font-size: 11px; text-align: center; }
.profile-quiz-button { background: #ef8b71; color: var(--club-ink); }
.profile-quiz-button:disabled { background: #eee7ef; color: #827889; box-shadow: none; cursor: not-allowed; }
.profile-health-note { padding: 11px 13px; border-radius: 13px; background: #f7f0fb; }
.profile-health-group { margin: 15px 0; padding: 13px; border: 1px solid #eee4f1; border-radius: 17px; background: #fffdfd; }
.profile-health-group > summary { cursor: pointer; color: var(--club-plum); }
.profile-health-group > summary strong { display: block; font: 800 16px/1.2 var(--font-ui); }
.profile-health-group > summary small { display: block; max-width: 90%; margin-top: 3px; color: #716678; font-size: 11px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-health-field { display: grid; gap: 7px; margin: 12px 0; }
.profile-health-field select { appearance: auto; }
.profile-health-field textarea { min-height: 74px; padding-top: 10px; resize: vertical; }
.profile-health-field details { border: 1px solid #dbd1e2; border-radius: 12px; padding: 11px 12px; }
.profile-health-field summary { color: #5a4f65; font-size: 12px; font-weight: 700; cursor: pointer; }
.profile-health-options { display: grid; gap: 9px; margin-top: 12px; max-height: 230px; overflow: auto; }
.profile-health-options label { display: flex; align-items: flex-start; gap: 9px; color: var(--club-ink); font-size: 12px; line-height: 1.3; }
.profile-health-options input { width: 17px; height: 17px; margin: 0; accent-color: var(--club-plum); flex: 0 0 auto; }
.profile-saved-note { margin: 8px 0 0; color: #317051; font-weight: 800; }
.profile-result-button { display: block; margin: 14px auto 22px; }
.visit-note[hidden],body.is-profile-page .support-fab { display: none; }
body.is-profile-page .club-nav { padding-right: 10px; }
.calendar-page { min-height: 100vh; background: var(--club-cream); }
.calendar-page-header { padding: max(18px,env(safe-area-inset-top)) 18px 26px; border-radius: 0 0 35px 35px; background: linear-gradient(135deg,#492b88,#7551af); color: #fff; }
.calendar-page-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calendar-back { min-width: 82px; min-height: 44px; padding: 0 12px; border: 1px solid rgba(255,255,255,.3); border-radius: 14px; background: rgba(255,255,255,.14); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; font-weight: 800; line-height: 1; }
.calendar-back svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.calendar-back span { font-size: 13px; }
.calendar-dog-slot { min-width: 0; }
.calendar-dog-slot .dog-menu { top: calc(100% + 7px); }
.calendar-page-kicker { display: block; margin-top: 24px; color: #e8ddf6; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.calendar-page-header h1 { margin: 6px 0 4px; font: 800 31px/1.04 var(--font-ui); letter-spacing: -.04em; }
.calendar-page-header p { margin: 0; color: #eee5fa; font-size: 13px; line-height: 1.4; }
.calendar-page-content { padding: 23px 18px 25px; }
.calendar-page-content .calendar-section { margin-bottom: 0; }
.next-care { position: relative; min-height: 93px; margin: -26px 0 29px; padding: 12px; border: 3px solid var(--club-cream); border-radius: 22px; background: var(--club-lime); display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; box-shadow: 0 8px 18px rgba(49,40,72,.09); }
.next-care-icon { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: #fffdf1; color: var(--club-plum); font-size: 25px; }
.next-care > div { min-width: 0; }
.next-care-eyebrow { color: #514d26; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.next-care h2 { margin: 2px 0; font: 800 16px/1.08 var(--font-ui); }
.next-care p { margin: 0; color: #4e4d35; font-size: 11px; line-height: 1.25; }
.next-care button { min-height: 44px; padding: 0 11px; border: 0; border-radius: 11px; background: var(--club-plum); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; }
.next-care button[hidden] { display: none; }
.next-care.all-done { background: var(--club-mint); }

.club-section { margin-bottom: 29px; }
.club-section-heading { margin: 0 2px 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.club-section-heading > div > span { color: #7a5379; font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.club-section-heading h2 { margin: 3px 0 0; font: 800 23px/1.06 var(--font-ui); letter-spacing: -.04em; }
.today-progress { padding: 7px 9px; border-radius: 999px; background: #e7f4df; color: #365841; font-size: 11px; font-weight: 800; white-space: nowrap; }
.health-score { display: flex; align-items: baseline; gap: 1px; color: var(--club-plum); }
.health-score strong { font: 800 22px/1 var(--font-ui); }
.health-score small { font-size: 12px; font-weight: 800; }

.rhythm-track { position: relative; display: grid; gap: 9px; }
.rhythm-track::before { content: ""; position: absolute; z-index: 0; top: 32px; bottom: 33px; left: 64px; width: 2px; background: #e4d9d5; }
.rhythm-item { position: relative; z-index: 1; min-height: 76px; padding: 9px 11px 9px 5px; border: 0; border-radius: 18px; background: #fff; display: grid; grid-template-columns: 41px 27px minmax(0,1fr) 68px; align-items: center; gap: 8px; color: var(--club-ink); text-align: left; box-shadow: 0 7px 20px rgba(75,45,86,.055); }
.rhythm-item.due { background: #fff0e9; box-shadow: none; }
.rhythm-time { color: #65586b; font-size: 11px; font-weight: 800; line-height: 1.05; text-align: center; }
.rhythm-time small { font-size: 9px; }
.rhythm-dot { width: 27px; height: 27px; border: 3px solid var(--club-cream); border-radius: 50%; display: grid; place-items: center; background: #83d2bb; color: #fff; font-size: 13px; font-weight: 800; }
.rhythm-item.due .rhythm-dot { background: var(--club-coral); font-size: 26px; line-height: 0; }
.rhythm-copy { display: grid; gap: 2px; }
.rhythm-copy strong { font-size: 14px; font-weight: 800; }
.rhythm-copy small { color: #6e626f; font-size: 11px; line-height: 1.2; }
.rhythm-state { justify-self: end; color: #316c59; font-size: 11px; font-weight: 800; text-align: right; }
.rhythm-item.due .rhythm-state { padding: 8px 6px; border-radius: 9px; background: #fff; color: #8f3650; }

.care-corners { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.corner-card { position: relative; height: 123px; padding: 13px; border: 0; border-radius: 22px 22px 29px 22px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; color: var(--club-ink); text-align: left; overflow: hidden; }
.corner-card::after { content: ""; position: absolute; right: -32px; top: -28px; width: 92px; height: 92px; border: 19px solid rgba(255,255,255,.25); border-radius: 50%; }
.corner-breath { background: #bde9db; }
.corner-skin { background: #e4d1f4; }
.corner-weight { background: #ffe2a7; }
.corner-play { background: #ffc9be; }
.corner-glyph { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.6); font-size: 27px; font-family: var(--font-ui); font-weight: 800; }
.corner-card > span:nth-child(2) { position: relative; z-index: 1; display: grid; gap: 2px; }
.corner-card small { font-size: 10px; font-weight: 800; letter-spacing: .05em; opacity: .82; }
.corner-card strong { font: 800 16px/1.08 var(--font-ui); }
.corner-card i { position: absolute; right: 12px; bottom: 11px; font-size: 17px; font-style: normal; opacity: .65; }
.health-disclaimer { margin: 9px 2px 0; color: #6c6271; font-size: 11px; line-height: 1.35; }

.club-shortcuts { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.club-shortcuts button { min-height: 78px; padding: 8px 2px; border: 1px solid #eee5eb; border-radius: 16px; background: #fff; display: grid; justify-items: center; align-content: center; gap: 4px; color: var(--club-ink); font-size: 12px; font-weight: 800; }
.club-shortcuts button span { font-size: 23px; line-height: 1; }
.club-shortcuts button:nth-child(1) { border-bottom: 3px solid #fda398; }
.club-shortcuts button:nth-child(2) { border-bottom: 3px solid #93d9bf; }
.club-shortcuts button:nth-child(3) { border-bottom: 3px solid #b9a1e8; }
.club-shortcuts button:nth-child(4) { border-bottom: 3px solid #f6ce78; }
.recent-log { margin: 10px 2px 0; color: #655d6e; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.recent-log[hidden] { display: none; }

.calendar-section { scroll-margin-top: 18px; }
.calendar-today { min-height: 44px; padding: 0 13px; border: 1px solid #d9c8ec; border-radius: 13px; background: #f1e9fa; color: var(--club-plum); font-size: 12px; font-weight: 800; }
.calendar-card { border: 1px solid #e9e0ec; border-radius: 25px; background: #fff; overflow: hidden; box-shadow: 0 10px 26px rgba(62,38,87,.06); }
.calendar-toolbar { min-height: 69px; padding: 10px 14px; background: #e8d8f7; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 6px; }
.calendar-toolbar h3 { margin: 0; color: var(--club-ink); text-align: center; font: 800 19px/1.1 var(--font-ui); }
.calendar-toolbar button { width: 44px; height: 44px; border: 0; border-radius: 13px; background: #fff; color: var(--club-plum); font-size: 28px; line-height: 1; }
.calendar-weekdays,.calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 3px; }
.calendar-weekdays { padding: 15px 10px 4px; color: #72657d; text-align: center; font-size: 11px; font-weight: 800; }
.calendar-grid { padding: 4px 10px 15px; }
.calendar-spacer { min-width: 0; }
.calendar-day { position: relative; min-width: 0; min-height: 42px; padding: 3px 0 9px; border: 0; border-radius: 12px; background: transparent; color: var(--club-ink); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.calendar-day.is-today:not([aria-pressed="true"]) { background: #e8f4dd; }
.calendar-day[aria-pressed="true"] { background: var(--club-plum); color: #fff; }
.calendar-day i { position: absolute; bottom: 6px; width: 5px; height: 5px; border-radius: 50%; background: #f19070; }
.calendar-day[aria-pressed="true"] i { background: #e6f395; }
.calendar-agenda { padding: 15px 14px 18px; border-top: 1px solid #efe7ec; background: #fffcf8; }
.calendar-agenda-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calendar-agenda-head span { color: #775b81; font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.calendar-agenda-head h3 { margin: 3px 0 0; font: 800 18px/1.1 var(--font-ui); }
.calendar-agenda-head button { min-height: 44px; padding: 0 13px; border: 0; border-radius: 12px; background: var(--club-plum); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; }
.calendar-entries { margin-top: 13px; display: grid; gap: 8px; }
.calendar-empty { margin: 0; padding: 17px 13px; border: 1px dashed #d9cce1; border-radius: 14px; color: #6c6074; background: #fff; font-size: 12px; line-height: 1.4; }
.agenda-entry { width: 100%; min-height: 68px; padding: 10px; border: 1px solid #ede5ee; border-radius: 15px; background: #fff; display: flex; align-items: center; gap: 10px; color: var(--club-ink); text-align: left; }
button.agenda-entry { cursor: pointer; }
.agenda-entry-icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; background: #e4d3f4; color: var(--club-plum); display: grid; place-items: center; font-size: 21px; font-weight: 800; }
.agenda-entry-icon.agenda-activity { background: #dcf2e7; }
.agenda-entry-icon.agenda-reminder { background: #ffe3ad; }
.agenda-entry-icon.agenda-care { background: #ffcfc7; }
.agenda-entry-icon.agenda-note { background: #ebdff7; }
.agenda-entry-copy { min-width: 0; display: grid; gap: 2px; }
.agenda-entry-copy small { color: #765a7c; font-size: 10px; font-weight: 800; }
.agenda-entry-copy strong { font: 800 14px/1.15 var(--font-ui); overflow-wrap: anywhere; }
.agenda-entry-copy em { color: #645b69; font-size: 11px; font-style: normal; line-height: 1.25; overflow-wrap: anywhere; }
.agenda-entry-chevron { margin-left: auto; color: #7b5c98; font-size: 25px; }
.agenda-open { overflow: hidden; }
.agenda-panel { max-height: min(680px,calc(100dvh - 12px)); overflow-y: auto; }
.agenda-panel form { gap: 7px; }
.agenda-panel form label { margin-top: 5px; font-size: 12px; }
.agenda-panel form label span { color: #786b7f; font-weight: 500; }
.agenda-panel input,.agenda-panel select { width: 100%; min-height: 44px; padding: 0 11px; border: 1px solid #d4c4df; border-radius: 12px; outline-color: var(--club-plum); background: #fff; color: var(--club-ink); font: 500 15px var(--font-ui); }
.agenda-panel textarea { min-height: 67px; }
.agenda-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.agenda-form-row > div { min-width: 0; display: grid; gap: 7px; }
.agenda-form-row input { min-width: 0; }
.agenda-form-actions { display: flex; gap: 8px; }
.agenda-form-actions button[type="submit"] { flex: 1; }
.agenda-form-actions .agenda-delete { padding: 0 15px; border: 1px solid #e3b9b5; background: #fff0ed; color: #8d3841; }
.agenda-form-actions .agenda-delete[hidden] { display: none; }

.sunny-note { position: relative; min-height: 135px; margin-bottom: 14px; padding: 17px 16px; border-radius: 22px; background: #ffe3a0; display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 12px; overflow: hidden; }
.sunny-note::before { content: ""; position: absolute; right: -31px; bottom: -49px; width: 122px; height: 122px; border: 18px solid rgba(255,255,255,.24); border-radius: 50%; }
.sunny-icon { width: 53px; height: 53px; border-radius: 17px; display: grid; place-items: center; background: #ffc270; color: #ae4b33; font-size: 31px; }
.sunny-note div:nth-child(2) { position: relative; z-index: 1; }
.sunny-note span { color: #8a4833; font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.sunny-note h2 { margin: 2px 0 3px; font: 800 17px/1.1 var(--font-ui); }
.sunny-note p { margin: 0; color: #674f49; font-size: 12px; line-height: 1.35; }
.sunny-note > button { position: absolute; z-index: 1; top: 13px; right: 13px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: rgba(255,255,255,.65); color: var(--club-ink); font-size: 19px; }
.visit-note { min-height: 86px; margin-bottom: 15px; padding: 10px; border: 1px solid #efe7e6; border-radius: 19px; background: #fff; display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 10px; }
.visit-calendar { width: 50px; height: 51px; border-radius: 14px; display: grid; place-content: center; justify-items: center; background: #d9c5f3; color: var(--club-plum); }
.visit-calendar small { font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.visit-calendar strong { font: 800 19px/1 var(--font-ui); }
.visit-note > span:nth-child(2) { display: grid; gap: 2px; }
.visit-note > span:nth-child(2) small { color: #855780; font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.visit-note > span:nth-child(2) strong { font-size: 13px; }
.visit-note em { color: #6b5e6b; font-size: 11px; font-style: normal; }
.visit-note button { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 11px; background: #f4edf8; color: var(--club-plum); font-size: 19px; }

.club-nav { position: fixed; z-index: 25; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); width: min(calc(100% - 20px),410px); min-height: 78px; padding: 8px 111px 8px 9px; border: 2px solid #7860a8; border-radius: 25px; background: linear-gradient(125deg,#32205f,#52368e 78%,#6645a0); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2px; transform: translateX(-50%); box-shadow: 0 12px 30px rgba(42,25,85,.27), inset 0 1px rgba(255,255,255,.18); }
.club-nav button { min-width: 0; min-height: 58px; padding: 5px 1px 4px; border: 0; border-radius: 17px; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #eee8fa; font: 800 11px/1.1 var(--font-ui); white-space: nowrap; transition: background .18s ease,color .18s ease,transform .18s ease; }
.club-nav button:hover { background: rgba(255,255,255,.12); }
.club-nav button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.club-nav button svg circle { fill: currentColor; stroke: none; }
.club-nav button span { display: block; }
.club-nav button:focus-visible { outline: 3px solid var(--club-peach); outline-offset: 2px; }
.club-nav .active,.club-nav .active:hover { background: var(--club-lime); color: #302259; box-shadow: 0 4px 0 rgba(26,13,59,.24), inset 0 1px rgba(255,255,255,.5); transform: translateY(-2px); }

.support-fab { position: fixed; z-index: 30; right: max(17px,calc((100vw - 430px)/2 + 17px)); bottom: calc(20px + env(safe-area-inset-bottom)); width: 94px; height: 58px; padding: 4px 6px 4px 4px; border: 3px solid #fff9ed; border-radius: 19px; background: #ffba87; box-shadow: 0 7px 0 rgba(42,25,85,.24),0 12px 20px rgba(31,16,70,.22); display: flex; align-items: center; gap: 3px; color: #302259; transform: translateY(-5px); }
.support-fab img { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; object-fit: cover; object-position: center 44%; }
.support-ping { position: absolute; z-index: 2; top: -6px; right: -5px; width: 16px; height: 16px; border: 3px solid #fff9ed; border-radius: 50%; background: #83d789; }
.support-fab-label { font-size: 12px; font-weight: 800; line-height: 1.05; text-align: left; }
body.support-open { overflow: hidden; }
.support-backdrop { position: fixed; z-index: 50; inset: 0; background: rgba(29,17,52,.55); }
.support-panel { position: fixed; z-index: 51; left: 50%; bottom: 84px; width: min(calc(100% - 20px),410px); max-height: min(565px,calc(100dvh - 107px)); border-radius: 24px; background: #fffdf9; display: flex; flex-direction: column; overflow: hidden; transform: translateX(-50%); box-shadow: 0 20px 60px rgba(22,11,42,.25); }
.support-panel[hidden],.support-backdrop[hidden] { display: none; }
.support-header { min-height: 74px; padding: 9px 12px; background: var(--club-plum); display: flex; align-items: center; gap: 10px; color: #fff; }
.support-header img { width: 53px; height: 53px; border-radius: 15px; background: #7654ba; object-fit: cover; }
.support-header div { display: grid; gap: 3px; }
.support-header strong { font: 800 17px/1 var(--font-ui); }
.support-header span { color: #dfcff2; font-size: 11px; }
.support-header button { margin-left: auto; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 11px; background: rgba(255,255,255,.18); color: #fff; font-size: 24px; }
.support-messages { min-height: 180px; padding: 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.support-message { max-width: 80%; margin: 0; padding: 11px 13px; border-radius: 14px; font-size: 13px; line-height: 1.4; }
.support-message.helper { align-self: flex-start; border-radius: 4px 14px 14px 14px; background: #f0e6f9; color: var(--club-ink); }
.support-message.owner { align-self: flex-end; border-radius: 14px 4px 14px 14px; background: var(--club-plum); color: #fff; }
.support-topics { padding: 0 14px 13px; display: flex; gap: 6px; overflow-x: auto; }
.support-topics button { flex: 0 0 auto; min-height: 40px; padding: 8px 12px; border: 1px solid #d9c7ef; border-radius: 999px; background: #fff; color: var(--club-plum); font-size: 12px; font-weight: 800; }
.support-compose { padding: 10px; border-top: 1px solid #ece3ef; display: flex; gap: 7px; }
.support-compose input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid #e4d9eb; border-radius: 12px; outline-color: var(--club-plum); background: #fff; font: 500 14px var(--font-ui); }
.support-compose button { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: var(--club-plum); color: #fff; font-size: 19px; }
.log-open { overflow: hidden; }
.log-panel { position: fixed; z-index: 51; left: 50%; bottom: 0; width: min(100%,430px); padding-bottom: env(safe-area-inset-bottom); border-radius: 25px 25px 0 0; background: #fffdf9; transform: translateX(-50%); box-shadow: 0 -15px 55px rgba(22,11,42,.23); }
.log-panel[hidden] { display: none; }
.log-panel header { min-height: 80px; padding: 17px 18px 9px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.log-panel header span { color: #765385; font-size: 11px; font-weight: 800; letter-spacing: .07em; }
.log-panel h2 { margin: 4px 0 0; color: var(--club-ink); font: 800 24px/1.1 var(--font-ui); }
.log-panel header button { width: 44px; height: 44px; border: 0; border-radius: 13px; background: #f2e9f8; color: var(--club-plum); font-size: 27px; }
.log-panel form { padding: 8px 18px 22px; display: grid; gap: 12px; }
.log-panel label { color: var(--club-ink); font-size: 14px; font-weight: 800; }
.log-panel textarea { width: 100%; min-height: 100px; padding: 12px; border: 1px solid #d4c4df; border-radius: 14px; outline-color: var(--club-plum); background: #fff; color: var(--club-ink); font: 500 16px/1.4 var(--font-ui); resize: vertical; }
.log-panel p { margin: 0; color: #6b5e73; font-size: 12px; }
.log-panel form button { min-height: 48px; border: 0; border-radius: 13px; background: var(--club-plum); color: #fff; font-size: 14px; font-weight: 800; }
.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; }

.preview-toast { position: fixed; z-index: 45; left: 50%; bottom: 169px; max-width: min(300px,calc(100% - 40px)); padding: 10px 13px; border-radius: 12px; background: var(--club-ink); color: #fff; font-size: 11px; opacity: 0; pointer-events: none; transform: translate(-50%,10px); transition: .2s ease; box-shadow: 0 8px 22px rgba(28,17,54,.18); }
.preview-toast.visible { opacity: 1; transform: translate(-50%,0); }

@media (min-width: 431px) {
  body:not(.is-assessment) { padding: 17px 0; }
  body:not(.is-assessment) .app-shell { border-radius: 30px; overflow: hidden; }
  .club-app { min-height: calc(100vh - 34px); border-radius: 30px; }
  .club-top { border-radius: 30px 30px 38px 38px; }
  .club-nav { bottom: 27px; }
  .support-fab { bottom: 37px; }
  .support-panel { bottom: 101px; }
}

@media (max-width: 355px) {
  .club-nav { padding-right: 86px; }
  .club-nav button { font-size: 10px; }
  .support-fab { width: 64px; padding: 4px; justify-content: center; }
  .support-fab img { width: 44px; height: 44px; flex-basis: 44px; }
  .support-fab-label { display: none; }
  body.is-profile-page .club-nav { padding-right: 10px; }
  .club-top,.club-content { padding-left: 13px; padding-right: 13px; }
  .calendar-page-header,.calendar-page-content { padding-left: 13px; padding-right: 13px; }
  .calendar-page-header h1 { font-size: 27px; }
  .dog-switch { width: 132px; min-height: 54px; grid-template-columns: 39px 1fr 14px; gap: 5px; border-radius: 18px; }
  .dog-switch img { width: 39px; height: 39px; border-radius: 12px; }
  .dog-switch strong { font-size: 12px; }
  .club-hero-art { right: -32px; }
  .club-hero-copy { padding-left: 15px; }
  .next-care { grid-template-columns: 36px minmax(0,1fr); gap: 8px; }
  .next-care-icon { width: 36px; height: 36px; }
  .next-care button { grid-column: 2; justify-self: start; }
  .rhythm-item { grid-template-columns: 38px 24px minmax(0,1fr) 58px; gap: 5px; }
  .rhythm-track::before { left: 57px; }
  .calendar-toolbar { padding-inline: 7px; gap: 3px; }
  .calendar-toolbar h3 { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .club-app *, .club-app *::before, .club-app *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}