:root {
  color-scheme: dark;
  --bg: #07080b;
  --surface: #11151d;
  --surface-soft: #0a0d12;
  --ink: #f3f6fa;
  --muted: #a3abb8;
  --dim: #788291;
  --cyan: #34c9ed;
  --violet: #7958ff;
  --success: #73d49b;
  --warning: #e7bb67;
  --danger: #ef777d;
  --radius-sm: 8px;
  --radius-md: 13px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --font-sans: Inter, "SF Pro Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  --shadow-low: 0 12px 28px rgba(0, 0, 0, 0.3);
  --shadow-high: 0 28px 72px rgba(0, 0, 0, 0.54);
  --focus: 0 0 0 3px rgba(52, 201, 237, 0.42), 0 0 0 6px rgba(121, 88, 255, 0.2);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  min-width: 320px;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background: radial-gradient(circle at 50% -20%, rgba(121, 88, 255, 0.1), transparent 38rem), var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.5;
}

button, input { font: inherit; }
button:not(:disabled), [role="button"]:not([aria-disabled="true"]) { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.48; }
button, a, [role="button"] { -webkit-tap-highlight-color: transparent; }
:focus { outline: none; }
:focus-visible { box-shadow: var(--focus) !important; outline: none; }
.hidden { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 8, 11, 0.18), rgba(7, 8, 11, 0.74)), url("/assets/nullprint-ambient.webp") center / cover no-repeat;
  opacity: 0.68;
}

.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 33%, transparent 0, rgba(7, 8, 11, 0.12) 30rem, rgba(7, 8, 11, 0.44) 70rem),
    linear-gradient(90deg, rgba(7, 8, 11, 0.35), transparent 34%, transparent 66%, rgba(7, 8, 11, 0.35));
}

#app { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; }

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(18px, 4vw, 56px);
  padding-top: calc(14px + env(safe-area-inset-top));
  padding-right: max(clamp(18px, 4vw, 56px), env(safe-area-inset-right));
  padding-left: max(clamp(18px, 4vw, 56px), env(safe-area-inset-left));
  background: rgba(7, 8, 11, 0.76);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
}

.brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}

.brand img {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.48));
}

.brand-copy { display: grid; min-width: 0; gap: 1px; }
.brand-word { font-size: 0.95rem; font-weight: 800; letter-spacing: 0.2em; line-height: 1.15; }
.brand-kicker { color: var(--dim); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; white-space: nowrap; }

.header-actions, .batch-actions, .dialog-actions, .actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.engine-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  white-space: nowrap;
}

.engine-state i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--dim);
  box-shadow: 0 0 0 5px rgba(113, 123, 138, 0.1);
}

.engine-state.ready { color: #abd9bd; }
.engine-state.ready i { background: var(--success); box-shadow: 0 0 0 5px rgba(115, 212, 155, 0.1), 0 0 16px rgba(115, 212, 155, 0.3); }
.engine-state.failed { color: #e6a1a5; }
.engine-state.failed i { background: var(--danger); box-shadow: 0 0 0 5px rgba(239, 119, 125, 0.1); }

.button {
  appearance: none;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 18px;
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: 0.075em;
  line-height: 1;
  text-transform: uppercase;
  transition: transform 160ms var(--ease), filter 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease);
}

.button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.button:active:not(:disabled) { transform: translateY(0) scale(0.985); }
.button.primary {
  background: linear-gradient(135deg, #f7fbff, #dce6f2);
  color: #090b10;
  box-shadow: inset 0 -4px 10px rgba(33, 42, 54, 0.15), 0 10px 28px rgba(0, 0, 0, 0.36), 0 0 22px rgba(52, 201, 237, 0.08);
}
.button.quiet {
  background: linear-gradient(180deg, #1c222e, #11151d);
  color: #d6dce5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -5px 12px rgba(0, 0, 0, 0.28), 0 8px 20px rgba(0, 0, 0, 0.26);
}
.button.danger {
  background: linear-gradient(180deg, #6b3038, #442029);
  color: #ffe8e9;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -5px 12px rgba(0, 0, 0, 0.3), 0 8px 22px rgba(0, 0, 0, 0.3);
}
.button.compact { min-height: 40px; padding-inline: 14px; font-size: 0.7rem; }

main { width: 100%; }

.landing-view {
  display: grid;
  width: min(100%, 920px);
  min-height: calc(100vh - 76px);
  min-height: calc(100dvh - 76px);
  align-content: center;
  gap: 22px;
  margin: 0 auto;
  padding: clamp(40px, 7vh, 76px) clamp(18px, 4vw, 34px) 44px;
}

.landing-lockup { display: grid; justify-items: center; text-align: center; }
.landing-mark {
  width: clamp(100px, 15vw, 148px);
  height: clamp(100px, 15vw, 148px);
  margin-bottom: 14px;
  object-fit: contain;
  filter: drop-shadow(0 22px 36px rgba(0, 0, 0, 0.52));
}

.eyebrow, .control-label {
  margin: 0;
  color: #9aa8bb;
  font-size: 0.67rem;
  font-weight: 780;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.landing-lockup h1 {
  margin: 10px 0 15px;
  font-size: clamp(2.35rem, 7vw, 5.35rem);
  font-weight: 770;
  letter-spacing: -0.055em;
  line-height: 0.96;
  text-wrap: balance;
}

.landing-lockup h1 span {
  background: linear-gradient(100deg, #fbfdff 10%, #cfd8e6 51%, #b7aaff 93%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.landing-copy {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.94rem, 1.9vw, 1.06rem);
  line-height: 1.65;
  text-wrap: balance;
}

.mode-control {
  display: flex;
  width: min(100%, 760px);
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 2px auto 0;
  padding: 10px 10px 10px 17px;
  border-radius: var(--radius-md);
  background: rgba(17, 21, 29, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -8px 18px rgba(0, 0, 0, 0.24), var(--shadow-low);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.mode-control > div:first-child { display: grid; min-width: 0; gap: 2px; }
.control-value { color: var(--muted); font-size: 0.79rem; }
.segmented {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  padding: 5px;
  border-radius: 10px;
  background: #090b10;
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, 0.52);
}

.segment {
  appearance: none;
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  padding: 0 14px;
  background: transparent;
  color: var(--dim);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: background 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.segment:hover { color: var(--ink); }
.segment.active {
  background: linear-gradient(180deg, #242c3a, #171c26);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 5px 14px rgba(0, 0, 0, 0.34);
}

.dropzone {
  position: relative;
  isolation: isolate;
  display: grid;
  width: min(100%, 760px);
  min-height: 268px;
  place-items: center;
  align-content: center;
  gap: 5px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: radial-gradient(circle at 50% 0, rgba(52, 201, 237, 0.08), transparent 38%), linear-gradient(150deg, rgba(24, 30, 41, 0.96), rgba(10, 13, 18, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -18px 34px rgba(0, 0, 0, 0.3), var(--shadow-high);
  text-align: center;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), filter 220ms var(--ease);
}

.dropzone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 15%, rgba(121, 88, 255, 0.08) 45%, transparent 70%), radial-gradient(circle at 88% 85%, rgba(52, 201, 237, 0.09), transparent 30%);
  opacity: 0.78;
}

.dropzone:hover, .dropzone.dragover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -18px 34px rgba(0, 0, 0, 0.28), 0 34px 78px rgba(0, 0, 0, 0.6), 0 0 36px rgba(82, 115, 255, 0.1);
}

.drop-icon {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  margin-bottom: 8px;
  border-radius: 17px;
  background: linear-gradient(145deg, #2b3444, #151a23);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -8px 15px rgba(0, 0, 0, 0.25), 0 13px 26px rgba(0, 0, 0, 0.35);
}

.drop-icon svg { width: 29px; fill: none; stroke: #e5edf7; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dropzone h2 { margin: 0; font-size: clamp(1.32rem, 3vw, 1.7rem); letter-spacing: -0.02em; }
.dropzone > p { margin: 0; color: var(--muted); }
.format-line {
  max-width: calc(100% - 40px);
  margin-top: 17px;
  overflow: hidden;
  color: #9ba7b8;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.07em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drop-note { color: var(--dim); font-size: 0.72rem; }

.pipeline-strip {
  display: grid;
  width: min(100%, 760px);
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.pipeline-strip li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(10, 13, 18, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--dim);
  font-size: 0.68rem;
  font-weight: 680;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pipeline-strip b { color: #b7c1cf; font-family: var(--font-mono); font-size: 0.63rem; }

.workspace-view {
  width: min(100%, 1480px);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 52px) clamp(16px, 3vw, 46px) 54px;
  padding-bottom: calc(54px + env(safe-area-inset-bottom));
}

.batch-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.batch-bar h1 { margin: 5px 0 0; font-size: clamp(2rem, 4.8vw, 3.6rem); letter-spacing: -0.045em; line-height: 1; }
.batch-bar h1 span {
  display: inline-grid;
  min-width: 34px;
  min-height: 34px;
  place-items: center;
  margin-left: 8px;
  border-radius: 9px;
  background: linear-gradient(145deg, #262e3c, #151a22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 9px 22px rgba(0, 0, 0, 0.34);
  color: #dce5f1;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0;
  vertical-align: 0.38em;
}

.workspace-grid { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 18px; align-items: start; }
.queue-panel, .result-panel {
  border-radius: var(--radius-lg);
  background: rgba(13, 16, 22, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 -16px 30px rgba(0, 0, 0, 0.22), var(--shadow-high);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.queue-panel { position: sticky; top: 96px; max-height: calc(100dvh - 120px); overflow: hidden; }
.queue-summary { min-height: 46px; padding: 15px 17px 12px; color: var(--dim); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.035em; }
.queue-list {
  display: grid;
  max-height: calc(100dvh - 175px);
  gap: 7px;
  margin: 0;
  padding: 0 10px 12px;
  overflow: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-color: #343b49 transparent;
  scrollbar-width: thin;
}

.queue-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: stretch;
  overflow: hidden;
  border-radius: 10px;
  background: #0a0d12;
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, 0.32);
  transition: background 160ms var(--ease), box-shadow 160ms var(--ease);
}
.queue-row.selected { background: linear-gradient(145deg, #1c2330, #10141b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 8px 20px rgba(0, 0, 0, 0.24); }
.queue-select, .queue-remove { appearance: none; border: 0; background: transparent; color: inherit; }
.queue-select { min-width: 0; min-height: 72px; padding: 12px 7px 12px 13px; text-align: left; }
.queue-name { display: block; overflow: hidden; font-size: 0.84rem; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.queue-meta { display: flex; min-width: 0; align-items: center; gap: 7px; margin-top: 5px; color: var(--dim); font-family: var(--font-mono); font-size: 0.63rem; }
.queue-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-meta span:last-child { flex: 0 0 auto; }
.status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--dim); }
.status-dot.complete { background: var(--success); box-shadow: 0 0 10px rgba(115, 212, 155, 0.34); }
.status-dot.warning { background: var(--warning); }
.status-dot.failed { background: var(--danger); }
.status-dot.processing, .status-dot.queued { background: var(--cyan); }
.queue-progress { position: absolute; right: 42px; bottom: 0; left: 0; height: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.035); }
.queue-progress i { display: block; width: 42%; height: 100%; background: linear-gradient(90deg, var(--violet), var(--cyan)); animation: queue-progress 1.25s var(--ease) infinite; }
@keyframes queue-progress { from { transform: translateX(-110%); } to { transform: translateX(340%); } }
.queue-remove { min-width: 42px; color: #6e7785; font-size: 1.25rem; transition: color 150ms var(--ease), background 150ms var(--ease); }
.queue-remove:hover { background: rgba(239, 119, 125, 0.08); color: #ffafb3; }

.result-panel { min-width: 0; min-height: 560px; overflow: hidden; }
.detail-body { min-height: 560px; }
.empty-state { display: grid; min-height: 560px; place-items: center; padding: 32px; color: var(--dim); text-align: center; }
.result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px clamp(18px, 3vw, 30px) 19px; }
.result-head > div { min-width: 0; }
.result-head h2 { margin: 0; overflow-wrap: anywhere; font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: -0.028em; line-height: 1.15; }
.file-context { margin: 6px 0 0; color: var(--dim); font-family: var(--font-mono); font-size: 0.68rem; }

.result-state, .released-state {
  display: inline-flex;
  min-height: 32px;
  flex: 0 0 auto;
  align-items: center;
  border-radius: 8px;
  padding: 0 10px;
  background: #252c38;
  color: #cbd4e0;
  font-size: 0.65rem;
  font-weight: 780;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.result-state.passed { background: #204633; color: #c7f5d8; }
.result-state.failed, .result-state.stopped { background: #59282e; color: #ffd1d4; }
.result-state.not-reported { background: #554321; color: #ffe3a5; }
.result-state.processing { background: #193c4d; color: #bcefff; }

.result-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0 clamp(18px, 3vw, 30px) 20px; }
.metric { min-width: 0; border-radius: 10px; padding: 13px 14px; background: #0a0d12; box-shadow: inset 0 7px 16px rgba(0, 0, 0, 0.31); }
.metric-label { display: block; overflow: hidden; color: var(--dim); font-size: 0.6rem; font-weight: 740; letter-spacing: 0.08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.metric-value { display: block; margin-top: 4px; overflow: hidden; color: #e8edf4; font-family: var(--font-mono); font-size: 0.91rem; text-overflow: ellipsis; white-space: nowrap; }

.result-tabs { display: flex; gap: 4px; padding: 8px clamp(14px, 3vw, 26px); overflow-x: auto; background: rgba(8, 10, 14, 0.58); scrollbar-width: none; }
.result-tabs::-webkit-scrollbar { display: none; }
.result-tab {
  appearance: none;
  min-height: 42px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 8px;
  padding: 0 12px;
  background: transparent;
  color: var(--dim);
  font-size: 0.7rem;
  font-weight: 730;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 150ms var(--ease), color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.result-tab:hover { color: var(--ink); }
.result-tab.active { background: linear-gradient(180deg, #242b38, #171c25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 6px 15px rgba(0, 0, 0, 0.25); color: var(--ink); }
.tab-count { display: inline-grid; min-width: 19px; min-height: 19px; place-items: center; margin-left: 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); font-family: var(--font-mono); font-size: 0.58rem; }

.result-content { min-width: 0; padding: 25px clamp(18px, 3vw, 30px) 32px; }
.result-content h3, .error-panel h3, .export-card h3 { margin: 0 0 7px; font-size: 1.14rem; letter-spacing: -0.015em; }
.result-content h4 { margin: 28px 0 11px; color: #aeb8c6; font-size: 0.68rem; font-weight: 780; letter-spacing: 0.13em; text-transform: uppercase; }
.lede, .error-panel p, .export-card p, .status-card p { margin: 0; color: var(--muted); line-height: 1.65; }

.status-card, .error-panel, .export-card, .empty-result {
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, #181e28, #0e1218);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 -10px 22px rgba(0, 0, 0, 0.24), var(--shadow-low);
}
.status-card, .error-panel, .export-card { padding: 18px; }
.status-card strong { display: block; margin-bottom: 5px; font-size: 0.98rem; }
.status-card.good { background: linear-gradient(145deg, #173328, #0d1814); }
.status-card.warn { background: linear-gradient(145deg, #382e1b, #19150e); }
.status-card.bad, .error-panel { background: linear-gradient(145deg, #3b2025, #1b1013); }
.actions { margin-top: 16px; }

.technical-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.technical-item { min-width: 0; border-radius: 9px; padding: 12px 13px; background: #090c11; box-shadow: inset 0 6px 14px rgba(0, 0, 0, 0.3); }
.technical-item span { display: block; margin-bottom: 5px; color: var(--dim); font-size: 0.61rem; font-weight: 730; letter-spacing: 0.08em; text-transform: uppercase; }
.technical-item code { display: block; overflow-wrap: anywhere; color: #bec8d6; font-family: var(--font-mono); font-size: 0.68rem; }

.field-list, .check-list, .risk-list, .note-list { margin: 0; }
.field-list { display: grid; gap: 7px; padding: 0; list-style: none; }
.field-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.7fr) minmax(130px, 1fr) minmax(160px, 1.45fr);
  gap: 12px;
  align-items: start;
  border-radius: 9px;
  padding: 12px 13px;
  background: #090c11;
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, 0.29);
}
.field-family { color: var(--dim); font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; }
.field-name { min-width: 0; overflow-wrap: anywhere; color: #d4dbe5; font-size: 0.76rem; font-weight: 660; }
.field-name strong { display: block; }
.field-key { display: block; margin-top: 4px; color: #8491a2; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500; white-space: pre-wrap; }
.field-flag { display: inline-block; margin-left: 7px; border-radius: 5px; padding: 2px 5px; background: #614c24; color: #ffe2a1; font-size: 0.53rem; font-weight: 760; letter-spacing: 0.06em; text-transform: uppercase; }
.field-value { min-width: 0; overflow-wrap: anywhere; color: #c2cbd7; font-family: var(--font-mono); font-size: 0.67rem; line-height: 1.55; white-space: pre-wrap; }
.empty-result { padding: 16px; color: var(--dim); }
.check-list { display: grid; gap: 7px; padding: 0; list-style: none; }
.check-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: start; border-radius: 9px; padding: 12px 13px; background: #090c11; box-shadow: inset 0 6px 14px rgba(0, 0, 0, 0.29); }
.check-row.passed { border-left: 3px solid var(--success); }
.check-row.failed { border-left: 3px solid var(--danger); }
.check-state { min-width: 42px; border-radius: 5px; padding: 3px 6px; background: #252c38; color: #cbd4e0; font-family: var(--font-mono); font-size: 0.57rem; font-weight: 800; letter-spacing: 0.07em; text-align: center; }
.check-row.passed .check-state { background: #204633; color: #c7f5d8; }
.check-row.failed .check-state { background: #59282e; color: #ffd1d4; }
.check-row strong { display: block; color: #d4dbe5; font-size: 0.76rem; }
.check-row small { display: block; margin-top: 4px; color: var(--muted); font-size: 0.69rem; line-height: 1.55; }
.risk-list, .note-list { padding-left: 1.25rem; color: var(--muted); }
.risk-list li, .note-list li { margin-block: 7px; }
.risk-list .critical { color: #ffadb1; }
.risk-list .warning, .risk-list .warn { color: #f0ce88; }

details.technical { margin-top: 24px; }
details.technical summary { width: fit-content; border-radius: 7px; padding: 8px 10px; color: #b9c3d0; font-size: 0.72rem; font-weight: 720; letter-spacing: 0.05em; text-transform: uppercase; }
details.technical[open] summary { margin-bottom: 12px; }
.export-card .released-state { margin-top: 15px; }
.report-preview {
  max-height: 430px;
  margin: 18px 0 0;
  overflow: auto;
  border-radius: var(--radius-md);
  padding: 17px;
  background: #06080b;
  box-shadow: inset 0 9px 22px rgba(0, 0, 0, 0.5);
  color: #aebccd;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.toast {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 80;
  width: min(420px, calc(100vw - 40px));
  border-radius: var(--radius-md);
  padding: 14px 17px;
  background: #202733;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 22px 54px rgba(0, 0, 0, 0.55);
  color: #eef3f8;
  font-size: 0.82rem;
}

.dialog {
  width: min(480px, calc(100vw - 32px));
  border: 0;
  border-radius: var(--radius-lg);
  padding: 0;
  background: linear-gradient(145deg, #1c222c, #0c1016);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 32px 90px rgba(0, 0, 0, 0.72);
  color: var(--ink);
}
.dialog::backdrop { background: rgba(2, 3, 5, 0.78); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.dialog form { padding: 26px; }
.dialog h2 { margin: 8px 0 7px; font-size: 1.45rem; letter-spacing: -0.025em; }
.dialog p:not(.eyebrow) { margin: 0; color: var(--muted); }
.dialog-actions { justify-content: flex-end; margin-top: 24px; }

@media (max-width: 980px) {
  .workspace-grid { grid-template-columns: 1fr; }
  .queue-panel { position: static; max-height: none; }
  .queue-list { max-height: 350px; }
}

@media (max-width: 760px) {
  .app-header {
    min-height: 68px;
    gap: 12px;
    padding: 10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left: max(14px, env(safe-area-inset-left));
  }
  .brand img { width: 38px; height: 38px; }
  .brand-kicker, .engine-state { display: none; }
  .header-actions { flex-wrap: nowrap; gap: 7px; }
  .header-actions .button { padding-inline: 12px; }
  .landing-view { min-height: calc(100vh - 68px); min-height: calc(100dvh - 68px); gap: 16px; padding-top: 34px; }
  .landing-mark { margin-bottom: 8px; }
  .mode-control { align-items: stretch; flex-direction: column; padding: 13px; }
  .segmented { width: 100%; }
  .dropzone { min-height: 236px; border-radius: var(--radius-lg); }
  .pipeline-strip li { justify-content: center; padding-inline: 6px; }
  .pipeline-strip b { display: none; }
  .workspace-view { padding-top: 26px; }
  .batch-bar { align-items: flex-start; flex-direction: column; }
  .batch-actions { width: 100%; }
  .batch-actions .button { flex: 1 1 0; }
  .result-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-row { grid-template-columns: 1fr; gap: 5px; }
  .field-family { margin-bottom: 2px; }
}

@media (max-width: 520px) {
  .brand-word { font-size: 0.84rem; letter-spacing: 0.14em; }
  .header-actions .button.quiet { display: none; }
  .landing-lockup h1 { font-size: clamp(2.35rem, 12.7vw, 4rem); }
  .landing-copy { font-size: 0.9rem; }
  .pipeline-strip { gap: 4px; }
  .pipeline-strip li { font-size: 0.56rem; letter-spacing: 0.035em; }
  .workspace-view { padding-inline: 12px; }
  .batch-bar h1 span { min-width: 30px; min-height: 30px; }
  .result-head { align-items: flex-start; flex-direction: column; }
  .result-summary { gap: 6px; }
  .metric { padding: 11px; }
  .technical-grid { grid-template-columns: 1fr; }
  .actions .button { width: 100%; }
  .dialog-actions .button { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root { --muted: #c3cad4; --dim: #9da6b3; }
  .ambient { opacity: 0.38; }
}