* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace; background: #1e1e2e; color: #cdd6f4; font-size: 14px; overflow: hidden; }

.hidden { display: none !important; }

/* Login */
.login-screen { display: flex; align-items: center; justify-content: center; height: 100%; background: #1e1e2e; }
.login-box { background: #313244; border-radius: 16px; padding: 32px; width: 320px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.login-box h2 { margin-bottom: 20px; font-size: 20px; color: #cba6f7; }
.login-box input { width: 100%; padding: 12px 16px; border: 1px solid #45475a; border-radius: 8px; background: #1e1e2e; color: #cdd6f4; font-size: 16px; margin-bottom: 12px; outline: none; }
.login-box input:focus { border-color: #cba6f7; }
.login-box button { width: 100%; padding: 12px; border: none; border-radius: 8px; background: #cba6f7; color: #1e1e2e; font-size: 14px; font-weight: 600; cursor: pointer; }
.login-box button:active { transform: scale(0.97); }
.error { color: #f38ba8; font-size: 12px; margin-top: 8px; }

/* App Layout */
.app { display: flex; flex-direction: column; height: 100%; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #181825; border-bottom: 1px solid #313244; flex-shrink: 0; }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 8px; }
.app-title { font-size: 14px; font-weight: 600; color: #cba6f7; }
.icon-btn { background: none; border: none; color: #cdd6f4; font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 4px; }
.icon-btn:hover { background: #313244; }
.toggle-label { font-size: 12px; color: #a6adc8; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.toggle-label input { accent-color: #cba6f7; }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 4px; padding: 8px 12px; background: #11111b; font-size: 12px; overflow-x: auto; white-space: nowrap; flex-shrink: 0; }
.breadcrumb span { color: #a6adc8; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.breadcrumb span:hover { background: #313244; color: #cdd6f4; }
.breadcrumb .sep { color: #45475a; cursor: default; }
.breadcrumb .sep:hover { background: none; }

/* Search */
.search-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #181825; border-bottom: 1px solid #313244; flex-shrink: 0; }
.search-bar input { flex: 1; padding: 8px 12px; border: 1px solid #45475a; border-radius: 6px; background: #1e1e2e; color: #cdd6f4; font-size: 14px; outline: none; }
.search-bar input:focus { border-color: #cba6f7; }
.search-bar button { background: none; border: none; color: #cdd6f4; font-size: 16px; cursor: pointer; padding: 4px 8px; }

/* Main Container */
.main-container { display: flex; flex: 1; overflow: hidden; }

/* Sidebar */
.sidebar { width: 240px; background: #181825; border-right: 1px solid #313244; overflow-y: auto; flex-shrink: 0; transition: margin-left 0.2s; }
.sidebar.collapsed { margin-left: -240px; }
.sidebar-header { padding: 12px; font-size: 12px; color: #a6adc8; text-transform: uppercase; letter-spacing: 1px; }
.root-item { padding: 8px 12px; cursor: pointer; font-size: 13px; border-radius: 4px; margin: 2px 8px; }
.root-item:hover { background: #313244; }
.root-item.active { background: #45475a; color: #cba6f7; }

/* Content */
.content { flex: 1; overflow-y: auto; padding: 0; }

/* File List */
.file-list { display: flex; flex-direction: column; }
.file-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; border-bottom: 1px solid #1e1e2e; transition: background 0.1s; }
.file-item:hover { background: #313244; }
.file-item:active { transform: scale(0.99); }
.file-icon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; }
.file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.file-name.dir { color: #89b4fa; font-weight: 500; }
.file-meta { font-size: 11px; color: #6c7086; text-align: right; flex-shrink: 0; }
.file-meta .size { display: block; }
.file-meta .time { display: block; }

/* File Preview */
.file-preview { display: flex; flex-direction: column; height: 100%; }
.preview-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #181825; border-bottom: 1px solid #313244; flex-shrink: 0; }
.preview-header span { font-size: 13px; color: #cba6f7; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-small { padding: 4px 10px; border: 1px solid #45475a; border-radius: 4px; background: #313244; color: #cdd6f4; font-size: 12px; cursor: pointer; }
.btn-small:hover { background: #45475a; }
.preview-info { padding: 8px 16px; font-size: 11px; color: #6c7086; background: #11111b; flex-shrink: 0; }
.file-preview pre { flex: 1; overflow: auto; margin: 0; padding: 16px; background: #1e1e2e; font-size: 13px; line-height: 1.5; }
.file-preview code { font-family: inherit; }

/* Loading */
.loading { text-align: center; padding: 40px; color: #6c7086; }
.loading::after { content: ''; display: inline-block; width: 16px; height: 16px; border: 2px solid #45475a; border-top-color: #cba6f7; border-radius: 50%; animation: spin 0.6s linear infinite; margin-left: 8px; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Empty state */
.empty { text-align: center; padding: 60px 20px; color: #6c7086; }
.empty .emoji { font-size: 40px; margin-bottom: 12px; }

/* Mobile */
@media (max-width: 768px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 100; width: 260px; }
  .sidebar.collapsed { margin-left: -260px; }
  .sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; }
  .topbar-right .toggle-label { display: none; }
  .file-item { padding: 12px 16px; }
  .file-meta .time { display: none; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #45475a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #585b70; }

/* Upload & Mkdir buttons */
.action-btn { padding: 6px 12px; border: 1px solid #45475a; border-radius: 6px; background: #313244; color: #cdd6f4; font-size: 12px; cursor: pointer; transition: all .2s; white-space: nowrap; }
.action-btn:hover { border-color: #cba6f7; color: #cba6f7; }
.danger-btn { border-color: #f38ba8; color: #f38ba8; }
.danger-btn:hover { background: #f38ba8; color: #1e1e2e; }
.upload-progress { position: fixed; top: 0; left: 0; height: 3px; background: #cba6f7; z-index: 999; transition: width .3s; }