/*
 * ============================================================
 *  Made by ARIF BROH | Date: 5/4/2026
 *  All credits belongs to ARIF BROH
 *  For any kind of software development job, cheat, website
 *  or panel development — contact ARIF BROH:
 *  Telegram: https://t.me/ARIF_BROH
 *  Official Channel: https://t.me/DRAX_ELITE
 * ============================================================
 */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');
:root {
    --bg: #000000;
    --bg-card: #141417;
    --bg-input: #0A0A0B;
    --bg-secondary: #1A1A1F;
    --bg-tertiary: #25252B;

    --border: #27272A;
    --border-hover: #3F3F46;
    --border-light: #3F3F46;
    --accent: #FF4D4D;
    --accent-dim: rgba(255,77,77,0.08);
    --accent-hover: #FF6666;
    --accent-gradient: linear-gradient(135deg, #FF4D4D 0%, #FF6B6B 50%, #FF8787 100%);
    --accent-glow: rgba(255,77,77,0.25);

    --danger: #FF6B6B;
    --danger-dim: rgba(255,107,107,0.08);
    --danger-hover: #FF5252;
    --danger-gradient: linear-gradient(135deg, #FF6B6B 0%, #FF5252 100%);

    --warning: #F59E0B;
    --warning-dim: rgba(245,158,11,0.08);
    --warning-gradient: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);

    --success: #34D399;
    --success-dim: rgba(52,211,153,0.08);
    --success-gradient: linear-gradient(135deg, #34D399 0%, #10B981 100%);

    --premium-gold: #FFD700;
    --premium-gold-dim: rgba(255,215,0,0.1);

    --premium-purple: #A78BFA;
    --premium-purple-dim: rgba(167,139,250,0.1);

    --text-primary: #FAFAFA;
    --text-secondary: #A1A1AA;
    --text-muted: #52525B;
    --text-dim: #71717A;

    --font: 'Orbitron', sans-serif;
    --mono: 'Share Tech Mono', monospace;

    --radius: 3px;
    --radius-sm: 4px;
    --radius-lg: 12px;

    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);

    --shadow-premium: 0 8px 32px -4px rgba(255, 77, 77, 0.15), 0 4px 16px -2px rgba(0, 0, 0, 0.3);
    --shadow-premium-lg: 0 20px 40px -8px rgba(255, 77, 77, 0.2), 0 8px 24px -4px rgba(0, 0, 0, 0.4);

    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-premium: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { 
    background:#0A0A0B; 
    color:var(--text-primary); 
    font-family:var(--font); 
    font-size:14px; 
    line-height:1.5; 
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    position:relative;
    overflow-x:hidden;
}
body::before {
    content:'';
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:repeating-linear-gradient(0deg,transparent,transparent 59px,#27272A1a 59px,#27272A1a 60px),repeating-linear-gradient(90deg,transparent,transparent 59px,#27272A1a 59px,#27272A1a 60px);
    z-index:-1;
    pointer-events:none;
}

.mono { font-family:var(--mono); font-size:12px; }

::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:var(--bg-secondary); }
::-webkit-scrollbar-thumb { background:var(--border-hover); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--border-light); }

.layout { display:flex; min-height:100vh; }

.sidebar {
    width:150px; 
    background:var(--bg-card); 
    border-right:1px solid var(--border);
    display:flex; 
    flex-direction:column; 
    position:fixed; 
    left:0; 
    top:0; 
    bottom:0; 
    z-index:100;
    transition:transform var(--transition-premium);
    box-shadow:var(--shadow-premium);
    backdrop-filter: blur(10px);
    background: linear-gradient(180deg, var(--bg-card) 0%, rgba(20, 20, 23, 0.95) 100%);
}
.sidebar.collapsed {
    width:80px;
}

@media (max-width: 768px) {
    .sidebar {
        width:100px;
    }
}
.sidebar-header {
    padding:24px 20px 20px;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    gap:12px;
}
.sidebar-logo {
    font-family:var(--mono); 
    font-size:20px; 
    font-weight:700;
    color:var(--accent);
    background:var(--accent-gradient);
    width:40px;
    height:40px;
    border-radius:var(--radius);
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,0,0,0.3);
    box-shadow: 0 0 20px rgba(255,0,0,0.3);
    position: relative;
    overflow: hidden;
}
.sidebar-logo::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: rotate(45deg);
    animation: shimmer-logo 3s infinite;
}
@keyframes shimmer-logo {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.sidebar-brand {
    display:flex;
    flex-direction:column;
    gap:1px;
    transition:opacity var(--transition-fast);
    display:flex;
}
.sidebar.collapsed .sidebar-brand {
    opacity:0;
    pointer-events:none;
}
.brand-text {
    font-size:16px;
    font-weight:700;
    color:var(--text-primary);
    letter-spacing:0.01em;
}
.brand-badge {
    font-size:12px;
    font-weight:600;
    color:var(--accent);
    background:var(--accent-dim);
    padding:2px 6px;
    border-radius:var(--radius-sm);
    font-family:var(--mono);
    border:1px solid rgba(255,0,0,0.2);
    align-self:flex-start;
}
.sidebar-nav { 
    display:flex; 
    flex-direction:column; 
    gap:8px; 
    flex:1;
    padding:20px 12px;
    overflow-y:auto;
}
.nav-section {
    margin-bottom:24px;
}
.nav-section:last-child {
    margin-bottom:0;
}
.nav-section::before {
    content:'';
    display:block;
    height:1px;
    background:var(--border);
    margin-bottom:16px;
    margin-left:8px;
    margin-right:8px;
}
.nav-section:first-child::before {
    display:none;
}
.nav-item {
    display:flex; 
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    padding:8px 12px;
    border-radius:var(--radius);
    cursor:pointer; 
    transition:var(--transition-premium);
    position:relative;
    overflow:hidden;
    border: 1px solid transparent;
}
.nav-item::before {
    content:'';
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    background:var(--accent-gradient);
    transform:translateX(-100%);
    transition:transform var(--transition-premium);
}
.nav-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,0,0,0.1), transparent);
    transition: left 0.5s;
}
.nav-item:hover { 
    background:var(--bg-secondary);
    transform:translateX(2px) scale(1.02);
    border-color: rgba(255,0,0,0.2);
    box-shadow: 0 4px 12px rgba(255,0,0,0.1);
}
.nav-item:hover::after {
    left: 100%;
}
.nav-item.active { 
    background:var(--accent-dim);
    color:var(--accent);
    border-color: rgba(255,0,0,0.3);
    box-shadow: inset 0 0 20px rgba(255,0,0,0.1);
}
.nav-item.active::before {
    transform:translateX(0);
    box-shadow: 0 0 10px rgba(255,0,0,0.5);
}
.nav-item:hover .nav-icon { stroke:var(--text-secondary); }
.nav-item.active .nav-icon { stroke:var(--accent); }
.nav-icon {
    width:20px; 
    height:20px; 
    fill:none; 
    stroke:var(--text-muted);
    stroke-width:2; 
    stroke-linecap:round; 
    stroke-linejoin:round;
    transition:var(--transition-fast);
    flex-shrink:0;
}
.nav-label {
    font-size:10px;
    font-weight:500;
    color:var(--text-secondary);
    transition:var(--transition-fast);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display:block;
}
.nav-item.active .nav-label {
    color:var(--text-primary);
}
.sidebar.collapsed .nav-label {
    opacity:0;
    pointer-events:none;
}
.sidebar-footer {
    padding:20px 12px;
    border-top:1px solid var(--border);
}
.logout-item {
    color:var(--danger) !important;
}
.logout-item:hover {
    background:var(--danger-dim) !important;
}
.logout-item .nav-icon {
    stroke:var(--danger) !important;
}
.logout-item .nav-label {
    color:var(--danger) !important;
}
.logout-item.active .nav-icon {
    stroke:var(--danger) !important;
}
.logout-item.active .nav-label {
    color:var(--text-primary) !important;
}

.main { 
    margin-left:150px; 
    flex:1; 
    min-width:0;
    display:flex;
    flex-direction:column;
    transition:margin-left var(--transition-fast);
}
.sidebar.collapsed + .main {
    margin-left:80px;
}

/* Modern Topbar */
.topbar {
    height:64px; 
    display:flex; 
    align-items:center;
    justify-content:space-between;
    padding:0 24px; 
    border-bottom:1px solid var(--border); 
    background:var(--bg-card);
    position:sticky; 
    top:0; 
    z-index:50;
    box-shadow:var(--shadow-premium);
    backdrop-filter: blur(10px);
    background: linear-gradient(90deg, var(--bg-card) 0%, rgba(20, 20, 23, 0.98) 100%);
    border-bottom: 1px solid rgba(255,0,0,0.1);
}
.topbar-left {
    display:flex;
    align-items:center;
    gap:16px;
}
.topbar-center {
    flex:1;
    display:flex;
    justify-content:center;
}
.topbar-right {
    display:flex;
    align-items:center;
    gap:16px;
    position:relative;
}
.hamburger { 
    display:none; 
    background:transparent;
    border:none;
    cursor:pointer; 
    color:var(--text-secondary);
    padding:8px;
    border-radius:var(--radius);
    transition:var(--transition-fast);
}
.hamburger:hover {
    background:var(--bg-secondary);
    color:var(--text-primary);
}
.hamburger-icon {
    width:20px;
    height:20px;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.breadcrumb {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color:var(--text-secondary);
}
.breadcrumb-item {
    color:var(--text-primary);
    font-weight:500;
}
.status-indicator {
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    background:linear-gradient(135deg, var(--success-dim) 0%, rgba(16,185,129,0.05) 100%);
    border:1px solid rgba(16,185,129,0.3);
    border-radius:5px;
    font-size:12px;
    font-weight:500;
    color:var(--success);
    position: relative;
    overflow: hidden;
    transition: var(--transition-premium);
}
.status-indicator::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(16,185,129,0.1), transparent);
    transition: left 0.8s;
}
.status-indicator:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(16,185,129,0.2);
}
.status-indicator:hover::before {
    left: 100%;
}
.status-dot {
    width:8px;
    height:8px;
    background:var(--success);
    border-radius:50%;
    position:relative;
    box-shadow: 0 0 8px rgba(16,185,129,0.5);
}
.status-dot::after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:var(--success);
    border-radius:50%;
    animation:pulse 2s infinite;
}
@keyframes pulse {
    0% { opacity:1; transform:scale(1); }
    50% { opacity:0.5; transform:scale(1.2); }
    100% { opacity:1; transform:scale(1); }
}
.status-text {
    font-size:12px;
    font-weight:500;
}
.topbar-actions {
    display:flex;
    align-items:center;
    gap:8px;
}
.action-btn {
    position:relative;
    background:transparent;
    border:none;
    padding:8px;
    border-radius:var(--radius);
    cursor:pointer;
    color:var(--text-secondary);
    transition:var(--transition-fast);
}
.action-btn:hover {
    background:var(--bg-secondary);
    color:var(--text-primary);
}
.action-icon {
    width:18px;
    height:18px;
    stroke:var(--accent);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    fill:none;
}
.notification-badge {
    position:absolute;
    top:4px;
    right:4px;
    background:var(--danger);
    color:white;
    font-size:10px;
    font-weight:600;
    padding:2px 4px;
    border-radius:10px;
    min-width:16px;
    text-align:center;
    font-family:var(--mono);
    display:none;
}

/* Notification Dropdown */
.notification-dropdown {
    position:absolute;
    top:100%;
    right:0;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    min-width:320px;
    max-width:400px;
    z-index:300;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:var(--transition-fast);
    margin-top:8px;
}
.notification-dropdown.show {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.notification-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px;
    border-bottom:1px solid var(--border);
}
.notification-header h4 {
    font-size:14px;
    font-weight:600;
    color:var(--text-primary);
    margin:0;
}
.mark-all-read {
    background:transparent;
    border:1px solid var(--border);
    color:var(--text-secondary);
    padding:4px 8px;
    border-radius:var(--radius-sm);
    font-size:11px;
    font-weight:500;
    cursor:pointer;
    transition:var(--transition-fast);
}
.mark-all-read:hover {
    background:var(--bg-secondary);
    color:var(--text-primary);
}
.notification-list {
    max-height:300px;
    overflow-y:auto;
}
.notification-item {
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:12px 16px;
    border-bottom:1px solid var(--border);
    transition:var(--transition-fast);
    cursor:pointer;
}
.notification-item:last-child {
    border-bottom:none;
}
.notification-item:hover {
    background:var(--bg-secondary);
}
.notification-item.unread {
    background:var(--accent-dim);
    border-left:3px solid var(--accent);
}
.notification-icon {
    font-size:16px;
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    fill:none;
    stroke:var(--accent);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.notification-content {
    flex:1;
    min-width:0;
}
.notification-title {
    font-size:13px;
    font-weight:500;
    color:var(--text-primary);
    margin-bottom:2px;
    line-height:1.3;
}
.notification-time {
    font-size:11px;
    color:var(--text-muted);
    font-family:var(--mono);
}
.notification-footer {
    padding:12px 16px;
    border-top:1px solid var(--border);
}
.view-all {
    width:100%;
    background:var(--accent);
    color:white;
    border:none;
    padding:8px;
    border-radius:var(--radius);
    font-size:12px;
    font-weight:500;
    cursor:pointer;
    transition:var(--transition-fast);
}
.view-all:hover {
    background:var(--accent-hover);
}
/* Modern User Dropdown */
.user-dropdown {
    display:flex; 
    align-items:center;
    gap:12px;
    cursor:pointer; 
    padding:8px 12px;
    border-radius:var(--radius);
    transition:var(--transition-fast);
    border:1px solid transparent;
}
.user-dropdown:hover { 
    background:var(--bg-secondary);
    border-color:var(--border-hover);
}
.user-avatar {
    width:36px;
    height:36px;
    background:var(--accent-dim);
    border-radius:var(--radius);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.avatar-icon {
    width:20px;
    height:20px;
    stroke:var(--accent);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    fill:none;
}
.user-info {
    display:flex;
    flex-direction:column;
    gap:2px;
}
.user-name {
    font-size:14px;
    font-weight:600;
    color:var(--text-primary);
    line-height:1.2;
}
.user-role {
    font-size:12px;
    color:var(--text-secondary);
    font-weight:500;
}
.dropdown-arrow {
    width:16px;
    height:16px;
    stroke:var(--text-muted);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform var(--transition-fast);
}
.user-dropdown.active .dropdown-arrow { 
    transform:rotate(180deg);
    color:var(--accent);
}
.user-dropdown-menu {
    position:absolute;
    top:100%;
    right:0;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    min-width:240px;
    z-index:2000;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:var(--transition-fast);
    margin-top:8px;
}
.user-dropdown.active .user-dropdown-menu,
.user-dropdown-menu.active {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.dropdown-header {
    padding:16px;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    gap:12px;
}
.header-avatar {
    width:40px;
    height:40px;
    background:var(--accent-dim);
    border:1px solid rgba(255,0,0,0.2);
    border-radius:var(--radius);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.header-avatar svg {
    width:24px;
    height:24px;
    stroke:var(--accent);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    fill:none;
}
.header-info {
    flex:1;
}
.header-name {
    font-size:14px;
    font-weight:600;
    color:var(--text-primary);
    margin-bottom:2px;
}
.header-role {
    font-size:12px;
    color:var(--text-secondary);
    font-weight:500;
}
.dropdown-divider {
    height:1px;
    background:var(--border);
    margin:8px 0;
}
.dropdown-item {
    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 16px;
    background:transparent;
    border:none;
    color:var(--text-secondary);
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    transition:var(--transition-fast);
    text-align:left;
}
.dropdown-item:hover {
    background:var(--bg-secondary);
    color:var(--text-primary);
}
.dropdown-item.logout {
    color:var(--danger);
}
.dropdown-item.logout:hover {
    background:var(--danger-dim);
    color:var(--danger);
}
.item-icon {
    width:18px;
    height:18px;
    stroke:var(--accent);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0;
    fill:none;
}


.content { 
    padding:20px; 
    animation:fadeIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    min-width:0;
    position: relative;
}
.content::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(255,0,0,0.03) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(139,92,246,0.02) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(255,215,0,0.01) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

.stats-grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:12px; margin-bottom:20px;
}
.stat-card {
    background:var(--bg-card); 
    border:1px solid var(--border);
    border-radius:var(--radius); 
    padding:20px; 
    transition:var(--transition-premium);
    box-shadow:var(--shadow);
    position: relative;
    overflow: hidden;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-gradient);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.stat-card:hover { 
    border-color:var(--accent);
    transform: translateY(-4px) scale(1.02);
    box-shadow:var(--shadow-premium);
}
.stat-card:hover::before {
    transform: scaleX(1);
}
.stat-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; font-weight:500; margin-bottom:6px; }
.stat-value { font-family:var(--mono); font-size:28px; font-weight:600; color:var(--accent); }
.stat-sub { font-size:11px; color:var(--text-muted); margin-top:4px; font-family:var(--mono); }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.grid-2 > .stat-card { min-height: 140px; }

.card { 
    background:var(--bg-card); 
    border:1px solid var(--border); 
    border-radius:var(--radius); 
    transition:var(--transition-premium); 
    margin-bottom:12px; 
    box-shadow:var(--shadow);
    position: relative;
    overflow: hidden;
}
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,0,0,0.03), transparent);
    transition: left 0.6s ease;
}
.card:hover { 
    border-color:var(--accent);
    transform: translateY(-2px);
    box-shadow:var(--shadow-premium);
}
.card:hover::before {
    left: 100%;
}
.card-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); }
.card-title { font-weight:600; font-size:13px; }
.card-body { padding:12px 16px; }

.toolbar { display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.search-input {
    background:var(--bg-card); 
    border:1px solid var(--border); 
    border-radius:var(--radius);
    padding:8px 14px; 
    color:var(--text-primary); 
    font-family:var(--mono); 
    font-size:12px;
    outline:none; 
    min-width:200px; 
    transition:var(--transition-premium);
    position: relative;
}
.search-input:focus { 
    border-color:var(--accent);
    box-shadow: 0 0 0 3px rgba(255,0,0,0.1), 0 4px 12px rgba(255,0,0,0.15);
    transform: translateY(-1px);
}
.search-input::placeholder {
    color: var(--text-muted);
    transition: color 0.2s;
}
.search-input:focus::placeholder {
    color: var(--text-dim);
}
select {
    background:var(--bg-card); 
    border:1px solid var(--border); 
    border-radius:var(--radius);
    padding:8px 12px; 
    color:var(--text-primary); 
    font-size:12px; 
    outline:none;
    font-family:var(--font); 
    cursor:pointer;
    transition:var(--transition-premium);
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 32px;
}
select:focus { 
    border-color:var(--accent);
    box-shadow: 0 0 0 3px rgba(255,0,0,0.1);
    transform: translateY(-1px);
}
select:hover {
    border-color: var(--border-hover);
}

.table-wrap { overflow-x:auto; max-width:100%; }
table { width:100%; border-collapse:collapse; }
th { padding:10px 12px; text-align:left; font-size:10px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; border-bottom:1px solid var(--border); white-space:nowrap; }
td { padding:10px 12px; font-size:12px; border-bottom:1px solid var(--border); white-space:nowrap; color:var(--text-secondary); }
tr:hover td { background:rgba(255,255,255,0.02); }
tr:last-child td { border-bottom:none; }

.badge {
    display:inline-flex; 
    align-items:center; 
    gap:5px;
    padding:3px 10px; 
    border-radius:5px; 
    font-size:10px; 
    font-weight:500;
    font-family:var(--mono); 
    letter-spacing:0.03em;
    position: relative;
    overflow: hidden;
    transition: var(--transition-premium);
}
.badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}
.badge:hover {
    transform: scale(1.05);
}
.badge:hover::before {
    left: 100%;
}
.dot { 
    width:5px; 
    height:5px; 
    border-radius:50%; 
    position: relative;
}
.dot::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.3;
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.5); opacity: 0.1; }
}
.badge-active,.badge-paid { 
    background:var(--success-gradient); 
    color:#000; 
    border: 1px solid rgba(16,185,129,0.3);
    box-shadow: 0 2px 8px rgba(16,185,129,0.2);
}
.dot-active,.dot-paid { 
    background:var(--success); 
    box-shadow: 0 0 6px rgba(16,185,129,0.5);
}
.badge-unused { 
    background:linear-gradient(135deg, rgba(96,165,250,0.2) 0%, rgba(96,165,250,0.1) 100%); 
    color:#60A5FA; 
    border: 1px solid rgba(96,165,250,0.3);
}
.dot-unused { 
    background:#60A5FA;
    box-shadow: 0 0 6px rgba(96,165,250,0.5);
}
.badge-expired { 
    background:linear-gradient(135deg, rgba(251,191,36,0.2) 0%, rgba(251,191,36,0.1) 100%); 
    color:#FBBF24;
    border: 1px solid rgba(251,191,36,0.3);
}
.dot-expired { 
    background:#FBBF24;
    box-shadow: 0 0 6px rgba(251,191,36,0.5);
}
.badge-banned { 
    background:var(--danger-gradient); 
    color:white;
    border: 1px solid rgba(239,68,68,0.3);
    box-shadow: 0 2px 8px rgba(239,68,68,0.2);
}
.dot-banned { 
    background:var(--danger);
    box-shadow: 0 0 6px rgba(239,68,68,0.5);
}
.badge-due { 
    background:linear-gradient(135deg, rgba(251,191,36,0.2) 0%, rgba(251,191,36,0.1) 100%); 
    color:#FBBF24;
    border: 1px solid rgba(251,191,36,0.3);
}
.dot-due { 
    background:#FBBF24;
    box-shadow: 0 0 6px rgba(251,191,36,0.5);
}
.badge-partial { 
    background:linear-gradient(135deg, rgba(168,85,247,0.2) 0%, rgba(168,85,247,0.1) 100%); 
    color:#A855F7;
    border: 1px solid rgba(168,85,247,0.3);
}
.dot-partial { 
    background:#A855F7;
    box-shadow: 0 0 6px rgba(168,85,247,0.5);
}

.actions { display:flex; gap:4px; }
.btn-icon {
    width:28px; height:28px; border:1px solid var(--border); border-radius:var(--radius);
    background:transparent; color:var(--text-secondary); font-size:12px;
    cursor:pointer; display:flex; align-items:center; justify-content:center; 
    transition:var(--transition-premium);
    position: relative;
    overflow: hidden;
}
.btn-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,0,0,0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}
.btn-icon:hover { 
    background:var(--bg-secondary); 
    color:var(--text-primary);
    transform: scale(1.1) rotate(5deg);
    border-color: var(--accent);
    box-shadow: 0 0 15px rgba(255,0,0,0.2);
}
.btn-icon:hover::before {
    width: 100%;
    height: 100%;
}
.btn-icon svg { 
    width:14px; 
    height:14px; 
    fill:none; 
    stroke:var(--text-secondary); 
    stroke-width:2; 
    stroke-linecap:round; 
    stroke-linejoin:round;
    transition:var(--transition-premium);
    z-index: 1;
    position: relative;
}
.btn-icon:hover svg { 
    stroke:var(--accent);
    transform: scale(1.1);
}
.btn-icon.danger:hover { 
    background:var(--danger-dim); 
    color:var(--danger); 
    border-color:rgba(239,68,68,0.3);
    box-shadow: 0 0 15px rgba(239,68,68,0.2);
}
.btn-icon.danger:hover svg { 
    stroke:var(--danger);
}

.btn {
    border:none; 
    border-radius:var(--radius); 
    padding:8px 16px; 
    font-family:var(--font);
    font-size:12px; 
    font-weight:600; 
    cursor:pointer; 
    letter-spacing:0.03em;
    transition:var(--transition-premium); 
    white-space:nowrap;
    position: relative;
    overflow: hidden;
}
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}
.btn:hover { 
    opacity:0.9; 
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255,0,0,0.3);
}
.btn:hover::before {
    left: 100%;
}
.btn:active { 
    transform:scale(0.97) translateY(0); 
}
.btn-primary { 
    background:var(--accent-gradient);
    color:#000;
    box-shadow: 0 4px 15px rgba(255,0,0,0.3);
    border: 1px solid rgba(255,0,0,0.3);
}
.btn-secondary { 
    background:transparent; 
    border:1px solid var(--border); 
    color:var(--text-secondary);
    backdrop-filter: blur(10px);
}
.btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(255,0,0,0.05);
}
.btn-danger { 
    background:var(--danger-gradient);
    border:1px solid rgba(239,68,68,0.3); 
    color: white;
    box-shadow: 0 4px 15px rgba(239,68,68,0.3);
}
.btn-sm { padding:6px 12px; font-size:11px; }

.pagination { display:flex; gap:4px; padding:12px 16px; justify-content:center; }
.page-btn {
    width:32px; height:32px; border:1px solid var(--border); border-radius:var(--radius);
    background:transparent; color:var(--text-secondary); font-size:12px;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition: var(--transition-premium);
    position: relative;
    overflow: hidden;
}
.page-btn::before {
    content: '';
}

/* Login Page Styles */
body.login-page {
    background: #0A0A0B;
    color: var(--text-primary);
    font-family: var(--font);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

body.login-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
    repeating-linear-gradient(0deg,transparent,transparent 59px,#27272A1a 59px,#27272A1a 60px),
    repeating-linear-gradient(90deg,transparent,transparent 59px,#27272A1a 59px,#27272A1a 60px);
    z-index: 0;
}

.login-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    width: 380px;
    max-width: 90vw;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.cyber-corner {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid var(--accent);
    opacity: 0.9;
}

.top-left {
    top: 10px;
    left: 10px;
    border-right: none;
    border-bottom: none;
}

.top-right {
    top: 10px;
    right: 10px;
    border-left: none;
    border-bottom: none;
}

.bottom-left {
    bottom: 10px;
    left: 10px;
    border-right: none;
    border-top: none;
}

.bottom-right {
    bottom: 10px;
    right: 10px;
    border-left: none;
    border-top: none;
}

.logo {
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-align: center;
    margin-bottom: 8px;
}

.logo span {
    color: var(--accent);
}

.sub {
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    margin-bottom: 28px;
    font-family: var(--mono);
}

.login-form label {
    display: block;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.login-form input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
    color: var(--text-primary);
    font-family: var(--mono);
    font-size: 13px;
    outline: none;
    margin-bottom: 16px;
    transition: border-color 0.2s;
}

.login-form input:focus {
    border-color: var(--accent);
}

.login-form button {
    width: 100%;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 6px;
    padding: 12px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: opacity 0.2s;
}

.login-form button:hover {
    opacity: 0.9;
}

.login-form button:active {
    transform: scale(0.98);
}

.error {
    background: var(--danger-dim);
    border: 1px solid rgba(239,68,68,0.2);
    color: var(--danger);
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 16px;
    display: none;
    font-family: var(--mono);
}

.ver {
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
    margin-top: 20px;
    font-family: var(--mono);
}

/* Login Page Inline Styles */
body.login-page {
    background: #0A0A0B;
    color: var(--text-primary);
    font-family: var(--font);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

body.login-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,transparent,transparent 59px,#27272A1a 59px,#27272A1a 60px),repeating-linear-gradient(90deg,transparent,transparent 59px,#27272A1a 59px,#27272A1a 60px);
    z-index: 0;
}

.login-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    width: 380px;
    max-width: 90vw;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.cyber-corner {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid var(--accent);
    opacity: 0.9;
}

.top-left {
    top: 10px;
    left: 10px;
    border-right: none;
    border-bottom: none;
}

.top-right {
    top: 10px;
    right: 10px;
    border-left: none;
    border-bottom: none;
}

.bottom-left {
    bottom: 10px;
    left: 10px;
    border-right: none;
    border-top: none;
}

.bottom-right {
    bottom: 10px;
    right: 10px;
    border-left: none;
    border-top: none;
}

.logo {
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-align: center;
    margin-bottom: 8px;
}

.logo span {
    color: var(--accent);
}

.sub {
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    margin-bottom: 28px;
    font-family: var(--mono);
}

.login-form label {
    display: block;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.login-form input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
    color: var(--text-primary);
    font-family: var(--mono);
    font-size: 13px;
    outline: none;
    margin-bottom: 16px;
    transition: border-color 0.2s;
}

.login-form input:focus {
    border-color: var(--accent);
}

.login-form button {
    width: 100%;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 6px;
    padding: 12px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: opacity 0.2s;
}

.login-form button:hover {
    opacity: 0.9;
}

.login-form button:active {
    transform: scale(0.98);
}

.login-error {
    background: var(--danger-dim);
    border: 1px solid rgba(239,68,68,0.2);
    color: var(--danger);
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 16px;
    display: none;
    font-family: var(--mono);
}
.page-btn.active { 
    background:var(--accent-gradient); 
    color:#000;
    border-color:rgba(255,0,0,0.3);
    box-shadow: 0 2px 8px rgba(255,0,0,0.3);
    font-weight: 600;
}
.page-btn:hover { 
    background:var(--bg-secondary);
    border-color: var(--accent);
    color: var(--accent);
    transform: scale(1.1);
}
.page-btn:hover::before {
    width: 100%;
    height: 100%;
}

.log-item {
    display:flex; align-items:center; gap:10px; padding:8px 0;
    font-size:12px; border-bottom:1px solid var(--border);
}
.log-item:last-child { border-bottom:none; }
.log-action { color:var(--text-secondary); }
.log-time { color:var(--text-muted); font-family:var(--mono); font-size:10px; margin-left:auto; }

.empty-state { text-align:center; padding:32px; color:var(--text-muted); font-size:13px; }

.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:200; display:none; align-items:center; justify-content:center; }
.modal-overlay.show { display:flex; }
.modal {
    background:var(--bg-card); 
    border:1px solid var(--border); 
    border-radius:12px;
    padding:24px; 
    width:440px; 
    max-width:92vw; 
    max-height:85vh; 
    overflow-y:auto;
    box-shadow: var(--shadow-premium-lg);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,0,0,0.1);
    animation: scaleIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-gradient);
    border-radius: 12px 12px 0 0;
}
.modal-danger { 
    border-color:rgba(239,68,68,0.3);
    box-shadow: 0 20px 40px -8px rgba(239,68,68,0.2), 0 8px 24px -4px rgba(0, 0, 0, 0.4);
}
.modal-danger::before {
    background: var(--danger-gradient);
}
.modal-title { font-size:15px; font-weight:600; margin-bottom:16px; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:20px; }


.mini-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px !important;
}

.mini-buttons {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.mini-buttons .btn {
    border-radius: 3px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group { margin-bottom:14px; }
.form-label { display:block; font-size:11px; font-weight:500; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; }
.form-input {
    width:100%; 
    background:var(--bg-input); 
    border:1px solid var(--border); 
    border-radius:var(--radius);
    padding:8px 12px; 
    color:var(--text-primary); 
    font-family:var(--mono); 
    font-size:12px;
    outline:none; 
    transition:var(--transition-premium);
    position: relative;
}
.form-input:focus { 
    border-color:var(--accent);
    box-shadow: 0 0 0 3px rgba(255,0,0,0.1), 0 4px 12px rgba(255,0,0,0.15);
    transform: translateY(-1px);
}
.form-input::placeholder {
    color: var(--text-muted);
    transition: color 0.2s;
}
.form-input:focus::placeholder {
    color: var(--text-dim);
}
.form-row { display:flex; gap:12px; }
.form-row .form-group { flex:1; }

.radio-group { display:flex; gap:4px; }
.radio-option {
    padding:6px 14px; border:1px solid var(--border); border-radius:var(--radius);
    font-size:11px; cursor:pointer; color:var(--text-muted); transition:all 0.15s;
}
.radio-option:hover { border-color:var(--border-hover); }
.radio-option.selected { background:var(--accent-dim); border-color:rgba(255,0,0,0.3); color:var(--accent); }

.toggle {
    width:40px; height:22px; border-radius:11px; background:var(--border);
    cursor:pointer; position:relative; transition:background 0.2s;
}
.toggle::after {
    content:''; position:absolute; top:3px; left:3px;
    width:16px; height:16px; border-radius:50%; background:var(--text-muted);
    transition:all 0.2s;
}
.toggle.on { background:var(--accent-dim); }
.toggle.on::after { left:21px; background:var(--accent); }

.setting-row {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:12px 0; border-bottom:1px solid var(--border);
}
.setting-row:last-child { border-bottom:none; }
.setting-label { font-size:13px; font-weight:500; }
.setting-desc { font-size:11px; color:var(--text-muted); margin-top:2px; }

.duration-tag {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 12px; border:1px solid var(--border); border-radius:var(--radius);
    font-size:12px; margin:0 6px 6px 0;
}
.duration-tag .cost { color:var(--accent); font-family:var(--mono); font-size:10px; }
.duration-tag .remove {
    cursor:pointer; color:var(--text-muted); font-size:10px;
    transition:color 0.15s;
}
.duration-tag .remove:hover { color:var(--danger); }

.danger-zone {
    border:1px solid rgba(239,68,68,0.2); border-radius:var(--radius);
    padding:16px; background:var(--danger-dim);
}
.danger-zone h3 { font-size:13px; color:var(--danger); margin-bottom:12px; }

.file-card {
    background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
    padding:16px; margin-bottom:12px;
}
.file-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.file-arch { font-family:var(--mono); font-size:14px; font-weight:600; }
.file-meta { display:flex; gap:16px; font-family:var(--mono); font-size:11px; color:var(--text-muted); }

.upload-zone {
    border:2px dashed var(--border); border-radius:var(--radius);
    padding:24px; text-align:center; color:var(--text-muted); font-size:12px;
    cursor:pointer; transition:border-color 0.15s;
}
.upload-zone:hover,.upload-zone.dragover { border-color:var(--accent); color:var(--accent); }

.toast-container { position:fixed; top:80px; right:16px; z-index:150; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { pointer-events:auto; }
.toast {
    padding:8px 12px; 
    border-radius:6px; 
    font-size:11px; 
    font-weight:500;
    animation:slideInRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 200px;
    max-width: 300px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}
.toast::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.6s;
}
.toast:hover::before {
    left: 100%;
}
.toast:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.toast-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.toast-title {
    font-weight: 600;
    font-size: 11px;
    line-height: 1.2;
}
.toast-message {
    font-size: 10px;
    opacity: 0.85;
    line-height: 1.3;
}
.toast-success { 
    background:rgba(16,185,129,0.12); 
    border:1px solid rgba(16,185,129,0.3); 
    color:var(--success);
    box-shadow: 0 2px 8px rgba(16,185,129,0.15);
}
.toast-error { 
    background:rgba(239,68,68,0.12); 
    border:1px solid rgba(239,68,68,0.3); 
    color:var(--danger);
    box-shadow: 0 2px 8px rgba(239,68,68,0.15);
}
.toast-warning { 
    background:rgba(251,191,36,0.12); 
    border:1px solid rgba(251,191,36,0.3); 
    color:var(--warning);
    box-shadow: 0 2px 8px rgba(251,191,36,0.15);
}
.toast-info { 
    background:rgba(96,165,250,0.12); 
    border:1px solid rgba(96,165,250,0.3); 
    color:var(--info);
    box-shadow: 0 2px 8px rgba(96,165,250,0.15);
}
@keyframes slideInRight { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes slideOutRight { from { transform:translateX(0); opacity:1; } to { transform:translateX(100%); opacity:0; } }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes shimmer { 0% { background-position:-400px 0; } 100% { background-position:400px 0; } }

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--border-hover); }
* { scrollbar-width:thin; scrollbar-color:var(--border) var(--bg); }

.status-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block; margin-right:4px; }
.status-dot.offline { background:var(--danger); animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

.empty-art { width:48px; height:48px; margin:0 auto 12px; border:2px solid var(--border); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-family:var(--mono); font-size:18px; }

.skeleton { background:linear-gradient(90deg, var(--bg-card) 25%, var(--border) 50%, var(--bg-card) 75%); background-size:800px 100%; animation:shimmer 1.5s infinite; border-radius:var(--radius); }
.skel-row { display:flex; gap:12px; margin-bottom:12px; }
.skel-card { height:80px; flex:1; border-radius:var(--radius); }
.skel-bar { height:14px; border-radius:4px; margin-bottom:10px; }
.skel-bar.w75 { width:75%; }
.skel-bar.w50 { width:50%; }
.skel-bar.w30 { width:30%; }
.skel-block { height:160px; border-radius:var(--radius); margin-bottom:12px; }

.mobile-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:99; opacity:0; visibility:hidden; transition:var(--transition-fast); }
.mobile-overlay.show { opacity:1; visibility:visible; }

.light-theme {
    --bg: #ffffff;
    --bg-card: #f8fafc;
    --bg-input: #ffffff;
    --bg-secondary: #f1f5f9;
    --bg-tertiary: #e2e8f0;
    --border: #e2e8f0;
    --border-hover: #cbd5e1;
    --border-light: #94a3b8;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-dim: #cbd5e1;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.skeleton {
    background:linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
    background-size:200% 100%;
    animation:loading 1.5s infinite;
}
@keyframes loading {
    0% { background-position:200% 0; }
    100% { background-position:-200% 0; }
}
.skel-row {
    display:flex;
    gap:12px;
    margin-bottom:12px;
}
.skel-card {
    height:120px;
    flex:1;
    border-radius:var(--radius);
}
.skel-block {
    height:40px;
    border-radius:var(--radius);
}
.skel-bar {
    height:12px;
    border-radius:6px;
    margin-bottom:8px;
}
.skel-bar.w75 { width:75%; }
.skel-bar.w50 { width:50%; }
.skel-bar.w30 { width:30%; }

@keyframes fadeIn {
    from { opacity:0; transform:translateY(10px); }
    to { opacity:1; transform:translateY(0); }
}

@keyframes slideIn {
    from { opacity:0; transform:translateX(-20px); }
    to { opacity:1; transform:translateX(0); }
}

@keyframes scaleIn {
    from { opacity:0; transform:scale(0.9); }
    to { opacity:1; transform:scale(1); }
}

@keyframes shimmer-premium {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 5px rgba(255,0,0,0.3); }
    50% { box-shadow: 0 0 20px rgba(255,0,0,0.6); }
}

@keyframes rotate-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.fadeIn { animation:fadeIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.slideIn { animation:slideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.scaleIn { animation:scaleIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.shimmer-premium {
    background: linear-gradient(90deg, transparent, rgba(255,0,0,0.1), transparent);
    background-size: 1000px 100%;
    animation: shimmer-premium 3s infinite;
}
.float { animation: float 3s ease-in-out infinite; }
.glow-pulse { animation: glow-pulse 2s ease-in-out infinite; }
.rotate-gradient {
    background: var(--accent-gradient);
    background-size: 200% 200%;
    animation: rotate-gradient 3s ease infinite;
}

.stats-grid-5 { grid-template-columns:repeat(5, 1fr); }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:12px; }

.stat-green { color:var(--accent) !important; }
.stat-blue { color:#60A5FA !important; }
.stat-yellow { color:#FBBF24 !important; }
.stat-red { color:var(--danger) !important; }

.stat-bar { height:3px; background:var(--border); border-radius:2px; margin-top:10px; overflow:hidden; }
.stat-bar-fill { height:100%; background:var(--accent); border-radius:2px; transition:width 0.6s ease; }
.stat-bar-blue { background:#60A5FA; }
.stat-bar-yellow { background:#FBBF24; }

.stat-card-highlight { border-color:rgba(255,0,0,0.2); background:linear-gradient(135deg, var(--bg-card) 0%, rgba(255,0,0,0.03) 100%); }

.scroll-list { max-height:260px; overflow-y:auto; }

.chart { display:flex; align-items:flex-end; gap:8px; height:140px; padding:8px 0; position:relative; }
.chart-grid { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; padding:8px 0; }
.chart-grid > div { border-bottom:1px solid var(--border); opacity:0.4; }
.chart-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; justify-content:flex-end; position:relative; z-index:1; cursor:default; }
.chart-bar { width:100%; background:linear-gradient(180deg, rgba(255,0,0,0.25) 0%, rgba(255,0,0,0.06) 100%); border-radius:4px 4px 0 0; min-height:4px; position:relative; transition:height 0.4s ease, background 0.2s; }
.chart-bar:hover { background:linear-gradient(180deg, rgba(255,0,0,0.45) 0%, rgba(255,0,0,0.12) 100%); box-shadow:0 0 12px rgba(255,0,0,0.15); }
.chart-bar-empty { background:var(--border); opacity:0.3; }
.chart-bar-empty:hover { background:var(--border); box-shadow:none; opacity:0.5; }
.chart-val { position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:10px; color:var(--accent); font-weight:600; }
.chart-label { font-size:10px; color:var(--text-muted); font-family:var(--mono); font-weight:500; }
.chart-date { font-size:8px; color:var(--text-muted); font-family:var(--mono); opacity:0.6; }
.chart-total { font-family:var(--mono); font-size:11px; color:var(--accent); font-weight:600; background:var(--accent-dim); padding:3px 10px; border-radius:10px; }

.dist-grid { display:flex; flex-direction:column; gap:10px; }
.dist-item { display:flex; align-items:center; gap:10px; }
.dist-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dist-info { flex:1; display:flex; justify-content:space-between; font-size:12px; }
.dist-bar { flex:2; height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.dist-bar > div { height:100%; border-radius:3px; transition:width 0.5s ease; }

.rank { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; font-family:var(--mono); background:var(--border); color:var(--text-muted); }
.rank-1 { background:var(--accent-dim); color:var(--accent); }
.rank-2 { background:rgba(96,165,250,0.1); color:#60A5FA; }
.rank-3 { background:rgba(251,191,36,0.1); color:#FBBF24; }

.log-icon { 
    width:20px; 
    height:20px; 
    fill:none; 
    stroke:var(--accent); 
    stroke-width:2; 
    stroke-linecap:round; 
    stroke-linejoin:round;
    flex-shrink: 0;
}

.quick-actions { display:flex; gap:8px; flex-wrap:wrap; }
.quick-btn {
    display:flex; align-items:center; gap:8px; padding:10px 16px;
    background:transparent; border:1px solid var(--border); border-radius:var(--radius);
    color:var(--text-secondary); font-size:12px; font-family:var(--font);
    cursor:pointer; transition:var(--transition-premium);
    position: relative;
    overflow: hidden;
}
.quick-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,0,0,0.1), transparent);
    transition: left 0.5s;
}
.quick-btn:hover { 
    border-color:var(--accent); 
    color:var(--accent); 
    background:var(--accent-dim);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(255,0,0,0.15);
}
.quick-btn:hover::before {
    left: 100%;
}
.quick-icon { 
    width:16px; 
    height:16px; 
    fill:none; 
    stroke:var(--accent); 
    stroke-width:2; 
    stroke-linecap:round; 
    stroke-linejoin:round;
    transition:var(--transition-premium);
    flex-shrink: 0;
}
.quick-btn:hover .quick-icon {
    stroke:var(--accent);
    transform: scale(1.1);
}

.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:8px; }
.pricing-item {
    border:1px solid var(--border); border-radius:var(--radius); padding:12px;
    text-align:center;
}
.pricing-days { font-size:12px; color:var(--text-secondary); margin-bottom:4px; }
.pricing-cost { font-family:var(--mono); font-size:16px; font-weight:600; color:var(--accent); }
.pricing-cost span { font-size:10px; color:var(--text-muted); font-weight:400; }

.token-meter { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:12px; margin-bottom:16px; }
.token-meter-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; font-size:12px; color:var(--text-secondary); }
.token-meter-bar { height:4px; background:var(--border); border-radius:2px; margin:8px 0; overflow:hidden; }
.token-meter-fill { height:100%; background:var(--accent); border-radius:2px; transition:all 0.3s ease; width:100%; }

@media (max-width:1024px) {
    .stats-grid-5 { grid-template-columns:repeat(3, 1fr); }
    .grid-3 { grid-template-columns:1fr 1fr; }
}

/* Enhanced Responsive Design */
@media (max-width: 1024px) {
    .sidebar {
        width:150px;
        transform:translateX(-100%);
        transition:transform var(--transition-fast);
    }
    .sidebar.open {
        transform:translateX(0);
    }
    .sidebar.collapsed {
        width:80px;
    }
    .main {
        margin-left:0;
    }
    .sidebar.collapsed + .main {
        margin-left:0;
    }
    .sidebar-brand {
        opacity:1;
    }
    .nav-label {
        opacity:1;
    }
}

@media (max-width:768px) {
    .sidebar { 
        width:150px;
        left:-150px; 
        transition:left 0.2s; 
        box-shadow:var(--shadow-lg);
    }
    .sidebar.open { 
        left:0; 
    }
    .main { 
        margin-left:0; 
    }
    .hamburger { 
        display:flex;
        align-items:center;
        justify-content:center;
        background:transparent;
        border:none;
        cursor:pointer; 
        color:var(--text-secondary);
        padding:8px;
        border-radius:var(--radius);
        transition:var(--transition-fast);
    }
    .hamburger:hover {
        background:var(--bg-secondary);
        color:var(--text-primary);
    }
    
    /* Mobile sidebar brand adjustments */
    .sidebar-header {
        padding: 16px 12px;
    }
    .brand-text {
        font-size:14px;
    }
    .brand-badge {
        font-size:10px;
        padding:1px 4px;
    }

    .topbar { height:auto; min-height:44px; flex-wrap:nowrap; padding:8px 12px; gap:6px; }
    .topbar-title { font-size:13px; flex:1; }
    .topbar-user { gap:6px; font-size:11px; }
    .btn-logout { padding:3px 8px; font-size:10px; }

    .content { padding:12px; }

    .grid-2,.grid-3 { grid-template-columns:1fr; gap:10px; }
    .stats-grid,.stats-grid-5 { grid-template-columns:1fr 1fr; gap:8px; }
    .stat-value { font-size:22px; }
    .stat-card { padding:12px; }

    .card-header { padding:10px 12px; }
    .card-body { padding:10px 12px; }

    table { font-size:11px; }
    td,th { padding:8px 6px; }
    .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

    .toolbar { flex-direction:column; align-items:stretch; gap:6px; }
    .toolbar .btn { font-size:12px; padding:8px 12px; }
    .search-input { min-width:auto; width:100%; }
    select { width:100%; }
    .form-row { flex-direction:column; gap:8px; }

    .quick-actions { flex-direction:column; }
    .quick-btn { justify-content:center; }

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

    .modal { padding:16px; width:96vw; max-height:90vh; overflow-y:auto; }
    .modal-title { font-size:14px; }

    .chart { height:110px; gap:4px; }
    .chart-date { display:none; }
    .chart-total { font-size:10px; padding:2px 8px; }

    .pagination { padding:10px; }
    .page-btn { width:28px; height:28px; font-size:11px; }

    .setting-row { flex-direction:column; align-items:flex-start; gap:8px; padding:12px 0; }
    .setting-row .form-input { max-width:100% !important; width:100% !important; }

    .duration-tag { padding:4px 8px; font-size:10px; }
    .danger-zone { padding:12px; }
    .danger-zone .btn { font-size:11px; padding:8px 12px; }

    .file-card { padding:12px; }
    .file-meta { flex-wrap:wrap; gap:8px; }

    .dist-item { flex-wrap:wrap; }

    .actions { gap:2px; }
    .btn-icon { width:28px; height:28px; font-size:12px; }
}

@media (max-width:480px) {
    /* Topbar mobile styles */
    .topbar { 
        padding:8px 12px; 
        gap:8px; 
        height:56px;
        flex-wrap: nowrap;
        position: sticky;
        top: 0;
        background: var(--bg-card);
        border-bottom: 1px solid var(--border);
    }
    .topbar-left {
        gap:8px;
        flex-shrink: 0;
    }
    .topbar-center {
        display: none; /* Hide center section on mobile */
    }
    .topbar-right {
        gap:6px;
        flex-shrink: 0;
    }
    
    /* Hamburger menu button */
    .hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        width: 40px;
        height: 40px;
        cursor: pointer;
        transition: var(--transition);
    }
    .hamburger:hover {
        background: var(--bg-tertiary);
        border-color: var(--accent);
    }
    .hamburger-icon {
        width: 20px;
        height: 20px;
        stroke: var(--text-primary);
        stroke-width: 2;
    }
    
    /* Breadcrumb mobile */
    .breadcrumb {
        display: none; /* Hide breadcrumb on mobile */
    }
    
    /* User dropdown mobile */
    .user-dropdown {
        min-width: auto;
        padding: 4px;
    }
    .user-avatar {
        width: 32px;
        height: 32px;
        background: var(--accent);
        border-radius:var(--radius);
        align-items: center;
        justify-content: center;
    }
    .avatar-icon {
        width: 16px;
        height: 16px;
        fill: white;
    }
    .user-info {
        display: none; /* Hide user info text on mobile */
    }
    .dropdown-arrow {
        display: none; /* Hide dropdown arrow on mobile */
    }
    
    /* Topbar actions mobile */
    .topbar-actions {
        gap:4px;
    }
    .action-btn {
        width: 36px;
        height: 36px;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: var(--transition);
    }
    .action-btn:hover {
        background: var(--bg-tertiary);
        border-color: var(--accent);
    }
    .action-icon {
        width: 16px;
        height: 16px;
        stroke: var(--text-primary);
        stroke-width: 2;
    }
    .notification-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        background: var(--danger);
        color: white;
        font-size: 10px;
        font-weight: 600;
        padding: 2px 4px;
        border-radius: 10px;
        min-width: 16px;
        text-align: center;
    }
    
    /* Sidebar mobile styles */
    .sidebar { 
        width:280px; 
        left:-280px; 
        z-index:1000;
        transition: left 0.3s ease;
    }
    .sidebar.open { left:0; }
    .sidebar-toggle {
        display: flex;
        position: fixed;
        top: 60px;
        left: 10px;
        z-index: 1001;
        background: var(--accent);
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: var(--shadow);
    }
    .sidebar-toggle svg {
        width: 20px;
        height: 20px;
        fill: white;
    }
    
    /* Sidebar overlay for mobile */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }
    
    /* Content mobile styles */
    .content { 
        margin-left:0; 
        padding:8px; 
        padding-top: 60px;
        min-height: 100vh;
    }
    
    /* Card mobile styles */
    .card { 
        padding:12px; 
        margin-bottom:8px; 
        border-radius: var(--radius-sm);
    }
    .card-header { 
        padding:8px 12px; 
        margin-bottom:8px; 
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .card-title { 
        font-size:12px; 
        line-height: 1.3;
    }
    .card-actions {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }
    .card-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Button mobile styles */
    .btn { 
        padding:8px 12px; 
        font-size:12px; 
        min-height: 40px;
        border-radius: var(--radius-sm);
    }
    .btn-sm {
        padding:6px 10px; 
        font-size:11px; 
        min-height: 32px;
    }
    .btn-icon { 
        width:36px; 
        height:36px; 
        font-size:14px; 
        border-radius: 50%;
    }
    
    /* Table mobile styles */
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table {
        min-width: 600px;
        font-size: 11px;
    }
    th, td {
        padding: 6px 8px;
        white-space: nowrap;
    }
    
    /* Form mobile styles */
    .form-group {
        margin-bottom: 12px;
    }
    .form-input {
        padding: 10px 12px;
        font-size: 14px;
        min-height: 44px; /* Touch-friendly */
    }
    .form-row {
        flex-direction: column;
        gap: 8px;
    }
    
    /* Modal mobile styles */
    .modal {
        width: 95vw;
        max-height: 90vh;
        margin: 20px auto;
        border-radius: var(--radius);
    }
    .modal-overlay {
        padding: 10px;
    }
    
        
    /* Stats grid mobile styles */
    .stats-grid-5 { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 8px;
    }
    .grid-3 { 
        grid-template-columns: 1fr; 
    }
    
    /* Navigation mobile styles */
    .nav-item {
        padding: 12px 16px;
        min-height: 48px; /* Touch-friendly */
    }
    .nav-label {
        font-size: 13px;
    }
    .nav-icon {
        width: 20px;
        height: 20px;
    }
    
    /* Action buttons mobile styles */
    .actions {
        flex-direction: column;
        gap: 4px;
    }
    .actions .btn-icon {
        width: 32px;
        height: 32px;
    }
    
    /* Toast mobile styles */
    #toasts {
        bottom: 20px;
        left: 10px;
        right: 10px;
    }
    .toast {
        margin-bottom: 8px;
        font-size: 12px;
        padding: 8px 12px;
    }
    
    /* Badge mobile styles */
    .badge {
        font-size: 9px;
        padding: 2px 6px;
    }
    
    /* Status indicators mobile styles */
    .status-dot {
        width: 8px;
        height: 8px;
    }
}

/* Additional mobile styles */
@media (max-width:480px) {
    .card { border-radius:4px; }
    .card-header { padding:8px 10px; }
    .card-body { padding:8px 10px; }
    .card-title { font-size:12px; }

    .revenue-pills { display:flex; gap:4px; align-items:center; }
    .rev-pill { font-size:10px; padding:4px 10px; border-radius:20px; cursor:pointer; color:var(--text-muted); background:var(--bg-card); border:1px solid var(--border); transition:all 0.2s; letter-spacing:0.02em; white-space:nowrap; }
    .rev-pill:hover { color:var(--text-secondary); }
    .rev-pill.active { color:var(--accent); background:rgba(255,0,0,0.1); border-color:rgba(255,0,0,0.25); font-weight:600; }
    .badge-refill { background:rgba(255,0,0,0.12); color:var(--accent); }
    .badge-spend { background:rgba(255,75,110,0.12); color:var(--danger); }
    .badge-deduct { background:rgba(251,191,36,0.12); color:#FBBF24; }
    .badge-payment { background:rgba(96,165,250,0.12); color:#60A5FA; }
    #userName { font-size:10px; }
    .btn-logout { padding:2px 6px; font-size:9px; }

    .chart { height:90px; }
    .chart-label { font-size:8px; }
    .chart-val { font-size:8px; }
    .chart-total { font-size:9px; }

    .log-item { font-size:11px; gap:4px; padding:5px 0; }
    .log-icon { font-size:10px; width:14px; }
}

/* Additional responsive styles */
@media (max-width:768px) {
    .pricing-grid { grid-template-columns:1fr 1fr; }
    .btn { padding:8px 12px; font-size:12px; }

    .scroll-list { max-height:180px; }
    #userName { max-width:60px; }

    .toolbar .btn { padding:8px; font-size:11px; }
    .search-input { font-size:12px; padding:8px 10px; }
}

/* Empty state styles */
.empty-state { padding:20px; font-size:12px; }
.empty-art { width:36px; height:36px; font-size:14px; }

/* Revenue pills styles */
.revenue-pills { display:flex; gap:4px; align-items:center; }
.rev-pill { 
    font-size:10px; 
    padding:4px 10px; 
    border-radius:20px; 
    cursor:pointer; 
    color:var(--text-muted); 
    background:var(--bg-card); 
    border:1px solid var(--border); 
    transition:var(--transition-premium); 
    letter-spacing:0.02em; 
    white-space:nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}
.rev-pill:hover { 
    color:var(--text-secondary); 
    border-color: var(--border-hover);
    transform: translateY(-1px);
}
.rev-pill.active { 
    color:var(--accent); 
    background:var(--accent-dim); 
    border-color:rgba(255,0,0,0.3); 
    font-weight:600;
    box-shadow: 0 2px 8px rgba(255,0,0,0.15);
}
.rev-icon {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.badge-refill { background:rgba(255,0,0,0.12); color:var(--accent); }
.badge-spend { background:rgba(255,75,110,0.12); color:var(--danger); }
.badge-deduct { background:rgba(251,191,36,0.12); color:#FBBF24; }
.badge-payment { background:rgba(96,165,250,0.12); color:#60A5FA; }

.stats-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-bottom:20px; }
.stat-card.accent { border-color:rgba(255,0,0,0.2); }
.row-2col { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.row-2col > .card, .grid-2 > .card { margin-bottom:0; }
@media (max-width:768px) { .row-2col { grid-template-columns:1fr; } }

.info-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); font-size:12px; }
.info-row:last-child { border-bottom:none; }
.info-label { color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:0.05em; }
.text-dim { color:var(--text-muted); font-size:12px; }
.text-xs { font-size:11px; }
.loading-text { text-align:center; padding:40px; color:var(--text-muted); }

.filter-pills { display:flex; gap:4px; }
.pill {
    font-size:10px; padding:4px 10px; border-radius:20px; cursor:pointer;
    color:var(--text-muted); background:var(--bg); border:1px solid var(--border);
    transition:all 0.2s; letter-spacing:0.02em; white-space:nowrap;
}
.pill:hover { color:var(--text-secondary); }
.pill.active { color:var(--accent); background:rgba(255,0,0,0.1); border-color:rgba(255,0,0,0.25); font-weight:600; }

.table { width:100%; border-collapse:collapse; }
.table th { padding:10px 12px; text-align:left; font-size:10px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; border-bottom:1px solid var(--border); white-space:nowrap; }
.table td { padding:10px 12px; font-size:12px; border-bottom:1px solid var(--border); white-space:nowrap; color:var(--text-secondary); }
.table tr:hover td { background:rgba(255,255,255,0.02); }
.table tr:last-child td { border-bottom:none; }

.nav-item svg path { fill:none; }
.nav-item[data-page="telegram"] svg { fill:none; stroke:var(--text-muted); }
.nav-item[data-page="telegram"] svg path { fill:var(--text-muted); stroke:none; }
.nav-item[data-page="telegram"]:hover svg path { fill:var(--text-secondary); }
.nav-item[data-page="telegram"].active svg path { fill:var(--accent); }