.profile-maker-container{font-family:Inter,sans-serif;background:hsl(216,34.9%,8.4%);color:#fff;padding:40px 20px;min-height:100vh}.profile-maker-grid{display:grid;grid-template-columns:1fr 2fr;gap:30px;max-width:1200px;margin:0 auto}.profile-maker-header{max-width:1200px;margin:0 auto 40px;text-align:center}.profile-maker-header .header-title h1{color:#fff;font-size:56px;font-weight:700;margin:0 0 20px;line-height:1.2}.profile-maker-header .highlight{background:linear-gradient(-90deg,rgba(245,158,11,1) 10%,rgba(255,87,0,1) 62%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shine-text 2.5s linear infinite;background-size:200% 100%}.profile-maker-header .header-title p{color:rgb(153,161,179);font-size:18px;margin:0}@media (max-width:991px){.profile-maker-header .header-title h1{font-size:40px}}@media (max-width:576px){.profile-maker-header .header-title h1{font-size:26px}.profile-maker-header .header-title p{font-size:14px}}.controls-panel{position:sticky;top:20px;height:fit-content}.controls-card{color:#fff;padding:20px;overflow:auto;border-radius:10px;max-height:calc(100vh - 100px);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px 0 0 rgba(255,255,255,.04),0 4px 6px -1px rgba(0,0,0,.3)}.drop-zone{padding:28px;cursor:pointer;background:#000;text-align:center;border-radius:10px;margin-bottom:20px;transition:all .3s ease;border:2px dashed rgba(255,87,0,.37);background-color:rgba(0,0,0,.39)}.drop-zone:hover{border-color:#ff5700}.drop-zone.drag-over{border-color:#ff5700;box-shadow:0 6px 18px rgba(14,165,164,.08)}.upload-icon{display:block;margin:0 auto 20px}.drop-text{color:#fff;font-size:18px;font-weight:500;margin-bottom:8px}.text-primary{color:#ff5700;font-weight:700}.drop-subtext{color:#6c757d;font-size:.9rem}.control-section{margin-bottom:20px}.card-title{font-size:16px;font-weight:600;margin-bottom:15px;color:#fff}.control-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:15px}.control-col{display:flex;flex-direction:column}.form-label{color:#fff;font-size:13px;font-weight:500;margin-bottom:8px}.form-select{color:#fff;width:100%;outline:none;appearance:auto;font-size:14px;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.39);border:1px solid hsla(0,0%,100%,.21)}.form-select:focus{box-shadow:none;border-color:#ff5700}.form-range{width:100%;height:8px;border-radius:999px;background:#e2e8f0;outline:none;-webkit-appearance:none;margin-bottom:20px}.form-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(-90deg,rgba(245,158,11,1) 10%,rgba(255,87,0,1) 62%);cursor:pointer;box-shadow:0 4px 12px rgba(102,126,234,.4);transition:all .2s ease;margin-top:-8px}.form-range::-webkit-slider-thumb:hover{transform:scale(1.2)}.form-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:linear-gradient(-90deg,rgba(245,158,11,1) 10%,rgba(255,87,0,1) 62%);cursor:pointer;border:none;box-shadow:0 4px 12px rgba(102,126,234,.4)}.button-row{display:flex;gap:8px;flex-wrap:wrap}.btn{border:none;color:#fff;cursor:pointer;font-size:13px;font-weight:600;padding:8px 16px;border-radius:50px;transition:all .3s ease;white-space:nowrap}.btn-sm{padding:6px 12px;font-size:12px}.btn-success{background:#28a745}.btn-success:hover{background:#218838}.btn-danger{background:#dc3545}.btn-danger:hover{background:#c82333}.btn-warning{background:#ffc107;color:#000}.btn-warning:hover{background:#e0a800}.btn-info{background:#17a2b8}.btn-info:hover{background:#138496}.btn-primary-gradient{border:0;color:#fff;font-size:15px;font-weight:600;flex:1;padding:10px 20px;border-radius:50px;background:linear-gradient(-90deg,rgba(245,158,11,1) 10%,rgba(255,87,0,1) 62%)}.btn-primary-gradient:hover{background:linear-gradient(90deg,rgba(245,158,11,1) 10%,rgba(255,87,0,1) 62%)}.btn-danger-outline{flex:1;color:#fff;background:#dc3545;border-radius:50px}.btn-danger-outline:hover{background:#c82333}.preview-panel{position:sticky;top:20px;height:fit-content}.preview-card{color:#fff;padding:20px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px 0 0 rgba(255,255,255,.04),0 4px 6px -1px rgba(0,0,0,.3)}.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:20px}.preview-title{font-size:18px;font-weight:700;margin-bottom:5px;color:#fff}.preview-subtitle{font-size:12px;color:#fff;display:block}.stat-badge{padding:6px 12px;font-size:14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px 0 0 rgba(255,255,255,.04),0 4px 6px -1px rgba(0,0,0,.3);white-space:nowrap}.canvas-container{display:flex;justify-content:center;align-items:center;min-height:320px;position:relative;padding:20px;background:rgba(0,0,0,.2);border-radius:10px;margin-bottom:20px}.preview-canvas{display:block;max-width:100%;border-radius:12px;box-shadow:0 8px 20px rgba(2,6,23,.06);touch-action:none}.profile-maker-container .preview-card{color:#344054;background:#ffffff;border-color:#d9e1ec;box-shadow:0 10px 28px rgba(16,24,40,.08)}.profile-maker-container .preview-title{color:#101828}.profile-maker-container .preview-subtitle{color:#667085}.profile-maker-container .stat-badge{color:#475467;background:#fff7ed;border-color:#ffb184;box-shadow:none}.profile-maker-container .stat-badge strong{color:#c4320a}.profile-maker-container .canvas-container{background:#f5f7fa;border:1px solid #e1e7ef}.export-note{text-align:center;font-size:14px;color:#fff;padding:12px;background:rgba(255,255,255,.05);border-radius:8px}hr{margin:20px 0;border:0;height:1px;background:rgba(255,255,255,.1)}@media (max-width:1199px){.profile-maker-grid{grid-template-columns:1fr}.controls-panel,.preview-panel{position:relative;top:0}.controls-card{max-height:none;overflow:visible}}@media (max-width:768px){.profile-maker-container{padding:20px 10px}.preview-header{flex-direction:column;text-align:center}.stat-badge{width:100%}.button-row .btn{flex:1 1 48%}.control-row{grid-template-columns:1fr}}@media (max-width:576px){.drop-zone{min-height:80px;padding:18px}.upload-icon{width:40px;height:40px}.drop-text{font-size:14px}.canvas-container{min-height:240px}.button-row{flex-direction:column}.button-row .btn{width:100%}}.variants-grid{max-width:1200px;margin:40px auto 0;padding:0 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px}.variant-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;transition:transform .2s ease,box-shadow .2s ease}.variant-card:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,.35)}.variant-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;background:#000}.variant-name{font-size:13px;text-align:center;color:#cfcfcf;margin-top:4px}.variant-card .btn{margin-top:auto;font-size:13px;padding:6px 10px}.varinats_pr{margin-top:20px}.varinats_pr .preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}@media (max-width:768px){.variants-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px}.variant-card{padding:10px}}.bg-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;margin-bottom:16px}.bg-col{display:flex;flex-direction:column}.color-input{width:52px;padding:0;border-radius:8px;border:2px solid rgba(255,255,255,.25);background:transparent}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border-radius:6px;border:none}@media (max-width:480px){.bg-row{grid-template-columns:1fr}.color-input{width:100%}}.border-color-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}.border-color-col{display:flex;flex-direction:column}.color-input{width:50%;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.4);cursor:pointer;padding:4px}.color-input:disabled{opacity:.4;cursor:not-allowed}.profile-maker-container{color:#344054!important;background:linear-gradient(135deg,#fff8f3,#f7f9fc 48%,#f2f5ff)!important}.profile-maker-container .profile-maker-grid{grid-template-columns:minmax(330px,390px) minmax(0,1fr);gap:24px;align-items:start;max-width:1180px}.profile-maker-container .controls-panel{position:sticky;top:92px;height:fit-content}.profile-maker-container .controls-card{max-height:calc(100vh - 116px);overflow-x:hidden;overflow-y:auto;padding:20px;color:#344054;background:#fff;border:1px solid #d8e0eb;border-radius:16px;box-shadow:0 10px 28px rgba(16,24,40,.07);scrollbar-width:thin;scrollbar-color:#aeb9c9 #f1f4f8}.profile-maker-container .controls-card::-webkit-scrollbar{width:9px}.profile-maker-container .controls-card::-webkit-scrollbar-track{margin:10px 0;background:#f1f4f8;border-radius:999px}.profile-maker-container .controls-card::-webkit-scrollbar-thumb{background:#aeb9c9;border:2px solid #f1f4f8;border-radius:999px}.profile-maker-container .controls-card::-webkit-scrollbar-thumb:hover{background:#7f8da3}.profile-maker-container .drop-zone{display:flex;min-height:210px;align-items:center;justify-content:center;flex-direction:column;padding:24px 18px;color:#344054;background:#fffaf7;border:2px dashed #ff8a4c;border-radius:14px}.profile-maker-container .drop-zone:hover{background:#fff4ec;border-color:#ff5700}.profile-maker-container .upload-icon{width:44px;height:44px;margin-bottom:14px}.profile-maker-container .drop-text,.profile-maker-container :is(.card-title,.form-label){color:#101828!important}.profile-maker-container .drop-subtext{color:#667085!important}.profile-maker-container hr{margin:18px 0;border-color:#e4e9f1!important;opacity:1}.profile-maker-container .control-section{margin-bottom:16px}.profile-maker-container .form-select{min-height:42px;color:#182230!important;background:#fff!important;border:1px solid #cbd5e1!important;color-scheme:light}.profile-maker-container .preview-panel{top:92px}.profile-maker-container .preview-card{padding:20px;height:fit-content;overflow:hidden;border-radius:16px}.profile-maker-container .canvas-container{min-height:380px;margin-bottom:14px;padding:24px;background:#f8fafc}.profile-maker-container .export-note{padding:11px 14px;color:#475467!important;background:#fff7ed!important;border:1px solid #fed7aa;border-radius:10px;font-weight:600}.profile-maker-container .color-input{background:#fff;border-color:#cbd5e1}.profile-maker-container .variants-grid{padding:0}.profile-maker-container .variant-card{color:#344054;background:#ffffff;border:1px solid #d8e0eb;box-shadow:0 8px 22px rgba(16,24,40,.07)}.profile-maker-container .variant-card:hover{border-color:#ffb184;box-shadow:0 12px 28px rgba(16,24,40,.11)}.profile-maker-container .variant-card img{background:#f5f7fa}@media (max-width:900px){.profile-maker-container .profile-maker-grid{grid-template-columns:1fr}.profile-maker-container .controls-panel,.profile-maker-container .preview-panel{position:static}.profile-maker-container .controls-card{max-height:none;overflow:visible}}@media (max-width:560px){.profile-maker-container{padding-inline:12px}.profile-maker-container .controls-card,.profile-maker-container .preview-card{padding:16px}.profile-maker-container .canvas-container{min-height:300px;padding:12px}}