@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');

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

:root{

    --bg:
        #06070b;

    --bg-soft:
        #0b0d12;

    --panel:
        rgba(14,16,22,.12);

    --panel-2:
        rgba(10,12,18,.22);

    --border:
        rgba(240,220,255,.05);

    --text:
        #f1e5ff;

    --text-soft:
        rgba(241,229,255,.55);

    --accent:
        #d8c2ff;

    --accent-soft:
        rgba(216,194,255,.08);

    --glow:
        rgba(255,230,255,.08);

    --green:
        #7dffbc;

    --yellow:
        #ffe27a;

    --red:
        #ff8e8e;
}

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

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

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    font-family:
        "JetBrains Mono",
        monospace;

    background:#05060a;

    color:var(--text);

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;
}

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

body{

    position:relative;

    background:

        radial-gradient(
            circle at top,
            rgba(255,255,255,.04),
            transparent 35%
        ),

        radial-gradient(
            circle at bottom,
            rgba(120,140,255,.03),
            transparent 45%
        ),

        linear-gradient(
            180deg,
            #090a0f 0%,
            #05060a 100%
        );

    text-shadow:none;
}

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

.system{

    position:relative;

    width:100vw;
    height:100vh;
    height:100dvh;

    overflow:hidden;

    filter:none;
}

/* ================================================= */
/* BACKGROUND */
/* ================================================= */

.background-layer{

    position:absolute;
    inset:0;

    z-index:0;
}

/* ================================================= */
/* GRID */
/* ================================================= */

.grid-layer{

    position:absolute;
    inset:0;

    opacity:.12;

    background:

        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size:42px 42px;

    animation:none;
}

@keyframes gridMove{

    from{
        transform:translateY(0px);
    }

    to{
        transform:translateY(42px);
    }
}

/* ================================================= */
/* NOISE */
/* ================================================= */

.background-layer::before{

    content:"";

    position:absolute;
    inset:0;

    background-image:
        radial-gradient(
            rgba(255,255,255,.06) .5px,
            transparent .5px
        );

    background-size:4px 4px;

    opacity:.04;

    mix-blend-mode:normal;

    pointer-events:none;
}

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

.scanlines{

    position:absolute;
    inset:0;

    pointer-events:none;

    opacity:.03;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.02) 0px,
            rgba(255,255,255,.02) 1px,
            transparent 2px,
            transparent 4px
        );

    mix-blend-mode:normal;
}

/* ================================================= */
/* LIGHT BEAMS */
/* ================================================= */

.light-beams{

    position:absolute;
    inset:0;

    pointer-events:none;

    opacity:.55;

    filter:
        blur(48px);

    background:

        linear-gradient(
            115deg,
            transparent 12%,
            rgba(255,255,255,.04) 36%,
            transparent 62%
        ),

        linear-gradient(
            130deg,
            transparent 18%,
            rgba(120,180,255,.03) 52%,
            transparent 84%
        );

    animation:none;
}

@keyframes beamsMove{

    0%{
        transform:
            translateX(-4%)
            translateY(0%);
    }

    50%{
        transform:
            translateX(3%)
            translateY(-2%);
    }

    100%{
        transform:
            translateX(-4%)
            translateY(0%);
    }
}

/* ================================================= */
/* WORLD */
/* ================================================= */

.world-layer{

    position:absolute;

    top:50%;
    left:54%;

    width:94vw;
    height:94vh;

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

    opacity:.16;

    mix-blend-mode:normal;

    filter:none;

    animation:none;

    transition:
        opacity .7s ease,
        filter .7s ease;

    will-change:
        opacity;
}

#world-svg{

    width:100%;
    height:100%;

    pointer-events:auto;
}

/* ================================================= */
/* CONNECTIONS */
/* ================================================= */

#connections-canvas{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;
}

/* ================================================= */
/* COUNTRY MAP */
/* ================================================= */

.country-layer{

    position:absolute;
    inset:0;

    z-index:8;

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 48% 42%,
            rgba(255,255,255,.05),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            rgba(5,6,10,.18),
            rgba(5,6,10,.72)
        );

    transition:
        opacity .7s ease,
        visibility .7s ease;

    touch-action:none;
}

.system.map-zoomed .country-layer{

    opacity:1;
    visibility:visible;

    pointer-events:auto;
}

.system.map-zoomed .world-layer{

    opacity:.04;

    filter:
        brightness(.8);
}

.system.map-zoomed,
.system.map-zoomed .grid-layer,
.system.map-zoomed .light-beams,
.system.map-zoomed .telemetry p{

    animation:none;
}

.country-map{

    position:absolute;

    top:50%;
    left:50%;

    width:min(106vw, 106vh);
    height:min(106vw, 106vh);

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

    transform-origin:center;

    cursor:grab;

    filter:
        brightness(1.28)
        contrast(1.18);

    transition:
        filter .2s ease;

    will-change:
        transform;

    contain:
        layout paint;
}

.country-map.dragging{

    cursor:grabbing;
}

#country-svg{

    width:100%;
    height:100%;

    pointer-events:auto;

    object-fit:contain;
}

.map-controls{

    position:absolute;

    right:60px;
    top:50%;

    transform:
        translateY(-50%);

    display:flex;
    flex-direction:column;

    gap:10px;

    z-index:14;
}

.map-control{

    width:48px;
    height:42px;

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

    background:
        rgba(255,255,255,.045);

    color:var(--text);

    font:inherit;
    font-size:.78rem;
    letter-spacing:.12em;

    cursor:pointer;

    text-shadow:
        0 0 8px rgba(255,220,255,.35);

    box-shadow:
        0 0 20px rgba(255,220,255,.025),
        inset 0 0 18px rgba(255,255,255,.02);
}

.map-control:hover{

    background:
        rgba(255,255,255,.09);

    border-color:
        rgba(255,220,255,.18);
}

.map-control.wide{

    width:92px;
}

.map-readout{

    position:absolute;

    left:60px;
    top:50%;

    transform:
        translateY(-50%);

    display:flex;
    flex-direction:column;

    gap:10px;

    z-index:14;

    font-size:.68rem;
    letter-spacing:.22em;

    color:rgba(241,229,255,.72);

    text-shadow:
        0 0 10px rgba(255,220,255,.28);
}

/* ================================================= */
/* VIGNETTE */
/* ================================================= */

.background-layer::after{

    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    box-shadow:
        inset 0 0 110px rgba(0,0,0,.86);
}

/* ================================================= */
/* HUD LAYER */
/* ================================================= */

.hud-layer{

    position:relative;

    z-index:10;

    width:100%;
    height:100%;

    padding:26px 36px;

    display:flex;
    flex-direction:column;

    pointer-events:none;
}

.hud-layer > *,
.hud-block,
.micro-bar,
.terminal-log,
.system-info{

    pointer-events:auto;
}

/* ================================================= */
/* TOP HUD */
/* ================================================= */

.top-hud{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

/* ================================================= */
/* TOP LEFT */
/* ================================================= */

.top-left{

    display:flex;
    align-items:flex-start;

    gap:18px;
}

/* ================================================= */
/* DAY */
/* ================================================= */

.day-box{

    padding:10px 16px;

    background:
        rgba(255,255,255,.92);

    color:#000;

    box-shadow:
        0 0 22px rgba(255,255,255,.08);
}

.day{

    font-size:2rem;

    font-weight:700;

    letter-spacing:.16em;
}

/* ================================================= */
/* TIME */
/* ================================================= */

.time-box{

    display:flex;
    flex-direction:column;

    gap:4px;

    margin-top:6px;
}

#clock{

    font-size:1rem;

    letter-spacing:.2em;

    color:var(--text);
}

#date{

    font-size:.75rem;

    letter-spacing:.2em;

    color:var(--text-soft);
}

/* ================================================= */
/* TOP CENTER */
/* ================================================= */

.top-center{

    position:absolute;

    left:50%;

    transform:
        translateX(-50%);
}

/* ================================================= */
/* MICRO BAR */
/* ================================================= */

.micro-bar{

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

    gap:40px;

    min-width:430px;

    padding:10px 14px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.015)
        );

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

    backdrop-filter:none;

    font-size:.72rem;

    letter-spacing:.22em;
}

/* ================================================= */
/* RIGHT */
/* ================================================= */

.top-right{

    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:12px;
}

.settings-trigger{
    border:1px solid rgba(125,255,188,.28);
    background:rgba(125,255,188,.08);
    color:#d7ffe9;
    font:inherit;
    font-size:.66rem;
    letter-spacing:.2em;
    padding:10px 12px;
    cursor:pointer;
}

.settings-trigger:hover{
    background:rgba(125,255,188,.16);
}

/* ================================================= */
/* ACTIVE */
/* ================================================= */

.active{

    color:var(--green);
}

/* ================================================= */
/* LEFT HUD */
/* ================================================= */

.left-hud{

    position:absolute;

    top:140px;
    left:60px;

    width:360px;

    display:flex;
    flex-direction:column;

    gap:40px;

    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s ease;
}

/* ================================================= */
/* RIGHT HUD */
/* ================================================= */

.right-hud{

    position:absolute;

    top:140px;
    right:60px;

    width:360px;

    display:flex;
    flex-direction:column;

    gap:40px;

    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s ease;
}

.system.map-zoomed .left-hud,
.system.map-zoomed .right-hud{

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transform:
        translateY(10px);
}

/* ================================================= */
/* HUD BLOCK */
/* ================================================= */

.hud-block{

    background:

        linear-gradient(
            180deg,
            rgba(25,22,32,.08),
            rgba(12,12,18,.14)
        );

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

    backdrop-filter:none;

    padding:18px;

    box-shadow:none;
}

/* ================================================= */
/* TITLES */
/* ================================================= */

.hud-title{

    display:block;

    margin-bottom:18px;

    font-size:.78rem;

    letter-spacing:.28em;

    color:var(--text);

    font-weight:500;
}

/* ================================================= */
/* HUD CONTENT */
/* ================================================= */

.hud-content{

    display:flex;
    flex-direction:column;

    gap:14px;
}

/* ================================================= */
/* HUD ROW */
/* ================================================= */

.hud-row{

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

    font-size:.72rem;

    letter-spacing:.18em;

    color:var(--text-soft);
}

/* ================================================= */
/* SERVICES */
/* ================================================= */

.service-list{

    display:flex;
    flex-direction:column;

    gap:12px;
}

.service-item{

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

    font-size:.72rem;

    letter-spacing:.18em;

    padding-bottom:10px;

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

.service-item.clickable{
    cursor:pointer;
    border:1px solid rgba(255,255,255,.06);
    padding:10px 12px;
    background:rgba(255,255,255,.02);
}

.service-item.clickable:hover{
    background:rgba(255,255,255,.05);
}

.service-connections-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.service-connection-row{
    display:grid;
    grid-template-columns: minmax(140px, 1fr) minmax(100px, 1fr);
    gap:8px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.02);
    padding:10px;
    font-size:.66rem;
    letter-spacing:.08em;
}

/* ================================================= */
/* THREATS */
/* ================================================= */

.threat-list{

    display:flex;
    flex-direction:column;

    gap:14px;
}

.threat-item{

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

    padding:12px;

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

    background:
        rgba(255,255,255,.015);

    font-size:.72rem;

    letter-spacing:.18em;
}

/* ================================================= */
/* COLORS */
/* ================================================= */

.green{
    color:var(--green);
}

.yellow{
    color:var(--yellow);
}

.red{
    color:var(--red);
}

/* ================================================= */
/* MINI MAP */
/* ================================================= */

.mini-map-container{

    position:relative;

    width:100%;
    height:180px;

    overflow:hidden;

    background:
        rgba(255,255,255,.015);

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

#mini-world{

    position:absolute;

    top:50%;
    left:50%;

    width:120%;
    height:120%;

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

    opacity:.38;

    filter:
        brightness(1.6)
        contrast(1.2);
}

/* ================================================= */
/* MINI MAP SCAN */
/* ================================================= */

.mini-map-container::after{

    content:"";

    position:absolute;

    top:-100%;
    left:0;

    width:100%;
    height:200%;

    background:

        linear-gradient(
            to bottom,
            transparent,
            rgba(255,220,255,.06),
            transparent
        );

    animation:
        miniScan 5s linear infinite;
}

@keyframes miniScan{

    from{
        transform:
            translateY(-100%);
    }

    to{
        transform:
            translateY(100%);
    }
}

/* ================================================= */
/* BOTTOM HUD */
/* ================================================= */

.bottom-hud{

    position:absolute;

    left:60px;
    right:60px;
    bottom:40px;

    display:flex;
    justify-content:space-between;
    align-items:flex-end;
}

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

.terminal-log{

    width:520px;
}

/* ================================================= */
/* TELEMETRY */
/* ================================================= */

.telemetry{

    display:flex;
    flex-direction:column;

    gap:10px;

    font-size:.72rem;

    letter-spacing:.16em;

    color:rgba(255,255,255,.72);
}

.telemetry p{

    opacity:.72;

    animation:
        telemetryPulse 4s ease-in-out infinite;
}

.log-status{

    font-weight:700;

    text-shadow:
        0 0 8px currentColor;
}

.log-status.ok{

    color:var(--green);
}

.log-status.warn{

    color:var(--yellow);
}

.log-status.alert{

    color:var(--red);
}

@keyframes telemetryPulse{

    0%{
        opacity:.4;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:.4;
    }
}

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

.system-info{

    text-align:right;

    font-size:.66rem;

    line-height:1.8;

    letter-spacing:.16em;

    color:rgba(255,255,255,.58);
}

/* ================================================= */
/* SETTINGS PANEL */
/* ================================================= */

.settings-overlay{
    position:absolute;
    inset:0;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(5,6,10,.55);
    backdrop-filter:blur(6px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease, visibility .2s ease;
}

.settings-overlay.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.settings-panel{
    width:min(560px, 92vw);
    border:1px solid rgba(255,220,255,.1);
    background:
        linear-gradient(180deg, rgba(19,18,26,.92), rgba(9,10,16,.96));
    box-shadow:
        0 0 60px rgba(255,220,255,.08),
        inset 0 0 30px rgba(255,255,255,.015);
    padding:18px;
}

.settings-head,
.settings-foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.settings-close,
.settings-action,
.settings-logout{
    border:1px solid rgba(255,220,255,.2);
    background:rgba(255,255,255,.04);
    color:var(--text);
    font:inherit;
    font-size:.66rem;
    letter-spacing:.16em;
    padding:9px 10px;
    cursor:pointer;
}

.settings-logout{
    border-color:rgba(255,142,142,.35);
    background:rgba(255,142,142,.1);
    color:#ffd8d8;
}

.settings-body{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin:12px 0 16px;
}

.settings-label{
    font-size:.62rem;
    letter-spacing:.14em;
    color:rgba(241,229,255,.64);
}

.settings-inline{
    display:flex;
    gap:8px;
}

.settings-input{
    flex:1;
    min-width:0;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.03);
    color:var(--text);
    font:inherit;
    font-size:.7rem;
    letter-spacing:.08em;
    padding:10px;
}

.settings-note{
    font-size:.62rem;
    letter-spacing:.1em;
    color:rgba(241,229,255,.58);
}

.admin-tools{
    margin-top:8px;
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:12px;
}

.admin-title{
    margin-bottom:10px;
    font-size:.66rem;
}

.admin-form{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.admin-users-wrap{
    margin-top:10px;
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:10px;
}

.admin-users-list{
    margin-top:8px;
    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:180px;
    overflow:auto;
}

.admin-user-row{
    display:grid;
    grid-template-columns: minmax(140px, 1fr) 70px 70px 86px;
    gap:8px;
    align-items:center;
    padding:8px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.02);
    font-size:.62rem;
    letter-spacing:.08em;
}

.admin-user-email{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.admin-user-pill{
    display:inline-flex;
    justify-content:center;
    border:1px solid rgba(255,255,255,.2);
    padding:3px 6px;
}

.admin-user-pill.active{
    border-color:rgba(125,255,188,.45);
    color:#bfffdc;
}

.admin-user-pill.inactive{
    border-color:rgba(255,142,142,.45);
    color:#ffd1d1;
}

/* ================================================= */
/* BOOT */
/* ================================================= */

.booting .system{

    animation:
        bootSequence 3.5s ease forwards;
}

@keyframes bootSequence{

    0%{

        opacity:0;

        filter:
            brightness(0)
            blur(14px);
    }

    40%{

        opacity:.15;

        filter:
            brightness(.2)
            blur(8px);
    }

    100%{

        opacity:1;

        filter:
            brightness(1)
            blur(0px);
    }
}

/* ================================================= */
/* SUBTLE FLICKER */
/* ================================================= */

.system{

    animation:none;
}

@keyframes subtleFlicker{

    0%{
        opacity:1;
    }

    97%{
        opacity:1;
    }

    98%{
        opacity:.985;
    }

    100%{
        opacity:1;
    }
}

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

body.mobile-optimized .light-beams{
    filter:blur(24px);
    opacity:.3;
}

body.mobile-optimized .scanlines{
    opacity:.04;
}

body.mobile-optimized .world-layer{
    opacity:.12;
    filter:brightness(1.05) contrast(1.04) grayscale(.08);
}

body.mobile-optimized .hud-layer{
    padding:16px;
}

body.mobile-optimized .hud-block{
    backdrop-filter:none;
    box-shadow:none;
}

body.mobile-optimized .micro-bar{
    min-width:unset;
    gap:12px;
    font-size:.62rem;
    letter-spacing:.15em;
}

body.mobile-optimized .map-controls{
    right:50%;
    top:auto;
    bottom:18px;
    transform:translateX(50%);
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
}

body.mobile-optimized .map-readout{
    left:16px;
    top:16px;
    transform:none;
    gap:6px;
    font-size:.58rem;
}

@media (max-width: 1024px){

    .top-hud{
        gap:10px;
        align-items:center;
    }

    .top-center{
        position:static;
        transform:none;
    }

    .top-right{
        display:flex;
        width:100%;
        justify-content:flex-start;
    }

    .day{
        font-size:1.4rem;
    }

    #clock{
        font-size:.88rem;
    }

    #date{
        font-size:.68rem;
    }

    .left-hud,
    .right-hud{
        position:static;
        width:100%;
        gap:12px;
    }

    .hud-block{
        padding:14px;
    }

    .bottom-hud{
        left:16px;
        right:16px;
        bottom:16px;
        flex-direction:column;
        align-items:stretch;
        gap:10px;
    }

    .terminal-log{
        width:100%;
    }

    .system-info{
        text-align:left;
    }
}

@media (max-width: 768px){

    .hud-layer{
        overflow:auto;
        padding:12px;
        gap:10px;
    }

    .top-hud{
        flex-wrap:wrap;
        justify-content:space-between;
    }

    .top-left{
        gap:10px;
    }

    .day-box{
        padding:8px 12px;
    }

    .day{
        font-size:1.1rem;
        letter-spacing:.1em;
    }

    .time-box{
        margin-top:2px;
    }

    .left-hud{
        order:2;
    }

    .right-hud{
        order:3;
    }

    .bottom-hud{
        position:static;
        order:4;
        margin-top:auto;
    }

    .hud-title{
        margin-bottom:10px;
        font-size:.66rem;
        letter-spacing:.2em;
    }

    .hud-row,
    .service-item,
    .threat-item,
    .telemetry,
    .system-info{
        font-size:.62rem;
        letter-spacing:.12em;
    }

    .country-map{
        width:min(126vw, 126vh);
        height:min(126vw, 126vh);
    }
}

@media (max-width: 480px){

    .micro-bar{
        width:100%;
        font-size:.56rem;
        letter-spacing:.1em;
        padding:8px 10px;
    }

    .map-control{
        width:42px;
        height:38px;
        font-size:.66rem;
    }

    .map-control.wide{
        width:80px;
    }

    .settings-inline{
        flex-direction:column;
    }
}

@media (prefers-reduced-motion: reduce){

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

    .grid-layer,
    .light-beams,
    .world-layer,
    .telemetry p,
    .system{
        animation:none !important;
    }
}

/* ================================================= */
/* PERFORMANCE SAFE */
/* ================================================= */

body.performance-safe .system{
    animation:none !important;
}

body.performance-safe .light-beams,
body.performance-safe .scanlines{
    display:none !important;
}

body.performance-safe .world-layer{
    filter:none !important;
}

body.performance-safe .hud-block,
body.performance-safe .settings-panel,
body.performance-safe .login-panel{
    backdrop-filter:none !important;
    box-shadow:none !important;
}

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

.login-body{
    min-height:100vh;
    min-height:100dvh;
    overflow:hidden;
}

.login-shell{
    position:relative;
    width:100vw;
    height:100vh;
    height:100dvh;
    display:grid;
    grid-template-columns: minmax(300px, 560px) minmax(220px, 320px);
    justify-content:center;
    align-content:center;
    gap:28px;
    padding:24px;
    isolation:isolate;
}

.login-grid,
.login-noise{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.login-grid{
    opacity:.12;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:34px 34px;
    z-index:-2;
}

.login-noise{
    background-image:
        radial-gradient(rgba(255,255,255,.08) .5px, transparent .5px);
    background-size:4px 4px;
    opacity:.05;
    z-index:-1;
}

.login-panel{
    background:
        linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 60%, rgba(125,255,188,.03));
    border:1px solid rgba(255,220,255,.08);
    box-shadow:
        0 0 80px rgba(255,220,255,.06),
        inset 0 0 50px rgba(255,255,255,.02);
    padding:34px;
    clip-path:polygon(0 0, 94% 0, 100% 16%, 100% 100%, 6% 100%, 0 84%);
    backdrop-filter:blur(10px);
}

.login-kicker{
    font-size:.68rem;
    letter-spacing:.22em;
    color:rgba(241,229,255,.75);
    margin-bottom:12px;
}

.login-title{
    font-size:clamp(1.4rem, 3vw, 2.2rem);
    letter-spacing:.16em;
    margin-bottom:16px;
}

.login-copy{
    font-size:.78rem;
    line-height:1.8;
    letter-spacing:.1em;
    color:rgba(241,229,255,.76);
    max-width:44ch;
    margin-bottom:24px;
}

.local-login-form{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:12px;
}

.login-field-label{
    font-size:.62rem;
    letter-spacing:.16em;
    color:rgba(241,229,255,.66);
}

.login-input{
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.03);
    color:var(--text);
    font:inherit;
    font-size:.72rem;
    letter-spacing:.09em;
    padding:11px 12px;
    margin-bottom:6px;
}

.local-login-btn{
    margin-top:4px;
    border:1px solid rgba(216,194,255,.35);
    background:linear-gradient(180deg, rgba(216,194,255,.16), rgba(216,194,255,.08));
    color:var(--text);
    font:inherit;
    font-size:.72rem;
    letter-spacing:.16em;
    padding:13px 16px;
    cursor:pointer;
}

.local-login-btn:hover{
    filter:brightness(1.06);
}

.login-divider{
    display:flex;
    align-items:center;
    gap:10px;
    margin:10px 0 12px;
    color:rgba(241,229,255,.45);
    font-size:.6rem;
    letter-spacing:.2em;
}

.login-divider::before,
.login-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:rgba(255,255,255,.12);
}

.google-login-btn{
    width:100%;
    border:1px solid rgba(125,255,188,.3);
    background:linear-gradient(180deg, rgba(125,255,188,.2), rgba(125,255,188,.08));
    color:#d9ffe9;
    font:inherit;
    letter-spacing:.16em;
    font-size:.74rem;
    padding:14px 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    cursor:pointer;
    transition:filter .2s ease, transform .2s ease;
}

.google-login-btn:hover{
    filter:brightness(1.08);
    transform:translateY(-1px);
}

.google-dot{
    width:9px;
    height:9px;
    border-radius:999px;
    background:#7dffbc;
    box-shadow:0 0 12px rgba(125,255,188,.65);
}

.login-note{
    margin-top:14px;
    font-size:.62rem;
    letter-spacing:.12em;
    color:rgba(241,229,255,.54);
}

.login-side{
    display:flex;
    flex-direction:column;
    gap:12px;
    align-self:end;
}

.login-brand{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:14px 12px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.02);
}

.login-brand-logo{
    width:min(210px, 100%);
    height:auto;
    opacity:.9;
    filter:
        drop-shadow(0 0 14px rgba(255,220,255,.12))
        brightness(1.04);
}

.login-side-card{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    font-size:.68rem;
    letter-spacing:.16em;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
}

@media (max-width: 900px){
    .login-shell{
        grid-template-columns:1fr;
        gap:14px;
        align-content:center;
    }

    .login-panel{
        padding:22px;
    }

    .login-side{
        align-self:stretch;
    }
}