/* =========================================================
   小涵互联 · 全站统一设计系统（theme.css）
   所有页面（登录/注册、资源中心、后台、站点外壳）共享同一套 token
   ========================================================= */
/* hidden 必须强制隐藏：组件 .modal{display:flex} 会覆盖 UA 的 [hidden]{display:none} */
[hidden] { display: none !important; }

:root {
    /* 色彩 */
    --xh-bg: #070b16;
    --xh-bg-2: #0b1120;
    --xh-side: rgba(13, 19, 33, .94);
    --xh-panel: rgba(18, 26, 44, .84);
    --xh-panel-2: rgba(23, 33, 53, .92);
    --xh-line: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .09);
    --xh-line-strong: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .16);
    --xh-text: #eaf1ff;
    --xh-text-2: #c7d6f2;
    --xh-muted: #8fa2c2;
    --xh-faint: #5d6f8f;

    /* 主色（*-rgb 用于 rgba(var(--xh-primary-rgb), a) 半透明写法） */
    --xh-primary: #4f8cff;
    --xh-primary-rgb: 79, 140, 255;
    --xh-primary-2: #7a5cff;
    --xh-primary-2-rgb: 122, 92, 255;
    --xh-primary-soft: rgba(var(--xh-primary-rgb), .12);
    --xh-primary-grad: linear-gradient(120deg, var(--xh-primary), var(--xh-primary-2));
    --xh-ok: #3ddc97;
    --xh-warn: #ffb454;
    --xh-danger: #ff6b81;

    /* 形状与节奏 */
    --xh-radius-lg: 18px;
    --xh-radius: 14px;
    --xh-radius-sm: 10px;
    --xh-radius-pill: 999px;
    --xh-gap: 16px;
    --xh-pad: 20px;

    /* 阴影 */
    --xh-shadow-sm: 0 6px 18px rgba(var(--xh-k), var(--xh-k), var(--xh-k), .28);
    --xh-shadow: 0 18px 44px rgba(var(--xh-k), var(--xh-k), var(--xh-k), .42);
    --xh-shadow-lg: 0 30px 70px rgba(var(--xh-k), var(--xh-k), var(--xh-k), .5);
    --xh-ring: 0 0 0 4px rgba(var(--xh-primary-rgb), .14);

    /* 字体 */
    --xh-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
    --xh-mono: Consolas, "JetBrains Mono", "Courier New", monospace;

    /* 动效 */
    --xh-ease: cubic-bezier(.22, .8, .28, 1);

    /* ===== 主题切换补充 token（暗色为默认值） =====
       --xh-w / --xh-k 是全站叠加层与阴影的基色：
       暗色主题=白色叠加(255) + 纯黑阴影(0)
       亮色主题=墨色叠加(15)  + 墨色阴影(15)，同一套 rgba 写法自动反色 */
    --xh-w: 255;
    --xh-k: 0;
    --xh-input-bg: rgba(9, 14, 26, .78);
    --xh-toast-bg: rgba(22, 32, 52, .96);
    --xh-mask: rgba(3, 6, 13, .72);
    --xh-nav-bg: rgba(8, 12, 22, .82);
    --xh-nav-bg-2: rgba(6, 9, 18, .94);
    --xh-body-bg: #070b16;
    color-scheme: dark;
}

/* 统一滚动条 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .13); border-radius: var(--xh-radius-pill); }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .22); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------- 通用组件（前缀 xh-，不覆盖站点原有样式） ---------------- */
.xh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border: 1px solid var(--xh-line);
    border-radius: var(--xh-radius-sm);
    background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .05);
    color: var(--xh-text);
    font: 500 13.5px/1 var(--xh-font);
    cursor: pointer;
    text-decoration: none;
    transition: background .16s var(--xh-ease), border-color .16s var(--xh-ease), transform .16s var(--xh-ease);
}
.xh-btn:hover { background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .1); border-color: var(--xh-line-strong); }
.xh-btn:active { transform: translateY(1px); }

.xh-btn-primary {
    border: 0;
    background: var(--xh-primary-grad);
    box-shadow: 0 10px 26px rgba(var(--xh-primary-rgb), .3);
    color: #fff;
}
.xh-btn-primary:hover { filter: brightness(1.07); background: var(--xh-primary-grad); }

.xh-btn-ghost { background: transparent; color: var(--xh-text-2); }
.xh-btn-ghost:hover { color: #fff; background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .07); }

.xh-card {
    background: var(--xh-panel);
    border: 1px solid var(--xh-line);
    border-radius: var(--xh-radius-lg);
    box-shadow: var(--xh-shadow);
    backdrop-filter: blur(14px);
}

.xh-input,
.xh-select,
.xh-textarea {
    width: 100%;
    min-height: 40px;
    padding: 0 13px;
    border: 1px solid var(--xh-line);
    border-radius: var(--xh-radius-sm);
    background: var(--xh-input-bg);
    color: var(--xh-text);
    font: 400 13.5px/1.5 var(--xh-font);
    outline: 0;
    transition: border-color .16s var(--xh-ease), box-shadow .16s var(--xh-ease);
}
.xh-textarea { padding: 11px 13px; min-height: 96px; resize: vertical; }
.xh-input::placeholder, .xh-textarea::placeholder { color: var(--xh-faint); }
.xh-input:focus, .xh-select:focus, .xh-textarea:focus { border-color: rgba(var(--xh-primary-rgb), .7); box-shadow: var(--xh-ring); }

.xh-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: var(--xh-radius-pill);
    background: var(--xh-primary-soft);
    border: 1px solid rgba(var(--xh-primary-rgb), .3);
    color: #a9c8ff;
    font-size: 11.5px;
    letter-spacing: .3px;
}
.xh-badge-ok { background: rgba(61, 220, 151, .12); border-color: rgba(61, 220, 151, .32); color: #9ff0c9; }
.xh-badge-warn { background: rgba(255, 180, 84, .12); border-color: rgba(255, 180, 84, .32); color: #ffd7a1; }
.xh-badge-danger { background: rgba(255, 107, 129, .12); border-color: rgba(255, 107, 129, .34); color: #ffc2cb; }

.xh-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.xh-table th {
    text-align: left;
    font-weight: 500;
    color: var(--xh-muted);
    font-size: 12px;
    letter-spacing: .4px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--xh-line);
}
.xh-table td { padding: 11px 12px; border-bottom: 1px solid rgba(var(--xh-w), var(--xh-w), var(--xh-w), .05); }
.xh-table tbody tr:hover { background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .03); }

/* 统一提示条 */
.xh-toast {
    position: fixed;
    left: 50%;
    top: 26px;
    transform: translate(-50%, -14px);
    z-index: 10000;
    padding: 11px 18px;
    border-radius: var(--xh-radius-sm);
    background: var(--xh-toast-bg);
    border: 1px solid rgba(var(--xh-primary-rgb), .4);
    color: #e9f1ff;
    font: 400 13.5px var(--xh-font);
    box-shadow: var(--xh-shadow);
    opacity: 0;
    transition: opacity .25s var(--xh-ease), transform .25s var(--xh-ease);
    pointer-events: none;
}
.xh-toast.show { opacity: 1; transform: translate(-50%, 0); }
.xh-toast.error { border-color: rgba(255, 107, 129, .55); color: #ffdbe2; }

/* 统一弹层 */
.xh-modal-mask {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--xh-mask);
    backdrop-filter: blur(6px);
}
.xh-modal {
    width: 100%;
    max-width: 560px;
    max-height: 84vh;
    overflow: auto;
    background: var(--xh-panel-2);
    border: 1px solid var(--xh-line);
    border-radius: var(--xh-radius-lg);
    box-shadow: var(--xh-shadow-lg);
    padding: 24px;
}
.xh-modal h3 { margin: 0 0 6px; font-size: 17px; color: var(--xh-text); }
.xh-modal p.sub { margin: 0 0 18px; color: var(--xh-muted); font-size: 13px; }

/* =========================================================
   亮色主题（白天）：由 html[data-theme="light"] 激活
   ========================================================= */
html[data-theme="light"] {
    --xh-bg: #f4f7fc;
    --xh-bg-2: #eaf0f9;
    --xh-side: rgba(255, 255, 255, .92);
    --xh-panel: rgba(255, 255, 255, .88);
    --xh-panel-2: #ffffff;
    --xh-text: #0f172a;
    --xh-text-2: #33415c;
    --xh-muted: #64748b;
    --xh-faint: #94a3b8;

    --xh-w: 15;
    --xh-k: 15;
    --xh-line: rgba(15, 23, 42, .10);
    --xh-line-strong: rgba(15, 23, 42, .18);
    --xh-shadow-sm: 0 6px 18px rgba(15, 23, 42, .08);
    --xh-shadow: 0 16px 40px rgba(15, 23, 42, .10);
    --xh-shadow-lg: 0 26px 60px rgba(15, 23, 42, .14);

    --xh-input-bg: #ffffff;
    --xh-toast-bg: rgba(255, 255, 255, .97);
    --xh-mask: rgba(15, 23, 42, .42);
    --xh-nav-bg: rgba(255, 255, 255, .84);
    --xh-nav-bg-2: rgba(255, 255, 255, .96);
    --xh-body-bg: #f4f7fc;
    color-scheme: light;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .18); }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, .30); }

/* 头部 Logo：颜色与主题相反 */
html[data-theme="light"] .xh-nav-logo img,
html[data-theme="light"] .xh-brand-logo img {
    filter: invert(1) hue-rotate(180deg) saturate(1.15);
}
html[data-theme="light"] .xh-nav-logo { background: rgba(15, 23, 42, .05); }

html[data-theme="light"] .xh-btn { background: #fff; border-color: rgba(15, 23, 42, .12); color: var(--xh-text); }
html[data-theme="light"] .xh-btn:hover { background: #f1f5fb; border-color: rgba(15, 23, 42, .2); }
html[data-theme="light"] .xh-btn-primary { background: var(--xh-primary-grad); color: #fff; border: 0; }
html[data-theme="light"] .xh-btn-ghost { background: transparent; }
html[data-theme="light"] .xh-btn-ghost:hover { background: rgba(15, 23, 42, .06); color: var(--xh-text); }
html[data-theme="light"] .xh-badge { color: #2456b8; }
html[data-theme="light"] .xh-badge-ok { color: #0d7a4e; }
html[data-theme="light"] .xh-badge-warn { color: #9a5a00; }
html[data-theme="light"] .xh-badge-danger { color: #b21f36; }
html[data-theme="light"] .xh-table td { border-bottom-color: rgba(15, 23, 42, .06); }
html[data-theme="light"] .xh-toast { color: #16233a; }
html[data-theme="light"] .xh-modal { background: #fff; }