:root {
  --ink: #19211f;
  --muted: #66706c;
  --paper: #f3f1e9;
  --surface: #fffdf7;
  --line: #cecbbf;
  --green: #087f5b;
  --green-bright: #20c77a;
  --red: #d54b3e;
  --amber: #d5932c;
  --navy: #1b3442;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(rgba(25,33,31,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,33,31,.025) 1px, transparent 1px),
    var(--paper);
  background-size: 28px 28px;
  font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
}

button, input, textarea, select { font: inherit; }
button, select, input[type="file"], .drop-zone { cursor: pointer; }
.hidden { display: none !important; }

.topbar {
  min-height: 92px;
  padding: 18px clamp(20px, 5vw, 72px);
  display: flex;
  align-items: center;
  gap: 18px;
  color: #f6f3e9;
  background: var(--navy);
  border-bottom: 5px solid var(--green-bright);
}
.brand-mark { width: 42px; height: 42px; position: relative; border: 1px solid #80a79b; transform: rotate(45deg); }
.brand-mark span { position: absolute; background: var(--green-bright); }
.brand-mark span:nth-child(1) { width: 22px; height: 2px; left: 9px; top: 12px; }
.brand-mark span:nth-child(2) { width: 22px; height: 2px; left: 9px; top: 20px; }
.brand-mark span:nth-child(3) { width: 2px; height: 22px; left: 20px; top: 9px; }
.topbar h1 { margin: 1px 0 0; font-size: clamp(22px, 2vw, 30px); letter-spacing: .04em; }
.eyebrow, .section-index { margin: 0; font: 700 11px/1.2 Consolas, monospace; letter-spacing: .14em; color: var(--green-bright); }
.service-state { margin-left: auto; display: flex; align-items: center; gap: 9px; color: #afc8c0; font: 700 11px Consolas, monospace; }
.service-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--green-bright); box-shadow: 0 0 0 4px rgba(32,199,122,.13); }

main { width: min(1500px, calc(100% - 40px)); margin: 0 auto; padding: 46px 0 80px; }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 30px; margin-bottom: 22px; }
h2 { margin: 8px 0 6px; font-size: clamp(28px, 3vw, 46px); line-height: 1.1; letter-spacing: -.04em; }
.lead { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.7; }
.legend-card { display: flex; gap: 18px; padding: 14px 18px; border: 1px solid var(--line); background: rgba(255,253,247,.65); font-size: 12px; }
.legend-card span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.legend-card i { width: 10px; height: 10px; border: 2px solid; }
.seed-dot { border-color: var(--red) !important; }.final-dot { border-color: var(--green) !important; }.risk-dot { border-color: var(--amber) !important; }

.workspace-switch { display: grid; grid-template-columns: auto auto 1fr; align-items: stretch; margin-bottom: 22px; border: 1px solid var(--ink); background: var(--surface); box-shadow: 6px 7px 0 rgba(27,52,66,.07); }
.workspace-tab { min-width: 190px; padding: 15px 20px; display: flex; align-items: center; gap: 10px; border: 0; border-right: 1px solid var(--ink); color: var(--muted); background: transparent; font-weight: 800; text-align: left; }
.workspace-tab span { padding: 3px 6px; color: var(--green); border: 1px solid currentColor; font: 700 9px Consolas, monospace; letter-spacing: .08em; }
.workspace-tab.active { color: white; background: var(--navy); }
.workspace-tab.active span { color: var(--green-bright); }
.api-health { justify-self: end; padding: 0 18px; display: flex; align-items: center; gap: 9px; color: var(--muted); font: 700 11px Consolas, monospace; }
.api-health i, .template-ready-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(213,147,44,.13); }
.api-health.ready i, .template-ready-state.ready i { background: var(--green-bright); box-shadow: 0 0 0 4px rgba(32,199,122,.13); }
.api-health.error i { background: var(--red); box-shadow: 0 0 0 4px rgba(213,75,62,.13); }

.v1-panel { border-top: 4px solid var(--navy); background: var(--surface); box-shadow: 8px 10px 0 rgba(27,52,66,.08); }
.identity-strip { display: grid; grid-template-columns: minmax(240px, 1.2fr) minmax(190px, .8fr) minmax(190px, .8fr) auto; align-items: end; gap: 18px; padding: 22px 24px; border: 1px solid var(--ink); border-top: 0; }
.identity-copy h3, .workspace-intro h3 { margin: 4px 0 5px; font-size: 22px; }.identity-copy p:last-child, .workspace-intro p:last-child { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.identity-strip label, .api-field { display: flex; flex-direction: column; gap: 6px; color: var(--green); font: 700 11px Consolas, monospace; }
.identity-strip input, .api-field input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #929d98; color: var(--ink); background: white; outline: none; font-family: Consolas, monospace; }
.identity-strip input:focus, .api-field input:focus, .api-json-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(8,127,91,.12); }
.identity-strip small { min-height: 14px; color: var(--muted); font: 10px/1.35 "Microsoft YaHei UI", sans-serif; }
.template-ready-state { min-height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); color: var(--muted); background: #f7f6f0; font-size: 11px; white-space: nowrap; }

.api-step-grid { display: grid; grid-template-columns: 1.15fr .85fr; border-left: 1px solid var(--ink); }
.api-step { min-width: 0; padding: 26px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.api-step header { min-height: 64px; margin-bottom: 20px; display: flex; align-items: flex-start; gap: 13px; }
.api-step header > b { flex: 0 0 auto; padding: 5px 7px; color: white; background: var(--green); font: 700 10px Consolas, monospace; letter-spacing: .08em; }
.api-step header h3 { margin: 0 0 5px; font-size: 23px; }.api-step header p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.api-field { margin-bottom: 15px; }
.json-toolbar { min-height: 37px; display: flex; align-items: center; gap: 8px; }
.json-toolbar button, .compact-upload, .secondary-action { padding: 7px 10px; border: 1px solid #929d98; color: var(--ink); background: transparent; font-size: 11px; font-weight: 700; }
.compact-upload { position: relative; overflow: hidden; cursor: pointer; }.compact-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.json-toolbar span { margin-left: auto; color: var(--green); font: 700 11px Consolas, monospace; }
.api-json-input { width: 100%; min-height: 220px; padding: 13px; resize: vertical; border: 1px solid #929d98; color: #d6eadf; background: #14231f; outline: none; font: 12px/1.6 Consolas, monospace; tab-size: 2; }
.api-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.primary-action { min-width: 210px; padding: 12px 15px; display: flex; justify-content: space-between; border: 0; color: white; background: var(--green); font-weight: 800; }.primary-action:hover { background: #076c4e; }.primary-action:disabled, .secondary-action:disabled { opacity: .5; cursor: wait; }
.primary-action b { font: 700 11px Consolas, monospace; }.secondary-action:hover { color: white; background: var(--ink); }
.localization-actions { margin-top: 88px; }
.flow-note { min-height: 104px; padding: 16px; border-left: 4px solid var(--amber); background: #fff7e9; }.flow-note strong { color: #9a6418; font-size: 12px; }.flow-note p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.request-preview { margin-top: 15px; border-top: 1px solid var(--line); }.request-preview summary { padding: 10px 0; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 700; }.request-preview pre, .raw-response { margin: 0; padding: 14px; overflow: auto; color: #cfe5db; background: #111b18; font: 11px/1.6 Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.request-preview pre { max-height: 220px; }

.v1-progress, .v1-error { margin: 20px 24px 0; padding: 16px 18px; border: 1px solid; }
.v1-progress { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 15px; border-color: var(--green); background: #f4fbf7; }.v1-progress > div:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }.v1-progress span { color: var(--muted); font-size: 11px; }.v1-progress > b { color: var(--green); font: 700 16px Consolas, monospace; }
.v1-error { border-color: var(--red); background: #fff5f3; }.v1-error > div { display: flex; align-items: center; gap: 10px; }.v1-error b { color: var(--red); font: 700 11px Consolas, monospace; }.v1-error span { color: var(--muted); font: 700 11px Consolas, monospace; }.v1-error p { margin: 8px 0 0; }
.v1-results { padding: 34px 24px 30px; }.compact-heading h2 { font-size: 32px; }.v1-summary-cards { grid-template-columns: repeat(5, 1fr); }.v1-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }.v1-result-grid .report-block { min-width: 0; margin-top: 34px; }.raw-response { height: 330px; white-space: pre; }
.question-table { overflow-x: auto; border-top: 1px solid var(--ink); }.question-row { min-width: 820px; display: grid; grid-template-columns: 110px repeat(4, minmax(155px, 1fr)); border-bottom: 1px solid var(--line); background: white; }.question-row > span, .question-row > strong { min-width: 0; padding: 13px 14px; border-right: 1px solid var(--line); font: 12px Consolas, monospace; white-space: nowrap; }.question-row strong { color: var(--green); font-weight: 700; }.question-head { color: var(--muted); background: #eff1ec; }.question-head > span { font: 700 10px "Microsoft YaHei UI", sans-serif; letter-spacing: .05em; }
.question-row[data-question-id] { cursor: pointer; transition: background .15s ease; }.question-row[data-question-id]:hover, .question-row[data-question-id]:focus { background: #edf8f2; outline: 2px solid rgba(8,127,91,.22); outline-offset: -2px; }
.localization-preview { padding-top: 4px; }.overlay-heading { align-items: flex-end; }.overlay-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: end; gap: 8px; }.overlay-controls label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 700; }.overlay-controls select { width: 130px; height: 34px; padding: 0 8px; }.overlay-controls .check-control { height: 34px; padding: 0 9px; flex-direction: row; align-items: center; gap: 6px; border: 1px solid #929d98; color: var(--ink); background: white; }.zoom-control { min-width: 190px; display: grid !important; grid-template-columns: 1fr auto; }.zoom-control input { grid-column: 1; width: 130px; accent-color: var(--green); }.zoom-control b { grid-column: 2; grid-row: 2; min-width: 42px; text-align: right; font: 700 11px Consolas, monospace; }.overlay-controls .secondary-action { height: 34px; text-decoration: none; display: inline-flex; align-items: center; }
.overlay-status-bar { min-height: 40px; padding: 0 12px; display: flex; justify-content: space-between; align-items: center; gap: 14px; color: var(--muted); border: 1px solid #9ca5a1; border-bottom: 0; background: #f4f5f0; font-size: 11px; }.overlay-status-bar p { margin: 0; }.overlay-status-bar p.risk { color: #9a6418; font-weight: 700; }.overlay-status-bar > div { display: flex; align-items: center; gap: 6px; white-space: nowrap; }.overlay-status-bar i { width: 10px; height: 10px; border: 2px solid; }.overlay-ok { border-color: var(--green) !important; }.overlay-risk { margin-left: 8px; border-color: var(--amber) !important; }
.overlay-viewport { max-height: 72vh; min-height: 360px; overflow: auto; border: 1px solid #263631; background: repeating-conic-gradient(#dfe2dc 0 25%,#eff0eb 0 50%) 0/22px 22px; }.overlay-stage { width: 100%; min-width: 0; margin: 0 auto; position: relative; background: white; }.overlay-stage img { display: block; width: 100%; height: auto; }.overlay-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }.overlay-question { cursor: pointer; pointer-events: auto; }.overlay-question polygon { fill: rgba(32,199,122,.09); stroke: #08a467; stroke-width: 4; vector-effect: non-scaling-stroke; transition: .12s ease; }.overlay-question text { fill: #073f2f; stroke: white; stroke-width: 5; paint-order: stroke fill; font: 800 28px Consolas, monospace; pointer-events: none; }.overlay-question.is-risk polygon { fill: rgba(213,147,44,.13); stroke: var(--amber); }.overlay-question.is-highlighted polygon, .overlay-question:hover polygon { fill: rgba(32,199,122,.22); stroke: #004f39; stroke-width: 7; }.overlay-stage svg.no-fill polygon { fill: transparent; }.overlay-stage svg.frames-hidden { visibility: hidden; }.overlay-empty { position: absolute; inset: 0; min-height: 360px; display: grid; place-items: center; padding: 30px; color: #e1ede8; background: #14231f; text-align: center; font-size: 13px; }.overlay-empty.error { color: #ffd8d2; background: #34211e; }
.workspace-intro { margin: 34px 0 16px; padding-left: 16px; border-left: 5px solid var(--navy); }

.input-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); background: var(--surface); box-shadow: 8px 10px 0 rgba(27,52,66,.08); }
.source-card { min-width: 0; padding: 24px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.card-heading { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.card-heading span { color: var(--green); font: 700 11px Consolas, monospace; }
.card-heading h3 { margin: 0; font-size: 18px; }
.mode-tabs { display: flex; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.mode-tab { padding: 7px 12px; border: 0; border-bottom: 3px solid transparent; color: var(--muted); background: none; font-size: 12px; }
.mode-tab.active { color: var(--ink); border-color: var(--green); font-weight: 700; }
.mode-pane { display: none; }
.mode-pane.active { display: flex; }
.drop-zone { min-height: 148px; padding: 20px; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px dashed #8e9994; background: #f8f7f1; transition: .2s ease; }
.drop-zone:hover, .drop-zone.dragging { border-color: var(--green); background: #edf8f2; transform: translateY(-2px); }
.drop-zone input { position: absolute; opacity: 0; pointer-events: none; }
.drop-zone strong { font-size: 14px; }.drop-zone small { margin-top: 5px; color: var(--muted); }
.file-name { max-width: 100%; margin-top: 16px; padding: 5px 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--green); background: #dff3e9; font: 700 11px Consolas, monospace; }
.input-feedback { min-height: 86px; margin-top: 12px; padding: 9px; display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 12px; border: 1px solid #7eae9d; background: #edf8f2; text-align: left; }
.input-feedback.error { border-color: var(--red); background: #fff0ee; }
.input-feedback img { display: block; width: 104px; height: 70px; object-fit: contain; background: #dfe3dd; }
.input-feedback > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.input-feedback b { color: var(--green); font-size: 13px; }.input-feedback.error b { color: var(--red); }
.input-feedback span, .input-feedback small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.input-feedback span { font: 700 11px Consolas, monospace; }.input-feedback small { color: var(--muted); font-size: 11px; }
.json-feedback { grid-template-columns: 54px 1fr; }.json-feedback i { display: grid; width: 54px; height: 54px; place-items: center; color: var(--green); background: #d9f0e5; font: 700 16px Consolas, monospace; }
.url-field, .json-field { min-height: 148px; flex-direction: column; gap: 8px; color: var(--muted); font-size: 12px; }
.url-field input, .json-field textarea, select { width: 100%; border: 1px solid #9da6a2; background: #fff; color: var(--ink); outline: none; }
.url-field input { height: 46px; padding: 0 13px; }
.json-field textarea { min-height: 142px; padding: 12px; resize: vertical; font: 12px/1.55 Consolas, monospace; }
.url-field input:focus, .json-field textarea:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(8,127,91,.12); }

.run-strip { grid-column: 1 / -1; min-height: 92px; display: grid; grid-template-columns: 220px 280px 1fr; align-items: end; gap: 18px; padding: 18px 24px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.run-strip label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.run-strip select { height: 42px; padding: 0 10px; }
.run-button { height: 48px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border: 0; color: white; background: var(--green); font-weight: 800; letter-spacing: .03em; transition: .2s; }
.run-button:hover { background: #076c4e; transform: translateY(-2px); box-shadow: 0 5px 0 #084e3d; }
.run-button:disabled { opacity: .55; cursor: wait; transform: none; box-shadow: none; }
.run-button b { font: 700 12px Consolas, monospace; }

.progress-panel, .error-panel { margin-top: 24px; padding: 20px 24px; border: 1px solid; background: var(--surface); }
.progress-panel { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 18px; border-color: var(--green); }
.scanner { width: 52px; height: 34px; position: relative; overflow: hidden; border: 1px solid #8db8a8; background: repeating-linear-gradient(0deg,#edf8f2,#edf8f2 4px,#fff 4px,#fff 8px); }
.scanner i { position: absolute; left: 0; right: 0; height: 2px; background: var(--green-bright); box-shadow: 0 0 9px var(--green-bright); animation: scan 1.4s linear infinite; }
@keyframes scan { from { top: 0; } to { top: 100%; } }
.progress-panel p { margin: 0 0 3px; font-weight: 800; }.progress-panel span { color: var(--muted); font-size: 12px; }.progress-panel strong { color: var(--green); font: 700 18px Consolas, monospace; }
.error-panel { border-color: var(--red); color: var(--red); }.error-panel span { font: 700 11px Consolas, monospace; }.error-panel p { margin: 6px 0 0; color: var(--ink); }
.error-panel a { display: inline-block; margin-top: 9px; color: var(--red); font-size: 12px; font-weight: 700; }

.results { margin-top: 58px; }
.result-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.result-heading h2 { margin-bottom: 0; }.result-links { display: flex; gap: 8px; }
.result-links a { padding: 8px 12px; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; font-size: 12px; font-weight: 700; }
.result-links a:hover { color: white; background: var(--ink); }
.summary-cards { display: grid; grid-template-columns: repeat(5, 1fr); border-left: 1px solid var(--line); }
.metric-card { padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.metric-card span { display: block; min-height: 30px; color: var(--muted); font: 700 10px/1.3 Consolas, monospace; letter-spacing: .08em; }
.metric-card strong { font-size: clamp(22px, 2.3vw, 36px); letter-spacing: -.04em; }
.metric-card strong.pass { color: var(--green); }.metric-card strong.fail { color: var(--red); }

.report-block { margin-top: 42px; }
.block-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 14px; }
.block-heading span { color: var(--green); font: 700 10px Consolas, monospace; letter-spacing: .12em; }
.block-heading h3 { margin: 3px 0 0; font-size: 24px; }.block-heading p { max-width: 520px; margin: 0; color: var(--muted); font-size: 12px; text-align: right; }
.timing-chart { border-top: 1px solid var(--ink); }
.timing-row { display: grid; grid-template-columns: minmax(175px, 260px) 1fr 90px; align-items: center; gap: 16px; min-height: 42px; border-bottom: 1px solid var(--line); }
.timing-row label { font-size: 12px; }.timing-track { height: 8px; background: #dddcd4; }.timing-bar { height: 100%; min-width: 2px; background: var(--green); }.timing-row strong { text-align: right; font: 700 12px Consolas, monospace; }

.artifact-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; }
.filter-button { padding: 7px 12px; border: 1px solid #9fa6a2; background: transparent; color: var(--muted); font-size: 12px; }
.filter-button.active { border-color: var(--ink); color: white; background: var(--ink); }
.artifact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.artifact-card { margin: 0; min-width: 0; border: 1px solid var(--line); background: var(--surface); }
.artifact-card button { display: block; width: 100%; padding: 0; border: 0; background: #e6e5de; }
.artifact-card img { display: block; width: 100%; height: 370px; object-fit: contain; }
.artifact-card figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 11px 13px; font-size: 12px; font-weight: 700; }
.artifact-card figcaption span { color: var(--green); font: 700 10px Consolas, monospace; }
.crop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.crop-card { margin: 0; border: 1px solid var(--line); background: var(--surface); }
.crop-card button { width: 100%; padding: 0; border: 0; background: #e8e7df; }.crop-card img { display: block; width: 100%; height: 180px; object-fit: contain; }.crop-card figcaption { padding: 8px 10px; font: 700 11px Consolas, monospace; }

dialog { width: min(96vw, 1500px); max-width: none; padding: 0; border: 0; background: #111816; color: white; box-shadow: 0 30px 90px rgba(0,0,0,.55); }
dialog::backdrop { background: rgba(7,12,11,.82); backdrop-filter: blur(4px); }
dialog > button { position: absolute; z-index: 2; top: 10px; right: 14px; width: 38px; height: 38px; border: 1px solid #65736e; border-radius: 50%; background: #18211e; color: white; font-size: 24px; }
dialog div { display: flex; flex-direction: column; max-height: 92vh; } dialog span { padding: 14px 58px 10px 18px; color: #bcd0c9; font-size: 13px; } dialog img { min-height: 0; width: 100%; object-fit: contain; }

@media (max-width: 900px) {
  main { width: min(100% - 24px, 1500px); padding-top: 28px; }
  .intro-grid { grid-template-columns: 1fr; }.legend-card { overflow-x: auto; }
  .input-panel { grid-template-columns: 1fr; }.run-strip { grid-column: auto; grid-template-columns: 1fr; align-items: stretch; }
  .summary-cards { grid-template-columns: repeat(2, 1fr); }.artifact-grid { grid-template-columns: 1fr; }
  .artifact-card img { height: 270px; }.block-heading { align-items: start; flex-direction: column; }.block-heading p { text-align: left; }
  .timing-row { grid-template-columns: 145px 1fr 72px; gap: 9px; }.service-state { display: none; }
  .workspace-switch { grid-template-columns: 1fr 1fr; }.workspace-tab { min-width: 0; }.api-health { grid-column: 1 / -1; justify-self: stretch; min-height: 42px; border-top: 1px solid var(--line); }
  .identity-strip { grid-template-columns: 1fr 1fr; }.identity-copy { grid-column: 1 / -1; }.api-step-grid, .v1-result-grid { grid-template-columns: 1fr; }.localization-actions { margin-top: 28px; }.v1-summary-cards { grid-template-columns: repeat(2, 1fr); }.point-list { grid-template-columns: repeat(2, 1fr); }
  .overlay-heading { align-items: stretch; }.overlay-controls { justify-content: flex-start; }.overlay-viewport { min-height: 260px; }.overlay-empty { min-height: 260px; }
}

@media (max-width: 520px) {
  .topbar { padding: 14px 16px; }.brand-mark { width: 34px; height: 34px; }.topbar .eyebrow { display: none; }
  .summary-cards { grid-template-columns: 1fr; }.result-heading { align-items: start; flex-direction: column; }.result-links { width: 100%; flex-wrap: wrap; }
  .progress-panel { grid-template-columns: 44px 1fr; }.progress-panel strong { grid-column: 2; }.timing-row { grid-template-columns: 1fr 65px; padding: 8px 0; }.timing-track { grid-column: 1 / -1; grid-row: 2; }
  .workspace-switch { grid-template-columns: 1fr; }.workspace-tab { border-right: 0; border-bottom: 1px solid var(--ink); }.api-health { grid-column: auto; }.identity-strip { grid-template-columns: 1fr; }.identity-copy { grid-column: auto; }.api-step { padding: 19px; }.api-actions { flex-direction: column; }.primary-action { min-width: 0; }.v1-results { padding: 28px 16px; }.v1-summary-cards { grid-template-columns: 1fr; }.point-list { grid-template-columns: 1fr; }.v1-progress { grid-template-columns: 44px 1fr; }.v1-progress > b { grid-column: 2; }
  .overlay-controls { display: grid; grid-template-columns: 1fr 1fr; }.overlay-controls label:first-child, .zoom-control { grid-column: 1 / -1; }.overlay-controls select { width: 100%; }.overlay-status-bar { align-items: flex-start; flex-direction: column; padding: 10px 12px; }.overlay-viewport { min-height: 220px; }.overlay-empty { min-height: 220px; }
}