:root{

    --navy:#06131d;
    --navy-2:#081925;
    --navy-3:#02080d;

    --panel:rgba(7,21,31,.94);
    --panel-dark:rgba(4,13,20,.97);

    --gold:#d3a15b;
    --gold-2:#efc879;
    --gold-soft:#f0ce94;

    --text:#f2eee7;
    --muted:#abb2b6;

    --border:rgba(211,161,91,.58);
    --border-soft:rgba(255,255,255,.09);

    --green:#2bd887;
    --red:#ff6c77;

    --content-max:1460px;
}


*{
    box-sizing:border-box;
}


html,
body{
    width:100%;
    height:100%;

    margin:0;
    padding:0;

    overflow:hidden;
}


body{
    color:var(--text);

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

    background:
        radial-gradient(
            circle at 18% 42%,
            rgba(14,49,64,.25),
            transparent 37%
        ),
        radial-gradient(
            circle at 84% 50%,
            rgba(121,78,34,.15),
            transparent 28%
        ),
        linear-gradient(
            112deg,
            var(--navy),
            #06121b 62%,
            var(--navy-3)
        );
}


button,
input{
    font:inherit;
}


button{
    cursor:pointer;
}


.hidden{
    display:none !important;
}



/* =========================================================
   SHELL
   ========================================================= */

.app-shell{
    position:relative;

    width:100%;
    height:100dvh;

    display:grid;

    grid-template-rows:
        clamp(72px,9vh,92px)
        1px
        1fr
        clamp(22px,3vh,30px);

    overflow:hidden;
}



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

.environment{
    position:fixed;

    inset:0;

    z-index:-1;

    pointer-events:none;

    overflow:hidden;
}


/* RIGHT COLUMNS */

.warm-column{
    position:absolute;

    top:0;
    bottom:0;

    width:52px;

    background:
        linear-gradient(
            90deg,
            rgba(255,211,151,.04),
            rgba(255,192,109,.21),
            rgba(49,30,16,.28),
            rgba(255,179,81,.10)
        );

    opacity:.50;
}


.column-a{
    right:0;
}


.column-b{
    right:62px;
}


.column-c{
    right:124px;
}


/* PLANTS */

.plant{
    position:absolute;

    width:230px;
    height:370px;

    opacity:.25;
}


.plant-left{
    left:-50px;
    bottom:120px;

    background:
        radial-gradient(
            ellipse at 42% 70%,
            rgba(72,105,60,.95),
            transparent 21%
        ),
        radial-gradient(
            ellipse at 58% 52%,
            rgba(81,116,67,.90),
            transparent 22%
        ),
        radial-gradient(
            ellipse at 34% 32%,
            rgba(91,125,72,.85),
            transparent 21%
        );
}


.plant-right{
    right:-60px;
    bottom:140px;

    background:
        radial-gradient(
            ellipse at 54% 25%,
            rgba(91,125,70,.85),
            transparent 24%
        ),
        radial-gradient(
            ellipse at 36% 50%,
            rgba(82,114,67,.90),
            transparent 24%
        ),
        radial-gradient(
            ellipse at 62% 74%,
            rgba(68,98,58,.85),
            transparent 25%
        );
}


/* LAMP */

.left-lamp{
    position:absolute;

    left:0;
    top:25%;

    width:175px;
    height:260px;

    opacity:.85;
}


.lamp-shade{
    position:absolute;

    left:-15px;
    top:15px;

    width:165px;
    height:75px;

    border-radius:
        80px 80px 12px 12px;

    background:
        linear-gradient(
            180deg,
            #111518,
            #050708
        );

    border-bottom:
        2px solid
        rgba(255,194,108,.60);

    box-shadow:
        0 18px 38px
        rgba(237,177,91,.20);
}


.lamp-light{
    position:absolute;

    left:12px;
    top:72px;

    width:120px;
    height:60px;

    border-radius:50%;

    background:
        rgba(244,178,87,.25);

    filter:blur(22px);
}


.lamp-stem{
    position:absolute;

    left:62px;
    top:86px;

    width:5px;
    height:164px;

    background:
        linear-gradient(
            90deg,
            #6c4923,
            #c4904d,
            #563715
        );
}


/* BOOKS */

.legal-books{
    position:absolute;

    left:0;
    bottom:33px;

    width:450px;
    height:225px;

    opacity:.90;
}


.legal-book{
    position:absolute;

    left:-25px;

    height:57px;

    display:flex;
    align-items:center;

    padding-left:165px;

    color:#d29a50;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:22px;

    border:
        1px solid
        rgba(195,135,60,.38);

    border-radius:
        0 7px 7px 0;

    background:
        linear-gradient(
            180deg,
            #15191c,
            #07090b 68%,
            #170e07
        );

    box-shadow:
        0 15px 28px
        rgba(0,0,0,.33);
}


.legal-book::before,
.legal-book::after{
    content:"";

    position:absolute;

    top:0;
    bottom:0;

    width:3px;

    background:#9b672e;
}


.legal-book::before{
    left:124px;
}


.legal-book::after{
    left:138px;
}


.book-one{
    width:380px;

    bottom:125px;
}


.book-two{
    width:400px;

    bottom:65px;
}


.book-three{
    width:425px;

    bottom:5px;
}


.decor-orb{
    position:absolute;

    left:405px;
    bottom:28px;

    width:75px;
    height:75px;

    border-radius:50%;

    background:
        radial-gradient(
            circle at 32% 29%,
            #67727a,
            #20272c 37%,
            #07090b 78%
        );

    box-shadow:
        inset -10px -13px 22px
        rgba(0,0,0,.52),
        0 17px 30px
        rgba(0,0,0,.28);
}


/* FLOOR */

.marble-floor{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:24%;

    opacity:.27;

    background:
        linear-gradient(
            170deg,
            rgba(52,60,65,.25),
            rgba(3,7,10,.02)
        );

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



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

.topbar{
    display:flex;

    align-items:center;
}


.topbar-inner{
    width:calc(100% - 72px);
    max-width:var(--content-max);

    margin:auto;

    display:grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:center;
}


.brand{
    justify-self:start;
}


.brand-name{
    color:#f0f1ee;

    font-size:
        clamp(
            23px,
            2vw,
            31px
        );

    font-weight:500;

    letter-spacing:.38em;
}


.brand-sub{
    margin-top:8px;

    color:#c9cbc7;

    font-size:
        clamp(
            6px,
            .55vw,
            8px
        );

    letter-spacing:.47em;
}


.product-name{
    display:flex;

    align-items:center;

    gap:20px;

    color:#d7d9d7;

    font-size:
        clamp(
            8px,
            .8vw,
            11px
        );

    font-weight:600;

    letter-spacing:.34em;
}


.product-name b{
    color:var(--gold-2);

    font-weight:600;
}


.product-line{
    width:
        clamp(
            40px,
            5vw,
            75px
        );

    height:1px;

    background:
        rgba(211,161,91,.65);
}


.secure-label{
    justify-self:end;

    display:flex;

    align-items:center;

    gap:9px;

    color:#d3d6d4;

    font-size:
        clamp(
            8px,
            .7vw,
            10px
        );
}


.secure-label svg{
    width:
        clamp(
            16px,
            1.3vw,
            20px
        );

    height:
        clamp(
            16px,
            1.3vw,
            20px
        );

    fill:none;

    stroke:#e6d4b5;

    stroke-width:1.6;
}


.topbar-line{
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(211,161,91,.70),
            rgba(211,161,91,.27),
            transparent
        );
}



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

.page-content{
    min-height:0;

    display:flex;

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

    padding:
        clamp(10px,1.4vh,20px)
        clamp(22px,3vw,55px);
}


.screen{
    width:100%;
    height:100%;
}



/* =========================================================
   LOADING
   ========================================================= */

.loading-screen{
    display:flex;

    flex-direction:column;

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

    gap:13px;

    color:#879299;

    font-size:10px;
}


.loader{
    width:35px;
    height:35px;

    border:
        2px solid
        rgba(255,255,255,.10);

    border-top-color:
        var(--gold);

    border-radius:50%;

    animation:
        rotate .8s
        linear infinite;
}


@keyframes rotate{

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   PAGE 1
   ========================================================= */

.login-layout{
    width:100%;
    max-width:1380px;

    height:100%;

    margin:auto;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(
            450px,
            .90fr
        );

    align-items:center;

    gap:
        clamp(
            45px,
            7vw,
            115px
        );
}


/* LEFT */

.hero-copy{
    padding-left:
        clamp(
            0px,
            3.3vw,
            54px
        );

    transform:
        translateY(-1%);
}


.hero-kicker{
    margin-bottom:
        clamp(
            14px,
            2.2vh,
            23px
        );

    color:var(--gold);

    font-size:
        clamp(
            9px,
            .85vw,
            12px
        );

    font-weight:600;

    letter-spacing:.39em;
}


.hero-copy h1{
    margin:0;

    color:#f0ebe4;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            52px,
            5vw,
            78px
        );

    font-weight:400;

    line-height:.99;

    letter-spacing:-.035em;
}


.hero-copy p{
    max-width:580px;

    margin:
        clamp(
            16px,
            2.5vh,
            27px
        )
        0
        0;

    color:#cbc6bf;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            15px,
            1.45vw,
            20px
        );

    line-height:1.46;
}



/* CARD */

.login-card-wrap{
    position:relative;

    display:flex;

    justify-content:center;
    align-items:center;
}


.login-orbit{
    position:absolute;

    width:
        min(
            29vw,
            405px
        );

    height:
        min(
            29vw,
            405px
        );

    top:50%;
    right:-5%;

    transform:
        translateY(-54%);

    border:
        1px solid
        rgba(211,161,91,.52);

    border-radius:50%;
}


.login-card{
    position:relative;

    z-index:2;

    width:min(100%,540px);

    min-height:
        clamp(
            430px,
            60vh,
            520px
        );

    padding:
        clamp(
            31px,
            5vh,
            49px
        )
        clamp(
            30px,
            3.5vw,
            50px
        )
        clamp(
            24px,
            4vh,
            32px
        );

    border:
        1px solid
        rgba(221,172,100,.77);

    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            rgba(9,26,37,.96),
            rgba(4,14,21,.96)
        );

    box-shadow:
        0 33px 75px
        rgba(0,0,0,.34);
}


.card-kicker{
    margin-bottom:
        clamp(
            14px,
            2vh,
            20px
        );

    color:#e2b978;

    font-size:
        clamp(
            8px,
            .75vw,
            10px
        );

    font-weight:700;

    letter-spacing:.37em;
}


.login-card h2{
    margin:0;

    color:#f0ece6;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            35px,
            3.2vw,
            45px
        );

    font-weight:400;

    line-height:1.08;
}


.card-description{
    margin:
        clamp(
            11px,
            1.7vh,
            16px
        )
        0
        clamp(
            22px,
            3.5vh,
            31px
        );

    color:#abb3b8;

    font-size:
        clamp(
            11px,
            1vw,
            14px
        );
}


.login-card label{
    display:block;

    margin-bottom:8px;

    color:#a6afb5;

    font-size:
        clamp(
            7px,
            .65vw,
            9px
        );

    font-weight:700;

    letter-spacing:.28em;
}


/* PASSWORD */

.password-control{
    height:
        clamp(
            52px,
            7vh,
            63px
        );

    display:flex;

    align-items:center;

    border:
        1px solid
        rgba(189,201,208,.34);

    border-radius:6px;

    background:
        rgba(0,7,12,.20);

    transition:
        border-color .18s,
        box-shadow .18s;
}


.password-control:focus-within{
    border-color:
        rgba(231,188,120,.84);

    box-shadow:
        0 0 0 3px
        rgba(211,161,91,.07);
}


.password-icon{
    width:56px;

    flex:none;

    display:flex;

    align-items:center;
    justify-content:center;
}


.password-icon svg{
    width:19px;
    height:19px;

    fill:none;

    stroke:#dce0df;

    stroke-width:1.55;
}


.password-control input{
    width:100%;
    height:100%;

    border:0;
    outline:0;

    color:#fff;

    background:transparent;

    font-size:
        clamp(
            12px,
            1vw,
            14px
        );
}


.password-control input::placeholder{
    color:#66737c;
}


.password-toggle{
    width:55px;
    height:100%;

    flex:none;

    border:0;

    display:flex;

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

    color:#9ca7ad;

    background:transparent;
}


.password-toggle svg{
    width:20px;
    height:20px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.5;
}


/* BUTTON */

.unlock-button{
    width:100%;

    height:
        clamp(
            51px,
            7vh,
            60px
        );

    margin-top:
        clamp(
            15px,
            2.2vh,
            20px
        );

    padding:
        0
        22px;

    border:
        1px solid
        #f0cf8f;

    border-radius:5px;

    display:flex;

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

    gap:18px;

    color:#111619;

    background:
        linear-gradient(
            110deg,
            #ca9954,
            #efc779
        );

    font-size:
        clamp(
            9px,
            .8vw,
            11px
        );

    font-weight:800;

    letter-spacing:.21em;

    transition:
        filter .18s,
        transform .18s;
}


.unlock-button:hover{
    filter:brightness(1.05);

    transform:
        translateY(-1px);
}


.unlock-button:disabled{
    cursor:not-allowed;

    opacity:.55;

    transform:none;
}


.button-arrow{
    font-size:20px;
}


/* ERROR */

.error-box{
    display:none;

    margin-top:12px;

    padding:10px 12px;

    color:#ffadb5;

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

    border-left:
        2px solid
        var(--red);

    font-size:10px;
}


/* SECURITY NOTE */

.security-note{
    position:absolute;

    left:
        clamp(
            30px,
            3.5vw,
            50px
        );

    right:
        clamp(
            30px,
            3.5vw,
            50px
        );

    bottom:
        clamp(
            22px,
            3vh,
            30px
        );

    padding-top:
        clamp(
            15px,
            2.3vh,
            20px
        );

    display:flex;

    align-items:center;

    gap:13px;

    border-top:
        1px solid
        var(--border-soft);
}


.security-icon{
    width:
        clamp(
            37px,
            4vw,
            44px
        );

    height:
        clamp(
            37px,
            4vw,
            44px
        );

    flex:none;

    display:flex;

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

    border-radius:50%;

    background:
        rgba(43,216,135,.12);
}


.security-icon svg{
    width:22px;
    height:22px;

    fill:none;

    stroke:var(--green);

    stroke-width:1.7;

    stroke-linecap:round;
    stroke-linejoin:round;
}


.security-text strong{
    display:block;

    color:#e6e5df;

    font-size:
        clamp(
            9px,
            .85vw,
            11px
        );
}


.security-text span{
    display:block;

    margin-top:4px;

    color:#7f8990;

    font-size:
        clamp(
            7px,
            .7vw,
            9px
        );

    line-height:1.5;
}



/* =========================================================
   PAGE 2
   ========================================================= */

.dashboard-screen{
    display:flex;

    align-items:center;
}


.dashboard{
    width:100%;
    max-width:1360px;

    margin:auto;
}


.dashboard-header{
    margin-bottom:
        clamp(
            13px,
            2vh,
            21px
        );

    display:flex;

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

    gap:40px;
}


.dashboard-header h1{
    margin:0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            32px,
            3.3vw,
            45px
        );

    font-weight:400;
}


.dashboard-header p{
    margin:
        7px 0
        0;

    color:#a5afb4;

    font-size:
        clamp(
            9px,
            .85vw,
            11px
        );
}


.dashboard-actions{
    display:flex;

    align-items:center;

    gap:
        clamp(
            15px,
            2vw,
            25px
        );
}


.expiry-block{
    display:flex;

    align-items:center;

    gap:11px;
}


.expiry-block svg{
    width:22px;
    height:22px;

    fill:none;

    stroke:#dda94f;

    stroke-width:1.7;
}


.expiry-block span,
.expiry-block strong{
    display:block;
}


.expiry-block span{
    color:#929ca2;

    font-size:8px;
}


.expiry-block strong{
    margin-top:3px;

    color:#dfad54;

    font-size:10px;
}


.download-all{
    min-width:
        clamp(
            165px,
            15vw,
            215px
        );

    height:
        clamp(
            43px,
            6vh,
            51px
        );

    padding:
        0
        20px;

    display:flex;

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

    gap:10px;

    border:
        1px solid
        #f0cf8e;

    border-radius:5px;

    color:#121619;

    background:
        linear-gradient(
            110deg,
            #ca9954,
            #efc779
        );

    font-size:9px;

    font-weight:800;

    letter-spacing:.17em;
}


.download-all svg{
    width:19px;
    height:19px;

    fill:none;

    stroke:#14191b;

    stroke-width:1.7;
}


/* TABLE */

.file-table{
    overflow:hidden;

    border:
        1px solid
        rgba(211,161,91,.52);

    border-radius:8px;

    background:
        linear-gradient(
            145deg,
            rgba(7,24,35,.95),
            rgba(3,13,20,.96)
        );

    box-shadow:
        0 25px 60px
        rgba(0,0,0,.24);
}


.table-header,
.file-row{
    display:grid;

    grid-template-columns:
        minmax(0,2.7fr)
        .82fr
        .75fr
        .86fr;

    align-items:center;
}


.table-header{
    height:
        clamp(
            42px,
            6vh,
            49px
        );

    color:#ddd9d2;

    border-bottom:
        1px solid
        rgba(211,161,91,.40);

    font-size:
        clamp(
            8px,
            .75vw,
            10px
        );

    font-weight:700;
}


.table-header > div,
.file-cell{
    height:100%;

    display:flex;

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

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


.table-header > div:first-child{
    justify-content:flex-start;

    padding-left:
        clamp(
            17px,
            2vw,
            29px
        );
}


.table-header > div:last-child,
.file-cell:last-child{
    border-right:0;
}


.table-body{
    max-height:
        min(
            395px,
            calc(100dvh - 290px)
        );

    overflow-y:auto;
}


.table-body::-webkit-scrollbar{
    width:5px;
}


.table-body::-webkit-scrollbar-thumb{
    background:
        rgba(211,161,91,.33);

    border-radius:10px;
}


.file-row{
    min-height:
        clamp(
            48px,
            7vh,
            58px
        );

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


.file-row:last-child{
    border-bottom:0;
}


.file-row:hover{
    background:
        rgba(211,161,91,.045);
}


.file-cell{
    color:#cdd2d4;

    font-size:
        clamp(
            9px,
            .8vw,
            11px
        );
}


.file-cell-name{
    justify-content:flex-start;

    min-width:0;

    padding:
        7px
        15px
        7px
        clamp(
            17px,
            2vw,
            29px
        );

    gap:12px;

    color:#eeeae4;
}


.file-type-icon{
    width:31px;
    height:35px;

    flex:none;

    display:flex;

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

    border-radius:4px;

    color:#fff;

    font-size:7px;

    font-weight:800;
}


.file-type-icon.pdf{
    background:#e94449;
}


.file-type-icon.docx{
    background:#347bd6;
}


.file-type-icon.xlsx{
    background:#20a365;
}


.file-type-icon.ppt{
    background:#d76337;
}


.file-type-icon.other{
    background:#66727a;
}


.file-name-text{
    min-width:0;

    overflow-wrap:anywhere;
}


.file-download{
    min-width:
        clamp(
            80px,
            8vw,
            106px
        );

    height:
        clamp(
            29px,
            4.2vh,
            34px
        );

    display:inline-flex;

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

    border:
        1px solid
        rgba(213,162,83,.80);

    border-radius:5px;

    color:#e5b869;

    background:
        rgba(211,161,91,.025);

    text-decoration:none;

    font-size:8px;

    font-weight:800;

    letter-spacing:.15em;
}


.file-download::before{
    content:"↓";

    margin-right:7px;

    font-size:12px;
}


.file-download:hover{
    color:#111;

    background:
        linear-gradient(
            110deg,
            #ca9954,
            #efc779
        );
}


.table-footer{
    min-height:
        clamp(
            42px,
            6vh,
            49px
        );

    padding:
        0
        clamp(
            14px,
            1.7vw,
            20px
        );

    display:flex;

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

    color:#89949a;

    border-top:
        1px solid
        rgba(211,161,91,.25);

    font-size:9px;
}


.secure-footer{
    display:flex;

    align-items:center;

    gap:9px;
}


.green-dot{
    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 0 5px
        rgba(43,216,135,.08);
}



/* =========================================================
   UNAVAILABLE
   ========================================================= */

.unavailable-screen{
    display:flex;

    align-items:center;
    justify-content:center;
}


.unavailable-card{
    width:min(470px,100%);

    padding:45px;

    text-align:center;

    border:
        1px solid
        var(--border);

    border-radius:12px;

    background:var(--panel);
}


.unavailable-symbol{
    width:48px;
    height:48px;

    margin:
        0 auto
        20px;

    display:flex;

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

    border:
        1px solid
        rgba(211,161,91,.55);

    border-radius:50%;

    color:#dab06d;

    font-size:27px;
}


.unavailable-card h1{
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight:400;
}


.unavailable-card p{
    color:#9ca7ad;
}



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

.site-footer{
    width:calc(100% - 72px);
    max-width:var(--content-max);

    margin:auto;

    display:flex;

    align-items:center;

    color:#69747a;

    font-size:8px;
}



/* =========================================================
   LAPTOP / 17"
   ========================================================= */

@media
(max-height:850px)
and
(min-width:900px){

    .legal-books{
        transform:
            scale(.82);

        transform-origin:
            left bottom;

        opacity:.65;
    }


    .login-card{
        min-height:445px;
    }


    .hero-copy h1{
        font-size:
            clamp(
                50px,
                4.5vw,
                66px
            );
    }


    .security-note{
        bottom:20px;
    }

}



/* =========================================================
   LARGE 32"
   ========================================================= */

@media
(min-width:1900px){

    :root{
        --content-max:1720px;
    }


    .login-layout{
        max-width:1640px;

        grid-template-columns:
            1.05fr
            .95fr;
    }


    .login-card{
        width:600px;
    }


    .dashboard{
        max-width:1580px;
    }

}



/* =========================================================
   TABLET
   ========================================================= */

@media
(max-width:900px){

    .app-shell{
        grid-template-rows:
            70px
            1px
            1fr
            22px;
    }


    .topbar-inner{
        width:calc(100% - 30px);

        grid-template-columns:
            1fr
            1fr;
    }


    .product-name{
        display:none;
    }


    .secure-label{
        grid-column:2;
    }


    .login-layout{
        display:block;
    }


    .hero-copy{
        display:none;
    }


    .login-card-wrap{
        width:100%;
        height:100%;

        display:flex;

        align-items:center;
        justify-content:center;
    }


    .login-orbit{
        width:380px;
        height:380px;

        right:50%;

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


    .login-card{
        max-width:550px;
    }


    .legal-books,
    .left-lamp,
    .plant{
        opacity:.18;
    }


    .dashboard-header{
        align-items:flex-start;
    }


    .dashboard-actions{
        flex-direction:column;

        align-items:flex-end;

        gap:8px;
    }

}



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

@media
(max-width:620px){

    .app-shell{
        grid-template-rows:
            62px
            1px
            1fr
            20px;
    }


    .topbar-inner{
        width:calc(100% - 24px);
    }


    .brand-name{
        font-size:20px;

        letter-spacing:.30em;
    }


    .brand-sub{
        font-size:5.5px;
    }


    .secure-label{
        font-size:7px;
    }


    .secure-label svg{
        width:15px;
        height:15px;
    }


    .page-content{
        padding:
            8px
            12px;
    }


    .environment .legal-books,
    .environment .left-lamp,
    .environment .plant{
        display:none;
    }


    .warm-column{
        opacity:.20;
    }


    .login-orbit{
        display:none;
    }


    .login-card{
        width:100%;

        max-width:440px;

        min-height:
            min(
                440px,
                calc(100dvh - 105px)
            );

        padding:
            27px
            22px
            21px;
    }


    .login-card h2{
        font-size:
            clamp(
                32px,
                10vw,
                39px
            );
    }


    .card-description{
        font-size:11px;
    }


    .password-control{
        height:53px;
    }


    .unlock-button{
        height:52px;
    }


    .security-note{
        left:22px;
        right:22px;

        bottom:18px;
    }


    .security-text span{
        max-width:270px;

        font-size:7.5px;
    }


    .dashboard{
        height:100%;

        display:flex;

        flex-direction:column;

        justify-content:center;
    }


    .dashboard-header{
        margin-bottom:12px;

        align-items:flex-start;
    }


    .dashboard-header h1{
        font-size:28px;
    }


    .dashboard-header p{
        display:none;
    }


    .expiry-block{
        display:none;
    }


    .download-all{
        min-width:125px;

        height:38px;

        padding:
            0
            12px;

        font-size:7px;
    }


    .file-table{
        overflow-x:auto;
    }


    .table-header,
    .file-row{
        min-width:650px;
    }


    .table-body{
        max-height:
            calc(100dvh - 220px);
    }


    .site-footer{
        width:calc(100% - 24px);
    }

}