/* HUB 组件级皮肤扩展：保留原四套，新增五套材质与控件形态完全不同的皮肤。 */
.skin-tray {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}
.skin-picker-toggle { min-height:30px; padding:4px 9px; gap:5px; border-radius:7px; background:rgba(255,255,255,.08); color:#eef3f7; border-color:rgba(255,255,255,.2); box-shadow:none; }
.skin-picker-toggle:hover,.skin-picker-toggle[aria-expanded="true"] { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.38); }
.skin-picker-icon { width:14px; height:14px; border-radius:50%; background:conic-gradient(#45f3ce,#745dff,#ff72d2,#ffdd00,#45f3ce); box-shadow:inset 0 0 0 2px rgba(255,255,255,.45); }
.skin-picker-caret { font-size:12px; transition:transform .16s ease; }
.skin-picker-toggle[aria-expanded="true"] .skin-picker-caret { transform:rotate(180deg); }
.skin-picker-menu { position:absolute; z-index:420; top:calc(100% + 5px); right:0; width:166px; padding:5px; display:grid; grid-template-columns:1fr 1fr; gap:3px; border:1px solid var(--border,#d7dce2); border-radius:8px; background:var(--card-solid,#fff); box-shadow:0 12px 30px rgba(0,0,0,.25); }
.skin-picker-menu[hidden] { display:none; }
.skin-chip {
    --chip-a: #667eea;
    --chip-b: #fff;
    width:100%;
    min-height:22px;
    justify-content:flex-start;
    padding:2px 5px;
    border:1px solid var(--border,#d7dce2);
    border-radius:5px;
    background:var(--card,#fff);
    color:var(--text,#333);
    box-shadow: none;
    font-size:10.5px;
    line-height:1;
}
.skin-chip:hover { color:var(--text,#333); border-color:var(--chip-a); background:var(--accent-soft,rgba(102,126,234,.1)); transform:none; }
.skin-chip.on { color:var(--text,#333); border-color:var(--chip-a); box-shadow:inset 3px 0 var(--chip-a); }
.skin-chip-swatch { width:11px; height:11px; flex:0 0 11px; border-radius:50%; background:linear-gradient(135deg,var(--chip-a),var(--chip-b)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); }
.skin-atelier { --chip-a:#8a4b2a; --chip-b:#e2c39f; }
.skin-obsidian { --chip-a:#c6a15b; --chip-b:#171b24; }
.skin-porcelain { --chip-a:#245783; --chip-b:#f8fbff; }
.skin-ink { --chip-a:#365a48; --chip-b:#e9dec4; }
.skin-aurora { --chip-a:#45f3ce; --chip-b:#745dff; }
.skin-cyber { --chip-a:#ffdd00; --chip-b:#ff2abf; }
.skin-nebula { --chip-a:#ff72d2; --chip-b:#6848ff; }
.skin-crystal { --chip-a:#3ed6ff; --chip-b:#eefcff; }
.skin-hologram { --chip-a:#00ffd5; --chip-b:#ff62dc; }
.login-skin-tray { position:absolute; top:12px; right:12px; z-index:5; }
.login-skin-tray .skin-picker-menu { right:0; }

html[data-skin="aurora"],html[data-skin="cyber"],html[data-skin="nebula"],html[data-skin="crystal"],html[data-skin="hologram"] {
    --btn-h:28px; --btn-px:10px; --btn-py:4px; --btn-fs:12px; --input-h:32px; --input-fs:13px;
}

/* 极光：柔性玻璃、胶囊控件、流动高光。 */
html[data-skin="aurora"] {
    --bg:#071b28; --card:rgba(12,39,54,.72); --card-solid:#0d3141; --text:#eafffb;
    --muted:#8fc5c4; --accent:#45f3ce; --accent-hover:#6bffe1; --accent-soft:rgba(69,243,206,.14);
    --ok:#62f5a9; --ok-soft:rgba(98,245,169,.14); --danger:#ff6f91; --danger-soft:rgba(255,111,145,.14);
    --border:rgba(110,240,225,.22); --border-strong:rgba(110,240,225,.46); --input:rgba(3,25,38,.72); --input-focus:rgba(14,52,65,.9);
    --radius:18px; --radius-lg:26px; --modal-radius:28px; --hairline:1px solid var(--border);
    --page-pattern:radial-gradient(circle at 15% 8%,rgba(69,243,206,.18),transparent 36%),radial-gradient(circle at 88% 18%,rgba(116,93,255,.2),transparent 38%),linear-gradient(145deg,#061521,#0a2431 55%,#071921);
    --zone-head-bg:linear-gradient(100deg,rgba(69,243,206,.1),rgba(116,93,255,.12));
    --elev-1:0 16px 50px rgba(0,5,12,.35),inset 0 1px rgba(255,255,255,.12);
}
html[data-skin="aurora"] body,html[data-skin="aurora"] .wrap { background:var(--page-pattern); color:var(--text); }
html[data-skin="aurora"] .zone,html[data-skin="aurora"] .login-box,html[data-skin="aurora"] .modal { backdrop-filter:blur(18px) saturate(135%); border:var(--hairline); background:var(--card); }
html[data-skin="aurora"] button,html[data-skin="aurora"] .btn { border-radius:999px; background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04)); color:var(--text); }
html[data-skin="aurora"] button.primary,html[data-skin="aurora"] .btn.primary { color:#03261f; background:linear-gradient(90deg,#45f3ce,#6ffff0); box-shadow:0 0 22px rgba(69,243,206,.25); }
html[data-skin="aurora"] input,html[data-skin="aurora"] select,html[data-skin="aurora"] textarea { border-radius:16px; border-color:var(--border); background:var(--input); color:var(--text); }
html[data-skin="aurora"] label,html[data-skin="aurora"] .field-label { color:#6fffe7; text-transform:uppercase; letter-spacing:.1em; }

/* 赛博：切角、粗线、扫描纹与硬朗列表。 */
html[data-skin="cyber"] {
    --bg:#090a12; --card:#11131e; --card-solid:#171a28; --text:#f5f7ff; --muted:#9da4bd;
    --accent:#ffdd00; --accent-hover:#fff06a; --accent-soft:rgba(255,221,0,.12); --ok:#00f5b8; --ok-soft:rgba(0,245,184,.12);
    --danger:#ff386b; --danger-soft:rgba(255,56,107,.14); --border:#31374d; --border-strong:#ffdd00; --input:#090b14; --input-focus:#161a29;
    --radius:0; --radius-lg:0; --modal-radius:0; --hairline:1px solid var(--border);
    --page-pattern:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.015) 3px 4px),linear-gradient(135deg,#080910,#121525);
    --zone-head-bg:linear-gradient(90deg,rgba(255,221,0,.12),transparent 55%); --elev-1:8px 8px 0 rgba(255,42,191,.11);
}
html[data-skin="cyber"] body,html[data-skin="cyber"] .wrap { background:var(--page-pattern); color:var(--text); }
html[data-skin="cyber"] .zone,html[data-skin="cyber"] .login-box,html[data-skin="cyber"] .modal { clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px)); border:1px solid var(--border); background:var(--card); }
html[data-skin="cyber"] button,html[data-skin="cyber"] .btn { border-radius:0; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); text-transform:uppercase; letter-spacing:.06em; background:#1a1d2b; color:var(--text); }
html[data-skin="cyber"] button.primary,html[data-skin="cyber"] .btn.primary { color:#111; background:var(--accent); box-shadow:4px 4px 0 #ff2abf; }
html[data-skin="cyber"] input,html[data-skin="cyber"] select,html[data-skin="cyber"] textarea { border-width:0 0 2px; border-radius:0; background:var(--input); color:var(--text); }
html[data-skin="cyber"] label,html[data-skin="cyber"] .field-label { color:var(--accent); font-family:var(--mono); }
html[data-skin="cyber"] table tr:nth-child(even) td { background:rgba(255,255,255,.025); }

/* 星云：深空渐变、悬浮圆卡、柔光控件。 */
html[data-skin="nebula"] {
    --bg:#120d29; --card:rgba(33,23,70,.82); --card-solid:#251b50; --text:#fff5ff; --muted:#b9a9d9;
    --accent:#ff72d2; --accent-hover:#ff9ee0; --accent-soft:rgba(255,114,210,.14); --ok:#7de7ff; --ok-soft:rgba(125,231,255,.13);
    --danger:#ff7189; --danger-soft:rgba(255,113,137,.14); --border:rgba(190,153,255,.2); --border-strong:rgba(255,114,210,.54); --input:rgba(12,8,34,.75); --input-focus:#2d215c;
    --radius:12px; --radius-lg:34px; --modal-radius:34px; --hairline:1px solid var(--border);
    --page-pattern:radial-gradient(circle at 75% 8%,rgba(255,114,210,.22),transparent 28%),radial-gradient(circle at 18% 75%,rgba(104,72,255,.3),transparent 38%),linear-gradient(150deg,#100b25,#201448);
    --zone-head-bg:transparent; --elev-1:0 24px 60px rgba(5,1,20,.42),inset 0 0 30px rgba(147,104,255,.06);
}
html[data-skin="nebula"] body,html[data-skin="nebula"] .wrap { background:var(--page-pattern); color:var(--text); }
html[data-skin="nebula"] .zone,html[data-skin="nebula"] .login-box,html[data-skin="nebula"] .modal { border:var(--hairline); background:var(--card); backdrop-filter:blur(14px); }
html[data-skin="nebula"] .zone-head { border-bottom:0; padding-bottom:6px; }
html[data-skin="nebula"] button,html[data-skin="nebula"] .btn { border-radius:14px; background:linear-gradient(145deg,#302461,#1c153e); color:var(--text); box-shadow:inset 0 1px rgba(255,255,255,.08); }
html[data-skin="nebula"] button.primary,html[data-skin="nebula"] .btn.primary { background:linear-gradient(135deg,#ff72d2,#6848ff); border:0; box-shadow:0 8px 24px rgba(167,76,255,.35); }
html[data-skin="nebula"] input,html[data-skin="nebula"] select,html[data-skin="nebula"] textarea { border-radius:14px; background:var(--input); color:var(--text); box-shadow:inset 0 0 18px rgba(0,0,0,.2); }
html[data-skin="nebula"] label,html[data-skin="nebula"] .field-label { color:#d9b9ff; }

/* 晶体：亮玻璃、棱角卡、半透明表单。 */
html[data-skin="crystal"] {
    --bg:#dff7ff; --card:rgba(255,255,255,.55); --card-solid:rgba(250,255,255,.78); --text:#10354a; --muted:#52778a;
    --accent:#087da5; --accent-hover:#00698f; --accent-soft:rgba(0,167,220,.12); --ok:#008f79; --ok-soft:rgba(0,143,121,.1);
    --danger:#c73d6b; --danger-soft:rgba(199,61,107,.1); --border:rgba(255,255,255,.78); --border-strong:rgba(35,163,207,.48); --input:rgba(255,255,255,.52); --input-focus:rgba(255,255,255,.88);
    --radius:4px; --radius-lg:18px; --modal-radius:22px; --hairline:1px solid var(--border);
    --page-pattern:linear-gradient(120deg,rgba(255,255,255,.8),transparent 35%),radial-gradient(circle at 85% 15%,#b6e9ff,transparent 34%),linear-gradient(150deg,#dff9ff,#c7e8f7);
    --zone-head-bg:linear-gradient(120deg,rgba(255,255,255,.55),rgba(163,228,248,.24)); --elev-1:0 18px 45px rgba(45,121,151,.16),inset 0 1px rgba(255,255,255,.9);
}
html[data-skin="crystal"] body,html[data-skin="crystal"] .wrap { background:var(--page-pattern); color:var(--text); }
html[data-skin="crystal"] .zone,html[data-skin="crystal"] .login-box,html[data-skin="crystal"] .modal { border:1px solid rgba(255,255,255,.9); background:var(--card); backdrop-filter:blur(18px) saturate(125%); }
html[data-skin="crystal"] button,html[data-skin="crystal"] .btn { border-radius:4px 14px 4px 14px; background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(198,238,250,.55)); color:var(--text); }
html[data-skin="crystal"] button.primary,html[data-skin="crystal"] .btn.primary { background:linear-gradient(135deg,#3ed6ff,#087da5); box-shadow:0 8px 20px rgba(8,125,165,.22); }
html[data-skin="crystal"] input,html[data-skin="crystal"] select,html[data-skin="crystal"] textarea { border-radius:4px 12px 4px 12px; border-color:var(--border-strong); background:var(--input); color:var(--text); }
html[data-skin="crystal"] label,html[data-skin="crystal"] .field-label { color:#087da5; font-weight:600; }

/* 全息：透明网格、双色描边、响应式闪光。 */
html[data-skin="hologram"] {
    --bg:#06121a; --card:rgba(5,28,38,.68); --card-solid:#092631; --text:#eaffff; --muted:#8ab9c2;
    --accent:#00ffd5; --accent-hover:#7affea; --accent-soft:rgba(0,255,213,.11); --ok:#75ff9d; --ok-soft:rgba(117,255,157,.11);
    --danger:#ff62a5; --danger-soft:rgba(255,98,165,.13); --border:rgba(0,255,213,.22); --border-strong:#00ffd5; --input:rgba(0,10,18,.72); --input-focus:rgba(6,42,52,.9);
    --radius:8px; --radius-lg:14px; --modal-radius:14px; --hairline:1px solid var(--border);
    --page-pattern:linear-gradient(rgba(0,255,213,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,213,.035) 1px,transparent 1px),radial-gradient(circle at 50% -10%,rgba(255,98,220,.18),transparent 42%),#06121a;
    --zone-head-bg:linear-gradient(90deg,rgba(0,255,213,.08),rgba(255,98,220,.07)); --elev-1:0 0 24px rgba(0,255,213,.1),inset 0 0 22px rgba(0,255,213,.035);
}
html[data-skin="hologram"] body,html[data-skin="hologram"] .wrap { background-color:var(--bg); background-image:var(--page-pattern); background-size:28px 28px,28px 28px,auto,auto; color:var(--text); }
html[data-skin="hologram"] .zone,html[data-skin="hologram"] .login-box,html[data-skin="hologram"] .modal { position:relative; border:1px solid var(--border); background:var(--card); backdrop-filter:blur(10px); }
html[data-skin="hologram"] .zone::before { content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; background:linear-gradient(110deg,#00ffd5,transparent 24%,transparent 72%,#ff62dc); opacity:.45; padding:1px; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; }
html[data-skin="hologram"] button,html[data-skin="hologram"] .btn { border-radius:8px; border-color:#00a990; background:rgba(0,255,213,.05); color:#bafff3; text-shadow:0 0 9px rgba(0,255,213,.5); }
html[data-skin="hologram"] button.primary,html[data-skin="hologram"] .btn.primary { background:linear-gradient(90deg,rgba(0,255,213,.25),rgba(255,98,220,.22)); border-color:#00ffd5; box-shadow:inset 0 0 18px rgba(0,255,213,.15),0 0 14px rgba(0,255,213,.16); }
html[data-skin="hologram"] input,html[data-skin="hologram"] select,html[data-skin="hologram"] textarea { border-radius:8px; border-color:rgba(0,255,213,.38); background:var(--input); color:var(--text); box-shadow:inset 3px 0 #ff62dc; }
html[data-skin="hologram"] label,html[data-skin="hologram"] .field-label { color:#00ffd5; font-family:var(--mono); }

/* 五套新皮肤统一修正顶部、列表与弹层，覆盖旧基准硬编码色。 */
html[data-skin="aurora"] header.top,html[data-skin="cyber"] header.top,html[data-skin="nebula"] header.top,html[data-skin="crystal"] header.top,html[data-skin="hologram"] header.top,
html[data-skin="aurora"] .modal-hd,html[data-skin="cyber"] .modal-hd,html[data-skin="nebula"] .modal-hd,html[data-skin="crystal"] .modal-hd,html[data-skin="hologram"] .modal-hd,
html[data-skin="aurora"] .modal-ft,html[data-skin="cyber"] .modal-ft,html[data-skin="nebula"] .modal-ft,html[data-skin="crystal"] .modal-ft,html[data-skin="hologram"] .modal-ft { background:var(--card); color:var(--text); border-color:var(--border); }
html[data-skin="aurora"] header.top h1,html[data-skin="cyber"] header.top h1,html[data-skin="nebula"] header.top h1,html[data-skin="crystal"] header.top h1,html[data-skin="hologram"] header.top h1,
html[data-skin="aurora"] .zone-head h2,html[data-skin="cyber"] .zone-head h2,html[data-skin="nebula"] .zone-head h2,html[data-skin="crystal"] .zone-head h2,html[data-skin="hologram"] .zone-head h2 { color:var(--text); }
html[data-skin="aurora"] table,html[data-skin="cyber"] table,html[data-skin="nebula"] table,html[data-skin="crystal"] table,html[data-skin="hologram"] table,
html[data-skin="aurora"] table.ov,html[data-skin="cyber"] table.ov,html[data-skin="nebula"] table.ov,html[data-skin="crystal"] table.ov,html[data-skin="hologram"] table.ov { background:var(--card); color:var(--text); }
html[data-skin="aurora"] table th,html[data-skin="cyber"] table th,html[data-skin="nebula"] table th,html[data-skin="crystal"] table th,html[data-skin="hologram"] table th { background:var(--accent-soft)!important; color:var(--text)!important; border-color:var(--border); }
html[data-skin="aurora"] table td,html[data-skin="cyber"] table td,html[data-skin="nebula"] table td,html[data-skin="crystal"] table td,html[data-skin="hologram"] table td { border-color:var(--border); }
html[data-skin="aurora"] table tr:hover td,html[data-skin="cyber"] table tr:hover td,html[data-skin="nebula"] table tr:hover td,html[data-skin="crystal"] table tr:hover td,html[data-skin="hologram"] table tr:hover td { background:var(--accent-soft)!important; }
html[data-skin="aurora"] .admin-menu-bar,html[data-skin="cyber"] .admin-menu-bar,html[data-skin="nebula"] .admin-menu-bar,html[data-skin="hologram"] .admin-menu-bar { background:rgba(5,18,28,.94); border-color:var(--border); }
html[data-skin="crystal"] .admin-menu-bar { background:rgba(20,62,78,.92); border-color:rgba(255,255,255,.35); }
html[data-skin="aurora"] .admin-menu-primary-btn.on,html[data-skin="cyber"] .admin-menu-primary-btn.on,html[data-skin="nebula"] .admin-menu-primary-btn.on,html[data-skin="crystal"] .admin-menu-primary-btn.on,html[data-skin="hologram"] .admin-menu-primary-btn.on { background:var(--accent); color:#07141a; }
@media (prefers-reduced-motion:no-preference) {
    html[data-skin="aurora"] .zone:hover,html[data-skin="nebula"] .zone:hover,html[data-skin="crystal"] .zone:hover { transform:translateY(-2px); transition:transform .22s ease,box-shadow .22s ease; }
    html[data-skin="hologram"] button:hover { box-shadow:0 0 18px rgba(0,255,213,.3); }
}