/* St. Rose School ID Card Generator v1.3.0 */
.sr-app{max-width:1180px;margin:30px auto;font-family:Arial,sans-serif;color:#172033}
.sr-builder{background:#f7f9fc;border:1px solid #dfe5ec;border-radius:18px;padding:24px;box-shadow:0 10px 35px rgba(0,0,0,.06)}
.sr-builder-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}.sr-eyebrow{font-size:11px;font-weight:900;letter-spacing:2px;color:#ed7a19}.sr-builder h2{margin:4px 0;font-size:30px}.sr-user-export-note{font-size:12px;font-weight:800;color:#7b4d00;background:#fff4d7;border:1px solid #f1d38b;border-radius:8px;padding:8px 10px}
.sr-account-notice{margin-bottom:15px;padding:12px 15px;border-radius:10px;background:#eef7ff;border:1px solid #bddcf6;font-size:14px}.sr-account-notice a{font-weight:900}
.sr-customizer{background:#fff;border:1px solid #dbe2ea;border-radius:14px;padding:17px;margin-bottom:18px}.sr-customizer h3{margin:0 0 13px}.sr-custom-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:12px}.sr-custom-grid label{font-size:12px;font-weight:800}.sr-custom-grid input,.sr-custom-grid select{width:100%;box-sizing:border-box;margin-top:5px;padding:9px;border:1px solid #cfd6df;border-radius:8px;background:#fff}.sr-custom-grid input[type=color]{height:40px;padding:3px}
.sr-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.sr-panel{background:#fff;border:1px solid #e1e6ed;border-radius:14px;padding:18px;min-width:0}.sr-panel h3{margin:0 0 14px}.sr-fields{display:grid;gap:13px}.sr-fields label{font-weight:900;font-size:13px}.sr-fields input,.sr-fields textarea{width:100%;box-sizing:border-box;margin-top:5px;padding:11px;border:1px solid #cfd6df;border-radius:8px;background:#fff;text-transform:uppercase;font-weight:800;font-size:14px;line-height:1.45}.sr-fields textarea{resize:vertical;min-height:86px}.sr-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sr-camera{height:250px;background:#172033;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}.sr-camera video{width:100%;height:100%;object-fit:cover;display:none}.sr-camera img{max-width:100%;max-height:100%;display:none}.sr-camera canvas{display:none}.sr-camera-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.sr-upload input{display:none}.sr-note{font-size:12px;color:#687384;line-height:1.5}
.sr-btn{border:0;border-radius:9px;padding:10px 15px;font-weight:900;cursor:pointer;background:#e7ebf0;color:#172033}.sr-btn:disabled{opacity:.6;cursor:not-allowed}.sr-btn-primary{background:#145aa0;color:#fff}.sr-btn-gold{background:#ef7d1a;color:#fff}
.sr-preview-wrap{margin-top:20px;background:#fff;border:1px solid #e1e6ed;border-radius:14px;padding:20px;overflow-x:auto}.sr-preview-title{text-align:center;font-weight:900;margin-bottom:15px}.sr-preview-stage{min-width:3.375in;display:flex;justify-content:center}
/* Physical card: 3.375 x 2.125 inches. */
.sr-card{width:3.375in;height:2.125in;box-sizing:border-box;border:2px solid var(--sr-border,#1769a8);border-radius:8px;background:linear-gradient(135deg,#eaf7ff 0%,#dff1ff 54%,#fff0e3 100%);overflow:hidden;margin:0 auto;font-family:Arial,sans-serif;color:var(--sr-text,#123456);position:relative;box-shadow:0 3px 10px rgba(0,0,0,.12)}
.sr-card-header{display:flex;align-items:center;padding:5px 7px 4px;background:rgba(255,255,255,.62);border-bottom:2px solid var(--sr-accent,#ef7d1a);min-height:51px}.sr-logo{width:45px;height:45px;display:flex;align-items:center;justify-content:center;flex:none}.sr-logo img{max-width:45px;max-height:45px;object-fit:contain}.sr-logo span{font:900 7px Arial;color:#8b97a5}.sr-school{text-align:center;flex:1;min-width:0;padding:0 2px}.sr-school-name{font-weight:1000;font-size:16.5px;line-height:1.05;letter-spacing:.2px;text-transform:uppercase;color:var(--sr-border,#0d4e83);white-space:normal}.sr-school-address{font-size:7.4px;font-weight:900;line-height:1.2;margin-top:3px;color:var(--sr-text,#3d5266)}
.sr-card-body{display:flex;gap:7px;padding:6px 7px 1px;min-height:91px}.sr-photo-frame{width:62px;height:78px;border:2px solid var(--sr-accent,#ef7d1a);border-radius:4px;background:#e6edf3;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}.sr-photo-frame img{width:100%;height:100%;object-fit:cover}.sr-details{font-size:8.2px;line-height:1.5;min-width:0;color:var(--sr-text,#203a51);font-weight:900;overflow:hidden;padding-right:48px}.sr-details>div{margin-bottom:2px}.sr-details b{font-weight:1000}.sr-student-name{font-size:11.5px;font-weight:1000;letter-spacing:.2px;text-transform:uppercase;color:var(--sr-border,#0d4e83);margin-bottom:4px!important;line-height:1.1}.sr-row{display:flex;gap:7px;flex-wrap:wrap}.sr-row>span{white-space:nowrap}.sr-signature{position:absolute;right:7px;bottom:12px;width:50px;text-align:center;height:25px}.sr-signature img{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;max-width:48px;max-height:14px;object-fit:contain}.sr-signature-line{position:absolute;left:0;right:0;bottom:5px;border-bottom:1px solid var(--sr-text,#4e6477)}.sr-signature span{position:absolute;bottom:-2px;left:0;right:0;font-size:5.8px;font-weight:1000;color:var(--sr-text,#24394c)}.sr-card-footer{position:absolute;left:0;right:0;bottom:0;text-align:center;background:rgba(255,255,255,.92);color:var(--sr-text,#324b61);font:900 5.2px Arial;padding:2px 3px}
.theme-blue-orange{--sr-border:#1769a8;--sr-accent:#ef7d1a}.theme-blue{--sr-border:#1769a8;--sr-accent:#1769a8}.theme-orange{--sr-border:#e66f16;--sr-accent:#e66f16}.theme-green{--sr-border:#25734a;--sr-accent:#25734a}.theme-maroon{--sr-border:#79263a;--sr-accent:#79263a}.theme-minimal{--sr-border:#555;--sr-accent:#777}
.sr-actions{display:flex;gap:10px;justify-content:center;margin-top:18px}.sr-success,.sr-error,.sr-loading{padding:10px;margin-top:12px;border-radius:8px}.sr-success{background:#e8f7ed;color:#176b35}.sr-error{background:#fdecec;color:#9b2020}.sr-loading{background:#eef3f9}
.sr-admin{max-width:1200px}.sr-admin-actions{display:flex;gap:10px;margin:15px 0}.sr-table-wrap{background:#fff;margin-bottom:20px}.sr-a4-page{width:194mm;height:281mm;box-sizing:border-box;display:grid;grid-template-columns:repeat(2,3.375in);grid-template-rows:repeat(4,2.125in);gap:5mm;align-content:start;justify-content:center;page-break-after:always;break-after:page;overflow:hidden}.sr-a4-page:last-child{page-break-after:auto;break-after:auto}.sr-a4-page .sr-card{margin:0;break-inside:avoid;page-break-inside:avoid;box-shadow:none}.sr-setting-thumb{max-width:100px;max-height:80px;border:1px solid #ddd;padding:4px;background:#fff}.sr-sign-setting{max-width:180px;max-height:70px;border:1px solid #ddd;padding:4px;background:#fff}
@page{size:A4 portrait;margin:8mm}.sr-print-document{margin:0;background:#fff}.sr-print-document .sr-card,.sr-print-document .sr-card *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
@media print{.sr-a4-page{page-break-after:always;break-after:page}.sr-a4-page:last-child{page-break-after:auto;break-after:auto}}
@media(max-width:850px){.sr-grid{grid-template-columns:1fr}.sr-custom-grid{grid-template-columns:1fr 1fr}.sr-builder-head{align-items:flex-start;flex-direction:column}.sr-preview-wrap{padding:14px}}
@media(max-width:600px){.sr-app{margin:12px auto}.sr-builder{padding:12px;border-radius:12px}.sr-builder h2{font-size:23px}.sr-custom-grid{grid-template-columns:1fr}.sr-panel{padding:13px}.sr-two{grid-template-columns:1fr}.sr-fields input,.sr-fields textarea{font-size:15px;padding:12px}.sr-camera{height:220px}.sr-camera-actions .sr-btn,.sr-camera-actions .sr-upload{width:100%;text-align:center}.sr-actions{flex-direction:column}.sr-actions .sr-btn{width:100%}}