/* =========================================================
 * 明天吃什么？ —— 样式表
 * 设计语言（C 端 · 潮流）：
 *   主色   低饱和藕粉（Dusty Lotus Pink）
 *   背景   磨砂质感（颗粒噪点 + 藕粉柔光，替代原网点）
 *   描边   加粗纯黑线条（Bold Black Outline）
 *   投影   硬投影（位移无模糊，Neo-Brutalism）
 *   图标   面性（Solid / Filled）
 *   要素   低饱和度 · 贴纸感 · 磨砂玻璃 · 潮流圆角
 * ========================================================= */
:root{
  /* 主色：低饱和藕粉 */
  --brand:#E4B7B1; --brand-deep:#9A635E; --brand-soft:#F7E9E6; --brand-2:#D9A9A4;
  /* 辅助色：统一低饱和 */
  --green:#A9C4A7; --green-deep:#5C7A5A; --green-soft:#E7EFE5;
  --blue:#A7BCD4;  --blue-deep:#5B7391;  --blue-soft:#E7EDF5;
  --rose:#D0919B;  --rose-deep:#8E5560;  --rose-soft:#F5E3E7;
  --purple:#B4A6C8;--purple-deep:#6F6188;--purple-soft:#EDE8F4;
  --yellow:#E6D6A2;--yellow-deep:#8A7638;--yellow-soft:#F8F2DF;
  /* 中性：近黑用于文字与粗描边 */
  --ink:#1A1A1A; --ink-2:#3D3A38; --muted:#6E6965; --muted-2:#A09B96;
  --bg:#FCF7F6; --card:#FFFFFF;
  --line:#1A1A1A; --line-2:#1A1A1A;
  /* 粗黑线 + 硬投影 */
  --bw:2.5px; --bw-2:3px;
  --sh:4px 4px 0 var(--ink);
  --sh-sm:3px 3px 0 var(--ink);
  --sh-lg:6px 6px 0 var(--ink);
  --r:18px; --r-sm:12px;
  /* 磨砂：颗粒噪点底 + 磨砂玻璃面板 */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
  --glass:rgba(255,255,255,.72);
  --glass-pink:rgba(236,206,201,.72);
  --blur:blur(13px) saturate(1.15);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background-color:#E9D2CE;
  background-image:
    radial-gradient(120% 75% at 18% 0%, rgba(255,255,255,.55), transparent 62%),
    radial-gradient(95% 65% at 92% 100%, rgba(178,142,140,.42), transparent 64%),
    var(--grain);
  background-size:auto,auto,140px 140px;
  background-repeat:no-repeat,no-repeat,repeat;
  color:var(--ink); font-weight:600;
  font-family:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:inherit;}
input,select,textarea{font-family:inherit;font-size:15px;}
svg{display:block;}
/* 面性图标基类：纯填充、随文字色 */
.ic-svg{width:1em;height:1em;display:inline-block;fill:currentColor;vertical-align:-.12em;}

.app{max-width:480px;margin:0 auto;min-height:100vh;position:relative;
  background-color:#FBF6F5;
  background-image:
    radial-gradient(95% 52% at 50% -8%, rgba(228,183,177,.62), transparent 72%),
    radial-gradient(78% 46% at 6% 104%, rgba(180,166,200,.30), transparent 72%),
    var(--grain);
  background-size:auto,auto,140px 140px;
  background-repeat:no-repeat,no-repeat,repeat;
  border-left:var(--bw-2) solid var(--ink);border-right:var(--bw-2) solid var(--ink);
  display:flex;flex-direction:column;}

/* ---------- 顶栏 ---------- */
.topbar{position:sticky;top:0;z-index:20;background:var(--glass-pink);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-bottom:var(--bw-2) solid var(--ink);padding:13px 18px 11px;overflow:hidden;}
.topbar h1{margin:0;font-size:21px;font-weight:900;letter-spacing:.02em;color:var(--ink);
  position:relative;z-index:1;}
.topbar .sub{font-size:12px;font-weight:800;color:var(--ink-2);opacity:.85;margin-top:2px;
  position:relative;z-index:1;}
/* 顶栏角落的贴纸圆点（潮流装饰） */
.topbar::after{content:"";position:absolute;right:-20px;top:-22px;width:78px;height:78px;border-radius:50%;
  background:var(--yellow);border:var(--bw-2) solid var(--ink);}

/* ---------- 内容区 ---------- */
.view{flex:1;padding:16px 16px 100px;}

/* ---------- 底部导航 ---------- */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;
  display:grid;grid-template-columns:repeat(4,1fr);background:rgba(252,247,246,.78);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-top:var(--bw-2) solid var(--ink);
  z-index:30;padding-bottom:env(safe-area-inset-bottom);}
.tab{padding:8px 0 7px;text-align:center;color:var(--muted);font-size:11px;font-weight:900;transition:.12s;}
.tab .ic{display:grid;place-items:center;height:28px;margin-bottom:2px;color:var(--ink);}
.tab .ic svg{width:22px;height:22px;}
.tab.on{color:var(--ink);}
.tab.on .ic{width:46px;height:28px;margin:0 auto 2px;color:var(--ink);background:var(--brand);
  border:var(--bw) solid var(--ink);border-radius:11px;box-shadow:2px 2px 0 var(--ink);}
.tab:active{background:var(--brand-soft);}

/* ---------- 通用卡片 / 按钮 ---------- */
.card{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:var(--bw) solid var(--ink);border-radius:var(--r);
  padding:16px;box-shadow:var(--sh);margin-bottom:14px;}
.sec-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:900;color:var(--ink);
  letter-spacing:.02em;margin:20px 0 10px;}
.sec-title::before{content:"";width:11px;height:11px;flex:none;background:var(--brand);
  border:var(--bw) solid var(--ink);border-radius:4px;transform:rotate(45deg);}
.btn{display:block;width:100%;padding:13px;border-radius:14px;font-weight:900;font-size:15px;text-align:center;
  transition:transform .1s,box-shadow .1s;background:#fff;color:var(--ink);
  border:var(--bw) solid var(--ink);box-shadow:var(--sh-sm);}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}
.btn-primary{background:var(--brand);color:var(--ink);}
.btn-green{background:var(--green);color:var(--ink);}
.btn-red{background:var(--rose);color:var(--ink);}
.btn-ghost{background:#fff;color:var(--ink);}
.btn-sm{padding:9px;font-size:13.5px;border-radius:12px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.mt8{margin-top:8px;}.mt12{margin-top:12px;}.mt16{margin-top:16px;}
.mb8{margin-bottom:8px;}

/* ---------- 模式选择 ---------- */
.chips{display:flex;gap:9px;overflow-x:auto;padding:2px 0 6px;}
.chip{flex:none;padding:8px 15px;border-radius:999px;background:#fff;border:var(--bw) solid var(--ink);
  font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;transition:.1s;
  box-shadow:2px 2px 0 var(--ink);}
.chip:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink);}
.chip.on{background:var(--brand);color:var(--ink);}
.chip.on.g{background:var(--green);}
.chip svg{width:14px;height:14px;fill:currentColor;vertical-align:-.18em;}
.btn svg{vertical-align:-.12em;}

/* ---------- 稀有度配色（游戏化 C/B/A/S/SSS · 低饱和） ---------- */
.r-sss{--rc:#C9A34E;--rg:#EFE1BC;}
.r-s  {--rc:#C4787F;--rg:#EBD2D5;}
.r-a  {--rc:#9C8CBC;--rg:#DFD9EE;}
.r-b  {--rc:#86A6C0;--rg:#D8E5EF;}
.r-c  {--rc:#A5A19C;--rg:#E2DEDA;}

/* ---------- 抽卡机（磨砂玻璃 · 贴纸风） ---------- */
.gacha-box{position:relative;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:var(--bw-2) solid var(--ink);
  border-radius:22px;padding:20px 16px 16px;text-align:center;box-shadow:var(--sh-lg);margin-bottom:14px;
  overflow:hidden;}
.gacha-box.done{filter:grayscale(.55);opacity:.88;}
.gb-portal{position:relative;margin:2px auto 14px;width:124px;height:124px;border-radius:50%;
  display:grid;place-items:center;background:var(--brand);border:var(--bw-2) solid var(--ink);box-shadow:var(--sh);}
.gb-portal::after{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--yellow);
  border:var(--bw) solid var(--ink);}
.gb-orb{position:relative;z-index:1;color:var(--ink);animation:bob 2.2s ease-in-out infinite;}
.gb-orb svg{width:52px;height:52px;fill:currentColor;}
.gb-tip{font-size:12.5px;font-weight:800;color:var(--brand-deep);margin:-4px 8px 14px;min-height:18px;}
.btn-draw{display:block;width:100%;padding:16px;border-radius:16px;font-weight:900;font-size:17px;letter-spacing:.08em;
  color:var(--ink);border:var(--bw-2) solid var(--ink);position:relative;overflow:hidden;background:var(--brand);
  box-shadow:5px 5px 0 var(--ink);animation:drawPulse 1.6s ease-in-out infinite;}
.btn-draw:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}
.btn-draw::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-20deg);animation:sheen 2.6s ease-in-out infinite;}
.btn-draw.off{background:#DAD4CC;color:#8A8178;box-shadow:3px 3px 0 var(--ink);animation:none;cursor:not-allowed;}
.btn-draw.off::after{display:none;}
.pool-bar{margin-top:14px;background:#fff;border:var(--bw) solid var(--ink);border-radius:12px;padding:9px 12px;
  display:flex;justify-content:space-between;font-size:12.5px;font-weight:800;color:var(--muted);}
.pool-bar b{color:var(--ink);}
.pool-bar .quota b{color:var(--brand-deep);}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes drawPulse{0%,100%{box-shadow:5px 5px 0 var(--ink);}50%{box-shadow:8px 8px 0 var(--ink);}}
@keyframes sheen{0%{left:-60%;}55%,100%{left:130%;}}

/* 小稀有度徽章（清单 / 历史行） */
.rdot{display:inline-block;margin-left:6px;font-size:10px;font-weight:900;line-height:1;
  padding:2.5px 6px;border-radius:7px;color:var(--ink);background:var(--rc);vertical-align:middle;
  border:2px solid var(--ink);}

/* ---------- 结果卡 ---------- */
.result{background:#fff;border:var(--bw-2) solid var(--ink);border-radius:22px;overflow:hidden;
  box-shadow:var(--sh-lg);margin-bottom:14px;}
.r-img{height:158px;display:grid;place-items:center;font-size:62px;position:relative;
  background:linear-gradient(135deg,#F6E7E4,#EBD3CE);border-bottom:var(--bw-2) solid var(--ink);}
.r-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.r-img .cam{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:4px;
  background:#fff;color:var(--ink);border:var(--bw) solid var(--ink);border-radius:999px;padding:5px 10px;
  font-size:11.5px;font-weight:900;box-shadow:2px 2px 0 var(--ink);}
.r-img .cam svg{width:13px;height:13px;fill:currentColor;}
.r-img .rank{position:absolute;left:10px;top:10px;background:#fff;color:var(--brand-deep);
  border:var(--bw) solid var(--ink);border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight:900;
  box-shadow:2px 2px 0 var(--ink);}
.r-body{padding:16px;}
.r-shop{font-size:12.5px;font-weight:800;color:var(--muted);}
.r-name{font-size:23px;font-weight:900;margin:2px 0 8px;letter-spacing:-.01em;}
.tags{display:flex;flex-wrap:wrap;gap:7px;}
.tag{font-size:11.5px;font-weight:800;padding:4px 9px;border-radius:999px;border:2px solid var(--ink);}
.t-low{background:var(--green-soft);color:var(--green-deep);}
.t-mid{background:var(--brand-soft);color:var(--brand-deep);}
.t-high{background:var(--rose-soft);color:var(--rose-deep);}
.t-gry{background:#EFEDE9;color:#565049;}
.t-blu{background:var(--blue-soft);color:var(--blue-deep);}

/* 每日饮食看板 */
.daily-today{padding:14px 16px;}
.dt-verdict{font-size:13.5px;font-weight:800;color:var(--ink-2);line-height:1.5;}
.dt-empty{font-size:13px;color:var(--muted);line-height:1.6;}
.dm-row{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap;}
.dm-n{font-weight:900;font-size:14px;}
.dm-p{font-size:11.5px;color:var(--muted);font-weight:700;}
.daily{padding:6px 12px;}
.dy{padding:11px 4px;border-bottom:2px dashed #DCD5CB;}
.dy:last-child{border-bottom:none;}
.dy-hd{display:flex;justify-content:space-between;align-items:baseline;}
.dy-d{font-weight:900;font-size:14px;}
.dy-k{font-size:12.5px;color:var(--muted);font-weight:800;}
.dy-k.muted{color:var(--muted-2);font-weight:700;}
.dy-verdict{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.5;}
.dy-meals{margin-top:6px;}
.dy-meal{font-size:12px;color:var(--muted);margin-top:3px;}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px;padding-top:12px;border-top:2px dashed var(--ink);}
.metric{text-align:center;}
.metric .v{font-size:16px;font-weight:900;}
.metric .k{font-size:10.5px;color:var(--muted-2);}
.reasons{margin-top:12px;background:var(--brand-soft);border:var(--bw) solid var(--ink);border-radius:14px;padding:10px 12px;}
.reasons .h{font-size:12px;font-weight:900;color:var(--brand-deep);margin-bottom:4px;}
.reasons li{font-size:12.5px;color:var(--ink-2);margin-left:-8px;}
.sides{margin-top:10px;font-size:12.5px;color:var(--ink-2);}
.fb-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
.fb-done{text-align:center;font-size:13px;color:var(--green-deep);background:var(--green-soft);
  border:var(--bw) solid var(--ink);border-radius:12px;padding:11px;font-weight:900;}

/* 用餐回访卡片 */
.followup{border-color:var(--brand);box-shadow:var(--sh),0 0 0 3px var(--brand-soft);}
.fu-h{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:900;color:var(--brand-deep);margin-bottom:5px;}
.fu-h svg{width:16px;height:16px;fill:currentColor;flex:none;}
.fu-b{font-size:13.5px;color:var(--ink-2);font-weight:700;margin-bottom:11px;}

/* ---------- 清单 ---------- */
.shop{border:var(--bw) solid var(--ink);border-radius:var(--r);background:#fff;margin-bottom:12px;
  overflow:hidden;box-shadow:var(--sh);}
.shop-hd{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;cursor:pointer;}
.shop-hd .nm{font-size:15.5px;font-weight:900;}
.shop-hd .ct{font-size:11.5px;color:var(--muted);font-weight:700;}
.shop-bd{border-top:var(--bw) solid var(--ink);display:none;}
.shop.open .shop-bd{display:block;}
.shop-tip{display:flex;align-items:center;gap:6px;background:var(--brand-soft);padding:8px 14px;font-size:12px;
  color:var(--brand-deep);font-weight:700;border-bottom:2px solid var(--ink);}
.shop-tip svg{width:15px;height:15px;fill:currentColor;flex:none;}
/* 搜索框（面性图标 + 输入） */
.searchbox{display:flex;align-items:center;gap:8px;padding:10px 12px;}
.searchbox svg{width:18px;height:18px;color:var(--muted);flex:none;}
.searchbox input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:14px;font-weight:700;color:var(--ink);}
.dish{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:2px solid #EFEAE3;}
.dish:last-child{border-bottom:none;}
.dish .de{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:19px;flex:none;
  border:2px solid var(--ink);}
.dish .di{flex:1;min-width:0;}
.dish .dn{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dish .dm{font-size:11.5px;color:var(--muted);}
.dish.off{opacity:.45;}
.sw{width:46px;height:26px;border-radius:999px;background:#DED8D0;position:relative;transition:.2s;flex:none;
  border:var(--bw) solid var(--ink);}
.sw::after{content:"";position:absolute;top:1px;left:1px;width:15px;height:15px;border-radius:50%;
  background:#fff;border:2px solid var(--ink);transition:.2s;}
.sw.on{background:var(--green);}
.sw.on::after{left:21px;}
.del{color:var(--ink);font-size:16px;font-weight:900;padding:4px;flex:none;}

/* ---------- 统计 / 记录 ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px;}
.stat{background:#fff;border:var(--bw) solid var(--ink);border-radius:14px;padding:12px 6px;text-align:center;
  box-shadow:var(--sh-sm);}
.stat .v{font-size:19px;font-weight:900;color:var(--brand-deep);}
.stat .k{font-size:10.5px;color:var(--muted);font-weight:700;}
.rec{display:flex;align-items:center;gap:10px;background:#fff;border:var(--bw) solid var(--ink);
  border-radius:14px;padding:11px 13px;margin-bottom:9px;box-shadow:var(--sh-sm);}
.rec .re{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:17px;flex:none;
  background:var(--brand-soft);border:2px solid var(--ink);}
.rec .ri{flex:1;min-width:0;}
.rec .rn{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rec .rt{font-size:11px;color:var(--muted-2);}
.rec .rb{font-size:17px;flex:none;}

/* ---------- 弹窗 ---------- */
.mask{position:fixed;inset:0;background:rgba(26,22,22,.42);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  z-index:60;display:none;align-items:flex-end;justify-content:center;}
.mask.show{display:flex;}
.modal{width:100%;max-width:480px;background:#fff;border:var(--bw-2) solid var(--ink);
  border-radius:24px 24px 0 0;padding:20px 18px 26px;animation:up .22s ease;max-height:86vh;overflow-y:auto;}
.modal::before{content:"";display:block;width:52px;height:6px;border-radius:999px;background:var(--ink);
  margin:-4px auto 14px;opacity:.85;}
@keyframes up{from{transform:translateY(30px);opacity:.6;}to{transform:none;opacity:1;}}
.modal h3{margin:0 0 4px;font-size:19px;font-weight:900;}
.modal .md{font-size:13px;color:var(--muted);font-weight:700;margin-bottom:14px;}
.opt{display:inline-block;padding:8px 14px;border-radius:999px;background:#fff;border:var(--bw) solid var(--ink);
  font-size:13.5px;font-weight:800;margin:0 8px 8px 0;transition:.1s;box-shadow:2px 2px 0 var(--ink);}
.opt:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink);}
.opt.on{background:var(--brand);color:var(--ink);}
.opt.g.on{background:var(--green);}
.switch-row{display:flex;justify-content:space-between;align-items:center;background:var(--brand-soft);
  border:var(--bw) solid var(--ink);border-radius:14px;padding:11px 14px;margin:10px 0;font-size:14px;font-weight:800;}
.field{margin-bottom:11px;}
.field label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:4px;font-weight:800;}
.field input,.field select{width:100%;padding:10px 12px;border:var(--bw) solid var(--ink);border-radius:12px;
  background:#fff;outline:none;}
.field input:focus,.field select:focus{box-shadow:3px 3px 0 var(--brand);}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:9px;}

/* ---------- 其它 ---------- */
.empty{text-align:center;padding:44px 20px;color:var(--muted);}
.empty .e{display:grid;place-items:center;}
.empty .e svg{width:56px;height:56px;color:var(--brand-deep);fill:currentColor;}
.empty p{font-size:13.5px;margin-top:10px;font-weight:700;}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:var(--ink);color:#fff;
  border:2.5px solid #fff;box-shadow:4px 4px 0 var(--brand);padding:10px 18px;border-radius:999px;
  font-size:13.5px;font-weight:800;z-index:99;opacity:0;transition:.25s;pointer-events:none;white-space:nowrap;}
.toast.show{opacity:1;bottom:120px;}
.note{background:var(--blue-soft);border:var(--bw) solid var(--ink);border-radius:14px;padding:11px 13px;
  font-size:12.5px;color:var(--ink-2);font-weight:700;}
.mode-hint{margin-top:-2px;margin-bottom:2px;padding:0 2px;font-size:12px;line-height:1.55;
  color:var(--muted);font-weight:700;display:flex;gap:5px;align-items:flex-start;}
.mode-hint .ic-svg{width:14px;height:14px;flex:none;margin-top:2px;}
.mode-hint b{color:var(--ink);}
.kv{display:flex;justify-content:space-between;padding:11px 0;border-bottom:2px solid #EFEAE3;font-size:14px;font-weight:800;}
.kv:last-child{border-bottom:none;}
.kv .v{color:var(--muted);}
.badge{font-size:10.5px;font-weight:900;padding:2px 7px;border-radius:7px;margin-left:5px;border:2px solid var(--ink);}
.b-new{background:var(--purple-soft);color:var(--purple-deep);}

/* ---------- 一餐组合 ---------- */
.sides .s-chip{display:inline-block;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;
  margin:0 7px 7px 0;background:#fff;color:var(--muted);border:var(--bw) solid var(--ink);transition:.1s;}
.sides .s-chip:active{transform:translate(2px,2px);}
.sides .s-chip.on{background:var(--green);color:var(--ink);}
.combo{margin-top:12px;background:var(--brand-soft);border:var(--bw) solid var(--ink);border-radius:16px;padding:12px 13px;}
.combo-h{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:900;color:var(--brand-deep);margin-bottom:9px;}
.combo-h svg{width:15px;height:15px;fill:currentColor;}
.combo-total{margin-top:11px;padding-top:10px;border-top:2px dashed var(--ink);font-size:13px;font-weight:800;
  color:var(--ink-2);display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;}
.combo-total b{font-size:22px;font-weight:900;}
.combo-total.g b{color:var(--green-deep);}
.combo-total.o b{color:var(--brand-deep);}
.combo-total.r b{color:var(--rose-deep);}
.combo-total .goal{margin-left:auto;font-size:10.5px;color:var(--ink-2);background:#fff;border:2px solid var(--ink);
  border-radius:999px;padding:2px 8px;font-weight:800;}

/* ---------- 清单提示横幅 ---------- */
.banner{display:flex;gap:7px;align-items:flex-start;background:var(--yellow-soft);border:var(--bw) solid var(--ink);
  border-radius:14px;padding:10px 12px;font-size:12px;color:var(--yellow-deep);margin-top:10px;line-height:1.55;
  font-weight:700;box-shadow:var(--sh-sm);}
.banner svg{width:16px;height:16px;flex:none;fill:currentColor;margin-top:2px;}
.banner b{font-weight:900;}

/* ---------- 本周饮食小结 ---------- */
.weekly{padding:14px 16px;}
.wk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;margin-bottom:14px;}
.wk-stats b{display:block;font-size:21px;font-weight:900;color:var(--brand-deep);line-height:1.2;}
.wk-stats span{font-size:10.5px;color:var(--muted);font-weight:700;}
.wk-bars{display:flex;flex-direction:column;gap:7px;margin-bottom:12px;}
.wday{display:grid;grid-template-columns:46px 1fr 52px;align-items:center;gap:8px;}
.wl{font-size:11.5px;color:var(--muted);text-align:right;font-weight:700;}
.wbar{height:15px;background:#fff;border:2px solid var(--ink);border-radius:999px;overflow:hidden;}
.wf{height:100%;border-radius:999px;background:var(--green);transition:width .4s ease;}
.wf.o{background:var(--brand);}
.wf.r{background:var(--rose);}
.wk{font-size:12px;font-weight:800;color:var(--ink-2);text-align:right;}

/* ---------- 结果卡：稀有度描边与徽章 ---------- */
.result.r-sss,.result.r-s{border-color:var(--ink);box-shadow:0 0 0 3px var(--rc),var(--sh-lg);}
.result.r-a,.result.r-b{border-color:var(--ink);box-shadow:0 0 0 2px var(--rc),var(--sh);}
.result.r-c{border-color:var(--ink);}
.r-rar-badge{position:absolute;right:10px;top:10px;z-index:3;font-size:13px;font-weight:900;color:var(--ink);
  background:var(--rc);border:var(--bw) solid var(--ink);border-radius:999px;padding:3px 10px;box-shadow:2px 2px 0 var(--ink);}
.r-rar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 8px;}
.r-rar .rk{font-size:12px;font-weight:900;color:var(--ink);background:var(--rc);border:var(--bw) solid var(--ink);
  border-radius:999px;padding:3px 10px;}
.r-rar .rs{font-size:11.5px;color:var(--muted);font-weight:800;}

/* ---------- 食用加成词条（游戏食品卡） ---------- */
.affixes{margin-top:12px;background:#FDF7F5;border:var(--bw) solid var(--ink);border-radius:16px;padding:11px 12px;}
.affixes .ah{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:900;color:var(--brand-deep);
  letter-spacing:.02em;margin-bottom:8px;}
.affixes .ah svg{width:15px;height:15px;fill:currentColor;}
.affixes .ah .ac{color:var(--muted-2);font-weight:800;font-size:11px;}
.affix{display:flex;align-items:center;gap:9px;background:#fff;border:2px solid var(--ink);border-radius:12px;
  padding:7px 10px;margin-top:6px;font-size:13.5px;font-weight:800;color:var(--ink-2);}
.affix:first-of-type{margin-top:0;}
.affix .ai{font-size:17px;line-height:1;flex:none;}
.affix .at{flex:1;}
.affix.good{background:var(--green-soft);color:var(--green-deep);}
.affix.meh{background:#F1EDE7;color:#5F574F;}
.affix.bad{background:var(--rose-soft);color:var(--rose-deep);}

/* 抽卡揭晓浮层内的紧凑词条 */
.gc-affixes{margin:8px 12px 12px;background:#FDF7F5;padding:9px 10px;}
.gc-affixes .ah{margin-bottom:6px;}
.gc-affixes .affix{font-size:12.5px;padding:6px 8px;}
.gc-affixes .ai{font-size:15px;}

/* ---------- 抽卡揭晓动画（全屏 portal · 3D 翻卡演出） ----------
 * 时序：① 触发前 · 轻微暗角 + 镜头微微向内收缩 + 卡牌载体自下而上缓缓浮起
 *       ② 触发后 · 卡背缓慢 Y 轴旋转；背面边框微光由白渐变到稀有度色（稀有度预判伏笔）；
 *                 边缘微弱扫光划过
 *       ③ 收尾   · 翻面揭晓 → 轻微弹性回弹 → 定格 */
.gacha{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 30%,#8A6E76 0%,#4A3A42 45%,#241C20 100%);
  overflow:hidden;animation:fadeIn .25s ease;perspective:1200px;}
.gacha-bg{position:absolute;inset:0;
  background:
    radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,.5),transparent),
    radial-gradient(2px 2px at 70% 20%,rgba(255,255,255,.4),transparent),
    radial-gradient(1.5px 1.5px at 40% 70%,rgba(255,255,255,.35),transparent),
    radial-gradient(1.5px 1.5px at 85% 65%,rgba(255,255,255,.3),transparent);
  animation:twinkle 3s ease-in-out infinite;}
/* ① 轻微暗角 */
.gacha-veil{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .9s ease;
  background:radial-gradient(circle at 50% 46%,rgba(0,0,0,0) 30%,rgba(0,0,0,.26) 68%,rgba(0,0,0,.60) 100%);}
.gacha.enter .gacha-veil{opacity:1;}
/* ① 镜头微微向内收缩（视野收窄） */
.gacha-stage{position:relative;display:flex;align-items:center;justify-content:center;width:260px;min-height:340px;padding:10px 0;
  transform:scale(1);transition:transform 1.1s cubic-bezier(.2,.8,.2,1);}
.gacha.enter .gacha-stage{transform:scale(1.07);}
.gacha-ray{position:absolute;width:360px;height:360px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent,var(--rg),transparent 60%);opacity:0;animation:spinHue 4s linear infinite;}
.gacha.reveal .gacha-ray{opacity:.5;}
.gacha-ring{position:absolute;width:120px;height:120px;border-radius:50%;border:3px solid var(--rc);
  box-shadow:0 0 24px var(--rg),inset 0 0 24px var(--rg);opacity:0;transform:scale(.3);}
.gacha.reveal .gacha-ring{animation:ringPop .7s cubic-bezier(.2,1.3,.4,1) forwards;}
/* ① 卡牌载体：自下而上缓缓浮起（不是瞬间蹦出） */
.gacha-floater{position:relative;}
.gacha.enter .gacha-floater{animation:floatUp .52s cubic-bezier(.16,.84,.3,1);}
.gacha.settle .gacha-floater{animation:settlePop .42s cubic-bezier(.3,1.4,.5,1);}
/* ③ 3D 翻转容器（背面 → 正面） */
.gacha-flip{position:relative;width:232px;transform-style:preserve-3d;transform:rotateY(0deg);}
.gacha-face{width:232px;border-radius:22px;border:var(--bw-2) solid var(--ink);background:#fff;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;}
/* 卡背 */
.gacha-back{position:absolute;inset:0;display:grid;place-items:center;transform:rotateY(0deg);
  background:linear-gradient(150deg,#3B3037,#241C20 58%,#2F252A);}
/* ② 稀有度预判伏笔：背面边框微光由白 → 稀有度色（低稀有度偏白，高稀有度偏金/紫）
 * 渐变时长跟随 --spin：转得越久，微光揭示得越慢，稀有度越高越吊胃口 */
.gacha-back::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 26px rgba(255,255,255,.5),inset 0 0 30px rgba(255,255,255,.16);}
.gacha.spinning .gacha-back::after{animation:hintShift var(--spin,1.3s) ease forwards;}
/* ② 卡背缓慢 Y 轴旋转（时长 = --spin，由 JS 按稀有度写入） */
.gb-core{transform-style:preserve-3d;}
.gacha.spinning .gb-core{animation:backTurn var(--spin,1.3s) linear forwards;}
.gb-emblem{position:relative;width:92px;height:92px;display:grid;place-items:center;}
.gb-emblem svg{width:92px;height:92px;fill:rgba(255,255,255,.72);}
.gb-emblem::before{content:"";position:absolute;width:52px;height:52px;border:2.5px solid rgba(255,255,255,.5);border-radius:9px;}
/* ② 边缘微弱扫光划过（旋转窗口内均匀扫两遍，随 --spin 自动缩放） */
.gb-edge-sweep{position:absolute;top:0;left:-72%;width:52%;height:100%;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-16deg);}
.gacha.spinning .gb-edge-sweep{animation:edgeSweep calc(var(--spin,1.3s) / 2) ease-in-out 2;}
/* 卡面（正面，未翻开时背对观众） */
.gacha-front{position:relative;transform:rotateY(180deg);}
.gacha.reveal .gacha-flip{animation:flipIn .58s cubic-bezier(.28,.9,.3,1) forwards;}
/* quick（「换一个」）：不放演出，直接定格在正面 */
.gacha.quick .gacha-flip{transform:rotateY(180deg);animation:none;}
.gacha.quick .gacha-floater,.gacha.quick .gacha-stage{animation:none;transform:none;}
.gacha.quick .gacha-veil{opacity:0;}
.gacha.quick .gacha-cap,.gacha.quick .gacha-take{animation-delay:0s;}
.gc-shine{position:absolute;top:0;left:-70%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
  transform:skewX(-18deg);z-index:3;}
.gacha.reveal .gc-shine{animation:sheen 1.4s ease .35s 1;}
.gc-rar{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:4;
  font-size:26px;font-weight:900;letter-spacing:.05em;color:var(--rc);
  text-shadow:0 0 10px var(--rg),0 2px 4px rgba(0,0,0,.3);}
.gc-emo-wrap{height:150px;display:grid;place-items:center;position:relative;border-bottom:var(--bw-2) solid var(--ink);}
.gc-emo{font-size:78px;line-height:1;}
.gc-emo-wrap img.gc-emo{width:100%;height:100%;object-fit:cover;}
.gc-name{font-size:21px;font-weight:900;padding:8px 12px 0;text-align:center;color:var(--ink);}
.gc-shop{font-size:12.5px;font-weight:700;color:var(--muted);text-align:center;padding:2px 12px 4px;}
.gc-affix-wrap{margin-top:6px;text-align:left;}
.gacha-cap{margin-top:18px;font-size:15px;font-weight:900;letter-spacing:.18em;color:#fff;
  text-shadow:2px 2px 0 rgba(18,16,14,.85);opacity:0;}
.gacha.reveal .gacha-cap{animation:fadeUp .5s ease .5s forwards;}
.gacha-take{margin-top:14px;width:210px;padding:13px;border-radius:14px;font-weight:900;font-size:15px;
  color:var(--ink);background:var(--yellow);border:var(--bw-2) solid var(--ink);box-shadow:4px 4px 0 var(--ink);opacity:0;}
.gacha.reveal .gacha-take{animation:fadeUp .5s ease .6s forwards;}
.gacha-take:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}

/* 撒花（SSS / S） */
.confetti{position:absolute;top:-12px;width:9px;height:9px;opacity:.95;border-radius:2px;
  border:1.5px solid var(--ink);animation:fall 1.3s ease-in forwards;z-index:2;}

/* 卡牌载体自下而上浮起 */
@keyframes floatUp{0%{opacity:0;transform:translateY(130px) scale(.9);}55%{opacity:1;}100%{opacity:1;transform:translateY(0) scale(1);}}
/* 收尾弹性回弹 */
@keyframes settlePop{0%{transform:translateY(-7px) scale(1.025);}45%{transform:translateY(3px) scale(.988);}100%{transform:translateY(0) scale(1);}}
/* 卡背缓慢 Y 轴旋转 */
@keyframes backTurn{0%{transform:rotateY(0deg);}100%{transform:rotateY(360deg);}}
/* 背面边框微光：白 → 稀有度色（伏笔） */
@keyframes hintShift{
  0%{box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 26px rgba(255,255,255,.5),inset 0 0 30px rgba(255,255,255,.16);}
  50%{box-shadow:0 0 0 3px rgba(255,255,255,.7),0 0 30px var(--rg),inset 0 0 32px rgba(255,255,255,.14);}
  100%{box-shadow:0 0 0 3.5px var(--rc),0 0 42px var(--rg),inset 0 0 36px var(--rg);}}
/* 边缘微弱扫光划过 */
@keyframes edgeSweep{0%{left:-72%;opacity:0;}15%{opacity:.9;}85%{opacity:.9;}100%{left:132%;opacity:0;}}
/* 翻面：带轻微过冲弹性的 Y 轴翻转 */
@keyframes flipIn{0%{transform:rotateY(0deg);}58%{transform:rotateY(198deg);}76%{transform:rotateY(171deg);}89%{transform:rotateY(184deg);}100%{transform:rotateY(180deg);}}
@keyframes spinHue{to{transform:rotate(360deg);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes twinkle{0%,100%{opacity:.7;}50%{opacity:1;}}
@keyframes ringPop{0%{opacity:0;transform:scale(.3);}60%{opacity:1;transform:scale(1.25);}100%{opacity:0;transform:scale(1.7);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes fall{0%{opacity:1;transform:translateY(0) rotate(var(--rot,0));}100%{opacity:0;transform:translateY(120vh) rotate(calc(var(--rot,0) + 360deg));}}

/* ---------- 磨砂玻璃面板（统一背景质感） ----------
 * 清单门店卡 / 统计块 / 历史行 / 弹窗 / 候选池条 统一半透明 + 背景模糊，
 * 与磨砂颗粒底叠加出"磨砂玻璃"层次；粗黑描边与硬投影保持不变。 */
.shop,.stat,.rec,.modal,.pool-bar{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
}
/* 已确认用餐/回访条等实心色块保持不透明，避免文字发灰 */
.fb-done,.switch-row,.note,.banner,.combo,.affixes,.gc-affixes{backdrop-filter:none;}
