/* ===== PORTRAIT ID CARD MAKER — COMPLETE CSS ===== */
/* Base reset */
* { margin:0; padding:0; box-sizing:border-box; }

/* ===== DESIGN GRID ===== */
.design-grid-wrap {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:24px;
  padding:10px 0 30px;
  width:100%;
  max-width:1180px;
  margin:0 auto;
}
.sample-wrap {
  width:100%;
  min-height:320px;
  overflow:hidden;
  border-radius:14px;
  position:relative;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  border:1px solid #e2e8f0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:14px 10px;
}
.sample-wrap:nth-child(8n+1){ background:#f0f9ff; }
.sample-wrap:nth-child(8n+2){ background:#fdf2f8; }
.sample-wrap:nth-child(8n+3){ background:#ecfdf5; }
.sample-wrap:nth-child(8n+4){ background:#fefce8; }
.sample-wrap:nth-child(8n+5){ background:#f5f3ff; }
.sample-wrap:nth-child(8n+6){ background:#fff7ed; }
.sample-wrap:nth-child(8n+7){ background:#f0fdfa; }
.sample-wrap:nth-child(8n+8){ background:#faf5ff; }
.sample-wrap:hover {
  box-shadow:0 8px 28px rgba(99,102,241,.15);
  border-color:#a5b4fc;
  transform:translateY(-2px);
  transition:.2s ease;
}
.sample-wrap > .card-p,
.sample-wrap > .p-card,
.sample-wrap > .id-card {
  transform:scale(.7);
  transform-origin:top center;
}

@media(max-width:600px){
  .design-grid-wrap { grid-template-columns:repeat(2,1fr); gap:8px; padding:8px; }
  /* Portrait card=250x400 → fit in ~168px wide container */
  .sample-wrap {
    min-height:auto; height:190px;
    padding:0; border-radius:10px;
    position:relative; overflow:hidden;
  }
  .sample-wrap > .card-p,
  .sample-wrap > .p-card,
  .sample-wrap > .id-card {
    position:absolute !important;
    left:50% !important; top:6px !important;
    transform:translateX(-50%) scale(.45) !important;
    transform-origin:top center !important;
  }
}
@media(max-width:380px){
  .design-grid-wrap { gap:6px; padding:6px; }
  .sample-wrap { height:165px; }
  .sample-wrap > .card-p,
  .sample-wrap > .p-card,
  .sample-wrap > .id-card {
    transform:translateX(-50%) scale(.38) !important;
  }
}

/* Flatten inner containers */
.samples,
.id-grid,
.portrait-grid-v2 {
  display:contents;
}

/* ===== PAGE LAYOUT ===== */
.idcard-page-body { background:#f1f5f9; padding:0 10px 40px; }
.page { max-width:1400px !important; padding:16px 10px 40px !important; }
.idcard-page-title { text-align:center; color:#0f172a; font-size:28px; margin:0; padding:30px 0 6px; font-family:'Poppins',sans-serif; }

/* ===== COMMON PORTRAIT CARD BASE ===== */
.card-p {
  width:250px; height:400px;
  border-radius:14px;
  position:relative;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06);
  font-family:'Poppins',sans-serif;
}
/* All editable content above decorative layers */
.card-p .org-name, .card-p .org-sub, .card-p .emp-name, .card-p .emp-role,
.card-p .emp-id-badge, .card-p .info-center { z-index:3; position:relative; }
.card-p .photo-frame { z-index:5 !important; }

/* ============================================
   DESIGN 26: OBSIDIAN MINIMAL
   ============================================ */
.card-26 {
  background:linear-gradient(180deg,#0a0a0a 0%,#1a1a2e 100%);
}
.card-26 .edge-glow {
  position:absolute; inset:0;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  pointer-events:none;
}
.card-26 .top-light {
  position:absolute; top:-40px; left:50%; transform:translateX(-50%);
  width:180px; height:80px;
  background:radial-gradient(ellipse, rgba(255,255,255,.06) 0%, transparent 70%);
}
.card-26 .photo-frame {
  position:absolute; top:40px; left:50%; transform:translateX(-50%);
  width:100px; height:120px;
  border-radius:12px;
  background:linear-gradient(135deg,#1e1e30,#16162a);
  border:2px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-26 .ph-icon { font-size:36px; opacity:.3; }
.card-26 .emp-name {
  position:absolute; top:175px; left:0; right:0;
  text-align:center;
  color:#e2e8f0;
  font-size:18px; font-weight:700;
  font-family:'Playfair Display',serif;
}
.card-26 .emp-role {
  position:absolute; top:200px; left:0; right:0;
  text-align:center;
  color:rgba(255,255,255,.4);
  font-size:10px; font-weight:600;
  letter-spacing:3px; text-transform:uppercase;
}
.card-26 .thin-line {
  position:absolute; top:222px; left:60px; right:60px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
}
.card-26 .info-center {
  position:absolute; top:238px; left:0; right:0;
  text-align:center;
  color:rgba(255,255,255,.35);
  font-size:10px; line-height:1.8;
}
.card-26 .emp-id-badge {
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  padding:4px 16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  color:rgba(255,255,255,.5);
  font-size:9px; font-weight:700;
  letter-spacing:2px;
}

/* ============================================
   DESIGN 27: ELECTRIC VIOLET
   ============================================ */
.card-27 {
  background:linear-gradient(180deg,#1a0533 0%,#2d1b69 50%,#1a0533 100%);
}
.card-27 .plasma {
  position:absolute; top:-60px; right:-40px;
  width:200px; height:200px;
  background:radial-gradient(circle, rgba(139,92,246,.25) 0%, transparent 70%);
  border-radius:50%;
}
.card-27 .v-lines {
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, transparent, transparent 24px, rgba(139,92,246,.04) 24px, rgba(139,92,246,.04) 25px);
}
.card-27 .org-name {
  position:absolute; top:20px; left:0; right:0;
  text-align:center;
  color:#a78bfa;
  font-size:11px; font-weight:900;
  letter-spacing:5px; text-transform:uppercase;
}
.card-27 .photo-frame {
  position:absolute; top:55px; left:50%; transform:translateX(-50%);
  width:95px; height:115px;
  border-radius:10px;
  background:rgba(139,92,246,.1);
  border:2px solid rgba(139,92,246,.3);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-27 .ph-icon { font-size:34px; opacity:.3; }
.card-27 .emp-name {
  position:absolute; top:185px; left:0; right:0;
  text-align:center;
  color:#e9d5ff;
  font-size:17px; font-weight:700;
}
.card-27 .emp-role {
  position:absolute; top:208px; left:0; right:0;
  text-align:center;
  color:#a78bfa;
  font-size:9px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
}
.card-27 .glow-line {
  position:absolute; top:228px; left:50px; right:50px;
  height:2px;
  background:linear-gradient(90deg, transparent, #8b5cf6, transparent);
  box-shadow:0 0 10px rgba(139,92,246,.3);
}
.card-27 .info-center {
  position:absolute; top:245px; left:0; right:0;
  text-align:center;
  color:rgba(167,139,250,.5);
  font-size:10px; line-height:1.8;
}
.card-27 .emp-id-badge {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  padding:4px 14px;
  background:rgba(139,92,246,.12);
  border:1px solid rgba(139,92,246,.3);
  border-radius:20px;
  color:#a78bfa;
  font-size:9px; font-weight:700;
  letter-spacing:2px;
}

/* ============================================
   DESIGN 28: GLACIER ICE
   ============================================ */
.card-28 {
  background:linear-gradient(180deg,#e0f2fe 0%,#f0f9ff 40%,#e0f2fe 100%);
  border:1px solid #bae6fd;
}
.card-28 .frost {
  position:absolute; top:0; left:0; right:0; height:80px;
  background:linear-gradient(180deg, rgba(186,230,253,.5), transparent);
}
.card-28 .ice-crack {
  position:absolute; top:60px; left:20px; right:20px;
  height:1px;
  background:linear-gradient(90deg, transparent, #7dd3fc, transparent);
  opacity:.5;
}
.card-28 .org-name {
  position:absolute; top:18px; left:0; right:0;
  text-align:center;
  color:#0369a1;
  font-size:12px; font-weight:900;
  letter-spacing:4px; text-transform:uppercase;
}
.card-28 .org-sub {
  position:absolute; top:36px; left:0; right:0;
  text-align:center;
  color:#38bdf8;
  font-size:7px; letter-spacing:3px; text-transform:uppercase;
}
.card-28 .photo-frame {
  position:absolute; top:75px; left:50%; transform:translateX(-50%);
  width:95px; height:115px;
  border-radius:10px;
  background:#f0f9ff;
  border:2px solid #7dd3fc;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-shadow:0 4px 16px rgba(56,189,248,.12);
}
.card-28 .ph-icon { font-size:34px; opacity:.25; }
.card-28 .emp-name {
  position:absolute; top:205px; left:0; right:0;
  text-align:center;
  color:#0c4a6e;
  font-size:17px; font-weight:700;
}
.card-28 .emp-role {
  position:absolute; top:228px; left:0; right:0;
  text-align:center;
  color:#0284c7;
  font-size:9px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
}
.card-28 .ice-divider {
  position:absolute; top:248px; left:60px; right:60px;
  height:1px;
  background:linear-gradient(90deg, transparent, #38bdf8, transparent);
}
.card-28 .info-center {
  position:absolute; top:262px; left:0; right:0;
  text-align:center;
  color:#64748b;
  font-size:10px; line-height:1.8;
}
.card-28 .emp-id-badge {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  padding:4px 14px;
  background:#e0f2fe;
  border:1px solid #7dd3fc;
  border-radius:20px;
  color:#0369a1;
  font-size:9px; font-weight:700;
  letter-spacing:1px;
}

/* ============================================
   DESIGN 29: EMBER FORGE
   ============================================ */
.card-29 {
  background:linear-gradient(180deg,#1c0a00 0%,#2d1500 50%,#1c0a00 100%);
}
.card-29 .embers {
  position:absolute; bottom:0; left:0; right:0; height:120px;
  background:radial-gradient(ellipse at center bottom, rgba(234,88,12,.15) 0%, transparent 70%);
}
.card-29 .heat-glow {
  position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  width:160px; height:80px;
  background:radial-gradient(ellipse, rgba(249,115,22,.1) 0%, transparent 70%);
}
.card-29 .forge-line-top {
  position:absolute; top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, #ea580c, #f97316, #ea580c);
}
.card-29 .org-name {
  position:absolute; top:20px; left:0; right:0;
  text-align:center;
  color:#f97316;
  font-size:12px; font-weight:900;
  letter-spacing:5px; text-transform:uppercase;
  text-shadow:0 0 10px rgba(249,115,22,.3);
}
.card-29 .photo-frame {
  position:absolute; top:55px; left:50%; transform:translateX(-50%);
  width:95px; height:115px;
  border-radius:10px;
  background:rgba(249,115,22,.06);
  border:2px solid rgba(249,115,22,.3);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-29 .ph-icon { font-size:34px; opacity:.3; filter:hue-rotate(-30deg); }
.card-29 .emp-name {
  position:absolute; top:185px; left:0; right:0;
  text-align:center;
  color:#fed7aa;
  font-size:17px; font-weight:700;
}
.card-29 .emp-role {
  position:absolute; top:208px; left:0; right:0;
  text-align:center;
  color:#f97316;
  font-size:9px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
}
.card-29 .ember-line {
  position:absolute; top:228px; left:50px; right:50px;
  height:2px;
  background:linear-gradient(90deg, transparent, #ea580c, transparent);
  box-shadow:0 0 8px rgba(234,88,12,.3);
}
.card-29 .info-center {
  position:absolute; top:245px; left:0; right:0;
  text-align:center;
  color:rgba(253,186,116,.4);
  font-size:10px; line-height:1.8;
}
.card-29 .emp-id-badge {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  padding:4px 14px;
  background:rgba(249,115,22,.1);
  border:1px solid rgba(249,115,22,.3);
  border-radius:20px;
  color:#f97316;
  font-size:9px; font-weight:700;
  letter-spacing:2px;
}

/* ============================================
   DESIGN 30: JADE TEMPLE
   ============================================ */
.card-30 {
  background:linear-gradient(180deg,#052e16 0%,#064e3b 50%,#052e16 100%);
}
.card-30 .mandala {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:300px; height:300px;
  border-radius:50%;
  border:1px solid rgba(74,222,128,.06);
  background:radial-gradient(circle, rgba(74,222,128,.04) 0%, transparent 70%);
}
.card-30 .gold-trim-top {
  position:absolute; top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,#d4af37,#f5d769,#d4af37);
}
.card-30 .gold-trim-bottom {
  position:absolute; bottom:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,#d4af37,#f5d769,#d4af37);
}
.card-30 .org-name {
  position:absolute; top:18px; left:0; right:0;
  text-align:center;
  color:#d4af37;
  font-size:12px; font-weight:900;
  letter-spacing:4px; text-transform:uppercase;
  font-family:'Playfair Display',serif;
}
.card-30 .org-sub {
  position:absolute; top:36px; left:0; right:0;
  text-align:center;
  color:rgba(212,175,55,.4);
  font-size:7px; letter-spacing:3px; text-transform:uppercase;
}
.card-30 .photo-frame {
  position:absolute; top:60px; left:50%; transform:translateX(-50%);
  width:95px; height:115px;
  border-radius:10px;
  background:rgba(212,175,55,.06);
  border:2px solid rgba(212,175,55,.3);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-30 .ph-icon { font-size:34px; opacity:.3; }
.card-30 .emp-name {
  position:absolute; top:190px; left:0; right:0;
  text-align:center;
  color:#bbf7d0;
  font-size:17px; font-weight:700;
  font-family:'Playfair Display',serif;
}
.card-30 .emp-role {
  position:absolute; top:213px; left:0; right:0;
  text-align:center;
  color:#d4af37;
  font-size:9px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
}
.card-30 .jade-divider {
  position:absolute; top:233px; left:50px; right:50px;
  height:1px;
  background:linear-gradient(90deg, transparent, #d4af37, transparent);
}
.card-30 .info-center {
  position:absolute; top:248px; left:0; right:0;
  text-align:center;
  color:rgba(187,247,208,.35);
  font-size:10px; line-height:1.8;
}
.card-30 .emp-id-badge {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  padding:4px 14px;
  background:rgba(212,175,55,.1);
  border:1px solid rgba(212,175,55,.3);
  border-radius:20px;
  color:#d4af37;
  font-size:9px; font-weight:700;
  letter-spacing:2px;
}

/* ============================================
   DESIGN 31: HOLOGRAPHIC
   ============================================ */
.card-31 {
  background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 50%,#f8fafc 100%);
  border:1px solid #e2e8f0;
}
.card-31 .holo {
  position:absolute; inset:0;
  background:linear-gradient(135deg,
    rgba(239,68,68,.05) 0%,
    rgba(249,115,22,.05) 15%,
    rgba(234,179,8,.05) 30%,
    rgba(34,197,94,.05) 45%,
    rgba(59,130,246,.05) 60%,
    rgba(139,92,246,.05) 75%,
    rgba(236,72,153,.05) 100%
  );
}
.card-31 .shimmer-top {
  position:absolute; top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e,#3b82f6,#8b5cf6,#ec4899);
}
.card-31 .shimmer-bottom {
  position:absolute; bottom:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,#ec4899,#8b5cf6,#3b82f6,#22c55e,#f59e0b,#ef4444);
}
.card-31 .org-name {
  position:absolute; top:20px; left:0; right:0;
  text-align:center;
  color:#334155;
  font-size:12px; font-weight:900;
  letter-spacing:4px; text-transform:uppercase;
}
.card-31 .photo-frame {
  position:absolute; top:55px; left:50%; transform:translateX(-50%);
  width:95px; height:115px;
  border-radius:50%;
  background:#f1f5f9;
  border:3px solid rgba(99,102,241,.2);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-31 .ph-icon { font-size:34px; opacity:.25; }
.card-31 .emp-name {
  position:absolute; top:185px; left:0; right:0;
  text-align:center;
  color:#0f172a;
  font-size:17px; font-weight:700;
}
.card-31 .emp-role {
  position:absolute; top:208px; left:0; right:0;
  text-align:center;
  color:#6366f1;
  font-size:9px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
}
.card-31 .rainbow-line {
  position:absolute; top:228px; left:40px; right:40px;
  height:2px;
  background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e,#3b82f6,#8b5cf6);
}
.card-31 .info-center {
  position:absolute; top:245px; left:0; right:0;
  text-align:center;
  color:#64748b;
  font-size:10px; line-height:1.8;
}
.card-31 .emp-id-badge {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  padding:4px 14px;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  border-radius:20px;
  color:#6366f1;
  font-size:9px; font-weight:700;
  letter-spacing:1px;
}

/* ============================================
   DESIGN 32: SAND DUNE
   ============================================ */
.card-32 {
  background:linear-gradient(180deg,#fef3c7 0%,#fffbeb 40%,#fef3c7 100%);
  border:1px solid #fde68a;
}
.card-32 .sun-disk {
  position:absolute; top:-20px; left:50%; transform:translateX(-50%);
  width:120px; height:120px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(245,158,11,.15) 0%, transparent 70%);
}
.card-32 .dune-curve {
  position:absolute; bottom:0; left:0; right:0; height:60px;
}
.card-32 .dune-curve svg { width:100%; height:100%; display:block; }
.card-32 .org-name {
  position:absolute; top:18px; left:0; right:0;
  text-align:center;
  color:#92400e;
  font-size:12px; font-weight:900;
  letter-spacing:4px; text-transform:uppercase;
}
.card-32 .org-sub {
  position:absolute; top:36px; left:0; right:0;
  text-align:center;
  color:#d97706;
  font-size:7px; letter-spacing:3px; text-transform:uppercase;
}
.card-32 .photo-frame {
  position:absolute; top:60px; left:50%; transform:translateX(-50%);
  width:95px; height:115px;
  border-radius:10px;
  background:#fffbeb;
  border:2px solid #fcd34d;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-32 .ph-icon { font-size:34px; opacity:.25; }
.card-32 .emp-name {
  position:absolute; top:190px; left:0; right:0;
  text-align:center;
  color:#451a03;
  font-size:17px; font-weight:700;
}
.card-32 .emp-role {
  position:absolute; top:213px; left:0; right:0;
  text-align:center;
  color:#d97706;
  font-size:9px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
}
.card-32 .sand-line {
  position:absolute; top:233px; left:50px; right:50px;
  height:1px;
  background:linear-gradient(90deg, transparent, #fbbf24, transparent);
}
.card-32 .info-center {
  position:absolute; top:248px; left:0; right:0;
  text-align:center;
  color:#78716c;
  font-size:10px; line-height:1.8;
}
.card-32 .emp-id-badge {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  padding:4px 14px;
  background:#fef3c7;
  border:1px solid #fcd34d;
  border-radius:20px;
  color:#92400e;
  font-size:9px; font-weight:700;
  letter-spacing:1px;
}

/* ============================================
   DESIGN 33: ARCTIC WHITE
   ============================================ */
.card-33 {
  background:#ffffff;
  border:1px solid #e2e8f0;
}
.card-33 .accent-bar {
  position:absolute; top:0; left:0; right:0;
  height:4px;
  background:#0f172a;
}
.card-33 .org-name {
  position:absolute; top:18px; left:0; right:0;
  text-align:center;
  color:#0f172a;
  font-size:12px; font-weight:900;
  letter-spacing:3px; text-transform:uppercase;
}
.card-33 .org-sub {
  position:absolute; top:36px; left:0; right:0;
  text-align:center;
  color:#94a3b8;
  font-size:7px; letter-spacing:3px; text-transform:uppercase;
}
.card-33 .photo-frame {
  position:absolute; top:60px; left:50%; transform:translateX(-50%);
  width:95px; height:115px;
  border-radius:10px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-33 .ph-icon { font-size:34px; opacity:.2; }
.card-33 .emp-name {
  position:absolute; top:190px; left:0; right:0;
  text-align:center;
  color:#0f172a;
  font-size:17px; font-weight:700;
}
.card-33 .emp-role {
  position:absolute; top:213px; left:0; right:0;
  text-align:center;
  color:#64748b;
  font-size:9px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
}
.card-33 .clean-divider {
  position:absolute; top:233px; left:60px; right:60px;
  height:1px;
  background:#e2e8f0;
}
.card-33 .info-center {
  position:absolute; top:248px; left:0; right:0;
  text-align:center;
  color:#94a3b8;
  font-size:10px; line-height:1.8;
}
.card-33 .emp-id-badge {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  padding:4px 14px;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  border-radius:20px;
  color:#334155;
  font-size:9px; font-weight:700;
  letter-spacing:1px;
}

/* ============================================
   DESIGN 34: CHERRY BLOSSOM
   ============================================ */
.card-34 {
  background:linear-gradient(180deg,#fff1f2 0%,#ffe4e6 40%,#fff1f2 100%);
  border:1px solid #fecdd3;
}
.card-34 .petals {
  position:absolute; top:-20px; right:-20px;
  width:160px; height:160px;
  background:radial-gradient(circle, rgba(251,113,133,.1) 0%, transparent 70%);
  border-radius:50%;
}
.card-34 .branch {
  position:absolute; bottom:-20px; left:-20px;
  width:120px; height:120px;
  background:radial-gradient(circle, rgba(251,113,133,.08) 0%, transparent 70%);
  border-radius:50%;
}
.card-34 .org-name {
  position:absolute; top:18px; left:0; right:0;
  text-align:center;
  color:#be123c;
  font-size:12px; font-weight:900;
  letter-spacing:3px; text-transform:uppercase;
  font-family:'Playfair Display',serif;
}
.card-34 .org-sub {
  position:absolute; top:36px; left:0; right:0;
  text-align:center;
  color:#fb7185;
  font-size:7px; letter-spacing:3px; text-transform:uppercase;
}
.card-34 .photo-frame {
  position:absolute; top:60px; left:50%; transform:translateX(-50%);
  width:95px; height:115px;
  border-radius:50%;
  background:#fff1f2;
  border:2px solid #fda4af;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-34 .ph-icon { font-size:34px; opacity:.25; }
.card-34 .emp-name {
  position:absolute; top:190px; left:0; right:0;
  text-align:center;
  color:#881337;
  font-size:17px; font-weight:700;
  font-family:'Playfair Display',serif;
}
.card-34 .emp-role {
  position:absolute; top:213px; left:0; right:0;
  text-align:center;
  color:#e11d48;
  font-size:9px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
}
.card-34 .blossom-line {
  position:absolute; top:233px; left:50px; right:50px;
  height:1px;
  background:linear-gradient(90deg, transparent, #fb7185, transparent);
}
.card-34 .info-center {
  position:absolute; top:248px; left:0; right:0;
  text-align:center;
  color:#9f1239;
  font-size:10px; line-height:1.8;
  opacity:.5;
}
.card-34 .emp-id-badge {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  padding:4px 14px;
  background:#fff1f2;
  border:1px solid #fecdd3;
  border-radius:20px;
  color:#be123c;
  font-size:9px; font-weight:700;
  letter-spacing:1px;
}

/* ============================================
   DESIGN 35: MIDNIGHT COSMOS
   ============================================ */
.card-35 {
  background:linear-gradient(180deg,#020617 0%,#0f172a 50%,#020617 100%);
}
.card-35 .cosmos {
  position:absolute; inset:0;
  background:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 40px 70px, rgba(255,255,255,.2), transparent),
    radial-gradient(1px 1px at 80px 120px, rgba(255,255,255,.15), transparent),
    radial-gradient(1px 1px at 150px 200px, rgba(255,255,255,.25), transparent),
    radial-gradient(1px 1px at 200px 50px, rgba(255,255,255,.2), transparent),
    radial-gradient(1px 1px at 100px 300px, rgba(255,255,255,.15), transparent);
}
.card-35 .galaxy-swirl {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:250px; height:250px;
  background:radial-gradient(circle, rgba(99,102,241,.08) 0%, transparent 70%);
  border-radius:50%;
}
.card-35 .ring {
  position:absolute; border-radius:50%;
  border:1px solid rgba(99,102,241,.1);
}
.card-35 .r1 { width:200px; height:200px; top:50%; left:50%; transform:translate(-50%,-50%); }
.card-35 .r2 { width:280px; height:280px; top:50%; left:50%; transform:translate(-50%,-50%); }
.card-35 .org-name {
  position:absolute; top:20px; left:0; right:0;
  text-align:center;
  color:#818cf8;
  font-size:11px; font-weight:900;
  letter-spacing:5px; text-transform:uppercase;
}
.card-35 .photo-frame {
  position:absolute; top:55px; left:50%; transform:translateX(-50%);
  width:95px; height:115px;
  border-radius:50%;
  background:rgba(99,102,241,.08);
  border:2px solid rgba(99,102,241,.2);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-35 .ph-icon { font-size:34px; opacity:.3; }
.card-35 .emp-name {
  position:absolute; top:185px; left:0; right:0;
  text-align:center;
  color:#e0e7ff;
  font-size:17px; font-weight:700;
}
.card-35 .emp-role {
  position:absolute; top:208px; left:0; right:0;
  text-align:center;
  color:#818cf8;
  font-size:9px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
}
.card-35 .star-line {
  position:absolute; top:228px; left:50px; right:50px;
  height:1px;
  background:linear-gradient(90deg, transparent, #6366f1, transparent);
  box-shadow:0 0 8px rgba(99,102,241,.2);
}
.card-35 .info-center {
  position:absolute; top:245px; left:0; right:0;
  text-align:center;
  color:rgba(129,140,248,.4);
  font-size:10px; line-height:1.8;
}
.card-35 .emp-id-badge {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  padding:4px 14px;
  background:rgba(99,102,241,.1);
  border:1px solid rgba(99,102,241,.2);
  border-radius:20px;
  color:#818cf8;
  font-size:9px; font-weight:700;
  letter-spacing:2px;
}

/* ============================================
   DESIGN 36: ROYAL SAPPHIRE
   ============================================ */
.card-36 {
  background:linear-gradient(180deg,#1e3a8a 0%,#1e40af 30%,#2563eb 100%);
}
.card-36 .crown-accent {
  position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg,#fbbf24,#f59e0b,#fbbf24);
}
.card-36 .diamond-pattern {
  position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255,255,255,.02) 20px, rgba(255,255,255,.02) 21px),
             repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(255,255,255,.02) 20px, rgba(255,255,255,.02) 21px);
}
.card-36 .gold-corner-tl { position:absolute; top:12px; left:12px; width:24px; height:24px; border-top:2px solid #fbbf24; border-left:2px solid #fbbf24; border-radius:4px 0 0 0; }
.card-36 .gold-corner-br { position:absolute; bottom:12px; right:12px; width:24px; height:24px; border-bottom:2px solid #fbbf24; border-right:2px solid #fbbf24; border-radius:0 0 4px 0; }
.card-36 .org-name {
  position:absolute; top:22px; left:0; right:0; text-align:center;
  color:#fbbf24; font-size:11px; font-weight:900; letter-spacing:5px; text-transform:uppercase;
  font-family:'Montserrat',sans-serif;
}
.card-36 .org-sub {
  position:absolute; top:40px; left:0; right:0; text-align:center;
  color:rgba(251,191,36,.4); font-size:7px; letter-spacing:3px; text-transform:uppercase;
}
.card-36 .photo-frame {
  position:absolute; top:60px; left:50%; transform:translateX(-50%);
  width:100px; height:120px; border-radius:12px;
  background:rgba(251,191,36,.08); border:2px solid rgba(251,191,36,.35);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.card-36 .ph-icon { font-size:36px; opacity:.3; }
.card-36 .emp-name {
  position:absolute; top:195px; left:0; right:0; text-align:center;
  color:#fff; font-size:18px; font-weight:700; font-family:'Playfair Display',serif;
}
.card-36 .emp-role {
  position:absolute; top:220px; left:0; right:0; text-align:center;
  color:#fbbf24; font-size:9px; font-weight:600; letter-spacing:3px; text-transform:uppercase;
}
.card-36 .gold-divider {
  position:absolute; top:242px; left:50px; right:50px; height:1px;
  background:linear-gradient(90deg, transparent, #fbbf24, transparent);
}
.card-36 .info-center {
  position:absolute; top:258px; left:0; right:0; text-align:center;
  color:rgba(255,255,255,.5); font-size:10px; line-height:1.8;
}
.card-36 .emp-id-badge {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  padding:5px 18px; background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.35);
  border-radius:20px; color:#fbbf24; font-size:9px; font-weight:700; letter-spacing:2px;
}

/* ============================================
   DESIGN 37: SUNSET GRADIENT
   ============================================ */
.card-37 {
  background:linear-gradient(180deg,#fef3c7 0%,#fdba74 30%,#fb923c 60%,#f97316 100%);
}
.card-37 .sun-rays {
  position:absolute; top:-50px; left:50%; transform:translateX(-50%);
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.25) 0%, transparent 70%);
}
.card-37 .wave-deco {
  position:absolute; bottom:0; left:0; right:0; height:80px;
  background:linear-gradient(180deg, transparent, rgba(234,88,12,.2));
}
.card-37 .org-name {
  position:absolute; top:20px; left:0; right:0; text-align:center;
  color:#7c2d12; font-size:12px; font-weight:900; letter-spacing:4px; text-transform:uppercase;
}
.card-37 .org-sub {
  position:absolute; top:38px; left:0; right:0; text-align:center;
  color:rgba(124,45,18,.5); font-size:7px; letter-spacing:3px;
}
.card-37 .photo-frame {
  position:absolute; top:58px; left:50%; transform:translateX(-50%);
  width:100px; height:120px; border-radius:50%;
  background:rgba(255,255,255,.3); border:3px solid rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 8px 24px rgba(234,88,12,.2);
}
.card-37 .ph-icon { font-size:36px; opacity:.3; }
.card-37 .emp-name {
  position:absolute; top:195px; left:0; right:0; text-align:center;
  color:#431407; font-size:18px; font-weight:700;
}
.card-37 .emp-role {
  position:absolute; top:218px; left:0; right:0; text-align:center;
  color:#9a3412; font-size:9px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
}
.card-37 .warm-line {
  position:absolute; top:238px; left:50px; right:50px; height:2px;
  background:linear-gradient(90deg, transparent, #fff, transparent); opacity:.6;
}
.card-37 .info-center {
  position:absolute; top:255px; left:0; right:0; text-align:center;
  color:rgba(124,45,18,.6); font-size:10px; line-height:1.8;
}
.card-37 .emp-id-badge {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  padding:5px 18px; background:rgba(255,255,255,.3); border:1px solid rgba(255,255,255,.5);
  border-radius:20px; color:#7c2d12; font-size:9px; font-weight:700; letter-spacing:2px;
}

/* ============================================
   DESIGN 38: EMERALD CORPORATE
   ============================================ */
.card-38 {
  background:linear-gradient(180deg,#ecfdf5 0%,#d1fae5 30%,#a7f3d0 100%);
  border:1px solid #6ee7b7;
}
.card-38 .side-accent-l { position:absolute; left:0; top:0; bottom:0; width:6px; background:linear-gradient(180deg,#059669,#10b981,#34d399); border-radius:14px 0 0 14px; }
.card-38 .side-accent-r { position:absolute; right:0; top:0; bottom:0; width:6px; background:linear-gradient(180deg,#34d399,#10b981,#059669); border-radius:0 14px 14px 0; }
.card-38 .leaf-pattern {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:200px; height:200px; border-radius:50%;
  border:1px solid rgba(16,185,129,.08);
}
.card-38 .org-name {
  position:absolute; top:22px; left:0; right:0; text-align:center;
  color:#047857; font-size:12px; font-weight:900; letter-spacing:4px; text-transform:uppercase;
}
.card-38 .org-sub {
  position:absolute; top:40px; left:0; right:0; text-align:center;
  color:#10b981; font-size:7px; letter-spacing:3px; text-transform:uppercase;
}
.card-38 .photo-frame {
  position:absolute; top:60px; left:50%; transform:translateX(-50%);
  width:100px; height:120px; border-radius:12px;
  background:#fff; border:2px solid #6ee7b7;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 6px 20px rgba(16,185,129,.12);
}
.card-38 .ph-icon { font-size:36px; opacity:.2; }
.card-38 .emp-name {
  position:absolute; top:195px; left:0; right:0; text-align:center;
  color:#064e3b; font-size:17px; font-weight:700;
}
.card-38 .emp-role {
  position:absolute; top:218px; left:0; right:0; text-align:center;
  color:#059669; font-size:9px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
}
.card-38 .green-divider {
  position:absolute; top:238px; left:50px; right:50px; height:2px;
  background:linear-gradient(90deg, transparent, #10b981, transparent);
}
.card-38 .info-center {
  position:absolute; top:255px; left:0; right:0; text-align:center;
  color:#065f46; font-size:10px; line-height:1.8; opacity:.6;
}
.card-38 .emp-id-badge {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  padding:5px 18px; background:#ecfdf5; border:1px solid #6ee7b7;
  border-radius:20px; color:#047857; font-size:9px; font-weight:700; letter-spacing:1px;
}

/* ============================================
   DESIGN 39: ROSE GOLD LUXURY
   ============================================ */
.card-39 {
  background:linear-gradient(180deg,#fff1f2 0%,#fce7f3 30%,#fbcfe8 60%,#f9a8d4 100%);
}
.card-39 .rose-shimmer {
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.3) 0%, transparent 50%, rgba(255,255,255,.15) 100%);
}
.card-39 .double-frame { position:absolute; inset:8px; border:1px solid rgba(190,130,140,.2); border-radius:10px; pointer-events:none; }
.card-39 .org-name {
  position:absolute; top:22px; left:0; right:0; text-align:center;
  color:#9f1239; font-size:12px; font-weight:900; letter-spacing:3px;
  font-family:'Playfair Display',serif;
}
.card-39 .org-sub {
  position:absolute; top:40px; left:0; right:0; text-align:center;
  color:rgba(159,18,57,.4); font-size:7px; letter-spacing:3px; text-transform:uppercase;
}
.card-39 .photo-frame {
  position:absolute; top:58px; left:50%; transform:translateX(-50%);
  width:98px; height:118px; border-radius:50%;
  background:rgba(255,255,255,.5); border:3px solid rgba(244,63,94,.25);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 8px 24px rgba(244,63,94,.1);
}
.card-39 .ph-icon { font-size:36px; opacity:.25; }
.card-39 .emp-name {
  position:absolute; top:192px; left:0; right:0; text-align:center;
  color:#881337; font-size:18px; font-weight:700; font-family:'Playfair Display',serif;
}
.card-39 .emp-role {
  position:absolute; top:216px; left:0; right:0; text-align:center;
  color:#be123c; font-size:9px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
}
.card-39 .rose-line {
  position:absolute; top:236px; left:50px; right:50px; height:1px;
  background:linear-gradient(90deg, transparent, #f43f5e, transparent); opacity:.4;
}
.card-39 .info-center {
  position:absolute; top:252px; left:0; right:0; text-align:center;
  color:rgba(136,19,55,.5); font-size:10px; line-height:1.8;
}
.card-39 .emp-id-badge {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  padding:5px 18px; background:rgba(255,255,255,.4); border:1px solid rgba(244,63,94,.25);
  border-radius:20px; color:#9f1239; font-size:9px; font-weight:700; letter-spacing:1px;
}

/* ============================================
   DESIGN 40: OCEAN DEEP
   ============================================ */
.card-40 {
  background:linear-gradient(180deg,#0c4a6e 0%,#075985 30%,#0369a1 60%,#0284c7 100%);
}
.card-40 .bubbles {
  position:absolute; inset:0;
  background:
    radial-gradient(3px 3px at 30px 50px, rgba(255,255,255,.12), transparent),
    radial-gradient(2px 2px at 80px 120px, rgba(255,255,255,.1), transparent),
    radial-gradient(4px 4px at 180px 80px, rgba(255,255,255,.08), transparent),
    radial-gradient(2px 2px at 200px 250px, rgba(255,255,255,.1), transparent),
    radial-gradient(3px 3px at 60px 300px, rgba(255,255,255,.12), transparent),
    radial-gradient(2px 2px at 150px 350px, rgba(255,255,255,.08), transparent);
}
.card-40 .wave-top {
  position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,#22d3ee,#06b6d4,#22d3ee);
}
.card-40 .org-name {
  position:absolute; top:22px; left:0; right:0; text-align:center;
  color:#67e8f9; font-size:11px; font-weight:900; letter-spacing:5px; text-transform:uppercase;
}
.card-40 .org-sub {
  position:absolute; top:40px; left:0; right:0; text-align:center;
  color:rgba(103,232,249,.4); font-size:7px; letter-spacing:3px;
}
.card-40 .photo-frame {
  position:absolute; top:58px; left:50%; transform:translateX(-50%);
  width:100px; height:120px; border-radius:12px;
  background:rgba(6,182,212,.1); border:2px solid rgba(103,232,249,.3);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.card-40 .ph-icon { font-size:36px; opacity:.3; }
.card-40 .emp-name {
  position:absolute; top:192px; left:0; right:0; text-align:center;
  color:#ecfeff; font-size:17px; font-weight:700;
}
.card-40 .emp-role {
  position:absolute; top:215px; left:0; right:0; text-align:center;
  color:#22d3ee; font-size:9px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
}
.card-40 .ocean-line {
  position:absolute; top:235px; left:50px; right:50px; height:2px;
  background:linear-gradient(90deg, transparent, #22d3ee, transparent);
  box-shadow:0 0 8px rgba(34,211,238,.3);
}
.card-40 .info-center {
  position:absolute; top:252px; left:0; right:0; text-align:center;
  color:rgba(103,232,249,.45); font-size:10px; line-height:1.8;
}
.card-40 .emp-id-badge {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  padding:5px 18px; background:rgba(6,182,212,.12); border:1px solid rgba(103,232,249,.3);
  border-radius:20px; color:#67e8f9; font-size:9px; font-weight:700; letter-spacing:2px;
}

/* ============================================
   DESIGN 41: AURORA BOREALIS
   ============================================ */
.card-41 {
  background:linear-gradient(160deg,#0f172a 0%,#1e1b4b 30%,#134e4a 60%,#064e3b 100%);
}
.card-41 .aurora-glow {
  position:absolute; top:0; left:0; right:0; height:160px;
  background:linear-gradient(180deg, rgba(34,197,94,.08), rgba(139,92,246,.06), transparent);
}
.card-41 .aurora-band {
  position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,#22c55e,#8b5cf6,#06b6d4,#22c55e);
}
.card-41 .star-field {
  position:absolute; inset:0;
  background:
    radial-gradient(1px 1px at 40px 60px, rgba(255,255,255,.25), transparent),
    radial-gradient(1px 1px at 120px 30px, rgba(255,255,255,.15), transparent),
    radial-gradient(1px 1px at 200px 90px, rgba(255,255,255,.2), transparent),
    radial-gradient(1px 1px at 80px 180px, rgba(255,255,255,.12), transparent);
}
.card-41 .org-name {
  position:absolute; top:22px; left:0; right:0; text-align:center;
  color:#86efac; font-size:11px; font-weight:900; letter-spacing:4px; text-transform:uppercase;
}
.card-41 .photo-frame {
  position:absolute; top:55px; left:50%; transform:translateX(-50%);
  width:100px; height:120px; border-radius:12px;
  background:rgba(34,197,94,.06); border:1px solid rgba(134,239,172,.2);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.card-41 .ph-icon { font-size:36px; opacity:.3; }
.card-41 .emp-name {
  position:absolute; top:190px; left:0; right:0; text-align:center;
  color:#d1fae5; font-size:17px; font-weight:700;
}
.card-41 .emp-role {
  position:absolute; top:213px; left:0; right:0; text-align:center;
  color:#a78bfa; font-size:9px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
}
.card-41 .aurora-divider {
  position:absolute; top:233px; left:40px; right:40px; height:2px;
  background:linear-gradient(90deg, #22c55e, #8b5cf6, #06b6d4); opacity:.4;
}
.card-41 .info-center {
  position:absolute; top:250px; left:0; right:0; text-align:center;
  color:rgba(209,250,229,.35); font-size:10px; line-height:1.8;
}
.card-41 .emp-id-badge {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  padding:5px 18px; background:rgba(34,197,94,.1); border:1px solid rgba(134,239,172,.2);
  border-radius:20px; color:#86efac; font-size:9px; font-weight:700; letter-spacing:2px;
}

/* ============================================
   DESIGN 42: CORAL REEF
   ============================================ */
.card-42 {
  background:linear-gradient(180deg,#fff7ed 0%,#ffedd5 25%,#fed7aa 50%,#fdba74 100%);
  border:1px solid #fb923c;
}
.card-42 .coral-circle-1 {
  position:absolute; top:-30px; right:-30px; width:120px; height:120px;
  border-radius:50%; background:rgba(251,146,60,.1);
}
.card-42 .coral-circle-2 {
  position:absolute; bottom:-40px; left:-20px; width:140px; height:140px;
  border-radius:50%; background:rgba(249,115,22,.08);
}
.card-42 .top-accent {
  position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg,#f97316,#fb923c,#fdba74,#fb923c,#f97316);
}
.card-42 .org-name {
  position:absolute; top:22px; left:0; right:0; text-align:center;
  color:#c2410c; font-size:12px; font-weight:900; letter-spacing:3px; text-transform:uppercase;
}
.card-42 .photo-frame {
  position:absolute; top:55px; left:50%; transform:translateX(-50%);
  width:100px; height:120px; border-radius:50%;
  background:rgba(255,255,255,.5); border:3px solid rgba(251,146,60,.4);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 6px 20px rgba(249,115,22,.12);
}
.card-42 .ph-icon { font-size:36px; opacity:.25; }
.card-42 .emp-name {
  position:absolute; top:190px; left:0; right:0; text-align:center;
  color:#7c2d12; font-size:18px; font-weight:700;
}
.card-42 .emp-role {
  position:absolute; top:214px; left:0; right:0; text-align:center;
  color:#ea580c; font-size:9px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
}
.card-42 .coral-divider {
  position:absolute; top:234px; left:50px; right:50px; height:2px;
  background:linear-gradient(90deg, transparent, #fb923c, transparent);
}
.card-42 .info-center {
  position:absolute; top:250px; left:0; right:0; text-align:center;
  color:rgba(124,45,18,.5); font-size:10px; line-height:1.8;
}
.card-42 .emp-id-badge {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  padding:5px 18px; background:rgba(255,255,255,.4); border:1px solid rgba(251,146,60,.3);
  border-radius:20px; color:#c2410c; font-size:9px; font-weight:700; letter-spacing:1px;
}

/* ============================================
   DESIGN 43: LAVENDER DREAMS
   ============================================ */
.card-43 {
  background:linear-gradient(180deg,#faf5ff 0%,#f3e8ff 30%,#e9d5ff 60%,#d8b4fe 100%);
  border:1px solid #c084fc;
}
.card-43 .petal-deco-1 {
  position:absolute; top:20px; right:20px; width:60px; height:60px;
  border-radius:50%; background:rgba(192,132,252,.1);
}
.card-43 .petal-deco-2 {
  position:absolute; bottom:40px; left:15px; width:40px; height:40px;
  border-radius:50%; background:rgba(168,85,247,.08);
}
.card-43 .org-name {
  position:absolute; top:22px; left:0; right:0; text-align:center;
  color:#7e22ce; font-size:12px; font-weight:900; letter-spacing:3px;
  font-family:'Playfair Display',serif;
}
.card-43 .org-sub {
  position:absolute; top:40px; left:0; right:0; text-align:center;
  color:rgba(126,34,206,.4); font-size:7px; letter-spacing:3px; text-transform:uppercase;
}
.card-43 .photo-frame {
  position:absolute; top:58px; left:50%; transform:translateX(-50%);
  width:100px; height:120px; border-radius:12px;
  background:rgba(255,255,255,.5); border:2px solid rgba(192,132,252,.4);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 6px 20px rgba(168,85,247,.1);
}
.card-43 .ph-icon { font-size:36px; opacity:.25; }
.card-43 .emp-name {
  position:absolute; top:192px; left:0; right:0; text-align:center;
  color:#581c87; font-size:17px; font-weight:700; font-family:'Playfair Display',serif;
}
.card-43 .emp-role {
  position:absolute; top:215px; left:0; right:0; text-align:center;
  color:#9333ea; font-size:9px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
}
.card-43 .lavender-line {
  position:absolute; top:235px; left:50px; right:50px; height:1px;
  background:linear-gradient(90deg, transparent, #a855f7, transparent);
}
.card-43 .info-center {
  position:absolute; top:252px; left:0; right:0; text-align:center;
  color:rgba(88,28,135,.4); font-size:10px; line-height:1.8;
}
.card-43 .emp-id-badge {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  padding:5px 18px; background:rgba(255,255,255,.4); border:1px solid rgba(192,132,252,.35);
  border-radius:20px; color:#7e22ce; font-size:9px; font-weight:700; letter-spacing:1px;
}

/* ============================================
   DESIGN 44: GOLDEN HORIZON
   ============================================ */
.card-44 {
  background:linear-gradient(180deg,#fffbeb 0%,#fef3c7 30%,#fde68a 70%,#fbbf24 100%);
}
.card-44 .horizon-glow {
  position:absolute; bottom:0; left:0; right:0; height:100px;
  background:linear-gradient(180deg, transparent, rgba(217,119,6,.15));
}
.card-44 .luxury-border { position:absolute; inset:6px; border:1px solid rgba(146,64,14,.12); border-radius:10px; pointer-events:none; }
.card-44 .org-name {
  position:absolute; top:20px; left:0; right:0; text-align:center;
  color:#92400e; font-size:13px; font-weight:900; letter-spacing:3px;
  font-family:'Playfair Display',serif;
}
.card-44 .org-sub {
  position:absolute; top:40px; left:0; right:0; text-align:center;
  color:rgba(146,64,14,.4); font-size:7px; letter-spacing:3px; text-transform:uppercase;
}
.card-44 .photo-frame {
  position:absolute; top:58px; left:50%; transform:translateX(-50%);
  width:100px; height:120px; border-radius:12px;
  background:rgba(255,255,255,.5); border:2px solid rgba(217,119,6,.3);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 6px 20px rgba(217,119,6,.12);
}
.card-44 .ph-icon { font-size:36px; opacity:.2; }
.card-44 .emp-name {
  position:absolute; top:192px; left:0; right:0; text-align:center;
  color:#451a03; font-size:18px; font-weight:700; font-family:'Playfair Display',serif;
}
.card-44 .emp-role {
  position:absolute; top:216px; left:0; right:0; text-align:center;
  color:#b45309; font-size:9px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
}
.card-44 .gold-bar {
  position:absolute; top:236px; left:50px; right:50px; height:2px;
  background:linear-gradient(90deg, transparent, #d97706, transparent);
}
.card-44 .info-center {
  position:absolute; top:252px; left:0; right:0; text-align:center;
  color:rgba(69,26,3,.5); font-size:10px; line-height:1.8;
}
.card-44 .emp-id-badge {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  padding:5px 18px; background:rgba(255,255,255,.4); border:1px solid rgba(217,119,6,.3);
  border-radius:20px; color:#92400e; font-size:9px; font-weight:700; letter-spacing:1px;
}

/* ============================================
   DESIGN 45: ELECTRIC INDIGO
   ============================================ */
.card-45 {
  background:linear-gradient(180deg,#eef2ff 0%,#e0e7ff 25%,#c7d2fe 50%,#a5b4fc 100%);
  border:1px solid #818cf8;
}
.card-45 .circuit-grid {
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(99,102,241,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.04) 1px, transparent 1px);
  background-size:25px 25px;
}
.card-45 .neon-top { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#6366f1,#818cf8,#6366f1); }
.card-45 .neon-bottom { position:absolute; bottom:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#818cf8,#6366f1,#818cf8); }
.card-45 .org-name {
  position:absolute; top:22px; left:0; right:0; text-align:center;
  color:#3730a3; font-size:12px; font-weight:900; letter-spacing:4px; text-transform:uppercase;
}
.card-45 .org-sub {
  position:absolute; top:40px; left:0; right:0; text-align:center;
  color:rgba(55,48,163,.4); font-size:7px; letter-spacing:3px;
}
.card-45 .photo-frame {
  position:absolute; top:58px; left:50%; transform:translateX(-50%);
  width:100px; height:120px; border-radius:12px;
  background:rgba(255,255,255,.5); border:2px solid rgba(99,102,241,.35);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 6px 20px rgba(99,102,241,.12);
}
.card-45 .ph-icon { font-size:36px; opacity:.25; }
.card-45 .emp-name {
  position:absolute; top:192px; left:0; right:0; text-align:center;
  color:#1e1b4b; font-size:17px; font-weight:700;
}
.card-45 .emp-role {
  position:absolute; top:215px; left:0; right:0; text-align:center;
  color:#4f46e5; font-size:9px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
}
.card-45 .indigo-line {
  position:absolute; top:235px; left:40px; right:40px; height:2px;
  background:linear-gradient(90deg, transparent, #6366f1, transparent);
  box-shadow:0 0 6px rgba(99,102,241,.2);
}
.card-45 .info-center {
  position:absolute; top:252px; left:0; right:0; text-align:center;
  color:rgba(30,27,75,.4); font-size:10px; line-height:1.8;
}
.card-45 .emp-id-badge {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  padding:5px 18px; background:rgba(255,255,255,.4); border:1px solid rgba(99,102,241,.3);
  border-radius:20px; color:#3730a3; font-size:9px; font-weight:700; letter-spacing:1px;
}

/* ============================================
   PORTRAIT SET 1 — ID GRID CARDS
   ============================================ */
.id-card {
  width:250px; height:400px;
  border-radius:14px;
  position:relative;
  overflow:hidden;
  font-family:'Poppins',sans-serif;
  box-shadow:0 12px 40px rgba(0,0,0,.15);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:20px 15px 14px;
}

/* US Corporate */
.id-us-corporate { background:linear-gradient(180deg,#0f172a,#1e293b); color:#e2e8f0; }
.id-us-corporate .top-ribbon { position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,#3b82f6,#6366f1); }
.id-us-corporate .brand { font-size:13px; font-weight:900; color:#60a5fa; letter-spacing:3px; margin-top:10px; }
.id-us-corporate .photo { width:80px; height:95px; border-radius:8px; background:#334155; margin:14px auto 10px; }
.id-us-corporate h3 { font-size:15px; font-weight:700; color:#e2e8f0; }
.id-us-corporate p { font-size:9px; color:#94a3b8; letter-spacing:1px; }
.id-us-corporate .info { font-size:8px; color:#64748b; margin-top:8px; }
.id-us-corporate .barcode { width:100px; height:20px; background:repeating-linear-gradient(90deg,#475569 0 2px,transparent 2px 4px); margin-top:auto; border-radius:2px; }

/* UK University */
.id-uk-university { background:linear-gradient(180deg,#1e1b4b,#312e81); color:#e0e7ff; }
.id-uk-university .crest { position:absolute; top:10px; right:14px; font-size:20px; color:#818cf8; font-weight:900; }
.id-uk-university .photo { width:75px; height:90px; border-radius:50%; background:#3730a3; margin:20px auto 10px; }
.id-uk-university h3 { font-size:15px; font-weight:700; }
.id-uk-university p { font-size:9px; color:#a5b4fc; }
.id-uk-university .info { font-size:8px; color:#818cf8; margin-top:8px; }
.id-uk-university .chip { width:34px; height:24px; background:linear-gradient(135deg,#c4b5fd,#a78bfa); border-radius:4px; margin-top:auto; }

/* Canada Health */
.id-canada-health { background:linear-gradient(180deg,#fff,#f0fdf4); border:1px solid #bbf7d0; color:#064e3b; }
.id-canada-health .maple { position:absolute; top:10px; right:14px; font-size:18px; color:#22c55e; }
.id-canada-health .brand { font-size:11px; font-weight:900; color:#15803d; letter-spacing:2px; margin-top:6px; }
.id-canada-health .photo { width:80px; height:95px; border-radius:8px; background:#dcfce7; margin:14px auto 10px; }
.id-canada-health h3 { font-size:15px; font-weight:700; color:#064e3b; }
.id-canada-health p { font-size:9px; color:#16a34a; }
.id-canada-health .info { font-size:8px; color:#4ade80; margin-top:8px; }

/* Security */
.id-security { background:linear-gradient(180deg,#18181b,#27272a); color:#fafafa; }
.id-security .security-strip { position:absolute; top:0; left:0; right:0; padding:6px; text-align:center; background:#dc2626; color:#fff; font-size:8px; font-weight:900; letter-spacing:3px; }
.id-security .photo { width:80px; height:95px; border-radius:8px; background:#3f3f46; margin:30px auto 10px; }
.id-security h3 { font-size:15px; font-weight:700; }
.id-security p { font-size:9px; color:#a1a1aa; }
.id-security .info { font-size:8px; color:#ef4444; margin-top:8px; font-weight:700; }

/* Tech */
.id-tech { background:#0a0a0a; color:#e0ffe8; }
.id-tech .circuit { position:absolute; inset:0; background-image:linear-gradient(rgba(0,255,136,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,136,.04) 1px,transparent 1px); background-size:20px 20px; }
.id-tech .brand { font-size:12px; font-weight:900; color:#00ff88; letter-spacing:3px; margin-top:8px; position:relative; z-index:1; }
.id-tech .photo { width:80px; height:95px; border-radius:8px; background:#111; border:1px solid rgba(0,255,136,.2); margin:14px auto 10px; position:relative; z-index:1; }
.id-tech h3 { font-size:15px; font-weight:700; position:relative; z-index:1; }
.id-tech p { font-size:9px; color:#00ff88; position:relative; z-index:1; }
.id-tech .info { font-size:8px; color:rgba(0,255,136,.4); margin-top:8px; position:relative; z-index:1; font-family:monospace; }

/* Government */
.id-government { background:linear-gradient(180deg,#fff,#fef3c7); border:1px solid #fde68a; color:#1c1917; }
.id-government .seal { position:absolute; top:10px; right:14px; font-size:22px; color:#d97706; }
.id-government .brand { font-size:11px; font-weight:900; color:#92400e; letter-spacing:2px; margin-top:6px; }
.id-government .photo { width:80px; height:95px; border-radius:8px; background:#fef9c3; margin:14px auto 10px; }
.id-government h3 { font-size:15px; font-weight:700; }
.id-government p { font-size:9px; color:#a16207; }
.id-government .info { font-size:8px; color:#ca8a04; margin-top:8px; }

/* Event VIP */
.id-event { background:linear-gradient(180deg,#4c1d95,#7c3aed); color:#f5f3ff; }
.id-event .event-band { position:absolute; top:0; left:0; right:0; padding:6px; text-align:center; background:rgba(0,0,0,.2); color:#e9d5ff; font-size:9px; font-weight:900; letter-spacing:3px; }
.id-event .photo { width:80px; height:95px; border-radius:50%; background:rgba(255,255,255,.1); margin:28px auto 10px; }
.id-event h3 { font-size:15px; font-weight:700; }
.id-event p { font-size:9px; color:#c4b5fd; }
.id-event .info { font-size:8px; color:rgba(255,255,255,.5); margin-top:8px; }

/* Minimal Premium */
.id-minimal-premium { background:#fff; border:1px solid #e5e7eb; color:#111827; }
.id-minimal-premium .gold-line { position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#d4af37,#f5d769,#d4af37); }
.id-minimal-premium .photo { width:80px; height:95px; border-radius:50%; background:#f3f4f6; border:2px solid #d4af37; margin:20px auto 10px; }
.id-minimal-premium h3 { font-size:15px; font-weight:700; }
.id-minimal-premium p { font-size:9px; color:#6b7280; }
.id-minimal-premium .info { font-size:8px; color:#d4af37; margin-top:8px; font-weight:700; }

/* School Modern */
.id-school-modern { background:linear-gradient(180deg,#eff6ff,#fff); border:1px solid #bfdbfe; color:#1e3a5f; }
.id-school-modern .brand { font-size:11px; font-weight:900; color:#1d4ed8; letter-spacing:2px; margin-top:6px; }
.id-school-modern .photo { width:80px; height:95px; border-radius:8px; background:#dbeafe; margin:14px auto 10px; }
.id-school-modern h3 { font-size:15px; font-weight:700; }
.id-school-modern p { font-size:9px; color:#3b82f6; }
.id-school-modern .info { font-size:8px; color:#60a5fa; margin-top:8px; }

/* Staff Luxury */
.id-staff-luxury { background:linear-gradient(180deg,#1c1917,#292524); color:#fef3c7; }
.id-staff-luxury .brand { font-size:12px; font-weight:900; color:#d4af37; letter-spacing:3px; margin-top:8px; font-family:'Playfair Display',serif; }
.id-staff-luxury .photo { width:80px; height:95px; border-radius:8px; background:#44403c; margin:14px auto 10px; border:1px solid rgba(212,175,55,.3); }
.id-staff-luxury h3 { font-size:15px; font-weight:700; }
.id-staff-luxury p { font-size:9px; color:#d4af37; }
.id-staff-luxury .info { font-size:8px; color:rgba(212,175,55,.5); margin-top:8px; }

/* ============================================
   PORTRAIT SET 2 — P-CARD
   ============================================ */
.p-card {
  width:250px; height:400px;
  border-radius:14px;
  position:relative;
  overflow:hidden;
  font-family:'Poppins',sans-serif;
  box-shadow:0 12px 40px rgba(0,0,0,.15);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:18px 15px 14px;
}

/* p21: Executive Director */
.p21 { background:linear-gradient(180deg,#0f172a,#1e293b); color:#e2e8f0; }
.p21 .topbar { position:absolute; top:0; left:0; right:0; height:28px; background:linear-gradient(90deg,#6366f1,#8b5cf6); display:flex; align-items:center; justify-content:center; z-index:1; }
.p21 .logo { font-size:11px; font-weight:900; color:#fff; letter-spacing:3px; position:absolute; top:0; left:0; right:0; height:28px; display:flex; align-items:center; justify-content:center; z-index:2; }
.p21 .photo { width:80px; height:95px; border-radius:8px; background:#334155; margin:40px auto 10px; }
.p21 .name { font-size:15px; font-weight:700; color:#e2e8f0; text-align:center; margin-top:6px; }
.p21 .role { font-size:9px; color:#818cf8; letter-spacing:1px; text-align:center; margin-top:2px; }
.p21 .idtag { font-size:8px; color:#64748b; margin-top:10px; text-align:center; }
.p21 .footline { position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#6366f1,#8b5cf6); }

/* p22: Oxford Academic */
.p22 { background:linear-gradient(180deg,#1e1b4b,#312e81); color:#e0e7ff; }
.p22 .badge { position:absolute; top:10px; right:14px; font-size:16px; color:#818cf8; font-weight:900; }
.p22 .logo { font-size:10px; font-weight:900; color:#c4b5fd; letter-spacing:2px; margin-top:6px; }
.p22 .photo { width:75px; height:90px; border-radius:50%; background:#3730a3; margin:14px auto 10px; }
.p22 .name { font-size:15px; font-weight:700; text-align:center; }
.p22 .role { font-size:9px; color:#a5b4fc; text-align:center; }
.p22 .idtag { font-size:8px; color:#818cf8; margin-top:8px; text-align:center; }
.p22 .mini-chip { width:30px; height:20px; background:linear-gradient(135deg,#c4b5fd,#a78bfa); border-radius:4px; margin-top:auto; }

/* p23: Medical */
.p23 { background:linear-gradient(180deg,#fff,#f0fdf4); border:1px solid #bbf7d0; color:#064e3b; }
.p23 .logo { font-size:10px; font-weight:900; color:#15803d; letter-spacing:2px; margin-top:6px; }
.p23 .cross { position:absolute; top:8px; right:14px; font-size:22px; color:#22c55e; font-weight:700; }
.p23 .photo { width:80px; height:95px; border-radius:8px; background:#dcfce7; margin:14px auto 10px; }
.p23 .name { font-size:15px; font-weight:700; color:#064e3b; text-align:center; }
.p23 .role { font-size:9px; color:#16a34a; text-align:center; }
.p23 .idtag { font-size:8px; color:#4ade80; margin-top:8px; text-align:center; }
.p23 .qr { width:40px; height:40px; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:6px; margin-top:auto; }

/* p24: Canada Staff */
.p24 { background:linear-gradient(180deg,#fef2f2,#fff); border:1px solid #fecdd3; color:#881337; }
.p24 .logo { font-size:10px; font-weight:900; color:#be123c; letter-spacing:2px; margin-top:6px; }
.p24 .leaf { position:absolute; top:8px; right:14px; font-size:18px; color:#f43f5e; }
.p24 .photo { width:80px; height:95px; border-radius:8px; background:#ffe4e6; margin:14px auto 10px; }
.p24 .name { font-size:15px; font-weight:700; color:#881337; text-align:center; }
.p24 .role { font-size:9px; color:#e11d48; text-align:center; }
.p24 .idtag { font-size:8px; color:#fb7185; margin-top:8px; text-align:center; }

/* p25: Cloud Architect */
.p25 { background:#0a0a0a; color:#e0ffe8; }
.p25 .logo { font-size:11px; font-weight:900; color:#00ff88; letter-spacing:3px; margin-top:8px; position:relative; z-index:1; }
.p25 .photo { width:80px; height:95px; border-radius:8px; background:#111; border:1px solid rgba(0,255,136,.2); margin:14px auto 10px; position:relative; z-index:1; }
.p25 .name { font-size:15px; font-weight:700; text-align:center; position:relative; z-index:1; }
.p25 .role { font-size:9px; color:#00ff88; text-align:center; position:relative; z-index:1; }
.p25 .idtag { font-size:8px; color:rgba(0,255,136,.4); margin-top:8px; text-align:center; position:relative; z-index:1; }
.p25 .circuit-dot { position:absolute; width:4px; height:4px; border-radius:50%; background:rgba(0,255,136,.3); }
.p25 .dot1 { bottom:20px; left:20px; }
.p25 .dot2 { bottom:40px; right:30px; }
.p25 .dot3 { bottom:60px; left:40px; }

/* p26x: Security */
.p26x { background:linear-gradient(180deg,#18181b,#27272a); color:#fafafa; }
.p26x .secure-band { position:absolute; top:0; left:0; right:0; padding:6px; text-align:center; background:#dc2626; color:#fff; font-size:8px; font-weight:900; letter-spacing:3px; }
.p26x .photo { width:80px; height:95px; border-radius:8px; background:#3f3f46; margin:28px auto 10px; }
.p26x .name { font-size:15px; font-weight:700; text-align:center; }
.p26x .role { font-size:9px; color:#a1a1aa; text-align:center; }
.p26x .idtag { font-size:8px; color:#ef4444; margin-top:8px; text-align:center; font-weight:700; }

/* p27: Government */
.p27 { background:linear-gradient(180deg,#fff,#fef3c7); border:1px solid #fde68a; color:#1c1917; }
.p27 .logo { font-size:10px; font-weight:900; color:#92400e; letter-spacing:2px; margin-top:6px; }
.p27 .seal { position:absolute; top:8px; right:14px; font-size:20px; color:#d97706; }
.p27 .photo { width:80px; height:95px; border-radius:8px; background:#fef9c3; margin:14px auto 10px; }
.p27 .name { font-size:15px; font-weight:700; text-align:center; }
.p27 .role { font-size:9px; color:#a16207; text-align:center; }
.p27 .idtag { font-size:8px; color:#ca8a04; margin-top:8px; text-align:center; }

/* p28: VIP */
.p28 { background:linear-gradient(180deg,#4c1d95,#7c3aed); color:#f5f3ff; }
.p28 .ribbon { position:absolute; top:0; left:0; right:0; padding:6px; text-align:center; background:rgba(0,0,0,.2); color:#e9d5ff; font-size:9px; font-weight:900; letter-spacing:3px; }
.p28 .photo { width:80px; height:95px; border-radius:50%; background:rgba(255,255,255,.1); margin:28px auto 10px; }
.p28 .name { font-size:15px; font-weight:700; text-align:center; }
.p28 .role { font-size:9px; color:#c4b5fd; text-align:center; }
.p28 .idtag { font-size:8px; color:rgba(255,255,255,.5); margin-top:8px; text-align:center; }

/* p29: School */
.p29 { background:linear-gradient(180deg,#eff6ff,#fff); border:1px solid #bfdbfe; color:#1e3a5f; }
.p29 .logo { font-size:10px; font-weight:900; color:#1d4ed8; letter-spacing:2px; margin-top:6px; }
.p29 .photo { width:80px; height:95px; border-radius:8px; background:#dbeafe; margin:14px auto 10px; }
.p29 .name { font-size:15px; font-weight:700; text-align:center; }
.p29 .role { font-size:9px; color:#3b82f6; text-align:center; }
.p29 .idtag { font-size:8px; color:#60a5fa; margin-top:8px; text-align:center; }
.p29 .corner-shape { position:absolute; bottom:0; right:0; width:40px; height:40px; background:linear-gradient(135deg,transparent 50%,#dbeafe 50%); }

/* p30: Black Elite */
.p30 { background:linear-gradient(180deg,#1c1917,#292524); color:#fef3c7; }
.p30 .lux-line { position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#d4af37,#f5d769,#d4af37); }
.p30 .logo { font-size:11px; font-weight:900; color:#d4af37; letter-spacing:3px; margin-top:8px; font-family:'Playfair Display',serif; }
.p30 .photo { width:80px; height:95px; border-radius:8px; background:#44403c; border:1px solid rgba(212,175,55,.3); margin:14px auto 10px; }
.p30 .name { font-size:15px; font-weight:700; text-align:center; }
.p30 .role { font-size:9px; color:#d4af37; text-align:center; }
.p30 .idtag { font-size:8px; color:rgba(212,175,55,.5); margin-top:8px; text-align:center; }

/* ===== EDITOR OVERLAY ===== */
.editor-overlay {
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:#f1f5f9;
  flex-direction:column;
}
.editor-overlay.active { display:flex; }

.editor-topbar {
  height:52px;
  background:#fff;
  display:flex;
  align-items:center;
  padding:0 16px;
  gap:12px;
  border-bottom:1px solid #e2e8f0;
  flex-shrink:0;
  overflow-x:auto;
}
.editor-back {
  background:none;
  border:1px solid #cbd5e1;
  color:#334155;
  padding:6px 14px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.editor-back:hover { background:#f8fafc; }
.editor-title {
  flex:1;
  color:#0f172a;
  font-size:15px;
  font-weight:700;
  letter-spacing:.5px;
}
.editor-btn {
  background:#6366f1;
  color:#fff;
  border:none;
  padding:7px 16px;
  border-radius:8px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.editor-btn:hover { background:#4f46e5; }
.editor-save-btn { background:#10b981; border-color:#10b981; }
.editor-save-btn:hover { background:#059669; }
.editor-theme-btn {
  background:none;
  border:1px solid #cbd5e1;
  color:#334155;
  padding:6px 12px;
  border-radius:8px;
  font-size:14px;
  cursor:pointer;
}
.editor-theme-btn:hover { background:#f8fafc; }
.editor-canvas-area {
  flex:1;
  display:flex;
  align-items:stretch;
  overflow:hidden;
  padding:0;
}
/* Topbar tool buttons */
.et-btn {
  padding:6px 12px;
  border-radius:8px;
  border:1px solid #e2e8f0;
  background:#fff;
  color:#334155;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
.et-btn:hover { background:#f1f5f9; }
.et-btn.et-active { background:#6366f1; color:#fff; border-color:#6366f1; }
.et-color-wrap { display:inline-flex; align-items:center; gap:4px; }
.et-color-wrap span { font-size:10px; font-weight:700; color:#64748b; }
.et-color-wrap input { width:28px; height:22px; border:1px solid #cbd5e1; border-radius:4px; cursor:pointer; padding:0; }
.et-sep { width:1px; height:24px; background:#e2e8f0; margin:0 4px; flex-shrink:0; }

/* CENTER: Card */
.editor-center {
  flex:1;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:auto;
  padding:15px 20px;
}
/* RIGHT: Sheet */
.editor-right-panel {
  width:280px;
  display:flex;
  flex-direction:column;
  border-left:1px solid #e2e8f0;
  flex-shrink:0;
  overflow:hidden;
}
.add-to-sheet-btn {
  padding:8px 12px;
  border-radius:8px;
  border:none;
  background:#6366f1;
  color:#fff;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.add-to-sheet-btn:hover { background:#4f46e5; }

/* Editor card wrap */
.editor-card-wrap {
  position:relative;
  box-shadow:0 10px 40px rgba(0,0,0,.12);
  border-radius:16px;
  flex-shrink:0;
}
.editor-card-wrap > * {
  transform:none !important;
  transform-origin:top left;
}
.editor-card-wrap [data-editable]:hover {
  outline:2px dashed rgba(99,102,241,.6);
  outline-offset:2px;
  cursor:pointer;
}
.editor-card-wrap .photo-frame:hover,
.editor-card-wrap .photo:hover,
.editor-card-wrap .profile-photo:hover {
  outline:2px dashed rgba(99,102,241,.6);
  outline-offset:2px;
  cursor:pointer;
  opacity:.85;
}
.editor-card-wrap [data-editable].moving {
  outline:2px solid #f59e0b !important;
  cursor:grab;
}
.editor-card-wrap [data-editable].moving:active { cursor:grabbing; }
.editor-card-back > * {
  transform:none !important;
  transform-origin:top left;
}
.editor-card-back .back-card-inner {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px;
  font-family:'Poppins',sans-serif;
}
.editor-card-back .back-card-inner .back-placeholder {
  color:#94a3b8;
  font-size:13px;
  text-align:center;
  margin-top:10px;
}

/* Saved panel */
.saved-panel {
  width:110px;
  background:#fff;
  border-right:1px solid #e2e8f0;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  padding:8px;
}
.saved-panel-title { font-size:12px; font-weight:800; color:#0f172a; text-align:center; margin:0 0 8px; }
.saved-panel-cards { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding:4px 0; }
.saved-panel-actions { display:flex; gap:4px; margin-top:8px; }
.saved-panel-actions .saved-btn { flex:1; text-align:center; font-size:10px; padding:5px 4px; }
.saved-btn { padding:6px 14px; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; border:1px solid #cbd5e1; background:#fff; color:#334155; }
.saved-btn:hover { background:#f1f5f9; }
.saved-btn-primary { background:#6366f1; color:#fff; border-color:#6366f1; }
.saved-btn-primary:hover { background:#4f46e5; }
.saved-btn-danger { background:#fff; color:#ef4444; border-color:#fca5a5; }
.saved-btn-danger:hover { background:#fef2f2; }
.saved-card-item { flex-shrink:0; position:relative; cursor:pointer; border-radius:10px; overflow:hidden; border:2px solid transparent; transition:border-color .15s; }
.saved-card-item:hover { border-color:#6366f1; }
.saved-card-item.selected { border-color:#6366f1; }
.saved-card-item canvas { display:block; border-radius:8px; }
.saved-card-cb { position:absolute; top:6px; left:6px; width:20px; height:20px; accent-color:#6366f1; cursor:pointer; z-index:2; }
.saved-card-num { position:absolute; bottom:4px; right:6px; background:rgba(0,0,0,.5); color:#fff; font-size:9px; font-weight:700; padding:2px 6px; border-radius:4px; }

/* Sheet Preview Panel */
.sheet-preview-panel { width:100%; background:#fff; border-top:1px solid #e2e8f0; display:flex; flex-direction:column; padding:10px; flex:1; overflow:auto; }
.sheet-preview-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.sheet-preview-title { font-size:13px; font-weight:800; color:#0f172a; }
.sheet-card-count { font-size:11px; font-weight:700; color:#6366f1; background:rgba(99,102,241,.08); padding:3px 10px; border-radius:20px; }
.sheet-preview-box { flex:1; display:flex; align-items:flex-start; justify-content:center; overflow:auto; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:8px; }
.sheet-preview-box canvas { width:100%; height:auto; border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.sheet-page-nav { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; }
.sheet-page-info { font-size:11px; font-weight:700; color:#334155; min-width:70px; text-align:center; }
.sheet-preview-actions { display:flex; gap:8px; margin-top:8px; }
.sheet-preview-actions .saved-btn { flex:1; text-align:center; font-size:11px; padding:6px 8px; }

/* ===== TEXT POPUP ===== */
.text-popup {
  display:none;
  position:fixed;
  z-index:10001;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.1);
  flex-direction:column;
  gap:3px;
  min-width:130px;
}
.text-popup.active { display:flex; }
.tp-btn { background:none; border:none; color:#334155; padding:8px 14px; text-align:left; font-size:13px; font-weight:600; border-radius:6px; cursor:pointer; white-space:nowrap; }
.tp-btn:hover { background:#f1f5f9; }
.tp-delete { color:#ef4444; }
.tp-delete:hover { background:#fef2f2; }
.tp-delete-all { color:#dc2626; font-size:10px; border-top:1px solid #e2e8f0; margin-top:2px; padding-top:6px; }
.tp-delete-all:hover { background:#fef2f2; }

/* ===== EDIT POPUP ===== */
.edit-popup {
  display:none;
  position:fixed;
  z-index:10002;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.1);
  min-width:220px;
  flex-direction:column;
  gap:10px;
}
.edit-popup.active { display:flex; }
.ep-row { display:flex; align-items:center; gap:10px; }
.ep-row label { color:#64748b; font-size:12px; font-weight:700; min-width:38px; }
.ep-input { flex:1; background:#f8fafc; border:1px solid #e2e8f0; color:#0f172a; padding:6px 10px; border-radius:6px; font-size:13px; outline:none; resize:vertical; font-family:inherit; min-height:36px; }
.ep-input:focus { border-color:#6366f1; }
.ep-size-ctrl { display:flex; align-items:center; gap:8px; color:#0f172a; font-size:13px; font-weight:600; }
.ep-size-btn { width:28px; height:28px; border-radius:6px; border:1px solid #cbd5e1; background:none; color:#334155; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ep-size-btn:hover { background:#f1f5f9; }
.ep-color { width:36px; height:28px; border:1px solid #cbd5e1; border-radius:6px; cursor:pointer; background:none; padding:1px; }
.ep-done { background:#6366f1; color:#fff; border:none; padding:7px; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; margin-top:4px; }
.ep-done:hover { background:#4f46e5; }

/* ===== SIZE POPUP ===== */
.size-popup-overlay { display:none; position:fixed; inset:0; z-index:10005; background:rgba(0,0,0,.5); align-items:center; justify-content:center; }
.size-popup-overlay.active { display:flex; }
.size-popup { background:#fff; border-radius:14px; padding:20px; min-width:340px; max-width:400px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.size-popup-title { font-size:16px; font-weight:800; color:#0f172a; margin-bottom:12px; text-align:center; }
.size-current { background:#f1f5f9; border:2px solid #6366f1; border-radius:10px; padding:10px 14px; margin-bottom:12px; font-size:13px; font-weight:700; color:#6366f1; text-align:center; }
.size-list { display:flex; flex-direction:column; gap:4px; max-height:400px; overflow-y:auto; margin-bottom:14px; }
.size-option { padding:8px 12px; border-radius:8px; border:1px solid #e2e8f0; background:#fff; color:#334155; font-size:12px; font-weight:600; cursor:pointer; text-align:left; display:flex; justify-content:space-between; }
.size-option:hover { background:#f1f5f9; }
.size-option.selected { background:#6366f1; color:#fff; border-color:#6366f1; }
.size-option .size-dim { font-weight:400; opacity:.7; }
.size-popup-btns { display:flex; gap:8px; }

/* ===== QR / BARCODE POPUP ===== */
.qr-popup, .barcode-popup { display:none; position:fixed; z-index:10002; background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:14px; box-shadow:0 10px 30px rgba(0,0,0,.12); min-width:260px; width:280px; flex-direction:column; }
.qr-popup textarea { min-height:180px; resize:vertical; gap:10px; }
.qr-popup.active, .barcode-popup.active { display:flex; }
.qr-popup-title { font-size:13px; font-weight:800; color:#0f172a; margin-bottom:2px; }
.back-color-wrap { display:inline-flex; align-items:center; }

/* ===== QR/BARCODE DELETE TOOLTIP ===== */
.qr-delete-tip { position:fixed; z-index:100000; background:#fff; border:1px solid #e2e8f0; border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.12); padding:4px; }
.qr-del-btn { display:block; padding:6px 14px; border:none; background:none; color:#ef4444; font-size:12px; font-weight:700; cursor:pointer; border-radius:6px; white-space:nowrap; }
.qr-del-btn:hover { background:#fef2f2; }

/* QR/Barcode hover outline in editor */
.editor-card-wrap [data-qr-added]:hover,
.editor-card-wrap [data-bar-added]:hover,
.editor-card-wrap .qr-box:hover {
  outline:2px dashed #ef4444;
  outline-offset:2px;
}

/* ===== PROCESSING LOADER ===== */
.process-loader { display:none; position:fixed; inset:0; z-index:99999; background:rgba(15,23,42,.6); backdrop-filter:blur(4px); align-items:center; justify-content:center; flex-direction:column; gap:16px; }
.process-loader.active { display:flex; }
.process-loader .spinner { width:44px; height:44px; border:4px solid rgba(255,255,255,.2); border-top-color:#6366f1; border-radius:50%; animation:loaderSpin .7s linear infinite; }
@keyframes loaderSpin { to { transform:rotate(360deg); } }
.process-loader .loader-text { color:#fff; font-size:14px; font-weight:600; font-family:'Poppins',sans-serif; letter-spacing:.5px; }

/* ===== DARK MODE ===== */
.editor-overlay.dark { background:#1e293b; }
.editor-overlay.dark .editor-topbar { background:#0f172a; border-bottom-color:rgba(255,255,255,.08); }
.editor-overlay.dark .editor-back { border-color:rgba(255,255,255,.15); color:#e2e8f0; }
.editor-overlay.dark .editor-back:hover { background:rgba(255,255,255,.06); }
.editor-overlay.dark .editor-title { color:#e2e8f0; }
.editor-overlay.dark .editor-theme-btn { border-color:rgba(255,255,255,.15); color:#e2e8f0; }
.editor-overlay.dark .editor-theme-btn:hover { background:rgba(255,255,255,.06); }
.editor-overlay.dark .editor-card-wrap { box-shadow:0 20px 60px rgba(0,0,0,.5); }
.editor-overlay.dark .et-btn { background:#1e293b; border-color:rgba(255,255,255,.1); color:#e2e8f0; }
.editor-overlay.dark .et-btn:hover { background:#334155; }
.editor-overlay.dark .et-btn.et-active { background:#6366f1; color:#fff; border-color:#6366f1; }
.editor-overlay.dark .et-sep { background:rgba(255,255,255,.1); }
.editor-overlay.dark .et-color-wrap span { color:#94a3b8; }
.editor-overlay.dark .et-color-wrap input { border-color:rgba(255,255,255,.15); }
.editor-overlay.dark .editor-right-panel { border-left-color:rgba(255,255,255,.08); }
.editor-overlay.dark .text-popup { background:#1e293b; border-color:rgba(255,255,255,.12); box-shadow:0 10px 30px rgba(0,0,0,.4); }
.editor-overlay.dark .tp-btn { color:#e2e8f0; }
.editor-overlay.dark .tp-btn:hover { background:rgba(255,255,255,.08); }
.editor-overlay.dark .tp-delete { color:#f87171; }
.editor-overlay.dark .tp-delete:hover { background:rgba(248,113,113,.1); }
.editor-overlay.dark .tp-delete-all { color:#f87171; border-top-color:rgba(255,255,255,.1); }
.editor-overlay.dark .tp-delete-all:hover { background:rgba(248,113,113,.1); }
.editor-overlay.dark .edit-popup { background:#1e293b; border-color:rgba(255,255,255,.12); box-shadow:0 10px 30px rgba(0,0,0,.4); }
.editor-overlay.dark .ep-row label { color:#94a3b8; }
.editor-overlay.dark .ep-input { background:#0f172a; border-color:rgba(255,255,255,.12); color:#e2e8f0; }
.editor-overlay.dark .ep-size-ctrl { color:#e2e8f0; }
.editor-overlay.dark .ep-size-btn { border-color:rgba(255,255,255,.15); color:#e2e8f0; }
.editor-overlay.dark .ep-size-btn:hover { background:rgba(255,255,255,.08); }
.editor-overlay.dark .ep-color { border-color:rgba(255,255,255,.15); }
.editor-overlay.dark .saved-panel { background:#0f172a; border-right-color:rgba(255,255,255,.08); }
.editor-overlay.dark .saved-panel-title { color:#e2e8f0; }
.editor-overlay.dark .saved-btn { background:#1e293b; border-color:rgba(255,255,255,.12); color:#e2e8f0; }
.editor-overlay.dark .saved-btn:hover { background:#334155; }
.editor-overlay.dark .saved-btn-primary { background:#6366f1; border-color:#6366f1; color:#fff; }
.editor-overlay.dark .saved-btn-danger { background:#1e293b; color:#f87171; border-color:rgba(248,113,113,.3); }
.editor-overlay.dark .sheet-preview-panel { background:#0f172a; border-top-color:rgba(255,255,255,.08); }
.editor-overlay.dark .sheet-preview-title { color:#e2e8f0; }
.editor-overlay.dark .sheet-card-count { background:rgba(99,102,241,.15); color:#a5b4fc; }
.editor-overlay.dark .sheet-preview-box { background:#1e293b; border-color:rgba(255,255,255,.06); }
.editor-overlay.dark .add-to-sheet-btn { background:#6366f1; }
.editor-overlay.dark .sheet-page-info { color:#94a3b8; }
.editor-overlay.dark .qr-popup, .editor-overlay.dark .barcode-popup { background:#1e293b; border-color:rgba(255,255,255,.12); box-shadow:0 10px 30px rgba(0,0,0,.4); }
.editor-overlay.dark .qr-popup-title { color:#e2e8f0; }
.editor-overlay.dark .qr-popup .ep-input, .editor-overlay.dark .barcode-popup .ep-input { background:#0f172a; border-color:rgba(255,255,255,.12); color:#e2e8f0; }
.editor-overlay.dark .back-color-wrap span { color:#94a3b8 !important; }
.editor-overlay.dark .back-color-wrap input { border-color:rgba(255,255,255,.15) !important; }
.editor-overlay.dark .qr-delete-tip { background:#1e293b; border-color:rgba(255,255,255,.12); }
.editor-overlay.dark .qr-del-btn { color:#f87171; }
.editor-overlay.dark .qr-del-btn:hover { background:rgba(248,113,113,.1); }

/* Portrait photo hard fix */
.editor-card-wrap .photo-frame,
.editor-card-wrap .photo,
.editor-card-wrap .profile-photo { overflow:hidden !important; }
.editor-card-wrap .photo-frame > img,
.editor-card-wrap .photo > img,
.editor-card-wrap .profile-photo > img {
  position:absolute !important;
  transform:none !important;
  object-fit:fill !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  z-index:20 !important;
  display:block !important;
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  /* Topbar */
  .editor-topbar {
    height:auto; min-height:44px; flex-wrap:wrap; padding:6px 8px; gap:4px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .editor-back { padding:5px 10px; font-size:12px; }
  .et-btn { font-size:10px; padding:5px 8px; }
  .editor-btn { font-size:11px; padding:5px 12px; }
  .editor-save-btn { font-size:11px; padding:5px 10px; }
  .editor-theme-btn { padding:5px 8px; font-size:12px; }
  .editor-title { display:none; }
  .et-sep { display:none; }

  /* Saved panel hidden, right panel becomes bottom bar */
  .saved-panel { display:none !important; }
  .editor-canvas-area { flex-direction:column !important; }
  .editor-right-panel {
    width:100% !important; border-left:none !important;
    border-top:1px solid #e2e8f0;
    flex-direction:row !important; flex-wrap:wrap;
    max-height:360px; overflow-y:auto;
    padding:8px !important;
    gap:6px;
  }
  .sheet-preview-panel {
    width:100% !important; flex-direction:column !important;
    align-items:stretch; gap:6px; padding:0 !important;
    border-top:none !important;
  }
  .sheet-preview-header { margin-bottom:4px !important; }
  .sheet-preview-title { font-size:12px !important; }
  .sheet-preview-box { width:100%; max-height:200px; padding:4px !important; }
  .sheet-page-nav { margin-top:4px !important; }
  .sheet-preview-actions { margin-top:0 !important; gap:4px; }
  .sheet-preview-actions .saved-btn { font-size:10px !important; padding:5px 8px !important; }
  .add-to-sheet-btn { width:auto !important; margin-bottom:0 !important; font-size:11px; padding:6px 12px !important; }

  /* Card area full width */
  .editor-canvas-area { padding:0; }
  .editor-center { flex:1; padding:10px; overflow:auto; justify-content:center; align-items:flex-start; }
  .editor-card-wrap { margin:0 auto; }

  /* Popups: fixed bottom center */
  .text-popup {
    position:fixed !important;
    left:50% !important; bottom:12px !important; top:auto !important;
    transform:translateX(-50%);
    flex-direction:row !important; min-width:auto;
    border-radius:12px; padding:4px 6px;
    box-shadow:0 -4px 20px rgba(0,0,0,.15);
  }
  .tp-btn { padding:8px 10px; font-size:12px; }
  .tp-delete-all { border-top:none; border-left:1px solid #e2e8f0; margin-top:0; padding-top:8px; }

  .edit-popup {
    position:fixed !important;
    left:10px !important; right:10px !important; bottom:12px !important; top:auto !important;
    transform:none; min-width:auto; width:auto;
    border-radius:14px;
    box-shadow:0 -4px 20px rgba(0,0,0,.15);
  }

  .qr-popup, .barcode-popup {
    position:fixed !important;
    left:10px !important; right:10px !important; bottom:12px !important; top:auto !important;
    transform:none; width:auto; min-width:auto;
    border-radius:14px;
    box-shadow:0 -4px 20px rgba(0,0,0,.15);
  }

  .size-popup { min-width:auto; width:calc(100vw - 32px); max-width:400px; }

  .qr-delete-tip {
    position:fixed !important;
    left:50% !important; bottom:60px !important; top:auto !important;
    transform:translateX(-50%);
  }
}
@media(max-width:400px){
  .et-btn { font-size:9px; padding:4px 6px; }
}