* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Microsoft YaHei', Arial, sans-serif; background: #f5f7fa; min-height: 100vh; }
        .container { max-width: 1400px; margin: 0 auto; padding: 0; }
        .header { background: white; padding: 15px 20px; border-bottom: 1px solid #e6e6e6; display: flex; align-items: center; }
        .header .logo { display: flex; align-items: center; font-size: 18px; font-weight: bold; color: #333; }
        .header .logo::before { content: '🚀'; margin-right: 8px; }
        .header .user-info { margin-left: auto; color: #666; font-size: 14px; }
        .header .version-badge { margin-left: 10px; padding: 2px 8px; border-radius: 10px; background: #eef0fe; color: #5a67d8; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; vertical-align: middle; }

        .main-content { display: none; }
        .login-form { background: white; padding: 40px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); max-width: 400px; margin: 100px auto; }
        .login-form h2 { text-align: center; margin-bottom: 30px; color: #333; font-size: 24px; }
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; margin-bottom: 8px; color: #333; font-weight: 500; }
        .form-group input, .form-group select { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
        .form-group input:focus, .form-group select:focus { outline: none; border-color: #5a67d8; }
        .btn { padding: 12px 24px; background: #5a67d8; color: white; border: none; border-radius: 4px; font-size: 14px; cursor: pointer; }
        .btn:hover { background: #4c51bf; }
        .btn:disabled { opacity: 0.6; cursor: not-allowed; }
        .btn-success { background: #28a745; }
        .btn-success:hover { background: #218838; }

        .main-layout { background: #f5f7fa; min-height: calc(100vh - 60px); }
        .content-wrapper { padding: 20px; }
        .page-title { background: white; padding: 15px 20px; margin-bottom: 20px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        .page-title h2 { color: #333; font-size: 18px; margin: 0; }
        .page-title .breadcrumb { color: #666; font-size: 12px; margin-top: 5px; }

        .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 30px; }
        .stat-card { background: linear-gradient(135deg, #5a67d8 0%, #667eea 100%); color: white; padding: 25px 20px; border-radius: 8px; text-align: center; position: relative; overflow: hidden; }
        .stat-card::before { content: ''; position: absolute; top: 0; right: 0; width: 100px; height: 100px; background: rgba(255,255,255,0.1); border-radius: 50%; transform: translate(30px, -30px); }
        .stat-card h3 { font-size: 32px; margin-bottom: 8px; font-weight: bold; }
        .stat-card p { opacity: 0.9; font-size: 14px; margin: 0; }

        .section-card { background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 20px; }
        .section-header { padding: 15px 20px; border-bottom: 1px solid #e6e6e6; display: flex; justify-content: space-between; align-items: center; }
        .section-header h3 { color: #333; font-size: 16px; margin: 0; }
        .section-header .actions { display: flex; gap: 10px; }

        /* 日间活跃用户面板 */
        .active-users-panel { padding: 20px; }
        .active-users-empty { text-align: center; padding: 30px; color: #999; font-size: 14px; }
        .active-user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
        .active-user-card { display: flex; align-items: center; padding: 12px 16px; border-radius: 8px; border: 1px solid #e6e6e6; transition: all 0.2s; }
        .active-user-card:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.1); }
        .active-user-card .level-badge { width: 10px; height: 10px; border-radius: 50%; margin-right: 12px; flex-shrink: 0; box-shadow: 0 0 6px currentColor; }
        .active-user-card .level-badge.level-green { background: #28a745; color: #28a745; }
        .active-user-card .level-badge.level-yellow { background: #ffc107; color: #ffc107; }
        .active-user-card .level-badge.level-orange { background: #fd7e14; color: #fd7e14; }
        .active-user-card .level-badge.level-red { background: #dc3545; color: #dc3545; animation: pulse-red 1.5s infinite; }
        @keyframes pulse-red { 0%,100%{box-shadow:0 0 4px #dc3545;} 50%{box-shadow:0 0 12px #dc3545;} }
        .active-user-card .user-info { flex: 1; min-width: 0; }
        .active-user-card .user-name { font-weight: 600; font-size: 14px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .active-user-card .user-meta { font-size: 12px; color: #888; margin-top: 2px; }
        .active-user-card .use-count { font-size: 20px; font-weight: 700; margin-left: 12px; flex-shrink: 0; }
        .active-user-card .use-count.count-green { color: #28a745; }
        .active-user-card .use-count.count-yellow { color: #e6a700; }
        .active-user-card .use-count.count-orange { color: #fd7e14; }
        .active-user-card .use-count.count-red { color: #dc3545; }
        .active-user-card .count-unit { font-size: 11px; font-weight: 400; color: #999; }
        .active-panel-header-info { display: flex; align-items: center; gap: 12px; }
        .active-panel-header-info .legend { display: flex; gap: 10px; font-size: 12px; color: #888; }
        .active-panel-header-info .legend span { display: flex; align-items: center; gap: 3px; }
        .active-panel-header-info .legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
        .active-range-tab { transition: all 0.2s; }
        .active-range-tab.active { background: #5a67d8 !important; box-shadow: 0 2px 6px rgba(90,103,216,0.4); }
        .active-user-card .ip-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
        .active-user-card .ip-tag { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-family: 'Consolas', monospace; background: #e9ecef; color: #495057; }
        .active-user-card .ip-tag.multi-ip { background: #fff3cd; color: #856404; font-weight: 600; }
        .active-user-card .device-tag { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 11px; background: #e7f1ff; color: #0b5ed7; }
        .active-user-card .device-tag.multi-device { background: #fde2e1; color: #b02a37; font-weight: 600; }

        .create-key-form { padding: 20px; background: #f8f9fa; border-radius: 8px; margin-bottom: 20px; }
        .form-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 15px; align-items: end; }
        .form-row .form-group { margin-bottom: 0; }

        /* 日志页面专用样式 */
        .log-filters {
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .log-filter-select {
            padding: 8px 35px 8px 12px;
            border: 2px solid #e1e4e8;
            border-radius: 8px;
            background: white;
            color: #495057;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23495057' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            appearance: none;
        }
        
        .log-filter-select:hover {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        .log-filter-select:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
        }
        
        .log-refresh-btn {
            padding: 8px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 8px;
            color: white;
            font-weight: 500;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }
        
        .log-refresh-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }
        
        .log-refresh-btn:active {
            transform: translateY(0);
        }

        .log-clear-btn {
            padding: 8px 20px;
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
            border: none;
            border-radius: 8px;
            color: white;
            font-weight: 500;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
            box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
        }

        .log-clear-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
        }

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

        /* 日志表格样式 */
        .log-table-wrapper {
            overflow-x: auto;
            border-radius: 0 0 8px 8px;
        }
        
        .log-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
            background: white;
        }
        
        .log-table thead {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .log-table thead th {
            padding: 16px 14px;
            text-align: left;
            font-weight: 600;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }
        
        .log-table tbody tr {
            border-bottom: 1px solid #e9ecef;
            transition: all 0.2s ease;
        }
        
        .log-table tbody tr:hover {
            background: linear-gradient(90deg, #f8f9fa 0%, #ffffff 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .log-table tbody td {
            padding: 14px;
            color: #495057;
            vertical-align: middle;
        }
        
        .log-table tbody tr:last-child {
            border-bottom: none;
        }
        
        /* 日志操作类型徽章 */
        .log-action-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
        }
        
        .log-action-scan {
            background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
            color: #155724;
        }
        
        .log-action-submit {
            background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
            color: #0c5460;
        }
        
        .log-action-api {
            background: linear-gradient(135deg, #cce5ff 0%, #b8daff 100%);
            color: #004085;
        }
        
        .log-action-redeem {
            background: linear-gradient(135deg, #ffe8cc 0%, #ffd8a8 100%);
            color: #9c4a00;
        }

        .log-action-reset {
            background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
            color: #856404;
        }
        
        .log-action-access {
            background: linear-gradient(135deg, #e2e3e5 0%, #d6d8db 100%);
            color: #383d41;
        }
        
        /* 日志状态徽章 */
        .log-status-success {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: #28a745;
            font-weight: 600;
            font-size: 14px;
        }
        
        .log-status-error {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: #dc3545;
            font-weight: 600;
            font-size: 14px;
        }
        
        /* Key显示样式 */
        .log-key-name {
            font-weight: 500;
            color: #495057;
            background: #f8f9fa;
            padding: 4px 10px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
        }
        
        .log-key-unknown {
            color: #adb5bd;
            font-style: italic;
        }
        
        /* 订单号样式 */
        .log-order-number {
            font-family: 'Courier New', monospace;
            background: linear-gradient(135deg, #e7f3ff 0%, #d0e7ff 100%);
            color: #0066cc;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 500;
            display: inline-block;
        }
        
        /* IP地址样式 */
        .log-ip-address {
            font-family: 'Courier New', monospace;
            color: #6c757d;
            font-size: 13px;
        }
        
        /* 日志详情按钮 */
        .log-detail-btn {
            padding: 6px 14px;
            background: #17a2b8;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .log-detail-btn:hover {
            background: #138496;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);
        }
        
        /* 日志分页样式 */
        .log-pagination {
            margin-top: 25px;
            padding: 20px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
            border-radius: 8px;
        }
        
        .log-pagination button {
            padding: 10px 20px;
            background: white;
            color: #495057;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-weight: 500;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .log-pagination button:hover:not(:disabled) {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-color: transparent;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }
        
        .log-pagination button:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }
        
        .log-pagination .page-info {
            color: #495057;
            font-weight: 600;
            font-size: 15px;
            padding: 0 10px;
        }
        
        /* 空状态样式 */
        .log-empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #999;
        }
        
        .log-empty-icon {
            font-size: 64px;
            margin-bottom: 15px;
            opacity: 0.6;
        }
        
        .log-empty-text {
            font-size: 16px;
            color: #6c757d;
        }

        .keys-list { padding: 0; }
        
        /* KEY项目卡片样式 - 优化版 */
        .key-item { 
            padding: 20px; 
            margin-bottom: 20px; 
            border-radius: 12px; 
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            box-shadow: 0 4px 6px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.06);
            border: 1px solid #e9ecef;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .key-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
        }
        .key-item:hover { 
            box-shadow: 0 8px 15px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.08);
            transform: translateY(-2px);
        }
        
        /* KEY标题样式 */
        .key-title { 
            color: #2c3e50; 
            font-size: 18px; 
            font-weight: 600; 
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .key-title::before {
            content: '🔑';
            font-size: 20px;
        }
        
        /* KEY详情样式 */
        .key-details { 
            color: #6c757d; 
            font-size: 14px; 
            margin-bottom: 15px;
            line-height: 1.6;
            padding: 10px;
            background: rgba(108, 117, 125, 0.05);
            border-radius: 6px;
        }
        
        /* 链接区域样式 */
        .key-link-section { 
            margin: 15px 0; 
            padding: 15px; 
            background: #ffffff;
            border-radius: 8px;
            border: 1px solid #e9ecef;
        }
        .key-link-label { 
            font-size: 13px; 
            color: #495057; 
            margin-bottom: 10px;
            font-weight: 500;
        }
        .key-link { 
            display: flex; 
            align-items: center; 
            gap: 8px;
            flex-wrap: wrap;
        }
        .key-link input[type="text"] {
            flex: 1;
            min-width: 300px;
            padding: 8px 12px;
            border: 1px solid #ced4da;
            border-radius: 6px;
            background: #f8f9fa;
            font-size: 13px;
            color: #495057;
            font-family: 'Courier New', monospace;
        }
        .key-link input[type="text"]:focus {
            outline: none;
            border-color: #80bdff;
            background: #fff;
        }
        
        /* 超链接样式 */
        .key-link-section a {
            transition: all 0.2s ease;
        }
        .key-link-section a:hover {
            background: #cce5ff !important;
            border-color: #0056b3 !important;
            transform: translateX(2px);
            box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
        }
        
        /* 按钮样式优化 */
        .key-link button {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.2s ease;
            white-space: nowrap;
        }
        .btn-copy { 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .btn-copy:hover { 
            background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
        }
        .btn-info { 
            background: #17a2b8; 
            color: white;
        }
        .btn-info:hover { 
            background: #138496;
            transform: translateY(-1px);
        }
        .btn-warning { 
            background: #fd7e14; 
            color: white;
        }
        .btn-warning:hover { 
            background: #e8650e;
            transform: translateY(-1px);
        }
        .btn-primary {
            background: #007bff;
            color: white;
        }
        .btn-primary:hover {
            background: #0056b3;
            transform: translateY(-1px);
        }
        .btn-success {
            background: #28a745;
            color: white;
        }
        .btn-success:hover {
            background: #218838;
            transform: translateY(-1px);
        }
        .btn-danger {
            background: #dc3545;
            color: white;
        }
        .btn-danger:hover {
            background: #c82333;
            transform: translateY(-1px);
        }
        .btn-delete { 
            background: #dc3545; 
            color: white;
        }
        .btn-delete:hover { 
            background: #c82333;
            transform: translateY(-1px);
        }
        .btn-blacklist { 
            background: #ffc107; 
            color: #212529;
        }
        .btn-blacklist:hover { 
            background: #e0a800;
            transform: translateY(-1px);
        }
        
        /* 状态徽章 */
        .status-badge { 
            display: inline-block; 
            padding: 4px 12px; 
            border-radius: 20px; 
            font-size: 12px; 
            font-weight: 600; 
            margin-left: 10px;
            letter-spacing: 0.5px;
        }
        .status-active { 
            background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status-expired { 
            background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        /* 用户IP区域 */
        .user-ip-section { 
            margin-top: 15px; 
            padding: 12px 15px; 
            background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
            border-left: 4px solid #ffc107; 
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .user-ip-text { 
            font-size: 13px; 
            color: #856404;
            font-weight: 500;
        }

        /* 分页样式 */
        .pagination-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
            margin-top: 20px;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .pagination-info {
            font-size: 14px;
            color: #6c757d;
            font-weight: 500;
        }
        
        .pagination-buttons {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            align-items: center;
        }
        
        .page-btn {
            padding: 8px 12px;
            border: 1px solid #dee2e6;
            background: white;
            color: #495057;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
            min-width: 40px;
        }
        
        .page-btn:hover:not(:disabled):not(.active) {
            background: #e9ecef;
            border-color: #adb5bd;
            transform: translateY(-1px);
        }
        
        .page-btn.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-color: #667eea;
            cursor: default;
            box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
        }
        
        .page-btn:disabled {
            background: #e9ecef;
            color: #adb5bd;
            cursor: not-allowed;
            border-color: #dee2e6;
        }
        
        .page-ellipsis {
            padding: 0 8px;
            color: #6c757d;
            font-weight: bold;
        }

        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; }
        .modal-content { background: white; margin: 5% auto; padding: 0; border-radius: 8px; max-width: 600px; position: relative; }
        .modal-header { padding: 15px 20px; border-bottom: 1px solid #e6e6e6; display: flex; justify-content: space-between; align-items: center; }
        .modal-header h3 { margin: 0; color: #333; font-size: 16px; }
        .close { font-size: 20px; cursor: pointer; color: #999; background: none; border: none; }
        .close:hover { color: #333; }
        .modal-body { padding: 20px; }

        .alert { 
            padding: 12px 16px; 
            border-radius: 6px; 
            margin-bottom: 15px; 
            font-size: 14px; 
            display: block !important;
            border: 1px solid transparent;
        }
        .alert-success { 
            background: #d4edda; 
            color: #155724; 
            border: 1px solid #c3e6cb; 
        }
        .alert-error { 
            background: #f8d7da !important; 
            color: #721c24 !important; 
            border: 1px solid #f5c6cb !important;
            display: block !important;
        }
        
        /* 公告跑马灯样式 */
        .site-announcement {
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            color: white; padding: 8px 0; overflow: hidden; position: relative;
            border-radius: 0; margin: 0; z-index: 1000;
        }
        .marquee-container { position: relative; overflow: hidden; }
        .marquee-text { display: inline-block; white-space: nowrap; font-weight: 500; }
        @keyframes marquee {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }
        .announcement-item {
            display: flex; justify-content: space-between; align-items: center;
            padding: 15px; margin: 10px 0; background: #f8f9fa; border: 1px solid #e9ecef; 
            border-radius: 8px; border-left: 4px solid #007bff;
        }
        .announcement-item.disabled { border-left-color: #6c757d; opacity: 0.6; }
        .announcement-content { flex: 1; margin-right: 15px; font-size: 14px; line-height: 1.5; }
        .announcement-meta { font-size: 12px; color: #666; margin-top: 5px; }
        .announcement-actions { display: flex; gap: 8px; }
        .announcement-actions button { font-size: 12px; padding: 4px 8px; }

        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .loading::before {
            content: '';
            width: 20px;
            height: 20px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid #007bff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .empty-state {
            text-align: center;
            padding: 40px;
            color: #999;
            background: #f8f9fa;
            border-radius: 8px;
            border: 2px dashed #dee2e6;
        }

        /* 成功/错误提示优化 */
        .alert {
            padding: 12px 16px;
            border-radius: 6px;
            margin-bottom: 15px;
            border: 1px solid transparent;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .alert-success {
            color: #155724;
            background-color: #d4edda;
            border-color: #c3e6cb;
        }

        .alert-success::before {
            content: '✓';
            font-weight: bold;
        }

        .alert-danger {
            color: #721c24;
            background-color: #f8d7da;
            border-color: #f5c6cb;
        }

        .alert-danger::before {
            content: '✗';
            font-weight: bold;
        }

        .alert-warning {
            color: #856404;
            background-color: #fff3cd;
            border-color: #ffeaa7;
        }

        .alert-warning::before {
            content: '⚠';
            font-weight: bold;
        }

        /* 按钮加载状态 */
        .btn.loading {
            position: relative;
            color: transparent;
        }

        .btn.loading::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            top: 50%;
            left: 50%;
            margin-left: -8px;
            margin-top: -8px;
            border: 2px solid #ffffff;
            border-radius: 50%;
            border-top-color: transparent;
            animation: spin 1s linear infinite;
        }

        .nav-tabs { display: flex; background: white; border-radius: 8px 8px 0 0; overflow: hidden; margin-bottom: 0; }
        .nav-tab { padding: 12px 20px; background: #f8f9fa; border: none; cursor: pointer; color: #666; border-bottom: 2px solid transparent; }
        .nav-tab.active { background: white; color: #333; border-bottom-color: #5a67d8; }
        .nav-tab:hover { background: #e9ecef; }
        .chat-unread-badge { display: none; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 11px; text-align: center; vertical-align: middle; font-weight: 700; }

        /* 账号管理样式 */
        .accounts-list { display: flex; flex-direction: column; gap: 15px; }
        .account-card {
            display: flex; justify-content: space-between; align-items: center;
            padding: 15px; border: 1px solid #ddd; border-radius: 8px; background: white;
            gap: 12px;
        }
        .account-card.available { border-left: 4px solid #28a745; }
        .account-card.unavailable { border-left: 4px solid #dc3545; }
        .account-card.released { border-left: 4px solid #ffc107; background: #fff9e6; }
        .account-card.selected { background: #f0f7ff; box-shadow: inset 0 0 0 1px #90caf9; }

        .account-select {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-right: 4px;
        }
        .account-select input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        .accounts-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
            justify-content: flex-end;
        }
        .accounts-batch-bar {
            display: none;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 12px;
            padding: 10px 12px;
            background: #eef5ff;
            border: 1px solid #c5dbff;
            border-radius: 8px;
            font-size: 13px;
            color: #334155;
        }
        .accounts-batch-bar.visible { display: flex; }
        .accounts-batch-bar .batch-count { font-weight: 600; color: #1d4ed8; }
        .accounts-batch-bar .batch-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

        .account-info { flex: 1; min-width: 0; }
        .account-phone { font-weight: bold; font-size: 16px; margin-bottom: 8px; }
        .account-details { display: flex; flex-wrap: wrap; gap: 15px; font-size: 14px; color: #666; }
        .account-details span { display: flex; align-items: center; }

        .account-actions { display: flex; gap: 8px; flex-wrap: wrap; }
        .account-actions .btn { padding: 6px 12px; font-size: 12px; }

        .import-section { padding: 16px 18px; }
        .blacklist-key-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            max-width: 200px;
            padding: 3px 8px;
            border-radius: 999px;
            background: #fef2f2;
            color: #b91c1c;
            font-size: 12px;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            border: 1px solid #fecaca;
            cursor: pointer;
            user-select: none;
        }
        .blacklist-key-chip input[type="checkbox"] {
            flex-shrink: 0;
            margin: 0;
            cursor: pointer;
        }
        .blacklist-key-chip.is-exempt {
            background: #ecfdf5;
            color: #047857;
            border-color: #a7f3d0;
        }
        .blacklist-key-chip.is-banned {
            background: #fef2f2;
            color: #991b1b;
            border-color: #fca5a5;
            text-decoration: line-through;
        }
        .blacklist-key-actions {
            display: flex;
            flex-direction: column;
            gap: 6px;
            align-items: stretch;
        }
        .blacklist-key-actions .btn {
            padding: 6px 10px;
            font-size: 12px;
            white-space: nowrap;
        }
        .blacklist-key-hint {
            margin-top: 6px;
            font-size: 11px;
            color: #64748b;
            line-height: 1.4;
        }
        .import-panel {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .import-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
        }
        .import-file-picker {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-width: min(360px, 100%);
            padding: 8px 12px;
            background: #fff;
            border: 1px dashed #c5d0e0;
            border-radius: 8px;
        }
        .import-file-picker .file-name {
            color: #64748b;
            font-size: 13px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 220px;
        }
        .import-file-picker.has-file .file-name {
            color: #0f172a;
            font-weight: 600;
        }
        .import-hint {
            padding: 12px 14px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 12px;
            line-height: 1.7;
            color: #475569;
        }
        .import-hint code {
            display: inline-block;
            padding: 1px 6px;
            background: #eef2ff;
            border-radius: 4px;
            color: #3730a3;
            font-family: Consolas, Monaco, monospace;
            font-size: 12px;
        }
        .import-hint .hint-row { margin: 0; }
        .import-hint .hint-label {
            display: inline-block;
            min-width: 72px;
            color: #334155;
            font-weight: 600;
        }
        @media (max-width: 768px) {
            .import-actions { flex-direction: column; align-items: stretch; }
            .import-file-picker { min-width: 0; width: 100%; }
            .import-file-picker .file-name { max-width: none; flex: 1; }
            .accounts-toolbar { width: 100%; justify-content: flex-start; }
            .accounts-batch-bar .batch-actions { margin-left: 0; width: 100%; }
        }



        /* 移动端菜单按钮 */
        .mobile-menu-btn {
            display: none;
            position: fixed;
            top: 15px;
            left: 15px;
            z-index: 1001;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 8px 12px;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            font-size: 14px;
        }

        .mobile-menu-btn:hover {
            background: #0056b3;
        }

        /* 移动端优化 */
        @media (max-width: 768px) {
            .mobile-menu-btn {
                display: block;
            }

            .sidebar {
                position: fixed;
                top: 0;
                left: 0;
                height: 100vh;
                z-index: 1000;
                transform: translateX(-100%);
                transition: transform 0.3s ease;
                box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            }

            .sidebar.mobile-open {
                transform: translateX(0);
            }

            .main-content {
                margin-left: 0;
                padding: 10px;
                padding-top: 60px;
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }

            .form-row {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            /* 卡片标题行：动作区（统计+筛选+按钮）在窄屏换行，避免溢出 */
            .section-header {
                flex-wrap: wrap;
                gap: 10px;
            }

            .section-header .actions {
                flex-wrap: wrap;
            }

            .nav-item {
                padding: 12px 15px;
                font-size: 14px;
            }

            .page-title h2 {
                font-size: 20px;
            }

            .section-card {
                margin-bottom: 15px;
            }

            .status-grid {
                grid-template-columns: 1fr;
            }

            .key-item {
                padding: 12px 15px;
            }

            .account-card {
                padding: 12px 15px;
            }

            /* 移动端表格优化 */
            .key-link-section {
                padding: 10px;
            }
            
            .key-link {
                flex-direction: column;
                align-items: stretch;
                gap: 8px;
            }
            
            .key-link input[type="text"] {
                min-width: 100%;
                font-size: 14px;
            }
            
            .key-link button {
                width: 100%;
                justify-content: center;
            }
            
            /* 移动端按钮组优化 */
            .account-actions {
                flex-direction: column;
                gap: 6px;
            }
            
            .account-actions .btn {
                width: 100%;
                font-size: 13px;
            }
            
            /* 日志页面移动端优化 */
            .log-filters {
                flex-direction: column;
                align-items: stretch;
            }
            
            .log-filter-select,
            .log-refresh-btn,
            .log-clear-btn {
                width: 100%;
                justify-content: center;
            }
            
            .log-table thead th {
                padding: 12px 8px;
                font-size: 11px;
            }
            
            .log-table tbody td {
                padding: 10px 6px;
                font-size: 12px;
            }
            
            /* 隐藏部分列 */
            .log-table thead th:nth-child(4),
            .log-table tbody td:nth-child(4),
            .log-table thead th:nth-child(5),
            .log-table tbody td:nth-child(5) {
                display: none;
            }
            
            .log-action-badge {
                font-size: 11px;
                padding: 4px 8px;
            }
            
            .log-key-name {
                font-size: 11px;
                padding: 3px 6px;
            }
            
            .log-detail-btn {
                padding: 4px 8px;
                font-size: 11px;
            }
            
            .log-pagination {
                flex-direction: column;
                gap: 10px;
                padding: 15px;
            }
            
            .log-pagination button {
                width: 100%;
                padding: 10px;
            }
        }

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

            .stat-card {
                padding: 15px;
            }

            .stat-card h3 {
                font-size: 24px;
            }

            .form-group input,
            .form-group select,
            .form-group textarea {
                font-size: 16px; /* 防止iOS缩放 */
            }

            .btn {
                padding: 10px 15px;
                font-size: 14px;
                min-height: 44px; /* 确保触摸目标足够大 */
            }

            .page-title h2 {
                font-size: 18px;
            }
            
            /* 移动端导航标签优化 */
            .nav-tabs {
                overflow-x: auto;
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
            }
            
            .nav-tab {
                min-width: auto;
                padding: 10px 15px;
                font-size: 13px;
                flex-shrink: 0;
            }
            
            /* 移动端模态框优化 */
            .modal-content {
                margin: 10px;
                max-width: calc(100vw - 20px);
            }
            
            /* 超小屏幕日志页面优化 */
            .log-table thead th {
                padding: 10px 4px;
                font-size: 10px;
            }
            
            .log-table tbody td {
                padding: 8px 4px;
                font-size: 11px;
            }
            
            /* 隐藏更多列 */
            .log-table thead th:nth-child(3),
            .log-table tbody td:nth-child(3) {
                display: none;
            }
            
            .log-empty-icon {
                font-size: 48px;
            }
            
            .log-empty-text {
                font-size: 14px;
            }
            
            .section-header h3 {
                font-size: 14px;
            }
            
            /* 移动端数据表格优化 */
            .pagination-container {
                flex-direction: column;
                gap: 10px;
            }
            
            .pagination-buttons {
                justify-content: center;
                flex-wrap: wrap;
            }
            
            .page-btn {
                min-width: 35px;
                padding: 6px 10px;
                font-size: 13px;
            }
        }

        /* 日志类型切换标签 */
        .log-type-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }

        .log-type-tab {
            padding: 8px 16px;
            border: 2px solid #e0e0e0;
            background-color: #f8f9fa;
            color: #333;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .log-type-tab:hover {
            border-color: #007bff;
            background-color: #e7f3ff;
            color: #007bff;
        }

        .log-type-tab.active {
            border-color: #007bff;
            background-color: #007bff;
            color: white;
        }

        /* 日志视图容器 */
        .log-view-container {
            display: block;
        }

        /* 终端日志容器 */
        .terminal-log-container {
            background-color: #1e1e1e;
            color: #00ff00;
            font-family: 'Courier New', monospace;
            padding: 15px;
            border-radius: 6px;
            max-height: 600px;
            overflow-y: auto;
            border: 1px solid #333;
            line-height: 1.6;
            font-size: 13px;
        }

        .terminal-log-line {
            display: flex;
            gap: 10px;
            padding: 4px 0;
            word-break: break-all;
        }

        .terminal-log-timestamp {
            color: #888;
            min-width: 180px;
            flex-shrink: 0;
        }

        .terminal-log-message {
            flex: 1;
        }

        /* 日志类型颜色 */
        .terminal-log-success {
            color: #00ff00;
        }

        .terminal-log-error {
            color: #ff4444;
        }

        .terminal-log-warning {
            color: #ffaa00;
        }

        .terminal-log-info {
            color: #00aaff;
        }

        .terminal-log-debug {
            color: #888;
        }

        .terminal-log-empty {
            text-align: center;
            padding: 40px 20px;
            color: #666;
        }

        .terminal-log-empty .log-empty-icon {
            font-size: 48px;
            margin-bottom: 10px;
        }

        .terminal-log-empty .log-empty-text {
            font-size: 14px;
        }

        /* 终端日志滚动条美化 */
        .terminal-log-container::-webkit-scrollbar {
            width: 8px;
        }

        .terminal-log-container::-webkit-scrollbar-track {
            background: #2d2d2d;
            border-radius: 4px;
        }

        .terminal-log-container::-webkit-scrollbar-thumb {
            background: #555;
            border-radius: 4px;
        }

        .terminal-log-container::-webkit-scrollbar-thumb:hover {
            background: #777;
        }

        /* 管理端主题切换 */
        .admin-theme-select {
            margin-left: 12px;
            border: 1px solid #c5d6c8;
            background: #e8f0e4;
            color: #2f3b2a;
            border-radius: 10px;
            padding: 6px 10px;
            font-size: 12px;
            cursor: pointer;
            min-width: 96px;
        }
        html[data-theme="eye-care"] body,
        html[data-theme="eye-care"] .main-layout {
            background: #d5e0c8 !important;
        }
        html[data-theme="eye-care"] .header,
        html[data-theme="eye-care"] .login-form,
        html[data-theme="eye-care"] .page-title,
        html[data-theme="eye-care"] .section-card,
        html[data-theme="eye-care"] .modal-content {
            background: #e8efdf !important;
            border-color: #b7c9a8 !important;
        }
        html[data-theme="eye-care"] .header .logo,
        html[data-theme="eye-care"] .page-title h2,
        html[data-theme="eye-care"] .section-header h3 {
            color: #2f3b2a !important;
        }
        html[data-theme="eye-care"] .header .user-info,
        html[data-theme="eye-care"] .page-title .breadcrumb {
            color: #5a6b52 !important;
        }
        html[data-theme="eye-care"] .btn,
        html[data-theme="eye-care"] .nav-tab.active,
        html[data-theme="eye-care"] .active-range-tab.active {
            background: #4a6b3a !important;
            box-shadow: none !important;
        }
        html[data-theme="eye-care"] .btn:hover { background: #3d5a30 !important; }
        html[data-theme="eye-care"] .nav-tabs {
            background: #e8efdf !important;
            border-color: #b7c9a8 !important;
        }
        html[data-theme="eye-care"] .nav-tab {
            color: #2f3b2a !important;
        }
        html[data-theme="eye-care"] .stat-card {
            background: linear-gradient(135deg, #4a6b3a 0%, #6b8f5a 100%) !important;
        }
        html[data-theme="eye-care"] .form-group input:focus,
        html[data-theme="eye-care"] .form-group select:focus {
            border-color: #4a6b3a !important;
        }
        html[data-theme="eye-care"] .admin-theme-select {
            background: #4a6b3a;
            color: #f3f7ef;
            border-color: #3d5a30;
        }

        /* 可爱·奶油粉（管理端） */
        html[data-theme="cute"] body,
        html[data-theme="cute"] .main-layout {
            background: #f7ebe7 !important;
            color: #4a3530 !important;
        }
        html[data-theme="cute"] .header,
        html[data-theme="cute"] .login-form,
        html[data-theme="cute"] .page-title,
        html[data-theme="cute"] .section-card,
        html[data-theme="cute"] .modal-content,
        html[data-theme="cute"] .sidebar {
            background: #fff6f2 !important;
            border-color: #e8cfc8 !important;
            color: #4a3530 !important;
        }
        html[data-theme="cute"] .header .logo,
        html[data-theme="cute"] .page-title h2,
        html[data-theme="cute"] .section-header h3,
        html[data-theme="cute"] .login-form h2 {
            color: #4a3530 !important;
        }
        html[data-theme="cute"] .header .user-info,
        html[data-theme="cute"] .page-title .breadcrumb {
            color: #7a5a52 !important;
        }
        html[data-theme="cute"] .btn,
        html[data-theme="cute"] .nav-tab.active,
        html[data-theme="cute"] .active-range-tab.active {
            background: #d4848a !important;
            border-radius: 10px !important;
            box-shadow: none !important;
        }
        html[data-theme="cute"] .btn:hover { background: #c46f76 !important; }
        html[data-theme="cute"] .btn-success { background: #c97b82 !important; }
        html[data-theme="cute"] .nav-tabs {
            background: #fff6f2 !important;
            border-color: #e8cfc8 !important;
        }
        html[data-theme="cute"] .nav-tab {
            color: #4a3530 !important;
            border-radius: 10px !important;
        }
        html[data-theme="cute"] .stat-card {
            background: linear-gradient(135deg, #d4848a 0%, #e0a0a5 100%) !important;
        }
        html[data-theme="cute"] .form-group input,
        html[data-theme="cute"] .form-group select {
            border-radius: 10px !important;
            border-color: #e8cfc8 !important;
            color: #4a3530 !important;
            background: #fffaf8 !important;
        }
        html[data-theme="cute"] .form-group input:focus,
        html[data-theme="cute"] .form-group select:focus {
            border-color: #d4848a !important;
        }
        html[data-theme="cute"] .admin-theme-select {
            background: #fff6f2;
            color: #4a3530;
            border-color: #e0a0a5;
            border-radius: 10px;
        }

        /* 清爽·天空蓝（管理端） */
        html[data-theme="fresh"] body,
        html[data-theme="fresh"] .main-layout {
            background: #f0f7fc !important;
            color: #1e3a4c !important;
        }
        html[data-theme="fresh"] .header,
        html[data-theme="fresh"] .login-form,
        html[data-theme="fresh"] .page-title,
        html[data-theme="fresh"] .section-card,
        html[data-theme="fresh"] .modal-content,
        html[data-theme="fresh"] .sidebar {
            background: #ffffff !important;
            border-color: #cfe3f5 !important;
            color: #1e3a4c !important;
        }
        html[data-theme="fresh"] .header .logo,
        html[data-theme="fresh"] .page-title h2,
        html[data-theme="fresh"] .section-header h3,
        html[data-theme="fresh"] .login-form h2 {
            color: #1e3a4c !important;
        }
        html[data-theme="fresh"] .header .user-info,
        html[data-theme="fresh"] .page-title .breadcrumb {
            color: #4a6d82 !important;
        }
        html[data-theme="fresh"] .btn,
        html[data-theme="fresh"] .nav-tab.active,
        html[data-theme="fresh"] .active-range-tab.active {
            background: #3a8fd6 !important;
            box-shadow: none !important;
        }
        html[data-theme="fresh"] .btn:hover { background: #2f7bbd !important; }
        html[data-theme="fresh"] .btn-success { background: #3a8fd6 !important; }
        html[data-theme="fresh"] .nav-tabs {
            background: #ffffff !important;
            border-color: #cfe3f5 !important;
        }
        html[data-theme="fresh"] .nav-tab {
            color: #1e3a4c !important;
        }
        html[data-theme="fresh"] .stat-card {
            background: linear-gradient(135deg, #3a8fd6 0%, #5aa8e6 100%) !important;
        }
        html[data-theme="fresh"] .form-group input,
        html[data-theme="fresh"] .form-group select {
            border-color: #cfe3f5 !important;
            color: #1e3a4c !important;
            background: #ffffff !important;
        }
        html[data-theme="fresh"] .form-group input:focus,
        html[data-theme="fresh"] .form-group select:focus {
            border-color: #3a8fd6 !important;
        }
        html[data-theme="fresh"] .admin-theme-select {
            background: #ffffff;
            color: #1e3a4c;
            border-color: #3a8fd6;
        }

        /* ==================================================================
           视觉层（2026-07-26）
           这是一个单人运维用的操作台，之前那套渐变紫 + 彩虹按钮 + emoji 图标是
           消费级 App 的观感，套在高密度运维界面上会让人看不出轻重。这一层把它
           改成「仪表盘」气质：中性表面 + 单一强调色 + 数据优先，破坏性操作平时
           安静、悬停才变红。
           实现方式是在样式表末尾统一覆盖，不动任何 HTML/JS，因此零功能风险；
           四套主题（护眼/可爱/清爽）用的是 html[data-theme] + !important，
           特异性更高，仍然照常生效，不会被这一层压掉。
           ================================================================== */
        :root {
            --ds-accent: #4f46e5;
            --ds-accent-strong: #4338ca;
            --ds-accent-soft: #eef2ff;
            --ds-ink: #111827;
            --ds-ink-2: #374151;
            --ds-ink-3: #6b7280;
            --ds-line: #e5e7eb;
            --ds-line-soft: #f1f2f4;
            --ds-surface: #ffffff;
            --ds-canvas: #f6f7f9;
            --ds-ok: #047857;
            --ds-ok-soft: #ecfdf5;
            --ds-warn: #b45309;
            --ds-warn-soft: #fffbeb;
            --ds-danger: #b91c1c;
            --ds-danger-soft: #fef2f2;
            --ds-radius: 10px;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
                         'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
            background: var(--ds-canvas);
            color: var(--ds-ink-2);
            -webkit-font-smoothing: antialiased;
        }
        .main-layout { background: var(--ds-canvas); }

        /* 数字一律等宽，列表里上下对齐才好比较 */
        .stat-card h3,
        .active-user-card .use-count,
        .key-details,
        .key-link input[type="text"],
        table td,
        table th { font-variant-numeric: tabular-nums; }

        /* ---- 顶栏 ---- */
        .header {
            padding: 0 24px;
            height: 56px;
            border-bottom: 1px solid var(--ds-line);
            background: var(--ds-surface);
        }
        .header .logo { font-size: 15px; letter-spacing: -0.01em; color: var(--ds-ink); }
        .header .version-badge {
            background: var(--ds-accent-soft);
            color: var(--ds-accent-strong);
            border-radius: 6px;
            font-weight: 600;
            padding: 3px 8px;
        }
        .header .user-info { font-size: 13px; color: var(--ds-ink-3); }

        /* ---- 标签导航：下划线指示，不做整块换底 ---- */
        .nav-tabs {
            background: var(--ds-surface);
            border-bottom: 1px solid var(--ds-line);
            border-radius: 0;
            padding: 0 16px;
            gap: 2px;
        }
        .nav-tab {
            background: transparent;
            color: var(--ds-ink-3);
            font-size: 14px;
            font-weight: 500;
            padding: 14px 14px 12px;
            border-bottom: 2px solid transparent;
        }
        .nav-tab:hover { background: transparent; color: var(--ds-ink); }
        .nav-tab.active {
            background: transparent;
            color: var(--ds-accent-strong);
            font-weight: 600;
            border-bottom-color: var(--ds-accent);
        }

        /* ---- 卡片：细线代替阴影 ---- */
        .page-title,
        .section-card {
            border: 1px solid var(--ds-line);
            border-radius: var(--ds-radius);
            box-shadow: none;
        }
        .page-title { padding: 16px 20px; }
        .page-title h2 { font-size: 17px; font-weight: 650; color: var(--ds-ink); letter-spacing: -0.01em; }
        .section-header { border-bottom: 1px solid var(--ds-line-soft); padding: 14px 20px; }
        .section-header h3 { font-size: 15px; font-weight: 650; color: var(--ds-ink); }

        /* ---- 概览数字：紧凑白卡 + 一道强调色，不再是 6 块同色渐变 ---- */
        .stats-grid {
            grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
            gap: 12px;
            margin-bottom: 20px;
        }
        .stat-card {
            background: var(--ds-surface);
            color: var(--ds-ink);
            border: 1px solid var(--ds-line);
            border-radius: var(--ds-radius);
            padding: 16px 18px 14px;
            text-align: left;
        }
        .stat-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: auto;
            width: 100%; height: 2px;
            background: var(--ds-accent);
            border-radius: 0;
            transform: none;
            opacity: 0.85;
        }
        .stat-card h3 {
            font-size: 30px;
            font-weight: 650;
            color: var(--ds-ink);
            letter-spacing: -0.02em;
            margin-bottom: 2px;
        }
        .stat-card p { color: var(--ds-ink-3); font-size: 13px; opacity: 1; }

        /* ---- 按钮：按角色分层，而不是每个都涂满色 ---- */
        .btn,
        .key-link button,
        .key-actions button {
            border-radius: 8px;
            font-weight: 550;
            font-size: 13px;
            letter-spacing: 0;
            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
        }
        .btn { padding: 9px 16px; background: var(--ds-accent); }
        .btn:hover { background: var(--ds-accent-strong); }
        .btn:focus-visible,
        .key-link button:focus-visible,
        .nav-tab:focus-visible {
            outline: 2px solid var(--ds-accent);
            outline-offset: 2px;
        }
        .key-link button { padding: 7px 13px; transform: none; }
        .key-link button:hover { transform: none; box-shadow: none; }

        /* 中性动作（查看/改名/复制/改设置）：安静的描边，不抢视线。
           Key 那一行有 7 个按钮，全部涂色就等于全部没重点；这里只让「增加次数」
           是绿的、「减少次数/删除」是红的，其余一律中性，眼睛才会先落在有后果的上面。 */
        .btn-copy,
        .btn-info,
        .btn-primary,
        .btn-warning {
            background: var(--ds-surface);
            color: var(--ds-ink-2);
            border: 1px solid var(--ds-line);
        }
        .btn-copy:hover,
        .btn-info:hover,
        .btn-primary:hover,
        .btn-warning:hover {
            background: #f9fafb;
            color: var(--ds-ink);
            border-color: #d1d5db;
            box-shadow: none;
        }
        /* 但表单主提交（写成 class="btn btn-xxx"）是页面的主行动点，必须是实心的。
           两个类的特异性高于上面的单类规则，所以这里能正确覆盖回来。 */
        .btn.btn-primary {
            background: var(--ds-accent);
            color: #fff;
            border: 1px solid var(--ds-accent);
        }
        .btn.btn-primary:hover {
            background: var(--ds-accent-strong);
            border-color: var(--ds-accent-strong);
            color: #fff;
        }
        .btn.btn-success {
            background: #059669;
            color: #fff;
            border: 1px solid #059669;
        }
        .btn.btn-success:hover { background: #047857; border-color: #047857; }
        .btn.btn-danger,
        .btn.btn-delete {
            background: var(--ds-danger);
            color: #fff;
            border: 1px solid var(--ds-danger);
        }
        .btn.btn-danger:hover,
        .btn.btn-delete:hover { background: #991b1b; border-color: #991b1b; }
        /* 正向动作：淡绿底，不用高饱和绿块 */
        .btn-success {
            background: var(--ds-ok-soft);
            color: var(--ds-ok);
            border: 1px solid #a7f3d0;
        }
        .btn-success:hover { background: #d1fae5; }
        /* 惩罚性动作（拉黑 / 封禁）：琥珀，文字压深保证对比度 */
        .btn-blacklist {
            background: var(--ds-warn-soft);
            color: #92400e;
            border: 1px solid #fcd34d;
        }
        .btn-blacklist:hover { background: #fde68a; color: #78350f; }
        /* 破坏性动作：平时只是红字描边，悬停才变实心红 —— 免得「删除」和「改名」一样响 */
        .btn-danger,
        .btn-delete {
            background: var(--ds-surface);
            color: var(--ds-danger);
            border: 1px solid #fecaca;
        }
        .btn-danger:hover,
        .btn-delete:hover {
            background: var(--ds-danger);
            color: #fff;
            border-color: var(--ds-danger);
        }

        /* ---- Key 卡片：去掉层层嵌套，密度提上来 ---- */
        .key-item {
            background: var(--ds-surface);
            border: 1px solid var(--ds-line);
            border-radius: var(--ds-radius);
            box-shadow: none;
            padding: 16px 18px;
            margin-bottom: 12px;
            transition: border-color 0.15s ease;
        }
        .key-item::before { width: 3px; background: var(--ds-accent); opacity: 0.7; }
        .key-item:hover {
            box-shadow: none;
            transform: none;
            border-color: #d1d5db;
        }
        .key-title { font-size: 15px; font-weight: 650; color: var(--ds-ink); margin-bottom: 8px; }
        .key-title::before { font-size: 15px; opacity: 0.55; }
        .key-details {
            background: transparent;
            padding: 0 0 10px;
            margin-bottom: 10px;
            border-bottom: 1px dashed var(--ds-line);
            color: var(--ds-ink-3);
            font-size: 13px;
        }
        .key-link-section {
            background: transparent;
            border: none;
            padding: 0;
            margin: 10px 0 0;
        }
        .key-link-label { color: var(--ds-ink-3); font-size: 12px; margin-bottom: 6px; }
        .key-link input[type="text"] {
            background: #fafbfc;
            border-color: var(--ds-line);
            font-family: ui-monospace, 'SF Mono', Consolas, monospace;
            font-size: 12px;
        }
        .status-badge { border-radius: 6px; font-weight: 600; letter-spacing: 0; }

        /* ---- 表格：中性表头，不用渐变横幅 ---- */
        table thead th,
        .log-table thead th,
        table th {
            background: #fafbfc;
            color: var(--ds-ink-3);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.02em;
            border-bottom: 1px solid var(--ds-line);
            text-shadow: none;
        }
        table td { border-bottom: 1px solid var(--ds-line-soft); font-size: 13px; }
        table tbody tr:hover td { background: #fafbfc; }

        /* ---- 表单 ---- */
        .form-group label { font-size: 13px; font-weight: 550; color: var(--ds-ink-2); margin-bottom: 6px; }
        .form-group input,
        .form-group select,
        .form-group textarea {
            border: 1px solid var(--ds-line);
            border-radius: 8px;
            padding: 9px 12px;
            font-size: 13px;
            color: var(--ds-ink);
        }
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            border-color: var(--ds-accent);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
        }
        .create-key-form {
            background: #fafbfc;
            border: 1px solid var(--ds-line-soft);
            border-radius: var(--ds-radius);
        }

        /* ---- 用户 IP 行：这是一条信息，不是警告，所以不该常年顶着一条琥珀横幅 ---- */
        .user-ip-section {
            background: #fafbfc;
            border: 1px solid var(--ds-line-soft);
            border-left: 3px solid var(--ds-line);
            border-radius: 8px;
            padding: 9px 12px;
            margin-top: 12px;
            gap: 10px;
        }
        .user-ip-text { color: var(--ds-ink-3); font-size: 12px; font-weight: 500; }
        /* 真的有异常时（多 IP / 已拉黑）才升级成琥珀 */
        .user-ip-section:has(.ip-tag.multi-ip),
        .user-ip-section.is-alert {
            background: var(--ds-warn-soft);
            border-left-color: #f59e0b;
        }

        /* ---- 日志区的按钮：并进同一套配色，不要再单开一套蓝/绿/橙 ---- */
        .log-type-tab {
            border: 1px solid var(--ds-line);
            background-color: var(--ds-surface);
            color: var(--ds-ink-2);
            border-radius: 8px;
            font-weight: 550;
        }
        .log-type-tab:hover {
            border-color: #d1d5db;
            background-color: #f9fafb;
            color: var(--ds-ink);
        }
        .log-type-tab.active {
            border-color: var(--ds-accent);
            background-color: var(--ds-accent);
            color: #fff;
        }
        /* 这几个按钮原来是 background: linear-gradient(...) 的简写，
           只覆盖 background-color 压不住渐变图层，必须用 background 简写。 */
        .log-refresh-btn {
            background: var(--ds-surface) !important;
            color: var(--ds-ink-2) !important;
            border: 1px solid var(--ds-line) !important;
            border-radius: 8px;
            font-weight: 550;
        }
        .log-refresh-btn:hover {
            background: #f9fafb !important;
            color: var(--ds-ink) !important;
            border-color: #d1d5db !important;
            transform: none !important;
            box-shadow: none !important;
        }
        .log-clear-btn {
            background: var(--ds-surface) !important;
            color: var(--ds-danger) !important;
            border: 1px solid #fecaca !important;
            border-radius: 8px;
            font-weight: 550;
        }
        .log-clear-btn:hover {
            background: var(--ds-danger) !important;
            color: #fff !important;
            border-color: var(--ds-danger) !important;
            transform: none !important;
            box-shadow: none !important;
        }
        .log-table { background: var(--ds-surface); }
        .log-table thead {
            background: #fafbfc;
            color: var(--ds-ink-3);
        }
        .log-table thead th { text-transform: none; letter-spacing: 0.02em; padding: 12px 14px; }
        .log-table tbody tr { border-bottom: 1px solid var(--ds-line-soft); }
        .log-table tbody tr:hover {
            background: #fafbfc;
            transform: none;
            box-shadow: none;
        }
        .log-table tbody td { color: var(--ds-ink-2); padding: 12px 14px; }
        .log-empty-state, .log-empty-text { color: var(--ds-ink-3); }
        .log-empty-icon { opacity: 0.35; }

        /* ---- 活跃用户卡 ---- */
        .active-user-card { border-color: var(--ds-line); border-radius: 8px; }
        .active-user-card:hover { transform: none; box-shadow: none; border-color: #d1d5db; }
        .active-range-tab.active { background: var(--ds-accent) !important; box-shadow: none; }

        /* ---- 登录页 ---- */
        .login-form {
            border: 1px solid var(--ds-line);
            border-radius: 14px;
            box-shadow: none;
            padding: 36px 32px;
        }
        .login-form h2 { font-size: 20px; font-weight: 650; color: var(--ds-ink); margin-bottom: 24px; }
        .login-form .btn { width: 100%; padding: 11px 16px; }

        @media (prefers-reduced-motion: reduce) {
            * { transition: none !important; animation: none !important; }
        }

        /* ==================================================================
           深色主题（2026-07-26）
           不是把浅色反相，而是另配一套：底色偏冷灰蓝、层级靠明度递进而非阴影，
           强调色换成更亮的靛紫（#818cf8），否则 #4f46e5 压在深底上会发闷。
           与其它三套主题同机制（html[data-theme] + !important），互不影响。
           说明：公告的两块「预览」刻意保持浅色——它们预览的是用户端的浅色弹窗，
           跟着变深反而看不出真实效果。
           ================================================================== */
        html[data-theme="dark"] {
            --ds-accent: #818cf8;
            --ds-accent-strong: #a5b4fc;
            --ds-accent-soft: #1e1b4b;
            --ds-ink: #e6e8ec;
            --ds-ink-2: #b4bac6;
            --ds-ink-3: #8a92a3;
            --ds-line: #2a2f3a;
            --ds-line-soft: #21252e;
            --ds-surface: #171a21;
            --ds-canvas: #0f1115;
            --ds-ok: #34d399;
            --ds-ok-soft: #0d2a22;
            --ds-warn: #fbbf24;
            --ds-warn-soft: #2a2110;
            --ds-danger: #f87171;
            --ds-danger-soft: #2a1416;
            color-scheme: dark;
        }
        html[data-theme="dark"] body,
        html[data-theme="dark"] .main-layout {
            background: #0f1115 !important;
            color: #b4bac6 !important;
        }
        html[data-theme="dark"] .header {
            background: #171a21 !important;
            border-bottom-color: #2a2f3a !important;
        }
        html[data-theme="dark"] .header .logo,
        html[data-theme="dark"] .page-title h2,
        html[data-theme="dark"] .section-header h3,
        html[data-theme="dark"] .login-form h2,
        html[data-theme="dark"] .key-title,
        html[data-theme="dark"] .stat-card h3 {
            color: #e6e8ec !important;
        }
        html[data-theme="dark"] .header .user-info,
        html[data-theme="dark"] .page-title .breadcrumb,
        html[data-theme="dark"] .stat-card p,
        html[data-theme="dark"] .key-details,
        html[data-theme="dark"] .key-link-label,
        html[data-theme="dark"] .user-ip-text {
            color: #8a92a3 !important;
        }
        html[data-theme="dark"] .header .version-badge {
            background: #1e1b4b !important;
            color: #a5b4fc !important;
        }

        /* 导航 */
        html[data-theme="dark"] .nav-tabs {
            background: #171a21 !important;
            border-bottom-color: #2a2f3a !important;
        }
        html[data-theme="dark"] .nav-tab {
            background: transparent !important;
            color: #8a92a3 !important;
        }
        html[data-theme="dark"] .nav-tab:hover { color: #e6e8ec !important; }
        html[data-theme="dark"] .nav-tab.active {
            background: transparent !important;
            color: #a5b4fc !important;
            border-bottom-color: #818cf8 !important;
        }

        /* 卡片层：靠明度分层，不靠阴影 */
        html[data-theme="dark"] .page-title,
        html[data-theme="dark"] .section-card,
        html[data-theme="dark"] .stat-card,
        html[data-theme="dark"] .key-item,
        html[data-theme="dark"] .active-user-card,
        html[data-theme="dark"] .login-form,
        html[data-theme="dark"] .announcement-item {
            background: #171a21 !important;
            border-color: #2a2f3a !important;
            box-shadow: none !important;
        }
        html[data-theme="dark"] .section-header { border-bottom-color: #21252e !important; }
        html[data-theme="dark"] .stat-card::before { background: #818cf8 !important; }
        html[data-theme="dark"] .key-item::before { background: #818cf8 !important; }
        html[data-theme="dark"] .key-item:hover { border-color: #3a4152 !important; }
        html[data-theme="dark"] .key-details { border-bottom-color: #2a2f3a !important; }
        html[data-theme="dark"] .create-key-form,
        html[data-theme="dark"] .pagination-container,
        html[data-theme="dark"] .user-ip-section {
            background: #1d212a !important;
            border-color: #2a2f3a !important;
        }
        html[data-theme="dark"] .user-ip-section { border-left-color: #3a4152 !important; }
        html[data-theme="dark"] .user-ip-section.is-alert { background: #2a2110 !important; }

        /* 表单 */
        html[data-theme="dark"] .form-group label { color: #b4bac6 !important; }
        html[data-theme="dark"] .form-group input,
        html[data-theme="dark"] .form-group select,
        html[data-theme="dark"] .form-group textarea,
        html[data-theme="dark"] .key-link input[type="text"],
        html[data-theme="dark"] .log-filter-select,
        html[data-theme="dark"] input[type="text"],
        html[data-theme="dark"] input[type="number"],
        html[data-theme="dark"] input[type="password"],
        html[data-theme="dark"] input[type="datetime-local"],
        html[data-theme="dark"] select,
        html[data-theme="dark"] textarea {
            background: #12151b !important;
            border-color: #2a2f3a !important;
            color: #e6e8ec !important;
        }
        html[data-theme="dark"] .form-group input::placeholder,
        html[data-theme="dark"] input::placeholder,
        html[data-theme="dark"] textarea::placeholder { color: #6b7280 !important; }
        html[data-theme="dark"] .form-group input:focus,
        html[data-theme="dark"] .form-group select:focus,
        html[data-theme="dark"] .form-group textarea:focus,
        html[data-theme="dark"] input:focus,
        html[data-theme="dark"] textarea:focus {
            border-color: #818cf8 !important;
            box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2) !important;
        }

        /* 按钮：沿用浅色那套「只有增/减/删有颜色」的分层 */
        html[data-theme="dark"] .btn,
        html[data-theme="dark"] .btn.btn-primary {
            background: #6366f1 !important;
            color: #ffffff !important;
            border-color: #6366f1 !important;
        }
        html[data-theme="dark"] .btn:hover,
        html[data-theme="dark"] .btn.btn-primary:hover {
            background: #818cf8 !important;
            border-color: #818cf8 !important;
        }
        html[data-theme="dark"] .btn-copy,
        html[data-theme="dark"] .btn-info,
        html[data-theme="dark"] .btn-primary,
        html[data-theme="dark"] .btn-warning {
            background: #1d212a !important;
            color: #b4bac6 !important;
            border: 1px solid #2a2f3a !important;
        }
        html[data-theme="dark"] .btn-copy:hover,
        html[data-theme="dark"] .btn-info:hover,
        html[data-theme="dark"] .btn-primary:hover,
        html[data-theme="dark"] .btn-warning:hover {
            background: #262b36 !important;
            color: #e6e8ec !important;
            border-color: #3a4152 !important;
        }
        html[data-theme="dark"] .btn-success {
            background: #0d2a22 !important;
            color: #34d399 !important;
            border: 1px solid #1c4b3c !important;
        }
        html[data-theme="dark"] .btn-success:hover { background: #14392e !important; }
        html[data-theme="dark"] .btn.btn-success {
            background: #059669 !important;
            color: #ffffff !important;
            border-color: #059669 !important;
        }
        html[data-theme="dark"] .btn-blacklist {
            background: #2a2110 !important;
            color: #fbbf24 !important;
            border: 1px solid #4d3b12 !important;
        }
        html[data-theme="dark"] .btn-blacklist:hover { background: #3a2d13 !important; }
        html[data-theme="dark"] .btn-danger,
        html[data-theme="dark"] .btn-delete {
            background: #1d212a !important;
            color: #f87171 !important;
            border: 1px solid #4a2126 !important;
        }
        html[data-theme="dark"] .btn-danger:hover,
        html[data-theme="dark"] .btn-delete:hover {
            background: #b91c1c !important;
            color: #ffffff !important;
            border-color: #b91c1c !important;
        }
        html[data-theme="dark"] .btn.btn-danger,
        html[data-theme="dark"] .btn.btn-delete {
            background: #b91c1c !important;
            color: #ffffff !important;
            border-color: #b91c1c !important;
        }

        /* Key 卡里那个访问链接是内联样式写死的浅色，必须显式压掉 */
        html[data-theme="dark"] .key-link-section a {
            background: #12151b !important;
            border-color: #2a2f3a !important;
            color: #a5b4fc !important;
        }
        html[data-theme="dark"] .key-link-section a:hover {
            background: #1d212a !important;
            border-color: #3a4152 !important;
            box-shadow: none !important;
        }
        html[data-theme="dark"] .expire-time-editable { color: #a5b4fc !important; }

        /* 表格 */
        html[data-theme="dark"] table th,
        html[data-theme="dark"] table thead th {
            background: #1d212a !important;
            color: #8a92a3 !important;
            border-bottom-color: #2a2f3a !important;
        }
        html[data-theme="dark"] table td {
            color: #b4bac6 !important;
            border-bottom-color: #21252e !important;
        }
        html[data-theme="dark"] table tbody tr:hover td { background: #1d212a !important; }

        /* 徽章 / 提示 */
        html[data-theme="dark"] .status-badge.status-active {
            background: #0d2a22 !important; color: #34d399 !important;
        }
        html[data-theme="dark"] .status-badge.status-expired {
            background: #2a1416 !important; color: #f87171 !important;
        }
        html[data-theme="dark"] .active-user-card .ip-tag {
            background: #262b36 !important; color: #b4bac6 !important;
        }
        html[data-theme="dark"] .active-user-card .ip-tag.multi-ip {
            background: #2a2110 !important; color: #fbbf24 !important;
        }
        html[data-theme="dark"] .active-user-card .device-tag {
            background: #1e2a3a !important; color: #7fb3ff !important;
        }
        html[data-theme="dark"] .active-user-card .device-tag.multi-device {
            background: #3a1f22 !important; color: #ff8a8a !important;
        }
        html[data-theme="dark"] .active-user-card .user-name { color: #e6e8ec !important; }
        html[data-theme="dark"] .active-user-card .user-meta { color: #8a92a3 !important; }
        html[data-theme="dark"] .active-user-card:hover { border-color: #3a4152 !important; }
        html[data-theme="dark"] .active-range-tab.active {
            background: #6366f1 !important; color: #fff !important;
        }
        html[data-theme="dark"] .active-users-empty { color: #6b7280 !important; }

        /* 日志区 */
        html[data-theme="dark"] .log-type-tab,
        html[data-theme="dark"] .log-refresh-btn {
            background: #1d212a !important;
            color: #b4bac6 !important;
            border: 1px solid #2a2f3a !important;
        }
        html[data-theme="dark"] .log-type-tab:hover,
        html[data-theme="dark"] .log-refresh-btn:hover {
            background: #262b36 !important;
            color: #e6e8ec !important;
            border-color: #3a4152 !important;
        }
        html[data-theme="dark"] .log-type-tab.active {
            background: #6366f1 !important;
            border-color: #6366f1 !important;
            color: #ffffff !important;
        }
        html[data-theme="dark"] .log-clear-btn {
            background: #1d212a !important;
            color: #f87171 !important;
            border: 1px solid #4a2126 !important;
        }
        html[data-theme="dark"] .log-clear-btn:hover {
            background: #b91c1c !important;
            color: #ffffff !important;
            border-color: #b91c1c !important;
        }
        html[data-theme="dark"] .log-table { background: #171a21 !important; }
        html[data-theme="dark"] .log-table thead {
            background: #1d212a !important;
            color: #8a92a3 !important;
        }
        html[data-theme="dark"] .log-table thead th { color: #8a92a3 !important; }
        html[data-theme="dark"] .log-table tbody tr { border-bottom-color: #21252e !important; }
        html[data-theme="dark"] .log-table tbody tr:hover { background: #1d212a !important; }
        html[data-theme="dark"] .log-table tbody td { color: #b4bac6 !important; }
        html[data-theme="dark"] .log-table-wrapper { background: #171a21 !important; }
        html[data-theme="dark"] .log-filter-select { color: #b4bac6 !important; }
        html[data-theme="dark"] .log-empty-state,
        html[data-theme="dark"] .log-empty-text,
        html[data-theme="dark"] .terminal-log-stats,
        html[data-theme="dark"] .no-data,
        html[data-theme="dark"] .empty-state { color: #6b7280 !important; }
        html[data-theme="dark"] .terminal-log-stats {
            background-color: #1d212a !important;
            border-top-color: #2a2f3a !important;
        }
        html[data-theme="dark"] .log-pagination button {
            background: #1d212a !important;
            color: #b4bac6 !important;
            border: 1px solid #2a2f3a !important;
        }

        /* 批量注册状态框、运行日志框等内联写死浅底的小面板 */
        html[data-theme="dark"] #batchRegStatus,
        html[data-theme="dark"] #batchRegRecent,
        html[data-theme="dark"] #batchRegLogBox,
        html[data-theme="dark"] .batch-reg-log {
            background: #12151b !important;
            color: #b4bac6 !important;
            border-color: #2a2f3a !important;
        }
        /* 主题下拉本身 */
        html[data-theme="dark"] .admin-theme-select {
            background: #1d212a !important;
            color: #b4bac6 !important;
            border-color: #2a2f3a !important;
        }

        /* 滚动条也跟着变深，免得深色页面上挂两条亮白轨道 */
        html[data-theme="dark"] * {
            scrollbar-color: #3a4152 #12151b;
        }
        html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
        html[data-theme="dark"] ::-webkit-scrollbar-track { background: #12151b; }
        html[data-theme="dark"] ::-webkit-scrollbar-thumb {
            background: #3a4152; border-radius: 6px; border: 2px solid #12151b;
        }
        html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a5265; }