:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --ink: #181b21;
  --muted: #727985;
  --faint: #9da3ad;
  --line: #e4e7eb;
  --line-strong: #d8dce2;
  --blue: #2563eb;
  --blue-soft: #edf3ff;
  --green: #16a36a;
  --green-soft: #eaf8f1;
  --amber: #b87500;
  --amber-soft: #fff6de;
  --red: #c73939;
  --red-soft: #fff0f0;
  --console: #17191d;
  --radius: 8px;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

.app-header {
  height: 62px;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
}

.header-inner {
  width: min(1360px, calc(100% - 48px));
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.brand, .main-nav a, .text-link, .back-link, .small-primary { text-decoration: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; font-weight: 700; letter-spacing: -.01em; }
.brand-mark { width: 28px; height: 28px; border-radius: 7px; display: inline-grid; place-items: center; background: #17191e; color: white; font-weight: 800; font-size: 14px; }

.main-nav { height: 100%; display: flex; gap: 6px; align-items: center; }
.main-nav a { height: 100%; padding: 0 16px; display: grid; place-items: center; position: relative; color: #646b76; font-weight: 550; }
.main-nav a:hover { color: var(--ink); }
.main-nav a.active { color: var(--ink); }
.main-nav a.active::after { content: ""; height: 2px; position: absolute; left: 16px; right: 16px; bottom: 0; background: var(--ink); }

.header-account { justify-self: end; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; }
.service-dot, .warning-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }
.warning-dot { background: #e5a11a; }
.link-button { border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--muted); padding: 0 0 0 12px; cursor: pointer; }
.link-button:hover { color: var(--ink); }

.app-main { width: min(1320px, calc(100% - 64px)); margin: 0 auto; padding: 34px 0 82px; }
.service-footer { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; height: 36px; border-top: 1px solid var(--line); background: rgba(255,255,255,.96); display: flex; justify-content: space-between; align-items: center; padding: 0 32px; color: var(--muted); font-size: 11px; backdrop-filter: blur(12px); }
.service-footer span { display: inline-flex; align-items: center; gap: 7px; }
.storage-warning { min-height: 42px; padding: 8px max(32px, calc((100% - 1320px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #efd18c; background: var(--amber-soft); color: #775411; font-size: 11px; }
.storage-warning > span { display: inline-flex; align-items: center; gap: 7px; }
.storage-warning strong { color: #5f430e; }
.storage-warning b { font-weight: 750; }
.storage-warning a { color: #6f4c08; font-weight: 700; text-decoration: none; white-space: nowrap; }

.section-kicker { display: block; color: var(--blue); font-size: 10px; line-height: 1; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin: 4px 0 27px; }
.page-heading h1, .job-heading h1 { margin: 8px 0 3px; font-size: 28px; line-height: 1.2; letter-spacing: -.035em; font-weight: 690; }
.page-heading p, .job-heading p { margin: 0; color: var(--muted); }
.compact-heading { min-height: 72px; }

.pipeline-mini { display: flex; align-items: center; gap: 10px; padding-bottom: 4px; color: #606773; }
.pipeline-mini span { border: 1px solid var(--line-strong); background: var(--surface); padding: 6px 9px; border-radius: 5px; font-size: 11px; font-weight: 700; }
.pipeline-mini i { display: block; width: 24px; height: 1px; background: var(--line-strong); }

.surface { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.create-surface, .recent-surface, .history-surface { margin-bottom: 20px; }
.surface-title { min-height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.surface-title > div { display: flex; align-items: center; gap: 12px; }
.surface-title h2, .aside-heading h2 { margin: 0; font-size: 14px; letter-spacing: -.01em; }
.surface-title p, .aside-heading p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.number-chip { width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 750; color: #5f6671; }
.quiet-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: 999px; background: #f5f7f8; color: #606771; font-size: 11px; }
.text-link { color: var(--blue); font-size: 12px; font-weight: 600; }

.job-form { padding: 0 20px 20px; }
.profile-field { min-height: 76px; display: grid; grid-template-columns: 34px 1fr minmax(270px, 42%); align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.profile-field select { width: 100%; height: 38px; padding: 0 34px 0 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fafbfc; color: var(--ink); font: inherit; font-size: 12px; outline: none; }
.profile-field select:focus { border-color: #7598e8; box-shadow: 0 0 0 3px var(--blue-soft); }
.file-field { min-height: 76px; display: grid; grid-template-columns: 34px 1fr minmax(120px, auto); align-items: center; gap: 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.file-field:hover .file-name { border-color: #aab2be; color: var(--ink); }
.field-index { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #f0f2f5; color: #727985; font-size: 11px; font-weight: 700; }
.file-copy { display: flex; flex-direction: column; }
.file-copy strong, .soc-fieldset strong { font-size: 13px; font-weight: 650; }
.file-copy small, .soc-fieldset small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.file-name { max-width: 350px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--line-strong); border-radius: 6px; padding: 7px 12px; color: #686f7a; background: #fafbfc; font-size: 12px; }
.file-field input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.model-inspection { margin: 0; padding: 13px 12px 14px 46px; border-bottom: 1px solid var(--line); background: #f8faff; }
.inspection-status { display: flex; align-items: center; gap: 8px; color: #4f648f; font-size: 11px; font-weight: 650; }
.inspection-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.model-inspection.succeeded { background: #f5faf7; }
.model-inspection.succeeded .inspection-status { color: #15754f; }
.model-inspection.succeeded .inspection-status i { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.model-inspection.failed { background: #fff7f7; }
.model-inspection.failed .inspection-status { color: var(--red); }
.model-inspection.failed .inspection-status i { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.inspection-progress { height: 3px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: #e4eaf5; }
.inspection-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--blue); transition: width .18s ease; }
.model-class-info { margin-top: 12px; display: grid; grid-template-columns: 100px 1fr; gap: 14px; }
.model-class-info > div { min-width: 0; padding: 10px 12px; border: 1px solid #dfe8e3; border-radius: 6px; background: #fff; }
.model-class-info > div > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 9px; font-weight: 650; }
.model-class-info strong { color: #14724d; font-size: 20px; line-height: 1; }
.model-class-info p { max-height: 92px; margin: 0; display: flex; flex-wrap: wrap; gap: 5px; overflow: auto; }
.model-class-info p span { padding: 3px 6px; border-radius: 4px; background: #eef3f0; color: #405047; font-size: 9px; }
.model-class-info p b { margin-right: 4px; color: #188159; font-weight: 750; }

.soc-fieldset { margin: 0; padding: 17px 0; border: 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; align-items: center; }
.soc-fieldset legend { float: left; padding: 0; display: flex; align-items: center; gap: 12px; }
.soc-fieldset legend > span:last-child { display: flex; flex-direction: column; }
.soc-options { display: flex; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; }
.soc-options label { cursor: pointer; }
.soc-options label + label { border-left: 1px solid var(--line-strong); }
.soc-options input { position: absolute; opacity: 0; }
.soc-options span { min-width: 76px; padding: 7px 10px; display: block; text-align: center; color: var(--muted); background: #fafbfc; font-size: 11px; font-weight: 650; }
.soc-options input:checked + span { color: #fff; background: #1d2026; }

.android-option { min-height: 72px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.android-option input { position: absolute; opacity: 0; pointer-events: none; }
.android-option-check { width: 34px; height: 20px; flex: 0 0 auto; position: relative; border-radius: 999px; background: #c9ced6; transition: background .18s ease; }
.android-option-check::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0002; transition: transform .18s ease; }
.android-option input:checked + .android-option-check { background: #1d2026; }
.android-option input:checked + .android-option-check::after { transform: translateX(14px); }
.android-option > span:last-child { display: flex; flex-direction: column; }
.android-option strong { font-size: 13px; font-weight: 650; }
.android-option small { margin-top: 3px; color: var(--muted); font-size: 11px; }

.submit-row { padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.submit-row > div { display: flex; flex-direction: column; }
.submit-row strong { font-size: 12px; }
.submit-row span { color: var(--muted); font-size: 11px; }
.primary { border: 0; border-radius: 6px; background: #1d2026; color: #fff; padding: 10px 17px; cursor: pointer; font-weight: 650; font-size: 12px; }
.primary:hover { background: #050609; }
.primary:disabled { opacity: .48; cursor: wait; }
.submit span { margin-left: 12px; color: white; }
.small-primary { display: inline-flex; align-items: center; gap: 14px; }

.upload-progress { position: relative; margin: 0 20px 20px; height: 32px; overflow: hidden; background: #f0f2f5; border-radius: 5px; }
.upload-progress div { height: 100%; width: 0; background: #dfe9ff; transition: width .18s ease; }
.upload-progress span { position: absolute; inset: 0; display: grid; place-items: center; color: #365b9c; font-size: 11px; font-weight: 650; }
.alert { border-radius: 6px; padding: 10px 12px; }
.create-surface > .alert { margin: 0 20px 20px; }
.error { color: #9d2f2f; background: var(--red-soft); border: 1px solid #f3cccc; }
.hidden { display: none !important; }

/* Browser-local WebADB workspace */
.device-heading { align-items: flex-end; }
.device-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.device-actions button { min-height: 44px; }
.device-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; margin-bottom: 22px; }
.device-card, .deploy-card { padding: 24px; min-width: 0; }
.device-facts, .deploy-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 20px 0; border-top: 1px solid var(--line, #e3e6eb); }
.device-facts div, .deploy-facts div { padding: 15px 6px 13px; border-bottom: 1px solid var(--line, #e3e6eb); min-width: 0; }
.device-facts dt, .deploy-facts dt { color: #7b8492; font-size: 12px; margin-bottom: 6px; }
.device-facts dd, .deploy-facts dd { margin: 0; color: #1d222a; font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.deploy-empty { min-height: 240px; display: grid; place-content: center; justify-items: center; text-align: center; color: #7b8492; }
.deploy-empty .text-link { margin-top: 8px; }
.deploy-progress { height: 6px; overflow: hidden; background: #eceef2; border-radius: 99px; margin-top: 18px; }
.deploy-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: #20242b; transition: width .25s ease; }
#deployProgressCopy { color: #697281; min-height: 22px; font-size: 13px; }
.deploy-log { margin: 16px 0 0; padding: 14px; min-height: 92px; max-height: 180px; overflow: auto; color: #d8dee9; background: #171a20; border-radius: 10px; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.npu-result { margin: 18px 0 0; border: 1px solid #dfe3e9; border-radius: 12px; overflow: hidden; }
.npu-result img { width: 100%; max-height: 360px; object-fit: contain; display: block; background: #111319; }
.npu-result figcaption { padding: 11px 13px; display: flex; justify-content: space-between; color: #626b78; font-size: 12px; }
.npu-result a { color: #1f7a55; font-weight: 700; }
.terminal-surface { padding: 0; overflow: hidden; }
.terminal-heading { min-height: 74px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #e0e3e8; }
.terminal-heading > div { display: flex; align-items: center; gap: 12px; }
.terminal-heading h2 { margin: 0 0 3px; font-size: 17px; }
.terminal-heading p { margin: 0; color: #7c8490; font-size: 12px; }
.terminal-warning { color: #a45d20; font-size: 12px; }
.terminal-mount { height: 480px; padding: 14px 12px; background: #101217; }
.terminal-mount .xterm { height: 100%; }
.terminal-mount .xterm-viewport { scrollbar-color: #444b58 #101217; }
.deploy-job { display: flex; justify-content: center; margin-top: 18px; }
.model-downloads .deploy-link { color: #11724d; border-color: #9fcdbb; }
@media (max-width: 900px) {
  .device-layout { grid-template-columns: 1fr; }
  .device-heading { align-items: flex-start; }
  .device-actions { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .device-facts, .deploy-facts { grid-template-columns: 1fr; }
  .terminal-heading { align-items: flex-start; flex-direction: column; padding: 16px; }
  .terminal-heading > div:last-child { align-items: flex-start; flex-direction: column; }
  .terminal-mount { height: 400px; }
}

.recent-list { padding: 0 20px; }
.recent-row { min-height: 65px; display: grid; grid-template-columns: minmax(280px, 1fr) 90px 120px 150px 50px 14px; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); text-decoration: none; }
.recent-row:last-child { border-bottom: 0; }
.recent-row:hover { background: #fafbfc; margin: 0 -20px; padding: 0 20px; }
.model-cell { min-width: 0; display: flex; align-items: center; gap: 11px; text-decoration: none; }
.model-cell > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.model-cell strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.model-cell small { color: var(--muted); font-size: 10px; }
.model-icon { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 5px; background: #f0f2f5; color: #5e6570; font-size: 9px; font-weight: 800; }
.soc-tag { color: #676e79; font-size: 10px; font-weight: 700; }
.status-text { display: inline-flex; align-items: center; gap: 7px; color: #626975; font-size: 11px; font-weight: 600; }
.status-text::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #a6acb5; }
.status-text.succeeded { color: #168257; }
.status-text.succeeded::before { background: var(--green); }
.status-text.failed { color: var(--red); }
.status-text.failed::before { background: var(--red); }
.status-text.expired { color: var(--amber); }
.status-text.expired::before { background: #e5a11a; }
.status-text.inspecting, .status-text.exporting_onnx, .status-text.validating_onnx, .status-text.quantizing, .status-text.converting_rknn, .status-text.building_android, .status-text.packaging { color: var(--blue); }
.status-text.inspecting::before, .status-text.exporting_onnx::before, .status-text.validating_onnx::before, .status-text.quantizing::before, .status-text.converting_rknn::before, .status-text.building_android::before, .status-text.packaging::before { background: var(--blue); }
.row-progress, .history-progress > span { height: 4px; background: #edf0f3; border-radius: 999px; overflow: hidden; }
.row-progress i, .history-progress i { display: block; height: 100%; background: var(--blue); border-radius: inherit; }
.progress-value { font-size: 10px; color: #646b76; }
.row-arrow { color: #a5abb4; font-size: 20px; }
.empty-state { padding: 50px 24px; text-align: center; color: var(--muted); font-size: 12px; }

.back-link { display: inline-block; color: var(--muted); font-size: 11px; margin-bottom: 14px; }
.back-link:hover { color: var(--ink); }
.job-heading { margin: 0 0 22px; }
.job-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; }
.job-heading h1 { font-size: 25px; margin-top: 7px; }
.job-heading p { font-size: 11px; }
.status-badge { margin-top: 8px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-strong); background: #fff; border-radius: 999px; padding: 6px 11px; color: #626975; font-size: 10px; font-weight: 700; }
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #a6acb5; }
.status-badge.succeeded { color: #13754f; border-color: #bfe7d3; background: #f2fbf6; }
.status-badge.succeeded::before { background: var(--green); }
.status-badge.failed { color: var(--red); border-color: #efcaca; background: #fff7f7; }
.status-badge.failed::before { background: var(--red); }
.status-badge.inspecting, .status-badge.exporting_onnx, .status-badge.validating_onnx, .status-badge.quantizing, .status-badge.converting_rknn, .status-badge.building_android, .status-badge.packaging { color: var(--blue); border-color: #cad9fb; background: #f5f8ff; }
.status-badge.inspecting::before, .status-badge.exporting_onnx::before, .status-badge.validating_onnx::before, .status-badge.quantizing::before, .status-badge.converting_rknn::before, .status-badge.building_android::before, .status-badge.packaging::before { background: var(--blue); }

.summary-band { min-height: 104px; display: grid; grid-template-columns: repeat(6,1fr); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.summary-band > div { padding: 16px 20px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.summary-band > div:last-child { border-right: 0; }
.summary-band span { color: var(--muted); font-size: 10px; margin-bottom: 5px; }
.summary-band strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.summary-band small { margin-top: 3px; color: var(--muted); font-size: 9px; }

.stage-section { height: 70px; margin: 16px 0; display: grid; grid-template-columns: 58px 1fr; align-items: center; }
.stage-section h2 { margin: 0; font-size: 13px; }
.stage-track { height: 70px; padding: 0 6px; display: grid; grid-template-columns: repeat(8,1fr); align-items: center; }
.stage-item { min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #9399a3; text-align: center; }
.stage-item::after { content: ""; position: absolute; z-index: 0; top: 13px; left: calc(50% + 16px); width: calc(100% - 32px); height: 1px; background: #e0e3e7; }
.stage-item:last-child::after { display: none; }
.stage-item span { position: relative; z-index: 1; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #d9dde3; background: #fff; font-size: 10px; font-weight: 700; }
.stage-item strong { font-size: 10px; font-weight: 600; white-space: nowrap; }
.stage-item.done { color: var(--green); }
.stage-item.done span { color: white; background: var(--green); border-color: var(--green); }
.stage-item.done span::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; background: var(--green); border-radius: 50%; font-size: 10px; }
.stage-item.done::after { background: #9fd8bf; }
.stage-item.current { color: var(--blue); }
.stage-item.current span { color: white; background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 4px #e9f0ff; }
.stage-item.skipped { color: #a5aab2; }
.stage-item.skipped.done span::after { content: "–"; background: #aeb4bd; }
.job-alert { margin: -8px 0 20px; }

.job-workspace { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(330px, .95fr); gap: 20px; align-items: start; }
.log-surface { overflow: hidden; }
.console-heading { height: 50px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 10px; }
.console-heading > div { display: flex; align-items: center; gap: 7px; }
.console-heading strong { margin-right: 12px; color: var(--ink); font-size: 13px; font-weight: 650; }
.console-heading a { margin-left: 8px; padding: 4px 8px; color: #5f6671; border: 1px solid var(--line-strong); border-radius: 4px; text-decoration: none; }
.auto-scroll { color: var(--blue); }
.live-progress { height: 2px; background: #edf0f3; }
.live-progress i { height: 100%; display: block; background: #4c83ff; transition: width .4s ease; }
.log-surface pre { margin: 0; height: 476px; padding: 17px; overflow: auto; background: #fff; color: #303641; white-space: pre-wrap; word-break: break-word; font: 11px/1.78 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

.job-sidebar { display: grid; gap: 20px; }
.artifact-surface, .preview-surface { overflow: hidden; }
.validation-surface { overflow: hidden; }
.validation-grid { display: grid; grid-template-columns: 1fr 1fr; padding: 4px 16px 14px; }
.validation-grid > div { padding: 11px 4px; border-bottom: 1px solid var(--line); }
.validation-grid span { display: block; color: var(--muted); font-size: 10px; }
.validation-grid strong { display: block; margin-top: 4px; font-size: 14px; }
.aside-heading { min-height: 54px; padding: 11px 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.aside-heading > span { color: var(--muted); font-size: 10px; }
.artifact-list { padding: 0 15px; }
.artifact-row { min-height: 48px; display: grid; grid-template-columns: 35px 1fr 16px; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); text-decoration: none; }
.artifact-row:last-child { border-bottom: 0; }
.artifact-row:hover { background: #fafbfc; margin: 0 -15px; padding: 0 15px; }
.artifact-type { width: 31px; height: 27px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 4px; color: #626a75; font-size: 8px; font-weight: 800; }
.artifact-row > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.artifact-row strong { font-size: 11px; }
.artifact-row small { font-size: 9px; color: var(--muted); }
.artifact-row b { color: #a8aeb7; font-size: 15px; text-align: right; }
.artifact-row.ready b { color: var(--blue); }
.preview-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.preview-pair figure { margin: 0; background: #f5f6f7; position: relative; min-width: 0; }
.preview-pair img { width: 100%; height: 148px; object-fit: contain; display: block; }
.preview-pair figcaption { position: absolute; left: 7px; bottom: 7px; padding: 2px 5px; background: rgba(17,19,23,.78); color: white; border-radius: 3px; font-size: 8px; font-weight: 700; }

.library-toolbar { min-height: 70px; margin-bottom: 20px; padding: 12px 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.library-filter { display: flex; align-items: flex-end; gap: 10px; }
.search-field, .select-field { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 650; }
.search-field input, .select-field select { height: 34px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; color: var(--ink); outline: none; }
.search-field input { width: 260px; padding: 0 10px; }
.select-field select { min-width: 128px; padding: 0 28px 0 10px; }
.search-field input:focus, .select-field select:focus { border-color: #7598e8; box-shadow: 0 0 0 3px var(--blue-soft); }
.filter-button { height: 34px; padding: 0 15px; border: 0; border-radius: 6px; background: #202329; color: #fff; cursor: pointer; font-size: 11px; font-weight: 650; }
.reset-filter { height: 34px; display: inline-flex; align-items: center; padding: 0 7px; color: var(--blue); text-decoration: none; font-size: 11px; }
.library-count { padding-bottom: 8px; color: var(--muted); font-size: 11px; }

.model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.model-card { overflow: hidden; transition: border-color .16s ease, transform .16s ease; }
.model-card:hover { border-color: #c9ced6; transform: translateY(-1px); }
.model-preview { height: 188px; display: block; position: relative; overflow: hidden; background: #eef1f4; border-bottom: 1px solid var(--line); text-decoration: none; }
.model-preview img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .25s ease; }
.model-card:hover .model-preview img { transform: scale(1.015); }
.model-preview-empty { height: 100%; display: grid; place-content: center; gap: 2px; color: #8c939e; text-align: center; }
.model-preview-empty strong { letter-spacing: .12em; font-size: 17px; }
.model-preview-empty small { font-size: 10px; }
.soc-overlay { position: absolute; left: 10px; top: 10px; padding: 4px 7px; border-radius: 4px; background: rgba(24,27,33,.84); color: #fff; font-size: 9px; font-weight: 700; }
.model-card-body { padding: 15px; }
.model-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.model-card-title > div { min-width: 0; display: flex; align-items: center; gap: 10px; }
.model-card-title h2 { max-width: 220px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.model-card-title p { margin: 1px 0 0; color: var(--muted); font-size: 9px; }
.model-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 14px; margin: 16px 0; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.model-facts div { min-width: 0; }
.model-facts dt { color: var(--muted); font-size: 9px; }
.model-facts dd { margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 650; }
.model-downloads { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.model-downloads a, .model-downloads button { padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 5px; color: #5c6470; background: #fff; text-decoration: none; font-family: inherit; font-size: 9px; font-weight: 650; line-height: 1.5; cursor: pointer; }
.model-downloads a:hover { color: var(--ink); border-color: #aeb5bf; }
.model-downloads .download-primary { border-color: #1e2228; background: #1e2228; color: #fff; }
.model-downloads .regenerate-model { padding-inline: 12px; border-color: #1e2228; background: #1e2228; color: #fff; }
.model-downloads .regenerate-model:hover { background: #050609; }
.model-downloads .regenerate-model:disabled { border-color: var(--line-strong); background: #f0f2f4; color: #9aa0a9; cursor: not-allowed; }
.expired-copy { color: var(--amber); font-weight: 700; }
.regeneration-error { margin: 9px 0 0; color: var(--red); font-size: 9px; }
.library-empty { min-height: 400px; padding: 60px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-model-mark { width: 45px; height: 45px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 11px; background: #202329; color: #fff; font-weight: 800; }
.library-empty h2 { margin: 0; font-size: 17px; }
.library-empty p { margin: 6px 0 20px; color: var(--muted); font-size: 11px; }

.history-surface { overflow: hidden; }
.source-policy { min-height: 48px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); background: #f5faf7; color: #47705c; font-size: 10px; }
.source-policy span { display: inline-flex; align-items: center; gap: 7px; }
.source-policy small { color: var(--muted); }
.source-policy.attention { background: var(--amber-soft); color: #775411; box-shadow: inset 3px 0 #e5a11a; }
.history-head, .history-row { display: grid; grid-template-columns: minmax(220px, 1.4fr) 70px 110px 150px minmax(100px,.7fr) 125px 44px; align-items: center; gap: 12px; padding: 0 20px; }
.history-head { height: 44px; background: #fafbfc; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 650; }
.history-row { min-height: 66px; border-bottom: 1px solid var(--line); }
.history-row.backup-required { background: #fff9eb; box-shadow: inset 3px 0 #e5a11a; }
.history-row:last-child { border-bottom: 0; }
.history-row time { color: var(--muted); font-size: 10px; }
.history-progress { display: grid; grid-template-columns: 1fr 34px; align-items: center; gap: 8px; }
.history-progress strong { color: #656c77; font-size: 10px; }
.source-actions { display: flex; align-items: center; gap: 5px; }
.source-actions a { padding: 5px 7px; border: 1px solid var(--line-strong); border-radius: 5px; color: #626a75; background: #fff; text-decoration: none; white-space: nowrap; font-size: 9px; font-weight: 650; }
.source-actions a:hover { border-color: #aeb5bf; color: var(--ink); }
.source-actions a.downloaded { border-color: #bfe5d2; background: #f2faf6; color: #168257; }
.danger-link { border: 0; background: transparent; color: var(--red); padding: 4px; cursor: pointer; font-size: 11px; }
.danger-link:disabled { color: #b4b8bf; cursor: not-allowed; }

.login-page { min-height: 100vh; background: #f5f6f8; }
.login-page .app-main { width: 100%; padding: 0; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(410px, 100%); padding: 34px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 55px rgba(25,31,42,.08); }
.login-brand { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.login-copy { margin: 42px 0 25px; }
.login-copy h1 { margin: 9px 0 7px; font-size: 25px; letter-spacing: -.035em; }
.login-copy p { margin: 0; color: var(--muted); font-size: 12px; }
.stack-form { display: grid; gap: 15px; }
.stack-form label { color: #545b66; font-size: 11px; font-weight: 650; }
.stack-form input { width: 100%; margin-top: 6px; padding: 10px 11px; border: 1px solid var(--line-strong); border-radius: 6px; background: white; outline: none; }
.stack-form input:focus { border-color: #7598e8; box-shadow: 0 0 0 3px #edf3ff; }
.stack-form .primary { margin-top: 3px; padding: 11px; }
.login-risk { margin: 25px 0 0; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: flex-start; gap: 7px; color: #8a6b28; font-size: 10px; }
.login-risk .warning-dot { margin-top: 4px; }

@media (max-width: 1020px) {
  .app-main { width: min(940px, calc(100% - 36px)); }
  .job-workspace { grid-template-columns: 1fr; }
  .log-surface pre { height: 400px; }
  .job-sidebar { grid-template-columns: 1fr 1fr; }
  .history-head, .history-row { grid-template-columns: minmax(200px, 1.5fr) 70px 105px 145px 90px 44px; }
  .history-head > :nth-child(6), .history-row > :nth-child(6) { display: none; }
  .recent-row { grid-template-columns: minmax(240px,1fr) 80px 110px 130px 45px 12px; }
  .model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .header-inner { width: calc(100% - 28px); grid-template-columns: 1fr auto; }
  .main-nav { display: none; }
  .app-main { width: calc(100% - 28px); padding-top: 22px; }
  .service-footer { padding: 0 14px; }
  .service-footer span:first-child { max-width: 62%; }
  .page-heading { align-items: flex-start; }
  .pipeline-mini { display: none; }
  .file-field { grid-template-columns: 30px 1fr; padding: 13px 0; }
  .profile-field { grid-template-columns: 30px 1fr; padding: 13px 0; }
  .profile-field select { grid-column: 2; }
  .file-name { grid-column: 2; justify-self: start; }
  .model-inspection { padding-left: 42px; }
  .soc-fieldset { grid-template-columns: 1fr; gap: 14px; }
  .soc-fieldset legend { width: 100%; }
  .soc-options { width: 100%; }
  .soc-options label { flex: 1; }
  .soc-options span { min-width: 0; }
  .submit-row { align-items: stretch; flex-direction: column; }
  .summary-band { grid-template-columns: repeat(2,1fr); }
  .summary-band > div { border-bottom: 1px solid var(--line); }
  .summary-band > div:nth-child(2n) { border-right: 0; }
  .summary-band > div:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .stage-section { height: auto; grid-template-columns: 1fr; gap: 4px; }
  .stage-track { overflow-x: auto; grid-template-columns: repeat(8,92px); justify-content: start; }
  .job-sidebar { grid-template-columns: 1fr; }
  .recent-row { grid-template-columns: 1fr 70px 12px; }
  .recent-row > :nth-child(3), .recent-row > :nth-child(4), .recent-row > :nth-child(5) { display: none; }
  .history-head { display: none; }
  .history-row { grid-template-columns: 1fr 140px 48px; padding: 12px 14px; }
  .history-row > :nth-child(2), .history-row > :nth-child(3), .history-row > :nth-child(5), .history-row > :nth-child(6) { display: none; }
  .source-policy { align-items: flex-start; flex-direction: column; padding: 11px 14px; gap: 3px; }
  .library-toolbar { align-items: stretch; flex-direction: column; }
  .library-filter { align-items: stretch; flex-wrap: wrap; }
  .search-field { flex: 1 1 100%; }
  .search-field input { width: 100%; }
  .select-field { flex: 1; }
  .library-count { padding: 0; }
  .model-grid { grid-template-columns: 1fr; }
  .job-title-row { align-items: flex-start; }
  .job-heading p { word-break: break-all; }
}

@media (max-width: 480px) {
  .brand > span:last-child { display: none; }
  .header-account > span:nth-child(2) { display: none; }
  .service-footer span:last-child { display: none; }
  .service-footer span:first-child { max-width: 100%; }
  .storage-warning { align-items: flex-start; flex-direction: column; gap: 4px; padding: 9px 14px; }
  .page-heading h1 { font-size: 25px; }
  .small-primary { padding: 9px 11px; }
  .summary-band { grid-template-columns: 1fr; }
  .summary-band > div { border-right: 0; }
  .summary-band > div:last-child { grid-column: auto; }
  .preview-pair img { height: 118px; }
  .login-card { padding: 27px 22px; }
  .model-class-info { grid-template-columns: 1fr; }
  .library-filter { flex-direction: column; }
  .filter-button, .reset-filter { justify-content: center; width: 100%; }
}