*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:var(--font-sans);color:var(--color-gray-900);background-color:var(--color-gray-50);line-height:1.5;-webkit-font-smoothing:antialiased}button{cursor:pointer;font-family:inherit}input,textarea,select{font-family:inherit}a{color:inherit;text-decoration:none}img,svg{display:block;max-width:100%}ul,ol{list-style:none}:root{--primary: #22b3a4;--primary-dark: #1a9688;--color-primary: var(--primary);--color-primary-hover: var(--primary-dark);--color-primary-light: #e0f7f5;--color-primary-alpha-25: rgba(34, 179, 164, .25);--color-primary-alpha-10: rgba(34, 179, 164, .1);--sidebar-bg: #0d2e2c;--sidebar-text: rgba(255, 255, 255, .7);--sidebar-text-active: #ffffff;--sidebar-active-bg: rgba(34, 179, 164, .3);--sidebar-hover-bg: rgba(255, 255, 255, .08);--sidebar-border: rgba(255, 255, 255, .1);--color-success: #16a34a;--color-warning: #d97706;--color-error: #dc2626;--n-50: #fafafa;--n-100: #f5f5f5;--n-200: #e5e5e5;--n-300: #d4d4d4;--n-400: #a3a3a3;--n-500: #737373;--n-600: #525252;--n-700: #404040;--n-800: #262626;--n-900: #171717;--color-gray-50: #f9fafb;--color-gray-100: #f3f4f6;--color-gray-200: #e5e7eb;--color-gray-300: #d1d5db;--color-gray-400: #9ca3af;--color-gray-500: #6b7280;--color-gray-600: #4b5563;--color-gray-700: #374151;--color-gray-800: #1f2937;--color-gray-900: #111827;--font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-xs: .75rem;--font-size-sm: .8125rem;--font-size-base: .875rem;--font-size-lg: 1rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--header-height: 56px;--sidebar-width: 210px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1);--bg-page: #ffffff;--bg-surface: var(--n-50);--text-primary: var(--n-900);--text-secondary: var(--n-500);--border-color: var(--n-200);--ease-enter: cubic-bezier(.16, 1, .3, 1);--transition-fast: .15s var(--ease-enter);--transition-normal: .25s var(--ease-enter)}html,body{overflow-x:hidden;width:100%}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:14px;padding-right:32px!important}.api-error-banner{color:var(--color-error, #dc2626);font-size:.75rem;padding-left:2px;margin-bottom:.5rem;flex-shrink:0}.layout{display:flex;flex-direction:row;height:100vh}.sidebar{width:var(--sidebar-width);background:var(--sidebar-bg);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s ease}.sidebar-logo{height:var(--header-height);padding:0 20px;display:flex;align-items:center;flex-shrink:0}.sidebar-logo-img{height:28px;width:auto;max-width:160px;object-fit:contain}.sidebar-nav{flex:1;padding:12px 8px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}.sidebar-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#ffffff59;padding:12px 12px 4px}.sidebar-link{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius-md);color:var(--sidebar-text);font-size:14px;font-weight:500;text-decoration:none;transition:all var(--transition-fast)}.sidebar-link:hover{background:#ffffff14;color:#fff}.sidebar-link.active{background:var(--sidebar-active-bg);color:#fff}.sidebar-link svg{width:20px;height:20px;flex-shrink:0}.sidebar-link-label{overflow:hidden;text-overflow:ellipsis}.sidebar-footer{margin-top:auto;padding:12px 8px}.powered-by{display:flex;align-items:center;justify-content:center;padding:10px 8px}.powered-by a{display:flex;align-items:center;justify-content:center}.powered-by img{height:32px;opacity:.7}.storage-quota{padding:12px 16px}.sidebar.sidebar-collapsed{width:60px;min-width:60px;overflow:hidden}.sidebar.sidebar-collapsed .sidebar-logo{padding:0;justify-content:center}.sidebar.sidebar-collapsed .sidebar-logo-img{max-width:28px}.sidebar.sidebar-collapsed .sidebar-label{height:0;padding:0;opacity:0;overflow:hidden}.sidebar.sidebar-collapsed .sidebar-link{justify-content:center;padding:10px 8px;gap:0}.sidebar.sidebar-collapsed .sidebar-link-label,.sidebar.sidebar-collapsed .sidebar-footer,.sidebar.sidebar-collapsed .storage-quota{display:none}.sidebar.sidebar-collapsed .powered-by img{height:18px}.storage-quota-label{color:var(--sidebar-text);font-size:var(--font-size-xs);margin-bottom:6px}.storage-quota-bar{width:100%;height:4px;background:#ffffff26;border-radius:2px;overflow:hidden}.storage-quota-fill{height:100%;background:var(--primary);border-radius:2px;transition:width var(--transition-normal)}.storage-quota-fill.warning{background:var(--color-warning)}.storage-quota-fill.danger{background:var(--color-error)}.layout-main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}.layout-header{height:var(--header-height);display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--border-color);background:var(--bg-page);flex-shrink:0}.header-left{display:flex;align-items:center;gap:8px}.sidebar-toggle-btn{background:none;border:none;padding:6px;border-radius:var(--radius-md);color:var(--color-gray-500);display:flex;align-items:center;justify-content:center}.sidebar-toggle-btn:hover{background:var(--color-gray-100);color:var(--color-gray-700)}.topbar-breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--font-size-sm);color:var(--color-gray-500)}.topbar-breadcrumb-app{font-weight:500;color:var(--color-gray-700)}.topbar-breadcrumb-current{color:var(--color-gray-900);font-weight:500}.topbar-mobile-logo{display:none}.topbar-actions{display:flex;align-items:center;gap:4px}.notif-wrapper,.profile-wrapper{position:relative}.notif-btn{background:none;border:none;padding:8px;border-radius:var(--radius-md);color:var(--color-gray-500);display:flex;align-items:center}.notif-btn:hover{background:var(--color-gray-100);color:var(--color-gray-700)}.avatar-btn{background:none;border:none;display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:var(--radius-md)}.avatar-btn:hover{background:var(--color-gray-100)}.avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs);font-weight:600;flex-shrink:0}.avatar-lg{width:40px;height:40px;font-size:var(--font-size-sm)}.avatar-name{font-size:var(--font-size-sm);color:var(--color-gray-700);font-weight:500}.avatar-chevron{color:var(--color-gray-400)}.dropdown-menu{position:absolute;top:calc(100% + 4px);right:0;background:var(--bg-page);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);min-width:200px;z-index:200;padding:4px}.dropdown-profile-header{display:flex;align-items:center;gap:10px;padding:10px 10px 8px}.dropdown-profile-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-gray-900)}.dropdown-profile-meta{font-size:var(--font-size-xs);color:var(--color-gray-500)}.dropdown-separator{height:1px;background:var(--border-color);margin:4px 0}.dropdown-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--color-gray-700);background:none;border:none;width:100%;text-align:left;cursor:pointer}.dropdown-item:hover{background:var(--color-gray-100)}.dropdown-item.danger{color:var(--color-error)}.dropdown-item.danger:hover{background:#fef2f2}.notif-drop{min-width:280px}.notif-drop-header{font-size:var(--font-size-sm);font-weight:600;padding:10px 10px 8px;color:var(--color-gray-900)}.notif-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 10px;color:var(--color-gray-400);font-size:var(--font-size-sm)}.layout-content{flex:1;overflow-y:auto;padding:20px;background:var(--bg-surface)}.browser-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;flex-wrap:wrap}.browser-toolbar-left,.browser-toolbar-right{display:flex;align-items:center;gap:8px}.breadcrumb{display:flex;align-items:center;gap:4px;font-size:var(--font-size-sm)}.breadcrumb-item{color:var(--color-gray-500);cursor:pointer;padding:2px 4px;border-radius:var(--radius-sm)}.breadcrumb-item:hover{color:var(--color-primary);background:var(--color-primary-alpha-10)}.breadcrumb-item.active{color:var(--color-gray-900);font-weight:500;cursor:default}.breadcrumb-item.active:hover{color:var(--color-gray-900);background:none}.breadcrumb-sep{color:var(--color-gray-300)}.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;border:none;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast);white-space:nowrap}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-hover)}.btn-secondary{background:var(--color-gray-100);color:var(--color-gray-700)}.btn-secondary:hover{background:var(--color-gray-200)}.btn-ghost{background:transparent;color:var(--color-gray-600)}.btn-ghost:hover{background:var(--color-gray-100)}.btn-danger{background:var(--color-error);color:#fff}.btn-danger:hover{background:#b91c1c}.btn-icon{padding:6px}.btn-sm{padding:5px 10px;font-size:var(--font-size-xs)}.file-list{background:var(--bg-page);border-radius:var(--radius-xl);overflow:hidden}.file-list-header{display:grid;grid-template-columns:1fr 30px 36px 100px 140px 40px;gap:8px;padding:10px 16px;font-size:11px;font-weight:600;color:var(--color-gray-400);text-transform:uppercase;letter-spacing:.06em}.file-row{display:grid;grid-template-columns:1fr 30px 36px 100px 140px 40px;gap:8px;padding:8px 16px;font-size:var(--font-size-sm);align-items:center;cursor:pointer;border-radius:var(--radius-lg);margin:0 4px;transition:background var(--transition-fast)}.file-row:hover{background:var(--color-gray-50)}.file-row:hover .file-row-actions{opacity:1}.file-row-name{display:flex;align-items:center;gap:12px;min-width:0}.file-row-name-text{display:flex;align-items:center;gap:8px;min-width:0}.file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--color-gray-800)}.file-ext{font-size:10px;font-weight:600;color:var(--color-gray-400);background:var(--color-gray-100);padding:1px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.03em;flex-shrink:0}.file-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;flex-shrink:0}.file-row-size,.file-row-date{color:var(--color-gray-400);font-size:var(--font-size-xs)}.file-row-actions{background:none;border:none;padding:4px;border-radius:var(--radius-md);color:var(--color-gray-400);opacity:0;transition:opacity var(--transition-fast),background var(--transition-fast);display:flex;align-items:center;justify-content:center;cursor:pointer}.file-row-actions:hover{background:var(--color-gray-200);color:var(--color-gray-600)}.file-row-share{background:none;border:none;padding:4px;border-radius:var(--radius-md);color:var(--color-gray-300);transition:color var(--transition-fast),background var(--transition-fast);display:flex;align-items:center;justify-content:center;cursor:pointer}.file-row-share:hover{color:var(--color-primary);background:var(--color-primary-alpha-10)}.file-row-fav{background:none;border:none;padding:4px;border-radius:var(--radius-md);color:var(--color-gray-300);transition:color var(--transition-fast);display:flex;align-items:center;justify-content:center;cursor:pointer}.file-row-fav:hover,.file-row-fav.active{color:#f59e0b}.file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}.file-card{background:var(--bg-page);border:1px solid var(--color-gray-100);border-radius:var(--radius-xl);cursor:pointer;display:flex;flex-direction:column;overflow:hidden;position:relative;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast)}.file-card:hover{border-color:var(--color-primary);box-shadow:0 4px 12px #00000014;transform:translateY(-2px)}.file-card:hover .file-card-menu{opacity:1}.file-card-fav{position:absolute;top:8px;left:8px;z-index:2;background:#ffffffe6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:none;padding:4px;border-radius:var(--radius-md);color:var(--color-gray-400);opacity:0;transition:opacity var(--transition-fast),color var(--transition-fast);display:flex;align-items:center;justify-content:center;cursor:pointer}.file-card-fav:hover{color:#f59e0b}.file-card-fav.active{color:#f59e0b;opacity:1}.file-card:hover .file-card-fav{opacity:1}.file-card-menu{position:absolute;top:8px;right:8px;z-index:2;background:#ffffffe6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:none;padding:4px;border-radius:var(--radius-md);color:var(--color-gray-500);opacity:0;transition:opacity var(--transition-fast),background var(--transition-fast);display:flex;align-items:center;justify-content:center;cursor:pointer}.file-card-menu:hover{background:#fff;color:var(--color-gray-700)}.file-card-preview{height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:var(--radius-lg) var(--radius-lg) 0 0}.file-card-ext{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.7}.file-card-info{padding:12px 14px}.file-card-name{font-size:var(--font-size-sm);font-weight:500;color:var(--color-gray-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-card-meta{font-size:var(--font-size-xs);color:var(--color-gray-400);margin-top:2px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:var(--color-gray-400)}.empty-state svg{margin-bottom:12px}.empty-state-title{font-size:var(--font-size-lg);font-weight:500;color:var(--color-gray-600);margin-bottom:4px}.empty-state-hint{font-size:var(--font-size-sm);color:var(--color-gray-400)}.dropzone{border:2px dashed var(--border-color);border-radius:var(--radius-xl);padding:40px 20px;text-align:center;cursor:pointer;transition:border-color var(--transition-fast),background var(--transition-fast)}.dropzone:hover,.dropzone.active{border-color:var(--color-primary);background:var(--color-primary-alpha-10)}.dropzone-text{font-size:var(--font-size-sm);color:var(--color-gray-500)}.dropzone-text strong{color:var(--color-primary)}.upload-panel{position:fixed;bottom:20px;right:20px;width:360px;background:var(--bg-page);border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);z-index:300;overflow:hidden}.upload-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-color);font-size:var(--font-size-sm);font-weight:600}.upload-panel-list{max-height:240px;overflow-y:auto}.upload-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--color-gray-100)}.upload-item:last-child{border-bottom:none}.upload-item-info{flex:1;min-width:0}.upload-item-name{font-size:var(--font-size-sm);color:var(--color-gray-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-item-status{font-size:var(--font-size-xs);color:var(--color-gray-500)}.upload-progress-bar{width:100%;height:3px;background:var(--color-gray-200);border-radius:2px;margin-top:4px;overflow:hidden}.upload-progress-fill{height:100%;background:var(--color-primary);border-radius:2px;transition:width .2s ease}.context-menu{position:fixed;background:var(--bg-page);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);min-width:180px;z-index:400;padding:4px}.context-menu-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--color-gray-700);background:none;border:none;width:100%;text-align:left;cursor:pointer}.context-menu-item:hover{background:var(--color-gray-100)}.context-menu-item.danger{color:var(--color-error)}.context-menu-item.danger:hover{background:#fef2f2}.context-menu-separator{height:1px;background:var(--border-color);margin:4px 0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:500;display:flex;align-items:center;justify-content:center;padding:20px}.modal{background:var(--bg-page);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);width:100%;max-width:480px;max-height:90vh;overflow-y:auto}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-color)}.modal-title{font-size:var(--font-size-lg);font-weight:600;color:var(--color-gray-900)}.modal-close{background:none;border:none;color:var(--color-gray-400);padding:4px;border-radius:var(--radius-md)}.modal-close:hover{background:var(--color-gray-100);color:var(--color-gray-700)}.modal-body{padding:20px}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--border-color)}.form-field{margin-bottom:16px}.form-label{display:block;font-size:var(--font-size-sm);font-weight:500;color:var(--color-gray-700);margin-bottom:4px}.form-input{width:100%;padding:8px 12px;border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--color-gray-900);background:var(--bg-page);transition:border-color var(--transition-fast)}.form-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-alpha-25)}.sidebar-drawer{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-width);transform:translate(-100%);transition:transform var(--transition-normal);z-index:1000}.sidebar-drawer.open{transform:translate(0)}.sidebar-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:999}.mobile-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:56px;background:var(--bg-page);border-top:1px solid var(--border-color);z-index:100;align-items:center;justify-content:space-around}.mobile-tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px;font-size:10px;color:var(--color-gray-400);background:none;border:none;text-decoration:none}.mobile-tab.active{color:var(--color-primary)}.mobile-tab-create{width:44px;height:44px;border-radius:50%;background:var(--color-primary);color:#fff!important;display:flex;align-items:center;justify-content:center;padding:0}@media(max-width:639px){.layout-content{padding:12px 12px 72px}.layout-header{padding:0 12px}.topbar-breadcrumb-app,.topbar-breadcrumb svg{display:none}.topbar-mobile-logo{display:inline;font-weight:600;color:var(--color-gray-900);font-size:var(--font-size-base)}.avatar-name,.avatar-chevron{display:none}.mobile-bottom-nav{display:flex}.file-list-header{grid-template-columns:1fr 30px 36px 80px 40px}.file-list-header>:nth-child(5){display:none}.file-row{grid-template-columns:1fr 30px 36px 80px 40px;margin:0;border-radius:0}.file-row>:nth-child(5){display:none}.file-row-actions{opacity:1}.file-ext{display:none}.file-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}.file-card-preview{height:90px}.file-card-menu{opacity:1}.upload-panel{left:12px;right:12px;bottom:68px;width:auto}.browser-toolbar{flex-direction:column;align-items:stretch}.browser-toolbar-right{justify-content:flex-end}}.share-tabs{display:flex;gap:0;border-bottom:1px solid var(--border-color);padding:0 20px}.share-tab{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;font-size:var(--font-size-sm);font-weight:500;color:var(--color-gray-500);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color var(--transition-fast),border-color var(--transition-fast)}.share-tab:hover{color:var(--color-gray-700)}.share-tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.member-results{position:absolute;top:100%;left:0;right:0;background:var(--bg-page);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:50;max-height:240px;overflow-y:auto;margin-top:4px}.member-result-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:none;border:none;width:100%;text-align:left;cursor:pointer;transition:background var(--transition-fast)}.member-result-item:hover{background:var(--color-gray-50)}.share-list{display:flex;flex-direction:column;gap:0;border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden}.share-list-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--color-gray-100)}.share-list-item:last-child{border-bottom:none}@media(max-width:1023px)and (min-width:640px){.topbar-mobile-logo{display:none}}