/* Match social edge tabs to the surfaces of their orbiting planets. */
.side-navigation .social-navigation {
    --social-surface: radial-gradient(circle at 30% 25%, #a9bdff, #404477 65%, #131a30);
    background: radial-gradient(ellipse at 28% 18%, #ffffff66, transparent 45%), var(--social-surface) !important;
    border-color: #cce3ff66;
    color: #fff;
    text-shadow: 0 1px 3px #000, 0 0 6px #000;
    box-shadow: inset 0 2px 3px #ffffff66, inset 0 -6px 10px #0008, 0 0 12px #b7ccff22;
}

/* A miniature sphere identifies each collapsed tab without changing its link. */
.side-navigation .social-navigation::before,
.member-area .member-public-social .social-navigation::before {
    content: '' !important;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    margin: 0 5px 0 0;
    border-radius: 50%;
    background: radial-gradient(circle at 27% 22%, #ffffff88, transparent 38%), var(--social-surface);
    box-shadow: inset -5px -4px 6px #0009, inset 1px 1px 2px #ffffff66, 0 0 7px #b4dbff55;
}

/* Keep the matching texture on hover instead of restoring the generic cyan tab. */
.side-navigation .social-navigation:hover,
.side-navigation .social-navigation:focus-visible {
    background: radial-gradient(ellipse at 28% 18%, #ffffff88, transparent 50%), var(--social-surface) !important;
    box-shadow: inset 0 2px 3px #ffffff88, inset 0 -5px 8px #0006, 0 0 18px #c4ddff55;
}

/* Youtube: reuse its universe planet surface. */
.side-navigation .social-navigation[data-universe="youtube"] {
    --social-surface: radial-gradient(circle at 32% 25%, #ff9b66, #d83a22 42%, #68120e 78%, #260607);
}

/* Instagram: reuse its universe planet surface. */
.side-navigation .social-navigation[data-universe="instagram"] {
    --social-surface: radial-gradient(circle at 35% 25%, #ffd45b, #ef477f 38%, #8238a7 70%, #30115b);
}

/* Facebook: reuse its universe planet surface. */
.side-navigation .social-navigation[data-universe="facebook"] {
    --social-surface: repeating-linear-gradient(170deg, #5ba9ff 0 8px, #1664ba 9px 15px, #123c82 16px 20px);
}

/* X: reuse its universe planet surface. */
.side-navigation .social-navigation[data-universe="x"] {
    --social-surface: radial-gradient(circle at 35% 28%, #dfe5eb, #7d8995 46%, #323b45 76%, #11161c);
}

/* Tiktok: reuse its universe planet surface. */
.side-navigation .social-navigation[data-universe="tiktok"] {
    --social-surface: radial-gradient(circle at 35% 28%, #6dfff5, #13a8a8 42%, #153a50 74%, #101622);
}

/* Threads: reuse its universe planet surface. */
.side-navigation .social-navigation[data-universe="threads"] {
    --social-surface: repeating-linear-gradient(160deg, #7450a4 0 6px, #34204f 7px 13px, #151023 14px 18px);
}

/* Reddit: reuse its universe planet surface. */
.side-navigation .social-navigation[data-universe="reddit"] {
    --social-surface: radial-gradient(circle at 34% 25%, #ffd087, #eb6b25 42%, #9a2c12 72%, #4b1009);
}

/* Snapchat: reuse its universe planet surface. */
.side-navigation .social-navigation[data-universe="snapchat"] {
    --social-surface: radial-gradient(circle at 33% 26%, #fff9b0, #f6d72f 46%, #a67908 79%, #513806);
}

/* Twitch: reuse its universe planet surface. */
.side-navigation .social-navigation[data-universe="twitch"] {
    --social-surface: repeating-linear-gradient(168deg, #c395ff 0 7px, #7646bd 8px 14px, #342063 15px 20px);
}

/* Discord: reuse its universe planet surface. */
.side-navigation .social-navigation[data-universe="discord"] {
    --social-surface: radial-gradient(circle at 32% 25%, #aebcff, #6478db 43%, #303c8d 74%, #151b49);
}

/* Linkedin: reuse its universe planet surface. */
.side-navigation .social-navigation[data-universe="linkedin"] {
    --social-surface: radial-gradient(circle at 32% 25%, #8de9ff, #238ac0 43%, #0b4778 75%, #05233f);
}

/* Pinterest: reuse its universe planet surface. */
.side-navigation .social-navigation[data-universe="pinterest"] {
    --social-surface: radial-gradient(circle at 32% 25%, #ff9b99, #cf273b 43%, #761020 75%, #340711);
}

/* Wechat: reuse its universe planet surface. */
.side-navigation .social-navigation[data-universe="wechat"] {
    --social-surface: radial-gradient(circle at 32% 25%, #b3ffab, #32af62 43%, #12643b 74%, #07341f);
}

/* Bilibili: reuse its universe planet surface. */
.side-navigation .social-navigation[data-universe="bilibili"] {
    --social-surface: repeating-linear-gradient(165deg, #c5fbff 0 7px, #4bc7dc 8px 14px, #187c9d 15px 20px);
}

/* Douyin: reuse its universe planet surface. */
.side-navigation .social-navigation[data-universe="douyin"] {
    --social-surface: radial-gradient(circle at 30% 24%, #ff7680, #243347 38%, #111722 68%, #05080d);
}