/* ============================================================
   style.css - MARS OPERATIONS COMMAND
   ============================================================ */

   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #020305;
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    color: #fff;
}
canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: grab;
}
canvas.dragging {
    cursor: grabbing;
}

/* ===== MAIN MENU ===== */
#main-menu {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 48px;
    padding: 0 10px;
    pointer-events: auto;
    background: transparent;
    border: none;
}
#main-menu .menu-link {
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(224, 202, 189, 0.868);
    text-decoration: none;
    transition: all 0.4s ease;
    cursor: pointer;
    position: relative;
    padding-bottom: 4px;
}
#main-menu .menu-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ff6a20, transparent);
    transition: width 0.4s ease;
    opacity: 0;
}
#main-menu .menu-link:hover {
    color: rgba(205, 135, 98, 0.4);
    text-shadow: 0 0 30px rgba(255, 90, 24, 0.08);
}
#main-menu .menu-link.active {
    color: #ff8a35;
    text-shadow: 0 0 40px rgba(251, 165, 103, 0.15), 0 0 80px rgba(231, 200, 179, 0.05);
}
#main-menu .menu-link.active::after {
    width: 80%;
    opacity: 1;
}

/* ===== GLASS PANELS ===== */
.glass-panel {
    position: fixed;
    background: rgba(10, 5, 2, 0.25);
    backdrop-filter: blur(32px) saturate(1.8);
    -webkit-backdrop-filter: blur(32px) saturate(1.8);
    border: 1px solid rgba(255, 90, 24, 0.08);
    border-radius: 16px;
    box-shadow: 0 8px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 120, 40, 0.06);
    padding: 18px 22px;
    pointer-events: none;
    overflow: hidden;
    z-index: 10;
}
.glass-panel * {
    pointer-events: none;
}
.glass-panel::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -60%;
    width: 220%;
    height: 220%;
    background: radial-gradient(ellipse at 20% 30%, rgba(255, 120, 40, 0.025), transparent 60%);
    pointer-events: none;
}
.glass-panel .glow-line {
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 120, 40, 0.12), transparent);
    opacity: 0.8;
}
.glass-panel .title {
    font-size: 9px;
    letter-spacing: 4.5px;
    text-transform: uppercase;
    color: rgba(212, 144, 108, 0.59);
    margin-bottom: 10px;
    font-weight: 300;
    border-bottom: 1px solid rgba(255, 120, 40, 0.04);
    padding-bottom: 7px;
    text-shadow: 0 0 30px rgba(195, 119, 64, 0.697);
}

/* ===== LEFT PANELS ===== */
#panel-l1 {
    left: 18px;
    top: 80px;
    width: 220px;
}
#panel-l2 {
    left: 18px;
    top: 330px;
    transform: none !important;
    width: 220px;
}
#panel-l3 {
    left: 18px;
    bottom: 18px;
    width: 220px;
}

/* ===== RIGHT PANELS ===== */
#panel-r1 {
    right: 18px;
    top: 80px;
    width: 260px;
}
#panel-r2 {
    right: 18px;
    top: 330px;
    transform: none !important;
    width: 260px;
}
#panel-r3 {
    right: 18px;
    bottom: 18px;
    width: 260px;
}

/* ===== STAT ROWS ===== */
.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 4.5px 0;
    border-bottom: 1px solid rgba(255, 120, 40, 0.025);
    font-size: 10px;
}
.stat-row:last-child {
    border-bottom: none;
}
.stat-row .label {
    color: rgba(182, 133, 106, 0.622);
    font-size: 7.5px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
}
.stat-row .val.neon,
.reactor-row .val.neon,
.bar-row .val.neon {
    color: #ff8a35;
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-shadow: 0 0 30px rgba(255, 138, 53, 0.15), 0 0 60px rgba(255, 138, 53, 0.06);
}

/* ===== REACTOR ROWS ===== */
.reactor-row {
    display: flex;
    justify-content: space-between;
    padding: 4.5px 0;
    border-bottom: 1px solid rgba(255, 120, 40, 0.025);
    font-size: 9px;
    align-items: center;
}
.reactor-row:last-child {
    border-bottom: none;
}
.reactor-row .label {
    color: rgba(182, 133, 106, 0.622);
    font-size: 7.5px;
    text-transform: uppercase;
    letter-spacing: 0.9px;
}

/* ===== BAR ROWS ===== */
.bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 3.5px 0;
}
.bar-row .bar-track {
    flex: 1;
    height: 3.5px;
    background: rgba(255, 120, 40, 0.025);
    border-radius: 4px;
    overflow: hidden;
}
.bar-row .bar-track .bar-fill {
    height: 100%;
    border-radius: 4px;
    box-shadow: 0 0 25px rgba(255, 90, 24, 0.05);
}
.bar-row .bar-label {
    font-size: 6.5px;
    color: rgba(196, 95, 41, 0.449);
    text-transform: uppercase;
    min-width: 24px;
    letter-spacing: 0.9px;
}
.bar-row .bar-val {
    font-size: 7.5px;
    min-width: 28px;
    text-align: right;
}

/* ===== HOLOGRAPHIC BARS ===== */
#panel-l3 .hologram-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 60px;
    padding: 6px 0 0;
    gap: 7px;
}
#panel-l3 .hologram-bars .bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
#panel-l3 .hologram-bars .bar-item .bar {
    width: 100%;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    position: relative;
    opacity: 0.85;
    box-shadow: 0 0 30px rgba(255, 90, 24, 0.06);
}
#panel-l3 .hologram-bars .bar-item .bar::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 120, 40, 0.15);
    box-shadow: 0 0 15px rgba(255, 90, 24, 0.08);
}
#panel-l3 .hologram-bars .bar-item .bar-label {
    font-size: 5.5px;
    color: rgba(255, 155, 101, 0.73);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
#panel-l3 .hologram-bars .bar-item .bar-val {
    font-size: 6.5px;
    color: rgba(255, 155, 101, 0.747);
}

/* ===== HOLO DOTS ===== */
.holo-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 7px;
}
.holo-dot.gold {
    background: #ffd54f;
    box-shadow: 0 0 25px rgba(255, 213, 79, 0.15);
}
.holo-dot.orange {
    background: #ff8a35;
    box-shadow: 0 0 25px rgba(255, 138, 53, 0.15);
}
.holo-dot.hot {
    background: #ff4a3a;
    box-shadow: 0 0 25px rgba(255, 74, 58, 0.15);
}

/* ===== BOTTOM TEXT PANEL ===== */
#panel-bottom-text {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 14px 40px;
    background: rgba(10, 5, 2, 0.25);
    backdrop-filter: blur(26px) saturate(1.6);
    -webkit-backdrop-filter: blur(26px) saturate(1.6);
    border: 1px solid rgba(255, 120, 40, 0.06);
    border-radius: 16px;
    box-shadow: 0 8px 60px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}
#panel-bottom-text * {
    pointer-events: none;
}
.bottom-text-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.bottom-label {
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 155, 101, 0.432);
}
.bottom-value {
    font-size: 18px;
    font-weight: 200;
    letter-spacing: 1px;
}
.bottom-value.neon {
    color: #ff8a35;
    text-shadow: 0 0 30px rgba(255, 138, 53, 0.15), 0 0 60px rgba(255, 138, 53, 0.06);
}
.bottom-divider {
    width: 1px;
    height: 30px;
    background: rgba(255, 120, 40, 0.06);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1400px) {
    #panel-l1,
    #panel-l2,
    #panel-l3 {
        width: 190px;
        padding: 14px 18px;
    }
    #panel-r1,
    #panel-r2,
    #panel-r3 {
        width: 220px;
        padding: 14px 18px;
    }
    #panel-l2 {
        top: 305px;
    }
    #panel-r2 {
        top: 305px;
    }
}
@media (max-width: 1200px) {
    #panel-l1,
    #panel-l2,
    #panel-l3 {
        width: 165px;
        padding: 12px 16px;
    }
    #panel-r1,
    #panel-r2,
    #panel-r3 {
        width: 190px;
        padding: 12px 16px;
    }
    #panel-l2 {
        top: 280px;
    }
    #panel-r2 {
        top: 280px;
    }
    #panel-bottom-text {
        gap: 20px;
        padding: 12px 30px;
    }
    .bottom-value {
        font-size: 16px;
    }
}
@media (max-width: 992px) {
    #panel-l1,
    #panel-l2,
    #panel-l3 {
        width: 145px;
        padding: 10px 14px;
    }
    #panel-r1,
    #panel-r2,
    #panel-r3 {
        width: 165px;
        padding: 10px 14px;
    }
    #panel-l2 {
        top: 250px;
    }
    #panel-r2 {
        top: 250px;
    }
    .stat-row .val.neon,
    .reactor-row .val.neon,
    .bar-row .val.neon {
        font-size: 11px;
    }
    #panel-l3 .hologram-bars {
        height: 46px;
    }
    #panel-bottom-text {
        gap: 16px;
        padding: 10px 24px;
    }
    .bottom-value {
        font-size: 14px;
    }
    .bottom-label {
        font-size: 6px;
    }
}
@media (max-width: 768px) {
    #panel-l1,
    #panel-l2,
    #panel-l3 {
        display: none;
    }
    #panel-r1 {
        right: 10px;
        top: 80px;
        width: 155px;
        padding: 10px 14px;
    }
    #panel-r2 {
        right: 10px;
        top: 250px;
        transform: none !important;
        width: 155px;
        padding: 10px 14px;
    }
    #panel-r3 {
        right: 10px;
        bottom: 10px;
        width: 155px;
        padding: 10px 14px;
    }
    .reactor-row {
        font-size: 7.5px;
        padding: 3px 0;
    }
    .reactor-row .label {
        font-size: 6.5px;
    }
    .reactor-row .val.neon {
        font-size: 10px;
    }
    .bar-row .bar-label {
        font-size: 5.5px;
        min-width: 20px;
    }
    .bar-row .bar-val {
        font-size: 6.5px;
        min-width: 24px;
    }
    #main-menu {
        gap: 24px;
        top: 14px;
    }
    #main-menu .menu-link {
        font-size: 10px;
        letter-spacing: 4px;
    }
    #panel-bottom-text {
        gap: 14px;
        padding: 10px 20px;
        bottom: 10px;
    }
    .bottom-value {
        font-size: 13px;
    }
    .bottom-label {
        font-size: 5.5px;
    }
    .bottom-divider {
        height: 24px;
    }
}
@media (max-width: 480px) {
    #panel-r1 {
        right: 6px;
        top: 70px;
        width: 120px;
        padding: 8px 10px;
    }
    #panel-r2 {
        right: 6px;
        top: 210px;
        transform: none !important;
        width: 120px;
        padding: 8px 10px;
    }
    #panel-r3 {
        display: none;
    }
    .reactor-row {
        font-size: 6px;
        padding: 2px 0;
    }
    .reactor-row .label {
        font-size: 5px;
    }
    .reactor-row .val.neon {
        font-size: 8px;
    }
    .bar-row .bar-label {
        font-size: 4.5px;
        min-width: 16px;
    }
    .bar-row .bar-val {
        font-size: 5.5px;
        min-width: 20px;
    }
    .bar-row .bar-track {
        height: 2.5px;
    }
    #main-menu {
        gap: 14px;
        top: 10px;
    }
    #main-menu .menu-link {
        font-size: 8px;
        letter-spacing: 2.5px;
    }
    #panel-bottom-text {
        gap: 10px;
        padding: 8px 14px;
        bottom: 6px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .bottom-value {
        font-size: 11px;
    }
    .bottom-label {
        font-size: 5px;
        letter-spacing: 1px;
    }
    .bottom-divider {
        height: 20px;
    }
}

/* ===== HOLOGRAPHIC CONTROL ACCESS / LOGIN ===== */
.holo-modal-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at center,rgba(255,90,24,.055),transparent 42%),rgba(1,3,5,.58);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility .28s ease}.holo-modal-overlay.open{opacity:1;visibility:visible;pointer-events:auto}.holo-modal{position:relative;width:min(470px,92vw);padding:1px;border:1px solid rgba(255,106,32,.42);background:linear-gradient(rgba(255,106,32,.06),rgba(255,106,32,.025)),rgba(4,7,9,.91);box-shadow:0 0 0 1px rgba(255,138,53,.05),0 0 30px rgba(255,106,32,.12),0 0 90px rgba(255,74,30,.06),inset 0 0 45px rgba(255,106,32,.035);clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);transform:translateY(12px) scale(.985);transition:transform .32s cubic-bezier(.2,.8,.2,1);overflow:hidden}.holo-modal-overlay.open .holo-modal{transform:translateY(0) scale(1)}.holo-modal:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,138,53,.018) 6px 7px),linear-gradient(90deg,transparent,rgba(255,106,32,.035),transparent)}.holo-modal:after{content:"";position:absolute;left:0;right:0;top:-30%;height:35%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(255,138,53,.08),transparent);animation:holoScan 4s linear infinite}@keyframes holoScan{from{transform:translateY(-20%)}to{transform:translateY(390%)}}.holo-modal-header{position:relative;z-index:2;height:38px;display:flex;align-items:center;gap:9px;padding:0 22px;border-bottom:1px solid rgba(255,106,32,.13);color:rgba(255,183,77,.62);font-size:8px;letter-spacing:3px;font-weight:400}.holo-status-dot{width:6px;height:6px;border-radius:50%;background:#ff8a35;box-shadow:0 0 12px #ff6a20,0 0 24px rgba(255,106,32,.55);animation:holoPulse 1.4s ease-in-out infinite}@keyframes holoPulse{50%{opacity:.35;transform:scale(.7)}}.holo-modal-content{position:relative;z-index:2;padding:30px 38px 34px;text-align:center}.holo-icon{width:42px;height:42px;margin:0 auto 15px;display:grid;place-items:center;border:1px solid rgba(255,106,32,.35);border-radius:50%;color:#ff8a35;font-size:23px;text-shadow:0 0 16px rgba(255,106,32,.8);box-shadow:inset 0 0 18px rgba(255,106,32,.08),0 0 22px rgba(255,106,32,.08)}.holo-modal h2{margin:0 0 13px;color:#ff9a65;font-size:17px;font-weight:300;letter-spacing:4px;text-shadow:0 0 20px rgba(255,106,32,.32)}.holo-modal p{margin:0 auto;max-width:350px;color:rgba(255,190,150,.62);font-size:11px;line-height:1.8;letter-spacing:1.1px}.holo-divider{width:70%;height:1px;margin:22px auto 24px;background:linear-gradient(90deg,transparent,rgba(255,106,32,.32),transparent);box-shadow:0 0 12px rgba(255,106,32,.12)}.holo-actions{display:flex;justify-content:center;gap:12px;margin-top:24px}.holo-btn{min-width:118px;height:38px;padding:0 18px;border:1px solid rgba(255,106,32,.24);background:rgba(255,106,32,.025);color:rgba(255,183,77,.7);font:400 9px 'Segoe UI',Arial,sans-serif;letter-spacing:2.5px;cursor:pointer;transition:.25s ease;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}.holo-btn:hover{color:#fff0e5;border-color:rgba(255,138,53,.72);background:rgba(255,106,32,.11);box-shadow:0 0 20px rgba(255,106,32,.13),inset 0 0 16px rgba(255,106,32,.04);text-shadow:0 0 12px rgba(255,138,53,.7)}.holo-btn.primary{color:#ffb74d;border-color:rgba(255,138,53,.5);background:linear-gradient(180deg,rgba(255,138,53,.13),rgba(255,106,32,.04));box-shadow:0 0 18px rgba(255,106,32,.08),inset 0 0 18px rgba(255,106,32,.04)}.login-modal{width:min(500px,92vw)}.login-modal .holo-modal-content{text-align:left}.login-modal h2{text-align:center}.login-subtitle{text-align:center;margin-bottom:26px!important}#control-login-form label{display:block;margin:0 0 7px;color:rgba(255,154,101,.4);font-size:8px;letter-spacing:2.5px}#control-login-form input{width:100%;height:42px;margin-bottom:18px;padding:0 14px;border:1px solid rgba(255,106,32,.19);outline:none;background:rgba(0,0,0,.28);color:#ffb74d;font:400 12px 'Segoe UI',Arial,sans-serif;letter-spacing:2px;box-shadow:inset 0 0 20px rgba(255,106,32,.025);transition:.25s ease}#control-login-form input:focus{border-color:rgba(255,138,53,.62);box-shadow:0 0 18px rgba(255,106,32,.08),inset 0 0 18px rgba(255,106,32,.04)}#control-login-form .holo-actions{margin-top:8px}.login-error{min-height:16px;color:#ff5d4d;font-size:8px;letter-spacing:1.5px;text-align:center;text-shadow:0 0 10px rgba(255,74,58,.4)}@media(max-width:480px){.holo-modal-content{padding:25px 22px 28px}.holo-modal h2{font-size:13px;letter-spacing:2.5px}.holo-modal p{font-size:10px}.holo-actions{flex-direction:column}.holo-btn{width:100%}}

/* ============================================================
   CONTROL ACCESS HOLOGRAM
   ============================================================ */

   #control-access-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 106, 32, 0.035),
            rgba(2, 3, 5, 0.72) 45%,
            rgba(2, 3, 5, 0.88)
        );

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


#control-access-overlay.show {
    opacity: 1;
    visibility: visible;
}


/* ============================================================
   HOLOGRAM WINDOW
   ============================================================ */

.control-holo-window {

    position: relative;

    width: min(520px, calc(100vw - 40px));

    padding: 30px 34px 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 106, 32, 0.055),
            rgba(10, 5, 2, 0.72)
        );

    border: 1px solid rgba(255, 106, 32, 0.45);

    box-shadow:

        0 0 10px rgba(255, 106, 32, 0.18),

        0 0 35px rgba(255, 106, 32, 0.10),

        0 0 100px rgba(255, 74, 20, 0.06),

        inset 0 0 35px rgba(255, 106, 32, 0.035);

    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);

    color: #ff8a35;

    transform:
        perspective(900px)
        rotateX(7deg)
        scale(0.94);

    opacity: 0;

    transition:
        transform 0.35s cubic-bezier(.2,.8,.2,1),
        opacity 0.35s ease;

    overflow: hidden;
}


#control-access-overlay.show
.control-holo-window {

    transform:
        perspective(900px)
        rotateX(0deg)
        scale(1);

    opacity: 1;
}


/* ============================================================
   SCANLINES
   ============================================================ */

.control-holo-window::before {

    content: '';

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 5px,
            rgba(255, 138, 53, 0.025) 6px
        );

    animation: holoScanlines 7s linear infinite;
}


@keyframes holoScanlines {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 120px;
    }

}


/* ============================================================
   MOVING HOLOGRAM SCAN
   ============================================================ */

.holo-scan {

    position: absolute;

    left: 0;
    right: 0;

    top: -20px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 106, 32, 0.9),
            transparent
        );

    box-shadow:
        0 0 15px rgba(255, 106, 32, 0.8),
        0 0 35px rgba(255, 106, 32, 0.4);

    opacity: 0.7;

    animation: holoScan 3.5s linear infinite;

}


@keyframes holoScan {

    0% {
        top: -5px;
        opacity: 0;
    }

    15% {
        opacity: 0.8;
    }

    50% {
        opacity: 0.4;
    }

    85% {
        opacity: 0.8;
    }

    100% {
        top: 105%;
        opacity: 0;
    }

}


/* ============================================================
   CORNERS
   ============================================================ */

.holo-corner {

    position: absolute;

    width: 18px;
    height: 18px;

    border-color: #ff6a20;

    filter:
        drop-shadow(
            0 0 6px rgba(255, 106, 32, 0.8)
        );
}


.corner-tl {
    top: 10px;
    left: 10px;
    border-top: 1px solid;
    border-left: 1px solid;
}


.corner-tr {
    top: 10px;
    right: 10px;
    border-top: 1px solid;
    border-right: 1px solid;
}


.corner-bl {
    bottom: 10px;
    left: 10px;
    border-bottom: 1px solid;
    border-left: 1px solid;
}


.corner-br {
    bottom: 10px;
    right: 10px;
    border-bottom: 1px solid;
    border-right: 1px solid;
}


/* ============================================================
   HEADER
   ============================================================ */

.control-holo-header {

    position: relative;

    display: flex;
    align-items: center;

    gap: 10px;

    font-size: 11px;

    letter-spacing: 4px;

    color: #ff9a65;

    text-shadow:
        0 0 15px rgba(255, 106, 32, 0.5);

}


.control-status-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ff6a20;

    box-shadow:
        0 0 8px #ff6a20,
        0 0 20px rgba(255, 106, 32, 0.7);

    animation: statusPulse 1.4s infinite;

}


@keyframes statusPulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

}


.control-holo-line {

    height: 1px;

    margin:
        18px 0 25px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 106, 32, 0.55),
            transparent
        );

}


/* ============================================================
   MESSAGE
   ============================================================ */

.control-message {

    text-align: center;

    padding: 5px 10px 18px;

}


.control-warning {

    font-size: 10px;

    letter-spacing: 5px;

    color: #ff4a3a;

    text-shadow:
        0 0 12px rgba(255, 74, 58, 0.45);

    margin-bottom: 16px;

}


.control-text {

    font-size: 16px;

    line-height: 1.8;

    letter-spacing: 1px;

    color: rgba(255, 220, 205, 0.85);

    text-shadow:
        0 0 18px rgba(255, 106, 32, 0.15);

}


/* ============================================================
   BUTTONS
   ============================================================ */

.control-buttons {

    display: flex;

    justify-content: center;

    gap: 14px;

    margin-top: 12px;

}


.control-buttons button {

    position: relative;

    min-width: 145px;

    padding: 11px 20px;

    border: 1px solid rgba(255, 106, 32, 0.45);

    background:
        rgba(255, 106, 32, 0.035);

    color: #ff8a35;

    font-family:
        'Segoe UI',
        Arial,
        sans-serif;

    font-size: 10px;

    letter-spacing: 3px;

    cursor: pointer;

    transition:
        0.25s ease;

    box-shadow:
        inset 0 0 15px rgba(255, 106, 32, 0.025);

}


.control-buttons button:hover {

    color: #ffd1bd;

    border-color: #ff8a35;

    background:
        rgba(255, 106, 32, 0.12);

    box-shadow:
        0 0 15px rgba(255, 106, 32, 0.18),
        inset 0 0 20px rgba(255, 106, 32, 0.06);

    transform: translateY(-1px);

}


.control-buttons button:active {

    transform: scale(0.97);

}


/* ============================================================
   FOOTER
   ============================================================ */

.control-holo-footer {

    margin-top: 22px;

    text-align: center;

    font-size: 7px;

    letter-spacing: 2px;

    color: rgba(255, 154, 101, 0.25);

}


/* ============================================================
   LOGIN
   ============================================================ */

.login-content {

    padding:
        0 5px 5px;

}


.login-field {

    margin-bottom: 17px;

}


.login-field label {

    display: block;

    margin-bottom: 7px;

    font-size: 8px;

    letter-spacing: 3px;

    color: rgba(255, 154, 101, 0.55);

}


.login-input-wrapper {

    position: relative;

    display: flex;

    align-items: center;

    border-bottom:
        1px solid rgba(255, 106, 32, 0.4);

    background:
        rgba(255, 106, 32, 0.025);

}


.input-prefix {

    padding-left: 12px;

    color: #ff6a20;

    font-size: 17px;

}


.login-input-wrapper input {

    width: 100%;

    padding: 12px 10px;

    border: none;

    outline: none;

    background: transparent;

    color: #ffb78f;

    font-family:
        'Segoe UI',
        monospace;

    font-size: 13px;

    letter-spacing: 2px;

    text-shadow:
        0 0 12px rgba(255, 106, 32, 0.35);

}


.login-input-wrapper input:focus {

    background:
        rgba(255, 106, 32, 0.04);

}


#toggle-password {

    min-width: auto !important;

    padding: 5px 10px !important;

    border: none !important;

    background: transparent !important;

    box-shadow: none !important;

}


.login-error {

    height: 0;

    overflow: hidden;

    opacity: 0;

    text-align: center;

    color: #ff4a3a;

    font-size: 8px;

    letter-spacing: 2px;

    transition:
        0.25s ease;

}


.login-error.show {

    height: 20px;

    opacity: 1;

}


.control-buttons button.success {

    color: #ffcfb9;

    border-color: #ff8a35;

    box-shadow:
        0 0 25px rgba(255, 106, 32, 0.35);

}


.control-holo-window.shake {

    animation:
        holoShake 0.45s ease;

}


@keyframes holoShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-8px);
    }

    40% {
        transform: translateX(8px);
    }

    60% {
        transform: translateX(-5px);
    }

    80% {
        transform: translateX(5px);
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .control-holo-window {

        width:
            calc(100vw - 28px);

        padding:
            25px 20px 18px;

    }

    .control-holo-header {

        font-size: 8px;

        letter-spacing: 2.5px;

    }

    .control-text {

        font-size: 13px;

    }

    .control-buttons {

        flex-direction: column;

    }

    .control-buttons button {

        width: 100%;

    }

}
/* ============================================================
   HOLOGRAPHIC LOGIN INPUTS
   ============================================================ */

   .login-field {
    position: relative;
    margin-bottom: 22px;
}

/* Label */
.login-field label {
    display: block;
    margin-bottom: 8px;

    font-size: 8px;
    letter-spacing: 3px;
    text-transform: uppercase;

    color: rgba(255, 154, 101, 0.55);

    text-shadow:
        0 0 12px rgba(255, 106, 32, 0.25);
}


/* INPUT CONTAINER */

.login-field input {
    width: 100%;
    height: 46px;

    box-sizing: border-box;

    padding: 0 16px 0 42px;

    border: 1px solid rgba(255, 106, 32, 0.18);
    border-bottom: 1px solid rgba(255, 106, 32, 0.65);

    outline: none;

    background:
        linear-gradient(
            90deg,
            rgba(255, 106, 32, 0.055),
            rgba(255, 106, 32, 0.015),
            rgba(255, 106, 32, 0.04)
        );

    color: #ffad7c;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 13px;
    letter-spacing: 2px;

    text-shadow:
        0 0 12px rgba(255, 106, 32, 0.45);

    box-shadow:
        inset 0 0 20px rgba(255, 106, 32, 0.025),
        0 0 12px rgba(255, 106, 32, 0.025);

    transition:
        border 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


/* little futuristic left marker */

.login-field::before {
    content: "›";

    position: absolute;

    left: 14px;
    bottom: 10px;

    z-index: 3;

    font-size: 21px;

    color: #ff6a20;

    text-shadow:
        0 0 8px #ff6a20,
        0 0 18px rgba(255, 106, 32, 0.6);

    pointer-events: none;
}


/* small HUD line */

.login-field::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 35px;
    height: 1px;

    background: #ff8a35;

    box-shadow:
        0 0 8px #ff8a35,
        0 0 18px rgba(255, 106, 32, 0.6);

    pointer-events: none;
}


/* FOCUS */

.login-field input:focus {

    border-color:
        rgba(255, 138, 53, 0.65);

    border-bottom-color:
        #ff8a35;

    background:
        linear-gradient(
            90deg,
            rgba(255, 106, 32, 0.10),
            rgba(255, 106, 32, 0.025),
            rgba(255, 106, 32, 0.07)
        );

    box-shadow:

        inset 0 0 25px rgba(255, 106, 32, 0.05),

        0 0 12px rgba(255, 106, 32, 0.12),

        0 0 30px rgba(255, 106, 32, 0.04);

}


/* Placeholder */

.login-field input::placeholder {
    color: rgba(255, 154, 101, 0.25);
}


/* AUTOFILL FIX
   prevents browser from making the input white */

.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus {

    -webkit-text-fill-color: #ffad7c;

    -webkit-box-shadow:
        0 0 0 1000px rgba(15, 7, 3, 0.95) inset,
        0 0 15px rgba(255, 106, 32, 0.08);

    transition:
        background-color 9999s ease-in-out 0s;
}


/* PASSWORD DOTS */

.login-field input[type="password"] {
    letter-spacing: 5px;
}