body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.auth-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#1e1e1e,#2a2a2a);padding:20px}.auth-box{background:#252525;border-radius:15px;box-shadow:0 10px 30px #00000080;padding:40px;width:100%;max-width:450px}.auth-header{text-align:center;margin-bottom:30px}.auth-header h1{font-size:2em;margin-bottom:10px;background:linear-gradient(45deg,#d4af37,gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.auth-header p{color:#999;font-size:.95em}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:30px}.auth-tabs button{padding:12px;background:#1a1a1a;border:2px solid #333;border-radius:8px;color:#999;font-size:1em;font-weight:700;cursor:pointer;transition:all .3s ease}.auth-tabs button.active{background:#d4af371a;border-color:#d4af37;color:#d4af37}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;color:#d4af37;font-weight:500}.form-group input{width:100%;padding:12px;background:#1a1a1a;border:2px solid #333;border-radius:8px;color:#fff;font-size:1em;transition:all .3s ease}.form-group input:focus{outline:none;border-color:#d4af37}.error-message{background:#dc354533;border:1px solid #dc3545;color:#ff6b6b;padding:12px;border-radius:8px;margin-bottom:20px;font-size:.9em}.submit-btn{width:100%;padding:14px;background:linear-gradient(45deg,#d4af37,gold);border:none;border-radius:8px;color:#1a1a1a;font-size:1.1em;font-weight:700;cursor:pointer;transition:all .3s ease}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 5px 20px #d4af3780}.auth-footer{margin-top:25px;text-align:center}.auth-footer p{color:#666;font-size:.85em}.project-manager{background:#1a1a1a;padding:15px 20px;border-bottom:2px solid #333;margin-bottom:20px}.project-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px}.user-info{display:flex;align-items:center;gap:15px}.username{color:#d4af37;font-weight:700;font-size:1.1em}.logout-btn{padding:8px 16px;background:#333;border:1px solid #444;border-radius:6px;color:#999;cursor:pointer;transition:all .3s ease;font-size:.9em}.logout-btn:hover{background:#444;color:#fff}.project-actions{display:flex;gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:8px;font-weight:700;cursor:pointer;transition:all .3s ease;font-size:.95em}.new-btn{background:#4caf50;color:#fff}.new-btn:hover{background:#45a049;transform:translateY(-2px)}.save-btn{background:linear-gradient(45deg,#d4af37,gold);color:#1a1a1a}.save-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #d4af3766}.current-project-info{margin-top:15px;padding:10px 15px;background:#d4af371a;border-left:3px solid #D4AF37;border-radius:5px;color:#fff;font-size:.95em}.unsaved{color:#ff6b6b;margin-left:10px;font-weight:700}.projects-list{margin-top:20px}.projects-list h4{color:#d4af37;margin-bottom:15px;font-size:1.1em}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.project-card{background:#252525;border:2px solid #333;border-radius:10px;padding:15px;transition:all .3s ease}.project-card:hover{border-color:#d4af37;transform:translateY(-2px)}.project-card-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:10px}.project-name{color:#fff;font-weight:700;word-break:break-word;flex:1}.delete-project-btn{background:#dc3545;color:#fff;border:none;border-radius:50%;width:24px;height:24px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.delete-project-btn:hover{background:#c82333;transform:scale(1.1)}.project-meta{display:flex;justify-content:space-between;color:#999;font-size:.85em;margin-bottom:12px}.load-btn{width:100%;padding:8px;background:#4caf50;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:700;transition:all .3s ease}.load-btn:hover{background:#45a049}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#252525;padding:30px;border-radius:15px;box-shadow:0 10px 40px #00000080;min-width:400px;max-width:90%}.modal-content h3{color:#d4af37;margin-bottom:20px}.modal-content input{width:100%;padding:12px;background:#1a1a1a;border:2px solid #333;border-radius:8px;color:#fff;font-size:1em;margin-bottom:20px}.modal-content input:focus{outline:none;border-color:#d4af37}.modal-actions{display:flex;gap:10px;justify-content:flex-end}.cancel-btn,.save-modal-btn{padding:10px 24px;border:none;border-radius:8px;font-weight:700;cursor:pointer;transition:all .3s ease}.cancel-btn{background:#333;color:#fff}.cancel-btn:hover{background:#444}.save-modal-btn{background:linear-gradient(45deg,#d4af37,gold);color:#1a1a1a}.save-modal-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #d4af3766}@media(max-width:768px){.project-header{flex-direction:column;align-items:stretch}.project-actions{width:100%}.action-btn{flex:1}.modal-content{min-width:auto}}.admin-panel{margin:10px 0}.admin-upload-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 24px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:all .3s;box-shadow:0 4px 15px #667eea4d}.admin-upload-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.admin-modal{max-width:500px}.admin-modal h3{color:#667eea;margin-bottom:10px}.admin-modal input[type=text],.admin-modal textarea{width:100%;padding:12px;margin-bottom:15px;border:2px solid #e0e0e0;border-radius:8px;font-size:14px;transition:border-color .3s;box-sizing:border-box}.admin-modal input[type=text]:focus,.admin-modal textarea:focus{outline:none;border-color:#667eea}.admin-modal textarea{resize:vertical;font-family:inherit}.file-upload-label{display:block;margin-bottom:15px}.upload-button{background:#4caf50;color:#fff;padding:14px 24px;border-radius:8px;text-align:center;cursor:pointer;font-weight:600;transition:all .3s}.upload-button:hover{background:#45a049;transform:translateY(-1px)}.upload-button.disabled{background:#ccc;cursor:not-allowed;transform:none}.global-patterns-section{margin-top:20px;padding:15px;background:linear-gradient(135deg,#667eea15,#764ba215);border-radius:10px;border:2px dashed #667eea}.global-patterns-section h4{color:#667eea;margin-bottom:10px;display:flex;align-items:center;gap:8px}.global-pattern-item{position:relative}.global-pattern-badge{position:absolute;top:5px;right:5px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:3px 8px;border-radius:4px;font-size:10px;font-weight:700;z-index:1}.delete-global-pattern{position:absolute;top:5px;left:5px;background:#ff3b30e6;color:#fff;border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;z-index:2;transition:all .2s}.delete-global-pattern:hover{background:#ff3b30;transform:scale(1.1)}*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #8B4513;--secondary: #D4AF37;--dark: #1a1a1a;--light: #f5f5f5;--border: #333}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#1e1e1e,#2a2a2a);color:var(--light);min-height:100vh}.app{max-width:1400px;margin:0 auto;padding:20px}header{text-align:center;margin-bottom:40px;padding:30px 0;border-bottom:2px solid var(--secondary)}header h1{font-size:3em;margin-bottom:10px;background:linear-gradient(45deg,var(--secondary),#FFD700);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}header p{font-size:1.2em;color:#999}.container{display:grid;grid-template-columns:1fr 400px;gap:30px;align-items:start}.canvas-section{display:flex;justify-content:center;align-items:center;padding:30px;background:#252525;border-radius:15px;box-shadow:0 10px 30px #00000080;position:relative;overflow:hidden;min-height:600px;min-width:600px}.canvas-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.2em;color:#666;text-align:center;pointer-events:none;z-index:1}.pattern-canvas{border-radius:10px;box-shadow:0 5px 20px #d4af374d;transition:all .3s ease;position:relative;z-index:2}.pattern-canvas:hover{box-shadow:0 8px 30px #d4af3780}.pattern-canvas.drag-over{box-shadow:0 0 30px #ffd70099;border:3px dashed var(--secondary)}.pattern-instance{cursor:grab;transition:opacity .2s ease}.pattern-instance:active{cursor:grabbing}.pattern-instance:hover{opacity:.9}.pattern-instance.selected rect{stroke:gold;stroke-width:3}.pattern-instance rect{pointer-events:all}.controls-section{background:#252525;padding:30px;border-radius:15px;box-shadow:0 10px 30px #00000080;max-height:calc(100vh - 120px);overflow-y:auto;position:sticky;top:20px}.controls-section::-webkit-scrollbar{width:10px}.controls-section::-webkit-scrollbar-track{background:#1a1a1a;border-radius:10px;margin:10px 0}.controls-section::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--secondary),#FFD700);border-radius:10px}.controls-section::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#FFD700,var(--secondary))}.control-group{margin-bottom:30px}.control-group h3{font-size:1.1em;margin-bottom:15px;color:var(--secondary);display:flex;align-items:center;gap:8px}.pattern-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-height:400px;overflow-y:auto;padding-right:8px}.pattern-grid::-webkit-scrollbar{width:8px}.pattern-grid::-webkit-scrollbar-track{background:#1a1a1a;border-radius:10px}.pattern-grid::-webkit-scrollbar-thumb{background:var(--secondary);border-radius:10px}.pattern-grid::-webkit-scrollbar-thumb:hover{background:gold}.pattern-btn{background:#1a1a1a;border:2px solid var(--border);border-radius:10px;padding:12px;cursor:grab;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:8px}.pattern-btn:active{cursor:grabbing}.pattern-btn:hover{border-color:var(--secondary);transform:translateY(-2px);box-shadow:0 5px 15px #d4af374d}.pattern-btn svg{border-radius:5px;pointer-events:none}.pattern-btn span{font-size:.85em;color:var(--light);text-align:center;pointer-events:none}.color-picker{display:flex;gap:10px;align-items:center}.color-picker input[type=color]{width:60px;height:40px;border:none;border-radius:8px;cursor:pointer;background:transparent}.color-input{flex:1;padding:10px;background:#1a1a1a;border:2px solid var(--border);border-radius:8px;color:var(--light);font-size:1em;font-family:monospace;text-transform:uppercase}.color-input:focus{outline:none;border-color:var(--secondary)}.slider{width:100%;height:8px;border-radius:5px;background:#1a1a1a;outline:none;-webkit-appearance:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--secondary);cursor:pointer;box-shadow:0 0 10px #d4af3780}.slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--secondary);cursor:pointer;border:none;box-shadow:0 0 10px #d4af3780}.download-btn,.reset-btn{width:100%;padding:15px;font-size:1.1em;font-weight:700;border:none;border-radius:10px;cursor:pointer;transition:all .3s ease;margin-bottom:10px}.download-btn:disabled,.reset-btn:disabled{opacity:.5;cursor:not-allowed}.download-btn{background:linear-gradient(45deg,var(--secondary),#FFD700);color:var(--dark)}.download-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 20px #d4af3780}.reset-btn{background:#333;color:var(--light);border:2px solid var(--border)}.reset-btn:hover:not(:disabled){background:#444;border-color:var(--light)}.delete-btn{width:100%;padding:12px;margin-top:15px;background:#dc3545;color:#fff;border:none;border-radius:8px;font-size:1em;font-weight:700;cursor:pointer;transition:all .3s ease}.delete-btn:hover{background:#c82333;transform:translateY(-2px);box-shadow:0 5px 15px #dc354566}.upload-btn{width:100%;padding:12px;background:linear-gradient(45deg,#4caf50,#45a049);color:#fff;border:none;border-radius:8px;font-size:1em;font-weight:700;cursor:pointer;transition:all .3s ease;margin-bottom:15px}.upload-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #4caf5066}.custom-patterns-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:15px;max-height:300px;overflow-y:auto;padding-right:8px}.custom-patterns-grid::-webkit-scrollbar{width:8px}.custom-patterns-grid::-webkit-scrollbar-track{background:#1a1a1a;border-radius:10px}.custom-patterns-grid::-webkit-scrollbar-thumb{background:#4caf50;border-radius:10px}.custom-patterns-grid::-webkit-scrollbar-thumb:hover{background:#45a049}.custom-pattern-item{position:relative}.delete-custom-btn{position:absolute;top:-5px;right:-5px;width:24px;height:24px;background:#dc3545;color:#fff;border:2px solid #1a1a1a;border-radius:50%;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:10}.delete-custom-btn:hover{background:#c82333;transform:scale(1.1)}.selected-pattern-controls{background:#d4af371a;border:2px solid var(--secondary);border-radius:10px;padding:20px;margin-bottom:20px}.selected-pattern-controls label{display:block;margin-top:15px;margin-bottom:8px;color:var(--secondary);font-weight:500}.selected-pattern-controls label:first-of-type{margin-top:10px}.hint{font-size:.9em;color:#999;margin-top:-10px;margin-bottom:10px}.tips{background:#1a1a1a;padding:15px;border-radius:10px;border:1px solid var(--border);margin-top:20px}.tips h4{color:var(--secondary);margin-bottom:10px}.tips ul{list-style:none;padding:0}.tips li{padding:5px 0;color:#999;font-size:.9em}.tips li:before{content:"→ ";color:var(--secondary);margin-right:5px}footer{text-align:center;margin-top:50px;padding:30px 0;border-top:2px solid var(--border);color:#999}@media(max-width:1024px){.container{grid-template-columns:1fr}.controls-section{order:2}.canvas-section{order:1}}@media(max-width:768px){header h1{font-size:2em}.pattern-grid{grid-template-columns:repeat(2,1fr)}.canvas-section{padding:15px}.controls-section{padding:20px}}