:root { --primary: #6366F1; --primary-hover: #4F46E5; --background: #111827; --card-bg: rgba(255, 255, 255, 0.05); --card-border: rgba(255, 255, 255, 0.1); --text-light: #F9FAFB; --text-muted: #9CA3AF; --error: #EF4444; --success: #10B981; --radius-lg: 16px; --radius-md: 12px; --radius-sm: 8px; --shadow: 0 10px 30px rgba(0, 0, 0, 0.2); --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background-color: var(--background); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; scroll-behavior: smooth; }
body { margin: 0; padding: 0; min-height: 100vh; color: var(--text-light); background: linear-gradient(180deg, #1F2937 0%, #111827 100%); line-height: 1.6; }
main { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
.page-title { text-align: center; margin-bottom: 40px; font-size: 42px; font-weight: 700; background: linear-gradient(90deg, #6366F1, #8B5CF6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-subtitle { text-align: center; color: var(--text-muted); max-width: 700px; margin: 0 auto 40px; font-size: 18px; }
.try-it { width: 100%; max-width: 1100px; margin: 0 auto; }
.model-card {border-radius: var(--radius-lg); background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--shadow); transition: var(--transition); overflow: hidden; }
.model-card:hover {box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); }
.model-card-container { display: flex; flex-direction: row; width: 100%; padding: 24px; gap: 24px; }
.model-card-col { display: flex; flex-direction: column; width: 100%; }
.image-input { width: 100%; max-width: 400px; }
.model-input-col { display: flex; flex-direction: column; width: 100%; border-radius: var(--radius-md); }
.show-for-file-upload-mode { width: 100%; margin-bottom: 20px; }
.model-input-file-picker { display: none; }
.upload-area { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; border-radius: var(--radius-md); border: 2px dashed var(--card-border); background: rgba(20, 16, 39, 0.5); transition: var(--transition); cursor: pointer; text-align: center; }
.upload-area:hover { border-color: var(--primary); background: rgba(45, 40, 60, 0.3); }
.upload-icon { width: 60px; height: 60px; margin-bottom: 20px; fill: var(--primary); }
.drag-and-drop { color: var(--text-light); font-size: 18px; font-weight: 500; margin-bottom: 8px; }
.subtext-caption { color: var(--text-muted); font-size: 14px; margin-bottom: 16px; }
.hyperlink { color: var(--text-muted); text-decoration: none; transition: var(--transition); }
.hyperlink:hover { color: var(--primary); text-decoration: underline; }
.copy-paste { color: var(--text-muted); font-size: 14px; margin-top: 16px; }
#paste-area { background: rgba(74, 66, 97, 0.7); border: none; color: white; padding: 6px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); font-size: 14px; }
#paste-area:hover { background: var(--primary); }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; font-size: 16px; font-weight: 600; border-radius: 100px; cursor: pointer; transition: var(--transition); border: none; white-space: nowrap; }
#modelSubmitButton { width: 100%; background: var(--primary); color: white; padding: 18px; font-size: 18px; font-weight: 600; cursor: pointer; border: none; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; position: relative; overflow: hidden; }
#modelSubmitButton:hover { background: var(--primary-hover); transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); }
#modelSubmitButton:active { transform: translateY(1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
#modelSubmitButton:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; background: var(--primary); }
#modelSubmitButton::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: 0.5s; }
#modelSubmitButton:hover::after { left: 100%; }
.image-output { display: flex; flex-direction: column; gap: 16px; width: 100%; }
#progressContainer { width: 100%; height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; }
#deepaiProgressBar { height: 100%; background: linear-gradient(90deg, #6366F1, #8B5CF6); width: 0%; transition: width 0.5s ease; }
.try-it-result-area { width: 100%; height: 500px; border-radius: var(--radius-md); background: rgba(17, 13, 35, 0.7); position: relative; overflow: hidden; }
.placeholder-image { width: 100%; height: 100%; object-fit: contain; transition: all 0.3s ease; }
.placeholder-image.loading { animation: pulseAnimation 2s infinite ease-in-out; filter: brightness(0.7); }
@keyframes pulseAnimation { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.02); opacity: 1; } 100% { transform: scale(1); opacity: 0.8; } }
.loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(15, 5, 29, 0.7); z-index: 10; border-radius: var(--radius-md); }
.loading-spinner { width: 50px; height: 50px; border: 4px solid rgba(99, 102, 241, 0.3); border-radius: 50%; border-top-color: #6366F1; animation: spin 1s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#download-button {display: none;background: #10b981;border: none;border-radius: 5px;margin:10px 10px 10px 0;padding: 5px 15px;color: white;font-size: 18px; cursor: pointer;transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);gap: 10px;box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);position: relative;overflow: hidden;letter-spacing: 0.5px;}
#download-button[imagewasGenerated="True"] { display: inline-flex; animation: fadeIn 0.4s ease-out; }
#download-button:hover { background: var(--primary-hover); transform: translateY(-3px); }
#download-button:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4); }
#download-button::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 5px; box-shadow: 0 0 8px rgba(99, 102, 241, 0.6); opacity: 0; transition: opacity 0.3s; }
#download-button:hover::after { opacity: 1; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.download-icon { width: 20px; height: 20px; }
#errorpopup { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: rgba(33, 17, 39, 0.95); border: 1px solid var(--error); border-radius: 100px; padding: 12px 24px; display: none; align-items: center; gap: 12px; z-index: 100; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); }
#errorpopup.show { display: flex; animation: fadeInUp 0.5s, fadeOutDown 0.5s 2.5s forwards; }
.errorIcon { width: 20px; height: 20px; fill: var(--error); }
@keyframes fadeInUp { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes fadeOutDown { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(20px); } }
footer { padding: 40px 0; border-top: 1px solid rgba(255, 255, 255, 0.05); margin-top: 60px; }
.footer-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.footer-links { display: flex; gap: 10px; }
.footer-link { color: var(--text-muted); text-decoration: none; transition: var(--transition); }
.footer-link:hover { color: var(--text-light); }
.copyright { color: var(--text-muted); font-size: 14px; }
.examples-section { margin: 80px 0; text-align: center; }
.section-title { font-size: 32px; margin-bottom: 30px; background: linear-gradient(90deg, #6366F1, #8B5CF6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.examples-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 30px; }
.example-card { border-radius: var(--radius-md); overflow: hidden; background: var(--card-bg); border: 1px solid var(--card-border); transition: var(--transition); }
.example-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); }
.example-image { width: 100%; height: 300px; object-fit: cover; }
.example-caption { padding: 15px; text-align: center; }
.example-title { font-weight: 600; margin-bottom: 5px; }
.example-description { color: var(--text-muted); font-size: 14px; }
.seo-section { margin: 60px 0; padding: 30px; background: rgba(255, 255, 255, 0.03); border-radius: var(--radius-lg); }
.seo-title { font-size: 24px; margin-bottom: 20px; color: var(--text-light); }
.seo-text { color: var(--text-muted); line-height: 1.8; margin-bottom: 20px; }
.seo-list { color: var(--text-muted); margin-left: 20px; margin-bottom: 20px; }
.seo-list li { margin-bottom: 10px; }
@media (max-width: 1024px) { .model-card-container { flex-direction: column; } .image-input { max-width: 100%; } .try-it-result-area { height: 400px; } .examples-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } }
@media (max-width: 768px) { .page-title { font-size: 32px; } .page-subtitle { font-size: 16px; } .model-card-container { padding: 16px; } .upload-area { padding: 30px 20px; } .section-title { font-size: 28px; } }
@media (max-width: 480px) { .page-title { font-size: 28px; } .footer-links { flex-direction: column; } .try-it-result-area { height: 300px; } #modelSubmitButton { padding: 14px; font-size: 16px; } .upload-icon { width: 48px; height: 48px; } .drag-and-drop { font-size: 16px; } .examples-grid { grid-template-columns: 1fr; } .example-image { height: 250px; } .seo-section { padding: 20px; } }
.comparison-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; max-width: 1400px; margin: 0 auto; }
.comparison-card { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1); background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); }
.comparison-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.12); }
.image-wrapper { position: relative; width: 100%; height: 300px; overflow: hidden; --slider-pos: 50%; }
.image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; }
.image.before { z-index: 1; }
.image.after { z-index: 2; clip-path: inset(0 0 0 50%); filter: saturate(1.1); }
.slider-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: white; z-index: 3; cursor: ew-resize; box-shadow: 0 4px 20px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
.slider-handle:hover { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 6px 25px rgba(0,0,0,0.25); }
.slider-icon { width: 24px; height: 24px; fill: #555; }
.caption-container { display: flex; justify-content: space-between; padding: 1rem; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%); position: absolute; bottom: 0; width: 100%; z-index: 4; }
.caption { padding: 0.5rem 1.2rem; border-radius: 20px; font-weight: 600; font-size: 0.9rem; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.3); backdrop-filter: blur(5px); transition: all 0.3s ease; }
.before-caption { background: rgba(31, 41, 55, 0.8); border: 1px solid rgba(255,255,255,0.2); }
.after-caption { background: rgba(79, 70, 229, 0.8); border: 1px solid rgba(255,255,255,0.2); }
.caption:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.image-wrapper::after { content: ''; position: absolute; top: 0; bottom: 0; left: var(--slider-pos); width: 2px; background: white; z-index: 3; pointer-events: none; box-shadow: 0 0 10px rgba(0,0,0,0.5); transform: translateX(-50%); transition: left 0.2s ease-out; }
.footer-contacts { width: 100%; max-width: 800px; margin: 20px auto 0; padding: 20px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--card-border); text-align: center; }
.footer-contacts p { color: var(--text-light); font-weight: 600; margin-bottom: 15px; font-size: 18px; }
.footer-contacts ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-contacts li { color: var(--text-muted); font-size: 15px; line-height: 1.5; }
.footer-contacts a { color: var(--primary); text-decoration: none; transition: var(--transition); font-weight: 500; }
.footer-contacts a:hover { color: var(--primary-hover); text-decoration: underline; }
@media (max-width: 768px) { .footer-contacts { padding: 15px; text-align: left; } .footer-contacts p { font-size: 16px; } .footer-contacts li { font-size: 14px; } }
@media (max-width: 480px) { .footer-contacts { margin-top: 15px; padding: 12px; } .footer-contacts ul { gap: 10px; } }
.rcy { margin:20px auto 0; width:95%; height:auto; max-height:250px; }
.buttons-container{display:block;}
.button-disable-watermark{display:inline;max-width:450px;margin:10px 10px 10px 0;padding:0;border:none;border-radius:5px;color:#fff;font-size:18px;letter-spacing:.5px;cursor:pointer;box-shadow:0 4px 12px rgba(143,55,255,.4);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.button-inner-wrapper{display:inline-flex;align-items:stretch;border-radius:5px;overflow:hidden}.button-text-part{padding:5px 10px;background:var(--primary);display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);flex:1;min-width:0}.button-price-part{padding:5px 10px;background:linear-gradient(135deg,#FFD700,#FFA500);font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;white-space:nowrap}.button-price-part::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);height:60%;width:1px;background:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(255,255,255,.4),rgba(255,255,255,.2))}.button-disable-watermark:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(143,55,255,.5)}.button-disable-watermark:hover .button-text-part{background:var(--primary-hover);}.button-disable-watermark:hover .button-price-part{background:linear-gradient(135deg,#FFC000,#FF8C00)}.button-disable-watermark:active{transform:translateY(1px);box-shadow:0 3px 8px rgba(143,55,255,.4)}@media (max-width:480px){.button-text-part{justify-content:center;text-align:center}.button-price-part{justify-content:center}.button-price-part::before{content:none}.button-price-part::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:80%;height:1px;background:linear-gradient(to right,transparent,rgba(255,255,255,.4),transparent)}}
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: none; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(5px); }
.modal.show { display: flex; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-content { /*background-color: var(--card-bg);*/ background-color: #12151a;border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 30px; width: 90%; max-width: 500px; box-shadow: var(--shadow); transform: translateY(20px); transition: transform 0.3s ease; }
.modal.show .modal-content { transform: translateY(0); }
.modal-title { color: transparent; font-size: 24px; margin-bottom: 20px; text-align: center; background: linear-gradient(90deg, #6366F1, #8B5CF6); -webkit-background-clip: text; background-clip: text; }
.modal-description { color: var(--text-muted); margin-bottom: 20px; text-align: center; line-height: 1.5; }
.modal-opis { color: var(--text-muted); margin-bottom: 20px; text-align: center; line-height: 1; font-style: italic; }
.modal-input { width: 100%; padding: 12px 16px; margin-bottom: 20px; border-radius: var(--radius-md); border: 1px solid var(--card-border); background-color: rgba(255, 255, 255, 0.05); color: var(--text-light); font-size: 16px; outline: none; transition: var(--transition); }
.modal-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); }
.modal-input.error { border-color: var(--error); box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2); }
.modal-buttons { display: flex; gap: 15px; justify-content: center; }
.modal-button { padding: 12px 6px; border-radius: 5px; font-weight: 600; cursor: pointer; transition: var(--transition); flex: 1; border: none; font-size: 16px; }
.modal-button.submit { background-color: var(--primary); color: white; }
.modal-button.submit:hover { background-color: var(--primary-hover); transform: translateY(-2px); }
.modal-button.cancel { background-color: transparent; color: var(--text-light); border: 1px solid var(--card-border); }
.modal-button.cancel:hover { background-color: rgba(255, 255, 255, 0.05); transform: translateY(-2px); }
.pay { width: 90%; max-width: 300px; display: block; margin: 20px auto 0; border-radius: var(--radius-md); box-shadow: var(--shadow); border: 1px solid var(--card-border); transition: var(--transition); background-color: rgba(255, 255, 255, 0.05); padding: 5px; }

.comparison-wrapper {width: 100%;height: 100%;position: relative;}
.comparison-wrapper .image-wrapper {width: 100%;height: 100%;position: relative;overflow: hidden;--slider-pos: 50%;}
.comparison-wrapper .image {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: contain;background-position: center;background-repeat: no-repeat;}
.comparison-wrapper .image.before {z-index: 1;}
.comparison-wrapper .image.after {z-index: 2;clip-path: inset(0 0 0 50%);}
.comparison-wrapper .slider-handle {position: absolute;top: 50%;left: var(--slider-pos);transform: translate(-50%, -50%);width: 48px;height: 48px;border-radius: 50%;background: white;z-index: 3;cursor: ew-resize;box-shadow: 0 4px 20px rgba(0,0,0,0.2);display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;}
.comparison-wrapper .slider-handle:hover {transform: translate(-50%, -50%) scale(1.1);box-shadow: 0 6px 25px rgba(0,0,0,0.25);}
.comparison-wrapper .slider-icon {width: 24px;height: 24px;fill: #555;}
.comparison-wrapper .caption-container {display: flex;justify-content: space-between;padding: 1rem;position: absolute;bottom: 0;width: 100%;z-index: 4;}
.comparison-wrapper .caption {padding: 0.5rem 1.2rem;border-radius: 20px;font-weight: 600;font-size: 0.9rem;color: white;text-shadow: 0 1px 3px rgba(0,0,0,0.3);backdrop-filter: blur(5px);transition: all 0.3s ease;}
.comparison-wrapper .before-caption {background: rgba(31, 41, 55, 0.8);border: 1px solid rgba(255,255,255,0.2);}
.comparison-wrapper .after-caption {background: rgba(79, 70, 229, 0.8);border: 1px solid rgba(255,255,255,0.2);}
.comparison-wrapper .caption:hover {transform: translateY(-2px);box-shadow: 0 4px 8px rgba(0,0,0,0.15);}
.comparison-wrapper .image-wrapper::after {content: '';position: absolute;top: 0;bottom: 0;left: var(--slider-pos);width: 2px;background: white;z-index: 3;pointer-events: none;box-shadow: 0 0 10px rgba(0,0,0,0.5);transform: translateX(-50%);transition: left 0.2s ease-out;}
.checkout-modal.micromodal-slide[aria-hidden="false"] .checkout-modal__overlay {background-color: #000;}
.partner-sites{margin:40px 0;text-align:center}.partner-sites-title{font-size:24px;margin-bottom:30px;color:var(--text-light);background:linear-gradient(90deg,#8F37FF,#D53F8C);-webkit-background-clip:text;background-clip:text;color:transparent}.partner-sites-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;max-width:1200px;margin:0 auto}.partner-site-button{display:flex;align-items:center;padding:20px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-md);text-decoration:none;color:var(--text-light);transition:var(--transition);gap:15px}.partner-site-button:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--primary);background:rgba(143,55,255,0.1)}.partner-site-icon{font-size:32px;width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:rgba(143,55,255,0.2);border-radius:var(--radius-sm)}.partner-site-text{display:flex;flex-direction:column;align-items:flex-start;text-align:left;flex:1}.partner-site-name{font-weight:600;font-size:18px;margin-bottom:5px}.partner-site-description{color:var(--text-muted);font-size:14px;line-height:1.4}@media (max-width:768px){.partner-sites-grid{grid-template-columns:1fr}.partner-site-button{padding:15px}.partner-site-icon{font-size:28px;width:40px;height:40px}.partner-site-name{font-size:16px}.partner-site-description{font-size:13px}}

@keyframes slideOutRight{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}.payment-status{position:fixed;top:20px;right:20px;width:auto;min-width:300px;max-width:500px;padding:16px 20px;border-radius:var(--radius-md);background:#12151a;border:1px solid rgba(255,255,255,.15);box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.05);z-index:1000;display:flex;align-items:flex-start;gap:14px;animation:slideInRight .3s ease;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;backdrop-filter:blur(10px)}@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}.payment-status.success{border-left:4px solid var(--success);background:linear-gradient(90deg,rgba(16,185,129,.1) 0%,#12151a 100%)}.payment-status.warning{border-left:4px solid #FF9800;background:linear-gradient(90deg,rgba(255,152,0,.1) 0%,#12151a 100%)}.payment-status.info{border-left:4px solid var(--primary);background:linear-gradient(90deg,rgba(99,102,241,.1) 0%,#12151a 100%)}.payment-status.error{border-left:4px solid var(--error);background:linear-gradient(90deg,rgba(239,68,68,.1) 0%,#12151a 100%)}.payment-status-icon{width:24px;height:24px;flex-shrink:0;margin-top:2px}.payment-status-text{flex:1;font-size:15px;line-height:1.6;min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;color:#F9FAFB;font-weight:400}.payment-status.long-message .payment-status-text{-webkit-line-clamp:10;max-height:150px;overflow-y:auto;padding-right:8px}.payment-status-text::-webkit-scrollbar{width:5px}.payment-status-text::-webkit-scrollbar-track{background:rgba(255,255,255,.08);border-radius:3px}.payment-status-text::-webkit-scrollbar-thumb{background:var(--primary);border-radius:3px}.payment-status-close{background:rgba(255,255,255,.08);border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:4px;transition:var(--transition);font-size:18px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.payment-status-close:hover{color:var(--text-light);background:rgba(255,255,255,.15);transform:scale(1.1)}@media (max-width:768px){.payment-status{top:10px;right:10px;left:10px;max-width:calc(100% - 20px);min-width:unset;padding:14px 16px}.payment-status-text{font-size:14px;-webkit-line-clamp:5}.payment-status.long-message .payment-status-text{-webkit-line-clamp:8;max-height:120px}.payment-status-icon{width:22px;height:22px}.payment-status-close{width:24px;height:24px;font-size:16px}}

#download-button:disabled{background:var(--primary);opacity:.7;cursor:not-allowed;transform:none;box-shadow:0 2px 8px rgba(99,102,241,.4)}#download-button.loading{background:linear-gradient(90deg,#6366F1,#8B5CF6);animation:pulse 1.5s infinite}@keyframes pulse{0%,100%{opacity:.7}50%{opacity:1}}#download-button .download-icon{transition:transform .3s ease}#download-button:disabled .download-icon{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}