/* 数学、语文、账号共用的左侧导航（配色自带，不依赖各页面的变量） */
:root { --sn-board: #173F35; --sn-board-2: #1F4D41; --sn-chalk: #E7F0EB; --sn-dim: #A9C3B8; --sn-mint: #7FD1B6; --sn-w: 228px; }
html.side-mini { --sn-w: 68px; }
#app:has(> .side) { display: grid; grid-template-columns: var(--sn-w) minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--sn-board); color: var(--sn-chalk); display: flex; flex-direction: column; gap: 14px; padding: 14px 10px; z-index: 60; }
.sn-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 2px 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sn-logo { display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-weight: 700; letter-spacing: .02em; min-width: 0; }
.sn-logo svg { flex: none; }
.sn-fold, .sn-close, .sn-menu { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 10px; border: 0; background: transparent; color: var(--sn-dim); cursor: pointer; }
.sn-fold:hover, .sn-close:hover { background: rgba(255,255,255,.08); color: #fff; }
.sn-close { display: none; }
.sn-nav { display: grid; gap: 2px; }
.sn-nav a, .sn-help { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--sn-dim); text-decoration: none; font-size: 15px; white-space: nowrap; }
.sn-ic { flex: none; }
.sn-soon { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--sn-dim); opacity: .55; font-size: 15px; white-space: nowrap; cursor: default; }
.sn-soon small { margin-left: 8px; font-size: 11px; padding: 1px 6px; border: 1px solid currentColor; border-radius: 999px; }
.sn-nav a.on { color: #fff; background: var(--sn-board-2); box-shadow: inset 3px 0 0 var(--sn-mint); }
.sn-sub { display: grid; gap: 2px; margin: 0 0 4px; }
.sn-sub a { padding: 8px 12px 8px 26px; font-size: 14px; }
.sn-sub a .sn-ic { width: 17px; height: 17px; }
.sn-help { margin-top: auto; font-size: 14px; }
.sn-who { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 12px; background: rgba(255,255,255,.06); color: #fff; text-decoration: none; min-width: 0; }
.sn-av { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--sn-mint); color: var(--sn-board); display: grid; place-items: center; font-style: normal; font-weight: 700; }
.sn-who span { display: flex; flex-direction: column; min-width: 0; }
.sn-who b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-who small { font-size: 12px; color: var(--sn-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .sn-nav a:hover, .sn-help:hover { color: #fff; background: rgba(255,255,255,.05); } }
.sn-bar, .sn-mask { display: none; }

/* 收起：只剩图标 */
html.side-mini .side { padding: 14px 8px; align-items: stretch; }
html.side-mini .sn-top { flex-direction: column; }
html.side-mini .sn-logo span, html.side-mini .sn-nav span, html.side-mini .sn-help span, html.side-mini .sn-who span { display: none; }
html.side-mini .sn-nav a, html.side-mini .sn-help, html.side-mini .sn-soon { justify-content: center; padding: 10px 0; }
html.side-mini .sn-sub a { padding: 8px 0; }
html.side-mini .sn-who { justify-content: center; padding: 6px 0; background: transparent; }
html.side-mini .sn-fold svg { transform: rotate(180deg); }

/* 手机 / 平板竖屏：顶部条，菜单在左、logo 在右，导航从左边滑出 */
@media (max-width: 860px) {
  #app:has(> .side) { display: block; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: min(280px, 82vw); height: auto; transform: translateX(-105%); transition: transform .22s ease; padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 0 40px rgba(0,0,0,.3); }
  html.side-open .side { transform: none; }
  html.side-mini .side { padding: 14px 10px; }
  html.side-mini .sn-top { flex-direction: row; }
  html.side-mini .sn-logo span, html.side-mini .sn-nav span, html.side-mini .sn-help span, html.side-mini .sn-who span { display: revert; }
  html.side-mini .sn-nav a, html.side-mini .sn-help, html.side-mini .sn-soon { justify-content: flex-start; padding: 10px 12px; }
  html.side-mini .sn-sub a { padding: 8px 12px 8px 26px; }
  html.side-mini .sn-who { justify-content: flex-start; padding: 9px; background: rgba(255,255,255,.06); }
  .sn-fold { display: none; }
  .sn-close { display: grid; }
  .sn-mask { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.4); }
  html.side-open .sn-mask { display: block; }
  .sn-bar { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 40; padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); background: var(--sn-board); color: #fff; }
  .sn-menu { color: #fff; margin-left: -6px; }
  .sn-bar .sn-logo { margin-left: auto; }
  .sn-bar .sn-logo b { font-size: 16px; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) { .side { transition: none; } }

/* 答题时不显示导航 */
body.exam-mode .side, body.exam-mode .sn-bar, body.exam-mode .sn-mask { display: none !important; }
body.exam-mode #app:has(> .side) { display: block; }