:root{--b:#0A4DFF;--bd:#0839c4;--bl:#EAF0FF;--ink:#0F1A33;--mut:#5B6785;--line:#DCE3F5;--bg:#F6F8FD;--r:14px}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;font:15px/1.5 "Segoe UI",Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg)}
h1,h2,h3,.brand{font-family:Arial,Helvetica,sans-serif;letter-spacing:-.01em}
button{font:inherit;cursor:pointer}:focus-visible{outline:3px solid #7aa0ff;outline-offset:2px}
.muted{color:var(--mut)}.center{text-align:center}.err{color:#C62828;margin:.5rem 0;font-size:14px}
label{display:block;font-weight:500;font-size:14px;margin-bottom:14px}
input,textarea{display:block;width:100%;margin-top:6px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;font:inherit;background:#fff;color:var(--ink)}
input:focus,textarea:focus{border-color:var(--b);outline:3px solid #cfdcff}
textarea{resize:vertical}.big{min-height:220px}
.btn{background:var(--b);color:#fff;border:0;border-radius:12px;padding:12px 22px;font-weight:600;box-shadow:0 6px 18px -6px rgba(10,77,255,.6);transition:background .15s}
.btn:hover{background:var(--bd)}
.ghost{background:transparent;border:1px solid var(--line);border-radius:12px;padding:10px 16px;color:var(--ink)}.ghost:hover{border-color:var(--b);color:var(--b)}.sm{padding:6px 12px;font-size:13px}
.brand{display:flex;align-items:center;gap:10px;font-size:26px;font-weight:700}.brand.dark{font-size:20px;color:var(--ink)}
.login{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh}
.brand-panel{background:var(--b);color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:center;gap:18px;background-image:radial-gradient(circle at 85% 12%,#4d7dff 0,transparent 45%)}
.brand-panel h1{font-size:clamp(30px,4vw,48px);line-height:1.1;margin:18px 0 0}.brand-panel p{max-width:460px;opacity:.9;margin:0}
.login-card{align-self:center;justify-self:center;width:min(400px,90%);padding:20px}.login-card h2{font-size:28px;margin:0}.login-card .muted{margin:4px 0 24px}.login-card .btn{width:100%}
.pw{display:flex;gap:8px;align-items:center}.pw input{margin:6px 0 0}.pw button{margin-top:6px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 28px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
#steps{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:center}
#steps li{padding:5px 12px;border-radius:12px;font-size:13px;color:var(--mut);background:var(--bg)}
#steps li.on{background:var(--b);color:#fff;font-weight:600}#steps li.done{background:var(--bl);color:var(--b)}
main{padding:40px 20px 80px}.screen{max-width:960px;margin:0 auto}.narrow{max-width:700px}.wide{max-width:1200px}
.title{font-size:clamp(24px,3.4vw,34px);margin:0 0 20px;text-align:center}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.cards.five{grid-template-columns:repeat(3,1fr);margin:24px 0}
.card{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:26px;text-align:left}
.pick{cursor:pointer;transition:border-color .15s,box-shadow .15s}.pick:hover,.pick:focus-visible{border-color:var(--b);box-shadow:0 14px 34px -16px rgba(10,77,255,.55)}
.pick h3{margin:14px 0 6px;font-size:19px}.pick p{margin:0;color:var(--mut)}.ico{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--bl);font-size:24px}
.drop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:54px 20px;border:2px dashed #aebfee;border-radius:12px;background:#fff;cursor:pointer;text-align:center}
.drop.over,.drop:hover{border-color:var(--b);background:var(--bl)}
.nav{display:flex;justify-content:space-between;align-items:center;margin-top:24px}
.form h3{margin:22px 0 10px;font-size:17px}.form h3:first-child{margin-top:0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.blk{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;background:#fafbff}.blk .rm{float:right}
.tpl{padding:14px;cursor:pointer;text-align:left;background:#fff}.tpl.sel{border-color:var(--b);box-shadow:0 0 0 3px #cfdcff}
.tpl h3{margin:10px 0 2px;font-size:16px}.tpl p{margin:0;font-size:13px;color:var(--mut)}
.mini{height:120px;border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff;display:flex;flex-direction:column;gap:5px}
.mini i{display:block;height:4px;border-radius:12px;background:#cfd6e8}.mini i.h{height:7px;width:60%;background:var(--c,#222)}.mini i.s{width:35%;background:var(--c,#222);height:3px}
.res-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}.res-top .title{text-align:left;margin-bottom:12px}
.chips{display:flex;gap:8px;flex-wrap:wrap}.chip{border:1px solid var(--line);background:#fff;border-radius:12px;padding:6px 14px;font-size:13px}.chip.sel{background:var(--b);border-color:var(--b);color:#fff}
.res-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.pages{display:flex;flex-direction:column;gap:18px;align-items:center;background:#E7ECF8;padding:20px;border-radius:12px}.pages canvas{width:100%;max-width:820px;height:auto;background:#fff;box-shadow:0 10px 30px -12px rgba(15,26,51,.35)}
#atsBox{position:sticky;top:76px}#atsBox h3{margin:0 0 8px}#atsBox h4{margin:16px 0 6px;font-size:13px;color:var(--mut)}
.score{font:700 44px Arial,Helvetica,sans-serif;color:var(--b)}.tags{display:flex;flex-wrap:wrap;gap:5px}.tags span{font-size:12px;padding:3px 9px;border-radius:12px;background:var(--bl);color:var(--bd)}.tags.miss span{background:#FFF1E6;color:#9a4a00}#atsBox ul{margin:0;padding-left:18px;font-size:13px}
#loader{position:fixed;inset:0;background:rgba(246,248,253,.92);display:grid;place-content:center;justify-items:center;gap:14px;z-index:20;font-weight:500}
.spin{width:46px;height:46px;border:4px solid var(--bl);border-top-color:var(--b);border-radius:50%;animation:s 1s linear infinite}@keyframes s{to{transform:rotate(360deg)}}
@media(max-width:820px){.login{grid-template-columns:1fr}.brand-panel{padding:32px 24px}.cards,.grid,.res-grid{grid-template-columns:1fr}#atsBox{position:static}header{padding:10px 14px}#steps{display:none}}
@media(prefers-reduced-motion:reduce){.spin{animation-duration:3s}}
.thumb canvas{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:12px;background:#fff}.tpl.sel .thumb canvas{border-color:var(--b)}
@media(max-width:820px){.cards.five{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cards.five{grid-template-columns:1fr}}

.aiic{width:22px;height:22px;fill:currentColor;flex:none}
.ai-banner{display:flex;gap:14px;align-items:flex-start;background:var(--ink);color:#fff;padding:18px 22px;margin-bottom:24px;border-left:4px solid var(--b)}.ai-banner .aiic{width:28px;height:28px;color:#6f9bff}.ai-banner p{margin:4px 0 0;color:#c8d3ee;font-size:14px}
.ai-note{display:flex;gap:10px;align-items:flex-start;background:var(--bl);border:1px solid #c5d4ff;padding:12px 14px;color:var(--bd);font-size:14px;margin:0 0 18px}.ai-note .aiic{width:18px;height:18px;margin-top:2px}
.ai-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid rgba(255,255,255,.55);padding:4px 10px;width:fit-content}.ai-tag .aiic{width:14px;height:14px}
.tpl{position:relative;padding:16px;cursor:default}.ribbon{position:absolute;top:14px;left:-8px;z-index:2;background:#FFB400;color:#1a1200;font-size:12px;font-weight:700;padding:5px 12px;text-transform:uppercase;letter-spacing:.04em;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.thumb{position:relative}.use{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;white-space:nowrap;transition:opacity .15s}
.tpl:hover .use,.tpl:focus-within .use{opacity:1}.tpl:hover .thumb canvas{filter:brightness(.8)}@media(hover:none){.use{opacity:1}}
.chk{display:flex;gap:10px;align-items:center;font-weight:600;margin:16px 0 4px}.chk input{width:18px;height:18px;margin:0}
.card{box-shadow:0 1px 2px rgba(15,26,51,.05)}

/* ===== Modern startup theme ===== */
:root{--ink:#0B1220;--line:#E3E8F4}
body{font-family:Inter,"Segoe UI",Arial,sans-serif;background:#fff radial-gradient(60% 45% at 12% 0,#e6eeff 0,transparent 70%) fixed;background-image:radial-gradient(60% 45% at 12% 0,#e6eeff 0,transparent 70%),radial-gradient(45% 35% at 95% 4%,#efeaff 0,transparent 70%);background-attachment:fixed}
h1,h2,h3,.brand,.score{font-family:Inter,Arial,sans-serif}
.title{font-weight:500;font-size:clamp(28px,3.6vw,40px);letter-spacing:-.025em;margin-bottom:28px}
header{background:rgba(255,255,255,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
#steps li{border-radius:99px;padding:6px 14px;font-weight:500}
.btn{border-radius:12px;padding:13px 26px;font-weight:600;box-shadow:0 8px 20px -8px rgba(10,77,255,.55)}.btn:disabled{background:#c9d3ee;box-shadow:none;cursor:not-allowed}
.ghost{border-radius:12px;padding:11px 18px;background:#fff;font-weight:500}
input,textarea{border-radius:12px;padding:13px 15px;background:#fff}
.card,.form,.drop{border-radius:22px}.blk{border-radius:16px}.chip,.tags span{border-radius:99px}.pages,.pages canvas{border-radius:14px}
.card{box-shadow:0 1px 2px rgba(11,18,32,.04),0 12px 30px -18px rgba(11,18,32,.18)}
.note{background:#F3F6FF;border:1px solid #d6e1ff;border-radius:14px;padding:13px 16px;color:#243a78;font-size:14px;margin:0 0 18px}
.brand-panel{background:linear-gradient(140deg,#0A4DFF 0%,#0636b8 55%,#0B1220 130%)}
.login-card{width:min(430px,92%)}.login-card input{height:48px}
.pay-note{display:flex;gap:10px;align-items:flex-start;background:#F3F6FF;border:1px solid #d6e1ff;color:#0839c4;border-radius:14px;padding:12px 14px;font-size:13px;margin:0 0 22px}.pay-note svg{flex:none;margin-top:1px}
.ai-tag{border-radius:99px;background:rgba(255,255,255,.12)}
/* square option cards */
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin:0 auto;gap:22px}
.opt{position:relative;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:26px 26px 0;border:1.5px solid var(--line);border-radius:24px;background:#fff;overflow:hidden;cursor:pointer;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s}
.opt:hover{border-color:#aebfee;transform:translateY(-2px)}.opt.sel{border-color:var(--b);box-shadow:0 0 0 4px #dbe5ff}
.opt h3{display:flex;gap:12px;align-items:flex-start;margin:0;font-size:19px;line-height:1.3;font-weight:600}
.opt p{margin:8px 0 12px 32px;color:var(--mut);font-size:14px}
.opt .tag{margin-left:32px;font-size:12px;font-weight:600;color:#475069;background:#EEF1F8;border-radius:8px;padding:4px 10px}
.rd{flex:none;width:20px;height:20px;margin-top:2px;border:2px solid #b8c3de;border-radius:50%;background:#fff}
.opt.sel .rd{border-color:var(--b);background:var(--b);box-shadow:inset 0 0 0 4px #fff}
.ill{margin:auto -26px 0;width:calc(100% + 52px);height:42%;display:grid;place-items:center;padding:14px 26px 10px;background:linear-gradient(to bottom,#fff 0,#dfe8ff 100%)}.ill svg{width:100%;height:100%}
.wide-nav{max-width:760px;margin:22px auto 0}
/* square template cards */
.cards.five{max-width:1020px;margin:24px auto;gap:22px}
.tpl{aspect-ratio:1/1;padding:20px 20px 0;overflow:hidden;border-radius:24px;cursor:default}.tpl h3{margin:0 0 4px;font-size:18px;font-weight:600}.tpl p{margin:0;font-size:13px;line-height:1.4}
.thumb{position:absolute;left:20px;right:20px;bottom:0;top:112px;overflow:hidden;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;background:#fff}
.thumb canvas{width:100%;height:auto;display:block;border:0;border-radius:0}.thumb:after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,rgba(214,225,255,.95))}
.tpl .use{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);z-index:3;opacity:0}.tpl:hover .use,.tpl:focus-within .use{opacity:1}@media(hover:none){.tpl .use{opacity:1}}
.badge{position:absolute;top:16px;right:16px;z-index:3;background:#FFB400;color:#1a1200;font-size:12px;font-weight:700;border-radius:99px;padding:5px 11px}
@media(max-width:820px){.cards.five{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cards.two,.cards.five{grid-template-columns:1fr}.opt{aspect-ratio:auto;min-height:360px}}

.signup{text-align:center;margin:18px 0 0;color:var(--mut);font-size:14px}.signup a{color:var(--b);font-weight:600;text-decoration:none}.signup a:hover{text-decoration:underline}