:root{--color-bg-primary: #ffffff;--color-bg-secondary: #f7f7f8;--color-bg-tertiary: #f0f0f1;--color-text-primary: #1a1a1a;--color-text-secondary: #6b7280;--color-text-tertiary: #9ca3af;--color-border: #e5e7eb;--color-border-hover: #d1d5db;--color-accent: #1a1a1a;--color-accent-hover: #333333;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 2px 8px rgba(0, 0, 0, .06);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .08)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;font-family:var(--font-sans);font-size:14px;line-height:1.5;color:var(--color-text-primary);background:var(--color-bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{display:flex;flex-direction:column;min-height:100%}.header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--color-border);background:var(--color-bg-primary)}.header h1{font-size:16px;font-weight:600;letter-spacing:-.01em}.subtitle{font-size:13px;color:var(--color-text-secondary)}.main{flex:1;padding:var(--space-6);color:var(--color-text-secondary)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:13px;font-weight:500;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all .15s ease}.btn-primary{background:var(--color-accent);color:#fff}.btn-primary:hover{background:var(--color-accent-hover)}.btn-secondary{background:var(--color-bg-primary);color:var(--color-text-primary);border-color:var(--color-border)}.btn-secondary:hover{background:var(--color-bg-secondary);border-color:var(--color-border-hover)}.card{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4)}.input{width:100%;padding:var(--space-2) var(--space-3);font-size:13px;font-family:inherit;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-primary);color:var(--color-text-primary);transition:border-color .15s ease}.input:focus{outline:none;border-color:var(--color-accent)}.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--color-bg-secondary)}.login-container{width:100%;max-width:400px;padding:var(--space-6)}.login-header{text-align:center;margin-bottom:var(--space-8)}.login-header h1{font-size:24px;font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-2)}.login-subtitle{font-size:14px;color:var(--color-text-secondary)}.login-form{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6)}.error-message{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;font-size:13px;padding:var(--space-3);border-radius:var(--radius-md);margin-bottom:var(--space-4)}.form-group{margin-bottom:var(--space-4)}.form-group label{display:block;font-size:13px;font-weight:500;color:var(--color-text-primary);margin-bottom:var(--space-2)}.form-group input{width:100%;padding:var(--space-2) var(--space-3);font-size:14px;font-family:inherit;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-primary);color:var(--color-text-primary);transition:border-color .15s ease}.form-group input:focus{outline:none;border-color:var(--color-accent)}.form-group input:disabled{background:var(--color-bg-secondary);cursor:not-allowed}.submit-button{width:100%;padding:var(--space-3);font-size:14px;font-weight:500;color:#fff;background:var(--color-accent);border:none;border-radius:var(--radius-md);cursor:pointer;transition:background .15s ease}.submit-button:hover:not(:disabled){background:var(--color-accent-hover)}.submit-button:disabled{opacity:.6;cursor:not-allowed}.dashboard{min-height:100vh}.dashboard-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--color-border);background:var(--color-bg-primary)}.dashboard-header h1{font-size:18px;font-weight:600}.user-menu{display:flex;align-items:center;gap:var(--space-4)}.user-email{font-size:13px;color:var(--color-text-secondary)}.logout-button{padding:var(--space-2) var(--space-3);font-size:13px;font-weight:500;color:var(--color-text-primary);background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all .15s ease}.logout-button:hover{background:var(--color-bg-secondary);border-color:var(--color-border-hover)}.dashboard-main{padding:var(--space-6)}.welcome-card{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-6)}.welcome-card h2{font-size:20px;font-weight:600;margin-bottom:var(--space-2)}.welcome-card p{font-size:14px;color:var(--color-text-secondary)}.feature-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-4)}.feature-card{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5)}.feature-card h3{font-size:16px;font-weight:600;margin-bottom:var(--space-2)}.feature-card p{font-size:13px;color:var(--color-text-secondary);margin-bottom:var(--space-3)}.feature-card.placeholder{position:relative}.coming-soon{display:inline-block;font-size:12px;font-weight:500;color:var(--color-text-tertiary);background:var(--color-bg-secondary);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:var(--space-4)}.loading-spinner{width:32px;height:32px;border:3px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.media-page{max-width:1200px;margin:0 auto}.upload-section{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-6)}.upload-section h2{font-size:18px;font-weight:600;margin-bottom:var(--space-4);color:var(--color-text-primary)}.upload-area{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.upload-button{background:var(--color-accent);color:#fff;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);cursor:pointer;font-weight:500;font-size:14px;transition:background .15s;display:inline-block}.upload-button:hover{background:var(--color-accent-hover)}.upload-button:disabled{background:var(--color-text-tertiary);cursor:not-allowed}.upload-hint{color:var(--color-text-secondary);font-size:13px}.media-list-section{background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6)}.media-list-section h2{font-size:18px;font-weight:600;margin-bottom:var(--space-4);color:var(--color-text-primary)}.loading,.empty-state{text-align:center;padding:var(--space-10);color:var(--color-text-secondary)}.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-4)}.media-card{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow .2s}.media-card:hover{box-shadow:var(--shadow-md)}.media-preview{position:relative;height:150px;background:var(--color-bg-secondary);display:flex;align-items:center;justify-content:center;overflow:hidden}.media-thumbnail{max-width:100%;max-height:100%;object-fit:contain}.media-type-badge{position:absolute;top:var(--space-2);right:var(--space-2);background:#000000b3;color:#fff;padding:2px 8px;border-radius:var(--radius-sm);font-size:12px;font-weight:500}.media-info{padding:var(--space-3)}.media-name{font-size:14px;font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}.media-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--color-text-secondary)}.delete-button{width:100%;padding:var(--space-2);background:#fff;border:1px solid #ef4444;color:#ef4444;border-radius:0 0 var(--radius-lg) var(--radius-lg);cursor:pointer;font-size:14px;font-weight:500;transition:all .15s}.delete-button:hover:not(:disabled){background:#ef4444;color:#fff}.delete-button:disabled{opacity:.5;cursor:not-allowed}