/* Dashboard welcome quick actions + profile chrome */



/* Shared section divider (Quick Actions pattern): Stats, Unit Info, Progress, uirows */

.tfld-section-head,

.tfld-quick-actions__head,

.tfld-stats-section-head,

.tfld-uirow__head {

  display: flex;

  align-items: center;

  gap: 14px;

  width: 100%;

}



.tfld-section-head__line,

.tfld-quick-actions__line {

  flex: 1 1 auto;

  min-width: 12px;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);

}



/* Stats / Unit Info / Progress keep ::before/::after lines (no markup churn) */

.tfld-stats-section-head::before,

.tfld-stats-section-head::after {

  content: "";

  flex: 1 1 auto;

  min-width: 12px;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);

}



.tfld-section-head__title,

.tfld-quick-actions__title,

.tfld-stats-section-title,

.tfld-uirow__title {

  margin: 0;

  padding: 0;

  flex: 0 0 auto;

  max-width: 100%;

  font-family: inherit;

  font-size: 12px;

  font-weight: 650;

  line-height: 1.2;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  text-align: center;

  color: rgba(255, 255, 255, 0.72);

  background: transparent;

}



/* Unit Info subgroup rows: title with fade lines; subtitle under the divider */

.tfld-uirow__head {

  justify-content: flex-start;

  margin: 0 0 4px;

}



.tfld-uirow__sub {

  flex: none;

  width: 100%;

  margin: 0 0 8px;

  margin-left: 0;

  text-align: center;

}



@media (max-width: 720px) {

  .tfld-uirow__head {

    flex-direction: row;

    align-items: center;

  }



  .tfld-uirow__sub {

    margin-left: 0;

  }

}



.tfld-header--dashboard {

  position: relative;

  /* Keep the profile indicator and dropdown above dashboard cards/banners. */
  z-index: 1000;

  padding-top: clamp(8px, 1.2vw, 14px);

}



/* Dashboard header: Welcome → Quick Actions; profile cluster overlays top-right */

.tfld-header--dashboard .tfld-header__top {

  position: relative;

  z-index: 1001;

  display: block;

  width: 100%;

}



.tfld-header--dashboard .tfld-header__intro {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: stretch;

  gap: 12px;

  min-width: 0;

  max-width: 100%;

  padding: 14px 16px 12px;

  border-radius: var(--tfld-radius, 12px);

  border: 1px solid var(--tfld-border, rgba(255, 255, 255, 0.10));

  background: var(--tfld-surface,
    var(--tfld-panel-wash, radial-gradient(420px 200px at 28% 0%, rgba(24,199,195,.06), transparent 62%)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.16)),
    var(--tfld-panel, rgba(255, 255, 255, 0.055)));

  box-shadow:
    var(--tfld-inset, inset 0 1px 0 rgba(255, 255, 255, 0.06)),
    var(--tfld-shadow, 0 10px 28px rgba(0, 0, 0, 0.28));

  overflow: visible;

  isolation: isolate;

  box-sizing: border-box;

}



.tfld-header--dashboard .tfld-header__welcome {

  /* Reserve horizontal room so centered welcome doesn't run under the cluster */

  padding: 0 clamp(88px, 18vw, 200px);

  min-width: 0;

  box-sizing: border-box;

}



.tfld-header--dashboard .tfld-header__intro .tfld-quick-actions__head {

  margin: 0;

}



/* Profile chrome: overlays top-right of the intro panel (out of vertical stack) */

.tfld-header__rail {

  position: absolute;

  top: 10px;

  right: 12px;

  left: auto;

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: flex-end;

  gap: 10px;

  width: auto;

  max-width: calc(100% - 24px);

  min-width: 0;

  z-index: 40;

  pointer-events: none;

}



.tfld-header__rail > * {

  pointer-events: auto;

}



.tfld-header__rail .tfld-profile-cluster {

  justify-content: flex-end;

  width: auto;

  max-width: 100%;

}



.tfld-header__rail .tfld-profact {

  width: 100%;

  margin: 0;

}



.tfld-header__rail .tfld-profact .tfld-card__body {

  padding: 10px 12px 12px;

}



.tfld-header__rail .tfld-profact .tfld-table__row {

  font-size: 12px;

}



.tfld-quick-actions {

  width: 100%;

  max-width: 1180px;

  margin: 2px auto 0;

  font-family: inherit;

}



.tfld-quick-actions__head {

  /* Match `.tfld-uirow__head` (Unit Info) header→content gap */

  margin: 0 0 8px;

}



.tfld-quick-actions__group {

  /* Match `.tfld-unitinfo__left` section gap */
  margin-top: 9px;

}



.tfld-quick-actions__group:first-of-type {

  margin-top: 0;

}



.tfld-quick-actions__kicker {

  margin: 0 0 4px;

  padding: 0 2px;

  font-family: inherit;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.13em;

  text-transform: uppercase;

  color: var(--tfld-muted);

}



.tfld-quick-actions__group--unit .tfld-quick-actions__kicker {

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.16em;

  /* Same muted white as Staff kicker (`.tfld-quick-actions__kicker`) */
  color: var(--tfld-muted);

}



.tfld-quick-actions__grid {

  display: grid;

  /* Match `.tfld-uirow__grid` card gap */
  gap: 12px;

}



.tfld-quick-actions__grid--command {

  grid-template-columns: repeat(4, minmax(0, 1fr));

}



.tfld-quick-actions__grid--unit {

  grid-template-columns: repeat(3, minmax(0, 1fr));

}



.tfld-quick-actions__grid > * {

  min-width: 0;

}



.tfld-qa-btn,

a.tfld-qa-btn,

button.tfld-qa-btn {

  display: inline-flex;

  align-items: center;

  justify-content: flex-start;

  gap: 8px;

  width: 100%;

  min-height: 50px;

  padding: 10px 12px;

  border-radius: var(--tfld-radius, 12px);

  /* Shared surface recipe with Unit Info / Stats tiles */
  border: 1px solid var(--tfld-border, rgba(255, 255, 255, 0.10));

  background: var(--tfld-surface,
    var(--tfld-panel-wash, radial-gradient(420px 200px at 28% 0%, rgba(24,199,195,.06), transparent 62%)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.16)),
    var(--tfld-panel, rgba(255, 255, 255, 0.055)));

  box-shadow:
    var(--tfld-inset, inset 0 1px 0 rgba(255, 255, 255, 0.06)),
    var(--tfld-shadow, 0 10px 28px rgba(0, 0, 0, 0.28));

  color: #fff;

  -webkit-text-fill-color: #fff;

  text-decoration: none;

  line-height: 1;

  font-family: inherit;

  font-style: inherit;

  font-size: inherit;

  font-weight: inherit;

  text-align: left;

  cursor: pointer;

  box-sizing: border-box;

  transition: var(--tfld-transition, transform 0.12s ease, background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease);

}



.tfld-qa-btn:visited {

  color: #fff;

}



.tfld-qa-btn:hover,

.tfld-qa-btn:focus-visible {

  border-color: var(--tfld-border-hover, rgba(24, 199, 195, 0.38));

  background: var(--tfld-surface-hover,
    radial-gradient(180px 80px at 28% 0%, rgba(24, 199, 195, 0.12), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.18)),
    rgba(24, 199, 195, 0.05));

  box-shadow:
    var(--tfld-inset-hover, inset 0 1px 0 rgba(255, 255, 255, 0.08)),
    var(--tfld-shadow-hover, 0 14px 34px rgba(0, 0, 0, 0.34));

  transform: translateY(-1px);

}



.tfld-qa-btn--primary,

.tfld-quick-actions__grid--command .tfld-qa-btn,

.tfld-quick-actions__grid--unit .tfld-qa-btn,

.tfld-quick-actions__grid--command .tfld-qa-btn--primary,

.tfld-quick-actions__grid--unit .tfld-qa-btn--primary {

  border-color: var(--tfld-border, rgba(255, 255, 255, 0.10));

  background: var(--tfld-surface,
    var(--tfld-panel-wash, radial-gradient(420px 200px at 28% 0%, rgba(24,199,195,.06), transparent 62%)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.16)),
    var(--tfld-panel, rgba(255, 255, 255, 0.055)));

  box-shadow:
    var(--tfld-inset, inset 0 1px 0 rgba(255, 255, 255, 0.06)),
    var(--tfld-shadow, 0 10px 28px rgba(0, 0, 0, 0.28));

}



.tfld-quick-actions__grid--command .tfld-qa-btn:hover,

.tfld-quick-actions__grid--command .tfld-qa-btn:focus-visible,

.tfld-quick-actions__grid--unit .tfld-qa-btn:hover,

.tfld-quick-actions__grid--unit .tfld-qa-btn:focus-visible {

  border-color: var(--tfld-border-hover, rgba(24, 199, 195, 0.38));

  background: var(--tfld-surface-hover,
    radial-gradient(180px 80px at 28% 0%, rgba(24, 199, 195, 0.12), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.18)),
    rgba(24, 199, 195, 0.05));

  box-shadow:
    var(--tfld-inset-hover, inset 0 1px 0 rgba(255, 255, 255, 0.08)),
    var(--tfld-shadow-hover, 0 14px 34px rgba(0, 0, 0, 0.34));

}



.tfld-qa-ico {

  width: 20px;

  height: 20px;

  flex: 0 0 20px;

  display: block;

  color: #fff;

}



.tfld-qa-label {

  font-family: inherit;

  min-width: 0;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  color: #fff;

  -webkit-text-fill-color: #fff;

  font-size: inherit;

  font-weight: inherit;

  letter-spacing: normal;

  text-transform: none;

}



/* Hide legacy header widgets if they ever leak into the quick-action grid */

.tfld-quick-actions__grid .tfld-btn,

.tfld-quick-actions__grid .tfldn-wrap,

.tfld-quick-actions__grid .tfld-discord-header-chips {

  display: none !important;

}



/* Top-right profile chrome (anchored via .tfld-header__rail) */

.tfld-profile-cluster {

  position: relative;

  top: auto;

  right: auto;

  left: auto;

  z-index: 4;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 10px;

  overflow: visible;

  width: auto;

  max-width: 100%;

  min-width: 0;

  box-sizing: border-box;

}



.tfld-profile-cluster__actions {

  display: flex;

  align-items: center;

  gap: 10px;

  overflow: visible;

}



.tfld-profile-cluster__actions .tfldn-wrap,

.tfldn-wrap {

  position: relative;

  overflow: visible;

}



.tfld-profile-bell,

.tfldn-bell {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 40px;

  padding: 0;

  border-radius: 999px;

  border: 1px solid rgba(24, 199, 195, 0.28);

  background: rgba(0, 0, 0, 0.22);

  color: #fff;

  cursor: pointer;

  overflow: visible;

  -webkit-font-smoothing: antialiased;

}



.tfld-profile-bell .tfld-qa-ico,

.tfldn-bell .tfld-qa-ico {

  width: 20px;

  height: 20px;

  flex: 0 0 20px;

  display: block;

  color: #fff;

  opacity: 1;

  filter: none;

  shape-rendering: geometricPrecision;

}



.tfld-profile-bell__badge,

.tfld-profile-bell [data-tfldn-count],

.tfldn-bell [data-tfldn-count],

.tfldn-wrap > .tfld-profile-bell__badge,

.tfldn-wrap > [data-tfldn-count] {

  position: absolute;

  top: -4px;

  right: -2px;

  z-index: 2;

  min-width: 16px;

  height: 16px;

  padding: 0 4px;

  border-radius: 999px;

  background: #e5484d;

  color: #fff;

  font-size: 10px;

  font-weight: 700;

  line-height: 16px;

  text-align: center;

  pointer-events: none;

}



.tfld-profile-bell [data-tfldn-count][hidden],

.tfldn-wrap > [data-tfldn-count][hidden] {

  display: none !important;

}



.tfld-profile-menu-wrap {

  position: relative;

  z-index: 1002;

}



.tfld-profile-trigger {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 4px 4px 4px 12px;

  border-radius: 999px;

  border: 1px solid var(--tfld-border, rgba(255, 255, 255, 0.1));

  background: rgba(0, 0, 0, 0.22);

  color: rgba(255, 255, 255, 0.9);

  font: inherit;

  cursor: pointer;

  position: relative;

}

.tfld-profile-trigger:hover,

.tfld-profile-trigger:focus-visible {

  border-color: var(--tfld-border-hover, rgba(24, 199, 195, 0.38));

  background: rgba(0, 0, 0, 0.32);

  outline: none;

}



.tfld-profile-trigger__howdy {

  font-size: 13px;

  font-weight: 600;

  white-space: nowrap;

}



.tfld-profile-trigger__avatar {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 34px;

  height: 34px;

  border-radius: 999px;

  background: linear-gradient(145deg, rgba(24, 199, 195, 0.42), rgba(15, 118, 110, 0.55));

  color: #fff;

  font-size: 13px;

  font-weight: 700;

}

.tfld-profile-trigger__new {
  position: absolute;
  /* Separate from the button so the badge has its own placement layer. */
  top: 28px;
  right: -9px;
  z-index: 10000;
  padding: 2px 6px;
  border: 2px solid #0b1117;
  border-radius: 999px;
  background: #f59e0b;
  color: #241303;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.1;
  transform: translateY(0);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .16), 0 0 12px rgba(245, 158, 11, .7);
  animation: tfld-profile-new-chip-pulse 1.4s ease-in-out infinite;
  pointer-events: none;
}

.tfld-profile-trigger[aria-expanded="true"] + .tfld-profile-trigger__new { display: none; }

@keyframes tfld-profile-new-chip-pulse {
  0%, 100% { transform: translateY(0) scale(.94); opacity: .86; }
  50% { transform: translateY(-2px) scale(1.08); opacity: 1; }
}



.tfld-profile-dropdown {

  position: absolute;

  top: calc(100% + 8px);

  right: 0;

  z-index: 50;

  min-width: 240px;

  padding: 8px;

  border-radius: 14px;

  border: 1px solid var(--tfld-border, rgba(255, 255, 255, 0.1));

  background: rgba(11, 17, 23, 0.94) !important;

  background-color: rgba(11, 17, 23, 0.94) !important;
  opacity: 1 !important;
  backdrop-filter: blur(10px);
  mix-blend-mode: normal;

  box-shadow: var(--tfld-shadow, 0 16px 48px rgba(0, 0, 0, 0.72));

  isolation: isolate;

}



.tfld-profile-menu__item {

  display: flex;

  justify-content: flex-start;

  align-items: center;

  gap: 10px;

  width: 100%;

  padding: 10px 12px;

  border: 0;

  border-radius: 10px;

  background: transparent;

  color: rgba(255, 255, 255, 0.9);

  font: inherit;

  font-size: 14px;

  line-height: 1.3;

  text-align: left;

  text-decoration: none;

  cursor: pointer;

  box-sizing: border-box;

}

.tfld-profile-menu__entry {
  display: block;
}



.tfld-profile-menu__item:hover,

.tfld-profile-menu__item:focus-visible {

  background: rgba(255, 255, 255, 0.06);

  outline: none;

}



.tfld-profile-menu__item .tfld-qa-ico {

  flex-shrink: 0;

  color: var(--tfld-accent);

}

.tfld-profile-menu__item--whats-new {
  border: 1px solid var(--tfld-border, rgba(255, 255, 255, 0.1));
}

.tfld-profile-menu__item--whats-new.is-new {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.48);
  color: #fff7ed;
}

.tfld-profile-menu__item--whats-new.is-new .tfld-qa-ico {
  color: #fbbf24;
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.5));
  animation: tfld-whats-new-icon-pop 1.8s ease-in-out infinite;
}



.tfld-profile-menu__new {

  margin-left: auto;

  padding: 2px 6px;

  border-radius: 999px;

  background: #f59e0b;

  color: #241303;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .05em;

}

.tfld-profile-menu__item--whats-new.is-new .tfld-profile-menu__new {
  animation: tfld-whats-new-badge-pop 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14), 0 0 14px rgba(245, 158, 11, 0.45);
}

@keyframes tfld-whats-new-icon-pop {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.18) rotate(-4deg); }
}

@keyframes tfld-whats-new-badge-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}



.tfld-profile-menu__item--danger {

  color: #f87171;

}



.tfld-profile-menu__item--danger .tfld-qa-ico {

  color: #f87171;

}



.tfld-profile-menu__sep {

  height: 1px;

  margin: 6px 4px;

  background: rgba(255, 255, 255, 0.08);

}



.tfld-profile-menu__role {

  padding: 8px 12px 10px;

  font-size: 12px;

  font-weight: 650;

  letter-spacing: 0.02em;

  color: rgba(24, 199, 195, 0.92);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  margin-bottom: 4px;

}



.tfld-discord-header-chips {

  display: none !important;

}



@media (max-width: 1180px) {

  .tfld-quick-actions__grid--command {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }



  .tfld-quick-actions__grid--unit {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }

}



@media (max-width: 760px) {

  .tfld-header--dashboard .tfld-header__intro {

    padding: 12px 12px 10px;

  }



  .tfld-header--dashboard .tfld-header__welcome {

    /* Symmetric inset for compact bell + avatar cluster */

    padding: 0 56px;

  }



  .tfld-header__rail {

    top: 8px;

    right: 8px;

    max-width: calc(100% - 16px);

  }



  .tfld-profile-cluster {

    left: auto;

    right: auto;

    justify-content: flex-end;

    width: auto;

  }



  /* Shrink chrome so it stays inside the panel (no horizontal overflow) */

  .tfld-profile-trigger__howdy {

    display: none;

  }



  .tfld-profile-trigger {

    padding: 4px;

  }



  .tfld-quick-actions__grid--command,

  .tfld-quick-actions__grid--unit {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .tfld-qa-label {

    white-space: normal;

  }

}



@media (max-width: 480px) {

  .tfld-quick-actions__grid--command,

  .tfld-quick-actions__grid--unit {

    grid-template-columns: 1fr;

  }

}



/* Upcoming op card moved above Stats: restore top breathing room (was .tfld-main margin). */

[data-tfld-upcoming-wrap] > .tfld-upcoming {
  margin-top: clamp(10px, 0.5cm, 18px);
  overflow: hidden;
  isolation: isolate;
}

[data-tfld-upcoming-wrap]:has(> .tfld-upcoming) + .tfld-stats-section-head {
  margin-top: clamp(12px, 0.55cm, 21px);
}

/* UNIT INFO divider removed from main grid — awards below unitinfo (grid gap only). */
.tfld-main__grid > .tfld-col--left .tfld-unitinfo {
  margin-top: 0;
}

.tfld-main__grid > .tfld-latest-awards {
  margin-bottom: 0;
}

/* Profile activity moved to header rail — collapse empty right column. */
.tfld-main__grid:not(:has(.tfld-col--right)) {
  grid-template-columns: minmax(0, 1fr);
}

/* Dedicated Profile activity page */
.tfld-profact-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.tfld-profact-page .tfld-profact--page {
  max-width: 820px;
  margin: 0 auto;
}

.tfld-profact-page .tfld-profact__head .tfld-card__desc {
  margin: 6px 0 0;
}

/* OPBOARD campaign banner as blurred/darkened card backdrop.
   Prefer real .tfld-upcoming__bg layer (BeTheme-safe); CSS var + ::before is fallback. */
.tfld-upcoming.tfld-upcoming--banner {
  /* Keep a dark fallback if the remote banner fails; image layer paints above this. */
  background: rgba(8, 12, 18, 0.92);
}

.tfld-upcoming.tfld-upcoming--banner .tfld-upcoming__bg,
.tfld-upcoming.tfld-upcoming--banner::before {
  position: absolute;
  inset: -20px;
  z-index: 0;
  background-color: transparent;
  background-image: var(--tfld-upcoming-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Was blur(12px) then 4px; 2px keeps Cold Spear recognizable with more detail. */
  filter: blur(1px) saturate(1.12);
  transform: scale(1.08);
  pointer-events: none;
}

.tfld-upcoming.tfld-upcoming--banner::before {
  content: "";
}

.tfld-upcoming.tfld-upcoming--banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(6, 10, 16, 0.22) 0%, rgba(6, 10, 16, 0.12) 48%, rgba(6, 14, 18, 0.20) 100%),
    radial-gradient(900px 220px at 10% 0%, rgba(24, 199, 195, 0.07), transparent 55%),
    radial-gradient(700px 240px at 100% 50%, rgba(0, 0, 0, 0.22), transparent 60%);
}

.tfld-upcoming.tfld-upcoming--banner > *:not(.tfld-upcoming__bg) {
  position: relative;
  z-index: 1;
}

/* Keep action buttons in normal flow on phones; desktop side placement lives in tfld.css. */
.tfld-upcoming.tfld-upcoming--banner > .tfld-upcoming__actions {
  position: static;
  z-index: 2;
  justify-content: flex-start;
  margin-left: 0;
}

.tfld-upcoming.tfld-upcoming--banner .tfld-upcoming__sidebtns {
  position: static;
  transform: none;
  top: auto;
  right: auto;
  width: 100%;
  max-width: 100%;
  justify-content: flex-start;
}

.tfld-upcoming.tfld-upcoming--banner .tfld-upcoming__campbtn {
  /* Match shared tile inset — no teal double-ring */
  min-width: 0;
  padding: 8px 10px;
  font-size: 0.78rem;
  line-height: 1.15;
  white-space: nowrap;
  box-shadow: var(--tfld-inset, inset 0 1px 0 rgba(255, 255, 255, 0.06)), 0 6px 18px rgba(0, 0, 0, 0.45);
}

.tfld-upcoming.tfld-upcoming--banner .tfld-upcoming__title,
.tfld-upcoming.tfld-upcoming--banner .tfld-upcoming__kicker,
.tfld-upcoming.tfld-upcoming--banner .tfld-upcoming__meta {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

@media (min-width: 901px) {
  .tfld-upcoming.tfld-upcoming--banner > .tfld-upcoming__actions {
    justify-content: flex-start;
  }

  .tfld-upcoming.tfld-upcoming--banner .tfld-upcoming__sidebtns {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    max-width: 250px;
    justify-content: flex-end;
    z-index: 2;
  }
}

/* Show as role (Discord-style dashboard preview) */
.tfld-view-as__banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(196, 162, 90, 0.45);
  background: rgba(196, 162, 90, 0.12);
}

.tfld-view-as__banner-text {
  font-size: 0.9rem;
  font-weight: 600;
}

.tfld-view-as__exit {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.28);
  color: inherit;
  border-radius: 6px;
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.tfld-view-as__exit:hover,
.tfld-view-as__exit:focus-visible {
  border-color: rgba(255, 255, 255, 0.32);
  outline: none;
}