@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&family=Outfit:wght@500;700;800;900&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Mukta','Inter',sans-serif;color:#1e293b;background:#f1f5f9;font-size:13px;overflow:hidden}

/* Topbar */
.topbar{height:52px;background:#0f172a;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #334155;flex-shrink:0;z-index:1000}
.topbar-logo{font-size:22px;margin-right:8px}
.topbar-title h1{font-size:15px;font-weight:700;display:flex;align-items:center;letter-spacing:-0.2px}
.topbar-right{display:flex;align-items:center;gap:10px}
.topbar-btn{color:#cbd5e1;text-decoration:none;font-size:12px;font-weight:600;padding:5px 9px;border-radius:6px;background:rgba(255,255,255,0.06);display:inline-flex;align-items:center;gap:4px;transition:0.2s}
.topbar-btn:hover{background:rgba(255,255,255,0.14);color:#fff}
.user-badge{color:#f8fafc;font-size:12px;font-weight:600;padding:5px 9px;border-radius:6px;background:rgba(255,255,255,0.08);display:inline-flex;align-items:center;gap:4px}
.balance-badge{background:#1e293b;border:1px solid #38bdf844;color:#38bdf8;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:700}
.topbar-add-bal{background:#0284c7;color:#fff;text-decoration:none;font-size:11px;font-weight:700;padding:2px 7px;border-radius:4px;margin-left:4px;transition:0.2s}
.topbar-add-bal:hover{background:#0369a1}

/* App Container Layout */
.app-container{display:flex;height:calc(100vh - 52px);width:100%;overflow:hidden}
.panel{width:360px;min-width:340px;background:#fff;border-right:1px solid #cbd5e1;overflow-y:auto;padding:14px;flex-shrink:0}
.panel h1{font-size:17px;font-weight:800;color:#0f172a;margin-bottom:2px}
.panel .sub{font-size:11.5px;color:#64748b;margin-bottom:12px;line-height:1.35}
.panel fieldset{border:1px solid #e2e8f0;border-radius:8px;padding:10px;margin-bottom:12px;background:#f8fafc}
.panel legend{font-weight:700;font-size:12px;color:#334155;padding:0 5px}
.panel label{display:block;font-size:11.5px;font-weight:600;color:#475569;margin-top:6px;margin-bottom:2px}
.panel input[type="text"],.panel select,.panel textarea{width:100%;padding:6px 8px;font-size:12px;border:1px solid #cbd5e1;border-radius:5px;font-family:inherit;outline:none;background:#fff;color:#0f172a}
.panel input[type="file"]{width:100%;font-size:11px;padding:4px}
.panel textarea{resize:vertical;min-height:50px}
.panel input:focus,.panel select:focus,.panel textarea:focus{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,0.15)}

.btn{display:block;width:100%;padding:7px 10px;border-radius:6px;background:#2563eb;color:#fff;font-size:12.5px;font-weight:700;border:none;cursor:pointer;margin-top:7px;transition:0.2s;text-align:center;font-family:inherit}
.btn:hover{background:#1d4ed8}
.btn.g{background:#f1f5f9;color:#334155;border:1px solid #cbd5e1}
.btn.g:hover{background:#e2e8f0;color:#0f172a}
.btn.m{background:#dc2626;color:#fff}
.btn.m:hover{background:#b91c1c}

.size-ctrl-wrap{background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:6px;margin-top:4px;margin-bottom:6px}
.size-ctrl-wrap label{margin-top:0!important;font-size:11px}
.size-btn-group{display:flex;align-items:center;gap:4px;margin-top:4px}
.btn-sz{padding:2px 8px;font-size:11px;border-radius:4px;border:1px solid #cbd5e1;background:#f8fafc;cursor:pointer;font-weight:700;font-family:inherit}
.btn-sz:hover{background:#e2e8f0}
.sz-slider{flex:1}

/* Templates grid */
.tpls{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:4px}
.tpls button{border:2px solid #cbd5e1;background:#fff;border-radius:7px;padding:4px;cursor:pointer;font-family:inherit;font-size:10px;font-weight:700;color:#334155;text-align:center}
.tpls button.on{border-color:#7e22ce;box-shadow:0 0 0 2px rgba(126,34,206,0.25)}
.tpls i{display:block;height:28px;border-radius:4px;margin-bottom:3px}

/* Queue List */
.queue{width:260px;min-width:240px;background:#f8fafc;border-right:1px solid #cbd5e1;display:flex;flex-direction:column;flex-shrink:0}
.qh{padding:10px 12px;background:#fff;border-bottom:1px solid #e2e8f0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.qh b{font-size:13px;color:#0f172a}
.qh span{background:#e0e7ff;color:#3730a3;font-size:11px;font-weight:700;padding:1px 6px;border-radius:10px;margin-left:auto}
.qh input{width:100%;padding:5px 8px;font-size:11.5px;border:1px solid #cbd5e1;border-radius:5px;outline:none}
.ql{flex:1;overflow-y:auto;padding:8px}
.qi{display:flex;align-items:center;gap:8px;padding:7px 9px;background:#fff;border:1px solid #e2e8f0;border-radius:6px;margin-bottom:6px;cursor:pointer;transition:0.15s}
.qi:hover,.qi.on{border-color:#7e22ce;background:#faf5ff}
.qi .qph{width:32px;height:38px;border-radius:4px;background:#e2e8f0;object-fit:cover;flex-shrink:0}
.qi .qdet{flex:1;min-width:0}
.qi .qdet b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a}
.qi .qdet span{display:block;font-size:10.5px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qi .qacts{display:flex;gap:4px}
.qi .qacts button{border:none;background:transparent;cursor:pointer;font-size:12px;padding:2px;color:#64748b}
.qi .qacts button:hover{color:#0f172a}
.qn{text-align:center;padding:20px 10px;color:#94a3b8;font-size:12px}

/* Stage & Preview Area */
.stage{flex:1;background:#cbd5e1;overflow:auto;padding:20px;display:flex;flex-direction:column;align-items:center;position:relative}
.empty{margin-top:60px;text-align:center;color:#64748b;font-size:14px;line-height:1.6;background:rgba(255,255,255,0.7);padding:30px 40px;border-radius:12px;border:2px dashed #94a3b8}

/* Stage Floating Zoom Controls */
.stage-zoom-bar{
 position:sticky;
 top:0;
 align-self:flex-end;
 margin-bottom:12px;
 z-index:500;
 display:inline-flex;
 align-items:center;
 gap:4px;
 background:rgba(15,23,42,0.85);
 backdrop-filter:blur(8px);
 -webkit-backdrop-filter:blur(8px);
 border:1px solid rgba(255,255,255,0.15);
 padding:4px 8px;
 border-radius:999px;
 box-shadow:0 4px 14px rgba(0,0,0,0.25);
 user-select:none;
}
.zoom-btn{
 width:28px;
 height:28px;
 border-radius:50%;
 border:none;
 background:rgba(255,255,255,0.12);
 color:#fff;
 font-size:12px;
 font-weight:700;
 cursor:pointer;
 display:flex;
 align-items:center;
 justify-content:center;
 transition:0.15s;
 font-family:inherit;
}
.zoom-btn:hover{
 background:rgba(255,255,255,0.25);
 transform:scale(1.06);
}
.zoom-btn:active{
 transform:scale(0.95);
}
.zoom-btn-val{
 background:transparent;
 border:none;
 color:#38bdf8;
 font-size:12px;
 font-weight:800;
 padding:2px 8px;
 cursor:pointer;
 border-radius:4px;
 font-family:monospace;
}
.zoom-btn-val:hover{
 background:rgba(255,255,255,0.12);
}

#sheets{display:flex;flex-direction:column;gap:20px;align-items:center;transform-origin:top center;transition:transform 0.15s ease-out}
.sheet{background:#fff;box-shadow:0 6px 20px rgba(0,0,0,0.18);position:relative;page-break-after:always;display:flex;flex-wrap:wrap;align-content:flex-start;overflow:hidden}
.sheet.a4{width:210mm;height:297mm;padding:10mm 8mm;gap:8mm 6mm;justify-content:center}
.sheet.fit{width:54mm;height:85.6mm;padding:0;gap:0;box-shadow:0 4px 14px rgba(0,0,0,0.22);border-radius:3.5mm;overflow:hidden}

/* ==================== TEACHER ID CARD DESIGN (CR80 Standard: 54mm × 85.6mm) ==================== */
.tcard{
 width:54mm;
 height:85.6mm;
 background:#ffffff;
 border-radius:3.2mm;
 position:relative;
 overflow:hidden;
 box-shadow:0 2px 8px rgba(0,0,0,0.12);
 border:0.35mm solid #e2e8f0;
 display:flex;
 flex-direction:column;
 flex-shrink:0;
 font-family:'Mukta','Inter',sans-serif;
 user-select:none;
}

/* Template Themes */
.tcard.t1{--m:#581c87;--m2:#7e22ce;--m3:#a21caf;--accent:#f59e0b;--badge:#0284c7;--foot:#1e1b4b} /* Purple / Magenta (Default matching image) */
.tcard.t2{--m:#0c4a6e;--m2:#0284c7;--m3:#38bdf8;--accent:#f59e0b;--badge:#0369a1;--foot:#082f49} /* Royal Blue */
.tcard.t3{--m:#064e3b;--m2:#059669;--m3:#10b981;--accent:#fbbf24;--badge:#047857;--foot:#022c22} /* Forest Green */
.tcard.t4{--m:#7f1d1d;--m2:#b91c1c;--m3:#dc2626;--accent:#fbbf24;--badge:#991b1b;--foot:#450a0a} /* Maroon Red */
.tcard.t5{--m:#1e1b4b;--m2:#312e81;--m3:#4f46e5;--accent:#f59e0b;--badge:#4338ca;--foot:#0f172a} /* Navy Indigo */
.tcard.t6{--m:#134e4a;--m2:#0d9488;--m3:#14b8a6;--accent:#f97316;--badge:#0f766e;--foot:#042f2e} /* Teal Cyan */

/* Card Header Section */
.tc-header{
 position:relative;
 width:100%;
 height:27mm;
 background:linear-gradient(135deg, var(--m) 0%, var(--m2) 55%, var(--m3) 100%);
 color:#ffffff;
 padding:2mm 2.5mm 1.5mm 2.5mm;
 display:flex;
 flex-direction:column;
 align-items:center;
 text-align:center;
 overflow:hidden;
}

/* Header decorative wave ribbons */
.tc-header-curve{
 position:absolute;
 bottom:-4mm;
 left:-5%;
 width:110%;
 height:8mm;
 background:#ffffff;
 border-radius:50% 50% 0 0;
 z-index:2;
}
.tc-header-accent{
 position:absolute;
 bottom:-2.2mm;
 left:-5%;
 width:110%;
 height:7.5mm;
 background:var(--accent);
 border-radius:50% 50% 0 0;
 z-index:1;
}

/* Year Badge on Top Right */
.tc-year-badge{
 position:absolute;
 top:2mm;
 right:2.5mm;
 background:rgba(255,255,255,0.22);
 border:0.25mm solid rgba(255,255,255,0.45);
 color:#ffffff;
 font-size:4.8pt;
 font-weight:800;
 padding:0.6mm 1.8mm;
 border-radius:999px;
 letter-spacing:0.3px;
 z-index:5;
}

/* Top Row: Logo & School Name */
.tc-header-content{
 position:relative;
 z-index:4;
 width:100%;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 padding-top:0.5mm;
}
.tc-logo{
 position:absolute;
 top:0.2mm;
 left:0.2mm;
 width:6.8mm;
 height:6.8mm;
 border-radius:50%;
 background:#ffffff;
 padding:0.3mm;
 box-shadow:0 1px 3px rgba(0,0,0,0.3);
 object-fit:contain;
}
.tc-school-name{
 font-size:10.5pt;
 font-weight:800;
 line-height:1.15;
 color:#ffffff;
 text-shadow:0 1px 2px rgba(0,0,0,0.45);
 margin-bottom:0.5mm;
 max-width:82%;
 white-space:normal;
 word-break:break-word;
}
.tc-school-sub{
 font-size:5.8pt;
 font-weight:700;
 color:#fef08a;
 line-height:1.1;
 text-shadow:0 1px 2px rgba(0,0,0,0.35);
}

/* Card Body Section */
.tc-body{
 position:relative;
 z-index:3;
 flex:1;
 display:flex;
 flex-direction:column;
 align-items:center;
 padding:0 3mm 1mm 3mm;
 margin-top:-2.5mm;
}

/* Teacher Photo */
.tc-photo-wrap{
 width:var(--ph-w, 19.5mm);
 height:var(--ph-h, 24mm);
 border-radius:1.5mm;
 border:0.65mm solid var(--m2);
 background:#f8fafc;
 overflow:hidden;
 box-shadow:0 1.5px 5px rgba(0,0,0,0.18);
 margin-bottom:1.2mm;
 flex-shrink:0;
 position:relative;
}
.tc-photo{
 width:100%;
 height:100%;
 object-fit:cover;
 display:block;
}

/* Teacher Name & Designation */
.tc-name{
 font-size:10.5pt;
 font-weight:800;
 color:#b91c1c;
 line-height:1.15;
 text-align:center;
 margin-bottom:0.8mm;
 letter-spacing:-0.1px;
}
.tc-desig-badge{
 background:var(--badge);
 color:#ffffff;
 font-size:6.2pt;
 font-weight:700;
 padding:0.7mm 3.2mm;
 border-radius:999px;
 line-height:1;
 text-align:center;
 box-shadow:0 1px 3px rgba(2,132,199,0.3);
 margin-bottom:1.8mm;
}

/* Key-Value Details Table */
.tc-table{
 width:100%;
 font-size:6.2pt;
 line-height:1.3;
 color:#1e293b;
 margin-bottom:auto;
}
.tc-row{
 display:flex;
 align-items:flex-start;
 margin-bottom:0.7mm;
}
.tc-lbl{
 font-weight:700;
 color:#1e3a8a;
 width:18mm;
 flex-shrink:0;
}
.tc-sep{
 width:1.8mm;
 text-align:center;
 font-weight:700;
 color:#64748b;
 flex-shrink:0;
}
.tc-val{
 font-weight:700;
 color:#0f172a;
 flex:1;
 word-break:break-word;
}

/* Sign & Stamp area */
.tc-sign-area{
 width:100%;
 display:flex;
 justify-content:flex-end;
 align-items:flex-end;
 padding-right:1mm;
 margin-bottom:1mm;
}
.tc-sign-box{
 text-align:center;
}
.tc-sign-img{
 height:4mm;
 max-width:14mm;
 object-fit:contain;
 display:block;
 margin:0 auto;
}
.tc-sign-line{
 width:14mm;
 height:0.25mm;
 background:#94a3b8;
 margin:0.4mm auto;
}
.tc-sign-title{
 font-size:5.2pt;
 font-weight:700;
 color:#334155;
}

/* Bottom Footer Bar */
.tc-footer{
 width:100%;
 height:5.2mm;
 background:var(--foot);
 color:#ffffff;
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:0 2.5mm;
 font-size:5.2pt;
 font-weight:700;
 flex-shrink:0;
}
.tc-footer-left{
 color:#e2e8f0;
 letter-spacing:0.2px;
}
.tc-footer-right{
 color:#fef08a;
 font-weight:800;
}

/* Anti-Screenshot Watermark Overlay */
.card-watermark-overlay{
 position:absolute!important;
 inset:0!important;
 display:flex!important;
 flex-direction:column!important;
 justify-content:space-around!important;
 align-items:center!important;
 pointer-events:none!important;
 z-index:90!important;
 overflow:hidden!important;
 user-select:none!important;
 opacity:0.35!important;
}
.card-watermark-overlay .wm-line{
 position:relative!important;
 transform:rotate(-32deg)!important;
 white-space:nowrap!important;
 font-family:'Outfit','Inter',sans-serif!important;
 font-size:10.5pt!important;
 font-weight:900!important;
 color:#dc2626!important;
 text-transform:uppercase!important;
 letter-spacing:1.8px!important;
 text-shadow:0 0 2px #fff,0 0 4px #fff!important;
}

/* Full-Screen Download Progress Bar Modal */
#dl-progress-modal{
 position:fixed;
 inset:0;
 background:rgba(15,23,42,0.88);
 backdrop-filter:blur(8px);
 -webkit-backdrop-filter:blur(8px);
 z-index:999999;
 display:flex;
 align-items:center;
 justify-content:center;
 opacity:0;
 visibility:hidden;
 transition:opacity 0.3s ease, visibility 0.3s ease;
 font-family:'Mukta','Inter',-apple-system,sans-serif;
 padding:16px;
}
#dl-progress-modal.show{
 opacity:1;
 visibility:visible;
}
.dl-progress-card{
 background:#1e293b;
 border:1px solid rgba(255,255,255,0.12);
 box-shadow:0 25px 50px -12px rgba(0,0,0,0.6),0 0 40px rgba(59,130,246,0.15);
 border-radius:18px;
 width:100%;
 max-width:460px;
 padding:30px 26px;
 text-align:center;
 color:#fff;
 transform:scale(0.95);
 transition:transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
#dl-progress-modal.show .dl-progress-card{
 transform:scale(1);
}
.dl-prog-icon{
 width:64px;
 height:64px;
 margin:0 auto 16px;
 background:linear-gradient(135deg,#1e3a8a,#0284c7);
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:30px;
 box-shadow:0 0 20px rgba(2,132,199,0.4);
 animation:dlPulse 2s infinite ease-in-out;
}
@keyframes dlPulse{
 0%,100%{transform:scale(1);box-shadow:0 0 15px rgba(2,132,199,0.3)}
 50%{transform:scale(1.08);box-shadow:0 0 28px rgba(2,132,199,0.6)}
}
.dl-prog-title{
 font-size:20px;
 font-weight:800;
 margin-bottom:6px;
 letter-spacing:-0.2px;
 color:#f8fafc;
}
.dl-prog-subtitle{
 font-size:13.5px;
 color:#94a3b8;
 margin-bottom:22px;
 line-height:1.4;
 min-height:20px;
}
.dl-bar-wrap{
 background:#0f172a;
 border-radius:999px;
 height:16px;
 padding:3px;
 box-shadow:inset 0 2px 4px rgba(0,0,0,0.5);
 position:relative;
 overflow:hidden;
 margin-bottom:12px;
 border:1px solid rgba(255,255,255,0.08);
}
.dl-bar-fill{
 background:linear-gradient(90deg,#2563eb,#06b6d4,#10b981);
 background-size:200% 100%;
 height:100%;
 border-radius:999px;
 width:0%;
 transition:width 0.25s ease-out;
 animation:dlShimmer 1.8s infinite linear;
 box-shadow:0 0 12px rgba(6,182,212,0.5);
}
@keyframes dlShimmer{
 0%{background-position:200% 0}
 100%{background-position:-200% 0}
}
.dl-bar-info{
 display:flex;
 justify-content:space-between;
 align-items:center;
 font-size:12.5px;
 color:#cbd5e1;
 font-weight:600;
 margin-bottom:16px;
}
.dl-bar-info .percent{
 color:#38bdf8;
 font-size:14px;
 font-weight:800;
}
.dl-prog-tips{
 background:rgba(30,41,59,0.6);
 border:1px dashed rgba(255,255,255,0.15);
 border-radius:10px;
 padding:10px 14px;
 font-size:11.5px;
 color:#94a3b8;
 line-height:1.5;
 display:flex;
 align-items:center;
 gap:8px;
 text-align:left;
}

/* Modal for Edit */
.modal{position:fixed;inset:0;background:rgba(15,23,42,0.65);backdrop-filter:blur(4px);z-index:9999;display:none;align-items:center;justify-content:center;padding:16px}
.modal.on{display:flex}
.mbox{background:#fff;border-radius:14px;width:100%;max-width:740px;box-shadow:0 20px 40px rgba(0,0,0,0.25);overflow:hidden;max-height:92vh;display:flex;flex-direction:column}
.mbox h3{padding:14px 18px;border-bottom:1px solid #e2e8f0;font-size:16px;font-weight:800;color:#0f172a}
.mgrid{display:flex;gap:18px;padding:16px;overflow-y:auto}
.mform{flex:1}
.mform label{display:block;font-size:11.5px;font-weight:700;color:#334155;margin-top:6px;margin-bottom:2px}
.mform input{width:100%;padding:6px 8px;border:1px solid #cbd5e1;border-radius:5px;font-size:12px;font-family:inherit}
.mph{width:270px;display:flex;flex-direction:column;align-items:center}
.crop-container{width:260px;height:300px;background:#0f172a;border-radius:8px;border:1px solid #cbd5e1;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
.crop-container img{max-width:100%;display:block}
.crop-toolbar{display:flex;gap:4px;width:100%;margin-top:8px}
.crop-tool-btn{flex:1;padding:4px 0!important;font-size:11px!important;margin:0!important;text-align:center;border-radius:4px;font-weight:700}
.mact{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid #e2e8f0;background:#f8fafc}
.mact .btn{width:auto;margin:0;padding:6px 14px}

/* Print Disabler */
@media print{
 body,html,*{display:none!important;visibility:hidden!important}
}
@media(max-width:900px){
 .app-container{flex-direction:column;overflow-y:auto}
 .panel{width:100%;height:auto;position:static}
 .queue{width:100%;height:45vh}
 .stage{height:auto}
 #sheets{zoom:.55}
}