/* ═══════════════════════════════════════════════════════════════
   MultiFeedbackSystem 全站全局样式(global.css · v2.5)
   - 由 admin/_style.php 薄壳按页面目录引入(根目录 / admin 子目录)
   - 自适应策略:视口断点(1200 / 1024 / 760 / 560)+ JS 终端标记
     html[data-terminal="desktop|tablet|mobile"](assets/global.js 实时维护)
   - 版本号由引入方以 ?v=APP_VERSION 追加,升级后浏览器自动拉新
   ═══════════════════════════════════════════════════════════════ */

/* ═══ 设计令牌 ═══ */
:root{
  --brand:#0a6cff; --brand-2:#0052cc; --brand-deep:#0b2b57;
  --accent:#7c5cff;
  --ink:#0f172a; --ink-2:#334155; --muted:#64748b;
  --line:#e6eaf2;
  --card-r:14px; --ctrl-r:9px;
  --page-max:1400px; --page-px:20px;   /* 页面容器宽度与左右留白 */
  --ctrl-h:38px;                        /* 统一控件高度 */
  --shadow-1:0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.06);
  --shadow-2:0 4px 10px rgba(15,23,42,.06), 0 18px 44px rgba(15,23,42,.10);
  --grad-btn:linear-gradient(135deg,#2f8dff 0%,#0a6cff 55%,#0052e0 100%);
}

/* ═══ 粘底页脚布局:内容不足一屏时页脚仍贴底 ═══
   (登录/注册等自身 flex 居中的页面在 body 上加 .vcenter 豁免) */
body:not(.vcenter){
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body:not(.vcenter) > .ufoot{ margin-top:auto; }

/* ═══ 全局:背景光效 / 字体 / 选区 / 滚动条 / 焦点环 ═══ */
body{
  background:
    radial-gradient(900px 380px at 8% -6%, rgba(10,108,255,.08), transparent 60%),
    radial-gradient(800px 360px at 96% -4%, rgba(124,92,255,.06), transparent 55%),
    linear-gradient(180deg,#f3f6fc 0%, #f7f9fd 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:"Segoe UI","Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:#bcd9ff; color:var(--brand-deep); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#c7d0de; border-radius:8px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:#a9b6cb; border:2px solid transparent; background-clip:content-box; }
:focus-visible{ outline:2px solid rgba(10,108,255,.45); outline-offset:2px; border-radius:4px; }

h1{ letter-spacing:-.02em; }
a{ color:var(--brand); }
input[type=checkbox], input[type=radio]{ accent-color:var(--brand); }

/* ═══ 页面入场动画 ═══ */
.wrap, .content, .form-wrap, .layout, .box, .login-box{ animation:pageIn .4s ease both; }
@keyframes pageIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

/* ═══ 页面容器统一:宽度与上下左右留白全站一致(基准:admin/import.php) ═══
   24px 顶部间隔(与页头的距离) / 20px 左右 / 40px 底部;外边距清零防各页私改 */
.wrap, .content, .layout, .main, main{
  box-sizing:border-box;
  width:100%;                    /* flex 子项防收缩:先撑满,再被 max-width 截断 */
  max-width:var(--page-max);
  margin:0 auto;
  padding:24px var(--page-px) 40px;
}
.form-wrap{ box-sizing:border-box; width:100%; max-width:var(--page-max); margin:0 auto; padding:24px var(--page-px) 90px; }

/* ═══ 页面内标题范式 ═══ */
.page-title{ margin:20px 0 14px; }
.page-title h1{ font-size:clamp(18px,1.4vw,20px); font-weight:800; color:var(--ink); }
.page-title .sub{ font-size:12.5px; color:var(--muted); margin-top:2px; }

/* ═══ 页题卡片(与 admin/import.php 页首同款:图标+标题+说明) ═══ */
.phcard{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:16px; padding:24px; max-width:100%; }
.phcard h1{ font-size:19px; font-weight:800; color:var(--ink); margin:0 0 6px; letter-spacing:-.01em; }
.phcard .ph-desc{ color:var(--muted); font-size:13px; line-height:1.75; }
.phcard .ph-extra{ flex-shrink:0; padding-top:2px; }

/* ═══ 卡片体系 ═══ */
.card, .box, .info-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--card-r);
  box-shadow:var(--shadow-1);
  transition:box-shadow .25s ease;
}
.card:hover{ box-shadow:var(--shadow-2); }
.stat-card, .kpi{ transition:transform .2s ease, box-shadow .2s ease; }
.stat-card:hover, .kpi:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }

/* ═══ 按钮 ═══ */
.btn{
  background:var(--grad-btn);
  color:#fff; border:none; border-radius:10px;
  min-height:var(--ctrl-h); padding:8px 22px; font-size:14px;
  box-shadow:0 6px 16px rgba(10,92,224,.25), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
  cursor:pointer;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 10px 22px rgba(10,92,224,.32), inset 0 1px 0 rgba(255,255,255,.25); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn-default, .btn-ghost, .btn-secondary{ background:#eef2f8; color:var(--ink-2); box-shadow:none; }
.btn-default:hover, .btn-ghost:hover, .btn-secondary:hover{ background:#e4eaf4; filter:none; transform:translateY(-1px); box-shadow:var(--shadow-1); }
.login-box button[type=submit], .box button[type=submit], .login-box .btn, .box .btn{
  background:var(--grad-btn); color:#fff; border:none; border-radius:10px;
  box-shadow:0 6px 16px rgba(10,92,224,.28);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.login-box button[type=submit]:hover, .box button[type=submit]:hover{ transform:translateY(-1px); filter:brightness(1.06); }

/* ═══ 表单控件:统一高度/内边距/label ═══ */
input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=number], input[type=search], select{
  min-height:var(--ctrl-h); padding:8px 12px; font-size:14px; line-height:1.4;
  border:1.5px solid #d7dde8; border-radius:var(--ctrl-r);
  background:#fff; color:var(--ink);
  transition:border-color .18s ease, box-shadow .18s ease;
}
textarea{ padding:10px 12px; font-size:14px;
  border:1.5px solid #d7dde8; border-radius:var(--ctrl-r); background:#fff; color:var(--ink);
  transition:border-color .18s ease, box-shadow .18s ease; }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(10,108,255,.14);
}
label{ font-size:13px; font-weight:600; color:var(--ink-2); }

/* ═══ 表格:统一行高;内容列溢出省略(操作列豁免) ═══ */
table{ border-collapse:collapse; }
th{ color:var(--muted); font-weight:600; font-size:12px; letter-spacing:.03em; padding:10px 12px; }
td{ padding:10px 12px; border-bottom:1px solid #eef1f6; }
tbody tr, table tr{ transition:background .15s ease; }
tbody tr:hover, table.recent tr:hover td{ background:#f7faff; }
.table-wrap{ border:1px solid var(--line); border-radius:12px; overflow:auto; box-shadow:var(--shadow-1); background:#fff; }
.table-wrap td{ max-width:340px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.table-wrap td:last-child, .table-wrap td.act{ white-space:normal; overflow:visible; max-width:none; }

/* ═══ 徽章 / 状态 / 标签页 ═══ */
.badge{ border-radius:999px; }
.st{ border-radius:999px; font-weight:600; box-shadow:inset 0 0 0 1px rgba(15,23,42,.08); }
.status-badge{ border-radius:999px; box-shadow:inset 0 0 0 1px rgba(15,23,42,.08); }
.tabs a{ border-radius:10px; padding:6px 14px; color:var(--muted); text-decoration:none; transition:all .18s ease; }
.tabs a:hover{ color:var(--brand); background:rgba(10,108,255,.06); }
.tabs a.active{ background:#fff; color:var(--brand); font-weight:700; box-shadow:var(--shadow-1); }

/* ═══ 提示条 ═══ */
.msg{ border-radius:10px; font-size:13px; padding:12px 16px; border:1px solid transparent; }
.msg.ok{ background:#f0fdf4; border-color:#bbf7d0; color:#166534; }
.msg.error, .msg.err, .err{ border-radius:10px; }
.err{ background:#fef2f2; border:1px solid #fecaca; color:#991b1b; border-radius:10px; }
.ok{ background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; border-radius:10px; }
.warnbar{ border-radius:12px; }

/* ═══ 文档/代码块 ═══ */
.code-wrap{ border-radius:12px; overflow:hidden; border:1px solid #e2e8f2; box-shadow:var(--shadow-1); }
.info-item{ background:#fbfcfe; border:1px solid #eef2f8; border-radius:10px; }

/* ═══ 面包屑组件 ═══ */
.crumbs{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:#eef4fb; border-bottom:1px solid #dbe7f3; padding:9px var(--page-px);
  font-size:13px; }
.crumbs a{ color:var(--brand); text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }
.crumbs .sep{ color:#b6c2d1; }
.crumbs .cur{ color:var(--ink-2); }

/* ═══ 全局 Toast ═══ */
#toastBox{ position:fixed; top:66px; left:50%; transform:translateX(-50%); z-index:9999;
  display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none;
  width:max-content; max-width:92vw; }
.toast{ pointer-events:auto; min-width:200px; max-width:86vw; padding:11px 20px; border-radius:10px;
  font-size:13.5px; color:#fff; box-shadow:0 10px 30px rgba(15,23,42,.25);
  animation:toastIn .28s cubic-bezier(.34,1.4,.64,1); }
.toast.ok{ background:linear-gradient(135deg,#34c77b,#1da75f); }
.toast.err{ background:linear-gradient(135deg,#ff6b6b,#e5484d); }
.toast.info{ background:linear-gradient(135deg,#4aa8ff,#0a6cff); }
.toast.out{ opacity:0; transform:translateY(-8px); transition:all .3s ease; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(-12px) scale(.94);} to{ opacity:1; transform:none;} }

/* ═══ 审计详情 / 通用 JSON 折叠 ═══ */
details.jsonbox{ display:inline-block; min-width:120px; }
details.jsonbox summary{ cursor:pointer; color:var(--brand); font-size:12.5px; user-select:none; }
details.jsonbox pre{ margin:6px 0 0; padding:10px 12px; background:#0f172a; color:#d7e3f4;
  border-radius:8px; max-height:280px; overflow:auto; font-size:12px; line-height:1.55;
  text-align:left; max-width:520px; white-space:pre; }

/* ═══════════════════════════════════════════════════════════
   自适应断点(纯 CSS,随窗口/设备实时生效)
   ═══════════════════════════════════════════════════════════ */

/* ── ≤1200px:小屏笔记本/平板横屏 ── */
@media (max-width:1200px){
  :root{ --page-max:100%; }              /* 容器改为流式占满 */
  .grid{ gap:12px; }
}

/* ── ≤1024px:平板(data-terminal=tablet)── */
@media (max-width:1024px){
  .phcard h1{ font-size:18px; }
  .kpis{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
}

/* ── ≤900px:筛选区/统计卡防挤压 ── */
@media (max-width:900px){
  .toolbar, .filters, .search-box{ flex-wrap:wrap; }
  .search-box{ margin-left:0; width:100%; }
  .stats-bar{ flex-wrap:wrap; }
  .stats-bar > *{ flex:1 1 140px; }
  .crumbs{ padding:8px 14px; }
  .grid{ grid-template-columns:1fr; }    /* 双栏卡片落为单栏 */
}

/* ── ≤760px:手机(data-terminal=mobile)── */
@media (max-width:760px){
  .wrap, .content, .layout, .main, main, .form-wrap{ padding:16px 12px 32px; }
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
  td, th{ padding:8px 10px; }
  .unav{ padding:8px 12px; }
  .quick-actions{ flex-wrap:wrap; }
  .phcard{ margin-bottom:12px; padding:16px; }
  .phcard h1{ font-size:17px; }
  .page-title h1{ font-size:18px; }
  .card{ border-radius:12px; }
}

/* ── ≤560px:小屏手机 ── */
@media (max-width:560px){
  .kpis{ grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }
  .kpi .num{ font-size:22px; }
  .btn{ width:100%; }                    /* 按钮通栏易点按 */
  #toastBox{ top:74px; width:92vw; }
  .toast{ min-width:0; width:100%; }
}

/* ── 终端标记钩子:global.js 按视口实时设置 html[data-terminal] ──
   需要按"设备类别"而非纯宽度定制时使用,例如: */
html[data-terminal="mobile"] .phcard .ph-desc{ font-size:12.5px; }
html[data-terminal="mobile"] .unav .links{ gap:9px; }
html[data-terminal="tablet"] .unav .links{ gap:12px; }

/* ═══ 动效克制(无障碍) ═══ */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}