/* ============================================================
   Borsiis — Linktree pages (mobile-first, themed)
   Scoped under .lt-page so it never leaks into the global layout.
   Backgrounds mirror the per-person designs from new-web.
   Fonts come from the global stack via --display/--body.
   ============================================================ */

.lt-page {
  font-family: var(--body); color: #fff; min-height: 100vh; width: 100%;
  display: flex; justify-content: center; padding: 34px 16px 60px;
  -webkit-font-smoothing: antialiased; position: relative;
  background: #06320f;
}
.lt-page a { color: inherit; text-decoration: none; }
.lt-page img { display: block; max-width: 100%; }

/* ---- per-theme backdrops (::before = glow, ::after = pattern) ---- */
.lt-page--borsiis { background: #06320f; }
.lt-page--borsiis::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% -8%, #36ad46, #0e5a23 42%, #062f0e 100%);
}
.lt-page--borsiis::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 20 Q30 4 60 20 T120 20' fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 120px 40px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.2) 60%, transparent);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.2) 60%, transparent);
}

.lt-page--chiki { background: #2a0a22; }
.lt-page--chiki::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 45% at 78% 8%, rgba(255,160,210,0.50), transparent 60%),
    radial-gradient(55% 40% at 12% 18%, rgba(220,90,180,0.42), transparent 60%),
    radial-gradient(70% 55% at 50% 108%, rgba(255,205,235,0.30), transparent 60%),
    linear-gradient(165deg, #7a1f5f, #4a1240 60%, #2a0a22 100%);
}
.lt-page--chiki::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.4;
  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 70%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 70%);
}

.lt-page--valy { background: #070d1c; }
.lt-page--valy::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% -6%, rgba(45,224,224,0.30), transparent 60%),
    radial-gradient(70% 50% at 85% 30%, rgba(60,110,255,0.28), transparent 60%),
    linear-gradient(165deg, #0e1a3a, #0a1228 55%, #060a18 100%);
}
.lt-page--valy::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.6;
  background-image:
    linear-gradient(rgba(120,170,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,170,255,0.08) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, rgba(0,0,0,0.9), transparent 80%);
          mask-image: radial-gradient(70% 60% at 50% 30%, rgba(0,0,0,0.9), transparent 80%);
}

.lt-page .tree { width: 100%; max-width: 460px; position: relative; z-index: 2; }

/* ---- profile header ---- */
.lt-page .lt-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.lt-page .lt-back { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); font-weight: 500; font-size: 0.86rem; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(6px); transition: .2s; }
.lt-page .lt-back:hover { background: rgba(255,255,255,0.2); }
.lt-page .lt-back svg { width: 15px; height: 15px; }
/* language dropdown — translucent variant for the colored linktree backgrounds */
.lt-page .langdd__btn { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.85); backdrop-filter: blur(6px); font-size: 0.78rem; }
.lt-page .langdd__btn:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.32); color: #fff; }
.lt-page .langdd__menu { background: rgba(16,14,24,0.92); border-color: rgba(255,255,255,0.18); backdrop-filter: blur(8px); }
.lt-page .langdd__item { color: rgba(255,255,255,0.85); }
.lt-page .langdd__item:hover { background: rgba(255,255,255,0.12); color: var(--lt-accent); }

.lt-page .profile { text-align: center; padding-top: 18px; }
.lt-page .avatar {
  width: 148px; height: 148px; margin: 0 auto; border-radius: 50%; position: relative;
  display: grid; place-items: end center; overflow: hidden;
  background: var(--lt-avatar-bg, radial-gradient(circle at 50% 35%, rgba(255,255,255,0.25), rgba(255,255,255,0.05) 60%, transparent 72%));
  box-shadow: 0 18px 40px -14px rgba(0,0,0,0.5), inset 0 0 0 3px rgba(255,255,255,0.18);
}
.lt-page .avatar img { width: 104%; height: auto; filter: drop-shadow(0 10px 14px rgba(0,0,0,0.4)); }
.lt-page .profile h1 {
  font-family: var(--display); font-weight: 700; font-size: 2rem; letter-spacing: -0.02em; margin-top: 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.lt-page .handle { font-family: var(--display); font-weight: 500; font-size: 0.95rem; color: var(--lt-accent, #84dc4a); margin-top: 2px; }
.lt-page .bio { font-size: 0.96rem; color: rgba(255,255,255,0.82); margin-top: 12px; line-height: 1.5; text-wrap: pretty; max-width: 36ch; margin-inline: auto; }
.lt-page .verified { display: inline-flex; align-items: center; flex: 0 0 auto; width: 24px; height: 24px; }
.lt-page .verified svg { width: 24px; height: 24px; display: block; }

/* ---- link buttons ---- */
.lt-page .links { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
.lt-page .lnk {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 66px;
  padding: 11px 16px; border-radius: 18px; overflow: hidden;
  background: var(--btn, #222); border: none;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, filter .22s;
}
.lt-page .lnk:hover { transform: translateY(-3px) scale(1.012); box-shadow: 0 18px 34px -14px rgba(0,0,0,0.7); filter: brightness(1.06); }
.lt-page .lnk:active { transform: translateY(-1px) scale(.997); }
.lt-page .lnk__ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(0,0,0,0.22); }
.lt-page .lnk__ic svg { width: 26px; height: 26px; }
.lt-page .lnk__ic img { width: 30px; height: 30px; object-fit: contain; }
.lt-page .lnk__txt { flex: 1; min-width: 0; }
.lt-page .lnk__txt b { font-family: var(--display); font-weight: 700; font-size: 1.08rem; letter-spacing: 0.01em; display: block; line-height: 1.1; }
.lt-page .lnk__txt span { font-size: 0.8rem; opacity: 0.85; }
.lt-page .lnk__art { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; }
.lt-page .lnk__art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35)); }
.lt-page .badge {
  position: absolute; top: 8px; left: 8px; min-width: 22px; height: 20px; padding: 0 6px;
  background: #ff3b3b; color: #fff; font-family: var(--display); font-weight: 700; font-size: 0.72rem;
  border-radius: 999px; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,0.4); z-index: 3;
}
.lt-page .lnk--feature { min-height: 78px; box-shadow: 0 12px 28px -12px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(255,255,255,0.18); }
.lt-page .lnk--feature .lnk__txt b { font-size: 1.25rem; }

.lt-page .lt-foot { text-align: center; margin-top: 30px; font-size: 0.8rem; color: rgba(255,255,255,0.6); }
.lt-page .lt-foot a:hover { color: #fff; }

/* platform palettes */
.lt-page .b-glow { --btn: linear-gradient(100deg,#3ad17a,#1f9d54); }
.lt-page .b-disc { --btn: linear-gradient(100deg,#5865F2,#4044c7); }
.lt-page .b-suap { --btn: linear-gradient(100deg,#ff5fa2,#9b5cff 50%,#3ad1ff); }
.lt-page .b-yt   { --btn: linear-gradient(100deg,#ff2d2d,#c40000); }
.lt-page .b-ig   { --btn: linear-gradient(100deg,#feda75,#fa7e1e 30%,#d62976 65%,#962fbf); }
.lt-page .b-tw   { --btn: linear-gradient(100deg,#9146FF,#6b2fc0); }
.lt-page .b-tk   { --btn: linear-gradient(100deg,#111,#222); }
.lt-page .b-x    { --btn: linear-gradient(100deg,#1a1a1a,#000); }
.lt-page .b-wa   { --btn: linear-gradient(100deg,#25D366,#128C7E); }
.lt-page .b-li   { --btn: linear-gradient(100deg,#0a85c2,#0a66a8); }
.lt-page .b-gh   { --btn: linear-gradient(100deg,#2b3137,#161a1d); }
.lt-page .b-mail { --btn: linear-gradient(100deg,#445566,#2c3742); }

/* per-page accent colors + avatar glow (match new-web) */
.lt-page--borsiis { --lt-accent: #aaff66; --lt-accent-ink: #0c2207; --lt-avatar-bg: radial-gradient(circle at 50% 35%, rgba(170,255,102,0.4), rgba(46,107,38,0.12) 60%, transparent 72%); }
.lt-page--chiki   { --lt-accent: #ff9ed8; --lt-accent-ink: #2e0a26; --lt-avatar-bg: radial-gradient(circle at 50% 35%, rgba(255,158,216,0.45), rgba(200,90,180,0.18) 55%, transparent 74%); }
.lt-page--valy    { --lt-accent: #46d6ff; --lt-accent-ink: #04101f; --lt-avatar-bg: radial-gradient(circle at 50% 35%, rgba(70,214,255,0.4), rgba(60,110,255,0.16) 55%, transparent 74%); }

@media (max-width: 380px) { .lt-page .profile h1 { font-size: 1.7rem; } .lt-page .avatar { width: 128px; height: 128px; } }
@media (prefers-reduced-motion: reduce) { .lt-page .lnk { transition: none; } }