:root {
  --bg: #f4f6f4;
  --surface: #ffffff;
  --surface-soft: #f8faf8;
  --ink: #18211d;
  --muted: #66716b;
  --line: #dce3de;
  --line-strong: #c7d1ca;
  --nav: #202925;
  --nav-soft: #2d3833;
  --green: #18794e;
  --green-strong: #11633f;
  --green-soft: #e8f5ed;
  --teal: #19736f;
  --teal-soft: #e7f4f3;
  --amber: #a76005;
  --amber-soft: #fff4df;
  --red: #b4232f;
  --red-soft: #fdebed;
  --blue: #2767a8;
  --blue-soft: #eaf2fa;
  --shadow: 0 10px 30px rgba(27, 42, 33, 0.1);
  --sidebar: 232px;
  font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--bg); font-size: 14px; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: 0; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 28px; line-height: 1.25; }
h2 { font-size: 18px; line-height: 1.35; }
h3 { font-size: 15px; line-height: 1.4; }
p { line-height: 1.65; color: var(--muted); }
small { color: var(--muted); line-height: 1.45; }
code, .mono { font-family: Consolas, "Courier New", monospace; }
svg { width: 18px; height: 18px; flex: 0 0 auto; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--sidebar); color: #edf4f0; background: var(--nav); display: flex; flex-direction: column; }
.brand { height: 72px; padding: 0 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 6px; color: #132019; background: #77d59e; font-weight: 800; }
.brand div { display: grid; gap: 2px; min-width: 0; }
.brand strong { font-size: 15px; }
.brand small { color: #aebdb5; }
.main-nav { padding: 18px 12px; display: grid; gap: 4px; }
.sidebar-bottom { margin-top: auto; }
.demo-nav { padding: 12px 12px 8px; border-top: 1px solid rgba(255,255,255,0.08); }
.demo-nav > span { display: block; padding: 0 10px 7px; color: #9fb0a7; font-size: 11px; }
.nav-item { width: 100%; height: 44px; padding: 0 12px; border: 0; border-radius: 6px; color: #b9c8c0; background: transparent; display: flex; align-items: center; gap: 11px; text-align: left; }
.nav-item { text-decoration: none; }
.nav-item:hover { color: #fff; background: var(--nav-soft); }
.nav-item.active { color: #fff; background: #35443d; box-shadow: inset 3px 0 #77d59e; }
.nav-item span { flex: 1; }
.nav-item b { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; color: #153120; background: #77d59e; font-size: 11px; }
.sidebar-foot { margin-top: auto; padding: 18px 20px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
.sidebar-foot div { display: grid; gap: 2px; }
.sidebar-foot strong { font-size: 12px; }
.sidebar-foot small { color: #9fb0a7; }
.system-dot { width: 9px; height: 9px; border-radius: 50%; background: #77d59e; box-shadow: 0 0 0 4px rgba(119,213,158,0.12); }

.app-main { width: calc(100% - var(--sidebar)); margin-left: var(--sidebar); min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 20; height: 64px; padding: 0 28px; background: rgba(255,255,255,0.96); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; backdrop-filter: blur(12px); }
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); }
.crumbs svg { width: 15px; }
.crumbs strong { color: var(--ink); white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.browse-filter { height: 36px; padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); display: flex; align-items: center; gap: 7px; color: var(--muted); }
.browse-filter svg { width: 16px; }
.browse-filter select { border: 0; background: transparent; outline: none; font-weight: 600; }
.profile { height: 40px; padding-left: 10px; border-left: 1px solid var(--line); display: flex; align-items: center; gap: 9px; }
.profile > span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--teal); font-weight: 700; }
.profile div { display: grid; gap: 1px; }
.profile strong { font-size: 12px; }
.profile small { font-size: 11px; }
.icon-btn { position: relative; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--surface); display: inline-grid; place-items: center; }
.icon-btn:hover { color: var(--green); border-color: #a8cdb7; background: var(--green-soft); }
.notice-dot { position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); border: 1px solid #fff; }
.menu-btn { display: none; }

.workspace { width: 100%; max-width: 1680px; margin: 0 auto; padding: 28px; }
.screen { display: none; }
.screen.active { display: block; animation: appear 0.18s ease-out; }
@keyframes appear { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }

.page-heading { margin-bottom: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.guided-demo-bar { margin: -4px 0 16px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--blue); border-radius: 6px; background: var(--blue-soft); }
.guided-demo-bar > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.guided-demo-bar > div:first-child > svg { color: var(--blue); flex: 0 0 auto; }
.guided-demo-bar strong, .guided-demo-bar small { display: block; }
.guided-demo-bar small { color: var(--muted); margin-top: 2px; }
.guided-demo-bar .btn { white-space: nowrap; }
.page-heading > div:first-child { display: grid; gap: 5px; }
.page-heading p:not(.eyebrow) { max-width: 760px; }
.eyebrow { color: var(--green); font-size: 11px; line-height: 1.2; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.btn { min-height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 700; white-space: nowrap; }
.btn svg { width: 16px; }
.btn.primary { color: #fff; background: var(--green); border-color: var(--green); }
.btn.primary:hover { background: var(--green-strong); }
.btn.secondary { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
.btn.secondary:hover { color: var(--green); border-color: #9bc5aa; background: var(--green-soft); }
.btn.text { min-height: 32px; padding: 0 6px; color: var(--green); background: transparent; }
.btn.text:hover { color: var(--green-strong); background: var(--green-soft); }
.btn.danger { color: #fff; background: var(--red); border-color: var(--red); }
.btn.danger:hover { background: #91202a; }

.version-summary { margin-bottom: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; }
.version-summary > div { min-height: 104px; padding: 18px 20px; display: grid; align-content: center; gap: 5px; border-right: 1px solid var(--line); }
.version-summary > div:last-child { border-right: 0; }
.version-summary span { color: var(--muted); font-size: 12px; }
.version-summary strong { font-size: 26px; }
.version-summary small { font-size: 12px; }
.version-text { color: var(--green); font-family: Consolas, monospace; }
.positive { color: var(--green) !important; }
.warning { color: var(--amber) !important; }
.danger-text { color: var(--red) !important; }
.muted-text { color: var(--muted); }
.block { display: block; margin-top: 4px; }

.data-section, .production-history-panel, .candidate-detail, .execution-list, .execution-detail, .contract-main, .locked-panel { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.section-title, .panel-heading, .table-toolbar, .subsection-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.section-title > div, .panel-heading > div, .table-toolbar > div:first-child, .subsection-head > div { display: grid; gap: 3px; }

.data-section { overflow: hidden; }
.table-toolbar { min-height: 76px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.toolbar-controls { display: flex; align-items: center; gap: 8px; }
.toolbar-controls select, #statusFilter { height: 36px; padding: 0 30px 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.search-box { width: 280px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; display: flex; align-items: center; gap: 7px; background: var(--surface); }
.search-box svg { width: 16px; color: var(--muted); }
.search-box input { width: 100%; border: 0; outline: none; background: transparent; }
.table-scroll { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 940px; }
.data-table th { height: 42px; padding: 0 16px; color: var(--muted); background: var(--surface-soft); border-bottom: 1px solid var(--line); font-size: 11px; text-align: left; font-weight: 700; white-space: nowrap; }
.data-table td { height: 70px; padding: 12px 16px; border-bottom: 1px solid #edf0ee; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fafcfb; }
.service-cell { display: flex; align-items: center; gap: 10px; }
.service-cell div { min-width: 0; display: grid; gap: 2px; }
.service-cell strong { white-space: nowrap; }
.service-icon { width: 38px; height: 38px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: 0 0 auto; }
.service-icon.green { color: var(--green); background: var(--green-soft); }
.service-icon.teal { color: var(--teal); background: var(--teal-soft); }
.service-icon.blue { color: var(--blue); background: var(--blue-soft); }
.service-icon.amber { color: var(--amber); background: var(--amber-soft); }
.service-icon.red { color: var(--red); background: var(--red-soft); }
.service-icon.gray { color: #626d67; background: #edf0ee; }
.tag { min-height: 24px; width: fit-content; padding: 2px 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.tag svg { width: 14px; }
.tag.green { color: var(--green); background: var(--green-soft); border: 1px solid #c0deca; }
.tag.blue { color: var(--blue); background: var(--blue-soft); border: 1px solid #bfd4e8; }
.tag.amber { color: var(--amber); background: var(--amber-soft); border: 1px solid #efd09f; }
.tag.red { color: var(--red); background: var(--red-soft); border: 1px solid #f2bdc3; }
.tag.outline { color: var(--muted); background: var(--surface); border: 1px solid var(--line-strong); }
.status-dot { width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; display: inline-block; }
.status-dot.healthy { background: #2ca36a; box-shadow: 0 0 0 3px var(--green-soft); }
.status-dot.pending { background: #d38a1a; box-shadow: 0 0 0 3px var(--amber-soft); }
.status-dot.failed { background: #c53b48; box-shadow: 0 0 0 3px var(--red-soft); }
.status-dot.idle { background: #8b9690; box-shadow: 0 0 0 3px #edf0ee; }
.version-link { padding: 0; border: 0; color: var(--green); background: transparent; font-weight: 800; font-family: Consolas, monospace; }

.service-heading { margin-bottom: 18px; display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
.service-heading > .btn { grid-column: 1 / -1; justify-self: start; }
.service-title { display: flex; align-items: center; gap: 12px; }
.service-title > div { display: grid; gap: 3px; }
.service-title h1 { font-size: 24px; }
.service-title .tag { margin-left: 6px; }
.heading-actions { display: flex; gap: 8px; }
.release-layout { display: grid; grid-template-columns: minmax(330px, 0.78fr) minmax(580px, 1.6fr); gap: 18px; align-items: start; }
.production-history-panel, .candidate-detail { overflow: hidden; }
.panel-heading { min-height: 72px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.production-history-list { display: grid; }
.production-history-tools { padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-soft); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.compact-search { height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); display: flex; align-items: center; gap: 7px; }
.compact-search svg { width: 15px; color: var(--muted); }
.compact-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; }
.production-history-tools select { height: 34px; padding: 0 28px 0 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.production-history-row { min-height: 70px; padding: 10px 12px; border-bottom: 1px solid #edf0ee; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.production-history-row:last-child { border-bottom: 0; }
.production-history-row.current { background: var(--green-soft); box-shadow: inset 3px 0 var(--green); }
.production-history-row > div { min-width: 0; display: grid; gap: 4px; }
.production-history-row .btn { justify-self: end; min-height: 32px; padding: 5px 7px; white-space: nowrap; }
.production-history-version { display: flex; align-items: center; gap: 7px; }
.production-history-version > strong { font: 800 16px Consolas, monospace; }
.production-history-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.production-history-pager { min-height: 46px; padding: 7px 12px; border-top: 1px solid var(--line); background: var(--surface-soft); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.production-history-pager > span { color: var(--muted); font-size: 11px; }
.production-history-pager > div { display: flex; gap: 5px; }
.execution-row { width: 100%; min-height: 78px; padding: 12px 16px; border: 0; border-bottom: 1px solid #edf0ee; background: var(--surface); display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; text-align: left; }
.execution-row:hover { background: #f8fbf9; }
.execution-row.active { background: var(--green-soft); box-shadow: inset 3px 0 var(--green); }
.execution-row > div { min-width: 0; display: grid; gap: 3px; }
.execution-row > span:last-child { display: grid; gap: 3px; text-align: right; }
.candidate-status { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.candidate-status svg { width: 15px; }
.candidate-status.success { color: var(--green); background: var(--green-soft); }
.candidate-status.failed { color: var(--red); background: var(--red-soft); }
.candidate-status.running { color: var(--blue); background: var(--blue-soft); }
.candidate-status.waiting { color: var(--amber); background: var(--amber-soft); }
.candidate-detail-heading { padding: 16px 20px; border-bottom: 1px solid var(--line); display: grid; gap: 13px; }
.candidate-detail-heading > div { display: grid; gap: 3px; }
.candidate-version-picker { display: grid; gap: 6px; }
.candidate-version-picker > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.candidate-version-picker select { width: 100%; height: 40px; padding: 0 34px 0 11px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); font-weight: 700; }
.detail-top { min-height: 90px; padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.detail-top > div:first-child { display: grid; gap: 4px; }
.detail-top h2 { font: 800 26px Consolas, monospace; }
.detail-actions { display: flex; gap: 8px; }
.detail-actions .btn[hidden] { display: none; }
.production-approval-status { margin: 0 20px 18px; padding: 13px 15px; border: 1px solid #b9dfc7; border-radius: 6px; background: var(--green-soft); display: flex; align-items: center; gap: 11px; }
.production-approval-status[hidden] { display: none; }
.production-approval-status > svg { color: var(--green); }
.production-approval-status > div { min-width: 0; flex: 1; }
.production-approval-status p { margin-top: 2px; color: var(--muted); }
.approval-line.approved { border-color: #b9dfc7; background: var(--green-soft); }
.approval-line.approved > svg { color: var(--green); }
.candidate-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.candidate-info-group { min-width: 0; padding: 17px 20px; border-right: 1px solid var(--line); }
.candidate-info-group:last-child { border-right: 0; }
.candidate-info-group h3 { margin-bottom: 13px; display: flex; align-items: center; gap: 7px; font-size: 13px; }
.candidate-info-group h3 svg { width: 16px; color: var(--blue); }
.candidate-info-group dl { margin: 0; display: grid; gap: 11px; }
.candidate-info-group dl div, .contract-grid div, .version-detail-list div { min-width: 0; display: grid; gap: 4px; }
.candidate-info-group dt, .contract-grid dt, .version-detail-list dt { color: var(--muted); font-size: 11px; }
.candidate-info-group dd, .contract-grid dd, .version-detail-list dd { margin: 0; overflow-wrap: anywhere; }
.pipeline { padding: 20px; display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid var(--line); }
.pipeline > div { position: relative; display: grid; justify-items: center; gap: 5px; text-align: center; }
.pipeline > div:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 2px; background: #b9d9c5; }
.pipeline span { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #edf0ee; color: var(--muted); border: 1px solid var(--line); }
.pipeline .done span { background: var(--green-soft); color: var(--green); border-color: #b6d8c2; }
.pipeline .active span { background: var(--blue-soft); color: var(--blue); border-color: #aec9e4; box-shadow: 0 0 0 4px rgba(39,103,168,0.08); }
.pipeline .waiting span { background: var(--amber-soft); color: var(--amber); border-color: #efd09f; }
.pipeline .failed span { background: var(--red-soft); color: var(--red); border-color: #efb6bd; }
.pipeline .active small { color: var(--blue); font-weight: 700; }
.pipeline .waiting small { color: var(--amber); font-weight: 700; }
.pipeline .failed small { color: var(--red); font-weight: 700; }
.pipeline svg { width: 15px; }
.pipeline strong { font-size: 12px; }
.pipeline small { font-size: 10px; }
.candidate-error-panel { margin: 18px 20px 0; border: 1px solid #efb6bd; border-radius: 6px; overflow: hidden; background: var(--surface); }
.candidate-error-panel[hidden] { display: none; }
.candidate-error-panel summary { min-height: 54px; padding: 10px 14px; cursor: pointer; list-style: none; color: var(--red); background: var(--red-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.candidate-error-panel summary::-webkit-details-marker { display: none; }
.candidate-error-panel summary > span { min-width: 0; display: flex; align-items: center; gap: 9px; }
.candidate-error-panel summary > span > svg { flex: 0 0 auto; }
.candidate-error-panel summary small { color: #8f3039; }
.candidate-error-panel summary > svg { flex: 0 0 auto; transition: transform 0.16s ease; }
.candidate-error-panel[open] summary > svg { transform: rotate(180deg); }
.candidate-error-panel.result-output { border-color: var(--line); }
.candidate-error-panel.result-output summary { color: var(--text); background: var(--surface-soft); }
.candidate-error-panel.result-output summary small { color: var(--green); }
.candidate-error-panel.result-output .candidate-error-body { border-top-color: var(--line); }
.candidate-error-panel.result-output .candidate-error-body pre { color: #d8e4de; background: #18211e; }
.candidate-error-body { padding: 15px; border-top: 1px solid #efb6bd; }
.candidate-error-body dl { margin: 0 0 13px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.candidate-error-body dl div { min-width: 0; display: grid; gap: 3px; }
.candidate-error-body dt { color: var(--muted); font-size: 11px; }
.candidate-error-body dd { margin: 0; overflow-wrap: anywhere; font-weight: 700; }
.candidate-error-body > p { margin-bottom: 12px; }
.candidate-error-body pre { max-height: 560px; margin: 0; padding: 14px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; color: #3c2528; background: #fffafa; font: 11px/1.65 Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.candidate-error-actions { margin-top: 12px; display: flex; justify-content: flex-end; gap: 8px; }
.workload-progress { margin: 18px 20px 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.workload-progress-head { min-height: 54px; padding: 10px 14px; cursor: pointer; list-style: none; background: var(--surface-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.workload-progress-head::-webkit-details-marker { display: none; }
.workload-progress-head > div { display: flex; align-items: center; gap: 9px; }
.workload-progress-head > div > svg { color: var(--blue); }
.workload-progress-head > div > span { display: grid; gap: 2px; }
.workload-head-meta { display: flex; align-items: center; gap: 9px; }
.workload-head-meta > svg { width: 16px; color: var(--muted); transition: transform 0.16s ease; }
.workload-progress[open] .workload-head-meta > svg { transform: rotate(180deg); }
.workload-progress-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.workload-progress-grid > div { min-height: 88px; padding: 13px; border-right: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 4px 8px; }
.workload-progress-grid > div:last-child { border-right: 0; }
.workload-progress-grid > div > span { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 50%; background: #edf0ee; color: var(--muted); display: grid; place-items: center; }
.workload-progress-grid > div > span svg { width: 15px; }
.workload-progress-grid > div.done > span { color: var(--green); background: var(--green-soft); }
.workload-progress-grid > div.active > span { color: var(--blue); background: var(--blue-soft); }
.workload-progress-grid > div.waiting > span { color: var(--amber); background: var(--amber-soft); }
.workload-progress-grid strong { font-size: 11px; }
.workload-progress-grid small { font-size: 10px; overflow-wrap: anywhere; }
.snapshot-line { margin: 0 20px 20px; padding: 13px; background: var(--green-soft); border-radius: 6px; display: flex; gap: 10px; }
.snapshot-line > svg { color: var(--green); }
.snapshot-line div { display: grid; gap: 3px; }
.snapshot-line p { font-size: 12px; }

.version-summary { margin-top: -2px; }
.version-table td { height: 64px; }

.execution-layout { display: grid; grid-template-columns: minmax(330px, 0.72fr) minmax(600px, 1.45fr); gap: 18px; align-items: start; }
.execution-list, .execution-detail { overflow: hidden; }
.execution-row { grid-template-columns: auto 1fr auto; }
.execution-status { min-height: 126px; padding: 20px; color: #effaf3; background: #22533b; display: grid; grid-template-columns: auto 1fr auto; gap: 15px; align-items: center; }
.execution-status.pending { background: #67501d; }
.execution-status .candidate-status { width: 44px; height: 44px; color: #fff; background: rgba(255,255,255,0.15); }
.execution-status > div { display: grid; gap: 4px; }
.execution-status > div > span { font-size: 11px; font-weight: 800; }
.execution-status h2 { font-size: 21px; }
.execution-status p, .execution-status dt { color: #c7ddd1; }
.execution-status dl { margin: 0; display: grid; grid-template-columns: repeat(3, auto); gap: 22px; }
.execution-status dl div { display: grid; gap: 4px; }
.execution-status dt { font-size: 10px; }
.execution-status dd { margin: 0; font-size: 12px; font-weight: 700; }
.execution-steps { padding: 20px; display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--line); }
.execution-steps > div { position: relative; display: grid; justify-items: center; gap: 5px; text-align: center; }
.execution-steps > div:not(:last-child)::after { content: ""; position: absolute; top: 14px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; background: #b7d9c3; }
.execution-steps span { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: #edf0ee; border: 1px solid var(--line); font-weight: 800; }
.execution-steps .done span { color: var(--green); background: var(--green-soft); border-color: #b7d9c3; }
.execution-steps .active span { color: var(--blue); background: var(--blue-soft); border-color: #aec9e4; box-shadow: 0 0 0 4px rgba(39,103,168,0.08); }
.execution-steps .active small { color: var(--blue); font-weight: 700; }
.execution-steps .failed span { color: var(--red); background: var(--red-soft); border-color: #efb6bd; }
.execution-steps .failed small { color: var(--red); font-weight: 700; }
.execution-steps strong { font-size: 11px; }
.execution-steps small { font-size: 10px; }
.single-cluster-result { margin: 18px 20px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.single-cluster-result > div { padding: 13px 15px; background: var(--surface-soft); display: flex; align-items: center; gap: 10px; }
.single-cluster-result > div > div { display: grid; gap: 2px; flex: 1; }
.single-cluster-result dl { margin: 0; padding: 15px; display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.single-cluster-result dl div { display: grid; gap: 4px; }
.single-cluster-result dt { color: var(--muted); font-size: 10px; }
.single-cluster-result dd { margin: 0; font-weight: 700; font-size: 12px; }
.event-log { margin: 0 20px 20px; border: 1px solid #2e3934; border-radius: 6px; overflow: hidden; background: #1f2723; color: #dce8e1; }
.event-log-head { height: 42px; padding: 0 14px; border-bottom: 1px solid #34423b; display: flex; align-items: center; justify-content: space-between; }
.event-log-head small { color: #99aca2; }
.event-log pre { margin: 0; padding: 14px; overflow-x: auto; font-size: 11px; line-height: 1.8; }
.event-log pre span { color: #7fd5a2; }

.contract-layout { display: grid; grid-template-columns: minmax(600px, 1.6fr) minmax(300px, 0.75fr); gap: 18px; }
.contract-grid { margin: 0; padding: 22px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.contract-grid div { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.locked-panel { padding: 24px; align-self: start; }
.locked-panel > svg { width: 38px; height: 38px; padding: 8px; color: var(--green); background: var(--green-soft); border-radius: 6px; }
.locked-panel h2 { margin-top: 16px; }
.locked-panel ul { margin: 16px 0; padding-left: 18px; display: grid; gap: 10px; line-height: 1.45; }

.overlay { position: fixed; inset: 0; z-index: 60; background: rgba(18,27,22,0.46); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; }
.overlay.visible { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; z-index: 70; width: min(640px, 100vw); height: 100vh; background: var(--surface); box-shadow: -12px 0 32px rgba(22,36,28,0.16); transform: translateX(102%); transition: transform 0.22s ease; display: grid; grid-template-rows: auto auto 1fr auto; }
.drawer.wide { width: min(780px, 100vw); }
.drawer.open { transform: translateX(0); }
.drawer > header, .modal > header { min-height: 92px; padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.drawer > header > div, .modal > header > div { display: grid; gap: 4px; }
.drawer > header h2, .modal > header h2 { font-size: 21px; }
.drawer-stepper { min-height: 62px; padding: 10px 22px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 8px; }
.drawer-stepper.two-step { grid-template-columns: auto 1fr auto; }
.drawer-stepper button { padding: 0; border: 0; background: transparent; color: var(--muted); display: flex; align-items: center; gap: 7px; font-weight: 700; }
.drawer-stepper button span { width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; background: #edf1ee; }
.drawer-stepper button.active { color: var(--green); }
.drawer-stepper button.active span { color: #fff; background: var(--green); }
.drawer-stepper > i { height: 1px; background: var(--line); }
.drawer-body { min-height: 0; padding: 22px; overflow-y: auto; }
.drawer-step { display: none; }
.drawer-step.active { display: block; }
.drawer > footer, .modal > footer { min-height: 68px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--surface-soft); display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.form-grid + .form-grid, .form-grid + .info-note, .form-grid + .scaffold-section, .scaffold-section + .scaffold-section, .field + .repo-check, .field + .init-steps, .repository-actions + .repo-check { margin-top: 16px; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.field { min-width: 0; display: grid; gap: 7px; }
.field > span { font-weight: 700; font-size: 12px; }
.field input, .field select, .field textarea { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); outline: none; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #6fb78c; box-shadow: 0 0 0 3px var(--green-soft); }
.field input:disabled { color: #53605a; background: #f1f4f2; }
.field small { font-size: 11px; }
.search-select { position: relative; min-width: 0; }
.search-select-control { height: 40px; padding-left: 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.search-select-control:focus-within { border-color: #6fb78c; box-shadow: 0 0 0 3px var(--green-soft); }
.search-select-control > svg { width: 16px; color: var(--muted); }
.search-select-control input { min-height: 0; padding: 0; border: 0; box-shadow: none; }
.search-select-control input:focus { box-shadow: none; }
.search-select-control .icon-btn { width: 34px; height: 34px; border: 0; }
.search-select-menu { position: absolute; z-index: 5; top: calc(100% + 5px); left: 0; right: 0; padding: 5px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow); }
.search-select-menu[hidden] { display: none; }
.search-select-menu button { width: 100%; min-height: 40px; padding: 7px 9px; border: 0; border-radius: 4px; background: transparent; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; text-align: left; }
.search-select-menu button:hover { background: var(--green-soft); }
.search-select-menu button svg { width: 16px; color: var(--green); }
.search-select-menu p { padding: 9px; text-align: center; font-size: 12px; }
.scaffold-section { min-width: 0; }
.scaffold-trigger { width: 100%; min-height: 76px; padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; text-align: left; }
.scaffold-trigger:hover, .scaffold-trigger.selected { border-color: #7db893; background: var(--green-soft); }
.scaffold-trigger:disabled { cursor: not-allowed; color: var(--muted); background: var(--surface-soft); }
.scaffold-trigger:disabled:hover { border-color: var(--line-strong); }
.scaffold-trigger > span:nth-child(2) { display: grid; gap: 4px; }
.scaffold-trigger small { white-space: normal; }
.scaffold-trigger-icon { width: 42px; height: 42px; border-radius: 6px; color: var(--green); background: var(--green-soft); display: grid; place-items: center; }
.scaffold-trigger.selected .scaffold-trigger-icon { color: #fff; background: var(--green); }
.scaffold-chevron { color: var(--muted); transition: transform 0.18s ease; }
.scaffold-trigger[aria-expanded="true"] .scaffold-chevron { transform: rotate(180deg); }
.scaffold-selector { margin-top: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-soft); }
.scaffold-selector[hidden] { display: none; }
.scaffold-selector-head { min-height: 32px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.scaffold-selector-head .btn { min-height: 32px; padding: 5px 8px; }
.scaffold-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scaffold-options label { min-height: 76px; background: var(--surface); }
.ingress-scope-options { margin-top: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ingress-scope-options label { min-width: 0; min-height: 102px; align-items: flex-start; }
.ingress-scope-options .service-icon { flex: 0 0 auto; }
.ingress-scope-options label > div { min-width: 0; }
.ingress-scope-options label small { overflow-wrap: anywhere; }
.ingress-preview strong { overflow-wrap: anywhere; }
.ingress-timing-note { margin-top: 14px; }
.repository-actions { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, auto); gap: 10px; }
.repository-actions .btn { min-height: 42px; }
.info-note, .locked-summary, .preflight, .freeze-banner, .warning-note, .approval-line { padding: 14px; border-radius: 6px; display: flex; align-items: flex-start; gap: 11px; }
.info-note, .locked-summary, .preflight, .freeze-banner { background: var(--green-soft); }
.warning-note { background: var(--amber-soft); }
.approval-line { background: var(--blue-soft); align-items: center; }
.info-note > svg, .locked-summary > svg, .preflight > svg, .freeze-banner > svg { color: var(--green); }
.warning-note > svg { color: var(--amber); }
.approval-line > svg { color: var(--blue); }
.info-note div, .locked-summary div, .preflight div, .freeze-banner div, .warning-note div, .approval-line div { display: grid; gap: 3px; flex: 1; }
.info-note p, .locked-summary p, .preflight p, .freeze-banner p, .warning-note p, .approval-line p { font-size: 12px; }
.template-options { display: grid; gap: 10px; }
.template-options label { min-height: 64px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; display: flex; align-items: center; gap: 11px; cursor: pointer; }
.template-options label.selected { border-color: #7db893; background: var(--green-soft); }
.template-options input { display: none; }
.template-options label div { display: grid; gap: 3px; flex: 1; }
.template-options label > svg { color: var(--green); }
.contract-preview { margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 6px; display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.contract-preview div { display: grid; gap: 3px; }
.contract-preview span { color: var(--muted); font-size: 11px; }
.repo-check { min-height: 72px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: 6px; display: flex; align-items: center; gap: 11px; }
.repo-check.valid { border-style: solid; border-color: #9acbad; background: var(--green-soft); }
.repo-check > svg { color: var(--muted); }
.repo-check.valid > svg { color: var(--green); }
.repo-check div { display: grid; gap: 3px; }
.init-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.init-steps > div { min-height: 92px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; display: flex; gap: 9px; }
.init-steps > div > span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--green); background: var(--green-soft); font-weight: 800; flex: 0 0 auto; }
.init-steps p { display: grid; gap: 3px; }
.init-steps small { font-size: 10px; }
.segmented { width: fit-content; min-height: 36px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: #edf1ee; display: flex; }
.segmented button { min-width: 78px; padding: 0 12px; border: 0; border-radius: 4px; color: var(--muted); background: transparent; font-weight: 700; }
.segmented button.active { color: var(--green); background: var(--surface); box-shadow: 0 1px 3px rgba(22,36,28,0.12); }
#gitRefType { margin-bottom: 16px; }
.locked-summary { margin-top: 16px; }
.mode-switch { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.mode-switch > div:first-child { display: grid; gap: 3px; }
.package-options { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.package-options button { min-height: 62px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 8px; align-items: center; text-align: left; }
.package-options button svg { grid-row: 1 / 3; color: var(--muted); }
.package-options button small { font-size: 10px; }
.package-options button.active { border-color: #7db893; background: var(--green-soft); }
.package-options button.active svg { color: var(--green); }
.advanced-panel { margin-top: 18px; }
.advanced-panel[hidden] { display: none; }
.subsection { margin-top: 16px; padding: 15px; border: 1px solid var(--line); border-radius: 6px; }
.env-editor { margin-top: 12px; display: grid; gap: 8px; }
.env-editor > div { display: grid; grid-template-columns: 0.8fr 1.2fr auto; gap: 8px; }
.env-editor input { min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; }
.confirm-line { display: flex; align-items: flex-start; gap: 9px; line-height: 1.5; }
.confirm-line { margin-top: 18px; padding: 13px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-soft); }
.confirm-line input { margin-top: 3px; accent-color: var(--green); }
.review-grid, .promotion-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.review-grid > div, .promotion-grid > div { min-height: 68px; padding: 12px; background: var(--surface); display: grid; gap: 4px; }
.review-grid span, .promotion-grid span { color: var(--muted); font-size: 11px; }
.modal { position: fixed; top: 50%; left: 50%; z-index: 80; width: min(680px, calc(100vw - 28px)); max-height: calc(100vh - 32px); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); transform: translate(-50%, -48%) scale(0.98); opacity: 0; pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease; display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.modal.compact { width: min(520px, calc(100vw - 28px)); }
.modal-body { min-height: 0; padding: 20px 22px; overflow-y: auto; }
.freeze-banner { margin-bottom: 16px; }
.cluster-disclosure { margin-top: 16px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.cluster-disclosure summary { min-height: 54px; padding: 0 14px; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; background: var(--surface-soft); }
.cluster-disclosure summary::-webkit-details-marker { display: none; }
.cluster-disclosure summary > span { display: flex; align-items: center; gap: 9px; }
.cluster-disclosure summary small { margin-left: 5px; }
.cluster-disclosure[open] summary > svg { transform: rotate(180deg); }
.cluster-disclosure > div { padding: 14px; border-top: 1px solid var(--line); }
.cluster-disclosure dl { margin: 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.cluster-disclosure dl div { display: grid; gap: 3px; }
.cluster-disclosure dt { color: var(--muted); font-size: 11px; }
.cluster-disclosure dd { margin: 0; font-weight: 700; }
.approval-line { margin-top: 16px; }
.republish-target { padding: 14px; border-left: 4px solid var(--green); background: var(--green-soft); border-radius: 6px; display: grid; gap: 4px; }
.republish-target span { color: var(--muted); font-size: 11px; }
.republish-target strong { color: var(--green); font: 800 22px Consolas, monospace; }
.republish-snapshot { margin-top: 16px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.republish-snapshot h3 { padding: 12px 14px; background: var(--surface-soft); border-bottom: 1px solid var(--line); }
.republish-snapshot > div { min-height: 42px; padding: 0 14px; border-bottom: 1px solid #edf0ee; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.republish-snapshot > div:last-child { border-bottom: 0; }
.republish-snapshot span { color: var(--muted); font-size: 11px; }
.warning-note { margin-top: 16px; }
.version-detail-list { margin: 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.version-detail-list div { padding-bottom: 12px; border-bottom: 1px solid var(--line); }

.toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; max-width: min(420px, calc(100vw - 32px)); min-height: 48px; padding: 10px 14px; border-radius: 6px; color: #fff; background: #26352d; box-shadow: var(--shadow); display: flex; align-items: center; gap: 9px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast svg { color: #83d8a5; }

body.embedded .sidebar { display: none; }
body.embedded .app-main { width: 100%; margin-left: 0; }
body.embedded .topbar { position: sticky; height: 54px; padding: 0 16px; }
body.embedded .workspace { padding: 18px; }
body.embedded .menu-btn { display: none; }

@media (max-width: 1180px) {
  .release-layout, .execution-layout { grid-template-columns: 1fr; }
  .production-history-panel, .execution-list { max-height: none; }
  .contract-layout { grid-template-columns: 1fr; }
  .version-summary { grid-template-columns: repeat(2,1fr); }
  .version-summary > div:nth-child(2) { border-right: 0; }
  .version-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 860px) {
  :root { --sidebar: 0px; }
  .sidebar { width: 232px; transform: translateX(-102%); transition: transform 0.2s ease; box-shadow: var(--shadow); }
  .sidebar.mobile-open { transform: translateX(0); }
  .app-main { width: 100%; margin-left: 0; }
  .menu-btn { display: inline-grid; }
  .topbar { padding: 0 16px; }
  .workspace { padding: 20px 16px; }
  .profile div, .browse-filter span { display: none; }
  .page-heading, .detail-top, .section-title, .table-toolbar { align-items: flex-start; flex-direction: column; }
  .toolbar-controls { width: 100%; }
  .search-box { flex: 1; width: auto; }
  .service-heading { grid-template-columns: 1fr; }
  .heading-actions { width: 100%; }
  .heading-actions .btn { flex: 1; }
  .detail-actions { width: 100%; }
  .detail-actions .btn { flex: 1; }
  .candidate-info-grid { grid-template-columns: 1fr; }
  .candidate-info-group { border-right: 0; border-bottom: 1px solid var(--line); }
  .candidate-info-group:last-child { border-bottom: 0; }
  .pipeline { overflow-x: auto; grid-template-columns: repeat(6, minmax(116px,1fr)); }
  .execution-steps { overflow-x: auto; grid-template-columns: repeat(5, minmax(116px,1fr)); }
  .workload-progress-grid { grid-template-columns: repeat(2, 1fr); }
  .workload-progress-grid > div:nth-child(2) { border-right: 0; }
  .workload-progress-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .single-cluster-result dl { grid-template-columns: repeat(2,1fr); }
  .execution-status { grid-template-columns: auto 1fr; }
  .execution-status dl { grid-column: 1 / -1; width: 100%; justify-content: space-between; }
}

@media (max-width: 620px) {
  body { font-size: 13px; }
  h1 { font-size: 23px; }
  .topbar { height: 58px; }
  .crumbs > span, .topbar-actions > .icon-btn { display: none; }
  .workspace { padding: 16px 12px; }
  .version-summary { grid-template-columns: 1fr; }
  .version-summary > div { min-height: 78px; border-right: 0; border-bottom: 1px solid var(--line); }
  .version-summary > div:last-child { border-bottom: 0; }
  .page-heading .btn.primary { width: 100%; }
  .toolbar-controls { align-items: stretch; flex-direction: column; }
  .search-box, .toolbar-controls select, #statusFilter { width: 100%; }
  .service-title { align-items: flex-start; flex-wrap: wrap; }
  .service-title .tag { margin-left: 50px; margin-top: -8px; }
  .heading-actions, .detail-actions { flex-direction: column; }
  .production-history-tools { grid-template-columns: 1fr; }
  .production-history-row { grid-template-columns: 1fr; }
  .production-history-row .btn { justify-self: start; }
  .contract-grid, .version-detail-list { grid-template-columns: 1fr; }
  .single-cluster-result dl { grid-template-columns: 1fr 1fr; }
  .execution-status { padding: 16px; }
  .execution-status dl { grid-template-columns: 1fr 1fr; gap: 12px; }
  .execution-status dl div:last-child { grid-column: 1 / -1; }
  .form-grid, .form-grid.three, .contract-preview, .review-grid, .promotion-grid { grid-template-columns: 1fr; }
  .ingress-scope-options { grid-template-columns: 1fr; }
  .init-steps { grid-template-columns: 1fr; }
  .drawer > header, .modal > header { padding: 16px; }
  .drawer-body, .modal-body { padding: 16px; }
  .drawer-stepper { padding: 10px 14px; overflow-x: auto; }
  .drawer-stepper button { white-space: nowrap; }
  .mode-switch { align-items: stretch; flex-direction: column; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; }
  .candidate-error-body dl { grid-template-columns: 1fr; }
  .cluster-disclosure summary > span { align-items: flex-start; flex-wrap: wrap; }
  .cluster-disclosure dl { grid-template-columns: 1fr; }
  .republish-snapshot > div { align-items: flex-start; flex-direction: column; padding: 10px 14px; }
  .workload-progress-grid { grid-template-columns: 1fr; }
  .workload-progress-grid > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .workload-progress-grid > div:last-child { border-bottom: 0; }
  .modal > footer, .drawer > footer { padding: 12px 16px; }
  .modal > footer .btn, .drawer > footer .btn { flex: 1; }
}