:root { --ink: #e8edf2; --muted: #95a2b2; --placeholder: #b8c2cc; --line: #26313d; --panel: #151d26; --panel-alt: #121a23; --field: #0e151d; --canvas: #0d131a; --nav: #0a1320; --accent: #0064FB; --accent-deep: #0064FB; --code: #eaf3f2; }
:root[data-theme="light"] { --ink: #17212b; --muted: #566574; --placeholder: #6c7884; --line: #cbd6df; --panel: #ffffff; --panel-alt: #f3f7f9; --field: #ffffff; --canvas: #edf2f5; --nav: #ffffff; --accent: #0064FB; --accent-deep: #0064FB; --code: #17212b; }
:root[data-theme="light"] .navbar-dark .navbar-brand, :root[data-theme="light"] .navbar-dark .navbar-nav .nav-link, :root[data-theme="light"] footer .text-light { color: var(--ink) !important; }
body { background: var(--canvas); color: var(--ink); min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.navbar { background: var(--nav); } .navbar-brand { letter-spacing: 0; font-size: 1.05rem; color: var(--ink); } .brand-logo { width: 12rem; height: 3.6rem; display: block; margin: 0; padding: 0 !important; background: url('../images/network-crap-header-dark.png') center / contain no-repeat; } :root[data-theme="light"] .brand-logo { background-image: url('../images/network-crap-header-light.png'); } .brand-logo span { display: block; width: 100%; height: 100%; } .nav-link { color: var(--muted); font-size: 1rem; } .nav-link.active, .nav-link:hover { color: var(--ink); } .theme-toggle { width: 2.5rem; height: 2.5rem; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-alt); color: var(--ink); display: grid; place-items: center; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.page-heading h1 { font-size: 2rem; font-weight: 700; margin: 0 0 .35rem; } .eyebrow { color: var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .4rem; }
.tool-card, .tool-surface, .roadmap-item { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; } .tool-card { padding: 1.25rem; color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; } .tool-card:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-2px); } .tool-card h2 { font-size: 1.1rem; margin: .65rem 0; } .tool-card p, .roadmap-item p { color: var(--muted); font-size: .9rem; line-height: 1.55; } .tool-label { color: var(--accent); font-size: .72rem; font-weight: 700; text-transform: uppercase; } .tool-link { font-size: .84rem; color: #dce5eb; }
.tool-surface { padding: 1.25rem; } .form-label { font-size: .86rem; font-weight: 600; color: var(--ink); } .form-control, .form-select { background: var(--field); border-color: var(--line); color: var(--ink); } .form-control::placeholder { color: var(--placeholder); opacity: 1; } .form-control:focus, .form-select:focus { background: var(--field); border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(0,100,251,.16); color: var(--ink); } .form-select option { background: var(--panel); } .btn-primary { background: var(--accent-deep); border-color: var(--accent-deep); } .btn-primary:hover { background: #0064FB; border-color: #0064FB; }
.result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; } .result-header h2, .section-title { font-size: 1.05rem; margin: 0; } .result-row, .metric { background: var(--panel-alt); border: 1px solid var(--line); min-height: 77px; padding: .75rem; border-radius: 4px; display: flex; flex-direction: column; gap: .25rem; position: relative; } .result-row span, .metric span { color: var(--muted); font-size: .72rem; text-transform: uppercase; } .bandwidth-metric span { text-transform: none; } code { color: var(--code); font-size: .9rem; overflow-wrap: anywhere; } .copy-button { position: absolute; right: .45rem; top: .45rem; padding: .15rem .35rem; font-size: .68rem; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: transparent; } .metric strong { font-size: 1.12rem; font-weight: 600; } .rate-row { min-height: 106px; } .rate-scale { display: flex; flex-direction: column; gap: .1rem; margin-top: .1rem; } .rate-scale small { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; }
.interface-detail-title { color: var(--accent-deep); font-size: 1.2rem; }
.subinterface-label { color: #c084fc; font-size: .9rem; font-weight: 700; margin: -.6rem 0 1rem; }
.table-dark { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line); --bs-table-hover-color: var(--ink); --bs-table-hover-bg: var(--panel-alt); } .reference-table { font-size: .9rem; } .utilization { background: var(--panel-alt); border: 1px solid var(--line); border-radius: 5px; padding: 1rem; display: flex; gap: 1.5rem; align-items: center; } .utilization strong { display: block; font-size: 1.6rem; } .progress { background: var(--line); height: .6rem; }
.membership-result { padding: 1rem 1.15rem; border-radius: 5px; border-left: 4px solid; background: var(--panel); display: flex; gap: 1rem; align-items: baseline; } .membership-result span { font-size: 1.25rem; font-weight: 800; } .membership-result p { margin: 0; } .is-member { border-color: #0064FB; } .is-member span { color: #0064FB; } .not-member { border-color: #e06c75; } .not-member span { color: #ef8990; }
.analyzer-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86rem; } .privacy-note { color: #b3c3cf; font-size: .82rem; } .roadmap-item { height: 100%; padding: 1.1rem; } .roadmap-item span { color: var(--accent); font-size: .75rem; font-weight: 700; } .roadmap-item h3 { font-size: 1rem; margin: .6rem 0; }
.findings { background: var(--panel-alt); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 4px; padding: 1rem; } .findings h3 { font-size: .9rem; margin: 0 0 .55rem; } .findings li { color: var(--ink); font-size: .9rem; margin-bottom: .3rem; }
.state-down { color: #ff737d; font-weight: 700; }
.counter-normal { color: #54d38a; font-weight: 700; }
.counter-warning { color: #ffc063; font-weight: 700; }
.counter-critical { color: #ff737d; font-weight: 700; }
.severity-informational { color: #54d38a !important; font-weight: 700; }
.severity-low { color: #2c9b61 !important; font-weight: 700; }
.severity-medium { color: #f6dc5e !important; font-weight: 700; }
.severity-high { color: #ffc063 !important; font-weight: 700; }
.severity-critical { color: #ff737d !important; font-weight: 700; }
.utilization-green { color: #54d38a; font-weight: 700; }
.utilization-yellow { color: #f6dc5e; font-weight: 700; }
.utilization-orange { color: #ffc063; font-weight: 700; }
.utilization-red { color: #ff737d; font-weight: 700; }
.table > :not(caption) > * > .counter-normal, .table > :not(caption) > .counter-normal > * { color: #54d38a !important; font-weight: 700; }
.table > :not(caption) > * > .counter-warning, .table > :not(caption) > .counter-warning > * { color: #ffc063 !important; font-weight: 700; }
.table > :not(caption) > * > .counter-critical, .table > :not(caption) > .counter-critical > * { color: #ff737d !important; font-weight: 700; }
.table > :not(caption) > * > .utilization-green, .table > :not(caption) > .utilization-green > * { color: #54d38a !important; font-weight: 700; }
.table > :not(caption) > * > .utilization-yellow, .table > :not(caption) > .utilization-yellow > * { color: #f6dc5e !important; font-weight: 700; }
.table > :not(caption) > * > .utilization-orange, .table > :not(caption) > .utilization-orange > * { color: #ffc063 !important; font-weight: 700; }
.table > :not(caption) > * > .utilization-red, .table > :not(caption) > .utilization-red > * { color: #ff737d !important; font-weight: 700; }
.aggregate-name { color: #c084fc; font-weight: 700; }
.aggregate-role-active { color: #54d38a; font-weight: 700; }
.aggregate-role-passive { color: #ffc063; font-weight: 700; }
.highlight-green, .highlight-green code { color: #54d38a; }
.highlight-orange, .highlight-orange code { color: #ffc063; }
.highlight-red, .highlight-red code { color: #ff737d; }
.application-info { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; padding: 0; border: 0; background: transparent; color: var(--muted); vertical-align: middle; } .application-info:hover, .application-info:focus-visible { color: var(--accent); outline: none; }
.findings li.highlight-green { color: #54d38a; }
.findings li.highlight-orange { color: #ffc063; }
.findings li.highlight-red { color: #ff737d; }
.optics-section h3 { font-size: 1rem; margin: 0 0 .75rem; } .optics-table { font-size: .84rem; } .threshold-normal { color: #0064FB !important; } .threshold-warning { color: #ffc063 !important; } .threshold-critical { color: #ff737d !important; }
.transfer-primary strong { color: #0064FB; font-size: 1.5rem; }
.registration-details { border-top: 1px solid var(--line); } .registration-item { display: grid; grid-template-columns: minmax(11rem, 18rem) minmax(0, 1fr); gap: 1rem; padding: .72rem 0; border-bottom: 1px solid var(--line); } .registration-item > span { color: var(--muted); font-size: .8rem; font-weight: 700; text-transform: uppercase; } .registration-item code { font-family: inherit; font-size: .95rem; } .registration-item a { color: var(--accent); overflow-wrap: anywhere; }
.parser-footnote { color: var(--muted); font-size: .78rem; margin: 1rem 0 0; }
.share-panel fieldset { border: 0; min-width: 0; }
.shared-raw-output { max-height: 36rem; overflow: auto; padding: 1rem; border: 1px solid var(--line); border-radius: 4px; background: var(--field); color: var(--code); font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.troubleshooting-panel { border-left: 3px solid var(--accent); }
.troubleshooting-samples { min-width: 920px; font-size: .84rem; }
.troubleshooting-samples td:last-child { min-width: 18rem; }
.troubleshooting-sample-row { cursor: pointer; }
.troubleshooting-sample-row.is-selected > * { background: rgba(0, 100, 251, .12); }
.troubleshooting-sample-row.is-selected > :first-child { box-shadow: inset 3px 0 var(--accent); }
.sample-row-link { color: var(--ink); font-weight: 700; text-decoration: none; }
.sample-row-link:hover, .sample-row-link:focus-visible { color: var(--accent); text-decoration: underline; }
.delta-critical td:first-child, .delta-warning td:first-child { border-left: 3px solid #ff737d; }
.delta-good td:first-child { border-left: 3px solid #54d38a; }
.delta-attention td:first-child { border-left: 3px solid #ffc063; }
@media (max-width: 575px) { .registration-item { grid-template-columns: 1fr; gap: .25rem; } }
@media (max-width: 575px) { .brand-logo { width: 9.5rem; height: 3rem; } }
@media (max-width: 575px) { .page-heading h1 { font-size: 1.65rem; } .utilization { align-items: flex-start; flex-direction: column; gap: .75rem; } }
.ip-popover-trigger { text-decoration: underline dotted var(--muted); text-underline-offset: 3px; cursor: help; }
.popover { --bs-popover-bg: var(--panel); --bs-popover-border-color: var(--line); --bs-popover-header-bg: var(--panel-alt); --bs-popover-header-color: var(--ink); --bs-popover-body-color: var(--ink); --bs-popover-max-width: 20rem; }
.popover-header { font-size: .8rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.popover-body div + div { margin-top: .2rem; }