/* ==================== 封禁页面 ==================== */
.ban-page-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ban-card {
    width: 100%;
    max-width: 560px;
    background: var(--bg-card, #152238);
    border-radius: var(--radius-xl, 16px);
    padding: 40px 36px;
    text-align: center;
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.5));
    border: 1px solid var(--border-light, #1e3a5f);
}

.ban-icon-area {
    margin-bottom: 24px;
}

.ban-shield-svg {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 0 16px rgba(255, 23, 68, 0.35));
    animation: banPulse 2s ease-in-out infinite;
}

@keyframes banPulse {
    0%, 100% { filter: drop-shadow(0 0 12px rgba(255, 23, 68, 0.25)); transform: scale(1); }
    50%      { filter: drop-shadow(0 0 24px rgba(255, 23, 68, 0.45)); transform: scale(1.03); }
}

.ban-title {
    font-size: 26px;
    font-weight: 800;
    color: #ff1744;
    margin: 0 0 8px;
    letter-spacing: 2px;
}

.ban-subtitle {
    font-size: 14px;
    color: var(--text-secondary, #a0aec0);
    margin: 0 0 28px;
}

.ban-detail-card {
    background: rgba(255, 23, 68, 0.06);
    border: 1px solid rgba(255, 23, 68, 0.15);
    border-radius: var(--radius-lg, 12px);
    padding: 18px 22px;
    text-align: left;
    margin-bottom: 20px;
}

.ban-info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 23, 68, 0.08);
}
.ban-info-row:last-child { border-bottom: none; }

.info-label {
    color: var(--text-muted, #718096);
    min-width: 110px;
    flex-shrink: 0;
    font-size: 12px;
}

.info-value {
    color: var(--text-primary, #ffffff);
    font-weight: 500;
    word-break: break-word;
    text-align: right;
}

.ban-reason-text {
    color: #ff6b81;
    font-weight: 600;
}

.ban-duration-text {
    color: #ffab40;
    font-weight: 700;
}

.ban-countdown {
    background: linear-gradient(135deg, rgba(0,212,255,0.08), rgba(0,168,204,0.04));
    border: 1px solid rgba(0,212,255,0.18);
    border-radius: var(--radius-md, 8px);
    padding: 14px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.countdown-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.countdown-time {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent-color, #00d4ff);
    letter-spacing: 1px;
    font-family: 'Courier New', monospace;
}

/* 申诉表单 */
.ban-appeal-form {
    margin-bottom: 20px;
}

.ban-appeal-textarea {
    width: 100%;
    background: var(--bg-input, #1a2942);
    border: 1px solid var(--border-color, #2a3f5f);
    border-radius: var(--radius-md, 8px);
    color: var(--text-primary, #ffffff);
    font-size: 14px;
    padding: 12px 14px;
    resize: vertical;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    font-family: inherit;
    line-height: 1.6;
}
.ban-appeal-textarea:focus {
    border-color: var(--accent-color, #00d4ff);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12);
}

.char-count {
    text-align: right;
    font-size: 11px;
    color: var(--text-muted, #718096);
    margin-top: 4px;
}

/* 按钮区域 */
.ban-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 28px;
}

.btn-appeal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 36px;
    background: linear-gradient(135deg, var(--accent-color, #00d4ff), #00a8cc);
    color: #fff;
    border: none;
    border-radius: var(--radius-md, 8px);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 1px;
}
.btn-appeal:hover {
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.35);
    transform: translateY(-1px);
}
.btn-logout-ban {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 28px;
    background: transparent;
    color: var(--text-muted, #718096);
    border: 1px solid var(--border-color, #2a3f5f);
    border-radius: var(--radius-md, 8px);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
}
.btn-logout-ban:hover {
    color: #fff;
    border-color: #ff1744;
    background: rgba(255, 23, 68, 0.08);
}

/* 申诉历史记录 */
.ban-history {
    text-align: left;
    border-top: 1px solid var(--border-light, #1e3a5f);
    padding-top: 20px;
}

.history-title {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 12px;
}

.history-item {
    background: var(--bg-input, #1a2942);
    border-radius: var(--radius-sm, 4px);
    padding: 12px 14px;
    margin-bottom: 10px;
    border-left: 3px solid var(--border-color, #2a3f5f);
}

.history-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.history-status {
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: 600;
}
.history-pending { background: rgba(255,171,0,0.15); color: var(--warning-color,#ffab00); }
.history-approved { background: rgba(0,200,83,0.15); color: var(--success-color,#00c853); }
.history-rejected { background: rgba(255,23,68,0.12); color: var(--danger-color,#ff1744); }

.history-time {
    font-size: 11px;
    color: var(--text-muted, #718096);
}

.history-content {
    font-size: 13px;
    color: var(--text-primary);
    margin: 0 0 4px;
    line-height: 1.55;
}

.history-reply {
    background: rgba(0,212,255,0.06);
    border: 1px solid rgba(0,212,255,0.12);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-top: 6px;
}
.history-reply strong { color: var(--accent-color, #00d4ff); }
.history-reply em { color: var(--text-muted, #718096); }

@media (max-width: 480px) {
    .ban-card { padding: 28px 20px; }
    .ban-title { font-size: 22px; }
    .ban-shield-svg { width: 64px; height: 64px; }
    .info-label { font-size: 11px; min-width: 90px; }
    .ban-info-row { font-size: 12px; }
    .ban-actions { flex-direction: column-reverse; }
    .btn-appeal, .btn-logout-ban { width: 100%; }
}

/* ==================== 后台：用户管理表格（精致版） ==================== */
.table-responsive { background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.04); border:1px solid #e8ecf1; overflow:hidden; }

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

/* 表头 - 深色渐变 */
.user-table thead th {
    background: linear-gradient(180deg,#1e293b 0%,#0f172a 100%);
    color:#cbd5e1; padding:14px 18px; text-align:left;
    font-size:11.5px; font-weight:700; text-transform:uppercase;
    letter-spacing:.8px; white-space:nowrap;
    border-bottom:2px solid #334155;
}

/* 数据行 */
.user-table tbody tr {
    transition:all .2s ease;
    border-bottom:1px solid #f1f5f9;
}
.user-table tbody tr:last-child{border-bottom:none;}
.user-table tbody td{ padding:15px 18px; vertical-align:middle; color:#374151; }
.user-table tbody tr:hover{ background:rgba(99,102,241,.03); box-shadow:inset 0 0 0 1px rgba(99,102,241,.08); }

/* 奇偶行交替背景 */
.user-table tbody tr:nth-child(even){background:#fafbfc;}
.user-table tbody tr:nth-child(even):hover{background:rgba(99,102,241,.04);}

/* ---- 封禁行 ---- */
.row-banned{background:#fff5f5!important;border-left:3px solid #ef4444!important;}
.row-banned:hover{background:#fee!important;}

/* ---- ID 列 ---- */
.uid-num{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:30px;height:26px;background:linear-gradient(135deg,#f1f5f9,#e2e8f0);
    color:#64748b;font-size:12px;font-weight:700;border-radius:6px;padding:0 7px;
    box-shadow:inset 0 -1px 0 rgba(0,0,0,.05);
}

/* ---- 用户名列：头像+名字 ---- */
.ut-avatar{
    display:inline-flex;width:36px;height:36px;border-radius:10px;color:#fff;
    align-items:center;justify-content:center;font-size:14px;font-weight:800;
    margin-right:12px;vertical-align:middle;flex-shrink:0;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.ut-name{
    font-weight:700;font-size:13.5px;color:#1e293b;vertical-align:middle;
    letter-spacing:.2px;
}
.ut-email{font-size:12.5px;color:#64748b;}

/* ---- 工单数 ---- */
.ut-count{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:32px;height:28px;
    background:linear-gradient(135deg,#eef2ff,#e0e7ff);
    color:#4338ca;border-radius:8px;font-weight:800;font-size:13px;
    padding:0 9px;
    box-shadow:0 1px 3px rgba(67,56,202,.15);
}

/* ---- 注册时间 ---- */
.ut-time{font-size:12px;color:#94a3b8;font-family:'SF Mono','Consolas',monospace;}

/* ---- 状态标签 ---- */
.tag-ok,.tag-ban{
    display:inline-flex;align-items:center;gap:4px;
    padding:5px 14px;border-radius:20px;font-size:11.5px;
    font-weight:700;letter-spacing:.3px;line-height:1;
}
.tag-ok{
    background:linear-gradient(135deg,#ecfdf5,#d1fae5);
    color:#15803d;border:1px solid transparent;
    box-shadow:0 1px 4px rgba(22,163,74,.15);
}
.tag-ok::before{content:'';width:6px;height:6px;border-radius:50%;background:#16a34a;display:inline-block;}
.tag-ban{
    background:linear-gradient(135deg,#fef2f2,#fecaca);
    color:#b91c1c;border:1px solid transparent;
    box-shadow:0 1px 4px rgba(239,68,68,.15);
}
.tag-ban::before{content:'';width:6px;height:6px;border-radius:50%;background:#dc2626;display:inline-block;animation:bannedPulse 1.5s infinite;}
@keyframes bannedPulse{0%,100%{opacity:1}50%{opacity:.4}}

.text-muted{color:#94a3b8;font-size:12.5px;}

/* ---- 操作按钮组 ---- */
.btn-t{
    padding:5px 14px;font-size:11.5px;border-radius:8px;
    cursor:pointer;border:none;transition:all .25s cubic-bezier(.4,0,.2,1);
    font-weight:600;display:inline-block;line-height:1.6;
    position:relative;top:0;
}
.btn-t:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.12);}
.btn-t:active{transform:translateY(0);}

.btn-t-blue{background:#fff;color:#2563eb;border:1px solid #93c5fd;}   .btn-t-blue:hover{background:#eff6ff;border-color:#60a5fa;color:#1d4ed8;}
.btn-t-orange{background:#fff;color:#c2410c;border:1px solid #fdba74;}  .btn-t-orange:hover{background:#fffbeb;border-color:#fb923c;color:#9a3412;}
.btn-t-red{background:#fff;color:#dc2626;border:1px solid #fca5a5;}     .btn-t-red:hover{background:#fef2f2;border-color:#f87171;color:#b91c1c;}
.btn-t-green{background:#fff;color:#15803d;border:1px solid #86efac;}  .btn-t-green:hover{background:#f0fdf4;border-color:#4ade80;color:#166534;}

.empty-row{text-align:center;padding:40px 20px;color:#94a3b8;font-size:14px;}

@media(max-width:768px){
    .user-table{font-size:12px;}
    .user-table thead th,.user-table tbody td{padding:10px 12px;}
    .ut-avatar{width:30px;height:30px;font-size:12px;margin-right:8px;}
    .btn-t{padding:4px 10px;font-size:11px;}
}

/* 用户详情弹窗 */
.user-detail-grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.user-detail-item { background:#f8f9fa; padding:12px 14px; border-radius:6px; }
.user-detail-label { font-size:11px;color:#999;margin-bottom:4px; }
.user-detail-value { font-size:14px;font-weight:600;color:#333; }

/* 封禁操作表单 */
.ban-type-option { display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;transition:all 0.2s;margin-bottom:8px; }
.ban-type-option:hover { border-color:#00d4ff; background:rgba(0,212,255,0.04); }
.ban-type-option input[type="radio"]:checked + span { color:#00d4ff;font-weight:700; }
.ban-type-option.selected { border-color:#00d4ff;background:rgba(0,212,255,0.06); }

/* 申诉管理 */
.appeal-card { background:#fff;border:1px solid #e8e8e8;border-radius:8px;padding:16px;margin-bottom:12px; }
.appeal-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:8px; }
.appeal-status-tag { font-size:11px;padding:2px 10px;border-radius:10px;font-weight:600; }
.appeal-body { font-size:13px;color:#444;line-height:1.65; }
.appeal-reply-box { background:rgba(0,212,255,0.05);border:1px solid rgba(0,212,255,0.12);border-radius:4px;padding:10px 12px;margin-top:8px;font-size:12px;color:#666; }