/* ============================================================
   base.css —— 全站共享基础层（响应式系统 + 通用组件）
   三端共用；在模板内联样式之后加载，故同优先级下本文件生效。
   断点：<768px(sm) / 768–1440px(md) / >1440px(lg) / ≥2560px(超宽)
   目标：消除固定宽高与整页横向滚动，统一间距与字号节奏。
   ============================================================ */

/* ---------- 1. 全局：防整页横向滚动 ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;max-width:100%}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
pre,code{overflow-wrap:anywhere}

/* ---------- 2. 流式容器（替代各页写死的 max-width:1240px 等） ---------- */
.wrap,.container,.page,.masthead,.landing-wrap,.auth-wrap{
  width:100%;
  max-width:min(1440px,94vw)!important;
  margin-left:auto;margin-right:auto;
}
@media(min-width:1920px){ .wrap,.container,.page{max-width:min(1600px,90vw)!important} }
@media(min-width:2560px){ .wrap,.container,.page{max-width:min(1800px,86vw)!important} }
@media(max-width:768px){
  .wrap,.container,.page,.masthead,.landing-wrap,.auth-wrap{
    padding-left:14px!important;padding-right:14px!important;
  }
}

/* ---------- 3. 字号层级：随视口弹性缩放 ---------- */
body{font-size:clamp(13px,.42vw + 12px,15.5px);line-height:1.55}
h1,.h1{font-size:clamp(21px,1.9vw,34px)!important;line-height:1.22}
h2,.h2{font-size:clamp(18px,1.5vw,26px)!important;line-height:1.28}
h3,.h3{font-size:clamp(15px,1.15vw,20px)!important;line-height:1.34}
.muted,.mut12,.hint{font-size:clamp(11.5px,.32vw + 11px,13px)}

/* ---------- 4. 间距节奏 ---------- */
.card,.mbox{padding:clamp(14px,1.2vw,22px)!important;margin-bottom:clamp(12px,1vw,20px)!important}

/* ---------- 5. 表格：只在表格内部横向滚动，不撑破页面 ---------- */
table{max-width:100%;border-collapse:collapse}
@media(max-width:1024px){ table{min-width:0!important} }
@media(max-width:768px){
  table,table.tbl-wide{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  th,td{white-space:nowrap;padding:8px 10px!important}
}

/* ---------- 6. 栅格：自适应列数 ---------- */
.stats,.grid-auto,.stat-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr))!important;
  gap:clamp(10px,.8vw,16px)!important;
}
@media(max-width:560px){
  .stats,.grid-auto,.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ---------- 7. 通用组件（独立页面复用，统一观感） ---------- */
.card,.mbox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:clamp(12.5px,.3vw + 12px,14px);font-weight:600;font-family:inherit;
  min-height:36px;padding:0 16px;background:var(--accent);color:var(--accent-ink);
  border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;
  transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap;
}
.btn:hover{filter:brightness(.95)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--paper-2);color:var(--ink);border-color:var(--line)}
.btn.sm{min-height:30px;padding:0 12px;font-size:12.5px}
.btn.danger{background:var(--danger);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}
input,select,textarea{
  font-family:inherit;font-size:14px;color:var(--ink);background:var(--card);
  border:1px solid var(--inp-border,var(--line));border-radius:var(--radius-sm);
  padding:0 12px;height:36px;outline:none;transition:.15s;max-width:100%;
}
textarea{height:auto;padding:9px 12px;resize:vertical;min-height:64px}
input:focus,select:focus,textarea:focus{
  border-color:var(--inp-focus-border,var(--accent));
  box-shadow:var(--inp-focus-glow,0 0 0 3px var(--accent-soft));
}
.badge{display:inline-block;font-size:11.5px;padding:2px 9px;border-radius:980px;font-weight:600;white-space:nowrap}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* 弹窗遮罩层。历史上 .modal 同时被用作「遮罩」与「白色卡片」两种语义，
   是本项目的历史地雷。现统一为：遮罩 = .modal-mask，卡片 = .modal-panel。
   下方保留 .modal 作为遮罩的兼容别名，供尚未迁移的独立页使用（当前仅 borrow_admin 依赖）。 */
.modal-mask,.modal{position:fixed;inset:0;z-index:var(--z-mask,80);background:rgba(30,25,20,.45);display:none;
  align-items:flex-start;justify-content:center;overflow:auto;padding:40px 18px}
.modal-mask.open,.modal.open,.modal-mask.on,.modal.on{display:flex}
.mbox{width:100%;max-width:min(620px,94vw)!important}
.mono{font-family:var(--mono)}

/* ---------- 8. 断点差异化 ---------- */
/* sm：<768 —— 单列、按钮易点、弹窗贴底 */
@media(max-width:768px){
  .toolbar{gap:8px}
  .toolbar .btn{flex:1 1 auto;min-width:0}
  .modal{padding:16px 10px;align-items:flex-start}
  .mbox{max-width:100%!important;border-radius:var(--radius)}
  .masthead{flex-direction:column;align-items:stretch!important;gap:10px}
  .head-right{flex-direction:row;align-items:center;justify-content:space-between!important}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
}
/* md：768–1440 —— 常规桌面，两~三列 */
@media(min-width:769px) and (max-width:1440px){
  .stats{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important}
}
/* lg：>1440 —— 放宽留白与字号，利用大屏 */
@media(min-width:1441px){
  body{font-size:15px}
  .card,.mbox{padding:24px!important}
  h1,.h1{letter-spacing:-.022em}
}
/* 超宽：≥2560（2K/4K/5K）避免内容过窄或拉伸 */
@media(min-width:2560px){
  body{font-size:16px}
  .card,.mbox{padding:28px!important;border-radius:calc(var(--radius) + 4px)}
}
/* 横屏矮屏（如 16:9 笔记本、平板横放）：压缩纵向留白 */
@media(max-height:720px) and (min-width:769px){
  .wrap,.container,.page{padding-top:18px!important;padding-bottom:18px!important}
  .card,.mbox{margin-bottom:12px!important}
}

/* ============================================================
   9. 圆角统一 + 交互质感
   集中在共享层用 !important 施加，保证任何页面样式都无法再「吃掉」圆角。
   ============================================================ */
/* —— 一套圆角语言：按钮 / 输入 / 卡片 / 弹窗 / 徽章 —— */
.btn,.btn.sm,.btn.ghost,.btn.green,.btn.danger,.btn.add,.tb-btn,.icon-btn,.btn-icon{
  border-radius:var(--radius-btn)!important;
}
.btn.sm,.btn.small,.btn.xs{border-radius:var(--radius-btn-sm)!important}
input:not([type=checkbox]):not([type=radio]):not([type=file]),
select,textarea{border-radius:var(--radius-input)!important}
.card,.panel,.rm-btn,.wb-item,.big-btn,.qcard,.stat,.feat,.rec{
  border-radius:var(--radius-card)!important;
}
.mbox{border-radius:var(--radius-modal)!important}
.badge,.tag,.chip,.status-chip,.zone-badge,.ci-pill,.qtag,.pill{
  border-radius:var(--radius-badge)!important;
}
.skinswitch,.seg,.segmented,.tabbtn,.sbtn,.abtn,.mf-menu{border-radius:var(--radius-pill)!important}
.mf-item,.mm-item,.mm-panel{border-radius:var(--radius-btn-sm)!important}
/* 明确的正圆元素保持原样 */
.btn-circle,.fab{border-radius:50%!important}

/* —— 质感：统一过渡与焦点环（不改布局与配色）—— */
.btn,input,select,textarea,.card,.badge,.tabbtn,.rm-btn,.wb-item,.qcard,.stat,
.icon-btn,.btn-icon,.abtn{
  transition:background .16s ease,border-color .16s ease,box-shadow .18s ease,
             transform .16s cubic-bezier(.2,.7,.3,1),border-radius .16s ease;
}
.rm-btn:hover,.wb-item:hover,.qcard:hover,.abtn:hover,.tabbtn:hover{
  box-shadow:var(--shadow-hard-hover);transform:translateY(-1px);
}
.btn:hover{box-shadow:var(--shadow-hard)}
.btn.ghost:hover{background:var(--accent-soft);border-color:var(--accent)}
.btn:active{transform:translateY(1px);box-shadow:var(--shadow-press)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent);
}
@media(prefers-reduced-motion:reduce){
  .btn,.card,.rm-btn,.wb-item,.qcard,.tabbtn,input,select,textarea{transition:none!important}
}