:root {
  --luck-ink: #174b38;
  --luck-green: #4b8973;
  --luck-mint: #eff8f2;
  --luck-mint-strong: #e3f3e8;
  --luck-orange: #f28a3a;
  --luck-paper: #fffefa;
  --luck-line: #cfe4d2;
  --luck-muted: #6d7d72;
}

.lucklife-home {
  position: relative;
  height: 831px;
  padding: 0 14px 92px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  background: linear-gradient(180deg, #fbfffb, #fffefa 52%, #f5fbf5);
}
.lucklife-home::-webkit-scrollbar { display: none; }
.lucklife-hero {
  position: relative;
  height: 112px;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0 -14px 8px;
  padding: 8px 18px 7px;
  overflow: hidden;
  background: #fffefa;
}
.lucklife-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/lucklife/header-shanshui.png") right 46% / 100% auto no-repeat;
  pointer-events: none;
}
.lucklife-brand-lockup,
.lucklife-aphorism { position: relative; z-index: 1; }
.lucklife-brand-lockup { align-self: center; display: grid; justify-items: center; gap: 4px; }
.lucklife-logo {
  width: 49px;
  height: 49px;
  display: grid;
  place-items: center;
  color: #326b59;
}
.lucklife-logo svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.lucklife-brand-lockup h1 { margin: 0; color: #285b49; font-size: 10px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.lucklife-aphorism { width: 100%; min-width: 0; color: #174737; font-size: 13px; line-height: 1.72; letter-spacing: 0; }
.lucklife-aphorism::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: -5px;
  width: 80%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,254,250,.92) 0 68%, rgba(255,254,250,0));
  filter: blur(3px);
}
.lucklife-aphorism-line { margin: 0; white-space: nowrap; }
.lucklife-aphorism-line-wide { text-align: left; text-align-last: auto; }
.lucklife-search {
  height: 46px;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  padding: 0 14px;
  border: 1px solid #9cc8a4;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
}
.lucklife-search span { color: var(--luck-orange); font-size: 22px; }
.lucklife-search input { min-width: 0; border: 0; outline: 0; color: var(--luck-ink); background: transparent; font: 13px/1.4 inherit; }
.lucklife-search input::placeholder { color: #8e9990; }
.lucklife-schedule {
  min-height: 84px;
  display: grid;
  grid-template-columns: 104px minmax(0,1fr) 16px;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid #f3a04e;
  border-radius: 16px;
  color: #174737;
  background: rgba(255,254,250,.95);
}
.lucklife-schedule-time { height: 64px; display: grid; place-content: center; text-align: center; border-right: 1px solid #f0aa63; }
.lucklife-schedule-time small { color: #d56f31; font-size: 10px; }
.lucklife-schedule-time strong { margin-top: 5px; font-size: 27px; font-weight: 400; letter-spacing: .04em; }
.lucklife-schedule-main { min-width: 0; display: grid; gap: 8px; padding-left: 12px; }
.lucklife-schedule-main span { overflow: hidden; padding: 5px 9px; border: 1px solid #d7c7a2; border-radius: 10px; color: #375a50; font-size: 11px; letter-spacing: .12em; text-overflow: ellipsis; white-space: nowrap; }
.lucklife-schedule-main strong { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.lucklife-schedule > i { color: var(--luck-orange); font-size: 25px; font-style: normal; }
.lucklife-categories {
  overflow: hidden;
  border: 1px solid #a7cfad;
  border-radius: 15px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 8px 28px rgba(52,108,69,.06);
}
.lucklife-category {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) 25px;
  align-items: center;
  gap: 11px;
  padding: 6px 12px;
  border: 0;
  border-bottom: 1px solid var(--luck-line);
  color: var(--luck-ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.lucklife-category:last-child { border-bottom: 0; }
.lucklife-category:first-child { background: linear-gradient(90deg, var(--luck-mint-strong), #f8fcf8); }
.lucklife-category:active { background: var(--luck-mint); }
.lucklife-category:focus-visible { outline: 3px solid rgba(242,138,58,.28); outline-offset: -3px; }
.lucklife-category-icon {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  color: var(--luck-green);
}
.lucklife-category-icon svg {
  width: 31px;
  height: 31px;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lucklife-category b { font-size: 15px; letter-spacing: .08em; }
.lucklife-category-arrow { justify-self: end; color: var(--luck-green); font-size: 25px; font-weight: 300; }
.lucklife-latest { margin-top: 12px; }
.lucklife-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lucklife-section-head h2 { margin: 0; color: var(--luck-ink); font-size: 17px; letter-spacing: .08em; }
.lucklife-section-head button { border: 0; color: var(--luck-orange); background: transparent; font-size: 12px; cursor: pointer; }
.lucklife-latest-list { overflow: hidden; border: 1px solid var(--luck-line); border-radius: 14px; background: #fff; }
.lucklife-latest-item {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border: 0;
  border-bottom: 1px solid #e5eee6;
  color: #1c4530;
  background: transparent;
  text-align: left;
}
.lucklife-latest-item:last-child { border-bottom: 0; }
.lucklife-latest-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.lucklife-latest-item i { color: var(--luck-green); font-size: 19px; font-style: normal; }
.course-browser {
  position: absolute;
  z-index: 25;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f6fcf6, #fffefa);
  transform: translateX(105%);
  transition: transform .22s ease-out;
}
.course-browser.open { transform: none; }
.course-browser[hidden] { display: none; }
.course-browser-head {
  min-height: 76px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 42px;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--luck-line);
  background: rgba(255,255,255,.94);
}
.course-back,.course-close { width: 38px; height: 38px; border: 1px solid #b7d7bc; border-radius: 50%; color: var(--luck-green); background: #fff; font-size: 22px; cursor: pointer; }
.course-browser-head h2 { margin: 0; overflow: hidden; color: var(--luck-ink); font-size: 19px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.course-browser-head p { grid-column: 2; margin: -9px 0 0; color: var(--luck-muted); font-size: 10px; text-align: center; }
.course-browser-list { flex: 1; overflow-y: auto; padding: 12px 14px 98px; }
.course-directory {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
  padding: 9px 12px;
  border: 1px solid var(--luck-line);
  border-radius: 14px;
  color: var(--luck-ink);
  background: #fff;
  text-align: left;
  box-shadow: 0 7px 20px rgba(57,102,68,.05);
  cursor: pointer;
}
.course-directory-number { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--luck-green); background: var(--luck-mint); font: 700 12px/1 Arial,sans-serif; }
.course-directory-copy strong { display: block; font-size: 15px; }
.course-directory-copy small { display: block; margin-top: 4px; color: var(--luck-muted); font-size: 10px; }
.course-directory-arrow { color: var(--luck-orange); font-size: 22px; }
.course-empty { padding: 70px 24px; color: var(--luck-muted); text-align: center; line-height: 1.8; }
.course-player { position: absolute; z-index: 45; inset: 0; display: grid; place-items: end center; background: rgba(18,52,31,.38); }
.course-player[hidden] { display: none; }
.course-player-panel { width: 100%; padding: 18px 16px max(24px,env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; color: var(--luck-ink); background: #fffefa; }
.course-player-close { float: right; width: 36px; height: 36px; border: 1px solid var(--luck-line); border-radius: 50%; color: var(--luck-green); background: #fff; font-size: 20px; }
.course-player-screen { clear: both; min-height: 190px; display: grid; place-items: center; margin: 10px 0 14px; border-radius: 16px; color: #eaffed; background: linear-gradient(145deg,#275e3d,#123b25); text-align: center; }
.course-player-screen strong { display: block; font-size: 18px; }
.course-player-screen small { display: block; margin-top: 7px; color: #c8ddcd; }
.care-page { height: 831px; overflow-y: auto; padding: 0 0 116px; color: #164f47; background: #faf7ef; scrollbar-color: #7fb9a6 #faf7ef; }
.care-page::selection { color: #fff; background: #4b8973; }
.care-hero { position: relative; height: min(96vw,410px); overflow: hidden; background: #f6f1e6; }
.care-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 72px; background: linear-gradient(180deg,transparent,#faf7ef); pointer-events: none; }
.care-hero img { width: 120%; max-width: none; height: auto; display: block; margin-left: -10%; }
.care-content { position: relative; z-index: 1; margin-top: -18px; padding: 0 14px 18px; }
.care-heading { padding: 12px 16px 10px; border: 1px solid rgba(201,155,84,.56); border-radius: 16px 16px 8px 8px; background: rgba(250,247,239,.97); text-align: center; box-shadow: 0 10px 24px rgba(22,79,71,.08); }
.care-heading h2 { margin: 0; color: #164f47; font: 700 30px/1.12 "Noto Serif TC","PMingLiU","Microsoft JhengHei",serif; letter-spacing: .12em; }
.care-heading p { margin: 5px 0 0; color: #315f49; font-size: 13px; letter-spacing: .12em; }
.care-audio-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 8px; }
.care-audio-card { min-width: 0; padding: 9px 5px 6px; border: 1px solid rgba(75,137,115,.58); border-radius: 14px; background: #fffefa; text-align: center; box-shadow: 0 6px 16px rgba(49,95,73,.08); }
.care-audio-card h3 { min-height: 34px; margin: 0; color: #164f47; font-size: 12.5px; line-height: 1.4; }
.care-audio-card > p { margin: 1px 0 4px; color: #d78532; font-size: 12px; }
.care-audio-controls { display: grid; grid-template-columns: repeat(3,44px); justify-content: center; gap: 4px; }
.care-audio-controls button { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(201,155,84,.58); border-radius: 50%; color: #4b8973; background: #fffefa; box-shadow: 0 4px 10px rgba(22,79,71,.09); cursor: pointer; }
.care-audio-controls button:focus-visible,.care-documents a:focus-visible { outline: 3px solid #f2a36b; outline-offset: 3px; }
.care-audio-controls button[aria-pressed="true"] { color: #fff; background: #4b8973; }
.care-play-icon { width: 0; height: 0; margin-left: 3px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid currentColor; }
.care-loop-icon { position: relative; width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 50%; transform: rotate(-12deg); }
.care-loop-icon::before,.care-loop-icon::after { content: ""; position: absolute; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.care-loop-icon::before { top: -3px; right: -2px; border-left: 6px solid currentColor; transform: rotate(38deg); }
.care-loop-icon::after { bottom: -3px; left: -2px; border-right: 6px solid currentColor; transform: rotate(38deg); }
.care-stop-icon { width: 13px; height: 13px; border-radius: 2px; background: currentColor; }
.care-audio-status { display: block; min-height: 15px; margin-top: 3px; color: #567268; font-size: 11px; }
.care-documents { display: grid; gap: 6px; margin-top: 8px; }
.care-documents a { min-height: 54px; display: grid; grid-template-columns: 34px minmax(0,1fr) 18px; align-items: center; gap: 9px; padding: 4px 10px; border: 1px solid rgba(201,155,84,.62); border-radius: 14px; color: #164f47; background: #fffefa; text-decoration: none; box-shadow: 0 5px 14px rgba(22,79,71,.06); }
.care-document-icon { position: relative; width: 27px; height: 31px; border: 2px solid #4b8973; border-radius: 4px; background: #edf6ef; }
.care-document-icon::before { content: ""; position: absolute; top: 7px; left: 6px; width: 12px; height: 2px; background: #4b8973; box-shadow: 0 5px 0 #4b8973,0 10px 0 #4b8973; }
.care-documents a > span:nth-child(2) { min-width: 0; font-size: 14px; line-height: 1.45; }
.care-document-arrow { color: #4b8973; font: 400 28px/1 Arial,sans-serif; }
.bottom .nav-item.active::before { content:""; position:absolute; top:2px; left:var(--nav-icon-center); width:30px; height:3px; border-radius:999px; background:#e6a35b; box-shadow:0 5px 12px rgba(127,185,166,.55); transform:translateX(-50%); }
.bottom .nav-item:focus:not(:focus-visible) { outline:none; }
.reminder-calendar-copy { align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
.reminder-calendar-copy strong { color:#164f47; font-size:19px; line-height:1.3; }
.reminder-calendar-copy small { font-size:15px; line-height:1.45; }
.reminder-calendar-row { grid-template-columns:70px minmax(0,1fr) auto auto; }
.reminder-calendar-kind { align-self:center; font-size:14px; line-height:1; white-space:nowrap; }
.reminder-calendar-kind.green { color:#08705b; }
.reminder-calendar-kind.red { color:#a32f35; }
.haircut-calendar-row { min-height: 92px; grid-template-columns: 70px minmax(0,1fr) auto; }
.haircut-calendar-row .reminder-calendar-copy { gap: 2px; }
.haircut-calendar-row .reminder-calendar-copy strong { margin-bottom: 2px; }
.haircut-calendar-row .reminder-calendar-copy small { display: block; }

.bottom { grid-template-columns: repeat(6,minmax(0,1fr)); }
.bottom .nav-item { min-width: 0; font-size: 9.5px; }
.bottom .nav-item span { max-width: 100%; text-align: center; line-height: 1.15; white-space: normal; }

@media (max-width: 620px) {
  .lucklife-home,.care-page { height: calc(100dvh - 77px); }
}

@media (max-width: 350px) {
  .lucklife-hero { grid-template-columns: 68px minmax(0,1fr); gap: 5px; margin-inline: -12px; padding-inline: 12px; }
  .lucklife-logo { width: 44px; height: 44px; }
  .lucklife-brand-lockup h1 { font-size: 8.5px; }
  .lucklife-aphorism { font-size: 11px; }
  .lucklife-schedule { grid-template-columns: 86px minmax(0,1fr) 13px; padding-inline: 7px; }
  .lucklife-schedule-main { padding-left: 8px; }
  .lucklife-schedule-main span { font-size: 9.5px; letter-spacing: .07em; }
  .lucklife-schedule-main strong { font-size: 11px; }
  .lucklife-category { min-height: 50px; }
  .bottom .nav-item { font-size: 8.5px; }
  .care-hero { height: 96vw; }
  .care-content { padding-inline: 10px; }
  .care-heading h2 { font-size: 27px; }
  .care-audio-controls { grid-template-columns: repeat(3,44px); gap: 2px; }
  .care-audio-controls button { width: 44px; height: 44px; }
  .care-audio-card { padding-inline: 2px; }
  .care-audio-card h3 { font-size: 11.5px; }
  .care-documents a > span:nth-child(2) { font-size: 12.5px; }
}

@media (min-width: 351px) and (max-width: 380px) {
  .lucklife-hero { grid-template-columns: 76px minmax(0,1fr); margin-inline: -12px; padding-inline: 14px; }
  .lucklife-aphorism { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .course-browser { transition: none; }
}