:root {
  color-scheme: light;
  --white: #fff; --gray-50: #f4f6f5; --gray-100: #eaf0ed; --gray-200: #d7dfdb; --gray-400: #84918a; --gray-600: #54645b; --gray-900: #202b25;
  --teal-700: #176b60; --teal-900: #105046; --red-700: #a32626;
  --page: var(--gray-50); --paper: var(--white); --ink: var(--gray-900); --muted: var(--gray-600); --line: var(--gray-200); --accent: var(--teal-700); --error: var(--red-700);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px;
  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-title: 24px;
  --radius-field: 4px; --radius-panel: 8px;
  --field-bg: var(--paper); --field-border: var(--line); --nav-active: var(--gray-100); --row-hover: var(--gray-50);
  --paper-shadow: 0 2px 4px #202b2507, 0 12px 32px #202b2508;
  font-family: 'Segoe UI', 'Malgun Gothic', system-ui, sans-serif; font-size: var(--text-sm); line-height: 1.5; color: var(--ink); background: var(--page);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button, .file-control { min-height: 40px; border: 1px solid var(--line); border-radius: var(--radius-field); padding: var(--s2) var(--s4); background: var(--paper); cursor: pointer; font-weight: 600; white-space: nowrap; }
button:hover, .file-control:hover { background: var(--gray-100); border-color: var(--gray-400); }
button:active { background: var(--gray-200); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--white); }
button.primary:hover { background: var(--teal-900); }
button.primary span { margin-left: var(--s3); font-size: 18px; }
button.quiet { border-color: transparent; background: transparent; font-weight: 400; color: var(--muted); }
button.quiet:hover { color: var(--error); background: var(--gray-100); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
input, select, textarea { background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--radius-field); padding: var(--s2) var(--s3); width: 100%; min-width: 0; }
input, select { min-height: 40px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
label { display: flex; flex-direction: column; gap: var(--s2); font-weight: 600; }
label span { font-size: var(--text-xs); font-weight: 400; color: var(--muted); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 18px; font-weight: 650; letter-spacing: -.03em; }
h2 { font-size: var(--text-title); letter-spacing: -.03em; font-weight: 650; }
h3 { font-size: var(--text-base); font-weight: 600; }
.hint, .intro { color: var(--muted); }
.hint { font-size: var(--text-xs); margin-top: var(--s3); }
.intro { margin: var(--s3) 0 var(--s8); max-width: 850px; }
.eyebrow { font-size: var(--text-xs); color: var(--muted); display: block; margin-bottom: var(--s2); }
.mono, input[inputmode="decimal"], textarea { font-variant-numeric: tabular-nums; }
.app-header { min-height: 80px; display: flex; align-items: center; justify-content: space-between; padding: var(--s4) var(--s8); gap: var(--s6); border-bottom: 1px solid var(--line); background: var(--paper); }
.brand { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; }
.brand-mark { width: 36px; height: 40px; border: 1px solid var(--line); display: grid; place-items: center; border-radius: var(--radius-field); font-size: 22px; font-family: Georgia, serif; color: var(--accent); }
.brand p { font-size: var(--text-xs); color: var(--muted); letter-spacing: .08em; }
.header-actions { display: flex; gap: var(--s2); align-items: center; }
#save-status { font-size: var(--text-xs); color: var(--muted); margin-right: var(--s4); }
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: calc(100vh - 81px); }
.sidebar { padding: var(--s8) var(--s4) var(--s6); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s8); }
.sidebar-top { padding: 0 var(--s2); }
.sidebar-top > label { margin-bottom: var(--s2); }
.sidebar nav { display: flex; flex-direction: column; gap: var(--s1); }
.nav-item { text-align: left; border-color: transparent; background: transparent; font-weight: 500; position: relative; }
.nav-item span { color: var(--muted); font-size: var(--text-xs); margin-right: var(--s3); }
.nav-item.active { color: var(--accent); background: var(--nav-active); }
.nav-item.active::before { content: ''; position: absolute; width: 3px; border-radius: 2px; height: 20px; top: 50%; left: 0; transform: translateY(-50%); background: var(--accent); }
.document-summary { border-top: 1px solid var(--line); padding: var(--s6) var(--s2) 0; }
.document-summary strong { display: block; font-size: var(--text-base); overflow-wrap: anywhere; }
.document-summary p { color: var(--muted); font-size: var(--text-xs); margin-top: var(--s2); }
.sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; gap: var(--s2); }
.sidebar-bottom button { font-size: var(--text-xs); }
main { padding: var(--s8) clamp(var(--s6), 3vw, var(--s12)); min-width: 0; background: var(--paper); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.workflow { border-bottom: 1px solid var(--line); padding-bottom: var(--s4); margin-bottom: var(--s6); overflow-wrap: anywhere; }
.workflow-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); }
.workflow-heading .eyebrow { margin-bottom: 0; }
.next-action { margin-top: var(--s2); color: var(--accent); font-weight: 600; }
.workflow details { margin-top: var(--s2); color: var(--error); }
.workflow summary { cursor: pointer; }
.workflow ul { padding-left: var(--s6); }
.review-box { border: 1px solid var(--line); border-radius: var(--radius-panel); padding: var(--s4); margin-bottom: var(--s6); overflow-wrap: anywhere; }
.review-label { flex-direction: row; align-items: flex-start; margin-top: var(--s4); }
.review-label input { width: 20px; min-height: 20px; flex-shrink: 0; }
#next-step { margin-top: var(--s6); }
.channels-toolbar { display: flex; justify-content: space-between; gap: var(--s4); border-bottom: 1px solid var(--line); align-items: center; }
.channel-tabs { display: flex; gap: var(--s1); overflow-x: auto; padding-bottom: var(--s2); }
.channel-tabs button { border-color: transparent; color: var(--muted); min-width: 76px; }
.channel-tabs button[aria-pressed="true"] { color: var(--ink); border-color: var(--line); box-shadow: 0 1px 2px #202b2508; }
.channel-meta { display: grid; grid-template-columns: minmax(120px, 1.5fr) 1fr 1fr auto; align-items: end; gap: var(--s4); padding: var(--s6) 0; max-width: 820px; }
.channel-meta label { position: relative; font-size: var(--text-xs); }
.channel-meta label span { position: absolute; right: 0; }
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-panel); }
.spec-table { width: 100%; min-width: 840px; border-collapse: collapse; table-layout: fixed; }
.spec-table .col-label { width: 22%; } .spec-table .col-condition { width: 22%; } .spec-table .col-unit { width: 8%; } .spec-table .col-action { width: 60px; }
.spec-table th { text-align: left; background: var(--gray-50); padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line); font-size: var(--text-xs); font-weight: 600; }
.spec-table th:nth-child(n+3) { text-align: center; }
.spec-table td { vertical-align: top; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: var(--s1); }
.spec-table tr:last-child td { border-bottom: 0; }
.spec-table td:last-child { border-right: 0; vertical-align: middle; padding: var(--s1); }
.spec-table tbody tr:hover { background: var(--row-hover); }
.spec-table textarea { display: block; resize: vertical; min-height: 40px; border-color: transparent; background: transparent; padding: var(--s2) var(--s1); font-size: 13px; line-height: 20px; }
.spec-table td:nth-child(n+3) textarea { text-align: center; }
.spec-table textarea:focus { background: var(--paper); border-color: var(--accent); outline-offset: 0; }
.row-delete { width: 100%; min-height: 32px; padding: var(--s1); border: 0; background: transparent; font-size: var(--text-xs); color: var(--muted); font-weight: 400; }
.row-delete:hover { color: var(--error); }
.table-footer { display: flex; align-items: center; justify-content: space-between; padding: var(--s4) 0; }
.table-footer span { color: var(--muted); font-size: var(--text-xs); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); max-width: 820px; margin-top: var(--s8); }
.required { display: none; }
.filename-preview { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--line); }
.filename-preview p { overflow-wrap: anywhere; }
.artwork-list { display: flex; flex-direction: column; }
.artwork-slot { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s8); padding: var(--s6) 0; border-top: 1px solid var(--line); }
.artwork-slot p { color: var(--muted); margin: var(--s2) 0 var(--s4); overflow-wrap: anywhere; }
.file-control { display: block; position: relative; width: fit-content; margin-top: var(--s6); margin-bottom: var(--s2); }
.file-control input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-control:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.image-frame { background: var(--gray-50); border: 1px dashed var(--line); border-radius: var(--radius-panel); min-height: 220px; display: grid; place-items: center; padding: var(--s4); color: var(--muted); font-size: var(--text-xs); }
.image-frame img { max-width: 100%; max-height: 320px; object-fit: contain; outline: 1px solid #0000001a; outline-offset: -1px; }
.reflow .image-frame { min-height: 150px; } .reflow .image-frame img { max-height: 200px; }
.workspace-footer { display: flex; justify-content: space-between; gap: var(--s4); padding-top: var(--s6); margin-top: var(--s12); border-top: 1px solid var(--line); font-size: var(--text-xs); color: var(--muted); }
.preview-wrap { overflow: auto; background: var(--gray-50); padding: var(--s6); border-radius: var(--radius-panel); }
.document-preview { max-width: 800px; min-width: 620px; background: var(--paper); margin: auto; padding: var(--s12); box-shadow: var(--paper-shadow); color: #171717; font-family: 'Times New Roman', serif; }
.document-preview.wci { font-family: Calibri, Arial, sans-serif; }
.document-preview h3 { margin: var(--s6) 0 var(--s4); } .document-preview h2 { font-family: inherit; }
.document-preview table { width: 100%; border-collapse: collapse; margin: var(--s6) 0; font-size: var(--text-xs); }
.document-preview td, .document-preview th { border: 1px solid #777; padding: var(--s2); white-space: pre-wrap; overflow-wrap: anywhere; }
.document-preview th { background: #d9d9d9; } .document-preview.wci th { background: #e2efd9; }
.document-preview img { display: block; max-width: 100%; max-height: 360px; margin: var(--s6) auto; }
.preview-meta { padding-bottom: var(--s4); border-bottom: 1px solid #555; margin-top: var(--s2); }
.message { margin: var(--s4) var(--s8); padding: var(--s4); color: var(--error); border: 1px solid var(--error); border-radius: var(--radius-field); background: var(--paper); white-space: pre-line; }
.message.success { color: var(--accent); border-color: var(--accent); }
#loading { padding: var(--s12); color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; top: -100px; left: var(--s4); padding: var(--s3); background: var(--paper); color: var(--accent); z-index: 10; }
.skip:focus { top: var(--s2); }
@media (min-width: 1600px) { main { padding-right: max(var(--s12), calc((100vw - 1550px) / 2)); } }
@media (max-width: 1100px) { .shell { grid-template-columns: 200px minmax(0, 1fr); } main { padding: var(--s6); } .app-header { padding: var(--s4) var(--s6); } #save-status { display: none; } .artwork-slot { grid-template-columns: 190px minmax(0, 1fr); } }
@media (max-width: 760px) {
  .app-header { flex-wrap: wrap; padding: var(--s4); gap: var(--s4); }
  .header-actions { width: 100%; flex-wrap: wrap; } .header-actions .primary { margin-left: auto; }
  button, input, select, .file-control { min-height: 44px; }
  .shell { display: block; } .sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: var(--s4); gap: var(--s4); }
  .sidebar-top { display: flex; align-items: center; gap: var(--s3); padding: 0; } .sidebar-top label { margin: 0; white-space: nowrap; } .sidebar-top select { width: 100px; } .sidebar-top .hint { margin: 0; }
  .sidebar nav { flex-direction: row; overflow-x: auto; } .nav-item { flex-shrink: 0; padding: var(--s2) var(--s3); } .nav-item span { display: none; }
  .document-summary { display: none; } .sidebar-bottom { flex-direction: row; } .sidebar-bottom .hint { display: none; }
  main { padding: var(--s6) var(--s4); } .section-heading { align-items: end; } h2 { font-size: 22px; }
  .section-heading .eyebrow { max-width: 230px; }
  .channel-meta { grid-template-columns: 1fr 1fr; gap: var(--s3); } .channel-meta label:first-child { grid-column: 1 / -1; }
  .channel-meta #reset-rows { grid-column: 1 / -1; justify-self: end; }
  .form-grid { grid-template-columns: 1fr; }
  .artwork-slot { grid-template-columns: 1fr; gap: var(--s4); } .image-frame { min-height: 180px; }
  .preview-wrap { padding: var(--s3); } .workspace-footer { flex-direction: column; gap: var(--s2); }
  .message { margin: var(--s4); } .row-delete { min-height: 44px; } .spec-table textarea { font-size: var(--text-base); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }