/* 网页版：手机全屏；桌面用左侧导航 + 宽内容区，不再缩成手机竖屏 */
html.is-web,
html.is-web body{height:100%;height:100dvh;min-height:100%}
html.is-web{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.is-web body{
  overflow:hidden;
  background:var(--bg);
}
html.is-web input,
html.is-web textarea{font-size:16px}

html.is-web .app{
  width:100%;height:100%;height:100dvh;margin:0 auto;
  background:var(--bg);
}

/* 弹层在桌面保持全屏，内容用宽度上限约束 */
html.is-web .sheet{max-width:720px;margin:0 auto}
html.is-web .jj-bubble{max-width:190px}

/* ============ 桌面 / 平板横屏：左侧导航 ============ */
@media (min-width:901px){
  html.is-web .tabbar{
    left:0;top:0;bottom:0;right:auto;width:92px;height:auto;
    flex-direction:column;justify-content:center;gap:6px;
    border-top:none;border-right:1px solid var(--line);
    padding:calc(var(--sat) + 16px) 0 calc(16px + var(--sab));
    background:var(--card);
  }
  html.is-web .tab{
    flex:0 0 auto;width:72px;height:70px;margin:0 10px;border-radius:14px;
  }
  html.is-web .tab.on{background:var(--blue-soft)}
  html.is-web .tab.on::after{display:none}
  html.is-web .tab .tab-ico,
  html.is-web .tab .tab-ico svg{width:23px;height:23px}
  html.is-web .tab .tab-txt{font-size:10.5px}

  html.is-web #views{margin-left:92px}
  html.is-web .view{
    max-width:1180px;margin:0 auto;
    padding:30px 40px 48px;
  }
  html.is-web .view.nopad{max-width:none;padding:0}

  html.is-web .page-title{font-size:30px}
  html.is-web .page-sub{font-size:13.5px}

  /* 考点卡两列，超宽屏三列 */
  html.is-web .k-list{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }

  /* 法条 / 问答 / 卡片详情 / 答题：全屏背景，正文限宽 */
  html.is-web .jj-head{
    width:100%;max-width:980px;margin:0 auto;
    padding-left:24px;padding-right:24px;
  }
  html.is-web .jj-body{
    width:100%;max-width:900px;margin:0 auto;
    padding-left:24px;padding-right:24px;
  }
  html.is-web .jj-composer{
    width:100%;max-width:900px;margin:0 auto;
    padding-left:24px;padding-right:24px;
  }
  html.is-web .kd-head,
  html.is-web .kd-body{
    width:100%;max-width:900px;margin:0 auto;
  }
  html.is-web .quiz-top,
  html.is-web .quiz-body,
  html.is-web .quiz-foot{
    width:100%;max-width:900px;margin:0 auto;
  }
}

@media (min-width:1400px){
  html.is-web .k-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ============ 平板竖屏 / 小桌面：底部导航，但内容不再限 480 ============ */
@media (min-width:521px) and (max-width:900px){
  html.is-web .view{max-width:820px;margin:0 auto;padding:22px 24px 40px}
  html.is-web .view.nopad{max-width:none;padding:0}
  html.is-web .k-list{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }
  html.is-web .jj-head,
  html.is-web .jj-body,
  html.is-web .jj-composer,
  html.is-web .kd-head,
  html.is-web .kd-body,
  html.is-web .quiz-top,
  html.is-web .quiz-body,
  html.is-web .quiz-foot{
    max-width:760px;margin:0 auto;
  }
}

/* ============ 手机：全宽 ============ */
@media (max-width:520px){
  html.is-web body{background:var(--bg)}
  html.is-web .app{max-width:none}
  html.is-web .tabbar{left:0;right:0;bottom:0;width:auto;height:calc(62px + var(--sab));flex-direction:row;margin:0;max-width:none}
  html.is-web .jj-page,
  html.is-web .k-detail,
  html.is-web .quiz{left:0;right:0;width:100%;max-width:none;margin-left:0}
  html.is-web .sheet{max-width:none}
}