:root{
  /* GOT7 应援主题 */
  --green:#16b866; --green-d:#0e9a51; --green-l:#e8f8ef;
  --green-rgb:22,184,102; /* 用于 rgba 阴影/半透明背景，随成员主题切换 */
  --bg:#f1faf4; --card:#fff; --line:#e4eef0; --txt:#1f2a22; --sub:#7c8a82;
  --warn:#ff5339; /* 仅用于「删除」等危险操作 */
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans KR","Helvetica Neue",sans-serif;
  background:var(--bg); color:var(--txt); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
#app{display:flex; flex-direction:column; height:100%; max-width:560px; margin:0 auto; position:relative; background:var(--bg);}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
.hidden{display:none !important;}

/* ===== 店铺头部（GOT7 绿） ===== */
.shop{position:relative; padding-bottom:4px;}
.shop-cover{
  height:156px; position:relative; overflow:hidden;
  background:
    radial-gradient(120px 120px at 22% 18%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(90px 90px at 80% 90%, rgba(255,255,255,.12), transparent 70%),
    linear-gradient(135deg, var(--green) 0%, var(--green-d) 100%);
}
/* 斜向高光条，增加动感 */
.shop-cover::before{
  content:""; position:absolute; left:-60px; top:-80px;
  width:260px; height:260px; border-radius:50%;
  background:rgba(255,255,255,.07);
  transform:rotate(18deg);
}
.shop-cover::after{
  content:""; position:absolute; right:-40px; top:-50px;
  width:200px; height:200px; border-radius:50%;
  background:rgba(255,255,255,.10);
}
.cover-badge{
  position:absolute; top:14px; left:16px; z-index:4;
  font-size:11px; letter-spacing:1px; color:var(--green-d);
  background:rgba(255,255,255,.95); padding:5px 12px; border-radius:20px; font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.10);
  border:none; font-family:inherit; cursor:pointer; transition:transform .15s ease;
}
.cover-badge:active{transform:scale(.92);}
/* 散落装饰：阿尬塞小鸟 / 音符 / 星星 / GOT7 的 7 */
.cover-deco{
  position:absolute; z-index:1; opacity:.50; user-select:none; pointer-events:none;
  animation:floaty 5s ease-in-out infinite;
}
.deco-1{font-size:26px; left:46%; top:14px; animation-delay:.2s;}
.deco-2{font-size:20px; left:30%; top:70px; opacity:.38; animation-delay:1.1s;}
.deco-3{font-size:17px; right:64px; top:64px; opacity:.42; animation-delay:2.0s;}
.deco-4{
  font-size:40px; right:30px; bottom:-8px; opacity:.18; font-weight:800; color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;
}
@keyframes floaty{
  0%,100%{transform:translateY(0) rotate(-4deg);}
  50%{transform:translateY(-7px) rotate(4deg);}
}
.cover-kr{
  position:absolute; bottom:16px; left:18px; z-index:3;
  color:#fff; font-size:17px; font-weight:800; letter-spacing:-.3px;
  text-shadow:0 2px 6px rgba(0,0,0,.20);
}
.kr-bird{display:inline-block; animation:peck 1.8s ease-in-out infinite; transform-origin:70% 80%;}
@keyframes peck{
  0%,100%{transform:rotate(0);}
  50%{transform:rotate(-12deg) translateY(1px);}
}
.shop-info{
  display:flex; align-items:center;
  padding:12px 16px 10px; margin-top:4px;
  position:relative; z-index:3;
}
.shop-avatar{
  width:72px;height:72px;border-radius:20px;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(var(--green-rgb),.22); flex:none;
  border:3px solid #fff;
}
.shop-avatar svg{display:block;}
.shop-text{flex:1; margin-left:14px; min-width:0;}
.shop-name{font-size:23px;font-weight:800; color:var(--green-d); letter-spacing:-.3px;}
.shop-tagline{font-size:11px; color:#9bb3a8; margin-top:3px; font-weight:500; letter-spacing:.2px;}
.shop-sub{font-size:12px;color:var(--sub);margin-top:5px; display:flex; align-items:center; flex-wrap:wrap; gap:0;}
.shop-sub .dot{margin:0 4px; color:#c5d3cc;}
.open-dot{width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block; margin-right:4px; position:relative; top:-1px;}
.open-dot::after{content:""; position:absolute; left:0; top:0; width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 1.6s ease-out infinite;}
@keyframes pulse{0%{transform:scale(1);opacity:.7;}100%{transform:scale(2.6);opacity:0;}}
.shop-actions{
  position:absolute; right:14px; top:14px; z-index:5;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
}
.shop-me{
  flex:none; font-size:13px; color:var(--green-d); background:#fff;
  padding:7px 16px; border-radius:20px; font-weight:600;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
/* ===== 主体：左侧边栏 + 右侧内容 ===== */
.main-wrap{flex:1; overflow:hidden; display:flex;}
.sidebar{width:78px; flex:none; background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column;}
.content{flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden;}
.side-tabs{flex:none; display:flex; flex-direction:row; align-items:center; gap:22px; padding:0 14px; height:48px; border-bottom:1px solid var(--line); background:#fff;}
.side-tab{position:relative; font-size:15px; font-weight:500; color:#888; padding:12px 2px; cursor:pointer; background:transparent; display:inline-flex; align-items:center; gap:4px;}
.side-tab.on{color:var(--green); font-weight:700;}
.side-tab.on::after{content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--green); border-radius:2px 2px 0 0;}
.tab-count{font-size:11px; color:#fff; background:#bbb; padding:1px 6px; border-radius:9px; font-weight:500; line-height:1; display:inline-flex; align-items:center; justify-content:center; min-width:16px;}
.side-tab.on .tab-count{background:var(--green);}
.cats{
  flex:1; overflow-y:auto; display:flex; flex-direction:column; padding:8px 0;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.cats::-webkit-scrollbar{display:none;}
.cat{
  flex:none; font-size:13px; color:#555;
  padding:12px 6px; text-align:center; border-left:3px solid transparent;
}
.cat.on{background:var(--green-l); color:var(--green-d); font-weight:600; border-left-color:var(--green);}
.main-panel{flex:1; overflow-y:auto; background:var(--bg);}

/* ===== 菜品卡片 ===== */
.dishes{padding:12px; padding-bottom:80px;}
.dish{
  display:flex; background:var(--card); border-radius:14px; padding:12px; margin-bottom:12px;
  box-shadow:0 2px 10px rgba(var(--green-rgb),.05); position:relative;
}
.dish-img{
  width:96px;height:96px;border-radius:10px;flex:none;object-fit:cover;background:var(--green-l);
}
.dish-ph{
  width:96px;height:96px;border-radius:10px;flex:none;
  background:linear-gradient(135deg, var(--green-l), rgba(var(--green-rgb),.18));
  display:flex;align-items:center;justify-content:center;font-size:34px;color:var(--green);
}
/* 图片加载失败时的通用占位（onerror 回退） */
.dish-img.ph,.ph{background:linear-gradient(135deg, var(--green-l), rgba(var(--green-rgb),.18));display:flex;align-items:center;justify-content:center;font-size:34px;color:var(--green);}
.dish-body{flex:1; margin-left:12px; min-width:0; display:flex; flex-direction:column;}
.dish-name{font-size:16px;font-weight:600; display:flex; align-items:center; gap:6px;}
.dish-name .veg{font-size:11px; color:var(--green-d); background:var(--green-l); padding:1px 6px; border-radius:6px;}
.dish-intro{font-size:12px;color:#888;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.dish-tags{margin-top:6px; display:flex; flex-wrap:wrap; gap:6px;}
.tag{font-size:11px; color:var(--green-d); background:var(--green-l); padding:2px 8px; border-radius:6px;}
.dish-foot{margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between;}
.dish-foot-l{display:flex; flex-direction:column;}
.dish-cal{font-size:13px; color:var(--green); font-weight:600;}
.dish-cal small{font-size:10px; color:var(--sub); font-weight:400;}
.dish-sales{font-size:11px; color:var(--green); margin-top:3px; font-weight:600;}

/* ===== 数量步进器（同菜可点多份） ===== */
.stepper{display:flex; align-items:center; gap:10px;}
.stepper .s-dec,.stepper .s-inc{
  width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;
  font-size:18px;line-height:26px;text-align:center;flex:none;
}
.stepper .s-qty{min-width:20px;text-align:center;font-weight:700;color:var(--green-d);font-size:15px;}
/* 详情页大步进器 */
.detail-foot .stepper-c{margin:0 auto; justify-content:center;}
.detail-foot .s-dec,.detail-foot .s-inc{width:42px;height:42px;font-size:24px;line-height:40px;}
.detail-foot .s-qty{font-size:18px;min-width:30px;}
.dish-add{
  width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;
  font-size:20px;line-height:28px;text-align:center;flex:none;
}
.dish-add.on{background:var(--green-l); color:var(--green);}
.dish-check{
  position:absolute; top:10px; right:10px; background:var(--green); color:#fff;
  font-size:11px; padding:2px 8px; border-radius:10px;
}
.list-end{text-align:center;color:#b3c2b9;font-size:12px;padding:6px 0 30px;}

/* ===== 底部点菜栏 ===== */
.cart-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; align-items:center; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:#143528; color:#fff; gap:12px; max-width:560px; margin:0 auto;
}
.cart-left{flex:1; display:flex; align-items:center; gap:12px;}
.cart-icon{position:relative; font-size:26px;}
.cart-icon span{display:none;}
.cart-cal{font-size:16px; font-weight:700;}
.cart-tip{font-size:11px; color:#9fc7b3;}
.cart-submit{
  flex:none; background:var(--green); color:#fff; font-size:15px; font-weight:600;
  padding:11px 22px; border-radius:24px;
}

/* ===== 遮罩 / 弹层 ===== */
.overlay{
  position:fixed; inset:0; z-index:50; background:#fff;
  display:flex; flex-direction:column; animation:slide .22s ease;
  max-width:560px; margin:0 auto;
}
@keyframes slide{from{transform:translateY(18px);opacity:.4}to{transform:none;opacity:1}}
.ov-head{
  display:flex; align-items:center; padding:14px; border-bottom:1px solid var(--line); flex:none;
}
.ov-back{font-size:22px; color:#333; width:34px;}
.ov-title{flex:1; text-align:center; font-size:17px; font-weight:600;}
.ov-body{flex:1; overflow-y:auto; padding:14px;}
.ov-foot{flex:none; padding:12px 14px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line);}

/* ===== 详情页 ===== */
.detail-hero{position:relative; width:100%; height:230px; background:var(--green-l);}
.detail-hero img{width:100%;height:100%;object-fit:cover;}
.detail-hero .ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:64px;color:var(--green);background:linear-gradient(135deg, var(--green-l), rgba(var(--green-rgb),.18));
}
.detail-hero .back{position:absolute; top:14px; left:14px; width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.35); color:#fff; font-size:20px; display:flex;align-items:center;justify-content:center;}
.detail-hero .added{position:absolute; top:14px; right:14px; background:var(--green); color:#fff; font-size:12px; padding:4px 12px; border-radius:14px;}
.detail-title{font-size:22px; font-weight:700; margin:16px 0 4px; color:var(--green-d);}
.detail-cal{display:inline-block; background:var(--green-l); color:var(--green); font-weight:700; font-size:14px; padding:4px 12px; border-radius:8px; margin-bottom:6px;}
.detail-intro{color:#666; font-size:14px; margin:10px 0 4px;}
.sec-title{font-size:15px; font-weight:700; margin:20px 0 8px; display:flex; align-items:center; gap:6px; color:var(--green-d);}
.sec-title::before{content:""; width:4px;height:15px;background:var(--green);border-radius:2px;}
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chip{background:var(--green-l); color:var(--green-d); font-size:13px; padding:6px 12px; border-radius:16px;}
.steps{margin:0; padding:0; list-style:none; counter-reset:s;}
.steps li{position:relative; padding:10px 0 10px 36px; border-bottom:1px dashed var(--line); font-size:14px; color:#444;}
.steps li::before{
  counter-increment:s; content:counter(s); position:absolute; left:0; top:10px;
  width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;font-size:12px;
  display:flex;align-items:center;justify-content:center;
}
.nutri{display:flex; gap:10px; margin-top:8px;}
.nutri .n{flex:1; background:rgba(var(--green-rgb),.06); border-radius:10px; padding:10px; text-align:center;}
.nutri .n b{display:block; font-size:16px; color:var(--green-d);}
.nutri .n span{font-size:11px; color:var(--sub);}
.detail-foot{
  display:flex; gap:12px; padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
}
.btn-add-cart{flex:1; background:var(--green); color:#fff; font-size:16px; font-weight:600; padding:13px; border-radius:26px;}
.btn-added{flex:1; background:var(--green-l); color:var(--green); font-size:16px; font-weight:600; padding:13px; border-radius:26px;}
.btn-edit-dish{flex:1; background:var(--green); color:#fff; font-size:16px; font-weight:600; padding:13px; border-radius:26px;}
.btn-edit-dish::before{content:"✎ ";}

/* ===== 今日点菜列表 ===== */
.order-date{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.order-date input{font-size:15px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:#fafafa; flex:1;}
.order-empty{text-align:center; color:#b3c2b9; padding:50px 0;}
.order-item{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line);}
.order-item img,.order-item .ph{width:48px;height:48px;border-radius:8px;object-fit:cover;flex:none;}
.order-item .ph{background:var(--green-l);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--green);}
.order-item .nm{flex:1; font-size:15px;}
.order-item .cl{color:var(--sub);font-size:13px;}
.order-item .minus{width:28px;height:28px;border-radius:50%;background:var(--green-l);color:var(--green);font-size:18px;flex:none;}
.order-sum{display:flex;justify-content:space-between; align-items:center; margin-top:14px; font-size:14px;}
.order-sum b{color:var(--green);}
.btn-row{display:flex; gap:12px; margin-top:14px;}
.btn-ghost{flex:1; background:var(--green-l); color:#557; padding:12px; border-radius:24px; font-size:15px;}
.btn-fill{flex:1; background:var(--green); color:#fff; padding:12px; border-radius:24px; font-size:15px; font-weight:600;}

/* ===== 提交确认界面 ===== */
.order-meta{display:flex; gap:10px; margin-bottom:14px;}
.order-meta .om{flex:1; display:flex; flex-direction:column; gap:4px; background:rgba(var(--green-rgb),.04); border:1px solid var(--line); border-radius:12px; padding:9px 12px;}
.od-label{font-size:12px; color:var(--sub);}
.order-meta .om input{font-size:15px; padding:3px 0; border:none; background:transparent; color:var(--text);}
.order-meta .om b{font-size:15px; color:var(--text);}
.order-list{max-height:38vh; overflow:auto; margin:0 -4px; padding:0 4px;}
.order-item .ord-info{flex:1; min-width:0;}
.order-item .ord-info .nm{font-size:15px; color:var(--text);}
.order-item .ord-info .oq{color:var(--green); font-weight:700; font-size:13px;}
.order-item .ord-info .oc{font-size:12px; color:var(--sub); margin-top:3px;}
.order-sum-card{margin-top:14px; background:linear-gradient(135deg,var(--green-l),#fff); border:1px solid var(--line); border-radius:14px; padding:12px 14px;}
.os-row{display:flex; justify-content:space-between; align-items:center; font-size:14px; padding:5px 0; color:var(--sub);}
.os-row b{color:var(--text); font-size:15px;}
.os-row.os-cal{border-top:1px dashed var(--green); margin-top:6px; padding-top:10px; font-size:15px;}
.os-row.os-cal b{color:var(--green); font-size:19px; font-weight:700;}
.order-nutri{display:flex; gap:8px; margin-top:12px;}
.order-nutri .on{flex:1; background:rgba(var(--green-rgb),.04); border:1px solid var(--line); border-radius:12px; padding:10px 0; text-align:center;}
.order-nutri .on b{display:block; font-size:16px; color:var(--text);}
.order-nutri .on span{font-size:11px; color:var(--sub);}
.order-tip{margin-top:12px; font-size:12px; color:var(--sub); text-align:center; line-height:1.6;}

/* ===== 做饭人「订单」Tab ===== */
.orders-list{display:flex; flex-direction:column; gap:12px; padding:4px 2px;}
.order-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow:0 2px 8px rgba(var(--green-rgb),.06); transition:transform .2s, box-shadow .2s;}
.order-card:active{transform:scale(.99);}
.order-card.status-cooking{border-color:var(--green); box-shadow:0 4px 14px rgba(var(--green-rgb),.18);}
.order-card.status-done{opacity:.7; background:rgba(var(--green-rgb),.07);}
.oc-head{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.oc-date{font-size:15px; font-weight:700; color:var(--text);}
.oc-who{font-size:12px; color:var(--sub); background:var(--green-l); padding:2px 9px; border-radius:11px;}
.oc-new{margin-left:auto; font-size:11px; font-weight:700; color:#fff; background:#ff5b6e; padding:2px 9px; border-radius:11px; animation:pulseRed 1.2s infinite;}
@keyframes pulseRed{0%,100%{box-shadow:0 0 0 0 rgba(255,91,110,.5);}50%{box-shadow:0 0 0 6px rgba(255,91,110,0);}}
.oc-dishes{font-size:14px; color:var(--text); line-height:1.6; margin-bottom:10px;}
.oc-foot{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.oc-cal{font-size:13px; color:var(--sub);}
.oc-status{flex:none; font-size:13px; font-weight:600; padding:7px 14px; border-radius:18px; background:#fff4e6; color:#e07b00; border:1px solid #ffe2bf;}
.order-card.status-cooking .oc-status{background:rgba(var(--green-rgb),.1); color:var(--green-d); border-color:rgba(var(--green-rgb),.25);}
.order-card.status-done .oc-status{background:#eef5f1; color:#7a9488; border-color:#dbe9e3;}
/* 点菜人「历史订单」只读状态标签 + 已评星 */
.oc-status-tag{flex:none; font-size:13px; font-weight:600; padding:6px 13px; border-radius:18px; background:var(--green-l); color:var(--green-d); border:1px solid rgba(var(--green-rgb),.22);}
.oc-status-tag.status-pending{background:#fff4e6; color:#e07b00; border-color:#ffe2bf;}
.oc-status-tag.status-done{background:#eef5f1; color:#7a9488; border-color:#dbe9e3;}
.order-card.history{background:rgba(var(--green-rgb),.04);}
.oc-rated{margin-left:auto; font-size:12px; color:#e0a300; letter-spacing:-1px;}
.oc-rated .st{color:#f5c518;}

/* ===== 菜品库管理 ===== */
.mng-tools{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.mng-add{background:var(--green); color:#fff; padding:8px 16px; border-radius:20px; font-size:14px; font-weight:600;}
.mng-list{display:flex; flex-direction:column; gap:10px;}
.mng-item{display:flex; align-items:center; gap:10px; background:var(--card); border-radius:12px; padding:10px; box-shadow:0 1px 4px rgba(var(--green-rgb),.05);}
.mng-item img,.mng-item .ph{width:52px;height:52px;border-radius:9px;object-fit:cover;flex:none;}
.mng-item .ph{background:var(--green-l);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--green);}
.mng-item .mi-body{flex:1; min-width:0;}
.mng-item .mi-name{font-size:15px; font-weight:600;}
.mng-item .mi-sub{font-size:12px; color:var(--sub);}
.mng-item .mi-ops{display:flex; gap:10px; flex:none;}
.mi-ops .op{font-size:13px; color:var(--green-d);}
.mi-ops .op.del{color:var(--warn);}

/* ===== 表单 ===== */
.field{margin-bottom:14px;}
.field label{display:block; font-size:13px; color:#5c6b62; margin-bottom:6px;}
.field input[type=text],.field textarea,.field input[type=number],.field select{
  width:100%; font-size:15px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:#fafafa;
  font-family:inherit;
}
.field textarea{resize:vertical; min-height:64px;}
.pills{display:flex; flex-wrap:wrap; gap:8px;}
.pill{font-size:13px; color:#555; background:#eef3f0; padding:8px 16px; border-radius:18px;}
.pill.on{background:var(--green); color:#fff; font-weight:600;}
.img-row{display:flex; gap:10px; align-items:center;}
.img-row input[type=text]{flex:1;}
.img-prev{width:56px;height:56px;border-radius:8px;object-fit:cover;background:var(--green-l);flex:none;}
.img-prev.ph{display:flex;align-items:center;justify-content:center;font-size:22px;color:#b3c2b9;}
.tag-input{display:flex; gap:8px;}
.tag-input input{flex:1;}
.tag-input button{background:#eef3f0; padding:0 14px; border-radius:10px; font-size:14px;}
.tag-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
.tag-list .t{background:var(--green-l); color:var(--green-d); font-size:13px; padding:5px 10px; border-radius:14px; display:flex; align-items:center; gap:6px;}
.tag-list .t .x{color:var(--warn); font-weight:700;}
.step-input{display:flex; gap:8px;}
.step-input input{flex:1;}
.step-input button{background:#eef3f0; padding:0 14px; border-radius:10px; font-size:14px;}
.step-list{margin-top:8px; padding-left:18px;}
.step-list li{font-size:14px; color:#444; margin-bottom:4px;}
.step-list .x{color:var(--warn); margin-left:6px;}

/* ===== 我的 ===== */
.me-role{display:flex; gap:12px; margin:10px 0 18px;}
.me-role .r{flex:1; background:var(--card); border:2px solid transparent; border-radius:14px; padding:16px; text-align:center; box-shadow:0 1px 4px rgba(var(--green-rgb),.05);}
.me-role .r.on{border-color:var(--green);}
.me-role .r .e{font-size:30px;}
.me-role .r .t{font-weight:600; margin-top:4px;}
.me-role .r .d{font-size:12px; color:var(--sub);}
.me-sec{font-size:15px; font-weight:700; margin:18px 0 10px; color:var(--green-d);}
.hist-item{background:var(--card); border-radius:12px; padding:12px; margin-bottom:10px; box-shadow:0 1px 4px rgba(var(--green-rgb),.05);}
.hist-date{font-size:13px; color:var(--sub);}
.hist-dishes{font-size:15px; margin-top:4px;}
.hist-cal{font-size:12px; color:var(--green); margin-top:4px;}
.me-btns{display:flex; flex-direction:column; gap:10px; margin-top:18px;}
.me-btns button{background:var(--card); padding:13px; border-radius:12px; font-size:15px; text-align:left; box-shadow:0 1px 4px rgba(var(--green-rgb),.05);}
.me-btns .sub{font-size:12px; color:var(--sub); margin-left:6px;}
.me-btns .me-icon{color:var(--green); font-size:18px; margin-right:6px;}
/* 云端同步状态条 */
.sync-status{font-size:13px; line-height:1.5; padding:10px 12px; border-radius:12px; margin-bottom:12px; border:1px solid transparent;}
.sync-status.on{background:rgba(var(--green-rgb),.10); color:var(--green-d); border-color:rgba(var(--green-rgb),.25);}
.sync-status.off{background:#fff7e6; color:#b9823f; border-color:#f3d9a8;}
.sync-status b{font-weight:700;}

/* ===== toast ===== */
.toast{
  position:fixed; left:50%; top:42%; transform:translate(-50%,-50%); z-index:99;
  background:rgba(20,53,40,.92); color:#fff; font-size:14px; padding:12px 20px; border-radius:10px;
  max-width:80%; text-align:center;
}

/* ===== 身份区分（厨师/顾客） ===== */
/* 按钮放在绿色 cover 上，用白底 + 主题色文字更清爽 */
.role-pill{
  flex:none; font-size:12px; color:var(--green-d); background:#fff;
  padding:6px 12px; border-radius:18px; font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
/* 点菜人用橙色字，和做饭人（绿）明显区分 */
.role-orderer .role-pill{color:#e07b00;}
.role-orderer .shop-me{color:#e07b00;}
/* 做饭人专属悬浮加菜按钮，点菜人隐藏 */
.fab{
  position:fixed; right:16px; bottom:80px; z-index:40;
  width:54px; height:54px; border-radius:50%; background:var(--green); color:#fff;
  font-size:30px; line-height:54px; text-align:center; box-shadow:0 6px 18px rgba(var(--green-rgb),.4);
  /* 保证不会被某些父级的 transform/overflow 裁剪 */
  transform:none;
}
.role-orderer .fab{display:none;}

/* 厨师（做饭人）模式：专注菜品增删改，隐藏一切点菜交互 */
body.role-cook .dish-add,
body.role-cook .stepper,
body.role-cook #cartBar{display:none !important;}

/* ===== 菜品评分 ===== */
.dish-rating{font-size:11px; color:#e07b00; margin-top:3px; font-weight:700;}
.dish-rating small{color:var(--sub); font-weight:400;}
.detail-rate{display:inline-block; background:#fff4e6; color:#e07b00; font-weight:700; font-size:13px; padding:3px 10px; border-radius:8px; margin-left:8px; vertical-align:middle;}
.detail-rate small{color:#b9823f; font-weight:400;}

/* ===== 评价弹层 ===== */
.rate-tip{text-align:center; color:var(--sub); font-size:14px; margin:6px 0 18px;}
.rate-stars{text-align:center; font-size:38px; letter-spacing:6px;}
.rate-stars .st{color:#e2e2e2; cursor:pointer; transition:transform .1s;}
.rate-stars .st.on{color:#ffb400;}
.rate-stars .st:active{transform:scale(1.2);}
.rate-labels{text-align:center; font-size:15px; font-weight:700; color:#e07b00; margin:10px 0 20px;}
.rate-comment{width:100%; min-height:90px; border:1px solid var(--line); border-radius:12px; padding:12px; font-family:inherit; font-size:15px; background:#fafafa; resize:vertical;}
/* 评价模块优化：分区 + 每道菜单独打分 */
.rate-section{background:rgba(var(--green-rgb),.04); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:14px;}
.rate-sec-title{font-size:14px; font-weight:700; color:var(--green-d); margin-bottom:6px; display:flex; align-items:center; gap:6px;}
.dish-rate-row{margin-bottom:12px;}
.dish-rate-row:last-child{margin-bottom:0;}
.dr-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px;}
.dr-name{font-size:14px; font-weight:600; color:var(--text);}
.rate-stars.sm{font-size:24px; letter-spacing:2px; text-align:right; flex:none;}
.dr-comment{width:100%; border:1px solid var(--line); border-radius:10px; padding:8px 10px; font-family:inherit; font-size:13px; background:#fff; resize:vertical; min-height:34px;}
.rev-dishes-rate{margin-top:10px; padding-top:10px; border-top:1px dashed var(--line);}
.rev-dr-title{font-size:12px; color:var(--sub); margin-bottom:4px;}
.rev-dr{display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; font-size:13px; margin:4px 0;}
.rev-dr-name{font-weight:600; color:var(--text);}
.rev-dr .rate-stars{font-size:15px; letter-spacing:1px; color:#e2e2e2;}
.rev-dr .rate-stars .st.on{color:#ffb400;}
.rev-dr-cmt{color:var(--sub); font-size:12px;}
.btn-rate-dish{display:block; width:calc(100% - 28px); margin:0 14px 14px; background:var(--green-l); color:var(--green); font-weight:700; font-size:15px; padding:12px; border-radius:24px;}
.btn-rate-dish:active{transform:scale(.98);}

/* ===== 历史记录里的评分 ===== */
.hist-rate{margin-top:8px; font-size:18px; letter-spacing:3px;}
.hist-rate .st{color:#e2e2e2;}
.hist-rate .st.on{color:#ffb400;}
.hist-comment{font-size:13px; color:#666; margin-top:4px; background:#fff8ef; padding:6px 10px; border-radius:8px; word-break:break-word;}
.hist-rate-btn{margin-top:8px; background:#fff4e6; color:#e07b00; font-size:13px; font-weight:600; padding:7px 14px; border-radius:18px;}

/* ===== 身份切换说明 ===== */
.role-tip{margin-top:16px; font-size:13px; color:#5c6b62; background:var(--green-l); padding:12px 14px; border-radius:12px; line-height:1.6;}

/* ===== 评论列表（左侧 Tab「评论」） ===== */
.reviews-list{padding:12px;}
.rev-item{background:var(--card); border-radius:14px; padding:12px; margin-bottom:12px; box-shadow:0 2px 10px rgba(var(--green-rgb),.05);}
.rev-head{display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--sub);}
.rev-label{color:var(--green-d); font-weight:700; background:var(--green-l); padding:2px 8px; border-radius:8px;}
.rev-dishes{font-size:15px; font-weight:600; margin:8px 0; color:var(--txt);}
.rev-stars{font-size:18px; letter-spacing:3px; color:#e2e2e2;}
.rev-stars .st.on{color:#ffb400;}
.rev-comment{font-size:13px; color:#666; margin-top:6px; background:#fff8ef; padding:8px 10px; border-radius:8px; word-break:break-word;}
.rev-none{font-size:13px; color:#b3c2b9; margin:4px 0;}
.rev-btn{margin-top:10px; background:#fff4e6; color:#e07b00; font-size:13px; font-weight:600; padding:7px 14px; border-radius:18px;}
/* 做饭人回复顾客评论 */
.cook-reply{margin-top:8px; background:rgba(var(--green-rgb),.08); border:1px solid rgba(var(--green-rgb),.25); color:var(--green-d); font-size:13px; padding:8px 10px; border-radius:10px; word-break:break-word; line-height:1.5;}
.cook-reply.sm{margin-top:4px; font-size:12px;}
.cook-reply-btn{background:var(--green-l); color:var(--green-d);}
.rev-reply-link{margin-left:4px; background:transparent; color:var(--green); font-size:12px; font-weight:600; padding:2px 8px; border:1px solid rgba(var(--green-rgb),.3); border-radius:12px;}
.rev-reply-link:active{transform:scale(.96);}
/* 回复弹层：展示顾客原话 + 输入框 */
.reply-customer{background:#fff8ef; border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:14px;}
.rc-label{font-size:12px; color:var(--sub); margin-bottom:6px; font-weight:600;}
.rc-text{font-size:15px; color:var(--text); line-height:1.6; word-break:break-word;}
.rc-empty{color:#b3c2b9; font-size:13px;}

/* ==================== GOT7 视觉增强 ==================== */
/* 全局主题氛围背景：淡绿渐变，让透明 #app 透出，整体更沉浸 */
body{
  background:
    radial-gradient(720px 360px at 50% -8%, rgba(var(--green-rgb),.12), transparent 62%),
    radial-gradient(520px 320px at 100% 102%, rgba(var(--green-rgb),.07), transparent 60%),
    linear-gradient(180deg, rgba(var(--green-rgb),.08) 0%, var(--bg) 42%, rgba(var(--green-rgb),.06) 100%);
}
#app{background:transparent;}
/* 背景漂浮装饰层：阿尬塞小鸟 / 星星 / 音符 / 叶子 / 7 / 爱心，低透明度慢浮动 */
.bg-deco{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
.bg-deco .bd{position:absolute; opacity:.10; user-select:none; animation:drift 9s ease-in-out infinite;}
.bg-deco .bd-1{font-size:30px; left:6%; top:18%; animation-delay:0s;}
.bg-deco .bd-2{font-size:22px; left:82%; top:30%; animation-delay:1.2s;}
.bg-deco .bd-3{font-size:20px; left:12%; top:62%; animation-delay:2.1s;}
.bg-deco .bd-4{font-size:26px; left:78%; top:70%; animation-delay:.6s;}
.bg-deco .bd-5{font-size:42px; left:46%; top:85%; font-weight:900; color:var(--green); opacity:.06; animation-delay:1.8s;}
.bg-deco .bd-6{font-size:18px; left:30%; top:8%; animation-delay:2.6s;}
@keyframes drift{0%,100%{transform:translateY(0) rotate(-6deg);}50%{transform:translateY(-12px) rotate(6deg);}}
/* 内容层统一压在装饰之上（注意：.fab 保持 position:fixed，不能混在这里） */
.shop,.main-wrap,.cart-bar{position:relative; z-index:1;}

/* 封面 GOT7 大字水印 */
.cover-watermark{position:absolute; right:12px; bottom:6px; z-index:0; text-align:right; line-height:.82; pointer-events:none;}
.cover-watermark .cw-main{display:block; font-size:62px; font-weight:900; letter-spacing:-2px; color:rgba(255,255,255,.16); font-family:"Arial Black","Helvetica Neue",sans-serif;}
.cover-watermark .cw-kr{display:block; font-size:13px; font-weight:800; color:rgba(255,255,255,.30); letter-spacing:2px; margin-top:2px;}

/* 封面光晕更丰富、更有层次；渐变改用 CSS 变量，随成员应援色变化 */
.shop-cover{
  background:
    radial-gradient(140px 140px at 18% 12%, rgba(255,255,255,.22), transparent 70%),
    radial-gradient(110px 110px at 88% 96%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(210px 210px at 60% 125%, rgba(0,0,0,.12), transparent 70%),
    linear-gradient(135deg, var(--green) 0%, var(--green-d) 100%);
  transition:background .4s ease;
}

/* 菜品卡：玻璃拟态 + 轻量微交互（按压回弹 / 悬浮上浮，60fps） */
.dish{
  border:1px solid rgba(255,255,255,.65);
  transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease;
}
.dish:active{transform:scale(.985);}
@media (hover:hover){
  .dish:hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(var(--green-rgb),.14);}
}
/* 分类选中态加阿尬塞小鸟角标 */
.cat.on::after{content:"🐤"; font-size:11px; display:block; line-height:1; margin-top:3px;}

/* 底部点菜栏：绿渐变 + 小鸟 + 白底提交钮；渐变改用变量，随成员色变化 */
.cart-bar{
  background:linear-gradient(135deg, var(--green-d) 0%, var(--green) 100%);
  box-shadow:0 -6px 20px rgba(var(--green-rgb),.25);
  padding-left:42px;
}
.cart-bar::before{content:"🐤"; position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:18px; opacity:.9;}
.cart-submit{background:#fff; color:var(--green-d); box-shadow:0 4px 12px rgba(0,0,0,.18);}
.cart-submit:active{transform:scale(.97);}

/* 详情页大图底部 GOT7 水印 */
.detail-hero::after{
  content:"GOT7"; position:absolute; right:12px; bottom:10px;
  font-size:30px; font-weight:900; letter-spacing:-1px; color:rgba(255,255,255,.5);
  font-family:"Arial Black","Helvetica Neue",sans-serif; pointer-events:none;
  text-shadow:0 2px 8px rgba(0,0,0,.25);
}

/* 主按钮光泽扫光动画 */
.btn-fill,.mng-add{position:relative; overflow:hidden;}
.btn-fill::after,.mng-add::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); animation:sheen 4.5s ease-in-out infinite;
}
@keyframes sheen{0%,66%{left:-60%;}86%,100%{left:130%;}}

/* 我的面板：GOT7 头卡 */
.me-head{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--green), var(--green-d));
  border-radius:16px; padding:16px; color:#fff; margin-bottom:14px;
  box-shadow:0 6px 18px rgba(var(--green-rgb),.25);
}
.me-head .mh-badge{font-size:11px; font-weight:800; letter-spacing:1px; background:rgba(255,255,255,.92); color:var(--green-d); padding:3px 10px; border-radius:12px; display:inline-block;}
.me-head .mh-title{font-size:20px; font-weight:800; margin-top:8px;}
.me-head .mh-kr{font-size:12px; opacity:.92; margin-top:4px;}
.me-head .mh-bird{position:absolute; right:14px; bottom:-8px; font-size:48px; opacity:.22;}

/* ==================== 成员应援彩蛋：切换按钮 / 主题色 / 背景音 ==================== */
/* 头部操作区改为横排，容纳成员切换 + 背景音 + 身份 + 我的 */
.shop-actions{flex-direction:row; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:8px;}
/* 封面小圆按钮：成员应援切换 / 背景音乐 */
.icon-btn{
  flex:none; width:34px; height:34px; border-radius:50%; padding:0;
  background:rgba(255,255,255,.95); font-size:16px; line-height:34px; text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.12); transition:transform .15s ease;
}
.icon-btn:active{transform:scale(.9);}
/* 背景音开启时呼吸光圈 */
.bgm-toggle.on{animation:bgmpulse 1.5s ease-in-out infinite;}
@keyframes bgmpulse{
  0%,100%{box-shadow:0 2px 8px rgba(0,0,0,.12);}
  50%{box-shadow:0 0 0 6px rgba(255,255,255,.35), 0 2px 8px rgba(0,0,0,.12);}
}
/* 头像 SVG 随成员应援主题色变化 */
.shop-avatar svg .g-fill{fill:var(--green);}
.shop-avatar svg .g-fill-d{fill:var(--green-d);}
.shop-avatar svg .g-fill-l{fill:var(--green-l);}
/* 我的面板：成员应援色选择行 */
.me-sec + .member-chips{margin-top:-2px;}
.member-chips{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 4px;}
.member-chip{
  width:62px; padding:8px 4px; border-radius:14px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:#fff; border:2px solid transparent; box-shadow:0 1px 4px rgba(var(--green-rgb),.06);
  transition:transform .15s ease, border-color .2s ease;
}
.member-chip:active{transform:scale(.94);}
.member-chip.on{border-color:var(--green);}
.member-chip .mc-bird{font-size:22px; line-height:1;}
.member-chip .mc-name{font-size:12px; font-weight:700; color:#444;}
.member-chip.on .mc-name{color:var(--green-d);}

/* ==================== 全局 UI 精修（premium polish） ==================== */
/* 1) 切换成员应援色时整站颜色平滑渐变（由 JS 临时挂 .theme-anim，约 480ms 后移除） */
.theme-anim, .theme-anim *{
  transition:background-color .42s ease, color .42s ease, border-color .42s ease,
             fill .42s ease, box-shadow .42s ease, background .42s ease !important;
}

/* 2) 列表入场：轻柔上浮淡入（评论 / 订单 / 历史 / 菜品库），带轻微错峰 */
@keyframes fadeUp{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
.rev-item, .order-card, .hist-item, .mng-item{
  animation:fadeUp .4s cubic-bezier(.16,1,.3,1) both;
}
.rev-item:nth-child(1), .order-card:nth-child(1), .hist-item:nth-child(1), .mng-item:nth-child(1){animation-delay:.02s;}
.rev-item:nth-child(2), .order-card:nth-child(2), .hist-item:nth-child(2), .mng-item:nth-child(2){animation-delay:.05s;}
.rev-item:nth-child(3), .order-card:nth-child(3), .hist-item:nth-child(3), .mng-item:nth-child(3){animation-delay:.08s;}
.rev-item:nth-child(4), .order-card:nth-child(4), .hist-item:nth-child(4), .mng-item:nth-child(4){animation-delay:.11s;}
.rev-item:nth-child(n+5), .order-card:nth-child(n+5), .hist-item:nth-child(n+5), .mng-item:nth-child(n+5){animation-delay:.14s;}

/* 3) 卡片悬浮上浮 + 加深阴影（桌面端），与入场动画的 transform 用 !important 隔离，互不打架 */
.rev-item, .hist-item, .mng-item{transition:transform .24s cubic-bezier(.16,1,.3,1), box-shadow .24s ease;}
@media (hover:hover){
  .rev-item:hover, .order-card:hover, .hist-item:hover, .mng-item:hover{
    transform:translateY(-3px) !important;
    box-shadow:0 12px 30px rgba(var(--green-rgb),.16) !important;
  }
}
.order-card:active{transform:scale(.99) !important;}

/* 4) 无障碍：键盘聚焦时的主题色光圈（WCAG 2.1 AA） */
:focus-visible{outline:2px solid var(--green); outline-offset:2px;}
button:focus-visible, .cat:focus-visible, .side-tab:focus-visible, .dish:focus-visible, .member-chip:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(var(--green-rgb),.35);
}

/* 5) toast 入场：轻微缩放入场，更顺滑 */
@keyframes toastIn{from{opacity:0; transform:translate(-50%,-50%) scale(.92);} to{opacity:1; transform:translate(-50%,-50%) scale(1);}}
.toast{animation:toastIn .26s cubic-bezier(.16,1,.3,1);}

/* 6) 空状态更精致：大图标 + 留白，弱化存在感 */
.list-end{font-size:13px; color:#a9bcb2; padding:34px 0 38px; line-height:1.85;}
.list-end::before{content:"🐤"; display:block; font-size:34px; opacity:.5; margin-bottom:8px;}
.order-empty{text-align:center; color:#a9bcb2; padding:64px 0; line-height:1.8;}
.order-empty::before{content:"🍽️"; display:block; font-size:46px; opacity:.42; margin-bottom:10px;}

/* 7) 关键滚动容器平滑滚动 */
.main-panel, .cats, .ov-body{scroll-behavior:smooth;}

/* 8) 统一主操作按钮的按压回弹微交互 */
.btn-fill:active, .btn-ghost:active, .cart-submit:active, .mng-add:active, .role-pill:active, .shop-me:active{
  transform:scale(.97);
}

/* 9) 遮罩头部加极淡的主题色渐变，提升层次 */
.ov-head{background:linear-gradient(180deg, rgba(var(--green-rgb),.07), transparent);}

/* ==================== 彩蛋合集样式 ==================== */
/* 通用特效层：粒子爆裂 / 光标尾迹（覆盖全屏，不挡点击） */
#fxLayer{position:fixed; inset:0; z-index:80; pointer-events:none; overflow:hidden;}
.fx-particle{position:absolute; transform:translate(-50%,-50%); will-change:transform,opacity; animation:fxFly 1.5s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes fxFly{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.4) rotate(0);}
  15%{opacity:1;}
  100%{opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.15) rotate(var(--rot));}
}
.fx-trail{position:absolute; width:9px; height:9px; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; animation:trailFade .64s ease-out forwards;}
@keyframes trailFade{0%{opacity:.7; transform:translate(-50%,-50%) scale(1);}100%{opacity:0; transform:translate(-50%,-50%) scale(.2);}}

/* 通用居中弹层（秘语 / 歌词） */
.fx-modal{position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(20,53,40,.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}
.fx-modal.hidden{display:none;}
.secret-card{background:#fff; border-radius:22px; padding:26px 24px; max-width:300px; width:100%; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.3); animation:pop .35s cubic-bezier(.16,1,.3,1);}
@keyframes pop{from{opacity:0; transform:scale(.85);}to{opacity:1; transform:scale(1);}}
.secret-bird{font-size:44px;}
.secret-title{font-size:18px; font-weight:800; color:var(--green-d); margin:8px 0 12px;}
.secret-msg{font-size:14px; color:#333; line-height:1.7; background:var(--green-l); border-radius:14px; padding:14px; font-weight:500; text-align:left;}
.secret-sub{font-size:12px; color:var(--sub); margin:12px 0 16px; letter-spacing:1px;}
.secret-card .btn-fill{background:var(--green); color:#fff; font-weight:600; padding:12px; border-radius:24px; width:100%; font-size:15px;}

/* 歌词闪卡：3D 翻转入场 */
.lyric-card{background:linear-gradient(135deg, var(--green), var(--green-d)); color:#fff; border-radius:22px; padding:30px 24px; max-width:320px; width:100%; text-align:center;
  box-shadow:0 20px 60px rgba(var(--green-rgb),.4); transform:perspective(900px) rotateY(90deg); opacity:0; transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .4s;}
.lyric-card.in{transform:perspective(900px) rotateY(0); opacity:1;}
.lyric-bird{font-size:13px; opacity:.9; letter-spacing:1px; margin-bottom:14px;}
.lyric-song{font-size:14px; font-weight:700; opacity:.95; margin-bottom:12px;}
.lyric-line{font-size:22px; font-weight:800; line-height:1.5; text-shadow:0 2px 8px rgba(0,0,0,.2);}
.lyric-tip{font-size:12px; opacity:.8; margin-top:18px;}

/* 成员语录气泡（长按封面小鸟） */
.fx-bubble{position:fixed; top:58px; right:14px; z-index:92; max-width:240px; display:flex; align-items:center; gap:8px;
  background:rgba(20,53,40,.94); color:#fff; padding:10px 14px; border-radius:16px; font-size:13px; line-height:1.4;
  box-shadow:0 8px 24px rgba(0,0,0,.25); animation:bubbleIn .3s cubic-bezier(.16,1,.3,1);}
.fx-bubble.hidden{display:none;}
.fx-bubble .qb-bird{font-size:22px; flex:none;}
@keyframes bubbleIn{from{opacity:0; transform:translateY(-8px) scale(.95);}to{opacity:1; transform:none;}}

/* 完美七道飘牌 */
.perfect-badge{position:fixed; left:50%; top:42%; transform:translate(-50%,-50%) scale(.6); z-index:88; opacity:0;
  background:linear-gradient(135deg,var(--green),var(--green-d)); color:#fff; font-size:22px; font-weight:800; padding:14px 28px; border-radius:30px;
  box-shadow:0 12px 40px rgba(var(--green-rgb),.5); transition:transform .4s cubic-bezier(.16,1,.3,1), opacity .4s;}
.perfect-badge.show{opacity:1; transform:translate(-50%,-50%) scale(1);}

/* 生日横幅 */
.birthday-banner{position:fixed; top:0; left:0; right:0; z-index:95; color:#fff; font-size:14px; font-weight:600; text-align:center;
  padding:9px 36px 9px 14px; box-shadow:0 4px 16px rgba(0,0,0,.2); animation:slideDown .4s ease;}
.birthday-banner.hidden{display:none;}
.birthday-banner b{text-decoration:underline;}
.birthday-banner .bb-x{position:absolute; right:12px; top:50%; transform:translateY(-50%); opacity:.85; font-size:13px; cursor:pointer; padding:4px 6px;}
@keyframes slideDown{from{transform:translateY(-100%);}to{transform:none;}}

/* 合照氛围画布（7 人应援色光晕，浮于内容之上但不挡点击） */
#groupCanvas{position:fixed; inset:0; z-index:75; pointer-events:none; opacity:0; transition:opacity .6s ease;}

/* 店名可点击提示（歌词彩蛋入口） */
.shop-name{cursor:pointer;}
.shop-name::after{content:" 🎵"; font-size:13px; opacity:.5;}

/* 我的面板：音乐说明卡（如何放入 GOT7 音频） */
/* 我的面板：音乐库（自选音频，存本机 IndexedDB） */
.me-music{margin-top:10px;}
.me-add-music{display:inline-block; background:var(--green); color:#fff; font-weight:700; font-size:14px;
  padding:9px 16px; border-radius:20px; margin-bottom:10px;}
.me-add-music:active{transform:scale(.97);}
.music-list{display:flex; flex-direction:column; gap:7px; margin-bottom:8px;}
.music-item{display:flex; align-items:center; gap:8px; background:var(--card);
  border:1px solid var(--line); border-radius:10px; padding:8px 10px;}
.mi-name{font-size:13px; color:var(--text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mi-del{background:#fff0f0; color:#e0533f; font-size:12px; font-weight:600; padding:5px 10px; border-radius:12px; flex:none;}
.mi-del:active{transform:scale(.95);}
.music-empty{font-size:12px; color:#a9bcb2; padding:6px 0; text-align:center;}
.me-music-tip{font-size:11px; color:var(--sub); line-height:1.5;}

/* ============ 更多 tab ============ */
.more-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:16px;}
.more-card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px 16px;
  display:flex; flex-direction:column; gap:8px; align-items:flex-start; cursor:pointer;
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-color .25s;}
.more-card:active{transform:scale(.97);}
.more-card:hover{transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.14);}
.more-emoji{font-size:30px; line-height:1;}
.more-title{font-weight:800; font-size:15px; color:var(--text);}
.more-sub{font-size:12px; opacity:.62; line-height:1.45;}
.more-card.accent{background:linear-gradient(135deg,var(--green),var(--green-d)); border:none; color:#fff;}
.more-card.accent .more-title{color:#fff;}
.more-card.accent .more-sub{opacity:.92;}

/* ============ 转盘 ============ */
.wheel-stage{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:24px 16px 30px; min-height:72vh;}
.wheel-canvas-box{position:relative; width:300px; height:300px; max-width:82vw; max-height:82vw;}
.wheel-canvas-box canvas{width:100%; height:100%; display:block; border-radius:50%;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.28));}
.wheel-pointer{position:absolute; top:-4px; left:50%; transform:translateX(-50%); z-index:4;
  width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent;
  border-top:24px solid var(--green); filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));}
.wheel-hub{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
  width:56px; height:56px; border-radius:50%; background:#fff; color:var(--green); font-weight:900; font-size:15px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.3); border:3px solid var(--green);}
.wheel-btns{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}
.wheel-result{min-height:0; width:100%; display:flex; justify-content:center;}
.wr-pop{display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 18px; border-radius:18px;
  background:var(--card); border:1px solid var(--line); animation:wrPop .4s cubic-bezier(.16,1,.3,1) both; max-width:280px;}
@keyframes wrPop{from{opacity:0; transform:scale(.8) translateY(8px);} to{opacity:1; transform:none;}}
.wr-emoji{font-size:46px;}
.wr-name{font-size:20px; font-weight:800; color:var(--text);}
.wr-sub{font-size:13px; opacity:.65;}

/* ============ 七的奇迹 彩虹模式 ============ */
body.rainbow-mode::after{content:''; position:fixed; inset:0; z-index:8; pointer-events:none;
  background:conic-gradient(from 0deg, #ff5d8f,#ffd166,#06d6a0,#5b8def,#9b5de5,#ff5d8f);
  mix-blend-mode:overlay; opacity:.35; animation:rainbowSpin 6s linear infinite;}
@keyframes rainbowSpin{to{transform:rotate(360deg);}}