@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";
*{box-sizing:border-box;margin:0;padding:0}body{color:#f8fafc;background:linear-gradient(135deg,#0f172a,#1e293b);min-height:100vh;font-family:Outfit,sans-serif}.app-container{justify-content:center;align-items:center;min-height:100vh;display:flex}.main-container{width:100%;max-width:480px;padding:2rem}.content-wrapper{-webkit-backdrop-filter:blur(20px);background:#ffffff08;border:1px solid #ffffff1a;border-radius:24px;padding:2rem;box-shadow:0 25px 50px -12px #00000080}.header{text-align:center;margin-bottom:2rem}.title{background:linear-gradient(90deg,#60a5fa,#c084fc);color:#0000;-webkit-background-clip:text;margin-bottom:.5rem;font-size:2.5rem;font-weight:700}.subtitle{color:#94a3b8;font-size:1rem}.mode-selector{background:#0003;border-radius:16px;margin-bottom:1.5rem;padding:.5rem;display:flex}.mode-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:12px;flex-direction:column;flex:1;align-items:center;gap:.5rem;padding:.75rem;font-family:Outfit,sans-serif;font-weight:500;transition:all .3s;display:flex}.mode-btn:hover{color:#cbd5e1;background:#ffffff0d}.mode-btn.active{color:#fff;background:#6366f1cc;box-shadow:0 4px 15px #6366f166}.live-btn.active{background:#ef4444cc;animation:2s infinite pulse;box-shadow:0 4px 15px #ef444466}@keyframes pulse{0%{box-shadow:0 0 #ef444466}70%{box-shadow:0 0 0 10px #ef444400}to{box-shadow:0 0 #ef444400}}.video-container{margin-bottom:1.5rem;position:relative}.video-wrapper{background:#000;border:1px solid #ffffff1a;border-radius:16px;position:relative;overflow:hidden;box-shadow:0 10px 25px #00000080}.live-video{object-fit:cover;width:100%;max-height:320px;display:block}.live-loader{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0006;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.camera-controls,.live-controls{justify-content:center;gap:1rem;margin-top:1rem;display:flex}.capture-btn-large{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;transition:transform .2s;display:flex;box-shadow:0 8px 20px #6366f166}.capture-btn-large:hover{transform:scale(1.05)}.capture-btn-large:active{transform:scale(.95)}.cancel-btn,.stop-btn{color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:32px;align-items:center;gap:.5rem;height:44px;padding:0 1.5rem;font-family:Outfit,sans-serif;transition:all .2s;display:flex}.capture-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:32px;align-items:center;gap:.5rem;height:44px;padding:0 1.5rem;font-family:Outfit,sans-serif;transition:transform .2s;display:flex;box-shadow:0 4px 15px #6366f166}.capture-btn:hover{transform:scale(1.05)}.cancel-btn:hover{background:#fff3}.stop-btn{color:#fca5a5;background:#ef444433;border-color:#ef444480}.stop-btn:hover{background:#ef444466}.card{background:#0003;border:1px dashed #fff3;border-radius:16px;margin-bottom:1.5rem;transition:all .3s;overflow:hidden}.card:hover{background:#6366f10d;border-color:#6366f180}.preview-container{justify-content:center;align-items:center;min-height:240px;padding:1rem;display:flex}.preview-image{border-radius:12px;max-width:100%;max-height:300px;box-shadow:0 8px 20px #0006}.empty-state{color:#64748b;cursor:pointer;flex-direction:column;align-items:center;gap:1rem;padding:3rem;display:flex}.empty-icon{color:#475569;transition:color .3s}.empty-state:hover .empty-icon{color:#8b5cf6}.result-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:20px;margin-bottom:1.5rem;padding:1.5rem;animation:.4s ease-out slideUp;box-shadow:0 10px 30px #0000004d}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.result-main{border-bottom:1px solid #ffffff1a;align-items:center;gap:1.5rem;margin-bottom:1.5rem;padding-bottom:1.5rem;display:flex}.result-icon{color:#a78bfa;background:linear-gradient(135deg,#6366f133,#8b5cf633);border-radius:20px;justify-content:center;align-items:center;width:72px;height:72px;display:flex}.result-info{flex:1}.result-class{color:#fff;margin-bottom:.25rem;font-size:2rem;font-weight:700;display:block}.result-confidence{color:#34d399;background:#34d3991a;border-radius:12px;align-items:center;padding:.25rem .75rem;font-size:1rem;font-weight:500;display:inline-flex}.scores-grid{flex-direction:column;gap:1rem;display:flex}.score-item{grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;display:grid}.score-header{color:#cbd5e1;text-transform:capitalize;align-items:center;gap:.5rem;width:90px;font-size:.9rem;display:flex}.score-bar{background:#ffffff1a;border-radius:4px;height:8px;overflow:hidden}.score-fill{background:linear-gradient(90deg,#6366f1,#8b5cf6);border-radius:4px;height:100%;transition:width .5s cubic-bezier(.4,0,.2,1)}.score-value{text-align:right;color:#fff;width:50px;font-size:.9rem;font-weight:500}.actions{justify-content:center;display:flex}.action-btn{cursor:pointer;color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:14px;align-items:center;gap:.5rem;padding:.875rem 2rem;font-family:Outfit,sans-serif;font-size:1rem;font-weight:600;transition:all .2s;display:flex;box-shadow:0 4px 15px #6366f14d}.action-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px #6366f166}.loading{color:#a78bfa;justify-content:center;align-items:center;gap:1rem;padding:1.5rem;font-weight:500;display:flex}.spin-icon{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-message{color:#fca5a5;background:#ef44441a;border:1px solid #ef444433;border-radius:12px;align-items:center;gap:.75rem;margin-bottom:1.5rem;padding:1rem;display:flex}