:root{--bg-color: #0f172a;--card-bg: #1e293b;--text-primary: #f8fafc;--text-secondary: #94a3b8;--primary-color: #3b82f6;--primary-hover: #2563eb;--secondary-color: #64748b;--secondary-hover: #475569;--success-color: #10b981;--error-color: #ef4444;--border-radius: 12px}body{margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--bg-color);color:var(--text-primary);-webkit-font-smoothing:antialiased}.app-container{max-width:800px;margin:0 auto;padding:2rem;min-height:100vh;display:flex;flex-direction:column;align-items:center}.app-header{text-align:center;margin-bottom:2rem}.app-header h1{font-size:2.5rem;font-weight:700;margin:0;background:linear-gradient(to right,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.app-header p{color:var(--text-secondary);margin-top:.5rem}.main-content{width:100%;background-color:var(--card-bg);padding:2rem;border-radius:var(--border-radius);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.input-section{margin-bottom:2rem}.input-group{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:1rem;color:var(--text-secondary)}.text-input{width:100%;padding:1rem 1rem 1rem 3rem;background-color:var(--bg-color);border:1px solid #334155;border-radius:var(--border-radius);color:var(--text-primary);font-size:1rem;transition:border-color .2s}.text-input:focus{outline:none;border-color:var(--primary-color)}.camera-section{display:flex;justify-content:center;margin-bottom:2rem}.camera-container{width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem}.camera-wrapper{width:100%;max-width:640px;border-radius:var(--border-radius);overflow:hidden;background-color:#000;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}.webcam-view,.captured-image{width:100%;height:100%;object-fit:cover}.controls{display:flex;gap:1rem}.btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border:none;border-radius:var(--border-radius);font-weight:600;cursor:pointer;transition:all .2s;font-size:1rem}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--primary-hover)}.btn-secondary{background-color:var(--secondary-color);color:#fff}.btn-secondary:hover:not(:disabled){background-color:var(--secondary-hover)}.actions-section{display:flex;gap:1rem;justify-content:center;margin-bottom:2rem}.action-btn{min-width:150px;justify-content:center}.message-box{padding:1rem;border-radius:var(--border-radius);display:flex;align-items:center;gap:.75rem;animation:fadeIn .3s ease-in}.message-box.success{background-color:#10b9811a;color:var(--success-color);border:1px solid rgba(16,185,129,.2)}.message-box.error{background-color:#ef44441a;color:var(--error-color);border:1px solid rgba(239,68,68,.2)}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}