/* BeoLinks Shell for Elementor — v1.0.2 */
/* Host reset */
html, body { height: 100%; }
body { margin:0; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
* { box-sizing:border-box; }
:root { --accent:#1dd1a1; }

/* Wrapper */
.beolinks-shell{
  min-height:100svh;
  color:#e5eef6;
  background:
    radial-gradient(900px 480px at 5% -10%, rgba(34,197,94,.10), transparent 60%),
    radial-gradient(900px 480px at 95% 0%, rgba(14,165,233,.10), transparent 55%),
    #0b0f14;
  padding:16px 14px 28px;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  line-height:1.4;
}
.beolinks-shell.full-bleed{ width:100vw; max-width:none; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }
@media (max-width: 480px){ .beolinks-shell{ padding:18px 12px 40px; } }

.beo-hero { max-width:960px; margin:0 auto; }
.beo-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.beo-brand { display:flex; align-items:center; gap:12px; }
.beo-avatar { width:56px; height:56px; border-radius:16px; object-fit:cover; box-shadow:0 0 0 2px rgba(255,255,255,.08); }
.beo-name { margin:0; font-size:clamp(24px,4.8vw,34px); font-weight:800; letter-spacing:-.02em; color:#f8fafc; }
.beo-handle { font-size:13px; color:#a3b2c2; }
.beo-actions { display:flex; gap:10px; }
.beo-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.07); color:#f8fafc; cursor:pointer; }
.beo-btn:hover { background:rgba(255,255,255,.12); }
.beo-btn .fa-solid, .beo-btn .fa-brands { font-size:18px; }

.beo-tagline { margin:12px 0 0; color:#d1e0ee; opacity:.9; font-size:clamp(15px,3.5vw,20px); }

/* Search */
.beo-search { margin-top:14px; display:flex; align-items:center; gap:10px; position:relative; }
.beo-search .ico { position:absolute; left:14px; top:50%; transform:translateY(-50%); opacity:.7; }
.beo-input { flex:1; height:46px; border-radius:18px; padding:0 14px 0 44px; color:#f8fafc; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); outline:none; }
.beo-input::placeholder{ color: rgba(255,255,255,.65); }
.beo-btn.copyall { height:46px; border-radius:16px; padding:0 12px; font-size:14px; white-space:nowrap; }

/* Pills */
.beo-cats { margin-top:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.beo-cats-label { display:flex; align-items:center; gap:6px; font-size:13px; opacity:.75; }
.beo-cats-pills { display:flex; gap:8px; flex-wrap:wrap; }
.beo-pill { padding:9px 13px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#f8fafc; cursor:pointer; font-size:15px; }
.beo-pill.active { background:var(--accent); color:#0b0f14; border-color:var(--accent); font-weight:700; box-shadow:0 0 0 2px rgba(29,209,161,.25); }

/* Cards */
.beo-grid { margin:18px auto 0; max-width:960px; display:grid; gap:12px; }
.beo-card { display:block; text-decoration:none; }
.beo-card.hidden { display:none; }
.beo-card .beo-card-inner { display:flex; align-items:center; gap:14px; padding:18px; border-radius:18px; background:rgba(13,17,23,.85); border:1px solid rgba(255,255,255,.12); }
.beo-fav { width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:#0b0f14; border:1px solid rgba(255,255,255,.12); color:#cbd5e1; flex-shrink:0; }
.beo-fav .fa-solid, .beo-fav .fa-brands { font-size:20px; }
.beo-main { min-width:0; flex:1; }
.beo-row { display:flex; align-items:center; gap:8px; }
.beo-title { font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#eaf2fb; }
.beo-badge { align-self:flex-start; padding:4px 9px; border-radius:999px; background:rgba(29,209,161,.14); color:#1dd1a1; border:1px solid rgba(29,209,161,.30); font-size:12px; }
.beo-desc { margin-top:4px; font-size:14px; color:#bcd0e6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.beo-cta-line { margin-top:10px; }
.beo-cta { padding:7px 11px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07); color:#f8fafc; font-size:12px; cursor:pointer; }
.beo-cta:hover{ background:rgba(255,255,255,.12); }
.beo-url { display:none; font-size:12px; color:#8fa7c1; }
@media (min-width:640px){ .beo-url{ display:block; } }
.beo-go { color:#cbd5e1; }
.beo-go .fa-solid{ font-size:18px; }

/* Social chips */
.beo-social { max-width:960px; margin:20px auto 0; display:flex; flex-wrap:wrap; gap:10px; }
.beo-chip { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#f8fafc; text-decoration:none; font-size:14px; }
.beo-chip .fa-brands, .beo-chip .fa-solid { font-size:16px; }

/* Footer */
.beo-footer { max-width:960px; margin:20px auto 0; padding-top:12px; border-top:1px solid rgba(255,255,255,.12); color:#cbd5e1; font-size:14px; }

/* Light theme toggle */
html.beolinks-light body{ background:#f7fafc; }
html.beolinks-light .beolinks-shell{ color:#0b0f14; background:#eef5fb; }
html.beolinks-light .beo-card .beo-card-inner{ background:#ffffff; border-color:#e2e8f0; }
html.beolinks-light .beo-title{ color:#0f172a; }
html.beolinks-light .beo-desc{ color:#334155; }
html.beolinks-light .beo-btn{ color:#0b0f14; background:#ffffff; border-color:#e2e8f0; }
html.beolinks-light .beo-pill{ background:#ffffff; border-color:#e2e8f0; color:#0b0f14; }