*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #0f172a;--color-surface: #1e293b;--color-surface-hover: #334155;--color-border: #334155;--color-border-active: #3b82f6;--color-primary: #3b82f6;--color-primary-hover: #2563eb;--color-primary-text: #ffffff;--color-danger: #ef4444;--color-danger-hover: #dc2626;--color-success: #22c55e;--color-success-bg: rgba(34, 197, 94, .1);--color-error: #ef4444;--color-error-bg: rgba(239, 68, 68, .1);--color-text: #f1f5f9;--color-text-muted: #94a3b8;--color-text-dim: #64748b;--radius: 8px;--radius-sm: 4px;--radius-lg: 12px;--shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .2);--shadow-lg: 0 4px 6px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .2);--transition: .15s ease;--font: "Segoe UI", system-ui, -apple-system, sans-serif}html{font-size:16px}body{font-family:var(--font);background:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100vh}.btn{display:inline-flex;align-items:center;gap:4px;padding:8px 16px;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:.875rem;font-family:var(--font);transition:all var(--transition);white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:var(--color-primary-text)}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover)}.btn-danger{background:var(--color-danger);color:var(--color-primary-text)}.btn-danger:hover:not(:disabled){background:var(--color-danger-hover)}.btn-outline{background:transparent;border:1px solid var(--color-border);color:var(--color-text)}.btn-outline:hover:not(:disabled){background:var(--color-surface-hover);border-color:var(--color-text-muted)}.btn-sm{padding:4px 10px;font-size:.8rem}.text-muted{color:var(--color-text-muted);font-size:.875rem}.app-container{max-width:1200px;margin:0 auto;padding:24px 16px;min-height:100vh;display:flex;flex-direction:column}.app-header{text-align:center;padding:32px 0 24px}.app-header-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:4px}.app-header-top h1{font-size:2rem;font-weight:700}.user-info{display:flex;align-items:center;gap:10px}.user-badge{font-size:.85rem;color:var(--color-text-muted);background:var(--color-surface);padding:4px 12px;border-radius:20px;border:1px solid var(--color-border)}.app-main{flex:1;display:flex;flex-direction:column;gap:24px}.app-footer{text-align:center;padding:24px 0;margin-top:32px;border-top:1px solid var(--color-border)}.section-title{font-size:1.125rem;font-weight:600;margin-bottom:16px;color:var(--color-text)}.folder-selection{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media (max-width: 768px){.folder-selection{grid-template-columns:1fr}}.picker-column{min-width:0}.directory-picker{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:16px;transition:border-color var(--transition)}.directory-picker:hover{border-color:var(--color-text-dim)}.picker-label{display:block;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:8px}.picker-current-path{display:flex;align-items:center;gap:8px;background:var(--color-bg);border-radius:var(--radius);padding:8px 12px;margin-bottom:8px;font-family:Courier New,monospace;font-size:.85rem;overflow:hidden}.path-icon{font-size:1rem;flex-shrink:0}.path-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.picker-actions{display:flex;gap:8px;margin-bottom:8px}.picker-directory-list{max-height:200px;overflow-y:auto;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg)}.picker-directory-list::-webkit-scrollbar{width:6px}.picker-directory-list::-webkit-scrollbar-track{background:transparent}.picker-directory-list::-webkit-scrollbar-thumb{background:var(--color-text-dim);border-radius:3px}.picker-loading,.picker-empty{padding:20px;text-align:center;color:var(--color-text-muted);font-size:.875rem}.picker-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:transparent;border:none;color:var(--color-text);cursor:pointer;font-size:.875rem;font-family:var(--font);text-align:left;transition:background var(--transition)}.picker-item:hover{background:var(--color-surface-hover)}.picker-item.active{background:#3b82f626;border-left:3px solid var(--color-primary)}.dir-icon{flex-shrink:0;font-size:1rem}.dir-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dir-select-hint{font-size:.75rem;color:var(--color-primary);opacity:0;transition:opacity var(--transition)}.picker-item:hover .dir-select-hint{opacity:1}.picker-error{color:var(--color-error);font-size:.8rem;margin-bottom:8px;padding:6px 10px;background:var(--color-error-bg);border-radius:var(--radius-sm)}.create-folder-form{margin-bottom:8px}.create-folder-input-row{display:flex;gap:6px;align-items:center}.create-folder-input{flex:1;padding:6px 10px;background:var(--color-bg);border:1px solid var(--color-primary);border-radius:var(--radius-sm);color:var(--color-text);font-size:.85rem;font-family:var(--font);outline:none;transition:border-color var(--transition)}.create-folder-input:focus{border-color:var(--color-border-active);box-shadow:0 0 0 2px #3b82f633}.create-folder-input::placeholder{color:var(--color-text-dim)}.file-uploader{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:20px}.drop-zone{border:2px dashed var(--color-border);border-radius:var(--radius);padding:40px 20px;text-align:center;cursor:pointer;transition:all var(--transition);margin-bottom:16px}.drop-zone:hover{border-color:var(--color-primary);background:#3b82f60d}.drop-zone.drag-over{border-color:var(--color-primary);background:#3b82f61a;transform:scale(1.01)}.drop-zone.has-file{border-style:solid;border-color:var(--color-success);padding:16px 20px;cursor:default}.drop-zone-placeholder{display:flex;flex-direction:column;align-items:center;gap:4px}.upload-icon{font-size:3rem;margin-bottom:8px;opacity:.6}.selected-file-info{display:flex;align-items:center;gap:12px}.file-details{flex:1;display:flex;flex-direction:column;align-items:flex-start;min-width:0}.file-details .file-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:400px}.file-details .file-size{font-size:.8rem;color:var(--color-text-muted)}.progress-container{display:flex;align-items:center;gap:12px;margin-bottom:16px}.progress-bar{flex:1;height:8px;background:var(--color-bg);border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),#60a5fa);border-radius:4px;transition:width .2s ease}.progress-text{font-size:.85rem;font-weight:600;color:var(--color-primary);min-width:40px;text-align:right}.upload-btn{width:100%;justify-content:center;padding:12px;font-size:1rem;margin-bottom:12px}.upload-status{padding:10px 14px;border-radius:var(--radius);font-size:.9rem;margin-bottom:12px}.upload-status.success{background:var(--color-success-bg);color:var(--color-success);border:1px solid rgba(34,197,94,.2)}.upload-status.error{background:var(--color-error-bg);color:var(--color-error);border:1px solid rgba(239,68,68,.2)}.destination-info{font-size:.8rem;color:var(--color-text-muted);text-align:center}.file-list{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:20px}.file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.file-list-header .section-title{margin-bottom:0}.file-list-actions{display:flex;align-items:center;gap:12px}.file-count{font-size:.85rem;color:var(--color-text-muted)}.file-list-loading{text-align:center;padding:40px;color:var(--color-text-muted)}.file-list-empty{text-align:center;padding:48px 20px;color:var(--color-text-muted)}.empty-icon{font-size:3rem;display:block;margin-bottom:12px;opacity:.5}.file-list-error{color:var(--color-error);font-size:.875rem;padding:8px 12px;background:var(--color-error-bg);border-radius:var(--radius-sm);margin-bottom:12px}.file-table-wrapper{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--color-border)}.file-table{width:100%;border-collapse:collapse;font-size:.875rem}.file-table th{text-align:left;padding:10px 14px;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);background:var(--color-bg);border-bottom:1px solid var(--color-border);font-weight:600}.file-table td{padding:10px 14px;border-bottom:1px solid var(--color-border);vertical-align:middle}.file-table tr:last-child td{border-bottom:none}.file-table tr:hover td{background:#3341554d}.file-name-cell{display:flex;align-items:center;gap:8px}.file-name-cell .file-icon{font-size:1.1rem;flex-shrink:0}.file-name-cell .file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px}.file-size-cell{white-space:nowrap;color:var(--color-text-muted)}.file-date-cell{white-space:nowrap;color:var(--color-text-muted);font-size:.8rem}.file-actions-cell{display:flex;gap:6px;white-space:nowrap}.loading-screen{display:flex;align-items:center;justify-content:center;min-height:60vh;color:var(--color-text-muted);font-size:1.125rem}.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px 16px}.login-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:40px 32px;width:100%;max-width:400px;box-shadow:var(--shadow-lg)}.login-header{text-align:center;margin-bottom:32px}.login-logo{font-size:3rem;display:block;margin-bottom:12px}.login-header h1{font-size:1.5rem;font-weight:700;margin-bottom:4px}.login-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:.85rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.form-group input{padding:10px 14px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text);font-size:.95rem;font-family:var(--font);outline:none;transition:border-color var(--transition),box-shadow var(--transition)}.form-group input:focus{border-color:var(--color-border-active);box-shadow:0 0 0 3px #3b82f626}.form-group input::placeholder{color:var(--color-text-dim)}.login-btn{width:100%;justify-content:center;padding:12px;font-size:1rem;margin-top:4px}.login-error{color:var(--color-error);font-size:.875rem;padding:10px 14px;background:var(--color-error-bg);border:1px solid rgba(239,68,68,.2);border-radius:var(--radius);text-align:center}