/* WBS UI System V1 — canonical primitives; approved Clear Glass optics.
   Source: WBS_APPROVED_FOOTER_GLASS_STYLE.md. No WebGL contexts. */
:root {
  --wbs-ui-ink:#f6f3ff;
  --wbs-ui-ink-muted:#d5cfe8;
  --wbs-ui-line:rgba(242,234,255,.66);
  --wbs-ui-line-soft:rgba(235,229,255,.32);
  --wbs-ui-focus:#95e7ff;
  --wbs-ui-on:#baff9f;
  --wbs-ui-on-bg:rgba(112,213,117,.16);
  --wbs-ui-off:#ffb6bc;
  --wbs-ui-off-bg:rgba(230,89,103,.14);
  --wbs-ui-radius-shell:26px;
  --wbs-ui-radius-control:12px;
  --wbs-ui-motion-fast:150ms;
  --wbs-ui-motion-default:220ms;
  --wbs-ui-motion-glint:500ms;
  --wbs-ui-ease:cubic-bezier(.2,.8,.2,1);
}
/* Opt-in shared controls — no global button/input resets. */
.wbs-ui-button {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:38px;padding:8px 14px;border-radius:var(--wbs-ui-radius-control);
  background:transparent;border:1px solid rgba(239,230,255,.58);
  color:var(--wbs-ui-ink);font:inherit;text-decoration:none;cursor:pointer;
  box-shadow:inset 0 1px rgba(255,255,255,.32),inset 0 -1px rgba(137,216,255,.18);
  transition:transform var(--wbs-ui-motion-default) var(--wbs-ui-ease),
             border-color var(--wbs-ui-motion-default),
             box-shadow var(--wbs-ui-motion-default);
}
.wbs-ui-button:hover:not(:disabled) { transform:translateY(-2px);
  border-color:rgba(187,237,255,.86);
  box-shadow:0 6px 18px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.55); }
.wbs-ui-button:active:not(:disabled) {transform:translateY(0)}
.wbs-ui-button:disabled {opacity:.45;cursor:not-allowed}
.wbs-ui-button:focus-visible,.wbs-ui-choice:focus-within,
.wbs-ui-switch:focus-visible,.wbs-ui-range:focus-visible {
  outline:2px solid var(--wbs-ui-focus);outline-offset:3px;
}
.wbs-ui-switch {
  appearance:none;-webkit-appearance:none;position:relative;
  width:54px;height:30px;flex:0 0 54px;margin:0;border-radius:999px;
  border:1px solid rgba(255,151,159,.71);
  background:var(--wbs-ui-off-bg);cursor:pointer;
  box-shadow:inset 0 1px rgba(255,255,255,.24);
  transition:transform 220ms,border-color 220ms,background 220ms,box-shadow 220ms;
}
.wbs-ui-switch::before {
  content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;
  box-sizing:border-box;border-radius:50%;border:1px solid rgba(255,255,255,.8);
  background:#ffe6e9;box-shadow:0 2px 7px rgba(0,0,0,.33);
  transition:transform 220ms var(--wbs-ui-ease),background 220ms;
}
.wbs-ui-switch:checked {background:var(--wbs-ui-on-bg);
  border-color:rgba(178,255,159,.9);
  box-shadow:0 0 13px rgba(162,255,145,.23),inset 0 1px rgba(255,255,255,.3);
}
.wbs-ui-switch:checked::before {transform:translateX(24px);background:#e1ffcc}
.wbs-ui-switch:hover {transform:translateY(-1px)}
.wbs-ui-switch:disabled {opacity:.45;cursor:not-allowed}
.wbs-ui-choice {
  position:relative;isolation:isolate;overflow:hidden;border-radius:13px;
  background:transparent;border:1px solid rgba(195,201,214,.48);
  box-shadow:inset 0 1px rgba(255,255,255,.2);
  transition:transform 220ms var(--wbs-ui-ease),border-color 220ms,
             box-shadow 220ms,background 220ms;
}
.wbs-ui-choice::after {
  content:"";position:absolute;inset:-70%;pointer-events:none;z-index:-1;
  background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.17) 50%,transparent 58%);
  transform:translateX(-90%) rotate(12deg);transition:transform 500ms;
}
.wbs-ui-choice:hover {transform:translateY(-2px);border-color:rgba(220,245,255,.8);
  box-shadow:0 9px 18px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.33);
}
.wbs-ui-choice:hover::after {transform:translateX(90%) rotate(12deg)}
.wbs-ui-choice:has(input:checked) {border-color:var(--wbs-ui-on);
  background:rgba(115,216,114,.10);box-shadow:0 0 0 1px rgba(177,255,155,.38),
  0 0 17px rgba(155,255,137,.26),inset 0 1px rgba(255,255,255,.27);
}
.wbs-ui-range {accent-color:#8ddaff}
.wbs-ui-state-on {color:var(--wbs-ui-on)}
.wbs-ui-state-off {color:var(--wbs-ui-off)}
@media(prefers-reduced-motion:reduce) {
 .wbs-ui-button,.wbs-ui-switch,.wbs-ui-switch::before,
 .wbs-ui-choice,.wbs-ui-choice::after {transition:none!important;animation:none!important;transform:none!important}
}
/* Apply the canonical primitives to the currently approved notifications screen. */
body.hub-body #wbs-notifications-panel .wbs-v3-tone {
  min-height:102px;min-width:0;gap:5px;padding:11px 7px;
  border:1px solid rgba(195,201,214,.48)!important;
  background:transparent!important;
  box-shadow:inset 0 1px rgba(255,255,255,.2)!important;
  filter:none;position:relative;isolation:isolate;overflow:hidden;
  transition:transform 220ms var(--wbs-ui-ease),border-color 220ms,
   box-shadow 220ms,background 220ms;
}
body.hub-body #wbs-notifications-panel .wbs-v3-tone::after {
  content:"";display:block;position:absolute;inset:-70%;pointer-events:none;z-index:-1;
  background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.17) 50%,transparent 58%);
  transform:translateX(-90%) rotate(12deg);transition:transform 500ms;
}
body.hub-body #wbs-notifications-panel .wbs-v3-tone:hover {
  transform:translateY(-2px);border-color:rgba(222,244,255,.87)!important;
  box-shadow:0 9px 20px rgba(0,0,0,.19),inset 0 1px rgba(255,255,255,.35)!important;
}
body.hub-body #wbs-notifications-panel .wbs-v3-tone:hover::after {transform:translateX(90%) rotate(12deg)}
body.hub-body #wbs-notifications-panel .wbs-v3-tone:has(input:checked) {
  border-color:#baff9f!important;background:rgba(108,201,103,.10)!important;
  box-shadow:0 0 0 1px rgba(176,255,165,.36),0 0 18px rgba(141,251,129,.26),inset 0 1px rgba(255,255,255,.3)!important;
}
body.hub-body #wbs-notifications-panel .wbs-v3-tone-symbol {
  display:block;width:27px;height:27px;color:#c9d3de;max-width:100%;
}
body.hub-body #wbs-notifications-panel .wbs-v3-tone:has(input:checked) .wbs-v3-tone-symbol {color:#caffac}
body.hub-body #wbs-notifications-panel .wbs-v3-tone strong {font-size:12px}
body.hub-body #wbs-notifications-panel .wbs-v3-tone small {font-size:10px;line-height:1.3}
body.hub-body #wbs-notifications-panel .wbs-v3-tone-grid {grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
body.hub-body #wbs-notifications-panel .wbs-notifications-toggle-row input[type=checkbox] {
  appearance:none!important;-webkit-appearance:none!important;
  position:relative;width:54px;height:30px;flex:0 0 54px;margin:0;
  border-radius:999px;border:1px solid rgba(255,151,159,.7);
  background:rgba(230,89,103,.14)!important;box-shadow:inset 0 1px rgba(255,255,255,.24);
  cursor:pointer;transition:transform 220ms,border-color 220ms,background 220ms,box-shadow 220ms;
}
body.hub-body #wbs-notifications-panel .wbs-notifications-toggle-row input[type=checkbox]::before {
  content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;
  border-radius:50%;box-sizing:border-box;border:1px solid rgba(255,255,255,.83);
  background:#ffe6e9;box-shadow:0 2px 7px rgba(0,0,0,.33);
  transition:transform 220ms var(--wbs-ui-ease),background 220ms;
}
body.hub-body #wbs-notifications-panel .wbs-notifications-toggle-row input[type=checkbox]:checked {
  border-color:rgba(178,255,159,.9);background:rgba(112,213,117,.16)!important;
  box-shadow:0 0 13px rgba(162,255,145,.23),inset 0 1px rgba(255,255,255,.3);
}
body.hub-body #wbs-notifications-panel .wbs-notifications-toggle-row input[type=checkbox]:checked::before {
  transform:translateX(24px);background:#e1ffcc;
}
body.hub-body #wbs-notifications-panel .wbs-notifications-toggle-row input[type=checkbox]:hover {
  transform:translateY(-1px);
}
body.hub-body #wbs-notifications-panel .wbs-notifications-toggle-row input[type=checkbox]:focus-visible {
  outline:2px solid #95e7ff;outline-offset:3px;
}
body.hub-body #wbs-notifications-panel .wbs-switch-state {
  margin-left:auto;margin-right:9px;font-size:11px;font-weight:700;white-space:nowrap;
}
body.hub-body #wbs-notifications-panel .wbs-switch-state[data-state=on],
body.hub-body #wbs-notifications-panel #wbs-newsletter-state[data-state=on] {color:#baff9f}
body.hub-body #wbs-notifications-panel .wbs-switch-state[data-state=off],
body.hub-body #wbs-notifications-panel #wbs-newsletter-state[data-state=off] {color:#ffb6bc}
body.hub-body #wbs-notifications-panel #wbs-newsletter-state[data-state^=pending] {color:#f0d79b}
body.hub-body #wbs-notifications-panel .wbs-notifications-controls button,
body.hub-body #wbs-notifications-panel button[type=submit] {
  min-height:38px;padding:8px 14px;border-radius:12px;
  border:1px solid rgba(239,230,255,.55);background:transparent!important;
  transition:transform 220ms,border-color 220ms,box-shadow 220ms;
}
body.hub-body #wbs-notifications-panel .wbs-notifications-controls button:hover:not(:disabled),
body.hub-body #wbs-notifications-panel button[type=submit]:hover:not(:disabled) {
  transform:translateY(-2px);border-color:rgba(187,237,255,.85);
  box-shadow:0 8px 19px rgba(0,0,0,.17),inset 0 1px rgba(255,255,255,.39);
}
body.hub-body #wbs-notifications-panel #wbs-notifications-volume {
  --wbs-fill:50%;margin:10px 0 15px;max-width:100%;
  background:linear-gradient(90deg,rgba(172,153,245,.86) 0%,
   rgba(137,233,248,.91) var(--wbs-fill),
   rgba(15,18,40,.34) var(--wbs-fill),rgba(15,18,40,.34) 100%);
}
body.hub-body #wbs-notifications-panel .wbs-notifications-volume-row {margin-top:14px}
body.hub-body #wbs-notifications-panel .wbs-notifications-note {font-size:11px}
@media(max-width:820px) {
 body.hub-body #wbs-notifications-panel .wbs-v3-tone-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:540px) {
 body.hub-body #wbs-notifications-panel .wbs-v3-tone-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce) {
 body.hub-body #wbs-notifications-panel .wbs-v3-tone,
 body.hub-body #wbs-notifications-panel .wbs-v3-tone::after,
 body.hub-body #wbs-notifications-panel .wbs-notifications-toggle-row input,
 body.hub-body #wbs-notifications-panel .wbs-notifications-toggle-row input::before {transition:none!important;transform:none!important}
}
@supports not (backdrop-filter:blur(1px)) {
 body.hub-body #wbs-notifications-panel .wbs-notifications-unified {background:rgba(15,19,39,.9)!important}
}

/* WBS-NOTIFICATIONS-V6-DIRECT-20261029 */

/* WBS Notifications V6 — canonical animated buttons */

.wbs-ui-button,
body.hub-body #wbs-notifications-panel .wbs-notifications-controls button,
body.hub-body #wbs-notifications-panel button[type="submit"] {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:40px;
  padding:9px 17px;
  border-radius:12px;
  border:1px solid rgba(190,223,255,.70)!important;
  background:linear-gradient(
    145deg,
    rgba(129,148,211,.18),
    rgba(65,84,145,.08)
  )!important;
  color:#f5faff!important;
  cursor:pointer;
  box-shadow:
    inset 0 1px rgba(255,255,255,.39),
    0 4px 12px rgba(0,0,0,.14);
  transition:
    transform 220ms cubic-bezier(.2,.8,.2,1),
    border-color 220ms,
    box-shadow 220ms,
    background-color 220ms;
}

.wbs-ui-button::after,
body.hub-body #wbs-notifications-panel .wbs-notifications-controls button::after,
body.hub-body #wbs-notifications-panel button[type="submit"]::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    108deg,
    transparent 26%,
    rgba(235,251,255,.26) 48%,
    transparent 68%
  );
  transform:translateX(-125%);
  transition:transform 520ms cubic-bezier(.2,.8,.2,1);
}

@media(hover:hover) {
  .wbs-ui-button:hover:not(:disabled),
  body.hub-body #wbs-notifications-panel .wbs-notifications-controls button:hover:not(:disabled),
  body.hub-body #wbs-notifications-panel button[type="submit"]:hover:not(:disabled) {
    transform:translateY(-2px);
    border-color:rgba(160,239,255,.96)!important;
    background:linear-gradient(
      135deg,
      rgba(113,177,237,.26),
      rgba(105,93,214,.17)
    )!important;
    box-shadow:
      0 7px 22px rgba(64,119,200,.25),
      inset 0 1px rgba(255,255,255,.56);
  }

  .wbs-ui-button:hover::after,
  body.hub-body #wbs-notifications-panel .wbs-notifications-controls button:hover::after,
  body.hub-body #wbs-notifications-panel button[type="submit"]:hover::after {
    transform:translateX(125%);
  }
}

.wbs-ui-button:active:not(:disabled),
body.hub-body #wbs-notifications-panel .wbs-notifications-controls button:active:not(:disabled),
body.hub-body #wbs-notifications-panel button[type="submit"]:active:not(:disabled) {
  transform:translateY(0) scale(.985);
  box-shadow:inset 0 2px 9px rgba(0,0,0,.23);
}

.wbs-ui-button:focus-visible,
body.hub-body #wbs-notifications-panel .wbs-notifications-controls button:focus-visible,
body.hub-body #wbs-notifications-panel button[type="submit"]:focus-visible {
  outline:2px solid #95e7ff;
  outline-offset:3px;
}

.wbs-ui-button:disabled,
body.hub-body #wbs-notifications-panel .wbs-notifications-controls button:disabled {
  opacity:.48;
  cursor:not-allowed;
}

body.hub-body #wbs-notifications-panel .wbs-v3-tone:has(input:checked) {
  border-color:#baff9f!important;
  box-shadow:
    0 0 0 1px rgba(176,255,165,.42),
    0 0 19px rgba(141,251,129,.29)!important;
}

@media(prefers-reduced-motion:reduce) {
  .wbs-ui-button,
  .wbs-ui-button::after,
  body.hub-body #wbs-notifications-panel .wbs-notifications-controls button,
  body.hub-body #wbs-notifications-panel .wbs-notifications-controls button::after,
  body.hub-body #wbs-notifications-panel button[type="submit"],
  body.hub-body #wbs-notifications-panel button[type="submit"]::after {
    transition:none!important;
    animation:none!important;
    transform:none!important;
  }
}

/* WBS-PROFILE-IDENTITY-FIRST-V6-20261029 */

/* WBS PROFILE IDENTITY FIRST V6
   Canonical scoped layout — replaces older profile rules. */

/* Shared optical language */

body.hub-body .hub-main .wbs-profile-v6,
body.hub-body .hub-main .wbs-profile-v3-separate-banner
    > .wbs-profile-v3-cover {
  position:relative;
  min-width:0;
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(242,234,255,.66);
  border-radius:24px;
  background:transparent;
  box-shadow:
    0 20px 44px rgba(0,0,0,.21),
    inset 0 2px rgba(255,255,255,.56),
    inset 0 -1px rgba(136,218,255,.28);
  backdrop-filter:blur(8px) saturate(135%) brightness(1.35);
  -webkit-backdrop-filter:blur(8px) saturate(135%) brightness(1.35);
}

/* Separate banner */

body.hub-body .hub-main .wbs-profile-v3-separate-banner {
  margin:0 0 17px;
  min-width:0;
}

body.hub-body .hub-main .wbs-profile-v3-separate-banner
    > .wbs-profile-v3-cover {
  padding:10px;
  margin:0;
  overflow:visible;
}

body.hub-body .wbs-profile-v3-cover-visual {
  position:relative;
  width:100%;
  height:clamp(160px,20vw,205px);
  border-radius:16px;
  overflow:hidden;
  background:rgba(8,14,34,.7);
}

body.hub-body .wbs-profile-v3-cover-image {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:16px;
  transition:transform 550ms cubic-bezier(.2,.8,.2,1);
}

body.hub-body .wbs-profile-v3-cover-shade {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    0deg,rgba(4,9,26,.75),transparent 65%
  );
}

body.hub-body .wbs-profile-v3-cover-caption {
  position:absolute;
  left:19px;
  bottom:16px;
  display:flex;
  flex-direction:column;
  gap:4px;
  color:#fff;
  text-shadow:0 2px 9px rgba(0,0,0,.55);
}

body.hub-body .wbs-profile-v3-cover-caption span {
  font-size:10px;
  letter-spacing:.1em;
}

body.hub-body .wbs-profile-v3-cover-caption strong {
  font-size:clamp(14px,1.7vw,19px);
}

body.hub-body .wbs-profile-v3-banner-editor {
  position:static;
  width:100%;
}

body.hub-body .wbs-profile-v3-banner-editor > summary {
  position:absolute;
  top:18px;
  right:18px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:auto;
  min-height:33px;
  padding:6px 11px;
  font-size:11px;
  font-weight:650;
  color:#fff;
  list-style:none;
  cursor:pointer;
  border:1px solid rgba(222,244,255,.62);
  border-radius:10px;
  background:rgba(10,18,41,.66);
  box-shadow:inset 0 1px rgba(255,255,255,.3);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform 200ms,border-color 200ms,background-color 200ms;
}

body.hub-body .wbs-profile-v3-banner-editor
    > summary::-webkit-details-marker {
  display:none;
}

body.hub-body .wbs-profile-v3-banner-form {
  position:static;
  display:grid;
  gap:10px;
  width:100%;
  max-width:none;
  margin:12px 0 0;
  padding:15px;
  border:1px solid rgba(222,244,255,.32);
  border-radius:13px;
  background:rgba(141,198,241,.07);
  color:#f6f3ff;
}

body.hub-body .wbs-profile-v3-banner-form label {
  font-size:13px;
  font-weight:700;
}

body.hub-body .wbs-profile-v3-banner-form small {
  font-size:11px;
  line-height:1.55;
  color:#d5cfe8;
}

body.hub-body .wbs-profile-v3-banner-form input[type=file] {
  display:block;
  width:100%;
  min-width:0;
  padding:10px;
  border:1px solid rgba(208,234,255,.4);
  border-radius:11px;
  background:rgba(5,15,37,.3);
  color:#fff;
}

body.hub-body .wbs-profile-v3-banner-form
    input::file-selector-button {
  margin-right:9px;
  padding:8px 12px;
  border:1px solid rgba(210,240,255,.5);
  border-radius:9px;
  background:rgba(165,218,246,.13);
  color:#fff;
  font:inherit;
  cursor:pointer;
}

body.hub-body .wbs-profile-v3-banner-actions {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

body.hub-body .wbs-profile-v3-feedback {
  font-size:12px;
  color:#baff9f;
  margin:9px 0;
}

/* Main profile shell */

body.hub-body .hub-main .wbs-profile-v6 {
  padding:clamp(17px,2.4vw,25px);
  color:#f6f3ff;
}

body.hub-body .wbs-profile-v6 *,
body.hub-body .wbs-profile-v6 *::before,
body.hub-body .wbs-profile-v6 *::after {
  box-sizing:border-box;
}

body.hub-body .wbs-profile-v6-kicker {
  display:block;
  margin:0 0 5px;
  font-size:10px;
  letter-spacing:.1em;
  color:#cfc3f5;
}

body.hub-body .wbs-profile-v6-title {
  margin:0 0 17px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(233,238,255,.26);
}

body.hub-body .wbs-profile-v6-title h1 {
  margin:0;
  font-size:clamp(23px,2.5vw,30px);
  line-height:1.2;
}

/* Identity area — avatar starts immediately at the top */

body.hub-body .wbs-profile-v6-identity {
  display:grid;
  grid-template-columns:minmax(0,245px) minmax(0,1fr);
  align-items:start;
  gap:clamp(16px,2vw,26px);
  padding-bottom:20px;
  margin-bottom:17px;
  border-bottom:1px solid rgba(233,238,255,.26);
}

body.hub-body .wbs-profile-v6-portrait {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  min-width:0;
}

body.hub-body .wbs-profile-v6 .hub-avatar {
  position:relative;
  display:block;
  width:min(100%,245px);
  height:auto;
  aspect-ratio:1;
  flex:none;
  overflow:hidden;
  border:2px solid rgba(221,244,255,.78);
  border-radius:23px;
  background:rgba(12,17,38,.55);
  box-shadow:
    0 12px 31px rgba(29,78,159,.28),
    0 0 0 4px rgba(173,227,255,.075);
  transition:
    transform 250ms cubic-bezier(.2,.8,.2,1),
    border-color 250ms,
    box-shadow 250ms;
}

body.hub-body .wbs-profile-v6 .hub-avatar img {
  display:block;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  max-width:none!important;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:21px;
}

body.hub-body .wbs-profile-v6-account {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-width:0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
}

body.hub-body .wbs-profile-v6-account-kicker {
  color:#bfcfe9;
  font-size:11px;
  letter-spacing:.05em;
}

body.hub-body .wbs-profile-v6-username {
  margin:5px 0 16px;
  color:#fff;
  font-size:clamp(24px,2.8vw,33px);
  line-height:1.18;
  overflow-wrap:anywhere;
}

body.hub-body .wbs-profile-v6-account h3 {
  margin:0 0 5px;
  padding-bottom:11px;
  border-bottom:1px solid rgba(225,237,255,.24);
  font-size:15px;
}

body.hub-body .wbs-profile-v6-account .hub-profile-details {
  display:block;
  width:100%;
  margin:0;
  padding:0;
}

body.hub-body .wbs-profile-v6-account
    .hub-profile-details > div {
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:start;
  gap:10px;
  margin:0;
  padding:10px 0;
  border-bottom:1px solid rgba(225,237,255,.17);
}

body.hub-body .wbs-profile-v6-account
    .hub-profile-details dt {
  margin:0;
  font-size:12px;
  color:#c6d8ef;
  line-height:1.5;
}

body.hub-body .wbs-profile-v6-account
    .hub-profile-details dd {
  margin:0;
  font-size:13px;
  font-weight:650;
  color:#fff;
  line-height:1.5;
  overflow-wrap:anywhere;
}

body.hub-body .wbs-profile-v6-public-action {
  display:flex;
  margin-top:14px;
}

/* Compact grouped settings */

body.hub-body .wbs-profile-v6 .wbs-profile-v2__grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:21px;
  align-items:start;
}

body.hub-body .wbs-profile-v6 .wbs-profile-v2__group {
  min-width:0;
  margin:0;
  padding:0;
}

body.hub-body .wbs-profile-v6
    .wbs-profile-v2__group + .wbs-profile-v2__group {
  border-left:1px solid rgba(233,238,255,.22);
  padding-left:21px;
}

body.hub-body .wbs-profile-v6 .wbs-profile-v2__group-title {
  margin:0 0 8px;
  font-size:16px;
}

body.hub-body .wbs-profile-v6 .hub-profile-panel {
  display:block;
  min-height:0!important;
  margin:0!important;
  padding:12px 0!important;
  border:0!important;
  border-bottom:1px solid rgba(233,238,255,.19)!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

body.hub-body .wbs-profile-v6 .hub-profile-panel h2 {
  margin:0 0 7px;
  font-size:13px;
  line-height:1.4;
}

body.hub-body .wbs-profile-v6 .hub-bio-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}

body.hub-body .wbs-profile-v6 .hub-bio-header h2 {
  margin:0;
}

body.hub-body .wbs-profile-v6 .hub-profile-panel p {
  margin:5px 0 0;
  font-size:12px;
  line-height:1.65;
  color:#d5cfe8;
  overflow-wrap:anywhere;
}

body.hub-body .wbs-profile-v6 .hub-bio-text {
  max-height:140px;
  overflow:auto;
}

/* Compact security footer */

body.hub-body .wbs-profile-v6 .wbs-profile-v2__bottom {
  display:block;
  margin-top:17px;
  padding-top:16px;
  border-top:1px solid rgba(233,238,255,.26);
}

body.hub-body .wbs-profile-v6 .wbs-profile-v2__bottom
    > .hub-profile-panel {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:5px 15px;
  align-items:center;
  padding:0!important;
  border:0!important;
}

body.hub-body .wbs-profile-v6 .wbs-profile-v2__bottom h2 {
  grid-column:1;
  margin:0;
  font-size:15px;
}

body.hub-body .wbs-profile-v6 .wbs-profile-v2__bottom p {
  grid-column:1;
  margin:0;
}

body.hub-body .wbs-profile-v6 .hub-profile-actions {
  grid-column:2;
  grid-row:1/3;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

body.hub-body .wbs-profile-v6 .hub-profile-actions form {
  margin:0;
}

/* Canonical glass buttons */

body.hub-body .wbs-profile-v6 :is(
    .hub-profile-action,.hub-profile-signout),
body.hub-body .wbs-profile-v3-banner-actions button {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:auto;
  max-width:100%;
  min-height:37px;
  padding:8px 13px;
  border:1px solid rgba(193,230,255,.48)!important;
  border-radius:11px;
  background:rgba(163,218,248,.10)!important;
  color:#f6faff;
  font-size:12px;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  box-shadow:inset 0 1px rgba(255,255,255,.27);
  transition:
    transform 210ms cubic-bezier(.2,.8,.2,1),
    border-color 210ms,
    box-shadow 210ms,
    background-color 210ms;
}

body.hub-body .wbs-profile-v6 .hub-profile-signout,
body.hub-body .wbs-profile-v3-banner-actions
    button[value="remove"] {
  border-color:rgba(255,183,191,.43)!important;
}

@media(hover:hover) {
  body.hub-body .wbs-profile-v6 .hub-avatar:hover {
    transform:translateY(-3px);
    border-color:#bdf2ff;
    box-shadow:
      0 16px 36px rgba(55,135,218,.32),
      0 0 0 5px rgba(175,230,255,.11);
  }

  body.hub-body .wbs-profile-v6 :is(
      .hub-profile-action,.hub-profile-signout):hover,
  body.hub-body .wbs-profile-v3-banner-actions button:hover,
  body.hub-body .wbs-profile-v3-banner-editor > summary:hover {
    transform:translateY(-2px);
    border-color:rgba(166,238,255,.85)!important;
    background:rgba(168,227,250,.2)!important;
    box-shadow:0 7px 17px rgba(72,155,219,.16);
  }

  body.hub-body .wbs-profile-v3-cover-visual:hover
      .wbs-profile-v3-cover-image {
    transform:scale(1.02);
  }
}

body.hub-body .wbs-profile-v6 :is(
    .hub-profile-action,.hub-profile-signout):active,
body.hub-body .wbs-profile-v3-banner-actions button:active {
  transform:translateY(0) scale(.985);
}

body.hub-body .wbs-profile-v6 :is(
    .hub-profile-action,.hub-profile-signout):focus-visible,
body.hub-body .wbs-profile-v3-banner-editor > summary:focus-visible,
body.hub-body .wbs-profile-v3-banner-form input:focus-visible {
  outline:2px solid #95e7ff;
  outline-offset:3px;
}

/* Responsive */

@media(max-width:680px) {
  body.hub-body .wbs-profile-v6-identity,
  body.hub-body .wbs-profile-v6 .wbs-profile-v2__grid {
    grid-template-columns:minmax(0,1fr);
  }

  body.hub-body .wbs-profile-v6-portrait {
    align-items:flex-start;
  }

  body.hub-body .wbs-profile-v6 .wbs-profile-v2__group
      + .wbs-profile-v2__group {
    border-left:0;
    border-top:1px solid rgba(233,238,255,.22);
    padding-left:0;
    padding-top:15px;
  }
}

@media(max-width:460px) {
  body.hub-body .hub-main .wbs-profile-v6 {
    padding:15px;
    border-radius:20px;
  }

  body.hub-body .wbs-profile-v6 .hub-avatar {
    width:min(100%,210px);
  }

  body.hub-body .wbs-profile-v6 .wbs-profile-v2__bottom
      > .hub-profile-panel {
    display:block;
  }

  body.hub-body .wbs-profile-v6 .hub-profile-actions {
    justify-content:flex-start;
    margin-top:12px;
  }

  body.hub-body .wbs-profile-v3-cover-visual {
    height:150px;
  }
}

@media(prefers-reduced-motion:reduce) {
  body.hub-body .wbs-profile-v6 .hub-avatar,
  body.hub-body .wbs-profile-v3-cover-image,
  body.hub-body .wbs-profile-v6 :is(
      .hub-profile-action,.hub-profile-signout),
  body.hub-body .wbs-profile-v3-banner-editor > summary {
    transition:none!important;
    animation:none!important;
    transform:none!important;
  }
}

@supports not (backdrop-filter:blur(1px)) {
  body.hub-body .hub-main .wbs-profile-v6,
  body.hub-body .hub-main .wbs-profile-v3-separate-banner
      > .wbs-profile-v3-cover {
    background:rgba(14,19,37,.91);
  }
}


/* WBS-CONNECTIONS-DOCK-V52-20261029 */

body.hub-body .wbs-connection-dock {
  min-width:0;
  margin:0 0 17px;
  border:1px solid rgba(231,237,255,.43);
  border-radius:17px;
  background:rgba(108,127,208,.055);
  box-shadow:inset 0 1px rgba(255,255,255,.23);
  color:#fff;
}

body.hub-body .wbs-connection-dock *,
body.hub-body .wbs-connection-dock *::before,
body.hub-body .wbs-connection-dock *::after {
  box-sizing:border-box;
}

body.hub-body .wbs-connection-dock__trigger {
  display:flex;
  align-items:center;
  gap:16px;
  min-height:67px;
  padding:12px 17px;
  list-style:none;
  cursor:pointer;
  border-radius:16px;
  transition:background-color .2s ease;
}

body.hub-body .wbs-connection-dock__trigger::-webkit-details-marker {
  display:none;
}

body.hub-body .wbs-connection-dock__title {
  display:flex;
  flex:1;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  min-width:0;
}

body.hub-body .wbs-connection-dock__title strong {
  color:#fff;
  font-size:15px;
  line-height:1.3;
}

body.hub-body .wbs-connection-dock__title small {
  color:#bdf4cc;
  font-size:11px;
}

body.hub-body .wbs-connection-dock__logos {
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}

body.hub-body .wbs-connection-dock__logos > span {
  display:grid;
  place-items:center;
  width:35px;
  height:35px;
  border:1px solid rgba(224,238,255,.24);
  border-radius:11px;
  background:rgba(132,169,239,.08);
  opacity:.4;
}

body.hub-body .wbs-connection-dock__logos > span.is-linked {
  opacity:1;
  border-color:rgba(177,242,204,.54);
}

body.hub-body .wbs-connection-dock__logos img {
  width:19px;
  height:19px;
  display:block;
  filter:invert(1);
}

body.hub-body .wbs-connection-dock__manage {
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  font-size:11px;
  color:#dbe7f6;
}

body.hub-body .wbs-connection-dock__arrow {
  display:inline-block;
  width:8px;
  height:8px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .2s ease;
}

body.hub-body .wbs-connection-dock[open]
.wbs-connection-dock__arrow {
  transform:rotate(225deg);
}

body.hub-body .wbs-connection-dock[open]
.wbs-connection-dock__trigger {
  border-bottom:1px solid rgba(224,238,255,.17);
  border-radius:16px 16px 0 0;
}

body.hub-body .wbs-connection-dock .wbs-con-v5 {
  display:block;
  min-width:0;
  margin:0;
  padding:10px;
  border:0;
  border-radius:0 0 16px 16px;
  background:transparent;
  box-shadow:none;
}

body.hub-body .wbs-connection-dock
:is(.wbs-con-v5__header,.wbs-con-v5__footnote) {
  display:none;
}

body.hub-body .wbs-connection-dock .wbs-con-v5__list {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr));
  align-content:start;
  gap:9px;
  min-width:0;
}

body.hub-body .wbs-connection-dock .wbs-con-v5__card {
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(221,239,255,.28);
  border-radius:12px;
  background:rgba(17,28,54,.17);
  transition:border-color .2s ease,background-color .2s ease;
}

body.hub-body .wbs-connection-dock .wbs-con-v5__row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding:11px;
}

body.hub-body .wbs-connection-dock .wbs-con-v5__service {
  display:flex;
  align-items:center;
  min-width:0;
  gap:9px;
}

body.hub-body .wbs-connection-dock .wbs-con-v5__logo {
  display:grid;
  place-items:center;
  flex:0 0 35px;
  width:35px;
  height:35px;
  border-radius:10px;
  border:1px solid rgba(214,237,255,.31);
  background:rgba(160,200,255,.07);
}

body.hub-body .wbs-connection-dock .wbs-con-v5__logo img {
  width:20px;
  height:20px;
  filter:invert(1);
}

body.hub-body .wbs-connection-dock .wbs-con-v5__identity {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

body.hub-body .wbs-connection-dock .wbs-con-v5__identity h3 {
  margin:0;
  color:#fff;
  font-size:13px;
}

body.hub-body .wbs-connection-dock .wbs-con-v5__status {
  font-size:10px;
  color:#cbd7eb;
}

body.hub-body .wbs-connection-dock .wbs-con-v5__status--yes,
body.hub-body .wbs-connection-dock .wbs-con-v5__connected {
  color:#b6fac5;
}

body.hub-body .wbs-connection-dock .wbs-con-v5__connected,
body.hub-body .wbs-connection-dock .wbs-con-v5__unavailable {
  font-size:10px;
}

body.hub-body .wbs-connection-dock .wbs-con-v5__status--yes::before {
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:5px;
  border-radius:50%;
  background:currentColor;
}

body.hub-body .wbs-connection-dock .wbs-con-v5__details {
  border-top:1px solid rgba(224,239,255,.18);
}

body.hub-body .wbs-connection-dock .wbs-con-v5__details > summary {
  padding:9px 11px;
  color:#dfe7f8;
  font-size:11px;
  cursor:pointer;
}

body.hub-body .wbs-connection-dock .wbs-con-v5__details-body {
  display:grid;
  gap:12px;
  padding:11px;
}

body.hub-body .wbs-connection-dock .wbs-con-v5__details-body p {
  margin:0;
  font-size:11px;
  line-height:1.6;
  color:#d0d8ea;
}

body.hub-body .wbs-connection-dock .wbs-con-v5__technical summary {
  cursor:pointer;
  color:#d3e8fa;
  font-size:11px;
}

body.hub-body .wbs-connection-dock .wbs-con-v5__technical code {
  display:block;
  margin-top:6px;
  font-size:11px;
  overflow-wrap:anywhere;
}

body.hub-body .wbs-connection-dock .wbs-con-v5__details label {
  display:block;
  margin-bottom:7px;
  font-size:11px;
}

body.hub-body .wbs-connection-dock .wbs-con-v5__form-row {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

body.hub-body .wbs-connection-dock .wbs-con-v5__form-row input {
  min-height:37px;
  width:min(100%,180px);
  padding:8px 10px;
  background:rgba(8,18,39,.33);
  color:#fff;
  border:1px solid rgba(220,239,255,.43);
  border-radius:10px;
}

body.hub-body .wbs-connection-dock .wbs-con-v5__btn {
  min-height:37px;
  padding:8px 11px;
  color:#fff;
  font-size:11px;
  cursor:pointer;
  border:1px solid rgba(208,237,255,.51);
  border-radius:10px;
  background:rgba(149,212,250,.13);
  transition:background-color .2s ease,transform .2s ease;
}

body.hub-body .wbs-connection-dock .wbs-con-v5__btn--danger {
  border-color:rgba(251,173,185,.58);
}

body.hub-body .wbs-connection-dock .wbs-con-v5__message {
  margin:0 10px 10px;
  padding:8px 10px;
  border-radius:9px;
  background:rgba(75,170,113,.13);
  color:#c0fbcf;
  font-size:11px;
}

body.hub-body .wbs-connection-dock .wbs-con-v5__message--error {
  background:rgba(211,79,108,.14);
  color:#ffd3da;
}

body.hub-body .wbs-connection-dock :is(
  summary,button,input
):focus-visible {
  outline:2px solid #a3edff;
  outline-offset:3px;
}

@media(hover:hover) {
  body.hub-body .wbs-connection-dock__trigger:hover {
    background:rgba(148,213,255,.09);
  }

  body.hub-body .wbs-connection-dock .wbs-con-v5__card:hover {
    border-color:rgba(221,243,255,.56);
  }

  body.hub-body .wbs-connection-dock .wbs-con-v5__btn:hover {
    background:rgba(156,216,255,.23);
    transform:translateY(-1px);
  }
}

@media(max-width:540px) {
  body.hub-body .wbs-connection-dock__trigger {
    flex-wrap:wrap;
    gap:11px;
  }

  body.hub-body .wbs-connection-dock__title {
    flex-basis:100%;
  }

  body.hub-body .wbs-connection-dock__manage {
    margin-left:auto;
  }
}

@media(prefers-reduced-motion:reduce) {
  body.hub-body .wbs-connection-dock *,
  body.hub-body .wbs-connection-dock *::before,
  body.hub-body .wbs-connection-dock *::after {
    transition:none!important;
  }
}


/* WBS-ROLE-TAGS-V1-20261029 */
.wbs-role-tags {
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    max-width:100%;
    margin:7px 0 5px;
    vertical-align:middle;
}
.wbs-role-tag {
    --wbs-role-color:#b7c4dc;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-height:26px;
    max-width:100%;
    padding:4px 10px;
    border:1px solid var(--wbs-role-color);
    border-radius:9px;
    color:var(--wbs-role-color);
    background:rgba(33,28,71,.45);
    background:linear-gradient(
        125deg,
        color-mix(
            in srgb,
            var(--wbs-role-color) 13%,
            transparent
        ),
        rgba(12,14,45,.3)
    );
    box-shadow:
        inset 0 1px rgba(255,255,255,.17),
        0 0 11px color-mix(
            in srgb,
            var(--wbs-role-color) 15%,
            transparent
        );
    font:inherit;
    font-size:11px;
    font-weight:750;
    line-height:1.3;
    letter-spacing:.025em;
    white-space:nowrap;
}
.wbs-role-tag__symbol {
    font-size:12px;
    line-height:1;
}
.wbs-role-tag__extra {
    color:#d1c4ec;
    font-size:11px;
}
@media(max-width:480px) {
    .wbs-role-tag {
        padding:4px 8px;
        font-size:10px;
    }
}


/* WBS-ROLE-POSITION-V2-20261029 */

/* Name on the left, existing role tag on the right. */
.wbs-profile-role-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px 16px;
    width:100%;
    min-width:0;
}

.wbs-profile-role-row > :is(h1,h2,h3,h4,h5,h6) {
    flex:1 1 165px;
    width:auto;
    min-width:0;
    max-width:100%;
    margin:0;
}

.wbs-profile-role-row > .wbs-role-tags {
    display:inline-flex;
    flex:0 1 auto;
    align-items:center;
    justify-content:flex-end;
    max-width:100%;
    margin:0;
}

.wbs-profile-role-row .wbs-role-tag {
    flex-shrink:0;
}

@media(max-width:520px) {
    .wbs-profile-role-row {
        gap:8px 10px;
    }
}


/* WBS-ROLE-POSITION-V21-20261029 */
/* Align role with the top of the nickname, not its center. */
.wbs-profile-role-row > .wbs-role-tags {
    align-self: flex-start;
}


/* WBS-ROLE-TAGS-V3-20261029 */
.wbs-role-tags .wbs-role-tag {
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:30px;
    padding:4px 11px 4px 5px;
    border-radius:11px;
    color:var(--wbs-role-color);
    background:linear-gradient(
        115deg,
        rgba(255,255,255,.12),
        rgba(22,20,56,.65) 55%,
        rgba(12,12,39,.72)
    );
    box-shadow:
        inset 0 1px rgba(255,255,255,.35),
        inset 0 -1px rgba(255,255,255,.08),
        0 2px 10px rgba(1,3,18,.25),
        0 0 14px color-mix(
            in srgb,var(--wbs-role-color) 23%,transparent
        );
    font-size:11px;
    font-weight:750;
    line-height:1.3;
    text-shadow:0 0 9px color-mix(
        in srgb,var(--wbs-role-color) 30%,transparent
    );
    transition:box-shadow .18s,background-color .18s;
}
.wbs-role-tags .wbs-role-tag::before {
    content:"";
    position:absolute;
    top:1px;
    left:9px;
    right:9px;
    height:1px;
    pointer-events:none;
    background:linear-gradient(
        90deg,transparent,rgba(255,255,255,.55),transparent
    );
}
.wbs-role-tags .wbs-role-tag__icon {
    display:inline-grid;
    place-items:center;
    flex:0 0 21px;
    width:21px;
    height:21px;
    border:1px solid rgba(255,255,255,.23);
    border-radius:7px;
    background:rgba(255,255,255,.075);
}
.wbs-role-tags .wbs-role-tag__icon::before {
    content:"";
    display:block;
    width:14px;
    height:14px;
    background:currentColor;
    -webkit-mask-image:var(--wbs-role-svg);
    mask-image:var(--wbs-role-svg);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;
}
.wbs-role-tags .wbs-role-tag__fallback {
    display:none;
}
@supports not (mask-image:url("x")) {
    .wbs-role-tags .wbs-role-tag__icon::before {
        display:none;
    }
    .wbs-role-tags .wbs-role-tag__fallback {
        display:block;
    }
}
.wbs-role-tags .wbs-role-tag--admin {
    border-color:#ff857c;
    box-shadow:
        inset 0 1px rgba(255,255,255,.35),
        0 0 17px rgba(255,112,106,.22);
}
@media(hover:hover) {
    .wbs-role-tags .wbs-role-tag:hover {
        box-shadow:
            inset 0 1px rgba(255,255,255,.4),
            0 0 20px color-mix(
                in srgb,var(--wbs-role-color) 35%,transparent
            );
    }
}
@media(max-width:480px) {
    .wbs-role-tags .wbs-role-tag {
        min-height:28px;
        padding:3px 8px 3px 4px;
        font-size:10px;
    }
    .wbs-role-tags .wbs-role-tag__icon {
        flex-basis:19px;
        width:19px;
        height:19px;
    }
}
@media(prefers-reduced-motion:reduce) {
    .wbs-role-tags .wbs-role-tag {
        transition:none;
    }
}


/* WBS-ROLE-BEFORE-NAME-V33-20261029 */
.wbs-role-tags .wbs-role-tag--user {
    min-height:24px;
    padding:3px 7px 3px 3px;
    font-size:10px;
    gap:5px;
}
.wbs-role-tags .wbs-role-tag--user .wbs-role-tag__icon {
    width:17px;
    height:17px;
    flex-basis:17px;
    border-radius:5px;
}
.wbs-role-tags .wbs-role-tag--user .wbs-role-tag__icon::before {
    width:12px;
    height:12px;
}
.wbs-friend-role-line {
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
    max-width:100%;
    min-width:0;
    gap:5px 7px;
}
.wbs-friend-role-line .wbs-role-tags {
    margin:0;
}
.wbs-friend-role-line .wbs-role-tag {
    min-height:22px;
    padding:2px 6px 2px 3px;
    font-size:9px;
}
.wbs-friend-role-line .wbs-role-tag__icon {
    width:15px;
    height:15px;
    flex-basis:15px;
    border-radius:4px;
}
.wbs-friend-role-line .wbs-role-tag__icon::before {
    width:11px;
    height:11px;
}


/* WBS-UI-CARD-HEIGHT-V35-20261029 */

/* Expanding one connection must not stretch its neighbours. */
body.hub-body .wbs-connection-dock .wbs-con-v5__list {
    align-items:start;
}

body.hub-body .wbs-connection-dock
.wbs-con-v5__list > .wbs-con-v5__card {
    align-self:start;
    height:auto;
    min-height:0;
}

/* Preserve compact layout on narrow screens. */
@media(max-width:540px) {
    body.hub-body .wbs-connection-dock .wbs-con-v5__list {
        grid-template-columns:minmax(0,1fr);
    }
}