/* ==========================================================
   私人厨房 · KITTY 风格主题
   必须在 style.css 之后加载
   设计原则：扁平 / 极简 / 干净
   —— 白脸黑眼、红蝴蝶结、粉色波点壁纸、大量留白
   ========================================================== */

:root {
  /* ---- 底色 ---- */
  --cream:      #FFF7FB;
  --cream-2:    #FFE8F2;
  --cream-3:    #FFD3E5;
  --card:       #FFFFFF;

  /* ---- 文字 ---- */
  --ink:        #3A2E36;
  --ink-2:      #8A6E7C;
  --ink-3:      #BFA3B1;

  /* ---- 主色：正红 + 玫红 ---- */
  --terra:      #E8386D;
  --terra-2:    #D62356;
  --terra-soft: #FFE3ED;

  /* ---- 辅助 ---- */
  --sage:       #35B99C;
  --sage-soft:  #DDF5F0;
  --gold:       #FFC61E;

  --line:       rgba(232, 56, 109, .16);

  /* 干净的柔和投影，不用硬偏移 */
  --shadow-sm:  0 2px 6px rgba(150, 60, 95, .07);
  --shadow:     0 6px 20px rgba(150, 60, 95, .10);
  --shadow-lg:  0 16px 44px rgba(150, 60, 95, .16);

  --kr-pink:    #FFD3E5;
  --kr-pink-2:  #FFB8D5;
  --kr-red:     #E4002B;
  --kr-red-2:   #E8386D;
  --kr-gold:    #FFC61E;
  --kr-ink:     #2B2B2B;

  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --sans:  "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

/* ==========================================================
   1. 背景：白点粉底波点壁纸（干净版）
   ========================================================== */
html { background: #FFD3E5; }

body {
  background-color: #FFD3E5;
  background-image:
    /* 顶部柔光，让上半部分透气 */
    radial-gradient(1400px 700px at 50% -14%, rgba(255, 255, 255, .92), transparent 62%),
    /* 白色大波点 */
    radial-gradient(circle at 50% 50%, #FFFFFF 8px, transparent 8.6px);
  background-size: auto, 78px 78px;
  background-position: 0 0, 0 0;
  background-attachment: fixed;
}

/* ==========================================================
   2. 顶部栏
   ========================================================== */
.topbar {
  background: rgba(255, 255, 255, .94);
  border-bottom: 0;
  box-shadow: 0 2px 12px rgba(150, 60, 95, .10);
  position: sticky;
}
.topbar::after {
  /* 白色荷叶边下沿 */
  content: "";
  position: absolute; left: 0; right: 0; bottom: -8px; height: 9px;
  background-image: radial-gradient(circle at 50% 0, rgba(255,255,255,.94) 8px, transparent 8.6px);
  background-size: 18px 9px;
  background-repeat: repeat-x;
  pointer-events: none;
}
.brand .mark {
  width: 46px; height: 46px; padding: 0; overflow: hidden;
  background: #fff;
  border-radius: 14px;
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(150, 60, 95, .14);
}
.brand .mark img { width: 41px; height: auto; }
.brand .mark > span { display: none; }
.brand .name { color: #33262E; letter-spacing: .01em; }
.brand .sub  { color: #C58CA6; letter-spacing: .18em; }

.icon-btn {
  background: #fff;
  border: 2px solid var(--kr-pink-2);
  box-shadow: var(--shadow-sm);
  color: var(--kr-red-2);
}
.icon-btn:hover { background: var(--cream-2); border-color: var(--kr-red-2); transform: translateY(-1px); }

/* ==========================================================
   3. 按钮
   ========================================================== */
.btn {
  background: var(--kr-red-2);
  color: #fff;
  border: 0;
  box-shadow: 0 4px 14px rgba(232, 56, 109, .30);
  font-weight: 700; letter-spacing: .04em;
}
.btn:hover { background: var(--terra-2); transform: translateY(-2px); box-shadow: 0 7px 20px rgba(232, 56, 109, .34); }
.btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(232, 56, 109, .3); }
.btn.ghost {
  background: #fff; color: var(--kr-red-2);
  border: 2px solid var(--kr-pink-2);
  box-shadow: var(--shadow-sm);
}
.btn.ghost:hover { background: var(--cream-2); border-color: var(--kr-red-2); }

/* ==========================================================
   4. 红色蝴蝶结（与吉祥物同款）
   ========================================================== */
.bow { position: relative; width: 56px; height: 42px; display: inline-block; }
.bow::before, .bow::after {
  content: ""; position: absolute; top: 6px; width: 28px; height: 30px;
  background: var(--kr-red);
  border: 2.5px solid #fff;
  box-shadow: 0 3px 10px rgba(228, 0, 43, .28);
}
.bow::before { left: 0; border-radius: 64% 36% 44% 56% / 58% 58% 42% 42%; transform: rotate(-15deg); }
.bow::after  { right: 0; border-radius: 36% 64% 56% 44% / 58% 58% 42% 42%; transform: rotate(15deg); }
.bow i {
  position: absolute; left: 50%; top: 52%; width: 15px; height: 15px;
  border-radius: 50%; background: var(--kr-red); border: 2.5px solid #fff;
  transform: translate(-50%, -50%); z-index: 2;
  box-shadow: 0 2px 6px rgba(228, 0, 43, .32);
}
.bow.sm { width: 38px; height: 29px; }
.bow.sm::before, .bow.sm::after { width: 19px; height: 20px; top: 4px; border-width: 2px; }
.bow.sm i { width: 11px; height: 11px; border-width: 2px; }

.title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.title-row .bow { flex: none; }

/* ==========================================================
   5. 封面页
   ========================================================== */
.hero-deco span { font-size: 26px; opacity: .55; }

.hero-mascot {
  display: block; margin: 0 auto 10px; width: min(300px, 72vw); height: auto;
  animation:
    riseMascot .8s cubic-bezier(.2,.75,.25,1) .05s both,
    kittyBob 3.6s ease-in-out 1s infinite;
}
@keyframes riseMascot {
  from { opacity: 0; transform: translateY(26px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes kittyBob {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-12px) rotate(1.2deg); }
}

.avatar-pair { display: none; }

.hero-title {
  color: #33262E;
  font-size: clamp(30px, 8.4vw, 60px);
  line-height: 1.26;
}
.hero-title em { color: var(--kr-red-2); }
.hero-title em::after {
  background: rgba(255, 184, 213, .85);
  height: .34em;
  bottom: .06em;
}
.hero-sub { color: #7A5C6B; }

.hero-meta {
  background: #fff;
  border: 2px solid var(--kr-pink-2);
  border-radius: 26px;
  box-shadow: var(--shadow);
}
.hero-meta div + div { border-left: 2px dotted var(--kr-pink-2); }
.hero-meta b { color: var(--kr-red-2); }
.hero-meta span { color: var(--ink-3); }
.hero-foot { color: #C58CA6; }

/* ==========================================================
   6. 菜单页
   ========================================================== */
.menu-head h1 { color: #33262E; }
.menu-head p { color: #7A5C6B; }

.cat {
  background: #fff;
  border: 2px solid var(--kr-pink-2);
  color: var(--ink-2);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}
.cat:hover { background: var(--cream-2); color: var(--kr-red-2); border-color: var(--kr-red-2); }
.cat.on {
  background: var(--kr-red-2);
  color: #fff;
  border-color: var(--kr-red-2);
  box-shadow: 0 4px 14px rgba(232, 56, 109, .30);
}
.cat.on .n { opacity: .75; }

.note-strip {
  background: #fff;
  border: 2px dashed var(--kr-pink-2);
  color: #7A5C6B;
}
.note-strip .ico { font-size: 19px; }

/* --- 菜品卡：干净白卡 + 粉色描边 --- */
.dish {
  border: 2px solid var(--kr-pink-2);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
}
.dish:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--kr-red-2);
}
.dish h3 { color: #33262E; }
.dish .art { border-radius: 22px 22px 0 0; }

/* 更干净的柔和渐变 */
.g1 { background: linear-gradient(160deg, #FFEAF3, #FFC6DE); }
.g2 { background: linear-gradient(160deg, #E4F7F3, #BCE9DF); }
.g3 { background: linear-gradient(160deg, #FFF6DE, #FFE3A8); }
.g4 { background: linear-gradient(160deg, #FFEAF3, #FFB8D5); }
.g5 { background: linear-gradient(160deg, #EAF4FF, #C7E1FB); }
.g6 { background: linear-gradient(160deg, #F7EEFF, #E0CDFA); }
.dish .art > span { filter: none; }

.dish .ribbon {
  background: var(--kr-red-2);
  color: #fff;
  border: 0;
  font-weight: 800; letter-spacing: .05em;
  box-shadow: 0 2px 6px rgba(232, 56, 109, .28);
}
.dish .fav { background: #fff; box-shadow: var(--shadow-sm); border: 1.5px solid var(--kr-pink); }
.dish .foot { border-top: 1.5px dashed var(--kr-pink-2); }
.dish .desc { color: var(--ink-2); }
.dish .meta { color: var(--ink-3); }
.hearts { color: var(--kr-red-2); }

.add-btn {
  width: 38px; height: 38px; font-size: 18px;
  background: var(--kr-red-2);
  color: #fff;
  border: 0;
  box-shadow: 0 3px 10px rgba(232, 56, 109, .30);
}
.add-btn:hover { transform: scale(1.12) rotate(90deg); background: var(--terra-2); }

/* ==========================================================
   7. 抽屉 / 表单
   ========================================================== */
.sheet-mask { background: rgba(58, 46, 54, .40); }
.sheet {
  border-top: 0;
  box-shadow: 0 -12px 44px rgba(150, 60, 95, .24);
}
.sheet .grab { background: var(--kr-pink-2); }
.sheet h2 { color: #33262E; }
.sheet .desc { color: var(--ink-2); }

.opt, .chip {
  background: #fff; color: var(--ink-2);
  border: 2px solid var(--kr-pink-2);
  font-weight: 600;
}
.opt:hover, .chip:hover { background: var(--cream-2); border-color: var(--kr-red-2); }
.opt.on, .chip.on {
  background: var(--kr-red-2);
  color: #fff; border-color: var(--kr-red-2);
  box-shadow: 0 3px 10px rgba(232, 56, 109, .26);
}

.qty { background: var(--cream-2); }
.qty button { background: #fff; border: 2px solid var(--kr-pink-2); box-shadow: none; }
.qty button:hover { background: var(--kr-red-2); border-color: var(--kr-red-2); color: #fff; }

.field textarea, .field input[type="text"] {
  background: #fff; border: 2px solid var(--kr-pink-2);
}
.field textarea:focus, .field input[type="text"]:focus {
  border-color: var(--kr-red-2);
  box-shadow: 0 0 0 4px rgba(232, 56, 109, .12);
}
.pill { background: var(--cream-2); color: var(--kr-red-2); border: 1.5px solid var(--kr-pink-2); }
.pill.sage { background: var(--sage-soft); color: #1E8C74; border-color: #B7E8DE; }
.pill.ghost { background: #fff; color: var(--ink-2); border-color: var(--kr-pink-2); }
.eyebrow { color: var(--kr-red-2); letter-spacing: .2em; }

/* ==========================================================
   8. 购物车条
   ========================================================== */
.cartbar {
  background: linear-gradient(to top, rgba(255, 211, 229, .99) 58%, rgba(255, 211, 229, 0));
}
.cartbar .inner {
  background: var(--kr-red-2);
  border: 0;
  box-shadow: 0 10px 30px rgba(232, 56, 109, .34);
}
.cartbar .badge {
  background: rgba(255, 255, 255, .22); color: #fff;
  box-shadow: none;
}
.cartbar .badge em { background: #fff; color: var(--kr-red-2); }
.cartbar .go { background: #fff; color: var(--kr-red-2); font-weight: 800; }
.cartbar .go:hover { transform: translateY(-1px); }

/* ==========================================================
   9. 确认点单
   ========================================================== */
.panel {
  background: #fff;
  border: 2px solid var(--kr-pink-2);
  border-radius: 26px;
  box-shadow: var(--shadow-sm);
}
.panel h3 { color: #33262E; }

.li { border-bottom: 1.5px dashed var(--kr-pink-2); }
.li .thumb { border: 2px solid #fff; box-shadow: var(--shadow-sm); }
.li .info b { color: #33262E; }
.li .info span { color: var(--ink-3); }
.sum-row.total { border-top: 1.5px dashed var(--kr-pink-2); }
.sum-row.total b { color: var(--kr-red-2); }
.trust { color: var(--ink-3); }

/* ==========================================================
   10. 点单成功
   ========================================================== */
.heart-big {
  width: auto; height: auto;
  padding: 18px 30px 24px;
  border-radius: 44px;
  display: grid; place-items: center;
  background: #fff;
  border: 2px solid var(--kr-pink-2);
  box-shadow: var(--shadow-lg);
  animation: beat 1.9s ease-in-out infinite;
}
.heart-big img { width: 200px; height: auto; display: block; }

.done h1 { color: #33262E; }
.done .lead { color: #7A5C6B; }

.ticket {
  background: #fff;
  border: 2px solid var(--kr-pink-2);
  border-radius: 26px;
  box-shadow: var(--shadow);
}
.ticket .top { background: linear-gradient(120deg, #FFE8F2, #FFD3E5); }
.ticket .top b { color: #B01F49; }
.ticket .perf {
  background: radial-gradient(circle at 9px 9px, #FFD3E5 9px, transparent 9.5px) repeat-x;
  background-size: 22px 18px;
}
.ticket .list .li { border-bottom: 1.5px dashed var(--kr-pink-2); }

/* ==========================================================
   11. 总览页
   ========================================================== */
.ov-head h1 { color: #33262E; }
.ov-head p { color: #7A5C6B; }
.ov-group > h2 { color: #B01F49; }
.ov-group > h2::after { background: none; border-top: 2px dotted var(--kr-pink-2); height: 0; }

.device {
  background: #FFD3E5;
  border: 3px solid #fff;
  box-shadow: var(--shadow-lg);
}
.device .notch { background: #FFD3E5; }
.desktop {
  background: #FFD3E5; border: 3px solid #fff;
  box-shadow: var(--shadow-lg);
}
.desktop .bar i { background: #FFB8D5; }
.desktop .bar i:nth-child(1) { background: var(--kr-red); }
.desktop .bar i:nth-child(2) { background: var(--kr-gold); }
.desktop .bar i:nth-child(3) { background: #35B99C; }
.frame .cap b { color: #33262E; }
.frame .cap span { color: var(--ink-3); }

.spec {
  background: #fff;
  border: 2px solid var(--kr-pink-2); border-radius: 22px;
  box-shadow: var(--shadow-sm);
}
.spec b { color: #33262E; }
.spec p { color: var(--ink-2); }
.spec code { background: var(--cream-2); color: var(--kr-red-2); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }

.footer { color: #C58CA6; }
.footer a { color: var(--kr-red-2); border-bottom-color: rgba(232, 56, 109, .3); }

/* 空状态 */
.empty .ic { font-size: 50px; opacity: .8; }

/* ==========================================================
   12. 响应式微调
   ========================================================== */
@media (max-width: 560px) {
  body {
    background-size: auto, 58px 58px;
  }
  .hero-mascot { width: min(230px, 62vw); }
  .topbar::after { background-size: 16px 8px; height: 8px; bottom: -7px; }
}

@media (min-width: 1024px) {
  .hero-mascot { width: 320px; }
}