:root{--bg:#050d18;--panel:#091522;--panel2:#0c1c2b;--border:#20384e;--text:#edf4fa;--muted:#8da3b8;--accent:#81cfef;--green:#7ef269;--orange:#ffa348;--radius:18px;font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--text);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-width:330px;background:radial-gradient(ellipse at 15% 0%,#0e213750 0,transparent 45%),radial-gradient(ellipse at 100% 40%,#08283440 0,transparent 35%),var(--bg);min-height:100vh}button,input{font:inherit}button,label.file-button{cursor:pointer}button{color:inherit}button:disabled{opacity:.42;cursor:not-allowed}button:not(:disabled):hover,.file-button:hover{filter:brightness(1.12)}button:focus-visible,input:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}.app-shell{max-width:1720px;margin:auto;padding:28px 40px 20px}.topbar{display:flex;align-items:center;justify-content:space-between;padding-bottom:24px;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:14px}.brand-icon{font-size:36px;font-family:Georgia,serif;width:53px;height:53px;border:1px solid #3e738e;border-radius:14px;display:grid;place-items:center;color:var(--accent);background:#122c3f}.eyebrow{font-size:10px;letter-spacing:3px;color:var(--accent);margin-bottom:4px}h1{font-size:19px;margin:0;letter-spacing:2px;font-weight:600}.connection{display:flex;align-items:center;gap:9px;background:#0a1826;border:1px solid var(--border);border-radius:30px;padding:11px 17px;font-size:12px}.status-dot{height:7px;width:7px;display:inline-block;border-radius:100%;background:#8194a7}.status-dot.online{background:var(--green);box-shadow:0 0 9px #7ef26950}.status-dot.offline{background:#ff9090}.intro{display:flex;justify-content:space-between;align-items:center;padding:29px 0 26px;gap:20px}h2{font-size:25px;font-weight:500;letter-spacing:.6px;margin:0 0 10px}.intro p{font-size:13px;color:var(--muted);margin:0}.quiet-tag{font-size:12px;color:var(--accent);white-space:nowrap;border-left:1px solid #31516a;padding-left:16px}.controls{display:grid;grid-template-columns:minmax(130px,1fr) minmax(150px,1fr) 190px;gap:18px;align-items:end;padding:20px 22px;background:#0b1928b0;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:22px}.control-field{display:flex;flex-direction:column;gap:9px}.control-field label{font-size:12px;color:#c2d1df}.control-field label span{font-size:10px;color:#768da3;margin-left:7px}.control-field input{width:100%;min-height:43px;border-radius:8px;border:1px solid #294256;background:#06101c;color:var(--text);padding:10px 12px;font-size:13px}.control-field input::placeholder{color:#5f7890}.primary-button{background:linear-gradient(135deg,#74c7e4,#a1e5ec);border:none;color:#062233;border-radius:9px;min-height:44px;padding:12px 20px;font-weight:650;font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:20px}.primary-button span:last-child{font-size:19px;font-weight:400}.message{border:1px solid #345069;border-radius:10px;padding:13px 17px;font-size:13px;line-height:1.6;background:#112236;margin-bottom:18px;white-space:pre-wrap;overflow-wrap:anywhere}.message.error{border-color:#7f4048;background:#301a25;color:#ffb9bb}.demo-banner{padding:14px 18px;border:1px solid #bb7d42;border-radius:10px;color:#ffd099;background:#392a18;font-size:13px;line-height:1.5;margin-bottom:18px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 355px;gap:20px;align-items:stretch}.panel{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:linear-gradient(145deg,#0b1826,#06121e)}.panel-heading{height:72px;padding:0 23px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #1a3043}.panel-heading>div{display:flex;align-items:center;gap:12px}.panel-heading h3{font-size:15px;font-weight:500;margin:0}.section-no{font-size:10px;color:#68869f;border:1px solid #2a4154;padding:4px 6px;border-radius:4px}.secondary-button{border:1px solid #365068;border-radius:7px;background:#0c1c2b;color:#bfd0df;padding:8px 13px;font-size:12px;display:inline-flex;align-items:center;justify-content:center;min-height:34px}.image-stage{position:relative;min-height:490px;height:calc(100% - 177px);background:radial-gradient(ellipse at center,#112d4040,transparent 60%),linear-gradient(0deg,#13253835 1px,transparent 1px),linear-gradient(90deg,#13253835 1px,transparent 1px),#050e19;background-size:auto,42px 42px,42px 42px,auto;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:22px;cursor:pointer}.image-stage.dragging{box-shadow:inset 0 0 0 2px var(--accent);background-color:#163046}.image-stage.has-image{padding:12px;cursor:default}.image-stage img{display:block;max-width:100%;max-height:670px;height:auto;width:auto;object-fit:contain;box-shadow:0 0 40px #0007}.empty-state{text-align:center;padding:32px 20px}.scope-icon{width:118px;height:118px;padding:17px;border:1px solid #294861;border-radius:50%;background:#0e26354a;margin:0 auto 25px;color:#70bada}.scope-icon svg{width:100%;height:100%}.empty-state h3{font-size:18px;font-weight:400;letter-spacing:1px;margin:0 0 12px}.empty-state p{font-size:13px;color:var(--accent);margin:0 0 25px}.empty-state>span{color:#6d89a1;font-size:11px}.image-meta{height:42px;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:0 21px;font-size:11px;color:#8da4b9;border-top:1px solid #1a3043}.image-meta span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-meta span:last-child{white-space:nowrap;color:#77b8d5}.image-actions{padding:10px 17px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:63px}.image-actions>span{font-size:10px;color:#7891a7;margin-left:auto}.result-panel{padding-bottom:22px}.result-panel .panel-heading{padding:0 20px}.small-caps{font-size:9px;letter-spacing:1.4px;color:#52738e}.class-counts{padding:25px 24px 14px;min-height:108px}.class-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0 0 18px}.class-label{display:flex;align-items:center;gap:11px;font-size:15px;overflow-wrap:anywhere}.class-dot{height:10px;width:10px;flex-shrink:0;border-radius:50%}.class-number{font-size:25px;font-variant-numeric:tabular-nums;font-weight:600}.muted{color:var(--muted);font-size:13px;line-height:1.8}.total-row{margin:0 23px 23px;padding:21px 0;border-top:1px solid #2a526e;border-bottom:1px solid #233e54;display:flex;align-items:center;justify-content:space-between;gap:20px}.total-row h4{font-size:17px;font-weight:500;margin:0 0 7px}.total-row p{font-size:10px;color:var(--muted);margin:0}.total-row strong{font-weight:500;color:var(--accent);font-size:47px;line-height:1.2}.timing-row{display:flex;justify-content:space-between;gap:16px;padding:0 24px;font-size:11px;color:#8ba4ba;margin:13px 0}.timing-row span:last-child{color:#b7cbdc;font-variant-numeric:tabular-nums}.divider{margin:24px;border-top:1px solid #1c354a}.zoom-heading{padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}.zoom-heading h4{font-size:13px;font-weight:400;margin:0}.zoom-heading span{font-size:9px;color:#6d88a0}.zoom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:18px 23px}.zoom-placeholder{grid-column:1/-1;min-height:112px;display:grid;place-items:center;border:1px dashed #2b4359;border-radius:8px;color:#68849c;font-size:11px}.zoom-card{min-width:0;border:1px solid #29465e;border-radius:8px;overflow:hidden;background:#06101a}.zoom-card canvas{display:block;width:100%;height:108px;object-fit:contain;background:#040b14}.zoom-caption{font-size:10px;padding:9px;color:#a9c5d9;overflow-wrap:anywhere;display:flex;justify-content:space-between;gap:7px}.count-note{font-size:10px;color:#6f8ba3;line-height:1.9;margin:2px 24px 0;border-left:2px solid #30506c;padding-left:11px}.processing{position:absolute;inset:0;background:#04101ccb;backdrop-filter:blur(5px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.processing strong{font-size:17px;font-weight:400}.processing>span:last-child{font-size:12px;color:#8bb8cf}.spinner{height:43px;width:43px;border:2px solid #294659;border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.details-panel{margin-top:20px;padding:18px 23px}summary{cursor:pointer;font-size:12px;color:#b2cadd}.table-wrap{overflow:auto;max-height:340px;margin-top:18px}table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}th{font-weight:400;color:#7094b0}th,td{padding:12px;border-bottom:1px solid #1d3448}td{color:#c2d4e3}footer{display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#607b92;padding:23px 2px;line-height:1.8}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1450px){.workspace{grid-template-columns:minmax(0,1fr) 380px}.image-stage{min-height:555px}.zoom-card canvas{height:125px}}
@media(max-width:1050px){.app-shell{padding:22px}.workspace{grid-template-columns:minmax(0,1fr) 305px;gap:15px}.controls{grid-template-columns:minmax(120px,1fr) minmax(135px,1fr) 140px;gap:12px;padding:17px}.access-field label span{display:none}.image-stage{min-height:480px}.image-actions>span{margin-left:0}.small-caps{display:none}.intro h2{font-size:22px}}
@media(max-width:800px){.app-shell{padding:18px}.controls{grid-template-columns:1fr 1fr}.access-field{grid-column:1/-1}.primary-button{grid-column:1/-1}.workspace{grid-template-columns:1fr}.image-stage{height:auto;min-height:360px}.intro{align-items:flex-start}.quiet-tag{display:none}.image-stage img{max-height:560px}.image-panel{height:auto}.zoom-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.result-panel{padding-bottom:20px}.topbar{padding-bottom:19px}.brand-icon{width:45px;height:45px;font-size:32px}h1{font-size:16px}.eyebrow{font-size:8px}.connection{font-size:10px;padding:9px 11px}.intro h2{font-size:20px}.intro p{font-size:12px}.class-counts{min-height:0}.image-actions>span{width:100%;margin-top:2px}footer{flex-direction:column;gap:6px}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}}

/* Avoid very long class lists expanding the entire layout. */
.model-summary{font-size:11px;line-height:1.8;color:#7fa1b9;overflow-wrap:anywhere;margin:-8px 0 18px;max-height:72px;overflow:auto}
.class-counts{max-height:300px;overflow:auto}.zoom-grid{max-height:370px;overflow:auto}
@media(max-width:480px){.topbar{align-items:flex-start;gap:10px}.brand{gap:9px}h1{font-size:14px;letter-spacing:0}.connection{max-width:125px;text-align:left}.intro h2{font-size:19px;line-height:1.55}.intro p{line-height:1.8}.zoom-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.image-stage{min-height:310px}}
/* =========================================================
   白色细菌检测工作台主题
   ========================================================= */

:root {
  --page-bg: #f4f7fb;
  --panel-bg: #ffffff;
  --panel-soft: #f8fafc;

  --text-main: #172033;
  --text-secondary: #667085;
  --text-light: #8a94a6;

  --border: #dde4ee;
  --border-soft: #e9eef5;

  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-soft: #eff6ff;

  --success: #16a34a;
  --danger: #dc2626;

  --shadow:
    0 8px 24px rgba(15, 23, 42, 0.06);

  --shadow-hover:
    0 12px 30px rgba(15, 23, 42, 0.10);
}


/* =========================================================
   页面整体
   ========================================================= */

html,
body {
  background: var(--page-bg) !important;
  color: var(--text-main) !important;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Microsoft YaHei",
    "PingFang SC",
    Arial,
    sans-serif;
}


/* =========================================================
   主页面宽度
   ========================================================= */

.app-shell {
  max-width: 1500px;
  margin: 0 auto;
  padding: 24px 32px 40px;
}


/* =========================================================
   顶部区域
   ========================================================= */

.topbar {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;

  padding: 20px 26px !important;
  margin-bottom: 18px !important;

  box-shadow: var(--shadow) !important;
}


.brand {
  display: flex;
  align-items: center;
  gap: 16px;
}


.brand-icon {
  width: 48px !important;
  height: 48px !important;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 13px !important;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #60a5fa
    ) !important;

  color: #ffffff !important;

  font-size: 22px !important;
  font-weight: 700 !important;

  box-shadow:
    0 6px 16px
    rgba(37, 99, 235, 0.22) !important;
}


.eyebrow {
  color: #2563eb !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  font-weight: 700 !important;
  margin-bottom: 5px !important;
}


#appTitle {
  margin: 0 !important;

  color: var(--text-main) !important;

  font-size: 27px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}


/* =========================================================
   服务状态按钮
   ========================================================= */

.connection {
  background: #ffffff !important;
  color: var(--text-secondary) !important;

  border: 1px solid var(--border) !important;
  border-radius: 999px !important;

  padding: 9px 14px !important;

  box-shadow: none !important;
}


.connection:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}


.status-dot {
  background: #94a3b8 !important;
}


.status-dot.online {
  background: #22c55e !important;

  box-shadow:
    0 0 0 4px
    rgba(34, 197, 94, 0.12) !important;
}


.status-dot.offline {
  background: #ef4444 !important;
}


/* =========================================================
   模型 / 检测类别说明
   ========================================================= */

.model-summary {
  background: #ffffff !important;

  color: #475467 !important;

  border: 1px solid var(--border) !important;
  border-radius: 14px !important;

  padding: 13px 18px !important;
  margin-bottom: 16px !important;

  font-size: 14px !important;

  box-shadow:
    0 3px 12px
    rgba(15, 23, 42, 0.04) !important;
}


/* =========================================================
   参数控制区域
   ========================================================= */

.controls {
  background: #ffffff !important;

  border: 1px solid var(--border) !important;
  border-radius: 16px !important;

  padding: 18px 20px !important;
  margin-bottom: 18px !important;

  box-shadow: var(--shadow) !important;

  align-items: end !important;
}


.control-field label {
  color: #475467 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}


.control-field label span {
  color: var(--text-light) !important;
}


.control-field input {
  background: #ffffff !important;
  color: var(--text-main) !important;

  border: 1px solid #cfd8e5 !important;
  border-radius: 9px !important;

  outline: none !important;
}


.control-field input:hover {
  border-color: #aab8ca !important;
}


.control-field input:focus {
  border-color: #3b82f6 !important;

  box-shadow:
    0 0 0 3px
    rgba(59, 130, 246, 0.12) !important;
}

.access-field {
  grid-column: 1 / -1;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}

.access-entry {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.access-entry input { flex: 1; min-width: 0; }
.access-entry button { flex: none; white-space: nowrap; }
.access-help, .access-status { margin: 0; font-size: 12px; line-height: 1.6; }
.access-help { color: var(--text-secondary); }
.access-status { color: var(--primary); overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .access-entry { flex-wrap: wrap; }
  .access-entry input { flex-basis: 100%; }
  .access-entry button { flex: 1; }
}


/* =========================================================
   开始检测按钮
   ========================================================= */

.primary-button {
  background:
    linear-gradient(
      135deg,
      #2563eb,
      #3b82f6
    ) !important;

  color: #ffffff !important;

  border: none !important;
  border-radius: 10px !important;

  font-weight: 600 !important;

  box-shadow:
    0 6px 16px
    rgba(37, 99, 235, 0.20) !important;
}


.primary-button:hover:not(:disabled) {
  transform: translateY(-1px);

  box-shadow:
    0 9px 22px
    rgba(37, 99, 235, 0.26) !important;
}


.primary-button:disabled {
  background: #d7dee8 !important;
  color: #8894a5 !important;

  box-shadow: none !important;

  cursor: not-allowed;
}


/* =========================================================
   左右主面板
   ========================================================= */

.panel {
  background: var(--panel-bg) !important;

  color: var(--text-main) !important;

  border: 1px solid var(--border) !important;
  border-radius: 18px !important;

  box-shadow: var(--shadow) !important;
}


.panel:hover {
  box-shadow: var(--shadow-hover) !important;
}


.panel-heading {
  border-bottom-color: var(--border-soft) !important;
}


.panel-heading h3 {
  color: var(--text-main) !important;
}


.section-no {
  color: #2563eb !important;
  background: #eff6ff !important;

  border: 1px solid #dbeafe !important;

  border-radius: 6px !important;
}


/* =========================================================
   图像上传区域
   ========================================================= */

.image-stage {
  background:
    linear-gradient(
      180deg,
      #fbfdff 0%,
      #f7f9fc 100%
    ) !important;

  border: 1px dashed #cbd5e1 !important;
  border-radius: 14px !important;

  color: var(--text-secondary) !important;
}


.image-stage:hover {
  background: #f8fbff !important;
  border-color: #60a5fa !important;
}


.image-stage.dragging {
  background: #eff6ff !important;
  border-color: #2563eb !important;
}


.empty-state h3 {
  color: #334155 !important;
}


.empty-state p,
.empty-state span {
  color: #8490a3 !important;
}


.scope-icon {
  color: #60a5fa !important;
}


/* =========================================================
   图片下方信息
   ========================================================= */

.image-meta {
  color: var(--text-secondary) !important;

  border-top-color:
    var(--border-soft) !important;
}


#imageState {
  color: #2563eb !important;
}


/* =========================================================
   普通按钮
   ========================================================= */

.secondary-button {
  background: #ffffff !important;

  color: #344054 !important;

  border:
    1px solid
    #d0d8e4 !important;

  border-radius: 9px !important;
}


.secondary-button:hover:not(:disabled) {
  background: #f8fafc !important;

  border-color:
    #94a3b8 !important;
}


.secondary-button:disabled {
  color: #a0aaba !important;

  background: #f5f7fa !important;

  border-color: #e3e8ef !important;
}


/* =========================================================
   右侧检测统计
   ========================================================= */

.result-panel {
  background: #ffffff !important;
}


.small-caps {
  color: #94a3b8 !important;
}


.class-counts {
  color: var(--text-main) !important;
}


.class-row {
  background: #f8fafc !important;

  border:
    1px solid
    var(--border-soft) !important;

  border-radius: 10px !important;
}


.class-label {
  color: #334155 !important;
}


.total-row {
  background:
    linear-gradient(
      135deg,
      #eff6ff,
      #f8fbff
    ) !important;

  border:
    1px solid
    #dbeafe !important;

  border-radius: 13px !important;
}


.total-row h4 {
  color: #334155 !important;
}


.total-row p {
  color: #8490a3 !important;
}


#totalCount {
  color: #2563eb !important;
}


.timing-row {
  color: var(--text-secondary) !important;

  border-bottom-color:
    var(--border-soft) !important;
}


.divider {
  background: var(--border-soft) !important;
}


.zoom-heading h4 {
  color: #344054 !important;
}


.zoom-heading span {
  color: #98a2b3 !important;
}


.zoom-placeholder {
  background: #f8fafc !important;

  color: #98a2b3 !important;

  border:
    1px dashed
    #d0d5dd !important;

  border-radius: 10px !important;
}


.zoom-card {
  background: #ffffff !important;

  border:
    1px solid
    var(--border) !important;

  border-radius: 12px !important;

  overflow: hidden;

  box-shadow:
    0 4px 12px
    rgba(15, 23, 42, 0.05) !important;
}


.zoom-caption {
  background: #ffffff !important;
  color: var(--text-main) !important;
}


.count-note {
  background: #f8fafc !important;

  color: #667085 !important;

  border:
    1px solid
    var(--border-soft) !important;

  border-radius: 10px !important;
}


/* =========================================================
   信息提示
   ========================================================= */

.message {
  background: #eff6ff !important;

  color: #1d4ed8 !important;

  border:
    1px solid
    #bfdbfe !important;

  border-radius: 10px !important;
}


.message.error {
  background: #fef2f2 !important;

  color: #b91c1c !important;

  border-color:
    #fecaca !important;
}


/* =========================================================
   详情表格
   ========================================================= */

.details-panel {
  background: #ffffff !important;
}


.details-panel summary {
  color: #344054 !important;
}


.table-wrap {
  border-color:
    var(--border-soft) !important;
}


table {
  background: #ffffff !important;
  color: #344054 !important;
}


thead {
  background: #f8fafc !important;
}


th {
  color: #475467 !important;
  border-bottom-color:
    var(--border) !important;
}


td {
  color: #667085 !important;

  border-bottom-color:
    var(--border-soft) !important;
}


tbody tr:hover {
  background: #f8fbff !important;
}


/* =========================================================
   Processing
   ========================================================= */

.processing {
  background:
    rgba(255, 255, 255, 0.92) !important;

  color: #344054 !important;

  backdrop-filter: blur(5px);
}


.spinner {
  border-color:
    #dbeafe !important;

  border-top-color:
    #2563eb !important;
}


/* =========================================================
   Footer
   ========================================================= */

footer {
  color: #98a2b3 !important;

  border-top-color:
    var(--border-soft) !important;
}


/* =========================================================
   移除深色风格残留
   ========================================================= */

.muted {
  color: #98a2b3 !important;
}


a {
  color: #2563eb;
}


/* =========================================================
   移动端
   ========================================================= */

@media (max-width: 800px) {

  .app-shell {
    padding:
      14px
      14px
      28px;
  }


  .topbar {
    padding:
      16px
      18px !important;
  }


  #appTitle {
    font-size:
      21px !important;
  }


  .brand-icon {
    width:
      42px !important;

    height:
      42px !important;
  }


  .controls {
    padding:
      14px !important;
  }

}
/* ===== 字体大小统一调整 ===== */

body {
  font-size: 16px;
}

/* 顶部标题 */
#appTitle {
  font-size: 30px !important;
}

/* 顶部 YOLO / VISION */
.eyebrow {
  font-size: 12px !important;
}

/* 模型 / 检测类别说明 */
.model-summary {
  font-size: 15px !important;
}

/* 参数名称 */
.control-field label {
  font-size: 14px !important;
}

/* 参数输入框 */
.control-field input {
  font-size: 16px !important;
}

/* 开始检测按钮 */
.primary-button {
  font-size: 16px !important;
}

/* 普通按钮 */
.secondary-button {
  font-size: 14px !important;
}

/* 左右面板标题 */
.panel-heading h3 {
  font-size: 20px !important;
}

/* 图片上传区域文字 */
.empty-state h3 {
  font-size: 19px !important;
}

.empty-state p,
.empty-state span {
  font-size: 14px !important;
}

/* 检测类别名称 */
.class-label {
  font-size: 16px !important;
}

/* 每类检测数量 */
.class-number {
  font-size: 24px !important;
}

/* 总检测目标 */
.total-row h4 {
  font-size: 17px !important;
}

#totalCount {
  font-size: 34px !important;
}

/* 隐藏耗时信息 */
.timing-row {
  display: none !important;
  font-size: 14px !important;
}

/* 局部观察标题 */
.zoom-heading h4 {
  font-size: 17px !important;
}

.zoom-heading span {
  font-size: 13px !important;
}

/* 底部说明 */
.count-note,
footer {
  font-size: 13px !important;
}

/* 详情表格 */
th {
  font-size: 14px !important;
}

td {
  font-size: 14px !important;
}

/* 分类数量占比：实心饼图与图例置于原有数量统计上方。 */
.class-pie-summary {
  padding: 24px 24px 0;
}

.class-pie-summary h4 {
  margin: 0 0 14px;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 400;
}

.class-pie-layout {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.class-pie {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--panel-soft);
  display: grid;
  place-items: center;
}

.class-pie-empty {
  max-width: 80px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.class-pie-legend {
  min-width: 0;
  max-height: 220px;
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
}

.class-pie-legend-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.class-pie-label {
  color: var(--text-main);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.class-pie-percentage {
  color: var(--text-main);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.class-pie-hint {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 1050px) {
  .class-pie-layout {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 12px;
  }
}