:root{--sbw:240px;--tbh:64px;--tabh:64px}
body.app{padding-top:var(--tbh);padding-inline-start:var(--sbw)}
body.app.collapsed{--sbw:72px}
html:not(.ready) body.app{visibility:hidden}
#page{max-width:1200px;margin-inline:auto;padding:24px}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.sidebar{position:fixed;inset-block:0;inset-inline-start:0;width:var(--sbw);background:var(--card);border-inline-end:1px solid var(--border);display:flex;flex-direction:column;z-index:40;transition:width var(--t),transform var(--t)}
.sb-brand{height:var(--tbh);display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--border);font-weight:700;white-space:nowrap;overflow:hidden}
.logo{width:36px;height:36px;border-radius:10px;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-weight:700;flex:none}
.sb-nav{flex:1;overflow-y:auto;padding:12px}
.nav-h{font-size:.875rem;font-weight:600;color:var(--muted);padding:16px 12px 4px}
.nav-a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:10px;color:var(--text);white-space:nowrap;background:none;border:0;width:100%;cursor:pointer;text-align:start}
.nav-a:hover{background:var(--bg);text-decoration:none}
.nav-a.on{background:var(--primary-soft);color:var(--link);font-weight:600}
.sb-foot{padding:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.topbar{position:fixed;top:0;inset-inline-start:var(--sbw);inset-inline-end:0;height:var(--tbh);display:flex;align-items:center;gap:8px;padding:0 24px;background:var(--card);border-bottom:1px solid var(--border);z-index:30;transition:inset-inline-start var(--t)}
.tb-title{font-weight:700;font-size:1.125rem;display:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar>.btn,.topbar>.menu,.avatar{flex:none}
.tb-sp{flex:1}
.search{position:relative;width:240px}
.search .i{position:absolute;inset-inline-start:12px;top:12px;color:var(--muted)}
.search .input{padding-inline-start:40px;min-height:44px}
.viewas{display:flex;align-items:center;gap:8px}
.viewas .select{min-height:36px;width:auto;max-width:210px;padding:4px 8px}
.drawer-viewas .viewas{flex-wrap:wrap}.drawer-viewas .viewas .select{flex:1 1 160px;max-width:none;min-height:44px}
.sidebar{overflow-x:hidden}
.chip{background:var(--warning-bg);color:var(--warning);border-radius:999px;padding:2px 10px;font-size:.875rem;font-weight:600;white-space:nowrap}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--primary-soft);color:var(--link);display:grid;place-items:center;font-weight:700;border:0;cursor:pointer}
.burger,.tabbar,.drawer-viewas{display:none}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity var(--t);z-index:35}
.scrim.on{opacity:1;pointer-events:auto}
@media(min-width:1024px){
 body.collapsed .sb-brand span,body.collapsed .nav-a span,body.collapsed .nav-h{display:none}
 body.collapsed .nav-a,body.collapsed .sb-brand{justify-content:center;padding:0}
}
@media(max-width:1023px){
 body.app,body.app.collapsed{--sbw:0px}
 .sidebar{width:280px;transform:translateX(-100%)}
 [dir=rtl] .sidebar{transform:translateX(100%)}
 .sidebar.open{transform:none}
 .burger{display:inline-flex}.collapse-btn,.search,.lbl-hide{display:none}
 .tb-title{display:block}.topbar{padding:0 16px}
 .avatar{width:44px;height:44px}.viewas .select{min-height:44px}
}
@media(max-width:639px){
 body.app{padding-bottom:calc(var(--tabh) + 8px)}
 #page{padding:16px}
 .tb-viewas{display:none}.drawer-viewas{display:block}
 .tabbar{display:flex;position:fixed;bottom:0;inset-inline:0;height:var(--tabh);background:var(--card);border-top:1px solid var(--border);z-index:30;padding-bottom:env(safe-area-inset-bottom)}
 .tab-a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:44px;font-size:.875rem;color:var(--muted);background:none;border:0;cursor:pointer}
 .tab-a:hover{text-decoration:none}.tab-a.on{color:var(--link);font-weight:600}
 .page-head .btn{width:100%}
}
/* login */
body.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login-tools{position:fixed;top:16px;inset-inline-end:16px;display:flex;gap:8px}
.login-card{width:100%;max-width:420px;display:flex;flex-direction:column;gap:16px}
.user-btn{display:flex;align-items:center;gap:12px;min-height:56px;width:100%;padding:8px 12px;background:var(--card);border:1px solid var(--border);border-radius:10px;cursor:pointer;text-align:start;transition:border-color var(--t)}
.user-btn:hover{border-color:var(--primary)}
.user-btn small{display:block;color:var(--muted);font-size:.875rem}