/* =========================================================================
   Xiaomo (小抹) — Design Tokens v2 (CookieAnn / 玲娜贝儿 cottage)
   Import this file in any HTML artifact:
     <link rel="stylesheet" href="colors_and_type.css">
   ========================================================================= */

/* --- Webfonts -------------------------------------------------------------
   Chinese: 江城圆体 (5 weights, self-hosted from /fonts).
   Latin:   Quicksand (display + numerals) + Caveat (handwritten accents).
--------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Nunito:wght@400;500;600;700&family=Quicksand:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Jiangcheng Yuan';
  src: url('./fonts/JiangChengYuanTi-300W.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* =========================================================================
   Xiaomo 2.0 Pixel Pet — test-branch visual layer
   ========================================================================= */
.xm-main-pet {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

.xm-nav-pet-icon img,
.xm-pet-page img,
.xm-pet-home-card img {
  image-rendering: pixelated;
}

.xm-pet-home-card {
  border: 0;
  width: 100%;
  padding: 0;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  border-radius: 22px;
  background: #fff6d8;
  box-shadow:
    0 8px 24px rgba(147, 92, 39, 0.20),
    inset 0 0 0 2px rgba(255,255,255,0.55),
    inset 0 0 0 4px rgba(111, 72, 42, 0.12);
}

.xm-pet-home-scene {
  height: 190px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #ffe9a8 0 42%, #a9d378 42% 68%, #75af58 68% 100%);
  image-rendering: pixelated;
}

.xm-pet-home-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.13;
  background-image:
    linear-gradient(rgba(74,42,26,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,42,26,0.16) 1px, transparent 1px);
  background-size: 8px 8px;
  mix-blend-mode: multiply;
}

.xm-pixel-cloud {
  position: absolute;
  width: 38px;
  height: 14px;
  background: #fff9df;
  box-shadow:
    10px -8px 0 #fff9df,
    22px -4px 0 #fff9df,
    34px 0 0 #fff9df;
}
.xm-pixel-cloud-a { top: 28px; left: 12%; }
.xm-pixel-cloud-b { top: 46px; right: 18%; transform: scale(0.75); opacity: 0.8; }

.xm-pixel-tree,
.xm-pet-tree {
  position: absolute;
  width: 42px;
  height: 64px;
  background:
    linear-gradient(90deg, transparent 0 16px, #7b4d2c 16px 26px, transparent 26px),
    linear-gradient(180deg, #4f8b48 0 18px, #3f7a3f 18px 38px, transparent 38px);
  box-shadow:
    -16px 14px 0 #5a9a50,
    16px 18px 0 #5a9a50,
    0 8px 0 #6aaa58;
}
.xm-pixel-tree-a { left: 6%; bottom: 42px; }

.xm-pixel-cottage {
  position: absolute;
  right: 8%;
  bottom: 40px;
  width: 94px;
  height: 78px;
}
.xm-pixel-roof {
  position: absolute;
  left: 4px;
  top: 0;
  width: 86px;
  height: 34px;
  background: #8b4f32;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  box-shadow: 0 5px 0 #6b3e2a;
}
.xm-pixel-wall {
  position: absolute;
  left: 14px;
  top: 28px;
  width: 68px;
  height: 46px;
  background: #f0bd74;
  box-shadow: inset 0 0 0 4px #d99a56;
}
.xm-pixel-window {
  position: absolute;
  left: 24px;
  top: 38px;
  width: 16px;
  height: 16px;
  background: #ffe9a8;
  box-shadow: inset 0 0 0 3px #6b3e2a, 0 0 12px rgba(255,233,168,0.75);
}
.xm-pixel-door {
  position: absolute;
  right: 22px;
  bottom: 4px;
  width: 18px;
  height: 28px;
  background: #7b4d2c;
  box-shadow: inset -4px 0 0 rgba(0,0,0,0.12);
}
.xm-pixel-fence,
.xm-pet-fence {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 46px;
  height: 18px;
  background:
    repeating-linear-gradient(90deg, transparent 0 20px, #fff1c4 20px 28px, transparent 28px 36px),
    linear-gradient(180deg, transparent 0 6px, #fff1c4 6px 12px, transparent 12px);
  filter: drop-shadow(0 3px 0 rgba(93, 59, 34, 0.15));
}
.xm-pixel-grass {
  position: absolute;
  inset: auto 0 0 0;
  height: 52px;
  background:
    repeating-linear-gradient(90deg, #6caf55 0 12px, #72b95a 12px 20px, #609b4c 20px 28px);
}
.xm-pixel-flower,
.xm-pet-mushroom {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #ffd0d0;
  box-shadow: 0 -6px 0 #fff6d8, 6px 0 0 #e47774, 0 6px 0 #e47774, -6px 0 0 #fff6d8;
}
.xm-pixel-flower-a { bottom: 34px; left: 22%; }
.xm-pixel-flower-b { bottom: 26px; right: 30%; transform: scale(0.8); }
.xm-pet-home-pet {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  z-index: 3;
}
.xm-pet-home-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 4px;
  background: #fffdf6;
}
.xm-pet-home-eyebrow {
  font: 700 10px "Quicksand", sans-serif;
  color: #a06a35;
  letter-spacing: 0.14em;
}
.xm-pet-home-title {
  margin-top: 3px;
  font: 700 20px "Jiangcheng Yuan", "PingFang SC", sans-serif;
  color: #4a2a1a;
  letter-spacing: 0.04em;
}
.xm-pet-home-chip {
  padding: 7px 12px;
  border-radius: 8px;
  background: #fbe3b0;
  color: #6b3e2a;
  font: 700 13px "Jiangcheng Yuan", sans-serif;
  box-shadow: inset 0 0 0 2px rgba(107,62,42,0.12);
}
.xm-pet-home-line {
  padding: 0 18px 16px;
  background: #fffdf6;
  color: #6b4a2e;
  font: 500 13px/1.6 "Jiangcheng Yuan", "PingFang SC", sans-serif;
}

.xm-pet-page {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  color: #4a2a1a;
  background: #fedf88;
  isolation: isolate;
}
.xm-pet-page-sleepy {
  background: #1f2f5d;
  color: #fff6d8;
}
.xm-pet-mobile-back {
  position: absolute;
  top: calc(20px + env(safe-area-inset-top));
  left: 20px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 12px;
  color: #4a2a1a;
  background: rgba(255, 227, 161, 0.96);
  font: 700 15px "Jiangcheng Yuan", "PingFang SC", sans-serif;
  box-shadow: inset 0 0 0 2px #7d452f, 0 4px 0 rgba(91,53,40,0.25);
  transition: transform 120ms ease;
}
.xm-pet-mobile-back:hover { transform: translateY(-1px); }
.xm-pet-mobile-back:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px #7d452f, 0 1px 0 rgba(91,53,40,0.25); }
.xm-pet-world {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fedf88 url('./assets/backgrounds/xiaomo-pet-bg-desktop.png') center center / cover no-repeat;
  background-size: cover;
  background-position: center;
}
.xm-pet-page-sleepy .xm-pet-world {
  filter: brightness(0.66) saturate(0.82) hue-rotate(4deg);
}
.xm-pet-sun,
.xm-pet-moon {
  position: absolute;
  top: 64px;
  right: 14%;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  background: #fff1a6;
  box-shadow: 0 0 0 8px rgba(255,241,166,0.22), 0 0 40px rgba(255,210,91,0.45);
}
.xm-pet-moon { display: none; background: #fff6d8; }
.xm-pet-page-sleepy .xm-pet-sun { display: none; }
.xm-pet-page-sleepy .xm-pet-moon { display: block; }
.xm-pet-cloud-one { top: 96px; left: 12%; }
.xm-pet-cloud-two { top: 142px; right: 24%; transform: scale(1.2); opacity: 0.72; }
.xm-pet-hills {
  position: absolute;
  left: -6%;
  right: -6%;
  height: 180px;
  border-radius: 50% 50% 0 0;
}
.xm-pet-hills-back { bottom: 34%; background: #82b95d; }
.xm-pet-hills-front { bottom: 25%; background: #6fac55; transform: translateX(16%); }
.xm-pet-tree-left { left: 8%; bottom: 33%; transform: scale(1.35); }
.xm-pet-tree-right { right: 11%; bottom: 38%; transform: scale(1.1); }
.xm-pet-house {
  position: absolute;
  left: 50%;
  bottom: 34%;
  width: 176px;
  height: 140px;
  transform: translateX(-50%);
}
.xm-pet-house-roof {
  position: absolute;
  left: 8px;
  top: 0;
  width: 160px;
  height: 60px;
  background: #7d452f;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  box-shadow: 0 8px 0 #5b3528;
}
.xm-pet-house-wall {
  position: absolute;
  left: 28px;
  top: 52px;
  width: 120px;
  height: 82px;
  background: #efbb76;
  box-shadow: inset 0 0 0 7px #ce8848;
}
.xm-pet-house-window {
  position: absolute;
  left: 42px;
  top: 76px;
  width: 28px;
  height: 26px;
  background: #9bd1e6;
  box-shadow: inset 0 0 0 5px #5b3528;
}
.xm-pet-house-door {
  position: absolute;
  right: 44px;
  bottom: 6px;
  width: 32px;
  height: 52px;
  background: #6d452d;
  box-shadow: inset -7px 0 0 rgba(0,0,0,0.16);
}
.xm-pet-house-light {
  position: absolute;
  left: 42px;
  top: 76px;
  width: 28px;
  height: 26px;
  background: #ffe88f;
  opacity: 0;
  box-shadow: 0 0 26px #ffe88f;
}
.xm-pet-page-sleepy .xm-pet-house-light { opacity: 1; }
.xm-pet-fence { bottom: 30%; height: 24px; }
.xm-pet-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background:
    repeating-linear-gradient(90deg, #67aa51 0 16px, #72b95a 16px 32px, #5d9c4c 32px 48px);
}
.xm-pet-path {
  position: absolute;
  left: 50%;
  bottom: -20px;
  width: 260px;
  height: 34%;
  transform: translateX(-50%);
  background: #d99a56;
  clip-path: polygon(44% 0, 56% 0, 84% 100%, 16% 100%);
  box-shadow: inset 14px 0 0 rgba(255,230,164,0.28), inset -14px 0 0 rgba(107,62,42,0.12);
}
.xm-pet-mushroom {
  width: 12px;
  height: 10px;
  background: #f6ead0;
  box-shadow: 0 -8px 0 #d96f61, 6px -8px 0 #d96f61, 3px -12px 0 #fff6d8;
}
.xm-pet-mushroom-a { left: 18%; bottom: 20%; }
.xm-pet-mushroom-b { right: 17%; bottom: 18%; transform: scale(0.82); }
.xm-pet-flower-field {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 9%;
  height: 52px;
  opacity: 0.75;
  background:
    radial-gradient(circle at 5% 45%, #ffd0d0 0 3px, transparent 4px),
    radial-gradient(circle at 16% 72%, #fff1a6 0 3px, transparent 4px),
    radial-gradient(circle at 78% 38%, #ffd0d0 0 3px, transparent 4px),
    radial-gradient(circle at 92% 68%, #fff1a6 0 3px, transparent 4px);
}

.xm-pet-topbar {
  position: relative;
  z-index: 4;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  box-sizing: border-box;
}
.xm-pet-back,
.xm-pet-actions button {
  border: 0;
  cursor: pointer;
  color: #4a2a1a;
  background: #ffe3a1;
  border-radius: 8px;
  font: 700 14px "Jiangcheng Yuan", "PingFang SC", sans-serif;
  box-shadow: inset 0 0 0 2px #7d452f, 0 4px 0 rgba(91,53,40,0.25);
}
.xm-pet-back { padding: 9px 14px; }
.xm-pet-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.xm-pet-title span {
  font: 800 26px "Jiangcheng Yuan", sans-serif;
  letter-spacing: 0.06em;
}
.xm-pet-title small {
  margin-top: 4px;
  font: 700 10px "Quicksand", sans-serif;
  letter-spacing: 0.16em;
  color: #7d452f;
}
.xm-pet-page-sleepy .xm-pet-title small { color: #ffe3a1; }
.xm-pet-mood-chip {
  min-width: 54px;
  text-align: center;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff6d8;
  color: #6b3e2a;
  font: 700 13px "Jiangcheng Yuan", sans-serif;
  box-shadow: inset 0 0 0 2px rgba(107,62,42,0.18);
}

.xm-pet-stage {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100svh;
  min-height: 680px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: clamp(10px, 3.6vh, 46px);
  box-sizing: border-box;
}
.xm-pet-bubble {
  position: absolute;
  top: clamp(24px, 6vh, 72px);
  left: 50%;
  max-width: min(520px, calc(100vw - 48px));
  transform: translateX(-50%);
  padding: 12px 16px;
  border-radius: 10px;
  color: #4a2a1a;
  background: #fffdf6;
  font: 700 15px/1.55 "Jiangcheng Yuan", "PingFang SC", sans-serif;
  box-shadow: inset 0 0 0 3px #7d452f, 0 6px 0 rgba(91,53,40,0.12);
  text-align: center;
}
.xm-pet-shadow {
  position: absolute;
  bottom: clamp(10px, 3.6vh, 46px);
  left: 50%;
  width: clamp(280px, 34vw, 520px);
  height: clamp(24px, 3vw, 42px);
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(58, 42, 30, 0.22);
  filter: blur(1px);
}
.xm-pet-sprite {
  width: var(--pet-size);
  height: var(--pet-size);
  position: relative;
  transform-origin: 50% 85%;
  animation: xm-pet-idle 2.8s ease-in-out infinite;
}
.xm-pet-sprite img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 12px 0 rgba(91,53,40,0.16));
}
.xm-pet-sprite-compact img {
  filter: drop-shadow(0 10px 0 rgba(91,53,40,0.12));
}
.xm-pet-sprite-excited { animation: xm-pet-hop 720ms cubic-bezier(.34,1.56,.64,1) infinite alternate; }
.xm-pet-sprite-petting { animation: xm-pet-wiggle 760ms ease-in-out infinite alternate; }
.xm-pet-sprite-sleepy { animation: xm-pet-sleep 3.8s ease-in-out infinite; filter: saturate(0.82) brightness(0.88); }
.xm-pet-hit {
  position: absolute;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.xm-pet-hit-head { left: 18%; top: 2%; width: 64%; height: 53%; z-index: 2; }
.xm-pet-hit-body { left: 14%; top: 58%; width: 72%; height: 35%; z-index: 1; }
.xm-pet-snack {
  position: absolute;
  z-index: 4;
  left: calc(50% + clamp(130px, 16vw, 260px));
  bottom: clamp(44px, 8vh, 104px);
  width: clamp(120px, 12vw, 194px);
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transform-origin: 50% 80%;
  transition: transform 180ms cubic-bezier(0.34,1.56,0.64,1), filter 180ms;
}
.xm-pet-snack img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 0 rgba(91,53,40,0.16));
}
.xm-pet-snack:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.72);
}
.xm-pet-snack:hover {
  transform: translateY(-4px) rotate(2deg);
}
.xm-pet-snack:active {
  transform: translateY(1px) scale(0.96);
}
.xm-pixel-heart,
.xm-pixel-spark,
.xm-pet-burst span {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  image-rendering: pixelated;
}
.xm-pixel-heart {
  background: #e47774;
  box-shadow:
    4px 0 0 #e47774,
    -4px 4px 0 #e47774,
    0 4px 0 #ffb0a8,
    4px 4px 0 #e47774,
    8px 4px 0 #e47774,
    0 8px 0 #e47774,
    4px 8px 0 #e47774;
  animation: xm-pixel-float 1.2s ease-out infinite;
}
.xm-pixel-spark {
  background: #fff1a6;
  box-shadow: 0 -8px 0 #fff1a6, 0 8px 0 #fff1a6, -8px 0 0 #fff1a6, 8px 0 0 #fff1a6;
  animation: xm-pixel-float 1.1s ease-out infinite;
}
.xm-pet-burst {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.xm-pet-burst span {
  --angle: calc(var(--i) * 40deg);
  background: #e47774;
  transform: rotate(var(--angle)) translateY(-10px);
  animation: xm-pet-burst 900ms ease-out forwards;
}
.xm-pet-burst-spark span { background: #fff1a6; }
.xm-pet-burst-treat span { background: #d99a56; }

@keyframes xm-pet-idle {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}
@keyframes xm-pet-hop {
  from { transform: translateY(0) rotate(-3deg) scale(1); }
  to { transform: translateY(-18px) rotate(3deg) scale(1.03); }
}
@keyframes xm-pet-wiggle {
  from { transform: translateY(-4px) rotate(-4deg); }
  to { transform: translateY(-2px) rotate(4deg); }
}
@keyframes xm-pet-sleep {
  0%,100% { transform: translateY(2px) scale(1); }
  50% { transform: translateY(6px) scale(0.985); }
}
@keyframes xm-pixel-float {
  0% { transform: translateY(10px) scale(0.8); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translateY(-26px) scale(1); opacity: 0; }
}
@keyframes xm-pet-burst {
  0% { opacity: 1; transform: rotate(var(--angle)) translateY(-8px) scale(1); }
  100% { opacity: 0; transform: rotate(var(--angle)) translateY(-110px) scale(0.3); }
}
@keyframes xm-pet-snack-idle {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}

@media (max-width: 720px) {
  .xm-main-pet {
    padding: 0 !important;
  }
  .xm-pet-mobile-back {
    top: calc(14px + env(safe-area-inset-top));
    left: 14px;
    padding: 10px 14px;
  }
  .xm-pet-stage {
    min-height: 0;
    height: 100svh;
    align-items: flex-end;
    padding: 0 0 clamp(60px, 8vh, 82px);
    box-sizing: border-box;
  }
  .xm-pet-stage .xm-pet-sprite {
    width: min(88vw, 390px) !important;
    height: min(88vw, 390px) !important;
  }
  .xm-pet-bubble {
    top: calc(66px + env(safe-area-inset-top));
    font-size: 13px;
    padding: 10px 13px;
  }
  .xm-pet-shadow {
    bottom: calc(clamp(60px, 8vh, 82px) + env(safe-area-inset-bottom));
  }
  .xm-pet-world {
    background-image: url('./assets/backgrounds/xiaomo-pet-bg-mobile.png');
    background-position: center center;
  }
  .xm-pet-snack {
    left: auto;
    right: 16px;
    bottom: calc(34px + env(safe-area-inset-bottom));
    width: clamp(92px, 26vw, 118px);
  }
  .xm-pet-home-scene {
    height: 168px;
  }
}
@font-face {
  font-family: 'Jiangcheng Yuan';
  src: url('./fonts/JiangChengYuanTi-400W.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jiangcheng Yuan';
  src: url('./fonts/JiangChengYuanTi-500W.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jiangcheng Yuan';
  src: url('./fonts/JiangChengYuanTi-600W.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jiangcheng Yuan';
  src: url('./fonts/JiangChengYuanTi-700W.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* === Color =============================================================
     Butter-cream + caramel cottage palette.
     CookieAnn yellow as base, dachshund brown/caramel on top, ink-brown text,
     pink demoted to occasional accent only.
  ======================================================================= */

  /* Backgrounds (butter-cream) */
  --cream-50:   #FFFDF6;   /* surface tops */
  --cream-100:  #FFF8DD;   /* page background — buttery */
  --cream-200:  #FBEFC2;   /* secondary background, drawer */
  --cream-300:  #F4E29A;   /* divider / strong tint */

  /* Caramel (primary) */
  --caramel-100: #FFF1D4;
  --caramel-200: #FBE3B0;
  --caramel-300: #F0D6A6;
  --caramel-400: #E5BA75;   /* CookieAnn yellow */
  --caramel-500: #D9A256;   /* primary surface */
  --caramel-600: #B8852E;   /* deep caramel, hover */
  --caramel-700: #8B6212;

  /* Dachshund browns (display + ink) */
  --brown-300:  #C68A52;    /* light fur */
  --brown-500:  #8B4F32;    /* mid fur */
  --brown-700:  #6B3E2A;    /* dark fur */
  --brown-900:  #4A2A1A;    /* nose / ink / primary text */

  /* Ink-warm grays (text) — never pure black */
  --ink-900:    #4A2A1A;    /* primary text */
  --ink-700:    #6B4A2E;
  --ink-500:    #8B6B43;    /* secondary text */
  --ink-300:    #B5946D;    /* tertiary / placeholder */
  --ink-200:    #D6BD9A;
  --ink-100:    #ECDDC0;

  /* Sky blue (accent / link / "Cute Puppy" handwritten) */
  --sky-100:    #E6F1F8;
  --sky-200:    #C8DEEC;
  --sky-300:    #A6CADD;
  --sky-400:    #7FB6D6;
  --sky-500:    #5A99BD;
  --sky-700:    #2E6B8E;

  /* Mint (success / fulfilled) */
  --mint-100:   #E8F4DC;
  --mint-200:   #D2E9B5;
  --mint-300:   #B8DD90;
  --mint-500:   #7FB855;

  /* Rose (DEMOTED — bows, hearts, blush only) */
  --rose-100:   #FFEFE6;
  --rose-200:   #FFD9C9;
  --rose-300:   #FFB7C2;
  --rose-400:   #FF8DA0;
  --rose-500:   #E36F88;

  /* Lavender (small floral accents — like LinaBell's purple flower) */
  --lavender-300: #D9C5E8;
  --lavender-500: #A789C2;

  /* === Semantic surface / text =========================================== */
  --bg:                var(--cream-100);
  --bg-elevated:       var(--cream-50);
  --bg-sunken:         var(--cream-200);
  --bg-drawer:         var(--cream-200);

  --fg:                var(--ink-900);
  --fg-muted:          var(--ink-500);
  --fg-subtle:         var(--ink-300);
  --fg-on-caramel:     #FFFDF6;
  --fg-on-accent:      #FFFDF6;

  --border:            rgba(217, 162, 86, 0.32);
  --border-strong:     rgba(184, 133, 46, 0.45);
  --border-dashed:     var(--caramel-400);
  --divider:           var(--cream-300);

  --primary:           var(--caramel-500);
  --primary-hover:     var(--caramel-600);
  --primary-press:     var(--caramel-700);

  --accent:            var(--sky-400);
  --accent-hover:      var(--sky-500);
  --accent-press:      var(--sky-700);

  --success:           var(--mint-500);
  --info:              var(--sky-500);
  --warning:           #E89B3F;
  --danger:            var(--rose-500);

  /* === Typography ======================================================== */
  --font-cn-display:   'Jiangcheng Yuan', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  --font-cn-body:      'Jiangcheng Yuan', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  --font-en-display:   'Quicksand', 'Jiangcheng Yuan', system-ui, sans-serif;
  --font-en-body:      'Nunito', 'Jiangcheng Yuan', system-ui, sans-serif;
  --font-en-script:    'Caveat', 'Jiangcheng Yuan', cursive;
  --font-num:          'Quicksand', 'Nunito', system-ui, sans-serif;

  /* combined stacks (use these in components) */
  --font-display:      'Jiangcheng Yuan', 'Quicksand', 'PingFang SC', sans-serif;
  --font-body:         'Jiangcheng Yuan', 'Nunito', 'PingFang SC', sans-serif;

  /* Type scale */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-md:    16px;
  --fs-lg:    18px;
  --fs-xl:    22px;
  --fs-2xl:   28px;
  --fs-3xl:   36px;
  --fs-4xl:   48px;
  --fs-5xl:   64px;

  --lh-tight: 1.25;
  --lh-snug:  1.4;
  --lh-body:  1.7;
  --lh-loose: 1.9;

  --tracking-tight:  -0.005em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;

  /* Semantic type roles — Jiangcheng Yuan handles all weights */
  --type-display:   700 var(--fs-4xl)/var(--lh-tight) var(--font-display);
  --type-h1:        700 var(--fs-3xl)/var(--lh-tight) var(--font-display);
  --type-h2:        600 var(--fs-2xl)/var(--lh-snug)  var(--font-display);
  --type-h3:        600 var(--fs-xl)/var(--lh-snug)   var(--font-display);
  --type-h4:        500 var(--fs-lg)/var(--lh-snug)   var(--font-body);
  --type-body:      400 var(--fs-md)/var(--lh-body)   var(--font-body);
  --type-body-sm:   400 var(--fs-sm)/var(--lh-body)   var(--font-body);
  --type-caption:   500 var(--fs-xs)/var(--lh-snug)   var(--font-body);
  --type-button:    600 var(--fs-md)/1                var(--font-display);
  --type-num:       700 var(--fs-2xl)/1               var(--font-num);
  --type-script:    600 var(--fs-xl)/var(--lh-snug)   var(--font-en-script);

  /* === Spacing (4 px base) =============================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 80px;

  /* === Radii ============================================================= */
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;   /* inputs */
  --radius-xl:    20px;   /* cards */
  --radius-2xl:   24px;   /* buttons */
  --radius-3xl:   32px;
  --radius-pill:  999px;
  --radius-full:  9999px;

  /* === Shadows (caramel-tinted, never neutral grey) ====================== */
  --shadow-xs:    0 1px 2px  rgba(184, 133, 46, 0.18);
  --shadow-sm:    0 2px 8px  rgba(217, 162, 86, 0.20);
  --shadow-md:    0 4px 20px rgba(217, 162, 86, 0.24);
  --shadow-lg:    0 12px 40px rgba(184, 133, 46, 0.22);
  --shadow-xl:    0 24px 60px rgba(184, 133, 46, 0.26);
  --shadow-inset: inset 0 2px 6px rgba(217, 162, 86, 0.22);
  --shadow-ring:  inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  --shadow-focus: 0 0 0 4px rgba(127, 182, 214, 0.28);

  /* === Motion ============================================================ */
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --duration-fast:  120ms;
  --duration-base:  200ms;
  --duration-slow:  400ms;
  --duration-float: 7s;

  /* === Layout ============================================================ */
  --content-width:  760px;
  --gutter:         var(--space-5);
}

/* === Element defaults ===================================================== */
.xm-root,
body.xm {
  background: var(--bg);
  color: var(--fg);
  font: var(--type-body);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.xm-root h1, .xm h1 { font: var(--type-h1); margin: 0 0 var(--space-4); letter-spacing: var(--tracking-wide); color: var(--ink-900); }
.xm-root h2, .xm h2 { font: var(--type-h2); margin: 0 0 var(--space-3); letter-spacing: var(--tracking-wide); color: var(--ink-900); }
.xm-root h3, .xm h3 { font: var(--type-h3); margin: 0 0 var(--space-3); color: var(--ink-900); }
.xm-root h4, .xm h4 { font: var(--type-h4); margin: 0 0 var(--space-2); color: var(--ink-900); }
.xm-root p,  .xm p  { font: var(--type-body); margin: 0 0 var(--space-3); color: var(--ink-700); }
.xm-root small, .xm small { font: var(--type-caption); color: var(--fg-muted); }
.xm-root a, .xm a { color: var(--sky-500); text-decoration: none; border-bottom: 1px dashed var(--sky-300); }
.xm-root a:hover, .xm a:hover { color: var(--sky-700); border-bottom-color: var(--sky-500); }

/* Display utility classes */
.xm-display    { font: var(--type-display); letter-spacing: var(--tracking-wide); }
.xm-num        { font: var(--type-num); font-variant-numeric: tabular-nums; }
.xm-script     { font: var(--type-script); color: var(--brown-700); }
.xm-caption    { font: var(--type-caption); color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* Decorative float keyframe — used by background motifs */
@keyframes xm-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-6px) rotate(3deg); }
}
@keyframes xm-pulse-heart {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
@keyframes xm-spin-soft {
  to { transform: rotate(360deg); }
}

/* =========================================================================
   Mobile adaptation (≤ 720px)
   Everything below activates only on phone-sized viewports.
   Desktop remains byte-identical above this breakpoint.
   ========================================================================= */
@media (max-width: 720px) {

  /* --- Main container: shrink padding, clear bottom nav, full width ----- */
  .xm-main {
    padding: calc(10px + env(safe-area-inset-top)) 14px calc(82px + env(safe-area-inset-bottom)) 14px !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* iOS: 16px input font prevents focus-auto-zoom */
  input, textarea, select {
    font-size: 16px !important;
  }

  /* Mobile scrollbars are noise */
  *::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

  /* Modal: fit visible viewport (iOS URL bar safe), edge-to-edge, bottom-anchored
     so the action buttons at the bottom are always reachable. */
  .xm-modal-backdrop {
    padding: 8px !important;
    align-items: flex-end !important;
  }
  .xm-modal-card {
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    /* fallback for browsers without dvh; covered by dvh override below */
    max-height: 86vh !important;
    /* iOS Safari 15.4+: dvh accounts for URL bar so bottom of modal stays visible */
    max-height: calc(100dvh - 16px) !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
    border-radius: 24px 24px 16px 16px !important;
  }

  /* When any modal is open, hide bottom nav so it can't overlap modal actions.
     Bottom nav uses backdrop-filter which creates its own stacking context that
     can outrank zIndex in some browsers; safest to remove it from the layout. */
  body:has(.xm-modal-backdrop) .xm-bottomnav { display: none !important; }

  /* Section header titles scale down */
  h1 { font-size: 26px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 18px !important; }

  /* ---- Phase 2: page-level grids → single (or 2-up) column -------------- */

  /* HomePage */
  .xm-home-main-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .xm-home-hero { flex-direction: column !important; align-items: stretch !important; }
  .xm-home-hero > img,
  .xm-home-hero > div:first-child {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }
  .xm-home-anniv-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* Hero counter card — comfortable size, hero feel without being oversized */
  .xm-home-hero-card {
    padding: 28px 20px 26px !important;
  }
  .xm-home-hero-card h1 {
    font-size: 24px !important;
    margin: 4px 0 0 !important;
  }

  /* LiveCounter restacks: big day on top, hh/mm/ss row below */
  .xm-home-counter {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
    margin-top: 6px !important;
  }
  .xm-home-counter-num { font-size: 88px !important; }
  .xm-home-counter-label { font-size: 14px !important; margin-top: 6px !important; }
  .xm-home-counter-sep { display: none !important; }
  .xm-home-counter-cells {
    display: flex !important;
    gap: 24px !important;
    align-items: baseline !important;
    justify-content: center !important;
  }
  .xm-home-counter-cells > div > span:first-child { font-size: 28px !important; }

  /* AlbumPage */
  .xm-album-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .xm-album-place-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .xm-album-toolbar { flex-wrap: wrap !important; gap: 8px !important; }

  /* Album timeline — already left-aligned, just trim padding slightly */
  .xm-album-timeline { padding-left: 24px !important; }

  /* Story timeline: zigzag → single vertical rail at left */
  .xm-story-timeline {
    padding-left: 28px !important;
    padding-right: 0 !important;
  }
  .xm-story-timeline > .xm-timeline-rail {
    left: 12px !important;
    transform: none !important;
  }
  .xm-story-timeline .xm-timeline-item {
    justify-content: flex-start !important;
  }
  .xm-story-timeline .xm-timeline-dot {
    left: -16px !important;
    transform: none !important;
  }
  .xm-story-timeline .xm-timeline-card {
    width: 100% !important;
  }

  /* Anniversary / important-event row: stack title on top row, controls below */
  .xm-anniv-row { flex-wrap: wrap !important; }
  .xm-anniv-row > input:not([type="date"]) {
    flex: 1 1 100% !important;
    order: -1 !important;
    min-width: 0 !important;
  }
  .xm-anniv-row > input[type="date"] { flex: 1 !important; min-width: 0 !important; }

  /* PhotoDetail in modal: 2-col → stacked */
  .xm-photodetail-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* PhotoUploader draft row: thumbnail beside form → stacked */
  .xm-uploader-draft { flex-direction: column !important; }
  .xm-uploader-draft > img { width: 100% !important; height: 200px !important; }
  .xm-uploader-row { grid-template-columns: 1fr !important; }

  /* PromisesPage */
  .xm-promise-stats { grid-template-columns: 1fr !important; gap: 10px !important; }
  .xm-promise-pace { grid-template-columns: 1fr !important; }
  .xm-promise-grid { grid-template-columns: 1fr !important; }
  .xm-promise-tabs { flex-wrap: wrap !important; gap: 6px !important; }
  .xm-promise-date-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* StoriesPage */
  .xm-story-filter { flex-direction: column !important; align-items: stretch !important; }
  .xm-story-filter > * { flex: 1 1 100% !important; min-width: 0 !important; width: 100% !important; }

  /* Floating decorative motifs: fade further so they don't crowd the screen */
  .xm-floating { opacity: 0.10 !important; }
}

/* Pet page wins over the generic mobile main padding rules above. */
.xm-main-pet {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 720px) {
  .xm-main-pet {
    padding: 0 !important;
    max-width: none !important;
  }
}