/*
  styles/desktop.css — 电脑版（桌面端）响应式适配。
  仅在 ≥980px 宽屏生效；手机/窄屏（<980px）完全不触发，手机版界面零影响。
  把手机的「窄列 + 底部 4 tab 导航」自适应成「宽内容 + 左侧边导航栏」，弹层/详情居中成文档。
  功能与功能细节与手机版完全一致（同一套代码，仅布局自适应）。
  最后加载，覆盖 theme.tokens.css 的移动布局。
*/
@media (min-width: 980px){

  /* —— 应用容器：留出左侧边栏宽度，整体居中加宽 —— */
  .app{
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 0 0 196px;          /* 给固定侧边栏让位 */
    min-height: 100vh;
  }

  /* —— 底部导航 → 左侧固定边栏 —— */
  .nav{
    left: max(0px, calc(50vw - 560px));
    transform: none; top: 0; bottom: auto;
    width: 184px; max-width: 184px; height: 100vh;
    flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 6px;
    border-top: none; border-right: 1px solid var(--line);
    padding: 60px 12px 18px;
    background: var(--nav-bg); backdrop-filter: none;
  }
  .nav::before{
    content: '🐕 汪忘词';
    position: absolute; top: 18px; left: 16px;
    font-size: 17px; font-weight: 800; color: var(--accent); letter-spacing: -.3px;
  }
  .nav button{
    flex: none; flex-direction: row; justify-content: flex-start; gap: 12px;
    width: 100%; height: 46px; border-radius: 12px; padding: 0 14px;
    font-size: 15px; font-weight: 700;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast);
  }
  .nav button .ni{ font-size: 21px }
  .nav button:hover{ color: var(--accent); background: rgba(120,140,200,.08) }
  .nav button.on{ color: var(--accent); background: rgba(59,109,255,.12) }
  .nav button.on .ni{ transform: none }

  /* —— 内容：可读宽度居中（避免一行太长） —— */
  .wrap{ padding: 16px 32px 36px; max-width: 880px; margin: 0 auto }
  .screen{ animation: none }   /* 桌面去掉上滑动画，切 tab 更稳 */

  /* —— 底部弹层 sheet → 屏幕居中模态 —— */
  .mask{ align-items: center }
  .sheet{
    max-width: 560px; border-radius: var(--r-lg);
    padding: 22px 24px; max-height: 86vh;
  }

  /* —— toast：移到内容区底部居中 —— */
  .toast-wrap{ left: 196px; right: 0; bottom: 24px }

  /* —— pushView 全屏层：内容居中成文档宽度（自带返回键） —— */
  .rt-head{ max-width: 900px; margin: 0 auto; width: 100%; padding: 16px 24px 8px }
  .rt-body{ max-width: 900px; margin: 0 auto; width: 100%; padding: 6px 24px 36px }

  /* —— 鼠标可点性增强 —— */
  .btn:hover{ filter: brightness(1.03) }
  .card{ transition: box-shadow var(--dur-fast) var(--ease) }
}

/* 超宽屏（≥1400px）再放宽一点点内容，但保持可读 */
@media (min-width: 1400px){
  .app{ max-width: 1200px }
  .nav{ left: max(0px, calc(50vw - 600px)) }
  .wrap{ max-width: 920px }
}