:root{
--bg:#0b1220;
--card:#111827;
--text:#e5e7eb;
--muted:#9ca3af;
--primary:#3b82f6;
--danger:#ef4444;
--radius:12px;
}

*,
*::before,
*::after{
box-sizing: border-box;
}

body{
margin:0;
font-family:Arial, sans-serif;
background:var(--bg);
color:var(--text);
}

/* ---------------- TOPBAR ---------------- */

.topbar{
height:60px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 16px;
background:#0f172a;
position:fixed;
top:0;
left:0;
right:0;
z-index:1000;
border-bottom:1px solid #1f2937;
}

.logo{
font-weight:bold;
font-size:18px;
letter-spacing:0.5px;
}

.burger{
background:none;
border:none;
color:white;
font-size:20px;
cursor:pointer;
z-index:1100;
position:relative;
}

.topbar, .topbar a, .logo-link{
    color:#fff;
    text-decoration: none;
}

/* ---------------- LAYOUT ---------------- */

.layout{
display:flex;
margin-top:60px;
}

/* ---------------- SIDEBAR ---------------- */

.sidebar{
position:fixed;
top:60px;
right:0;
width:260px;
height:calc(100vh - 60px);
background:linear-gradient(180deg, #0f172a 0%, #0b1220 100%);
padding:18px;
z-index:200;

transform: translateX(100%);
transition:.28s cubic-bezier(.4,0,.2,1);

border-left:1px solid #1f2937;
box-shadow:-10px 0 30px rgba(0,0,0,.35);

/* IMPORTANT FIX */
pointer-events:none;
}

.sidebar.active{
transform: translateX(0);
pointer-events:auto;
}

/* TITLE */
.sidebar-title{
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
color:#64748b;
margin-bottom:14px;
padding-left:6px;
}

/* LINKS */
.sidebar a{
display:flex;
align-items:center;
gap:10px;
padding:12px 12px;
margin-bottom:6px;
border-radius:10px;
color:#e5e7eb;
text-decoration:none;
font-size:14px;
transition:.2s;
background:transparent;
}

.sidebar a i{
width:18px;
text-align:center;
color:#94a3b8;
}

.sidebar a:hover{
background:#1e293b;
transform:translateX(-2px);
}

.sidebar a.active{
background:#2563eb;
color:white;
}

.sidebar a.active i{
color:white;
}

/* ---------------- CONTAINER ---------------- */

.container{
max-width:900px;
margin:20px auto;
padding:20px;
}

.card{
background:var(--card);
padding:20px;
border-radius:var(--radius);
margin-bottom:15px;
overflow:hidden;
}

/* ---------------- BUTTONS ---------------- */

.btn{
background:var(--primary);
border:none;
padding:10px 14px;
color:white;
border-radius:8px;
cursor:pointer;
display:inline-block;
}

.btn.danger{
background:var(--danger);
}

/* ---------------- INPUTS ---------------- */

input, select{
width:100%;
padding:10px 12px;
margin:6px 0;
border-radius:8px;
border:1px solid #334155;
background:#0f172a;
color:white;
outline:none;
}

input::placeholder{
color:#64748b;
}

.card input,
.card select,
.card textarea{
width:100%;
display:block;
padding:10px 12px;
margin-top:8px;
margin-bottom:10px;
border-radius:10px;
border:1px solid #334155;
background:#0f172a;
color:#e5e7eb;
outline:none;
font-size:14px;
}

/* ---------------- FILE ROW ---------------- */

.file{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px;
background:#0b1220;
border-radius:8px;
margin-bottom:8px;
}

/* ---------------- FOOTER ---------------- */

.footer{
position:fixed;
bottom:0;
left:0;
right:0;
height:40px;
background:#0f172a;
display:flex;
align-items:center;
justify-content:center;
border-top:1px solid #1f2937;
}

/* ---------------- MODALS ---------------- */

.upload-modal{
position:fixed;
top:0;left:0;right:0;bottom:0;
background:rgba(0,0,0,.6);
display:flex;
justify-content:center;
align-items:center;
z-index:999;
}

.hidden{display:none;}

.modal{
position:fixed;
top:0;left:0;right:0;bottom:0;
background:rgba(0,0,0,.6);
display:none;
justify-content:center;
align-items:center;
z-index:9999;
}

.modal.active{display:flex;}

.modal-box{
background:#111827;
padding:20px;
border-radius:12px;
width:300px;
text-align:center;
}

.modal .actions{
display:flex;
gap:10px;
justify-content:center;
margin-top:15px;
}

/* ---------------- drop zone ---------------- */

.dropzone{
text-align:center;
padding:50px 30px;
border:2px dashed #334155;
cursor:pointer;
transition:.2s;
width:500px;
max-width: 100%;
}

.dropzone:hover{
border-color:#3b82f6;
background:rgba(59,130,246,.05);
}

.dropzone.dragover{
border-color:#3b82f6;
background:rgba(59,130,246,.08);
transform:scale(1.01);
}

.drop-icon{
font-size:42px;
margin-bottom:15px;
color:#3b82f6;
}

.dropzone h2{
margin:10px 0 5px;
}

.dropzone p{
color:#94a3b8;
margin-bottom:20px;
}

.options{
margin-top:20px;
display:flex;
flex-direction:column;
gap:16px;
}

.option-group label{
display:block;
margin-bottom:6px;
font-size:14px;
color:#94a3b8;
}

#startUpload{
margin-top:10px;
padding:14px;
font-size:16px;
font-weight:bold;
}

#resultBox{
margin-top:30px;
text-align:center;
padding:30px;
}

#shareUrl{
margin-top:15px;
margin-bottom:15px;
font-size:14px;
}
/* ---------------- PROGRESS CIRCLE ---------------- */

.circle-wrapper{
position:relative;
width:140px;
height:140px;
text-align:center;
}

circle{
fill:none;
stroke-width:10;
transform:rotate(-90deg);
transform-origin:50% 50%;
}

.bg{ stroke:#1e293b; }

.progress{
stroke:#3b82f6;
stroke-dasharray:339;
stroke-dashoffset:339;
transition:0.2s linear;
}

.percent{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:22px;
}

.speed{
margin-top:10px;
font-size:12px;
opacity:.7;
}


/* ---------------- resultbox ---------------- */

#resultBox{
margin-top:20px;
text-align:center;
}

#resultBox input{
width:100%;
margin-top:10px;
}

/* ---------------- TOAST ---------------- */

#toast-container{
position:fixed;
top:20px;
right:20px;
z-index:9999;
}

.toast{
background:#1e293b;
color:white;
padding:10px 14px;
border-radius:8px;
margin-bottom:10px;
transition:.3s;
}

.toast.error{background:#dc2626;}

.toast.hide{
opacity:0;
transform:translateX(20px);
}

/* ---------------- LOADER ---------------- */

.loader{
position:fixed;
top:0;left:0;right:0;bottom:0;
background:rgba(0,0,0,.5);
display:none;
justify-content:center;
align-items:center;
z-index:9998;
}

.loader.active{display:flex;}

.spinner{
width:40px;height:40px;
border:4px solid #3b82f6;
border-top:4px solid transparent;
border-radius:50%;
animation:spin 1s linear infinite;
}

@keyframes spin{
0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}

/* ---------------- AJOUTS & AMÉLIORATIONS DU DESIGN ---------------- */

/* Centrage global de la zone de téléchargement */
.container-share {
    min-height: calc(100vh - 160px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-share {
    width: 100%;
    max-width: 480px;
    border: 1px solid #1f2937;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    padding: 30px;
}

/* En-tête de la carte */
.share-header {
    text-align: center;
    margin-bottom: 25px;
}

.share-header h1 {
    margin: 0 0 10px 0;
    font-size: 24px;
    letter-spacing: -0.5px;
}

.share-header .meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
    background: #1e293b;
    padding: 4px 12px;
    border-radius: 20px;
}

.icon-meta {
    width: 14px;
    height: 14px;
    color: #64748b;
}

/* Formulaire et alertes d'erreur */
.password-form {
    margin-top: 15px;
}

.input-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
}

.btn-block {
    width: 100%;
    padding: 12px;
    font-weight: bold;
    margin-top: 10px;
    transition: background 0.2s;
}

.btn-block:hover {
    background: #2563eb;
}

.error-box {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--danger);
    color: #fca5a5;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 15px;
    text-align: center;
}

/* Liste de fichiers */
.files-list {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Modification de ta structure .file existante */
.file {
    background: #1e293b !important; /* Un peu plus clair que la card pour détacher le fichier */
    border: 1px solid #334155;
    padding: 12px 16px;
    transition: border-color 0.15s, background 0.15s;
}

.file:hover {
    border-color: #475569;
    background: #243249 !important;
}

.file-infos {
    min-w-0: 0; /* Permet au truncate de fonctionner */
    flex: 1;
    padding-right: 15px;
    display: flex;
    flex-direction: column;
}

.file-name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Coupe proprement les noms trop longs */
    font-size: 14px;
}

.file-size {
    color: var(--muted);
    margin-top: 2px;
}

/* LE BOUTON TÉLÉCHARGER AMÉLIORÉ */
.btn-download {
    background: rgba(59, 130, 246, 0.15);
    color: var(--primary);
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

.btn-download:hover {
    background: var(--primary);
    color: white;
}

.icon-dl {
    width: 18px;
    height: 18px;
    transition: transform 0.2s;
}

.btn-download:hover .icon-dl {
    transform: translateY(1px); /* Légère animation mécanique vers le bas au survol */
}

/* Zone fichiers vides */
.empty-files {
    text-align: center;
    color: var(--muted);
    padding: 30px 0;
}

.icon-empty {
    width: 40px;
    height: 40px;
    color: #334155;
    margin-bottom: 10px;
}

.btn-download-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: bold;
    background: var(--primary);
    text-decoration: none;
    transition: background 0.2s;
}
.btn-download-text:hover {
    background: #2563eb;
}
.icon-dl {
    width: 16px;
    height: 16px;
}
.file-infos{
    margin-right:15px;
}

/* ---------------- ADMIN TRANSFERS ---------------- */

.transfer-filter-form{
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center;
}

.transfer-filter-form select{
flex:1;
min-width:220px;
}

.transfer-card{
display:flex;
flex-direction:column;
gap:18px;
}

.transfer-content{
width:100%;
min-width:0;
}

.token-wrapper{
width:100%;
overflow:hidden;
margin-bottom:12px;
}

.token-scroll{
overflow-x:auto;
overflow-y:hidden;
white-space:nowrap;
background:#0b1220;
border:1px solid #334155;
padding:10px 12px;
border-radius:8px;
font-family:monospace;
font-size:13px;
scrollbar-width:thin;
}

.token-scroll::-webkit-scrollbar{
height:6px;
}

.transfer-meta{
display:flex;
flex-wrap:wrap;
gap:10px;
font-size:13px;
color:var(--muted);
}

.transfer-bottom{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:20px;
flex-wrap:wrap;
}

.transfer-qr{
flex-shrink:0;
}

.transfer-qr img{
width:90px;
height:90px;
border-radius:10px;
background:white;
padding:6px;
display:block;
}

.transfer-actions{
display:flex;
justify-content:flex-end;
flex-wrap:wrap;
gap:10px;
margin-left:auto;
}

.transfer-actions .btn{
white-space:nowrap;
}

/* ---------------- MOBILE ---------------- */

@media (max-width: 768px){

    .container{
    max-width:100%;
    margin:20px auto;
    padding:20px;
    }

.transfer-card{
padding:16px;
}

.transfer-meta{
flex-direction:column;
gap:6px;
}

.transfer-bottom{
flex-direction:column;
align-items:center;
}

.transfer-actions{
width:100%;
justify-content:stretch;
}

.transfer-actions .btn{
flex:1;
text-align:center;
padding:12px 10px;
font-size:14px;
}

.transfer-qr img{
width:120px;
height:120px;
}

}