/* =======================================
   WebMoniter - NapCat 风格 UI
   ======================================= */

/* CSS 变量定义 - NapCat 粉紫 pastel 主题 */
:root {
    /* 主色调 - 粉色/洋红 */
    --primary-color: #ec4899;
    --primary-hover: #db2777;
    --primary-light: #f9a8d4;
    --primary-dark: #be185d;

    /* 渐变色 */
    --gradient-primary: linear-gradient(135deg, #f472b6 0%, #e879f9 100%);
    --gradient-page: linear-gradient(165deg, #fce7f3 0%, #f5d0fe 38%, #ede9fe 72%, #fdf2f8 100%);
    --gradient-sidebar: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 250, 252, 0.92) 100%);
    --gradient-card: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 251, 253, 0.9) 100%);

    /* 页面背景 */
    --bg-color: #fce7f3;
    --bg-card: rgba(255, 255, 255, 0.92);
    --text-primary: #3f3f46;
    --text-secondary: #71717a;
    --text-muted: #a1a1aa;
    --border-color: rgba(244, 114, 182, 0.18);
    --border-light: rgba(253, 242, 248, 0.8);

    /* 点缀色 */
    --accent-mint: rgba(236, 72, 153, 0.12);
    --accent-lavender: rgba(232, 121, 249, 0.12);
    --accent-sky: rgba(244, 114, 182, 0.1);

    /* 状态色 */
    --success-color: #22c55e;
    --success-bg: #f0fdf4;
    --warning-color: #eab308;
    --warning-bg: #fefce8;
    --error-color: #ef4444;
    --error-bg: #fef2f2;
    --info-color: #3b82f6;
    --info-bg: #eff6ff;

    /* 阴影 - 粉色调柔光 */
    --shadow-sm: 0 2px 8px rgba(236, 72, 153, 0.08);
    --shadow-md: 0 4px 20px rgba(236, 72, 153, 0.12);
    --shadow-lg: 0 8px 32px rgba(236, 72, 153, 0.14);
    --shadow-xl: 0 12px 40px rgba(236, 72, 153, 0.16);

    /* 圆角 - NapCat 大圆角 */
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;

    /* 过渡 */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* 布局 */
    --sidebar-width: 260px;
    --topbar-height: 40px;

    /* 玻璃拟态 */
    --glass-bg: rgba(255, 255, 255, 0.78);
    --glass-bg-hover: rgba(255, 255, 255, 0.95);
    --glass-bg-light: rgba(255, 255, 255, 0.55);
    --glass-bg-heavy: rgba(255, 255, 255, 0.9);

    --glass-border: rgba(255, 255, 255, 0.85);
    --glass-border-light: rgba(244, 114, 182, 0.12);
    --glass-border-hover: rgba(255, 255, 255, 1);

    --glow-primary: rgba(236, 72, 153, 0.15);
    --glow-secondary: rgba(232, 121, 249, 0.12);
    --glow-shadow: rgba(236, 72, 153, 0.08);
}

[data-theme="dark"] {
    --primary-color: #f472b6;
    --primary-hover: #ec4899;
    --primary-light: #f9a8d4;
    --primary-dark: #db2777;

    --gradient-primary: linear-gradient(135deg, #f472b6 0%, #c084fc 100%);
    --gradient-page: linear-gradient(165deg, #1a1025 0%, #2d1b3d 45%, #1f1530 100%);
    --gradient-sidebar: linear-gradient(180deg, rgba(35, 25, 48, 0.95) 0%, rgba(26, 16, 37, 0.98) 100%);
    --gradient-card: linear-gradient(145deg, rgba(45, 32, 58, 0.92) 0%, rgba(35, 25, 48, 0.88) 100%);

    --bg-color: #1a1025;
    --bg-card: rgba(45, 32, 58, 0.88);
    --text-primary: #fafafa;
    --text-secondary: #d4d4d8;
    --text-muted: #a1a1aa;
    --border-color: rgba(244, 114, 182, 0.2);
    --border-light: rgba(45, 32, 58, 0.6);

    --accent-mint: rgba(244, 114, 182, 0.15);
    --accent-lavender: rgba(192, 132, 252, 0.12);
    --accent-sky: rgba(244, 114, 182, 0.1);

    --success-bg: rgba(34, 197, 94, 0.12);
    --warning-bg: rgba(234, 179, 8, 0.12);
    --error-bg: rgba(239, 68, 68, 0.12);
    --info-bg: rgba(59, 130, 246, 0.12);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.55);

    --glass-bg: rgba(45, 32, 58, 0.78);
    --glass-bg-hover: rgba(55, 40, 70, 0.92);
    --glass-bg-light: rgba(26, 16, 37, 0.55);
    --glass-bg-heavy: rgba(45, 32, 58, 0.9);

    --glass-border: rgba(244, 114, 182, 0.15);
    --glass-border-light: rgba(45, 32, 58, 0.8);
    --glass-border-hover: rgba(244, 114, 182, 0.25);

    --glow-primary: rgba(244, 114, 182, 0.12);
    --glow-secondary: rgba(192, 132, 252, 0.1);
    --glow-shadow: rgba(0, 0, 0, 0.35);
}

/* =======================================
   全局样式
   ======================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
    background: var(--gradient-page);
    background-attachment: fixed;
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh;
}

/* 背景柔光点缀 */
body::before {
    content: '';
    position: fixed;
    top: -15%;
    right: -8%;
    width: 55vw;
    height: 55vw;
    background: radial-gradient(circle at center, rgba(244, 114, 182, 0.18) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

body::after {
    content: '';
    position: fixed;
    bottom: -15%;
    left: -8%;
    width: 45vw;
    height: 45vw;
    background: radial-gradient(circle at center, rgba(192, 132, 252, 0.15) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* =======================================
   登录页面
   ======================================= */
.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    height: 100%;
    background: var(--gradient-page);
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
}

.login-body::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle at center, rgba(244, 114, 182, 0.2) 0%, transparent 60%);
    pointer-events: none;
}

@keyframes pulse {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(5%, 5%); }
}

@keyframes floatOrb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-20px, 15px) scale(1.05); }
    66% { transform: translate(15px, -10px) scale(0.98); }
}

.login-container {
    width: 100%;
    max-width: 420px;
    padding: 20px;
    position: relative;
    z-index: 1;
}

.login-box {
    background: var(--glass-bg);
    padding: 40px 32px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.login-box::before {
    content: none;
}

.login-box::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--accent-lavender) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-box h1 {
    text-align: center;
    margin-bottom: 36px;
    color: var(--primary-color);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.login-box h1::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: var(--gradient-primary);
    margin: 12px auto 0;
    border-radius: 2px;
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 14px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 15px;
    transition: all var(--transition-normal);
    background: var(--bg-card);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.12);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.error-message {
    color: var(--error-color);
    margin-bottom: 20px;
    padding: 14px 16px;
    background-color: var(--error-bg);
    border-radius: var(--radius-md);
    display: none;
    border-left: 4px solid var(--error-color);
    font-size: 14px;
    word-wrap: break-word;
    word-break: break-all;
    animation: shake 0.4s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.error-message.show {
    display: block;
}

.error-message button {
    margin-top: 12px;
}

/* =======================================
   侧边栏
   ======================================= */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    background: var(--gradient-sidebar);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 28px rgba(236, 72, 153, 0.1);
    z-index: 1000;
    overflow: hidden;
    border-right: none;
    transition: transform var(--transition-normal);
}

.sidebar-header {
    padding: 22px 18px 18px;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    position: relative;
    z-index: 10;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: opacity var(--transition-fast);
    position: relative;
    padding-left: 14px;
}

.sidebar-brand::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 32px;
    background: var(--gradient-primary);
    border-radius: 4px;
}

.sidebar-brand:hover {
    opacity: 0.88;
}

.sidebar-logo {
    flex-shrink: 0;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sidebar-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--primary-color);
    line-height: 1.2;
}

.sidebar-tagline {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.2;
}

.sidebar-nav {
    flex: 1;
    padding: 16px 0;
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    margin: 5px 14px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
    border-radius: 999px;
    position: relative;
}

.nav-item:hover {
    color: var(--primary-color);
    background: var(--accent-mint);
}

.nav-item:not(.active)::after {
    content: '';
    margin-left: auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(236, 72, 153, 0.28);
    flex-shrink: 0;
}

.nav-item.active {
    background: var(--gradient-primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(236, 72, 153, 0.35);
}

.nav-item.active::before,
.nav-item.active::after {
    display: none;
}

.nav-icon {
    margin-right: 14px;
    font-size: 20px;
    width: 24px;
    text-align: center;
}

.nav-text {
    font-size: 15px;
    font-weight: 500;
}

.sidebar-footer {
    padding: 16px 18px 20px;
    border-top: 1px solid var(--border-color);
    background: transparent;
}

.sidebar-footer .btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 999px;
}

.sidebar-footer .btn:last-child {
    margin-bottom: 0;
}

/* =======================================
   主内容区
   ======================================= */
.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    min-height: 100dvh;
    padding: 16px 20px;
    background: transparent;
    position: relative;
    z-index: 1;
    transition: margin-left var(--transition-normal);
}

body.sidebar-collapsed .main-content {
    margin-left: 0;
}

@media (min-width: 769px) {
    .sidebar-overlay {
        display: none !important;
    }

    .sidebar {
        transform: translateX(0);
    }

    body.sidebar-collapsed .sidebar {
        transform: translateX(-100%);
    }
}

/* 紧凑顶栏 - NapCat 风格 */
.page-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--topbar-height);
    margin-bottom: 16px;
    padding: 0 14px;
    position: sticky;
    top: 8px;
    z-index: 30;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .page-topbar {
    background: rgba(45, 32, 58, 0.82);
}

.page-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.content-body {
    max-width: 1400px;
}

/* =======================================
   卡片组件
   ======================================= */
.card {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--glass-border-light);
    transition: box-shadow var(--transition-fast);
    position: relative;
}

.card::before {
    display: none;
}

.card:hover {
    box-shadow: var(--shadow-lg);
    border-color: rgba(244, 114, 182, 0.25);
}

.card-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--glass-bg-light);
}

.card-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.card-body {
    padding: 24px;
}

.welcome-card {
    background: var(--gradient-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 60px 40px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    text-align: center;
    border: 1px solid var(--glass-border);
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.welcome-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(52, 211, 153, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.welcome-card:hover {
    box-shadow: var(--shadow-xl), 0 12px 40px rgba(52, 211, 153, 0.1);
    transform: translateY(-2px);
}

.welcome-card h2,
.welcome-card p,
.welcome-card > div {
    position: relative;
    z-index: 1;
}

.welcome-card h2 {
    color: var(--text-primary);
    margin-bottom: 16px;
    font-size: 28px;
    font-weight: 700;
}

.welcome-card p {
    color: var(--text-secondary);
    font-size: 16px;
}

/* =======================================
   按钮组件
   ======================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(148, 163, 184, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.btn:active::before {
    width: 200px;
    height: 200px;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.35);
    border: none;
}

.btn-primary:hover {
    filter: brightness(1.05);
    box-shadow: 0 6px 20px rgba(236, 72, 153, 0.45);
}

.btn-secondary {
    background: var(--glass-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 999px;
}

.btn-secondary:hover {
    background: var(--bg-card);
    color: var(--primary-color);
    border-color: var(--primary-light);
    box-shadow: var(--shadow-sm);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn-small {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45);
}

/* =======================================
   表单控件
   ======================================= */
.form-input,
.form-textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 14px;
    transition: all var(--transition-normal);
    font-family: inherit;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-primary);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-light);
    background: var(--glass-bg-hover);
    box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.01);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-muted);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* 开关样式 */
.switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    margin-right: 12px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: var(--transition-normal);
    border-radius: 28px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: var(--transition-normal);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
}

input:checked + .slider {
    background: var(--gradient-primary);
}

input:checked + .slider:before {
    transform: translateX(24px);
}

input:focus + .slider {
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.2);
}

.switch-label {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
}

/* =======================================
   配置表格样式
   ======================================= */
.config-section {
    margin-bottom: 24px;
}

/* 配置页卡片：编辑时不浮动，避免干扰 */
.config-section.card:hover {
    transform: none;
    box-shadow: var(--shadow-md);
}

.config-section.card:hover::before {
    opacity: 0.6;
}

/* 配置卡片折叠功能 */
.config-section .card-header {
    cursor: pointer;
    user-select: none;
}

.config-section .card-header h2 {
    position: relative;
    padding-right: 30px;
}

.config-section .card-header h2::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--text-secondary);
    transition: transform var(--transition-normal);
}

.config-section.collapsed .card-header h2::after {
    transform: translateY(-50%) rotate(-90deg);
}

.config-section .card-body {
    overflow: hidden;
    transition: max-height var(--transition-normal), padding var(--transition-normal), opacity var(--transition-normal);
    opacity: 1;
}

.config-section.collapsed .card-body {
    max-height: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

.config-section .card-header:hover {
    background: var(--glass-bg-hover);
}

/* 折叠/展开全部按钮 */
.collapse-all-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.collapse-all-actions .btn {
    font-size: 13px;
    padding: 8px 16px;
}

/* 配置模块导航（监控/定时/推送/插件） */
.config-module-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-xl);
    border: 1px solid var(--glass-border-light);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: calc(var(--topbar-height) + 24px);
    z-index: 50;
}

[data-theme="dark"] .config-module-nav {
    background: rgba(45, 32, 58, 0.82);
}

.config-module-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.config-module-tab {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.config-module-tab:hover {
    color: var(--primary-color);
    border-color: var(--primary-light);
    background: rgba(167, 139, 250, 0.08);
}

.config-module-tab.active {
    color: #fff;
    border-color: transparent;
    background: var(--gradient-primary);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.config-module-search-wrap {
    flex: 1;
    min-width: 200px;
}

@media (max-width: 768px) {
    .config-module-nav {
        flex-direction: column;
        align-items: stretch;
    }

    .config-module-tabs {
        justify-content: flex-start;
    }

    .config-module-search-wrap {
        min-width: 0;
    }

    .config-module-search {
        max-width: none;
    }
}

.config-module-search {
    width: 100%;
    max-width: 320px;
    padding: 8px 14px 8px 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
}

.config-section.config-card-hidden {
    display: none !important;
}

.config-table {
    width: 100%;
    border-collapse: collapse;
}

.config-table tr {
    border-bottom: 1px solid var(--glass-border-light);
    transition: background-color var(--transition-fast);
}

.config-table tr:last-child {
    border-bottom: none;
}

.config-table tr:hover {
    background-color: var(--glass-bg-hover);
    backdrop-filter: blur(4px);
}

.config-label {
    width: 200px;
    padding: 18px 16px;
    font-weight: 500;
    color: var(--text-primary);
    vertical-align: top;
    font-size: 14px;
}

.config-table td:last-child {
    padding: 16px;
}

/* =======================================
   代码编辑器
   ======================================= */
.code-editor,
.yaml-editor {
    width: 100%;
    min-height: 500px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.7;
    background-color: rgba(248, 250, 252, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-primary);
    resize: vertical;
    white-space: pre;
    overflow-x: auto;
    tab-size: 2;
    transition: all var(--transition-normal);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.05);
}

.code-editor:focus,
.yaml-editor:focus {
    outline: none;
    border-color: var(--primary-light);
    background-color: var(--glass-bg-hover);
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.15), inset 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* =======================================
   帮助提示框
   ======================================= */
.help-box {
    background: rgba(239, 246, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-left: 4px solid var(--info-color);
    border-top: 1px solid var(--glass-border-light);
    border-right: 1px solid var(--glass-border-light);
    border-bottom: 1px solid var(--glass-border-light);
    padding: 16px 20px;
    margin-bottom: 20px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.05);
}

.help-box h3 {
    margin-bottom: 12px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
}

.help-box ul {
    margin-left: 20px;
    margin-bottom: 10px;
}

.help-box li {
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 14px;
}

.help-box p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.help-box ul,
.help-box p {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.help-box .warning {
    color: var(--warning-color);
    font-weight: 600;
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--warning-bg);
    border-radius: var(--radius-sm);
    display: inline-block;
}

/* =======================================
   消息提示
   ======================================= */
.message {
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    display: none;
    font-size: 14px;
    font-weight: 500;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message.success {
    background: rgba(209, 250, 229, 0.85);
    backdrop-filter: blur(8px);
    color: #065f46;
    border-left: 4px solid var(--success-color);
    border-top: 1px solid var(--glass-border-light);
    border-right: 1px solid var(--glass-border-light);
    border-bottom: 1px solid var(--glass-border-light);
    display: block;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
}

.message.error {
    background: rgba(254, 226, 226, 0.85);
    backdrop-filter: blur(8px);
    color: #991b1b;
    border-left: 4px solid var(--error-color);
    border-top: 1px solid var(--glass-border-light);
    border-right: 1px solid var(--glass-border-light);
    border-bottom: 1px solid var(--glass-border-light);
    display: block;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1);
}

/* =======================================
   数据展示：卡片/网格布局
   ======================================= */
.table-container {
    /* 数据区域现在主要承载卡片网格，但保留兼容性 */
    overflow-x: hidden;
    max-height: 100%;
}

.data-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

/* 移动端：避免 minmax 导致横向溢出 */
@media (max-width: 480px) {
    .data-card-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.weibo-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

@media (max-width: 480px) {
    .weibo-card-grid {
        grid-template-columns: 1fr;
    }
}

/* 微博单列信息流（无封面，官方首页风格，撑满宽度） */
.weibo-feed-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.weibo-feed-grid .data-card {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.weibo-feed-grid .data-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.weibo-feed-card {
    position: relative;
    display: block;
    padding: 18px 24px;
    transition: transform var(--transition-fast), box-shadow var(--transition-normal),
        border-color var(--transition-normal), background-color var(--transition-normal);
}

/* 不同博主：奇数条 - 紫色系 */
.weibo-feed-card:nth-child(odd) {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-left: 4px solid #8b5cf6;
}

.weibo-feed-card:nth-child(odd):hover {
    background: var(--glass-bg-hover);
}

.weibo-feed-card:nth-child(odd) .weibo-feed-avatar {
    border-color: rgba(139, 92, 246, 0.35);
}

/* 不同博主：偶数条 - 蓝青系 */
.weibo-feed-card:nth-child(even) {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-left: 4px solid #06b6d4;
}

.weibo-feed-card:nth-child(even):hover {
    background: var(--glass-bg-hover);
}

.weibo-feed-card:nth-child(even) .weibo-feed-avatar {
    border-color: rgba(6, 182, 212, 0.35);
}

/* 不同博主：3n 条 - 琥珀系 */
.weibo-feed-card:nth-child(3n) {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-left-color: #f59e0b;
}

.weibo-feed-card:nth-child(3n):hover {
    background: var(--glass-bg-hover);
}

.weibo-feed-card:nth-child(3n) .weibo-feed-avatar {
    border-color: rgba(245, 158, 11, 0.4);
}

.weibo-feed-card,
.weibo-feed-card:nth-child(odd),
.weibo-feed-card:nth-child(even),
.weibo-feed-card:nth-child(3n) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.weibo-feed-inner {
    padding-left: 108px;
}

/* 微博信息流移动端：头像左对齐，减少 padding 避免溢出 */
@media (max-width: 480px) {
    .weibo-feed-avatar {
        left: 16px;
        top: 16px;
        width: 40px;
        height: 40px;
    }

    .weibo-feed-inner {
        padding-left: 68px;
    }

    .weibo-feed-card {
        padding: 14px 16px;
    }

    .weibo-feed-footer {
        gap: 16px;
        flex-wrap: wrap;
    }

    .weibo-feed-link-hint {
        width: 100%;
        margin-left: 0;
        margin-top: 4px;
    }
}

.weibo-feed-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.weibo-feed-avatar {
    position: absolute;
    left: 48px;
    top: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(102, 126, 234, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.weibo-feed-avatar,
.weibo-media-img {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.weibo-feed-avatar.image-loaded,
.weibo-media-img.image-loaded {
    opacity: 1;
}

.weibo-feed-avatar:not([src]),
.weibo-media-img:not([src]) {
    visibility: hidden;
    opacity: 0;
}

.weibo-feed-avatar.avatar-fallback {
    background: var(--info-bg);
}

.weibo-feed-user {
    flex: 1;
    min-width: 0;
}

.weibo-feed-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.weibo-feed-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.weibo-feed-verify {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    color: #b45309;
    background: var(--warning-bg);
    border: 1px solid rgba(251, 191, 36, 0.5);
    border-radius: 999px;
}

.weibo-feed-meta {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
}

.weibo-feed-time {
    margin-right: 8px;
}

.weibo-feed-body {
    margin-bottom: 12px;
}

.weibo-feed-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
    word-break: break-word;
    white-space: pre-wrap;
}

.weibo-feed-text br {
    content: '';
    display: block;
    margin-bottom: 0.25em;
}

.weibo-media-grid {
    display: grid;
    gap: 6px;
    margin-top: 12px;
    max-width: 552px;
    contain: layout paint style;
}

.weibo-media-count-1 {
    display: block;
    max-width: 360px;
}

.weibo-media-count-2,
.weibo-media-count-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 366px;
}

.weibo-media-count-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.weibo-media-item {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    padding: 0;
    border: 0;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: var(--glass-bg-light);
    cursor: pointer;
    appearance: none;
    contain: layout paint;
}

.weibo-media-count-1 .weibo-media-item {
    aspect-ratio: 4 / 3;
}

.weibo-media-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.weibo-media-item:hover img {
    transform: scale(1.02);
}

@media (hover: none), (pointer: coarse) {
    .weibo-feed-grid .data-card:hover,
    .weibo-media-item:hover img {
        transform: none;
    }
}

.weibo-lightbox-open {
    overflow: hidden;
}

.weibo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 72px 72px 52px;
    background: rgba(0, 0, 0, 0.86);
}

.weibo-lightbox.show {
    display: flex;
}

.weibo-lightbox-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
}

.weibo-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 140px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.38);
}

.weibo-lightbox-counter {
    min-height: 24px;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
}

.weibo-lightbox-close,
.weibo-lightbox-nav {
    position: fixed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.weibo-lightbox-close:hover,
.weibo-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.28);
}

.weibo-lightbox-close {
    top: 22px;
    right: 24px;
    width: 44px;
    height: 44px;
    font-size: 30px;
    line-height: 1;
}

.weibo-lightbox-nav {
    top: 50%;
    width: 52px;
    height: 52px;
    font-size: 42px;
    line-height: 1;
    transform: translateY(-50%);
}

.weibo-lightbox-nav:hover {
    transform: translateY(-50%) scale(1.04);
}

.weibo-lightbox-prev {
    left: 24px;
}

.weibo-lightbox-next {
    right: 24px;
}

.weibo-lightbox-nav[hidden] {
    display: none;
}

@media (max-width: 480px) {
    .weibo-media-grid,
    .weibo-media-count-1,
    .weibo-media-count-2,
    .weibo-media-count-4 {
        max-width: 100%;
    }

    .weibo-lightbox {
        padding: 60px 12px 44px;
    }

    .weibo-lightbox-image {
        max-height: calc(100vh - 118px);
    }

    .weibo-lightbox-close {
        top: 14px;
        right: 14px;
        width: 40px;
        height: 40px;
    }

    .weibo-lightbox-nav {
        width: 42px;
        height: 42px;
        font-size: 34px;
        background: rgba(0, 0, 0, 0.28);
    }

    .weibo-lightbox-prev {
        left: 10px;
    }

    .weibo-lightbox-next {
        right: 10px;
    }
}

.weibo-feed-footer {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px dashed var(--border-color);
    font-size: 13px;
    color: var(--text-muted);
}

.weibo-feed-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: default;
    transition: color var(--transition-fast);
}

.weibo-feed-action:hover {
    color: var(--primary-color);
}

.weibo-feed-link-hint {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--primary-color);
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.weibo-feed-card:hover .weibo-feed-link-hint {
    color: var(--primary-hover);
}

.weibo-feed-action-icon {
    opacity: 0.85;
}

.weibo-feed-card .data-card-drag-handle {
    left: 4px;
}

.feed-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.live-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

@media (max-width: 480px) {
    .feed-card-grid,
    .live-card-grid {
        grid-template-columns: 1fr;
    }
}

.data-card {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--glass-border);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal),
        border-color var(--transition-normal), background-color var(--transition-normal);
}

@supports (content-visibility: auto) {
    .data-card {
        content-visibility: auto;
        contain-intrinsic-size: auto 280px;
    }

    .weibo-feed-grid .data-card {
        contain-intrinsic-size: auto 420px;
    }
}

.data-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), 0 12px 30px rgba(52, 211, 153, 0.08);
    border-color: var(--glass-border-hover);
    background: var(--glass-bg-hover);
}

/* 卡片拖拽手柄 */
.data-card-drag-handle {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 14px;
    cursor: grab;
    z-index: 2;
    background: var(--glass-bg-heavy);
    backdrop-filter: blur(4px);
    box-shadow: var(--shadow-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
}

.data-card-drag-handle:hover {
    color: var(--primary-color);
    background: var(--glass-bg-hover);
}

.data-card-drag-handle:active {
    cursor: grabbing;
}

/* 拖拽时的占位和选中状态 */
.data-card-dragging {
    opacity: 0.4;
}

.data-card-chosen {
    box-shadow: var(--shadow-xl);
    transform: scale(1.02);
    z-index: 10;
}

.data-card-drag {
    opacity: 0.95;
    box-shadow: var(--shadow-xl);
}

/* ---- 微博信息流卡片 ---- */
.weibo-card {
    display: flex;
    flex-direction: column;
}

.weibo-card-cover {
    position: relative;
    height: 160px;
    background: var(--bg-card);
    /* 允许头像从封面区域“溢出”，避免被截断 */
    overflow: visible;
}

.weibo-card-cover-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.9;
    transform: scale(1.02);
    filter: saturate(1.05);
}

.weibo-card-avatar-wrap {
    position: absolute;
    left: 20px;
    bottom: -26px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid var(--bg-card);
    background: var(--bg-card);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.weibo-card-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.weibo-card-avatar.avatar-fallback {
    background: linear-gradient(135deg, #e5e7eb, #cbd5e1);
}

.weibo-card-body {
    padding: 24px 20px 18px;
    padding-top: 32px; /* 让头像悬浮时不压住文本 */
}

@media (max-width: 480px) {
    .weibo-card-body {
        padding: 18px 14px 14px;
        padding-top: 28px;
    }
}

.weibo-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.weibo-card-user {
    min-width: 0;
}

.weibo-card-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.weibo-card-meta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.weibo-card-verify {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.12);
    color: #92400e;
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.weibo-card-stats {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.weibo-card-stats .stat-item {
    white-space: nowrap;
}

.weibo-card-stats .stat-dot {
    color: #cbd5e1;
}

.weibo-card-text {
    margin-top: 4px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.weibo-card-footer {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    font-size: 12px;
    color: var(--primary-color);
}

.weibo-card-link-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.weibo-card-link-hint::after {
    content: '↗';
    font-size: 11px;
}

/* ---- 直播卡片 ---- */
.live-card {
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.live-card-on {
    border-left: 4px solid var(--success-color);
}

.live-card-off {
    border-left: 4px solid #cbd5e1;
}

.live-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 6px;
}

.live-card-title {
    min-width: 0;
}

.platform-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.08);
    color: #1d4ed8;
    margin-bottom: 4px;
}

.live-anchor-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.live-status-badge {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
}

.live-status-badge.status-live {
    background: rgba(16, 185, 129, 0.08);
    color: var(--success-color);
}

.live-status-badge.status-offline {
    background: rgba(148, 163, 184, 0.12);
    color: #6b7280;
}

.live-card-body {
    font-size: 13px;
    color: var(--text-secondary);
}

.live-room {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.live-room-label {
    color: var(--text-muted);
}

.live-room-value {
    font-weight: 500;
    color: var(--text-primary);
}

.live-card-footer {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    font-size: 12px;
    color: var(--primary-color);
}

.live-card-link-hint::after {
    content: '↗';
    font-size: 11px;
}

/* 直播卡片媒体区域（封面 + 头像，虎牙使用真实封面和头像） */
.live-card-media {
    position: relative;
    height: 120px;
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.live-card-cover {
    position: absolute;
    inset: 0;
    background: var(--bg-card);
    transition: transform var(--transition-normal), filter var(--transition-normal), opacity var(--transition-normal);
    opacity: 0.9;
}

.live-card-cover-has-img {
    background-size: cover;
    background-position: center;
    filter: saturate(1.05);
}

.live-card:hover .live-card-cover-has-img {
    transform: scale(1.03);
    filter: saturate(1.12);
}

.live-card-avatar-wrap {
    position: absolute;
    left: 14px;
    bottom: 10px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--glass-border-hover);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: #e5e7eb;
}

.live-card-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.live-card-content {
    padding: 10px 16px 12px;
}

/* ---- 通用信息流卡片（B站动态 / 小红书等） ---- */
.feed-card {
    padding: 16px 18px 14px;
}

.feed-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    padding-left: 36px; /* 为左上角拖拽手柄留出空间 */
}

.feed-card-user {
    min-width: 0;
}

.feed-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.feed-card-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
}

.platform-badge-bilibili {
    background: rgba(56, 189, 248, 0.12);
    color: #0369a1;
}

.platform-badge-douyin {
    background: rgba(236, 72, 153, 0.12);
    color: #be185d;
}

.platform-badge-xhs {
    background: rgba(248, 113, 113, 0.12);
    color: #b91c1c;
}

.feed-card-body {
    margin-top: 4px;
}

.feed-card-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.feed-card-footer {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    font-size: 12px;
    color: var(--primary-color);
}

.feed-card-link-hint::after {
    content: '↗';
    font-size: 11px;
}

.feed-card-raw {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--text-secondary);
}

/* =======================================
   标签页
   ======================================= */
.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    padding: 5px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius-xl);
    width: fit-content;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--glass-border-light);
}

[data-theme="dark"] .tabs {
    background: rgba(45, 32, 58, 0.75);
}

.tab-btn {
    padding: 8px 18px;
    min-height: 36px;
    border: none;
    background-color: transparent;
    color: var(--text-secondary);
    border-radius: 999px;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 14px;
    font-weight: 500;
    position: relative;
}

.tab-btn:hover {
    color: var(--primary-color);
    background: var(--accent-mint);
}

.tab-btn.active {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
    font-weight: 600;
}

/* =======================================
   分页控件
   ======================================= */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
}

.pagination button {
    padding: 10px 18px;
    border: 1px solid var(--glass-border);
    background-color: var(--glass-bg);
    backdrop-filter: blur(8px);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}

.pagination button:hover:not(:disabled) {
    background: var(--gradient-primary);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 211, 153, 0.2);
}

.pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination .page-info {
    padding: 10px 16px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
}

/* =======================================
   日志容器
   ======================================= */
/* 日志区固定为夜间模式观感，不随 html 的 data-theme 变化 */
.logs-container {
    background: rgba(30, 41, 59, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #f8fafc;
    padding: 24px;
    border-radius: var(--radius-md);
    font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.7;
    max-height: 600px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    border: 1px solid #334155;
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.35);
}

.logs-container::-webkit-scrollbar {
    width: 8px;
}

.logs-container::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, 0.1);
    border-radius: 4px;
}

.logs-container::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 4px;
}

.logs-container::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

.cache-notice {
    background: rgba(245, 158, 11, 0.15);
    border-left: 4px solid #fbbf24;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 13px;
    color: #fcd34d;
    font-family: inherit;
}

.cache-notice span {
    font-weight: 600;
}

.log-line {
    margin-bottom: 2px;
    padding: 2px 0;
}

.log-line.error {
    color: #ef4444;
}

.log-line.warning {
    color: #f59e0b;
}

.log-line.info {
    color: #10b981;
}

.log-line.debug {
    color: #0ea5e9;
}

.logs-container .loading {
    color: #64748b;
}

.logs-container .loading::before {
    border-color: #334155;
    border-top-color: #10b981;
    border-right-color: #34d399;
}

.logs-container .error-message {
    color: #f87171;
    background-color: rgba(239, 68, 68, 0.15);
    border-left-color: #ef4444;
}

/* =======================================
   加载状态
   ======================================= */
.loading {
    text-align: center;
    padding: 60px 40px;
    color: var(--text-muted);
}

.loading::before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-right-color: var(--primary-light);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* 无日志/空状态：仅显示文字，无转圈动画 */
.logs-empty {
    text-align: center;
    padding: 60px 40px;
    color: var(--text-muted);
}

/* 日志页：整页一屏展示，日志在容器内滚动 */
body.page-logs {
    overflow: hidden;
}

body.page-logs .main-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    box-sizing: border-box;
    padding: 16px 20px;
}

body.page-logs .page-topbar {
    flex-shrink: 0;
    margin-bottom: 12px;
}

body.page-logs .content-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.page-logs .content-body > .card {
    flex: 1;
    min-height: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

body.page-logs .content-body > .card:hover {
    transform: none;
}

body.page-logs .card-header {
    flex-shrink: 0;
}

body.page-logs .card-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 16px 20px 20px;
}

body.page-logs .logs-container {
    flex: 1;
    min-height: 0;
    max-height: none;
    height: auto;
}

.logs-container .logs-empty {
    color: #94a3b8;  /* 深色背景下的柔和文字色 */
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* =======================================
   推送通道配置
   ======================================= */
.push-channel-item {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 16px;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 var(--glass-border-light), 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: all var(--transition-normal);
}

.push-channel-item:hover {
    border-color: var(--glass-border-hover);
    box-shadow: var(--shadow-md), 0 8px 24px rgba(52, 211, 153, 0.06);
    background: var(--glass-bg);
    transform: translateY(-2px);
}

.push-channel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}

.push-channel-title {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}

.push-channel-actions {
    display: flex;
    gap: 10px;
}

.push-channel-table {
    width: 100%;
    border-collapse: collapse;
}

.push-channel-table tr {
    border-bottom: 1px solid var(--border-light);
}

.push-channel-table tr:last-child {
    border-bottom: none;
}

.push-channel-table .config-label {
    width: 180px;
}

/* =======================================
   推送通道多选样式
   ======================================= */
.push-channels-select {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
}

.push-channel-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--glass-bg-hover);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 13px;
    color: var(--text-secondary);
    user-select: none;
}

.push-channel-checkbox:hover {
    border-color: var(--primary-light);
    background: var(--glass-bg-hover);
}

.push-channel-checkbox.selected {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.12) 0%, rgba(167, 139, 250, 0.06) 100%);
    color: var(--primary-color);
}

.push-channel-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.push-channel-checkbox .channel-name {
    font-weight: 500;
}

.push-channels-select .no-channels {
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
    padding: 8px 0;
}

.help-text {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 6px;
}

@media (max-width: 768px) {
    .push-channels-select {
        gap: 6px;
    }
    
    .push-channel-checkbox {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* =======================================
   多账号/多Cookie列表
   ======================================= */
.multi-accounts-list,
.multi-cookies-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.multi-account-row,
.multi-cookie-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: var(--glass-bg-light);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 0 var(--glass-border-light), 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: all var(--transition-fast);
}

.multi-account-row:hover,
.multi-cookie-row:hover {
    border-color: var(--glass-border-hover);
    background: var(--glass-bg);
    box-shadow: var(--shadow-sm), 0 4px 16px rgba(52, 211, 153, 0.05);
    transform: translateY(-1px);
}

.multi-account-row .account-fields,
.multi-cookie-row .cookie-field {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.multi-account-row input.form-input,
.multi-cookie-row input.form-input,
.multi-cookie-row textarea.form-input {
    flex: 1;
    min-width: 120px;
}

.multi-account-row .account-fields input:nth-child(1) { max-width: 240px; }
.multi-account-row .account-fields input:nth-child(2) { max-width: 200px; }

@media (max-width: 768px) {
    .multi-account-row .account-fields,
    .multi-cookie-row .cookie-field {
        flex-direction: column;
    }

    .multi-account-row .account-fields input:nth-child(1),
    .multi-account-row .account-fields input:nth-child(2),
    .multi-cookie-row input.form-input,
    .multi-cookie-row textarea.form-input {
        max-width: none;
        min-width: 0;
    }

    .multi-account-row,
    .multi-cookie-row {
        flex-direction: column;
        gap: 12px;
    }

    .multi-account-row .row-remove,
    .multi-cookie-row .row-remove {
        align-self: flex-end;
    }
}

.multi-account-row .row-remove,
.multi-cookie-row .row-remove {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 13px;
}

/* =======================================
   视图容器
   ======================================= */
.view-container {
    width: 100%;
    animation: fadeInUp 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 顶栏内菜单按钮 */
.mobile-menu-btn,
.page-topbar-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.page-topbar-menu:hover,
.mobile-menu-btn:hover {
    background: var(--accent-mint);
    color: var(--primary-color);
}

.mobile-menu-btn.active,
.page-topbar-menu.active {
    background: var(--accent-mint);
    color: var(--primary-color);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    opacity: 0;
    transition: opacity var(--transition-normal);
    backdrop-filter: blur(4px);
}

.sidebar-overlay.show {
    display: block;
    opacity: 1;
}

/* =======================================
   响应式设计 - 平板
   ======================================= */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 240px;
    }

    .main-content {
        padding: 14px 16px;
    }
}

/* =======================================
   响应式设计 - 手机
   ======================================= */
@media (max-width: 768px) {
    .sidebar {
        width: min(82vw, 280px);
        max-width: calc(100vw - 48px);
        transform: translateX(-105%);
        border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    }

    /* specificity must beat body.sidebar-collapsed .sidebar (desktop collapse rule) */
    body .sidebar.show {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
        padding: 12px 14px;
        padding-top: calc(12px + env(safe-area-inset-top));
    }

    .page-topbar {
        top: calc(8px + env(safe-area-inset-top));
    }

    .page-title {
        font-size: 1.125rem;
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 16px;
    }

    .card-header h2 {
        font-size: 16px;
        width: 100%;
    }

    .card-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    .card-body {
        padding: 16px;
    }

    .btn {
        padding: 12px 16px;
        font-size: 14px;
        min-height: 44px;
    }

    .card-actions .btn {
        flex: 1;
        min-width: 0;
    }

    .nav-item {
        padding: 16px 20px;
        margin: 4px 8px;
    }

    .config-table {
        display: block;
    }

    .config-table tr {
        display: block;
        border-bottom: 2px solid var(--border-light);
        padding: 16px 0;
        margin-bottom: 12px;
    }

    .config-table tr:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    .config-table td {
        display: block;
        padding: 8px 0;
        width: 100%;
        border: none;
    }

    .config-label {
        width: 100%;
        padding: 0;
        margin-bottom: 8px;
        font-size: 13px;
        font-weight: 600;
    }

    .config-table td:last-child {
        padding: 0;
    }

    .form-input,
    .form-textarea {
        font-size: 16px;
        padding: 14px;
    }

    .table-container {
        max-height: 500px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 配置表格已改为 block 布局，移除 min-width 避免横向溢出 */
    .config-table,
    .push-channel-table {
        min-width: 0;
    }

    table {
        font-size: 13px;
    }

    table th,
    table td {
        padding: 12px 10px;
    }

    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        margin-bottom: 16px;
        width: 100%;
    }

    .tab-btn {
        padding: 10px 16px;
        font-size: 13px;
        white-space: nowrap;
    }

    .pagination {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pagination button {
        padding: 10px 14px;
        min-height: 44px;
    }

    .logs-container {
        font-size: 12px;
        padding: 16px;
        max-height: 500px;
    }

    body.page-logs .logs-container {
        max-height: none;
    }

    body.page-logs .main-content {
        padding: 12px 14px;
        padding-top: calc(12px + env(safe-area-inset-top));
    }

    .yaml-editor {
        font-size: 12px;
        min-height: 400px;
        padding: 14px;
    }

    .push-channel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .push-channel-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .push-channel-table {
        display: block;
    }

    .push-channel-table tr {
        display: block;
        border-bottom: 2px solid var(--border-light);
        padding: 12px 0;
    }

    .push-channel-table tr:last-child {
        border-bottom: none;
    }

    .push-channel-table td {
        display: block;
        padding: 6px 0;
        width: 100%;
    }

    .push-channel-table .config-label {
        width: 100%;
        padding: 0;
        margin-bottom: 6px;
    }

    .welcome-card {
        padding: 40px 24px;
    }

    .welcome-card h2 {
        font-size: 22px;
    }

    .login-container {
        padding: 16px;
    }

    .login-box {
        padding: 36px 24px;
    }

    .login-box h1 {
        font-size: 24px;
        margin-bottom: 28px;
    }

    /* 登录页装饰光球在移动端缩小 */
    .login-body::after {
        width: 180px;
        height: 180px;
        right: 5%;
        top: 10%;
    }

    .switch {
        width: 52px;
        height: 28px;
    }

    .slider:before {
        height: 22px;
        width: 22px;
    }

    input:checked + .slider:before {
        transform: translateX(24px);
    }

    .help-box {
        padding: 14px 16px;
    }

    .error-message {
        padding: 12px 14px;
        font-size: 13px;
    }

    .cache-notice {
        padding: 10px 12px;
        font-size: 12px;
    }

    /* 日志页等卡片操作区：select 和控件在小屏下自适应，避免横向溢出 */
    .card-header .card-actions select.form-input {
        min-width: 0 !important;
        width: 100%;
        max-width: 100%;
    }

    .card-header .card-actions label {
        min-width: 0;
    }
}

/* =======================================
   超小屏幕优化
   ======================================= */
@media (max-width: 480px) {
    .main-content {
        padding: 12px;
    }

    .card-header,
    .card-body {
        padding: 14px;
    }

    .page-title {
        font-size: 1rem;
    }

    .sidebar {
        width: 260px;
    }

    .config-table,
    .push-channel-table {
        min-width: 0;
    }

    table {
        font-size: 12px;
    }

    table th,
    table td {
        padding: 10px 8px;
    }

    .btn {
        padding: 10px 14px;
        font-size: 13px;
    }

    .welcome-card {
        padding: 32px 20px;
    }

    .welcome-card h2 {
        font-size: 20px;
    }

}

/* =======================================
   滚动条美化
   ======================================= */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.6);
}

/* =======================================
   选择文本样式
   ======================================= */
::selection {
    background: rgba(167, 139, 250, 0.25);
    color: var(--text-primary);
}

/* =======================================
   动画辅助类
   ======================================= */
.fade-in {
    animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.slide-up {
    animation: slideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.scale-in {
    animation: scaleIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =======================================
   任务管理页面样式
   ======================================= */
.task-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.task-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.task-item:hover {
    border-color: var(--glass-border-hover);
    box-shadow: var(--shadow-lg), 0 12px 30px rgba(52, 211, 153, 0.08);
    transform: translateY(-3px);
    background: var(--glass-bg-hover);
}

.task-info {
    flex: 1;
    min-width: 0;
}

.task-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.task-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.task-type-monitor {
    background: var(--info-bg);
    color: #1e40af;
}

.task-type-task {
    background: var(--warning-bg);
    color: #92400e;
}

.task-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.task-id {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    line-height: 1.5;
}

.task-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.task-trigger {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.task-actions {
    flex-shrink: 0;
    margin-left: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.run-task-btn {
    min-width: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.run-task-btn.running {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    cursor: not-allowed;
    box-shadow: none;
}

.run-task-btn .btn-icon {
    font-size: 14px;
}

.run-task-btn .btn-text {
    font-size: 14px;
}

/* 空状态和错误状态 */
.empty-state,
.error-state {
    text-align: center;
    padding: 60px 40px;
    color: var(--text-muted);
}

.empty-state p,
.error-state p {
    margin-bottom: 16px;
    font-size: 15px;
}

/* 任务管理响应式 */
@media (max-width: 768px) {
    .task-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 16px;
    }

    .task-actions {
        margin-left: 0;
        width: 100%;
    }

    .run-task-btn {
        width: 100%;
    }

    .task-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* =======================================
   Toast 提示样式
   ======================================= */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: var(--radius-lg);
    background: var(--glass-bg-hover);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-xl), 0 8px 30px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 400px;
    min-width: 280px;
}

.toast-show {
    opacity: 1;
    transform: translateX(0);
}

.toast-hide {
    opacity: 0;
    transform: translateX(100%);
}

.toast-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
}

.toast-message {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.4;
}

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.2s;
}

.toast-close:hover {
    color: var(--text-primary);
}

/* Toast 类型样式 */
.toast-success {
    border-left: 4px solid var(--success-color);
}

.toast-success .toast-icon {
    background: var(--success-bg);
    color: var(--success-color);
}

.toast-error {
    border-left: 4px solid var(--error-color);
}

.toast-error .toast-icon {
    background: var(--error-bg);
    color: var(--error-color);
}

.toast-warning {
    border-left: 4px solid var(--warning-color);
}

.toast-warning .toast-icon {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.toast-info {
    border-left: 4px solid var(--info-color);
}

.toast-info .toast-icon {
    background: var(--info-bg);
    color: var(--info-color);
}

/* Toast 响应式 */
@media (max-width: 480px) {
    .toast-container {
        top: 10px;
        right: 10px;
        left: 10px;
    }

    .toast {
        max-width: none;
        min-width: 0;
    }
}

/* =======================================
   模态框样式
   ======================================= */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
}

.modal.show {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease-out;
}

.modal-content {
    position: relative;
    background: var(--glass-bg-heavy);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl), 0 0 60px rgba(52, 211, 153, 0.1);
    width: 100%;
    max-width: 420px;
    margin: 20px;
    animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--glass-border-light);
    background: transparent;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-header h3::before {
    content: '🔐';
}

#taskLogModal .modal-header h3::before {
    content: none;
    font-size: 20px;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-primary);
    background: var(--bg-color);
}

.modal-body {
    padding: 24px;
}

.modal-body .form-group {
    margin-bottom: 20px;
}

.modal-body .form-group:last-of-type {
    margin-bottom: 16px;
}

.modal-body .form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 14px;
}

.modal-body .form-group input {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 14px;
    transition: all var(--transition-normal);
    background: var(--bg-card);
}

.modal-body .form-group input:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.12);
}


.modal-body .form-group input::placeholder {
    color: var(--text-muted);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    background: var(--glass-bg-light);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.password-message {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-size: 14px;
    display: none;
    margin-top: 8px;
}

.password-message.success {
    display: block;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border-left: 4px solid var(--success-color);
}

.password-message.error {
    display: block;
    background: var(--error-bg);
    color: #991b1b;
    border-left: 4px solid var(--error-color);
}

/* 模态框响应式 */
@media (max-width: 480px) {
    .modal-content {
        margin: 16px;
        max-width: none;
    }

    .modal-header {
        padding: 16px 20px;
    }

    .modal-body {
        padding: 20px;
    }

    .modal-footer {
        padding: 14px 20px;
        flex-direction: column-reverse;
    }

    .modal-footer .btn {
        width: 100%;
    }
}

/* ================= 版本更新提示横幅 ================= */
.update-banner {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    background: var(--warning-bg);
    border-bottom: 1px solid #f59e0b;
    color: #92400e;
    font-size: 14px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.update-banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.update-banner-icon {
    font-size: 18px;
}

.update-banner-text {
    font-weight: 500;
}

.update-banner-text a {
    color: #b45309;
    text-decoration: underline;
    font-weight: 600;
}

.update-banner-text a:hover {
    color: #92400e;
}

.update-banner-close {
    background: transparent;
    border: none;
    color: #92400e;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
    flex-shrink: 0;
}

.update-banner-close:hover {
    background: rgba(146, 64, 14, 0.1);
}

/* 版本信息显示（侧边栏底部） */
.version-info {
    padding: 8px 16px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    border-top: 1px solid var(--border-light);
    margin-top: auto;
}

.version-info a {
    color: var(--text-muted);
    text-decoration: none;
}

.version-info a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* 更新横幅响应式 - 为移动端菜单按钮留出左侧空间避免重叠 */
@media (max-width: 768px) {
    .update-banner {
        margin-left: 0;
        width: 100%;
        padding: 10px 16px 10px 56px;
        font-size: 13px;
    }
    
    .update-banner-content {
        gap: 8px;
    }
}

/* ================= 登录页版本信息 ================= */
.login-version-info {
    text-align: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
    font-size: 12px;
    color: var(--text-muted);
}

.login-version-info a {
    color: var(--text-muted);
    text-decoration: none;
}

.login-version-info a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* 登录页更新横幅（固定在顶部） */
.login-update-banner {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.95) 0%, rgba(253, 230, 138, 0.95) 100%);
    border-bottom: 1px solid rgba(245, 158, 11, 0.5);
    color: #92400e;
    font-size: 14px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.login-update-banner .update-banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.login-update-banner .update-banner-icon {
    font-size: 18px;
}

.login-update-banner .update-banner-text {
    font-weight: 500;
}

.login-update-banner .update-banner-text a {
    color: #b45309;
    text-decoration: underline;
    font-weight: 600;
}

.login-update-banner .update-banner-text a:hover {
    color: #92400e;
}

.login-update-banner .update-banner-close {
    background: transparent;
    border: none;
    color: #92400e;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
    position: absolute;
    right: 12px;
}

.login-update-banner .update-banner-close:hover {
    background: rgba(146, 64, 14, 0.1);
}

/* 登录页更新横幅响应式 */
@media (max-width: 768px) {
    .login-update-banner {
        padding: 10px 40px 10px 16px;
        font-size: 13px;
    }
    
    .login-update-banner .update-banner-content {
        gap: 8px;
    }
    
    .login-update-banner .update-banner-close {
        right: 8px;
    }
}

/* =======================================
   返回顶部按钮
   ======================================= */
.back-to-top {
    position: fixed;
    right: 26px;
    bottom: 32px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: none;
    background: var(--gradient-primary);
    color: #ffffff;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg), 0 0 0 0 rgba(167, 139, 250, 0.4);
    cursor: pointer;
    z-index: 1100;
    font-size: 18px;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), opacity var(--transition-fast);
}

.back-to-top.show {
    display: flex;
    opacity: 1;
    animation: fadeInUp 0.3s ease-out;
}

.back-to-top:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(236, 72, 153, 0.35), 0 0 0 8px rgba(244, 114, 182, 0.15);
}

.back-to-top:active {
    transform: translateY(0);
    box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
    .back-to-top {
        right: 16px;
        bottom: 24px;
        width: 40px;
        height: 40px;
    }
}

/* =======================================
   UI 增强 v14
   ======================================= */

/* 无障碍：键盘焦点 */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.btn:focus:not(:focus-visible),
.nav-item:focus:not(:focus-visible) {
    outline: none;
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    body::before,
    body::after,
    .login-body::before,
    .login-body::after {
        animation: none !important;
    }
}

/* 暗色模式补充修复 */
[data-theme="dark"] .help-box {
    background: rgba(56, 189, 248, 0.08);
    border-left-color: var(--info-color);
}

[data-theme="dark"] .help-box code {
    background: rgba(51, 65, 85, 0.8) !important;
    color: var(--text-secondary);
}

[data-theme="dark"] .yaml-editor,
[data-theme="dark"] .code-editor {
    background-color: rgba(15, 23, 42, 0.9);
    border-color: var(--border-color);
}

[data-theme="dark"] .message.success {
    color: #6ee7b7;
}

[data-theme="dark"] .message.error {
    color: #fca5a5;
}

[data-theme="dark"] .password-message.success {
    background: var(--success-bg);
    color: #6ee7b7;
}

/* 登录页增强 */
.login-box {
    animation: slideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.login-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 8px;
    border-radius: 20px;
    background: var(--glass-bg-light);
    box-shadow: var(--shadow-md);
}

.login-brand-icon img {
    width: 48px;
    height: 48px;
}

.login-box h1 {
    font-size: 26px;
}

.login-tagline {
    text-align: center;
    margin-top: 20px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
}

.login-submit {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    margin-top: 4px;
}

.password-input-wrap {
    position: relative;
}

.password-input-wrap input {
    padding-right: 48px;
}

.password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.password-toggle:hover {
    color: var(--primary-color);
    background: var(--accent-mint);
}

.theme-toggle-fab {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 顶栏菜单按钮 - 汉堡图标动画 */
.mobile-menu-btn .bar,
.page-topbar-menu .bar {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.mobile-menu-btn.active .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-btn.active .bar:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* 标签页横向滚动提示 */
.tabs-scroll-wrap {
    position: relative;
    margin-bottom: 24px;
}

.tabs-scroll-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 100%;
    background: linear-gradient(to left, var(--bg-color), transparent);
    pointer-events: none;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.tabs-scroll-wrap .tabs {
    margin-bottom: 0;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs-scroll-wrap .tabs::-webkit-scrollbar {
    display: none;
}

/* 任务页工具栏 */
.task-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    align-items: center;
}

.task-search {
    flex: 1;
    min-width: 220px;
    max-width: 420px;
    padding-left: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
}

.task-count-badge {
    font-size: 13px;
    color: var(--text-muted);
    padding: 6px 12px;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 999px;
}

/* 日志页工具栏 */
.logs-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.logs-toolbar-label {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: 13px;
    white-space: nowrap;
}

.logs-toolbar-label select.form-input {
    min-width: 160px;
    padding: 6px 10px;
}

.logs-toolbar-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 14px;
    user-select: none;
}

.logs-toolbar-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

/* 空状态增强 */
.empty-state,
.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.empty-state::before,
.error-state::before {
    content: '📭';
    font-size: 48px;
    opacity: 0.6;
    line-height: 1;
}

.error-state::before {
    content: '⚠️';
}

/* 任务日志弹窗 */
.modal-content.modal-wide {
    max-width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.modal-body.modal-body-scroll {
    flex: 1;
    overflow: auto;
    padding: 0;
}

.modal-body.modal-body-scroll .logs-container {
    min-height: 300px;
    margin: 0;
    border-radius: 0;
    border: none;
}

@media (max-width: 768px) {
    .config-module-nav {
        top: calc(var(--topbar-height) + 24px + env(safe-area-inset-top));
    }

    .task-search {
        max-width: none;
    }
}

/* Mobile UX guardrails */
body.mobile-sidebar-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .sidebar {
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 1200;
    }

    .sidebar-overlay {
        z-index: 1190;
    }

    .sidebar-overlay.show {
        display: block;
    }

    .sidebar-header {
        padding: 20px 16px 16px;
    }

    .sidebar-nav {
        padding: 8px 0;
    }

    .sidebar-footer {
        padding: 12px 16px;
    }

    .main-content {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .content-body {
        max-width: 100%;
    }

    .card {
        border-radius: var(--radius-md);
    }

    .card:hover,
    .data-card:hover,
    .push-channel-item:hover {
        transform: none;
    }

    .card-actions .btn,
    .collapse-all-actions .btn {
        flex: 1 1 140px;
        min-width: 0;
    }

    .tabs,
    .config-module-tabs {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .tab-btn,
    .config-module-tab {
        flex: 0 0 auto;
        min-height: 36px;
    }

    .config-module-nav {
        padding: 10px 12px;
        border-radius: var(--radius-md);
    }

    .task-toolbar,
    .logs-toolbar {
        align-items: stretch;
    }

    .task-search {
        width: 100%;
        min-width: 0;
    }

    .task-count-badge {
        align-self: flex-start;
    }

    .logs-toolbar-label {
        width: 100%;
        flex-wrap: wrap;
    }

    .logs-toolbar-label select.form-input {
        flex: 1 1 180px;
        min-height: 44px;
    }

    .logs-toolbar-checkbox {
        min-height: 44px;
    }

    .modal-content,
    .modal-content.modal-wide {
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        margin: 12px;
        overflow: hidden;
    }

    .modal-body {
        overflow: auto;
    }
}

@media (max-width: 480px) {
    .sidebar {
        width: min(86vw, 280px);
        max-width: calc(100vw - 36px);
    }

    .main-content {
        padding-left: 12px;
        padding-right: 12px;
    }

    .card-actions .btn,
    .collapse-all-actions .btn,
    .logs-toolbar .btn {
        width: 100%;
    }
}

/* =======================================
   NapCatQQ visual refresh v19
   ======================================= */
:root {
    --primary-color: #ff7fac;
    --primary-hover: #f33b7c;
    --primary-light: #ffcdd9;
    --primary-dark: #c92462;
    --secondary-color: #88c0d0;
    --secondary-hover: #5e9fbf;
    --secondary-light: #d7f0f8;

    --gradient-primary: linear-gradient(135deg, #ff7fac 0%, #f33b7c 100%);
    --gradient-page: linear-gradient(135deg, #f5f9ff 0%, #fff6fa 46%, #f3fbfc 100%);
    --gradient-sidebar: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 246, 250, 0.72) 100%);
    --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.68) 100%);

    --bg-color: #f7f8fb;
    --bg-card: rgba(255, 255, 255, 0.72);
    --bg-elevated: rgba(255, 255, 255, 0.88);
    --text-primary: #20212a;
    --text-secondary: #5f6675;
    --text-muted: #8b93a3;
    --border-color: rgba(31, 41, 55, 0.1);
    --border-light: rgba(31, 41, 55, 0.07);

    --accent-mint: rgba(136, 192, 208, 0.14);
    --accent-lavender: rgba(255, 127, 172, 0.12);
    --accent-sky: rgba(136, 192, 208, 0.16);

    --success-color: #17a66a;
    --success-bg: #eaf8f1;
    --warning-color: #d9822b;
    --warning-bg: #fff6df;
    --error-color: #df4567;
    --error-bg: #fff0f4;
    --info-color: #3b82f6;
    --info-bg: #edf5ff;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 8px rgba(255, 127, 172, 0.08);
    --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 14px 34px rgba(16, 24, 40, 0.1);
    --shadow-xl: 0 22px 54px rgba(16, 24, 40, 0.14);

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 8px;
    --radius-xl: 8px;

    --sidebar-width: 256px;
    --topbar-height: 44px;

    --glass-bg: rgba(255, 255, 255, 0.62);
    --glass-bg-hover: rgba(255, 255, 255, 0.86);
    --glass-bg-light: rgba(255, 255, 255, 0.46);
    --glass-bg-heavy: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(255, 255, 255, 0.72);
    --glass-border-light: rgba(31, 41, 55, 0.08);
    --glass-border-hover: rgba(255, 127, 172, 0.34);
    --glow-primary: rgba(255, 127, 172, 0.16);
    --glow-secondary: rgba(136, 192, 208, 0.14);
    --glow-shadow: rgba(16, 24, 40, 0.08);
}

[data-theme="dark"] {
    --primary-color: #f31260;
    --primary-hover: #f54180;
    --primary-light: #faa0bf;
    --primary-dark: #c20e4d;
    --secondary-color: #88c0d0;
    --secondary-hover: #aee1f2;
    --secondary-light: rgba(136, 192, 208, 0.2);

    --gradient-primary: linear-gradient(135deg, #f31260 0%, #db3694 100%);
    --gradient-page: linear-gradient(135deg, #0e1118 0%, #151722 48%, #101820 100%);
    --gradient-sidebar: linear-gradient(180deg, rgba(24, 25, 34, 0.82) 0%, rgba(19, 20, 28, 0.76) 100%);
    --gradient-card: linear-gradient(180deg, rgba(28, 30, 40, 0.84) 0%, rgba(23, 24, 33, 0.76) 100%);

    --bg-color: #10131b;
    --bg-card: rgba(28, 30, 40, 0.72);
    --bg-elevated: rgba(33, 35, 46, 0.9);
    --text-primary: #f7f8fb;
    --text-secondary: #c4c8d3;
    --text-muted: #8c93a3;
    --border-color: rgba(255, 255, 255, 0.1);
    --border-light: rgba(255, 255, 255, 0.07);

    --accent-mint: rgba(136, 192, 208, 0.16);
    --accent-lavender: rgba(243, 18, 96, 0.15);
    --accent-sky: rgba(136, 192, 208, 0.12);

    --success-bg: rgba(23, 166, 106, 0.13);
    --warning-bg: rgba(217, 130, 43, 0.13);
    --error-bg: rgba(223, 69, 103, 0.14);
    --info-bg: rgba(59, 130, 246, 0.14);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24), 0 1px 10px rgba(0, 0, 0, 0.18);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.26);
    --shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.32);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.42);

    --glass-bg: rgba(28, 30, 40, 0.62);
    --glass-bg-hover: rgba(38, 41, 54, 0.86);
    --glass-bg-light: rgba(28, 30, 40, 0.44);
    --glass-bg-heavy: rgba(34, 36, 48, 0.94);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-border-light: rgba(255, 255, 255, 0.08);
    --glass-border-hover: rgba(243, 18, 96, 0.36);
    --glow-primary: rgba(243, 18, 96, 0.18);
    --glow-secondary: rgba(136, 192, 208, 0.14);
    --glow-shadow: rgba(0, 0, 0, 0.3);
}

*,
*::before,
*::after {
    letter-spacing: 0 !important;
}

html {
    background: var(--bg-color);
}

body,
.login-body {
    background-color: var(--bg-color);
    background-image:
        linear-gradient(135deg, rgba(136, 192, 208, 0.09) 0, transparent 28%),
        var(--gradient-page);
    background-attachment: fixed;
}

body::before,
body::after,
.login-body::before,
.login-body::after,
.login-box::after,
.welcome-card::before {
    content: none !important;
    display: none !important;
}

a {
    color: var(--primary-hover);
}

/* Login */
.login-body {
    padding: 24px;
}

.login-container {
    max-width: 440px;
    padding: 0;
}

.login-box {
    padding: 34px 32px 28px;
    background: var(--gradient-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
}

.login-brand-icon {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 240, 245, 0.74));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .login-brand-icon {
    background: linear-gradient(180deg, rgba(44, 47, 60, 0.92), rgba(35, 36, 48, 0.74));
}

.login-box h1 {
    margin: 14px 0 28px;
    color: var(--text-primary);
    font-size: 26px;
    font-weight: 800;
}

.login-box h1::after {
    width: 64px;
    height: 4px;
    margin-top: 10px;
    background: var(--gradient-primary);
    border-radius: 999px;
}

.login-tagline {
    margin-top: 18px;
    color: var(--text-secondary);
}

.login-submit {
    min-height: 46px;
    margin-top: 2px;
}

.theme-toggle-fab {
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
}

/* Layout */
.sidebar {
    background: var(--gradient-sidebar);
    border-right: 1px solid var(--border-light);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.35), 12px 0 34px rgba(16, 24, 40, 0.06);
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
}

[data-theme="dark"] .sidebar {
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04), 14px 0 40px rgba(0, 0, 0, 0.32);
}

.sidebar-header {
    padding: 28px 18px 18px;
    border-bottom: 1px solid var(--border-light);
}

.sidebar-brand {
    gap: 12px;
    padding: 8px 8px 8px 14px;
    border-radius: var(--radius-lg);
}

.sidebar-brand::before {
    width: 4px;
    height: 28px;
    background: var(--primary-color);
    box-shadow: 0 0 0 4px var(--accent-lavender);
}

.sidebar-logo {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-elevated);
    padding: 4px;
}

.sidebar-title {
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 800;
}

.sidebar-tagline {
    color: var(--text-muted);
}

.sidebar-nav {
    padding: 14px 12px;
}

.nav-item {
    min-height: 42px;
    margin: 4px 0;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--text-secondary);
    background: transparent;
}

.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 10px;
    border-radius: 999px;
    background: var(--accent-sky);
    font-size: 15px;
}

.nav-text {
    font-size: 14px;
    font-weight: 650;
}

.nav-item:not(.active)::after {
    width: 12px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 127, 172, 0.28);
}

.nav-item:hover {
    color: var(--primary-hover);
    background: rgba(255, 127, 172, 0.08);
    border-color: rgba(255, 127, 172, 0.16);
    transform: translateX(2px);
}

.nav-item.active {
    color: var(--primary-hover);
    background: rgba(255, 127, 172, 0.13);
    border-color: rgba(255, 127, 172, 0.26);
    box-shadow: none;
}

[data-theme="dark"] .nav-item.active {
    color: #ff8cb4;
    background: rgba(243, 18, 96, 0.16);
}

.nav-item.active .nav-icon {
    background: var(--gradient-primary);
    color: #ffffff;
}

.sidebar-footer {
    padding: 14px 16px 18px;
    border-top: 1px solid var(--border-light);
}

.sidebar-footer .btn {
    min-height: 38px;
    margin-bottom: 8px;
    justify-content: flex-start;
}

.version-info {
    border-top: 1px solid var(--border-light);
    background: var(--glass-bg-light);
}

.main-content {
    padding: 14px 18px 24px;
}

.content-body {
    max-width: 1440px;
    margin: 0 auto;
}

body.page-logs .content-body {
    max-width: none;
}

.page-topbar {
    min-height: var(--topbar-height);
    margin: 0 auto 14px;
    padding: 0 10px;
    top: 8px;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: var(--glass-bg);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

[data-theme="dark"] .page-topbar {
    background: var(--glass-bg);
}

.page-topbar-menu,
.mobile-menu-btn {
    width: 36px;
    height: 36px;
    color: var(--text-secondary);
}

.page-topbar-menu:hover,
.mobile-menu-btn:hover,
.mobile-menu-btn.active,
.page-topbar-menu.active {
    color: var(--primary-hover);
    background: rgba(255, 127, 172, 0.12);
}

.page-title-group {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.page-kicker {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(255, 127, 172, 0.12);
    color: var(--primary-hover);
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

.page-title {
    color: var(--text-primary);
    font-size: 19px;
    font-weight: 800;
}

/* Surfaces */
.card,
.welcome-card,
.push-channel-item,
.task-item,
.data-card,
.weibo-feed-card,
.weibo-card,
.live-card,
.feed-card,
.toast,
.modal-content {
    border-radius: var(--radius-xl);
}

.card,
.welcome-card {
    background: var(--gradient-card);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(18px) saturate(1.16);
    -webkit-backdrop-filter: blur(18px) saturate(1.16);
}

.card:hover,
.welcome-card:hover {
    border-color: var(--glass-border-hover);
    box-shadow: var(--shadow-lg);
    transform: none;
}

.card-header {
    min-height: 58px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-light);
    background: rgba(255, 255, 255, 0.28);
}

[data-theme="dark"] .card-header {
    background: rgba(255, 255, 255, 0.03);
}

.card-header h2 {
    color: var(--text-primary);
    font-size: 17px;
    font-weight: 750;
}

.card-body {
    padding: 18px;
}

.welcome-card {
    padding: 42px 32px;
}

.welcome-card h2 {
    font-size: 24px;
}

/* Buttons and inputs */
.btn {
    min-height: 38px;
    padding: 8px 15px;
    border-radius: 999px;
    font-weight: 700;
    line-height: 1.2;
}

.btn::before {
    display: none;
}

.btn-primary {
    background: var(--gradient-primary);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(255, 127, 172, 0.28);
}

.btn-primary:hover {
    filter: none;
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-dark) 100%);
    box-shadow: 0 10px 24px rgba(255, 127, 172, 0.34);
    transform: translateY(-1px);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .btn-secondary {
    background: rgba(255, 255, 255, 0.05);
}

.btn-secondary:hover {
    color: var(--primary-hover);
    background: rgba(255, 127, 172, 0.1);
    border-color: rgba(255, 127, 172, 0.3);
}

.btn-danger {
    background: linear-gradient(135deg, #ff6b82 0%, #df4567 100%);
}

.form-group input,
.form-group textarea,
.form-input,
.form-textarea,
.code-editor,
.yaml-editor,
select.form-input {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.62);
    color: var(--text-primary);
    box-shadow: none;
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .code-editor,
[data-theme="dark"] .yaml-editor,
[data-theme="dark"] select.form-input {
    background: rgba(255, 255, 255, 0.05);
}

.form-group input:focus,
.form-group textarea:focus,
.form-input:focus,
.form-textarea:focus,
.code-editor:focus,
.yaml-editor:focus {
    border-color: rgba(255, 127, 172, 0.62);
    background: var(--bg-elevated);
    box-shadow: 0 0 0 3px rgba(255, 127, 172, 0.16);
}

.form-group label,
.modal-body .form-group label {
    color: var(--text-secondary);
    font-weight: 700;
}

.password-toggle {
    border-radius: 999px;
}

.switch {
    width: 48px;
    height: 26px;
}

.slider {
    background: #d7dce5;
}

.slider::before {
    width: 20px;
    height: 20px;
}

input:checked + .slider {
    background: var(--gradient-primary);
}

input:checked + .slider::before {
    transform: translateX(22px);
}

/* Tabs and filters */
.tabs-scroll-wrap,
.tabs {
    margin-bottom: 18px;
}

.tabs,
.config-module-tabs {
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: var(--glass-bg);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(16px) saturate(1.12);
    -webkit-backdrop-filter: blur(16px) saturate(1.12);
}

.tabs-scroll-wrap::after {
    display: none;
}

.tab-btn,
.config-module-tab {
    min-height: 34px;
    padding: 7px 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 700;
}

.tab-btn:hover,
.config-module-tab:hover {
    color: var(--primary-hover);
    background: rgba(255, 127, 172, 0.08);
}

.tab-btn.active,
.config-module-tab.active {
    color: #ffffff;
    background: var(--gradient-primary);
    border-color: transparent;
    box-shadow: 0 7px 16px rgba(255, 127, 172, 0.26);
}

.collapse-all-actions,
.task-toolbar,
.logs-toolbar {
    gap: 10px;
}

.config-module-nav {
    margin-bottom: 18px;
    padding: 10px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    background: var(--glass-bg);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(18px) saturate(1.16);
    -webkit-backdrop-filter: blur(18px) saturate(1.16);
}

.config-module-search-wrap::before {
    color: var(--primary-color);
}

.task-count-badge,
.cache-notice {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--glass-bg);
    color: var(--text-secondary);
}

/* Tables and structured rows */
.config-table,
.push-channel-table {
    border-collapse: separate;
    border-spacing: 0;
}

.config-table tr,
.push-channel-table tr {
    border-bottom: 1px solid var(--border-light);
}

.config-table tr:hover,
.push-channel-table tr:hover {
    background: rgba(136, 192, 208, 0.07);
}

.config-label,
.push-channel-table .config-label {
    color: var(--text-secondary);
    font-weight: 750;
}

.help-box {
    border: 1px solid rgba(136, 192, 208, 0.22);
    border-left: 4px solid var(--secondary-color);
    border-radius: var(--radius-md);
    background: rgba(136, 192, 208, 0.09);
    color: var(--text-secondary);
}

.help-box h3 {
    color: var(--text-primary);
}

.help-box code {
    border-radius: var(--radius-sm) !important;
}

.message,
.error-message,
.password-message {
    border-radius: var(--radius-md);
}

.message.success,
.password-message.success {
    background: var(--success-bg);
    color: var(--success-color);
}

.message.error,
.password-message.error,
.error-message {
    background: var(--error-bg);
    color: var(--error-color);
}

/* Data cards */
.data-card,
.weibo-feed-card,
.weibo-card,
.live-card,
.feed-card,
.push-channel-item,
.task-item,
.multi-account-row,
.multi-cookie-row,
.push-channel-checkbox {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .data-card,
[data-theme="dark"] .weibo-feed-card,
[data-theme="dark"] .weibo-card,
[data-theme="dark"] .live-card,
[data-theme="dark"] .feed-card,
[data-theme="dark"] .push-channel-item,
[data-theme="dark"] .task-item,
[data-theme="dark"] .multi-account-row,
[data-theme="dark"] .multi-cookie-row,
[data-theme="dark"] .push-channel-checkbox {
    background: rgba(255, 255, 255, 0.05);
}

.data-card:hover,
.weibo-feed-card:hover,
.weibo-card:hover,
.live-card:hover,
.feed-card:hover,
.push-channel-item:hover,
.task-item:hover,
.multi-account-row:hover,
.multi-cookie-row:hover,
.push-channel-checkbox:hover {
    border-color: rgba(255, 127, 172, 0.28);
    background: var(--glass-bg-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.push-channel-checkbox.selected {
    border-color: rgba(255, 127, 172, 0.42);
    background: rgba(255, 127, 172, 0.1);
}

.platform-badge,
.task-type-badge,
.live-status-badge {
    border-radius: 999px;
}

.task-type-monitor {
    color: #1f6c83;
    background: rgba(136, 192, 208, 0.18);
}

.task-type-task {
    color: #9a5f12;
    background: rgba(217, 130, 43, 0.16);
}

.task-actions {
    gap: 8px;
}

.run-task-btn.running {
    background: var(--secondary-color);
}

.empty-state,
.error-state {
    color: var(--text-secondary);
}

/* Data table and logs */
.table-container {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    background: rgba(255, 255, 255, 0.38);
}

[data-theme="dark"] .table-container {
    background: rgba(255, 255, 255, 0.03);
}

table th {
    background: rgba(255, 127, 172, 0.08);
    color: var(--text-primary);
}

table td {
    color: var(--text-secondary);
    border-color: var(--border-light);
}

.pagination button {
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--glass-bg);
    color: var(--text-secondary);
}

.pagination button:hover:not(:disabled) {
    color: var(--primary-hover);
    border-color: rgba(255, 127, 172, 0.28);
    background: rgba(255, 127, 172, 0.1);
}

.logs-container {
    border: 1px solid rgba(16, 24, 40, 0.16);
    border-radius: var(--radius-md);
    background: #111827;
    color: #d6deeb;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .logs-container {
    border-color: rgba(255, 255, 255, 0.1);
    background: #0b0f17;
}

.log-line.info {
    color: #88c0d0;
}

.log-line.warning {
    color: #f4c06a;
}

.log-line.error {
    color: #ff8aa7;
}

.log-line.debug {
    color: #a7b0c0;
}

.logs-container .loading,
.loading {
    color: var(--text-muted);
}

/* Modal, toast and banners */
.modal-overlay {
    background: rgba(10, 12, 18, 0.5);
    backdrop-filter: blur(8px);
}

.modal-content {
    background: var(--bg-elevated);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-xl);
}

.modal-header,
.modal-footer {
    background: transparent;
    border-color: var(--border-light);
}

.modal-close {
    border-radius: 999px;
}

.modal-close:hover {
    background: rgba(255, 127, 172, 0.1);
    color: var(--primary-hover);
}

.toast {
    border: 1px solid var(--glass-border);
    background: var(--bg-elevated);
}

.toast-success,
.toast-error,
.toast-warning,
.toast-info {
    border-left-width: 4px;
}

.update-banner,
.login-update-banner {
    background: rgba(255, 246, 223, 0.94);
    border-bottom: 1px solid rgba(217, 130, 43, 0.25);
    color: #80510f;
    backdrop-filter: blur(16px);
}

[data-theme="dark"] .update-banner,
[data-theme="dark"] .login-update-banner {
    background: rgba(49, 35, 18, 0.92);
    color: #ffd08a;
}

.back-to-top {
    background: var(--gradient-primary);
    box-shadow: var(--shadow-lg);
}

.back-to-top:hover {
    box-shadow: 0 14px 28px rgba(255, 127, 172, 0.32);
}

/* Scrollbars and selection */
::selection {
    background: rgba(255, 127, 172, 0.25);
    color: var(--text-primary);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 127, 172, 0.32);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 127, 172, 0.52);
}

:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

@media (max-width: 1024px) {
    :root {
        --sidebar-width: 244px;
    }

    .main-content {
        padding: 12px 14px 22px;
    }
}

@media (max-width: 768px) {
    .sidebar {
        width: min(84vw, 286px);
        max-width: calc(100vw - 36px);
        border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    }

    .main-content {
        margin-left: 0;
        padding: 12px;
        padding-top: calc(12px + env(safe-area-inset-top));
    }

    .page-topbar {
        top: calc(8px + env(safe-area-inset-top));
        margin-bottom: 12px;
        padding-right: 12px;
    }

    .page-title-group {
        gap: 7px;
    }

    .page-kicker {
        display: none;
    }

    .page-title {
        font-size: 17px;
    }

    .card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px;
    }

    .card-actions,
    .logs-toolbar,
    .task-toolbar,
    .collapse-all-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .card-actions .btn,
    .collapse-all-actions .btn,
    .logs-toolbar .btn {
        flex: 1 1 136px;
        min-width: 0;
    }

    .card-body {
        padding: 14px;
    }

    .tabs,
    .config-module-tabs {
        border-radius: var(--radius-xl);
    }

    .tab-btn,
    .config-module-tab {
        min-height: 38px;
        white-space: nowrap;
    }

    .config-module-nav {
        top: calc(var(--topbar-height) + 20px + env(safe-area-inset-top));
    }

    .config-module-search-wrap {
        width: 100%;
    }

    .task-item {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .task-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .task-actions .btn {
        flex: 1 1 128px;
    }

    .data-card:hover,
    .weibo-feed-card:hover,
    .weibo-card:hover,
    .live-card:hover,
    .feed-card:hover,
    .push-channel-item:hover,
    .task-item:hover {
        transform: none;
    }

    .form-input,
    .form-textarea,
    .form-group input,
    .form-group textarea {
        font-size: 16px;
    }

    .modal-content,
    .modal-content.modal-wide {
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
    }
}

@media (max-width: 480px) {
    .login-body {
        padding: 16px;
    }

    .login-box {
        padding: 30px 22px 24px;
    }

    .login-brand-icon {
        width: 72px;
        height: 72px;
    }

    .theme-toggle-fab {
        top: 12px;
        right: 12px;
    }

    .sidebar {
        width: min(88vw, 280px);
    }

    .main-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .btn {
        padding-left: 12px;
        padding-right: 12px;
    }
}