:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--bg-color: #050505;--text-primary: #ffffff;--text-secondary: #a0a0a0;--accent: #FF3B30;--accent-glow: rgba(255, 59, 48, .4);--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--font-main: "Inter", system-ui, sans-serif}*,*:before,*:after{box-sizing:border-box}html{font-size:clamp(14px,1vw,16px)}html,body{margin:0;padding:0;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-main);box-sizing:border-box}#root{height:100%;width:100%}.container{width:100%;height:100%;margin:0 auto;padding:clamp(.5rem,1.5vw,1.5rem);display:flex;flex-direction:column;justify-content:center;overflow:auto;box-sizing:border-box}.main-content{display:grid;grid-template-columns:minmax(280px,320px) 1fr minmax(280px,320px);gap:clamp(.75rem,1.5vw,1.5rem);height:100%;flex:1;min-height:0;width:100%;max-width:100%;margin:0 auto;justify-content:center;align-content:stretch;transition:all .3s ease;box-sizing:border-box}.left-panel{display:flex;flex-direction:column;overflow:hidden}.logo{font-family:Righteous,display;font-size:2.5rem;margin:0;background:linear-gradient(135deg,#fff,#ccc);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:1px;text-shadow:0 4px 20px rgba(0,0,0,.5)}.logo span{color:var(--accent);-webkit-text-fill-color:var(--accent)}.main-content.with-sidebar{grid-template-columns:minmax(280px,320px) 1fr minmax(280px,320px)}@media(max-width:1600px){.main-content,.main-content.with-sidebar{grid-template-columns:minmax(260px,300px) 1fr minmax(260px,300px)}}@media(max-width:1400px){.main-content,.main-content.with-sidebar{grid-template-columns:minmax(240px,280px) 1fr minmax(240px,280px)}}@media(max-width:1200px){.main-content,.main-content.with-sidebar{grid-template-columns:minmax(220px,260px) 1fr minmax(220px,260px)}}@media(max-width:1024px){.main-content{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;gap:1rem}.controls,.right-panel{max-height:none;overflow:visible}.preview-area{min-height:400px}}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:clamp(12px,1.5vw,16px);padding:clamp(1rem,2vw,1.5rem);box-shadow:0 8px 32px #0000005e;display:flex;flex-direction:column;box-sizing:border-box}.controls{display:flex;flex-direction:column;gap:clamp(.75rem,1.5vw,1rem);height:100%;max-height:100vh;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}.controls::-webkit-scrollbar{width:6px}.controls::-webkit-scrollbar-track{background:transparent}.controls::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.input-group{display:flex;flex-direction:column;gap:.5rem;flex-shrink:0}.input-group.theme-group{flex:1;min-height:0;overflow:hidden}.input-group label{color:var(--text-secondary);font-size:clamp(.7rem,1vw,.75rem);text-transform:uppercase;letter-spacing:1.5px;font-weight:600}input[type=text],select{background:#0000004d;border:1px solid var(--glass-border);color:#fff;padding:clamp(12px,1.5vw,14px);border-radius:clamp(6px,1vw,8px);font-size:clamp(.9rem,1.2vw,1rem);outline:none;transition:border-color .2s,background .2s;width:100%;box-sizing:border-box}input[type=text]:focus,select:focus{border-color:var(--accent);background:#00000080}option{background:#1a1a1a;color:#fff}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:20px;width:20px;border-radius:50%;background:var(--accent);cursor:pointer;margin-top:-8px;box-shadow:0 0 10px var(--accent-glow)}input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;background:var(--glass-border);border-radius:2px}.range-labels{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-secondary);margin-top:.5rem}.generate-btn{background:var(--accent);color:#fff;border:none;padding:clamp(14px,2vw,16px);font-size:clamp(.9rem,1.2vw,1rem);font-weight:700;border-radius:clamp(6px,1vw,8px);cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:all .2s;box-shadow:0 4px 15px var(--accent-glow);margin-top:1rem;width:100%;box-sizing:border-box}.generate-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 25px var(--accent-glow)}.preview-area{height:100%;width:100%;min-height:0;display:flex;flex-direction:column;position:relative;overflow:hidden}.preview-area>.glass-panel{width:100%;flex:1;min-height:0;display:flex;flex-direction:column}.map-preview-svg{cursor:grab}.map-preview-svg:active{cursor:grabbing}.error{color:#f44;background:#ff44441a;padding:12px;border-radius:8px;font-size:.9rem;text-align:center;border:1px solid rgba(255,68,68,.3)}.loading-spinner{width:50px;height:50px;border:3px solid var(--glass-border);border-radius:50%;border-top-color:var(--accent);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.container{padding:clamp(.5rem,2vw,1rem)}.main-content{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;gap:.75rem}.logo{font-size:clamp(1.5rem,5vw,2rem)}.glass-panel{padding:clamp(.75rem,2vw,1.5rem)}.theme-grid{grid-template-columns:repeat(2,1fr);max-height:min(500px,60vh)}.color-grid{gap:8px}.color-item{padding:6px 10px;font-size:.85rem}.input-group label{font-size:.7rem}input[type=text],select{padding:12px;font-size:.9rem}.generate-btn{padding:14px;font-size:.9rem}}@media(max-width:480px){.container{padding:.5rem}.logo{font-size:1.5rem}.glass-panel{padding:1rem;border-radius:12px}.theme-grid{grid-template-columns:repeat(2,1fr);gap:8px;max-height:min(400px,50vh)}.theme-card{min-height:60px}.theme-card img{height:80px}.color-item{grid-template-columns:1fr;gap:6px}.color-item input[type=color]{width:100%;height:35px}.format-grid{grid-template-columns:repeat(2,1fr)!important}}@media(min-width:1920px){.container{max-width:1920px;margin:0 auto}.main-content{grid-template-columns:320px 1fr 320px;gap:1.5rem}html{font-size:16px}}.result img{max-width:100%;max-height:calc(100vh - 200px);width:auto;height:auto;object-fit:contain}.theme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(8px,1.5vw,12px);max-height:min(600px,70vh);overflow-y:auto;overflow-x:hidden;padding-right:4px}.theme-card{position:relative;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:transform .2s,box-shadow .2s;background:#1a1a1a;min-height:80px}.theme-card.active{border-color:var(--accent);box-shadow:0 0 15px var(--accent-glow)}.theme-card img{width:100%;height:100px;object-fit:cover;display:block;opacity:.7;transition:opacity .2s}.theme-card:hover img,.theme-card.active img{opacity:1}.theme-card span{position:absolute;bottom:0;left:0;right:0;background:#000000b3;color:#fff;font-size:.7rem;padding:4px;text-align:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-transform:uppercase;font-weight:600}.loading-themes{color:var(--text-secondary);font-size:.9rem;padding:1rem;text-align:center;grid-column:span 2}.theme-grid::-webkit-scrollbar{width:6px}.theme-grid::-webkit-scrollbar-track{background:#ffffff0d}.theme-grid::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.card-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#111;z-index:2}.loading-spinner.small{width:20px;height:20px;border-width:2px;margin-bottom:5px}.generating-text{font-size:.6rem;color:var(--text-secondary);animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes breathe{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.02)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.generating-placeholder{width:100%;height:100%;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}.generating-placeholder:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#667eea0d,#764ba214,#667eea0d)}.generating-placeholder:after{content:"";position:absolute;inset:0;background:transparent}.generating-placeholder.is-loading:before{background:linear-gradient(135deg,#667eea1a,#764ba226,#667eea1a,#764ba226,#667eea1a);background-size:200% 200%;animation:breathe 4s ease-in-out infinite}.generating-placeholder.is-loading:after{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.05) 20%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.05) 80%,transparent 100%);background-size:200% 100%;animation:shimmer 2.5s linear infinite}.generating-placeholder .placeholder-content{position:relative;z-index:1;text-align:center;padding:2rem}.generating-placeholder .placeholder-icon{font-size:clamp(3rem,8vw,5rem);margin-bottom:1rem;filter:drop-shadow(0 0 10px rgba(102,126,234,.3))}.generating-placeholder.is-loading .placeholder-icon{animation:float 3s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(102,126,234,.5))}.generating-placeholder .placeholder-title{color:#fff;font-weight:300;font-size:clamp(1.1rem,2.5vw,1.4rem);margin-bottom:.5rem;letter-spacing:.05em}.generating-placeholder .placeholder-subtitle{color:#fff9;font-size:clamp(.8rem,1.5vw,.95rem)}.generating-placeholder .grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:50px 50px;opacity:.5}.new-map-btn{background:var(--accent);border:none;color:#fff;padding:.75rem 1rem;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1rem;width:100%;box-shadow:0 4px 15px var(--accent-glow)}.new-map-btn:hover{background:#ff5246;box-shadow:0 6px 20px var(--accent-glow);transform:translateY(-2px)}.right-panel.preview-mode-panel{max-height:fit-content;align-self:start}.color-header-simple{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:.75rem}.color-header-simple h3{margin:0;font-size:clamp(.85rem,1.2vw,.95rem)}.reset-btn{background:transparent;border:1px solid rgba(255,255,255,.3);color:var(--text-secondary);padding:4px 10px;border-radius:4px;font-size:.7rem;cursor:pointer;transition:all .2s}.reset-btn:hover{border-color:#fff;color:#fff;background:#ffffff1a}.toggle-btn{background:transparent;border:1px solid var(--accent);color:var(--accent);padding:4px 10px;border-radius:4px;font-size:.7rem;cursor:pointer;transition:all .2s}.toggle-btn:hover{background:var(--accent);color:#fff}.right-panel{display:flex;flex-direction:column;gap:clamp(.75rem,1.5vw,1rem);overflow-y:visible;overflow-x:hidden;max-height:100%;height:100%;min-height:0;flex:1}.right-panel.glass-panel{padding:clamp(1rem,2vw,1.5rem);display:flex;flex-direction:column;min-height:0;height:100%}.accordion-section{display:flex;flex-direction:column;border-bottom:1px solid var(--glass-border);transition:all .3s ease;flex-shrink:0}.accordion-section:last-of-type{border-bottom:none}.accordion-header{display:flex;justify-content:space-between;align-items:center;padding:clamp(.75rem,1.5vw,1rem);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s ease;border-radius:8px;margin:-clamp(.75rem,1.5vw,1rem);margin-bottom:0;gap:.5rem;width:100%;box-sizing:border-box}.accordion-header:hover{background:#ffffff0d}.accordion-header h3{margin:0;font-size:clamp(.9rem,1.2vw,1rem);color:#fff;text-align:left}.accordion-header>div:first-child{flex:1;display:flex;justify-content:space-between;align-items:center;min-width:0;gap:.5rem}.accordion-header .reset-btn{flex-shrink:0}.accordion-icon{font-size:.8rem;color:var(--text-secondary);transition:transform .3s ease,color .2s ease;flex-shrink:0;margin-left:.5rem}.accordion-section.expanded .accordion-icon{color:var(--accent);transform:rotate(0)}.accordion-section.collapsed .accordion-icon{transform:rotate(-90deg)}.accordion-content{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease,opacity .2s ease;opacity:0;padding:0 clamp(.75rem,1.5vw,1rem)}.accordion-section.expanded .accordion-content{max-height:1000px;opacity:1;padding-top:clamp(.75rem,1.5vw,1rem);padding-bottom:clamp(.75rem,1.5vw,1rem);visibility:visible}.accordion-section.collapsed .accordion-content{max-height:0!important;padding-top:0!important;padding-bottom:0!important;opacity:0!important;overflow:hidden!important;visibility:hidden}.theme-section .theme-grid{max-height:min(600px,70vh)}.color-grid{display:flex;flex-direction:column;gap:clamp(8px,1.5vw,12px);max-height:min(650px,75vh);overflow-y:auto;overflow-x:hidden;padding-right:4px}.color-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(8px,1.5vw,10px);background:#ffffff08;padding:clamp(6px,1.5vw,8px) clamp(10px,1.5vw,12px);border-radius:clamp(6px,1vw,8px)}.color-item span{font-size:clamp(.85rem,1.2vw,.9rem);color:var(--text-primary);text-align:left}.color-item input[type=color]{width:clamp(35px,4vw,40px);height:clamp(28px,3.5vw,30px);border:1px solid var(--glass-border);border-radius:4px;cursor:pointer;flex-shrink:0}.secondary-btn{background:transparent;border:1px solid white;color:#fff;padding:16px 24px;margin-right:10px;border-radius:30px;font-weight:700;cursor:pointer;transition:all .2s}.modal-overlay{position:fixed;inset:0;background:#000c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,3vw,2rem);overflow-y:auto;box-sizing:border-box}.modal-content{width:100%;max-width:min(900px,95vw);height:min(80vh,90vh);max-height:90vh;margin:0;display:flex;flex-direction:column;background:#0a0a0a;border:1px solid var(--glass-border);box-sizing:border-box}.modal-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:1.5rem;border-bottom:1px solid var(--glass-border);margin-bottom:1.5rem}.modal-header h2{margin:0;font-size:1.5rem;color:#fff}.close-btn{background:none;border:none;color:var(--text-secondary);font-size:2rem;cursor:pointer;line-height:1;padding:0}.close-btn:hover{color:#fff}.history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:clamp(1rem,2vw,1.5rem);overflow-y:auto;padding:.5rem}@media(max-width:768px){.history-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}}@media(max-width:480px){.history-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}}.history-item{position:relative;border-radius:clamp(6px,1vw,8px);overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all .2s;background:#151515;height:clamp(200px,25vw,250px);min-height:150px;display:block;aspect-ratio:3/4}.history-item:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 4px 20px #00000080}.history-item img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;background:#222}.history-info{position:absolute;bottom:0;left:0;right:0;background:#000c;padding:8px;display:flex;justify-content:space-between;font-size:.75rem;color:#fff}.empty-history,.loading-text{grid-column:1 / -1;text-align:center;color:var(--text-secondary);padding:2rem}.history-btn{width:100%;background:#ffffff0d;border:1px solid var(--glass-border);color:var(--text-primary);padding:clamp(10px,1.5vw,12px);border-radius:8px;cursor:pointer;transition:all .2s;margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;font-size:clamp(.85rem,1.2vw,.9rem);flex-shrink:0}.history-btn:hover{background:#ffffff1a;border-color:#fff}.history-delete-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:#0009;color:#fff;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;z-index:10;opacity:0;transition:all .2s cubic-bezier(.2,.8,.2,1);transform:scale(.9)}.history-item:hover .history-delete-btn{opacity:1;transform:scale(1)}.history-delete-btn:hover{background:var(--accent);border-color:var(--accent);transform:scale(1.1)!important;box-shadow:0 0 10px var(--accent-glow)}.result{animation:fadeIn .8s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;width:100%;height:100%;padding:1rem}.result .actions{display:flex;gap:1rem;width:100%;justify-content:center}.placeholder{display:flex!important;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%}.settings-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;background:#ffffff0d;padding:4px 8px;border-radius:12px;border:1px solid var(--glass-border);transition:all .2s}.settings-toggle:hover{background:#ffffff1a;border-color:#ffffff4d}.toggle-icon{font-size:.9rem;opacity:.5;filter:grayscale(1);transition:all .2s}.toggle-icon.active{opacity:1;filter:grayscale(0);text-shadow:0 0 10px var(--accent-glow)}.toggle-label{font-size:.7rem;color:var(--text-secondary);font-weight:600;text-transform:uppercase}.settings-toggle.enabled{border-color:#64ff644d;color:#8f8}.settings-toggle.enabled:hover{background:#64ff641a;border-color:#64ff6480}.settings-toggle.disabled{border-color:#ff64644d;color:#f88}.settings-toggle.disabled:hover{background:#ff64641a;border-color:#ff646480}.settings-toggle.disabled .toggle-icon{animation:spin 3s linear infinite;opacity:.8;filter:none}.preview-bottom-bar{display:flex;justify-content:center;align-items:center;gap:1rem;padding:1rem;background:#0006;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.bottom-bar-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;border:none}.bottom-bar-btn .btn-icon{font-size:1.1rem}.bottom-bar-btn.primary{background:var(--accent);color:#fff;box-shadow:0 4px 15px var(--accent-glow)}.bottom-bar-btn.primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px var(--accent-glow);background:#ff5246}.bottom-bar-btn.secondary{background:#1e1e1ee6;color:#fff;border:1px solid rgba(255,255,255,.2)}.bottom-bar-btn.secondary:hover{background:#323232f2;border-color:#fff6}