:root { --ui-bg:#f3f5f9; --ui-surface:#fff; --ui-soft:#edf1f7; --ui-text:#202d43; --ui-muted:#52627a; --ui-border:#d4dce8; --ui-accent:#315ccf; --ui-accent-soft:#e9efff; --ui-danger:#b72f40; --ui-success:#176c50; --ui-shadow:0 5px 22px rgba(25,45,80,.045); }
:root[data-bs-theme="dark"] { --ui-bg:#101620; --ui-surface:#192230; --ui-soft:#222e40; --ui-text:#e4ecf7; --ui-muted:#a7b7cd; --ui-border:#3b4b62; --ui-accent:#9ab8ff; --ui-accent-soft:#25385b; --ui-danger:#ff9da9; --ui-success:#8dddbc; --ui-shadow:none; }
.app-body { margin:0; background:var(--ui-bg); color:var(--ui-text); font:15px/1.6 system-ui,-apple-system,'Segoe UI',sans-serif; --bs-body-bg:var(--ui-bg); --bs-body-color:var(--ui-text); --bs-secondary-color:var(--ui-muted); --bs-border-color:var(--ui-border); --bs-tertiary-bg:var(--ui-soft); --bs-link-color:var(--ui-accent); }
.app-body * { box-sizing:border-box; }
.app-body a { color:var(--ui-accent); text-underline-offset:3px; }
.app-body :focus-visible { outline:3px solid var(--ui-accent); outline-offset:3px; }
.app-skip { position:fixed; left:16px; top:-100px; z-index:2000; background:var(--ui-surface); padding:12px; }
.app-skip:focus { top:12px; }
.app-body .container { max-width:1440px; }
.app-body .app-navigation { background:var(--ui-surface); border-bottom:1px solid var(--ui-border); padding:16px 20px; }
.app-body .navbar-brand { color:var(--ui-text); font-weight:750; letter-spacing:-.6px; font-size:21px; }
.brand-symbol { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:#315ccf; color:white; margin-right:5px; font-size:28px; }
.app-body .nav-link { color:var(--ui-muted); border-radius:8px; padding:9px 13px!important; font-weight:550; }
.app-body .nav-link:hover { background:var(--ui-soft); color:var(--ui-text); }
.app-body .nav-link.active { color:var(--ui-accent); background:var(--ui-accent-soft); font-weight:700; }
.theme-control { display:flex; align-items:center; gap:8px; margin:0 12px; font-size:12px; color:var(--ui-muted); }
.theme-control select { color:var(--ui-text); background:var(--ui-soft); border:1px solid var(--ui-border); border-radius:8px; padding:7px; font-size:12px; max-width:150px; }
.app-body .app-main { padding:12px 32px 32px; }
.app-main > .container { padding:0; }
.app-body h1,.app-body h2,.app-body h3 { color:var(--ui-text); font-weight:700; letter-spacing:-.025em; }
.app-body h2 { font-size:26px; margin-bottom:24px; }
.app-body h3 { font-size:20px; }
.app-body .text-muted,.app-body .form-text,.app-body .date-muted { color:var(--ui-muted)!important; }
.app-body .card,.app-body .modal-content,.app-body .dropdown-menu { background:var(--ui-surface); color:var(--ui-text); border:1px solid var(--ui-border); border-radius:14px; box-shadow:var(--ui-shadow); }
.app-body .card-header,.app-body .modal-header,.app-body .modal-footer { background:transparent; border-color:var(--ui-border); }
.app-body .dropdown-item { color:var(--ui-text); }
.app-body .dropdown-item:hover { background:var(--ui-soft); }
.app-body .form-label,.app-body label { font-weight:550; }
.app-body .form-control,.app-body .form-select { background-color:var(--ui-surface); color:var(--ui-text); border-color:var(--ui-border); border-radius:9px; min-height:40px; }
.app-body .form-control::placeholder { color:var(--ui-muted); opacity:.85; }
.app-body .form-control:focus,.app-body .form-select:focus { border-color:var(--ui-accent); box-shadow:0 0 0 3px var(--ui-accent-soft); }
.app-body textarea { line-height:1.6; }
.app-body .form-check-input { background-color:var(--ui-surface); border-color:var(--ui-muted); }
.app-body .form-check-input:checked { background-color:#315ccf; border-color:#315ccf; }
.app-body .btn { border-radius:8px; font-weight:600; min-height:36px; padding:8px 14px; box-shadow:none; }
.app-body .btn-primary,.app-body .btn-success,.app-body .btn-warning,.app-body .btn-info { background:#315ccf; border-color:#315ccf; color:#fff; }
.app-body .btn-primary:hover,.app-body .btn-success:hover,.app-body .btn-warning:hover,.app-body .btn-info:hover { background:#254bae; border-color:#254bae; }
.app-body .btn-outline-secondary,.app-body .btn-outline-primary { color:var(--ui-text); border-color:var(--ui-border); background:var(--ui-surface); }
.app-body .btn-outline-secondary:hover,.app-body .btn-outline-primary:hover { background:var(--ui-accent-soft); color:var(--ui-accent); border-color:var(--ui-accent); }
.app-body .btn-outline-danger { color:var(--ui-danger); border-color:var(--ui-border); }
.app-body .btn-outline-danger:hover { background:#a52c3b; color:#fff; }
.app-body .bg-light,.app-body .bg-white { background-color:var(--ui-surface)!important; }
.app-body .text-dark { color:var(--ui-text)!important; }
.app-body .table { --bs-table-bg:var(--ui-surface); --bs-table-color:var(--ui-text); --bs-table-border-color:var(--ui-border); }
.app-body .table-light { --bs-table-bg:var(--ui-soft); --bs-table-color:var(--ui-text); }
.app-body .accordion-item { background:var(--ui-surface); border:1px solid var(--ui-border); border-radius:12px!important; margin-bottom:12px; overflow:hidden; box-shadow:var(--ui-shadow); }
.app-body .accordion-button { background:var(--ui-surface)!important; color:var(--ui-text); box-shadow:none; padding:12px; font-weight:650; }
.app-body .accordion-button:not(.collapsed) { background:var(--ui-accent-soft)!important; color:var(--ui-accent); }
.app-body .accordion-body { border-top:1px solid var(--ui-border); padding:24px; }
.app-body .accordion-item.search-item { margin-left:24px; border-left:3px solid var(--ui-accent); background:var(--ui-surface); }
.app-body .accordion-header .d-flex { flex-wrap:wrap!important; }
.app-body .accordion-header .flex-grow-1 { min-width:180px; }
.app-body pre,.app-body .hljs,.app-body .result-inline,.app-body .result-source { color:var(--ui-text); background:var(--ui-soft); border-radius:8px; padding:12px; }
.app-body #terminal-wrap > div { background:var(--ui-soft)!important; color:var(--ui-text)!important; }
.app-body .result-service,.app-body .result-downloads a { color:var(--ui-muted); border-color:var(--ui-border); }
.app-body .result-downloads > li,.app-body .search-path-row { border-color:var(--ui-border); }
.app-body .initial-table-wrap { border-color:var(--ui-border); }
.app-body .initial-table th { background:var(--ui-soft); color:var(--ui-text); }
.app-body .initial-table td { color:var(--ui-text)!important; background:var(--ui-surface); }
.app-body .initial-table td:not(:first-child),.app-body .search-path-line { color:var(--ui-accent)!important; }
.app-body .initial-table th,.app-body .initial-table td { border-color:var(--ui-border); }
.app-body .graph-viewer { color:var(--ui-text); background:var(--ui-surface); }
.app-body .graph-viewer-viewport { background:var(--ui-bg); }
.app-body .graph-viewer-toolbar button { color:var(--ui-text); background:var(--ui-soft); border-color:var(--ui-border); }
/* Diagrams keep their original pixels; only their surrounding controls change theme. */
.app-body .ne-root { --ne-bg:var(--ui-surface); --ne-border:var(--ui-border); --ne-muted:var(--ui-muted); --ne-accent:var(--ui-accent); --ne-err:var(--ui-danger); color:var(--ui-text); }
.app-body .ne-cv,.app-body .ne-btn,.app-body .ne-combo-list,.app-body .ne-pair,.app-body .ne-seg { background:var(--ui-surface); color:var(--ui-text); border-color:var(--ui-border); }
.app-body .ne-root input,.app-body .ne-root select { background:var(--ui-surface); color:var(--ui-text); border-color:var(--ui-border); }
.app-body .ne-cv-bar,.app-body .ne-insp,.app-body .ne-out { background:var(--ui-soft); color:var(--ui-text); }
.app-body .ne-root .ne-on,.app-body .ne-combo-opt:hover,.app-body .ne-combo-opt.ne-active { background:var(--ui-accent-soft); color:var(--ui-accent); }
.app-body .ne-svg { background-color:var(--ui-surface); background-image:radial-gradient(circle,var(--ui-border) 1px,transparent 1px); }
.app-body .ne-circle,.app-body .ne-inh-f,.app-body .ne-inh-fs,.app-body .ne-wbg { fill:var(--ui-surface); }
.app-body .ne-circle,.app-body .ne-rect { stroke:var(--ui-muted); }
.app-body .ne-rect { fill:var(--ui-soft); }
.app-body .ne-tok,.app-body .ne-tname,.app-body .ne-w,.app-body .ne-lbl { fill:var(--ui-text); }
.app-body .ne-lbl,.app-body .ne-tname { stroke:var(--ui-surface); }
.app-body .ne-node.ne-sel .ne-circle,.app-body .ne-node.ne-sel .ne-rect { stroke:var(--ui-accent); }
.app-body .ne-node .ne-circle-bad,.app-body .ne-node .ne-rect-bad { stroke:var(--ui-danger); fill:var(--ne-err-bg); }
:root[data-bs-theme="dark"] .ne-root { --ne-err-bg:#41232d; --ne-warn-bg:#3a301e; --ne-warn:#f2ce7e; --ne-ok:#8dddbc; --ne-inh:#c2a5ff; --ne-inh-bg:#32294a; }
.app-body .workspace-hero { position:relative; padding:56px 44px; border:1px solid var(--ui-border); border-radius:20px; background:var(--ui-surface); overflow:hidden; }
.workspace-eyebrow,.workspace-number { color:var(--ui-accent); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.app-body .workspace-hero h1 { font-size:clamp(30px,3.2vw,46px); line-height:1.15; margin:20px 0; max-width:670px; }
.workspace-hero p { max-width:570px; color:var(--ui-muted); font-size:16px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero-diagram { display:flex; align-items:center; gap:14px; margin-top:40px; color:var(--ui-accent); }
.diagram-place { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border:2px solid var(--ui-accent); border-radius:50%; font-size:12px; }
.diagram-transition { height:36px; width:20px; border:2px solid var(--ui-accent); background:var(--ui-accent-soft); }
.workspace-section-label { display:flex; justify-content:space-between; align-items:baseline; margin:32px 0 14px; }
.app-body .workspace-section-label h2 { font-size:18px; margin:0; }
.workspace-section-label span { color:var(--ui-muted); font-size:13px; }
.workspace-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.app-body .workspace-card { display:flex; flex-direction:column; border:1px solid var(--ui-border); border-radius:14px; background:var(--ui-surface); padding:26px; color:var(--ui-text); text-decoration:none; }
.workspace-card:hover { border-color:var(--ui-accent); box-shadow:var(--ui-shadow); }
.app-body .workspace-card h3 { margin:18px 0 12px; font-size:20px; }
.workspace-card p { font-size:14px; color:var(--ui-muted); flex:1; }
.workspace-card-link { display:flex; justify-content:space-between; color:var(--ui-accent); font-size:13px; font-weight:600; margin-top:16px; }
.workspace-note { display:flex; align-items:center; gap:20px; padding:24px; margin-top:24px; background:var(--ui-soft); border-radius:14px; }
.workspace-note div { flex:1; }
.app-body .workspace-note h3 { font-size:16px; margin:0 0 4px; }
.workspace-note p { font-size:13px; color:var(--ui-muted); margin:0; }
.workspace-note > a { font-size:13px; white-space:nowrap; }
.note-symbol { font-size:26px; color:var(--ui-accent); }
@media(max-width:767px) {
 .app-body .app-navigation { padding:12px; }
 .app-body .app-main { padding:0 12px 24px; }
 .app-body .navbar-brand { font-size:17px; }
 .theme-control { margin:0 8px 0 0; }
 .theme-control > span { display:none; }
 .theme-control select { max-width:118px; }
 .app-body .navbar-toggler { padding:5px; }
 .app-body .workspace-hero { padding:28px 22px; }
 .workspace-grid { grid-template-columns:1fr; }
 .workspace-note { flex-wrap:wrap; padding:18px; }
 .workspace-note > a { margin-left:42px; }
 .workspace-section-label span { display:none; }
 .app-body .accordion-body { padding:14px; }
 .app-body .accordion-item.search-item { margin-left:8px; }
 .app-body .ne-svg { height:380px; }
 .app-body .ne-insp input { max-width:100%; }
 .app-body h2 { font-size:23px; }
}
@media(prefers-reduced-motion:reduce) { .app-body * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
.app-body .ne-seg button { background:var(--ui-surface); color:var(--ui-muted); }
.app-body .ne-seg button.ne-on { background:var(--ui-accent-soft); color:var(--ui-accent); }
.app-body .ne-stat,.app-body .ne-table th { background:var(--ui-soft); }
.app-body .ne-stat b { color:var(--ui-text); }
.app-body .ne-stat b.ne-danger { color:var(--ui-danger); }
.app-body .ne-stat { gap:0; }
.app-body .ne-stat > div { margin-right:24px; margin-bottom:4px; }
.app-body .ne-issues.ne-lvl-ok { background:var(--ui-soft); color:var(--ui-success); }
.app-body .ne-root button:disabled { opacity:.55; cursor:not-allowed; }
.app-body .ne-root .ne-btn-primary { color:#fff; background:#315ccf; }
.app-body .text-primary { color:var(--ui-accent)!important; }
.hero-actions { gap:0; }
.hero-actions > a { margin:0 12px 8px 0; }
.hero-diagram { gap:0; }
.hero-diagram > * { margin-right:14px; }
.app-body .ne-views > .ne-hint { margin-left:10px; }
.app-body .ne-cv-bar > .ne-btn,.app-body .ne-views > .ne-hist { margin-left:6px; }
@media(max-width:767px) { .app-body .ne-seg { flex-wrap:wrap; } .app-body .ne-rule-top .ne-name { min-width:120px; max-width:100%; } }
.app-body .ne-table { display:block; max-width:100%; overflow-x:auto; }
.app-body .dropdown-item { white-space:normal; overflow-wrap:anywhere; }
.app-body .ne-combo-note,.app-body .ne-combo-empty { color:var(--ui-muted); }
.app-body .select2-container--default .select2-selection--single,.app-body .select2-container--default .select2-selection--multiple,.app-body .select2-dropdown { background:var(--ui-surface); color:var(--ui-text); border-color:var(--ui-border); }
.app-body .select2-container--default .select2-selection__rendered,.app-body .select2-results__option { color:var(--ui-text); }
.app-body .select2-container--default .select2-selection__choice { background:var(--ui-soft); color:var(--ui-text); border-color:var(--ui-border); }
.app-body .select2-container--default .select2-results__option--highlighted[aria-selected] { background:var(--ui-accent-soft); color:var(--ui-accent); }

/* The network backdrop is decorative; controls retain opaque, readable surfaces. */
.app-body { isolation:isolate; }
.app-body::before { content:''; position:fixed; top:0; right:0; bottom:0; left:0; z-index:-1; pointer-events:none; background:url('back.png') center / cover no-repeat; opacity:.9; }
:root[data-bs-theme="dark"] .app-body::before { filter:invert(1) hue-rotate(180deg); opacity:.32; }
.app-body .app-navigation { position:relative; width:100%; }
.app-navigation .navbar-brand { white-space:normal; line-height:1.25; }
@media(min-width:1200px) { .app-navigation .theme-control { order:3; margin-right:0; } .app-navigation .navbar-collapse { flex-grow:1; } }
@media(max-width:767px) { .app-navigation .navbar-brand { flex:1 1 100%; margin-bottom:12px; } .app-navigation .theme-control { margin-right:auto; } }
.ui-icon { display:inline-block; width:1.15em; height:1.15em; flex-shrink:0; vertical-align:-.18em; pointer-events:none; }
.btn .ui-icon { width:18px; height:18px; }
.dropdown-item .ui-icon { margin-right:8px; }
.workspace-card-link .ui-icon { width:18px; height:18px; }
.note-symbol .ui-icon { width:26px; height:26px; }

/* More specific than legacy page-local accordion and Bootstrap utility rules. */
.app-body .accordion-button.bg-light { background-color:var(--ui-surface)!important; color:var(--ui-text); }
.app-body .accordion-button.bg-light:not(.collapsed) { background-color:var(--ui-accent-soft)!important; color:var(--ui-accent); }
.app-body { min-height:100vh; }

.app-navigation .theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:8px; border:1px solid var(--ui-border); border-radius:9px; background:var(--ui-surface); color:var(--ui-text); cursor:pointer; flex-shrink:0; }
.app-navigation .theme-toggle:hover { color:var(--ui-accent); background:var(--ui-accent-soft); }
.app-navigation .theme-toggle .ui-icon { width:20px; height:20px; }
.app-navigation .theme-toggle > span { display:inline-flex; }
.app-navigation .theme-toggle .theme-sun { display:none; }
:root[data-bs-theme="dark"] .theme-toggle .theme-sun { display:inline-flex; }
:root[data-bs-theme="dark"] .theme-toggle .theme-moon { display:none; }