@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";:root{color-scheme:dark}#root{width:100%;min-height:100vh}:root{--bg-primary: #0D0D0E;--bg-secondary: #100F10;--bg-tertiary: #0A0B0F;--bg-card: #0B0B0F;--bg-input: #0A0A0C;--accent-primary: #C9A227;--accent-primary-light: #D4B445;--accent-primary-dark: #A88A1F;--accent-glow: rgba(201, 162, 39, .25);--text-primary: #FFFFFF;--text-secondary: #9CA3AF;--text-muted: #6B7280;--text-label: #C9CDD3;--border-default: #1F1F23;--border-subtle: #181818;--border-hover: #2A2A30;--border-accent: var(--accent-primary);--success-green: #10B981;--error-red: #EF4444;--warning-yellow: #F59E0B;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);--shadow-md: 0 4px 12px rgba(0, 0, 0, .6);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .7);--shadow-glow: 0 0 20px rgba(201, 162, 39, .15);--radius-xs: 4px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--space-xs: .375rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-xs: 11px;--font-size-sm: 12px;--font-size-base: 13px;--font-size-md: 14px;--font-size-lg: 16px;--font-size-xl: 18px;--font-size-2xl: 24px}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);font-size:var(--font-size-base);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column;background:var(--bg-primary)}.app-header{background:linear-gradient(180deg,var(--bg-secondary) 0%,var(--bg-primary) 100%);padding:var(--space-md) var(--space-xl);border-bottom:1px solid var(--border-default);display:flex;align-items:center;justify-content:center;gap:var(--space-md)}.logo-icon{height:64px;width:auto;object-fit:contain}.header-badge{background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-xs);color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.05em}.app-main{display:flex;flex:1;gap:var(--space-xl);padding:var(--space-xl);max-width:1600px;margin:0 auto;width:100%}.editor-panel{flex:1;display:flex;flex-direction:column;gap:var(--space-lg);max-width:720px}.preview-panel{position:sticky;top:var(--space-xl);align-self:flex-start;flex-shrink:0;width:480px;max-height:calc(100vh - var(--space-xl) * 2);overflow-y:auto}.asset-uploader,.ui-configurator,.item-metadata-editor,.prize-pool-editor,.scratch-preview,.export-section{background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-lg);position:relative}.asset-uploader:before,.ui-configurator:before,.item-metadata-editor:before,.prize-pool-editor:before,.scratch-preview:before,.export-section:before{content:"";position:absolute;left:0;top:var(--space-lg);bottom:var(--space-lg);width:3px;background:var(--accent-primary);border-radius:0 2px 2px 0}h2{font-size:var(--font-size-md);font-weight:600;color:var(--text-primary);margin:0 0 var(--space-xs) var(--space-sm);letter-spacing:-.01em}h3{font-size:var(--font-size-sm);font-weight:500;color:var(--text-label);margin:0 0 var(--space-sm);text-transform:none;letter-spacing:0}.section-description{font-size:var(--font-size-sm);color:var(--text-muted);margin:0 0 var(--space-lg) var(--space-sm);line-height:1.5}.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin-bottom:var(--space-md)}.upload-zone{aspect-ratio:4/3;background:var(--bg-input);border:1px dashed var(--border-default);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;overflow:hidden;position:relative}.upload-zone:hover{border-color:var(--accent-primary);background:#c9a22708}.upload-zone.has-image{border-style:solid;border-color:var(--success-green);background:var(--bg-input)}.upload-zone.has-image:hover{border-color:var(--success-green)}.upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);color:var(--text-muted);text-align:center;padding:var(--space-md)}.upload-icon{width:32px;height:32px;border:2px dashed var(--border-default);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text-muted);transition:all .2s ease}.upload-zone:hover .upload-icon{border-color:var(--accent-primary);color:var(--accent-primary)}.upload-label{font-size:var(--font-size-sm);font-weight:500;color:var(--text-label)}.upload-hint{font-size:var(--font-size-xs);color:var(--text-muted)}.preview-image{width:100%;height:100%;object-fit:cover}.upload-success{padding:var(--space-sm);background:#10b98114;border:1px solid rgba(16,185,129,.2);border-radius:var(--radius-sm);color:var(--success-green);text-align:center;font-size:var(--font-size-xs);font-weight:500}.config-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}.config-section{display:flex;flex-direction:column;gap:var(--space-sm)}.input-group{display:flex;gap:var(--space-sm)}.input-group label{flex:1}label{display:flex;flex-direction:column;gap:var(--space-xs);font-size:var(--font-size-sm);font-weight:400;color:var(--text-label)}label.full-width{grid-column:1 / -1}label.checkbox-label{flex-direction:row;align-items:center;gap:var(--space-sm);cursor:pointer;font-weight:400}input[type=text],input[type=number],select,textarea{background:var(--bg-input);border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);color:var(--text-primary);font-size:var(--font-size-sm);font-family:var(--font-family);line-height:1.4;transition:all .15s ease;width:100%}input[type=text]::placeholder,input[type=number]::placeholder,textarea::placeholder{color:var(--text-muted)}input[type=text]:hover,input[type=number]:hover,select:hover,textarea:hover{border-color:var(--border-hover)}input[type=text]:focus,input[type=number]:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 2px var(--accent-glow)}input[type=color]{width:100%;height:36px;border:1px solid var(--border-default);border-radius:var(--radius-sm);cursor:pointer;background:var(--bg-input);padding:2px}input[type=color]:hover{border-color:var(--border-hover)}input[type=color]:focus{outline:none;border-color:var(--accent-primary)}input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--accent-primary);border-radius:var(--radius-xs)}select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}textarea{resize:vertical;min-height:72px}.input-hint{font-size:var(--font-size-xs);color:var(--text-muted);margin-top:-2px}.total-indicator{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);margin-bottom:var(--space-md);font-weight:500;text-align:center;font-size:var(--font-size-sm);background:var(--bg-input);border:1px solid var(--border-default)}.total-indicator.valid{background:#10b98114;border-color:#10b98133;color:var(--success-green)}.total-indicator.invalid{background:#ef444414;border-color:#ef444433;color:var(--error-red)}.error-text{font-weight:400;font-size:var(--font-size-xs);margin-left:var(--space-xs)}.prizes-list{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-md)}.prize-item{background:var(--bg-input);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-md);transition:all .15s ease}.prize-item:hover{border-color:var(--border-hover)}.prize-header{display:flex;gap:var(--space-sm);margin-bottom:var(--space-sm);align-items:center}.prize-label{flex:1;font-weight:500;background:transparent;border:1px solid transparent;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);color:var(--text-primary);font-size:var(--font-size-sm)}.prize-label:hover{background:var(--bg-card);border-color:var(--border-default)}.prize-label:focus{background:var(--bg-card);border-color:var(--accent-primary);outline:none}.remove-btn{background:transparent;border:1px solid var(--border-default);color:var(--text-muted);width:28px;height:28px;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-size-sm);transition:all .15s ease;display:flex;align-items:center;justify-content:center}.remove-btn:hover{background:#ef44441a;border-color:var(--error-red);color:var(--error-red)}.prize-config{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.prize-config>label{flex:1;min-width:140px}.function-fields{display:flex;flex-wrap:wrap;gap:var(--space-sm);width:100%;margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid var(--border-subtle)}.function-fields label{flex:1;min-width:120px}.add-prize-btn{width:100%;padding:var(--space-sm) var(--space-md);background:transparent;border:1px dashed var(--border-default);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;font-size:var(--font-size-sm);font-weight:500;font-family:var(--font-family);transition:all .15s ease}.add-prize-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary);background:#c9a22708}.preview-placeholder{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:var(--bg-input);border:1px dashed var(--border-default);border-radius:var(--radius-md);color:var(--text-muted);font-size:var(--font-size-sm);text-align:center;padding:var(--space-lg)}.preview-thumbnail{position:relative;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;margin:var(--space-md) 0;background:#000;transition:transform .2s ease,box-shadow .2s ease}.preview-thumbnail:hover{transform:scale(1.02);box-shadow:var(--shadow-lg)}.thumbnail-image{display:block;width:100%;height:auto;max-height:200px;object-fit:contain}.thumbnail-overlay{position:absolute;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}.preview-thumbnail:hover .thumbnail-overlay{opacity:1}.thumbnail-overlay span{background:var(--accent-primary);color:#fff;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:500}.preview-modal-backdrop{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-xl);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.preview-modal{background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-lg);max-width:90vw;max-height:90vh;overflow:auto;animation:slideUp .2s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}.modal-header h3{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);margin:0}.modal-close{background:transparent;border:1px solid var(--border-default);color:var(--text-muted);width:32px;height:32px;border-radius:var(--radius-sm);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.modal-close:hover{background:var(--error-red);border-color:var(--error-red);color:#fff}.modal-controls{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--border-default)}.modal-hint{font-size:var(--font-size-xs);color:var(--text-muted);text-align:center;margin-top:var(--space-sm);margin-bottom:0}.preview-container{position:relative;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-lg);background:#000;max-width:100%;margin:0 auto}.preview-container img,.preview-container canvas{object-fit:contain}.preview-back{display:block;width:100%;height:auto}.preview-text{position:absolute;display:flex;align-items:center;justify-content:center;text-shadow:1px 1px 3px rgba(0,0,0,.8);font-weight:600;pointer-events:none;z-index:1}.preview-canvas{position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair;z-index:2}.preview-controls{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-sm);gap:var(--space-md)}.scratch-percentage{color:var(--text-secondary);font-size:var(--font-size-xs);font-weight:500}.reset-btn{background:var(--bg-input);border:1px solid var(--border-default);color:var(--text-secondary);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-size-xs);font-weight:500;font-family:var(--font-family);transition:all .15s ease}.reset-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.mode-indicator{font-size:var(--font-size-xs);font-weight:500;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);transition:all .2s ease}.mode-indicator.edit{background:#c9a22726;color:var(--accent-primary);border:1px solid var(--accent-primary)}.mode-indicator.scratch{background:var(--bg-input);color:var(--text-secondary);border:1px solid var(--border-default)}.drag-handle{position:absolute;border:2px solid var(--accent-primary);background:#c9a2271a;border-radius:var(--radius-xs);cursor:move;z-index:3;transition:box-shadow .15s ease}.drag-handle:hover,.drag-handle.dragging{box-shadow:var(--shadow-glow)}.drag-handle:before{content:"Text Area";position:absolute;top:-20px;left:0;font-size:var(--font-size-xs);color:var(--accent-primary);font-weight:500;white-space:nowrap}.drag-corner{position:absolute;width:8px;height:8px;background:var(--accent-primary);border-radius:2px}.drag-corner.top-left{top:-4px;left:-4px;cursor:nw-resize}.drag-corner.top-right{top:-4px;right:-4px;cursor:ne-resize}.drag-corner.bottom-left{bottom:-4px;left:-4px;cursor:sw-resize}.drag-corner.bottom-right{bottom:-4px;right:-4px;cursor:se-resize}.error-list{background:#ef444414;border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-sm);padding:var(--space-md);margin-bottom:var(--space-md)}.error-list strong{color:var(--error-red);display:block;margin-bottom:var(--space-xs);font-size:var(--font-size-sm);font-weight:500}.error-list ul{margin:0;padding-left:var(--space-lg);color:var(--error-red);font-size:var(--font-size-sm)}.error-list li{margin-bottom:2px}.export-btn{width:100%;padding:var(--space-md) var(--space-lg);background:var(--accent-primary);border:none;border-radius:var(--radius-sm);color:#fff;font-size:var(--font-size-md);font-weight:600;font-family:var(--font-family);cursor:pointer;transition:all .2s ease;margin-bottom:var(--space-md)}.export-btn:hover:not(:disabled){background:var(--accent-primary-light);box-shadow:var(--shadow-glow);transform:translateY(-1px)}.export-btn:active:not(:disabled){transform:translateY(0)}.export-btn:disabled{opacity:.5;cursor:not-allowed}.export-info{font-size:var(--font-size-xs);color:var(--text-muted);background:var(--bg-input);padding:var(--space-md);border-radius:var(--radius-sm);border-left:2px solid var(--accent-primary)}.export-info p{margin:0 0 var(--space-xs);font-weight:500;color:var(--text-label)}.export-info ul{margin:0;padding-left:var(--space-lg);color:var(--text-muted)}.export-info li{margin-bottom:2px}.export-info code{background:var(--bg-card);padding:2px 5px;border-radius:var(--radius-xs);font-family:Monaco,Consolas,monospace;font-size:var(--font-size-xs);color:var(--accent-primary)}.list-json-section{margin-top:var(--space-md);display:flex;flex-direction:column;gap:var(--space-md)}.list-json-entry,.list-json-complete{padding:var(--space-md);background:var(--bg-input);border:1px solid var(--success-green);border-radius:var(--radius-sm)}.list-json-entry h3,.list-json-complete h3{color:var(--success-green);font-size:var(--font-size-md);font-weight:600;margin:0 0 var(--space-xs)}.list-json-entry .section-description,.list-json-complete .section-description{margin:0 0 var(--space-sm)}.json-code{background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:var(--space-md);font-family:Monaco,Consolas,monospace;font-size:var(--font-size-sm);color:var(--accent-primary);white-space:pre;overflow-x:auto;margin-bottom:var(--space-sm)}.copy-btn{width:100%;padding:var(--space-sm) var(--space-md);background:var(--success-green);border:none;border-radius:var(--radius-sm);color:#fff;font-size:var(--font-size-sm);font-weight:500;font-family:var(--font-family);cursor:pointer;transition:all .2s ease}.copy-btn:hover{background:#0da271;box-shadow:0 0 15px #10b9814d}.app-footer{padding:var(--space-lg);text-align:center;color:var(--text-muted);border-top:1px solid var(--border-default);background:var(--bg-secondary);font-size:var(--font-size-xs)}.app-footer p{margin:0}.position-controls{background:var(--bg-input);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-md);margin-top:var(--space-md)}.position-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-sm)}.position-header h4{font-size:var(--font-size-sm);font-weight:500;color:var(--text-label);margin:0}.position-toggle{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--font-size-xs);color:var(--text-muted)}.position-toggle input{accent-color:var(--accent-primary)}.position-values{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-xs)}.position-values label{font-size:var(--font-size-xs)}.position-values input{padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-xs)}@media(max-width:1200px){.app-main{flex-direction:column;gap:var(--space-lg)}.editor-panel{max-width:none}.preview-panel{position:static;width:100%;max-width:480px;margin:0 auto}}@media(max-width:768px){.app-main{padding:var(--space-md)}.config-grid{grid-template-columns:1fr;gap:var(--space-md)}.upload-grid{grid-template-columns:1fr}.input-group{flex-direction:column;gap:var(--space-sm)}.app-header{padding:var(--space-md)}.logo-icon{width:40px;height:40px}.logo-text h1{font-size:var(--font-size-lg)}}@media(max-width:480px){:root{--space-lg: 1rem;--space-xl: 1.5rem}.asset-uploader,.ui-configurator,.item-metadata-editor,.prize-pool-editor,.scratch-preview,.export-section{padding:var(--space-md)}.position-values{grid-template-columns:repeat(2,1fr)}}