@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,sans-serif}body{background:linear-gradient(90deg,#f497b6,#9de0c8);min-height:100vh;display:flex;justify-content:center;align-items:center}.wrapper{width:100%;max-width:1200px;background:#f5f5f5;border-radius:25px;padding:20px;box-shadow:0 20px 60px #00000026}.tabs{display:flex;gap:30px;border-bottom:2px solid #ccc;margin-bottom:20px}.tabs button{border:none;background:none;font-weight:500;padding-bottom:10px;cursor:pointer}.tabs .active{border-bottom:3px solid black}.content{display:grid;grid-template-columns:2fr 1fr;gap:30px}@media(max-width:900px){.content{grid-template-columns:1fr}}.image-box{position:relative;width:100%;border-radius:15px;overflow:hidden;aspect-ratio:16 / 9}.image-box img{width:100%;height:100%;object-fit:contain;display:block;border-radius:15px}.zoom-box{position:absolute;width:70px;height:70px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);border:4px solid #ffffff;box-shadow:0 0 0 2px #0006,0 8px 20px #00000040;transition:transform .05s ease-out;z-index:10}@media(max-width:768px){.zoom-box{width:55px;height:55px}}@media(max-width:480px){.zoom-box{width:45px;height:45px}}.details-panel{background:#fff;border-radius:22px;padding:20px;box-shadow:0 10px 35px #0000000f}.preview-square{height:80px;border-radius:16px;margin-bottom:22px;box-shadow:inset 0 0 0 1px #0000000d}.info-row{display:flex;align-items:stretch;background:#f6f6f6;border-radius:16px;overflow:hidden;border:1px solid #e5e5e5;margin-bottom:16px;transition:all .25s ease}.info-row:hover{box-shadow:0 4px 12px #0000000f}.info-row>span{width:80px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;color:#555;border-right:1px solid #e2e2e2;background:#f2f2f2}.value-group{flex:1;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;gap:12px}.value-group span{font-size:14px;font-weight:500;color:#222;letter-spacing:.3px}.modern-btn{width:34px;height:34px;border-radius:10px;border:none;background:#e9e9e9;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.modern-btn svg{width:16px;height:16px;stroke:#444}.modern-btn:hover{background:#dcdcdc;transform:scale(1.05)}. .upload-card{margin-top:26px;background:#f8f8f8;padding:20px;border-radius:20px;border:1px solid #e6e6e6}.upload-title{font-weight:600;font-size:15px;margin-bottom:16px}.primary-upload{width:100%;padding:14px;border-radius:28px;border:none;background:#0e1b2f;color:#fff;font-weight:500;cursor:pointer;transition:all .25s ease;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px}.primary-upload:hover{background:#162845;transform:translateY(-2px)}.secondary-upload{width:100%;padding:12px;border-radius:26px;border:1px solid #dcdcdc;background:#fff;font-weight:500;cursor:pointer;transition:all .25s ease;display:flex;align-items:center;justify-content:center;gap:8px}.secondary-upload:hover{background:#f3f3f3}.privacy-text{margin-top:16px;font-size:12px;color:#777;line-height:1.5}.privacy-text svg{margin-right:6px}@media(max-width:768px){.details-panel{padding:18px}.info-row>span{width:65px;font-size:13px}.value-group span{font-size:13px}}.palette-section{margin-top:25px;width:100%}.palette-section h3{margin-bottom:15px;font-weight:500}.palette-controls{display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:14px;width:100%}.circle-btn{width:48px;height:48px;border-radius:50%;border:none;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px #00000026;transition:.2s ease}.circle-btn:hover{transform:translateY(-3px)}.palette-bar{height:55px;display:flex;border-radius:14px;overflow:hidden;background:#fff}.palette-bar div{flex:1;cursor:pointer;transition:.2s ease}.palette-bar div:hover{transform:scale(1.05)}@media(max-width:650px){.palette-controls{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:auto auto}.circle-btn:nth-child(1){grid-column:1}.circle-btn:nth-child(3){grid-column:2}.circle-btn:nth-child(4){grid-column:3}.circle-btn:nth-child(5){grid-column:4}.palette-bar{grid-column:1 / -1;grid-row:2}}.palette-container{width:100%;margin-top:30px}.palette-heading{font-size:18px;font-weight:600;margin-bottom:16px}.palette-controls-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.palette-circle-btn{width:48px;height:48px;border-radius:50%;border:none;background:#f2f2f2;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:5px 5px 12px #00000026,-5px -5px 12px #ffffffe6;transition:.25s ease}.palette-circle-btn:hover{transform:translateY(-3px)}.palette-circle-btn:active{transform:scale(.95)}.palette-strip-bar{flex:1;min-width:250px;height:60px;display:flex;border-radius:12px;overflow:hidden;background:#fff}.palette-segment{flex:1;cursor:pointer;transition:.2s}.palette-segment:hover{transform:scale(1.05)}@media(max-width:650px){.palette-controls-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}.palette-circle-btn:nth-child(1){grid-column:1}.palette-circle-btn:nth-child(2){grid-column:2}.palette-circle-btn:nth-child(4){grid-column:3}.palette-circle-btn:nth-child(5){grid-column:4}.palette-strip-bar{grid-column:1 / -1;height:55px}}.cp-container{width:100%;max-width:1150px;margin:auto;padding:20px;background:#f3f3f3;border-radius:30px;box-sizing:border-box}.cp-title{font-size:28px;font-weight:600;margin-bottom:30px}.cp-wrapper{display:flex;gap:50px;align-items:flex-start}.cp-left{width:280px;background:#fff;padding:25px;border-radius:25px;box-shadow:0 10px 40px #0000000f}.cp-picker{width:100%;height:200px;border:none;border-radius:15px;cursor:pointer;margin-bottom:20px}.cp-hex-row{display:flex;align-items:center;gap:10px;margin-bottom:20px}.cp-hex-row label{font-weight:500}.cp-hex-row input{flex:1;padding:10px;border-radius:12px;border:1px solid #ddd}.cp-screen-btn{width:100%;padding:14px;background:#0e1b2f;color:#fff;border:none;border-radius:30px;font-weight:500;cursor:pointer;transition:.3s}.cp-screen-btn:hover{transform:translateY(-2px);background:#162845}.cp-right{flex:1}.cp-card{padding:30px;border-radius:25px;color:#fff;margin-bottom:35px;display:flex;justify-content:space-between;align-items:center}.cp-card h1{margin:0;font-size:28px}.cp-card span{font-size:14px;opacity:.9}.cp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.cp-box{display:flex;align-items:stretch;border-radius:16px;overflow:hidden;background:#f7f7f7;border:1px solid #e4e4e4;transition:all .25s ease}.cp-box:hover{box-shadow:0 4px 12px #0000000f}.cp-label{min-width:80px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;color:#555;border-right:1px solid #e0e0e0;background:#f2f2f2}.cp-value{flex:1;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;gap:10px}.cp-value span{font-size:14px;font-weight:500;color:#222;letter-spacing:.3px}.cp-value button{width:34px;height:34px;border-radius:10px;border:none;background:#e9e9e9;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s ease}.cp-value button:hover{background:#dcdcdc;transform:scale(1.05)}.cp-value button:active{transform:scale(.9)}@media(max-width:1024px){.cp-wrapper{flex-direction:column}.cp-left{width:100%}.cp-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.cp-container{padding:20px}.cp-grid{grid-template-columns:1fr}}.cp-sb-box{width:100%;height:260px;border-radius:14px;position:relative;cursor:crosshair;margin-bottom:18px;overflow:hidden}.cp-sb-box:before{content:"";position:absolute;inset:0;background:linear-gradient(to right,#fff,transparent);border-radius:14px}.cp-sb-box:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#000,transparent);border-radius:14px}.cp-cursor{width:18px;height:18px;border:3px solid #ffffff;border-radius:50%;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 10px #0006;pointer-events:none}.cp-hue-slider{width:100%;height:12px;border-radius:10px;appearance:none;outline:none;margin-top:15px;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.cp-hue-slider::-webkit-slider-thumb{appearance:none;width:18px;height:18px;background:#fff;border-radius:50%;border:2px solid #555;cursor:pointer}.cp-hue-slider::-moz-range-thumb{width:18px;height:18px;background:#fff;border-radius:50%;border:2px solid #555;cursor:pointer}@media(max-width:768px){.secondary-upload,.cp-screen-btn{display:none}}.export-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000059;display:flex;align-items:center;justify-content:center;z-index:1000}.export-modal{background:#fff;width:600px;max-width:90%;border-radius:20px;padding:30px;box-shadow:0 20px 60px #0003}.export-modal h2{margin-bottom:20px}.export-list div{padding:18px;border-bottom:1px solid #eee;cursor:pointer;font-weight:500}.export-actions{display:flex;gap:10px;padding:10px 0 20px}.export-actions button{padding:10px 16px;border:none;border-radius:8px;cursor:pointer}.export-actions button:last-child{background:#111;color:#fff}.palette-page{max-width:1200px;margin:auto;padding:20px}.palette-search{display:flex;justify-content:center;margin-bottom:30px}.palette-search input{width:100%;max-width:600px;padding:14px 18px;border-radius:25px;border:1px solid #ddd;font-size:16px;outline:none}.palette-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.palette-card{width:100%;border-radius:28px;overflow:hidden;cursor:pointer;box-shadow:0 8px 22px #00000014;transition:.25s}.palette-card:hover{transform:translateY(-6px);box-shadow:0 14px 30px #00000026}.palette-colors{display:flex;flex-direction:column;height:200px}.palette-color{flex:1}.palette-detail{max-width:1000px;margin:auto}.palette-detail h2{margin-bottom:20px;font-size:22px;text-transform:capitalize}.detail-colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-bottom:30px}.detail-color{height:100px;border-radius:12px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;font-weight:700;color:#fff;font-size:14px}.download-btn{padding:12px 20px;background:#111;color:#fff;border:none;border-radius:10px;cursor:pointer;font-size:14px}.download-btn:hover{background:#333}.back-btn{margin-bottom:20px;padding:8px 14px;border-radius:8px;border:1px solid #ccc;cursor:pointer;background:#fff}.back-btn:hover{background:#f2f2f2}@media(max-width:1100px){.palette-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:900px){.palette-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.palette-grid{grid-template-columns:1fr;gap:25px}.palette-page{padding:15px}.palette-colors{height:180px}.detail-color{height:110px}.palette-search input{max-width:100%}}@media(max-width:400px){.detail-color{height:100px;font-size:12px}}