:root{--primary-color: #2a95ed;--primary-light: #2a95ed;--primary-dark: #3a83be;--accent-color: #ff6b6b;--success-color: #4cd964;--warning-color: #ffcc00;--danger-color: #ff3b30;--background-color: #f8f9fa;--card-background: #ffffff;--text-color: #333333;--text-secondary: #6c757d;--border-radius: 16px;--shadow-sm: 0 2px 10px rgba(0, 0, 0, .05);--shadow-md: 0 5px 20px rgba(0, 0, 0, .08);--shadow-lg: 0 10px 30px rgba(0, 0, 0, .1);--transition: all .3s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:var(--background-color);color:var(--text-color);line-height:1.6;padding:20px;min-height:100vh;display:flex;justify-content:center;background-image:linear-gradient(135deg,#f5f7fa 0%,#bad6ff 100%)}.app-container{width:100%;max-width:900px;display:flex;flex-direction:column;gap:20px}.header{text-align:center;margin-bottom:10px;animation:fadeIn .8s ease-in-out}.header h1{font-size:2.5rem;color:var(--primary-color);margin-bottom:5px;font-weight:700;letter-spacing:-.5px}.header .subtitle{color:var(--text-secondary);font-size:1.1rem;font-weight:400}.card{background-color:var(--card-background);border-radius:var(--border-radius);box-shadow:var(--shadow-md);padding:20px;transition:var(--transition);overflow:hidden}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}.main-card{margin-bottom:10px}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;border-bottom:2px solid rgba(138,43,226,.1);padding-bottom:10px}.card-header h2{font-size:1.5rem;color:var(--primary-color);font-weight:600}.btn{padding:12px 20px;border:none;border-radius:50px;cursor:pointer;font-size:1rem;font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px;transition:var(--transition);color:#fff;box-shadow:0 4px 10px #0000001a}.btn i{font-size:1.1rem}.upload-btn{background-color:var(--primary-color)}.upload-btn:hover{background-color:var(--primary-light);transform:translateY(-2px)}.clear-btn{background-color:var(--danger-color)}.clear-btn:hover{background-color:#ff5447;transform:translateY(-2px)}.export-btn{background-color:var(--warning-color);color:#333}.export-btn:hover{background-color:#ffd60a;transform:translateY(-2px)}.copy-btn{background-color:var(--primary-color);padding:8px 15px}.copy-btn:hover{background-color:var(--primary-light)}.upload-area{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;margin-bottom:20px}.image-preview{display:none;animation:slideDown .4s ease-out;overflow:hidden}.preview-header{display:flex;align-items:center;margin-bottom:15px}.preview-header h3{font-size:1.2rem;color:var(--success-color);display:flex;align-items:center;gap:8px}.preview-content{display:flex;justify-content:center;margin:15px 0;background-color:#00000005;border-radius:12px;padding:10px;border:1px dashed #ddd}.preview-content img{max-width:100%;max-height:300px;border-radius:8px;object-fit:contain;box-shadow:var(--shadow-sm)}.url-preview{display:flex;gap:10px;margin-top:15px}.url-input{flex:1;padding:12px 15px;border:2px solid #e0e0e0;border-radius:50px;font-size:.95rem;transition:var(--transition);background-color:#f8f9fa}.url-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #8a2be21a}.image-history{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;padding:10px}.history-item{background-color:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--transition);border:1px solid #eaeaea;height:100%;display:flex;flex-direction:column}.history-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--primary-light)}.history-item img{width:100%;height:150px;object-fit:cover;border-bottom:1px solid #eaeaea}.history-item-content{padding:12px;display:flex;flex-direction:column;gap:8px;flex:1}.history-item-title{font-size:.9rem;font-weight:500;color:var(--text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px}.history-item-date{font-size:.8rem;color:var(--text-secondary);margin-bottom:10px}.history-item .url-preview{margin-top:auto}.history-item .url-input{font-size:.8rem;padding:8px 12px}.history-item .copy-btn{padding:8px;font-size:.8rem}.empty-state{text-align:center;padding:40px 0;color:var(--text-secondary)}.empty-state i{font-size:3rem;margin-bottom:15px;color:#ddd}.empty-state p{font-size:1.1rem}.footer{text-align:center;color:var(--text-secondary);font-size:.9rem;margin-top:20px;padding:15px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{box-shadow:0 0 #8a2be266}70%{box-shadow:0 0 0 10px #8a2be200}to{box-shadow:0 0 #8a2be200}}.disclaimer-card{background-color:#fff8f8;border-left:4px solid var(--danger-color);margin-bottom:20px;position:relative;animation:attention 2s infinite}.disclaimer-header{color:var(--danger-color);font-weight:600;font-size:1.2rem;display:flex;align-items:center;gap:10px;margin-bottom:10px}.disclaimer-header i{font-size:1.4rem}.disclaimer-content{font-size:.95rem;line-height:1.5;color:#555}.disclaimer-content p{margin-bottom:10px}.disclaimer-content strong{color:var(--danger-color);font-weight:600}.disclaimer-footer{font-size:.8rem;color:var(--danger-color);margin-top:5px}@keyframes attention{0%{box-shadow:0 0 #ff3b3066}70%{box-shadow:0 0 0 6px #ff3b3000}to{box-shadow:0 0 #ff3b3000}}.tech-info{text-align:center;color:var(--text-secondary);font-size:.9rem;margin:15px 0;padding:8px;background-color:#00000008;border-radius:50px;display:flex;align-items:center;justify-content:center;gap:8px}.tech-info i{color:var(--primary-color)}@media (max-width: 768px){.app-container{padding:10px}.header h1{font-size:2rem}.card{padding:15px}.image-history{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}@media (max-width: 480px){.btn{padding:10px 15px;font-size:.9rem}.upload-area{flex-direction:column;width:100%}.upload-area .btn{width:100%}.image-history{grid-template-columns:1fr}}