:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#0a0a0a,#1a1a1a);color:#fff;line-height:1.6;overflow-x:hidden;margin:0;padding:0;width:100vw;min-height:100vh}.app{width:100vw;min-height:100vh;padding:0;margin:0;display:flex;flex-direction:column}header{width:100%;text-align:center;padding:3rem 2rem;background:linear-gradient(135deg,#1a1a1a,#2a2a2a);border-bottom:2px solid #00d4ff;position:relative;overflow:hidden;margin:0}header h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;margin-bottom:1rem;position:relative;z-index:1;text-align:center}header h1 span{background:linear-gradient(135deg,#00d4ff,#fff,#00d4ff);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}header p{font-size:clamp(1rem,2.5vw,1.2rem);color:#b0b0b0;max-width:600px;margin:0 auto;position:relative;z-index:1;text-align:center;padding:0 1rem}main{width:100%;max-width:1400px;margin:0 auto;padding:2rem;display:grid;gap:2rem;box-sizing:border-box}section{background:#2a2a2acc;border-radius:20px;padding:2rem;border:1px solid rgba(0,212,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;position:relative;overflow:hidden;width:100%;box-sizing:border-box}section:hover{border-color:#00d4ff66;transform:translateY(-2px);box-shadow:0 10px 30px #00d4ff33}section h2{font-size:1.8rem;color:#00d4ff;margin-bottom:1.5rem;display:flex;align-items:center;gap:.5rem}.input-method-selector{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap;justify-content:center}.input-method-selector label{display:flex;align-items:center;gap:.5rem;padding:.8rem 1.5rem;background:#0000004d;border:2px solid rgba(255,255,255,.1);border-radius:15px;cursor:pointer;transition:all .3s ease;font-weight:500;-webkit-user-select:none;user-select:none;min-width:120px;justify-content:center;text-align:center}.input-method-selector label:hover{border-color:#00d4ff80;background:#00d4ff1a}.input-method-selector label.active{border-color:#00d4ff;background:#00d4ff33;color:#00d4ff}.input-method-selector input[type=radio]{display:none}.input-content{display:flex;flex-direction:column;gap:1rem}.file-input input[type=file]{padding:1rem;background:#0000004d;border:2px dashed rgba(0,212,255,.3);border-radius:15px;color:#fff;cursor:pointer;transition:all .3s ease;width:100%}.file-input input[type=file]:hover{border-color:#00d4ff;background:#00d4ff1a}.file-info{color:#00d4ff;font-size:.9rem;margin-top:.5rem}textarea,input[type=url],input[type=text]{background:#0006;border:2px solid rgba(255,255,255,.1);border-radius:15px;padding:1rem 1.5rem;color:#fff;font-size:1rem;font-family:inherit;resize:vertical;transition:all .3s ease;width:100%}textarea:focus,input:focus{outline:none;border-color:#00d4ff;box-shadow:0 0 20px #00d4ff4d;background:#0009}textarea::placeholder,input::placeholder{color:#888}.suggested-questions{display:flex;flex-direction:column;gap:1rem}.questions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}.suggestion-button{background:#0000004d;border:2px solid rgba(255,255,255,.1);border-radius:15px;padding:1rem 1.5rem;color:#fff;text-align:left;cursor:pointer;transition:all .3s ease;font-size:.9rem;line-height:1.4}.suggestion-button:hover{border-color:#00d4ff80;background:#00d4ff1a}.suggestion-button.selected{border-color:#00d4ff;background:#00d4ff33;color:#00d4ff}.selected-question{background:#00d4ff1a;border:1px solid rgba(0,212,255,.3);border-radius:15px;padding:1rem}.selected-question strong{color:#00d4ff}button{background:linear-gradient(135deg,#00d4ff,#09c);border:none;border-radius:15px;padding:1rem 2rem;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px;position:relative;overflow:hidden}button:hover{transform:translateY(-2px);box-shadow:0 10px 25px #00d4ff66}button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.upload-button,.analyze-button{align-self:flex-start;margin-top:1rem}.status{padding:1rem;border-radius:15px;margin-top:1rem;font-weight:500}.status.success{background:#00ff001a;border:1px solid rgba(0,255,0,.3);color:#0f8}.status.error{background:#ff00001a;border:1px solid rgba(255,0,0,.3);color:#ff6b6b}.results-section{background:linear-gradient(135deg,#00d4ff1a,#2a2a2acc)}.results-content{display:flex;flex-direction:column;gap:2rem}.text-result{background:#0006;border-radius:15px;padding:1.5rem;border:1px solid rgba(0,212,255,.2)}.text-result h3{color:#00d4ff;margin-bottom:1rem;font-size:1.3rem}.text-result pre{color:#e0e0e0;white-space:pre-wrap;word-wrap:break-word;line-height:1.6;font-size:.95rem;font-family:Fira Code,monospace}.image-result{background:#0006;border-radius:15px;padding:1.5rem;border:1px solid rgba(0,212,255,.2)}.image-result h3{color:#00d4ff;margin-bottom:1rem;font-size:1.3rem}.image-container{display:flex;flex-direction:column;gap:1rem;align-items:center}.image-container img{max-width:100%;height:auto;border-radius:10px;cursor:pointer;transition:all .3s ease;border:2px solid rgba(0,212,255,.3)}.image-container img:hover{transform:scale(1.02);border-color:#00d4ff;box-shadow:0 10px 30px #00d4ff4d}.image-actions{display:flex;gap:1rem}.download-button,.export-button{background:linear-gradient(135deg,#28a745,#20c997);padding:.8rem 1.5rem;font-size:.9rem}.result-actions{display:flex;gap:1rem;justify-content:center;margin-top:1rem}.history-section{background:linear-gradient(135deg,#ffffff0d,#2a2a2acc)}.history-list{display:grid;gap:1rem}.history-item{background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:15px;padding:1rem;transition:all .3s ease}.history-item:hover{border-color:#00d4ff4d;transform:translate(5px)}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.timestamp{color:#888;font-size:.85rem}.reload-button{background:linear-gradient(135deg,#6c757d,#495057);padding:.5rem 1rem;font-size:.8rem}.history-question{color:#e0e0e0;margin-bottom:1rem;line-height:1.4}.history-preview{display:flex;justify-content:center}.history-preview img{max-width:200px;height:auto;border-radius:8px;cursor:pointer;transition:all .3s ease;border:1px solid rgba(0,212,255,.2)}.history-preview img:hover{transform:scale(1.1);border-color:#00d4ff}.error{background:#ff00001a;border:2px solid rgba(255,0,0,.3);border-radius:15px;padding:1.5rem;color:#ff6b6b;text-align:center}.progress-section{margin:1.5rem 0;padding:1.5rem;background:#0000004d;border-radius:15px;border:1px solid rgba(0,212,255,.3)}.progress-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.processing-step{color:#00d4ff;font-weight:500;font-size:.95rem}.progress-percent{color:#fff;font-weight:600;font-size:.9rem}.progress-bar{width:100%;height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden;margin-bottom:1rem}.progress-fill{height:100%;background:linear-gradient(90deg,#00d4ff,#09c);border-radius:4px;transition:width .3s ease;position:relative}.progress-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.loading-dots{display:flex;justify-content:center;gap:.5rem}.loading-dots span{width:8px;height:8px;background:#00d4ff;border-radius:50%;animation:bounce 1.4s infinite ease-in-out both}.loading-dots span:nth-child(1){animation-delay:-.32s}.loading-dots span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(.8);opacity:.5}40%{transform:scale(1.2);opacity:1}}.loading-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite;margin-right:.5rem}@keyframes spin{to{transform:rotate(360deg)}}.data-preview-section{background:linear-gradient(135deg,#00ff881a,#2a2a2acc);border-color:#00ff884d}.preview-content{display:flex;flex-direction:column;gap:1.5rem}.preview-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.stat-item{display:flex;flex-direction:column;gap:.3rem;padding:1rem;background:#0000004d;border-radius:10px;border:1px solid rgba(0,255,136,.2)}.stat-label{font-size:.85rem;color:#0f8;font-weight:500}.stat-value{font-size:1.1rem;color:#fff;font-weight:600}.data-sample{background:#0006;border-radius:10px;padding:1.5rem;border:1px solid rgba(0,255,136,.2)}.data-sample h4{color:#0f8;margin-bottom:1rem;font-size:1.1rem}.sample-table{background:#0009;border-radius:8px;padding:1rem;max-height:300px;overflow-y:auto;border:1px solid rgba(0,255,136,.1)}.sample-table pre{color:#e0e0e0;font-family:Fira Code,Consolas,monospace;font-size:.85rem;line-height:1.4;margin:0;white-space:pre-wrap;word-wrap:break-word}@media (max-width: 1200px){main{max-width:100%;padding:1.5rem}}@media (max-width: 768px){header{padding:2rem 1rem}header h1{font-size:clamp(1.8rem,6vw,2.5rem)}header p{font-size:clamp(.9rem,3vw,1.1rem)}main{padding:1rem;gap:1.5rem}section{padding:1.5rem;border-radius:15px}.input-method-selector{flex-direction:column;align-items:stretch}.input-method-selector label{justify-content:center;min-width:unset}.server-status-indicator{font-size:.9rem;padding:.8rem 1.5rem;gap:.5rem;min-width:120px}.status-dot{width:6px;height:6px}.status-icon{font-size:.9rem}.questions-grid{grid-template-columns:1fr}.image-actions,.result-actions{flex-direction:column;gap:.5rem}.image-actions button,.result-actions button{width:100%}}@media (max-width: 480px){header{padding:1.5rem .5rem}header h1{font-size:clamp(1.5rem,7vw,2rem);margin-bottom:.5rem}header p{font-size:clamp(.8rem,4vw,1rem)}main{padding:.5rem;gap:1rem}section{padding:1rem;border-radius:12px}button{padding:.8rem 1.5rem;font-size:.9rem}.input-method-selector label{padding:.6rem 1rem;font-size:.9rem}.header-actions{flex-direction:column;gap:.5rem;width:100%}.header-actions button{width:100%;max-width:200px}}.header-content{display:flex;flex-direction:column;align-items:center;max-width:1200px;margin:0 auto;width:100%;gap:1.5rem}.header-actions{display:flex;gap:1rem;align-items:center;justify-content:center}.server-status-indicator{display:flex;align-items:center;gap:.77rem;border-radius:12px;padding:.8rem 1.5rem;font-size:.9rem;font-weight:600;transition:all .3s ease;min-width:140px;justify-content:center;white-space:nowrap}.server-status-indicator.healthy{background:#22c55e1a;border:1px solid rgba(34,197,94,.3);color:#22c55e}.server-status-indicator.checking{background:#3b82f61a;border:1px solid rgba(59,130,246,.3);color:#3b82f6}.server-status-indicator.waking{background:#f973161a;border:1px solid rgba(249,115,22,.3);color:#f97316}.server-status-indicator.almost-ready{background:#f59e0b1a;border:1px solid rgba(245,158,11,.3);color:#f59e0b}.status-icon{font-size:1rem;animation:spin 1.5s linear infinite;width:1rem;height:1rem;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.status-dot{width:8px;height:8px;background:#22c55e;border-radius:50%;animation:statusPulse 2s ease-in-out infinite;flex-shrink:0}@keyframes statusPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}.help-button,.features-button,.examples-button{background:linear-gradient(135deg,#00d4ff,#09c);border:none;color:#000;padding:.8rem 1.5rem;border-radius:12px;cursor:pointer;font-weight:600;font-size:.9rem;transition:all .3s ease;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}.button-emoji{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,-1px 0 0 #000,1px 0 0 #000,0 -1px 0 #000,0 1px 0 #000;filter:contrast(1.2) brightness(1.1)}.help-button:hover,.features-button:hover,.examples-button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #00d4ff4d;background:linear-gradient(135deg,#00e6ff,#00b3d9)}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000;padding:1rem}.modal-content{background:linear-gradient(135deg,#1a1a1a,#2a2a2a);border-radius:20px;width:90%;max-width:800px;max-height:90vh;overflow-y:auto;border:2px solid #00d4ff;box-shadow:0 20px 60px #00d4ff4d}.large-modal{max-width:1000px}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:2rem;border-bottom:1px solid #333}.modal-header h2{color:#00d4ff;font-size:1.8rem;font-weight:700;margin:0;flex:1}.close-button{background:#ff4757;border:none;color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.2rem;font-weight:700;transition:all .3s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.close-button:hover{background:#ff3742;transform:scale(1.1)}.modal-body{padding:2rem}.help-section{margin-bottom:2rem}.help-section h3{color:#00d4ff;font-size:1.3rem;margin-bottom:1rem;border-bottom:1px solid #333;padding-bottom:.5rem}.help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-top:1rem}.help-item{background:#00d4ff1a;padding:1.5rem;border-radius:12px;border:1px solid rgba(0,212,255,.3)}.help-item strong{color:#00d4ff;display:block;margin-bottom:.5rem;font-size:1.1rem}.help-section ol{padding-left:1.5rem}.help-section ol li{margin-bottom:.8rem;line-height:1.6}.help-section ul{padding-left:1.5rem}.help-section ul li{margin-bottom:.5rem;line-height:1.5}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.feature-card{background:#00d4ff1a;padding:2rem;border-radius:15px;border:1px solid rgba(0,212,255,.3);text-align:center;transition:all .3s ease}.feature-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #00d4ff33;border-color:#00d4ff}.feature-icon{font-size:3rem;margin-bottom:1rem;display:block}.feature-card h3{color:#00d4ff;font-size:1.3rem;margin-bottom:1rem;font-weight:600}.feature-card p{line-height:1.6;opacity:.9}.examples-section{margin-bottom:3rem}.examples-section h3{color:#00d4ff;font-size:1.4rem;margin-bottom:1.5rem;border-bottom:1px solid #333;padding-bottom:.5rem}.example-item{background:#00d4ff1a;padding:1.5rem;border-radius:12px;margin-bottom:1rem;border:1px solid rgba(0,212,255,.3)}.example-item strong{color:#00d4ff;display:block;margin-bottom:.5rem}.example-item code{background:#00000080;padding:.5rem;border-radius:8px;font-family:Courier New,monospace;display:block;margin:.5rem 0;color:#0f8;border:1px solid #333}.example-categories{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.example-category{background:#00d4ff1a;padding:1.5rem;border-radius:12px;border:1px solid rgba(0,212,255,.3)}.example-category h4{color:#00d4ff;margin-bottom:1rem;font-size:1.1rem}.example-category ul{padding-left:1rem}.example-category li{margin-bottom:.7rem;line-height:1.5;font-style:italic;opacity:.9}.use-cases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.use-case{background:#00d4ff1a;padding:1.5rem;border-radius:12px;border:1px solid rgba(0,212,255,.3);text-align:center}.use-case strong{color:#00d4ff;display:block;margin-bottom:.8rem;font-size:1.1rem}.backend-status{background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid rgba(255,193,7,.5);border-radius:15px;padding:1.5rem;margin-bottom:2rem;animation:pulse 2s infinite}.status-content{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.status-icon{font-size:2rem}.backend-status.waking .status-icon,.backend-status.checking .status-icon{animation:spin 1.5s linear infinite}.server-status-indicator.almost-ready .status-icon{animation:spin 2s linear infinite}.backend-status.checking{border-color:#3b82f680}.backend-status.checking .status-message{color:#3b82f6}.backend-status.waking{border-color:#f9731680}.backend-status.waking .status-message{color:#f97316}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{box-shadow:0 0 #ffc1074d}50%{box-shadow:0 0 0 10px #ffc10700}}.backend-status.checking{animation:pulseBlue 2s infinite}.backend-status.waking{animation:pulseOrange 2s infinite}.server-status-indicator.almost-ready{animation:pulseYellow 2s infinite}@keyframes pulseBlue{0%,to{box-shadow:0 0 #3b82f64d}50%{box-shadow:0 0 0 10px #3b82f600}}@keyframes pulseOrange{0%,to{box-shadow:0 0 #f973164d}50%{box-shadow:0 0 0 10px #f9731600}}@keyframes pulseYellow{0%,to{box-shadow:0 0 #f59e0b4d}50%{box-shadow:0 0 0 10px #f59e0b00}}.status-message{flex:1;color:#ffc107;font-weight:600}.status-message strong{color:#fff}.progress-bar-container{width:100%;margin-top:1rem}.progress-bar{width:100%;height:8px;background:#ffffff1a;border-radius:10px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#00d4ff,#09c,#00d4ff);background-size:200% 100%;border-radius:10px;animation:progressPulse 2s ease-in-out infinite;width:70%}@keyframes progressPulse{0%{width:30%;background-position:0% 50%}50%{width:70%;background-position:100% 50%}to{width:30%;background-position:0% 50%}}.backend-status.healthy{display:none}@media (max-width: 768px){.backend-status{padding:1rem}.status-content{flex-direction:column;text-align:center;gap:.8rem}.status-icon{font-size:1.5rem}}@media (max-width: 768px){.modal-content{width:95%;margin:1rem}.modal-header,.modal-body{padding:1.5rem}.modal-header h2{font-size:1.5rem}.help-grid,.features-grid,.example-categories,.use-cases-grid{grid-template-columns:1fr;gap:1rem}.feature-card,.help-item,.example-category,.use-case{padding:1.5rem}}