/* =========================================================
   小涵互联 · 工具页深色皮肤 skin.css
   · 把 app/pages/*.html 原始 mdui 浅色界面统一到 theme.css 的深色 token
   · 与登录页 / 资源中心 / 后台视觉保持一致
   · 仅在 <html> 带 mdui-theme-layout-dark 时生效
   · v2~v7：布局归零、横向溢出治理、旧顶栏隐藏、统一外壳
   · v9：Tailwind 落地页渐变 Hero 深色化
   ========================================================= */
.mdui-theme-layout-dark body,
body.mdui-theme-layout-dark {
    background: var(--xh-bg) !important;
    color: var(--xh-text-2) !important;
    font-family: var(--xh-font) !important;
    -webkit-font-smoothing: antialiased;
}

.mdui-theme-layout-dark {
    background: var(--xh-bg);
}

html.mdui-theme-layout-dark {
    background: var(--xh-bg) !important;
}
.mdui-theme-layout-dark body,
body.mdui-theme-layout-dark {
    background: transparent !important;
}
.mdui-theme-layout-dark body::before,
body.mdui-theme-layout-dark::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(900px 480px at 12% -8%, rgba(79, 140, 255, .18), transparent 62%),
        radial-gradient(760px 420px at 92% 4%, rgba(122, 92, 255, .16), transparent 60%);
}

.mdui-theme-layout-dark .mdui-appbar,
.mdui-theme-layout-dark .mdui-toolbar,
.mdui-theme-layout-dark .mdui-appbar .mdui-toolbar {
    background: var(--xh-side) !important;
    color: var(--xh-text) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--xh-line) !important;
    box-shadow: 0 8px 24px rgba(var(--xh-k), var(--xh-k), var(--xh-k), .38) !important;
}
.mdui-theme-layout-dark .mdui-toolbar > * { color: var(--xh-text) !important; }
.mdui-theme-layout-dark .mdui-btn,
.mdui-theme-layout-dark .mdui-btn-icon { color: var(--xh-text-2) !important; }
.mdui-theme-layout-dark .mdui-btn:hover { background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .07) !important; }

.mdui-theme-layout-dark .mdui-card,
.mdui-theme-layout-dark .mdui-panel,
.mdui-theme-layout-dark .mdui-panel-item,
.mdui-theme-layout-dark .mdui-collapse-item-body {
    background: var(--xh-panel) !important;
    color: var(--xh-text-2) !important;
    border: 1px solid var(--xh-line) !important;
    border-radius: var(--xh-radius) !important;
    box-shadow: var(--xh-shadow-sm) !important;
}
.mdui-theme-layout-dark .mdui-panel-item-header {
    color: var(--xh-text) !important;
    background: transparent !important;
}
.mdui-theme-layout-dark .mdui-panel-item-body { background: transparent !important; }

.mdui-theme-layout-dark .mdui-list {
    background: transparent !important;
}
.mdui-theme-layout-dark .mdui-list-item,
.mdui-theme-layout-dark .mdui-list-item-content,
.mdui-theme-layout-dark .mdui-list-item-title {
    color: var(--xh-text-2) !important;
}
.mdui-theme-layout-dark .mdui-list-item {
    border-radius: var(--xh-radius-sm);
    transition: background .16s var(--xh-ease), color .16s var(--xh-ease);
}
.mdui-theme-layout-dark .mdui-list-item:hover {
    background: rgba(79, 140, 255, .10) !important;
}
.mdui-theme-layout-dark .mdui-list-item:active,
.mdui-theme-layout-dark .mdui-list-item.mdui-list-item-active {
    background: rgba(79, 140, 255, .16) !important;
}
.mdui-theme-layout-dark .mdui-list-item-icon { color: var(--xh-primary) !important; }
.mdui-theme-layout-dark .mdui-icon { color: inherit !important; }
.mdui-theme-layout-dark .mdui-appbar .mdui-icon,
.mdui-theme-layout-dark .mdui-toolbar .mdui-icon { color: var(--xh-text) !important; }
.mdui-theme-layout-dark .mdui-list-item-text,
.mdui-theme-layout-dark .mdui-text-color-black-secondary { color: var(--xh-muted) !important; }

.mdui-theme-layout-dark .mdui-divider,
.mdui-theme-layout-dark .mdui-divider-inset {
    background-color: var(--xh-line) !important;
}

.mdui-theme-layout-dark .mdui-dialog,
.mdui-theme-layout-dark .mdui-dialog-content {
    background: var(--xh-panel-2) !important;
    color: var(--xh-text-2) !important;
    border-radius: var(--xh-radius-lg) !important;
    box-shadow: var(--xh-shadow-lg) !important;
}
.mdui-theme-layout-dark .mdui-dialog-title {
    color: var(--xh-text) !important;
    border-bottom: 1px solid var(--xh-line);
}
.mdui-theme-layout-dark .mdui-dialog-actions { border-top: 1px solid var(--xh-line); }
.mdui-theme-layout-dark .mdui-drawer {
    background: var(--xh-panel-2) !important;
    color: var(--xh-text-2) !important;
    border-right: 1px solid var(--xh-line);
    backdrop-filter: blur(14px);
}
.mdui-theme-layout-dark .mdui-overlay { background: rgba(3, 6, 14, .68) !important; }

.mdui-theme-layout-dark .mdui-textfield-input,
.mdui-theme-layout-dark .mdui-textfield-label,
.mdui-theme-layout-dark input,
.mdui-theme-layout-dark textarea,
.mdui-theme-layout-dark select {
    color: var(--xh-text) !important;
    caret-color: var(--xh-primary);
}
.mdui-theme-layout-dark .mdui-textfield-input {
    border-bottom: 1px solid var(--xh-line-strong) !important;
}
.mdui-theme-layout-dark .mdui-textfield-input:focus {
    border-bottom-color: var(--xh-primary) !important;
}
.mdui-theme-layout-dark .mdui-textfield-label { color: var(--xh-muted) !important; }
.mdui-theme-layout-dark .mdui-textfield-helper,
.mdui-theme-layout-dark .mdui-textfield-error { color: var(--xh-danger) !important; }
.mdui-theme-layout-dark .mdui-textfield:not(.mdui-textfield-not-empty) input::placeholder {
    color: var(--xh-faint) !important;
}

.mdui-theme-layout-dark .mdui-radio .mdui-radio-icon,
.mdui-theme-layout-dark .mdui-checkbox .mdui-checkbox-icon {
    border-color: var(--xh-line-strong) !important;
    color: var(--xh-primary) !important;
}
.mdui-theme-layout-dark .mdui-radio input:checked + .mdui-radio-icon,
.mdui-theme-layout-dark .mdui-checkbox input:checked + .mdui-checkbox-icon {
    border-color: var(--xh-primary) !important;
    background-color: var(--xh-primary) !important;
    color: #fff !important;
}

.mdui-theme-layout-dark .mdui-btn-raised,
.mdui-theme-layout-dark .mdui-fab {
    background: var(--xh-primary-grad) !important;
    color: #fff !important;
    border-radius: var(--xh-radius-pill) !important;
    box-shadow: 0 10px 24px rgba(60, 110, 220, .34) !important;
}
.mdui-theme-layout-dark .mdui-chip,
.mdui-theme-layout-dark .mdui-card-primary-subtitle {
    color: var(--xh-muted) !important;
}
.mdui-theme-layout-dark .mdui-tab a {
    color: var(--xh-muted) !important;
}
.mdui-theme-layout-dark .mdui-tab a.mdui-tab-active {
    color: var(--xh-primary) !important;
}
.mdui-theme-layout-dark .mdui-tab-indicator { background-color: var(--xh-primary) !important; }

.mdui-theme-layout-dark .radius {
    border-radius: var(--xh-radius) !important;
    overflow: hidden;
}

.mdui-theme-layout-dark .mdui-color-theme-50,
.mdui-theme-layout-dark .mdui-color-grey-50,
.mdui-theme-layout-dark .mdui-color-white {
    background-color: var(--xh-panel) !important;
    color: var(--xh-text-2) !important;
}

.mdui-theme-layout-dark h1,
.mdui-theme-layout-dark h2,
.mdui-theme-layout-dark h3,
.mdui-theme-layout-dark h4,
.mdui-theme-layout-dark h5,
.mdui-theme-layout-dark h6,
.mdui-theme-layout-dark .mdui-typo-title {
    color: var(--xh-text) !important;
}
.mdui-theme-layout-dark p,
.mdui-theme-layout-dark span,
.mdui-theme-layout-dark a {
    color: inherit;
}
.mdui-theme-layout-dark a:not(.xh-nav-link):not(.xh-nav-brand):not(.xh-btn):not(.xh-dock-btn):not(.xh-nav-ico) { color: var(--xh-primary); }

.mdui-theme-layout-dark [style*="color: black"],
.mdui-theme-layout-dark [style*="color:#000"],
.mdui-theme-layout-dark [style*="color: #000"] { color: var(--xh-text-2) !important; }
.mdui-theme-layout-dark [style*="background:#e6ffe6"],
.mdui-theme-layout-dark [style*="background: #e6ffe6"] { background: rgba(61, 220, 151, .14) !important; }
.mdui-theme-layout-dark [style*="background:#ffe6e6"],
.mdui-theme-layout-dark [style*="background: #ffe6e6"] { background: rgba(255, 107, 129, .14) !important; }

.mdui-theme-layout-dark ::-webkit-scrollbar { width: 10px; height: 10px; }
.mdui-theme-layout-dark ::-webkit-scrollbar-track { background: transparent; }
.mdui-theme-layout-dark ::-webkit-scrollbar-thumb {
    background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .14);
    border-radius: var(--xh-radius-pill);
}
.mdui-theme-layout-dark ::-webkit-scrollbar-thumb:hover { background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .24); }

.mdui-theme-layout-dark body:not(.mdui-theme-layout-dark) { background: var(--xh-bg) !important; }

.mdui-theme-layout-dark .mdui-card-primary-title,
.mdui-theme-layout-dark .mdui-card-title {
    color: var(--xh-text) !important;
    font-weight: 600;
}
.mdui-theme-layout-dark .mdui-card-primary-subtitle,
.mdui-theme-layout-dark .mdui-card-secondary-text,
.mdui-theme-layout-dark .mdui-card-content { color: var(--xh-text-2) !important; }

.mdui-theme-layout-dark .auto-dark {
    background-color: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .03) !important;
    color: var(--xh-text-2) !important;
}

.mdui-theme-layout-dark footer,
.mdui-theme-layout-dark .footerlink,
.mdui-theme-layout-dark .mdui-typo-caption,
.mdui-theme-layout-dark .mdui-typo-caption-opacity {
    background: transparent !important;
    color: var(--xh-muted) !important;
    font-size: 13px !important;
    line-height: 1.9;
}
.mdui-theme-layout-dark footer { border-top: 1px solid var(--xh-line); margin-top: 26px; padding: 18px 0; }
.mdui-theme-layout-dark footer p,
.mdui-theme-layout-dark footer span { color: var(--xh-muted) !important; font-size: 13px !important; }
.mdui-theme-layout-dark footer a { color: var(--xh-primary) !important; }

.mdui-theme-layout-dark * { text-shadow: none !important; }

.mdui-theme-layout-dark header {
    background: var(--xh-side) !important;
    color: var(--xh-text) !important;
    border-bottom: 1px solid var(--xh-line) !important;
    box-shadow: 0 8px 22px rgba(var(--xh-k), var(--xh-k), var(--xh-k), .38) !important;
    backdrop-filter: blur(14px);
}
.mdui-theme-layout-dark header .title,
.mdui-theme-layout-dark header p,
.mdui-theme-layout-dark header h1,
.mdui-theme-layout-dark header h2 { color: var(--xh-text) !important; }

.mdui-theme-layout-dark .card {
    background: var(--xh-panel) !important;
    border: 1px solid var(--xh-line) !important;
    border-radius: var(--xh-radius) !important;
    box-shadow: var(--xh-shadow-sm) !important;
    color: var(--xh-text-2) !important;
}
.mdui-theme-layout-dark .card-title {
    color: var(--xh-text) !important;
    background: transparent !important;
}
.mdui-theme-layout-dark .card-content {
    background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .03) !important;
    border-radius: 0 0 var(--xh-radius) var(--xh-radius) !important;
    color: var(--xh-text-2) !important;
}
.mdui-theme-layout-dark .card-content p { color: var(--xh-text-2) !important; }

.mdui-theme-layout-dark .button {
    background: var(--xh-primary-grad) !important;
    color: #fff !important;
    border-radius: var(--xh-radius-sm) !important;
    box-shadow: 0 8px 20px rgba(60, 110, 220, .32) !important;
}
.mdui-theme-layout-dark .button:active { background: var(--xh-primary-2) !important; }

.mdui-theme-layout-dark footer {
    background: var(--xh-side) !important;
    border-top: 1px solid var(--xh-line) !important;
    color: var(--xh-muted) !important;
}
.mdui-theme-layout-dark footer p { color: var(--xh-muted) !important; }

html.mdui-theme-layout-dark,
html {
    margin: 0 !important;
    padding: 0 !important;
}

body.xh-has-nav,
body.xh-has-nav.mdui-theme-layout-dark {
    margin: 0 !important;
    padding-top: 62px !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    overflow-x: hidden !important;
}

body.xh-has-nav .sign {
    max-width: 100vw !important;
    box-sizing: border-box;
}

body.xh-has-nav .card {
    border-radius: var(--xh-radius) !important;
    border: 1px solid var(--xh-line) !important;
    box-shadow: var(--xh-shadow) !important;
    background: var(--xh-panel) !important;
    color: var(--xh-text-2) !important;
}

body.xh-has-nav h1 { font-size: 24px; line-height: 1.35; }
body.xh-has-nav h2 { font-size: 19px; line-height: 1.4; }
body.xh-has-nav h3 { font-size: 16px; line-height: 1.45; }

body.xh-has-nav .mdui-btn {
    height: 36px !important;
    line-height: 36px !important;
    border-radius: var(--xh-radius-sm) !important;
    text-transform: none !important;
}

@media (max-width: 760px) {
    body.xh-has-nav h1 { font-size: 20px; }
}

html.xh-shell {
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.xh-immersive {
    padding-top: 62px !important;
}

body.xh-immersive > .xh-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 62px !important;
    max-height: 62px !important;
    align-self: auto !important;
    flex: none !important;
    order: 0 !important;
    z-index: 950 !important;
}

body.xh-immersive > .xh-page-head,
body.xh-immersive > .xh-foot { display: none !important; }

html.xh-shell,
html.xh-shell body.xh-has-nav {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

body.xh-has-nav .sign {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.xh-has-nav > header:not(.xh-page-head):not(.xh-nav):not(:has(h1)),
body.xh-has-nav > .mdui-appbar,
body.xh-has-nav > nav:not(.xh-nav),
body.xh-has-nav > .navbar:not(.xh-nav) {
    display: none !important;
}

body.xh-has-nav > header + .mdui-container,
body.xh-has-nav > .mdui-appbar + .mdui-container {
    margin-top: 0 !important;
}

body.xh-has-nav > br,
body.xh-has-nav > br + br {
    display: none !important;
}

body.xh-has-nav.xh-immersive {
    background: var(--xh-bg) !important;
    color: var(--xh-text) !important;
}

body.xh-has-nav .bg-light,
body.xh-has-nav .bg-gray-50,
body.xh-has-nav .bg-gray-100 {
    background: var(--xh-bg) !important;
}

body.xh-has-nav .bg-white {
    background: var(--xh-panel) !important;
}

body.xh-has-nav > .xh-nav.xh-nav-fixed,
body.xh-has-nav > .xh-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 62px !important;
    max-height: 62px !important;
    min-height: 62px !important;
    z-index: 950 !important;
    flex: none !important;
    align-self: auto !important;
    order: 0 !important;
}

body.xh-has-nav {
    padding-top: 62px !important;
}

body.xh-has-nav > .xh-nav .xh-nav-inner {
    height: 62px !important;
}

body.xh-has-nav .bg-white\/90,
body.xh-has-nav .bg-white\/80 {
    background: rgba(18, 22, 28, 0.92) !important;
}

body.xh-has-nav .text-dark,
body.xh-has-nav[class*="text-dark"],
body.xh-has-nav [class*="text-gray-9"],
body.xh-has-nav [class*="text-gray-8"],
body.xh-has-nav [class*="text-gray-7"] {
    color: var(--xh-text) !important;
}

body.xh-has-nav [class*="text-gray-6"],
body.xh-has-nav [class*="text-gray-5"] {
    color: var(--xh-text-2) !important;
}

body.xh-has-nav .shadow-sm,
body.xh-has-nav .shadow-md,
body.xh-has-nav .shadow-lg,
body.xh-has-nav .shadow-xl,
body.xh-has-nav .shadow-2xl {
    box-shadow: var(--xh-shadow) !important;
}

body.xh-has-nav .border,
body.xh-has-nav .border-t,
body.xh-has-nav .border-b,
body.xh-has-nav [class*="border-gray"] {
    border-color: var(--xh-line) !important;
}

body.xh-has-nav [class*="bg-gradient-to-b"],
body.xh-has-nav [class*="from-primary"],
body.xh-has-nav [class*="to-secondary"] {
    background-image: linear-gradient(135deg, rgba(70, 120, 235, .16), rgba(18, 26, 44, .72)) !important;
}
body.xh-has-nav .bg-light {
    background: var(--xh-bg) !important;
}

/* v9：Tailwind 落地页（installapp）Hero 渐变深色化
   from-primary/5 这类淡色渐变在深色主题下与浅色文字对比过低，首屏近乎空白 */
body.xh-has-nav [class*="bg-gradient-to-b"],
body.xh-has-nav [class*="from-primary"],
body.xh-has-nav [class*="to-secondary"] {
    background-image: linear-gradient(135deg, rgba(70, 120, 235, .16), rgba(18, 26, 44, .72)) !important;
}

body.xh-has-nav .bg-light {
    background: var(--xh-bg) !important;
}

/* v10：Tailwind 页面在深色皮肤下的文字色保护
   site-style.php 的 a:hover 会覆盖 text-white，导致蓝底按钮变蓝底蓝字，这里统一兜底 */
.mdui-theme-layout-dark .text-white,
.mdui-theme-layout-dark a.text-white,
.mdui-theme-layout-dark a.text-white:hover,
.mdui-theme-layout-dark a[class*="bg-primary"],
.mdui-theme-layout-dark a[class*="bg-primary"]:hover,
.mdui-theme-layout-dark button[class*="bg-primary"],
.mdui-theme-layout-dark button[class*="bg-primary"]:hover,
.mdui-theme-layout-dark .bg-primary,
.mdui-theme-layout-dark .bg-primary:hover { color: #fff !important; }

/* v11：彩色实心按钮统一白字（原站部分按钮用浅灰字压在彩色底上，对比度不足） */
.mdui-theme-layout-dark a[class*="bg-"]:not([class*="bg-light"]):not([class*="bg-white"]):not([class*="bg-gray"]):not([class*="bg-transparent"]),
.mdui-theme-layout-dark a[class*="bg-"]:not([class*="bg-light"]):not([class*="bg-white"]):not([class*="bg-gray"]):not([class*="bg-transparent"]):hover,
.mdui-theme-layout-dark button[class*="bg-"]:not([class*="bg-light"]):not([class*="bg-white"]):not([class*="bg-gray"]):not([class*="bg-transparent"]),
.mdui-theme-layout-dark .xh-btn-primary,
.mdui-theme-layout-dark .xh-btn-primary:hover { color: #fff !important; }

/* ============ v10：旧页（page.php?f=*.html）统一外壳背景与间距 ============ */
body.xh-page.xh-legacy{
    background: var(--xh-bg) !important;
    color: var(--xh-text) !important;
    min-height: 100vh;
}
body.xh-page.xh-legacy::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
    background:
        radial-gradient(1100px 520px at 12% -12%, rgba(79,140,255,.16), transparent 60%),
        radial-gradient(900px 460px at 92% -6%, rgba(122,92,255,.14), transparent 58%);
}
body.xh-legacy .xhm{background:transparent !important;padding-top:0 !important}
body.xh-legacy .xhm > .mdui-container,
body.xh-legacy .xhm > .container{max-width:1180px}
/* 旧页内联白底区块统一到面板色 */
body.xh-legacy [style*="background:#fff"],
body.xh-legacy [style*="background: #fff"],
body.xh-legacy [style*="background-color:#fff"]{background:var(--xh-panel) !important;color:var(--xh-text) !important}
/* 旧页表格/输入框跟随主题 */
body.xh-legacy input,body.xh-legacy textarea,body.xh-legacy select{
    background:var(--xh-panel) !important;color:var(--xh-text) !important;
    border:1px solid var(--xh-line) !important;border-radius:10px !important;
}