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

:root{
    --bg-dark:#020617;
    --bg-mid:#071426;
    --bg-glow:#6fa3a6;

    --panel-white:#f8f8f8;
    --panel-dark:#2f3946;

    --accent:#ff3b57;

    --text-dark:#111827;
    --text-light:#94a3b8;

    --border:#e5e7eb;
}

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

    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

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

body{
    position:relative;

    background:
    radial-gradient(
        circle at center,
        #0f7b80 0%,
        #075c63 24%,
        #033d56 48%,
        #011b46 72%,
        #00061f 100%
    );

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

    overflow:hidden;
}

/* =========================
   TOPBAR
========================= */

.topbar{
    position:absolute;

    top:24px;
    left:24px;
    right:24px;

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

    z-index:100;
}

.logo img{
    width:120px;
    height:auto;
}

.languages{
    display:flex;
    align-items:center;
    gap:22px;
}

.lang{
    border:none;
    background:none;

    color:white;

    opacity:0.75;

    font-size:13px;
    font-weight:700;

    cursor:pointer;

    transition:0.25s;
}

.lang:hover,
.lang.active{
    opacity:1;
}

/* =========================
   MAIN
========================= */

.main-wrapper{
    width:100%;
    height:100vh;

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

.transfer-wrapper{
    display:flex;
    gap:12px;

    align-items:stretch;
}

/* =========================
   PANELS
========================= */

.panel{
    height:500px;

    border-radius:16px;

    overflow:hidden;

    box-shadow:
    0 25px 50px rgba(0,0,0,0.35);
}

.left-panel{
    width:278px;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,0.96),
        rgba(245,245,245,0.92)
    );

    display:flex;
    flex-direction:column;

    padding:18px;
}

.right-panel{
    width:370px;

    background:rgba(250,250,250,0.97);

    display:flex;
    flex-direction:column;

    position:relative;
}

/* =========================
   LEFT PANEL
========================= */

.panel-top{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:16px;
}

.file-count{
    color:#111;

    font-size:16px;
    font-weight:700;
}

.add-btn{
    width:30px;
    height:30px;

    border:none;
    border-radius:50%;

    background:var(--accent);

    color:white;

    font-size:12px;

    cursor:pointer;

    transition:0.25s;
}

.add-btn:hover{
    transform:scale(1.05);
}

.drop-area{
    flex:1;

    border:2px dashed rgba(0,0,0,0.08);

    border-radius:14px;

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

    transition:0.25s;
}

.drop-inner{
    text-align:center;
}

.drop-inner i{
    font-size:54px;

    color:#d7d7d7;

    margin-bottom:20px;
}

.drop-inner h2{
    color:#222;

    font-size:18px;
    font-weight:700;

    margin-bottom:10px;
}

.drop-inner p{
    color:#777;

    font-size:13px;
}

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

.tab-header{
    position:relative;

    height:58px;

    display:flex;

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

.tab-btn{
    flex:1;

    border:none;
    background:none;

    font-size:14px;
    font-weight:700;

    color:#8a8a8a;

    cursor:pointer;

    position:relative;
    z-index:5;

    transition:0.25s;
}

.tab-btn.active{
    color:#111;
}

.tab-slider{
    position:absolute;

    bottom:0;
    left:0;

    width:50%;
    height:2px;

    background:#111;

    transition:0.35s ease;
}

body[data-mode="email"] .tab-slider{
    transform:translateX(0%);
}

body[data-mode="link"] .tab-slider{
    transform:translateX(100%);
}

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

.settings-viewport{
    flex:1;

    overflow:hidden;

    position:relative;
}

.slide-wrapper{
    width:200%;
    height:100%;

    display:flex;

    transition:0.45s ease;
}

body[data-mode="email"] .slide-wrapper{
    transform:translateX(0%);
}

body[data-mode="link"] .slide-wrapper{
    transform:translateX(-50%);
}

.pane{
    width:50%;

    padding:
    26px
    22px
    18px
    22px;

    display:flex;
    flex-direction:column;
}

/* =========================
   INPUTS
========================= */

.input-group{
    margin-bottom:28px;
}

.input-group input{
    width:100%;

    border:none;
    border-bottom:1px solid #ececec;

    background:transparent;

    padding:0 0 10px 0;

    font-size:14px;
    font-weight:500;

    color:#111;

    outline:none;
}

.input-group input::placeholder{
    color:#b3b3b3;
}

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

.panel-footer{
    height:62px;

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

    padding:0 22px;

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

.secure-text{
    color:#8f96a3;

    font-size:11px;
    font-weight:700;

    display:flex;
    align-items:center;
    gap:8px;
}

.action-btn{
    border:none;

    background:var(--accent);

    color:white;

    height:28px;

    padding:0 18px;

    border-radius:6px;

    font-size:12px;
    font-weight:700;

    cursor:pointer;

    transition:0.25s;
}

.action-btn:hover{
    background:#ff2345;
}

/* =========================
   EMPLOYEE TAB
========================= */

.employee-tab{
    position:absolute;

    right:-215px;
    bottom:70px;

    width:290px;
    height:130px;

    background:
    rgba(255,255,255,0.08);

    backdrop-filter:blur(8px);

    border-radius:20px 0 0 20px;

    padding:24px;

    transition:0.45s;

    display:flex;
    flex-direction:column;
    justify-content:center;

    color:white;
}

.employee-tab:hover{
    right:0;
}

.employee-small{
    font-size:12px;

    opacity:0.7;

    margin-bottom:8px;
}

.employee-name{
    font-size:42px;
    font-weight:700;

    margin-bottom:4px;
}

.employee-role{
    opacity:0.75;
}

/* =========================
   MARQUEE
========================= */

.bottom-marquee{
    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:42px;

    overflow:hidden;

    background:
    rgba(0,0,0,0.16);

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

    display:flex;
    align-items:center;
}

.marquee-track{
    display:flex;
    gap:80px;

    white-space:nowrap;

    animation:marquee 28s linear infinite;
}

.marquee-track span{
    color:white;

    opacity:0.70;

    font-size:12px;
    letter-spacing:2px;
}

@keyframes marquee{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}

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

@media(max-width:980px){

    body{
        overflow:auto;
    }

    .main-wrapper{
        padding:120px 0;
        height:auto;
    }

    .transfer-wrapper{
        flex-direction:column;
    }

    .left-panel,
    .right-panel{
        width:92vw;
        max-width:370px;
    }

    .employee-tab{
        display:none;
    }
}