/* =========================================================
   Haru 磁力 · 赛博科技皮肤（html[data-skin="cyber"]）
   霓虹青 + 洋红，网格地面、扫描线、切角面板、等宽字体。
   只覆盖变量和外观，不改结构；删掉 <html> 上的 data-skin 即回到旧外观。
   ========================================================= */
html[data-skin="cyber"] { --radius: 6px; --radius-sm: 4px; --cut: 14px; }
html[data-skin="cyber"][data-theme="dark"] {
  --bg: #05070d; --bg-2: #0a0e18;
  --panel: rgba(8, 13, 24, .8); --panel-solid: #0b1120;
  --raise: rgba(34, 211, 238, .05); --raise-2: rgba(34, 211, 238, .1);
  --line: rgba(34, 211, 238, .16); --line-2: rgba(34, 211, 238, .32);
  --text: #e6f6ff; --text-2: #8fb4c9; --text-3: #58768a;
  --shadow: 0 24px 50px -24px rgba(0, 0, 0, .9);
  --sakura: #ff3dce; --indigo: #22d3ee; --mint: #3cffb4; --amber: #ffc94a; --rose: #ff4d6d;
  --grad: linear-gradient(120deg, #22d3ee, #a855f7 55%, #ff3dce);
  --sakura-rgb: 255, 61, 206; --indigo-rgb: 34, 211, 238; --mint-rgb: 60, 255, 180;
  --amber-rgb: 255, 201, 74; --rose-rgb: 255, 77, 109;
  --bg-rgb: 5, 7, 13; --bg-2-rgb: 10, 14, 24; --panel-solid-rgb: 11, 17, 32;
  --aurora-op: .28;
}
html[data-skin="cyber"][data-theme="light"] {
  --bg: #eef4f9; --bg-2: #ffffff;
  --panel: rgba(255, 255, 255, .88); --panel-solid: #ffffff;
  --line: rgba(8, 120, 150, .2); --line-2: rgba(8, 120, 150, .36);
  --raise: rgba(8, 145, 178, .05); --raise-2: rgba(8, 145, 178, .1);
  --text: #0b1a26; --text-2: #3d5a6c; --text-3: #7a93a3;
  --sakura: #d1179f; --indigo: #0891b2; --mint: #059669;
  --grad: linear-gradient(120deg, #0891b2, #7c3aed 55%, #d1179f);
  --sakura-rgb: 209, 23, 159; --indigo-rgb: 8, 145, 178; --mint-rgb: 5, 150, 105;
  --bg-rgb: 238, 244, 249; --panel-solid-rgb: 255, 255, 255;
}

/* 背景：网格 + 扫描线 */
html[data-skin="cyber"] body {
  background:
    linear-gradient(rgba(var(--indigo-rgb), .055) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(var(--indigo-rgb), .055) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(ellipse at 75% -10%, rgba(var(--sakura-rgb), .13), transparent 55%),
    radial-gradient(ellipse at 10% 110%, rgba(var(--indigo-rgb), .13), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
.scanlines { display: none; }
html[data-skin="cyber"][data-theme="dark"] .scanlines {
  display: block; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
  opacity: .35;
}
html[data-skin="cyber"] .aurora i:nth-child(1) { background: #ff3dce; }
html[data-skin="cyber"] .aurora i:nth-child(2) { background: #22d3ee; }
html[data-skin="cyber"] .aurora i:nth-child(3) { background: #a855f7; }

/* 数据粒子：替代樱花，向上漂浮的青 / 洋红光线 */
html[data-skin="cyber"] .petals i {
  top: auto; bottom: -20px; width: 2px; height: 16px; border-radius: 2px;
  background: linear-gradient(to top, transparent, rgba(var(--indigo-rgb), .95));
  box-shadow: 0 0 8px rgba(var(--indigo-rgb), .8);
  animation: data-rise 14s linear infinite; opacity: .7;
}
html[data-skin="cyber"] .petals i:nth-child(3n) { background: linear-gradient(to top, transparent, rgba(var(--sakura-rgb), .95)); box-shadow: 0 0 8px rgba(var(--sakura-rgb), .8); }
html[data-skin="cyber"] .petals i:nth-child(9)  { left: 40%; animation-delay: -5s; }
html[data-skin="cyber"] .petals i:nth-child(10) { left: 55%; animation-delay: -11s; animation-duration: 18s; }
html[data-skin="cyber"] .petals i:nth-child(11) { left: 80%; animation-delay: -3s; }
html[data-skin="cyber"] .petals i:nth-child(12) { left: 12%; animation-delay: -9s; animation-duration: 20s; }
@keyframes data-rise { 0% { bottom: -20px; opacity: 0; } 10% { opacity: .85; } 90% { opacity: .6; } 100% { bottom: 105vh; opacity: 0; } }

/* 字体：标题、数字、标签用等宽 */
html[data-skin="cyber"] .topbar h1, html[data-skin="cyber"] .panel-hd h2, html[data-skin="cyber"] .brand strong,
html[data-skin="cyber"] .kpi .value, html[data-skin="cyber"] .hero-stats b, html[data-skin="cyber"] .tag,
html[data-skin="cyber"] .rank, html[data-skin="cyber"] .side-link, html[data-skin="cyber"] .tab,
html[data-skin="cyber"] .hot-tab, html[data-skin="cyber"] .chip { font-family: var(--mono); }
html[data-skin="cyber"] .topbar h1 { letter-spacing: 2px; text-shadow: 0 0 18px rgba(var(--indigo-rgb), .45); }
html[data-skin="cyber"] .topbar h1::before { content: "// "; color: var(--indigo); }
html[data-skin="cyber"] .topbar p { font-family: var(--mono); font-size: 12.5px; }
html[data-skin="cyber"] .panel-hd h2 { letter-spacing: 1.2px; font-size: 13.5px; }
html[data-skin="cyber"] .panel-hd h2::before { content: "▍"; color: var(--sakura); margin-right: 4px; }
html[data-skin="cyber"] .brand span { font-family: var(--mono); color: var(--indigo); letter-spacing: 1.4px; white-space: nowrap; }
html[data-skin="cyber"] .logo-img { border-radius: 0; filter: drop-shadow(0 0 10px rgba(var(--indigo-rgb), .55)); }

/* 切角面板 + 霓虹边 */
html[data-skin="cyber"] .panel {
  border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: inset 0 0 40px rgba(var(--indigo-rgb), .05);
}
html[data-skin="cyber"] .panel::before {
  left: 0; right: auto; top: 0; width: 140px; height: 2px; opacity: 1;
  background: linear-gradient(90deg, var(--indigo), transparent);
}
html[data-skin="cyber"] .panel::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 80px; height: 2px; pointer-events: none;
  background: linear-gradient(270deg, var(--sakura), transparent);
}
html[data-skin="cyber"] .panel-hd { background: linear-gradient(90deg, rgba(var(--indigo-rgb), .07), transparent 60%); }

/* 按钮：斜切 + 渐变 */
html[data-skin="cyber"] .btn {
  border-radius: 0; font-weight: 600; letter-spacing: .4px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
html[data-skin="cyber"] .btn.primary {
  background: linear-gradient(120deg, #0ea5c6, #a855f7 60%, #ff3dce); color: #fff; border-color: transparent;
  box-shadow: none; text-shadow: 0 0 6px rgba(255, 255, 255, .45);
}
html[data-skin="cyber"] .btn.primary:hover { filter: brightness(1.15); }
html[data-skin="cyber"] .btn.ghost { color: var(--indigo); }
html[data-skin="cyber"] .btn.ghost:hover { background: rgba(var(--indigo-rgb), .1); color: var(--text); }
html[data-skin="cyber"] .icon-btn, html[data-skin="cyber"] .chip, html[data-skin="cyber"] .src-toggle,
html[data-skin="cyber"] .tag, html[data-skin="cyber"] .stat, html[data-skin="cyber"] .src-pill,
html[data-skin="cyber"] .badge, html[data-skin="cyber"] .src-led { border-radius: 0; }
html[data-skin="cyber"] .chip { font-size: 12px; }
html[data-skin="cyber"] .tag { color: var(--indigo); background: rgba(var(--indigo-rgb), .1); border: 1px solid rgba(var(--indigo-rgb), .28); }

/* 输入框：终端感 */
html[data-skin="cyber"] textarea,
html[data-skin="cyber"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-skin="cyber"] select,
html[data-skin="cyber"] .search-box { border-radius: 0 !important; }
html[data-skin="cyber"] textarea, html[data-skin="cyber"] input { font-family: var(--mono); }
html[data-skin="cyber"] textarea:focus, html[data-skin="cyber"] input:focus {
  border-color: var(--indigo) !important; box-shadow: 0 0 0 1px var(--indigo), 0 0 18px rgba(var(--indigo-rgb), .25); outline: none;
}
html[data-skin="cyber"] .search-box:focus-within { box-shadow: 0 0 0 1px var(--indigo), 0 0 22px rgba(var(--indigo-rgb), .22); }

/* 侧边栏 / 导航 */
html[data-skin="cyber"] .sidebar { background: rgba(var(--bg-rgb), .85); }
html[data-skin="cyber"] .side-link { border-radius: 0; letter-spacing: .5px; }
html[data-skin="cyber"] .side-link.active {
  background: linear-gradient(90deg, rgba(var(--indigo-rgb), .2), transparent); color: var(--text);
  box-shadow: inset 2px 0 0 var(--indigo);
}
html[data-skin="cyber"] .side-link.active svg { color: var(--indigo); filter: drop-shadow(0 0 6px rgba(var(--indigo-rgb), .8)); }
html[data-skin="cyber"] .tabs, html[data-skin="cyber"] .hot-tabs, html[data-skin="cyber"] .tab, html[data-skin="cyber"] .hot-tab { border-radius: 0; }
html[data-skin="cyber"] .tab.active, html[data-skin="cyber"] .hot-tab.active { box-shadow: inset 0 -2px 0 var(--indigo); background: rgba(var(--indigo-rgb), .12); }
html[data-skin="cyber"] .mnav { border-radius: 0; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
html[data-skin="cyber"] .mnav-btn { border-radius: 0; font-family: var(--mono); }
html[data-skin="cyber"] .mnav-btn.active svg { color: var(--indigo); filter: drop-shadow(0 0 6px rgba(var(--indigo-rgb), .8)); }
html[data-skin="cyber"] .theme-btn { border-radius: 0; }

/* 列表 / 卡片 */
html[data-skin="cyber"] .hit-card:hover, html[data-skin="cyber"] .item-card:hover { background: linear-gradient(90deg, rgba(var(--indigo-rgb), .09), transparent 70%); }
html[data-skin="cyber"] .hit-card::before, html[data-skin="cyber"] .item-card::before { border-radius: 0; width: 2px; box-shadow: 0 0 10px var(--indigo); }
html[data-skin="cyber"] .rank { color: var(--indigo); }
html[data-skin="cyber"] .kpi { border-radius: 0; position: relative; }
html[data-skin="cyber"] .kpi::after { content: ""; position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; border-top: 2px solid var(--indigo); border-right: 2px solid var(--indigo); }
html[data-skin="cyber"] .kpi .value { color: var(--text); text-shadow: 0 0 10px rgba(var(--indigo-rgb), .4); }
html[data-skin="cyber"] .file-icon { border-radius: 0; color: var(--indigo); box-shadow: 0 0 20px rgba(var(--indigo-rgb), .25); }
html[data-skin="cyber"] .shot, html[data-skin="cyber"] .shot img, html[data-skin="cyber"] .drop,
html[data-skin="cyber"] #batchList, html[data-skin="cyber"] .raw { border-radius: 0; }
html[data-skin="cyber"] .filter-bar { border-radius: 0; background: rgba(var(--indigo-rgb), .03); }
html[data-skin="cyber"] .stat.seed { color: var(--mint); }

/* 看板娘提示：终端输出样式 */
html[data-skin="cyber"] .side-mascot img { width: 130px; filter: drop-shadow(0 0 16px rgba(var(--indigo-rgb), .35)); }
html[data-skin="cyber"] .side-mascot p {
  border-radius: 0; font-family: var(--mono); font-size: 11px; text-align: left;
  background: rgba(var(--indigo-rgb), .06); border-color: var(--line-2);
}
.mono-tag { display: block; color: var(--sakura); font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; margin-bottom: 2px; }
.mono-tag::before { content: "● "; color: var(--mint); }

/* 首页横幅：HUD 角标、故障字、终端提示符 */
html[data-skin="cyber"] .hero-banner {
  border-radius: 0; border: 1px solid rgba(var(--indigo-rgb), .35); color: #eafaff;
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  background:
    linear-gradient(90deg, rgba(4, 6, 14, .95) 0%, rgba(4, 6, 14, .78) 40%, rgba(4, 6, 14, .05) 75%),
    url("img/hero.webp?v=9") center / cover no-repeat;
  box-shadow: inset 0 0 60px rgba(34, 211, 238, .12);
}
html[data-skin="cyber"] .hero-banner::after {
  inset: 0; height: auto;
  background:
    linear-gradient(#22d3ee, #22d3ee) left 14px top 14px / 26px 2px no-repeat,
    linear-gradient(#22d3ee, #22d3ee) left 14px top 14px / 2px 26px no-repeat,
    linear-gradient(#ff3dce, #ff3dce) right 14px bottom 14px / 26px 2px no-repeat,
    linear-gradient(#ff3dce, #ff3dce) right 14px bottom 14px / 2px 26px no-repeat;
}
html[data-skin="cyber"] .hero-kicker {
  border-radius: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px;
  color: #3cffb4; background: rgba(60, 255, 180, .08); border-color: rgba(60, 255, 180, .35);
}
html[data-skin="cyber"] .hero-kicker::before { content: "▲ "; animation: blink 1.4s steps(2) infinite; }
html[data-skin="cyber"] .hero-copy h2 { font-family: var(--mono); font-size: 34px; letter-spacing: 1px; margin-top: 14px; }
html[data-skin="cyber"] .hero-copy h2 em {
  display: block; margin-top: 6px; font-family: var(--font); font-size: 22px; letter-spacing: 4px; font-weight: 700;
  background: linear-gradient(90deg, #67e8f9, #c084fc, #ff7ad9); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-skin="cyber"] .hero-copy p { font-family: var(--mono); font-size: 12.5px; color: #8fd8ea; }
.caret { animation: blink 1s steps(2) infinite; color: #ff3dce; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }
.glitch { position: relative; display: inline-block; color: #f0fbff; text-shadow: 0 0 14px rgba(34, 211, 238, .6); }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; opacity: 0; }
.glitch::before { color: #22d3ee; clip-path: inset(0 0 55% 0); animation: glitch-a 3.2s infinite steps(1); }
.glitch::after { color: #ff3dce; clip-path: inset(55% 0 0 0); animation: glitch-b 2.7s infinite steps(1); }
@keyframes glitch-a { 0%, 88%, 100% { transform: translate(0); opacity: 0; } 90% { transform: translate(-3px, -1px); opacity: .9; } 94% { transform: translate(2px, 1px); opacity: .9; } }
@keyframes glitch-b { 0%, 84%, 100% { transform: translate(0); opacity: 0; } 86% { transform: translate(3px, 1px); opacity: .9; } 92% { transform: translate(-2px, 0); opacity: .9; } }
.hero-search .prompt { display: none; }
html[data-skin="cyber"] .hero-search {
  border-radius: 0; align-items: center; background: rgba(4, 10, 20, .72); border-color: rgba(34, 211, 238, .45);
  box-shadow: 0 0 24px rgba(34, 211, 238, .15);
}
html[data-skin="cyber"] .hero-search .prompt { display: inline; font-family: var(--mono); color: #3cffb4; padding-left: 10px; font-weight: 700; }
html[data-skin="cyber"] .hero-search input { padding-left: 4px; border: 0 !important; box-shadow: none !important; background: transparent !important; color: #eafaff; }
html[data-skin="cyber"] .hero-stats div { padding-left: 10px; border-left: 2px solid rgba(34, 211, 238, .6); }
html[data-skin="cyber"] .hero-stats b { color: #f0fbff; text-shadow: 0 0 12px rgba(34, 211, 238, .7); }
html[data-skin="cyber"] .hero-stats span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .8px; color: rgba(143, 216, 234, .75); }
html[data-skin="cyber"] .hero-mascot { width: 330px; filter: drop-shadow(0 0 22px rgba(34, 211, 238, .35)); }
html[data-skin="cyber"] .chibi { filter: drop-shadow(0 0 18px rgba(var(--indigo-rgb), .3)); }

/* 加载 / 提示 */
html[data-skin="cyber"] .spinner { border-color: rgba(var(--indigo-rgb), .2); border-top-color: var(--indigo); box-shadow: 0 0 20px rgba(var(--indigo-rgb), .4); }
html[data-skin="cyber"] .bar, html[data-skin="cyber"] .bar i { border-radius: 0; }
html[data-skin="cyber"] .toast { border-radius: 0; font-family: var(--mono); border: 1px solid var(--indigo); box-shadow: 0 0 20px rgba(var(--indigo-rgb), .4); }

@media (max-width: 1180px) { html[data-skin="cyber"] .hero-mascot { width: 260px; } }
@media (max-width: 760px) {
  html[data-skin="cyber"] .hero-mascot { width: 170px; opacity: .5; }
  html[data-skin="cyber"] .hero-copy h2 { font-size: 26px; }
  html[data-skin="cyber"] .hero-copy h2 em { font-size: 17px; letter-spacing: 2px; }
  html[data-skin="cyber"][data-theme="dark"] .scanlines { opacity: .22; }
}
@media (prefers-reduced-motion: reduce) { .glitch::before, .glitch::after, .scanlines { display: none !important; } }
@media (max-width: 760px) {
  html[data-skin="cyber"] .hero-mascot { display: none; }
  html[data-skin="cyber"] .hero-banner { background-position: 70% center; }
  html[data-skin="cyber"] .hero-stats { gap: 12px; }
  html[data-skin="cyber"] .hero-stats span { font-size: 10px; letter-spacing: .3px; }
}