:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background: #08111d;
  color: #eef4fb;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% 0%, #173650 0, #08111d 42%); }
button, input, select { font: inherit; }
button { cursor: pointer; }
header, main { width: min(1360px, calc(100% - 40px)); margin: 0 auto; }
header { display: flex; justify-content: space-between; gap: 32px; align-items: end; padding: 72px 0 36px; }
h1 { margin: 5px 0 12px; font-size: clamp(34px, 5vw, 58px); letter-spacing: -0.045em; }
h2 { margin-top: 0; }
h3 { font-size: 24px; margin: 8px 0 4px; }
h4 { margin: 0; font-size: 16px; }
.eyebrow { margin: 0; color: #65d6bf; font-weight: 700; letter-spacing: .13em; font-size: 12px; }
.subtitle { max-width: 720px; color: #aebfd0; font-size: 18px; line-height: 1.5; }
.health { flex: 0 0 auto; padding: 10px 14px; border-radius: 999px; border: 1px solid #31485c; }
.health.ok { color: #65d6bf; border-color: #217965; background: #0b2b29; }
.health.error { color: #ff9f9f; border-color: #8d3c46; background: #32171e; }
.notice, .panel { border: 1px solid #263c50; background: rgba(13, 27, 43, .86); border-radius: 18px; padding: 22px; }
.notice { color: #bed0df; }
.notice strong { color: #fff; }
.critical-fanout-banner { margin: 22px 0; padding: 22px; color: #fff; border: 2px solid #ff626f; border-radius: 18px; background: linear-gradient(135deg, rgba(111, 15, 28, .98), rgba(55, 9, 18, .98)); box-shadow: 0 0 0 1px rgba(255, 98, 111, .25), 0 18px 55px rgba(92, 7, 20, .36); }
.critical-fanout-banner.compact { margin: 16px 0; padding: 17px; border-radius: 13px; }
.critical-fanout-banner.load-failed { border-color: #f2cd7c; background: linear-gradient(135deg, rgba(93, 56, 10, .98), rgba(45, 29, 7, .98)); }
.critical-fanout-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.critical-fanout-heading h2, .critical-fanout-heading h3 { margin: 5px 0 14px; max-width: 980px; }
.critical-fanout-priority { margin: 0; color: #ffd5d8; font-size: 12px; font-weight: 800; letter-spacing: .13em; }
.critical-fanout-count { flex: 0 0 auto; padding: 7px 10px; color: #fff; border: 1px solid #ff9da5; border-radius: 999px; background: rgba(44, 3, 10, .45); }
.critical-fanout-list { display: grid; gap: 10px; }
.critical-fanout-card { display: grid; grid-template-columns: minmax(220px, 1.25fr) minmax(220px, .9fr) minmax(240px, 1fr) auto; align-items: center; gap: 16px; padding: 14px; border: 1px solid rgba(255, 185, 191, .5); border-radius: 12px; background: rgba(36, 3, 9, .42); }
.critical-fanout-card > div { min-width: 0; }
.critical-fanout-device { display: block; font-size: 17px; overflow-wrap: anywhere; }
.critical-fanout-meta { display: block; margin-top: 4px; color: #ffd5d8; font-size: 12px; overflow-wrap: anywhere; }
.critical-fanout-link { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; padding: 8px 11px; color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; border: 1px solid #ffabb2; border-radius: 9px; background: rgba(93, 5, 17, .7); }
.critical-fanout-link:hover, .critical-fanout-link:focus-visible { background: #8d1627; outline: 3px solid rgba(255, 255, 255, .2); }
.critical-fanout-error { margin: 0; font-weight: 700; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 22px 0; }
.cards article { min-height: 138px; border: 1px solid #263c50; background: rgba(13, 27, 43, .82); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; }
.cards span { color: #91a8bb; }
.cards strong { font-size: 32px; }
.cards small { margin-top: 8px; color: #91a8bb; }
.compliance-panel { margin-bottom: 22px; }
.compliance-coverage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 22px; }
.compliance-coverage > article { padding: 16px; border: 1px solid #365269; border-radius: 12px; background: #0a1726; }
.compliance-coverage-heading { display: flex; justify-content: space-between; gap: 12px; }
.compliance-coverage-heading span, .compliance-meta, .compliance-ttl { color: #91a8bb; }
.coverage-meter { height: 9px; margin: 12px 0; overflow: hidden; border-radius: 99px; background: #20364a; }
.coverage-meter span { display: block; height: 100%; border-radius: inherit; background: #65d6bf; }
.compliance-meta { margin: 0; line-height: 1.5; }
.compliance-ttl { margin: 7px 0 0; font-size: 12px; }
.compliance-details { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 18px; }
.compliance-details > div { min-width: 0; }
.compliance-priorities { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.priority-card { display: grid; gap: 7px; padding: 12px; border: 1px solid #365269; border-radius: 10px; background: #0a1726; }
.priority-card span { color: #91a8bb; font-size: 11px; }
.priority-card strong { font-size: 22px; }
.priority-p1 { border-color: #8d3c46; }
.priority-p2 { border-color: #9a6238; }
.priority-p3, .priority-p4 { border-color: #7c672e; }
.compliance-reasons { display: grid; gap: 7px; max-height: 210px; overflow: auto; }
.compliance-reasons article { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #263c50; border-radius: 9px; background: #0a1726; }
.compliance-reasons code { color: #f2cd7c; overflow-wrap: anywhere; }
.lines-page-header { align-items: center; }
.lines-panel { margin: 22px 0 48px; }
.line-list { display: grid; gap: 14px; margin-top: 18px; }
.line-card { padding: 17px; border: 1px solid #365269; border-left-width: 4px; border-radius: 13px; background: #091725; }
.line-card.line-match { border-left-color: #65d6bf; }
.line-card.line-mismatch { border-left-color: #ff7474; }
.line-card.line-unknown { border-left-color: #f2cd7c; }
.line-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.line-card-heading h3 { margin: 0; font-size: 19px; overflow-wrap: anywhere; }
.line-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 15px; }
.line-side { min-width: 0; padding: 14px; border: 1px solid #263c50; border-radius: 11px; background: #0a1726; }
.line-side > h4:first-child { margin-bottom: 10px; color: #9dccff; }
.line-fact { display: grid; grid-template-columns: minmax(115px, .6fr) auto minmax(200px, 1fr); gap: 9px; align-items: start; padding: 10px 0; border-top: 1px solid #20364a; }
.line-fact-values { display: grid; gap: 3px; color: #bed0df; font-size: 12px; }
.line-sources { grid-column: 1 / -1; color: #718da4; font: 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.line-vlan-title { margin-top: 15px; padding-top: 12px; border-top: 2px solid #31485c; }
.line-vlan-empty { padding: 12px 0; color: #829aaf; }
.badge.line-match { color: #7be0c7; border-color: #217965; background: #0b2b29; }
.badge.line-mismatch { color: #ffabab; border-color: #8d3c46; background: #32171e; }
.badge.line-unknown { color: #f2cd7c; border-color: #7c672e; background: #302910; }
.badge.line-not_applicable { color: #c3cfda; border-color: #596b7a; background: #202b35; }
.primary-navigation { display: flex; flex-wrap: wrap; gap: 10px; margin: -6px 0 22px; }
.product-page { background: radial-gradient(circle at 82% 0%, #19445a 0, #08111d 38%); }
.product-hero, .product-main, .product-footer { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.product-hero { align-items: center; padding-top: 64px; }
.product-hero h1 { max-width: 900px; }
.product-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.primary-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 10px 15px; color: #041713; font-weight: 800; text-decoration: none; border: 1px solid #65d6bf; border-radius: 10px; background: #65d6bf; }
.primary-button:hover, .primary-button:focus-visible { background: #8fe7d5; outline: 3px solid rgba(101, 214, 191, .24); }
.product-version-card { min-width: 230px; display: grid; gap: 8px; padding: 22px; border: 1px solid #365269; border-radius: 18px; background: rgba(9, 23, 37, .9); }
.product-version-card strong { color: #65d6bf; font-size: 32px; }
.product-version-card span { color: #aebfd0; }
.product-main { display: grid; gap: 22px; padding-bottom: 42px; }
.product-section { padding: 28px; border: 1px solid #263c50; border-radius: 18px; background: rgba(13, 27, 43, .88); }
.product-section > h2 { margin: 7px 0 18px; font-size: clamp(26px, 4vw, 38px); }
.product-section p, .product-section li { color: #bed0df; line-height: 1.6; }
.product-section code { color: #9dccff; overflow-wrap: anywhere; }
.product-grid { display: grid; gap: 12px; }
.product-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-grid article, .product-pricing article { padding: 18px; border: 1px solid #31485c; border-radius: 13px; background: #091725; }
.product-grid h3, .product-pricing strong { margin-top: 0; color: #eef4fb; }
.product-grid p { margin-bottom: 0; }
.product-boundary { margin: 18px 0 0; padding: 14px 16px; border-left: 3px solid #f2cd7c; background: #24200f; }
.product-pricing { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.product-pricing article { display: grid; align-content: start; gap: 9px; }
.product-pricing article > span { color: #91a8bb; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.product-pricing article > strong { font-size: 21px; }
.product-pricing article > p { margin: 0; font-size: 13px; }
.product-pricing .featured { border-color: #217965; background: #0b2b29; }
.product-support { display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; }
.product-support h3 { margin-top: 0; }
.product-footer { padding: 0 0 36px; color: #718da4; font-size: 13px; }
.actions-panel { margin: 22px 0 48px; }
.utilization-panel { margin: 22px 0 48px; }
.utilization-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 16px 0; }
.utilization-summary article { display: grid; gap: 6px; padding: 12px; border: 1px solid #263c50; border-radius: 10px; background: #0a1726; }
.utilization-summary span { color: #829aaf; font-size: 11px; }
.utilization-summary strong { font-size: 21px; }
.utilization-summary .utilization-intervals { grid-column: span 2; }
.utilization-filters { display: grid; grid-template-columns: repeat(2, minmax(190px, 280px)); gap: 12px; margin: 18px 0; }
.utilization-filters label { display: grid; gap: 6px; color: #91a8bb; font-size: 12px; }
.utilization-list { display: grid; gap: 9px; }
.utilization-card { display: grid; grid-template-columns: minmax(210px, 1.2fr) minmax(200px, 1fr) minmax(120px, .55fr) minmax(210px, 1fr) auto; gap: 14px; align-items: center; padding: 14px; border: 1px solid #263c50; border-left-width: 4px; border-radius: 11px; background: #0a1726; }
.utilization-in_use { border-left-color: #65d6bf; }
.utilization-transit_reserve { border-left-color: #9dccff; }
.utilization-observation { border-left-color: #718da4; }
.utilization-candidate { border-left-color: #bc9dff; }
.utilization-telemetry_gap { border-left-color: #ff7474; }
.utilization-field_check { border-left-color: #f2cd7c; }
.candidate-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 22px 0 48px; }
.candidate-wide { grid-column: 1 / -1; }
.candidate-path { display: grid; gap: 7px; padding-left: 26px; }
.candidate-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.candidate-metrics div, .candidate-coverage div { display: grid; gap: 5px; padding: 11px; border: 1px solid #263c50; border-radius: 9px; background: #0a1726; }
.candidate-metrics span, .candidate-coverage span, .candidate-timeline span { color: #91a8bb; font-size: 12px; }
.candidate-coverage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.candidate-timeline { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 7px; max-height: 520px; overflow: auto; }
.candidate-timeline article { display: grid; gap: 4px; padding: 10px; border: 1px solid #263c50; border-radius: 9px; background: #0a1726; }
.action-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 16px 0; }
.action-summary article { display: grid; gap: 6px; padding: 12px; border: 1px solid #263c50; border-radius: 10px; background: #0a1726; }
.action-summary span { color: #829aaf; font-size: 11px; }
.action-summary strong { font-size: 21px; }
.action-list { display: grid; gap: 9px; }
.action-card { display: grid; grid-template-columns: minmax(210px, 1fr) minmax(230px, 1fr) minmax(260px, 1.2fr) auto; gap: 14px; align-items: center; padding: 14px; border: 1px solid #263c50; border-left-width: 4px; border-radius: 11px; background: #0a1726; }
.action-automatic_check { border-left-color: #65d6bf; }
.action-operator_decision { border-left-color: #9dccff; }
.action-physical_walk { border-left-color: #f2cd7c; }
.action-change_draft { border-left-color: #bc9dff; }
.action-evidence { display: block; color: #91a8bb; font: 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.features div { display: flex; gap: 14px; align-items: center; padding: 15px; background: #0a1726; border-radius: 12px; color: #c7d4df; }
.features b { color: #65d6bf; }
.inventory-panel { margin-bottom: 22px; overflow: hidden; }
.events-panel { margin-bottom: 22px; }
.notifications-panel { margin-bottom: 22px; }
.topology-panel { margin-bottom: 22px; }
.network-model-panel { margin-bottom: 22px; }
.network-model-panel .history-heading { margin-top: 20px; }
.port-profile-heading > div { display: flex; gap: 10px; align-items: baseline; }
.approved-exception-heading > div { display: flex; gap: 10px; align-items: baseline; }
.policy-package-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 12px 0; }
.policy-package-controls label { display: grid; gap: 5px; color: #91a8bb; font-size: 12px; }
.policy-package-preview { white-space: pre-wrap; color: #91a8bb; min-height: 20px; }
.topology-note { color: #91a8bb; margin: 8px 0 18px; }
.approved-topology { padding: 14px; margin: 14px 0 22px; border: 1px solid #217965; border-radius: 13px; background: #0b211f; }
.approved-topology .history-heading { margin-top: 0; }
.approved-topology .history-heading > div { display: flex; gap: 10px; align-items: baseline; }
.approved-topology .topology-links { border-color: #217965; }
.approved-topology-history { margin-top: 10px; color: #91a8bb; font-size: 12px; }
.observed-topology-heading { margin-top: 0; }
.topology-coverage { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; }
.topology-coverage article { display: grid; gap: 5px; padding: 11px 12px; background: #0a1726; border: 1px solid #263c50; border-radius: 10px; }
.topology-coverage span { color: #829aaf; font-size: 11px; }
.topology-coverage strong { font-size: 19px; }
.topology-map { min-height: 340px; overflow: auto; border: 1px solid #263c50; border-radius: 13px; background: radial-gradient(circle at center, #102b40, #081522 70%); }
.topology-map svg { display: block; min-width: 760px; width: 100%; min-height: 340px; }
.topology-edge { stroke: #f2cd7c; stroke-width: 3; opacity: .88; }
.topology-edge.bidirectional { stroke: #65d6bf; }
.topology-edge.unresolved { stroke: #718da4; stroke-dasharray: 8 7; }
.topology-node circle { fill: #15334a; stroke: #65d6bf; stroke-width: 2; }
.topology-node.discovered circle { fill: #262d39; stroke: #91a8bb; stroke-dasharray: 5 4; }
.topology-node text { fill: #eef4fb; font-size: 12px; font-weight: 650; pointer-events: none; }
.topology-node.clickable { cursor: pointer; }
.topology-node.clickable:hover circle, .topology-node.clickable:focus circle { stroke: #fff; stroke-width: 4; }
.topology-links { margin-top: 14px; overflow: auto; border: 1px solid #263c50; border-radius: 13px; }
.topology-table { min-width: 820px; }
.topology-table tbody tr { cursor: default; }
.badge.bidirectional { color: #7be0c7; border-color: #217965; background: #0b2b29; }
.badge.unidirectional { color: #f2cd7c; border-color: #7c672e; background: #302910; }
.badge.unresolved { color: #c3cfda; border-color: #596b7a; background: #202b35; }
.badge.supported { color: #7be0c7; border-color: #217965; background: #0b2b29; }
.badge.privacy_blocked, .badge.failed, .badge.denied { color: #ffabab; border-color: #8d3c46; background: #32171e; }
.badge.not_implemented, .badge.not_configured, .badge.partial, .badge.stale { color: #f2cd7c; border-color: #7c672e; background: #302910; }
.badge.unsupported { color: #c3cfda; border-color: #596b7a; background: #202b35; }
.fdb-coverage-table { min-width: 1050px; }
.fdb-page-link { margin-top: 12px; width: fit-content; }
.fanout-page-header { align-items: center; }
.fanout-header-actions { display: flex; align-items: center; gap: 12px; }
.fanout-panel, .coverage-gap-panel { margin-bottom: 22px; }
.fanout-route-panel { margin-bottom: 22px; border-color: #47718f; }
.fanout-override-panel { margin-bottom: 22px; border-color: #806d32; }
.override-form { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)) auto; gap: 12px; align-items: end; margin: 18px 0 22px; }
.override-form label, .override-history-heading label { display: grid; gap: 6px; color: #91a8bb; font-size: 12px; }
.override-history-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 10px; }
.override-history-heading h3 { margin: 0; }
.override-history-heading label { min-width: 260px; }
.override-history { display: grid; gap: 9px; }
.override-card { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(210px, auto) auto; gap: 14px; align-items: center; padding: 13px 14px; background: #0a1726; border: 1px solid #263c50; border-radius: 10px; }
.override-period { display: grid; justify-items: start; gap: 3px; }
.fanout-actions { display: flex; gap: 7px; }
.badge.manual { margin: 6px 0 0 7px; color: #f7df9a; border-color: #7c672e; background: #302910; font-weight: 800; }
.route-summary { display: grid; grid-template-columns: auto minmax(240px, 1fr) auto; gap: 14px; align-items: center; padding: 14px; background: #0a1726; border: 1px solid #263c50; border-radius: 11px; }
.route-target { display: grid; gap: 4px; }
.badge.route-confirmed { color: #7be0c7; border-color: #217965; background: #0b2b29; }
.badge.route-partial { color: #f7df9a; border-color: #7c672e; background: #302910; }
.badge.route-unavailable { color: #ffabab; border-color: #8d3c46; background: #32171e; }
.route-reasons { margin: 12px 0; padding: 10px 14px; color: #f7df9a; background: #302910; border: 1px solid #7c672e; border-radius: 10px; }
.route-reasons p { margin: 4px 0; }
.route-path { display: grid; gap: 9px; margin: 14px 0; }
.route-hop { display: grid; grid-template-columns: 34px minmax(180px, 1fr) auto minmax(180px, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; background: #0a1726; border: 1px solid #263c50; border-radius: 10px; }
.route-hop-number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #08131f; background: #65d6bf; font-weight: 800; }
.route-device { display: grid; gap: 3px; }
.route-link { color: #9cc9e7; white-space: nowrap; }
.safe-recommendation { margin-top: 15px; padding: 16px 18px; border: 2px solid #65d6bf; border-radius: 12px; background: #092522; }
.safe-recommendation h3 { margin: 4px 0 12px; color: #9aebd9; }
.safe-recommendation ol, .safe-recommendation ul { margin: 8px 0; padding-left: 24px; }
.route-prohibited { color: #ffabab; font-weight: 700; }
.fanout-filters { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: 12px; margin: 22px 0; align-items: end; }
.fanout-filters label { display: grid; gap: 6px; color: #91a8bb; font-size: 12px; }
.fanout-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin: 10px 0 16px; }
.fanout-summary article { display: grid; gap: 5px; padding: 12px; background: #0a1726; border: 1px solid #263c50; border-radius: 10px; }
.fanout-summary span { color: #829aaf; font-size: 11px; }
.fanout-summary strong { font-size: 20px; }
.fanout-table-wrap { overflow: auto; border: 1px solid #263c50; border-radius: 13px; }
.fanout-table { min-width: 1260px; }
.coverage-gap-table { min-width: 980px; }
.fanout-row.priority-p1 { box-shadow: inset 4px 0 #ff626f; background: rgba(75, 10, 20, .34); }
.fanout-row.priority-p2 { box-shadow: inset 4px 0 #f2cd7c; }
.fanout-row.priority-p3 { box-shadow: inset 4px 0 #718da4; }
.growth { display: block; margin-top: 4px; color: #829aaf; font-size: 12px; }
.growth.positive { color: #ff9f9f; font-weight: 700; }
.badge.p1 { color: #fff; border-color: #ff626f; background: #7a1222; font-weight: 800; }
.badge.p2 { color: #f7df9a; border-color: #7c672e; background: #302910; }
.badge.p3 { color: #c3cfda; border-color: #596b7a; background: #202b35; }
.badge.new { margin: 6px 0 0 7px; color: #fff; border-color: #ff626f; background: #7a1222; font-weight: 800; }
.badge.good { color: #7be0c7; border-color: #217965; background: #0b2b29; }
.badge.insufficient { color: #ffabab; border-color: #8d3c46; background: #32171e; }
.topology-change-heading { margin-top: 22px; }
.topology-change-heading > div { display: flex; gap: 10px; align-items: baseline; }
.topology-change-list { display: grid; gap: 9px; }
.topology-change { display: grid; grid-template-columns: minmax(280px, 1.4fr) minmax(190px, .7fr) auto; gap: 14px; align-items: center; padding: 13px 14px; background: #0a1726; border: 1px solid #263c50; border-left: 4px solid #f2cd7c; border-radius: 11px; }
.topology-change.changed, .topology-change.missing { border-left-color: #ff8f8f; }
.topology-change.unresolved { border-left-color: #91a8bb; }
.topology-change.accepted { border-left-color: #65d6bf; }
.topology-change.resolved, .topology-change.rejected { opacity: .72; }
.badge.pending { color: #f2cd7c; border-color: #7c672e; background: #302910; }
.badge.accepted { color: #7be0c7; border-color: #217965; background: #0b2b29; }
.badge.rejected, .badge.resolved { color: #c3cfda; border-color: #596b7a; background: #202b35; }
.notification-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 22px; }
.notification-channels article { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 14px; background: #0a1726; border: 1px solid #263c50; border-radius: 12px; }
.notification-channels .event-meta { grid-column: 1 / -1; }
.notification-deliveries { display: grid; gap: 8px; }
.notification-deliveries article { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(190px, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; background: #0a1726; border: 1px solid #263c50; border-radius: 10px; }
.notification-rule-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 16px; margin: 12px 0 24px; }
.notification-rules { display: grid; align-content: start; gap: 8px; }
.notification-rule { display: grid; grid-template-columns: 1fr auto; gap: 7px; padding: 12px 14px; background: #0a1726; border: 1px solid #263c50; border-radius: 10px; }
.notification-rule .event-meta { grid-column: 1 / -1; }
.notification-rule-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; background: #091725; border: 1px solid #365269; border-radius: 12px; }
.notification-rule-form label { display: grid; gap: 5px; color: #91a8bb; font-size: 12px; }
.notification-rule-form label:first-of-type, .notification-rule-form .checkbox-field, .rule-actions { grid-column: 1 / -1; }
.notification-rule-form .checkbox-field { display: flex; align-items: center; gap: 8px; }
.notification-rule-form .checkbox-field input { width: auto; min-height: auto; }
.rule-actions { display: flex; gap: 8px; }
.notification-policy-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 24px; padding: 14px; background: #091725; border: 1px solid #365269; border-radius: 12px; }
.notification-policy-form > label, .notification-policy-form fieldset { display: grid; gap: 6px; color: #91a8bb; font-size: 12px; }
.notification-policy-form fieldset { border: 1px solid #31485c; border-radius: 10px; padding: 10px; align-content: start; }
.notification-policy-form fieldset .checkbox-field { display: flex; align-items: center; gap: 8px; }
.notification-policy-form fieldset input { width: auto; min-height: auto; }
.policy-actions { display: flex; align-items: end; gap: 8px; }
.policy-preview { grid-column: 1 / -1; text-align: left; padding: 14px; border: 1px solid #263c50; border-radius: 10px; line-height: 1.5; }
.event-filter { display: grid; gap: 6px; min-width: 190px; color: #91a8bb; font-size: 13px; }
.event-list { display: grid; gap: 10px; margin-top: 16px; }
.event-card { display: grid; grid-template-columns: minmax(190px, 1.3fr) repeat(2, minmax(110px, .7fr)) auto; gap: 14px; align-items: center; border: 1px solid #263c50; background: #0a1726; border-radius: 12px; padding: 14px; }
.event-card.problem { border-left: 4px solid #ff7474; }
.event-card.warning { border-left: 4px solid #f2cd7c; }
.event-card.unknown { border-left: 4px solid #9dccff; }
.event-card.ok { border-left: 4px solid #65d6bf; }
.event-card.linked-event { outline: 3px solid #65d6bf; outline-offset: 3px; }
.event-title { font-weight: 650; }
.event-meta { display: block; color: #829aaf; font-size: 12px; margin-top: 4px; }
.event-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.event-actions .secondary-button { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.next-panel { margin-bottom: 48px; }
.section-heading, .history-heading, .pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.heading-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.section-heading h2 { margin: 6px 0 0; }
.counter, .muted, #history-count, #interface-count { color: #91a8bb; }
.filters { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(160px, 1fr)) auto; gap: 12px; margin: 22px 0; align-items: end; }
.filters label { display: grid; gap: 7px; color: #91a8bb; font-size: 13px; }
input, select { width: 100%; min-height: 42px; color: #eef4fb; background: #081522; border: 1px solid #31485c; border-radius: 10px; padding: 9px 11px; outline: none; }
input:focus, select:focus, button:focus-visible, tr:focus-visible { border-color: #65d6bf; box-shadow: 0 0 0 3px rgba(101, 214, 191, .15); outline: none; }
.secondary-button, .icon-button { color: #dce8f2; border: 1px solid #375167; background: #102338; border-radius: 10px; min-height: 42px; padding: 9px 14px; }
.secondary-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.secondary-button:hover, .icon-button:hover { border-color: #65d6bf; color: #65d6bf; }
.secondary-button:disabled { cursor: default; opacity: .4; }
.inventory-message { min-height: 22px; color: #ffb4b4; margin-bottom: 8px; }
.inventory-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.inventory-layout.has-detail { grid-template-columns: minmax(0, 1.55fr) minmax(330px, .85fr); }
.table-area { min-width: 0; }
.table-wrap { overflow: auto; border: 1px solid #263c50; border-radius: 13px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { color: #91a8bb; text-align: left; font-weight: 600; padding: 12px 14px; background: #091725; white-space: nowrap; }
td { padding: 13px 14px; border-top: 1px solid #20364a; vertical-align: middle; }
tbody tr { background: rgba(8, 21, 34, .55); cursor: pointer; transition: background .15s ease; }
tbody tr:hover, tbody tr.selected { background: #132d41; }
.device-name { display: block; color: #fff; font-weight: 650; }
.device-model { display: block; color: #829aaf; font-size: 12px; margin-top: 3px; }
.badge { display: inline-flex; align-items: center; border: 1px solid #395268; color: #bed0df; background: #102236; border-radius: 999px; padding: 4px 8px; font-size: 12px; white-space: nowrap; }
.badge.active, .badge.confirmed { color: #7be0c7; border-color: #217965; background: #0b2b29; }
.badge.offline, .badge.conflict { color: #ffabab; border-color: #8d3c46; background: #32171e; }
.badge.observed { color: #9dccff; border-color: #356b9d; background: #112b43; }
.badge.planned, .badge.unverified { color: #f2cd7c; border-color: #7c672e; background: #302910; }
.pagination { margin-top: 14px; color: #91a8bb; }
.device-detail { position: relative; min-width: 0; border: 1px solid #365269; background: #091725; border-radius: 14px; padding: 20px; }
.icon-button { position: absolute; right: 14px; top: 14px; width: 36px; min-height: 36px; padding: 0; font-size: 24px; line-height: 1; }
.device-fields { display: grid; grid-template-columns: minmax(110px, .8fr) 1.4fr; gap: 0; margin: 20px 0 26px; font-size: 14px; }
.device-fields dt, .device-fields dd { margin: 0; padding: 8px 0; border-bottom: 1px solid #20364a; overflow-wrap: anywhere; }
.device-fields dt { color: #829aaf; }
.device-fields dd { color: #e6eef6; }
.history-heading { margin-bottom: 12px; }
.dependency-list { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.dependency-editor { display: grid; gap: 7px; color: #91a8bb; font-size: 13px; }
.dependency-editor select { min-height: 112px; }
.dependency-save { margin: 10px 0 24px; }
.interface-list { overflow: auto; margin-bottom: 24px; border: 1px solid #20364a; border-radius: 10px; }
.interface-table { min-width: 610px; font-size: 12px; }
.interface-table tbody tr { cursor: default; }
.interface-table th, .interface-table td { padding: 9px 10px; }
.observation-list { display: grid; gap: 9px; max-height: 520px; overflow: auto; padding-right: 4px; }
.observation { border: 1px solid #20364a; border-radius: 10px; padding: 11px; background: #0c1d2d; }
.observation-top { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.observation-type { font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.observation-value { color: #bdd0df; margin: 8px 0; font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.observation-meta { color: #718da4; font-size: 11px; line-height: 1.4; }
.empty-state { text-align: center; color: #829aaf; padding: 36px 14px; }
@media (max-width: 760px) {
  header { align-items: start; flex-direction: column; padding-top: 38px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .compliance-coverage, .compliance-details { grid-template-columns: 1fr; }
  .compliance-priorities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .line-comparison, .line-fact { grid-template-columns: 1fr; }
  .line-card-heading { flex-direction: column; }
  .action-summary { grid-template-columns: 1fr 1fr; }
  .action-card { grid-template-columns: 1fr; }
  .utilization-summary, .utilization-filters { grid-template-columns: 1fr 1fr; }
  .utilization-card { grid-template-columns: 1fr; }
  .candidate-layout, .candidate-metrics, .candidate-coverage { grid-template-columns: 1fr; }
  .candidate-wide { grid-column: auto; }
  .features { grid-template-columns: 1fr; }
  .filters { grid-template-columns: 1fr; }
  .section-heading { align-items: start; flex-direction: column; }
  .heading-actions { justify-content: flex-start; }
  .inventory-layout.has-detail { grid-template-columns: 1fr; }
  .event-card { grid-template-columns: 1fr; }
  .notification-channels, .notification-deliveries article, .notification-rule-layout, .notification-rule-form, .notification-policy-form { grid-template-columns: 1fr; }
  .topology-coverage { grid-template-columns: 1fr 1fr; }
  .topology-change { grid-template-columns: 1fr; }
  .fanout-page-header, .fanout-header-actions { align-items: flex-start; flex-direction: column; }
  .fanout-filters { grid-template-columns: 1fr; }
  .fanout-summary { grid-template-columns: 1fr 1fr; }
  .route-summary, .route-hop { grid-template-columns: 1fr; }
  .route-hop-number { display: none; }
  .override-form, .override-card { grid-template-columns: 1fr; }
  .override-history-heading { align-items: stretch; flex-direction: column; }
  .critical-fanout-heading { flex-direction: column; }
  .critical-fanout-card { grid-template-columns: 1fr; }
  .event-actions { justify-content: flex-start; }
  .device-detail { grid-row: 1; }
  th:nth-child(3), td:nth-child(3), th:nth-child(5), td:nth-child(5) { display: none; }
  .device-fields { grid-template-columns: 1fr; }
  .device-fields dt { border-bottom: 0; padding-bottom: 0; }
  .product-grid-two, .product-grid-three, .product-pricing, .product-support { grid-template-columns: 1fr; }
  .product-version-card { width: 100%; }
}