@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
:root{--primary:#E11D48;--primary-hover:#BE123C;--primary-light:rgba(225,29,72,0.15);--bg:#0B0B0F;--bg-card:#111827;--bg-secondary:#1F2937;--bg-hover:#1a2332;--bg-input:#0f1729;--text:#F9FAFB;--text-muted:#9CA3AF;--text-dim:#6B7280;--border:#1F2937;--border-light:#374151;--success:#10B981;--warning:#F59E0B;--danger:#EF4444;--info:#3B82F6;--purple:#7C3AED;--sidebar-width:260px;--header-height:60px;--radius:10px;--radius-sm:6px;--radius-lg:14px;--shadow:0 4px 6px -1px rgba(0,0,0,0.3),0 2px 4px -2px rgba(0,0,0,0.2);--shadow-lg:0 10px 25px -5px rgba(0,0,0,0.4);--transition:all 0.2s ease}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:14px;scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;min-height:100vh}
body.loaded .app-layout{opacity:1}
::selection{background:var(--primary);color:#fff}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}
a{color:var(--primary);text-decoration:none}
input,select,textarea,button{font-family:inherit;font-size:inherit}
.app-layout{display:flex;min-height:100vh;opacity:0;transition:opacity 0.3s}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-width);background:var(--bg-card);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:100;transition:transform 0.3s ease,width 0.3s ease}
.sidebar-brand{padding:16px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}
.brand-logo svg{flex-shrink:0}
.brand-name{font-size:16px;font-weight:700;color:var(--text)}
.brand-tagline{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}
.brand-powered{padding:0 20px 12px;font-size:10px;color:var(--text-dim);letter-spacing:0.3px}
.brand-powered strong{color:var(--primary);font-weight:600}
.sidebar-nav{flex:1;overflow-y:auto;padding:12px 0}
.nav-section{margin-bottom:8px}
.nav-section-title{display:block;padding:8px 20px 4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim)}
.nav-link{display:flex;align-items:center;gap:12px;padding:9px 20px;color:var(--text-muted);transition:var(--transition);border-left:3px solid transparent;cursor:pointer;text-decoration:none;position:relative}
.nav-link:hover{color:var(--text);background:var(--bg-hover)}
.nav-link.active{color:#fff;background:rgba(225,29,72,0.1);border-left:4px solid var(--primary);font-weight:600}
.nav-link svg{flex-shrink:0;opacity:0.7}
.nav-link.active svg{opacity:1;color:var(--primary)}
.nav-badge{background:var(--primary);color:#fff;font-size:11px;padding:1px 7px;border-radius:10px;margin-left:auto}
.sidebar-footer{padding:12px 16px;border-top:1px solid var(--border)}
.sidebar-user{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--radius-sm);cursor:pointer}
.sidebar-user:hover{background:var(--bg-hover)}
.sidebar-user-name{font-size:13px;font-weight:600;color:var(--text)}
.sidebar-user-role{font-size:11px;color:var(--text-muted);display:block}
.sidebar-user-info{flex:1;min-width:0;overflow:hidden}
.sidebar-footer-actions{display:flex;gap:4px;margin-top:8px}
.main-wrapper{margin-left:var(--sidebar-width);flex:1;display:flex;flex-direction:column;min-height:100vh;transition:margin 0.3s}
.header{height:var(--header-height);background:rgba(11,11,15,0.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:50}
.header-left{display:flex;align-items:center;gap:16px;flex:1}
.header-right{display:flex;align-items:center;gap:12px}
.sidebar-toggle{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:6px;border-radius:var(--radius-sm);display:none}
.sidebar-toggle:hover{background:var(--bg-hover);color:var(--text)}
.header-search{display:flex;align-items:center;gap:8px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:0 12px;max-width:400px;flex:1}
.header-search svg{color:var(--text-dim);flex-shrink:0}
.header-search input{background:none;border:none;color:var(--text);padding:8px 0;width:100%;outline:none}
.header-search input::placeholder{color:var(--text-dim)}
.header-btn{position:relative;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:8px;border-radius:var(--radius-sm);transition:var(--transition)}
.header-btn:hover{background:var(--bg-hover);color:var(--text)}
.notif-count{position:absolute;top:2px;right:2px;background:var(--primary);color:#fff;font-size:10px;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:600}
.header-user-menu{display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 10px;border-radius:var(--radius);transition:var(--transition)}
.header-user-menu:hover{background:var(--bg-hover)}
.header-user-name{font-weight:500;color:var(--text);font-size:13px}
#main-content{flex:1;padding:24px;overflow-y:auto}
.page-exit{opacity:0;transform:translateY(8px);transition:all 0.15s}
.page-enter{animation:pageEnter 0.3s ease forwards}
@keyframes pageEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.sidebar-collapsed .sidebar{transform:translateX(-100%)}
.sidebar-collapsed .main-wrapper{margin-left:0}
@media(max-width:768px){.sidebar{transform:translateX(-100%)}.main-wrapper{margin-left:0}.sidebar-toggle{display:block}body:not(.sidebar-collapsed) .sidebar{transform:translateX(0)}#main-content{padding:16px}}

/* Typography Refinements */
body {
    line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* Mobile Sidebar Overlay */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 99;
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}
@media(max-width:768px) {
    body:not(.sidebar-collapsed) .sidebar-overlay {
        display: block;
        opacity: 1;
    }
}