.ai-image-caption{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;max-width:800px;margin:0 auto;padding:20px;--primary-color: #667eea;--primary-dark: #5a67d8;--secondary-color: #764ba2;--success-color: #10b981;--error-color: #ef4444;--warning-color: #f59e0b;--gray-50: #f8fafc;--gray-100: #f1f5f9;--gray-200: #e2e8f0;--gray-300: #cbd5e1;--gray-400: #94a3b8;--gray-500: #64748b;--gray-600: #475569;--gray-700: #334155;--gray-800: #1e293b;--gray-900: #0f172a}.image-caption-container{background:#fff;border-radius:20px;box-shadow:0 10px 40px #0000001a;overflow:hidden;border:1px solid var(--gray-200);transition:all .3s ease}.image-caption-container:hover{box-shadow:0 20px 60px #667eea26}.caption-header{display:flex;justify-content:space-between;align-items:center;padding:28px 32px;background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);color:#fff;position:relative;overflow:hidden}.caption-header:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');pointer-events:none}.caption-title{margin:0;font-size:26px;font-weight:800;display:flex;align-items:center;gap:12px;position:relative;z-index:1;text-shadow:0 2px 4px rgba(0,0,0,.1)}.title-icon{font-size:30px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.caption-controls{display:flex;gap:16px;align-items:center;position:relative;z-index:1}.model-select{padding:10px 16px;border:2px solid rgba(255,255,255,.2);border-radius:10px;background:#ffffff26;color:#fff;font-size:14px;font-weight:500;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:all .2s ease;cursor:pointer}.model-select:hover:not(:disabled){background:#ffffff40;border-color:#fff6}.model-select:focus{outline:none;background:#ffffff4d;border-color:#fff9}.model-select:disabled{opacity:.5;cursor:not-allowed}.clear-btn{padding:10px 18px;border:2px solid rgba(255,255,255,.3);border-radius:10px;background:#ffffff1a;color:#fff;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .3s ease;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.clear-btn:hover:not(:disabled){background:#fff3;border-color:#ffffff80;transform:translateY(-1px)}.clear-btn:disabled{opacity:.5;cursor:not-allowed}.upload-section{padding:32px;background:var(--gray-50)}.upload-area{border:3px dashed var(--gray-300);border-radius:16px;padding:48px 24px;text-align:center;cursor:pointer;transition:all .3s ease;position:relative;min-height:220px;display:flex;align-items:center;justify-content:center;background:#fff}.upload-area:hover:not(.upload-disabled){border-color:var(--primary-color);background:var(--gray-50);transform:translateY(-2px);box-shadow:0 8px 25px #667eea26}.upload-area.upload-active{border-color:var(--primary-color);background:#e0e7ff;transform:scale(1.02)}.upload-area.upload-disabled{opacity:.6;cursor:not-allowed}.upload-area.has-image{padding:0;border:none;background:transparent;transform:none}.file-input{display:none}.upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:16px}.upload-icon{font-size:48px;opacity:.6}.upload-text{text-align:center}.upload-primary{font-size:18px;font-weight:600;color:#1e293b;margin:0 0 8px}.upload-secondary{font-size:14px;color:#64748b;margin:0}.image-preview{position:relative;width:100%;height:300px;border-radius:12px;overflow:hidden}.preview-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.image-overlay{position:absolute;top:12px;right:12px}.remove-btn{width:32px;height:32px;border:none;border-radius:50%;background:#000000b3;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .2s ease}.remove-btn:hover{background:#000000e6;transform:scale(1.1)}.url-input-section{margin-top:16px}.url-input-group{display:flex;gap:8px}.url-input{flex:1;padding:12px 16px;border:2px solid #e2e8f0;border-radius:8px;font-size:14px;transition:border-color .2s ease}.url-input:focus{outline:none;border-color:#667eea}.url-input:disabled{opacity:.6;cursor:not-allowed}.url-load-btn{padding:12px 20px;border:none;border-radius:8px;background:#667eea;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.url-load-btn:hover:not(:disabled){background:#5a67d8;transform:translateY(-1px)}.url-load-btn:disabled{opacity:.6;cursor:not-allowed}.generate-section{padding:0 32px 32px;background:var(--gray-50)}.generate-btn{width:100%;padding:18px 32px;border:none;border-radius:14px;background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);color:#fff;font-size:17px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .3s ease;position:relative;overflow:hidden;text-transform:uppercase;letter-spacing:.5px}.generate-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.generate-btn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 12px 35px #667eea66}.generate-btn:hover:not(:disabled):before{left:100%}.generate-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.generate-btn.btn-loading{background:var(--gray-400)}.btn-spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.results-section{padding:0 24px 24px}.error-message{display:flex;gap:16px;padding:16px;background:#fef2f2;border:1px solid #fecaca;border-radius:12px;margin-bottom:16px}.error-icon{font-size:24px;flex-shrink:0}.error-content h4{margin:0 0 8px;color:#dc2626;font-size:16px}.error-content p{margin:0 0 12px;color:#7f1d1d;font-size:14px}.error-dismiss{padding:6px 12px;border:1px solid #dc2626;border-radius:6px;background:transparent;color:#dc2626;font-size:12px;cursor:pointer}.result-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.result-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;border-bottom:1px solid #e2e8f0}.result-header h4{margin:0;font-size:16px;color:#1e293b}.result-meta{display:flex;gap:8px}.model-badge,.time-badge{padding:4px 8px;border-radius:6px;font-size:12px;font-weight:600}.model-badge{background:#e0e7ff;color:#3730a3}.time-badge{background:#ecfdf5;color:#065f46}.result-content{padding:20px}.caption-text{font-size:16px;line-height:1.6;color:#1e293b;margin:0 0 16px;font-style:italic}.result-actions{display:flex;gap:8px}.action-btn{padding:8px 16px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;color:#64748b;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s ease}.action-btn:hover{border-color:#667eea;color:#667eea}.history-section{padding:24px;border-top:1px solid #e2e8f0;margin-top:24px}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.history-header h4{margin:0;font-size:16px;color:#1e293b}.history-controls{display:flex;gap:8px}.export-btn,.clear-history-btn{padding:6px 12px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;color:#64748b;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .2s ease}.export-btn:hover,.clear-history-btn:hover{border-color:#667eea;color:#667eea}.history-list{display:flex;flex-direction:column;gap:12px}.history-item{display:flex;gap:12px;padding:12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;cursor:pointer;transition:all .2s ease}.history-item:hover{border-color:#667eea;background:#f1f5f9}.history-image{width:60px;height:60px;border-radius:6px;overflow:hidden;flex-shrink:0}.history-image img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.history-content{flex:1;min-width:0}.history-caption{margin:0 0 8px;font-size:14px;color:#1e293b;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.history-meta{display:flex;gap:12px;font-size:12px;color:#64748b}@media (max-width: 768px){.ai-image-caption{padding:16px}.caption-header{flex-direction:column;gap:16px;align-items:stretch}.caption-controls{justify-content:space-between}.url-input-group{flex-direction:column}.result-header{flex-direction:column;gap:12px;align-items:stretch}.result-meta{justify-content:flex-start}.history-controls{flex-direction:column}}