@import url("./pages/aop/aop-preview-reference.css");

@import url("./assets/remixicon/remixicon.css");

:root {
  --bg: #f4f9fc;
  --panel: rgba(255, 255, 255, 0.94);
  --text: #173252;
  --muted: #61758d;
  --line: #dce7ef;
  --nav: rgba(255, 255, 255, 0.96);
  --nav-2: #edf8e8;
  --primary: #55b72f;
  --success: #43a83f;
  --warning: #f59a16;
  --danger: #ef3340;
  --info: #1689ed;
  --radius: 14px;
  --evi-blue: #1689ed;
  --evi-blue-deep: #0872d1;
  --evi-apple: #72c947;
  --evi-grass: #43a83f;
  --evi-red: #ef3340;
  --evi-orange: #f59a16;
  --evi-sky-soft: #eaf5ff;
  --evi-green-soft: #edf8e8;
  --evi-red-soft: #ffeded;
  --evi-orange-soft: #fff3e2;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --font-xs: 12px;
  --font-sm: 13px;
  --font-md: 14px;
  --font-lg: 18px;
  --font-xl: 24px;
  --line-compact: 1.4;
  --line-body: 1.65;
  --letter-body: 0.01em;
  --card-padding-sm: 12px;
  --card-padding-md: 16px;
  --card-padding-lg: 24px;
  --drawer-sm: 420px;
  --drawer-md: 560px;
  --drawer-lg: 720px;
  --drawer-xl: 960px;
  --workspace-image: url("/src/assets/evi/sky-garden-reference.webp");
}

/* Content creation center: one secondary entry with six original inner workspaces. */
.page-container:has(> .content-creation-center) > .page-header-panel { display: none; }
.content-creation-center { display: grid; gap: 16px; min-width: 0; }
.content-center-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.content-center-heading p { margin: 0 0 5px; color: #738195; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.content-center-heading h1 { margin: 0 0 5px; color: #172033; font-size: 26px; }
.content-center-heading span { color: #64748b; font-size: 13px; }
.content-center-heading em { flex: 0 0 auto; padding: 7px 11px; color: #276749; background: #ecfdf3; border: 1px solid #b7e4ca; border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 700; }
.content-center-tabs { display: flex; gap: 4px; padding: 5px; overflow-x: auto; background: #eef2f7; border: 1px solid #dce3ec; border-radius: 12px; }
.content-center-tab { flex: 0 0 auto; padding: 9px 15px; color: #526173; border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none; }
.content-center-tab:hover { color: #172033; background: #fff; }
.content-center-tab.active { color: #fff; background: #263b56; box-shadow: 0 4px 12px rgba(38, 59, 86, .17); }
.content-center-original-mount { min-width: 0; }
.content-center-original-mount > [data-content-native-placeholder] { padding: 42px; color: #64748b; text-align: center; background: #fff; border: 1px solid #e1e7ef; border-radius: 12px; }
#contentCreationNativeRoot { min-width: 0; }
.content-api-page { display: grid; gap: 14px; }
.content-api-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px; background: #fff; border: 1px solid #dfe5ed; border-radius: 12px; }
.content-api-title > div > span { color: #728096; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.content-api-title h2 { margin: 5px 0 7px; color: #172033; font-size: 24px; }
.content-api-title p { margin: 0; color: #64748b; font-size: 13px; }
.content-api-security { display: flex; gap: 12px; align-items: center; padding: 12px 16px; color: #31566f; background: #edf7fb; border: 1px solid #cce3ee; border-radius: 10px; font-size: 13px; }
.content-api-security strong { flex: 0 0 auto; }
.content-api-provider-list { display: grid; gap: 14px; }
.content-api-provider { padding: 20px 22px; background: #fff; border: 1px solid #dfe5ed; border-radius: 12px; box-shadow: 0 5px 18px rgba(28, 39, 54, .04); }
.content-api-provider header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.content-api-provider header span { color: #748196; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.content-api-provider h3 { margin: 5px 0 6px; color: #172033; font-size: 18px; }
.content-api-provider header p { margin: 0; color: #64748b; font-size: 13px; }
.content-api-provider header em { padding: 5px 9px; border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 700; }
.content-api-provider header em.ready { color: #146c4a; background: #e9f8f0; }
.content-api-provider header em.waiting { color: #9a5a08; background: #fff5df; }
.content-api-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.content-api-fields label { display: grid; gap: 6px; color: #4a586b; font-size: 12px; font-weight: 700; }
.content-api-fields label.wide { grid-column: 1 / -1; }
.content-api-fields small { color: #7a8798; font-weight: 400; }
.content-api-fields input { width: 100%; box-sizing: border-box; padding: 10px 11px; color: #334155; background: #f8fafc; border: 1px solid #d6dee8; border-radius: 8px; }
.content-api-provider footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding-top: 14px; color: #748196; border-top: 1px solid #edf0f4; font-size: 12px; }
.content-api-empty { padding: 36px; color: #64748b; text-align: center; background: #fff; border: 1px dashed #cfd8e3; border-radius: 12px; }
.content-api-catalog { display: grid; gap: 14px; padding: 20px 22px; background: #fff; border: 1px solid #dfe5ed; border-radius: 12px; box-shadow: 0 5px 18px rgba(28, 39, 54, .04); }
.content-api-catalog > header span, .content-api-catalog-group summary span { color: #728096; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.content-api-catalog > header h3 { margin: 5px 0 7px; color: #172033; font-size: 19px; }
.content-api-catalog > header p { max-width: 900px; margin: 0; color: #64748b; font-size: 13px; line-height: 1.65; }
.content-api-catalog-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.content-api-catalog-summary span { display: grid; gap: 3px; padding: 12px 14px; color: #687588; background: #f7f9fc; border: 1px solid #e6ebf2; border-radius: 9px; font-size: 12px; }
.content-api-catalog-summary b { color: #22314a; font-size: 22px; line-height: 1; }
.content-api-catalog-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.content-api-catalog-legend em, .content-api-catalog-row em { display: inline-flex; align-items: center; width: fit-content; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 700; }
.content-api-catalog-legend em.ready, .content-api-catalog-row em.ready { color: #146c4a; background: #e9f8f0; }
.content-api-catalog-legend em.mock, .content-api-catalog-row em.mock { color: #265ea8; background: #eaf2ff; }
.content-api-catalog-legend em.waiting, .content-api-catalog-row em.waiting { color: #9a5a08; background: #fff5df; }
.content-api-catalog-groups { display: grid; gap: 10px; }
.content-api-catalog-group { overflow: hidden; border: 1px solid #e0e7ef; border-radius: 10px; }
.content-api-catalog-group summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; cursor: pointer; list-style: none; background: #fbfcfe; }
.content-api-catalog-group summary::-webkit-details-marker { display: none; }
.content-api-catalog-group summary > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.content-api-catalog-group summary strong { color: #23324b; font-size: 14px; }
.content-api-catalog-group summary small { color: #7b8797; font-size: 12px; }
.content-api-catalog-group summary i { color: #6d7b8e; font-size: 18px; font-style: normal; transition: transform .2s ease; }
.content-api-catalog-group[open] summary i { transform: rotate(180deg); }
.content-api-catalog-table { overflow-x: auto; }
.content-api-catalog-row { display: grid; grid-template-columns: minmax(190px, 1.2fr) minmax(240px, 1.4fr) minmax(250px, 1.5fr) minmax(130px, .8fr); gap: 14px; align-items: center; min-width: 860px; padding: 12px 15px; border-top: 1px solid #edf1f5; }
.content-api-catalog-row > span { display: grid; gap: 4px; }
.content-api-catalog-row > span > b { width: fit-content; padding: 2px 5px; color: #315f9e; background: #edf4ff; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 10px; }
.content-api-catalog-row > span > strong { color: #344158; font-size: 13px; }
.content-api-catalog-row > span > small { color: #78869a; font-size: 11px; line-height: 1.4; }
.content-api-catalog-row code { overflow-wrap: anywhere; color: #58677b; font-size: 11px; line-height: 1.45; }
.content-api-catalog-header { color: #738096; background: #f6f8fb; font-size: 11px; font-weight: 700; }

@media (max-width: 680px) {
  .content-center-heading, .content-api-title, .content-api-provider header, .content-api-provider footer { align-items: stretch; flex-direction: column; }
  .content-api-fields { grid-template-columns: 1fr; }
  .content-api-fields label.wide { grid-column: auto; }
  .content-api-catalog-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* AOP P0.0 approved V3.1 frontend preview; deliberately scoped to this page. */
.page-container:has(> .aop-preview) > .page-header-panel { display: none; }
.aop-preview {
  --aop-primary: #2367c9;
  --aop-success: #16805d;
  --aop-warning: #a66300;
  --aop-danger: #c43131;
  --aop-purple: #6941c6;
  --aop-text: #1f2933;
  --aop-muted: #667085;
  color: var(--aop-text);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  min-width: 0;
}
.aop-preview *, .aop-preview *::before, .aop-preview *::after { box-sizing: border-box; }
.aop-preview button, .aop-preview input, .aop-preview select { font: inherit; }
.aop-preview button { cursor: pointer; }
.aop-module-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 2px 0 14px; }
.aop-module-head h1 { margin: 0 0 7px; font-size: 25px; }
.aop-module-head p, .aop-preview header p { margin: 0; color: var(--aop-muted); font-size: 12px; }
.aop-module-meta, .aop-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.aop-toolbar { margin: -3px 0 14px; }
.aop-chip, .aop-status { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.aop-chip { padding: 6px 10px; background: #eef4ff; color: #1d5db9; border: 1px solid #d7e4fb; }
.aop-chip.green { background: #ecfdf3; color: #087653; border-color: #c9f1dc; }
.aop-chip.orange { background: #fff7e8; color: #9b5a00; border-color: #f4dbab; }
.aop-chip.gray { background: #f4f6f8; color: #5e6c7b; border-color: #e2e8f0; }
.aop-button { border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: 8px; padding: 8px 13px; font-size: 12px; font-weight: 700; transition: .18s; }
.aop-button:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(31,41,51,.08); }
.aop-button.primary { background: var(--aop-primary); border-color: var(--aop-primary); color: #fff; }
.aop-button.ghost { border-color: transparent; background: #eef4ff; color: #1e5db7; }
.aop-tabs { display: flex; gap: 5px; padding: 5px; background: #e9eef4; border-radius: 10px; margin-bottom: 16px; overflow-x: auto; }
.aop-tabs button { white-space: nowrap; border: 0; background: transparent; color: #566579; padding: 10px 15px; border-radius: 7px; font-weight: 700; font-size: 12px; }
.aop-tabs button.active { background: #fff; color: #155eef; box-shadow: 0 3px 12px rgba(23,33,43,.08); }
.aop-page { display: none; }
.aop-page.active { display: block; }
.aop-hero { display: flex; justify-content: space-between; gap: 22px; padding: 23px 25px; border-radius: 15px; background: linear-gradient(120deg,#123a73,#176b87); color: #fff; box-shadow: 0 6px 24px rgba(23,33,43,.08); margin-bottom: 15px; }
.aop-eyebrow { font-size: 11px; opacity: .78; letter-spacing: .08em; font-weight: 700; }
.aop-hero h2 { font-size: 23px; margin: 7px 0 9px; color: #fff; }
.aop-hero p { margin: 0; max-width: 850px; line-height: 1.8; opacity: .88; font-size: 13px; color: #fff; }
.aop-hero-side { min-width: 220px; border-left: 1px solid rgba(255,255,255,.2); padding-left: 21px; display: grid; align-content: center; gap: 10px; }
.aop-hero-side > div { display: flex; justify-content: space-between; gap: 12px; }
.aop-hero-side span { opacity: .72; font-size: 11px; }
.aop-hero-side strong { font-size: 13px; }
.aop-kpi-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 11px; margin-bottom: 15px; }
.aop-kpi { background: #fff; border: 1px solid #e1e7ef; border-radius: 11px; padding: 14px; box-shadow: 0 3px 12px rgba(31,41,51,.035); position: relative; overflow: hidden; }
.aop-kpi::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--aop-primary); }
.aop-kpi.green::after { background: var(--aop-success); } .aop-kpi.orange::after { background: #f59e0b; } .aop-kpi.red::after { background: var(--aop-danger); } .aop-kpi.purple::after { background: var(--aop-purple); }
.aop-kpi label { color: var(--aop-muted); font-size: 11px; display: block; }
.aop-kpi strong { display: block; font-size: 21px; margin: 8px 0 6px; }
.aop-kpi small { font-size: 10px; color: #788698; }
.aop-gap-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin: -3px 0 15px; }
.aop-gap-strip > div { background: #fff; border: 1px solid #e0e6ee; border-left: 4px solid #f59e0b; border-radius: 10px; padding: 11px 13px; display: grid; gap: 4px; }
.aop-gap-strip > div:nth-child(2) { border-left-color: var(--aop-danger); } .aop-gap-strip > .action { border-left-color: var(--aop-primary); background: #f7fbff; }
.aop-gap-strip span { font-size: 10px; color: var(--aop-muted); } .aop-gap-strip strong { font-size: 15px; } .aop-gap-strip small { font-size: 10px; color: #718096; }
.aop-grid-2 { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(330px,.75fr); gap: 15px; margin-bottom: 15px; }
.aop-panel { background: #fff; border: 1px solid #e0e6ee; border-radius: 12px; box-shadow: 0 4px 16px rgba(31,41,51,.045); padding: 17px; margin-bottom: 15px; min-width: 0; }
.aop-grid-2 > .aop-panel { margin-bottom: 0; }
.aop-panel > header { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 13px; }
.aop-panel h3 { margin: 0 0 5px; font-size: 16px; }
.aop-link { border: 0; background: transparent; color: var(--aop-primary); font-size: 11px; font-weight: 700; padding: 2px; }
.aop-goal-list { display: grid; gap: 8px; }
.aop-goal { border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px; display: grid; grid-template-columns: 35px minmax(0,1fr) 85px 69px; gap: 10px; align-items: center; }
.aop-goal-code { width: 32px; height: 32px; border-radius: 8px; background: #eaf2ff; color: #1c60c2; display: grid; place-items: center; font-weight: 800; }
.aop-goal strong { font-size: 12px; } .aop-goal p { margin: 3px 0 0; color: var(--aop-muted); font-size: 10px; }
.aop-goal small, .aop-progress + small { display: block; margin-top: 4px; color: #788698; font-size: 9px; }
.aop-progress { height: 7px; background: #e8edf3; border-radius: 999px; overflow: hidden; }
.aop-progress i { display: block; height: 100%; background: var(--aop-primary); border-radius: inherit; }
.aop-progress.green i { background: var(--aop-success); } .aop-progress.orange i { background: #f59e0b; } .aop-progress.red i { background: var(--aop-danger); }
.aop-status { padding: 5px 8px; }
.aop-status.green { background: #eaf8f2; color: #087653; } .aop-status.orange { background: #fff6e5; color: #9d5c00; } .aop-status.red { background: #fdecec; color: #b42318; } .aop-status.blue { background: #edf4ff; color: #1f5fb9; } .aop-status.gray { background: #f1f3f5; color: #64748b; }
.aop-budget-ring-wrap { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 6px 0 13px; }
.aop-ring { width: 134px; height: 134px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--aop-primary) 0 62%,#e8edf3 62% 100%); position: relative; }
.aop-ring::before { content: ""; width: 94px; height: 94px; background: #fff; border-radius: 50%; position: absolute; }
.aop-ring div { z-index: 1; text-align: center; } .aop-ring strong { font-size: 25px; display: block; } .aop-ring span { font-size: 10px; color: var(--aop-muted); }
.aop-budget-facts { display: grid; gap: 8px; min-width: 145px; }
.aop-budget-facts div { display: flex; justify-content: space-between; font-size: 11px; border-bottom: 1px dashed #dde4ec; padding-bottom: 7px; } .aop-budget-facts span { color: var(--aop-muted); }
.aop-risk-list { display: grid; gap: 8px; }
.aop-risk { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; gap: 9px; align-items: start; padding: 10px; border: 1px solid #e4eaf1; border-radius: 9px; }
.aop-risk > i { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; background: #f59e0b; } .aop-risk > i.red { background: var(--aop-danger); }
.aop-risk strong { font-size: 11px; } .aop-risk p { font-size: 10px; color: var(--aop-muted); margin: 3px 0 0; line-height: 1.5; }
.aop-table-scroll { overflow-x: auto; }
.aop-preview table { width: 100%; border-collapse: collapse; font-size: 11px; }
.aop-preview th { text-align: left; color: #607086; background: #f7f9fb; font-weight: 700; padding: 9px 8px; border-bottom: 1px solid #dfe6ee; white-space: nowrap; }
.aop-preview td { padding: 10px 8px; border-bottom: 1px solid #edf1f5; vertical-align: middle; }
.aop-strategy-cell strong, .aop-preview td > strong { display: block; font-size: 11px; }
.aop-strategy-cell small, .aop-preview td > small { display: block; color: var(--aop-muted); margin-top: 3px; }
.aop-next-action { min-width: 190px; color: #334155; font-weight: 600; line-height: 1.5; }
.aop-quarter-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.aop-quarter { border: 1px solid #e1e7ef; border-radius: 10px; padding: 13px; background: linear-gradient(180deg,#fff,#fafcff); }
.aop-quarter > div { display: flex; justify-content: space-between; align-items: center; } .aop-quarter h4 { margin: 0; font-size: 13px; }
.aop-quarter > strong { display: block; font-size: 18px; margin: 11px 0 6px; } .aop-quarter p { margin: 0 0 10px; color: var(--aop-muted); font-size: 10px; line-height: 1.5; }
.aop-bar-list { display: grid; gap: 12px; }
.aop-bar-list > div { display: grid; grid-template-columns: 110px 1fr 60px; gap: 10px; align-items: center; font-size: 11px; }
.aop-rule-list { display: grid; gap: 10px; }
.aop-rule-list > div, .aop-rule-list > label { display: grid; gap: 4px; padding: 11px 12px; background: #f7f9fc; border: 1px solid #e1e7ef; border-radius: 9px; font-size: 11px; }
.aop-rule-list p, .aop-rule-list small { margin: 0; color: var(--aop-muted); font-size: 10px; line-height: 1.55; }
.aop-ogsm-chain { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; }
.aop-ogsm-chain > div { padding: 14px; border-radius: 10px; border: 1px solid #dce4ed; position: relative; }
.aop-ogsm-chain > div:not(:last-child)::after { content: "→"; position: absolute; right: -10px; top: 43%; color: #8ea1b6; font-weight: 900; z-index: 2; }
.aop-ogsm-chain > div > span { width: 29px; height: 29px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--aop-primary); font-weight: 900; }
.aop-ogsm-chain > div:nth-child(2) > span { background: var(--aop-success); } .aop-ogsm-chain > div:nth-child(3) > span { background: var(--aop-purple); } .aop-ogsm-chain > div:nth-child(4) > span { background: #d48712; } .aop-ogsm-chain > div:nth-child(5) > span { background: #277a9f; }
.aop-ogsm-chain h4 { margin: 9px 0 6px; font-size: 12px; } .aop-ogsm-chain p { margin: 0; color: var(--aop-muted); font-size: 10px; line-height: 1.55; }
.aop-workflow { display: flex; align-items: center; justify-content: space-between; gap: 3px; padding: 12px; background: #f7f9fc; border: 1px solid #e1e7ef; border-radius: 10px; overflow-x: auto; }
.aop-workflow > div { min-width: 82px; text-align: center; } .aop-workflow b { width: 28px; height: 28px; border-radius: 50%; background: #eaf2ff; color: #1c60c2; display: grid; place-items: center; margin: 0 auto 5px; } .aop-workflow strong { display: block; font-size: 10px; } .aop-workflow span { display: block; color: var(--aop-muted); font-size: 9px; margin-top: 3px; } .aop-workflow > i { color: #a3afbd; }
.aop-note, .aop-calendar-note { margin-top: 12px; padding: 11px 12px; border-radius: 9px; background: #fff8e8; border: 1px solid #f4dfa9; font-size: 10px; color: #78530f; }
.aop-note p { margin: 4px 0 0; }
.aop-calendar-note { display: flex; gap: 10px; margin-bottom: 15px; }
.aop-segment { display: flex; background: #edf1f6; padding: 4px; border-radius: 9px; }
.aop-segment button { border: 0; background: transparent; padding: 7px 11px; border-radius: 7px; color: #637386; font-size: 11px; font-weight: 700; }
.aop-segment button.active { background: #fff; color: #155eef; box-shadow: 0 2px 8px rgba(31,41,51,.08); }
.aop-battle-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 15px; }
.aop-battle { border: 1px solid #dfe6ee; background: #fff; border-radius: 11px; padding: 14px; }
.aop-battle > div:first-child { display: flex; justify-content: space-between; } .aop-battle h3 { margin: 10px 0 6px; font-size: 14px; } .aop-battle > p { color: var(--aop-muted); font-size: 10px; line-height: 1.55; min-height: 48px; }
.aop-owner { display: flex; align-items: center; gap: 7px; margin: 11px 0; font-size: 10px; } .aop-owner > span { width: 24px; height: 24px; border-radius: 50%; background: #d9e8ff; color: #155eef; display: grid; place-items: center; font-weight: 800; }
.aop-battle-meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 10px 0; } .aop-battle-meta div { background: #f7f9fb; border-radius: 7px; padding: 6px; } .aop-battle-meta span { display: block; color: var(--aop-muted); font-size: 9px; } .aop-battle-meta strong { font-size: 10px; display: block; margin-top: 3px; }
.aop-month-chart { height: 220px; display: flex; gap: 8px; align-items: flex-end; padding: 14px 6px 28px; border-bottom: 1px solid #dfe6ee; position: relative; }
.aop-month-chart > div { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.aop-month-chart i { width: 70%; min-width: 16px; background: linear-gradient(180deg,#6ea2ec,#2367c9); border-radius: 5px 5px 0 0; position: relative; }
.aop-month-chart i::after { content: attr(data-v); position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: 8px; color: #475569; white-space: nowrap; }
.aop-month-chart span { position: absolute; bottom: -20px; font-size: 9px; color: #64748b; }
.aop-week-list { display: grid; gap: 9px; }
.aop-week-list > div { display: grid; grid-template-columns: 32px minmax(0,1fr) 90px auto; gap: 9px; align-items: center; border: 1px solid #e2e8f0; border-radius: 9px; padding: 9px; }
.aop-week-list > div > span:first-child { width: 27px; height: 27px; border-radius: 7px; background: #fff6e5; color: #9d5c00; display: grid; place-items: center; font-weight: 900; font-size: 10px; } .aop-week-list > div > span.done { background: #eaf8f2; color: #087653; }
.aop-week-list strong { font-size: 11px; } .aop-week-list p { margin: 3px 0 0; color: var(--aop-muted); font-size: 10px; }
.aop-kiss-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; margin-bottom: 15px; }
.aop-kiss-grid article { border-radius: 11px; padding: 14px; border: 1px solid #dfe6ee; min-height: 166px; } .aop-kiss-grid h3 { margin: 0 0 9px; font-size: 13px; } .aop-kiss-grid ul { padding-left: 16px; margin: 0; } .aop-kiss-grid li { font-size: 10px; color: #536477; line-height: 1.7; }
.aop-kiss-grid .keep { background: #f2fbf7; } .aop-kiss-grid .improve { background: #f5f3ff; } .aop-kiss-grid .start { background: #eef7ff; } .aop-kiss-grid .stop { background: #fff3f2; }
.aop-page-nav, .aop-plan-toolbar { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: -3px 0 13px; }
.aop-plan-toolbar > div { display: flex; flex-wrap: wrap; gap: 8px; }
.aop-input { border: 1px solid #cbd5e1; background: #fff; border-radius: 8px; padding: 8px 10px; font-size: 11px; color: #334155; }
.aop-actions { display: flex; gap: 8px; } .aop-actions button { border: 0; background: transparent; color: var(--aop-primary); font-size: 10px; font-weight: 700; padding: 0; }
.aop-governance-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.aop-governance-grid > div { border: 1px solid #dfe6ee; border-radius: 10px; padding: 13px; background: linear-gradient(180deg,#fff,#fafcff); } .aop-governance-grid h4 { margin: 0 0 6px; font-size: 13px; } .aop-governance-grid p { margin: 0; color: var(--aop-muted); font-size: 10px; line-height: 1.6; }
.aop-permission th, .aop-permission td { text-align: center; } .aop-permission th:first-child, .aop-permission td:first-child { text-align: left; } .aop-permission .yes { color: var(--aop-success); font-weight: 900; } .aop-permission .no { color: #aab4c1; }
.aop-audit-lines > div { display: grid; grid-template-columns: 135px 90px 115px minmax(0,1fr) 80px; gap: 9px; padding: 10px 0; border-bottom: 1px solid #edf1f5; align-items: center; font-size: 10px; } .aop-audit-lines p { margin: 0; } .aop-audit-lines span { color: var(--aop-muted); }
.aop-toast { position: fixed; right: 24px; bottom: 24px; background: #17212b; color: #fff; border-radius: 9px; padding: 12px 16px; box-shadow: 0 12px 35px rgba(23,33,43,.28); font-size: 11px; opacity: 0; transform: translateY(15px); transition: .22s; pointer-events: none; z-index: 999; }
.aop-toast.show { opacity: 1; transform: translateY(0); }
.aop-modal-mask { position: fixed; inset: 0; background: rgba(15,23,42,.42); display: none; align-items: center; justify-content: center; z-index: 990; padding: 20px; }
.aop-modal-mask.show { display: flex; }
.aop-modal { width: 520px; max-width: 100%; background: #fff; border-radius: 13px; padding: 20px; box-shadow: 0 25px 60px rgba(15,23,42,.28); }
.aop-modal.decision { width: 750px; max-height: 88vh; overflow-y: auto; }
.aop-modal h3 { margin: 0 0 8px; } .aop-modal > p { color: var(--aop-muted); font-size: 11px; line-height: 1.65; }
.aop-modal > header { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; border-bottom: 1px solid #e5eaf1; padding-bottom: 12px; }
.aop-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.aop-decision-context { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 14px 0; }
.aop-decision-context > div { background: #f7f9fc; border: 1px solid #e1e7ef; border-radius: 9px; padding: 11px; } .aop-decision-context span, .aop-decision-recommend span { font-size: 10px; color: var(--aop-muted); font-weight: 700; } .aop-decision-context p, .aop-decision-recommend p { font-size: 11px; line-height: 1.6; margin: 5px 0 0; color: #4f6073; }
.aop-decision-options { display: grid; gap: 8px; } .aop-decision-option { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 9px; padding: 11px; border: 1px solid #dce4ed; border-radius: 10px; cursor: pointer; } .aop-decision-option.selected { border-color: var(--aop-primary); background: #f2f7ff; box-shadow: 0 0 0 2px rgba(35,103,201,.08); } .aop-decision-option strong { font-size: 12px; } .aop-decision-option p { font-size: 10px; color: var(--aop-muted); margin: 3px 0 0; }
.aop-decision-recommend { margin: 12px 0; padding: 11px 13px; border-radius: 10px; background: #ecfdf3; border: 1px solid #c9f1dc; } .aop-decision-recommend strong { display: block; margin-top: 5px; color: #087653; font-size: 12px; }
.aop-decision-form { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; } .aop-decision-form label { display: grid; gap: 6px; font-size: 11px; color: #526274; font-weight: 700; } .aop-decision-form input:not([type="checkbox"]) { border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px; } .aop-decision-form .wide { grid-column: span 2; display: flex; align-items: center; gap: 8px; }

@media (max-width: 1500px) {
  .aop-kpi-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .aop-quarter-grid, .aop-battle-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .aop-grid-2 { grid-template-columns: minmax(0,1.3fr) minmax(300px,.8fr); }
  .aop-gap-strip { grid-template-columns: 1fr; }
}
@media (max-width: 1120px) {
  .aop-module-head, .aop-hero { flex-direction: column; }
  .aop-module-meta, .aop-toolbar { justify-content: flex-start; }
  .aop-hero-side { width: 100%; border-left: 0; border-top: 1px solid rgba(255,255,255,.2); padding: 14px 0 0; grid-template-columns: repeat(2,1fr); }
  .aop-grid-2, .aop-kiss-grid { grid-template-columns: 1fr; }
  .aop-ogsm-chain { grid-template-columns: 1fr; }
  .aop-ogsm-chain > div:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -13px; }
}

/* 经营执行：白名单内部试用的三个最小页面 */
.lite-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.lite-tabs a { padding:9px 14px; border:1px solid var(--border, #dbe4ef); border-radius:999px; color:var(--text-secondary, #526274); text-decoration:none; background:#fff; }
.lite-tabs a.active { color:#fff; background:#155eef; border-color:#155eef; }
.lite-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px; margin-bottom:16px; border-radius:18px; color:#fff; background:linear-gradient(120deg, #123a73, #176b87); }
.lite-hero h2 { margin:4px 0 6px; color:#fff; }
.lite-hero p { margin:0; opacity:.86; }
.lite-hero .eyebrow { font-size:12px; letter-spacing:.08em; opacity:.78; }
.lite-panel { margin-bottom:18px; }
.lite-ai-authoring { margin:16px 0; padding:16px; border:1px solid #cfe0ff; border-radius:14px; background:#f7faff; }
.lite-ai-authoring .form-hint { margin:10px 0; color:#64748b; font-size:13px; }
.lite-form-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.aop-ai-review-checklist { display:grid; gap:5px; margin-top:10px; padding:10px 12px; border-left:3px solid #367f43; border-radius:6px; background:#f2faf2; color:#285b30; font-size:13px; }
.aop-ai-review-checklist strong { font-size:14px; }
.lite-form-grid label { display:flex; flex-direction:column; gap:6px; color:var(--text-secondary, #526274); font-size:13px; font-weight:600; }
.lite-form-grid label.span-2 { grid-column:span 2; }
.lite-form-grid input:not([type="checkbox"]), .lite-form-grid select, .lite-form-grid textarea, .lite-evidence textarea { width:100%; box-sizing:border-box; border:1px solid var(--border, #dbe4ef); border-radius:10px; padding:10px 11px; background:#fff; color:var(--text-primary, #172033); font:inherit; font-weight:400; }
.lite-form-grid input:disabled, .lite-form-grid select:disabled, .lite-form-grid textarea:disabled { background:#f4f7fb; color:#65758b; }
.lite-form-grid .check-line { flex-direction:row; align-items:center; align-self:end; min-height:40px; }
.lite-action-list { display:grid; gap:16px; margin-top:18px; }
.lite-action { border:1px solid #dbe4ef; border-radius:14px; padding:16px; background:#f9fbfd; }
.lite-action legend { padding:0 8px; font-weight:700; color:#17365d; }
.lite-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.lite-history { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:18px; padding-top:14px; border-top:1px solid #e6ecf3; }
.lite-task, .lite-kiss { border:1px solid #dbe4ef; border-radius:14px; padding:16px; margin-top:14px; background:#fff; }
.lite-task h4 { margin:0 0 4px; }
.lite-task .section-heading p { max-width:760px; white-space:pre-line; }
.lite-facts { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin:12px 0; }
.lite-facts div { padding:10px; border-radius:10px; background:#f5f8fc; }
.lite-facts dt { color:#718096; font-size:12px; }
.lite-facts dd { margin:4px 0 0; font-weight:600; }
.lite-evidence-list { display:grid; gap:10px; }
.lite-evidence { padding:12px; border:1px solid #e3eaf2; border-radius:12px; }
.lite-evidence p { color:#65758b; margin:6px 0; }
.lite-evidence pre { margin:8px 0 0; padding:10px; border-radius:8px; white-space:pre-wrap; word-break:break-word; background:#f5f8fc; }
.lite-kiss-list { display:grid; gap:10px; margin-top:16px; }
.lite-kiss p { margin:8px 0; }
.lite-risk-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(132px, 1fr)); gap:10px; margin-top:14px; }
.lite-risk-card { border:1px solid #dbe4ef; border-radius:12px; padding:13px; background:#fff; display:grid; gap:5px; }
.lite-risk-card strong { color:#41566f; font-size:13px; }
.lite-risk-card b { color:#1f4d7a; font-size:24px; line-height:1; }
.lite-risk-card small { color:#718096; font-size:12px; line-height:1.35; }
@media (max-width: 760px) {
  .lite-form-grid, .lite-facts { grid-template-columns:1fr; }
  .lite-form-grid label.span-2 { grid-column:span 1; }
  .lite-hero { align-items:flex-start; flex-direction:column; }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--text);
  background: var(--bg);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  font-size: var(--font-md);
  line-height: var(--line-body);
  letter-spacing: var(--letter-body);
}

button,
input {
  font: inherit;
}

select,
textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.task-title-link {
  display: grid;
  gap: 4px;
  color: var(--primary);
}

.task-title-link small,
.task-policy-table td small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.task-policy-hero,
.task-detail-hero {
  align-items: center;
}

.task-policy-hero > div:first-child,
.task-policy-panel > .section-title > div:first-child {
  min-width: 0;
}

.task-policy-hero p,
.task-policy-panel > .section-title p {
  overflow-wrap: anywhere;
}

.task-policy-version,
.task-detail-status {
  min-width: 180px;
  display: grid;
  gap: 5px;
  padding: 14px 18px;
  border: 1px solid #cfd8e6;
  border-radius: var(--radius);
  background: #fff;
}

.task-policy-version strong,
.task-detail-status strong {
  font-size: 24px;
  color: var(--primary);
}

.task-policy-version small,
.task-detail-status small {
  color: var(--muted);
}

.task-policy-panel {
  padding: 0;
  overflow: hidden;
}

.task-policy-panel > .section-title {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.task-policy-table {
  width: 100%;
  min-width: 880px;
  table-layout: fixed;
}

.task-policy-table th,
.task-policy-table td {
  padding: 12px 8px;
  vertical-align: middle;
}

.task-policy-table th:nth-child(1) { width: 112px; }
.task-policy-table th:nth-child(2) { width: 64px; }
.task-policy-table th:nth-child(3) { width: 128px; }
.task-policy-table th:nth-child(4) { width: 138px; }
.task-policy-table th:nth-child(5) { width: 122px; }
.task-policy-table th:nth-child(6) { width: 120px; }
.task-policy-table th:nth-child(7),
.task-policy-table th:nth-child(8) { width: 82px; }

.task-policy-table input[type="number"],
.task-policy-table select,
.task-policy-footer input,
.acceptance-item input,
.acceptance-item textarea {
  width: 100%;
  border: 1px solid #becbe0;
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  padding: 9px 10px;
}

.number-unit {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.number-unit input {
  width: 62px !important;
}

.number-unit span {
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
}

.switch-control {
  display: inline-flex;
  align-items: center;
}

.switch-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-control span {
  width: 40px;
  height: 22px;
  position: relative;
  border-radius: 999px;
  background: #b8c4d6;
  transition: 160ms ease;
}

.switch-control span::after {
  content: "";
  width: 18px;
  height: 18px;
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(31, 41, 51, .25);
  transition: 160ms ease;
}

.switch-control input:checked + span {
  background: var(--primary);
}

.switch-control input:checked + span::after {
  transform: translateX(18px);
}

.switch-control input:disabled + span {
  opacity: .55;
}

.task-policy-footer {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(320px, 1fr);
  gap: 24px;
  align-items: end;
  padding: 18px 20px;
  border-top: 1px solid var(--line);
  background: #f9fbfd;
}

.task-policy-footer label {
  display: grid;
  gap: 7px;
  font-weight: 600;
}

.task-policy-footer p {
  margin: 0;
  color: var(--muted);
}

.task-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
}

.task-detail-layout main,
.task-detail-layout aside {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 18px;
}

.task-people-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.task-people-panel > div {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f9fbfd;
}

.task-people-panel span {
  color: var(--muted);
  font-size: 13px;
}

.acceptance-list {
  display: grid;
  gap: 14px;
}

.acceptance-item {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.acceptance-item > header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.acceptance-item h3 {
  margin: 4px 0 0;
}

.acceptance-item > p {
  color: var(--muted);
}

.acceptance-order {
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

.status-chip {
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef2f7;
  color: #526173;
  font-size: 12px;
  white-space: nowrap;
}

.status-chip.status-accepted {
  background: #e7f6ef;
  color: var(--success);
}

.status-chip.status-rejected {
  background: #fff0f0;
  color: var(--danger);
}

.selling-point-grid,
.listing-advice-grid {
  display: grid;
  gap: 10px;
}

.objective-mapping-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
}

.objective-mapping-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.selling-point-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.listing-advice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.listing-advice-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.task-submit-actions,
.acceptance-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

@media (max-width: 1100px) {
  .task-detail-layout {
    grid-template-columns: 1fr;
  }

  .task-people-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .task-policy-footer,
  .listing-advice-grid,
  .task-people-panel {
    grid-template-columns: 1fr;
  }

  .selling-point-row {
    grid-template-columns: 1fr;
  }

  .objective-mapping-grid {
    grid-template-columns: 1fr;
  }
}

.panel,
.metric-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(31, 41, 51, 0.06);
}

.search {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: #fff;
  color: var(--text);
}

.form-error {
  border: 1px solid rgba(196, 49, 49, 0.3);
  background: rgba(196, 49, 49, 0.08);
  color: var(--danger);
  border-radius: 6px;
  padding: 10px;
}

.form-notice {
  margin: 12px 0;
  border: 1px solid rgba(22, 128, 93, 0.3);
  background: rgba(22, 128, 93, 0.08);
  color: var(--success);
  border-radius: 6px;
  padding: 10px;
}

.app-shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 248px 224px minmax(0, 1fr);
  overflow: hidden;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 56px 224px minmax(0, 1fr);
}
.app-shell.secondary-sidebar-collapsed {
  grid-template-columns: 248px 64px minmax(0, 1fr);
}

.app-shell.sidebar-collapsed.secondary-sidebar-collapsed {
  grid-template-columns: 56px 64px minmax(0, 1fr);
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
  background: var(--nav);
  color: #d9e2ec;
  padding: 20px 16px;
}

.sidebar-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 16px;
}

.sidebar-toggle {
  position: absolute;
  top: 8px;
  right: 0;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
  font-weight: 800;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.16);
}

.brand {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 4px 0 10px;
  text-align: center;
}

.brand-logo {
  display: block;
  width: 58px;
  height: 58px;
}

.brand-copy {
  display: grid;
  justify-items: center;
  gap: 5px;
}

.brand strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.2;
}

.brand-version {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.sidebar nav {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sidebar-link {
  border-radius: 6px;
  padding: 12px 14px;
  color: #d9e2ec;
  text-decoration: none;
  font-weight: 700;
}

.sidebar-link.active,
.sidebar-link:hover {
  background: var(--nav-2);
  color: #ffffff;
}

.session-identity-card {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-top: 14px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 9px;
  background: rgba(255, 255, 255, .07);
}

.session-identity-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f3a15f;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.session-identity-details {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.session-identity-details strong,
.session-identity-details span,
.session-identity-details small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-identity-details strong {
  color: #fff;
  font-size: 13px;
}

.session-identity-details span {
  color: #d9e2ec;
  font-size: 11px;
}

.session-identity-details small {
  color: #9fb0c4;
  font-size: 10px;
}
.app-shell.sidebar-collapsed .sidebar {
  padding: 16px 8px;
}

.app-shell.sidebar-collapsed .sidebar-head {
  align-items: center;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 0;
}

.app-shell.sidebar-collapsed .brand {
  padding: 0;
}

.app-shell.sidebar-collapsed .brand-copy,
.app-shell.sidebar-collapsed .sidebar nav {
  display: none;
}

.app-shell.sidebar-collapsed .sidebar-toggle {
  position: static;
}

.app-shell.sidebar-collapsed .session-identity-card {
  justify-content: center;
  margin-top: auto;
  padding: 7px 0;
}

.app-shell.sidebar-collapsed .session-identity-details {
  display: none;
}

.app-shell.sidebar-collapsed .brand-logo,
.app-shell.sidebar-collapsed .sidebar-toggle {
  width: 44px;
  height: 40px;
}

.secondary-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--line);
  background: #ffffff;
  padding: 16px 12px;
}

.secondary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.secondary-kicker,
.page-kicker {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}

.secondary-title {
  display: block;
  font-size: 16px;
}

.secondary-toggle {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7f9fc;
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
}

.secondary-nav {
  display: grid;
  gap: 6px;
  padding-top: 14px;
}

.secondary-nav-section {
  margin: 10px 10px 1px;
  border-top: 1px solid #edf0f4;
  padding-top: 10px;
  color: #7b8794;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

.secondary-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  padding: 8px 10px;
  font-size: 14px;
}

.secondary-link-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #eef4ff;
  color: var(--primary);
  font-weight: 800;
  font-size: 12px;
}

.secondary-link-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.secondary-link-icon.icon-tone-indigo {
  color: #5145cd;
  background: #efedff;
}

.secondary-link-icon.icon-tone-blue { color: #2563eb; background: #eaf1ff; }
.secondary-link-icon.icon-tone-cyan { color: #097c9f; background: #e7f8fc; }
.secondary-link-icon.icon-tone-green { color: #178351; background: #e6f8ef; }
.secondary-link-icon.icon-tone-amber { color: #a56100; background: #fff4dc; }
.secondary-link-icon.icon-tone-teal { color: #0b887e; background: #e5f8f5; }
.secondary-link-icon.icon-tone-rose { color: #c63865; background: #ffedf3; }
.secondary-link-icon.icon-tone-violet { color: #7047c6; background: #f1ebff; }

.secondary-link-icon.icon-tone-emerald {
  color: #087f5b;
  background: #e6f8f1;
}

.secondary-link-icon.icon-tone-orange {
  color: #b45309;
  background: #fff1df;
}

.secondary-link.active .secondary-link-icon[class*="icon-tone-"] {
  box-shadow: inset 0 0 0 1px currentColor;
}

.secondary-link.active,
.secondary-link:hover {
  background: #eef4ff;
  color: var(--primary);
}

.governance-anchor,
#modules {
  scroll-margin-top: 88px;
}

.governance-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.app-shell.secondary-sidebar-collapsed .secondary-sidebar {
  padding: 14px 8px;
}

.app-shell.secondary-sidebar-collapsed .secondary-head {
  align-items: center;
  flex-direction: column;
  padding-bottom: 10px;
}

.app-shell.secondary-sidebar-collapsed .secondary-kicker,
.app-shell.secondary-sidebar-collapsed .secondary-title,
.app-shell.secondary-sidebar-collapsed .secondary-nav-section,
.app-shell.secondary-sidebar-collapsed .secondary-link-label {
  display: none;
}

.app-shell.secondary-sidebar-collapsed .secondary-nav {
  justify-items: center;
}

.app-shell.secondary-sidebar-collapsed .secondary-link {
  justify-content: center;
  width: 40px;
  padding: 8px;
}

.governance-anchor {
  scroll-margin-top: 20px;
}

.governance-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.governance-status-grid .panel {
  min-width: 0;
}
.workspace {
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  container-type: inline-size;
  container-name: workspace-shell;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  min-height: 80px;
  padding: 18px 24px;
  background: rgba(244, 246, 248, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

.topbar h1 {
  margin: 0 0 4px;
  font-size: 24px;
  letter-spacing: 0;
}

.topbar p {
  margin: 0;
  color: var(--muted);
}

.topbar-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search {
  width: min(24vw, 260px);
}

@container workspace-shell (max-width: 700px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
    min-height: auto;
    padding: 14px 16px;
  }

  .topbar-tools {
    width: 100%;
    flex-wrap: wrap;
  }

  .search {
    width: 100%;
  }
}

.page-container {
  padding: 24px;
}

.page-header-panel {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  padding: 18px;
  margin-bottom: 16px;
}

.page-header-actions,
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  padding: 6px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.product-library-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  padding: 18px;
  margin-bottom: 16px;
}

.mini-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  padding: 14px;
}

.text-link {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}

.status-list {
  display: grid;
  gap: 10px;
}

.page-header-panel h2 {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0;
}

.page-header-panel p {
  margin: 0;
  color: var(--muted);
}

.section-head h2 {
  margin: 0 0 4px;
  font-size: 18px;
}

.section-head p {
  margin: 0;
  color: var(--muted);
}

.product-library-hero h2 {
  margin: 10px 0 8px;
  font-size: 24px;
}

.product-library-hero {
  padding: 14px 18px;
}

.product-library-hero h2 {
  margin: 6px 0 4px;
  font-size: 22px;
}

.product-library-hero .product-safety-note {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
}

.product-library-metrics {
  gap: 12px;
  margin-bottom: 16px;
}

.product-library-metrics .metric-card {
  min-height: 92px;
  padding: 12px 14px;
}

.product-library-metrics .metric-value {
  margin-top: 6px;
  font-size: 25px;
}

.product-library-metrics .metric-trend {
  margin-top: 4px;
}

.product-library-hero p,
.mini-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.product-library-section {
  scroll-margin-top: 20px;
}

.product-library-overview {
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 10px 24px rgba(31, 41, 51, 0.04);
}

.product-layout-switch,
.product-filter-actions,
.product-archive-actions,
.product-card-status,
.product-gap-head,
.product-gap-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.product-filter-bar {
  display: grid;
  grid-template-columns: minmax(200px, 1.35fr) repeat(3, minmax(130px, 0.8fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f8fafc;
}

.product-filter-bar label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.product-filter-bar input,
.product-filter-bar select {
  width: 100%;
  min-height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
}

.product-filter-bar input:focus,
.product-filter-bar select:focus,
.product-library-card:focus-visible,
.product-list-name:focus-visible {
  outline: 3px solid rgba(35, 103, 201, 0.2);
  outline-offset: 2px;
  border-color: var(--primary);
}

.product-collection-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 13px;
}

.product-library-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.product-collection {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-width: 0;
}

.product-collection.list-mode {
  display: block;
}

.product-library-overview .product-collection:not(.list-mode) {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.product-archive-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.product-archive-picker-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.product-archive-picker-item:hover,
.product-archive-picker-item.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(35, 103, 201, 0.1);
}

.product-archive-picker-item > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.product-archive-picker-item strong,
.product-archive-picker-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-archive-picker-item small {
  color: var(--muted);
}

.product-library-image-picker,
.product-image-empty.product-library-image-picker {
  width: 64px;
  height: 64px;
  min-height: 64px;
  padding: 4px;
  border-radius: 4px;
}

.product-image-empty.product-library-image-picker span {
  display: none;
}

.product-library-card {
  display: grid;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.product-library-card:hover {
  border-color: #8bb2e8;
  box-shadow: 0 10px 22px rgba(35, 103, 201, 0.1);
  transform: translateY(-1px);
}

.product-library-card.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(35, 103, 201, 0.12);
}

.product-library-image {
  display: block;
  width: 100%;
  object-fit: cover;
  background: #f1f5f9;
}

.product-library-image-card,
.product-image-empty.product-library-image-card {
  aspect-ratio: 16 / 10;
}

.product-image-empty {
  display: grid;
  place-content: center;
  gap: 6px;
  min-height: 150px;
  padding: 18px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  color: #536171;
  text-align: center;
}

.product-image-empty span {
  color: var(--muted);
  font-size: 12px;
}

.product-card-body {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.product-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.product-card-head strong {
  font-size: 15px;
  line-height: 1.45;
}

.product-card-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.product-completeness {
  display: grid;
  gap: 6px;
  width: 100%;
}

.product-completeness > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.product-completeness strong {
  color: var(--primary);
}

.completeness-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7edf5;
}

.completeness-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.product-list-name {
  display: grid;
  gap: 3px;
  border: 0;
  background: transparent;
  color: var(--primary);
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-weight: 700;
}

.product-list-name small {
  color: var(--muted);
  font-weight: 400;
}

.product-archive-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.product-archive-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.product-archive-head h2 {
  margin: 5px 0 3px;
  font-size: 21px;
}

.product-archive-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.product-archive-actions {
  justify-content: flex-end;
}

.product-archive-summary {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
}

.product-library-image-detail,
.product-image-empty.product-library-image-detail {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
}

.product-basic-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.product-basic-facts > div {
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid #edf0f4;
}

.product-basic-facts dt {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
}

.product-basic-facts dd {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.product-basic-facts .product-fact-wide {
  grid-column: 1 / -1;
  border-bottom: 0;
}

.product-knowledge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.product-knowledge-grid > section {
  min-width: 0;
  padding: 16px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.product-knowledge-grid > section:nth-child(2n) {
  border-right: 0;
}

.product-identity-section {
  padding: 16px;
  border-top: 1px solid var(--line);
  overflow-x: auto;
}

.product-governance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
}

.product-source-card,
.product-rule-card,
.product-department-grid article {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.product-source-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 0;
}

.product-source-facts div {
  padding: 10px;
  border-radius: 6px;
  background: #f8fafc;
}

.product-source-facts dt {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
}

.product-source-facts dd {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.product-rule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.product-rule-card {
  display: grid;
  align-content: start;
  gap: 12px;
}

.product-rule-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.product-rule-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.product-rule-summary div,
.product-barcode-status-grid div,
.product-dimension-grid div {
  min-width: 0;
  padding: 10px;
  border-radius: 6px;
  background: #f8fafc;
}

.product-rule-summary dt,
.product-barcode-status-grid span,
.product-dimension-grid span,
.product-nameplate-grid article > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.product-rule-summary dd {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.product-rule-preview {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  background: #eff6ff;
}

.product-nameplate-section,
.product-barcode-readiness {
  padding: 16px;
  border-top: 1px solid var(--line);
  background: #fbfcfe;
}

.product-nameplate-title {
  align-items: flex-start;
}

.product-nameplate-title h3,
.product-barcode-readiness h3 {
  margin: 0;
  font-size: 17px;
}

.product-nameplate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.product-nameplate-grid article {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.product-nameplate-grid article strong,
.product-barcode-status-grid strong,
.product-dimension-grid strong {
  display: block;
  overflow-wrap: anywhere;
}

.product-nameplate-grid article small,
.product-department-grid small {
  color: var(--muted);
  line-height: 1.5;
}

.product-nameplate-grid ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text);
  line-height: 1.55;
}

.product-listing-advice-card {
  grid-column: 1 / -1;
}

.product-listing-advice-card p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.product-dimension-grid,
.product-barcode-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.product-barcode-status-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.product-barcode-readiness .section-title {
  align-items: flex-start;
}

.product-sync-notice {
  margin-top: 10px;
}

.product-sync-notice-success {
  border-color: rgba(22, 128, 93, 0.28);
  background: rgba(22, 128, 93, 0.08);
}

.product-sync-notice-warning {
  border-color: rgba(180, 83, 9, 0.28);
  background: rgba(245, 158, 11, 0.09);
}

.product-rule-owner {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.product-rule-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.product-rule-fields span {
  padding: 4px 7px;
  border-radius: 999px;
  background: #eef4fc;
  color: #315b8f;
  font-size: 11px;
}

.product-department-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.product-department-grid article {
  display: grid;
  gap: 7px;
}

.product-department-grid span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.product-knowledge-grid h3,
.product-gap-card h3,
.product-relation-card h3,
.product-change-card h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

.product-knowledge-grid .suggestion-list,
.product-change-card .suggestion-list {
  gap: 7px;
}

.product-knowledge-grid .suggestion-card,
.product-change-card .suggestion-card {
  padding: 10px;
  box-shadow: none;
}

.product-gap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.product-gap-card,
.product-relation-card,
.product-change-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.product-gap-card p,
.product-relation-card p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.55;
}

.product-gap-meta {
  justify-content: space-between;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
}

.product-relation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 14px;
}

.product-relation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.status-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.metric-section {
  margin-bottom: 16px;
}

.metric-section 
.page-header-panel h2 {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0;
}

.page-header-panel p {
  margin: 0;
  color: var(--muted);
}

.section-head h2 {
  margin: 0 0 4px;
  font-size: 18px;
}

.section-head p {
  margin: 0;
  color: var(--muted);
}

.product-library-hero h2 {
  margin: 10px 0 8px;
  font-size: 24px;
}

.product-library-hero p,
.mini-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.status-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.metric-grid {
  margin-bottom: 0;
}

.metric-card {
  padding: 16px;
  min-height: 116px;
}

.metric-label {
  color: var(--muted);
  font-size: 14px;
}

.metric-value {
  margin-top: 12px;
  font-size: 30px;
  font-weight: 800;
}

.metric-trend {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.metric-danger {
  border-top: 4px solid var(--danger);
}

.metric-warning {
  border-top: 4px solid var(--warning);
}

.metric-success {
  border-top: 4px solid var(--success);
}

.metric-neutral {
  border-top: 4px solid #8793a4;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.panel {
  padding: 16px;
  min-width: 0;
}

.panel-wide {
  grid-column: span 2;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-title h2,
.panel h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0;
}

.muted-text {
  color: var(--muted);
}

.callout {
  border-left: 4px solid var(--primary);
  background: #eef4ff;
  padding: 12px;
  border-radius: 6px;
  margin: 14px 0;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 10px 8px;
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.row-actions,
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn,
.icon-btn {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text);
  padding: 9px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #ffffff;
}

.btn-secondary:hover,
.icon-btn:hover,
.btn-ghost:hover {
  border-color: #9aa7b8;
  background: #f8fafc;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.tag-danger {
  background: rgba(196, 49, 49, 0.1);
  color: var(--danger);
}

.tag-warning {
  background: rgba(166, 99, 0, 0.12);
  color: var(--warning);
}

.tag-success {
  background: rgba(22, 128, 93, 0.12);
  color: var(--success);
}

.tag-info {
  background: rgba(39, 122, 159, 0.12);
  color: var(--info);
}

.tag-mock {
  background: rgba(99, 102, 241, 0.12);
  color: #4f46e5;
}

.tag-neutral {
  background: #eef1f5;
  color: #536171;
}

.suggestions {
  margin: 0 0 16px;
  padding-left: 22px;
  display: grid;
  gap: 10px;
}

.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.shortcut {
  display: block;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  background: #f8fafc;
  font-weight: 700;
}

.department-list,
.health-list {
  display: grid;
  gap: 10px;
}

.department-row,
.health-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 9px;
}

.health-row {
  grid-template-columns: 1fr auto minmax(120px, 1.2fr);
}

.department-row em,
.health-row em {
  color: var(--muted);
  font-style: normal;
  font-size: 13px;
}

.state {
  display: grid;
  place-items: center;
  min-height: 220px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--muted);
}

.state-error {
  color: var(--danger);
}

@media (max-width: 1360px) {
  .product-library-workspace {
    grid-template-columns: 1fr;
  }

  .product-collection {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }
}

@media (max-width: 1180px) {
  .metric-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .panel-wide {
    grid-column: span 1;
  }

  .product-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-filter-search,
  .product-filter-actions {
    grid-column: 1 / -1;
  }

  .product-library-workspace {
    grid-template-columns: 1fr;
  }

  .product-collection {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }

  .product-gap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-governance-grid {
    grid-template-columns: 1fr;
  }

  .product-rule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-nameplate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-barcode-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-department-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .app-shell,
  .app-shell.sidebar-collapsed,
  .app-shell.secondary-sidebar-collapsed,
  .app-shell.sidebar-collapsed.secondary-sidebar-collapsed {
    height: auto;
    min-height: 100vh;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }

  .sidebar,
  .secondary-sidebar,
  .app-shell.sidebar-collapsed .sidebar,
  .app-shell.secondary-sidebar-collapsed .secondary-sidebar {
    position: static;
    width: 100%;
    min-width: 0;
    height: auto;
    overflow: visible;
    padding: 12px 16px;
  }

  .app-shell.sidebar-collapsed .sidebar-head {
    align-items: flex-start;
    flex-direction: row;
    gap: 8px;
    padding-bottom: 16px;
  }

  .app-shell.sidebar-collapsed .brand {
    padding: 8px 0 6px;
  }

  .app-shell.sidebar-collapsed .brand-copy {
    display: grid;
  }

  .app-shell.sidebar-collapsed .sidebar nav {
    display: grid;
  }

  .session-identity-card,
  .app-shell.sidebar-collapsed .session-identity-card {
    justify-content: flex-start;
    margin-top: 10px;
    padding: 9px 11px;
  }

  .app-shell.sidebar-collapsed .session-identity-details {
    display: grid;
  }

  .workspace {
    height: auto;
    overflow: visible;
  }

  .sidebar nav,
  .secondary-nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .secondary-nav-section {
    display: none;
  }

  .sidebar-link,
  .secondary-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .sidebar-link {
    padding: 9px 11px;
  }

  .sidebar-head {
    align-items: center;
    padding-bottom: 8px;
  }

  .secondary-head {
    align-items: center;
    padding-bottom: 8px;
  }

  .secondary-nav {
    padding-top: 8px;
  }

  .app-shell.secondary-sidebar-collapsed .secondary-kicker,
  .app-shell.secondary-sidebar-collapsed .secondary-title,
  .app-shell.secondary-sidebar-collapsed .secondary-link-label {
    display: inline;
  }

  .app-shell.secondary-sidebar-collapsed .secondary-head {
    align-items: center;
    flex-direction: row;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .app-shell.secondary-sidebar-collapsed .secondary-nav {
    display: none;
  }

  .governance-status-grid {
    grid-template-columns: 1fr;
  }

  .product-filter-bar,
  .product-collection,
  .product-archive-summary,
  .product-knowledge-grid,
  .product-gap-grid,
  .product-rule-grid,
  .product-department-grid,
  .product-source-facts,
  .product-relation-layout,
  .product-relation-grid {
    grid-template-columns: 1fr;
  }

  .product-dimension-grid,
  .product-barcode-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-filter-search,
  .product-filter-actions {
    grid-column: auto;
  }

  .product-archive-head,
  .product-collection-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-archive-actions {
    justify-content: flex-start;
  }

  .product-knowledge-grid > section {
    border-right: 0;
  }

  .app-shell.secondary-sidebar-collapsed .secondary-link {
    width: auto;
    justify-content: flex-start;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    min-height: auto;
    padding: 14px 16px;
  }

  .topbar-tools {
    width: 100%;
    flex-wrap: wrap;
  }

  .search {
    width: 100%;
  }

  .page-container {
    padding: 16px;
  }

  .page-container,
  .page-header-panel,
  .product-library-hero,
  .product-library-hero > div,
  .product-library-section,
  .product-library-overview,
  .panel {
    min-width: 0;
    max-width: 100%;
  }

  .product-library-hero p,
  .product-library-hero h2 {
    overflow-wrap: anywhere;
  }

  .metric-grid,
  .shortcut-grid {
    grid-template-columns: 1fr;
  }

  .department-row,
  .health-row {
    grid-template-columns: 1fr;
  }

  .page-header-panel,
  .product-library-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-nameplate-grid,
  .product-rule-summary {
    grid-template-columns: 1fr;
  }
}
.today-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

.today-hero h2 {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0;
}

.today-hero p {
  margin: 0;
  color: var(--muted);
}

/* System Management: card-based AI overview. Scoped to the six approved routes. */
.system-ai-page {
  --system-green-deep: #246b35;
  --system-green: #4a9d48;
  --system-green-bright: #78c85a;
  --system-green-pale: #effbe9;
  --system-green-line: #cbeabf;
  display: grid;
  gap: 16px;
  min-width: 0;
}

.system-ai-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 28px;
  color: #f5fff1;
  background: var(--system-green);
  border: 1px solid #459342;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(63, 143, 68, .18);
}

.system-ai-eyebrow,
.system-ai-card-label {
  display: block;
  color: #7d91a6;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .11em;
}

.system-ai-hero .system-ai-eyebrow { color: #d9f4c9; }
.system-ai-hero h2 { margin: 8px 0 9px; color: #fff; font-size: 28px; line-height: 1.2; }
.system-ai-hero p { max-width: 860px; margin: 0; color: #efffe7; font-size: 14px; line-height: 1.75; }
.system-ai-hero-side { display: grid; align-content: space-between; justify-items: end; min-width: 176px; gap: 18px; color: #e2f7d4; font-size: 12px; text-align: right; }
.system-ai-hero-side .system-ai-status { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff; }

.system-ai-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.system-ai-metric,
.system-ai-card {
  background: #fff;
  border: 1px solid #dce5ec;
  border-radius: 14px;
  box-shadow: 0 5px 16px rgba(31, 54, 73, .05);
}

.system-ai-metric { display: grid; gap: 6px; min-height: 104px; padding: 17px 19px; background: #fbfff8; border-color: var(--system-green-line); border-top: 3px solid var(--system-green); }
.system-ai-metric:nth-child(2) { border-top-color: #79bd55; }
.system-ai-metric:nth-child(3) { border-top-color: #a2d66e; }
.system-ai-metric span { color: #558060; font-size: 12px; font-weight: 700; }
.system-ai-metric strong { color: var(--system-green-deep); font-size: 23px; line-height: 1.15; }
.system-ai-metric small { color: #76907a; font-size: 11px; }

.system-ai-page .panel-wide { grid-column: auto; }
.system-performance { display: grid; gap: 16px; }
.system-performance .section-title { align-items: center; }
.system-performance-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.system-performance-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.system-performance-kpis .metric-card { display: grid; gap: 6px; min-height: 112px; padding: 16px; border: 1px solid var(--border-color, #e5e7eb); border-radius: 12px; background: var(--panel-bg, #fff); }
.system-performance-kpis .metric-card strong { font-size: 1.5rem; }
.system-performance-kpis .metric-card small { color: var(--muted, #64748b); line-height: 1.5; }
.system-performance-actions { margin: 0; padding-left: 1.5rem; display: grid; gap: 8px; }
.system-performance-trend { height: 180px; display: flex; align-items: end; gap: 4px; padding: 12px 4px 28px; overflow-x: auto; border-bottom: 1px solid var(--border-color, #e5e7eb); }
.system-performance-trend-item { flex: 1 0 18px; height: 100%; display: flex; align-items: end; position: relative; }
.system-performance-trend-item span { width: 100%; min-height: 4px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #3b82f6, #1d4ed8); }
.system-performance-trend-item small { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10px; color: var(--muted, #64748b); }
.system-ai-card { padding: 20px; background: #fff; border-color: #d8ecd0; box-shadow: 0 5px 16px rgba(62, 135, 70, .055); }
.system-ai-card .section-title { align-items: flex-start; margin-bottom: 16px; }
.system-ai-card .section-title h2 { margin-top: 5px; color: var(--system-green-deep); font-size: 18px; }
.system-ai-card .section-title p { max-width: 860px; margin: 6px 0 0; color: #6b846d; font-size: 13px; line-height: 1.6; }
.system-ai-table { border: 1px solid #dcecd6; border-radius: 10px; background: #fff; }
.system-ai-table table { margin: 0; }
.system-ai-table th { color: #5a7b5c; background: var(--system-green-pale); font-size: 12px; }
.system-ai-table td { color: #38573b; font-size: 13px; }
.system-ai-table th,
.system-ai-table td { padding: 12px 13px; }
.system-ai-status { border: 1px solid #c9e5b9; background: #edf9e6; color: #36723b; font-size: 11px; }
.system-ai-disabled { align-content: center; justify-items: start; min-height: 132px; gap: 8px; padding: 20px; color: #547752; background: #f6fff1; border-color: #bee3ae; border-style: solid; }
.system-ai-disabled strong { color: #3f7a3a; }
.system-ai-disabled span { line-height: 1.65; }
.system-ai-boundary-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.system-ai-boundary-list li { padding: 12px 14px; color: #466b49; background: #f7fdf3; border-left: 3px solid var(--system-green-bright); border-radius: 8px; line-height: 1.6; }
.system-integration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.system-integration-card { min-width: 0; padding: 17px; border: 1px solid #d6eacb; border-radius: 12px; background: linear-gradient(145deg, #fff 0%, #fafff7 100%); }
.system-integration-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.system-integration-card h3 { margin: 5px 0 0; color: var(--system-green-deep); font-size: 17px; }
.system-integration-card > p { min-height: 42px; color: #607963; line-height: 1.55; }
.system-integration-facts { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 12px; color: #607963; font-size: 12px; }
.system-integration-card form,
.system-integration-create-form,
.system-ai-card form[data-security-audit-filter] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 13px; margin-top: 15px; padding-top: 15px; border-top: 1px solid #dfedd8; }
.system-integration-card label,
.system-integration-create-form label,
.system-ai-card form[data-security-audit-filter] label { display: grid; gap: 6px; color: #4d6d51; font-size: 12px; font-weight: 700; }
.system-integration-card input,
.system-integration-card select,
.system-integration-create-form input,
.system-integration-create-form select,
.system-ai-card form[data-security-audit-filter] input,
.system-ai-card form[data-security-audit-filter] select { width: 100%; min-height: 39px; border: 1px solid #cfe0ca; border-radius: 8px; background: #fff; color: #294b2e; padding: 8px 10px; }
.system-integration-switches { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 12px; border-radius: 8px; background: #f2faed; }
.system-integration-switches label { display: flex; align-items: center; gap: 7px; }
.system-integration-switches input { width: auto; min-height: auto; }
.system-ai-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 9px; }
.system-audit-pagination { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 14px; color: #547752; font-size: 13px; }
.system-audit-pagination label { display: inline-flex !important; align-items: center; gap: 7px; color: #4d6d51; font-size: 13px; font-weight: 700; }
.system-audit-pagination select { min-height: 36px; border: 1px solid #cfe0ca; border-radius: 8px; background: #fff; color: #294b2e; padding: 6px 9px; }
.system-integration-create-form h3 { grid-column: 1 / -1; margin: 0; color: var(--system-green-deep); }
.system-integration-create-form > button { align-self: end; justify-self: end; }
.system-integration-edit-form { margin-top: 12px; padding: 14px; border: 1px solid #deecd8; border-radius: 10px; background: #fbfff9; }
.system-integration-inline-check { display: flex !important; align-items: center; align-self: end; min-height: 39px; }
.system-integration-inline-check input { width: auto; min-height: auto; }

@media (max-width: 880px) {
  .system-ai-hero { flex-direction: column; padding: 22px; }
  .system-ai-hero-side { justify-items: start; min-width: 0; text-align: left; }
  .system-ai-metric-grid { grid-template-columns: 1fr; }
  .system-integration-grid,
  .system-integration-card form,
  .system-integration-create-form,
  .system-ai-card form[data-security-audit-filter] { grid-template-columns: 1fr; }
}

.module-status {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
}
.phase2-task-grid {
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 16px;
}

.task-list-panel {
  margin-top: 16px;
}

.task-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: 12px;
}

.task-lane {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  padding: 12px;
  min-width: 0;
}

.task-lane-head,
.task-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.task-lane-head span {
  color: var(--muted);
  font-weight: 700;
}

.task-card-list,
.owner-list,
.risk-list,
.activity-list {
  display: grid;
  gap: 10px;
}

.task-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  padding: 10px;
}

.task-card p,
.risk-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.owner-row,
.activity-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto auto;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 9px;
}

.risk-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  padding: 12px;
}

.risk-card small,
.activity-row time,
.activity-row em {
  color: var(--muted);
  font-style: normal;
}

@media (max-width: 1180px) {
  .phase2-task-grid,
  .task-board,
  .owner-row,
  .activity-row {
    grid-template-columns: 1fr;
  }
}
/* Phase 2 task center */
select {
  font: inherit;
}

.task-filter-panel {
  margin-bottom: 16px;
}

.task-filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(5, minmax(120px, 1fr));
  gap: 12px;
}

.task-filter-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.task-filter-grid input,
.task-filter-grid select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 10px;
  background: #fff;
  color: var(--text);
}

.task-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.task-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 16px;
  align-items: start;
}

.task-workspace-main {
  min-width: 0;
}

.task-detail-drawer {
  position: sticky;
  top: 96px;
}

.task-detail-drawer.is-focused {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.task-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.task-detail-head strong {
  font-size: 18px;
}

.task-detail-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.task-detail-meta div {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  background: #f8fafc;
}

.task-detail-meta dt {
  color: var(--muted);
  font-size: 12px;
}

.task-detail-meta dd {
  margin: 4px 0 0;
  font-weight: 700;
}

.task-detail-drawer h3 {
  margin: 14px 0 8px;
  font-size: 15px;
}

.compact-list {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
}

.status-flow-list,
.task-timeline {
  display: grid;
  gap: 10px;
}

.status-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.status-index {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--primary);
  font-weight: 800;
}

.status-flow-step p,
.timeline-item p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.timeline-item time,
.timeline-item small {
  color: var(--muted);
}

@media (max-width: 1180px) {
  .task-filter-grid,
  .task-workspace-grid {
    grid-template-columns: 1fr;
  }

  .task-detail-drawer {
    position: static;
  }
}
/* Phase 3A master data */
.master-data-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.master-data-grid .panel:nth-child(3),
.master-data-grid .panel:nth-child(4),
.master-data-grid .panel:nth-child(5) {
  grid-column: span 2;
}

.governance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.governance-grid div {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  background: #f8fafc;
}

.governance-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

@media (max-width: 1180px) {
  .master-data-grid,
  .master-data-grid .panel:nth-child(3),
  .master-data-grid .panel:nth-child(4),
  .master-data-grid .panel:nth-child(5),
  .governance-grid {
    grid-template-columns: 1fr;
    grid-column: span 1;
  }
}
/* Phase 3A optimization */
.phase3a-master-grid {
  align-items: start;
}

.phase3a-master-grid .panel-wide {
  grid-column: span 2;
}

.code-risk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.code-risk-card {
  min-height: 150px;
}

.barcode-preview-card {
  display: grid;
  gap: 14px;
}

.barcode-visual {
  display: grid;
  place-items: center;
  min-height: 104px;
  border: 1px dashed #8da2bd;
  border-radius: 6px;
  background: repeating-linear-gradient(90deg, #17212b 0 3px, transparent 3px 8px), #ffffff;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.compact-detail-list {
  display: grid;
  gap: 8px;
}

.compact-detail-list div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
}

.compact-detail-list dt {
  color: var(--muted);
}

.code-application-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.code-application-grid h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

@media (max-width: 1180px) {
  .phase3a-master-grid .panel-wide,
  .code-risk-grid,
  .code-application-grid {
    grid-column: span 1;
    grid-template-columns: 1fr;
  }
}

/* Phase 4A data assets */
.data-assets-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.data-assets-grid .panel-wide {
  grid-column: span 2;
}

.database-overview-page {
  display: grid;
  gap: 18px;
}

.database-overview-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
  border: 1px solid #d8e3de;
  border-radius: 14px;
  background: linear-gradient(135deg, #f2f8f5 0%, #fbfcfa 58%, #f3f5ee 100%);
}

.database-overview-kicker {
  display: inline-block;
  margin-bottom: 8px;
  color: #2d6a4f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}

.database-overview-title {
  display: block;
  margin: 0;
  color: #17362a;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 700;
  letter-spacing: -.03em;
}

.database-overview-intro p,
.database-overview-group-head p {
  margin: 8px 0 0;
  color: var(--muted);
}

.database-operating-map {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
}

.database-operating-map-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: 20px 22px 17px;
  border-bottom: 1px solid var(--line);
  background: #fafbf9;
}

.database-operating-map-head span {
  color: #2d6a4f;
  font-size: 12px;
  font-weight: 700;
}

.database-operating-map-head h3 {
  max-width: 700px;
  margin: 5px 0 0;
  color: #17362a;
  font-size: 20px;
}

.database-operating-map-head p {
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.database-operating-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.database-operating-stage {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 250px;
  flex-direction: column;
  padding: 20px;
  border-right: 1px solid var(--line);
}

.database-operating-stage:last-child {
  border-right: 0;
}

.database-operating-stage-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}

.database-operating-stage-title > span {
  padding: 4px 7px;
  border-radius: 5px;
  background: #e9f3ee;
  color: #2d6a4f;
  font-size: 11px;
  font-weight: 700;
}

.database-operating-stage-title h4 {
  margin: 0;
  color: #203a31;
  font-size: 17px;
}

.database-operating-stage > strong {
  color: #273c34;
  font-size: 14px;
  line-height: 1.55;
}

.database-operating-stage > p {
  margin: 8px 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.database-operating-links {
  display: grid;
  gap: 7px;
  margin-top: auto;
}

.database-operating-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  border: 1px solid #dfe7e3;
  border-radius: 6px;
  padding: 7px 9px;
  background: #fbfcfb;
  color: #315b49;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.database-operating-links a:hover {
  border-color: #a9c9b9;
  background: #f1f7f4;
}

.database-operating-links a span {
  font-size: 18px;
  line-height: 1;
}

.database-operating-explanation {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 12px 20px;
  background: #f4f7fb;
  color: #526170;
  font-size: 13px;
}

.database-operating-explanation strong {
  flex: 0 0 auto;
  color: #27496d;
}

.database-overview-refresh {
  min-width: 178px;
  padding-left: 20px;
  border-left: 1px solid #cbdad3;
}

.database-overview-refresh span,
.database-overview-refresh strong {
  display: block;
}

.database-overview-refresh span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
}

.database-overview-refresh strong {
  color: #17362a;
  font-size: 15px;
}

.database-overview-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.database-overview-summary-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 5px 16px rgba(24, 53, 42, .05);
}

.database-overview-summary-card span,
.database-overview-summary-card strong,
.database-overview-summary-card small {
  display: block;
}

.database-overview-summary-card span {
  color: var(--muted);
  font-size: 13px;
}

.database-overview-summary-card strong {
  margin: 8px 0 5px;
  color: #17362a;
  font-size: 25px;
  font-variant-numeric: tabular-nums;
}

.database-overview-summary-card small {
  color: #7b8782;
  line-height: 1.45;
}

.database-overview-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.database-overview-group {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.database-overview-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 18px 14px;
  border-bottom: 1px solid var(--line);
  background: #fafbf9;
}

.database-overview-group-head h3 {
  margin: 0;
  color: #203a31;
  font-size: 17px;
}

.database-overview-group-head p {
  font-size: 13px;
}

.database-overview-group-head > span {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #e9f3ee;
  color: #2d6a4f;
  font-size: 12px;
  font-weight: 700;
}

.database-overview-datasets {
  display: grid;
}

.database-overview-dataset {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 14px;
  align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid #edf0ee;
}

.database-overview-dataset:last-child {
  border-bottom: 0;
}

.database-overview-dataset > div {
  min-width: 0;
}

.database-overview-dataset strong {
  color: #273c34;
  font-size: 14px;
}

.database-overview-status {
  margin-left: 8px;
  color: #2d6a4f;
  font-size: 11px;
}

.database-overview-dataset b {
  color: #17362a;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.database-overview-dataset small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.data-assets-grid > .data-update-page {
  grid-column: 1 / -1;
}

.data-update-manual-upload {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background: #fbfcfd;
}

.data-update-section-label {
  display: block;
  margin: 0 0 6px;
  font-size: 18px;
}

.data-update-manual-upload .section-title p {
  margin: 0;
  color: var(--muted);
}

.data-update-page,
.data-update-package-list {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.data-update-package-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.data-update-command,
.data-update-package,
.data-update-history {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background: var(--panel);
}

.data-sync-source-packages .section-title p {
  margin: 0;
  color: var(--muted);
}

.data-sync-source-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
}

.data-sync-source-summary span,
.data-sync-source-status {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
}

.data-sync-source-summary .is-ready,
.data-sync-source-status.is-ready {
  border-color: #b9dfcb;
  background: #edf9f2;
  color: #167044;
}

.data-sync-source-summary .is-stale,
.data-sync-source-status.is-stale {
  border-color: #ead8ad;
  background: #fff8e8;
  color: #865700;
}

.data-sync-source-summary .is-empty,
.data-sync-source-status.is-empty {
  border-color: #efc6c6;
  background: #fff2f2;
  color: #9b2c2c;
}

.data-sync-source-summary small {
  margin-left: auto;
  color: var(--muted);
}

.data-sync-source-path {
  display: block;
  overflow-wrap: anywhere;
  color: #37516f;
  font-size: 13px;
  line-height: 1.55;
}

.data-sync-source-time,
.data-sync-source-note {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.data-sync-source-group {
  display: inline-block;
  margin-bottom: 8px;
  border-radius: 999px;
  padding: 3px 8px;
  background: #edf3fb;
  color: #31577f;
  font-size: 12px;
  font-weight: 700;
}

.data-sync-source-location {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  border: 1px dashed #c8d2df;
  border-radius: 6px;
  padding: 11px 12px;
  background: #fbfcfd;
}

.data-sync-source-location > span {
  color: var(--muted);
  font-size: 12px;
}

.data-sync-source-task-state {
  display: grid;
  gap: 5px;
  margin: 14px 0;
  border: 1px dashed #c8d2df;
  border-radius: 6px;
  padding: 11px 12px;
  background: #fbfcfd;
}

.data-sync-source-task-state span {
  color: var(--muted);
  font-size: 12px;
}

.data-sync-source-package .data-update-package-actions .btn {
  width: 100%;
}

.data-sync-source-module + .data-sync-source-module {
  margin-top: 22px;
}

.data-sync-module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.data-sync-module-head strong {
  font-size: 16px;
}

.data-sync-module-head span {
  color: var(--muted);
  font-size: 12px;
}

.data-sync-compact-card {
  min-height: 300px;
}

.data-sync-compact-card .data-update-package-head p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.data-sync-update-method span {
  margin-right: 6px;
  color: #37516f;
  font-weight: 700;
}

.data-sync-compact-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.data-sync-compact-summary > div {
  min-width: 0;
  border: 1px solid #e2e7ee;
  border-radius: 6px;
  padding: 10px 11px;
  background: #f8fafc;
}

.data-sync-compact-summary span,
.data-sync-compact-summary strong {
  display: block;
}

.data-sync-compact-summary span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
}

.data-sync-compact-summary strong {
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.data-update-package-actions.data-sync-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.data-sync-source-package .data-update-package-actions.data-sync-card-actions .btn,
.data-update-package-actions.data-sync-card-actions .btn {
  width: 100%;
}

.data-sync-config-drawer .data-sync-drawer-head span {
  max-width: 430px;
  line-height: 1.55;
}

.data-sync-drawer-action {
  width: 100%;
}

.data-update-package {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

.data-update-command,
.data-update-package-head,
.data-update-package-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.data-update-command h2 {
  margin: 5px 0 8px;
  font-size: 24px;
}

.data-update-command p,
.data-update-package p,
.data-update-history .section-title p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.data-update-kicker {
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

.data-update-command-side {
  display: grid;
  justify-items: end;
  gap: 14px;
}

.data-update-capabilities,
.data-update-scope {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.data-update-capabilities span,
.data-update-scope span {
  border: 1px solid #d9e5f6;
  border-radius: 6px;
  padding: 6px 9px;
  background: #f5f8fd;
  color: #37516f;
  font-size: 12px;
}

.data-update-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}

.data-update-notice > div {
  display: grid;
  gap: 4px;
}

.data-update-notice > .btn {
  flex: 0 0 auto;
}

.data-update-notice span,
.data-update-package-actions > span {
  color: var(--muted);
}

.data-update-package-title {
  display: block;
  margin: 0 0 7px;
  font-size: 18px;
}

.data-update-package-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}

.data-update-package-head .data-update-state {
  justify-self: start;
}

.data-update-state {
  flex: 0 0 auto;
  border: 1px solid #ead8ad;
  border-radius: 6px;
  padding: 5px 9px;
  background: #fff8e8;
  color: #865700;
  font-size: 12px;
  font-weight: 700;
}

.data-update-state.is-ready {
  border-color: #b9dfcb;
  background: #edf9f2;
  color: #167044;
}

.data-update-scope {
  justify-content: flex-start;
  margin-top: 14px;
}

.data-update-settings {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

.data-update-settings > div {
  border: 1px solid #e2e7ee;
  border-radius: 6px;
  padding: 11px 12px;
  background: #f8fafc;
}

.data-update-settings span,
.data-update-settings strong {
  display: block;
}

.data-update-settings span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
}

.data-update-file {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  border: 1px dashed #c8d2df;
  border-radius: 6px;
  padding: 12px;
  background: #fbfcfd;
}

.data-update-file input {
  display: none;
}

.data-update-file strong {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  background: #f1f3f6;
  color: #7b8794;
  text-align: center;
}

.data-update-file small {
  color: var(--muted);
}

.data-update-package-actions {
  align-items: center;
  align-self: end;
  width: 100%;
  flex-direction: column;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.data-sync-policy-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.data-sync-policy-form label,
.data-sync-single-date,
.data-sync-range label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.data-sync-policy-form label:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid #e2e7ee;
  border-radius: 6px;
  padding: 8px 10px;
  background: #f8fafc;
}

.data-sync-source-policy-form .data-sync-policy-source {
  grid-column: 1 / -1;
  display: grid;
  align-items: initial;
  gap: 6px;
}

.data-sync-source-policy-form select {
  min-width: 0;
  min-height: 40px;
  border: 1px solid #cfd8e3;
  border-radius: 6px;
  padding: 7px 9px;
  background: #f8fafc;
  color: var(--text);
}

.data-sync-source-policy-form .data-sync-policy-auto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  border: 1px solid #cfd8e3;
  border-radius: 6px;
  padding: 7px 10px;
  background: #fff;
}

.data-sync-source-policy-form .data-sync-policy-auto input {
  width: 16px;
  height: 16px;
}

.data-sync-policy-form input[type="time"],
.data-sync-single-date input,
.data-sync-range input {
  min-height: 40px;
  border: 1px solid #cfd8e3;
  border-radius: 6px;
  padding: 7px 9px;
  background: #fff;
  color: var(--text);
}

.data-sync-policy-form .btn {
  grid-column: 1 / -1;
  width: 100%;
  white-space: nowrap;
}

.data-sync-single-date {
  margin: 0 0 14px;
}

.data-sync-range {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background: var(--panel);
}

.data-sync-range p,
.database-section-bar p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.data-sync-range form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.data-sync-range .btn,
.data-sync-detail-button {
  white-space: nowrap;
}

.data-sync-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  background: rgba(26, 39, 51, .28);
}

.data-sync-drawer {
  width: min(660px, 92vw);
  height: 100%;
  overflow-y: auto;
  border-left: 1px solid var(--line);
  padding: 22px;
  background: #fff;
  box-shadow: -18px 0 48px rgba(35, 54, 72, .14);
}

.data-sync-drawer-head,
.database-section-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.data-sync-drawer-head > div,
.data-sync-drawer-head strong,
.data-sync-drawer-head span {
  display: block;
}

.data-sync-drawer-head strong,
.database-section-bar > div > strong {
  color: var(--text);
  font-size: 18px;
}

.data-sync-drawer-head span {
  margin-top: 5px;
  color: var(--muted);
}

.data-sync-detail-grid,
.database-quality-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.data-sync-detail-grid > div,
.database-quality-summary > div {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  background: #f8fafc;
}

.data-sync-detail-grid span,
.data-sync-detail-grid strong,
.database-quality-summary span,
.database-quality-summary strong {
  display: block;
}

.data-sync-detail-grid span,
.database-quality-summary span {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}

.data-sync-detail-section {
  margin-top: 18px;
}

.data-sync-detail-section > p {
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.data-sync-event-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.data-sync-event-list article {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
}

.data-sync-event-list span,
.data-sync-event-list small {
  color: var(--muted);
  font-size: 12px;
}

.database-flat-panel {
  display: grid;
  gap: 16px;
}

.database-field-catalog {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.analysis-dimension-workbench {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.analysis-dimension-intro,
.analysis-block-label,
.analysis-grain-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.analysis-dimension-intro > div:first-child > strong {
  display: block;
  color: var(--text);
  font-size: 18px;
}

.analysis-dimension-intro p,
.analysis-grain-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.analysis-source-coverage {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
}

.analysis-source-coverage span {
  display: grid;
  gap: 3px;
  padding: 9px 12px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.analysis-source-coverage span:last-child {
  border-right: 0;
}

.analysis-source-coverage b {
  color: var(--text);
  font-size: 16px;
}

.analysis-builder {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.analysis-level-block,
.analysis-metric-block {
  padding: 14px;
}

.analysis-metric-block {
  border-top: 1px solid var(--line);
}

.analysis-block-label {
  align-items: baseline;
  margin-bottom: 10px;
}

.analysis-block-label strong {
  font-size: 13px;
}

.analysis-block-label span,
.analysis-grain-head > span {
  color: var(--muted);
  font-size: 12px;
}

.analysis-hierarchy {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.analysis-hierarchy-step {
  position: relative;
  display: grid;
  gap: 3px;
  min-height: 58px;
  border: 0;
  border-right: 1px solid var(--line);
  padding: 10px 28px 10px 12px;
  color: var(--muted);
  text-align: left;
  background: #f8fafc;
  cursor: pointer;
}

.analysis-hierarchy-step:last-child {
  border-right: 0;
}

.analysis-hierarchy-step span {
  color: var(--text);
  font-weight: 800;
}

.analysis-hierarchy-step small {
  font-size: 11px;
}

.analysis-hierarchy-step i {
  position: absolute;
  top: 50%;
  right: 10px;
  color: #8b99aa;
  font-size: 19px;
  font-style: normal;
  transform: translateY(-50%);
}

.analysis-hierarchy-step:hover,
.analysis-hierarchy-step.is-active {
  color: var(--primary);
  background: var(--primary-soft);
}

.analysis-hierarchy-step.is-active span {
  color: var(--primary);
}

.analysis-level-block > p {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.analysis-level-block > p strong {
  color: var(--text);
}

.analysis-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.analysis-metric-option {
  display: grid;
  gap: 7px;
  min-height: 70px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  color: var(--muted);
  text-align: left;
  background: #fff;
  cursor: pointer;
}

.analysis-metric-option > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.analysis-metric-option strong {
  color: var(--text);
  font-size: 13px;
}

.analysis-metric-option small {
  font-size: 10px;
  white-space: nowrap;
}

.analysis-metric-option em {
  overflow: hidden;
  font-size: 11px;
  font-style: normal;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-metric-option:hover:not(:disabled),
.analysis-metric-option.is-active {
  border-color: #8fb4e8;
  background: var(--primary-soft);
}

.analysis-metric-option.is-active strong,
.analysis-metric-option.is-active small {
  color: var(--primary);
}

.analysis-metric-option.is-mapping small {
  color: #9a5a08;
}

.analysis-metric-option:disabled {
  cursor: not-allowed;
  opacity: .46;
}

.analysis-hierarchy-step:focus-visible,
.analysis-metric-option:focus-visible {
  outline: 3px solid rgba(40, 112, 220, .18);
  outline-offset: -3px;
}

.analysis-combination-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  border-left: 3px solid var(--primary);
  padding: 11px 13px;
  background: var(--primary-soft);
}

.analysis-combination-summary > div {
  display: grid;
  gap: 3px;
  min-width: 220px;
  margin-right: auto;
}

.analysis-combination-summary span {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.analysis-combination-summary strong {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-grain-results {
  min-width: 0;
}

.analysis-grain-head {
  align-items: baseline;
  margin-bottom: 9px;
}

.analysis-grain-table {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.analysis-grain-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(210px, 1.25fr) minmax(240px, 1.45fr) minmax(260px, 1.6fr) minmax(220px, 1.35fr);
  gap: 12px;
  align-items: start;
  min-width: 1120px;
  padding: 11px 12px;
  border-top: 1px solid var(--line);
}

.analysis-grain-row:first-child {
  border-top: 0;
}

.analysis-grain-row > div {
  display: grid;
  gap: 5px;
}

.analysis-grain-row > span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.analysis-grain-row-head {
  color: var(--muted);
  background: #f8fafc;
  font-size: 11px;
}

.analysis-grain-status {
  width: fit-content;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
}

.analysis-grain-status.is-ready {
  color: #146c4a;
  background: #e9f8f0;
}

.analysis-grain-status.is-mapping {
  color: #8b5b0a;
  background: #fff5df;
}

.analysis-grain-status.is-missing {
  color: #8a4750;
  background: #fff0f2;
}

.database-field-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(150px, .32fr) minmax(150px, .32fr) auto;
  gap: 10px;
  align-items: end;
}

.database-field-toolbar label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.database-field-toolbar input,
.database-field-toolbar select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  background: #fff;
}

.database-field-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
}

.database-field-summary > div {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border-right: 1px solid var(--line);
}

.database-field-summary > div:last-child {
  border-right: 0;
}

.database-field-summary span {
  color: var(--muted);
  font-size: 12px;
}

.database-field-summary strong {
  font-size: 22px;
}

.database-field-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.database-field-groups {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  background: #f8fafc;
}

.database-field-groups > strong {
  padding: 5px 7px 9px;
  font-size: 13px;
}

.data-field-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 5px;
  padding: 9px 8px;
  color: var(--muted);
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.data-field-group:hover,
.data-field-group.is-active {
  color: var(--primary);
  background: var(--primary-soft);
}

.data-field-group strong {
  font-size: 12px;
}

.database-field-results {
  min-width: 0;
}

.database-field-results-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.database-field-results-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.database-field-results-head > span {
  color: var(--muted);
  font-size: 12px;
}

.data-field-detail-button {
  min-height: 30px;
  padding: 5px 9px;
  white-space: nowrap;
}

.data-field-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  background: rgba(26, 39, 51, .28);
}

.data-field-drawer {
  width: min(620px, 92vw);
  height: 100%;
  overflow-y: auto;
  border-left: 1px solid var(--line);
  padding: 22px;
  background: #fff;
  box-shadow: -18px 0 48px rgba(35, 54, 72, .14);
}

.data-field-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.data-field-drawer-head strong,
.data-field-drawer-head span {
  display: block;
}

.data-field-drawer-head strong {
  font-size: 20px;
}

.data-field-drawer-head span {
  margin-top: 5px;
  color: var(--muted);
}

.data-field-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0;
}

.data-field-detail-grid > div {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  background: #f8fafc;
}

.data-field-detail-grid span,
.data-field-detail-grid strong {
  display: block;
}

.data-field-detail-grid span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
}

.data-field-detail-block {
  border-top: 1px solid var(--line);
  padding: 15px 0;
}

.data-field-detail-block p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.data-field-detail-actions {
  margin-top: 8px;
}

.database-field-usage {
  margin-top: 22px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.database-section-bar {
  align-items: center;
}

.database-quality-summary {
  max-width: 780px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.database-quality-page {
  display: grid;
  gap: 22px;
}

.database-quality-view-switch {
  display: flex;
  gap: 8px;
  padding-bottom: 2px;
}

.database-quality-view-switch .btn {
  min-width: 96px;
}

.database-quality-source-profiles {
  display: grid;
  gap: 16px;
}

.database-quality-source-summary {
  max-width: none;
}

.database-quality-source-note,
.database-quality-observed-at,
.database-quality-history-head > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.database-quality-source-group {
  display: grid;
  gap: 8px;
}

.database-quality-source-group-head,
.database-quality-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.database-quality-source-group-head strong {
  color: var(--text);
  font-size: 15px;
}

.database-quality-source-group-head span {
  color: var(--muted);
  font-size: 12px;
}

.database-quality-source-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.database-quality-source-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(190px, 1.15fr) minmax(106px, .65fr) minmax(150px, 1fr) minmax(112px, .7fr) auto;
  align-items: center;
  gap: 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
  background: #fff;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.database-quality-source-row:last-child {
  border-bottom: 0;
}

.database-quality-source-row:hover,
.database-quality-source-row:focus-visible {
  background: #f6f9ff;
  outline: none;
}

.database-quality-source-row:active {
  transform: translateY(1px);
}

.database-quality-source-row > span:not(.database-quality-source-name):not(.database-quality-source-status) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.database-quality-source-row small {
  color: var(--muted);
  font-size: 12px;
}

.database-quality-source-row > span > strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-quality-source-name {
  display: grid;
  gap: 4px;
}

.database-quality-source-name > strong {
  color: var(--text);
  font-size: 14px;
}

.database-quality-source-status {
  justify-self: end;
}

.database-quality-history-head {
  padding-top: 4px;
}

.data-update-package-actions .btn {
  width: 100%;
  white-space: nowrap;
}

.data-update-package-actions > span {
  font-size: 12px;
}

.data-update-page .btn:disabled {
  cursor: not-allowed;
  opacity: .58;
  transform: none;
}

.data-layer-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.data-layer-node {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  background: #f8fafc;
}

.data-layer-node strong {
  display: block;
  margin-bottom: 6px;
}

.data-layer-node p {
  min-height: 42px;
  margin: 0 0 10px;
  color: var(--muted);
}

.data-layer-node small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}

.lineage-list {
  display: grid;
  gap: 10px;
}

.lineage-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 120px minmax(120px, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  background: #f8fafc;
}

.lineage-row span {
  text-align: center;
  color: var(--primary);
  font-weight: 700;
}

.lineage-row small {
  grid-column: 1 / -1;
  color: var(--muted);
}

@media (max-width: 1180px) {
  .data-assets-grid,
  .data-assets-grid .panel-wide,
  .data-layer-map,
  .lineage-row {
    grid-column: span 1;
    grid-template-columns: 1fr;
  }

  .lineage-row span {
    text-align: left;
  }

  .database-overview-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .database-operating-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .database-operating-stage:nth-child(2) {
    border-right: 0;
  }

  .database-operating-stage:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .data-update-settings,
  .data-update-file,
  .data-sync-policy-form,
  .data-sync-range,
  .data-sync-range form {
    grid-template-columns: 1fr;
  }

  .data-sync-policy-form .btn {
    grid-column: auto;
  }

  .database-field-toolbar {
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(140px, .45fr));
  }

  .database-field-toolbar .btn {
    grid-column: 1 / -1;
  }

  .database-field-layout {
    grid-template-columns: 1fr;
  }

  .database-field-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .database-field-groups > strong {
    grid-column: 1 / -1;
  }

  .analysis-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .analysis-combination-summary {
    flex-wrap: wrap;
  }

  .analysis-combination-summary > div {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .database-overview-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .database-overview-refresh {
    width: 100%;
    padding: 12px 0 0;
    border-top: 1px solid #cbdad3;
    border-left: 0;
  }

  .database-overview-summary,
  .database-overview-groups,
  .database-operating-flow,
  .data-update-package-list {
    grid-template-columns: 1fr;
  }

  .database-operating-map-head,
  .database-operating-explanation {
    align-items: flex-start;
    flex-direction: column;
  }

  .database-operating-stage,
  .database-operating-stage:nth-child(2) {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .database-operating-stage:last-child {
    border-bottom: 0;
  }

  .data-update-command,
  .data-update-package-head,
  .data-update-package-actions,
  .data-update-notice {
    align-items: stretch;
    flex-direction: column;
  }

  .database-section-bar,
  .data-sync-drawer-head {
    align-items: stretch;
    flex-direction: column;
  }

  .data-sync-detail-grid,
  .database-quality-summary,
  .data-sync-event-list article {
    grid-template-columns: 1fr;
  }

  .database-quality-source-group-head,
  .database-quality-history-head {
    align-items: stretch;
    flex-direction: column;
  }

  .database-quality-source-row {
    grid-template-columns: 1fr auto;
  }

  .database-quality-source-row > span:nth-child(2),
  .database-quality-source-row > span:nth-child(3),
  .database-quality-source-row > span:nth-child(4) {
    display: none;
  }

  .data-update-command-side {
    justify-items: stretch;
  }

  .data-update-capabilities {
    justify-content: flex-start;
  }

  .database-field-toolbar,
  .database-field-summary,
  .database-field-groups,
  .data-field-detail-grid {
    grid-template-columns: 1fr;
  }

  .database-field-summary > div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .database-field-summary > div:last-child {
    border-bottom: 0;
  }

  .database-field-results-head,
  .data-field-drawer-head {
    align-items: stretch;
    flex-direction: column;
  }

  .analysis-dimension-intro,
  .analysis-grain-head {
    align-items: stretch;
    flex-direction: column;
  }

  .analysis-source-coverage,
  .analysis-hierarchy,
  .analysis-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analysis-source-coverage span:nth-child(2),
  .analysis-hierarchy-step:nth-child(2) {
    border-right: 0;
  }

  .analysis-source-coverage span:last-child {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
  }

  .analysis-hierarchy-step:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .analysis-level-block > p {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .analysis-combination-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .analysis-combination-summary > div {
    min-width: 0;
  }
}
.data-asset-safety-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.mock-operation-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  background: #f8fafc;
}

.mock-operation-panel p {
  margin: 6px 0 0;
  color: var(--muted);
}

.mock-operation-panel .muted-text {
  grid-column: 1 / -1;
  margin: 0;
}

.knowledge-type-guide {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: #fff;
}

.knowledge-type-guide summary {
  color: var(--primary);
  cursor: pointer;
  font-weight: 600;
}

.knowledge-type-guide > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.knowledge-type-guide section {
  border-left: 3px solid var(--line);
  padding-left: 10px;
}

.knowledge-type-guide section > strong {
  display: block;
  margin-bottom: 6px;
}

.knowledge-type-guide section p {
  margin: 4px 0;
  font-size: 13px;
}

.knowledge-metadata-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
}

.knowledge-metadata-grid legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.knowledge-governance-panel {
  display: grid;
  gap: 14px;
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #f8fafc;
}

@media (max-width: 1180px) {
  .data-asset-safety-grid,
  .mock-operation-panel {
    grid-template-columns: 1fr;
  }

  .knowledge-type-guide > div {
    grid-template-columns: 1fr;
  }

  .knowledge-metadata-grid {
    grid-template-columns: 1fr;
  }
}
/* Phase 5A product war room */
.product-war-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.product-war-grid .panel-wide {
  grid-column: span 2;
}

.product-profile-list {
  display: grid;
  gap: 8px;
}

.product-profile-list div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.product-profile-list dt {
  color: var(--muted);
}

.product-profile-list dd {
  margin: 0;
  font-weight: 700;
}

.funnel-list {
  display: grid;
  gap: 10px;
}

.funnel-step {
  display: grid;
  grid-template-columns: 76px minmax(70px, 1fr) 70px;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  background: #f8fafc;
}

.funnel-step em,
.funnel-step small {
  color: var(--muted);
  font-style: normal;
}

.funnel-step small {
  grid-column: 1 / -1;
}

.product-governance-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1180px) {
  .product-war-grid,
  .product-war-grid .panel-wide,
  .product-governance-grid,
  .funnel-step {
    grid-column: span 1;
    grid-template-columns: 1fr;
  }
}
.product-link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 860px) {
  .product-link-grid {
    grid-template-columns: 1fr;
  }
}
.product-identity-section {
  border-top: 4px solid #2563eb;
}

.product-identity-card {
  display: grid;
  gap: 16px;
}

.product-identity-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.product-identity-main h2 {
  margin: 8px 0 6px;
  font-size: 24px;
}

.product-identity-main p {
  margin: 0;
  color: var(--muted);
}

.product-priority-panel {
  border-left: 4px solid #2563eb;
}

.product-priority-panel + .product-priority-panel {
  border-left-color: #dc2626;
}

.product-ai-list small,
.product-timeline-list small {
  color: var(--muted);
}

.product-timeline-list {
  margin-top: 14px;
}

@media (max-width: 860px) {
  .product-identity-main {
    flex-direction: column;
  }
}
/* Phase 5B product closed loop */
.closed-loop-stack {
  display: grid;
  gap: 14px;
}

.closed-loop-stack h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.closed-loop-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.closed-loop-summary div,
.loop-hint {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
}

.closed-loop-summary div {
  padding: 12px;
}

.closed-loop-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.closed-loop-summary strong {
  font-size: 22px;
}

.loop-hint {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  color: #1f3f68;
  font-weight: 700;
}

@media (max-width: 860px) {
  .closed-loop-summary {
    grid-template-columns: 1fr;
  }
}







.metrics-rules-workspace {
  align-items: start;
}

.metrics-rules-grid {
  grid-template-columns: minmax(320px, 0.8fr) minmax(520px, 1.2fr);
}

.rule-test-form {
  display: grid;
  gap: 12px;
}

.rule-test-form label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 13px;
}

.rule-test-result {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #f8fafc;
}

.usage-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.usage-map-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #ffffff;
}

.usage-map-card small,
.usage-map-card em {
  color: #64748b;
  font-style: normal;
}

.compact-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: #475569;
}

@media (max-width: 920px) {
  .metrics-rules-grid {
    grid-template-columns: 1fr;
  }
}
/* Phase 6A dashboard */
.phase6a-dashboard-grid {
  grid-template-columns: 1.2fr 1fr 1fr;
}

.phase6a-dashboard-grid .panel-wide {
  grid-column: span 2;
}

.dashboard-kpi-grid {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.dashboard-card-footer,
.radar-row,
.dashboard-health-list .health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-card-footer {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.dashboard-alert-list,
.dashboard-radar-list,
.dashboard-health-list,
.dashboard-ai-list {
  display: grid;
  gap: 12px;
}

.dashboard-alert-card .row-actions {
  margin-top: 12px;
}

.dashboard-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.dashboard-mini-grid div,
.radar-row {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  padding: 12px;
}

.dashboard-mini-grid span,
.dashboard-mini-grid small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.dashboard-mini-grid strong {
  font-size: 22px;
}

.dashboard-drilldown-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}

/* Operating overview: a categorized result hub rather than a task cockpit. */
.operating-hero-kicker,
.operating-section-heading > div > span {
  display: block;
  color: #dcefd8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}

.operating-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 15px;
}

.operating-section-heading > div > span {
  color: var(--primary);
}

.operating-section-heading h2 {
  margin: 5px 0 5px;
  color: var(--text);
  font-size: 19px;
}

.operating-section-heading p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.operating-section-heading em {
  flex: 0 0 auto;
  padding: 6px 10px;
  color: #3f7d44;
  background: #edf7eb;
  border: 1px solid #cbe3c7;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.operating-dimension-catalog {
  padding: 19px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 5px 18px rgba(33, 62, 46, .04);
}

.operating-dimension-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.operating-dimension-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 15px;
  border: 1px solid #dfe9dc;
  border-top: 4px solid #6ba45e;
  border-radius: 11px;
  background: linear-gradient(145deg, #fff, #f8fbf7);
}

.operating-dimension-card.profit { border-top-color: #8a789e; }
.operating-dimension-card.customer { border-top-color: #c38c50; }
.operating-dimension-card.supply { border-top-color: #548e86; }
.operating-dimension-card.execution { border-top-color: #47856a; }
.operating-dimension-card.data { border-top-color: #6483ad; }

.operating-dimension-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #5a7160;
  font-size: 12px;
  font-weight: 700;
}

.operating-dimension-meta .shortcut { min-height: 29px; padding: 4px 8px; font-size: 12px; }
.operating-dimension-card h3 { margin: 0; color: var(--text); font-size: 16px; }
.operating-dimension-card > p { margin: -4px 0 0; color: var(--muted); font-size: 12px; }

.operating-dimension-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.operating-dimension-metrics > div { min-width: 0; padding: 9px; background: #fff; border: 1px solid #e7eee5; border-radius: 8px; }
.operating-dimension-metrics span, .operating-dimension-metrics small { display: block; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.operating-dimension-metrics strong { display: block; margin: 4px 0 2px; color: var(--text); font-size: 20px; }
.operating-dimension-card footer { color: #58705d; font-size: 12px; line-height: 1.55; }

.operating-analysis-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr); gap: 16px; }
.operating-analysis-panel, .operating-role-panel { border-top: 3px solid #5d9d52; }
.operating-role-panel { border-top-color: #47856a; }

.operating-conclusion-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 15px; }
.operating-conclusion-strip > div { display: grid; gap: 4px; padding: 12px; background: #f5f9f4; border: 1px solid #dce9d9; border-radius: 9px; }
.operating-conclusion-strip span, .operating-conclusion-strip small { color: var(--muted); font-size: 11px; }
.operating-conclusion-strip strong { color: var(--text); font-size: 24px; }
.operating-result-table { margin-bottom: 12px; }
.operating-result-table td small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.operating-role-list { display: grid; gap: 8px; }
.operating-role-list > div { display: grid; grid-template-columns: 76px 1fr; gap: 3px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.operating-role-list > div:last-child { border-bottom: 0; }
.operating-role-list span { color: #437548; font-size: 12px; font-weight: 700; }
.operating-role-list strong { color: var(--text); font-size: 13px; }
.operating-role-list small { grid-column: 2; color: var(--muted); font-size: 11px; }

@media (max-width: 1180px) {
  .phase6a-dashboard-grid,
  .phase6a-dashboard-grid .panel-wide,
  .dashboard-kpi-grid {
    grid-column: span 1;
    grid-template-columns: 1fr;
  }

  .operating-dimension-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operating-analysis-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .operating-section-heading { align-items: stretch; flex-direction: column; }
  .operating-section-heading em { width: fit-content; }
  .operating-dimension-grid, .operating-conclusion-strip { grid-template-columns: 1fr; }
}

/* Knowledge-owned SOP orchestration. Task center receives only execution instances. */
.sop-orchestration-hero { display: flex; align-items: stretch; justify-content: space-between; gap: 20px; padding: 22px 24px; color: #fff; background: linear-gradient(115deg, #2f6e4a, #5d9d52); border-radius: 14px; box-shadow: 0 6px 22px rgba(48, 105, 70, .14); }
.sop-orchestration-hero > div:first-child { min-width: 0; }
.sop-orchestration-hero > div > span { display: block; color: #dff0dc; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.sop-orchestration-hero h2 { margin: 6px 0 8px; color: #fff; font-size: 22px; }
.sop-orchestration-hero p { max-width: 820px; margin: 0; color: #ecf8e9; font-size: 13px; line-height: 1.65; }
.sop-orchestration-state { display: grid; align-content: center; flex: 0 0 205px; gap: 5px; padding-left: 20px; border-left: 1px solid rgba(255,255,255,.28); }
.sop-orchestration-state strong { font-size: 14px; }.sop-orchestration-state small { color: #e4f3e1; font-size: 11px; line-height: 1.5; }
.sop-flow-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 13px 16px; color: #46694d; background: #f4f9f3; border: 1px solid #d6e8d3; border-radius: 11px; font-size: 12px; font-weight: 700; }.sop-flow-strip b { color: var(--primary); font-size: 16px; }
.sop-orchestration-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr); gap: 16px; }.sop-match-list, .sop-draft-list { display: grid; gap: 9px; }
.sop-match-list article { display: grid; grid-template-columns: minmax(150px, 1fr) auto 46px; gap: 6px 12px; align-items: start; padding: 11px; border: 1px solid #dce8da; border-radius: 9px; background: #fbfdfb; }.sop-match-list strong, .sop-draft-list strong { color: var(--text); font-size: 13px; }.sop-match-list small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }.sop-match-list article > span { padding: 4px 7px; color: #3d7046; background: #edf7eb; border-radius: 5px; font-family: ui-monospace, monospace; font-size: 10px; }.sop-match-list article > b { color: #2c7740; font-size: 14px; text-align: right; }.sop-match-list article > p { grid-column: 1 / -1; margin: 0; color: #5e7062; font-size: 12px; line-height: 1.5; }
.sop-draft-list article { display: grid; gap: 7px; padding: 12px; border-left: 3px solid #be8b3c; background: #fffaf0; border-radius: 7px; }.sop-draft-list article > div { display: flex; justify-content: space-between; gap: 8px; }.sop-draft-list article span { color: #8f5c12; font-size: 11px; font-weight: 700; }.sop-draft-list p { margin: 0; color: var(--text); font-size: 12px; line-height: 1.55; }.sop-draft-list small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.sop-template-panel { border-top: 3px solid var(--primary); }.sop-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.sop-template-grid > article { display: grid; gap: 8px; padding: 14px; border: 1px solid #dce8da; border-radius: 10px; background: #fff; }.sop-template-grid > article > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.sop-template-grid > article > div > span { color: #56805d; font-size: 12px; font-weight: 700; }.sop-template-grid h3 { margin: 0; color: var(--text); font-size: 15px; }.sop-template-grid p { min-height: 34px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }.sop-template-grid dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0; }.sop-template-grid dl div { padding: 8px; background: #f5f9f4; border-radius: 7px; }.sop-template-grid dt { color: var(--muted); font-size: 10px; }.sop-template-grid dd { margin: 4px 0 0; color: var(--text); font-size: 15px; font-weight: 800; }.sop-template-grid > article > small { color: #537058; font-size: 11px; line-height: 1.5; }

@media (max-width: 980px) { .sop-orchestration-grid, .sop-template-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .sop-orchestration-hero { flex-direction: column; }.sop-orchestration-state { flex-basis: auto; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.28); border-left: 0; }.sop-match-list article { grid-template-columns: 1fr auto; }.sop-match-list article > span { grid-column: 1; width: fit-content; }.sop-match-list article > b { grid-column: 2; grid-row: 1; }.sop-match-list article > p { grid-column: 1 / -1; } }

/* SOP OS: execution case and control-room surfaces */
.sop-page-nav { display:flex; gap:8px; padding:8px 0 18px; border-bottom:1px solid #e4e9e3; margin-bottom:20px; }.sop-page-nav a { padding:8px 12px; border-radius:7px; color:#5b6b62; font-size:13px; font-weight:700; }.sop-page-nav a.active { color:#fff; background:#12663d; }
.sop-case-page,.sop-control-page { max-width:1440px; margin:0 auto; }.sop-case-header,.sop-control-header { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; padding:25px 0 19px; }.sop-case-header span,.sop-control-header span { color:#5f7667; font-weight:800; font-size:11px; letter-spacing:.08em; }.sop-case-header h2,.sop-control-header h2 { margin:5px 0 8px; font-size:28px; letter-spacing:-.04em; }.sop-case-header p,.sop-control-header p { margin:0; color:#66756d; font-size:13px; }
.sop-case-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,.72fr); gap:20px; }.sop-case-layout main { border:1px solid #e0e6e0; background:#fff; }.sop-brief,.sop-steps,.sop-next-action { padding:22px 24px; border-bottom:1px solid #e8ece7; }.sop-brief h3,.sop-collab-rail h3,.sop-learning-grid h3 { margin:0 0 10px; font-size:15px; }.sop-brief>p { margin:0 0 16px; color:#64726b; font-size:13px; line-height:1.7; }.sop-ai-advice { padding:15px 16px; background:#edf6ef; border-left:3px solid #207448; }.sop-ai-advice strong { color:#17663a; }.sop-ai-advice p { margin:6px 0; font-weight:700; }.sop-ai-advice small { color:#5f7667; }.sop-steps .section-title { margin-bottom:10px; }.sop-steps .section-title h3 { margin:0; }.sop-step { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:12px; min-height:58px; border-top:1px solid #edf0ec; }.sop-step>span { display:grid; place-items:center; width:23px; height:23px; border:1px solid #cbd6cd; color:#7a887f; border-radius:50%; font-size:11px; font-weight:800; }.sop-step.done>span { color:#fff; background:#26794a; border-color:#26794a; }.sop-step.current { margin:0 -10px; padding:0 10px; background:#f3f7ff; }.sop-step.current>span { color:#fff; background:#2869d8; border-color:#2869d8; }.sop-step strong,.sop-step small { display:block; }.sop-step strong { font-size:13px; }.sop-step small,.sop-step em { color:#738178; font-size:11px; font-style:normal; }.sop-step em { padding:4px 7px; background:#f4f5f3; }.sop-next-action { display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:0; background:#fbfcfa; }.sop-next-action p { margin:5px 0 0; color:#68756e; font-size:12px; }.sop-collab-rail { padding:19px; border:1px solid #e0e6e0; background:#fff; }.sop-collab-rail article { display:grid; gap:5px; padding:13px 0; border-bottom:1px solid #edf0ec; }.sop-collab-rail article span { width:max-content; padding:3px 6px; color:#266744; background:#edf6ef; font-size:10px; font-weight:800; }.sop-collab-rail article strong { font-size:13px; }.sop-collab-rail article small { color:#819087; }.sop-version-compact { margin-top:18px; padding:14px; background:#f7f8f5; }.sop-version-compact p { margin:6px 0; color:#64726b; font-size:12px; }.sop-version-compact a { color:#17663a; font-size:12px; font-weight:800; }
.sop-control-header { padding:24px; color:#fff; background:#15221d; }.sop-control-header span { color:#9bd2ac; }.sop-control-header h2 { color:#fff; }.sop-control-header p { max-width:740px; color:#d5e2d9; }.sop-decision-ribbon { display:flex; align-items:center; gap:14px; padding:17px 20px; background:#fff; border:1px solid #dfe6df; }.sop-decision-ribbon span { color:#68756d; font-size:12px; }.sop-decision-ribbon b { color:#aab6ac; }.sop-decision-ribbon strong { padding:8px 12px; color:#17663a; background:#eaf5eb; font-size:12px; }.sop-lane-board { display:grid; grid-template-columns:145px 1fr; border:1px solid #dfe6df; border-top:0; background:#fff; }.sop-lane-label { display:grid; align-content:center; gap:4px; padding:18px; color:#1e3026; background:#f0f6f0; border-top:1px solid #dfe6df; font-weight:800; }.sop-lane-label span { color:#76847b; font-size:11px; font-weight:500; }.sop-lane-items { display:flex; gap:14px; padding:14px 18px; border-top:1px solid #dfe6df; }.sop-lane-items article { flex:0 1 280px; display:grid; gap:8px; padding:13px; border:1px solid #d9e3da; font-size:13px; font-weight:700; }.sop-lane-items article.current { border:2px solid #d45135; }.sop-lane-items small { color:#708077; font-size:11px; font-weight:500; }.sop-learning-grid { display:grid; grid-template-columns:.8fr 1fr 1.3fr; gap:16px; margin-top:20px; }.sop-learning-grid>article { padding:18px; border:1px solid #dfe6df; background:#fff; }.sop-learning-grid dl { margin:0; }.sop-learning-grid dl div { display:flex; justify-content:space-between; padding:9px 0; border-top:1px solid #edf0ec; }.sop-learning-grid dt { color:#66756d; font-size:12px; }.sop-learning-grid dd { margin:0; color:#197044; font-weight:800; }.sop-learning-grid ul { padding-left:18px; margin:0; color:#536259; font-size:12px; line-height:2; }.sop-learning-draft { padding:10px 0; border-top:1px solid #edf0ec; }.sop-learning-draft p { margin:5px 0; color:#526057; font-size:12px; }.sop-learning-draft small { color:#9b6b22; font-weight:800; }
@media (max-width:980px) { .sop-case-layout,.sop-learning-grid { grid-template-columns:1fr; }.sop-case-header,.sop-control-header { align-items:flex-start; flex-direction:column; }.sop-lane-board { grid-template-columns:1fr; }.sop-lane-items { flex-wrap:wrap; }.sop-lane-items article { flex:1 1 220px; } }

/* SOP reference layouts: three approved command-center screens. */
.sop-reference-page,.sop-execution-reference,.sop-control-reference{max-width:1680px;margin:-20px auto 0;color:#1d2520;background:#fbfaf7;font-family:"Microsoft YaHei","PingFang SC",sans-serif}.sop-reference-heading,.sop-execution-top,.sop-control-reference>header{display:flex;align-items:center;justify-content:space-between;min-height:70px;padding:0 28px;background:#fff;border-bottom:1px solid #ddd8d1}.sop-reference-heading strong{font-size:25px}.sop-reference-heading span{margin-left:22px;color:#677069;font-size:14px}.sop-reference-tools{display:flex;align-items:center;gap:22px;color:#555;font-size:13px}.sop-reference-tools a{color:#12653d}.sop-reference-body{display:grid;grid-template-columns:minmax(900px,1fr) 300px;min-height:900px}.sop-reference-body>main{padding:28px 28px 36px}.sop-reference-title{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:34px}.sop-reference-title>div{display:flex;align-items:center;gap:14px}.sop-reference-title b{font-size:18px}.sop-reference-title h2{margin:0;font-size:20px}.sop-reference-title em{padding:5px 9px;background:#e3f4e7;color:#167344;font-style:normal;font-size:12px;font-weight:800}.sop-reference-title small{color:#68716b;font-size:12px}.sop-reference-stages{display:grid;grid-template-columns:repeat(8,minmax(116px,1fr));gap:14px;position:relative}.sop-stage{display:grid;align-content:start;gap:8px;min-height:438px;padding:17px 13px 13px;border:1px solid #d9e4dc;border-radius:12px;background:linear-gradient(180deg,#fbfffb 0%,#f6f4ef 100%);box-shadow:0 8px 20px rgba(50,70,58,.05)}.sop-stage-number{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#075c37;color:#fff;font-size:10px;font-weight:800}.sop-stage>span{font-size:12px;color:#4e5f53;font-weight:800}.sop-stage h3{min-height:42px;margin:2px 0 5px;font-size:14px;line-height:1.45}.sop-stage>strong{color:#0c6d3c;font-size:16px}.sop-stage small{min-height:34px;color:#66736a;font-size:11px;line-height:1.55}.sop-stage button{align-self:end;margin-top:auto;border:0;border-radius:6px;padding:8px;background:#e7eee8;color:#1e603c;font:700 11px inherit;cursor:pointer}.sop-stage.danger{border-color:#f0c6c0;background:#fff9f7}.sop-stage.danger .sop-stage-number{background:#de3c32}.sop-stage.ai .sop-stage-number,.sop-stage.tool .sop-stage-number{background:#0f7947}.sop-stage.human .sop-stage-number,.sop-stage.review .sop-stage-number{background:#785622}.sop-reference-confirm{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:42px 80px 32px;padding:20px 28px;border:1px solid #bdd8c6;border-radius:9px;background:#fff}.sop-reference-confirm strong,.sop-reference-confirm small{display:block}.sop-reference-confirm small{margin-top:6px;color:#68736c;font-size:12px}.sop-reference-confirm .btn{min-width:260px}.sop-reference-history{padding:19px 22px;background:#fff;border:1px solid #dedbd4;border-radius:9px}.sop-reference-history>div{display:flex;justify-content:space-between;align-items:center}.sop-reference-history h3{margin:0;font-size:15px}.sop-reference-history a{color:#11633c;font-size:12px;font-weight:800}.sop-reference-history table{width:100%;margin-top:14px;border-collapse:collapse;font-size:12px;text-align:left}.sop-reference-history th,.sop-reference-history td{padding:11px 7px;border-top:1px solid #eee9e3;color:#606963}.sop-reference-evidence{padding:26px 20px;background:#fff;border-left:1px solid #e6e1db}.sop-evidence-head{display:flex;justify-content:space-between}.sop-evidence-head h3{margin:0;font-size:16px}.sop-reference-evidence nav{display:flex;gap:32px;margin:21px 0 18px;padding-bottom:11px;border-bottom:1px solid #e8e3dc;font-size:12px}.sop-reference-evidence nav b{color:#111;border-bottom:2px solid #111;padding-bottom:10px}.sop-reference-evidence nav span{color:#727a75}.sop-reference-evidence article{display:flex;gap:11px;padding:13px 8px;margin-bottom:9px;border:1px solid #eee9e2;border-radius:8px}.sop-reference-evidence article i{width:27px;height:27px;border-radius:7px;background:#e8f2e9}.sop-reference-evidence article strong,.sop-reference-evidence article small{display:block}.sop-reference-evidence article strong{font-size:12px}.sop-reference-evidence article small{margin-top:4px;color:#798179;font-size:10px}.sop-reference-evidence h4{margin:28px 0 13px}.sop-reference-evidence ol{margin:0;padding-left:18px;color:#647067;font-size:12px;line-height:2.3}
.sop-execution-reference{padding-bottom:28px;background:#f8fafc}.sop-execution-top{min-height:112px;padding:16px 27px}.sop-execution-top span{color:#667587;font-size:12px}.sop-execution-top h2{margin:9px 0;font-size:23px}.sop-execution-top small{color:#7b8793;font-size:12px}.sop-execution-reference-grid{display:grid;grid-template-columns:minmax(620px,1.08fr) minmax(480px,.92fr);gap:12px;margin:18px 26px}.sop-execution-reference-grid>main,.sop-execution-timeline{border:1px solid #e0e5ea;border-radius:8px;background:#fff}.sop-execution-brief,.sop-execution-steps,.sop-execution-next{padding:19px 25px;border-bottom:1px solid #e7ebef}.sop-execution-brief h3,.sop-execution-steps h3{margin:0 0 10px;font-size:15px}.sop-execution-brief p{margin:7px 0;color:#596673;font-size:12px;line-height:1.7}.sop-execution-brief a{color:#1269d7}.sop-execution-brief>div{margin-top:15px;padding:13px 15px;background:#edf7ef;border-radius:6px}.sop-execution-brief>div strong{color:#287a47}.sop-execution-steps .section-title{display:flex;justify-content:space-between}.sop-execution-steps .section-title span{color:#2368ce;font-size:12px}.sop-execution-steps article{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:start;padding:11px 0;color:#707a83}.sop-execution-steps article i{width:21px;height:21px;display:grid;place-items:center;border:1px solid #b8c2cb;border-radius:50%;font-style:normal;font-size:11px}.sop-execution-steps article.done i{border-color:#2e8b52;background:#2e8b52;color:white}.sop-execution-steps article.current{margin:0 -8px;padding:12px 8px;background:#f4f8ff;color:#203041}.sop-execution-steps article.current i{background:#2468d3;border-color:#2468d3;color:#fff}.sop-execution-steps article strong,.sop-execution-steps article small{display:block}.sop-execution-steps article strong{font-size:13px}.sop-execution-steps article small{margin-top:4px;font-size:11px}.sop-execution-steps article p{grid-column:2/-1;margin:5px 0 0;padding:8px 10px;border:1px solid #b9d0ff;color:#486384;font-size:11px}.sop-execution-steps article em{font-style:normal;font-size:11px}.sop-execution-steps article button{border:0;border-radius:4px;padding:6px 11px;background:#1465dc;color:#fff;font-size:11px}.sop-execution-next{display:flex;justify-content:space-between;align-items:center;border:0;background:#fcfdff}.sop-execution-next strong,.sop-execution-next p{display:block}.sop-execution-next p{margin:5px 0 0;color:#63707d;font-size:12px}.sop-execution-timeline{padding:18px 20px}.sop-timeline-tabs{display:flex;gap:24px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #e5e9ed;font-size:13px}.sop-timeline-tabs b{color:#16804b}.sop-timeline-tabs span{color:#728090}.sop-execution-timeline article{display:grid;grid-template-columns:45px 1fr;gap:10px;padding:12px 0;border-left:1px solid #d5dce4}.sop-execution-timeline time{margin-left:-31px;color:#647386;font-size:11px}.sop-execution-timeline article div{padding-left:12px;border-left:4px solid #dce9ff}.sop-execution-timeline article strong{font-size:12px}.sop-execution-timeline article em{margin-left:6px;padding:2px 5px;background:#edf7ef;color:#28854d;font-size:10px;font-style:normal}.sop-execution-timeline article p{margin:5px 0 0;color:#7a8691;font-size:11px}.sop-version-compare{display:flex;align-items:center;gap:15px;margin:0 26px;padding:14px 18px;border:1px solid #e0e5ea;border-radius:8px;background:#fff;font-size:12px}.sop-version-compare>div{padding:9px;border:1px solid #dce2e8;border-radius:5px}.sop-version-compare b,.sop-version-compare span{display:block}.sop-version-compare span{margin-top:4px;color:#74818e;font-size:10px}.sop-version-compare a{margin-left:auto;color:#1b69d2;font-weight:800}
.sop-control-reference{padding-bottom:28px;background:#fbfcfa}.sop-control-reference>header{background:#fff}.sop-control-reference>header h2{margin:0;font-size:22px}.sop-control-reference>header p{display:inline-block;margin:5px 0 0;color:#657168;font-size:12px}.sop-control-reference>header p b{margin-left:10px;color:#298750}.sop-control-reference>h3{margin:16px 26px 10px;padding-left:9px;border-left:3px solid #16854d;font-size:16px}.sop-control-progress{display:grid;grid-template-columns:1fr 28px 1fr 28px 1.25fr 28px 1fr 220px;align-items:stretch;margin:0 26px;border:1px solid #d8dfda;border-radius:8px;background:#fff}.sop-control-progress>div{padding:15px 22px;font-weight:800;font-size:13px}.sop-control-progress small{display:block;margin-top:6px;color:#69756d;font-size:11px;font-weight:500}.sop-control-progress>b{display:grid;place-items:center;color:#849087;font-size:27px;font-weight:300}.sop-control-progress .active{border-top:4px solid #137642;background:#f1f8f1;color:#12623a}.sop-control-progress aside{padding:13px 21px;border-left:1px solid #d8dfda;color:#637067;font-size:12px}.sop-control-progress aside strong{display:block;margin-top:6px;color:#0d7042;font-size:21px}.sop-control-main{display:grid;grid-template-columns:minmax(700px,1fr) 330px;gap:20px;margin:22px 26px}.sop-control-caption{display:flex;justify-content:space-between;align-items:center}.sop-control-caption h3{margin:0;font-size:16px}.sop-control-caption h3 small,.sop-control-caption span{color:#718076;font-size:11px;font-weight:500}.sop-control-lanes{margin-top:10px;border:1px solid #d9e2dc;border-radius:8px;overflow:hidden;background:#fff}.sop-control-lane{display:grid;grid-template-columns:145px 1fr;border-bottom:1px solid #d9e2dc}.sop-control-lane:last-child{border-bottom:0}.sop-control-lane>header{display:grid;align-content:center;gap:7px;padding:18px;background:#edf7ef}.sop-control-lane>header strong{font-size:15px}.sop-control-lane>header small{color:#637268;font-size:11px}.sop-control-lane>div{display:flex;align-items:center;gap:24px;padding:16px}.sop-control-lane article{position:relative;min-width:170px;min-height:75px;padding:14px;border:1px solid #dce4df;border-radius:6px;background:#fff}.sop-control-lane article.waiting{border:2px solid #e8502e}.sop-control-lane article strong,.sop-control-lane article small{display:block}.sop-control-lane article strong{font-size:12px}.sop-control-lane article small{margin-top:8px;color:#738078;font-size:10px}.sop-control-lane article em{position:absolute;right:8px;bottom:8px;padding:3px 5px;border-radius:4px;background:#e8f4e9;color:#197a47;font-style:normal;font-size:10px}.sop-control-audit{padding:16px 18px;border:1px solid #dce4df;border-radius:8px;background:#fff}.sop-control-audit h3{margin:0;font-size:16px}.sop-control-audit>p{color:#2a7d4c;font-size:11px}.sop-control-audit article{padding:12px 0;border-top:1px solid #e8eeea}.sop-control-audit article strong,.sop-control-audit article small{display:block}.sop-control-audit article strong{font-size:12px}.sop-control-audit article small{margin-top:5px;color:#388258;font-size:10px}.sop-control-audit h4{margin:22px 0 8px}.sop-control-audit ol{margin:0;padding-left:18px;color:#66746b;font-size:11px;line-height:2.1}.sop-control-learning{display:grid;grid-template-columns:1fr 1.1fr 1.2fr 220px;gap:16px;margin:0 26px}.sop-control-learning>article,.sop-control-learning>a{padding:17px;border:1px solid #dce4df;border-radius:8px;background:#fff}.sop-control-learning h3{margin:0 0 13px;font-size:14px}.sop-control-learning dl{margin:0}.sop-control-learning dl div{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid #ebefeb;font-size:11px}.sop-control-learning dd{margin:0;color:#17804a;font-weight:800}.sop-control-learning ul{margin:0;padding-left:18px;color:#58665d;font-size:11px;line-height:2}.sop-control-learning p{color:#56645b;font-size:12px;line-height:1.6}.sop-control-learning article small{color:#18804b;font-size:11px}.sop-control-learning>a{display:grid;place-items:center;background:#08713e;color:#fff;font-weight:800;text-align:center}
@media(max-width:1200px){.sop-reference-body,.sop-control-main{grid-template-columns:1fr}.sop-reference-evidence{border-top:1px solid #e6e1db;border-left:0}.sop-reference-stages{grid-template-columns:repeat(4,1fr)}.sop-stage{min-height:240px}.sop-control-progress{grid-template-columns:1fr 20px 1fr 20px 1.2fr 20px 1fr}.sop-control-progress aside{display:none}.sop-control-learning{grid-template-columns:1fr 1fr}.sop-control-learning>a{min-height:100px}}@media(max-width:760px){.sop-reference-heading,.sop-execution-top,.sop-control-reference>header,.sop-reference-title,.sop-reference-confirm,.sop-execution-next{align-items:flex-start;flex-direction:column}.sop-reference-body>main,.sop-execution-reference-grid{padding:0;margin:12px}.sop-reference-stages{grid-template-columns:1fr 1fr}.sop-reference-confirm{margin:20px 0}.sop-execution-reference-grid{grid-template-columns:1fr}.sop-version-compare,.sop-control-main,.sop-control-learning,.sop-control-reference>h3,.sop-control-progress{margin-left:12px;margin-right:12px}.sop-control-progress{display:block}.sop-control-progress>b{display:none}.sop-control-progress>div{border-bottom:1px solid #d8dfda}.sop-control-lane{grid-template-columns:1fr}.sop-control-lane>div{flex-wrap:wrap}.sop-control-learning{grid-template-columns:1fr}.sop-reference-tools{display:none}}
.sop-hermes-iteration{margin:22px 26px 0;padding:22px;border:1px solid #cddfd3;border-radius:10px;background:linear-gradient(135deg,#f4fbf6,#fff)}
.sop-hermes-iteration>.section-title{align-items:flex-start}
.sop-hermes-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.sop-hermes-grid>.panel{margin:0;box-shadow:none}
.sop-iteration-change-list{display:grid;gap:8px}
.sop-iteration-change-list>div{padding:10px 12px;border-left:3px solid #1d7d4b;background:#f5f8f5}
.sop-iteration-change-list strong,.sop-iteration-change-list small{display:block}
.sop-iteration-change-list p{margin:5px 0;color:#425248;font-size:12px}
.sop-iteration-change-list small{color:#708077;font-size:10px}
.sop-hermes-iteration .button-row{flex-wrap:wrap;margin-top:12px}
@media(max-width:1200px){.sop-hermes-grid{grid-template-columns:1fr}}
@media(max-width:760px){.sop-hermes-iteration{margin:18px 12px 0;padding:16px}.sop-hermes-iteration>.section-title{align-items:flex-start;flex-direction:column}}
@media (max-width:680px) { .sop-case-header h2,.sop-control-header h2 { font-size:23px; }.sop-decision-ribbon { overflow:auto; white-space:nowrap; }.sop-next-action { align-items:flex-start; flex-direction:column; } }

/* SOP image-to-code parity layer. The OS navigation stays intact; this canvas owns the full right content width. */
.page-container:has(> .sop-right-canvas) {
  padding: 0;
  background: #fbfaf7;
}

.workspace:has(.sop-right-canvas) > .topbar {
  display: none;
}

.page-container:has(> .sop-right-canvas) > .page-header-panel {
  display: none;
}

.sop-right-canvas {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: #1e2923;
  background: #fbfaf7;
}

.sop-right-canvas *,
.sop-right-canvas *::before,
.sop-right-canvas *::after {
  box-sizing: border-box;
}

.sop-right-canvas a { text-decoration: none; }
.sop-right-canvas button,
.sop-right-canvas select { font: inherit; }

.sop-reference-page,
.sop-execution-reference,
.sop-control-reference {
  width: 100%;
  max-width: none;
  margin: 0;
  color: #1d2822;
  background: #fbfaf7;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

/* SOP center */
.sop-reference-heading {
  min-height: 72px;
  padding: 0 28px;
  border-bottom: 1px solid #e2ded7;
  background: #fff;
}

.sop-reference-heading strong { color: #121a16; font-size: 23px; letter-spacing: -.5px; }
.sop-reference-heading span { margin-left: 18px; color: #6d756f; font-size: 13px; }
.sop-reference-tools { gap: 20px; }
.sop-reference-tools a { color: #0b6b3c; font-weight: 700; }

.sop-reference-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  width: 100%;
  min-height: 860px;
}

.sop-reference-body > main { min-width: 0; padding: 32px 18px 28px; }
.sop-reference-title { margin-bottom: 36px; }
.sop-reference-title > div { gap: 12px; }
.sop-reference-title b { color: #111a15; font-size: 16px; }
.sop-reference-title h2 { color: #111a15; font-size: 18px; }
.sop-reference-title em { border-radius: 5px; background: #e6f5ea; color: #177244; }
.sop-reference-title small { color: #69736d; }
.sop-reference-title small button { margin-left: 10px; padding: 6px 9px; border: 1px solid #d7ddd8; border-radius: 5px; background: #fff; color: #3f4943; }

.sop-reference-stages {
  display: grid;
  grid-template-columns: repeat(8, minmax(108px, 1fr));
  gap: 9px;
  width: 100%;
  overflow-x: auto;
  padding: 1px 1px 9px;
  scrollbar-width: thin;
}

.sop-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 108px;
  min-height: 440px;
  padding: 0 12px 14px;
  border: 1px solid #d9e5dd;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0 28%, #f8f6f1 28% 100%);
  box-shadow: none;
}

.sop-stage:not(:last-child)::after {
  position: absolute;
  z-index: 2;
  top: 92px;
  right: -12px;
  color: #08713f;
  background: #fbfaf7;
  content: "\ea6c";
  font-family: remixicon;
  font-size: 15px;
  line-height: 1;
}

.sop-stage-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  margin: 0 -2px;
  color: #26372d;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.sop-stage-kicker span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  background: #08703e;
  font-size: 9px;
}

.sop-stage-icon {
  display: grid;
  place-items: center;
  height: 78px;
  margin: 0 -12px;
  background: #fff;
}

.sop-stage-icon i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  color: #08703e;
  background: linear-gradient(145deg, #e4f3e9, #f5faf6);
  font-size: 28px;
}

.sop-stage.danger { border-color: #efc2b8; background: linear-gradient(180deg, #fff 0 28%, #fff8f5 28% 100%); }
.sop-stage.danger .sop-stage-kicker span { background: #e33b32; }
.sop-stage.danger .sop-stage-icon i { color: #d92725; background: #fae4df; }
.sop-stage.people .sop-stage-icon i,
.sop-stage.human .sop-stage-icon i,
.sop-stage.review .sop-stage-icon i { color: #7d5720; background: #f5ede1; }

.sop-stage h3 { min-height: 40px; margin: 5px 0 0; color: #29352e; font-size: 13px; line-height: 1.45; }
.sop-stage > strong { color: #08703e; font-size: 15px; line-height: 1.45; }
.sop-stage.danger > strong { color: #dd201c; font-size: 19px; }
.sop-stage-facts { display: grid; gap: 5px; color: #344239; font-size: 11px; line-height: 1.4; }
.sop-stage-facts span:not(.value) { margin-top: 5px; color: #738078; }
.sop-stage-facts .value { color: #354139; }
.sop-stage button { margin-top: auto; padding: 8px 5px; border: 0; border-radius: 5px; color: #156b40; background: #e6eee8; font-size: 11px; font-weight: 800; cursor: pointer; }
.sop-stage.ai button { color: #fff; background: #08713f; }
.sop-stage.human button,
.sop-stage.people button,
.sop-stage.review button { color: #704e20; background: #efe5d5; }
.sop-stage.tool button { color: #175c9f; background: #e3eefc; }
.sop-stage.version button { color: #6d675f; background: #e7e4df; }

.sop-reference-confirm {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) minmax(250px, 40%);
  gap: 16px;
  align-items: center;
  margin: 34px 9% 16px;
  padding: 18px 22px;
  border: 1px solid #b6d6c1;
  border-radius: 9px;
  background: #fff;
}
.sop-reference-confirm > i { color: #127744; font-size: 27px; }
.sop-reference-confirm .btn { min-width: 0; justify-content: center; border-color: #08713f; background: #08713f; }
.sop-reference-confirm small { margin-top: 5px; color: #6d7771; font-size: 11px; }
.sop-human-lock { margin: 0 9% 26px; color: #87765d; font-size: 11px; text-align: center; }
.sop-reference-history { padding: 16px 18px; border-color: #dedbd5; border-radius: 8px; }
.sop-reference-history table { table-layout: fixed; }
.sop-reference-history th,
.sop-reference-history td { padding: 9px 6px; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sop-reference-history td a { color: #147445; font-weight: 700; }

.sop-reference-evidence { min-width: 0; padding: 24px 16px; border-left: 1px solid #e6e2dc; background: #fff; }
.sop-reference-evidence select { width: 100%; margin: 0 0 12px; padding: 8px 10px; border: 1px solid #dedbd5; border-radius: 6px; color: #4b554f; background: #fff; font-size: 11px; }
.sop-reference-evidence article { align-items: center; padding: 11px 9px; margin-bottom: 8px; }
.sop-reference-evidence article > i { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 7px; color: #147744; background: #e9f4eb; font-size: 16px; }
.sop-reference-evidence .sop-decision-item { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 9px; padding: 10px 0; border: 0; border-top: 1px solid #ece9e4; border-radius: 0; }
.sop-decision-item > i { margin-top: 2px; }
.sop-decision-item strong { display: flex; justify-content: space-between; gap: 6px; }
.sop-decision-item strong em { color: #21784b; font-size: 9px; font-style: normal; }
.sop-decision-item p { margin: 5px 0 0; color: #6f7972; font-size: 9px; line-height: 1.5; }

/* SOP execution */
.sop-execution-reference { min-height: 900px; padding-bottom: 22px; background: #f8fafc; }
.sop-execution-top { min-height: 112px; padding: 18px 26px; border-bottom-color: #dde3e9; }
.sop-execution-top h2 { margin: 9px 0 8px; font-size: 22px; }
.sop-execution-reference-grid { display: grid; grid-template-columns: minmax(520px, 1.05fr) minmax(390px, .95fr); gap: 10px; margin: 16px 18px 12px; }
.sop-execution-reference-grid > main,
.sop-execution-timeline { min-width: 0; }
.sop-execution-brief,
.sop-execution-steps,
.sop-execution-next { padding: 18px 20px; }
.sop-execution-brief > div { background: linear-gradient(90deg, #edf7ef, #f5f8f3); }
.sop-execution-steps article { padding: 9px 0; }
.sop-execution-steps article.current { border-radius: 4px; }
.sop-execution-timeline { padding: 17px 17px; }
.sop-execution-timeline article { grid-template-columns: 42px 1fr; }
.sop-version-compare { margin: 0 18px; padding: 12px 16px; overflow-x: auto; white-space: nowrap; }

/* SOP control room */
.sop-control-reference { min-height: 900px; padding-bottom: 22px; background: #fbfcfa; }
.sop-control-reference > header { min-height: 70px; padding: 0 24px; }
.sop-control-reference > h3 { margin: 14px 20px 9px; }
.sop-control-progress { grid-template-columns: 1fr 24px 1fr 24px 1.18fr 24px 1fr 190px; margin: 0 20px; }
.sop-control-progress > div { min-width: 0; padding: 14px 15px; }
.sop-control-progress aside { padding: 12px 16px; }
.sop-control-progress aside strong { font-size: 18px; }
.sop-control-main { grid-template-columns: minmax(600px, 1fr) 286px; gap: 16px; margin: 18px 20px; }
.sop-control-lane { grid-template-columns: 125px 1fr; }
.sop-control-lane > header { padding: 15px; }
.sop-control-lane > div { gap: 14px; padding: 13px; }
.sop-control-lane article { min-width: 150px; min-height: 70px; padding: 12px; }
.sop-control-audit { padding: 14px 15px; }
.sop-control-learning { grid-template-columns: .9fr 1.15fr 1.15fr 185px; gap: 12px; margin: 0 20px; }
.sop-control-learning > article,
.sop-control-learning > a { padding: 14px; }

@container workspace-shell (max-width: 1280px) {
  .sop-reference-body { grid-template-columns: minmax(0, 1fr) 235px; }
  .sop-reference-body > main { padding-left: 12px; padding-right: 12px; }
  .sop-reference-stages { grid-template-columns: repeat(8, minmax(96px, 1fr)); }
  .sop-stage { min-width: 96px; padding-left: 9px; padding-right: 9px; }
  .sop-stage-kicker { height: 48px; white-space: normal; font-size: 10px; line-height: 1.2; }
  .sop-stage-icon { margin-left: -9px; margin-right: -9px; }
  .sop-reference-confirm { margin-left: 2%; margin-right: 2%; }
  .sop-human-lock { margin-left: 2%; margin-right: 2%; }
  .sop-execution-reference-grid { grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); }
  .sop-control-main { grid-template-columns: minmax(0, 1fr) 240px; }
  .sop-control-learning { grid-template-columns: 1fr 1fr; }
  .sop-control-learning > a { min-height: 90px; }
}

@container workspace-shell (max-width: 1050px) {
  .sop-reference-body { grid-template-columns: 1fr; }
  .sop-reference-evidence { display: none; }
}

@container workspace-shell (max-width: 820px) {
  .sop-execution-reference-grid,
  .sop-control-main { grid-template-columns: 1fr; }
  .sop-control-progress { grid-template-columns: 1fr 20px 1fr 20px 1.2fr 20px 1fr; }
  .sop-control-progress aside { display: none; }
}

@container workspace-shell (max-width: 720px) {
  .sop-reference-heading,
  .sop-execution-top,
  .sop-control-reference > header,
  .sop-reference-title,
  .sop-execution-next { align-items: flex-start; flex-direction: column; }
  .sop-reference-heading,
  .sop-execution-top,
  .sop-control-reference > header { padding: 14px 16px; }
  .sop-reference-tools { display: none; }
  .sop-reference-stages { grid-template-columns: repeat(8, 122px); }
  .sop-reference-confirm { grid-template-columns: 32px 1fr; }
  .sop-reference-confirm .btn { grid-column: 1 / -1; width: 100%; }
  .sop-execution-reference-grid { display: block; margin: 12px; }
  .sop-execution-timeline { margin-top: 12px; }
  .sop-version-compare { margin: 0 12px; }
  .sop-control-progress { display: block; margin: 0 12px; }
  .sop-control-progress > b { display: none; }
  .sop-control-progress > div { border-bottom: 1px solid #d8dfda; }
  .sop-control-main { margin: 14px 12px; }
  .sop-control-lane { grid-template-columns: 1fr; }
  .sop-control-lane > div { overflow-x: auto; }
  .sop-control-learning { grid-template-columns: 1fr; margin: 0 12px; }
}

.sop-execution-panel { border-top: 3px solid #47856a; }.sop-execution-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.sop-execution-grid > article { display: grid; gap: 8px; padding: 14px; border: 1px solid #d8e7d6; border-radius: 10px; background: linear-gradient(150deg,#fff,#f5faf4); }.sop-execution-title { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }.sop-execution-title strong { color: var(--text); font-size: 14px; }.sop-execution-title span { flex: 0 0 auto; padding: 4px 6px; color: #287140; background: #e8f6e8; border-radius: 5px; font-size: 10px; font-weight: 800; }.sop-execution-grid p { margin: 0; color: var(--muted); font-size: 12px; }.sop-execution-grid dl { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; }.sop-execution-grid dl > div { padding: 8px; background: #fff; border: 1px solid #e5eee3; border-radius: 7px; }.sop-execution-grid dt { color: #718174; font-size: 10px; }.sop-execution-grid dd { margin: 4px 0 0; color: #405547; font-size: 11px; line-height: 1.45; }.sop-execution-grid footer { display: grid; gap: 3px; color: #56725d; font-size: 11px; }.sop-loop-foot { margin-top: 13px; padding: 11px 13px; color: #4f6755; background: #f4f9f3; border-left: 3px solid #5d9d52; border-radius: 0 7px 7px 0; font-size: 12px; line-height: 1.6; }
@media (max-width: 980px) { .sop-execution-grid { grid-template-columns: 1fr; } }

/* Reference-density layout: match the approved 1492px desktop compositions while
   retaining the compact container rules above for ordinary 1366px OS workspaces. */
@container workspace-shell (min-width: 1051px) {
  .sop-execution-reference,
  .sop-control-reference { min-height: 1028px; }

  .sop-execution-top { min-height: 132px; padding: 22px 28px; }
  .sop-execution-top h2 { margin: 12px 0 10px; font-size: 25px; }
  .sop-execution-top span,
  .sop-execution-top small { font-size: 13px; }
  .sop-execution-reference-grid { grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr); gap: 12px; margin: 20px 20px 14px; }
  .sop-execution-brief,
  .sop-execution-steps,
  .sop-execution-next { padding: 22px 24px; }
  .sop-execution-brief h3,
  .sop-execution-steps h3 { font-size: 17px; }
  .sop-execution-brief p { font-size: 13px; line-height: 1.85; }
  .sop-execution-brief > div { margin-top: 17px; padding: 17px 18px; }
  .sop-execution-brief > div strong { font-size: 16px; }
  .sop-execution-steps article { grid-template-columns: 30px minmax(0,1fr) auto; min-height: 52px; padding: 11px 0; }
  .sop-execution-steps article strong { font-size: 14px; }
  .sop-execution-steps article small,
  .sop-execution-steps article em { font-size: 12px; }
  .sop-execution-timeline { padding: 21px 22px; }
  .sop-timeline-tabs { margin-bottom: 16px; padding-bottom: 15px; font-size: 14px; }
  .sop-execution-timeline article { min-height: 74px; padding: 15px 0; }
  .sop-execution-timeline article strong { font-size: 13px; }
  .sop-execution-timeline article p { font-size: 12px; line-height: 1.65; }
  .sop-version-compare { min-height: 72px; margin: 0 20px; padding: 15px 18px; font-size: 13px; }

  .sop-control-reference > header { min-height: 82px; padding: 0 24px; }
  .sop-control-reference > header h2 { font-size: 24px; }
  .sop-control-reference > header p,
  .sop-control-reference > header span { font-size: 13px; }
  .sop-control-reference > h3 { margin: 16px 20px 12px; font-size: 17px; }
  .sop-control-progress { grid-template-columns: 1fr 30px 1fr 30px 1.18fr 30px 1fr 220px; min-height: 102px; }
  .sop-control-progress > div { display: grid; align-content: center; padding: 18px 20px; font-size: 14px; }
  .sop-control-progress small { margin-top: 8px; font-size: 12px; line-height: 1.5; }
  .sop-control-progress aside { display: grid; align-content: center; padding: 16px 20px; font-size: 13px; }
  .sop-control-progress aside strong { margin-top: 8px; font-size: 21px; }
  .sop-control-main { grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; margin: 22px 20px; }
  .sop-control-caption { min-height: 31px; }
  .sop-control-caption h3 { font-size: 17px; }
  .sop-control-lanes { margin-top: 11px; }
  .sop-control-lane { grid-template-columns: 145px 1fr; min-height: 116px; }
  .sop-control-lane > header { padding: 19px; }
  .sop-control-lane > header strong { font-size: 16px; }
  .sop-control-lane > header small { font-size: 12px; }
  .sop-control-lane > div { gap: 20px; padding: 18px; }
  .sop-control-lane article { min-width: 190px; min-height: 84px; padding: 15px; }
  .sop-control-lane article strong { font-size: 13px; }
  .sop-control-lane article small { font-size: 11px; }
  .sop-control-audit { padding: 18px 20px; }
  .sop-control-audit h3 { font-size: 17px; }
  .sop-control-audit article { padding: 15px 0; }
  .sop-control-audit article strong { font-size: 13px; }
  .sop-control-audit article small,
  .sop-control-audit ol { font-size: 12px; }
  .sop-control-learning { grid-template-columns: 1fr 1.15fr 1.15fr 220px; gap: 14px; min-height: 214px; margin: 0 20px; }
  .sop-control-learning > article,
  .sop-control-learning > a { padding: 18px; }
  .sop-control-learning h3 { font-size: 15px; }
  .sop-control-learning dl div,
  .sop-control-learning ul { font-size: 12px; }
  .sop-control-learning p { font-size: 13px; }
}

.performance-card {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: 16px;
  align-items: stretch;
}

.performance-score {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  background: #f8fafc;
}

.performance-score strong {
  display: block;
  font-size: 28px;
  line-height: 1.2;
  color: var(--text);
}

.performance-score span,
.performance-kpis span {
  color: var(--muted);
  font-size: 13px;
}

.performance-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 10px;
}

.performance-kpis span {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.performance-kpis strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 18px;
}

.ledger-list {
  display: grid;
  gap: 8px;
}

.ledger-row {
  display: grid;
  grid-template-columns: minmax(96px, 140px) 64px 1fr minmax(90px, 130px);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.ledger-row span {
  font-weight: 700;
  color: var(--brand);
}

.ledger-row em,
.ledger-row small {
  color: var(--muted);
  font-style: normal;
}

.task-point-impact {
  border-top: 1px solid var(--border);
  margin-top: 14px;
  padding-top: 12px;
}

@media (max-width: 760px) {
  .performance-card,
  .ledger-row {
    grid-template-columns: 1fr;
  }
}

/* Operational pricing center */
.pricing-center-page {
  display: grid;
  gap: 20px;
  color: #263042;
}

.pricing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 24px;
  padding: 30px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(125deg, #5f48a8 0%, #8062c6 55%, #a57bd7 100%);
  box-shadow: 0 18px 42px rgba(90, 64, 151, .22);
}

.pricing-hero h2 {
  margin: 8px 0 10px;
  font-size: clamp(28px, 3vw, 40px);
  color: #fff;
}

.pricing-hero p {
  max-width: 720px;
  margin: 0;
  line-height: 1.75;
  color: rgba(255, 255, 255, .84);
}

.pricing-eyebrow {
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .72);
}

.pricing-safety-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 18px;
  background: rgba(255, 255, 255, .13);
  backdrop-filter: blur(10px);
}

.pricing-safety-card > span:first-child,
.pricing-safety-card small {
  color: rgba(255, 255, 255, .76);
}

.pricing-safety-card strong {
  font-size: 32px;
}

.pricing-status {
  display: inline-flex;
  width: max-content;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #eef0f4;
  color: #626b79;
}

.pricing-status-green,
.pricing-status-complete,
.pricing-status-approved {
  color: #237b56;
  background: #e4f5ed;
}

.pricing-status-yellow,
.pricing-status-pending {
  color: #9a681c;
  background: #fff2ce;
}

.pricing-status-red,
.pricing-status-untrusted,
.pricing-status-rejected {
  color: #b23b4b;
  background: #fee7eb;
}

.pricing-status-strategic_loss {
  color: #7740a3;
  background: #f0e4fa;
}

.pricing-module-tabs {
  display: flex;
  gap: 6px;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid #e4e0ed;
  border-radius: 14px;
  background: #fff;
}

.pricing-module-tabs a {
  flex: 0 0 auto;
  padding: 9px 13px;
  border-radius: 10px;
  color: #687184;
  font-size: 13px;
  text-decoration: none;
}

.pricing-module-tabs a:hover,
.pricing-module-tabs a.active {
  color: #6548a7;
  background: #f0ebf8;
}

.pricing-calculator {
  display: grid;
  gap: 18px;
}

.pricing-stepper {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  padding: 14px 16px;
  overflow-x: auto;
  border: 1px solid #e7e4ed;
  border-radius: 14px;
  background: #fff;
}

.pricing-stepper span {
  display: flex;
  min-width: 112px;
  align-items: center;
  gap: 7px;
  color: #89909c;
  font-size: 12px;
}

.pricing-stepper b {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #f0eef4;
}

.pricing-stepper .active {
  color: #6548a7;
  font-weight: 700;
}

.pricing-stepper .active b {
  color: #fff;
  background: #7657b4;
}

.pricing-form-card,
.pricing-result-section,
.pricing-actions-card,
.pricing-pending {
  padding: 24px;
  border: 1px solid #e7e4ed;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(31, 36, 47, .045);
}

.pricing-form-card .section-title,
.pricing-result-section .section-title {
  margin-bottom: 18px;
}

.pricing-form-card h2,
.pricing-result-section h2,
.pricing-actions-card h2 {
  margin: 4px 0 0;
  color: #2d3341;
  font-size: 19px;
}

.pricing-live,
.pricing-version {
  padding: 6px 10px;
  border-radius: 8px;
  color: #7657b4;
  font-size: 12px;
  background: #f2edf9;
}

.pricing-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.pricing-form-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pricing-form-grid label {
  display: grid;
  gap: 7px;
  color: #666f7f;
  font-size: 12px;
}

.pricing-form-grid input,
.pricing-form-grid select {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #dcd8e5;
  border-radius: 9px;
  outline: none;
  color: #2f3746;
  background: #fff;
}

.pricing-form-grid input:focus,
.pricing-form-grid select:focus {
  border-color: #967bc2;
  box-shadow: 0 0 0 3px rgba(118, 87, 180, .1);
}

.pricing-input-unit {
  position: relative;
}

.pricing-input-unit input {
  padding-right: 48px;
}

.pricing-input-unit em {
  position: absolute;
  top: 50%;
  right: 11px;
  color: #9298a3;
  font-size: 11px;
  font-style: normal;
  transform: translateY(-50%);
}

.pricing-check {
  display: flex !important;
  align-items: center;
  align-self: end;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #ded9e8;
  border-radius: 9px;
}

.pricing-check input {
  width: auto;
  min-height: auto;
}

.pricing-cost-summary {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 24px;
  padding: 18px;
  border-radius: 12px;
  background: #f8f7fa;
}

.pricing-cost-summary div {
  display: grid;
  gap: 6px;
}

.pricing-cost-summary strong {
  color: #6548a7;
  font-size: 27px;
}

.pricing-cost-summary p {
  margin: 0;
  color: #7b8290;
  line-height: 1.6;
}

.pricing-inline-metrics,
.pricing-ratio-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.pricing-inline-metrics span,
.pricing-ratio-row div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  color: #777f8c;
  background: #f7f6f9;
}

.pricing-inline-metrics strong,
.pricing-ratio-row strong {
  color: #3b4350;
}

.pricing-result-section {
  border-color: #dcd1ec;
  background: linear-gradient(180deg, #fff 0%, #faf8fd 100%);
}

.pricing-result-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.pricing-result-grid article {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid #ece8f2;
  border-radius: 12px;
  background: #fff;
}

.pricing-result-grid span {
  color: #818895;
  font-size: 12px;
}

.pricing-result-grid strong {
  color: #43345e;
  font-size: 20px;
}

.pricing-completeness {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 14px;
}

.pricing-completeness.complete {
  border: 1px solid #cce8d9;
  background: #f1faf5;
}

.pricing-completeness.blocked {
  border: 1px solid #f0cdd3;
  background: #fff5f6;
}

.pricing-completeness p {
  margin: 4px 0 0;
  color: #747b88;
  font-size: 12px;
}

.pricing-actions-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.pricing-maintenance-form {
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid #e7e1f5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(73, 53, 111, 0.07);
}

.pricing-maintenance-form > .btn {
  margin-top: 18px;
}

.pricing-maintenance-form .pricing-form-span {
  grid-column: 1 / -1;
}

.pricing-maintenance-form textarea {
  min-height: 76px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.pricing-product-picker {
  display: grid;
  gap: 16px;
}

.pricing-product-search {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.pricing-product-search > span {
  color: #263526;
  font-size: 13px;
  font-weight: 800;
}

.pricing-product-search > div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #bfe9ae;
  border-radius: 14px;
  background: linear-gradient(135deg, #fbfff9, #f0fbe9);
  box-shadow: 0 0 0 3px rgba(120, 214, 75, .08);
}

.pricing-product-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #172417;
  font-size: 15px;
  background: transparent;
}

.pricing-product-search b {
  color: #4c9d28;
  font-size: 12px;
  white-space: nowrap;
}

.pricing-product-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
}

.pricing-product-result {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid #e3eae0;
  border-radius: 13px;
  color: #243024;
  text-align: left;
  background: #fff;
  cursor: pointer;
}

.pricing-product-result:hover,
.pricing-product-result.active {
  border-color: #85d862;
  background: linear-gradient(135deg, #fbfff8, #effbe8);
  box-shadow: 0 8px 24px rgba(74, 145, 40, .1);
}

.pricing-product-mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, #9bea70, #4da92c);
}

.pricing-product-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.pricing-product-copy strong,
.pricing-product-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pricing-product-copy small {
  color: #788177;
  font-size: 11px;
}

.pricing-product-mapping {
  padding: 5px 8px;
  border-radius: 999px;
  color: #3b8420;
  font-size: 10px;
  font-weight: 800;
  background: #eaf8e3;
}

.pricing-product-mapping.unmapped,
.pricing-product-mapping.conflict {
  color: #996518;
  background: #fff3d5;
}

.pricing-product-empty,
.pricing-mapping-warning {
  grid-column: 1 / -1;
  padding: 14px 16px;
  border-radius: 12px;
  color: #6e786d;
  background: #f5f8f3;
}

.pricing-mapping-warning {
  color: #8a5b12;
  background: #fff6df;
}

.pricing-single-workbench label:has(> select[name="sku"]) {
  display: none;
}

.pricing-logistics-grid:empty::before {
  content: "暂无已审核的真实快递报价，请在本页下方“报价与费用规则管理”录入并审核。";
  display: block;
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px dashed #bcdcae;
  border-radius: 12px;
  color: #628154;
  text-align: center;
  background: #f7fcf4;
}

.pricing-maintenance {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.pricing-maintenance-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border: 1px solid #d8ebcf;
  border-radius: 18px;
  background: linear-gradient(135deg, #fcfff9, #edf9e8);
}

.pricing-maintenance-head span:first-child {
  color: #53a331;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.pricing-maintenance-head h2 {
  margin: 5px 0 4px;
  color: #21351f;
  font-size: 20px;
}

.pricing-maintenance-head p {
  margin: 0;
  color: #778474;
  font-size: 12px;
}

.pricing-maintenance-panel {
  overflow: hidden;
  border: 1px solid #dfe8db;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(57, 102, 37, .06);
}

.pricing-maintenance-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  cursor: pointer;
  background: #fbfdf9;
}

.pricing-maintenance-panel > summary div {
  display: grid;
  gap: 4px;
}

.pricing-maintenance-panel > summary strong {
  color: #253624;
}

.pricing-maintenance-panel > summary small,
.pricing-maintenance-panel > summary > span {
  color: #7d8a79;
  font-size: 12px;
}

.pricing-maintenance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
  border-top: 1px solid #edf1eb;
}

.pricing-maintenance .pricing-maintenance-form {
  margin: 0;
  border-color: #dcebd5;
  box-shadow: none;
}

.pricing-maintenance-form h3 {
  margin: 0 0 16px;
  color: #2a3c27;
}

.pricing-form-help {
  margin: -8px 0 14px;
  color: #7b8778;
  font-size: 12px;
  line-height: 1.6;
}

.pricing-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4c5a49;
  font-size: 12px;
}

.pricing-maintenance .btn-primary,
.pricing-maintenance .pricing-row-actions .btn:first-child {
  border-color: #63be3e;
  color: #fff;
  background: linear-gradient(135deg, #93e768, #54ad32);
}

@media (max-width: 980px) {
  .pricing-product-results,
  .pricing-maintenance-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .pricing-product-search {
    grid-template-columns: 1fr;
  }

  .pricing-product-search > div,
  .pricing-maintenance-head {
    align-items: stretch;
    flex-direction: column;
  }

  .pricing-product-result {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .pricing-product-mapping {
    grid-column: 2;
    justify-self: start;
  }
}

.pricing-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pricing-row-actions .btn {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 12px;
}

.pricing-actions-card p {
  margin: 8px 0 0;
  color: #7a8290;
}

.pricing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.pricing-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.pricing-table th,
.pricing-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #ece9f0;
  text-align: left;
  vertical-align: top;
}

.pricing-table th {
  color: #767e8b;
  font-size: 11px;
  font-weight: 700;
  background: #faf9fb;
}

.pricing-table td small {
  display: block;
  margin-top: 3px;
  color: #969ca6;
}

.pricing-empty {
  padding: 32px;
  border: 1px dashed #ddd7e7;
  border-radius: 12px;
  color: #8b919c;
  text-align: center;
  background: #faf9fb;
}

.pricing-module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.pricing-module-card {
  display: block;
  padding: 20px;
  border: 1px solid #e6e2eb;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}

.pricing-module-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(58, 47, 83, .1);
}

.pricing-module-card > span {
  color: #927ab7;
  font-size: 11px;
  letter-spacing: .12em;
}

.pricing-module-card h3 {
  margin: 10px 0 6px;
}

.pricing-module-card p {
  margin: 0;
  color: #818895;
  font-size: 12px;
  line-height: 1.6;
}

.pricing-overview-counts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 18px 0;
}

.pricing-overview-counts div {
  display: grid;
  gap: 5px;
  padding: 18px;
  border-radius: 12px;
  background: #f7f5fa;
}

.pricing-overview-counts strong {
  color: #6548a7;
  font-size: 26px;
}

.pricing-overview-counts span {
  color: #7b8290;
  font-size: 12px;
}

.pricing-pending {
  display: grid;
  min-height: 320px;
  place-items: center;
  align-content: center;
  text-align: center;
}

.pricing-pending > span {
  padding: 6px 10px;
  border-radius: 999px;
  color: #8d691c;
  font-size: 12px;
  background: #fff0c9;
}

.pricing-pending h2 {
  margin: 14px 0 4px;
}

.pricing-pending p {
  max-width: 620px;
  color: #727a87;
  line-height: 1.7;
}

.pricing-pending-flow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: #7055a4;
}

.pricing-pending-flow b {
  padding: 10px 14px;
  border-radius: 9px;
  background: #f1edf7;
}

.pricing-approval-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pricing-approval-detail div {
  padding: 15px;
  border-radius: 10px;
  background: #f8f7fa;
}

.pricing-approval-detail dt {
  color: #858c98;
  font-size: 11px;
}

.pricing-approval-detail dd {
  margin: 5px 0 0;
  word-break: break-all;
}

@media (max-width: 1100px) {
  .pricing-hero {
    grid-template-columns: 1fr;
  }

  .pricing-form-grid,
  .pricing-form-grid.compact,
  .pricing-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-actions-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .pricing-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .pricing-hero,
  .pricing-form-card,
  .pricing-result-section,
  .pricing-actions-card {
    padding: 18px;
  }

  .pricing-form-grid,
  .pricing-form-grid.compact,
  .pricing-result-grid,
  .pricing-inline-metrics,
  .pricing-ratio-row,
  .pricing-module-grid,
  .pricing-overview-counts,
  .pricing-approval-detail {
    grid-template-columns: 1fr;
  }

  .pricing-cost-summary {
    grid-template-columns: 1fr;
  }

  .pricing-completeness {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Single-page operational pricing calculator */
.pricing-single-workbench {
  --pricing-ink: #173628;
  --pricing-muted: #6d7e73;
  --pricing-line: #dfe9df;
  --pricing-soft: #f4f8f2;
  --pricing-mint: #eaf6e3;
  --pricing-green: #54b96a;
  --pricing-green-dark: #207848;
  --pricing-lime: #9ad65d;
  display: grid;
  gap: 14px;
  color: var(--pricing-ink);
}

.pricing-single-workbench .pricing-hero {
  display: block;
  min-height: 224px;
  padding: 28px 32px;
  border: 0;
  border-radius: 22px;
  background-color: #46a962;
  background-image: url("/src/assets/pricing-hero-apple-green.png");
  background-position: center;
  background-size: cover;
  box-shadow: 0 18px 42px rgba(31, 111, 67, .2);
}

.pricing-hero-top,
.pricing-hero-metrics,
.pricing-workbench-nav,
.pricing-platform-row,
.pricing-source-line,
.pricing-subhead,
.pricing-decision-head,
.pricing-approval-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.pricing-hero-top {
  align-items: flex-start;
}

.pricing-single-workbench .pricing-hero h1 {
  margin: 9px 0 8px;
  color: #fff;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -.03em;
}

.pricing-single-workbench .pricing-hero p {
  max-width: 850px;
  margin: 0;
  color: rgba(255, 255, 255, .86);
  line-height: 1.7;
}

.pricing-single-workbench .pricing-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}

.pricing-release {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  background: rgba(20, 88, 52, .16);
}

.pricing-hero-metrics {
  margin-top: 22px;
}

.pricing-hero-metrics article {
  display: grid;
  flex: 1;
  gap: 5px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .15);
}

.pricing-hero-metrics strong {
  color: #fff;
  font-size: 20px;
}

.pricing-hero-metrics span {
  overflow: hidden;
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pricing-workbench-nav {
  position: sticky;
  z-index: 12;
  top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--pricing-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 32px rgba(31, 54, 40, .08);
  backdrop-filter: blur(12px);
}

.pricing-workbench-nav nav,
.pricing-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pricing-workbench-nav nav {
  min-width: 0;
  overflow-x: auto;
}

.pricing-workbench-nav a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 9px;
  color: #667469;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.pricing-workbench-nav a:hover,
.pricing-workbench-nav a.active {
  color: #fff;
  background: var(--pricing-green-dark);
}

.pricing-workbench-nav a b {
  font-size: 10px;
}

.pricing-toolbar {
  flex: 0 0 auto;
}

.pricing-toolbar .btn {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 11px;
}

.pricing-sku-strip {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid var(--pricing-line);
  border-radius: 14px;
  background: #fff;
}

.pricing-sku-mark,
.pricing-platform b,
.pricing-section-number {
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--pricing-green-dark);
  font-weight: 800;
  background: var(--pricing-mint);
}

.pricing-sku-mark {
  width: 46px;
  height: 46px;
  font-size: 18px;
}

.pricing-sku-strip > div:nth-child(2) {
  display: grid;
  gap: 2px;
}

.pricing-sku-strip span,
.pricing-sku-strip small {
  color: var(--pricing-muted);
  font-size: 11px;
}

.pricing-sku-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pricing-single-workbench .pricing-calculator {
  gap: 14px;
}

.pricing-single-workbench .pricing-card {
  scroll-margin-top: 76px;
  padding: 18px;
  border: 1px solid var(--pricing-line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(31, 54, 40, .045);
}

.pricing-card-head {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: start;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid #edf2ed;
}

.pricing-section-number {
  width: 30px;
  height: 30px;
  color: var(--pricing-green-dark);
  font-size: 11px;
}

.pricing-card-head h2,
.pricing-subhead h3 {
  margin: 0;
  color: var(--pricing-ink);
}

.pricing-card-head h2 {
  font-size: 16px;
}

.pricing-card-head p,
.pricing-subhead p {
  margin: 3px 0 0;
  color: var(--pricing-muted);
  font-size: 10px;
}

.pricing-platform-row {
  padding: 14px 0 2px;
}

.pricing-platform {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 100px;
  padding: 9px 11px;
  border: 1px solid var(--pricing-line);
  border-radius: 10px;
  color: #536258;
  cursor: pointer;
  background: #fff;
}

.pricing-platform:has(input:focus-visible) {
  outline: 3px solid rgba(84, 185, 106, .16);
}

.pricing-platform input,
.pricing-logistics-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pricing-platform.active,
.pricing-platform:has(input:checked) {
  border-color: #70be6a;
  color: var(--pricing-green-dark);
  background: #f1f9ec;
}

.pricing-platform b {
  width: 26px;
  height: 26px;
  color: #fff;
  background: var(--pricing-green);
}

.pricing-scene-summary {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 4px 8px;
  margin-left: auto;
  font-size: 11px;
}

.pricing-scene-summary span {
  color: var(--pricing-muted);
}

.pricing-scene-fields {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #edf2ed;
}

.pricing-single-workbench .pricing-form-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.pricing-field {
  display: grid;
  gap: 6px;
  color: var(--pricing-muted);
  font-size: 10px;
}

.pricing-field input,
.pricing-field select {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid #dbe6dc;
  border-radius: 8px;
  outline: 0;
  color: var(--pricing-ink);
  font-size: 12px;
  background: #fbfdfb;
}

.pricing-field input:focus,
.pricing-field select:focus {
  border-color: var(--pricing-green);
  box-shadow: 0 0 0 3px rgba(84, 185, 106, .12);
}

.pricing-field input[readonly] {
  color: #5f7165;
  background: #f2f6f1;
}

.pricing-single-workbench .pricing-input-unit {
  position: relative;
}

.pricing-single-workbench .pricing-input-unit input {
  padding-right: 36px;
}

.pricing-single-workbench .pricing-input-unit em {
  right: 9px;
  color: #849087;
}

.pricing-workbench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  align-items: start;
  gap: 14px;
}

.pricing-main-column,
.pricing-decision-column {
  display: grid;
  gap: 14px;
}

.pricing-cost-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  padding: 14px 0;
}

.pricing-cost-grid article {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid #e5ede5;
  border-radius: 9px;
  background: #fbfdfb;
}

.pricing-cost-grid span,
.pricing-cost-grid small,
.pricing-source-line span {
  color: var(--pricing-muted);
  font-size: 10px;
}

.pricing-cost-grid strong {
  font-size: 15px;
}

.pricing-source-badge,
.pricing-version {
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

.pricing-source-badge.trusted,
.pricing-version {
  color: var(--pricing-green-dark);
  background: var(--pricing-mint);
}

.pricing-source-badge.blocked {
  color: #9d5b2a;
  background: #fff0d7;
}

.pricing-source-line {
  padding: 11px 12px;
  border-radius: 9px;
  background: var(--pricing-soft);
}

.pricing-source-line div {
  display: grid;
  gap: 3px;
}

.pricing-subhead {
  margin-top: 16px;
}

.pricing-subhead h3 {
  font-size: 13px;
}

.pricing-subhead > span {
  color: var(--pricing-muted);
  font-size: 10px;
}

.pricing-logistics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.pricing-logistics-option {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dfe8df;
  border-radius: 9px;
  cursor: pointer;
}

.pricing-logistics-option.active,
.pricing-logistics-option:has(input:checked) {
  border-color: #70be6a;
  background: #f1f9ec;
}

.pricing-logistics-option div {
  display: grid;
  gap: 3px;
}

.pricing-logistics-option small {
  color: var(--pricing-muted);
  font-size: 9px;
}

.pricing-logistics-option b {
  color: var(--pricing-green-dark);
}

.pricing-after-sales,
.pricing-target-price,
.pricing-fee-trial {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.pricing-after-sales {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 12px;
  border-radius: 9px;
  background: var(--pricing-soft);
}

.pricing-fee-table {
  display: grid;
}

.pricing-fee-header,
.pricing-fee-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr .7fr 1fr;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 5px;
  border-bottom: 1px solid #edf2ed;
  font-size: 11px;
}

.pricing-fee-header {
  color: var(--pricing-muted);
  font-size: 9px;
  font-weight: 700;
}

.pricing-fee-row > div {
  display: grid;
}

.pricing-fee-row small {
  color: var(--pricing-muted);
  font-size: 8px;
}

.pricing-rule-on {
  width: max-content;
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--pricing-green-dark);
  font-size: 9px;
  background: var(--pricing-mint);
}

.pricing-fee-trial {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}

.pricing-fee-trial > div:last-child {
  display: grid;
  gap: 4px;
  min-height: 38px;
  align-content: center;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--pricing-muted);
  font-size: 9px;
  background: var(--pricing-soft);
}

.pricing-fee-trial > div:last-child strong {
  color: var(--pricing-green-dark);
  font-size: 14px;
}

.pricing-decision-column {
  position: sticky;
  top: 74px;
}

.pricing-target-price {
  grid-template-columns: 1fr 1fr;
}

.pricing-decision-card {
  padding: 18px;
  border-radius: 15px;
  color: #fff;
  background: #287f4c;
  box-shadow: 0 16px 34px rgba(32, 120, 72, .22);
}

.pricing-decision-card.blocked {
  background: #65786a;
  box-shadow: 0 16px 34px rgba(53, 75, 61, .18);
}

.pricing-decision-card .pricing-status {
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  background: rgba(255, 255, 255, .12);
}

.pricing-decision-head h2 {
  margin: 4px 0 15px;
  color: #fff;
  font-size: 18px;
}

.pricing-decision-card > span,
.pricing-decision-head span,
.pricing-decision-card > small {
  color: rgba(255, 255, 255, .72);
  font-size: 10px;
}

.pricing-decision-card > strong {
  display: block;
  margin: 6px 0;
  color: #fff;
  font-size: 34px;
}

.pricing-decision-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 15px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 9px;
}

.pricing-decision-metrics div {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-right: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.pricing-decision-metrics span {
  color: rgba(255, 255, 255, .68);
  font-size: 9px;
}

.pricing-system-advice {
  margin-top: 12px;
  padding: 11px;
  border-radius: 8px;
  background: rgba(15, 70, 41, .27);
}

.pricing-system-advice p {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: 9px;
  line-height: 1.6;
}

.pricing-submit-button {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  border: 0;
  border-radius: 8px;
  color: var(--pricing-green-dark);
  font-weight: 800;
  cursor: pointer;
  background: #fff;
}

.pricing-submit-button:disabled {
  color: #78857c;
  cursor: not-allowed;
  background: #e5eae6;
}

.pricing-risk-note {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid #f0d7a9;
  border-radius: 11px;
  color: #8b5a20;
  background: #fff7e8;
}

.pricing-risk-note span {
  font-size: 9px;
}

.pricing-approval-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 0;
}

.pricing-approval-flow article {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  padding: 11px;
  border: 1px solid #e4ece4;
  border-radius: 9px;
  background: #fbfdfb;
}

.pricing-approval-flow article > span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: var(--pricing-green-dark);
  font-size: 9px;
  font-weight: 800;
  background: var(--pricing-mint);
}

.pricing-approval-flow article div {
  display: grid;
  gap: 4px;
}

.pricing-approval-flow small,
.pricing-approval-actions p {
  color: var(--pricing-muted);
  font-size: 9px;
  line-height: 1.5;
}

.pricing-approval-flow article > b {
  grid-column: 2;
  color: var(--pricing-green-dark);
  font-size: 9px;
}

.pricing-approval-actions {
  padding-top: 12px;
  border-top: 1px solid #edf2ed;
}

.pricing-approval-actions p {
  flex: 1;
  margin: 0;
}

.pricing-audit-grid,
.pricing-comparison-grid {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.pricing-audit-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pricing-audit-grid article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px;
  border-radius: 9px;
  background: var(--pricing-soft);
}

.pricing-audit-grid span,
.pricing-audit-grid small,
.pricing-scenario-history,
.pricing-comparison-grid span {
  color: var(--pricing-muted);
  font-size: 9px;
}

.pricing-audit-grid small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pricing-scenario-history {
  display: flex;
  gap: 12px;
  margin-top: 9px;
  padding: 10px 11px;
  border: 1px solid #e8eee8;
  border-radius: 8px;
}

.pricing-scenario-history strong {
  flex: 0 0 auto;
  color: var(--pricing-ink);
}

.pricing-comparison-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pricing-comparison-grid article {
  padding: 13px;
  border: 1px solid #e1e9e1;
  border-radius: 10px;
}

.pricing-comparison-grid article.active {
  border-color: #70be6a;
  background: #f2faed;
}

.pricing-comparison-grid article > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pricing-comparison-grid article > div b {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 7px;
  color: #fff;
  background: var(--pricing-green);
}

.pricing-comparison-grid small {
  padding: 3px 6px;
  border-radius: 999px;
  color: var(--pricing-green-dark);
  font-size: 8px;
  background: var(--pricing-mint);
}

.pricing-comparison-grid h3 {
  margin: 14px 0 4px;
  color: var(--pricing-ink);
}

.pricing-status {
  gap: 5px;
}

.pricing-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.page-container:has(.pricing-single-workbench) {
  container-name: pricing-shell;
  container-type: inline-size;
}

@container pricing-shell (max-width: 1100px) {
  .pricing-single-workbench,
  .pricing-single-workbench > *,
  .pricing-single-workbench .pricing-calculator,
  .pricing-main-column,
  .pricing-decision-column {
    min-width: 0;
    max-width: 100%;
  }

  .pricing-workbench-grid {
    grid-template-columns: 1fr;
  }

  .pricing-decision-column {
    position: static;
  }

  .pricing-workbench-nav {
    align-items: flex-start;
    flex-direction: column;
  }

  .pricing-toolbar {
    width: 100%;
  }

  .pricing-single-workbench .pricing-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pricing-platform-row,
  .pricing-source-line {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .pricing-scene-summary {
    width: 100%;
    margin-left: 0;
  }

  .pricing-after-sales,
  .pricing-cost-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pricing-product-results,
  .pricing-maintenance-grid {
    grid-template-columns: 1fr;
  }
}

@container pricing-shell (max-width: 760px) {
  .pricing-hero-metrics,
  .pricing-approval-flow,
  .pricing-audit-grid,
  .pricing-comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pricing-single-workbench .pricing-form-grid,
  .pricing-after-sales,
  .pricing-cost-grid,
  .pricing-logistics-grid,
  .pricing-fee-trial {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@container pricing-shell (max-width: 520px) {
  .pricing-single-workbench .pricing-form-grid,
  .pricing-after-sales,
  .pricing-cost-grid,
  .pricing-logistics-grid,
  .pricing-fee-trial,
  .pricing-hero-metrics,
  .pricing-approval-flow,
  .pricing-audit-grid,
  .pricing-comparison-grid {
    grid-template-columns: 1fr !important;
  }

  .pricing-product-search {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1400px) {
  .pricing-workbench-grid {
    grid-template-columns: 1fr;
  }

  .pricing-decision-column {
    position: static;
  }

  .pricing-workbench-nav {
    align-items: flex-start;
    flex-direction: column;
  }

  .pricing-toolbar {
    width: 100%;
  }

  .pricing-single-workbench .pricing-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pricing-platform-row {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .pricing-scene-summary {
    width: 100%;
    margin-left: 0;
  }

  .pricing-after-sales {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .pricing-hero-metrics,
  .pricing-approval-flow,
  .pricing-audit-grid,
  .pricing-comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.obsidian-review-panel {
  display: grid;
  gap: 14px;
  margin: 18px 0;
  padding: 18px;
  border: 1px solid rgba(37, 99, 235, .18);
  border-radius: 12px;
  background: rgba(239, 246, 255, .55);
}

.obsidian-review-panel .section-title p {
  margin: 4px 0 0;
  color: var(--muted);
}

.obsidian-review-filter {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px) auto;
  align-items: end;
  gap: 12px;
}

.obsidian-review-filter label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.obsidian-review-filter input,
.obsidian-review-filter select {
  min-height: 40px;
}

.obsidian-review-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
}

.obsidian-preview-drawer {
  width: min(760px, calc(100vw - 32px));
}

.obsidian-preview-content {
  max-height: calc(100vh - 150px);
  margin: 0;
  padding: 18px;
  overflow: auto;
  border-radius: 10px;
  background: #f8fafc;
  color: #172033;
  font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 760px) {
  .obsidian-review-filter {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .pricing-single-workbench .pricing-hero {
    padding: 22px 18px;
  }

  .pricing-hero-top {
    display: grid;
  }

  .pricing-single-workbench .pricing-form-grid,
  .pricing-cost-grid,
  .pricing-logistics-grid,
  .pricing-after-sales,
  .pricing-fee-trial,
  .pricing-target-price,
  .pricing-approval-flow,
  .pricing-audit-grid,
  .pricing-comparison-grid {
    grid-template-columns: 1fr;
  }

  .pricing-hero-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .pricing-sku-strip {
    grid-template-columns: 42px 1fr;
  }

  .pricing-sku-status {
    grid-column: 1 / -1;
  }

  .pricing-toolbar {
    overflow-x: auto;
  }

  .pricing-fee-header {
    display: none;
  }

  .pricing-fee-row {
    grid-template-columns: 1fr 1fr;
  }

  .pricing-approval-actions {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

@media print {
  .primary-nav,
  .secondary-nav,
  .pricing-toolbar,
  .pricing-workbench-nav nav,
  .topbar {
    display: none !important;
  }

  .pricing-workbench-nav {
    position: static;
    box-shadow: none;
  }

  .pricing-decision-column {
    position: static;
  }
}

/* AI digital employees MVP — synthetic Gate 0C display only */
.ai-digital-employees-page { display: grid; gap: 18px; color: #1f2937; }
.ai-employee-hero { display: flex; justify-content: space-between; gap: 24px; padding: 28px; border-radius: 18px; color: #f8fafc; background: linear-gradient(130deg, #0c264a, #153f73 56%, #157c76); box-shadow: 0 14px 30px rgba(15, 55, 98, .2); }
.ai-employee-hero h1 { margin: 6px 0 8px; color: inherit; font-size: 30px; }
.ai-employee-hero p { max-width: 760px; margin: 0; color: #dcecff; line-height: 1.75; }
.ai-employee-compact-header { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; align-items: end; padding: 15px 18px; border: 1px solid #dce5ed; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(15, 40, 75, .04); }.ai-employee-compact-header .back-link { grid-column: 1 / -1; font-size: 13px; }.ai-employee-compact-header h1 { margin: 3px 0 0; font-size: 22px; }.ai-compact-status { display: flex; align-items: center; gap: 8px; color: #496376; font-size: 13px; font-weight: 700; }.ai-compact-status span { padding: 5px 9px; border-radius: 99px; color: #176d83; background: #dff3f1; }
.ai-employee-kicker { color: #0b7773; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ai-employee-hero .ai-employee-kicker { color: #9eeadf; }
.ai-feature-state { align-self: flex-start; min-width: 195px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(255,255,255,.12); }
.ai-feature-state strong, .ai-feature-state span { display: block; }
.ai-feature-state span { margin-top: 6px; font-size: 11px; opacity: .84; }
.ai-feature-state.disabled { border-color: #f5c46b; }
.ai-test-mode-banner { display: flex; gap: 10px; align-items: baseline; padding: 11px 14px; border: 1px solid #f0c979; border-radius: 10px; color: #76520f; background: #fff8e6; font-size: 13px; line-height: 1.55; }.ai-test-mode-banner strong { white-space: nowrap; }
.ai-employee-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.ai-employee-tabs a { white-space: nowrap; padding: 9px 14px; border: 1px solid #dbe5ef; border-radius: 9px; color: #50657a; background: #fff; text-decoration: none; font-size: 14px; font-weight: 700; }
.ai-employee-tabs a.active { color: #fff; border-color: #176d83; background: #176d83; }
.ai-employee-overview-intro, .ai-meeting-run-head, .section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.ai-employee-overview-intro h2, .section-title h2 { margin: 5px 0 6px; }
.ai-employee-overview-intro p, .section-title p { margin: 0; color: #64748b; }
.ai-employee-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ai-employee-card, .ai-decision-card { padding: 20px; border: 1px solid #dce5ed; border-radius: 14px; background: #fff; box-shadow: 0 5px 18px rgba(15, 40, 75, .05); }
.ai-employee-card-top, .ai-employee-detail-hero { display: flex; align-items: flex-start; gap: 14px; }
.ai-employee-card h3 { margin: 3px 0 7px; font-size: 19px; }.ai-employee-card p { margin: 0; color: #52677a; line-height: 1.65; }
.ai-employee-avatar { display: grid; flex: 0 0 auto; width: 44px; height: 44px; place-items: center; border-radius: 13px; color: #fff; background: #176d83; font-size: 13px; font-weight: 800; }
.ai-employee-avatar.coo { background: #4b6295; }.ai-employee-avatar.large { width: 66px; height: 66px; font-size: 18px; border-radius: 18px; }
.ai-employee-status { display: inline-flex; gap: 7px; align-items: center; margin: 16px 0 12px; color: #267261; font-size: 13px; font-weight: 800; }.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #28a076; }
.ai-employee-card dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 16px; }.ai-employee-card dl div { padding: 9px; border-radius: 8px; background: #f5f8fa; }.ai-employee-card dt { color: #75899b; font-size: 12px; }.ai-employee-card dd { margin: 4px 0 0; color: #32475b; font-size: 13px; }
.ai-employee-detail-hero { padding: 22px; border-radius: 14px; background: #edf6f7; }.ai-employee-detail-hero h2 { margin: 4px 0 7px; }.ai-employee-detail-hero p { margin: 0; color: #496376; line-height: 1.7; }.ai-employee-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }.ai-employee-tags span, .mock-pill { padding: 5px 9px; border-radius: 99px; color: #176d83; background: #dff3f1; font-size: 12px; font-weight: 800; }
.back-link { display: inline-block; color: #176d83; text-decoration: none; font-weight: 700; }.ai-employee-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.ai-employee-detail-grid .panel { margin: 0; }.ai-employee-detail-grid h3 { margin-top: 0; font-size: 15px; }.ai-employee-detail-grid ul { margin: 0; padding-left: 19px; color: #4d6476; line-height: 1.7; }.ai-hermes-binding strong { color: #b45309; }
.ai-overview-status-strip { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; border: 1px solid #d9e8e6; border-radius: 11px; color: #386269; background: #f1faf8; font-size: 13px; font-weight: 700; }.ai-overview-status-strip span + span { padding-left: 9px; border-left: 1px solid #bcd9d5; }
.ai-technical-details { margin-top: 14px; border: 1px solid #dce5ed; border-radius: 10px; color: #52677a; background: #fbfdff; }.ai-technical-details summary { padding: 10px 12px; cursor: pointer; color: #50657a; font-size: 13px; font-weight: 800; }.ai-technical-details dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 9px; margin: 0; padding: 0 12px 12px; }.ai-technical-details dl div { padding: 8px; border-radius: 7px; background: #f2f6f9; }.ai-technical-details dt { color: #75899b; font-size: 11px; }.ai-technical-details dd { margin: 3px 0 0; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.ai-empty-run { padding: 42px 24px; border: 1px dashed #aebfcc; border-radius: 14px; text-align: center; background: #fbfdff; }.ai-empty-run strong { font-size: 18px; }.ai-empty-run p { max-width: 640px; margin: 9px auto 18px; color: #62788a; line-height: 1.7; }
.ai-meeting-run { display: grid; gap: 16px; }.ai-meeting-run-head { padding: 20px; border: 1px solid #dfe9eb; border-radius: 14px; background: #fff; }.ai-meeting-run-head h2 { margin: 5px 0; }.ai-meeting-run-head p { margin: 0; color: #697d8d; }.business-status-pill { padding: 6px 10px; border-radius: 99px; color: #176d83; background: #dff3f1; font-size: 12px; font-weight: 800; white-space: nowrap; }.ai-meeting-flow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px; border-radius: 12px; color: #176d83; background: #edf7f6; font-size: 13px; font-weight: 800; }.ai-meeting-flow b { color: #65a5a2; }.ai-meeting-content-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 16px; }.ai-meeting-content-grid .panel { margin: 0; }.ai-metric-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }.ai-metric-list div { padding: 12px; border-radius: 10px; background: #f5f8fb; }.ai-metric-list strong, .ai-metric-list span { display: block; }.ai-metric-list strong { color: #173b68; font-size: 24px; }.ai-metric-list span { margin-top: 4px; color: #748599; font-size: 12px; }.ai-synthesis-section { margin-top: 11px; padding: 12px 14px; border-left: 4px solid #4b91a1; border-radius: 0 9px 9px 0; background: #f5fbfb; }.ai-synthesis-section.inferences { border-color: #b7791f; background: #fffbeb; }.ai-synthesis-section.recommendations { border-color: #397f57; background: #f0fdf4; }.ai-synthesis-section h4 { margin: 0 0 7px; }.ai-synthesis-section ul { margin: 0; padding-left: 18px; color: #405b69; line-height: 1.65; }.ai-meeting-decision-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 17px; border: 1px solid #dfe9eb; border-radius: 12px; background: #fff; }.ai-meeting-decision-summary strong, .ai-meeting-decision-summary span { display: block; }.ai-meeting-decision-summary span { margin-top: 4px; color: #64748b; font-size: 13px; }
.ai-decision-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }.ai-decision-card-head, .ai-decision-actions { display: flex; justify-content: space-between; gap: 8px; }.ai-decision-card-head { color: #6a7e8d; font-size: 12px; }.ai-decision-card h3 { margin: 15px 0 12px; color: #173b68; line-height: 1.5; }.ai-decision-card section { margin: 13px 0; }.ai-decision-card h4 { margin: 0 0 5px; color: #36536a; font-size: 13px; }.ai-decision-card p, .ai-decision-card li { color: #506879; font-size: 13px; line-height: 1.65; }.ai-decision-card p { margin: 0; }.ai-decision-card ul, .ai-decision-card ol { margin: 0; padding-left: 20px; }.ai-decision-recommendation { padding: 10px 12px; border-radius: 9px; background: #edf8f2; }.ai-decision-question { padding: 10px 12px; border-left: 4px solid #176d83; border-radius: 0 9px 9px 0; background: #eff9f8; }.ai-decision-boundary { padding-top: 10px; border-top: 1px dashed #cad8e2; color: #75899b !important; font-size: 12px !important; }.ai-decision-actions { flex-wrap: wrap; justify-content: flex-start; margin-top: 14px; }.ai-decision-actions .btn { padding: 7px 10px; font-size: 13px; }.ai-candidate-panel { margin-bottom: 0; }.ai-candidate-panel p { color: #486071; }
.ai-audit-business-list { display: grid; gap: 12px; }.ai-audit-business-card { padding: 15px; border: 1px solid #dce5ed; border-radius: 12px; background: #fff; }.ai-audit-business-card-head { display: flex; justify-content: space-between; gap: 12px; color: #173b68; }.ai-audit-business-card-head span { color: #718293; font-size: 12px; }.ai-audit-business-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 13px 0 0; }.ai-audit-business-card dl div { padding: 9px; border-radius: 8px; background: #f6f9fb; }.ai-audit-business-card dt { color: #75899b; font-size: 11px; }.ai-audit-business-card dd { margin: 4px 0 0; color: #405b69; font-size: 13px; line-height: 1.45; }.ai-employee-notice { padding: 12px 15px; border: 1px solid #9fd8cb; border-radius: 10px; color: #12655e; background: #e7f8f3; font-weight: 700; }.ai-employee-boundary { display: flex; flex-wrap: wrap; gap: 8px; }.ai-employee-boundary span { padding: 6px 10px; border-radius: 8px; color: #647889; background: #edf2f6; font-size: 12px; }
.ai-reject-modal label { display: grid; gap: 7px; color: #4a6171; font-weight: 700; }.ai-reject-modal textarea { min-height: 110px; padding: 10px; border: 1px solid #b9cad5; border-radius: 8px; font: inherit; resize: vertical; }
@media (max-width: 900px) { .ai-employee-hero, .ai-employee-overview-intro, .ai-meeting-run-head, .ai-meeting-decision-summary { flex-direction: column; }.ai-employee-grid, .ai-employee-detail-grid, .ai-meeting-content-grid, .ai-audit-business-card dl { grid-template-columns: 1fr; }.ai-meeting-flow { align-items: flex-start; flex-direction: column; }.ai-meeting-flow b { transform: rotate(90deg); }.ai-feature-state { width: 100%; }.ai-employee-compact-header { grid-template-columns: 1fr; }.ai-compact-status { justify-content: flex-start; }.ai-test-mode-banner { align-items: flex-start; flex-direction: column; }.ai-overview-status-strip span + span { padding-left: 0; border-left: 0; } }
/* Boss ROI calculator: preserve the supplied standalone page inside the V3 shell. */
.boss-roi-calculator {
  --boss-roi-ink: #20241f;
  --boss-roi-muted: #737970;
  --boss-roi-line: #e3e6de;
  --boss-roi-paper: #fff;
  --boss-roi-ground: #f3f5f0;
  --boss-roi-brand: #176b52;
  --boss-roi-brand-dark: #0f513e;
  --boss-roi-brand-soft: #e8f4ee;
  --boss-roi-orange: #e9792f;
  --boss-roi-red: #c94b3f;
  min-width: 0;
  padding: 26px;
  border: 1px solid rgba(220, 224, 216, .9);
  border-radius: 20px;
  color: var(--boss-roi-ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(233, 121, 47, .08), transparent 28%),
    radial-gradient(circle at 92% 3%, rgba(23, 107, 82, .09), transparent 26%),
    var(--boss-roi-ground);
}

.boss-roi-calculator button,
.boss-roi-calculator input {
  font: inherit;
}

.boss-roi-header,
.boss-roi-brand,
.boss-roi-actions,
.boss-roi-panel-head,
.boss-roi-hero-top,
.boss-roi-strategy-title {
  display: flex;
  align-items: center;
}

.boss-roi-header {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.boss-roi-brand {
  gap: 13px;
}

.boss-roi-brand > span {
  display: grid;
  flex: 0 0 47px;
  width: 47px;
  height: 47px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  background: linear-gradient(145deg, var(--boss-roi-brand), var(--boss-roi-brand-dark));
  box-shadow: 0 9px 22px rgba(23, 107, 82, .22);
}

.boss-roi-brand h1 {
  margin: 0 0 3px;
  color: var(--boss-roi-ink);
  font-size: 23px;
  letter-spacing: -.5px;
}

.boss-roi-brand p,
.boss-roi-panel-head p,
.boss-roi-section-head p,
.boss-roi-decision p,
.boss-roi-footnote {
  margin: 0;
  color: var(--boss-roi-muted);
}

.boss-roi-toast {
  position: fixed;
  z-index: 30;
  bottom: 22px;
  left: 50%;
  padding: 9px 14px;
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  background: #26342e;
  opacity: 0;
  transform: translate(-50%, 18px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

.boss-roi-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.boss-roi-brand p {
  font-size: 13px;
}

.boss-roi-actions {
  flex: 0 0 auto;
  gap: 8px;
}

.boss-roi-actions .btn {
  min-height: 36px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 750;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--boss-roi-line);
}

.boss-roi-actions .btn-primary {
  color: #fff;
  background: var(--boss-roi-brand);
  box-shadow: none;
}

.boss-roi-actions .btn:active,
.boss-roi-sku-results button:active,
.boss-roi-platform-options button:active,
.boss-roi-mode-block button:active,
.boss-roi-strategy:active {
  transform: translateY(1px);
}

.boss-roi-sku-picker {
  margin-bottom: 19px;
  padding: 20px 22px;
  border: 1px solid rgba(220, 224, 216, .9);
  border-radius: 19px;
  background: var(--boss-roi-paper);
  box-shadow: 0 16px 42px rgba(40, 49, 42, .06);
}

.boss-roi-sku-head,
.boss-roi-sku-search > div,
.boss-roi-selected-sku,
.boss-roi-selected-copy,
.boss-roi-sku-results button {
  display: flex;
  align-items: center;
}

.boss-roi-sku-head {
  justify-content: space-between;
  gap: 12px;
}

.boss-roi-sku-head h2 {
  margin: 0;
  font-size: 17px;
}

.boss-roi-sku-head p {
  margin: 4px 0 0;
  color: var(--boss-roi-muted);
  font-size: 11px;
}

.boss-roi-sku-head > span {
  padding: 5px 9px;
  border-radius: 20px;
  color: var(--boss-roi-brand);
  font-size: 11px;
  font-weight: 800;
  background: var(--boss-roi-brand-soft);
}

.boss-roi-sku-search {
  display: block;
  margin-top: 15px;
  color: #51574f;
  font-size: 12px;
  font-weight: 750;
}

.boss-roi-sku-search > div {
  gap: 10px;
  margin-top: 7px;
}

.boss-roi-sku-search input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #d9ddd5;
  border-radius: 10px;
  outline: none;
  color: var(--boss-roi-ink);
  background: #fbfcf9;
}

.boss-roi-sku-search input:focus {
  border-color: #78a994;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(23, 107, 82, .1);
}

.boss-roi-sku-search b {
  color: var(--boss-roi-muted);
  font-size: 11px;
  white-space: nowrap;
}

.boss-roi-selected-sku {
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid #cfe2d9;
  border-radius: 13px;
  background: #f7fbf8;
}

.boss-roi-selected-copy {
  min-width: 220px;
  gap: 10px;
}

.boss-roi-selected-copy > i,
.boss-roi-sku-results button > i {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  font-style: normal;
  font-weight: 900;
  background: var(--boss-roi-brand);
}

.boss-roi-selected-copy span,
.boss-roi-selected-copy small,
.boss-roi-sku-results small {
  display: block;
  color: var(--boss-roi-muted);
  font-size: 10px;
}

.boss-roi-selected-copy strong {
  display: block;
  margin: 2px 0 3px;
  font-size: 13px;
}

.boss-roi-sku-costs {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(4, minmax(82px, 1fr));
  gap: 7px;
}

.boss-roi-sku-costs > div {
  padding: 8px 9px;
  border-radius: 9px;
  background: #fff;
}

.boss-roi-sku-costs > div.total {
  background: var(--boss-roi-brand-soft);
}

.boss-roi-sku-costs span,
.boss-roi-sku-costs strong {
  display: block;
}

.boss-roi-sku-costs span {
  color: var(--boss-roi-muted);
  font-size: 9px;
}

.boss-roi-sku-costs strong {
  margin-top: 4px;
  font-size: 13px;
}

.boss-roi-selected-sku > em,
.boss-roi-sku-results em {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.boss-roi-selected-sku > em.ready,
.boss-roi-sku-results em.ready {
  color: var(--boss-roi-brand);
  background: var(--boss-roi-brand-soft);
}

.boss-roi-selected-sku > em.missing,
.boss-roi-sku-results em.missing {
  color: #9a571f;
  background: #fff0df;
}

.boss-roi-sku-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
  margin-top: 12px;
}

.boss-roi-sku-results button {
  min-width: 0;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--boss-roi-line);
  border-radius: 11px;
  color: var(--boss-roi-ink);
  text-align: left;
  background: #fff;
  cursor: pointer;
}

.boss-roi-sku-results button:hover {
  border-color: #91bba8;
  background: #f8fbf9;
}

.boss-roi-sku-results button > span {
  min-width: 0;
  flex: 1;
}

.boss-roi-sku-results strong,
.boss-roi-sku-results small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boss-roi-sku-results strong {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
}

.boss-roi-sku-empty,
.boss-roi-sku-error {
  grid-column: 1 / -1;
  margin: 0;
  padding: 13px;
  border-radius: 10px;
  color: var(--boss-roi-muted);
  font-size: 11px;
  text-align: center;
  background: #f6f7f4;
}

.boss-roi-sku-error {
  margin-top: 10px;
  color: #9a4c3f;
  background: #fff4f1;
}

.boss-roi-layout {
  display: grid;
  grid-template-columns: minmax(330px, .76fr) minmax(0, 1.24fr);
  align-items: start;
  gap: 19px;
}

.boss-roi-input-panel,
.boss-roi-results {
  min-width: 0;
  padding: 22px;
  border: 1px solid rgba(220, 224, 216, .9);
  border-radius: 19px;
  background: var(--boss-roi-paper);
  box-shadow: 0 16px 42px rgba(40, 49, 42, .08);
}

.boss-roi-input-panel {
  position: sticky;
  top: 16px;
}

.boss-roi-panel-head {
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 17px;
}

.boss-roi-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 17px;
}

.boss-roi-results-head h2 {
  margin: 0;
  color: var(--boss-roi-ink);
  font-size: 18px;
}

.boss-roi-results-head span {
  padding: 5px 9px;
  border-radius: 20px;
  color: var(--boss-roi-brand);
  font-size: 11px;
  font-weight: 800;
  background: var(--boss-roi-brand-soft);
}

.boss-roi-panel-head h2,
.boss-roi-section-head h3 {
  margin: 0;
  color: var(--boss-roi-ink);
}

.boss-roi-panel-head h2 {
  font-size: 18px;
}

.boss-roi-panel-head p {
  margin-top: 4px;
  font-size: 11px;
}

.boss-roi-panel-head > span {
  padding: 5px 9px;
  border-radius: 20px;
  color: var(--boss-roi-brand);
  font-size: 11px;
  font-weight: 800;
  background: var(--boss-roi-brand-soft);
}

.boss-roi-platform-block {
  margin-bottom: 17px;
  padding: 13px;
  border: 1px solid var(--boss-roi-line);
  border-radius: 13px;
  background: #f8faf7;
}

.boss-roi-platform-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 9px;
}

.boss-roi-platform-head strong {
  color: #51574f;
  font-size: 13px;
}

.boss-roi-platform-head small,
.boss-roi-platform-guide small {
  color: var(--boss-roi-muted);
  font-size: 9px;
  line-height: 1.5;
}

.boss-roi-platform-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 9px;
}

.boss-roi-platform-options button {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 38px;
  padding: 6px;
  border: 1px solid var(--boss-roi-line);
  border-radius: 10px;
  color: #676c65;
  background: #fff;
  cursor: pointer;
}

.boss-roi-platform-options button b {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 7px;
  color: var(--boss-roi-brand);
  font-size: 11px;
  background: var(--boss-roi-brand-soft);
}

.boss-roi-platform-options button span {
  overflow: hidden;
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boss-roi-platform-options button.active {
  border-color: #80b19b;
  color: var(--boss-roi-brand);
  background: var(--boss-roi-brand-soft);
  box-shadow: 0 0 0 2px rgba(23, 107, 82, .07);
}

.boss-roi-platform-options button.active b {
  color: #fff;
  background: var(--boss-roi-brand);
}

.boss-roi-platform-guide {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--boss-roi-line);
}

.boss-roi-platform-guide > strong {
  color: #51574f;
  font-size: 10px;
}

.boss-roi-platform-guide p {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 6px 0;
}

.boss-roi-platform-guide p span {
  padding: 4px 6px;
  border-radius: 7px;
  color: #4f6b5f;
  font-size: 9px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #dce6df;
}

.boss-roi-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px 11px;
}

.boss-roi-field {
  display: block;
  color: #51574f;
  font-size: 13px;
  font-weight: 700;
}

.boss-roi-field-wide {
  grid-column: 1 / -1;
}

.boss-roi-input-wrap {
  position: relative;
  margin-top: 7px;
}

.boss-roi-input-wrap input {
  width: 100%;
  height: 43px;
  padding: 0 48px 0 11px;
  border: 1px solid #d9ddd5;
  border-radius: 10px;
  outline: none;
  color: var(--boss-roi-ink);
  background: #fbfcf9;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.boss-roi-input-wrap input:focus {
  border-color: #78a994;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(23, 107, 82, .1);
}

.boss-roi-input-wrap em {
  position: absolute;
  top: 50%;
  right: 11px;
  color: #858c83;
  font-size: 11px;
  font-style: normal;
  transform: translateY(-50%);
  pointer-events: none;
}

.boss-roi-field > small {
  display: block;
  margin-top: 5px;
  color: #858b82;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
}

.boss-roi-mode-block {
  margin-top: 19px;
  padding-top: 18px;
  border-top: 1px solid var(--boss-roi-line);
}

.boss-roi-mode-block > strong {
  display: block;
  margin-bottom: 9px;
  color: #51574f;
  font-size: 13px;
}

.boss-roi-mode-block > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.boss-roi-mode-block button {
  padding: 9px 5px;
  border: 1px solid var(--boss-roi-line);
  border-radius: 10px;
  color: #676c65;
  background: #fff;
  cursor: pointer;
}

.boss-roi-mode-block button b,
.boss-roi-mode-block button small {
  display: block;
}

.boss-roi-mode-block button b {
  font-size: 12px;
}

.boss-roi-mode-block button small {
  margin-top: 3px;
  color: #858b82;
  font-size: 10px;
}

.boss-roi-mode-block button.active {
  border-color: #80b19b;
  color: var(--boss-roi-brand);
  background: var(--boss-roi-brand-soft);
  box-shadow: 0 0 0 2px rgba(23, 107, 82, .07);
}

.boss-roi-note {
  margin: 13px 0 0;
  padding: 11px 12px;
  border-radius: 10px;
  color: #6f655c;
  font-size: 11px;
  line-height: 1.6;
  background: #fbf5ef;
}

.boss-roi-hero {
  position: relative;
  overflow: hidden;
  padding: 21px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--boss-roi-brand), var(--boss-roi-brand-dark));
}

.boss-roi-hero::after {
  content: "ROI";
  position: absolute;
  top: -7px;
  right: 15px;
  color: rgba(255, 255, 255, .055);
  font-size: 80px;
  font-weight: 900;
}

.boss-roi-hero-top {
  position: relative;
  z-index: 1;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.boss-roi-hero-top div > span,
.boss-roi-hero-top div > small,
.boss-roi-compare span {
  display: block;
  color: rgba(255, 255, 255, .74);
  font-size: 10px;
}

.boss-roi-hero-top div > strong {
  display: block;
  margin: 5px 0 3px;
  color: #fff;
  font-size: 45px;
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1;
}

.boss-roi-health {
  padding: 7px 10px;
  border-radius: 20px;
  color: #16563f;
  font-size: 11px;
  white-space: nowrap;
  background: #dff4e8;
}

.boss-roi-health.warning {
  color: #8c521a;
  background: #ffefcc;
}

.boss-roi-health.danger {
  color: #963c32;
  background: #ffe0da;
}

.boss-roi-health.neutral {
  color: #4c5c54;
  background: #e8eee9;
}

.boss-roi-compare {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 17px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.boss-roi-compare div:last-child {
  text-align: right;
}

.boss-roi-compare strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 21px;
}

.boss-roi-compare i {
  color: rgba(255, 255, 255, .6);
  font-size: 11px;
  font-style: normal;
}

.boss-roi-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 11px;
}

.boss-roi-metrics article {
  min-width: 0;
  padding: 13px 11px;
  border: 1px solid var(--boss-roi-line);
  border-radius: 12px;
  background: #fafbf8;
}

.boss-roi-metrics article.primary {
  border-color: #b8d9c9;
  background: #f1faf5;
}

.boss-roi-metrics span,
.boss-roi-list-price span,
.boss-roi-targets span {
  display: block;
  color: var(--boss-roi-muted);
  font-size: 10px;
}

.boss-roi-metrics strong {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  color: #303731;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boss-roi-metrics .primary strong {
  color: var(--boss-roi-brand);
}

.boss-roi-section {
  margin-top: 21px;
}

.boss-roi-section-head {
  margin-bottom: 11px;
}

.boss-roi-section-head h3 {
  font-size: 15px;
}

.boss-roi-section-head p {
  margin-top: 3px;
  font-size: 11px;
}

.boss-roi-strategies {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.boss-roi-strategy {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--boss-roi-line);
  border-radius: 12px;
  color: var(--boss-roi-ink);
  text-align: left;
  background: #fff;
  cursor: pointer;
}

.boss-roi-strategy.selected {
  border-color: #7daf98;
  background: #f3faf6;
  box-shadow: 0 7px 18px rgba(23, 107, 82, .08);
}

.boss-roi-strategy-title {
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.boss-roi-strategy-title em {
  padding: 3px 6px;
  border-radius: 9px;
  color: var(--boss-roi-brand);
  font-size: 9px;
  font-style: normal;
  background: var(--boss-roi-brand-soft);
}

.boss-roi-strategy > strong {
  display: block;
  margin-top: 8px;
  color: var(--boss-roi-ink);
  font-size: 22px;
}

.boss-roi-strategy dl {
  margin: 9px 0 0;
}

.boss-roi-strategy dl div {
  display: flex;
  justify-content: space-between;
  gap: 7px;
  margin-top: 5px;
  color: var(--boss-roi-muted);
  font-size: 10px;
}

.boss-roi-strategy dd {
  margin: 0;
  color: #444a43;
  font-weight: 800;
}

.boss-roi-strategy dd.negative {
  color: var(--boss-roi-red);
}

.boss-roi-cost-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 13px;
  background: #f7f8f4;
}

.boss-roi-fee-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 9px;
  color: var(--boss-roi-muted);
  font-size: 10px;
}

.boss-roi-fee-breakdown span {
  white-space: nowrap;
}

.boss-roi-cost-bar {
  display: flex;
  height: 11px;
  overflow: hidden;
  border-radius: 8px;
  background: #e6e8e2;
}

.boss-roi-cost-bar i.cost,
.boss-roi-cost-legend i.cost { background: #68766d; }
.boss-roi-cost-bar i.fee,
.boss-roi-cost-legend i.fee { background: #d29b58; }
.boss-roi-cost-bar i.ad,
.boss-roi-cost-legend i.ad { background: #7a95bd; }
.boss-roi-cost-bar i.profit,
.boss-roi-cost-legend i.profit { background: var(--boss-roi-brand); }
.boss-roi-cost-bar i.loss,
.boss-roi-cost-legend i.loss { background: var(--boss-roi-red); }

.boss-roi-cost-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 12px;
  margin-top: 11px;
}

.boss-roi-cost-legend div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--boss-roi-muted);
  font-size: 10px;
}

.boss-roi-cost-legend span {
  display: flex;
  align-items: center;
}

.boss-roi-cost-legend span i {
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
}

.boss-roi-list-price {
  padding-left: 13px;
  border-left: 1px solid var(--boss-roi-line);
}

.boss-roi-list-price > strong {
  display: block;
  margin: 5px 0 2px;
  color: var(--boss-roi-brand);
  font-size: 25px;
}

.boss-roi-list-price small {
  display: block;
  margin-top: 4px;
  color: #777e75;
  font-size: 10px;
  line-height: 1.55;
}

.boss-roi-targets {
  display: grid;
  grid-template-columns: 1.15fr repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid var(--boss-roi-line);
  border-radius: 13px;
  background: #fafbf8;
}

.boss-roi-targets > div {
  min-width: 0;
  padding: 14px 13px;
  border-left: 1px solid var(--boss-roi-line);
}

.boss-roi-targets > div:first-child {
  border-left: 0;
}

.boss-roi-targets .lead {
  color: #fff;
  background: linear-gradient(135deg, var(--boss-roi-brand), var(--boss-roi-brand-dark));
}

.boss-roi-targets .lead span,
.boss-roi-targets .lead small {
  color: rgba(255, 255, 255, .72);
}

.boss-roi-targets strong {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  color: #3f453f;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boss-roi-targets .lead strong {
  color: #fff;
}

.boss-roi-targets small {
  display: block;
  margin-top: 5px;
  font-size: 9px;
}

.boss-roi-decision {
  display: flex;
  gap: 11px;
  margin-top: 13px;
  padding: 14px;
  border: 1px solid #f0dfcf;
  border-radius: 12px;
  background: #fff9f3;
}

.boss-roi-decision > span {
  display: grid;
  flex: 0 0 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  color: #95551e;
  font-weight: 900;
  background: #ffe9d4;
}

.boss-roi-decision.success {
  border-color: #cfe5d7;
  background: #f3faf6;
}

.boss-roi-decision.success > span {
  color: var(--boss-roi-brand);
  background: var(--boss-roi-brand-soft);
}

.boss-roi-decision.danger {
  border-color: #efd1cc;
  background: #fff5f3;
}

.boss-roi-decision.danger > span {
  color: #963c32;
  background: #ffe0da;
}

.boss-roi-decision strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

.boss-roi-decision p {
  font-size: 11px;
  line-height: 1.65;
}

.boss-roi-footnote {
  margin-top: 14px;
  color: #7d837a;
  font-size: 10px;
  text-align: center;
}

@media (max-width: 1120px) {
  .boss-roi-layout {
    grid-template-columns: 1fr;
  }

  .boss-roi-input-panel {
    position: static;
  }
}

@media (max-width: 720px) {
  .boss-roi-calculator {
    padding: 15px;
    border-radius: 15px;
  }

  .boss-roi-header {
    align-items: flex-start;
  }

  .boss-roi-brand h1 {
    font-size: 18px;
  }

  .boss-roi-brand p {
    display: none;
  }

  .boss-roi-brand > span {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  .boss-roi-actions {
    flex-direction: column;
  }

  .boss-roi-actions .btn {
    min-height: 31px;
    padding: 6px 9px;
    font-size: 11px;
  }

  .boss-roi-input-panel,
  .boss-roi-results,
  .boss-roi-sku-picker {
    padding: 15px;
    border-radius: 15px;
  }

  .boss-roi-selected-sku {
    align-items: stretch;
    flex-direction: column;
  }

  .boss-roi-sku-costs {
    grid-template-columns: 1fr 1fr;
  }

  .boss-roi-selected-sku > em {
    align-self: flex-start;
  }

  .boss-roi-sku-results {
    grid-template-columns: 1fr;
  }

  .boss-roi-fields,
  .boss-roi-cost-box {
    grid-template-columns: 1fr;
  }

  .boss-roi-field-wide {
    grid-column: auto;
  }

  .boss-roi-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .boss-roi-strategies {
    grid-template-columns: 1fr;
  }

  .boss-roi-list-price {
    padding: 12px 0 0;
    border-top: 1px solid var(--boss-roi-line);
    border-left: 0;
  }

  .boss-roi-targets {
    grid-template-columns: 1fr 1fr;
  }

  .boss-roi-targets > div:nth-child(3) {
    border-left: 0;
  }

  .boss-roi-targets > div:nth-child(n + 3) {
    border-top: 1px solid var(--boss-roi-line);
  }

  .boss-roi-hero-top div > strong {
    font-size: 39px;
  }
}

@media (max-width: 430px) {
  .boss-roi-header {
    display: grid;
  }

  .boss-roi-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .boss-roi-platform-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .boss-roi-platform-options {
    grid-template-columns: 1fr 1fr;
  }

  .boss-roi-sku-head,
  .boss-roi-sku-search > div {
    align-items: stretch;
    flex-direction: column;
  }

  .boss-roi-sku-head > span {
    align-self: flex-start;
  }

  .boss-roi-sku-costs {
    grid-template-columns: 1fr;
  }

  .boss-roi-mode-block > div,
  .boss-roi-metrics,
  .boss-roi-targets {
    grid-template-columns: 1fr;
  }

  .boss-roi-targets > div,
  .boss-roi-targets > div:nth-child(3) {
    border-top: 1px solid var(--boss-roi-line);
    border-left: 0;
  }

  .boss-roi-targets > div:first-child {
    border-top: 0;
  }
}

/* AI config center */
.ai-config-page {
  display: grid;
  gap: 16px;
}

.ai-config-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ai-config-page-head h2 {
  margin: 0 0 6px;
  font-size: 26px;
}

.ai-config-page-head p,
.ai-config-breadcrumb {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.ai-config-breadcrumb {
  margin-top: 6px;
  font-weight: 700;
}

.ai-config-actions,
.section-actions,
.table-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-config-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ai-config-tab {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text);
  padding: 12px 22px;
  cursor: default;
  font-weight: 800;
  box-shadow: var(--shadow);
}

.ai-config-tab.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #ffffff;
}

.ai-config-summary-grid {
  grid-template-columns: repeat(5, minmax(160px, 1fr));
}

.ai-config-overview-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 1fr);
}

.ai-config-flow,
.ai-default-panel,
.ai-help-panel {
  min-height: 210px;
}

.ai-flow-steps,
.ai-default-grid,
.ai-help-grid {
  display: grid;
  gap: 10px;
}

.ai-flow-steps {
  grid-template-columns: repeat(5, minmax(120px, 1fr));
}

.ai-flow-step,
.ai-default-card,
.ai-help-card,
.ai-agent-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  padding: 14px;
}

.ai-flow-step span,
.ai-help-card span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
  border-radius: 6px;
  background: #e8f1ff;
  color: var(--primary);
  font-weight: 800;
}

.ai-flow-step strong,
.ai-help-card strong,
.ai-default-card strong {
  display: block;
  margin-bottom: 6px;
}

.ai-flow-step p,
.ai-help-card p,
.ai-default-card p,
.ai-agent-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.ai-default-grid,
.ai-help-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-default-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.ai-agent-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.ai-model-list .table-wrap {
  max-height: none;
}

.ai-default-select {
  min-width: 130px;
}

.btn-warning {
  border-color: rgba(166, 99, 0, 0.3);
  background: rgba(166, 99, 0, 0.08);
  color: var(--warning);
}

.btn-danger {
  border-color: #dc2626;
  background: #dc2626;
  color: #fff;
}

.warning-notice {
  border-color: rgba(166, 99, 0, 0.24);
  background: rgba(255, 247, 237, 0.9);
  color: var(--warning);
}

@media (max-width: 1180px) {
  .ai-config-summary-grid,
  .ai-flow-steps,
  .ai-config-overview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .ai-config-page-head,
  .ai-agent-card {
    flex-direction: column;
  }

  .ai-default-grid,
  .ai-help-grid {
    grid-template-columns: 1fr;
  }
}

/* AI management center interactive preview */
.ai-management-page {
  container-type: inline-size;
  min-width: 0;
  max-width: 100%;
  color: var(--text);
}

.ai-preview-notice {
  border-color: #c9def3;
  background: #edf6ff;
  color: #315b82;
}

.ai-management-page .ai-config-tab {
  cursor: pointer;
  text-decoration: none;
}

.ai-management-page .ai-config-tab:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.ai-management-page .ai-config-tab.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.ai-management-navigation .section-title {
  margin-bottom: 14px;
}

.ai-management-tab-content,
.ai-management-tab-stack,
.ai-management-tab-panel,
.ai-management-overview-grid,
.ai-management-overview-grid > *,
.ai-provider-card-grid,
.ai-agent-card-grid {
  min-width: 0;
}

.ai-management-tab-content {
  display: grid;
  gap: 16px;
}

.ai-management-primary-tabs {
  margin-bottom: 12px;
}

.ai-management-resource-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.ai-management-resource-links a {
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}

.ai-management-resource-links a::after {
  content: "·";
  margin-left: 8px;
  color: var(--line);
}

.ai-management-resource-links a:last-child::after {
  display: none;
}

.ai-management-resource-links a:hover,
.ai-management-resource-links a:focus-visible,
.ai-management-resource-links a.active {
  color: var(--primary);
  outline: none;
}

.ai-capability-map {
  display: grid;
  gap: 16px;
}

.ai-capability-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.ai-capability-summary-strip > div {
  display: grid;
  gap: 5px;
  padding: 18px 20px;
  border-right: 1px solid var(--line);
}

.ai-capability-summary-strip > div:last-child {
  border-right: 0;
}

.ai-capability-summary-strip span,
.ai-capability-summary-strip small,
.ai-health-metrics span {
  color: var(--muted);
  font-size: 12px;
}

.ai-capability-summary-strip strong {
  color: var(--text);
  font-size: 26px;
}

.ai-capability-summary-strip strong.danger,
.ai-health-metrics strong.danger {
  color: #c2410c;
}

.ai-capability-map-panel {
  overflow: hidden;
}

.ai-capability-card-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(155px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 3px;
}

.ai-capability-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 155px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.ai-capability-card.is-enabled {
  border-top: 3px solid #2f855a;
}

.ai-capability-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ai-capability-card-head > span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
}

.ai-capability-card h3 {
  min-height: 42px;
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.35;
}

.ai-capability-card dl {
  display: grid;
  gap: 9px;
  min-width: 0;
  margin: 0;
}

.ai-capability-card dl > div {
  display: grid;
  gap: 3px;
}

.ai-capability-card dt {
  color: var(--muted);
  font-size: 11px;
}

.ai-capability-card dd {
  overflow: hidden;
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-capability-card .btn {
  width: 100%;
  margin-top: auto;
}

.ai-capability-step-hint {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #d9e7f8;
  border-radius: 6px;
  background: #f8fbff;
}

.ai-capability-step-hint span {
  position: relative;
  padding: 0 14px;
  color: #496987;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.ai-capability-step-hint span + span::before {
  position: absolute;
  left: -4px;
  color: #9cb5cf;
  content: "›";
  font-size: 20px;
  line-height: 12px;
}

.ai-capability-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 16px;
}

.ai-recommendation-list {
  display: grid;
  gap: 0;
}

.ai-recommendation-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.ai-recommendation-list > div:last-child {
  border-bottom: 0;
}

.ai-recommendation-list strong {
  color: var(--text);
  font-size: 13px;
}

.ai-recommendation-list p {
  grid-column: 1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.ai-recommendation-list .btn {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.ai-health-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.ai-health-metrics > div {
  display: grid;
  gap: 6px;
  padding: 15px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.ai-health-metrics strong {
  color: var(--text);
  font-size: 21px;
}

.ai-management-tab-stack {
  display: grid;
  gap: 16px;
}

.ai-route-recommendation {
  display: grid;
  gap: 10px;
}

.ai-route-recommendation > p {
  margin: 0;
}

.ai-route-recommendation-candidates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ai-route-recommendation-candidates article {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.ai-route-recommendation-candidates p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.ai-management-page .ai-config-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}

.ai-management-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 16px;
}

.ai-management-flow-panel,
.ai-management-default-panel,
.ai-management-risk-panel,
.ai-management-channel-panel {
  min-height: 0;
}

.ai-management-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.ai-management-flow-step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 14px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ai-management-flow-step:hover,
.ai-management-flow-step:focus-visible,
.ai-management-provider-mini-list > a:hover,
.ai-management-provider-mini-list > a:focus-visible,
.ai-management-todo-list > a:hover,
.ai-management-todo-list > a:focus-visible,
.ai-default-card:hover,
.ai-default-card:focus-visible {
  border-color: var(--primary);
  box-shadow: var(--shadow);
  outline: none;
}

.ai-management-flow-step > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #e8f1ff;
  color: var(--primary);
  font-size: 13px;
  font-weight: 900;
}

.ai-management-flow-step strong,
.ai-management-flow-step p {
  display: block;
  overflow-wrap: anywhere;
}

.ai-management-flow-step p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.ai-management-provider-mini-list,
.ai-management-todo-list {
  display: grid;
  gap: 10px;
}

.ai-management-provider-mini-list > div,
.ai-management-provider-mini-list > a,
.ai-management-todo-list > a,
.ai-management-todo-list > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.ai-management-todo-list > div {
  grid-template-columns: auto minmax(0, 1fr);
}

.ai-management-provider-mini-list > a,
.ai-management-todo-list > a,
.ai-default-card {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ai-default-card {
  color: inherit;
  text-decoration: none;
}

.ai-management-action-hint {
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.ai-management-provider-mini-list strong,
.ai-management-todo-list strong {
  display: block;
  color: var(--text);
}

.ai-management-provider-mini-list p,
.ai-management-todo-list p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.ai-management-provider-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #e8f1ff;
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.ai-provider-card-grid,
.ai-agent-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ai-provider-card,
.ai-agent-governance-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.ai-provider-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.ai-provider-card-head > div:nth-child(2) {
  min-width: 0;
  margin-right: auto;
}

.ai-provider-card-head h3,
.ai-agent-governance-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
}

.ai-provider-card-head p,
.ai-agent-governance-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.ai-provider-balance-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.ai-provider-balance-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
}

.ai-provider-balance-summary strong {
  color: #1d4163;
  font-size: 15px;
}

.ai-provider-balance-summary strong.danger {
  color: var(--danger);
}

.ai-provider-card dd,
.ai-provider-card code {
  overflow-wrap: anywhere;
  white-space: normal;
}

.ai-provider-balance-row strong {
  margin-right: 6px;
  color: #1d4163;
  font-size: 17px;
}

.ai-provider-balance-message {
  min-height: 36px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.ai-provider-balance-action {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-left: 3px solid #d49a22;
  border-radius: 4px;
  background: #fffbeb;
  color: #75510a;
  font-size: 12px;
  line-height: 1.55;
}

.ai-provider-balance-code {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}

.ai-provider-balance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ai-provider-balance-grid article {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
}

.ai-provider-balance-grid article > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ai-provider-balance-grid b {
  display: block;
  margin: 14px 0 8px;
  color: #1d4163;
  font-size: 25px;
}

.ai-provider-balance-grid p,
.ai-provider-balance-grid small {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.ai-provider-balance-grid small {
  display: block;
  margin-top: 8px;
}

.ai-provider-risk-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
  color: var(--muted);
  font-size: 12px;
}

.ai-management-tab-panel {
  overflow: hidden;
}

.ai-management-tab-panel .table-wrap {
  max-width: 100%;
  overflow: auto;
}

.ai-model-list table {
  min-width: 860px;
  table-layout: fixed;
}

.ai-model-list th:nth-child(1) { width: 155px; }
.ai-model-list th:nth-child(2) { width: 90px; }
.ai-model-list th:nth-child(3) { width: 52px; }
.ai-model-list th:nth-child(4) { width: 180px; }
.ai-model-list th:nth-child(5) { width: 55px; }
.ai-model-list th:nth-child(6) { width: 75px; }
.ai-model-list th:nth-child(7) { width: 60px; }
.ai-model-list th:nth-child(8) { width: 190px; }

.ai-model-list td {
  overflow-wrap: anywhere;
}

.ai-table-primary {
  display: grid;
  gap: 4px;
  min-width: 150px;
}

.ai-table-primary small {
  color: #8491a2;
}

.ai-model-stage-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  overflow-x: auto;
}

.ai-model-stage-strip span {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  background: #eef3f8;
  color: #718096;
  font-size: 12px;
  font-weight: 800;
}

.ai-model-stage-strip span.active {
  background: #dceeff;
  color: #1d70ae;
}

.ai-agent-policy-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0;
}

.ai-agent-policy-tags span {
  padding: 6px 9px;
  border-radius: 999px;
  background: #edf4fa;
  color: #53677f;
  font-size: 11px;
  font-weight: 700;
}

.ai-budget-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ai-budget-summary-grid article {
  min-width: 0;
}

.ai-budget-summary-grid span,
.ai-budget-summary-grid p {
  color: #718096;
  font-size: 12px;
}

.ai-budget-summary-grid strong {
  display: block;
  margin: 8px 0;
  color: #1d4163;
  font-size: 25px;
}

.ai-budget-summary-grid p {
  margin: 0;
}

.ai-budget-progress {
  height: 10px;
  margin: 2px 0 18px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9eff5;
}

.ai-budget-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2c82c7;
}

.ai-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(15, 30, 48, 0.48);
  backdrop-filter: blur(5px);
}

.ai-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(860px, calc(100vw - 36px));
  max-height: min(860px, calc(100vh - 36px));
  overflow: hidden;
  border: 1px solid #d9e5f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(16, 35, 55, 0.28);
}

.ai-model-modal {
  width: min(960px, calc(100vw - 36px));
}

.ai-modal > header,
.ai-modal > footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
}

.ai-modal > header {
  border-bottom: 1px solid #e5edf4;
}

.ai-modal > footer {
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid #e5edf4;
  background: #fbfdff;
}

.ai-modal header h2 {
  margin: 5px 0 6px;
  color: #162a43;
  font-size: 25px;
}

.ai-modal header p {
  margin: 0;
  color: #708096;
  font-size: 13px;
}

.ai-modal-kicker {
  color: #2c76b0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.ai-modal-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid #d5e1ec;
  border-radius: 10px;
  background: #fff;
  color: #64758b;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.ai-modal-body {
  min-height: 0;
  padding: 22px 26px;
  overflow: auto;
}

.ai-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 18px;
}

.ai-form-grid label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.ai-form-grid label > span {
  color: #52657d;
  font-size: 12px;
  font-weight: 800;
}

.ai-form-grid input,
.ai-form-grid select,
.ai-form-grid textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #cfddea;
  border-radius: 9px;
  background: #fff;
  color: #23334a;
  font: inherit;
}

.ai-form-grid textarea {
  min-height: 76px;
  resize: vertical;
}

.ai-form-grid input:focus,
.ai-form-grid select:focus,
.ai-form-grid textarea:focus {
  outline: 3px solid rgba(41, 127, 198, 0.15);
  border-color: #3888c7;
}

.ai-form-grid .span-2 {
  grid-column: 1 / -1;
}

.ai-provider-selection-warning {
  padding: 13px 15px;
  border: 1px solid;
  border-radius: 10px;
}

.ai-provider-selection-warning strong {
  display: block;
  margin-bottom: 5px;
}

.ai-provider-selection-warning p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.ai-provider-selection-warning.low {
  border-color: #bfe5d1;
  background: #eefaf4;
  color: #22714b;
}

.ai-provider-selection-warning.medium {
  border-color: #eed6a9;
  background: #fff9ed;
  color: #8b5b0a;
}

.ai-provider-selection-warning.high {
  border-color: #efbcbc;
  background: #fff1f1;
  color: #a33c3c;
}

.ai-help-section {
  padding: 16px;
  border: 1px solid #dbe7f1;
  border-radius: 12px;
  background: #f8fbfe;
}

.ai-help-section + .ai-help-section {
  margin-top: 14px;
}

.ai-help-section h3 {
  margin: 0 0 12px;
  color: #1d3854;
  font-size: 16px;
}

.ai-help-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-help-checklist span {
  padding: 8px 10px;
  border: 1px solid #cce5d8;
  border-radius: 999px;
  background: #f0faf5;
  color: #2c7252;
  font-size: 12px;
  font-weight: 700;
}

.ai-help-risk-table {
  display: grid;
  gap: 8px;
}

.ai-help-risk-table > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #dce7f0;
  border-radius: 8px;
  background: #fff;
}

.ai-help-risk-table span {
  color: #65768c;
}

@container (max-width: 860px) {
  .ai-management-overview-grid,
  .ai-provider-balance-summary,
  .ai-provider-card-grid,
  .ai-provider-balance-grid,
  .ai-agent-card-grid,
  .ai-capability-bottom-grid,
  .ai-route-recommendation-candidates {
    grid-template-columns: 1fr;
  }

  .ai-capability-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-capability-summary-strip > div:nth-child(2) {
    border-right: 0;
  }

  .ai-capability-summary-strip > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .ai-management-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-budget-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (max-width: 560px) {
  .ai-management-page .ai-config-page-head {
    align-items: flex-start;
  }

  .ai-management-page .ai-config-actions {
    width: 100%;
  }

  .ai-management-page .ai-config-actions .btn {
    flex: 1 1 auto;
  }

  .ai-management-flow,
  .ai-budget-summary-grid,
  .ai-provider-balance-grid {
    grid-template-columns: 1fr;
  }

  .ai-capability-summary-strip,
  .ai-capability-step-hint {
    grid-template-columns: 1fr;
  }

  .ai-capability-summary-strip > div,
  .ai-capability-summary-strip > div:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .ai-capability-summary-strip > div:last-child {
    border-bottom: 0;
  }

  .ai-capability-step-hint {
    gap: 10px;
  }

  .ai-capability-step-hint span + span::before {
    display: none;
  }

  .ai-management-resource-links {
    gap: 7px 10px;
  }
}

@media (max-width: 700px) {
  .ai-modal-backdrop {
    align-items: end;
    padding: 0;
  }

  .ai-modal,
  .ai-model-modal {
    width: 100vw;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
  }

  .ai-modal > header,
  .ai-modal > footer,
  .ai-modal-body {
    padding-right: 18px;
    padding-left: 18px;
  }

  .ai-form-grid {
    grid-template-columns: 1fr;
  }

  .ai-form-grid .span-2 {
    grid-column: auto;
  }

  .ai-help-grid {
    grid-template-columns: 1fr;
  }
}

/* AI overview personalized card workspace */
.ai-overview-page {
  --ai-blue-950: #27415f;
  --ai-blue-800: #3f6795;
  --ai-blue-650: #4e8fd5;
  --ai-blue-500: #79b8e9;
  --ai-blue-100: #edf7ff;
  --ai-ink: #334155;
  --ai-muted: #718096;
  position: relative;
  display: grid;
  gap: 16px;
  color: var(--ai-ink);
}

.ai-overview-hero {
  display: flex;
  min-height: 184px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 26px 30px;
  overflow: hidden;
  border-radius: 22px;
  color: #263b52;
  background: linear-gradient(120deg, #4b8bc4 0%, #73addb 55%, #a9d2f1 100%);
  box-shadow: 0 18px 38px rgba(48, 101, 149, .24);
}

.ai-overview-eyebrow {
  display: block;
  margin-bottom: 9px;
  color: #3f607e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

.ai-overview-hero h1 {
  margin: 0;
  color: #263b52;
  font-size: clamp(34px, 4vw, 48px);
  letter-spacing: -.045em;
}

.ai-overview-hero p {
  margin: 10px 0 0;
  color: #365773;
  font-size: 17px;
  font-weight: 650;
}

.ai-overview-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.ai-overview-hero-tags span {
  padding: 7px 12px;
  border: 1px solid rgba(39, 78, 113, .2);
  border-radius: 999px;
  color: #35546f;
  font-size: 11px;
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(10px);
}

.ai-overview-hero-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.ai-overview-hero-actions .btn {
  min-height: 42px;
  border-color: rgba(43, 80, 115, .28);
  color: #334f69;
  background: rgba(255, 255, 255, .42);
  box-shadow: none;
}

.ai-overview-hero-actions .ai-overview-manage {
  border-color: #fff;
  color: #315f91;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 9px 22px rgba(55, 102, 147, .14);
}

.ai-overview-toast {
  position: fixed;
  z-index: 90;
  top: 20px;
  left: 50%;
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 16px;
  padding: 10px 14px 10px 16px;
  border: 1px solid #b8d8f2;
  border-radius: 12px;
  color: #425b73;
  font-size: 12px;
  background: rgba(248, 252, 255, .97);
  box-shadow: 0 12px 32px rgba(61, 100, 140, .2);
  transform: translateX(-50%);
}

.ai-overview-toast button {
  border: 0;
  color: #2367a6;
  font-weight: 750;
  cursor: pointer;
  background: transparent;
}

.ai-overview-guide {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #bbd7fa;
  border-radius: 11px;
  color: #42658f;
  font-size: 12px;
  background: linear-gradient(90deg, #f4f9ff, #eef6ff);
}

.ai-overview-guide strong {
  margin-left: auto;
  color: #1765ca;
  font-size: 11px;
}

.ai-overview-six-dots,
.ai-overview-drag-handle {
  display: grid;
  grid-template-columns: repeat(2, 3px);
  gap: 3px;
}

.ai-overview-six-dots i,
.ai-overview-drag-handle span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

.ai-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
  transition: opacity .18s ease;
}

.ai-overview-grid[aria-busy="true"] {
  opacity: .62;
  pointer-events: none;
}

.ai-overview-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 224px;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  padding: 25px 24px 20px;
  border: 1px solid #dce6f2;
  border-radius: 16px;
  outline: 0;
  cursor: grab;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  box-shadow: 0 9px 25px rgba(38, 73, 118, .07);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease;
}

.ai-overview-card:hover,
.ai-overview-card:focus-visible {
  border-color: #80b6f1;
  box-shadow: 0 16px 34px rgba(28, 101, 195, .14);
  transform: translateY(-2px);
}

.ai-overview-card.is-dragging {
  opacity: .46;
  cursor: grabbing;
  transform: rotate(.4deg) scale(.985);
}

.ai-overview-card.is-drag-target {
  border: 2px solid #1769d5;
  box-shadow: 0 18px 38px rgba(23, 105, 213, .2);
  transform: translateY(-4px);
}

.ai-overview-drag-handle,
.ai-overview-card-tools {
  position: absolute;
  top: 14px;
}

.ai-overview-drag-handle,
.ai-overview-card-tools button {
  display: grid;
  place-items: center;
  border: 0;
  color: #8aa1bc;
  cursor: inherit;
  background: transparent;
}

.ai-overview-drag-handle {
  left: 14px;
  width: 18px;
  height: 22px;
  padding: 2px;
}

.ai-overview-card-tools {
  right: 14px;
  display: flex;
  gap: 4px;
  opacity: .48;
  transition: opacity .16s ease;
}

.ai-overview-card:hover .ai-overview-card-tools,
.ai-overview-card:focus-within .ai-overview-card-tools {
  opacity: 1;
}

.ai-overview-card-tools button {
  min-width: 40px;
  min-height: 30px;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #77899d;
  font-size: 10px;
  cursor: pointer;
}

.ai-overview-card-tools button:hover,
.ai-overview-card-tools button:focus-visible {
  border-color: #2878d7;
  color: #1769d5;
  background: #edf6ff;
}

.ai-overview-card-tools button:disabled {
  opacity: .34;
  border-color: transparent;
  color: #94a3b8;
  cursor: not-allowed;
  background: transparent;
}

.ai-overview-card-tools .ai-overview-remove {
  color: #64748b;
}

.ai-overview-card-icon,
.ai-overview-drawer-icon {
  display: grid;
  color: #1769d5;
  place-items: center;
}

.ai-overview-card-icon {
  width: 48px;
  height: 48px;
  margin: 16px auto 11px;
  border-radius: 14px;
  background: linear-gradient(145deg, #f5faff, #e3f1ff);
  box-shadow: inset 0 0 0 1px rgba(23, 105, 213, .08);
}

.ai-overview-card-icon svg {
  width: 28px;
  height: 28px;
}

.ai-overview-card h2 {
  margin: 0;
  color: #142c4d;
  font-size: 18px;
  text-align: center;
}

.ai-overview-card > p {
  margin: 8px 0 17px;
  color: var(--ai-muted);
  font-size: 12px;
  line-height: 1.65;
  text-align: center;
}

.ai-overview-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 13px;
  border-top: 1px solid #edf2f8;
}

.ai-overview-status {
  padding: 5px 9px;
  border-radius: 999px;
  color: #2864a9;
  font-size: 10px;
  font-weight: 750;
  background: #eaf3ff;
}

.ai-overview-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ai-overview-status.is-audience {
  color: #7351a4;
  background: #f2ecfb;
}

.ai-overview-status.is-planned {
  color: #778397;
  background: #edf0f4;
}

.ai-overview-status.is-featured {
  color: #0759c6;
  background: #ddecff;
}

.ai-overview-status.is-open {
  color: #2c6c57;
  background: #e6f6ef;
}

.ai-overview-status.is-preview {
  color: #486d94;
  background: #eaf3ff;
}

.ai-overview-card-link {
  color: #1769d5;
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
}

.ai-overview-card-link.is-disabled {
  color: #9aa6b5;
}

.ai-capability-roadmap { display: grid; gap: 14px; padding: 18px 20px; background: linear-gradient(120deg, #f4faf3, #f6fbfe); border: 1px solid #cfe0cf; border-left: 4px solid #47856a; border-radius: 12px; }
.ai-capability-roadmap > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ai-capability-roadmap header span { display: block; color: #39775a; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.ai-capability-roadmap h2 { margin: 4px 0; color: var(--text); font-size: 18px; }
.ai-capability-roadmap header p { max-width: 820px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.ai-capability-roadmap > header > b { flex: 0 0 auto; padding: 5px 8px; color: #8d6214; background: #fff3d9; border: 1px solid #efd79c; border-radius: 999px; font-size: 11px; }
.ai-capability-roadmap-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ai-capability-roadmap-list article { padding: 12px; background: #fff; border: 1px solid #dfe9df; border-radius: 8px; }
.ai-capability-roadmap-list strong { color: var(--text); font-size: 14px; }
.ai-capability-roadmap-list p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.ai-capability-roadmap footer { padding: 10px 12px; color: #46654d; background: #edf7eb; border-radius: 7px; font-size: 12px; line-height: 1.6; }
.ai-efficiency-map-page { display: grid; gap: 16px; margin-top: 16px; }
.ai-efficiency-map-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; color: #fff; background: linear-gradient(120deg, #174c68, #287d69); border-radius: 13px; }
.ai-efficiency-map-hero span { color: #bee9dd; font-size: 11px; font-weight: 800; letter-spacing: .1em; }.ai-efficiency-map-hero h2 { margin: 7px 0; color: #fff; font-size: 23px; }.ai-efficiency-map-hero p { max-width: 820px; margin: 0; color: #e2f2ee; font-size: 13px; line-height: 1.65; }.ai-efficiency-map-hero > b { padding: 7px 10px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; font-size: 12px; }
.ai-efficiency-map-flow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; padding: 12px; color: #41674e; background: #f1f8f0; border: 1px solid #d4e6d1; border-radius: 9px; font-size: 12px; font-weight: 700; }.ai-efficiency-map-flow i { color: #548a62; font-style: normal; font-size: 17px; }
.ai-efficiency-group { padding: 17px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid #3b8699; border-radius: 10px; }.ai-efficiency-group:nth-of-type(4) { border-left-color: #be8b3c; }.ai-efficiency-group:nth-of-type(5) { border-left-color: #6b9e50; }.ai-efficiency-group header span { color: #4d7d91; font-size: 11px; font-weight: 800; }.ai-efficiency-group h3 { margin: 4px 0 12px; color: var(--text); font-size: 18px; }.ai-efficiency-group > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }.ai-efficiency-group article { padding: 12px; background: #fbfcfb; border: 1px solid #e1eae0; border-radius: 8px; }.ai-efficiency-group article > b { color: #8f6618; font-size: 10px; }.ai-efficiency-group h4 { margin: 6px 0; color: var(--text); font-size: 14px; }.ai-efficiency-group p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.ai-efficiency-map-boundary { padding: 12px 14px; color: #506a55; background: #f8fbf7; border: 1px solid #dfe9dc; border-radius: 8px; font-size: 12px; line-height: 1.65; }.ai-efficiency-map-boundary strong { color: var(--text); }

.ai-overview-empty {
  display: grid;
  min-height: 270px;
  grid-column: 1 / -1;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed #b8cce3;
  border-radius: 16px;
  color: var(--ai-muted);
  text-align: center;
  background: #f9fcff;
}

.ai-overview-empty strong {
  color: var(--ai-ink);
  font-size: 18px;
}

.ai-overview-empty p {
  margin: 0 0 8px;
}

.ai-overview-boundary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 11px;
  color: #687a90;
  font-size: 10px;
  background: #f1f5fa;
}

.ai-overview-boundary span + span::before {
  margin-right: 8px;
  color: #aac0d7;
  content: "·";
}

.ai-overview-drawer-backdrop {
  position: fixed;
  z-index: 79;
  inset: 0;
  background: rgba(8, 28, 57, .2);
  backdrop-filter: blur(1px);
}

.ai-overview-drawer {
  position: fixed;
  z-index: 80;
  top: 0;
  right: 0;
  display: grid;
  width: min(430px, 94vw);
  height: 100vh;
  grid-template-rows: auto 1fr auto;
  padding: 24px;
  background: #fff;
  box-shadow: -22px 0 55px rgba(17, 47, 84, .2);
  animation: ai-overview-drawer-in .2s ease-out;
}

@keyframes ai-overview-drawer-in {
  from { transform: translateX(24px); opacity: .5; }
  to { transform: translateX(0); opacity: 1; }
}

.ai-overview-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e7edf5;
}

.ai-overview-drawer-head h2 {
  margin: 0;
  color: #142b4b;
  font-size: 23px;
}

.ai-overview-drawer-head p {
  margin: 6px 0 0;
  color: var(--ai-muted);
  font-size: 12px;
}

.ai-overview-drawer-head > button {
  border: 0;
  color: #687a91;
  font-size: 28px;
  cursor: pointer;
  background: transparent;
}

.ai-overview-drawer-list {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px 0;
  overflow-y: auto;
}

.ai-overview-drawer-list > article {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dfe8f3;
  border-radius: 13px;
  background: #fff;
}

.ai-overview-drawer-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--ai-blue-100);
}

.ai-overview-drawer-icon svg {
  width: 24px;
  height: 24px;
}

.ai-overview-drawer-list strong {
  color: #17304f;
  font-size: 13px;
}

.ai-overview-drawer-list p {
  margin: 4px 0 0;
  color: var(--ai-muted);
  font-size: 10px;
  line-height: 1.45;
}

.ai-overview-drawer-list .btn {
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 11px;
  background: #1769d5;
}

.ai-overview-drawer-empty {
  padding: 34px 18px;
  border: 1px dashed #c4d5e8;
  border-radius: 13px;
  text-align: center;
  background: #f8fbff;
}

.ai-overview-drawer-done {
  width: 100%;
  min-height: 46px;
  background: linear-gradient(90deg, #1665d2, #1783eb);
}

@media (max-width: 900px) {
  .ai-capability-roadmap-list, .ai-efficiency-group > div { grid-template-columns: 1fr; }
  .ai-capability-roadmap > header, .ai-efficiency-map-hero { align-items: stretch; flex-direction: column; }
  .ai-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .ai-overview-hero {
    min-height: 0;
    flex-direction: column;
    padding: 24px;
  }

  .ai-overview-hero-actions {
    width: 100%;
  }

  .ai-overview-hero-actions .btn {
    flex: 1;
  }

  .ai-overview-grid {
    grid-template-columns: 1fr;
  }

  .ai-overview-guide strong {
    display: none;
  }

  .ai-overview-toast {
    right: 12px;
    left: 12px;
    transform: none;
  }

  .ai-overview-card-tools button:not(.ai-overview-remove) {
    display: none;
  }

  .ai-overview-card-tools {
    opacity: 1;
  }
}
/* BENCHMARK-AI-WORKBENCH-01 reusable workbench panels */
.benchmark-panel {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  padding: 18px;
  margin: 14px 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.benchmark-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.benchmark-panel-head h2 {
  margin: 0 0 6px;
  font-size: 18px;
  color: #122033;
}

.benchmark-panel-head p,
.benchmark-owner,
.benchmark-empty {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

.benchmark-eyebrow {
  margin-bottom: 4px !important;
  color: #2563eb !important;
  font-weight: 700;
}

.benchmark-owner {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 160px;
}

.benchmark-mock-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.benchmark-metric-grid,
.team-efficiency-grid,
.ai-efficiency-grid,
.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.benchmark-metric,
.team-efficiency-grid article,
.ai-efficiency-grid article,
.quick-action-card {
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #f8fafc;
  padding: 14px;
  min-height: 88px;
}

.benchmark-metric span,
.team-efficiency-grid span,
.ai-efficiency-grid span {
  display: block;
  color: #64748b;
  font-size: 12px;
  margin-bottom: 6px;
}

.benchmark-metric strong,
.team-efficiency-grid strong,
.ai-efficiency-grid strong {
  display: block;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.2;
}

.benchmark-metric small,
.team-efficiency-grid small,
.ai-efficiency-grid small,
.project-progress-item small,
.recent-activity-list small {
  display: block;
  color: #64748b;
  margin-top: 6px;
}

.benchmark-tone-success { border-color: #bbf7d0 !important; background: #f0fdf4 !important; }
.benchmark-tone-warning { border-color: #fed7aa !important; background: #fff7ed !important; }
.benchmark-tone-danger { border-color: #fecaca !important; background: #fff1f2 !important; }
.benchmark-tone-info { border-color: #bfdbfe !important; background: #eff6ff !important; }
.benchmark-tone-mock { border-color: #ddd6fe !important; background: #f5f3ff !important; }
.benchmark-tone-neutral { border-color: #e2e8f0 !important; background: #f8fafc !important; }

.project-progress-list,
.recent-activity-list {
  display: grid;
  gap: 10px;
}

.project-progress-item,
.recent-activity-list article {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(160px, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  background: #fbfdff;
}

.project-progress-track,
.task-status-row div {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.project-progress-track span,
.task-status-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2563eb;
}

.task-status-bars {
  display: grid;
  gap: 10px;
}

.task-status-row {
  display: grid;
  grid-template-columns: 88px 1fr 44px;
  gap: 12px;
  align-items: center;
  color: #334155;
  font-size: 13px;
}

.task-status-row.benchmark-tone-success i { background: #16a34a; }
.task-status-row.benchmark-tone-warning i { background: #f97316; }
.task-status-row.benchmark-tone-danger i { background: #dc2626; }
.task-status-row.benchmark-tone-info i { background: #2563eb; }

.quick-action-card {
  min-height: auto;
  color: #1d4ed8;
  text-decoration: none;
  font-weight: 700;
}

.quick-action-card:hover {
  border-color: #93c5fd;
  background: #eff6ff;
}

.recent-activity-list article {
  grid-template-columns: 64px 1fr auto;
}

.recent-activity-list time,
.recent-activity-list span {
  color: #64748b;
  font-size: 12px;
}

.floating-task-monitor {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: min(280px, calc(100vw - 48px));
  z-index: 35;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
}

.floating-task-monitor > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.floating-task-monitor span {
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
}

.floating-task-monitor p,
.floating-task-monitor li {
  color: #475569;
  font-size: 12px;
}

.floating-task-monitor ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

@media (max-width: 900px) {
  .benchmark-panel-head,
  .project-progress-item,
  .recent-activity-list article {
    grid-template-columns: 1fr;
    display: grid;
  }

  .benchmark-owner {
    justify-items: start;
  }

  .floating-task-monitor {
    position: static;
    width: auto;
    margin: 14px 0;
    box-shadow: none;
  }
}

.access-control-page {
  display: grid;
  gap: 18px;
}

.access-control-head,
.access-control-tabs,
.access-control-actions,
.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.access-control-head,
.section-title { justify-content: space-between; }
.access-control-head h2,
.access-control-head p,
.access-control-form h3 { margin: 0; }
.access-control-head p { color: var(--muted); margin-top: 6px; }

.read-only-badge,
.protected-badge,
.access-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.read-only-badge { background: #eff6ff; color: #1d4ed8; }
.protected-badge { background: #fef3c7; color: #92400e; }
.access-status.active { background: #dcfce7; color: #166534; }
.access-status.disabled { background: #fee2e2; color: #991b1b; }

.access-control-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px;
}
.access-control-summary article,
.access-control-form,
.access-control-account,
.access-control-role {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 16px;
}
.access-control-summary span { display: block; color: var(--muted); font-size: 13px; }
.access-control-summary strong { display: block; margin-top: 6px; font-size: 28px; }

.access-control-tabs { border-bottom: 1px solid var(--line); }
.access-control-tabs button { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); padding: 10px 14px; cursor: pointer; }
.access-control-tabs button.active { border-bottom-color: var(--primary); color: var(--primary); font-weight: 700; }
.access-control-panel { display: grid; gap: 16px; }
.access-control-account-list,
.access-control-role-list { display: grid; gap: 12px; }
.access-control-roles { grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr); align-items: start; }
.access-control-roles > .access-control-role-list { min-width: 0; }

.access-control-form { display: grid; gap: 12px; }
.access-control-form.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.access-control-form.compact > .section-title,
.access-control-form.compact > .permission-groups,
.access-control-form.compact > .access-control-actions { grid-column: 1 / -1; }
.access-control-form label { display: grid; gap: 6px; color: #334155; font-size: 13px; font-weight: 700; }
.access-control-form input:not([type="checkbox"]),
.access-control-form select { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 8px 10px; }
.access-control-form select[multiple] { min-height: 88px; }
.access-control-form .check-line { display: flex; align-items: center; gap: 7px; font-weight: 500; }
.access-control-form .check-line small { color: var(--muted); font-weight: 400; }
.permission-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.permission-groups fieldset { min-width: 0; margin: 0; border: 1px solid #e2e8f0; border-radius: 6px; padding: 10px; }
.permission-groups legend { color: #475569; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.permission-groups .check-line { margin: 6px 0; overflow-wrap: anywhere; }
.access-control-account p,
.access-control-role p { color: var(--muted); overflow-wrap: anywhere; }
.login-accounts-page { display: grid; gap: 18px; }
.login-accounts-head h2,
.login-accounts-head p,
.login-account-card h3,
.login-account-card p,
.login-account-dialog h2,
.login-account-dialog p { margin: 0; }
.login-accounts-head p,
.login-account-card p { color: var(--muted); }
.login-account-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.login-account-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 18px; }
.login-account-card > div { display: grid; gap: 8px; }
.login-account-dialog { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(15, 23, 42, .48); }
.login-account-dialog form { width: min(520px, 100%); display: grid; gap: 14px; border-radius: 10px; background: #fff; padding: 24px; box-shadow: 0 18px 48px rgba(15, 23, 42, .24); }
.login-account-dialog label { display: grid; gap: 7px; }
.login-account-dialog input { width: 100%; box-sizing: border-box; }
.login-account-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.field-help { color: var(--muted); font-size: 13px; }
.protected-account-notice { margin: 12px 0 0; color: var(--muted); }
.access-control-confirm-dialog { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, 0.45); }
.access-control-confirm-dialog > div { width: min(480px, calc(100vw - 32px)); display: grid; gap: 14px; border-radius: 12px; background: #fff; padding: 24px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24); }
.access-control-confirm-dialog h2,
.access-control-confirm-dialog p { margin: 0; }
.access-control-confirm-dialog p { color: var(--muted); }
.warning-notice { border-color: #fbbf24; background: #fffbeb; color: #92400e; }

@media (max-width: 900px) {
  .login-account-grid,
  .access-control-summary,
  .access-control-roles,
  .access-control-form.compact,
  .permission-groups { grid-template-columns: 1fr; }
  .access-control-roles > .access-control-role-list { width: 100%; }
  .access-control-form.compact > .section-title,
  .access-control-form.compact > .permission-groups,
  .access-control-form.compact > .access-control-actions { grid-column: auto; }
  .access-control-actions { align-items: stretch; flex-direction: column; }
  .access-control-actions .btn { width: 100%; }
}

/* 角色与权限：以角色选择、业务说明和技术信息的阅读层级为主。 */
.access-role-workspace {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.access-control-roles > .access-role-workspace {
  grid-column: 1 / -1;
}

.access-role-sidebar,
.access-role-detail {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.access-role-sidebar {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.access-role-sidebar > .section-title {
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0;
}

.access-role-sidebar > .section-title > div {
  min-width: 0;
}

.access-role-sidebar > .section-title .btn {
  width: 100%;
}

.access-role-sidebar .section-title h3,
.access-role-detail h3,
.access-role-detail h4 {
  margin: 0;
}

.access-role-sidebar .section-title p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.access-role-sidebar .access-control-role-list {
  gap: 8px;
}

.access-role-choice {
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  padding: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.access-role-choice:hover {
  border-color: #c7d6ea;
  background: #f8fafc;
}

.access-role-choice:focus-visible {
  outline: 3px solid rgba(35, 103, 201, 0.28);
  outline-offset: 2px;
}

.access-role-choice.active {
  border-color: #93b4ef;
  background: #eaf2ff;
  box-shadow: inset 3px 0 0 var(--primary);
}

.access-role-choice strong,
.access-role-choice small {
  display: block;
  overflow-wrap: anywhere;
}

.access-role-choice strong { font-size: 14px; }
.access-role-choice small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.access-role-detail { padding: 18px; }

.access-role-detail > .access-control-form,
.access-role-detail > .access-control-role {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.access-role-detail .access-control-form.compact > .access-role-detail-head,
.access-role-detail .access-control-form.compact > .access-role-permissions,
.access-role-detail .access-control-form.compact > .access-technical-details,
.access-role-detail .access-control-form.compact > .access-control-actions {
  grid-column: 1 / -1;
}

.access-role-detail .access-role-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.access-role-detail .access-role-detail-head h3 { font-size: 20px; }
.access-role-detail .access-role-detail-head p {
  margin: 6px 0 0;
  max-width: 720px;
  line-height: 1.6;
}

.access-role-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.access-role-badges > span:not(.protected-badge):not(.access-status) {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
}

.access-role-permissions { min-width: 0; }
.access-role-permissions > h4 { margin: 18px 0 8px; }

.permission-groups {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.access-permission-group {
  min-width: 0;
  margin: 0;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
}

.access-permission-group > legend {
  float: left;
  width: 100%;
  margin: 0;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
  padding: 11px 12px;
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.access-permission-group > legend small {
  color: var(--muted);
  font-weight: 400;
}

.access-permission-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  clear: both;
  margin: 0;
  border-bottom: 1px solid #eef2f7;
  padding: 11px 12px;
  color: var(--text);
  cursor: pointer;
}

.access-permission-item:last-child { border-bottom: 0; }
.access-permission-item:has(input:disabled) {
  cursor: default;
  background: #fcfdff;
}

.access-permission-item input { margin: 3px 0 0; }
.access-permission-item strong,
.access-permission-item small {
  display: block;
  overflow-wrap: anywhere;
}

.access-permission-item small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.access-technical-details {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  color: var(--muted);
}

.access-technical-details summary {
  color: #475569;
  cursor: pointer;
  font-weight: 700;
}

.access-technical-details dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 12px;
  margin: 12px 0;
}

.access-technical-details dt { font-size: 13px; }
.access-technical-details dd { min-width: 0; margin: 0; }
.access-technical-details ul { margin: 0; padding-left: 20px; }
.access-technical-details li { margin-top: 6px; overflow-wrap: anywhere; }
.access-technical-details code {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.access-role-detail .access-control-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 84px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
}

.access-role-detail .access-control-actions {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.access-control-tabs button:disabled,
.access-control-actions .btn:disabled,
.access-control-confirm-dialog .btn:disabled {
  cursor: wait;
  opacity: 0.7;
}

.access-control-confirm-dialog .access-control-actions {
  justify-content: flex-end;
}

[data-access-control-notice].success-notice {
  border-color: rgba(22, 128, 93, 0.3);
  background: rgba(22, 128, 93, 0.08);
  color: var(--success);
}

@media (max-width: 1280px) {
  .access-role-workspace { grid-template-columns: 1fr; }
  .access-role-sidebar { max-height: 320px; overflow: auto; }
  .access-role-detail { padding: 14px; }
  .permission-groups { grid-template-columns: 1fr; }
  .access-role-detail .access-control-form.compact { grid-template-columns: 1fr; }
  .access-role-detail .access-control-actions { flex-wrap: wrap; }
  .access-role-detail .access-control-actions .btn { min-width: 0; flex: 1 1 160px; }
}

@media (max-width: 600px) {
  .access-role-sidebar,
  .access-role-detail { padding: 12px; }
  .access-role-detail .access-role-detail-head h3 { font-size: 18px; }
  .access-role-badges { gap: 5px; }
  .access-technical-details dl { grid-template-columns: 1fr; gap: 3px; }
  .access-technical-details dd { margin-bottom: 7px; }
  .access-role-detail .access-control-form.compact { grid-template-columns: 1fr; }
  .access-role-detail .access-control-actions { align-items: stretch; flex-direction: column; }
  .access-role-detail .access-control-actions .btn { width: 100%; min-height: 44px; }
  .access-control-confirm-dialog > div { padding: 18px; }
}
.system-admin-permissions-page { display: grid; gap: 16px; }
.system-admin-permissions-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.system-admin-permissions-head h2 { margin: 0 0 6px; }
.system-admin-permissions-head p { margin: 0; color: #64748b; }
.system-admin-permissions-head select { display: block; min-width: 240px; margin-top: 6px; }
.permission-kind-tabs { display: flex; gap: 8px; border-bottom: 1px solid #dbe3ef; }
.permission-kind-tabs button { border: 0; background: transparent; padding: 10px 16px; color: #475569; cursor: pointer; }
.permission-kind-tabs button.active { color: #1d4ed8; font-weight: 700; border-bottom: 2px solid #2563eb; }
.permission-tree-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.permission-tree-toolbar input { display: block; min-width: 280px; margin-top: 6px; }
.permission-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.permission-tree ul { list-style: none; margin: 8px 0 0 20px; padding-left: 14px; border-left: 1px solid #dbe3ef; }
.permission-tree-node { border: 1px solid #e2e8f0; border-radius: 8px; padding: 9px 11px; background: #fff; }
.permission-tree-node .permission-tree-node { border: 0; border-radius: 0; padding: 6px 0; }
.permission-tree-node label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.permission-tree-node small { display: block; margin-top: 3px; color: #64748b; }
.permission-tree-node .permission-lock { color: #92400e; }
.permission-tree-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

.governed-releases-page { display: grid; gap: 16px; }
.governed-page-head, .governed-panel, .developer-identity-form {
  background: #fff; border: 1px solid #dfe5ef; border-radius: 10px; padding: 18px;
}
.governed-page-head h2, .governed-panel h2, .developer-identity-form h3 { margin: 0 0 6px; }
.governed-page-head p, .governed-panel > p, .developer-identity-form header p { margin: 0; color: #667085; }
.governed-panel { display: grid; gap: 14px; }
.developer-identity-form { display: grid; gap: 12px; }
.developer-identity-form header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.governed-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.governed-form-grid label, [data-governed-candidate-form] label, .governed-approval-form label { display: grid; gap: 6px; color: #344054; }
.governed-form-grid input, [data-governed-candidate-form] input, [data-governed-candidate-form] textarea, .governed-approval-form input {
  width: 100%; box-sizing: border-box; border: 1px solid #cfd7e6; border-radius: 7px; padding: 10px 12px; font: inherit;
}
[data-governed-candidate-form], .governed-approval-form { display: grid; gap: 12px; }
.governed-release-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.governed-release-list { display: grid; gap: 8px; }
.governed-release-row { border: 1px solid #dfe5ef; border-radius: 9px; background: #fff; overflow: hidden; }
.governed-release-summary {
  display: grid; grid-template-columns: minmax(260px, 1fr) minmax(150px, auto) minmax(86px, auto) auto;
  align-items: center; gap: 16px; padding: 13px 14px;
}
.governed-release-summary > div { display: grid; gap: 4px; min-width: 0; }
.governed-release-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.governed-release-summary small, .governed-release-summary > span:not(.status-pill) { color: #667085; }
.governed-release-row > details { border-top: 1px solid #edf0f5; }
.governed-release-row > details > summary { padding: 9px 14px; color: #2459b3; cursor: pointer; }
.governed-release-detail { display: grid; gap: 10px; padding: 2px 14px 14px; }
.governed-release-detail p { margin: 0; }
.governed-release-detail ul { margin: 10px 0 0; padding-left: 20px; }
.governed-release-detail code { overflow-wrap: anywhere; }
.governed-failure-detail {
  display: grid; gap: 4px; padding: 10px 12px; border: 1px solid #fecdca; border-radius: 8px; background: #fef3f2;
}
.governed-failure-detail strong { color: #b42318; }
.governed-failure-detail small { color: #667085; }
.governed-attempt-list { display: grid; gap: 8px; list-style: none; padding: 8px 0 0; margin: 0; }
.governed-attempt-list li {
  display: grid; grid-template-columns: auto auto minmax(180px, 1fr) auto; align-items: center; gap: 8px;
}
.governed-attempt-list small { color: #667085; }
.governed-history > summary { cursor: pointer; color: #475467; font-weight: 700; }
.governed-workspace-summary code { color: #175cd3; font-weight: 600; }
[data-change-package-form] { display: grid; gap: 12px; }
[data-change-package-form] > label { display: grid; gap: 7px; color: #344054; }
[data-change-package-form] input[type="file"] { padding: 10px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; }
.governed-package-preview { padding: 12px; border: 1px solid #b2ddff; border-radius: 8px; background: #eff8ff; }
.governed-package-preview p { margin: 4px 0; color: #475467; }
.governed-package-preview ul { margin: 8px 0 0; padding-left: 20px; max-height: 220px; overflow: auto; }
.status-pill { display: inline-flex; border-radius: 999px; background: #eef4ff; color: #2459b3; padding: 4px 10px; font-size: 12px; white-space: nowrap; }
.form-hint { color: #667085; font-size: 13px; }
@media (max-width: 900px) { .governed-form-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .governed-release-summary { grid-template-columns: minmax(0, 1fr) auto; }
  .governed-release-summary > span:not(.status-pill) { display: none; }
  .governed-attempt-list li { grid-template-columns: auto 1fr; }
}

/* 共同开发与发布：卡片化前端预览 */
.governed-releases-page {
  gap: 18px;
  color: #172033;
}

.governed-page-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 104px;
  padding: 24px 26px;
  border-color: #b8d3ff;
  border-radius: 14px;
  background: #eef5ff;
}

.governed-page-hero h2 {
  margin: 4px 0 8px;
  font-size: 24px;
  line-height: 1.25;
}

.governed-page-hero p { max-width: 760px; }
.governed-card-kicker,
.governed-step-kicker {
  margin: 0;
  color: #159ab3;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

.governed-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.governed-create-trigger { min-height: 42px; padding-inline: 18px; }

.governed-task-panel {
  display: block;
  overflow: hidden;
  padding: 0;
  border-radius: 14px;
  background: #f7f9fc;
}

.governed-filter-input,
.governed-step-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.governed-task-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 60px;
  padding: 0 18px;
  border-bottom: 1px solid #dfe6f1;
  background: #fff;
  overflow-x: auto;
}

.governed-task-tabs label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #3f4a5f;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.governed-task-tabs label span {
  color: #667085;
  font-size: 12px;
  font-weight: 500;
}

#governed-filter-mine:checked ~ .governed-task-tabs label[for="governed-filter-mine"],
#governed-filter-all:checked ~ .governed-task-tabs label[for="governed-filter-all"],
#governed-filter-completed:checked ~ .governed-task-tabs label[for="governed-filter-completed"] {
  border-color: #8cb7ff;
  background: #edf4ff;
  color: #1f5fcc;
}

.governed-task-board {
  display: grid;
  gap: 18px;
  padding: 20px;
}

.governed-board-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 2px 2px 0;
}

.governed-board-head h2 { margin: 4px 0 6px; font-size: 20px; }
.governed-board-head p { margin: 0; color: #667085; }
.governed-board-counts { display: flex; gap: 8px; flex-wrap: wrap; }
.governed-board-counts span {
  padding: 8px 11px;
  border: 1px solid #d8e2f0;
  border-radius: 9px;
  background: #fff;
  color: #667085;
  font-size: 12px;
}
.governed-board-counts strong { color: #1d4ed8; font-size: 15px; }

.governed-release-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
  align-items: start;
  gap: 14px;
}

.governed-release-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #d5deeb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(29, 48, 75, .04);
  overflow: visible;
}

.governed-release-card[data-needs-me="true"] {
  border-color: #92b9fa;
  box-shadow: 0 7px 20px rgba(37, 99, 235, .09);
}

.governed-release-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.governed-release-card-head h3 {
  margin: 5px 0 0;
  font-size: 18px;
  line-height: 1.35;
}

.status-pill.status-success { background: #e8f7ef; color: #087a4d; }
.status-pill.status-attention { background: #fff3db; color: #9a5b00; }
.status-pill.status-danger { background: #feeceb; color: #b42318; }
.status-pill.status-progress { background: #eaf2ff; color: #1f5fcc; }

.governed-card-summary {
  min-height: 42px;
  margin: 0;
  color: #4f5d73;
  line-height: 1.6;
}

.governed-card-tags,
.governed-card-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.governed-card-tags > span,
.governed-evidence {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 9px;
  border: 1px solid #d8e2ef;
  border-radius: 999px;
  background: #f8fafc;
  color: #536176;
  font-size: 12px;
}

.governed-evidence.is-success { border-color: #b7e4cf; background: #effaf4; color: #087a4d; }
.governed-evidence.is-attention { border-color: #f2d7a4; background: #fff8e8; color: #8a5705; }
.governed-evidence.is-danger { border-color: #f5c2bd; background: #fff1f0; color: #b42318; }
.governed-evidence.is-muted { color: #7a8699; }
.governed-card-tags .risk-high,
.governed-card-tags .risk-critical { border-color: #f0b8b2; background: #fff1f0; color: #b42318; }

.governed-review-note {
  padding: 11px 12px;
  border-left: 3px solid #5a8fe6;
  border-radius: 7px;
  background: #f2f6fd;
}
.governed-review-note strong { color: #315d9e; font-size: 12px; }
.governed-review-note p { margin: 4px 0 0; color: #4f5d73; font-size: 13px; line-height: 1.5; }

.governed-release-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.governed-release-progress li {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  padding: 8px 4px;
  border: 1px solid #e1e7f0;
  border-radius: 8px;
  background: #fafbfd;
  color: #7a8699;
  text-align: center;
}

.governed-release-progress li span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #e8edf4;
  font-size: 11px;
  font-weight: 800;
}

.governed-release-progress li strong { font-size: 11px; white-space: nowrap; }
.governed-release-progress li.is-done { border-color: #b7e4cf; background: #f2fbf6; color: #087a4d; }
.governed-release-progress li.is-current { border-color: #8eb8ff; background: #eef5ff; color: #1f5fcc; }
.governed-release-progress li.is-done span { background: #d5f2e3; }
.governed-release-progress li.is-current span { background: #d9e8ff; }

.governed-card-people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.governed-card-people > div {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: #f7f9fc;
}

.governed-card-people dt { color: #7a8699; font-size: 11px; }
.governed-card-people dd { margin: 4px 0 0; overflow: hidden; color: #344054; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.governed-card-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 66px;
  padding: 12px;
  border: 1px solid #dbe5f3;
  border-radius: 9px;
  background: #f7faff;
}

.governed-card-next p { margin: 4px 0 0; color: #667085; font-size: 12px; line-height: 1.45; }
.governed-card-next .governed-release-actions { justify-content: flex-end; flex: 0 0 auto; }
.governed-approval-form {
  padding: 12px;
  border: 1px solid #dbe5f3;
  border-radius: 9px;
  background: #fff;
}

.governed-technical-details { border-top: 1px solid #e5eaf1; padding-top: 11px; }
.governed-technical-details > summary { color: #315d9e; font-size: 13px; font-weight: 700; cursor: pointer; }
.governed-technical-details[open] > summary { margin-bottom: 10px; }
.governed-release-card > details { border-top: 1px solid #e5eaf1; }
.governed-release-card > details > summary { padding: 0; }
.governed-release-detail { padding: 0; }

#governed-filter-mine:checked ~ .governed-task-board .governed-release-card:not([data-needs-me="true"]),
#governed-filter-completed:checked ~ .governed-task-board .governed-release-card:not([data-completed="true"]) {
  display: none;
}

.governed-filter-empty { display: none; justify-items: center; gap: 5px; padding: 34px; color: #667085; text-align: center; }
.governed-filter-empty p { margin: 0; }
#governed-filter-mine:checked ~ .governed-task-board .governed-release-list:not(:has(.governed-release-card[data-needs-me="true"])) + .governed-filter-empty,
#governed-filter-completed:checked ~ .governed-task-board .governed-release-list:not(:has(.governed-release-card[data-completed="true"])) + .governed-filter-empty {
  display: grid;
}

.governed-empty-state { display: grid; justify-items: center; gap: 5px; grid-column: 1 / -1; padding: 34px; color: #667085; text-align: center; }
.governed-empty-state p { margin: 0; }

.governed-advanced-settings {
  padding: 14px 18px;
  border: 1px solid #dfe5ef;
  border-radius: 12px;
  background: #fff;
}
.governed-advanced-settings > summary { font-size: 14px; }
.governed-advanced-settings > p { color: #667085; }
.governed-advanced-settings[open] { display: grid; gap: 14px; }

.governed-identity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}

.development-change-center {
  display: grid;
  gap: 20px;
}

.development-change-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.development-change-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  color: inherit;
  text-decoration: none;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #dfe4ea);
  border-radius: 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.development-change-card:hover,
.development-change-card:focus-visible {
  border-color: var(--primary, #246bfd);
  box-shadow: 0 12px 28px rgb(20 38 70 / 10%);
  transform: translateY(-2px);
  outline: none;
}

.development-change-card header,
.development-change-card dl > div,
.development-change-detail dl > div,
.development-change-events li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.development-change-card h3,
.development-change-card p,
.development-change-card dl,
.development-change-detail dl {
  margin: 0;
}

.development-change-card dl,
.development-change-detail dl {
  display: grid;
  gap: 8px;
}

.development-change-card dt,
.development-change-detail dt {
  color: var(--text-muted, #667085);
}

.development-change-card dd,
.development-change-detail dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.development-change-modules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.development-change-modules span {
  padding: 4px 8px;
  font-size: 12px;
  background: var(--surface-muted, #f4f6f8);
  border-radius: 999px;
}

.development-release-workbench > .governed-releases-page {
  margin-top: 18px;
}

.development-change-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.development-change-events {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
}

.development-change-events li {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border, #dfe4ea);
}

.development-change-events li span,
.development-change-events li small {
  color: var(--text-muted, #667085);
}

@media (max-width: 720px) {
  .development-change-card header,
  .development-change-card dl > div,
  .development-change-detail dl > div,
  .development-change-events li {
    align-items: flex-start;
    flex-direction: column;
  }

  .development-change-card dd,
  .development-change-detail dd {
    text-align: left;
  }
}
.governed-identity-grid .developer-identity-form {
  height: 100%;
  box-sizing: border-box;
  padding: 15px;
}
.governed-identity-grid .governed-form-grid { grid-template-columns: 1fr; }
.governed-identity-grid .developer-identity-form > button { width: 100%; margin-top: auto; }
.governed-identity-grid .form-hint { min-height: 38px; }

.governed-create-popover {
  width: min(720px, 100vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-left: 1px solid #ccd8ea;
  background: #fff;
  color: #172033;
  box-shadow: -18px 0 45px rgba(23, 32, 51, .18);
}
.governed-create-popover::backdrop { background: rgba(25, 38, 61, .34); }
.governed-create-popover > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px 18px;
  border-bottom: 1px solid #e3e8f0;
}
.governed-create-popover h2 { margin: 4px 0 6px; }
.governed-create-popover header p:last-child { margin: 0; color: #667085; }
.governed-create-popover form { padding: 22px 26px 30px; }
.governed-create-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.governed-create-steps label {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 5px;
  border: 1px solid #e0e6ef;
  border-radius: 9px;
  color: #738095;
  font-size: 11px;
  text-align: center;
  cursor: pointer;
}
.governed-create-steps span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #edf1f6;
  font-weight: 800;
}
.governed-step-error {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid #f3b8b2;
  border-radius: 8px;
  background: #fff3f1;
  color: #b42318;
  font-size: 13px;
  font-weight: 700;
}
#governed-create-step-1:checked ~ .governed-create-steps label[for="governed-create-step-1"],
#governed-create-step-2:checked ~ .governed-create-steps label[for="governed-create-step-2"],
#governed-create-step-3:checked ~ .governed-create-steps label[for="governed-create-step-3"],
#governed-create-step-4:checked ~ .governed-create-steps label[for="governed-create-step-4"] {
  border-color: #8cb7ff;
  background: #eef5ff;
  color: #1f5fcc;
}
.governed-create-panels { margin-top: 22px; }
.governed-create-panels > section { display: grid; gap: 15px; }
.governed-create-panels h3 { margin: 0; font-size: 20px; }
.governed-create-panels label:not(.btn) { display: grid; gap: 7px; color: #344054; font-size: 13px; font-weight: 700; }
.governed-create-panels input,
.governed-create-panels textarea,
.governed-create-panels select {
  box-sizing: border-box;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #cfd8e6;
  border-radius: 8px;
  background: #fff;
  color: #172033;
  font: inherit;
}
.governed-create-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; }
.governed-create-actions .btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.governed-auto-checks { display: grid; gap: 9px; }
.governed-auto-checks > div { display: grid; gap: 3px; padding: 12px; border: 1px solid #dce5f2; border-radius: 9px; background: #f8fafc; }
.governed-auto-checks span { color: #667085; font-size: 12px; }
.governed-submit-notice { padding: 16px; border: 1px solid #acd9c4; border-radius: 10px; background: #effaf4; }
.governed-submit-notice p { margin: 5px 0 0; color: #4f6b5c; }
#governed-create-step-1:checked ~ .governed-create-panels > section:not([data-create-step="1"]),
#governed-create-step-2:checked ~ .governed-create-panels > section:not([data-create-step="2"]),
#governed-create-step-3:checked ~ .governed-create-panels > section:not([data-create-step="3"]),
#governed-create-step-4:checked ~ .governed-create-panels > section:not([data-create-step="4"]) { display: none; }

@media (max-width: 980px) {
  .governed-page-hero,
  .governed-board-head { align-items: stretch; flex-direction: column; }
  .governed-hero-actions { justify-content: flex-start; }
  .governed-release-list { grid-template-columns: 1fr; }
  .governed-identity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .governed-page-hero,
  .governed-task-board { padding: 16px; }
  .governed-task-tabs { padding: 0 10px; }
  .governed-release-card { padding: 14px; }
  .governed-card-next { align-items: stretch; flex-direction: column; }
  .governed-card-next .governed-release-actions { justify-content: flex-start; }
  .governed-card-people { grid-template-columns: 1fr; }
  .governed-release-progress li strong { white-space: normal; }
  .governed-create-popover { width: 100vw; }
  .governed-create-popover > header,
  .governed-create-popover form { padding-inline: 16px; }
  .governed-create-steps label { font-size: 10px; }
  .governed-identity-grid { grid-template-columns: 1fr; }
}

.governed-preview-body { margin: 0; background-color: #f4f9fc; background-image: var(--workspace-image); background-position: center top; background-size: cover; background-attachment: fixed; color: #173252; }
.governed-preview-shell { display: grid; grid-template-columns: 184px 210px minmax(0, 1fr); min-height: 100vh; }
.governed-preview-primary { padding: 22px 14px; border-right: 1px solid #dce7ef; background: rgba(255, 255, 255, .96); color: #4f6780; box-shadow: 8px 0 28px rgba(35, 77, 112, .045); backdrop-filter: blur(18px); }
.governed-preview-brand { display: grid; gap: 5px; padding: 0 6px 22px; }
.governed-preview-brand strong { color: #173252; font-size: 15px; }
.governed-preview-brand small { color: #61758d; }
.governed-preview-primary nav,
.governed-preview-secondary nav { display: grid; gap: 4px; }
.governed-preview-primary nav span,
.governed-preview-primary nav strong,
.governed-preview-secondary nav span,
.governed-preview-secondary nav strong { padding: 10px 12px; border-radius: 7px; font-size: 13px; }
.governed-preview-primary nav strong { background: #edf8e8; color: #2e862c; box-shadow: inset 3px 0 0 #72c947; }
.governed-preview-secondary { padding: 20px 14px; border-right: 1px solid #dce7ef; background: rgba(255, 255, 255, .9); backdrop-filter: blur(18px); }
.governed-preview-secondary header { display: grid; gap: 4px; padding: 0 8px 18px; border-bottom: 1px solid #e4e9f0; }
.governed-preview-secondary header small { color: #7a8699; }
.governed-preview-secondary nav { margin-top: 13px; }
.governed-preview-secondary nav span { color: #536176; }
.governed-preview-secondary nav strong { background: #eaf5ff; color: #0872d1; }
.governed-preview-main { min-width: 0; }
.governed-preview-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 0 24px; border-bottom: 1px solid rgba(216, 229, 238, .88); background: rgba(255, 255, 255, .72); backdrop-filter: blur(18px) saturate(1.12); }
.governed-preview-topbar div { display: grid; gap: 3px; }
.governed-preview-topbar .governed-preview-tools { display: flex; align-items: center; gap: 12px; }
.governed-preview-topbar small,
.governed-preview-topbar > span { color: #7a8699; font-size: 12px; }
#governed-preview-page { padding: 20px 22px 42px; }
.governed-preview-toast { position: fixed; right: 24px; bottom: 24px; z-index: 1000; max-width: 420px; padding: 13px 16px; border: 1px solid #bfe2b1; border-radius: 10px; background: #edf8e8; color: #2e862c; box-shadow: 0 12px 32px rgba(35, 77, 112, .14); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.governed-preview-toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1280px) {
  .governed-preview-shell { grid-template-columns: 156px 186px minmax(0, 1fr); }
  .governed-preview-primary,
  .governed-preview-secondary { padding-inline: 10px; }
}
@media (max-width: 1100px) {
  .governed-preview-shell { grid-template-columns: minmax(0, 1fr); }
  .governed-preview-primary,
  .governed-preview-secondary { display: none; }
}
@media (max-width: 640px) {
  .governed-preview-topbar { align-items: flex-start; flex-direction: column; padding: 13px 16px; }
  #governed-preview-page { padding: 12px; }
}
.login-account-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 720px) {
  .system-admin-permissions-head, .permission-tree-toolbar { align-items: stretch; flex-direction: column; }
  .system-admin-permissions-head select, .permission-tree-toolbar input { min-width: 0; width: 100%; }
}
.product-code-workbench {
  scroll-margin-top: 24px;
}

.product-code-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.product-code-metrics > div,
.product-code-actors > div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.product-code-metrics span,
.product-code-actors dt,
.product-code-result span {
  color: var(--text-muted);
  font-size: 12px;
}

.product-code-metrics strong {
  font-size: 24px;
}

.product-code-layout {
  display: grid;
  grid-template-columns: minmax(360px, .85fr) minmax(480px, 1.15fr);
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}

.product-code-form,
.product-code-queue {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.product-code-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.product-code-fields label {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13px;
}

.product-code-fields input,
.product-code-fields select,
.product-code-fields textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.product-code-field-wide {
  grid-column: 1 / -1;
}

.product-code-queue {
  display: grid;
  gap: 12px;
  max-height: 760px;
  overflow: auto;
}

.product-code-application {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.product-code-application .product-gap-head > div {
  display: grid;
  gap: 3px;
}

.product-code-application small {
  color: var(--text-muted);
}

.product-code-actors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.product-code-actors dd {
  margin: 0;
  word-break: break-word;
}

.product-code-result,
.product-code-sku-list {
  display: grid;
  gap: 8px;
}

.product-code-result > div,
.product-code-sku-list > div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 10px;
  background: var(--surface);
}

.product-code-result code {
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
  word-break: break-all;
}

.product-code-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.product-code-page-tabs,
.product-code-create-tabs {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid var(--border);
}

.product-code-page-tabs { margin: 16px 0; }

.product-code-page-tabs button,
.product-code-create-tabs button {
  padding: 9px 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.product-code-page-tabs button.active,
.product-code-create-tabs button.active {
  border-bottom-color: var(--primary);
  color: var(--primary);
}

.product-code-create-layout {
  display: grid;
  gap: 18px;
  margin-top: 16px;
}

.product-code-module { max-width: 960px; }

.product-code-residual-warning {
  display: none;
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #f4c7c3;
  border-radius: 10px;
  background: #fff4f2;
  color: #9f2d20;
  font-size: 13px;
}

.product-code-residual-warning.is-visible { display: grid; }

.product-code-preview {
  display: grid;
  gap: 10px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid #bfd1ef;
  border-radius: 12px;
  background: #f7faff;
}

.product-code-preview-head,
.product-code-preview-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.product-code-preview-head h3 { margin: 3px 0 0; font-size: 15px; }
.product-code-preview-head .secondary-kicker,
.product-code-segment-grid span,
.product-code-preview-line span,
.product-code-preview p { color: var(--text-muted); font-size: 12px; }
.product-code-preview p { margin: 0; }
.product-code-segment-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.product-code-segment-grid > div { display: grid; gap: 4px; min-width: 0; padding: 10px; border-radius: 9px; background: var(--surface); }
.product-code-segment-grid strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 13px; }
.product-code-preview code { color: var(--primary); font-size: 12px; word-break: break-word; }

@media (max-width: 1100px) {
  .product-code-layout {
    grid-template-columns: 1fr;
  }

  .product-code-segment-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .product-code-metrics,
  .product-code-actors,
  .product-code-fields {
    grid-template-columns: 1fr;
  }

  .product-code-field-wide {
    grid-column: auto;
  }

  .product-code-page-tabs,
  .product-code-create-tabs { gap: 12px; overflow-x: auto; }
  .product-code-preview-head,
  .product-code-preview-line { align-items: flex-start; flex-direction: column; }
}
.organization-permissions-page{display:grid;gap:16px}.organization-permissions-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 24px;border:1px solid #d9e2f1;border-radius:14px;background:#fff}.organization-permissions-hero h2{margin:4px 0 8px}.organization-permissions-hero p{margin:0;color:#64748b}.organization-permission-rule-list{display:grid;gap:16px}.organization-permission-rule{display:grid;gap:16px;margin:0;padding:20px;border:1px solid #d9e2f1;border-radius:14px;background:#fff}.organization-permission-rule-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.organization-permission-rule-head h3{margin:3px 0 0}.organization-permission-fields{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:12px}.organization-permission-fields label{display:grid;gap:6px;color:#475569;font-size:13px}.organization-permission-fields input,.organization-permission-fields select{min-height:40px;padding:8px 10px;border:1px solid #cbd5e1;border-radius:8px;background:#fff}.organization-permission-switch{align-content:end}.organization-permission-switch input{min-height:auto}.organization-permission-rule details{border-top:1px solid #e2e8f0;padding-top:12px}.organization-permission-rule summary{cursor:pointer;font-weight:700;color:#1e293b}.organization-permission-check-group{margin-top:14px}.organization-permission-check-group h4{margin:0 0 8px;color:#64748b;font-size:12px;text-transform:uppercase}.organization-permission-checks{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:8px}.organization-permission-checks label{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc;font-size:13px}.organization-permission-savebar{position:sticky;bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding:14px 16px;border:1px solid #bfd1ef;border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 8px 24px rgba(15,23,42,.1);z-index:3}.organization-permission-savebar span{color:#64748b;font-size:13px}@media(max-width:1100px){.organization-permission-fields{grid-template-columns:repeat(2,minmax(160px,1fr))}.organization-permission-checks{grid-template-columns:repeat(2,minmax(160px,1fr))}}@media(max-width:720px){.organization-permissions-hero,.organization-permission-savebar{align-items:stretch;flex-direction:column}.organization-permission-fields,.organization-permission-checks{grid-template-columns:1fr}}

.organization-permission-enabled-field {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid #d9e2f1;
  border-radius: 10px;
  background: #f8fafc;
}

.organization-permission-field-label {
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

.organization-permission-fields .organization-permission-switch {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  color: #1e293b;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.organization-permission-fields .organization-permission-switch input {
  width: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
}

.organization-permission-match {
  grid-column: 1 / -1;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 9px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  line-height: 1.5;
}

.organization-permission-match.success {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #047857;
}

.organization-permission-match.warning {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
  font-weight: 700;
}

.organization-permission-match.disabled {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #64748b;
}

.organization-permission-person-picker {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
}

.organization-permission-person-picker .organization-permission-check-group {
  margin-top: 8px;
}

.organization-permission-person-picker .organization-permission-checks label {
  background: #fff;
}

.organization-permission-check-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.organization-permission-check-group-head h4 {
  margin: 0;
}

.organization-permission-rule .organization-permission-select-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.organization-permission-rule .organization-permission-select-all input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #2563eb;
}

.organization-role-template {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(260px, 1.35fr);
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid #c9e5bd;
  border-radius: 12px;
  background: #f6fbf4;
}

.organization-role-template label { display: block; }

.organization-role-template select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #8fc876;
  border-radius: 8px;
  background: #fff;
  color: #1f4d2d;
}

.organization-role-template-fixed {
  grid-column: 2;
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: #54705a;
  font-size: 12px;
}

.organization-role-template-fixed strong {
  color: #276438;
  white-space: nowrap;
}

.organization-role-template-summary {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,.72);
  color: #54705a;
  font-size: 13px;
}

.organization-role-template-summary strong { color: #276438; }

.organization-permission-baseline {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) repeat(2, minmax(220px, 1fr));
  gap: 12px;
  padding: 16px;
  border: 1px solid #c9e5bd;
  border-radius: 12px;
  background: #f6fbf4;
}

.organization-permission-baseline > div:first-child {
  display: grid;
  align-content: center;
  gap: 5px;
}

.organization-permission-baseline article {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid #dbeed2;
  border-radius: 9px;
  background: rgba(255,255,255,.78);
  color: #54705a;
  font-size: 13px;
  line-height: 1.5;
}

.organization-permission-baseline article strong { color: #276438; }

.organization-permission-baseline .organization-role-template-fixed {
  grid-column: auto;
  padding: 0 2px;
}

.organization-permission-plain-language {
  grid-column: span 2;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid #c9e5bd;
  border-radius: 10px;
  background: #f6fbf4;
  color: #276438;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.organization-permission-plain-language small {
  color: #54705a;
  font-size: 12px;
  font-weight: 400;
}

.organization-permission-exceptions {
  display: grid;
  gap: 14px;
  padding: 14px 0 0;
}

.organization-permission-exceptions > .field-hint { margin: -4px 0 0; }

.organization-permission-exception-fields { padding-top: 2px; }

@media(max-width:720px) {
  .organization-role-template { grid-template-columns: 1fr; }
  .organization-role-template-fixed { grid-column: auto; }
  .organization-permission-baseline { grid-template-columns: 1fr; }
  .organization-permission-plain-language { grid-column: 1; }
}

.organization-permission-checks label.organization-permission-choice-detailed {
  min-height: 72px;
  align-items: flex-start;
  padding: 10px 12px;
}

.organization-permission-choice-copy {
  display: grid;
  flex: 1;
  gap: 5px;
  min-width: 0;
}

.organization-permission-choice-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.organization-permission-choice-title strong {
  color: #1e293b;
  font-size: 13px;
}

.organization-permission-choice-title em {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: #e8eef9;
  color: #526887;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.organization-permission-choice-copy small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.sensitive-data-surface {
  position: relative;
  isolation: isolate;
}

.sensitive-data-content {
  position: relative;
  z-index: 1;
}

.sensitive-watermark-overlay {
  position: fixed;
  inset: -20vh -20vw;
  z-index: 999;
  display: grid;
  grid-template-columns: repeat(4, minmax(320px, 1fr));
  align-content: space-around;
  gap: 70px 40px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  transform: rotate(-23deg);
  color: #357a38;
  opacity: .12;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}

.sensitive-watermark-overlay span {
  white-space: nowrap;
  text-align: center;
}

@media print {
  .sensitive-watermark-overlay {
    position: fixed !important;
    display: grid !important;
    opacity: .16;
    color: #285f2c;
  }

  .finance-view-only .sensitive-data-content {
    display: none !important;
  }

  .finance-view-only::after {
    content: "财务只读数据禁止打印；本次尝试仍受访问追踪号审计。";
    display: block;
    padding: 40px;
    border: 2px solid #357a38;
    color: #285f2c;
    font-size: 18px;
    font-weight: 700;
  }
}
.reimbursement-preview-stage object {
  width: 100%;
  min-height: 520px;
  border: 1px solid #d4dde7;
  border-radius: 8px;
  background: #fff;
}

.reimbursement-page .reimbursement-upload {
  grid-template-columns: minmax(0, .62fr) minmax(320px, 1fr);
}

.reimbursement-page .reimbursement-file-input {
  display: none;
}

.reimbursement-upload-target {
  display: flex;
  min-height: 82px;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border: 1px solid #205da9;
  border-radius: 10px;
  background: #2f70c9;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.reimbursement-upload-target:hover,
.reimbursement-upload-target.dragging {
  border-color: #174b82;
  background: #245fae;
  box-shadow: 0 0 0 3px rgba(47, 112, 201, .14);
}

.reimbursement-upload-target:focus-visible {
  outline: 3px solid rgba(47, 112, 201, .3);
  outline-offset: 2px;
}

.reimbursement-upload-target:disabled {
  cursor: wait;
  opacity: .72;
}

.reimbursement-upload-target strong {
  font-size: 16px;
}

.reimbursement-upload-target span {
  font-size: 12px;
  font-weight: 650;
}

.reimbursement-upload-target small {
  color: rgba(255, 255, 255, .8);
  font-size: 11px;
  font-weight: 400;
}

@media (max-width: 900px) {
  .reimbursement-page .reimbursement-upload {
    grid-template-columns: 1fr;
  }

  .reimbursement-upload-target {
    min-height: 94px;
  }
}
.mingchuanyun-insight-panel{margin:0 0 18px;padding:18px 20px;border:1px solid #cfe4dc;border-radius:16px;background:linear-gradient(135deg,#f4fbf8,#fff);box-shadow:0 8px 24px rgba(18,77,58,.06)}
.mingchuanyun-insight-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.mingchuanyun-insight-head>div{display:flex;align-items:baseline;gap:12px}.mingchuanyun-insight-head span{color:#28735d;font-size:13px;font-weight:700}.mingchuanyun-insight-head strong{font-size:17px}.mingchuanyun-insight-head a{color:#28735d;text-decoration:none;font-weight:700}
.mingchuanyun-insight-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.mingchuanyun-insight-metrics>div{padding:12px 14px;border-radius:12px;background:#fff;border:1px solid #e1eee9}.mingchuanyun-insight-metrics span{display:block;color:#66756f;font-size:12px}.mingchuanyun-insight-metrics strong{display:block;margin-top:5px;font-size:19px;color:#173f33}.mingchuanyun-insight-panel>p{margin:12px 0 0;color:#66756f;font-size:13px}
@media(max-width:900px){.mingchuanyun-insight-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.mingchuanyun-insight-head{align-items:flex-start}.mingchuanyun-insight-head>div{display:block}}
.mingchuanyun-control { display: grid; gap: 16px; }
.mingchuanyun-control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mingchuanyun-control-card { display: grid; gap: 14px; align-content: start; }
.mingchuanyun-alert-list { display: grid; gap: 8px; }
.mingchuanyun-alert-list .callout { display: grid; gap: 4px; }
@media (max-width: 900px) { .mingchuanyun-control-grid { grid-template-columns: 1fr; } }

/* Workspace responsive safety layer.
   The desktop shell can leave less than 1,000px for page content even on a
   conventional 1366px monitor. Use the workspace container, rather than the
   window width, so every module, including finance, reflows against its real space. */
.app-shell .page-container,
.app-shell .page-container > *,
.app-shell .panel,
.app-shell .page-header-panel {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.app-shell .page-container :where(img, video, canvas, iframe, object) {
  max-width: 100%;
}

.app-shell .page-container :where(
  .table-wrap,
  .task-policy-panel,
  .analysis-grain-table,
  .content-api-catalog-table,
  .pc-table-wrap,
  .reimbursement-table-wrap
) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

@media (min-width: 861px) and (max-width: 1500px) {
  .app-shell {
    grid-template-columns: 208px 176px minmax(0, 1fr);
  }

  .app-shell.sidebar-collapsed {
    grid-template-columns: 56px 176px minmax(0, 1fr);
  }

  .app-shell.secondary-sidebar-collapsed {
    grid-template-columns: 208px 64px minmax(0, 1fr);
  }

  .app-shell.sidebar-collapsed.secondary-sidebar-collapsed {
    grid-template-columns: 56px 64px minmax(0, 1fr);
  }

  .app-shell .sidebar {
    padding-inline: 12px;
  }

  .app-shell .secondary-sidebar {
    padding-inline: 10px;
  }
}

@container workspace-shell (max-width: 1180px) {
  .app-shell .topbar {
    flex-wrap: wrap;
  }

  .app-shell .topbar-tools {
    min-width: 0;
    flex: 1 1 420px;
    justify-content: flex-end;
  }

  .app-shell .search {
    width: min(100%, 320px);
    min-width: 180px;
  }

  .app-shell :where(
    .aop-kpi-grid,
    .aop-quarter-grid,
    .aop-ogsm-chain,
    .aop-battle-grid,
    .aop-kiss-grid,
    .task-board,
    .database-operating-flow,
    .database-overview-summary,
    .database-quality-summary,
    .analysis-hierarchy,
    .analysis-metric-grid,
    .database-field-summary,
    .data-layer-map,
    .data-asset-safety-grid,
    .product-governance-grid,
    .closed-loop-summary,
    .dashboard-kpi-grid,
    .ai-config-summary-grid,
    .ai-flow-steps,
    .ai-capability-summary-strip,
    .ai-capability-card-grid,
    .ai-capability-step-hint,
    .ai-management-flow,
    .ai-budget-summary-grid,
    .access-control-summary,
    .governed-release-progress,
    .governed-create-steps,
    .product-code-metrics,
    .product-code-actors,
    .product-code-segment-grid,
    .organization-permission-fields,
    .organization-permission-checks,
    .mingchuanyun-insight-metrics,
    .pc-kpis
  ) {
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  }

  .app-shell :where(
    .reimbursement-command,
    .reimbursement-workbench
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell .reimbursement-preview {
    grid-column: auto;
    min-height: 360px;
    border-top: 1px solid #e4eaf0;
    border-left: 0;
  }
}

@container workspace-shell (max-width: 920px) {
  .app-shell .page-container {
    padding: 18px;
  }

  .app-shell :where(
    .today-hero,
    .page-header-panel,
    .section-head,
    .section-title,
    .content-center-heading,
    .content-api-title,
    .pc-summary,
    .organization-permissions-hero,
    .organization-permission-savebar,
    .mingchuanyun-insight-head,
    .reimbursement-export
  ) {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .app-shell :where(
    .aop-grid-2,
    .dashboard-grid,
    .product-relation-layout,
    .system-integration-grid,
    .mingchuanyun-control-grid,
    .reimbursement-upload
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell :where(
    .lite-form-grid,
    .content-api-fields,
    .organization-permission-fields,
    .organization-permission-checks,
    .pc-drawer dl
  ) {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  }

  .app-shell .reimbursement-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container workspace-shell (max-width: 680px) {
  .app-shell .topbar,
  .app-shell .page-container {
    padding-inline: 14px;
  }

  .app-shell .topbar-tools,
  .app-shell .search {
    width: 100%;
  }

  .app-shell :where(
    .today-hero,
    .page-header-panel,
    .section-head,
    .section-title,
    .content-center-heading,
    .content-api-title,
    .pc-summary,
    .organization-permissions-hero,
    .organization-permission-savebar,
    .mingchuanyun-insight-head,
    .reimbursement-export
  ) {
    flex-direction: column;
  }

  .app-shell :where(
    .reimbursement-kpis,
    .lite-form-grid,
    .content-api-fields,
    .organization-permission-fields,
    .organization-permission-checks,
    .pc-kpis,
    .pc-drawer dl
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell .button-row,
  .app-shell .section-actions {
    width: 100%;
  }
}