:root{
    --bg:#a8b097;
    --panel:#c0c8ad;
    --panel-light:#d4dbc5;
    --border:#2e3528;
    --shadow:#6f7763;
    --lcd:#dde6c8;
    --lcd-dark:#55624d;
    --text:#1a1f16;
    --amber:#c89b52;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:linear-gradient(to bottom,#b7bea8,#a3ab93);
    color:var(--text);
    font-family:Verdana, sans-serif;
    image-rendering:pixelated;
}

/* =========================
   TOP BAR
========================= */

#topbar{
    width:100%;
    background:var(--panel);
    border-bottom:2px solid var(--border);
    padding:12px;
    box-shadow:0px 3px 0px var(--shadow);
}

#topbar table{
    width:100%;
}

.logo{
    font-weight:bold;
    font-size:36px;
    letter-spacing:2px;
}

.nav{
    text-align:right;
}

.nav span{
    display:inline-block;
    margin-left:10px;
    padding:6px 10px;
    border:2px solid var(--border);
    background:var(--panel-light);
    box-shadow:2px 2px 0px var(--shadow);
    font-size:18px;
    cursor:pointer;
}

/* =========================
   HERO
========================= */

#hero{
    width:95%;
    max-width:1200px;
    margin:40px auto;
}

.hero-panel{
    background:#c8cfb8;
    border:2px solid var(--border);
    box-shadow:6px 6px 0px var(--shadow);
    padding:20px;
}

.hero-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:20px;
}

.hero-left{
    background:var(--panel-light);
    border:2px solid var(--border);
    padding:20px;
}

.hero-right{
    background:var(--lcd);
    border:2px solid var(--border);
    padding:15px;
    font-family:"Courier New", monospace;
    color:var(--lcd-dark);
}

.hero-title{
    font-size:52px;
    font-weight:bold;
    letter-spacing:3px;
    margin-bottom:10px;
}

#displaymode-desktop,
#displaymode-mobile{
    display:inline-block;
    margin-top:25px;
    background:var(--panel);
    border:2px solid var(--border);
    padding:10px 18px;
    box-shadow:3px 3px 0px var(--shadow);
    font-weight:bold;
    font-size:14px;
    cursor:pointer;
    user-select:none;
}

#displaymode-desktop:active,
#displaymode-mobile:active{
    transform:translate(2px,2px);
    box-shadow:1px 1px 0px var(--shadow);
}

body.field-mode{
    background:linear-gradient(to bottom,#b8bea8,#9da38f);
    filter:grayscale(0.65) contrast(1.1);
}

body.field-mode .hero-right{
    background:#d9dfc8;
    color:#495342;
}

body.field-mode .led{
    background:#6b735f;
}

.hero-subtitle{
    font-size:24px;
    margin-bottom:25px;
}

.hero-desc{
    width:80%;
    line-height:1.8;
    font-size:14px;
}

.button{
    display:inline-block;
    margin-top:25px;
    background:var(--panel);
    border:2px solid var(--border);
    padding:10px 18px;
    box-shadow:3px 3px 0px var(--shadow);
    font-weight:bold;
    cursor:pointer;
}

.button:active{
    transform:translate(2px,2px);
    box-shadow:1px 1px 0px var(--shadow);
}

.status-line{
    margin-bottom:12px;
    font-size:13px;
}

.led{
    width:10px;
    height:10px;
    display:inline-block;
    background:#5f7d55;
    border:1px solid #2f382b;
    margin-right:6px;
}

/* =========================
   MODULES
========================= */

#modules{
    width:95%;
    max-width:1200px;
    margin:30px auto;
}

.section-title{
    margin-bottom:20px;
    font-size:28px;
    font-weight:bold;
    letter-spacing:1px;
}

.module-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
    align-items:start;
}

.module{
    cursor:pointer;
    transition:0.1s;
    background:#c6ceb5;
    border:2px solid var(--border);
    box-shadow:4px 4px 0px var(--shadow);
    padding:15px;
}

.module:hover{
    transform:translate(-2px,-2px);
}

.module-expand{
    display:none;
    margin-top:18px;
    padding-top:15px;
    border-top:2px dashed var(--border);
    font-family:"Courier New", monospace;
    font-size:12px;
    color:#33412d;
}

.module-expand.active{
    display:block;
}

.module-terminal-line{
    margin-bottom:10px;
}

.module-header{
    margin-bottom:12px;
    font-weight:bold;
    font-size:24px;
}

.module-status{
    font-size:11px;
    margin-bottom:15px;
    color:#33412d;
}

.module-desc{
    font-size:13px;
    line-height:1.7;
}

/* =========================
   INFRASTRUCTURE
========================= */

#infrastructure{
    width:95%;
    max-width:1200px;
    margin:40px auto;
}

.infra-panel{
    background:#c7cfb8;
    border:2px solid var(--border);
    box-shadow:6px 6px 0px var(--shadow);
    padding:20px;
}

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

.infra-box{
    background:var(--panel-light);
    border:2px solid var(--border);
    padding:15px;
    min-height:120px;
}

.infra-box-title{
    font-weight:bold;
    font-size:24px;
    margin-bottom:10px;
}

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

#access-popup-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(60,65,55,0.45);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:999;
}

#access-popup{
    width:340px;
    background:var(--panel-light);
    border:2px solid var(--border);
    box-shadow:8px 8px 0px var(--shadow);
    padding:20px;
}

#access-popup-title{
    font-weight:bold;
    font-size:22px;
    margin-bottom:20px;
}

.access-label{
    margin-bottom:6px;
    font-size:12px;
    font-weight:bold;
}

.access-input{
    width:100%;
    margin-bottom:18px;
    border:2px solid var(--border);
    background:var(--lcd);
    padding:10px;
    font-family:"Courier New", monospace;
    font-size:14px;
    outline:none;
}

#access-buttons{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

#footer{
    margin-top:50px;
    background:var(--panel);
    border-top:2px solid var(--border);
    padding:15px;
    font-family:"Data 70", sans-serif;
    font-size:24px;
}

.footer-line{
    margin-bottom:5px;
}

.footer-line::after{
    content:"";
    display:inline-block;
    width:0.65em;
    height:2px;
    margin-left:0.35em;
    background:currentColor;
    vertical-align:baseline;
    animation:footer-cursor-blink 1s steps(2,start) infinite;
}

@keyframes footer-cursor-blink{
    to{visibility:hidden;}
}

@media(prefers-reduced-motion:reduce){
    .footer-line::after{
        animation:none;
    }
}

/* =========================
   RESPONSIVE
========================= */

#displaymode-mobile{
    display:none;
}

@media(max-width:900px){

    .hero-grid{
        grid-template-columns:1fr;
    }

    #displaymode-desktop{
        display:none;
    }

    #displaymode-mobile{
        display:inline-block;
    }

    .hero-title{
        font-size:36px;
    }

    .hero-desc{
        width:100%;
    }

}




/* Data 70 for headings and all interactive buttons */
@font-face{
    font-family:"Data 70";
    src:url("../fonts/Data-70-Regular.otf") format("opentype");
    font-style:normal;
    font-weight:400;
    font-display:swap;
}

.logo,
.hero-title,
.hero-subtitle,
.section-title,
.module-header,
.infra-box-title,
#access-popup-title,
.nav span,
#displaymode-desktop,
#displaymode-mobile,
.button{
    font-family:"Data 70", sans-serif;
    font-weight:400;
}