@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{--primary-color:#4f46e5;--primary-hover:#4338ca;--bg-color:#f9fafb;--card-bg:#fff;--text-main:#111827;--text-muted:#6b7280;--border-color:#e5e7eb}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);font-family:Inter,sans-serif;line-height:1.5}button,input{font-family:inherit}.app-container{flex-direction:column;align-items:center;min-height:100vh;padding:40px 20px;display:flex}.header{text-align:center;margin-bottom:40px}.header h1{color:var(--text-main);margin-bottom:8px;font-size:2.5rem;font-weight:800}.header p{color:var(--text-muted);font-size:1.1rem}.selection-screen{gap:24px;margin-top:40px;display:flex}.device-btn{border:2px solid var(--border-color);cursor:pointer;background:#fff;border-radius:24px;flex-direction:column;align-items:center;gap:16px;width:240px;padding:48px;transition:all .2s;display:flex}.device-btn:hover{border-color:var(--primary-color);transform:translateY(-4px);box-shadow:0 10px 25px -5px #4f46e533}.device-btn h2{color:var(--text-main);font-size:1.5rem;font-weight:700}.main-content{flex-direction:column;gap:32px;width:100%;max-width:1400px;display:flex}.controls-section{background:var(--card-bg);border:1px solid var(--border-color);border-radius:20px;flex-direction:column;gap:24px;padding:32px;display:flex;box-shadow:0 4px 6px -1px #0000000d,0 2px 4px -1px #00000008}.section-title{align-items:center;gap:8px;margin-bottom:12px;font-size:1.125rem;font-weight:600;display:flex}.upload-area{border:2px dashed var(--border-color);cursor:pointer;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:160px;padding:20px;transition:background-color .2s,border-color .2s;display:flex;position:relative;overflow:hidden}.upload-area.dragging{border-color:var(--primary-color);background-color:#eef2ff}.upload-area:hover{background-color:#f3f4f6;border-color:#d1d5db}.upload-area input{display:none}.upload-content{color:var(--text-muted);text-align:center;flex-direction:column;align-items:center;display:flex}.upload-content p{margin-top:8px;font-size:.875rem}.languages-grid{flex-wrap:wrap;gap:12px;display:flex}.language-label{border:1px solid var(--border-color);cursor:pointer;border-radius:8px;align-items:center;gap:8px;padding:12px 16px;transition:all .2s;display:flex}.language-label:hover{background-color:#f9fafb}.language-label.selected{background-color:#eef2ff;border-color:#c7d2fe}.language-label input{width:16px;height:16px;accent-color:var(--primary-color)}.language-label span{font-size:.875rem;font-weight:500}.generate-btn{cursor:pointer;color:#fff;background:linear-gradient(135deg,#4f46e5 0%,#3730a3 100%);border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;margin-top:16px;padding:16px;font-size:1.125rem;font-weight:700;transition:all .2s;display:flex;box-shadow:0 4px 6px -1px #4f46e533}.generate-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 15px -3px #4f46e54d}.generate-btn:disabled{color:#9ca3af;cursor:not-allowed;box-shadow:none;background:#e5e7eb}.horizontal-list-section{flex-direction:column;gap:16px;width:100%;display:flex}.horizontal-scroll-container{scroll-behavior:smooth;align-items:flex-start;gap:24px;padding:16px 4px 32px;display:flex;overflow-x:auto}.horizontal-scroll-container::-webkit-scrollbar{height:8px}.horizontal-scroll-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.horizontal-scroll-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.horizontal-scroll-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.item-card{border:1px solid var(--border-color);background:#fff;border-radius:16px;flex-direction:column;gap:20px;min-width:340px;max-width:340px;padding:20px;transition:transform .2s,box-shadow .2s,opacity .2s,border-color .2s;display:flex;box-shadow:0 4px 20px #00000014}.item-card.dragging{opacity:.4;border:2px dashed #9ca3af;transform:scale(.98)}.item-card.drag-over{border:2px solid var(--primary-color);transform:translateY(-4px);box-shadow:0 0 15px #4f46e54d}.drag-handle{cursor:grab;color:var(--primary-color);align-items:center;gap:8px;display:flex}.drag-handle:active{cursor:grabbing}.item-card-header{color:var(--primary-color);justify-content:space-between;align-items:center;font-size:1.1rem;font-weight:700;display:flex}.remove-item-btn{color:#9ca3af;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:6px;transition:all .2s;display:flex}.remove-item-btn:hover{color:#ef4444;background-color:#fee2e2}.card-preview-wrapper{background-color:#f3f4f6;border:1px solid #e5e7eb;border-radius:12px;margin:0 auto;position:relative;overflow:hidden}.card-preview-wrapper.phone{width:273px;height:591px}.card-preview-wrapper.tablet{width:272px;height:363px}.card-preview-scale{transform-origin:0 0}.card-preview-scale.phone{width:1242px;height:2688px;transform:scale(.22)}.card-preview-scale.tablet{width:2048px;height:2732px;transform:scale(.133)}.text-inputs-container{flex-direction:column;gap:16px;display:flex}.text-input-group{flex-direction:column;gap:8px;display:flex}.checkbox-label{color:var(--text-main);cursor:pointer;align-items:center;gap:8px;font-size:.9rem;font-weight:600;display:flex}.checkbox-label input{width:16px;height:16px;accent-color:var(--primary-color)}.text-input{border:1px solid var(--border-color);border-radius:8px;outline:none;width:100%;padding:12px;font-size:.95rem;transition:border-color .2s,box-shadow .2s}.text-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a}.text-input:disabled{color:#9ca3af;cursor:not-allowed;background-color:#f3f4f6}.hidden-generator-wrapper{pointer-events:none;position:fixed;top:-10000px;left:-10000px}.preview-container{flex-direction:column;align-items:center;display:flex;position:relative;overflow:hidden}.preview-container.phone{width:1242px;height:2688px}.preview-container.tablet{width:2048px;height:2732px}.noise-overlay{z-index:1;opacity:.35;pointer-events:none;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");position:absolute;inset:0}.gradient-overlay{z-index:2;pointer-events:none;background:linear-gradient(#0000000d 0%,#0009 100%);position:absolute;inset:0}.preview-text-container{text-align:center;z-index:10;flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.preview-text-container.phone{height:480px;margin-top:80px;padding:0 100px}.preview-text-container.tablet{height:400px;margin-top:60px;padding:0 160px}.preview-main-text{color:#fff;text-shadow:0 10px 20px #0003;white-space:pre-wrap;word-break:keep-all;font-weight:800;line-height:1.2}.preview-container.phone .preview-main-text{font-size:calc(90px * var(--font-scale,1))}.preview-container.tablet .preview-main-text{font-size:calc(110px * var(--font-scale,1))}.preview-sub-text{color:#ffffffe6;text-shadow:0 5px 10px #0000001a;white-space:pre-wrap;word-break:keep-all;font-weight:500;line-height:1.4}.preview-container.phone .preview-sub-text{font-size:calc(52px * var(--font-scale,1))}.preview-container.tablet .preview-sub-text{font-size:calc(64px * var(--font-scale,1))}.mockup-container{align-self:center;margin-bottom:auto;position:relative;box-shadow:0 40px 80px #0006}.mockup-container.phone{background:linear-gradient(135deg,#e2e8f0 0%,#cbd5e1 50%,#94a3b8 100%);border-radius:120px;width:1000px;height:2164px;padding:6px;box-shadow:inset 0 0 10px #ffffff80,0 40px 80px #0006}.mockup-container.tablet{background:linear-gradient(135deg,#e2e8f0 0%,#cbd5e1 50%,#94a3b8 100%);border-radius:70px;width:1700px;height:2266px;padding:8px;box-shadow:inset 0 0 10px #ffffff80,0 40px 80px #0006}.mockup-bezel{background:#000;width:100%;height:100%;position:relative;overflow:hidden}.mockup-bezel.phone{border-radius:114px;padding:26px}.mockup-bezel.tablet{border-radius:62px;padding:32px}.mockup-screen{background:#fff;width:100%;height:100%;position:relative;overflow:hidden}.mockup-screen.phone{border-radius:88px}.mockup-screen.tablet{border-radius:30px}.mockup-screen img{object-fit:cover;width:100%;height:100%}.dynamic-island{z-index:20;background:#000;border-radius:42px;width:310px;height:84px;position:absolute;top:40px;left:50%;transform:translate(-50%);box-shadow:0 0 10px #00000080}.tablet-camera{z-index:20;background:#111;border-radius:50%;width:12px;height:12px;position:absolute;top:10px;left:50%;transform:translate(-50%);box-shadow:inset 0 0 4px #fff3}.mockup-button{z-index:-1;background:linear-gradient(#cbd5e1,#94a3b8);border-radius:6px;position:absolute}.mockup-button.silent{width:6px;height:60px;top:280px;left:-6px}.mockup-button.volume-up{width:6px;height:120px;top:400px;left:-6px}.mockup-button.volume-down{width:6px;height:120px;top:560px;left:-6px}.mockup-button.power{width:6px;height:180px;top:450px;right:-6px}.mockup-button.tablet-power{background:linear-gradient(90deg,#cbd5e1,#94a3b8);width:120px;height:8px;top:-8px;right:200px}.mockup-button.tablet-vol-up{width:8px;height:100px;top:150px;right:-8px}.mockup-button.tablet-vol-down{width:8px;height:100px;top:280px;right:-8px}.spinner{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.faq-list{flex-direction:column;gap:16px;display:flex}.faq-item{background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}.faq-summary{cursor:pointer;color:#111827;justify-content:space-between;align-items:center;padding:20px;list-style:none;display:flex}.faq-summary::-webkit-details-marker{display:none}.faq-summary:hover{background:#f3f4f6}.faq-icon:after{content:"+";color:#6b7280;font-size:1.5rem;font-weight:300;transition:transform .2s ease-in-out}.faq-item[open] .faq-icon:after{content:"−"}.faq-content{padding:0 20px 20px;animation:.3s ease-out slideDown}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.sample-card:hover{transform:translateY(-8px);box-shadow:0 15px 30px -5px #4f46e533!important}