/* ==========================================================================
   TorchEdge Hub - Ultra Premium Glassmorphic Theme & Aesthetic Overhaul
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* 全局字体与平滑渲染 */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body, html, #app {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    background-color: #080c14 !important;
}

/* 优雅暗黑细滚动条 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.5);
}

/* 顶部数字时钟 - 科技霓虹辉光 */
.clock-text {
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    color: #ffffff !important;
    text-shadow: 0 0 25px rgba(99, 102, 241, 0.6), 0 4px 16px rgba(0, 0, 0, 0.8) !important;
    font-variant-numeric: tabular-nums;
}

/* 胶囊搜索框 - 晶莹毛玻璃与悬浮呼吸灯效果 */
.search-box-input, .search-box-box, [data-v-e0871148] input {
    border-radius: 9999px !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.search-box-input:focus, .search-box-input:focus-within, [data-v-e0871148] input:focus {
    border-color: rgba(99, 102, 241, 0.7) !important;
    box-shadow: 0 12px 35px -5px rgba(0, 0, 0, 0.5), 0 0 30px rgba(99, 102, 241, 0.45) !important;
    background: rgba(15, 23, 42, 0.85) !important;
}

/* 分组标题胶囊徽章（Gradient Pill Header） */
.item-list > div:first-child span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(6, 182, 212, 0.15) 100%) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    padding: 6px 18px !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(129, 140, 248, 0.3) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

/* 核心服务卡片 - 顶级多层磨砂毛玻璃（Double-Layer Frosted Glass） */
.item-card-info, .item-card-small-icon {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(24px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    transition: all 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative;
    overflow: hidden;
}

/* 卡片内部背景微妙光束 */
.item-card-info::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent) !important;
    transform: skewX(-20deg) !important;
    transition: 0.6s ease !important;
    pointer-events: none !important;
}

/* 鼠标悬停动效 - 极速上浮与炫彩霓虹光晕 */
.item-card-info:hover, .item-card-small-icon:hover {
    transform: translateY(-6px) scale(1.02) !important;
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.18) 0%, rgba(6, 182, 212, 0.08) 100%), rgba(15, 23, 42, 0.8) !important;
    border-color: rgba(129, 140, 248, 0.6) !important;
    border-top-color: rgba(165, 180, 252, 0.8) !important;
    box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.6), 0 0 28px rgba(99, 102, 241, 0.38) !important;
}

.item-card-info:hover::before {
    left: 140% !important;
}

/* 卡片图标立体浮雕化 */
.item-card-info img, .item-card-small-icon img {
    border-radius: 12px !important;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.item-card-info:hover img, .item-card-small-icon:hover img {
    transform: scale(1.1) rotate(2deg) !important;
}

/* 卡片主标题与副标题排版 */
.item-card-info .title, .item-card-info span.font-semibold {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 15.5px !important;
    letter-spacing: 0.3px !important;
}

.item-card-info .description, .item-card-info p {
    color: rgba(226, 232, 240, 0.72) !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
}

/* 系统状态监控面板（CPU/内存/磁盘）毛玻璃卡片 */
#item-card-box > div:first-child {
    border-radius: 18px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%), rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
    padding: 16px 22px !important;
}

/* 浮动操作按钮 - 极客悬浮磁吸 */
.float-btn {
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    background: rgba(30, 41, 59, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.25s ease !important;
}
.float-btn:hover {
    transform: scale(1.12) translateY(-2px) !important;
    border-color: rgba(99, 102, 241, 0.6) !important;
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.5) !important;
}

/* ==========================================================================
   登录页面全面重构与美化（Login Page Aesthetic Overhaul）
   ========================================================================== */

/* 登录卡片高透磨砂流光 */
.login-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.88) 100%) !important;
    backdrop-filter: blur(28px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.7), 0 0 35px rgba(99, 102, 241, 0.25) !important;
    padding: 36px 32px !important;
    transition: all 0.3s ease !important;
}

/* 登录标题 - 炫光渐变白紫 */
.login-title, .login-card h2, .login-card .text-2xl {
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #818cf8 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

/* 输入框深邃水晶玻璃化 */
.login-card .n-input, .login-card input {
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    transition: all 0.25s ease !important;
}

.login-card .n-input:focus-within {
    border-color: rgba(99, 102, 241, 0.7) !important;
    box-shadow: 0 0 18px rgba(99, 102, 241, 0.35) !important;
    background: rgba(15, 23, 42, 0.85) !important;
}

/* 登录按钮 - 科技渐变光感按钮 */
.login-button, .login-card button.n-button--primary-type {
    background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    height: 42px !important;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45) !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    letter-spacing: 0.5px !important;
}

.login-button:hover, .login-card button.n-button--primary-type:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 10px 28px rgba(99, 102, 241, 0.6), 0 0 20px rgba(6, 182, 212, 0.4) !important;
}

/* 底部标语与版权 */
.custom-footer, .copyright {
    letter-spacing: 0.6px !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}