/* ===========================================================
   FileShare - Dark Glass Theme
   Part 1 : Base + Layout + Navbar + Buttons + Upload
=========================================================== */

:root{

    /* Background */

    --bg-900:#050814;
    --bg-800:#081225;
    --bg-700:#0d1830;

    /* Primary */

    --primary:#2563eb;
    --primary-light:#60a5fa;

    /* Accent */

    --accent:#38bdf8;
    --accent-glow:#22c55e;

    /* Text */

    --text:#eef4ff;
    --text-light:#ffffff;
    --text-muted:#94a3b8;

    /* Glass */

    --glass-bg:rgba(255,255,255,.05);
    --glass-bg-strong:rgba(255,255,255,.08);

    --glass-border:rgba(255,255,255,.12);

    --glass-shadow:
        0 15px 40px rgba(0,0,0,.45);

    /* States */

    --success:#22c55e;
    --danger:#ef4444;

    /* Radius */

    --radius:18px;

}



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



html{

    scroll-behavior:smooth;

}



body{

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

    background:var(--bg-900);

    color:var(--text);

    direction:rtl;

    min-height:100vh;

    overflow-x:hidden;

}



/* ===========================================================
   Background
=========================================================== */

.bg-gradient{

    position:fixed;

    inset:0;

    z-index:-3;

    background:

    radial-gradient(circle at 20% 20%,
    rgba(37,99,235,.18),
    transparent 42%),

    radial-gradient(circle at 82% 72%,
    rgba(56,189,248,.14),
    transparent 45%),

    linear-gradient(
    145deg,
    var(--bg-900),
    var(--bg-800),
    var(--bg-700));

}



.bg-blob{

    position:fixed;

    border-radius:50%;

    filter:blur(90px);

    opacity:.45;

    z-index:-2;

}



.blob-1{

    width:420px;

    height:420px;

    background:#2563eb;

    right:-120px;

    top:-120px;

}



.blob-2{

    width:360px;

    height:360px;

    background:#22c55e;

    left:-90px;

    bottom:-120px;

}



/* ===========================================================
   Container
=========================================================== */

.container{

    width:100%;

    max-width:1100px;

    margin:auto;

    padding:2rem 1.5rem;

}



/* ===========================================================
   Glass Card
=========================================================== */

.glass{

    background:var(--glass-bg);

    backdrop-filter:blur(18px);

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

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

    border-radius:24px;

    box-shadow:var(--glass-shadow);

}



/* ===========================================================
   Links
=========================================================== */

a{

    color:inherit;

    text-decoration:none;

}



/* ===========================================================
   Navbar
=========================================================== */

.navbar-glass{

    position:sticky;

    top:0;

    z-index:1000;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 28px;

    background:rgba(5,8,20,.75);

    backdrop-filter:blur(16px);

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

}



.brand{

    font-size:1.45rem;

    font-weight:800;

    background:linear-gradient(
            90deg,
            var(--primary-light),
            var(--accent)
    );

    -webkit-background-clip:text;

    color:transparent;

}



.brand-text{

    color:#fff;

}



/* ===========================================================
   Buttons
=========================================================== */

.btn-glow{

    border:none;

    color:#fff;

    cursor:pointer;

    font-weight:600;

    border-radius:14px;

    padding:.8rem 1.7rem;

    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--accent));

    transition:.25s;

}



.btn-glow:hover{

    transform:translateY(-2px);

    box-shadow:

    0 8px 25px rgba(56,189,248,.35);

}



.btn-ghost{

    background:var(--glass-bg);

    color:var(--text);

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

    padding:.8rem 1.4rem;

    border-radius:14px;

    cursor:pointer;

    transition:.25s;

}



.btn-ghost:hover{

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

}



/* ===========================================================
   Upload Area
=========================================================== */

.upload-zone{

    border:2px dashed rgba(255,255,255,.15);

    border-radius:26px;

    padding:4rem 2rem;

    text-align:center;

    transition:.35s;

    cursor:pointer;

    position:relative;

}



.upload-zone:hover{

    border-color:var(--accent);

}



.upload-zone.dragover{

    border-color:var(--accent);

    background:rgba(56,189,248,.08);

    transform:scale(1.02);

}



.upload-icon{

    width:80px;

    height:80px;

    margin:0 auto 1rem;

    color:var(--accent);

}



/* ===========================================================
   Progress
=========================================================== */

.progress-track{

    height:8px;

    margin-top:20px;

    border-radius:999px;

    overflow:hidden;

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

}



.progress-fill{

    width:0;

    height:100%;

    border-radius:999px;

    background:

    linear-gradient(
        90deg,
        var(--primary-light),
        var(--accent));

    transition:width .3s;

}



/* ===========================================================
   Responsive
=========================================================== */

@media(max-width:768px){

    .container{

        padding:1rem;

    }

    .navbar-glass{

        padding:16px;

    }

    .upload-zone{

        padding:2.5rem 1rem;

    }

}
/* ===========================================================
   Upload Result
=========================================================== */

.upload-result{

    margin-top:30px;

    border-radius:24px;

    padding:30px;

    background:rgba(8,18,37,.85);

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

    backdrop-filter:blur(18px);

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

}



/* ===========================================================
   Success Icon
=========================================================== */

.success-check{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:18px;

}

.success-check svg{

    width:92px;

    height:92px;

}



.check-circle{

    fill:none;

    stroke:var(--success);

    stroke-width:4;

    stroke-dasharray:151;

    stroke-dashoffset:151;

}



.check-mark{

    fill:none;

    stroke:var(--success);

    stroke-width:4;

    stroke-linecap:round;

    stroke-linejoin:round;

    stroke-dasharray:48;

    stroke-dashoffset:48;

}



/* ===========================================================
   Title
=========================================================== */

#resultTitle{

    text-align:center;

    font-size:1.35rem;

    font-weight:700;

    color:#fff;

    margin-bottom:26px;

}



/* ===========================================================
   File Information
=========================================================== */

.result-file-info{

    display:flex;

    justify-content:space-between;

    gap:20px;

    padding:18px 20px;

    border-radius:16px;

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

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

    margin-bottom:22px;

}



.result-file-info>div{

    flex:1;

}



.result-file-info small{

    display:block;

    margin-bottom:6px;

    color:var(--text-muted);

    font-size:.8rem;

}



.result-file-info strong{

    color:#fff;

    font-size:1rem;

    word-break:break-word;

}



/* ===========================================================
   Download Link
=========================================================== */

.link-box{

    display:flex !important;

    align-items:center;

    width:100%;

    height:54px;

    border:2px solid red;

    background:#1b2336;

    margin-top:10px;

}

.link-box input{

    flex:1;

    min-width:0;

    background:#222;

    color:white;

    border:none;

    padding:12px;

}

.copy-btn{

    width:54px;

    height:54px;

    background:#22c55e;

}


.link-box:focus-within{

    border-color:var(--success);

    box-shadow:

        0 0 0 3px rgba(34,197,94,.15);

}



.link-box input{

    flex:1;

    background:transparent;

    border:none;

    color:#f8fafc;

    padding:15px 18px;

    font-size:.88rem;

    font-family:monospace;

    outline:none;

}



.link-box input::selection{

    background:var(--success);

    color:#fff;

}



.link-box input::placeholder{

    color:#64748b;

}



/* ===========================================================
   Copy Button
=========================================================== */

.copy-btn{

    width:58px;

    height:54px;

    border:none;

    cursor:pointer;

    background:var(--success);

    color:white;

    transition:.25s;

}



.copy-btn:hover{

    background:#16a34a;

}



.copy-btn:active{

    transform:scale(.92);

}



.copy-btn.copied{

    background:#059669;

}



/* ===========================================================
   Action Buttons
=========================================================== */

.result-actions{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:14px;

    margin-top:10px;

}



.action-chip{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:8px;

    height:90px;

    border-radius:18px;

    text-decoration:none;

    cursor:pointer;

    color:#fff;

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

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

    transition:.25s;

}



.action-chip i{

    font-size:1.45rem;

    color:var(--accent);

}



.action-chip span{

    font-size:.82rem;

}



.action-chip:hover{

    transform:translateY(-3px);

    border-color:var(--success);

    background:rgba(34,197,94,.12);

}



.action-chip:hover i{

    color:var(--success);

}



/* ===========================================================
   Main Download Button
=========================================================== */

.btn-glass-outline{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    width:100%;

    margin-top:22px;

    height:56px;

    border:none;

    border-radius:16px;

    background:

        linear-gradient(
            135deg,
            #16a34a,
            #22c55e);

    color:#fff;

    font-size:1rem;

    font-weight:700;

    transition:.25s;

}



.btn-glass-outline:hover{

    transform:translateY(-2px);

    box-shadow:

        0 12px 28px rgba(34,197,94,.35);

}



/* ===========================================================
   QR Code
=========================================================== */

.qr-wrap{

    margin-top:26px;

    text-align:center;

    border-radius:20px;

    padding:22px;

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

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

}



.qr-wrap h6{

    margin-bottom:16px;

    color:var(--text);

}



.qr-inner{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:12px;

    border-radius:14px;

    background:white;

}



.qr-inner canvas{

    display:block;

}



/* ===========================================================
   Mobile
=========================================================== */

@media(max-width:768px){

    .upload-result{

        padding:20px;

    }

    .result-file-info{

        flex-direction:column;

        gap:14px;

    }

    .result-actions{

        grid-template-columns:1fr;

    }

    .action-chip{

        flex-direction:row;

        justify-content:flex-start;

        height:60px;

        padding:0 18px;

    }

}

/* ===============================
   FileShare Result
================================ */

.fs-result{

    margin-top:32px;

    background:#0f172a;

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

    border-radius:24px;

    padding:32px;

    box-shadow:

        0 20px 45px rgba(0,0,0,.45);

}



.fs-result-header{

    text-align:center;

    margin-bottom:30px;

}



.fs-result-header h3{

    margin-top:18px;

    color:white;

    font-size:2rem;

    font-weight:700;

}



.fs-check{

    display:flex;

    justify-content:center;

}



.fs-file{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px;

    border-radius:18px;

    background:#172136;

    margin-bottom:28px;

}



.fs-file-icon{

    width:64px;

    height:64px;

    border-radius:16px;

    background:#22c55e22;

    color:#22c55e;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

}



.fs-file-info{

    flex:1;

}



.fs-file-info h5{

    margin:0;

    color:white;

    font-size:1.15rem;

}



.fs-meta{

    display:flex;

    gap:15px;

    margin-top:8px;

    color:#94a3b8;

}



.fs-label{

    display:block;

    margin-bottom:10px;

    color:#cbd5e1;

}



.fs-link{

    display:flex;

    align-items:center;

    background:#111827;

    border:1px solid #243042;

    border-radius:16px;

    overflow:hidden;

}



.fs-link input{

    flex:1;

    border:none;

    outline:none;

    background:transparent;

    color:#fff;

    padding:15px 18px;

    font-family:monospace;

}



.fs-copy{

    width:58px;

    height:54px;

    border:none;

    cursor:pointer;

    background:#22c55e;

    color:white;

}



.fs-copy:hover{

    background:#16a34a;

}



.fs-actions{

    margin-top:28px;

}



.fs-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    width:100%;

    height:56px;

    background:#2563eb;

    color:white !important;

    border-radius:14px;

    text-decoration:none;

    transition:.25s;

}



.fs-btn:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

}




/* ==========================================
   Glass Navbar
========================================== */

.navbar-nav{

    display:flex;

    align-items:center;

    gap:.55rem;

}



/* خود آیتم */

.navbar-nav .nav-link{

    position:relative;

    display:flex;

    align-items:center;

    gap:.55rem;

    padding:.65rem 1rem;

    border-radius:14px;

    color:inherit !important;

    font-weight:500;

    transition:all .28s ease;

    overflow:hidden;

    isolation:isolate;

}



/* لایه شیشه‌ای */

.navbar-nav .nav-link::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

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

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

    backdrop-filter:blur(12px);

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

    opacity:0;

    transition:.28s;

    z-index:-1;

}



/* نور بالا */

.navbar-nav .nav-link::after{

    content:"";

    position:absolute;

    left:12px;

    right:12px;

    top:1px;

    height:1px;

    border-radius:999px;

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

    opacity:0;

    transition:.28s;

}



/* Hover */

.navbar-nav .nav-link:hover{

    transform:translateY(-2px);

}



.navbar-nav .nav-link:hover::before{

    opacity:1;

}



.navbar-nav .nav-link:hover::after{

    opacity:1;

}



/* Active */

.navbar-nav .nav-link.active{

    color:#fff !important;

}



.navbar-nav .nav-link.active::before{

    opacity:1;

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.22),
        rgba(34,197,94,.18)
    );

    border-color:rgba(255,255,255,.15);

    box-shadow:

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

        0 8px 24px rgba(37,99,235,.15);

}



/* آیکون */

.navbar-nav .nav-link i{

    font-size:1rem;

    opacity:.85;

    transition:.25s;

}



.navbar-nav .nav-link:hover i{

    transform:scale(1.08);

    opacity:1;

}



/* Responsive */

@media(max-width:992px){

    .navbar-nav{

        gap:.25rem;

    }

    .navbar-nav .nav-link{

        border-radius:12px;

    }

}
.navbar-nav .nav-link.active{

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.10),
        rgba(255,255,255,.04)
    );

    box-shadow:
        0 0 18px rgba(34,197,94,.18),
        inset 0 1px 0 rgba(255,255,255,.12);
}
/* ==========================================
   Glass Input
========================================== */

.input-glass{

    width:100%;

    height:54px;

    padding:0 18px;

    border-radius:16px;

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

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

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

    color:inherit;

    font-size:.95rem;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease,
        transform .25s ease;

    outline:none;

}



/* Placeholder */

.input-glass::placeholder{

    color:rgba(255,255,255,.45);

}



/* Hover */

.input-glass:hover{

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

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

}



/* Focus */

.input-glass:focus{

    border-color:rgba(56,189,248,.65);

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

    box-shadow:

        0 0 0 4px rgba(56,189,248,.12),

        0 8px 24px rgba(56,189,248,.08);

}



/* Disabled */

.input-glass:disabled{

    opacity:.6;

    cursor:not-allowed;

}



/* Readonly */

.input-glass[readonly]{

    cursor:text;

}



/* Autofill */

.input-glass:-webkit-autofill,
.input-glass:-webkit-autofill:hover,
.input-glass:-webkit-autofill:focus{

    -webkit-box-shadow:0 0 0 1000px transparent inset;

    -webkit-text-fill-color:inherit;

    transition:background-color 9999s;

}

/* ==========================================================
   Auth Wizard
========================================================== */

.auth-card{

    max-width:440px;
    width:100%;

    padding:32px;

    border-radius:24px;

}



.auth-title{

    text-align:center;

    font-weight:700;

    margin-bottom:28px;

}



.oauth-buttons{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-bottom:22px;

}



.oauth-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:54px;

}



.divider{

    display:flex;

    align-items:center;

    gap:14px;

    margin:24px 0;

    color:var(--text-muted);

    font-size:.9rem;

}



.divider::before,
.divider::after{

    content:"";

    flex:1;

    height:1px;

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

}



.wizard-step{

    min-height:180px;

}



.wizard-step label{

    font-size:.9rem;

    color:var(--text-muted);

}



.phone-input{

    text-align:center;

    letter-spacing:1px;

    font-size:1.05rem;

}



/* ==========================================================
   OTP
========================================================== */

/* ==========================================
   OTP
========================================== */

.otp-inputs{

    direction:ltr;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin:28px 0;

    user-select:none;

}

.otp-inputs input{

    direction:ltr;

    unicode-bidi:plaintext;

    width:58px;

    height:64px;

    border:none;

    border-radius:18px;

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

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

    backdrop-filter:blur(14px);

    color:#fff;

    text-align:center;

    font-size:1.6rem;

    font-weight:700;

    font-family:Consolas, monospace;

    transition:.25s;

    outline:none;

}

.otp-inputs input:focus{

    border-color:#38bdf8;

    transform:translateY(-2px);

    box-shadow:
        0 0 0 4px rgba(56,189,248,.15),
        0 10px 20px rgba(56,189,248,.12);

}







#timer{

    display:inline-block;

    margin-top:5px;

    font-weight:600;

    color:#38bdf8;

}



#phoneLabel{

    color:#fff;

    font-weight:600;

}



/* ==========================================================
   Toast
========================================================== */

.fs-toast{

    position:fixed;

    top:25px;

    left:50%;

    transform:translateX(-50%) translateY(-30px);

    min-width:280px;

    max-width:420px;

    padding:16px 22px;

    border-radius:18px;

    background:rgba(15,23,42,.95);

    color:#fff;

    backdrop-filter:blur(18px);

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

    box-shadow:

        0 15px 35px rgba(0,0,0,.45);

    z-index:99999;

    opacity:0;

    pointer-events:none;

}



.fs-toast.show{

    animation:toastShow .35s forwards;

}



.fs-toast.hide{

    animation:toastHide .35s forwards;

}



.fs-toast.success{

    border-right:5px solid #22c55e;

}



.fs-toast.error{

    border-right:5px solid #ef4444;

}



@keyframes toastShow{

    to{

        opacity:1;

        transform:translateX(-50%) translateY(0);

    }

}



@keyframes toastHide{

    to{

        opacity:0;

        transform:translateX(-50%) translateY(-25px);

    }

}



@media(max-width:768px){

    .otp-inputs{

        gap:8px;

    }

    .otp-inputs input{

        width:48px;

        height:56px;

        font-size:1.25rem;

    }

}

/* ============ Navbar بهبودیافته (Mobile-First) ============ */

/* --- پایه: موبایل --- */
.glass-nav {
    padding-top: .6rem;
    padding-bottom: .6rem;
}
.glass-nav .navbar-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0;
}
.brand-logo {
    height: 95px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* آیتم‌های ناوبری در موبایل: عمودی با فاصله یکنواخت */
.glass-nav .navbar-nav {
    gap: .35rem;
    padding-top: .8rem;
}
.glass-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .5rem;
    border-radius: 10px;
    transition: background .2s;
}
.glass-nav .nav-link:hover {
    background: rgba(46, 139, 255, 0.1);
}

/* دکمه‌ها در موبایل تمام‌عرض */
.glass-nav .btn-glass-outline,
.glass-nav .btn-glass-primary {
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 42px;
}

/* زنگوله در موبایل هم‌تراز */
.notif-wrap { display: flex; align-items: center; }

/* --- دسکتاپ (≥ 992px): چیدمان افقی هم‌ردیف --- */
@media (min-width: 992px) {
    .glass-nav .navbar-nav {
        gap: .6rem;
        padding-top: 0;
        /* 🎯 کلید هم‌ردیفی: همه در یک خط مرکزی */
        align-items: center;
    }

    /* ارتفاع یکسان برای همه عناصر تعاملی */
    .glass-nav .nav-link,
    .glass-nav .btn-glass-outline,
    .glass-nav .btn-glass-primary,
    .glass-nav .notif-bell {
        height: 42px;
        display: inline-flex;
        align-items: center;
    }

    .glass-nav .nav-link {
        padding: 0 .8rem;
        white-space: nowrap;
    }

    /* دکمه‌ها در دسکتاپ عرض محتوا */
    .glass-nav .btn-glass-outline,
    .glass-nav .btn-glass-primary {
        width: auto;
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }

    /* زنگوله مربعی و هم‌تراز */
    .glass-nav .notif-bell {
        width: 42px;
        padding: 0;
        justify-content: center;
    }

    .brand-logo { height: 95px; }
}

/* --- خیلی بزرگ (≥ 1200px): تنفس بیشتر --- */
@media (min-width: 1200px) {
    .glass-nav .navbar-nav { gap: .8rem; }
    .glass-nav .nav-link { padding: 0 1rem; }
}

/* اطمینان از عمودی‌چین صحیح container در همه اندازه‌ها */
.glass-nav > .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}



/* ============ استایل اختصاصی داشبورد ============ */
.dash-wrap { --db-glass: rgba(18, 36, 72, 0.55);
    --db-border: rgba(120, 170, 255, 0.16);
    --db-hover: rgba(46, 139, 255, 0.12); }

/* هدر و سهمیه */
.dash-header {
    background: linear-gradient(135deg, rgba(46,139,255,0.12), rgba(0,212,255,0.06));
    border: 1px solid var(--db-border);
    border-radius: 24px; padding: 1.8rem;
    backdrop-filter: blur(20px);
}
.avatar-circle {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-glow));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 700; color: #fff;
}
.quota-ring { position: relative; width: 90px; height: 90px; }
.quota-ring svg { transform: rotate(-90deg); }
.quota-ring .track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 8; }
.quota-ring .prog { fill: none; stroke: url(#quotaGrad); stroke-width: 8;
    stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
.quota-ring .label { position: absolute; inset: 0; display: flex;
    flex-direction: column; align-items: center; justify-content: center; }

/* نوار ابزار */
.dash-toolbar {
    display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
    margin: 1.5rem 0;
}
.tool-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .65rem 1.2rem; border-radius: 14px; cursor: pointer;
    border: 1px solid var(--db-border); font-size: .9rem;
    transition: .25s; background: var(--db-glass); color: var(--text-light);
}
.tool-btn:hover { background: var(--db-hover); border-color: var(--accent-glow);
    transform: translateY(-2px); }
.tool-btn.primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-glow));
    border: none; color: #fff; box-shadow: 0 4px 16px rgba(46,139,255,0.35); }

/* Breadcrumb */
.db-breadcrumb { display: flex; align-items: center; gap: .4rem;
    flex-wrap: wrap; font-size: .88rem; margin-inline-start: auto; }
.db-breadcrumb a { color: var(--text-muted); text-decoration: none;
    padding: .3rem .6rem; border-radius: 8px; transition: .2s; }
.db-breadcrumb a:hover { background: var(--db-hover); color: var(--accent-glow); }
.db-breadcrumb .sep { color: var(--text-muted); opacity: .5; }

/* عنوان بخش */
.section-title { display: flex; align-items: center; gap: .5rem;
    color: var(--text-muted); font-size: .95rem; margin: 1.5rem 0 1rem; }
.section-title::after { content: ''; flex: 1; height: 1px;
    background: var(--db-border); }

/* کارت آیتم */
.db-grid { display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 1rem; }
.db-item {
    position: relative; border-radius: 18px; padding: 1.3rem 1rem;
    background: var(--db-glass); border: 1px solid var(--db-border);
    backdrop-filter: blur(14px); transition: .28s; cursor: pointer;
    text-align: center; overflow: hidden;
    opacity: 1 !important;
}
.db-item::before { content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent, var(--db-hover));
    opacity: 0; transition: .28s; }
.db-item:hover { transform: translateY(-5px);
    border-color: var(--accent-glow);
    box-shadow: 0 12px 32px rgba(0,20,60,0.4); }
.db-item:hover::before { opacity: 1; }
.db-item .ic { font-size: 2.8rem; position: relative; }
.ic-folder { color: #ffd45e; }
.ic-file { color: var(--accent-glow); }
.ic-shared { color: #7ee787; }
.db-item .nm { margin-top: .6rem; font-size: .85rem; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    position: relative; }
.db-item .mt { font-size: .72rem; color: var(--text-muted);
    position: relative; }

/* منوی سه‌نقطه */
.item-menu { position: absolute; top: 8px; inset-inline-end: 8px;
    width: 30px; height: 30px; border-radius: 8px; border: none;
    background: rgba(0,0,0,0.25); color: var(--text-light);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: .2s; z-index: 2; cursor: pointer; }
.db-item:hover .item-menu { opacity: 1; }
.item-menu:hover { background: rgba(0,0,0,0.5); }

/* badge اشتراک */
.share-badge { position: absolute; top: 8px; inset-inline-start: 8px;
    background: rgba(126,231,135,0.2); color: #7ee787;
    font-size: .65rem; padding: .2rem .5rem; border-radius: 8px;
    z-index: 2; }

/* حالت خالی */
.empty-state { text-align: center; padding: 4rem 1rem;
    color: var(--text-muted); }
.empty-state i { font-size: 4.5rem; opacity: .4; }

/* ============ مودال اختصاصی ============ */
.db-modal-overlay {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(4, 10, 26, 0.7); backdrop-filter: blur(6px);
    display: none; align-items: center; justify-content: center;
    padding: 1rem; }
.db-modal-overlay.open { display: flex; }
.db-modal {
    width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
    background: linear-gradient(145deg, rgba(20,40,80,0.95), rgba(12,24,52,0.95));
    border: 1px solid var(--db-border); border-radius: 24px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.5); }
.db-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--db-border); }
.db-modal-head h5 { margin: 0; font-weight: 700; display: flex;
    align-items: center; gap: .6rem; }
.db-modal-close { width: 34px; height: 34px; border-radius: 10px;
    border: none; background: rgba(255,255,255,0.06); color: var(--text-light);
    cursor: pointer; transition: .2s; }
.db-modal-close:hover { background: rgba(239,68,68,0.2); color: #ff6b6b; }
.db-modal-body { padding: 1.6rem; }
.db-modal-foot { padding: 1.2rem 1.6rem; border-top: 1px solid var(--db-border);
    display: flex; gap: .6rem; justify-content: flex-end; }

.db-input { width: 100%; padding: .85rem 1rem; border-radius: 14px;
    background: rgba(10,20,44,0.6); border: 1.5px solid var(--db-border);
    color: var(--text-light); font-family: inherit; transition: .2s; }
.db-input:focus { outline: none; border-color: var(--accent-glow);
    box-shadow: 0 0 18px rgba(79,172,254,0.25); }
.db-input::placeholder { color: var(--text-muted); }
.db-label { font-size: .85rem; color: var(--text-muted);
    margin-bottom: .5rem; display: block; }

.btn-modal { padding: .7rem 1.5rem; border-radius: 14px; border: none;
    cursor: pointer; font-weight: 600; transition: .25s; font-family: inherit; }
.btn-modal.confirm {
    background: linear-gradient(135deg, var(--accent), var(--accent-glow));
    color: #fff; }
.btn-modal.confirm:hover { transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46,139,255,0.4); }
.btn-modal.cancel { background: rgba(255,255,255,0.06);
    color: var(--text-light); }
.btn-modal.danger { background: rgba(239,68,68,0.15); color: #ff6b6b; }
.btn-modal.danger:hover { background: rgba(239,68,68,0.3); }

/* تب‌های مودال اشتراک */
.share-tabs { display: flex; gap: .5rem; margin-bottom: 1.3rem;
    background: rgba(10,20,44,0.5); padding: .35rem; border-radius: 14px; }
.share-tab { flex: 1; padding: .6rem; text-align: center; border-radius: 10px;
    cursor: pointer; font-size: .85rem; color: var(--text-muted);
    transition: .2s; border: none; background: transparent; }
.share-tab.active { background: linear-gradient(135deg, var(--accent), var(--accent-glow));
    color: #fff; }

/* لیست اشتراک/لینک */
.share-row { display: flex; align-items: center; justify-content: space-between;
    padding: .7rem .9rem; border-radius: 12px; background: rgba(10,20,44,0.4);
    margin-bottom: .5rem; font-size: .85rem; }
.share-row .del { border: none; background: transparent; color: #ff6b6b;
    cursor: pointer; padding: .2rem; }

.public-link-box { display: flex; background: rgba(10,20,44,0.6);
    border: 1.5px solid var(--db-border); border-radius: 14px; overflow: hidden; }
.public-link-box input { flex: 1; background: transparent; border: none;
    color: var(--text-light); padding: .75rem .9rem; font-size: .78rem;
    outline: none; min-width: 0; }
.public-link-box button { border: none; padding: .75rem 1rem; cursor: pointer;
    background: linear-gradient(135deg, var(--accent), var(--accent-glow));
    color: #fff; white-space: nowrap; }

/* جدول گزارش */
.report-table { width: 100%; font-size: .8rem; border-collapse: collapse; }
.report-table th { text-align: start; padding: .7rem .6rem;
    color: var(--text-muted); border-bottom: 1px solid var(--db-border);
    font-weight: 500; position: sticky; top: 0;
    background: rgba(12,24,52,0.95); }
.report-table td { padding: .7rem .6rem; border-bottom: 1px solid rgba(120,170,255,0.06); }
.via-badge { font-size: .68rem; padding: .18rem .5rem; border-radius: 6px; }
.via-owner { background: rgba(120,170,255,0.15); color: var(--accent-glow); }
.via-shared { background: rgba(126,231,135,0.15); color: #7ee787; }
.via-public { background: rgba(255,212,94,0.15); color: #ffd45e; }
.anon-tag { color: #ff9f6b; }

.spin-anim { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 576px) {
    .db-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: .7rem; }
    .db-item .ic { font-size: 2.3rem; }
    .dash-toolbar { gap: .4rem; }
    .tool-btn { padding: .55rem .9rem; font-size: .82rem; }
    .db-breadcrumb { width: 100%; margin-top: .8rem; margin-inline-start: 0; }
    .report-table { font-size: .72rem; }
    #selBar { width: calc(100% - 1.6rem); justify-content: space-between; }
    #selBar .lbl { display: none; }
}

/* ============ Drag & Drop ============ */
.db-item[draggable="true"] { -webkit-user-drag: element; user-select: none; }
.db-item.dragging { opacity: .3; transform: scale(.94); }

/* انتخاب‌شده */
.db-item.sel { border-color: var(--accent-glow);
    box-shadow: inset 0 0 0 2px rgba(79,172,254,.45), 0 8px 24px rgba(0,20,60,.35); }
.db-item.sel::after { content: '\F26E'; font-family: 'bootstrap-icons';
    position: absolute; top: 6px; inset-inline-start: 6px; font-size: .95rem;
    color: var(--accent-glow); z-index: 3; }

/* هدف رها کردن */
.drop-hover { border-color: #7ee787 !important;
    background: rgba(126,231,135,.14) !important;
    box-shadow: 0 0 0 2px rgba(126,231,135,.45), 0 10px 30px rgba(0,60,20,.3) !important;
    transform: scale(1.05) !important; }
.db-item.drop-hover .ic { transform: scale(1.12); transition: .2s; }

/* هایلایت همهٔ فولدرها هنگام درگ */
body.dnd-active .db-item[data-type="folder"],
body.dnd-active .db-drop {
    outline: 1.5px dashed rgba(126,231,135,.4); outline-offset: 3px; }
body.dnd-active .db-item[data-type="file"]:not(.dragging) { opacity: .55; }

/* breadcrumb به‌عنوان هدف */
.db-drop { border-radius: 10px; transition: .2s; }

/* کاشی «یک سطح بالاتر» */
.up-item .ic { color: #9fb3d9 !important; }

/* شبح درگ */
.dnd-ghost { position: fixed; z-index: 9998; pointer-events: none;
    background: linear-gradient(135deg, var(--accent), var(--accent-glow));
    color: #fff; padding: .45rem .9rem; border-radius: 12px;
    font-size: .82rem; font-weight: 600; opacity: 0;
    box-shadow: 0 8px 24px rgba(46,139,255,.5); white-space: nowrap; }

/* پردهٔ آپلود (کشیدن فایل از سیستم‌عامل) */
#dropVeil { position: fixed; inset: 0; z-index: 2900; display: none;
    background: rgba(4,10,26,.78); backdrop-filter: blur(8px);
    align-items: center; justify-content: center; flex-direction: column;
    gap: 1rem; color: var(--text-light); pointer-events: none; }
#dropVeil.on { display: flex; }
#dropVeil i { font-size: 5rem; color: var(--accent-glow);
    animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-14px); } }

/* نوار عملیات انتخاب */
#selBar { position: fixed; bottom: 18px; left: 50%; transform: translate(-50%, 120%);
    z-index: 2800; display: flex; align-items: center; gap: .6rem;
    background: rgba(18,36,72,.97); backdrop-filter: blur(16px);
    border: 1px solid var(--db-border); border-radius: 18px;
    padding: .6rem .9rem; box-shadow: 0 12px 36px rgba(0,10,30,.55);
    max-width: calc(100% - 2rem); }
#selBar.on { transform: translate(-50%, 0); }
#selBar .cnt { font-size: .85rem; color: var(--accent-glow); font-weight: 700;
    white-space: nowrap; }

/* لیست فولدر در مودال انتقال */
.mv-row { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem;
    border-radius: 12px; cursor: pointer; transition: .2s; font-size: .88rem; }
.mv-row:hover { background: var(--db-hover); }
.mv-row.disabled { opacity: .35; pointer-events: none; }
#upPanel{position:fixed;inset-inline-start:16px;bottom:16px;width:330px;max-width:calc(100% - 32px);
  background:rgba(18,36,72,.97);backdrop-filter:blur(14px);border:1px solid rgba(120,170,255,.18);
  border-radius:16px;box-shadow:0 12px 36px rgba(0,10,30,.5);z-index:9998;overflow:hidden;
  transform:translateY(20px);opacity:0;pointer-events:none;transition:.3s}
#upPanel.on{transform:none;opacity:1;pointer-events:auto}
#upPanel .up-hd{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;
  border-bottom:1px solid rgba(120,170,255,.12);font-size:.85rem}
#upPanel .up-list{max-height:230px;overflow-y:auto;padding:.4rem 0}
.up-row{padding:.45rem .9rem;font-size:.78rem}
.up-row .up-top{display:flex;align-items:center;gap:.5rem}
.up-row .up-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-row .up-x{border:none;background:transparent;color:#9fb3d9;cursor:pointer;padding:0 .2rem}
.up-track{height:4px;border-radius:4px;background:rgba(120,170,255,.14);margin-top:.35rem;overflow:hidden}
.up-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4facfe,#22c55e);
  border-radius:4px;transition:width .18s}
.up-row.err .up-track i{background:#ef4444}
.up-row.ok  .up-track i{background:#22c55e}
@media(max-width:576px){ #upPanel{inset-inline:12px;width:auto;bottom:80px}}

/* ===== دکمه‌های کنترلی پنل آپلود ===== */
#upPanel .up-hd{
  display:flex; align-items:center; gap:.55rem;
  padding:.65rem .55rem .65rem .9rem;
  border-bottom:1px solid rgba(120,170,255,.12);
  background:rgba(10,20,45,.45);
}
#upPanel .up-hd b{font-size:.86rem; letter-spacing:.2px}

/* --- دکمهٔ بستن (هدر) --- */
#upClose{
  --sz:30px;
  width:var(--sz); height:var(--sz); flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(120,170,255,.16);
  background:rgba(120,170,255,.06);
  color:#9fb3d9; border-radius:9px; cursor:pointer;
  font-size:.82rem; line-height:1; padding:0;
  transition:background .18s, color .18s, border-color .18s, transform .18s;
}
#upClose:hover{
  background:rgba(239,68,68,.16); border-color:rgba(239,68,68,.4);
  color:#ff8f8f; transform:rotate(90deg);
}
#upClose:active{transform:rotate(90deg) scale(.9)}
#upClose:focus-visible{outline:2px solid #4facfe; outline-offset:2px}

/* --- دکمهٔ لغو هر ردیف --- */
.up-row .up-x{
  --sz:26px;
  width:var(--sz); height:var(--sz); flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; background:transparent;
  color:#7f93bb; border-radius:8px; cursor:pointer;
  font-size:.85rem; line-height:1; padding:0; opacity:.75;
  transition:all .18s;
}
.up-row:hover .up-x{opacity:1}
.up-row .up-x:hover{
  background:rgba(239,68,68,.15);
  border-color:rgba(239,68,68,.35);
  color:#ff8f8f;
}
.up-row .up-x:active{transform:scale(.88)}
.up-row .up-x:focus-visible{outline:2px solid #4facfe; outline-offset:1px}

/* حالت‌های نهایی ردیف */
.up-row.ok  {background:linear-gradient(90deg,rgba(34,197,94,.07),transparent)}
.up-row.err {background:linear-gradient(90deg,rgba(239,68,68,.08),transparent)}
.up-row + .up-row{border-top:1px solid rgba(120,170,255,.06)}

/* اسکرول‌بار لطیف */
#upPanel .up-list::-webkit-scrollbar{width:6px}
#upPanel .up-list::-webkit-scrollbar-thumb{
  background:rgba(120,170,255,.22); border-radius:6px}

/* لمسی: هیت‌اریا بزرگ‌تر */
@media (hover:none){
  #upClose{--sz:34px}
  .up-row .up-x{--sz:32px; opacity:1}
}