*{margin:0;padding:0;box-sizing:border-box}:root{--primary-blue: #1e3a8a;--secondary-blue: #3b82f6;--accent-yellow: #d97706;--light-gray: #f3f4f6;--white: #ffffff;--text-dark: #1f2937;--sidebar-width: 260px;--header-height: 64px;--footer-height: 50px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;color:var(--text-dark);min-height:100vh;overflow-x:hidden;justify-content:center;align-items:center;background:var(--main-bg);padding:20px}.header{position:fixed;top:0;left:0;right:0;height:var(--header-height);background:var(--primary-blue);color:var(--white);display:flex;align-items:center;padding:0 20px;z-index:1000;box-shadow:0 2px 8px #0000001a}.header-left{display:flex;align-items:center;gap:15px}.toggle-btn{background:transparent;border:none;color:var(--white);font-size:24px;cursor:pointer;padding:8px;border-radius:4px;transition:background .3s}.toggle-btn:hover{background:#ffffff1a}.logo{font-size:22px;font-weight:700;color:var(--accent-yellow)}.header-right{margin-left:auto;position:relative}.user-menu-btn{width:40px;height:40px;border-radius:50%;border:2px solid var(--accent-yellow);background:var(--secondary-blue);cursor:pointer;overflow:hidden;transition:transform .2s}.user-menu-btn:hover{transform:scale(1.05)}.user-menu-btn img{width:100%;height:100%;object-fit:cover}.user-dropdown{position:absolute;top:50px;right:0;background:var(--white);border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:200px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .3s;z-index:1001}.user-dropdown.active{opacity:1;visibility:visible;transform:translateY(0)}.user-dropdown-item{padding:12px 20px;color:var(--text-dark);text-decoration:none;display:flex;align-items:center;gap:10px;transition:background .2s;border-bottom:1px solid var(--light-gray)}.user-dropdown-item:last-child{border-bottom:none;color:#dc2626}.user-dropdown-item:hover{background:var(--light-gray)}.sidebar{position:fixed;top:var(--header-height);left:0;width:var(--sidebar-width);height:calc(100vh - var(--header-height));background:var(--white);box-shadow:2px 0 8px #0000000d;overflow-y:auto;transition:transform .3s ease;z-index:999}.sidebar.collapsed{transform:translate(-100%)}.nav-menu{list-style:none;padding:10px 0}.nav-item{margin:2px 0}.nav-link{display:flex;align-items:center;padding:12px 20px;color:var(--text-dark);text-decoration:none;transition:all .2s;cursor:pointer;-webkit-user-select:none;user-select:none}.nav-link:hover{background:var(--light-gray);color:var(--secondary-blue)}.nav-link.active{background:var(--secondary-blue);color:var(--white);border-left:4px solid var(--accent-yellow)}.nav-icon{margin-right:12px;font-size:18px}.nav-arrow{margin-left:auto;transition:transform .3s}.nav-arrow.open{transform:rotate(180deg)}.submenu{list-style:none;max-height:0;overflow:hidden;transition:max-height .3s ease;background:var(--light-gray)}.submenu.open{max-height:500px}.submenu-link{display:block;padding:10px 20px 10px 52px;color:var(--text-dark);text-decoration:none;transition:all .2s;font-size:14px}.submenu-link:hover{background:#3b82f61a;color:var(--secondary-blue);padding-left:56px}.main-wrapper{margin-left:var(--sidebar-width);margin-top:var(--header-height);min-height:calc(100vh - var(--header-height));transition:margin-left .3s ease;display:flex;flex-direction:column}.main-wrapper.expanded{margin-left:0}.main-content{padding:30px;flex:1}.content-header{margin-bottom:25px}.content-title{font-size:28px;color:var(--primary-blue);margin-bottom:8px}.breadcrumb{color:#6b7280;font-size:14px}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:20px}.card{background:var(--white);border-radius:8px;padding:20px;box-shadow:0 1px 3px #0000001a;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.card-title{font-size:18px;color:var(--primary-blue);margin-bottom:10px}.footer{background:var(--primary-blue);color:var(--white);text-align:center;padding:15px;font-size:14px;width:100%}.overlay{display:none;position:fixed;top:var(--header-height);left:0;right:0;bottom:0;background:#00000080;z-index:998;opacity:0;transition:opacity .3s}.overlay.active{display:block;opacity:1}@media (max-width: 768px){.sidebar{transform:translate(-100%)}.sidebar.active{transform:translate(0)}.main-wrapper{margin-left:0}.logo{font-size:18px}}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:var(--light-gray)}.sidebar::-webkit-scrollbar-thumb{background:var(--secondary-blue);border-radius:3px}