/* ============================================================
   喵语时光 Wiki · 酿酒
   设计语言：液态玻璃 (Liquid Glass) + 暖色琥珀酒液主题
   ============================================================ */

:root{
  --bg:#0a0910;
  --bg2:#12101a;
  --ink:#f2eee6;
  --ink-dim:#a8a2b8;
  --ink-faint:#6f6a80;

  --amber:#e8b45a;
  --amber-2:#f5d18a;
  --rose:#c96a8e;
  --violet:#9a7ad6;
  --teal:#57c5c0;
  --danger:#e2685f;
  --ok:#6fbf73;

  --glass:rgba(255,255,255,.075);
  --glass-2:rgba(255,255,255,.11);
  --glass-3:rgba(255,255,255,.16);
  --stroke:rgba(255,255,255,.12);
  --stroke-2:rgba(255,255,255,.21);

  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:30px;
  --blur:22px;

  --shadow:0 18px 50px -12px rgba(0,0,0,.62), 0 2px 8px rgba(0,0,0,.35);
  --shadow-sm:0 8px 22px -8px rgba(0,0,0,.5);

  --sans:"Inter","Noto Serif SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Noto Serif SC",Georgia,"Songti SC",serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;

  --maxw:1280px;
  --ease:cubic-bezier(.22,.9,.28,1);
}

/* 浅色主题 */
[data-theme="light"]{
  --bg:#f4f1ea;
  --bg2:#ece7dc;
  --ink:#241f2e;
  --ink-dim:#5d566e;
  --ink-faint:#8d86a0;
  --glass:rgba(255,255,255,.52);
  --glass-2:rgba(255,255,255,.68);
  --glass-3:rgba(255,255,255,.86);
  --stroke:rgba(30,22,48,.10);
  --stroke-2:rgba(30,22,48,.18);
  --shadow:0 18px 44px -14px rgba(60,45,90,.22), 0 2px 8px rgba(60,45,90,.08);
  --shadow-sm:0 8px 20px -8px rgba(60,45,90,.18);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;min-height:100vh;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .5s var(--ease),color .5s var(--ease);
}a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
::selection{background:rgba(232,180,90,.32)}

/* ---------- 背景动效 ---------- */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(1100px 640px at 76% -6%, rgba(232,180,90,.20), transparent 60%),
  radial-gradient(880px 600px at 6% 10%, rgba(154,122,214,.20), transparent 58%),
  radial-gradient(760px 520px at 42% 62%, rgba(87,197,192,.13), transparent 60%),
  linear-gradient(180deg,var(--bg),var(--bg2));}
.blob{position:absolute;border-radius:50%;filter:blur(64px);opacity:.55;mix-blend-mode:screen}
[data-theme="light"] .blob{mix-blend-mode:multiply;opacity:.26}
.b1{width:46vmax;height:46vmax;left:-12vmax;top:-14vmax;background:radial-gradient(circle,#e8b45a,transparent 68%);animation:drift1 30s ease-in-out infinite}
.b2{width:38vmax;height:38vmax;right:-10vmax;top:12vh;background:radial-gradient(circle,#9a7ad6,transparent 68%);animation:drift2 38s ease-in-out infinite}
.b3{width:34vmax;height:34vmax;left:28vw;bottom:-16vmax;background:radial-gradient(circle,#57c5c0,transparent 68%);animation:drift3 44s ease-in-out infinite}
.b4{width:26vmax;height:26vmax;right:22vw;top:58vh;background:radial-gradient(circle,#c96a8e,transparent 68%);animation:drift1 34s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,7vh) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8vw,10vh) scale(1.08)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,-8vh) scale(1.14)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------- 玻璃基类 ---------- */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(175%);
  backdrop-filter:blur(var(--blur)) saturate(175%);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  position:relative;
}
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.16),transparent 42%,rgba(255,255,255,.05));
  opacity:.8;
}
[data-theme="light"] .glass::before{background:linear-gradient(160deg,rgba(255,255,255,.9),transparent 46%)}

/* 真正有厚度的玻璃：边缘因全反射而发亮，底部有内阴影做出体积 */
.glass-edge{
  position:relative;
  isolation:isolate;
}
/* 上缘与左缘的高光棱 */
.glass-edge::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(160deg,rgba(255,255,255,.20),transparent 34%);
}
/* 下缘与右缘的暗边，做出「有厚度」的错觉 */
.glass-edge::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 1px 0 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,255,255,.12),
    inset -1px 0 0 rgba(255,255,255,.06);
}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:20px;
  padding:11px clamp(14px,3vw,30px);
  border-width:0 0 1px 0;border-radius:0;
  box-shadow:0 8px 28px -18px rgba(0,0,0,.7);
}
.topbar::before{border-radius:0}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-family:var(--serif);font-size:16px;letter-spacing:.02em}
.brand-text span{font-size:11px;color:var(--ink-faint);letter-spacing:.06em}

.topnav{display:flex;align-items:center;gap:3px;margin-left:auto;flex-wrap:wrap}
.topnav a{
  position:relative;padding:7px 13px;border-radius:9px;font-size:13.5px;
  color:var(--ink-dim);font-weight:500;transition:.22s var(--ease);
}
.topnav a:hover{color:var(--ink);background:var(--glass-2)}
.topnav a.active{color:var(--ink);background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--stroke-2)}
.topnav a.active::after{
  content:"";position:absolute;left:50%;bottom:2px;translate:-50% 0;
  width:16px;height:2px;border-radius:2px;background:var(--amber);
  box-shadow:0 0 10px var(--amber);
}
.nav-placeholder{
  font-size:12.5px;color:var(--ink-faint);padding:7px 12px;border-radius:9px;
  border:1px dashed var(--stroke-2);display:inline-flex;align-items:center;gap:6px;cursor:default;
}
.nav-placeholder em{font-style:normal;font-size:10.5px;padding:1px 6px;border-radius:99px;
  background:var(--glass-2);border:1px solid var(--stroke)}

.topbar-tools{display:flex;gap:7px;margin-left:8px}
.icon-btn{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--glass-2);border:1px solid var(--stroke);
  color:var(--ink-dim);transition:.22s var(--ease);
}
.icon-btn:hover{color:var(--ink);background:var(--glass-3);transform:translateY(-1px)}
.icon-btn svg{fill:currentColor}
.icon-btn.sm{width:28px;height:28px;border-radius:8px}
.menu-btn{display:none}
/* 抽屉打开时遮罩会盖住顶栏，把菜单按钮抬到遮罩之上以便再次点击关闭 */
@media (max-width:860px){
  .topbar{z-index:90}
  /* 抽屉让开顶栏高度，避免顶部被压住、关闭按钮点不到 */
  .sidebar{top:0;padding-top:51px}
}

/* ---------- 侧栏 ---------- */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:284px;z-index:80;
  border-radius:0;border-width:0 1px 0 0;
  transform:translateX(-100%);
  transition:transform .42s var(--ease);
  display:flex;flex-direction:column;
}
.sidebar.open{transform:none}
.sidebar::before{border-radius:0}
@media (max-width:860px){
  /* 抽屉在窄屏要收窄，不然 284px 定宽会超出视口并触发横向滚动 */
  .sidebar{width:min(284px,86vw)}
}
.side-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 18px 12px;border-bottom:1px solid var(--stroke);
}
.side-title{font-family:var(--serif);font-size:14px;font-weight:600;letter-spacing:.04em}
.side-body{padding:12px;overflow-y:auto;flex:1}
.side-body::-webkit-scrollbar{width:6px}
.side-body::-webkit-scrollbar-thumb{background:var(--stroke-2);border-radius:3px}
.side-group{margin-bottom:6px}
.side-group-label{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-faint);padding:10px 10px 6px;font-weight:600;
}
.side-link{
  display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;
  font-size:13.5px;color:var(--ink-dim);transition:.2s var(--ease);cursor:pointer;
}
.side-link:hover{background:var(--glass-2);color:var(--ink);padding-left:13px}
.side-link.active{background:var(--glass-3);color:var(--ink);box-shadow:inset 0 0 0 1px var(--stroke-2)}
.side-link .swatch{width:8px;height:8px;border-radius:99px;flex:0 0 auto;
  background:var(--dot,#888);
  box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 0 8px -1px var(--dot,#888), inset 0 .5px 0 rgba(255,255,255,.55)}
.side-link .cnt{margin-left:auto;font-size:11px;color:var(--ink-faint);font-family:var(--mono)}
.scrim{
  position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .38s var(--ease);
}
.scrim.on{opacity:1;pointer-events:auto}
body.nav-lock{overflow:hidden}

/* ---------- 主体 ---------- */
.main{max-width:var(--maxw);margin:0 auto;padding:0 clamp(14px,3vw,30px) 70px}

/* Hero */
.hero{position:relative;padding:clamp(40px,7vw,80px) 0 clamp(26px,4vw,44px);overflow:hidden}
.hero-inner{position:relative;z-index:2;max-width:780px}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-dim);
  padding:5px 13px;border-radius:99px;background:var(--glass-2);
  border:1px solid var(--stroke);margin-bottom:20px;
}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:99px;background:var(--amber);
  box-shadow:0 0 10px var(--amber);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.82)}}
.hero-title{
  font-family:var(--serif);font-size:clamp(38px,7.2vw,76px);line-height:1.02;
  margin:0 0 18px;font-weight:700;letter-spacing:-.01em;
}
.grad{
  background:linear-gradient(100deg,var(--amber-2),var(--amber) 42%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% auto;animation:shine 7s linear infinite;
}
@keyframes shine{to{background-position:200% center}}
.hero-sub{font-size:clamp(15px,1.6vw,17.5px);line-height:1.78;color:var(--ink-dim);max-width:660px;margin:0 0 28px}
.hero-sub b{color:var(--ink);font-weight:600}
.hero-stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.stat{
  display:flex;flex-direction:column;gap:2px;padding:11px 17px;border-radius:var(--r);
  background:var(--glass-2);border:1px solid var(--stroke);min-width:104px;
  transition:.28s var(--ease);
}
.stat:hover{transform:translateY(-3px);background:var(--glass-3)}
.stat b{font-size:23px;font-family:var(--serif);line-height:1.1;color:var(--amber-2)}
[data-theme="light"] .stat b{color:#a06a22}
.stat span{font-size:11px;color:var(--ink-faint);letter-spacing:.05em}
.hero-actions{display:flex;gap:11px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:12px;
  font-size:14px;font-weight:600;transition:.26s var(--ease);
}
.btn.primary{
  background:linear-gradient(150deg,rgba(245,209,138,.98),rgba(232,180,90,.9));
  color:#2a1a08;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 10px 28px -10px rgba(232,180,90,.85);
}
.btn.primary:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 16px 34px -10px rgba(232,180,90,1)}
.btn.ghost{background:var(--glass-2);border:1px solid var(--stroke-2);color:var(--ink)}
.btn.ghost:hover{background:var(--glass-3);transform:translateY(-2px)}
.hero-glow{
  position:absolute;top:-30%;right:-12%;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,180,90,.20),transparent 66%);
  filter:blur(30px);pointer-events:none;animation:breathe 12s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.09)}}

/* ---------- 通用版式 ---------- */
.view{animation:rise .5s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sec{margin-bottom:54px}
.sec-head{margin-bottom:20px}
.sec-kicker{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
  font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:8px;
}
.sec-kicker::before{content:"";width:22px;height:1px;background:var(--amber);opacity:.6}
.sec-title{font-family:var(--serif);font-size:clamp(23px,3.2vw,31px);margin:0 0 8px;font-weight:700}
.sec-desc{color:var(--ink-dim);font-size:14.5px;line-height:1.75;max-width:760px;margin:0}
h3.sub{font-family:var(--serif);font-size:18px;margin:30px 0 12px;font-weight:600;display:flex;align-items:center;gap:9px}
h3.sub::before{content:"";width:3px;height:17px;border-radius:2px;background:var(--amber)}

.card{
  padding:clamp(20px,2.6vw,30px);border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 48%,rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -16px 30px -22px rgba(255,255,255,.14),0 14px 34px -18px rgba(0,0,0,.6);
  margin-bottom:18px;
}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
p{line-height:1.8}
ul.tidy{margin:0;padding-left:0;list-style:none}
ul.tidy li{position:relative;padding-left:22px;margin-bottom:9px;line-height:1.72;color:var(--ink-dim);font-size:14.5px}
ul.tidy li::before{
  content:"";position:absolute;left:6px;top:.62em;width:6px;height:6px;border-radius:99px;
  background:var(--amber);box-shadow:0 0 8px rgba(232,180,90,.65);
}
ul.tidy li b,ol.tidy li b{color:var(--ink)}
ol.tidy{margin:0;padding-left:20px}
ol.tidy li{margin-bottom:10px;line-height:1.72;color:var(--ink-dim);font-size:14.5px}
code{
  font-family:var(--mono);font-size:.88em;padding:2px 6px;border-radius:6px;
  background:var(--glass-3);border:1px solid var(--stroke);color:var(--amber-2);
}
[data-theme="light"] code{color:#8a5a1c}
.mono{font-family:var(--mono)}
.kbd{
  font-family:var(--mono);font-size:12px;padding:3px 8px;border-radius:7px;
  background:var(--glass-3);border:1px solid var(--stroke-2);
  box-shadow:0 2px 0 var(--stroke);color:var(--ink);
}
.callout{
  display:flex;gap:13px;padding:16px 18px;border-radius:var(--r);
  background:var(--glass-2);border:1px solid var(--stroke);border-left:3px solid var(--amber);
  margin:16px 0;font-size:14.5px;line-height:1.72;
}
.callout .ico{font-size:17px;line-height:1.4;flex:0 0 auto}
.callout.warn{border-left-color:var(--danger)}
.callout.info{border-left-color:var(--teal)}
.callout.ok{border-left-color:var(--ok)}
.callout b{color:var(--ink)}

/* 流程图 */
.flow{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;margin:22px 0}
.flow-step{
  flex:1 1 150px;min-width:150px;padding:18px 16px;border-radius:var(--r);
  background:var(--glass-2);border:1px solid var(--stroke);position:relative;
  transition:.3s var(--ease);
}
.flow-step:hover{transform:translateY(-4px);background:var(--glass-3);border-color:var(--stroke-2)}
.flow-step .n{
  width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:#2a1a08;
  background:linear-gradient(150deg,rgba(245,209,138,.95),rgba(232,180,90,.85));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 12px -4px rgba(232,180,90,.6);
  margin-bottom:10px;
}
.flow-step h4{margin:0 0 6px;font-size:14.5px;font-family:var(--serif);font-weight:600}
.flow-step p{margin:0;font-size:12.8px;color:var(--ink-dim);line-height:1.65}
.flow-arrow{display:grid;place-items:center;padding:0 8px;color:var(--ink-faint);font-size:18px}

/* 表格 */
.tbl-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--stroke);background:var(--glass);margin:16px 0}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:520px}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--stroke)}
th{
  font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-faint);
  font-weight:600;background:var(--glass-2);position:sticky;top:0;backdrop-filter:blur(10px);
}
tbody tr{transition:background .2s}
tbody tr:hover{background:var(--glass-2)}
tbody tr:last-child td{border-bottom:0}
td.num{font-family:var(--mono);color:var(--ink-faint);font-size:12.5px}

/* 玻璃边缘的折射：用一层极窄的描边模拟光线在棱角处的弯折 */
.rcard > .edge-light{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:
    linear-gradient(to right, rgba(255,255,255,.30), transparent 1.6%),
    linear-gradient(to bottom, rgba(255,255,255,.22), transparent 1.3%),
    linear-gradient(to left, rgba(255,255,255,.12), transparent 1.3%),
    linear-gradient(to top, rgba(255,255,255,.08), transparent 1.3%);
  mix-blend-mode:overlay;opacity:.55;
}
[data-theme="light"] .rcard > .edge-light{mix-blend-mode:soft-light;opacity:.8}

.toolbar{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  padding:14px;border-radius:var(--r);
  background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.14);margin-bottom:20px;position:sticky;top:64px;z-index:40;
  -webkit-backdrop-filter:blur(22px) saturate(185%);backdrop-filter:blur(22px) saturate(185%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 30px -18px rgba(0,0,0,.6);
}
.search{
  flex:1 1 200px;min-width:0;display:flex;align-items:center;gap:9px;padding:9px 14px;
  border-radius:11px;background:var(--glass);border:1px solid var(--stroke);
  transition:.24s var(--ease);
}
.search:focus-within{border-color:var(--amber);box-shadow:0 0 0 3px rgba(232,180,90,.16);background:var(--glass-3)}
.search svg{flex:0 0 auto;color:var(--ink-faint)}
.search input{
  flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font-size:14px;font-family:var(--sans);
}
.search input::placeholder{color:var(--ink-faint)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  padding:6px 13px;border-radius:99px;font-size:12.5px;font-weight:500;
  background:var(--glass);border:1px solid var(--stroke);color:var(--ink-dim);
  transition:.22s var(--ease);white-space:nowrap;
}
.chip:hover{color:var(--ink);background:var(--glass-3);transform:translateY(-1px)}
.chip.on{color:#2a1a08;font-weight:600;border-color:transparent;
  background:linear-gradient(150deg,rgba(245,209,138,.95),rgba(232,180,90,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 5px 18px -6px rgba(232,180,90,.8);}
[data-theme="light"] .chip.on{color:#3a2408}
.chip .sw{display:inline-block;width:7px;height:7px;border-radius:99px;margin-right:6px;vertical-align:1px;
  background:var(--dot,#888);
  box-shadow:0 0 0 1px rgba(255,255,255,.22), 0 0 7px -1px var(--dot,#888), inset 0 .5px 0 rgba(255,255,255,.6)}
.chip.on .sw{box-shadow:0 0 0 1.5px rgba(42,26,8,.32), inset 0 .5px 0 rgba(255,255,255,.7)}
.sel{
  padding:8px 12px;border-radius:10px;background:var(--glass);border:1px solid var(--stroke);
  color:var(--ink-dim);font-size:13px;outline:0;cursor:pointer;
}
.sel:focus{border-color:var(--amber)}
.count{font-size:12.5px;color:var(--ink-faint);margin-left:auto;white-space:nowrap}
.count b{color:var(--ink);font-family:var(--mono)}

/* ---------- 配方卡 ---------- */
.recipes{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(370px,1fr))}
.rcard{
  border-radius:var(--r-lg);padding:18px;position:relative;overflow:hidden;
  background:
    linear-gradient(150deg,rgba(255,255,255,.115),rgba(255,255,255,.035) 46%,rgba(255,255,255,.075));
  border:1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(20px) saturate(190%);backdrop-filter:blur(20px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -18px 34px -22px rgba(255,255,255,.16),
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 14px 34px -16px rgba(0,0,0,.62);
  transition:.32s var(--ease);cursor:pointer;
}
/* 玻璃内的光：不是一个铺满的色块，而是从角落渗进来的一团柔光 */
.rcard::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:
    radial-gradient(115% 88% at 104% -14%, rgba(var(--tint-rgb),.40), transparent 58%),
    radial-gradient(78% 62% at -16% 112%, rgba(var(--tint-rgb),.22), transparent 62%);
  opacity:.85;transition:opacity .38s var(--ease),transform .5s var(--ease);
  mix-blend-mode:screen;
}
[data-theme="light"] .rcard::after{mix-blend-mode:multiply;opacity:.5}
.rcard:hover{
  transform:translateY(-5px);
  border-color:rgba(255,255,255,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -18px 34px -20px rgba(255,255,255,.2),
    0 22px 46px -16px rgba(0,0,0,.7);
}
.rcard:hover::after{opacity:1;transform:scale(1.06)}
.rcard-top{position:relative;z-index:3}
/* 顶部一行：编号 + 工艺徽章 + 色珠，三者同行 */
.rcard-head{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.rcard-head .badge-cond{position:static;top:auto;right:auto}
.rcard-head .bead{width:22px;height:22px;margin-left:auto;align-self:center}
.rcard-no{
  font-family:var(--mono);font-size:11px;color:var(--ink-faint);
  padding:3px 8px;border-radius:7px;background:var(--glass-2);border:1px solid var(--stroke);
  flex:0 0 auto;margin-top:2px;
}
.rcard-name{font-family:var(--serif);font-size:16.5px;font-weight:600;line-height:1.35;margin:0 0 3px;position:relative;z-index:2}
.rcard-id{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);opacity:.8;position:relative;z-index:2}
/* ---------- 玻璃色标：液滴珠 ----------
   颜色不应该是「浮在玻璃上的实心方块」，而应该像一滴酒液渗进玻璃：
   内部有色、通透、边缘有高光和厚度，底部有反光。 */
.bead{
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;position:relative;
  margin-left:auto;align-self:flex-start;
  background:
    radial-gradient(78% 74% at 30% 24%, rgba(255,255,255,.9), rgba(255,255,255,.25) 40%, transparent 58%),
    radial-gradient(130% 120% at 46% 116%, rgba(var(--c-rgb),.95), transparent 64%),
    linear-gradient(158deg, rgba(var(--c-rgb),.88), rgba(var(--c-rgb),.52));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.75),
    inset 0 -2px 5px rgba(0,0,0,.38),
    inset 0 0 0 .5px rgba(255,255,255,.25),
    0 0 0 1px rgba(255,255,255,.16),
    0 5px 16px -4px rgba(var(--c-rgb),.72);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease);
}
.bead::after{
  content:"";position:absolute;left:22%;top:12%;width:32%;height:26%;
  border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.95),transparent 70%);
  filter:blur(.4px);pointer-events:none;
}
/* 玻璃球的边缘折射环 */
.bead::before{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    linear-gradient(140deg, rgba(255,255,255,.7), transparent 26%),
    linear-gradient(320deg, rgba(255,255,255,.3), transparent 22%);
  mix-blend-mode:overlay;
}
.bead.sm{width:9px;height:9px;box-shadow:inset 0 1px 1px rgba(255,255,255,.7),0 0 0 1px rgba(255,255,255,.2),0 0 8px -1px rgba(var(--c-rgb),.85)}
.bead.sm::after{display:none}
.rcard:hover .bead{transform:scale(1.1) translateY(-1px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85),inset 0 -2px 5px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.26),0 8px 22px -5px rgba(var(--c-rgb),.9)}
.bcard:hover .bead{transform:scale(1.08) translateY(-1px)}

.rcard-ings{display:flex;flex-wrap:wrap;gap:5px;margin:13px 0 0;position:relative;z-index:3}
.ing{
  font-size:11.5px;padding:3px 9px;border-radius:8px;
  background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid var(--stroke);color:var(--ink-dim);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.ing b{color:var(--ink);font-weight:600}
.ing .amt{font-family:var(--mono);color:var(--amber-2);font-size:10.5px;margin-left:3px}
[data-theme="light"] .ing .amt{color:#a06a22}
.rcard-meta{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;position:relative;z-index:3;
  padding-top:12px;border-top:1px solid var(--stroke);
}
.mtag{
  font-size:10.5px;padding:2.5px 8px;border-radius:7px;
  background:var(--glass-2);border:1px solid var(--stroke);color:var(--ink-faint);
  display:inline-flex;align-items:center;gap:4px;
}
.mtag.acl{color:var(--rose,var(--ink-dim))}
.rcard-eff{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;position:relative;z-index:3}
.eff{
  font-size:10.5px;font-family:var(--mono);padding:2.5px 8px;border-radius:7px;
  background:linear-gradient(150deg,rgba(87,197,192,.20),rgba(87,197,192,.07));
  border:1px solid rgba(87,197,192,.28);color:#9fe3df;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
[data-theme="light"] .eff{
  background:linear-gradient(150deg,rgba(20,120,116,.13),rgba(20,120,116,.05));
  color:#146c68;border-color:rgba(20,120,116,.22)}
/* 工艺徽章：不是贴纸式的实色标签，而是玻璃表面的一层薄釉 */
.badge-cond{
  position:absolute;top:16px;right:16px;z-index:3;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;padding:3px 9px;border-radius:99px;font-weight:600;
  background:linear-gradient(150deg,rgba(255,255,255,.17),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(8px) saturate(160%);backdrop-filter:blur(8px) saturate(160%);
  color:var(--ink-dim);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 10px -4px rgba(0,0,0,.5);
}
.badge-cond.distill{
  color:var(--amber-2);
  background:linear-gradient(150deg,rgba(232,180,90,.30),rgba(232,180,90,.10));
  border-color:rgba(232,180,90,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 12px -4px rgba(232,180,90,.5);
}
.badge-cond.aged{
  color:#dcbdf0;
  background:linear-gradient(150deg,rgba(154,122,214,.30),rgba(154,122,214,.10));
  border-color:rgba(154,122,214,.36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 12px -4px rgba(154,122,214,.5);
}
.badge-cond.cook{
  color:#9fe3df;
  background:linear-gradient(150deg,rgba(87,197,192,.26),rgba(87,197,192,.08));
  border-color:rgba(87,197,192,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 12px -4px rgba(87,197,192,.45);
}
[data-theme="light"] .badge-cond.distill{color:#8a5a1c}
[data-theme="light"] .badge-cond.aged{color:#5c3a8a}
[data-theme="light"] .badge-cond.cook{color:#146c68}

/* 详情弹层 */
.modal{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:center;justify-content:center;padding:20px;
}
.modal.on{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-box{
  position:relative;z-index:2;max-width:640px;width:100%;max-height:86vh;overflow-y:auto;
  border-radius:var(--r-xl);padding:clamp(22px,3.4vw,34px);
  background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.045) 46%,rgba(255,255,255,.085));
  border:1px solid rgba(255,255,255,.17);
  -webkit-backdrop-filter:blur(40px) saturate(200%);backdrop-filter:blur(40px) saturate(200%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -24px 44px -30px rgba(255,255,255,.2),
    0 34px 80px -20px rgba(0,0,0,.78);
  animation:pop .42s var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
.modal-close{position:absolute;top:16px;right:16px;z-index:3}
.m-title{font-family:var(--serif);font-size:clamp(22px,3.4vw,29px);margin:0 0 6px;font-weight:700;line-height:1.3;padding-right:38px}
.m-id{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);margin-bottom:20px}
.m-section{margin-top:22px}
.m-section-label{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-faint);
  font-weight:600;margin-bottom:9px;
}
.m-names{display:flex;flex-direction:column;gap:7px}
.m-name-row{
  display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:11px;
  background:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.m-name-row .q{
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:2px 9px;border-radius:99px;
  font-weight:600;flex:0 0 auto;
  background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  color:var(--ink-dim);
}
.m-name-row.q1 .q{color:#f0a0a0;background:linear-gradient(150deg,rgba(224,138,138,.24),rgba(224,138,138,.07));border-color:rgba(224,138,138,.3)}
.m-name-row.q2 .q{color:var(--amber-2);background:linear-gradient(150deg,rgba(232,180,90,.24),rgba(232,180,90,.07));border-color:rgba(232,180,90,.32)}
.m-name-row.q3 .q{color:#9fe3df;background:linear-gradient(150deg,rgba(87,197,192,.22),rgba(87,197,192,.06));border-color:rgba(87,197,192,.3)}
[data-theme="light"] .m-name-row.q1 .q{color:#a94444}
[data-theme="light"] .m-name-row.q2 .q{color:#8a5a1c}
[data-theme="light"] .m-name-row.q3 .q{color:#146c68}
.m-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:9px}
.m-cell{
  padding:11px 13px;border-radius:12px;
  background:linear-gradient(150deg,rgba(255,255,255,.085),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.m-cell .k{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);margin-bottom:4px}
.m-cell .v{font-size:14.5px;font-weight:600;font-family:var(--serif)}
.m-cell .v small{font-family:var(--sans);font-weight:400;color:var(--ink-faint);font-size:11.5px}
.m-ings{display:flex;flex-direction:column;gap:8px}
.m-ing-row{
  display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:11px;
  background:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.m-ing-row .mat{flex:1;font-size:14px}
.m-ing-row .mat small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);margin-top:2px}
.m-ing-row .qty{
  font-family:var(--mono);font-size:14px;color:var(--amber-2);font-weight:600;
  padding:2px 10px;border-radius:8px;
  background:linear-gradient(150deg,rgba(232,180,90,.20),rgba(232,180,90,.07));
  border:1px solid rgba(232,180,90,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24);
}
[data-theme="light"] .m-ing-row .qty{color:#8a5a1c}
.m-eff{display:flex;flex-wrap:wrap;gap:7px}
.m-eff .eff{font-size:12px;padding:5px 11px}

/* 弹层里的成品色标：玻璃罐中盛着的一汪酒液 */
.potion{
  width:46px;height:52px;border-radius:8px 8px 12px 12px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 20px -6px rgba(0,0,0,.6);
}
.potion::before{
  content:"";position:absolute;inset:2px 2px 3px;border-radius:6px 6px 10px 10px;
  background:
    radial-gradient(90% 70% at 30% 18%, rgba(255,255,255,.55), transparent 52%),
    linear-gradient(180deg, rgba(var(--c-rgb),.55), rgba(var(--c-rgb),.95) 62%, rgba(var(--c-rgb),.8));
  box-shadow:inset 0 -6px 12px -6px rgba(0,0,0,.45), inset 0 0 0 .5px rgba(255,255,255,.3);
}
.potion::after{
  content:"";position:absolute;left:18%;top:8%;width:20%;height:52%;
  border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.04));
  filter:blur(1.2px);
}
.potion-cap{
  width:22px;height:8px;border-radius:3px 3px 1px 1px;margin:0 auto 4px;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.1));
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}

/* ---------- 基底表 ---------- */
.bases{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.bcard{
  border-radius:var(--r);padding:16px;background:var(--glass);
  border:1px solid var(--stroke);transition:.3s var(--ease);
  display:flex;gap:13px;align-items:flex-start;
}
.bcard:hover{transform:translateY(-3px);background:var(--glass-2);border-color:var(--stroke-2)}
.bcard h4{margin:0 0 5px;font-size:14.5px;font-family:var(--serif);font-weight:600}
.bcard .bid{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);margin-bottom:8px}
.bcard .ings{display:flex;flex-wrap:wrap;gap:5px}

/* ---------- FAQ ---------- */
.faq-item{
  border-radius:var(--r);background:var(--glass);border:1px solid var(--stroke);
  margin-bottom:10px;overflow:hidden;transition:.28s var(--ease);
}
.faq-item.open{border-color:var(--stroke-2);background:var(--glass-2)}
.faq-q{
  width:100%;display:flex;align-items:center;gap:13px;padding:16px 19px;
  text-align:left;font-size:14.5px;font-weight:500;
}
.faq-q .mark{
  width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--glass-3);border:1px solid var(--stroke);color:var(--amber);
  font-size:13px;transition:transform .32s var(--ease);
}
.faq-item.open .faq-q .mark{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .42s var(--ease)}
.faq-a-inner{padding:0 19px 18px 54px;font-size:14px;line-height:1.78;color:var(--ink-dim)}
.faq-a-inner b{color:var(--ink)}
.faq-a-inner code{font-size:12.5px}

/* ---------- 页脚 ---------- */
.foot{border-width:1px 0 0 0;border-radius:0;margin-top:40px;box-shadow:none}
.foot::before{border-radius:0}
.foot-inner{
  max-width:var(--maxw);margin:0 auto;padding:30px clamp(14px,3vw,30px);
  display:flex;gap:26px;align-items:center;flex-wrap:wrap;
}
.foot-brand{display:flex;flex-direction:column;gap:2px}
.foot-brand strong{font-family:var(--serif);font-size:15px}
.foot-brand span{font-size:11.5px;color:var(--ink-faint)}
.foot-links{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}
.foot-links a{font-size:13px;color:var(--ink-dim);transition:.2s}
.foot-links a:hover{color:var(--amber-2)}
[data-theme="light"] .foot-links a:hover{color:#a06a22}
.foot-meta{display:flex;gap:14px;font-size:11.5px;color:var(--ink-faint);font-family:var(--mono);flex-wrap:wrap}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;translate:-50% 0;z-index:120;
  padding:11px 20px;border-radius:12px;font-size:13.5px;
  background:var(--glass-3);border:1px solid var(--stroke-2);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:var(--shadow);opacity:0;pointer-events:none;
  transition:.4s var(--ease);transform:translateY(14px);
}
.toast.on{opacity:1;transform:none}

/* ---------- 响应式 ---------- */
@media (max-width:860px){
  .menu-btn{display:grid}
  /* 移动端：顶栏导航完全收起，抽屉改由 #sidebar 承担（它是 body 直接子元素，
     不受 .topbar 的 backdrop-filter 创建包含块影响） */
  .topnav{display:none !important}
  .toolbar{position:static}
  .recipes{grid-template-columns:1fr}
  .hero{padding-top:32px}
  .topbar{flex-wrap:wrap;row-gap:8px}
}

/* ---------- 移动端优化 ---------- */
@media (max-width:720px){
  /* 顶栏：品牌 + 工具按钮同一行，不换行堆叠 */
  .topbar{padding:8px 14px;gap:10px;flex-wrap:nowrap}
  .brand-text span{display:none}
  .topbar-tools{margin-left:auto}

  /* Hero 压缩，别占满首屏 */
  .hero{padding:20px 0 14px}
  .hero-eyebrow{margin-bottom:12px;padding:4px 11px;font-size:11px}
  .hero-title{font-size:clamp(30px,9vw,44px);margin-bottom:10px}
  .hero-sub{font-size:14px;line-height:1.68;margin-bottom:16px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .hero-stats{gap:7px;margin-bottom:18px;display:grid;grid-template-columns:repeat(2,1fr)}
  .stat{padding:8px 12px;min-width:0}
  .stat b{font-size:18px}
  .stat span{font-size:10px}
  .hero-actions .btn{padding:9px 17px;font-size:13px}

  /* 筛选区：搜索框独占一行，下拉与计数一行 */
  .toolbar{
    padding:10px;gap:8px;margin-bottom:12px;border-radius:var(--r-sm);
  }
  .search{flex:1 1 100%;order:1}
  .sel{flex:1 1 0;order:2;font-size:12.5px;padding:7px 9px;min-width:0}
  .count{order:3;font-size:11.5px;margin-left:0;flex:0 0 auto}

  /* 系列筛选：改成横向滚动，不再纵向堆 12 行 */
  #chips{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;
    padding:2px 2px 8px;margin:0 -2px 12px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;scroll-snap-align:start;padding:6px 12px;font-size:12px}

  /* 配方卡：单列 + 更紧凑 */
  .recipes{grid-template-columns:1fr;gap:11px}
  .rcard{padding:14px;border-radius:var(--r)}
  .rcard-head{gap:8px;margin-bottom:9px}
  .rcard-name{font-size:15.5px}
  .rcard-ings{gap:4px;margin-top:10px}
  .ing{font-size:11px;padding:3px 8px}
  .rcard-meta{gap:5px;margin-top:10px;padding-top:10px}
  .mtag{font-size:10px;padding:2px 7px}
  .rcard-eff{gap:4px;margin-top:8px}
  .eff{font-size:10px;padding:2px 7px}

  /* 弹层：占满更少高度，内边距收紧 */
  .modal{padding:12px}
  .modal-box{max-height:88vh;padding:20px 16px;border-radius:var(--r-lg)}
  .m-title{font-size:20px;padding-right:34px}
  .m-grid{grid-template-columns:repeat(2,1fr)}
  .m-cell{padding:9px 11px}
  .m-cell .v{font-size:13.5px}
  .faq-a-inner{padding-left:19px}
  .sec{margin-bottom:38px}
  .card{padding:16px}
  .foot-inner{padding:22px 14px;gap:16px}
}

@media (max-width:720px){
  /* 配方/基底这类「工具页」在手机上不需要 Hero，直接进内容 */
  body[data-route="recipes"] .hero,
  body[data-route="bases"] .hero{display:none}
  body[data-route="recipes"] .main,
  body[data-route="bases"] .main{padding-top:14px}
}

@media (max-width:420px){
  .hero-stats .stat:nth-child(n+4){display:none}
  .m-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .brand-text span{display:none}
  .foot-inner{flex-direction:column;align-items:flex-start}
  .foot-links{margin-left:0}
  .stat{min-width:88px;flex:1}
  .faq-a-inner{padding-left:19px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}
@media print{
  .aurora,.grain,.topbar,.sidebar,.foot,.toolbar,.scrim{display:none !important}
  body{background:#fff;color:#000}
  .glass,.card,.rcard{background:#fff;border:1px solid #ccc;box-shadow:none}
}