:root{--navy:#0d2a6b;--navy2:#0a1f52;--gold:#f2b705;--gold2:#c9972b;--ice:#eef4fc}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Roboto,Arial,sans-serif;background:#e9edf4;color:var(--navy2)}
.top{padding:28px 24px 8px;text-align:center}
.top h1{margin:0;font-size:1.6rem;color:var(--navy)}
.top p{margin:4px 0 0;color:#5a6a8a}
.layout{display:flex;flex-wrap:wrap;gap:28px;justify-content:center;align-items:flex-start;padding:20px}
.panel{background:#fff;border-radius:14px;padding:22px;width:320px;box-shadow:0 2px 12px rgba(13,42,107,.12)}
.panel label{display:block;margin:14px 0 6px;font-weight:600;font-size:.9rem}
.panel input[type=text]{width:100%;padding:10px 12px;border:1px solid #c5cfe2;border-radius:8px;font-size:1rem}
.panel input:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.actions{display:flex;flex-direction:column;gap:8px;margin-top:22px}
button{padding:11px;border-radius:8px;border:1px solid var(--navy);background:#fff;color:var(--navy);font-weight:600;cursor:pointer;font-size:.95rem}
button.primary{background:var(--navy);color:#fff}
#status{min-height:1.2em;font-size:.88rem;margin:12px 0 0}
.preview{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;max-width:100%}
.cw{width:calc(540px*var(--s,1));height:calc(810px*var(--s,1));flex:none}
.cw .card{transform:scale(var(--s,1));transform-origin:0 0}
@media(max-width:700px){.panel{width:100%}.layout{padding:12px}}

/* ===== CARD 540 x 810 (no transforms/clip-path/object-fit so PNG export matches) ===== */
.card{position:relative;width:540px;height:810px;background:#eef4fc;border-radius:26px;overflow:hidden;box-shadow:0 6px 24px rgba(13,42,107,.25)}
.wm{position:absolute;left:0;top:0;width:540px;height:810px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='270' height='34'><text x='4' y='23' font-family='Arial' font-weight='700' font-size='15' letter-spacing='1' fill='%233a7bd5' fill-opacity='.11'>CALIPHATE MODEL SCHOOL</text></svg>")}
.band-top{position:absolute;left:0;top:0;display:block}
.slot{position:absolute;top:14px;left:205px;width:130px;height:26px;background:#fff;border-radius:14px}
.shield{position:absolute;display:block;top:52px;left:210px;width:120px;height:140px}
.school{position:absolute;left:0;top:200px;width:540px;margin:0;text-align:center;font:700 46px/1 Georgia,"Times New Roman",serif;color:#0d2a6b;letter-spacing:2px}
.school-sub{position:absolute;left:0;top:250px;width:540px;margin:0;text-align:center;font:700 24px/1 Georgia,serif;color:#c9972b;letter-spacing:5px}
.motto{position:absolute;left:80px;top:284px;width:380px;height:40px;line-height:34px;text-align:center;background:#0d2a6b;color:#fff;font:600 18px/34px Georgia,serif;border-top:3px solid #f2b705;border-bottom:3px solid #f2b705;white-space:nowrap}
.motto.small{left:120px;top:182px;width:300px;height:34px;font-size:15px;line-height:28px}
.town{position:absolute;left:0;top:332px;width:540px;margin:0;text-align:center;font-weight:700;font-size:14px;letter-spacing:1px;color:#0a1f52}
.photo-ring{position:absolute;left:150px;top:358px;width:240px;height:240px;border-radius:50%;border:5px solid #f2b705;background:#cfd9ea;overflow:hidden;text-align:center}
#photoImg{position:absolute;left:0;top:0;width:100%;height:100%;background-size:cover;background-position:center top;background-repeat:no-repeat;display:none}
.photo-ring.has #photoImg{display:block}.photo-ring.has #photoHint{display:none}
#photoHint{display:block;line-height:230px;color:#5a6a8a;font-size:14px}
.pill{position:absolute;text-align:center;border-radius:40px}
.pill small{display:block;font-weight:700;letter-spacing:2px;font-size:14px;line-height:16px}
.pill strong{display:block;white-space:nowrap}
.name-pill{left:40px;top:614px;width:460px;height:76px;background:#0d2a6b;color:#fff;border:3px solid #f2b705;padding-top:10px}
.name-pill strong{font-size:30px;line-height:36px}
.pos-pill{left:70px;top:704px;width:400px;height:62px;background:#f2b705;color:#0d2a6b;padding-top:10px}
.pos-pill small{font-size:12px}
.pos-pill strong{font-size:25px;line-height:36px}
.band-bottom{position:absolute;left:0;bottom:0;width:540px;height:34px;background:#0d2a6b;border-top:3px solid #f2b705;text-align:center}
.band-bottom em{display:block;color:#fff;font:italic 17px/32px "Brush Script MT","Segoe Script",cursive;letter-spacing:1px}

/* back */
.back-head{position:absolute;left:30px;top:62px;width:480px;height:110px}
.shield.small{left:0;top:0;width:90px;height:105px}
.back-title{position:absolute;left:112px;top:6px;width:368px;border-left:2px solid #f2b705;padding-left:16px}
.back-title b{display:block;font:700 40px/44px Georgia,serif;color:#0d2a6b;letter-spacing:1px}
.back-title span{display:block;font:700 22px/28px Georgia,serif;color:#0d2a6b;letter-spacing:3px}
.back-title small{display:block;font-weight:700;font-size:13px;line-height:20px;color:#c9972b;letter-spacing:1px}
.bar{position:absolute;left:28px;width:484px;height:38px;line-height:38px;background:#0d2a6b;color:#fff;text-align:center;font-weight:800;font-size:19px;letter-spacing:1px;border-radius:20px}
.bar1{top:230px}.bar2{top:478px}
ul{list-style:none;margin:0;padding:0}
.info,.rules{position:absolute;left:34px;width:472px;background:#f8fbff;border:2px solid #cfe0f5;border-radius:16px}
.info{top:276px;height:190px;padding:4px 14px}
.info li{height:36px;line-height:35px;border-bottom:1px solid #cfe0f5;font-size:13.5px;white-space:nowrap;overflow:hidden}
.info li:last-child{border:0}
.info b{display:inline-block;width:118px;vertical-align:top}
.rules{top:522px;height:148px;padding:6px 14px}
.rules li{position:relative;height:28px;line-height:28px;padding-left:28px;font-size:13.5px;white-space:nowrap}
.rules li::before{content:"✓";position:absolute;left:0;top:4px;width:19px;height:19px;border-radius:50%;background:#c9972b;color:#fff;font-size:12px;text-align:center;line-height:19px}
.back-foot{height:136px;border-top:4px solid #f2b705}
#qr{position:absolute;left:228px;top:8px;width:84px;height:84px;background:#fff;padding:4px;border:3px solid #f2b705;border-radius:8px}
#qr img{display:block!important;width:68px;height:68px}
.back-foot small{position:absolute;left:0;top:96px;width:540px;color:#fff;font-size:10px;line-height:12px;letter-spacing:1.5px;font-weight:600}
.back-foot em{position:absolute;left:0;top:112px;width:540px;font-size:15px;line-height:20px}