/* 外壳：电脑左侧栏 + 顶上一行；窄屏（< 720）换成顶上一行 + 底部导航，同一套页面单列排版。 */
.shell{display:grid;grid-template-columns:208px 1fr;min-height:100vh}
.side{padding:28px var(--s16) var(--s32);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.logo{padding:0 var(--s12) 28px;display:block}
.logo svg{display:block;width:140px;height:auto}
.side nav a{display:flex;align-items:center;height:40px;padding:0 var(--s12);border-radius:var(--r8);font-size:16px;line-height:24px;color:var(--olive)}
.side nav a:hover{background:var(--tint)}
.side nav a.on{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--stone)}
.side nav a.sub{height:36px;padding-left:var(--s24);font-size:14px}
.side nav a .dot{margin-left:var(--s8);width:8px;height:8px}
.side .nav-group a.sub{display:none}
.side .nav-group.open a.sub,.side .nav-group.home a.sub{display:flex}
.nav-gap{height:1px;background:var(--stone);margin:var(--s12)}
.main{padding:var(--s16) var(--s32) 96px 0;min-width:0;min-height:100vh}
.bar{display:flex;justify-content:flex-end;align-items:center;gap:var(--s16);height:40px;margin-bottom:var(--s16);font-size:14px;color:var(--olive)}
.bar .who b{color:var(--ink);font-weight:600;margin-right:var(--s4)}
.bar .demo{font-size:12px;color:var(--sage)}
.bar button.demo{color:var(--olive);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--stone)}
.bar .mark{display:none}
.tabs{display:none}

/* 登录页 */
.login{min-height:100vh;display:grid;place-items:center;padding:var(--s32) var(--s16)}
.login-box{width:360px;max-width:100%}
.login-box .logo{padding:0 0 var(--s32);display:flex;justify-content:center}
.login-box .logo svg{width:180px}
.login-box .field{margin-bottom:var(--s16)}
.login-box .btn{margin-top:var(--s8)}
.demo-accts{margin-top:40px;border-top:1px solid var(--stone);padding-top:var(--s16)}
.demo-accts .lab{margin-bottom:var(--s12)}
.demo-accts .seg button{font-size:14px;height:36px;padding:0 var(--s12)}
.demo-accts .seg button span{color:var(--olive);margin-left:var(--s4)}

@media (max-width:719px){
  .shell{display:block}
  .side{display:none}
  .main{padding:0 20px calc(96px + env(safe-area-inset-bottom));background:var(--paper)}
  .bar{position:sticky;top:0;z-index:15;background:var(--base);margin:0 -20px var(--s8);padding:calc(var(--s8) + env(safe-area-inset-top)) 20px var(--s8);height:auto;justify-content:space-between;gap:var(--s12)}
  .bar .mark{display:block;flex:none}
  .bar .mark svg{display:block;width:96px;height:auto}
  .bar .out{display:none}
  .bar .who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--base);border-top:1px solid var(--stone);padding-bottom:env(safe-area-inset-bottom)}
  .tabs a{height:56px;display:grid;place-items:center;font-size:14px;color:var(--olive);position:relative}
  .tabs a.on{color:var(--ink);font-weight:600}
  .tabs a.on::before{content:"";position:absolute;top:0;left:30%;right:30%;height:2px;background:var(--olive)}
  .tabs a .dot{position:absolute;top:12px;right:calc(50% - 24px);width:8px;height:8px}
}