:root{
    --bg:#fff7ea;
    --card:#fffdf8;
    --text:#57270f;
    --muted:#8a634e;
    --line:#e7b67e;
    --primary:#b8410d;
    --primary-dark:#792208;
    --green:#15803d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(circle at 10% 5%,rgba(255,190,86,.2),transparent 30%),
        linear-gradient(180deg,#fff9ef,#f6eadb);
    color:var(--text);
    font-family:Arial,"Noto Sans Gujarati",sans-serif;
}
body.locked{overflow:hidden}
button,input{font:inherit}
.opening-screen{
    position:fixed;inset:0;z-index:999999;
    display:flex;align-items:center;justify-content:center;
    padding:18px;background:rgba(44,17,5,.94);
    transition:.3s ease;
}
.opening-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}
.opening-card{
    width:min(94vw,480px);padding:24px;border-radius:26px;text-align:center;
    background:linear-gradient(145deg,#fff,#fff2d8);
    box-shadow:0 30px 80px rgba(0,0,0,.4);
}
.opening-logo{
    width:min(78vw,350px);aspect-ratio:1/1;margin:0 auto 18px;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;border-radius:50%;background:#fff;
    box-shadow:0 15px 38px rgba(118,41,10,.22);
}
.opening-logo img{width:100%;height:100%;object-fit:contain}
.open-register{
    border:0;border-radius:13px;padding:15px 26px;min-width:235px;
    color:#fff;background:linear-gradient(135deg,#c94d15,#7e2607);
    font-weight:900;letter-spacing:.4px;cursor:pointer;
    box-shadow:0 12px 28px rgba(126,38,7,.3);
}
.topbar{
    position:sticky;top:0;z-index:1000;
    display:flex;justify-content:space-between;gap:15px;align-items:center;
    padding:12px 20px;background:rgba(255,250,240,.95);
    border-bottom:1px solid rgba(130,60,20,.16);
    backdrop-filter:blur(12px);
}
.topbar strong{font-size:15px;color:#8e310d}
.topbar span{font-size:12px;color:#815d49}
.registration-stage{display:none}
.registration-stage.visible{display:block}
.form-wrapper{width:min(100%,960px);margin:auto;padding:20px 18px 45px}
.notice{padding:13px 15px;margin-bottom:16px;border-radius:12px;font-weight:700;font-size:13px}
.notice.error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}
.form-page{
    position:relative;width:100%;aspect-ratio:17/22;
    margin:0 auto 20px;overflow:hidden;background:#fff;
    box-shadow:0 10px 30px rgba(83,38,17,.18)
}
.page-background{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none;pointer-events:none}
.field-box{
    position:absolute;z-index:30;margin:0;padding:1px 6px;
    border:1px solid #c66a2b;border-radius:3px;outline:none;
    background:rgba(255,243,221,.94);color:#542b18;
    font-family:"Noto Sans Gujarati",Arial,sans-serif;
    font-size:clamp(7px,1.05vw,14px);font-weight:600;
    box-shadow:0 1px 3px rgba(80,35,13,.08)
}
.field-box:focus{background:#fffaf0;border-color:#8e2e0b;box-shadow:0 0 0 2px rgba(180,70,24,.12)}
.field-box::placeholder{color:rgba(85,48,27,.5)}
.form-code{
    display:flex;align-items:center;color:#a53410!important;
    font-family:Arial,sans-serif!important;font-weight:800!important;
}
.gender-choice,.option-square{position:absolute;z-index:50;cursor:pointer}
.gender-choice input,.option-square input{
    position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer
}
.tick{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    color:#c63810;font-family:Arial,sans-serif;font-weight:900;pointer-events:none
}
.gender-choice input:checked + .tick::after,
.option-square input:checked + .tick::after{content:"✓"}
.photo-upload{
    position:absolute;z-index:45;overflow:hidden;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    border:0;background:rgba(255,248,235,.95)
}
.photo-upload input{position:absolute;width:1px;height:1px;opacity:0}
.photo-text{text-align:center;font-size:clamp(5px,.9vw,11px);font-weight:700;line-height:1.35}
.photo-preview{display:none;width:100%;height:100%;object-fit:cover;object-position:center top}
.photo-preview.visible{display:block}
.photo-text.hidden{display:none}

/* Page 2 exact field placement */
.pos-code{left:14.7%;top:24.35%;width:17.2%;height:2.45%}
.pos-date{left:49.3%;top:24.35%;width:17.2%;height:2.45%}
.pos-name{left:18.2%;top:37.55%;width:53.2%;height:2.45%}
.pos-address1{left:18.0%;top:40.55%;width:74.0%;height:2.45%}
.pos-address2{left:7.7%;top:43.55%;width:84.3%;height:2.45%}
.pos-age{left:16.4%;top:46.55%;width:20.5%;height:2.45%}
.gender-male{left:51.4%;top:46.45%;width:3.2%;height:2.55%}
.gender-female{left:81.0%;top:46.45%;width:3.2%;height:2.55%}
.pos-native{left:29.4%;top:49.55%;width:29.0%;height:2.45%}
.pos-pin{left:72.0%;top:49.55%;width:20.0%;height:2.45%}
.pos-phone{left:22.3%;top:52.55%;width:22.6%;height:2.45%}
.pos-mobile{left:53.5%;top:52.55%;width:38.5%;height:2.45%}
.pos-special{left:26.7%;top:55.55%;width:65.3%;height:2.45%}
.pos-sanyam{left:38.5%;top:58.55%;width:53.5%;height:2.45%}
.pos-illness{left:15.6%;top:61.55%;width:76.4%;height:2.45%}
.pos-ref{left:14.4%;top:64.55%;width:77.6%;height:2.45%}
.pos-companion-name{left:33.5%;top:70.45%;width:35.0%;height:2.45%}
.pos-companion-form{left:68.5%;top:70.45%;width:23.5%;height:2.45%}
.photo-upload{left:71.8%;top:21.3%;width:20.8%;height:19.25%}

/* Printed Updhan square alignment */
.option-square{width:2.7%;height:2.6%;top:77.9%}
.option-1{left:15.8%}
.option-2{left:32.4%}
.option-3{left:45.6%}
.option-4{left:58.7%}
.option-5{left:71.8%}
.option-6{left:85.3%}
.tick{font-size:clamp(9px,1.45vw,19px)}

.submit-bar{
    margin:-5px auto 20px;padding:14px;border-radius:13px;text-align:center;
    background:rgba(255,255,255,.96);box-shadow:0 8px 22px rgba(80,35,14,.1)
}
.submit-btn{
    min-width:210px;border:0;border-radius:11px;padding:14px 34px;
    background:linear-gradient(135deg,#bd491b,#7c2608);color:#fff;
    font-size:16px;font-weight:900;cursor:pointer;box-shadow:0 9px 20px rgba(120,42,14,.26)
}
.submit-btn:disabled{opacity:.65;cursor:wait}
.saving-overlay{
    position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;
    background:rgba(42,15,4,.91);padding:18px;opacity:0;visibility:hidden;pointer-events:none
}
.saving-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}
.saving-card{
    width:min(92vw,370px);padding:22px;border-radius:22px;background:#fffaf1;text-align:center;
    box-shadow:0 25px 65px rgba(0,0,0,.38)
}
.saving-card img{width:145px;height:145px;border-radius:50%;object-fit:contain}
.spinner{
    width:38px;height:38px;margin:16px auto 0;border:4px solid rgba(173,67,22,.18);
    border-top-color:#ae4316;border-radius:50%;animation:spin .8s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:680px){
    .topbar{align-items:flex-start;flex-direction:column;gap:3px;padding:10px 12px}
    .form-wrapper{padding:12px 4px 30px}
    .form-page{margin-bottom:11px}
    .field-box{font-size:clamp(5px,1.55vw,9px);padding:0 3px}
    .tick{font-size:clamp(7px,2.2vw,13px)}
    .photo-text{font-size:clamp(4px,1.2vw,7px)}
}
@media print{
    .opening-screen,.topbar,.submit-bar,.saving-overlay{display:none!important}
    .registration-stage{display:block!important}
    .form-wrapper{width:100%;padding:0}
    .form-page{margin:0;box-shadow:none;page-break-after:always}
}
