:root{--primary-color: #00bcd4;--primary-hover: #00acc1;--secondary-color: #ff6b35;--secondary-hover: #ff5722;--accent-color: #9c27b0;--accent-hover: #8e24aa;--reset-color: #f44336;--reset-hover: #d32f2f;--randomize-color: #4caf50;--randomize-hover: #43a047;--cyan-neon: #00ffff;--cyan-glow: rgba(0, 255, 255, .3);--background: #0f0f0f;--surface: #1a1a1a;--border: #2a2a2a;--text-primary: #f0f0f0;--text-secondary: #888888;--success: #10b981;--warning: #f59e0b;--error: #ef4444}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:14px;line-height:1.5;color:var(--text-primary);background:linear-gradient(135deg,#0a0a0a,#1a1a1a);overflow-x:hidden}.app-container{display:flex;min-height:100vh;gap:0}.controls-panel{width:320px;min-width:320px;background:linear-gradient(180deg,#1a1a1a,#0f0f0f);border-right:1px solid var(--border);padding:2vh 24px;overflow-y:auto;flex-shrink:0;max-height:100vh;box-shadow:inset -2px 0 4px #0000004d}.panel-header{margin-bottom:2vh;padding-bottom:1.5vh;border-bottom:1px solid #333;box-shadow:0 1px #ffffff0d}.panel-header h1{font-size:20px;font-weight:600;color:var(--text-primary);margin-bottom:8px;line-height:1.2}.panel-header p{font-size:13px;color:var(--text-secondary);line-height:1.4}.aso-oke-title{font-size:20px;font-weight:600;color:var(--text-primary);margin-bottom:12px;line-height:1.2}.logo-container{display:flex;align-items:center;justify-content:flex-start;margin-bottom:12px;margin-left:-24px;margin-right:-24px}.app-logo{width:100%;height:auto;max-height:57px;object-fit:fill}.control-group{margin-bottom:1.5vh;padding:1vh 0;border-bottom:1px solid rgba(42,42,42,.8);box-shadow:0 1px #ffffff05}.control-group:last-child{border-bottom:none;margin-bottom:0}.control-group label{display:block;font-size:13px;font-weight:500;color:var(--text-primary);margin-bottom:.5vh;letter-spacing:.01em}.control-group input[type=file]{width:100%;padding:8px 12px;border:2px dashed #333;border-radius:8px;background:linear-gradient(145deg,#0f0f0f,#1a1a1a);font-size:13px;transition:all .2s ease;cursor:pointer;box-shadow:inset 2px 2px 4px #00000080,inset -2px -2px 4px #ffffff05}.control-group input[type=file]:hover{border-color:#444;background:linear-gradient(145deg,#1a1a1a,#0f0f0f);box-shadow:inset 1px 1px 3px #0009,inset -1px -1px 3px #ffffff08}.control-group input[type=text]{width:100%;padding:10px 12px;border:1px solid #333;border-radius:6px;font-size:14px;background:linear-gradient(145deg,#0f0f0f,#1a1a1a);color:var(--text-primary);transition:all .2s ease;box-shadow:inset 2px 2px 4px #00000080,inset -2px -2px 4px #ffffff05}.control-group input[type=text]:focus{outline:none;border-color:#444;box-shadow:inset 1px 1px 3px #0009,inset -1px -1px 3px #ffffff08,0 0 0 2px #4a4a4a4d}.control-group input[type=range]{width:100%;height:6px;border-radius:3px;background:linear-gradient(180deg,#0a0a0a,#1a1a1a);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:inset 2px 2px 4px #000c,inset -1px -1px 2px #ffffff0d,0 0 8px #0ff3;border:1px solid var(--cyan-neon)}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(145deg,var(--cyan-neon),#00bcd4);cursor:pointer;box-shadow:2px 2px 6px #000c,-1px -1px 3px #ffffff1a,0 0 12px var(--cyan-glow),inset 1px 1px 2px #ffffff4d;transition:all .2s ease;border:1px solid var(--cyan-neon)}.control-group input[type=range]::-webkit-slider-thumb:hover{background:linear-gradient(145deg,#00ffff,var(--cyan-neon));transform:scale(1.1);box-shadow:3px 3px 8px #000000e6,-2px -2px 4px #fff3,0 0 16px var(--cyan-glow),inset 1px 1px 3px #fff6}.control-group input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(145deg,var(--cyan-neon),#00bcd4);cursor:pointer;border:1px solid var(--cyan-neon);box-shadow:2px 2px 6px #000c,-1px -1px 3px #ffffff1a,0 0 12px var(--cyan-glow)}.upload-hint{font-size:11px;color:var(--text-secondary);margin-top:.4vh;margin-bottom:.5vh;line-height:1.4}.btn-randomize{width:100%;padding:8px 12px;background:linear-gradient(145deg,var(--randomize-color),#2e7d32);color:var(--text-primary);border:1px solid var(--randomize-color);border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;margin-top:.8vh;box-shadow:2px 2px 6px #000c,-1px -1px 3px #ffffff1a,inset 1px 1px 2px #fff3,0 0 8px #4caf504d}.btn-randomize:hover{transform:translateY(-1px);background:linear-gradient(145deg,var(--randomize-hover),var(--randomize-color));box-shadow:3px 3px 8px #000000e6,-2px -2px 4px #ffffff26,inset 1px 1px 3px #ffffff4d,0 0 12px #4caf5066}.btn-randomize:active{transform:translateY(1px);box-shadow:inset 3px 3px 6px #000c,inset -1px -1px 2px #ffffff1a}.checkbox-label{display:flex!important;align-items:center;cursor:pointer;font-size:13px!important;margin-bottom:0!important}.checkbox-label input[type=checkbox]{margin-right:8px;accent-color:#4a4a4a;background:linear-gradient(145deg,#0f0f0f,#1a1a1a)}.button-group{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2vh;padding-top:1.5vh;border-top:2px solid var(--border)}.button-group .btn:first-child{grid-column:1 / -1}.btn{padding:10px 16px;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;text-align:center}.btn-primary{background:linear-gradient(145deg,var(--primary-color),#0097a7);color:var(--text-primary);border:1px solid var(--primary-color);box-shadow:2px 2px 6px #000c,-1px -1px 3px #ffffff1a,inset 1px 1px 2px #fff3,0 0 8px #00bcd44d}.btn-primary:hover{background:linear-gradient(145deg,var(--primary-hover),var(--primary-color));transform:translateY(-1px);box-shadow:3px 3px 8px #000000e6,-2px -2px 4px #ffffff26,inset 1px 1px 3px #ffffff4d,0 0 12px #00bcd466}.btn-primary:active{transform:translateY(1px);box-shadow:inset 3px 3px 6px #000c,inset -1px -1px 2px #ffffff1a}.btn-secondary{background:linear-gradient(145deg,var(--secondary-color),#e64a19);color:var(--text-primary);border:1px solid var(--secondary-color);box-shadow:2px 2px 6px #000c,-1px -1px 3px #ffffff1a,inset 1px 1px 2px #fff3,0 0 8px #ff6b354d}.btn-secondary:hover{background:linear-gradient(145deg,var(--secondary-hover),var(--secondary-color));transform:translateY(-1px);box-shadow:3px 3px 8px #000000e6,-2px -2px 4px #ffffff26,inset 1px 1px 3px #ffffff4d,0 0 12px #ff6b3566}.btn-secondary:active{transform:translateY(1px);box-shadow:inset 3px 3px 6px #000c,inset -1px -1px 2px #ffffff1a}.btn-accent{background:linear-gradient(145deg,var(--accent-color),#7b1fa2);color:var(--text-primary);border:1px solid var(--accent-color);box-shadow:2px 2px 6px #000c,-1px -1px 3px #ffffff1a,inset 1px 1px 2px #fff3,0 0 8px #9c27b04d}.btn-accent:hover{background:linear-gradient(145deg,var(--accent-hover),var(--accent-color));transform:translateY(-1px);box-shadow:3px 3px 8px #000000e6,-2px -2px 4px #ffffff26,inset 1px 1px 3px #ffffff4d,0 0 12px #9c27b066}.btn-accent:active{transform:translateY(1px);box-shadow:inset 3px 3px 6px #000c,inset -1px -1px 2px #ffffff1a}.button-group .btn:first-child{background:linear-gradient(145deg,var(--reset-color),#c62828);border:1px solid var(--reset-color);box-shadow:2px 2px 6px #000c,-1px -1px 3px #ffffff1a,inset 1px 1px 2px #fff3,0 0 8px #f443364d}.button-group .btn:first-child:hover{background:linear-gradient(145deg,var(--reset-hover),var(--reset-color));transform:translateY(-1px);box-shadow:3px 3px 8px #000000e6,-2px -2px 4px #ffffff26,inset 1px 1px 3px #ffffff4d,0 0 12px #f4433666}.button-group .btn:first-child:active{transform:translateY(1px);box-shadow:inset 3px 3px 6px #000c,inset -1px -1px 2px #ffffff1a}.preview-panel{flex:1;display:flex;flex-direction:column;background:linear-gradient(135deg,#0a0a0a,#1a1a1a)}.canvas-container{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;min-height:300px;overflow:hidden}#preview-canvas{width:auto;height:auto;border:2px solid #2a2a2a;border-radius:8px;background:#0a0a0a;box-shadow:inset 3px 3px 6px #000c,inset -3px -3px 6px #ffffff05;display:block}.preview-info{padding:16px 24px;background:linear-gradient(180deg,#1a1a1a,#0f0f0f);border-top:1px solid #2a2a2a;box-shadow:inset 0 1px #ffffff05;display:flex;gap:24px;font-size:12px}.info-item{display:flex;align-items:center;gap:8px}.info-label{color:var(--text-secondary);font-weight:500}#canvas-size,#pattern-info{color:var(--text-primary);font-weight:500}@media (max-width: 768px){.app-container{flex-direction:column}.controls-panel{width:100%;min-width:auto;max-height:50vh;border-right:none;border-bottom:1px solid var(--border);padding:1vh 16px}.panel-header{margin-bottom:1.5vh;padding-bottom:1vh}.control-group{margin-bottom:1vh;padding:.8vh 0}.button-group{margin-top:1.5vh;padding-top:1vh}.preview-panel{min-height:50vh;flex:1}.canvas-container{padding:16px}.preview-info{padding:12px 16px;flex-direction:column;gap:8px}}@media (max-width: 480px){.controls-panel{padding:1vh 12px;max-height:45vh}.panel-header h1{font-size:18px}.button-group{grid-template-columns:1fr}.button-group .btn:first-child{grid-column:1}.preview-panel{min-height:55vh}}@media (max-height: 600px){.controls-panel{padding:1vh 24px}.control-group{margin-bottom:1vh;padding:.5vh 0}.panel-header{margin-bottom:1vh;padding-bottom:.8vh}.button-group{margin-top:1vh;padding-top:.8vh}}.loading{opacity:.6;pointer-events:none}.error-message{color:var(--error);font-size:11px;margin-top:4px;display:none}.error .error-message{display:block}.error input{border-color:var(--error)}