/* ============================================================
   CQC 报告工具 · 设计系统
   概念:官方认证「纸 · 墨 · 朱红(公章红)」—— 暖纸面、深墨字、朱红为唯一强调色。
   OKLCH 全程;中性色统一偏暖;无纯黑纯白。
   ============================================================ */
:root{
  /* 纸与墨(暖调中性) */
  --paper:        oklch(0.984 0.004 70);
  --paper-2:      oklch(0.965 0.006 70);
  --surface:      oklch(0.997 0.002 70);
  --ink:          oklch(0.255 0.014 55);
  --ink-soft:     oklch(0.46 0.012 55);
  --ink-faint:    oklch(0.605 0.010 60);
  --line:         oklch(0.905 0.006 70);
  --line-soft:    oklch(0.94 0.005 70);
  --line-strong:  oklch(0.85 0.008 65);
  /* 朱红:品牌 / 强调 / 严重 */
  --red:          oklch(0.555 0.165 30);
  --red-strong:   oklch(0.49 0.175 30);
  --red-tint:     oklch(0.955 0.030 30);
  --red-line:     oklch(0.86 0.07 30);
  /* 导航:深墨(暖) */
  --nav:          oklch(0.265 0.022 45);
  --nav-2:        oklch(0.315 0.026 45);
  --nav-ink:      oklch(0.80 0.012 70);
  /* 语义 */
  --ok:           oklch(0.55 0.115 152);
  --ok-tint:      oklch(0.955 0.035 152);
  --ok-line:      oklch(0.85 0.06 152);
  --warn:         oklch(0.60 0.11 72);
  --warn-tint:    oklch(0.958 0.045 78);
  --warn-line:    oklch(0.85 0.07 78);
  --info:         oklch(0.52 0.085 250);
  --info-tint:    oklch(0.955 0.028 250);
  --info-line:    oklch(0.86 0.05 250);

  --radius:   12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow-sm: 0 1px 2px oklch(0.4 0.03 50 / 0.05);
  --shadow:    0 1px 2px oklch(0.4 0.03 50 / 0.05), 0 6px 20px oklch(0.4 0.03 50 / 0.05);
  --shadow-lg: 0 4px 12px oklch(0.4 0.03 50 / 0.07), 0 24px 48px oklch(0.4 0.03 50 / 0.08);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);          /* ease-out-quint */
  --cjk: "PingFang SC","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  --mono: "SF Mono","JetBrains Mono","Menlo",ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--cjk); color:var(--ink); background:var(--paper);
  font-size:14px; line-height:1.62; letter-spacing:0.01em;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(oklch(0.5 0.02 50 / 0.018) 0.5px, transparent 0.5px);
  background-size:22px 22px;
}
a{color:var(--red-strong);text-decoration:none;transition:color .15s var(--ease)}
a:hover{color:var(--red)}
::selection{background:var(--red-tint);color:var(--red-strong)}
h1,h2,h3{letter-spacing:-0.01em;line-height:1.25}

/* ================= 顶栏(桌面)================= */
.topbar{
  background:var(--nav);
  background-image:linear-gradient(180deg, var(--nav-2), var(--nav));
  color:oklch(0.98 0.004 70); display:flex; align-items:center;
  height:56px; padding:0 24px; position:sticky; top:0; z-index:50;
  box-shadow:0 1px 0 oklch(1 0 0 / 0.04), 0 6px 20px oklch(0.2 0.02 50 / 0.18);
}
.brand{display:flex;align-items:baseline;gap:10px;margin-right:30px;white-space:nowrap}
.brand .mark{
  font-weight:800;font-size:17px;letter-spacing:0.04em;color:oklch(0.99 0.004 70);
  display:inline-flex;align-items:center;gap:8px;
}
.brand .mark::before{                       /* 朱红印记,非侧条 */
  content:"";width:9px;height:9px;border-radius:2px;
  background:var(--red);box-shadow:0 0 0 3px oklch(0.555 0.165 30 / 0.25);
}
.brand .sub{font-size:11px;color:var(--nav-ink);font-weight:400;letter-spacing:0.06em}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  color:var(--nav-ink); font-size:13.5px; font-weight:500; padding:7px 13px;
  border-radius:8px; position:relative; transition:color .18s var(--ease), background .18s var(--ease);
}
.nav-links a:hover{color:oklch(0.99 0.004 70);background:oklch(1 0 0 / 0.06)}
.nav-links a.active{color:oklch(0.99 0.004 70);background:oklch(1 0 0 / 0.10);font-weight:600}
.nav-links a.active::after{       /* 贴合的细底纹,非浮动 */
  content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;
  border-radius:2px;background:var(--red);
}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:13px}
.topbar .right .u{color:oklch(0.92 0.006 70)}
.topbar .right a{color:var(--nav-ink)}
.topbar .right a:hover{color:oklch(0.99 0.004 70)}

/* 手机底部 Tab(默认隐藏) */
.tabbar{display:none}
.tabbar svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}

/* ================= 布局 ================= */
.wrap{max-width:1100px;margin:0 auto;padding:28px 20px 48px}
.page-title{font-size:23px;font-weight:800;color:var(--ink);margin-bottom:5px;letter-spacing:-0.02em}
.page-sub{color:var(--ink-soft);font-size:13.5px;margin-bottom:24px;max-width:75ch}

/* ================= 卡片 / 区块 ================= */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;margin-bottom:20px;box-shadow:var(--shadow-sm);
}
.card h2{
  font-size:13px;font-weight:700;color:var(--ink);margin-bottom:16px;
  text-transform:none;letter-spacing:0.02em;display:flex;align-items:center;gap:9px;
}
.card h2::before{                 /* 朱红小记号(顶角方块,非左侧条) */
  content:"";width:6px;height:6px;border-radius:1.5px;background:var(--red);flex:none;
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* ================= 上传区 ================= */
.drop{
  border:1.5px dashed var(--line-strong);border-radius:var(--radius);
  background:linear-gradient(180deg, var(--paper-2), var(--surface));
  padding:34px 24px;text-align:center;color:var(--ink-soft);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.drop:hover{border-color:var(--red-line);background:var(--red-tint)}
.drop input[type=file]{margin:12px 0;font-size:13px;color:var(--ink-soft)}

/* ================= 按钮 ================= */
.btn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--red);color:oklch(0.99 0.01 70);border:1px solid transparent;
  border-radius:var(--radius-sm);padding:10px 20px;font-size:13.5px;font-weight:600;
  font-family:var(--cjk);letter-spacing:0.02em;
  box-shadow:0 1px 2px oklch(0.49 0.175 30 / 0.25);
  transition:background .16s var(--ease), box-shadow .16s var(--ease), transform .08s var(--ease);
}
.btn:hover{background:var(--red-strong);color:oklch(0.99 0.01 70);box-shadow:0 3px 10px oklch(0.49 0.175 30 / 0.3)}
.btn:active{transform:translateY(1px)}
.btn.sm{padding:6px 13px;font-size:12px}
.btn.gray{background:var(--surface);color:var(--ink);border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.btn.gray:hover{background:var(--paper-2);color:var(--ink);border-color:var(--ink-faint)}
.btn.green{background:var(--ok);box-shadow:0 1px 2px oklch(0.55 0.115 152 / 0.25)}
.btn.green:hover{background:oklch(0.49 0.12 152)}

/* ================= 统计小条(非 hero-metric)================= */
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.chip{
  display:flex;align-items:baseline;gap:7px;border:1px solid var(--line);
  background:var(--surface);border-radius:999px;padding:7px 15px 7px 13px;
  font-size:12.5px;font-weight:600;color:var(--ink-soft);box-shadow:var(--shadow-sm);
}
.chip .n{font-size:16px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-faint);flex:none;align-self:center}
.chip.hi{color:var(--red-strong);border-color:var(--red-line);background:var(--red-tint)}
.chip.hi .n,.chip.hi::before{color:var(--red);background:var(--red)}
.chip.hi .n{background:none}
.chip.med{color:oklch(0.45 0.09 72);border-color:var(--warn-line);background:var(--warn-tint)}
.chip.med::before{background:var(--warn)} .chip.med .n{color:oklch(0.42 0.1 72)}
.chip.low{color:oklch(0.45 0.07 90);border-color:oklch(0.86 0.06 90);background:oklch(0.96 0.04 92)}
.chip.low::before{background:oklch(0.7 0.11 90)} .chip.low .n{color:oklch(0.42 0.08 90)}
.chip.info{color:var(--info);border-color:var(--info-line);background:var(--info-tint)}
.chip.info::before{background:var(--info)} .chip.info .n{color:var(--info)}
.chip.ok{color:oklch(0.42 0.1 152);border-color:var(--ok-line);background:var(--ok-tint)}
.chip.ok::before{background:var(--ok)} .chip.ok .n{color:oklch(0.42 0.11 152)}

/* ================= 表格 ================= */
.card{overflow-x:auto}                 /* 宽表在卡内横向滚动 */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
thead th, tr:first-child th{
  background:var(--paper-2);color:var(--ink-soft);font-weight:600;font-size:11.5px;
  letter-spacing:0.04em;text-transform:none;border-bottom:1px solid var(--line);
  position:sticky;top:0;
}
tbody tr:hover td, tr:hover td{background:oklch(0.972 0.006 60)}
tr:last-child td{border-bottom:none}
.row-link{cursor:pointer}
.sev{font-weight:700;white-space:nowrap;font-size:12.5px}
.sev.高{color:var(--red)} .sev.中{color:oklch(0.5 0.11 72)}
.sev.低{color:oklch(0.5 0.09 90)} .sev.提示{color:var(--info)}

/* 判定徽章 */
.vb{
  display:inline-flex;align-items:center;border-radius:999px;padding:2px 10px;
  font-size:11px;font-weight:700;letter-spacing:0.03em;white-space:nowrap;
  border:1px solid transparent;font-variant-numeric:tabular-nums;
}
.vb.PASS{color:oklch(0.4 0.11 152);background:var(--ok-tint);border-color:var(--ok-line)}
.vb.FLAG{color:oklch(0.99 0.01 30);background:var(--red);border-color:var(--red-strong)}
.vb.QUALITATIVE{color:var(--ink-soft);background:var(--paper-2);border-color:var(--line-strong)}
.vb.NA{color:var(--ink-faint);background:var(--surface);border-color:var(--line)}
.vb.MANUAL{color:oklch(0.45 0.1 72);background:var(--warn-tint);border-color:var(--warn-line)}
tr.flag td{background:var(--red-tint)}
tr.flag:hover td{background:oklch(0.93 0.04 30)}

/* ================= 表单 ================= */
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:6px;font-weight:500}
.field input,.field select{
  width:100%;padding:11px 13px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  font-size:14px;font-family:var(--cjk);color:var(--ink);background:var(--surface);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 3px oklch(0.555 0.165 30 / 0.14);
}
.w100{width:100%;justify-content:center}

/* ================= 提示 / 标签 / 杂项 ================= */
.muted{color:var(--ink-faint)}
small.src{color:var(--ink-faint);font-size:11px}
.num-list{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft)}
.mono{
  font-family:var(--mono);font-size:12.5px;background:var(--nav);color:oklch(0.88 0.01 70);
  border-radius:var(--radius-sm);padding:14px 16px;overflow-x:auto;white-space:pre-wrap;line-height:1.7;
}
.mono .c{color:oklch(0.82 0.09 220)} .mono .g{color:oklch(0.8 0.12 150)}
.help{
  background:var(--info-tint);border:1px solid var(--info-line);border-radius:var(--radius-sm);
  padding:12px 15px;font-size:12.5px;color:oklch(0.4 0.07 250);line-height:1.65;
}
.tag{display:inline-flex;align-items:center;font-size:11px;padding:1px 9px;border-radius:999px;font-weight:600}
.tag.role{background:var(--red-tint);color:var(--red-strong);border:1px solid var(--red-line)}

/* flash */
.flash{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:18px;font-size:13px;font-weight:500;border:1px solid transparent}
.flash.error{background:var(--red-tint);color:var(--red-strong);border-color:var(--red-line)}
.flash.ok{background:var(--ok-tint);color:oklch(0.42 0.11 152);border-color:var(--ok-line)}

/* ================= 登录 ================= */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 90% at 50% -10%, var(--red-tint), transparent 55%), var(--paper)}
.login-box{
  width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:36px 32px;box-shadow:var(--shadow-lg);
}
.login-box .logo{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:6px}
.login-box .logo::before{content:"";width:11px;height:11px;border-radius:3px;background:var(--red);
  box-shadow:0 0 0 4px oklch(0.555 0.165 30 / 0.18)}
.login-box h1{font-size:20px;color:var(--ink);text-align:center;font-weight:800}
.login-box .sub{text-align:center;color:var(--ink-faint);font-size:11.5px;margin-bottom:24px;letter-spacing:0.06em}

/* ================= 页面载入微动效 ================= */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wrap>*{animation:rise .5s var(--ease) both}
.wrap>*:nth-child(2){animation-delay:.04s}
.wrap>*:nth-child(3){animation-delay:.08s}
.wrap>*:nth-child(4){animation-delay:.12s}

/* ================= 响应式:手机 ================= */
@media (max-width:720px){
  html,body{overflow-x:hidden;max-width:100%}   /* 页面不横滑;宽表在卡内自带横滑 */
  body{padding-bottom:64px}                 /* 给底部 Tab 留位 */
  .topbar{height:52px;padding:0 16px}
  .topbar .nav-links{display:none}          /* 顶栏链接收起,改底部 Tab */
  .brand .sub{display:none}
  .wrap{padding:20px 15px 40px}
  .page-title{font-size:20px}
  .card{padding:18px 16px;border-radius:10px}
  .grid2,.grid3,.two{grid-template-columns:1fr;gap:14px}
  th,td{padding:9px 10px;font-size:12.5px}
  .card table{min-width:560px}            /* 宽表卡内横滑,不再压成竖排单字 */
  .topbar .right .tag{display:none}        /* 省空间:手机隐藏「管理员」标签 */
  .topbar .right{gap:12px}
  .page-sub{font-size:13px}

  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--surface);border-top:1px solid var(--line);
    box-shadow:0 -2px 16px oklch(0.3 0.02 50 / 0.08);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar a{
    flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
    color:var(--ink-faint);font-size:10.5px;font-weight:500;padding:5px 2px;
    border-radius:10px;transition:color .15s var(--ease), background .15s var(--ease);
  }
  .tabbar a svg{width:21px;height:21px;stroke-width:1.9}
  .tabbar a.active{color:var(--red)}
  .tabbar a.active .ti{background:var(--red-tint)}
  .tabbar a .ti{display:grid;place-items:center;width:40px;height:26px;border-radius:999px;transition:background .15s var(--ease)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}