/* =========================================================
 *  明天吃什么 · 视觉规范（小兔子主题）
 *  风格：Soft Pastel 柔和马卡龙（C 端治愈向）
 *  · 淡蓝 + 淡粉双主色   · 无粗黑描边，靠柔和投影分层
 *  · 大圆角 + 毛玻璃感   · 小兔子图案贯穿（封面/空状态/装饰）
 * ========================================================= */
:root{
  /* 双主色：淡蓝 / 淡粉 */
  --blue:#A6DBF7; --blue-l:#E4F4FF; --blue-d:#4E9FD6;
  --pink:#FFC2D8; --pink-l:#FFEEF5; --pink-d:#F4749E;
  /* 辅助淡色 */
  --mint:#A8E6CF; --lemon:#FFE9A8; --lilac:#D9CDF5;
  /* 中性（柔和紫灰，不用纯黑） */
  --ink:#5B4A63; --ink-2:#7A6C84; --muted:#9C8FA8; --card:#fff;
  --bg1:#F2FAFF; --bg2:#FFF4F9;
  /* 柔和投影（全部带模糊，无硬边） */
  --sh:0 10px 26px -10px rgba(120,145,190,.32), 0 2px 8px rgba(120,145,190,.10);
  --sh-sm:0 5px 14px -4px rgba(120,145,190,.26);
  --sh-lg:0 18px 40px -14px rgba(120,145,190,.40), 0 3px 10px rgba(120,145,190,.10);
  --sh-pink:0 8px 20px -8px rgba(244,116,158,.45);
  --r:22px; --r-sm:15px;
  /* 兼容旧命名（内联样式仍能生效） */
  --line:rgba(160,180,215,.35); --text:var(--ink);
  --brand:var(--pink-d); --brand-2:var(--pink); --brand-l:var(--pink-l);
  --brand-d:var(--pink-d); --accent:var(--blue-d); --danger:#F2789F;
  --yellow:var(--lemon); --green:#5FC49B; --cream:var(--bg1); --chip:#fff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:linear-gradient(180deg,var(--bg1) 0%,#FBF6FF 42%,var(--bg2) 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
  font-size:15px; line-height:1.55; padding-bottom:92px;
  -webkit-font-smoothing:antialiased;
}
/* 底色上的柔和小点纹理（替代原来的粗黑波点） */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(circle at 12px 12px, rgba(166,219,247,.22) 2px, transparent 2.2px),
    radial-gradient(circle at 30px 26px, rgba(255,194,216,.24) 1.8px, transparent 2px);
  background-size:150px 150px;
}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit;padding:0}
input,select,textarea{font-family:inherit;font-size:inherit}
img,svg{display:block}
.svgic,.ic{display:inline-block;vertical-align:-.18em;flex:none}
.bunny{display:block}
::selection{background:var(--pink);color:#fff}

/* ---------- 布局 ---------- */
.app{max-width:560px;margin:0 auto;min-height:100vh;position:relative}

/* ---------- 封面：淡蓝淡粉天空 + 玻璃碎片 + 漂浮小兔 ---------- */
header.top{
  position:relative;z-index:20;overflow:hidden;
  background:linear-gradient(165deg,#DDF1FF 0%,#EFE6FF 46%,#FFE4F0 100%);
  min-height:224px;border-radius:0 0 28px 28px;
  box-shadow:0 10px 26px -14px rgba(120,145,190,.42);
}
.cover-fx{position:absolute;inset:0;z-index:0;opacity:.85}
/* 文字层：自身不拦截指针，好让碎片响应触摸/鼠标 */
.cover-inner{position:relative;z-index:3;padding:14px 16px 13px;
  display:flex;flex-direction:column;min-height:224px;pointer-events:none}
.cover-inner button{pointer-events:auto}
/* 漂浮小兔 + 云朵装饰层 */
/* 上蓝下粉的柔和过渡，压在碎片之上、文字之下 */
header.top::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,0) 32%,rgba(255,205,228,.5) 100%)}
.cover-deco{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.cover-deco .floaty{position:absolute;display:block;opacity:.95;
  filter:drop-shadow(0 6px 10px rgba(120,145,190,.28));
  animation:floaty 8s ease-in-out infinite}
.cover-deco .f1{left:6%;top:36%}
.cover-deco .f2{right:8%;top:26%}
.cover-deco .f3{right:33%;bottom:24%}
.cover-deco .f4{left:28%;bottom:25%}
@keyframes floaty{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-14px) rotate(3deg)}
}
.cover-deco .cloud{position:absolute;opacity:.7;animation:drift 24s ease-in-out infinite alternate}
.cover-deco .c1{left:-8%;top:5%;width:118px}
.cover-deco .c2{right:-6%;top:24%;width:96px;animation-duration:31s}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(26px)}}
@media (prefers-reduced-motion: reduce){
  .cover-deco .floaty,.cover-deco .cloud{animation:none}
}

/* Aero Shards 容器（与 reactbits 原型同构） */
.aero-shards{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate}
.aero-shards__canvas{position:absolute;inset:0;display:block;width:100%;height:100%;
  opacity:0;transition:opacity 650ms cubic-bezier(.22,1,.36,1);touch-action:pan-y}
.aero-shards[data-ready='true'] .aero-shards__canvas{opacity:1}
.aero-shards--fallback{
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(255,194,216,.55) 0%, transparent 58%),
    radial-gradient(90% 80% at 16% 82%, rgba(166,219,247,.6) 0%, transparent 60%),
    linear-gradient(140deg,#E9F6FF 0%,#FFEAF4 100%);
}

.top-row{display:flex;align-items:center;gap:10px}
.logo{font-size:22px;font-weight:800;letter-spacing:.5px;line-height:1.2;color:#4A3C56;
  display:flex;align-items:center;gap:7px;text-shadow:0 2px 8px rgba(255,255,255,.9)}
.logo .bunny{filter:drop-shadow(0 3px 6px rgba(120,145,190,.25))}
.logo small{display:block;font-size:11px;font-weight:600;opacity:.8;letter-spacing:0;margin-top:1px}
.spacer{flex:1}
.icon-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;color:var(--ink-2);
  box-shadow:var(--sh-sm);backdrop-filter:blur(6px)}
.icon-btn:active{transform:translateY(1.5px);box-shadow:none}
.icon-btn.dark{background:#fff;color:var(--pink-d)}
.cover-foot{margin-top:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.loc{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
  background:rgba(255,255,255,.88);color:var(--ink);padding:5px 12px;border-radius:999px;
  box-shadow:var(--sh-sm);backdrop-filter:blur(6px)}
main{padding:14px 14px 24px}
.view{display:none;animation:fade .28s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 通用卡片 ---------- */
.card{background:var(--card);border-radius:var(--r);
  box-shadow:var(--sh);padding:15px;margin-bottom:14px}
.sec-title{display:flex;align-items:center;gap:7px;font-weight:800;font-size:16px;margin:20px 2px 10px;
  color:var(--ink)}
.sec-title .sub{font-weight:600;font-size:11.5px;color:var(--ink-2);background:var(--blue-l);
  border-radius:999px;padding:2px 9px}
.muted{color:var(--muted);font-size:12.5px;font-weight:600}
.small{font-size:11.5px;color:var(--muted);font-weight:600}

/* 贴纸：柔和粉胶囊 */
.sticker{display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(135deg,#FFD3E4,#FFE9F2);color:var(--pink-d);
  border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:800;
  box-shadow:var(--sh-pink)}

/* ---------- 按钮 / 标签 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 18px;
  border-radius:16px;color:#fff;font-weight:800;font-size:14.5px;
  background:linear-gradient(135deg,#FF9CC4,#FFBBD8);box-shadow:var(--sh-pink)}
.btn:active{transform:translateY(1.5px);box-shadow:var(--sh-sm)}
.btn.ghost{background:linear-gradient(135deg,#9FD8F7,#C6E9FF);color:#2C6A93;
  box-shadow:0 8px 20px -8px rgba(78,159,214,.5)}
.btn.line{background:#fff;color:var(--ink);box-shadow:var(--sh-sm)}
.btn.gray{background:#F3EFF8;color:var(--ink-2);box-shadow:none}
.btn.block{width:100%}
.chip{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:999px;
  background:#fff;color:var(--ink-2);font-size:12.5px;font-weight:700;
  box-shadow:var(--sh-sm);white-space:nowrap}
.chip:active{transform:translateY(1px)}
.chip.on{background:linear-gradient(135deg,#FF9CC4,#FFBBD8);color:#fff;box-shadow:var(--sh-pink)}
.chip.on.g{background:linear-gradient(135deg,#8FD3F5,#B4E4FF);color:#215F85;
  box-shadow:0 8px 20px -8px rgba(78,159,214,.5)}
.chip.dim{opacity:.45;background:#F6F2FA;box-shadow:none}
.chips{display:flex;gap:8px;overflow-x:auto;padding:3px 2px 8px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips.wrap{flex-wrap:wrap;overflow:visible}
.row{display:flex;align-items:center;gap:8px}
.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800;
  background:var(--pink-l);color:var(--pink-d);margin:0 5px 5px 0}
.tag.g{background:#E2F7EE;color:#3FA378}
.tag.y{background:#FFF4D6;color:#B4832F}
.tag.b{background:var(--blue-l);color:var(--blue-d)}
.tag.gray{background:#F3EFF8;color:var(--muted)}
.bar{height:10px;background:#EEF3FA;border-radius:999px;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#9FD8F7,#FFB3CE)}
.bar.g>i{background:linear-gradient(90deg,#A8E6CF,#7ED9B8)}
.bar.y>i{background:linear-gradient(90deg,#FFE1A8,#FFC9A0)}

/* 数据源说明条 */
.srcbar{display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#E4F4FF,#FFEEF5);
  border-radius:var(--r-sm);padding:11px 13px;
  box-shadow:var(--sh-sm);font-size:12.5px;font-weight:700;margin-bottom:12px;color:var(--ink-2)}
/* 弱提示条（数据缺失说明） */
.tip{display:flex;align-items:flex-start;gap:7px;background:#FFF6FA;border-radius:var(--r-sm);
  padding:10px 12px;font-size:12px;font-weight:600;
  color:var(--ink-2);line-height:1.55;margin:8px 0}

/* ---------- 决策卡 ---------- */
.decide{background:var(--card);border-radius:26px;box-shadow:var(--sh-lg);
  overflow:hidden;margin-bottom:14px;position:relative}
.decide .pic{height:200px;background:linear-gradient(160deg,#E9F6FF,#FFEEF6);position:relative}
.decide .favbtn{position:absolute;right:12px;top:12px;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-sm);color:var(--pink);backdrop-filter:blur(6px)}
.decide .favbtn.on{background:linear-gradient(135deg,#FF9CC4,#FFBBD8);color:#fff;
  box-shadow:var(--sh-pink)}
.decide .badge{position:absolute;left:12px;top:12px}
/* 卡片右下角探出头的小兔 */
.decide .peek{position:absolute;right:12px;bottom:10px;width:58px;height:58px;opacity:.95;
  filter:drop-shadow(0 4px 8px rgba(120,145,190,.22))}
.decide .body{padding:15px 15px 17px}
.dish-name{font-size:22px;font-weight:800;letter-spacing:.2px;line-height:1.3;color:#463852}
.shop-line{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:5px;
  display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:13px 0 10px}
.metrics .m{background:linear-gradient(160deg,#F5FBFF,#FFF6FA);border-radius:14px;padding:8px 2px;
  text-align:center}
.metrics .m b{display:block;font-size:16px;font-weight:800;line-height:1.25;color:var(--pink-d)}
.metrics .m span{font-size:10.5px;color:var(--muted);font-weight:700;display:flex;align-items:center;
  justify-content:center;gap:2px;margin-top:2px}
.reasons{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px}
.reason{font-size:11.5px;font-weight:700;background:var(--blue-l);color:var(--blue-d);
  padding:4px 10px;border-radius:999px}
.decide .acts{display:grid;grid-template-columns:1fr 1.5fr;gap:10px;margin-top:14px}
.roll{animation:pop .5s cubic-bezier(.22,1,.36,1)}
@keyframes pop{0%{transform:scale(.94) translateY(6px);opacity:.4}60%{transform:scale(1.015)}100%{transform:none;opacity:1}}

/* ---------- 筛选面板 ---------- */
.filters{display:none}
.filters.show{display:block}
.f-row{margin-bottom:13px}
.f-row>label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;color:var(--ink-2)}
input[type=range]{width:100%;accent-color:var(--pink-d);height:22px}

/* ---------- 推荐列表 ---------- */
.dish-item{display:flex;gap:11px;align-items:center;padding:11px 0;
  border-bottom:1px solid rgba(170,190,220,.22)}
.dish-item:last-child{border-bottom:none}
.dish-item .thumb{width:58px;height:58px;border-radius:18px;overflow:hidden;flex:none;
  background:var(--blue-l);box-shadow:var(--sh-sm)}
.dish-item .info{flex:1;min-width:0}
.dish-item .n{font-weight:800;font-size:14.5px;color:#463852;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m2{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:3px;
  display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.dish-item .pr{font-weight:800;color:var(--pink-d);font-size:16px}
.empty{text-align:center;color:var(--muted);font-weight:600;padding:30px 10px 34px;font-size:13.5px}
.empty .bunny{margin:0 auto 8px}
.empty .ic{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:50%;background:var(--blue-l);color:var(--blue-d);margin-bottom:10px}

/* ---------- 探索 ---------- */
.search{display:flex;align-items:center;gap:8px;background:#fff;border-radius:18px;
  padding:11px 14px;box-shadow:var(--sh-sm);margin-bottom:14px;color:var(--muted)}
.search input{flex:1;border:none;outline:none;background:none;font-size:14px;font-weight:600;color:var(--ink)}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.cat-cell{background:#fff;border-radius:18px;padding:11px 4px;text-align:center;
  box-shadow:var(--sh-sm);color:var(--ink-2)}
.cat-cell .ic{font-size:26px;display:flex;justify-content:center;color:var(--blue-d)}
.cat-cell .nm{font-size:11.5px;font-weight:700;margin-top:4px}
.cat-cell.on{background:linear-gradient(160deg,#C6E9FF,#E4F4FF);color:var(--blue-d);
  box-shadow:0 8px 20px -8px rgba(78,159,214,.5);transform:translateY(-2px)}
.cat-cell.on .ic{color:var(--pink-d)}
.shop-card{display:flex;gap:11px;background:#fff;border-radius:20px;padding:11px;
  box-shadow:var(--sh-sm);margin-bottom:12px}
.shop-card:active{transform:translateY(1.5px);box-shadow:none}
.shop-card .thumb{width:78px;height:78px;border-radius:16px;overflow:hidden;flex:none;
  background:var(--blue-l)}
.shop-card .info{flex:1;min-width:0}
.shop-card .n{font-weight:800;font-size:15px;display:flex;align-items:center;gap:5px;color:#463852}
.stars{color:#FFC24B;font-size:12.5px;display:inline-flex;align-items:center;gap:1px}

/* ---------- 档口详情抽屉 ---------- */
.sheet{position:fixed;inset:0;background:linear-gradient(180deg,#F2FAFF,#FFF4F9);z-index:80;
  overflow-y:auto;display:none;animation:up .3s ease}
.sheet.show{display:block}
@keyframes up{from{transform:translateY(30px);opacity:.5}to{transform:none;opacity:1}}
.sheet-head{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  z-index:5;padding:12px 14px;display:flex;align-items:center;gap:10px;
  box-shadow:0 6px 18px -12px rgba(120,145,190,.5)}
.sheet-head b{font-size:16px;font-weight:800;color:var(--ink)}
.gallery{display:flex;gap:10px;overflow-x:auto;padding:14px}
.gallery .g{width:212px;height:132px;border-radius:18px;overflow:hidden;flex:none;
  background:var(--blue-l);position:relative;box-shadow:var(--sh-sm)}
.gallery .g .cap{position:absolute;left:0;bottom:0;right:0;color:#fff;font-size:11px;font-weight:700;
  padding:16px 10px 6px;background:linear-gradient(transparent,rgba(91,74,99,.62));
  border-radius:0 0 18px 18px}
.sheet-body{padding:0 14px 44px}
.kv{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0}
.kv div{font-size:12px;font-weight:600;color:var(--muted);background:#fff;
  border-radius:12px;padding:6px 11px;box-shadow:var(--sh-sm)}
.kv b{color:var(--ink);font-size:13.5px;font-weight:800}
.menu-item{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid rgba(170,190,220,.22);align-items:center}
.menu-item .thumb{width:54px;height:54px;border-radius:16px;overflow:hidden;flex:none;
  background:var(--blue-l);box-shadow:var(--sh-sm)}
.review{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid rgba(170,190,220,.22)}
.rv-form{background:linear-gradient(160deg,#F2FAFF,#FFF6FA);border-radius:18px;padding:13px;margin-top:10px}
.rv-form textarea{border-radius:14px;border:1px solid rgba(170,190,220,.4);background:#fff;color:var(--ink)}

/* ---------- 我的 ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}
.stat-grid .s{background:linear-gradient(160deg,#F5FBFF,#FFF6FA);border-radius:16px;padding:11px 4px}
.stat-grid b{display:block;font-size:19px;font-weight:800;color:var(--pink-d)}
.stat-grid span{font-size:11px;color:var(--muted);font-weight:700}
.pf-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.pf-row .nm{width:70px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:4px}
.pf-row .bar{flex:1;height:11px}
.pf-row .pct{width:38px;text-align:right;font-size:12px;font-weight:800;color:var(--ink-2)}

/* ---------- 底部导航 ---------- */
.tabbar{position:fixed;bottom:0;left:0;right:0;max-width:560px;margin:0 auto;
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  display:grid;grid-template-columns:repeat(4,1fr);z-index:50;
  box-shadow:0 -8px 24px -14px rgba(120,145,190,.45);
  padding-bottom:env(safe-area-inset-bottom)}
.tabbar button{padding:8px 0 7px;font-size:11px;font-weight:700;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:2px}
.tabbar button .ic{font-size:22px;width:42px;height:32px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;transition:.2s}
.tabbar button.on{color:var(--pink-d)}
.tabbar button.on .ic{background:linear-gradient(135deg,#FFD3E4,#FFE9F2);color:var(--pink-d);
  box-shadow:var(--sh-pink)}

/* ---------- 弹窗 ---------- */
.mask{position:fixed;inset:0;background:rgba(91,74,99,.32);backdrop-filter:blur(2px);z-index:90;
  display:none;align-items:flex-end;justify-content:center}
.mask.show{display:flex}
.modal{background:#fff;width:100%;max-width:560px;border-radius:28px 28px 0 0;
  padding:20px 16px 26px;max-height:88vh;overflow-y:auto;animation:up .32s ease;
  box-shadow:0 -14px 40px -12px rgba(120,145,190,.5)}
.modal h3{margin:0 0 4px;font-size:18px;font-weight:800;color:#463852}
.q{background:linear-gradient(160deg,#F5FBFF,#FFF6FA);border-radius:18px;padding:13px;margin-top:12px}
.q .qt{font-weight:800;font-size:14px;margin-bottom:9px;display:flex;align-items:center;gap:6px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;color:#fff;
  background:rgba(91,74,99,.94);padding:11px 20px;border-radius:999px;font-size:13px;font-weight:700;
  z-index:120;box-shadow:0 10px 26px -10px rgba(91,74,99,.6);opacity:0;transition:.25s;
  pointer-events:none;max-width:88vw;text-align:center}
.toast.show{opacity:1;bottom:108px}