/* RESET & BASE STYLES */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

        :root {
            --primary-color: #2563eb;
            --primary-hover: #1d4ed8;
            --bg-body: #f8fafc;
            --bg-sidebar: #ffffff;
            --text-main: #1e293b;
            --text-muted: #64748b;
            --border-color: #e2e8f0;
            --card-bg: #ffffff;
            --sidebar-width: 260px;
            --danger: #ef4444;
            --success: #10b981;
            --office-blue: #2b579a;
        }

        body {
            background-color: var(--bg-body);
            color: var(--text-main);
            overflow: hidden;
            user-select: none;
        }

        .container { display: flex; height: 100vh; width: 100vw; }

        /* SIDEBAR */
        .sidebar {
            width: var(--sidebar-width);
            background: var(--bg-sidebar);
            border-right: 1px solid var(--border-color);
            padding: 2rem 1rem;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
        }

        .logo {
            font-size: 1.25rem;
            font-weight: 800;
            color: var(--primary-color);
            margin-bottom: 2.5rem;
            display: flex;
            align-items: center; gap: 10px; padding-left: 1rem;
        }

        .sidebar nav ul { list-style: none; }
        .sidebar nav ul li a {
            text-decoration: none; color: var(--text-muted); padding: 0.75rem 1rem;
            display: flex; align-items: center; gap: 12px; border-radius: 8px;
            cursor: pointer; transition: 0.2s; margin-bottom: 4px;
            font-size: 0.95rem;
        }
        .sidebar nav ul li a:hover, .sidebar nav ul li a.active {
            background: #f1f5f9; color: var(--primary-color);
        }

        /* MAIN CONTENT */
        .main-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
        .content-section { display: none; padding: 2rem; height: 100%; overflow-y: auto; }
        .content-section.active { display: block; animation: fadeIn 0.3s ease; }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

        /* STORAGE BAR */
        .storage-container { margin-top: auto; padding: 1rem; }
        .storage-info { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.6rem; }
        .progress-bg { height: 10px; background: #f1f5f9; border-radius: 100px; overflow: hidden; border: 1px solid var(--border-color); }
        .progress-fill { height: 100%; background: linear-gradient(to right, #2563eb, #60a5fa); width: 0%; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }

.dashboard-banner{
background: linear-gradient(135deg,#0f172a 0%,#1e3a8a 60%,#2563eb 100%);
border-radius:28px;
padding:3rem 3.5rem;
color:white;
position:relative;
overflow:hidden;
margin-bottom:2rem;
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

.banner-actions{
display:flex;
gap:12px;
margin-top:18px;
}

.dashboard-grid{
display:grid;
grid-template-columns:1fr 2fr;
gap:1.5rem;
}

.stat-card,
.utility-card{
background:white;
border-radius:20px;
padding:1.75rem;
border:1px solid #e2e8f0;
}

.circular-container{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}

.circular-progress{
width:160px;
height:160px;
border-radius:50%;
background:conic-gradient(#2563eb 0deg,#f1f5f9 0deg);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:1rem;
position:relative;
}

.circular-progress::before{
content:"";
position:absolute;
width:125px;
height:125px;
background:white;
border-radius:50%;
}

.circular-value{
font-size:1.8rem;
font-weight:700;
color:#2563eb;
position:relative;
z-index:2;
}

.utility-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:1rem;
margin-top:12px;
}

.util-item{
display:flex;
gap:14px;
padding:1rem;
border-radius:14px;
border:1px solid #e2e8f0;
cursor:pointer;
transition:0.25s;
background:white;
}

.util-item:hover{
border-color:#2563eb;
transform:translateY(-3px);
box-shadow:0 8px 20px rgba(0,0,0,0.05);
}

.util-icon{
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
}

.blue{background:#eff6ff;color:#2563eb;}
.red{background:#fef2f2;color:#ef4444;}
.green{background:#f0fdf4;color:#10b981;}
.orange{background:#fff7ed;color:#f59e0b;}

.util-title{
font-weight:700;
font-size:0.9rem;
}

.util-desc{
font-size:0.8rem;
color:#64748b;
}

.btn-tool{
padding:10px 18px;
border-radius:10px;
border:none;
cursor:pointer;
display:flex;
align-items:center;
gap:6px;
transition:0.2s;
}

.btn-primary{
background:#3b82f6;
color:white;
}

.btn-primary:hover{
background:#2563eb;
transform:translateY(-2px);
}

.btn-glass{
background:rgba(255,255,255,0.18);
color:white;
border:1px solid rgba(255,255,255,0.25);
}

.btn-glass:hover{
background:rgba(255,255,255,0.28);
}
        /* EXPLORER GRID */
        .file-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, 120px); 
            gap: 1.5rem; 
            padding: 1.5rem; 
            min-height: 400px; 
            align-content: start;
        }
        
        .file-item { 
            display: flex; flex-direction: column; align-items: center; 
            width: 120px; height: 120px;
            padding: 1rem; 
            border-radius: 16px; cursor: grab; text-align: center; transition: 0.2s; 
            border: 2px solid transparent; 
            justify-content: center;
        }
        .file-item:active { cursor: grabbing; }
        .file-item:hover { background: #f8fafc; border-color: #f1f5f9; }
        .file-item.selected { background: #eff6ff; border-color: var(--primary-color); }
        .file-item.drag-over { background: #dbeafe; border-color: var(--primary-color); transform: scale(1.05); }
        
        .file-item i { width: 48px; height: 48px; margin-bottom: 8px; pointer-events: none; }
        .file-folder { color: #fbbf24; }
        .file-doc { color: #94a3b8; }
        .file-office { color: var(--office-blue); }
        .file-name { font-size: 0.75rem; font-weight: 600; width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        /* TOOLBAR */
        .explorer-toolbar { display: flex; gap: 10px; margin-bottom: 1.25rem; background: white; border: 1px solid var(--border-color); padding: 0.6rem; border-radius: 12px; align-items: center; }
        .btn-tool { padding: 10px 18px; border: 1px solid var(--border-color); background: white; border-radius: 10px; cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; gap: 10px; transition: 0.2s; color: var(--text-main); font-weight: 500; }
        .btn-tool:hover { background: #f8fafc; border-color: var(--primary-color); color: var(--primary-color); }
        .btn-primary { background: var(--primary-color) !important; color: white !important; border: none; }
        
        .btn-danger-outline {
            padding: 10px 18px;
            border: 1px solid #fee2e2;
            background: #fff;
            color: var(--danger);
            border-radius: 10px;
            transition: 0.3s;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.85rem;
            font-weight: 500;
        }
        .btn-danger-outline:hover {
            background: #fef2f2;
            border-color: var(--danger);
        }

        /* TRASH BIN SPECIFIC */
        .btn-trash { margin-left: auto; }
        .btn-trash.drag-over {
            background: #fee2e2;
            border-color: var(--danger);
            transform: scale(1.1);
        }

        /* NOTES LAYOUT - SỬ DỤNG GRID ĐỂ ĐIỀU CHỈNH TỈ LỆ 1fr 3fr */
        .notes-layout { 
            display: grid;
            grid-template-columns: 1fr 3fr; /* Tỉ lệ mặc định */
            gap: 1.5rem; 
            height: calc(100vh - 120px);
            transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Hiệu ứng chuyển cảnh mượt */
        }

        /* Khi hover vào khu vực danh sách ghi chú, mở rộng ra tỉ lệ 2fr 3fr */
        .notes-layout:has(.pane-list:hover) {
            grid-template-columns: 2fr 3fr;
        }

        .pane-list {
            background: white; 
            border: 1px solid var(--border-color); 
            border-radius: 16px; 
            display: flex; 
            flex-direction: column;
            overflow: hidden; /* Bỏ resize tay */
            min-width: 0; /* Cho phép co giãn mượt trong Grid */
        }

        .pane-editor {
            background: white; 
            border: 1px solid var(--border-color); 
            border-radius: 16px; 
            overflow: hidden; 
            display: flex; 
            flex-direction: column;
            min-width: 0;
        }

        .pane-header { padding: 1.25rem; border-bottom: 1px solid var(--border-color); font-weight: 600; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
        
        .note-card { padding: 1.25rem; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: 0.2s; position: relative; }
        .note-card:hover { background: #f8fafc; }
        .note-card.active { background: #eff6ff; border-left: 4px solid var(--primary-color); }
        .note-card-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .note-card-preview { font-size: 0.75rem; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

        /* EDITOR */
        .editor-container { padding: 2.5rem; display: flex; flex-direction: column; height: 100%; position: relative; }
        .editor-toolbar { display: flex; gap: 10px; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); align-items: center; }
        #editTitle { font-size: 1.75rem; font-weight: 800; border: none; outline: none; width: 100%; margin-bottom: 1rem; background: transparent; }
        #editContent { flex: 1; border: none; outline: none; font-size: 1.1rem; resize: none; line-height: 1.7; width: 100%; background: transparent; }
        [readonly] { color: var(--text-main); }

        /* PROGRESS MODAL */
        .upload-progress-modal {
            position: fixed; bottom: 24px; right: 24px; width: 320px;
            background: white; border-radius: 16px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2);
            padding: 1.5rem; z-index: 4000; border: 1px solid var(--border-color);
            display: none;
        }

        /* TOAST & MODAL */
        .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 12px 24px; background: #1e293b; color: white; border-radius: 100px; display: none; z-index: 5000; font-size: 0.9rem; }
        .modal { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 6000; }
        .modal.active { display: flex; }
        .modal-body { background: white; padding: 2rem; border-radius: 20px; width: 400px; }