@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-card: rgba(255, 255, 255, .95);--bg-glass: rgba(0, 0, 0, .02);--border-color: rgba(0, 0, 0, .1);--text-primary: #1a1a1a;--text-secondary: #4a4a4a;--text-muted: #888888;--accent-primary: #333333;--accent-secondary: #555555;--accent-dark: #f0f0f0;--success: #22c55e;--warning: #f59e0b;--error: #ef4444;--shadow-lg: 0 10px 30px -5px rgba(0, 0, 0, .15)}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;overflow:hidden}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-primary);color:var(--text-primary)}.app{height:100vh;display:flex;flex-direction:column;overflow:hidden}.header{padding:1rem 2rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:.5rem}.logo-icon{width:32px;height:32px;background:var(--accent-dark);border:2px solid var(--accent-primary);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem}.logo h1{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.header-subtitle{color:var(--text-secondary);font-size:.75rem}.header-right{display:flex;align-items:center;gap:1rem}.copyright{font-size:.875rem;color:var(--text-secondary);display:flex;align-items:center;gap:.5rem}.avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--border-color)}.contact-buttons{display:flex;gap:.5rem}.contact-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-glass);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);text-decoration:none;transition:all .2s ease}.contact-btn:hover{background:var(--accent-primary);color:#fff;transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.preview-ads-row{display:flex;flex-direction:row;justify-content:center;gap:1rem;padding:.5rem;flex-shrink:0}.content-area>.ad-slot{width:100%;display:flex;justify-content:center;padding:.5rem;flex-shrink:0;background:var(--bg-secondary)}.ad-slot{background:var(--bg-card);border:1px dashed var(--border-color);border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.625rem;text-transform:uppercase;letter-spacing:.1em;flex-shrink:0;box-shadow:0 1px 3px #0000000d}.ad-slot-728x90{width:100%;max-width:728px;height:90px;margin:0 auto}.ad-slot-300x250{width:300px;height:250px}.ad-slot-160x600{width:160px;height:600px}.main-container{flex:1;display:grid;grid-template-columns:320px 1fr;gap:0;min-height:0;overflow:hidden}.content-area{display:flex;flex-direction:column;min-height:0;overflow:hidden}.content-row{flex:1;display:grid;grid-template-columns:160px 1fr 160px;gap:0;min-height:0;overflow:hidden}.sidebar{background:var(--bg-secondary);border-right:1px solid var(--border-color);padding:.75rem;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem}.left-ad-column,.right-ad-column{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem;background:transparent}.control-panel{background:var(--bg-card);border-radius:10px;border:1px solid var(--border-color);padding:.75rem}.panel-header{display:flex;align-items:center;gap:.375rem;margin-bottom:.625rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-color)}.panel-header h3{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}.panel-icon{font-size:.875rem}.tabs{display:flex;gap:.25rem;margin-bottom:.75rem}.tab{flex:1;padding:.375rem .5rem;background:var(--bg-glass);border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);font-size:.6875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.tab:hover{background:#ffffff1a;color:var(--text-primary)}.tab.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.form-group{margin-bottom:.625rem}.form-group:last-child{margin-bottom:0}.form-label{display:block;font-size:.625rem;font-weight:500;color:var(--text-secondary);margin-bottom:.25rem;text-transform:uppercase;letter-spacing:.05em}.form-input{width:100%;padding:.5rem .625rem;background:var(--bg-glass);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:.8125rem;font-family:inherit;transition:all .2s ease}.form-input:focus{outline:none;border-color:var(--accent-primary)}.form-input::placeholder{color:var(--text-muted)}.checkbox-group{display:flex;align-items:center;gap:.375rem;padding:.375rem 0}.checkbox-group input[type=checkbox]{width:14px;height:14px;accent-color:var(--accent-primary);cursor:pointer}.checkbox-group label{font-size:.6875rem;color:var(--text-secondary);cursor:pointer}.color-picker-wrapper{display:flex;gap:.375rem;align-items:center}.color-picker{width:32px;height:32px;padding:0;border:2px solid var(--border-color);border-radius:6px;cursor:pointer;overflow:hidden;background:transparent}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:none;border-radius:4px}.color-value{flex:1;padding:.5rem .625rem;background:var(--bg-glass);border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);font-size:.6875rem;font-family:SF Mono,Consolas,monospace}.slider-wrapper{position:relative}.slider-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem}.slider-value{font-size:.6875rem;font-weight:600;color:var(--text-primary)}.slider{width:100%;height:3px;-webkit-appearance:none;appearance:none;background:var(--accent-dark);border-radius:2px;outline:none;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;background:var(--accent-primary);border-radius:50%;cursor:pointer;transition:transform .2s ease}.slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.slider::-moz-range-thumb{width:12px;height:12px;background:var(--accent-primary);border-radius:50%;cursor:pointer;border:none}.position-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem}.position-btn{aspect-ratio:1;background:var(--bg-glass);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.position-btn:hover{background:#ffffff1a;border-color:var(--accent-primary)}.position-btn.active{background:var(--accent-primary);border-color:var(--accent-primary)}.position-dot{width:5px;height:5px;background:var(--text-muted);border-radius:50%;transition:all .2s ease}.position-btn.active .position-dot{background:#fff}.upload-zone{border:2px dashed var(--border-color);border-radius:8px;padding:1rem;text-align:center;cursor:pointer;transition:all .3s ease;background:var(--bg-glass)}.upload-zone:hover,.upload-zone.dragover{border-color:var(--accent-primary);background:#ffffff0d}.upload-icon{font-size:1.5rem;margin-bottom:.5rem}.upload-zone h4{font-size:.8125rem;font-weight:600;margin-bottom:.25rem}.upload-zone p{font-size:.6875rem;color:var(--text-secondary)}.upload-zone input{display:none}.upload-zone-small{padding:.75rem}.upload-zone-small .upload-icon{font-size:1rem;margin-bottom:.25rem}.upload-zone-small h4{font-size:.6875rem}.upload-zone-small p{font-size:.5625rem}.logo-preview{position:relative;display:inline-block}.logo-preview img{max-width:100%;max-height:50px;border-radius:4px;border:1px solid var(--border-color)}.remove-logo{position:absolute;top:-4px;right:-4px;width:16px;height:16px;background:var(--error);border:none;border-radius:50%;color:#fff;font-size:.75rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.remove-logo:hover{transform:scale(1.1)}.preview-area{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;background:var(--bg-primary);position:relative;overflow:hidden;min-height:0}.preview-placeholder{text-align:center;color:var(--text-muted)}.preview-placeholder .upload-icon{font-size:2.5rem;margin-bottom:.75rem;opacity:.5}.preview-placeholder h3{font-size:1rem;font-weight:600;margin-bottom:.25rem;color:var(--text-secondary)}.preview-placeholder p{font-size:.75rem}.canvas-container{position:relative;max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}.canvas-container canvas{max-width:100%;max-height:100%;border-radius:6px;box-shadow:var(--shadow-lg);background:#f5f5f5}.download-section{margin-top:auto}.download-btn{width:100%;padding:.5rem .75rem;background:var(--accent-primary);border:1px solid var(--accent-primary);border-radius:8px;color:#fff;font-size:.75rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .3s ease;min-height:36px}.download-btn:hover:not(:disabled){background:var(--accent-secondary);transform:translateY(-1px);box-shadow:0 4px 8px #00000026}.download-btn:disabled{opacity:.4;cursor:not-allowed}.download-btn .icon{font-size:.875rem;display:flex;align-items:center;justify-content:center}.format-select{display:flex;gap:.25rem;margin-bottom:.5rem}.format-option{flex:1;padding:.25rem;background:var(--bg-glass);border:1px solid var(--border-color);border-radius:4px;color:var(--text-secondary);font-size:.5625rem;font-weight:500;cursor:pointer;text-align:center;transition:all .2s ease}.format-option:hover{background:#ffffff1a}.format-option.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.processing{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000c;padding:.75rem 1.5rem;border-radius:6px;color:#fff;font-size:.75rem}@keyframes spin{to{transform:rotate(360deg)}}.spinner{display:inline-block;width:12px;height:12px;border:2px solid var(--text-muted);border-top-color:var(--text-primary);border-radius:50%;animation:spin .8s linear infinite}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#fff3}@media(max-width:1200px){.main-container{grid-template-columns:300px 1fr}.right-ad-column{display:none}.ad-slot-728x90{width:100%;max-width:728px}}@media(max-width:768px){.main-container{grid-template-columns:1fr}.sidebar{max-height:45vh;border-right:none;border-bottom:1px solid var(--border-color)}.ad-banner-row{flex-direction:column;align-items:center}}.image-thumbnails{display:flex;gap:.5rem;margin-top:.5rem;flex-wrap:wrap;max-height:120px;overflow-y:auto}.thumbnail{position:relative;width:60px;height:60px;border:2px solid var(--border-color);border-radius:6px;overflow:hidden;cursor:pointer;transition:all .2s ease}.thumbnail:hover{border-color:var(--accent-primary);transform:scale(1.05)}.thumbnail.active{border-color:var(--accent-primary);box-shadow:0 0 0 2px #3333}.thumbnail img{width:100%;height:100%;object-fit:cover}.thumbnail-index{position:absolute;top:2px;right:2px;background:var(--accent-primary);color:#fff;font-size:.5rem;padding:.1rem .25rem;border-radius:3px;font-weight:600;pointer-events:none}.thumbnail-remove{position:absolute;bottom:2px;right:2px;width:18px;height:18px;background:var(--error);border:none;border-radius:50%;color:#fff;font-size:.875rem;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s ease;line-height:1;padding:0}.thumbnail:hover .thumbnail-remove{opacity:1}.thumbnail-remove:hover{transform:scale(1.1);background:#dc2626}.btn-add-more{width:100%;margin-top:.5rem;padding:.5rem;background:var(--bg-glass);border:1px dashed var(--border-color);border-radius:6px;color:var(--text-secondary);font-size:.6875rem;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.375rem;transition:all .2s ease}.btn-add-more:hover{border-color:var(--accent-primary);color:var(--accent-primary);background:#00000005}.btn-add-more span{font-size:1rem;font-weight:600}.toggle-preset-btn{margin-left:auto;background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.25rem;font-size:.75rem;transition:all .2s ease}.toggle-preset-btn:hover{color:var(--text-primary)}.preset-manager{padding-top:.5rem}.btn-primary{width:100%;margin-top:.5rem;padding:.5rem;background:var(--accent-primary);border:none;border-radius:6px;color:#fff;font-size:.6875rem;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-primary:hover{background:var(--accent-secondary)}.preset-list{margin-top:.75rem;display:flex;flex-direction:column;gap:.375rem}.preset-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem;background:var(--bg-glass);border:1px solid var(--border-color);border-radius:6px;transition:all .2s ease}.preset-item:hover{background:#0000000d}.preset-name{flex:1;font-size:.6875rem;color:var(--text-primary);cursor:pointer;font-weight:500}.preset-name:hover{color:var(--accent-primary)}.btn-delete{width:20px;height:20px;background:var(--error);border:none;border-radius:50%;color:#fff;font-size:.875rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.btn-delete:hover{transform:scale(1.1)}.text-muted{font-size:.6875rem;color:var(--text-muted);text-align:center;padding:.5rem}.btn-batch{margin-top:.5rem;background:var(--success);border-color:var(--success)}.btn-batch:hover:not(:disabled){background:#1ea854}.smart-range{position:relative}.smart-range::-webkit-slider-thumb{transition:transform .15s ease,background .15s ease}.smart-range::-moz-range-thumb{transition:transform .15s ease,background .15s ease}.slider-wrapper:before{content:"";position:absolute;top:50%;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent-dark) 0%,transparent .5%,transparent 24.5%,var(--accent-dark) 25%,transparent 25.5%,transparent 49.5%,var(--accent-dark) 50%,transparent 50.5%,transparent 74.5%,var(--accent-dark) 75%,transparent 75.5%,transparent 99.5%,var(--accent-dark) 100%);pointer-events:none;z-index:-1;transform:translateY(-50%);margin-top:5px}.coffee-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--accent-primary);border:1px solid var(--accent-primary);border-radius:8px;color:#fff;font-size:.875rem;font-weight:600;text-decoration:none;transition:all .3s ease;box-shadow:0 2px 8px #00000026}.coffee-btn:hover{transform:translateY(-2px);background:var(--accent-secondary);box-shadow:0 4px 12px #00000040}.coffee-btn svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))}.footer{background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:1rem 2rem;margin-top:auto}.footer-content{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1200px;margin:0 auto}.footer-section h4{font-size:.875rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}.affiliate-link{display:block;font-size:.8125rem;color:var(--text-secondary);text-decoration:none;margin-bottom:.5rem;transition:all .2s ease;padding:.25rem 0}.affiliate-link:hover{color:var(--accent-primary);padding-left:.5rem}.coffee-link{color:var(--accent-primary);font-weight:600}.coffee-link:hover{color:var(--accent-secondary)}.footer-note{font-size:.75rem;color:var(--text-muted);margin-top:.5rem;line-height:1.5}.inline-link{color:var(--accent-primary);text-decoration:underline}.inline-link:hover{color:var(--accent-secondary)}@media(max-width:768px){.footer-content{grid-template-columns:1fr;gap:1.5rem}.coffee-btn{font-size:.75rem;padding:.4rem .75rem}.coffee-btn span{display:none}}