:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:#1a1a2e;color:#eaeaea;min-height:100vh}#root{min-height:100vh}.app{display:flex;flex-direction:column;min-height:100vh}.app-header{background:#16213e;padding:.5rem 1rem;border-bottom:1px solid #0f3460;display:flex;align-items:center;justify-content:center;position:relative;min-height:50px}.header-zoom{display:flex;align-items:center;gap:.5rem}.header-zoom button{background:#0f3460;border:none;color:#eaeaea;padding:.4rem .75rem;border-radius:4px;cursor:pointer;font-size:.9rem}.header-zoom button:hover{background:#e94560}.header-zoom span{min-width:50px;text-align:center;font-size:.9rem;color:#4ecca3}.mobile-menu-btn{display:none;position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:#0f3460;border:none;color:#eaeaea;font-size:1.1rem;padding:.4rem .75rem;border-radius:4px;cursor:pointer}.mobile-menu-btn:hover{background:#e94560}.mobile-action-btn{display:none;position:absolute;right:3.5rem;top:50%;transform:translateY(-50%);background:#0f3460;border:none;color:#eaeaea;font-size:1.1rem;padding:.4rem .75rem;border-radius:4px;cursor:pointer}.mobile-action-btn:hover{background:#e94560}.app-main{display:flex;flex:1;overflow:hidden;width:100%}.icon-sidebar{width:56px;min-width:56px;background:#16213e;border-right:1px solid #0f3460;display:flex;flex-direction:column;padding:.5rem;gap:.5rem}.icon-sidebar-btn{width:40px;height:40px;border-radius:8px;border:none;background:transparent;color:#aaa;font-size:1.25rem;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;position:relative}.icon-sidebar-btn .material-icon{font-family:Material Icons;font-size:24px;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased}.icon-sidebar-btn:hover{background:#0f3460;color:#eaeaea}.icon-sidebar-btn.active{background:#e94560;color:#fff}.icon-badge{position:absolute;top:2px;right:2px;background:#4ecca3;color:#000;font-size:.6rem;font-weight:700;min-width:14px;height:14px;border-radius:7px;display:flex;align-items:center;justify-content:center;padding:0 3px}.panel-overlay{position:fixed;inset:0 0 0 56px;background:#0000004d;z-index:999;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.sidebar-panel{width:280px;background:#16213e;border-right:1px solid #0f3460;display:flex;flex-direction:column;position:fixed;top:0;left:56px;bottom:0;z-index:1000;box-shadow:4px 0 20px #0000004d;animation:slideIn .2s ease-out}@keyframes slideIn{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid #0f3460}.panel-header h2{font-size:1.1rem;font-weight:600;color:#4ecca3}.panel-close{background:transparent;border:none;color:#aaa;font-size:1.25rem;cursor:pointer;padding:.25rem;line-height:1}.panel-close:hover{color:#e94560}.panel-content{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.zoom-controls h3{font-size:.9rem;color:#4ecca3;margin-bottom:.5rem}.zoom-buttons{display:flex;align-items:center;gap:.5rem}.zoom-buttons button{background:#0f3460;border:none;color:#eaeaea;padding:.4rem .75rem;border-radius:4px;cursor:pointer;font-size:.9rem}.zoom-buttons button:hover{background:#e94560}.zoom-buttons span{min-width:50px;text-align:center;font-size:.9rem;color:#4ecca3}.image-thumbnail-container{width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#0f0f1a;margin-bottom:.5rem;cursor:pointer;position:relative;border:2px solid transparent;transition:border-color .2s}.image-thumbnail-container:hover,.image-thumbnail-container.selected{border-color:#4ecca3}.image-thumbnail{width:100%;height:100%;object-fit:cover}.thumbnail-label{position:absolute;bottom:0;left:0;right:0;background:#000000b3;color:#fff;font-size:.75rem;padding:.25rem .5rem;text-align:center;text-transform:capitalize}.variations-section{margin-top:1rem}.variations-section h3{font-size:.9rem;color:#4ecca3;margin-bottom:.5rem}.variations-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.variation-thumbnail{aspect-ratio:1;border-radius:8px;overflow:hidden;cursor:pointer;position:relative;border:2px solid transparent;transition:border-color .2s}.variation-thumbnail:hover,.variation-thumbnail.selected{border-color:#4ecca3}.variation-thumbnail img{width:100%;height:100%;object-fit:cover}.variation-thumbnail .thumbnail-label{font-size:.65rem}.style-buttons-section{margin-top:1rem}.style-buttons-section h3{font-size:.9rem;color:#4ecca3;margin-bottom:.5rem}.style-buttons{display:flex;flex-direction:column;gap:.5rem}.style-btn{display:flex;align-items:center;gap:.5rem;padding:.6rem .75rem;background:#0f3460;border:none;border-radius:8px;color:#eaeaea;font-size:.85rem;cursor:pointer;transition:background .2s}.style-btn:hover:not(:disabled){background:#1a4a7a}.style-btn:disabled{opacity:.5;cursor:not-allowed}.style-btn .material-icon{font-family:Material Icons;font-size:18px}.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#4ecca3;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.api-key-section{margin-top:1.5rem;padding-top:1rem;border-top:1px solid #0f3460}.api-key-section h3{font-size:.9rem;color:#4ecca3;margin-bottom:.5rem}.api-key-input{width:100%;padding:.5rem;background:#0f0f1a;border:1px solid #0f3460;border-radius:6px;color:#eaeaea;font-size:.85rem}.api-key-input:focus{outline:none;border-color:#4ecca3}.api-key-hint{font-size:.75rem;color:#888;margin-top:.5rem}.api-key-hint a{color:#4ecca3;text-decoration:none}.api-key-hint a:hover{text-decoration:underline}.canvas-section{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem;background:#0f0f1a;min-height:100vh;overflow:hidden;width:calc(100vw - 56px);position:relative}.canvas-toolbar{position:fixed;bottom:1rem;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.25rem;background:#1a1a2e;padding:.5rem;border-radius:12px;box-shadow:0 4px 20px #00000080;z-index:10000;border:1px solid #0f3460}.toolbar-group{display:flex;align-items:center;gap:.25rem}.toolbar-divider{width:1px;height:24px;background:#0f3460;margin:0 .25rem}.toolbar-btn{width:40px;height:40px;border-radius:8px;border:none;background:transparent;color:#aaa;font-size:1.25rem;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#0f3460;color:#eaeaea}.toolbar-btn.active{background:#e94560;color:#fff}.toolbar-icon{font-size:1.1rem;line-height:1}.mobile-only{display:none}@media(max-width:768px){.mobile-only{display:flex}}.toolbar-action-btn{background:#4ecca3!important;color:#1a1a2e!important;font-weight:700}.toolbar-action-btn:hover:not(:disabled){background:#3db892!important}.toolbar-action-btn:disabled{background:#333!important;color:#666!important;cursor:not-allowed}.toolbar-delete-btn{background:#e94560!important;color:#fff!important}.toolbar-delete-btn:hover{background:#c73e54!important}.toolbar-add-btn{background:#4ecca3!important;color:#1a1a2e!important;font-size:1.5rem!important;font-weight:700}.toolbar-add-btn:hover{background:#3db892!important}.toolbar-label{color:#4ecca3;font-size:.9rem;font-weight:500;padding:0 .5rem}.display-fab{position:fixed;bottom:1rem;right:1rem;width:52px;height:52px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(135deg,#1a1a2e,#16213e);color:#4ecca3;font-size:1.4rem;cursor:pointer;box-shadow:0 4px 16px #0006,inset 0 1px #ffffff0d;transition:all .2s;z-index:10000;display:flex;align-items:center;justify-content:center}.display-fab:hover{background:linear-gradient(135deg,#e94560,#c73e54);color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px #e945604d}.display-fab:active{transform:translateY(0)}.image-uploader{display:flex;flex-direction:column;gap:.75rem}.drop-zone{border:2px dashed #0f3460;border-radius:8px;padding:1.5rem;text-align:center;cursor:pointer;transition:all .2s}.drop-zone:hover,.drop-zone.dragging{border-color:#e94560;background:#e945601a}.drop-zone p{color:#888;font-size:.875rem}.url-input{display:flex;gap:.5rem}.url-input input{flex:1;padding:.5rem;border:1px solid #0f3460;border-radius:4px;background:#1a1a2e;color:#eaeaea;font-size:.875rem}.url-input input:focus{outline:none;border-color:#e94560}.url-input button{padding:.5rem 1rem;background:#e94560;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.875rem}.url-input button:hover{background:#d63651}.error{color:#e94560;font-size:.75rem}.grid-controls,.paper-settings,.coordinate-display,.image-info{background:#1a1a2e;border-radius:8px;padding:1rem}.grid-controls h3,.paper-settings h3,.coordinate-display h3,.image-info h3{font-size:.875rem;color:#e94560;margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.5px}.control-group{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.control-group label{font-size:.875rem;min-width:80px;color:#aaa}.control-group input[type=range]{flex:1;accent-color:#e94560}.number-input-group{display:flex;align-items:center;gap:0}.number-input-group button{width:32px;height:32px;border:1px solid #0f3460;background:#1a1a2e;color:#eaeaea;font-size:1rem;cursor:pointer;transition:all .2s}.number-input-group button:first-child{border-radius:4px 0 0 4px}.number-input-group button:last-child{border-radius:0 4px 4px 0}.number-input-group button:hover:not(:disabled){background:#e94560;border-color:#e94560}.number-input-group button:disabled{opacity:.4;cursor:not-allowed}.number-input-group input[type=number]{width:50px;height:32px;border:1px solid #0f3460;border-left:none;border-right:none;background:#16213e;color:#eaeaea;text-align:center;font-size:.875rem;-moz-appearance:textfield}.number-input-group input[type=number]::-webkit-outer-spin-button,.number-input-group input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.control-group input[type=number]{width:60px;padding:.25rem .5rem;border:1px solid #0f3460;border-radius:4px;background:#16213e;color:#eaeaea;font-size:.875rem}.control-group input[type=number]:focus{outline:none;border-color:#e94560}.control-group select{padding:.25rem .5rem;border:1px solid #0f3460;border-radius:4px;background:#16213e;color:#eaeaea;font-size:.875rem}.control-group select:focus{outline:none;border-color:#e94560}.control-group .preset-select{flex:1;max-width:160px}.orientation-group{flex-wrap:wrap}.orientation-btn{padding:.25rem .5rem;border:1px solid #0f3460;border-radius:4px;background:#16213e;color:#888;font-size:.75rem;cursor:pointer;transition:all .2s}.orientation-btn:hover:not(:disabled){border-color:#e94560;color:#eaeaea}.orientation-btn.active{background:#e94560;border-color:#e94560;color:#fff}.orientation-btn:disabled{opacity:.5;cursor:not-allowed}.coordinate-display .hint{color:#666;font-size:.875rem;font-style:italic}.coord-row{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.875rem}.coord-row .label{color:#888}.coord-row .value{color:#4ecca3;font-family:Monaco,Consolas,monospace}.image-info p{font-size:.875rem;color:#888;font-family:Monaco,Consolas,monospace}.canvas-container{width:100%;height:calc(100vh - 120px);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.points-controls{position:fixed;bottom:70px;left:50%;transform:translate(-50%);display:flex;gap:.5rem;align-items:center;background:#16213ef2;padding:.5rem 1rem;border-radius:8px;border:1px solid #0f3460;z-index:9999}.points-controls span{font-size:.875rem;color:#aaa;margin-right:.5rem}.points-controls button{padding:.25rem .75rem;border:1px solid #0f3460;border-radius:4px;background:#1a1a2e;color:#eaeaea;font-size:.75rem;cursor:pointer;transition:all .2s}.points-controls button:hover{background:#e94560;border-color:#e94560}.rulers-controls{position:fixed;bottom:110px;left:50%;transform:translate(-50%);display:flex;gap:.5rem;align-items:center;background:#16213ef2;padding:.5rem 1rem;border-radius:8px;border:1px solid #0f3460;z-index:9999}.rulers-controls span{font-size:.875rem;color:#aaa;margin-right:.5rem}.rulers-controls button{padding:.25rem .75rem;border:1px solid #0f3460;border-radius:4px;background:#1a1a2e;color:#eaeaea;font-size:.75rem;cursor:pointer;transition:all .2s}.rulers-controls button:hover{background:#e94560;border-color:#e94560}.points-list{background:#1a1a2e;border-radius:8px;padding:1rem}.points-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.points-header h3{font-size:.875rem;color:#e94560;text-transform:uppercase;letter-spacing:.5px;margin:0}.points-header .clear-all-btn{padding:.2rem .5rem;border:1px solid #0f3460;border-radius:4px;background:transparent;color:#888;font-size:.7rem;cursor:pointer;transition:all .2s}.points-header .clear-all-btn:hover{background:#e94560;border-color:#e94560;color:#fff}.points-list ul{list-style:none;padding:0;margin:0;max-height:200px;overflow-y:auto}.point-item{display:flex;align-items:center;gap:.5rem;padding:.4rem 0;border-bottom:1px solid #0f3460}.point-item:last-child{border-bottom:none}.point-number{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#000;flex-shrink:0}.point-coords{flex:1;font-size:.8rem;color:#aaa;font-family:Monaco,Consolas,monospace}.delete-point-btn{width:20px;height:20px;border:none;border-radius:4px;background:transparent;color:#666;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.delete-point-btn:hover{background:#e94560;color:#fff}.draw-mode-toggle{background:#16213e;padding:1rem;border-radius:8px}.draw-mode-toggle h3{margin:0 0 .5rem;font-size:.9rem;color:#4ecca3}.mode-buttons{display:flex;gap:.5rem}.mode-btn{flex:1;padding:.5rem 1rem;border:1px solid #0f3460;border-radius:6px;background:#1a1a2e;color:#ccc;font-size:.85rem;cursor:pointer;transition:all .2s}.mode-btn:hover{background:#0f3460;color:#fff}.mode-btn.active{background:#e94560;border-color:#e94560;color:#fff}.rulers-list{background:#16213e;padding:1rem;border-radius:8px}.rulers-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.rulers-header h3{margin:0;font-size:.9rem;color:#4ecca3}.rulers-list ul{list-style:none;padding:0;margin:0;max-height:150px;overflow-y:auto}.ruler-item{display:flex;align-items:center;gap:.5rem;padding:.4rem 0;border-bottom:1px solid #0f3460}.ruler-item:last-child{border-bottom:none}.ruler-indicator{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#000}.ruler-angle{flex:1;font-family:monospace;font-size:.85rem;color:#ccc}.delete-ruler-btn{width:20px;height:20px;border:none;border-radius:4px;background:transparent;color:#666;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.delete-ruler-btn:hover{background:#e94560;color:#fff}.colors-list{background:#16213e;border-radius:8px;padding:1rem;margin-top:1rem;flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.colors-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.colors-header h3{margin:0;font-size:1rem;color:#eee}.colors-list ul{list-style:none;padding:0;margin:0;flex:1;overflow-y:auto;border-radius:6px;min-height:0}.color-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;margin:0;border:none;transition:transform .1s}.color-item:last-child{border-bottom:none}.color-swatch{width:28px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:900;font-family:Arial Black,Helvetica Neue,sans-serif;cursor:pointer;background:transparent!important;border:none;flex-shrink:0;color:inherit!important;text-shadow:1px 1px 0 rgba(0,0,0,.4),-1px -1px 0 rgba(255,255,255,.2),2px 2px 4px rgba(0,0,0,.3)}.color-swatch span{color:inherit!important}.color-values{flex:1;display:flex;flex-direction:column;gap:.1rem;min-width:0}.color-hex{font-family:monospace;font-size:.85rem;color:inherit;cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.5)}.color-hex:hover{text-decoration:underline}.color-rgb{font-family:monospace;font-size:.75rem;color:inherit;opacity:.8;cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.5)}.color-rgb:hover{text-decoration:underline}.delete-color-btn{width:28px;border:none;background:transparent;color:inherit;font-size:1.3rem;font-weight:900;font-family:Arial Black,Helvetica Neue,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;text-shadow:1px 1px 0 rgba(0,0,0,.4),-1px -1px 0 rgba(255,255,255,.2),2px 2px 4px rgba(0,0,0,.3);opacity:.7}.delete-color-btn:hover{opacity:1;color:#e94560;transform:scale(1.2)}.color-dialog{position:fixed;z-index:1000;background:#16213e;border:2px solid #0f3460;border-radius:12px;padding:1rem;box-shadow:0 8px 32px #00000080;min-width:180px;-webkit-user-select:none;user-select:none}.color-dialog-close{position:absolute;top:8px;right:8px;width:24px;height:24px;border:none;border-radius:50%;background:#0f3460;color:#888;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.color-dialog-close:hover{background:#e94560;color:#fff}.color-dialog-swatch{width:100%;height:120px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;margin-bottom:.75rem;border:1px solid rgba(255,255,255,.1)}.color-dialog-info{text-align:center}.color-dialog-hex{font-family:monospace;font-size:1.25rem;font-weight:700;color:#fff;cursor:pointer;padding:.25rem;border-radius:4px;transition:background .2s}.color-dialog-hex:hover{background:#0f3460;color:#4ecca3}.color-dialog-rgb{font-family:monospace;font-size:.9rem;color:#888;cursor:pointer;padding:.25rem;border-radius:4px;transition:background .2s}.color-dialog-rgb:hover{background:#0f3460;color:#4ecca3}.color-dialog-resize{position:absolute;bottom:0;right:0;width:16px;height:16px;cursor:se-resize;background:linear-gradient(135deg,transparent 50%,#0f3460 50%);border-bottom-right-radius:10px}.color-dialog-resize:hover{background:linear-gradient(135deg,transparent 50%,#4ecca3 50%)}.color-selection-controls{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid #0f3460}.select-btn{padding:.25rem .5rem;font-size:.75rem;background:#0f3460;color:#aaa;border:1px solid #1a1a2e;border-radius:4px;cursor:pointer}.select-btn:hover{background:#1a1a2e;color:#fff}.select-btn.active{background:#4ecca3;color:#1a1a2e;border-color:#4ecca3}.selection-count{font-size:.75rem;color:#666;margin-left:auto}.color-checkbox{width:18px;height:18px;accent-color:#4ecca3;cursor:pointer;flex-shrink:0}.color-item.selected{outline:3px solid #4ecca3;outline-offset:-3px;z-index:1}.palette-generation{margin-top:1rem;padding-top:1rem;border-top:1px solid #0f3460}.palette-generation h4{margin:0 0 .75rem;font-size:.9rem;color:#e94560}.paint-type-select{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.paint-type-select label{font-size:.8rem;color:#aaa}.paint-type-select select{flex:1;padding:.4rem;background:#1a1a2e;border:1px solid #0f3460;border-radius:4px;color:#eaeaea;font-size:.85rem}.paint-type-select select:focus{outline:none;border-color:#4ecca3}.paint-set-colors{font-size:.7rem;color:#666;line-height:1.4;margin-bottom:.75rem;padding:.5rem;background:#1a1a2e;border-radius:4px;max-height:60px;overflow-y:auto}.generate-palette-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1rem;background:#4ecca3;color:#1a1a2e;border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .2s}.generate-palette-btn:hover:not(:disabled){background:#3db892}.generate-palette-btn:disabled{background:#333;color:#666;cursor:not-allowed}.generate-palette-btn .material-icon{font-family:Material Icons;font-size:18px}.generate-palette-btn .spinner{width:16px;height:16px;border:2px solid #1a1a2e;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}.palette-view{display:flex;flex-direction:column;height:100%}.palette-view-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid #0f3460}.palette-back-btn{background:none;border:none;color:#888;font-size:1.1rem;cursor:pointer;padding:.25rem;display:flex;align-items:center}.palette-back-btn:hover{color:#4ecca3}.palette-view-header h3{flex:1;margin:0;font-size:1rem;color:#eee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.palette-delete-btn{background:none;border:none;color:#888;font-size:1.1rem;cursor:pointer;padding:.25rem}.palette-delete-btn:hover{color:#e94560}.palette-meta{font-size:.8rem;color:#888;margin-bottom:1rem;line-height:1.5}.palette-meta strong{color:#4ecca3}.palette-colors-section{margin-bottom:1rem}.palette-colors-section h4{margin:0 0 .5rem;font-size:.85rem;color:#aaa}.palette-colors-strip{display:flex;flex-wrap:wrap;gap:.25rem}.palette-color-swatch{width:32px;height:32px;border-radius:4px;border:1px solid rgba(255,255,255,.1)}.palette-image-section{flex:1;display:flex;flex-direction:column;min-height:0}.palette-image-thumb{width:100%;border-radius:8px;cursor:pointer;transition:transform .2s,box-shadow .2s}.palette-image-thumb:hover{transform:scale(1.02);box-shadow:0 4px 12px #4ecca34d}.view-full-btn{width:100%;padding:.6rem;margin-top:.75rem;background:#0f3460;border:1px solid #1a4a7a;border-radius:6px;color:#aaa;font-size:.85rem;cursor:pointer;transition:all .2s}.view-full-btn:hover{background:#1a4a7a;color:#eee;border-color:#4ecca3}.palettes-section{margin-top:1rem;padding-top:1rem;border-top:1px solid #0f3460}.palettes-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.palettes-section-header h4{margin:0;font-size:.9rem;color:#e94560}.palettes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.palette-card{background:#1a1a2e;border:1px solid #0f3460;border-radius:8px;padding:.5rem;cursor:pointer;transition:all .2s}.palette-card:hover{border-color:#4ecca3;transform:translateY(-2px)}.palette-card-thumb{width:100%;aspect-ratio:1;border-radius:4px;overflow:hidden;margin-bottom:.5rem;background:#0a0a14}.palette-card-thumb img{width:100%;height:100%;object-fit:cover}.palette-card-colors{display:flex;gap:2px;margin-bottom:.5rem;height:24px;border-radius:4px;overflow:hidden}.palette-card-colors .color-strip{flex:1;height:100%}.palette-card-name{font-size:.75rem;color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}.colors-empty,.palettes-empty{text-align:center;color:#666;font-size:.85rem;padding:1.5rem 1rem;font-style:italic}.mixing-recipes-preview{margin-top:1rem;padding:.75rem;background:#1a1a2e;border-radius:6px;border:1px solid #0f3460;cursor:pointer;transition:border-color .2s,background .2s}.mixing-recipes-preview:hover{border-color:#4ecca3;background:#1f1f38}.mixing-recipes-preview h5{margin:0 0 .5rem;font-size:.8rem;color:#4ecca3;text-transform:uppercase;letter-spacing:.5px;display:flex;justify-content:space-between;align-items:center}.mixing-recipes-preview .view-all{font-size:.7rem;text-transform:none;opacity:.7}.mixing-recipes-preview pre{margin:0;font-size:.75rem;color:#999;white-space:pre-wrap;word-break:break-word;line-height:1.4;font-family:inherit;max-height:3.6em;overflow:hidden}.recipes-dialog-floating{position:fixed;top:80px;left:50%;transform:translate(-50%);background:#16213e;border-radius:12px;border:1px solid #0f3460;min-width:300px;min-height:200px;display:flex;flex-direction:column;box-shadow:0 10px 40px #0009;z-index:500;-webkit-user-select:none;user-select:none;overflow:hidden}.recipes-dialog-header{display:flex;align-items:center;padding:.75rem 1rem;border-bottom:1px solid #0f3460;gap:.75rem;flex-shrink:0}.recipes-dialog-header h3{margin:0;font-size:.85rem;color:#4ecca3;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}.layout-dropdown{margin-left:auto;background:#0f3460;border:1px solid #1a4a7a;color:#ccc;padding:.35rem .5rem;border-radius:4px;font-size:.8rem;cursor:pointer;outline:none;transition:all .2s}.layout-dropdown:hover{border-color:#4ecca3}.layout-dropdown:focus{border-color:#4ecca3;box-shadow:0 0 0 2px #4ecca333}.layout-dropdown option{background:#16213e;color:#ccc;padding:.5rem}.recipes-dialog-close{background:transparent;border:none;color:#888;font-size:1.25rem;cursor:pointer;padding:0;line-height:1;transition:color .2s;flex-shrink:0}.recipes-dialog-close:hover{color:#fff}.recipes-dialog-body{flex:1;display:flex;overflow:hidden;min-height:0}.layout-left .recipes-dialog-body{flex-direction:row}.layout-right .recipes-dialog-body{flex-direction:row-reverse}.layout-above .recipes-dialog-body{flex-direction:column}.layout-below .recipes-dialog-body{flex-direction:column-reverse}.recipes-dialog-image{flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:#0a0a14;overflow:hidden}.layout-left .recipes-dialog-image,.layout-right .recipes-dialog-image{min-width:0}.layout-above .recipes-dialog-image,.layout-below .recipes-dialog-image{width:100%;min-height:0}.recipes-dialog-image img{max-width:100%;max-height:100%;object-fit:contain}.recipes-dialog-content{flex:1;padding:1rem;overflow-y:auto;min-width:0}.recipes-dialog-content pre{margin:0;font-size:.8rem;color:#ccc;white-space:pre-wrap;word-break:break-word;line-height:1.5;font-family:inherit}.palette-tabs{display:flex;border-bottom:1px solid #0f3460;flex-shrink:0}.palette-tab{flex:1;padding:.6rem 1rem;background:transparent;border:none;color:#888;font-size:.85rem;cursor:pointer;transition:all .2s;border-bottom:2px solid transparent}.palette-tab:hover:not(:disabled){color:#ccc;background:#4ecca31a}.palette-tab.active{color:#4ecca3;border-bottom-color:#4ecca3}.palette-tab:disabled{opacity:.4;cursor:not-allowed}.recipes-dialog-image.tabbed,.recipes-dialog-content.tabbed{width:100%;height:100%;max-width:none;max-height:none}.recipes-dialog-image.tabbed{padding:1rem}.split-divider{flex-shrink:0;background:#0f3460;transition:background .2s}.split-divider:hover{background:#4ecca3}.split-divider.vertical{width:6px;cursor:col-resize}.split-divider.horizontal{height:6px;cursor:row-resize}.recipes-dialog-resize{position:absolute;bottom:0;right:0;width:16px;height:16px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,#4ecca3 50%);border-radius:0 0 12px;opacity:.5;transition:opacity .2s}.recipes-dialog-resize:hover{opacity:1}.palette-result{margin-top:1rem;border-radius:8px;overflow:hidden;border:1px solid #0f3460;cursor:pointer;transition:transform .2s,box-shadow .2s}.palette-result:hover{transform:scale(1.02);box-shadow:0 4px 12px #4ecca34d}.palette-result img{width:100%;height:auto;display:block}.palette-fullscreen-overlay{position:fixed;inset:0;background:#000000e6;z-index:2000;display:flex;align-items:center;justify-content:center;padding:2rem;cursor:pointer}.palette-fullscreen-content{position:relative;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;gap:1rem;cursor:default}.palette-fullscreen-content img{max-width:100%;max-height:70vh;object-fit:contain;border-radius:8px}.palette-fullscreen-close{position:absolute;top:-40px;right:0;width:36px;height:36px;border:none;background:#e94560;color:#fff;font-size:1.5rem;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.palette-fullscreen-close:hover{background:#ff6b6b}.palette-fullscreen-recipes{background:#16213e;padding:1rem;border-radius:8px;max-height:20vh;overflow-y:auto}.palette-fullscreen-recipes h5{margin:0 0 .5rem;font-size:.9rem;color:#4ecca3}.palette-fullscreen-recipes pre{margin:0;font-size:.85rem;color:#ccc;white-space:pre-wrap;line-height:1.6;font-family:inherit}.canvas-container canvas{box-shadow:0 4px 20px #00000080}.canvas-placeholder{color:#666;text-align:center;border:2px dashed #444;border-radius:12px;padding:3rem 2rem;cursor:pointer;transition:all .2s;max-width:400px}.canvas-placeholder:hover{border-color:#e94560;color:#888}.canvas-placeholder.drag-over{border-color:#4ecca3;background:#4ecca31a;color:#4ecca3}.selection-menu{display:flex;flex-direction:column;gap:.5rem;background:#16213e;border:1px solid #0f3460;border-radius:8px;padding:.5rem;box-shadow:0 4px 20px #00000080;z-index:100}.selection-menu-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#4ecca3;color:#1a1a2e;border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;white-space:nowrap}.selection-menu-btn:hover{background:#3db892}.selection-menu-btn.cancel{background:#333;color:#aaa}.selection-menu-btn.cancel:hover{background:#e94560;color:#fff}.color-picker-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.color-picker-dialog{background:#16213e;border:2px solid #0f3460;border-radius:12px;padding:1.5rem;min-width:320px;max-width:90vw;max-height:80vh;overflow-y:auto}.color-picker-dialog h3{margin:0 0 1rem;font-size:1.1rem;color:#eee;text-align:center}.extracted-colors-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1rem}.extracted-color-item{aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.5rem;font-weight:700;border:3px solid transparent;transition:transform .1s,border-color .1s}.extracted-color-item:hover{transform:scale(1.05)}.extracted-color-item.selected{border-color:#4ecca3;box-shadow:0 0 10px #4ecca380}.color-picker-actions{display:flex;gap:.75rem;justify-content:flex-end}.picker-btn{padding:.6rem 1.2rem;border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}.picker-btn.cancel{background:#333;color:#aaa}.picker-btn.cancel:hover{background:#444;color:#fff}.picker-btn.save{background:#4ecca3;color:#1a1a2e}.picker-btn.save:hover:not(:disabled){background:#3db892}.picker-btn.save:disabled{background:#333;color:#666;cursor:not-allowed}.picker-btn.select-all{background:#0f3460;color:#eee}.picker-btn.select-all:hover{background:#1a4a7a}.canvas-placeholder p{font-size:1.1rem;margin:0}@media(max-width:900px){.sidebar{width:240px;min-width:240px}.canvas-section{width:calc(100vw - 240px);padding:1rem}}.sidebar-overlay{display:none}@media(max-width:768px){.app-header{padding:.5rem 1rem;justify-content:center}.header-zoom{gap:.3rem}.header-zoom button{padding:.3rem .5rem;font-size:.8rem}.header-zoom span{min-width:40px;font-size:.8rem}.app-main{flex-direction:row;position:relative;overflow:visible}.icon-sidebar{width:48px;min-width:48px;padding:.25rem}.icon-sidebar-btn{width:36px;height:36px}.panel-overlay{left:48px}.sidebar-panel{left:48px;width:85%;max-width:280px;bottom:70px}.canvas-section{width:calc(100vw - 48px);min-width:calc(100vw - 48px);min-height:100vh;padding:.5rem;padding-bottom:80px}.grid-controls .controls-grid{grid-template-columns:1fr 1fr;gap:.5rem}.paper-settings .settings-row{flex-direction:column;gap:.5rem}.paper-settings select,.paper-settings input{width:100%}.coordinate-display{font-size:.75rem}.coordinate-display .coord-grid{grid-template-columns:1fr;gap:.25rem}.draw-mode-toggle{flex-wrap:wrap}.draw-mode-toggle button{flex:1;min-width:60px;padding:.4rem .6rem;font-size:.75rem}.points-list,.rulers-list,.colors-list{padding:.5rem}.points-list h4,.rulers-list h4,.colors-list h4{font-size:.8rem}.point-item,.ruler-item,.color-item{padding:.4rem;font-size:.75rem}.color-dialog{max-width:calc(100vw - 20px);max-height:calc(100vh - 20px)}.drop-zone{padding:1rem;min-height:80px}.drop-zone p{font-size:.875rem}.url-input-group{flex-direction:column}.url-input-group input,.url-input-group button{width:100%}}@media(max-width:480px){.app-header{padding:.5rem .75rem}.app-header h1{font-size:1.1rem}.app-header p{font-size:.75rem}.sidebar{max-height:40vh;padding:.5rem;gap:.5rem}.canvas-section{min-height:60vh;padding:.25rem}.grid-controls,.paper-settings,.coordinate-display,.points-list,.rulers-list,.colors-list{padding:.4rem}.grid-controls h3,.paper-settings h3{font-size:.8rem}button{font-size:.75rem;padding:.35rem .6rem}}@media(pointer:coarse){button{min-height:44px;min-width:44px}.header-zoom button{min-height:36px;min-width:36px}.delete-point-btn,.delete-ruler-btn,.delete-color-btn{min-width:32px;min-height:32px}input[type=range]{height:8px}input[type=range]::-webkit-slider-thumb{width:24px;height:24px}.color-swatch{width:36px;height:36px}}.auth-modal-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:2000}.auth-modal{background:#16213e;border:2px solid #0f3460;border-radius:12px;padding:2rem;min-width:320px;max-width:400px;position:relative}.auth-modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:#888;font-size:1.5rem;cursor:pointer;padding:.25rem .5rem;line-height:1}.auth-modal-close:hover{color:#e94560}.auth-modal-title{margin:0 0 1.5rem;font-size:1.5rem;color:#eee;text-align:center}.auth-form{display:flex;flex-direction:column;gap:1rem}.auth-field{display:flex;flex-direction:column;gap:.5rem}.auth-field label{color:#aaa;font-size:.9rem}.auth-field input{padding:.75rem 1rem;background:#0f3460;border:1px solid #1a4a7a;border-radius:6px;color:#eee;font-size:1rem}.auth-field input:focus{outline:none;border-color:#4ecca3}.auth-error{background:#e9456033;border:1px solid #e94560;color:#e94560;padding:.75rem;border-radius:6px;font-size:.9rem}.auth-message{background:#4ecca333;border:1px solid #4ecca3;color:#4ecca3;padding:.75rem;border-radius:6px;font-size:.9rem}.auth-submit{padding:.75rem 1.5rem;background:#4ecca3;color:#1a1a2e;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;margin-top:.5rem}.auth-submit:hover:not(:disabled){background:#3db892}.auth-submit:disabled{background:#333;color:#666;cursor:not-allowed}.auth-links{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem;text-align:center}.auth-link{background:none;border:none;color:#4ecca3;font-size:.9rem;cursor:pointer;padding:.25rem}.auth-link:hover{text-decoration:underline}.projects-panel{display:flex;flex-direction:column;height:100%}.projects-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.projects-header h3{margin:0;color:#eee;font-size:1rem}.new-project-btn{width:32px;height:32px;border:none;border-radius:6px;background:#4ecca3;color:#1a1a2e;font-size:1.5rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}.new-project-btn:hover{background:#3db892}.projects-loading,.projects-empty,.projects-error{text-align:center;color:#888;padding:2rem 1rem;font-size:.9rem}.projects-error{color:#e94560}.projects-list{list-style:none;padding:0;margin:0;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem}.project-item{display:flex;align-items:center;gap:.75rem;padding:.5rem;background:#0f3460;border-radius:8px;cursor:pointer;position:relative;transition:background .2s}.project-item:hover{background:#1a4a7a}.project-item.current{border:2px solid #4ecca3}.project-thumbnail{width:48px;height:48px;background:#1a1a2e;border-radius:4px;background-size:cover;background-position:center;flex-shrink:0;display:flex;align-items:center;justify-content:center}.project-thumbnail .no-thumb{font-size:.7rem;color:#666;text-align:center}.project-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}.project-name{color:#eee;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-date{color:#888;font-size:.75rem}.project-delete-btn{width:24px;height:24px;border:none;background:transparent;color:#888;font-size:1.25rem;cursor:pointer;opacity:0;transition:opacity .2s}.project-item:hover .project-delete-btn{opacity:1}.project-delete-btn:hover{color:#e94560}.delete-confirm{position:absolute;inset:0;background:#16213ef2;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}.delete-confirm p{margin:0;color:#eee;font-size:.85rem}.delete-confirm-btns{display:flex;gap:.5rem}.delete-confirm-btns button{padding:.4rem .75rem;border:none;border-radius:4px;font-size:.8rem;cursor:pointer}.delete-confirm-btns button:first-child{background:#e94560;color:#fff}.delete-confirm-btns button:last-child{background:#333;color:#eee}.refresh-btn{margin-top:1rem;padding:.5rem 1rem;background:#0f3460;border:1px solid #1a4a7a;border-radius:6px;color:#aaa;font-size:.85rem;cursor:pointer}.refresh-btn:hover:not(:disabled){background:#1a4a7a;color:#eee}.refresh-btn:disabled{opacity:.5;cursor:not-allowed}.icon-sidebar-spacer{flex:1}.icon-sidebar-btn.save-btn,.icon-sidebar-btn.user-btn{position:relative}.save-message{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:.5rem;background:#4ecca3;color:#1a1a2e;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;white-space:nowrap;font-family:inherit}.icon-sidebar-btn.user-btn .material-icon{color:inherit}.app-header{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 1rem;background:#0a0a14;border-bottom:1px solid #1a1a2e;flex-shrink:0}.header-left{display:flex;align-items:center;gap:1rem}.app-logo{font-size:1.1rem;font-weight:700;color:#4ecca3;letter-spacing:-.5px}.header-center{display:flex;align-items:center;justify-content:center;flex:1}.project-name-btn{background:none;border:none;color:#eee;font-size:.95rem;padding:.4rem .75rem;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:background .2s}.project-name-btn:hover{background:#ffffff1a}.project-name-input{background:#16213e;border:1px solid #4ecca3;color:#eee;font-size:.95rem;padding:.4rem .75rem;border-radius:6px;text-align:center;min-width:200px}.project-name-input:focus{outline:none}.unsaved-dot{width:8px;height:8px;background:#e94560;border-radius:50%;display:inline-block}.header-right{display:flex;align-items:center;gap:.75rem}.header-save-btn{display:flex;align-items:center;gap:.4rem;padding:.4rem .75rem;background:#16213e;border:1px solid #1a4a7a;border-radius:6px;color:#aaa;font-size:.85rem;cursor:pointer;transition:all .2s}.header-save-btn .material-icon,.header-user-btn .material-icon{font-family:Material Icons;font-size:18px;font-weight:400;font-style:normal;line-height:1}.header-save-btn:hover:not(:disabled){background:#1a4a7a;color:#eee;border-color:#4ecca3}.header-save-btn:disabled{opacity:.6;cursor:not-allowed}.header-save-btn.saving .material-icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pro-badge{background:linear-gradient(135deg,#f5af19,#f12711);color:#fff;font-size:.7rem;font-weight:700;padding:.25rem .6rem;border-radius:4px;letter-spacing:.5px}.upgrade-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:.8rem;font-weight:600;padding:.4rem .75rem;border:none;border-radius:6px;cursor:pointer;transition:transform .2s,box-shadow .2s}.upgrade-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.header-user-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:none;border:1px solid #333;border-radius:50%;color:#888;cursor:pointer;transition:all .2s}.header-user-btn:hover{background:#16213e;border-color:#4ecca3;color:#4ecca3}.sign-in-btn{background:#4ecca3;color:#1a1a2e;font-size:.85rem;font-weight:600;padding:.5rem 1rem;border:none;border-radius:6px;cursor:pointer;transition:background .2s}.sign-in-btn:hover{background:#3db892}.user-menu-container{position:relative;display:flex;align-items:center;gap:.5rem}.user-menu-backdrop{position:fixed;inset:0;z-index:99}.user-menu-dropdown{position:absolute;top:100%;right:0;margin-top:.5rem;background:#16213e;border:1px solid #1a4a7a;border-radius:8px;min-width:220px;box-shadow:0 8px 24px #0006;z-index:100;overflow:hidden}.user-menu-header{padding:.75rem 1rem;border-bottom:1px solid #1a4a7a;display:flex;justify-content:space-between;align-items:center}.user-menu-email{color:#eee;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}.user-menu-plan{font-size:.7rem;font-weight:600;padding:.2rem .5rem;border-radius:4px;text-transform:uppercase}.user-menu-plan.free{background:#333;color:#888}.user-menu-plan.pro{background:linear-gradient(135deg,#f5af19,#f12711);color:#fff}.user-menu-items{padding:.5rem 0}.user-menu-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.6rem 1rem;background:none;border:none;color:#ccc;font-size:.85rem;cursor:pointer;text-align:left;transition:background .2s}.user-menu-item:hover{background:#ffffff1a;color:#fff}.user-menu-item.upgrade{color:#f5af19}.user-menu-item.upgrade:hover{background:#f5af1926}.user-menu-item .material-icon{font-family:Material Icons;font-size:18px;font-weight:400;font-style:normal;line-height:1}.user-menu-divider{border:none;border-top:1px solid #1a4a7a;margin:.25rem 0}.app{display:flex;flex-direction:column;height:100vh}.app-main{flex:1;display:flex;overflow:hidden}.credits-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:linear-gradient(135deg,#1a4a7a,#0f3460);border:1px solid #2a5a8a;border-radius:20px;color:#fff;font-size:.9rem;cursor:pointer;transition:all .2s}.credits-btn:hover{background:linear-gradient(135deg,#2a5a8a,#1a4a7a);border-color:#4ecca3}.credits-btn:disabled{opacity:.6;cursor:not-allowed}.credits-icon{color:#f5af19;font-size:1.1rem}.credits-count{font-weight:600}.trial-badge{background:linear-gradient(135deg,#4ecca3,#2a9d8f);color:#0a0a14;padding:.15rem .5rem;border-radius:10px;font-size:.75rem;font-weight:600}.credits-modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out}.credits-modal{background:linear-gradient(180deg,#0f3460,#0a0a14);border:1px solid #1a4a7a;border-radius:16px;padding:2rem;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;position:relative;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.credits-modal h2{margin:0 0 1.5rem;color:#fff;font-size:1.5rem}.credits-modal h3{margin:1.5rem 0 1rem;color:#ccc;font-size:1rem}.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:#888;font-size:1.5rem;cursor:pointer;padding:.25rem .5rem;line-height:1;transition:color .2s}.modal-close:hover{color:#fff}.credits-balance-display{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1.5rem;background:#4ecca31a;border:1px solid rgba(78,204,163,.3);border-radius:12px;margin-bottom:1rem}.balance-icon{color:#f5af19;font-size:2rem}.balance-amount{color:#4ecca3;font-size:2.5rem;font-weight:700}.balance-label{color:#888;font-size:1rem}.trials-info{padding:1rem;background:#f5af191a;border:1px solid rgba(245,175,25,.3);border-radius:8px;margin-bottom:1rem}.trials-info p{margin:0 0 .5rem;color:#f5af19;font-weight:600}.trials-info ul{margin:0;padding-left:1.25rem;color:#ccc}.trials-info li{margin:.25rem 0}.credits-usage-info{padding:1rem;background:#ffffff0d;border-radius:8px;margin-bottom:1rem}.credits-usage-info h3{margin:0 0 .5rem}.credits-usage-info ul{margin:0;padding-left:1.25rem;color:#ccc}.credits-usage-info li{margin:.25rem 0}.usage-note{margin:.75rem 0 0;font-size:.8rem;color:#888;font-style:italic}.packs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.pack-btn{display:flex;flex-direction:column;align-items:center;padding:1.25rem;background:linear-gradient(180deg,#1a4a7a,#0f3460);border:2px solid #2a5a8a;border-radius:12px;cursor:pointer;transition:all .2s}.pack-btn:hover{border-color:#4ecca3;transform:translateY(-2px);box-shadow:0 4px 12px #4ecca333}.pack-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.pack-credits{color:#f5af19;font-size:1.75rem;font-weight:700}.pack-price{color:#fff;font-size:1.25rem;font-weight:600;margin:.25rem 0}.pack-desc{color:#888;font-size:.8rem}.user-menu-credits{color:#4ecca3;font-size:.8rem;font-weight:600}.test-mode-toggle{padding:1rem;background:#ffc1071a;border:1px solid rgba(255,193,7,.3);border-radius:8px;margin-bottom:1rem}.test-mode-toggle label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.test-mode-toggle input[type=checkbox]{width:18px;height:18px;accent-color:#ffc107}.test-mode-label{color:#ffc107;font-weight:600}.test-mode-hint{margin:.5rem 0 0;font-size:.8rem;color:#888;font-family:monospace}