* { margin:0; padding:0; box-sizing:border-box; }
body { background:#f1f5f9; font-family:'Poppins',sans-serif; padding:40px 20px; min-height:100vh; }
h1 { text-align:center; color:#e2e8f0; font-size:28px; margin-bottom:10px; }
p.sub { text-align:center; color:#94a3b8; margin-bottom:40px; font-size:14px; }
/* ===== DESIGN GRID ===== */
.design-grid-wrap {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(420px, 1fr));
  gap:24px;
  padding:10px 0 30px;
  width:100%;
}
.sample-wrap {
  width:100%;
  height:220px;
  overflow:hidden;
  border-radius:14px;
  position:relative;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  border:1px solid #e2e8f0;
}
.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 > .card,
.sample-wrap > .land-card {
  transform:scale(.85);
  transform-origin:top center;
  margin:0 auto;
}
.sample-label { display:none; }

@media(max-width:900px){
  .design-grid-wrap { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
}
@media(max-width:600px){
  .design-grid-wrap { grid-template-columns:repeat(2,1fr); gap:8px; padding:8px; }
  /* Landscape card=400x250 → fit in ~168px wide container */
  .sample-wrap {
    height:110px; overflow:hidden; border-radius:10px; padding:0;
    position:relative;
  }
  .sample-wrap > .card, .sample-wrap > .land-card {
    position:absolute !important;
    left:50% !important; top:4px !important;
    transform:translateX(-50%) scale(.42) !important;
    transform-origin:top center !important;
    margin:0 !important;
  }
}
@media(max-width:380px){
  .sample-wrap { height:95px; }
  .sample-wrap > .card, .sample-wrap > .land-card {
    transform:translateX(-50%) scale(.36) !important;
  }
}

/* old containers - flatten */
.samples,
.id-grid,
.landscape-grid {
  display:contents;
}

/* All editable content above decorative layers */
.card .org-name, .card .org-sub, .card .emp-name, .card .emp-role,
.card .emp-id-badge, .card .emp-details, .card .info-block,
.card .footer-bar { z-index:3; }
.card .photo-frame { z-index:5 !important; }

/* ===== COMMON CARD BASE ===== */
.card {
  width:400px; height:250px;
  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;
}

/* ============================================
   DESIGN 1: ROYAL NAVY GOLD
   ============================================ */
.card-1 {
  background: linear-gradient(135deg, #0a1628 0%, #1a2744 40%, #0f1d35 100%);
}
.card-1::before {
  content:'';
  position:absolute;
  top:-60px; right:-60px;
  width:220px; height:220px;
  background: radial-gradient(circle, rgba(212,175,55,.15) 0%, transparent 70%);
  border-radius:50%;
}
.card-1::after {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:4px;
  background: linear-gradient(90deg, #d4af37, #f5d769, #d4af37);
}
.card-1 .accent-line {
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
}
.card-1 .side-strip {
  position:absolute;
  left:0; top:0; bottom:0;
  width:6px;
  background: linear-gradient(180deg, #d4af37, #b8941f, #d4af37);
}
.card-1 .corner-ornament {
  position:absolute;
  width:40px; height:40px;
  border: 2px solid rgba(212,175,55,.3);
}
.card-1 .corner-ornament.tl { top:12px; left:16px; border-right:none; border-bottom:none; border-radius:4px 0 0 0; }
.card-1 .corner-ornament.br { bottom:12px; right:16px; border-left:none; border-top:none; border-radius:0 0 4px 0; }
.card-1 .org-name {
  position:absolute;
  top:18px; left:70px;
  color:#d4af37;
  font-size:14px;
  font-weight:800;
  letter-spacing:3px;
  text-transform:uppercase;
  font-family:'Montserrat',sans-serif;
}
.card-1 .org-sub {
  position:absolute;
  top:38px; left:70px;
  color:rgba(212,175,55,.5);
  font-size:8px;
  letter-spacing:5px;
  text-transform:uppercase;
}
.card-1 .photo-frame {
  position:absolute;
  left:24px; top:65px;
  width:90px; height:110px;
  border-radius:10px;
  background: linear-gradient(135deg, #1e3050, #162540);
  border: 2px solid rgba(212,175,55,.4);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-1 .photo-frame .ph-icon { font-size:32px; opacity:.4; }
.card-1 .info-block {
  position:absolute;
  left:130px; top:68px;
}
.card-1 .emp-name {
  color:#f0e6c8;
  font-size:18px;
  font-weight:700;
  font-family:'Playfair Display',serif;
  line-height:1.1;
}
.card-1 .emp-role {
  color:#d4af37;
  font-size:10px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-top:4px;
}
.card-1 .emp-id-badge {
  display:inline-block;
  margin-top:8px;
  padding:3px 12px;
  background: rgba(212,175,55,.12);
  border:1px solid rgba(212,175,55,.3);
  border-radius:20px;
  color:#d4af37;
  font-size:9px;
  font-weight:700;
  letter-spacing:2px;
}
.card-1 .emp-details {
  margin-top:8px;
  color:#7a8ba8;
  font-size:9px;
  line-height:1.7;
}
.card-1 .emp-details span { color:#c8d6e5; }
.card-1 .footer-bar {
  position:absolute;
  bottom:10px; left:24px; right:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.card-1 .footer-bar .website {
  color:rgba(212,175,55,.4);
  font-size:7px;
  letter-spacing:2px;
  text-transform:uppercase;
}
.card-1 .qr-box {
  width:40px; height:40px;
  background: rgba(212,175,55,.08);
  border:1px solid rgba(212,175,55,.2);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(212,175,55,.4);
}

/* ============================================
   DESIGN 2: MODERN GRADIENT WAVE
   ============================================ */
.card-2 {
  background: linear-gradient(160deg, #667eea 0%, #764ba2 100%);
}
.card-2 .wave {
  position:absolute;
  bottom:0; left:0; right:0;
  height:100px;
}
.card-2 .wave svg { width:100%; height:100%; display:block; }
.card-2 .circle-deco {
  position:absolute;
  border-radius:50%;
  background: rgba(255,255,255,.06);
}
.card-2 .circle-deco.c1 { width:180px; height:180px; top:-60px; right:-40px; }
.card-2 .circle-deco.c2 { width:100px; height:100px; top:30px; right:20px; }
.card-2 .circle-deco.c3 { width:60px; height:60px; bottom:60px; left:-20px; }
.card-2 .dots-pattern {
  position:absolute;
  top:14px; right:14px;
  display:grid;
  grid-template-columns: repeat(5,1fr);
  gap:4px;
}
.card-2 .dots-pattern span {
  width:3px; height:3px;
  border-radius:50%;
  background:rgba(255,255,255,.2);
}
.card-2 .org-strip {
  position:absolute;
  top:0; left:0; right:0;
  height:50px;
  background: rgba(0,0,0,.15);
  display:flex; align-items:center; padding-left:20px; gap:10px;
}
.card-2 .org-strip .logo-circle {
  width:32px; height:32px;
  border-radius:50%;
  background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
}
.card-2 .org-strip .org-text {
  color:#fff;
  font-size:14px;
  font-weight:800;
  letter-spacing:1px;
}
.card-2 .photo-frame {
  position:absolute;
  right:24px; top:64px;
  width:88px; height:105px;
  border-radius:50%;
  background: rgba(255,255,255,.12);
  border:3px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-2 .photo-frame .ph-icon { font-size:28px; opacity:.5; color:#fff; }
.card-2 .info-block {
  position:absolute;
  left:20px; top:62px;
}
.card-2 .emp-name {
  color:#fff;
  font-size:20px;
  font-weight:800;
  line-height:1.1;
}
.card-2 .emp-role {
  color:rgba(255,255,255,.7);
  font-size:11px;
  font-weight:500;
  margin-top:2px;
}
.card-2 .emp-id-badge {
  display:inline-block;
  margin-top:8px;
  padding:3px 14px;
  background:rgba(255,255,255,.18);
  border-radius:20px;
  color:#fff;
  font-size:10px;
  font-weight:700;
  backdrop-filter:blur(4px);
}
.card-2 .emp-details {
  margin-top:6px;
  color:rgba(255,255,255,.6);
  font-size:9px;
  line-height:1.8;
}
.card-2 .emp-details span { color:#fff; }
.card-2 .footer-bar {
  position:absolute;
  bottom:10px; left:20px; right:20px;
  display:flex; justify-content:space-between; align-items:center;
  z-index:2;
}
.card-2 .footer-bar .website { color:rgba(255,255,255,.4); font-size:7px; letter-spacing:1px; }
.card-2 .qr-box {
  width:36px; height:36px;
  background:rgba(255,255,255,.15);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(255,255,255,.5);
}

/* ============================================
   DESIGN 3: CORPORATE GLASS
   ============================================ */
.card-3 {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}
.card-3 .glass-panel {
  position:absolute;
  top:8px; left:8px; right:8px; bottom:8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
  backdrop-filter:blur(2px);
}
.card-3 .accent-strip {
  position:absolute;
  left:8px; top:8px; bottom:8px;
  width:50px;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  border-radius:10px 0 0 10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.card-3 .accent-strip .v-text {
  color:rgba(255,255,255,.7);
  font-size:8px;
  letter-spacing:4px;
  text-transform:uppercase;
  font-weight:700;
  white-space:nowrap;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}
.card-3 .hex-pattern {
  position:absolute;
  top:10px; right:10px;
  opacity:.06;
  font-size:120px;
  color:#fff;
  line-height:1;
}
.card-3 .photo-frame {
  position:absolute;
  left:72px; top:50px;
  width:82px; height:100px;
  border-radius:10px;
  background: linear-gradient(135deg, #1e3a5f, #162d4a);
  border:2px solid rgba(59,130,246,.3);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-3 .photo-frame .ph-icon { font-size:28px; opacity:.4; }
.card-3 .org-name {
  position:absolute;
  top:16px; left:72px;
  color:#60a5fa;
  font-size:13px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
}
.card-3 .org-tagline {
  position:absolute;
  top:34px; left:72px;
  color:#475569;
  font-size:8px;
  letter-spacing:3px;
  text-transform:uppercase;
}
.card-3 .info-block {
  position:absolute;
  left:168px; top:52px;
}
.card-3 .emp-name {
  color:#e2e8f0;
  font-size:17px;
  font-weight:700;
  line-height:1.1;
}
.card-3 .emp-role {
  color:#3b82f6;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-top:3px;
}
.card-3 .divider {
  width:30px; height:2px;
  background: linear-gradient(90deg, #3b82f6, transparent);
  margin-top:6px;
}
.card-3 .emp-details {
  margin-top:6px;
  color:#64748b;
  font-size:8.5px;
  line-height:1.8;
}
.card-3 .emp-details span { color:#94a3b8; }
.card-3 .footer-bar {
  position:absolute;
  bottom:14px; left:20px; right:18px;
  display:flex; justify-content:space-between; align-items:center;
}
.card-3 .emp-id-badge {
  padding:3px 10px;
  background:rgba(59,130,246,.1);
  border:1px solid rgba(59,130,246,.25);
  border-radius:6px;
  color:#60a5fa;
  font-size:9px;
  font-weight:700;
  letter-spacing:1px;
}
.card-3 .qr-box {
  width:38px; height:38px;
  background:rgba(59,130,246,.06);
  border:1px solid rgba(59,130,246,.15);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(59,130,246,.4);
}

/* ============================================
   DESIGN 4: NEON TECH
   ============================================ */
.card-4 {
  background: #0a0a0a;
}
.card-4 .grid-bg {
  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;
}
.card-4 .neon-line-top {
  position:absolute;
  top:0; left:30px; right:30px;
  height:2px;
  background: linear-gradient(90deg, transparent, #00ff88, transparent);
  box-shadow: 0 0 10px #00ff88, 0 0 20px rgba(0,255,136,.3);
}
.card-4 .neon-line-bottom {
  position:absolute;
  bottom:0; left:60px; right:60px;
  height:1px;
  background: linear-gradient(90deg, transparent, #00ff88, transparent);
  opacity:.4;
}
.card-4 .corner-bracket {
  position:absolute;
  width:20px; height:20px;
  border-color:#00ff88;
  border-style:solid;
  border-width:0;
  opacity:.4;
}
.card-4 .corner-bracket.tl { top:10px; left:10px; border-top-width:2px; border-left-width:2px; }
.card-4 .corner-bracket.tr { top:10px; right:10px; border-top-width:2px; border-right-width:2px; }
.card-4 .corner-bracket.bl { bottom:10px; left:10px; border-bottom-width:2px; border-left-width:2px; }
.card-4 .corner-bracket.br { bottom:10px; right:10px; border-bottom-width:2px; border-right-width:2px; }
.card-4 .photo-frame {
  position:absolute;
  left:22px; top:55px;
  width:85px; height:105px;
  border-radius:8px;
  background:#111;
  border:1px solid rgba(0,255,136,.3);
  box-shadow: 0 0 15px rgba(0,255,136,.1), inset 0 0 15px rgba(0,255,136,.03);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-4 .photo-frame .ph-icon { font-size:28px; opacity:.3; filter:hue-rotate(100deg); }
.card-4 .scan-line {
  position:absolute;
  left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,255,136,.6), transparent);
  animation: scanMove 3s ease-in-out infinite;
}
@keyframes scanMove { 0%,100%{top:10%} 50%{top:90%} }
.card-4 .org-name {
  position:absolute;
  top:16px; left:22px;
  color:#00ff88;
  font-size:13px;
  font-weight:800;
  letter-spacing:4px;
  text-transform:uppercase;
  text-shadow: 0 0 10px rgba(0,255,136,.4);
}
.card-4 .org-sub {
  position:absolute;
  top:35px; left:22px;
  color:rgba(0,255,136,.3);
  font-size:7px;
  letter-spacing:5px;
  text-transform:uppercase;
}
.card-4 .info-block {
  position:absolute;
  left:122px; top:58px;
}
.card-4 .emp-name {
  color:#e0ffe8;
  font-size:18px;
  font-weight:700;
  line-height:1.1;
}
.card-4 .emp-role {
  color:#00ff88;
  font-size:9px;
  font-weight:600;
  letter-spacing:3px;
  text-transform:uppercase;
  margin-top:3px;
  text-shadow:0 0 8px rgba(0,255,136,.3);
}
.card-4 .emp-id-badge {
  display:inline-block;
  margin-top:8px;
  padding:2px 10px;
  border:1px solid rgba(0,255,136,.3);
  border-radius:4px;
  color:#00ff88;
  font-size:9px;
  font-weight:700;
  font-family:monospace;
  letter-spacing:2px;
}
.card-4 .emp-details {
  margin-top:6px;
  color:#4a6a52;
  font-size:8.5px;
  line-height:1.8;
  font-family:monospace;
}
.card-4 .emp-details span { color:#8affa8; }
.card-4 .footer-bar {
  position:absolute;
  bottom:12px; left:22px; right:16px;
  display:flex; justify-content:space-between; align-items:center;
}
.card-4 .footer-bar .status {
  color:rgba(0,255,136,.4);
  font-size:7px;
  letter-spacing:2px;
  font-family:monospace;
  text-transform:uppercase;
}
.card-4 .footer-bar .status::before {
  content:'';
  display:inline-block;
  width:5px; height:5px;
  border-radius:50%;
  background:#00ff88;
  margin-right:5px;
  box-shadow:0 0 6px #00ff88;
}
.card-4 .qr-box {
  width:38px; height:38px;
  border:1px solid rgba(0,255,136,.2);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(0,255,136,.3);
  box-shadow:0 0 10px rgba(0,255,136,.05);
}

/* ============================================
   DESIGN 5: LUXURY MARBLE ROSE
   ============================================ */
.card-5 {
  background: linear-gradient(135deg, #fdf2f8, #fce7f3, #fff1f2, #fdf2f8);
}
.card-5 .marble-texture {
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(244,114,182,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(168,85,247,.06) 0%, transparent 40%),
    radial-gradient(ellipse at 60% 80%, rgba(251,146,60,.05) 0%, transparent 40%);
}
.card-5 .gold-border {
  position:absolute;
  inset:6px;
  border-radius:10px;
  border:1px solid rgba(180,130,80,.25);
}
.card-5 .accent-top {
  position:absolute;
  top:0; left:0; right:0;
  height:55px;
  background: linear-gradient(135deg, #831843, #9f1239, #7c2d12);
  border-radius:14px 14px 0 0;
}
.card-5 .accent-top::after {
  content:'';
  position:absolute;
  bottom:-15px; left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  border-top:15px solid #9f1239;
}
.card-5 .org-name {
  position:absolute;
  top:12px; left:0; right:0;
  text-align:center;
  color:#fecdd3;
  font-size:14px;
  font-weight:800;
  letter-spacing:3px;
  text-transform:uppercase;
  font-family:'Montserrat',sans-serif;
}
.card-5 .org-sub {
  position:absolute;
  top:32px; left:0; right:0;
  text-align:center;
  color:rgba(254,205,211,.4);
  font-size:7px;
  letter-spacing:4px;
  text-transform:uppercase;
}
.card-5 .photo-frame {
  position:absolute;
  left:24px; top:72px;
  width:85px; height:105px;
  border-radius:10px;
  background: linear-gradient(135deg, #fce7f3, #fdf2f8);
  border:2px solid rgba(180,130,80,.3);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-shadow: 0 4px 15px rgba(131,24,67,.1);
}
.card-5 .photo-frame .ph-icon { font-size:28px; opacity:.3; }
.card-5 .info-block {
  position:absolute;
  left:124px; top:74px;
}
.card-5 .emp-name {
  color:#4a1023;
  font-size:18px;
  font-weight:800;
  font-family:'Playfair Display',serif;
  line-height:1.1;
}
.card-5 .emp-role {
  color:#9f1239;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:2px;
  margin-top:3px;
}
.card-5 .ornament-line {
  width:40px; height:1px;
  background: linear-gradient(90deg, #b4824f, rgba(180,130,80,.2));
  margin-top:6px;
}
.card-5 .emp-details {
  margin-top:6px;
  color:#9e6a7a;
  font-size:9px;
  line-height:1.8;
}
.card-5 .emp-details span { color:#6b2140; }
.card-5 .emp-id-badge {
  display:inline-block;
  margin-top:6px;
  padding:2px 12px;
  background:rgba(159,18,57,.08);
  border:1px solid rgba(159,18,57,.2);
  border-radius:20px;
  color:#9f1239;
  font-size:8px;
  font-weight:700;
  letter-spacing:2px;
}
.card-5 .footer-bar {
  position:absolute;
  bottom:12px; left:24px; right:18px;
  display:flex; justify-content:space-between; align-items:center;
}
.card-5 .footer-bar .website {
  color:rgba(159,18,57,.25);
  font-size:7px;
  letter-spacing:2px;
  text-transform:uppercase;
}
.card-5 .qr-box {
  width:36px; height:36px;
  background:rgba(159,18,57,.04);
  border:1px solid rgba(180,130,80,.2);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(159,18,57,.3);
}

/* ============================================
   DESIGN 6: AURORA BOREALIS
   ============================================ */
.card-6 {
  background:#050d1a;
  overflow:hidden;
}
.card-6 .aurora {
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 70% -10%, rgba(0,255,170,.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 30% 20%, rgba(100,80,255,.12) 0%, transparent 50%),
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(0,200,255,.1) 0%, transparent 50%);
  filter:blur(8px);
}
.card-6 .stars {
  position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 55% 15%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 75% 55%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 90% 35%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 20% 85%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 60% 90%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 85% 80%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 45% 45%, rgba(255,255,255,.35), transparent);
}
.card-6 .horizon {
  position:absolute;
  bottom:0; left:0; right:0; height:60px;
  background: linear-gradient(180deg, transparent, rgba(0,30,60,.6));
}
.card-6 .org-name {
  position:absolute;
  top:16px; left:20px;
  color:rgba(180,255,220,.9);
  font-size:15px;
  font-weight:800;
  letter-spacing:4px;
  text-transform:uppercase;
  font-family:'Montserrat',sans-serif;
  text-shadow:0 0 20px rgba(0,255,170,.3);
}
.card-6 .org-sub {
  position:absolute;
  top:36px; left:20px;
  color:rgba(140,200,255,.35);
  font-size:7.5px;
  letter-spacing:5px;
  text-transform:uppercase;
}
.card-6 .photo-frame {
  position:absolute;
  left:20px; top:60px;
  width:88px; height:108px;
  border-radius:12px;
  background:rgba(10,25,50,.7);
  border:1.5px solid rgba(0,255,170,.2);
  box-shadow:0 0 25px rgba(0,255,170,.08), inset 0 0 20px rgba(0,200,255,.04);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-6 .photo-frame .ph-icon { font-size:30px; opacity:.3; }
.card-6 .info-block { position:absolute; left:124px; top:62px; }
.card-6 .emp-name {
  color:#e0fff0;
  font-size:19px;
  font-weight:700;
  font-family:'Playfair Display',serif;
  text-shadow:0 0 15px rgba(0,255,170,.15);
}
.card-6 .emp-role {
  color:rgba(100,220,180,.7);
  font-size:10px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-top:3px;
}
.card-6 .glow-divider {
  width:50px; height:1.5px;
  margin-top:7px;
  background:linear-gradient(90deg, rgba(0,255,170,.5), rgba(100,80,255,.3), transparent);
  border-radius:2px;
  box-shadow:0 0 6px rgba(0,255,170,.3);
}
.card-6 .emp-details {
  margin-top:7px;
  color:rgba(140,200,255,.45);
  font-size:8.5px;
  line-height:1.8;
}
.card-6 .emp-details span { color:rgba(200,255,230,.8); }
.card-6 .emp-id-badge {
  display:inline-block;
  margin-top:7px;
  padding:3px 12px;
  background:rgba(0,255,170,.06);
  border:1px solid rgba(0,255,170,.18);
  border-radius:20px;
  color:rgba(0,255,170,.7);
  font-size:8px;
  font-weight:700;
  letter-spacing:2px;
}
.card-6 .footer-bar {
  position:absolute;
  bottom:10px; left:20px; right:16px;
  display:flex; justify-content:space-between; align-items:center;
  z-index:2;
}
.card-6 .footer-bar .website { color:rgba(140,200,255,.25); font-size:7px; letter-spacing:2px; }
.card-6 .qr-box {
  width:38px; height:38px;
  background:rgba(0,255,170,.04);
  border:1px solid rgba(0,255,170,.15);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(0,255,170,.3);
}

/* ============================================
   DESIGN 7: DIAMOND CUT (GEOMETRIC LUXURY)
   ============================================ */
.card-7 {
  background:linear-gradient(160deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.card-7 .diamond-shape {
  position:absolute;
  width:200px; height:200px;
  top:-50px; right:-50px;
  background:linear-gradient(135deg, rgba(228,195,100,.06), rgba(228,195,100,.02));
  transform:rotate(45deg);
  border:1px solid rgba(228,195,100,.08);
}
.card-7 .diamond-shape.d2 {
  width:140px; height:140px;
  top:30px; right:-20px;
  border-color:rgba(228,195,100,.05);
  background:rgba(228,195,100,.02);
}
.card-7 .diamond-shape.d3 {
  width:80px; height:80px;
  top:-20px; left:40%;
  border-color:rgba(228,195,100,.04);
  background:transparent;
}
.card-7 .top-accent {
  position:absolute;
  top:0; left:0;
  width:55%; height:4px;
  background:linear-gradient(90deg, #e4c364, #c9a84c, transparent);
}
.card-7 .bottom-accent {
  position:absolute;
  bottom:0; right:0;
  width:40%; height:3px;
  background:linear-gradient(270deg, #e4c364, transparent);
}
.card-7 .photo-frame {
  position:absolute;
  left:22px; top:45px;
  width:90px; height:110px;
  background:rgba(228,195,100,.04);
  border:2px solid rgba(228,195,100,.2);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  clip-path:polygon(8% 0, 92% 0, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0 92%, 0 8%);
}
.card-7 .photo-frame .ph-icon { font-size:30px; opacity:.3; }
.card-7 .org-name {
  position:absolute;
  top:14px; left:22px;
  color:#e4c364;
  font-size:12px;
  font-weight:800;
  letter-spacing:5px;
  text-transform:uppercase;
  font-family:'Montserrat',sans-serif;
}
.card-7 .org-tagline {
  position:absolute;
  top:30px; left:22px;
  color:rgba(228,195,100,.3);
  font-size:7px;
  letter-spacing:3px;
  text-transform:uppercase;
}
.card-7 .info-block { position:absolute; left:128px; top:48px; }
.card-7 .emp-name {
  color:#f0e8d0;
  font-size:18px;
  font-weight:700;
  font-family:'Playfair Display',serif;
  line-height:1.1;
}
.card-7 .emp-role {
  color:#e4c364;
  font-size:9px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  margin-top:3px;
}
.card-7 .gold-line {
  width:35px; height:2px;
  background:linear-gradient(90deg, #e4c364, rgba(228,195,100,.15));
  margin-top:6px;
}
.card-7 .emp-details {
  margin-top:6px;
  color:rgba(200,200,220,.4);
  font-size:8.5px;
  line-height:1.8;
}
.card-7 .emp-details span { color:rgba(240,232,208,.7); }
.card-7 .emp-id-badge {
  display:inline-block;
  margin-top:6px;
  padding:3px 14px;
  border:1px solid rgba(228,195,100,.25);
  color:#e4c364;
  font-size:8px;
  font-weight:800;
  letter-spacing:3px;
  clip-path:polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
  background:rgba(228,195,100,.06);
}
.card-7 .footer-bar {
  position:absolute;
  bottom:12px; left:22px; right:16px;
  display:flex; justify-content:space-between; align-items:center;
}
.card-7 .footer-bar .website { color:rgba(228,195,100,.2); font-size:7px; letter-spacing:2px; }
.card-7 .qr-box {
  width:38px; height:38px;
  border:1px solid rgba(228,195,100,.15);
  background:rgba(228,195,100,.03);
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(228,195,100,.3);
  clip-path:polygon(8% 0, 92% 0, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0 92%, 0 8%);
}

/* ============================================
   DESIGN 8: SUNSET HORIZON
   ============================================ */
.card-8 {
  background:linear-gradient(180deg, #1a0533 0%, #2d1b69 25%, #e44d26 55%, #ff8c42 75%, #ffd166 100%);
}
.card-8 .sun-circle {
  position:absolute;
  bottom:55px; left:50%;
  transform:translateX(-50%);
  width:140px; height:140px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,200,80,.25) 0%, rgba(255,140,50,.1) 40%, transparent 70%);
}
.card-8 .cloud-layer {
  position:absolute;
  bottom:40px; left:0; right:0; height:50px;
  background:
    radial-gradient(ellipse 100px 25px at 20% 80%, rgba(0,0,0,.12) 0%, transparent 100%),
    radial-gradient(ellipse 120px 20px at 60% 60%, rgba(0,0,0,.08) 0%, transparent 100%),
    radial-gradient(ellipse 90px 22px at 85% 90%, rgba(0,0,0,.1) 0%, transparent 100%);
}
.card-8 .horizon-line {
  position:absolute;
  bottom:40px; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
}
.card-8 .ground {
  position:absolute;
  bottom:0; left:0; right:0; height:40px;
  background:linear-gradient(180deg, rgba(10,5,20,.5), rgba(10,5,20,.8));
}
.card-8 .org-name {
  position:absolute;
  top:14px; left:0; right:0;
  text-align:center;
  color:rgba(255,220,180,.9);
  font-size:15px;
  font-weight:900;
  letter-spacing:5px;
  text-transform:uppercase;
  font-family:'Montserrat',sans-serif;
  text-shadow:0 2px 15px rgba(228,77,38,.4);
}
.card-8 .org-sub {
  position:absolute;
  top:34px; left:0; right:0;
  text-align:center;
  color:rgba(255,200,150,.3);
  font-size:7.5px;
  letter-spacing:4px;
  text-transform:uppercase;
}
.card-8 .photo-frame {
  position:absolute;
  left:22px; top:56px;
  width:86px; height:106px;
  border-radius:50% 50% 10px 10px;
  background:rgba(30,10,50,.5);
  border:2px solid rgba(255,180,100,.25);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.card-8 .photo-frame .ph-icon { font-size:28px; opacity:.35; color:#ffd166; }
.card-8 .info-block { position:absolute; left:124px; top:56px; }
.card-8 .emp-name {
  color:#fff5e6;
  font-size:18px;
  font-weight:700;
  font-family:'Playfair Display',serif;
  text-shadow:0 2px 8px rgba(0,0,0,.3);
}
.card-8 .emp-role {
  color:rgba(255,200,120,.7);
  font-size:10px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-top:2px;
}
.card-8 .warm-divider {
  width:40px; height:2px;
  margin-top:6px;
  background:linear-gradient(90deg, #ff8c42, #ffd166, transparent);
  border-radius:2px;
}
.card-8 .emp-details {
  margin-top:6px;
  color:rgba(255,220,180,.4);
  font-size:8.5px;
  line-height:1.8;
}
.card-8 .emp-details span { color:rgba(255,240,210,.7); }
.card-8 .emp-id-badge {
  display:inline-block;
  margin-top:6px;
  padding:3px 12px;
  background:rgba(255,140,66,.12);
  border:1px solid rgba(255,180,100,.25);
  border-radius:20px;
  color:rgba(255,200,120,.8);
  font-size:8px;
  font-weight:700;
  letter-spacing:2px;
}
.card-8 .footer-bar {
  position:absolute;
  bottom:8px; left:22px; right:16px;
  display:flex; justify-content:space-between; align-items:center;
  z-index:2;
}
.card-8 .footer-bar .website { color:rgba(255,200,150,.25); font-size:7px; letter-spacing:2px; }
.card-8 .qr-box {
  width:36px; height:36px;
  background:rgba(255,180,100,.08);
  border:1px solid rgba(255,180,100,.2);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(255,200,120,.4);
}

/* ============================================
   DESIGN 9: CARBON FIBER EXECUTIVE
   ============================================ */
.card-9 {
  background:#111;
}
.card-9 .carbon {
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 4px);
  background-size:4px 4px;
}
.card-9 .red-stripe {
  position:absolute;
  top:0; left:0; right:0; height:52px;
  background:linear-gradient(135deg, #b91c1c, #dc2626, #ef4444);
  clip-path:polygon(0 0, 100% 0, 100% 75%, 85% 100%, 0 100%);
}
.card-9 .stripe-shadow {
  position:absolute;
  top:44px; left:0;
  width:88%;
  height:12px;
  background:linear-gradient(180deg, rgba(0,0,0,.3), transparent);
}
.card-9 .logo-diamond {
  position:absolute;
  top:10px; left:18px;
  width:30px; height:30px;
  background:rgba(255,255,255,.15);
  transform:rotate(45deg);
  border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
}
.card-9 .logo-diamond span {
  transform:rotate(-45deg);
  color:#fff;
  font-weight:900;
  font-size:12px;
}
.card-9 .org-name {
  position:absolute;
  top:14px; left:60px;
  color:#fff;
  font-size:16px;
  font-weight:900;
  letter-spacing:3px;
  text-transform:uppercase;
  font-family:'Montserrat',sans-serif;
}
.card-9 .org-sub {
  position:absolute;
  top:34px; left:60px;
  color:rgba(255,255,255,.5);
  font-size:7px;
  letter-spacing:4px;
  text-transform:uppercase;
}
.card-9 .photo-frame {
  position:absolute;
  left:18px; top:66px;
  width:88px; height:108px;
  border-radius:8px;
  background:#1a1a1a;
  border:2px solid rgba(220,38,38,.3);
  box-shadow:0 4px 20px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-9 .photo-frame .ph-icon { font-size:30px; opacity:.25; }
.card-9 .info-block { position:absolute; left:122px; top:62px; }
.card-9 .emp-name {
  color:#f0f0f0;
  font-size:18px;
  font-weight:800;
  font-family:'Montserrat',sans-serif;
  line-height:1.1;
}
.card-9 .emp-role {
  color:#ef4444;
  font-size:9px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  margin-top:3px;
}
.card-9 .red-line {
  width:30px; height:3px;
  background:linear-gradient(90deg, #dc2626, transparent);
  margin-top:6px;
  border-radius:2px;
}
.card-9 .emp-details {
  margin-top:6px;
  color:rgba(255,255,255,.3);
  font-size:8.5px;
  line-height:1.8;
}
.card-9 .emp-details span { color:rgba(255,255,255,.6); }
.card-9 .emp-id-badge {
  display:inline-block;
  margin-top:6px;
  padding:3px 14px;
  background:rgba(220,38,38,.1);
  border:1px solid rgba(220,38,38,.3);
  border-radius:4px;
  color:#ef4444;
  font-size:9px;
  font-weight:800;
  letter-spacing:2px;
  font-family:'Montserrat',sans-serif;
}
.card-9 .footer-bar {
  position:absolute;
  bottom:12px; left:18px; right:16px;
  display:flex; justify-content:space-between; align-items:center;
}
.card-9 .footer-bar .website { color:rgba(255,255,255,.15); font-size:7px; letter-spacing:2px; }
.card-9 .qr-box {
  width:38px; height:38px;
  background:rgba(220,38,38,.06);
  border:1px solid rgba(220,38,38,.2);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(220,38,38,.4);
}

/* ============================================
   DESIGN 10: OCEAN DEPTH
   ============================================ */
.card-10 {
  background:linear-gradient(180deg, #001220 0%, #003050 35%, #004e78 55%, #00779e 75%, #009bb8 100%);
}
.card-10 .bubble {
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.12), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
}
.card-10 .bubble.b1 { width:30px; height:30px; bottom:50px; left:45%; }
.card-10 .bubble.b2 { width:18px; height:18px; bottom:75px; left:52%; }
.card-10 .bubble.b3 { width:12px; height:12px; bottom:95px; left:48%; }
.card-10 .bubble.b4 { width:22px; height:22px; bottom:35px; right:30px; }
.card-10 .bubble.b5 { width:8px; height:8px; bottom:60px; right:40px; }
.card-10 .light-rays {
  position:absolute;
  top:-20px; left:30%;
  width:200px; height:120px;
  background:
    linear-gradient(170deg, rgba(255,255,255,.04) 0%, transparent 60%),
    linear-gradient(160deg, rgba(0,200,255,.03) 0%, transparent 50%);
}
.card-10 .wave-top {
  position:absolute;
  top:0; left:0; right:0; height:55px;
  overflow:hidden;
}
.card-10 .wave-top svg { width:100%; height:100%; }
.card-10 .org-name {
  position:absolute;
  top:8px; left:20px;
  color:rgba(150,230,255,.85);
  font-size:14px;
  font-weight:800;
  letter-spacing:4px;
  text-transform:uppercase;
  font-family:'Montserrat',sans-serif;
  z-index:2;
}
.card-10 .org-sub {
  position:absolute;
  top:27px; left:20px;
  color:rgba(100,200,240,.3);
  font-size:7.5px;
  letter-spacing:4px;
  text-transform:uppercase;
  z-index:2;
}
.card-10 .photo-frame {
  position:absolute;
  right:20px; top:56px;
  width:86px; height:106px;
  border-radius:50%;
  background:rgba(0,40,70,.6);
  border:2px solid rgba(0,180,220,.25);
  box-shadow:0 0 25px rgba(0,155,184,.15), inset 0 0 15px rgba(0,100,150,.1);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-10 .photo-frame .ph-icon { font-size:28px; opacity:.3; color:#80d8ff; }
.card-10 .info-block { position:absolute; left:20px; top:56px; }
.card-10 .emp-name {
  color:#e0f7ff;
  font-size:19px;
  font-weight:700;
  font-family:'Playfair Display',serif;
  text-shadow:0 2px 10px rgba(0,50,80,.4);
}
.card-10 .emp-role {
  color:rgba(0,200,255,.65);
  font-size:10px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-top:2px;
}
.card-10 .water-line {
  width:40px; height:2px;
  margin-top:6px;
  background:linear-gradient(90deg, rgba(0,200,255,.5), rgba(0,155,184,.2), transparent);
  border-radius:2px;
}
.card-10 .emp-details {
  margin-top:6px;
  color:rgba(150,210,240,.4);
  font-size:8.5px;
  line-height:1.8;
}
.card-10 .emp-details span { color:rgba(200,240,255,.7); }
.card-10 .emp-id-badge {
  display:inline-block;
  margin-top:6px;
  padding:3px 12px;
  background:rgba(0,155,184,.1);
  border:1px solid rgba(0,200,255,.2);
  border-radius:20px;
  color:rgba(0,200,255,.7);
  font-size:8px;
  font-weight:700;
  letter-spacing:2px;
}
.card-10 .footer-bar {
  position:absolute;
  bottom:10px; left:20px; right:20px;
  display:flex; justify-content:space-between; align-items:center;
  z-index:2;
}
.card-10 .footer-bar .website { color:rgba(100,200,240,.2); font-size:7px; letter-spacing:2px; }
.card-10 .qr-box {
  width:36px; height:36px;
  background:rgba(0,155,184,.08);
  border:1px solid rgba(0,200,255,.15);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(0,200,255,.35);
}

/* ======================================================
   🇺🇸 USA DESIGNS (11-15)
   ====================================================== */

/* DESIGN 11: SILICON VALLEY TECH */
.card-11 {
  background:linear-gradient(160deg, #0a0a0a 0%, #141414 100%);
}
.card-11 .circuit {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(59,130,246,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.04) 1px, transparent 1px);
  background-size:30px 30px;
}
.card-11 .glow-orb {
  position:absolute;
  width:180px; height:180px;
  border-radius:50%;
  top:-60px; right:-40px;
  background:radial-gradient(circle, rgba(59,130,246,.12) 0%, rgba(139,92,246,.06) 40%, transparent 70%);
}
.card-11 .glow-orb2 {
  position:absolute;
  width:100px; height:100px;
  border-radius:50%;
  bottom:-30px; left:20%;
  background:radial-gradient(circle, rgba(16,185,129,.08) 0%, transparent 70%);
}
.card-11 .top-bar {
  position:absolute;
  top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, #3b82f6, #8b5cf6, #10b981);
}
.card-11 .org-name {
  position:absolute; top:16px; left:20px;
  color:#f0f0f0;
  font-size:16px; font-weight:900;
  font-family:'Montserrat',sans-serif;
  letter-spacing:1px;
}
.card-11 .org-name .dot { color:#3b82f6; }
.card-11 .org-sub {
  position:absolute; top:36px; left:20px;
  color:rgba(255,255,255,.25);
  font-size:8px; letter-spacing:3px; text-transform:uppercase;
}
.card-11 .photo-frame {
  position:absolute; left:20px; top:58px;
  width:84px; height:104px;
  border-radius:16px;
  background:#1a1a1a;
  border:1.5px solid rgba(59,130,246,.2);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-shadow:0 0 30px rgba(59,130,246,.06);
}
.card-11 .photo-frame .ph-icon { font-size:28px; opacity:.2; }
.card-11 .info-block { position:absolute; left:118px; top:58px; }
.card-11 .emp-name { color:#fff; font-size:18px; font-weight:700; }
.card-11 .emp-role {
  color:#3b82f6; font-size:10px; font-weight:500;
  margin-top:2px;
}
.card-11 .tags {
  display:flex; gap:5px; margin-top:8px; flex-wrap:wrap;
}
.card-11 .tags span {
  padding:2px 8px;
  border-radius:10px;
  font-size:7px; font-weight:600;
  background:rgba(59,130,246,.08);
  color:rgba(59,130,246,.7);
  border:1px solid rgba(59,130,246,.12);
}
.card-11 .tags span.green { background:rgba(16,185,129,.08); color:rgba(16,185,129,.7); border-color:rgba(16,185,129,.12); }
.card-11 .tags span.purple { background:rgba(139,92,246,.08); color:rgba(139,92,246,.7); border-color:rgba(139,92,246,.12); }
.card-11 .emp-details {
  margin-top:6px; color:rgba(255,255,255,.3);
  font-size:8.5px; line-height:1.8;
}
.card-11 .emp-details span { color:rgba(255,255,255,.6); }
.card-11 .footer-bar {
  position:absolute; bottom:10px; left:20px; right:16px;
  display:flex; justify-content:space-between; align-items:center;
}
.card-11 .emp-id-badge {
  padding:3px 10px;
  background:rgba(139,92,246,.08);
  border:1px solid rgba(139,92,246,.15);
  border-radius:8px;
  color:rgba(139,92,246,.7);
  font-size:8px; font-weight:700;
  font-family:monospace; letter-spacing:1px;
}
.card-11 .qr-box {
  width:36px; height:36px;
  background:rgba(59,130,246,.05);
  border:1px solid rgba(59,130,246,.12);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(59,130,246,.3);
}

/* DESIGN 12: WALL STREET PRESTIGE */
.card-12 {
  background:linear-gradient(145deg, #1c1917 0%, #292524 50%, #1c1917 100%);
}
.card-12 .pinstripe {
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px, transparent 1px, transparent 12px);
}
.card-12 .gold-band {
  position:absolute; top:0; left:0; right:0; height:52px;
  background:linear-gradient(135deg, #78350f, #92400e, #b45309);
}
.card-12 .gold-band::after {
  content:''; position:absolute;
  bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, #fbbf24, #f59e0b, #d97706, #f59e0b, #fbbf24);
}
.card-12 .seal {
  position:absolute; top:8px; left:16px;
  width:34px; height:34px;
  border-radius:50%;
  border:2px solid rgba(251,191,36,.5);
  background:rgba(251,191,36,.1);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:#fbbf24;
  font-family:serif; font-weight:900;
}
.card-12 .org-name {
  position:absolute; top:12px; left:60px;
  color:#fef3c7; font-size:15px; font-weight:800;
  letter-spacing:3px; text-transform:uppercase;
  font-family:'Playfair Display',serif;
}
.card-12 .org-sub {
  position:absolute; top:32px; left:60px;
  color:rgba(254,243,199,.35); font-size:7px;
  letter-spacing:4px; text-transform:uppercase;
}
.card-12 .photo-frame {
  position:absolute; left:18px; top:66px;
  width:88px; height:108px;
  border-radius:6px;
  background:#1a1614;
  border:2px solid rgba(180,83,9,.35);
  box-shadow:0 4px 20px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-12 .photo-frame .ph-icon { font-size:28px; opacity:.2; }
.card-12 .info-block { position:absolute; left:120px; top:64px; }
.card-12 .emp-name {
  color:#fef3c7; font-size:18px; font-weight:800;
  font-family:'Playfair Display',serif;
}
.card-12 .emp-role {
  color:#d97706; font-size:10px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; margin-top:2px;
}
.card-12 .gold-divider {
  width:30px; height:2px; margin-top:6px;
  background:linear-gradient(90deg, #d97706, transparent);
}
.card-12 .emp-details {
  margin-top:6px; color:rgba(255,255,255,.3);
  font-size:8.5px; line-height:1.8;
}
.card-12 .emp-details span { color:rgba(254,243,199,.6); }
.card-12 .emp-id-badge {
  display:inline-block; margin-top:6px;
  padding:3px 12px;
  border:1px solid rgba(217,119,6,.3);
  border-radius:4px; color:#d97706;
  font-size:8px; font-weight:800;
  letter-spacing:2px;
  font-family:'Montserrat',sans-serif;
}
.card-12 .footer-bar {
  position:absolute; bottom:12px; left:18px; right:16px;
  display:flex; justify-content:space-between; align-items:center;
}
.card-12 .footer-bar .website { color:rgba(217,119,6,.2); font-size:7px; letter-spacing:2px; }
.card-12 .qr-box {
  width:36px; height:36px;
  background:rgba(217,119,6,.05);
  border:1px solid rgba(217,119,6,.15);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(217,119,6,.3);
}

/* DESIGN 13: STARS & STRIPES MODERN */
.card-13 { background:#fff; }
.card-13 .blue-zone {
  position:absolute; top:0; left:0; bottom:0; width:38%;
  background:linear-gradient(180deg, #1e3a5f, #162442);
}
.card-13 .star-grid {
  position:absolute; top:40px; left:10px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:5px;
  opacity:.15; z-index:1;
}
.card-13 .star-grid span { color:#fff; font-size:7px; }
.card-13 .red-stripes {
  position:absolute; top:0; right:0; bottom:0; width:62%;
  background:repeating-linear-gradient(180deg, rgba(185,28,28,.04) 0px, rgba(185,28,28,.04) 8px, transparent 8px, transparent 16px);
}
.card-13 .red-accent {
  position:absolute; top:0; right:0; width:62%; height:4px;
  background:linear-gradient(90deg, #b91c1c, #dc2626);
}
.card-13 .top-bar {
  position:absolute; top:0; left:0; right:0; height:32px;
  background:linear-gradient(90deg, #162442, #1e3a5f, rgba(30,58,95,.85));
  border-radius:14px 14px 0 0; z-index:2;
}
.card-13 .org-name {
  position:absolute; top:6px; left:0; right:0;
  color:#e2e8f0; font-size:11px; font-weight:800;
  letter-spacing:3px; text-transform:uppercase;
  font-family:'Montserrat',sans-serif;
  text-align:center;
  z-index:3;
}
.card-13 .photo-frame {
  position:absolute; left:16px; top:46px;
  width:120px; height:130px; border-radius:8px;
  background:#0f1d35; border:2px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,.2); z-index:2;
}
.card-13 .photo-frame .ph-icon { font-size:36px; opacity:.2; color:#fff; }
.card-13 .info-block { position:absolute; left:170px; top:46px; right:16px; z-index:2; }
.card-13 .emp-name {
  color:#1e293b; font-size:17px; font-weight:800;
  font-family:'Montserrat',sans-serif;
}
.card-13 .emp-role {
  color:#b91c1c; font-size:9px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; margin-top:2px;
}
.card-13 .blue-line {
  width:30px; height:3px; margin-top:5px;
  background:linear-gradient(90deg, #1e3a5f, rgba(30,58,95,.3));
  border-radius:2px;
}
.card-13 .emp-details {
  margin-top:5px; color:#64748b; font-size:8.5px; line-height:1.8;
}
.card-13 .emp-details span { color:#1e293b; font-weight:500; }
.card-13 .emp-id-badge {
  display:inline-block; margin-top:5px; padding:3px 10px;
  background:rgba(30,58,95,.08); border:1px solid rgba(30,58,95,.15);
  border-radius:4px; color:#1e3a5f; font-size:8px; font-weight:800; letter-spacing:2px;
}
.card-13 .footer-bar {
  position:absolute; bottom:12px; left:170px; right:16px;
  display:flex; justify-content:space-between; align-items:center; z-index:2;
}
.card-13 .footer-bar .website { color:#94a3b8; font-size:7px; letter-spacing:1px; }
.card-13 .qr-box {
  width:34px; height:34px;
  background:rgba(30,58,95,.04); border:1px solid rgba(30,58,95,.12);
  border-radius:4px; display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(30,58,95,.3);
}

/* DESIGN 14: NASA SPACE */
.card-14 {
  background:linear-gradient(180deg, #000511 0%, #0a1628 40%, #111d35 100%);
}
.card-14 .nebula {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 50% 60% at 75% 30%, rgba(99,102,241,.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 70%, rgba(239,68,68,.04) 0%, transparent 50%);
}
.card-14 .star-field {
  position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 5% 15%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 15% 60%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 25% 30%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 55% 10%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 70% 50%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 85% 25%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 92% 70%, rgba(255,255,255,.5), transparent);
}
.card-14 .orbit-ring {
  position:absolute;
  top:30px; right:-30px;
  width:160px; height:160px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.04);
}
.card-14 .orbit-ring2 {
  position:absolute;
  top:50px; right:-10px;
  width:120px; height:120px;
  border-radius:50%;
  border:1px solid rgba(99,102,241,.06);
}
.card-14 .top-stripe {
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, #ef4444, #fff, #3b82f6);
}
.card-14 .agency-badge {
  position:absolute; top:12px; left:16px;
  padding:4px 14px;
  border:1.5px solid rgba(255,255,255,.2);
  border-radius:20px;
  color:#fff; font-size:10px; font-weight:900;
  letter-spacing:4px;
  font-family:'Montserrat',sans-serif;
}
.card-14 .org-sub {
  position:absolute; top:18px; left:120px;
  color:rgba(255,255,255,.25); font-size:7px;
  letter-spacing:3px; text-transform:uppercase;
}
.card-14 .photo-frame {
  position:absolute; left:16px; top:52px;
  width:84px; height:104px;
  border-radius:10px;
  background:rgba(10,22,40,.8);
  border:1.5px solid rgba(99,102,241,.2);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-shadow:0 0 20px rgba(99,102,241,.06);
}
.card-14 .photo-frame .ph-icon { font-size:28px; opacity:.25; }
.card-14 .info-block { position:absolute; left:114px; top:52px; }
.card-14 .emp-name {
  color:#e8ecf2; font-size:17px; font-weight:700;
  font-family:'Montserrat',sans-serif;
}
.card-14 .emp-role {
  color:rgba(147,170,255,.7); font-size:9px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; margin-top:2px;
}
.card-14 .light-divider {
  width:35px; height:1.5px; margin-top:6px;
  background:linear-gradient(90deg, rgba(99,102,241,.5), transparent);
}
.card-14 .emp-details {
  margin-top:5px; color:rgba(200,210,230,.35);
  font-size:8px; line-height:1.8;
}
.card-14 .emp-details span { color:rgba(230,236,242,.6); }
.card-14 .emp-id-badge {
  display:inline-block; margin-top:5px;
  padding:2px 10px;
  border:1px solid rgba(99,102,241,.2);
  border-radius:4px; color:rgba(147,170,255,.6);
  font-size:8px; font-weight:700;
  letter-spacing:2px; font-family:monospace;
}
.card-14 .footer-bar {
  position:absolute; bottom:10px; left:16px; right:14px;
  display:flex; justify-content:space-between; align-items:center;
}
.card-14 .footer-bar .mission { color:rgba(255,255,255,.15); font-size:7px; letter-spacing:2px; text-transform:uppercase; }
.card-14 .qr-box {
  width:36px; height:36px;
  background:rgba(99,102,241,.04);
  border:1px solid rgba(99,102,241,.12);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(99,102,241,.3);
}

/* DESIGN 15: NYC METRO */
.card-15 {
  background:#faf9f6;
}
.card-15 .subway-stripe {
  position:absolute; top:0; left:0; right:0; height:60px;
  background:#1a1a1a;
}
.card-15 .subway-stripe::after {
  content:''; position:absolute;
  bottom:-4px; left:0; right:0; height:4px;
  background:linear-gradient(90deg, #f59e0b, #eab308, #f59e0b);
}
.card-15 .transit-circle {
  position:absolute; top:10px; left:16px;
  width:38px; height:38px;
  border-radius:50%;
  background:#f59e0b;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:900;
  color:#1a1a1a; font-family:'Montserrat',sans-serif;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.card-15 .org-name {
  position:absolute; top:12px; left:64px;
  color:#fff; font-size:16px; font-weight:900;
  font-family:'Montserrat',sans-serif; letter-spacing:2px;
}
.card-15 .org-sub {
  position:absolute; top:32px; left:64px;
  color:rgba(255,255,255,.4); font-size:7px;
  letter-spacing:3px; text-transform:uppercase;
}
.card-15 .grid-dots {
  position:absolute; top:80px; right:10px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; opacity:.06;
}
.card-15 .grid-dots span { width:3px; height:3px; border-radius:50%; background:#1a1a1a; }
.card-15 .photo-frame {
  position:absolute; left:18px; top:78px;
  width:86px; height:106px;
  border-radius:6px;
  background:#f0ede8;
  border:2px solid #e5e0d8;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.card-15 .photo-frame .ph-icon { font-size:28px; opacity:.2; }
.card-15 .info-block { position:absolute; left:118px; top:76px; }
.card-15 .emp-name {
  color:#1a1a1a; font-size:18px; font-weight:800;
  font-family:'Montserrat',sans-serif;
}
.card-15 .emp-role {
  color:#b45309; font-size:10px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; margin-top:2px;
}
.card-15 .yellow-line {
  width:30px; height:3px; margin-top:5px;
  background:#f59e0b; border-radius:2px;
}
.card-15 .emp-details {
  margin-top:5px; color:#78716c;
  font-size:8.5px; line-height:1.8;
}
.card-15 .emp-details span { color:#1c1917; font-weight:500; }
.card-15 .emp-id-badge {
  display:inline-block; margin-top:5px;
  padding:3px 10px;
  background:#1a1a1a; color:#f59e0b;
  border-radius:4px;
  font-size:8px; font-weight:800;
  letter-spacing:2px; font-family:monospace;
}
.card-15 .footer-bar {
  position:absolute; bottom:12px; left:18px; right:16px;
  display:flex; justify-content:space-between; align-items:center;
}
.card-15 .footer-bar .website { color:#a8a29e; font-size:7px; letter-spacing:1px; }
.card-15 .qr-box {
  width:34px; height:34px;
  background:rgba(26,26,26,.04);
  border:1px solid #e5e0d8;
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(26,26,26,.25);
}


/* ======================================================
   🇨🇦 CANADA DESIGNS (16-20)
   ====================================================== */

/* DESIGN 16: MAPLE CRIMSON */
.card-16 {
  background:#fefefe;
}
.card-16 .red-panel {
  position:absolute; top:0; left:0; bottom:0; width:35%;
  background:linear-gradient(180deg, #dc2626, #b91c1c, #991b1b);
}
.card-16 .red-panel::after {
  content:''; position:absolute;
  top:0; right:-15px; bottom:0; width:30px;
  background:linear-gradient(135deg, transparent 50%, #fefefe 50%);
}
.card-16 .maple-watermark {
  position:absolute; top:30px; left:15px;
  font-size:90px; opacity:.1; color:#fff;
  line-height:1;
}
.card-16 .org-name {
  position:absolute; top:14px; left:14px;
  color:#fff; font-size:12px; font-weight:800;
  letter-spacing:3px; text-transform:uppercase;
  font-family:'Montserrat',sans-serif;
  text-shadow:0 1px 3px rgba(0,0,0,.2);
}
.card-16 .org-sub {
  position:absolute; top:31px; left:14px;
  color:rgba(255,255,255,.5); font-size:7px;
  letter-spacing:3px; text-transform:uppercase;
}
.card-16 .photo-frame {
  position:absolute; right:20px; top:14px;
  width:86px; height:106px;
  border-radius:8px;
  background:#f5f3f0;
  border:2px solid #e5e0d8;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-shadow:0 3px 15px rgba(0,0,0,.08);
}
.card-16 .photo-frame .ph-icon { font-size:28px; opacity:.2; }
.card-16 .info-block { position:absolute; left:155px; top:16px; right:120px; }
.card-16 .emp-name {
  color:#1c1917; font-size:17px; font-weight:800;
  font-family:'Playfair Display',serif;
}
.card-16 .emp-role {
  color:#b91c1c; font-size:9px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; margin-top:2px;
}
.card-16 .emp-details {
  margin-top:6px; color:#78716c;
  font-size:8.5px; line-height:1.8;
}
.card-16 .emp-details span { color:#1c1917; font-weight:500; }
.card-16 .footer-bar {
  position:absolute; bottom:14px; left:155px; right:16px;
  display:flex; justify-content:space-between; align-items:center;
}
.card-16 .emp-id-badge {
  padding:3px 12px;
  background:rgba(185,28,28,.06);
  border:1px solid rgba(185,28,28,.15);
  border-radius:4px; color:#b91c1c;
  font-size:8px; font-weight:800; letter-spacing:2px;
}
.card-16 .qr-box {
  width:34px; height:34px;
  background:rgba(185,28,28,.03);
  border:1px solid rgba(185,28,28,.1);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(185,28,28,.3);
}

/* DESIGN 17: ROCKIES MOUNTAIN */
.card-17 {
  background:linear-gradient(180deg, #0c4a6e 0%, #075985 30%, #0284c7 60%, #38bdf8 80%, #e0f2fe 100%);
}
.card-17 .mountain {
  position:absolute; bottom:0; left:0; right:0; height:80px;
}
.card-17 .mountain svg { width:100%; height:100%; display:block; }
.card-17 .snow-cap {
  position:absolute; bottom:42px; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent 10%, rgba(255,255,255,.3) 30%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.3) 70%, transparent 90%);
}
.card-17 .org-name {
  position:absolute; top:14px; left:18px;
  color:#fff; font-size:14px; font-weight:900;
  letter-spacing:3px; text-transform:uppercase;
  font-family:'Montserrat',sans-serif;
  text-shadow:0 2px 8px rgba(0,0,0,.2);
}
.card-17 .org-sub {
  position:absolute; top:33px; left:18px;
  color:rgba(255,255,255,.4); font-size:7px;
  letter-spacing:4px; text-transform:uppercase;
}
.card-17 .photo-frame {
  position:absolute; left:18px; top:52px;
  width:82px; height:100px;
  border-radius:12px;
  background:rgba(0,50,80,.4);
  border:2px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-shadow:0 4px 15px rgba(0,0,0,.15);
  backdrop-filter:blur(4px);
}
.card-17 .photo-frame .ph-icon { font-size:26px; opacity:.3; color:#fff; }
.card-17 .info-block { position:absolute; left:114px; top:52px; }
.card-17 .emp-name {
  color:#fff; font-size:17px; font-weight:700;
  text-shadow:0 1px 6px rgba(0,0,0,.15);
}
.card-17 .emp-role {
  color:rgba(224,242,254,.7); font-size:10px; font-weight:500;
  letter-spacing:1px; margin-top:2px;
}
.card-17 .sky-divider {
  width:35px; height:2px; margin-top:5px;
  background:linear-gradient(90deg, rgba(255,255,255,.5), transparent);
}
.card-17 .emp-details {
  margin-top:5px; color:rgba(255,255,255,.4);
  font-size:8.5px; line-height:1.8;
}
.card-17 .emp-details span { color:rgba(255,255,255,.7); }
.card-17 .emp-id-badge {
  display:inline-block; margin-top:5px;
  padding:3px 10px;
  background:rgba(255,255,255,.12);
  border-radius:20px; color:#fff;
  font-size:8px; font-weight:700;
  letter-spacing:2px;
  backdrop-filter:blur(4px);
}
.card-17 .footer-bar {
  position:absolute; bottom:8px; left:18px; right:16px;
  display:flex; justify-content:space-between; align-items:center; z-index:2;
}
.card-17 .footer-bar .website { color:rgba(255,255,255,.2); font-size:7px; letter-spacing:1px; }
.card-17 .qr-box {
  width:34px; height:34px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(255,255,255,.3);
}

/* DESIGN 18: NORTHERN LIGHTS CANADA */
.card-18 {
  background:#060818;
}
.card-18 .northern {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 90% 40% at 30% 0%, rgba(74,222,128,.12) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 65% 10%, rgba(45,212,191,.08) 0%, transparent 50%),
    radial-gradient(ellipse 50% 30% at 80% 20%, rgba(99,102,241,.06) 0%, transparent 40%);
  filter:blur(10px);
}
.card-18 .treeline {
  position:absolute; bottom:0; left:0; right:0; height:30px;
  background:
    linear-gradient(180deg, transparent, rgba(6,8,24,.9) 60%),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 8px,
      rgba(20,40,20,.4) 8px, rgba(20,40,20,.4) 10px,
      transparent 10px, transparent 18px
    );
}
.card-18 .org-name {
  position:absolute; top:14px; left:18px;
  color:rgba(74,222,128,.8); font-size:14px; font-weight:800;
  letter-spacing:4px; text-transform:uppercase;
  font-family:'Montserrat',sans-serif;
  text-shadow:0 0 15px rgba(74,222,128,.2);
}
.card-18 .org-sub {
  position:absolute; top:33px; left:18px;
  color:rgba(74,222,128,.25); font-size:7px;
  letter-spacing:4px; text-transform:uppercase;
}
.card-18 .photo-frame {
  position:absolute; left:18px; top:55px;
  width:84px; height:104px;
  border-radius:10px;
  background:rgba(10,20,15,.6);
  border:1.5px solid rgba(74,222,128,.15);
  box-shadow:0 0 20px rgba(74,222,128,.05);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-18 .photo-frame .ph-icon { font-size:28px; opacity:.2; }
.card-18 .info-block { position:absolute; left:116px; top:55px; }
.card-18 .emp-name {
  color:#e0fbe8; font-size:17px; font-weight:700;
  font-family:'Playfair Display',serif;
}
.card-18 .emp-role {
  color:rgba(74,222,128,.6); font-size:9px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; margin-top:2px;
}
.card-18 .aurora-line {
  width:40px; height:1.5px; margin-top:6px;
  background:linear-gradient(90deg, rgba(74,222,128,.5), rgba(45,212,191,.3), transparent);
  box-shadow:0 0 4px rgba(74,222,128,.2);
}
.card-18 .emp-details {
  margin-top:5px; color:rgba(180,220,190,.3);
  font-size:8.5px; line-height:1.8;
}
.card-18 .emp-details span { color:rgba(200,240,210,.6); }
.card-18 .emp-id-badge {
  display:inline-block; margin-top:5px;
  padding:2px 10px;
  border:1px solid rgba(74,222,128,.15);
  border-radius:4px; color:rgba(74,222,128,.6);
  font-size:8px; font-weight:700; letter-spacing:2px;
}
.card-18 .footer-bar {
  position:absolute; bottom:10px; left:18px; right:14px;
  display:flex; justify-content:space-between; align-items:center; z-index:2;
}
.card-18 .footer-bar .website { color:rgba(74,222,128,.15); font-size:7px; letter-spacing:2px; }
.card-18 .qr-box {
  width:36px; height:36px;
  background:rgba(74,222,128,.03);
  border:1px solid rgba(74,222,128,.1);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(74,222,128,.25);
}

/* DESIGN 19: TORONTO SKYLINE */
.card-19 {
  background:linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
}
.card-19 .skyline-strip {
  position:absolute; bottom:0; left:0; right:0; height:50px;
  background:#1e293b;
}
.card-19 .skyline-strip svg { position:absolute; bottom:50px; left:0; width:100%; }
.card-19 .cn-tower {
  position:absolute; bottom:50px; right:35px;
  width:3px; height:70px;
  background:linear-gradient(180deg, #94a3b8, #64748b);
}
.card-19 .cn-tower::before {
  content:''; position:absolute;
  bottom:45px; left:-5px;
  width:13px; height:10px;
  border-radius:50%;
  background:#94a3b8;
}
.card-19 .cn-tower::after {
  content:''; position:absolute;
  top:-8px; left:-1px;
  width:5px; height:12px;
  background:#94a3b8;
}
.card-19 .red-accent-top {
  position:absolute; top:0; left:0; right:0; height:3px;
  background:#dc2626;
}
.card-19 .org-name {
  position:absolute; top:14px; left:18px;
  color:#0f172a; font-size:15px; font-weight:900;
  font-family:'Montserrat',sans-serif; letter-spacing:2px;
}
.card-19 .org-sub {
  position:absolute; top:34px; left:18px;
  color:#94a3b8; font-size:7.5px; letter-spacing:3px; text-transform:uppercase;
}
.card-19 .photo-frame {
  position:absolute; left:18px; top:56px;
  width:82px; height:100px;
  border-radius:10px;
  background:#fff;
  border:2px solid #e2e8f0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.card-19 .photo-frame .ph-icon { font-size:26px; opacity:.2; }
.card-19 .info-block { position:absolute; left:114px; top:56px; }
.card-19 .emp-name {
  color:#0f172a; font-size:17px; font-weight:700;
}
.card-19 .emp-role {
  color:#dc2626; font-size:9px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; margin-top:2px;
}
.card-19 .clean-line {
  width:30px; height:2px; margin-top:5px;
  background:linear-gradient(90deg, #dc2626, rgba(220,38,38,.2));
}
.card-19 .emp-details {
  margin-top:5px; color:#64748b;
  font-size:8.5px; line-height:1.8;
}
.card-19 .emp-details span { color:#1e293b; font-weight:500; }
.card-19 .emp-id-badge {
  display:inline-block; margin-top:5px;
  padding:3px 10px;
  background:rgba(220,38,38,.05);
  border:1px solid rgba(220,38,38,.12);
  border-radius:4px; color:#dc2626;
  font-size:8px; font-weight:700; letter-spacing:2px;
}
.card-19 .footer-bar {
  position:absolute; bottom:56px; left:114px; right:16px;
  display:flex; justify-content:space-between; align-items:center;
}
.card-19 .footer-bar .website { color:#94a3b8; font-size:7px; letter-spacing:1px; }
.card-19 .qr-box {
  width:34px; height:34px;
  background:rgba(220,38,38,.03);
  border:1px solid rgba(220,38,38,.1);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(220,38,38,.3);
}

/* DESIGN 20: CANADIAN FOREST MINIMAL */
.card-20 {
  background:linear-gradient(160deg, #14532d 0%, #166534 40%, #15803d 100%);
}
.card-20 .pine-pattern {
  position:absolute; inset:0; opacity:.06;
  background-image:
    conic-gradient(from 180deg at 15% 50%, transparent 0deg, #fff 1deg, #fff 2deg, transparent 3deg),
    conic-gradient(from 180deg at 35% 70%, transparent 0deg, #fff 1deg, #fff 2deg, transparent 3deg),
    conic-gradient(from 180deg at 55% 30%, transparent 0deg, #fff 1deg, #fff 2deg, transparent 3deg),
    conic-gradient(from 180deg at 75% 60%, transparent 0deg, #fff 1deg, #fff 2deg, transparent 3deg),
    conic-gradient(from 180deg at 90% 40%, transparent 0deg, #fff 1deg, #fff 2deg, transparent 3deg);
}
.card-20 .white-strip {
  position:absolute; right:0; top:0; bottom:0; width:45%;
  background:rgba(255,255,255,.95);
  clip-path:polygon(15% 0, 100% 0, 100% 100%, 0 100%);
}
.card-20 .maple-icon {
  position:absolute; top:12px; left:16px;
  font-size:22px; filter:brightness(2);
}
.card-20 .org-name {
  position:absolute; top:14px; left:46px;
  color:#fff; font-size:12px; font-weight:800;
  letter-spacing:3px; text-transform:uppercase;
  font-family:'Montserrat',sans-serif;
}
.card-20 .org-sub {
  position:absolute; top:31px; left:46px;
  color:rgba(255,255,255,.4); font-size:7px;
  letter-spacing:3px; text-transform:uppercase;
}
.card-20 .photo-frame {
  position:absolute; left:16px; top:55px;
  width:80px; height:100px;
  border-radius:10px;
  background:rgba(0,40,20,.3);
  border:1.5px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-20 .photo-frame .ph-icon { font-size:26px; opacity:.3; color:#fff; }
.card-20 .info-block { position:absolute; right:14px; top:16px; width:42%; text-align:right; }
.card-20 .emp-name {
  color:#14532d; font-size:16px; font-weight:800;
  font-family:'Playfair Display',serif;
}
.card-20 .emp-role {
  color:#15803d; font-size:9px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; margin-top:2px;
}
.card-20 .green-line {
  width:30px; height:2px; margin-top:5px; margin-left:auto;
  background:linear-gradient(270deg, #15803d, rgba(21,128,61,.2));
}
.card-20 .emp-details {
  margin-top:5px; color:#64748b;
  font-size:8.5px; line-height:1.8;
}
.card-20 .emp-details span { color:#14532d; font-weight:500; }
.card-20 .emp-id-badge {
  display:inline-block; margin-top:4px;
  padding:2px 10px;
  background:rgba(21,128,61,.08);
  border:1px solid rgba(21,128,61,.15);
  border-radius:4px; color:#15803d;
  font-size:8px; font-weight:700; letter-spacing:2px;
}
.card-20 .footer-bar {
  position:absolute; bottom:12px; right:14px;
  display:flex; gap:8px; align-items:center;
}
.card-20 .footer-bar .website { color:#94a3b8; font-size:7px; letter-spacing:1px; }
.card-20 .qr-box {
  width:34px; height:34px;
  background:rgba(21,128,61,.04);
  border:1px solid rgba(21,128,61,.12);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(21,128,61,.3);
}


/* ======================================================
   🇬🇧 UK DESIGNS (21-25)
   ====================================================== */

/* DESIGN 21: ROYAL CROWN */
.card-21 {
  background:linear-gradient(160deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
}
.card-21 .royal-pattern {
  position:absolute; inset:0; opacity:.04;
  background-image:repeating-linear-gradient(
    45deg, transparent 0px, transparent 20px, #fff 20px, #fff 21px
  );
}
.card-21 .crown-accent {
  position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, #d4af37, #f5d769, #d4af37, #f5d769, #d4af37);
}
.card-21 .crown-icon {
  position:absolute; top:10px; left:16px;
  font-size:24px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.card-21 .org-name {
  position:absolute; top:12px; left:48px;
  color:#e4c88c; font-size:14px; font-weight:800;
  letter-spacing:4px; text-transform:uppercase;
  font-family:'Playfair Display',serif;
}
.card-21 .org-sub {
  position:absolute; top:30px; left:48px;
  color:rgba(228,200,140,.3); font-size:7px;
  letter-spacing:4px; text-transform:uppercase;
}
.card-21 .photo-frame {
  position:absolute; left:16px; top:52px;
  width:88px; height:108px;
  border-radius:8px;
  background:rgba(30,27,75,.6);
  border:2px solid rgba(212,175,55,.25);
  box-shadow:0 0 20px rgba(212,175,55,.06);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-21 .photo-frame .ph-icon { font-size:28px; opacity:.2; }
.card-21 .info-block { position:absolute; left:118px; top:52px; }
.card-21 .emp-name {
  color:#ede9d5; font-size:18px; font-weight:700;
  font-family:'Playfair Display',serif;
}
.card-21 .emp-role {
  color:#d4af37; font-size:9px; font-weight:600;
  letter-spacing:3px; text-transform:uppercase; margin-top:2px;
}
.card-21 .gold-divider {
  width:35px; height:1.5px; margin-top:6px;
  background:linear-gradient(90deg, #d4af37, rgba(212,175,55,.1));
}
.card-21 .emp-details {
  margin-top:5px; color:rgba(200,200,220,.35);
  font-size:8.5px; line-height:1.8;
}
.card-21 .emp-details span { color:rgba(237,233,213,.6); }
.card-21 .emp-id-badge {
  display:inline-block; margin-top:5px;
  padding:3px 12px;
  border:1px solid rgba(212,175,55,.25);
  border-radius:3px; color:#d4af37;
  font-size:8px; font-weight:700; letter-spacing:2px;
}
.card-21 .footer-bar {
  position:absolute; bottom:10px; left:16px; right:14px;
  display:flex; justify-content:space-between; align-items:center;
}
.card-21 .footer-bar .website { color:rgba(212,175,55,.2); font-size:7px; letter-spacing:2px; }
.card-21 .qr-box {
  width:36px; height:36px;
  background:rgba(212,175,55,.04);
  border:1px solid rgba(212,175,55,.12);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(212,175,55,.3);
}

/* DESIGN 22: BRITISH RACING GREEN */
.card-22 {
  background:linear-gradient(135deg, #064e3b 0%, #065f46 50%, #047857 100%);
}
.card-22 .checker-pattern {
  position:absolute; inset:0; opacity:.04;
  background-image:
    linear-gradient(45deg, #fff 25%, transparent 25%),
    linear-gradient(-45deg, #fff 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #fff 75%),
    linear-gradient(-45deg, transparent 75%, #fff 75%);
  background-size:16px 16px;
}
.card-22 .gold-stripe-top {
  position:absolute; top:48px; left:0; right:0; height:1.5px;
  background:linear-gradient(90deg, transparent 5%, rgba(212,175,55,.3) 20%, rgba(212,175,55,.3) 80%, transparent 95%);
}
.card-22 .org-name {
  position:absolute; top:14px; left:18px;
  color:#ecfdf5; font-size:14px; font-weight:800;
  letter-spacing:3px; text-transform:uppercase;
  font-family:'Montserrat',sans-serif;
}
.card-22 .org-sub {
  position:absolute; top:33px; left:18px;
  color:rgba(167,243,208,.3); font-size:7px;
  letter-spacing:4px; text-transform:uppercase;
}
.card-22 .photo-frame {
  position:absolute; right:18px; top:58px;
  width:86px; height:106px;
  border-radius:6px;
  background:rgba(0,30,20,.4);
  border:1.5px solid rgba(212,175,55,.2);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-22 .photo-frame .ph-icon { font-size:28px; opacity:.2; color:#a7f3d0; }
.card-22 .info-block { position:absolute; left:18px; top:60px; }
.card-22 .emp-name {
  color:#ecfdf5; font-size:18px; font-weight:700;
  font-family:'Playfair Display',serif;
}
.card-22 .emp-role {
  color:rgba(212,175,55,.7); font-size:9px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; margin-top:2px;
}
.card-22 .racing-line {
  width:35px; height:2px; margin-top:5px;
  background:linear-gradient(90deg, rgba(212,175,55,.5), transparent);
}
.card-22 .emp-details {
  margin-top:5px; color:rgba(167,243,208,.35);
  font-size:8.5px; line-height:1.8;
}
.card-22 .emp-details span { color:rgba(236,253,245,.6); }
.card-22 .emp-id-badge {
  display:inline-block; margin-top:5px;
  padding:3px 10px;
  border:1px solid rgba(212,175,55,.2);
  border-radius:3px; color:rgba(212,175,55,.7);
  font-size:8px; font-weight:700; letter-spacing:2px;
}
.card-22 .footer-bar {
  position:absolute; bottom:12px; left:18px; right:16px;
  display:flex; justify-content:space-between; align-items:center;
}
.card-22 .footer-bar .website { color:rgba(167,243,208,.2); font-size:7px; letter-spacing:1px; }
.card-22 .qr-box {
  width:34px; height:34px;
  background:rgba(212,175,55,.04);
  border:1px solid rgba(212,175,55,.12);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(212,175,55,.3);
}

/* DESIGN 23: LONDON FOG */
.card-23 {
  background:linear-gradient(180deg, #374151 0%, #4b5563 40%, #6b7280 70%, #9ca3af 100%);
}
.card-23 .fog-layer {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 40% at 50% 60%, rgba(255,255,255,.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 30% at 20% 80%, rgba(255,255,255,.04) 0%, transparent 50%);
}
.card-23 .big-ben {
  position:absolute; bottom:0; right:25px;
  width:4px; height:90px;
  background:linear-gradient(180deg, rgba(156,163,175,.3), rgba(156,163,175,.15));
}
.card-23 .big-ben::before {
  content:''; position:absolute;
  top:-6px; left:-4px;
  width:12px; height:8px;
  background:rgba(156,163,175,.25);
  border-radius:2px 2px 0 0;
}
.card-23 .big-ben::after {
  content:''; position:absolute;
  top:-12px; left:-1px;
  width:6px; height:8px;
  background:rgba(156,163,175,.2);
}
.card-23 .bridge-line {
  position:absolute; bottom:30px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}
.card-23 .red-bus {
  position:absolute; bottom:18px; left:30px;
  width:22px; height:12px;
  background:#dc2626;
  border-radius:2px;
}
.card-23 .red-bus::after {
  content:''; position:absolute;
  top:-4px; left:2px; right:2px; height:5px;
  background:#ef4444; border-radius:2px 2px 0 0;
}
.card-23 .org-name {
  position:absolute; top:14px; left:18px;
  color:#f3f4f6; font-size:14px; font-weight:800;
  letter-spacing:3px; text-transform:uppercase;
  font-family:'Playfair Display',serif;
}
.card-23 .org-sub {
  position:absolute; top:33px; left:18px;
  color:rgba(243,244,246,.3); font-size:7px;
  letter-spacing:3px; text-transform:uppercase;
}
.card-23 .photo-frame {
  position:absolute; left:18px; top:55px;
  width:84px; height:104px;
  border-radius:8px;
  background:rgba(55,65,81,.6);
  border:1.5px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  backdrop-filter:blur(4px);
}
.card-23 .photo-frame .ph-icon { font-size:28px; opacity:.2; color:#d1d5db; }
.card-23 .info-block { position:absolute; left:116px; top:55px; }
.card-23 .emp-name {
  color:#f9fafb; font-size:17px; font-weight:700;
}
.card-23 .emp-role {
  color:rgba(220,38,38,.7); font-size:9px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; margin-top:2px;
}
.card-23 .fog-divider {
  width:35px; height:1.5px; margin-top:5px;
  background:linear-gradient(90deg, rgba(255,255,255,.3), transparent);
}
.card-23 .emp-details {
  margin-top:5px; color:rgba(255,255,255,.35);
  font-size:8.5px; line-height:1.8;
}
.card-23 .emp-details span { color:rgba(255,255,255,.6); }
.card-23 .emp-id-badge {
  display:inline-block; margin-top:5px;
  padding:3px 10px;
  background:rgba(220,38,38,.08);
  border:1px solid rgba(220,38,38,.15);
  border-radius:3px; color:rgba(220,38,38,.6);
  font-size:8px; font-weight:700; letter-spacing:2px;
}
.card-23 .footer-bar {
  position:absolute; bottom:10px; left:18px; right:14px;
  display:flex; justify-content:space-between; align-items:center; z-index:2;
}
.card-23 .footer-bar .website { color:rgba(255,255,255,.15); font-size:7px; letter-spacing:1px; }
.card-23 .qr-box {
  width:34px; height:34px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(255,255,255,.2);
}

/* DESIGN 24: TARTAN HERITAGE */
.card-24 {
  background:#2c1810;
}
.card-24 .tartan {
  position:absolute; inset:0; opacity:.12;
  background-image:
    repeating-linear-gradient(0deg, transparent 0px, transparent 18px, rgba(220,38,38,.5) 18px, rgba(220,38,38,.5) 20px, transparent 20px, transparent 36px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 18px, rgba(220,38,38,.5) 18px, rgba(220,38,38,.5) 20px, transparent 20px, transparent 36px),
    repeating-linear-gradient(0deg, transparent 0px, transparent 8px, rgba(255,200,50,.3) 8px, rgba(255,200,50,.3) 9px, transparent 9px, transparent 27px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 8px, rgba(255,200,50,.3) 8px, rgba(255,200,50,.3) 9px, transparent 9px, transparent 27px);
}
.card-24 .leather-top {
  position:absolute; top:0; left:0; right:0; height:52px;
  background:linear-gradient(135deg, #78350f, #92400e, #a16207);
}
.card-24 .leather-top::after {
  content:''; position:absolute;
  bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, #d4af37, #b89a30, #d4af37);
}
.card-24 .crest {
  position:absolute; top:8px; left:14px;
  width:32px; height:32px;
  border:2px solid rgba(212,175,55,.5);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(212,175,55,.1);
  font-size:14px;
}
.card-24 .org-name {
  position:absolute; top:10px; left:54px;
  color:#fef3c7; font-size:14px; font-weight:800;
  letter-spacing:3px; text-transform:uppercase;
  font-family:'Playfair Display',serif;
}
.card-24 .org-sub {
  position:absolute; top:28px; left:54px;
  color:rgba(254,243,199,.35); font-size:7px;
  letter-spacing:3px; text-transform:uppercase;
}
.card-24 .photo-frame {
  position:absolute; left:14px; top:66px;
  width:86px; height:106px;
  border-radius:6px;
  background:rgba(44,24,16,.7);
  border:2px solid rgba(161,98,7,.3);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-24 .photo-frame .ph-icon { font-size:28px; opacity:.2; }
.card-24 .info-block { position:absolute; left:114px; top:64px; }
.card-24 .emp-name {
  color:#fef3c7; font-size:17px; font-weight:700;
  font-family:'Playfair Display',serif;
}
.card-24 .emp-role {
  color:rgba(212,175,55,.6); font-size:9px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; margin-top:2px;
}
.card-24 .tartan-line {
  width:30px; height:2px; margin-top:5px;
  background:linear-gradient(90deg, #dc2626, rgba(220,38,38,.2));
}
.card-24 .emp-details {
  margin-top:5px; color:rgba(254,243,199,.3);
  font-size:8.5px; line-height:1.8;
}
.card-24 .emp-details span { color:rgba(254,243,199,.55); }
.card-24 .emp-id-badge {
  display:inline-block; margin-top:5px;
  padding:3px 10px;
  border:1px solid rgba(161,98,7,.3);
  border-radius:3px; color:rgba(212,175,55,.6);
  font-size:8px; font-weight:700; letter-spacing:2px;
}
.card-24 .footer-bar {
  position:absolute; bottom:12px; left:14px; right:14px;
  display:flex; justify-content:space-between; align-items:center;
}
.card-24 .footer-bar .website { color:rgba(212,175,55,.15); font-size:7px; letter-spacing:2px; }
.card-24 .qr-box {
  width:34px; height:34px;
  background:rgba(161,98,7,.06);
  border:1px solid rgba(161,98,7,.15);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(161,98,7,.3);
}

/* DESIGN 25: MODERN BRITISH CLEAN */
.card-25 {
  background:#fff;
}
.card-25 .union-corner {
  position:absolute; top:0; right:0;
  width:100px; height:60px;
  overflow:hidden; opacity:.06;
}
.card-25 .union-corner .uc-h { position:absolute; top:26px; left:0; right:0; height:8px; background:#dc2626; }
.card-25 .union-corner .uc-v { position:absolute; top:0; bottom:0; left:46px; width:8px; background:#dc2626; }
.card-25 .union-corner .uc-d1 { position:absolute; top:0; left:0; width:140%; height:2px; background:#1e3a5f; transform:rotate(30deg); transform-origin:0 0; }
.card-25 .union-corner .uc-d2 { position:absolute; bottom:0; left:0; width:140%; height:2px; background:#1e3a5f; transform:rotate(-30deg); transform-origin:0 100%; }
.card-25 .navy-bar {
  position:absolute; left:0; top:0; bottom:0; width:6px;
  background:linear-gradient(180deg, #1e3a5f, #2d4a7a, #1e3a5f);
}
.card-25 .red-pin {
  position:absolute; top:0; left:6px; right:0; height:3px;
  background:#dc2626;
}
.card-25 .org-name {
  position:absolute; top:14px; left:22px;
  color:#1e293b; font-size:15px; font-weight:800;
  font-family:'Montserrat',sans-serif; letter-spacing:2px;
}
.card-25 .org-sub {
  position:absolute; top:34px; left:22px;
  color:#94a3b8; font-size:7.5px; letter-spacing:3px; text-transform:uppercase;
}
.card-25 .photo-frame {
  position:absolute; right:18px; top:50px;
  width:86px; height:106px;
  border-radius:8px;
  background:#f1f5f9;
  border:2px solid #e2e8f0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.card-25 .photo-frame .ph-icon { font-size:28px; opacity:.15; }
.card-25 .info-block { position:absolute; left:22px; top:54px; }
.card-25 .emp-name {
  color:#0f172a; font-size:18px; font-weight:700;
  font-family:'Playfair Display',serif;
}
.card-25 .emp-role {
  color:#1e3a5f; font-size:9px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; margin-top:2px;
}
.card-25 .british-line {
  width:30px; height:3px; margin-top:5px;
  background:#dc2626; border-radius:2px;
}
.card-25 .emp-details {
  margin-top:5px; color:#64748b;
  font-size:8.5px; line-height:1.8;
}
.card-25 .emp-details span { color:#1e293b; font-weight:500; }
.card-25 .emp-id-badge {
  display:inline-block; margin-top:5px;
  padding:3px 10px;
  background:rgba(30,58,95,.06);
  border:1px solid rgba(30,58,95,.12);
  border-radius:3px; color:#1e3a5f;
  font-size:8px; font-weight:700; letter-spacing:2px;
}
.card-25 .footer-bar {
  position:absolute; bottom:12px; left:22px; right:16px;
  display:flex; justify-content:space-between; align-items:center;
}
.card-25 .footer-bar .website { color:#94a3b8; font-size:7px; letter-spacing:1px; }
.card-25 .qr-box {
  width:34px; height:34px;
  background:rgba(30,58,95,.03);
  border:1px solid rgba(30,58,95,.1);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(30,58,95,.25);
}

/* --- Base: Landscape (land-card) --- */
.landscape-grid { padding:0; }
.land-card {
  width: 420px; height: 260px; border-radius: 24px; overflow: hidden;
  position: relative; padding: 24px;
  box-shadow: 0 20px 48px rgba(0,0,0,.18);
}
.land-card h2, .land-card h4, .land-card p { margin: 0; }
.land-card .profile-photo {
  width: 108px; height: 132px; border-radius: 20px;
  background: linear-gradient(135deg, #d9dee8, #ffffff);
  border: 5px solid rgba(255,255,255,.9);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  position: absolute; left: 28px; top: 84px; z-index: 3;
}
.land-card .person-data {
  position: absolute; left: 160px; top: 90px; right: 24px; z-index: 3;
}
.land-card .person-data h2 { font-size: 22px; font-weight: 900; letter-spacing: .5px; margin-bottom: 6px; }
.land-card .person-data p { font-size: 13px; font-weight: 700; margin-bottom: 18px; }
.land-card .meta {
  display: inline-block; padding: 8px 15px; border-radius: 999px;
  font-size: 11px; font-weight: 900; letter-spacing: .8px;
}

/* 46. USA Corporate Landscape */
.land-01 {
  background: radial-gradient(circle at 96% 8%, rgba(198,30,50,.28), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f3f7ff 55%, #dde8ff 100%);
}
.land-01::before {
  content: ""; position: absolute; width: 190px; height: 320px;
  left: -95px; top: -20px; background: #123c7c; transform: skewX(-14deg);
}
.land-01::after {
  content: ""; position: absolute; width: 150px; height: 150px;
  right: -48px; bottom: -48px; background: #c51d34; border-radius: 50%;
}
.land-01 .brand-area {
  display: flex; gap: 12px; align-items: center;
  position: relative; z-index: 3; color: #123c7c;
}
.land-01 .logo-mark {
  width: 46px; height: 46px; border-radius: 14px; background: #123c7c;
  color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 23px;
}
.land-01 h4 { font-size: 15px; font-weight: 900; letter-spacing: 1px; }
.land-01 span { font-size: 11px; font-weight: 700; color: #59677d; }
.land-01 .person-data h2 { color: #123c7c; }
.land-01 .person-data p { color: #4e5e76; }
.land-01 .meta { background: #123c7c; color: #fff; }
.land-01 .barcode-line {
  width: 170px; height: 28px; margin-top: 18px;
  background: repeating-linear-gradient(90deg, #111 0 3px, transparent 3px 7px); opacity: .8;
}

/* 47. UK University Landscape */
.land-02 {
  background: linear-gradient(135deg, #06193e 0%, #07142c 60%, #020713 100%); color: #fff;
}
.land-02::before {
  content: ""; position: absolute; width: 380px; height: 90px;
  right: -70px; top: 72px; background: rgba(200,16,46,.88); transform: rotate(-18deg);
}
.land-02::after {
  content: ""; position: absolute; inset: 16px; border-radius: 20px;
  border: 2px solid rgba(255,255,255,.17);
}
.land-02 .uk-band {
  position: absolute; left: 0; top: 0; right: 0; height: 44px;
  background: rgba(255,255,255,.95); color: #06193e;
  display: flex; align-items: center; padding-left: 26px;
  font-size: 12px; font-weight: 900; letter-spacing: 1.4px; z-index: 3;
}
.land-02 .person-data h2 { color: #fff; }
.land-02 .person-data p { color: #d7e2ff; }
.land-02 .meta { background: #fff; color: #06193e; }
.land-02 .crest-box {
  position: absolute; right: 24px; bottom: 24px;
  width: 54px; height: 54px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85);
  display: grid; place-items: center; font-weight: 900; z-index: 4;
}

/* 48. Canada Health Landscape */
.land-03 {
  background: linear-gradient(135deg, #ffffff 0%, #fff4f4 100%);
  border: 1px solid rgba(216,0,32,.18);
}
.land-03::before {
  content: ""; position: absolute; width: 170px; height: 260px;
  left: -65px; top: 0; background: #d80621; transform: skewX(-14deg);
}
.land-03::after {
  content: ""; position: absolute; right: -55px; top: -55px;
  width: 160px; height: 160px; background: rgba(216,0,32,.14); border-radius: 50%;
}
.land-03 .canada-symbol { position: absolute; right: 30px; top: 22px; font-size: 36px; color: #d80621; z-index: 3; }
.land-03 .brand-text { position: absolute; left: 160px; top: 28px; color: #b60018; font-size: 15px; font-weight: 900; letter-spacing: 1px; z-index: 3; }
.land-03 .person-data h2 { color: #b60018; }
.land-03 .person-data p { color: #565f6d; }
.land-03 .meta { background: #d80621; color: #fff; }
.land-03 .qr-box {
  position: absolute; right: 26px; bottom: 24px; width: 50px; height: 50px;
  background: linear-gradient(90deg, #222 10px, transparent 10px), linear-gradient(#222 10px, transparent 10px), #fff;
  background-size: 16px 16px; border: 5px solid #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.15); z-index: 4;
}

/* 49. Security Landscape */
.land-04 { background: linear-gradient(145deg, #101010, #2d2d2d); color: #fff; }
.land-04::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,204,0,.13) 0 13px, transparent 13px 26px); }
.land-04::after { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(255,204,0,.45); border-radius: 20px; }
.land-04 .security-title { position: relative; z-index: 3; background: #ffcc00; color: #111; display: inline-block; padding: 10px 18px; border-radius: 999px; font-size: 12px; font-weight: 900; letter-spacing: 1.4px; }
.land-04 .person-data h2 { color: #fff; }
.land-04 .person-data p { color: #e2e2e2; }
.land-04 .meta { background: #ffcc00; color: #111; }
.land-04 .hazard-strip { position: absolute; right: -20px; bottom: 28px; width: 190px; height: 32px; background: repeating-linear-gradient(90deg, #ffcc00 0 18px, #111 18px 36px); transform: rotate(-12deg); z-index: 3; }

/* 50. Tech Neon Landscape */
.land-05 { background: radial-gradient(circle at 92% 8%, rgba(0,255,218,.25), transparent 28%), linear-gradient(135deg, #06111f, #101827); color: #fff; }
.land-05 .tech-grid { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to right, black, transparent); }
.land-05::before { content: ""; position: absolute; right: -50px; top: -50px; width: 190px; height: 190px; border: 2px solid rgba(0,255,218,.5); border-radius: 42%; }
.land-05 .brand-text { position: absolute; left: 160px; top: 30px; color: #68fff0; font-weight: 900; font-size: 15px; letter-spacing: 1px; z-index: 3; }
.land-05 .person-data h2 { color: #68fff0; }
.land-05 .person-data p { color: #bed9e7; }
.land-05 .meta { background: rgba(104,255,240,.14); color: #68fff0; border: 1px solid rgba(104,255,240,.5); }

/* 51. Government Landscape */
.land-06 { background: linear-gradient(135deg, #fffaf0, #ffffff); }
.land-06::before { content: ""; position: absolute; inset: 18px; border-radius: 20px; border: 2px double rgba(112,75,20,.28); }
.land-06::after { content: ""; position: absolute; width: 190px; height: 190px; right: -50px; bottom: -60px; border-radius: 50%; background: rgba(154,106,32,.12); }
.land-06 .seal-mark { position: absolute; left: 28px; top: 24px; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, #8b601f, #e8c96e); color: #fff; display: grid; place-items: center; font-size: 24px; z-index: 3; }
.land-06 .brand-text { position: absolute; left: 96px; top: 40px; color: #5d3b0f; font-size: 15px; font-weight: 900; letter-spacing: 1px; z-index: 3; }
.land-06 .person-data h2 { color: #5d3b0f; }
.land-06 .person-data p { color: #68604f; }
.land-06 .meta { background: #5d3b0f; color: #fff; }

/* 52. VIP Event Landscape */
.land-07 { background: linear-gradient(135deg, #7b2ff7, #f107a3); color: #fff; }
.land-07::before { content: ""; position: absolute; width: 260px; height: 260px; left: -100px; top: -110px; border-radius: 50%; border: 42px solid rgba(255,255,255,.13); }
.land-07::after { content: ""; position: absolute; width: 170px; height: 170px; right: -55px; bottom: -55px; background: rgba(255,255,255,.14); border-radius: 50%; }
.land-07 .vip-label { position: absolute; right: 28px; top: 26px; font-size: 54px; line-height: 1; font-weight: 900; color: rgba(255,255,255,.22); letter-spacing: 3px; z-index: 2; }
.land-07 .person-data h2 { color: #fff; }
.land-07 .person-data p { color: #ffe6fb; }
.land-07 .meta { background: #fff; color: #ce0084; }

/* 53. Black Gold Landscape */
.land-08 { background: linear-gradient(135deg, #0d0d0d, #252525); color: #fff; }
.land-08::before { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(247,219,119,.45); border-radius: 20px; }
.land-08::after { content: ""; position: absolute; right: -70px; top: -80px; width: 210px; height: 210px; background: radial-gradient(circle, rgba(247,219,119,.28), transparent 65%); }
.land-08 .luxury-line { position: absolute; left: 0; top: 0; width: 100%; height: 7px; background: linear-gradient(90deg, #9d7416, #f7db77, #9d7416); }
.land-08 .brand-text { position: absolute; left: 160px; top: 30px; color: #f7db77; font-size: 15px; font-weight: 900; letter-spacing: 1px; z-index: 3; }
.land-08 .person-data h2 { color: #f7db77; }
.land-08 .person-data p { color: #dadada; }
.land-08 .meta { background: linear-gradient(90deg, #9d7416, #f7db77); color: #101010; }

/* 54. School Landscape */
.land-09 { background: linear-gradient(135deg, #ffffff 0%, #f7fbff 56%, #0057b8 56%, #004b9f 100%); }
.land-09::before { content: ""; position: absolute; right: -50px; top: -48px; width: 150px; height: 150px; background: #ffd700; border-radius: 50%; }
.land-09::after { content: ""; position: absolute; bottom: -50px; left: 80px; width: 230px; height: 130px; background: rgba(255,255,255,.13); border-radius: 50%; }
.land-09 .school-badge { position: absolute; left: 28px; top: 24px; width: 54px; height: 54px; border-radius: 16px; background: #0057b8; color: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 900; z-index: 3; }
.land-09 .brand-text { position: absolute; left: 96px; top: 40px; color: #0057b8; font-size: 15px; font-weight: 900; letter-spacing: 1px; z-index: 3; }
.land-09 .person-data h2 { color: #0057b8; }
.land-09 .person-data p { color: #ffffff; }
.land-09 .meta { background: #ffd700; color: #111; }

/* 55. Royal Staff Landscape */
.land-10 { background: linear-gradient(135deg, #ffffff 0%, #f4f7fb 55%, #dce6f2 100%); }
.land-10 .side-panel { position: absolute; left: -70px; top: 0; width: 170px; height: 260px; background: linear-gradient(180deg, #0a2342, #123c69); transform: skewX(-14deg); }
.land-10::before { content: ""; position: absolute; right: -40px; bottom: -40px; width: 150px; height: 150px; border: 22px solid rgba(10,35,66,.12); border-radius: 50%; }
.land-10::after { content: ""; position: absolute; top: 0; right: 0; width: 110px; height: 8px; background: #0a2342; border-radius: 0 0 0 12px; }
.land-10 .brand-text { position: absolute; left: 160px; top: 30px; color: #0a2342; font-size: 15px; font-weight: 900; letter-spacing: 1px; z-index: 3; }
.land-10 .person-data h2 { color: #0a2342; }
.land-10 .person-data p { color: #536170; }
.land-10 .meta { background: #0a2342; color: #fff; }

/* Light theme cards: all content z-index above decorations (don't change position) */
.card-36 [data-editable], .card-37 [data-editable], .card-38 [data-editable],
.card-39 [data-editable], .card-40 [data-editable], .card-41 [data-editable],
.card-42 [data-editable], .card-43 [data-editable], .card-44 [data-editable],
.card-45 [data-editable], .card-46 [data-editable] { z-index:3; }

.card-36 .left-panel, .card-36 .right-section { z-index:3; }
.card-37 .info-center, .card-37 .emp-id-badge { z-index:3; }
.card-38 .info-left { z-index:5; }
.card-38 .photo-frame { z-index:2; }
.card-39 .center-info, .card-39 .bottom-bar { z-index:3; }
.card-40 .info-block { z-index:3; }
.card-41 .mid-info, .card-41 .right-brand { z-index:3; }
.card-42 .row-top, .card-42 .row-main { z-index:3; }
.card-43 .top-row, .card-43 .bottom-row { z-index:3; }
.card-44 .wave-header, .card-44 .body-area { z-index:3; }
.card-45 .gradient-side, .card-45 .card-body { z-index:3; }
.card-46 .c46-header, .card-46 .c46-body, .card-46 .c46-footer { z-index:3; }

/* 46. PREMIUM EXECUTIVE */
.card-46 { background:linear-gradient(160deg,#fdfcfb,#f8f7f4); border:1px solid #e8e4dd; box-shadow:inset 0 0 0 1px rgba(255,255,255,.8); }
.card-46::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#b8860b,#daa520,#f5d76e,#daa520,#b8860b); }
.card-46 .c46-header { position:absolute; top:14px; left:18px; right:18px; display:flex; align-items:center; gap:10px; }
.card-46 .c46-logo { width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,#1a1a2e,#16213e); color:#daa520; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:900; font-family:'Playfair Display',serif; flex-shrink:0; }
.card-46 .c46-brand .org-name { font-size:12px; font-weight:900; color:#1a1a2e; letter-spacing:2.5px; font-family:'Montserrat',sans-serif; }
.card-46 .c46-brand .org-sub { font-size:7px; color:#b8860b; letter-spacing:1.5px; text-transform:uppercase; }
.card-46 .c46-badge { margin-left:auto; padding:3px 12px; border-radius:999px; background:linear-gradient(135deg,#daa520,#f5d76e); color:#1a1a2e; font-size:6px; font-weight:900; letter-spacing:2px; }
.card-46 .c46-body { position:absolute; top:58px; left:18px; right:18px; display:flex; gap:14px; align-items:flex-start; }
.card-46 .c46-body .photo-frame { width:82px; height:100px; border-radius:10px; background:linear-gradient(135deg,#f5f0e8,#ece5d8); border:2px solid #ddd4c4; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; box-shadow:0 4px 12px rgba(0,0,0,.06); }
.card-46 .c46-body .ph-icon { font-size:28px; opacity:.2; }
.card-46 .c46-info .emp-name { font-size:17px; font-weight:800; color:#1a1a2e; font-family:'Montserrat',sans-serif; margin-bottom:1px; }
.card-46 .c46-info .emp-role { font-size:8px; font-weight:700; color:#b8860b; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:6px; }
.card-46 .c46-divider { width:30px; height:2px; background:linear-gradient(90deg,#daa520,transparent); margin-bottom:6px; }
.card-46 .c46-info .emp-details { font-size:8px; color:#6b7280; line-height:1.7; }
.card-46 .c46-info .emp-details span { color:#374151; font-weight:700; }
.card-46 .c46-footer { position:absolute; bottom:10px; left:18px; right:18px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid #e8e4dd; padding-top:8px; }
.card-46 .c46-footer .emp-id-badge { padding:3px 12px; border-radius:6px; background:#1a1a2e; color:#daa520; font-size:7px; font-weight:800; letter-spacing:1.5px; }
.card-46 .c46-footer .website { font-size:7px; color:#9ca3af; letter-spacing:.5px; }

/* ======================================================
   LIGHT THEME LANDSCAPE CARDS (36-45) — UNIQUE LAYOUTS
   ====================================================== */

/* 36. SPLIT PANEL — blue left panel, white right */
.card-36 { background:#fff; border:1px solid #e2e8f0; }
.card-36 .left-panel { position:absolute; left:0; top:0; bottom:0; width:140px; background:linear-gradient(180deg,#1e40af,#3b82f6); border-radius:14px 0 0 14px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; }
.card-36 .left-panel .photo-frame { width:70px; height:70px; border-radius:50%; background:rgba(255,255,255,.2); border:2px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:8px; }
.card-36 .left-panel .ph-icon { font-size:24px; opacity:.5; color:#fff; }
.card-36 .panel-name { color:#fff; font-size:10px; font-weight:800; text-align:center; }
.card-36 .panel-role { color:rgba(255,255,255,.7); font-size:7px; text-align:center; letter-spacing:1px; text-transform:uppercase; }
.card-36 .right-section { position:absolute; left:155px; top:20px; right:20px; }
.card-36 .right-section .org-name { font-size:14px; font-weight:900; color:#1e40af; letter-spacing:2px; margin-bottom:2px; }
.card-36 .right-section .org-sub { font-size:8px; color:#64748b; margin-bottom:14px; }
.card-36 .right-section .emp-details { font-size:8px; color:#64748b; line-height:1.7; margin-bottom:10px; }
.card-36 .right-section .emp-details span { color:#334155; font-weight:600; }
.card-36 .right-section .emp-id-badge { display:inline-block; padding:3px 10px; border-radius:999px; background:#eff6ff; color:#1d4ed8; font-size:8px; font-weight:700; }

/* 37. TOP BANNER — coral header, photo overlapping center */
.card-37 { background:#fff; border:1px solid #fecdd3; }
.card-37 .header-band { position:absolute; top:0; left:0; right:0; height:70px; background:linear-gradient(135deg,#fb7185,#f43f5e); border-radius:14px 14px 0 0; }
.card-37 .org-name { position:absolute; top:10px; left:0; right:0; text-align:center; font-size:11px; font-weight:900; color:#fff; letter-spacing:3px; z-index:1; }
.card-37 .photo-frame { position:absolute; top:35px; left:50%; transform:translateX(-50%); width:68px; height:68px; border-radius:50%; background:#fff; border:3px solid #fff; display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,.1); z-index:2; }
.card-37 .ph-icon { font-size:24px; opacity:.3; }
.card-37 .info-center { position:absolute; top:112px; left:0; right:0; text-align:center; }
.card-37 .info-center .emp-name { font-size:15px; font-weight:800; color:#1c1917; }
.card-37 .info-center .emp-role { font-size:8px; color:#e11d48; letter-spacing:1.5px; text-transform:uppercase; margin:2px 0 6px; }
.card-37 .info-center .emp-details { font-size:7px; color:#78716c; }
.card-37 .info-center .emp-details span { color:#44403c; font-weight:600; }
.card-37 .emp-id-badge { position:absolute; bottom:14px; right:16px; padding:3px 10px; border-radius:999px; background:#fff1f2; color:#be123c; font-size:7px; font-weight:700; }

/* 38. RIGHT PHOTO — photo flush right, info left, green accent */
.card-38 { background:#fff; border:1px solid #d1fae5; }
.card-38 .accent-top { position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#10b981,#34d399); }
.card-38 .info-left { position:absolute; left:20px; top:20px; width:220px; }
.card-38 .info-left .org-name { font-size:13px; font-weight:900; color:#047857; letter-spacing:2px; }
.card-38 .info-left .org-sub { font-size:7px; color:#6ee7b7; letter-spacing:1px; margin-bottom:12px; }
.card-38 .info-left .emp-name { font-size:16px; font-weight:800; color:#064e3b; margin-bottom:2px; }
.card-38 .info-left .emp-role { font-size:9px; font-weight:600; color:#10b981; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
.card-38 .info-left .emp-details { font-size:8px; color:#6b7280; line-height:1.6; margin-bottom:6px; }
.card-38 .info-left .emp-details span { color:#374151; font-weight:600; }
.card-38 .info-left .emp-id-badge { display:inline-block; padding:3px 10px; border-radius:999px; background:#ecfdf5; color:#047857; font-size:8px; font-weight:700; }
.card-38 .photo-frame { position:absolute; right:0; top:0; bottom:0; width:130px; border-radius:0 14px 14px 0; background:#ecfdf5; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.card-38 .ph-icon { font-size:36px; opacity:.2; }

/* 39. CENTERED — everything centered, lavender, elegant */
.card-39 { background:linear-gradient(180deg,#faf5ff,#f5f3ff); border:1px solid #e9d5ff; text-align:center; }
.card-39 .org-name { position:absolute; top:12px; left:0; right:0; text-align:center; font-size:10px; font-weight:900; color:#7c3aed; letter-spacing:3px; }
.card-39 .photo-frame { position:absolute; top:30px; left:50%; transform:translateX(-50%); width:60px; height:60px; border-radius:50%; background:#fff; border:2px solid #ddd6fe; display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 4px 12px rgba(124,58,237,.08); }
.card-39 .ph-icon { font-size:22px; opacity:.3; }
.card-39 .center-info { position:absolute; top:98px; left:0; right:0; text-align:center; }
.card-39 .center-info .emp-name { font-size:16px; font-weight:800; color:#1e1b4b; }
.card-39 .center-info .emp-role { font-size:7px; color:#7c3aed; letter-spacing:1.5px; text-transform:uppercase; margin-top:2px; }
.card-39 .bottom-bar { position:absolute; bottom:12px; left:20px; right:20px; display:flex; justify-content:space-between; align-items:center; font-size:7px; color:#a78bfa; }
.card-39 .bottom-bar .emp-id-badge { padding:2px 8px; border-radius:999px; background:#f5f3ff; color:#6d28d9; font-weight:700; border:1px solid #ddd6fe; }

/* 40. DIAGONAL — sky blue diagonal split */
.card-40 { background:#fff; border:1px solid #bae6fd; overflow:hidden; }
.card-40 .diag-bg { position:absolute; top:0; left:0; width:60%; height:100%; background:linear-gradient(135deg,#e0f2fe,#f0f9ff); clip-path:polygon(0 0,100% 0,75% 100%,0 100%); }
.card-40 .info-block { position:absolute; left:20px; top:22px; z-index:1; }
.card-40 .info-block .org-name { font-size:11px; font-weight:900; color:#0369a1; letter-spacing:2px; margin-bottom:10px; }
.card-40 .info-block .emp-name { font-size:15px; font-weight:800; color:#0c4a6e; margin-bottom:2px; }
.card-40 .info-block .emp-role { font-size:8px; color:#0284c7; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
.card-40 .info-block .emp-details { font-size:7px; color:#64748b; line-height:1.6; margin-bottom:6px; }
.card-40 .info-block .emp-details span { color:#334155; font-weight:600; }
.card-40 .info-block .emp-id-badge { display:inline-block; padding:2px 8px; border-radius:999px; background:#e0f2fe; color:#0369a1; font-size:7px; font-weight:700; }
.card-40 .photo-frame { position:absolute; right:20px; top:50%; transform:translateY(-50%); width:100px; height:120px; border-radius:12px; background:#f0f9ff; border:2px solid #7dd3fc; display:flex; align-items:center; justify-content:center; overflow:hidden; z-index:1; box-shadow:0 6px 20px rgba(3,105,161,.1); }
.card-40 .ph-icon { font-size:32px; opacity:.3; }

/* 41. THREE COLUMN — amber stripe, photo, info, brand right */
.card-41 { background:linear-gradient(135deg,#fffbeb,#fff); border:1px solid #fde68a; }
.card-41 .side-stripe { position:absolute; left:0; top:0; bottom:0; width:8px; background:linear-gradient(180deg,#f59e0b,#d97706); border-radius:14px 0 0 14px; }
.card-41 .photo-frame { position:absolute; left:22px; top:50%; transform:translateY(-50%); width:75px; height:90px; border-radius:8px; background:#fffbeb; border:2px solid #fcd34d; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.card-41 .ph-icon { font-size:28px; opacity:.3; }
.card-41 .mid-info { position:absolute; left:110px; top:30px; width:160px; }
.card-41 .mid-info .emp-name { font-size:15px; font-weight:800; color:#451a03; margin-bottom:2px; }
.card-41 .mid-info .emp-role { font-size:8px; color:#d97706; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
.card-41 .mid-info .emp-details { font-size:7px; color:#78716c; line-height:1.6; }
.card-41 .mid-info .emp-details span { color:#44403c; font-weight:600; }
.card-41 .right-brand { position:absolute; right:16px; top:50%; transform:translateY(-50%); text-align:right; }
.card-41 .right-brand .org-name { font-size:18px; font-weight:900; color:#92400e; line-height:1.1; letter-spacing:1px; }
.card-41 .right-brand .emp-id-badge { display:inline-block; margin-top:8px; padding:3px 10px; border-radius:999px; background:#fef3c7; color:#92400e; font-size:7px; font-weight:700; }

/* 42. MINIMAL ROW — ultra-clean, thin top line, horizontal rows */
.card-42 { background:#fff; border:1px solid #e2e8f0; }
.card-42 .thin-line { position:absolute; top:0; left:0; right:0; height:2px; background:#334155; }
.card-42 .row-top { position:absolute; top:14px; left:18px; right:18px; display:flex; justify-content:space-between; align-items:baseline; }
.card-42 .row-top .org-name { font-size:11px; font-weight:900; color:#0f172a; letter-spacing:2px; }
.card-42 .row-top .org-sub { font-size:7px; color:#94a3b8; }
.card-42 .row-main { position:absolute; top:42px; left:18px; right:18px; display:flex; align-items:center; gap:14px; }
.card-42 .row-main .photo-frame { width:80px; height:95px; border-radius:8px; background:#f8fafc; border:1px solid #e2e8f0; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.card-42 .row-main .ph-icon { font-size:28px; opacity:.2; }
.card-42 .row-main .info-block { flex:1; }
.card-42 .row-main .emp-name { font-size:15px; font-weight:800; color:#0f172a; margin-bottom:1px; }
.card-42 .row-main .emp-role { font-size:8px; color:#64748b; letter-spacing:1px; text-transform:uppercase; margin-bottom:4px; }
.card-42 .row-main .emp-details { font-size:7px; color:#94a3b8; }
.card-42 .row-main .emp-details span { color:#475569; font-weight:600; }
.card-42 .row-main .emp-id-badge { padding:4px 12px; border-radius:6px; background:#0f172a; color:#fff; font-size:7px; font-weight:700; letter-spacing:1px; flex-shrink:0; align-self:flex-start; }

/* 43. LUXURY FRAME — rose gold double border, top row layout */
.card-43 { background:linear-gradient(135deg,#fff7ed,#fff); border:1px solid #fed7aa; }
.card-43 .double-border { position:absolute; inset:6px; border:1px solid rgba(194,149,107,.25); border-radius:10px; pointer-events:none; }
.card-43 .top-row { position:absolute; top:20px; left:20px; display:flex; align-items:center; gap:12px; }
.card-43 .top-row .photo-frame { width:65px; height:65px; border-radius:50%; background:#fffbf5; border:2px solid #f5d0a9; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.card-43 .top-row .ph-icon { font-size:22px; opacity:.25; }
.card-43 .top-row .name-block .emp-name { font-size:16px; font-weight:800; color:#431407; font-family:'Playfair Display',serif; }
.card-43 .top-row .name-block .emp-role { font-size:8px; color:#c2956b; letter-spacing:1px; text-transform:uppercase; }
.card-43 .org-name { position:absolute; top:22px; right:24px; font-size:10px; font-weight:900; color:#9a3412; letter-spacing:2px; font-family:'Playfair Display',serif; }
.card-43 .bottom-row { position:absolute; bottom:16px; left:20px; right:20px; display:flex; justify-content:space-between; align-items:center; font-size:7px; color:#c2956b; }
.card-43 .bottom-row .emp-id-badge { padding:3px 10px; border-radius:999px; background:#fff7ed; color:#9a3412; font-weight:700; border:1px solid #fed7aa; }

/* 44. WAVE HEADER — teal wave top, body with photo right */
.card-44 { background:#fff; border:1px solid #a5f3fc; }
.card-44 .wave-header { position:absolute; top:0; left:0; right:0; height:65px; background:linear-gradient(135deg,#06b6d4,#22d3ee); border-radius:14px 14px 0 0; padding:14px 20px; }
.card-44 .wave-header .org-name { font-size:12px; font-weight:900; color:#fff; letter-spacing:2px; }
.card-44 .wave-header .org-sub { font-size:7px; color:rgba(255,255,255,.7); letter-spacing:1px; }
.card-44 .body-area { position:absolute; top:72px; left:20px; right:20px; bottom:14px; display:flex; gap:14px; }
.card-44 .body-area .info-block { flex:1; }
.card-44 .body-area .emp-name { font-size:15px; font-weight:800; color:#164e63; margin-bottom:2px; }
.card-44 .body-area .emp-role { font-size:8px; color:#0891b2; letter-spacing:1px; text-transform:uppercase; margin-bottom:5px; }
.card-44 .body-area .emp-details { font-size:7px; color:#64748b; line-height:1.6; margin-bottom:5px; }
.card-44 .body-area .emp-details span { color:#334155; font-weight:600; }
.card-44 .body-area .emp-id-badge { display:inline-block; padding:2px 8px; border-radius:999px; background:#ecfeff; color:#155e75; font-size:7px; font-weight:700; }
.card-44 .body-area .photo-frame { width:90px; height:108px; border-radius:10px; background:#ecfeff; border:2px solid #67e8f9; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.card-44 .body-area .ph-icon { font-size:30px; opacity:.3; }

/* 45. GRADIENT SIDEBAR — indigo gradient left sidebar, clean white body */
.card-45 { background:#fff; border:1px solid #e0e7ff; }
.card-45 .gradient-side { position:absolute; left:0; top:0; bottom:0; width:100px; background:linear-gradient(180deg,#4338ca,#6366f1,#818cf8); border-radius:14px 0 0 14px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:14px 10px; }
.card-45 .gradient-side .org-name { font-size:14px; font-weight:900; color:#fff; text-align:center; line-height:1.2; letter-spacing:1px; }
.card-45 .gradient-side .org-sub { font-size:6px; color:rgba(255,255,255,.6); letter-spacing:1.5px; text-transform:uppercase; margin-top:4px; }
.card-45 .card-body { position:absolute; left:115px; top:20px; right:16px; bottom:16px; display:flex; gap:12px; }
.card-45 .card-body .photo-frame { width:80px; height:95px; border-radius:10px; background:#f5f3ff; border:2px solid #e0e7ff; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.card-45 .card-body .ph-icon { font-size:28px; opacity:.3; }
.card-45 .card-body .info-block { flex:1; }
.card-45 .card-body .emp-name { font-size:15px; font-weight:800; color:#1e1b4b; margin-bottom:2px; }
.card-45 .card-body .emp-role { font-size:8px; color:#6366f1; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
.card-45 .card-body .emp-details { font-size:7px; color:#6b7280; line-height:1.7; margin-bottom:6px; }
.card-45 .card-body .emp-details span { color:#374151; font-weight:600; }
.card-45 .card-body .emp-id-badge { display:inline-block; padding:2px 8px; border-radius:999px; background:#eef2ff; color:#4338ca; font-size:7px; font-weight:700; }


  .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; }
  .idcard-page-sub { text-align:center; color:#94a3b8; margin:0 0 30px; font-size:14px; font-family:'Poppins',sans-serif; }

.country-heading {
  width:100%;
  text-align:center;
  padding:30px 0 10px;
  color:#e2e8f0;
  font-size:22px;
  font-weight:800;
  letter-spacing:2px;
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:20px;
}
.country-heading span { font-size:32px; margin-right:8px; vertical-align:middle; }
.country-heading small { display:block; color:#64748b; font-size:12px; font-weight:400; letter-spacing:1px; margin-top:4px; }

/* ===== EDITOR OVERLAY ===== */
/* ===== SAVED CARDS STRIP ===== */
/* Saved panel - left vertical */
.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;
}
.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); }
.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;
}
.editor-save-btn { background:#10b981; border-color:#10b981; }
.editor-save-btn:hover { background:#059669; }
.editor-flip-btn {
  padding:6px 16px;
  border-radius:8px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  border:1px solid #6366f1;
  background:#6366f1;
  color:#fff;
}
.editor-flip-btn:hover { background:#4f46e5; }
.editor-flip-btn.is-back { background:#f59e0b; border-color:#f59e0b; }
.editor-flip-btn.is-back:hover { background:#d97706; }
.editor-card-back > * {
  transform:scale(1.3) !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;
}
.editor-overlay.dark .editor-flip-btn { border-color:#6366f1; }
.editor-tool-btn {
  padding:6px 12px;
  border-radius:8px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  border:1px solid #cbd5e1;
  background:#fff;
  color:#334155;
  white-space:nowrap;
}
.editor-tool-btn:hover { background:#f1f5f9; }
.editor-overlay.dark .editor-tool-btn { background:#1e293b; border-color:rgba(255,255,255,.12); color:#e2e8f0; }
.editor-overlay.dark .editor-tool-btn:hover { background:#334155; }

/* ===== 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-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; }
.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; }
.back-color-wrap { display:inline-flex; align-items:center; }
.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 - LIGHT (default) ===== */
.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;
}
.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-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: Saved + 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; }
/* Dark mode for topbar tools */
.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); }

/* 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; }
.editor-overlay.dark .sheet-page-info { color:#94a3b8; }

/* Dark mode for sheet panel */
.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-card-wrap {
  position:relative;
  box-shadow:0 10px 40px rgba(0,0,0,.12);
  border-radius:16px;
  flex-shrink:0;
}
.editor-card-wrap > * {
  transform:scale(1.3) !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;
}

/* ===== TEXT POPUP - LIGHT ===== */
.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 - LIGHT ===== */
.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; }

/* ===== EDITOR - 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 .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);
}
/* Edit popup fields - light */
.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; }

/* Edit popup fields - dark */
.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); }

/* ===== 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; }
.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); }

/* 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;
}

/* Portrait photo hard fix: keep uploaded photo above frame background and use JS crop only */
.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;
}

/* ===== MOBILE RESPONSIVE — EDITOR ===== */
@media(max-width:768px){
  /* Topbar: scrollable, wrap */
  .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; }
  .editor-actions { display:flex; gap:4px; }
  .et-sep { display:none; }
  .et-color-wrap span { font-size:9px; }

  /* Saved panel hidden, right panel becomes bottom bar */
  .saved-panel { display:none !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; }

  /* Center card area: full width, scrollable */
  .editor-canvas-area { padding:0; flex-direction:column !important; }
  .editor-center {
    flex:1; padding:10px; overflow:auto;
    justify-content:center; align-items:flex-start;
  }

  /* Scale card down on mobile */
  .editor-card-wrap { margin:0 auto; }
  .editor-card-wrap > * {
    transform:scale(0.85) !important;
    transform-origin:top center !important;
  }
  .editor-card-back > * {
    transform:scale(0.85) !important;
    transform-origin:top center !important;
  }

  /* Popups: fixed bottom center on mobile */
  .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 */
  .qr-delete-tip {
    position:fixed !important;
    left:50% !important; bottom:60px !important; top:auto !important;
    transform:translateX(-50%);
  }
}

@media(max-width:400px){
  .editor-card-wrap > * {
    transform:scale(0.7) !important;
    transform-origin:top center !important;
  }
  .editor-card-back > * {
    transform:scale(0.7) !important;
    transform-origin:top center !important;
  }
  .et-btn { font-size:9px; padding:4px 6px; }
}