/* ══════════════════════════════════════════════════════════════════════
   admin.css – Premium dark admin dashboard with media library
   ══════════════════════════════════════════════════════════════════════ */

/* ── Reset & Typography ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
/* ── Variables & Theme ───────────────────────────────────────────────── */
:root {
  --primary: #818cf8;
  --sky-top: #4facfe;
  --sky-bottom: #00f2fe;
  --text-color: #2c3e50;
  --text-muted: rgba(44,62,80,.6);
  --card-bg: rgba(255,255,255,.25);
  --card-border: rgba(255,255,255,.4);
  --header-bg: rgba(255,255,255,.15);
  --item-bg: rgba(255,255,255,.3);
  --item-hover: rgba(255,255,255,.5);
  --input-bg: rgba(255,255,255,.5);
  --input-text: #2c3e50;
}
body.dark {
  --sky-top: #0b0b2e;
  --sky-bottom: #0d1a3a;
  --text-color: #e4e4ec;
  --text-muted: rgba(255,255,255,.55);
  --card-bg: rgba(255,255,255,.05);
  --card-border: rgba(255,255,255,.08);
  --header-bg: rgba(255,255,255,.04);
  --item-bg: rgba(255,255,255,.04);
  --item-hover: rgba(255,255,255,.08);
  --input-bg: rgba(255,255,255,.06);
  --input-text: #fff;
}

body {
  min-height: 100vh;
  font-family: 'Inter', system-ui, sans-serif;
  background: linear-gradient(135deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
  color: var(--text-color);
  display: flex; flex-direction: column;
  transition: background 0.5s ease, color 0.5s ease;
}

/* --- ÉTOILES (Dark mode only) --- */
#stars-container {
    display: none; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
body.dark #stars-container { display: block; }
.star { position: absolute; border-radius: 50%; background: white; animation: twinkle linear infinite; }
.star.big { background: radial-gradient(circle, #fff 0%, rgba(200,220,255,0.6) 100%); box-shadow: 0 0 4px rgba(200,220,255,0.8); }
.star.comet { background: linear-gradient(90deg, white, transparent); border-radius: 2px; }
@keyframes twinkle { 0% { opacity: 0.1; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0.1; transform: scale(0.8); } }


/* ── Header ──────────────────────────────────────────────────────────── */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 2rem;
  background:var(--header-bg);
  border-bottom:1px solid var(--card-border);
  backdrop-filter:blur(14px);
  position:sticky;top:0;z-index:10;
}
header h1{font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
header nav{display:flex;gap:.4rem}

/* ── Header Right (badge + logout) ───────────────────────────────────── */
.header-right{
  display:flex;align-items:center;gap:.75rem;
}
.btn-logout{
  background:rgba(239,68,68,.15);color:#fca5a5;
  border:1px solid rgba(239,68,68,.2);
  padding:.4rem .8rem;border-radius:.5rem;
  font-size:.82rem;font-weight:600;cursor:pointer;
  transition:all .2s;
}
.btn-logout:hover{background:rgba(239,68,68,.28)}

.btn-dropdown{
  background:transparent;color:var(--text-muted);
  border:1px solid transparent;
  padding:.4rem .8rem;border-radius:.5rem;
  font-size:.82rem;font-weight:600;cursor:pointer;
  transition:all .2s;
  display:flex;align-items:center;
}
.btn-dropdown:hover{background:rgba(255,255,255,.05);color:var(--text-color);}

/* ── Theme Toggle Button ─────────────────────────────────────────────── */
.theme-toggle{
  position:fixed;bottom:20px;right:20px;
  width:45px;height:45px;border-radius:50%;
  background:var(--card-bg);border:1px solid var(--card-border);
  backdrop-filter:blur(10px);font-size:1.3rem;
  cursor:pointer;z-index:1000;
  box-shadow:0 4px 15px rgba(0,0,0,0.2);
  transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s;
  display:flex;align-items:center;justify-content:center;
}
.theme-toggle:hover{
  transform:scale(1.15) rotate(15deg);
  background:var(--item-hover);
}

/* ── Tab buttons ─────────────────────────────────────────────────────── */
.tab-btn{
  background:var(--item-bg);
  border:1px solid var(--card-border);
  color:var(--text-muted);
  padding:.5rem 1rem;border-radius:.5rem;
  cursor:pointer;font-size:.82rem;font-weight:500;
  transition:all .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.tab-btn:hover{
  color:var(--text-color);background:var(--item-hover);
  transform:translateY(-2px);
}
.tab-btn.active{
  background:rgba(99,102,241,.2);
  border-color:rgba(99,102,241,.35);
  color:#a5b4fc;
}

/* ── Profile Dropdown ────────────────────────────────────────────────── */
.profile-menu { position: relative; }
.profile-dropdown {
  position: absolute; top: 100%; right: 0; margin-top: 0.5rem;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 8px; padding: 0.5rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; min-width: 150px; z-index: 100;
  animation: fadeInScale 0.2s ease forwards;
  backdrop-filter: blur(16px);
}
.profile-dropdown.closing {
  animation: fadeOutScale 0.15s ease forwards;
}
.profile-dropdown.hidden { display: none !important; }

/* ── Centered wrapper (login) ────────────────────────────────────────── */
.center{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:2rem 1rem;
}

/* ── Dashboard wrapper ───────────────────────────────────────────────── */
.dashboard{
  flex:1;display:flex;align-items:flex-start;justify-content:center;
  padding:2rem 1rem;
}

/* ── Glass card & Animations ─────────────────────────────────────────── */
@keyframes fadeInScale {
  0% { opacity: 0; transform: translateY(15px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fadeOutScale {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(10px) scale(0.95); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.lightbox.closing {
  animation: fadeOut 0.2s forwards;
}
.card{
  width:100%;max-width:560px;
  padding:2.5rem 2rem;
  border-radius:1.25rem;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  backdrop-filter:blur(16px);
  box-shadow:0 12px 40px rgba(0,0,0,.15);
  transition:background 0.5s ease, border-color 0.5s ease;
}
.card:not(.hidden), .dashboard:not(.hidden) {
  animation: fadeInScale 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Library tab card is wider */
#tabLibrary{max-width:900px}

/* ── Inputs ──────────────────────────────────────────────────────────── */
.input{
  display:block;width:100%;
  padding:.8rem 1rem;margin:.6rem 0;
  border:1px solid var(--card-border);
  border-radius:.625rem;
  background:var(--input-bg);
  color:var(--input-text);font-size:.9rem;
  outline:none;transition:border .25s,box-shadow .25s,background 0.5s ease,color 0.5s ease;
}
.input::placeholder{color:var(--text-muted)}
.input:focus{border-color:#818cf8;box-shadow:0 0 0 3px rgba(129,140,248,.25)}
.input.search{margin-bottom:1rem}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.75rem 1.5rem;
  border:none;border-radius:.625rem;
  font-size:.9rem;font-weight:600;
  cursor:pointer;
  transition:transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .3s cubic-bezier(0.16, 1, 0.3, 1), opacity .2s;
}
.btn:active{transform:scale(.97)}
.btn.primary{
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff;box-shadow:0 4px 14px rgba(99,102,241,.35);
}
.btn.primary:hover{box-shadow:0 6px 22px rgba(99,102,241,.5);transform:translateY(-2px)}
.btn.secondary{
  background:rgba(255,255,255,.08);color:#c7d2fe;
  border:1px solid rgba(255,255,255,.1);
}
.btn.secondary:hover{background:rgba(255,255,255,.14)}
.btn.danger{
  background:rgba(239,68,68,.15);color:#fca5a5;
  border:1px solid rgba(239,68,68,.2);
}
.btn.danger:hover{background:rgba(239,68,68,.28)}

/* ── Status / toast ──────────────────────────────────────────────────── */
.status{
  margin-top:1rem;padding:.65rem 1rem;border-radius:.5rem;
  font-size:.85rem;font-weight:500;text-align:center;
  opacity:0;transition:opacity .3s;
}
.status.show{opacity:1}
.status.ok{background:rgba(34,197,94,.12);color:#86efac}
.status.err{background:rgba(239,68,68,.12);color:#fca5a5}

/* ── Preview area ────────────────────────────────────────────────────── */
.preview{
  margin:1.2rem 0;
  display:flex;align-items:center;justify-content:center;
  min-height:80px;
  border:2px dashed rgba(255,255,255,.1);
  border-radius:.75rem;padding:1rem;
  transition:border-color .3s;overflow:hidden;
}
.preview.has-file{border-color:rgba(99,102,241,.4)}
.preview img,.preview video{max-width:100%;max-height:260px;border-radius:.5rem;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.preview .file-icon{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:rgba(255,255,255,.5);font-size:.85rem}
.preview .file-icon span{font-size:2.4rem}
.drop-hint{color:rgba(255,255,255,.3);font-size:.82rem;text-align:center;margin-bottom:.8rem}

/* ── File list (upload tab) ──────────────────────────────────────────── */
.file-list{margin-top:1.5rem}
.file-list h2{
  font-size:.95rem;font-weight:600;margin-bottom:.75rem;
  color:rgba(255,255,255,.6);letter-spacing:.04em;text-transform:uppercase;
}
.file-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:.6rem .8rem;margin-bottom:.4rem;border-radius:.5rem;
  background:rgba(255,255,255,.04);
  transition:background .3s ease, transform .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.file-item:hover{
  background:rgba(255,255,255,.08);
  transform:translateX(4px);
}
.file-item a{
  color:#c7d2fe;text-decoration:none;font-size:.85rem;
  overflow-wrap:anywhere;
  flex:1;margin-right:.5rem;
}
.file-item a:hover{color:#fff}
.file-item .del{
  background:none;border:none;color:#ef4444;cursor:pointer;
  font-size:1rem;opacity:.5;transition:opacity .2s;padding:.25rem;
}
.file-item .del:hover{opacity:1}

/* ══════════════════════════════════════════════════════════════════════
   MEDIA LIBRARY – grid + cards + lightbox
   ══════════════════════════════════════════════════════════════════════ */

.library-header{margin-bottom:1rem}
.library-header h2{font-size:1.1rem;font-weight:600;margin-bottom:.6rem}

/* ── Media grid ──────────────────────────────────────────────────────── */
.media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:.85rem;
}

/* ── Media card ──────────────────────────────────────────────────────── */
.media-card{
  border-radius:.75rem;overflow:hidden;cursor:pointer;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  transition:transform .4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .4s cubic-bezier(0.16, 1, 0.3, 1), border-color .4s;
}
.media-card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 12px 32px rgba(0,0,0,.4);
  border-color:rgba(99,102,241,.4);
}

/* Thumbnail */
.media-thumb{
  width:100%;aspect-ratio:1;
  background-color:rgba(255,255,255,.03);
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
}
.media-icon{font-size:2.5rem;opacity:.6}

/* Info bar */
.media-info{
  padding:.55rem .65rem;
  display:flex;flex-direction:column;gap:.15rem;
}
.media-name{
  font-size:.78rem;font-weight:500;
  word-wrap:break-word;word-break:break-all;
}
.media-size{font-size:.7rem;color:rgba(255,255,255,.35)}

/* ── Lightbox (opaque card) ────────────────────────────────────────── */
.lightbox{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;justify-content:center;
  padding:1.5rem;
  animation:fadeIn .2s;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.lb-card{
  position:relative;
  display:flex;
  max-width:920px;
  width:100%;
  max-height:82vh;
  background:#1a1a2e;
  border:1px solid rgba(255,255,255,.08);
  border-radius:1rem;
  overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.6);
}
.lb-close{
  position:absolute;top:.8rem;right:.8rem;
  background:rgba(255,255,255,.08);border:none;color:rgba(255,255,255,.5);
  width:32px;height:32px;border-radius:50%;
  font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;z-index:5;
}
.lb-close:hover{background:rgba(255,255,255,.15);color:#fff}

/* Left — media */
.lb-left{
  flex:1;
  display:flex;align-items:center;justify-content:center;
  background:#12121f;
  min-width:0;
  overflow:hidden;
}
.lb-content{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  padding:1.5rem;
}
.lb-content img{max-width:100%;max-height:72vh;border-radius:.5rem;object-fit:contain;}
.lb-content video{max-width:100%;max-height:72vh;border-radius:.5rem;}
.lb-content audio{width:100%;min-width:200px;}

/* Right — details */
.lb-right{
  width:280px;
  flex-shrink:0;
  display:flex;flex-direction:column;
  padding:1.5rem;
  gap:1rem;
  overflow-y:auto;
}

.lb-title-input{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:.5rem;
  padding:.7rem .8rem;
  color:#e4e4ec;
  font-size:1rem;font-weight:600;
  font-family:'Inter',system-ui,sans-serif;
  outline:none;
  transition:border-color .2s;
}
.lb-title-input:focus{
  border-color:#818cf8;
}
.lb-meta{
  font-size:.8rem;
  color:rgba(255,255,255,.4);
}

.lb-qr-section{
  display:flex;justify-content:center;
  padding:.5rem 0;
}
.lb-qr-wrap{
  background:#fff;
  padding:8px;
  border-radius:8px;
  display:inline-block;
}

.lb-actions{
  display:flex;flex-direction:column;gap:.5rem;
  margin-top:auto;
}

@media(max-width:768px){
  .lb-card{
    flex-direction:column;
    max-height:94vh;
  }
  .lb-left{
    max-height:40vh;
  }
  .lb-content img{max-height:36vh;}
  .lb-content video{max-height:36vh;}
  .lb-right{
    width:100%;
  }
  .lb-qr-section{padding:.3rem 0;}
}

/* ── Utility ─────────────────────────────────────────────────────────── */
.hidden{display:none!important}

/* ══════════════════════════════════════════════════════════════════════
   SHORT LINKS
   ══════════════════════════════════════════════════════════════════════ */

/* Links tab card is wider */
#tabLinks{max-width:680px}

/* Link creation form */
.link-form{margin-bottom:.5rem}
.link-row{
  display:flex;gap:.75rem;
  align-items:flex-end;
}
.link-field{
  flex:1;display:flex;flex-direction:column;
}
.link-field label{
  font-size:.78rem;font-weight:500;
  color:rgba(255,255,255,.5);margin-bottom:.15rem;
}
.slug-input-wrap{
  display:flex;align-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:.625rem;
  overflow:hidden;
  transition:border .25s,box-shadow .25s;
}
.slug-input-wrap:focus-within{
  border-color:#818cf8;
  box-shadow:0 0 0 3px rgba(129,140,248,.25);
}
.slug-prefix{
  padding:0 .1rem 0 .75rem;
  color:rgba(255,255,255,.35);
  font-size:.9rem;font-weight:500;
  user-select:none;
}
.slug-input-wrap .input{
  border:none;background:transparent;
  margin:0;padding:.8rem .75rem .8rem .2rem;
}
.slug-input-wrap .input:focus{
  border:none;box-shadow:none;
}

/* Link list items */
.link-item{
  flex-direction:column;
  align-items:stretch;
  gap:.35rem;
  padding:.75rem .85rem;
}
.link-info{
  display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;
  min-width:0;
}
.link-slug{
  color:#a5b4fc!important;
  font-weight:600;font-size:.95rem;
  overflow-wrap:anywhere;
  flex-shrink:0;
}
.link-slug:hover{color:#c7d2fe!important}
.link-arrow{
  display:none;
}
.link-url{
  color:rgba(255,255,255,.45);
  font-size:.8rem;
  overflow-wrap:anywhere;
  min-width:0;
}
.link-actions{
  display:flex;gap:.35rem;
  justify-content:flex-end;
  align-self:flex-end;
}
.copy-btn{
  background:none;border:none;
  cursor:pointer;font-size:.95rem;
  opacity:.5;transition:opacity .2s;padding:.25rem;
}
.copy-btn:hover{opacity:1}

/* ══════════════════════════════════════════════════════════════════════
   USER MANAGEMENT
   ══════════════════════════════════════════════════════════════════════ */

#tabUsers{max-width:680px}

/* User badge in header */
.user-badge{
  display:flex;align-items:center;gap:.4rem;
  font-size:.82rem;font-weight:500;
  color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.06);
  padding:.4rem .8rem;border-radius:.5rem;
  border:1px solid rgba(255,255,255,.08);
}
.badge-role{font-size:1rem}

/* User list items */
.user-item{
  display:flex;align-items:center;
  justify-content:space-between;
}
.user-info{
  display:flex;align-items:center;gap:.5rem;
  flex:1;min-width:0;
}
.user-role-icon{font-size:1.1rem}
.user-name{
  font-size:.88rem;font-weight:500;
  color:#e4e4ec;
}
.user-role-tag{
  font-size:.7rem;font-weight:600;
  padding:.15rem .5rem;border-radius:.3rem;
  text-transform:uppercase;letter-spacing:.04em;
}
.user-role-tag.admin{
  background:rgba(251,191,36,.15);color:#fbbf24;
}
.user-role-tag.user{
  background:rgba(99,102,241,.15);color:#a5b4fc;
}

/* Select input */
select.input{
  appearance:none;
  background:rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23999'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right .8rem center;
  padding-right:2rem;
  cursor:pointer;
}

/* Password modal */
.modal-card{
  max-width:380px;
  text-align:center;
}
.modal-card h3{
  font-size:1rem;font-weight:600;margin-bottom:1rem;
}

/* ══════════════════════════════════════════════════════════════════════
   CUSTOM MODALS (Confirm / Prompt / Alert)
   ══════════════════════════════════════════════════════════════════════ */
.custom-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.2s ease;
}
.custom-modal {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 1.5rem 2rem; border-radius: 1rem;
  min-width: 300px; max-width: 400px; text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Modal closing animations */
.custom-modal-overlay.modal-closing {
  animation: fadeOut 0.2s ease forwards;
}
.custom-modal.modal-closing {
  animation: modalOut 0.2s ease forwards;
}
@keyframes modalIn {
  0% { opacity: 0; transform: scale(0.92) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes modalOut {
  0% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0.92) translateY(10px); }
}

/* Lightbox card opening animation */
.lb-card {
  animation: lbCardIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes lbCardIn {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

/* Lightbox closing animation */
.lightbox.closing {
  animation: fadeOut 0.2s ease forwards;
}
.lightbox.closing .lb-card {
  animation: lbCardOut 0.2s ease forwards;
}
@keyframes lbCardOut {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.92); }
}
@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.custom-modal p { margin-bottom: 1.5rem; font-size: 1rem; font-weight: 500; color: var(--text-color); word-break: break-word;}
.custom-modal input {
  display: block; width: 100%; margin-bottom: 1.5rem;
  padding: 0.8rem; border-radius: 0.5rem;
  background: var(--input-bg); border: 1px solid var(--card-border);
  color: var(--input-text); outline: none;
}
.custom-modal input:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129,140,248,.25); }
.custom-modal .btn-group { display: flex; gap: 0.8rem; justify-content: center; }
.custom-modal .btn-group button { flex: 1; }

/* ══════════════════════════════════════════════════════════════════════
   ANIMATIONS D'AJOUT ET DE SUPPRESSION
   ══════════════════════════════════════════════════════════════════════ */

/* Animation d'ajout */
.item-enter {
  animation: growIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes growIn {
  0% { opacity: 0; transform: translateY(15px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Animations de suppression */
.item-deleting {
  animation: shrinkOut 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  pointer-events: none;
  overflow: hidden;
}
@keyframes shrinkOut {
  0% { opacity: 1; transform: scale(1); max-height: 200px; }
  40% { opacity: 0; transform: scale(0.95); max-height: 200px; }
  100% { opacity: 0; transform: scale(0.9); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; border: none; }
}

.grid-item-deleting {
  animation: gridShrinkOut 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  pointer-events: none;
  overflow: hidden;
}
@keyframes gridShrinkOut {
  0% { opacity: 1; transform: scale(1); }
  40% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(0); margin: 0; padding: 0; border: none; width: 0; height: 0; }
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media(max-width:768px){
  header {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
    gap: 1rem;
  }
  header h1 {
    text-align: center;
    font-size: 1.4rem;
  }
  header nav {
    justify-content: center;
    flex-wrap: wrap;
  }
  .header-right {
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
  .tab-btn, .btn-logout {
    padding: 0.5rem 0.8rem;
    font-size: 0.8rem;
    flex: 1 1 auto;
    text-align: center;
  }
  .card {
    padding: 1.5rem 1rem;
    border-radius: 1rem;
  }
  .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.6rem;
  }
  .link-row {
    flex-direction: column;
    gap: 0.5rem;
  }
  .file-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .file-item > a {
    word-break: break-all;
  }
  .file-item > div {
    align-self: flex-end;
  }
  .link-item {
    padding: 1rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   GLOBAL DRAG & DROP OVERLAY (Library)
   ══════════════════════════════════════════════════════════════════════ */
.global-drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 23, 42, 0.85); /* Fond opaque très sombre */
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px dashed #818cf8; /* Bordure pointillée pour indiquer le drop */
  animation: fadeIn 0.2s ease forwards;
}

.global-drop-overlay.hidden {
  display: none !important;
}

.drop-content {
  text-align: center;
  color: #f8fafc;
  pointer-events: none; /* Important : pour ne pas interférer avec les événements de drag */
}

.drop-content h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.drop-content p {
  color: #94a3b8;
  font-size: 1.1rem;
}

/* ══════════════════════════════════════════════════════════════════════
   SETTINGS PAGE (SPLIT LAYOUT)
   ══════════════════════════════════════════════════════════════════════ */
.settings-dashboard {
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  min-height: calc(100vh - 80px); /* Hauteur de l'écran moins le header pour centrer parfaitement */
}

.settings-card {
  max-width: 900px;
  padding: 0;
  display: flex;
  flex-direction: row;
  min-height: 550px;
  overflow: hidden;
}

.settings-sidebar {
  width: 260px;
  background: rgba(0, 0, 0, 0.25);
  border-right: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  padding: 2rem 0;
}

.settings-tab {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 1rem 1.5rem;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border-right: 3px solid transparent;
}

.settings-tab:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.05);
}

.settings-tab.active {
  color: var(--primary);
  background: rgba(59, 130, 246, 0.1);
  border-right-color: var(--primary);
}

.settings-content {
  flex: 1;
  padding: 3rem;
  overflow-y: auto;
}

.settings-panel {
  display: none;
}

.settings-panel.active {
  display: block;
  animation: fadeIn 0.3s ease forwards;
}

.settings-panel h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.settings-panel p {
  color: var(--text-muted);
}

/* Toggle Switch CSS */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--card-border);
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}
input:checked + .slider {
  background-color: var(--primary);
}
input:checked + .slider:before {
  transform: translateX(22px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}

@media (max-width: 768px) {
  .settings-card {
    flex-direction: column;
  }
  .settings-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--card-border);
    flex-direction: row;
    padding: 0;
    overflow-x: auto;
  }
  .settings-tab {
    border-right: none;
    border-bottom: 3px solid transparent;
    padding: 1rem;
    white-space: nowrap;
  }
  .settings-tab.active {
    border-bottom-color: var(--primary);
  }
  .settings-content {
    padding: 1.5rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SUNSHINE HUB
   ══════════════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

.brand-title {
  cursor: pointer;
  user-select: none;
  transition: color .25s ease, transform .25s ease;
}
.brand-title:hover { color: #c7d2fe; transform: translateY(-1px); }
.brand-title:focus-visible { outline: 2px solid var(--primary); outline-offset: 5px; border-radius: 4px; }

.hub-page { overflow-x: hidden; }
.hub-page header { position: relative; }

.hub-main {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 3.25rem 0 4.5rem;
}

.hub-hero {
  max-width: none;
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
  align-items: center;
  gap: 3rem;
  position: relative;
  overflow: hidden;
  padding: 4rem clamp(2rem, 5vw, 5rem);
  background:
    radial-gradient(circle at 82% 30%, rgba(99,102,241,.16), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
}
.hub-hero::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  left: -130px;
  bottom: -160px;
  border-radius: 50%;
  background: rgba(56,189,248,.1);
  filter: blur(4px);
}

.hero-copy { position: relative; z-index: 2; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: #a5b4fc;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, #818cf8, #38bdf8);
}
.hero-copy h2 {
  max-width: 680px;
  margin: 1.1rem 0 1.25rem;
  font-size: clamp(2.6rem, 5.2vw, 5rem);
  line-height: .98;
  letter-spacing: -.06em;
}
.hero-copy h2 span {
  color: transparent;
  background: linear-gradient(100deg, #a5b4fc 5%, #67e8f9 95%);
  background-clip: text;
  -webkit-background-clip: text;
}
.hero-copy > p {
  max-width: 650px;
  color: rgba(226,232,240,.7);
  font-size: 1.05rem;
  line-height: 1.75;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero-actions a { text-decoration: none; }
.expertise-list { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2.25rem; }
.expertise-list span {
  padding: .42rem .72rem;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  color: rgba(226,232,240,.62);
  background: rgba(255,255,255,.035);
  font-size: .76rem;
}

.hero-mark {
  width: min(360px, 100%);
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 50%;
}
.hero-mark::before {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 33%;
  transform: rotate(12deg);
  background: linear-gradient(145deg, rgba(224,231,255,.94), rgba(165,243,252,.78));
  box-shadow: 0 28px 80px rgba(56,189,248,.18), inset 0 1px 0 rgba(255,255,255,.75);
}
.hero-mark img { width: 48%; position: relative; z-index: 3; filter: drop-shadow(0 12px 18px rgba(15,23,42,.28)); }
.logo-glow { position: absolute; inset: 25%; border-radius: 50%; background: #67e8f9; filter: blur(55px); opacity: .32; }
.hero-orbit { position: absolute; inset: 5%; border: 1px solid rgba(129,140,248,.25); border-radius: 50%; }
.orbit-one { animation: orbitPulse 4.8s ease-in-out infinite; }
.orbit-two { inset: 0; border-style: dashed; opacity: .45; animation: slowSpin 24s linear infinite; }
.orbit-two::after, .orbit-one::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #67e8f9;
  box-shadow: 0 0 18px #67e8f9;
}
.orbit-two::after { top: 17%; left: 10%; }
.orbit-one::after { right: 4%; bottom: 25%; background: #a5b4fc; }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes orbitPulse { 50% { transform: scale(1.025); opacity: .65; } }

.hub-section { scroll-margin-top: 110px; margin-top: 5rem; }
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.section-heading h2 { margin-top: .55rem; font-size: clamp(1.65rem, 3vw, 2.35rem); letter-spacing: -.04em; }
.section-heading > p { max-width: 390px; color: var(--text-muted); line-height: 1.6; font-size: .9rem; text-align: right; }

.services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.service-card {
  min-width: 0;
  color: var(--text-color);
  text-decoration: none;
  border: 1px solid var(--card-border);
  border-radius: 1.15rem;
  overflow: hidden;
  background: rgba(255,255,255,.045);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease;
}
.service-card:hover, .service-card:focus-visible {
  transform: translateY(-8px);
  border-color: rgba(129,140,248,.42);
  box-shadow: 0 22px 45px rgba(0,0,0,.28);
  outline: none;
}
.service-art {
  height: 230px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.service-art::before, .service-art::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  opacity: .75;
}
.service-art::before { width: 180px; height: 180px; top: -95px; right: -70px; background: rgba(255,255,255,.16); }
.service-art::after { width: 150px; height: 150px; bottom: -100px; left: -65px; background: rgba(15,23,42,.18); }
.panel-art { background: linear-gradient(145deg, #c7d2fe, #7dd3fc); }
.mail-art { background: linear-gradient(145deg, #bae6fd, #a5f3fc); }
.jellyfin-art { background: linear-gradient(145deg, #ddd6fe, #c4b5fd); }
.wireguard-art { background: linear-gradient(145deg, #fecdd3, #fca5a5); }
.service-art > img {
  width: 114px;
  height: 114px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 12px 16px rgba(15,23,42,.22));
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.service-card:hover .service-art > img { transform: translateY(-5px) rotate(-2deg) scale(1.045); }
.service-orbit {
  position: absolute;
  width: 175px;
  height: 175px;
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 50%;
  z-index: 1;
}
.service-orbit::before, .service-orbit::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(15,23,42,.55);
}
.service-orbit::before { top: 19px; right: 24px; }
.service-orbit::after { left: 3px; bottom: 57px; }
.service-symbol {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 3;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #111827;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 8px 25px rgba(15,23,42,.17);
  backdrop-filter: blur(8px);
}
.service-symbol svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jellyfin-art .service-symbol svg path { fill: currentColor; stroke: none; }
.service-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.2rem 1.25rem; }
.service-meta h3 { margin-bottom: .25rem; font-size: 1rem; }
.service-meta div > span { display: block; overflow: hidden; color: var(--text-muted); font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.service-arrow {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #c7d2fe;
  background: rgba(99,102,241,.13);
  transition: transform .35s ease, background .35s ease;
}
.service-card:hover .service-arrow { transform: translate(2px,-2px); background: rgba(99,102,241,.24); }

.hub-empty { padding: 3.5rem 1.5rem; text-align: center; border: 1px dashed var(--card-border); border-radius: 1rem; color: var(--text-muted); }
.hub-empty > span { display: block; margin-bottom: .75rem; font-size: 2rem; }
.hub-empty h3 { margin-bottom: .4rem; color: var(--text-color); }
.hub-empty p { font-size: .86rem; }

.tools-section { margin-top: 4.5rem; }
.tools-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.tool-card {
  min-height: 96px;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem;
  color: var(--text-color);
  text-decoration: none;
  border: 1px solid var(--card-border);
  border-radius: .9rem;
  background: rgba(255,255,255,.035);
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
.tool-card:hover, .tool-card:focus-visible { transform: translateY(-3px); background: rgba(255,255,255,.065); border-color: rgba(129,140,248,.32); outline: none; }
.tool-card > span { font-size: 1.35rem; }
.tool-card h3 { margin-bottom: .22rem; font-size: .88rem; }
.tool-card p { color: var(--text-muted); font-size: .68rem; line-height: 1.35; }

.hub-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: 1.5rem 1rem 2.25rem;
  color: rgba(255,255,255,.35);
  font-size: .74rem;
}
.hub-footer img { width: 22px; height: 22px; opacity: .55; }

/* Transition JS entre les pages */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  background: rgba(8,10,35,.72);
  backdrop-filter: blur(10px);
  transition: opacity .34s ease;
}
.page-transition.active { opacity: 1; pointer-events: auto; }
.transition-logo {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(145deg, #e0e7ff, #a5f3fc);
  box-shadow: 0 18px 55px rgba(56,189,248,.22);
  transform: translateY(12px) scale(.88);
  opacity: 0;
  transition: transform .38s cubic-bezier(.16,1,.3,1), opacity .25s ease;
}
.transition-logo img { width: 48px; height: 48px; }
.page-transition.active .transition-logo { transform: translateY(0) scale(1); opacity: 1; }
body.page-leaving > header, body.page-leaving > main, body.page-leaving > .dashboard, body.page-leaving > .center, body.page-leaving > footer {
  transform: translateY(-5px);
  opacity: .72;
  transition: transform .35s ease, opacity .3s ease;
}
body.page-entering > header, body.page-entering > main, body.page-entering > .dashboard, body.page-entering > .center, body.page-entering > footer { opacity: 0; transform: translateY(7px); }

@media (max-width: 1020px) {
  .hub-hero { grid-template-columns: minmax(0, 1fr) 300px; min-height: 480px; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .hub-main { padding-top: 1.25rem; }
  .hub-hero { min-height: auto; grid-template-columns: 1fr; gap: 2.25rem; padding: 2.5rem 1.35rem; }
  .hero-mark { width: min(260px, 85%); grid-row: 1; }
  .hero-copy { grid-row: 2; text-align: center; }
  .hero-copy > p { font-size: .94rem; }
  .eyebrow { justify-content: center; }
  .hero-actions, .expertise-list { justify-content: center; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: .65rem; }
  .section-heading > p { text-align: left; }
  .section-heading .eyebrow { justify-content: flex-start; }
  .hub-section { margin-top: 3.5rem; }
  .service-art { height: 210px; }
  .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .services-grid, .tools-grid { grid-template-columns: 1fr; }
  .service-art { height: 225px; }
  .tool-card { min-height: 80px; }
  .hero-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-orbit, .star, .item-enter { animation: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Gestion des accès au Hub dans les paramètres */
.settings-card .user-info { flex-direction: column; align-items: flex-start; }
.settings-card .user-item { gap: 1rem; }
.settings-card .user-item .link-actions { flex-wrap: wrap; align-items: center; }
.user-hub-access-btn { padding: .45rem .7rem; font-size: .72rem; white-space: nowrap; }
.btn:disabled { cursor: wait; opacity: .55; transform: none !important; }

.hub-access-modal {
  width: min(560px, 100%);
  max-width: 560px;
  padding: 2rem;
  text-align: left;
  border-radius: 1.2rem;
}
.hub-access-modal > h3 { margin: .75rem 0 .4rem; font-size: 1.2rem; }
.hub-access-modal > h3 strong { color: #a5b4fc; }
.hub-access-modal > p { color: var(--text-muted); font-size: .82rem; line-height: 1.5; }
.hub-access-options { display: grid; gap: .55rem; margin: 1.5rem 0; }
.hub-access-option {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 50px;
  align-items: center;
  gap: .75rem;
  padding: .7rem;
  border: 1px solid var(--card-border);
  border-radius: .8rem;
  background: rgba(255,255,255,.035);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.hub-access-option:hover { background: rgba(255,255,255,.065); border-color: rgba(129,140,248,.28); }
.access-service-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: .7rem;
  color: #172033;
  font-weight: 800;
}
.panel-access { background: linear-gradient(145deg, #c7d2fe, #7dd3fc); }
.mail-access { background: linear-gradient(145deg, #bae6fd, #a5f3fc); }
.jellyfin-access { background: linear-gradient(145deg, #ddd6fe, #c4b5fd); }
.wireguard-access { background: linear-gradient(145deg, #fecdd3, #fca5a5); }
.hub-access-option strong { display: block; margin-bottom: .2rem; font-size: .88rem; }
.hub-access-option small { display: block; overflow: hidden; color: var(--text-muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.hub-access-actions { display: flex; justify-content: flex-end; gap: .65rem; }

@media (max-width: 600px) {
  .settings-card .user-item { align-items: stretch; }
  .settings-card .user-item .user-info, .settings-card .user-item .link-actions { align-self: stretch; }
  .settings-card .user-item .link-actions { justify-content: flex-start; }
  .hub-access-modal { padding: 1.35rem; }
  .hub-access-actions { flex-direction: column-reverse; }
  .hub-access-actions .btn { width: 100%; }
}