/* ============================================================
   RuleApi 管理后台 - 全局样式 (暗色侧栏 + 紫色强调)
   ============================================================ */

:root {
    --primary: #7c3aed;
    --primary-dark: #6d28d9;
    --primary-light: #ede9fe;
    --primary-50: #f5f3ff;
    --primary-100: #ede9fe;
    --danger: #e53e3e;
    --danger-light: #fff5f5;
    --success: #059669;
    --success-light: #ecfdf5;
    --warning: #d97706;
    --warning-light: #fffbeb;
    --info: #6366f1;
    --info-light: #eef2ff;
    --bg: #f1f5f9;
    --bg-white: #ffffff;
    --text: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    --border-dark: #cbd5e1;
    --shadow: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 32px rgba(0,0,0,0.1);
    --radius: 8px;
    --radius-sm: 4px;
    --radius-lg: 12px;
    --sidebar-width: 260px;
    --topbar-height: 60px;
    --alert-height: 40px;
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --sidebar-bg: #ffffff;
    --sidebar-hover: #f5f3ff;
    --sidebar-active: #ede9fe;
}

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

body{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
    font-size:14px;color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;
}

a{color:var(--primary);text-decoration:none} a:hover{color:var(--primary-dark)}
img{max-width:100%;vertical-align:middle}
input,button,select,textarea{font-family:inherit;font-size:inherit}

/* ==================== Layout ==================== */
.admin-layout{display:flex;min-height:100vh}

/* ==================== Sidebar ==================== */
.sidebar{
    width:var(--sidebar-width);min-width:var(--sidebar-width);
    background:#fff;color:var(--text);display:flex;flex-direction:column;
    position:fixed;top:0;left:0;bottom:0;z-index:100;
    transition:transform var(--transition);overflow-y:auto;overflow-x:hidden;
    border-right:1px solid var(--border);box-shadow:2px 0 8px rgba(0,0,0,0.04);
}
.sidebar-header{padding:20px 20px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}
.sidebar-logo{font-size:30px;line-height:1;flex-shrink:0}
.sidebar-title h1{font-size:15px;font-weight:700;color:var(--text);letter-spacing:0.3px}
.sidebar-version{font-size:10px;color:var(--text-muted);margin-top:2px;display:block}

/* Sidebar Nav */
.sidebar-nav{flex:1;padding:4px 0;overflow-y:auto}

.nav-group{margin-bottom:2px}
.nav-group-toggle{
    display:flex;align-items:center;gap:8px;
    padding:10px 16px;font-size:13px;font-weight:600;
    color:var(--text-secondary);cursor:pointer;border:none;background:none;width:100%;text-align:left;
    transition:all 0.15s;letter-spacing:0.3px;
}
.nav-group-toggle:hover{color:var(--text);background:var(--bg)}
.nav-group-toggle .group-icon{font-size:15px;flex-shrink:0}
.nav-group-toggle .arrow{
    margin-left:auto;font-size:10px;transition:transform 0.2s;color:var(--text-muted);
}
.nav-group.open .nav-group-toggle .arrow{transform:rotate(90deg)}

.nav-sub{list-style:none;display:none}
.nav-group.open .nav-sub{display:block}
.nav-group.open .nav-group-toggle{color:var(--text)}

.nav-item a{
    display:flex;align-items:center;gap:10px;
    padding:8px 16px 8px 32px;color:var(--text-secondary);
    font-size:13px;transition:all 0.15s;
    border-left:3px solid transparent;
}
.nav-item a:hover{background:var(--primary-50);color:var(--text)}
.nav-item.active a{
    background:var(--primary-50);color:var(--primary);
    border-left-color:var(--primary);font-weight:500;
}
.nav-item-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0}

/* Sidebar Footer */
.sidebar-footer{
    padding:12px 16px;border-top:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;
}
.sidebar-user{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.sidebar-user-avatar img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--border)}
.avatar-placeholder{width:36px;height:36px;border-radius:50%;background:var(--primary-100);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:var(--primary)}
.sidebar-user-name{font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-role{font-size:11px;color:var(--text-muted)}
.sidebar-logout{color:var(--text-muted);padding:6px;border-radius:var(--radius-sm);transition:all 0.15s}
.sidebar-logout:hover{color:var(--danger);background:var(--danger-light)}

/* ==================== Main Content ==================== */
.main-content{flex:1;margin-left:var(--sidebar-width);min-width:0;transition:margin-left var(--transition)}
.admin-layout.sidebar-collapsed .sidebar{transform:translateX(-100%)}
.admin-layout.sidebar-collapsed .main-content{margin-left:0}

/* ==================== Alert Banner ==================== */
.alert-banner{
    background:linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-bottom:2px solid #fbbf24;height:var(--alert-height);
    display:flex;align-items:center;position:sticky;top:0;z-index:90;
}
.alert-banner-inner{display:flex;align-items:center;gap:8px;padding:0 24px;font-size:12.5px;color:#92400e;font-weight:500;width:100%}
.alert-icon{color:#d97706;flex-shrink:0}

/* ==================== Top Bar ==================== */
.top-bar{
    height:var(--topbar-height);background:var(--bg-white);
    border-bottom:1px solid var(--border);display:flex;align-items:center;
    padding:0 24px;gap:16px;position:sticky;top:var(--alert-height);z-index:89;
}
.menu-toggle{background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:6px;border-radius:var(--radius-sm);transition:all 0.15s}
.menu-toggle:hover{color:var(--text);background:var(--bg)}
.top-bar-title{flex:1}
.top-bar-title h2{font-size:18px;font-weight:600;color:var(--text)}
.top-bar-actions{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text-secondary)}
.top-bar-time{font-variant-numeric:tabular-nums}
.top-bar-btn{padding:6px 10px;border-radius:var(--radius-sm);color:var(--text-secondary)}
.top-bar-btn:hover{background:var(--bg);color:var(--text)}

/* ==================== Page Container ==================== */
.page-container{padding:24px;max-width:1400px}

/* ==================== Cards ==================== */
.card{background:var(--bg-white);border-radius:var(--radius-lg);box-shadow:var(--shadow);border:1px solid var(--border);margin-bottom:20px;overflow:hidden}
.card-header{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;background:#fafafa}
.card-header h3{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px;color:var(--text)}
.card-body{padding:20px}
.card-footer{padding:12px 20px;border-top:1px solid var(--border);background:var(--bg)}

/* ==================== Stats Grid ==================== */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:16px}
.stat-card{background:var(--bg-white);border-radius:var(--radius-lg);box-shadow:var(--shadow);border:1px solid var(--border);padding:18px;transition:all 0.2s;position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--border)}
.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.stat-card .stat-icon{width:42px;height:42px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:10px}
.stat-icon.violet{background:#ede9fe;color:#7c3aed}
.stat-icon.green{background:#d1fae5;color:#059669}
.stat-icon.orange{background:#fef3c7;color:#d97706}
.stat-icon.red{background:#fecaca;color:#dc2626}
.stat-icon.teal{background:#ccfbf1;color:#0d9488}
.stat-value{font-size:26px;font-weight:700;color:var(--text);line-height:1.2}
.stat-label{font-size:12.5px;color:var(--text-secondary);margin-top:4px}
.stat-sub{font-size:11.5px;color:var(--primary);margin-top:6px}

/* ==================== Table ==================== */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
table th,table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border);font-size:13px}
table th{background:var(--bg);font-weight:600;color:var(--text-secondary);font-size:11.5px;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap}
table tbody tr:hover{background:#f8fafc}
table tbody tr:last-child td{border-bottom:none}
.table-actions{display:flex;gap:5px;flex-wrap:wrap}

/* ==================== Buttons ==================== */
.btn{display:inline-flex;align-items:center;gap:5px;padding:8px 16px;border-radius:var(--radius);font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all 0.15s;white-space:nowrap;line-height:1.4}
.btn-primary{background:var(--primary);color:#fff} .btn-primary:hover{background:var(--primary-dark);box-shadow:0 2px 8px rgba(124,58,237,0.3)}
.btn-danger{background:var(--danger);color:#fff} .btn-danger:hover{background:#c53030}
.btn-success{background:var(--success);color:#fff} .btn-success:hover{background:#047857}
.btn-warning{background:var(--warning);color:#fff} .btn-warning:hover{background:#b45309}
.btn-outline{background:transparent;border-color:var(--border-dark);color:var(--text-secondary)}
.btn-outline:hover{background:var(--bg);color:var(--text);border-color:var(--text-muted)}
.btn-sm{padding:4px 10px;font-size:12px}
.btn-xs{padding:2px 8px;font-size:11px;border-radius:var(--radius-sm)}

/* ==================== Badges ==================== */
.badge{display:inline-block;padding:2px 8px;font-size:11px;font-weight:500;border-radius:10px}
.badge-violet{background:#ede9fe;color:#7c3aed} .badge-green{background:#d1fae5;color:#059669}
.badge-red{background:#fecaca;color:#dc2626} .badge-yellow{background:#fef3c7;color:#92400e}
.badge-gray{background:#f1f5f9;color:#64748b} .badge-blue{background:#dbeafe;color:#2563eb}
.badge-purple{background:#f3e8ff;color:#9333ea}

/* ==================== Forms ==================== */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:13px;font-weight:500;margin-bottom:5px;color:var(--text)}
.form-control{width:100%;padding:9px 12px;border:1px solid var(--border-dark);border-radius:var(--radius);font-size:13.5px;transition:all 0.15s;background:var(--bg-white)}
.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #ede9fe}
.form-control-sm{padding:6px 10px;font-size:12.5px}
select.form-control{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
textarea.form-control{resize:vertical;min-height:70px}
.form-inline{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.form-inline .form-group{margin-bottom:0}

/* ==================== Pagination ==================== */
.pagination{display:flex;gap:4px;justify-content:center;align-items:center;flex-wrap:wrap}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 8px;border-radius:var(--radius-sm);font-size:13px;border:1px solid var(--border);background:var(--bg-white);color:var(--text-secondary);transition:all 0.15s}
.pagination a:hover{background:var(--primary-50);color:var(--primary);border-color:#c4b5fd}
.pagination .active{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:600}
.pagination .disabled{opacity:0.4;pointer-events:none}

/* ==================== Toast ==================== */
.toast{position:fixed;top:20px;right:20px;z-index:9999;padding:12px 20px;border-radius:var(--radius);font-size:13px;font-weight:500;color:#fff;animation:toastIn 0.3s ease;box-shadow:var(--shadow-lg)}
.toast-info{background:var(--primary)} .toast-success{background:var(--success)}
.toast-error{background:var(--danger)} .toast-warning{background:var(--warning)}
.toast-hide{animation:toastOut 0.3s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(40px)}}

/* ==================== Empty / Loading ==================== */
.empty-state{text-align:center;padding:40px 20px;color:var(--text-muted)}
.empty-state .empty-icon{font-size:44px;margin-bottom:10px}
.loading{text-align:center;padding:36px}
.spinner{display:inline-block;width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 0.7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==================== Utility ==================== */
.text-center{text-align:center}.text-muted{color:var(--text-secondary)}.text-success{color:var(--success)}
.text-danger{color:var(--danger)}.text-warning{color:var(--warning)}.text-sm{font-size:12px}
.font-bold{font-weight:600}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mb-3{margin-bottom:12px}
.ml-2{margin-left:8px}.gap-2{gap:8px}.flex{display:flex}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.justify-between{justify-content:space-between}

/* ==================== Login Page ==================== */
.login-page{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg, #18181b 0%, #1a1a2e 40%, #312e81 100%);
    position:relative;overflow:hidden;
}
.login-page::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at center,rgba(124,58,237,0.06) 0%,transparent 70%);animation:loginBg 25s linear infinite}
@keyframes loginBg{to{transform:rotate(360deg)}}
.login-card{background:var(--bg-white);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,0.3);width:400px;max-width:92vw;padding:40px 36px;position:relative;z-index:1}
.login-header{text-align:center;margin-bottom:28px}
.login-logo{font-size:44px;margin-bottom:10px}
.login-title{font-size:21px;font-weight:700;color:var(--text);margin-bottom:4px}
.login-subtitle{font-size:12.5px;color:var(--text-secondary)}
.login-error{background:var(--danger-light);border:1px solid #fecaca;color:var(--danger);padding:10px 14px;border-radius:var(--radius);font-size:13px;margin-bottom:16px;display:flex;align-items:center;gap:6px}
.login-form .form-group{margin-bottom:18px}
.login-form .form-group label{font-size:12.5px;font-weight:600;margin-bottom:6px}
.login-form .form-control{padding:11px 14px;font-size:14px}
.login-btn{width:100%;padding:12px;font-size:15px;font-weight:600;border-radius:var(--radius);background:var(--primary);color:#fff;border:none;cursor:pointer;transition:all 0.2s}
.login-btn:hover{background:var(--primary-dark);box-shadow:0 4px 16px rgba(124,58,237,0.35);transform:translateY(-1px)}
.login-footer{text-align:center;margin-top:18px;font-size:11.5px;color:var(--text-muted)}
.verify-card{background:var(--bg-white);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,0.3);width:440px;max-width:92vw;padding:40px 36px;position:relative;z-index:1}

/* ==================== Responsive ==================== */
@media(max-width:768px){
    .sidebar{transform:translateX(-100%)}.main-content{margin-left:0}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .admin-layout.sidebar-collapsed .sidebar{transform:translateX(0)}
}
@media(max-width:480px){
    .stats-grid{grid-template-columns:1fr}.page-container{padding:12px}
    .top-bar{padding:0 12px}
    .card-header{padding:12px 14px}.card-body{padding:14px}
}

/* Date/time input styling */
input[type="datetime-local"]{color-scheme:light}

/* Tab/switcher pill */
.tab-pills{display:flex;gap:4px;background:var(--bg);padding:3px;border-radius:var(--radius)}
.tab-pill{padding:6px 16px;border-radius:6px;font-size:12.5px;font-weight:500;cursor:pointer;border:none;background:none;color:var(--text-secondary);transition:all 0.15s}
.tab-pill.active{background:var(--bg-white);color:var(--primary);box-shadow:0 1px 3px rgba(0,0,0,0.06)}
.tab-pill:hover:not(.active){color:var(--text)}