/* ==========================================================================
   林汐权益 · 主题皮肤 & 广告位样式  [V10]
   --------------------------------------------------------------------------
   用法：<html data-skin="amber">  ，皮肤名由后台「模板皮肤」决定
        用户点右上角按钮切浅色时，<html data-theme="light"> 会盖掉所有皮肤
   皮肤清单：cyber(默认青) / amber(琥珀金) / violet(赛博紫) /
            emerald(翡翠) / ocean(深海) / rose(赤焰)
   ========================================================================== */

/* --------------------------------------------------------------- 1. 皮肤 */

/* 琥珀金 · 暗色影院风 */
html[data-skin="amber"]:not([data-theme="light"]){
  --bg:#0a0703;
  --bg2:#120d05;
  --panel:rgba(255,196,92,.045);
  --panel2:rgba(255,196,92,.075);
  --line:rgba(245,183,61,.16);
  --line2:rgba(245,183,61,.34);
  --cy:#f5b73d;
  --cy2:#ffcf6b;
  --vi:#e0612f;
  --am:#ffd479;
  --gn:#7fd98a;
  --rd:#ff7a6b;
  --tx:#f6ecd9;
  --mu:#a9967a;
  --mu2:#7b6a52;
  --sh:0 18px 50px rgba(0,0,0,.72);
  --lxglass:rgba(10,7,3,.82);
  --lxsoft:rgba(255,196,92,.07);
}

/* 赛博紫 */
html[data-skin="violet"]:not([data-theme="light"]){
  --bg:#070512;
  --bg2:#0d0a1e;
  --panel:rgba(167,139,250,.055);
  --panel2:rgba(167,139,250,.09);
  --line:rgba(167,139,250,.17);
  --line2:rgba(167,139,250,.34);
  --cy:#a78bfa;
  --cy2:#c4b5fd;
  --vi:#f472b6;
  --am:#fbbf24;
  --gn:#4ade80;
  --rd:#fb7185;
  --tx:#efeaff;
  --mu:#9a8fbe;
  --mu2:#6f6690;
  --sh:0 18px 50px rgba(6,2,20,.7);
  --lxglass:rgba(9,6,24,.82);
  --lxsoft:rgba(167,139,250,.09);
}

/* 翡翠绿 */
html[data-skin="emerald"]:not([data-theme="light"]){
  --bg:#030d0a;
  --bg2:#06160f;
  --panel:rgba(52,211,153,.05);
  --panel2:rgba(52,211,153,.085);
  --line:rgba(52,211,153,.16);
  --line2:rgba(52,211,153,.32);
  --cy:#34d399;
  --cy2:#6ee7b7;
  --vi:#22d3ee;
  --am:#facc15;
  --gn:#86efac;
  --rd:#fb7185;
  --tx:#e6fbf2;
  --mu:#84a99a;
  --mu2:#5d7d70;
  --sh:0 18px 50px rgba(0,20,12,.7);
  --lxglass:rgba(4,14,10,.82);
  --lxsoft:rgba(52,211,153,.08);
}

/* 深海蓝 */
html[data-skin="ocean"]:not([data-theme="light"]){
  --bg:#020814;
  --bg2:#04101f;
  --panel:rgba(96,165,250,.05);
  --panel2:rgba(96,165,250,.085);
  --line:rgba(96,165,250,.16);
  --line2:rgba(96,165,250,.32);
  --cy:#60a5fa;
  --cy2:#93c5fd;
  --vi:#818cf8;
  --am:#fbbf24;
  --gn:#34d399;
  --rd:#f87171;
  --tx:#e5efff;
  --mu:#88a1c4;
  --mu2:#5f7595;
  --sh:0 18px 50px rgba(0,12,32,.72);
  --lxglass:rgba(3,12,26,.82);
  --lxsoft:rgba(96,165,250,.08);
}

/* 赤焰红 */
html[data-skin="rose"]:not([data-theme="light"]){
  --bg:#0d0406;
  --bg2:#180709;
  --panel:rgba(251,113,133,.05);
  --panel2:rgba(251,113,133,.085);
  --line:rgba(251,113,133,.17);
  --line2:rgba(251,113,133,.34);
  --cy:#fb7185;
  --cy2:#fda4af;
  --vi:#e879f9;
  --am:#fbbf24;
  --gn:#34d399;
  --rd:#ef4444;
  --tx:#ffeef0;
  --mu:#b58a90;
  --mu2:#8a6569;
  --sh:0 18px 50px rgba(30,0,8,.72);
  --lxglass:rgba(18,4,8,.82);
  --lxsoft:rgba(251,113,133,.08);
}

/* 默认青（cyber）：不覆盖，直接用 style.css 里的 :root */

/* 浅色模式：盖掉所有皮肤（放最后，同名同权重后加载生效） */
html[data-theme="light"]{
  --bg:#f4f7fc;
  --bg2:#ffffff;
  --panel:rgba(10,25,55,.035);
  --panel2:rgba(255,255,255,.85);
  --line:rgba(20,60,120,.13);
  --line2:rgba(20,60,120,.26);
  --cy:#0e8fbf;
  --cy2:#22a3d4;
  --vi:#7c5cf6;
  --am:#c98a10;
  --gn:#12905f;
  --rd:#e0405f;
  --tx:#0d1a2b;
  --mu:#4c5c74;
  --mu2:#7b8aa1;
  --sh:0 16px 40px rgba(20,50,100,.12);
  --lxglass:rgba(255,255,255,.86);
  --lxsoft:rgba(10,25,55,.045);
}

/* --------------------------------------------------- 2. 皮肤专属氛围层 */

/* 背景光晕：每套皮肤一个主色，别抢内容 */
body.lx-body::before{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  content:"";
  background:
    radial-gradient(900px 520px at 12% -8%, color-mix(in srgb, var(--cy) 16%, transparent), transparent 62%),
    radial-gradient(760px 480px at 92% 4%, color-mix(in srgb, var(--vi) 13%, transparent), transparent 60%);
  opacity:.85;
  transition:opacity .3s;
}
html[data-theme="light"] body.lx-body::before{opacity:.35}

/* ------------------------------------------------------- 3. 广告位样式 */

.lx-ads{margin:0}
.lx-ads .wrap{display:flex;flex-wrap:wrap;gap:12px}
.lx-ads-top{padding:10px 0 2px}
.lx-ads-header{padding:8px 0}
.lx-ads-tool_top{padding:14px 0 2px}
.lx-ads-foot{padding:26px 0 4px}
.lx-ads-side{padding:0 0 16px}

.lx-ad{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:12px;
  flex:1 1 320px;
  min-height:52px;
  padding:12px 16px;
  border-radius:var(--r,14px);
  border:1px solid var(--line2);
  background:linear-gradient(135deg,var(--panel2),var(--panel));
  color:var(--tx);
  text-decoration:none;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.lx-ad:hover{
  transform:translateY(-2px);
  border-color:var(--cy);
  box-shadow:0 12px 30px -12px color-mix(in srgb, var(--cy) 55%, transparent);
  text-decoration:none;
}
.lx-ad-ic{
  display:grid;
  place-items:center;
  width:34px;height:34px;
  flex:0 0 34px;
  border-radius:10px;
  color:var(--cy);
  background:color-mix(in srgb, var(--cy) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--cy) 26%, transparent);
}
.lx-ad-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.lx-ad-tx b{font-size:14px;font-weight:700;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lx-ad-tx i{font-style:normal;font-size:12px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lx-ad-go{margin-left:auto;color:var(--cy);opacity:.7;display:flex}
.lx-ad-img{padding:0;min-height:0}
.lx-ad-img img{display:block;width:100%;height:auto;border-radius:inherit}
.lx-ad-html{display:block;flex:1 1 100%;padding:0;border:0;background:none;min-height:0}

/* --------------------------------------------------------- 4. 美化层 */

/* 标题渐变描线（不改变字重排版，只加颜色层次） */
.lx-body h1,
.lx-body .sec-h,
.lx-body .card-h{
  background:linear-gradient(94deg,var(--tx) 8%,var(--cy) 92%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
html[data-theme="light"] .lx-body h1,
html[data-theme="light"] .lx-body .sec-h,
html[data-theme="light"] .lx-body .card-h{
  background:linear-gradient(94deg,#0d1a2b 10%,var(--cy) 95%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* 卡片 hover 提升（只动 transform / 边框，不改尺寸，避免抖动） */
.lx-body .card,
.lx-body .tool-card,
.lx-body .res-card,
.lx-body .ft-card{
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.lx-body .card:hover,
.lx-body .tool-card:hover,
.lx-body .res-card:hover,
.lx-body .ft-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--cy) 42%, transparent);
  box-shadow:0 14px 34px -18px color-mix(in srgb, var(--cy) 65%, transparent);
}

/* 主按钮一点光晕 */
.lx-body .btn.cy,
.lx-body .btn:not(.ghost):hover{
  box-shadow:0 10px 24px -14px color-mix(in srgb, var(--cy) 80%, transparent);
}

/* 顶部状态条轻描边 */
.lx-body .topbar{
  border-bottom:1px solid color-mix(in srgb, var(--cy) 14%, transparent);
}

/* 滚动条 */
.lx-body ::-webkit-scrollbar{width:9px;height:9px}
.lx-body ::-webkit-scrollbar-track{background:transparent}
.lx-body ::-webkit-scrollbar-thumb{
  border-radius:9px;
  background:color-mix(in srgb, var(--cy) 34%, transparent);
}
.lx-body ::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb, var(--cy) 55%, transparent);
}

/* 移动端：广告位不占屏幕 */
@media (max-width:720px){
  .lx-ad{flex:1 1 100%;min-height:46px;padding:11px 13px}
  .lx-ad-tx b{font-size:13px}
  .lx-ad-tx i{font-size:11px}
  .lx-ads-top{padding:8px 0 0}
}

/* 减少动效偏好 */
@media (prefers-reduced-motion:reduce){
  .lx-ad,.lx-body .card,.lx-body .tool-card,.lx-body .res-card,.lx-body .ft-card{transition:none}
  .lx-ad:hover,.lx-body .card:hover,.lx-body .tool-card:hover{transform:none}
}

/* 老浏览器不支持 color-mix 时兜底成半透明主色 */
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  .lx-ad{background:var(--panel2);border-color:var(--line2)}
  .lx-ad-ic{background:var(--panel2)}
  body.lx-body::before{opacity:.5}
}