.container-box{padding:20px;border-radius:8px}.main-wrapper{max-width:1280px;margin-left:auto;margin-right:auto;padding:32px 16px}.header{background-color:#ffffff;border-bottom:1px solid #e5e7eb}.header-content{max-width:1280px;margin-left:auto;margin-right:auto;padding:0 16px;justify-content:space-between;height:64px}.header-content,.logo-section{display:flex;align-items:center}.logo-section{gap:8px}.logo-icon-wrapper{width:40px;height:40px;background-color:#ef4444;border-radius:8px;display:flex;align-items:center;justify-content:center}.logo-icon{width:24px;height:24px;color:#ffffff}.logo-text{font-size:20px;font-weight:700;color:#111827}.auth-buttons{display:flex;gap:16px}.btn:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.btn:disabled{pointer-events:none;opacity:.5}.btn-ghost{background-color:transparent;color:#4b5563}.btn-ghost:hover{background-color:#f3f4f6;color:#111827}.btn-primary{background-color:#2563eb;color:#ffffff;padding:0 16px}.btn-primary:hover{background-color:#1d4ed8}.btn-outline{border-color:#d1d5db;background-color:#ffffff;color:#4b5563}.btn-outline:hover{background-color:#f3f4f6;color:#111827}.btn-dark{background-color:#1f2937;color:#ffffff;padding:0 16px}.btn-dark:hover{background-color:#111827}.btn-full-width{width:100%}.btn-sm{height:36px;padding:0 12px}.icon-mr{margin-right:8px}.icon-sm{width:16px;height:16px}.tabs-list{width:100%;max-width:448px;margin-left:auto;margin-right:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background-color:#e5e7eb;border-radius:6px;padding:4px}.tab-trigger{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:4px;padding:6px 12px;font-size:14px;font-weight:500;transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);cursor:pointer;border:none;background-color:transparent;color:#6b7280}.tab-trigger:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.tab-trigger:disabled{pointer-events:none;opacity:.5}.tab-trigger:hover:not(.tab-active){color:#374151}.tab-active{background-color:#ffffff;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);color:#111827}.tab-content{margin-top:32px}.card-box{border-radius:8px;border:1px solid #d1d5db;min-height:290px;justify-content:center}.card,.card-box{background-color:none;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);padding:24px}.card{border-radius:8px;border:2px dashed #d1d5db}.section-heading{text-align:center;margin-bottom:32px}.section-description{color:#4b5563}.grid-layout{display:grid;grid-template-columns:1fr;grid-gap:32px;gap:32px}@media (min-width:1024px){.grid-layout{grid-template-columns:repeat(3,minmax(0,1fr))}.image-section{grid-column:span 2/span 2}}.upload-area{border:2px dashed #d1d5db;border-radius:8px;padding:48px;text-align:center}.upload-icon{width:48px;height:48px;color:#9ca3af;margin-left:auto;margin-right:auto;margin-bottom:16px}.upload-title{font-size:18px;font-weight:500;margin-bottom:8px}.upload-text{color:#6b7280;margin-bottom:16px}.hidden-input{display:none}.canvas-container{position:relative}.image-canvas{max-width:100%;min-height:300px;max-height:400px;height:auto;border:1px solid #d1d5db;border-radius:4px;cursor:crosshair}.palette-section{margin-top:24px}.palette-header{display:flex;align-items:center;justify-content:space-between}.palette-title{font-size:18px;font-weight:500;color:#111827}.color-swatches,.palette-actions{display:flex;gap:8px}.color-swatches{flex-wrap:wrap}.color-swatch{border-radius:4px;border:2px solid #d1d5db}.color-swatch,.color-swatch-active{width:48px;height:48px;transition-property:border-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);cursor:pointer}.color-swatch-active{border-radius:4px;border:2px solid red;box-shadow:1px 1px 9px 0 rgba(255,0,0,1)}.color-swatch:hover{border-color:#9ca3af}.info-panel-section{flex:1 1;display:flex;flex-direction:column;gap:24px}.info-panel-header{display:flex;align-items:center;gap:8px;margin-bottom:16px}.dot{width:20px;height:20px;border-radius:9999px}.red-dot{background-color:#ef4444}.yellow-dot{background-color:#facc15}.green-dot{background-color:#22c55e}.info-panel-title{font-size:14px;font-weight:500;color:#4b5563;margin-left:8px}.color-details{display:flex;flex-direction:column;gap:16px;min-height:300px}.color-detail-item{display:flex;align-items:center;gap:12px}.color-preview{width:48px;height:48px;border-radius:4px;border:1px solid #d1d5db}.color-value-wrapper{flex:1 1;display:flex;align-items:center;justify-content:space-between}.color-value-label{font-size:14px;font-weight:500}.info-panel-placeholder{color:#6b7280;text-align:center;padding:32px 0}.privacy-text{font-size:12px;color:#6b7280}.privacy-highlight{color:#8b5cf6}.instructions-section{margin-top:48px}.instructions-title{font-size:20px;font-weight:700;margin-bottom:16px}.pick-new-button{background-color:#21242d}.instructions-text{color:#a9a9aa;margin-bottom:16px}.instructions-text:last-child{margin-bottom:0}.loading-overlay{inset:0;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:50}.loading-spinner{background-color:#ffffff;border-radius:8px;padding:24px;display:flex;align-items:center;gap:12px}.spinner-border{width:24px;height:24px;border:2px solid #2563eb;border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.active-dark-mode .my_switcher ul{background:rgba(6,6,6,.7);box-shadow:0 0 10px rgba(0,0,0,.1);border:2px solid rgba(255,255,255,.05)}body.active-dark-mode.modal-open{padding-right:0!important}.cancel-btn{width:150px!important}.cancel-btn,.show-btn{height:35px!important;line-height:0px!important;padding:0!important;border-radius:4px!important;font-size:14px!important;font-weight:500!important;background:#EFEFFF!important;color:#805AF5!important;border:1px solid rgba(from var(--color-primary) r g b/.15)!important}.show-btn{width:250px!important}.full-page-style{position:fixed;top:0;left:0;z-index:9999}.cross-btn-container{position:relative;display:inline-block}.cross-btn{position:absolute;top:10px;right:10px;z-index:2;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer}.copy-btn{height:35px!important;min-width:40px!important;line-height:0px!important;padding:0!important;font-size:14px!important;border-radius:4px!important}.copy-btn.small{padding:4px 8px;font-size:12px}