:root {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #1c2128;
    --text-primary: #c9d1d9;
    --text-secondary: #8b949e;
    --accent: #58a6ff;
    --accent-hover: #79c0ff;
    --success: #3fb950;
    --danger: #f85149;
    --border: #30363d;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}

.subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

/* Tabs */
.tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.tab-button {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
}

.tab-button:hover {
    color: var(--text-primary);
}

.tab-button.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Input Groups */
.input-group {
    margin-bottom: 1.5rem;
}

.input-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

input[type="text"],
input[type="number"],
select {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s;
}

input:focus,
select:focus {
    outline: none;
    border-color: var(--accent);
}

button {
    background: var(--accent);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
    margin-top: 0.5rem;
}

button:hover {
    background: var(--accent-hover);
}

/* Result Boxes */
.result-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    font-family: 'Consolas', 'Monaco', monospace;
    white-space: pre-wrap;
    overflow-x: auto;
}

.hex-preview {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    padding: 1rem;
    border-radius: 6px;
    font-family: monospace;
    font-size: 1.2rem;
    text-align: center;
    margin: 1rem 0;
}

/* Recent Packets */
.recent-packet {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.recent-packet:hover {
    border-color: var(--accent);
}

.recent-packet code {
    font-family: monospace;
    color: var(--accent);
}

.recent-packet-time {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

td {
    padding: 0.5rem;
    border: 1px solid var(--border);
}

td:first-child {
    background: var(--bg-secondary);
    font-family: monospace;
    font-weight: bold;
}

/* Modifier Legend */
.modifier-legend {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 6px;
    margin-bottom: 2rem;
}

/* Copy Button */
#copy-button {
    background: var(--success);
    padding: 0.5rem 1.5rem;
    font-size: 0.9rem;
}

#copy-button:hover {
    background: #5bc467;
}

#copy-button.copied {
    background: var(--bg-tertiary);
    color: var(--success);
}

/* Packet Structure */
.packet-structure {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 6px;
}

.packet-structure h4 {
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.packet-structure-field {
    font-family: monospace;
    margin: 0.25rem 0;
    padding-left: 1rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .container {
        padding: 1rem 0.5rem;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    .tabs {
        gap: 0.5rem;
    }
    
    .tab-button {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    button {
        width: 100%;
    }
}
/* Capture Tab Styles */
.capture-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.control-row {
    display: flex;
    gap: 10px;
}

.capture-btn {
    padding: 8px 16px;
    border: 1px solid #3a3a3a;
    background: #2a2a2a;
    color: #e8e8e8;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.capture-btn:hover:not(:disabled) {
    background: #3a3a3a;
}

.capture-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#start-capture-btn { background: #1a4a1a; }
#start-capture-btn:hover:not(:disabled) { background: #2a5a2a; }
#stop-capture-btn { background: #4a1a1a; }
#stop-capture-btn:hover:not(:disabled) { background: #5a2a2a; }

.filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-row input {
    flex: 1;
}

.filter-row select {
    padding: 6px 12px;
    background: #2a2a2a;
    color: #e8e8e8;
    border: 1px solid #3a3a3a;
}

.import-export {
    display: flex;
    gap: 10px;
}

.capture-stats {
    display: flex;
    gap: 30px;
    padding: 10px;
    background: #1a1a1a;
    border: 1px solid #3a3a3a;
    margin-bottom: 15px;
    font-size: 14px;
}

.capture-stats strong {
    color: #f39c12;
}

.view-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.view-btn {
    padding: 6px 12px;
    background: #2a2a2a;
    color: #e8e8e8;
    border: 1px solid #3a3a3a;
    cursor: pointer;
    font-size: 13px;
}

.view-btn.active {
    background: #3a3a3a;
    color: #f39c12;
}

.capture-display {
    max-height: 500px;
    overflow-y: auto;
    background: #1a1a1a;
    border: 1px solid #3a3a3a;
}

#capture-table {
    width: 100%;
    font-size: 13px;
    font-family: "Courier New", monospace;
}

#capture-table th {
    background: #2a2a2a;
    padding: 8px;
    text-align: left;
    position: sticky;
    top: 0;
    border-bottom: 1px solid #3a3a3a;
}

#capture-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #2a2a2a;
}

#capture-table tr:hover {
    background: #252525;
}

.dir-client {
    color: #4a90e2;
}

.dir-server {
    color: #e24a4a;
}

.packet-data {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
}

/* Replay Tab Styles */
.replay-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.session-controls,
.playback-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.speed-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 20px;
}

#speed-slider {
    width: 100px;
}

.replay-info {
    display: flex;
    gap: 30px;
    padding: 10px;
    background: #1a1a1a;
    border: 1px solid #3a3a3a;
    font-size: 14px;
}

.replay-timeline {
    margin: 20px 0;
}

#packet-seek {
    width: 100%;
}

.replay-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    height: 500px;
}

.packet-list {
    background: #1a1a1a;
    border: 1px solid #3a3a3a;
    padding: 10px;
    overflow-y: auto;
}

.replay-packet-item {
    display: flex;
    gap: 10px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
    font-family: monospace;
    border-bottom: 1px solid #2a2a2a;
}

.replay-packet-item:hover {
    background: #252525;
}

.replay-packet-item.current {
    background: #2a3a4a;
}

.replay-packet-item.selected {
    background: #3a3a3a;
    border: 1px solid #4a4a4a;
}

.replay-packet-item.modified {
    border-left: 3px solid #f39c12;
}

.replay-packet-item.replaying {
    animation: pulse 0.5s ease-out;
}

@keyframes pulse {
    0% { background: #4a5a6a; }
    100% { background: transparent; }
}

.packet-index {
    color: #6a6a6a;
    min-width: 40px;
}

.packet-time {
    color: #8a8a8a;
    min-width: 60px;
}

.packet-dir {
    min-width: 40px;
}

.packet-dir.client {
    color: #4a90e2;
}

.packet-dir.server {
    color: #e24a4a;
}

.packet-opcode {
    color: #f39c12;
    min-width: 40px;
}

.hex-editor-container {
    background: #1a1a1a;
    border: 1px solid #3a3a3a;
    padding: 10px;
    overflow: auto;
}

.editor-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

/* Hex Editor Styles */
.hex-editor-table {
    font-family: "Courier New", monospace;
    font-size: 13px;
    width: 100%;
}

.hex-editor-table th,
.hex-editor-table td {
    padding: 4px;
}

.hex-offset {
    color: #8a8a8a;
    font-weight: bold;
}

.hex-input {
    width: 28px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    color: #e8e8e8;
    text-align: center;
    font-family: monospace;
    padding: 2px;
}

.hex-input:focus {
    outline: none;
    border-color: #4a90e2;
    background: #3a3a3a;
}

.hex-input.modified {
    background: #4a3a1a;
    color: #f39c12;
}

.hex-ascii {
    color: #a8a8a8;
    font-family: monospace;
    padding-left: 20px;
}

/* Differ Tab Styles */
.differ-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.version-selectors {
    display: flex;
    align-items: center;
    gap: 20px;
}

.version-select {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.version-select label {
    font-size: 12px;
    color: #8b949e;
}

.version-select select {
    padding: 8px 12px;
    background: #2a2a2a;
    color: #e8e8e8;
    border: 1px solid #3a3a3a;
    font-size: 14px;
}

.arrow {
    font-size: 24px;
    color: #58a6ff;
}

.diff-actions {
    display: flex;
    gap: 10px;
}

.diff-summary {
    display: flex;
    gap: 30px;
    padding: 15px;
    background: #1a1a1a;
    border: 1px solid #3a3a3a;
    margin-bottom: 20px;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.summary-item .label {
    color: #8b949e;
}

.summary-item .value {
    font-weight: bold;
    font-size: 18px;
}

.summary-item.added .value { color: #3fb950; }
.summary-item.removed .value { color: #f85149; }
.summary-item.modified .value { color: #f39c12; }
.summary-item.unchanged .value { color: #8b949e; }

.diff-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.filter-btn {
    padding: 6px 12px;
    background: #2a2a2a;
    color: #e8e8e8;
    border: 1px solid #3a3a3a;
    cursor: pointer;
    font-size: 13px;
}

.filter-btn.active {
    background: #3a3a3a;
    color: #f39c12;
}

.diff-display {
    max-height: 600px;
    overflow-y: auto;
}

.no-diff {
    text-align: center;
    color: #8b949e;
    padding: 40px;
}

.diff-section {
    margin-bottom: 30px;
}

.diff-section h3 {
    margin-bottom: 15px;
    padding: 10px;
    background: #1a1a1a;
    border-left: 3px solid;
}

.diff-section.added h3 { border-color: #3fb950; }
.diff-section.removed h3 { border-color: #f85149; }
.diff-section.modified h3 { border-color: #f39c12; }
.diff-section.unchanged h3 { border-color: #8b949e; }

.diff-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.diff-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    font-family: monospace;
}

.diff-item:hover {
    border-color: #3a3a3a;
}

.diff-item.modified {
    flex-direction: column;
    align-items: stretch;
}

.diff-header {
    display: flex;
    gap: 20px;
}

.diff-changes {
    margin-top: 10px;
    padding: 10px;
    background: #0d1117;
    border-radius: 4px;
    font-size: 13px;
}

.change {
    display: block;
    margin: 5px 0;
}

.opcode {
    font-weight: bold;
    color: #f39c12;
    min-width: 50px;
}

.name {
    color: #58a6ff;
    min-width: 150px;
}

.size {
    color: #8b949e;
    font-size: 12px;
}

.fields {
    color: #8b949e;
    font-size: 12px;
}

/* Migration Guide Styles */
.migration-guide {
    margin-top: 30px;
    padding: 20px;
    background: #161b22;
    border: 1px solid #30363d;
}

.breaking-changes,
.migration-steps {
    margin-top: 20px;
}

.breaking-change,
.migration-step {
    padding: 10px;
    margin: 10px 0;
    background: #0d1117;
    border-left: 3px solid #f85149;
}

.migration-step {
    border-left-color: #58a6ff;
}

/* Encyclopedia Tab Styles */
.encyclopedia-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.search-box {
    flex: 1;
    max-width: 400px;
}

#opcode-search {
    width: 100%;
    padding: 10px 15px;
    font-size: 14px;
}

.filter-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.vuln-btn {
    background: #4a1a1a;
    color: #f85149;
}

.encyclopedia-stats {
    display: flex;
    gap: 30px;
    padding: 10px;
    background: #1a1a1a;
    border: 1px solid #3a3a3a;
    margin-bottom: 20px;
}

.encyclopedia-content {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 20px;
    height: 600px;
}

.opcode-list {
    background: #1a1a1a;
    border: 1px solid #3a3a3a;
    overflow-y: auto;
    padding: 10px;
}

.opcode-item {
    padding: 12px;
    border: 1px solid #2a2a2a;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.opcode-item:hover {
    background: #252525;
    border-color: #3a3a3a;
}

.opcode-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.opcode-header.vulnerable {
    color: #f85149;
}

.opcode-number {
    font-weight: bold;
    color: #f39c12;
    min-width: 40px;
}

.opcode-name {
    color: #58a6ff;
}

.vuln-indicator {
    margin-left: auto;
}

.opcode-meta {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: #8b949e;
}

.opcode-detail {
    background: #1a1a1a;
    border: 1px solid #3a3a3a;
    padding: 20px;
    overflow-y: auto;
}

.detail-placeholder {
    text-align: center;
    color: #8b949e;
    padding: 100px 20px;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #3a3a3a;
    padding-bottom: 15px;
}

.detail-actions {
    display: flex;
    gap: 10px;
}

.detail-info {
    margin-bottom: 20px;
}

.info-row {
    display: flex;
    gap: 10px;
    margin: 8px 0;
}

.info-row .label {
    color: #8b949e;
    min-width: 80px;
}

.detail-section {
    margin: 20px 0;
}

.detail-section h4 {
    margin-bottom: 10px;
    color: #f39c12;
}

.field-table {
    width: 100%;
    font-size: 13px;
}

.field-table th {
    background: #2a2a2a;
    padding: 8px;
    text-align: left;
}

.field-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #2a2a2a;
}

.vulnerabilities {
    background: #1a0a0a;
    padding: 15px;
    border: 1px solid #4a1a1a;
    border-radius: 4px;
}

.vuln-item {
    padding: 10px;
    margin: 10px 0;
    border-left: 3px solid;
}

.vuln-item.critical {
    border-color: #f85149;
    background: #2a0a0a;
}

.vuln-item.high {
    border-color: #f39c12;
    background: #2a1a0a;
}

.vuln-item.medium {
    border-color: #d29922;
    background: #1a1a0a;
}

.vuln-item.low {
    border-color: #58a6ff;
    background: #0a1a2a;
}

.vuln-severity {
    font-weight: bold;
    margin-right: 10px;
}

.vuln-type {
    color: #8b949e;
    font-style: italic;
}

.vuln-status {
    display: block;
    margin-top: 5px;
    font-size: 12px;
}

.example-item {
    background: #0d1117;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
}

.example-item code {
    display: block;
    margin-bottom: 5px;
    color: #e3b341;
}

.community-notes {
    background: #0d1520;
    padding: 15px;
    border: 1px solid #1a3a4a;
    border-radius: 4px;
}

.note-item {
    padding: 10px;
    margin: 10px 0;
    background: #161b22;
    border-radius: 4px;
}

.note-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 12px;
    color: #8b949e;
}

.note-author {
    font-weight: bold;
    color: #58a6ff;
}

/* Vulnerability Modal */
.vulnerability-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: #161b22;
    padding: 30px;
    border: 1px solid #30363d;
    border-radius: 6px;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
}

#vuln-list {
    margin: 20px 0;
}

.vuln-report-item {
    padding: 15px;
    margin: 10px 0;
    border: 1px solid #30363d;
    border-radius: 4px;
}

.vuln-report-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.vuln-report-body p {
    margin: 5px 0;
}

/* Byte Visualizer Styles */
.visualizer-section {
    margin-top: 30px;
    padding: 20px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
}

#visualize-btn {
    margin-top: 15px;
    padding: 10px 20px;
    background: #1f6feb;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#visualize-btn:hover {
    background: #388bfd;
}

.visualizer-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.control-btn {
    padding: 8px 16px;
    background: #21262d;
    color: #c9d1d9;
    border: 1px solid #30363d;
    border-radius: 4px;
    cursor: pointer;
}

.control-btn.active {
    background: #1f6feb;
    color: white;
}

.packet-overview {
    display: flex;
    gap: 20px;
    padding: 15px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 4px;
    margin-bottom: 20px;
}

.overview-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.overview-item .label {
    color: #8b949e;
}

.overview-item .value {
    font-weight: bold;
    color: #f0f6fc;
}

.visualization-container {
    margin-bottom: 20px;
}

.byte-grid {
    font-family: "Courier New", monospace;
    font-size: 13px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 4px;
    overflow-x: auto;
}

.byte-row {
    display: flex;
    border-bottom: 1px solid #21262d;
}

.byte-row.header {
    background: #161b22;
    font-weight: bold;
    color: #8b949e;
}

.offset-col {
    width: 60px;
    padding: 8px;
    background: #161b22;
    border-right: 1px solid #30363d;
    color: #8b949e;
}

.byte-col {
    width: 30px;
    padding: 8px 4px;
    text-align: center;
}

.ascii-col {
    flex: 1;
    padding: 8px;
    border-left: 1px solid #30363d;
    color: #8b949e;
    font-family: monospace;
}

.byte-value {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all 0.2s;
}

.byte-value:hover {
    background: #30363d;
}

.byte-value.selected {
    background: #1f6feb;
    color: white;
}

/* Field type colors */
.field-byte { color: #a5d6ff; }
.field-short { color: #7ee83f; }
.field-int { color: #ffa657; }
.field-long { color: #d2a8ff; }
.field-string { color: #ff7b72; }

.detail-panel {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 4px;
    padding: 20px;
}

.detail-placeholder {
    text-align: center;
    color: #8b949e;
    padding: 40px;
}

.byte-details,
.field-details {
    margin: 15px 0;
}

.detail-row {
    display: flex;
    margin: 8px 0;
}

.detail-row .label {
    color: #8b949e;
    min-width: 100px;
}

.detail-row .value {
    color: #f0f6fc;
    font-family: monospace;
}

/* Bit View Styles */
.bit-view-container {
    padding: 20px;
}

.bit-grid {
    display: inline-block;
    margin: 20px 0;
}

.bit-row {
    display: flex;
}

.bit-cell {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #30363d;
    margin: 2px;
}

.bit-cell.header {
    background: #161b22;
    color: #8b949e;
    font-weight: bold;
}

.bit-cell.value {
    background: #0d1117;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: bold;
}

.bit-cell.value:hover {
    background: #30363d;
}

.bit-cell.value.active {
    background: #1f6feb;
    color: white;
}

.bit-interpretation {
    margin-top: 20px;
    padding: 15px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 4px;
}

.bit-interpretation code {
    color: #a5d6ff;
    font-size: 14px;
}

/* Fuzzer Tab Styles */
.fuzzer-controls {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 20px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px;
}

.fuzzer-setup {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.setup-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.setup-row label {
    min-width: 100px;
    color: #8b949e;
}

.setup-row select {
    padding: 8px 12px;
    background: #0d1117;
    color: #f0f6fc;
    border: 1px solid #30363d;
    min-width: 200px;
}

.primary-btn {
    padding: 8px 16px;
    background: #238636;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

.primary-btn:hover {
    background: #2ea043;
}

.fuzzer-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
}

.test-cases-section,
.fuzz-results-section {
    margin-top: 30px;
}

.test-controls {
    display: flex;
    gap: 10px;
    margin: 15px 0;
}

.test-cases-list {
    max-height: 300px;
    overflow-y: auto;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 10px;
}

.test-case-item {
    padding: 12px;
    margin-bottom: 10px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 4px;
}

.test-case-header {
    display: flex;
    gap: 15px;
    margin-bottom: 8px;
    font-weight: bold;
}

.test-index {
    color: #8b949e;
}

.test-name {
    color: #58a6ff;
}

.test-strategy {
    color: #a371f7;
    font-size: 12px;
    padding: 2px 8px;
    background: #1f1639;
    border-radius: 12px;
}

.test-case-body {
    font-size: 13px;
    color: #8b949e;
}

.test-description {
    margin: 5px 0;
}

.test-packet code {
    color: #79c0ff;
    font-family: monospace;
    font-size: 12px;
}

.result-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.result-filter {
    padding: 6px 12px;
    background: #21262d;
    color: #c9d1d9;
    border: 1px solid #30363d;
    border-radius: 6px;
    cursor: pointer;
}

.result-filter.active {
    background: #1f6feb;
    color: white;
}

.fuzz-results {
    max-height: 400px;
    overflow-y: auto;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 10px;
}

.fuzz-result-item {
    padding: 12px;
    margin-bottom: 10px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 4px;
}

.fuzz-result-item.success {
    border-left: 3px solid #3fb950;
}

.fuzz-result-item.error {
    border-left: 3px solid #f85149;
}

.fuzz-result-item.vulnerability {
    border-left: 3px solid #f39c12;
    background: #271c00;
}

.result-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.result-test {
    font-weight: bold;
    color: #58a6ff;
}

.result-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
}

.result-status.success {
    background: #0f2d0f;
    color: #3fb950;
}

.result-status.error {
    background: #2d0f0f;
    color: #f85149;
}

.result-status.vulnerability {
    background: #2d1f0f;
    color: #f39c12;
}

.result-body {
    font-size: 13px;
}

.error-msg {
    color: #f85149;
    margin-top: 5px;
}

.vuln-info {
    margin-top: 10px;
    padding: 10px;
    background: #2d1f0f;
    border: 1px solid #f39c12;
    border-radius: 4px;
}

.vuln-info strong {
    color: #f39c12;
    display: block;
    margin-bottom: 5px;
}

.vuln-type,
.vuln-severity {
    display: inline-block;
    padding: 2px 8px;
    margin-right: 8px;
    background: #1a0f00;
    color: #ffa657;
    border-radius: 12px;
    font-size: 11px;
    text-transform: uppercase;
}

/* Flow Diagram Styles */
.flow-selector {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}

.flow-selector select {
    padding: 8px 12px;
    background: #0d1117;
    color: #f0f6fc;
    border: 1px solid #30363d;
    min-width: 200px;
}

.secondary-btn {
    padding: 8px 16px;
    background: #21262d;
    color: #c9d1d9;
    border: 1px solid #30363d;
    border-radius: 6px;
    cursor: pointer;
}

.flow-content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    height: 600px;
}

#flow-diagram {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    position: relative;
}

.flow-controls {
    padding: 15px;
    background: #161b22;
    border-bottom: 1px solid #30363d;
}

.flow-controls h3 {
    margin: 0 0 5px 0;
}

.flow-controls p {
    margin: 0 0 10px 0;
    color: #8b949e;
    font-size: 14px;
}

.flow-actions {
    display: flex;
    gap: 10px;
}

.flow-svg-container {
    width: 100%;
    height: 500px;
}

.flow-svg-container svg {
    width: 100%;
    height: 100%;
    cursor: move;
}

/* Node styles */
.flow-svg-container circle,
.flow-svg-container rect,
.flow-svg-container path {
    cursor: pointer;
    transition: all 0.2s;
}

.flow-svg-container circle:hover,
.flow-svg-container rect:hover,
.flow-svg-container path:hover {
    filter: brightness(1.2);
}

.flow-detail-panel {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 20px;
    overflow-y: auto;
}

.flow-detail-panel h4 {
    margin: 0 0 15px 0;
    color: #58a6ff;
}

.node-details,
.packet-info {
    margin-top: 15px;
}

.node-details p,
.packet-info p {
    margin: 8px 0;
    font-size: 14px;
}

/* Flow Builder Modal */
.flow-builder {
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
}

.builder-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.builder-form input[type="text"],
.builder-form textarea {
    padding: 8px 12px;
    background: #0d1117;
    color: #f0f6fc;
    border: 1px solid #30363d;
    border-radius: 4px;
}

.builder-form textarea {
    min-height: 80px;
}

.builder-form h4 {
    margin: 10px 0 5px 0;
    color: #58a6ff;
}

#flow-nodes-list,
#flow-edges-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.builder-node,
.builder-edge {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 4px;
}

.builder-node input,
.builder-node select,
.builder-edge select {
    padding: 4px 8px;
    background: #161b22;
    color: #f0f6fc;
    border: 1px solid #30363d;
    border-radius: 3px;
}

.builder-node button,
.builder-edge button {
    width: 30px;
    height: 30px;
    background: #f85149;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.builder-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

/* Modal styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: #161b22;
    padding: 30px;
    border: 1px solid #30363d;
    border-radius: 6px;
}

/* Bot Generator Styles */
.botgen-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.input-section,
.config-section {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 20px;
}

.input-section h3,
.config-section h3 {
    margin: 0 0 15px 0;
    color: #58a6ff;
}

.source-options {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.source-options label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

#bot-packets-input {
    width: 100%;
    height: 150px;
    padding: 10px;
    background: #0d1117;
    color: #f0f6fc;
    border: 1px solid #30363d;
    border-radius: 4px;
    font-family: monospace;
    resize: vertical;
}

.config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.config-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.config-item select,
.config-item input[type="number"] {
    padding: 6px 10px;
    background: #0d1117;
    color: #f0f6fc;
    border: 1px solid #30363d;
    border-radius: 4px;
}

.config-item input[type="checkbox"] {
    margin: 0;
}

.botgen-output {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    margin-bottom: 30px;
}

.output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #161b22;
    border-bottom: 1px solid #30363d;
}

.output-header h3 {
    margin: 0;
    color: #58a6ff;
}

.output-actions {
    display: flex;
    gap: 10px;
}

#bot-script-output {
    margin: 0;
    padding: 20px;
    overflow-x: auto;
    max-height: 500px;
    font-family: "Courier New", monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #f0f6fc;
}

#bot-script-output code {
    display: block;
}

.bot-templates {
    margin-top: 30px;
}

.bot-templates h3 {
    margin-bottom: 15px;
    color: #58a6ff;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.template-item {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.template-item:hover {
    background: #21262d;
    border-color: #58a6ff;
    transform: translateY(-2px);
}

.template-item h4 {
    margin: 0 0 8px 0;
    color: #f0f6fc;
}

.template-item p {
    margin: 0;
    font-size: 13px;
    color: #8b949e;
}

/* Syntax highlighting placeholders */
.language-java .keyword,
.language-kotlin .keyword,
.language-python .keyword {
    color: #ff7b72;
}

.language-java .string,
.language-kotlin .string,
.language-python .string {
    color: #a5d6ff;
}

.language-java .number,
.language-kotlin .number,
.language-python .number {
    color: #79c0ff;
}

.language-java .comment,
.language-kotlin .comment,
.language-python .comment {
    color: #8b949e;
    font-style: italic;
}

/* Performance Profiler Styles */
.profiler-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.profiler-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 20px;
    text-align: center;
}

.stat-card h4 {
    margin: 0 0 10px 0;
    color: #8b949e;
    font-size: 14px;
    font-weight: normal;
}

.stat-value {
    font-size: 28px;
    font-weight: bold;
    color: #58a6ff;
}

.profiler-visualizations {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.viz-section {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 20px;
}

.viz-section h3 {
    margin: 0 0 15px 0;
    color: #f0f6fc;
}

.viz-section canvas {
    width: 100%;
    height: auto;
    display: block;
}

.profiler-tables {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.table-section {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 20px;
}

.table-section h3 {
    margin: 0 0 15px 0;
    color: #f0f6fc;
}

.table-section table {
    width: 100%;
    font-size: 13px;
}

.table-section th {
    background: #0d1117;
    padding: 8px;
    text-align: left;
    color: #8b949e;
    font-weight: normal;
}

.table-section td {
    padding: 6px 8px;
    border-bottom: 1px solid #21262d;
}

.table-section tr:hover {
    background: #21262d;
}

.table-section tr.high-latency {
    color: #f85149;
}

.optimization-suggestions {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 20px;
}

.optimization-suggestions h3 {
    margin: 0 0 15px 0;
    color: #f0f6fc;
}

#optimization-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.no-suggestions {
    text-align: center;
    color: #8b949e;
    padding: 40px;
}

.suggestion-item {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 4px;
    padding: 15px;
}

.suggestion-item.high {
    border-left: 3px solid #f85149;
}

.suggestion-item.medium {
    border-left: 3px solid #f39c12;
}

.suggestion-item.low {
    border-left: 3px solid #58a6ff;
}

.suggestion-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.suggestion-type {
    font-size: 12px;
    padding: 2px 8px;
    background: #21262d;
    border-radius: 3px;
    color: #8b949e;
}

.suggestion-priority {
    font-size: 12px;
    font-weight: bold;
}

.suggestion-priority:contains("HIGH") {
    color: #f85149;
}

.suggestion-priority:contains("MEDIUM") {
    color: #f39c12;
}

.suggestion-priority:contains("LOW") {
    color: #58a6ff;
}

.suggestion-body p {
    margin: 5px 0;
}

.recommendation {
    color: #a5d6ff;
    font-style: italic;
}

.packet-info {
    font-size: 12px;
    color: #8b949e;
}