:root{--bg-primary: #0a0a0a;--bg-secondary: #1a1a1a;--bg-tertiary: #2a2a2a;--accent-cyan: #00ffff;--accent-green: #00ff88;--accent-purple: #8844ff;--text-primary: #ffffff;--text-secondary: #cccccc;--text-muted: #888888;--border-primary: #333333;--border-accent: #00ffff;--shadow-glow: 0 0 20px rgba(0, 255, 255, .3);--shadow-soft: 0 4px 20px rgba(0, 0, 0, .5);--gradient-primary: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);--gradient-accent: linear-gradient(135deg, #00ffff 0%, #00ff88 100%)}*{box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:var(--bg-primary);color:var(--text-primary);padding:1rem;min-height:100vh;display:flex;flex-direction:column;gap:1.5rem;max-width:1200px;margin:0 auto;padding:2rem 1rem}.home-btn{position:fixed;top:1rem;left:1rem;background:var(--gradient-primary);color:var(--accent-cyan);text-decoration:none;padding:.75rem 1rem;border-radius:8px;border:1px solid var(--border-accent);font-weight:600;font-size:.9rem;transition:all .3s ease;box-shadow:var(--shadow-soft);z-index:1000}.home-btn:hover{background:var(--bg-tertiary);box-shadow:var(--shadow-glow);transform:translateY(-2px)}.surround{padding:1rem;background:var(--gradient-primary);border-radius:12px;border:1px solid var(--border-primary);box-shadow:var(--shadow-soft)}#board{background:var(--bg-secondary);border:2px solid var(--border-accent);border-radius:8px;cursor:crosshair;display:block;margin:1rem auto;box-shadow:var(--shadow-glow);transition:box-shadow .3s ease}#board:hover{box-shadow:0 0 30px #00ffff80}.canvas-container{display:flex;gap:1rem;align-items:flex-start;justify-content:center;flex-wrap:wrap;overflow-x:auto;min-width:0}#aiPreviewDock{max-width:300px;border:2px solid var(--border-primary);border-radius:8px;box-shadow:var(--shadow-soft)}#side{display:flex;flex-direction:column;gap:1.5rem}.tabs{display:flex;border-bottom:2px solid var(--border-accent);margin-bottom:1.5rem;border-radius:8px 8px 0 0;overflow:hidden}.tab-btn{flex:1;padding:1rem;text-align:center;border:none;cursor:pointer;font-weight:600;font-size:1rem;background:var(--bg-tertiary);color:var(--text-secondary);transition:all .3s ease;position:relative}.tab-btn:hover{background:var(--bg-secondary);color:var(--text-primary)}.tab-btn.active{background:var(--gradient-accent);color:var(--bg-primary);box-shadow:inset 0 -3px 0 var(--accent-cyan)}.tab-btn.active:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--accent-cyan)}.tab-content{display:none;flex-direction:column;gap:1.5rem;padding:1rem;background:var(--bg-secondary);border-radius:8px;border:1px solid var(--border-primary)}.tab-content.active{display:flex}button{padding:.75rem 1.5rem;font-size:1rem;font-weight:600;border:1px solid var(--border-accent);border-radius:6px;background:var(--gradient-primary);color:var(--accent-cyan);cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-soft)}button:hover{background:var(--bg-tertiary);box-shadow:var(--shadow-glow);transform:translateY(-1px)}button:active{transform:translateY(0)}button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}button.primary{background:var(--gradient-accent);color:var(--bg-primary);border-color:var(--accent-green)}button.primary:hover{background:var(--accent-green);box-shadow:0 0 25px #0f86}button.danger{background:linear-gradient(135deg,#f44,#c00);color:#fff;border-color:#f44}button.danger:hover{background:#f66;box-shadow:0 0 25px #f446}input[type=number],input[type=password],input[type=file],select,textarea{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-primary);border-radius:6px;padding:.75rem;font-size:1rem;transition:all .3s ease}input[type=number],select{width:4rem;text-align:center;font-size:1.2rem;font-weight:600}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent-cyan);box-shadow:0 0 10px #00ffff4d}textarea{width:100%;min-height:120px;font-family:Courier New,monospace;resize:vertical}label{color:var(--text-primary);font-weight:600;margin-bottom:.5rem;display:block}label.size{display:flex;align-items:center;gap:.75rem;margin-bottom:0}#status,#buildStatus,#aiStatus{font-weight:600;min-height:1.5rem;padding:.75rem;border-radius:6px;background:var(--bg-tertiary);border:1px solid var(--border-primary);color:var(--text-secondary)}#palette{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap;justify-content:center}#palette button{min-width:3rem;padding:.5rem;font-size:1.1rem;font-weight:700}#palette button.active{background:var(--gradient-accent);color:var(--bg-primary);box-shadow:var(--shadow-glow)}.grid-controls{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;padding:1rem;background:var(--bg-tertiary);border-radius:8px;border:1px solid var(--border-primary)}.upload-area{border:2px dashed var(--border-primary);border-radius:8px;padding:2rem;text-align:center;background:var(--bg-tertiary);transition:all .3s ease}.upload-area:hover{border-color:var(--accent-cyan);background:var(--bg-secondary)}.index-body{max-width:600px;padding:2rem 1rem}.index-body h1{text-align:center;color:var(--accent-cyan);font-size:2.5rem;margin-bottom:2rem;text-shadow:0 0 20px rgba(0,255,255,.5)}.keybox{margin:2rem 0;padding:1.5rem;background:var(--gradient-primary);border:1px solid var(--border-accent);border-radius:12px;box-shadow:var(--shadow-glow)}.row{display:flex;align-items:center;gap:8px;margin-bottom:10px}.row label{white-space:nowrap}.row input{flex:1;padding:5px}.row button{padding:5px 10px}.puzzle-links{list-style:none;padding:0;display:grid;gap:1rem}.puzzle-links li{margin:0}.puzzle-links a{display:block;padding:.75rem 1rem;background:var(--gradient-primary);color:var(--accent-cyan);text-decoration:none;border:1px solid var(--border-accent);border-radius:8px;font-weight:500;font-size:1rem;transition:all .3s ease;box-shadow:var(--shadow-soft);text-align:center;min-height:60px}.puzzle-links a:hover{background:var(--bg-tertiary);box-shadow:var(--shadow-glow);transform:translateY(-3px)}@media (max-width: 768px){body{padding:1rem .5rem;gap:1rem}.home-btn{position:static;margin-bottom:1rem;align-self:flex-start}.canvas-container{flex-direction:column;align-items:center}#aiPreviewDock{max-width:100%}.grid-controls,.row{flex-direction:column;align-items:stretch}.row input[type=password]{min-width:auto}button{padding:1rem;font-size:1.1rem}input[type=number],select{font-size:1.5rem;padding:1rem}}@media (max-width: 480px){.index-body h1{font-size:2rem}.tabs{flex-direction:column}.tab-btn{border-radius:0}#palette{gap:.25rem}#palette button{min-width:2.5rem;padding:.4rem;font-size:1rem}}@keyframes glow-pulse{0%,to{box-shadow:var(--shadow-glow)}50%{box-shadow:0 0 30px #0ff9}}.glow-animation{animation:glow-pulse 2s ease-in-out infinite}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-primary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-cyan)}