:root {
  --bg: #050d18;
  --bg-deep: #030912;
  --panel: rgba(8, 25, 43, 0.82);
  --panel-strong: rgba(9, 29, 50, 0.96);
  --line: rgba(72, 165, 214, 0.28);
  --line-strong: rgba(40, 202, 255, 0.68);
  --cyan: #21cfff;
  --cyan-soft: #65e7ff;
  --aqua: #56eadf;
  --green: #55e6a5;
  --amber: #ffc857;
  --red: #ff6d7d;
  --text: #ecf8ff;
  --muted: #829cb3;
  --muted-2: #526b80;
  --radius: 16px;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--text);
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", sans-serif;
}

button, input, select { font: inherit; }
button { color: inherit; }

body {
  background:
    radial-gradient(circle at 28% 20%, rgba(24, 134, 188, .13), transparent 28%),
    radial-gradient(circle at 82% 82%, rgba(7, 101, 145, .12), transparent 27%),
    linear-gradient(140deg, #020811 0%, #071321 54%, #030a13 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(62, 153, 194, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62, 153, 194, .045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 80%, transparent 100%);
}

.ambient {
  position: fixed;
  width: 34vw;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .12;
  pointer-events: none;
}
.ambient-a { left: -14vw; top: 22vh; background: #0aa9e8; }
.ambient-b { right: -17vw; bottom: -16vh; background: #00d0b8; }

.app-shell {
  position: relative;
  display: grid;
  grid-template-rows: 86px 104px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-width: 1120px;
  isolation: isolate;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  border-bottom: 1px solid rgba(104, 172, 207, .22);
  background: rgba(2, 10, 19, .74);
  backdrop-filter: blur(18px);
  z-index: 20;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 56px;
  color: var(--cyan);
  clip-path: polygon(50% 0, 94% 16%, 88% 76%, 50% 100%, 12% 76%, 6% 16%);
  background: linear-gradient(180deg, rgba(24, 208, 255, .28), rgba(10, 94, 142, .16));
  border: 1px solid var(--cyan);
  filter: drop-shadow(0 0 14px rgba(33, 207, 255, .18));
}
.brand-mark::before {
  content: "";
  position: absolute;
  inset: 4px;
  clip-path: inherit;
  border: 1px solid rgba(95, 231, 255, .72);
}
.brand-mark span { font: 700 28px/1 "Segoe UI"; }

.brand-copy { display: flex; flex-direction: column; gap: 4px; }
.brand-copy strong { font-size: 25px; letter-spacing: .06em; font-weight: 650; }
.brand-copy small { color: #61a9ca; font: 10px/1.2 "Segoe UI"; letter-spacing: .23em; }

.topbar-actions { display: flex; align-items: center; gap: 16px; }
.version { color: var(--cyan-soft); font: 500 17px/1 "Segoe UI"; letter-spacing: .05em; }
.mode-chip, .neutral-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 200, 87, .25);
  border-radius: 999px;
  color: #f3d790;
  background: rgba(255, 187, 52, .07);
  font-size: 12px;
}
.mode-chip i, .neutral-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px rgba(255, 200, 87, .5); }
#systemTime { min-width: 76px; color: #a9c3d4; font: 14px/1 "Consolas", monospace; }
.icon-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(9, 27, 46, .72);
  color: #bceeff;
  cursor: pointer;
  transition: .18s var(--ease);
}
.icon-btn:hover { border-color: var(--cyan); background: rgba(17, 77, 108, .46); box-shadow: 0 0 20px rgba(33, 207, 255, .13); }

.device-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin: 14px 26px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(7, 23, 39, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), var(--shadow);
  overflow: hidden;
}

.device-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px 20px;
  border: 0;
  border-right: 1px solid rgba(77, 146, 181, .18);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: .18s var(--ease);
}
.device-item:last-child { border-right: 0; }
.device-item:hover { background: rgba(32, 163, 212, .07); }
.device-icon {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(41, 200, 255, .6);
  border-radius: 11px;
  color: var(--cyan);
  background: linear-gradient(145deg, rgba(16, 114, 160, .18), rgba(5, 30, 48, .3));
  font: 25px/1 "Segoe UI Symbol";
}
.device-item > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.device-item b { overflow: hidden; font-size: 15px; font-weight: 580; white-space: nowrap; text-overflow: ellipsis; }
.device-item small { display: flex; align-items: center; gap: 7px; overflow: hidden; color: var(--muted); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.state-dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; }
.state-dot.waiting { background: var(--amber); box-shadow: 0 0 8px rgba(255, 200, 87, .4); }
.state-dot.ready { background: var(--green); box-shadow: 0 0 8px rgba(85, 230, 165, .42); }

.view {
  display: none;
  min-height: 0;
  padding: 12px 26px 24px;
  animation: viewIn .32s var(--ease) both;
}
.view.is-active { display: flex; flex-direction: column; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(9, 29, 50, .88), rgba(5, 18, 32, .78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), var(--shadow);
  backdrop-filter: blur(16px);
}

.home-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(500px, 1fr); gap: 18px; min-height: 0; flex: 1; }
.hero-panel { display: flex; min-height: 0; flex-direction: column; overflow: hidden; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 26px 0; }
.eyebrow { display: block; margin-bottom: 7px; color: #38afd8; font: 10px/1.2 "Segoe UI"; letter-spacing: .22em; }
h1, h2, h3, p { margin: 0; }
.panel-heading h1 { font-size: clamp(21px, 1.55vw, 29px); font-weight: 620; letter-spacing: .04em; }

.scope-stage {
  position: relative;
  flex: 1;
  min-height: 300px;
  margin: 4px 22px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 54% 50%, rgba(21, 143, 191, .14), transparent 31%),
    linear-gradient(rgba(25, 118, 157, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 118, 157, .06) 1px, transparent 1px),
    #020914;
  background-size: auto, 44px 44px, 44px 44px;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 93%, transparent 100%);
}
.scope-stage::after {
  content: "";
  position: absolute;
  inset: 18% 8% 12%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 60%, rgba(33, 207, 255, .08) 61%, transparent 63%);
  filter: blur(.2px);
}
.radar-ring { position: absolute; left: 52%; top: 49%; border: 1px solid rgba(33, 207, 255, .25); border-radius: 50%; transform: translate(-50%, -50%); }
.ring-one { width: 33%; aspect-ratio: 1; }
.ring-two { width: 48%; aspect-ratio: 1; border-color: rgba(33, 207, 255, .15); }
.ring-three { width: 63%; aspect-ratio: 1; border-style: dashed; opacity: .45; animation: slowSpin 24s linear infinite; }
@keyframes slowSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.axis-line { position: absolute; z-index: 1; opacity: .16; background: linear-gradient(90deg, transparent, var(--cyan), transparent); }
.axis-x { left: 16%; right: 10%; top: 49%; height: 1px; }
.axis-y { top: 15%; bottom: 12%; left: 52%; width: 1px; background: linear-gradient(transparent, var(--cyan), transparent); }
.scope-product {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(78%, 780px);
  max-height: 94%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .4)) drop-shadow(0 0 18px rgba(41, 190, 234, .13));
}

.hero-meta { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 22px 20px; border: 1px solid rgba(67, 149, 188, .2); border-radius: 12px; background: rgba(3, 14, 26, .65); }
.hero-meta div { display: flex; flex-direction: column; gap: 7px; padding: 13px 16px; border-right: 1px solid rgba(67, 149, 188, .16); }
.hero-meta div:last-child { border-right: 0; }
.hero-meta span { color: var(--muted); font-size: 10px; }
.hero-meta strong { font-size: 12px; font-weight: 550; }

.module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; min-height: 0; }
.module-card {
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid rgba(47, 173, 221, .4);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(13, 47, 77, .84), rgba(7, 24, 42, .86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), var(--shadow);
  cursor: pointer;
  overflow: hidden;
  transition: .24s var(--ease);
}
.module-card::before { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 35%, rgba(50, 205, 255, .16), transparent 48%); transition: .24s; }
.module-card:hover { border-color: var(--cyan); transform: translateY(-3px); box-shadow: 0 20px 55px rgba(0, 0, 0, .36), 0 0 26px rgba(33, 207, 255, .1); }
.module-card:hover::before { opacity: 1; }
.module-card.is-primary { border-color: rgba(42, 210, 255, .85); background: linear-gradient(145deg, rgba(17, 68, 105, .9), rgba(8, 31, 52, .9)); }
.module-number { position: absolute; left: 17px; top: 14px; color: rgba(91, 183, 218, .6); font: 11px/1 "Segoe UI"; letter-spacing: .16em; }
.module-arrow { position: absolute; right: 17px; top: 13px; color: rgba(128, 214, 240, .7); font-size: 16px; transition: .2s; }
.module-card:hover .module-arrow { color: #fff; transform: translate(2px, -2px); }
.module-symbol { position: relative; z-index: 1; display: block; width: 70px; height: 70px; color: var(--cyan); }
.target-symbol { border: 4px solid currentColor; border-radius: 50%; box-shadow: 0 0 18px rgba(33, 207, 255, .15); }
.target-symbol::before, .target-symbol::after { content: ""; position: absolute; background: currentColor; }
.target-symbol::before { left: 50%; top: -12px; width: 3px; height: 94px; transform: translateX(-50%); }
.target-symbol::after { top: 50%; left: -12px; width: 94px; height: 3px; transform: translateY(-50%); }
.screen-symbol { width: 82px; height: 57px; border: 4px solid currentColor; border-radius: 7px; }
.screen-symbol::before { content: ""; position: absolute; left: 20%; right: 20%; bottom: -14px; height: 4px; background: currentColor; box-shadow: 0 8px 0 -1px currentColor; }
.screen-symbol::after { content: ""; position: absolute; left: 16px; right: 16px; top: 24px; height: 3px; background: linear-gradient(135deg, transparent 0 10%, currentColor 11% 24%, transparent 25% 33%, currentColor 34% 53%, transparent 54% 61%, currentColor 62% 81%, transparent 82%); }
.database-symbol { width: 66px; height: 70px; border: 4px solid currentColor; border-radius: 50% / 14%; }
.database-symbol::before, .database-symbol::after { content: ""; position: absolute; left: -4px; right: -4px; height: 22px; border: 4px solid currentColor; border-top: 0; border-radius: 0 0 50% 50%; }
.database-symbol::before { top: 18px; }.database-symbol::after { top: 39px; }
.gear-symbol { display: grid; place-items: center; font: 68px/1 "Segoe UI Symbol"; }
.module-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; text-align: center; }
.module-copy strong { font-size: clamp(17px, 1.4vw, 24px); font-weight: 580; }
.module-copy small { color: var(--muted); font-size: 11px; }

.activity-bar { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 17px; min-height: 74px; }
.activity-bar > div { display: flex; align-items: center; gap: 13px; padding: 12px 20px; border-right: 1px solid rgba(70, 144, 180, .17); }
.activity-bar > div:last-child { border-right: 0; }
.activity-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; color: var(--cyan); background: rgba(16, 84, 119, .14); }
.activity-bar span span { display: flex; flex-direction: column; gap: 5px; }
.activity-bar small { color: var(--muted); font-size: 10px; }
.activity-bar b { font-size: 12px; font-weight: 520; }

.workspace-head { display: flex; align-items: flex-end; justify-content: space-between; min-height: 74px; padding: 0 3px 16px; }
.workspace-head > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.workspace-head .back-link { flex-basis: 100%; margin-bottom: 9px; }
.workspace-head .eyebrow { margin: 0; align-self: center; }
.workspace-head h2 { font-size: 26px; font-weight: 620; }
.back-link { padding: 0; border: 0; color: #76b9d4; background: none; cursor: pointer; font-size: 11px; }
.back-link:hover { color: var(--cyan); }
.sample-summary { display: flex; min-width: 470px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: rgba(7, 24, 41, .62); }
.sample-summary span { display: flex; min-width: 145px; flex-direction: column; gap: 5px; padding: 10px 17px; border-right: 1px solid rgba(74, 150, 186, .18); }
.sample-summary span:last-child { border-right: 0; }
.sample-summary small { color: var(--muted); font-size: 9px; }.sample-summary b { font-size: 12px; font-weight: 550; }

.optical-layout { display: grid; grid-template-columns: 265px minmax(500px, 1fr) 300px; gap: 16px; min-height: 0; flex: 1; }
.test-rail { min-height: 0; padding: 15px 12px; overflow: hidden; }
.rail-title { display: flex; align-items: center; justify-content: space-between; padding: 2px 7px 13px; border-bottom: 1px solid rgba(70, 151, 190, .18); }
.rail-title span { font-size: 13px; font-weight: 600; }.rail-title small { color: #437b95; font-size: 8px; letter-spacing: .15em; }
.test-list { height: calc(100% - 38px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(33, 207, 255, .26) transparent; }
.test-item { display: grid; grid-template-columns: 31px 1fr 8px; align-items: center; gap: 8px; width: 100%; padding: 9px 8px; border: 0; border-bottom: 1px solid rgba(59, 124, 158, .12); background: transparent; text-align: left; cursor: pointer; transition: .16s; }
.test-item:hover { background: rgba(35, 156, 207, .07); }
.test-item.is-active { border-radius: 8px; color: #fff; background: linear-gradient(90deg, rgba(26, 168, 220, .18), rgba(13, 73, 106, .05)); box-shadow: inset 2px 0 var(--cyan); }
.test-item.is-complete .test-state { background: var(--green); }
.test-number { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(62, 164, 205, .28); border-radius: 7px; color: #79bcd5; font: 10px/1 "Segoe UI"; }
.test-item.is-active .test-number { border-color: var(--cyan); color: var(--cyan-soft); }
.test-name { overflow: hidden; font-size: 11px; line-height: 1.45; text-overflow: ellipsis; }
.test-state { width: 6px; height: 6px; border-radius: 50%; background: #425c70; }

.inspection-main { display: flex; min-height: 0; flex-direction: column; padding: 18px; }
.inspection-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.inspection-title > div { display: flex; align-items: center; gap: 12px; }
.inspection-title > div > span { color: var(--cyan); font: 18px/1 "Segoe UI"; }
.inspection-title h3 { font-size: 17px; font-weight: 580; }
.demo-label { padding: 6px 10px; border: 1px solid rgba(255, 200, 87, .26); border-radius: 999px; color: #f0cf78; background: rgba(255, 200, 87, .06); font-size: 10px; }
.inspection-stage { position: relative; flex: 1; min-height: 280px; overflow: hidden; border: 1px solid rgba(52, 148, 190, .25); border-radius: 13px; background: radial-gradient(circle at 50% 48%, rgba(20, 112, 156, .14), transparent 36%), #040f1b; }
.stage-grid, .camera-grid { position: absolute; inset: 0; opacity: .38; background-image: linear-gradient(rgba(45, 138, 179, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(45, 138, 179, .08) 1px, transparent 1px); background-size: 40px 40px; }
.reticle { position: absolute; left: 50%; top: 47%; width: min(42%, 260px); aspect-ratio: 1; border: 1px solid rgba(33, 207, 255, .22); border-radius: 50%; transform: translate(-50%, -50%); }
.reticle::before, .reticle::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(33, 207, 255, .2); transform: translate(-50%, -50%); }.reticle::before { width: 140%; height: 1px; }.reticle::after { width: 1px; height: 140%; }
.reticle i { position: absolute; inset: 20%; border: 1px dashed rgba(33, 207, 255, .18); border-radius: 50%; }.reticle i:last-child { inset: 39%; border-style: solid; }
.stage-product { position: absolute; left: 50%; top: 47%; width: min(74%, 630px); max-height: 88%; object-fit: contain; transform: translate(-50%, -50%); mix-blend-mode: screen; filter: drop-shadow(0 16px 18px rgba(0,0,0,.45)); }
.stage-note { position: absolute; left: 17px; right: 17px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; border: 1px solid rgba(64, 147, 185, .18); border-radius: 9px; background: rgba(3, 14, 25, .76); backdrop-filter: blur(8px); }
.stage-note strong { font-size: 11px; font-weight: 560; }.stage-note small { color: var(--muted); font-size: 9px; text-align: right; }
.inspection-stage.is-running .reticle { animation: scanPulse 1.3s ease-in-out infinite; }
@keyframes scanPulse { 50% { border-color: rgba(33, 207, 255, .75); box-shadow: 0 0 22px rgba(33,207,255,.12); } }
.run-progress { height: 4px; margin: 13px 1px 0; overflow: hidden; border-radius: 99px; background: rgba(64, 123, 153, .16); }
.run-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #17a9dd, #52e9e0); box-shadow: 0 0 12px rgba(33, 207, 255, .36); transition: width .12s linear; }
.action-row { display: flex; justify-content: flex-end; gap: 10px; padding-top: 13px; }
.btn { min-height: 40px; padding: 0 16px; border-radius: 9px; cursor: pointer; transition: .18s var(--ease); }
.btn.primary { border: 1px solid #2bd6ff; color: #eaffff; background: linear-gradient(135deg, #087db1, #0aa4bb); box-shadow: 0 10px 24px rgba(0, 151, 199, .15); }
.btn.primary:hover { filter: brightness(1.14); box-shadow: 0 12px 30px rgba(0, 181, 229, .24); transform: translateY(-1px); }
.btn.secondary { border: 1px solid rgba(49, 175, 221, .42); background: rgba(11, 48, 73, .66); color: #b9eaff; }
.btn.secondary:hover { border-color: var(--cyan); background: rgba(15, 75, 108, .74); }
.btn.ghost { border: 1px solid rgba(94, 135, 158, .22); background: transparent; color: var(--muted); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }

.result-column { display: grid; grid-template-rows: 1.12fr .88fr; gap: 16px; min-height: 0; }
.result-panel, .config-panel { min-height: 0; padding: 16px; }
.result-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.result-heading span { font-size: 13px; font-weight: 600; }.result-heading small { color: #477c94; font: 8px/1 "Segoe UI"; letter-spacing: .13em; }
.demo-warning { margin-bottom: 10px; padding: 8px 9px; border: 1px solid rgba(255, 200, 87, .2); border-radius: 7px; color: #e3c77b; background: rgba(255, 200, 87, .05); font-size: 9px; line-height: 1.45; }
.metric-card { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; margin-top: 9px; padding: 12px; border: 1px solid rgba(47, 138, 179, .2); border-radius: 10px; background: rgba(3, 16, 29, .5); }
.metric-card span { grid-column: 1 / -1; color: var(--muted); font-size: 9px; }.metric-card strong { margin-top: 6px; color: var(--cyan-soft); font: 500 clamp(22px, 2vw, 32px)/1 "Segoe UI"; }.metric-card > small { color: #6d9fb6; font-size: 12px; }
.result-conclusion { display: flex; align-items: center; gap: 11px; margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(82, 132, 158, .18); border-radius: 10px; background: rgba(5, 17, 29, .45); }
.result-conclusion i { width: 9px; height: 9px; border-radius: 50%; background: #526b7d; }.result-conclusion.is-complete i { background: var(--green); box-shadow: 0 0 11px rgba(85,230,165,.5); }
.result-conclusion span { display: flex; flex-direction: column; gap: 3px; }.result-conclusion small { color: var(--muted); font-size: 8px; }.result-conclusion b { font-size: 11px; font-weight: 550; }
.config-panel dl { margin: 0; }.config-panel dl div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 2px; border-bottom: 1px solid rgba(56, 129, 164, .15); }.config-panel dt { color: var(--muted); font-size: 9px; }.config-panel dd { margin: 0; font-size: 9px; text-align: right; }

.imaging-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; min-height: 0; flex: 1; }
.camera-panel { display: flex; min-height: 0; flex-direction: column; padding: 17px; }
.camera-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.camera-toolbar > div:first-child { display: flex; align-items: center; gap: 9px; }.camera-toolbar b { font-size: 13px; }.camera-toolbar small { color: #4b8098; font: 8px/1 "Segoe UI"; letter-spacing: .13em; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px rgba(255,200,87,.45); }
.mini-btn { min-height: 28px; margin-left: 7px; padding: 0 10px; border: 1px solid rgba(52, 151, 193, .25); border-radius: 7px; color: #8ebbd0; background: rgba(7, 29, 46, .7); cursor: pointer; font-size: 9px; }
.camera-stage { position: relative; flex: 1; min-height: 340px; overflow: hidden; border: 1px solid rgba(51, 150, 193, .28); border-radius: 12px; background: #020810; }
.camera-stage.is-demo { background: radial-gradient(circle at 50% 50%, #d7e0e4 0 7%, #111d26 7.4% 8%, #d9e0e3 8.4% 13%, #1d2931 13.5% 14.2%, #d9dfe1 14.6% 21%, #202b32 21.5% 22.5%, #dce1e2 23% 31%, #202a31 31.6% 33%, #dfe3e4 34% 43%, #19242c 44% 47%, #dce1e3 48% 58%, #111a22 59% 65%, #050b11 66%); }
.camera-stage.is-demo::after { content: "演示图像"; position: absolute; right: 12px; top: 12px; padding: 5px 9px; border: 1px solid rgba(255,200,87,.32); border-radius: 999px; color: #f0d17c; background: rgba(9,17,23,.72); font-size: 9px; }
.camera-reticle { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; border: 1px solid rgba(33,207,255,.24); border-radius: 50%; transform: translate(-50%,-50%); }
.camera-reticle::before, .camera-reticle::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(33,207,255,.24); transform: translate(-50%,-50%); }.camera-reticle::before { width: 190px; height: 1px; }.camera-reticle::after { width: 1px; height: 190px; }
.no-signal { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 9px; transform: translate(-50%,-50%); text-align: center; }.no-signal > span { color: #3f8cac; font-size: 42px; }.no-signal strong { font-size: 15px; }.no-signal small { color: var(--muted); font-size: 10px; }
.camera-stage.is-demo .no-signal { display: none; }
.analysis-column { display: grid; grid-template-rows: repeat(4, 1fr); gap: 12px; min-height: 0; }
.analysis-card { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 15px; }
.analysis-card > div { display: flex; align-items: center; gap: 11px; }.analysis-card > div > span:last-child { display: flex; flex-direction: column; gap: 4px; }.analysis-card b { font-size: 12px; }.analysis-card small { color: var(--muted); font-size: 8px; }.analysis-card > strong { color: var(--cyan-soft); font: 500 21px/1 "Segoe UI"; }.analysis-card > small { grid-column: 1/-1; margin: 7px 0 0 45px; }
.analysis-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(33,207,255,.32); border-radius: 8px; color: var(--cyan); background: rgba(15,87,122,.14); }

.head-actions { display: flex; gap: 9px; }
.record-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 15px; }
.kpi { display: flex; min-height: 94px; flex-direction: column; justify-content: center; gap: 5px; padding: 15px 18px; }.kpi span { color: var(--muted); font-size: 10px; }.kpi strong { color: #dff8ff; font: 550 24px/1.15 "Segoe UI"; }.kpi small { color: #567d91; font-size: 8px; }
.table-panel { min-height: 0; flex: 1; padding: 18px; overflow: hidden; }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 15px; }.table-toolbar h3 { font-size: 16px; }.search-box { display: flex; align-items: center; width: 300px; height: 38px; padding: 0 12px; border: 1px solid rgba(59,150,192,.26); border-radius: 9px; background: rgba(4,18,31,.56); }.search-box span { color: var(--cyan); }.search-box input { width: 100%; padding-left: 9px; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 10px; }
.record-table { border: 1px solid rgba(58,139,178,.17); border-radius: 11px; overflow: hidden; }.table-row { display: grid; grid-template-columns: 1fr 1.2fr 1.1fr 1.15fr .9fr 1.1fr 64px; align-items: center; min-height: 50px; padding: 0 14px; border-bottom: 1px solid rgba(54,128,163,.13); font-size: 10px; }.table-head { min-height: 38px; color: #6d97aa; background: rgba(15,53,77,.34); font-size: 8px; letter-spacing: .04em; }.row-btn { min-height: 28px; padding: 0 10px; border: 1px solid rgba(41,181,227,.34); border-radius: 7px; color: #9de8ff; background: rgba(15,80,111,.22); cursor:pointer; font-size: 9px; }.empty-table { display:flex; min-height: 190px; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--muted); }.empty-table > span { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(49,155,198,.25); border-radius:50%; color:#4297b9; font-size:22px; }.empty-table strong { color:#a8bfcb; font-size:11px; font-weight:520; }.empty-table small { font-size:9px; }
.tag { display: inline-flex; min-height: 23px; align-items: center; padding: 0 8px; border-radius: 99px; font-style: normal; font-size: 8px; }.tag.demo { color:#e9ca79; border:1px solid rgba(255,200,87,.25); background:rgba(255,200,87,.06); }.tag.offline { color:#dfad72; border:1px solid rgba(255,170,87,.22); background:rgba(255,170,87,.05); }.tag.ready-tag { color:#7ce7b3; border:1px solid rgba(85,230,165,.22); background:rgba(85,230,165,.05); }

.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, minmax(0,1fr)); gap: 15px; min-height:0; flex:1; }.settings-card { display:grid; grid-template-columns: repeat(2, 1fr); align-content:start; gap:13px 15px; padding:19px; }.settings-title { grid-column:1/-1; display:flex; align-items:center; gap:11px; padding-bottom:11px; border-bottom:1px solid rgba(63,139,176,.17); }.settings-title > span:nth-child(2) { display:flex; flex:1; flex-direction:column; gap:4px; }.settings-title b { font-size:13px; }.settings-title small { color:#4f8299; font:8px/1 "Segoe UI"; letter-spacing:.12em; }.settings-icon { display:grid; place-items:center; width:36px; height:36px; border:1px solid rgba(33,207,255,.3); border-radius:9px; color:var(--cyan); background:rgba(14,80,112,.15); }.settings-card label { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:9px; }.settings-card input,.settings-card select { width:100%; height:36px; padding:0 10px; border:1px solid rgba(53,140,181,.22); border-radius:8px; outline:0; color:#c8e5f0; background:#071b2c; font-size:10px; }.settings-card .btn { width:max-content; }

.toast { position:fixed; z-index:100; left:50%; bottom:30px; display:flex; align-items:center; gap:10px; min-width:300px; padding:13px 17px; border:1px solid rgba(49,197,234,.45); border-radius:11px; color:#dffaff; background:rgba(4,24,38,.93); box-shadow:0 20px 55px rgba(0,0,0,.45),0 0 24px rgba(33,207,255,.1); opacity:0; transform:translate(-50%,18px); pointer-events:none; transition:.25s var(--ease); }.toast.is-visible { opacity:1; transform:translate(-50%,0); }.toast span { color:var(--green); }.toast b { font-size:11px; font-weight:520; }

@media (max-height: 850px) {
  .app-shell { grid-template-rows: 76px 90px minmax(0,1fr); }
  .topbar { padding:0 24px; }.brand-mark { width:42px;height:48px; }.brand-copy strong { font-size:22px; }
  .device-strip { margin:10px 22px; }.device-item { padding:10px 16px; }.device-icon { width:41px;height:41px;flex-basis:41px; }
  .view { padding:8px 22px 18px; }.activity-bar { min-height:64px;margin-top:12px; }
  .workspace-head { min-height:60px;padding-bottom:10px; }.workspace-head h2 { font-size:22px; }
  .test-item { padding:7px 8px; }.inspection-main { padding:14px; }.analysis-column { gap:9px; }
}

@media (max-width: 1380px) {
  .app-shell { min-width:1060px; }.brand-copy strong { font-size:21px; }.brand-copy small { display:none; }
  .device-item { padding-left:14px;padding-right:14px;gap:10px; }.device-icon { width:40px;height:40px;flex-basis:40px;font-size:21px; }
  .home-grid { grid-template-columns:minmax(0,1.3fr) minmax(430px,1fr); }.optical-layout { grid-template-columns:235px minmax(450px,1fr) 270px;gap:12px; }
  .sample-summary { min-width:420px; }.sample-summary span { min-width:130px; }.record-kpis { gap:10px; }
}

/* Automation workflow layer */
.mode-chip { cursor: pointer; transition: .18s var(--ease); }
.mode-chip:hover { border-color: rgba(255, 200, 87, .55); background: rgba(255, 187, 52, .12); }
.workspace-summary-actions { display: flex; align-items: stretch; gap: 9px; }
.workspace-summary-actions .sample-summary { min-width: 440px; }
.task-edit-btn { align-self: stretch; margin: 0; white-space: nowrap; }

.activity-bar > .activity-action {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 20px;
  border: 0;
  border-right: 1px solid rgba(70, 144, 180, .17);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: .18s var(--ease);
}
.activity-bar > .activity-action:last-child { border-right: 0; }
.activity-action:hover { background: rgba(24, 135, 184, .08); }
.activity-action > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 5px; }
.activity-action > i { color: #4b91ad; font-style: normal; transition: transform .18s var(--ease); }
.activity-action:hover > i { color: var(--cyan); transform: translateX(3px); }

.workflow-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  margin: -2px 0 11px;
}
.workflow-steps span {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  min-height: 31px;
  padding: 0 8px;
  border: 1px solid rgba(64, 134, 167, .15);
  border-radius: 7px;
  color: #66879a;
  background: rgba(3, 14, 24, .35);
  font-size: 8px;
  white-space: nowrap;
}
.workflow-steps span::after { content: ""; position: absolute; z-index: 2; right: -7px; width: 8px; height: 1px; background: rgba(62, 138, 174, .28); }
.workflow-steps span:last-child::after { display: none; }
.workflow-steps i { display: grid; flex: 0 0 16px; width: 16px; height: 16px; place-items: center; border: 1px solid rgba(76, 137, 165, .3); border-radius: 50%; font-style: normal; font-size: 7px; }
.workflow-steps span.is-active { border-color: rgba(33, 207, 255, .42); color: #bceeff; background: rgba(18, 110, 149, .15); }
.workflow-steps span.is-active i { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 9px rgba(33, 207, 255, .18); }
.workflow-steps span.is-complete { color: #76cda6; }
.workflow-steps span.is-complete i { border-color: var(--green); color: #062017; background: var(--green); }
.quality-note { margin-top: 9px; padding: 8px 10px; border-radius: 7px; color: #7396a8; background: rgba(5, 18, 30, .5); font-size: 8px; line-height: 1.5; }
.quality-note.is-ready { color: #80d8b1; background: rgba(45, 174, 116, .07); }

#recordRows:empty { display: none; }
.trace-panel { display: grid; grid-template-columns: 180px 1fr; min-height: 180px; padding: 19px 16px; }
.trace-panel > div { display: flex; flex-direction: column; gap: 5px; }
.trace-panel > div span { font-size: 12px; font-weight: 600; }
.trace-panel > div small { color: #4c7d94; font: 8px/1 "Segoe UI"; letter-spacing: .12em; }
.trace-panel ol { display: grid; max-height: 150px; margin: 0; padding: 0 0 0 20px; overflow-y: auto; list-style: none; }
.trace-panel li { position: relative; display: flex; gap: 10px; min-height: 45px; padding-bottom: 9px; }
.trace-panel li::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: -2px; width: 1px; background: rgba(55, 146, 185, .22); }
.trace-panel li:last-child::before { display: none; }
.trace-panel li > i { position: relative; z-index: 1; flex: 0 0 9px; width: 9px; height: 9px; margin-top: 3px; border-radius: 50%; background: #347d9c; box-shadow: 0 0 0 4px #071a2b; }
.trace-panel li > span { display: flex; flex-direction: column; gap: 4px; }
.trace-panel li b { font-size: 9px; font-weight: 520; }
.trace-panel li small { color: var(--muted); font-size: 8px; }

.modal-layer {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 7, 14, .74);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: .22s var(--ease);
}
.modal-layer.is-open { opacity: 1; pointer-events: auto; }
.modal-card {
  width: min(720px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  padding: 22px;
  overflow-y: auto;
  border: 1px solid rgba(54, 188, 235, .45);
  border-radius: 16px;
  background: linear-gradient(145deg, #0a2238, #06131f 72%);
  box-shadow: 0 34px 100px rgba(0,0,0,.65), inset 0 1px rgba(255,255,255,.04);
  transform: translateY(14px) scale(.985);
  transition: .22s var(--ease);
}
.modal-layer.is-open .modal-card { transform: none; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid rgba(63, 151, 190, .2); }
.modal-head h3 { font-size: 20px; font-weight: 610; }
.modal-close { width: 34px; height: 34px; border: 1px solid rgba(79, 148, 179, .24); border-radius: 8px; color: #8db5c7; background: rgba(2, 15, 25, .45); cursor: pointer; font-size: 21px; }
.modal-intro { margin: 14px 0; color: #8aa6b6; font-size: 10px; line-height: 1.7; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }

.mode-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; margin-top: 17px; }
.mode-option { position: relative; min-height: 180px; padding: 18px; border: 1px solid rgba(64, 140, 175, .22); border-radius: 12px; background: rgba(4, 18, 30, .52); }
.mode-option.is-selected { border-color: rgba(255, 200, 87, .35); background: linear-gradient(145deg, rgba(255,200,87,.07), rgba(4,18,30,.5)); }
.mode-option.is-locked { opacity: .7; }
.mode-option > span { color: #5f879a; font-size: 8px; letter-spacing: .1em; }
.mode-option h4 { margin: 10px 0 8px; font-size: 15px; }
.mode-option p { min-height: 60px; margin: 0 0 14px; color: #8ca4b2; font-size: 9px; line-height: 1.7; }
.mode-gate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 13px; padding: 13px; border-radius: 10px; background: rgba(3, 15, 25, .5); }
.mode-gate b { margin-right: 4px; font-size: 10px; }
.mode-gate span { padding: 5px 8px; border: 1px solid rgba(255, 171, 84, .18); border-radius: 99px; color: #b99873; font-size: 8px; }

.check-progress { height: 4px; margin-bottom: 14px; overflow: hidden; border-radius: 99px; background: rgba(72, 132, 158, .17); }
.check-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #179ed2, #55e6a5); transition: width .28s var(--ease); }
.check-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.check-item { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 9px; min-height: 54px; padding: 8px 10px; border: 1px solid rgba(56, 133, 167, .18); border-radius: 9px; background: rgba(4, 18, 29, .5); }
.check-item > i { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(67, 139, 170, .26); border-radius: 7px; color: #6495aa; font-style: normal; }
.check-item span { display: flex; flex-direction: column; gap: 3px; }.check-item b { font-size: 9px; font-weight: 550; }.check-item small { color: #698b9c; font-size: 8px; }
.check-item em { color: #68899a; font-style: normal; font-size: 8px; }
.check-item.is-ready > i { border-color: rgba(85,230,165,.38); color: var(--green); }.check-item.is-ready em { color: var(--green); }
.check-item.is-waiting > i { border-color: rgba(255,200,87,.3); color: var(--amber); }.check-item.is-waiting em { color: #d9b767; }
.check-item.is-running > i { color: var(--cyan); animation: scanPulse 1s infinite; }
.check-summary { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 12px 13px; border: 1px solid rgba(52, 143, 182, .2); border-radius: 9px; background: rgba(5, 20, 32, .58); }
.check-summary span { color: #6e91a2; font-size: 9px; }.check-summary b { font-size: 10px; font-weight: 550; }

.task-notice, .report-banner { margin: 14px 0; padding: 10px 12px; border: 1px solid rgba(255,200,87,.22); border-radius: 8px; color: #dfc377; background: rgba(255,200,87,.05); font-size: 9px; }
.task-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.task-form label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 9px; }
.task-form input { width: 100%; height: 38px; padding: 0 11px; border: 1px solid rgba(58, 148, 188, .25); border-radius: 8px; outline: none; color: #d8eff7; background: #061a2a; }
.task-form input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(33,207,255,.07); }
.form-wide { grid-column: 1 / -1; }
.task-id { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-radius: 9px; background: rgba(8, 46, 67, .45); }
.task-id span { color: var(--muted); font-size: 9px; }.task-id b { color: var(--cyan-soft); font: 500 12px/1 "Consolas", monospace; }
.task-form .modal-actions { margin-top: 2px; }

.report-modal { width: min(780px, calc(100vw - 48px)); }
.report-meta { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(59, 139, 176, .2); border-radius: 10px; overflow: hidden; }
.report-meta div { display: flex; min-height: 65px; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 13px; border-right: 1px solid rgba(59,139,176,.15); border-bottom: 1px solid rgba(59,139,176,.15); }
.report-meta div:nth-child(3n) { border-right: 0; }.report-meta div:nth-last-child(-n+3) { border-bottom: 0; }
.report-meta span { color: var(--muted); font-size: 8px; }.report-meta b { font-size: 10px; font-weight: 550; }
.report-sections { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 13px; }
.report-sections span { padding: 12px; border: 1px solid rgba(57, 144, 182, .17); border-radius: 8px; color: #84a4b4; background: rgba(4, 17, 28, .45); font-size: 9px; text-align: center; }
.report-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding: 11px 13px; border-radius: 8px; background: rgba(2, 12, 20, .48); }
.report-foot span { color: #7896a5; font-size: 8px; }.report-foot b { color: #d3b664; font: 9px/1 "Segoe UI"; letter-spacing: .12em; }

@media (max-height: 850px) {
  .workflow-steps span { min-height: 27px; padding: 0 6px; }
  .trace-panel { min-height: 140px; }
  .modal-card { padding: 18px; }
}

@media (max-width: 1380px) {
  .workspace-summary-actions .sample-summary { min-width: 380px; }
  .task-edit-btn { display: none; }
  .workflow-steps span { padding: 0 5px; font-size: 7px; }
  .workflow-steps i { display: none; }
}

/* Spark visual polish for现场演示 (only presentation layer) */
:root {
  --spark-font: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", sans-serif;
  --spark-base: 15px;
  --spark-small: 10px;
  --spark-caption: 9px;
  --spark-control: 39px;
}

html,
body {
  font-size: var(--spark-base);
  line-height: 1.45;
  font-family: var(--spark-font);
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: var(--spark-base);
}

h1, h2, h3, h4, h5, b, strong, span, small, p, label, div, button, input, select {
  word-break: break-word;
}

.topbar-actions { gap: 12px; }
.topbar-actions .version { font-size: 13px; }

.mode-chip,
.neutral-badge {
  min-height: 32px;
  padding: 0 11px;
  font-size: 11px;
}

#systemTime { min-width: 76px; font-size: 13px; font-family: "Consolas", monospace; }

.device-strip {
  margin: 10px 18px 10px;
}

.device-item { min-height: 66px; }
.device-item b { font-size: 14px; }
.device-item small { font-size: 11px; }

.view { padding: 10px 18px 18px; }

.panel-heading { padding: 16px 18px 0; }
.panel-heading h1 { font-size: clamp(24px, 1.8vw, 30px); }

.hero-meta span,
.result-heading small,
.activity-bar small,
.camera-toolbar small,
.sample-summary small,
.trace-panel > div small,
.task-notice,
.report-foot span,
.quality-note small,
.check-summary span,
.settings-title small,
.table-row,
.trace-panel li small,
.mode-gate b,
.mode-gate span {
  font-size: var(--spark-caption);
}

.hero-meta strong,
.scope-product,
.module-copy strong,
.activity-bar b,
.workspace-head h2,
.sample-summary b,
.result-heading span,
.inspection-title h3,
.test-item,
.metric-card strong,
.analysis-card b,
.kpi strong,
.table-toolbar h3,
.camera-toolbar b,
.trace-panel > div span,
.settings-title b,
.mode-option h4,
.mode-option p,
.check-item b,
.task-form label,
.task-form input,
.task-id b,
.report-meta b,
.table-row span,
.table-row b,
.check-summary b {
  font-size: inherit;
}

.hero-meta strong { font-size: 13px; }
.module-copy strong { font-size: clamp(16px, 1.4vw, 22px); }
.activity-bar > div,
.activity-action > span:nth-child(2),
.activity-action b { font-size: 13px; }

.activity-bar > div,
.activity-action,
.activity-action small,
.activity-action b {
  overflow: hidden;
}

.activity-action > span:nth-child(2),
.activity-action b,
.activity-action small {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.workspace-head { min-height: 72px; padding-bottom: 10px; }
.workspace-head .back-link { font-size: 11px; }
.sample-summary { min-width: 320px; }
.sample-summary span { padding: 9px 13px; min-width: auto; }

.workspace-summary-actions .sample-summary { min-width: 360px; }

.optical-layout,
.imaging-layout,
.settings-grid,
.home-grid,
.record-kpis,
.table-toolbar,
.analysis-column,
.inspection-main,
.result-column,
.camera-panel {
  gap: 12px;
}

.inspection-title h3 { font-size: 16px; }

.workflow-steps span { font-size: 9px; min-height: 29px; }

.inspection-stage { min-height: 260px; }

.run-progress { margin-top: 10px; }

.btn,
.mini-btn,
.row-btn {
  min-height: var(--spark-control);
  border-radius: 10px;
  font-size: 13px;
}

.btn.ghost { padding: 0 15px; }
.btn.primary { background: linear-gradient(135deg, #087db1, #11afc6); }

.metric-card { padding: 11px 12px; }
.metric-card span { font-size: 10px; }
.metric-card strong { font-size: clamp(21px, 2vw, 30px); }

.result-conclusion span { gap: 2px; }

.config-panel dt,
.config-panel dd { font-size: 10px; }

.analysis-card { padding: 14px; gap: 10px; }
.analysis-card b { font-size: 13px; }
.analysis-card small { font-size: 10px; }

.record-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi strong { font-size: 23px; }

.search-box { width: min(300px, 40vw); }
.search-box input { font-size: 11px; }

.table-row { font-size: 11px; grid-template-columns: 1.2fr 1.3fr 1.1fr 1.2fr .9fr 1.2fr 60px; }
.table-head { font-size: 9px; }
.row-btn { min-height: 30px; font-size: 10px; }

.tag { font-size: 9px; padding: 0 8px; border-radius: 999px; }

.settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-title > span:nth-child(2) { gap: 3px; }
.settings-title b { font-size: 14px; }
.settings-title small { font-size: var(--spark-caption); letter-spacing: .1em; }
.settings-card label { font-size: 11px; }
.settings-card input,
.settings-card select,
.settings-card .btn { font-size: 11px; }

.mode-option p { font-size: 10px; }
.mode-option h4 { font-size: 16px; }
.mode-gate span { font-size: 9px; }

.task-notice,
.report-banner { font-size: 10px; }

.modal-head h3 { font-size: 20px; }
.modal-card { width: min(760px, calc(100vw - 38px)); max-height: calc(100vh - 38px); }

.modal-layer { z-index: 1200; }
.toast { z-index: 1300; min-width: 320px; }
.toast b { font-size: 12px; }

@media (max-height: 850px) {
  :root { --spark-base: 14px; --spark-small: 10px; --spark-caption: 9px; --spark-control: 36px; }
  .device-strip { margin-top: 8px; }
  .workspace-head { min-height: 62px; }
}

@media (min-width: 1900px) and (min-height: 1040px) {
  :root { --spark-base: 16px; --spark-small: 11px; --spark-caption: 10px; --spark-control: 42px; }
  .topbar { padding-left: 30px; padding-right: 30px; }
  .view { padding-left: 24px; padding-right: 24px; }
  .panel-heading { padding-left: 22px; padding-right: 22px; }
  .scope-stage,
  .hero-meta,
  .home-grid,
  .optical-layout,
  .imaging-layout,
  .settings-grid,
  .record-kpis,
  .table-toolbar,
  .trace-panel { margin-bottom: 0; }
}

/* Strong-model automation layer: deliberately compact so Spark's visual balance stays intact. */
.automation-center-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-color: rgba(33, 207, 255, .42);
  color: #bcefff;
  background: rgba(10, 83, 119, .2);
}

.automation-center-btn > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(33, 207, 255, .7);
}

.automation-center-btn > b {
  min-width: 35px;
  padding-left: 7px;
  border-left: 1px solid rgba(75, 166, 204, .25);
  color: var(--cyan-soft);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.automation-center-btn.is-running > i { animation: pulse 1.1s infinite; }

.automation-modal { width: min(880px, calc(100vw - 38px)); }

.orchestrator-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.orchestrator-status article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(59, 151, 194, .22);
  border-radius: 12px;
  background: rgba(4, 21, 35, .66);
}

.orchestrator-status span,
.batch-overview span { color: var(--muted); font-size: 10px; }
.orchestrator-status b { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.orchestrator-status small { overflow: hidden; color: #6f8ca3; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.status-dot { width: 7px; height: 7px; border-radius: 50%; }
.status-dot.ready { background: var(--green); box-shadow: 0 0 8px rgba(85, 230, 165, .55); }
.status-dot.demo { background: var(--amber); box-shadow: 0 0 8px rgba(255, 200, 87, .48); }
.status-dot.waiting { border: 1px solid #6c879b; background: transparent; }

.batch-overview {
  display: grid;
  grid-template-columns: 1fr 1.8fr .8fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(59, 151, 194, .22);
  border-radius: 12px;
  background: rgba(65, 145, 180, .15);
}

.batch-overview > div { display: grid; gap: 5px; padding: 12px 14px; background: rgba(4, 20, 34, .92); }
.batch-overview b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.batch-progress { height: 6px; margin: 13px 0; overflow: hidden; border-radius: 999px; background: rgba(47, 105, 132, .24); }
.batch-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0d84b8, var(--cyan), var(--green)); box-shadow: 0 0 16px rgba(33, 207, 255, .4); transition: width .28s var(--ease); }

.batch-policy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.batch-policy span { padding: 8px 9px; border: 1px solid rgba(63, 137, 170, .18); border-radius: 9px; color: #82a8bd; background: rgba(7, 29, 46, .58); font-size: 9px; text-align: center; }

@media (max-width: 1380px) {
  .automation-center-btn { padding-left: 10px; padding-right: 10px; }
  .automation-center-btn > span { display: none; }
  .orchestrator-status article { padding: 11px; }
}

@media (max-width: 820px) {
  .orchestrator-status,
  .batch-policy { grid-template-columns: 1fr 1fr; }
  .batch-overview { grid-template-columns: 1fr; }
}