/* sbpex — official links page (/links): one column on phones, a QR of the page beside it on desktop.
   Colours follow tokens.css; the page follows the visitor's light / dark system theme (Telegram's in-app browser too). */
:root {
  --lk-ground: #EEF1F5;
  --lk-card: #FFFFFF;
  --lk-card-2: #F6F8FB;
  --lk-ink: #0A0E14;
  --lk-text-2: #5A6577;
  --lk-mist: #6B7785;
  --lk-line: rgba(10, 20, 40, 0.08);
  --lk-blue: #0066FF;
  --lk-blue-deep: #0047B3;
  --lk-blue-soft: #EAF1FF;
  --lk-ok: #0F7A4B;
  --lk-ok-soft: #E3F5EC;
  --lk-warn: #9A6100;
  --lk-warn-soft: #FFF5E3;
  --lk-warn-line: rgba(249, 160, 27, 0.30);
  --lk-shadow: 0 18px 50px rgba(10, 30, 80, 0.08);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --lk-ground: #0A0E14;
    --lk-card: #141A24;
    --lk-card-2: #1B2330;
    --lk-ink: rgba(255, 255, 255, 0.93);
    --lk-text-2: rgba(255, 255, 255, 0.64);
    --lk-mist: rgba(255, 255, 255, 0.50);
    --lk-line: rgba(255, 255, 255, 0.09);
    --lk-blue: #4D8FFF;
    --lk-blue-deep: #2F6FDB;
    --lk-blue-soft: rgba(77, 143, 255, 0.14);
    --lk-ok: #45CF86;
    --lk-ok-soft: rgba(69, 207, 134, 0.13);
    --lk-warn: #F3C06B;
    --lk-warn-soft: rgba(249, 180, 74, 0.08);
    --lk-warn-line: rgba(249, 180, 74, 0.24);
    --lk-shadow: none;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
body { background: var(--lk-ground); color: var(--lk-ink); font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif); line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
code { font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); }
:focus-visible { outline: 2px solid var(--lk-blue); outline-offset: 2px; border-radius: 12px; }

.lk { max-width: 980px; margin: 0 auto; padding: 24px 16px calc(32px + env(safe-area-inset-bottom)); display: grid; gap: 20px; }
.lk-main { width: 100%; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.lk-aside { display: none; }

/* Profile */
.lk-head { position: relative; overflow: hidden; text-align: center; background: var(--lk-card); border: 1px solid var(--lk-line); border-radius: 24px; padding: 26px 20px 20px; box-shadow: var(--lk-shadow); }
.lk-head::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #0066FF 0%, #5B2A86 55%, #D6006D 78%, #F9A01B 100%); }
.lk-logo { display: block; width: 72px; height: 72px; margin: 0 auto 12px; }
.lk-name { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.lk-tag { margin-top: 2px; font-size: 15px; color: var(--lk-text-2); }
.lk-verified { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 6px; max-width: 100%; margin-top: 14px; padding: 5px 11px; border-radius: 999px; background: var(--lk-ok-soft); color: var(--lk-ok); font-size: 12.5px; font-weight: 500; }
.lk-verified code { font-size: 12px; }
.lk-rate { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-size: 13.5px; color: var(--lk-text-2); font-variant-numeric: tabular-nums; }
.lk-rate b { color: var(--lk-ink); font-size: 15px; font-weight: 600; }
.lk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lk-ok); box-shadow: 0 0 0 3px var(--lk-ok-soft); }

/* Line icons */
.ic svg, .chev, .lk-btn svg, .lk-verified svg, .lk-safe h2 svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lk-verified svg { width: 15px; height: 15px; }
.ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--lk-blue-soft); color: var(--lk-blue); flex: none; }
.ic svg { width: 22px; height: 22px; }
.chev { width: 18px; height: 18px; color: var(--lk-mist); }
.lk-body { display: flex; flex-direction: column; min-width: 0; }

/* Primary action */
.lk-cta { display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; background: #0066FF; color: #FFFFFF; }   /* brand blue in both themes: white text stays readable */
.lk-cta:hover { background: #0052CC; }
.lk-cta .ic { width: 44px; height: 44px; background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }
.lk-cta b { font-size: 17px; font-weight: 600; }
.lk-cta .lk-body > span { font-size: 13px; color: rgba(255, 255, 255, 0.86); }
.lk-cta code { font-size: 12.5px; color: #FFFFFF; }
.lk-cta .chev { color: rgba(255, 255, 255, 0.8); }

/* Link groups */
.lk-group { background: var(--lk-card); border: 1px solid var(--lk-line); border-radius: 20px; overflow: hidden; }
.lk-group h2 { padding: 14px 16px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lk-mist); }
.lk-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; gap: 12px; padding: 11px 16px; }
.lk-row + .lk-row { border-top: 1px solid var(--lk-line); }
.lk-row:hover { background: var(--lk-card-2); }
.lk-t { font-size: 15.5px; font-weight: 600; }
.lk-d { font-size: 13px; color: var(--lk-text-2); }
.lk-h { margin-top: 1px; font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); font-size: 12.5px; color: var(--lk-blue); overflow-wrap: anywhere; }

/* Anti-phishing */
.lk-safe { background: var(--lk-warn-soft); border: 1px solid var(--lk-warn-line); border-radius: 20px; padding: 16px; }
.lk-safe h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.lk-safe h2 svg { width: 20px; height: 20px; color: var(--lk-warn); flex: none; }
.lk-safe ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lk-safe li { position: relative; padding-left: 16px; font-size: 13.5px; color: var(--lk-text-2); }
.lk-safe li::before { content: ""; position: absolute; left: 3px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--lk-warn); }
.lk-safe code { font-size: 12.5px; color: var(--lk-ink); }

/* Share */
.lk-share { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; border: 1px solid var(--lk-line); border-radius: 14px; background: var(--lk-card); color: var(--lk-ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.lk-btn:hover { background: var(--lk-card-2); }
.lk-btn svg { width: 18px; height: 18px; color: var(--lk-blue); }

.lk-foot { padding: 6px 8px 0; text-align: center; font-size: 12px; line-height: 1.55; color: var(--lk-mist); }
.lk-foot p + p { margin-top: 4px; }
.lk-foot a { color: var(--lk-blue); }
.lk-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 10px 16px; border-radius: 12px; background: var(--lk-ink); color: var(--lk-ground); font-size: 14px; }

@media (prefers-reduced-motion: no-preference) {
  .lk-row, .lk-cta, .lk-btn { transition: background-color 0.15s ease; }
}

/* Desktop: the list and a QR of this page to open it on a phone */
@media (min-width: 900px) {
  .lk { grid-template-columns: minmax(0, 480px) 260px; justify-content: center; align-items: start; gap: 24px; padding-top: 48px; }
  .lk-main { margin: 0; }
  .lk-aside { display: block; position: sticky; top: 48px; text-align: center; background: var(--lk-card); border: 1px solid var(--lk-line); border-radius: 24px; padding: 20px; box-shadow: var(--lk-shadow); }
  .lk-qr { display: inline-block; padding: 10px; border-radius: 16px; background: #FFFFFF; }
  .lk-qr svg { display: block; width: 180px; height: 180px; }
  .lk-aside b { display: block; margin-top: 12px; font-size: 15px; font-weight: 600; }
  .lk-aside p { margin-top: 4px; font-size: 13px; color: var(--lk-text-2); }
  .lk-aside code { font-size: 12.5px; color: var(--lk-blue); }
}