:root{font-family:Inter,system-ui,Arial;color:#101828;background:#f4f7fb}*{box-sizing:border-box}body{margin:0}header{height:66px;background:#fff;border-bottom:1px solid #e4e7ec;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100% - 1180px)/2));position:sticky;top:0;z-index:5}header div{font-size:20px}header b{color:#5b5ce2}header span{font-size:13px;color:#667085}main{max-width:1180px;margin:auto;padding:30px 20px 60px}.hero{padding:24px 0}.hero h1{font-size:38px;margin:0 0 8px}.hero p{color:#667085;max-width:760px}.card{background:#fff;border:1px solid #e4e7ec;border-radius:18px;padding:22px;margin:18px 0;box-shadow:0 8px 30px #1018280a}.card h2{margin:0 0 12px}.drop{border:2px dashed #c7c9f8;background:#f8f8ff;border-radius:16px;padding:30px;text-align:center;position:relative}.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}.drop strong,.drop small{display:block}.drop small{color:#667085;margin-top:7px}button,.link{border:0;background:#5b5ce2;color:white;border-radius:11px;padding:12px 17px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;margin-top:14px}.secondary{background:#eef0f5;color:#344054;margin:0}.row,.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.row p{color:#667085;margin:4px 0}.masters{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}.masters label{border:1px solid #e4e7ec;border-radius:13px;padding:14px;background:#fafafa}.masters span{font-weight:700;display:block;margin-bottom:10px}.masters input{width:100%}.toolbar{border-top:1px solid #eee;padding-top:16px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:15px}.asset{border:1px solid #e4e7ec;border-radius:14px;overflow:hidden;display:grid;grid-template-columns:100px 1fr;min-height:120px}.thumb{background:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;display:flex;align-items:center;justify-content:center}.thumb img{max-width:100%;max-height:120px}.ico{font-weight:900;color:#667085}.info{padding:10px;min-width:0}.info strong,.info small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.info small{font-size:11px;color:#667085;margin:4px 0}.info select{width:100%;margin-top:7px;padding:7px;border:1px solid #d0d5dd;border-radius:8px}.actions{text-align:right;margin-top:18px}footer{text-align:center;color:#98a2b3;padding:20px}@media(max-width:850px){.masters{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr 1fr}.hero h1{font-size:30px}}@media(max-width:560px){header span{display:none}.masters,.grid{grid-template-columns:1fr}.card{padding:14px}.asset{grid-template-columns:90px 1fr}}.progressbox{margin-top:16px;padding:14px;border:1px solid #e4e7ec;border-radius:13px;background:#fafbff}.progresshead{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px}.progress{height:12px;background:#eaecf0;border-radius:999px;overflow:hidden}.progress i{display:block;width:0;height:100%;background:#5b5ce2;border-radius:999px;transition:width .2s ease}.progressbox small{display:block;color:#667085;margin-top:8px}.hidden{display:none!important}.error{margin-top:12px;padding:12px 14px;border-radius:11px;background:#fff1f0;color:#b42318;border:1px solid #fecdca;white-space:pre-wrap}button:disabled{opacity:.55;cursor:not-allowed}
.templateLabel{display:block;font-weight:800;margin-bottom:8px}.templateLabel select{display:block;width:100%;max-width:560px;margin-top:8px;padding:12px;border:1px solid #d0d5dd;border-radius:10px;background:white}.templateActions{display:flex;gap:8px;margin-bottom:14px}.danger{background:#fff1f0;color:#b42318}.linkbtn{margin:0 0 0 8px}.fit{font-size:11px;background:#fafafa}.ignored{opacity:.68}.saveTemplate{display:flex;align-items:center;gap:10px;margin-top:18px;padding:14px;background:#f8f8ff;border-radius:12px}.saveTemplate input{flex:1;padding:11px;border:1px solid #d0d5dd;border-radius:9px}.saveTemplate button{margin:0}.saveTemplate span{font-size:12px;color:#475467}@media(max-width:560px){.saveTemplate{align-items:stretch;flex-direction:column}.toolbar{align-items:flex-start;flex-direction:column}.toolbar>div{display:flex;flex-wrap:wrap;gap:6px}.linkbtn{margin:0}}
.previewable{position:relative;cursor:zoom-in;overflow:hidden}.previewable img{width:100%;height:100%;object-fit:contain;display:block}.zoomhint{position:absolute;left:8px;right:8px;bottom:7px;padding:5px 7px;border-radius:8px;background:rgba(20,24,38,.72);color:#fff;font-size:11px;text-align:center;opacity:0;transition:.15s}.previewable:hover .zoomhint{opacity:1}.modal{position:fixed;inset:0;z-index:9999;background:rgba(8,12,24,.78);display:flex;align-items:center;justify-content:center;padding:24px}.modal.hidden{display:none}.modalbox{position:relative;background:#fff;border-radius:18px;padding:18px;max-width:min(900px,94vw);max-height:92vh;box-shadow:0 25px 80px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:10px}.modalbox img{max-width:86vw;max-height:72vh;object-fit:contain;background-image:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.modalclose{position:absolute;right:10px;top:8px;border:0;background:#eef0f5;color:#222;border-radius:50%;width:36px;height:36px;font-size:24px;line-height:30px;cursor:pointer}.modalname{font-weight:700;font-size:18px;padding-right:44px}.modalbox small{color:#737b8c}
.validation{margin-top:18px;padding:14px 16px;border:1px solid #d9def7;background:#f8f9ff;border-radius:13px}.validation b{display:block;margin-bottom:7px}.validation .warn{margin-top:8px;padding:9px 11px;background:#fff8e6;border:1px solid #fedf89;border-radius:9px;color:#854a0e;font-size:12px}.validation .ok{margin-top:8px;color:#027a48;font-size:12px}.generateActions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}.generateActions .secondary{margin-top:14px}.comparebox{width:min(1100px,96vw)}.comparegrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.comparegrid>div>b{display:block;text-align:center;margin-bottom:7px}.compareimg{height:min(55vh,520px);display:flex;align-items:center;justify-content:center;border:1px solid #e4e7ec;border-radius:12px;overflow:hidden;background-image:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.compareimg img,.compareimg canvas{max-width:100%;max-height:100%;object-fit:contain}@media(max-width:700px){.comparegrid{grid-template-columns:1fr}.compareimg{height:34vh}}