*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{color:#1f2328;background:#f4f5f7;font-family:system-ui,sans-serif}.topbar{color:#fff;letter-spacing:1px;background:#0f1b2d;align-items:center;height:52px;padding:0 20px;font-size:20px;font-weight:700;display:flex}.shell{height:calc(100vh - 52px);display:flex}.sidebar{background:#fff;border-right:1px solid #e3e5e8;flex-shrink:0;width:260px;padding:12px;overflow-y:auto}.sidebar-title{text-transform:uppercase;color:#6b7280;letter-spacing:.5px;padding:8px;font-size:11px}.sidebar a{color:inherit;border-radius:6px;padding:10px;font-size:14px;text-decoration:none;display:block}.sidebar a:hover{background:#f1f3f5}.sidebar a.active{color:#1d4ed8;background:#e7efff;font-weight:600}.content{flex:1}.frame{border:0;width:100%;height:100%;display:block}