*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #667eea;--primary-dark: #5568d3;--secondary: #764ba2;--danger: #ef4444;--success: #10b981;--text: #1f2937;--text-light: #6b7280;--border: #e5e7eb;--bg: #f9fafb;--white: #ffffff;--shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);min-height:100vh;color:var(--text)}#app{min-height:100vh}.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem}.auth-card{background:var(--white);border-radius:1rem;padding:3rem;width:100%;max-width:420px;box-shadow:var(--shadow-lg);animation:fadeInUp .5s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.auth-card h1{font-size:2rem;font-weight:700;color:var(--text);margin-bottom:.5rem}.subtitle{color:var(--text-light);margin-bottom:2rem}.auth-form{display:flex;flex-direction:column;gap:1.25rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:500;font-size:.875rem;color:var(--text)}.form-group input{padding:.75rem 1rem;border:1px solid var(--border);border-radius:.5rem;font-size:1rem;transition:all .2s}.form-group input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #667eea1a}.btn{padding:.75rem 1.5rem;border:none;border-radius:.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.btn-primary{background:var(--primary);color:var(--white)}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-lg)}.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-secondary{background:var(--bg);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:#f3f4f6}.btn-icon{background:none;border:none;cursor:pointer;font-size:1.25rem;padding:.5rem;border-radius:.375rem;transition:all .2s}.btn-icon:hover{background:var(--bg)}.error-message{color:var(--danger);font-size:.875rem;padding:.75rem;background:#fee2e2;border-radius:.5rem;display:none}.error-message:not(:empty){display:block}.switch-form{text-align:center;margin-top:1.5rem;color:var(--text-light)}.switch-form a{color:var(--primary);text-decoration:none;font-weight:600}.switch-form a:hover{text-decoration:underline}.demo-credentials{margin-top:2rem;padding:1rem;background:#f0f9ff;border:1px solid #bfdbfe;border-radius:.5rem;font-size:.875rem}.demo-credentials p{margin:.25rem 0;color:var(--text-light)}.demo-credentials strong{color:var(--text)}.menu-bar{background:var(--white);box-shadow:var(--shadow);position:sticky;top:0;z-index:100}.menu-container{max-width:1400px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:4rem}.menu-logo{display:flex;align-items:center;gap:.75rem}.logo-text{font-weight:700;font-size:1.25rem;color:var(--text)}.menu-items{display:flex;list-style:none;gap:.5rem;margin:0;padding:0}.menu-item a{display:flex;align-items:center;padding:.625rem 1rem;border-radius:.5rem;text-decoration:none;color:var(--text-light);font-weight:500;transition:all .2s}.menu-item a:hover{background:var(--bg);color:var(--text)}.menu-item.active a{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:var(--white)}.menu-actions{display:flex;align-items:center;gap:1rem}.menu-btn{display:flex;align-items:center;padding:.5rem 1rem;background:var(--bg);border:1px solid var(--border);border-radius:.5rem;cursor:pointer;transition:all .2s;font-size:.9375rem}.menu-btn:hover{background:#f3f4f6;border-color:var(--primary)}.dashboard{min-height:100vh;background:var(--bg);background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%)}.dashboard-header{background:var(--white);box-shadow:var(--shadow);padding:1.5rem 2rem}.header-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.dashboard-header h1{font-size:1.75rem;color:var(--text)}.user-info{display:flex;align-items:center;gap:1rem}.user-name{font-weight:500;color:var(--text)}.dashboard-main{max-width:1200px;margin:0 auto;padding:2rem;display:grid;gap:2rem}.upload-section{background:var(--white);border-radius:1rem;padding:2rem;box-shadow:var(--shadow-lg)}.upload-section h2{font-size:1.5rem;margin-bottom:1.5rem;color:var(--text)}.upload-section .form-group{margin-bottom:1.5rem}.input-hint{font-size:.8125rem;color:var(--text-light);margin-top:.375rem;margin-bottom:0}.upload-area{border:2px dashed var(--border);border-radius:.75rem;padding:3rem 2rem;text-align:center;cursor:pointer;transition:all .3s}.upload-area:hover,.upload-area.drag-over{border-color:var(--primary);background:#f0f9ff}.upload-icon{font-size:4rem;margin-bottom:1rem}.upload-text{font-size:1.125rem;font-weight:600;color:var(--text);margin-bottom:.5rem}.upload-hint{color:var(--text-light);font-size:.875rem}.upload-progress{margin-top:1.5rem;padding:1.5rem;background:var(--bg);border-radius:.75rem}.progress-bar{width:100%;height:.75rem;background:#e5e7eb;border-radius:9999px;overflow:hidden;margin-bottom:.75rem}.progress-fill{height:100%;background:var(--primary);border-radius:9999px;transition:width .3s ease}#progressText{text-align:center;font-weight:500;color:var(--text)}.files-section{background:var(--white);border-radius:1rem;padding:2rem;box-shadow:var(--shadow-lg)}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.section-header h2{font-size:1.5rem;color:var(--text)}.files-list{display:flex;flex-direction:column;gap:1rem}.file-item{display:flex;align-items:center;gap:1rem;padding:1.25rem;background:var(--bg);border-radius:.75rem;transition:all .2s}.file-item:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.file-icon{font-size:2.5rem;flex-shrink:0}.file-preview{width:80px;height:80px;flex-shrink:0;border-radius:.5rem;overflow:hidden;background:var(--bg);display:flex;align-items:center;justify-content:center}.preview-image{width:100%;height:100%;object-fit:cover;cursor:pointer;transition:transform .2s}.preview-image:hover{transform:scale(1.05)}.file-info{flex:1;min-width:0}.file-name{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-meta{font-size:.875rem;color:var(--text-light)}.file-actions{display:flex;gap:.5rem;flex-wrap:wrap}.file-actions .btn-icon{font-size:.875rem;padding:.5rem .75rem;background:var(--white);border:1px solid var(--border);color:var(--text);font-weight:500}.file-actions .btn-icon:hover{background:var(--primary);color:var(--white);border-color:var(--primary)}.file-actions .delete-btn:hover{background:var(--danger);border-color:var(--danger)}.loading,.no-files,.error{text-align:center;padding:3rem 2rem;color:var(--text-light);font-size:1rem}.error{color:var(--danger)}.projects-page{min-height:100vh;background:var(--bg);padding:2rem}.projects-container{max-width:1000px;margin:0 auto;background:var(--white);border-radius:1rem;box-shadow:var(--shadow-lg);overflow:hidden}.projects-header{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:var(--white);padding:3rem 2rem;text-align:center}.projects-header h1{font-size:2.5rem;margin-bottom:.5rem;color:var(--white)}.projects-header .subtitle{font-size:1.125rem;opacity:.9;color:var(--white)}.projects-content{padding:2rem}.create-project-section{margin-bottom:3rem;padding-bottom:2rem;border-bottom:2px solid var(--border)}.create-project-section h2,.projects-list-section h2{font-size:1.5rem;color:var(--text);margin-bottom:1.5rem}.project-form{display:flex;flex-direction:column;gap:1.5rem}.project-form textarea{padding:.75rem 1rem;border:1px solid var(--border);border-radius:.5rem;font-size:1rem;font-family:inherit;transition:all .2s;resize:vertical}.project-form textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #667eea1a}.projects-list{display:flex;flex-direction:column;gap:1rem}.project-item{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.5rem;background:var(--bg);border-radius:.75rem;border:1px solid var(--border);transition:all .2s}.project-item:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.project-info{flex:1;min-width:0}.project-name{font-size:1.125rem;font-weight:600;color:var(--text);margin-bottom:.5rem}.project-description{color:var(--text-light);font-size:.9375rem;margin-bottom:.75rem}.project-meta{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-light);margin-bottom:.5rem}.project-key-code{background:var(--white);padding:.25rem .5rem;border-radius:.25rem;font-family:Courier New,monospace;font-size:.8125rem;color:var(--primary);border:1px solid var(--border)}.project-meta-small{font-size:.75rem;color:var(--text-light)}.project-actions{display:flex;gap:.5rem;flex-shrink:0}.no-projects{text-align:center;padding:3rem 2rem;color:var(--text-light)}.users-page{min-height:100vh;background:var(--bg);padding:2rem}.users-container{max-width:800px;margin:0 auto;background:var(--white);border-radius:1rem;box-shadow:var(--shadow-lg);overflow:hidden}.users-header{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:var(--white);padding:3rem 2rem;text-align:center}.users-header h1{font-size:2.5rem;margin-bottom:.5rem;color:var(--white)}.users-header .subtitle{font-size:1.125rem;opacity:.9;color:var(--white)}.users-content{padding:2rem}.add-user-section h2{font-size:1.5rem;color:var(--text);margin-bottom:1.5rem;padding-bottom:.5rem;border-bottom:2px solid var(--border)}.user-form{display:flex;flex-direction:column;gap:1.5rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.success-message{color:var(--success);font-size:.875rem;padding:.75rem;background:#d1fae5;border-radius:.5rem;display:none}.success-message:not(:empty){display:block}.api-docs-page{min-height:100vh;background:var(--bg);padding:2rem}.api-docs-container{max-width:1000px;margin:0 auto;background:var(--white);border-radius:1rem;box-shadow:var(--shadow-lg);overflow:hidden}.api-docs-header{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:var(--white);padding:3rem 2rem;text-align:center}.api-docs-header h1{font-size:2.5rem;margin-bottom:.5rem;color:var(--white)}.api-docs-header .subtitle{font-size:1.125rem;opacity:.9;color:var(--white)}.api-docs-content{padding:2rem}.api-section{margin-bottom:3rem}.api-section:last-child{margin-bottom:0}.api-section h2{font-size:1.75rem;color:var(--text);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--border)}.api-section h4{font-size:1.125rem;color:var(--text);margin-top:1.5rem;margin-bottom:.75rem}.api-section p{color:var(--text-light);line-height:1.6;margin-bottom:1rem}.api-section ul{list-style:none;padding-left:0}.api-section ul li{padding:.5rem 0;color:var(--text-light);line-height:1.6}.api-section ul li code{background:var(--bg);padding:.125rem .5rem;border-radius:.25rem;font-family:Courier New,monospace;font-size:.875rem;color:var(--primary)}.code-block{background:#1e293b;border-radius:.5rem;padding:1.25rem;margin:1rem 0;overflow-x:auto}.code-block code,.code-block pre{color:#e2e8f0;font-family:Courier New,monospace;font-size:.875rem;line-height:1.6;margin:0;white-space:pre}.endpoint{background:var(--bg);border-radius:.75rem;padding:1.5rem;margin-bottom:2rem;border:1px solid var(--border)}.endpoint:last-child{margin-bottom:0}.endpoint-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.http-method{display:inline-block;padding:.375rem .75rem;border-radius:.375rem;font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}.http-method.get{background:#10b981;color:var(--white)}.http-method.post{background:#3b82f6;color:var(--white)}.http-method.delete{background:#ef4444;color:var(--white)}.endpoint-path{font-family:Courier New,monospace;font-size:1rem;font-weight:600;color:var(--text)}.endpoint-description{color:var(--text-light);margin-bottom:1rem}@media(max-width:768px){.auth-card{padding:2rem}.dashboard-main{padding:1rem}.upload-section,.files-section{padding:1.5rem}.file-item{padding:1rem}.file-name{font-size:.875rem}.file-meta{font-size:.75rem}}.settings-page{min-height:100vh;background:var(--bg);padding:2rem}.settings-container{max-width:800px;margin:0 auto;background:var(--white);border-radius:1rem;box-shadow:var(--shadow-lg);overflow:hidden}.settings-header{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:var(--white);padding:3rem 2rem;text-align:center}.settings-header h1{font-size:2.5rem;margin-bottom:.5rem;color:var(--white)}.settings-header .subtitle{font-size:1.125rem;opacity:.9;color:var(--white)}.settings-content{padding:2rem}.settings-section{margin-bottom:2.5rem}.settings-section:last-child{margin-bottom:0}.settings-section h2{font-size:1.5rem;color:var(--text);margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:2px solid var(--border)}.user-details-card{background:var(--bg);border:1px solid var(--border);border-radius:.75rem;padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem}.user-detail-row{display:flex;flex-direction:column;gap:.5rem}.user-detail-row label{font-size:.875rem;font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:.05em}.user-detail-value{font-size:1rem;color:var(--text);font-weight:500}.user-detail-value-with-copy{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.user-id-code{font-family:Courier New,Courier,monospace;background:var(--white);padding:.5rem .75rem;border-radius:.375rem;border:1px solid var(--border);font-size:.875rem;color:var(--primary);font-weight:600;flex:1;min-width:200px}.btn-copy{padding:.5rem 1rem;background:var(--primary);color:var(--white);border:none;border-radius:.375rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.btn-copy:hover{background:var(--primary-dark);transform:translateY(-1px)}.btn-copy.copied{background:var(--success)}.settings-actions{display:flex;flex-direction:column;gap:1rem}.settings-actions .btn{width:fit-content}@media(max-width:768px){.settings-page{padding:1rem}.settings-header{padding:2rem 1.5rem}.settings-header h1{font-size:2rem}.settings-content{padding:1.5rem}.user-detail-value-with-copy{flex-direction:column;align-items:stretch}.user-id-code{min-width:100%}.btn-copy{width:100%}}