@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&family=Poppins:wght@500;700&family=Playfair+Display:wght@600;700&family=DM+Sans:wght@500;700&family=Lora:wght@600;700&family=Space+Grotesk:wght@500;700&family=Manrope:wght@600;700&family=Merriweather:wght@700&family=Nunito:wght@600;700&family=Fraunces:wght@600;700&family=Outfit:wght@500;700&family=Crimson+Pro:wght@600;700&family=Plus+Jakarta+Sans:wght@600;700&family=Bricolage+Grotesque:wght@600;700&family=Lexend:wght@500;700&display=swap');

/* ===================== BASE ===================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  min-height:100vh;min-height:100svh;
  display:grid;place-items:center;
  padding:44px 18px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background:var(--bg,#0a0b0f);
  color:var(--text,#f3f5f9);
  transition:background .3s ease,color .3s ease;
}
#app{width:100%;display:grid;place-items:center}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#app>*{animation:fadeUp .5s cubic-bezier(.2,.7,.3,1) both}
@media (prefers-reduced-motion:reduce){
  #app>*{animation:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ===================== SHARED BLOCKS ===================== */
.card{
  width:100%;max-width:480px;
  padding:38px 26px 28px;
  border-radius:var(--card-radius,32px);
  background:var(--card-bg);
  border:var(--card-border,1px solid transparent);
  box-shadow:var(--card-shadow,none);
  text-align:center;
  transition:background .3s ease,border-color .3s ease;
}
.card-head{
  display:flex;align-items:center;gap:20px;
  text-align:left;margin-bottom:22px;
}
.card-head .avatar-wrap{
  width:var(--avatar-size-side,110px);
  height:var(--avatar-size-side,110px);
  margin:0;
}
.card-head .avatar-init{font-size:34px}

.avatar-wrap{
  width:var(--avatar-size,140px);
  height:var(--avatar-size,140px);
  margin:0 auto 24px;
  overflow:hidden;
  flex:none;
  position:relative;
  padding:var(--avatar-padding,3px);
  background:var(--avatar-ring,transparent);
  border-radius:var(--avatar-radius,50%);
  box-shadow:var(--avatar-shadow,none);
  transform:var(--avatar-tilt,rotate(0));
}
.avatar,.avatar-init{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:var(--avatar-radius,50%);
  background:var(--avatar-bg,#171a24);
}
.avatar-init{
  display:grid;place-items:center;
  font-weight:800;font-size:44px;letter-spacing:-.02em;
  background:var(--avatar-init-bg,var(--ico-bg));
  color:var(--avatar-init-color,var(--ico-color));
}

.name{
  margin:0;
  font-size:26px;font-weight:800;
  letter-spacing:-.02em;line-height:1.15;
  color:var(--name-color,var(--text));
}
.handle{
  margin:7px 0 0;
  font-size:13px;font-weight:600;
  color:var(--handle-color,var(--text-dim,#99a2b4));
}
.bio{
  margin:18px 0 0;
  font-size:15px;line-height:1.65;
  font-weight:700;
  color:var(--bio-color,var(--text-dim,#c6cddb));
}
.card-head~.bio{margin-top:0;margin-bottom:24px}

.links{margin-top:24px;display:grid;gap:10px}
.link{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;
  font-size:14.5px;font-weight:600;
  color:var(--text);
  background:var(--link-bg);
  border:var(--link-border,1px solid transparent);
  border-radius:var(--link-radius,999px);
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
  text-align:left;
}
.link:hover{
  background:var(--link-hover,var(--link-bg));
  border-color:var(--link-hover-border,transparent);
  transform:translateY(-2px);
}
.ico{
  width:36px;height:36px;
  display:grid;place-items:center;
  flex:none;
  background:var(--ico-bg);
  color:var(--ico-color);
  border-radius:var(--ico-radius,50%);
  transition:transform .2s ease;
}
.ico svg{width:17px;height:17px;display:block}
.link:hover .ico{transform:scale(1.08)}
.label{flex:1}
.arrow{
  width:14px;height:14px;flex:none;opacity:.5;
  color:var(--arrow-color,currentColor);
  transition:transform .2s ease,opacity .2s ease;
}
.arrow svg{width:100%;height:100%;display:block}
.link:hover .arrow{opacity:1;transform:translateX(3px)}
.foot{
  margin:24px 0 0;font-size:12px;
  color:var(--foot-color,var(--text-dim));
}

/* ===================== 1 · SUNSET EMBER — classic circle ===================== */
body[data-layout="1"]{
  --bg:linear-gradient(160deg,#2a0f4a,#5e1a52 50%,#a63d4a);
  --text:#fff2e6;
  --text-dim:rgba(255,242,230,.72);
  --name-color:#ffc78a;
  --handle-color:rgba(255,242,230,.78);
  --bio-color:rgba(255,242,230,.92);
  --card-bg:rgba(255,255,255,.07);
  --card-border:1px solid rgba(255,200,150,.28);
  --card-shadow:0 30px 70px -25px rgba(0,0,0,.6);
  --card-radius:32px;
  --avatar-size:140px;
  --avatar-radius:50%;
  --avatar-ring:rgba(255,184,108,.9);
  --avatar-padding:3px;
  --avatar-shadow:0 0 26px -4px rgba(255,184,108,.6);
  --avatar-init-bg:#ffb867;
  --avatar-init-color:#4a1a3d;
  --link-bg:rgba(255,184,108,.14);
  --link-border:1px solid rgba(255,184,108,.3);
  --link-hover:rgba(255,184,108,.24);
  --link-hover-border:#ffb867;
  --link-radius:999px;
  --ico-bg:#ffb867;
  --ico-color:#4a1a3d;
  --foot-color:rgba(255,242,230,.55);
}

/* ===================== 2 · DEEP OCEAN — instagram gradient ring ===================== */
body[data-layout="2"]{
  --bg:linear-gradient(180deg,#04152b,#0a2c4e 50%,#04152b);
  --text:#e0f4ff;
  --text-dim:rgba(224,244,255,.78);
  --name-color:#7ee7ff;
  --handle-color:rgba(126,231,255,.78);
  --bio-color:rgba(224,244,255,.9);
  --card-bg:rgba(255,255,255,.05);
  --card-border:1px solid rgba(126,231,255,.2);
  --card-shadow:0 30px 80px -20px rgba(0,150,255,.3);
  --card-radius:28px;
  --avatar-size:150px;
  --avatar-radius:50%;
  --avatar-ring:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  --avatar-padding:5px;
  --avatar-shadow:0 0 38px -6px rgba(220,39,67,.65);
  --avatar-init-bg:linear-gradient(135deg,#e6683c,#cc2366);
  --avatar-init-color:#fff;
  --link-bg:rgba(0,212,255,.1);
  --link-border:1px solid rgba(0,212,255,.25);
  --link-hover:rgba(0,212,255,.2);
  --link-hover-border:#00d4ff;
  --link-radius:16px;
  --ico-bg:linear-gradient(140deg,#00d4ff,#0080c0);
  --ico-color:#04152b;
  --foot-color:rgba(126,231,255,.55);
}

/* ===================== 3 · ROSE GARDEN — sticker (tilted) ===================== */
body[data-layout="3"]{
  --bg:linear-gradient(160deg,#fff0f4,#ffe3ec 60%,#ffd4e0);
  --text:#4a2535;
  --text-dim:rgba(74,37,53,.72);
  --name-color:#d64d7a;
  --handle-color:#b8889a;
  --bio-color:#6b3f52;
  --card-bg:#ffffff;
  --card-border:1px solid rgba(214,77,122,.15);
  --card-shadow:0 25px 60px -25px rgba(214,77,122,.3);
  --card-radius:32px;
  --avatar-size:140px;
  --avatar-radius:50%;
  --avatar-ring:#ffffff;
  --avatar-padding:6px;
  --avatar-shadow:0 16px 32px -10px rgba(214,77,122,.5);
  --avatar-tilt:rotate(-2deg);
  --avatar-init-bg:#ffb0c8;
  --avatar-init-color:#fff;
  --link-bg:#fff5f9;
  --link-border:1px solid rgba(214,77,122,.15);
  --link-hover:#ffe3ec;
  --link-hover-border:#ff8ab8;
  --link-radius:999px;
  --ico-bg:#ff8ab8;
  --ico-color:#fff;
  --foot-color:#b8889a;
}

/* ===================== 4 · FOREST SAGE — organic blob ===================== */
body[data-layout="4"]{
  --bg:linear-gradient(160deg,#f0ede2,#e8e4d4);
  --text:#2d3b2a;
  --text-dim:rgba(45,59,42,.7);
  --name-color:#2d3b2a;
  --handle-color:#7a8a6e;
  --bio-color:#4a5a44;
  --card-bg:#fbf8f2;
  --card-border:1px solid rgba(90,112,72,.1);
  --card-shadow:0 25px 55px -25px rgba(45,59,42,.3);
  --card-radius:28px;
  --avatar-size:150px;
  --avatar-radius:42% 58% 55% 45% / 55% 48% 52% 45%;
  --avatar-ring:#5a7048;
  --avatar-padding:4px;
  --avatar-shadow:0 12px 30px -10px rgba(45,59,42,.45);
  --avatar-init-bg:#d4dcc8;
  --avatar-init-color:#5a7048;
  --link-bg:#e8ede0;
  --link-border:1px solid transparent;
  --link-hover:#d4dcc8;
  --link-hover-border:transparent;
  --link-radius:16px;
  --ico-bg:#5a7048;
  --ico-color:#fbf8f2;
  --ico-radius:50% 50% 50% 15%;
  --foot-color:#8a9a7e;
}

/* ===================== 5 · LAVENDER HAZE — leaf (tilted) ===================== */
body[data-layout="5"]{
  --bg:linear-gradient(160deg,#f5f0ff,#ede0ff 60%,#e0d0ff);
  --text:#3a2d4a;
  --text-dim:rgba(58,45,74,.72);
  --name-color:#7c5cbf;
  --handle-color:#a89cc4;
  --bio-color:#5c4a72;
  --card-bg:#ffffff;
  --card-border:1px solid rgba(124,92,191,.15);
  --card-shadow:0 25px 60px -25px rgba(124,92,191,.35);
  --card-radius:32px;
  --avatar-size:150px;
  --avatar-radius:50% 50% 50% 8%;
  --avatar-ring:#b8a4e8;
  --avatar-padding:4px;
  --avatar-shadow:0 12px 32px -12px rgba(124,92,191,.5);
  --avatar-tilt:rotate(-8deg);
  --avatar-init-bg:#b8a4e8;
  --avatar-init-color:#fff;
  --link-bg:#f5f0ff;
  --link-border:1px solid rgba(124,92,191,.18);
  --link-hover:#e8dfff;
  --link-hover-border:#a68ee8;
  --link-radius:999px;
  --ico-bg:#a68ee8;
  --ico-color:#fff;
  --foot-color:#a89cc4;
}

/* ===================== 6 · COFFEE HOUSE — polaroid ===================== */
body[data-layout="6"]{
  --bg:linear-gradient(160deg,#f7f0e8,#ede2d0);
  --text:#3b2a1c;
  --text-dim:rgba(59,42,28,.72);
  --name-color:#5a3a24;
  --handle-color:#a08868;
  --bio-color:#5a4636;
  --card-bg:#fbf6ee;
  --card-border:1px solid rgba(122,88,60,.12);
  --card-shadow:0 25px 55px -25px rgba(90,58,36,.3);
  --card-radius:28px;
  --avatar-size:auto;
  --avatar-radius:6px;
  --avatar-ring:#ffffff;
  --avatar-padding:8px 8px 38px;
  --avatar-shadow:0 16px 34px -12px rgba(90,58,36,.5);
  --avatar-tilt:rotate(-3deg);
  --avatar-init-bg:#c9a578;
  --avatar-init-color:#fbf6ee;
  --link-bg:#f0e6d5;
  --link-border:1px solid rgba(122,88,60,.12);
  --link-hover:#e5d5bc;
  --link-hover-border:#c9a578;
  --link-radius:14px;
  --ico-bg:#a07850;
  --ico-color:#fbf6ee;
  --foot-color:#a08868;
}
body[data-layout="6"] .avatar-wrap{
  width:140px;
  height:170px;
}
body[data-layout="6"] .avatar,
body[data-layout="6"] .avatar-init{
  border-radius:3px;
  aspect-ratio:1/1;
}

/* ===================== 7 · MIDNIGHT GOLD — neon glow ===================== */
body[data-layout="7"]{
  --bg:linear-gradient(160deg,#0f0a1e,#1a0f2e 60%,#0f0a1e);
  --text:#f4e8c1;
  --text-dim:rgba(244,232,193,.7);
  --name-color:#e8c878;
  --handle-color:rgba(232,200,120,.78);
  --bio-color:rgba(244,232,193,.85);
  --card-bg:rgba(255,255,255,.04);
  --card-border:1px solid rgba(232,200,120,.28);
  --card-shadow:0 30px 70px -20px rgba(0,0,0,.7);
  --card-radius:24px;
  --avatar-size:140px;
  --avatar-radius:50%;
  --avatar-ring:#e8c878;
  --avatar-padding:3px;
  --avatar-shadow:0 0 0 2px #e8c878, 0 0 24px 4px rgba(232,200,120,.75), 0 0 60px 12px rgba(232,200,120,.35);
  --avatar-init-bg:linear-gradient(140deg,#e8c878,#b89840);
  --avatar-init-color:#1a0f2e;
  --link-bg:rgba(232,200,120,.08);
  --link-border:1px solid rgba(232,200,120,.3);
  --link-hover:rgba(232,200,120,.2);
  --link-hover-border:#e8c878;
  --link-radius:999px;
  --ico-bg:linear-gradient(140deg,#e8c878,#b89840);
  --ico-color:#1a0f2e;
  --foot-color:rgba(232,200,120,.5);
}

/* ===================== 8 · MINT FRESH — dashed ring ===================== */
body[data-layout="8"]{
  --bg:linear-gradient(160deg,#f0faf5,#dff2e8);
  --text:#1e3a2e;
  --text-dim:rgba(30,58,46,.7);
  --name-color:#1e3a2e;
  --handle-color:#6ea88a;
  --bio-color:#3e5a4a;
  --card-bg:#ffffff;
  --card-border:1px solid rgba(78,168,124,.15);
  --card-shadow:0 25px 55px -25px rgba(30,58,46,.25);
  --card-radius:28px;
  --avatar-size:140px;
  --avatar-radius:50%;
  --avatar-ring:transparent;
  --avatar-padding:8px;
  --avatar-shadow:none;
  --avatar-init-bg:#7dd3a8;
  --avatar-init-color:#fff;
  --link-bg:#f0faf5;
  --link-border:1px solid rgba(78,168,124,.18);
  --link-hover:#dff2e8;
  --link-hover-border:#4aa87c;
  --link-radius:14px;
  --ico-bg:#4aa87c;
  --ico-color:#fff;
  --foot-color:#6ea88a;
}
body[data-layout="8"] .avatar-wrap{
  border:3px dashed #4aa87c;
}
body[data-layout="8"] .avatar,
body[data-layout="8"] .avatar-init{
  border:2px solid #7dd3a8;
}

/* ===================== 9 · TERRACOTTA — status badge ===================== */
body[data-layout="9"]{
  --bg:linear-gradient(160deg,#f5e8e0,#ebd0bd);
  --text:#4a2820;
  --text-dim:rgba(74,40,32,.72);
  --name-color:#b85c3a;
  --handle-color:#a88070;
  --bio-color:#5a3830;
  --card-bg:#fbf2ec;
  --card-border:1px solid rgba(184,92,58,.15);
  --card-shadow:0 25px 55px -25px rgba(74,40,32,.3);
  --card-radius:32px;
  --avatar-size:140px;
  --avatar-radius:50%;
  --avatar-ring:#e89a72;
  --avatar-padding:3px;
  --avatar-shadow:0 10px 30px -12px rgba(184,92,58,.4);
  --avatar-init-bg:#e89a72;
  --avatar-init-color:#fff;
  --link-bg:#f5e0d2;
  --link-border:1px solid rgba(184,92,58,.15);
  --link-hover:#edc8b0;
  --link-hover-border:#d07850;
  --link-radius:999px;
  --ico-bg:#d07850;
  --ico-color:#fff;
  --foot-color:#a88070;
}
body[data-layout="9"] .avatar-wrap::after{
  content:"";
  position:absolute;
  bottom:6px;
  right:6px;
  width:22px;height:22px;
  border-radius:50%;
  background:#4ade80;
  border:3px solid #fbf2ec;
  z-index:2;
  box-shadow:0 0 12px rgba(74,222,128,.6);
}

/* ===================== 10 · BUTTER HONEY — tilted circle ===================== */
body[data-layout="10"]{
  --bg:linear-gradient(160deg,#fff9e8,#fff0c8);
  --text:#4a3a10;
  --text-dim:rgba(74,58,16,.72);
  --name-color:#a88020;
  --handle-color:#a89860;
  --bio-color:#5a4a20;
  --card-bg:#ffffff;
  --card-border:1px solid rgba(200,160,60,.2);
  --card-shadow:0 25px 55px -25px rgba(74,58,16,.25);
  --card-radius:28px;
  --avatar-size:140px;
  --avatar-radius:50%;
  --avatar-ring:linear-gradient(140deg,#ffcc50,#d89810);
  --avatar-padding:4px;
  --avatar-shadow:0 12px 30px -10px rgba(255,204,80,.6);
  --avatar-tilt:rotate(6deg);
  --avatar-init-bg:linear-gradient(140deg,#ffcc50,#d89810);
  --avatar-init-color:#4a3a10;
  --link-bg:#fff7e0;
  --link-border:1px solid rgba(200,160,60,.2);
  --link-hover:#ffefc0;
  --link-hover-border:#e8b840;
  --link-radius:14px;
  --ico-bg:linear-gradient(140deg,#ffcc50,#d89810);
  --ico-color:#4a3a10;
  --foot-color:#a89860;
}

/* ===================== 11 · SKY BLUE — double ring ===================== */
body[data-layout="11"]{
  --bg:linear-gradient(160deg,#eef6ff,#d8e8f8);
  --text:#1e3550;
  --text-dim:rgba(30,53,80,.7);
  --name-color:#2e6ab8;
  --handle-color:#7a96b8;
  --bio-color:#3e5570;
  --card-bg:#ffffff;
  --card-border:1px solid rgba(46,106,184,.15);
  --card-shadow:0 25px 55px -25px rgba(30,53,80,.25);
  --card-radius:32px;
  --avatar-size:140px;
  --avatar-radius:50%;
  --avatar-ring:transparent;
  --avatar-padding:0;
  --avatar-shadow:0 0 0 3px #7ab8e8, 0 0 0 8px #ffffff, 0 0 0 10px #7ab8e8;
  --avatar-init-bg:#7ab8e8;
  --avatar-init-color:#fff;
  --link-bg:#eef6ff;
  --link-border:1px solid rgba(46,106,184,.15);
  --link-hover:#d8e8f8;
  --link-hover-border:#4a90d8;
  --link-radius:999px;
  --ico-bg:#4a90d8;
  --ico-color:#fff;
  --foot-color:#7a96b8;
}
body[data-layout="11"] .avatar-wrap{
  margin:10px auto 30px;
}

/* ===================== 12 · CORAL REEF — stone pebble ===================== */
body[data-layout="12"]{
  --bg:linear-gradient(160deg,#fff0ee,#ffe0dc);
  --text:#3a2520;
  --text-dim:rgba(58,37,32,.72);
  --name-color:#e05a4a;
  --handle-color:#b88a80;
  --bio-color:#5a3a32;
  --card-bg:#ffffff;
  --card-border:1px solid rgba(224,90,74,.18);
  --card-shadow:0 25px 55px -25px rgba(58,37,32,.28);
  --card-radius:28px;
  --avatar-size:150px;
  --avatar-radius:58% 42% 50% 50% / 45% 55% 45% 55%;
  --avatar-ring:#ff8878;
  --avatar-padding:4px;
  --avatar-shadow:0 12px 30px -10px rgba(224,90,74,.5);
  --avatar-init-bg:#ff8878;
  --avatar-init-color:#fff;
  --link-bg:#fff0ee;
  --link-border:1px solid rgba(224,90,74,.18);
  --link-hover:#ffd8d2;
  --link-hover-border:#e05a4a;
  --link-radius:14px;
  --ico-bg:#e05a4a;
  --ico-color:#fff;
  --foot-color:#b88a80;
}

/* ===================== 13 · PLUM WINE — chat bubble ===================== */
body[data-layout="13"]{
  --bg:linear-gradient(160deg,#2a0f28,#4a1a3a 60%,#2a0f28);
  --text:#f4d8e0;
  --text-dim:rgba(244,216,224,.7);
  --name-color:#e898b0;
  --handle-color:rgba(232,152,176,.78);
  --bio-color:rgba(244,216,224,.88);
  --card-bg:rgba(255,255,255,.05);
  --card-border:1px solid rgba(232,152,176,.25);
  --card-shadow:0 30px 70px -20px rgba(0,0,0,.65);
  --card-radius:32px;
  --avatar-size:140px;
  --avatar-radius:50% 50% 12% 50%;
  --avatar-ring:#e898b0;
  --avatar-padding:3px;
  --avatar-shadow:0 12px 32px -12px rgba(232,152,176,.6);
  --avatar-init-bg:linear-gradient(140deg,#e898b0,#c86888);
  --avatar-init-color:#2a0f28;
  --link-bg:rgba(232,152,176,.1);
  --link-border:1px solid rgba(232,152,176,.28);
  --link-hover:rgba(232,152,176,.22);
  --link-hover-border:#e898b0;
  --link-radius:999px;
  --ico-bg:linear-gradient(140deg,#e898b0,#c86888);
  --ico-color:#2a0f28;
  --foot-color:rgba(232,152,176,.55);
}

/* ===================== 14 · GOLDEN HOUR — halo ring ===================== */
body[data-layout="14"]{
  --bg:linear-gradient(160deg,#fff5e0,#ffe0b0);
  --text:#4a3018;
  --text-dim:rgba(74,48,24,.72);
  --name-color:#c07820;
  --handle-color:#b89068;
  --bio-color:#5a4028;
  --card-bg:#ffffff;
  --card-border:1px solid rgba(200,140,60,.18);
  --card-shadow:0 25px 55px -25px rgba(74,48,24,.28);
  --card-radius:28px;
  --avatar-size:140px;
  --avatar-radius:50%;
  --avatar-ring:transparent;
  --avatar-padding:0;
  --avatar-shadow:0 0 0 6px #ffffff, 0 0 0 8px #f0b050;
  --avatar-init-bg:linear-gradient(140deg,#f0b050,#d08020);
  --avatar-init-color:#fff;
  --link-bg:#fff5e0;
  --link-border:1px solid rgba(200,140,60,.18);
  --link-hover:#ffe8c0;
  --link-hover-border:#e0a040;
  --link-radius:14px;
  --ico-bg:linear-gradient(140deg,#f0b050,#d08020);
  --ico-color:#fff;
  --foot-color:#b89068;
}
body[data-layout="14"] .avatar-wrap{
  margin:12px auto 30px;
}

/* ===================== 15 · DUSTY ROSE — brutalist sticker ===================== */
body[data-layout="15"]{
  --bg:linear-gradient(160deg,#f8ecea,#eed8d4);
  --text:#4a3028;
  --text-dim:rgba(74,48,40,.72);
  --name-color:#a86868;
  --handle-color:#b89a94;
  --bio-color:#5a403a;
  --card-bg:#fbf2f0;
  --card-border:1px solid rgba(168,104,104,.15);
  --card-shadow:0 25px 55px -25px rgba(74,48,40,.28);
  --card-radius:32px;
  --avatar-size:140px;
  --avatar-radius:50%;
  --avatar-ring:#4a3028;
  --avatar-padding:3px;
  --avatar-shadow:8px 8px 0 0 #c08888;
  --avatar-tilt:rotate(-3deg);
  --avatar-init-bg:#c08888;
  --avatar-init-color:#fbf2f0;
  --link-bg:#f2e0dc;
  --link-border:1px solid rgba(168,104,104,.15);
  --link-hover:#e8c8c4;
  --link-hover-border:#c08888;
  --link-radius:999px;
  --ico-bg:#c08888;
  --ico-color:#fff;
  --foot-color:#b89a94;
}

/* ============================================================
   15 DIFFERENT FONTS — one per layout (all free, Google Fonts)
   ============================================================ */
body[data-layout="1"]  { font-family:'Inter', sans-serif; }
body[data-layout="2"]  { font-family:'Poppins', sans-serif; }
body[data-layout="3"]  { font-family:'Playfair Display', Georgia, serif; }
body[data-layout="4"]  { font-family:'DM Sans', sans-serif; }
body[data-layout="5"]  { font-family:'Lora', Georgia, serif; }
body[data-layout="6"]  { font-family:'Space Grotesk', sans-serif; }
body[data-layout="7"]  { font-family:'Manrope', sans-serif; }
body[data-layout="8"]  { font-family:'Merriweather', Georgia, serif; }
body[data-layout="9"]  { font-family:'Nunito', sans-serif; }
body[data-layout="10"] { font-family:'Fraunces', Georgia, serif; }
body[data-layout="11"] { font-family:'Outfit', sans-serif; }
body[data-layout="12"] { font-family:'Crimson Pro', Georgia, serif; }
body[data-layout="13"] { font-family:'Plus Jakarta Sans', sans-serif; }
body[data-layout="14"] { font-family:'Bricolage Grotesque', sans-serif; }
body[data-layout="15"] { font-family:'Lexend', sans-serif; }

/* ===================== MOBILE ===================== */
@media (max-width:420px){
  .avatar-wrap{width:118px !important;height:118px !important}
  .card-head .avatar-wrap{width:92px !important;height:92px !important}
  body[data-layout="6"] .avatar-wrap{width:118px !important;height:148px !important}
  .avatar-init{font-size:36px}
  .card-head .avatar-init{font-size:28px}
  .name{font-size:23px}
}