html,body{margin:0;font-family:Segoe UI,sans-serif;background:#0b1220;color:#fff;overflow-x:hidden}

.sidebar-toggle{display:none;position:fixed;top:20px;right:20px;z-index:1001;background:#3b82f6;border:none;color:white;padding:10px 12px;border-radius:8px;cursor:pointer;font-size:20px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;line-height:1;}

.sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;background:#111827;padding:20px;overflow-y:auto;z-index:1000;box-shadow:2px 0 10px rgba(0,0,0,0.3)}

.sidebar h2{margin-top:0;margin-bottom:30px}

.sidebar a{display:flex;align-items:center;gap:10px;color:#cbd5e1;text-decoration:none;padding:12px;border-radius:8px;margin:8px 0;transition:all 0.3s}

.sidebar a:hover{background:#1e293b}

.sidebar a .sidebar-icon{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;font-size:16px}

.sidebar a.logout-btn{color:#ef4444;margin-top:20px}

.sidebar a.logout-btn:hover{background:rgba(239,68,68,0.2);color:#fca5a5}

.content{margin-left:260px;padding:24px;min-height:100vh}

.card{background:#1e293b;padding:20px;border-radius:16px;margin-bottom:20px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}

.metric{font-size:28px;font-weight:bold}

.app-loading-gif{
    width:72px;
    height:72px;
    object-fit:contain;
    margin-bottom:18px;
    user-select:none;
    pointer-events:none;
}

@media(max-width:768px){
    .sidebar-toggle{display:inline-flex !important}
    
    .sidebar{left:0;transform:translateX(-100%);transition:transform 0.3s ease, visibility 0.3s ease;visibility:hidden;max-height:100vh}
    
    .sidebar.active{transform:translateX(0);visibility:visible}
    
    .content{margin-left:0;padding:80px 16px 24px}
}

@media(max-width:480px){
    .sidebar-toggle{top:15px;right:15px;padding:8px 12px;font-size:18px}
    
    .content{padding:70px 12px 20px}
    
    .card{padding:16px;margin-bottom:16px}
    
    .metric{font-size:24px}
}

.sidebar-open .sidebar-toggle {
    display:none !important;
}


.sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:999;display:none}
.sidebar-backdrop.hidden{display:none!important}
.sidebar-backdrop.active{display:block!important}

.app-splash{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:linear-gradient(135deg,#0b1220,#111827 85%);z-index:2000;transition:opacity .35s ease,visibility .35s ease;opacity:1;visibility:visible}
.app-splash.hidden{opacity:0;visibility:hidden;pointer-events:none}
.app-splash-inner{max-width:320px;text-align:center}
.app-splash-logo{width:56px;height:56px;border-radius:16px;background:#2563eb;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 12px 30px rgba(37,99,235,.35)}
.app-splash-title{margin:0;font-size:24px;font-weight:700}
.app-splash-subtitle{margin:0;color:#94a3b8;font-size:14px}

@keyframes skeleton-pulse{0%{opacity:1}50%{opacity:.4}100%{opacity:1}}
.content.loading .card,
.content.loading table,
.content.loading .billing-box,
.content.loading .timeline,
.content.loading .interest-panel,
.content.loading .header-card,
.content.loading .stats .card,
.content.loading .notifications-card{position:relative;overflow:hidden;color:transparent;background:#111827}
.content.loading .card::after,
.content.loading table::after,
.content.loading .billing-box::after,
.content.loading .timeline::after,
.content.loading .interest-panel::after,
.content.loading .header-card::after,
.content.loading .stats .card::after,
.content.loading .notifications-card::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 100%);animation:skeleton-pulse 1.4s infinite}
.content.loading .form-group label,
.content.loading .form-group input,
.content.loading button,
.content.loading th,
.content.loading td,
.content.loading .billing-box h3,
.content.loading .billing-box .billing-value,
.content.loading .timeline-item,
.content.loading .interest-panel div,
.content.loading .header-card h1,
.content.loading .header-card p,
.content.loading .card h2,
.content.loading .card h3,
.content.loading .metric{background:rgba(255,255,255,.06);color:transparent;border-color:transparent}
.content.loading table{background:#111827}
.content.loading .form-group input,
.content.loading button{box-shadow:none}