/* 招财主题 - 夜空星河风格 */

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

:root {
    /* 招财夜空配色 */
    /*--bd-primary: #4A90D9;        /* 招财蓝 */
	--bd-primary: #FFD700;        /* 招财金 */
    --bd-secondary: #7B68EE;      /* 星云紫 */
    --bd-accent: #00D4FF;         /* 电子青 */
    --bd-gold: #FFD700;           /* 招财金 */
    --bd-silver: #C0C8E8;         /* 星光银 */
    --bd-nebula: #9B59B6;         /* 星云色 */
    --bd-glow: #00BFFF;           /* 光晕蓝 */
    --bd-red: #FF6B6B;            /* 警报红 */
    --bd-green: #00E676;          /* 信号绿 */
    
    /* 背景色 - 深邃夜空 */
    /*--bg-dark: #050B1A;           /* 极深夜空 */
    /*--bg-darker: #03070F;         /* 最深背景 */
	--bg-dark: #FFD700;           /* 极深夜空 */
    --bg-darker: #FFD700;         /* 最深背景 */
    --bg-card: rgba(8, 18, 42, 0.92);
    --bg-card-hover: rgba(12, 25, 55, 0.96);
    --bg-panel: rgba(6, 14, 32, 0.88);
    
    /* 文字颜色 */
    --text-primary: #E8EEFF;      /* 主要文字 */
    --text-secondary: #9BACD4;    /* 次要文字 */
    --text-muted: #5A6A8A;        /* 灰暗文字 */
    --text-gold: #FFD700;         /* 金色文字 */
    
    /* 边框 */
    --border-color: rgba(74, 144, 217, 0.25);
    --border-hover: rgba(0, 212, 255, 0.5);
    --border-glow: rgba(0, 212, 255, 0.8);
    
    /* 阴影 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(74, 144, 217, 0.1);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 212, 255, 0.1);
    --shadow-glow: 0 0 20px rgba(0, 212, 255, 0.3), 0 0 40px rgba(74, 144, 217, 0.2);
    
    /* 过渡 */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

body {
    font-family: 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
    background: #ffffff;
    color: var(--text-primary);
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* ==================== 夜空背景动画 ==================== */
.beidou-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: radial-gradient(ellipse at 20% 50%, #0A1628 0%, #050B1A 40%, #03070F 100%);
}

/* 星空容器 */
.stars-field {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* 星星 */
.star {
    position: absolute;
    border-radius: 50%;
    background: white;
}

/* 小星星层 */
.stars-sm {
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
        120px 45px #fff, 340px 120px rgba(255,255,255,0.8), 560px 78px #fff,
        780px 200px rgba(255,255,255,0.6), 95px 280px #fff, 420px 310px rgba(255,255,255,0.7),
        650px 95px #fff, 870px 165px rgba(255,255,255,0.9), 1100px 230px #fff,
        1300px 85px rgba(255,255,255,0.6), 1500px 180px #fff, 180px 420px rgba(255,255,255,0.8),
        380px 480px #fff, 600px 360px rgba(255,255,255,0.7), 820px 440px #fff,
        1020px 390px rgba(255,255,255,0.5), 1200px 470px #fff, 1450px 350px rgba(255,255,255,0.8),
        50px 520px #fff, 280px 580px rgba(255,255,255,0.6), 500px 540px #fff,
        720px 610px rgba(255,255,255,0.9), 940px 560px #fff, 1160px 620px rgba(255,255,255,0.7),
        1380px 530px #fff, 60px 680px rgba(255,255,255,0.5), 320px 720px #fff,
        540px 690px rgba(255,255,255,0.8), 760px 750px #fff, 980px 700px rgba(255,255,255,0.6),
        1120px 770px #fff, 1340px 710px rgba(255,255,255,0.9), 1560px 680px #fff,
        200px 150px rgba(255,255,255,0.7), 460px 200px #fff, 680px 140px rgba(255,255,255,0.5),
        900px 310px #fff, 1050px 260px rgba(255,255,255,0.8), 1250px 140px #fff,
        1480px 290px rgba(255,255,255,0.6), 30px 350px #fff, 240px 390px rgba(255,255,255,0.7);
    animation: stars-twinkle 4s ease-in-out infinite alternate;
}

/* 中星星层 */
.stars-md {
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow:
        150px 80px rgba(200,220,255,0.9), 400px 170px rgba(255,255,200,0.8),
        650px 45px rgba(200,220,255,0.7), 850px 240px rgba(255,255,255,0.9),
        1150px 110px rgba(200,220,255,0.8), 1400px 220px rgba(255,255,200,0.6),
        220px 360px rgba(200,220,255,0.9), 480px 430px rgba(255,255,255,0.7),
        720px 390px rgba(255,255,200,0.8), 960px 460px rgba(200,220,255,0.9),
        1200px 340px rgba(255,255,255,0.6), 1460px 410px rgba(200,220,255,0.8),
        100px 580px rgba(255,255,200,0.7), 360px 620px rgba(200,220,255,0.9),
        580px 560px rgba(255,255,255,0.8), 800px 640px rgba(255,255,200,0.6),
        1080px 590px rgba(200,220,255,0.9), 1320px 660px rgba(255,255,255,0.7);
    animation: stars-twinkle 6s ease-in-out infinite alternate-reverse;
}

/* 大星星层（带光晕） */
.stars-lg {
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow:
        280px 130px rgba(0,212,255,0.9), 750px 310px rgba(255,215,0,0.8),
        1100px 190px rgba(0,212,255,0.7), 1400px 420px rgba(255,255,255,0.9),
        500px 550px rgba(255,215,0,0.8), 900px 480px rgba(0,212,255,0.9),
        200px 700px rgba(255,255,255,0.7), 1300px 620px rgba(255,215,0,0.8);
    filter: blur(0.5px);
    animation: stars-twinkle 8s ease-in-out infinite;
}

@keyframes stars-twinkle {
    0% { opacity: 0.4; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* 流星动画 */
.meteors {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.meteor {
    position: absolute;
    width: 2px;
    height: 80px;
    background: linear-gradient(to bottom, rgba(0,212,255,0), rgba(0,212,255,0.8), rgba(255,255,255,1));
    border-radius: 2px;
    transform: rotate(-45deg);
    animation: meteor-fall linear infinite;
    opacity: 0;
}

.meteor:nth-child(1) { top: 10%; left: 20%; animation-duration: 8s; animation-delay: 0s; }
.meteor:nth-child(2) { top: 5%; left: 60%; animation-duration: 12s; animation-delay: 3s; }
.meteor:nth-child(3) { top: 15%; left: 80%; animation-duration: 10s; animation-delay: 6s; }
.meteor:nth-child(4) { top: 8%; left: 40%; animation-duration: 15s; animation-delay: 9s; }
.meteor:nth-child(5) { top: 3%; left: 90%; animation-duration: 9s; animation-delay: 12s; }

@keyframes meteor-fall {
    0% { opacity: 0; transform: rotate(-45deg) translateY(-200px) translateX(-200px); }
    5% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 0; transform: rotate(-45deg) translateY(500px) translateX(500px); }
}

/* 招财七星装饰 */
.beidou-decoration {
    position: absolute;
    top: 8%;
    right: 4%;
    width: 200px;
    height: 150px;
    opacity: 0.12;
    animation: beidou-rotate 60s linear infinite;
}

.beidou-decoration::before {
    content: '🛰';
    font-size: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.5));
    animation: satellite-orbit 20s ease-in-out infinite;
}

@keyframes beidou-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes satellite-orbit {
    0%, 100% { transform: translate(-50%, -50%) translateX(0) translateY(0); }
    25% { transform: translate(-50%, -50%) translateX(30px) translateY(-20px); }
    50% { transform: translate(-50%, -50%) translateX(0) translateY(-40px); }
    75% { transform: translate(-50%, -50%) translateX(-30px) translateY(-20px); }
}

/* 星云背景光效 */
.nebula-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.nebula-glow:nth-child(1) {
    width: 400px;
    height: 300px;
    background: radial-gradient(ellipse, rgba(74, 144, 217, 0.08) 0%, transparent 70%);
    top: 10%;
    left: 5%;
    animation: nebula-pulse 10s ease-in-out infinite;
}

.nebula-glow:nth-child(2) {
    width: 500px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(123, 104, 238, 0.06) 0%, transparent 70%);
    bottom: 20%;
    right: 10%;
    animation: nebula-pulse 14s ease-in-out infinite reverse;
}

.nebula-glow:nth-child(3) {
    width: 350px;
    height: 250px;
    background: radial-gradient(ellipse, rgba(0, 212, 255, 0.05) 0%, transparent 70%);
    top: 50%;
    left: 40%;
    animation: nebula-pulse 12s ease-in-out infinite 2s;
}

@keyframes nebula-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* 扫描线效果 */
.scan-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(0, 212, 255, 0.15), transparent);
    animation: scan 8s linear infinite;
    pointer-events: none;
}

@keyframes scan {
    0% { top: -2px; opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 0.3; }
    100% { top: 100%; opacity: 0; }
}

/* ==================== 容器布局 ==================== */
.container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 100vh;
}

/* 授权只剩一格时撑满整行 */
.top-control-panel.beidou-auth-only {
    grid-template-columns: 1fr;
    max-width: 100%;
}

/* 顶部控制面板 - 横向布局（默认两格） */
.top-control-panel {
    display: grid;
    grid-template-columns: 1.2fr 1.8fr;
    gap: 20px;
    animation: slideDown 0.6s ease;
}

/* 主要内容区 - 双栏布局 */
.main-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 20px;
    flex: 1;
    align-items: start;
}

/* ==================== 头部 - 招财风格 ==================== */
.ocean-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    /*background: linear-gradient(135deg, rgba(8, 18, 48, 0.98) 0%, rgba(12, 25, 60, 0.95) 100%);*/
    border: 1px solid var(--border-color);
    border-top: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 18px;
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(0, 212, 255, 0.1);
    animation: slideDown 0.5s ease;
    position: relative;
    overflow: hidden;
}

.ocean-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.05), transparent);
    animation: shimmer 4s infinite;
}

.ocean-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0, 212, 255, 0.4), transparent);
}

@keyframes shimmer {
    100% { left: 100%; }
}

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

.logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo-container i {
    font-size: 36px;
    color: var(--bd-accent);
    animation: satellite-spin 8s linear infinite;
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.6));
}

@keyframes satellite-spin {
    0% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 6px rgba(0,212,255,0.6)); }
    25% { transform: rotate(5deg) scale(1.05); }
    50% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 12px rgba(0,212,255,0.9)); }
    75% { transform: rotate(-5deg) scale(1.05); }
    100% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 6px rgba(0,212,255,0.6)); }
}

.logo-container h1 {
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(135deg, #00D4FF, #7B68EE, #FFD700, #00D4FF);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: title-glow 4s ease infinite;
    letter-spacing: 1px;
}

@keyframes title-glow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(74, 144, 217, 0.08));
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 25px;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.1);
}

.status-dot {
    width: 10px;
    height: 10px;
    background: var(--bd-green);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--bd-green), 0 0 16px rgba(0, 230, 118, 0.4);
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 8px var(--bd-green); }
    50% { transform: scale(1.3); opacity: 0.8; box-shadow: 0 0 16px var(--bd-green), 0 0 24px rgba(0,230,118,0.3); }
}

.status-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--bd-accent);
}

/* ==================== 侧边栏 & 内容面板 ==================== */
.sidebar-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: slideRight 0.6s ease 0.15s both;
    position: sticky;
    top: 20px;
    align-self: start;
}

@keyframes slideRight {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

.content-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: slideLeft 0.6s ease 0.2s both;
}

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

/* ==================== 招财筛选卡片 - 侧边栏内垂直布局 ==================== */
.beidou-filter-card {
    /* 覆盖授权卡水平布局的内边距 */
}

.beidou-filter-card .card-body {
    padding: 20px 22px;
}

/* 横向布局改成纵向 */
.filter-vertical-layout {
    flex-direction: column !important;
    gap: 14px !important;
    align-items: stretch !important;
}

/* 筛选控件纵向堆叠 */
.filter-controls-vertical {
    flex-direction: column !important;
    gap: 10px !important;
}

.filter-controls-vertical .ocean-select-compact,
.filter-controls-vertical .ocean-input-compact {
    width: 100%;
    min-width: unset;
    flex: none;
}

/* 启用筛选开关横向对齐 */
.filter-vertical-layout .filter-toggle {
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

/* 项目列表在筛选入驻侧边后，限制最大高度 */
.sidebar-panel .projects-card-vertical {
    max-height: calc(100vh - 520px);
}

.sidebar-panel .projects-list-compact {
    max-height: calc(100vh - 620px);
    min-height: 120px;
}

/* ==================== 卡片样式 - 招财风格 ==================== */
.ocean-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: all var(--transition-normal);
    position: relative;
}

.ocean-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0, 212, 255, 0.4), transparent);
}

.ocean-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-lg), 0 0 25px rgba(0, 212, 255, 0.1);
    transform: translateY(-2px);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 25px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.06), rgba(74, 144, 217, 0.06));
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.card-header i {
    font-size: 18px;
    color: var(--bd-accent);
    filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.5));
}

.card-header h3 {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}

.card-body {
    padding: 25px;
}

/* ==================== 按钮样式 - 招财风格 ==================== */
.ocean-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(74, 144, 217, 0.2));
    border: 1px solid rgba(0, 212, 255, 0.4);
    border-radius: 10px;
    color: var(--bd-accent);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-fast);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.1);
    letter-spacing: 0.3px;
}

.ocean-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(0, 212, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.ocean-btn:hover::before {
    width: 300px;
    height: 300px;
}

.ocean-btn:hover {
    border-color: var(--bd-accent);
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.25), rgba(74, 144, 217, 0.3));
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.25), 0 4px 15px rgba(0, 0, 0, 0.3);
    color: white;
}

.ocean-btn:active {
    transform: translateY(0);
}

.ocean-btn-primary {
    background: linear-gradient(135deg, rgba(74, 144, 217, 0.3), rgba(0, 212, 255, 0.25));
    border-color: var(--bd-primary);
    color: var(--bd-accent);
}

.ocean-btn-success {
    background: linear-gradient(135deg, rgba(0, 230, 118, 0.2), rgba(0, 212, 255, 0.15));
    border-color: rgba(0, 230, 118, 0.5);
    color: var(--bd-green);
    box-shadow: 0 0 10px rgba(0, 230, 118, 0.1);
}

.ocean-btn-success:hover {
    background: linear-gradient(135deg, rgba(0, 230, 118, 0.35), rgba(0, 212, 255, 0.2));
    border-color: var(--bd-green);
    color: white;
    box-shadow: 0 0 20px rgba(0, 230, 118, 0.3);
}

.ocean-btn-warning {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.12));
    border-color: rgba(255, 215, 0, 0.4);
    color: var(--bd-gold);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.1);
}

.ocean-btn-warning:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 165, 0, 0.25));
    border-color: var(--bd-gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.25);
    color: white;
}

.ocean-btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    box-shadow: none;
}

.ocean-btn-outline:hover {
    border-color: var(--bd-accent);
    color: var(--bd-accent);
    background: rgba(0, 212, 255, 0.08);
}

.ocean-btn-large {
    width: 100%;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
}

.ocean-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(0, 212, 255, 0.06);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ocean-btn-icon:hover {
    background: rgba(0, 212, 255, 0.15);
    border-color: var(--bd-accent);
    color: var(--bd-accent);
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
}

/* ==================== 输入框 - 招财风格 ==================== */
.input-group {
    display: flex;
    gap: 10px;
}

.ocean-input {
    flex: 1;
    padding: 11px 16px;
    background: rgba(0, 212, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: all var(--transition-fast);
}

.ocean-input:focus {
    border-color: var(--bd-accent);
    background: rgba(0, 212, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1), 0 0 15px rgba(0, 212, 255, 0.1);
}

.ocean-input::placeholder {
    color: var(--text-muted);
}

/* ==================== 授权卡片 - 横向布局 ==================== */
.auth-card-horizontal .card-body {
    padding: 18px 25px;
}

.auth-horizontal-layout {
    display: flex;
    align-items: center;
    gap: 20px;
}

.input-group-horizontal {
    display: flex;
    gap: 10px;
    flex: 1;
}

.input-group-horizontal .ocean-input {
    flex: 1;
    min-width: 200px;
}

/* ==================== 授权状态 ==================== */
.auth-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(0, 212, 255, 0.05);
    border-left: 2px solid rgba(0, 212, 255, 0.4);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 200px;
}

.auth-status.success {
    background: rgba(0, 230, 118, 0.08);
    border-left-color: var(--bd-green);
    color: var(--bd-green);
    box-shadow: 0 0 8px rgba(0, 230, 118, 0.1);
}

.auth-status.error {
    background: rgba(255, 107, 107, 0.08);
    border-left-color: var(--bd-red);
    color: var(--bd-red);
}

/* ==================== 筛选卡片 - 横向布局 ==================== */
.filter-card-horizontal .card-body {
    padding: 18px 25px;
}

.filter-horizontal-layout {
    display: flex;
    align-items: center;
    gap: 15px;
}

.filter-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.filter-toggle label:first-child {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.filter-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.ocean-select-compact,
.ocean-input-compact {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
    min-width: 120px;
}

/* ==================== 项目列表 ==================== */
.projects-card-vertical {
    height: fit-content;
    max-height: calc(100vh - 300px);
}

.projects-list-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    overflow-x: hidden;
}

.project-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgba(0, 212, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: all var(--transition-fast);
    animation: fadeInUp 0.4s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.project-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--bd-accent), var(--bd-secondary));
    opacity: 0;
    transition: opacity var(--transition-fast);
}

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

.project-item:hover {
    background: rgba(0, 212, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.3);
    transform: translateX(3px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 212, 255, 0.08);
}

.project-item:hover::before {
    opacity: 1;
}

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

.project-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-code {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
}

.project-count {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 55px;
}

.count-value {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--bd-accent), var(--bd-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.3));
}

.count-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ==================== 空状态 ==================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    color: var(--text-muted);
}

.empty-state i {
    font-size: 50px;
    margin-bottom: 15px;
    opacity: 0.2;
    color: var(--bd-accent);
}

.empty-state p {
    font-size: 14px;
    color: var(--text-muted);
}

/* ==================== 开关按钮 - 招财风格 ==================== */
.ocean-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid var(--border-color);
    border-radius: 34px;
    transition: all var(--transition-fast);
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: all var(--transition-fast);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

input:checked + .slider {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(74, 144, 217, 0.3));
    border-color: var(--bd-accent);
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}

input:checked + .slider:before {
    transform: translateX(24px);
    background: var(--bd-accent);
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}

/* ==================== 下拉选择 - 招财风格 ==================== */
.ocean-select {
    width: 100%;
    padding: 11px 16px;
    background: rgba(0, 212, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ocean-select:focus {
    border-color: var(--bd-accent);
    background: rgba(0, 212, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

.ocean-select-lg {
    padding: 13px 18px;
    font-size: 15px;
}

.ocean-select option {
    background: #0A1628;
    color: var(--text-primary);
}

/* ==================== 过滤项 ==================== */
.filter-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-item label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
}

/* ==================== 获取号码区域 ==================== */
.fetch-card-compact .card-body {
    padding: 18px 25px;
}

.fetch-controls-horizontal {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.control-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.control-item label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.control-item-narrow {
    flex: 0 0 auto;
}

.number-input-compact {
    display: flex;
    align-items: center;
    gap: 6px;
}

.number-btn-sm {
    width: 32px;
    height: 32px;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--bd-accent);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.number-btn-sm:hover {
    background: rgba(0, 212, 255, 0.2);
    border-color: var(--bd-accent);
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.2);
}

.ocean-input-number-sm {
    width: 55px;
    text-align: center;
    padding: 7px 8px;
    background: rgba(0, 212, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    outline: none;
}

.ocean-input-number-sm::-webkit-inner-spin-button,
.ocean-input-number-sm::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.ocean-btn-action {
    white-space: nowrap;
    padding: 11px 24px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* ==================== 表格 - 招财风格 ==================== */
.table-card-full {
    flex: 1;
}

.ocean-table-wrapper {
    overflow-x: auto;
    border-radius: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 212, 255, 0.3) transparent;
}

.ocean-table-wrapper::-webkit-scrollbar {
    height: 6px;
}

.ocean-table-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.ocean-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.3);
    border-radius: 3px;
}

.ocean-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ocean-table thead th {
    padding: 14px 12px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(74, 144, 217, 0.08));
    color: var(--bd-accent);
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 10;
}

.ocean-table thead th:first-child {
    border-radius: 8px 0 0 0;
}

.ocean-table thead th:last-child {
    border-radius: 0 8px 0 0;
}

.ocean-table tbody tr {
    border-bottom: 1px solid rgba(0, 212, 255, 0.05);
    transition: all var(--transition-fast);
    animation: fadeInUp 0.3s ease;
}

.ocean-table tbody tr:hover {
    background: rgba(0, 212, 255, 0.05);
}

.ocean-table tbody td {
    padding: 13px 12px;
    text-align: center;
    color: var(--text-secondary);
    vertical-align: middle;
}

/* 多码列控制 */
body.platform-type-1 .multi-code-col {
    display: none !important;
}

body.platform-type-3 .multi-code-col {
    display: table-cell !important;
}

/* ==================== 状态徽章 - 招财风格 ==================== */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid;
}

.status-badge.success {
    background: rgba(0, 230, 118, 0.1);
    color: var(--bd-green);
    border-color: rgba(0, 230, 118, 0.3);
    box-shadow: 0 0 8px rgba(0, 230, 118, 0.1);
}

.status-badge.error {
    background: rgba(255, 107, 107, 0.1);
    color: var(--bd-red);
    border-color: rgba(255, 107, 107, 0.3);
}

.status-badge.waiting {
    background: rgba(255, 215, 0, 0.08);
    color: var(--bd-gold);
    border-color: rgba(255, 215, 0, 0.3);
    animation: blink 1.5s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.status-badge.coding {
    background: rgba(0, 212, 255, 0.1);
    color: var(--bd-accent);
    border-color: rgba(0, 212, 255, 0.3);
    animation: blink 1.2s ease-in-out infinite;
}

.status-badge.stopped {
    background: rgba(90, 106, 138, 0.15);
    color: var(--text-muted);
    border-color: rgba(90, 106, 138, 0.3);
}

/* ==================== 复选框 ==================== */
.ocean-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--bd-accent);
    cursor: pointer;
}

/* ==================== 通知 ==================== */
.notifications {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
}

.notification {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(8, 18, 48, 0.96);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: slideInRight 0.3s ease;
    color: var(--text-primary);
    font-size: 14px;
}

.notification.success {
    border-color: rgba(0, 230, 118, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 230, 118, 0.1);
}

.notification.success i { color: var(--bd-green); }

.notification.error {
    border-color: rgba(255, 107, 107, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 107, 107, 0.1);
}

.notification.error i { color: var(--bd-red); }

.notification.warning {
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.08);
}

.notification.warning i { color: var(--bd-gold); }

.notification.info i { color: var(--bd-accent); }

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

/* ==================== 加载动画 ==================== */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 212, 255, 0.2);
    border-top: 2px solid var(--bd-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

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

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.25);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 255, 0.45);
}

/* ==================== 响应式 ==================== */
@media (max-width: 1200px) {
    .main-layout {
        grid-template-columns: 300px 1fr;
    }
}

@media (max-width: 900px) {
    .main-layout {
        grid-template-columns: 1fr;
    }
    .top-control-panel {
        grid-template-columns: 1fr;
    }
    .sidebar-panel {
        position: static;
    }
}

/* ==================== 数字输入框 ==================== */
input[type="number"] {
    -moz-appearance: textfield;
}

/* ==================== 任务行 ==================== */
.task-item {
    transition: background 0.2s ease;
}

/* ==================== 手机号文字 ==================== */
.task-phone {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 14px;
    color: var(--bd-accent);
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}

/* ==================== 表格内按钮 ==================== */
.ocean-btn-sm {
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 7px;
    height: 28px;
}

/* ==================== 分页 ==================== */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    padding: 15px;
    background: rgba(0, 212, 255, 0.03);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.pagination-btn {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(74, 144, 217, 0.15));
    border: 1px solid rgba(0, 212, 255, 0.3);
    color: var(--bd-accent);
    padding: 7px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
}

.pagination-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
}

.pagination-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pagination-info {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
}

/* ==================== 停止按钮 ==================== */
.ocean-btn-danger {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.15), rgba(220, 53, 69, 0.12));
    border-color: rgba(255, 107, 107, 0.4);
    color: var(--bd-red);
}

.ocean-btn-danger:hover {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.3), rgba(220, 53, 69, 0.25));
    border-color: var(--bd-red);
    box-shadow: 0 0 12px rgba(255, 107, 107, 0.2);
    color: white;
}

/* ==================== 代码/验证码字体 ==================== */
.code-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.code-text {
    font-family: 'Courier New', monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--bd-accent);
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.copy-btn {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(74, 144, 217, 0.2));
    border: 1px solid rgba(0, 212, 255, 0.3);
    color: var(--bd-accent);
    padding: 3px 9px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 24px;
}

.copy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 212, 255, 0.25);
    border-color: var(--bd-accent);
}

.copy-btn.copied {
    background: linear-gradient(135deg, rgba(0, 230, 118, 0.2), rgba(0, 212, 255, 0.15));
    border-color: var(--bd-green);
    color: var(--bd-green);
}

/* ==================== 筛选徽章 ==================== */
.filter-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.filter-registered {
    background: rgba(255, 107, 107, 0.1);
    color: var(--bd-red);
    border: 1px solid rgba(255, 107, 107, 0.3);
}

.filter-unregistered {
    background: rgba(0, 230, 118, 0.1);
    color: var(--bd-green);
    border: 1px solid rgba(0, 230, 118, 0.3);
}

.filter-unknown {
    background: rgba(90, 106, 138, 0.15);
    color: var(--text-muted);
    border: 1px solid rgba(90, 106, 138, 0.3);
}

/* ==================== 内联下拉框 ==================== */
.ocean-select-inline {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
}

/* ==================== 停止全部按钮区域 ==================== */
.stop-all-container {
    display: flex;
    justify-content: flex-end;
    padding: 0 0 10px 0;
}