@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700;800&family=Orbitron:wght@400;600;700;800&display=swap');

:root,[data-theme="dark"]{
    --bg:#0a0a0f;--card:#12121a;--card2:#1c1c2e;--text:#e0e0e0;--muted:#6b7280;
    --line:#2a2a3a;--good:#00ff88;--warn:#f59e0b;--danger:#ff3366;
    --accent:#00ff88;--accent2:#ff00ff;--accent3:#00d4ff;--purple:#9ca3af;--radius:4px
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'JetBrains Mono','Fira Code','Consolas',monospace;background:var(--bg);color:var(--text);height:100vh;overflow:hidden;display:flex;flex-direction:column}

body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(rgba(0,255,136,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,136,0.03) 1px,transparent 1px);background-size:50px 50px}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:10000;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.15) 2px,rgba(0,0,0,0.15) 4px)}

@keyframes glitch{
    0%,100%{transform:translate(0);text-shadow:-1px 0 var(--accent2),1px 0 var(--accent3)}
    20%{transform:translate(-2px,1px)}40%{transform:translate(1px,-1px)}
    60%{transform:translate(-1px,-1px)}80%{transform:translate(1px,1px)}
}
@keyframes neonPulse{
    0%,100%{box-shadow:0 0 5px var(--accent),0 0 10px rgba(0,255,136,0.25)}
    50%{box-shadow:0 0 10px var(--accent),0 0 20px rgba(0,255,136,0.4)}
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ===== HEADER ===== */
.header{height:52px;background:var(--card);border-bottom:1px solid var(--accent);display:flex;align-items:center;padding:0 16px;gap:12px;flex-shrink:0;box-shadow:0 1px 10px rgba(0,255,136,0.1)}
.hdr-icon{width:34px;height:34px;background:var(--accent);clip-path:polygon(0 6px,6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px));display:grid;place-items:center;font-size:16px;color:#0a0a0f;box-shadow:0 0 10px rgba(0,255,136,0.4)}
.hdr-title{font-family:'Orbitron','Share Tech Mono',monospace;font-size:15px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--accent);animation:glitch 3s infinite}
.hdr-sub{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.hdr-right{margin-left:auto;display:flex;gap:8px}
.hdr-btn{padding:6px 14px;border:2px solid var(--line);border-radius:var(--radius);background:transparent;color:var(--text);font-size:12px;font-weight:600;cursor:pointer;transition:all 150ms cubic-bezier(0.4,0,0.2,1);text-decoration:none;display:inline-flex;align-items:center;gap:5px;text-transform:uppercase;letter-spacing:0.5px;font-family:'JetBrains Mono',monospace}
.hdr-btn:hover{border-color:var(--accent);background:rgba(0,255,136,.06);color:var(--accent);box-shadow:0 0 8px rgba(0,255,136,0.2)}

/* ===== MAIN LAYOUT ===== */
.main{flex:1;display:flex;overflow:hidden}

/* ===== FILE TREE SIDEBAR ===== */
.tree-panel{width:280px;flex-shrink:0;background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.tree-head{padding:10px 12px;border-bottom:1px solid var(--line);font-family:'Orbitron','Share Tech Mono',monospace;font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;flex-shrink:0;color:var(--accent3);text-transform:uppercase;letter-spacing:1px}
.tree-actions{display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid var(--line);flex-shrink:0;flex-wrap:wrap}
.t-btn{padding:5px 10px;border-radius:var(--radius);font-size:11px;font-weight:600;cursor:pointer;border:2px solid var(--line);background:transparent;color:var(--text);transition:all 150ms cubic-bezier(0.4,0,0.2,1);display:inline-flex;align-items:center;gap:4px;text-transform:uppercase;letter-spacing:0.5px;font-family:'JetBrains Mono',monospace}
.t-btn:hover{border-color:var(--accent);background:rgba(0,255,136,.06);color:var(--accent);box-shadow:0 0 6px rgba(0,255,136,0.2)}
.t-btn.danger{background:rgba(255,51,102,.06);color:var(--danger);border-color:rgba(255,51,102,.3)}
.t-btn.danger:hover{background:rgba(255,51,102,.12);box-shadow:0 0 6px rgba(255,51,102,0.3)}

/* Search */
.tree-search{padding:6px 8px;border-bottom:1px solid var(--line);display:flex;gap:6px;flex-shrink:0}
.tree-search input{flex:1;background:var(--card2);border:2px solid var(--line);border-radius:var(--radius);padding:5px 10px;color:var(--text);font-size:12px;outline:none;font-family:'JetBrains Mono',monospace;transition:all 150ms cubic-bezier(0.4,0,0.2,1)}
.tree-search input:focus{border-color:var(--accent);box-shadow:0 0 5px var(--accent),0 0 10px rgba(0,255,136,0.25)}
.tree-search input::placeholder{color:var(--muted)}
.tree-search button{padding:5px 12px;border:none;border-radius:var(--radius);background:var(--accent);color:#0a0a0f;font-size:11px;font-weight:700;cursor:pointer;font-family:'JetBrains Mono',monospace;text-transform:uppercase;box-shadow:0 0 6px rgba(0,255,136,0.3)}
.find-results{max-height:120px;overflow-y:auto;flex-shrink:0;padding:0 6px}
.find-item{display:flex;align-items:center;gap:6px;padding:5px 6px;cursor:pointer;border-radius:var(--radius);font-size:12px;transition:all 150ms cubic-bezier(0.4,0,0.2,1)}
.find-item:hover{background:rgba(0,255,136,.04)}
.find-item .fp{color:var(--muted);font-size:10px;margin-left:auto;white-space:nowrap}

/* Tree items */
.tree-list{overflow-y:auto;flex:1;padding:4px 0}
.ti{display:flex;align-items:center;gap:5px;padding:4px 8px;cursor:pointer;transition:all 150ms cubic-bezier(0.4,0,0.2,1);font-size:13px;border-radius:0;margin:1px 5px;user-select:none;border-left:2px solid transparent}
.ti:hover{background:rgba(0,255,136,.03);border-left-color:rgba(0,255,136,0.3)}
.ti.sel{background:rgba(0,255,136,.08);color:var(--accent);border-left-color:var(--accent);box-shadow:inset 0 0 10px rgba(0,255,136,0.03)}
.ti.folder{font-weight:600}
.ti .arrow{font-size:9px;width:12px;color:var(--muted);flex-shrink:0;text-align:center}
.ti .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ti .cnt{font-size:10px;color:var(--accent3);background:var(--card2);padding:1px 6px;border-radius:2px;flex-shrink:0;border:1px solid var(--line)}
.ti .sz{font-size:10px;color:var(--muted);flex-shrink:0;font-family:'JetBrains Mono',monospace}
.children{min-height:0}
.tree-empty{padding:6px 20px;font-size:11px;color:var(--muted);font-style:italic}

/* Drag & Drop */
.ti.dragging{opacity:.35;background:rgba(139,92,246,.06)}
.ti.drag-over{background:rgba(0,255,136,.1);border:1px dashed var(--accent);margin:0 4px;border-radius:0;box-shadow:0 0 8px rgba(0,255,136,0.15)}
.ti.drag-over-invalid{background:rgba(255,51,102,.06);border:1px dashed var(--danger);margin:0 4px;border-radius:0}
.drag-indicator{position:fixed;padding:5px 12px;background:var(--card);border:2px solid var(--accent);border-radius:var(--radius);font-size:11px;font-weight:600;color:var(--accent);pointer-events:none;z-index:9999;box-shadow:0 0 10px rgba(0,255,136,0.3),0 4px 16px rgba(0,0,0,.5);white-space:nowrap;display:none;font-family:'JetBrains Mono',monospace;text-transform:uppercase}
.drag-indicator.copy{border-color:var(--good);color:var(--good)}
.drag-indicator.invalid{border-color:var(--danger);color:var(--danger)}

.tree-footer{padding:6px 8px;border-top:1px solid var(--line);flex-shrink:0}
.tree-footer button{width:100%;padding:5px;border:2px solid var(--line);border-radius:var(--radius);background:none;color:var(--muted);font-size:10px;cursor:pointer;transition:all 150ms cubic-bezier(0.4,0,0.2,1);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.5px}
.tree-footer button:hover{color:var(--accent);border-color:var(--accent);box-shadow:0 0 6px rgba(0,255,136,0.2)}

/* ===== EDITOR PANEL ===== */
.editor-panel{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
.editor-empty{flex:1;display:flex;align-items:center;justify-content:center}
.editor-empty-inner{text-align:center;color:var(--muted)}
.editor-empty-inner .big{font-size:56px;margin-bottom:12px}
.editor-empty-inner h3{font-family:'Orbitron',monospace;color:var(--accent);font-size:16px;margin-bottom:6px;text-transform:uppercase;letter-spacing:1px}
.editor-empty-inner p{font-size:12px;line-height:1.6}
.editor-empty-inner .keys{display:flex;gap:8px;justify-content:center;margin-top:14px}
.editor-empty-inner .key{background:var(--card);border:1px solid var(--accent);border-radius:var(--radius);padding:4px 10px;font-size:11px;color:var(--accent);font-family:'JetBrains Mono',monospace;box-shadow:0 0 4px rgba(0,255,136,0.15)}

.editor-head{padding:8px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:var(--card);min-height:42px;flex-shrink:0}
.editor-path{font-family:'JetBrains Mono','Fira Code',Consolas,monospace;font-size:12px;color:var(--accent);font-weight:600}
.editor-meta{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace}
.dirty-dot{width:7px;height:7px;background:var(--warn);border-radius:0;display:none;box-shadow:0 0 6px rgba(245,158,11,0.5)}
.dirty-dot.show{display:inline-block;animation:blink 1s steps(1) infinite}
.save-btn{padding:5px 12px;border:none;border-radius:var(--radius);background:rgba(0,255,136,.1);color:var(--good);font-size:11px;font-weight:700;cursor:pointer;border:1px solid rgba(0,255,136,.3);display:inline-flex;align-items:center;gap:5px;transition:all 150ms cubic-bezier(0.4,0,0.2,1);font-family:'JetBrains Mono',monospace;text-transform:uppercase}
.save-btn:hover{background:rgba(0,255,136,.18);box-shadow:0 0 8px rgba(0,255,136,0.3)}
.save-btn small{opacity:.5;font-size:10px}

.editor-textarea{flex:1;width:100%;background:#0a0a12;border:none;outline:none;padding:18px 22px;color:#e6edf3;font-family:'JetBrains Mono','Fira Code',Consolas,monospace;font-size:13px;line-height:1.8;resize:none;tab-size:2;caret-color:var(--accent)}
.editor-textarea::placeholder{color:#444}

/* Folder info */
.folder-info{text-align:center;color:var(--muted)}
.folder-info .big{font-size:52px;margin-bottom:8px}
.folder-info h3{color:var(--accent);font-size:14px;font-family:'Orbitron',monospace;text-transform:uppercase;letter-spacing:1px}
.folder-info .meta{font-size:12px;margin-top:6px;font-family:'JetBrains Mono',monospace}

/* Toast */
.vfs-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--card);color:var(--text);padding:10px 20px;border-radius:var(--radius);border:1px solid var(--accent);font-size:13px;font-weight:600;z-index:9999;transition:all .3s cubic-bezier(.17,.67,.5,1.2);opacity:0;box-shadow:0 0 15px rgba(0,255,136,0.2),0 8px 30px rgba(0,0,0,.6);pointer-events:none;font-family:'JetBrains Mono',monospace;clip-path:polygon(0 6px,6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px))}
.vfs-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Loading */
.loading{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;gap:16px;transition:opacity .4s}
.loading.hide{opacity:0;pointer-events:none}
.loading-icon{width:64px;height:64px;background:var(--accent);clip-path:polygon(0 8px,8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px));display:grid;place-items:center;font-size:28px;color:#0a0a0f;animation:neonPulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,255,136,.4)}50%{transform:scale(1.06);box-shadow:0 0 0 14px rgba(0,255,136,0)}}
.loading-bar{width:160px;height:3px;background:var(--line);border-radius:0;overflow:hidden}
.loading-bar span{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--accent),var(--accent3));border-radius:0;animation:slide 1.2s steps(8) infinite}
@keyframes slide{0%{transform:translateX(-120%)}100%{transform:translateX(280%)}}
@keyframes spin{100%{transform:rotate(360deg)}}

@media(max-width:700px){
    .tree-panel{width:100%;height:220px;border-right:none;border-bottom:1px solid var(--line)}
    .main{flex-direction:column}
    .header{flex-wrap:wrap;padding:10px 12px;gap:8px}
    .hdr-title{font-size:14px}
    .hdr-sub{font-size:10px}
    .hdr-right{width:100%;justify-content:space-between;flex-wrap:wrap;gap:6px}
    .hdr-right .btn{font-size:11px;padding:6px 10px}
    body::after{background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.08) 2px,rgba(0,0,0,0.08) 4px)}
}
@media(max-width:480px){
    .tree-panel{height:180px}
    .header{padding:8px}
    .hdr-icon{font-size:20px}
    .hdr-title{font-size:12px}
    .hdr-right{gap:4px}
    .hdr-right .btn{font-size:10px;padding:5px 8px}
}