*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,'Helvetica Neue',Arial,sans-serif}body{background:#0a0e1a;color:#fff;min-height:100vh;padding:30px 18px}.wrap{max-width:900px;margin:0 auto}.hdr{text-align:center;margin-bottom:30px}.hdr h1{color:#FFD700;font-family:Georgia,serif;font-size:32px;letter-spacing:1px}.hdr .sub{color:rgba(255,255,255,.65);font-size:14px;margin-top:8px;line-height:1.5}.vbox{margin-bottom:50px;text-align:center}.vbox .vlb{display:inline-block;padding:6px 22px;border-radius:18px;font-size:11px;letter-spacing:3px;font-weight:900;margin-bottom:6px;border:1px solid}.vbox .ttl{color:rgba(255,255,255,.55);font-size:12px;letter-spacing:4px;margin-bottom:18px}.faces{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:820px;margin:0 auto}@media(max-width:720px){.faces{grid-template-columns:1fr}}.flb{font-size:11px;color:rgba(255,255,255,.5);letter-spacing:3px;margin-top:8px}.mak{font-size:11px;color:rgba(255,255,255,.55);margin-top:14px;letter-spacing:1px}

/* ─── KAT BASE — 1.586:1 (ISO 7810 ID-1) ─── */
.kard{position:relative;width:100%;aspect-ratio:1.586;border-radius:12px;overflow:hidden;box-shadow:0 14px 38px rgba(0,0,0,.55);font-size:11px}
.kard *{font-family:-apple-system,'Helvetica Neue',Arial,sans-serif}
.kard .stripe{position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#00209F 0%,#00209F 50%,#D21034 50%,#D21034 100%)}
.kard .hdrbar{position:absolute;top:8px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:0 16px;z-index:5}
.kard .hdr-rep{font-family:Georgia,serif;font-size:10px;letter-spacing:1.5px;font-weight:700}
.kard .hdr-sub{font-size:7px;letter-spacing:2px;opacity:.75;margin-top:1px}
.kard .hdr-right{font-size:8px;letter-spacing:2px;text-align:right;opacity:.8}
.kard .body{position:absolute;top:46px;left:16px;right:16px;bottom:36px;display:grid;grid-template-columns:90px 1fr;gap:14px;z-index:4}
.kard .left-col{display:flex;flex-direction:column;align-items:center;gap:8px}
.kard .foto{width:88px;height:108px;background:linear-gradient(180deg,#3a4555 0%,#252d3a 50%,#1a1f29 100%);border-radius:3px;position:relative;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.kard .foto::before{content:"";position:absolute;top:18%;left:50%;transform:translateX(-50%);width:32%;height:32%;background:#5a6577;border-radius:50%}
.kard .foto::after{content:"";position:absolute;bottom:0;left:25%;width:50%;height:48%;background:#5a6577;border-radius:50% 50% 0 0}
.kard .chip{position:absolute;top:80px;left:56px;width:30px;height:22px;background:linear-gradient(135deg,#daa520 0%,#FFD700 35%,#daa520 70%,#996b00 100%);border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.5);z-index:6}
.kard .chip::before{content:"";position:absolute;inset:2px;border:0.5px solid rgba(0,0,0,.35);border-radius:2px;background-image:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.2) 30%,rgba(0,0,0,.2) 32%,transparent 32%,transparent 48%,rgba(0,0,0,.2) 48%,rgba(0,0,0,.2) 50%,transparent 50%,transparent 68%,rgba(0,0,0,.2) 68%,rgba(0,0,0,.2) 70%,transparent 70%)}
.kard .info{display:flex;flex-direction:column}
.kard .nm-lb{font-size:7px;letter-spacing:2px;opacity:.55;margin-bottom:1px}
.kard .nm{font-family:'Playfair Display',Georgia,serif;font-size:17px;line-height:1.15;font-weight:600;margin-bottom:10px}
.kard .nm em{font-style:italic;font-weight:400}
.kard .fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px 11px;font-size:10px}
.kard .f-lb{font-size:6.5px;letter-spacing:1.5px;opacity:.6;margin-bottom:1px;text-transform:uppercase}
.kard .f-val{font-size:10px;font-weight:600;line-height:1.2}
.kard .pluscode{position:absolute;bottom:42px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:flex-end;font-size:9px;z-index:4}
.kard .pluscode .pc-lb{font-size:6.5px;letter-spacing:1.5px;opacity:.6;margin-bottom:1px}
.kard .pluscode .pc-val{font-size:9.5px;font-weight:600}
.kard .uv-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(0,0,0,.4);border:1px solid;padding:3px 9px;border-radius:11px;font-size:8px;letter-spacing:1.5px;font-weight:700;text-transform:uppercase}
.kard .uv-dot{width:6px;height:6px;border-radius:50%}
.kard .mrz{position:absolute;bottom:0;left:0;right:0;height:30px;background:rgba(0,0,0,.18);font-family:'Courier New',monospace;font-size:8px;letter-spacing:0.5px;padding:5px 10px;display:flex;flex-direction:column;justify-content:center;color:rgba(255,255,255,.55);overflow:hidden;white-space:nowrap}

/* Back layout */
.kard.back .body-bk{position:absolute;top:46px;left:16px;right:16px;bottom:36px;display:grid;grid-template-columns:1fr auto;gap:14px;z-index:4}
.kard.back .qr-bk{width:78px;height:78px;background:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#000;font-size:8px;font-weight:900;position:relative;align-self:flex-start;justify-self:flex-end}
.kard.back .qr-bk::before{content:"";position:absolute;inset:6px;background-image:repeating-linear-gradient(90deg,#000 0,#000 2px,#fff 2px,#fff 4px),repeating-linear-gradient(0deg,#000 0,#000 2px,#fff 2px,#fff 4px);background-blend-mode:multiply;opacity:.95}
.kard.back .sig-area{margin-bottom:12px}
.kard.back .sig-line{height:22px;background:rgba(255,255,255,.08);border-bottom:1px solid currentColor;display:flex;align-items:flex-end;padding:0 6px;font-family:'Brush Script MT','Lucida Handwriting',cursive;font-size:14px;font-style:italic;color:inherit}
.kard.back .verified-bx{text-align:center;margin-left:12px}
.kard.back .check{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;margin:0 auto 4px}
.kard.back .check-lb{font-size:7.5px;letter-spacing:2px;line-height:1.4}

/* ─── V1 BLEU PWOFON · NÈG MAWON ─── */
.v1 .kard{background:linear-gradient(135deg,#0a1638 0%,#0d1c4a 50%,#091433 100%);color:#fff;border:1px solid rgba(255,215,0,.15)}
.v1 .kard.front .nm{color:#FFD700}
.v1 .vbox .vlb{background:rgba(13,28,74,.6);border-color:#0d1c4a;color:#7da4ff}
.v1 .kard .f-val{color:#fff}
.v1 .kard .pc-val{color:#FFD700}
.v1 .kard.front::before{content:"";position:absolute;top:50%;right:-30px;transform:translateY(-50%);width:240px;height:240px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 5c-3 0-8 2-10 8-2 5-1 12-1 18 0 4-3 5-3 12 0 5 2 9 2 9s-2 2-2 7v6l-4 8-3 8 1 3 5-2 3 6 4 1 3-3 3 5h6l3-5 3 3 4-1 3-6 5 2 1-3-3-8-4-8v-6c0-5-2-7-2-7s2-4 2-9c0-7-3-8-3-12 0-6 1-13-1-18-2-6-7-8-10-8z" fill="%23FFD700" opacity="0.06"/><path d="M70 35c5-2 12-3 18 0 5 2 8 8 7 14-1 4-5 6-8 4" fill="none" stroke="%23FFD700" stroke-width="2" opacity="0.06"/></svg>') center/contain no-repeat;z-index:1;pointer-events:none}
.v1 .kard.front .uv-badge{color:#FFD700;border-color:#FFD700;background:rgba(255,215,0,.08)}
.v1 .kard.front .uv-dot{background:#FFD700;box-shadow:0 0 8px #FFD700}
.v1 .kard.back{background:linear-gradient(135deg,#0a1638 0%,#0d1c4a 100%)}
.v1 .kard.back .tk-brand{font-family:Georgia,serif;font-size:18px;letter-spacing:5px;font-weight:900;color:#FFD700}
.v1 .kard.back .check{background:#FFD700;color:#0a1638}
.v1 .kard.back .check-lb{color:#FFD700}
.v1 .kard.back .sig-line{color:#FFD700;font-style:italic}

/* ─── V2 IVWA PRESIZYON · LA CITADELLE ─── */
.v2 .kard{background:linear-gradient(135deg,#f5efe2 0%,#ebe3d2 100%);color:#0a1638;border:1px solid rgba(0,32,159,.15)}
.v2 .vbox .vlb{background:#ebe3d2;border-color:#c5b894;color:#5a4a2a}
.v2 .kard.front .hdrbar{background:linear-gradient(90deg,#0a1638 0%,#0d1c4a 100%);height:34px;top:0;padding:4px 16px;color:#fff}
.v2 .kard.front .hdrbar::before{content:"🌴";position:absolute;right:14px;font-size:18px;color:#FFD700;opacity:.8}
.v2 .kard.front .body{top:50px}
.v2 .kard.front .stripe{top:34px}
.v2 .kard.front .nm{color:#0a1638}
.v2 .kard.front em{color:#5a4a2a}
.v2 .kard .f-val{color:#0a1638}
.v2 .kard .f-lb{color:#5a4a2a}
.v2 .kard .pc-val{color:#0a1638}
.v2 .kard.front::before{content:"";position:absolute;bottom:36px;right:10px;width:210px;height:120px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210 120"><path d="M30 110 L30 70 L50 50 L75 30 L105 15 L135 30 L160 50 L180 70 L180 110 Z M50 70 L50 100 M70 60 L70 100 M90 45 L90 100 M105 35 L105 100 M120 45 L120 100 M140 60 L140 100 M160 70 L160 100" fill="rgba(10,22,56,0.08)" stroke="rgba(10,22,56,0.1)" stroke-width="1"/></svg>') no-repeat center/contain;z-index:1;pointer-events:none}
.v2 .kard.front .uv-badge{color:#0a1638;border-color:#0a1638;background:rgba(255,255,255,.5)}
.v2 .kard.front .uv-dot{background:#FFD700}
.v2 .kard.front .mrz{background:rgba(10,22,56,.08);color:rgba(10,22,56,.55)}
.v2 .kard.back{background:linear-gradient(135deg,#f5efe2 0%,#ebe3d2 100%);color:#0a1638}
.v2 .kard.back .hdrbar{background:linear-gradient(90deg,#0a1638 0%,#0d1c4a 100%);height:34px;top:0;padding:4px 16px;color:#fff}
.v2 .kard.back .stripe{top:34px}
.v2 .kard.back .body-bk{top:50px}
.v2 .kard.back .tk-brand{color:#FFD700}
.v2 .kard.back .check{background:#0a1638;color:#FFD700}
.v2 .kard.back .check-lb{color:#0a1638}
.v2 .kard.back .sig-line{color:#0a1638;font-style:italic;border-color:#5a4a2a}
.v2 .kard.back .mrz{background:rgba(10,22,56,.08);color:rgba(10,22,56,.5)}

/* ─── V3 OBSIDYEN WOUJ · KOK KALITE ─── */
.v3 .kard{background:linear-gradient(135deg,#3a0a0e 0%,#5a0d12 50%,#280608 100%);color:#fff;border:1px solid rgba(255,215,0,.15)}
.v3 .vbox .vlb{background:rgba(90,13,18,.6);border-color:#5a0d12;color:#ff9999}
.v3 .kard.front .nm{color:#fff}
.v3 .kard .f-val{color:#fff}
.v3 .kard .pc-val{color:#FFD700}
.v3 .kard.front::before{content:"";position:absolute;top:50%;right:-20px;transform:translateY(-50%);width:200px;height:200px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M30 70 Q25 55 35 45 Q30 35 40 30 Q42 22 50 22 Q55 18 60 22 Q70 20 75 30 L72 34 L78 35 L74 40 L80 42 L70 50 Q72 60 65 65 Q68 75 60 78 L55 80 L60 88 L40 88 L42 80 Q35 78 35 72 Z" fill="%23D21034" opacity="0.1"/><path d="M55 25 L60 17 L65 20 L62 26 Z" fill="%23D21034" opacity="0.1"/></svg>') center/contain no-repeat;z-index:1;pointer-events:none}
.v3 .kard.front .uv-badge{color:#FFD700;border-color:#D21034;background:rgba(210,16,52,.2)}
.v3 .kard.front .uv-dot{background:#D21034;box-shadow:0 0 8px #D21034}
.v3 .kard.back{background:linear-gradient(135deg,#3a0a0e 0%,#5a0d12 100%)}
.v3 .kard.back .tk-brand{color:#FFD700}
.v3 .kard.back .check{background:#D21034;color:#fff}
.v3 .kard.back .check-lb{color:#FFD700}
.v3 .kard.back .sig-line{color:#FFD700;font-style:italic}

.actions{display:flex;justify-content:center;gap:10px;margin-top:24px}
.actions a{padding:11px 22px;background:rgba(255,215,0,.1);border:1px solid #FFD700;color:#FFD700;border-radius:8px;text-decoration:none;font-size:13px;font-weight:700}
.actions a.alt{background:#FFD700;color:#001870}
.foot{text-align:center;color:rgba(255,255,255,.45);font-size:12px;margin-top:30px;line-height:1.7}.foot a{color:#FFD700}