@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Varion Admin Panel — Corporate Modern */
    --bg-app: #060607;
    --bg-panel: #1F1F20;
    --bg-hover: #46464C;

    --text-main: #FFFFFF;
    --text-muted: #888888;

    --accent: #0485F7;
    --accent-hover: #0370d4;
    --accent-glow: rgba(4, 133, 247, 0.2);
    --accent-text: #FFFFFF;

    --border: #2E2F2F;
    --border-highlight: rgba(255, 255, 255, 0.15);

    --danger: #EF4444;
    --danger-glow: rgba(239, 68, 68, 0.25);
    --success: #34C759;

    --radius: 12px;
    --radius-sm: 8px;
    --header-height: 64px;

    --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.3);
    --shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
}

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

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg-app);
    color: var(--text-main);
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.2); }
* { scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.1) transparent; }

/* ═══ UTILS ═══ */
.hidden { display:none !important; }
.screen { display:none; flex:1; min-height:0; width:100%; overflow:hidden; }
.screen.active { display:flex; flex-direction:column; }

/* ═══ LOGIN ═══ */
.login-wrapper {
    flex:1; display:flex; align-items:center; justify-content:center;
}

.login-card {
    width:100%; max-width:380px; padding:48px 40px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 24px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.login-logo h1 { font-size:22px; font-weight:700; margin-bottom:6px; }
.login-logo p { font-size:13px; color:var(--text-muted); margin-bottom:32px; }

.icon-box {
    width:56px; height:56px; margin:0 auto 24px;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: 14px;
    display:flex; align-items:center; justify-content:center;
}
.icon-box svg { width:28px; height:28px; }

.input-group { position:relative; margin-bottom:16px; }
.input-group input {
    width:100%; background:var(--bg-app); border:1px solid var(--border);
    color:var(--text-main); padding:12px 16px; border-radius:var(--radius);
    font-size:13px; transition:border-color 0.2s;
}
.input-group input::placeholder { color:var(--text-muted); }
.input-group input:focus { border-color:var(--accent); outline:none; }

.btn-eye {
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    background:none; border:none; color:var(--text-muted); cursor:pointer;
    padding:4px; display:flex;
}
.btn-eye:hover { color:var(--text-main); }

.error-text { margin-top:12px; color:var(--danger); font-size:13px; min-height:20px; }

/* ═══ BUTTONS ═══ */
.btn {
    border:1px solid transparent; outline:none; cursor:pointer;
    font-family:inherit; font-size:13px; font-weight:500;
    border-radius:var(--radius); padding:0 20px; height:40px;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    transition:all 0.15s ease; user-select:none;
}
.btn:active { transform:scale(0.97); }

.btn-primary {
    background:var(--text-main); color:var(--bg-app);
    border:none; font-weight:600;
}
.btn-primary:hover { opacity:0.9; }

.btn-secondary {
    background:var(--bg-app); color:var(--text-main);
    border:1px solid var(--border);
}
.btn-secondary:hover { background:var(--bg-hover); }

.btn-danger {
    background:rgba(239,68,68,0.1); color:var(--danger);
    border:1px solid transparent;
}
.btn-danger:hover { background:rgba(239,68,68,0.2); border-color:rgba(239,68,68,0.3); }

.btn-success {
    background:rgba(52,199,89,0.1); color:var(--success);
    border:1px solid transparent;
}
.btn-success:hover { background:rgba(52,199,89,0.2); border-color:rgba(52,199,89,0.3); }

.btn-block { width:100%; }

/* ═══ HEADER ═══ */
.app-header {
    height:var(--header-height); padding:0 32px;
    display:flex; align-items:center; justify-content:space-between;
    background:var(--bg-panel); border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:100;
}

.logo-area { display:flex; align-items:center; gap:12px; }

.logo-mark-sm {
    width:32px; height:32px;
    background:var(--bg-app); border:1px solid var(--border);
    border-radius:8px; display:flex; align-items:center; justify-content:center;
}

.logo-text { font-weight:600; font-size:15px; letter-spacing:-0.01em; }

.search-bar { position:relative; width:100%; max-width:360px; }
.search-bar input {
    width:100%; height:40px; background:var(--bg-app);
    border:1px solid var(--border); border-radius:var(--radius);
    padding:0 16px 0 40px; color:var(--text-main); font-size:13px;
    transition:border-color 0.2s;
}
.search-bar input::placeholder { color:var(--text-muted); }
.search-bar input:focus { border-color:var(--accent); outline:none; }
.search-bar svg,.search-bar .search-icon {
    position:absolute; left:14px; top:12px; width:16px; height:16px; color:var(--text-muted);
}

/* ═══ TOOLBAR ═══ */
.toolbar {
    padding:20px 32px 12px; display:flex; align-items:center;
    justify-content:space-between; gap:16px;
}
.toolbar-left { flex:1; min-width:0; display:flex; align-items:center; }
.actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }

.breadcrumb {
    display:flex; align-items:center; gap:2px;
    font-size:13px; color:var(--text-muted);
    overflow-x:auto; scrollbar-width:none;
}
.breadcrumb::-webkit-scrollbar { display:none; }

.crumb {
    padding:6px 12px; border-radius:var(--radius-sm); cursor:pointer;
    transition:all 0.15s; color:var(--text-muted); white-space:nowrap; font-weight:500;
}
.crumb:hover { background:var(--bg-hover); color:var(--text-main); }
.crumb.active { color:var(--text-main); background:var(--bg-hover); cursor:default; font-weight:600; }
.crumb-sep { color:var(--text-muted); opacity:0.3; }

.view-switcher {
    background:var(--bg-panel); border:1px solid var(--border);
    border-radius:var(--radius-sm); display:inline-flex; padding:3px;
    flex-shrink:0; height:40px; align-items:center;
}

/* ═══ CUSTOM SELECT ═══ */
.custom-select-wrapper { position:relative; user-select:none; width:200px; }
.custom-select-trigger {
    background:var(--bg-app); border:1px solid var(--border);
    border-radius:var(--radius); padding:0 14px; height:40px;
    display:flex; align-items:center; justify-content:space-between;
    cursor:pointer; font-size:13px; font-weight:500;
    color:var(--text-main); transition:border-color 0.15s;
}
.custom-select-trigger:hover { border-color:var(--border-highlight); }
.custom-select-trigger svg { color:var(--text-muted); transition:transform 0.2s; }
.custom-select-wrapper.open .custom-select-trigger { border-color:var(--accent); }
.custom-select-wrapper.open .custom-select-trigger svg { transform:rotate(180deg); }

.custom-select-options {
    position:absolute; top:calc(100% + 6px); left:0; width:100%;
    background:var(--bg-panel); border:1px solid var(--border);
    border-radius:var(--radius); box-shadow:var(--shadow-lg);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:all 0.2s ease; z-index:1000; padding:6px;
    display:flex; flex-direction:column; gap:2px;
}
.custom-select-wrapper.open .custom-select-options {
    opacity:1; visibility:visible; transform:translateY(0);
}

.custom-option {
    padding:8px 14px; font-size:13px; font-weight:500;
    color:var(--text-muted); border-radius:var(--radius-sm);
    cursor:pointer; transition:all 0.1s;
}
.custom-option:hover { background:var(--bg-hover); color:var(--text-main); }
.custom-option.selected { background:var(--bg-hover); color:var(--text-main); font-weight:600; }

.view-btn {
    width:34px; height:34px; display:flex; align-items:center; justify-content:center;
    color:var(--text-muted); border-radius:var(--radius-sm); cursor:pointer;
    transition:all 0.15s;
}
.view-btn svg { width:18px; height:18px; }
.view-btn:hover { color:var(--text-main); background:var(--bg-hover); }
.view-btn.active { background:var(--bg-hover); color:var(--text-main); }

/* ═══ GRID ═══ */
.app-body { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.file-area { flex:1; min-height:0; overflow-y:auto; padding:12px 32px 32px; }
.grid-view { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; }

.file-card {
    background:var(--bg-panel); border:1px solid var(--border);
    border-radius:var(--radius); padding:12px; cursor:pointer;
    transition:all 0.15s; display:flex; flex-direction:column; position:relative;
}
.file-card:hover { border-color:var(--border-highlight); background:#252528; }

.preview-box {
    background:var(--bg-app); border:1px solid var(--border);
    border-radius:var(--radius-sm); aspect-ratio:16/10;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; margin-bottom:10px; position:relative; transition:border-color 0.15s;
}
.preview-box img { width:100%; height:100%; object-fit:contain; }
.file-card:hover .preview-box { border-color:var(--border-highlight); }
.preview-box svg { width:28px; height:28px; color:var(--text-muted); opacity:0.5; transition:all 0.15s; }
.file-card:hover .preview-box svg { color:var(--accent); opacity:1; }

.file-info .name {
    font-size:13px; font-weight:500; color:var(--text-main);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px;
}
.file-info .meta { font-size:11px; color:var(--text-muted); }

/* ═══ MULTI-SELECT ═══ */
.file-card.selected { border-color:var(--accent); background:rgba(4,133,247,0.08); }
.file-card.drag-over { border-color:var(--accent); background:rgba(4,133,247,0.12); }
.file-card.selected .preview-box { border-color:var(--accent); }
.file-card.selected::before {
    content:''; position:absolute; top:8px; left:8px; width:16px; height:16px;
    background:var(--accent); border-radius:4px; z-index:5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size:10px; background-position:center; background-repeat:no-repeat;
}

/* List View */
.list-view { display:flex; flex-direction:column; gap:4px; }
.list-view .file-card {
    flex-direction:row; align-items:center; gap:16px; padding:10px 16px;
    height:56px; background:transparent; border-color:transparent;
}
.list-view .file-card:hover { background:var(--bg-panel); border-color:var(--border); transform:none; }
.list-view .preview-box {
    width:36px; height:36px; margin-bottom:0; aspect-ratio:1;
    background:var(--bg-panel); border:1px solid var(--border);
}
.list-view .preview-box svg { width:18px; height:18px; }
.list-view .file-info { flex:1; display:flex; align-items:center; justify-content:space-between; }
.list-view .name { font-size:13px; margin-bottom:0; }
.list-view .meta { text-align:right; }

/* ═══ CONTEXT MENU ═══ */
#context-menu {
    position:fixed; background:var(--bg-panel); border:1px solid var(--border);
    box-shadow:var(--shadow-lg); border-radius:var(--radius); padding:6px;
    z-index:1000; min-width:200px;
}
.ctx-item {
    display:flex; align-items:center; gap:10px; padding:8px 12px;
    font-size:13px; border-radius:var(--radius-sm); color:var(--text-main);
    cursor:pointer; transition:background 0.1s;
}
.ctx-item svg { width:16px; height:16px; color:var(--text-muted); }
.ctx-item:hover { background:var(--bg-hover); }
.ctx-item:hover svg { color:var(--text-main); }
.ctx-item.delete:hover { background:rgba(239,68,68,0.15); color:var(--danger); }
.ctx-item.delete:hover svg { color:var(--danger); }

/* ═══ UPLOAD STATUS ═══ */
.upload-status {
    position:fixed; bottom:24px; right:24px; background:var(--bg-panel);
    border:1px solid var(--border); padding:14px 20px; border-radius:var(--radius);
    display:flex; align-items:center; gap:16px;
    box-shadow:var(--shadow-lg); z-index:200; font-size:13px;
}
.progress-bar { width:200px; height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.progress-fill { height:100%; background:var(--accent); width:0%; transition:width 0.2s linear; }

/* Mass Actions Bar */
.mass-action-bar {
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(100px);
    background:var(--bg-panel); border:1px solid var(--border);
    padding:12px 24px; border-radius:20px;
    display:flex; align-items:center; gap:20px;
    box-shadow:var(--shadow-lg); z-index:200;
    opacity:0; visibility:hidden; transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.mass-action-bar.visible { transform:translateX(-50%) translateY(0); opacity:1; visibility:visible; }
.mass-info { font-size:13px; font-weight:500; }
.mass-info span {
    color:var(--bg-app); background:var(--text-main);
    padding:2px 8px; border-radius:8px; font-weight:700; margin-right:6px; font-size:11px;
}
.mass-actions { display:flex; align-items:center; }

/* Drop Zone */
.drop-zone {
    border:2px dashed var(--border); padding:40px; text-align:center;
    border-radius:var(--radius); height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    transition:border-color 0.2s; background:transparent;
}
.drop-zone:hover { border-color:var(--accent); }
.drop-zone svg { width:48px; height:48px; color:var(--text-muted); opacity:0.3; margin-bottom:16px; }
.drop-zone h3 { color:var(--text-main); margin-bottom:6px; font-weight:500; font-size:15px; }
.drop-zone p { color:var(--text-muted); font-size:13px; }

/* Loading */
.loading { display:flex; justify-content:center; padding:40px; }
.spinner {
    width:28px; height:28px; border:2px solid var(--border);
    border-top-color:var(--text-muted); border-radius:50%;
    animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.empty-state {
    height:60vh; display:flex; flex-direction:column;
    align-items:center; justify-content:center; color:var(--text-muted);
}
.empty-state svg { width:48px; height:48px; margin-bottom:16px; opacity:0.25; color:var(--text-muted); }
.empty-state h3 { margin-bottom:6px; font-weight:500; font-size:15px; color:var(--text-main); }
.empty-state p { font-size:13px; }

/* Modal */
.modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.6);
    display:flex; align-items:center; justify-content:center;
    z-index:9999; backdrop-filter:blur(4px);
}
.modal {
    width:100%; max-width:420px; background:var(--bg-panel);
    padding:28px; border-radius:24px; border:1px solid var(--border);
    box-shadow:0 0 60px rgba(0,0,0,0.8); animation:modalPop 0.15s ease-out;
}
@keyframes modalPop { from { transform:scale(0.96); opacity:0; } to { transform:scale(1); opacity:1; } }
.modal h2 { margin-bottom:6px; font-size:18px; font-weight:700; }
.modal .desc { color:var(--text-muted); font-size:13px; margin-bottom:24px; }
.modal-body { margin-bottom:20px; }
.modal-body input {
    width:100%; background:var(--bg-app); border:1px solid var(--border);
    color:var(--text-main); padding:12px 16px; border-radius:var(--radius);
    font-size:13px; font-family:inherit; transition:border-color 0.15s;
}
.modal-body input:focus { border-color:var(--accent); outline:none; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; }

/* Spinner Small */
.spinner-sm { width:16px; height:16px; border-width:2px; border-color:var(--border); border-top-color:var(--text-main); }

/* Toast */
.toast {
    background:var(--bg-panel); border:1px solid var(--border);
    color:var(--text-main); padding:10px 16px; border-radius:var(--radius);
    font-size:13px; box-shadow:var(--shadow-md);
    pointer-events:auto; animation:toastSlide 0.25s ease;
}
@keyframes toastSlide { from { transform:translateY(16px); opacity:0; } to { transform:translateY(0); opacity:1; } }

/* ═══ HIGHLIGHT ═══ */
@keyframes highlightPulse {
    0% { box-shadow:0 0 0 0 rgba(4,133,247,0.3); border-color:var(--border); }
    50% { box-shadow:0 0 12px 0 rgba(4,133,247,0.4); border-color:var(--accent); }
    100% { box-shadow:0 0 0 0 rgba(4,133,247,0); border-color:var(--border); }
}
.file-card.highlight {
    animation:highlightPulse 2s cubic-bezier(0.4,0,0.6,1) infinite;
    border-color:var(--accent); z-index:10;
}
.file-card.highlight::after {
    content:'NEW'; position:absolute; top:-6px; right:-6px;
    background:var(--accent); color:var(--accent-text);
    font-size:10px; font-weight:700; padding:2px 8px;
    border-radius:8px; z-index:20; pointer-events:none;
}

/* Mobile */
@media(max-width:768px) {
    .search-bar { display:none; }
    .logo-text { display:none; }
    .app-header { padding:0 16px; }
    .toolbar { padding:16px; flex-direction:column; gap:12px; align-items:stretch; }
    .toolbar-left, .actions { width:100%; justify-content:space-between; }
    .file-area { padding:12px 16px 16px; }
    .grid-view { grid-template-columns:repeat(2,1fr); gap:10px; }
    .btn .btn-text { display:none; }
}