*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  min-height:100vh;min-height:100dvh;
  display:flex;align-items:flex-start;justify-content:center;
  padding:24px 16px;-webkit-font-smoothing:antialiased;
}
.defs-svg{position:absolute;width:0;height:0;}

/* ---------- base card layout (identical across themes) ---------- */
.card{
  width:420px;max-width:100%;border-radius:28px;overflow:hidden;position:relative;
  margin:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
  opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;
}
.card.in{opacity:1;transform:none;}

.topbar{position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;z-index:15;}
.iconbtn{width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;
  background:rgba(255,255,255,.22);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .12s ease;}
.iconbtn:active{transform:scale(.92);}
.iconbtn svg{width:18px;height:18px;}

.hero{height:160px;position:relative;}
.avatar{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:34px;
  position:absolute;left:50%;bottom:-52px;transform:translateX(-50%);overflow:hidden;z-index:5;}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;}

.body{padding:68px 24px 26px;text-align:center;display:flex;flex-direction:column;}
.body h1{font-size:24px;font-weight:700;letter-spacing:-0.01em;line-height:1.15;}
.role{font-weight:600;font-size:14px;margin-top:6px;}
.co{font-size:13px;margin-top:4px;}
.chips{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:12px;}
.tagline{font-size:12.5px;line-height:1.45;margin:12px auto 0;max-width:300px;opacity:.82;}
.chip{font-size:11px;font-weight:600;padding:5px 11px;border-radius:999px;letter-spacing:.02em;}

.actions{display:flex;gap:10px;margin:24px 0 18px;}
.act{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:14px 2px;border-radius:15px;font-size:11px;font-weight:600;text-decoration:none;transition:transform .12s ease;}
.act:active{transform:scale(.95);}
.act svg{width:21px;height:21px;}

.save{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:17px;border:none;cursor:pointer;
  border-radius:17px;font-weight:700;font-size:15px;font-family:inherit;text-decoration:none;margin-bottom:22px;transition:transform .12s ease;}
.save:active{transform:scale(.98);}
.save svg{width:19px;height:19px;}

.socials{display:flex;gap:14px;justify-content:center;}
.socials .s{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;text-decoration:none;
  background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.12);transition:transform .12s ease;}
.socials .s:active{transform:scale(.92);}
.socials .s svg{width:22px;height:22px;}

/* keyboard focus visibility (a11y) */
.iconbtn:focus-visible,.act:focus-visible,.save:focus-visible,.socials .s:focus-visible,.qrclose:focus-visible{
  outline:2px solid #2f81f7;outline-offset:3px;
}

/* ---------- QR overlay (full viewport, dialog) ---------- */
.qroverlay{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:rgba(8,8,10,.84);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fade .2s ease;}
.qrclose{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;font-size:20px;}
.qrcard{background:#fff;border-radius:24px;padding:26px;display:flex;flex-direction:column;align-items:center;gap:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);}
.qrcard svg{width:200px;height:200px;display:block;}
.qrname{color:#0e0e10;font-weight:700;font-size:17px;}
.qrhint{color:#cdd3da;font-size:13px;}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,16px);opacity:0;z-index:70;
  background:#15192b;color:#fff;padding:11px 18px;border-radius:12px;font-size:13px;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.3);transition:opacity .25s ease,transform .25s ease;}
.toast.show{opacity:1;transform:translate(-50%,0);}

@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .card,.act,.save,.iconbtn,.socials .s,.toast{transition:none;}
  .card{opacity:1;transform:none;}
  .qroverlay{animation:none;}
}

/* Phones: full-bleed edge-to-edge (no floating-card gaps); socials pinned to the
   bottom so the screen fills naturally. Larger screens keep the centered card. */
@media (max-width:600px){
  body{display:block;padding:0;}
  .card{
    width:100%;max-width:none;border-radius:0;box-shadow:none;overflow:visible;
    min-height:100vh;min-height:100dvh;
    display:flex;flex-direction:column;
  }
  .body{flex:1;}
  .socials{margin-top:auto;padding-top:24px;}
}

/* =========================================================
   THEME A · CORPORATE
   ========================================================= */
body.t-corporate{background:#eef2f7;}
body.t-corporate .card{background:#fff;color:#0f1d34;}
body.t-corporate .hero{background:linear-gradient(135deg,#1b365d,#2d5a8a);}
body.t-corporate .avatar{background:#fff;color:#1b365d;border:4px solid #fff;box-shadow:0 8px 22px rgba(0,0,0,.18);}
body.t-corporate .role{color:#2d5a8a;} body.t-corporate .co{color:#64748b;}
body.t-corporate .chip{background:#eaf0f7;color:#2d5a8a;}
body.t-corporate .act{background:#f1f5f9;color:#1b365d;}
body.t-corporate .save{background:#1b365d;color:#fff;}

/* =========================================================
   THEME B · CREATIVE
   ========================================================= */
body.t-creative{background:#f3ece1;}
body.t-creative .card{background:#faf7f2;color:#1a1a1a;}
body.t-creative .hero{background:linear-gradient(160deg,#ff6b6b,#ff8e53 45%,#ffd166);}
body.t-creative .hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.28),transparent 42%);}
body.t-creative .avatar{background:#fff;color:#ff6b6b;border:4px solid #fff;font-family:'Poppins',sans-serif;box-shadow:0 8px 22px rgba(0,0,0,.14);}
body.t-creative .body h1{font-family:'Poppins',sans-serif;font-weight:800;font-size:25px;}
body.t-creative .role{color:#ff6b6b;font-family:'Poppins',sans-serif;font-weight:700;} body.t-creative .co{color:#8a8378;}
body.t-creative .chip{background:#1a1a1a;color:#fff;}
body.t-creative .act{background:#fff;color:#1a1a1a;border:2px solid #1a1a1a;box-shadow:3px 3px 0 #1a1a1a;}
body.t-creative .save{background:#1a1a1a;color:#fff;box-shadow:4px 4px 0 #ff6b6b;}
body.t-creative .socials .s{border:2px solid #1a1a1a;box-shadow:2px 2px 0 #1a1a1a;}

/* =========================================================
   THEME C · LUXURY
   ========================================================= */
body.t-luxury{background:#070708;}
body.t-luxury .card{background:#0e0e10;color:#ede6d6;box-shadow:0 20px 60px rgba(0,0,0,.6);}
body.t-luxury .hero{background:radial-gradient(circle at 50% 30%,#23231f,#0e0e10 72%);}
body.t-luxury .avatar{background:#0e0e10;color:#c9a24b;border:1.5px solid #c9a24b;font-family:'Playfair Display',serif;}
body.t-luxury .body h1{font-family:'Playfair Display',serif;font-weight:600;font-size:27px;letter-spacing:.01em;}
body.t-luxury .role{color:#c9a24b;font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-top:10px;}
body.t-luxury .co{color:#7c766a;font-size:11px;letter-spacing:.1em;margin-top:6px;}
body.t-luxury .chip{background:transparent;border:1px solid #c9a24b;color:#c9a24b;letter-spacing:.08em;}
body.t-luxury .act{background:transparent;color:#ede6d6;border:1px solid #2b2b2e;}
body.t-luxury .act svg{color:#c9a24b;}
body.t-luxury .save{background:linear-gradient(135deg,#c9a24b,#e7c977);color:#0e0e10;letter-spacing:.04em;}
body.t-luxury .socials .s{box-shadow:0 0 0 1px #c9a24b,0 2px 8px rgba(0,0,0,.4);}

/* =========================================================
   THEME D · FRIENDLY (default)
   ========================================================= */
body.t-friendly{background:#eceefb;}
body.t-friendly .card{background:#f7f8fc;color:#15192b;}
body.t-friendly .hero{background:linear-gradient(120deg,#6366f1,#8b5cf6 50%,#ec4899);}
body.t-friendly .avatar{background:linear-gradient(135deg,#6366f1,#ec4899);color:#fff;border:5px solid #f7f8fc;box-shadow:0 10px 24px rgba(99,102,241,.35);}
body.t-friendly .role{color:#6366f1;} body.t-friendly .co{color:#7c83a3;}
body.t-friendly .chip{background:#eef0fb;color:#6366f1;}
body.t-friendly .act{background:#eef0fb;color:#4f46e5;border-radius:16px;}
body.t-friendly .save{background:linear-gradient(120deg,#6366f1,#8b5cf6);color:#fff;box-shadow:0 8px 20px rgba(99,102,241,.35);}