/* ==========================================================================
   urlik.xyz — UI 2, group "links"
   /{code}+ statistics, /report. ( go.php interstitials, /embed and /404.php
   are standalone documents and carry their own small styles — see there. )
   Tokens only from theme/ui/ui.css; no hardcoded colours.
   ========================================================================== */

/* ---------- page frame ---------- */
.lk-page{ padding-block:clamp(20px,3vw,36px) clamp(40px,6vw,72px); display:flex; flex-direction:column; gap:18px; }
.lk-back{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-3); font-weight:550; align-self:flex-start; }
.lk-back:hover{ color:var(--ink); }

/* ---------- hero: short link + QR ---------- */
.lk-hero{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; padding:clamp(18px,2.6vw,28px); position:relative; overflow:hidden; }
.lk-hero::before{ content:""; position:absolute; inset:-40% -10% auto auto; width:420px; height:320px; background:radial-gradient(closest-side,var(--acc-soft),transparent); pointer-events:none; }
.lk-hero>*{ position:relative; }
.lk-hero-main{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.lk-short{ display:flex; align-items:center; gap:6px; min-width:0; }
.lk-code{ font:650 clamp(22px,3.2vw,34px)/1.15 var(--mono); letter-spacing:-.03em; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.lk-code .host{ color:var(--ink-3); font-weight:450; }
.lk-code .slash{ color:var(--acc); }
.lk-code:hover{ text-decoration:underline; text-decoration-color:var(--acc-line); text-underline-offset:5px; }
.lk-meta{ --s:6px; }
.lk-actions{ --s:8px; }

.lk-qr{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.lk-qr-img{ background:#fff; padding:8px; border-radius:var(--r); border:1px solid var(--line); box-shadow:var(--sh-2); }
.lk-qr-img img{ display:block; width:132px; height:132px; image-rendering:pixelated; }
.lk-qr-dl{ --s:2px; }

/* owner-only destination */
.lk-dest{ display:flex; flex-direction:column; gap:6px; padding:12px 12px 10px; border:1px dashed var(--line-2); border-radius:var(--r); background:var(--surface-2); min-width:0; }
.lk-dest-label{ display:inline-flex; align-items:center; gap:6px; font:600 11.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.lk-dest-row{ display:flex; align-items:center; gap:10px; min-width:0; }
.lk-dest-text{ display:flex; flex-direction:column; min-width:0; flex:1; }

/* ---------- period bar ---------- */
.lk-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:6px; }
.lk-bar-tools{ --s:8px; }

/* ---------- overview ---------- */
.lk-overview .stats-strip{ border-bottom:1px solid var(--line); }
.lk-chart{ padding:10px 18px 14px; }
.lk-axis{ margin-top:4px; }
.lk-avg{ display:flex; align-items:center; gap:6px; margin-top:8px; }
.lk-chart-empty{ padding:40px 16px; }

/* ---------- breakdowns ---------- */
.lk-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:stretch; }
.lk-flag{ font-size:16px; line-height:1; }
.lk-none{ display:flex; align-items:center; gap:8px; color:var(--ink-3); font-size:14px; padding:6px 0; }
.lk-split{ height:12px; border-radius:12px; background:var(--line-2); overflow:hidden; }
.lk-split>span{ display:block; height:100%; width:var(--v,0%); background:var(--acc); border-radius:inherit; }
.lk-legend{ display:flex; flex-direction:column; gap:8px; margin-top:12px; font-size:14px; }
.lk-legend>div{ display:flex; align-items:center; gap:8px; }
.lk-sw{ width:10px; height:10px; border-radius:3px; flex:none; }
.lk-sw.is-h{ background:var(--acc); } .lk-sw.is-b{ background:var(--line-2); }

/* ---------- visitor CTA ---------- */
.lk-cta{ display:flex; align-items:center; gap:18px; padding:clamp(18px,2.6vw,26px); margin-top:6px; }

/* ---------- guest teaser ---------- */
.lk-guest{ display:grid; grid-template-columns:minmax(0,280px) minmax(0,1fr); gap:16px; align-items:stretch; }
.lk-guest-count{ display:flex; flex-direction:column; gap:8px; }
.lk-big{ font-size:clamp(44px,6vw,64px); font-weight:720; letter-spacing:-.04em; line-height:1; }
.lk-locked{ position:relative; overflow:hidden; min-height:320px; display:grid; }
.lk-locked-art{ grid-area:1/1; padding:24px; filter:blur(6px); opacity:.9; display:flex; flex-direction:column; gap:18px; pointer-events:none; user-select:none; }
.lk-locked-art svg{ width:100%; height:130px; }
.lk-locked-art polygon{ fill:var(--acc-soft); } .lk-locked-art polyline{ fill:none; stroke:var(--acc); stroke-width:3; }
.lk-locked-bars{ display:flex; flex-direction:column; gap:12px; }
.lk-locked-bars i{ display:block; height:10px; border-radius:10px; background:var(--line-2); }
.lk-locked-bars i:nth-child(1){ width:84%; } .lk-locked-bars i:nth-child(2){ width:62%; } .lk-locked-bars i:nth-child(3){ width:45%; } .lk-locked-bars i:nth-child(4){ width:27%; }
.lk-locked-over{ grid-area:1/1; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; padding:28px 20px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 55%,transparent),color-mix(in srgb,var(--surface) 88%,transparent)); }
.lk-locked-over p{ max-width:52ch; }
.lk-benefits{ list-style:none; margin:4px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,auto)); gap:6px 18px; text-align:left; font-size:14px; color:var(--ink-2); }
.lk-benefits li{ display:flex; align-items:center; gap:8px; }
.lk-benefits .i{ width:16px; height:16px; color:var(--ok); flex:none; }
.lk-locked-cta{ --s:8px; justify-content:center; margin-top:6px; }

/* ---------- 404 / 429 states ---------- */
.lk-state{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding-block:clamp(48px,9vw,110px); }
.lk-state .lead{ max-width:52ch; }
.lk-state .small .i{ vertical-align:-3px; margin-right:2px; }
.lk-state-actions{ --s:8px; justify-content:center; margin-top:6px; }
.lk-nf-tools{ margin-top:28px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.lk-nf-tools .chips{ justify-content:center; }

/* ---------- report ---------- */
.rp-page{ padding-block:clamp(24px,4vw,48px) clamp(40px,6vw,72px); }
.rp-head{ margin-bottom:20px; }
.rp-head .lead{ max-width:60ch; margin-top:8px; }
.rp-kinds{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.rp-kind{ position:relative; display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); cursor:pointer; font-size:14px; font-weight:550; color:var(--ink-2); line-height:1.3; transition:border-color .12s,background .12s; }
.rp-kind:hover{ border-color:var(--line-2); }
.rp-kind input{ position:absolute; opacity:0; pointer-events:none; }
.rp-kind .tile-ic{ width:30px; height:30px; border-radius:8px; }
.rp-kind .tile-ic .i{ width:16px; height:16px; }
.rp-kind:has(input:checked){ border-color:var(--acc); background:var(--acc-soft); color:var(--ink); box-shadow:var(--ring); }
.rp-kind:has(input:focus-visible){ box-shadow:var(--ring); }
.rp-fieldset{ border:0; padding:0; margin:0; min-width:0; }
.rp-fieldset legend{ margin-bottom:6px; }
.rp-list{ list-style:none; margin:0; padding:0; counter-reset:s; display:flex; flex-direction:column; gap:12px; }
.rp-list li{ counter-increment:s; display:grid; grid-template-columns:26px minmax(0,1fr); gap:10px; font-size:14px; color:var(--ink-2); line-height:1.45; }
.rp-list li::before{ content:counter(s); width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font:600 12px/1 var(--mono); color:var(--acc-ink); background:var(--acc-soft); border:1px solid var(--acc-line); }
.rp-steps{ text-align:left; margin-top:8px; max-width:440px; }
.rp-done{ max-width:560px; margin-inline:auto; }


/* ---------- go.php interstitials ( own light document, body.go2 ) ---------- */
body.go2{ background:var(--bg); min-height:100vh; }
.go2-wrap{ min-height:100vh; display:flex; flex-direction:column; position:relative; isolation:isolate; }
.go2-wrap::before{ content:""; position:absolute; inset:0 0 auto; height:420px; z-index:-1; pointer-events:none;
  background:radial-gradient(40% 70% at 50% 0%,var(--acc-soft),transparent 70%); }
.go2-wrap::after{ content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; background-image:radial-gradient(var(--dot) 1px,transparent 1px); background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 55%); mask-image:linear-gradient(180deg,#000,transparent 55%); }
.go2-head{ padding:18px clamp(16px,4vw,32px); display:flex; justify-content:center; }
.go2-main{ flex:1; display:flex; align-items:center; justify-content:center; padding:12px 16px 40px; }
.go2-foot{ padding:18px 16px 24px; text-align:center; font-size:12.5px; color:var(--ink-3); }
.go2-foot a{ color:var(--ink-2); font-weight:600; }
.go2-card{ width:100%; max-width:520px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-3); }
.go2-state{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:clamp(24px,5vw,40px); }
.go2-state h1{ font-size:clamp(24px,4vw,30px); }
.go2-state .lead{ font-size:15.5px; color:var(--ink-2); max-width:42ch; }
.go-ic{ margin-bottom:4px; }
.go-ic.is-bad{ background:var(--bad-soft); color:var(--bad); border-color:var(--bad-line); }
.go2-actions{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.go2-tools{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:12px; padding-top:18px; border-top:1px solid var(--line); width:100%; }
.go2-hint{ max-width:44ch; } .go2-hint .i{ vertical-align:-3px; margin-right:4px; }
.go2-when{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 18px; border-radius:var(--r); background:var(--info-soft); border:1px solid var(--info-line); }
.go2-when b{ font-size:17px; font-variant-numeric:tabular-nums; }
.go2-pw{ align-items:stretch; }
.go2-pw>.tile-ic,.go2-pw>h1,.go2-pw>.lead{ align-self:center; }
.go2-short{ align-self:center; font-size:13.5px; color:var(--ink-3); padding:4px 10px; border-radius:var(--r-full); background:var(--bg-2); border:1px solid var(--line); }
.go2-short b{ color:var(--ink); }
.go2-pw-field{ margin-top:4px; }
.go2-err{ text-align:left; }

.go2-preview{ max-width:600px; overflow:hidden; }
.go2-cover{ aspect-ratio:1.91/1; background:var(--bg-2); border-bottom:1px solid var(--line); overflow:hidden; }
.go2-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.go2-pv-body{ padding:clamp(20px,4vw,30px); display:flex; flex-direction:column; gap:14px; }
.go2-dest{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:var(--r); background:var(--surface-2); border:1px solid var(--line); min-width:0; }
.go2-dest-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.go2-dest-text b{ font-size:17px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.go2-dest-text .mono{ overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.go2-title{ font-size:clamp(20px,3vw,24px); line-height:1.25; letter-spacing:-.02em; }
.go2-desc{ color:var(--ink-2); font-size:15px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.go2-safe{ background:var(--bg-2); }
.go2-safe>.i{ color:var(--ink-3); }
.go2-go{ display:flex; align-items:center; gap:14px; padding-top:6px; }
.go2-ring{ width:52px; height:52px; flex:none; transition:--v 1s linear; }
.go2-ring::before{ width:42px; height:42px; }
.go2-ring>span{ font-size:15px; }
.go2-ring.is-paused{ background:conic-gradient(var(--line-2) calc(var(--v)*1%),var(--bg-2) 0); }
.go2-go-text{ flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
.go2-report{ padding:12px 20px; border-top:1px solid var(--line); background:var(--surface-2); text-align:center; font-size:13px; }
.go2-report a{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-3); }
.go2-report a:hover{ color:var(--bad); }

body.go2-frame{ overflow:hidden; height:100vh; }
.go2-bar{ position:fixed; inset:0 0 auto; height:52px; z-index:2; display:flex; align-items:center; gap:12px; padding:0 12px; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--sh-1); }
.go2-bar .brand{ flex:none; }
.go2-bar-name{ font-size:13px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.go2-bar-host{ flex:1; min-width:0; display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2); padding:5px 10px; border-radius:var(--r-full); background:var(--bg-2); overflow:hidden; }
.go2-bar-host span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.go2-view{ position:fixed; top:52px; left:0; width:100%; height:calc(100% - 52px); border:0; background:#fff; }
@media (max-width:760px){
  .go2-go{ flex-wrap:wrap; }
  .go2-go>.btn{ width:100%; }
  .go2-bar-name{ display:none; }
}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .lk-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){
  .lk-hero{ grid-template-columns:1fr; }
  .lk-qr{ flex-direction:row; justify-content:flex-start; padding-top:14px; border-top:1px solid var(--line); }
  .lk-qr-img img{ width:84px; height:84px; }
  .lk-qr-dl{ flex-direction:column; align-items:flex-start; }
  .lk-actions .btn{ flex:1 1 auto; }
  .lk-grid{ grid-template-columns:1fr; }
  .lk-guest{ grid-template-columns:1fr; }
  .lk-benefits{ grid-template-columns:1fr; }
  .lk-cta{ flex-direction:column; align-items:flex-start; }
  .lk-cta .btn{ width:100%; }
  .lk-bar{ align-items:stretch; }
  .lk-bar-tools{ justify-content:space-between; }
  .rp-kinds{ grid-template-columns:1fr; }
}
.rp-aside .rp-list{ margin-top:14px; }