:root{--bg-primary: #0d0f12;--bg-secondary: #131519;--bg-tertiary: #1a1d23;--bg-elevated: #1f232b;--bg-hover: #252930;--border-subtle: #2a2e38;--border-default: #363b47;--border-emphasis: #4a5060;--text-primary: #dde1ea;--text-secondary: #9099ad;--text-muted: #5c6375;--text-inverse: #0d0f12;--accent-primary: #e8a135;--accent-primary-dim: rgba(232, 161, 53, .12);--accent-primary-border: rgba(232, 161, 53, .3);--severity-critical: #e05252;--severity-critical-bg: rgba(224, 82, 82, .1);--severity-critical-border: rgba(224, 82, 82, .3);--severity-high: #e07a30;--severity-high-bg: rgba(224, 122, 48, .1);--severity-high-border: rgba(224, 122, 48, .3);--severity-medium: #d4be3a;--severity-medium-bg: rgba(212, 190, 58, .1);--severity-medium-border: rgba(212, 190, 58, .3);--severity-low: #4aab7e;--severity-low-bg: rgba(74, 171, 126, .1);--severity-low-border: rgba(74, 171, 126, .3);--severity-info: #5a9fd4;--severity-info-bg: rgba(90, 159, 212, .1);--severity-info-border: rgba(90, 159, 212, .3);--status-vulnerable: #e05252;--status-mitigated: #4aab7e;--status-neutral: #9099ad;--code-bg: #0a0c0f;--code-border: #2a2e38;--font-sans: "IBM Plex Sans", sans-serif;--font-mono: "IBM Plex Mono", monospace;--font-serif: "IBM Plex Serif", serif;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--radius-sm: 2px;--radius-md: 4px;--radius-lg: 6px;--transition-fast: .12s ease;--transition-base: .2s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:14px;scroll-behavior:smooth}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-sans);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);font-weight:500;line-height:1.3;color:var(--text-primary)}h1{font-size:1.857rem;letter-spacing:-.02em}h2{font-size:1.5rem;letter-spacing:-.015em}h3{font-size:1.214rem;letter-spacing:-.01em}h4{font-size:1.071rem}h5{font-size:.929rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}h6{font-size:.786rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}p{color:var(--text-secondary);line-height:1.7}a{color:var(--accent-primary);text-decoration:none;transition:opacity var(--transition-fast)}a:hover{opacity:.8}code,kbd,pre,samp{font-family:var(--font-mono)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-emphasis);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.app-shell{display:flex;flex-direction:column;min-height:100vh}.main-content{display:flex;flex:1;overflow:hidden}.page-content{flex:1;overflow-y:auto;height:calc(100vh - 56px)}.sidebar{width:260px;flex-shrink:0;background:var(--bg-secondary);border-right:1px solid var(--border-subtle);overflow-y:auto;height:calc(100vh - 56px);position:sticky;top:0}.sidebar-section{padding:var(--space-4) 0;border-bottom:1px solid var(--border-subtle)}.sidebar-section:last-child{border-bottom:none}.sidebar-section-label{padding:var(--space-3) var(--space-4);font-size:.714rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-family:var(--font-mono)}.sidebar-link{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);color:var(--text-secondary);font-size:.857rem;transition:all var(--transition-fast);border-left:2px solid transparent;cursor:pointer;text-decoration:none;line-height:1.4}.sidebar-link:hover{background:var(--bg-tertiary);color:var(--text-primary);border-left-color:var(--border-default)}.sidebar-link.active{background:var(--accent-primary-dim);color:var(--accent-primary);border-left-color:var(--accent-primary)}.sidebar-link-icon{width:14px;height:14px;flex-shrink:0;opacity:.6}.sidebar-link.active .sidebar-link-icon{opacity:1}.topbar{height:56px;background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;padding:0 var(--space-6);gap:var(--space-4);position:sticky;top:0;z-index:100;flex-shrink:0}.topbar-brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none}.topbar-logo{width:28px;height:28px;background:var(--accent-primary);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);flex-shrink:0}.topbar-logo svg{width:16px;height:16px;fill:var(--text-inverse)}.topbar-title{font-family:var(--font-mono);font-size:.929rem;font-weight:500;color:var(--text-primary);white-space:nowrap}.topbar-subtitle{font-size:.786rem;color:var(--text-muted);font-family:var(--font-mono)}.topbar-divider{width:1px;height:20px;background:var(--border-subtle)}.topbar-spacer{flex:1}.topbar-meta{font-size:.786rem;color:var(--text-muted);font-family:var(--font-mono)}.card{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}.card-header{padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.card-body{padding:var(--space-6)}.card-title{font-size:.929rem;font-weight:500;color:var(--text-primary)}.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px 8px;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.714rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;border:1px solid}.badge-critical{color:var(--severity-critical);background:var(--severity-critical-bg);border-color:var(--severity-critical-border)}.badge-high{color:var(--severity-high);background:var(--severity-high-bg);border-color:var(--severity-high-border)}.badge-medium{color:var(--severity-medium);background:var(--severity-medium-bg);border-color:var(--severity-medium-border)}.badge-low{color:var(--severity-low);background:var(--severity-low-bg);border-color:var(--severity-low-border)}.badge-info{color:var(--severity-info);background:var(--severity-info-bg);border-color:var(--severity-info-border)}.badge-neutral{color:var(--text-muted);background:transparent;border-color:var(--border-default)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:6px 14px;border-radius:var(--radius-md);font-family:var(--font-mono);font-size:.786rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);border:1px solid;text-decoration:none;white-space:nowrap;letter-spacing:.02em}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent-primary);color:var(--text-inverse);border-color:var(--accent-primary)}.btn-primary:hover:not(:disabled){background:#d4913a;border-color:#d4913a}.btn-secondary{background:transparent;color:var(--text-primary);border-color:var(--border-default)}.btn-secondary:hover:not(:disabled){background:var(--bg-hover);border-color:var(--border-emphasis)}.btn-danger{background:var(--severity-critical-bg);color:var(--severity-critical);border-color:var(--severity-critical-border)}.btn-danger:hover:not(:disabled){background:#e0525233}.btn-success{background:var(--severity-low-bg);color:var(--severity-low);border-color:var(--severity-low-border)}.btn-success:hover:not(:disabled){background:#4aab7e33}.btn-ghost{background:transparent;color:var(--text-secondary);border-color:transparent}.btn-ghost:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary);border-color:var(--border-subtle)}.btn-sm{padding:4px 10px;font-size:.714rem}.btn-lg{padding:10px 20px;font-size:.857rem}.tabs{display:flex;border-bottom:1px solid var(--border-subtle);gap:0;overflow-x:auto}.tab-button{padding:var(--space-3) var(--space-5);font-family:var(--font-mono);font-size:.786rem;font-weight:500;color:var(--text-muted);cursor:pointer;border:none;background:transparent;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all var(--transition-fast);white-space:nowrap;letter-spacing:.02em}.tab-button:hover{color:var(--text-secondary);background:var(--bg-tertiary)}.tab-button.active{color:var(--accent-primary);border-bottom-color:var(--accent-primary)}.tab-content{padding:var(--space-6)}.code-block{background:var(--code-bg);border:1px solid var(--code-border);border-radius:var(--radius-md);overflow:hidden}.code-block-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--code-border);background:var(--bg-secondary)}.code-block-label{font-family:var(--font-mono);font-size:.714rem;color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase}.code-block-copy{font-family:var(--font-mono);font-size:.714rem;color:var(--text-muted);background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:2px 8px;cursor:pointer;transition:all var(--transition-fast)}.code-block-copy:hover{color:var(--text-primary);border-color:var(--border-default)}.code-block pre{margin:0;padding:var(--space-4);overflow-x:auto;font-size:.786rem;line-height:1.65}.code-block code{font-family:var(--font-mono)}.inline-code{font-family:var(--font-mono);font-size:.857em;background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:1px 5px;color:var(--accent-primary)}.network-log{background:var(--code-bg);border:1px solid var(--border-subtle);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:.786rem;overflow:hidden}.network-log-header{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-subtle);background:var(--bg-secondary)}.network-log-title{font-size:.714rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.network-log-dot{width:6px;height:6px;border-radius:50%;background:var(--severity-critical);animation:pulse-dot 1.5s ease-in-out infinite}.network-log-dot.idle{background:var(--text-muted);animation:none}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.3}}.network-log-body{max-height:240px;overflow-y:auto}.network-log-empty{padding:var(--space-6);text-align:center;color:var(--text-muted);font-size:.786rem}.network-log-entry{display:grid;grid-template-columns:60px 60px 1fr auto;gap:var(--space-3);padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--border-subtle);align-items:center;transition:background var(--transition-fast)}.network-log-entry:last-child{border-bottom:none}.network-log-entry:hover{background:var(--bg-tertiary)}.network-log-method{font-weight:600;font-size:.714rem;text-transform:uppercase}.method-get{color:var(--severity-low)}.method-post{color:var(--severity-info)}.method-put{color:var(--severity-medium)}.method-delete{color:var(--severity-critical)}.network-log-status{font-weight:500}.status-2xx{color:var(--severity-low)}.status-3xx{color:var(--severity-info)}.status-4xx{color:var(--severity-medium)}.status-5xx{color:var(--severity-critical)}.network-log-path{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.network-log-path.traversal{color:var(--severity-critical)}.network-log-time{color:var(--text-muted);font-size:.714rem}.path-resolver{background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}.path-resolver-row{display:grid;grid-template-columns:140px 1fr;border-bottom:1px solid var(--border-subtle)}.path-resolver-row:last-child{border-bottom:none}.path-resolver-label{padding:var(--space-3) var(--space-4);font-family:var(--font-mono);font-size:.714rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;border-right:1px solid var(--border-subtle);background:var(--bg-secondary);display:flex;align-items:center}.path-resolver-value{padding:var(--space-3) var(--space-4);font-family:var(--font-mono);font-size:.786rem;color:var(--text-primary);word-break:break-all}.path-resolver-value.danger{color:var(--severity-critical)}.path-resolver-value.safe{color:var(--severity-low)}.payload-grid{display:flex;flex-wrap:wrap;gap:var(--space-2)}.payload-btn{font-family:var(--font-mono);font-size:.714rem;padding:4px 10px;background:var(--bg-tertiary);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.payload-btn:hover,.payload-btn.active{border-color:var(--severity-critical-border);color:var(--severity-critical);background:var(--severity-critical-bg)}.mode-toggle{display:flex;background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:3px;gap:2px}.mode-toggle-btn{padding:5px 16px;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.786rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);border:none;background:transparent;color:var(--text-muted)}.mode-toggle-btn.active{background:var(--bg-elevated);color:var(--text-primary);box-shadow:0 1px 3px #0000004d}.mode-toggle-btn.attack.active{color:var(--severity-critical)}.mode-toggle-btn.mitigated.active{color:var(--severity-low)}.info-box{border-radius:var(--radius-md);padding:var(--space-4);border-left:3px solid;font-size:.857rem;line-height:1.6}.info-box p{font-size:.857rem}.info-box-warning{background:var(--severity-high-bg);border-color:var(--severity-high);color:var(--text-secondary)}.info-box-danger{background:var(--severity-critical-bg);border-color:var(--severity-critical);color:var(--text-secondary)}.info-box-success{background:var(--severity-low-bg);border-color:var(--severity-low);color:var(--text-secondary)}.info-box-info{background:var(--severity-info-bg);border-color:var(--severity-info);color:var(--text-secondary)}.info-box-title{font-size:.786rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-2);font-family:var(--font-mono)}.info-box-warning .info-box-title{color:var(--severity-high)}.info-box-danger .info-box-title{color:var(--severity-critical)}.info-box-success .info-box-title{color:var(--severity-low)}.info-box-info .info-box-title{color:var(--severity-info)}.form-group{display:flex;flex-direction:column;gap:var(--space-2)}.form-label{font-family:var(--font-mono);font-size:.714rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}.form-input{background:var(--bg-tertiary);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:8px 12px;font-family:var(--font-mono);font-size:.857rem;color:var(--text-primary);transition:border-color var(--transition-fast);width:100%}.form-input:focus{outline:none;border-color:var(--accent-primary)}.form-input::placeholder{color:var(--text-muted)}.data-table{width:100%;border-collapse:collapse;font-size:.857rem}.data-table th{text-align:left;padding:var(--space-3) var(--space-4);font-family:var(--font-mono);font-size:.714rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);border-bottom:1px solid var(--border-subtle);font-weight:500}.data-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-subtle);color:var(--text-secondary)}.data-table tr:last-child td{border-bottom:none}.data-table tr:hover td{background:var(--bg-hover)}.scenario-page{padding:var(--space-8);max-width:1200px;margin:0 auto}.scenario-header{margin-bottom:var(--space-8);padding-bottom:var(--space-6);border-bottom:1px solid var(--border-subtle)}.scenario-header-meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-4)}.scenario-header-title{font-size:1.571rem;font-weight:500;color:var(--text-primary);margin:var(--space-3) 0}.scenario-header-description{color:var(--text-secondary);max-width:680px;font-size:.929rem;line-height:1.7}.scenario-id{font-family:var(--font-mono);font-size:.714rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}.scenario-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}.scenario-full{grid-column:1 / -1}.dashboard{padding:var(--space-8)}.dashboard-hero{margin-bottom:var(--space-10);padding-bottom:var(--space-8);border-bottom:1px solid var(--border-subtle)}.dashboard-hero-label{font-family:var(--font-mono);font-size:.714rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-primary);margin-bottom:var(--space-3)}.dashboard-hero-title{font-size:2.285rem;font-weight:300;line-height:1.2;color:var(--text-primary);margin-bottom:var(--space-4);letter-spacing:-.03em}.dashboard-hero-title strong{font-weight:600}.dashboard-hero-body{color:var(--text-secondary);max-width:600px;font-size:.929rem;line-height:1.75}.scenario-index-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-4)}.scenario-card{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-5);cursor:pointer;text-decoration:none;transition:all var(--transition-base);display:flex;flex-direction:column;gap:var(--space-3)}.scenario-card:hover{border-color:var(--border-emphasis);background:var(--bg-tertiary);transform:translateY(-1px)}.scenario-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}.scenario-card-id{font-family:var(--font-mono);font-size:.714rem;color:var(--text-muted);letter-spacing:.06em}.scenario-card-title{font-size:.929rem;font-weight:500;color:var(--text-primary);line-height:1.35}.scenario-card-category{font-family:var(--font-mono);font-size:.714rem;color:var(--text-muted)}.scenario-card-description{font-size:.857rem;color:var(--text-secondary);line-height:1.6;flex:1}.scenario-card-footer{display:flex;align-items:center;gap:var(--space-2);padding-top:var(--space-3);border-top:1px solid var(--border-subtle)}.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);margin-bottom:var(--space-8)}.stat-item{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-5)}.stat-value{font-family:var(--font-mono);font-size:1.857rem;font-weight:300;color:var(--text-primary);line-height:1;margin-bottom:var(--space-2)}.stat-label{font-size:.786rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-mono)}.reference-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}.reference-list li{font-size:.857rem;display:flex;align-items:baseline;gap:var(--space-2)}.reference-list li:before{content:"--";font-family:var(--font-mono);color:var(--text-muted);font-size:.786rem;flex-shrink:0}.reference-list a{color:var(--severity-info);text-decoration:none;font-family:var(--font-mono);font-size:.786rem}.reference-list a:hover{text-decoration:underline}.text-mono{font-family:var(--font-mono)}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.text-danger{color:var(--severity-critical)}.text-success{color:var(--severity-low)}.text-warning{color:var(--severity-high)}.text-info{color:var(--severity-info)}.text-accent{color:var(--accent-primary)}.text-sm{font-size:.857rem}.text-xs{font-size:.786rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.mb-2{margin-bottom:var(--space-2)}.mb-3{margin-bottom:var(--space-3)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.p-4{padding:var(--space-4)}.p-5{padding:var(--space-5)}.p-6{padding:var(--space-6)}.w-full{width:100%}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.separator{height:1px;background:var(--border-subtle);margin:var(--space-6) 0}.error-page{display:flex;flex-direction:column;align-items:center;justify-content:center;height:60vh;text-align:center;gap:var(--space-4)}.error-code{font-family:var(--font-mono);font-size:4rem;font-weight:300;color:var(--text-muted);line-height:1}@media (max-width: 1024px){.scenario-grid{grid-template-columns:1fr}.stats-strip{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.sidebar{display:none}.scenario-page,.dashboard{padding:var(--space-4)}.stats-strip{grid-template-columns:1fr 1fr}}