/* =========================================================
   LENOVO CLOUD FINAL
   WIDE DESKTOP + FIXED MOBILE NAV
   ========================================================= */


/* =========================
   SZÍNEK ÉS MÉRETEK
   ========================= */

:root {
    --lc-bg: #06111d;
    --lc-bg2: #091827;

    --lc-panel: rgba(14, 33, 51, .94);
    --lc-panel2: rgba(18, 43, 66, .96);

    --lc-border: rgba(255,255,255,.075);

    --lc-blue: #1da1f2;
    --lc-blue2: #087bd7;

    --lc-text: #f5f9fc;
    --lc-muted: #8fa8bb;

    --lc-green: #35df87;

    --lc-radius: 18px;

    --lc-shadow:
        0 15px 45px rgba(0,0,0,.25);

    --lc-wide-width:
        min(94vw, 1750px);
}


/* =========================
   OLDAL
   ========================= */

html,
body {
    width: 100% !important;
    max-width: none !important;

    min-height: 100%;

    margin: 0 !important;

    background:
        radial-gradient(
            circle at 80% -10%,
            rgba(26,145,230,.20),
            transparent 34%
        ),
        radial-gradient(
            circle at 0 40%,
            rgba(29,161,242,.07),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #05101b,
            #091827 55%,
            #06111d
        ) !important;

    color:
        var(--lc-text) !important;
}


body {
    padding-bottom:
        20px;
}


/* =========================
   HFS KÜLSŐ TERÜLET
   ========================= */

#root {
    width:
        100% !important;

    max-width:
        none !important;
}


#root > div {
    max-width:
        none !important;
}


/* =========================
   SCROLLBAR
   ========================= */

::-webkit-scrollbar {
    width:
        9px;

    height:
        9px;
}


::-webkit-scrollbar-track {
    background:
        #07131f;
}


::-webkit-scrollbar-thumb {
    background:
        #29465e;

    border-radius:
        20px;
}


::-webkit-scrollbar-thumb:hover {
    background:
        #3a6585;
}


/* =========================================================
   LENOVO CLOUD FŐ TERÜLET

   FONTOS:
   NINCS TRANSFORM.
   ÍGY A MOBIL FIXED NAV VALÓBAN A KÉPERNYŐHÖZ RÖGZÜL.
   ========================================================= */

#lenovo-cloud-app {
    width:
        var(--lc-wide-width) !important;

    max-width:
        none !important;

    box-sizing:
        border-box;

    margin-top:
        18px !important;

    margin-right:
        0 !important;

    margin-bottom:
        0 !important;

    margin-left:
        calc(
            (100% - var(--lc-wide-width)) / 2
        ) !important;

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


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

.lc-topbar {
    position:
        relative;

    z-index:
        20;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    width:
        100%;

    box-sizing:
        border-box;

    padding:
        12px 15px;

    margin-bottom:
        14px;

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

    border-radius:
        18px;

    background:
        rgba(7, 22, 35, .84);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 12px 35px rgba(0,0,0,.18);
}


.lc-brand {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    color:
        white !important;

    text-decoration:
        none !important;
}


.lc-brand-logo {
    width:
        43px;

    height:
        43px;

    flex:
        0 0 43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    font-size:
        23px;

    background:
        linear-gradient(
            145deg,
            #34b4ff,
            #0878d3
        );

    box-shadow:
        0 8px 24px rgba(29,161,242,.30);
}


.lc-brand-text {
    display:
        flex;

    flex-direction:
        column;
}


.lc-brand-text strong {
    color:
        white;

    font-size:
        15px;

    letter-spacing:
        .6px;
}


.lc-brand-text small {
    margin-top:
        2px;

    color:
        var(--lc-muted);

    font-size:
        10px;
}


/* =========================
   TOPBAR MŰVELETEK
   ========================= */

.lc-top-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.lc-top-btn {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    min-height:
        36px;

    padding:
        0 12px;

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

    border-radius:
        11px;

    color:
        #dcecf7;

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

    cursor:
        pointer;

    transition:
        .18s ease;
}


.lc-top-btn:hover {
    background:
        rgba(29,161,242,.12);

    border-color:
        rgba(29,161,242,.3);
}


.lc-upload-top {
    background:
        rgba(29,161,242,.12);
}


.lc-status {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        7px 10px;

    border-radius:
        99px;

    background:
        rgba(53,223,135,.08);

    color:
        #79e9ad;

    font-size:
        11px;
}


.lc-online-dot {
    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--lc-green);

    box-shadow:
        0 0 10px rgba(53,223,135,.75);
}


.lc-online-dot.offline {
    background:
        #ff6577;

    box-shadow:
        0 0 10px rgba(255,101,119,.6);
}


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

.lc-hero {
    position:
        relative;

    overflow:
        hidden;

    width:
        100%;

    box-sizing:
        border-box;

    min-height:
        300px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        24px;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(58,180,255,.30),
            transparent 42%
        ),
        linear-gradient(
            140deg,
            #103955,
            #0b2439 48%,
            #071724
        );

    box-shadow:
        var(--lc-shadow);
}


.lc-hero-glow {
    position:
        absolute;

    width:
        500px;

    height:
        500px;

    right:
        -200px;

    top:
        -300px;

    border-radius:
        50%;

    background:
        rgba(29,161,242,.18);

    filter:
        blur(65px);
}


.lc-hero-content {
    position:
        relative;

    z-index:
        2;

    max-width:
        750px;

    padding:
        40px 20px;

    text-align:
        center;
}


.lc-cloud-big {
    width:
        68px;

    height:
        68px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 14px;

    border-radius:
        20px;

    font-size:
        35px;

    background:
        linear-gradient(
            145deg,
            #42b9ff,
            #087bd7
        );

    box-shadow:
        0 12px 32px rgba(21,150,238,.35);
}


.lc-hero h1 {
    margin:
        0;

    padding:
        0;

    color:
        white;

    font-size:
        clamp(31px, 5vw, 46px);

    letter-spacing:
        -1px;
}


.lc-hero p {
    margin:
        8px 0 20px;

    color:
        #adc8da;

    font-size:
        14px;
}


.lc-hero-buttons {
    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        9px;
}


/* =========================
   GOMBOK
   ========================= */

.lc-primary-btn,
.lc-secondary-btn {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        43px;

    padding:
        0 17px;

    border-radius:
        12px;

    text-decoration:
        none !important;

    font-size:
        13px;

    font-weight:
        650;

    cursor:
        pointer;

    transition:
        .18s ease;
}


.lc-primary-btn {
    color:
        white !important;

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

    background:
        linear-gradient(
            145deg,
            #25a9fa,
            #087bd7
        );

    box-shadow:
        0 8px 22px rgba(29,161,242,.22);
}


.lc-secondary-btn {
    color:
        #dcecf7 !important;

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

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


.lc-primary-btn:hover,
.lc-secondary-btn:hover {
    transform:
        translateY(-2px);
}


/* =========================
   SZEKCIÓ
   ========================= */

.lc-section-head {
    margin:
        30px 3px 13px;
}


.lc-section-label {
    color:
        #6d8ba1;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.3px;
}


.lc-section-head h2,
.lc-files-heading h2,
.lc-folder-head h2 {
    margin:
        3px 0 0;

    padding:
        0;

    color:
        white;

    font-size:
        21px;
}


/* =========================
   GYORS KÁRTYÁK
   ========================= */

.lc-shortcut-grid {
    display:
        grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap:
        14px;

    width:
        100%;
}


.lc-shortcut-card {
    appearance:
        none;

    min-width:
        0;

    min-height:
        135px;

    padding:
        17px 12px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    color:
        #eef7fd !important;

    text-decoration:
        none !important;

    text-align:
        center;

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

    border-radius:
        17px;

    background:
        linear-gradient(
            145deg,
            rgba(18,42,64,.94),
            rgba(10,28,44,.95)
        );

    cursor:
        pointer;

    box-shadow:
        0 8px 22px rgba(0,0,0,.10);

    transition:
        .18s ease;
}


.lc-shortcut-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(61,181,255,.3);

    background:
        linear-gradient(
            145deg,
            rgba(23,51,77,.97),
            rgba(13,35,54,.97)
        );

    box-shadow:
        0 14px 32px rgba(0,0,0,.19);
}


.lc-shortcut-card strong {
    margin-top:
        3px;

    font-size:
        12px;
}


.lc-shortcut-card small {
    color:
        #7995aa;

    font-size:
        9px;
}


.lc-shortcut-icon {
    width:
        44px;

    height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    font-size:
        23px;
}


.lc-shortcut-icon.blue {
    background:
        rgba(29,161,242,.13);
}


.lc-shortcut-icon.cyan {
    background:
        rgba(39,200,220,.12);
}


.lc-shortcut-icon.violet {
    background:
        rgba(154,100,255,.12);
}


.lc-shortcut-icon.green {
    background:
        rgba(53,223,135,.11);
}


.lc-shortcut-icon.orange {
    background:
        rgba(255,166,63,.11);
}


.lc-shortcut-icon.grey {
    background:
        rgba(190,205,217,.09);
}


/* =========================
   ALMAPPA FEJLÉC
   ========================= */

.lc-folder-head {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    width:
        100%;

    box-sizing:
        border-box;

    padding:
        17px 18px;

    margin-bottom:
        16px;

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

    border-radius:
        17px;

    background:
        rgba(12,31,48,.78);
}


.lc-current-path {
    margin-top:
        4px;

    color:
        var(--lc-muted);

    font-size:
        11px;

    word-break:
        break-word;
}


/* =========================
   FÁJL FEJLÉC
   ========================= */

.lc-files-heading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin:
        31px 3px 8px;
}


/* =========================
   KEZDŐLAP / ALMAPPA
   ========================= */

.lc-subpage-only {
    display:
        none;
}


body.lc-subpage .lc-home-only {
    display:
        none !important;
}


body.lc-subpage .lc-subpage-only {
    display:
        flex;
}


body.lc-subpage .lc-files-heading {
    display:
        none;
}


/* =========================================================
   HFS TERÜLETEK SZÉLESÍTÉSE
   TRANSFORM NÉLKÜL
   ========================================================= */

.menu-bar,
.breadcrumbs,
.folder-stats,
.filter-bar,
.file-list,
.list {
    width:
        var(--lc-wide-width) !important;

    max-width:
        none !important;

    box-sizing:
        border-box !important;

    margin-right:
        0 !important;

    margin-left:
        calc(
            (100% - var(--lc-wide-width)) / 2
        ) !important;
}


/* =========================
   HFS MENÜSOR
   ========================= */

.menu-bar {
    margin-top:
        12px !important;

    margin-bottom:
        12px !important;

    border-radius:
        14px !important;
}


/* =========================
   BREADCRUMB
   ========================= */

.breadcrumbs {
    margin-top:
        10px !important;

    margin-bottom:
        10px !important;

    padding:
        10px 13px !important;

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

    border-radius:
        13px;

    background:
        rgba(10,29,45,.74);
}


.breadcrumbs a {
    color:
        #64c0f9 !important;

    text-decoration:
        none !important;
}


/* =========================
   MAPPA STATISZTIKA
   ========================= */

.folder-stats {
    margin-top:
        6px !important;

    margin-bottom:
        6px !important;

    color:
        #7894a8 !important;
}


/* =========================
   KERESŐ
   ========================= */

.filter-bar {
    margin-top:
        10px !important;

    margin-bottom:
        10px !important;
}


.filter-bar input {
    width:
        100%;

    box-sizing:
        border-box;

    min-height:
        40px;

    padding:
        0 12px !important;

    color:
        white !important;

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

    border-radius:
        12px !important;

    outline:
        none !important;

    background:
        rgba(10,29,45,.93) !important;
}


.filter-bar input:focus {
    border-color:
        rgba(29,161,242,.55) !important;

    box-shadow:
        0 0 0 3px rgba(29,161,242,.09);
}


/* =========================
   HFS FÁJLLISTA
   ========================= */

.file-list,
.list {
    padding-left:
        0 !important;

    padding-right:
        0 !important;
}


/* =========================
   HFS FÁJL / MAPPA
   ========================= */

.entry {
    position:
        relative;

    width:
        100%;

    min-height:
        64px;

    box-sizing:
        border-box;

    margin:
        7px 0 !important;

    padding:
        10px 14px !important;

    border:
        1px solid rgba(255,255,255,.065) !important;

    border-radius:
        15px !important;

    background:
        linear-gradient(
            145deg,
            rgba(16,38,58,.94),
            rgba(9,27,42,.95)
        ) !important;

    box-shadow:
        0 6px 19px rgba(0,0,0,.11);

    transition:
        .17s ease;
}


.entry:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(48,174,250,.28) !important;

    background:
        linear-gradient(
            145deg,
            rgba(21,48,73,.97),
            rgba(12,34,52,.97)
        ) !important;

    box-shadow:
        0 11px 27px rgba(0,0,0,.18);
}


.entry-name {
    color:
        #f3f9fd !important;

    font-size:
        13px !important;

    font-weight:
        600 !important;

    text-decoration:
        none !important;
}


.entry-name:hover {
    color:
        #62c5ff !important;
}


.entry-details {
    color:
        #859fb2 !important;

    font-size:
        10px !important;
}


.entry-details * {
    color:
        inherit;
}


.entry-icon {
    border-radius:
        11px;

    background:
        rgba(29,161,242,.07);

    padding:
        4px;
}


.entry button,
.file-menu-button {
    border:
        1px solid rgba(255,255,255,.055) !important;

    border-radius:
        10px !important;

    background:
        rgba(255,255,255,.035) !important;
}


.entry button:hover,
.file-menu-button:hover {
    background:
        rgba(29,161,242,.11) !important;
}


input[type="checkbox"] {
    accent-color:
        var(--lc-blue);
}


/* =========================
   ÁLTALÁNOS HFS FORM
   ========================= */

input,
select,
textarea {
    border-radius:
        11px !important;
}


button {
    font-family:
        inherit;

    transition:
        transform .15s ease,
        opacity .15s ease;
}


button:active {
    transform:
        scale(.97);
}


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

.dialog-login {
    border-radius:
        20px !important;
}


.dialog-login form {
    padding-top:
        8px;
}


.dialog-login form::before {
    content:
        "☁  LENOVO CLOUD";

    display:
        block;

    margin:
        0 0 18px;

    padding:
        17px;

    color:
        white;

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

    border-radius:
        15px;

    background:
        linear-gradient(
            145deg,
            rgba(20,74,108,.75),
            rgba(10,34,52,.85)
        );

    font-size:
        18px;

    font-weight:
        700;

    letter-spacing:
        .5px;

    text-align:
        center;
}


/* =========================
   FELTÖLTÉS PANEL
   ========================= */

.lc-upload-panel {
    position:
        fixed !important;

    z-index:
        100000;

    right:
        20px;

    bottom:
        20px;

    width:
        min(340px, calc(100vw - 40px));

    box-sizing:
        border-box;

    padding:
        14px;

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

    border-radius:
        16px;

    background:
        rgba(7,24,38,.96);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    box-shadow:
        0 20px 60px rgba(0,0,0,.4);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(15px);

    transition:
        .22s ease;
}


.lc-upload-panel.show {
    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);
}


.lc-upload-info {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.lc-upload-info > span {
    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        rgba(29,161,242,.12);
}


.lc-upload-info div {
    display:
        flex;

    min-width:
        0;

    flex-direction:
        column;
}


.lc-upload-info strong {
    color:
        white;

    font-size:
        12px;
}


.lc-upload-info small {
    margin-top:
        2px;

    overflow:
        hidden;

    color:
        #90aabc;

    font-size:
        10px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.lc-progress-track {
    width:
        100%;

    height:
        5px;

    margin-top:
        11px;

    overflow:
        hidden;

    border-radius:
        99px;

    background:
        rgba(255,255,255,.07);
}


.lc-progress-bar {
    width:
        0%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            #159ff4,
            #63c8ff
        );

    transition:
        width .15s linear;
}


/* =========================
   MOBIL NAV
   ========================= */

.lc-mobile-nav {
    display:
        none;
}


/* =========================================================
   NAGY PC
   ========================================================= */

@media (min-width: 1400px) {

    .lc-shortcut-grid {
        gap:
            16px;
    }


    .lc-shortcut-card {
        min-height:
            145px;
    }


    .lc-hero {
        min-height:
            320px;
    }

}


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

@media (max-width: 950px) {

    .lc-shortcut-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width: 650px) {

    :root {
        --lc-wide-width:
            calc(100vw - 18px);
    }


    body {
        padding-bottom:
            calc(
                95px + env(safe-area-inset-bottom)
            );
    }


    #lenovo-cloud-app {
        width:
            var(--lc-wide-width) !important;

        max-width:
            none !important;

        margin-top:
            9px !important;

        margin-left:
            calc(
                (100% - var(--lc-wide-width)) / 2
            ) !important;
    }


    .lc-topbar {
        padding:
            9px 10px;

        border-radius:
            15px;
    }


    .lc-brand-logo {
        width:
            38px;

        height:
            38px;

        flex-basis:
            38px;

        border-radius:
            11px;

        font-size:
            20px;
    }


    .lc-brand-text strong {
        font-size:
            13px;
    }


    .lc-brand-text small {
        display:
            none;
    }


    .lc-top-btn span {
        display:
            none;
    }


    .lc-top-btn {
        width:
            36px;

        min-height:
            36px;

        padding:
            0;
    }


    .lc-status {
        padding:
            6px 8px;

        font-size:
            9px;
    }


    .lc-hero {
        min-height:
            218px;

        border-radius:
            19px;
    }


    .lc-hero-content {
        padding:
            27px 14px;
    }


    .lc-cloud-big {
        width:
            57px;

        height:
            57px;

        border-radius:
            17px;

        font-size:
            29px;
    }


    .lc-hero h1 {
        font-size:
            30px;
    }


    .lc-hero p {
        font-size:
            11px;
    }


    .lc-primary-btn,
    .lc-secondary-btn {
        min-height:
            40px;

        padding:
            0 13px;

        font-size:
            11px;
    }


    .lc-shortcut-grid {
        grid-template-columns:
            repeat(3, 1fr);

        gap:
            7px;
    }


    .lc-shortcut-card {
        min-height:
            101px;

        padding:
            10px 5px;

        border-radius:
            14px;
    }


    .lc-shortcut-icon {
        width:
            36px;

        height:
            36px;

        border-radius:
            11px;

        font-size:
            20px;
    }


    .lc-shortcut-card strong {
        font-size:
            10px;
    }


    .lc-shortcut-card small {
        display:
            none;
    }


    .lc-folder-head {
        padding:
            13px;

        border-radius:
            14px;
    }


    .lc-folder-upload {
        display:
            none;
    }


    .menu-bar,
    .breadcrumbs,
    .folder-stats,
    .filter-bar,
    .file-list,
    .list {
        width:
            var(--lc-wide-width) !important;

        max-width:
            none !important;

        margin-left:
            calc(
                (100% - var(--lc-wide-width)) / 2
            ) !important;
    }


    .entry {
        min-height:
            64px;

        margin:
            6px 0 !important;

        padding:
            9px !important;

        border-radius:
            13px !important;
    }


    .entry-name {
        font-size:
            12px !important;
    }


    .entry-details {
        font-size:
            9px !important;
    }


    /* =========================
       FELTÖLTÉSI PANEL MOBILON
       ========================= */

    .lc-upload-panel {
        position:
            fixed !important;

        left:
            10px !important;

        right:
            10px !important;

        bottom:
            calc(
                88px + env(safe-area-inset-bottom)
            ) !important;

        width:
            auto !important;
    }


    /* =====================================================
       ALSÓ NAVIGÁCIÓ
       VALÓBAN A KÉPERNYŐ ALJÁHOZ RÖGZÍTVE
       ===================================================== */

    .lc-mobile-nav {
        position:
            fixed !important;

        z-index:
            999999 !important;

        left:
            8px !important;

        right:
            8px !important;

        top:
            auto !important;

        bottom:
            max(
                8px,
                env(safe-area-inset-bottom)
            ) !important;

        width:
            auto !important;

        height:
            67px !important;

        margin:
            0 !important;

        transform:
            none !important;

        display:
            grid !important;

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

        align-items:
            center;

        padding:
            0 6px;

        box-sizing:
            border-box;

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

        border-radius:
            20px;

        background:
            rgba(6,22,35,.95);

        backdrop-filter:
            blur(25px);

        -webkit-backdrop-filter:
            blur(25px);

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


    .lc-mobile-item {
        height:
            100%;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            2px;

        color:
            #8ca8bb !important;

        text-decoration:
            none !important;
    }


    .lc-mobile-icon {
        font-size:
            18px;
    }


    .lc-mobile-item small {
        font-size:
            8px;
    }


    .lc-mobile-upload {
        position:
            relative;

        top:
            -10px;

        width:
            52px;

        height:
            52px;

        justify-self:
            center;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        padding:
            0;

        margin:
            0;

        color:
            white;

        border:
            4px solid #071725;

        border-radius:
            50%;

        background:
            linear-gradient(
                145deg,
                #32b4ff,
                #087bd7
            );

        box-shadow:
            0 8px 25px rgba(29,161,242,.4);

        cursor:
            pointer;
    }


    .lc-mobile-upload span {
        position:
            relative;

        top:
            -1px;

        font-size:
            30px;

        font-weight:
            300;
    }

}


/* =========================================================
   KICSI TELEFON
   ========================================================= */

@media (max-width: 370px) {

    .lc-shortcut-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .lc-status {
        display:
            none;
    }

}

/* ===== Lenovo Cloud v0.2.1 enhancements ===== */
/* =========================================================
   LENOVO CLOUD v0.2 ENHANCEMENTS
   SAFE AREA + PWA + DASHBOARD + POPOVERS
   ========================================================= */

html,
body,
#root {
    background-color: #06111d !important;
}

html {
    min-height: 100%;
}

body {
    min-height: 100dvh;
}

/* =========================
   HÁLÓZATI STÁTUSZ POPOVER
   ========================= */

.lc-status-shell {
    position: relative;
    display: flex;
    align-items: center;
}

.lc-status {
    cursor: pointer;
    user-select: none;
    outline: none;
}

.lc-status:focus-visible {
    box-shadow: 0 0 0 3px rgba(29,161,242,.18);
}

.lc-network-popover {
    position: absolute;
    z-index: 100001;
    top: calc(100% + 12px);
    right: 0;
    width: min(390px, calc(100vw - 24px));
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    background: rgba(5,19,31,.985);
    box-shadow: 0 24px 70px rgba(0,0,0,.48);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-5px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

@media (hover: hover) {
    .lc-status-shell:hover .lc-network-popover {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
}

.lc-status-shell.open .lc-network-popover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.lc-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.lc-popover-head > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lc-popover-head strong {
    color: #f6fbff;
    font-size: 15px;
}

.lc-net-badge {
    padding: 6px 9px;
    border-radius: 99px;
    color: #7cf1b4;
    background: rgba(53,223,135,.10);
    font-size: 10px;
    font-weight: 700;
}

.lc-net-badge.offline {
    color: #ff9b9b;
    background: rgba(255,99,99,.11);
}

.lc-net-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
}

.lc-net-grid > div {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 12px;
    background: rgba(255,255,255,.026);
}

.lc-net-grid small,
.lc-net-traffic small {
    display: block;
    color: #7895aa;
    font-size: 9px;
}

.lc-net-grid strong {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #e9f6ff;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lc-net-traffic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.lc-net-traffic > div {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    padding: 10px 11px;
    border: 1px solid rgba(29,161,242,.10);
    border-radius: 12px;
    background: rgba(29,161,242,.045);
}

.lc-net-traffic > div > span {
    grid-row: 1 / 3;
    align-self: center;
    color: #5fc5ff;
    font-size: 18px;
}

.lc-net-traffic strong {
    margin-top: 2px;
    color: white;
    font-size: 11px;
}

.lc-net-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.05);
    color: #617f94;
    font-size: 9px;
}

/* =========================
   TÁRHELY CSÍK
   ========================= */

.lc-storage-strip {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 16px;
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(12,32,50,.82), rgba(8,24,38,.82));
}

.lc-storage-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #73ccff;
    background: rgba(29,161,242,.10);
    font-size: 21px;
}

.lc-storage-copy {
    min-width: 0;
    flex: 1;
}

.lc-storage-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #eef8ff;
    font-size: 11px;
}

.lc-storage-line span {
    color: #8fa8bb;
    white-space: nowrap;
}

.lc-storage-track {
    width: 100%;
    height: 5px;
    margin: 8px 0 6px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255,255,255,.065);
}

.lc-storage-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #159ff4, #5ec7ff);
    transition: width .35s ease;
}

.lc-storage-copy > small {
    color: #6f8ca0;
    font-size: 9px;
}

/* =========================
   KEDVENCEK + LEGUTÓBBIAK
   ========================= */

.lc-personal-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
    margin-top: 17px;
}

.lc-personal-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 18px;
    background: rgba(10,29,45,.76);
}

.lc-personal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
}

.lc-personal-head h3 {
    margin: 2px 0 0;
    color: white;
    font-size: 16px;
}

.lc-personal-head > span {
    color: #60c3fb;
    font-size: 21px;
}

.lc-mini-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lc-mini-file {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 49px;
    padding: 7px 9px;
    border: 1px solid rgba(255,255,255,.045);
    border-radius: 12px;
    color: white !important;
    background: rgba(255,255,255,.022);
    text-decoration: none !important;
    transition: .16s ease;
}

.lc-mini-file:hover {
    border-color: rgba(29,161,242,.20);
    background: rgba(29,161,242,.055);
}

.lc-mini-file-icon {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(29,161,242,.075);
    font-size: 16px;
}

.lc-mini-file-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.lc-mini-file-text strong,
.lc-mini-file-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lc-mini-file-text strong {
    color: #eff9ff;
    font-size: 10px;
}

.lc-mini-file-text small {
    margin-top: 2px;
    color: #67869c;
    font-size: 8px;
}

.lc-mini-file-arrow {
    color: #5b7b91;
    font-size: 20px;
}

.lc-mini-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px;
    border: 1px dashed rgba(255,255,255,.07);
    border-radius: 12px;
    color: #7896aa;
}

.lc-mini-empty > span {
    width: 34px;
    flex: 0 0 34px;
    text-align: center;
    color: #5fbff6;
    font-size: 22px;
}

.lc-mini-empty > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.lc-mini-empty strong {
    color: #bcd0dd;
    font-size: 10px;
}

.lc-mini-empty small {
    margin-top: 2px;
    color: #68869a;
    font-size: 8px;
    line-height: 1.35;
}

/* =========================
   OFFLINE ÁLLAPOT
   ========================= */

.lc-offline-banner {
    position: fixed;
    z-index: 1000002;
    top: max(8px, env(safe-area-inset-top));
    left: 50%;
    width: min(600px, calc(100vw - 20px));
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 7px;
    padding: 10px 13px;
    border: 1px solid rgba(255,115,115,.18);
    border-radius: 14px;
    color: #ffb0b0;
    background: rgba(47,13,19,.96);
    box-shadow: 0 18px 55px rgba(0,0,0,.4);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -12px);
    transition: .2s ease;
}

.lc-offline-banner.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.lc-offline-banner > span {
    color: #ff6969;
    font-size: 10px;
}

.lc-offline-banner strong {
    font-size: 10px;
}

.lc-offline-banner small {
    color: #ca8992;
    font-size: 9px;
}

/* =========================
   DRAG & DROP
   ========================= */

.lc-drop-overlay {
    position: fixed;
    z-index: 1000003;
    inset: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(78,193,255,.48);
    border-radius: 24px;
    background: rgba(3,16,27,.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: .16s ease;
}

.lc-drop-overlay.show {
    opacity: 1;
    visibility: visible;
}

.lc-drop-overlay > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.lc-drop-overlay span {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
    border-radius: 22px;
    color: white;
    background: linear-gradient(145deg,#32b4ff,#087bd7);
    box-shadow: 0 18px 45px rgba(29,161,242,.28);
    font-size: 31px;
}

.lc-drop-overlay strong {
    color: white;
    font-size: 22px;
}

.lc-drop-overlay small {
    margin-top: 5px;
    color: #8ca8bb;
    font-size: 11px;
}

/* =========================
   TOAST
   ========================= */

.lc-toast-host {
    position: fixed;
    z-index: 1000005;
    top: calc(14px + env(safe-area-inset-top));
    right: 14px;
    width: min(350px, calc(100vw - 28px));
    display: flex;
    flex-direction: column;
    gap: 7px;
    pointer-events: none;
}

.lc-toast {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 13px;
    color: #eaf7ff;
    background: rgba(7,24,38,.97);
    box-shadow: 0 18px 45px rgba(0,0,0,.34);
    opacity: 0;
    transform: translateY(-7px);
    transition: .2s ease;
    font-size: 10px;
}

.lc-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.lc-toast-mark {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #6bc9ff;
    background: rgba(29,161,242,.10);
    font-weight: 800;
}

.lc-toast-success .lc-toast-mark {
    color: #7cf1b4;
    background: rgba(53,223,135,.10);
}

.lc-toast-error .lc-toast-mark {
    color: #ff9a9a;
    background: rgba(255,90,90,.10);
}

/* =========================
   MOBIL + GYORSMENÜ
   ========================= */

.lc-quick-add {
    position: fixed;
    z-index: 1000001;
    left: 50%;
    bottom: calc(86px + env(safe-area-inset-bottom));
    width: min(330px, calc(100vw - 24px));
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    background: rgba(5,20,32,.985);
    box-shadow: 0 22px 60px rgba(0,0,0,.48);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: .17s ease;
}

.lc-quick-add.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.lc-quick-add button {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 9px;
    border: 0;
    border-radius: 12px;
    color: white;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.lc-quick-add button:hover {
    background: rgba(29,161,242,.07);
}

.lc-quick-add button > span {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(29,161,242,.08);
    font-size: 18px;
}

.lc-quick-add button > div {
    display: flex;
    flex-direction: column;
}

.lc-quick-add strong {
    font-size: 10px;
}

.lc-quick-add small {
    margin-top: 2px;
    color: #7896aa;
    font-size: 8px;
}

/* =========================
   REJTETT ELEMEK MODAL
   ========================= */

.lc-modal-backdrop {
    position: fixed;
    z-index: 1000006;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
    box-sizing: border-box;
    background: rgba(0,8,14,.70);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: .18s ease;
}

.lc-modal-backdrop.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.lc-modal-card {
    width: min(620px, 100%);
    max-height: min(74vh, 720px);
    overflow: auto;
    padding: 17px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 20px;
    background: #071827;
    box-shadow: 0 28px 80px rgba(0,0,0,.5);
}

.lc-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.lc-modal-head h3 {
    margin: 2px 0 0;
    color: white;
    font-size: 18px;
}

.lc-modal-head button {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    color: #aac1d0;
    background: rgba(255,255,255,.035);
    font-size: 20px;
    cursor: pointer;
}

.lc-modal-note {
    margin: 12px 0;
    color: #7896aa;
    font-size: 9px;
    line-height: 1.5;
}

.lc-hidden-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.lc-hidden-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}

.lc-hidden-row > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.lc-hidden-row strong,
.lc-hidden-row small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lc-hidden-row strong {
    color: #edf8ff;
    font-size: 10px;
}

.lc-hidden-row small {
    margin-top: 2px;
    color: #66859a;
    font-size: 8px;
}

.lc-hidden-row button {
    padding: 7px 9px;
    border: 1px solid rgba(29,161,242,.20);
    border-radius: 9px;
    color: #76cfff;
    background: rgba(29,161,242,.07);
    cursor: pointer;
    font-size: 9px;
}

.lc-modal-loading,
.lc-modal-error {
    padding: 18px;
    border-radius: 12px;
    color: #7896aa;
    background: rgba(255,255,255,.025);
    text-align: center;
    font-size: 10px;
}

.lc-modal-error {
    color: #ff9999;
}

/* =========================
   ÜRES MAPPA
   ========================= */

.lc-empty-state {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    margin: 10px 0;
    padding: 24px;
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 18px;
    color: #7e9aae;
    background: rgba(10,29,45,.42);
    text-align: center;
}

.lc-empty-state > span {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: 17px;
    color: white;
    background: linear-gradient(145deg,#2faeff,#087bd7);
    font-size: 29px;
}

.lc-empty-state strong {
    color: #e8f6ff;
    font-size: 14px;
}

.lc-empty-state small {
    margin-top: 4px;
    color: #718ea2;
    font-size: 9px;
}

.lc-empty-state button {
    margin-top: 13px;
    padding: 9px 13px;
    border: 1px solid rgba(29,161,242,.25);
    border-radius: 10px;
    color: #dff4ff;
    background: rgba(29,161,242,.11);
    cursor: pointer;
    font-size: 10px;
}

/* =========================
   PULL TO REFRESH
   ========================= */

.lc-pull-indicator {
    position: fixed;
    z-index: 1000004;
    top: calc(env(safe-area-inset-top) + 2px);
    left: 50%;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 99px;
    color: #9ec1d6;
    background: rgba(6,22,35,.96);
    box-shadow: 0 12px 30px rgba(0,0,0,.26);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -70px);
    transition: opacity .12s ease;
    font-size: 9px;
}

.lc-pull-indicator.show {
    opacity: 1;
}

/* =========================================================
   STANDALONE / IPHONE SAFE AREA
   ========================================================= */

@media (display-mode: standalone) {
    html,
    body,
    #root {
        min-height: 100dvh;
        background: #06111d !important;
    }

    body {
        padding-top: env(safe-area-inset-top) !important;
    }

    #lenovo-cloud-app {
        margin-top: 8px !important;
    }
}

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

@media (max-width: 950px) {
    .lc-personal-sections {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   MOBIL – SAFE AREA + NATÍVABB TAB BAR
   ========================================================= */

@media (max-width: 650px) {
    body {
        padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
        background: #06111d !important;
    }

    .lc-network-popover {
        position: fixed;
        top: calc(env(safe-area-inset-top) + 66px);
        right: 10px;
        left: 10px;
        width: auto;
    }

    .lc-net-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .lc-storage-strip {
        gap: 10px;
        padding: 11px;
        border-radius: 14px;
    }

    .lc-storage-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-radius: 10px;
        font-size: 18px;
    }

    .lc-storage-line {
        font-size: 9px;
    }

    .lc-storage-copy > small {
        font-size: 8px;
    }

    .lc-personal-card {
        padding: 12px;
        border-radius: 15px;
    }

    .lc-personal-head h3 {
        font-size: 14px;
    }

    .lc-mini-file {
        min-height: 45px;
    }

    .lc-mobile-nav {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(70px + env(safe-area-inset-bottom)) !important;
        padding: 0 8px env(safe-area-inset-bottom) !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        background: rgba(5,21,34,.985) !important;
        box-shadow: 0 -12px 35px rgba(0,0,0,.34) !important;
    }

    .lc-mobile-upload {
        top: -8px !important;
        border-color: #071725 !important;
    }

    .lc-upload-panel {
        bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }

    .lc-toast-host {
        top: calc(8px + env(safe-area-inset-top));
        right: 9px;
        width: calc(100vw - 18px);
    }

    .lc-offline-banner {
        grid-template-columns: auto 1fr;
        top: calc(6px + env(safe-area-inset-top));
    }

    .lc-offline-banner small {
        grid-column: 1 / 3;
        padding-left: 17px;
    }

    .lc-hidden-manager-btn span {
        display: none;
    }

    .lc-hidden-manager-btn {
        width: 36px;
        min-height: 36px;
        padding: 0;
    }

    .lc-quick-add {
        bottom: calc(78px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 430px) {
    .lc-net-grid {
        gap: 6px;
    }

    .lc-net-grid > div,
    .lc-net-traffic > div {
        padding: 9px;
    }

    .lc-net-foot {
        flex-direction: column;
        gap: 3px;
    }
}

@media (max-width: 370px) {
    .lc-status {
        display: flex !important;
        width: 29px;
        min-width: 29px;
        justify-content: center;
        padding: 6px !important;
    }

    .lc-status #lc-online-text {
        display: none;
    }

    .lc-top-actions {
        gap: 5px;
    }

    .lc-hidden-manager-btn {
        width: 32px;
        min-height: 32px;
    }
}