body {margin:0;}

* {box-sizing: border-box;}
#container {width:1500px; margin:0 auto; background-color:rgb(0, 255, 30); display:flex;}
#debug {width:50%; float:left; display:block;}
#simulator {width:50%; float:left; display:block;}
a:link {text-decoration: none;}
   .terminal-hardware {
    width: 100%;
    height: 860px;
    margin: 30px auto;
    background: #2b2b2b;
    border: 4px solid #1a1a1a;
    border-radius: 28px;
    padding: 35px 20px 25px 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 2px 5px rgba(255, 255, 255, 0.2);
    position: relative;
    box-sizing: border-box;
}

.terminal-hardware::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 25%;
    width: 50%;
    height: 6px;
    background: #111;
    border-radius: 3px;
    box-shadow: inset 0 2px 3px rgba(0,0,0,0.8);
}

.terminal-viewport {
    position:relative;
    width: 400px;
    height: 800px;
    background: #f4f6f9;
    border: 3px solid #000;
    border-radius: 6px;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.flash-alert {
    position: absolute; /* Rips it out of the layout flow so buttons stay perfectly still */
    top: 65px;          /* Measures 65px down from the top edge of the PHONE GLASS */
    left: 5%;           /* Centers the badge inside the phone borders */
    width: 90%;
    
    background: #28a745; 
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-size: 16px;
    z-index: 9999;       /* Sits safely on top of your dropdown inputs */
    pointer-events: none; /* Let's you tap through the badge to keep boarding passengers fast! */
    box-sizing: border-box;
}

.terminal-viewport::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 30%, transparent 31%);
    pointer-events: none;
    z-index: 10;
}

.viewport-header {
    background: #0056b3;
    color: #ffffff;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #004085;
}

.viewport-content {
    flex: 1;
    padding: 15px 10px;
    overflow-y: auto;
}

/* THE BULKHEAD INTERFACE GRID Matrix */
#keypad {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Forces exactly two equal columns (50% split) */
    gap: 12px; /* Automatically injects a perfect, uniform gutter between ALL buttons */
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   THE ADJACENT SIBLING REPARATION FIX
   ========================================================================== */

/* Target the absolute first form container that appears immediately below the keypad */
#keypad ~ form:first-of-type {
    display: block;
    clear: both;      /* Ironclad shield: forces floated grid elements to clear the screen layout */
    margin-top: 12px; /* Injects a clean, un-collapsible space directly below the grid matrix */
}

/* MAINTAIN YOUR GLOBAL EXCLUSION COAT */
.terminal-btn:not(#keypad .terminal-btn) {
    margin-bottom: 12px;
}

.terminal-btn {
    display: block;
    width: 100%;
    min-height: 60px;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    background: #28a745;
    border: none;
    border-bottom: 4px solid #1e7e34;
    border-radius: 8px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
}



.terminal-btn:active {
    border-bottom-width: 0;
    transform: translateY(4px);
}

.last-btn {
    display: block;
    width: 46%;
    min-height: 60px;
    padding: 15px;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    background: #dc3545;
    border: none;
    border-bottom: 4px solid #bd2130;
    border-radius: 8px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    float: right;
}

.display {
    display: block;
    width: 100%;
    min-height: 140px;
    margin-bottom: 15px;
    padding: 15px;
    font-size: 15px;
    color: #333333;
    background: #ffffff;
    border-radius: 8px;
    box-sizing: border-box;
    text-align: left;
    border: 2px solid #ced4da;
}