:root {
  color-scheme: light;
  --ground: #f2f5f5;
  --surface: #ffffff;
  --raised: #f5f7f7;
  --active: #e9eeee;
  --border: #e1e7e8;
  --rule: #edf0f1;
  --control: #c7d0d2;
  --text: #172326;
  --muted: #5d696c;
  --faint: #6b7375;
  --accent: #176a70;
  --positive: #24704d;
  --negative: #a6232f;
  --warning: #8a5a0a;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 14px/1.45 var(--font); color: var(--text); background: var(--ground); }
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 22px; line-height: 30px; font-weight: 600; }
h2 { font-size: 18px; line-height: 25px; font-weight: 600; }
h3 { font-size: 14px; line-height: 20px; font-weight: 600; }

.app-shell { height: 100dvh; display: grid; grid-template-rows: 52px minmax(0, 1fr); }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 28px; background: var(--ground); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; color: var(--text); background: transparent; text-align: left; }
.brand-mark { position: relative; width: 21px; height: 21px; flex: none; border: 3px solid var(--accent); border-radius: 50%; }
.brand-mark::after { content: ""; position: absolute; top: 5px; left: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.brand strong { display: block; font-size: 15px; line-height: 18px; font-weight: 600; }
.brand small { display: block; color: var(--muted); font-size: 11px; line-height: 16px; }
.workspace { min-width: 0; min-height: 0; overflow: hidden; background: var(--surface); border-top: 1px solid var(--border); }

.account-menu { position: relative; }
.account-menu summary { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 3px; list-style: none; cursor: pointer; color: var(--text); font-size: 13px; font-weight: 500; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-avatar { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--text); background: #e4e9e9; font-size: 11px; }
.account-popover { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: 210px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 8px 24px #17232614; }
.account-identity { display: flex; flex-direction: column; gap: 2px; padding: 8px 9px 10px; border-bottom: 1px solid var(--rule); }
.account-identity strong { font-weight: 600; }
.account-identity span { color: var(--muted); font-size: 12px; }
.account-popover button, .account-popover a { display: block; width: 100%; padding: 8px 9px; border: 0; border-radius: 5px; color: var(--text); background: transparent; text-align: left; text-decoration: none; font-size: 13px; }
.account-popover button:hover, .account-popover a:hover { background: var(--raised); }

.primary-button, .secondary-button { min-height: 34px; padding: 6px 14px; border-radius: 6px; font-weight: 500; white-space: nowrap; }
.primary-button { border: 1px solid var(--text); color: #fff; background: var(--text); }
.primary-button:hover { background: #344447; }
.secondary-button { border: 1px solid var(--control); color: var(--text); background: #fff; }
.secondary-button:hover { border-color: #879497; }
.primary-button:disabled, .secondary-button:disabled { cursor: not-allowed; opacity: .5; }
.text-button { padding: 4px 0; border: 0; color: var(--text); background: transparent; font-weight: 500; white-space: nowrap; }
.text-button:hover, .back-button:hover { color: var(--accent); }
.back-button { flex: none; padding: 4px 0; border: 0; color: var(--muted); background: none; font-size: 13px; white-space: nowrap; }

.projects-view { height: 100%; overflow: auto; padding: 26px clamp(22px, 3.4vw, 52px) 48px; }
.page-title-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 40px; margin-bottom: 18px; }
.page-title { display: flex; align-items: baseline; gap: 12px; }
.page-title span { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.project-table-head, .project-row { display: grid; grid-template-columns: minmax(280px, 2.25fr) minmax(100px, .8fr) minmax(76px, .55fr) minmax(96px, .75fr) minmax(76px, .55fr) minmax(76px, .55fr) minmax(100px, .7fr); gap: 16px; align-items: center; }
.project-table-head { height: 38px; color: var(--muted); font-size: 12px; }
.project-row { width: 100%; min-height: 62px; padding: 0; border: 0; border-top: 1px solid var(--rule); color: var(--text); background: transparent; text-align: left; }
.project-row:hover { background: #f8f9f9; }
.project-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-row .project-name { display: flex; flex-direction: column; gap: 2px; font-weight: 500; }
.project-code, .project-row .project-code { color: var(--muted); font: 12px/18px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.project-type-label { color: var(--muted); font-size: 12px; }
.project-row .project-date, .project-row .project-size, .project-row .dataset-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.project-status, .visibility-label { color: var(--muted); }
.empty-state { display: flex; flex-direction: column; gap: 4px; padding: 28px 0; color: var(--muted); }
.empty-state strong { color: var(--text); font-size: 15px; }

.project-view { height: 100%; min-height: 0; display: grid; grid-template-rows: 58px minmax(0, 1fr); }
.project-bar { min-width: 0; display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr); align-items: center; gap: 20px; padding: 0 26px; border-bottom: 1px solid var(--border); }
.project-heading { min-width: 0; display: flex; align-items: center; gap: 6px; }
.project-heading .back-button { width: 22px; height: 34px; padding: 0; font-size: 26px; line-height: 1; }
.project-heading #current-project-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; line-height: 30px; font-weight: 600; }
.project-heading .project-code { flex: none; }
.project-tabs { height: 100%; display: flex; align-items: stretch; gap: 20px; }
.project-tab { position: relative; padding: 0 1px; border: 0; color: var(--muted); background: transparent; font-size: 13px; white-space: nowrap; }
.project-tab::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: transparent; }
.project-tab.active { color: var(--text); font-weight: 600; }
.project-tab.active::after { background: var(--text); }
.project-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }

.work-area { min-height: 0; display: grid; grid-template-columns: 310px minmax(0, 1fr); }
.browser-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: #fbfcfc; }
.file-search { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; }
.file-search input { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--control); border-radius: 6px; outline: 0; background: #fff; }
.file-search input:focus { border-color: var(--accent); }
.file-search span { display: none; color: var(--muted); font-size: 12px; white-space: nowrap; }
.browser-scroll { min-height: 0; overflow: auto; padding: 0 8px 14px; }
.folder-list { display: flex; flex-direction: column; }
.folder-row, .item-row { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 5px 8px 5px calc(8px + var(--tree-depth, 0) * 13px); border: 0; border-radius: 5px; color: var(--text); background: transparent; text-align: left; }
.folder-row:hover, .item-row:hover { background: #f0f3f3; }
.folder-row.active, .item-row.active { background: var(--active); }
.tree-chevron { flex: none; width: 7px; height: 7px; margin: 0 4px 0 1px; border-right: 1.5px solid #7c888a; border-bottom: 1.5px solid #7c888a; transform: rotate(-45deg); }
.folder-row.expanded .tree-chevron { transform: rotate(45deg); }
.tree-folder-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.tree-folder-meta { margin-left: auto; color: var(--muted); font-size: 11px; }
.tree-file-mark { flex: none; width: 12px; height: 14px; margin-left: 1px; border: 1px solid #879396; border-radius: 2px; }
.item-row .row-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; flex: 1; }
.item-row .row-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; }
.item-row .row-info small { color: var(--muted); font-size: 11px; }
.empty-folder { padding: 10px 9px; color: var(--muted); font-size: 12px; }
.load-more { display: block; width: calc(100% - 16px); height: 34px; margin: 8px; border: 1px solid var(--control); border-radius: 6px; background: #fff; }
.upload-progress { padding: 10px 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.upload-progress strong { display: block; color: var(--text); font-weight: 500; }
.progress-track { height: 4px; margin-top: 7px; overflow: hidden; border-radius: 3px; background: var(--active); }
.progress-track span { display: block; height: 100%; width: 0; background: var(--accent); }

.content-pane { min-width: 0; min-height: 0; position: relative; background: #fff; }
.preview-mode { grid-template-columns: minmax(0, 1fr); }
.preview-mode .browser-pane { display: none; }
.preview-panel { height: 100%; overflow: auto; padding: 28px 34px 48px; }
.preview-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.preview-heading p { margin-top: 4px; color: var(--muted); }
.preview-count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; padding-top: 24px; }
.preview-load-more-row { grid-column: 1 / -1; display: flex; justify-content: center; padding: 4px 0 8px; }
.preview-card { min-width: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: #fff; text-align: left; transition: border-color .15s ease, box-shadow .15s ease; }
.preview-card:hover { border-color: #9aa8aa; box-shadow: 0 5px 16px #17232612; }
.preview-thumb { position: relative; display: grid; place-items: center; height: 190px; overflow: hidden; background: #f2f5f5; }
.preview-thumb.has-image { background: #eef2f1; }
.preview-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.preview-thumb-placeholder { color: var(--muted); font-size: 12px; }
.preview-thumb.has-image .preview-thumb-placeholder { display: none; }
.preview-card-content { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.preview-card-content strong, .preview-card-content small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-card-content strong { font-size: 14px; font-weight: 600; }
.preview-card-content small { color: var(--muted); font-size: 11px; }
.preview-card-content .preview-card-path { color: var(--faint); }
.preview-loading { padding: 30px 0; color: var(--muted); }
.preview-image-dialog { width: min(1100px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: #fff; box-shadow: 0 14px 42px #17232624; }
.preview-image-dialog::backdrop { background: #17232666; }
.preview-image-dialog-shell { display: flex; flex-direction: column; max-height: calc(100dvh - 48px); }
.preview-image-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 22px; border-bottom: 1px solid var(--rule); }
.preview-image-dialog-heading h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.preview-image-dialog-heading p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.preview-image-dialog-close { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 5px; color: var(--muted); background: transparent; font-size: 24px; line-height: 1; }
.preview-image-dialog-close:hover { color: var(--text); background: var(--raised); }
.preview-image-dialog-canvas { min-height: 240px; max-height: calc(100dvh - 138px); display: grid; place-items: center; padding: 22px; overflow: auto; background: #f8f9f9; }
.preview-image-dialog-canvas img { display: block; max-width: 100%; max-height: calc(100dvh - 182px); object-fit: contain; }
.preview-image-dialog-status { color: var(--muted); font-size: 13px; }
@media (max-width: 760px) {
  .preview-panel { padding: 22px 18px 34px; }
  .preview-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
  .preview-thumb { height: 150px; }
  .preview-image-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .preview-image-dialog-shell { max-height: calc(100dvh - 24px); }
  .preview-image-dialog-heading { padding: 14px 16px; }
  .preview-image-dialog-canvas { max-height: calc(100dvh - 92px); padding: 12px; }
  .preview-image-dialog-canvas img { max-height: calc(100dvh - 118px); }
}
.dataset-detail { height: 100%; overflow: auto; padding: 30px 34px 48px; }
.detail-empty { height: 100%; display: grid; place-content: center; gap: 4px; color: var(--muted); text-align: center; }
.detail-empty strong { color: var(--text); font-size: 15px; font-weight: 500; }
.dataset-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.dataset-title-row p { margin-top: 4px; color: var(--muted); }
.dataset-strip { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); border-bottom: 1px solid var(--rule); }
.dataset-strip > div { min-height: 86px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 20px; border-right: 1px solid var(--rule); }
.dataset-strip > div:first-child { padding-left: 0; }
.dataset-strip > div:last-child { border-right: 0; }
.dataset-strip span { color: var(--muted); font-size: 12px; }
.dataset-strip strong { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
#dataset-readiness[data-ready="true"] { color: var(--positive); }
#dataset-readiness[data-ready="false"] { color: var(--warning); }
.dataset-sections { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding-top: 28px; }
.dataset-sections h3 { margin-bottom: 9px; }
.key-value-list { border-top: 1px solid var(--rule); }
.key-value-row { min-height: 42px; display: grid; grid-template-columns: minmax(110px, .7fr) minmax(0, 1.3fr); align-items: center; gap: 18px; border-bottom: 1px solid var(--rule); }
.key-value-row span { color: var(--muted); font-size: 12px; }
.key-value-row strong { overflow-wrap: anywhere; font-weight: 500; text-align: right; }

.viewer-shell { position: absolute; inset: 0; display: grid; grid-template-rows: 52px minmax(0, 1fr); background: #fff; }
.viewer-toolbar { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--rule); }
.viewer-name { min-width: 0; flex: 1; display: flex; align-items: center; gap: 11px; }
.viewer-name h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; line-height: 24px; }
#annotation-count { flex: none; color: var(--muted); font-size: 12px; white-space: nowrap; }
.annotation-save-status { flex: none; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
.annotation-save-status[data-state="warning"] { color: var(--warning); }
.annotation-save-status[data-state="ready"] { color: var(--positive); }
.viewer-actions { flex: none; display: flex; align-items: center; gap: 14px; height: 100%; }
.viewer-actions .text-button, .viewer-more summary { font-size: 12px; }
.viewer-panel-button { border-bottom: 2px solid transparent; }
.viewer-panel-button[aria-pressed="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.viewer-more { position: relative; }
.viewer-more summary { list-style: none; cursor: pointer; font-weight: 500; }
.viewer-more summary::-webkit-details-marker { display: none; }
.viewer-more-menu { position: absolute; z-index: 8; top: calc(100% + 14px); right: -18px; width: 156px; padding: 5px; border: 1px solid var(--border); border-radius: 6px; background: #fff; box-shadow: 0 8px 18px #17232616; }
.viewer-more-menu button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 4px; color: var(--text); background: #fff; text-align: left; white-space: nowrap; font-size: 12px; }
.viewer-more-menu button:hover { background: var(--raised); }
.viewer-stage { position: relative; min-height: 0; background: #fff; }
.viewer-stage iframe { display: block; width: 100%; height: 100%; border: 0; }
.viewer-empty { position: absolute; inset: 0; display: grid; place-content: center; color: var(--muted); }
.viewer-empty strong { font-size: 15px; font-weight: 400; }
.viewer-empty.file-detail { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; padding: 28px 32px; overflow: auto; text-align: left; }
.viewer-empty.file-detail strong { color: var(--text); font-size: 18px; font-weight: 600; }
.file-meta, .file-note { color: var(--muted); font-size: 12px; }
.file-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.file-actions a { display: inline-flex; align-items: center; text-decoration: none; }
.source-address { max-width: 980px; overflow-wrap: anywhere; color: var(--muted); font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.file-preview { width: 100%; max-width: 980px; margin: 4px 0 0; padding: 16px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; background: #f8f9f9; color: var(--text); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.image-preview { max-width: min(980px, 100%); max-height: calc(100% - 110px); object-fit: contain; border: 1px solid var(--border); }
.view-viewer .app-shell { grid-template-rows: minmax(0, 1fr); }
.view-viewer .app-header, .view-viewer .project-bar { display: none; }
.view-viewer .project-view { grid-template-rows: minmax(0, 1fr); }
.view-viewer .work-area { grid-template-columns: 292px minmax(0, 1fr); }
.view-viewer .work-area.preview-mode { grid-template-columns: minmax(0, 1fr); }
.view-viewer .file-search { padding-top: 10px; }

.contract-view { min-height: 0; overflow: auto; padding: 28px 34px 48px; }
.contract-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.contract-heading p { margin-top: 4px; color: var(--muted); }
.contract-heading > span { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.contract-table-head, .contract-row { display: grid; grid-template-columns: minmax(240px, 2fr) minmax(100px, .7fr) minmax(110px, .8fr) minmax(100px, .7fr) minmax(130px, .9fr); gap: 16px; align-items: center; }
.workflow-contract .contract-table-head, .workflow-contract .contract-row { grid-template-columns: minmax(230px, 2fr) minmax(170px, 1.25fr) minmax(100px, .8fr) minmax(90px, .75fr) minmax(90px, .75fr) minmax(130px, 1fr); }
.contract-table-head { height: 36px; color: var(--muted); font-size: 12px; }
.contract-row { width: 100%; min-height: 60px; padding: 0; border: 0; border-top: 1px solid var(--rule); color: var(--text); background: transparent; text-align: left; }
.contract-row:hover { background: #f8f9f9; }
.contract-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contract-identity { display: flex; flex-direction: column; gap: 2px; }
.contract-identity strong { overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.contract-identity small, .contract-row .muted { color: var(--muted); font-size: 12px; }
.state-label { color: var(--muted); }
.state-label[data-state="frozen"], .state-label[data-state="approved"] { color: var(--positive); }

.record-dialog { width: min(780px, calc(100vw - 32px)); }
.record-dialog-body { display: flex; flex-direction: column; }
.record-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.record-kind { display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; }
.record-detail { max-height: min(58vh, 560px); overflow: auto; }
.record-section { padding: 18px 0 4px; border-bottom: 1px solid var(--rule); }
.record-section:last-child { border-bottom: 0; }
.record-section h3 { margin-bottom: 8px; }
.record-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.record-metric { min-width: 0; }
.record-metric span { display: block; color: var(--muted); font-size: 11px; }
.record-metric strong { display: block; margin-top: 2px; overflow-wrap: anywhere; font-weight: 500; }
.record-lines { border-top: 1px solid var(--rule); }
.record-line { min-height: 38px; display: grid; grid-template-columns: minmax(130px, .7fr) minmax(0, 1.3fr); align-items: center; gap: 18px; border-bottom: 1px solid var(--rule); }
.record-line span:first-child { color: var(--muted); font-size: 12px; }
.record-line span:last-child { overflow-wrap: anywhere; text-align: right; }
.quality-check { min-height: 40px; display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 12px; border-top: 1px solid var(--rule); }
.quality-check strong { font-size: 12px; font-weight: 600; }
.quality-check strong[data-status="passed"] { color: var(--positive); }
.quality-check strong[data-status="warning"] { color: var(--warning); }
.quality-check strong[data-status="failed"] { color: var(--negative); }
.quality-check span { color: var(--muted); font-size: 12px; }
.annotation-sample { width: 100%; border-collapse: collapse; font-size: 12px; }
.annotation-sample th, .annotation-sample td { padding: 8px 10px 8px 0; border-top: 1px solid var(--rule); text-align: left; vertical-align: top; }
.annotation-sample th { color: var(--muted); font-weight: 500; }
.annotation-sample td { overflow-wrap: anywhere; }
.approval-confirm { margin: 16px 0 0 !important; }

.form-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 24px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: #fff; box-shadow: 0 14px 42px #17232624; }
.form-dialog-wide { width: min(680px, calc(100vw - 32px)); }
.form-dialog::backdrop { background: #17232666; }
.form-dialog form { display: flex; flex-direction: column; }
.form-dialog p { margin: 6px 0 22px; color: var(--muted); }
.form-dialog label { display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px; font-weight: 500; }
.form-dialog input, .form-dialog select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--control); border-radius: 6px; background: #fff; }
.form-dialog input:focus, .form-dialog select:focus { outline: 2px solid #176a7038; border-color: var(--accent); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-dialog .check-field { min-height: 38px; flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.form-dialog .check-field input { width: 16px; height: 16px; margin: 0; }
.confirm-field { margin-top: 6px; }
.form-note { color: var(--muted); font-size: 12px; line-height: 1.6; }
.dialog-error { min-height: 18px; margin-top: 7px; color: var(--negative); font-size: 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.label-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 8px; }
.label-rows { display: flex; flex-direction: column; gap: 8px; }
.label-row { display: grid; grid-template-columns: minmax(180px, 1fr) 180px 42px 24px; gap: 8px; align-items: center; }
.label-row-header { color: var(--muted); font-size: 11px; }
.label-row-header span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label-row input, .label-row select { height: 36px; }
.label-row input[type="color"] { width: 42px; height: 36px; padding: 3px; cursor: pointer; appearance: none; -webkit-appearance: none; }
.label-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.label-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 3px; }
.label-row button { width: 24px; height: 30px; border: 0; color: var(--muted); background: transparent; }
.label-row button:hover { color: var(--negative); }
.label-color-swatch { display: inline-block; width: 12px; height: 12px; margin-right: 7px; border: 1px solid #17232633; border-radius: 50%; vertical-align: -1px; }
.label-record-name { display: inline-flex; align-items: center; }
.notice { position: fixed; right: 22px; bottom: 22px; z-index: 40; max-width: min(400px, calc(100vw - 32px)); padding: 10px 14px; border: 1px solid var(--border); border-radius: 7px; background: #fff; box-shadow: 0 8px 24px #17232616; }

@media (max-width: 1180px) {
  .project-bar { grid-template-columns: minmax(180px, 1fr) auto auto; gap: 14px; padding: 0 18px; }
  .project-heading .project-code { display: none; }
  .project-tabs { gap: 14px; }
  .project-actions .secondary-button { display: none; }
  .work-area { grid-template-columns: 280px minmax(0, 1fr); }
  .dataset-sections { gap: 28px; }
}

@media (max-width: 900px) {
  .app-shell { grid-template-rows: 48px minmax(0, 1fr); }
  .app-header { padding: 0 16px; }
  .brand small { display: none; }
  .workspace { border-top-color: var(--rule); }
  .projects-view { padding: 22px 18px 40px; }
  .project-table-head { display: none; }
  .project-row { grid-template-columns: minmax(0, 1fr) auto; min-height: 68px; }
  .project-row > :not(.project-name):not(.visibility-label) { display: none; }
  .project-view { grid-template-rows: 94px minmax(0, 1fr); }
  .project-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 47px 47px; padding: 0 16px; }
  .project-heading { grid-column: 1; grid-row: 1; }
  .project-actions { grid-column: 2; grid-row: 1; }
  .project-tabs { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; justify-content: flex-start; }
  .work-area { grid-template-columns: 260px minmax(0, 1fr); }
  .dataset-detail { padding: 24px; }
  .dataset-strip { grid-template-columns: 1fr 1fr; }
  .dataset-strip > div { border-bottom: 1px solid var(--rule); }
  .dataset-strip > div:nth-child(2) { border-right: 0; }
  .dataset-sections { grid-template-columns: 1fr; gap: 26px; }
  .contract-view { padding: 24px 20px 40px; }
  .contract-table-head { display: none; }
  .contract-row { grid-template-columns: minmax(0, 1fr) auto; min-height: 68px; }
  .workflow-contract .contract-row { grid-template-columns: minmax(0, 1fr) auto; }
  .contract-row > :not(.contract-identity):not(.state-label) { display: none; }
  .record-metrics { grid-template-columns: 1fr 1fr; }
  .viewer-actions { gap: 10px; }
}

@media (max-width: 700px) {
  .account-menu summary > span:last-child { display: none; }
  .project-heading #current-project-title { font-size: 17px; }
  .project-actions .primary-button { padding-inline: 11px; }
  .work-area, .view-viewer .work-area { display: block; }
  .browser-pane { width: 100%; height: 100%; border-right: 0; }
  .content-pane { display: none; }
  .view-viewer .browser-pane { display: none; }
  .view-viewer .content-pane { display: block; height: 100%; }
  .viewer-shell { grid-template-rows: 82px minmax(0, 1fr); }
  .viewer-toolbar { flex-wrap: wrap; align-content: center; gap: 3px; padding: 4px 16px; }
  .viewer-name { flex-basis: 100%; }
  .viewer-actions { width: 100%; height: 32px; gap: 15px; overflow-x: auto; }
  .viewer-more-menu { top: calc(100% + 8px); right: auto; left: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .label-row-header { display: none; }
  .label-row { grid-template-columns: 1fr 42px 28px; }
  .label-row select { grid-column: 1; grid-row: 2; }
  .label-row input[type="color"] { grid-column: 2; grid-row: 1; }
  .label-row button { grid-column: 3; grid-row: 1; }
  .record-metrics { grid-template-columns: 1fr; gap: 10px; }
  .record-line { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
  .record-line span:last-child { text-align: left; }
}

@media (max-width: 430px) {
  .page-title-row { margin-bottom: 12px; }
  .project-view { grid-template-rows: 94px minmax(0, 1fr); }
  .project-bar { padding: 0 16px; }
  .project-heading { gap: 8px; }
  .project-heading .back-button { font-size: 12px; }
  .project-tabs { gap: 18px; }
  .contract-heading { flex-direction: column; gap: 5px; }
}