html,body,#root{width:100%;height:100%;margin:0;padding:0}*,:before,:after{box-sizing:border-box}body{min-width:0;font-family:system-ui,sans-serif;display:block}.shell{flex-direction:column;width:100%;height:100vh;font-family:system-ui,sans-serif;display:flex}.topbar{text-align:center;color:#fff;background:#1e293b;flex-shrink:0;align-items:center;gap:12px;height:56px;padding:0 16px;display:flex}.brand{letter-spacing:1px;color:#fff;text-align:center;margin:0;font-size:36px}.spacer{flex:1}.username{opacity:.9;font-size:14px}.icon-btn{color:#fff;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:4px 8px;font-size:22px}.icon-btn:hover{background:#ffffff1f}.logout{color:#fff;cursor:pointer;background:#334155;border:0;border-radius:6px;padding:7px 14px;font-size:14px}.logout:hover{background:#475569}.body{flex:1;min-height:0;display:flex}.sidebar{background:#f1f5f9;border-right:1px solid #e2e8f0;flex-shrink:0;width:150px;padding:12px 8px;transition:width .2s,padding .2s;overflow:hidden auto}.sidebar.closed{border-right:0;width:0;padding:12px 0}.nav-item{color:#334155;white-space:nowrap;border-radius:8px;margin-bottom:4px;padding:10px 14px;font-size:15px;text-decoration:none;display:block}.nav-item:hover{background:#e2e8f0}.nav-item.active{color:#fff;background:#2563eb}.content{background:#fff;flex:1;padding:24px;overflow:auto}@media (width<=100vh){.sidebar{z-index:10;position:fixed;top:56px;bottom:0;left:0;box-shadow:2px 0 12px #00000026}}