:root{
  --bg-0:#073B3A;
  --bg-1:#0B4F4A;
  --card:#0F5D55;
  --card-border:#1D7A6C;
  --gold:#C9A15C;
  --lime:#8FC93A;
  --teal:#1FA6A0;
  --ink:#F8FBF6;
  --ink-soft:#BFDFD4;
  --ink-faint:#83AFA0;
  --shadow: 0 20px 60px -20px rgba(143,201,58,0.35);
}

*{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  background:
    radial-gradient(circle at 15% 8%, rgba(201,161,92,0.28), transparent 45%),
    radial-gradient(circle at 90% 15%, rgba(143,201,58,0.24), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(31,166,160,0.30), transparent 50%),
    var(--bg-0);
  color:var(--ink);
  font-family:'Sora', system-ui, sans-serif;
  min-height:100%;
  padding:32px 16px calc(48px + env(safe-area-inset-bottom, 0px));
  padding-top:calc(32px + env(safe-area-inset-top, 0px));
  display:flex;
  justify-content:center;
}

.page{
  width:100%;
  max-width:460px;
  display:flex;
  flex-direction:column;
  gap:28px;
}

/* ---------- Header / identity ---------- */
.identity{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
}

.avatar{
  width:132px;
  height:88px;
  border-radius:20px;
  background:#FFFFFF;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  box-shadow: var(--shadow);
  position:relative;
}
.avatar img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

h1{
  font-family:'Unbounded', sans-serif;
  font-weight:900;
  font-size:clamp(28px, 7vw, 36px);
  line-height:1.05;
  margin:0;
  text-wrap:balance;
  letter-spacing:-0.01em;
}

.tagline{
  color:var(--ink-soft);
  font-size:15px;
  max-width:32ch;
  line-height:1.5;
  margin:0;
}

.address{
  display:flex;
  align-items:flex-start;
  gap:8px;
  color:var(--ink-soft);
  font-size:13.5px;
  line-height:1.5;
  max-width:30ch;
  text-align:left;
}
.address svg{ flex:none; width:16px; height:16px; margin-top:2px; color:var(--gold); }

.badge-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.badge{
  font-size:13px;
  font-weight:600;
  letter-spacing:0.04em;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid var(--card-border);
  color:var(--gold);
  background:rgba(255,255,255,0.03);
}

/* ---------- Links ---------- */
.links{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.link-row{
  display:flex;
  flex-direction:column;
  border-radius:18px;
  background:var(--card);
  border:1px solid var(--card-border);
  overflow:hidden;
  transition:border-color 0.15s ease;
}
.link-row:has(.link-btn:hover),
.link-row:has(.qr-toggle:hover){
  border-color:var(--accent, var(--gold));
}

.link-main{
  display:flex;
  align-items:center;
}

.link-btn{
  display:flex;
  align-items:center;
  gap:14px;
  flex:1;
  min-width:0;
  padding:14px 6px 14px 14px;
  background:transparent;
  border:none;
  color:var(--ink);
  text-decoration:none;
  font-family:'Sora', sans-serif;
  font-weight:600;
  font-size:16px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.link-btn:active{ background:var(--bg-1); }
.link-btn:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:-2px;
}

.icon-chip{
  flex:none;
  width:42px;
  height:42px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--chip-bg);
  color:#073B3A;
}
.icon-chip svg{ width:21px; height:21px; }

.link-label{ flex:1; min-width:0; }
.link-title{ display:block; font-size:16px; }
.link-sub{ display:block; font-size:12.5px; color:var(--ink-faint); font-weight:500; margin-top:1px; }

.qr-toggle{
  flex:none;
  width:52px;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  border-left:1px solid var(--card-border);
  color:var(--ink-faint);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  min-height:52px;
}
.qr-toggle svg{ width:20px; height:20px; }
.qr-toggle[aria-expanded="true"]{ color:var(--lime); background:rgba(143,201,58,0.08); }
.qr-toggle:focus-visible{ outline:2px solid var(--lime); outline-offset:-2px; }

.link-qr-panel{
  display:none;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:16px 14px 20px;
  border-top:1px solid var(--card-border);
}
.link-qr-panel.open{ display:flex; }
.link-qr-panel .qr-frame{
  padding:10px;
  box-shadow:none;
}
.link-qr-panel canvas, .link-qr-panel img{ display:block; }
.link-qr-panel-hint{
  font-size:12px;
  color:var(--ink-faint);
  text-align:center;
}

/* Per-platform accent chips */
.link-row[data-p="instagram"] .icon-chip{ background:linear-gradient(135deg,#FEDA75,#FA7E1E,#D62976,#962FBF); color:#fff; }
.link-row[data-p="facebook"]  .icon-chip{ background:#1877F2; color:#fff; }
.link-row[data-p="gmb"]       .icon-chip{ background:linear-gradient(135deg,#4285F4,#34A853,#FBBC05,#EA4335); color:#fff; }
.link-row[data-p="website"]   .icon-chip{ background:var(--gold); color:#073B3A; }
.link-row[data-p="call"]      .icon-chip{ background:var(--lime); color:#073B3A; }
.link-row[data-p="youtube"]   .icon-chip{ background:#FF0000; color:#fff; }
.link-row[data-p="linkedin"]  .icon-chip{ background:#0A66C2; color:#fff; }

.link-row[data-p="instagram"]{ --accent:#D62976; }
.link-row[data-p="facebook"]{ --accent:#1877F2; }
.link-row[data-p="gmb"]{ --accent:#34A853; }
.link-row[data-p="website"]{ --accent:var(--gold); }
.link-row[data-p="call"]{ --accent:var(--lime); }
.link-row[data-p="youtube"]{ --accent:#FF0000; }
.link-row[data-p="linkedin"]{ --accent:#0A66C2; }

/* ---------- Doctor card ---------- */
.doctor-card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:20px;
  padding:20px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.doctor-name{
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:19px;
  margin:0;
}
.doctor-creds{
  font-size:13px;
  color:var(--ink-soft);
  font-weight:500;
  margin:0;
}
.doctor-role{
  font-size:13px;
  color:var(--gold);
  font-weight:700;
  margin:2px 0 0;
}

.phone-row{
  display:flex;
  gap:10px;
}
.phone-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 12px;
  border-radius:14px;
  background:var(--card);
  border:1px solid var(--card-border);
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
  font-size:14.5px;
  font-variant-numeric: tabular-nums;
  transition:transform 0.15s ease, border-color 0.15s ease;
}
.phone-btn:hover{ transform:translateY(-2px); border-color:var(--lime); }
.phone-btn svg{ width:17px; height:17px; color:var(--lime); flex:none; }

/* ---------- Per-link QR panel ---------- */
.qr-frame{
  background:#F8FBF6;
  padding:12px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.qr-holder{ line-height:0; }
.qr-holder img, .qr-holder canvas{ display:block; border-radius:6px; }

.qr-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  width:100%;
}

.action-btn{
  flex:1;
  min-width:130px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-radius:14px;
  border:none;
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:transform 0.15s ease, filter 0.15s ease;
}
.action-btn:hover{ transform:translateY(-1px); filter:brightness(1.08); }
.action-btn:focus-visible{ outline:2px solid var(--lime); outline-offset:2px; }

.action-primary{
  background:linear-gradient(120deg, var(--teal), var(--lime));
  color:#073B3A;
}
.action-secondary{
  background:rgba(255,255,255,0.06);
  color:var(--ink);
  border:1px solid var(--card-border);
  text-decoration:none;
}

.toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%) translateY(12px);
  background:var(--ink);
  color:var(--bg-0);
  font-weight:600;
  font-size:13.5px;
  padding:10px 18px;
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s ease, transform 0.2s ease;
  z-index:20;
  white-space:nowrap;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

footer{
  text-align:center;
  color:var(--ink-faint);
  font-size:12px;
  padding-top:4px;
}

@media (prefers-reduced-motion: reduce){
  .link-btn, .action-btn, .phone-btn{ transition:none; }
}