:root{
  --pink:#AB417F;
  --pink-dark:#8f3169;
  --ink:#1b1918;
  --card-w:194mm;
  --card-h:52mm;
  --gap:3mm;
  --page-w:210mm;
  --page-h:296mm;
  --margin:8mm;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Segoe UI",Arial,Helvetica,sans-serif;background:#eef0f3;color:#1f2937;font-size:14px}
a{color:var(--pink)}
.wrap{max-width:1200px;margin:0 auto;padding:18px}
.wrap.narrow{max-width:880px}
header.top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px;flex-wrap:wrap}
header.top h1{font-size:21px;margin:0 0 4px}
header.top p{margin:0;color:#6b7280;font-size:13px}

.panel{background:#fff;border:1px solid #dde1e6;border-radius:10px;padding:16px;margin-bottom:16px}
.panel h2{font-size:15px;margin:0 0 14px;padding-bottom:9px;border-bottom:1px solid #eef0f3;color:#374151;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.panel h2 .sub{font-size:12px;color:#9ca3af;font-weight:400}

.fld{display:flex;flex-direction:column;gap:4px;margin-bottom:11px}
.fld label{font-size:11px;font-weight:600;color:#4b5563;text-transform:uppercase;letter-spacing:.3px}
.fld label .req{color:#dc2626;margin-left:3px}
.fld input[type=text],.fld input[type=password],.fld input[type=file],.fld input[type=email]{
  width:100%;padding:8px 10px;border:1px solid #cfd4da;border-radius:6px;font-size:13px;font-family:inherit;background:#fff
}
.fld select{width:100%;padding:8px 10px;border:1px solid #cfd4da;border-radius:6px;font-size:13px;font-family:inherit;background:#fff}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 2px rgba(171,65,127,.15)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:620px){.two{grid-template-columns:1fr}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:7px;border:1px solid transparent;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;background:#e5e7eb;color:#374151;transition:.15s;text-decoration:none}
.btn:hover{filter:brightness(.96)}
.btn:disabled{opacity:.55;cursor:default}
.btn.primary{background:var(--pink);color:#fff}
.btn.dark{background:#374151;color:#fff}
.btn.green{background:#16a34a;color:#fff}
.btn.red{background:#dc2626;color:#fff}
.btn.small{padding:4px 9px;font-size:12px;font-weight:500}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;align-items:center}

.photo-box{display:flex;gap:14px;align-items:flex-start}
.photo-prev{width:104px;height:132px;flex:none;border:2px solid #dde1e6;border-radius:8px;background:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#9ca3af;font-size:11px;text-align:center}
.photo-prev img{width:100%;height:100%;object-fit:cover}
.logo-prev{width:70px;height:70px;flex:none;border:1px solid #dde1e6;border-radius:8px;background:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden}
.logo-prev img{max-width:100%;max-height:100%;object-fit:contain}
.hint{font-size:11px;color:#9ca3af;margin-top:4px}
.pill{background:#fce7f3;color:var(--pink-dark);font-weight:700;font-size:12px;padding:5px 12px;border-radius:999px}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(24px);background:#16a34a;color:#fff;padding:13px 22px;border-radius:9px;font-weight:600;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:.25s;z-index:9999;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:#dc2626}

.modal{position:fixed;inset:0;background:rgba(17,24,39,.55);display:none;align-items:center;justify-content:center;z-index:10000;padding:16px}
.modal.show{display:flex}
.modal-box{background:#fff;border-radius:12px;padding:22px;width:100%;max-width:400px;box-shadow:0 20px 50px rgba(0,0,0,.35)}

/* success message */
.success{display:none;text-align:center;padding:40px 20px}
.success.on{display:block}
.success .check{width:76px;height:76px;border-radius:50%;background:#dcfce7;color:#16a34a;display:flex;align-items:center;justify-content:center;font-size:40px;margin:0 auto 16px}
.success h2{border:none;font-size:22px;justify-content:center}

/* checkbox grid (required fields) */
.chk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.chk{display:flex;align-items:center;gap:8px;border:1px solid #e4e7eb;border-radius:7px;padding:8px 10px;background:#fafbfc;font-size:13px;cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--pink)}
.chk.on{background:#fce7f3;border-color:#f3c1dd}

/* pool list */
.pool{display:flex;flex-direction:column;gap:8px;max-height:560px;overflow:auto}
.row{display:flex;gap:12px;align-items:center;border:1px solid #e4e7eb;border-radius:8px;padding:9px;background:#fff}
.row .thumb{width:42px;height:54px;flex:none;border-radius:5px;overflow:hidden;background:#f3f4f6;border:1px solid #e4e7eb}
.row .thumb img{width:100%;height:100%;object-fit:cover}
.row .info{flex:1;min-width:0}
.row .info b{display:block;font-size:14px}
.row .info span{font-size:11px;color:#6b7280;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .meta{font-size:11px;color:#9ca3af;white-space:nowrap}
.empty{color:#9ca3af;font-size:13px;text-align:center;padding:20px}

.login-box{max-width:380px;margin:6vh auto}
.login-box .logo-prev{margin:0 auto 14px;width:90px;height:90px}
.badge{display:inline-block;background:#374151;color:#fff;font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;vertical-align:middle;margin-left:6px}

/* live preview wrapper */
.preview-shell{background:#cbd2d9;border-radius:10px;padding:14px;overflow:auto}
.preview-shell .card{margin:0 auto}

/* ---- Kart ---- */
#printArea{display:none;flex-direction:column;align-items:center}
#printArea.on-screen{display:flex;background:#cbd2d9;padding:14px;border-radius:10px;overflow:auto;max-height:82vh;margin-bottom:16px}
.page{width:var(--page-w);height:var(--page-h);padding:var(--margin);background:#fff;display:flex;flex-direction:column;gap:var(--gap);margin:0 auto 14px;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.page:last-child{margin-bottom:0}
.card{width:var(--card-w);height:var(--card-h);margin:0 auto;background:var(--pink);border-radius:0;padding:1.4mm;display:flex;gap:2.8mm;color:var(--ink);font-family:Arial,Helvetica,sans-serif;overflow:hidden;flex:none}
.card .left{flex:1;display:flex;flex-direction:column;gap:1.4mm;min-width:0}
.card .right{flex:1;background:#fff;border-radius:1.4mm;padding:1.4mm 1.8mm;display:flex;flex-direction:column;min-width:0}
.card .head{background:#fff;border-radius:1.4mm;display:flex;align-items:center;justify-content:space-between;gap:2mm;padding:1mm 1.6mm}
.card .head .logo{height:11mm;max-width:24mm;object-fit:contain;flex:none}
.card .head .titles{flex:1;text-align:center;min-width:0}
.card .head .t1{font-weight:700;font-size:2.8mm;letter-spacing:.1mm;line-height:1.1}
.card .head .t2{font-size:1.95mm;line-height:1.2;margin-top:.3mm}
.card .band{color:#fff;text-align:center;font-weight:700;font-size:2.6mm;line-height:1.15;padding:0 .5mm}
.card .body{background:#fff;border-radius:1.4mm;flex:1;display:flex;gap:2.6mm;padding:1.6mm;min-height:0}
.card .photo{width:20mm;flex:none;border:.8mm solid var(--pink);border-radius:1mm;overflow:hidden;background:#f3f4f6}
.card .photo img{width:100%;height:100%;object-fit:cover;display:block}
.card .fields{flex:1;display:flex;flex-direction:column;justify-content:space-around;min-width:0}
.card .frow{display:flex;align-items:baseline;font-size:2.4mm;line-height:1.3}
.card .frow .l{width:23mm;font-weight:700;white-space:nowrap;flex:none}
.card .frow .v{flex:1;min-width:0;border-bottom:.28mm dotted #555;padding-left:1mm;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .rtitle{text-align:center;font-weight:700;font-size:2.5mm;padding-bottom:.6mm;margin-bottom:1mm;border-bottom:.3mm solid var(--pink)}
.card .rrow{display:flex;align-items:baseline;font-size:2.4mm;line-height:1.35;margin-bottom:.5mm}
.card .rrow .l{width:35mm;font-weight:700;white-space:nowrap;flex:none}
.card .rrow .v{flex:1;min-width:0;border-bottom:.28mm dotted #555;padding-left:1mm;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .rsep{border-top:.4mm solid var(--pink);margin:.6mm 0 1mm}
.card .rfoot{display:flex;justify-content:space-between;font-size:2.2mm;font-weight:700;gap:1mm;white-space:nowrap}
.card .rsign{margin-top:auto;font-size:2.2mm;font-weight:700;padding-top:1mm}

@media print{
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;color-adjust:exact !important}
  body{background:#fff;font-size:12px}
  .no-print{display:none !important}
  .modal,.toast{display:none !important}
  #printArea{display:block !important}
  .page{margin:0;box-shadow:none;height:auto;min-height:0;overflow:visible}
  #printArea .page + .page{break-before:page;page-break-before:always}
  @page{size:A4 portrait;margin:0}
}