*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{font-family:Inter,Arial,sans-serif;color:#172033;min-height:100vh;overflow-x:hidden;
background:radial-gradient(circle at 8% 10%,#ef233c22,transparent 30%),radial-gradient(circle at 92% 18%,#377dff22,transparent 30%),radial-gradient(circle at 50% 100%,#ff4f8b1f,transparent 35%),#f5f7ff}
a{text-decoration:none}
.orbs i{position:fixed;border-radius:50%;filter:blur(30px);opacity:.35;pointer-events:none;animation:fl 9s infinite alternate}
.o1{width:220px;height:220px;background:#ff4f8b;left:-80px;top:20%}
.o2{width:260px;height:260px;background:#377dff;right:-100px;bottom:10%;animation-delay:2s}
.o3{width:170px;height:170px;background:#ef233c;left:50%;top:-90px;animation-delay:4s}
@keyframes fl{to{transform:translate(45px,35px) scale(1.2)}}

.top{height:70px;background:#ffffffcc;backdrop-filter:blur(14px);border-bottom:1px solid #e7eaf2;display:flex;align-items:center;justify-content:space-between;padding:0 5%;position:sticky;top:0;z-index:20}
.logo{font-size:21px;font-weight:800;color:#172033}
.logo i{font-style:normal;color:#fff;background:linear-gradient(135deg,#ef233c,#ff4f8b,#377dff);padding:8px 10px;border-radius:10px;margin-right:7px}
.home{padding:10px 17px;border-radius:11px;font-size:13px;background:linear-gradient(90deg,#ef233c,#ff4f8b);color:#fff;font-weight:800}

.page{width:1350px;max-width:95%;margin:0 auto;position:relative;z-index:2;padding:18px 0 30px}

/* ADS */
.adslot{position:relative;min-height:90px;border:1px dashed #cfd6ea;border-radius:16px;background:#f9faff;display:flex;align-items:center;justify-content:center;color:#9aa3bd;font-size:12px;overflow:hidden;text-align:center;margin:14px 0}
.adtag{position:absolute;top:4px;left:9px;font-size:9px;letter-spacing:.8px;color:#b3bbd0}
.ad-side{min-height:250px;margin:0}
.ad-popup{min-height:250px;margin:14px 0}

/* HERO */
.hero{text-align:center;padding:26px 10px 14px}
.badge{display:inline-block;background:#fff0f4;color:#ef233c;padding:8px 15px;border-radius:30px;font-size:11px;font-weight:800;letter-spacing:1.5px}
h1{font-size:42px;margin:14px 0 9px}
h1 span{background:linear-gradient(90deg,#ef233c,#ff4f8b,#377dff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:14px;color:#70798a;max-width:760px;margin:0 auto;line-height:1.6}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0 20px}
.step{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid #e5e9f2;border-radius:18px;padding:14px 16px;box-shadow:0 10px 30px #17203310}
.step b{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:17px;background:linear-gradient(135deg,#ef233c,#ff4f8b,#377dff);flex:none}
.step h4{font-size:14px}.step span{font-size:11px;color:#7c8598}

/* DASH */
.dash{display:grid;grid-template-columns:310px minmax(0,1fr);gap:20px;align-items:start}
.card{background:#fff;border:1px solid #e5e9f2;border-radius:24px;box-shadow:0 20px 50px #17203312}
.side{display:flex;flex-direction:column;gap:14px;position:sticky;top:86px}
.upbox{padding:24px;text-align:center;border:2px dashed #d3d9e7;background:linear-gradient(145deg,#fff,#fff5f8)}
.upico{font-size:40px;animation:bn 2s infinite}
@keyframes bn{50%{transform:translateY(-6px)}}
.upbox h3{margin:6px 0 5px}.upbox p{font-size:12px;color:#778196;margin-bottom:15px;line-height:1.5}
.up{display:inline-block;background:linear-gradient(90deg,#ef233c,#ff4f8b);color:#fff;padding:13px 22px;border-radius:12px;font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 8px 20px #ef233c30}
input[type=file]{display:none}
.name{margin-top:11px;font-size:11px;color:#687386;min-height:15px;word-break:break-all}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.stat{background:#fff;border:1px solid #e5e9f2;border-radius:16px;padding:11px 8px;text-align:center;box-shadow:0 8px 20px #17203310}
.stat span{display:block;font-size:9px;color:#8791a2;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.stat b{display:block;font-size:13px;margin-top:5px;color:#172033;line-height:1.25}
.infobox{padding:16px 18px}.infobox h4{font-size:13px;margin-bottom:8px}
.infobox ul{list-style:none;font-size:12px;color:#5f6b80;line-height:1.9}

/* PANELS */
.pages{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.panel{padding:18px}
.ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}
.ph h3{font-size:14px}
.tag{font-size:10px;font-weight:800;color:#7a5bd6;background:#f0edff;padding:5px 9px;border-radius:14px}
.tag.ok{color:#087c50;background:#e7fbf1}
.preview{min-height:250px;border-radius:14px;background:repeating-conic-gradient(#eceff6 0 25%,#f8f9fd 0 50%) 50%/16px 16px;display:grid;place-items:center;overflow:hidden;padding:8px}
canvas{max-width:100%;max-height:430px;height:auto;display:block;box-shadow:0 10px 30px #17203325;border-radius:6px}
.empty{font-size:12px;color:#8791a2;text-align:center;padding:20px}
.tune{display:grid;grid-template-columns:1fr;gap:4px;margin-top:11px;font-size:11px;color:#64708a}
.tune label{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:8px;font-weight:700}
.tune input{width:100%;accent-color:#ef233c}
.pgsel{margin-top:9px;font-size:11px;color:#64708a;font-weight:700}
.pgsel select{padding:5px 8px;border:1px solid #dfe4ef;border-radius:8px;background:#fff;font-size:11px;margin-left:5px}
.btns{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
button{border:0;border-radius:10px;padding:10px 12px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;transition:.2s}
button:hover{transform:translateY(-2px)}
.b-crop{background:linear-gradient(90deg,#ef233c,#ff4f8b);color:#fff;box-shadow:0 8px 18px #ef233c25}
.b-dl{background:#1769ff;color:#fff}
.b-ghost{background:#edf1f7;color:#536074}
.mainbtn{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.maincrop{padding:15px 28px;font-size:14px;border-radius:13px;background:linear-gradient(90deg,#ef233c,#ff4f8b,#377dff);color:#fff;font-weight:900;box-shadow:0 10px 25px #ef233c30}
.sheetbtn{padding:15px 24px;font-size:14px;border-radius:13px;background:#172033;color:#fff;font-weight:900}
.status{text-align:center;margin-top:15px;font-size:12px;color:#687386;min-height:18px}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.chips span{background:#fff;border:1px solid #e5e9f2;border-radius:20px;padding:7px 12px;font-size:11px;font-weight:700;color:#5b6679;box-shadow:0 5px 14px #17203308}
.tips{margin-top:16px;padding:13px 16px;border-radius:14px;background:#fff8e6;border:1px solid #f3dea3;color:#7d6a2b;font-size:12px;line-height:1.7}
.foot{text-align:center;font-size:11px;color:#98a1b3;margin-top:14px}

/* MODALS */
#modal,#pwModal{display:none;position:fixed;inset:0;background:#111827d9;z-index:100;place-items:center;padding:16px}
.adbox{width:min(420px,100%);max-height:96vh;overflow:auto;background:#fff;border-radius:24px;padding:26px;text-align:center;box-shadow:0 25px 70px #0005}
.adbox h2{font-size:20px;margin-bottom:8px}.adbox p{font-size:12px;color:#727c8f}
.adbox input{display:block;width:100%;margin:14px 0;padding:12px;border:1px solid #d8e0ee;border-radius:11px;font-size:14px;outline:0}
.row2{display:flex;gap:8px}.row2 button{flex:1;padding:12px}
.timer{width:86px;height:86px;border-radius:50%;margin:16px auto 8px;display:grid;place-items:center;color:#172033;font-size:28px;font-weight:900;background:conic-gradient(#ef233c calc(var(--p,0)*1%),#e9edf5 0);position:relative}
.timer:before{content:"";position:absolute;inset:7px;background:#fff;border-radius:50%;z-index:-1}
.timer{isolation:isolate}.timer{z-index:0}
.timer>*{position:relative}

@media(max-width:1050px){
 .dash{grid-template-columns:1fr}.side{position:relative;top:0}
 .steps{grid-template-columns:1fr}
}
@media(max-width:750px){
 .pages{grid-template-columns:1fr}h1{font-size:30px}.top{padding:0 15px}.logo{font-size:18px}.home{padding:9px 11px}
}

/* PDF PREVIEW */
.prev{padding:18px}
.pgs{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;background:repeating-conic-gradient(#eceff6 0 25%,#f8f9fd 0 50%) 50%/16px 16px;border-radius:14px;padding:14px;min-height:150px;align-items:center}
.pg{text-align:center}
.pg canvas{max-height:340px;background:#fff}
.pg span{display:block;font-size:11px;font-weight:800;color:#64708a;margin-top:6px}
.adj{margin-top:12px;border:1px solid #e5e9f2;border-radius:12px;padding:8px 12px;background:#fafbff}
.adj summary{font-size:12px;font-weight:800;color:#536074;cursor:pointer}
.adj .tune{margin-top:10px}

/* PAGE SELECT (animated) */
.layout{padding:20px;margin-top:18px}
.layout.in{animation:pop .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}
.lrow{display:flex;gap:20px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:8px}
.opts{display:flex;gap:16px}
.opt{width:150px;padding:14px 10px;border-radius:18px;background:#fff;border:2px solid #e5e9f2;text-align:center;box-shadow:0 8px 22px #17203310;position:relative;transition:.25s}
.opt b{display:block;font-size:13px;margin-top:10px}
.opt small{font-size:10px;color:#8791a2}
.opt.on{border-color:#ef233c;background:linear-gradient(160deg,#fff,#fff0f4);transform:translateY(-4px) scale(1.04);box-shadow:0 16px 34px #ef233c30}
.opt.on:after{content:"✓";position:absolute;top:-9px;right:-9px;width:26px;height:26px;border-radius:50%;background:#ef233c;color:#fff;font-size:14px;display:grid;place-items:center;animation:pop .4s}
.mp{position:relative;margin:0 auto;background:#fff;border:1px solid #d5dbe8;border-radius:5px;box-shadow:0 6px 16px #17203320}
.mp.a4{width:62px;height:88px}
.mp.p46{width:58px;height:87px}
.mp i{position:absolute;left:50%;width:70%;height:17%;border-radius:3px;transform:translateX(-50%);animation:slot 2.4s ease-in-out infinite}
.mp .c1{background:linear-gradient(135deg,#ef233c,#ff4f8b)}
.mp .c2{background:linear-gradient(135deg,#377dff,#7b4dff);animation-delay:.5s}
.mp.a4 i{top:10%;height:11%;width:42%;transform:none;animation-name:slot2}.mp.a4 .c1{left:5%}.mp.a4 .c2{left:53%}
.mp.p46 .c1{top:22%}.mp.p46 .c2{top:52%}
@keyframes slot{0%{opacity:0;transform:translate(-50%,-14px) scale(.7)}25%,80%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,0) scale(1)}}
.opt.on .mp{animation:wob 1.6s ease-in-out infinite}
@keyframes wob{50%{transform:rotate(-3deg) scale(1.06)}}
.sheetwrap{background:#eef1f8;border-radius:14px;padding:12px;display:grid;place-items:center}
.sheetwrap canvas{max-height:300px;max-width:100%;box-shadow:0 10px 26px #17203330;border-radius:3px;background:#fff}
.layout .sheetbtn{display:block;margin:16px auto 0;padding:14px 28px;font-size:14px;border-radius:13px;background:linear-gradient(90deg,#ef233c,#ff4f8b,#377dff);color:#fff;font-weight:900;box-shadow:0 10px 25px #ef233c30}

@keyframes slot2{0%{opacity:0;transform:translateY(-14px) scale(.7)}25%,80%{opacity:1;transform:none}100%{opacity:0;transform:none}}