/* =========================================================
   yvfng 风格切换按钮 + 弹出面板（公共）
   兼容两套变量体系（工具页 --bg/--surface/--fg/--border，
   首页 --paper/--ink/--rule），用 var(a, var(b)) 回退写法。
   皮肤无关：纸感与毛玻璃风格下都正常显示。
   ========================================================= */

/* ---------- 导航内切换按钮 ---------- */
.style-sw{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono, var(--mono));font-size:12px;
  background:none;border:0;padding:2px 2px;cursor:pointer;
  color:var(--muted);border-bottom:1px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.style-sw:hover{color:var(--fg, var(--ink));border-color:var(--border, var(--rule-strong))}
.style-sw svg{display:block}
.style-sw[aria-expanded="true"]{color:var(--accent, var(--red));border-color:currentColor}

/* ---------- 弹出面板 ---------- */
.style-pop{
  position:fixed;top:calc(64px + 10px);right:var(--gutter, 24px);
  z-index:80;width:248px;padding:14px;
  background:color-mix(in srgb, var(--fg, var(--ink)) 7%, transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--border, var(--rule));
  border-radius:14px;
  box-shadow:0 20px 50px rgba(2,6,18,.45);
  font-family:var(--font-body, var(--sans));
}
.style-pop[hidden]{display:none}
.style-pop-title{
  font-size:12.5px;font-weight:600;color:var(--muted);
  letter-spacing:.03em;margin:0 0 10px;
  font-family:var(--mono, var(--mono));
  text-transform:uppercase;
}

/* ---------- 风格选项卡片 ---------- */
.style-opt{
  display:flex;align-items:center;gap:11px;
  padding:9px 10px;margin-bottom:8px;cursor:pointer;
  border:1px solid transparent;border-radius:11px;
  background:transparent;transition:background .15s ease,border-color .15s ease;
  -webkit-user-select:none;user-select:none;
}
.style-opt:last-child{margin-bottom:2px}
.style-opt:hover{background:color-mix(in srgb, var(--fg, var(--ink)) 5%, transparent)}
.style-opt.on{border-color:var(--accent, var(--red));background:color-mix(in srgb, var(--accent, var(--red)) 10%, transparent)}

/* 色块预览 */
.style-swatch{
  width:34px;height:26px;flex:none;border-radius:7px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.style-swatch.paper{
  background:linear-gradient(135deg,#1c1a15 0 46%,#f1efe9 46% 54%,#a93b2e 54% 60%,#d6d2c6 60%);
}
.style-swatch.glass{
  background:
    radial-gradient(60% 90% at 80% 0%, rgba(91,157,255,.55), transparent 60%),
    radial-gradient(60% 80% at 10% 100%, rgba(139,123,255,.45), transparent 60%),
    linear-gradient(135deg,#0a0f1e,#1a2440);
}
.style-name{font-size:14px;color:var(--fg, var(--ink));flex:1}
.style-opt .style-tick{
  font-size:13px;color:var(--accent, var(--red));opacity:0;
  transition:opacity .15s ease;
}
.style-opt.on .style-tick{opacity:1}

/* 当前风格小标签（按钮旁） */
.style-now{
  font-size:11px;color:var(--muted);
  font-family:var(--mono, var(--mono));
}

/* 移动端：面板左移，避免溢出 */
@media (max-width:720px){
  .style-pop{right:12px;left:12px;width:auto;top:calc(60px + 8px)}
}