/* ===== 皮肤系统 skins.css ===== */
/* 前台主题变量：通过 html[data-skin] 覆盖 :root 变量 */

html[data-skin="default"] {
  --primary:#7c4dff; --primary-2:#f06292; --accent:#ffeb9d;
  --grad:linear-gradient(135deg,#667eea 0%,#764ba2 45%,#f093fb 100%);
  --grad-soft:linear-gradient(135deg,rgba(102,126,234,.10),rgba(240,147,251,.12));
  --bg:#f5f6fb; --card:rgba(255,255,255,.92);
  --text:#2d3436; --text-2:#636e72; --border:rgba(236,239,245,.9);
  --shadow:0 10px 34px rgba(108,77,255,.10); --shadow-hover:0 18px 44px rgba(240,98,146,.18);
}
html[data-skin="peach"] {
  --primary:#ff5e7a; --primary-2:#ffb199; --accent:#ffe0a3;
  --grad:linear-gradient(135deg,#ff9a8b 0%,#ff5e7a 50%,#ff2e63 100%);
  --grad-soft:linear-gradient(135deg,rgba(255,154,139,.12),rgba(255,46,99,.12));
  --bg:#fdf3f5; --card:rgba(255,255,255,.94);
  --text:#3a2e33; --text-2:#8a6f78; --border:rgba(255,220,228,.85);
  --shadow:0 10px 34px rgba(255,94,122,.12); --shadow-hover:0 18px 44px rgba(255,46,99,.20);
}
html[data-skin="ocean"] {
  --primary:#2f80ed; --primary-2:#56ccf2; --accent:#b3ecff;
  --grad:linear-gradient(135deg,#56ccf2 0%,#2f80ed 55%,#155799 100%);
  --grad-soft:linear-gradient(135deg,rgba(86,204,242,.12),rgba(47,128,237,.12));
  --bg:#f0f6fc; --card:rgba(255,255,255,.94);
  --text:#25313d; --text-2:#5f7486; --border:rgba(214,231,245,.9);
  --shadow:0 10px 34px rgba(47,128,237,.12); --shadow-hover:0 18px 44px rgba(21,87,153,.20);
}
html[data-skin="mint"] {
  --primary:#00b894; --primary-2:#55efc4; --accent:#d5f5e3;
  --grad:linear-gradient(135deg,#43e97b 0%,#38f9d7 55%,#00b894 100%);
  --grad-soft:linear-gradient(135deg,rgba(67,233,123,.12),rgba(0,184,148,.12));
  --bg:#f0faf5; --card:rgba(255,255,255,.94);
  --text:#23352c; --text-2:#5f7d6c; --border:rgba(210,238,224,.9);
  --shadow:0 10px 34px rgba(0,184,148,.12); --shadow-hover:0 18px 44px rgba(0,150,120,.20);
}
html[data-skin="sunset"] {
  --primary:#f97316; --primary-2:#fbbf24; --accent:#fff3cd;
  --grad:linear-gradient(135deg,#f6d365 0%,#fda085 50%,#f97316 100%);
  --grad-soft:linear-gradient(135deg,rgba(246,211,101,.14),rgba(249,115,22,.12));
  --bg:#fdf6ee; --card:rgba(255,255,255,.94);
  --text:#3b3126; --text-2:#8a7260; --border:rgba(245,226,205,.9);
  --shadow:0 10px 34px rgba(249,115,22,.12); --shadow-hover:0 18px 44px rgba(200,90,0,.20);
}
html[data-skin="dark"] {
  --primary:#a78bfa; --primary-2:#f472b6; --accent:#fde68a;
  --grad:linear-gradient(135deg,#243b55 0%,#433a7a 50%,#7b2ff7 100%);
  --grad-soft:linear-gradient(135deg,rgba(167,139,250,.12),rgba(244,114,182,.12));
  --bg:#141426; --card:rgba(28,28,54,.92);
  --text:#e8e8f0; --text-2:#9d9db8; --border:rgba(255,255,255,.08);
  --shadow:0 10px 34px rgba(0,0,0,.35); --shadow-hover:0 18px 44px rgba(0,0,0,.45);
}

/* 海报皮肤变量 */
html[data-skin="default"] {
  --poster-grad:linear-gradient(135deg,#ff6b9d 0%,#c44569 100%);
  --poster-color:#c44569; --poster-badge-bg:#fff0f3;
  --poster-school-bg:#f0f4ff; --poster-school-color:#4a6cf7;
  --poster-footer-bg:#fafafa; --poster-footer-color:#aaa;
}
html[data-skin="peach"] {
  --poster-grad:linear-gradient(135deg,#ff9a8b 0%,#ff5e7a 50%,#ff2e63 100%);
  --poster-color:#ff2e63; --poster-badge-bg:#fff0f3;
  --poster-school-bg:#f0f4ff; --poster-school-color:#4a6cf7;
  --poster-footer-bg:#fdf3f5; --poster-footer-color:#b08a95;
}
html[data-skin="ocean"] {
  --poster-grad:linear-gradient(135deg,#56ccf2 0%,#2f80ed 60%,#155799 100%);
  --poster-color:#2f80ed; --poster-badge-bg:#eef5ff;
  --poster-school-bg:#f0f4ff; --poster-school-color:#4a6cf7;
  --poster-footer-bg:#f0f6fc; --poster-footer-color:#8aa2b8;
}
html[data-skin="mint"] {
  --poster-grad:linear-gradient(135deg,#43e97b 0%,#38f9d7 55%,#00b894 100%);
  --poster-color:#00b894; --poster-badge-bg:#eafaf4;
  --poster-school-bg:#eef8ff; --poster-school-color:#3b82f6;
  --poster-footer-bg:#f0faf5; --poster-footer-color:#8ab3a2;
}
html[data-skin="sunset"] {
  --poster-grad:linear-gradient(135deg,#f6d365 0%,#fda085 50%,#f97316 100%);
  --poster-color:#ea580c; --poster-badge-bg:#fff4ec;
  --poster-school-bg:#f0f4ff; --poster-school-color:#4a6cf7;
  --poster-footer-bg:#fdf6ee; --poster-footer-color:#b0957e;
}
html[data-skin="dark"] {
  --poster-grad:linear-gradient(135deg,#243b55 0%,#433a7a 50%,#7b2ff7 100%);
  --poster-color:#c4b5fd; --poster-badge-bg:rgba(167,139,250,.14);
  --poster-school-bg:rgba(94,130,255,.14); --poster-school-color:#93c5fd;
  --poster-footer-bg:#17172b; --poster-footer-color:#8b8ba8;
}

/* 选中态阴影跟随皮肤 */
html[data-skin="peach"] .tab.active, html[data-skin="peach"] .act.on { box-shadow:0 4px 14px rgba(255,46,99,.28); }
html[data-skin="ocean"] .tab.active, html[data-skin="ocean"] .act.on { box-shadow:0 4px 14px rgba(47,128,237,.28); }
html[data-skin="mint"] .tab.active, html[data-skin="mint"] .act.on { box-shadow:0 4px 14px rgba(0,184,148,.28); }
html[data-skin="sunset"] .tab.active, html[data-skin="sunset"] .act.on { box-shadow:0 4px 14px rgba(249,115,22,.28); }
html[data-skin="dark"] .tab.active, html[data-skin="dark"] .act.on { box-shadow:0 4px 14px rgba(0,0,0,.35); }

/* ===== 皮肤切换器 UI ===== */
.skin-switcher{position:fixed;right:18px;bottom:90px;z-index:9998;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;}
.skin-fab{width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  background:var(--grad);color:#fff;font-size:20px;box-shadow:0 6px 18px rgba(0,0,0,.22);
  display:flex;align-items:center;justify-content:center;transition:transform .2s;}
.skin-fab:active{transform:scale(.92);}
.skin-panel{position:absolute;right:0;bottom:56px;background:#fff;border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.16);padding:16px;width:210px;display:none;border:1px solid #f0f0f0;}
.skin-panel.open{display:block;}
.skin-panel-title{font-size:13px;font-weight:600;color:#333;margin-bottom:12px;text-align:center;}
.skin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.skin-opt{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;padding:4px 0;border-radius:10px;}
.skin-opt:hover{background:#f7f7fa;}
.skin-dot{width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px #e0e0e6;}
.skin-opt.active .skin-dot{box-shadow:0 0 0 2.5px #333;}
.skin-opt span{font-size:11px;color:#666;}
html[data-skin="dark"] .skin-panel{background:#232342;border-color:rgba(255,255,255,.1);}
html[data-skin="dark"] .skin-panel-title{color:#e8e8f0;}
html[data-skin="dark"] .skin-opt span{color:#a0a0b8;}
html[data-skin="dark"] .skin-opt:hover{background:rgba(255,255,255,.06);}