/* ==========================================================
   RUSSOS AMS X1
   HARDWARE.CSS
   VERSION 2.0
   ========================================================== */


/* ==========================================================
   ROOT
========================================================== */

:root{

    --metal-100:#7B8795;
    --metal-200:#646F7D;
    --metal-300:#4C5562;
    --metal-400:#363D47;
    --metal-500:#252B33;
    --metal-600:#1B2027;
    --metal-700:#13171D;
    --metal-800:#090B0E;

    --cyan:#00F2FE;

    --cyan-soft:#7CFFFF;

    --cyan-dark:#009DA8;

    --cyan-glow:rgba(0,242,254,.35);

    --black:#050608;

}


/* ==========================================================
   RESET
========================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

*::before,
*::after{

    box-sizing:border-box;

}


/* ==========================================================
   HTML
========================================================== */

html{

    width:100%;

    height:100%;

}


/* ==========================================================
   BODY
========================================================== */

body{

    width:100%;

    height:100vh;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    font-family:

        "Segoe UI",
        Arial,
        sans-serif;

    background:

        radial-gradient(

            circle at center,

            #202731 0%,

            #11161D 45%,

            #040608 100%

        );

}


/* ==========================================================
   WRAPPER
========================================================== */

.hardware-wrapper{

    position:relative;

    width:min(96vw,1720px);

    height:min(95vh,980px);

    display:flex;

    justify-content:center;

    align-items:center;

}

/* ==========================================================
   TERMINAL FRAME
========================================================== */

.terminal-hardware-frame{

    position:relative;

    width:100%;

    height:100%;

    overflow:hidden;

    border-radius:8px;

    background:

        linear-gradient(

            180deg,

            var(--metal-100) 0%,

            var(--metal-200) 3%,

            var(--metal-300) 10%,

            var(--metal-400) 22%,

            var(--metal-500) 48%,

            var(--metal-600) 78%,

            var(--metal-700) 100%

        );

    border-top:4px solid #98A4B1;

    border-left:3px solid #5F6977;

    border-right:3px solid #181D23;

    border-bottom:10px solid #06080B;

    box-shadow:

        inset 0 2px 2px rgba(255,255,255,.18),

        inset 0 -10px 20px rgba(0,0,0,.75),

        inset 10px 0 14px rgba(255,255,255,.02),

        inset -10px 0 14px rgba(0,0,0,.35),

        0 45px 90px rgba(0,0,0,.85);

}

/* ==========================================================
   BRUSHED METAL
========================================================== */

.terminal-hardware-frame::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.55;

    background:

        repeating-linear-gradient(

            90deg,

            rgba(255,255,255,.010) 0px,

            rgba(255,255,255,.010) 1px,

            transparent 2px,

            transparent 5px

        ),

        linear-gradient(

            180deg,

            rgba(255,255,255,.035),

            transparent 18%,

            transparent 82%,

            rgba(0,0,0,.22)

        );

}

/* ==========================================================
   CNC OUTER CUT
========================================================== */

.terminal-hardware-frame::after{

    content:"";

    position:absolute;

    inset:12px;

    border-radius:6px;

    pointer-events:none;

    border-top:1px solid rgba(255,255,255,.08);

    border-left:1px solid rgba(255,255,255,.03);

    border-right:1px solid rgba(0,0,0,.70);

    border-bottom:1px solid rgba(0,0,0,.92);

}

/* ==========================================================
   INNER CNC FRAME
========================================================== */

.milled-groove{

    position:absolute;

    top:26px;

    left:26px;

    right:26px;

    bottom:26px;

    border-radius:6px;

    pointer-events:none;

    border-top:2px solid rgba(255,255,255,.04);

    border-left:2px solid rgba(255,255,255,.02);

    border-right:2px solid rgba(0,0,0,.70);

    border-bottom:2px solid rgba(0,0,0,.90);

}

.milled-groove::before{

    content:"";

    position:absolute;

    top:12px;

    left:12px;

    right:12px;

    bottom:12px;

    border-radius:4px;

    border-top:1px solid rgba(255,255,255,.03);

    border-left:1px solid rgba(255,255,255,.02);

    border-right:1px solid rgba(0,0,0,.55);

    border-bottom:1px solid rgba(0,0,0,.75);

}

.milled-groove::after{

    content:"";

    position:absolute;

    top:22px;

    left:22px;

    right:22px;

    bottom:22px;

    border-radius:3px;

    border:1px solid rgba(255,255,255,.015);

}
/* ==========================================================
   CNC CORNER POCKETS
========================================================== */

.corner-pocket{

    position:absolute;

    width:42px;

    height:42px;

    border-radius:6px;

    overflow:hidden;

    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,.04),

            rgba(0,0,0,.25)

        );

    box-shadow:

        inset 2px 2px 3px rgba(255,255,255,.08),

        inset -2px -2px 4px rgba(0,0,0,.55);

}

.corner-pocket::before{

    content:"";

    position:absolute;

    left:-28px;

    top:-28px;

    width:90px;

    height:90px;

    transform:rotate(45deg);

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.08),

            transparent

        );

    opacity:.25;

}

.corner-pocket.tl{

    top:8px;

    left:8px;

}

.corner-pocket.tr{

    top:8px;

    right:8px;

}

.corner-pocket.bl{

    bottom:8px;

    left:8px;

}

.corner-pocket.br{

    bottom:8px;

    right:8px;

}


/* ==========================================================
   TORX SCREW
========================================================== */

.torx{

    position:absolute;

    width:18px;
    height:18px;

    border-radius:50%;

    background:
        radial-gradient(
            circle at 35% 35%,
            #9AA5B3 0%,
            #697381 30%,
            #3C454F 65%,
            #171B21 100%
        );

    border:1px solid #08090B;

    box-shadow:

        inset 0 2px 2px rgba(255,255,255,.20),

        inset 0 -3px 4px rgba(0,0,0,.85);

    z-index:40;

}
.torx::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(255,255,255,.05),

            rgba(0,0,0,.18)

        );

    box-shadow:

        inset 0 3px 5px rgba(0,0,0,.55),

        inset 0 -1px rgba(255,255,255,.05);

}
.torx::after{

    content:"✹";

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:10px;

    color:#161B21;

}
.tl{

    top:22px;

    left:22px;

}

.tr{

    top:22px;

    right:22px;

}

.bl{

    bottom:22px;

    left:22px;

}

.br{

    bottom:22px;

    right:22px;

}

/* ==========================================================
   CAMERA MODULE
========================================================== */

.camera-module{

    position:absolute;

    top:22px;

    left:50%;

    transform:translateX(-185px);

    display:flex;

    align-items:center;

    gap:10px;

    z-index:120;

}

.camera-lens{

    position:relative;

    width:16px;

    height:16px;

    border-radius:50%;

    background:

        radial-gradient(

            circle at 35% 35%,

            #5C6773,

            #232932 45%,

            #050608 100%

        );

    border:2px solid #414B57;

    box-shadow:

        inset 0 2px 2px rgba(255,255,255,.18),

        inset 0 -3px 5px rgba(0,0,0,.90),

        0 0 0 2px #2A313B;

}

.camera-lens::after{

    content:"";

    position:absolute;

    top:4px;

    left:4px;

    width:4px;

    height:4px;

    border-radius:50%;

    background:white;

    opacity:.7;

}

.camera-led{

    width:5px;

    height:5px;

    border-radius:50%;

    background:#00F2FE;

    box-shadow:

        0 0 8px rgba(0,242,254,.60);

}

/* ==========================================================
   TOP BRAND PLATE
========================================================== */

.brand-screw{

    position:absolute;

    top:50%;

    width:8px;
    height:8px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            #A1ABB7,

            #49535F

        );

    border:1px solid #101214;

    transform:translateY(-50%);

}

.brand-screw.left{

    left:10px;

}

.brand-screw.right{

    right:10px;

}

    box-shadow:

        inset 0 1px rgba(255,255,255,.18),

        0 6px 16px rgba(0,0,0,.55);

}

.top-brand-plate::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.05),

            transparent 45%,

            rgba(0,0,0,.20)

        );

}

.top-brand-plate h1{

    position:relative;

    z-index:2;

    font-size:17px;

    letter-spacing:4px;

    color:#00F2FE;

    text-align:center;

    text-shadow:0 0 12px rgba(0,242,254,.35);

}

.top-brand-plate span{

    position:relative;

    z-index:2;

    display:block;

    margin-top:4px;

    font-size:10px;

    letter-spacing:2px;

    text-align:center;

    color:#7B8898;

}

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

.hardware-left,
.hardware-right{

    position:absolute;

    top:82px;

    bottom:68px;

    width:62px;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:40;

}

.hardware-left{

    left:12px;

}

.hardware-right{

    right:12px;

}
/* ==========================================================
   VENT MODULE
========================================================== */

.vent-area{

    position:relative;

    width:42px;

    height:340px;

    overflow:hidden;

    border-radius:4px;

    background:

        linear-gradient(

            180deg,

            #151A20,

            #07090B

        );

    border-top:2px solid #313944;

    border-left:2px solid #242B34;

    border-right:2px solid #050608;

    border-bottom:2px solid #050608;

    box-shadow:

        inset 0 10px 18px rgba(0,0,0,.92),

        inset 0 -6px 10px rgba(255,255,255,.03),

        0 3px 8px rgba(0,0,0,.35);

}
.vent-area::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.35;

    background-image:

        radial-gradient(

            circle,

            #1D232B 28%,

            transparent 29%

        );

    background-size:9px 9px;

}
.vent-area::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            90deg,

            rgba(255,255,255,.03),

            transparent 30%,

            transparent 70%,

            rgba(0,0,0,.18)

        );

}
.vent-area span{

    position:relative;

    display:block;

    width:78%;

    height:4px;

    margin:10px auto;

    border-radius:2px;

    background:

        linear-gradient(

            180deg,

            #424C59,

            #181D23

        );

    box-shadow:

        0 1px rgba(255,255,255,.05),

        inset 0 -1px rgba(0,0,0,.75);

    z-index:5;

}
.vent-screw{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    width:8px;

    height:8px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            #666F7B,

            #2A313B

        );

    border:1px solid #090B0D;

    box-shadow:

        inset 0 1px rgba(255,255,255,.15),

        inset 0 -1px rgba(0,0,0,.55);

    z-index:20;

}

.vent-screw.top{

    top:6px;

}

.vent-screw.bottom{

    bottom:6px;

}

/* ==========================================================
   AMBIENT LIGHT PIPE
========================================================== */

.ambient-strip{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:8px;

    height:230px;

    border-radius:20px;

    background:

        linear-gradient(

            180deg,

            #D7FFFF,

            #00F2FE,

            #009AA5

        );

    border-left:1px solid rgba(255,255,255,.45);

    border-right:1px solid rgba(0,0,0,.30);

    box-shadow:

        0 0 10px rgba(0,242,254,.45),

        0 0 24px rgba(0,242,254,.35),

        0 0 50px rgba(0,242,254,.18),

        0 0 90px rgba(0,242,254,.08);

}

.ambient-strip.left{

    left:-6px;

}

.ambient-strip.right{

    right:-6px;

}
.ambient-strip::before{

    content:"";

    position:absolute;

    left:1px;

    top:0;

    width:2px;

    height:100%;

    border-radius:20px;

    background:

        rgba(255,255,255,.55);

    opacity:.7;

}
/* ==========================================================
   AMBIENT LIGHT PIPE — SOFT TOP DIFFUSER
========================================================== */

.ambient-strip::after{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:18px;

    border-radius:20px;

    background:

        linear-gradient(
            180deg,
            rgba(207,255,255,.18),
            rgba(0,242,254,.08),
            transparent
        );

    box-shadow:none;

    pointer-events:none;

}

/* ==========================================================
   SERVICE PANEL
========================================================== */

.bottom-controls{

    position:absolute;

    left:65px;
    right:70px;

    bottom:10px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;

    z-index:200;

    pointer-events:none;

}


/* ==========================================================
   UPPER SERVICE SEAM
========================================================== */

.bottom-controls::before{

    content:"";

    position:absolute;

    left:0;
    right:0;

    top:-10px;

    height:2px;

    background:

        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.035) 15%,
            rgba(255,255,255,.08) 50%,
            rgba(255,255,255,.035) 85%,
            transparent 100%
        );

    pointer-events:none;

}


/* ==========================================================
   LOWER SERVICE SEAM
========================================================== */

.bottom-controls::after{

    content:"";

    position:absolute;

    left:0;
    right:0;

    bottom:-6px;

    height:1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.025),
            transparent
        );

    pointer-events:none;

}
/* ==========================================================
   DEVICE LABEL
========================================================== */

.device-information{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    gap:3px;

    min-width:220px;

    height:58px;

    flex:1;

}


/* ==========================================================
   DEVICE NAME
========================================================== */

.device-information strong{

    display:block;

    font-size:13px;

    font-weight:800;

    line-height:1;

    color:#D6DFE9;

    letter-spacing:2.5px;

    white-space:nowrap;

}


/* ==========================================================
   SERIAL / FIRMWARE
========================================================== */

.device-information span{

    display:block;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:8px;

    line-height:1;

    color:#667481;

    letter-spacing:1.5px;

    white-space:nowrap;

}
/* ==========================================================
   STATUS LED PANEL
========================================================== */

.status-leds{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%, -50%);

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    height:34px;

    padding:5px 16px;

    background:
        linear-gradient(
            180deg,
            #151A20 0%,
            #090C10 100%
        );

    border-radius:3px;

    border-top:1px solid rgba(255,255,255,.07);

    border-left:1px solid rgba(255,255,255,.025);

    border-right:1px solid #050608;

    border-bottom:2px solid #050608;

    box-shadow:

        inset 0 2px 4px rgba(0,0,0,.75),

        inset 0 -1px rgba(255,255,255,.025),

        0 3px 8px rgba(0,0,0,.45);

    z-index:10;

}


/* ==========================================================
   LED GROUP
========================================================== */

.led-group{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:4px;

    min-width:22px;

}


/* ==========================================================
   LED LABEL
========================================================== */

.led-group span{

    color:#4E5A67;

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

    font-size:7px;

    font-weight:600;

    letter-spacing:1px;

    line-height:1;

}


/* ==========================================================
   LED
========================================================== */

.led{

    width:7px;
    height:7px;

    border-radius:50%;

    background:#172027;

    border:1px solid #050709;

    box-shadow:

        inset 0 1px 1px rgba(255,255,255,.08),

        0 1px 2px rgba(0,0,0,.75);

}


/* ==========================================================
   POWER
========================================================== */

.led-power{

    background:#00DCE8;

    box-shadow:

        0 0 4px rgba(0,242,254,.65),

        0 0 9px rgba(0,242,254,.25),

        inset 0 1px rgba(255,255,255,.50);

}


/* ==========================================================
   SYSTEM
========================================================== */

.led-system{

    background:#006D77;

    box-shadow:

        0 0 4px rgba(0,242,254,.20),

        inset 0 1px rgba(255,255,255,.20);

}


/* ==========================================================
   NETWORK
========================================================== */

.led-network{

    background:#007984;

    box-shadow:

        0 0 4px rgba(0,242,254,.25),

        inset 0 1px rgba(255,255,255,.22);

}


/* ==========================================================
   STORAGE
========================================================== */

.led-storage{

    background:#009AA5;

    box-shadow:

        0 0 5px rgba(0,242,254,.30),

        inset 0 1px rgba(255,255,255,.28);

}

/* ==========================================================
   RUBBER FEET
========================================================== */

.terminal-hardware-frame .foot{

    position:absolute;

    bottom:-8px;

    width:120px;

    height:10px;

    background:#050608;

    border-radius:0 0 5px 5px;

}

.foot.left{

    left:120px;

}

.foot.right{

    right:120px;

}