:root{--primary-color: #e82127;--secondary-color: #393c41;--background: #1a1a1a;--panel-bg: #2a2a2a;--text-color: #ffffff;--border-color: #404040;--success-color: #4caf50;--danger-color: #f44336}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:var(--background);color:var(--text-color);overflow:hidden}#app{display:flex;flex-direction:column;height:100vh}.app-header{background-color:var(--secondary-color);padding:1rem 2rem;border-bottom:2px solid var(--primary-color)}.header-content{display:flex;justify-content:space-between;align-items:center}.header-title h1{font-size:1.5rem;margin-bottom:.25rem}.header-buttons{display:flex;gap:.5rem}.header-btn{background:none;border:2px solid var(--border-color);border-radius:50%;width:40px;height:40px;font-size:1.25rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.header-btn:hover{border-color:var(--primary-color);background-color:#e821271a;transform:scale(1.1)}.subtitle{font-size:.875rem;color:#aaa}.app-container{display:flex;flex:1;overflow:hidden}.sidebar,.right-panel{width:280px;background-color:var(--panel-bg);overflow-y:auto;border-right:1px solid var(--border-color)}.right-panel{border-right:none;border-left:1px solid var(--border-color)}.panel{padding:1rem;border-bottom:1px solid var(--border-color)}.panel h2{font-size:1rem;margin-bottom:1rem;color:var(--primary-color)}.canvas-container{flex:1;display:flex;align-items:center;justify-content:center;position:relative;background-color:var(--background);background-image:linear-gradient(45deg,#2a2a2a 25%,transparent 25%),linear-gradient(-45deg,#2a2a2a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2a2a2a 75%),linear-gradient(-45deg,transparent 75%,#2a2a2a 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}#main-canvas{border:2px solid var(--border-color);background-color:transparent;cursor:crosshair;max-width:100%;max-height:100%}.btn{width:100%;padding:.75rem;margin-bottom:.5rem;background-color:var(--secondary-color);color:var(--text-color);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;font-size:.875rem;transition:all .2s}.btn:hover{background-color:#4a4a4a;transform:translateY(-1px)}.btn-primary{background-color:var(--primary-color);border-color:var(--primary-color)}.btn-primary:hover{background-color:#c71e24}.btn-success{background-color:var(--success-color);border-color:var(--success-color)}.btn-success:hover{background-color:#45a049}.btn-danger{background-color:var(--danger-color);border-color:var(--danger-color)}.btn-danger:hover{background-color:#da190b}.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1rem}.tool-btn{aspect-ratio:1;padding:.75rem;background-color:var(--secondary-color);border:2px solid var(--border-color);border-radius:4px;font-size:1.5rem;cursor:pointer;transition:all .2s}.tool-btn:hover{background-color:#4a4a4a}.tool-btn.active{border-color:var(--primary-color);background-color:#3a3a3a}.color-picker-section,.brush-size-section,.ppf-texture-section{margin-bottom:1rem}.color-picker-section label,.brush-size-section label,.ppf-texture-section label{display:block;margin-bottom:.5rem;font-size:.875rem}#color-picker{width:100%;height:40px;border:1px solid var(--border-color);border-radius:4px;cursor:pointer}#brush-size{width:calc(100% - 40px);margin-right:.5rem}#brush-size-value{display:inline-block;width:30px;text-align:right}.ppf-texture-select{width:100%;padding:.5rem;background-color:var(--secondary-color);color:var(--text-color);border:1px solid var(--border-color);border-radius:4px;font-size:.875rem;cursor:pointer}.ppf-texture-select:hover{background-color:#3a3a3a}.ppf-hint{font-size:.7rem;color:#888;margin-top:.5rem;font-style:italic}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:#000000d9;animation:fadeIn .2s ease-in}.modal.show{display:flex;align-items:center;justify-content:center}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background-color:var(--panel-bg);border:2px solid var(--primary-color);border-radius:8px;width:90%;max-width:600px;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid var(--border-color);background-color:var(--secondary-color)}.modal-header h2{margin:0;color:var(--primary-color);font-size:1.25rem}.modal-close{background:none;border:none;color:var(--text-color);font-size:2rem;cursor:pointer;padding:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.modal-close:hover{background-color:var(--danger-color);transform:rotate(90deg)}.modal-body{padding:1.5rem;overflow-y:auto}.modal-body #template-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}#template-list,#layer-list,#texture-list{min-height:100px;margin-bottom:1rem}#texture-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.panel-hint{font-size:.75rem;color:#888;margin-bottom:.75rem}.section-info{font-size:.75rem;color:var(--success-color);margin-top:.5rem;padding:.5rem;background:#4caf501a;border-radius:4px;text-align:center}.color-modal-content{max-width:500px}#color-picker-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}.color-option{display:flex;flex-direction:column;align-items:center;padding:1rem;background-color:var(--secondary-color);border:3px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s}.color-option:hover{border-color:var(--primary-color);transform:translateY(-2px);box-shadow:0 4px 8px #e821274d}.color-option-swatch{width:80px;height:80px;border-radius:50%;margin-bottom:.75rem;border:2px solid var(--border-color);box-shadow:0 2px 8px #0000004d}.color-option-name{font-size:.875rem;text-align:center;font-weight:500}.texture-item{padding:.5rem;background-color:var(--secondary-color);border:2px solid var(--border-color);border-radius:4px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:.25rem;position:relative}.texture-item:hover{background-color:#3a3a3a}.texture-item.selected{border-color:var(--primary-color);background-color:#3a3a3a;box-shadow:0 0 8px #e8212780}.texture-thumbnail{width:48px;height:48px;border-radius:4px;border:1px solid var(--border-color);object-fit:cover}.texture-name{font-size:.7rem;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.remove-texture-btn{position:absolute;top:2px;right:2px;width:18px;height:18px;background:var(--danger-color);border:none;border-radius:50%;color:#fff;font-size:12px;line-height:1;cursor:pointer;opacity:0;transition:opacity .2s}.texture-item:hover .remove-texture-btn{opacity:1}.remove-texture-btn:hover{background:#da190b}.template-item,.layer-item{padding:.75rem;margin-bottom:.5rem;background-color:var(--secondary-color);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;transition:all .2s;display:flex;justify-content:space-between;align-items:center}.template-item{flex-direction:column;align-items:stretch}.template-info{display:flex;flex-direction:column;gap:.5rem}.template-name{font-size:.875rem;font-weight:500}.template-thumbnail{width:100%;height:auto;border-radius:4px;border:1px solid var(--border-color);object-fit:cover}.template-item:hover,.layer-item:hover{background-color:#3a3a3a}.template-item.active{border-color:var(--success-color);background-color:#2a3a2a}.layer-item.active{border-color:var(--primary-color);background-color:#3a3a3a}.layer-controls{display:flex;gap:.5rem}.layer-controls button{background:none;border:none;color:var(--text-color);cursor:pointer;font-size:1rem;padding:.25rem}.layer-controls button:hover{color:var(--primary-color)}#info-panel p{margin-bottom:.5rem;font-size:.875rem}#info-panel span{color:var(--primary-color);font-weight:700}.help-text{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-color);font-size:.75rem;color:#aaa}.help-text ul{margin-top:.5rem;padding-left:1.25rem}.help-text li{margin-bottom:.25rem}@media(max-width:1024px){.right-panel{display:none}}@media(max-width:768px){.app-container{flex-direction:column}.sidebar{width:100%;height:auto;border-right:none;border-bottom:1px solid var(--border-color)}.canvas-container{flex:1}}.ai-texture-panel{position:fixed;top:0;right:-400px;width:380px;height:100vh;background-color:var(--panel-bg);border-left:2px solid var(--primary-color);box-shadow:-4px 0 20px #00000080;z-index:1000;display:flex;flex-direction:column;transition:right .3s ease-in-out;overflow:hidden}.ai-texture-panel.show{right:0}.ai-texture-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;background-color:var(--secondary-color);border-bottom:1px solid var(--border-color)}.ai-texture-header h2{font-size:1.125rem;margin:0;color:var(--text-color)}.ai-texture-header .btn-close{background:none;border:none;color:var(--text-color);font-size:1.5rem;cursor:pointer;padding:0;line-height:1;opacity:.7;transition:opacity .2s}.ai-texture-header .btn-close:hover{opacity:1;color:var(--primary-color)}.ai-texture-content{flex:1;overflow-y:auto;padding:1.25rem;display:flex;flex-direction:column;gap:1.25rem}.ai-texture-input-section label,.ai-texture-style-section label,.ai-texture-presets label,.ai-texture-preview label,.ai-texture-history label{display:block;font-size:.875rem;color:#aaa;margin-bottom:.5rem}.ai-texture-input-section textarea{width:100%;padding:.75rem;background-color:var(--background);border:1px solid var(--border-color);border-radius:6px;color:var(--text-color);font-family:inherit;font-size:.9rem;resize:vertical;min-height:70px;transition:border-color .2s}.ai-texture-input-section textarea:focus{outline:none;border-color:var(--primary-color)}.ai-texture-input-section textarea::placeholder{color:#666}.input-controls{display:flex;justify-content:space-between;align-items:center;margin-top:.25rem}.char-count{font-size:.75rem;color:#666}.btn-clear{padding:.3rem .6rem;background-color:transparent;border:1px solid var(--border-color);border-radius:4px;color:#aaa;font-size:.7rem;cursor:pointer;transition:all .2s}.btn-clear:hover{background-color:var(--danger-color);border-color:var(--danger-color);color:#fff}.ai-texture-style-section select{width:100%;padding:.6rem .75rem;background-color:var(--background);border:1px solid var(--border-color);border-radius:6px;color:var(--text-color);font-size:.9rem;cursor:pointer}.ai-texture-style-section select:focus{outline:none;border-color:var(--primary-color)}.preset-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.preset-btn{padding:.4rem .75rem;background-color:var(--background);border:1px solid var(--border-color);border-radius:20px;color:var(--text-color);font-size:.75rem;cursor:pointer;transition:all .2s}.preset-btn:hover{background-color:var(--secondary-color);border-color:var(--primary-color);color:var(--primary-color)}.ai-texture-actions{padding-top:.5rem}.ai-texture-actions .btn{width:100%;padding:.875rem;font-size:1rem}.ai-texture-actions .btn-loading{display:inline-flex;align-items:center;gap:.5rem}.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.ai-texture-preview{padding:1rem;background-color:var(--background);border-radius:8px;border:1px solid var(--border-color)}.preview-image-container{margin-bottom:1rem;border-radius:6px;overflow:hidden;background:repeating-conic-gradient(#2a2a2a 0% 25%,#333 0% 50%) 50% / 20px 20px}.preview-image-container img{width:100%;height:auto;display:block}.preview-actions{display:flex;gap:.75rem}.preview-actions .btn{flex:1;padding:.6rem;font-size:.875rem}.ai-texture-history{border-top:1px solid var(--border-color);padding-top:1rem}.history-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.history-item{aspect-ratio:1;border-radius:6px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color .2s,transform .2s}.history-item:hover{border-color:var(--primary-color);transform:scale(1.05)}.history-item img{width:100%;height:100%;object-fit:cover}.history-item-info{display:none}.no-history{color:#666;font-size:.875rem;text-align:center;padding:1rem}.ai-texture-toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%) translateY(100px);padding:.875rem 1.5rem;border-radius:8px;font-size:.9rem;z-index:2000;opacity:0;transition:transform .3s ease,opacity .3s ease;box-shadow:0 4px 12px #0000004d}.ai-texture-toast.show{transform:translate(-50%) translateY(0);opacity:1}.ai-texture-toast.error{background-color:var(--danger-color);color:#fff}.ai-texture-toast.success{background-color:var(--success-color);color:#fff}.btn-ai{background:linear-gradient(135deg,#667eea,#764ba2);border:none;position:relative;overflow:hidden}.btn-ai:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.btn-ai:hover:before{left:100%}.btn-ai:hover{background:linear-gradient(135deg,#764ba2,#667eea)}@media(max-width:480px){.ai-texture-panel{width:100%;right:-100%}.history-grid{grid-template-columns:repeat(4,1fr)}}.help-modal-content,.about-modal-content{max-width:650px;max-height:85vh}.help-modal-content .modal-body,.about-modal-content .modal-body{padding:1.5rem 2rem}.help-section{margin-bottom:1.5rem}.help-section h3{font-size:1rem;color:var(--primary-color);margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}.help-steps{padding-left:1.25rem;line-height:1.7}.help-steps li{margin-bottom:.5rem;font-size:.9rem}.help-steps strong{color:var(--text-color)}.tools-help-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.tool-help-item{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem;background-color:var(--background);border-radius:6px;border:1px solid var(--border-color)}.tool-help-item .tool-icon{font-size:1.5rem}.tool-help-item strong{display:block;font-size:.875rem;margin-bottom:.25rem}.tool-help-item p{font-size:.75rem;color:#aaa;margin:0}.tips-list{padding-left:1.25rem;line-height:1.6}.tips-list li{margin-bottom:.4rem;font-size:.875rem;color:#ccc}.requirements-list{padding-left:1.25rem;line-height:1.6;list-style:none}.requirements-list li{margin-bottom:.5rem;font-size:.875rem;color:#ccc;padding-left:.5rem;border-left:2px solid var(--primary-color)}.requirements-list code{background-color:var(--background);padding:.125rem .375rem;border-radius:3px;font-family:Courier New,monospace;font-size:.85em;color:var(--primary-color)}.help-text-important{font-size:.875rem;line-height:1.6;color:#fff;margin-bottom:.75rem;font-weight:500}.help-divider{border:none;border-top:1px solid var(--border-color);margin:1.5rem 0}.about-section{background-color:var(--background);padding:1rem;border-radius:8px;border:1px solid var(--border-color)}.about-text{font-size:.875rem;line-height:1.6;color:#ccc;margin-bottom:.75rem}.about-text:last-child{margin-bottom:0}.project-links{display:flex;flex-direction:column;gap:.75rem;margin-top:.75rem}.project-link{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem;background-color:var(--secondary-color);border:1px solid var(--border-color);border-radius:6px;text-decoration:none;color:var(--text-color);transition:all .2s}.project-link:hover{border-color:var(--primary-color);background-color:#3a3a3a;transform:translateY(-2px);box-shadow:0 4px 12px #e8212733}.project-link .project-emoji{font-size:1.5rem}.project-link strong{display:block;color:var(--primary-color);margin-bottom:.25rem}.project-link p{font-size:.75rem;color:#aaa;margin:0}.support-section{text-align:center;padding:1.25rem;background:linear-gradient(135deg,#ffdd001a,#ffa0001a);border:1px solid rgba(255,200,0,.3);border-radius:8px}.support-section h3{justify-content:center}.support-section .about-text{text-align:center}.coffee-btn{display:inline-block;padding:.75rem 1.5rem;background:linear-gradient(135deg,#fd0,#ffa000);color:#000;font-weight:600;font-size:.9rem;text-decoration:none;border-radius:30px;transition:all .2s;box-shadow:0 2px 8px #ffc8004d}.coffee-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px #ffc80066;background:linear-gradient(135deg,#ffa000,#fd0)}@media(max-width:600px){.help-modal-content,.about-modal-content{max-width:95%;max-height:90vh}.help-modal-content .modal-body,.about-modal-content .modal-body{padding:1rem}.tools-help-grid{grid-template-columns:1fr}.project-link{padding:.75rem}}