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

:root{
  --primary:#4285f4;--primary-dark:#3367d6;--secondary:#34a853;--accent:#ea4335;--warning:#fbbc04;
  --bg-primary:#fff;--bg-secondary:#f8f9fa;--bg-tertiary:#e8eaed;
  --text-primary:#202124;--text-secondary:#5f6368;--border:#dadce0;
  --shadow:0 2px 10px rgba(0,0,0,0.1);--shadow-lg:0 8px 30px rgba(0,0,0,0.12);
  --radius:12px;--radius-lg:20px;--transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* Light Theme */
[data-theme="light"]{
  --bg-primary:#fff;--bg-secondary:#f8f9fa;--bg-tertiary:#e8eaed;
  --text-primary:#202124;--text-secondary:#5f6368;--border:#dadce0;
}

/* Dark Theme */
[data-theme="dark"]{
  --bg-primary:#1a1a2e;--bg-secondary:#16213e;--bg-tertiary:#0f3460;
  --text-primary:#eaeaea;--text-secondary:#a0a0a0;--border:#2a2a4a;
  --shadow:0 2px 10px rgba(0,0,0,0.3);
}

/* Midnight Theme */
[data-theme="midnight"]{
  --primary:#6366f1;--primary-dark:#4f46e5;--secondary:#8b5cf6;
  --bg-primary:#0f0f23;--bg-secondary:#1a1a3e;--bg-tertiary:#252552;
  --text-primary:#e0e0ff;--text-secondary:#9090c0;--border:#3a3a6a;
  --shadow:0 2px 10px rgba(0,0,0,0.4);
}

/* Sunset Theme */
[data-theme="sunset"]{
  --primary:#f97316;--primary-dark:#ea580c;--secondary:#eab308;
  --bg-primary:#1c1917;--bg-secondary:#292524;--bg-tertiary:#3d3733;
  --text-primary:#fef3c7;--text-secondary:#d6d3d1;--border:#57534e;
  --shadow:0 2px 10px rgba(0,0,0,0.3);
}

/* Forest Theme */
[data-theme="forest"]{
  --primary:#22c55e;--primary-dark:#16a34a;--secondary:#84cc16;
  --bg-primary:#0f1f0f;--bg-secondary:#1a2f1a;--bg-tertiary:#254025;
  --text-primary:#d4f4d4;--text-secondary:#a0c0a0;--border:#3a5a3a;
  --shadow:0 2px 10px rgba(0,0,0,0.3);
}

/* Ocean Theme */
[data-theme="ocean"]{
  --primary:#06b6d4;--primary-dark:#0891b2;--secondary:#0ea5e9;
  --bg-primary:#0c1929;--bg-secondary:#132f4c;--bg-tertiary:#1e4976;
  --text-primary:#d0f0ff;--text-secondary:#90c0e0;--border:#2a5080;
  --shadow:0 2px 10px rgba(0,0,0,0.3);
}

/* Material Style */
[data-style="material"]{--radius:28px;--radius-lg:32px}
[data-style="material"] .file-item{border-radius:16px;padding:20px}
[data-style="material"] .file-item .file-icon{border-radius:50%;width:80px;height:80px;margin:0 auto 16px}
[data-style="material"] .btn{border-radius:24px;padding:14px 28px}
[data-style="material"] .modal-content{border-radius:28px}
[data-style="material"] .sidebar{border-radius:0 32px 32px 0}
[data-style="material"] .top-header{border-radius:28px}
[data-style="material"] .floating-navbar{border-radius:32px}
[data-style="material"] .nav-btn{border-radius:50%}
[data-style="material"] .text-input{border-radius:16px}
[data-style="material"] .breadcrumb-item{border-radius:20px}

body{font-family:'Inter',sans-serif;background:var(--bg-secondary);color:var(--text-primary);min-height:100vh;overflow-x:hidden;transition:var(--transition)}

/* Auth */
.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:20px;position:relative;overflow:hidden}
.auth-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.auth-particle{position:absolute;width:10px;height:10px;background:rgba(255,255,255,0.3);border-radius:50%;animation:floatParticle 15s infinite}
.auth-particle:nth-child(1){left:10%;animation-delay:0s;animation-duration:12s}
.auth-particle:nth-child(2){left:20%;animation-delay:2s;animation-duration:14s;width:14px;height:14px}
.auth-particle:nth-child(3){left:30%;animation-delay:4s;animation-duration:16s}
.auth-particle:nth-child(4){left:40%;animation-delay:1s;animation-duration:13s;width:8px;height:8px}
.auth-particle:nth-child(5){left:50%;animation-delay:3s;animation-duration:15s;width:12px;height:12px}
.auth-particle:nth-child(6){left:60%;animation-delay:5s;animation-duration:17s}
.auth-particle:nth-child(7){left:70%;animation-delay:2s;animation-duration:14s;width:16px;height:16px}
.auth-particle:nth-child(8){left:80%;animation-delay:4s;animation-duration:16s}
.auth-particle:nth-child(9){left:90%;animation-delay:1s;animation-duration:12s}
@keyframes floatParticle{0%{transform:translateY(100vh) rotate(0deg);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100vh) rotate(720deg);opacity:0}}

.auth-box{background:rgba(255,255,255,0.95);border-radius:24px;padding:48px 40px;width:100%;max-width:440px;box-shadow:0 25px 50px rgba(0,0,0,0.25);position:relative;z-index:10;animation:authBoxAppear 0.8s cubic-bezier(0.34,1.56,0.64,1);backdrop-filter:blur(10px)}
[data-theme="dark"] .auth-box,[data-theme="midnight"] .auth-box,[data-theme="sunset"] .auth-box,[data-theme="forest"] .auth-box,[data-theme="ocean"] .auth-box{background:rgba(26,26,46,0.95)}
@keyframes authBoxAppear{0%{opacity:0;transform:translateY(50px) scale(0.9)}100%{opacity:1;transform:translateY(0) scale(1)}}

.auth-header{text-align:center;margin-bottom:36px}
.auth-header .logo-icon{width:80px;height:80px;background:linear-gradient(135deg,var(--primary) 0%,#764ba2 100%);border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;animation:logoFloat 3s ease-in-out infinite;box-shadow:0 10px 30px rgba(102,126,234,0.4)}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.auth-header .logo-icon i{font-size:2.5rem;color:white}
.auth-header h1{font-size:2rem;font-weight:700;margin-bottom:8px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.auth-header p{color:var(--text-secondary);font-size:0.95rem}

.auth-form h2{font-size:1.4rem;margin-bottom:24px;text-align:center;font-weight:600}
.form-group{margin-bottom:20px;animation:formFieldAppear 0.5s ease-out backwards}
.form-group:nth-child(1){animation-delay:0.1s}
.form-group:nth-child(2){animation-delay:0.2s}
.form-group:nth-child(3){animation-delay:0.3s}
@keyframes formFieldAppear{0%{opacity:0;transform:translateX(-30px)}100%{opacity:1;transform:translateX(0)}}
.form-group label{display:block;margin-bottom:8px;font-weight:500;font-size:0.9rem}
.form-group .input-wrapper{position:relative}
.form-group .input-wrapper i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-secondary);transition:var(--transition)}
.form-group input{width:100%;padding:14px 16px 14px 48px;border:2px solid var(--border);border-radius:var(--radius);font-size:1rem;background:var(--bg-primary);color:var(--text-primary);transition:var(--transition)}
.form-group input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 4px rgba(66,133,244,0.15)}
.form-group input:focus~i{color:var(--primary)}

.auth-form .btn{margin-top:8px;padding:16px;font-size:1rem}
.auth-switch{text-align:center;margin-top:24px;color:var(--text-secondary);font-size:0.95rem}
.auth-switch a{color:var(--primary);text-decoration:none;font-weight:600}
.auth-error{background:rgba(234,67,53,0.1);color:var(--accent);text-align:center;margin-top:20px;font-size:0.9rem;padding:12px;border-radius:var(--radius);display:none}
.auth-error.show{display:block;animation:shake 0.5s}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}

.auth-features{display:flex;justify-content:center;gap:30px;margin-top:30px;padding-top:24px;border-top:1px solid var(--border)}
.auth-feature{display:flex;align-items:center;gap:8px;font-size:0.85rem;color:var(--text-secondary)}
.auth-feature i{color:var(--secondary)}

/* App Layout */
.app-container{display:flex;min-height:100vh;padding:16px;gap:16px}

/* Sidebar */
.sidebar{width:280px;background:var(--bg-primary);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;position:fixed;height:calc(100vh - 32px);z-index:100;transition:var(--transition);box-shadow:var(--shadow);transform:translateX(-120%)}
.sidebar.active{transform:translateX(0)}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:90;backdrop-filter:blur(4px)}
.sidebar-overlay.active{display:block}
@media(min-width:1200px){.sidebar{transform:translateX(0);position:sticky;top:16px;flex-shrink:0}.sidebar-overlay{display:none!important}.menu-toggle{display:none!important}}

.sidebar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.logo{display:flex;align-items:center;gap:12px;font-size:1.3rem;font-weight:700;color:var(--primary)}
.logo i{font-size:1.6rem}
.close-sidebar{display:block;background:none;border:none;font-size:1.3rem;color:var(--text-secondary);cursor:pointer;padding:8px;border-radius:var(--radius);transition:var(--transition)}
.close-sidebar:hover{background:var(--bg-secondary)}
@media(min-width:1200px){.close-sidebar{display:none}}

.user-info{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg-secondary);border-radius:var(--radius);margin-bottom:20px}
.user-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#764ba2);color:white;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.user-details{flex:1;min-width:0}
.user-name{display:block;font-weight:600;font-size:0.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-email{display:block;font-size:0.8rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sidebar-nav{flex:1;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--radius);color:var(--text-secondary);text-decoration:none;margin-bottom:6px;transition:var(--transition)}
.nav-item:hover{background:var(--bg-secondary);color:var(--text-primary)}
.nav-item.active{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 4px 15px rgba(66,133,244,0.4)}
.nav-item i{width:24px;text-align:center;font-size:1.1rem}
.nav-section{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.nav-section-title{font-size:0.75rem;text-transform:uppercase;color:var(--text-secondary);padding:8px 18px;letter-spacing:0.5px;font-weight:600}

.storage-info{padding:20px;background:var(--bg-secondary);border-radius:var(--radius);margin-top:auto}
.storage-bar{height:8px;background:var(--bg-tertiary);border-radius:4px;overflow:hidden;margin-bottom:10px}
.storage-used{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:4px;transition:var(--transition)}
.storage-info p{font-size:0.85rem;color:var(--text-secondary)}
.sidebar-footer{margin-top:16px}

/* Main Content */
.main-content{flex:1;display:flex;flex-direction:column;min-height:calc(100vh - 32px)}

.top-header{background:var(--bg-primary);padding:16px 24px;display:flex;align-items:center;gap:20px;border-radius:var(--radius-lg);position:sticky;top:16px;z-index:50;box-shadow:var(--shadow);margin-bottom:16px}
.menu-toggle{background:none;border:none;font-size:1.4rem;color:var(--text-secondary);cursor:pointer;padding:8px;border-radius:var(--radius);transition:var(--transition)}
.menu-toggle:hover{background:var(--bg-secondary);color:var(--primary)}

.breadcrumb{display:flex;align-items:center;gap:8px;flex:1;overflow-x:auto;scrollbar-width:none}
.breadcrumb::-webkit-scrollbar{display:none}
.breadcrumb-item{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-secondary);border-radius:var(--radius);color:var(--text-secondary);font-size:0.9rem;cursor:pointer;transition:var(--transition);white-space:nowrap;border:none}
.breadcrumb-item:hover{background:var(--bg-tertiary);color:var(--text-primary)}
.breadcrumb-item.active{background:var(--primary);color:#fff}
.breadcrumb-separator{color:var(--text-secondary);font-size:0.8rem}

.header-actions{display:flex;gap:10px}
.header-actions button{width:42px;height:42px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-primary);color:var(--text-secondary);cursor:pointer;transition:var(--transition)}
.header-actions button:hover{background:var(--bg-secondary);color:var(--primary)}

.content-area{flex:1;padding-bottom:100px}
.section-title{font-size:1.4rem;font-weight:600;margin-bottom:20px}

/* Files */
.files-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;animation:fadeIn 0.4s}
.files-container.list-view{grid-template-columns:1fr;gap:8px}

.file-item{background:var(--bg-primary);border-radius:var(--radius-lg);padding:16px;cursor:pointer;transition:var(--transition);border:2px solid transparent;position:relative;box-shadow:var(--shadow)}
.file-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary)}
.file-item.selected{border-color:var(--primary);background:rgba(66,133,244,0.1)}
.file-item .file-icon{width:100%;height:100px;display:flex;align-items:center;justify-content:center;font-size:3.5rem;margin-bottom:12px;border-radius:var(--radius);background:var(--bg-secondary)}
.file-item .file-name{font-weight:500;font-size:0.95rem;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-item .file-info{font-size:0.8rem;color:var(--text-secondary);display:flex;justify-content:space-between}
.file-item .star-badge{position:absolute;top:12px;right:12px;color:var(--warning);font-size:1rem;opacity:0;transition:var(--transition)}
.file-item.starred .star-badge{opacity:1}
.file-item .share-badge{position:absolute;top:12px;left:44px;color:var(--primary);font-size:0.85rem}
.file-item.starred .share-badge{left:12px;top:36px}
.file-item .file-checkbox{position:absolute;top:12px;left:12px;width:22px;height:22px;border-radius:6px;border:2px solid var(--border);background:var(--bg-primary);cursor:pointer;opacity:0;transition:var(--transition);display:flex;align-items:center;justify-content:center}
.file-item:hover .file-checkbox,.file-item.selected .file-checkbox{opacity:1}
.file-item.selected .file-checkbox{background:var(--primary);border-color:var(--primary);color:#fff}
.file-menu-btn{position:absolute;top:8px;right:8px;width:32px;height:32px;border:none;background:var(--bg-primary);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);opacity:0;transition:var(--transition);z-index:10;box-shadow:var(--shadow)}
.file-item:hover .file-menu-btn{opacity:1}
.file-menu-btn:hover{background:var(--bg-tertiary);color:var(--primary)}

.files-container.list-view .file-item{display:flex;align-items:center;gap:16px;padding:12px 20px}
.files-container.list-view .file-item .file-icon{width:48px;height:48px;font-size:1.5rem;margin-bottom:0;flex-shrink:0}
.files-container.list-view .file-item .file-name{margin-bottom:0;flex:1}
.files-container.list-view .file-item .file-info{width:200px}
.files-container.list-view .file-menu-btn{position:relative;top:auto;right:auto;opacity:1;box-shadow:none}

/* Floating Navbar */
.floating-navbar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--bg-primary);padding:12px 20px;border-radius:var(--radius-lg);display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-lg);border:1px solid var(--border);z-index:1000}
.nav-btn{width:50px;height:50px;border-radius:var(--radius);border:none;cursor:pointer;font-size:1.3rem;transition:var(--transition);display:flex;align-items:center;justify-content:center}
.upload-btn{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 4px 15px rgba(66,133,244,0.4)}
.upload-btn:hover{transform:scale(1.1)}
.settings-btn{background:var(--bg-secondary);color:var(--text-secondary)}
.settings-btn:hover{background:var(--bg-tertiary);color:var(--primary);transform:rotate(45deg)}
.search-container{display:flex;align-items:center;background:var(--bg-secondary);border-radius:var(--radius);padding:0 16px;min-width:300px;border:2px solid transparent;transition:var(--transition)}
.search-container:focus-within{border-color:var(--primary);background:var(--bg-primary)}
.search-container i{color:var(--text-secondary)}
.search-container input{flex:1;border:none;background:none;padding:14px 12px;font-size:0.95rem;color:var(--text-primary);outline:none}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:2000;opacity:0;visibility:hidden;transition:var(--transition);backdrop-filter:blur(4px);padding:20px}
.modal.active{opacity:1;visibility:visible}
.modal-content{background:var(--bg-primary);border-radius:var(--radius-lg);width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;transform:scale(0.9) translateY(20px);transition:var(--transition);box-shadow:var(--shadow-lg)}
.modal.active .modal-content{transform:scale(1) translateY(0)}
.modal-content.modal-small{max-width:420px}
.modal-content.modal-large{max-width:800px}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0}
.modal-header h2{font-size:1.3rem;font-weight:600;display:flex;align-items:center;gap:10px}
.modal-header h2 i{color:var(--primary)}
.modal-close{width:36px;height:36px;border-radius:50%;border:none;background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--accent);color:#fff}
.modal-body{padding:24px;overflow-y:auto;flex:1}
.modal-actions{display:flex;gap:12px;margin-top:20px;justify-content:flex-end}

/* Settings Modal */
.settings-modal-body{padding:0;display:flex;flex-direction:column}
.settings-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 24px;gap:8px}
.settings-tab{padding:16px 20px;background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:0.95rem;font-weight:500;display:flex;align-items:center;gap:8px;border-bottom:3px solid transparent;margin-bottom:-1px;transition:var(--transition)}
.settings-tab:hover{color:var(--text-primary)}
.settings-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.settings-tab i{font-size:1.1rem}

.settings-content{padding:24px;overflow-y:auto;flex:1}
.settings-panel{display:none}
.settings-panel.active{display:block}
.settings-section{margin-bottom:32px}
.settings-section h3{font-size:1rem;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:10px;color:var(--text-primary)}
.settings-section h3 i{color:var(--primary);font-size:1.1rem}

/* Theme Style Selector */
.theme-style-selector{display:flex;gap:16px}
.theme-style-option{cursor:pointer;text-align:center;padding:12px;border-radius:var(--radius);border:2px solid var(--border);transition:var(--transition);flex:1}
.theme-style-option:hover{border-color:var(--primary)}
.theme-style-option.active{border-color:var(--primary);background:rgba(66,133,244,0.1)}
.theme-style-preview{width:100%;height:80px;border-radius:8px;overflow:hidden;display:flex;margin-bottom:8px;background:var(--bg-tertiary)}
.theme-style-preview .preview-sidebar{width:30%;background:var(--bg-secondary)}
.theme-style-preview .preview-content{flex:1;padding:8px;display:flex;flex-direction:column;gap:8px}
.theme-style-preview .preview-header{height:16px;background:var(--bg-secondary);border-radius:4px}
.theme-style-preview .preview-files{display:flex;gap:8px;flex:1}
.theme-style-preview .preview-file{flex:1;background:var(--bg-secondary);border-radius:4px}
.material-preview .preview-sidebar{border-radius:0 16px 16px 0}
.material-preview .preview-header{border-radius:12px}
.material-preview .preview-file{border-radius:12px}
.theme-style-option span{font-size:0.9rem;font-weight:500}

/* Color Mode Selector */
.color-mode-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.color-mode-option{cursor:pointer;text-align:center;padding:16px 12px;border-radius:var(--radius);border:2px solid var(--border);transition:var(--transition)}
.color-mode-option:hover{border-color:var(--primary)}
.color-mode-option.active{border-color:var(--primary);background:rgba(66,133,244,0.1)}
.color-mode-preview{width:48px;height:48px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.light-mode{background:linear-gradient(135deg,#fff,#f0f0f0);color:#333;border:1px solid #ddd}
.dark-mode{background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff}
.midnight-mode{background:linear-gradient(135deg,#0f0f23,#6366f1);color:#fff}
.sunset-mode{background:linear-gradient(135deg,#1c1917,#f97316);color:#fff}
.forest-mode{background:linear-gradient(135deg,#0f1f0f,#22c55e);color:#fff}
.ocean-mode{background:linear-gradient(135deg,#0c1929,#06b6d4);color:#fff}
.color-mode-option span{font-size:0.85rem;font-weight:500}

/* View Selector */
.view-selector{display:flex;gap:12px}
.view-option{flex:1;padding:16px;border:2px solid var(--border);border-radius:var(--radius);background:var(--bg-primary);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;transition:var(--transition)}
.view-option:hover{border-color:var(--primary)}
.view-option.active{border-color:var(--primary);background:rgba(66,133,244,0.1)}
.view-option i{font-size:1.5rem;color:var(--primary)}
.view-option span{font-size:0.9rem;font-weight:500}

/* Behavior Options */
.behavior-options{display:flex;flex-direction:column;gap:16px}
.behavior-option{display:flex;align-items:center;justify-content:space-between;padding:16px;background:var(--bg-secondary);border-radius:var(--radius)}
.behavior-info{flex:1}
.behavior-title{display:block;font-weight:500;margin-bottom:4px}
.behavior-desc{font-size:0.85rem;color:var(--text-secondary)}

/* Account Card */
.account-info-card{display:flex;align-items:center;gap:20px;padding:20px;background:var(--bg-secondary);border-radius:var(--radius)}
.account-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#764ba2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.8rem}
.account-details{flex:1}
.account-field{margin-bottom:8px}
.account-field:last-child{margin-bottom:0}
.account-field label{display:block;font-size:0.8rem;color:var(--text-secondary);margin-bottom:2px}
.account-field span{font-weight:500}

/* Storage Card */
.storage-card{display:flex;align-items:center;gap:24px;padding:20px;background:var(--bg-secondary);border-radius:var(--radius)}
.storage-visual{flex-shrink:0}
.storage-circle{width:100px;height:100px;position:relative}
.storage-circle svg{width:100%;height:100%;transform:rotate(-90deg)}
.storage-circle .storage-bg{fill:none;stroke:var(--bg-tertiary);stroke-width:8}
.storage-circle .storage-fill{fill:none;stroke:var(--primary);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 0.5s}
.storage-percent{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:600}
.storage-details{flex:1}
.storage-stat{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)}
.storage-stat:last-child{border-bottom:none}
.stat-label{color:var(--text-secondary)}
.stat-value{font-weight:600}

/* Upload Area */
.upload-area{border:3px dashed var(--border);border-radius:var(--radius-lg);padding:50px;text-align:center;transition:var(--transition);cursor:pointer}
.upload-area:hover,.upload-area.dragover{border-color:var(--primary);background:rgba(66,133,244,0.05)}
.upload-area i{font-size:4rem;color:var(--primary);margin-bottom:16px}
.upload-area p{font-size:1.1rem;margin-bottom:8px}
.upload-area span{color:var(--text-secondary);display:block;margin-bottom:16px}
.upload-list{margin-top:20px;max-height:200px;overflow-y:auto}
.upload-item{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg-secondary);border-radius:var(--radius);margin-bottom:8px}
.upload-item .progress{flex:1;height:6px;background:var(--bg-tertiary);border-radius:3px;overflow:hidden}
.upload-item .progress-bar{height:100%;background:var(--primary);transition:width 0.3s}

/* Switch */
.switch{position:relative;width:52px;height:28px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:var(--bg-tertiary);border-radius:28px;cursor:pointer;transition:var(--transition)}
.slider::before{content:'';position:absolute;width:22px;height:22px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:var(--transition);box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.switch input:checked+.slider{background:var(--primary)}
.switch input:checked+.slider::before{transform:translateX(24px)}

/* Input */
.text-input{width:100%;padding:14px 18px;border:2px solid var(--border);border-radius:var(--radius);background:var(--bg-primary);color:var(--text-primary);font-size:1rem;outline:none;transition:var(--transition)}
.text-input:focus{border-color:var(--primary)}
select.text-input{cursor:pointer}

/* Buttons */
.btn{padding:12px 24px;border-radius:var(--radius);border:none;font-size:0.95rem;font-weight:500;cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff}
.btn.primary:hover{box-shadow:0 4px 15px rgba(66,133,244,0.4);transform:translateY(-1px)}
.btn.secondary{background:var(--bg-secondary);color:var(--text-primary)}
.btn.secondary:hover{background:var(--bg-tertiary)}
.btn.danger{background:var(--accent);color:#fff}
.btn.danger:hover{box-shadow:0 4px 15px rgba(234,67,53,0.4)}
.btn.full-width{width:100%}

/* Context Menu */
.context-menu{position:fixed;background:var(--bg-primary);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:8px 0;min-width:200px;z-index:3000;opacity:0;visibility:hidden;transform:scale(0.9);transition:var(--transition)}
.context-menu.active{opacity:1;visibility:visible;transform:scale(1)}
.context-menu button{width:100%;padding:12px 18px;border:none;background:none;color:var(--text-primary);font-size:0.9rem;text-align:left;cursor:pointer;display:flex;align-items:center;gap:12px;transition:var(--transition)}
.context-menu button:hover{background:var(--bg-secondary)}
.context-menu button i{width:18px;color:var(--text-secondary)}
.context-menu button[data-action="delete"]{color:var(--accent)}
.context-menu button[data-action="delete"] i{color:var(--accent)}

/* Toast */
.toast-container{position:fixed;bottom:100px;right:24px;z-index:4000;display:flex;flex-direction:column;gap:10px}
.toast{background:var(--bg-primary);padding:16px 24px;border-radius:var(--radius);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:12px;animation:slideIn 0.3s;border-left:4px solid var(--primary)}
.toast.success{border-color:var(--secondary)}
.toast.success i{color:var(--secondary)}
.toast.error{border-color:var(--accent)}
.toast.error i{color:var(--accent)}

/* Preview */
.preview-container{text-align:center;padding:20px;min-height:200px;display:flex;align-items:center;justify-content:center;flex-direction:column}
.preview-container img,.preview-container video{max-width:100%;max-height:60vh;border-radius:var(--radius)}
.preview-container iframe{width:100%;height:60vh;border:none;border-radius:var(--radius)}
.preview-container pre{background:var(--bg-secondary);padding:20px;border-radius:var(--radius);overflow:auto;max-height:60vh;text-align:left;white-space:pre-wrap;word-wrap:break-word;width:100%}
.preview-container audio{width:100%;margin-top:20px}
.preview-container .preview-icon{font-size:5rem;margin-bottom:20px}
.file-details{margin-top:20px;padding:20px;background:var(--bg-secondary);border-radius:var(--radius)}
.detail-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)}
.detail-row:last-child{border-bottom:none}
.detail-row span:first-child{color:var(--text-secondary)}
.preview-actions{display:flex;gap:12px;justify-content:center;margin-top:20px}

/* File Details Modal */
.file-details-icon{text-align:center;margin-bottom:20px}
.file-details-icon .details-icon{width:100px;height:100px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;margin:0 auto;font-size:3rem}
.file-details-info{background:var(--bg-secondary);padding:20px;border-radius:var(--radius)}
.shared-badge{background:rgba(66,133,244,0.1);color:var(--primary);padding:4px 12px;border-radius:20px;font-size:0.85rem;display:inline-flex;align-items:center;gap:6px}

/* Empty State */
.empty-state{text-align:center;padding:60px 20px;color:var(--text-secondary);grid-column:1/-1}
.empty-state i{font-size:5rem;margin-bottom:20px;opacity:0.5}
.empty-state h3{font-size:1.3rem;margin-bottom:10px;color:var(--text-primary)}

/* Folder Tree */
.folder-tree{max-height:350px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius)}
.folder-tree-item{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;transition:var(--transition);border-bottom:1px solid var(--border)}
.folder-tree-item:last-child{border-bottom:none}
.folder-tree-item:hover{background:var(--bg-secondary)}
.folder-tree-item.selected{background:rgba(66,133,244,0.1);border-left:3px solid var(--primary)}
.folder-tree-item i{color:var(--warning);font-size:1.2rem}
.folder-tree-item span{flex:1;font-weight:500}

/* Share Modal */
.share-link-container{display:flex;gap:10px}
.share-link-container input{flex:1}
.share-link-container .btn{padding:14px 18px}
.share-info{font-size:0.9rem;color:var(--text-secondary);margin:16px 0;padding:16px;background:var(--bg-secondary);border-radius:var(--radius);display:flex;align-items:center;gap:10px}
.share-info i{color:var(--primary)}

/* Admin */
.admin-header-actions{margin-bottom:24px}
.admin-users-list{display:flex;flex-direction:column;gap:12px}
.admin-user-item{display:flex;align-items:center;gap:16px;padding:20px;background:var(--bg-primary);border-radius:var(--radius);box-shadow:var(--shadow)}
.admin-user-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#764ba2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.admin-user-info{flex:1;min-width:0}
.admin-user-name{font-weight:600;font-size:1.05rem}
.admin-user-email{font-size:0.85rem;color:var(--text-secondary)}
.admin-user-meta{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap;font-size:0.8rem}
.admin-user-meta span{display:flex;align-items:center;gap:4px}
.admin-user-actions{display:flex;gap:8px}
.admin-user-actions button{width:40px;height:40px;border:none;border-radius:var(--radius);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.admin-user-actions .edit-btn{background:var(--bg-secondary);color:var(--text-primary)}
.admin-user-actions .edit-btn:hover{background:var(--bg-tertiary)}
.admin-user-actions .delete-btn{background:rgba(234,67,53,0.1);color:var(--accent)}
.admin-user-actions .delete-btn:hover{background:rgba(234,67,53,0.2)}

.status-badge{padding:4px 10px;border-radius:20px;font-size:0.75rem;font-weight:500}
.status-badge.active{background:rgba(52,168,83,0.1);color:var(--secondary)}
.status-badge.suspended{background:rgba(234,67,53,0.1);color:var(--accent)}
.role-badge{padding:4px 10px;border-radius:20px;font-size:0.75rem;font-weight:500;background:rgba(66,133,244,0.1);color:var(--primary)}

.admin-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.admin-stat-card{background:var(--bg-primary);padding:28px;border-radius:var(--radius-lg);text-align:center;box-shadow:var(--shadow)}
.admin-stat-card .stat-icon{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:rgba(66,133,244,0.1);display:flex;align-items:center;justify-content:center}
.admin-stat-card .stat-icon i{font-size:1.8rem;color:var(--primary)}
.admin-stat-card .stat-value{font-size:2.2rem;font-weight:700;margin-bottom:4px}
.admin-stat-card .stat-label{color:var(--text-secondary)}

/* Selection Bar */
.selection-bar{position:fixed;top:16px;left:50%;transform:translateX(-50%) translateY(-150%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:var(--radius-lg);display:flex;align-items:center;gap:24px;z-index:1500;box-shadow:var(--shadow-lg);transition:var(--transition)}
.selection-bar.active{transform:translateX(-50%) translateY(0)}
.selection-left{display:flex;align-items:center;gap:16px}
.selection-bar button{background:rgba(255,255,255,0.2);border:none;color:#fff;cursor:pointer;padding:8px 12px;border-radius:var(--radius);transition:var(--transition)}
.selection-bar button:hover{background:rgba(255,255,255,0.3)}
.selection-actions{display:flex;gap:8px}

/* Animations */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}

/* Responsive */
@media(max-width:768px){
  .floating-navbar{width:calc(100% - 16px);padding:10px 16px;bottom:16px}
  .search-container{min-width:auto;flex:1}
  .nav-btn{width:44px;height:44px;font-size:1.1rem}
  .files-container{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .file-item .file-icon{height:80px;font-size:2.5rem}
  .top-header{padding:12px 16px;top:8px}
  .toast-container{right:16px;left:16px;bottom:90px}
  .auth-box{padding:32px 24px}
  .settings-tabs{overflow-x:auto;gap:0}
  .settings-tab{padding:12px 16px;white-space:nowrap}
  .settings-tab span{display:none}
  .color-mode-selector{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:480px){
  .files-container{grid-template-columns:repeat(2,1fr)}
  .header-actions{display:none}
  .admin-user-item{flex-direction:column;align-items:flex-start}
  .admin-user-actions{width:100%;margin-top:12px}
  .admin-user-actions button{flex:1}
}
/* Add to style.css */

/* Upload item enhanced */
.upload-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius);
  margin-bottom: 10px;
}

.upload-item-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.upload-item-info i {
  font-size: 1.5rem;
  color: var(--primary);
}

.upload-item-details {
  flex: 1;
  min-width: 0;
}

.upload-item-name {
  display: block;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upload-item-status {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.upload-item-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 150px;
}

.upload-item-progress .progress {
  flex: 1;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}

.upload-item-progress .progress-bar {
  height: 100%;
  background: var(--primary);
  transition: width 0.3s ease;
}

.upload-percent {
  font-size: 0.85rem;
  font-weight: 500;
  min-width: 40px;
  text-align: right;
}

.upload-cancel-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.upload-cancel-btn:hover {
  background: rgba(234, 67, 53, 0.1);
  color: var(--accent);
}

/* Chunk badge */
.chunk-badge {
  position: absolute;
  top: 36px;
  right: 12px;
  color: var(--primary);
  font-size: 0.75rem;
  opacity: 0.7;
}

.chunk-badge-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(66, 133, 244, 0.1);
  color: var(--primary);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
}

/* Preview warning for large files */
.preview-warning {
  text-align: center;
  padding: 40px;
}

.preview-warning i {
  font-size: 4rem;
  color: var(--warning);
  margin-bottom: 20px;
}

.preview-warning h3 {
  margin-bottom: 10px;
}

.preview-warning p {
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.preview-warning .btn {
  margin: 0 8px;
}

/* Responsive upload item */
@media (max-width: 600px) {
  .upload-item {
    flex-wrap: wrap;
  }
  
  .upload-item-progress {
    width: 100%;
    margin-top: 8px;
  }
}
/* PWA Install Banner */
.pwa-install-banner {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(200px);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  max-width: calc(100% - 40px);
  width: 400px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pwa-install-banner.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}

.pwa-install-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.pwa-install-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary), var(--secondary, #8b5cf6));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.pwa-install-text {
  flex: 1;
  min-width: 0;
}

.pwa-install-text strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 2px;
}

.pwa-install-text span {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.pwa-install-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pwa-install-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--primary), var(--secondary, #8b5cf6));
  color: white;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
}

.pwa-install-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.pwa-dismiss-btn {
  width: 36px;
  height: 36px;
  background: var(--bg-secondary);
  border: none;
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.pwa-dismiss-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* App Install Card in Settings */
.app-install-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: var(--bg-secondary);
  border-radius: var(--radius);
  margin-bottom: 20px;
}

.app-install-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--primary), var(--secondary, #8b5cf6));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.8rem;
  flex-shrink: 0;
}

.app-install-info {
  flex: 1;
}

.app-install-info h4 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.app-install-info p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.app-install-instructions {
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: 20px;
}

.app-install-instructions h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--primary);
}

.install-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.install-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.step-number {
  width: 28px;
  height: 28px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.step-content strong {
  display: block;
  margin-bottom: 4px;
}

.step-content p {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.step-content i {
  color: var(--primary);
}

/* About Card */
.about-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: var(--bg-secondary);
  border-radius: var(--radius);
}

.about-logo {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--primary), var(--secondary, #8b5cf6));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.8rem;
}

.about-info h4 {
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.about-info p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.about-desc {
  margin-top: 8px;
}

/* Upload hint */
.upload-hint {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 12px;
}

/* Responsive */
@media (max-width: 500px) {
  .pwa-install-banner {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }

  .pwa-install-content {
    flex-direction: column;
  }

  .pwa-install-actions {
    width: 100%;
    justify-content: center;
  }

  .app-install-card {
    flex-direction: column;
    text-align: center;
  }

  .about-card {
    flex-direction: column;
    text-align: center;
  }
}
/* PWA Install Banner - Completely hidden by default */
.pwa-install-banner {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  max-width: calc(100% - 40px);
  width: 400px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Only show when .show class is added via JavaScript */
.pwa-install-banner.show {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.pwa-install-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.pwa-install-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary), var(--secondary, #8b5cf6));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.pwa-install-text {
  flex: 1;
  min-width: 0;
}

.pwa-install-text strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 2px;
}

.pwa-install-text span {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.pwa-install-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pwa-install-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--primary), var(--secondary, #8b5cf6));
  color: white;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
}

.pwa-install-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.pwa-dismiss-btn {
  width: 36px;
  height: 36px;
  background: var(--bg-secondary);
  border: none;
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.pwa-dismiss-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Responsive */
@media (max-width: 500px) {
  .pwa-install-banner {
    bottom: 90px;
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }

  .pwa-install-banner.show {
    display: flex;
  }

  .pwa-install-content {
    flex-direction: column;
  }

  .pwa-install-actions {
    width: 100%;
    justify-content: center;
  }
}