*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#d0c8d8;background:#141220;font-family:Raleway,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;line-height:1.5;overflow-x:hidden}#root{min-height:100vh}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#f97a3a33;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#f97a3a59}::selection{color:#f0ebe4;background:#f97a3a40}.auth-container{background:#141220;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.auth-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#1c182ad9;border:1px solid #786e8c0f;border-radius:16px;width:100%;max-width:380px;padding:40px 36px;box-shadow:0 16px 64px #0006}.auth-logo{text-align:center;margin-bottom:32px}.auth-logo-icon{border-radius:12px;width:56px;height:56px;margin:0 auto 10px;display:block}.auth-logo h1{color:#f0ebe4;letter-spacing:.5px;margin:0;font-family:Raleway,sans-serif;font-size:20px;font-weight:700}.auth-subtitle{color:#5e5570;letter-spacing:.3px;margin:6px 0 0;font-size:12px;font-weight:500}.auth-form{flex-direction:column;gap:16px;display:flex}.auth-field label{color:#8a8098;text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;font-size:11px;font-weight:600;display:block}.auth-field input{color:#e8e0f0;box-sizing:border-box;background:#100e1acc;border:1px solid #786e8c1a;border-radius:8px;outline:none;width:100%;padding:11px 14px;font-family:Raleway,sans-serif;font-size:14px;transition:border-color .2s,box-shadow .2s}.auth-field input:focus{border-color:#f97a3a4d;box-shadow:0 0 0 3px #f97a3a0f}.auth-field input::placeholder{color:#4e4660}.auth-error{color:#f97a3ae6;text-align:center;background:#e8453014;border:1px solid #e8453026;border-radius:8px;padding:10px 14px;font-size:12px;font-weight:600}.auth-submit{color:#fff;cursor:pointer;letter-spacing:.3px;background:linear-gradient(135deg,#e84530,#f97a3a);border:none;border-radius:10px;margin-top:4px;padding:12px;font-family:Raleway,sans-serif;font-size:14px;font-weight:700;transition:all .2s}.auth-submit:hover:not(:disabled){background:linear-gradient(135deg,#f05540,#ffa04a);transform:translateY(-1px);box-shadow:0 4px 20px #f97a3a4d}.auth-submit:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px #f97a3a33}.auth-submit:disabled{opacity:.4;cursor:not-allowed}.generator-container{color:#d0c8d8;background:#141220;min-height:100vh}.gen-header{-webkit-backdrop-filter:blur(16px);z-index:100;background:#141220f2;border-bottom:1px solid #f97a3a0f;justify-content:space-between;align-items:center;height:52px;padding:0 24px;display:flex;position:sticky;top:0}.gen-header-left{align-items:center;gap:10px;display:flex}.gen-logo{border-radius:7px;width:26px;height:26px}.gen-header h1{letter-spacing:.5px;color:#f0ebe4;margin:0;font-family:Raleway,sans-serif;font-size:15px;font-weight:700}.gen-header-right{align-items:center;gap:12px;display:flex}.gen-user{color:#9990a8;font-size:13px}.gen-logout{color:#f97a3abf;cursor:pointer;background:0 0;border:1px solid #e8453026;border-radius:8px;padding:5px 14px;font-family:Raleway,sans-serif;font-size:11px;font-weight:600;transition:all .2s}.gen-logout:hover{color:#f97a3a;background:#e8453014;border-color:#e845304d}.gen-main.gen-main-3col{grid-template-columns:280px 1fr 300px;gap:14px;max-width:1480px;min-height:calc(100vh - 52px);margin:0 auto;padding:14px;display:grid}@media (width<=1200px){.gen-main.gen-main-3col{grid-template-columns:260px 1fr 280px;gap:10px;padding:10px}}@media (width<=1000px){.gen-main.gen-main-3col{grid-template-columns:1fr;max-width:600px}}.gen-panel{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#181424bf;border:1px solid #786e8c0f;border-radius:14px;padding:16px}.gen-panel h2{text-transform:uppercase;letter-spacing:1.6px;color:#7a7290;border-bottom:1px solid #786e8c0f;align-items:center;gap:7px;margin:0 0 12px;padding-bottom:8px;font-family:Raleway,sans-serif;font-size:11px;font-weight:700;display:flex}.gen-panel h2 svg{opacity:.5;flex-shrink:0}.gen-sidebar{scrollbar-width:thin;scrollbar-color:#f97a3a26 transparent;align-self:start;max-height:calc(100vh - 80px);position:sticky;top:66px;overflow:hidden auto}.gen-sidebar::-webkit-scrollbar{width:4px}.gen-sidebar::-webkit-scrollbar-track{background:0 0}.gen-sidebar::-webkit-scrollbar-thumb{background:#f97a3a26;border-radius:4px}.gen-sidebar::-webkit-scrollbar-thumb:hover{background:#f97a3a40}@media (width<=1000px){.gen-sidebar{width:100%;max-height:none;position:static}}.gen-panel-section{margin-bottom:4px}.gen-panel-divider{background:#786e8c0f;height:1px;margin:12px -16px}.gen-preview-panel{flex-direction:column;min-height:500px;display:flex}.gen-preview-panel>h2{display:none}.gen-preview-toolbar{border-bottom:1px solid #786e8c0f;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;display:flex}.gen-preview-toolbar h2{border:none;margin:0;padding:0}.gen-preview-toolbar-right{align-items:center;gap:8px;display:flex}.gen-preview-grid-toggle-inline{color:#7a7290;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;align-items:center;gap:5px;padding:3px 8px;font-size:11px;font-weight:600;transition:all .15s;display:inline-flex}.gen-preview-grid-toggle-inline:hover{color:#9990a8;background:#786e8c0f}.gen-preview-grid-toggle-inline input{accent-color:#f97a3a;width:12px;height:12px}.gen-zoom-display{color:#8a8098;text-align:center;background:#100e1a80;border:1px solid #786e8c0f;border-radius:5px;min-width:28px;padding:3px 6px;font-family:Courier New,monospace;font-size:12px;font-weight:700}.gen-reset-view-btn{color:#7a7290;cursor:pointer;background:#100e1a80;border:1px solid #786e8c14;border-radius:7px;justify-content:center;align-items:center;width:28px;height:28px;font-size:15px;line-height:1;transition:all .15s;display:flex}.gen-reset-view-btn:hover{color:#f97a3a;background:#f97a3a0d;border-color:#f97a3a33}.gen-group{margin-bottom:14px}.gen-group:last-child{margin-bottom:0}.gen-group label{color:#8a8098;text-transform:uppercase;letter-spacing:.8px;margin-bottom:5px;font-size:10px;font-weight:600;display:block}.gen-slider-header{justify-content:space-between;align-items:center;margin-bottom:2px;display:flex}.gen-slider-header label{margin-bottom:0}.gen-slider-value{color:#f97a3a;background:#f97a3a14;border-radius:4px;padding:1px 6px;font-family:Courier New,monospace;font-size:12px;font-weight:700}.gen-input{color:#e8e0f0;letter-spacing:.5px;box-sizing:border-box;background:#0c0a16b3;border:1px solid #786e8c14;border-radius:8px;outline:none;width:100%;padding:9px 11px;font-family:Courier New,monospace;font-size:13px;transition:border-color .2s,box-shadow .2s}.gen-input:focus{border-color:#f97a3a40;box-shadow:0 0 0 2px #f97a3a0d}.gen-input::placeholder{color:#3e3650}.gen-hint{color:#5e5570;margin-top:4px;font-size:10px;line-height:1.4;display:block}.gen-color-mode{background:#0c0a1680;border:1px solid #786e8c0d;border-radius:8px;gap:2px;padding:2px;display:flex}.gen-color-mode button{color:#5e5570;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:6px;flex:1;padding:6px 4px;font-family:Raleway,sans-serif;font-size:11px;font-weight:600;transition:all .15s}.gen-color-mode button:hover:not(.active){color:#9990a8}.gen-color-mode button.active{color:#f97a3a;background:#f97a3a1f;box-shadow:0 1px 4px #f97a3a0f}.gen-color-stops{flex-wrap:wrap;align-items:center;gap:5px;margin-bottom:8px;display:flex}.gen-color-stops-compact{margin-bottom:6px}.gen-color-stop{position:relative}.gen-color-stop.active .gen-color-swatch{box-shadow:0 0 0 2px #f97a3abf}.gen-color-swatch{cursor:pointer;border:2px solid #ffffff0f;border-radius:6px;width:26px;height:26px;transition:all .15s}.gen-color-swatch:hover{border-color:#ffffff26;transform:scale(1.08)}.gen-color-remove{color:#fff;cursor:pointer;opacity:0;background:#e84530;border:none;border-radius:50%;justify-content:center;align-items:center;width:14px;height:14px;font-size:9px;line-height:1;transition:opacity .15s;display:flex;position:absolute;top:-4px;right:-4px}.gen-color-stop:hover .gen-color-remove{opacity:1}.gen-color-add{color:#5e5570;cursor:pointer;background:0 0;border:1.5px dashed #f97a3a2e;border-radius:6px;justify-content:center;align-items:center;width:26px;height:26px;font-size:15px;transition:all .15s;display:flex}.gen-color-add:hover{color:#f97a3a;border-color:#f97a3a66;transform:scale(1.08)}.gen-picker-wrap{flex-direction:column;align-items:center;gap:6px;display:flex}.gen-picker-wrap-compact{gap:5px}.gen-picker-wrap .react-colorful{border-radius:8px;width:100%!important;height:110px!important}.gen-hex-input{color:#e8e0f0;text-align:center;box-sizing:border-box;background:#0c0a16b3;border:1px solid #786e8c14;border-radius:6px;outline:none;width:100%;padding:6px 9px;font-family:Courier New,monospace;font-size:12px}.gen-range{accent-color:#f97a3a;width:100%;height:4px}.gen-preview-area{background-color:#06050c99;background-image:linear-gradient(45deg,#231e2d59 25%,#0000 25%),linear-gradient(-45deg,#231e2d59 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#231e2d59 75%),linear-gradient(-45deg,#0000 75%,#231e2d59 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-repeat:repeat;background-size:16px 16px;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;border:1px solid #786e8c0a;border-radius:10px;flex:1;justify-content:center;align-items:center;min-height:300px;margin-bottom:10px;padding:16px;display:flex;position:relative;overflow:hidden}.gen-preview-grid-toggle{display:none}.gen-preview-img{image-rendering:pixelated;image-rendering:crisp-edges;max-width:100%}.gen-preview-stage{cursor:grab;-webkit-user-select:none;user-select:none;display:inline-flex}.gen-preview-stage.panning{cursor:grabbing}.gen-preview-stage .gen-preview-img{max-width:none;transition:transform 20ms linear}.gen-preview-canvas{image-rendering:pixelated;image-rendering:crisp-edges;width:100%;height:100%;display:block}.gen-preview-canvas-wrap{cursor:grab;-webkit-user-select:none;user-select:none;overscroll-behavior:contain;touch-action:none;width:100%;height:100%;min-height:200px}.gen-preview-canvas-wrap.panning{cursor:grabbing}.gen-preview-zoom-help{display:none}.gen-preview-empty{color:#4e4660;font-size:13px;font-style:italic}.gen-preview-info{text-align:center;margin-bottom:10px}.gen-size-info{color:#5e5570;font-family:Courier New,monospace;font-size:11px;font-weight:500}.gen-actions{gap:8px;display:flex}.gen-btn{cursor:pointer;letter-spacing:.3px;border:none;border-radius:10px;flex:1;justify-content:center;align-items:center;padding:10px;font-family:Raleway,sans-serif;font-size:12px;font-weight:700;transition:all .2s;display:inline-flex}.gen-btn:disabled{opacity:.3;cursor:not-allowed}.gen-btn-primary{color:#fff;background:linear-gradient(135deg,#e84530,#f97a3a);box-shadow:0 2px 12px #f97a3a1f}.gen-btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#f05540,#ffa04a);transform:translateY(-1px);box-shadow:0 4px 20px #f97a3a40}.gen-btn-primary:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px #f97a3a26}.gen-btn-secondary{color:#f9974a;background:#f97a3a0d;border:1px solid #f97a3a1a}.gen-btn-secondary:hover:not(:disabled){background:#f97a3a1a;border-color:#f97a3a33}.gradient-bar-wrap{margin-bottom:8px;padding:0 4px}.gradient-bar-track{height:10px;padding-bottom:20px;position:relative}.gradient-bar-fill{box-sizing:border-box;border:1px solid #786e8c1a;border-radius:5px;width:100%;height:10px}.gradient-flag{cursor:grab;z-index:2;filter:drop-shadow(0 1px 2px #0000004d);flex-direction:column;align-items:center;width:14px;transition:filter .12s;display:flex;position:absolute;top:12px;transform:translate(-50%)}.gradient-flag:active{cursor:grabbing}.gradient-flag.active{z-index:3;filter:drop-shadow(0 0 5px #f97a3a80)}.gradient-flag-arrow{border-bottom:4px solid #ffffffb3;border-left:4px solid #0000;border-right:4px solid #0000;width:0;height:0}.gradient-flag.active .gradient-flag-arrow{border-bottom-color:#fff}.gradient-flag-body{box-sizing:border-box;border:2px solid #ffffffb3;border-radius:3px;width:14px;height:14px;position:relative;overflow:hidden}.gradient-flag.active .gradient-flag-body{border-color:#fff;width:16px;height:16px}.gradient-flag-checker{z-index:-1;background-image:linear-gradient(45deg,#5046644d 25%,#0000 25%),linear-gradient(-45deg,#5046644d 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#5046644d 75%),linear-gradient(-45deg,#0000 75%,#5046644d 75%);background-position:0 0,0 3px,3px -3px,-3px 0;background-size:6px 6px;position:absolute;inset:0}.gen-divider{background:#786e8c0f;height:1px;margin:12px 0}.gen-badge-mode-switch{margin-bottom:8px}.gen-color-editor{background:#120f1c80;border:1px solid #786e8c0f;border-radius:10px;padding:10px}.gen-color-editor-head{flex-direction:column;align-items:stretch;gap:5px;margin-bottom:8px;display:flex}.gen-color-editor-actions{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:4px;display:grid}.gen-color-editor-head label{letter-spacing:1px;margin-bottom:0;font-size:10px}.gen-color-mode-compact{width:100%;min-width:0}.gen-color-mode-compact button{padding:5px 4px;font-size:10px}.gen-color-mode-scope{width:100%}.gen-color-editor .gradient-bar-wrap{margin:4px 0 6px;padding:0 2px}.gen-inline-color-control{margin-top:5px}.gen-color-code-field{width:100%}.gen-color-code-shell{background:#0c0a1666;border:1px solid #786e8c0f;border-radius:8px;padding:7px}.gen-color-code-field.compact label{margin-bottom:4px;font-size:10px}.gen-inline-color-row{grid-template-columns:36px minmax(0,1fr);align-items:center;gap:5px;display:grid}.gen-color-format-switch{margin-bottom:5px}.gen-color-format-switch button{padding:4px;font-size:10px}.gen-color-native{cursor:pointer;background:#0c0a1699;border:1px solid #786e8c14;border-radius:6px;width:36px;height:30px;padding:2px}.gen-color-code-input-wrap{flex:1;position:relative}.gen-inline-color-input{flex:1}.gen-color-code-input{padding-right:36px}.gen-eyedropper-btn{color:#ffd2b2;cursor:pointer;background:#f97a3a0f;border:1px solid #f97a3a1f;border-radius:5px;justify-content:center;align-items:center;width:28px;height:24px;line-height:1;transition:all .15s;display:inline-flex;position:absolute;top:50%;right:3px;transform:translateY(-50%)}.gen-eyedropper-btn:hover{color:#fff2e8;background:#f97a3a26;border-color:#f97a3a40}.gen-eyedropper-icon-svg{width:13px;height:13px;color:inherit}.gen-eyedrop-overlay{z-index:99999;cursor:crosshair;position:fixed;inset:0}.gen-eyedrop-capture{background:#000;position:absolute;inset:0}.gen-eyedrop-canvas{object-fit:contain;width:100%;height:100%;display:block}.gen-eyedrop-magnifier{pointer-events:none;z-index:100000;background:#141220;border:2px solid #f97a3a99;border-radius:12px;position:fixed;overflow:hidden;box-shadow:0 8px 32px #0009,0 0 0 1px #0000004d}.gen-eyedrop-mag-grid{grid-template-rows:repeat(11,12px);grid-template-columns:repeat(11,12px);gap:0;display:grid}.gen-eyedrop-mag-cell{border:.5px solid #ffffff0f}.gen-eyedrop-mag-cell.center{z-index:1;border:2px solid #fff;border-radius:1px;box-shadow:0 0 0 1px #0006}.gen-eyedrop-mag-info{background:#141220f2;border-top:1px solid #786e8c1a;align-items:center;gap:6px;padding:5px 8px;display:flex}.gen-eyedrop-mag-swatch{border:1px solid #ffffff26;border-radius:3px;flex-shrink:0;width:14px;height:14px}.gen-eyedrop-mag-info span{color:#d0c8d8;font-family:Courier New,monospace;font-size:11px;font-weight:600}.gen-eyedrop-hint{color:#d0c8d8;pointer-events:none;z-index:100001;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#141220eb;border:1px solid #f97a3a26;border-radius:10px;padding:8px 20px;font-family:Raleway,sans-serif;font-size:12px;font-weight:500;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0006}.gen-eyedrop-hint kbd{color:#f97a3a;background:#f97a3a1a;border:1px solid #f97a3a33;border-radius:4px;margin:0 2px;padding:1px 5px;font-family:Courier New,monospace;font-size:11px;display:inline-block}.gen-eyedropper-overlay{display:none}.icon-picker{margin-top:8px}.icon-picker-grid{grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:4px;margin-bottom:6px;display:grid}.icon-picker-item{cursor:pointer;background:#0c0a1680;border:1.5px solid #786e8c0f;border-radius:6px;justify-content:center;align-items:center;width:34px;height:34px;padding:4px;transition:all .15s;display:flex}.icon-picker-item img{object-fit:contain;width:100%;height:100%;image-rendering:pixelated}.icon-picker-item:hover{background:#f97a3a0a;border-color:#f97a3a33;transform:scale(1.05)}.icon-picker-item.active{background:#f97a3a0f;border-color:#f97a3a8c;box-shadow:0 0 6px #f97a3a26}.icon-upload-btn{color:#5e5570;font-size:16px;font-weight:300}.icon-upload-btn:hover{color:#f97a3a}.gen-icon-clear{color:#e84530b3;cursor:pointer;background:#e845300d;border:1px solid #e8453014;border-radius:6px;padding:4px 10px;font-family:Raleway,sans-serif;font-size:10px;font-weight:600;transition:all .15s}.gen-icon-clear:hover{color:#e84530;background:#e845301a;border-color:#e845302e}.gen-size-inputs{align-items:center;gap:5px;margin-top:4px;display:flex}.gen-lock-ratio{color:#7a7290;text-transform:none;letter-spacing:0;cursor:pointer;align-items:center;gap:6px;margin:2px 0 6px;font-size:11px;display:flex}.gen-lock-ratio input{accent-color:#f97a3a}.gen-inline-tune{background:#0c0a1640;border:1px solid #786e8c0f;border-radius:6px;justify-content:space-between;align-items:center;gap:6px;margin:0 0 6px;padding:4px 8px;display:flex}.gen-inline-tune span{color:#7a7290;font-size:10px;font-weight:600}.gen-inline-tune .gen-input{width:56px;padding:4px 6px;font-size:12px}.gen-size-field{flex:1;align-items:center;gap:4px;display:flex}.gen-size-field span{color:#5e5570;min-width:14px;font-size:11px;font-weight:700}.gen-size-field .gen-input{width:100%;padding:6px 7px;font-size:12px}.gen-size-x{color:#4e4660;font-size:12px;font-weight:600}.gen-controls{align-self:start;max-height:calc(100vh - 80px);position:sticky;top:66px;overflow:hidden auto}.app-loading{color:#9990a8;letter-spacing:.3px;background:#141220;flex-direction:column;justify-content:center;align-items:center;gap:14px;min-height:100vh;font-family:Raleway,sans-serif;font-size:13px;font-weight:500;display:flex}.app-loading-spinner{border:2px solid #f97a3a1f;border-top-color:#f97a3a;border-radius:50%;width:28px;height:28px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}