.kh-social {
  --primary: #badff0;
  --primary-strong: #86c5e1;
  --primary-dark: #5797b4;
  --primary-deep: #326f88;
  --primary-soft: #e7f5fb;
  --primary-pale: #f5fbfe;
  --card: #fff;
  --text: #26393f;
  --muted: #71868d;
  --border: #c5dce6;
  --line: #badff0;
  --shadow-soft: 0 8px 22px rgba(50,111,136,.08);
}
.prof-social-grid { display:grid; grid-template-columns:repeat(4,minmax(150px,190px)); justify-content:center; gap:clamp(10px,1.5vw,16px); padding:18px 8px 0; }
.prof-social-card { position:relative; overflow:hidden; aspect-ratio:1/1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(14px,2vw,22px); color:inherit; text-align:center; text-decoration:none; background:var(--card); transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease; isolation:isolate; }
.prof-social-card:hover { transform:translateY(-5px); }
.prof-social-card .social-icon { position:relative; z-index:3; display:grid; place-items:center; color:var(--primary); font-size:clamp(23px,2.3vw,31px); line-height:1; transition:.26s ease; }
.prof-social-card .social-icon img { width:1.15em; height:1.15em; display:block; object-fit:contain; }
.prof-social-card .social-content { position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; }
.prof-social-card .social-title { margin-top:9px; color:var(--text); font-size:clamp(12px,1.25vw,15px); line-height:1.5; font-weight:800; }
.prof-social-card .social-handle { margin-top:2px; color:#4d6066; direction:ltr; font-size:clamp(8px,.9vw,10px); }
.prof-social-card .social-meta { display:none; margin-top:5px; color:var(--muted); font-size:8px; }
.prof-social-card .social-button,.prof-social-card .corner-number,.prof-social-card .top-ribbon,.prof-social-card .floating-label,.prof-social-card .hover-panel,.prof-social-card .wave-shape,.prof-social-card .accent-corner { display:none; }

/* 02 — exact selected source design. */
.prof-social-card.style-02 { border:1px solid var(--line); border-top:6px solid var(--primary); border-radius:10px; background:#fff; }
.prof-social-card.style-02::before { content:""; position:absolute; top:16px; right:18px; left:18px; height:1px; background:var(--primary-soft); }

/* 03 — exact selected source design. */
.prof-social-card.style-03 { border:0; border-radius:20px; box-shadow:0 17px 34px rgba(50,111,136,.15); background:linear-gradient(145deg,#fff,var(--primary-pale)); }
.prof-social-card.style-03:hover { box-shadow:0 23px 42px rgba(50,111,136,.2); }

/* 05 — exact selected source design. */
.prof-social-card.style-05 { border:1px solid var(--line); border-radius:6px 23px 6px 23px; background:var(--primary-pale); }
.prof-social-card.style-05 .corner-number { position:absolute; display:grid; place-items:center; top:0; right:0; width:48px; height:48px; color:#fff; border-radius:0 0 0 28px; background:var(--primary-strong); font-size:10px; font-weight:900; }

/* 06 — exact selected source design. */
.prof-social-card.style-06 { border:1px solid rgba(186,223,240,.7); border-radius:18px; background:linear-gradient(145deg,transparent 0 49%,rgba(186,223,240,.3) 49% 100%),#fff; }
.prof-social-card.style-06 .social-icon { width:48px; height:48px; border-radius:15px; background:#fff; box-shadow:var(--shadow-soft); }

/* 08 — exact selected source design. */
.prof-social-card.style-08 { border:1px solid rgba(186,223,240,.25); border-radius:20px; background:linear-gradient(145deg,var(--primary-deep),var(--primary-dark)); box-shadow:0 18px 34px rgba(50,111,136,.18); }
.prof-social-card.style-08 .social-icon,.prof-social-card.style-08 .social-title { color:var(--primary); }
.prof-social-card.style-08 .social-handle { color:rgba(255,255,255,.67); }

/* 09 — exact selected source design. */
.prof-social-card.style-09 { border:2px dashed var(--primary); border-radius:16px; background:#fff; }
.prof-social-card.style-09::before { content:""; position:absolute; inset:8px; border:1px dashed var(--line); border-radius:11px; }

/* 11 — exact selected source design. */
.prof-social-card.style-11 { border:1px solid var(--line); border-radius:22px; background:linear-gradient(180deg,var(--primary-soft) 0 34%,#fff 34% 100%); }
.prof-social-card.style-11 .social-icon { width:clamp(56px,6vw,70px); aspect-ratio:1; margin-top:-7px; color:var(--primary-strong); border:6px solid #fff; border-radius:50%; background:var(--primary-pale); box-shadow:0 0 0 2px var(--primary); }
.prof-social-card.style-11 .social-icon img { width:62%; height:62%; }

/* 14 — exact selected source design. */
.prof-social-card.style-14 { justify-content:flex-start; padding-top:14%; border:1px solid var(--line); border-radius:18px; background:#fff; }
.prof-social-card.style-14 .social-button { position:absolute; z-index:4; right:14px; left:14px; bottom:14px; display:flex; align-items:center; justify-content:center; gap:7px; padding:8px 10px; color:#fff; border-radius:10px; background:var(--primary-strong); font-size:9px; font-weight:800; }

/* 16 — exact selected source design. */
.prof-social-card.style-16 { display:grid; grid-template-rows:48% 52%; padding:0; border:1px solid var(--line); border-radius:20px; background:#fff; }
.prof-social-card.style-16 .social-icon { width:100%; height:100%; color:#fff; background:linear-gradient(135deg,var(--primary),var(--primary-strong)); }
.prof-social-card.style-16 .social-icon img { width:42%; height:42%; }
.prof-social-card.style-16 .social-content { justify-content:center; height:100%; padding:10px; }
.prof-social-card.style-16 .social-title { margin-top:0; }

/* 18 — exact selected source design. */
.prof-social-card.style-18 { border:1px solid var(--border); border-radius:3px; background:linear-gradient(90deg,transparent 0 14%,rgba(186,223,240,.5) 14% 14.7%,transparent 14.7% 100%),repeating-linear-gradient(0deg,#fff 0 28px,var(--primary-soft) 28px 29px); box-shadow:7px 7px 0 rgba(186,223,240,.3); }

/* 21 — exact selected source design. */
.prof-social-card.style-21 { border:1px solid var(--line); border-radius:22px; background:#fff; }
.prof-social-card.style-21 .wave-shape { position:absolute; z-index:1; display:block; right:-8%; bottom:-17%; width:116%; height:42%; border-radius:50% 50% 0 0; background:var(--primary-soft); transform:rotate(-5deg); }
.prof-social-card.style-21 .social-content,.prof-social-card.style-21 .social-icon { transform:translateY(-8px); }

/* 22 — exact selected source design. */
.prof-social-card.style-22 { border:1px solid var(--line); border-radius:18px; background:#fff; }
.prof-social-card.style-22 .accent-corner { position:absolute; z-index:1; display:block; width:44px; height:44px; border-style:solid; border-color:var(--primary); }
.prof-social-card.style-22 .accent-corner-a { top:10px; right:10px; border-width:3px 3px 0 0; border-radius:0 13px 0 0; }
.prof-social-card.style-22 .accent-corner-b { left:10px; bottom:10px; border-width:0 0 3px 3px; border-radius:0 0 0 13px; }

@media(max-width:980px){.prof-social-grid{grid-template-columns:repeat(2,minmax(140px,180px))}}
@media(max-width:560px){
  .prof-social-grid{grid-template-columns:repeat(2,minmax(125px,160px));gap:9px;padding:10px 0 0}
  .prof-social-card{padding:8px}
  .prof-social-card .social-title{font-size:12px}
  .prof-social-card .social-handle{font-size:8px}
  .prof-social-card.style-14 .social-button{right:8px;left:8px;bottom:8px;padding:5px;font-size:7px}
}
@media(max-width:360px){.prof-social-grid{grid-template-columns:repeat(2,minmax(118px,145px));gap:7px}}