/* ═══════════════════════════════════════════
   THEME VARIABLES
═══════════════════════════════════════════ */
:root {
    --bg-color:       #0d1117;
    --surface-color:  rgba(22, 27, 34, 0.85);
    --surface-hover:  rgba(59, 130, 246, 0.1);
    --primary-color:  #3b82f6;
    --primary-glow:   rgba(59, 130, 246, 0.4);
    --text-main:      #c9d1d9;
    --text-muted:     #8b949e;
    --glass-border:   rgba(255, 255, 255, 0.1);
    --folder-color:   #eab308;
    --transition:     all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --radius:         8px;
    --sidebar-w:      260px;
}

body.theme-light {
    --bg-color:      #f0f4f8;
    --surface-color: rgba(255,255,255,0.9);
    --surface-hover: rgba(59,130,246,0.08);
    --text-main:     #1a202c;
    --text-muted:    #718096;
    --glass-border:  rgba(0,0,0,0.1);
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: 'Inter','Noto Kufi Arabic', sans-serif;
    overflow: hidden;
    height: 100vh;
    transition: background-color .3s, color .3s;
}

::-webkit-scrollbar { width:7px; height:7px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--glass-border); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }

.bg-glow {
    position:fixed; inset:-10%;
    width:120%; height:120%;
    background: radial-gradient(circle at 50% 30%, rgba(59,130,246,.06) 0%, transparent 55%);
    z-index:-1; pointer-events:none;
}

.hidden { display:none !important; }

/* ═══════════════════════════════════════════
   APP LAYOUT
═══════════════════════════════════════════ */
.explorer-app { display:flex; flex-direction:column; height:100vh; width:100vw; }

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
.explorer-header {
    background: var(--surface-color);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--glass-border);
    display:flex; flex-direction:column;
    z-index:10;
}

.header-top {
    display:flex; align-items:center; gap:1rem;
    padding:.7rem 1.4rem;
    border-bottom:1px solid rgba(255,255,255,.05);
    flex-wrap:wrap;
}

.logo { display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.logo i { font-size:1.7rem; color:var(--folder-color); }
.logo span { font-size:1.1rem; font-weight:600; }

/* Stats */
.stats-bar { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.stat-chip {
    display:flex; align-items:center; gap:.3rem;
    background:var(--surface-hover);
    border:1px solid var(--glass-border);
    border-radius:20px; padding:.2rem .7rem;
    font-size:.8rem; color:var(--text-muted);
}
.stat-chip i { font-size:.9rem; }

/* Actions */
.explorer-actions { display:flex; align-items:center; gap:.5rem; margin-right:auto; flex-wrap:wrap; }

.action-btn {
    background:transparent; color:var(--text-main);
    border:1px solid transparent; border-radius:6px;
    padding:.35rem .7rem; cursor:pointer;
    display:flex; align-items:center; gap:.4rem;
    transition:var(--transition); font-size:.9rem;
    white-space:nowrap;
}
.action-btn:hover { background:var(--surface-hover); border-color:var(--glass-border); }
.action-btn.active { color:var(--primary-color); border-color:var(--primary-color); }

/* Zoom slider */
.zoom-control {
    display:flex; align-items:center; gap:.4rem;
    color:var(--text-muted); font-size:1rem;
}
.zoom-control input[type=range] {
    width:80px; accent-color:var(--primary-color); cursor:pointer;
}

/* Filter */
.filter-wrap {
    display:flex; align-items:center; gap:.4rem;
    background:rgba(0,0,0,.25); border:1px solid var(--glass-border);
    border-radius:6px; padding:.3rem .7rem;
}
.filter-wrap i { color:var(--text-muted); font-size:1rem; }
.filter-wrap input {
    background:transparent; border:none; outline:none;
    color:var(--text-main); font-size:.85rem; width:130px;
}

/* Address bar */
.header-address-bar {
    display:flex; align-items:center;
    padding:.5rem 1.4rem; gap:.8rem;
}

.nav-controls { display:flex; gap:.3rem; }
.nav-controls button {
    background:transparent; border:none; color:var(--text-main);
    width:30px; height:30px; border-radius:4px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:1.1rem; transition:var(--transition);
}
.nav-controls button:hover { background:var(--surface-hover); }

.address-input-container {
    flex:1; display:flex; align-items:center;
    background:rgba(0,0,0,.3); border:1px solid var(--glass-border);
    border-radius:6px; padding:0 .7rem; height:34px;
}

.breadcrumbs { display:flex; flex:1; align-items:center; gap:.3rem; font-size:.88rem; overflow:hidden; }
.breadcrumb-item {
    display:flex; align-items:center; gap:.3rem;
    padding:.15rem .4rem; border-radius:4px;
    cursor:pointer; transition:var(--transition);
    white-space:nowrap;
}
.breadcrumb-item:hover { background:var(--surface-hover); }
.breadcrumb-item.active { color:var(--primary-color); cursor:default; }
.breadcrumb-separator { color:var(--text-muted); font-size:.75rem; }

.address-input-wrapper { flex:1; display:flex; align-items:center; }
.address-input-wrapper input {
    flex:1; background:transparent; border:none; outline:none;
    color:var(--text-main); padding:0 .5rem; font-size:.88rem;
}
.address-input-wrapper button {
    background:transparent; border:none; color:var(--text-main);
    cursor:pointer; padding:0 .4rem; transition:var(--transition);
}
.address-input-wrapper button:hover { color:var(--primary-color); }

/* ═══════════════════════════════════════════
   BODY LAYOUT
═══════════════════════════════════════════ */
.explorer-body { display:flex; flex:1; overflow:hidden; }

/* ═══════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════ */
.explorer-sidebar {
    width:var(--sidebar-w);
    background:rgba(13,17,23,.65);
    backdrop-filter:blur(10px);
    border-left:1px solid var(--glass-border);
    display:flex; flex-direction:column;
    overflow-y:auto;
}

.sidebar-section { padding:1.2rem 1rem; }
.sidebar-section h3 {
    font-size:.8rem; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:.5px;
    margin-bottom:.7rem;
    display:flex; align-items:center; gap:.4rem;
}

.fav-add-btn {
    margin-right:auto; background:transparent; border:none;
    color:var(--text-muted); cursor:pointer; font-size:.9rem;
    padding:.1rem .3rem; border-radius:4px; transition:var(--transition);
}
.fav-add-btn:hover { color:var(--primary-color); background:var(--surface-hover); }

.tree-view { list-style:none; }
.tree-item {
    display:flex; align-items:center; gap:.7rem;
    padding:.5rem .7rem; border-radius:6px;
    cursor:pointer; color:var(--text-main);
    transition:var(--transition); font-size:.9rem;
    margin-bottom:2px; position:relative;
}
.tree-item i { color:var(--folder-color); font-size:1.1rem; flex-shrink:0; }
.tree-item span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tree-item:hover { background:var(--surface-hover); color:var(--primary-color); }
.tree-item .fav-del {
    display:none; background:transparent; border:none;
    color:var(--text-muted); cursor:pointer; font-size:.85rem;
    padding:.1rem; border-radius:3px;
}
.tree-item:hover .fav-del { display:flex; }
.tree-item .fav-del:hover { color:#ef4444; }

/* ═══════════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════════ */
.explorer-content {
    flex:1; padding:1.5rem;
    overflow-y:auto; position:relative;
    display:flex; flex-direction:column; gap:1rem;
}

/* ═══════════════════════════════════════════
   SKELETON LOADER
═══════════════════════════════════════════ */
#loader {
    position:absolute; inset:0;
    background:var(--bg-color);
    z-index:50; padding:1.5rem;
}

.skeleton-grid {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
    gap:1.2rem;
}

.skeleton-item {
    aspect-ratio:1/1; border-radius:var(--radius);
    background: linear-gradient(90deg,
        var(--surface-color) 25%,
        rgba(255,255,255,.05) 50%,
        var(--surface-color) 75%);
    background-size:200% 100%;
    animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
    0%   { background-position:200% 0; }
    100% { background-position:-200% 0; }
}

/* ═══════════════════════════════════════════
   FOLDERS GRID
═══════════════════════════════════════════ */
.folders-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(190px,1fr));
    gap:.9rem;
}

.folder-card {
    display:flex; align-items:center; gap:.9rem;
    background:var(--surface-color);
    border:1px solid var(--glass-border);
    border-radius:var(--radius); padding:.9rem;
    cursor:pointer; transition:var(--transition);
}
.folder-card i { font-size:1.9rem; color:var(--folder-color); flex-shrink:0; }
.folder-card span {
    flex:1; white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; font-weight:500; font-size:.88rem;
}
.folder-card:hover {
    background:var(--surface-hover);
    border-color:var(--primary-color);
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(59,130,246,.15);
}

/* ═══════════════════════════════════════════
   GALLERY — GRID MODE
═══════════════════════════════════════════ */
.gallery-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(var(--grid-size, 220px),1fr));
    gap:1rem;
    padding-bottom:4rem;
    transition: grid-template-columns .2s;
}

.gallery-item {
    aspect-ratio:1/1;
    border-radius:var(--radius); overflow:hidden;
    background:var(--surface-color);
    border:1px solid var(--glass-border);
    cursor:pointer; position:relative;
    transition:var(--transition);
}
.gallery-item:hover {
    transform:scale(1.03);
    border-color:var(--primary-color);
    z-index:2;
    box-shadow:0 10px 25px rgba(0,0,0,.35);
}
.gallery-item img {
    width:100%; height:100%; object-fit:cover;
    transition:transform .4s ease;
}
.gallery-item .overlay {
    position:absolute; bottom:0; left:0; right:0;
    padding:.8rem;
    background:linear-gradient(transparent, rgba(0,0,0,.88));
    opacity:0; transition:var(--transition);
}
.gallery-item:hover .overlay { opacity:1; }
.gallery-item .overlay p {
    font-size:.8rem; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; color:#fff;
}

/* ═══════════════════════════════════════════
   GALLERY — MASONRY MODE
═══════════════════════════════════════════ */
.gallery-grid.masonry {
    display:block;
    columns: var(--masonry-cols, 4);
    column-gap:1rem;
}
.gallery-grid.masonry .gallery-item {
    aspect-ratio:unset;
    break-inside:avoid;
    margin-bottom:1rem;
    display:block;
}
.gallery-grid.masonry .gallery-item img {
    height:auto; width:100%; display:block;
}

/* ═══════════════════════════════════════════
   FILE ICONS
═══════════════════════════════════════════ */
.gallery-item .file-icon {
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    font-size:3.5rem; color:var(--text-muted);
}
.gallery-item video { width:100%; height:100%; object-fit:cover; background:#000; }
.play-icon-overlay {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    font-size:2.8rem; color:rgba(255,255,255,.85);
    pointer-events:none; z-index:1;
}

/* ═══════════════════════════════════════════
   EMPTY / ERROR STATES
═══════════════════════════════════════════ */
.empty-state {
    grid-column:1/-1;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding:5rem 0; color:var(--text-muted);
}
.empty-state i { font-size:5rem; margin-bottom:1rem; opacity:.2; }

#errorMsg {
    margin:1rem; text-align:center;
    background:rgba(239,68,68,.1);
    border:1px solid rgba(239,68,68,.25);
    padding:1.5rem; border-radius:var(--radius);
    color:#fca5a5;
}

/* ═══════════════════════════════════════════
   ZIP PROGRESS
═══════════════════════════════════════════ */
.zip-progress { margin:.5rem 0; }
.zip-progress p { font-size:.88rem; color:var(--text-muted); margin-bottom:.4rem; }
.progress-bar {
    width:100%; height:5px;
    background:var(--surface-color);
    border-radius:3px; overflow:hidden;
    border:1px solid var(--glass-border);
}
.progress-fill {
    height:100%; background:var(--primary-color);
    width:0%; transition:width .3s ease;
}

/* ═══════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════ */
.lightbox {
    position:fixed; inset:0;
    background:rgba(0,0,0,.96);
    z-index:1000;
    display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(12px);
}

.lightbox-content {
    max-width:90%; max-height:85%;
    position:relative; display:flex;
    flex-direction:column; align-items:center;
}
.lightbox-content img {
    max-width:100%; max-height:80vh;
    border-radius:var(--radius);
    box-shadow:0 20px 60px rgba(0,0,0,.6);
    object-fit:contain;
}
.lightbox-content video {
    max-width:100%; max-height:80vh;
    border-radius:var(--radius);
    box-shadow:0 20px 60px rgba(0,0,0,.6);
    background:#000;
}
.lightbox-caption {
    text-align:center; margin-top:.8rem;
    font-size:.9rem; color:rgba(255,255,255,.7);
    max-width:600px; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap;
}

.lb-counter {
    font-size:.85rem; color:rgba(255,255,255,.5);
    padding:.2rem .6rem;
}

.lightbox-toolbar {
    position:absolute; top:1.5rem; right:1.5rem;
    display:flex; gap:1rem; align-items:center; z-index:1001;
}
.toolbar-btn, .close-btn {
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:#fff; cursor:pointer;
    width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; transition:var(--transition);
}
.toolbar-btn:hover, .close-btn:hover {
    background:var(--primary-color);
    border-color:var(--primary-color);
    transform:translateY(-2px);
}

.nav-btn {
    position:absolute; top:50%; transform:translateY(-50%);
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:#fff; cursor:pointer;
    width:46px; height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; transition:var(--transition);
}
.nav-btn:hover { background:var(--primary-color); border-color:var(--primary-color); }
.prev { right:2rem; }
.next { left:2rem; }

.lightbox-file {
    display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:1.2rem;
    background:var(--surface-color); padding:2.5rem;
    border-radius:12px; border:1px solid var(--glass-border);
    min-width:280px;
}
.lightbox-file i { font-size:5rem; color:var(--primary-color); }
.lightbox-file h3 { word-break:break-all; text-align:center; }
.lightbox-file .action-btn {
    background:var(--primary-color); color:#fff;
    padding:.7rem 1.4rem; font-weight:600;
    text-decoration:none; border-radius:6px;
}
.lightbox-file .action-btn:hover { background:#2563eb; }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width:900px) {
    :root { --sidebar-w: 200px; }
    .zoom-control { display:none; }
}

@media (max-width:680px) {
    .explorer-body { flex-direction:column; }
    .explorer-sidebar { width:100%; height:160px; border-left:none; border-bottom:1px solid var(--glass-border); }
    .header-address-bar { flex-direction:column; align-items:stretch; }
    .nav-controls { justify-content:center; }
    .filter-wrap input { width:90px; }
    .gallery-grid.masonry { columns:2; }
}