* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

body {
    font-family: 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f0f2f5;
    min-height: 100vh;
    color: #333;
    font-size: 12px;
}

.container {
    display: flex;
    min-height: 100vh;
    max-width: 100vw;
    overflow-x: hidden;
}

/* 侧边栏样式 - 白色 */
.sidebar {
    width: 160px;
    background: #ffffff;
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.08);
    border-right: 1px solid #eee;
}

.logo {
    text-align: center;
    padding: 15px 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
}

.logo img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.logo h2 {
    color: #333;
    font-size: 12px;
    font-weight: 600;
}

.nav-menu {
    flex: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    font-size: 12px;
}

.nav-item:hover {
    background: #f8f9fa;
    color: #333;
}

.nav-item.active {
    background: #f0f0f0;
    color: #333;
    border-left-color: #333;
}

.nav-item i {
    font-size: 16px;
    margin-right: 10px;
}

.sidebar-footer {
    padding: 15px;
    text-align: center;
    color: #999;
    font-size: 11px;
    border-top: 1px solid #eee;
}

/* 主内容区 */
.main-content {
    flex: 1;
    padding: 20px 25px;
    overflow-y: auto;
    background: #f0f2f5;
}

/* 公告栏 - 浅黄色背景 + 滚动效果 */
.notice-bar {
    background: #fff3cd;
    color: #856404;
    padding: 12px 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 13px;
    border: 1px solid #ffc107;
    overflow: hidden;
}

.notice-label {
    background: #ffc107;
    color: #856404;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 12px;
    margin-right: 12px;
    flex-shrink: 0;
    font-weight: 600;
}

.notice-text {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.notice-text-inner {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 15s linear infinite;
    padding-left: 100%;
}

.notice-text-inner:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.close-notice {
    background: none;
    border: none;
    color: #856404;
    font-size: 20px;
    cursor: pointer;
    padding: 0 5px;
    opacity: 0.8;
    flex-shrink: 0;
    margin-left: 10px;
}

.close-notice:hover {
    opacity: 1;
}

/* 统计卡片区域 */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.stat-card {
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.stat-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 12px;
    opacity: 0.8;
}

/* 卡片颜色 - 白色主题 */
.card-blue {
    background: #fff;
    color: #333;
    border: 1px solid #e2e8f0;
}

.card-blue .stat-icon {
    background: #dbeafe;
    color: #2563eb;
}

.card-white {
    background: #fff;
    color: #333;
    border: 1px solid #e2e8f0;
}

.card-white .stat-icon {
    background: #dcfce7;
    color: #16a34a;
}

.card-purple {
    background: #fff;
    color: #333;
    border: 1px solid #e2e8f0;
}

.card-purple .stat-icon {
    background: #fce7f3;
    color: #db2777;
}

.card-gradient {
    background: #fff;
    color: #333;
    border: 1px solid #e2e8f0;
}

.card-gradient .stat-icon {
    background: #f3e8ff;
    color: #9333ea;
}

/* 底部两栏布局 */
.bottom-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.info-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.card-title {
    font-size: 15px;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* 快速导航 */
.quick-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quick-link {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background: #f8fafc;
    border-radius: 6px;
    color: #3b82f6;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s;
}

.quick-link:hover {
    background: #e0f2fe;
}

.quick-link i {
    margin-right: 10px;
}

/* 我的信息 */
.my-info {
    margin-bottom: 15px;
}

.info-row {
    display: flex;
    padding: 8px 0;
    font-size: 14px;
    border-bottom: 1px dashed #eee;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    color: #666;
    width: 100px;
}

.info-value {
    color: #333;
    flex: 1;
}

.btn-bind {
    width: 100%;
    margin-top: 10px;
}

/* 查询区域 */
.query-section {
    background: #fff;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* 大区选择 */
.region-select {
    display: flex;
    gap: 25px;
    margin-bottom: 20px;
}

.region-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

.region-option input[type="radio"] {
    accent-color: #3b82f6;
    margin-right: 6px;
}

/* 查询表单 */
.query-form {
    margin-bottom: 20px;
}

.input-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.input-label {
    color: #666;
    font-size: 14px;
    flex-shrink: 0;
}

.query-input {
    flex: 1;
    max-width: 300px;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.query-input:focus {
    border-color: #3b82f6;
}

.fuzzy-search {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #666;
    cursor: pointer;
}

.fuzzy-search input {
    margin-right: 5px;
}

/* 按钮组 */
.button-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-primary {
    background: #333;
    color: #fff;
}

.btn-primary:hover {
    background: #222;
}

 .admin-theme .btn-primary {
     background: #2196f3;
     color: #fff;
 }

 .admin-theme .btn-primary:hover {
     background: #1976d2;
 }

 .admin-theme .nav-item.active {
     background: #e3f2fd;
     color: #1976d2;
     border-left-color: #2196f3;
 }

 .admin-theme .nav-item.active i {
     color: #1976d2;
 }

 .admin-theme .section-title {
     background: linear-gradient(90deg, #2196f3, #42a5f5);
     color: #fff;
     padding: 12px 20px;
     font-size: 14px;
     border-bottom: none;
     margin: -25px -25px 20px -25px;
     border-radius: 8px 8px 0 0;
 }

 .admin-theme .query-section {
     overflow: hidden;
 }

.btn-info {
    background: #06b6d4;
    color: #fff;
}

.btn-info:hover {
    background: #0891b2;
}

.btn-warning {
    background: #f59e0b;
    color: #fff;
}

.btn-warning:hover {
    background: #d97706;
}

.btn-secondary {
    background: #6b7280;
    color: #fff;
}

.btn-secondary:hover {
    background: #4b5563;
}

 .btn-danger {
     background: #ef4444;
     color: #fff;
 }

 .btn-danger:hover {
     background: #dc2626;
 }

 .btn-sm {
     padding: 6px 10px;
     font-size: 12px;
     border-radius: 6px;
 }

/* 查询结果 */
.result-section {
    margin-top: 20px;
}

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

.result-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    min-height: 120px;
}

.placeholder-text {
    color: #94a3b8;
    text-align: center;
    font-size: 14px;
}

.result-card {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #e2e8f0;
}

.result-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
}

.result-row:last-child {
    border-bottom: none;
}

.result-item {
    min-width: 150px;
    font-size: 14px;
}

.result-item .label {
    color: #666;
}

.result-item .value {
    color: #333;
    font-weight: 500;
}

.status-online {
    color: #22c55e !important;
}

.status-offline {
    color: #ef4444 !important;
}

/* 弹窗样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-overlay.show {
    display: flex;
}

.modal {
    background: #fff;
    border-radius: 12px;
    width: 400px;
    max-width: 90%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

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

.modal-header h3 {
    font-size: 16px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
}

.modal-body {
    padding: 20px;
}

.modal-body p {
    color: #666;
    margin-bottom: 15px;
    font-size: 14px;
}

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

.modal-input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
}

.modal-input:focus {
    border-color: #3b82f6;
}

.toggle-password {
    padding: 12px 15px;
    background: #f1f5f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    color: #666;
}

.hint-text {
    font-size: 12px !important;
    color: #999 !important;
}

.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .stat-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
        padding: 10px 0;
    }
    
    .logo {
        padding: 10px;
        margin-bottom: 10px;
    }
    
    .nav-menu {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        padding: 0 10px;
    }
    
    .nav-item {
        flex: 0 0 auto;
        padding: 10px 12px;
        border-left: none;
        border-bottom: 2px solid transparent;
        border-radius: 6px;
    }

    .nav-item.active {
        border-bottom-color: #333;
    }

    .admin-theme .nav-item.active {
        border-bottom-color: #2196f3;
    }

    .nav-item i {
        margin-right: 6px;
    }
    
    .sidebar-footer {
        display: none;
    }
    
    .main-content {
        padding: 15px;
    }

    body:not(.admin-theme) .query-section {
        padding: 15px;
    }
    
    .stat-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bottom-section {
        grid-template-columns: 1fr;
    }
    
    .button-group {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .input-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .query-input {
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .stat-cards {
        grid-template-columns: 1fr;
    }
    
    .region-select {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* 后台管理样式 */
.config-form {
    max-width: 800px;
}

.config-item {
    margin-bottom: 25px;
}

.config-label {
    display: block;
    color: #333;
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: 500;
}

.config-label i {
    color: #666;
    margin-right: 5px;
}

.config-input {
    width: 100%;
    max-width: 500px;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.config-input:focus {
    border-color: #333;
}

.config-textarea {
    width: 100%;
    max-width: 500px;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    min-height: 120px;
    resize: vertical;
    transition: border-color 0.2s;
}

.config-textarea:focus {
    border-color: #333;
}

.divider {
    height: 1px;
    background: #eee;
    margin: 35px 0;
}

.section-title {
    font-size: 18px;
    color: #333;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

/* 表格样式 */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.data-table th,
.data-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.data-table th {
    background: #f8fafc;
    color: #666;
    font-weight: 500;
}

.data-table tr:hover {
    background: #f8fafc;
}

.data-table .btn {
    padding: 5px 12px;
    font-size: 12px;
}

 .history-table {
     width: 100%;
     border-collapse: collapse;
     font-size: 14px;
     min-width: 720px;
 }

 .history-table th,
 .history-table td {
     padding: 12px 15px;
     text-align: left;
     border-bottom: 1px solid #eee;
     white-space: nowrap;
 }

 .history-table th {
     background: #f8fafc;
     color: #666;
     font-weight: 500;
 }

 .history-table tr:hover {
     background: #f8fafc;
 }

 .table-container {
     background: #fff;
     border: 1px solid #e2e8f0;
     border-radius: 8px;
     overflow-x: auto;
     overflow-y: hidden;
     -webkit-overflow-scrolling: touch;
 }

 .admin-table {
     width: 100%;
     border-collapse: collapse;
     font-size: 14px;
 }

 .admin-table th,
 .admin-table td {
     padding: 12px 15px;
     text-align: left;
     border-bottom: 1px solid #eee;
 }

 .admin-table th {
     background: #f8fafc;
     color: #666;
     font-weight: 500;
     white-space: nowrap;
 }

 .admin-table tr:hover {
     background: #f8fafc;
 }

 .admin-table .btn {
     padding: 5px 12px;
     font-size: 12px;
 }

/* 统计卡片（后台用） */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.stat-box {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    border: 1px solid #e2e8f0;
}

.stat-box .number {
    font-size: 28px;
    font-weight: 600;
    color: #333;
}

.stat-box .label {
    font-size: 13px;
    color: #666;
    margin-top: 5px;
}

 .stats-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 15px;
     margin-bottom: 20px;
 }

 .stats-grid .stat-card {
     background: #fff;
     border-radius: 8px;
     padding: 20px;
     border: 1px solid #e2e8f0;
     box-shadow: 0 2px 8px rgba(0,0,0,0.06);
     display: block;
 }

 .stats-grid .stat-card h4 {
     font-size: 14px;
     color: #666;
     font-weight: 500;
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 10px;
 }

 .stats-grid .stat-card .number {
     font-size: 28px;
     font-weight: 600;
     color: #333;
 }

 .stats-grid .stat-card.success {
     border-color: #bbf7d0;
 }

 .stats-grid .stat-card.success .number {
     color: #16a34a;
 }

 .stats-grid .stat-card.warning {
     border-color: #fed7aa;
 }

 .stats-grid .stat-card.warning .number {
     color: #d97706;
 }

 .stats-grid .stat-card.danger {
     border-color: #fecaca;
 }

 .stats-grid .stat-card.danger .number {
     color: #dc2626;
 }

/* 筛选栏 */
.filter-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-bar input,
.filter-bar select {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
}

.filter-bar input:focus,
.filter-bar select:focus {
    border-color: #333;
}

/* 卡密状态 */
.status-active {
    color: #16a34a;
    background: #dcfce7;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.status-disabled {
    color: #dc2626;
    background: #fee2e2;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.status-expired {
    color: #9ca3af;
    background: #f3f4f6;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
}

 .card-status {
     padding: 3px 10px;
     border-radius: 20px;
     font-size: 12px;
     display: inline-block;
     line-height: 1.2;
 }

 .card-status.active {
     color: #16a34a;
     background: #dcfce7;
 }

 .card-status.used {
     color: #d97706;
     background: #ffedd5;
 }

 .card-status.expired {
     color: #9ca3af;
     background: #f3f4f6;
 }

/* 生成卡密表单 */
.generate-form {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 8px;
}

.generate-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.generate-form label {
    font-size: 13px;
    color: #666;
}

.generate-form input {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    width: 120px;
}

/* 查询卡片样式 */
.query-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.query-header {
    background: linear-gradient(90deg, #2196f3, #42a5f5);
    color: #fff;
    padding: 12px 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.query-body {
    padding: 20px;
}

/* 大区选择 */
.region-row {
    display: flex;
    gap: 50px;
    margin-bottom: 20px;
}

.region-item {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
}

.region-item input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #2196f3;
    cursor: pointer;
}

/* 输入框 */
.input-box {
    margin-bottom: 15px;
    max-width: 360px;
    width: 100%;
}

.input-box input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
}

.input-box input:focus {
    border-color: #2196f3;
}

/* 按钮行 */
.btn-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.btn-blue {
    background: #2196f3;
    color: #fff;
    padding: 8px 18px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-blue:hover {
    background: #1976d2;
}

.btn-orange-outline {
    background: #fff;
    color: #ff9800;
    padding: 8px 18px;
    border: 1px solid #ff9800;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-orange-outline:hover {
    background: #fff3e0;
}

.btn-teal {
    background: #26a69a;
    color: #fff;
    padding: 8px 18px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-teal:hover {
    background: #00897b;
}

/* 查询结果 */
.result-label {
    font-size: 13px;
    color: #333;
    margin-bottom: 10px;
}

.result-area {
    background: #e3f2fd;
    border-radius: 6px;
    padding: 30px;
    min-height: 150px;
    position: relative;
}

.result-hint {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: #90caf9;
    font-size: 12px;
}

/* 动画 */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 移动端查询页面优化 */
@media (max-width: 768px) {
    .query-body {
        padding: 15px;
    }
    
    .region-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .region-item {
        font-size: 14px;
        padding: 8px 0;
    }
    
    .btn-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-blue, .btn-orange-outline, .btn-teal {
        width: 100%;
        justify-content: center;
        padding: 12px 18px;
        font-size: 14px;
    }
    
    .result-area {
        padding: 20px;
        min-height: 120px;
    }
    
    .result-hint {
        position: static;
        display: block;
        text-align: center;
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    .region-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .region-item {
        font-size: 13px;
    }
    
    .query-header {
        padding: 10px 15px;
        font-size: 13px;
    }
}