/* Lynko — Tree View v2 (mobile-first, pro polish)
   Only .lk-tree-* selectors. Variables are fed from PHP via inline style block. */

/* ====== Page scaffold & background ====== */
.lk-tree-page{
  min-height:100dvh;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(255,255,255,.35), transparent 60%),
              radial-gradient(1000px 520px at 110% 0%, rgba(255,255,255,.20), transparent 55%),
              var(--lk-bg);
  color: var(--lk-text);
  padding: 28px 14px 34px;
  display:flex; align-items:flex-start; justify-content:center;
}

.lk-tree-page::after{
  /* soft vignette for depth */
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background: radial-gradient(60% 50% at 50% -10%, transparent, rgba(0,0,0,.06) 70%, rgba(0,0,0,.12));
  mix-blend-mode:multiply;
  opacity:.35;
}

/* ====== Stack ====== */
.lk-tree-stack{
  width:min(760px, 94vw);
  display:grid;
  gap:18px;
}

/* ====== Card ====== */
.lk-tree-card{
  background: color-mix(in srgb, var(--lk-card-bg) 96%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid color-mix(in srgb, var(--lk-border) 82%, transparent);
  border-radius: 20px;
  box-shadow:
    0 2px 4px rgba(2,6,23,.04),
    0 16px 42px rgba(2,6,23,.12);
  padding: 22px 18px;
}

/* ====== Header (profile) ====== */
.lk-tree-card.lk-tree-head{
  text-align:center;
  padding: 26px 22px;
}

.lk-tree-avatar{
  width:100px; height:100px; border-radius:999px; object-fit:cover;
  display:inline-block; position:relative;
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  border: 3px solid color-mix(in srgb, var(--lk-card-bg) 72%, white);
}

.lk-tree-title{
  margin:14px 0 6px;
  font-weight:900;
  font-size: clamp(22px, 5.2vw, 34px);
  letter-spacing: .2px;
}

.lk-tree-bio{
  margin:6px auto 10px;
  color: var(--lk-muted);
  font-size: clamp(14px, 3.8vw, 16px);
  line-height: 1.55;
  max-width: 58ch;
}

.lk-tree-url a{
  color: var(--lk-text);
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--lk-text) 40%, transparent);
  opacity:.85;
}
.lk-tree-url a:hover{ opacity:1; border-bottom-style: solid; }

/* ====== Buttons list ====== */
.lk-tree-list{ padding: 2px 0 14px; }
.lk-tree-buttons{ display:flex; flex-direction:column; gap:14px; }

/* ====== Button base (uses --lk-btn-bg/--lk-btn-text per link) ====== */
.lk-tree-btn{
  --btn-bg: var(--lk-btn-bg);
  --btn-text: var(--lk-btn-text);
  --btn-radius: var(--lk-btn-radius);

  position:relative;
  display:flex; align-items:center; justify-content:center;
  gap:14px;
  min-height:56px; padding: 14px 20px;
  border-radius: var(--btn-radius);
  font-weight:800; letter-spacing:.2px;
  text-decoration:none; text-align:center;
  transform: translateZ(0);
  transition: transform .10s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease;
  border: 1px solid color-mix(in srgb, var(--btn-bg) 68%, #0000);
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 8px 26px color-mix(in srgb, var(--btn-bg) 24%, #0000);
}

/* Filled style */
.lk-tree-btn.solid{
  color: var(--btn-text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.10)),
    var(--btn-bg);
}

/* Outline style */
.lk-tree-btn.outline{
  color: var(--lk-text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.04)),
    color-mix(in srgb, var(--btn-bg) 12%, transparent);
  border-color: var(--btn-bg);
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
}

/* Interactions */
.lk-tree-btn:hover{
  filter: saturate(1.06) brightness(1.02);
  transform: translateY(-1px);
}
.lk-tree-btn:active{ transform: translateY(0); }

/* Right arrow hint */
.lk-tree-btn::after{
  content:"→";
  font-weight:900;
  position:absolute; right:16px;
  opacity:.0; transform:translateX(-6px);
  transition: transform .18s ease, opacity .18s ease;
}
.lk-tree-btn:hover::after{ opacity:.9; transform:translateX(0); }

/* Focus */
.lk-tree-btn:focus{ outline:none; }
.lk-tree-btn:focus-visible{
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--btn-bg) 35%, #fff),
    0 0 0 6px color-mix(in srgb, var(--btn-bg) 18%, transparent),
    0 10px 28px color-mix(in srgb, var(--btn-bg) 20%, #0000);
}

/* Icon bubble + label */
.lk-tree-btn .lk-icn{
  flex:0 0 auto;
  width:36px; height:36px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--btn-bg) 86%, #fff);
  color: var(--btn-text);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 18px rgba(0,0,0,.16);
}
.lk-tree-btn .lk-icn svg{ width:20px; height:20px; color: currentColor; }
.lk-tree-btn.outline .lk-icn{
  background: var(--btn-bg);
  color: var(--btn-text);
}
.lk-tree-btn .lk-label{ flex: 1; text-align:center; }

/* ====== CTA ====== */
.lk-tree-cta-wrap{ display:flex; justify-content:center; margin-top:4px; }
.lk-tree-cta-card{
  display:flex; align-items:center; gap:12px;
  padding: 10px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  border: 1px solid color-mix(in srgb, var(--lk-border) 82%, transparent);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}
.lk-tree-cta-text{ color: var(--lk-muted); font-weight:700; }
.lk-tree-cta-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px;
  background: linear-gradient(180deg, #ffd24d, #ffe784);
  border: 1px solid #ffd24d; color:#0b1b10; font-weight:900; text-decoration:none;
  box-shadow: 0 8px 22px rgba(255,210,77,.28);
  transition: transform .08s ease, filter .15s ease;
}
.lk-tree-cta-btn:hover{ filter:saturate(1.06); transform: translateY(-1px); }

/* ====== Responsive tweaks ====== */
@media (min-width: 820px){
  .lk-tree-card{ padding: 30px 26px; }
  .lk-tree-avatar{ width:112px; height:112px; }
  .lk-tree-btn{ min-height:60px; }
}

/* ====== Reduced motion ====== */
@media (prefers-reduced-motion: reduce){
  .lk-tree-btn, .lk-tree-btn::after, .lk-tree-cta-btn{ transition:none !important; }
}