:root { --sidebar-width:224px; }
.sidebar nav a .nav-label { width:auto; font-size:inherit; line-height:1.5; color:inherit; }
#sidebar-toggle { display:none; }
#sidebar-resize { display:none; }
#toast { left:50%; }

@media (min-width:621px) {
  .sidebar { width:var(--sidebar-width); padding:50px 18px 26px; }
  .workspace { margin-left:var(--sidebar-width); }
  body:has(#study-shell:not([hidden])) #toast { left:calc(50% + var(--sidebar-width) / 2); }
  .sidebar .brand { padding:0 8px; font-size:19px; white-space:nowrap; }
  .sidebar .brand .gem { margin-right:5px; }
  .sidebar .brand small { font-size:9px; letter-spacing:1.8px; }
  .sidebar .nav-caption { padding:42px 10px 12px; font-size:12px; letter-spacing:.7px; }
  .sidebar nav a { min-height:46px; padding:10px 12px; gap:11px; white-space:nowrap; }
  .sidebar nav a > span:first-child { flex-shrink:0; width:20px; }
  .sidebar .side-foot { margin-top:auto; }
  #sidebar-toggle {
    display:grid; place-items:center; position:absolute; top:12px; right:13px;
    width:28px; height:28px; padding:0; border:1px solid var(--line); border-radius:8px;
    background:var(--surface2); color:var(--muted); font-size:25px; line-height:1;
  }
  #sidebar-toggle:hover { background:var(--surface3); color:var(--accent); }
  #sidebar-resize { display:block; position:absolute; top:0; bottom:0; right:0; width:9px; cursor:col-resize; touch-action:none; }
  #sidebar-resize::before { content:""; position:absolute; top:50%; right:2px; width:3px; height:28px; transform:translateY(-50%); border-radius:3px; background:color-mix(in srgb,var(--muted) 35%,transparent); }
  #sidebar-resize::after { content:""; position:absolute; top:0; right:0; width:3px; height:100%; background:transparent; transition:background .15s; }
  #sidebar-resize:hover::after, #sidebar-resize:focus-visible::after, .sidebar-resizing #sidebar-resize::after { background:var(--accent); }
  #sidebar-resize:focus-visible { outline:none; }
  .sidebar-resizing, .sidebar-resizing * { cursor:col-resize!important; user-select:none!important; }
  :root[data-sidebar-collapsed="true"] .sidebar { padding:54px 10px 24px; }
  :root[data-sidebar-collapsed="true"] .sidebar .brand { padding:4px 0 0; text-align:center; }
  :root[data-sidebar-collapsed="true"] .sidebar .brand .gem { margin:0; font-size:30px; }
  :root[data-sidebar-collapsed="true"] .sidebar .brand-name,
  :root[data-sidebar-collapsed="true"] .sidebar .brand small,
  :root[data-sidebar-collapsed="true"] .sidebar .nav-caption,
  :root[data-sidebar-collapsed="true"] .sidebar .nav-label,
  :root[data-sidebar-collapsed="true"] .sidebar .side-note,
  :root[data-sidebar-collapsed="true"] .sidebar .side-foot,
  :root[data-sidebar-collapsed="true"] #sidebar-resize { display:none; }
  :root[data-sidebar-collapsed="true"] .sidebar nav { margin-top:37px; gap:9px; }
  :root[data-sidebar-collapsed="true"] .sidebar nav a { padding:12px 0; justify-content:center; }
  :root[data-sidebar-collapsed="true"] .sidebar nav a > span:first-child { width:24px; text-align:center; font-size:21px; }
  :root[data-sidebar-collapsed="true"] #sidebar-toggle { right:23px; }
  /* 自动折叠预览时保留捕获手柄，松手后再隐藏，允许拖回或取消。 */
  :root.sidebar-resizing[data-sidebar-collapsed="true"] #sidebar-resize { display:block; }
}

@media (max-width:620px) {
  .sidebar nav { overflow-x:auto; justify-content:flex-start; gap:6px; }
  .sidebar nav a { flex:0 0 auto; padding:8px 10px; white-space:nowrap; min-height:44px; }
  .sidebar nav a .nav-label { display:block; font-size:13px; }
  .sidebar .brand-name { display:inline; }
  .workspace { margin-left:0; }
  #toast { left:50%; }
}