
:root {
  color-scheme: light;
  --brand: #0e4cd7;
  --brand-deep: #0a328f;
  --brand-ink: #071c4a;
  --brand-soft: #edf3ff;
  --brand-line: #c9d8fb;
  --ink: #172033;
  --muted: #68738a;
  --line: #dfe5ef;
  --surface: #ffffff;
  --canvas: #f3f6fb;
  --success: #16794a;
  --success-soft: #eaf8f1;
  --warning: #a05b00;
  --warning-soft: #fff5df;
  --danger: #b42318;
  --danger-soft: #fff0ee;
  --shadow: 0 12px 36px rgba(18, 40, 83, 0.09);
  --radius: 18px;
  --sidebar: 252px;
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 1220px; background: var(--canvas); }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .58; }
:focus-visible { outline: 3px solid rgba(14, 76, 215, .25); outline-offset: 2px; }

.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 12px 16px; color: white; background: var(--brand); border-radius: 10px; }
.skip-link:focus { top: 16px; }

.app-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.side-rail { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); display: flex; flex-direction: column; color: #fff; background: linear-gradient(180deg, #071b47 0%, #0a328f 58%, #0e4cd7 100%); z-index: 20; }
.brand-lockup { display: flex; align-items: center; gap: 12px; min-height: 82px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.13); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--brand-deep); background: white; font-weight: 900; letter-spacing: -.04em; }
.brand-copy strong { display: block; font-size: 16px; letter-spacing: -.03em; }
.brand-copy span { display: block; margin-top: 3px; color: #bcd0ff; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.side-nav { flex: 1; overflow-y: auto; padding: 18px 14px; scrollbar-width: thin; }
.nav-group + .nav-group { margin-top: 21px; }
.nav-group-title { margin: 0 10px 8px; color: #91afea; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.nav-link { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 9px 11px; border: 1px solid transparent; border-radius: 11px; color: #dce7ff; font-size: 14px; font-weight: 700; text-decoration: none; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-link.is-active { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.18); box-shadow: inset 3px 0 #fff; }
.nav-index { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.25); border-radius: 7px; color: #bcd0ff; font-size: 11px; font-weight: 900; }
.nav-link.is-active .nav-index { color: var(--brand-deep); background: #fff; border-color: #fff; }
.rail-footer { padding: 16px 18px 20px; border-top: 1px solid rgba(255,255,255,.13); }
.rail-footer strong { display: block; font-size: 12px; }
.rail-footer span { display: block; margin-top: 4px; color: #bcd0ff; font-size: 11px; line-height: 1.5; }

.app-main { grid-column: 2; min-width: 0; }
.top-header { position: sticky; top: 0; z-index: 12; display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 34px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.crumb { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; font-weight: 700; }
.crumb strong { color: var(--ink); }
.header-tools { display: flex; align-items: center; gap: 10px; }
.freshness { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.freshness::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #23a36d; box-shadow: 0 0 0 4px #e4f6ee; }

.workflow-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 22px 34px 0; padding: 7px; background: #e8edf5; border-radius: 15px; }
.workflow-step { position: relative; display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 12px; border-radius: 11px; color: #6c778e; font-size: 12px; font-weight: 800; text-decoration: none; }
.workflow-step:hover { color: var(--brand); background: rgba(255,255,255,.65); }
.workflow-step.is-active { color: var(--brand-deep); background: #fff; box-shadow: 0 5px 18px rgba(29,52,94,.1); }
.workflow-number { display: grid; place-items: center; flex: 0 0 auto; width: 25px; height: 25px; border-radius: 8px; color: #7e899f; background: #d8deea; font-size: 11px; }
.workflow-step.is-active .workflow-number { color: #fff; background: var(--brand); }
.workspace { padding: 26px 34px 54px; }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 22px; }
.heading-copy { max-width: 760px; }
.eyebrow { margin: 0 0 8px; color: var(--brand); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 9px; color: #101828; font-size: 30px; line-height: 1.18; letter-spacing: -.045em; }
h2 { margin-bottom: 8px; font-size: 20px; line-height: 1.35; letter-spacing: -.03em; }
h3 { margin-bottom: 6px; font-size: 16px; line-height: 1.4; letter-spacing: -.02em; }
.page-description { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.heading-actions { display: flex; flex: 0 0 auto; gap: 9px; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; color: #263249; background: #fff; font-size: 13px; font-weight: 800; text-decoration: none; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.button:hover { border-color: #adc1ef; color: var(--brand); background: #f8faff; }
.button.primary { color: #fff; background: var(--brand); border-color: var(--brand); box-shadow: 0 7px 18px rgba(14,76,215,.22); }
.button.primary:hover { color: #fff; background: #0a43c2; }
.button.danger { color: var(--danger); border-color: #f2c1bc; background: var(--danger-soft); }
.button.success { color: var(--success); border-color: #aedec6; background: var(--success-soft); }
.button.compact { min-height: 34px; padding: 7px 10px; font-size: 12px; }
.button.ghost { color: var(--brand); background: transparent; border-color: transparent; box-shadow: none; }

.hero-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(340px, .7fr); gap: 32px; padding: 30px; color: #fff; background: linear-gradient(125deg, #071c4a 0%, #0a3eb4 62%, #1761ed 100%); border-radius: 22px; box-shadow: 0 18px 40px rgba(11,52,145,.2); }
.hero-panel::after { content: ""; position: absolute; width: 350px; height: 350px; right: -150px; top: -190px; border: 70px solid rgba(255,255,255,.09); border-radius: 50%; }
.hero-kicker { margin-bottom: 10px; color: #bcd0ff; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.hero-panel h2 { position: relative; z-index: 1; max-width: 700px; margin-bottom: 10px; font-size: 28px; letter-spacing: -.045em; }
.hero-panel p { position: relative; z-index: 1; margin: 0; color: #dbe7ff; font-size: 14px; line-height: 1.65; }
.hero-actions { position: relative; z-index: 1; display: flex; gap: 9px; margin-top: 22px; }
.hero-actions .button:not(.primary) { color: #fff; background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.22); }
.hero-actions .button.primary { color: var(--brand-deep); background: #fff; border-color: #fff; box-shadow: none; }
.hero-side { position: relative; z-index: 1; align-self: stretch; padding: 20px; background: rgba(3,20,62,.28); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; }
.hero-side-label { color: #bcd0ff; font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.hero-priority { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 8px; }
.hero-priority strong { font-size: 42px; letter-spacing: -.05em; }
.hero-priority span { color: #dbe7ff; font-size: 13px; font-weight: 700; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.metric-card { min-height: 132px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 5px 20px rgba(26,45,82,.045); }
.metric-label { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; font-weight: 800; }
.metric-value { display: flex; align-items: baseline; gap: 6px; margin-top: 13px; }
.metric-value strong { color: #111827; font-size: 30px; line-height: 1; letter-spacing: -.045em; }
.metric-value span { color: var(--muted); font-size: 12px; font-weight: 700; }
.metric-note { margin: 12px 0 0; color: #79849a; font-size: 11px; line-height: 1.5; }
.metric-card.is-danger { border-top: 4px solid var(--danger); }
.metric-card.is-warning { border-top: 4px solid #e99921; }
.metric-card.is-brand { border-top: 4px solid var(--brand); }
.metric-card.is-success { border-top: 4px solid var(--success); }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 16px; margin-top: 16px; }
.content-grid.equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 5px 20px rgba(26,45,82,.04); }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px 15px; border-bottom: 1px solid #edf0f5; }
.panel-header h2 { margin-bottom: 3px; }
.panel-header p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.panel-body { padding: 20px 22px; }
.panel-body.flush { padding: 0; }

.action-list { display: grid; gap: 10px; }
.action-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #fff; text-decoration: none; }
.action-row:hover { border-color: #adc1ef; background: #f8faff; }
.action-rank { display: grid; place-items: center; width: 34px; height: 34px; color: var(--brand); background: var(--brand-soft); border-radius: 10px; font-size: 12px; font-weight: 900; }
.action-row strong { display: block; font-size: 14px; }
.action-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.action-count { color: var(--brand); font-size: 13px; font-weight: 900; }

.flow-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.flow-cell { position: relative; min-height: 120px; padding: 15px; background: #f8faff; border: 1px solid var(--brand-line); border-radius: 13px; }
.flow-cell:not(:last-child)::after { content: ""; position: absolute; right: -5px; top: 49px; z-index: 2; width: 9px; height: 9px; background: #fff; border-top: 2px solid var(--brand); border-right: 2px solid var(--brand); transform: rotate(45deg); }
.flow-cell span { color: var(--brand); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.flow-cell strong { display: block; margin-top: 9px; font-size: 14px; }
.flow-cell small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.5; }

.status-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 25px; padding: 4px 8px; border-radius: 999px; color: #4a556b; background: #eef1f6; font-size: 10px; font-weight: 900; white-space: nowrap; }
.status-pill.brand { color: var(--brand-deep); background: var(--brand-soft); }
.status-pill.success { color: var(--success); background: var(--success-soft); }
.status-pill.warning { color: var(--warning); background: var(--warning-soft); }
.status-pill.danger { color: var(--danger); background: var(--danger-soft); }

.toolbar { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 14px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.field { display: grid; gap: 6px; min-width: 150px; }
.field.grow { flex: 1; }
.field span { color: #4d5970; font-size: 11px; font-weight: 800; }
input, select, textarea { width: 100%; color: var(--ink); background: #fff; border: 1px solid #cfd6e2; border-radius: 9px; }
input, select { height: 40px; padding: 0 11px; }
textarea { min-height: 92px; padding: 10px 11px; resize: vertical; line-height: 1.55; }
input:hover, select:hover, textarea:hover { border-color: #9db5e8; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14,76,215,.1); outline: none; }

.split-workspace { display: grid; grid-template-columns: minmax(330px, .72fr) minmax(0, 1.28fr); min-height: 620px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.record-list { max-height: 720px; overflow-y: auto; border-right: 1px solid var(--line); background: #f8fafc; }
.record-list-head { position: sticky; top: 0; z-index: 2; padding: 14px 16px; background: #f8fafc; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 800; }
.record-button { display: block; width: 100%; padding: 16px; text-align: left; color: inherit; background: transparent; border: 0; border-bottom: 1px solid #e8ecf2; }
.record-button:hover { background: #f1f5fc; }
.record-button.is-selected { background: #fff; box-shadow: inset 4px 0 var(--brand); }
.record-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: var(--muted); font-size: 10px; font-weight: 800; }
.record-title { display: -webkit-box; overflow: hidden; color: #172033; font-size: 13px; font-weight: 800; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.record-sub { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.detail-pane { min-width: 0; padding: 26px 28px 30px; }
.detail-kicker { color: var(--brand); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.detail-pane h2 { margin-top: 8px; font-size: 23px; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 20px; }
.source-text { padding: 18px; color: #273249; background: #f6f8fc; border-left: 4px solid var(--brand); border-radius: 0 12px 12px 0; font-size: 13px; line-height: 1.8; white-space: pre-wrap; }
.decision-box { margin-top: 20px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.decision-box h3 { margin-bottom: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.form-grid .wide { grid-column: 1 / -1; }
.decision-actions { display: flex; gap: 8px; margin-top: 12px; }

.data-table-wrap { overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th { position: sticky; top: 0; z-index: 1; padding: 11px 13px; color: #58647a; background: #f5f7fb; border-bottom: 1px solid var(--line); text-align: left; font-size: 10px; font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
.data-table td { padding: 12px 13px; border-bottom: 1px solid #edf0f5; vertical-align: top; line-height: 1.55; }
.data-table tbody tr:hover { background: #f8faff; }
.data-table td strong { display: block; font-size: 12px; }
.data-table td small { display: block; margin-top: 3px; color: var(--muted); }

.empty-state, .loading-state, .error-state { display: grid; place-items: center; min-height: 260px; padding: 34px; text-align: center; }
.empty-state strong, .loading-state strong, .error-state strong { display: block; font-size: 17px; }
.empty-state p, .loading-state p, .error-state p { max-width: 480px; margin: 8px auto 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.loading-dot { width: 34px; height: 34px; margin-bottom: 13px; border: 3px solid #d9e3f8; border-top-color: var(--brand); border-radius: 50%; animation: spin .85s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.notice { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; color: #3f4b60; background: #f7f9fd; border: 1px solid var(--line); border-radius: 12px; font-size: 12px; line-height: 1.6; }
.notice.warning { color: #73420b; background: var(--warning-soft); border-color: #f2d7a2; }
.notice.danger { color: #8e2118; background: var(--danger-soft); border-color: #f2c4bf; }
.notice strong { display: block; }

.proposal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.proposal-card { display: block; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 15px; color: inherit; text-decoration: none; }
.proposal-card:hover { border-color: #a9bfee; box-shadow: 0 8px 22px rgba(17,54,131,.08); }
.proposal-card:focus-visible, .proposal-card.is-selected { outline: 3px solid rgba(14,76,215,.18); border-color: var(--brand); box-shadow: 0 8px 22px rgba(17,54,131,.1); }
.proposal-card h3 { margin-top: 11px; }
.proposal-stats { display: flex; gap: 13px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #edf0f5; }
.proposal-stats span { color: var(--muted); font-size: 11px; }
.proposal-stats strong { color: var(--ink); }
.proposal-open { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; color: var(--brand); font-size: 12px; font-weight: 700; }
.proposal-detail .action-list { margin-top: 10px; }

.graph-board { position: relative; min-height: 640px; overflow: hidden; background: radial-gradient(circle at 15% 10%, #f4f7ff 0, #fff 46%); border: 1px solid var(--line); border-radius: 18px; }
.graph-board svg { display: block; width: 100%; min-height: 640px; }
.graph-edge { fill: none; stroke: #b8c5db; stroke-width: 2; opacity: .72; }
.graph-edge.is-attention { stroke: #e07a6d; stroke-dasharray: 6 4; }
.graph-edge.is-proposed { stroke: #789be5; stroke-dasharray: 5 5; }
.graph-node rect { stroke-width: 1.5; filter: drop-shadow(0 6px 8px rgba(18,45,94,.08)); }
.graph-node text { pointer-events: none; }
.graph-node .node-title { fill: #172033; font-size: 12px; font-weight: 800; }
.graph-node .node-subtitle { fill: #6b768c; font-size: 9px; font-weight: 700; }
.graph-node-law rect { fill: #e9f0ff; stroke: #6f96e8; }
.graph-node-duty rect { fill: #fff; stroke: #b8c4d8; }
.graph-node-activity rect { fill: #eaf8f1; stroke: #68b48e; }
.graph-node-org rect { fill: #fff5df; stroke: #d9a755; }
.graph-node-risk rect { fill: #fff0ee; stroke: #e07a6d; }
.graph-node-change rect, .graph-node-news rect { fill: #f1edff; stroke: #9c83d7; }
.graph-label { fill: #7a8598; font-size: 9px; font-weight: 800; }
.graph-inspector { position: absolute; right: 18px; bottom: 18px; width: 330px; padding: 16px; background: rgba(255,255,255,.97); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.graph-inspector p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }

.inspection-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: 16px; }
.inspection-list { display: grid; gap: 9px; }
.inspection-card { width: 100%; padding: 15px; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: 13px; text-align: left; }
.inspection-card.is-selected { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14,76,215,.08); }
.inspection-card-head { display: flex; justify-content: space-between; gap: 10px; }
.inspection-card h3 { margin: 8px 0 4px; }
.inspection-card p { margin: 0; color: var(--muted); font-size: 11px; }
.check-list { display: grid; gap: 8px; margin: 15px 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding: 10px 10px 10px 35px; background: #f7f9fd; border-radius: 9px; font-size: 12px; line-height: 1.5; }
.check-list li::before { content: ""; position: absolute; left: 14px; top: 12px; width: 6px; height: 11px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(45deg); }
.impact-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0; }
.impact-strip span { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); font-size: 12px; background: var(--canvas); }
.impact-strip b { color: var(--ink); font-size: 22px; line-height: 1; }
.weak-point-list { display: grid; gap: 10px; margin: 16px 0; }
.weak-point-card { padding: 15px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 12px; background: #fff; }
.weak-point-card h3 { margin: 10px 0 6px; font-size: 15px; }
.weak-point-card p { margin: 4px 0 10px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.weak-point-card > strong { color: var(--ink); font-size: 12px; }
.weak-point-card small { color: var(--muted); }
.evidence-details { margin: 14px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.evidence-details summary { padding: 13px 15px; color: var(--ink); font-size: 13px; font-weight: 800; cursor: pointer; }
.evidence-details ul { display: grid; gap: 8px; margin: 0; padding: 0 15px 15px; list-style: none; }
.evidence-details li { display: flex; gap: 10px; padding: 9px 10px; border-radius: 8px; background: #fff; font-size: 12px; }
.evidence-details li > b { color: var(--brand); min-width: 82px; }
.evidence-details li span, .evidence-details li strong { display: block; }
.evidence-details li span { color: var(--muted); }
.evidence-details li strong { color: var(--ink); margin-bottom: 2px; }
.change-preview { display: grid; gap: 8px; padding: 0 15px 15px; }
.change-preview article { padding: 11px; border-radius: 9px; background: #fff; }
.change-preview article strong { font-size: 12px; }
.change-preview article p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.law-lane { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; }
.version-list { max-height: 690px; overflow: auto; }
.version-button { display: block; width: 100%; padding: 12px 14px; color: inherit; background: #fff; border: 0; border-bottom: 1px solid #edf0f5; text-align: left; }
.version-button:hover, .version-button.is-selected { color: var(--brand-deep); background: var(--brand-soft); }

.toast-region { position: fixed; right: 22px; bottom: 22px; z-index: 80; display: grid; gap: 9px; }
.toast { min-width: 300px; max-width: 440px; padding: 13px 15px; color: #fff; background: #172033; border-radius: 12px; box-shadow: 0 16px 35px rgba(0,0,0,.2); font-size: 12px; line-height: 1.5; animation: toast-in .2s ease-out; }
.toast.success { background: #11673f; }
.toast.error { background: #9f251b; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.executive-report { min-width: 1000px; padding: 26px 0 60px; color: #162039; background: #e8edf5; }
.report-toolbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; width: 210mm; margin: 0 auto 18px; padding: 10px 12px; background: rgba(255,255,255,.96); border: 1px solid #d8dfeb; border-radius: 12px; box-shadow: 0 8px 24px rgba(20,39,76,.1); }
.report-toolbar-left, .report-toolbar-right { display: flex; align-items: center; gap: 8px; }
.report-toolbar strong { font-size: 13px; }
.report-page { position: relative; width: 210mm; height: 297mm; margin: 0 auto 18px; overflow: hidden; padding: 14mm 14mm 13mm; background: #fff; box-shadow: 0 18px 45px rgba(25,43,78,.18); }
.report-page::before { content: ""; position: absolute; left: 0; top: 0; width: 7mm; height: 100%; background: var(--brand); }
.report-head { display: flex; justify-content: space-between; gap: 12mm; padding-bottom: 7mm; border-bottom: 1px solid #dce3ef; }
.report-brand { color: var(--brand); font-size: 9pt; font-weight: 900; letter-spacing: .12em; }
.report-head h1 { margin: 3mm 0 2mm; font-size: 22pt; }
.report-head p { max-width: 125mm; margin: 0; color: #657189; font-size: 9.5pt; line-height: 1.55; }
.report-date { flex: 0 0 auto; color: #657189; font-size: 8.5pt; text-align: right; line-height: 1.6; }
.report-status { display: grid; grid-template-columns: 1.25fr .75fr; gap: 5mm; margin-top: 6mm; }
.report-message { padding: 6mm; color: #fff; background: linear-gradient(120deg, #08265f, #0e4cd7); border-radius: 4mm; }
.report-message span { color: #bed1ff; font-size: 8pt; font-weight: 900; letter-spacing: .08em; }
.report-message strong { display: block; margin-top: 3mm; font-size: 17pt; line-height: 1.4; letter-spacing: -.04em; }
.report-message p { margin: 3mm 0 0; color: #e1e9ff; font-size: 8.5pt; line-height: 1.55; }
.report-score { display: grid; align-content: center; justify-items: center; padding: 5mm; background: #f3f6fc; border: 1px solid #dce3ef; border-radius: 4mm; text-align: center; }
.report-score span { color: #657189; font-size: 8pt; font-weight: 800; }
.report-score strong { margin-top: 2mm; color: var(--brand); font-size: 30pt; letter-spacing: -.06em; }
.report-score small { color: #657189; font-size: 7.5pt; }
.report-section { margin-top: 6mm; }
.report-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 3mm; }
.report-section-head h2 { margin: 0; font-size: 12pt; }
.report-section-head span { color: #778298; font-size: 7.5pt; }
.report-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3mm; }
.report-kpi { min-height: 24mm; padding: 4mm; border: 1px solid #dce3ef; border-radius: 3mm; }
.report-kpi span { color: #6b768c; font-size: 7.5pt; font-weight: 800; }
.report-kpi strong { display: block; margin-top: 2mm; font-size: 18pt; letter-spacing: -.04em; }
.report-kpi small { display: block; margin-top: 1.5mm; color: #7a8498; font-size: 7pt; line-height: 1.4; }
.report-kpi.attention { border-top: 1.5mm solid #d76c5e; }
.report-kpi.brand { border-top: 1.5mm solid var(--brand); }
.report-decisions { display: grid; gap: 2.5mm; }
.report-decision { display: grid; grid-template-columns: 9mm 1fr 31mm; align-items: center; gap: 3mm; min-height: 16mm; padding: 3mm 4mm; background: #f7f9fd; border-radius: 3mm; }
.report-decision b { display: grid; place-items: center; width: 8mm; height: 8mm; color: #fff; background: var(--brand); border-radius: 2.5mm; font-size: 8pt; }
.report-decision strong { display: block; font-size: 8.5pt; }
.report-decision span { display: block; margin-top: 1mm; color: #6d788e; font-size: 7pt; line-height: 1.4; }
.report-decision em { color: var(--brand); font-size: 7.5pt; font-style: normal; font-weight: 900; text-align: right; }
.report-flow { display: grid; gap: 3mm; }
.report-flow-row { display: grid; grid-template-columns: 22mm 1fr 25mm; align-items: center; gap: 4mm; min-height: 21mm; padding: 3.5mm 4mm; border: 1px solid #dce3ef; border-radius: 3mm; }
.report-flow-row .flow-no { color: var(--brand); font-size: 8pt; font-weight: 900; }
.report-flow-row strong { display: block; font-size: 9pt; }
.report-flow-row p { margin: 1mm 0 0; color: #707b90; font-size: 7.2pt; line-height: 1.4; }
.report-flow-row em { color: #29344a; background: var(--brand-soft); border-radius: 999px; padding: 2mm; font-size: 7pt; font-style: normal; font-weight: 900; text-align: center; }
.report-roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
.report-roadmap article { min-height: 39mm; padding: 4mm; color: #fff; background: #0a328f; border-radius: 3mm; }
.report-roadmap article:nth-child(2) { background: #0e4cd7; }
.report-roadmap article:nth-child(3) { color: #162039; background: #eaf0ff; }
.report-roadmap span { font-size: 7.5pt; font-weight: 900; }
.report-roadmap strong { display: block; margin-top: 3mm; font-size: 11pt; }
.report-roadmap p { margin: 2mm 0 0; color: inherit; opacity: .82; font-size: 7.2pt; line-height: 1.55; }
.report-caveat { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
.report-note { padding: 4mm; background: #fff8e8; border: 1px solid #ecd49d; border-radius: 3mm; }
.report-note strong { display: block; font-size: 8pt; }
.report-note p { margin: 1.5mm 0 0; color: #715327; font-size: 7pt; line-height: 1.5; }
.report-source-mix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; }
.report-source-mix article { min-height: 28mm; padding: 4mm; border: 1px solid #dce3ef; border-top: 1.5mm solid var(--brand); border-radius: 3mm; }
.report-source-mix span { color: #667188; font-size: 7.5pt; font-weight: 850; }
.report-source-mix strong { display: block; margin-top: 2mm; color: #15213a; font-size: 18pt; letter-spacing: -.04em; }
.report-source-mix small { display: block; margin-top: 1mm; color: #778298; font-size: 6.8pt; line-height: 1.35; }
.report-architecture { display: grid; grid-template-columns: 1fr 8mm 1fr 8mm 1fr 8mm 1fr; align-items: stretch; gap: 0; padding: 4mm; background: #f5f8fe; border: 1px solid #dce3ef; border-radius: 4mm; }
.architecture-stage { min-height: 38mm; padding: 4mm; background: #fff; border: 1px solid #d8e0ed; border-radius: 3mm; }
.architecture-stage.source { color: #fff; background: #0a328f; border-color: #0a328f; }
.architecture-stage.outcome { color: #fff; background: var(--brand); border-color: var(--brand); }
.architecture-stage span { display: block; color: var(--brand); font-size: 6.8pt; font-weight: 900; letter-spacing: .06em; }
.architecture-stage.source span, .architecture-stage.outcome span { color: #cbd9ff; }
.architecture-stage strong { display: block; margin-top: 2mm; font-size: 8.5pt; }
.architecture-stage b { display: block; margin-top: 3mm; font-size: 15pt; letter-spacing: -.04em; }
.architecture-stage small { display: block; margin-top: 1mm; color: #748096; font-size: 6.5pt; line-height: 1.35; }
.architecture-stage.source small, .architecture-stage.outcome small { color: #e0e8ff; }
.report-architecture > i { position: relative; align-self: center; height: 1px; background: #91a3c7; }
.report-architecture > i::after { content: ""; position: absolute; right: -1px; top: -3px; width: 6px; height: 6px; border-top: 1.5px solid #687b9e; border-right: 1.5px solid #687b9e; transform: rotate(45deg); }
.architecture-guards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2mm; margin-top: 2mm; }
.architecture-guards span { padding: 2.2mm; color: #637087; background: #f7f9fd; border-radius: 2mm; font-size: 6.2pt; line-height: 1.35; }
.architecture-guards b { display: block; margin-bottom: .7mm; color: #24314a; font-size: 6.6pt; }
.report-operations-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
.report-collection-card, .report-quality-card { min-height: 59mm; padding: 4mm; border: 1px solid #dce3ef; border-radius: 3mm; }
.collection-line { display: flex; align-items: center; justify-content: space-between; padding: 2.5mm 0; border-bottom: 1px solid #e7ebf2; font-size: 7.5pt; }
.collection-line strong { color: var(--brand); font-size: 10pt; }
.collection-line.attention strong { color: #a24832; }
.report-collection-card > p { margin: 3mm 0 0; color: #6d788e; font-size: 7pt; line-height: 1.45; }
.report-collection-card > .collection-examples { margin-top: 2mm; padding-top: 2mm; border-top: 1px solid #e7ebf2; font-size: 6.5pt; }
.collection-examples b { color: #24314a; }
.report-quality-card > strong { display: block; padding: 3mm; color: #153c95; background: #eaf0ff; border-radius: 2.5mm; font-size: 8pt; line-height: 1.45; }
.report-quality-card ul { display: grid; gap: 0; margin: 2mm 0 0; padding: 0; list-style: none; }
.report-quality-card li { display: flex; justify-content: space-between; padding: 2.2mm 0; border-bottom: 1px solid #e7ebf2; font-size: 7pt; }
.report-quality-card li b { color: #33405a; }
.report-footer { position: absolute; left: 14mm; right: 14mm; bottom: 8mm; display: flex; justify-content: space-between; color: #8993a5; font-size: 7pt; }

@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body { min-width: 0; background: #fff; }
  .executive-report { min-width: 0; padding: 0; background: #fff; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .report-toolbar { display: none; }
  .report-page { width: 210mm; height: 297mm; margin: 0; box-shadow: none; break-after: page; page-break-after: always; }
  .report-page:last-child { break-after: auto; page-break-after: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
