.workspace-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; align-items: start; }
.workspace-grid > * { min-width: 0; }
.record-list { background: white; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; }
.record-list-head { padding: 12px; border-bottom: 1px solid var(--gray-200); background: var(--gray-50); }
.record-item { width: 100%; padding: 12px; border: 0; border-bottom: 1px solid #eef0f3; background: white; text-align: left; cursor: pointer; }
.record-item:last-child { border-bottom: 0; }
.record-item:hover, .record-item.active { background: var(--blue-50); }
.record-item.active { box-shadow: inset 3px 0 var(--blue-600); }
.record-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; }
.record-meta { margin-top: 5px; color: var(--gray-500); font-size: 11px; line-height: 1.5; }
.subnav { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: white; overflow-x: auto; }
.subnav button { min-height: 34px; padding: 0 12px; border: 0; border-radius: var(--radius); background: transparent; color: var(--gray-500); white-space: nowrap; cursor: pointer; }
.subnav button.active { background: var(--blue-50); color: var(--blue-700); font-weight: 600; }
.key-value { display: grid; grid-template-columns: 142px minmax(0, 1fr); gap: 0; border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; }
.key-value dt, .key-value dd { min-height: 39px; margin: 0; padding: 9px 11px; border-bottom: 1px solid var(--gray-200); }
.key-value dt { color: var(--gray-500); background: var(--gray-50); }
.key-value dd { color: var(--gray-800); }
.key-value dt:last-of-type, .key-value dd:last-of-type { border-bottom: 0; }
.license-card { padding: 12px; border: 1px solid var(--gray-200); border-radius: var(--radius); background: white; }
.license-card + .license-card { margin-top: 9px; }
.license-usage { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.license-usage .bar-track { flex: 1; }
.fact-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.fact { min-height: 66px; padding: 10px; border: 1px solid var(--gray-200); border-radius: var(--radius); background: white; }
.fact-label { color: var(--gray-500); font-size: 11px; }
.fact-value { margin-top: 7px; font-weight: 600; font-size: 13px; }
.attempt { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--gray-200); }
.attempt:last-child { border-bottom: 0; }
.attempt-index { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-100); color: var(--blue-700); font-weight: 700; }
.source-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 10px; background: var(--gray-100); color: var(--gray-600); font-size: 10px; }
.source-pill.live::before, .source-pill.history::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.source-pill.live::before { background: #22c55e; }
.source-pill.history::before { background: #94a3b8; }
.metric-card { padding: 14px; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: white; }
.metric-top { display: flex; justify-content: space-between; gap: 8px; color: var(--gray-500); font-size: 12px; }
.metric-number { margin-top: 10px; font-size: 24px; font-weight: 650; color: var(--gray-950); }
.metric-trend { margin-top: 5px; color: var(--green-700); font-size: 11px; }
.metric-trend.bad { color: var(--red-700); }
.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.chart-box { min-height: 250px; padding: 14px; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: white; }
.chart-title { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 12px; font-weight: 600; }
.pricing-desk { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.pricing-desk > * { min-width: 0; }
.pending-order { width: 100%; padding: 11px 13px; border: 0; border-bottom: 1px solid var(--gray-200); background: white; text-align: left; cursor: pointer; }
.pending-order.active { background: var(--blue-50); box-shadow: inset 3px 0 var(--blue-600); }
.chain-editor-node { padding: 12px; border: 1px solid var(--gray-300); border-radius: var(--radius); background: white; }
.chain-editor-node.fixed { background: var(--blue-50); border-color: #bfdbfe; }
.chain-editor-node.terminal { background: var(--gray-50); }
.chain-editor-node + .chain-editor-node { margin-top: 22px; }
.chain-editor-node + .chain-editor-node::before { content: "↓"; position: absolute; transform: translate(10px, -21px); color: var(--gray-400); }
.chain-inputs { display: grid; grid-template-columns: 1fr 120px 120px; gap: 8px; margin-top: 9px; }
.branch-panel { padding: 12px; border: 1px solid var(--gray-200); border-radius: var(--radius); background: var(--gray-50); }
.branch-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-weight: 600; }
.work-context { margin-bottom: 14px; padding: 12px 14px; border: 1px solid #bfdbfe; border-left: 3px solid var(--blue-600); border-radius: var(--radius-lg); background: var(--blue-50); display: flex; align-items: center; gap: 12px; }
.work-context-mark { width: 34px; height: 34px; border-radius: var(--radius); background: var(--blue-600); color: white; display: grid; place-items: center; font-weight: 700; flex: none; }
.work-context-main { min-width: 0; flex: 1; }
.work-context-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.work-context-meta { margin-top: 4px; color: var(--gray-500); font-size: 11px; line-height: 1.5; }
.work-context-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.readonly-banner { margin: -4px 0 14px; }
.zero-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.zero-item { padding: 13px; border: 1px solid #bbf7d0; border-radius: var(--radius); background: #f0fdf4; }
.zero-number { margin-top: 8px; color: var(--green-700); font-size: 23px; font-weight: 700; }
.template-preview { min-height: 520px; padding: 30px 34px; color: #111827; }
.template-preview h3 { margin: 0 0 20px; text-align: center; font-size: 18px; }
.template-preview p { line-height: 1.75; font-size: 12px; }
.template-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.field-token { padding: 4px 7px; border: 1px solid #bfdbfe; border-radius: var(--radius-sm); background: var(--blue-50); color: var(--blue-700); font-size: 11px; }
.audit-line { display: flex; align-items: flex-start; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--gray-200); }
.audit-line:last-child { border-bottom: 0; }
.audit-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--blue-500); flex: none; }
@media (max-width: 1180px) { .fact-strip, .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pricing-desk { grid-template-columns: 300px minmax(0, 1fr); } }
@media (max-width: 860px) { .workspace-grid, .pricing-desk { grid-template-columns: 1fr; } .record-list { max-height: 280px; overflow: auto; } }
@media (max-width: 620px) { .fact-strip, .zero-grid, .metric-grid { grid-template-columns: 1fr 1fr; } .key-value { grid-template-columns: 110px minmax(0, 1fr); } .chain-inputs { grid-template-columns: 1fr; } .work-context { align-items: flex-start; flex-wrap: wrap; } .work-context-actions { width: 100%; justify-content: flex-start; } }