body{margin:0;padding:0}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif;line-height:1.6;color:#333;background-color:#f5f5f5}body{margin:0;display:flex;min-width:320px;min-height:100vh}#root{width:100%;height:100vh}.app-container{display:flex;width:100%;height:100%;position:relative}.mobile-top-bar{display:none;position:fixed;top:0;left:0;right:0;height:60px;background:#c0392b;color:#fff;align-items:center;padding:0 15px;z-index:800;box-shadow:0 2px 5px #0003}.mobile-menu-btn{background:none;border:none;color:#fff;font-size:1.8rem;cursor:pointer;margin-right:15px}.mobile-title{font-weight:700;text-transform:uppercase;letter-spacing:1px}.sidebar{width:280px;background:#2c3e50;color:#fff;height:100%;display:flex;flex-direction:column;box-shadow:2px 0 5px #0000001a;overflow-y:auto;flex-shrink:0;transition:width .3s ease,transform .3s ease;z-index:1000}.sidebar.collapsed{width:70px}.sidebar-header{padding:15px;background:linear-gradient(135deg,#e74c3c,#c0392b);display:flex;align-items:center;justify-content:space-between;min-height:70px}.sidebar.collapsed .sidebar-header{justify-content:center}.sidebar-header h2{margin:0;font-size:1.1rem;text-transform:uppercase;letter-spacing:1px;white-space:nowrap;overflow:hidden}.sidebar-toggle{background:#fff3;border:none;color:#fff;font-size:1.5rem;cursor:pointer;width:40px;height:40px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:background .2s}.menu-group{padding:10px 0}.menu-title{padding:15px 20px 5px;font-size:.75rem;color:#bdc3c7;text-transform:uppercase;font-weight:700}.menu-item{padding:12px 20px;cursor:pointer;transition:all .3s;display:flex;align-items:center;font-size:.95rem;border-left:4px solid transparent;gap:15px}.sidebar.collapsed .menu-item{padding:12px 0;justify-content:center;gap:0}.menu-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:#ffffff1a;border-radius:4px;font-weight:700;font-size:.8rem;flex-shrink:0}.menu-item:hover{background:#34495e;border-left-color:#3498db}.menu-item.active{background:#34495e;border-left-color:#e74c3c;color:#e74c3c}.main-content{flex:1;height:100%;overflow-y:auto;background:#f5f5f5;padding:0;position:relative}.content-wrapper{max-width:900px;margin:0 auto;background:#fff;min-height:100%;box-shadow:0 0 20px #0000000d}.menu-overlay{display:none;position:fixed;inset:0;background:#00000080;z-index:900}@media(max-width:768px){.mobile-top-bar{display:flex}.sidebar{position:fixed;left:0;top:0;transform:translate(-100%);width:280px!important}.sidebar.open{transform:translate(0)}.menu-overlay{display:block}.main-content{margin-top:60px;height:calc(100% - 60px)}}.html-container{padding:0}.html-container *{box-sizing:border-box}