:root {
  color-scheme: light;
  font-family: Inter, "Microsoft YaHei", system-ui, sans-serif;
  background: #f3f7f2;
  color: #17372f;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
.shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 72px; }
.hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.eyebrow { margin: 0 0 8px; color: #4b7266; font-size: 12px; font-weight: 800; letter-spacing: .14em; }
h1 { margin: 0; font-size: clamp(32px, 5vw, 56px); line-height: 1.08; }
h2 { margin: 0; font-size: 26px; }
.hero p:last-child { max-width: 720px; color: #557269; line-height: 1.8; }
.lock { padding: 10px 14px; border-radius: 999px; color: #0e5544; background: #d9f6b2; font-size: 12px; font-weight: 900; white-space: nowrap; }
.product-nav { position: sticky; top: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 30px 0; padding: 8px; border: 1px solid #d9e6df; border-radius: 16px; background: rgba(255, 255, 255, .94); box-shadow: 0 12px 36px rgba(21, 63, 52, .08); backdrop-filter: blur(12px); }
.nav-button { display: flex; align-items: center; gap: 8px; color: #547268; background: transparent; }
.nav-button small { padding: 3px 6px; border-radius: 999px; color: #638077; background: #eef5f1; font-size: 9px; letter-spacing: .04em; }
.nav-button.active { color: #fff; background: #0f5947; }
.nav-button.active small { color: #0e5544; background: #d9f6b2; }
.migration-progress { margin-left: auto; padding-right: 8px; color: #71877f; font-size: 12px; }
.migration-progress strong { color: #153f34; font-size: 15px; }
.product-view { animation: view-in .22s ease-out; }
@keyframes view-in { from { opacity: .2; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.sample-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding: 13px 16px; border: 1px solid #dce8b7; border-radius: 14px; background: #f7fbe9; }
.sample-banner > span, .data-chip { padding: 5px 8px; border-radius: 999px; color: #3e6226; background: #dff0ae; font-size: 10px; font-weight: 900; letter-spacing: .08em; white-space: nowrap; }
.sample-banner p { flex: 1; margin: 0; color: #556a41; font-size: 13px; line-height: 1.6; }
.compact { width: auto; padding: 8px 12px; }
.overview-heading { margin-bottom: 18px; }
.catalog-heading { margin-bottom: 18px; }
.muted { color: #71877f; font-size: 12px; }
.overview-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.overview-metrics article { min-width: 0; padding: 20px; border: 1px solid #d9e6df; border-radius: 16px; background: linear-gradient(150deg, #fff, #f7fbf8); box-shadow: 0 14px 34px rgba(21, 63, 52, .05); }
.overview-metrics span, .overview-metrics small { display: block; color: #71877f; font-size: 12px; }
.overview-metrics strong { display: block; margin: 12px 0 8px; color: #153f34; font-size: clamp(24px, 3vw, 34px); overflow-wrap: anywhere; }
.overview-panel { margin-bottom: 18px; }
.table-scroll { margin-top: 18px; overflow-x: auto; }
table { width: 100%; min-width: 760px; border-collapse: collapse; }
th, td { padding: 13px 12px; border-bottom: 1px solid #e4ece8; text-align: left; white-space: nowrap; }
th { color: #71877f; background: #f7faf8; font-size: 11px; letter-spacing: .05em; }
td { color: #45645a; font-size: 13px; }
tbody tr:last-child td { border-bottom: 0; }
.numeric { font-variant-numeric: tabular-nums; }
.roi-value { color: #0f5947; font-weight: 900; }
.task-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.task-list article { min-width: 0; padding: 16px; border: 1px solid #e1ebe6; border-radius: 14px; background: #fbfdfc; }
.task-list article > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.task-list article > div span { padding: 4px 8px; border-radius: 999px; color: #0f5947; background: #e5f1ec; font-size: 10px; font-weight: 900; }
.task-list article p { color: #71877f; font-size: 12px; line-height: 1.5; }
.task-list dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.task-list dl div { min-width: 0; padding: 9px; border-radius: 10px; background: #f0f6f3; }
.task-list dt { color: #789087; font-size: 10px; }
.task-list dd { margin: 5px 0 0; color: #294d42; font-size: 12px; font-weight: 800; overflow-wrap: anywhere; }
.account-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.account-list article { min-width: 0; padding: 20px; border: 1px solid #d9e6df; border-radius: 16px; background: linear-gradient(145deg, #fff, #f6faf8); box-shadow: 0 14px 34px rgba(21, 63, 52, .05); }
.account-list article > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account-list article > div > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.account-list article > div > div > div { display: grid; gap: 4px; min-width: 0; }
.account-list article small { color: #71877f; overflow-wrap: anywhere; }
.account-avatar { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #fff; background: #0f5947; font-weight: 900; }
.account-list dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 0; }
.account-list dl div { min-width: 0; padding: 10px; border-radius: 10px; background: #edf5f1; }
.account-list dt { color: #789087; font-size: 10px; }
.account-list dd { margin: 5px 0 0; color: #294d42; font-size: 12px; font-weight: 800; overflow-wrap: anywhere; }
.catalog-task-list { margin-bottom: 18px; }
.workspace-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.focus-list, .signal-list { display: grid; gap: 10px; margin-top: 18px; }
.focus-list article, .signal-list article { min-width: 0; padding: 14px; border: 1px solid #e1ebe6; border-radius: 12px; background: #f9fcfa; }
.focus-list article > div, .signal-list article > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.focus-list article span, .signal-list article span { padding: 4px 7px; border-radius: 999px; color: #0f5947; background: #dff0ae; font-size: 9px; font-weight: 900; }
.focus-list article p, .signal-list article p { margin: 8px 0 0; color: #688078; font-size: 12px; line-height: 1.6; }
.workspace-material-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.material-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.material-list article, .workspace-material-list article { min-width: 0; padding: 18px; border: 1px solid #d9e6df; border-radius: 16px; background: linear-gradient(145deg, #fff, #f5faf7); box-shadow: 0 14px 34px rgba(21, 63, 52, .05); }
.material-list article > div, .workspace-material-list article > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.material-list article p, .workspace-material-list article p { color: #71877f; font-size: 12px; line-height: 1.55; }
.material-list dl, .workspace-material-list dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.material-list dl div, .workspace-material-list dl div { min-width: 0; padding: 9px; border-radius: 10px; background: #edf5f1; }
.material-list dt, .workspace-material-list dt { color: #789087; font-size: 10px; }
.material-list dd, .workspace-material-list dd { margin: 5px 0 0; color: #294d42; font-size: 12px; font-weight: 800; overflow-wrap: anywhere; }
.material-score { flex: 0 0 auto; padding: 6px 8px; border-radius: 10px; color: #0f5947; background: #dff0ae; font-size: 11px; font-weight: 900; }
.compact-material dl { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.budget-progress { height: 7px; margin-top: 14px; overflow: hidden; border-radius: 999px; background: #e5eee9; }
.budget-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0f5947, #8fca60); }
.incident-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.incident-list article { min-width: 0; padding: 18px; border: 1px solid #d9e6df; border-left: 4px solid #d6a34b; border-radius: 15px; background: linear-gradient(145deg, #fff, #fbfaf5); }
.incident-list article > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.incident-list article > div > div { display: grid; gap: 5px; min-width: 0; }
.incident-list article small { color: #71877f; overflow-wrap: anywhere; }
.incident-list article > p { color: #607a71; font-size: 12px; line-height: 1.65; }
.incident-list dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.incident-list dl div { min-width: 0; padding: 9px; border-radius: 10px; background: #f1f5f2; }
.incident-list dt { color: #789087; font-size: 10px; }
.incident-list dd { margin: 5px 0 0; color: #294d42; font-size: 12px; font-weight: 800; overflow-wrap: anywhere; }
.incident-severity { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: #705720; background: #fff0bc; font-size: 10px; font-weight: 900; }
.incident-severity.high, .incident-severity.critical { color: #8f2d25; background: #ffe6df; }
.incident-severity.low { color: #0e5544; background: #d9f6b2; }
.incident-recovery { padding: 11px 12px; border-radius: 10px; background: #edf6f1; }
.monitor-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 14px; }
.monitor-layout > * { min-width: 0; }
.pipeline-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.pipeline-list article { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 3px 10px; min-width: 0; padding: 13px; border: 1px solid #dce8e1; border-radius: 12px; background: #f8fbf9; }
.pipeline-list article span { display: grid; grid-row: 1 / span 2; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: #fff; background: #0f5947; font-size: 12px; font-weight: 900; }
.pipeline-list article strong { color: #294d42; font-size: 12px; overflow-wrap: anywhere; }
.pipeline-list article small { color: #71877f; font-size: 10px; overflow-wrap: anywhere; }
.candidate-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.compact-candidates { grid-template-columns: 1fr; }
.candidate-list article { min-width: 0; padding: 16px; border: 1px solid #dce8e1; border-radius: 14px; background: linear-gradient(145deg, #fff, #f7faf8); }
.candidate-list article > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.candidate-list article > div > div { display: grid; gap: 5px; min-width: 0; }
.candidate-list article small { color: #71877f; line-height: 1.5; overflow-wrap: anywhere; }
.candidate-list article > p { color: #607a71; font-size: 12px; line-height: 1.6; }
.candidate-list dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 12px 0; }
.candidate-list dl div { min-width: 0; padding: 8px; border-radius: 9px; background: #edf5f1; }
.candidate-list dt { color: #789087; font-size: 9px; }
.candidate-list dd { margin: 4px 0 0; color: #294d42; font-size: 11px; font-weight: 800; overflow-wrap: anywhere; }
.candidate-status { flex: 0 0 auto; padding: 5px 7px; border-radius: 999px; color: #0e5544; background: #d9f6b2; font-size: 9px; font-weight: 900; white-space: nowrap; }
.candidate-status.pending_confirmation { color: #705720; background: #fff0bc; }
.candidate-status.blocked { color: #8f2d25; background: #ffe6df; }
.candidate-blocker { margin-bottom: 7px; padding: 9px; border-radius: 9px; background: #fff8e8; }
.candidate-evidence { display: block; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.execution-plan { display: grid; gap: 9px; margin-top: 18px; }
.execution-plan article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid #e1ebe6; border-radius: 11px; background: #f8fbf9; }
.execution-plan article strong { color: #294d42; font-size: 12px; }
.execution-plan article span { color: #8f2d25; font-size: 10px; font-weight: 900; text-align: right; overflow-wrap: anywhere; }
.rules-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; }
.rules-layout > * { min-width: 0; }
.release-card { margin-top: 18px; }
.release-card > strong { display: block; color: #153f34; overflow-wrap: anywhere; }
.release-card > p { color: #607a71; font-size: 12px; line-height: 1.65; }
.release-card dl, .parameter-list dl, .strategy-list dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.release-card dl div, .parameter-list dl div, .strategy-list dl div { min-width: 0; padding: 9px; border-radius: 10px; background: #edf5f1; }
.release-card dt, .parameter-list dt, .strategy-list dt { color: #789087; font-size: 10px; }
.release-card dd, .parameter-list dd, .strategy-list dd { margin: 5px 0 0; color: #294d42; font-size: 11px; font-weight: 800; overflow-wrap: anywhere; }
.safety-list { display: grid; gap: 10px; margin-top: 18px; }
.safety-list article { min-width: 0; padding: 13px; border: 1px solid #e1ebe6; border-radius: 12px; background: #f9fcfa; }
.safety-list article strong { color: #294d42; font-size: 13px; }
.safety-list article p { margin: 7px 0 0; color: #607a71; font-size: 12px; line-height: 1.6; }
.parameter-list, .strategy-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.parameter-list article, .strategy-list article { min-width: 0; padding: 16px; border: 1px solid #dce8e1; border-radius: 14px; background: linear-gradient(145deg, #fff, #f7faf8); }
.parameter-list article > div, .strategy-list article > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.parameter-list article > div > div, .strategy-list article > div > div { display: grid; gap: 5px; min-width: 0; }
.parameter-list article small, .strategy-list article small { color: #71877f; line-height: 1.5; overflow-wrap: anywhere; }
.parameter-list article > p, .strategy-list article > p { color: #607a71; font-size: 12px; line-height: 1.6; }
.impact-badge, .permission-badge { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: #0e5544; background: #d9f6b2; font-size: 9px; font-weight: 900; white-space: nowrap; }
.impact-badge.high, .permission-badge.ask { color: #8f2d25; background: #ffe6df; }
.impact-badge.medium, .permission-badge.suggest { color: #705720; background: #fff0bc; }
.permission-badge.off { color: #6b7280; background: #edf0f1; }
.quarantine-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.panel-lite { min-width: 0; padding: 16px; border: 1px solid #e1ebe6; border-radius: 15px; background: #fbfdfc; }
.compact-title { margin-bottom: 12px; }
.gate-list, .lane-list { display: grid; gap: 10px; }
.gate-list article, .lane-list article { min-width: 0; padding: 13px; border: 1px solid #dce8e1; border-radius: 12px; background: linear-gradient(145deg, #fff, #f7faf8); }
.gate-list article > div, .lane-list article > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.gate-list article > div > div, .lane-list article > div > div { display: grid; gap: 4px; min-width: 0; }
.gate-list article small, .lane-list article small { color: #71877f; line-height: 1.5; overflow-wrap: anywhere; }
.gate-list article p, .lane-list article p { margin: 8px 0 0; color: #607a71; font-size: 12px; line-height: 1.6; }
.gate-badge { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: #0e5544; background: #d9f6b2; font-size: 9px; font-weight: 900; white-space: nowrap; }
.gate-badge.waiting, .gate-badge.empty-quarantine { color: #705720; background: #fff0bc; }
.gate-badge.blocked, .gate-badge.hard-locked { color: #8f2d25; background: #ffe6df; }
.lane-list dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.lane-list dl div { min-width: 0; padding: 9px; border-radius: 10px; background: #edf5f1; }
.lane-list dt { color: #789087; font-size: 10px; }
.lane-list dd { margin: 5px 0 0; color: #294d42; font-size: 11px; font-weight: 800; overflow-wrap: anywhere; }
.readonly-callout { margin: 18px 0; padding: 15px 17px; border: 1px solid #cfe3d9; border-radius: 13px; color: #48685e; background: #edf6f1; font-size: 13px; line-height: 1.7; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 34px 0; }
.grid article, .panel, .warning { border: 1px solid #d9e6df; border-radius: 18px; background: #fff; box-shadow: 0 16px 44px rgba(21, 63, 52, .06); }
.grid article { padding: 20px; overflow-wrap: anywhere; }
.grid span { display: block; margin-bottom: 9px; color: #719087; font-size: 13px; }
.grid strong { font-size: 16px; }
.panel { padding: 24px; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.actions { display: flex; align-items: center; gap: 10px; }
button { border: 0; border-radius: 10px; padding: 11px 16px; color: #fff; background: #0f5947; cursor: pointer; font-weight: 800; }
button:disabled { opacity: .55; cursor: wait; }
.message { margin: 20px 0; padding: 14px; border-radius: 12px; color: #4f6f65; background: #eef6f2; }
.readiness { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.readiness div { padding: 14px; border: 1px solid #e1ebe6; border-radius: 12px; }
.readiness dt { color: #789087; font-size: 12px; }
.readiness dd { margin: 8px 0 0; font-weight: 800; overflow-wrap: anywhere; }
.warning { margin-top: 18px; padding: 20px 22px; border-color: #f0d8a6; background: #fffaf0; }
.warning p { margin: 8px 0 0; color: #715f38; line-height: 1.7; }
.auth-panel { margin-bottom: 18px; }
.status-badge { padding: 8px 12px; border-radius: 999px; color: #725b21; background: #fff0bc; font-size: 12px; font-weight: 900; }
.status-badge.ok { color: #0e5544; background: #d9f6b2; }
.login-form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 12px; }
.login-form label { color: #59756c; font-size: 13px; font-weight: 700; }
.login-form input { display: block; width: 100%; margin-top: 7px; border: 1px solid #cfddd6; border-radius: 10px; padding: 11px 12px; color: #17372f; background: #fff; font: inherit; }
.live-read-actions { align-items: end; }
.compact-select { display: grid; gap: 7px; color: #59756c; font-size: 12px; font-weight: 800; }
.compact-select select, .compact-select input { min-width: 150px; border: 1px solid #cfddd6; border-radius: 10px; padding: 10px 12px; color: #17372f; background: #fff; font: inherit; }
.live-read-list { display: grid; gap: 12px; margin-top: 18px; }
.live-read-list article { min-width: 0; padding: 15px; border: 1px solid #dce8e1; border-radius: 13px; background: linear-gradient(145deg, #fff, #f7faf8); }
.live-read-list article > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.live-read-list article small { color: #71877f; overflow-wrap: anywhere; }
.live-read-list article p { color: #607a71; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.live-read-list dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.live-read-list dl div { min-width: 0; padding: 9px; border-radius: 10px; background: #edf5f1; }
.live-read-list dt { color: #789087; font-size: 10px; }
.live-read-list dd { margin: 5px 0 0; color: #294d42; font-size: 11px; font-weight: 800; overflow-wrap: anywhere; white-space: pre-wrap; }
.secondary { color: #0f5947; background: #e5f1ec; }
.danger { color: #8f2d25; background: #ffe6df; }
.security-note { margin: 14px 0 0; color: #71877f; font-size: 12px; line-height: 1.7; }
.authorization-list { display: grid; gap: 12px; }
.authorization-list article { padding: 15px; border: 1px solid #e1ebe6; border-radius: 12px; }
.authorization-list p { color: #607a71; overflow-wrap: anywhere; }
.site-footer { margin: 22px 0 34px; padding: 18px 20px; border-top: 1px solid #d9e6df; color: #71877f; text-align: center; font-size: 12px; line-height: 1.7; }
.site-footer p { margin: 4px 0; }
.site-footer a { color: #466c61; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: #0f5947; text-decoration: underline; }
.hidden { display: none !important; }

@media (max-width: 720px) {
  .shell { width: min(100% - 20px, 1120px); padding-top: 28px; }
  .hero, .panel-title, .actions { flex-direction: column; align-items: stretch; width: 100%; }
  .product-nav { position: static; flex-wrap: wrap; }
  .nav-button { flex: 1; justify-content: center; min-width: 130px; }
  .migration-progress { width: 100%; margin: 2px 0 0; padding: 8px; text-align: center; }
  .sample-banner { align-items: stretch; flex-wrap: wrap; }
  .sample-banner p { flex-basis: calc(100% - 76px); }
  .sample-banner .compact { width: 100%; }
  .grid, .readiness, .overview-metrics, .task-list, .account-list, .workspace-columns, .workspace-material-list, .material-list, .incident-list, .monitor-layout, .pipeline-list, .candidate-list, .rules-layout, .parameter-list, .strategy-list, .quarantine-layout, .live-read-list dl { grid-template-columns: 1fr; }
  .compact-material dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-list dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .incident-list dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login-form { grid-template-columns: 1fr; }
  button { width: 100%; }
}