:root{ --navy:#0f1f3a; --gold:#f0b02a; --muted:#9ca3af; --ink:#0b1220 }
*{ box-sizing:border-box }
body{ margin:0; font-family:Inter,system-ui,Arial,sans-serif; background:#0b1220; color:#0e1726 }

/* Status */
.status{ position:fixed; top:6px; left:6px; background:#065f46; color:#ecfdf5; padding:6px 10px; border-radius:8px; font-size:12px; z-index:99 }

/* Header */
.topbar{ background:linear-gradient(135deg,#0ea5e9 0%,#2563eb 50%,#7c3aed 100%); color:#fff }
.topbar-inner{ max-width:1200px; margin:0 auto; padding:14px 16px; display:flex; align-items:center; gap:10px }
.topbar-inner.center{ justify-content:center }
.topbar-inner h1{ font-size:18px; font-weight:800; margin:0 }
.brand-dot{ width:10px; height:10px; border-radius:50%; background:#22d3ee; box-shadow:0 0 12px rgba(34,211,238,.8) }
.subtitle{ text-align:center; margin:0; padding:4px 0 12px; color:#e2e8f0; font-size:12px }

/* Layout */
.container{ max-width:1200px; margin:16px auto; padding:0 12px; display:grid; grid-template-columns:1fr 420px; gap:18px; align-items:start }
@media (max-width:1024px){ .container{ grid-template-columns:1fr } }

/* Form */
.input-form{ background:#0f172a; color:#e5e7eb; border-radius:16px; padding:16px; box-shadow:0 12px 36px rgba(0,0,0,.25); position:sticky; top:48px }
.input-form label{ display:block; margin:10px 0 }
.input-form input[type="text"]{ width:100%; padding:12px; border-radius:10px; border:1px solid #23304d; background:#0b1220; color:#e5e7eb }
.inline{ display:flex; align-items:center; gap:8px }
.mb8{ margin-bottom:8px }
.hint{ color:#9ca3af; font-size:12px }
.btn{ border:0; border-radius:10px; padding:10px 12px; color:#fff; cursor:pointer }
.btn.blue{ background:linear-gradient(135deg,#5b7cff,#6ee7f9) }
.btn-download{ background:#22c55e; color:#052e16; border:0; border-radius:10px; padding:10px 12px; font-weight:700; box-shadow:0 6px 18px rgba(34,197,94,.25) }
.btn.teal{ background:#0891b2 } .btn.orange{ background:#f59e0b } .btn.green{ background:#22c55e; color:#052e16 } .btn.purple{ background:#8b5cf6 } .btn.gray{ background:#374151 }
.file-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0 }
.file-btn{ position:relative; background:#1f2937; color:#fff; padding:10px 12px; border-radius:10px; cursor:pointer; font-size:14px }
.file-btn input{ position:absolute; inset:0; opacity:0; cursor:pointer }
.file-name{ color:#9ca3af; font-size:12px }
.actions{ display:flex; gap:10px; margin-top:10px }

/* Preview panel – own scroll area on mobile */
.preview-wrap{ background:#0f172a; border-radius:16px; padding:16px; box-shadow:0 12px 36px rgba(0,0,0,.25) }
.preview-wrap h2{ color:#e5e7eb; margin:0 0 10px; font-size:16px }
.phone-viewport{ width:100%; background:#0b1220; border-radius:14px; padding:10px; overflow:auto; max-height:80vh }
.phone-scale{ width:100%; display:flex; justify-content:center }

@media (max-width:1024px){
  .input-form{ position:relative; top:auto }
  .phone-viewport{ max-height:70vh } /* independent scroll; fixes sync */
}

/* Card */
.card{ position:relative; width:350px; height:600px; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 12px 28px rgba(15,31,58,.18) }
.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.overlay{ position:absolute; inset:0 }

/* ID photo box – small, high; no compression */
.photo-box{
  position:absolute;
  top:97px;
  left:50%;
  width:160px;
  height:192px;          /* 5:6 ratio */
  margin-left:-80px;     /* true center; no transforms */
  overflow:hidden;
  background:#fff;
  border:2px solid #8b5cf6;
  border-radius:4px;
}
.photo-box img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}

/* Capture-safe: prevent rounding/overflow artifacts */
.card.capture{ overflow:visible; border-radius:0; transform:none !important }
.card.capture .photo-box{ border-radius:0; margin-left:-80px }

/* Labels and values */
.lab{ 
  position:absolute; 
  left:85px;   /* moved 16px more to the left */
  color:#0b1d33; 
  font-weight:800; 
  font-size:12.5px; 
  letter-spacing:.2px; 
  line-height:1.12 
}

.lab-name{ top:295px } .lab-course{ top:332px } .lab-dob{ top:370px } .lab-mob{ top:392px } .lab-email{ top:422px } .lab-stud{ top:452px } .lab-valid{ top:482px } .lab-address{ top:512px }
.val{ 
  position:absolute; 
  left:145px;   /* moved 20px to the left */
  color:#0b1d33; 
  font-weight:700; 
  font-size:14px; 
  line-height:1.12; 
  max-width:255px;
}
.val-name{ top:290px; font-size:17px; font-weight:800 }
.val-course{ top:330px; font-size:12.5px; font-weight:600; color:#1c2d46 }
.val-dob{ top:370px } .val-mob{ top:390px }
.val-email{ top:420px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:245px }
.val-studid{ top:450px; left:165px }
.val-valid { top:480px; left:165px }

.val-address{ top:510px; white-space:normal; word-break:break-word }

/* Signature */
.principal{ position:absolute; right:24px; bottom:30px; text-align:right; color:#1a2a3a }
.sign{ width:110px; height:30px; object-fit:contain; display:none; margin-left:auto }
.sign-text{ font-family:'Great Vibes','Homemade Apple',cursive; font-size:28px; color:#0b1d33; line-height:1; display:none }