:root{--menu-width:240px;--menu-bg:#1f2937;--menu-text:#e5e7eb;--menu-hover:#374151;--content-bg:#f3f4f6}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0}body{font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif}.layout{width:100%;height:100dvh;min-height:100vh;display:flex}.menu{width:var(--menu-width);background:var(--menu-bg);color:var(--menu-text);flex-shrink:0;padding:16px 12px;overflow-y:auto}.menu-title{margin:0 0 12px;padding:8px 10px;font-size:16px;font-weight:600}.menu-list{gap:6px;display:grid}.menu-tip{color:#cbd5e1;margin:0 10px 10px;font-size:13px}.menu-error{color:#fecaca}.menu-item{text-align:left;width:100%;color:inherit;cursor:pointer;background:0 0;border:none;border-radius:8px;padding:10px;font-size:14px;transition:background-color .2s}.menu-item:hover,.menu-item:focus-visible,.menu-item.active{background:var(--menu-hover);outline:none}.menu-item.active{font-weight:600}.content{background:var(--content-bg);flex:1;min-width:0;padding:10px}.content-frame{background:#fff;border:none;border-radius:10px;width:100%;height:100%}.empty{color:#64748b;background:#fff;border-radius:10px;place-items:center;width:100%;height:100%;display:grid}.welcome{text-align:center;color:#1f2937;background:linear-gradient(135deg,#eef2ff 0%,#f0f9ff 100%);border-radius:10px;align-content:center;justify-items:center;width:100%;height:100%;padding:24px;display:grid}.welcome h2{margin:0 0 10px;font-size:24px}.welcome p{color:#475569;margin:0}.notfound{text-align:center;color:#334155;background:#fff;border-radius:10px;place-items:center;width:100%;height:100%;display:grid}.notfound h2{margin:0 0 8px;font-size:32px}.notfound p{margin:0}@media (width<=768px){.layout{flex-direction:column}.menu{width:100%;padding:10px}.menu-title{margin-bottom:8px}.menu-list{grid-auto-columns:max-content;grid-auto-flow:column;gap:8px;padding-bottom:4px;overflow-x:auto}.content{height:calc(100dvh - 78px);min-height:0}}