/* 基础样式 */
:root {
    --primary-color: #1890ff;
    --success-color: #52c41a;
    --warning-color: #da740d;
    --danger-color: #ff4d4f;
    --info-color: #13c2c2;
}

body {
    background-color: #f5f7fa;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* 顶部导航 */
.header {
    background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
    color: white;
    padding: 12px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.logo {
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.logo i {
    font-size: 24px;
    margin-right: 10px;
    color: #ffd700;
}

.user-info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.balance {
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 20px;
    margin-right: 15px;
    font-size: 14px;
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

/* Tab导航 */
.tab-nav {
    background: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 0.5rem;
}

.tab-nav .nav-tabs {
    border-bottom: none;
}

.tab-nav .nav-item {
    margin-bottom: -1px;
}

.tab-nav .nav-link {
    color: #666;
    border: none;
    padding: 15px 20px;
    border-radius: 0;
    position: relative;
    transition: all 0.3s;
}

.tab-nav .nav-link:hover {
    color: var(--primary-color);
    background: rgba(24, 144, 255, 0.05);
}

.tab-nav .nav-link.active {
    color: var(--primary-color);
    background: transparent;
    border-bottom: 2px solid var(--primary-color);
    font-weight: bold;
}

/* 统计卡片 */
.stats-card {
    background: white;
    border-radius: 6px;
    padding: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 15px;
}

.stats-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.stats-title {
    color: #666;
    font-size: 14px;
    margin-bottom: 10px;
}

.stats-value {
    font-size: 28px;
    font-weight: bold;
    color: #333;
}

.stats-icon {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 48px;
    opacity: 0.1;
    color: var(--primary-color);
}

/* 面板样式 */
.panel {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    overflow: hidden;
}

.panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fafafa;
}

.panel-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
}

.panel-title i {
    margin-right: 8px;
    color: var(--primary-color);
}

.panel-content {
    padding: 0;
    max-height: 600px;
    overflow-y: auto;
}


.order-item {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.order-item:hover {
    background: #fafafa;
    transform: translateX(5px);
}

.order-item.processing-order {
    background: linear-gradient(90deg, rgba(24, 144, 255, 0.05) 0%, transparent 100%);
    border-left: 3px solid var(--primary-color);
}

.order-item.skipped-order {
    background: linear-gradient(90deg, rgba(250, 173, 20, 0.05) 0%, transparent 100%);
    border-left: 3px solid var(--warning-color);
}

.order-item.expired-order {
    background: linear-gradient(90deg, rgba(255, 77, 79, 0.05) 0%, transparent 100%);
    border-left: 3px solid var(--danger-color);
    opacity: 0.7;
}

.order-no {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.order-no span:first-child {
    font-weight: bold;
    color: #333;
}

.order-info {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 8px;
    color: #666;
    font-size: 14px;
}

.order-info span {
    display: flex;
    align-items: center;
}

.order-price {
    font-size: 16px;
    color: #f5222d;
    font-weight: bold;
    margin-bottom: 8px;
}

.order-deadline {
    color: #666;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.countdown {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 13px;
}

.countdown.warning {
    color: var(--warning-color);
    background: rgba(250, 173, 20, 0.1);
}

.countdown.urgent {
    color: var(--danger-color);
    background: rgba(255, 77, 79, 0.1);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.price-detail {
    margin-top: 10px;
    padding: 10px;
    background: #f6ffed;
    border: 1px solid #b7eb8f;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.suggest-price {
    color: var(--success-color);
    font-weight: bold;
}

.actual-price {
    color: var(--primary-color);
    font-weight: bold;
}

/* 日志列表 */
.log-list {
    padding: 20px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 13px;
    line-height: 1.5;
    max-height: 500px;
    overflow-y: auto;
}

.log-item {
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 4px;
    border-left: 3px solid transparent;
}

.log-item.info {
    background: #e6f7ff;
    border-left-color: var(--primary-color);
}

.log-item.success {
    background: #f6ffed;
    border-left-color: var(--success-color);
}

.log-item.error {
    background: #fff2f0;
    border-left-color: var(--danger-color);
}

.log-item.price {
    background: #fff7e6;
    border-left-color: var(--warning-color);
}
 .log-item.warning {
        background: #fff7e6;
        border-left-color: var(--warning-color);
    }

.log-time {
    color: #666;
    font-size: 12px;
}

.log-content {
    color: #333;
}

/* 加载器 */
.loader {
    padding: 40px;
    text-align: center;
    color: #666;
}

.loader i {
    margin-right: 10px;
}


/* 模态框样式 */
.modal-header {
    background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
    color: white;
}

.modal-title {
    font-weight: bold;
}

/* 数据表格 */
.data-table {
    margin-top: 20px;
}

.data-table .table th {
    background: #fafafa;
    font-weight: 600;
    border-top: none;
}

/* 分页样式 */
.pagination-container {
    display: flex;
    justify-content: center;
    padding: 20px;
    background: white;
    border-top: 1px solid #eee;
}

/* 筛选工具栏 */
.filter-toolbar {
    background: white;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .panel-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .panel-header > div {
        margin-top: 10px;
    }

    .order-info {
        flex-direction: column;
        gap: 5px;
    }

    .stats-card {
        height: auto;
    }
}

/* 空状态 */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 20px;
    opacity: 0.3;
}

/* 状态标签 */
.status-badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: normal;
}

.status-pending {
    background: #e6f7ff;
    color: var(--primary-color);
}

.status-quoted {
    background: #f6ffed;
    color: var(--success-color);
}

.status-won {
    background: #fff7e6;
    color: var(--warning-color);
}

.status-checking {
    background: #f9f0ff;
    color: #722ed1;
}

.status-completed {
    background: #fafafa;
    color: #666;
}

/* 订单更新动画 */
.order-item-updating {
    animation: updateFlash 0.5s ease-in-out;
}

@keyframes updateFlash {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(24, 144, 255, 0.1); }
}


         /* 队列可视化样式 */
     .queue-visualization {
         background: #f8f9fa;
         border-radius: 6px;
         padding: 10px;
         margin-bottom: 10px;
         border: 1px solid #e9ecef;
     }

    .queue-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;
        padding-bottom: 10px;
        border-bottom: 1px solid #dee2e6;
    }

    .queue-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        display: flex;
        align-items: center;
    }

    .queue-stats {
        display: flex;
        gap: 8px;
    }

    .queue-stat {
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 4px;
        background: #fff;
        border: 1px solid #dee2e6;
        color: #666;
    }

    /* 处理控制栏 */
    .process-control-bar {
        background: white;
        border-radius: 6px;
        padding: 5px 5px;
        margin-bottom: 5px;
        border: 1px solid #dee2e6;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

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

    .status-indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

    .status-indicator.active {
        background: #52c41a;
        box-shadow: 0 0 8px rgba(82, 196, 26, 0.6);
        animation: breathing 2s infinite;
    }

    .status-indicator.paused {
        background: #1890ff;
    }

    .status-indicator.stopped {
        background: #8c8c8c;
    }

    .control-timer {
        font-family: monospace;
        font-size: 16px;
        font-weight: bold;
        color: #333;
    }

    /* 进度指示器 */
    .progress-indicator {
        background: white;
        border-radius: 6px;
        padding: 10px;
        margin-bottom: 5px;
        border: 1px solid #dee2e6;
    }

    .progress-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;
    }

    .progress-title {
        font-size: 14px;
        font-weight: bold;
        color: #333;
    }

    .progress-timer {
        font-size: 12px;
        color: #666;
        font-family: monospace;
    }

    .progress-steps {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        margin: 15px 0;
    }

    .progress-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 2;
        flex: 1;
    }

    .step-dot {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
        color: white;
        margin-bottom: 5px;
        transition: all 0.3s;
    }

    .step-label {
        font-size: 11px;
        color: #666;
        text-align: center;
        max-width: 80px;
        white-space: nowrap;
    }

    .progress-step.active .step-dot {
        background: #fa8c16;
        box-shadow: 0 0 0 4px rgba(250, 140, 22, 0.2);
    }

    .progress-step.completed .step-dot {
        background: #52c41a;
    }

    .progress-step.pending .step-dot {
        background: #d9d9d9;
        color: #999;
    }

    .progress-bar {
        position: absolute;
        top: 12px;
        left: 10%;
        right: 10%;
        height: 2px;
        background: #d9d9d9;
        z-index: 1;
    }

    .progress-fill {
        height: 100%;
        background: #52c41a;
        transition: width 0.3s;
    }

    /* 队列项 */
    .queue-items {
        max-height: 200px;
        overflow-y: auto;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        background: white;
    }

    .queue-item {
        padding: 10px 15px;
        border-bottom: 1px solid #f0f0f0;
        transition: all 0.3s;
    }

    .queue-item:last-child {
        border-bottom: none;
    }

    .queue-item.current {
        background: linear-gradient(135deg, #fff8e6 0%, #fffbef 100%);
        border-left: 3px solid #fa8c16;
        animation: breathing 2s infinite;
    }

    .queue-item.next {
        background: linear-gradient(135deg, #e6f7ff 0%, #f0faff 100%);
        border-left: 3px solid #1890ff;
    }

    .queue-item.urgent {
        background: linear-gradient(135deg, #fff1f0 0%, #fffafa 100%);
        border-left: 3px solid #f5222d;
        animation: urgent-flash 1s infinite;
    }

    .queue-item .d-flex {
        align-items: center;
    }

    .queue-position {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 12px;
        margin-right: 10px;
        flex-shrink: 0;
        color: white;
    }

    .queue-item.waiting .queue-position {
        background: #1890ff;
    }

    .queue-item.processing .queue-position {
        background: #fa8c16;
    }

    .queue-item.urgent .queue-position {
        background: #f5222d;
    }

    .order-no {
        font-weight: bold;
        color: #333;
        font-size: 13px;
        margin-bottom: 2px;
    }

    .device-info {
        font-size: 12px;
        color: #666;
        margin-bottom: 2px;
    }

    .time-left {
        font-size: 11px;
        font-weight: bold;
    }

    .queue-item.waiting .time-left {
        color: #1890ff;
    }

    .queue-item.processing .time-left {
        color: #fa8c16;
    }

    .queue-item.urgent .time-left {
        color: #f5222d;
    }

    .status-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-left: 10px;
    }

    .queue-item.waiting .status-indicator {
        background: #1890ff;
    }

    .queue-item.processing .status-indicator {
        background: #fa8c16;
    }

    .queue-item.urgent .status-indicator {
        background: #f5222d;
    }

    /* 动画 */
    @keyframes breathing {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.6; }
    }

    @keyframes urgent-flash {
        0%, 100% { background-color: rgba(245, 34, 45, 0.1); }
        50% { background-color: rgba(245, 34, 45, 0.3); }
    }

    @keyframes slide-out {
        0% { transform: translateX(0); opacity: 1; }
        100% { transform: translateX(-100%); opacity: 0; }
    }

    /* 订单状态 */
    .order-item.waiting {
        border-left: 4px solid #1890ff;
    }

    .order-item.processing {
        border-left: 4px solid #fa8c16;
        animation: breathing 2s infinite;
    }

    .order-item.urgent {
        border-left: 4px solid #f5222d;
        animation: urgent-flash 1s infinite;
    }

    .order-item.success {
        border-left: 4px solid #52c41a;
    }

    .order-item.failed {
        border-left: 4px solid #ff4d4f;
    }

    .order-item.expired {
        border-left: 4px solid #8c8c8c;
    }

    .order-item.manual {
        border-left: 4px solid #722ed1;
    }

    .order-item.sliding-out {
        animation: slide-out 0.5s ease forwards;
    }

    .order-item .status-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        opacity: 0;
        transition: opacity 0.3s;
        z-index: 2;
    }

    .order-item.processing .status-overlay,
    .order-item.urgent .status-overlay {
        opacity: 1;
    }

    .order-item.processing .status-overlay {
        color: #fa8c16;
    }

    .order-item.urgent .status-overlay {
        color: #f5222d;
    }

    /* 徽章颜色调整 */
    .badge-info {
        background-color: #1890ff !important;
    }

    .badge-primary {
        background-color: #fa8c16 !important;
    }

    .badge-warning {
        background-color: #f5222d !important;
    }

    .badge-success {
        background-color: #52c41a !important;
    }

    .badge-danger {
        background-color: #ff4d4f !important;
    }

    .badge-secondary {
        background-color: #8c8c8c !important;
    }

    .badge-purple {
        background-color: #722ed1 !important;
        color: white !important;
    }

    /* 悬停效果 */
    .queue-item.hovered {
        background: #f8f9fa !important;
        border-color: #1890ff !important;
        cursor: pointer;
    }

    .order-item.selected {
        background: linear-gradient(135deg, #e6f7ff 0%, #f0faff 100%);
        border-color: #1890ff !important;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }

    /* 布局调整 */
    .panel-content {
        display: flex;
        flex-direction: column;
        min-height: 600px;
    }



    .log-list {
        height: 600px;
        overflow-y: auto;
        border: 1px solid #e9ecef;
        border-radius: 4px;
        padding: 10px;
        background: #f8f9fa;
    }

    .empty-state {
        text-align: center;
        padding: 40px 20px;
        color: #999;
    }

    .loader {
        text-align: center;
        padding: 0px;
        color: #666;
    }

    /* 倒计时样式 */
    .countdown {
        font-weight: bold;
        padding: 2px 6px;
        border-radius: 3px;
        font-size: 12px;
    }

    .countdown.urgent {
        background: #f5222d;
        color: white;
        animation: urgent-flash 1s infinite;
    }

    .countdown.warning {
        background: #fa8c16;
        color: white;
    }

    .countdown {
        background: #52c41a;
        color: white;
    }

    /* 响应式 */
    @media (max-width: 768px) {
        .queue-stats {
            flex-direction: column;
            gap: 4px;
        }

        .progress-steps {
            flex-wrap: wrap;
            gap: 10px;
        }

        .progress-step {
            flex: 0 0 calc(50% - 10px);
        }

        .progress-bar {
            display: none;
        }
    }
    /* 隐藏queue-items的滚动条但保留滚动功能 */
    .queue-items  {
        overflow: auto;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
    }

    .queue-items::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    /* 隐藏queue-items的滚动条但保留滚动功能 */
    .panel-content  {
        overflow: auto;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
    }

    .panel-content::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }