/* 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)}