:root {
  --card: rgba(255,255,255,.94);
  --ink: #30283a;
  --muted: #8b8191;
  --line: #f4d8e4;
  --hot: #f36f9f;
  --hot2: #fff0f6;
  --gold: #ffd16c;
  --shadow: 0 18px 48px rgba(156,69,103,.16);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at 10% 0%, #fff 0, #fff4f9 36%, transparent 56%),
              linear-gradient(160deg, #fff8fb 0%, #fff1f7 58%, #f4fbff 100%);
}

.splash {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: linear-gradient(145deg, #fff2f8, #fff9ec);
  z-index: 99; transition: .45s ease;
}

.splash.hide { opacity: 0; pointer-events: none; }
.splash-card { text-align: center; animation: pop .65s ease; }
.splash-icon {
  width: 92px; height: 92px; border-radius: 32px;
  background: linear-gradient(135deg, var(--hot), var(--gold));
  display: grid; place-items: center; font-size: 42px;
  box-shadow: var(--shadow); margin: 0 auto 14px;
}
.splash h1 { margin: 0 0 6px; font-size: 26px; }
.splash p { margin: 0; color: var(--muted); font-weight: 800; }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }

.app { max-width: 448px; min-height: 100vh; margin: 0 auto; padding: 18px 16px 112px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 2px 14px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-icon {
  width: 54px; height: 54px; border-radius: 20px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--hot), var(--gold));
  box-shadow: var(--shadow); font-size: 26px;
}
.title { font-weight: 950; font-size: 21px; letter-spacing: .02em; }
.subtitle { color: var(--muted); font-size: 12px; margin-top: 3px; }

button {
  border: 0; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  color: var(--ink); font-weight: 900; padding: 10px 12px;
  box-shadow: 0 8px 18px rgba(150,80,110,.08);
}
.primary { background: var(--hot); color: #fff; border: 0; }
.danger { background: #fff0f0; color: #d64444; border-color: #ffcbd3; }
.pill { font-size: 12px; box-shadow: var(--shadow); }

.screen { display: none; }
.screen.active { display: block; }

.hero-card {
  position: relative; min-height: 440px; margin-bottom: 14px; padding: 18px 16px;
  border: 1px solid var(--line); border-radius: 36px;
  background: linear-gradient(145deg, rgba(255,240,247,.96), rgba(255,250,237,.96));
  box-shadow: var(--shadow); overflow: hidden;
}
.version-badge {
  position: relative; display: inline-flex; padding: 7px 11px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,.75); color: #b34c76;
  font-size: 12px; font-weight: 950; margin-bottom: 10px;
}
.speech {
  position: relative; z-index: 3; width: 61%; min-height: 164px; padding: 15px;
  border: 2px solid #ffd4e3; border-radius: 28px;
  background: rgba(255,255,255,.93); box-shadow: 0 12px 26px rgba(226,91,139,.12);
}
.speech.pop { animation: bubblePop .35s ease; }
@keyframes bubblePop { 0% { transform: scale(.98); } 60% { transform: scale(1.025); } 100% { transform: scale(1); } }
.speech::after {
  content: ""; position: absolute; right: -17px; top: 82px; width: 30px; height: 30px;
  background: rgba(255,255,255,.93); border-right: 2px solid #ffd4e3; border-bottom: 2px solid #ffd4e3;
  transform: rotate(-45deg); border-radius: 5px;
}
.speaker {
  display: inline-flex; background: var(--hot2); color: var(--hot);
  border-radius: 999px; padding: 5px 10px; font-weight: 950; font-size: 12px; margin-bottom: 8px;
}
.speech-text { white-space: pre-line; font-weight: 900; line-height: 1.68; font-size: 15px; }

.chappy-wrap {
  position: absolute; right: -6px; top: 58px; width: 228px; height: 300px; z-index: 2;
  display: grid; place-items: end center; animation: floaty 4.2s ease-in-out infinite;
}
.chappy-wrap::after {
  content: "タップしてね"; position: absolute; right: 34px; bottom: 18px; z-index: 14;
  background: rgba(255,255,255,.86); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 9px; font-size: 10px; font-weight: 900; color: var(--hot);
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.chappy { position: relative; width: 184px; height: 268px; filter: drop-shadow(0 18px 26px rgba(180,80,120,.18)); cursor: pointer; }
.chappy.tap-bounce { animation: chappyTap .42s ease; }
@keyframes chappyTap { 0% { transform: scale(1); } 35% { transform: scale(1.055) rotate(-2deg); } 70% { transform: scale(.985) rotate(1deg); } 100% { transform: scale(1); } }
.hair-back { position: absolute; width: 132px; height: 192px; right: 6px; top: 20px; background: linear-gradient(145deg, #ffb6cf, #f48bb8); border-radius: 80px; transform: rotate(8deg); opacity: .95; }
.tail { position: absolute; right: -10px; top: 50px; width: 68px; height: 150px; background: linear-gradient(145deg, #ffc0d5, #f28bb7); border-radius: 60px; transform: rotate(12deg); }
.face { position: absolute; left: 42px; top: 26px; width: 100px; height: 108px; background: #ffe2e7; border-radius: 50% 50% 46% 46%; border: 2px solid rgba(194,91,122,.25); z-index: 5; }
.hair-front { position: absolute; left: 31px; top: 12px; width: 122px; height: 74px; background: linear-gradient(145deg, #ffb7d0, #f38eb7); border-radius: 60px 60px 38px 36px; z-index: 6; transform: rotate(-3deg); }
.eye { position: absolute; top: 58px; width: 17px; height: 22px; border-radius: 50%; background: #7a3e55; z-index: 8; animation: blink 5s infinite; }
.eye::after { content: ""; position: absolute; top: 4px; left: 4px; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.eye-left { left: 64px; } .eye-right { right: 54px; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
.cheek { position: absolute; top: 82px; width: 18px; height: 9px; border-radius: 50%; background: rgba(244,112,149,.35); z-index: 8; }
.cheek-left { left: 52px; } .cheek-right { right: 42px; }
.mouth { position: absolute; top: 86px; left: 88px; width: 18px; height: 10px; border-bottom: 3px solid #9e4960; border-radius: 0 0 18px 18px; z-index: 8; }
.body { position: absolute; left: 47px; top: 126px; width: 94px; height: 116px; background: linear-gradient(145deg, #ffd4e4, #f5a6c2); border: 2px solid rgba(201,103,133,.22); border-radius: 42px 42px 26px 26px; z-index: 4; }
.collar { position: absolute; left: 72px; top: 128px; width: 48px; height: 22px; background: #fff; border-radius: 0 0 16px 16px; z-index: 7; }
.arm { position: absolute; height: 25px; background: #f5a6c2; border-radius: 999px; z-index: 6; transform-origin: 12px 13px; }
.arm-left { width: 78px; left: 8px; top: 150px; transform: rotate(34deg); }
.arm-right { width: 112px; right: 5px; top: 154px; transform: rotate(18deg); animation: wave 2.4s ease-in-out infinite; }
@keyframes wave { 0%,100% { transform: rotate(18deg); } 50% { transform: rotate(11deg); } }
.hand { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: #ffe2e7; z-index: 7; }
.hand-left { left: 17px; top: 188px; } .hand-right { right: -31px; top: 179px; }
.heart { position: absolute; right: 24px; top: 36px; z-index: 9; color: #ff7baa; font-size: 25px; animation: hearts 2.8s ease-in-out infinite; }
@keyframes hearts { 0%,100% { transform: translateY(0) rotate(-8deg); opacity: .85; } 50% { transform: translateY(-10px) rotate(8deg); opacity: 1; } }
.tap-heart { position: absolute; right: 54px; top: 70px; z-index: 15; color: #ff5f9e; font-size: 24px; pointer-events: none; animation: tapHeart 1s ease forwards; }
@keyframes tapHeart { 0% { transform: translateY(0) scale(.7); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-42px) scale(1.25); opacity: 0; } }

.mini-grid { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 4; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini-card { min-height: 70px; padding: 10px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.86); }
.mini-card span { display: block; color: var(--muted); font-size: 11px; font-weight: 900; }
.mini-card strong { display: block; font-size: 15px; margin-top: 4px; }

.card { margin-bottom: 14px; padding: 16px; border: 1px solid rgba(244,216,228,.95); border-radius: 30px; background: var(--card); box-shadow: var(--shadow); }
.card h2 { margin: 0 0 12px; font-size: 16px; }
.card-title-row, .calendar-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tiny-btn { padding: 8px 10px; font-size: 12px; }
.daily-note, .hint, .empty-page p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; font-weight: 800; }
.work-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.work-card strong { font-size: 17px; } .work-card p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }

.mood-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.mood-grid button { min-height: 72px; font-size: 24px; border-radius: 20px; transition: .18s ease; }
.mood-grid button.selected { background: var(--hot2); border-color: #ffb9d1; transform: translateY(-2px); }
.mood-grid span { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }

.week-row, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.week-row { margin-bottom: 6px; }
.week-row span { text-align: center; color: var(--muted); font-size: 11px; font-weight: 950; }
.calendar-day { min-height: 78px; border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 6px 4px; font-size: 12px; position: relative; overflow: hidden; text-align: left; box-shadow: none; }
.calendar-day.blank { opacity: .32; background: rgba(255,255,255,.55); }
.day-number { font-weight: 950; margin-left: 3px; }
.calendar-day.today { outline: 2px solid #ffb6cf; background: #fff7fb; }
.shift-tag { display: block; margin-top: 4px; border-radius: 9px; padding: 3px 4px; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; font-weight: 900; }
.shift-care { background: #f0e9ff; color: #6b48c6; }
.shift-night { background: #eef1ff; color: #4054c8; }
.shift-part { background: #fff1df; color: #b65c00; }
.shift-off { background: #effbe9; color: #39702f; }

.template-list { display: grid; gap: 9px; }
.template-section-title { font-size: 13px; color: var(--muted); font-weight: 950; margin: 14px 0 8px; }
.template { border: 1px solid var(--line); border-radius: 20px; background: #fff; padding: 12px; }
.template-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.template small { display: block; color: var(--muted); margin-top: 4px; }
.template-actions { display: flex; gap: 8px; margin-top: 10px; }
.template-actions button { flex: 1; font-size: 12px; padding: 9px; }
.badge { display: inline-flex; border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 900; }
.badge-care { background: #f0e9ff; color: #6b48c6; }
.badge-night { background: #eef1ff; color: #4054c8; }
.badge-part { background: #fff1df; color: #b65c00; }
.badge-off { background: #effbe9; color: #39702f; }

.empty-page { min-height: 260px; display: grid; align-content: center; text-align: center; }
.setting-box { border: 1px solid var(--line); border-radius: 22px; background: #fff; padding: 14px; margin-bottom: 14px; }
.setting-box p { margin: 6px 0 0; color: var(--muted); }
.credits { font-weight: 800; color: var(--ink) !important; }
.checklist { margin: 0; padding-left: 1.2em; color: var(--muted); line-height: 1.8; }

.sheet-backdrop { position: fixed; inset: 0; z-index: 80; display: none; align-items: flex-end; justify-content: center; background: rgba(48, 40, 58, .34); }
.sheet-backdrop.show { display: flex; }
.bottom-sheet { width: min(448px, 100%); max-height: 86vh; overflow: auto; background: #fff; border-radius: 30px 30px 0 0; padding: 14px 16px 20px; box-shadow: var(--shadow); }
.sheet-handle { width: 42px; height: 5px; border-radius: 999px; background: #ead3dd; margin: 0 auto 12px; }
.sheet-title { font-size: 18px; font-weight: 950; margin-bottom: 8px; }
.sheet-actions { display: grid; gap: 9px; }
.sheet-actions button { width: 100%; text-align: left; border-radius: 18px; padding: 13px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
label { display: block; color: var(--muted); font-size: 12px; font-weight: 900; margin: 10px 0 5px; }
input, select { width: 100%; border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: #fff; font-size: 15px; outline: none; }
.sheet-close { width: 100%; margin-top: 12px; border-radius: 18px; }

.bottom-nav { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(414px, calc(100% - 24px)); display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 8px; border: 1px solid var(--line); border-radius: 28px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.nav-btn { box-shadow: none; border: 0; background: transparent; color: var(--muted); padding: 9px 0; font-size: 16px; }
.nav-btn span { display: block; font-size: 10px; margin-top: 2px; }
.nav-btn.active { color: var(--hot); background: var(--hot2); }

.toast { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 90; opacity: 0; transition: .2s ease; color: #fff; background: #30283a; border-radius: 999px; padding: 10px 14px; font-size: 13px; }
.toast.show { opacity: 1; }


.salary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.salary-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 13px;
}

.salary-box.wide {
  grid-column: 1 / -1;
  background: linear-gradient(145deg, #fff, #fff4f8);
}

.salary-box span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.salary-box strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
}

.salary-mini {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 800;
}


/* Phase D-0.1 Chappy Room */
.room-hero {
  background: linear-gradient(145deg, rgba(255,240,247,.96), rgba(246,243,255,.96));
}

.analysis-box {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 13px;
  background: #fff;
  color: var(--ink);
  font-weight: 850;
  line-height: 1.65;
}

.chat-log {
  display: grid;
  gap: 9px;
  max-height: 260px;
  overflow: auto;
  padding: 4px 0 10px;
}

.chat-bubble {
  max-width: 88%;
  border-radius: 20px;
  padding: 11px 13px;
  line-height: 1.6;
  white-space: pre-line;
  font-size: 13px;
  font-weight: 800;
}

.chat-bubble.user {
  justify-self: end;
  background: var(--hot);
  color: #fff;
  border-bottom-right-radius: 7px;
}

.chat-bubble.chappy {
  justify-self: start;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  border-bottom-left-radius: 7px;
}

.chat-input-row {
  display: grid;
  grid-template-columns: 1fr 64px;
  gap: 8px;
  margin-top: 8px;
}

.quick-chat {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0 2px;
}

.quick-chat button {
  font-size: 12px;
  padding: 9px 11px;
}

.room-mood-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.room-mood-grid button {
  min-height: 68px;
  font-size: 23px;
  border-radius: 20px;
}

.room-mood-grid span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.room-mood-grid button.selected {
  background: var(--hot2);
  border-color: #ffb9d1;
  transform: translateY(-2px);
}

textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  background: #fff;
  font-size: 15px;
  outline: none;
  font-family: inherit;
  color: var(--ink);
}

.full-btn {
  width: 100%;
  margin-top: 10px;
  border-radius: 18px;
}

.secret-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.secret-note-item {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 11px;
}

.secret-note-item small {
  color: var(--muted);
  display: block;
  margin-bottom: 5px;
  font-weight: 850;
}

.secret-note-item p {
  margin: 0;
  white-space: pre-line;
  line-height: 1.6;
  font-size: 13px;
  font-weight: 800;
}

.talk-status {
  margin-top: 10px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 12px;
  color: var(--muted);
  font-weight: 900;
  text-align: center;
}


/* Phase D-0.2 additions */
.memory-box {
  margin-top: 10px;
  border: 1px dashed #f3b9cf;
  border-radius: 20px;
  padding: 11px;
  background: rgba(255,255,255,.72);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.65;
}

.learning-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.learning-grid button {
  border-radius: 18px;
  min-height: 52px;
  text-align: left;
}

.learning-answer {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 13px;
  color: var(--ink);
  font-weight: 850;
  line-height: 1.7;
  white-space: pre-line;
}

.secret-note-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.secret-note-actions button {
  flex: 1;
  font-size: 12px;
  padding: 8px 10px;
}


/* Phase D-0.3 Chappy Room+ */
.strategy-box {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg, #fff, #fff5fa);
  padding: 14px;
  color: var(--ink);
  font-weight: 850;
  line-height: 1.75;
  white-space: pre-line;
}

.tired-gauge {
  height: 18px;
  border-radius: 999px;
  background: #f5e4ec;
  border: 1px solid var(--line);
  overflow: hidden;
  margin-top: 12px;
}

.tired-gauge-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8ed6a6, #ffd16c, #f36f9f);
  transition: width .35s ease;
}

.tired-level {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 950;
  color: var(--ink);
}

.diary-list .secret-note-item,
#diaryList .secret-note-item {
  background: linear-gradient(145deg, #fff, #fff6fb);
  border-color: #ffd3e4;
  box-shadow: 0 8px 18px rgba(243,111,159,.08);
}

.secret-note-actions .primary {
  color: #fff;
}


/* Phase D-0.4 Home x Room link */
.home-link-card {
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,246,251,.96));
}

.home-gauge {
  margin-top: 8px;
}

.home-strategy-mini {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 12px;
  color: var(--ink);
  font-weight: 850;
  line-height: 1.65;
  white-space: pre-line;
}

.room-category-card {
  background: linear-gradient(145deg, #fff, #fff7fb);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 10px;
}

.category-grid button {
  min-height: 74px;
  border-radius: 22px;
  font-size: 24px;
  background: #fff;
  transition: .18s ease;
}

.category-grid button:active {
  transform: scale(.97);
}

.category-grid span {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 900;
}

.room-category-card,
.room-hero,
#room .card {
  position: relative;
}

.room-hero::before,
.room-category-card::before {
  content: "";
  position: absolute;
  right: 18px;
  top: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,211,228,.55));
  pointer-events: none;
}

#notifyLineBox {
  min-height: 86px;
}


/* Phase E-0.1 Bond Growth */
.bond-card {
  background: linear-gradient(145deg, #fff, #fff2f8);
  overflow: hidden;
  position: relative;
}

.bond-card::after {
  content: "♡";
  position: absolute;
  right: 18px;
  top: 18px;
  font-size: 56px;
  color: rgba(243,111,159,.12);
  font-weight: 950;
}

.bond-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.bond-title {
  font-size: 18px;
  font-weight: 950;
}

.bond-sub {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.bond-big {
  min-width: 72px;
  height: 72px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--hot), var(--gold));
  color: #fff;
  font-weight: 950;
  box-shadow: var(--shadow);
}

.bond-progress {
  margin-top: 13px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #f7e2eb;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.bond-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff91b9, #ffd16c);
  transition: width .4s ease;
}

.bond-reward-line {
  margin: 12px 0 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  padding: 12px;
  color: var(--ink);
  font-weight: 850;
  line-height: 1.65;
  white-space: pre-line;
  position: relative;
  z-index: 1;
}

.mission-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.mission-item {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 10px;
}

.mission-mark {
  width: 38px;
  height: 38px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--hot2);
  font-weight: 950;
}

.mission-item.done .mission-mark {
  background: linear-gradient(135deg, var(--hot), var(--gold));
  color: #fff;
}

.mission-title {
  font-weight: 950;
  font-size: 13px;
}

.mission-desc {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.mission-point {
  color: var(--hot);
  font-size: 12px;
  font-weight: 950;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 12px;
}

.badge-item {
  min-height: 104px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  padding: 10px 7px;
  text-align: center;
  opacity: .48;
  filter: grayscale(.8);
}

.badge-item.unlocked {
  opacity: 1;
  filter: none;
  background: linear-gradient(145deg, #fff, #fff6fb);
  border-color: #ffd1e3;
  box-shadow: 0 8px 18px rgba(243,111,159,.08);
}

.badge-icon {
  font-size: 26px;
  margin-bottom: 5px;
}

.badge-name {
  font-size: 11px;
  font-weight: 950;
  line-height: 1.35;
}

.badge-cond {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.35;
}

.chappy-growth-card {
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(246,243,255,.96));
}

.growth-memo {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  padding: 13px;
  color: var(--ink);
  font-weight: 850;
  line-height: 1.75;
  white-space: pre-line;
}


/* Phase E-0.2 Bond Evolution */
.streak-pill {
  display: inline-flex;
  margin-top: 12px;
  border: 1px solid #ffd1e3;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  padding: 7px 11px;
  color: var(--hot);
  font-size: 12px;
  font-weight: 950;
  position: relative;
  z-index: 1;
}

.level-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  background: rgba(48, 40, 58, .42);
  padding: 20px;
}

.level-modal.show {
  display: grid;
}

.level-card {
  width: min(360px, 100%);
  border: 1px solid #ffd1e3;
  border-radius: 34px;
  background: linear-gradient(145deg, #fff, #fff3f8);
  box-shadow: var(--shadow);
  padding: 24px 18px 18px;
  text-align: center;
  animation: levelPop .42s ease;
}

.level-sparkle {
  width: 76px;
  height: 76px;
  border-radius: 28px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--hot), var(--gold));
  color: #fff;
  font-size: 36px;
  box-shadow: 0 16px 30px rgba(243,111,159,.24);
}

.level-card h2 {
  margin: 0 0 8px;
  font-size: 22px;
}

.level-card p {
  margin: 0 0 12px;
  color: var(--muted);
  font-weight: 850;
  line-height: 1.7;
  white-space: pre-line;
}

@keyframes levelPop {
  from { opacity: 0; transform: translateY(18px) scale(.92); }
  to { opacity: 1; transform: none; }
}

.badge-popup {
  position: fixed;
  left: 50%;
  top: 18px;
  transform: translateX(-50%) translateY(-18px);
  z-index: 130;
  width: min(390px, calc(100% - 24px));
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  border: 1px solid #ffd1e3;
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow);
  padding: 12px;
  opacity: 0;
  pointer-events: none;
  transition: .26s ease;
}

.badge-popup.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.badge-popup-icon {
  width: 56px;
  height: 56px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--hot), var(--gold));
  color: #fff;
  font-size: 27px;
}

.badge-popup strong {
  display: block;
  font-size: 15px;
}

.badge-popup p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.outfit-card {
  background: linear-gradient(145deg, #fff, #f9f6ff);
}

.outfit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-top: 12px;
}

.outfit-item {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  min-height: 112px;
  padding: 11px 9px;
  text-align: center;
  opacity: .52;
  filter: grayscale(.75);
}

.outfit-item.unlocked {
  opacity: 1;
  filter: none;
}

.outfit-item.selected {
  border-color: #ff9ec1;
  background: linear-gradient(145deg, #fff, #fff4f9);
  box-shadow: 0 8px 18px rgba(243,111,159,.09);
}

.outfit-icon {
  font-size: 28px;
  margin-bottom: 6px;
}

.outfit-name {
  font-size: 12px;
  font-weight: 950;
}

.outfit-cond {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.35;
}

.outfit-item button {
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  font-size: 11px;
  border-radius: 16px;
}

.chappy.outfit-default .body {
  background: linear-gradient(145deg, #ffd4e4, #f5a6c2);
}

.chappy.outfit-night .body {
  background: linear-gradient(145deg, #cfd7ff, #9aa7ff);
}

.chappy.outfit-study .body {
  background: linear-gradient(145deg, #d9f8df, #93d7a8);
}

.chappy.outfit-partner .body {
  background: linear-gradient(145deg, #ffe3f1, #d9c8ff);
}

.chappy.outfit-pro .body {
  background: linear-gradient(145deg, #fff0b8, #ff9fc0);
}

.chappy.outfit-night .collar {
  background: #f4f6ff;
}

.chappy.outfit-study .collar {
  background: #fffced;
}

.chappy.outfit-pro .heart {
  color: #ffb700;
  font-size: 30px;
}

.chappy.mood-sleepy .eye {
  height: 6px;
  top: 70px;
  border-radius: 999px;
  animation: none;
}

.chappy.mood-tired .mouth,
.chappy.mood-sad .mouth {
  border-bottom: 0;
  border-top: 3px solid #9e4960;
  border-radius: 18px 18px 0 0;
  top: 94px;
}

.chappy.mood-angry .cheek {
  background: rgba(244, 86, 116, .48);
}

.chappy.tired-high {
  filter: drop-shadow(0 18px 26px rgba(180,80,120,.24)) saturate(.9);
}

.chappy.stage-high .heart {
  animation-duration: 1.7s;
}

.chappy.stage-max .heart {
  color: #ffbe00;
  text-shadow: 0 0 12px rgba(255,190,0,.38);
}


/* Phase E-0.3 Bond Gift */
body.bond-bg-seed {
  background: radial-gradient(circle at 12% 0%, #fff 0, #fff6fb 36%, transparent 56%),
              linear-gradient(160deg, #fff8fb 0%, #fff1f7 58%, #f4fbff 100%);
}

body.bond-bg-friend {
  background: radial-gradient(circle at 10% 0%, #fff 0, #fff1f7 34%, transparent 58%),
              radial-gradient(circle at 90% 10%, rgba(255,209,108,.28), transparent 34%),
              linear-gradient(160deg, #fff7fb 0%, #fff4e8 58%, #eefbff 100%);
}

body.bond-bg-partner {
  background: radial-gradient(circle at 8% 0%, #fff 0, #fff0f7 34%, transparent 58%),
              radial-gradient(circle at 86% 8%, rgba(218,200,255,.34), transparent 36%),
              linear-gradient(160deg, #fff5fa 0%, #f5f0ff 56%, #effcff 100%);
}

body.bond-bg-max {
  background: radial-gradient(circle at 10% 0%, #fff 0, #fff1f8 30%, transparent 58%),
              radial-gradient(circle at 90% 10%, rgba(255,190,0,.32), transparent 38%),
              radial-gradient(circle at 0% 90%, rgba(255,159,192,.28), transparent 34%),
              linear-gradient(160deg, #fff8fb 0%, #fff4dc 46%, #f3f0ff 100%);
}

.gift-card {
  background: linear-gradient(145deg, #fff, #fff7ed);
}

.gift-box {
  margin-top: 12px;
  border: 1px solid #ffe0b2;
  border-radius: 22px;
  background: #fff;
  padding: 13px;
  color: var(--ink);
  font-weight: 850;
  line-height: 1.7;
  white-space: pre-line;
}

.gift-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.gift-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 10px;
  opacity: .48;
  filter: grayscale(.75);
}

.gift-item.unlocked {
  opacity: 1;
  filter: none;
  border-color: #ffd9a8;
  background: linear-gradient(145deg, #fff, #fff8ee);
}

.gift-icon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--hot2);
  font-size: 23px;
}

.gift-item.unlocked .gift-icon {
  background: linear-gradient(135deg, var(--hot), var(--gold));
  color: #fff;
}

.gift-name {
  font-size: 13px;
  font-weight: 950;
}

.gift-cond {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
}

.growth-log-card {
  background: linear-gradient(145deg, #fff, #f8fbff);
}

.growth-log-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  max-height: 260px;
  overflow: auto;
}

.growth-log-item {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 11px;
}

.growth-log-item small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  margin-bottom: 5px;
}

.growth-log-item p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.65;
  white-space: pre-line;
}

.confetti-layer {
  position: fixed;
  inset: 0;
  z-index: 140;
  pointer-events: none;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -18px;
  width: 10px;
  height: 16px;
  border-radius: 4px;
  background: var(--hot);
  animation: confettiFall 1.8s ease-in forwards;
}

.confetti-piece:nth-child(3n) { background: var(--gold); }
.confetti-piece:nth-child(3n+1) { background: #a99aff; }

@keyframes confettiFall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(420deg); opacity: 0; }
}

.badge-popup.show {
  animation: badgeWiggle .52s ease;
}

@keyframes badgeWiggle {
  0% { transform: translateX(-50%) translateY(-10px) rotate(-2deg); }
  45% { transform: translateX(-50%) translateY(0) rotate(2deg); }
  100% { transform: translateX(-50%) translateY(0) rotate(0); }
}

.outfit-item.selected::after {
  content: "♡";
  display: block;
  margin-top: 5px;
  color: var(--hot);
  font-weight: 950;
}

.chappy.outfit-night::before {
  content: "🌙";
  position: absolute;
  right: 7px;
  top: 115px;
  z-index: 11;
  font-size: 19px;
}

.chappy.outfit-study::before {
  content: "📖";
  position: absolute;
  right: 7px;
  top: 116px;
  z-index: 11;
  font-size: 18px;
}

.chappy.outfit-partner::before {
  content: "🎀";
  position: absolute;
  right: 4px;
  top: 117px;
  z-index: 11;
  font-size: 20px;
}

.chappy.outfit-pro::before {
  content: "👑";
  position: absolute;
  left: 72px;
  top: -4px;
  z-index: 20;
  font-size: 24px;
}


/* Phase F-0.1 Final Setup */
.setup-banner {
  max-width: 448px;
  margin: 0 auto 14px;
  border: 1px solid #ffd1e3;
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,244,249,.96));
  box-shadow: var(--shadow);
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.setup-banner p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.final-version-box {
  background: linear-gradient(145deg, #fff, #fff5fa);
}

.final-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 12px;
}

.final-grid button {
  min-height: 64px;
  border-radius: 22px;
  text-align: left;
}

.data-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.data-summary-item {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 12px;
}

.data-summary-item span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.data-summary-item strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
}

.backup-status {
  margin: 10px 0 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 11px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.5;
}

.guide-list {
  display: grid;
  gap: 9px;
}

.guide-list div {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 12px;
}

.guide-list p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.55;
}

.final-checklist li {
  margin-bottom: 4px;
}

.guide-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  place-items: center;
  background: rgba(48, 40, 58, .42);
  padding: 18px;
}

.guide-modal.show {
  display: grid;
}

.guide-modal-card {
  width: min(410px, 100%);
  max-height: 88vh;
  overflow: auto;
  border: 1px solid #ffd1e3;
  border-radius: 30px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 16px;
  animation: levelPop .35s ease;
}

.guide-modal-card h2 {
  margin: 0;
  font-size: 17px;
}

.guide-modal-card #closeGuideBtn {
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 18px;
}

.guide-modal-body {
  display: grid;
  gap: 8px;
  margin: 13px 0;
}

.guide-modal-body p {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff8fb;
  padding: 11px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.62;
}


/* Phase F-0.2 v1.0 Ready */
.final-ready-banner {
  border-color: #ffd6a2;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,248,235,.96));
}

.quick-action-card {
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,246,251,.96));
}

.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.quick-action-grid button {
  min-height: 74px;
  border-radius: 22px;
  font-size: 24px;
  padding: 9px 4px;
  background: #fff;
}

.quick-action-grid span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.final-dashboard-card {
  background: linear-gradient(145deg, #fff, #f5fbff);
}

.ready-score-box {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  padding: 12px;
  margin-top: 10px;
}

.ready-score-number {
  width: 82px;
  height: 82px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--hot), var(--gold));
  font-size: 22px;
  font-weight: 950;
  box-shadow: var(--shadow);
}

.ready-score-box strong {
  display: block;
  font-size: 15px;
}

.ready-score-box p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.55;
}

.update-guide-card {
  background: linear-gradient(145deg, #fff, #fff8ef);
}

.update-steps {
  display: grid;
  gap: 9px;
}

.update-steps div {
  border: 1px solid #ffe1b5;
  border-radius: 20px;
  background: #fff;
  padding: 12px;
}

.update-steps p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  font-weight: 850;
}

.final-polish-card {
  background: linear-gradient(145deg, #fff, #f7fff8);
}

.final-check-grid {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.final-check-item {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 10px;
}

.final-check-item.done {
  border-color: #cfeecf;
  background: #fbfffb;
}

.final-check-mark {
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--hot2);
  font-weight: 950;
}

.final-check-item.done .final-check-mark {
  background: #dff7df;
  color: #3d8c4e;
}

.final-check-title {
  font-size: 13px;
  font-weight: 950;
}

.final-check-desc {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.final-check-status {
  color: var(--hot);
  font-size: 11px;
  font-weight: 950;
}

@media (max-width: 380px) {
  .quick-action-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* v1.0 Official Release polish */
.version-badge {
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,244,249,.92));
}

.title::after {
  content: " v1.5.2";
  font-size: 11px;
  color: var(--hot);
  background: var(--hot2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 7px;
  margin-left: 6px;
  vertical-align: middle;
}

.final-ready-banner {
  border-color: #ffc98f;
}

.final-dashboard-card,
.final-polish-card,
.update-guide-card {
  border-width: 1.5px;
}

.rc-note {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 12px;
  color: var(--muted);
  font-weight: 850;
  line-height: 1.6;
}


/* v1.0 Official Release final polish */
.title::after {
  content: " v1.5.2";
}

.final-ready-banner strong::after {
  content: " 正式版";
  display: inline-flex;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fff0f6;
  border: 1px solid #ffd1e3;
  color: #f36f9f;
  font-size: 11px;
}


/* v1.1 Home UI Refresh Edition */
:root {
  --chappy-pink-soft: #fff3f8;
  --chappy-pink-line: #ffd3e4;
  --chappy-pink-hot: #f05c99;
}

.setup-banner.final-ready-banner {
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,250,238,.98));
  border-color: #ffc98f;
}

.hero-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(145px, 42%);
  grid-template-areas:
    "badge badge"
    "speech chappy"
    "mini mini";
  align-items: end;
  column-gap: 8px;
  row-gap: 12px;
  min-height: 520px;
  padding: 18px 16px 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 34%, rgba(255,255,255,.92), transparent 26%),
    radial-gradient(circle at 54% 82%, rgba(255,255,255,.65), transparent 20%),
    linear-gradient(145deg, rgba(255,243,248,.98), rgba(255,250,238,.98));
}

.hero-card::before {
  content: "♡";
  position: absolute;
  right: 36px;
  top: 98px;
  color: rgba(240,92,153,.16);
  font-size: 78px;
  font-weight: 950;
  transform: rotate(-12deg);
}

.hero-card::after {
  content: "✦  ♡  ✿";
  position: absolute;
  right: 22px;
  bottom: 140px;
  color: rgba(240,92,153,.22);
  font-size: 30px;
  letter-spacing: 14px;
  pointer-events: none;
}

.version-badge {
  grid-area: badge;
  margin-bottom: 0;
  background: rgba(255,255,255,.86);
  color: #b83f78;
}

.speech {
  grid-area: speech;
  width: auto;
  min-width: 0;
  min-height: 230px;
  align-self: start;
  margin-top: 8px;
  padding: 19px 18px;
  border: 3px solid #ffc6dd;
  border-radius: 34px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 34px rgba(240,92,153,.13);
}

.speech::after {
  right: -18px;
  top: 112px;
  width: 34px;
  height: 34px;
  border-right: 3px solid #ffc6dd;
  border-bottom: 3px solid #ffc6dd;
}

.speaker {
  font-size: 13px;
  padding: 7px 14px;
}

.speech-text {
  font-size: 20px;
  line-height: 1.72;
  letter-spacing: .01em;
}

.chappy-standee-wrap {
  grid-area: chappy;
  position: relative;
  right: auto;
  top: auto;
  width: 100%;
  height: 378px;
  margin: 0 -12px -8px -36px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: floaty 4.2s ease-in-out infinite;
}

.chappy-standee-wrap::after {
  right: 38px;
  bottom: 12px;
  z-index: 9;
  background: rgba(255,255,255,.92);
  border-color: #ffc6dd;
  color: var(--chappy-pink-hot);
}

.chappy-standee {
  position: relative;
  z-index: 4;
  max-width: 120%;
  max-height: 388px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 18px 22px rgba(198,87,128,.22));
  transform-origin: bottom center;
  transition: transform .25s ease, filter .25s ease;
}

.chappy-standee-wrap:active .chappy-standee {
  transform: scale(1.035) rotate(-1deg);
}

.css-chappy-fallback {
  display: none;
}

.mini-grid {
  grid-area: mini;
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 8;
  margin-top: -2px;
}

.mini-card {
  min-height: 84px;
  border-radius: 24px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(240,92,153,.08);
}

.mini-card strong {
  font-size: 18px;
}

.quick-action-card {
  margin-top: 6px;
}

.bottom-nav {
  border-radius: 30px;
  border-color: #ffd3e4;
}

.nav-btn.active {
  background: linear-gradient(145deg, #fff0f6, #fff8fb);
}

@media (max-width: 390px) {
  .hero-card {
    grid-template-columns: minmax(0, 1fr) minmax(132px, 39%);
    min-height: 500px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .speech {
    min-height: 214px;
    padding: 16px 15px;
  }

  .speech-text {
    font-size: 18px;
    line-height: 1.68;
  }

  .chappy-standee-wrap {
    height: 356px;
    margin-left: -42px;
    margin-right: -18px;
  }

  .chappy-standee {
    max-height: 364px;
    max-width: 132%;
  }

  .mini-card {
    min-height: 78px;
    padding: 10px;
  }

  .mini-card strong {
    font-size: 16px;
  }
}

@media (max-width: 355px) {
  .hero-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "badge"
      "speech"
      "chappy"
      "mini";
    min-height: auto;
  }

  .speech::after {
    right: 46px;
    top: auto;
    bottom: -17px;
    transform: rotate(45deg);
    border-right: 0;
    border-bottom: 0;
    border-left: 3px solid #ffc6dd;
    border-top: 3px solid #ffc6dd;
  }

  .chappy-standee-wrap {
    width: 100%;
    height: 330px;
    margin: -18px 0 -8px;
  }

  .chappy-standee {
    max-height: 342px;
    max-width: 100%;
  }

  .mini-grid {
    grid-template-columns: 1fr;
  }
}


/* v1.1.2 standee layout fix */
.hero-card {
  min-height: 572px;
  row-gap: 14px;
}

.chappy-standee-wrap {
  align-self: end;
  width: 100%;
  height: 342px;
  margin: 6px 0 4px -16px;
  overflow: visible;
}

.chappy-standee-wrap::after {
  right: 22px;
  bottom: 16px;
}

.chappy-standee {
  max-width: 112%;
  max-height: 340px;
  object-position: center bottom;
}

.mini-grid {
  margin-top: 8px;
}

@media (max-width: 390px) {
  .hero-card {
    min-height: 600px;
    grid-template-columns: minmax(0, 1fr) minmax(126px, 38%);
  }

  .chappy-standee-wrap {
    height: 330px;
    margin: 12px 0 4px -10px;
  }

  .chappy-standee {
    max-width: 110%;
    max-height: 326px;
  }

  .mini-grid {
    margin-top: 14px;
  }
}

@media (max-width: 355px) {
  .hero-card {
    min-height: auto;
  }

  .chappy-standee-wrap {
    height: 314px;
    margin: -4px 0 4px;
  }

  .chappy-standee {
    max-width: 96%;
    max-height: 308px;
  }
}


/* v1.2 Shift Speed & Share */
.speed-share-panel {
  margin-top: 12px;
  border: 1px solid #ffd3e4;
  border-radius: 24px;
  background: linear-gradient(145deg, #fff, #fff6fb);
  padding: 12px;
}

.speed-share-title {
  font-size: 13px;
  font-weight: 950;
  color: var(--ink);
  margin-bottom: 9px;
}

.speed-share-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.speed-share-grid button {
  min-height: 48px;
  border-radius: 16px;
  padding: 8px 6px;
  font-size: 11px;
}

.sheet-mini-title {
  margin: 14px 0 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.share-textarea {
  width: 100%;
  min-height: 230px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.55;
  color: var(--ink);
  background: #fff;
  resize: vertical;
}

.share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 10px;
}

.bulk-week-list {
  display: grid;
  gap: 9px;
  margin: 10px 0 12px;
}

.bulk-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 9px;
  background: #fff;
}

.bulk-row strong {
  font-size: 12px;
}

.bulk-row select {
  padding: 10px;
  border-radius: 14px;
}

.quick-action-grid {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 390px) {
  .quick-action-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .speed-share-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .share-actions {
    grid-template-columns: 1fr;
  }
}


/* v1.3 Salary Boost */
.salary-boost-card {
  background: linear-gradient(145deg, #fff, #fff8ef);
}

.salary-grid-boost {
  grid-template-columns: 1fr 1fr;
}

.goal-box {
  background: linear-gradient(145deg, #fff, #fff4f8);
}

.salary-goal-bar {
  height: 18px;
  margin: 12px 0 8px;
  border-radius: 999px;
  border: 1px solid #ffd3e4;
  background: #f7e2eb;
  overflow: hidden;
}

.salary-goal-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff91b9, #ffd16c);
  transition: width .35s ease;
}

.salary-detail-card {
  background: linear-gradient(145deg, #fff, #f5fbff);
}

.salary-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 12px;
}

.salary-break-item {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 11px;
}

.salary-break-item span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.salary-break-item strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
}

.salary-chart {
  display: grid;
  gap: 10px;
}

.chart-row {
  display: grid;
  grid-template-columns: 56px 1fr 74px;
  gap: 8px;
  align-items: center;
}

.chart-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.chart-row div {
  height: 14px;
  border-radius: 999px;
  background: #f7e2eb;
  overflow: hidden;
}

.chart-row i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f36f9f, #ffd16c);
  transition: width .35s ease;
}

.chart-row strong {
  text-align: right;
  font-size: 12px;
  font-weight: 950;
}

.salary-settings-card {
  background: linear-gradient(145deg, #fff, #fff8ef);
}

.salary-guide-list {
  margin-top: 12px;
}

@media (max-width: 390px) {
  .salary-breakdown {
    grid-template-columns: 1fr;
  }

  .chart-row {
    grid-template-columns: 50px 1fr 68px;
  }
}


/* v1.4 Care Study & Report Support */
.care-study-card {
  background: linear-gradient(145deg, #fff, #f6fbff);
}

.care-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.care-tab {
  border-radius: 16px;
  padding: 10px 6px;
  font-size: 12px;
}

.care-tab.active {
  background: var(--hot2);
  color: var(--hot);
  border-color: #ffb9d1;
}

.care-panel {
  display: none;
}

.care-panel.active {
  display: block;
}

.care-list {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  max-height: 240px;
  overflow: auto;
}

.care-item {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 11px;
  text-align: left;
  box-shadow: none;
}

.care-item strong {
  display: block;
  font-size: 14px;
}

.care-item small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.care-detail {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 13px;
  color: var(--ink);
  font-weight: 850;
  line-height: 1.75;
  white-space: pre-line;
}

.quiz-box {
  border: 1px solid #ffd3e4;
  border-radius: 22px;
  background: #fff8fb;
  padding: 16px;
  min-height: 118px;
  color: var(--ink);
  font-weight: 950;
  line-height: 1.7;
  white-space: pre-line;
}

.quiz-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 9px;
  margin-top: 10px;
}

.quiz-actions button {
  min-height: 50px;
  border-radius: 18px;
}

.care-note-card {
  background: linear-gradient(145deg, #fff, #fff8ef);
}

@media (max-width: 390px) {
  .care-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* v1.4.1 Care Study Expansion */
.study-stats {
  border: 1px solid #dceeff;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff, #f6fbff);
  padding: 11px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.55;
  margin: 10px 0;
}

.term-category-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0 4px;
}

.term-cat {
  white-space: nowrap;
  padding: 8px 11px;
  font-size: 12px;
  border-radius: 999px;
}

.term-cat.active {
  background: var(--hot2);
  color: var(--hot);
  border-color: #ffb9d1;
}

.care-item small em {
  font-style: normal;
  color: var(--hot);
  font-weight: 950;
}


/* v1.4.2 Study Review */
.care-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 10px;
}

.favorite-terms-box {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 12px;
}

.favorite-terms-box > strong {
  display: block;
  font-size: 13px;
  margin-bottom: 8px;
}

.compact-care-list {
  max-height: 180px;
  margin: 0;
}

.weak-memo-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.weak-memo-actions button {
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 16px;
}

.secret-note-item.done {
  opacity: .72;
  background: #fbfffb;
  border-color: #cfeecf;
}

.secret-note-item.done p {
  text-decoration: line-through;
  color: var(--muted);
}

.review-badge {
  display: inline-flex;
  margin-left: 6px;
  border-radius: 999px;
  padding: 2px 6px;
  background: var(--hot2);
  color: var(--hot);
  font-size: 10px;
  font-weight: 950;
}

@media (max-width: 390px) {
  .care-detail-actions {
    grid-template-columns: 1fr;
  }
}


/* v1.5 Chappy Care Teacher */
.care-teacher-card {
  background:
    radial-gradient(circle at 88% 10%, rgba(255,209,108,.20), transparent 24%),
    linear-gradient(145deg, #fff, #fff7fb);
  position: relative;
  overflow: hidden;
}

.care-teacher-card::after {
  content: "先生";
  position: absolute;
  right: 18px;
  top: 18px;
  color: rgba(243,111,159,.12);
  font-size: 42px;
  font-weight: 950;
  transform: rotate(-8deg);
  pointer-events: none;
}

.teacher-status {
  margin-top: 12px;
  border: 1px solid #ffd3e4;
  border-radius: 20px;
  background: rgba(255,255,255,.88);
  padding: 12px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.65;
  white-space: pre-line;
}

.teacher-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 12px 0;
}

.teacher-menu-grid button {
  min-height: 76px;
  border-radius: 22px;
  font-size: 23px;
  background: #fff;
}

.teacher-menu-grid span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.teacher-output {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  padding: 14px;
  color: var(--ink);
  font-weight: 850;
  line-height: 1.75;
  white-space: pre-line;
}

.teacher-output strong {
  color: var(--hot);
}

.teacher-mini-badge {
  display: inline-flex;
  margin: 0 4px 4px 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--hot2);
  color: var(--hot);
  font-size: 11px;
  font-weight: 950;
}

@media (max-width: 390px) {
  .teacher-menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* v1.5.1 Chappy Care Teacher Plus */
.teacher-plus-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  border: 1px solid #ffd3e4;
  border-radius: 22px;
  background: rgba(255,255,255,.88);
  padding: 12px;
}

.teacher-plus-header strong {
  display: block;
  color: var(--hot);
  font-size: 15px;
}

.teacher-plus-header small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

#teacherMoodBadge {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--hot2);
  color: var(--hot);
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 950;
  max-width: 118px;
  text-align: center;
  line-height: 1.35;
}

.teacher-menu-grid-plus {
  grid-template-columns: repeat(3, 1fr);
}

.teacher-output-actions {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 9px;
  margin-top: 10px;
}

.teacher-note-box {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.9);
  padding: 12px;
}

.teacher-note-box .card-title-row {
  margin-bottom: 8px;
}

.teacher-note-box strong {
  color: var(--ink);
  font-size: 14px;
}

.teacher-note-item {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 10px;
}

.teacher-note-item small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 6px;
}

.teacher-note-item p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.6;
  white-space: pre-line;
}

.teacher-note-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.teacher-note-actions button {
  padding: 8px;
  border-radius: 15px;
  font-size: 11px;
}

.teacher-output.plus-highlight {
  box-shadow: 0 10px 32px rgba(243,111,159,.14);
  border-color: #ffc6dc;
}

@media (max-width: 390px) {
  .teacher-plus-header {
    align-items: flex-start;
    flex-direction: column;
  }
  #teacherMoodBadge {
    max-width: none;
  }
  .teacher-output-actions {
    grid-template-columns: 1fr;
  }
}


/* v1.5.2 Chappy Outfit Fix */
.chappy-standee {
  transition: transform .25s ease, filter .25s ease, opacity .2s ease;
}

.standee-outfit-label {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 10;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  max-width: 88%;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.86);
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 20px rgba(173,68,115,.16);
  color: var(--hot);
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
  pointer-events: none;
}

.chappy-standee-wrap.outfit-default .chappy-standee {
  filter: drop-shadow(0 18px 22px rgba(198,87,128,.22));
}

.chappy-standee-wrap.outfit-night .chappy-standee {
  filter: drop-shadow(0 18px 24px rgba(89,104,205,.30)) saturate(1.04);
}

.chappy-standee-wrap.outfit-study .chappy-standee {
  filter: drop-shadow(0 18px 24px rgba(78,160,92,.28)) saturate(1.05);
}

.chappy-standee-wrap.outfit-partner .chappy-standee {
  filter: drop-shadow(0 18px 24px rgba(160,105,214,.28)) saturate(1.06);
}

.chappy-standee-wrap.outfit-pro .chappy-standee {
  filter: drop-shadow(0 18px 26px rgba(255,171,31,.36)) saturate(1.08);
}

.chappy-standee-wrap:not(.outfit-default) .standee-outfit-label {
  display: inline-flex;
}

.chappy-standee-wrap.outfit-night .standee-outfit-label {
  color: #5967c9;
  border-color: #cfd7ff;
}

.chappy-standee-wrap.outfit-study .standee-outfit-label {
  color: #27935c;
  border-color: #bfeecd;
}

.chappy-standee-wrap.outfit-partner .standee-outfit-label {
  color: #986ce0;
  border-color: #e2d4ff;
}

.chappy-standee-wrap.outfit-pro .standee-outfit-label {
  color: #d38a00;
  border-color: #ffe3a2;
}

.chappy-standee-wrap.outfit-night::before,
.chappy-standee-wrap.outfit-study::before,
.chappy-standee-wrap.outfit-partner::before,
.chappy-standee-wrap.outfit-pro::before {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 10;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 10px 18px rgba(173,68,115,.14);
  font-size: 21px;
  pointer-events: none;
}

.chappy-standee-wrap.outfit-night::before { content: "🌙"; }
.chappy-standee-wrap.outfit-study::before { content: "📖"; }
.chappy-standee-wrap.outfit-partner::before { content: "🎀"; }
.chappy-standee-wrap.outfit-pro::before { content: "👑"; }


/* v1.5.4 Chappy Outfit Stable Standee Update */
.chappy-standee-wrap {
  overflow: visible;
  isolation: isolate;
}

.chappy-standee {
  display: block;
  width: 135%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center bottom;
  opacity: 1;
  transform: translateZ(0);
  transition: opacity .18s ease, transform .25s ease, filter .25s ease;
}

.chappy-standee.standee-switching {
  opacity: .22;
  transform: translateY(3px) scale(.985);
}

/* No decorative icons or labels are layered on top of the completed standees. */
.standee-outfit-label,
.chappy-standee-wrap.outfit-night::before,
.chappy-standee-wrap.outfit-study::before,
.chappy-standee-wrap.outfit-partner::before,
.chappy-standee-wrap.outfit-pro::before {
  display: none !important;
  content: none !important;
}

/* Each file already contains its finished outfit, so only a subtle neutral shadow remains. */
.chappy-standee-wrap.outfit-default .chappy-standee,
.chappy-standee-wrap.outfit-night .chappy-standee,
.chappy-standee-wrap.outfit-study .chappy-standee,
.chappy-standee-wrap.outfit-partner .chappy-standee,
.chappy-standee-wrap.outfit-pro .chappy-standee {
  filter: drop-shadow(0 16px 22px rgba(169, 78, 116, .18));
}

.outfit-preview-wrap {
  height: 104px;
  display: grid;
  place-items: center;
  margin: -2px 0 6px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,246,251,.9));
  overflow: hidden;
}

.outfit-preview {
  width: 135%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.outfit-preview-lock {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: var(--hot2);
  font-size: 22px;
}

.outfit-item.selected .outfit-preview-wrap {
  border: 1px solid #ffb7d0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.8);
}

@media (max-width: 390px) {
  .chappy-standee-wrap {
    height: 330px;
    margin: 12px 0 4px -10px;
  }
  .outfit-preview-wrap {
    height: 96px;
  }
}


/* v1.6 Shift Flex & Smart Entry */
.flex-template-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 11px;
}

.flex-template-entry strong {
  display: block;
  font-size: 13px;
}

.flex-template-entry small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.flex-template-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.flex-template-actions button {
  padding: 8px 9px;
  border-radius: 14px;
  font-size: 10px;
}

.flex-preview {
  margin: 12px 0;
  border: 1px solid #ffd3e4;
  border-radius: 20px;
  background: linear-gradient(145deg, #fff, #fff6fb);
  padding: 12px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.65;
  white-space: pre-line;
}

.flex-history {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 2px;
}

.flex-history button {
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 11px;
}

.flex-submit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 10px;
}

.flex-check-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 10px 0;
}

.flex-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.flex-check-label input {
  width: auto;
  margin: 0;
}

.bulk-row-flex {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px;
  background: #fff;
}

.bulk-row-flex-head {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 8px;
  align-items: center;
}

.bulk-time-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 7px;
  align-items: center;
}

.bulk-time-grid span {
  color: var(--muted);
  font-weight: 900;
}

.bulk-time-grid input {
  padding: 9px;
  border-radius: 13px;
}

.template-actions-flex {
  display: grid;
  grid-template-columns: 1.2fr 1fr .8fr;
  gap: 8px;
  margin-top: 10px;
}

.template-actions-flex button {
  border-radius: 16px;
  font-size: 11px;
  padding: 9px 8px;
}

@media (max-width: 390px) {
  .flex-template-entry {
    grid-template-columns: 1fr;
  }

  .flex-submit-grid {
    grid-template-columns: 1fr;
  }

  .bulk-row-flex-head {
    grid-template-columns: 1fr;
  }

  .template-actions-flex {
    grid-template-columns: 1fr 1fr;
  }

  .template-actions-flex button:last-child {
    grid-column: 1 / -1;
  }
}


/* v1.7 Shift Guard & Repeat Planner */
.calendar-day.has-conflict {
  border-color: #f0a93a;
  box-shadow: inset 0 0 0 2px rgba(240,169,58,.16);
  background: linear-gradient(145deg, #fff, #fff8e8);
}

.calendar-conflict-mark {
  position: absolute;
  right: 5px;
  top: 4px;
  font-size: 12px;
  line-height: 1;
}

.shift-tag.conflict-tag {
  outline: 2px solid rgba(240,169,58,.5);
  outline-offset: 1px;
}

.calendar-conflict-summary {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 11px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.55;
}

.calendar-conflict-summary.alert {
  border-color: #f2c06f;
  background: #fff9ec;
  color: #9a6415;
}

.conflict-warning-box {
  border: 1px solid #f2c06f;
  border-radius: 22px;
  background: #fff9ec;
  padding: 13px;
  color: var(--ink);
  font-weight: 850;
  line-height: 1.65;
  white-space: pre-line;
}

.conflict-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 250px;
  overflow: auto;
}

.conflict-item {
  border: 1px solid #f1d7a6;
  border-radius: 18px;
  background: #fff;
  padding: 10px;
}

.conflict-item strong {
  display: block;
  font-size: 13px;
}

.conflict-item small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.repeat-week-list {
  display: grid;
  gap: 9px;
  margin: 12px 0;
}

.repeat-row {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 10px;
}

.repeat-row-head {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 8px;
  align-items: center;
}

.repeat-row-head strong {
  font-size: 13px;
}

.repeat-time-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 7px;
  align-items: center;
  margin-top: 8px;
}

.repeat-time-grid input {
  padding: 9px;
  border-radius: 13px;
  font-size: 13px;
}

.repeat-preview {
  margin-top: 12px;
  border: 1px solid #dceeff;
  border-radius: 20px;
  background: #f7fbff;
  padding: 12px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.6;
  white-space: pre-line;
}

.repeat-submit-grid,
.conflict-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 10px;
}

.batch-preview-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  max-height: 210px;
  overflow: auto;
}

.batch-preview-item {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 9px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.45;
}

.flex-preview.conflict-preview {
  border-color: #f2c06f;
  background: #fff9ec;
}

@media (max-width: 390px) {
  .repeat-row-head {
    grid-template-columns: 44px 1fr;
  }
  .repeat-submit-grid,
  .conflict-action-grid {
    grid-template-columns: 1fr;
  }
}


/* v1.7.2 Safety & Stable BETA */
:root {
  --safe: #4e9f65;
  --safe-soft: #eefaf1;
  --warn: #d99322;
  --warn-soft: #fff8e8;
  --beta: #7353cf;
  --beta-soft: #f3efff;
}

.topbar-actions {
  display: flex;
  gap: 7px;
  align-items: center;
}

.topbar-actions .pill {
  padding: 9px 10px;
}

.privacy-pill {
  min-width: 92px;
}

.beta-banner {
  border-color: #cfc1ff;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,242,255,.98));
}

.channel-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.channel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .06em;
}

.channel-badge.beta {
  color: #fff;
  background: linear-gradient(135deg, #8e6ce7, #6543c2);
  box-shadow: 0 7px 14px rgba(101,67,194,.18);
}

.safety-center-card {
  background:
    radial-gradient(circle at 92% 8%, rgba(115,83,207,.12), transparent 28%),
    linear-gradient(145deg, #fff, #f8f6ff);
}

.safety-status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin: 12px 0;
}

.safety-status-item {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.9);
  padding: 11px;
}

.safety-status-item span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.safety-status-item strong {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
}

.safety-message {
  border: 1px solid #d8cbff;
  border-radius: 18px;
  background: var(--beta-soft);
  padding: 11px;
  color: #4a378e;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.6;
}

.safety-message.ok {
  border-color: #cce8d3;
  background: var(--safe-soft);
  color: #37784b;
}

.safety-message.warn {
  border-color: #f4d799;
  background: var(--warn-soft);
  color: #965f0d;
}

.safety-action-grid,
.privacy-action-grid,
.backup-action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-top: 10px;
}

.safety-action-grid button:first-child {
  grid-column: 1 / -1;
}

.safe-checklist {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.safe-checklist label,
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
  padding: 10px 12px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.safe-checklist input,
.switch-row input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  accent-color: var(--hot);
}

.privacy-settings-card {
  background: linear-gradient(145deg, #fff, #fff5fa);
}

.privacy-toggle-list {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.pin-settings-box {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  padding: 13px;
}

.pin-settings-box > strong {
  display: block;
  margin-bottom: 4px;
}

.privacy-warning {
  margin: 9px 0;
  border: 1px solid #f4d799;
  border-radius: 17px;
  background: #fff9e9;
  padding: 10px 11px;
  color: #8a5b14;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.55;
}

.care-warning {
  margin-bottom: 10px;
}

.backup-restore-card {
  background: linear-gradient(145deg, #fff, #f5fbff);
}

.file-pick-label {
  display: grid;
  place-items: center;
  min-height: 48px;
  margin-top: 12px;
  border: 1px dashed #9eb9d5;
  border-radius: 18px;
  background: #f8fcff;
  color: #3b6d99;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

#importFileInput {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.restore-preview {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.65;
  white-space: pre-line;
}

.restore-preview.valid {
  border-color: #cce8d3;
  background: #fbfffc;
  color: #39774c;
}

.restore-preview.warn {
  border-color: #f4d799;
  background: #fffaf0;
  color: #8a5b14;
}

.restore-preview.invalid {
  border-color: #ffc6ce;
  background: #fff5f6;
  color: #b23c4d;
}

button:disabled {
  opacity: .48;
  cursor: not-allowed;
  box-shadow: none;
}

.app-lock {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: none;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.92), transparent 42%),
    linear-gradient(145deg, rgba(255,238,246,.98), rgba(245,241,255,.98));
  backdrop-filter: blur(14px);
}

.app-lock.show {
  display: grid;
}

.lock-card {
  width: min(360px, 100%);
  border: 1px solid #ffd0e2;
  border-radius: 34px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow);
  padding: 24px 18px 18px;
  text-align: center;
}

.lock-icon {
  width: 78px;
  height: 78px;
  margin: 0 auto 10px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--hot), var(--gold));
  color: #fff;
  font-size: 36px;
}

.lock-card h2 {
  margin: 0 0 6px;
}

.lock-card > p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

#unlockPinInput {
  text-align: center;
  font-size: 24px;
  letter-spacing: .22em;
}

.lock-error {
  min-height: 20px;
  color: #cf3d54 !important;
  font-size: 12px !important;
}

/* Privacy mode: only activates the groups selected in settings */
body.privacy-mode.privacy-hide-salary #carePay,
body.privacy-mode.privacy-hide-salary #partPay,
body.privacy-mode.privacy-hide-salary #allowancePay,
body.privacy-mode.privacy-hide-salary #transportPay,
body.privacy-mode.privacy-hide-salary #totalPay,
body.privacy-mode.privacy-hide-salary #goalRemainPay,
body.privacy-mode.privacy-hide-salary #salaryBreakdown strong,
body.privacy-mode.privacy-hide-salary .salary-chart strong,
body.privacy-mode.privacy-hide-salary #monthlyGoalInput {
  color: transparent !important;
  text-shadow: 0 0 10px rgba(48,40,58,.68) !important;
  user-select: none;
}

body.privacy-mode.privacy-hide-secret #secretList .secret-note-item p,
body.privacy-mode.privacy-hide-secret #secretInput,
body.privacy-mode.privacy-hide-secret #diaryList .secret-note-item p,
body.privacy-mode.privacy-hide-secret #teacherNotesList .care-item small {
  filter: blur(7px);
  user-select: none;
  pointer-events: none;
}

body.privacy-mode .privacy-pill {
  background: #30283a;
  color: #fff;
  border-color: #30283a;
}

.beta-channel .version-badge::after {
  content: " BETA";
  margin-left: 5px;
  color: #fff;
  background: var(--beta);
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 9px;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  background: #f6f1ff;
  border-radius: 8px;
  padding: 2px 5px;
}

@media (max-width: 390px) {
  .topbar-actions {
    gap: 5px;
  }

  .topbar-actions .pill {
    padding: 8px 8px;
    font-size: 10px;
  }

  .privacy-pill {
    min-width: 76px;
  }

  .safety-status-grid,
  .safety-action-grid,
  .privacy-action-grid,
  .backup-action-grid {
    grid-template-columns: 1fr;
  }

  .safety-action-grid button:first-child {
    grid-column: auto;
  }
}


/* v1.7.2 base channel overrides */
body.app-locked { overflow: hidden; }


/* v1.7.2 Safety & Stable official channel */
:root {
  --stable: #398a58;
  --stable-soft: #edf9f1;
}

.stable-banner {
  border-color: #bfe6cb;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(239,250,243,.98));
}

.channel-badge.stable {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  background: var(--stable-soft);
  border: 1px solid #bfe6cb;
  color: var(--stable);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .03em;
}

.stable-channel .version-badge::after {
  content: " STABLE";
  margin-left: 5px;
  color: #fff;
  background: var(--stable);
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 9px;
}

/* Official channel overrides */
.title::after { content: " v1.7.2"; }
.stable-banner strong::after { content: none !important; display: none !important; }
.beta-channel .version-badge::after { content: none !important; display: none !important; }