/* ==================================================================
 *  skins.css   凤凰机器人 · 学员数据看板 · 节日皮肤
 * ==================================================================
 *  用法：
 *    1. 页面 <head> 中引入：<link rel="stylesheet" href="skins.css">
 *    2. 页面 <body> 内加一层特效容器（不写也能用，只少飘雪）：
 *         <div class="skin-fx" aria-hidden="true"></div>
 *    3. JS 换肤：document.body.dataset.skin = 'skin键名'
 *        皮肤键名：default(默认) yuandan(元旦) chuntian(春天) qingming(清明节)
 *                 xiatian(夏季) duanwu(端午节) zhongyuan(中元节) zhongqiu(中秋节)
 *                 guoqing(国庆节) wansheng(万圣节) shengdan(圣诞节) xinnian(新年)
 *                 guoyujie(果玉杰冰雪限定版)
 *    说明：默认皮肤（不设置 data-skin 或为 default）与原始样式完全一致，
 *          不改变任何原始样式。
 * ================================================================== */

/* ---------- 特效容器（飘雪等），默认隐藏 ---------- */
.skin-fx{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
}
.skin-fx::before{
  content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  background-image:
    radial-gradient(2.2px 2.2px at 30px 50px, rgba(255,255,255,.9)),
    radial-gradient(1.8px 1.8px at 120px 30px, rgba(255,255,255,.7)),
    radial-gradient(2.6px 2.6px at 190px 100px, rgba(255,255,255,.8)),
    radial-gradient(1.6px 1.6px at 70px 150px, rgba(255,255,255,.65)),
    radial-gradient(2px 2px at 230px 60px, rgba(255,255,255,.75));
  background-size:260px 170px;
  background-repeat:repeat;
}

/* ==================================================================
 *  元旦：红金迎新
 * ================================================================== */
[data-skin="yuandan"]{
  --bg:#1a0b12; --bg2:#240f1a;
  --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.08);
  --line:rgba(251,191,36,.22);
  --cyan:#fbbf24; --blue:#f87171; --purple:#f59e0b; --green:#facc15;
  --amber:#fbbf24; --red:#ef4444;
  --txt:#fff7ed; --muted:#d6b29e;
  --grad:linear-gradient(135deg,#fbbf24 0%,#f87171 50%,#ef4444 100%);
  --topbar:rgba(26,11,18,.78);
  --glow1:rgba(251,191,36,.20); --glow2:rgba(248,113,113,.18); --glow3:rgba(239,68,68,.14);
}

/* ==================================================================
 *  春天：春意绿粉
 * ================================================================== */
[data-skin="chuntian"]{
  --bg:#081512; --bg2:#0c1f19;
  --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.08);
  --line:rgba(74,222,128,.22);
  --cyan:#4ade80; --blue:#38bdf8; --purple:#f472b6; --green:#4ade80;
  --amber:#facc15; --red:#fb7185;
  --txt:#ecfdf5; --muted:#9fb8ad;
  --grad:linear-gradient(135deg,#4ade80 0%,#38bdf8 50%,#f472b6 100%);
  --topbar:rgba(8,21,18,.78);
  --glow1:rgba(74,222,128,.20); --glow2:rgba(56,189,248,.16); --glow3:rgba(244,114,182,.14);
}

/* ==================================================================
 *  清明节：青灰柳绿 · 淡雅
 * ================================================================== */
[data-skin="qingming"]{
  --bg:#0d120f; --bg2:#111815;
  --panel:rgba(255,255,255,.045); --panel2:rgba(255,255,255,.07);
  --line:rgba(148,190,163,.22);
  --cyan:#86efac; --blue:#a7c4bc; --purple:#c0d6c8; --green:#86efac;
  --amber:#d9c9a3; --red:#e5a3a3;
  --txt:#eef4f0; --muted:#a8b8ae;
  --grad:linear-gradient(135deg,#86efac 0%,#a7c4bc 50%,#d9c9a3 100%);
  --topbar:rgba(13,18,15,.78);
  --glow1:rgba(134,239,172,.16); --glow2:rgba(167,196,188,.14); --glow3:rgba(217,201,163,.12);
}

/* ==================================================================
 *  夏季：晴空碧海
 * ================================================================== */
[data-skin="xiatian"]{
  --bg:#031224; --bg2:#051a38;
  --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.08);
  --line:rgba(56,189,248,.26);
  --cyan:#38bdf8; --blue:#3b82f6; --purple:#818cf8; --green:#4ade80;
  --amber:#fbbf24; --red:#f87171;
  --txt:#eef6ff; --muted:#8fb0d0;
  --grad:linear-gradient(135deg,#38bdf8 0%,#3b82f6 50%,#818cf8 100%);
  --topbar:rgba(3,18,36,.80);
  --glow1:rgba(56,189,248,.22); --glow2:rgba(59,130,246,.20); --glow3:rgba(129,140,248,.16);
}

/* ==================================================================
 *  端午节：粽叶青水
 * ================================================================== */
[data-skin="duanwu"]{
  --bg:#06130d; --bg2:#0a1d13;
  --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.08);
  --line:rgba(74,222,128,.22);
  --cyan:#34d399; --blue:#2dd4bf; --purple:#5eead4; --green:#4ade80;
  --amber:#fbbf24; --red:#f87171;
  --txt:#ecfdf5; --muted:#9ec4b0;
  --grad:linear-gradient(135deg,#34d399 0%,#2dd4bf 50%,#4ade80 100%);
  --topbar:rgba(6,19,13,.78);
  --glow1:rgba(52,211,153,.20); --glow2:rgba(45,212,191,.18); --glow3:rgba(74,222,128,.14);
}

/* ==================================================================
 *  中元节：幽紫灯火
 * ================================================================== */
[data-skin="zhongyuan"]{
  --bg:#120a1c; --bg2:#1a0f29;
  --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.08);
  --line:rgba(196,138,255,.22);
  --cyan:#c084fc; --blue:#a78bfa; --purple:#e879f9; --green:#6ee7b7;
  --amber:#fbbf24; --red:#f87171;
  --txt:#f5f0ff; --muted:#b8a6d6;
  --grad:linear-gradient(135deg,#c084fc 0%,#a78bfa 50%,#e879f9 100%);
  --topbar:rgba(18,10,28,.80);
  --glow1:rgba(192,132,252,.20); --glow2:rgba(167,139,250,.18); --glow3:rgba(232,121,249,.14);
}

/* ==================================================================
 *  中秋节：暖金明月
 * ================================================================== */
[data-skin="zhongqiu"]{
  --bg:#170e06; --bg2:#20150a;
  --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.08);
  --line:rgba(251,191,36,.24);
  --cyan:#fbbf24; --blue:#fb923c; --purple:#f59e0b; --green:#fde68a;
  --amber:#fbbf24; --red:#f87171;
  --txt:#fff7ed; --muted:#d8b48c;
  --grad:linear-gradient(135deg,#fbbf24 0%,#fb923c 50%,#f59e0b 100%);
  --topbar:rgba(23,14,6,.80);
  --glow1:rgba(251,191,36,.20); --glow2:rgba(251,146,60,.18); --glow3:rgba(245,158,11,.14);
}

/* ==================================================================
 *  国庆节：中国红金
 * ================================================================== */
[data-skin="guoqing"]{
  --bg:#1a0508; --bg2:#26080d;
  --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.08);
  --line:rgba(251,191,36,.22);
  --cyan:#fbbf24; --blue:#f87171; --purple:#ef4444; --green:#fde047;
  --amber:#fbbf24; --red:#ef4444;
  --txt:#fff7f7; --muted:#d6a9a0;
  --grad:linear-gradient(135deg,#fbbf24 0%,#f87171 50%,#ef4444 100%);
  --topbar:rgba(26,5,8,.80);
  --glow1:rgba(251,191,36,.22); --glow2:rgba(248,113,113,.20); --glow3:rgba(239,68,68,.16);
}

/* ==================================================================
 *  万圣节：南瓜橙紫
 * ================================================================== */
[data-skin="wansheng"]{
  --bg:#140a04; --bg2:#1d0f06;
  --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.08);
  --line:rgba(251,146,60,.22);
  --cyan:#fb923c; --blue:#a78bfa; --purple:#c084fc; --green:#4ade80;
  --amber:#fbbf24; --red:#f87171;
  --txt:#fff7ed; --muted:#c9a28a;
  --grad:linear-gradient(135deg,#fb923c 0%,#a78bfa 50%,#c084fc 100%);
  --topbar:rgba(20,10,4,.80);
  --glow1:rgba(251,146,60,.20); --glow2:rgba(167,139,250,.18); --glow3:rgba(192,132,252,.14);
}

/* ==================================================================
 *  圣诞节：圣诞红绿雪
 * ================================================================== */
[data-skin="shengdan"]{
  --bg:#07140d; --bg2:#0b1f13;
  --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.08);
  --line:rgba(248,113,113,.22);
  --cyan:#34d399; --blue:#60a5fa; --purple:#f87171; --green:#4ade80;
  --amber:#fbbf24; --red:#f87171;
  --txt:#f0fdf4; --muted:#a3bfae;
  --grad:linear-gradient(135deg,#f87171 0%,#4ade80 50%,#fbbf24 100%);
  --topbar:rgba(7,20,13,.80);
  --glow1:rgba(248,113,113,.20); --glow2:rgba(74,222,128,.18); --glow3:rgba(251,191,36,.14);
}

/* ==================================================================
 *  新年：新春红金烟花
 * ================================================================== */
[data-skin="xinnian"]{
  --bg:#18060a; --bg2:#220a12;
  --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.08);
  --line:rgba(250,204,21,.24);
  --cyan:#facc15; --blue:#f87171; --purple:#f59e0b; --green:#fde047;
  --amber:#fbbf24; --red:#ef4444;
  --txt:#fffbea; --muted:#d9b69a;
  --grad:linear-gradient(135deg,#facc15 0%,#f87171 50%,#f59e0b 100%);
  --topbar:rgba(24,6,10,.80);
  --glow1:rgba(250,204,21,.22); --glow2:rgba(248,113,113,.20); --glow3:rgba(245,158,11,.16);
}

/* ==================================================================
 *  果玉杰冰雪限定版：冰蓝银白
 * ================================================================== */
[data-skin="guoyujie"]{
  --bg:#071527; --bg2:#0b1e38;
  --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.08);
  --line:rgba(125,211,252,.24);
  --cyan:#7dd3fc; --blue:#60a5fa; --purple:#c4b5fd; --green:#a5f3fc;
  --amber:#fcd34d; --red:#fca5a5;
  --txt:#f0f9ff; --muted:#9db8cf;
  --grad:linear-gradient(135deg,#7dd3fc 0%,#60a5fa 50%,#c4b5fd 100%);
  --topbar:rgba(7,21,39,.82);
  --glow1:rgba(125,211,252,.22); --glow2:rgba(96,165,250,.20); --glow3:rgba(196,181,253,.16);
}

/* ---------- 飘雪特效：圣诞节 / 新年 / 果玉杰冰雪限定版 ---------- */
[data-skin="shengdan"] .skin-fx::before,
[data-skin="xinnian"] .skin-fx::before,
[data-skin="guoyujie"] .skin-fx::before{
  opacity:1;
  animation:driftY 7s linear infinite;
}
@keyframes driftY{
  from{background-position:0 0,0 0,0 0,0 0,0 0}
  to{background-position:0 170px,0 340px,0 510px,0 680px,0 850px}
}