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

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f5f5f5;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            display: grid;
            grid-template-columns: 300px 1fr 400px;  /* Changed from 320px to 400px for results */
            gap: 20px;
            max-width: 1800px;
            margin: 0 auto;
            height: auto;
            max-height: calc(100vh - 120px);
        }

        .panel {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            overflow-y: auto;
            border: 1px solid #e0e0e0;
            max-height: calc(100vh - 140px);
        }

        .panel h2 {
            color: #333;
            margin-bottom: 20px;
            font-size: 20px;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }

        .input-group {
            margin-bottom: 20px;
        }

        .input-group label {
            display: block;
            margin-bottom: 5px;
            color: #333;
            font-weight: 600;
            font-size: 14px;
        }

        .input-group input {
            width: 100%;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .input-group input:focus {
            outline: none;
            border-color: #667eea;
        }

        .input-group small {
            display: block;
            margin-top: 5px;
            color: #666;
            font-size: 12px;
        }

        .btn {
            width: 100%;
            padding: 12px;
            background: #98CB3B;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s;
            margin-top: 10px;
        }

        .btn:hover {
            transform: translateY(-2px);
            filter: brightness(1.1);
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }

        .btn.secondary {
            background: #dc3545;
        }

        .btn.secondary:hover {
            background: #c82333;
            filter: brightness(1);
        }

        #simulationCanvas {
            width: 100%;
            height: 100%;
            max-height: 600px;
            min-height: 400px;
            border-radius: 8px;
            display: block;
        }

        /* Make the middle panel (simulation) fit better */
        .panel:nth-child(2) {
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        .panel:nth-child(2) h2 {
            flex-shrink: 0;
        }

        .panel:nth-child(2) .step-indicator {
            flex-shrink: 0;
        }

        .panel:nth-child(2) canvas {
            flex: 1;
            min-height: 400px;
            max-height: 600px;
        }

        .output-item {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            border-left: 4px solid #667eea;
        }

        .output-item h3 {
            color: #667eea;
            font-size: 14px;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .output-item p {
            color: #333;
            font-size: 16px;
            font-weight: 600;
        }

        .output-item small {
            display: block;
            color: #666;
            font-size: 12px;
            margin-top: 5px;
        }

        .error {
            background: #fee;
            border-left-color: #f44;
            color: #c33;
        }

        .success {
            background: #efe;
            border-left-color: #4a4;
            color: #383;
        }

        .legend {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
        }

        .legend-color {
            width: 20px;
            height: 20px;
            border-radius: 4px;
        }

        .antenna-info {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-top: 10px;
        }

        .info-card {
            background: white;
            padding: 10px;
            border-radius: 6px;
            text-align: center;
        }

        .info-card .value {
            font-size: 24px;
            font-weight: bold;
            color: #667eea;
        }

        .info-card .label {
            font-size: 11px;
            color: #666;
            margin-top: 5px;
        }

        .snr-list {
            max-height: 200px;
            overflow-y: auto;
            margin-top: 10px;
        }

        .snr-item {
            padding: 8px;
            margin-bottom: 5px;
            background: white;
            border-radius: 4px;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
        }

        .snr-item.multiplexing {
            border-left: 3px solid #4CAF50;
        }

        .snr-item.diversity {
            border-left: 3px solid #FF9800;
        }

        .snr-item.outage {
            border-left: 3px solid #f44;
            background: #fee;
        }

        .matrix-display {
            max-height: 300px;
            overflow: auto;
            background: white;
            padding: 10px;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            font-size: 11px;
            line-height: 1.6;
        }

        .matrix-row {
            white-space: nowrap;
        }

        .matrix-value {
            display: inline-block;
            min-width: 100px;
            text-align: center;
            color: #333;
        }

        /* ===== Ensure transmitter & receiver always have a visible gap =====
           These classes are intentionally robust and use `min-width` and
           non-wrapping flex so the transmitter and receiver don't merge
           at any screen size. If your simulation markup uses different
           class names, the selectors below are broad enough to apply to
           common names like .transmitter / .receiver / .antenna-placeholder
        */
        .sim-antenna-wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 40px; /* default gap between TX and RX */
            flex-wrap: nowrap; /* prevent wrapping that could collapse gap */
        }

        .transmitter,
        .receiver {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 120px; /* keep each side wide enough */
            margin: 0 12px;
            box-sizing: border-box;
        }

        /* placeholders and images inside transmitter/receiver */
        .transmitter .antenna-placeholder,
        .receiver .antenna-placeholder,
        .transmitter img,
        .receiver img,
        .antenna-placeholder,
        .antenna-image {
            display: block;
            margin: 8px 0; /* gap between image and its label/placeholder */
            max-width: 100%;
            height: auto;
        }

        .antenna-placeholder {
            width: 96px;
            height: 96px;
            border-radius: 8px;
            background: #f7fbff;
            border: 2px dashed #e6eefc;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4b6ef6;
            font-weight: 600;
            box-sizing: border-box;
        }

        /* Make sure the gap doesn't collapse in smaller screens; reduce but keep minimum spacing */
        @media (max-width: 900px) {
            .sim-antenna-wrapper { gap: 24px !important; }
            .transmitter, .receiver { min-width: 96px; }
            .antenna-placeholder { width: 80px; height: 80px; }
        }

        @media (max-width: 600px) {
            /* On very small screens, allow stacking but preserve separation between components */
            .sim-antenna-wrapper { flex-wrap: wrap; gap: 18px !important; }
            .transmitter, .receiver { min-width: 84px; margin: 0 8px; }
            .antenna-placeholder { width: 72px; height: 72px; }
        }

        .step-indicator {
            background: #e3f2fd;
            padding: 10px 15px;
            border-radius: 6px;
            margin-bottom: 15px;
            border-left: 4px solid #2196F3;
            font-size: 14px;
            color: #1976D2;
            font-weight: 600;
        }

        .tab-container {
            background: white;
            padding: 0;
            display: flex;
            gap: 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-bottom: 2px solid #e0e0e0;
        }

        .tab-btn {
            flex: 1;
            padding: 15px 30px;
            background: white;
            border: none;
            font-size: 16px;
            font-weight: 600;
            color: #666;
            cursor: pointer;
            transition: all 0.3s;
            border-bottom: 3px solid transparent;
        }

        .tab-btn:hover {
            background: #f5f5f5;
            color: #333;
        }

        .tab-btn.active {
            color: #667eea;
            border-bottom-color: #667eea;
            background: white;
        }

        .page-section {
            display: none;
        }

        .page-section.active {
            display: block;
        }

        .analysis-container {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 20px;
            max-width: 1800px;
            margin: 0 auto;
            padding: 20px;
            height: calc(100vh - 100px);
        }

        .analysis-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .analysis-header h1 {
            color: #333;
            font-size: 32px;
            margin-bottom: 10px;
        }

        .analysis-header p {
            color: #666;
            font-size: 16px;
        }

        .analysis-controls {
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            border: 1px solid #e0e0e0;
            overflow-y: auto;
        }

        .analysis-controls h2 {
            color: #333;
            margin-bottom: 20px;
            font-size: 20px;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }

        .control-group {
            margin-bottom: 20px;
        }

        .control-group label {
            display: block;
            margin-bottom: 5px;
            color: #333;
            font-weight: 600;
            font-size: 14px;
        }

        .control-group input {
            width: 100%;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .control-group input:focus {
            outline: none;
            border-color: #667eea;
        }

        .control-group small {
            display: block;
            margin-top: 5px;
            color: #666;
            font-size: 12px;
        }

        .analysis-results {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            border: 1px solid #e0e0e0;
            overflow-y: auto;
        }

        .analysis-results h2 {
            color: #333;
            font-size: 20px;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
            margin: 0 0 20px 0;
        }

        .charts-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .analysis-chart {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            border-left: 4px solid #667eea;
        }

        .analysis-chart h3 {
            color: #667eea;
            font-size: 14px;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .analysis-chart canvas {
            width: 100%;
            height: 300px;
            display: block;
            background: white;
            border-radius: 6px;
        }

        .chart-description {
            text-align: center;
            color: #000; /* Changed to black */
            font-size: 20px;
            margin-top: 8px;
            font-family: 'Times New Roman', serif;
            font-style: italic;
            padding: 8px 12px; /* Add padding inside the box */
            border: 1px solid #ddd; /* Add border */
            border-radius: 6px; /* Rounded corners */
            background: #f9f9f9; /* Light background */
            display: inline-block; /* Make box fit content width */
            margin-left: auto; /* Center the box */
            margin-right: auto;
        }

        /* ---------- Compact card-style Instructions (smaller text) ---------- */
        .instructions-card {
            position: relative;
            width: calc(100% - 40px);
            max-width: 1800px;
            margin: 20px auto;
            background: #fff;
            border-radius: 12px;
            border: 1px solid rgba(100,110,230,0.12);
            box-shadow: 0 6px 22px rgba(28,35,80,0.05);
            padding: 14px 18px;
            box-sizing: border-box;
            font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            color: #1f2a44;
            z-index: 3;
        }

        /* title + summary wrapper */
        .instructions-card .title {
            display: inline-block;
            font-size: 18px;
            font-weight: 700;
            color: #4b6ef6;
            margin: 0;
            vertical-align: middle;
        }

        /* use native details/summary but style summary children */
        .instructions-card summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            list-style: none;
            cursor: pointer;
            padding: 6px 0;
        }

        /* chevron container on the right */
        .instructions-card .chev-wrap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 6px;
            transition: transform .18s ease;
            margin-left: 12px;
        }

        /* visible chevron arrow */
        .instructions-card .chev {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-right: 2px solid #4b6ef6;
            border-bottom: 2px solid #4b6ef6;
            transform: rotate(45deg);
            transition: transform .18s ease;
        }

        /* rotate when open */
        .instructions-card[open] .chev {
            transform: rotate(-135deg);
        }

        /* instructions content */
        .instructions-body {
            max-height: 460px;
            overflow: auto;
            padding-top: 8px;
            padding-left: 6px;
        }

        /* ... existing css ... */

        /* FIND and REPLACE the .instructions-body ol and li styles with this block */

        .instructions-body ol {
            counter-reset: item;
            list-style-type: none;
            margin: 0;
            padding-left: 0;
        }

        .instructions-body ol li {
            display: block;
            position: relative;
            
            /* Reserve space for the number */
            padding-left: 35px;
            
            margin: 8px 0;
            font-size: 14px;
            line-height: 1.5;
            transition: all 0.3s ease;
            
            /* Padding for the highlight background */
            padding-top: 8px;
            padding-bottom: 8px;
            padding-right: 8px;
            border-radius: 4px;
            border-left: 4px solid transparent;
        }

        .instructions-body ol li::before {
            content: counter(item) ".";
            counter-increment: item;
            
            /* Position number absolutely within the padding area */
            position: absolute;
            left: 10px;
            top: 8px;
            
            font-weight: 700;
            color: #4b6ef6;
        }

        /* New Active Class */
        .active-instruction {
            background-color: #e3f2fd; /* Light blue background */
            border-left: 4px solid #2196F3 !important; /* Blue accent border */
            color: #0d47a1;
            font-weight: 500;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        /* ... rest of css ... */
        .instructions-body li strong { font-weight: 700; color: #1d2438; }
        .instructions-body li span { color: #4a5063; font-weight: 500; }

        /* responsive tweaks */
        @media (max-width: 900px) {
            .instructions-card { padding: 12px; }
            .instructions-card .title { font-size: 16px; }
            .instructions-body ol li { font-size: 13px; }
        }

        /* Outage legend container placed below the plot - outside the canvas */
        .outage-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 12px;
            padding: 12px;
            background: #ffffff;
            border-radius: 8px;
            border: 1px solid #eef2ff;
            box-shadow: 0 4px 12px rgba(20,30,80,0.03);
            justify-content: center; /* Center items when wrapping */
        }

        /* each legend item */
        .outage-legend .legend-entry {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px; /* Reduced from 13px */
            color: #2b3546;
            padding: 5px 7px; /* Reduced padding */
            border-radius: 6px;
            background: #fbfbff;
            border: 1px solid #f1f5ff;
            flex: 0 1 calc(50% - 6px);
            min-width: 200px;
            white-space: nowrap; /* Prevent text wrapping */
        }

        .outage-legend .legend-label { 
            font-weight: 600; 
            color: #344; 
            font-size: 11px; /* Ensure consistent size */
        }

        .outage-legend .legend-value { 
            margin-left: 4px; /* Reduced from 6px */
            font-weight: 700; 
            color: #0b2240; 
            font-size: 11px; /* Ensure consistent size */
        }

        .outage-legend .legend-color {
            width: 14px;
            height: 14px;
            border-radius: 3px;
            box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;
        }

        /* ============ RESPONSIVE DESIGN FOR SMALL SCREENS ============ */
        
        /* Tablets and smaller laptops (max-width: 1200px) */
        @media (max-width: 1200px) {
            .container {
                grid-template-columns: 280px 1fr 350px;
                gap: 15px;
            }
            
            .analysis-container {
                grid-template-columns: 280px 1fr;
                gap: 15px;
            }
        }

        /* Tablets portrait (max-width: 900px) */
        @media (max-width: 900px) {
            body {
                padding: 10px;
            }

            .container {
                grid-template-columns: 1fr;
                grid-template-rows: auto auto 1fr;
                gap: 15px;
                height: auto;
                max-height: none;
            }

            .panel {
                max-height: 600px;
            }

            .panel:nth-child(2) canvas {
                min-height: 350px;
                max-height: 500px;
            }

            #simulationCanvas {
                min-height: 350px;
                max-height: 500px;
            }

            .analysis-container {
                grid-template-columns: 1fr;
                grid-template-rows: auto auto;
                gap: 15px;
                height: auto;
            }

            .charts-container {
                grid-template-columns: 1fr;
            }

            .panel {
                max-height: none;
            }

            .instructions-card { 
                padding: 12px; 
                width: calc(100% - 20px);
            }
            
            .instructions-card .title { 
                font-size: 16px; 
            }
            
            .instructions-body ol li { 
                font-size: 13px; 
            }

            .tab-btn {
                padding: 12px 20px;
                font-size: 14px;
            }
        }

        /* Mobile landscape and small tablets (max-width: 600px) */
        @media (max-width: 600px) {
            body {
                padding: 5px;
            }

            .container {
                gap: 10px;
            }

            .analysis-container {
                gap: 10px;
                padding: 10px;
            }

            .panel {
                padding: 15px;
                border-radius: 8px;
            }

            .panel h2 {
                font-size: 18px;
                margin-bottom: 15px;
            }

            .input-group {
                margin-bottom: 15px;
            }

            .input-group label,
            .control-group label {
                font-size: 13px;
            }

            .input-group input,
            .control-group input {
                padding: 8px;
                font-size: 13px;
            }

            .btn {
                padding: 10px;
                font-size: 14px;
            }

            .tab-btn {
                padding: 10px 15px;
                font-size: 13px;
            }

            .output-item {
                padding: 12px;
                margin-bottom: 12px;
            }

            .output-item h3,
            .analysis-chart h3 {
                font-size: 12px;
            }

            .output-item p {
                font-size: 14px;
            }

            .info-card .value {
                font-size: 20px;
            }

            .chart-description {
                font-size: 16px;
                padding: 6px 10px;
            }

            .instructions-card {
                width: calc(100% - 10px);
                padding: 10px;
                margin: 10px auto;
            }

            .instructions-card .title {
                font-size: 15px;
            }

            .instructions-body ol li {
                font-size: 12px;
                margin: 6px 0;
            }

            .outage-legend {
                gap: 8px;
                padding: 8px;
            }

            .outage-legend .legend-entry {
                font-size: 10px;
                padding: 4px 6px;
                flex: 0 1 100%;
                min-width: unset;
            }

            .analysis-chart canvas {
                height: 250px;
            }

            #simulationCanvas {
                min-height: 300px;
                max-height: 400px;
            }
        }

        /* Very small mobile phones (max-width: 400px) */
        @media (max-width: 400px) {
            body {
                padding: 3px;
            }

            .container,
            .analysis-container {
                gap: 8px;
                padding: 5px;
            }

            .panel {
                padding: 12px;
                border-radius: 6px;
            }

            .panel h2,
            .analysis-controls h2,
            .analysis-results h2 {
                font-size: 16px;
                margin-bottom: 12px;
                padding-bottom: 8px;
            }

            .input-group,
            .control-group {
                margin-bottom: 12px;
            }

            .input-group label,
            .control-group label {
                font-size: 12px;
                margin-bottom: 4px;
            }

            .input-group input,
            .control-group input {
                padding: 7px;
                font-size: 12px;
            }

            .input-group small,
            .control-group small,
            .output-item small {
                font-size: 10px;
            }

            .btn {
                padding: 9px;
                font-size: 13px;
                margin-top: 8px;
            }

            .tab-container {
                flex-direction: column;
            }

            .tab-btn {
                padding: 8px 12px;
                font-size: 12px;
                width: 100%;
            }

            .output-item {
                padding: 10px;
                margin-bottom: 10px;
            }

            .output-item h3,
            .analysis-chart h3 {
                font-size: 11px;
            }

            .output-item p {
                font-size: 13px;
            }

            .info-card {
                padding: 8px;
            }

            .info-card .value {
                font-size: 18px;
            }

            .info-card .label {
                font-size: 10px;
            }

            .matrix-display {
                font-size: 10px;
                padding: 8px;
            }

            .matrix-value {
                min-width: 80px;
            }

            .snr-item {
                padding: 6px;
                font-size: 11px;
            }

            .step-indicator {
                padding: 8px 12px;
                font-size: 12px;
            }

            .chart-description {
                font-size: 14px;
                padding: 5px 8px;
            }

            .instructions-card {
                width: calc(100% - 6px);
                padding: 8px;
                margin: 8px auto;
                border-radius: 8px;
            }

            .instructions-card .title {
                font-size: 14px;
            }

            .instructions-card .chev-wrap {
                width: 24px;
                height: 24px;
            }

            .instructions-card .chev {
                width: 8px;
                height: 8px;
            }

            .instructions-body {
                max-height: 350px;
                padding-top: 6px;
            }

            .instructions-body ol {
                padding-left: 16px;
            }

            .instructions-body ol li {
                font-size: 11px;
                margin: 5px 0;
                line-height: 1.4;
            }

            .analysis-chart {
                padding: 12px;
            }

            .analysis-chart canvas {
                height: 220px;
            }

            #simulationCanvas {
                min-height: 280px;
                max-height: 350px;
            }

            .outage-legend {
                gap: 6px;
                padding: 6px;
                margin-top: 8px;
            }

            .outage-legend .legend-entry {
                font-size: 9px;
                padding: 3px 5px;
            }

            .outage-legend .legend-color {
                width: 12px;
                height: 12px;
            }

            .legend {
                gap: 10px;
                padding: 10px;
            }

            .legend-item {
                gap: 6px;
                font-size: 11px;
            }

            .legend-color {
                width: 16px;
                height: 16px;
            }
        }

        /* Extra small screens (max-width: 320px) - minimum viable */
        @media (max-width: 320px) {
            body {
                padding: 2px;
                font-size: 12px;
            }

            .container,
            .analysis-container {
                gap: 6px;
                padding: 3px;
            }

            .panel {
                padding: 10px;
            }

            .panel h2,
            .analysis-controls h2,
            .analysis-results h2 {
                font-size: 14px;
                margin-bottom: 10px;
                padding-bottom: 6px;
            }

            .input-group,
            .control-group {
                margin-bottom: 10px;
            }

            .input-group label,
            .control-group label {
                font-size: 11px;
            }

            .input-group input,
            .control-group input {
                padding: 6px;
                font-size: 11px;
            }

            .btn {
                padding: 8px;
                font-size: 12px;
            }

            .tab-btn {
                padding: 7px 10px;
                font-size: 11px;
            }

            .output-item {
                padding: 8px;
                margin-bottom: 8px;
            }

            .chart-description {
                font-size: 12px;
                padding: 4px 6px;
            }

            .instructions-card {
                padding: 6px;
                margin: 6px auto;
            }

            .instructions-card .title {
                font-size: 13px;
            }

            .instructions-body ol li {
                font-size: 10px;
                line-height: 1.3;
            }

            .analysis-chart canvas {
                height: 200px;
            }

            .matrix-value {
                min-width: 70px;
                font-size: 9px;
            }
        }