/* MIXBAR 个人版 · 统一设计层（最后加载）
 * 与官网、酒吧版共用同一套：系统字体、字号节奏、玻璃材质、环境光、胶囊按钮、缓动曲线
 * 配色保持个人版自己的黑金（及浅色主题），这里只改「质感」不改颜色 */

:root{
  --ease:cubic-bezier(.28,.11,.32,1);
  --brand-font:Georgia,"Songti SC","Noto Serif SC",serif;
  --serif:var(--sans);                      /* 正文不再用衬线体，只有品牌字标保留 */
  --radius:18px; --radius-sm:12px;
  --glow-rgb:232,185,106;
  --glass-fill:linear-gradient(160deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.022) 45%,rgba(255,255,255,.01) 100%);
  --glass-blur:blur(22px) saturate(175%);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.06);
  --glass-drop:0 16px 40px rgba(0,0,0,.35);
  --glass-ctl:rgba(255,255,255,.07);
  --sheet:rgba(24,19,14,.78);
  --layer:rgba(14,11,8,.86);
  --topbar-bg:rgba(14,11,8,.5);
  --tabbar-bg:rgba(30,25,18,.55);
}
html[data-theme="light"]{
  --glow-rgb:200,150,70;
  --glass-fill:linear-gradient(160deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.62) 50%,rgba(255,255,255,.55) 100%);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(120,90,40,.10);
  --glass-drop:0 12px 32px rgba(90,70,40,.12);
  --glass-ctl:rgba(255,255,255,.7);
  --sheet:rgba(250,247,242,.82);
  --layer:rgba(247,244,239,.88);
  --topbar-bg:rgba(247,244,239,.6);
  --tabbar-bg:rgba(255,255,255,.6);
}

/* —— 基础：字体与节奏 —— */
html{background:var(--bg)}
body{background:transparent;letter-spacing:-.015em;line-height:1.47}
.brand-name{font-family:var(--brand-font)}
.r-en,.dt-en,.step-en,.bw-name span,.bw-step-en{font-style:normal;letter-spacing:0}
.ing-row .ir-qty,.hero-num,.bw-timer-num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.page-title{font-size:30px;font-weight:700;letter-spacing:-.03em}
.dt-name{font-weight:700;letter-spacing:-.03em}
.section-label{letter-spacing:0}
.page-title,.dt-name,.hero-num,.empty-title,.bw-title,.modal h2,.confirm-box h3{text-wrap:balance}   /* 标题不留孤字 */
.page-title,.empty-title,.bw-title,.hero-text,.empty-sub{word-break:keep-all;overflow-wrap:anywhere}   /* 只在标点处换行 */
.hero-text,.empty-sub,.bw-step,.bw-sub,.confirm-box p{text-wrap:pretty}

/* —— 环境光与颗粒（玻璃需要光透过来）—— */
body::before{content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(36% 30% at 18% 10%,rgba(var(--glow-rgb),.22),transparent 70%),
    radial-gradient(30% 26% at 88% 38%,rgba(var(--glow-rgb),.12),transparent 72%),
    radial-gradient(40% 36% at 50% 100%,rgba(var(--glow-rgb),.10),transparent 70%);
  filter:blur(30px);animation:drift 40s ease-in-out infinite alternate}
@keyframes drift{50%{transform:translate3d(3%,-2%,0) scale(1.05)}100%{transform:translate3d(-2%,2%,0) scale(1.02)}}
body::after{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
html[data-theme="light"] body::after{opacity:.03}

/* —— 卡片：玻璃材质 + 跟随光标的高光 —— */
.recipe-card,.match-card,.ing-card,.setting-row,.profile-card,.shop-card,.hero-bar,.badge,.bw-ing,.wishlist-row,.stat-card,.made-row{
  background:var(--glass-fill);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-color:transparent;box-shadow:var(--glass-edge),var(--glass-drop);border-radius:var(--radius);
  position:relative;isolation:isolate;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s var(--ease)}
.recipe-card.can-make{background:linear-gradient(160deg,rgba(111,191,142,.16),rgba(111,191,142,.02) 60%),var(--glass-fill)}
.hero-bar{background:linear-gradient(160deg,rgba(var(--glow-rgb),.18),rgba(var(--glow-rgb),.03) 55%),var(--glass-fill)}
.hero-bar::after{display:none}
.badge{border-radius:14px}
.recipe-card::after,.match-card::after,.setting-row::after,.ing-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;
  transition:opacity .5s var(--ease);background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.12),transparent 60%)}
.recipe-card:hover::after,.match-card:hover::after,.setting-row:hover::after,.ing-card:hover::after{opacity:1}
@media (hover:hover){
  .recipe-card:hover,.match-card:hover{transform:translateY(-3px);box-shadow:var(--glass-edge),0 22px 48px rgba(0,0,0,.42)}
  .recipe-card:hover .r-art .cocktail-art{transform:translateY(-3px) rotate(-2deg)}
}
.r-art .cocktail-art{transition:transform .6s var(--ease)}
.recipe-card:active,.match-card:active,.setting-row:active{transform:scale(.97)}

/* —— 顶栏与悬浮标签栏 —— */
#topbar{background:var(--topbar-bg);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border-bottom:none;box-shadow:inset 0 -1px 0 var(--line)}
#tabbar{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));max-width:600px;padding:4px;border-top:none;border-radius:30px;
  background:var(--tabbar-bg);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  box-shadow:var(--glass-edge),0 14px 40px rgba(0,0,0,.35)}
.tab{border-radius:26px;padding:7px 0 6px;transition:color .3s var(--ease),background .3s var(--ease)}
.tab.active{background:var(--glass-ctl);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
#main{padding-bottom:110px}

/* —— 按钮与标签 —— */
.btn{border-radius:980px;min-height:46px;font-weight:600;
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 78%,#fff) 0%,var(--gold) 55%,var(--gold-deep) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 22px rgba(var(--glow-rgb),.22);transition:transform .25s var(--ease),filter .25s var(--ease)}
.btn:active{transform:scale(.97)}
.btn.ghost,.btn.danger{background:var(--glass-ctl);border:none;box-shadow:var(--glass-edge);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.btn.small{border-radius:980px;min-height:34px;padding:0 16px}
.chip{background:var(--glass-ctl);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:all .3s var(--ease)}
.chip.on{background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 80%,#fff),var(--gold));box-shadow:0 4px 12px rgba(var(--glow-rgb),.25)}
.cf-btn{border-radius:980px;border:none;background:var(--glass-ctl);box-shadow:var(--glass-edge)}
.cf-btn.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 80%,#fff),var(--gold) 55%,var(--gold-deep))}
.modal-close,.icon-btn,.detail-back,.bw-close{transition:transform .25s var(--ease)}
input,select,textarea{background:var(--glass-ctl);border-color:transparent;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius-sm);
  transition:box-shadow .25s var(--ease)}
input:focus,select:focus,textarea:focus{border-color:transparent;box-shadow:inset 0 0 0 1.5px var(--gold-deep)}

/* —— 弹层：玻璃 —— */
.modal{background:var(--sheet);border:none;border-radius:28px 28px 0 0;backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 -10px 50px rgba(0,0,0,.4);animation:slideUp .55s var(--ease)}
.confirm-box{background:var(--sheet);border:none;border-radius:24px;backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 70px rgba(0,0,0,.5);animation:popIn .45s var(--ease)}
.modal-mask{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.detail-layer,.brew-layer{background:var(--layer);backdrop-filter:blur(36px) saturate(170%);-webkit-backdrop-filter:blur(36px) saturate(170%);animation:slideUp .55s var(--ease)}
.toast{background:var(--sheet);border:none;backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 40px rgba(0,0,0,.4);animation:toastIn .5s var(--ease)}
.refresh-bar{background:var(--sheet);border:none;border-radius:980px;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);box-shadow:var(--glass-edge),0 10px 30px rgba(0,0,0,.35)}

/* —— 动效：统一缓动曲线 —— */
.view.active{animation:viewIn .55s var(--ease)}
.recipe-grid.anim,.match-list.anim,.ing-list.anim,.shop-card.anim{animation:listIn .6s var(--ease)}
.bw-body{animation:listIn .5s var(--ease)}
@keyframes viewIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes listIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes slideUp{from{transform:translateY(48px);opacity:0}to{transform:none;opacity:1}}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){ body::before{animation:none} .recipe-card:hover,.match-card:hover{transform:none} }
@media (prefers-reduced-transparency:reduce){
  .recipe-card,.match-card,.ing-card,.setting-row,.profile-card,.shop-card,.hero-bar,.modal,.confirm-box,#tabbar,#topbar{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* —— 酒桌游戏弹层（游戏本身的样式在 games.css）—— */
.games-layer{gap:10px}
.games-layer .bw-top{flex:none}
.games-title{font-size:17px;font-weight:600}
.games-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
.games-entry{background:linear-gradient(160deg,rgba(var(--glow-rgb),.20),rgba(var(--glow-rgb),.04) 60%),var(--glass-fill)}
.games-entry .s-value{color:var(--gold)}

/* 语言切换（顶栏右侧） */
.top-r{display:flex;align-items:center;gap:8px}
.top-lang{min-width:44px;height:28px;padding:0 12px;border:none;border-radius:980px;font:inherit;font-size:13px;font-weight:600;letter-spacing:.02em;
  color:var(--text);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:transform .2s var(--ease, ease)}
.top-lang:active{transform:scale(.95)}
/* 英文界面：酒名已经是英文，下面那行英文名就重复了 */
html[lang=en] .r-en,html[lang=en] .dt-en,html[lang=en] .bw-name span,html[lang=en] .step-en,html[lang=en] .bw-step-en{display:none}

/* —— 懂你的口味 —— */
/* 帮我选：「能调什么」页的入口 */
.pick-card{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:14px 0 4px;padding:8px 8px 8px 18px;border:none;border-radius:980px;
  font:inherit;font-size:15px;color:var(--text-2);background:var(--glass-ctl);box-shadow:var(--glass-edge);cursor:pointer;transition:transform .25s var(--ease)}
.pick-card:active{transform:scale(.98)}
.pick-card b{height:34px;padding:0 18px;border-radius:980px;display:grid;place-items:center;font-weight:600;color:var(--on-gold,#1a1208);
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 78%,#fff) 0%,var(--gold) 55%,var(--gold-deep) 100%)}
.pk-dots{display:flex;gap:6px;margin:-4px 0 14px}
.pk-dots i{width:22px;height:4px;border-radius:2px;background:var(--line)}
.pk-dots i.on{background:var(--gold)}
.pk-opts{display:grid;gap:8px}
.pk-opts .setting-row{width:100%;text-align:left;cursor:pointer}
.pk-back{margin-top:12px}
.pk-note{margin:12px 2px}
.taste-note{margin-left:auto;font-size:11px;color:var(--gold);letter-spacing:0}
/* 读懂一杯酒：酸甜烈苦 */
.flavor{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0 4px}
.fl{display:flex;flex-direction:column;gap:6px}
.fl span{font-size:12px;color:var(--text-3)}
.fl i{display:flex;gap:3px}
.fl b{flex:1;height:5px;border-radius:3px;background:var(--line)}
.fl b.on{background:var(--gold)}
/* 材料的作用：点材料名看说明 */
.ing-row .ir-role{border:none;background:none;padding:0;font:inherit;font-size:14px;color:var(--text);text-align:left;cursor:pointer;
  text-decoration:underline dotted color-mix(in srgb,var(--text) 35%,transparent);text-underline-offset:4px}
.role-text{font-size:16px;line-height:1.6;margin:0 0 12px;color:var(--text)}

/* 首页口味词、缺料导购、赞赏 */
.taste-quick{display:flex;gap:8px;margin:10px 0 4px;flex-wrap:wrap}
.shop-buy{margin-top:12px}
.shop-row{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:default}
.shop-links{display:flex;gap:8px}
.donate-img{display:block;width:220px;max-width:70%;margin:14px auto 4px;border-radius:12px}

/* —— 分享卡 / 新手套装 / 自建配方插画预览 —— */
.share-img{display:block;width:100%;max-width:360px;margin:0 auto 16px;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.share-btns{gap:10px}
.share-btns .btn{flex:1}
.dt-actions .row{gap:8px}
.starter-card{margin-top:18px;padding:20px;border-radius:var(--radius);background:linear-gradient(160deg,rgba(var(--glow-rgb),.16),rgba(var(--glow-rgb),.03) 55%),var(--glass-fill);box-shadow:var(--glass-edge)}
.starter-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.starter-h b{font-size:18px;font-weight:600}
.starter-h span{font-size:13px;color:var(--gold)}
.starter-sub{font-size:13px;color:var(--text-3);margin:4px 0 12px}
.starter-card .tag-select{margin-bottom:16px}
.starter-card .chip{cursor:default}
.cr-glass-row{display:flex;gap:16px;align-items:center}
.cr-preview{flex:none;width:84px;height:98px;color:var(--glass-line)}
.cr-preview .cocktail-art{width:100%;height:100%}
.share-mode{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:0 0 12px;padding:10px;border:none;background:none;
  font:inherit;font-size:14px;color:var(--gold);cursor:pointer}
.share-mode svg{width:18px;height:18px}

/* —— 今日一杯 / 聚会模式 / 无酒精入口 —— */
.today-card{display:flex;align-items:center;gap:16px;width:100%;margin:14px 0 2px;padding:14px 18px;border:none;border-radius:var(--radius);text-align:left;cursor:pointer;
  font:inherit;color:var(--text);background:linear-gradient(160deg,rgba(var(--glow-rgb),.16),rgba(var(--glow-rgb),.03) 60%),var(--glass-fill);box-shadow:var(--glass-edge)}
.today-art{flex:none;width:58px;height:68px;color:var(--glass-line)}
.today-art .cocktail-art{width:100%;height:100%}
.today-eyebrow{font-size:12px;font-weight:600;color:var(--gold)}
.today-name{font-size:20px;font-weight:600;margin-top:2px}
.today-sub{font-size:12px;color:var(--text-3);margin-top:3px}
.pick-card + .pick-card{margin-top:8px}
.pt-settings{display:grid;gap:10px;margin-bottom:6px}
.pt-set{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--text-2)}
.pt-step{display:flex;align-items:center;gap:14px}
.pt-step button{width:34px;height:34px;border-radius:50%;border:none;font-size:18px;color:var(--text);background:var(--glass-ctl);box-shadow:var(--glass-edge);cursor:pointer}
.pt-step b{min-width:24px;text-align:center;font-size:18px;font-variant-numeric:tabular-nums}
.seg-mini{display:flex;gap:6px}
.seg-mini button{width:40px;height:32px;border-radius:980px;border:none;font:inherit;color:var(--text-2);background:var(--glass-ctl);cursor:pointer}
.seg-mini button.on{color:var(--on-gold,#1a1208);background:var(--gold);font-weight:600}
.pt-list{display:grid;gap:6px;max-height:44vh;overflow:auto;margin:0 -4px;padding:0 4px}
.pt-row{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;border:none;border-radius:14px;font:inherit;color:var(--text);text-align:left;background:var(--glass-ctl);cursor:pointer}
.pt-row.on{box-shadow:inset 0 0 0 1.5px var(--gold)}
.pt-art{flex:none;width:26px;height:32px;color:var(--glass-line)}
.pt-art .cocktail-art{width:100%;height:100%}
.pt-name{flex:1;font-size:15px}
.pt-tag{font-size:11px;color:var(--text-3)}
.pt-tag.ok{color:var(--green)}
.pt-row i{flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line)}
.pt-row.on i{background:var(--gold);box-shadow:none}
.pt-go{width:100%;margin-top:14px}
.pt-go:disabled{opacity:.4}
.pt-summary{font-size:14px;color:var(--text-2);margin:-4px 0 4px}
.pt-menu div,.pt-items div{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px}
.pt-menu span,.pt-items span{flex:1}
.pt-menu b{color:var(--gold)}
.pt-items em{font-style:normal;color:var(--text-2);font-variant-numeric:tabular-nums}
.pt-items b{font-weight:500;font-size:12px;color:var(--green);min-width:30px;text-align:right}
.pt-items .miss b{color:var(--coral)}
.pt-note{margin:12px 2px 8px}
.na-entry.chip{display:flex;align-items:center;justify-content:space-between;width:100%;margin:12px 0 4px;padding:12px 16px;border-radius:14px;font-size:14px}
.na-entry b{font-weight:600;color:var(--green)}
.na-entry.on b{color:inherit}