* {
  box-sizing: border-box;
}

:root {
  width: 100dvw;
  height: 100dvh;  /* calc 빼기 */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* App-wide styling */
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
  /* `:root`(html) is 100dvw with left/right safe-area-inset padding (border-box),
     so its content box is `100dvw - insets`. Using `100dvw` here would make body
     wider than that content box by (left+right inset) and cause an app-wide
     horizontal scroll on devices that report non-zero left/right insets (e.g.
     edge-to-edge release builds). `100%` fits the html content box exactly. */
  width: 100%;
  height: 100%;
}

#main {
  height: 100%;
}

/* Membership plan grid (used in embedded membership routes) */
.membership-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.membership-plan-span-full {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .membership-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 500px) {
  .membership-plan-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

#hero {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#links {
  width: 400px;
  text-align: left;
  font-size: x-large;
  color: white;
  display: flex;
  flex-direction: column;
}

#links a {
  color: white;
  text-decoration: none;
  margin-top: 20px;
  margin: 10px 0px;
  border: white 1px solid;
  border-radius: 5px;
  padding: 10px;
}

#links a:hover {
  background-color: #1f1f1f;
  cursor: pointer;
}

#header {
  max-width: 1200px;
}

/* Navbar */
#navbar {
  display: flex;
  flex-direction: row;
}

#navbar a {
  color: #ffffff;
  margin-right: 20px;
  text-decoration: none;
  transition: color 0.2s ease;
}

#navbar a:hover {
  cursor: pointer;
  color: #91a4d2;
}

/* Blog page */
#blog {
  margin-top: 50px;
}

#blog a {
  color: #ffffff;
  margin-top: 50px;
}

/* Echo */
#echo {
  width: 360px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  background-color: #1e222d;
  padding: 20px;
  border-radius: 10px;
}

#echo > h4 {
  margin: 0px 0px 15px 0px;
}

#echo > input {
  border: none;
  border-bottom: 1px white solid;
  background-color: transparent;
  color: #ffffff;
  transition: border-bottom-color 0.2s ease;
  outline: none;
  display: block;
  padding: 0px 0px 5px 0px;
  width: 100%;
}

#echo > input:focus {
  border-bottom-color: #6d85c6;
}

#echo > p {
  margin: 20px 0px 0px auto;
}

/* ====================================================================
 * Consolidated component CSS
 * All per-component style.css files concatenated below to avoid FOUC
 * during route/component transitions. Do not reintroduce per-component
 * stylesheets — append new styles here under a section marker.
 * ==================================================================== */


/* === src/common/components/accordion/style.css === */
.accordion-trigger {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border: none;
  background-color: transparent;
  color: var(--secondary-color-4);
  outline: none;
  text-align: left;
}

.accordion-trigger:focus-visible {
  border: none;
  box-shadow: inset 0 0 0 2px var(--focused-border-color);
}

.accordion-trigger:hover {
  cursor: pointer;
  text-decoration-line: underline;
}

.accordion-content {
  display: grid;
}

.accordion-content > * {
  overflow: hidden;
  min-height: 0;
}

.accordion-content[data-open="false"] {
  animation: accordion-close 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards;
}

.accordion-content[data-open="true"] {
  animation: accordion-open 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards;
}

@keyframes accordion-close {
  from {
    grid-template-rows: 1fr;
  }

  to {
    grid-template-rows: 0fr;
  }
}

@keyframes accordion-open {
  from {
    grid-template-rows: 0fr;
  }

  to {
    grid-template-rows: 1fr;
  }
}

.accordion {
  contain: inline-size;
}

.accordion-item {
  overflow: hidden;
  box-sizing: border-box;
  border-bottom: 1px solid var(--primary-color-6);
  margin-top: 1px;
}

.accordion-item:first-child {
  margin-top: 0;
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-expand-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--secondary-color-4);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: rotate 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-item[data-open="true"] .accordion-expand-icon {
  rotate: 180deg;
}


/* === src/common/components/alert_dialog/style.css === */
/* Alert Dialog Backdrop */
.alert-dialog-backdrop {
  position: fixed;
  z-index: 1000;
  background: rgb(0 0 0 / 30%);
  inset: 0;
}

.alert-dialog-backdrop[data-state="closed"] {
  animation: alert-animate-out 150ms ease-in forwards;
}

@keyframes alert-animate-out {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  100% {
    opacity: 0;
    transform: scale(0.95) translateY(-2px);
  }
}

.alert-dialog-backdrop[data-state="open"] {
  animation: alert-animate-in 150ms ease-out forwards;
}

@keyframes alert-animate-in {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(-2px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Alert Dialog Container - improved for theme consistency */
.alert-dialog {
  position: fixed;
  z-index: 1001;
  top: 50%;
  left: 50%;
  display: flex;
  width: 100%;
  max-width: calc(100% - 2rem);
  box-sizing: border-box;
  flex-direction: column;
  padding: 32px 24px 24px;
  border: 1px solid var(--primary-color-6);
  border-radius: 8px;
  margin: 0;
  animation: none;
  background: var(--primary-color-2);
  box-shadow: 0 2px 10px rgb(0 0 0 / 18%);
  color: var(--secondary-color-4);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  gap: 16px;
  text-align: center;
  transform: translate(-50%, -50%);
}

.alert-dialog-title {
  margin: 0;
  color: var(--secondary-color-4);
  font-size: 1.25rem;
  font-weight: 700;
}

.alert-dialog-description {
  margin: 0;
  color: var(--secondary-color-5);
  font-size: 1rem;
}

.alert-dialog-actions {
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
}

@media (width >= 40rem) {
  .alert-dialog-actions {
    flex-direction: row;
    justify-content: flex-end;
  }

  .alert-dialog {
    max-width: 32rem;
    text-align: left;
  }
}

.alert-dialog-cancel {
  padding: 8px 18px;
  border: 1px solid var(--primary-color-6);
  border-radius: 0.5rem;
  background-color: var(--light, var(--primary-color))
    var(--dark, var(--primary-color-3));
  color: var(--secondary-color-4);
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease;
}

.alert-dialog-cancel:hover {
  background-color: var(--primary-color-4);
}

.alert-dialog-cancel:focus-visible {
  box-shadow: 0 0 0 2px var(--focused-border-color);
}

.alert-dialog-action {
  padding: 8px 18px;
  border: 1px solid var(--primary-error-color);
  border-radius: 0.5rem;
  background-color: var(--primary-error-color);
  color: var(--contrast-error-color);
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease;
}

.alert-dialog-action:hover {
  background-color: var(--secondary-error-color);
}

.alert-dialog-action:focus-visible {
  box-shadow: 0 0 0 2px var(--focused-border-color);
}


/* === src/common/components/aspect_ratio/style.css === */
.aspect-ratio-container {
  overflow: hidden;
  box-sizing: border-box;
  padding: 1rem;
  border-radius: .5rem;
}

.aspect-ratio-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* === src/common/components/avatar/style.css === */
.avatar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.avatar-label {
    margin: 0;
    color: var(--secondary-color-4);
    font-size: 0.875rem;
}

/* Avatar Component Styles */
.avatar {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color-4);
    cursor: pointer;
    font-weight: 500;
}

.avatar-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
}

/* Avatar sizes */
.avatar-sm {
    width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
}

.avatar-md {
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
}

.avatar-lg {
    width: 4rem;
    height: 4rem;
    font-size: 1.75rem;
}

/* Avatar shape */
.avatar-circle {
    border-radius: 50%;
}

.avatar-rounded {
    border-radius: 8px;
}

/* State-specific styles */
.avatar[data-state="loading"] {
    animation: pulse 1.5s infinite ease-in-out;
}

.avatar[data-state="empty"] {
    background: var(--primary-color-7);
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

.avatar-fallback {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: var(--secondary-color-4);
    font-size: 1.5rem;
}

.avatar[data-state="error"] .avatar-fallback {
    background: var(--primary-color-3);
    color: var(--secondary-color-4);
}


/* === src/common/components/bottom_sheet/style.css === */
/* Bottom Sheet */
.bottom-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(0 0 0 / 50%);
  transition: opacity 150ms ease-out;
}

.bottom-sheet-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--color-background);
  border-top: 1px solid var(--color-border);
  border-radius: 0.75rem 0.75rem 0 0;
  animation: bottom-sheet-slide-up 200ms ease-out;
}

@keyframes bottom-sheet-slide-up {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}


/* === src/common/components/calendar/style.css === */
/* Calendar Container */
.calendar {
    display: flex;
    flex-direction: row;
    border: 1px solid var(--primary-color-6);
    border-radius: 8px;
    background-color: var(--primary-color-2);
    box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif;
}

/* Calendar Navigation */
.calendar-navigation {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    padding: 0.75rem calc(0.75rem + 1.75rem + 0.5rem) 0.25rem;
    gap: 0.5rem;
}

.calendar-nav-title {
    color: var(--secondary-color-4);
    font-size: 16px;
    font-weight: 600;
}

.calendar-nav-prev,
.calendar-nav-next {
    position: absolute;
    display: flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--primary-color-6);
    border-radius: 0.5rem;
    background-color: var(--light, transparent)
        var(--dark, var(--primary-color-3));
    color: var(--secondary-color-5);
    cursor: pointer;
    font-size: 1rem;
}

.calendar-nav-prev {
    left: 0.75rem;
}

.calendar-nav-next {
    right: 0.75rem;
}

.calendar-nav-prev:hover,
.calendar-nav-next:hover {
    border-color: var(--primary-color-7);
    background-color: var(--primary-color-4);
    color: var(--secondary-color-4);
}

.calendar-nav-prev:focus-visible,
.calendar-nav-next:focus-visible {
    box-shadow: 0 0 0 2px var(--focused-border-color);
}

.calendar-nav-prev:disabled,
.calendar-nav-next:disabled {
    border-color: var(--primary-color-5);
    background-color: var(--primary-color-2);
    color: var(--secondary-color-3);
    cursor: not-allowed;
}

.calendar-month-title {
    display: flex;
    width: 100%;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
}

/* Calendar Grid */
.calendar-view {
    display: flex;
    flex-direction: column;
}

.calendar-grid {
    width: 100%;
    padding: 0.5rem;
}

.calendar-grid-header {
    display: flex;
    flex-direction: row;
    margin-bottom: 8px;
}

.calendar-grid-day-header {
    flex: 1;
    color: var(--secondary-color-5);
    font-size: 12px;
    font-weight: 300;
    text-align: center;
}

.calendar-grid-body {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0.25rem;
}

.calendar-grid-cell {
    width: 2rem;
    border: none;
    border-radius: 0.5rem;
    aspect-ratio: 1;
    background: none;
    color: var(--secondary-color-4);
    cursor: pointer;
    font-size: 14px;
}

.calendar-grid-cell[data-month="current"]:not([data-disabled="true"]):hover {
    background-color: var(--primary-color-4);
}

.calendar-grid-cell[data-month="current"]:focus-visible {
    outline: 2px solid var(--focused-border-color);
    outline-offset: 2px;
}

.calendar-grid-cell[data-month="last"],
.calendar-grid-cell[data-month="next"],
.calendar-grid-cell[data-disabled="true"] {
    color: var(--secondary-color-5);
    cursor: not-allowed;
}

.calendar-grid-cell[data-month="last"][data-selected="true"],
.calendar-grid-cell[data-month="next"][data-selected="true"] {
    background-color: var(--secondary-color-6);
}

.calendar-grid-cell[data-month="current"][data-selected="true"] {
    background-color: var(--secondary-color-2);
    color: var(--primary-color);
}

.calendar-grid-cell[data-month="current"][data-unavailable="true"] {
    color: var(--secondary-color-6);
    cursor: not-allowed;
    text-decoration: line-through;
}

.calendar-grid-week td {
    padding-right: 0;
    padding-left: 0;
}

.calendar-grid-week td:first-child .calendar-grid-cell {
    border-bottom-left-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
}

.calendar-grid-week td:last-child .calendar-grid-cell {
    border-bottom-right-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.calendar-grid-cell[data-month="last"][data-selection-between="true"],
.calendar-grid-cell[data-month="next"][data-selection-between="true"] {
    border-radius: 0;
    background-color: var(--primary-color-5);
    color: var(--secondary-color-5);
}

.calendar-grid-cell[data-month="current"][data-selection-between="true"] {
    border-radius: 0;
    background-color: var(--primary-color-5);
    color: var(--secondary-color-4);
}

td:has(.calendar-grid-cell[data-selection-start="true"]) {
    padding: 0;
    margin-top: 1px;
    margin-bottom: 1px;
    background-color: var(--primary-color-5);
    border-bottom-left-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
}

td:has(.calendar-grid-cell[data-selection-end="true"]) {
    padding: 0;
    margin-top: 1px;
    margin-bottom: 1px;
    background-color: var(--primary-color-5);
    border-bottom-right-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.calendar-grid-cell[data-month="current"][data-selected="true"]:hover {
    background-color: var(--light, var(--secondary-color-2))
        var(--dark, var(--primary-color-5));
    color: var(--light, var(--primary-color))
        var(--dark, var(--secondary-color-1));
    font-weight: var(--light, 550) var(--dark, inherit);
}

.calendar-grid-cell[data-month="current"][data-today="true"]:not(
        [data-selected="true"]
    ) {
    background-color: var(--primary-color-5);
}

.calendar-grid-weeknum {
    border-radius: 0.5rem;
    background-color: var(--primary-color);
    color: var(--secondary-color-5);
    font-size: 12px;
}

/* Calendar with week numbers */
.calendar-grid-week {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
}

/* Calendar states */
.calendar[data-disabled="true"] {
    opacity: 0.6;
    pointer-events: none;
}

.calendar-next-month-icon,
.calendar-previous-month-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.calendar-month-select-container,
.calendar-year-select-container {
    position: relative;
}

.calendar-month-select-container:has(:focus-visible),
.calendar-year-select-container:has(:focus-visible) {
    border-radius: 0.5rem;
    outline: 2px solid var(--focused-border-color);
}

.calendar-month-select,
.calendar-year-select {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0.25rem;
    margin: 0;
    inset: 0;
    opacity: 0;
}

.calendar-month-select-value,
.calendar-year-select-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border: none;
    background-color: transparent;
    color: var(--secondary-color-4);
    cursor: pointer;
    font-size: 1rem;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.select-expand-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--secondary-color-4);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* === src/common/components/checkbox/style.css === */
.checkbox {
    width: 1rem;
    height: 1rem;
    box-sizing: border-box;
    padding: 0;
    border: none;
    border-radius: 4px;
    margin: 0;
    background-color: var(--primary-color-3);
    box-shadow: inset 0 0 0 1px var(--primary-color-7);
    color: var(--secondary-color-4);
    cursor: pointer;
}

.checkbox-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox[data-state="checked"] {
    background-color: var(--secondary-color-2);
    box-shadow: none;
    color: var(--primary-color);
}

.checkbox:focus-visible {
    box-shadow: 0 0 0 2px var(--focused-border-color);
}

.checkbox-check-icon {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}


/* === src/common/components/collapsible/style.css === */
.collapsible-trigger {
  display: flex;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border: none;
  background-color: transparent;
  color: var(--secondary-color-4);
  outline: none;
  text-align: left;
}

.collapsible-trigger:focus-visible {
  box-shadow: inset 0 0 0 2px var(--focused-border-color);
}

.collapsible-trigger:hover {
  cursor: pointer;
  text-decoration-line: underline;
}

.collapsible-content {
  display: contents;
}

.collapsible-expand-icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--secondary-color-3);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}


/* === src/common/components/context_menu/style.css === */
.context-menu-content {
  z-index: 1000;
  min-width: 220px;
  padding: 0.25rem;
  border-radius: 0.5rem;
  background: var(--dark, var(--primary-color-5))
    var(--light, var(--primary-color));
  box-shadow: inset 0 0 0 1px var(--dark, var(--primary-color-7))
    var(--light, var(--primary-color-6));
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transform-origin: bottom left;
}

.context-menu-content[data-state="closed"] {
  animation: context-menu-animate-out 150ms ease-in forwards;
}

@keyframes context-menu-animate-out {
  0% {
    opacity: 1;
    transform: translateY(-100%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(calc(-100% + 2px)) scale(0.95);
  }
}

.context-menu-content[data-state="open"] {
  animation: context-menu-animate-in 150ms ease-out forwards;
}

@keyframes context-menu-animate-in {
  0% {
    opacity: 0;
    transform: translateY(calc(-100% + 2px)) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translateY(-100%) scale(1);
  }
}

.context-menu-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: calc(0.5rem - 0.25rem);
  color: var(--secondary-color-4);
  cursor: pointer;
  font-size: 14px;
  outline: none;
  transition: background-color 100ms ease-out;
  user-select: none;
}

.context-menu-item[data-disabled="true"] {
  color: var(--secondary-color-5);
  cursor: not-allowed;
}

.context-menu-item:hover:not([data-disabled="true"]),
.context-menu-item:focus-visible {
  background: var(--light, var(--primary-color-4))
    var(--dark, var(--primary-color-7));
  color: var(--light, var(--secondary-color-1))
    var(--dark, var(--secondary-color-4));
}


/* === src/common/components/date_picker/style.css === */
.date-picker-group:hover {
  border-color: var(--light, var(--primary-color-7))
                var(--dark, var(--secondary-color-5));
}

.timezone-picker {
  display: flex;
  align-self: stretch;
}

.timezone-picker .select {
  display: flex;
  align-self: stretch;
}

.timezone-picker .select-trigger {
  height: 100%;
}

.date-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.date-picker-group .popover-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    background-color: transparent;
    cursor: pointer;
    transition: rotate 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.popover[data-state="open"] div .date-picker-trigger {
    rotate: 180deg;
}

.date-picker-expand-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--primary-color-7);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

[data-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
}

.date-picker-group {
    display: flex;
    min-width: 150px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.5em;
    border: 0.5px solid var(--light, var(--primary-color-6))
        var(--dark, var(--primary-color-7));
    border-radius: 12px;
    background-color: var(--light, var(--primary-color))
        var(--dark, var(--primary-color-2));
    color: var(--secondary-color-4);
    gap: 0.25rem;
    transition: background-color 100ms ease-out, border-color 0.2s ease;
}

.date-picker-group .popover-content {
    max-width: unset;
    padding: 0;
}

.date-segment {
    caret-color: transparent;
}

.date-segment[no-date="true"] {
    color: var(--secondary-color-5);
}

.date-segment[is-separator="true"] {
    padding: 0;
}

.date-segment:focus-visible {
    border-radius: 0.25rem;
    background: var(--secondary-color-3);
    color: var(--primary-color);
    outline: none;
}

html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

html[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0);
}


/* === src/common/components/dialog/style.css === */
/* Dialog Backdrop */
.dialog-backdrop {
  position: fixed;
  z-index: 1000;
  background: rgb(0 0 0 / 30%);
  inset: 0;
  opacity: 0;
  will-change: transform, opacity;
}

.dialog-backdrop[data-state="closed"] {
  animation: dialog-backdrop-animate-out 150ms ease-in forwards;
  pointer-events: none;
}

@keyframes dialog-backdrop-animate-out {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  100% {
    opacity: 0;
    transform: scale(0.95) translateY(-2px);
  }
}

.dialog-backdrop[data-state="open"] {
  animation: dialog-content-animate-in 150ms ease-out forwards;
}

@keyframes dialog-content-animate-in {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(-2px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Dialog Container - improved for theme consistency */
.dialog {
  position: fixed;
  z-index: 1001;
  top: 50%;
  left: 50%;
  display: flex;
  width: 100%;
  max-width: calc(100% - 2rem);
  box-sizing: border-box;
  flex-direction: column;
  padding: 32px 24px 24px;
  border: 1px solid var(--primary-color-6);
  border-radius: 8px;
  margin: 0;
  background: var(--primary-color-2);
  box-shadow: 0 2px 10px rgb(0 0 0 / 18%);
  color: var(--secondary-color-4);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  gap: 16px;
  text-align: center;
  transform: translate(-50%, -50%);
}

.dialog-title {
  margin: 0;
  color: var(--secondary-color-4);
  font-size: 1.25rem;
  font-weight: 700;
}

.dialog-description {
  margin: 0;
  color: var(--secondary-color-5);
  font-size: 1rem;
}

@media (width >= 40rem) {
  .dialog {
    max-width: 32rem;
    text-align: left;
  }
}

.dialog-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  align-self: flex-start;
  padding: 0;
  border: none;
  margin: 0;
  background: none;
  color: var(--secondary-color-3);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.dialog-close:hover {
  color: var(--secondary-color-1);
}


/* === src/common/components/dioxus/button/style.css === */
.button {
  padding: 8px 18px;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.button:focus-visible {
  box-shadow: 0 0 0 2px var(--focused-border-color);
}

.button[data-style="primary"] {
  background-color: var(--secondary-color-2);
  color: var(--primary-color);
}

.button[data-style="primary"]:hover {
  background-color: var(--secondary-color-1);
}

.button[data-style="secondary"] {
  background-color: var(--primary-color-5);
  color: var(--secondary-color-1);
}

.button[data-style="secondary"]:hover {
  background-color: var(--primary-color-4);
}

.button[data-style="ghost"] {
  background-color: transparent;
  color: var(--secondary-color-4);
}

.button[data-style="ghost"]:hover {
  background-color: var(--primary-color-5);
  color: var(--secondary-color-1);
}

.button[data-style="outline"] {
  border: 1px solid var(--primary-color-6);
  background-color: var(--light, var(--primary-color))
    var(--dark, var(--primary-color-3));
  color: var(--secondary-color-4);
}

.button[data-style="outline"]:hover {
  background-color: var(--primary-color-4);
}

.button[data-style="destructive"] {
  background-color: var(--primary-error-color);
  color: var(--contrast-error-color);
}

.button[data-style="destructive"]:hover {
  background-color: var(--secondary-error-color);
}


/* === src/common/components/dioxus/card/style.css === */
.card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0;
  border: 1px solid var(--light, var(--primary-color-6)) var(--dark, var(--primary-color-5));
  border-radius: 1rem;
  background-color: var(--light, var(--primary-color-2)) var(--dark, var(--primary-color-3));
  box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
  color: var(--secondary-color-4);
  gap: 1.5rem;
}

.card-header {
  display: grid;
  align-items: start;
  padding: 0 1.5rem;
  gap: 0.5rem;
  grid-auto-rows: min-content;
  grid-template-rows: auto auto;
}

.card-header:has([data-slot="card-action"]) {
  grid-template-columns: 1fr auto;
}

.card-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}

.card-description {
  color: var(--secondary-color-5);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.card-action {
  grid-column-start: 2;
  grid-row: 1 / span 2;
  place-self: start end;
}

.card-content {
  padding: 0 1.5rem;
}

.card-footer {
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
}


/* === src/common/components/dioxus/input/style.css === */
/* Input Styles */
.input {
  position: relative;
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem;
  padding: 8px 12px;
  border: none;
  border-radius: 0.5rem;
  border-radius: calc(0.5rem);
  background: none;
  background-color: var(--light, var(--primary-color)) var(--dark, color-mix(in oklab, #FFFFFF26 30%, transparent));
  box-shadow: inset 0 0 0 1px var(--light, var(--primary-color-6))
    var(--dark, var(--primary-color-7));
  color: var(--secondary-color-4);
  cursor: pointer;
  gap: 0.25rem;
  transition: background-color 100ms ease-out;
}

.input::placeholder {
  color: var(--secondary-color-5);
}

.input:disabled {
  color: var(--secondary-color-5);
  cursor: not-allowed;
}

.input:hover:not(:disabled),
.input:focus-visible {
  background: var(--light, var(--primary-color-4))
    var(--dark, color-mix(in oklab, #FFFFFF26 50%, transparent));
  color: var(--secondary-color-1);
  outline: none;
}


/* === src/common/components/dioxus/navbar/style.css === */
.navbar {
  display: flex;
  box-sizing: border-box;
  padding: 0.25rem;
  border: none;
  border-radius: 0.5rem;
  gap: 0.25rem;
}

.navbar-nav {
  position: relative;
}

.navbar-trigger {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: none;
  border-radius: calc(0.5rem - 0.25rem);
  background: none;
  color: var(--secondary-color-4);
  cursor: pointer;
  transition: background-color 100ms ease-out;
}

.navbar-nav[data-state="open"] .navbar-trigger {
  background-color: var(--light, var(--primary-color-4))
    var(--dark, var(--primary-color-7));
  color: var(--secondary-color-1);
}

.navbar-trigger[data-disabled="true"] {
  color: var(--secondary-color-5);
  cursor: not-allowed;
}

.navbar-trigger:hover:not([data-disabled="true"]),
.navbar-trigger:focus-visible {
  background: var(--light, var(--primary-color-4))
    var(--dark, var(--primary-color-7));
  color: var(--secondary-color-1);
  outline: none;
}

/* Include the top margin in the navbar content pointer events */
.navbar-content::before {
  position: absolute;
  top: -0.5rem;
  left: 0;
  width: 100%;
  height: 0.5rem;
  content: "";
}

.navbar-content {
  position: absolute;
  z-index: 1000;
  top: 100%;
  left: 0;
  min-width: 200px;
  padding: 0.25rem;
  border-radius: 0.5rem;
  margin-top: 0.5rem;
  background: var(--light, var(--primary-color))
    var(--dark, var(--primary-color-5));
  box-shadow: inset 0 0 0 1px var(--light, var(--primary-color-6))
    var(--dark, var(--primary-color-7));
  opacity: 0;
  pointer-events: none;
  transform-origin: top;
  will-change: transform, opacity;
}

.navbar-nav:first-child .navbar-content {
  margin-left: -0.25rem;
}

.navbar-content[data-state="closed"] {
  transition: opacity 150ms ease-in, transform 150ms ease-in;
}

.navbar-content[data-state="closed"][data-open-menu-direction="start"] {
  transform: translateX(-100%) scale(0.98);
}

.navbar-content[data-state="closed"][data-open-menu-direction="end"] {
  transform: translateX(100%) scale(0.98);
}

.navbar-content[data-state="closed"][data-open-menu-direction="closed"] {
  transform: translateY(1rem) scale(0.98);
}

.navbar-content[data-state="open"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) translateY(0) scale(1);
  transition: opacity 200ms ease-out,
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.navbar-item {
  display: block;
  padding: 8px 12px;
  border-radius: calc(0.5rem - 0.25rem);
  color: var(--secondary-color-4);
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
}

.navbar-item[data-disabled="true"] {
  color: var(--secondary-color-5);
  cursor: not-allowed;
}

.navbar-item:hover:not([data-disabled="true"]),
.navbar-item:focus-visible {
  background: var(--light, var(--primary-color-4))
    var(--dark, var(--primary-color-7));
  color: var(--secondary-color-1);
  outline: none;
}

[data-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

.navbar-expand-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--secondary-color-4);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: rotate 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-nav[data-state="open"] .navbar-expand-icon {
  rotate: 180deg;
}


/* === src/common/components/dioxus/scroll_area/style.css === */
/* Scroll area doesn't require any additional styles */

/* === src/common/components/dioxus/slider/style.css === */
.slider {
    position: relative;
    display: flex;
    width: 200px;
    align-items: center;
    padding: 0.5rem 0;
    touch-action: none;
}

.slider[data-orientation="vertical"] {
    width: auto;
    height: 200px;
    flex-direction: column;
}

.slider-track {
    position: relative;
    height: 0.5rem;
    box-sizing: border-box;
    flex-grow: 1;
    border-radius: 9999px;
    background: var(--primary-color-5);
}

.slider[data-orientation="vertical"] .slider-track {
    width: 4px;
    height: 100%;
}

.slider-range {
    position: absolute;
    height: 100%;
    border-radius: 9999px;
    background-color: var(--secondary-color-2);
}

.slider[data-orientation="vertical"] .slider-range {
    width: 100%;
}

.slider-thumb {
    all: unset;
    position: absolute;
    top: 50%;
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid var(--secondary-color-2);
    border-radius: 50%;
    background-color: var(--primary-color-1);
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: border-color 150ms;
}

.slider[data-orientation="vertical"] .slider-thumb {
    left: 50%;
    transform: translate(-50%, 50%);
}

.slider-thumb:focus-visible[data-dragging="true"],
.slider-thumb:focus-visible,
.slider-thumb:hover {
    box-shadow: 0 0 0 4px
        color-mix(in oklab, var(--primary-color-7) 50%, transparent);
    transition: box-shadow 150ms;
}

.slider[data-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
}

.slider[data-disabled="true"] .slider-thumb {
    cursor: not-allowed;
}


/* === src/common/components/drag_and_drop_list/style.css === */
.dnd-list {
  width: 100%;
}

.dnd-list-ul {
  padding-left: 0;
}

.dnd-list-item {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  color: var(--secondary-color-4);
  cursor: grab;
  list-style: none;
  outline: none;
  user-select: none;
}

.dnd-list-item[data-focus-visible="true"] {
  box-shadow: 0 0 0 2px var(--focused-border-color);
}

.dnd-list-item:focus-visible {
  box-shadow: 0 0 0 2px var(--focused-border-color);
}

.dnd-list-item[data-is-grabbing="true"] {
  cursor: grabbing;
  opacity: 0.6;
  outline: 2px dashed var(--focused-border-color);
}

.item-icon-div {
  display: flex;
  width: 24px;
  align-items: center;
  margin-right: 16px;
  color: var(--secondary-color-4);
}

.item-body-div {
  flex-grow: 1;
  font-size: 16px;
  font-weight: normal;
  line-height: 24px;
}

.remove-button {
  display: flex;
  overflow: visible;
  width: 24px;
  align-items: center;
  padding: 0;
  border-style: none;
  margin-left: 16px;
  background-color: transparent;
  cursor: pointer;
}

.remove-button:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--focused-border-color);
  outline-offset: 2px;
}

.drop-indicator {
  position: relative;
  z-index: 1;
  height: 2px;
  margin: -1px 0;
  background-color: var(--focused-border-color);
}

.drop-indicator::before {
  position: absolute;
  top: -4px;
  left: -6px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid var(--focused-border-color);
  content: "";
}

/* === src/common/components/dropdown_menu/style.css === */
/* Dropdown Menu Styles */
.dropdown-menu {
  position: relative;
  display: inline-block;
}

.dropdown-menu-trigger {
  padding: 8px 18px;
  border: none;
  border-radius: 0.5rem;
  background-color: var(--dark, var(--primary-color-3))
    var(--light, var(--primary-color));
  box-shadow: inset 0 0 0 1px var(--primary-color-6);
  color: var(--secondary-color-4);
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-menu-trigger:hover {
  background-color: var(--primary-color-4);
  color: var(--secondary-color-1);
}

.dropdown-menu-trigger:focus-visible {
  box-shadow: 0 0 0 2px var(--focused-border-color);
}

.dropdown-menu-content {
  position: absolute;
  z-index: 1000;
  top: 100%;
  left: 0;
  min-width: 200px;
  padding: 0.25rem;
  border-radius: 0.5rem;
  margin-top: 4px;
  animation: slideIn 0.1s ease-out;
  background-color: var(--dark, var(--primary-color-5))
    var(--light, var(--primary-color));
  box-shadow: inset 0 0 0 1px var(--dark, var(--primary-color-7))
    var(--light, var(--primary-color-6));

  /* Animation properties */
  opacity: 0;
  transform: translateY(-8px) scale(0.95);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.dropdown-menu-content[data-state="closed"] {
  animation: dropdown-menu-content-animate-out 150ms ease-in forwards;
  pointer-events: none;
}

@keyframes dropdown-menu-content-animate-out {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  100% {
    opacity: 0;
    transform: scale(0.95) translateY(-2px);
  }
}

.dropdown-menu-content[data-state="open"] {
  animation: dropdown-menu-content-animate-in 150ms ease-out forwards;
}

@keyframes dropdown-menu-content-animate-in {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(-2px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.dropdown-menu-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: calc(0.5rem - 0.25rem);
  color: var(--secondary-color-4);
  cursor: pointer;
  font-size: 14px;
  gap: 0.5rem;
  outline: none;
  user-select: none;
}

.dropdown-menu-item[data-disabled="true"] {
  color: var(--secondary-color-5);
  cursor: not-allowed;
}

.dropdown-menu-item:hover:not([data-disabled="true"]),
.dropdown-menu-item:focus-visible {
  background: var(--dark, var(--primary-color-7))
    var(--light, var(--primary-color-4));
  color: var(--secondary-color-1);
}


/* === src/common/components/editor/style.css === */
/* Ratel rich-text editor — self-contained replacement for Tiptap.
   Uses the project-wide dark/light space toggle (`var(--dark, ...) var(--light, ...)`)
   so it picks up the active theme without conditional rendering in Rust. */

.ratel-editor {
  /* Component-scoped color tokens. The space-toggle pattern resolves to
     the dark or light value at runtime based on `html[data-theme]`. */
  --re-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.85));
  --re-toolbar-bg: var(--dark, rgba(10, 10, 22, 0.95)) var(--light, rgba(255, 255, 255, 0.95));
  --re-input-bg: var(--dark, rgba(255, 255, 255, 0.025)) var(--light, rgba(0, 0, 0, 0.025));
  --re-input-bg-focus: var(--dark, rgba(255, 255, 255, 0.04)) var(--light, rgba(0, 0, 0, 0.04));
  --re-tooltip-bg: var(--dark, #1a1a2c) var(--light, #1a1a2c);
  --re-border-subtle: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --re-border-strong: var(--dark, rgba(255, 255, 255, 0.12)) var(--light, rgba(0, 0, 0, 0.16));
  --re-border-active: var(--dark, rgba(252, 179, 0, 0.45)) var(--light, rgba(252, 179, 0, 0.55));
  --re-text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --re-text-muted: var(--dark, #8888a8) var(--light, #5a5a72);
  --re-text-dim: var(--dark, #55556a) var(--light, #9a9aae);
  --re-text-link: var(--dark, #6eedd8) var(--light, #0e8c79);
  --re-accent: var(--dark, #fcb300) var(--light, #cf8a00);
  --re-code-bg: var(--dark, rgba(255, 255, 255, 0.05)) var(--light, rgba(0, 0, 0, 0.05));
  --re-quote-border: var(--dark, rgba(252, 179, 0, 0.6)) var(--light, rgba(207, 138, 0, 0.6));

  display: flex;
  flex-direction: column;
  background: var(--re-input-bg);
  border: 1px solid var(--re-border-subtle);
  border-radius: 14px;
  overflow: hidden;
  color: var(--re-text-primary);
  font-family: 'Outfit', sans-serif;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ratel-editor:focus-within {
  background: var(--re-input-bg-focus);
  border-color: var(--dark, rgba(252, 179, 0, 0.18))
    var(--light, rgba(252, 179, 0, 0.32));
}

/* ─── Toolbar ─────────────────────────────────────────────── */
.ratel-editor .re-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--re-toolbar-bg);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--re-border-subtle);
}
.ratel-editor .re-toolbar__group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
}
.ratel-editor .re-toolbar__group + .re-toolbar__group {
  border-left: 1px solid var(--re-border-subtle);
  margin-left: 2px;
  padding-left: 8px;
}

.ratel-editor .re-tb-btn {
  position: relative;
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--re-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
}
.ratel-editor .re-tb-btn:hover {
  background: var(--re-input-bg-focus);
  color: var(--re-text-primary);
}
.ratel-editor .re-tb-btn:active { transform: scale(0.96); }
.ratel-editor .re-tb-btn[aria-pressed="true"] {
  background: var(--dark, rgba(252, 179, 0, 0.10)) var(--light, rgba(252, 179, 0, 0.14));
  color: var(--re-accent);
  border-color: var(--re-border-active);
}
.ratel-editor .re-tb-btn svg { width: 16px; height: 16px; }
.ratel-editor .re-tb-btn[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--re-tooltip-bg);
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 50;
}

/* ─── Primary "Insert data" affordance ─────────────────────
   The editor's `on_insert_data` callback renders an extra toolbar
   button (e.g. in the report editor) that opens an external picker.
   Style it as a primary-tone pill so authors can spot it among the
   neutral formatting commands. */
.ratel-editor .re-toolbar__group--insert {
  border-left: none;
  margin-left: 4px;
  padding-left: 0;
}
.ratel-editor .re-tb-btn--insert-data {
  width: auto;
  /* Keep the pill at a single row's height (the wrapping toolbar uses
     `row-gap` for vertical separation between rows; without these the
     uppercase Orbitron label was breaking across two lines inside the
     btn's flex column when the toolbar got cramped on mobile). */
  height: auto;
  min-width: 0;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0 14px;
  gap: 6px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(168, 85, 247, 0.10));
  border-color: var(--dark, rgba(168, 85, 247, 0.35)) var(--light, rgba(168, 85, 247, 0.50));
  color: var(--dark, #c4a3f7) var(--light, #6b3ec5);
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.ratel-editor .re-tb-btn--insert-data span {
  white-space: nowrap;
}

/* Mobile: the floating toolbar pill is horizontally scrollable, but
   the Orbitron "INSERT DATA" label is still wide enough to overrun
   the button's own background on the smallest viewports. Drop the
   label there and keep the icon — same affordance the topbar action
   buttons use on mobile. */
@media (max-width: 500px) {
  .ratel-editor .re-tb-btn--insert-data {
    padding: 0 10px;
  }
  .ratel-editor .re-tb-btn--insert-data span {
    display: none;
  }
  .ratel-editor .re-tb-btn--insert-data svg {
    width: 16px;
    height: 16px;
  }
}
.ratel-editor .re-tb-btn--insert-data:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.40), rgba(168, 85, 247, 0.16));
  color: var(--dark, #d8bdfb) var(--light, #5a30ad);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.30);
}
.ratel-editor .re-tb-btn--insert-data svg { width: 14px; height: 14px; }

/* ─── Block-format dropdown ───────────────────────────────── */
.ratel-editor .re-block { position: relative; }
.ratel-editor .re-block__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--re-border-subtle);
  color: var(--re-text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.ratel-editor .re-block__btn:hover {
  border-color: var(--re-border-strong);
  background: var(--re-input-bg-focus);
}
.ratel-editor .re-block__btn svg {
  width: 11px;
  height: 11px;
  color: var(--re-text-muted);
  transition: transform 0.15s ease;
}
.ratel-editor .re-block[data-open="true"] .re-block__btn {
  border-color: var(--re-border-active);
  color: var(--re-accent);
}
.ratel-editor .re-block[data-open="true"] .re-block__btn svg {
  transform: rotate(180deg);
  color: var(--re-accent);
}
.ratel-editor .re-block__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: var(--re-toolbar-bg);
  border: 1px solid var(--re-border-strong);
  border-radius: 10px;
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.ratel-editor .re-block[data-open="true"] .re-block__menu { display: flex; }
.ratel-editor .re-block__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--re-text-primary);
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  border: none;
  text-align: left;
  font-family: inherit;
}
.ratel-editor .re-block__item:hover { background: var(--re-input-bg-focus); }
.ratel-editor .re-block__item--active {
  color: var(--re-accent);
  background: var(--dark, rgba(252, 179, 0, 0.08)) var(--light, rgba(252, 179, 0, 0.10));
}
.ratel-editor .re-block__item-hint {
  font-size: 11px;
  color: var(--re-text-dim);
  font-family: 'JetBrains Mono', monospace;
}
.ratel-editor .re-block__item--h1 { font-size: 18px; font-weight: 700; }
.ratel-editor .re-block__item--h2 { font-size: 16px; font-weight: 700; }
.ratel-editor .re-block__item--h3 { font-size: 14px; font-weight: 600; }
.ratel-editor .re-block__item--quote { font-style: italic; color: var(--re-text-muted); }
.ratel-editor .re-block__item--code { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--re-text-muted); }

/* ─── Editable surface ────────────────────────────────────── */
.ratel-editor .re-content {
  min-height: 340px;
  max-height: 75vh;
  overflow-y: auto;
  padding: 22px 24px;
  background: transparent;
  color: var(--re-text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  outline: none;
}
/* Show the placeholder only when the editor is empty AND not focused.
   Without `:not(:focus)` the `::before` pseudo-element pushes the caret
   to its right, so users see the cursor sitting after the placeholder
   text instead of at position 0. */
.ratel-editor .re-content[data-empty="true"]:not(:focus)::before {
  content: attr(data-placeholder);
  color: var(--re-text-dim);
  pointer-events: none;
  display: block;
}

.ratel-editor .re-content h1 { font-size: 1.7rem; font-weight: 800; margin: 1.5rem 0 1rem; line-height: 1.2; }
.ratel-editor .re-content h2 { font-size: 1.35rem; font-weight: 700; margin: 1.25rem 0 0.75rem; line-height: 1.25; }
.ratel-editor .re-content h3 { font-size: 1.15rem; font-weight: 600; margin: 1rem 0 0.5rem; }
.ratel-editor .re-content p { margin: 0 0 0.75rem; }
.ratel-editor .re-content ul,
.ratel-editor .re-content ol { padding-left: 1.6rem; margin: 0.5rem 0 1rem; }
.ratel-editor .re-content ul { list-style: disc; }
.ratel-editor .re-content ol { list-style: decimal; }
.ratel-editor .re-content li { margin: 0.25rem 0; }
.ratel-editor .re-content blockquote {
  border-left: 3px solid var(--re-quote-border);
  padding: 6px 14px;
  margin: 0.75rem 0;
  color: var(--re-text-muted);
  font-style: italic;
  background: var(--dark, rgba(252, 179, 0, 0.04)) var(--light, rgba(252, 179, 0, 0.06));
}
.ratel-editor .re-content a {
  color: var(--re-text-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ratel-editor .re-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 0.75rem 0;
}
.ratel-editor .re-content pre {
  background: var(--re-code-bg);
  border: 1px solid var(--re-border-subtle);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0.75rem 0;
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.55;
}
.ratel-editor .re-content code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9em;
  background: var(--re-code-bg);
  padding: 1px 5px;
  border-radius: 4px;
}
.ratel-editor .re-content pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.ratel-editor .re-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
  /* Use `auto` layout so the browser sizes columns to their content —
     with `fixed` + the empty-cell ` ` placeholders the columns
     collapsed to a hairline and borders weren't visible at a glance. */
  table-layout: auto;
  border: 1px solid var(--dark, rgba(255, 255, 255, 0.22)) var(--light, rgba(0, 0, 0, 0.28));
}
.ratel-editor .re-content table th,
.ratel-editor .re-content table td {
  /* Make grid lines clearly visible — the previous `--re-border-strong`
     was too dim on dark mode (12% white) and made fresh empty tables
     read as a featureless dark block. */
  border: 1px solid var(--dark, rgba(255, 255, 255, 0.22)) var(--light, rgba(0, 0, 0, 0.28));
  padding: 8px 12px;
  text-align: left;
  min-width: 60px;
  min-height: 32px;
  /* Long unbroken strings (no spaces between letters) must wrap so a
     wide cell doesn't push the rest of the table off-screen. */
  word-break: keep-all;
  overflow-wrap: anywhere;
  vertical-align: top;
}
.ratel-editor .re-content table th {
  background: var(--re-input-bg-focus);
  font-weight: 600;
}
/* Highlight cells the user has drag-selected for a future merge. The
   default browser text selection inside contenteditable doesn't make
   the cell boundary obvious; this style fills the cell so the
   selection range is unambiguous. */
.ratel-editor .re-content table td.re-cell-selected,
.ratel-editor .re-content table th.re-cell-selected {
  background: rgba(168, 85, 247, 0.18);
  outline: 2px solid rgba(168, 85, 247, 0.55);
  outline-offset: -2px;
}

/* ─── Table action toolbar (floating mini-toolbar) ─────────
   Shown when the caret enters a `.re-content` table. JS positions it
   above the table; consumers (the editor's script.js) wire each
   button to a DOM manipulation. */
.ratel-editor .re-table-actions {
  position: fixed;
  z-index: 70;
  display: none;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border-radius: 10px;
  background: var(--re-toolbar-bg);
  border: 1px solid var(--re-border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
}
.ratel-editor .re-table-actions[data-visible="true"] {
  display: inline-flex;
}
.ratel-editor .re-table-actions__btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--re-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.15s, background 0.15s;
}
.ratel-editor .re-table-actions__btn:hover {
  color: var(--re-text-primary);
  background: var(--re-input-bg-focus);
}
.ratel-editor .re-table-actions__btn svg { width: 14px; height: 14px; }
.ratel-editor .re-table-actions__btn--danger:hover {
  color: var(--dark, #f87171) var(--light, #d04444);
}
.ratel-editor .re-table-actions__sep {
  width: 1px;
  height: 16px;
  background: var(--re-border-subtle);
  margin: 0 2px;
}
.ratel-editor .re-content .yt-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin: 0.75rem 0;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.ratel-editor .re-content .yt-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ─── Status bar ──────────────────────────────────────────── */
.ratel-editor .re-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  border-top: 1px solid var(--re-border-subtle);
  background: var(--re-toolbar-bg);
  font-size: 11px;
  color: var(--re-text-muted);
  font-weight: 500;
}
.ratel-editor .re-statusbar__chips { display: flex; gap: 8px; align-items: center; }
.ratel-editor .re-statusbar__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--re-input-bg);
}
.ratel-editor .re-statusbar__chip strong {
  color: var(--re-text-primary);
  margin-left: 4px;
}
.ratel-editor .re-ime-state { display: none; }
.ratel-editor[data-composing="true"] .re-ime-state { display: inline-flex; }

/* ─── Modals ──────────────────────────────────────────────── */
.ratel-editor .re-modal-mask {
  position: fixed;
  inset: 0;
  /* Cover the visible part of the screen, not the whole layout viewport. A
     soft keyboard shrinks only the visual viewport: centred in the full
     screen, the image modal put its URL field under the keyboard, the WebView
     scrolled to reveal it, and the title and the drop zone went past the top
     edge (Android, 640px phone). `--vv-offset-top` / `--vv-height` come from
     app.rs; with the keyboard closed they are 0 and the full height, so
     nothing changes then. */
  top: var(--vv-offset-top, 0px);
  bottom: auto;
  height: var(--vv-height, 100%);
  background: rgba(6, 6, 14, 0.65);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
  /* Clear of the status bar the app draws under (0 on desktop). */
  padding-top: calc(20px + env(safe-area-inset-top));
}
.ratel-editor .re-modal-mask.open { display: flex; }
.ratel-editor .re-modal {
  background: var(--re-toolbar-bg);
  border: 1px solid var(--re-border-strong);
  border-radius: 14px;
  width: 100%;
  max-width: 420px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  /* Shorter visible area than the modal (keyboard up): scroll inside it
     instead of running past the backdrop. */
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ratel-editor .re-modal__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--re-text-primary);
}
.ratel-editor .re-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.ratel-editor .re-modal__field label {
  font-size: 11px;
  color: var(--re-text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ratel-editor .re-modal__field input[type="text"],
.ratel-editor .re-modal__field input[type="url"],
.ratel-editor .re-modal__field input[type="number"] {
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--re-border-subtle);
  background: var(--re-input-bg);
  color: var(--re-text-primary);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
.ratel-editor .re-modal__field input:focus {
  border-color: var(--re-border-active);
  background: var(--re-input-bg-focus);
}
.ratel-editor .re-modal__row { display: flex; gap: 10px; }

/* ─── Image dropzone ──────────────────────────────────────── */
.ratel-editor .re-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 20px;
  border: 2px dashed var(--re-border-strong);
  border-radius: 12px;
  background: var(--re-input-bg);
  color: var(--re-text-muted);
  cursor: pointer;
  text-align: center;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.ratel-editor .re-dropzone:hover {
  background: var(--re-input-bg-focus);
  border-color: var(--re-border-active);
  color: var(--re-text-primary);
}
.ratel-editor .re-dropzone[data-dragging="true"] {
  background: var(--dark, rgba(252, 179, 0, 0.06)) var(--light, rgba(252, 179, 0, 0.10));
  border-color: var(--re-accent);
  color: var(--re-accent);
}
.ratel-editor .re-dropzone__icon {
  width: 36px;
  height: 36px;
  opacity: 0.85;
}
.ratel-editor .re-dropzone__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--re-text-primary);
}
.ratel-editor .re-dropzone__hint {
  font-size: 12px;
  color: var(--re-text-dim);
}

/* Camera shortcut — `capture="environment"` makes mobile open the
   rear camera directly. Hidden on devices that have a real mouse
   (no point showing it on desktop). */
.ratel-editor .re-camera-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--re-border-subtle);
  border-radius: 10px;
  background: var(--re-input-bg);
  color: var(--re-text-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ratel-editor .re-camera-btn:hover {
  background: var(--re-input-bg-focus);
  border-color: var(--re-border-active);
}
.ratel-editor .re-camera-btn svg { width: 18px; height: 18px; }
@media (hover: none) and (pointer: coarse) {
  .ratel-editor .re-camera-btn { display: inline-flex; }
}

/* OR divider between dropzone and URL field */
.ratel-editor .re-modal__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--re-text-dim);
  margin: 4px 0;
}
.ratel-editor .re-modal__divider::before,
.ratel-editor .re-modal__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--re-border-subtle);
}

.ratel-editor .re-modal__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--re-text-primary);
  font-weight: 500;
}
.ratel-editor .re-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
/* Typing an image URL (the only field in this modal that raises a keyboard):
   drop the drop zone, the camera button and the divider so the title, the URL
   field and Cancel / Insert URL fit above the keyboard. On a 640px phone the
   full modal had to scroll there, leaving the field or the buttons out of
   view. `kb-open` is toggled on <html> by app.rs; they return when the
   keyboard closes. */
html.kb-open .ratel-editor .re-modal-mask[data-modal="image"] .re-dropzone,
html.kb-open .ratel-editor .re-modal-mask[data-modal="image"] .re-camera-btn,
html.kb-open .ratel-editor .re-modal-mask[data-modal="image"] .re-modal__divider {
  display: none;
}
.ratel-editor .re-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--re-border-subtle);
  background: var(--re-glass);
  color: var(--re-text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ratel-editor .re-btn:hover {
  color: var(--re-text-primary);
  border-color: var(--re-border-strong);
}
.ratel-editor .re-btn--primary {
  background: linear-gradient(135deg, var(--re-accent), #e5a200);
  color: #0a0a0a;
  border-color: transparent;
}
.ratel-editor .re-btn--primary:hover { color: #0a0a0a; }

/* ─── Mobile ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Wrap, never scroll: below 700px the toolbar isn't rendered at all
     (the sheet replaces it), so the only sizes reaching this rule have
     room for a second row. */
  .ratel-editor .re-toolbar {
    padding: 8px;
    gap: 4px;
  }
  .ratel-editor .re-toolbar__group { padding: 0 2px; }
  .ratel-editor .re-toolbar__group + .re-toolbar__group {
    padding-left: 6px;
    margin-left: 0;
  }
  .ratel-editor .re-tb-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  .ratel-editor .re-block__btn { height: 40px; font-size: 14px; }
  .ratel-editor .re-content {
    padding: 16px 14px;
    min-height: 280px;
    /* iOS auto-zooms inputs under 16px; keep editor at 16px+ */
    font-size: 16px;
  }
}


/* ─── Mobile format surface (Slack-style bottom sheet) ────────
   Above 980px none of this renders and the desktop toolbar is the only
   format UI — untouched. Below it the toolbar is the problem: every
   surface that embeds the editor turns it into a single-row horizontal
   scroller there, which leaves ~4 of 22 commands visible and the rest
   behind a swipe nobody discovers. So the toolbar is hidden and
   replaced by a compact always-on bar (undo/redo, "Aa", image, link)
   plus a bottom sheet holding the full set, grouped and labelled.

   The sheet's buttons reuse `.re-tb-btn` + `data-cmd`, so they inherit
   the toolbar's pressed-state styling and the editor's existing click
   delegation without a second code path. */
.ratel-editor .re-mobile-bar,
.ratel-editor .re-fmt-sheet {
  display: none;
}

/* Phones get the sheet; everything with room keeps the real toolbar.
   Width alone can't express that — an iPhone 15 Pro Max on its side is
   932px wide (it would take the toolbar) while an iPad mini upright is
   744px (it would lose one). So the switch is on device shape: narrow
   OR short. Every iPad in either orientation lands on the toolbar,
   which wraps to two or three rows and never scrolls; every phone in
   either orientation lands on the sheet. */
@media (max-width: 700px), (max-height: 520px) {
  .ratel-editor .re-toolbar {
    display: none !important;
  }

  /* ── Compact bar ──────────────────────────────────────── */
  .ratel-editor .re-mobile-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    background: var(--re-toolbar-bg);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--re-border-subtle);
  }
  .ratel-editor .re-mobile-bar__btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    flex-shrink: 0;
  }
  .ratel-editor .re-mobile-bar__btn svg {
    width: 18px;
    height: 18px;
  }
  /* The "Insert data" affordance is a primary action on the surfaces
     that pass it, so it keeps the accent treatment it has on desktop. */
  .ratel-editor .re-mobile-bar__btn--insert {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--re-border-active);
    background: rgba(252, 179, 0, 0.12);
    color: var(--re-accent);
    cursor: pointer;
    padding: 0;
    /* Pushed hard right so the buttons before it keep a fixed position
       whether or not the host surface passes an insert-data handler. */
    margin-left: auto;
  }

  .ratel-editor .re-mobile-bar__fmt {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 12px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid var(--re-border-strong);
    background: var(--re-input-bg-focus);
    color: var(--re-text-primary);
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .ratel-editor .re-mobile-bar__fmt[aria-expanded="true"] {
    border-color: var(--re-border-active);
    background: rgba(252, 179, 0, 0.12);
    color: var(--re-accent);
  }
  .ratel-editor .re-mobile-bar__fmt-glyph {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
  }
  /* The glyph alone reads as "text formatting" once you have seen it;
     the word is what makes it discoverable the first time, so it is
     dropped only when the bar genuinely runs out of room. 360dp is the
     single most common Android width (it is what the test AVD reports),
     so the cutoff sits below it, not on it. With undo/redo moved into the
     sheet the bar needs ~254px there, leaving ~48px of slack. */
  @media (max-width: 340px) {
    .ratel-editor .re-mobile-bar__fmt-label {
      display: none;
    }
  }

  /* ── Bottom sheet ─────────────────────────────────────── */
  .ratel-editor .re-fmt-sheet[data-open="true"] {
    display: block;
    position: fixed;
    inset: 0;
    /* Follow the WebView's visual-viewport pan, as `.composer-arena` does.
       A fixed box is placed against the layout viewport, so when the WebView
       has scrolled to reveal the caret the whole sheet would sit that many
       px too high. 0 whenever nothing is panned. */
    transform: translateY(var(--vv-offset-top, 0px));
    /* Above the app's bottom bars and drawers, below nothing else the
       editor owns. Matches the z-index the selection bubble uses. */
    z-index: 120;
  }
  .ratel-editor .re-fmt-sheet__scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
  }
  .ratel-editor .re-fmt-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    /* Sit on top of the soft keyboard, not behind it. `--kb-inset` is the
       keyboard height, published on <html> by app.rs from `visualViewport`
       — the same variable `.composer-arena` sizes itself with. 0 when the
       keyboard is closed. */
    bottom: var(--kb-inset, 0px);
    /* Capped by the visible height as well as the screen. With the keyboard
       up, 72vh (461px on a 640px screen) is taller than the 341px left above
       it, so the grip, the title and the Done button were pushed past the
       top edge. `--vv-height` is the visible height app.rs publishes together
       with `--kb-inset`; with the keyboard closed the 72vh cap still wins. */
    max-height: min(72vh, calc(var(--vv-height, 100vh) - env(safe-area-inset-top) - 12px));
    display: flex;
    flex-direction: column;
    background: var(--re-toolbar-bg);
    backdrop-filter: blur(24px);
    border-top: 1px solid var(--re-border-strong);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
    color: var(--re-text-primary);
    font-family: 'Outfit', sans-serif;
    /* Clear the home indicator / gesture bar. */
    padding-bottom: env(safe-area-inset-bottom);
    animation: re-fmt-sheet-in 0.18s ease-out;
  }
  /* The keyboard was dismissed for the sheet (touch devices, see the
     editor's script.js). Sit on the bottom edge at full height right away
     instead of following `--kb-inset` / `--vv-height`, which are published
     only once the keyboard has settled and would leave the sheet floating
     where the keyboard used to be for a moment. */
  .ratel-editor .re-fmt-sheet--no-kb .re-fmt-sheet__panel {
    bottom: 0;
    max-height: 72vh;
  }
  @keyframes re-fmt-sheet-in {
    from {
      transform: translateY(14px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  .ratel-editor .re-fmt-sheet__grip {
    width: 36px;
    height: 4px;
    margin: 8px auto 2px;
    border-radius: 2px;
    background: var(--re-border-strong);
    flex-shrink: 0;
  }
  .ratel-editor .re-fmt-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px 10px;
    border-bottom: 1px solid var(--re-border-subtle);
    flex-shrink: 0;
  }
  .ratel-editor .re-fmt-sheet__title {
    font-size: 15px;
    font-weight: 700;
  }
  .ratel-editor .re-fmt-sheet__done {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--re-accent);
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 6px 4px;
    cursor: pointer;
  }
  .ratel-editor .re-fmt-sheet__body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 12px 12px;
  }
  .ratel-editor .re-fmt-sheet__section {
    padding: 9px 4px;
  }
  .ratel-editor .re-fmt-sheet__section + .re-fmt-sheet__section {
    border-top: 1px solid var(--re-border-subtle);
  }
  .ratel-editor .re-fmt-sheet__label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--re-text-dim);
  }
  /* A fixed 4-column grid rather than wrapping flex: it keeps the tiles
     the same width in every section, so the sheet reads as one grid
     instead of five differently-ragged rows. Sections with 5 or 6
     commands simply spill onto a second row at the same pitch. */
  .ratel-editor .re-fmt-sheet__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .ratel-editor .re-fmt-sheet__blocks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  /* Command tile: the toolbar's icon button plus the word for it. On a
     phone there is no hover, so `data-tip` never fires and an icon-only
     grid would be a guessing game. */
  .ratel-editor .re-fmt-btn {
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 58px;
    flex-direction: column;
    gap: 5px;
    padding: 9px 4px;
    border-color: var(--re-border-subtle);
    background: var(--re-input-bg);
  }
  .ratel-editor .re-fmt-btn svg {
    width: 19px;
    height: 19px;
  }
  .ratel-editor .re-fmt-btn__label {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    /* Long labels ("Clear formatting") must not stretch the tile past
       its neighbours — the row is a fixed grid, the word wraps. */
    overflow-wrap: anywhere;
  }
  .ratel-editor .re-fmt-btn[aria-pressed="true"] {
    border-color: var(--re-border-active);
  }

  /* Block pills. Each renders in the style it applies, so the choice is
     legible without reading the label. */
  .ratel-editor .re-fmt-block {
    appearance: none;
    min-width: 0;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid var(--re-border-subtle);
    background: var(--re-input-bg);
    color: var(--re-text-primary);
    font-family: 'Outfit', sans-serif;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease,
      color 0.15s ease;
  }
  .ratel-editor .re-fmt-block.re-block__item--active {
    border-color: var(--re-border-active);
    background: rgba(252, 179, 0, 0.12);
    color: var(--re-accent);
  }
  .ratel-editor .re-fmt-block--p {
    font-size: 14px;
    font-weight: 500;
  }
  .ratel-editor .re-fmt-block--h1 {
    font-size: 18px;
    font-weight: 800;
  }
  .ratel-editor .re-fmt-block--h2 {
    font-size: 16px;
    font-weight: 700;
  }
  .ratel-editor .re-fmt-block--h3 {
    font-size: 14px;
    font-weight: 700;
  }
  .ratel-editor .re-fmt-block--quote {
    font-size: 14px;
    font-style: italic;
    color: var(--re-text-muted);
  }
  .ratel-editor .re-fmt-block--code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--re-text-muted);
  }

  /* Surfaces that move the toolbar to the end of the editor's flex
     column (composer, sub-team compose, report editor) want the compact
     bar in that same slot — a sticky top bar there would float over the
     writing area it is supposed to sit under. */
  .composer-arena .ratel-editor .re-mobile-bar,
  .sub-team-broadcast-compose .ratel-editor .re-mobile-bar,
  .sub-team-doc-compose .ratel-editor .re-mobile-bar,
  .report-detail .ratel-editor .re-mobile-bar {
    position: relative;
    top: auto;
    order: 5;
    flex-shrink: 0;
    width: 100%;
    margin: 8px 0 0;
    padding: 8px 10px;
    border: 1px solid var(--re-border-strong);
    border-radius: 14px;
  }
  .report-detail .ratel-editor .re-mobile-bar {
    margin: 8px 0 14px;
  }
}

/* ─── Viewer mode (editable="false") ──────────────────────────
   Strip chrome sizing constraints so the editor behaves like inline
   prose. No toolbar/statusbar/modal CSS resets needed — those DOM
   nodes are not rendered by the Dioxus component in viewer mode. */
.ratel-editor[data-editable="false"] {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.ratel-editor[data-editable="false"] .re-content {
  min-height: 0;
  max-height: none;
  overflow: visible;
  padding: 0;
}

/* ─── Tiptap legacy YouTube embed compatibility ───────────────
   Older posts stored Tiptap's `<div data-youtube-video><iframe/></div>`
   wrapper. The new editor emits `<div class="yt-wrap">`, but existing
   content needs the same 16:9 aspect-ratio container to render
   correctly here. */
.ratel-editor .re-content div[data-youtube-video] {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin: 0.75rem 0;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.ratel-editor .re-content div[data-youtube-video] iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ─── Bubble toolbar (selection-triggered) ────────────────── */
/* Fixed positioning escapes the editor's `overflow: hidden` so the bubble
   can render outside the editor's rounded box when needed (e.g. auto-flipped
   above the selection). The JS controller computes top/left in viewport
   coordinates from `range.getBoundingClientRect()`. */
.ratel-editor .re-bubble {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(0.96);
  transform-origin: top center;
  transition: opacity 120ms ease, transform 120ms ease;
}
.ratel-editor .re-bubble[data-visible="true"] {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
}
.ratel-editor .re-bubble__inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: var(--re-toolbar-bg);
  border: 1px solid var(--re-border-subtle);
  border-radius: 10px;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  white-space: nowrap;
}
.ratel-editor .re-bubble .re-toolbar__group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 2px;
}
/* Bubble drops the `display: none` baseline of `.re-block__menu` once
   open — the existing rule already handles `[data-open="true"]`, but we
   want the menu to anchor below the bubble's block button, not float
   away. Reuse existing styles; no override needed. */


/* === src/common/components/form/style.css === */
#tos-check {
    width: 50px;
    height: 50px;
    border: 1px solid var(--primary-color-6);
    border-radius: 4px;
    margin: 8px 16px;
    background-color: var(--primary-color-1);
    color: var(--secondary-color-4);
    cursor: pointer;
    font-size: 14px;
}

.form-example button {
    padding: 8px 16px;
    border: 1px solid var(--primary-color-6);
    border-radius: 4px;
    background-color: var(--primary-color-1);
    color: var(--secondary-color-4);
    cursor: pointer;
    font-size: 14px;
}


/* === src/common/components/hover_card/style.css === */
/* Hover Card Styles */
.hover-card {
  position: relative;
  display: inline-block;
}

.hover-card-trigger {
  display: inline-block;
}

.hover-card-content {
  position: absolute;
  z-index: 1000;
  min-width: 200px;
  padding: 5px;
  border: 1px solid var(--light, var(--primary-color-6))
    var(--dark, var(--primary-color-7));
  border-radius: 0.5rem;
  animation: hover-card-fade-in 0.1s ease-out;
  background: var(--light, var(--primary-color))
    var(--dark, var(--primary-color-5));

  /* Semi transparent shadow effect in light mode */
  box-shadow: var(--light, 0 2px 10px #0000001a) var(--dark, none);
}

/* Positioning based on side */
.hover-card-content[data-side="top"] {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 10px;
  transform: translateX(-50%);
}

.hover-card-content[data-side="right"] {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 10px;
  transform: translateY(-50%);
}

.hover-card-content[data-side="bottom"] {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 10px;
  transform: translateX(-50%);
}

.hover-card-content[data-side="left"] {
  position: absolute;
  top: 50%;
  right: 100%;
  margin-right: 10px;
  transform: translateY(-50%);
}

/* Alignment styles for top and bottom */
.hover-card-content[data-side="top"][data-align="start"],
.hover-card-content[data-side="bottom"][data-align="start"] {
  left: 0;
  transform: none;
}

.hover-card-content[data-side="top"][data-align="center"],
.hover-card-content[data-side="bottom"][data-align="center"] {
  left: 50%;
  transform: translateX(-50%);
}

.hover-card-content[data-side="top"][data-align="end"],
.hover-card-content[data-side="bottom"][data-align="end"] {
  right: 0;
  left: auto;
  transform: none;
}

/* Alignment styles for left and right */
.hover-card-content[data-side="left"][data-align="start"],
.hover-card-content[data-side="right"][data-align="start"] {
  top: 0;
  transform: none;
}

.hover-card-content[data-side="left"][data-align="center"],
.hover-card-content[data-side="right"][data-align="center"] {
  top: 50%;
  transform: translateY(-50%);
}

.hover-card-content[data-side="left"][data-align="end"],
.hover-card-content[data-side="right"][data-align="end"] {
  top: auto;
  bottom: 0;
  transform: none;
}

/* Animation */
@keyframes hover-card-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* State styles */
.hover-card[data-disabled="true"] .hover-card-trigger {
  color: var(--secondary-color-5);
}

.hover-card-content[data-state="closed"] {
  display: none;
}


/* === src/common/components/label/style.css === */
/* Label Styles */
.label {
  display: flex;
  align-items: center;
  color: var(--secondary-color-4);
  font-size: 0.8rem;
  line-height: 1;
}


/* === src/common/components/menubar/style.css === */
.menubar {
  display: flex;
  box-sizing: border-box;
  padding: 0.25rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--primary-color-2);
  box-shadow: inset 0 0 0 1px var(--primary-color-6);
  gap: 0.25rem;
}

.menubar-menu {
  position: relative;
}

.menubar-trigger {
  padding: 8px 12px;
  border: none;
  border-radius: calc(0.5rem - 0.25rem);
  background: none;
  color: var(--secondary-color-4);
  cursor: pointer;
  transition: background-color 100ms ease-out;
}

.menubar-menu[data-state="open"] .menubar-trigger {
  background-color: var(--light, var(--primary-color-4))
    var(--dark, var(--primary-color-7));
  color: var(--secondary-color-1);
}

.menubar-trigger[data-disabled="true"] {
  color: var(--secondary-color-5);
  cursor: not-allowed;
}

.menubar-trigger:hover:not([data-disabled="true"]),
.menubar-trigger:focus-visible {
  background: var(--light, var(--primary-color-4))
    var(--dark, var(--primary-color-7));
  color: var(--secondary-color-1);
  outline: none;
}

.menubar-content {
  position: absolute;
  z-index: 1000;
  top: 100%;
  left: 0;
  min-width: 200px;
  padding: 0.25rem;
  border-radius: 0.5rem;
  margin-top: 0.5rem;
  background: var(--light, var(--primary-color))
    var(--dark, var(--primary-color-5));
  box-shadow: inset 0 0 0 1px var(--light, var(--primary-color-6))
    var(--dark, var(--primary-color-7));
  opacity: 0;
  pointer-events: none;
  transform-origin: top;
  will-change: transform, opacity;
}

.menubar-menu:first-child .menubar-content {
  margin-left: -0.25rem;
}

.menubar-content[data-state="closed"] {
  animation: menubar-content-animate-out 150ms ease-in forwards;
  pointer-events: none;
}

@keyframes menubar-content-animate-out {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  100% {
    opacity: 0;
    transform: scale(0.95) translateY(-2px);
  }
}

.menubar-content[data-state="open"] {
  animation: menubar-content-animate-in 150ms ease-out forwards;
  pointer-events: auto;
}

@keyframes menubar-content-animate-in {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(-2px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.menubar-item {
  display: block;
  padding: 8px 12px;
  border-radius: calc(0.5rem - 0.25rem);
  cursor: pointer;
  font-size: 14px;
}

.menubar-item[data-disabled="true"] {
  color: var(--secondary-color-5);
  cursor: not-allowed;
}

.menubar-item:hover:not([data-disabled="true"]),
.menubar-item:focus-visible {
  background: var(--light, var(--primary-color-4))
    var(--dark, var(--primary-color-7));
  color: var(--secondary-color-1);
  outline: none;
}

[data-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}


/* === src/common/components/navbar/style.css === */
.navbar {
  display: flex;
  box-sizing: border-box;
  padding: 0.25rem;
  border: none;
  border-radius: 0.5rem;
  gap: 0.25rem;
}

.navbar-nav {
  position: relative;
}

.navbar-trigger {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: none;
  border-radius: calc(0.5rem - 0.25rem);
  background: none;
  color: var(--secondary-color-4);
  cursor: pointer;
  transition: background-color 100ms ease-out;
}

.navbar-nav[data-state="open"] .navbar-trigger {
  background-color: var(--light, var(--primary-color-4))
    var(--dark, var(--primary-color-7));
  color: var(--secondary-color-1);
}

.navbar-trigger[data-disabled="true"] {
  color: var(--secondary-color-5);
  cursor: not-allowed;
}

.navbar-trigger:hover:not([data-disabled="true"]),
.navbar-trigger:focus-visible {
  background: var(--light, var(--primary-color-4))
    var(--dark, var(--primary-color-7));
  color: var(--secondary-color-1);
  outline: none;
}

/* Include the top margin in the navbar content pointer events */
.navbar-content::before {
  position: absolute;
  top: -0.5rem;
  left: 0;
  width: 100%;
  height: 0.5rem;
  content: "";
}

.navbar-content {
  position: absolute;
  z-index: 1000;
  top: 100%;
  left: 0;
  min-width: 200px;
  padding: 0.25rem;
  border-radius: 0.5rem;
  margin-top: 0.5rem;
  background: var(--light, var(--primary-color))
    var(--dark, var(--primary-color-5));
  box-shadow: inset 0 0 0 1px var(--light, var(--primary-color-6))
    var(--dark, var(--primary-color-7));
  opacity: 0;
  pointer-events: none;
  transform-origin: top;
  will-change: transform, opacity;
}

.navbar-nav:first-child .navbar-content {
  margin-left: -0.25rem;
}

.navbar-content[data-state="closed"] {
  transition: opacity 150ms ease-in, transform 150ms ease-in;
}

.navbar-content[data-state="closed"][data-open-menu-direction="start"] {
  transform: translateX(-100%) scale(0.98);
}

.navbar-content[data-state="closed"][data-open-menu-direction="end"] {
  transform: translateX(100%) scale(0.98);
}

.navbar-content[data-state="closed"][data-open-menu-direction="closed"] {
  transform: translateY(1rem) scale(0.98);
}

.navbar-content[data-state="open"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) translateY(0) scale(1);
  transition: opacity 200ms ease-out,
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.navbar-item {
  display: block;
  padding: 8px 12px;
  border-radius: calc(0.5rem - 0.25rem);
  color: var(--secondary-color-4);
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
}

.navbar-item[data-disabled="true"] {
  color: var(--secondary-color-5);
  cursor: not-allowed;
}

.navbar-item:hover:not([data-disabled="true"]),
.navbar-item:focus-visible {
  background: var(--light, var(--primary-color-4))
    var(--dark, var(--primary-color-7));
  color: var(--secondary-color-1);
  outline: none;
}

[data-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

.navbar-expand-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--secondary-color-4);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: rotate 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-nav[data-state="open"] .navbar-expand-icon {
  rotate: 180deg;
}


/* === src/common/components/pagination/style.css === */
.pagination {
  display: flex;
  width: 100%;
  justify-content: center;
  margin: 0 auto;
}

.pagination-content {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  gap: 0.25rem;
  list-style: none;
}

.pagination-link {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  color: var(--secondary-color-4);
  font-size: 0.875rem;
  font-weight: 500;
  gap: 0.5rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.pagination-link:focus-visible {
  box-shadow: 0 0 0 2px var(--focused-border-color);
}

.pagination-link[data-size="icon"] {
  width: 2rem;
  height: 2rem;
  padding: 0;
}

.pagination-ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary-color-4);
}

.pagination-ellipsis .pagination-icon {
  fill: currentcolor;
}

.pagination-link[data-size="icon"],
.pagination-ellipsis {
  width: 2rem;
  height: 2rem;
}

.pagination-link[data-size="default"] {
  height: 2rem;
  padding: 0.5rem 1rem;
}

.pagination-link[data-active="true"] {
  border: 1px solid var(--primary-color-6);
  background-color: var(--light, var(--primary-color)) var(--dark, var(--primary-color-3));
}

.pagination-link[data-active="true"]:hover {
  background-color: var(--primary-color-4);
}

.pagination-link[data-active="false"]:hover {
  background-color: var(--primary-color-5);
  color: var(--secondary-color-1);
}

.pagination-link[data-kind="previous"],
.pagination-link[data-kind="next"] {
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  gap: 0.25rem;
}

.pagination-label {
  display: none;
}

@media (width >= 640px) {
  .pagination-label {
    display: inline;
  }
}


.pagination-icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* TODO: move to shared css */

/* Screen-reader only text */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* === src/common/components/popover/style.css === */
.popover {
  position: relative;
  display: inline-block;
}

.popover-content {
  position: fixed;
  z-index: 1000;
  display: flex;
  min-width: 200px;
  max-width: calc(100% - 2rem);
  box-sizing: border-box;
  flex-direction: column;
  padding: .25rem;
  border-radius: .5rem;
  margin-top: .5rem;
  background: var(--light, var(--primary-color)) 
      var(--dark, var(--primary-color-5));
  box-shadow: inset 0 0 0 1px var(--light, var(--primary-color-6)) var(--dark, var(--primary-color-7));
  text-align: center;
  transform: translate(-50%, -50%);
  transform-origin: top;
  will-change: transform, opacity;
}

.popover-content[data-state="closed"] {
  display: none;
}

.popover-content[data-state="open"] {
  display: flex;
  animation: popover-fade-in .2s ease-in-out;
}

@keyframes popover-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Positioning based on side */
.popover-content[data-side="top"] {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 8px;
  transform: translateX(-50%);
}

.popover-content[data-side="top"]::after {
  top: calc(100% - 0.25rem);
  left: 50%;
  border-color: var(--secondary-color-4);
  border-radius: 0 0 0.1rem;
}

.popover-content[data-side="right"] {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 8px;
  transform: translateY(-50%);
}

.popover-content[data-side="right"]::after {
  top: calc(50% - 0.25rem);
  left: 0;
  border-color: var(--secondary-color-4);
  border-radius: 0 0 0 0.1rem;
}

.popover-content[data-side="bottom"] {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 8px;
  transform: translateX(-50%);
}

.popover-content[data-side="bottom"]::after {
  bottom: calc(100% - 0.25rem);
  left: 50%;
  border-color: var(--secondary-color-4);
  border-radius: 0.1rem 0 0;
}

.popover-content[data-side="left"] {
  position: absolute;
  top: 50%;
  right: 100%;
  margin-right: 8px;
  transform: translateY(-50%);
}

.popover-content[data-side="left"]::after {
  top: calc(50% - 0.25rem);
  right: -0.25rem;
  border-color: var(--secondary-color-4);
  border-radius: 0 0.1rem 0 0;
}

/* Alignment styles for top and bottom */
.popover-content[data-side="top"][data-align="start"],
.popover-content[data-side="bottom"][data-align="start"] {
  left: 0;
  transform: none;
}

.popover-content[data-side="top"][data-align="end"],
.popover-content[data-side="bottom"][data-align="end"] {
  right: 0;
  left: auto;
  transform: none;
}

/* Alignment styles for left and right */
.popover-content[data-side="left"][data-align="start"],
.popover-content[data-side="right"][data-align="start"] {
  top: 0;
  transform: none;
}

.popover-content[data-side="left"][data-align="center"],
.popover-content[data-side="right"][data-align="center"] {
  top: 50%;
  transform: translateY(-50%);
}

.popover-content[data-side="left"][data-align="end"],
.popover-content[data-side="right"][data-align="end"] {
  top: auto;
  bottom: 0;
  transform: none;
}

.popover-content-title {
  margin: 0;
  color: var(--secondary-color-4);
  font-size: 1.25rem;
  font-weight: 700;
}

.popover-content-description {
  margin: 0;
  color: var(--secondary-color-5);
  font-size: 1rem;
}

.popover-content-actions {
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
}

@media (width >= 40rem) {
  .popover-content-actions {
    flex-direction: row;
    justify-content: flex-end;
  }

  .popover-content {
    max-width: 32rem;
    text-align: left;
  }
}

.popover-content-cancel {
  padding: 8px 18px;
  border-radius: 0.5rem;
  background-color: var(--light, var(--primary-color))
    var(--dark, var(--primary-color-3));
  color: var(--secondary-color-4);
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease;
}

.popover-content-cancel:hover {
  background-color: var(--primary-color-4);
}

.popover-content-cancel:focus-visible {
  box-shadow: 0 0 0 2px var(--focused-border-color);
}

.popover-content-action {
  padding: 8px 18px;
  border-radius: 0.5rem;
  background-color: var(--primary-error-color);
  color: var(--contrast-error-color);
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease;
}

.popover-content-action:hover {
  background-color: var(--secondary-error-color);
}

.popover-content-action:focus-visible {
  box-shadow: 0 0 0 2px var(--focused-border-color);
}

.popover-trigger {
  padding: 8px 18px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease;
}

.popover-trigger:hover {
  background-color: var(--primary-color-4);
}

.popover-trigger:focus-visible {
  box-shadow: 0 0 0 2px var(--focused-border-color);
}


/* === src/common/components/progress/style.css === */
.progress {
    position: relative;
    overflow: hidden;
    width: 200px;
    height: .5rem;
    box-sizing: border-box;
    border-radius: 9999px;
    background: var(--primary-color-5);
}

.progress[data-state='indeterminate'] .progress-indicator {
    width: 50%;
    animation: indeterminate 1s infinite linear;
}

.progress-indicator {
    width: var(--progress-value, 0%);
    height: 100%;
    background-color: var(--secondary-color-1);
    transition: width 250ms ease;
}

@keyframes indeterminate {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(200%);
    }
}


/* === src/common/components/radio_group/style.css === */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.radio-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--secondary-color-4);
  font-size: 14px;
  gap: .75rem;

  &::before {
    display: block;
    width: 1rem;
    height: 1rem;
    box-sizing: border-box;
    border-radius: 1.5rem;
    background: var(--light, var(--primary-color)) var(--dark, var(--primary-color-3));
    box-shadow: 0 0 0 1px var(--light, var(--primary-color-6)) 
      var(--dark, var(--primary-color-7));
    content: "";
    cursor: pointer;
  }

  &:focus-visible {
    outline: none;
  }

  &:focus-visible::before {
    box-shadow: 0 0 0 2px var(--focused-border-color);
  }

  &[data-state="checked"]::before {
    border: 0.25rem solid var(--light, var(--primary-color)) var(--dark, var(--primary-color-3));
    background: var(--secondary-color-4);
  }

  &[data-disabled="true"]::before {
    cursor: not-allowed;
    opacity: 0.5;
  }
}


/* === src/common/components/scroll_area/style.css === */
/* Scroll area doesn't require any additional styles */

/* === src/common/components/select/style.css === */
.select {
  position: relative;
}

.select-trigger {
  position: relative;
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem;
  padding: 8px 12px;
  border: none;
  border-radius: 0.5rem;
  border-radius: calc(0.5rem);
  background: none;
  background: var(--light, var(--primary-color))
    var(--dark, var(--primary-color-3));
  box-shadow: inset 0 0 0 1px var(--light, var(--primary-color-6))
    var(--dark, var(--primary-color-7));
  color: var(--secondary-color-4);
  cursor: pointer;
  gap: 0.25rem;
  transition: background-color 100ms ease-out;
}

.select-trigger span[data-placeholder="true"] {
  color: var(--secondary-color-5);
}

.select[data-state="open"] .select-trigger {
  pointer-events: none;
}

.select-expand-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--primary-color-7);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.select-check-icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--secondary-color-5);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.select[data-disabled="true"] .select-trigger {
  color: var(--secondary-color-5);
  cursor: not-allowed;
}

.select-trigger:hover:not([data-disabled="true"]),
.select-trigger:focus-visible {
  background: var(--light, var(--primary-color-4))
    var(--dark, var(--primary-color-5));
  color: var(--secondary-color-1);
  outline: none;
}

.select-list {
  position: absolute;
  z-index: 1000;
  top: 100%;
  left: 0;
  min-width: 100%;
  box-sizing: border-box;
  padding: 0.25rem;
  border-radius: 0.5rem;
  margin-top: 0.25rem;
  background: var(--light, var(--primary-color))
    var(--dark, var(--primary-color-5));
  box-shadow: inset 0 0 0 1px var(--light, var(--primary-color-6))
    var(--dark, var(--primary-color-7));
  opacity: 0;
  pointer-events: none;
  transform-origin: top;
  will-change: transform, opacity;
}

.select-list[data-state="closed"] {
  animation: select-list-animate-out 150ms ease-in forwards;
  pointer-events: none;
}

@keyframes select-list-animate-out {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  100% {
    opacity: 0;
    transform: scale(0.95) translateY(-2px);
  }
}

.select-list[data-state="open"] {
  animation: select-list-animate-in 150ms ease-out forwards;
  pointer-events: auto;
}

@keyframes select-list-animate-in {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(-2px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: calc(0.5rem - 0.25rem);
  cursor: pointer;
  font-size: 14px;
}

.select-option[data-disabled="true"] {
  color: var(--secondary-color-5);
  cursor: not-allowed;
}

.select-option:hover:not([data-disabled="true"]),
.select-option:focus-visible {
  background: var(--light, var(--primary-color-4))
    var(--dark, var(--primary-color-7));
  color: var(--secondary-color-1);
  outline: none;
}

.select-group-label {
  padding: 4px 12px;
  color: var(--secondary-color-5);
  font-size: 0.75rem;
}

[data-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}


/* === src/common/components/sheet/style.css === */
/* Sheet Root */
.sheet-root {
  position: fixed;
  z-index: 1000;
  background: rgb(0 0 0 / 50%);
  inset: 0;
  opacity: 0;
  will-change: opacity;
}

.sheet-root[data-state="closed"] {
  animation: sheet-root-out 300ms ease-in forwards;
  pointer-events: none;
}

.sheet-root[data-state="open"] {
  animation: sheet-root-in 300ms ease-out forwards;
}

@keyframes sheet-root-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes sheet-root-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.sheet {
  position: fixed;
  z-index: 1001;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  border: none;
  background: var(--primary-color-2);
  box-shadow: 0 4px 20px rgb(0 0 0 / 20%);
  color: var(--secondary-color-4);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  gap: 1rem;
  will-change: transform;
}

.sheet[data-side="right"],
.sheet[data-side="left"] {
  top: 0;
  bottom: 0;
  width: 75%;
  max-width: 24rem;
}

.sheet[data-side="right"] {
  right: 0;
  border-left: 1px solid var(--primary-color-6);
  transform: translateX(100%);
}

.sheet[data-side="left"] {
  left: 0;
  border-right: 1px solid var(--primary-color-6);
  transform: translateX(-100%);
}

.sheet[data-side="top"],
.sheet[data-side="bottom"] {
  right: 0;
  left: 0;
}

.sheet[data-side="top"] {
  top: 0;
  border-bottom: 1px solid var(--primary-color-6);
  transform: translateY(-100%);
}

.sheet[data-side="bottom"] {
  bottom: 0;
  border-top: 1px solid var(--primary-color-6);
  transform: translateY(100%);
}

.sheet-root[data-state="open"] .sheet[data-side="right"] {
  animation: slide-in-right 500ms ease-out forwards;
}

.sheet-root[data-state="open"] .sheet[data-side="left"] {
  animation: slide-in-left 500ms ease-out forwards;
}

.sheet-root[data-state="open"] .sheet[data-side="top"] {
  animation: slide-in-top 500ms ease-out forwards;
}

.sheet-root[data-state="open"] .sheet[data-side="bottom"] {
  animation: slide-in-bottom 500ms ease-out forwards;
}

.sheet-root[data-state="closed"] .sheet[data-side="right"] {
  animation: slide-out-right 300ms ease-in forwards;
}

.sheet-root[data-state="closed"] .sheet[data-side="left"] {
  animation: slide-out-left 300ms ease-in forwards;
}

.sheet-root[data-state="closed"] .sheet[data-side="top"] {
  animation: slide-out-top 300ms ease-in forwards;
}

.sheet-root[data-state="closed"] .sheet[data-side="bottom"] {
  animation: slide-out-bottom 300ms ease-in forwards;
}

@keyframes slide-in-right {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slide-out-right {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes slide-in-left {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slide-out-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes slide-in-top {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slide-out-top {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-100%);
  }
}

@keyframes slide-in-bottom {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slide-out-bottom {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(100%);
  }
}

.sheet-header {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 0.375rem;
}

.sheet-footer {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  margin-top: auto;
  gap: 0.5rem;
}

.sheet-title {
  margin: 0;
  color: var(--secondary-color-4);
  font-size: 1.125rem;
  font-weight: 600;
}

.sheet-description {
  margin: 0;
  color: var(--secondary-color-5);
  font-size: 0.875rem;
}

.sheet-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--primary-color-7);
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}

.sheet-close:hover {
  color: var(--secondary-color-4);
}

.sheet-close-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}


/* === src/common/components/sidebar/style.css === */
/* TODO: abstract as Utilitiy class */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

:root {
  --sidebar-background: var(--primary-color-2);
  --sidebar-foreground: var(--secondary-color-4);
  --sidebar-border: var(--primary-color-6);
  --sidebar-accent: var(--primary-color-4);
  --sidebar-accent-foreground: var(--secondary-color-4);
  --sidebar-ring: var(--primary-color-7);
}

.sidebar-wrapper {
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
}

@media (width >=768px) {
  .sidebar-wrapper:has(.sidebar-desktop[data-side="right"]) {
    flex-direction: row-reverse;
  }

  .sidebar-wrapper:has(.sidebar-desktop[data-variant="inset"]) {
    background: var(--sidebar-background);
  }
}

.sidebar-desktop {
  display: none;
  color: var(--sidebar-foreground);
}

@media (width >=768px) {
  .sidebar-desktop {
    display: block;
  }
}

.sidebar-gap {
  position: relative;
  width: var(--sidebar-width);
  background: transparent;
  transition: width 200ms ease-out;
}

[data-collapsible="icon"] .sidebar-gap {
  width: var(--sidebar-width-icon);
}

[data-variant="floating"] .sidebar-gap,
[data-variant="inset"] .sidebar-gap {
  width: var(--sidebar-width);
}

[data-variant="floating"][data-collapsible="icon"] .sidebar-gap,
[data-variant="inset"][data-collapsible="icon"] .sidebar-gap {
  width: calc(var(--sidebar-width-icon) + 1rem);
}

[data-collapsible="offcanvas"] .sidebar-gap {
  width: 0;
}

.sidebar-container {
  position: fixed;
  z-index: 10;
  top: 0;
  bottom: 0;
  display: none;
  width: var(--sidebar-width);
  height: 100svh;
  box-sizing: border-box;
  transition: left 200ms ease-out, right 200ms ease-out, width 200ms ease-out;
}

@media (width >=768px) {
  .sidebar-container {
    display: flex;
  }
}

[data-side="left"] .sidebar-container {
  left: 0;
}

[data-side="left"][data-collapsible="offcanvas"] .sidebar-container {
  left: calc(var(--sidebar-width) * -1);
}

[data-side="right"] .sidebar-container {
  right: 0;
}

[data-side="right"][data-collapsible="offcanvas"] .sidebar-container {
  right: calc(var(--sidebar-width) * -1);
}

[data-collapsible="icon"] .sidebar-container {
  overflow: visible;
  width: var(--sidebar-width-icon);
}

[data-collapsible="icon"] .sidebar-inner {
  overflow: visible;
}

[data-variant="sidebar"][data-side="left"] .sidebar-container {
  border-right: 1px solid var(--sidebar-border);
}

[data-variant="sidebar"][data-side="right"] .sidebar-container {
  border-left: 1px solid var(--sidebar-border);
}

[data-variant="floating"] .sidebar-container,
[data-variant="inset"] .sidebar-container {
  padding: 0.5rem;
}

[data-variant="floating"][data-collapsible="icon"] .sidebar-container,
[data-variant="inset"][data-collapsible="icon"] .sidebar-container {
  width: calc(var(--sidebar-width-icon) + 1rem + 2px);
}

.sidebar-inner {
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  background: var(--sidebar-background);
}

[data-variant="floating"] .sidebar-inner {
  border: 1px solid var(--sidebar-border);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
}

.sidebar-static {
  display: flex;
  width: var(--sidebar-width);
  height: 100%;
  flex-direction: column;
  background: var(--sidebar-background);
  color: var(--sidebar-foreground);
}

.sidebar-sheet {
  width: var(--sidebar-width-mobile) !important;
  padding: 0 !important;
  background: var(--sidebar-background);
}

.sidebar-sheet>.sheet-close {
  display: none;
}

.sidebar-mobile-inner {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
}

.sidebar-trigger {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  line-height: 0;
}

.sidebar-trigger-icon {
  width: 1rem;
  height: 1rem;
}

.sidebar-rail {
  position: absolute;
  z-index: 20;
  top: 0;
  bottom: 0;
  display: none;
  width: 1rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: ew-resize;
  transform: translateX(-50%);
  transition: all 200ms ease-out;
}

@media (width >=640px) {
  .sidebar-rail {
    display: flex;
  }
}

.sidebar-rail::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  content: "";
}

.sidebar-rail:hover::after {
  background: var(--sidebar-border);
}

[data-side="left"] .sidebar-rail {
  right: -1rem;
  cursor: w-resize;
}

[data-side="right"] .sidebar-rail {
  left: 0;
  cursor: e-resize;
}

[data-side="left"][data-state="collapsed"] .sidebar-rail {
  cursor: e-resize;
}

[data-side="right"][data-state="collapsed"] .sidebar-rail {
  cursor: w-resize;
}

[data-collapsible="offcanvas"] .sidebar-rail {
  transform: translateX(0);
}

[data-collapsible="offcanvas"] .sidebar-rail::after {
  left: 100%;
}

[data-collapsible="offcanvas"] .sidebar-rail:hover {
  background: var(--sidebar-background);
}

[data-side="left"][data-collapsible="offcanvas"] .sidebar-rail {
  right: -0.5rem;
}

[data-side="right"][data-collapsible="offcanvas"] .sidebar-rail {
  left: -0.5rem;
}

.sidebar-inset {
  position: relative;
  display: flex;
  width: 100%;
  flex: 1 1 0%;
  flex-direction: column;
  background: var(--primary-color-1);
}

[data-variant="inset"]~.sidebar-inset {
  border-radius: 0.75rem;
  margin: 0.5rem;
  margin-left: 0;
  box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
}

[data-variant="inset"][data-state="collapsed"]~.sidebar-inset {
  margin-left: 0.5rem;
}

[data-variant="inset"][data-side="right"]~.sidebar-inset {
  margin-right: 0;
  margin-left: 0.5rem;
}

[data-variant="inset"][data-side="right"][data-state="collapsed"]~.sidebar-inset {
  margin-right: 0.5rem;
}

.sidebar-header {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  gap: 0.5rem;
}

.sidebar-content {
  display: flex;
  overflow: hidden auto;
  min-height: 0;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 0.5rem;
}

[data-collapsible="icon"] .sidebar-content {
  overflow: visible;
}

.sidebar-footer {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  gap: 0.5rem;
}

.sidebar-separator {
  width: auto;
  margin: 0 0.5rem;
  background: var(--sidebar-border);
}

.sidebar-group {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0.5rem;
}

.sidebar-group-label {
  display: flex;
  height: 2rem;
  align-items: center;
  padding: 0 0.5rem;
  border-radius: 0.375rem;
  color: var(--sidebar-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.7;
  outline: none;
  transition: margin 200ms ease-out, opacity 200ms ease-out;
}

.sidebar-group-label svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

[data-collapsible="icon"] .sidebar-group-label {
  margin-top: -2rem;
  opacity: 0;
}

.sidebar-group-action {
  position: absolute;
  top: 0.875rem;
  right: 0.75rem;
  display: flex;
  width: 1.25rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  aspect-ratio: 1;
  background: transparent;
  color: var(--sidebar-foreground);
  cursor: pointer;
  outline: none;
  transition: transform 150ms ease-out, opacity 200ms ease-out, visibility 0ms 0ms;
}

.sidebar-group-action:hover {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

.sidebar-group-action svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Increase hit area on mobile */
.sidebar-group-action::after {
  position: absolute;
  content: "";
  inset: -0.5rem;
}

@media (width >=768px) {
  .sidebar-group-action::after {
    display: none;
  }
}

[data-collapsible="icon"] .sidebar-group-action {
  opacity: 0;
  pointer-events: none;
  transition: transform 150ms ease-out, opacity 200ms ease-out, visibility 0ms 200ms;
  visibility: hidden;
}

.sidebar-group-content {
  width: 100%;
  font-size: 0.875rem;
}

.sidebar-menu {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  padding: 0;
  margin: 0;
  gap: 0.25rem;
  list-style: none;
}

.sidebar-menu-item {
  position: relative;
}

.sidebar-menu-button[data-sidebar="menu-button"] {
  display: flex;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  padding: 0.5rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--sidebar-foreground);
  cursor: pointer;
  font-size: 0.875rem;
  gap: 0.5rem;
  outline: none;
  text-align: left;
  text-decoration: none;
  transition: width 200ms ease-out, height 200ms ease-out, padding 200ms ease-out;
}

.sidebar-menu-button[data-sidebar="menu-button"]:hover {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

.sidebar-menu-button[data-sidebar="menu-button"]:focus-visible {
  box-shadow: 0 0 0 2px var(--sidebar-ring);
}

.sidebar-menu-button[data-sidebar="menu-button"]:active {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

.sidebar-menu-button[data-sidebar="menu-button"]:disabled,
.sidebar-menu-button[data-sidebar="menu-button"][aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.sidebar-menu-button[data-sidebar="menu-button"][data-active="true"] {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
  font-weight: 500;
}

.app-menu-footer-button[data-sidebar="menu-button"] {
  padding: 0.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
}

.app-menu-footer-button[data-sidebar="menu-button"] svg {
  width: 1.25rem;
  height: 1.25rem;
}

.sidebar-desktop[data-collapsible="icon"] .app-menu-footer-button[data-sidebar="menu-button"] {
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0.5rem;
}

.sidebar-header .sidebar-menu-button,
.sidebar-content .sidebar-menu-button {
  height: 2.5rem;
  min-height: 2.5rem;
}

.sidebar-desktop[data-collapsible="icon"][data-state="collapsed"] .sidebar-header .sidebar-menu-button:hover,
.sidebar-desktop[data-collapsible="icon"][data-state="collapsed"] .sidebar-header .sidebar-menu-button:active,
.sidebar-desktop[data-collapsible="icon"][data-state="collapsed"] .sidebar-content .sidebar-menu-button:hover,
.sidebar-desktop[data-collapsible="icon"][data-state="collapsed"] .sidebar-content .sidebar-menu-button:active,
.sidebar-desktop[data-collapsible="icon"][data-state="collapsed"] .app-menu-footer-button[data-sidebar="menu-button"]:hover,
.sidebar-desktop[data-collapsible="icon"][data-state="collapsed"] .app-menu-footer-button[data-sidebar="menu-button"]:active,
.sidebar-desktop[data-collapsible="icon"][data-state="collapsed"] .app-menu-footer-button[data-sidebar="menu-button"][data-active="true"] {
  background: transparent;
}

.sidebar-menu-button[data-sidebar="menu-button"] svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.sidebar-menu-button[data-sidebar="menu-button"]>span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 200ms ease-out;
  white-space: nowrap;
}

.sidebar-desktop[data-collapsible="icon"] .sidebar-menu-button[data-sidebar="menu-button"]>span:last-child {
  opacity: 0;
}

/* Size variants */
.sidebar-menu-button[data-sidebar="menu-button"][data-size="default"] {
  height: 2rem;
  font-size: 0.875rem;
}

.sidebar-menu-button[data-sidebar="menu-button"][data-size="sm"] {
  height: 1.75rem;
  font-size: 0.75rem;
}

.sidebar-menu-button[data-sidebar="menu-button"][data-size="lg"] {
  height: 4rem;
  font-size: 0.875rem;
}

.sidebar-menu-button[data-sidebar="menu-button"][data-variant="outline"] {
  background: var(--primary-color-1);
  box-shadow: 0 0 0 1px var(--sidebar-border);
}

.sidebar-menu-button[data-sidebar="menu-button"][data-variant="outline"]:hover {
  background: var(--sidebar-accent);
  box-shadow: 0 0 0 1px var(--sidebar-accent);
}

.sidebar-desktop[data-collapsible="icon"] .sidebar-menu-button[data-sidebar="menu-button"] {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.625rem;
}

.sidebar-desktop[data-collapsible="icon"] .sidebar-menu-button[data-sidebar="menu-button"][data-size="lg"] {
  padding: 0;
}

.sidebar-desktop[data-collapsible="icon"] .sidebar-menu-button[data-sidebar="menu-button"]:has(> :first-child:is(svg, img)),
.sidebar-desktop[data-collapsible="icon"] .sidebar-menu-button[data-sidebar="menu-button"]:has(> :first-child:has(svg, img)) {
  justify-content: center;
  gap: 0;
}

.sidebar-desktop[data-collapsible="icon"] .sidebar-menu-button[data-sidebar="menu-button"]:has(> :first-child:is(svg, img))> :not(:first-child),
.sidebar-desktop[data-collapsible="icon"] .sidebar-menu-button[data-sidebar="menu-button"]:has(> :first-child:has(svg, img))> :not(:first-child) {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sidebar-desktop[data-collapsible="icon"] .sidebar-menu-button[data-sidebar="menu-button"] svg {
  display: block;
}

.sidebar-menu-item:has(.sidebar-menu-action[data-sidebar="menu-action"]) .sidebar-menu-button[data-sidebar="menu-button"] {
  padding-right: 2rem;
}

.sidebar-menu-action[data-sidebar="menu-action"] {
  position: absolute;
  top: 0.375rem;
  right: 0.25rem;
  display: flex;
  width: 1.25rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  aspect-ratio: 1;
  background: transparent;
  color: var(--sidebar-foreground);
  cursor: pointer;
  outline: none;
  transition: transform 150ms ease-out, opacity 200ms ease-out, visibility 0ms 0ms;
}

.sidebar-menu-action[data-sidebar="menu-action"]:hover {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

.sidebar-menu-action[data-sidebar="menu-action"] svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.sidebar-menu-action[data-sidebar="menu-action"]::after {
  position: absolute;
  content: "";
  inset: -0.5rem;
}

@media (width >=768px) {
  .sidebar-menu-action[data-sidebar="menu-action"]::after {
    display: none;
  }
}

.sidebar-menu-button[data-sidebar="menu-button"][data-size="sm"]~.sidebar-menu-action[data-sidebar="menu-action"] {
  top: 0.25rem;
}

.sidebar-menu-button[data-sidebar="menu-button"][data-size="default"]~.sidebar-menu-action[data-sidebar="menu-action"] {
  top: 0.375rem;
}

.sidebar-menu-button[data-sidebar="menu-button"][data-size="lg"]~.sidebar-menu-action[data-sidebar="menu-action"] {
  top: 0.625rem;
}

[data-collapsible="icon"] .sidebar-menu-action[data-sidebar="menu-action"] {
  opacity: 0;
  pointer-events: none;
  transition: transform 150ms ease-out, opacity 200ms ease-out, visibility 0ms 200ms;
  visibility: hidden;
}

.sidebar-menu-action[data-sidebar="menu-action"][data-show-on-hover="true"] {
  opacity: 0;
}

@media (width >=768px) {
  .sidebar-menu-item:hover .sidebar-menu-action[data-sidebar="menu-action"][data-show-on-hover="true"],
  .sidebar-menu-item:focus-within .sidebar-menu-action[data-sidebar="menu-action"][data-show-on-hover="true"],
  .sidebar-menu-action[data-sidebar="menu-action"][data-show-on-hover="true"][data-state="open"] {
    opacity: 1;
  }
}

.sidebar-menu-button[data-sidebar="menu-button"][data-active="true"]~.sidebar-menu-action[data-sidebar="menu-action"][data-show-on-hover="true"] {
  color: var(--sidebar-accent-foreground);
}

.sidebar-menu-badge {
  position: absolute;
  right: 0.25rem;
  display: flex;
  min-width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  padding: 0 0.25rem;
  border-radius: 0.375rem;
  color: var(--sidebar-foreground);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  pointer-events: none;
  transition: opacity 200ms ease-out;
  user-select: none;
}

.sidebar-menu-button:hover~.sidebar-menu-badge {
  color: var(--sidebar-accent-foreground);
}

.sidebar-menu-button[data-active="true"]~.sidebar-menu-badge {
  color: var(--sidebar-accent-foreground);
}

.sidebar-menu-button[data-size="sm"]~.sidebar-menu-badge {
  top: 0.25rem;
}

.sidebar-menu-button[data-size="default"]~.sidebar-menu-badge {
  top: 0.375rem;
}

.sidebar-menu-button[data-size="lg"]~.sidebar-menu-badge {
  top: 0.625rem;
}

[data-collapsible="icon"] .sidebar-menu-badge {
  opacity: 0;
  pointer-events: none;
}

.sidebar-menu-skeleton {
  display: flex;
  height: 2rem;
  align-items: center;
  padding: 0 0.5rem;
  border-radius: 0.375rem;
  gap: 0.5rem;
}

.sidebar-menu-skeleton-icon {
  width: 1rem;
  height: 1rem;
  border-radius: 0.375rem;
}

.sidebar-menu-skeleton-text {
  height: 1rem;
  flex: 1;
}

.sidebar-menu-sub {
  display: flex;
  flex-direction: column;
  padding: 0.125rem 0.625rem;
  border-left: 1px solid var(--sidebar-border);
  margin: 0 0.875rem;
  gap: 0.25rem;
  list-style: none;
  transform: translateX(1px);
  transition: opacity 200ms ease-out, max-height 200ms ease-out, padding 200ms ease-out, margin 200ms ease-out, visibility 0ms 0ms;
}

[data-collapsible="icon"] .sidebar-menu-sub {
  overflow: hidden;
  max-height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out, max-height 200ms ease-out, padding 200ms ease-out, margin 200ms ease-out, visibility 0ms 200ms;
  visibility: hidden;
}

.sidebar-menu-sub-item {
  position: relative;
}

.sidebar-menu-sub-button {
  display: flex;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  height: 1.75rem;
  box-sizing: border-box;
  align-items: center;
  padding: 0 0.5rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--sidebar-foreground);
  cursor: pointer;
  font-size: 0.875rem;
  gap: 0.5rem;
  outline: none;
  text-decoration: none;
  transform: translateX(-1px);
  transition: opacity 200ms ease-out;
}

.sidebar-menu-sub-button:hover {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

.sidebar-menu-sub-button:focus-visible {
  box-shadow: 0 0 0 2px var(--sidebar-ring);
}

.sidebar-menu-sub-button:active {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

.sidebar-menu-sub-button:disabled,
.sidebar-menu-sub-button[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.sidebar-menu-sub-button[data-active="true"] {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

.sidebar-menu-sub-button svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--sidebar-accent-foreground);
}

.sidebar-menu-sub-button>span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-menu-sub-button[data-size="sm"] {
  font-size: 0.75rem;
}

.sidebar-menu-sub-button[data-size="md"] {
  font-size: 0.875rem;
}

[data-collapsible="icon"] .sidebar-menu-sub-button {
  opacity: 0;
  pointer-events: none;
}


/* === src/common/components/skeleton/style.css === */
.skeleton {
  border-radius: 0.375rem;
  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  background-color: var(--primary-color-5);
}

@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }

  61.8% {
    opacity: 0.5;
  }
}


/* === src/common/components/slider/style.css === */
.slider {
    position: relative;
    display: flex;
    width: 200px;
    align-items: center;
    padding: 0.5rem 0;
    touch-action: none;
}

.slider[data-orientation="vertical"] {
    width: auto;
    height: 200px;
    flex-direction: column;
}

.slider-track {
    position: relative;
    height: 0.5rem;
    box-sizing: border-box;
    flex-grow: 1;
    border-radius: 9999px;
    background: var(--primary-color-5);
}

.slider[data-orientation="vertical"] .slider-track {
    width: 4px;
    height: 100%;
}

.slider-range {
    position: absolute;
    height: 100%;
    border-radius: 9999px;
    background-color: var(--secondary-color-2);
}

.slider[data-orientation="vertical"] .slider-range {
    width: 100%;
}

.slider-thumb {
    all: unset;
    position: absolute;
    top: 50%;
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid var(--secondary-color-2);
    border-radius: 50%;
    background-color: var(--primary-color-1);
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: border-color 150ms;
}

.slider[data-orientation="vertical"] .slider-thumb {
    left: 50%;
    transform: translate(-50%, 50%);
}

.slider-thumb:focus-visible[data-dragging="true"],
.slider-thumb:focus-visible,
.slider-thumb:hover {
    box-shadow: 0 0 0 4px
        color-mix(in oklab, var(--primary-color-7) 50%, transparent);
    transition: box-shadow 150ms;
}

.slider[data-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
}

.slider[data-disabled="true"] .slider-thumb {
    cursor: not-allowed;
}


/* === src/common/components/tabs/style.css === */
.tabs {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0.5rem;
}

:root {
  --color-tab-bg3: var(--dark, #1a1a1a) var(--light, #ffffff);
  --color-tab-hover: var(--dark, #1a1a1a) var(--light, #e5e5e5);
}

.tabs-list {
  display: flex;
  flex-direction: row;
  max-width: 100%;
  width: fit-content;
  border-radius: 9999px;
  background-color: var(--color-tab-bg3);
  color: var(--secondary-color-5);
}

[data-variant="default"] .tabs-list {
  background: var(--light, var(--primary-color-3))
              var(--dark, var(--primary-color-5));
}

.tabs-trigger {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 210px;
  padding: 18px 30px;
  border-radius: 9999px;

  font-family: Raleway;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 15px;
  leading-trim: NONE;
  line-height: 18px;
  letter-spacing: -0.16px;
  text-align: center;
}

[data-variant="default"] .tabs-trigger[data-state="active"] {
  background-color: var(--color-tab-hover);
}

.tabs-trigger[data-state="active"] {
  color: var(--color-text-primary);
  font-family: Raleway;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 15px;
  leading-trim: NONE;
  line-height: 18px;
  letter-spacing: -0.16px;
  text-align: center;
}

.tabs-trigger[data-disabled="true"] {
  color: var(--secondary-color-5);
  cursor: not-allowed;
}

.tabs-trigger:hover:not([data-disabled="true"]),
.tabs-trigger:focus-visible {
    color: var(--secondary-color-3);
}

.tabs-content {
    width: 100%;
    box-sizing: border-box;
    padding: 0.25rem;
}

[data-variant="default"] .tabs-content-themed {
}

.tabs-content[data-state="inactive"] {
  display: none;
}

@media (max-width: 500px) {
  .tabs-list {
    width: 100%;
  }

  .tabs-trigger {
    flex: 1;
    width: auto;
    padding: 12px 8px;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.1px;
  }

}


/* === src/common/components/time_picker/style.css === */
/* Time Picker */
.time-picker {
    position: relative;
    display: flex;
    flex: 1;
    align-self: stretch;
}

.time-picker-trigger {
    display: flex;
    flex-direction: row;
    flex: 1;
    gap: 0.25rem;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0.5em;
    border: 0.5px solid var(--light, var(--primary-color-6))
        var(--dark, var(--primary-color-7));
    border-radius: 12px;
    background-color: var(--light, var(--primary-color))
        var(--dark, var(--primary-color-2));
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.time-picker-trigger:hover {
    border-color: var(--light, var(--primary-color-7))
        var(--dark, var(--secondary-color-5));
}

.time-picker-display {
    flex: 1;
    color: var(--secondary-color-4);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.time-picker-icon {
    flex-shrink: 0;
}

.time-picker-icon circle,
.time-picker-icon path {
    fill: none;
    stroke: var(--secondary-color-4);
}

/* Backdrop */
.time-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
}

/* Dropdown panel */
.time-picker-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 1000;
    transform: translateX(-50%);
    border: 1px solid var(--light, var(--primary-color-6))
        var(--dark, var(--primary-color-7));
    border-radius: 8px;
    background-color: var(--light, var(--primary-color))
        var(--dark, var(--primary-color-2));
    box-shadow: var(--light, 0 4px 16px rgb(0 0 0 / 12%))
        var(--dark, 0 4px 16px rgb(0 0 0 / 40%));
    animation: time-picker-fade-in 0.15s ease-out;
}

@keyframes time-picker-fade-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Columns layout */
.time-picker-columns {
    display: flex;
    flex-direction: row;
    padding: 0.5rem;
    gap: 0.25rem;
}

.time-picker-column {
    display: flex;
    flex-direction: column;
    min-width: 3.5rem;
}

.time-picker-column-label {
    padding: 0.375rem 0.5rem 0.25rem;
    color: var(--secondary-color-5);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    user-select: none;
}

/* Scroll container */
.time-picker-scroll {
    display: flex;
    flex-direction: column;
    max-height: 200px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--light, var(--primary-color-5)) transparent;
}

.time-picker-scroll::-webkit-scrollbar {
    width: 4px;
}

.time-picker-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.time-picker-scroll::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: var(--primary-color-5);
}

/* Divider between columns */
.time-picker-divider {
    width: 1px;
    margin: 1.75rem 0.125rem 0.25rem;
    background-color: var(--light, var(--primary-color-6))
        var(--dark, var(--primary-color-7));
}

/* Individual time cell */
.time-picker-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.25rem 0.5rem;
    border: none;
    border-radius: 0.375rem;
    background: none;
    color: var(--secondary-color-4);
    cursor: pointer;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.1s ease;
}

.time-picker-cell:hover {
    background-color: var(--light, var(--primary-color-4))
        var(--dark, var(--primary-color-4));
}

.time-picker-cell:focus-visible {
    outline: 2px solid var(--focused-border-color);
    outline-offset: -2px;
}

.time-picker-cell[data-selected="true"] {
    background-color: var(--secondary-color-2);
    color: var(--light, var(--primary-color))
        var(--dark, var(--primary-color));
    font-weight: 600;
}

.time-picker-cell[data-selected="true"]:hover {
    background-color: var(--light, var(--secondary-color-3))
        var(--dark, var(--secondary-color-2));
}


/* === src/common/components/toggle_group/style.css === */
.toggle-group {
  width: fit-content;
}

.toggle-item {
  min-width: 35px;
  padding: 10px;
  border: none;
  border-radius: 0;
  background-color: transparent;
  color: var(--secondary-color-4);
  font-size: 14px;
  outline: none;
  transition: background-color 200ms ease, border 200ms ease;
}

.toggle-group[data-allow-multiple-pressed="true"]
  .toggle-item {
  border-top: 1px solid var(--primary-color-6);
  border-right: 1px solid var(--primary-color-6);
  border-bottom: 1px solid var(--primary-color-6);
}

.toggle-item:hover,
.toggle-item:focus-visible {
  background-color: var(--primary-color-4);
  cursor: pointer;
}

.toggle-item[data-state="on"] {
  background-color: var(--primary-color-7);
  color: var(--secondary-color-1);
}

.toggle-group[data-allow-multiple-pressed="true"]
  .toggle-item[data-state="on"] {
  border-top: 1px solid var(--secondary-color-6);
  border-right: 1px solid var(--secondary-color-6);
  border-bottom: 1px solid var(--secondary-color-6);
}

.toggle-group[data-allow-multiple-pressed="true"]
  .toggle-item:first-child[data-state="on"] {
  border: 1px solid var(--secondary-color-6);
}

.toggle-item:first-child {
  border-bottom-left-radius: 0.5rem;
  border-top-left-radius: 0.5rem;
}

.toggle-group[data-allow-multiple-pressed="true"] .toggle-item:first-child {
  border: 1px solid var(--primary-color-6);
}

.toggle-item:last-child {
  border-bottom-right-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}


/* === src/common/components/toggle/style.css === */
.toggle {
  display: inline-flex;
  width: fit-content;
  min-width: 2rem;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  border: none;
  border-radius: 0.5rem;
  background-color: transparent;
  color: var(--secondary-color-4);
  font-size: 14px;
  outline: none;
}

.toggle:hover, .toggle:focus-visible {
  background-color: var(--primary-color-4);
  cursor: pointer;
}

.toggle[data-state="on"] {
  background-color: var(--primary-color-7);
  color: var(--secondary-color-1);
}


/* === src/common/components/toolbar/style.css === */
.toolbar {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    padding: .25rem;
    border: none;
    border-radius: .5rem;
    box-shadow: inset 0 0 0 1px var(--primary-color-6);
    gap: .25rem;
}

.toolbar button {
    padding: 8px 12px;
    border: none;
    border-radius: calc(.5rem - .25rem);
    background: none;
    color: var(--secondary-color-4);
    cursor: pointer;
}

.toolbar button:hover:not([disabled]),
.toolbar button:focus-visible {
    background: var(--light, var(--primary-color-4))
        var(--dark, var(--primary-color-7));
    color: var(--secondary-color-1);
}

.toolbar button:disabled {
    color: var(--secondary-color-5);
    cursor: not-allowed;
}

.toolbar-group {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.toolbar-separator {
    width: 1px;
    height: 24px;
    margin: 0 5px;
    background-color: var(--primary-color-6);
}

.toolbar-content p {
    padding: 0;
    margin: 0;
}


/* === src/common/components/tooltip/style.css === */
/* Tooltip Styles */
.tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tooltip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tooltip-content {
  position: absolute;
  z-index: 1000;
  min-width: 250px;
  max-width: 350px;
  width: max-content;
  padding: 8px 12px;
  border-radius: 0.5rem;
  animation: tooltip-fade-in 0.2s ease-in-out;
  background-color: var(--secondary-color-4);
  color: var(--primary-color);
  font-size: 14px;
  line-height: 1.4;
  white-space: normal;
  word-break: keep-all;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.tooltip-content::after {
  position: absolute;
  border-width: 0.25rem;
  border-style: solid;
  margin-left: -0.25rem;
  content: " ";
  rotate: 45deg;
}

/* Positioning based on side */
.tooltip-content[data-side="top"] {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 8px;
  transform: translateX(-50%);
}

.tooltip-content[data-side="top"]::after {
  top: calc(100% - 0.25rem);
  left: 50%;
  border-color: var(--secondary-color-4);
  border-radius: 0 0 0.1rem;
}

.tooltip-content[data-side="right"] {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 8px;
  transform: translateY(-50%);
}

.tooltip-content[data-side="right"]::after {
  top: calc(50% - 0.25rem);
  left: 0;
  border-color: var(--secondary-color-4);
  border-radius: 0 0 0 0.1rem;
}

.tooltip-content[data-side="bottom"] {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 8px;
  transform: translateX(-50%);
}

.tooltip-content[data-side="bottom"]::after {
  bottom: calc(100% - 0.25rem);
  left: 50%;
  border-color: var(--secondary-color-4);
  border-radius: 0.1rem 0 0;
}

.tooltip-content[data-side="left"] {
  position: absolute;
  top: 50%;
  right: 100%;
  margin-right: 8px;
  transform: translateY(-50%);
}

.tooltip-content[data-side="left"]::after {
  top: calc(50% - 0.25rem);
  right: -0.25rem;
  border-color: var(--secondary-color-4);
  border-radius: 0 0.1rem 0 0;
}

/* Alignment styles for top and bottom */
.tooltip-content[data-side="top"][data-align="start"],
.tooltip-content[data-side="bottom"][data-align="start"] {
  left: 0;
  transform: none;
}

.tooltip-content[data-side="top"][data-align="end"],
.tooltip-content[data-side="bottom"][data-align="end"] {
  right: 0;
  left: auto;
  transform: none;
}

/* Alignment styles for left and right */
.tooltip-content[data-side="left"][data-align="start"],
.tooltip-content[data-side="right"][data-align="start"] {
  top: 0;
  transform: none;
}

.tooltip-content[data-side="left"][data-align="center"],
.tooltip-content[data-side="right"][data-align="center"] {
  top: 50%;
  transform: translateY(-50%);
}

.tooltip-content[data-side="left"][data-align="end"],
.tooltip-content[data-side="right"][data-align="end"] {
  top: auto;
  bottom: 0;
  transform: none;
}

/* Animation */
@keyframes tooltip-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* State styles */
.tooltip[data-disabled="true"] .tooltip-trigger {
  cursor: default;
}

.tooltip-content[data-state="closed"] {
  display: none;
}

.tooltip-content[data-state="open"] {
  display: block;
}


/* === src/features/essence/pages/sources/breakdown/style.css === */
.essence-breakdown {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.essence-kind-card {
  padding: 16px;
  border-radius: 14px;
  background: var(--bg-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.essence-kind-card:hover {
  border-color: var(--border-strong);
}
.essence-kind-card[data-selected="true"] {
  border-color: rgba(252, 179, 0, 0.35);
  background: rgba(252, 179, 0, 0.04);
  box-shadow: inset 0 0 0 1px rgba(252, 179, 0, 0.15);
}

.essence-kind-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.essence-kind-card__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.essence-kind-card__icon--all {
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.12), rgba(110, 237, 216, 0.08));
  color: var(--accent-gold);
  border: 1px solid rgba(252, 179, 0, 0.22);
}
.essence-kind-card__icon--notion {
  background: #fff;
  color: #0a0a0a;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
}
.essence-kind-card__icon--posts {
  background: rgba(252, 179, 0, 0.08);
  color: var(--accent-gold);
  border: 1px solid rgba(252, 179, 0, 0.18);
}
.essence-kind-card__icon--comments {
  background: rgba(129, 140, 248, 0.08);
  color: var(--accent-violet);
  border: 1px solid rgba(129, 140, 248, 0.18);
}
.essence-kind-card__icon--actions {
  background: rgba(110, 237, 216, 0.06);
  color: var(--accent-teal);
  border: 1px solid rgba(110, 237, 216, 0.18);
}
.essence-kind-card__icon svg {
  width: 15px;
  height: 15px;
}
.essence-kind-card__pct {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}
.essence-kind-card__value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}
.essence-kind-card__label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 960px) {
  .essence-breakdown { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 500px) {
  .essence-breakdown { grid-template-columns: 1fr 1fr; }
}


/* === src/features/essence/pages/sources/bulk_bar/style.css === */
.essence-bulk {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.08), rgba(12, 12, 26, 0.80));
  border: 1px solid rgba(252, 179, 0, 0.22);
}
.essence-bulk[data-open="true"] {
  display: flex;
}
.essence-bulk__count {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold);
}
.essence-bulk__count strong {
  color: var(--text-primary);
  font-size: 14px;
}
.essence-bulk__actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.essence-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.essence-bulk-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.essence-bulk-btn--danger:hover {
  border-color: rgba(239, 68, 68, 0.30);
  color: var(--accent-coral);
  background: rgba(239, 68, 68, 0.04);
}
.essence-bulk-btn svg {
  width: 11px;
  height: 11px;
}


/* === src/features/essence/pages/sources/controls/style.css === */
.essence-controls {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
}

.essence-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 42px;
  border-radius: 11px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  transition: all 0.2s;
}
.essence-search:focus-within {
  border-color: rgba(252, 179, 0, 0.22);
  background: var(--bg-input-focus);
}
.essence-search svg {
  width: 14px;
  height: 14px;
  color: var(--text-dim);
}
.essence-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--text-primary);
}
.essence-search input::placeholder {
  color: var(--text-dim);
}
.essence-search kbd {
  font-family: var(--font-display);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-dim);
  letter-spacing: 0.06em;
}

.essence-filter-group {
  display: inline-flex;
  padding: 3px;
  border-radius: 11px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  height: 42px;
  align-items: center;
}
.essence-filter-opt {
  padding: 0 12px;
  height: 34px;
  border-radius: 8px;
  background: transparent;
  border: none;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.essence-filter-opt svg {
  width: 11px;
  height: 11px;
}
.essence-filter-opt:hover {
  color: var(--text-primary);
}
.essence-filter-opt[aria-selected="true"] {
  background: rgba(252, 179, 0, 0.10);
  color: var(--accent-gold);
}

.essence-sort {
  height: 42px;
  padding: 0 14px;
  border-radius: 11px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  outline: none;
}

@media (max-width: 960px) {
  .essence-controls { grid-template-columns: 1fr; }
  .essence-filter-group { overflow-x: auto; scrollbar-width: none; }
  .essence-filter-group::-webkit-scrollbar { display: none; }
}


/* === src/features/essence/pages/sources/hero/style.css === */
.essence-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 22px 26px;
  border-radius: 18px;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
}
.essence-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 65% at 0% 40%, rgba(252, 179, 0, 0.06) 0%, transparent 55%);
  pointer-events: none;
}
.essence-hero > * {
  position: relative;
  z-index: 1;
}

.essence-hero__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.essence-hero__eyebrow {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.essence-hero__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.essence-hero__title-count {
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-teal));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 30px;
}
.essence-hero__sub {
  font-size: 13.5px;
  color: var(--text-muted);
}

.essence-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 18px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--accent-gold), #e5a200);
  color: #0a0a0a;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 14px rgba(252, 179, 0, 0.22);
}
.essence-hero__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 22px rgba(252, 179, 0, 0.38);
}
.essence-hero__cta svg {
  width: 13px;
  height: 13px;
}

@media (max-width: 500px) {
  .essence-hero { grid-template-columns: 1fr; }
  .essence-hero__cta { justify-self: flex-start; }
}


/* === src/features/essence/pages/sources/sources_table/style.css === */
.essence-sources {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.essence-src-head {
  display: grid;
  grid-template-columns: 22px 1fr 100px 120px 32px;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.20);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  align-items: center;
}
.essence-src-row {
  display: grid;
  grid-template-columns: 22px 1fr 100px 120px 32px;
  gap: 12px;
  padding: 13px 18px;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  transition: all 0.2s;
}
.essence-src-row:last-of-type {
  border-bottom: none;
}
.essence-src-row[data-clickable="true"] {
  cursor: pointer;
}
.essence-src-row:hover {
  background: rgba(255, 255, 255, 0.02);
}
.essence-src-row[data-selected="true"] {
  background: rgba(252, 179, 0, 0.04);
}

.essence-src-check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--border-strong);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s;
}
.essence-src-check svg {
  width: 10px;
  height: 10px;
  color: #0a0a0a;
  opacity: 0;
}
.essence-src-row[data-selected="true"] .essence-src-check {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
}
.essence-src-row[data-selected="true"] .essence-src-check svg {
  opacity: 1;
}

.essence-src-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.essence-src-icon--notion {
  background: #fff;
  color: #0a0a0a;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
}
.essence-src-icon--post {
  background: rgba(252, 179, 0, 0.08);
  color: var(--accent-gold);
  border: 1px solid rgba(252, 179, 0, 0.18);
}
.essence-src-icon--comment {
  background: rgba(129, 140, 248, 0.08);
  color: var(--accent-violet);
  border: 1px solid rgba(129, 140, 248, 0.18);
}
.essence-src-icon--action {
  background: rgba(110, 237, 216, 0.06);
  color: var(--accent-teal);
  border: 1px solid rgba(110, 237, 216, 0.18);
}
.essence-src-icon svg {
  width: 12px;
  height: 12px;
}

.essence-src-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.essence-src-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.essence-src-meta {
  font-size: 11.5px;
  color: var(--text-dim);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.essence-src-meta__link {
  color: var(--text-dim);
  cursor: pointer;
}
.essence-src-meta__link:hover {
  color: var(--accent-teal);
}
.essence-src-meta__dot {
  color: var(--border-strong);
}
.essence-src-meta__badge--paused {
  color: var(--accent-coral);
}
.essence-src-meta__badge--flagged {
  color: var(--accent-violet);
}

.essence-src-words {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.essence-src-synced {
  font-size: 12px;
  color: var(--text-muted);
}

.essence-src-quality {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.essence-src-quality--high {
  background: rgba(34, 197, 94, 0.06);
  color: var(--accent-green);
  border-color: rgba(34, 197, 94, 0.20);
}
.essence-src-quality--med {
  background: rgba(252, 179, 0, 0.06);
  color: var(--accent-gold);
  border-color: rgba(252, 179, 0, 0.20);
}
.essence-src-quality--low {
  background: rgba(239, 68, 68, 0.04);
  color: var(--accent-coral);
  border-color: rgba(239, 68, 68, 0.20);
}
.essence-src-quality svg {
  width: 10px;
  height: 10px;
}

.essence-switch {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.25s;
  padding: 0;
  justify-self: center;
}
.essence-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: all 0.25s;
}
.essence-switch[aria-checked="true"] {
  background: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.40);
}
.essence-switch[aria-checked="true"]::after {
  transform: translateX(14px);
  background: var(--accent-green);
}

.essence-src-menu-wrap {
  position: relative;
  justify-self: end;
}
.essence-src-more {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s;
}
.essence-src-more:hover {
  border-color: var(--border-subtle);
  color: var(--text-muted);
}
.essence-src-more svg {
  width: 13px;
  height: 13px;
}

.essence-src-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  padding: 4px;
  border-radius: 10px;
  background: var(--dark, #12121a) var(--light, #ffffff);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 8px 24px var(--dark, rgba(0, 0, 0, 0.5)) var(--light, rgba(0, 0, 0, 0.12));
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.essence-src-menu__item {
  background: transparent;
  border: 0;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.essence-src-menu__item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.essence-src-menu__item--danger {
  color: var(--accent-coral);
}
.essence-src-menu__item--danger:hover {
  background: rgba(239, 68, 68, 0.08);
}

/* ── Pagination ── */
.essence-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-top: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.18);
  gap: 12px;
  flex-wrap: wrap;
}
.essence-pagination__info {
  font-size: 12.5px;
  color: var(--text-muted);
}
.essence-pagination__info strong {
  color: var(--text-primary);
  font-weight: 600;
}
.essence-pagination__actions {
  display: flex;
  gap: 6px;
  align-items: center;
  /* Wrap the page buttons (WINDOW_SIZE = 10 numbers + prev/next) onto more
     than one row when they can't fit the width — otherwise the trailing
     buttons (incl. the next `›`) overflow off-screen on mobile. */
  flex-wrap: wrap;
}
.essence-page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
}
.essence-page-btn:hover:not(:disabled) {
  border-color: rgba(252, 179, 0, 0.22);
  color: var(--accent-gold);
}
.essence-page-btn[aria-current="page"] {
  background: rgba(252, 179, 0, 0.10);
  border-color: rgba(252, 179, 0, 0.30);
  color: var(--accent-gold);
}
.essence-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.essence-page-btn--ellipsis {
  cursor: default;
  border-color: transparent;
  background: transparent;
}
.essence-page-btn svg {
  width: 12px;
  height: 12px;
}
@media (max-width: 600px) {
  /* Stack info above the controls and give the buttons the full row width so
     they wrap centered instead of overflowing past the screen edge. */
  .essence-pagination {
    flex-direction: column;
    align-items: stretch;
  }
  .essence-pagination__actions {
    justify-content: center;
  }
}

/* ── Empty state ── */
.essence-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 48px 18px;
  text-align: center;
}
.essence-empty__title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.essence-empty__sub {
  font-size: 13px;
  color: var(--text-muted);
}

@media (max-width: 960px) {
  .essence-src-head,
  .essence-src-row {
    grid-template-columns: 22px 1fr auto 32px;
  }
  .essence-src-head > :nth-child(4),
  .essence-src-row > :nth-child(4) {
    display: none;
  }
}


/* === src/features/essence/pages/sources/style.css === */
/* ── Essence Arena — shell + shared tokens ────────────────────────── */
/* Mirrors `assets/design/essence-connector/essence-sources.html` and
   uses the Ratel dark/light space-toggle convention for every color
   that needs to flip between themes. */

.essence-arena {
  --bg-void: var(--dark, #06060e) var(--light, #f4f3ef);
  --bg-glass: var(--dark, rgba(12, 12, 26, 0.65))
    var(--light, rgba(255, 255, 255, 0.72));
  --bg-glass-hover: var(--dark, rgba(20, 20, 40, 0.80))
    var(--light, rgba(255, 255, 255, 0.88));
  --bg-input: var(--dark, rgba(255, 255, 255, 0.025))
    var(--light, rgba(0, 0, 0, 0.025));
  --bg-input-focus: var(--dark, rgba(255, 255, 255, 0.04))
    var(--light, rgba(0, 0, 0, 0.04));
  --border-subtle: var(--dark, rgba(255, 255, 255, 0.06))
    var(--light, rgba(0, 0, 0, 0.08));
  --border-strong: var(--dark, rgba(255, 255, 255, 0.12))
    var(--light, rgba(0, 0, 0, 0.14));
  --text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --text-dim: var(--dark, #55556a) var(--light, #9999aa);
  --accent-gold: #fcb300;
  --accent-teal: #6eedd8;
  --accent-coral: #ef4444;
  --accent-green: #22c55e;
  --accent-violet: #818cf8;
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Outfit', sans-serif;

  position: relative;
  /* Body has `overflow: hidden` on desktop (see tailwind.css) so every
     route under RootLayout must own its scroll container. Locking the
     arena to 100% + overflow-y:auto lets the long sources list scroll
     naturally on desktop while the sticky topbar anchors to the top. */
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
}

@media (max-width: 768px) {
  /* Keep the arena as its OWN scroll container on mobile too (same as
     desktop) so the `position: sticky` topbar has a scrolling ancestor to
     anchor to. With `overflow: visible` the document body scrolled instead,
     and a sticky element whose scroll ancestor is the body drifted up with
     the content — the `SOURCES` header scrolled away instead of staying
     pinned. */
  .essence-arena {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
.essence-arena::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 25% 10%, rgba(252, 179, 0, 0.04) 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 85% 90%, rgba(129, 140, 248, 0.04) 0%, transparent 55%);
  z-index: -1;
  pointer-events: none;
}

/* Main content wrapper — matches `.page` in the mockup. */
.essence-page {
  position: relative;
  z-index: 1;
  flex: 1;
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
  padding: 32px 28px 60px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

@media (max-width: 500px) {
  .essence-page { padding: 22px 14px 60px; }
}


/* === src/features/essence/pages/sources/topbar/style.css === */
.essence-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  background: var(--dark, rgba(6, 6, 14, 0.80)) var(--light, rgba(244, 243, 239, 0.88));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}

.essence-topbar__left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.essence-topbar__back {
  width: 38px;
  height: 38px;
  /* A flex item defaults to `flex-shrink: 1`, so a long title beside it
     squeezed this fixed square into an oval. Its siblings in the same topbar
     (badge, progress ring) already carry this — the back button didn't. */
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
  color: var(--text-muted);
}
.essence-topbar__back:hover {
  border-color: rgba(252, 179, 0, 0.25);
  background: var(--bg-glass-hover);
  color: var(--accent-gold);
}
.essence-topbar__back svg {
  width: 18px;
  height: 18px;
}

.essence-topbar__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.essence-topbar__eyebrow {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.essence-topbar__main {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.essence-topbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-glass);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.25s ease;
}
.essence-topbar__btn:hover {
  border-color: rgba(252, 179, 0, 0.25);
  color: var(--accent-gold);
}
.essence-topbar__btn svg {
  width: 13px;
  height: 13px;
}
.essence-topbar__btn--primary {
  background: linear-gradient(135deg, var(--accent-gold), #e5a200);
  color: #0a0a0a;
  border-color: transparent;
}
.essence-topbar__btn--primary:hover {
  color: #0a0a0a;
}

@media (max-width: 500px) {
  .essence-topbar { padding: 12px 14px; }
  .essence-topbar__eyebrow { display: none; }
}


/* === src/features/me/pages/my_ai/style.css === */
/* ── My AI Page ─────────────────────────────────────── */
/* All custom CSS for the /my-ai route. Keeps the arena
   aesthetic from the spaces index but renders as a
   stand-alone scrollable page (no fixed-viewport HUD). */

.my-ai {
  --my-ai-bg: var(--dark, #06060e) var(--light, #f4f3ef);
  --my-ai-glass: var(--dark, rgba(12,12,26,0.65)) var(--light, rgba(255,255,255,0.72));
  --my-ai-glass-hover: var(--dark, rgba(20,20,40,0.80)) var(--light, rgba(255,255,255,0.88));
  --my-ai-bg-input: var(--dark, rgba(0,0,0,0.30)) var(--light, rgba(0,0,0,0.04));
  --my-ai-bg-code: var(--dark, rgba(6,6,14,0.55)) var(--light, rgba(0,0,0,0.03));
  --my-ai-border: var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08));
  --my-ai-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --my-ai-text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --my-ai-text-dim: var(--dark, #55556a) var(--light, #9999aa);

  position: relative;
  /* `body` is `overflow: hidden` on desktop (top of this file), so every
     route under RootLayout owns its own scroll container. Lock the page
     to 100% height + overflow-y:auto so the content below the hero scrolls
     inside the page instead of being clipped by body. */
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: var(--my-ai-bg);
  color: var(--my-ai-text);
  font-family: 'Outfit', sans-serif;
}

@media (max-width: 768px) {
  /* Keep the page as its OWN scroll container on mobile (same as desktop) so
     the `position: sticky` `.my-ai__topbar` has a scrolling ancestor to
     anchor to. With `overflow: visible` the body scrolled and the header
     drifted up with the content instead of staying pinned. */
  .my-ai {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

.my-ai::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 25%, rgba(34,211,238,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 50% 90%, rgba(129,140,248,0.05) 0%, transparent 55%);
}

/* ─── Topbar ───────────────────────────────────────── */
.my-ai__topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px;
  background: var(--dark, rgba(6,6,14,0.80)) var(--light, rgba(244,243,239,0.85));
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--my-ai-border);
}
.my-ai__topbar-left { display: flex; align-items: center; gap: 14px; }
.my-ai__back {
  width: 38px; height: 38px;
  /* Fixed-size flex child: without this the default `flex-shrink: 1` lets a
     long sibling title squash the square button into an oval. */
  flex-shrink: 0; border-radius: 10px;
  background: var(--my-ai-glass);
  border: 1px solid var(--my-ai-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.25s ease; padding: 0;
  color: var(--my-ai-text-muted);
}
.my-ai__back:hover {
  border-color: rgba(252,179,0,0.25);
  background: var(--my-ai-glass-hover);
  color: #fcb300;
}
.my-ai__back svg { width: 18px; height: 18px; }

.my-ai__title { display: flex; align-items: baseline; gap: 10px; }
.my-ai__title-main {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--my-ai-text);
}
.my-ai__title-main em { font-style: normal; color: #22d3ee; font-weight: 700; }

.my-ai__status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 100px;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(34,197,94,0.08); color: #22c55e;
  border: 1px solid rgba(34,197,94,0.18);
}
.my-ai__status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 6px #22c55e;
  animation: my-ai-pulse-dot 2s ease-in-out infinite;
}
.my-ai__status[data-state="off"] {
  background: rgba(85,85,106,0.10); color: var(--my-ai-text-dim);
  border-color: rgba(85,85,106,0.25);
}
.my-ai__status[data-state="off"]::before {
  background: var(--my-ai-text-dim); box-shadow: none; animation: none;
}
@keyframes my-ai-pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.my-ai__topbar-link {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--my-ai-border);
  background: var(--my-ai-glass);
  font-family: 'Orbitron', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--my-ai-text-muted); cursor: pointer; text-decoration: none;
  transition: all 0.25s ease;
}
.my-ai__topbar-link:hover {
  border-color: rgba(252,179,0,0.25);
  color: #fcb300;
  background: var(--my-ai-glass-hover);
}
.my-ai__topbar-link svg { width: 13px; height: 13px; }

/* ─── Page shell ───────────────────────────────────── */
.my-ai__page {
  position: relative; z-index: 1; flex: 1;
  max-width: 980px; margin: 0 auto; width: 100%;
  padding: 32px 28px 80px;
  display: flex; flex-direction: column; gap: 24px;
}

/* ─── Endpoint hero ────────────────────────────────── */
.my-ai__hero {
  position: relative; overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--my-ai-border);
  background: var(--my-ai-glass);
  backdrop-filter: blur(16px);
  padding: 28px 30px;
  display: flex; flex-direction: column; gap: 22px;
}
.my-ai__hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 12% 0%, rgba(34,211,238,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 95% 110%, rgba(129,140,248,0.10) 0%, transparent 60%);
}
.my-ai__hero > * { position: relative; z-index: 1; }

.my-ai__hero-head { display: flex; align-items: flex-start; gap: 18px; }
.my-ai__hero-crest {
  width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(34,211,238,0.22), rgba(129,140,248,0.18));
  border: 1px solid rgba(34,211,238,0.28);
  box-shadow: 0 0 24px rgba(34,211,238,0.16);
}
.my-ai__hero-crest svg { width: 28px; height: 28px; color: #fff; }
.my-ai__hero-head-body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.my-ai__hero-eyebrow {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--my-ai-text-dim);
}
.my-ai__hero-eyebrow strong { color: #22d3ee; font-weight: 700; }
.my-ai__hero-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 22px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--my-ai-text);
}
.my-ai__hero-sub {
  font-size: 13.5px; color: var(--my-ai-text-muted);
  line-height: 1.6; max-width: 620px;
}

/* URL row */
.my-ai__url {
  display: flex; align-items: stretch; gap: 0;
  border-radius: 12px; overflow: hidden;
  background: var(--my-ai-bg-input);
  border: 1px solid var(--my-ai-border);
}
.my-ai__url-label {
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  background: rgba(34,211,238,0.05);
  border-right: 1px solid var(--my-ai-border);
  font-family: 'Orbitron', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #22d3ee; white-space: nowrap;
}
.my-ai__url-label svg { width: 12px; height: 12px; }
.my-ai__url-value {
  flex: 1; padding: 14px 16px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; color: var(--my-ai-text);
  background: transparent; border: 0; outline: 0; width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.my-ai__url-value--placeholder {
  color: var(--my-ai-text-dim); font-style: italic;
  font-family: 'Outfit', sans-serif; font-size: 13.5px;
}
.my-ai__url-copy {
  flex-shrink: 0; padding: 0 18px; border: 0;
  border-left: 1px solid var(--my-ai-border);
  background: rgba(252,179,0,0.05); color: #fcb300;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; cursor: pointer; transition: all 0.2s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.my-ai__url-copy:hover { background: rgba(252,179,0,0.12); }
.my-ai__url-copy svg { width: 12px; height: 12px; }
.my-ai__url-copy[data-copied="true"] {
  color: #22c55e; background: rgba(34,197,94,0.10);
}

/* Note */
.my-ai__note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(252,179,0,0.06);
  border: 1px solid rgba(252,179,0,0.18);
  font-size: 12.5px; color: #f5d68a; line-height: 1.5;
}
.my-ai__note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: #fcb300; }
.my-ai__note strong { color: #fcb300; font-weight: 700; }

/* Action row */
.my-ai__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.my-ai__btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: 10px;
  border: 1px solid var(--my-ai-border);
  background: var(--my-ai-glass); cursor: pointer;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; transition: all 0.2s ease;
  color: var(--my-ai-text);
}
.my-ai__btn svg { width: 14px; height: 14px; }
.my-ai__btn--primary { background: #fcb300; color: #0a0a0a; border-color: #fcb300; }
.my-ai__btn--primary:hover { box-shadow: 0 0 24px rgba(252,179,0,0.35); }
.my-ai__btn--ghost { color: var(--my-ai-text-muted); }
.my-ai__btn--ghost:hover { color: var(--my-ai-text); border-color: rgba(255,255,255,0.18); background: var(--my-ai-glass-hover); }
.my-ai__btn--danger {
  color: #ef4444; border-color: rgba(239,68,68,0.25);
  background: rgba(239,68,68,0.06);
}
.my-ai__btn--danger:hover { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.5); }
.my-ai__btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.my-ai__actions-hint { margin-left: auto; font-size: 11.5px; color: var(--my-ai-text-dim); }

/* ─── Section heads ────────────────────────────────── */
.my-ai__section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 8px; gap: 12px; flex-wrap: wrap;
}
.my-ai__section-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--my-ai-text);
}
.my-ai__section-title em { font-style: normal; color: #22d3ee; }
.my-ai__section-sub { font-size: 12.5px; color: var(--my-ai-text-muted); }

/* ─── Capability pills ─────────────────────────────── */
.my-ai__caps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.my-ai__cap {
  padding: 14px 16px; border-radius: 12px;
  background: var(--my-ai-glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--my-ai-border);
  display: flex; align-items: flex-start; gap: 12px;
}
.my-ai__cap-icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.my-ai__cap-icon svg { width: 16px; height: 16px; }
.my-ai__cap--cyan .my-ai__cap-icon { background: rgba(34,211,238,0.10); color: #22d3ee; }
.my-ai__cap--gold .my-ai__cap-icon { background: rgba(252,179,0,0.10); color: #fcb300; }
.my-ai__cap--violet .my-ai__cap-icon { background: rgba(129,140,248,0.10); color: #818cf8; }
.my-ai__cap--teal .my-ai__cap-icon { background: rgba(110,237,216,0.10); color: #6eedd8; }
.my-ai__cap--pink .my-ai__cap-icon { background: rgba(219,39,128,0.10); color: #db2780; }

.my-ai__cap-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.my-ai__cap-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--my-ai-text-dim);
}
.my-ai__cap-value {
  font-size: 13.5px; color: var(--my-ai-text);
  font-weight: 600; line-height: 1.4;
}

/* ─── Setup guide ──────────────────────────────────── */
.my-ai__guide {
  position: relative; border-radius: 18px;
  border: 1px solid var(--my-ai-border);
  background: var(--my-ai-glass);
  backdrop-filter: blur(16px);
  overflow: hidden;
}
.my-ai__guide-tabs {
  display: flex; gap: 0; padding: 6px;
  background: var(--dark, rgba(6,6,14,0.55)) var(--light, rgba(0,0,0,0.04));
  border-bottom: 1px solid var(--my-ai-border);
  overflow-x: auto;
}
.my-ai__guide-tab {
  flex: 1; min-width: 130px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: 9px;
  background: transparent; border: 0; cursor: pointer;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--my-ai-text-muted);
  transition: all 0.2s ease; white-space: nowrap;
}
.my-ai__guide-tab:hover { color: var(--my-ai-text); background: rgba(255,255,255,0.03); }
.my-ai__guide-tab[aria-selected="true"] {
  background: rgba(34,211,238,0.10); color: #22d3ee;
  box-shadow: inset 0 0 0 1px rgba(34,211,238,0.20);
}
.my-ai__guide-tab svg { width: 14px; height: 14px; }

.my-ai__guide-panel { padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; }

.my-ai__lede { font-size: 13.5px; color: var(--my-ai-text-muted); line-height: 1.6; }
.my-ai__lede strong { color: var(--my-ai-text); font-weight: 600; }
.my-ai__lede code,
.my-ai__step-hint code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; padding: 1px 6px; border-radius: 4px;
  background: rgba(34,211,238,0.08); color: #22d3ee;
}

.my-ai__steps { display: flex; flex-direction: column; gap: 18px; }
.my-ai__step { display: grid; grid-template-columns: 30px 1fr; gap: 14px; }
.my-ai__step-num {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34,211,238,0.10); color: #22d3ee;
  font-family: 'Orbitron', sans-serif;
  font-size: 12px; font-weight: 700;
  border: 1px solid rgba(34,211,238,0.25);
}
.my-ai__step-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.my-ai__step-title {
  font-size: 14px; font-weight: 600; color: var(--my-ai-text); line-height: 1.4;
}
.my-ai__step-title em { font-style: normal; color: #22d3ee; font-weight: 700; }
.my-ai__step-hint {
  font-size: 12.5px; color: var(--my-ai-text-muted); line-height: 1.55;
  word-break: break-word;
}

/* Code block */
.my-ai__code {
  position: relative; border-radius: 12px;
  background: var(--my-ai-bg-code);
  border: 1px solid var(--my-ai-border);
  overflow: hidden;
}
.my-ai__code-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 8px 14px;
  background: var(--dark, rgba(0,0,0,0.30)) var(--light, rgba(0,0,0,0.03));
  border-bottom: 1px solid var(--my-ai-border);
}
.my-ai__code-path {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--my-ai-text-muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.my-ai__code-path svg { width: 12px; height: 12px; color: var(--my-ai-text-dim); }
.my-ai__code-copy {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 6px;
  background: transparent;
  border: 1px solid var(--my-ai-border);
  color: var(--my-ai-text-muted);
  font-family: 'Orbitron', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; cursor: pointer; transition: all 0.2s ease;
}
.my-ai__code-copy:hover { color: #fcb300; border-color: rgba(252,179,0,0.25); }
.my-ai__code-copy[data-copied="true"] { color: #22c55e; border-color: rgba(34,197,94,0.25); }
.my-ai__code-copy svg { width: 11px; height: 11px; }
.my-ai__code pre {
  margin: 0; padding: 14px 16px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px; line-height: 1.55;
  color: var(--my-ai-text); overflow-x: auto;
  white-space: pre-wrap; word-break: break-all;
}

/* Verify card */
.my-ai__verify {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px; border-radius: 12px;
  background: rgba(34,197,94,0.05);
  border: 1px solid rgba(34,197,94,0.18);
}
.my-ai__verify svg { width: 18px; height: 18px; color: #22c55e; flex-shrink: 0; margin-top: 2px; }
.my-ai__verify-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: #22c55e;
}
.my-ai__verify-hint { font-size: 12.5px; color: var(--my-ai-text-muted); line-height: 1.55; }

/* Error message */
.my-ai__error {
  font-size: 12.5px; padding: 10px 12px; border-radius: 8px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.20);
  color: #ef4444;
}

/* ─── Responsive ───────────────────────────────────── */
@media (max-width: 600px) {
  /* Hide the "MCP ONLINE/OFFLINE" status pill on mobile — too cramped next
     to the title on a phone topbar. */
  .my-ai__status { display: none; }
  .my-ai__topbar { padding: 14px 16px; }
  .my-ai__title-main { font-size: 13px; }
  .my-ai__page { padding: 18px 16px 60px; }
  .my-ai__hero { padding: 20px 18px; gap: 18px; }
  .my-ai__hero-head { gap: 12px; }
  .my-ai__hero-crest { width: 46px; height: 46px; }
  .my-ai__hero-title { font-size: 18px; }
  .my-ai__url { flex-direction: column; }
  .my-ai__url-label {
    padding: 8px 14px; border-right: 0;
    border-bottom: 1px solid var(--my-ai-border);
  }
  .my-ai__url-copy {
    border-left: 0;
    border-top: 1px solid var(--my-ai-border);
    padding: 10px 14px;
  }
  .my-ai__guide-panel { padding: 18px 16px; }
  .my-ai__step { grid-template-columns: 24px 1fr; gap: 10px; }
  .my-ai__step-num { width: 24px; height: 24px; font-size: 11px; }
}


/* === src/features/notifications/components/notification_bell/style.css === */
.notification-bell {
    --bell-bg: var(--dark, transparent) var(--light, transparent);
    --bell-hover: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.06));
    --badge-bg: #db2780;
    --badge-text: #ffffff;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 150ms ease;
}

/* Default (non-HUD) button look — AppLayout mounts NotificationBell with
   no extra class, so this rule paints the standalone circular bell.
   When the bell is embedded in the space arena HUD via `class: "hud-btn"`,
   we opt out so `.hud-btn`'s rounded-square background / border / glow
   own the visual — otherwise this block silently overrode `hud-btn`
   (equal specificity, later cascade) and the bell rendered borderless
   while its siblings kept their panels. */
.notification-bell:not(.hud-btn) {
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background: var(--bell-bg);
    border: 0;
}
.notification-bell:not(.hud-btn):hover {
    background: var(--bell-hover);
}

.notification-bell__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9999px;
    background: var(--badge-bg);
    color: var(--badge-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}


/* === src/features/notifications/components/notification_panel/notification_item/style.css === */
.notification-item {
    --item-bg: var(--dark, transparent) var(--light, transparent);
    --item-hover: var(--dark, rgba(255, 255, 255, 0.04)) var(--light, rgba(0, 0, 0, 0.04));
    --item-unread: var(--dark, rgba(252, 179, 0, 0.1)) var(--light, rgba(252, 179, 0, 0.1));
    --item-title: var(--dark, #f0f0f5) var(--light, #12121a);
    --item-body: var(--dark, #8888a8) var(--light, #6b6b80);
    --item-dot: #fcb300;

    display: flex;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: var(--item-bg);
    border: 0;
    border-bottom: 1px solid var(--dark, rgba(255, 255, 255, 0.05)) var(--light, rgba(0, 0, 0, 0.05));
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease;
    color: var(--item-title);
}
.notification-item:hover {
    background: var(--item-hover);
}
.notification-item[aria-relevant="true"] {
    background: var(--item-unread);
}
.notification-item[aria-relevant="false"] {
    opacity: 0.7;
}

.notification-item__avatar {
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    flex-shrink: 0;
    background: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.06));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.notification-item__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notification-item__body {
    flex: 1;
    min-width: 0;
}
.notification-item__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--item-title);
}
.notification-item__preview {
    margin-top: 2px;
    font-size: 13px;
    color: var(--item-body);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notification-item__time {
    margin-top: 4px;
    font-size: 11px;
    color: var(--item-body);
}
.notification-item__dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: var(--item-dot);
    flex-shrink: 0;
    align-self: center;
}


/* === src/features/notifications/components/notification_panel/style.css === */
.notification-panel {
    --panel-bg: var(--dark, #0c0c1a) var(--light, #ffffff);
    --panel-border: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
    --panel-title: var(--dark, #f0f0f5) var(--light, #12121a);
    --panel-shadow: var(--dark, rgba(0, 0, 0, 0.4)) var(--light, rgba(0, 0, 0, 0.08));
    --panel-accent: #fcb300;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 92vw;
    background: var(--panel-bg);
    border-left: 1px solid var(--panel-border);
    box-shadow: -8px 0 32px var(--panel-shadow);
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    z-index: 110;
}
.notification-panel[data-open="true"] {
    transform: translateX(0);
}

.notification-panel__header {
    display: flex;
    align-items: center;
    gap: 12px;
    /* The panel is `position: fixed; top: 0`, so it ignores the root
       safe-area padding and would otherwise render under the device status
       bar (clock/notch). Add the top inset so the header sits below it. */
    padding: calc(16px + env(safe-area-inset-top)) 20px 16px;
    border-bottom: 1px solid var(--panel-border);
}
.notification-panel__title {
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--panel-title);
}
.notification-panel__mark-all {
    background: transparent;
    border: 0;
    color: var(--panel-accent);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
}
.notification-panel__mark-all:hover {
    background: var(--dark, rgba(252, 179, 0, 0.08)) var(--light, rgba(252, 179, 0, 0.12));
    border-radius: 4px;
}
.notification-panel__close {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 6px;
    border-radius: 9999px;
}

.notification-panel__list {
    flex: 1;
    overflow-y: auto;
    /* Keep the last item clear of the device's bottom nav bar / home
       indicator (panel is fixed to bottom:0, ignoring root safe-area). */
    padding-bottom: env(safe-area-inset-bottom);
}
.notification-panel__empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--dark, #8888a8) var(--light, #6b6b80);
    font-size: 14px;
    font-style: italic;
}


/* === src/features/posts/views/post_detail/style.css === */
.post-arena {
  --bg-void: var(--dark, #06060e) var(--light, #f5f5fa);
  --bg-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --bg-glass-hover: var(--dark, rgba(20, 20, 40, 0.80)) var(--light, rgba(255, 255, 255, 0.9));
  --border-subtle: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --border-strong: var(--dark, rgba(255, 255, 255, 0.12)) var(--light, rgba(0, 0, 0, 0.14));
  --pd-text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --pd-text-muted: var(--dark, #8888a8) var(--light, #55556a);
  --pd-text-dim: var(--dark, #55556a) var(--light, #8a8aa0);
  --accent-gold: #fcb300;
  --accent-teal: #6eedd8;
  --accent-coral: #ef4444;
  --accent-green: #22c55e;
  --accent-violet: #818cf8;

  position: relative;
  /* This arena owns its own scroll container so the sticky topbar pins.
     `height: 100%` only works when an ancestor has a definite height — on
     mobile `body` is content-driven (overflow:auto), so `100%` resolved to
     the *content* height and the arena grew instead of scrolling, which made
     the document body scroll and the sticky `상세` topbar drift away. A
     viewport-relative height (minus safe-area + keyboard insets) is always
     definite, so the arena scrolls internally and the header stays pinned. */
  height: 100vh;
  height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--kb-inset, 0px));
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: var(--bg-void);
  color: var(--pd-text-primary);
}
.post-arena::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 15%, rgba(252, 179, 0, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 85%, rgba(110, 237, 216, 0.03) 0%, transparent 60%);
  z-index: -1;
  pointer-events: none;
}

.post-arena .arena-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  background: var(--dark, rgba(6, 6, 14, 0.80)) var(--light, rgba(255, 255, 255, 0.85));
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}
.post-arena .arena-topbar__left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.post-arena .back-btn {
  width: 38px;
  height: 38px;
  /* Fixed-size flex child: without this the default `flex-shrink: 1` lets a
     long sibling title squash the square button into an oval. */
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
  color: var(--pd-text-muted);
}
.post-arena .back-btn:hover {
  border-color: rgba(252, 179, 0, 0.25);
  background: var(--bg-glass-hover);
  color: var(--accent-gold);
}
.post-arena .back-btn svg {
  width: 18px;
  height: 18px;
}

.post-arena .topbar-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.post-arena .topbar-title__eyebrow {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pd-text-dim);
}
.post-arena .topbar-title__main {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pd-text-primary);
}

.post-arena .arena-topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.post-arena .topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-glass);
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--pd-text-muted);
  cursor: pointer;
  transition: all 0.25s ease;
}
.post-arena .topbar-btn:hover {
  border-color: rgba(252, 179, 0, 0.25);
  color: var(--accent-gold);
  background: var(--bg-glass-hover);
}
.post-arena .topbar-btn svg {
  width: 13px;
  height: 13px;
}

.post-arena .page {
  position: relative;
  z-index: 1;
  flex: 1;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  padding: 32px 28px 60px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.post-hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.post-hero__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--pd-text-muted);
}
.post-hero__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-teal));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 13px;
  font-weight: 800;
  color: #0a0a0a;
  overflow: hidden;
}
.post-hero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-hero__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.post-hero__author-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--pd-text-primary);
}
.post-hero__author-time {
  font-size: 12px;
  color: var(--pd-text-dim);
}
.post-hero__title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--pd-text-primary);
}
.post-hero__body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--pd-text-primary);
}
.post-hero__body p {
  margin-bottom: 16px;
}

.post-hero__image {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  aspect-ratio: 16/9;
}
.post-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Attachment links rendered between the post body and the action bar.
   Populated by the sub-team docs dual-write path; styled to read as a
   downloadable file list rather than an inline link. */
.post-hero__attachments {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 16px 0 4px;
}
.post-hero__attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--dark, rgba(255, 255, 255, 0.03)) var(--light, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 13px;
  transition: border-color 0.15s, background 0.15s;
}
.post-hero__attachment:hover {
  border-color: var(--accent-gold);
  background: var(--dark, rgba(252, 179, 0, 0.06)) var(--light, rgba(252, 179, 0, 0.08));
}
.post-hero__attachment svg {
  color: var(--text-muted);
  flex-shrink: 0;
}
.post-hero__attachment-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.post-hero__attachment-size {
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.post-hero__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.post-hero .action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--pd-text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.post-hero .action-btn:hover {
  border-color: rgba(252, 179, 0, 0.22);
  color: var(--accent-gold);
}
.post-hero .action-btn svg {
  width: 14px;
  height: 14px;
}
.post-hero .action-btn strong {
  color: var(--pd-text-primary);
  font-weight: 700;
}

.syn {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.syn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.syn-head__title {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pd-text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
.syn-head__title::before {
  content: '';
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-gold), transparent);
}
.syn-head__summary {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--pd-text-dim);
}
.syn-head__summary strong {
  color: var(--accent-teal);
  font-weight: 700;
}

.syn-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 18px;
  border-radius: 16px;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
}
.syn-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px;
  border-left: 1px solid var(--border-subtle);
}
.syn-stat:first-child {
  border-left: none;
}
.syn-stat__value {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--pd-text-primary);
}
.syn-stat__value--accent {
  color: var(--accent-teal);
}
.syn-stat__label {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pd-text-dim);
}

.syn-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.syn-card {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  overflow: hidden;
  transition: all 0.25s ease;
}
.syn-card:hover {
  border-color: var(--border-strong);
}
.syn-card[data-status="success"] {
  border-color: rgba(34, 197, 94, 0.16);
}
.syn-card[data-status="pending"] {
  border-color: rgba(252, 179, 0, 0.16);
}
.syn-card[data-status="failed"] {
  border-color: rgba(239, 68, 68, 0.18);
}

.syn-card__body {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  padding: 14px 16px;
  align-items: center;
}

.syn-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.syn-logo--bsky {
  background: linear-gradient(135deg, #0a85ff, #1da1f2);
}
.syn-logo--linkedin {
  background: #0a66c2;
}
.syn-logo--threads {
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.syn-logo svg {
  width: 18px;
  height: 18px;
  color: #fff;
}

.syn-card__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.syn-card__name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.syn-card__name {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--pd-text-primary);
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 100px;
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.status-pill::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.status-pill--success {
  background: rgba(34, 197, 94, 0.08);
  color: var(--accent-green);
  border-color: rgba(34, 197, 94, 0.20);
}
.status-pill--success::before {
  background: var(--accent-green);
  box-shadow: 0 0 6px var(--accent-green);
  animation: pulse-dot 2s ease-in-out infinite;
}
.status-pill--pending {
  background: rgba(252, 179, 0, 0.08);
  color: var(--accent-gold);
  border-color: rgba(252, 179, 0, 0.20);
}
.status-pill--pending::before {
  background: var(--accent-gold);
  animation: pulse-dot 1.2s ease-in-out infinite;
}
.status-pill--failed {
  background: rgba(239, 68, 68, 0.08);
  color: var(--accent-coral);
  border-color: rgba(239, 68, 68, 0.20);
}
.status-pill--failed::before {
  background: var(--accent-coral);
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.syn-card__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--pd-text-muted);
}
.syn-card__sub-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.syn-card__sub-item svg {
  width: 12px;
  height: 12px;
  color: var(--pd-text-dim);
}
.syn-card__sub-item strong {
  color: var(--pd-text-primary);
  font-weight: 600;
}
.syn-card__err {
  font-size: 12px;
  color: var(--accent-coral);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.syn-card__err svg {
  width: 12px;
  height: 12px;
}

.syn-card__actions {
  display: flex;
  gap: 6px;
}
.mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--pd-text-muted);
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.mini-btn:hover {
  border-color: rgba(252, 179, 0, 0.22);
  color: var(--accent-gold);
}
.mini-btn svg {
  width: 10px;
  height: 10px;
}
.mini-btn--retry {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.20);
  color: var(--accent-coral);
}
.mini-btn--retry:hover {
  background: rgba(239, 68, 68, 0.12);
  color: var(--accent-coral);
  border-color: rgba(239, 68, 68, 0.30);
}

.syn-card__engagement {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.18);
  flex-wrap: wrap;
}
.engage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--pd-text-muted);
}
.engage svg {
  width: 12px;
  height: 12px;
  color: var(--pd-text-dim);
}
.engage strong {
  color: var(--pd-text-primary);
  font-weight: 700;
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 12.5px;
}

.post-arena .action-btn[data-active="true"] {
  border-color: rgba(239, 68, 68, 0.35);
  color: var(--accent-coral);
}
.post-arena .action-btn[data-active="true"] svg {
  color: var(--accent-coral);
}
.post-arena .action-btn[data-active="true"] strong {
  color: var(--accent-coral);
}

.pd-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--dark, rgba(0, 0, 0, 0.5)) var(--light, rgba(0, 0, 0, 0.25));
  backdrop-filter: blur(4px);
  z-index: 40;
  animation: pd-fade-in 0.2s ease;
}

.pd-drawer-wrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100vw);
  z-index: 41;
  display: flex;
  animation: pd-slide-right 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Comments Panel (ported from space-discussion arena) ─────── */
.comments-panel {
  --surface: var(--dark, #0c0c1a) var(--light, #ffffff);
  --surface-raised: var(--dark, rgba(255, 255, 255, 0.03)) var(--light, rgba(0, 0, 0, 0.03));
  --discuss-color: #22d3ee;
  --discuss-glow: rgba(34, 211, 238, 0.12);
  --discuss-bg: rgba(34, 211, 238, 0.06);
  --discuss-border: rgba(34, 211, 238, 0.15);

  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border-subtle);
  overflow: hidden;
  color: var(--pd-text-primary);
}

/* The post-detail comments sheet reuses the `.comments-panel` class, which the
   space-discussion arena (≈line 26004, inside a `max-width:720px` block) also
   styles as a translateY-collapsed bottom sheet:
   `position: fixed; transform: translateY(calc(100% - 64px))`. That GLOBAL
   rule leaked onto this sheet — it pushed the panel mostly below the viewport
   (only a ~64px "Comments" peek showed, the comment input fell off-screen) and
   its collapse/expand is driven by the discussion arena's JS, not the
   post-detail drag handler, so dragging up did nothing and snapped back.
   The `#post-comments-sheet` id (higher specificity than the leaked class)
   resets it so `.pd-drawer-wrap` owns the layout; `padding-bottom` keeps the
   content above the home indicator. The drag JS still sets an inline
   `transform` while dragging, which overrides this. */
#post-comments-sheet {
  position: relative;
  transform: none;
  padding-bottom: env(safe-area-inset-bottom);
}

.comments-panel .sheet-handle { display: none; }
.comments-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.comments-panel__title {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pd-text-muted);
}
.comments-panel__count {
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--discuss-bg);
  color: var(--discuss-color);
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--discuss-border);
}

.comment-input {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.comment-input__wrapper { display: flex; gap: 10px; align-items: flex-start; }
.comment-input__body { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.comment-input__textarea {
  width: 100%;
  min-height: 48px;
  max-height: 120px;
  resize: none;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--surface-raised);
  color: var(--pd-text-primary);
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.25s;
}
.comment-input__textarea:focus { border-color: var(--discuss-border); }
.comment-input__textarea::placeholder { color: var(--pd-text-dim); }
.comment-input__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.comment-input__submit {
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, var(--discuss-color), #06b6d4);
  color: #0a0a0a;
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
}
.comment-input__submit:hover:not(:disabled) {
  box-shadow: 0 2px 16px var(--discuss-glow);
  transform: translateY(-1px);
}
.comment-input__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.comments-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  scrollbar-width: thin;
}
.comments-scroll::-webkit-scrollbar { width: 4px; }
.comments-scroll::-webkit-scrollbar-thumb {
  background: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.06));
  border-radius: 2px;
}

.comment-list { display: flex; flex-direction: column; gap: 2px; }
.comment-entry { display: contents; }

.comment-item {
  display: flex;
  gap: 10px;
  padding: 12px 20px;
  transition: background 0.2s ease;
}
.comment-item:hover { background: var(--surface-raised); }
.comment-item__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
  margin-top: 2px;
}
.comment-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.comment-item__top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.comment-item__name { font-size: 13px; font-weight: 600; color: var(--pd-text-primary); }
.comment-item__time { font-size: 11px; color: var(--pd-text-dim); }
.comment-item__text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--pd-text-primary);
  word-break: break-word;
}
.comment-item__mention {
  color: var(--discuss-color);
  font-weight: 600;
}
.comment-item__actions { display: flex; align-items: center; gap: 8px; margin-top: 2px; }

.comment-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  color: var(--pd-text-dim);
}
.comment-action:hover {
  background: var(--surface-raised);
  color: var(--pd-text-muted);
}
.comment-action svg { width: 13px; height: 13px; }
.comment-action--liked { color: #f43f5e; }
.comment-action--liked svg { fill: #f43f5e; stroke: #f43f5e; }
.comment-action--reply:hover { color: var(--discuss-color); }

.comment-replies {
  margin-left: 58px;
  padding-left: 14px;
  border-left: 2px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.comment-replies .comment-item {
  padding: 10px 16px 10px 12px;
}
.comment-replies .comment-item__avatar {
  width: 22px;
  height: 22px;
}
.comment-replies .comment-item__name {
  font-size: 12px;
}
.comment-replies .comment-item__text {
  font-size: 12px;
}

.reply-toggle {
  margin-left: 58px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--discuss-color);
  cursor: pointer;
  background: none;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: opacity 0.2s;
}
.reply-toggle:hover { opacity: 0.7; }
.reply-toggle svg { width: 12px; height: 12px; }

.reply-input {
  margin: 2px 20px 8px 58px;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}
.reply-input:focus-within { border-color: var(--discuss-border); }
.reply-input > .relative { flex: 1; min-width: 0; }
.reply-input__field {
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--pd-text-primary);
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  outline: none;
}
.reply-input__field::placeholder { color: var(--pd-text-dim); }
.reply-input__send {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: var(--discuss-color);
  color: #0a0a0a;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.reply-input__send:hover { opacity: 0.85; }
.reply-input__send svg { width: 13px; height: 13px; }

@keyframes pd-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pd-slide-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes pd-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (max-width: 720px) {
  .pd-drawer-wrap {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-height: 80vh;
    animation: pd-slide-up 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .comments-panel {
    border-left: none;
    border-top: 1px solid var(--border-subtle);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -8px 32px var(--dark, rgba(0, 0, 0, 0.4)) var(--light, rgba(0, 0, 0, 0.08));
    max-height: 85vh;
    height: auto;
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    touch-action: none;
  }
  .comments-panel.dragging {
    transition: none;
  }
  .comments-panel .sheet-handle {
    cursor: grab;
    /* Stop the browser from claiming this region for native scrolling —
       without this `touch-action: none`, the first touchmove below kicks
       off a scroll and our `preventDefault()` call logs
       "Ignored attempt to cancel a touchmove event with cancelable=false". */
    touch-action: none;
  }
  .comments-panel .sheet-handle:active {
    cursor: grabbing;
  }
  .pd-drawer-wrap {
    max-height: none;
  }
  .comments-panel .sheet-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px 8px;
    flex-shrink: 0;
    user-select: none;
  }
  .comments-panel .sheet-handle__bar {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--dark, rgba(255, 255, 255, 0.15)) var(--light, rgba(0, 0, 0, 0.15));
    margin-bottom: 8px;
  }
  .comments-panel .sheet-handle__row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .comments-panel .sheet-handle__left {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .comments-panel .sheet-handle__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--pd-text-primary);
  }
  .comments-panel .sheet-handle__count {
    padding: 2px 8px;
    border-radius: 100px;
    background: var(--discuss-bg);
    color: var(--discuss-color);
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--discuss-border);
  }
  .comments-panel .sheet-handle__chevron {
    width: 18px;
    height: 18px;
    color: var(--pd-text-muted);
  }
  .comments-panel__header { display: none; }

  .post-hero__title { font-size: 28px; }
  .syn-stats { grid-template-columns: repeat(3, 1fr); padding: 14px; }
  .syn-stat__value { font-size: 18px; }
  .syn-card__body { grid-template-columns: auto 1fr; padding: 14px; }
  .syn-card__actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 500px) {
  .post-arena .arena-topbar { padding: 12px 14px; }
  .post-arena .topbar-title__eyebrow { display: none; }
  .post-arena .topbar-title__main { font-size: 13px; }
  .post-arena .page { padding: 22px 14px 60px; gap: 22px; }
  .post-hero__title { font-size: 24px; }
  .post-hero__body { font-size: 15px; }
  .syn-stats { grid-template-columns: 1fr 1fr; gap: 6px; }
  .syn-stat:nth-child(3) { border-left: none; }
}


/* === src/features/posts/views/post_edit/style.css === */
/* ─── Post Composer — Arena Base ────────────────── */

.composer-arena {
  --bg-void: var(--dark, #06060e) var(--light, #f4f3ef);
  --bg-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --bg-glass-hover: var(--dark, rgba(20, 20, 40, 0.80)) var(--light, rgba(255, 255, 255, 0.88));
  --bg-input: var(--dark, rgba(255, 255, 255, 0.025)) var(--light, rgba(0, 0, 0, 0.02));
  --bg-input-focus: var(--dark, rgba(255, 255, 255, 0.04)) var(--light, rgba(0, 0, 0, 0.04));
  --border-subtle: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --border-strong: var(--dark, rgba(255, 255, 255, 0.12)) var(--light, rgba(0, 0, 0, 0.14));
  --text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --text-dim: var(--dark, #55556a) var(--light, #9999aa);
  --accent-gold: #fcb300;
  --accent-teal: #6eedd8;
  --accent-coral: #ef4444;
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Outfit', sans-serif;
}

.composer-arena {
  position: relative;
  /* Use dynamic viewport height so the layout doesn't extend below
     the visible area when the mobile browser's URL bar is showing.
     Fallback to 100vh for older browsers.
     Subtract the safe-area insets: the arena sits inside `:root`'s
     safe-area padding (pushed down by `safe-area-inset-top`), so a full
     `100dvh` overflowed the bottom by that amount and buried the static
     `.bottom-bar` (Publish / Options) under the home indicator. Trimming
     both insets keeps the whole arena — topbar to bottom-bar — inside the
     safe area (0 on desktop). */
  height: 100vh;
  /* `--kb-inset` is the soft-keyboard height, set from JS via the
     `visualViewport` API (the Android WebView only shrinks the *visual*
     viewport when the keyboard opens — neither `adjustResize` nor
     `interactive-widget` shrinks `dvh` here). Subtracting it collapses the
     composer to the area above the keyboard so the bottom toolbar / publish
     bar stay reachable. 0 when the keyboard is closed. */
  height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--kb-inset, 0px));
  /* Follow the visual viewport down when the WebView pans it. Tapping low in
     the body puts the caret where the keyboard will be, so the WebView scrolls
     the visual viewport to reveal it; `--kb-inset` then shrinks the composer
     and the caret moves up, but the pan is never undone. Measured on a 640px
     screen: keyboard 299, composer shrunk to 24..341 as intended, yet
     `visualViewport.offsetTop` stayed 192 — so on screen the composer sat at
     -168..149, title and body above the top edge, the publish bar floating
     mid-screen and nothing between it and the keyboard. Offsetting by the
     pan puts it back at 24..341. `top` (relative offset), not `transform`: a
     transform — even of 0px — makes this box the containing block for its
     fixed descendants (the mobile options sheet, `::before`), which would move
     them with the keyboard closed too. 0 whenever nothing is panned. */
  top: var(--vv-offset-top, 0px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
}

.composer-arena { isolation: isolate; }
.composer-arena::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(252, 179, 0, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 120%, rgba(110, 237, 216, 0.03) 0%, transparent 50%);
  z-index: -1;
  pointer-events: none;
}

/* ─── Top bar ────────────────────────────────────── */
.arena-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  background: var(--dark, rgba(6, 6, 14, 0.80)) var(--light, rgba(244, 243, 239, 0.86));
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}
.arena-topbar__left { display: flex; align-items: center; gap: 14px; }
.back-btn {
  width: 38px;
  height: 38px;
  /* Fixed-size flex child: without this the default `flex-shrink: 1` lets a
     long sibling title squash the square button into an oval. */
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
  color: var(--text-muted);
}
.back-btn:hover { border-color: rgba(252, 179, 0, 0.25); background: var(--bg-glass-hover); color: var(--accent-gold); }
.back-btn svg { width: 18px; height: 18px; }

.topbar-title { display: flex; flex-direction: column; gap: 2px; }
.topbar-title__eyebrow {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.topbar-title__main {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.arena-topbar__right { display: flex; align-items: center; gap: 10px; }
.autosave {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(110, 237, 216, 0.06);
  border: 1px solid rgba(110, 237, 216, 0.14);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-teal);
  margin-right: 4px;
}
.autosave::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-teal);
  box-shadow: 0 0 6px var(--accent-teal);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-glass);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.25s ease;
}
.topbar-btn:hover { border-color: rgba(252, 179, 0, 0.25); color: var(--accent-gold); background: var(--bg-glass-hover); }
.topbar-btn svg { width: 13px; height: 13px; }
.topbar-btn--primary {
  background: linear-gradient(135deg, var(--accent-gold), #e5a200);
  color: #0a0a0a;
  border-color: transparent;
  box-shadow: 0 2px 14px rgba(252, 179, 0, 0.20);
}
.topbar-btn--primary:hover {
  background: linear-gradient(135deg, #ffd24a, var(--accent-gold));
  border-color: transparent;
  color: #0a0a0a;
  box-shadow: 0 4px 22px rgba(252, 179, 0, 0.40);
  transform: translateY(-1px);
}
.topbar-btn--primary[data-space="true"] {
  background: linear-gradient(135deg, var(--accent-teal), #3acab2);
  box-shadow: 0 2px 14px rgba(110, 237, 216, 0.25);
}
.topbar-btn--primary[data-space="true"]:hover {
  box-shadow: 0 4px 22px rgba(110, 237, 216, 0.40);
}

/* ─── Layout ─────────────────────────────────────── */
.composer-page {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  padding: 32px 28px 100px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* ─── Composer (left/main) ───────────────────────── */
.composer { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Post-edit (.composer-arena) scoped override: drop the page max-width
   so the right side-panel sits at the viewport edge, and center the
   editor column inside its 1fr cell. Matches the reports-edit pattern
   (.reports-doc__inner). Sub-team broadcast/doc compose pages aren't
   wrapped in .composer-arena, so they keep the boxed 1280px layout. */
.composer-arena .composer-page {
  max-width: none;
  margin: 0;
  /* composer-page is now a flex item between the topbar and the
     in-flow bottom-bar (overridden below). It auto-fills the middle
     and no longer needs padding-bottom to dodge a fixed bottom-bar.
     `grid-template-rows: 1fr` forces the inner grid track to stretch
     so the composer (and editor inside it) reach the bottom edge. */
  min-height: 0;
  overflow: hidden;
  grid-template-rows: 1fr;
  padding-top: 22px;
  padding-bottom: 8px;
}
/* Pull the publish bar out of `position: fixed` and into the
   composer-arena flex column. Now composer-page naturally ends at
   the top edge of the publish bar — no estimated clearance, no
   per-breakpoint padding-bottom hacks. */
.composer-arena > .bottom-bar {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  flex-shrink: 0;
}
.composer-arena .composer {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  min-height: 0;
  height: 100%;
}

/* ─── Editor → reports-edit style (post composer only) ───────
   The shared .ratel-editor component normally has a sticky top
   toolbar. Inside .composer-arena we re-layer it as a floating
   pill pinned just above the publish bar, matching the
   reports-edit.html bottom format toolbar. Selection-triggered
   .re-bubble continues to work via the editor's own JS. */
.composer-arena .ratel-editor {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  flex: 1;
  min-height: 0;
}
.composer-arena .ratel-editor:focus-within {
  background: transparent;
  border: none;
}
.composer-arena .ratel-editor .re-toolbar {
  /* Live inside the editor flex column as the LAST item (order: 5)
     so the toolbar pill sits below the writing area instead of
     floating over it. Content keeps its own bottom edge. */
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
  order: 5;
  align-self: center;
  flex-shrink: 0;
  /* 1000px is wide enough to fit all 8 button groups on a single row at
     desktop sizes (~960px natural width). Falls back to wrap if the
     parent column ever gets narrower. */
  width: min(1000px, 100%);
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: 4px;
  margin: 8px auto 0;
  padding: 8px 10px;
  gap: 4px;
  border: 1px solid var(--re-border-strong);
  border-radius: 14px;
  background: var(--re-toolbar-bg);
  backdrop-filter: blur(20px);
}
/* Strip the inter-group divider in this floating context — a leftover
   border-left on the first group of a wrapped row creates a stray
   vertical line. The flex gap already separates groups visually. */
.composer-arena .ratel-editor .re-toolbar__group + .re-toolbar__group {
  border-left: none;
  margin-left: 0;
  padding-left: 4px;
}
.composer-arena .ratel-editor .re-content {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  order: 1;
  padding: 8px 0 12px;
}
/* The post composer's own .bottom-bar already shows word/char counts,
   so hide the editor's built-in statusbar to keep the surface clean. */
.composer-arena .ratel-editor .re-statusbar {
  display: none;
}
/* Toolbar sits at the bottom of the editor card → Paragraph/H1/.../Code
   dropdown must open UPWARD so it doesn't clip outside the viewport. */
.composer-arena .ratel-editor .re-block__menu {
  top: auto;
  bottom: calc(100% + 6px);
}
@media (max-width: 980px) {
  /* In-flow bottom-bar handles its own height — composer-page just
     needs minimal breathing room above it on mobile. */
  .composer-arena .composer-page {
    padding-top: 14px;
    padding-bottom: 6px;
  }
}

/* Type segmented selector */
.type-segmented {
  display: inline-flex;
  align-self: flex-start;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 4px;
  gap: 2px;
}
.type-seg {
  position: relative;
  padding: 9px 18px;
  border-radius: 9px;
  background: transparent;
  border: none;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.type-seg svg { width: 13px; height: 13px; }
.type-seg:hover { color: var(--text-primary); }
.type-seg[aria-selected="true"] {
  background: rgba(252, 179, 0, 0.10);
  color: var(--accent-gold);
  box-shadow: inset 0 0 0 1px rgba(252, 179, 0, 0.20);
}
.type-seg[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.type-seg[aria-disabled="true"]:hover { color: var(--text-muted); }
.type-seg__soon {
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 2px 6px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  text-transform: uppercase;
  margin-left: 4px;
}

/* Title input */
.title-input {
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 34px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.title-input::placeholder { color: var(--text-dim); font-weight: 600; }
.title-divider {
  height: 1px;
  background: linear-gradient(90deg, var(--border-subtle), transparent);
  margin: 0 0 4px;
}

/* Toolbar */
.composer-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  position: sticky;
  top: 84px;
  z-index: 10;
}
.composer-toolbar__group { display: flex; gap: 2px; }
.composer-toolbar__divider { width: 1px; height: 18px; background: var(--border-subtle); margin: 0 4px; }
.tool-btn {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s ease;
  padding: 0;
}
.tool-btn svg { width: 15px; height: 15px; }
.tool-btn:hover { background: rgba(255, 255, 255, 0.04); color: var(--text-primary); }
.tool-btn[aria-pressed="true"] { background: rgba(252, 179, 0, 0.10); color: var(--accent-gold); }
.composer-toolbar__spacer { flex: 1; }
.composer-toolbar__count {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  padding: 0 8px;
}

/* Body editor */
.body-editor {
  min-height: 340px;
  padding: 22px;
  border-radius: 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-primary);
  outline: none;
  transition: all 0.25s ease;
}
.body-editor:focus,
.body-editor:hover,
.body-editor:focus-within {
  background: var(--bg-input-focus);
  border-color: rgba(252, 179, 0, 0.18);
}
.body-editor > tiptap-editor { width: 100%; }

/* Attachments strip */
.attachments { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.attachment {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.02);
}
.attachment img { width: 100%; height: 100%; object-fit: cover; }
.attachment__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(6, 6, 14, 0.85);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-primary);
  padding: 0;
  opacity: 0;
  transition: opacity 0.2s;
}
.attachment:hover .attachment__remove { opacity: 1; }
.attachment__remove svg { width: 10px; height: 10px; }
.attachment-add {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  border: 1px dashed var(--border-strong);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s ease;
}
.attachment-add:hover { border-color: rgba(252, 179, 0, 0.30); color: var(--accent-gold); }
.attachment-add svg { width: 18px; height: 18px; }
.attachment-add span {
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* ─── Side panel ─────────────────────────────────── */
.side-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
  position: sticky;
  top: 84px;
  /* When sticky, the panel pins to the viewport. If its content (Posting As
     + Visibility + Discard + cross-post sidebar) exceeds the viewport
     height, the lower portion would never be reachable — sticky doesn't
     scroll with the page. Bound the panel and let it scroll internally.
     Subtract: 84px top sticky offset + ~72px bottom-bar (fixed footer with
     Publish button) + 16px breathing room. */
  max-height: calc(100vh - 172px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.side-panel__head { display: none; }
.side-panel__handle { display: none; }

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  z-index: 49;
  transition: background 0.3s ease;
  display: none;
}
.drawer-backdrop[data-open="true"] { background: rgba(0, 0, 0, 0.55); pointer-events: auto; }

.side-card {
  position: relative;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.side-card:has(.as-dropdown[data-open="true"]) { z-index: 40; }
.side-card__title {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}
.side-card__title svg { width: 13px; height: 13px; color: var(--accent-gold); }

/* Posting-as dropdown */
.as-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
  background: #1a1a2a;
}
.as-avatar--team { border-radius: 8px; }
.as-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; }
.as-text__name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-text__meta { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.as-dropdown { position: relative; }
.as-dropdown__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 11px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-body);
}
.as-dropdown__trigger:hover { border-color: rgba(252, 179, 0, 0.20); background: var(--bg-input-focus); }
.as-dropdown[data-open="true"] .as-dropdown__trigger { border-color: rgba(252, 179, 0, 0.30); background: var(--bg-input-focus); }
.as-dropdown__chevron { color: var(--text-dim); flex-shrink: 0; transition: transform 0.2s ease; }
.as-dropdown__chevron svg { width: 14px; height: 14px; display: block; }
.as-dropdown[data-open="true"] .as-dropdown__chevron { transform: rotate(180deg); color: var(--accent-gold); }

.as-dropdown__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  background: var(--dark, rgba(10, 10, 22, 0.96)) var(--light, rgba(255, 255, 255, 0.98));
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  max-height: 280px;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  overscroll-behavior: contain;
}
.as-dropdown[data-open="true"] .as-dropdown__menu { display: flex; animation: as-menu-in 0.18s ease-out; }
@keyframes as-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.as-dropdown__group-label {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 8px 10px 4px;
}

.as-dropdown__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 9px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
  font-family: var(--font-body);
  width: 100%;
}
.as-dropdown__item:hover { background: rgba(255, 255, 255, 0.04); }
.as-dropdown__item[aria-selected="true"] { background: rgba(252, 179, 0, 0.08); }
.as-dropdown__check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.as-dropdown__check svg { width: 10px; height: 10px; color: #0a0a0a; opacity: 0; }
.as-dropdown__item[aria-selected="true"] .as-dropdown__check { background: var(--accent-gold); border-color: var(--accent-gold); }
.as-dropdown__item[aria-selected="true"] .as-dropdown__check svg { opacity: 1; }

.as-dropdown__menu::-webkit-scrollbar { width: 4px; }
.as-dropdown__menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 2px; }

/* Enable Space toggle card */
.space-toggle__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.space-toggle__hint { font-size: 11.5px; line-height: 1.55; color: var(--text-dim); }
.space-toggle__active {
  display: none;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(110, 237, 216, 0.05);
  border: 1px solid rgba(110, 237, 216, 0.15);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--accent-teal);
}
.space-toggle__active svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; }
.space-toggle[data-on="true"] .space-toggle__active { display: flex; }
.space-toggle[data-on="true"] {
  border-color: rgba(110, 237, 216, 0.20);
  box-shadow: 0 0 24px rgba(110, 237, 216, 0.06);
}

/* Tag input */
.tag-input {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  min-height: 42px;
  align-items: center;
  cursor: text;
  transition: all 0.2s ease;
}
.tag-input:focus-within { border-color: rgba(252, 179, 0, 0.25); background: var(--bg-input-focus); }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 10px;
  border-radius: 6px;
  background: rgba(110, 237, 216, 0.08);
  border: 1px solid rgba(110, 237, 216, 0.18);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-teal);
  letter-spacing: 0.02em;
}
.tag__x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: var(--accent-teal);
  cursor: pointer;
  padding: 0;
  opacity: 0.6;
  transition: all 0.15s;
}
.tag__x:hover { opacity: 1; background: rgba(110, 237, 216, 0.15); }
.tag__x svg { width: 9px; height: 9px; }
.tag-input__field {
  flex: 1;
  min-width: 80px;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-primary);
  padding: 4px 0;
}
.tag-input__field::placeholder { color: var(--text-dim); }

/* Visibility toggle */
.vis-row { display: flex; gap: 6px; }
.vis-opt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.2s ease;
}
.vis-opt svg { width: 16px; height: 16px; color: var(--text-muted); transition: color 0.2s; }
.vis-opt span {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s;
}
.vis-opt:hover { border-color: rgba(252, 179, 0, 0.20); }
.vis-opt[aria-selected="true"] { background: rgba(252, 179, 0, 0.06); border-color: rgba(252, 179, 0, 0.25); }
.vis-opt[aria-selected="true"] svg,
.vis-opt[aria-selected="true"] span { color: var(--accent-gold); }

/* AC-20: notice shown when an already-published public post is being switched
   to Private. Lives next to the visibility toggle. */
.syndication-remain-notice {
  --srn-bg: var(--dark, rgba(252, 179, 0, 0.06)) var(--light, rgba(252, 179, 0, 0.10));
  --srn-border: var(--dark, rgba(252, 179, 0, 0.25)) var(--light, rgba(252, 179, 0, 0.30));
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--srn-bg);
  border: 1px solid var(--srn-border);
}
.syndication-remain-notice__title {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 4px;
}
.syndication-remain-notice__body {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

.switch {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.25s;
  flex-shrink: 0;
}
.switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: all 0.25s;
}
.switch[aria-checked="true"] { background: rgba(252, 179, 0, 0.30); border-color: rgba(252, 179, 0, 0.40); }
.switch[aria-checked="true"]::after { transform: translateX(14px); background: var(--accent-gold); }

/* Danger row */
.danger-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.12);
  color: var(--accent-coral);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}
.danger-row:hover { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.22); }
.danger-row svg { width: 13px; height: 13px; }

/* ─── Bottom bar ─────────────────────────────────── */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 28px;
  /* `position: fixed; bottom: 0` anchors to the viewport, and the WebView draws
     under the system bar (`enableEdgeToEdge()` + `viewport-fit=cover`), so the
     progress row and the attachment button sat behind Android's 3-button nav.
     Pad by the real inset instead of a guess — a gesture pill is thin, a
     3-button bar is not, and it is 0 on desktop. Same fix as the arena panels'
     `__body`. */
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  backdrop-filter: blur(20px);
}
.bottom-bar__left {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.bottom-bar__stat { display: inline-flex; align-items: center; gap: 6px; }
.bottom-bar__stat svg { width: 13px; height: 13px; }
.bottom-bar__stat strong { color: var(--text-primary); font-weight: 700; letter-spacing: 0.04em; }
.bottom-bar__right { display: flex; align-items: center; gap: 8px; }
.bottom-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}
.bottom-bar__btn:hover { border-color: rgba(252, 179, 0, 0.25); color: var(--accent-gold); }
.bottom-bar__btn svg { width: 12px; height: 12px; }
.bottom-bar__btn--mobile { display: none; }
.bottom-bar__btn--primary {
  background: linear-gradient(135deg, var(--accent-gold), #e5a200);
  color: #0a0a0a;
  border-color: transparent;
  box-shadow: 0 2px 14px rgba(252, 179, 0, 0.20);
}
.bottom-bar__btn--primary[data-space="true"] {
  background: linear-gradient(135deg, var(--accent-teal), #3acab2);
  color: #0a0a0a;
  border-color: transparent;
}

/* ─── Responsive ─────────────────────────────────── */
@media (max-width: 980px) {
  .composer-page { grid-template-columns: 1fr; padding: 20px 16px 110px; gap: 18px; }
  .composer-toolbar { position: static; }

  .side-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 50;
    background: var(--dark, rgba(8, 8, 18, 0.96)) var(--light, rgba(255, 255, 255, 0.98));
    backdrop-filter: blur(24px);
    border-top: 1px solid var(--border-subtle);
    border-radius: 20px 20px 0 0;
    /* Bottom padding clears the system navigation bar: the sheet is pinned to
       `bottom: 0` and the WebView draws under that bar, so with only 22px the
       last option (Threads "coming soon") stayed half behind Android's
       3-button nav even at full scroll. 0 inset on desktop. */
    padding: 0 16px calc(22px + env(safe-area-inset-bottom));
    gap: 12px;
    max-height: 85vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .side-panel[data-open="true"] { transform: translateY(0); }
  /* The sheet is its own scroller and this head sticks to its top. Two things
     let the options scrolled past show through it: the head stuck below the
     sheet's 8px top padding, leaving a strip above it, and its background
     faded to transparent over the lower 40%. The sheet's top padding now
     lives inside the head (14px + 8px, so nothing moves), and the head is
     opaque. */
  .side-panel__head {
    display: grid;
    grid-template-columns: 30px 1fr 30px;
    align-items: center;
    padding: 22px 4px 6px;
    position: sticky;
    top: 0;
    background: var(--dark, rgba(8, 8, 18, 1)) var(--light, rgba(255, 255, 255, 1));
    z-index: 1;
  }
  .side-panel__handle {
    display: block;
    position: absolute;
    left: 50%;
    top: 14px;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-strong);
  }
  .side-panel__title {
    grid-column: 2;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
  }
  .side-panel__close {
    grid-column: 3;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
  }
  .side-panel__close svg { width: 14px; height: 14px; }

  .drawer-backdrop { display: block; }

  .autosave { display: none; }
  .topbar-btn:not(.topbar-btn--primary) { display: none; }
  .topbar-btn--primary { display: none; }

  .bottom-bar__btn--desktop { display: none; }
  .bottom-bar__btn--mobile { display: inline-flex; }
  /* Options and Publish sit side by side, so they share one size. They used
     to differ (Options 8px/10px padding at 9px text below 500px, Publish
     10px/18px at 11px), which read as two unrelated buttons. */
  .bottom-bar__btn--mobile { padding: 10px 16px; font-size: 11px; }
}
@media (max-width: 500px) {
  .arena-topbar { padding: 12px 14px; }
  .topbar-title__eyebrow { display: none; }
  .topbar-title__main { font-size: 13px; }
  .title-input { font-size: 24px; padding: 10px 0; }
  .body-editor { padding: 16px; font-size: 14.5px; min-height: 260px; line-height: 1.65; }
  .composer-toolbar { flex-wrap: wrap; gap: 4px; padding: 6px; }
  .tool-btn { width: 30px; height: 30px; }
  .composer-toolbar__count { font-size: 9px; padding: 0 4px; margin-left: auto; }
  .composer { gap: 16px; }
  .type-segmented { padding: 3px; width: 100%; justify-content: space-between; }
  .type-seg { flex: 1; padding: 8px 10px; justify-content: center; font-size: 9px; }
  .type-seg__soon { display: none; }

  .bottom-bar { padding: 10px 14px; gap: 8px; }
  /* On mobile the stat row (words / read time / autosave) gets cut off
     and crowds the publish button. Hide the whole left cluster — the
     side panel still surfaces autosave state when needed. */
  .bottom-bar__left { display: none; }
  .bottom-bar__right { gap: 6px; margin-left: auto; }

  .side-card { padding: 14px; }
  .vis-row { gap: 5px; }
}

/* Soft keyboard open (`html.kb-open`, toggled by app.rs). The composer
   shrinks to the area above the keyboard, but every piece of chrome kept
   its size, so the writing area got whatever was left. Measured on a
   640px-tall phone: 317px above the keyboard, the publish bar alone took
   65 and the body scroller was 20px — less than one line, so the line being
   typed was never visible. While typing, drop what isn't used for typing:
   the post-type tabs and the bottom bar go, Publish moves into the top bar
   (so it stays one tap away), and the vertical spacing tightens. Options
   is back as soon as the keyboard closes. */
@media (max-width: 980px) {
  html.kb-open .composer-arena .type-segmented,
  html.kb-open .composer-arena > .bottom-bar {
    display: none;
  }
  html.kb-open .composer-arena .topbar-btn--primary {
    display: inline-flex;
    flex-shrink: 0;
    height: 34px;
    padding: 0 14px;
  }
  html.kb-open .composer-arena .arena-topbar {
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  /* With Publish added, the top bar holds back + title + autosave pill +
     Publish. At 360px the longest status ("저장되지 않은 변경사항") left the
     title too little room and "새 게시물" wrapped onto two lines. The title
     never wraps; the pill is compacted, and if a longer status or Publish
     label still doesn't fit, the pill truncates with an ellipsis instead. */
  html.kb-open .composer-arena .arena-topbar__left { flex-shrink: 0; }
  html.kb-open .composer-arena .topbar-title__main { white-space: nowrap; }
  html.kb-open .composer-arena .arena-topbar__right { min-width: 0; gap: 6px; }
  html.kb-open .composer-arena .autosave {
    display: block;
    min-width: 0;
    margin-right: 0;
    padding: 5px 8px;
    font-size: 10px;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html.kb-open .composer-arena .autosave::before {
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle;
  }
  html.kb-open .composer-arena .composer-page { padding-top: 8px; }
  html.kb-open .composer-arena .composer { gap: 8px; }
}
@media (max-width: 500px) {
  html.kb-open .composer-arena .title-input { font-size: 20px; padding: 6px 0; }
}


/* === src/features/social/pages/credentials/views/style.css === */
/* ─── Credentials — Arena ────────────────── */

.credentials-arena {
  --bg-void: var(--dark, #06060e) var(--light, #f4f3ef);
  --bg-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --bg-glass-hover: var(--dark, rgba(20, 20, 40, 0.80)) var(--light, rgba(255, 255, 255, 0.88));
  --bg-input: var(--dark, rgba(255, 255, 255, 0.025)) var(--light, rgba(0, 0, 0, 0.02));
  --border-subtle: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --border-strong: var(--dark, rgba(255, 255, 255, 0.12)) var(--light, rgba(0, 0, 0, 0.14));
  --text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --text-dim: var(--dark, #55556a) var(--light, #9999aa);
  --accent-gold: #fcb300;
  --accent-teal: #6eedd8;
  --accent-coral: #ef4444;
  --accent-green: #22c55e;
  --accent-violet: #818cf8;
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Outfit', sans-serif;
}

.credentials-arena {
  position: relative;
  /* `body` is `overflow: hidden` on desktop so this top-level route under
     RootLayout has to own its own scroll container. Lock to 100% height
     + overflow-y:auto so the credentials list scrolls inside the page. */
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
}
@media (max-width: 768px) {
  /* Keep the arena as its OWN scroll container on mobile (same as desktop)
     so the `position: sticky` topbar has a scrolling ancestor to anchor to.
     With `overflow: visible` the body scrolled and the header drifted up
     with the content instead of staying pinned. */
  .credentials-arena {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
.credentials-arena::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(129, 140, 248, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 120%, rgba(110, 237, 216, 0.04) 0%, transparent 50%);
  z-index: -1;
  pointer-events: none;
}

/* Top bar */
.credentials-arena .arena-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  background: var(--dark, rgba(6, 6, 14, 0.80)) var(--light, rgba(244, 243, 239, 0.86));
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}
.credentials-arena .arena-topbar__left { display: flex; align-items: center; gap: 14px; }
.credentials-arena .back-btn {
  width: 38px; height: 38px;
  /* Fixed-size flex child: without this the default `flex-shrink: 1` lets a
     long sibling title squash the square button into an oval. */
  flex-shrink: 0; border-radius: 10px;
  background: var(--bg-glass); border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.25s ease; padding: 0;
  color: var(--text-muted);
}
.credentials-arena .back-btn:hover { border-color: rgba(252, 179, 0, 0.25); background: var(--bg-glass-hover); color: var(--accent-gold); }
.credentials-arena .back-btn svg { width: 18px; height: 18px; }

.credentials-arena .topbar-title { display: flex; align-items: baseline; gap: 10px; }
.credentials-arena .topbar-title__main {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-primary);
}
.credentials-arena .topbar-title__status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 100px;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(34, 197, 94, 0.08); color: var(--accent-green);
  border: 1px solid rgba(34, 197, 94, 0.18);
}
.credentials-arena .topbar-title__status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green);
  animation: pulse-dot 2s ease-in-out infinite;
}
.credentials-arena .topbar-title__status--pending {
  background: rgba(255, 255, 255, 0.04); color: var(--text-dim);
  border: 1px solid var(--border-subtle);
}
.credentials-arena .topbar-title__status--pending::before {
  background: var(--text-dim); box-shadow: none; animation: none;
}
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.credentials-arena .topbar-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--border-subtle); background: var(--bg-glass);
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted);
  cursor: pointer; transition: all 0.25s ease;
}
.credentials-arena .topbar-btn:hover { border-color: rgba(252, 179, 0, 0.25); color: var(--accent-gold); background: var(--bg-glass-hover); }
.credentials-arena .topbar-btn svg { width: 13px; height: 13px; }

/* Page */
.credentials-arena .page {
  position: relative; z-index: 1; flex: 1;
  max-width: 920px; margin: 0 auto; width: 100%;
  padding: 32px 28px 60px;
  display: flex; flex-direction: column; gap: 24px;
}

/* Hero */
.vc-hero {
  position: relative; overflow: hidden;
  border-radius: 22px; border: 1px solid var(--border-subtle);
  background: var(--bg-glass); backdrop-filter: blur(16px);
  display: grid; grid-template-columns: 1fr 220px; gap: 28px;
  padding: 30px 32px;
}
.vc-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 20%, rgba(129, 140, 248, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 95% 110%, rgba(110, 237, 216, 0.10) 0%, transparent 60%);
  pointer-events: none;
}
.vc-hero > * { position: relative; z-index: 1; }
.vc-hero__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.vc-hero__eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim);
}
.vc-hero__eyebrow strong { color: var(--accent-violet); font-weight: 700; }
.vc-hero__eyebrow svg { width: 12px; height: 12px; color: var(--accent-violet); }

.vc-hero__crest { display: flex; align-items: center; gap: 14px; }
.vc-hero__shield {
  width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.22), rgba(110, 237, 216, 0.16));
  border: 1px solid rgba(129, 140, 248, 0.28);
  box-shadow: 0 0 24px rgba(129, 140, 248, 0.16);
}
.vc-hero__shield svg { width: 26px; height: 26px; color: #ffffff; }
.vc-hero__crest-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vc-hero__crest-title {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  letter-spacing: 0.02em; color: var(--text-primary);
}
.vc-hero__crest-sub { font-size: 12.5px; color: var(--text-muted); letter-spacing: 0.02em; }

.vc-hero__did {
  display: flex; flex-direction: column; gap: 6px;
  padding: 13px 14px; border-radius: 12px;
  background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border-subtle);
}
.vc-hero__did-label {
  font-family: var(--font-display); font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);
  display: flex; align-items: center; gap: 6px;
}
.vc-hero__did-label svg { width: 11px; height: 11px; color: var(--accent-violet); }
.vc-hero__did-value {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 13px; color: var(--text-primary);
  letter-spacing: 0.02em; word-break: break-all; line-height: 1.45;
}
.vc-hero__did-value-text { flex: 1; min-width: 0; }
.vc-hero__did-value-text em { font-style: normal; color: var(--accent-violet); }
.vc-hero__did-copy {
  position: relative; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 7px;
  background: transparent; border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted); transition: all 0.2s; padding: 0;
}
.vc-hero__did-copy:hover { border-color: rgba(252, 179, 0, 0.25); color: var(--accent-gold); }
.vc-hero__did-copy svg { width: 12px; height: 12px; }
.vc-hero__did-copy .icon-ok { display: none; }
.vc-hero__did-copy[data-copied="true"] { color: var(--accent-green); border-color: rgba(34, 197, 94, 0.3); }
.vc-hero__did-copy[data-copied="true"] .icon-copy { display: none; }
.vc-hero__did-copy[data-copied="true"] .icon-ok { display: block; }

.vc-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 11.5px; color: var(--text-dim); }
.vc-hero__meta-item { display: inline-flex; align-items: center; gap: 6px; }
.vc-hero__meta-item svg { width: 12px; height: 12px; }
.vc-hero__meta-item strong {
  font-family: var(--font-display); color: var(--text-muted);
  font-weight: 600; letter-spacing: 0.04em;
}

.vc-hero__qr {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-subtle);
}
.vc-hero__qr-canvas {
  width: 160px; height: 160px; border-radius: 8px;
  background: #ffffff;
  display: flex; align-items: center; justify-content: center; padding: 12px;
}
.vc-hero__qr-canvas svg { width: 100%; height: 100%; }
.vc-hero__qr-hint {
  font-family: var(--font-display); font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);
  text-align: center; line-height: 1.4;
}

/* Stats */
.credentials-arena .stats-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.credentials-arena .stat-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--bg-glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle); border-radius: 12px;
}
.credentials-arena .stat-card__icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: rgba(252, 179, 0, 0.10); color: var(--accent-gold);
}
.credentials-arena .stat-card__icon svg { width: 16px; height: 16px; }
.credentials-arena .stat-card--teal .stat-card__icon { background: rgba(110, 237, 216, 0.10); color: var(--accent-teal); }
.credentials-arena .stat-card--violet .stat-card__icon { background: rgba(129, 140, 248, 0.10); color: var(--accent-violet); }
.credentials-arena .stat-card__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.credentials-arena .stat-card__label {
  font-family: var(--font-display); font-size: 9px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim);
}
.credentials-arena .stat-card__value {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  color: var(--text-primary); display: flex; align-items: baseline; gap: 4px;
}
.credentials-arena .stat-card__value small {
  font-size: 10px; color: var(--text-dim); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* Section head */
.section-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; margin-top: 6px; }
.section-head__title {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted);
  display: flex; align-items: center; gap: 10px;
}
.section-head__title::before {
  content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--accent-gold);
}
.section-head__hint {
  font-family: var(--font-body); font-size: 11.5px; color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 6px;
}
.section-head__hint svg { width: 12px; height: 12px; color: var(--accent-teal); }

/* Attributes */
.attrs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.attr-card {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 18px; border-radius: 14px;
  background: var(--bg-glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle); transition: all 0.2s ease;
}
.attr-card:hover { border-color: rgba(252, 179, 0, 0.20); background: var(--bg-glass-hover); transform: translateY(-1px); }
.attr-card--verified { border-color: rgba(34, 197, 94, 0.22); box-shadow: 0 0 20px rgba(34, 197, 94, 0.05); }
.attr-card--verified::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 2px; border-radius: 2px;
  background: var(--accent-green); box-shadow: 0 0 10px var(--accent-green);
}
.attr-card--unverified { opacity: 0.86; }

.attr-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.attr-card__title { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.attr-card__icon {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: rgba(255, 255, 255, 0.04); color: var(--text-muted);
}
.attr-card__icon svg { width: 15px; height: 15px; }
.attr-card--verified .attr-card__icon { background: rgba(34, 197, 94, 0.10); color: var(--accent-green); }
.attr-card__label {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
.attr-card--verified .attr-card__label { color: var(--text-primary); }
.attr-card__method {
  font-family: var(--font-display); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 100px;
}
.attr-card__method--kyc { background: rgba(110, 237, 216, 0.08); color: var(--accent-teal); border: 1px solid rgba(110, 237, 216, 0.22); }
.attr-card__method--code { background: rgba(129, 140, 248, 0.08); color: var(--accent-violet); border: 1px solid rgba(129, 140, 248, 0.22); }

.attr-card__value { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.attr-card__value-main {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--text-primary); line-height: 1;
}
.attr-card__value-main--text { font-size: 15.5px; letter-spacing: 0.02em; }
.attr-card__value-sub {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase;
}
.attr-card__value-missing { font-size: 13px; font-style: italic; color: var(--text-dim); }

.attr-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-size: 11px; color: var(--text-dim);
  padding-top: 4px; border-top: 1px dashed var(--border-subtle);
}
.attr-card__meta-item { display: inline-flex; align-items: center; gap: 5px; }
.attr-card__meta-item svg { width: 11px; height: 11px; }
.attr-card__meta strong { font-family: var(--font-display); color: var(--text-muted); font-weight: 600; letter-spacing: 0.04em; }
.attr-card__add {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 7px 13px; border-radius: 8px;
  background: rgba(252, 179, 0, 0.08); border: 1px solid rgba(252, 179, 0, 0.25);
  font-family: var(--font-display); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--accent-gold);
  cursor: pointer; transition: all 0.2s ease;
}
.attr-card__add:hover { background: rgba(252, 179, 0, 0.15); box-shadow: 0 0 14px rgba(252, 179, 0, 0.15); }
.attr-card__add svg { width: 11px; height: 11px; }

/* Methods */
.methods { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.method-card {
  position: relative; overflow: hidden;
  padding: 22px 22px 20px; border-radius: 16px;
  background: var(--bg-glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 14px;
  cursor: pointer; transition: all 0.25s ease;
}
.method-card:hover { transform: translateY(-1px); }
.method-card--kyc::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(110, 237, 216, 0.10) 0%, transparent 55%);
  pointer-events: none;
}
.method-card--code::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(129, 140, 248, 0.10) 0%, transparent 55%);
  pointer-events: none;
}
.method-card > * { position: relative; z-index: 1; }
.method-card--kyc:hover { border-color: rgba(110, 237, 216, 0.28); box-shadow: 0 0 20px rgba(110, 237, 216, 0.06); }
.method-card--code:hover { border-color: rgba(129, 140, 248, 0.28); box-shadow: 0 0 20px rgba(129, 140, 248, 0.06); }

.method-card__head { display: flex; align-items: center; gap: 12px; }
.method-card__badge {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.method-card__badge--kyc { background: linear-gradient(135deg, #6eedd8, #3acab2); color: #0a0a0a; }
.method-card__badge--code { background: linear-gradient(135deg, #818cf8, #6366f1); color: #ffffff; }
.method-card__badge svg { width: 20px; height: 20px; }
.method-card__head-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.method-card__title {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  letter-spacing: 0.02em; color: var(--text-primary);
}
.method-card__sub {
  font-family: var(--font-display); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim);
}
.method-card__sub--kyc strong { color: var(--accent-teal); }
.method-card__sub--code strong { color: var(--accent-violet); }
.method-card__desc { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }
.method-card__desc strong { color: var(--text-primary); font-weight: 600; }

.method-card__attrs { display: flex; flex-wrap: wrap; gap: 5px; }
.method-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 100px;
  font-family: var(--font-display); font-size: 9px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}
.method-chip svg { width: 9px; height: 9px; color: var(--accent-green); }
.method-chip--missing { color: var(--text-dim); }
.method-chip--missing svg { color: var(--text-dim); }

.method-card__cta {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 7px;
  margin-top: 2px; padding: 9px 15px; border-radius: 9px;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  cursor: pointer; border: 1px solid transparent; transition: all 0.2s ease;
}
.method-card__cta--kyc {
  background: linear-gradient(135deg, var(--accent-teal), #3acab2);
  color: #0a0a0a; box-shadow: 0 2px 14px rgba(110, 237, 216, 0.20);
}
.method-card__cta--kyc:hover { box-shadow: 0 4px 22px rgba(110, 237, 216, 0.35); transform: translateY(-1px); }
.method-card__cta--code {
  background: linear-gradient(135deg, var(--accent-violet), #6366f1);
  color: #ffffff; box-shadow: 0 2px 14px rgba(129, 140, 248, 0.24);
}
.method-card__cta--code:hover { box-shadow: 0 4px 22px rgba(129, 140, 248, 0.40); transform: translateY(-1px); }
.method-card__cta svg { width: 12px; height: 12px; }
.method-card__cta--ghost {
  background: transparent; border: 1px solid var(--border-subtle);
  color: var(--text-muted); box-shadow: none;
}
.method-card__cta--ghost:hover { border-color: rgba(252, 179, 0, 0.25); color: var(--accent-gold); transform: translateY(-1px); box-shadow: none; }

.code-hint {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 9px;
  background: rgba(129, 140, 248, 0.04); border: 1px solid rgba(129, 140, 248, 0.14);
  font-size: 11.5px; color: var(--text-muted); line-height: 1.5;
}
.code-hint svg { width: 13px; height: 13px; color: var(--accent-violet); flex-shrink: 0; }
.code-hint strong {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em;
  color: var(--accent-violet);
}

/* Proof card */
.proof {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  padding: 20px 22px; border-radius: 14px;
  background: var(--bg-glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
}
.proof__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.proof__col-title {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);
  display: flex; align-items: center; gap: 8px;
}
.proof__col-title svg { width: 12px; height: 12px; color: var(--accent-teal); }
.proof__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 12.5px; color: var(--text-muted);
  padding: 4px 0; border-bottom: 1px dashed var(--border-subtle);
}
.proof__row:last-child { border-bottom: none; }
.proof__row span:first-child {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim);
}
.proof__row span:last-child {
  font-family: var(--font-display); font-weight: 700; color: var(--text-primary);
  letter-spacing: 0.02em; word-break: break-all; text-align: right; max-width: 60%;
}
.proof__row--ok span:last-child { color: var(--accent-green); }
.proof__sig {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(34, 197, 94, 0.04); border: 1px solid rgba(34, 197, 94, 0.15);
  font-size: 12px; color: var(--accent-green); line-height: 1.45;
}
.proof__sig svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
/* `min-width: 0` lets the text column shrink below the long DID's intrinsic
   width; `overflow-wrap: anywhere` breaks the unbreakable
   `did:web:…#key-1` string instead of overflowing the card. */
.proof__sig > span { min-width: 0; overflow-wrap: anywhere; }
.proof__sig strong { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; overflow-wrap: anywhere; }

/* Privacy */
.credentials-arena .privacy {
  display: flex; gap: 14px;
  padding: 16px 18px; border-radius: 12px;
  background: rgba(110, 237, 216, 0.04); border: 1px solid rgba(110, 237, 216, 0.14);
}
.credentials-arena .privacy__icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(110, 237, 216, 0.12); color: var(--accent-teal);
}
.credentials-arena .privacy__icon svg { width: 15px; height: 15px; }
.credentials-arena .privacy__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.credentials-arena .privacy__title {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-teal);
}
.credentials-arena .privacy__desc { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }
.credentials-arena .privacy__desc code { font-family: var(--font-display); color: var(--accent-violet); }

/* Empty */
.credentials-arena .empty {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 60px 24px; text-align: center;
  border-radius: 14px; background: var(--bg-glass); border: 1px solid var(--border-subtle);
}
.credentials-arena .empty__icon {
  width: 68px; height: 68px; border-radius: 17px;
  background: rgba(129, 140, 248, 0.08); border: 1px solid rgba(129, 140, 248, 0.18);
  display: flex; align-items: center; justify-content: center; color: var(--accent-violet);
}
.credentials-arena .empty__icon svg { width: 28px; height: 28px; }
.credentials-arena .empty__title {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-primary);
}
.credentials-arena .empty__desc { font-size: 13px; line-height: 1.55; color: var(--text-muted); max-width: 420px; }
.credentials-arena .empty__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent-gold), #e5a200);
  color: #0a0a0a; border: none;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  cursor: pointer; box-shadow: 0 2px 14px rgba(252, 179, 0, 0.20);
  transition: all 0.2s ease;
}
.credentials-arena .empty__cta:hover { box-shadow: 0 4px 22px rgba(252, 179, 0, 0.35); transform: translateY(-1px); }
.credentials-arena .empty__cta svg { width: 13px; height: 13px; }

@media (max-width: 820px) {
  .credentials-arena .page { padding: 22px 18px 50px; gap: 20px; }
  .vc-hero { grid-template-columns: 1fr; gap: 22px; padding: 22px 22px; }
  .vc-hero__qr { flex-direction: row; align-self: flex-start; justify-content: flex-start; padding: 12px; }
  .vc-hero__qr-canvas { width: 128px; height: 128px; }
  .credentials-arena .stats-strip { grid-template-columns: 1fr 1fr; }
  .credentials-arena .stats-strip > *:nth-child(3) { grid-column: 1 / -1; }
  .attrs { grid-template-columns: 1fr; }
  .methods { grid-template-columns: 1fr; }
  .proof { grid-template-columns: 1fr; padding: 18px 20px; }
}
@media (max-width: 500px) {
  .credentials-arena .arena-topbar { padding: 14px 16px; }
  .credentials-arena .topbar-title__status { display: none; }
  .credentials-arena .topbar-title__main { font-size: 13px; }
  .credentials-arena .topbar-btn { display: none; }
  .credentials-arena .stats-strip { grid-template-columns: 1fr; }
  .credentials-arena .stats-strip > *:nth-child(3) { grid-column: auto; }
  .vc-hero { padding: 20px 18px; }
  .vc-hero__crest-title { font-size: 17px; }
  .vc-hero__did-value { font-size: 12px; }
}


/* === src/features/social/pages/draft/views/style.css === */
/* ── Team Drafts Arena Page (scoped to .team-arena) ── */

.team-arena {
  --accent-draft: #f59e0b;
  --accent-draft-bg: rgba(245, 158, 11, 0.10);
  --accent-draft-bd: rgba(245, 158, 11, 0.28);
  --accent-danger: #ef4444;
  --accent-danger-bg: rgba(239, 68, 68, 0.08);
  --accent-danger-bd: rgba(239, 68, 68, 0.22);
}

.team-arena .td-page {
  position: relative;
  z-index: 10;
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 28px 80px;
  width: 100%;
}

/* ── Section label ── */
.team-arena .td-section-label {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 28px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
}
.team-arena .td-section-label__dash {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--text-dim), transparent);
}
.team-arena .td-section-label__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.team-arena .td-section-label__title strong { color: var(--accent-gold); font-weight: 700; }

/* ── Page header ── */
.team-arena .td-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  margin-bottom: 20px;
  background: var(--bg-glass);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.team-arena .td-page-header__left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.team-arena .td-page-header__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.05em;
}
.team-arena .td-page-header__sub { font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; }
.team-arena .td-page-header__sub strong {
  color: var(--accent-draft);
  font-weight: 700;
  font-family: 'Orbitron', sans-serif;
}

.team-arena .td-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 11px;
  border: 1px solid rgba(252, 179, 0, 0.3);
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.2), rgba(110, 237, 216, 0.08));
  color: var(--accent-gold);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 0 16px rgba(252, 179, 0, 0.1);
  white-space: nowrap;
}
.team-arena .td-btn-primary:hover {
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.3), rgba(110, 237, 216, 0.14));
  box-shadow: 0 0 24px rgba(252, 179, 0, 0.22);
  transform: translateY(-1px);
}
.team-arena .td-btn-primary svg { width: 14px; height: 14px; }

/* ── Drafts grid ── */
.team-arena .td-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.team-arena .td-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 16px;
  background: var(--bg-glass);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.3s;
  cursor: pointer;
  overflow: hidden;
}
.team-arena .td-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--accent-draft), var(--accent-gold));
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}
.team-arena .td-card:hover {
  border-color: rgba(245, 158, 11, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 24px rgba(245, 158, 11, 0.08);
}
.team-arena .td-card:hover::before { opacity: 1; }

.team-arena .td-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.team-arena .td-card__meta-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.team-arena .td-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 7px;
  background: var(--accent-draft-bg);
  color: var(--accent-draft);
  border: 1px solid var(--accent-draft-bd);
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.team-arena .td-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-draft);
  box-shadow: 0 0 6px var(--accent-draft);
}
.team-arena .td-updated {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-arena .td-action {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  padding: 0;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.team-arena .td-action:hover {
  background: var(--accent-danger-bg);
  color: var(--accent-danger);
  border-color: var(--accent-danger-bd);
}
html[data-theme="light"] .team-arena .td-action,
[data-theme="light"] .team-arena .td-action { background: rgba(0, 0, 0, 0.03); }
.team-arena .td-action svg { width: 14px; height: 14px; }

.team-arena .td-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-arena .td-card__preview {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-arena .td-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}
.team-arena .td-author { display: flex; align-items: center; gap: 8px; min-width: 0; }
.team-arena .td-author__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.3), rgba(110, 237, 216, 0.15));
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 10px;
  color: var(--accent-gold);
  object-fit: cover;
}
.team-arena .td-author__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
}
.team-arena .td-edit-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.2s;
}
.team-arena .td-card:hover .td-edit-hint { color: var(--accent-gold); }
.team-arena .td-edit-hint svg { width: 10px; height: 10px; transition: transform 0.2s; }
.team-arena .td-card:hover .td-edit-hint svg { transform: translateX(2px); }

/* ── Empty state ── */
.team-arena .td-empty-state {
  padding: 60px 20px;
  text-align: center;
  border: 1px dashed var(--border-subtle);
  border-radius: 14px;
  background: rgba(12, 12, 26, 0.3);
  margin-top: 20px;
}
html[data-theme="light"] .team-arena .td-empty-state,
[data-theme="light"] .team-arena .td-empty-state { background: rgba(255, 255, 255, 0.5); }
.team-arena .td-empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.16);
  margin-bottom: 12px;
}
.team-arena .td-empty-state__icon svg { width: 24px; height: 24px; color: var(--accent-draft); }
.team-arena .td-empty-state__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.team-arena .td-empty-state__desc { font-size: 12px; color: var(--text-muted); }

/* ── Load more ── */
.team-arena .td-load-more {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}
.team-arena .td-load-more-btn {
  padding: 11px 24px;
  border-radius: 11px;
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.team-arena .td-load-more-btn:hover {
  border-color: rgba(252, 179, 0, 0.25);
  color: var(--accent-gold);
  box-shadow: 0 0 16px rgba(252, 179, 0, 0.08);
}
.team-arena .td-load-more-btn svg { width: 12px; height: 12px; }

/* ── Delete confirm modal (poll-confirm pattern) ── */
.team-arena .td-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  padding: 24px;
  animation: td-overlay-in 0.2s ease;
}
@keyframes td-overlay-in { from { opacity: 0; } to { opacity: 1; } }
.team-arena .td-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 28px 28px 24px;
  background: rgba(16, 16, 32, 0.95);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(239, 68, 68, 0.08);
  animation: td-modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes td-modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
html[data-theme="light"] .team-arena .td-modal-overlay,
[data-theme="light"] .team-arena .td-modal-overlay { background: rgba(0, 0, 0, 0.35); }
html[data-theme="light"] .team-arena .td-modal,
[data-theme="light"] .team-arena .td-modal {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(220, 38, 38, 0.22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14), 0 0 28px rgba(220, 38, 38, 0.06);
}
.team-arena .td-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.team-arena .td-modal__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-danger);
}
html[data-theme="light"] .team-arena .td-modal__title,
[data-theme="light"] .team-arena .td-modal__title { color: #b91c1c; }
.team-arena .td-modal__close {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-arena .td-modal__close:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.08); }
.team-arena .td-modal__close svg { width: 14px; height: 14px; }
.team-arena .td-modal__body { display: flex; flex-direction: column; gap: 14px; }
.team-arena .td-modal__desc { font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.team-arena .td-modal__desc strong { color: var(--text-primary); font-weight: 600; }
.team-arena .td-modal__actions { display: flex; gap: 10px; margin-top: 4px; }
.team-arena .td-modal__cancel,
.team-arena .td-modal__confirm-danger {
  flex: 1;
  padding: 12px;
  border-radius: 11px;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
  border: 1px solid var(--border-subtle);
}
.team-arena .td-modal__cancel {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  font-weight: 700;
}
.team-arena .td-modal__cancel:hover { background: rgba(255, 255, 255, 0.06); }
.team-arena .td-modal__confirm-danger {
  background: rgba(239, 68, 68, 0.16);
  color: var(--accent-danger);
  border-color: var(--accent-danger-bd);
}
html[data-theme="light"] .team-arena .td-modal__confirm-danger,
[data-theme="light"] .team-arena .td-modal__confirm-danger {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.32);
}
.team-arena .td-modal__confirm-danger:hover { background: rgba(239, 68, 68, 0.26); box-shadow: 0 0 18px rgba(239, 68, 68, 0.2); }

/* ── Responsive ── */
@media (max-width: 720px) {
  .team-arena .td-page { padding: 8px 14px 60px; }
  .team-arena .td-section-label { padding: 0 14px; margin-bottom: 14px; }
  .team-arena .td-page-header { padding: 14px 16px; gap: 10px; flex-wrap: wrap; }
  .team-arena .td-page-header__title { font-size: 16px; }
  .team-arena .td-btn-primary { padding: 9px 14px; font-size: 10px; }
  .team-arena .td-grid { grid-template-columns: 1fr; gap: 10px; }
  .team-arena .td-card { padding: 14px 14px 12px; gap: 10px; }
  .team-arena .td-card__title { font-size: 13px; }
  .team-arena .td-card__preview { font-size: 11px; -webkit-line-clamp: 2; }
  .team-arena .td-updated { font-size: 9px; }
  .team-arena .td-modal { padding: 22px 20px 18px; }
  .team-arena .td-modal__title { font-size: 12px; }
}


/* === src/features/social/pages/home/views/style.css === */
/* ── Team Home Arena — view-specific styles (scoped to .team-arena) ── */
/* All colors inherit CSS vars from .team-arena (see team_arena/style.css). */

.team-arena .home-arena {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── Team intro strip ── */
.team-arena .team-intro {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 0 28px 18px;
}
.team-arena .team-intro__desc {
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 780px;
}
.team-arena .team-intro__desc p { margin: 0; }
.team-arena .team-intro__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.team-arena .team-intro__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--bg-glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-subtle);
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.team-arena .team-intro__chip svg { width: 12px; height: 12px; color: var(--text-muted); }
.team-arena .team-intro__chip strong { color: var(--text-primary); font-weight: 700; }

/* ── Section label ── */
.team-arena .home-section-label {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 28px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
}
.team-arena .home-section-label__dash {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--text-dim), transparent);
}
.team-arena .home-section-label__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.team-arena .home-section-label__title strong { color: var(--accent-gold); font-weight: 700; }

/* ── Feed region ── */
/* Wraps both the carousel and the empty state so the middle of the
   home layout always owns the same flex slot. Without this the empty
   state inherits only intrinsic sizing and can collapse to zero on
   fast SPA navigations, which is why the "게시글이 없습니다" copy
   sometimes went missing on the icon-click path. */
.team-arena .home-feed-region {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 320px;
}

/* ── Carousel ── */
.team-arena .carousel-wrapper {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  min-height: 520px;
}
.team-arena .carousel-wrapper::before,
.team-arena .carousel-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 220px;
  z-index: 15;
  pointer-events: none;
}
.team-arena .carousel-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-void), transparent);
}
.team-arena .carousel-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-void), transparent);
}

.team-arena .carousel-track {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 60px 0;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding-left: calc(50vw - 200px);
  padding-right: calc(50vw - 200px);
}
.team-arena .carousel-track::-webkit-scrollbar { display: none; }

/* ── Post card ── */
.team-arena .post-card {
  flex-shrink: 0;
  width: 400px;
  min-height: 440px;
  padding: 26px 26px 22px;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: pointer;
  scroll-snap-align: center;
  position: relative;
  overflow: hidden;
  transform: scale(0.78);
  opacity: 0.30;
  filter: blur(5px);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-primary);
  text-decoration: none;
}
.team-arena .post-card.active {
  transform: scale(1.05);
  opacity: 1;
  filter: blur(0);
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.5);
  border-color: rgba(252, 179, 0, 0.20);
}
html[data-theme="light"] .team-arena .post-card.active,
[data-theme="light"] .team-arena .post-card.active {
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.15);
  border-color: rgba(252, 179, 0, 0.35);
}
.team-arena .post-card.active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  box-shadow: 0 0 50px rgba(252, 179, 0, 0.12);
}

/* Aurora wave on active */
.team-arena .post-card__wave {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 0;
}
.team-arena .post-card.active .post-card__wave { opacity: 1; }
.team-arena .post-card__wave::before,
.team-arena .post-card__wave::after {
  content: '';
  position: absolute;
  inset: -40%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.team-arena .post-card__wave::before {
  background:
    radial-gradient(ellipse 55% 40% at 20% 30%, rgba(252, 179, 0, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 75% 65%, rgba(110, 237, 216, 0.08) 0%, transparent 65%);
  animation: post-card-wave-a 7s ease-in-out infinite;
}
.team-arena .post-card__wave::after {
  background:
    radial-gradient(ellipse 50% 35% at 80% 30%, rgba(129, 140, 248, 0.08) 0%, transparent 62%),
    radial-gradient(ellipse 60% 45% at 25% 75%, rgba(168, 85, 247, 0.06) 0%, transparent 65%);
  animation: post-card-wave-b 9s ease-in-out infinite reverse;
}
@keyframes post-card-wave-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4%, -3%) scale(1.06); }
}
@keyframes post-card-wave-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-3%, 4%) scale(1.08); }
}

.team-arena .post-card__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.team-arena .post-card__cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(129, 140, 248, 0.08);
  color: var(--accent-poll);
  border: 1px solid rgba(129, 140, 248, 0.20);
}
.team-arena .post-card__cat svg { width: 12px; height: 12px; }
.team-arena .post-card__cat--discuss { background: rgba(34, 211, 238, 0.08); color: var(--accent-discuss); border-color: rgba(34, 211, 238, 0.20); }
.team-arena .post-card__cat--quiz    { background: rgba(168, 85, 247, 0.08); color: var(--accent-quiz);    border-color: rgba(168, 85, 247, 0.20); }
.team-arena .post-card__cat--gold    { background: rgba(252, 179, 0, 0.10);  color: var(--accent-gold);    border-color: rgba(252, 179, 0, 0.25); }
.team-arena .post-card__cat--teal    { background: rgba(110, 237, 216, 0.08); color: var(--accent-teal);    border-color: rgba(110, 237, 216, 0.22); }

.team-arena .post-card__date {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

.team-arena .post-card__title {
  position: relative;
  z-index: 1;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.team-arena .post-card__thumb {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 140px;
  border-radius: 12px;
  object-fit: cover;
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.15), rgba(168, 85, 247, 0.08));
  border: 1px solid var(--border-subtle);
}

.team-arena .post-card__desc {
  position: relative;
  z-index: 1;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.team-arena .post-card__stats {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}
.team-arena .post-card__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  padding: 0 14px;
  border-right: 1px solid var(--border-subtle);
}
.team-arena .post-card__stat:first-child { padding-left: 0; }
.team-arena .post-card__stat:last-child { border-right: none; }
.team-arena .post-card__stat-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.team-arena .post-card__stat-value--liked { color: #f43f5e; }
.team-arena .post-card__stat-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.team-arena .post-card__chips {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.team-arena .post-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}
html[data-theme="light"] .team-arena .post-card__chip,
[data-theme="light"] .team-arena .post-card__chip {
  background: rgba(0, 0, 0, 0.03);
}

.team-arena .post-card__footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}
.team-arena .post-card__reward {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-gold);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 5px;
}
.team-arena .post-card__reward--muted { color: var(--text-dim); }
.team-arena .post-card__reward svg { width: 14px; height: 14px; }
.team-arena .post-card__reward small {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 2px;
}
.team-arena .post-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.20), rgba(110, 237, 216, 0.10));
  border: 1px solid rgba(252, 179, 0, 0.25);
  color: var(--accent-gold);
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  /* Keep the CTA right-aligned in the footer even when the reward
     block isn't rendered (posts without rewards used to fill the gap
     with an em-dash; now the CTA anchors itself via auto margin). */
  margin-left: auto;
}
.team-arena .post-card__cta:hover {
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.3), rgba(110, 237, 216, 0.15));
  box-shadow: 0 0 24px rgba(252, 179, 0, 0.18);
  transform: translateY(-1px);
}
.team-arena .post-card__cta svg { width: 12px; height: 12px; }

/* ── Dots ── */
.team-arena .carousel-dots {
  position: relative;
  z-index: 10;
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 0 28px 18px;
  flex-shrink: 0;
}
.team-arena .carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s;
}
.team-arena .carousel-dot:hover { background: rgba(255, 255, 255, 0.3); }
html[data-theme="light"] .team-arena .carousel-dot,
[data-theme="light"] .team-arena .carousel-dot {
  background: rgba(0, 0, 0, 0.15);
}
html[data-theme="light"] .team-arena .carousel-dot:hover,
[data-theme="light"] .team-arena .carousel-dot:hover {
  background: rgba(0, 0, 0, 0.3);
}
.team-arena .carousel-dot.active {
  width: 28px;
  border-radius: 4px;
  background: var(--accent-gold);
  box-shadow: 0 0 12px rgba(252, 179, 0, 0.4);
}

/* ── Bottom bar ── */
.team-arena .home-bottom-bar {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 28px 20px;
  width: 100%;
  box-sizing: border-box;
}
.team-arena .home-bottom-bar__row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}
.team-arena .home-bottom-bar__row > .hud-stat {
  flex: 1 1 160px;
  min-width: 0;
}
.team-arena .home-bottom-bar__row > .home-browse-btn {
  flex-shrink: 0;
  margin-left: auto;
}
.team-arena .home-bottom-bar__row--filters {
  padding: 6px 4px;
  border-top: 1px solid var(--border-subtle);
}
.team-arena .cat-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.team-arena .cat-filter {
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
  backdrop-filter: blur(8px);
}
.team-arena .cat-filter:hover { border-color: rgba(255, 255, 255, 0.12); color: var(--text-primary); }
html[data-theme="light"] .team-arena .cat-filter,
[data-theme="light"] .team-arena .cat-filter {
  background: rgba(0, 0, 0, 0.03);
}
html[data-theme="light"] .team-arena .cat-filter:hover,
[data-theme="light"] .team-arena .cat-filter:hover {
  border-color: rgba(0, 0, 0, 0.14);
  color: var(--text-primary);
}
.team-arena .cat-filter[aria-pressed="true"] {
  background: rgba(252, 179, 0, 0.08);
  color: var(--accent-gold);
  border-color: rgba(252, 179, 0, 0.25);
  box-shadow: 0 0 12px rgba(252, 179, 0, 0.08);
}
.team-arena .cat-filter__count { margin-left: 6px; color: var(--text-dim); font-weight: 500; }
.team-arena .cat-filter[aria-pressed="true"] .cat-filter__count { color: var(--accent-gold); opacity: 0.7; }

.team-arena .hud-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  min-width: 0;
}
.team-arena .hud-stat__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(252, 179, 0, 0.08);
  border: 1px solid rgba(252, 179, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.team-arena .hud-stat__icon svg { width: 16px; height: 16px; color: var(--accent-gold); }
.team-arena .hud-stat--accent .hud-stat__icon { background: rgba(110, 237, 216, 0.08); border-color: rgba(110, 237, 216, 0.18); }
.team-arena .hud-stat--accent .hud-stat__icon svg { color: var(--accent-teal); }
.team-arena .hud-stat__body { display: flex; flex-direction: column; min-width: 0; }
.team-arena .hud-stat__label {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.team-arena .hud-stat__value {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
}
.team-arena .hud-stat__value strong {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--text-primary);
}
.team-arena .hud-stat__value small { font-size: 10px; color: var(--text-muted); margin-left: 3px; }

.team-arena .home-browse-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.18), rgba(110, 237, 216, 0.08));
  border: 1px solid rgba(252, 179, 0, 0.3);
  color: var(--accent-gold);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 0 16px rgba(252, 179, 0, 0.08);
}
.team-arena .home-browse-btn:hover {
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.28), rgba(110, 237, 216, 0.14));
  box-shadow: 0 0 24px rgba(252, 179, 0, 0.2);
  transform: translateY(-1px);
}
.team-arena .home-browse-btn svg { width: 14px; height: 14px; }

/* ── Empty state ── */
.team-arena .home-empty-state {
  flex: 1;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 14px;
  padding: 40px 20px;
  text-align: center;
}
.team-arena .home-empty-state__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.team-arena .home-empty-state__desc {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 420px;
}

/* ── Responsive ── */
@media (max-width: 720px) {
  .team-arena .team-intro { padding: 0 16px 14px; gap: 8px; }
  .team-arena .team-intro__desc { font-size: 12px; }
  .team-arena .team-intro__chip { font-size: 9px; padding: 4px 10px; }

  .team-arena .home-section-label { padding: 0 16px; margin-bottom: 4px; }
  .team-arena .home-section-label__dash { width: 24px; }
  .team-arena .home-section-label__title { font-size: 10px; letter-spacing: 0.18em; }

  .team-arena .carousel-wrapper { min-height: 460px; }
  .team-arena .carousel-wrapper::before,
  .team-arena .carousel-wrapper::after { width: 60px; }
  .team-arena .carousel-track {
    gap: 14px;
    padding: 30px 0 36px;
    padding-left: calc(50vw - 140px);
    padding-right: calc(50vw - 140px);
  }
  .team-arena .post-card {
    width: 280px;
    min-height: auto;
    padding: 18px;
    gap: 12px;
    transform: scale(0.86);
    filter: blur(3px);
  }
  .team-arena .post-card.active { transform: scale(1); }
  .team-arena .post-card__title { font-size: 16px; }
  .team-arena .post-card__desc { font-size: 12px; -webkit-line-clamp: 2; }
  .team-arena .post-card__stat { padding: 0 10px; }
  .team-arena .post-card__stat-value { font-size: 14px; }
  .team-arena .post-card__stat-label { font-size: 8px; }
  .team-arena .post-card__chip { font-size: 9px; padding: 3px 8px; }
  .team-arena .post-card__cta { padding: 6px 12px; font-size: 9px; }
  .team-arena .post-card__reward { font-size: 11px; }

  .team-arena .carousel-dots { padding: 0 16px 10px; }
  .team-arena .carousel-dot { width: 6px; height: 6px; }
  .team-arena .carousel-dot.active { width: 22px; }

  .team-arena .home-bottom-bar { padding: 8px 14px 20px; gap: 8px; }
  .team-arena .home-bottom-bar__row { gap: 8px; }
  .team-arena .home-bottom-bar__row:first-child { flex-wrap: wrap; }
  .team-arena .hud-stat { flex: 1 1 calc(50% - 6px); min-width: 0; padding: 8px 12px; gap: 10px; }
  .team-arena .hud-stat__icon { width: 28px; height: 28px; }
  .team-arena .hud-stat__icon svg { width: 14px; height: 14px; }
  .team-arena .hud-stat__label { font-size: 8px; letter-spacing: 0.1em; }
  .team-arena .hud-stat__value { font-size: 12px; }
  .team-arena .hud-stat__value strong { font-size: 13px; }
  .team-arena .hud-stat__value small { font-size: 9px; }

  .team-arena .home-browse-btn { width: 100%; justify-content: center; padding: 12px; font-size: 11px; }

  .team-arena .home-bottom-bar__row--filters { padding: 4px 0 0; }
  .team-arena .cat-filters { gap: 5px; }
  .team-arena .cat-filter { padding: 5px 10px; font-size: 9px; letter-spacing: 0.06em; }
}

@media (max-width: 420px) {
  .team-arena .hud-stat { flex: 1 1 100%; }
}


/* === src/features/social/pages/member/views/style.css === */
/* ── Team Members Arena Page (scoped to .team-arena) ── */

.team-arena .tm-page {
  position: relative;
  z-index: 10;
  max-width: 980px;
  margin: 0 auto;
  padding: 8px 28px 80px;
  width: 100%;
}

/* ── Section label ── */
.team-arena .tm-section-label {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 28px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
}
.team-arena .tm-section-label__dash {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--text-dim), transparent);
}
.team-arena .tm-section-label__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.team-arena .tm-section-label__title strong {
  color: var(--accent-gold);
  font-weight: 700;
}

/* ── Page header ── */
.team-arena .tm-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  margin-bottom: 20px;
  background: var(--bg-glass);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.team-arena .tm-page-header__left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.team-arena .tm-page-header__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.05em;
}
.team-arena .tm-page-header__sub {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.team-arena .tm-page-header__sub strong {
  color: var(--accent-gold);
  font-weight: 700;
  font-family: 'Orbitron', sans-serif;
}

.team-arena .tm-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 11px;
  border: 1px solid rgba(252, 179, 0, 0.3);
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.2), rgba(110, 237, 216, 0.08));
  color: var(--accent-gold);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 0 16px rgba(252, 179, 0, 0.1);
  white-space: nowrap;
}
.team-arena .tm-btn-primary:hover {
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.3), rgba(110, 237, 216, 0.14));
  box-shadow: 0 0 24px rgba(252, 179, 0, 0.22);
  transform: translateY(-1px);
}
.team-arena .tm-btn-primary svg { width: 14px; height: 14px; }

/* ── Filter bar ── */
.team-arena .tm-filter-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 16px;
}
.team-arena .tm-filter-bar .tm-role-tabs { width: fit-content; max-width: 100%; }
.team-arena .tm-role-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
.team-arena .tm-role-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9px;
  background: none;
  border: none;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.25s;
}
.team-arena .tm-role-tab:hover { color: var(--text-primary); }
.team-arena .tm-role-tab[aria-selected="true"] {
  color: var(--accent-gold);
  background: rgba(252, 179, 0, 0.1);
  box-shadow: 0 0 10px rgba(252, 179, 0, 0.06);
}
.team-arena .tm-role-tab__count {
  padding: 1px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dim);
  font-weight: 700;
  font-size: 9px;
  font-family: 'Orbitron', sans-serif;
}
html[data-theme="light"] .team-arena .tm-role-tab__count,
[data-theme="light"] .team-arena .tm-role-tab__count {
  background: rgba(0, 0, 0, 0.06);
}
.team-arena .tm-role-tab[aria-selected="true"] .tm-role-tab__count {
  background: rgba(252, 179, 0, 0.15);
  color: var(--accent-gold);
}

.team-arena .tm-search-wrap {
  flex: 1;
  min-width: 180px;
  position: relative;
}
.team-arena .tm-search-wrap svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--text-dim);
  pointer-events: none;
}
.team-arena .tm-search-input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border-radius: 11px;
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  transition: all 0.25s;
  outline: none;
  box-sizing: border-box;
}
.team-arena .tm-search-input::placeholder { color: var(--text-dim); }
.team-arena .tm-search-input:focus {
  border-color: rgba(252, 179, 0, 0.3);
  box-shadow: 0 0 14px rgba(252, 179, 0, 0.1);
}

/* ── Members grid ── */
.team-arena .tm-members-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.team-arena .tm-member-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg-glass);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.3s;
  overflow: hidden;
}
.team-arena .tm-member-card:hover {
  border-color: rgba(252, 179, 0, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 24px rgba(252, 179, 0, 0.08);
}
.team-arena .tm-member-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--accent-gold), var(--accent-teal));
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: 0 0 10px rgba(252, 179, 0, 0.3);
}
.team-arena .tm-member-card:hover::before { opacity: 1; }
.team-arena .tm-member-card:has(.tm-member-action-wrap[aria-expanded="true"]) {
  overflow: visible !important;
  z-index: 50;
}

.team-arena .tm-member-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.3), rgba(110, 237, 216, 0.15));
  border: 2px solid var(--border-subtle);
  box-shadow: 0 0 12px rgba(252, 179, 0, 0.08);
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--accent-gold);
}

.team-arena .tm-member-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.team-arena .tm-member-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-arena .tm-member-handle {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Role badges ── */
.team-arena .tm-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.team-arena .tm-role-badge--owner {
  background: rgba(252, 179, 0, 0.08);
  color: var(--accent-gold);
  border-color: rgba(252, 179, 0, 0.22);
}
.team-arena .tm-role-badge--admin {
  background: rgba(168, 85, 247, 0.08);
  color: #a855f7;
  border-color: rgba(168, 85, 247, 0.22);
}
.team-arena .tm-role-badge--member {
  background: rgba(110, 237, 216, 0.08);
  color: var(--accent-teal);
  border-color: rgba(110, 237, 216, 0.22);
}
.team-arena .tm-role-badge svg { width: 11px; height: 11px; }

/* ── Action button + menu ── */
.team-arena .tm-member-action-wrap { position: relative; flex-shrink: 0; }
.team-arena .tm-member-action {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  padding: 0;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.team-arena .tm-member-action:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="light"] .team-arena .tm-member-action,
[data-theme="light"] .team-arena .tm-member-action {
  background: rgba(0, 0, 0, 0.03);
}
html[data-theme="light"] .team-arena .tm-member-action:hover,
[data-theme="light"] .team-arena .tm-member-action:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.18);
  color: var(--text-primary);
}
.team-arena .tm-member-action svg { width: 14px; height: 14px; }

.team-arena .tm-member-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  padding: 6px;
  background: var(--bg-glass);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.18s ease;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
html[data-theme="light"] .team-arena .tm-member-menu,
[data-theme="light"] .team-arena .tm-member-menu {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}
.team-arena .tm-member-action-wrap[aria-expanded="true"] .tm-member-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.team-arena .tm-member-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  width: 100%;
  transition: background 0.15s;
}
.team-arena .tm-member-menu__item:hover { background: rgba(255, 255, 255, 0.05); }
html[data-theme="light"] .team-arena .tm-member-menu__item:hover,
[data-theme="light"] .team-arena .tm-member-menu__item:hover { background: rgba(0, 0, 0, 0.05); }
.team-arena .tm-member-menu__item svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.team-arena .tm-member-menu__item--danger { color: #ef4444; }
.team-arena .tm-member-menu__item--danger svg { color: #ef4444; }
html[data-theme="light"] .team-arena .tm-member-menu__item--danger,
html[data-theme="light"] .team-arena .tm-member-menu__item--danger svg,
[data-theme="light"] .team-arena .tm-member-menu__item--danger,
[data-theme="light"] .team-arena .tm-member-menu__item--danger svg { color: #b91c1c; }
.team-arena .tm-member-menu__item--danger:hover { background: rgba(239, 68, 68, 0.08); }
.team-arena .tm-member-menu__divider { height: 1px; background: var(--border-subtle); margin: 2px 0; }

/* ── Empty state ── */
.team-arena .tm-empty-state {
  padding: 60px 20px;
  text-align: center;
  border: 1px dashed var(--border-subtle);
  border-radius: 14px;
  background: rgba(12, 12, 26, 0.3);
  margin-top: 20px;
}
html[data-theme="light"] .team-arena .tm-empty-state,
[data-theme="light"] .team-arena .tm-empty-state {
  background: rgba(255, 255, 255, 0.5);
}
.team-arena .tm-empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(252, 179, 0, 0.06);
  border: 1px solid rgba(252, 179, 0, 0.16);
  margin-bottom: 12px;
}
.team-arena .tm-empty-state__icon svg { width: 24px; height: 24px; color: var(--accent-gold); }
.team-arena .tm-empty-state__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.team-arena .tm-empty-state__desc { font-size: 12px; color: var(--text-muted); }

/* ── Invite modal (poll-confirm pattern) ── */
.team-arena .tm-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 24px;
  animation: tm-modal-overlay-in 0.2s ease;
}
/* The invite dialog is its own overlay, not the shared Popup, so it needs the
   same keyboard handling. `inset: 0` sizes it to the LAYOUT viewport, which
   keeps its full height when the keyboard opens, so `align-items: center`
   centred the dialog against space the user cannot see -- measured on a
   Galaxy S23: visible region [200, 638] but the dialog centred at 390, i.e.
   ~29px high. Size to the visible area and re-anchor it, exactly like
   `.popup-backdrop`. */
.team-arena .tm-modal-overlay {
  bottom: auto;
  height: var(--vv-height, 100dvh);
  transform: translateY(var(--vv-offset-top, 0px));
}
.team-arena .tm-modal {
  max-height: calc(var(--vv-height, 100dvh) - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@keyframes tm-modal-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.team-arena .tm-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 28px 28px 24px;
  background: rgba(16, 16, 32, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(252, 179, 0, 0.14);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(252, 179, 0, 0.06);
  animation: tm-modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes tm-modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
html[data-theme="light"] .team-arena .tm-modal-overlay,
[data-theme="light"] .team-arena .tm-modal-overlay {
  background: rgba(0, 0, 0, 0.35);
}
html[data-theme="light"] .team-arena .tm-modal,
[data-theme="light"] .team-arena .tm-modal {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(198, 135, 0, 0.22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14), 0 0 30px rgba(198, 135, 0, 0.06);
}
.team-arena .tm-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.team-arena .tm-modal__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--accent-gold), #ffd24a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-theme="light"] .team-arena .tm-modal__title,
[data-theme="light"] .team-arena .tm-modal__title {
  background: linear-gradient(135deg, #c68700, #8d5f00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.team-arena .tm-modal__close {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-arena .tm-modal__close:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.08); }
html[data-theme="light"] .team-arena .tm-modal__close,
[data-theme="light"] .team-arena .tm-modal__close { background: rgba(0, 0, 0, 0.03); }
.team-arena .tm-modal__close svg { width: 14px; height: 14px; }
.team-arena .tm-modal__body { display: flex; flex-direction: column; gap: 18px; }

.team-arena .tm-field__label {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: block;
}
.team-arena .tm-field__input,
.team-arena .tm-field__select {
  width: 100%;
  padding: 11px 14px;
  border-radius: 11px;
  background-color: rgba(6, 6, 14, 0.6);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  transition: all 0.25s;
  outline: none;
  box-sizing: border-box;
}
html[data-theme="light"] .team-arena .tm-field__input,
html[data-theme="light"] .team-arena .tm-field__select,
[data-theme="light"] .team-arena .tm-field__input,
[data-theme="light"] .team-arena .tm-field__select { background-color: rgba(0, 0, 0, 0.03); }
.team-arena .tm-field__input::placeholder { color: var(--text-dim); }
.team-arena .tm-field__input:focus,
.team-arena .tm-field__select:focus {
  border-color: rgba(252, 179, 0, 0.3);
  box-shadow: 0 0 14px rgba(252, 179, 0, 0.1);
}
.team-arena .tm-field__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238888a8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  padding-right: 38px;
}
html[data-theme="light"] .team-arena .tm-field__select,
[data-theme="light"] .team-arena .tm-field__select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6075' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
.team-arena .tm-field__hint { margin-top: 6px; font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; }

/* ── Custom role dropdown (mirrors team switcher style) ── */
.team-arena .tm-role-dd { position: relative; width: 100%; }
.team-arena .tm-role-dd__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 11px;
  background-color: rgba(6, 6, 14, 0.6);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.25s;
}
html[data-theme="light"] .team-arena .tm-role-dd__trigger,
[data-theme="light"] .team-arena .tm-role-dd__trigger {
  background-color: rgba(0, 0, 0, 0.03);
}
.team-arena .tm-role-dd__trigger:hover {
  border-color: rgba(252, 179, 0, 0.25);
}
.team-arena .tm-role-dd__trigger[aria-expanded="true"] {
  border-color: rgba(252, 179, 0, 0.3);
  box-shadow: 0 0 14px rgba(252, 179, 0, 0.1);
}
.team-arena .tm-role-dd__value { text-align: left; flex: 1; min-width: 0; }
.team-arena .tm-role-dd__chevron {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.25s;
}
.team-arena .tm-role-dd__trigger[aria-expanded="true"] .tm-role-dd__chevron {
  transform: rotate(180deg);
  color: var(--accent-gold);
}

.team-arena .tm-role-dd__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  padding: 6px;
  border-radius: 12px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
html[data-theme="light"] .team-arena .tm-role-dd__menu,
[data-theme="light"] .team-arena .tm-role-dd__menu {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}
.team-arena .tm-role-dd__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  text-align: left;
  width: 100%;
  transition: background 0.15s;
}
.team-arena .tm-role-dd__item:hover { background: rgba(255, 255, 255, 0.05); }
html[data-theme="light"] .team-arena .tm-role-dd__item:hover,
[data-theme="light"] .team-arena .tm-role-dd__item:hover { background: rgba(0, 0, 0, 0.05); }
.team-arena .tm-role-dd__check { width: 16px; height: 16px; color: var(--accent-gold); flex-shrink: 0; }

.team-arena .tm-modal__submit {
  width: 100%;
  padding: 13px;
  border-radius: 11px;
  border: 1px solid rgba(252, 179, 0, 0.3);
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.22), rgba(110, 237, 216, 0.1));
  color: var(--accent-gold);
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 0 20px rgba(252, 179, 0, 0.1);
}
.team-arena .tm-modal__submit:hover:not([disabled]) {
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.32), rgba(110, 237, 216, 0.16));
  box-shadow: 0 0 30px rgba(252, 179, 0, 0.24);
}
.team-arena .tm-modal__submit[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ── Selected user chips ── */
.team-arena .tm-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.team-arena .tm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 12px;
  border-radius: 100px;
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.18), rgba(110, 237, 216, 0.10));
  border: 1px solid rgba(252, 179, 0, 0.28);
  color: var(--accent-gold);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.team-arena .tm-chip__name { line-height: 1.2; }
.team-arena .tm-chip__close {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  border: none;
  color: var(--accent-gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.team-arena .tm-chip__close:hover { background: rgba(0, 0, 0, 0.45); }
html[data-theme="light"] .team-arena .tm-chip__close,
[data-theme="light"] .team-arena .tm-chip__close { background: rgba(255, 255, 255, 0.6); }
.team-arena .tm-chip__close svg { width: 12px; height: 12px; }

.team-arena .tm-modal__error { font-size: 12px; color: #ef4444; }
html[data-theme="light"] .team-arena .tm-modal__error,
[data-theme="light"] .team-arena .tm-modal__error { color: #b91c1c; }

/* ── Responsive ── */
@media (max-width: 720px) {
  .team-arena .tm-page { padding: 8px 14px 60px; }
  .team-arena .tm-section-label { padding: 0 14px; margin-bottom: 14px; }
  .team-arena .tm-page-header { padding: 14px 16px; gap: 10px; flex-wrap: wrap; }
  .team-arena .tm-page-header__title { font-size: 16px; }
  .team-arena .tm-btn-primary { padding: 9px 14px; font-size: 10px; }
  .team-arena .tm-filter-bar { gap: 8px; }
  .team-arena .tm-role-tabs { width: fit-content; max-width: 100%; overflow-x: auto; }
  .team-arena .tm-role-tab { padding: 7px 10px; font-size: 9px; }
  .team-arena .tm-search-wrap { width: 100%; }
  .team-arena .tm-members-grid { grid-template-columns: 1fr; gap: 10px; }
  .team-arena .tm-member-card { padding: 12px 14px; gap: 10px; }
  .team-arena .tm-member-avatar { width: 38px; height: 38px; font-size: 14px; }
  .team-arena .tm-member-name { font-size: 13px; }
  .team-arena .tm-member-handle { font-size: 10px; }
  .team-arena .tm-role-badge { padding: 4px 9px; font-size: 9px; }
  .team-arena .tm-modal { padding: 22px 20px 18px; }
  .team-arena .tm-modal__title { font-size: 12px; }
}


/* === src/features/social/pages/reward/views/style.css === */
/* ─── User Rewards — Arena ──────────────── */

.rewards-arena {
  --bg-void: var(--dark, #06060e) var(--light, #f4f3ef);
  --bg-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --bg-glass-hover: var(--dark, rgba(20, 20, 40, 0.80)) var(--light, rgba(255, 255, 255, 0.88));
  --bg-input: var(--dark, rgba(255, 255, 255, 0.025)) var(--light, rgba(0, 0, 0, 0.02));
  --border-subtle: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --border-strong: var(--dark, rgba(255, 255, 255, 0.12)) var(--light, rgba(0, 0, 0, 0.14));
  --text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --text-dim: var(--dark, #55556a) var(--light, #9999aa);
  --accent-gold: #fcb300;
  --accent-teal: #6eedd8;
  --accent-coral: #ef4444;
  --accent-green: #22c55e;
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Outfit', sans-serif;
}

.rewards-arena {
  position: relative;
  min-height: 100vh;
  /* This arena is a flex item of `.social-scroll` (a column flex box), so the
     default `flex-shrink: 1` squashed its box down to the scrollport height
     while its content ran on far longer — measured one viewport (740px)
     against 4165px of reward rows. A sticky element is bounded by its
     containing block, so `.arena-topbar` unpinned and scrolled away the
     moment the reader passed that first viewport. Refusing to shrink makes
     the box match the content and the header stays put for the whole list.
     Letting `.social-scroll` stay the scroller (rather than giving this
     arena its own `overflow-y: auto`) keeps a single scroll container for
     the page.
     NOTE: this rule is duplicated below/above (team_reward + user_reward
     stylesheets were merged into main.css); keep the two in step. */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
}
.rewards-arena::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(252, 179, 0, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 120%, rgba(110, 237, 216, 0.04) 0%, transparent 50%);
  z-index: 0;
  pointer-events: none;
}

/* Topbar */
.rewards-arena .arena-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  background: var(--dark, rgba(6, 6, 14, 0.80)) var(--light, rgba(244, 243, 239, 0.86));
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}
.rewards-arena .arena-topbar__left { display: flex; align-items: center; gap: 14px; }
.rewards-arena .back-btn {
  width: 38px; height: 38px;
  /* Fixed-size flex child: without this the default `flex-shrink: 1` lets a
     long sibling title squash the square button into an oval. */
  flex-shrink: 0;
  /* Fixed-size flex child: without this the default `flex-shrink: 1` lets a
     long sibling title squash the square button into an oval. */
  flex-shrink: 0;
  /* Fixed-size flex child: without this the default `flex-shrink: 1` lets a
     long sibling title squash the square button into an oval. */
  flex-shrink: 0; border-radius: 10px;
  background: var(--bg-glass); border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.25s ease; padding: 0;
  color: var(--text-muted);
}
.rewards-arena .back-btn:hover { border-color: rgba(252, 179, 0, 0.25); background: var(--bg-glass-hover); color: var(--accent-gold); }
.rewards-arena .back-btn svg { width: 18px; height: 18px; }

.rewards-arena .topbar-title { display: flex; align-items: baseline; gap: 10px; }
.rewards-arena .topbar-title__main {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-primary);
}
.rewards-arena .topbar-title__cycle {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; color: var(--text-dim);
}
.rewards-arena .topbar-title__cycle strong { color: var(--accent-gold); }

.rewards-arena .chain-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 100px;
  background: var(--bg-glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  color: var(--text-muted); cursor: pointer; transition: all 0.2s;
}
.rewards-arena .chain-chip:hover { border-color: rgba(252, 179, 0, 0.20); color: var(--text-primary); }
.rewards-arena .chain-chip__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green);
}
.rewards-arena .chain-chip__addr {
  font-family: var(--font-display); font-size: 10px;
  letter-spacing: 0.04em; color: var(--text-dim);
}
.rewards-arena .chain-chip svg { width: 12px; height: 12px; color: var(--text-dim); }

/* Page */
.rewards-arena .page {
  position: relative; z-index: 1; flex: 1;
  max-width: 980px; margin: 0 auto; width: 100%;
  padding: 32px 28px 60px;
  display: flex; flex-direction: column; gap: 28px;
}

/* Hero */
.rewards-arena .hero {
  position: relative;
  display: grid; grid-template-columns: 1fr 280px; gap: 32px;
  padding: 32px 32px 28px;
  background: var(--bg-glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle); border-radius: 20px;
  overflow: hidden;
}
.rewards-arena .hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(252, 179, 0, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(110, 237, 216, 0.06) 0%, transparent 60%);
  pointer-events: none;
}
.rewards-arena .hero > * { position: relative; z-index: 1; }

.rewards-arena .hero__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rewards-arena .hero__eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim);
}
.rewards-arena .hero__eyebrow strong { color: var(--accent-gold); font-weight: 700; }
.rewards-arena .hero__eyebrow .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-teal); box-shadow: 0 0 6px var(--accent-teal);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.rewards-arena .hero__points { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rewards-arena .hero__points-value {
  font-family: var(--font-display); font-size: 64px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1;
  background: linear-gradient(135deg, #ffd24a, var(--accent-gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.rewards-arena .hero__points-unit {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}

.rewards-arena .hero__share { display: flex; flex-direction: column; gap: 8px; }
.rewards-arena .hero__share-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
.rewards-arena .hero__share-label {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim);
}
.rewards-arena .hero__share-value { display: flex; align-items: baseline; gap: 6px; }
.rewards-arena .hero__share-value strong {
  font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--accent-gold);
}
.rewards-arena .hero__share-value small { font-size: 11px; color: var(--text-dim); }
.rewards-arena .hero__share-bar { height: 6px; border-radius: 100px; background: rgba(255,255,255,0.06); overflow: hidden; }
.rewards-arena .hero__share-bar-fill {
  height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--accent-gold), #ffd24a);
  box-shadow: 0 0 12px rgba(252, 179, 0, 0.40);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.rewards-arena .hero__share-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-dim);
  font-family: var(--font-display); letter-spacing: 0.06em;
}

.rewards-arena .hero__side {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px; background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle); border-radius: 14px;
}
html[data-theme="light"] .rewards-arena .hero__side,
[data-theme="light"] .rewards-arena .hero__side {
  background: rgba(252, 179, 0, 0.04);
  border-color: rgba(198, 135, 0, 0.18);
}
.rewards-arena .hero__token-label {
  font-family: var(--font-display); font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);
  display: flex; align-items: center; gap: 6px;
}
.rewards-arena .hero__token-label svg { width: 11px; height: 11px; color: var(--accent-teal); }
.rewards-arena .hero__token-value { display: flex; align-items: baseline; gap: 8px; }
.rewards-arena .hero__token-value strong {
  font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--accent-teal);
  line-height: 1;
}
.rewards-arena .hero__token-value small {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted);
}
.rewards-arena .hero__token-formula {
  font-size: 11px; line-height: 1.5; color: var(--text-dim);
  padding: 8px 10px; background: rgba(110, 237, 216, 0.04);
  border-radius: 8px; border: 1px solid rgba(110, 237, 216, 0.10);
}
.rewards-arena .hero__token-formula code {
  font-family: var(--font-display); color: var(--accent-teal);
  font-size: 10px; letter-spacing: 0.04em;
}
.rewards-arena .hero__countdown {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(252, 179, 0, 0.05); border: 1px solid rgba(252, 179, 0, 0.15);
}
.rewards-arena .hero__countdown svg { width: 14px; height: 14px; color: var(--accent-gold); flex-shrink: 0; }
.rewards-arena .hero__countdown-text { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
.rewards-arena .hero__countdown-text strong {
  font-family: var(--font-display); color: var(--accent-gold);
  font-weight: 700; letter-spacing: 0.04em;
}

/* Token card */
.rewards-arena .token-card {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 0;
  background: var(--bg-glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle); border-radius: 16px;
  overflow: hidden;
}
.rewards-arena .token-card__main {
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
  border-right: 1px solid var(--border-subtle);
}
.rewards-arena .token-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rewards-arena .token-card__label {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);
  display: flex; align-items: center; gap: 8px;
}
.rewards-arena .token-card__label::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green);
}
.rewards-arena .token-card__delta {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em; padding: 4px 9px; border-radius: 100px;
  background: rgba(34, 197, 94, 0.08); color: var(--accent-green);
  border: 1px solid rgba(34, 197, 94, 0.18);
}
.rewards-arena .token-card__delta svg { width: 11px; height: 11px; }
.rewards-arena .token-card__price { display: flex; align-items: baseline; gap: 8px; }
.rewards-arena .token-card__price-num {
  font-family: var(--font-display); font-size: 46px; font-weight: 800;
  letter-spacing: -0.02em; color: var(--text-primary); line-height: 1;
}
.rewards-arena .token-card__price-unit {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted);
}
.rewards-arena .token-card__sub { font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }

.rewards-arena .token-card__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: auto; padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}
.rewards-arena .token-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rewards-arena .token-stat__label {
  font-family: var(--font-display); font-size: 9px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim);
}
.rewards-arena .token-stat__value {
  font-family: var(--font-display); font-size: 13.5px; font-weight: 700;
  color: var(--text-primary); display: flex; align-items: baseline; gap: 3px;
  white-space: nowrap; overflow: hidden;
}
.rewards-arena .token-stat__value small {
  font-size: 9px; font-weight: 600; color: var(--text-dim);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.rewards-arena .token-stat__value--green { color: var(--accent-green); }

.rewards-arena .token-card__chart {
  padding: 18px 22px;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.rewards-arena .token-card__chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rewards-arena .token-card__chart-title {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim);
}
.rewards-arena .token-range {
  display: inline-flex; background: var(--bg-input);
  border: 1px solid var(--border-subtle); border-radius: 8px;
  padding: 2px; gap: 1px;
}
.rewards-arena .token-range__btn {
  padding: 5px 10px; border-radius: 6px;
  background: transparent; border: none;
  font-family: var(--font-display); font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--text-dim);
  cursor: pointer; transition: all 0.2s ease;
}
.rewards-arena .token-range__btn:hover { color: var(--text-primary); }
.rewards-arena .token-range__btn[aria-selected="true"] {
  background: rgba(252, 179, 0, 0.10); color: var(--accent-gold);
  box-shadow: inset 0 0 0 1px rgba(252, 179, 0, 0.20);
}

.rewards-arena .price-chart { position: relative; width: 100%; flex: 1; min-height: 170px; }
.rewards-arena .price-chart svg { width: 100%; height: 170px; display: block; }

/* Charts row */
.rewards-arena .charts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.rewards-arena .chart-card {
  background: var(--bg-glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle); border-radius: 14px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.rewards-arena .chart-card__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding-bottom: 4px;
}
.rewards-arena .chart-card__title {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
  display: flex; align-items: center; gap: 8px;
}
.rewards-arena .chart-card__title::before {
  content: ''; width: 3px; height: 11px; border-radius: 2px;
  background: var(--accent-gold);
}
.rewards-arena .chart-card__subtitle {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em; color: var(--text-dim); margin-top: 4px;
}

.rewards-arena .chart-legends { display: flex; gap: 14px; align-items: center; }
.rewards-arena .chart-legend {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim);
}
.rewards-arena .legend-swatch { display: inline-block; flex-shrink: 0; }
.rewards-arena .legend-swatch--bar {
  width: 10px; height: 10px; border-radius: 2px;
  background: linear-gradient(180deg, #ffd24a, #fcb300);
}
.rewards-arena .legend-swatch--line {
  width: 16px; height: 3px; border-radius: 2px;
  background: var(--accent-teal); box-shadow: 0 0 6px rgba(110, 237, 216, 0.5);
}

.rewards-arena .combo-chart { position: relative; width: 100%; min-height: 240px; }
.rewards-arena .combo-chart svg { width: 100%; height: 240px; display: block; overflow: visible; }

/* Donut */
/* ── Section label (team-arena header pattern) ── */
.rewards-arena .section-label {
  text-align: center;
  padding: 28px 28px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
}
.rewards-arena .section-label__dash {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--text-dim), transparent);
}
.rewards-arena .section-label__title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.rewards-arena .section-label__title strong {
  color: var(--accent-gold);
  font-weight: 700;
}

.rewards-arena .donut-wrap { display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: center; }
.rewards-arena .donut { width: 160px; height: 160px; display: block; }

/* Light theme: the inline SVG fills baked into `render_donut` assume dark
 * theme (near-white text + 5% white track). Override them for light bg. */
html[data-theme="light"] .rewards-arena .donut circle,
[data-theme="light"] .rewards-arena .donut circle {
  stroke: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .rewards-arena .donut text,
[data-theme="light"] .rewards-arena .donut text {
  fill: #1a1a24;
}
html[data-theme="light"] .rewards-arena .donut text + text,
[data-theme="light"] .rewards-arena .donut text + text {
  fill: #9d9db3;
}
.rewards-arena .donut-legend { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rewards-arena .legend-item {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 9px; align-items: center;
  font-size: 12.5px; color: var(--text-muted);
}
.rewards-arena .legend-dot { width: 8px; height: 8px; border-radius: 2px; }
.rewards-arena .legend-name {
  font-weight: 600; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rewards-arena .legend-value {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  color: var(--text-primary); letter-spacing: 0.04em;
  display: flex; align-items: baseline; gap: 4px;
}
.rewards-arena .legend-value small { font-size: 9px; color: var(--text-dim); font-weight: 600; }

/* Section header */
.rewards-arena .section-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.rewards-arena .section-head__title {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted);
  display: flex; align-items: center; gap: 10px;
}
.rewards-arena .section-head__title::before {
  content: ''; width: 3px; height: 14px; border-radius: 2px;
  background: var(--accent-gold);
}
.rewards-arena .section-head__count {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em; color: var(--text-dim);
}
.rewards-arena .section-head__count strong { color: var(--text-muted); }

/* Persistent inline notice below a section header. Currently used by the
   Past Cycles section to flag that on-chain token swap isn't live yet —
   the per-card Swap All button shows the same hint on hover, but this
   line surfaces the same info without requiring hover. Small, dim, with
   an info-circle leading icon so it reads as a system notice rather
   than user content. */
.rewards-arena .section-note {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 4px 4px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--dark, rgba(110, 237, 216, 0.06)) var(--light, rgba(20, 120, 110, 0.08));
  border: 1px solid var(--dark, rgba(110, 237, 216, 0.14)) var(--light, rgba(20, 120, 110, 0.18));
  font-size: 11.5px; line-height: 1.4;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.rewards-arena .section-note svg {
  width: 13px; height: 13px; flex-shrink: 0;
  color: var(--accent-teal);
}

/* Activity */
.rewards-arena .activity {
  background: var(--bg-glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden;
  margin-top: 14px;
}
.rewards-arena .activity__row {
  display: grid;
  grid-template-columns: 42px 1fr 120px 64px;
  gap: 14px;
  align-items: center; padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.15s ease;
}
.rewards-arena .activity__row:last-child { border-bottom: none; }
.rewards-arena .activity__row:hover { background: rgba(255, 255, 255, 0.02); }
.rewards-arena .activity__icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: rgba(252, 179, 0, 0.08); color: var(--accent-gold);
}
.rewards-arena .activity__icon svg { width: 16px; height: 16px; }
.rewards-arena .activity__icon--in { background: rgba(110, 237, 216, 0.08); color: var(--accent-teal); }
.rewards-arena .activity__icon--out { background: rgba(239, 68, 68, 0.06); color: var(--accent-coral); }
.rewards-arena .activity__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rewards-arena .activity__title {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rewards-arena .activity__source {
  font-size: 11.5px; color: var(--text-dim);
  display: flex; align-items: center; gap: 6px;
}
.rewards-arena .activity__amount {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  letter-spacing: 0.04em; text-align: right;
}
.rewards-arena .activity__amount--in { color: var(--accent-teal); }
.rewards-arena .activity__amount--out { color: var(--accent-coral); }
.rewards-arena .activity__amount small {
  font-size: 9px; font-weight: 600; letter-spacing: 0.10em;
  color: var(--text-dim); margin-left: 3px; text-transform: uppercase;
}
.rewards-arena .activity__time {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--text-dim); text-align: right; white-space: nowrap;
}
.rewards-arena .activity__loadmore {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px;
  background: transparent; border: none;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted);
  cursor: pointer; transition: all 0.2s ease; width: 100%;
}
.rewards-arena .activity__loadmore:hover { background: rgba(252, 179, 0, 0.04); color: var(--accent-gold); }
.rewards-arena .activity__loadmore svg { width: 13px; height: 13px; }

/* Past cycles */
.rewards-arena .cycles { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.rewards-arena .cycle-card {
  display: grid; grid-template-columns: 120px 1fr auto; gap: 24px;
  align-items: center; padding: 20px 24px;
  background: var(--bg-glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle); border-radius: 14px;
  transition: all 0.2s ease;
}
.rewards-arena .cycle-card:hover { border-color: rgba(252, 179, 0, 0.18); background: var(--bg-glass-hover); }
.rewards-arena .cycle-card--claimed { opacity: 0.78; }
.rewards-arena .cycle-card--available {
  border-color: rgba(252, 179, 0, 0.22);
  box-shadow: 0 0 24px rgba(252, 179, 0, 0.06);
}

.rewards-arena .cycle-card__month { display: flex; flex-direction: column; gap: 2px; }
.rewards-arena .cycle-card__month-label {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--text-primary);
}
.rewards-arena .cycle-card__month-year {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim);
}

.rewards-arena .cycle-card__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; min-width: 0;
}
.rewards-arena .cycle-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rewards-arena .cycle-stat__label {
  font-family: var(--font-display); font-size: 9px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim);
}
.rewards-arena .cycle-stat__value {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--text-primary); display: flex; align-items: baseline; gap: 3px;
  white-space: nowrap; overflow: hidden;
}
.rewards-arena .cycle-stat__value small {
  font-size: 10px; font-weight: 600; color: var(--text-dim);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.rewards-arena .cycle-stat--token .cycle-stat__value { color: var(--accent-teal); }

.rewards-arena .cycle-card__action { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rewards-arena .cycle-card__claimed {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 9px;
  background: rgba(34, 197, 94, 0.06); border: 1px solid rgba(34, 197, 94, 0.15);
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--accent-green);
}
.rewards-arena .cycle-card__claimed svg { width: 13px; height: 13px; }
.rewards-arena .cycle-card__claim {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 9px;
  background: linear-gradient(135deg, var(--accent-gold), #e5a200);
  color: #0a0a0a; border: none;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  cursor: pointer; transition: all 0.2s ease;
  box-shadow: 0 2px 14px rgba(252, 179, 0, 0.20);
}
.rewards-arena .cycle-card__claim:hover {
  background: linear-gradient(135deg, #ffd24a, var(--accent-gold));
  box-shadow: 0 4px 22px rgba(252, 179, 0, 0.40);
  transform: translateY(-1px); color: #0a0a0a;
}
.rewards-arena .cycle-card__claim svg { width: 12px; height: 12px; }
/* Disabled "Swap All" — claim/swap pipeline not yet ready. Native
   button[disabled] strips clicks; this styling makes the button look
   non-interactive so the user doesn't mistake it for an active CTA,
   and the `title` attribute on the element provides a hover hint
   ("Coming soon"). */
.rewards-arena .cycle-card__claim:disabled {
  background: var(--dark, rgba(255,255,255,0.04)) var(--light, rgba(0,0,0,0.04));
  color: var(--dark, rgba(255,255,255,0.45)) var(--light, rgba(0,0,0,0.45));
  border: 1px solid var(--dark, rgba(255,255,255,0.08)) var(--light, rgba(0,0,0,0.08));
  box-shadow: none;
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.7;
}
.rewards-arena .cycle-card__claim:disabled:hover {
  background: var(--dark, rgba(255,255,255,0.04)) var(--light, rgba(0,0,0,0.04));
  color: var(--dark, rgba(255,255,255,0.45)) var(--light, rgba(0,0,0,0.45));
  box-shadow: none;
  transform: none;
}
.rewards-arena .cycle-card__expand {
  width: 36px; height: 36px; border-radius: 9px;
  background: transparent; border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); cursor: pointer; transition: all 0.2s ease; padding: 0;
}
.rewards-arena .cycle-card__expand:hover { border-color: rgba(252, 179, 0, 0.20); color: var(--accent-gold); }
.rewards-arena .cycle-card__expand svg { width: 14px; height: 14px; transition: transform 0.2s; }
.rewards-arena .cycle-card[data-expanded="true"] .cycle-card__expand svg {
  transform: rotate(180deg); color: var(--accent-gold);
}

.rewards-arena .cycle-card__detail {
  display: none;
  grid-column: 1 / -1;
  padding-top: 16px; margin-top: 16px;
  border-top: 1px solid var(--border-subtle);
  flex-direction: column; gap: 4px;
}
.rewards-arena .cycle-card[data-expanded="true"] .cycle-card__detail { display: flex; }
.rewards-arena .cycle-card__detail-row {
  display: grid; grid-template-columns: 32px 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 8px 0; font-size: 12.5px;
}
.rewards-arena .cycle-card__detail-icon {
  width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.rewards-arena .cycle-card__detail-icon svg { width: 12px; height: 12px; }
.rewards-arena .cycle-card__detail-icon--in { background: rgba(110, 237, 216, 0.06); color: var(--accent-teal); }
.rewards-arena .cycle-card__detail-icon--out { background: rgba(239, 68, 68, 0.05); color: var(--accent-coral); }
.rewards-arena .cycle-card__detail-title { font-size: 13px; color: var(--text-muted); }
.rewards-arena .cycle-card__detail-amount {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--text-muted);
}
.rewards-arena .cycle-card__detail-amount--in { color: var(--accent-teal); }
.rewards-arena .cycle-card__detail-amount--out { color: var(--accent-coral); }
.rewards-arena .cycle-card__detail-time {
  font-family: var(--font-display); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--text-dim); text-align: right; white-space: nowrap;
}

.rewards-arena .cycles__loadmore {
  display: inline-flex; align-self: center; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: transparent; border: 1px solid var(--border-subtle);
  border-radius: 10px;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted);
  cursor: pointer; transition: all 0.2s ease; margin-top: 6px;
}
.rewards-arena .cycles__loadmore:hover { border-color: rgba(252, 179, 0, 0.20); color: var(--accent-gold); }
.rewards-arena .cycles__loadmore svg { width: 13px; height: 13px; }

/* Empty */
.rewards-arena .empty {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 40px 24px; text-align: center;
}
.rewards-arena .empty__icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(252, 179, 0, 0.06); border: 1px solid rgba(252, 179, 0, 0.15);
  display: flex; align-items: center; justify-content: center; color: var(--accent-gold);
}
.rewards-arena .empty__icon svg { width: 24px; height: 24px; }
.rewards-arena .empty__title {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.rewards-arena .empty__desc { font-size: 12.5px; line-height: 1.55; color: var(--text-dim); max-width: 340px; }

@media (max-width: 880px) {
  .rewards-arena .page { padding: 24px 18px 50px; gap: 22px; }
  .rewards-arena .hero { grid-template-columns: 1fr; gap: 22px; padding: 24px 22px; }
  .rewards-arena .hero__points-value { font-size: 52px; }
  .rewards-arena .charts { grid-template-columns: 1fr; }
  .rewards-arena .donut-wrap { grid-template-columns: 140px 1fr; gap: 14px; }
  .rewards-arena .donut { width: 140px; height: 140px; }
  .rewards-arena .activity__row { grid-template-columns: 36px 1fr 96px; gap: 11px; padding: 12px 14px; }
  .rewards-arena .activity__time { display: none; }
}
@media (max-width: 500px) {
  .rewards-arena .page { padding: 18px 12px 40px; gap: 16px; }
  .rewards-arena .hero { padding: 20px 16px; gap: 18px; }
  .rewards-arena .hero__points-value { font-size: 42px; }
  .rewards-arena .hero__points-unit { font-size: 14px; }
  .rewards-arena .hero__eyebrow { font-size: 10px; flex-wrap: wrap; }
  .rewards-arena .hero__token-value strong { font-size: 24px; }
  .rewards-arena .hero__token-formula { font-size: 11px; word-break: break-all; }
  .rewards-arena .hero__share-meta { font-size: 10px; }
  .rewards-arena .chart-card { padding: 16px 14px; }
  .rewards-arena .chart-card__head { flex-wrap: wrap; gap: 8px; }
  .rewards-arena .chart-card__title { font-size: 14px; }
  .rewards-arena .chart-card__subtitle { font-size: 11px; }
  .rewards-arena .chart-legends { gap: 10px; flex-wrap: wrap; }
  .rewards-arena .donut-wrap { grid-template-columns: 1fr; justify-items: center; gap: 16px; }
  .rewards-arena .donut { width: 160px; height: 160px; }
  .rewards-arena .section-head { flex-wrap: wrap; gap: 6px; }
  .rewards-arena .section-head__title { font-size: 12px; }
  .rewards-arena .activity__row { padding: 10px 12px; }
  .rewards-arena .activity__title { font-size: 13px; }
  .rewards-arena .activity__amount { font-size: 13px; }
}


/* === src/features/social/pages/setting/views/style.css === */
/* ── Team Settings Arena Page (scoped to .team-arena) ── */

.team-arena .ts-page {
  position: relative;
  z-index: 10;
  max-width: 820px;
  margin: 0 auto;
  padding: 8px 28px 80px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Section label ── */
.team-arena .ts-section-label {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 28px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
}
.team-arena .ts-section-label__dash {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--text-dim), transparent);
}
.team-arena .ts-section-label__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.team-arena .ts-section-label__title strong {
  color: var(--accent-gold);
  font-weight: 700;
}

/* ── Setting card ── */
.team-arena .ts-card {
  position: relative;
  padding: 22px 24px;
  background: var(--bg-glass);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.team-arena .ts-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.team-arena .ts-card__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--accent-gold), #ffd24a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-theme="light"] .team-arena .ts-card__title,
[data-theme="light"] .team-arena .ts-card__title {
  background: linear-gradient(135deg, #c68700, #8d5f00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.team-arena .ts-card__dash {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(252, 179, 0, 0.2), transparent);
}

/* ── Field ── */
.team-arena .ts-field { display: flex; flex-direction: column; margin-bottom: 20px; }
.team-arena .ts-field:last-of-type { margin-bottom: 0; }
.team-arena .ts-field__label {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.team-arena .ts-field__input,
.team-arena .ts-field__textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 11px;
  background: rgba(6, 6, 14, 0.6);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  transition: all 0.25s;
  outline: none;
  resize: vertical;
  box-sizing: border-box;
}
html[data-theme="light"] .team-arena .ts-field__input,
html[data-theme="light"] .team-arena .ts-field__textarea,
[data-theme="light"] .team-arena .ts-field__input,
[data-theme="light"] .team-arena .ts-field__textarea {
  background: rgba(0, 0, 0, 0.03);
}
.team-arena .ts-field__input::placeholder,
.team-arena .ts-field__textarea::placeholder { color: var(--text-dim); }
.team-arena .ts-field__input:focus,
.team-arena .ts-field__textarea:focus {
  border-color: rgba(252, 179, 0, 0.3);
  box-shadow: 0 0 14px rgba(252, 179, 0, 0.1);
}
.team-arena .ts-field__textarea { min-height: 100px; line-height: 1.55; }
.team-arena .ts-field__hint { margin-top: 8px; font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; }

/* ── Logo uploader ── */
.team-arena .ts-logo-row { display: flex; align-items: center; gap: 16px; }
.team-arena .ts-logo-thumb {
  width: 76px;
  height: 76px;
  border-radius: 14px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.9), rgba(252, 179, 0, 0.55));
  border: 1px solid rgba(252, 179, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(252, 179, 0, 0.15);
  overflow: hidden;
}
.team-arena .ts-logo-thumb svg { width: 38px; height: 38px; color: #0c0c1a; }
img.ts-logo-thumb { object-fit: cover; }
/* FileUploader wrapper — constrain to button width so clicks outside the
   button don't trigger the file dialog. */
.team-arena .ts-logo-upload-wrap {
  display: inline-block;
  width: fit-content;
  align-self: flex-start;
}
.team-arena .ts-logo-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
}
html[data-theme="light"] .team-arena .ts-logo-upload-btn,
[data-theme="light"] .team-arena .ts-logo-upload-btn { background: rgba(0, 0, 0, 0.03); }
.team-arena .ts-logo-upload-btn:hover {
  background: rgba(252, 179, 0, 0.06);
  border-color: rgba(252, 179, 0, 0.25);
  color: var(--accent-gold);
}
.team-arena .ts-logo-upload-btn svg { width: 13px; height: 13px; }

/* ── Save footer ── */
.team-arena .ts-save-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.team-arena .ts-save-timestamp {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.team-arena .ts-save-timestamp strong { color: var(--text-muted); font-weight: 700; }

.team-arena .ts-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: 11px;
  border: 1px solid rgba(252, 179, 0, 0.3);
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.22), rgba(110, 237, 216, 0.08));
  color: var(--accent-gold);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 0 16px rgba(252, 179, 0, 0.1);
  white-space: nowrap;
}
.team-arena .ts-btn-primary:hover:not([disabled]) {
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.32), rgba(110, 237, 216, 0.14));
  box-shadow: 0 0 24px rgba(252, 179, 0, 0.22);
  transform: translateY(-1px);
}
.team-arena .ts-btn-primary[disabled] { opacity: 0.4; cursor: not-allowed; }
.team-arena .ts-btn-primary svg { width: 13px; height: 13px; }

/* ── Billing row ── */
.team-arena .ts-billing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.team-arena .ts-billing-row:last-child { border-bottom: none; padding-bottom: 4px; }
.team-arena .ts-billing-row__label { font-size: 13px; color: var(--text-muted); letter-spacing: 0.04em; }
.team-arena .ts-billing-row__right { display: flex; align-items: center; gap: 12px; }
.team-arena .ts-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(110, 237, 216, 0.08);
  color: var(--accent-teal);
  border: 1px solid rgba(110, 237, 216, 0.22);
}
.team-arena .ts-plan-badge--pro {
  background: rgba(129, 140, 248, 0.12);
  color: #818cf8;
  border-color: rgba(129, 140, 248, 0.30);
}
.team-arena .ts-plan-badge--max {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
  border-color: rgba(168, 85, 247, 0.30);
}
.team-arena .ts-plan-badge--vip {
  background: rgba(252, 179, 0, 0.12);
  color: var(--accent-gold);
  border-color: rgba(252, 179, 0, 0.30);
}

/* Card form — nested inputs */
.team-arena .ts-card-form {
  margin-top: 14px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.02);
}
html[data-theme="light"] .team-arena .ts-card-form,
[data-theme="light"] .team-arena .ts-card-form {
  background: rgba(0, 0, 0, 0.02);
}
/* The row zeroes its children's `margin-bottom` so the two side-by-side
   fields do not double it up — which left the row itself with no gap under it,
   and the field after it (Birth Date, below Expiry Month / Expiry Year) sat
   flush against the inputs above while every other field had 20px. Carry the
   same 20px on the row. */
.team-arena .ts-field-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.team-arena .ts-field-row > .ts-field { flex: 1; margin-bottom: 0; }
.team-arena .ts-plan-change-link {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-gold);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: opacity 0.2s, color 0.2s;
}
.team-arena .ts-plan-change-link:hover { opacity: 0.85; text-decoration: underline; text-underline-offset: 3px; }

/* Secondary link (View Membership) — teal so it contrasts with the gold
 * Change Plan CTA when both render side-by-side. */
.team-arena .ts-plan-change-link[data-testid="team-settings-view-membership"] {
  color: #6eedd8;
}
html[data-theme="light"] .team-arena .ts-plan-change-link[data-testid="team-settings-view-membership"],
[data-theme="light"] .team-arena .ts-plan-change-link[data-testid="team-settings-view-membership"] {
  color: #12a58a;
}
.team-arena .ts-credit-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.05em;
}
.team-arena .ts-credit-value span { color: var(--text-dim); font-weight: 500; }

/* ── Danger zone ── */
.team-arena .ts-danger-card {
  border-color: rgba(239, 68, 68, 0.18);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.04), rgba(12, 12, 26, 0.65));
}
html[data-theme="light"] .team-arena .ts-danger-card,
[data-theme="light"] .team-arena .ts-danger-card {
  border-color: rgba(220, 38, 38, 0.24);
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.05), rgba(255, 255, 255, 0.78));
}
.team-arena .ts-danger-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.team-arena .ts-danger-card__left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.team-arena .ts-danger-card__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ef4444;
}
html[data-theme="light"] .team-arena .ts-danger-card__title,
[data-theme="light"] .team-arena .ts-danger-card__title { color: #b91c1c; }
.team-arena .ts-danger-card__desc { font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; }

.team-arena .ts-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 11px;
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.22);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
  white-space: nowrap;
}
html[data-theme="light"] .team-arena .ts-btn-danger,
[data-theme="light"] .team-arena .ts-btn-danger {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.30);
}
.team-arena .ts-btn-danger:hover {
  background: rgba(239, 68, 68, 0.16);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.15);
  transform: translateY(-1px);
}
.team-arena .ts-btn-danger svg { width: 14px; height: 14px; }

/* ── Delete confirm modal (poll-confirm pattern) ── */
.team-arena .ts-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 24px;
  animation: ts-modal-overlay-in 0.2s ease;
}
@keyframes ts-modal-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.team-arena .ts-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 28px 28px 24px;
  background: rgba(16, 16, 32, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(239, 68, 68, 0.08);
  animation: ts-modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ts-modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
html[data-theme="light"] .team-arena .ts-modal-overlay,
[data-theme="light"] .team-arena .ts-modal-overlay {
  background: rgba(0, 0, 0, 0.35);
}
html[data-theme="light"] .team-arena .ts-modal,
[data-theme="light"] .team-arena .ts-modal {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(220, 38, 38, 0.22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14), 0 0 28px rgba(220, 38, 38, 0.06);
}
.team-arena .ts-modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.team-arena .ts-modal__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ef4444;
}
html[data-theme="light"] .team-arena .ts-modal__title,
[data-theme="light"] .team-arena .ts-modal__title { color: #b91c1c; }
.team-arena .ts-modal__close {
  width: 30px; height: 30px; padding: 0; border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.team-arena .ts-modal__close:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.08); }
.team-arena .ts-modal__close svg { width: 14px; height: 14px; }
.team-arena .ts-modal__body { display: flex; flex-direction: column; gap: 14px; }
.team-arena .ts-modal__desc { font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.team-arena .ts-modal__desc strong { color: var(--text-primary); font-weight: 600; }
.team-arena .ts-modal__actions { display: flex; gap: 10px; margin-top: 4px; }
.team-arena .ts-modal__cancel,
.team-arena .ts-modal__confirm-danger {
  flex: 1;
  padding: 12px;
  border-radius: 11px;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
  border: 1px solid var(--border-subtle);
}
.team-arena .ts-modal__cancel {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  font-weight: 700;
}
.team-arena .ts-modal__cancel:hover { background: rgba(255, 255, 255, 0.06); }
.team-arena .ts-modal__confirm-danger {
  background: rgba(239, 68, 68, 0.16);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.22);
}
html[data-theme="light"] .team-arena .ts-modal__confirm-danger,
[data-theme="light"] .team-arena .ts-modal__confirm-danger {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.32);
}
.team-arena .ts-modal__confirm-danger:hover { background: rgba(239, 68, 68, 0.26); box-shadow: 0 0 18px rgba(239, 68, 68, 0.2); }

/* ── Responsive ── */
@media (max-width: 720px) {
  .team-arena .ts-page { padding: 8px 14px 60px; gap: 14px; }
  .team-arena .ts-section-label { padding: 0 14px; margin-bottom: 14px; }
  .team-arena .ts-card { padding: 18px 16px; }
  .team-arena .ts-card__title { font-size: 11px; }
  .team-arena .ts-logo-row { gap: 12px; }
  .team-arena .ts-logo-thumb { width: 60px; height: 60px; border-radius: 12px; }
  .team-arena .ts-logo-thumb svg { width: 28px; height: 28px; }
  .team-arena .ts-logo-upload-btn { padding: 7px 12px; font-size: 10px; }
  .team-arena .ts-save-footer { gap: 8px; }
  .team-arena .ts-btn-primary { padding: 9px 16px; font-size: 10px; width: 100%; justify-content: center; }
  .team-arena .ts-save-timestamp { font-size: 9px; }
  .team-arena .ts-billing-row__label { font-size: 12px; }
  /* The value side is a nowrap flex row — on the Current Plan line that is the
     ENTERPRISE badge plus "VIEW MEMBERSHIP" and "CHANGE PLAN", both Orbitron
     with 0.1em tracking. Its min-content is wider than the row on a phone, so
     it pushed out of the card and "CHANGE PLAN" was clipped at the screen
     edge. Wrapping at both levels keeps the label-left / value-right shape
     while giving the links somewhere to go; `min-width: 0` lets the group
     shrink past the flex automatic minimum so the row itself never overflows.
     Other rows (Credits, Expires, Card) hold single short values and are
     unaffected.

     Only the group wraps, not the row: `flex-wrap` on the row would break on
     the group's max-content base size and drop the whole value block below
     the label, costing a third line for nothing. With `min-width: 0` the
     group shrinks in place instead, so the label keeps its own line and the
     links wrap under the badge. */
  .team-arena .ts-billing-row__right {
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
    gap: 10px;
  }
  .team-arena .ts-danger-card__header { gap: 10px; }
  .team-arena .ts-danger-card__title { font-size: 11px; }
  .team-arena .ts-btn-danger { padding: 9px 14px; font-size: 10px; width: 100%; justify-content: center; }
  .team-arena .ts-modal { padding: 22px 20px 18px; }
  .team-arena .ts-modal__title { font-size: 12px; }
}


/* === src/features/social/pages/setting/views/subscription_page/style.css === */
/*
 * Team subscription page — tier selection board.
 * The arena background (stars/grid/orbs/scanline), topbar, and settings panel
 * are all provided by TeamArenaLayout, so this stylesheet only covers the
 * section-label / hero / tier-grid / enterprise-card / footer-note.
 *
 * Dark/light colors come from the space-toggle variables defined on
 * `html[data-theme]` in `dx-components-theme.css` and mirrored per-component
 * below. Never hardcode colors — always provide both themes.
 */

.ts-sub-page {
    --sub-bg-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.78));
    --sub-bg-glass-hover: var(--dark, rgba(20, 20, 40, 0.80)) var(--light, rgba(255, 255, 255, 0.92));
    --sub-border-subtle: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
    --sub-text-primary: var(--dark, #f0f0f5) var(--light, #1a1a24);
    --sub-text-muted: var(--dark, #8888a8) var(--light, #5f6075);
    --sub-text-dim: var(--dark, #55556a) var(--light, #9d9db3);
    --sub-accent-gold: var(--dark, #fcb300) var(--light, #c68700);
    --sub-accent-teal: var(--dark, #6eedd8) var(--light, #12a58a);

    --tier-free-c: var(--dark, #8888a8) var(--light, #5f6075);
    --tier-free-bg: var(--dark, rgba(136, 136, 168, 0.08)) var(--light, rgba(95, 96, 117, 0.08));
    --tier-free-bd: var(--dark, rgba(136, 136, 168, 0.22)) var(--light, rgba(95, 96, 117, 0.28));

    --tier-pro-c: var(--dark, #6eedd8) var(--light, #12a58a);
    --tier-pro-bg: var(--dark, rgba(110, 237, 216, 0.08)) var(--light, rgba(18, 165, 138, 0.08));
    --tier-pro-bd: var(--dark, rgba(110, 237, 216, 0.28)) var(--light, rgba(18, 165, 138, 0.32));

    --tier-max-c: var(--dark, #a855f7) var(--light, #7e22ce);
    --tier-max-bg: var(--dark, rgba(168, 85, 247, 0.08)) var(--light, rgba(126, 34, 206, 0.08));
    --tier-max-bd: var(--dark, rgba(168, 85, 247, 0.30)) var(--light, rgba(126, 34, 206, 0.32));

    --tier-vip-c: var(--dark, #fcb300) var(--light, #c68700);
    --tier-vip-bg: var(--dark, rgba(252, 179, 0, 0.10)) var(--light, rgba(198, 135, 0, 0.10));
    --tier-vip-bd: var(--dark, rgba(252, 179, 0, 0.34)) var(--light, rgba(198, 135, 0, 0.40));

    --tier-ent-c: var(--dark, #ff7ab6) var(--light, #c63f7a);
    --tier-ent-bg: var(--dark, rgba(255, 122, 182, 0.08)) var(--light, rgba(198, 63, 122, 0.08));
    --tier-ent-bd: var(--dark, rgba(255, 122, 182, 0.26)) var(--light, rgba(198, 63, 122, 0.30));

    --font-display: "Orbitron", sans-serif;
    --font-body: "Outfit", "Noto Sans KR", sans-serif;

    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ── Section label ── */
.ts-sub-page .section-label {
    text-align: center;
    padding: 0 28px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
}
.ts-sub-page .section-label__dash {
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sub-text-dim), transparent);
}
.ts-sub-page .section-label__title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sub-text-dim);
}
.ts-sub-page .section-label__title strong {
    color: var(--sub-accent-gold);
    font-weight: 700;
}

/* ── Hero ── */
.ts-sub-page .hero {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 28px;
    padding: 0 28px;
}
.ts-sub-page .hero__title {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #ffffff 0%, var(--sub-accent-gold) 50%, #ffd24a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 14px;
    line-height: 1.1;
}
[data-theme="light"] .ts-sub-page .hero__title {
    background: linear-gradient(135deg, #c68700, #8d5f00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ts-sub-page .hero__title-ko {
    font-family: var(--font-body);
    font-weight: 800;
    letter-spacing: 0.02em;
    display: block;
    margin-top: 6px;
    font-size: 22px;
    background: linear-gradient(135deg, var(--sub-accent-gold), #ffd24a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
[data-theme="light"] .ts-sub-page .hero__title-ko {
    background: linear-gradient(135deg, #c68700, #8d5f00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ts-sub-page .hero__desc {
    font-size: 14px;
    color: var(--sub-text-muted);
    line-height: 1.7;
    letter-spacing: 0.02em;
    max-width: 620px;
    margin: 0 auto;
}
.ts-sub-page .hero__desc strong {
    color: var(--sub-accent-gold);
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: 0.08em;
}
.ts-sub-page .hero__desc em {
    color: var(--sub-accent-teal);
    font-style: normal;
    font-weight: 600;
}

/* ── Page container ── */
.ts-sub-page .page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4px 28px 80px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Tier grid ── */
.ts-sub-page .tier-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, 1fr);
}

.ts-sub-page .tier-card {
    --tier-c: var(--tier-free-c);
    --tier-bg: var(--tier-free-bg);
    --tier-bd: var(--tier-free-bd);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px 20px 24px;
    background: var(--sub-bg-glass);
    backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid var(--sub-border-subtle);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: all 0.3s;
    overflow: hidden;
    min-height: 520px;
}
[data-theme="light"] .ts-sub-page .tier-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 20px rgba(0, 0, 0, 0.06);
}
.ts-sub-page .tier-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tier-c), transparent);
    opacity: 0.6;
}
.ts-sub-page .tier-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 50% at 50% 0%, var(--tier-bg), transparent 70%);
    opacity: 0.8;
}
.ts-sub-page .tier-card:hover {
    border-color: var(--tier-bd);
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4), 0 0 32px var(--tier-bg);
}

.ts-sub-page .tier-card--pro {
    --tier-c: var(--tier-pro-c);
    --tier-bg: var(--tier-pro-bg);
    --tier-bd: var(--tier-pro-bd);
}
.ts-sub-page .tier-card--max {
    --tier-c: var(--tier-max-c);
    --tier-bg: var(--tier-max-bg);
    --tier-bd: var(--tier-max-bd);
}
.ts-sub-page .tier-card--vip {
    --tier-c: var(--tier-vip-c);
    --tier-bg: var(--tier-vip-bg);
    --tier-bd: var(--tier-vip-bd);
    border-color: rgba(252, 179, 0, 0.18);
}
.ts-sub-page .tier-card--vip::before {
    height: 3px;
    opacity: 1;
}

.ts-sub-page .tier-card__ribbon {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 100px;
    background: rgba(252, 179, 0, 0.15);
    border: 1px solid rgba(252, 179, 0, 0.3);
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sub-accent-gold);
    z-index: 2;
}
.ts-sub-page .tier-card__ribbon::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sub-accent-gold);
    box-shadow: 0 0 6px rgba(252, 179, 0, 0.8);
}

.ts-sub-page .tier-card__head {
    position: relative;
    z-index: 1;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sub-border-subtle);
}
.ts-sub-page .tier-card__name {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tier-c);
    margin-bottom: 6px;
}
.ts-sub-page .tier-card__desc {
    font-size: 12px;
    color: var(--sub-text-muted);
    line-height: 1.55;
    min-height: 40px;
}

.ts-sub-page .tier-card__features {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
    margin-bottom: 18px;
}
.ts-sub-page .feature {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--sub-text-primary);
    line-height: 1.55;
}
.ts-sub-page .feature__dot {
    flex-shrink: 0;
    margin-top: 5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--tier-c);
    box-shadow: 0 0 6px var(--tier-c);
}
.ts-sub-page .feature span {
    color: var(--sub-text-muted);
}
.ts-sub-page .feature strong {
    color: var(--tier-c);
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
}

.ts-sub-page .tier-card__price {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 14px;
}
.ts-sub-page .tier-card__price-prefix {
    font-size: 12px;
    color: var(--sub-text-dim);
    font-family: var(--font-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ts-sub-page .tier-card__price-amt {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    color: var(--sub-text-primary);
    letter-spacing: 0.02em;
}
.ts-sub-page .tier-card__price-suffix {
    font-size: 11px;
    color: var(--sub-text-dim);
}

.ts-sub-page .tier-btn {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 12px 16px;
    border-radius: 11px;
    background: var(--tier-bg);
    color: var(--tier-c);
    border: 1px solid var(--tier-bd);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.ts-sub-page .tier-btn:hover {
    background: var(--tier-c);
    color: #06060e;
    box-shadow: 0 0 20px var(--tier-bg);
    transform: translateY(-1px);
}
.ts-sub-page .tier-btn svg {
    width: 12px;
    height: 12px;
}
.ts-sub-page .tier-btn--current {
    background: rgba(255, 255, 255, 0.02);
    color: var(--sub-text-dim);
    border-color: var(--sub-border-subtle);
    cursor: default;
}
.ts-sub-page .tier-btn--current:hover {
    background: rgba(255, 255, 255, 0.02);
    color: var(--sub-text-dim);
    box-shadow: none;
    transform: none;
}

/* ── Enterprise wide card ── */
.ts-sub-page .enterprise-card {
    --tier-c: var(--tier-ent-c);
    --tier-bg: var(--tier-ent-bg);
    --tier-bd: var(--tier-ent-bd);
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    padding: 22px 24px;
    background: var(--sub-bg-glass);
    backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid var(--sub-border-subtle);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
[data-theme="light"] .ts-sub-page .enterprise-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 20px rgba(0, 0, 0, 0.06);
}
.ts-sub-page .enterprise-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tier-c), transparent);
    opacity: 0.6;
}
.ts-sub-page .enterprise-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 40% 60% at 0% 50%, var(--tier-bg), transparent 70%);
}
.ts-sub-page .enterprise-card__left {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ts-sub-page .enterprise-card__name {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tier-c);
}
.ts-sub-page .enterprise-card__desc {
    font-size: 13px;
    color: var(--sub-text-muted);
    line-height: 1.55;
}
.ts-sub-page .enterprise-card__features {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    min-width: 220px;
}
.ts-sub-page .enterprise-card__cta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
}
.ts-sub-page .enterprise-card__price {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--sub-text-primary);
    letter-spacing: 0.04em;
}
.ts-sub-page .enterprise-card__price strong {
    color: var(--tier-c);
    font-weight: 800;
}

/* ── Footer note ── */
.ts-sub-page .footer-note {
    max-width: 820px;
    margin: 10px auto 0;
    padding: 0 28px;
    text-align: center;
    font-size: 11px;
    color: var(--sub-text-dim);
    letter-spacing: 0.04em;
    line-height: 1.7;
}

/* ── Arena-style overrides for popup modals shown on this page ──
 * The shared PopupZone uses `bg-popup-background` (overlay) and
 * `bg-popover` (container). When the team subscription page is mounted,
 * recolor those wrappers to match the team-arena modal aesthetic so
 * MembershipPurchaseModal / MembershipReceiptModal don't look out of place.
 */
body:has(.ts-sub-page) .bg-popup-background {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    animation: ts-sub-overlay-in 0.2s ease;
}
[data-theme="light"] body:has(.ts-sub-page) .bg-popup-background {
    background: rgba(0, 0, 0, 0.35) !important;
}
@keyframes ts-sub-overlay-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body:has(.ts-sub-page) .bg-popup-background > div {
    background: rgba(16, 16, 32, 0.95) !important;
    border: 1px solid rgba(252, 179, 0, 0.14) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 20px !important;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(252, 179, 0, 0.06) !important;
    animation: ts-sub-modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    /* Force a definite width on the popover so descendants with `w-full`
     * actually resolve to the popover's full inner area instead of
     * collapsing to their content size. */
    width: min(440px, calc(100vw - 24px)) !important;
    box-sizing: border-box !important;
}
body:has(.ts-sub-page) .bg-popup-background > div > div {
    width: 100% !important;
    box-sizing: border-box !important;
}
[data-theme="light"] body:has(.ts-sub-page) .bg-popup-background > div {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(198, 135, 0, 0.22) !important;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.14),
        0 0 30px rgba(198, 135, 0, 0.06) !important;
}
@keyframes ts-sub-modal-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Force the modal content + Card primitive to span full popover width so
 * the receipt rows' `justify-between` pins values to the right edge.
 * `:has` selectors aren't always reliable across the popup boundary, so
 * we also target the popup wrapper directly via `data-slot="card"` and
 * a broader sibling chain. */
body:has(.ts-sub-page) .bg-popup-background > div > div,
body:has(.ts-sub-page) .bg-popup-background [data-slot="card"],
body:has(.ts-sub-page) .bg-popup-background .max-w-\[420px\] {
    width: 100% !important;
    max-width: none !important;
}
body:has(.ts-sub-page) .bg-popup-background [data-slot="card"] {
    padding: 16px !important;
    box-sizing: border-box;
}
body:has(.ts-sub-page) .bg-popup-background [data-slot="card"] > div {
    width: 100% !important;
}
body:has(.ts-sub-page) .bg-popup-background [data-slot="card"] .flex.justify-between,
body:has(.ts-sub-page) .bg-popup-background .flex.justify-between {
    width: 100% !important;
    flex: 1 1 100% !important;
}

/* Fallback without :has — applies to any popup mounted while the
 * subscription page exists. Membership modals are the only ones that
 * use Card + `max-w-[420px]`, so this is safe in practice. */
.bg-popup-background [data-slot="card"] {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}
.bg-popup-background [data-slot="card"] > div {
    width: 100% !important;
}

/* The actual Card primitive used by the receipt modal is the
 * `bg-card-bg` flex column with `items-start` — that wrapper collapses
 * its children to natural width, so `flex justify-between` rows end
 * up at content width. Force its inner column to stretch so rows are
 * full width, and convert each row to a 2-column grid as a final
 * safety net (label left / value right). */
.bg-popup-background .bg-card-bg {
    width: 100% !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}
.bg-popup-background .bg-card-bg > div,
.bg-popup-background .bg-card-bg .flex.flex-col {
    width: 100% !important;
}
.bg-popup-background .bg-card-bg .flex.justify-between,
.bg-popup-background [data-slot="card"] .flex.justify-between,
body:has(.ts-sub-page) .bg-popup-background .flex.justify-between {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    width: 100% !important;
    column-gap: 12px !important;
}
.bg-popup-background .bg-card-bg .flex.justify-between > *:last-child,
.bg-popup-background [data-slot="card"] .flex.justify-between > *:last-child,
body:has(.ts-sub-page) .bg-popup-background .flex.justify-between > *:last-child {
    justify-self: end !important;
    text-align: right !important;
}

/* Inner Card primitives (membership summary) — flatten to arena glass */
body:has(.ts-sub-page) .bg-popup-background .bg-card,
body:has(.ts-sub-page) .bg-popup-background .bg-card-bg,
body:has(.ts-sub-page) .bg-popup-background .card {
    background: rgba(252, 179, 0, 0.06) !important;
    border: 1px solid rgba(252, 179, 0, 0.18) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}
[data-theme="light"] body:has(.ts-sub-page) .bg-popup-background .card {
    background: rgba(198, 135, 0, 0.07) !important;
    border-color: rgba(198, 135, 0, 0.20) !important;
}
[data-theme="light"] body:has(.ts-sub-page) .bg-popup-background .bg-card,
[data-theme="light"] body:has(.ts-sub-page) .bg-popup-background .bg-card-bg {
    background: rgba(198, 135, 0, 0.07) !important;
    border-color: rgba(198, 135, 0, 0.20) !important;
}

/* Inputs inside the modal — arena glass field */
body:has(.ts-sub-page) .bg-popup-background input[type="text"],
body:has(.ts-sub-page) .bg-popup-background input[type="number"],
body:has(.ts-sub-page) .bg-popup-background input[type="password"],
body:has(.ts-sub-page) .bg-popup-background input:not([type]) {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f0f0f5 !important;
    border-radius: 10px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body:has(.ts-sub-page) .bg-popup-background input:focus,
body:has(.ts-sub-page) .bg-popup-background input:focus-visible {
    border-color: rgba(252, 179, 0, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(252, 179, 0, 0.12) !important;
    outline: none !important;
}
body:has(.ts-sub-page) .bg-popup-background input::placeholder {
    color: rgba(136, 136, 168, 0.7) !important;
}
[data-theme="light"] body:has(.ts-sub-page) .bg-popup-background input[type="text"],
[data-theme="light"] body:has(.ts-sub-page) .bg-popup-background input[type="number"],
[data-theme="light"] body:has(.ts-sub-page) .bg-popup-background input[type="password"],
[data-theme="light"] body:has(.ts-sub-page) .bg-popup-background input:not([type]) {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.10) !important;
    color: #1a1a24 !important;
}
[data-theme="light"] body:has(.ts-sub-page) .bg-popup-background input:focus,
[data-theme="light"] body:has(.ts-sub-page) .bg-popup-background input:focus-visible {
    border-color: rgba(198, 135, 0, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(198, 135, 0, 0.12) !important;
}

/* Labels inside the modal */
body:has(.ts-sub-page) .bg-popup-background label {
    font-family: "Outfit", "Noto Sans KR", sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #c8c8d8 !important;
}
[data-theme="light"] body:has(.ts-sub-page) .bg-popup-background label {
    color: #3a3a48 !important;
}

/* Receipt check icon — generated SVG ships with `stroke="black"` AND no
 * `fill` attribute on the path, so it renders as a black filled blob.
 * Force fill:none + golden stroke so it reads as a check mark. */
body:has(.ts-sub-page) .bg-popup-background svg {
    fill: none !important;
}
body:has(.ts-sub-page) .bg-popup-background svg path[stroke="black"],
body:has(.ts-sub-page) .bg-popup-background svg path {
    fill: none !important;
}
body:has(.ts-sub-page) .bg-popup-background svg path[stroke="black"] {
    stroke: #fcb300 !important;
}
[data-theme="light"] body:has(.ts-sub-page) .bg-popup-background svg path[stroke="black"] {
    stroke: #c68700 !important;
}

/* Headings (membership tier name + amount) */
body:has(.ts-sub-page) .bg-popup-background h3,
body:has(.ts-sub-page) .bg-popup-background h4 {
    font-family: "Orbitron", sans-serif;
    letter-spacing: 0.04em;
}
body:has(.ts-sub-page) .bg-popup-background .text-primary {
    color: #fcb300 !important;
}
[data-theme="light"] body:has(.ts-sub-page) .bg-popup-background .text-primary {
    color: #c68700 !important;
}

/* Footer buttons — arena pill style */
body:has(.ts-sub-page) .bg-popup-background button[type="button"],
body:has(.ts-sub-page) .bg-popup-background button:not([type]) {
    border-radius: 11px !important;
    font-family: "Orbitron", sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
}

/* ── Mobile tweaks for the popup modal ── */
@media (max-width: 500px) {
    body:has(.ts-sub-page) .bg-popup-background > div {
        margin: 12px !important;
        padding: 18px !important;
        border-radius: 16px !important;
        /* Visible height, not `100vh`. This rule outranks the shared
           `.popup-box-capped` cap (`--vv-height * 0.9`), so it has to follow
           the keyboard itself: the Android WebView keeps `100vh` at the full
           640px when the keyboard opens. Measured with the card-number field
           focused: visible height 341, but this cap stayed 616, so the
           579px-tall purchase modal was centred at top -119 — its summary
           card under the status bar and off screen, its lower fields under
           the keyboard, and nothing to scroll. The status-bar inset is taken
           off too, so the box cannot start under the clock: keyboard open
           that is 341 - 24 - 24 = 293, placing the box at top 24. */
        max-height: calc(
            var(--vv-height, 100vh) - 24px - env(safe-area-inset-top)
        );
        overflow-y: auto;
    }
    /* Tighten the membership-summary Card so the price fits on one line */
    body:has(.ts-sub-page) .bg-popup-background .bg-card,
    body:has(.ts-sub-page) .bg-popup-background .bg-card-bg {
        padding: 14px !important;
        border-radius: 12px !important;
    }
    body:has(.ts-sub-page) .bg-popup-background .bg-card h3,
    body:has(.ts-sub-page) .bg-popup-background .bg-card-bg h3 {
        font-size: 18px !important;
    }
    body:has(.ts-sub-page) .bg-popup-background .bg-card h4,
    body:has(.ts-sub-page) .bg-popup-background .bg-card-bg h4 {
        font-size: 14px !important;
    }
    body:has(.ts-sub-page) .bg-popup-background .bg-card p,
    body:has(.ts-sub-page) .bg-popup-background .bg-card-bg p {
        font-size: 11px !important;
    }
    /* Wider inputs, tighter labels */
    body:has(.ts-sub-page) .bg-popup-background input {
        padding: 10px 12px !important;
        font-size: 13px !important;
        border-radius: 9px !important;
    }
    body:has(.ts-sub-page) .bg-popup-background label {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }
    /* Sticky-feeling footer buttons — full width, side-by-side */
    body:has(.ts-sub-page) .bg-popup-background .flex.gap-4.justify-end {
        gap: 8px !important;
        margin-top: 12px !important;
    }
    body:has(.ts-sub-page) .bg-popup-background .flex.gap-4.justify-end > button {
        flex: 1;
        font-size: 11px !important;
        padding: 12px 14px !important;
        letter-spacing: 0.10em !important;
    }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .ts-sub-page .tier-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 720px) {
    .ts-sub-page .hero {
        /* Collapse the 2-column (title | desc) grid to a single column on
           mobile so the description stacks BELOW the title and wraps within
           the viewport instead of overflowing off the right edge (the grid
           was ~546px wide, clipped by `overflow: hidden`).
           `margin: 0 14px` insets the hero box so its left/right edges line
           up with the tier cards below (which sit at 14px via `.page`'s
           padding); `padding: 18px 16px` gives inner breathing room and
           aligns the text with the card content; `gap: 4px` tightens the
           previously oversized (32px) title↔description gap. */
        grid-template-columns: 1fr;
        gap: 4px;
        margin: 0 14px 20px;
        padding: 18px 16px;
    }
    .ts-sub-page .hero__title {
        font-size: 24px;
    }
    .ts-sub-page .hero__title-ko {
        font-size: 18px;
    }
    .ts-sub-page .hero__desc {
        font-size: 12px;
    }
    .ts-sub-page .page {
        padding: 4px 14px 60px;
        gap: 14px;
    }
    .ts-sub-page .section-label {
        padding: 0 14px;
        margin-bottom: 10px;
    }
    .ts-sub-page .tier-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .ts-sub-page .tier-card {
        min-height: 0;
        padding: 18px 16px 20px;
    }
    .ts-sub-page .tier-card__name {
        font-size: 18px;
    }
    .ts-sub-page .tier-card__price-amt {
        font-size: 20px;
    }
    .ts-sub-page .enterprise-card {
        padding: 18px 16px;
        gap: 14px;
    }
    .ts-sub-page .enterprise-card__name {
        font-size: 16px;
    }
    .ts-sub-page .enterprise-card__cta {
        align-items: stretch;
        width: 100%;
    }
    .ts-sub-page .tier-btn {
        width: 100%;
    }
}


/* === src/features/social/pages/team_arena/create_team_popup/style.css === */
/* ── Arena Create-Team Modal (ported from space consent-card) ── */

/* Nullify PopupZone's default chrome when hosting the arena modal so we don't
   get a double-bordered / double-rounded look. The arena modal provides its
   own glass panel, shadow, and close button. */
div:has(> #popup-zone-1 > .arena-create-team),
div:has(> .arena-create-team) {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}
#popup-zone-1:has(> .arena-create-team) {
  gap: 0 !important;
  padding: 0 !important;
}

.arena-create-team {
  --bg-void: #06060e;
  --bg-glass: rgba(12, 12, 26, 0.65);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --text-primary: #f0f0f5;
  --text-muted: #8888a8;
  --text-dim: #55556a;
  --accent-gold: #fcb300;
  --accent-teal: #6eedd8;

  width: 440px;
  max-width: calc(100vw - 32px);
  padding: 28px;
  background: var(--bg-glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow:
    0 8px 60px rgba(0, 0, 0, 0.4),
    0 0 80px rgba(252, 179, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  position: relative;
  overflow: hidden;
}

html[data-theme="light"] .arena-create-team,
[data-theme="light"] .arena-create-team {
  --bg-void: #f4f3ef;
  --bg-glass: rgba(255, 255, 255, 0.78);
  --border-subtle: rgba(0, 0, 0, 0.08);
  --text-primary: #1a1a24;
  --text-muted: #5f6075;
  --text-dim: #9d9db3;
  --accent-gold: #c68700;
  --accent-teal: #12a58a;

  box-shadow:
    0 8px 60px rgba(0, 0, 0, 0.12),
    0 0 60px rgba(198, 135, 0, 0.04);
}

/* ── Header ── */
.arena-create-team__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-subtle);
  padding-right: 36px; /* reserve space for absolute close btn */
  position: relative;
  width: 100%;
}

.arena-create-team__label {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.arena-create-team__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--accent-gold), #ffd24a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-theme="light"] .arena-create-team__title,
[data-theme="light"] .arena-create-team__title {
  background: linear-gradient(135deg, #c68700, #8d5f00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.arena-create-team__subhead {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 260px;
}

.arena-create-team__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  z-index: 2;
  padding: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.arena-create-team__close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: rgba(252, 179, 0, 0.3);
}
html[data-theme="light"] .arena-create-team__close:hover,
[data-theme="light"] .arena-create-team__close:hover {
  background: rgba(0, 0, 0, 0.06);
}
.arena-create-team__close svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  display: block;
}

/* ── Body: wraps the TeamCreationForm ── */
.arena-create-team__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* `overflow: hidden` here silently TRUNCATED the form whenever the modal was
     capped -- measured on a Galaxy S23 with the keyboard open: content 361px
     in a 223px box, so the third field (팀 설명) and the buttons were simply
     erased, and nothing could scroll to them. Clip sideways, scroll down.
     `min-height: 0` lets this flex child shrink below its content so the
     scroll actually engages instead of the box growing. */
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Force the form's outer flex container to fill our modal width instead of
   its default fixed w-100 (400px) which overflows the card. */
.arena-create-team__body > div {
  width: 100% !important;
  max-width: 100% !important;
  gap: 20px !important;
}

/* Shrink the huge default logo uploader (was size-40 = 160px) */
.arena-create-team__body > div > :first-child {
  width: 96px !important;
  height: 96px !important;
  max-width: 96px !important;
  margin: 0 auto !important;
  flex-shrink: 0 !important;
}
.arena-create-team img[alt="logo"] {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 0 28px rgba(252, 179, 0, 0.14);
}
.arena-create-team img[alt="logo"] + div {
  width: 96px !important;
  height: 96px !important;
  font-size: 10px !important;
  border-radius: 50% !important;
  inset: 0 !important;
}

.arena-create-team input[type="text"],
.arena-create-team textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(6, 6, 14, 0.5) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  font-family: 'Outfit', sans-serif !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  font-size: 13px !important;
  transition: all 0.25s !important;
}
html[data-theme="light"] .arena-create-team input[type="text"],
html[data-theme="light"] .arena-create-team textarea,
[data-theme="light"] .arena-create-team input[type="text"],
[data-theme="light"] .arena-create-team textarea {
  background: rgba(0, 0, 0, 0.03) !important;
}
/* Preserve the @-prefix left padding for the Team ID input */
.arena-create-team .relative > input[type="text"] {
  padding-left: 36px !important;
}

.arena-create-team input[type="text"]::placeholder,
.arena-create-team textarea::placeholder {
  color: var(--text-dim) !important;
}
.arena-create-team input[type="text"]:focus,
.arena-create-team textarea:focus {
  border-color: rgba(252, 179, 0, 0.3) !important;
  box-shadow: 0 0 14px rgba(252, 179, 0, 0.1) !important;
  outline: none !important;
}

.arena-create-team .text-c-secondary { color: var(--text-muted) !important; }

/* Form buttons (cancel + create) — scoped to form body, not the close X. */
.arena-create-team__body button {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 12px !important;
  padding: 11px 16px !important;
  transition: all 0.25s !important;
  cursor: pointer;
  border: 1px solid var(--border-subtle) !important;
}

/* Cancel — transparent glass */
.arena-create-team__body button:first-of-type:not([disabled]) {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--text-primary) !important;
}
.arena-create-team__body button:first-of-type:not([disabled]):hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-theme="light"] .arena-create-team__body button:first-of-type:not([disabled]),
[data-theme="light"] .arena-create-team__body button:first-of-type:not([disabled]) {
  background: rgba(0, 0, 0, 0.03) !important;
}

/* Create — gold gradient */
.arena-create-team__body button:last-of-type {
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.28), rgba(110, 237, 216, 0.14)) !important;
  border-color: rgba(252, 179, 0, 0.35) !important;
  color: var(--accent-gold) !important;
  box-shadow: 0 0 18px rgba(252, 179, 0, 0.12) !important;
}
.arena-create-team__body button:last-of-type:hover:not([disabled]) {
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.40), rgba(110, 237, 216, 0.20)) !important;
  box-shadow: 0 0 28px rgba(252, 179, 0, 0.24) !important;
  transform: translateY(-1px);
}
.arena-create-team__body button:last-of-type[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Error text */
.arena-create-team .text-red-500 {
  color: #ef4444 !important;
  font-family: 'Outfit', sans-serif;
  font-size: 11px !important;
}


/* === src/features/social/pages/team_arena/settings_panel/style.css === */
/* ── Team Arena Settings Panel (ported from space settings_panel) ── */

.team-arena .ta-settings-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  height: 100vh;
  z-index: 150;
  background: var(--bg-void);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border-left: 1px solid var(--border-subtle);
  box-shadow: -8px 0 60px rgba(0, 0, 0, 0.4);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
}
html[data-theme="light"] .team-arena .ta-settings-panel,
[data-theme="light"] .team-arena .ta-settings-panel {
  box-shadow: -8px 0 60px rgba(0, 0, 0, 0.12);
}
.team-arena .ta-settings-panel[data-open="true"] {
  transform: translateX(0);
}

.team-arena .ta-settings-panel__backdrop {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: rgba(6, 6, 14, 0.45);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}
.team-arena .ta-settings-panel__backdrop[data-open="true"] {
  opacity: 1;
  visibility: visible;
}

.team-arena .ta-settings-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Panel is `position: fixed; top: 0` so it doesn't get `:root`'s
     safe-area padding — clear the status bar / notch here (0 on desktop). */
  padding: calc(24px + env(safe-area-inset-top)) 28px 20px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.team-arena .ta-settings-panel__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.team-arena .ta-settings-panel__close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-muted);
  padding: 0;
}
.team-arena .ta-settings-panel__close:hover {
  background: rgba(20, 20, 40, 0.80);
  border-color: rgba(252, 179, 0, 0.2);
  color: var(--accent-gold);
}
html[data-theme="light"] .team-arena .ta-settings-panel__close:hover,
[data-theme="light"] .team-arena .ta-settings-panel__close:hover {
  background: rgba(0, 0, 0, 0.06);
}
.team-arena .ta-settings-panel__close svg {
  width: 16px;
  height: 16px;
}

.team-arena .ta-settings-panel__body {
  flex: 1;
  overflow-y: auto;
  /* Extra bottom inset so the last action (Log out) clears the home
     indicator / bottom safe area instead of being buried under it. */
  padding: 28px 28px calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.team-arena .ta-settings-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.team-arena .ta-settings-group__label {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.team-arena .ta-settings-options {
  display: flex;
  gap: 8px;
}
.team-arena .ta-settings-opt {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}
html[data-theme="light"] .team-arena .ta-settings-opt,
[data-theme="light"] .team-arena .ta-settings-opt {
  background: rgba(0, 0, 0, 0.03);
}
.team-arena .ta-settings-opt:hover {
  background: rgba(252, 179, 0, 0.04);
  border-color: rgba(252, 179, 0, 0.15);
}
.team-arena .ta-settings-opt[aria-selected="true"] {
  background: rgba(252, 179, 0, 0.08);
  border-color: rgba(252, 179, 0, 0.30);
  color: var(--accent-gold);
}
.team-arena .ta-settings-opt svg {
  width: 22px;
  height: 22px;
}
.team-arena .ta-settings-opt__icon {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

/* Footer actions: team settings link, login, logout */
.team-arena .ta-settings-footer {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.team-arena .ta-settings-action {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  text-decoration: none;
}
html[data-theme="light"] .team-arena .ta-settings-action,
[data-theme="light"] .team-arena .ta-settings-action {
  background: rgba(0, 0, 0, 0.03);
}
.team-arena .ta-settings-action:hover {
  border-color: rgba(252, 179, 0, 0.3);
  color: var(--accent-gold);
  box-shadow: 0 0 14px rgba(252, 179, 0, 0.06);
}
.team-arena .ta-settings-action svg { width: 16px; height: 16px; }

.team-arena .ta-settings-action--login {
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.2), rgba(110, 237, 216, 0.08));
  border-color: rgba(252, 179, 0, 0.3);
  color: var(--accent-gold);
}
.team-arena .ta-settings-action--login:hover {
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.3), rgba(110, 237, 216, 0.14));
  box-shadow: 0 0 24px rgba(252, 179, 0, 0.22);
  transform: translateY(-1px);
}

.team-arena .ta-settings-action--logout {
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.06);
  color: #ef4444;
}
.team-arena .ta-settings-action--logout:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.08);
  color: #ef4444;
}

@media (max-width: 500px) {
  .team-arena .ta-settings-panel { width: 100%; }
}


/* === src/features/social/pages/team_arena/style.css === */
/* ── Team Arena Layout — Base shell + BG layers ─────────── */
/* Direct port of assets/designs/team-arena.html with light mode. */

.team-arena {
  --bg-void: #06060e;
  --bg-glass: rgba(12, 12, 26, 0.65);
  --bg-glass-hover: rgba(20, 20, 40, 0.80);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --text-primary: #f0f0f5;
  --text-muted: #8888a8;
  --text-dim: #55556a;
  --accent-gold: #fcb300;
  --accent-teal: #6eedd8;
  --accent-poll: #818cf8;
  --accent-quiz: #a855f7;
  --accent-discuss: #22d3ee;

  position: relative;
  width: 100%;
  min-height: 100vh;
  /* Same shape as `.rewards-arena`: a flex item of `.social-scroll` whose
     default `flex-shrink: 1` squashed the box to the scrollport height while
     the content ran on much longer. A sticky element is bounded by its
     containing block, so `.arena-topbar` unpinned about one viewport in.
     Refusing to shrink makes the box match the content. */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  /* `overflow-x: hidden` would implicitly set overflow-y to auto and create
     a new scroll context, breaking `position: sticky` on the topbar.
     Use `clip` (no scroll context) for x and explicit `visible` for y. */
  overflow-x: clip;
  overflow-y: visible;
  /* Solid background only. A radial gradient here (or on `::before`)
     structurally creates a header/body two-tone: `at 50% 50%` puts the
     glow in the middle of the viewport while the edges stay transparent,
     so topbar is flat and body is tinted. The golden/teal arena "glow"
     now comes entirely from the `.team-arena__bg-orbs` blur layer
     (viewport-fixed), which distributes color evenly between header
     and body. */
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
}

/* ── Light theme override (scoped to arena) ── */
html[data-theme="light"] .team-arena,
[data-theme="light"] .team-arena {
  --bg-void: #f4f3ef;
  --bg-glass: rgba(255, 255, 255, 0.78);
  --bg-glass-hover: rgba(255, 255, 255, 0.92);
  --border-subtle: rgba(0, 0, 0, 0.08);
  --text-primary: #1a1a24;
  --text-muted: #5f6075;
  --text-dim: #9d9db3;
  --accent-gold: #c68700;
  --accent-teal: #12a58a;
  --accent-poll: #4f46e5;
  --accent-quiz: #7e22ce;
  --accent-discuss: #0891b2;
  background: var(--bg-void);
}

.team-arena * {
  box-sizing: border-box;
}

/* `.team-arena::before` is intentionally removed — the decorative radial
   fade it used to draw is now on the element background (above) with
   `background-attachment: fixed`, so topbar and body always share the
   same viewport-anchored gradient instead of the ::before's container-
   relative one. */

/* Make the SidebarInset parent follow the arena bg so no light seam bleeds through. */
.sidebar-inset:has(.team-arena) {
  background: var(--bg-void, #06060e) !important;
}
html[data-theme="light"] .sidebar-inset:has(.team-arena),
[data-theme="light"] .sidebar-inset:has(.team-arena) {
  background: #f4f3ef !important;
}

/* Hide the global AppMenu sidebar + mobile bottom nav on team arena routes.
   IMPORTANT: `sidebar-wrapper` is the SidebarProvider root that wraps the
   entire app (including the arena itself) — do NOT hide it. Only hide the
   actual Sidebar aside + its container + mobile bottom nav. */
body:has(.team-arena) [data-slot="sidebar"],
body:has(.team-arena) [data-slot="sidebar-container"],
body:has(.team-arena) [data-testid="mobile-bottom-nav"] {
  display: none !important;
}
body:has(.team-arena) [data-slot="sidebar-inset"] {
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* SidebarInset has Tailwind `overflow-x-hidden` which clips fixed children
     and breaks the topbar pinning. Override it on team arena routes. */
  overflow: visible !important;
}

/* Ensure the page is scrollable on mobile (some parent layouts set
   overflow:hidden on body which traps scroll). */
html:has(.team-arena),
body:has(.team-arena) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
}
html:has(.team-arena) {
  min-height: 100dvh;
}
/* Not `100dvh` here — `:root` carries the safe-area insets as padding, so the
   box body has to fill is the viewport MINUS those insets. With `100dvh` on
   both, body came out inset-tall taller than html's content box: measured on a
   640px-tall screen with 24px top / 48px bottom insets, html grew to 712 and
   the document scrolled 72px that had nothing in it. At the end of a scroll
   that showed up as a dead strip under the last card. Web is unaffected —
   there the insets are 0 and this is exactly `100dvh`. */
body:has(.team-arena) {
  min-height: calc(
    100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)
  );
}
body:has(.team-arena) [data-slot="sidebar-wrapper"] {
  min-height: 100vh;
  height: auto !important;
}

/* ── Star field ── */
.team-arena__bg-stars {
  position: fixed;
  inset: 0;
  /* `z-index: 50` puts the stars above `.team-arena__content`
     (z-index: 10). Without it, the content layer's stacking context
     intercepted the star layer visually even though content itself
     was transparent, so stars only showed through in the topbar area
     (above the content). `pointer-events: none` keeps clicks passing
     through to the content below. */
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
}
.team-arena__star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: team-arena-twinkle ease-in-out infinite;
}
html[data-theme="light"] .team-arena .team-arena__star,
[data-theme="light"] .team-arena .team-arena__star {
  /* Darker / more opaque than the previous 0.45 alpha — stars rendered
     on a cream body with a twinkle-to-0.08 animation were effectively
     invisible across most of the viewport, leaving only a few sparkles
     visible near the header. */
  background: rgba(20, 20, 40, 0.85);
}
@keyframes team-arena-twinkle {
  /* Raised the dim phase from 0.08 → 0.35 so stars stay readable across
     the whole viewport instead of fading to near-transparent in their
     trough cycle. */
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.3); }
}
.team-arena__shooting {
  position: absolute;
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(252, 179, 0, 0.8), rgba(252, 179, 0, 0));
  opacity: 0;
  animation: team-arena-shoot 8s linear infinite;
  transform-origin: left center;
}
html[data-theme="light"] .team-arena .team-arena__shooting,
[data-theme="light"] .team-arena .team-arena__shooting {
  background: linear-gradient(90deg, transparent, rgba(198, 135, 0, 0.75), rgba(198, 135, 0, 0));
}
@keyframes team-arena-shoot {
  0% { opacity: 0; transform: translateX(0) translateY(0) rotate(-18deg) scaleX(0.1); }
  4% { opacity: 1; transform: translateX(0) translateY(0) rotate(-18deg) scaleX(1); }
  14% { opacity: 0; transform: translateX(400px) translateY(-130px) rotate(-18deg) scaleX(0.6); }
  100% { opacity: 0; transform: translateX(400px) translateY(-130px) rotate(-18deg) scaleX(0.6); }
}

/* ── Grid plane ── */
.team-arena__bg-grid {
  /* Viewport-anchored for the same reason as `__bg-stars` above — this
     keeps the HUD grid aligned across topbar and body regardless of
     arena height. */
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.team-arena__bg-grid-plane {
  position: absolute;
  bottom: -40%;
  left: -20%;
  right: -20%;
  height: 120%;
  background:
    linear-gradient(rgba(252, 179, 0, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252, 179, 0, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(600px) rotateX(55deg);
  animation: team-arena-grid-scroll 20s linear infinite;
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 70%);
}
html[data-theme="light"] .team-arena .team-arena__bg-grid-plane,
[data-theme="light"] .team-arena .team-arena__bg-grid-plane {
  background:
    linear-gradient(rgba(198, 135, 0, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198, 135, 0, 0.06) 1px, transparent 1px);
  background-size: 80px 80px;
}
@keyframes team-arena-grid-scroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 80px; }
}

/* ── Floating orbs ── */
/* Hidden: the three large blurred orbs (gold / teal / violet) are
   anchored at fixed viewport positions (top-right / bottom-left /
   center-right), so one part of the viewport gets a warm glow and
   another part gets a cool one — which is structurally a header/body
   two-tone by design. Suppressing the orb layer keeps the arena
   feeling (stars, grid, scanline) while giving topbar and body a
   single continuous tone. */
.team-arena__bg-orbs {
  display: none;
}
.team-arena__bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.10;
  animation: team-arena-orb-float 25s ease-in-out infinite;
}
html[data-theme="light"] .team-arena .team-arena__bg-orb,
[data-theme="light"] .team-arena .team-arena__bg-orb {
  opacity: 0.12;
  mix-blend-mode: multiply;
}
.team-arena__bg-orb--1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--accent-gold), transparent 70%);
  top: -10%; right: 10%;
}
.team-arena__bg-orb--2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--accent-teal), transparent 70%);
  bottom: 10%; left: -5%;
  animation-delay: -8s; animation-duration: 30s;
}
.team-arena__bg-orb--3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, var(--accent-quiz), transparent 70%);
  top: 40%; right: -5%;
  animation-delay: -15s; animation-duration: 22s;
}
@keyframes team-arena-orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(40px, -30px) scale(1.1); }
  50% { transform: translate(-20px, 20px) scale(0.95); }
  75% { transform: translate(30px, 40px) scale(1.05); }
}

/* ── Scanline (disabled) ── */
/* The CRT-style scanline texture read as faint horizontal lines across
   the header in the live UI, which looked like a rendering artefact
   rather than a stylistic choice. Hidden to keep the background clean. */
.team-arena__bg-scanline {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, 0.006) 2px,
    rgba(255, 255, 255, 0.006) 4px
  );
}
html[data-theme="light"] .team-arena .team-arena__bg-scanline,
[data-theme="light"] .team-arena .team-arena__bg-scanline {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.015) 2px,
    rgba(0, 0, 0, 0.015) 4px
  );
}

/* ── Outlet content wrapper ── */
.team-arena__content {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Reserve room for the fixed topbar here (not on `.team-arena`) so
     the arena's ::before fade and decorative layers extend under the
     topbar — eliminates the header/body two-tone.
     NOTE: do NOT add `env(safe-area-inset-top)` here. This content box is
     already pushed down by `:root`'s safe-area padding, and the fixed
     topbar's own safe-area padding grows its height by the same amount —
     the two cancel, so adding it here double-counts and leaves a big gap
     under the icon row. The value is just the topbar's non-safe height +
     a small gap. */
  padding-top: 96px;
}
@media (max-width: 540px) {
  .team-arena__content { padding-top: 68px; }
}

@media (max-width: 1024px) {
  .team-arena { min-height: 100vh; height: auto; }
}
@media (max-width: 720px) {
  .team-arena { min-height: 100vh; height: auto; overflow-x: clip; overflow-y: visible; }
}


/* === src/features/social/pages/team_arena/topbar/style.css === */
/* ── Team Arena Topbar — direct port from team-arena.html (dark + light) ── */

/* While a dialog is up, the topbar must not stay live above it.
   `.team-arena__content` is `position: relative; z-index: 10`, so it opens a
   stacking context: a dialog inside it can never paint above the topbar
   (z-index: 100) no matter how high its own z-index is — the whole content
   layer is below. So the icons kept rendering bright over the backdrop and
   stayed clickable. Drop the topbar beneath the content layer while a dialog
   exists, and stop it taking pointer events at all.

   The settings backdrop is ALWAYS in the DOM (hidden with opacity/visibility
   and toggled via `data-open`), unlike the two modal overlays which are
   rendered behind an `if`. Matching it unconditionally disabled the topbar
   permanently, so it must be qualified with `[data-open="true"]`. */
.team-arena:has(.tm-modal-overlay) .arena-topbar,
.team-arena:has(.td-modal-overlay) .arena-topbar,
.team-arena:has(.ta-settings-panel__backdrop[data-open="true"]) .arena-topbar {
  z-index: 5;
  pointer-events: none;
}
.team-arena .arena-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* `position: fixed` escapes the `:root` safe-area padding, so add the
     top inset here to keep the header below the status bar (0 on desktop). */
  padding: calc(20px + env(safe-area-inset-top)) 28px 20px;
  flex-shrink: 0;
  gap: 12px;
  /* Transparent so the `.team-arena::before` radial gradient (the one
     that paints the subtle gold/teal glow on the body) extends under
     the header too. No `backdrop-filter: blur` — the blur was averaging
     the gradient behind the header into a flat cream panel while the
     body kept the raw gradient, which read as an obvious two-tone
     split (especially noticeable after SPA navigation from home). */
  background: transparent;
}

.team-arena .arena-topbar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.team-arena .arena-topbar__back {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.25s;
  padding: 0;
  color: var(--text-muted);
}
.team-arena .arena-topbar__back:hover {
  background: var(--bg-glass-hover);
  border-color: rgba(252, 179, 0, 0.25);
  color: var(--accent-gold);
  transform: translateY(-1px);
}
.team-arena .arena-topbar__back svg {
  width: 18px;
  height: 18px;
  transition: color 0.2s;
}

.team-arena .arena-topbar__divider {
  width: 1px;
  height: 24px;
  background: var(--border-subtle);
  flex-shrink: 0;
}

.team-arena .arena-topbar__switcher {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 4px 4px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s;
  min-width: 0;
  border: 1px solid transparent;
  background: none;
  color: inherit;
}
.team-arena .arena-topbar__switcher:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border-subtle);
}
html[data-theme="light"] .team-arena .arena-topbar__switcher:hover,
[data-theme="light"] .team-arena .arena-topbar__switcher:hover {
  background: rgba(0, 0, 0, 0.04);
}

.team-arena .arena-topbar__logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(252, 179, 0, 0.15);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.3), rgba(110, 237, 216, 0.15));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--accent-gold);
  flex-shrink: 0;
  text-transform: uppercase;
}
html[data-theme="light"] .team-arena .arena-topbar__logo,
[data-theme="light"] .team-arena .arena-topbar__logo {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.team-arena .arena-topbar__switcher-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.team-arena .arena-topbar__title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--accent-gold), #ffd24a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}
html[data-theme="light"] .team-arena .arena-topbar__title,
[data-theme="light"] .team-arena .arena-topbar__title {
  background: linear-gradient(135deg, #c68700, #8d5f00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.team-arena .arena-topbar__handle {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-arena .arena-topbar__chevron {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.25s;
}
.team-arena .arena-topbar__switcher[aria-expanded="true"] .arena-topbar__chevron {
  transform: rotate(180deg);
  color: var(--accent-gold);
}

/* ── Team switcher dropdown ── */
.team-arena .arena-topbar__switcher { position: relative; }
.team-arena .team-dd {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 300px;
  max-height: 360px;
  border-radius: 14px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.2s ease;
  z-index: 30;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html[data-theme="light"] .team-arena .team-dd,
[data-theme="light"] .team-arena .team-dd {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
.team-arena .arena-topbar__switcher[aria-expanded="true"] .team-dd {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.team-arena .team-dd__header {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border-subtle);
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  flex-shrink: 0;
}
.team-arena .team-dd__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.team-arena .team-dd__list::-webkit-scrollbar { width: 6px; }
.team-arena .team-dd__list::-webkit-scrollbar-track { background: transparent; }
.team-arena .team-dd__list::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 3px;
}
.team-arena .team-dd__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
  color: inherit;
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}
.team-arena .team-dd__item:hover { background: rgba(255, 255, 255, 0.04); }
html[data-theme="light"] .team-arena .team-dd__item:hover,
[data-theme="light"] .team-arena .team-dd__item:hover { background: rgba(0, 0, 0, 0.04); }
.team-arena .team-dd__avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.25), rgba(110, 237, 216, 0.12));
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: var(--accent-gold);
  object-fit: cover;
  text-transform: uppercase;
}
.team-arena .team-dd__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.team-arena .team-dd__name {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-arena .team-dd__handle {
  font-size: 10px;
  color: var(--text-muted);
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.06em;
}
.team-arena .team-dd__check {
  width: 16px;
  height: 16px;
  color: var(--accent-gold);
  flex-shrink: 0;
}
.team-arena .team-dd__footer {
  padding: 10px 14px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-teal);
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  flex-shrink: 0;
}
.team-arena .team-dd__footer:hover { background: rgba(110, 237, 216, 0.06); }
.team-arena .team-dd__footer svg { width: 12px; height: 12px; }

.team-arena .arena-topbar__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(110, 237, 216, 0.08);
  border: 1px solid rgba(110, 237, 216, 0.15);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-teal);
  margin-left: 12px;
  flex-shrink: 0;
}
.team-arena .arena-topbar__status::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-teal);
  box-shadow: 0 0 6px var(--accent-teal);
  animation: arena-topbar-pulse 1.6s ease-in-out infinite;
}
html[data-theme="light"] .team-arena .arena-topbar__status,
[data-theme="light"] .team-arena .arena-topbar__status {
  background: rgba(18, 165, 138, 0.10);
  border-color: rgba(18, 165, 138, 0.25);
  color: #0d7f6b;
}
html[data-theme="light"] .team-arena .arena-topbar__status::before,
[data-theme="light"] .team-arena .arena-topbar__status::before {
  background: #0d7f6b;
  box-shadow: 0 0 6px #0d7f6b;
}
@keyframes arena-topbar-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.team-arena .arena-topbar__actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.team-arena .arena-topbar__hud {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
  color: var(--text-muted);
  text-decoration: none;
}
.team-arena .arena-topbar__hud:hover {
  background: var(--bg-glass-hover);
  border-color: rgba(252, 179, 0, 0.25);
  transform: translateY(-1px);
  color: var(--accent-gold);
}
.team-arena .arena-topbar__hud svg {
  width: 18px;
  height: 18px;
  transition: color 0.2s;
}
.team-arena .arena-topbar__hud--active {
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.18), rgba(252, 179, 0, 0.06));
  border-color: rgba(252, 179, 0, 0.3);
  color: var(--accent-gold);
}

.team-arena .arena-topbar__hud-label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.team-arena .arena-topbar__hud:hover .arena-topbar__hud-label {
  opacity: 1;
}

.team-arena .arena-topbar__follow {
  padding: 9px 18px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.18), rgba(252, 179, 0, 0.06));
  border: 1px solid rgba(252, 179, 0, 0.3);
  color: var(--accent-gold);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 0 16px rgba(252, 179, 0, 0.08);
  white-space: nowrap;
}
.team-arena .arena-topbar__follow:hover {
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.28), rgba(252, 179, 0, 0.1));
  box-shadow: 0 0 24px rgba(252, 179, 0, 0.2);
  transform: translateY(-1px);
}

/* ── Responsive ── */
@media (max-width: 720px) {
  .team-arena .arena-topbar {
    /* `position: fixed; top: 0` sits at the true viewport top, BEHIND the
       status bar / notch — the `:root` safe-area padding doesn't push a
       fixed element. Add the inset to the top padding so the icon row clears
       the status bar (0 on desktop). */
    padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
    gap: 8px;
    flex-wrap: nowrap;
  }
  /* Hide the parent-team (graduation-cap) and sub-team (hierarchy) HUD icons
     on mobile — the icon row is too cramped on a phone. */
  .team-arena .parent-panel-wrap,
  .team-arena .arena-topbar__hud--mobile-hide {
    display: none;
  }
  .team-arena .arena-topbar__logo {
    width: 30px;
    height: 30px;
    font-size: 13px;
    border-radius: 8px;
  }
  .team-arena .arena-topbar__title {
    font-size: 13px;
    max-width: 100px;
  }
  .team-arena .arena-topbar__handle { font-size: 10px; }
  .team-arena .arena-topbar__status { display: none; }
  .team-arena .arena-topbar__back {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
  .team-arena .arena-topbar__back svg {
    width: 15px;
    height: 15px;
  }
  .team-arena .arena-topbar__divider { display: none; }
  .team-arena .arena-topbar__switcher {
    gap: 6px;
    padding: 3px 4px 3px 3px;
  }
  .team-arena .arena-topbar__chevron {
    width: 12px;
    height: 12px;
  }
  .team-arena .arena-topbar__actions { gap: 6px; }
  .team-arena .arena-topbar__hud {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }
  .team-arena .arena-topbar__hud svg {
    width: 14px;
    height: 14px;
  }
  .team-arena .arena-topbar__hud-label { display: none; }
  .team-arena .arena-topbar__follow {
    padding: 6px 10px;
    font-size: 10px;
  }
}

@media (max-width: 420px) {
  .team-arena .arena-topbar__handle { display: none; }
  .team-arena .arena-topbar__hud { width: 32px; height: 32px; }
  /* Mobile: drop the team-switcher chip entirely so the topbar fits the
   * brand button + HUD actions without overflow. */
  .team-arena .arena-topbar__switcher { display: none !important; }
}


/* === src/features/social/pages/team_membership/views/style.css === */
/*
 * Team membership status page — current plan card + purchase history.
 * Arena background (stars/grid/orbs/scanline) + topbar + settings panel
 * are provided by TeamArenaLayout, so this stylesheet only covers the
 * section-label / hero / current-card / history-card content.
 *
 * Dark/light colors use the space toggle pattern
 * `var(--dark, ...) var(--light, ...)` sourced from dx-components-theme.css.
 */

.tm-status-page {
    --tm-bg-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.78));
    --tm-border-subtle: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
    --tm-text-primary: var(--dark, #f0f0f5) var(--light, #1a1a24);
    --tm-text-muted: var(--dark, #8888a8) var(--light, #5f6075);
    --tm-text-dim: var(--dark, #55556a) var(--light, #9d9db3);
    --tm-accent-gold: var(--dark, #fcb300) var(--light, #c68700);
    --tm-accent-teal: var(--dark, #6eedd8) var(--light, #12a58a);

    --tier-free-c: var(--dark, #8888a8) var(--light, #5f6075);
    --tier-free-bg: var(--dark, rgba(136, 136, 168, 0.08)) var(--light, rgba(95, 96, 117, 0.08));
    --tier-free-bd: var(--dark, rgba(136, 136, 168, 0.22)) var(--light, rgba(95, 96, 117, 0.28));

    --tier-pro-c: var(--dark, #6eedd8) var(--light, #12a58a);
    --tier-pro-bg: var(--dark, rgba(110, 237, 216, 0.08)) var(--light, rgba(18, 165, 138, 0.08));
    --tier-pro-bd: var(--dark, rgba(110, 237, 216, 0.28)) var(--light, rgba(18, 165, 138, 0.32));

    --tier-max-c: var(--dark, #a855f7) var(--light, #7e22ce);
    --tier-max-bg: var(--dark, rgba(168, 85, 247, 0.08)) var(--light, rgba(126, 34, 206, 0.08));
    --tier-max-bd: var(--dark, rgba(168, 85, 247, 0.30)) var(--light, rgba(126, 34, 206, 0.32));

    --tier-vip-c: var(--dark, #fcb300) var(--light, #c68700);
    --tier-vip-bg: var(--dark, rgba(252, 179, 0, 0.10)) var(--light, rgba(198, 135, 0, 0.10));
    --tier-vip-bd: var(--dark, rgba(252, 179, 0, 0.34)) var(--light, rgba(198, 135, 0, 0.40));

    --tier-ent-c: var(--dark, #ff7ab6) var(--light, #c63f7a);
    --tier-ent-bg: var(--dark, rgba(255, 122, 182, 0.08)) var(--light, rgba(198, 63, 122, 0.08));
    --tier-ent-bd: var(--dark, rgba(255, 122, 182, 0.26)) var(--light, rgba(198, 63, 122, 0.30));

    --font-display: "Orbitron", sans-serif;
    --font-body: "Outfit", "Noto Sans KR", sans-serif;

    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ── Section label ── */
.tm-status-page .section-label {
    text-align: center;
    padding: 28px 28px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
}
.tm-status-page .section-label__dash {
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tm-text-dim), transparent);
}
.tm-status-page .section-label__title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tm-text-dim);
}
.tm-status-page .section-label__title strong {
    color: var(--tm-accent-gold);
    font-weight: 700;
}

/* ── Hero ── */
.tm-status-page .hero {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 28px;
    padding: 0 28px;
}
.tm-status-page .hero__title {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #ffffff 0%, var(--tm-accent-gold) 50%, #ffd24a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 14px;
    line-height: 1.1;
}
[data-theme="light"] .tm-status-page .hero__title {
    background: linear-gradient(135deg, #c68700, #8d5f00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.tm-status-page .hero__title-ko {
    font-family: var(--font-body);
    font-weight: 800;
    letter-spacing: 0.02em;
    display: block;
    margin-top: 6px;
    font-size: 22px;
    background: linear-gradient(135deg, var(--tm-accent-gold), #ffd24a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
[data-theme="light"] .tm-status-page .hero__title-ko {
    background: linear-gradient(135deg, #c68700, #8d5f00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.tm-status-page .hero__desc {
    font-size: 14px;
    color: var(--tm-text-muted);
    line-height: 1.7;
    letter-spacing: 0.02em;
    max-width: 620px;
    margin: 0 auto;
}
.tm-status-page .hero__desc strong {
    color: var(--tm-accent-gold);
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: 0.08em;
}

/* ── Page container ── */
.tm-status-page .page {
    max-width: 980px;
    margin: 0 auto;
    padding: 4px 28px 80px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ═══════════════════ Current Plan card ═══════════════════ */
.tm-status-page .current-card {
    --tier-c: var(--tier-free-c);
    --tier-bg: var(--tier-free-bg);
    --tier-bd: var(--tier-free-bd);
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 24px;
    padding: 28px 28px 24px;
    background: var(--tm-bg-glass);
    backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid var(--tm-border-subtle);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    overflow: hidden;
}
[data-theme="light"] .tm-status-page .current-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 20px rgba(0, 0, 0, 0.06);
}
.tm-status-page .current-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tier-c), transparent);
    opacity: 0.8;
}
.tm-status-page .current-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 40% 60% at 0% 50%, var(--tier-bg), transparent 70%);
}

.tm-status-page .current-card--pro {
    --tier-c: var(--tier-pro-c);
    --tier-bg: var(--tier-pro-bg);
    --tier-bd: var(--tier-pro-bd);
}
.tm-status-page .current-card--max {
    --tier-c: var(--tier-max-c);
    --tier-bg: var(--tier-max-bg);
    --tier-bd: var(--tier-max-bd);
}
.tm-status-page .current-card--vip {
    --tier-c: var(--tier-vip-c);
    --tier-bg: var(--tier-vip-bg);
    --tier-bd: var(--tier-vip-bd);
}
.tm-status-page .current-card--ent {
    --tier-c: var(--tier-ent-c);
    --tier-bg: var(--tier-ent-bg);
    --tier-bd: var(--tier-ent-bd);
}

.tm-status-page .cc-tier {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tm-status-page .cc-tier__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 100px;
    background: var(--tier-bg);
    border: 1px solid var(--tier-bd);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tier-c);
}
.tm-status-page .cc-tier__label::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--tier-c);
    box-shadow: 0 0 6px var(--tier-c);
}
.tm-status-page .cc-tier__name {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tier-c);
    line-height: 1;
}
.tm-status-page .cc-tier__desc {
    font-size: 12px;
    color: var(--tm-text-muted);
    line-height: 1.55;
    max-width: 280px;
}

.tm-status-page .cc-stat {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}
.tm-status-page .cc-stat__label {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tm-text-dim);
}
.tm-status-page .cc-stat__value-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.tm-status-page .cc-stat__value {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--tm-text-primary);
}
.tm-status-page .cc-stat__value--tier {
    color: var(--tier-c);
}
.tm-status-page .cc-stat__suffix {
    font-size: 13px;
    color: var(--tm-text-dim);
}
.tm-status-page .cc-progress {
    position: relative;
    height: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 100px;
    overflow: hidden;
}
[data-theme="light"] .tm-status-page .cc-progress {
    background: rgba(0, 0, 0, 0.05);
}
.tm-status-page .cc-progress__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--tier-c), var(--tm-accent-gold));
    border-radius: 100px;
    box-shadow: 0 0 8px var(--tier-bg);
}
.tm-status-page .cc-progress__meta {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--tm-text-dim);
    margin-top: 4px;
}

.tm-status-page .cc-expire {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}
.tm-status-page .cc-expire__date {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--tm-text-primary);
    letter-spacing: 0.02em;
}
.tm-status-page .cc-expire__hint {
    font-size: 12px;
    color: var(--tm-text-muted);
    line-height: 1.5;
}

.tm-status-page .cc-footer {
    grid-column: 1 / -1;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 11px;
    background: rgba(252, 179, 0, 0.08);
    border: 1px solid rgba(252, 179, 0, 0.22);
}
.tm-status-page .cc-footer__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tm-accent-gold);
}
.tm-status-page .cc-footer__icon svg {
    width: 16px;
    height: 16px;
}
.tm-status-page .cc-footer__text {
    font-size: 12px;
    color: var(--tm-text-muted);
    line-height: 1.5;
}
.tm-status-page .cc-footer__text strong {
    color: var(--tm-accent-gold);
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
}

/* ═══════════════════ Purchase History card ═══════════════════ */
.tm-status-page .history-card {
    position: relative;
    padding: 22px 22px 18px;
    background: var(--tm-bg-glass);
    backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid var(--tm-border-subtle);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
[data-theme="light"] .tm-status-page .history-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 20px rgba(0, 0, 0, 0.06);
}
.tm-status-page .history-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tm-accent-teal), transparent);
    opacity: 0.5;
}
.tm-status-page .history-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--tm-border-subtle);
}
.tm-status-page .history-card__title {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tm-text-primary);
}
.tm-status-page .history-card__count {
    padding: 3px 8px;
    border-radius: 100px;
    background: rgba(110, 237, 216, 0.08);
    border: 1px solid rgba(110, 237, 216, 0.22);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--tm-accent-teal);
}

.tm-status-page .history-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.tm-status-page .history-table th {
    text-align: left;
    padding: 10px 12px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tm-text-dim);
    border-bottom: 1px solid var(--tm-border-subtle);
}
.tm-status-page .history-table th.num,
.tm-status-page .history-table th.date,
.tm-status-page .history-table th:last-child {
    text-align: right;
}
.tm-status-page .history-table td {
    padding: 14px 12px;
    font-size: 13px;
    color: var(--tm-text-primary);
    border-bottom: 1px dashed var(--tm-border-subtle);
    vertical-align: middle;
}
.tm-status-page .history-table tr:last-child td {
    border-bottom: 0;
}
.tm-status-page .history-table td.num {
    text-align: right;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--tm-accent-gold);
}
.tm-status-page .history-table td.mono {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--tm-text-dim);
}
.tm-status-page .history-table td.date {
    text-align: right;
    color: var(--tm-text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.tm-status-page .history-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 100px;
    background: rgba(252, 179, 0, 0.08);
    border: 1px solid rgba(252, 179, 0, 0.22);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tm-accent-gold);
}
.tm-status-page .history-chip::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 4px currentColor;
}

.tm-status-page .history-empty {
    padding: 36px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.tm-status-page .history-empty__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--tm-border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tm-text-dim);
}
.tm-status-page .history-empty__icon svg {
    width: 20px;
    height: 20px;
}
.tm-status-page .history-empty__title {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tm-text-muted);
}
.tm-status-page .history-empty__desc {
    font-size: 12px;
    color: var(--tm-text-dim);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .tm-status-page .current-card {
        grid-template-columns: 1fr;
    }
    .tm-status-page .history-table,
    .tm-status-page .history-table thead,
    .tm-status-page .history-table tbody,
    .tm-status-page .history-table tr,
    .tm-status-page .history-table td,
    .tm-status-page .history-table th {
        display: block;
    }
    .tm-status-page .history-table thead {
        display: none;
    }
    .tm-status-page .history-table tr {
        padding: 14px;
        border: 1px solid var(--tm-border-subtle);
        border-radius: 12px;
        margin-bottom: 10px;
        background: rgba(255, 255, 255, 0.02);
    }
    [data-theme="light"] .tm-status-page .history-table tr {
        background: rgba(0, 0, 0, 0.02);
    }
    .tm-status-page .history-table tr:last-child {
        margin-bottom: 0;
    }
    .tm-status-page .history-table td {
        padding: 4px 0;
        border: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }
    .tm-status-page .history-table td::before {
        content: attr(data-label);
        font-family: var(--font-display);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--tm-text-dim);
    }
    .tm-status-page .history-table td.num,
    .tm-status-page .history-table td.date {
        text-align: right;
    }
}
@media (max-width: 720px) {
    .tm-status-page .hero {
        /* Same fix as `.ts-sub-page .hero`: the 2-column (title | desc) grid
           is ~574px wide and overflows the phone viewport, clipping the
           description ("Your current plan…") off the right edge. Collapse to
           a single column so the description stacks below the title, inset
           the box (margin 14px) to line up with the cards below, align the
           inner text (padding 16px), and tighten the oversized title↔desc
           gap. */
        grid-template-columns: 1fr;
        gap: 4px;
        margin: 0 14px 20px;
        padding: 18px 16px;
    }
    .tm-status-page .hero__title {
        font-size: 24px;
    }
    .tm-status-page .hero__title-ko {
        font-size: 18px;
    }
    .tm-status-page .hero__desc {
        font-size: 12px;
    }
    .tm-status-page .page {
        padding: 4px 14px 60px;
        gap: 14px;
    }
    .tm-status-page .section-label {
        padding: 20px 14px 10px;
    }
    .tm-status-page .current-card {
        padding: 20px 18px;
    }
    .tm-status-page .cc-tier__name {
        font-size: 28px;
    }
    .tm-status-page .cc-stat__value {
        font-size: 22px;
    }
    .tm-status-page .history-card {
        padding: 18px 16px 14px;
    }
}


/* === src/features/social/pages/user_draft/views/style.css === */
/* ─── User Drafts — Arena ────────────────── */

.drafts-arena {
  --bg-void: var(--dark, #06060e) var(--light, #f4f3ef);
  --bg-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --bg-glass-hover: var(--dark, rgba(20, 20, 40, 0.80)) var(--light, rgba(255, 255, 255, 0.88));
  --border-subtle: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --border-strong: var(--dark, rgba(255, 255, 255, 0.12)) var(--light, rgba(0, 0, 0, 0.14));
  --text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --text-dim: var(--dark, #55556a) var(--light, #9999aa);
  --accent-gold: #fcb300;
  --accent-teal: #6eedd8;
  --accent-coral: #ef4444;
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Outfit', sans-serif;
}

.drafts-arena {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
}
.drafts-arena::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(252, 179, 0, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 120%, rgba(110, 237, 216, 0.03) 0%, transparent 50%);
  z-index: 0;
  pointer-events: none;
}

/* Top bar */
.drafts-arena .arena-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Stretch the topbar across the full content area so the back-btn and
     "새 게시물" button anchor to the actual page edges. Previously the
     inner content was clamped to 880px which left large empty gutters on
     wide viewports — the topbar looked like a small floating panel.
     Vertical padding kept tight (10px) because the page already lives
     inside `SocialLayout`'s `p-5` (20px) padded container, so a thicker
     topbar would read as a wasted band. */
  padding: 10px 28px;
  background: var(--dark, rgba(6, 6, 14, 0.80)) var(--light, rgba(244, 243, 239, 0.86));
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}
.drafts-arena .arena-topbar__left { display: flex; align-items: center; gap: 14px; }
.drafts-arena .back-btn {
  width: 38px; height: 38px;
  /* Fixed-size flex child: without this the default `flex-shrink: 1` lets a
     long sibling title squash the square button into an oval. */
  flex-shrink: 0; border-radius: 10px;
  background: var(--bg-glass); border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.25s ease; padding: 0;
  color: var(--text-muted);
}
.drafts-arena .back-btn:hover { border-color: rgba(252, 179, 0, 0.25); background: var(--bg-glass-hover); color: var(--accent-gold); }
.drafts-arena .back-btn svg { width: 18px; height: 18px; }

.drafts-arena .topbar-title { display: flex; align-items: baseline; gap: 10px; }
.drafts-arena .topbar-title__main {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-primary);
}
.drafts-arena .topbar-title__count {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; color: var(--text-dim);
}
.drafts-arena .topbar-title__count strong { color: var(--accent-gold); }

.drafts-arena .arena-topbar__right { display: flex; align-items: center; gap: 10px; }
.drafts-arena .topbar-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--border-subtle); background: var(--bg-glass);
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted);
  cursor: pointer; transition: all 0.25s ease;
}
.drafts-arena .topbar-btn:hover { border-color: rgba(252, 179, 0, 0.25); color: var(--accent-gold); background: var(--bg-glass-hover); }
.drafts-arena .topbar-btn svg { width: 13px; height: 13px; }
.drafts-arena .topbar-btn--primary {
  background: linear-gradient(135deg, var(--accent-gold), #e5a200);
  color: #0a0a0a; border-color: transparent;
  box-shadow: 0 2px 14px rgba(252, 179, 0, 0.20);
}
.drafts-arena .topbar-btn--primary:hover {
  background: linear-gradient(135deg, #ffd24a, var(--accent-gold));
  color: #0a0a0a; box-shadow: 0 4px 22px rgba(252, 179, 0, 0.40); transform: translateY(-1px);
}

/* Page */
.drafts-arena .page {
  position: relative; z-index: 1; flex: 1;
  max-width: 880px; margin: 0 auto; width: 100%;
  padding: 32px 28px 60px;
  display: flex; flex-direction: column; gap: 22px;
}

/* Stats */
.stats-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--bg-glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle); border-radius: 12px;
}
.stat-card__icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: rgba(252, 179, 0, 0.10); color: var(--accent-gold);
}
.stat-card__icon svg { width: 16px; height: 16px; }
.stat-card--teal .stat-card__icon { background: rgba(110, 237, 216, 0.10); color: var(--accent-teal); }
.stat-card__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stat-card__label {
  font-family: var(--font-display); font-size: 9px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim);
}
.stat-card__value {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  color: var(--text-primary); display: flex; align-items: baseline; gap: 4px;
}
.stat-card__value small {
  font-size: 10px; color: var(--text-dim); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* Filter row */
.filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filter-chips { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.filter-chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 100px;
  background: var(--bg-glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
  cursor: pointer; transition: all 0.2s ease;
}
.chip:hover { border-color: rgba(252, 179, 0, 0.20); color: var(--text-primary); }
.chip[aria-selected="true"] {
  background: rgba(252, 179, 0, 0.10); color: var(--accent-gold);
  border-color: rgba(252, 179, 0, 0.25);
}
.chip__count {
  padding: 1px 6px; border-radius: 100px;
  background: rgba(255, 255, 255, 0.06); font-size: 9px;
  color: var(--text-dim); letter-spacing: 0.04em;
}
.chip[aria-selected="true"] .chip__count { background: rgba(252, 179, 0, 0.15); color: var(--accent-gold); }

/* Sort */
.sort { position: relative; flex-shrink: 0; }
.sort__btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px; border-radius: 11px;
  background: var(--bg-glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--text-primary); cursor: pointer; transition: all 0.2s ease;
}
.sort__btn:hover { border-color: rgba(252, 179, 0, 0.20); }
.sort__btn svg { width: 13px; height: 13px; color: var(--text-muted); transition: transform 0.2s; }
.sort__btn small {
  font-family: var(--font-display); font-size: 9px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim); margin-right: 2px;
}
.sort[data-open="true"] .sort__btn svg:last-child { transform: rotate(180deg); color: var(--accent-gold); }
.sort__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 200px;
  background: var(--dark, rgba(10, 10, 22, 0.96)) var(--light, rgba(255, 255, 255, 0.98));
  backdrop-filter: blur(20px); border: 1px solid var(--border-subtle);
  border-radius: 11px; padding: 6px;
  display: none; flex-direction: column; gap: 2px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.sort[data-open="true"] .sort__menu { display: flex; animation: menu-in 0.18s ease-out; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.sort__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 8px;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; color: var(--text-primary);
  text-align: left; transition: background 0.15s;
}
.sort__item:hover { background: rgba(255, 255, 255, 0.04); }
.sort__item[aria-selected="true"] { color: var(--accent-gold); }
.sort__item svg { width: 13px; height: 13px; opacity: 0; }
.sort__item[aria-selected="true"] svg { opacity: 1; }

/* Drafts list */
.drafts-list { display: flex; flex-direction: column; gap: 10px; }

.draft-card {
  position: relative;
  display: grid; grid-template-columns: 24px 1fr auto; gap: 14px;
  padding: 18px 20px;
  background: var(--bg-glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle); border-radius: 14px;
  cursor: pointer; transition: all 0.2s ease;
}
.draft-card:hover {
  border-color: rgba(252, 179, 0, 0.20);
  background: var(--bg-glass-hover); transform: translateY(-1px);
}
.draft-card--writing { border-color: rgba(110, 237, 216, 0.20); }
.draft-card--writing::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 2px; border-radius: 2px;
  background: var(--accent-teal); box-shadow: 0 0 10px var(--accent-teal);
}

.draft-card__dot { display: flex; align-items: flex-start; justify-content: center; padding-top: 5px; }
.draft-card__dot span { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); display: block; }
.draft-card--writing .draft-card__dot span {
  background: var(--accent-teal); box-shadow: 0 0 8px var(--accent-teal);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.draft-card__body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.draft-card__title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.draft-card__title {
  font-size: 16.5px; font-weight: 700; color: var(--text-primary);
  line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 1; min-width: 0;
}
.draft-card__title--untitled { color: var(--text-dim); font-style: italic; font-weight: 600; }
.draft-card__badge {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 100px;
  font-family: var(--font-display); font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.draft-card__badge svg { width: 10px; height: 10px; }
.draft-card__badge--space {
  background: rgba(110, 237, 216, 0.08); color: var(--accent-teal);
  border: 1px solid rgba(110, 237, 216, 0.18);
}
.draft-card__badge--writing {
  background: rgba(110, 237, 216, 0.12); color: var(--accent-teal);
  border: 1px solid rgba(110, 237, 216, 0.22);
}
.draft-card__badge--writing::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-teal); box-shadow: 0 0 6px var(--accent-teal);
  animation: pulse-dot 2s ease-in-out infinite;
}

.draft-card__excerpt {
  font-size: 13.5px; line-height: 1.55; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.draft-card__excerpt--empty { color: var(--text-dim); font-style: italic; }

.draft-card__meta {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  font-size: 11.5px; color: var(--text-dim);
}
.draft-card__meta-item { display: inline-flex; align-items: center; gap: 5px; }
.draft-card__meta-item svg { width: 12px; height: 12px; }
.draft-card__meta-item strong { color: var(--text-muted); font-weight: 600; }
.draft-card__tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.draft-card__tag {
  padding: 2px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  background: rgba(110, 237, 216, 0.06); border: 1px solid rgba(110, 237, 216, 0.14);
  color: var(--accent-teal);
}

.draft-card__actions {
  display: flex; align-items: center; gap: 6px; align-self: flex-start;
  opacity: 0.6; transition: opacity 0.2s ease;
}
.draft-card:hover .draft-card__actions { opacity: 1; }
.draft-card__resume {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 8px;
  background: rgba(252, 179, 0, 0.10); border: 1px solid rgba(252, 179, 0, 0.25);
  font-family: var(--font-display); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--accent-gold);
  cursor: pointer; transition: all 0.2s ease;
}
.draft-card__resume:hover { background: rgba(252, 179, 0, 0.18); box-shadow: 0 0 14px rgba(252, 179, 0, 0.20); }
.draft-card__resume svg { width: 11px; height: 11px; }
.draft-card__more {
  width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: 1px solid transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted); transition: all 0.2s ease; padding: 0;
}
.draft-card__more:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--border-subtle); color: var(--text-primary); }
.draft-card__more svg { width: 16px; height: 16px; }

.draft-menu {
  position: absolute; right: 14px; top: calc(100% - 8px); z-index: 20;
  min-width: 180px;
  background: var(--dark, rgba(10, 10, 22, 0.96)) var(--light, rgba(255, 255, 255, 0.98));
  backdrop-filter: blur(20px); border: 1px solid var(--border-subtle);
  border-radius: 11px; padding: 6px;
  display: none; flex-direction: column; gap: 2px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.draft-card[data-menu-open="true"] { z-index: 25; }
.draft-card[data-menu-open="true"] .draft-menu { display: flex; animation: menu-in 0.18s ease-out; }
.draft-menu__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 8px;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--text-primary); text-align: left; transition: background 0.15s;
  width: 100%;
}
.draft-menu__item:hover { background: rgba(255, 255, 255, 0.04); }
.draft-menu__item svg { width: 14px; height: 14px; color: var(--text-muted); }
.draft-menu__item--danger { color: var(--accent-coral); }
.draft-menu__item--danger svg { color: var(--accent-coral); }
.draft-menu__item--danger:hover { background: rgba(239, 68, 68, 0.06); }
.draft-menu__separator { height: 1px; background: var(--border-subtle); margin: 4px 0; }

/* Section labels */
.section-label { display: flex; align-items: center; gap: 10px; padding: 8px 4px 0; }
.section-label__title {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim);
}
.section-label__line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-subtle), transparent); }

/* Empty */
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 80px 24px; text-align: center;
}
.empty-state__icon {
  width: 72px; height: 72px; border-radius: 18px;
  background: rgba(252, 179, 0, 0.06); border: 1px solid rgba(252, 179, 0, 0.15);
  display: flex; align-items: center; justify-content: center; color: var(--accent-gold);
}
.empty-state__icon svg { width: 30px; height: 30px; }
.empty-state__title {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-primary);
}
.empty-state__desc { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); max-width: 380px; }
.empty-state__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent-gold), #e5a200);
  color: #0a0a0a; border: none;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  cursor: pointer; box-shadow: 0 2px 14px rgba(252, 179, 0, 0.20);
  transition: all 0.2s ease; margin-top: 6px;
}
.empty-state__cta:hover { box-shadow: 0 4px 22px rgba(252, 179, 0, 0.35); transform: translateY(-1px); }
.empty-state__cta svg { width: 13px; height: 13px; }

@media (max-width: 760px) {
  .drafts-arena .page { padding: 22px 16px 40px; gap: 18px; }
  .stats-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stats-strip > *:nth-child(3) { grid-column: 1 / -1; }
  .filter-row { gap: 8px; }
  /* Let the chips take a full row of their own and wrap onto as many lines
     as they need. They used to sit on one line with `overflow-x: auto`,
     which cut "이번주" and the sort control off the right edge — and a
     sideways-scrollable strip with no affordance is not something people
     find. The sort control then falls to the next line, which is where the
     report asked for it ("탭은 최근 편집 위로"). */
  .filter-chips { flex: 1 1 100%; flex-wrap: wrap; overflow-x: visible; }
  .sort { margin-left: auto; }
  .draft-card { grid-template-columns: 18px 1fr; padding: 14px 16px; gap: 11px; }
  /* The usual phone card layout: overflow (⋮) pinned top-right, the primary
     action (이어쓰기) bottom-right. Both used to sit together bottom-left,
     under the meta line. `.draft-card` is already `position: relative`, so
     the ⋮ button is lifted out of the actions row and pinned to the card; at
     top/right 8px its 16px icon lands on the card's 16px content padding and
     its vertical centre on the title line. The title row keeps 34px clear on
     the right so a long title cannot run under it, and the menu opens right
     below the button instead of from the card's bottom edge. */
  .draft-card__title-row { padding-right: 34px; }
  .draft-card__actions { grid-column: 2; justify-self: end; opacity: 1; margin-top: 4px; }
  .draft-card__more { position: absolute; top: 8px; right: 8px; }
  .draft-menu { top: 44px; right: 8px; }
  .draft-card__resume { padding: 6px 12px; }
}
@media (max-width: 500px) {
  .drafts-arena .arena-topbar { padding: 14px 16px; }
  .drafts-arena .topbar-btn { display: none; }
  .drafts-arena .topbar-title__main { font-size: 13px; }
  .stat-card { padding: 12px 14px; }
  .stat-card__value { font-size: 14px; }
  .draft-card__title { font-size: 15px; }
  .draft-card__excerpt { font-size: 13px; }
  .draft-card__meta { font-size: 11px; gap: 6px 10px; }
}


/* === src/features/social/pages/user_reward/views/style.css === */
/* ─── User Rewards — Arena ──────────────── */

.rewards-arena {
  --bg-void: var(--dark, #06060e) var(--light, #f4f3ef);
  --bg-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --bg-glass-hover: var(--dark, rgba(20, 20, 40, 0.80)) var(--light, rgba(255, 255, 255, 0.88));
  --bg-input: var(--dark, rgba(255, 255, 255, 0.025)) var(--light, rgba(0, 0, 0, 0.02));
  --border-subtle: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --border-strong: var(--dark, rgba(255, 255, 255, 0.12)) var(--light, rgba(0, 0, 0, 0.14));
  --text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --text-dim: var(--dark, #55556a) var(--light, #9999aa);
  --accent-gold: #fcb300;
  --accent-teal: #6eedd8;
  --accent-coral: #ef4444;
  --accent-green: #22c55e;
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Outfit', sans-serif;
}

.rewards-arena {
  position: relative;
  min-height: 100vh;
  /* This arena is a flex item of `.social-scroll` (a column flex box), so the
     default `flex-shrink: 1` squashed its box down to the scrollport height
     while its content ran on far longer — measured one viewport (740px)
     against 4165px of reward rows. A sticky element is bounded by its
     containing block, so `.arena-topbar` unpinned and scrolled away the
     moment the reader passed that first viewport. Refusing to shrink makes
     the box match the content and the header stays put for the whole list.
     Letting `.social-scroll` stay the scroller (rather than giving this
     arena its own `overflow-y: auto`) keeps a single scroll container for
     the page.
     NOTE: this rule is duplicated below/above (team_reward + user_reward
     stylesheets were merged into main.css); keep the two in step. */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
}
.rewards-arena::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(252, 179, 0, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 120%, rgba(110, 237, 216, 0.04) 0%, transparent 50%);
  z-index: 0;
  pointer-events: none;
}

/* Topbar */
.rewards-arena .arena-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  background: var(--dark, rgba(6, 6, 14, 0.80)) var(--light, rgba(244, 243, 239, 0.86));
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}
.rewards-arena .arena-topbar__left { display: flex; align-items: center; gap: 14px; }
.rewards-arena .back-btn {
  width: 38px; height: 38px;
  /* Fixed-size flex child: without this the default `flex-shrink: 1` lets a
     long sibling title squash the square button into an oval. */
  flex-shrink: 0; border-radius: 10px;
  background: var(--bg-glass); border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.25s ease; padding: 0;
  color: var(--text-muted);
}
.rewards-arena .back-btn:hover { border-color: rgba(252, 179, 0, 0.25); background: var(--bg-glass-hover); color: var(--accent-gold); }
.rewards-arena .back-btn svg { width: 18px; height: 18px; }

.rewards-arena .topbar-title { display: flex; align-items: baseline; gap: 10px; }
.rewards-arena .topbar-title__main {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-primary);
}
.rewards-arena .topbar-title__cycle {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; color: var(--text-dim);
}
.rewards-arena .topbar-title__cycle strong { color: var(--accent-gold); }

.chain-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 100px;
  background: var(--bg-glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  color: var(--text-muted); cursor: pointer; transition: all 0.2s;
}
.chain-chip:hover { border-color: rgba(252, 179, 0, 0.20); color: var(--text-primary); }
.chain-chip__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green);
}
.chain-chip__addr {
  font-family: var(--font-display); font-size: 10px;
  letter-spacing: 0.04em; color: var(--text-dim);
}
.chain-chip svg { width: 12px; height: 12px; color: var(--text-dim); }

/* Page */
.rewards-arena .page {
  position: relative; z-index: 1; flex: 1;
  max-width: 980px; margin: 0 auto; width: 100%;
  padding: 32px 28px 60px;
  display: flex; flex-direction: column; gap: 28px;
}

/* Hero */
.hero {
  position: relative;
  display: grid; grid-template-columns: 1fr 280px; gap: 32px;
  padding: 32px 32px 28px;
  background: var(--bg-glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle); border-radius: 20px;
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(252, 179, 0, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(110, 237, 216, 0.06) 0%, transparent 60%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hero__eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim);
}
.hero__eyebrow strong { color: var(--accent-gold); font-weight: 700; }
.hero__eyebrow .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-teal); box-shadow: 0 0 6px var(--accent-teal);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.hero__points { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hero__points-value {
  font-family: var(--font-display); font-size: 64px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1;
  background: linear-gradient(135deg, #ffd24a, var(--accent-gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero__points-unit {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}

.hero__share { display: flex; flex-direction: column; gap: 8px; }
.hero__share-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
.hero__share-label {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim);
}
.hero__share-value { display: flex; align-items: baseline; gap: 6px; }
.hero__share-value strong {
  font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--accent-gold);
}
.hero__share-value small { font-size: 11px; color: var(--text-dim); }
.hero__share-bar { height: 6px; border-radius: 100px; background: rgba(255,255,255,0.06); overflow: hidden; }
.hero__share-bar-fill {
  height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--accent-gold), #ffd24a);
  box-shadow: 0 0 12px rgba(252, 179, 0, 0.40);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero__share-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-dim);
  font-family: var(--font-display); letter-spacing: 0.06em;
}

.hero__side {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px; background: rgba(0,0,0,0.20);
  border: 1px solid var(--border-subtle); border-radius: 14px;
}
.hero__token-label {
  font-family: var(--font-display); font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);
  display: flex; align-items: center; gap: 6px;
}
.hero__token-label svg { width: 11px; height: 11px; color: var(--accent-teal); }
.hero__token-value { display: flex; align-items: baseline; gap: 8px; }
.hero__token-value strong {
  font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--accent-teal);
  line-height: 1;
}
.hero__token-value small {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted);
}
.hero__token-formula {
  font-size: 11px; line-height: 1.5; color: var(--text-dim);
  padding: 8px 10px; background: rgba(110, 237, 216, 0.04);
  border-radius: 8px; border: 1px solid rgba(110, 237, 216, 0.10);
}
.hero__token-formula code {
  font-family: var(--font-display); color: var(--accent-teal);
  font-size: 10px; letter-spacing: 0.04em;
}
.hero__countdown {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(252, 179, 0, 0.05); border: 1px solid rgba(252, 179, 0, 0.15);
}
.hero__countdown svg { width: 14px; height: 14px; color: var(--accent-gold); flex-shrink: 0; }
.hero__countdown-text { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
.hero__countdown-text strong {
  font-family: var(--font-display); color: var(--accent-gold);
  font-weight: 700; letter-spacing: 0.04em;
}

/* Token card */
.token-card {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 0;
  background: var(--bg-glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle); border-radius: 16px;
  overflow: hidden;
}
.token-card__main {
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
  border-right: 1px solid var(--border-subtle);
}
.token-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.token-card__label {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);
  display: flex; align-items: center; gap: 8px;
}
.token-card__label::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green);
}
.token-card__delta {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em; padding: 4px 9px; border-radius: 100px;
  background: rgba(34, 197, 94, 0.08); color: var(--accent-green);
  border: 1px solid rgba(34, 197, 94, 0.18);
}
.token-card__delta svg { width: 11px; height: 11px; }
.token-card__price { display: flex; align-items: baseline; gap: 8px; }
.token-card__price-num {
  font-family: var(--font-display); font-size: 46px; font-weight: 800;
  letter-spacing: -0.02em; color: var(--text-primary); line-height: 1;
}
.token-card__price-unit {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted);
}
.token-card__sub { font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }

.token-card__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: auto; padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}
.token-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.token-stat__label {
  font-family: var(--font-display); font-size: 9px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim);
}
.token-stat__value {
  font-family: var(--font-display); font-size: 13.5px; font-weight: 700;
  color: var(--text-primary); display: flex; align-items: baseline; gap: 3px;
  white-space: nowrap; overflow: hidden;
}
.token-stat__value small {
  font-size: 9px; font-weight: 600; color: var(--text-dim);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.token-stat__value--green { color: var(--accent-green); }

.token-card__chart {
  padding: 18px 22px;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.token-card__chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.token-card__chart-title {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim);
}
.token-range {
  display: inline-flex; background: var(--bg-input);
  border: 1px solid var(--border-subtle); border-radius: 8px;
  padding: 2px; gap: 1px;
}
.token-range__btn {
  padding: 5px 10px; border-radius: 6px;
  background: transparent; border: none;
  font-family: var(--font-display); font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--text-dim);
  cursor: pointer; transition: all 0.2s ease;
}
.token-range__btn:hover { color: var(--text-primary); }
.token-range__btn[aria-selected="true"] {
  background: rgba(252, 179, 0, 0.10); color: var(--accent-gold);
  box-shadow: inset 0 0 0 1px rgba(252, 179, 0, 0.20);
}

.price-chart { position: relative; width: 100%; flex: 1; min-height: 170px; }
.price-chart svg { width: 100%; height: 170px; display: block; }

/* Charts row */
.charts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.chart-card {
  background: var(--bg-glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle); border-radius: 14px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.chart-card__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding-bottom: 4px;
}
.chart-card__title {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
  display: flex; align-items: center; gap: 8px;
}
.chart-card__title::before {
  content: ''; width: 3px; height: 11px; border-radius: 2px;
  background: var(--accent-gold);
}
.chart-card__subtitle {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em; color: var(--text-dim); margin-top: 4px;
}

.chart-legends { display: flex; gap: 14px; align-items: center; }
.chart-legend {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim);
}
.legend-swatch { display: inline-block; flex-shrink: 0; }
.legend-swatch--bar {
  width: 10px; height: 10px; border-radius: 2px;
  background: linear-gradient(180deg, #ffd24a, #fcb300);
}
.legend-swatch--line {
  width: 16px; height: 3px; border-radius: 2px;
  background: var(--accent-teal); box-shadow: 0 0 6px rgba(110, 237, 216, 0.5);
}

.combo-chart { position: relative; width: 100%; min-height: 240px; }
.combo-chart svg { width: 100%; height: 240px; display: block; overflow: visible; }

/* Donut */
.donut-wrap { display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: center; }
.donut { width: 160px; height: 160px; display: block; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.legend-item {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 9px; align-items: center;
  font-size: 12.5px; color: var(--text-muted);
}
.legend-dot { width: 8px; height: 8px; border-radius: 2px; }
.legend-name {
  font-weight: 600; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.legend-value {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  color: var(--text-primary); letter-spacing: 0.04em;
  display: flex; align-items: baseline; gap: 4px;
}
.legend-value small { font-size: 9px; color: var(--text-dim); font-weight: 600; }

/* Section header */
.section-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.section-head__title {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted);
  display: flex; align-items: center; gap: 10px;
}
.section-head__title::before {
  content: ''; width: 3px; height: 14px; border-radius: 2px;
  background: var(--accent-gold);
}
.section-head__count {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em; color: var(--text-dim);
}
.section-head__count strong { color: var(--text-muted); }

/* Activity */
.activity {
  background: var(--bg-glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden;
  margin-top: 14px;
}
.activity__row {
  display: grid; grid-template-columns: 42px 1fr auto auto; gap: 14px;
  align-items: center; padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.15s ease;
}
.activity__row:last-child { border-bottom: none; }
.activity__row:hover { background: rgba(255, 255, 255, 0.02); }
.activity__icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: rgba(252, 179, 0, 0.08); color: var(--accent-gold);
}
.activity__icon svg { width: 16px; height: 16px; }
.activity__icon--in { background: rgba(110, 237, 216, 0.08); color: var(--accent-teal); }
.activity__icon--out { background: rgba(239, 68, 68, 0.06); color: var(--accent-coral); }
.activity__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.activity__title {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.activity__source {
  font-size: 11.5px; color: var(--text-dim);
  display: flex; align-items: center; gap: 6px;
}
.activity__amount {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  letter-spacing: 0.04em; text-align: right;
}
.activity__amount--in { color: var(--accent-teal); }
.activity__amount--out { color: var(--accent-coral); }
.activity__amount small {
  font-size: 9px; font-weight: 600; letter-spacing: 0.10em;
  color: var(--text-dim); margin-left: 3px; text-transform: uppercase;
}
.activity__time {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--text-dim); text-align: right; white-space: nowrap;
}
.activity__loadmore {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px;
  background: transparent; border: none;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted);
  cursor: pointer; transition: all 0.2s ease; width: 100%;
}
.activity__loadmore:hover { background: rgba(252, 179, 0, 0.04); color: var(--accent-gold); }
.activity__loadmore svg { width: 13px; height: 13px; }

/* Past cycles */
.cycles { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.cycle-card {
  display: grid; grid-template-columns: 120px 1fr auto; gap: 24px;
  align-items: center; padding: 20px 24px;
  background: var(--bg-glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle); border-radius: 14px;
  transition: all 0.2s ease;
}
.cycle-card:hover { border-color: rgba(252, 179, 0, 0.18); background: var(--bg-glass-hover); }
.cycle-card--claimed { opacity: 0.78; }
.cycle-card--available {
  border-color: rgba(252, 179, 0, 0.22);
  box-shadow: 0 0 24px rgba(252, 179, 0, 0.06);
}

.cycle-card__month { display: flex; flex-direction: column; gap: 2px; }
.cycle-card__month-label {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--text-primary);
}
.cycle-card__month-year {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim);
}

.cycle-card__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; min-width: 0;
}
.cycle-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cycle-stat__label {
  font-family: var(--font-display); font-size: 9px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim);
}
.cycle-stat__value {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--text-primary); display: flex; align-items: baseline; gap: 3px;
  white-space: nowrap; overflow: hidden;
}
.cycle-stat__value small {
  font-size: 10px; font-weight: 600; color: var(--text-dim);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.cycle-stat--token .cycle-stat__value { color: var(--accent-teal); }

.cycle-card__action { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cycle-card__claimed {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 9px;
  background: rgba(34, 197, 94, 0.06); border: 1px solid rgba(34, 197, 94, 0.15);
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--accent-green);
}
.cycle-card__claimed svg { width: 13px; height: 13px; }
.cycle-card__claim {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 9px;
  background: linear-gradient(135deg, var(--accent-gold), #e5a200);
  color: #0a0a0a; border: none;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  cursor: pointer; transition: all 0.2s ease;
  box-shadow: 0 2px 14px rgba(252, 179, 0, 0.20);
}
.cycle-card__claim:hover {
  background: linear-gradient(135deg, #ffd24a, var(--accent-gold));
  box-shadow: 0 4px 22px rgba(252, 179, 0, 0.40);
  transform: translateY(-1px); color: #0a0a0a;
}
.cycle-card__claim svg { width: 12px; height: 12px; }
.cycle-card__expand {
  width: 36px; height: 36px; border-radius: 9px;
  background: transparent; border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); cursor: pointer; transition: all 0.2s ease; padding: 0;
}
.cycle-card__expand:hover { border-color: rgba(252, 179, 0, 0.20); color: var(--accent-gold); }
.cycle-card__expand svg { width: 14px; height: 14px; transition: transform 0.2s; }
.cycle-card[data-expanded="true"] .cycle-card__expand svg {
  transform: rotate(180deg); color: var(--accent-gold);
}

.cycle-card__detail {
  display: none;
  grid-column: 1 / -1;
  padding-top: 16px; margin-top: 16px;
  border-top: 1px solid var(--border-subtle);
  flex-direction: column; gap: 4px;
}
.cycle-card[data-expanded="true"] .cycle-card__detail { display: flex; }
.cycle-card__detail-row {
  display: grid; grid-template-columns: 32px 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 8px 0; font-size: 12.5px;
}
.cycle-card__detail-icon {
  width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.cycle-card__detail-icon svg { width: 12px; height: 12px; }
.cycle-card__detail-icon--in { background: rgba(110, 237, 216, 0.06); color: var(--accent-teal); }
.cycle-card__detail-icon--out { background: rgba(239, 68, 68, 0.05); color: var(--accent-coral); }
.cycle-card__detail-title { font-size: 13px; color: var(--text-muted); }
.cycle-card__detail-amount {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--text-muted);
}
.cycle-card__detail-amount--in { color: var(--accent-teal); }
.cycle-card__detail-amount--out { color: var(--accent-coral); }
.cycle-card__detail-time {
  font-family: var(--font-display); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--text-dim); text-align: right; white-space: nowrap;
}

.cycles__loadmore {
  display: inline-flex; align-self: center; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: transparent; border: 1px solid var(--border-subtle);
  border-radius: 10px;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted);
  cursor: pointer; transition: all 0.2s ease; margin-top: 6px;
}
.cycles__loadmore:hover { border-color: rgba(252, 179, 0, 0.20); color: var(--accent-gold); }
.cycles__loadmore svg { width: 13px; height: 13px; }

/* Empty */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 40px 24px; text-align: center;
}
.empty__icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(252, 179, 0, 0.06); border: 1px solid rgba(252, 179, 0, 0.15);
  display: flex; align-items: center; justify-content: center; color: var(--accent-gold);
}
.empty__icon svg { width: 24px; height: 24px; }
.empty__title {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.empty__desc { font-size: 12.5px; line-height: 1.55; color: var(--text-dim); max-width: 340px; }

@media (max-width: 880px) {
  .rewards-arena .page { padding: 24px 18px 50px; gap: 22px; }
  .rewards-arena .hero { grid-template-columns: 1fr; gap: 22px; padding: 24px 22px; }
  .rewards-arena .hero__points-value { font-size: 52px; }
  .rewards-arena .token-card { grid-template-columns: 1fr; }
  .rewards-arena .token-card__main { border-right: none; border-bottom: 1px solid var(--border-subtle); }
  .rewards-arena .token-card__price-num { font-size: 38px; }
  .rewards-arena .charts { grid-template-columns: 1fr; }
  .rewards-arena .donut-wrap { grid-template-columns: 140px 1fr; gap: 14px; }
  .rewards-arena .donut { width: 140px; height: 140px; }
  /* Cycle cards stack their three regions (month / stats / action) into a
     single column on tablet+mobile so the SWAP button doesn't squeeze the
     stats column into overlap. Without the `.rewards-arena` prefix the
     desktop rule `.rewards-arena .cycle-card { grid-template-columns: 120px 1fr auto }`
     has higher specificity than this mobile override and stays in effect. */
  .rewards-arena .cycle-card { grid-template-columns: 1fr; gap: 16px; padding: 18px 20px; }
  .rewards-arena .cycle-card__action { justify-content: flex-start; }
  .rewards-arena .activity__row { grid-template-columns: 36px 1fr auto; gap: 11px; padding: 12px 14px; }
  .rewards-arena .activity__time { display: none; }
}
@media (max-width: 500px) {
  .rewards-arena .arena-topbar { padding: 14px 16px; gap: 10px; }
  .rewards-arena .topbar-title__cycle { display: none; }
  .rewards-arena .chain-chip { padding: 6px 10px; font-size: 11px; }
  .rewards-arena .chain-chip__addr { display: none; }
  .rewards-arena .hero__points-value { font-size: 42px; }
  .rewards-arena .hero__token-value strong { font-size: 24px; }
  .rewards-arena .cycle-card__stats { grid-template-columns: repeat(2, 1fr) 1fr; gap: 10px; }
  .rewards-arena .cycle-stat__value { font-size: 13px; }
  .rewards-arena .cycle-card__claim { padding: 8px 14px; font-size: 9.5px; }
}


/* === src/features/spaces/pages/actions/actions/discussion/views/editor/style.css === */
/* ── Discussion Editor Card Pager ────────────────────────── */
.arena {
  --qc-bg-void: var(--dark, #06060e) var(--light, #f5f5fb);
  --qc-bg-glass: var(--dark, rgba(12,12,26,0.65)) var(--light, rgba(255,255,255,0.75));
  --qc-bg-glass-hover: var(--dark, rgba(20,20,40,0.80)) var(--light, rgba(255,255,255,0.95));
  --qc-border-subtle: var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(10,10,30,0.08));
  --qc-border-strong: var(--dark, rgba(255,255,255,0.12)) var(--light, rgba(10,10,30,0.16));
  --qc-text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --qc-text-muted: var(--dark, #8888a8) var(--light, #5b5b75);
  --qc-text-dim: var(--dark, #55556a) var(--light, #9898ad);
  --qc-surface-soft: var(--dark, rgba(255,255,255,0.02)) var(--light, rgba(10,10,30,0.03));
  --qc-surface-hover: var(--dark, rgba(255,255,255,0.04)) var(--light, rgba(10,10,30,0.05));
  --qc-glow-aura-a: var(--dark, rgba(34,211,238,0.05)) var(--light, rgba(34,211,238,0.09));
  --qc-glow-aura-b: var(--dark, rgba(252,179,0,0.03)) var(--light, rgba(252,179,0,0.06));
  --qc-panel-bg: var(--dark, rgba(12,12,26,1)) var(--light, rgba(255,255,255,1));
  --qc-input-bg: var(--dark, rgba(255,255,255,0.02)) var(--light, rgba(10,10,30,0.02));
  --qc-input-border: var(--dark, rgba(255,255,255,0.08)) var(--light, rgba(10,10,30,0.1));
  --qc-danger-bg: var(--dark, rgba(239,68,68,0.04)) var(--light, rgba(239,68,68,0.06));
  --qc-danger-border: var(--dark, rgba(239,68,68,0.18)) var(--light, rgba(239,68,68,0.22));

  --discussion-color: #22d3ee;
  --discussion-bg: rgba(34,211,238,0.08);
  --discussion-border: rgba(34,211,238,0.22);
  --discussion-glow: rgba(34,211,238,0.14);
  --accent-gold: #fcb300;
  --accent-teal: #6eedd8;
  --accent-red: #ef4444;
}

/* Action editor scope — `:has(.action-edit-footer)` bumps specificity
   above the bare `.arena` block at line 29282 (space-index page) so
   our viewport-pinned layout wins the cascade. */
.arena:has(> .action-edit-footer) {
  /* Pin to the viewport so the action-editor footer always lands on the
     bottom edge regardless of how the surrounding `min-h-0 flex-1`
     wrappers compute their height — fixed + inset:0 bypasses the
     parent's intrinsic height entirely. */
  position: fixed;
  inset: 0;
  /* Let `inset: 0` size it. The mobile `.arena` rule gives every arena
     `height: calc(100dvh - safe-area insets - --kb-inset)` plus a matching
     max-height; on a fixed box a height wins over `bottom: 0`, so this one
     stopped 72px short of the screen bottom (568 of 640 on a phone with a
     3-button nav) and the footer, which already pads for the nav bar, floated
     above a blank band. */
  height: auto;
  max-height: none;
  z-index: 5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--qc-bg-void);
  color: var(--qc-text-primary);
}
.arena::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, var(--qc-glow-aura-a), transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 120%, var(--qc-glow-aura-b), transparent 50%);
  z-index: 0;
  pointer-events: none;
}

/* Pager + page-card */
.pager {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  overflow: hidden;
}
.pager__track {
  display: flex;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.pager__page {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px 40px 32px;
  overflow-y: auto;
}

.page-card {
  width: 100%;
  margin: 0 auto;
  background: var(--qc-bg-glass);
  backdrop-filter: blur(20px);
  border: 1px solid var(--qc-border-subtle);
  border-radius: 24px;
  padding: 30px 30px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 0 20px 80px rgba(0,0,0,0.35);
}
.page-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--qc-border-subtle);
}
.page-card__title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-card__num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--discussion-color);
  opacity: 0.85;
}
.page-card__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qc-text-primary);
}
.page-card__subtitle {
  font-size: 13px;
  color: var(--qc-text-muted);
}
.page-card__nextlink {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qc-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.page-card__nextlink:hover { color: var(--discussion-color); }
.page-card__nextlink svg { width: 14px; height: 14px; }

/* Section */
.section {
  background: var(--qc-surface-soft);
  border: 1px solid var(--qc-border-subtle);
  border-radius: 16px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.section__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--qc-text-dim);
}
.section__hint {
  font-size: 12px;
  color: var(--qc-text-muted);
}
.section--danger {
  background: var(--qc-danger-bg);
  border-color: var(--qc-danger-border);
}

/* Field */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qc-text-muted);
}
.input,
.textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--qc-input-bg);
  border: 1px solid var(--qc-input-border);
  color: var(--qc-text-primary);
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
}
.input:focus,
.textarea:focus {
  border-color: rgba(252,179,0,0.4);
  box-shadow: 0 0 0 3px rgba(252,179,0,0.08);
}
.input--num { width: 140px; }
.input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.input-suffix {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--qc-text-muted);
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* Chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--qc-surface-soft);
  border: 1px solid var(--qc-border-subtle);
  font-size: 12px;
  font-weight: 500;
  color: var(--qc-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.chip:hover {
  border-color: var(--discussion-border);
  color: var(--discussion-color);
}
.chip[aria-pressed="true"] {
  background: var(--discussion-bg);
  border-color: var(--discussion-border);
  color: var(--discussion-color);
}
.chip__x {
  opacity: 0.7;
  font-size: 14px;
  line-height: 1;
}
.chip-input {
  min-width: 140px;
  padding: 6px 10px;
  border-radius: 100px;
  background: transparent;
  border: 1px dashed var(--qc-border-strong);
  color: var(--qc-text-muted);
  font-size: 12px;
  outline: none;
}
.chip-input:focus {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

/* Switch */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.switch__track {
  width: 38px;
  height: 22px;
  border-radius: 100px;
  background: var(--qc-surface-hover);
  border: 1px solid var(--qc-border-subtle);
  position: relative;
  transition: all 0.2s;
  flex-shrink: 0;
}
.switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--qc-text-muted);
  transition: all 0.2s;
}
.switch[aria-checked="true"] .switch__track {
  background: rgba(252,179,0,0.2);
  border-color: rgba(252,179,0,0.4);
}
.switch[aria-checked="true"] .switch__thumb {
  left: 18px;
  background: var(--accent-gold);
  box-shadow: 0 0 8px rgba(252,179,0,0.5);
}
.switch__label {
  font-size: 13px;
  color: var(--qc-text-primary);
}
.switch__sub {
  font-size: 11px;
  color: var(--qc-text-muted);
  display: block;
  margin-top: 2px;
}

/* Segmented */
.segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--qc-surface-soft);
  border: 1px solid var(--qc-border-subtle);
  border-radius: 10px;
  gap: 2px;
}
.segmented__btn {
  padding: 8px 14px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--qc-text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.segmented__btn[aria-selected="true"] {
  background: rgba(252,179,0,0.12);
  color: var(--accent-gold);
  box-shadow: 0 1px 4px rgba(252,179,0,0.15);
}

/* Tile */
.tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  background: var(--qc-surface-soft);
  border: 1px solid var(--qc-border-subtle);
}
.tile__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qc-text-dim);
}
.tile__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Editor */
.editor {
  border: 1px solid var(--qc-input-border);
  border-radius: 12px;
  background: var(--qc-input-bg);
  overflow: hidden;
}
.editor__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--qc-border-subtle);
  background: var(--qc-surface-soft);
}
.editor__tool {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--qc-text-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.editor__tool:hover {
  background: var(--qc-surface-hover);
  color: var(--accent-gold);
}
.editor__divider {
  width: 1px;
  height: 18px;
  background: var(--qc-border-subtle);
  margin: 0 4px;
}
.editor__body {
  padding: 20px 22px;
  min-height: 220px;
  color: var(--qc-text-primary);
  font-size: 15px;
  line-height: 1.7;
  outline: none;
}
.editor__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-top: 1px solid var(--qc-border-subtle);
  background: var(--qc-surface-soft);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qc-text-dim);
}

.icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--qc-border-subtle);
  background: transparent;
  color: var(--qc-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover {
  border-color: rgba(239,68,68,0.3);
  color: var(--accent-red);
}
.icon-btn svg {
  width: 13px;
  height: 13px;
}

.add-btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1.5px dashed var(--qc-border-strong);
  background: transparent;
  color: var(--qc-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}
.add-btn:hover {
  border-color: var(--discussion-color);
  color: var(--discussion-color);
  background: var(--discussion-bg);
}
.add-btn svg {
  width: 14px;
  height: 14px;
}

/* Accordion */
.accordion {
  border: 1px solid var(--qc-border-subtle);
  border-radius: 12px;
  overflow: hidden;
  background: var(--qc-surface-soft);
}
.accordion__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: transparent;
  border: none;
  color: var(--qc-text-primary);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.accordion__head svg {
  width: 14px;
  height: 14px;
  color: var(--qc-text-muted);
  transition: transform 0.2s;
}
.accordion[data-open="true"] .accordion__head svg {
  transform: rotate(180deg);
}
.accordion__body {
  display: none;
  padding: 0 18px 18px;
  flex-direction: column;
  gap: 14px;
}
.accordion[data-open="true"] .accordion__body {
  display: flex;
}

/* Attachments */
.dropzone {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1.5px dashed rgba(252, 179, 0, 0.3);
  background: var(--dark, rgba(252, 179, 0, 0.02)) var(--light, rgba(252, 179, 0, 0.05));
  cursor: pointer;
  color: var(--qc-text-muted);
  transition: all 0.2s;
}
.dropzone:hover {
  border-color: #fcb300;
  background: rgba(252, 179, 0, 0.05);
  color: #fcb300;
}
.dropzone svg { width: 18px; height: 18px; }
.dropzone__text { display: flex; flex-direction: column; gap: 2px; }
.dropzone__title { font-size: 13px; font-weight: 600; color: var(--qc-text-primary); }
.dropzone__sub { font-size: 11px; color: var(--qc-text-dim); }

.file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--dark, rgba(255, 255, 255, 0.03)) var(--light, rgba(10, 10, 30, 0.03));
  border: 1px solid var(--qc-border-subtle);
  margin-bottom: 8px;
}
.file-row__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--qc-surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--qc-text-muted);
  flex-shrink: 0;
}
.file-row__icon--pdf { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }
.file-row__icon--img { background: rgba(168, 85, 247, 0.1); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.2); }
.file-row__icon--doc { background: rgba(59, 130, 246, 0.1); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.2); }
.file-row__icon svg { width: 14px; height: 14px; }
.file-row__info { flex: 1; min-width: 0; }
.file-row__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--qc-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-row__meta {
  font-size: 11px;
  color: var(--qc-text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .pager__page { padding: 20px 16px 24px; }
  .page-card { padding: 22px 18px 24px; border-radius: 18px; }
}

/* ── Setting row (label + sub + trailing control) ─────────────────
   Used for voting rules, dependencies, status, etc. — any section
   row that pairs descriptive text with a control on the right. */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--qc-separator, rgba(255, 255, 255, 0.06));
}
.setting-row:first-child { border-top: none; }
.setting-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.setting-row__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--qc-text-primary, #f0f0f5);
}
.setting-row__sub {
  font-size: 12px;
  color: var(--qc-text-muted, #8888a8);
}


/* === src/features/spaces/pages/actions/actions/follow/views/main/creator/style.css === */
/* ── Follow Creator Card Pager ─────────────────────────── */
.arena {
  --qc-bg-void: var(--dark, #06060e) var(--light, #f5f5fb);
  --qc-bg-glass: var(--dark, rgba(12,12,26,0.65)) var(--light, rgba(255,255,255,0.75));
  --qc-bg-glass-hover: var(--dark, rgba(20,20,40,0.80)) var(--light, rgba(255,255,255,0.95));
  --qc-border-subtle: var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(10,10,30,0.08));
  --qc-border-strong: var(--dark, rgba(255,255,255,0.12)) var(--light, rgba(10,10,30,0.16));
  --qc-text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --qc-text-muted: var(--dark, #8888a8) var(--light, #5b5b75);
  --qc-text-dim: var(--dark, #55556a) var(--light, #9898ad);
  --qc-surface-soft: var(--dark, rgba(255,255,255,0.02)) var(--light, rgba(10,10,30,0.03));
  --qc-surface-hover: var(--dark, rgba(255,255,255,0.04)) var(--light, rgba(10,10,30,0.05));
  --qc-glow-aura-a: var(--dark, rgba(251,146,60,0.06)) var(--light, rgba(251,146,60,0.14));
  --qc-glow-aura-b: var(--dark, rgba(252,179,0,0.03)) var(--light, rgba(252,179,0,0.06));
  --qc-panel-bg: var(--dark, rgba(12,12,26,1)) var(--light, rgba(255,255,255,1));
  --qc-input-bg: var(--dark, rgba(255,255,255,0.02)) var(--light, rgba(10,10,30,0.02));
  --qc-input-border: var(--dark, rgba(255,255,255,0.08)) var(--light, rgba(10,10,30,0.1));
  --qc-danger-bg: var(--dark, rgba(239,68,68,0.04)) var(--light, rgba(239,68,68,0.06));
  --qc-danger-border: var(--dark, rgba(239,68,68,0.18)) var(--light, rgba(239,68,68,0.22));

  --follow-color: #fb923c;
  --follow-bg: rgba(251,146,60,0.10);
  --follow-border: rgba(251,146,60,0.30);
  --follow-glow: rgba(251,146,60,0.20);
  --accent-gold: #fcb300;
  --accent-teal: #6eedd8;
  --accent-red: #ef4444;

  /* Pin to the viewport so the action-editor footer always lands on the
     bottom edge regardless of how the surrounding `min-h-0 flex-1`
     wrappers compute their height — fixed + inset:0 bypasses the
     parent's intrinsic height entirely. */
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--qc-bg-void);
  color: var(--qc-text-primary);
}
.arena::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, var(--qc-glow-aura-a), transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 120%, var(--qc-glow-aura-b), transparent 50%);
  z-index: 0;
  pointer-events: none;
}

/* Pager + page-card */
.pager {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  overflow: hidden;
}
.pager__track {
  display: flex;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.pager__page {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px 40px 32px;
  overflow-y: auto;
}

.page-card {
  width: 100%;
  margin: 0 auto;
  background: var(--qc-bg-glass);
  backdrop-filter: blur(20px);
  border: 1px solid var(--qc-border-subtle);
  border-radius: 24px;
  padding: 30px 30px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 0 20px 80px rgba(0,0,0,0.35);
}
.page-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--qc-border-subtle);
}
.page-card__title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-card__num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--follow-color);
  opacity: 0.85;
}
.page-card__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qc-text-primary);
}
.page-card__subtitle {
  font-size: 13px;
  color: var(--qc-text-muted);
}
.page-card__nextlink {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qc-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.page-card__nextlink:hover { color: var(--follow-color); }
.page-card__nextlink svg { width: 14px; height: 14px; }

/* Section */
.section {
  background: var(--qc-surface-soft);
  border: 1px solid var(--qc-border-subtle);
  border-radius: 16px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.section__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--qc-text-dim);
}
.section__hint {
  font-size: 12px;
  color: var(--qc-text-muted);
}
.section--danger {
  background: var(--qc-danger-bg);
  border-color: var(--qc-danger-border);
}

/* Field */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qc-text-muted);
}
.input,
.textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--qc-input-bg);
  border: 1px solid var(--qc-input-border);
  color: var(--qc-text-primary);
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
}
.input:focus,
.textarea:focus {
  border-color: rgba(252,179,0,0.4);
  box-shadow: 0 0 0 3px rgba(252,179,0,0.08);
}
.input--num { width: 140px; }
.input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.input-suffix {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--qc-text-muted);
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* Switch */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.switch__track {
  width: 38px;
  height: 22px;
  border-radius: 100px;
  background: var(--qc-surface-hover);
  border: 1px solid var(--qc-border-subtle);
  position: relative;
  transition: all 0.2s;
  flex-shrink: 0;
}
.switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--qc-text-muted);
  transition: all 0.2s;
}
.switch[aria-checked="true"] .switch__track {
  background: rgba(252,179,0,0.2);
  border-color: rgba(252,179,0,0.4);
}
.switch[aria-checked="true"] .switch__thumb {
  left: 18px;
  background: var(--accent-gold);
  box-shadow: 0 0 8px rgba(252,179,0,0.5);
}
.switch__label {
  font-size: 13px;
  color: var(--qc-text-primary);
}
.switch__sub {
  font-size: 11px;
  color: var(--qc-text-muted);
  display: block;
  margin-top: 2px;
}

/* Tile */
.tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  background: var(--qc-surface-soft);
  border: 1px solid var(--qc-border-subtle);
}
.tile__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qc-text-dim);
}
.tile__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--qc-border-subtle);
  background: transparent;
  color: var(--qc-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover {
  border-color: rgba(239,68,68,0.3);
  color: var(--accent-red);
}
.icon-btn svg {
  width: 13px;
  height: 13px;
}

/* Accordion */
.accordion {
  border: 1px solid var(--qc-border-subtle);
  border-radius: 12px;
  overflow: hidden;
  background: var(--qc-surface-soft);
}
.accordion__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: transparent;
  border: none;
  color: var(--qc-text-primary);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.accordion__head svg {
  width: 14px;
  height: 14px;
  color: var(--qc-text-muted);
  transition: transform 0.2s;
}
.accordion[data-open="true"] .accordion__head svg {
  transform: rotate(180deg);
}
.accordion__body {
  display: none;
  padding: 0 18px 18px;
  flex-direction: column;
  gap: 14px;
}
.accordion[data-open="true"] .accordion__body {
  display: flex;
}

@media (max-width: 768px) {
  .pager__page { padding: 20px 16px 24px; }
  .page-card { padding: 22px 18px 24px; border-radius: 18px; }
}

/* ── Setting row (label + sub + trailing control) ─────────────────
   Used for voting rules, dependencies, status, etc. — any section
   row that pairs descriptive text with a control on the right. */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--qc-separator, rgba(255, 255, 255, 0.06));
}
.setting-row:first-child { border-top: none; }
.setting-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.setting-row__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--qc-text-primary, #f0f0f5);
}
.setting-row__sub {
  font-size: 12px;
  color: var(--qc-text-muted, #8888a8);
}


/* === src/features/spaces/pages/actions/actions/meet/components/meet_card/style.css === */
/* ── Meet Action Card ──────────────────────────────
   Styles are largely inherited from the shared quest-card
   system (see action_dashboard/style.css). Meet-specific
   accents below. Meet brand = coral #fb7185.
   ────────────────────────────────────────────────── */

.quest-card--meet.active {
  border-color: rgba(251, 113, 133, 0.18);
  box-shadow:
    0 12px 60px var(--dark, rgba(0, 0, 0, 0.5)) var(--light, rgba(0, 0, 0, 0.12)),
    0 0 40px rgba(251, 113, 133, 0.12);
}

.quest-card__type--meet {
  background: rgba(251, 113, 133, 0.08);
  color: #fb7185;
  border: 1px solid rgba(251, 113, 133, 0.25);
}

.quest-card__badge--live {
  background: rgba(251, 113, 133, 0.1);
  color: #fb7185;
  border: 1px solid rgba(251, 113, 133, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.quest-card__badge--live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fb7185;
  box-shadow: 0 0 6px #fb7185;
  animation: meet-card-pulse 1.1s ease-in-out infinite;
}

@keyframes meet-card-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.quest-card__badge--scheduled {
  background: rgba(129, 140, 248, 0.08);
  color: #818cf8;
  border: 1px solid rgba(129, 140, 248, 0.22);
}

.quest-card__badge--ended {
  background: rgba(148, 163, 184, 0.12);
  color: var(--dark, #94a3b8) var(--light, #64748b);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.quest-card__badge--draft {
  background: rgba(148, 163, 184, 0.08);
  color: var(--dark, #94a3b8) var(--light, #64748b);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.quest-card__badge--coming-soon {
  background: rgba(252, 179, 0, 0.1);
  color: #fcb300;
  border: 1px solid rgba(252, 179, 0, 0.25);
  margin-left: 6px;
}


/* === src/features/spaces/pages/actions/actions/meet/components/meet_page/style.css === */
/* ─────────────────────────────────────────────────────────────
   Meet Action editor / viewer styles
   Ported from app/ratel/assets/design/meet-action/create-meet.html
   (+ relevant rules from app/ratel/assets/design/meet-action/shared.css)
   Preserves mockup class names exactly so the RSX contract matches.
   ───────────────────────────────────────────────────────────── */

.meet-editor,
.meet-viewer {
  /* Local tokens — both themes via space toggle pattern */
  --meet-color: #fb7185;
  --meet-bg: rgba(251, 113, 133, 0.08);
  --meet-border: rgba(251, 113, 133, 0.25);
  --meet-glow: rgba(251, 113, 133, 0.18);

  --mt-text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --mt-text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --mt-text-dim: var(--dark, #55556a) var(--light, #8a8a99);

  --mt-bg-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --mt-bg-input: var(--dark, rgba(6, 6, 14, 0.6)) var(--light, rgba(255, 255, 255, 0.9));
  --mt-bg-option: var(--dark, rgba(6, 6, 14, 0.55)) var(--light, rgba(255, 255, 255, 0.7));

  --mt-border-subtle: var(--dark, rgba(255, 255, 255, 0.06))
    var(--light, rgba(0, 0, 0, 0.08));
  --mt-border-strong: var(--dark, rgba(255, 255, 255, 0.12))
    var(--light, rgba(0, 0, 0, 0.14));

  --mt-shadow-card: var(--dark, 0 4px 24px rgba(0, 0, 0, 0.25))
    var(--light, 0 4px 18px rgba(0, 0, 0, 0.06));
  --mt-shadow-bar: var(--dark, 0 12px 40px rgba(0, 0, 0, 0.5))
    var(--light, 0 10px 30px rgba(0, 0, 0, 0.1));

  --mt-font-display: "Orbitron", sans-serif;
  --mt-font-body: "Outfit", sans-serif;

  --accent-coral: #ef4444;

  display: flex;
  flex-direction: column;
  gap: 22px;
  color: var(--mt-text-primary);
  font-family: var(--mt-font-body);
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 0 32px;
}

/* ═════════ Meet card (glass panel) ═════════ */
.meet-card {
  position: relative;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--mt-bg-glass);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(251, 113, 133, 0.22);
  box-shadow: var(--mt-shadow-card);
}

.meet-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.meet-card__title {
  font-family: var(--mt-font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mt-text-primary);
  margin: 0;
}

.meet-card__title--meet {
  background: linear-gradient(135deg, var(--meet-color), #ffa5b4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═════════ Mode segmented toggle ═════════ */
.mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}

.mode-option {
  position: relative;
  padding: 18px 20px;
  border-radius: 14px;
  cursor: pointer;
  background: var(--mt-bg-option);
  border: 1px solid var(--mt-border-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.25s;
}

.mode-option:hover {
  border-color: var(--meet-border);
  background: rgba(251, 113, 133, 0.03);
}

.mode-option[aria-selected="true"] {
  border-color: var(--meet-color);
  background: var(--meet-bg);
  box-shadow: 0 0 18px var(--meet-glow);
}

.mode-option__title {
  font-family: var(--mt-font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--mt-text-primary);
}

.mode-option[aria-selected="true"] .mode-option__title {
  color: var(--meet-color);
}

.mode-option__desc {
  font-size: 12px;
  color: var(--mt-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ═════════ Form field ═════════ */
.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}

.field:last-child {
  margin-bottom: 0;
}

.field__label {
  font-family: var(--mt-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mt-text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.field__label .req {
  color: var(--accent-coral);
  font-size: 12px;
}

.field__hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--mt-text-dim);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.field__input,
.field__textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 11px;
  background: var(--mt-bg-input);
  border: 1px solid var(--mt-border-subtle);
  color: var(--mt-text-primary);
  font-family: var(--mt-font-body);
  font-size: 13px;
  transition: all 0.25s;
  outline: none;
  resize: vertical;
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: var(--mt-text-dim);
}

.field__input:focus,
.field__textarea:focus {
  border-color: var(--meet-border);
  box-shadow: 0 0 14px var(--meet-glow);
}

.field__textarea {
  min-height: 100px;
  line-height: 1.55;
}

/* ═════════ When row (start time + duration) ═════════ */
.when-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 600px) {
  .when-row {
    grid-template-columns: 1fr;
  }
}

/* ═════════ Duration stepper ═════════ */
.dur {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 11px;
  background: var(--mt-bg-input);
  border: 1px solid var(--mt-border-subtle);
}

.dur__step {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--mt-border-subtle);
  color: var(--mt-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--mt-font-display);
  font-size: 14px;
  font-weight: 800;
}

.dur__step:hover {
  color: var(--meet-color);
  border-color: var(--meet-border);
}

.dur__value {
  flex: 1;
  text-align: center;
  font-family: var(--mt-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--mt-text-primary);
}

.dur__value small {
  color: var(--mt-text-muted);
  font-weight: 500;
  font-size: 11px;
  margin-left: 4px;
}

/* ═════════ Create bar (sticky bottom submit) ═════════ */
.create-bar {
  position: sticky;
  bottom: 16px;
  margin: 16px -4px 0;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--mt-bg-glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--mt-border-subtle);
  box-shadow: var(--mt-shadow-bar);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ═════════ Meet viewer (participant-facing stub) ═════════ */
.meet-viewer__title {
  font-family: var(--mt-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--mt-text-primary);
  margin: 0 0 8px;
}

.meet-viewer__desc {
  font-size: 14px;
  color: var(--mt-text-muted);
  line-height: 1.55;
  margin: 0 0 16px;
}

.meet-viewer__scheduled,
.meet-viewer__live,
.meet-viewer__ended {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--mt-bg-glass);
  border: 1px solid var(--mt-border-subtle);
}

.meet-viewer__live {
  border-color: var(--meet-border);
  background: var(--meet-bg);
}

.meet-viewer__scheduled-label,
.meet-viewer__live-label,
.meet-viewer__ended-label {
  font-family: var(--mt-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meet-color);
}

.meet-viewer__ended-label {
  color: var(--mt-text-muted);
}

.meet-viewer__scheduled-ts {
  font-family: var(--mt-font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--mt-text-primary);
}

.meet-viewer__coming-soon {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 100px;
  font-family: var(--mt-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(252, 179, 0, 0.1);
  border: 1px solid rgba(252, 179, 0, 0.25);
  color: #fcb300;
}

/* ═════════ Responsive ═════════ */
@media (max-width: 720px) {
  .meet-editor,
  .meet-viewer {
    padding: 12px 0 24px;
    gap: 16px;
  }

  .meet-card {
    padding: 18px;
  }

  .mode-toggle {
    grid-template-columns: 1fr;
  }
}


/* === src/features/spaces/pages/actions/actions/poll/views/main/creator/style.css === */
/* ── Poll Creator Card Pager ────────────────────────────── */
.arena {
  --qc-bg-void: var(--dark, #06060e) var(--light, #f5f5fb);
  --qc-bg-glass: var(--dark, rgba(12,12,26,0.65)) var(--light, rgba(255,255,255,0.75));
  --qc-bg-glass-hover: var(--dark, rgba(20,20,40,0.80)) var(--light, rgba(255,255,255,0.95));
  --qc-border-subtle: var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(10,10,30,0.08));
  --qc-border-strong: var(--dark, rgba(255,255,255,0.12)) var(--light, rgba(10,10,30,0.16));
  --qc-text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --qc-text-muted: var(--dark, #8888a8) var(--light, #5b5b75);
  --qc-text-dim: var(--dark, #55556a) var(--light, #9898ad);
  --qc-surface-soft: var(--dark, rgba(255,255,255,0.02)) var(--light, rgba(10,10,30,0.03));
  --qc-surface-hover: var(--dark, rgba(255,255,255,0.04)) var(--light, rgba(10,10,30,0.05));
  --qc-glow-aura-a: var(--dark, rgba(129,140,248,0.06)) var(--light, rgba(129,140,248,0.12));
  --qc-glow-aura-b: var(--dark, rgba(252,179,0,0.03)) var(--light, rgba(252,179,0,0.06));
  --qc-panel-bg: var(--dark, rgba(12,12,26,1)) var(--light, rgba(255,255,255,1));
  --qc-input-bg: var(--dark, rgba(255,255,255,0.02)) var(--light, rgba(10,10,30,0.02));
  --qc-input-border: var(--dark, rgba(255,255,255,0.08)) var(--light, rgba(10,10,30,0.1));
  --qc-danger-bg: var(--dark, rgba(239,68,68,0.04)) var(--light, rgba(239,68,68,0.06));
  --qc-danger-border: var(--dark, rgba(239,68,68,0.18)) var(--light, rgba(239,68,68,0.22));

  --poll-color: #818cf8;
  --poll-bg: rgba(129,140,248,0.10);
  --poll-border: rgba(129,140,248,0.28);
  --poll-glow: rgba(129,140,248,0.18);
  --accent-gold: #fcb300;
  --accent-teal: #6eedd8;
  --accent-red: #ef4444;

  /* Pin to the viewport so the action-editor footer always lands on the
     bottom edge regardless of how the surrounding `min-h-0 flex-1`
     wrappers compute their height — fixed + inset:0 bypasses the
     parent's intrinsic height entirely. */
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--qc-bg-void);
  color: var(--qc-text-primary);
}
.arena::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, var(--qc-glow-aura-a), transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 120%, var(--qc-glow-aura-b), transparent 50%);
  z-index: 0;
  pointer-events: none;
}

/* Pager + page-card */
.pager {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  overflow: hidden;
}
.pager__track {
  display: flex;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.pager__page {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px 40px 32px;
  overflow-y: auto;
}

.page-card {
  width: 100%;
  margin: 0 auto;
  background: var(--qc-bg-glass);
  backdrop-filter: blur(20px);
  border: 1px solid var(--qc-border-subtle);
  border-radius: 24px;
  padding: 30px 30px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 0 20px 80px rgba(0,0,0,0.35);
}
.page-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--qc-border-subtle);
}
.page-card__title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-card__num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--poll-color);
  opacity: 0.85;
}
.page-card__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qc-text-primary);
}
.page-card__subtitle {
  font-size: 13px;
  color: var(--qc-text-muted);
}
.page-card__nextlink {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qc-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.page-card__nextlink:hover { color: var(--poll-color); }
.page-card__nextlink svg { width: 14px; height: 14px; }

/* Section */
.section {
  background: var(--qc-surface-soft);
  border: 1px solid var(--qc-border-subtle);
  border-radius: 16px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.section__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--qc-text-dim);
}
.section__hint {
  font-size: 12px;
  color: var(--qc-text-muted);
}
.section--danger {
  background: var(--qc-danger-bg);
  border-color: var(--qc-danger-border);
}

/* Field */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qc-text-muted);
}
.input,
.textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--qc-input-bg);
  border: 1px solid var(--qc-input-border);
  color: var(--qc-text-primary);
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
}
.input:focus,
.textarea:focus {
  border-color: rgba(252,179,0,0.4);
  box-shadow: 0 0 0 3px rgba(252,179,0,0.08);
}
.input--num { width: 140px; }
.input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.input-suffix {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--qc-text-muted);
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* Chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--qc-surface-soft);
  border: 1px solid var(--qc-border-subtle);
  font-size: 12px;
  font-weight: 500;
  color: var(--qc-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.chip:hover {
  border-color: var(--poll-border);
  color: var(--poll-color);
}
.chip[aria-pressed="true"] {
  background: var(--poll-bg);
  border-color: var(--poll-border);
  color: var(--poll-color);
}
.chip__x {
  opacity: 0.7;
  font-size: 14px;
  line-height: 1;
}
.chip-input {
  min-width: 140px;
  padding: 6px 10px;
  border-radius: 100px;
  background: transparent;
  border: 1px dashed var(--qc-border-strong);
  color: var(--qc-text-muted);
  font-size: 12px;
  outline: none;
}
.chip-input:focus {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

/* Switch */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
/* Voting-rules switches (direct children of .section, with label+sub inside)
   need to fill the section row so .switch__body gets real width. Tile switches
   and inline switches (reward toggle, prereq tile) stay content-sized. */
.section > .switch {
  display: flex;
  width: 100%;
}
.switch__track {
  width: 38px;
  height: 22px;
  border-radius: 100px;
  background: var(--qc-surface-hover);
  border: 1px solid var(--qc-border-subtle);
  position: relative;
  transition: all 0.2s;
  flex-shrink: 0;
}
.switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--qc-text-muted);
  transition: all 0.2s;
}
.switch[aria-checked="true"] .switch__track {
  background: rgba(252,179,0,0.2);
  border-color: rgba(252,179,0,0.4);
}
.switch[aria-checked="true"] .switch__thumb {
  left: 18px;
  background: var(--accent-gold);
  box-shadow: 0 0 8px rgba(252,179,0,0.5);
}
.switch__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.switch__label {
  font-size: 13px;
  color: var(--qc-text-primary);
}
.switch__sub {
  font-size: 11px;
  color: var(--qc-text-muted);
  display: block;
  margin-top: 2px;
}

/* Segmented */
.segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--qc-surface-soft);
  border: 1px solid var(--qc-border-subtle);
  border-radius: 10px;
  gap: 2px;
}
.segmented__btn {
  padding: 8px 14px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--qc-text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.segmented__btn[aria-selected="true"] {
  background: rgba(252,179,0,0.12);
  color: var(--accent-gold);
  box-shadow: 0 1px 4px rgba(252,179,0,0.15);
}
.segmented--sm { padding: 2px; }
.segmented--sm .segmented__btn {
  padding: 5px 10px;
  font-size: 10px;
  letter-spacing: 0.06em;
}

/* Tile */
.tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  background: var(--qc-surface-soft);
  border: 1px solid var(--qc-border-subtle);
}
.tile__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qc-text-dim);
}
.tile__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Editor */
.editor {
  border: 1px solid var(--qc-input-border);
  border-radius: 12px;
  background: var(--qc-input-bg);
  overflow: hidden;
}
.editor__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--qc-border-subtle);
  background: var(--qc-surface-soft);
}
.editor__tool {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--qc-text-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.editor__tool:hover {
  background: var(--qc-surface-hover);
  color: var(--accent-gold);
}
.editor__divider {
  width: 1px;
  height: 18px;
  background: var(--qc-border-subtle);
  margin: 0 4px;
}
.editor__body {
  padding: 20px 22px;
  min-height: 140px;
  color: var(--qc-text-primary);
  font-size: 15px;
  line-height: 1.7;
  outline: none;
}
.editor__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-top: 1px solid var(--qc-border-subtle);
  background: var(--qc-surface-soft);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qc-text-dim);
}

/* Question block */
.q-block {
  padding: 16px;
  border-radius: 14px;
  background: var(--qc-surface-soft);
  border: 1px solid var(--qc-border-subtle);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
.q-block__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.q-block__head-spacer { flex: 1; }
.q-block__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--poll-bg);
  color: var(--poll-color);
  border: 1px solid var(--poll-border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* q-body variants — only the active one is shown via data-qtype on parent */
.q-body { display: none; flex-direction: column; gap: 8px; }
.q-block[data-qtype="single"] .q-body--single { display: flex; }
.q-block[data-qtype="multi"] .q-body--multi { display: flex; }
.q-block[data-qtype="subjective"] .q-body--subjective { display: flex; }
.q-block[data-qtype="linear"] .q-body--linear { display: flex; }

.q-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--qc-input-bg);
  border: 1px solid var(--qc-input-border);
}
.q-opt__radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--qc-border-strong);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  background: transparent;
}
.q-opt[aria-checked="true"] .q-opt__radio {
  border-color: var(--poll-color);
}
.q-opt[aria-checked="true"] .q-opt__radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--poll-color);
  box-shadow: 0 0 8px var(--poll-glow);
}
.q-opt--check .q-opt__radio { border-radius: 5px; }
.q-opt--check[aria-checked="true"] .q-opt__radio::after {
  border-radius: 2px;
  inset: 3px;
}
.q-opt__remove {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--qc-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  padding: 0;
}
.q-opt__remove:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
.q-opt__other-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  font-size: 13px;
  color: var(--qc-text-muted);
  cursor: pointer;
  user-select: none;
}
.q-opt__other-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--poll-color);
  cursor: pointer;
}
.add-btn--sm {
  padding: 8px 12px;
  font-size: 13px;
  width: fit-content;
}
.q-opt .input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 4px 0;
}
.q-opt .input:focus { box-shadow: none; }

.q-subjective-hint {
  font-size: 11px;
  color: var(--qc-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.q-linear-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.q-linear-row .field { flex: 0 0 120px; }
.q-linear-row .field__label { font-size: 10px; }
.q-linear-preview {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--qc-input-bg);
  border: 1px dashed var(--qc-input-border);
  color: var(--qc-text-muted);
  font-size: 12px;
  min-height: 44px;
}
@media (max-width: 640px) {
  /* Stack min / max vertically and move the 1…5 scale preview BELOW the max
     field (it was sandwiched between min and max). `order: 1` pushes the
     preview after both order-0 fields. */
  .q-linear-row {
    flex-direction: column;
    align-items: stretch;
  }
  .q-linear-row .field {
    flex: none;
    width: 100%;
  }
  .q-linear-preview {
    order: 1;
    flex-basis: auto;
  }
}
.q-linear-preview__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--poll-bg);
  border: 1px solid var(--poll-border);
  flex-shrink: 0;
}
.q-linear-preview__dot--filled {
  background: var(--poll-color);
  border-color: var(--poll-color);
  box-shadow: 0 0 8px var(--poll-glow);
}

.icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--qc-border-subtle);
  background: transparent;
  color: var(--qc-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover {
  border-color: rgba(239,68,68,0.3);
  color: var(--accent-red);
}
.icon-btn svg {
  width: 13px;
  height: 13px;
}

.add-btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1.5px dashed var(--qc-border-strong);
  background: transparent;
  color: var(--qc-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}
.add-btn:hover {
  border-color: var(--poll-color);
  color: var(--poll-color);
  background: var(--poll-bg);
}
.add-btn svg {
  width: 14px;
  height: 14px;
}

/* Accordion */
.accordion {
  border: 1px solid var(--qc-border-subtle);
  border-radius: 12px;
  overflow: hidden;
  background: var(--qc-surface-soft);
}
.accordion__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: transparent;
  border: none;
  color: var(--qc-text-primary);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.accordion__head svg {
  width: 14px;
  height: 14px;
  color: var(--qc-text-muted);
  transition: transform 0.2s;
}
.accordion[data-open="true"] .accordion__head svg {
  transform: rotate(180deg);
}
.accordion__body {
  display: none;
  padding: 0 18px 18px;
  flex-direction: column;
  gap: 14px;
}
.accordion[data-open="true"] .accordion__body {
  display: flex;
}

@media (max-width: 768px) {
  .pager__page { padding: 20px 16px 24px; }
  .page-card { padding: 22px 18px 24px; border-radius: 18px; }
}

/* ── Setting row (label + sub + trailing control) ─────────────────
   Used for voting rules, dependencies, status, etc. — any section
   row that pairs descriptive text with a control on the right. */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--qc-separator, rgba(255, 255, 255, 0.06));
}
.setting-row:first-child { border-top: none; }
.setting-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.setting-row__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--qc-text-primary, #f0f0f5);
}
.setting-row__sub {
  font-size: 12px;
  color: var(--qc-text-muted, #8888a8);
}


/* === src/features/spaces/pages/actions/actions/quiz/views/main/creator/style.css === */
/* ── Quiz Creator Card Pager ────────────────────────────── */
.arena {
  --qc-bg-void: var(--dark, #06060e) var(--light, #f5f5fb);
  --qc-bg-glass: var(--dark, rgba(12,12,26,0.65)) var(--light, rgba(255,255,255,0.75));
  --qc-bg-glass-hover: var(--dark, rgba(20,20,40,0.80)) var(--light, rgba(255,255,255,0.95));
  --qc-border-subtle: var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(10,10,30,0.08));
  --qc-border-strong: var(--dark, rgba(255,255,255,0.12)) var(--light, rgba(10,10,30,0.16));
  --qc-text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --qc-text-muted: var(--dark, #8888a8) var(--light, #5b5b75);
  --qc-text-dim: var(--dark, #55556a) var(--light, #9898ad);
  --qc-surface-soft: var(--dark, rgba(255,255,255,0.02)) var(--light, rgba(10,10,30,0.03));
  --qc-surface-hover: var(--dark, rgba(255,255,255,0.04)) var(--light, rgba(10,10,30,0.05));
  --qc-glow-aura-a: var(--dark, rgba(168,85,247,0.06)) var(--light, rgba(168,85,247,0.12));
  --qc-glow-aura-b: var(--dark, rgba(252,179,0,0.03)) var(--light, rgba(252,179,0,0.06));
  --qc-panel-bg: var(--dark, rgba(12,12,26,1)) var(--light, rgba(255,255,255,1));
  --qc-input-bg: var(--dark, rgba(255,255,255,0.02)) var(--light, rgba(10,10,30,0.02));
  --qc-input-border: var(--dark, rgba(255,255,255,0.08)) var(--light, rgba(10,10,30,0.1));
  --qc-danger-bg: var(--dark, rgba(239,68,68,0.04)) var(--light, rgba(239,68,68,0.06));
  --qc-danger-border: var(--dark, rgba(239,68,68,0.18)) var(--light, rgba(239,68,68,0.22));

  --quiz-color: #a855f7;
  --quiz-bg: rgba(168,85,247,0.10);
  --quiz-border: rgba(168,85,247,0.28);
  --quiz-glow: rgba(168,85,247,0.18);
  --accent-gold: #fcb300;
  --accent-teal: #6eedd8;
  --accent-red: #ef4444;

  /* Pin to the viewport so the action-editor footer always lands on the
     bottom edge regardless of how the surrounding `min-h-0 flex-1`
     wrappers compute their height — fixed + inset:0 bypasses the
     parent's intrinsic height entirely. */
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--qc-bg-void);
  color: var(--qc-text-primary);
}
.arena::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, var(--qc-glow-aura-a), transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 120%, var(--qc-glow-aura-b), transparent 50%);
  z-index: 0;
  pointer-events: none;
}

/* Pager + page-card */
.pager {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  overflow: hidden;
}
.pager__track {
  display: flex;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.pager__page {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px 40px 32px;
  overflow-y: auto;
}

.page-card {
  width: 100%;
  margin: 0 auto;
  background: var(--qc-bg-glass);
  backdrop-filter: blur(20px);
  border: 1px solid var(--qc-border-subtle);
  border-radius: 24px;
  padding: 30px 30px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 0 20px 80px rgba(0,0,0,0.35);
}
.page-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--qc-border-subtle);
}
.page-card__title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-card__num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--quiz-color);
  opacity: 0.85;
}
.page-card__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qc-text-primary);
}
.page-card__subtitle {
  font-size: 13px;
  color: var(--qc-text-muted);
}
.page-card__nextlink {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qc-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.page-card__nextlink:hover { color: var(--quiz-color); }
.page-card__nextlink svg { width: 14px; height: 14px; }

/* Section */
.section {
  background: var(--qc-surface-soft);
  border: 1px solid var(--qc-border-subtle);
  border-radius: 16px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.section__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--qc-text-dim);
}
.section__hint {
  font-size: 12px;
  color: var(--qc-text-muted);
}
.section--danger {
  background: var(--qc-danger-bg);
  border-color: var(--qc-danger-border);
}

/* Field */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qc-text-muted);
}
.input,
.textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--qc-input-bg);
  border: 1px solid var(--qc-input-border);
  color: var(--qc-text-primary);
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
}
.input:focus,
.textarea:focus {
  border-color: rgba(252,179,0,0.4);
  box-shadow: 0 0 0 3px rgba(252,179,0,0.08);
}
.input--num { width: 140px; }
.input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.input-suffix {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--qc-text-muted);
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* Chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--qc-surface-soft);
  border: 1px solid var(--qc-border-subtle);
  font-size: 12px;
  font-weight: 500;
  color: var(--qc-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.chip:hover {
  border-color: var(--quiz-border);
  color: var(--quiz-color);
}
.chip[aria-pressed="true"] {
  background: var(--quiz-bg);
  border-color: var(--quiz-border);
  color: var(--quiz-color);
}
.chip__x {
  opacity: 0.7;
  font-size: 14px;
  line-height: 1;
}
.chip-input {
  min-width: 140px;
  padding: 6px 10px;
  border-radius: 100px;
  background: transparent;
  border: 1px dashed var(--qc-border-strong);
  color: var(--qc-text-muted);
  font-size: 12px;
  outline: none;
}
.chip-input:focus {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

/* Switch */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.switch__track {
  width: 38px;
  height: 22px;
  border-radius: 100px;
  background: var(--qc-surface-hover);
  border: 1px solid var(--qc-border-subtle);
  position: relative;
  transition: all 0.2s;
  flex-shrink: 0;
}
.switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--qc-text-muted);
  transition: all 0.2s;
}
.switch[aria-checked="true"] .switch__track {
  background: rgba(252,179,0,0.2);
  border-color: rgba(252,179,0,0.4);
}
.switch[aria-checked="true"] .switch__thumb {
  left: 18px;
  background: var(--accent-gold);
  box-shadow: 0 0 8px rgba(252,179,0,0.5);
}
.switch__label {
  font-size: 13px;
  color: var(--qc-text-primary);
}
.switch__sub {
  font-size: 11px;
  color: var(--qc-text-muted);
  display: block;
  margin-top: 2px;
}

/* Segmented */
.segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--qc-surface-soft);
  border: 1px solid var(--qc-border-subtle);
  border-radius: 10px;
  gap: 2px;
}
.segmented__btn {
  padding: 8px 14px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--qc-text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.segmented__btn[aria-selected="true"] {
  background: rgba(252,179,0,0.12);
  color: var(--accent-gold);
  box-shadow: 0 1px 4px rgba(252,179,0,0.15);
}
.segmented--sm { padding: 2px; }
.segmented--sm .segmented__btn {
  padding: 5px 10px;
  font-size: 10px;
  letter-spacing: 0.06em;
}

/* Tile */
.tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  background: var(--qc-surface-soft);
  border: 1px solid var(--qc-border-subtle);
}
.tile__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qc-text-dim);
}
.tile__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Editor */
.editor {
  border: 1px solid var(--qc-input-border);
  border-radius: 12px;
  background: var(--qc-input-bg);
  overflow: hidden;
}
.editor__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--qc-border-subtle);
  background: var(--qc-surface-soft);
}
.editor__tool {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--qc-text-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.editor__tool:hover {
  background: var(--qc-surface-hover);
  color: var(--accent-gold);
}
.editor__divider {
  width: 1px;
  height: 18px;
  background: var(--qc-border-subtle);
  margin: 0 4px;
}
.editor__body {
  padding: 20px 22px;
  min-height: 140px;
  color: var(--qc-text-primary);
  font-size: 15px;
  line-height: 1.7;
  outline: none;
}
.editor__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-top: 1px solid var(--qc-border-subtle);
  background: var(--qc-surface-soft);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qc-text-dim);
}

/* Question block */
.q-block {
  padding: 16px;
  border-radius: 14px;
  background: var(--qc-surface-soft);
  border: 1px solid var(--qc-border-subtle);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
.q-block__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.q-block__head-spacer { flex: 1; }
.q-block__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--quiz-bg);
  color: var(--quiz-color);
  border: 1px solid var(--quiz-border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.q-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--qc-input-bg);
  border: 1px solid var(--qc-input-border);
}
.q-opt__radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--qc-border-strong);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  background: transparent;
}
.q-opt[aria-checked="true"] .q-opt__radio {
  border-color: var(--quiz-color);
}
.q-opt[aria-checked="true"] .q-opt__radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--quiz-color);
  box-shadow: 0 0 8px var(--quiz-glow);
}
.q-opt--check .q-opt__radio { border-radius: 5px; }
.q-opt--check[aria-checked="true"] .q-opt__radio::after {
  border-radius: 2px;
  inset: 3px;
}
.q-opt__remove {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--qc-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  padding: 0;
}
.q-opt__remove:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
.add-btn--sm {
  padding: 8px 12px;
  font-size: 13px;
  width: fit-content;
}
.q-opt .input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 4px 0;
}
.q-opt .input:focus { box-shadow: none; }

.q-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.q-subjective-hint {
  font-size: 11px;
  color: var(--qc-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.q-linear-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.q-linear-row .field { flex: 0 0 120px; }
.q-linear-row .field__label { font-size: 10px; }
.q-linear-preview {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--qc-input-bg);
  border: 1px dashed var(--qc-input-border);
  color: var(--qc-text-muted);
  font-size: 12px;
  min-height: 44px;
}
@media (max-width: 640px) {
  /* Stack min / max vertically and move the 1…5 scale preview BELOW the max
     field (it was sandwiched between min and max). `order: 1` pushes the
     preview after both order-0 fields. */
  .q-linear-row {
    flex-direction: column;
    align-items: stretch;
  }
  .q-linear-row .field {
    flex: none;
    width: 100%;
  }
  .q-linear-preview {
    order: 1;
    flex-basis: auto;
  }
}
.q-linear-preview__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--quiz-bg);
  border: 1px solid var(--quiz-border);
  flex-shrink: 0;
}
.q-linear-preview__dot--filled {
  background: var(--quiz-color);
  border-color: var(--quiz-color);
  box-shadow: 0 0 8px var(--quiz-glow);
}

.icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--qc-border-subtle);
  background: transparent;
  color: var(--qc-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover {
  border-color: rgba(239,68,68,0.3);
  color: var(--accent-red);
}
.icon-btn svg {
  width: 13px;
  height: 13px;
}

.add-btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1.5px dashed var(--qc-border-strong);
  background: transparent;
  color: var(--qc-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}
.add-btn:hover {
  border-color: var(--quiz-color);
  color: var(--quiz-color);
  background: var(--quiz-bg);
}
.add-btn svg {
  width: 14px;
  height: 14px;
}

/* Accordion */
.accordion {
  border: 1px solid var(--qc-border-subtle);
  border-radius: 12px;
  overflow: hidden;
  background: var(--qc-surface-soft);
}
.accordion__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: transparent;
  border: none;
  color: var(--qc-text-primary);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.accordion__head svg {
  width: 14px;
  height: 14px;
  color: var(--qc-text-muted);
  transition: transform 0.2s;
}
.accordion[data-open="true"] .accordion__head svg {
  transform: rotate(180deg);
}
.accordion__body {
  display: none;
  padding: 0 18px 18px;
  flex-direction: column;
  gap: 14px;
}
.accordion[data-open="true"] .accordion__body {
  display: flex;
}

@media (max-width: 768px) {
  .pager__page { padding: 20px 16px 24px; }
  .page-card { padding: 22px 18px 24px; border-radius: 18px; }
}

/* Attachments */
.dropzone {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1.5px dashed rgba(252, 179, 0, 0.3);
  background: var(--dark, rgba(252, 179, 0, 0.02)) var(--light, rgba(252, 179, 0, 0.05));
  cursor: pointer;
  color: var(--qc-text-muted);
  transition: all 0.2s;
}
.dropzone:hover {
  border-color: #fcb300;
  background: rgba(252, 179, 0, 0.05);
  color: #fcb300;
}
.dropzone svg { width: 18px; height: 18px; }
.dropzone__text { display: flex; flex-direction: column; gap: 2px; }
.dropzone__title { font-size: 13px; font-weight: 600; color: var(--qc-text-primary); }
.dropzone__sub { font-size: 11px; color: var(--qc-text-dim); }

.file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--dark, rgba(255, 255, 255, 0.03)) var(--light, rgba(10, 10, 30, 0.03));
  border: 1px solid var(--qc-border-subtle);
  margin-bottom: 8px;
}
.file-row__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--qc-surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--qc-text-muted);
  flex-shrink: 0;
}
.file-row__icon--pdf { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }
.file-row__icon--img { background: rgba(168, 85, 247, 0.1); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.2); }
.file-row__icon--doc { background: rgba(59, 130, 246, 0.1); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.2); }
.file-row__icon svg { width: 14px; height: 14px; }
.file-row__info { flex: 1; min-width: 0; }
.file-row__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--qc-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-row__meta {
  font-size: 11px;
  color: var(--qc-text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Setting row (label + sub + trailing control) ─────────────────
   Used for voting rules, dependencies, status, etc. — any section
   row that pairs descriptive text with a control on the right. */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--qc-separator, rgba(255, 255, 255, 0.06));
}
.setting-row:first-child { border-top: none; }
.setting-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.setting-row__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--qc-text-primary, #f0f0f5);
}
.setting-row__sub {
  font-size: 12px;
  color: var(--qc-text-muted, #8888a8);
}


/* === src/features/spaces/pages/actions/components/action_edit_footer/style.css === */
/* Sticky bottom footer for action-editor pages — Previous / counter /
   Next / Save in a single row.

   Theme-aware via the `var(--dark, X) var(--light, Y)` space-toggle so
   light/dark switches stay in sync with the rest of the editor chrome.
   `--aef-accent*` defaults to gold and is overridden per
   `data-action-type` so every interactive accent (button hover, save
   button background) matches the action's identity color. */
.action-edit-footer {
  --aef-bg-glass: var(--dark, rgba(12, 12, 26, 0.85))
    var(--light, rgba(255, 255, 255, 0.85));
  --aef-border-subtle: var(--dark, rgba(255, 255, 255, 0.06))
    var(--light, rgba(10, 10, 30, 0.08));
  --aef-text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --aef-text-muted: var(--dark, #8888a8) var(--light, #5b5b75);
  --aef-text-disabled: var(--dark, #55556a) var(--light, #aeaebd);
  --aef-surface-soft: var(--dark, rgba(255, 255, 255, 0.04))
    var(--light, rgba(10, 10, 30, 0.04));
  --aef-surface-hover: var(--dark, rgba(255, 255, 255, 0.08))
    var(--light, rgba(10, 10, 30, 0.06));

  /* Default accent (gold) — overridden per action type below. */
  --aef-accent: #fcb300;
  --aef-accent-bg: rgba(252, 179, 0, 0.12);
  --aef-accent-bg-hover: rgba(252, 179, 0, 0.20);
  --aef-accent-border: rgba(252, 179, 0, 0.35);

  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  border-top: 1px solid var(--aef-border-subtle);
  background: var(--aef-bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  width: 100%;
}

/* Per-action accent palette (matches `.type-badge[data-action-type=...]`
   in action_edit_topbar). */
.action-edit-footer[data-action-type="poll"] {
  --aef-accent: #818cf8;
  --aef-accent-bg: rgba(129, 140, 248, 0.15);
  --aef-accent-bg-hover: rgba(129, 140, 248, 0.25);
  --aef-accent-border: rgba(129, 140, 248, 0.40);
}
.action-edit-footer[data-action-type="quiz"] {
  --aef-accent: #a855f7;
  --aef-accent-bg: rgba(168, 85, 247, 0.15);
  --aef-accent-bg-hover: rgba(168, 85, 247, 0.25);
  --aef-accent-border: rgba(168, 85, 247, 0.40);
}
.action-edit-footer[data-action-type="discussion"] {
  --aef-accent: #22d3ee;
  --aef-accent-bg: rgba(34, 211, 238, 0.13);
  --aef-accent-bg-hover: rgba(34, 211, 238, 0.22);
  --aef-accent-border: rgba(34, 211, 238, 0.36);
}
.action-edit-footer[data-action-type="follow"] {
  --aef-accent: #fb923c;
  --aef-accent-bg: rgba(251, 146, 60, 0.15);
  --aef-accent-bg-hover: rgba(251, 146, 60, 0.25);
  --aef-accent-border: rgba(251, 146, 60, 0.40);
}

.action-edit-footer__pages {
  font-family: "Orbitron", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aef-text-muted);
  user-select: none;
}

.action-edit-footer__buttons {
  display: flex;
  gap: 8px;
}

/* Buttons scoped under aef-btn so global `.btn` rules from the editor
   mockup CSS don't leak in. Flex centering ensures labels stay
   visually centered both horizontally and vertically regardless of
   font metrics. */
.aef-btn {
  min-width: 96px;
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  font-family: "Outfit", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.aef-btn--ghost {
  background: transparent;
  border: 1px solid var(--aef-border-subtle);
  color: var(--aef-text-muted);
}
.aef-btn--ghost:hover:not(:disabled) {
  background: var(--aef-accent-bg);
  border-color: var(--aef-accent-border);
  color: var(--aef-accent);
}

.aef-btn--secondary {
  background: var(--aef-surface-soft);
  border: 1px solid var(--aef-border-subtle);
  color: var(--aef-text-primary);
}
.aef-btn--secondary:hover:not(:disabled) {
  background: var(--aef-accent-bg);
  border-color: var(--aef-accent-border);
  color: var(--aef-accent);
}

.aef-btn--primary {
  background: var(--aef-accent-bg);
  border: 1px solid var(--aef-accent-border);
  color: var(--aef-accent);
}
.aef-btn--primary:hover:not(:disabled) {
  background: var(--aef-accent-bg-hover);
}

.aef-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--aef-text-disabled);
}

@media (max-width: 600px) {
  .action-edit-footer {
    padding: 10px 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .action-edit-footer__pages {
    text-align: center;
  }
  .action-edit-footer__buttons {
    justify-content: space-between;
  }
  .aef-btn {
    flex: 1;
    min-width: 0;
  }
}


/* === src/features/spaces/pages/actions/components/action_edit_topbar/style.css === */
/* ── Action Edit Topbar ──────────────────────────────────── */
.arena-topbar {
  /* --aet-bg-glass: var(--dark, rgba(12,12,26,0.65)) var(--light, rgba(255,255,255,0.75)); */
  /* --aet-border-subtle: var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(10,10,30,0.08)); */
  --aet-text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --aet-text-muted: var(--dark, #8888a8) var(--light, #5b5b75);
  --aet-text-dim: var(--dark, #55556a) var(--light, #9898ad);
  --aet-surface-soft: var(--dark, rgba(255,255,255,0.02)) var(--light, rgba(10,10,30,0.03));
  --aet-surface-hover: var(--dark, rgba(255,255,255,0.04)) var(--light, rgba(10,10,30,0.05));
  --aet-accent-gold: #fcb300;
  --aet-accent-teal: #6eedd8;

  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  gap: 16px;
  background: var(--aet-bg-glass);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--aet-border-subtle);
  flex-shrink: 0;
}

.arena-topbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.back-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--aet-surface-soft);
  border: 1px solid var(--aet-border-subtle);
  color: var(--aet-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}
.back-btn:hover {
  border-color: rgba(252,179,0,0.3);
  color: var(--aet-accent-gold);
}
.back-btn svg {
  width: 16px;
  height: 16px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--aet-text-muted);
  flex-wrap: wrap;
}
.breadcrumb__item {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.breadcrumb__sep {
  color: var(--aet-text-dim);
  font-size: 10px;
}
.breadcrumb__current {
  color: var(--aet-text-primary);
  font-weight: 600;
}

/* Hide the action-editor topbar breadcrumb (space name › Actions) AND the
   topbar title input on mobile — the small phone topbar only needs the back
   button + type badge. The title is redundant on mobile (it's edited again in
   the body's "제목" field), and removing it frees the cramped topbar. Desktop
   keeps both. Scoped to the `--ae-topbar` marker so the analyze views' shared
   `.breadcrumb` is unaffected; `.topbar-title-input` is unique to the action
   editor topbar. */
@media (max-width: 720px) {
  .breadcrumb--ae-topbar {
    display: none;
  }
  /* Hide the action-type badge (e.g. "DISCUSSION") on mobile — with the title
     input also hidden below, it sits right against the right-side actions
     ("Import from overview" / Cancel) and overlaps them on narrow screens.
     Marker-scoped so the analyze views' shared `.type-badge` is unaffected.
     The `.arena-topbar` descendant bumps specificity (0,2,0) above the bare
     `.type-badge { display: inline-flex }` base rule, which is defined LATER
     in source and would otherwise win the equal-specificity tie. */
  .arena-topbar .type-badge--ae-topbar {
    display: none;
  }
  /* `.arena-topbar` descendant selector bumps specificity above the bare
     `.topbar-title-input { flex: 1 }` base rule (defined later in source), so
     the hide wins regardless of cascade order. */
  .arena-topbar .topbar-title-input {
    display: none;
  }
}

/* Action editor safe areas — the layout is `position:fixed; inset:0` (it fills
   the whole viewport, under the status bar and the bottom gesture bar), so the
   topbar must be pushed below the status bar and the footer above the gesture
   bar. `env()` is 0 on desktop, so this is a no-op there. Scoped via `:has`
   so only the action-editor `.arena` is affected. */
.arena:has(> .action-edit-footer) > .arena-topbar {
  padding-top: calc(14px + env(safe-area-inset-top));
}
.arena:has(> .action-edit-footer) > .action-edit-footer {
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--aet-surface-soft);
  color: var(--aet-accent-gold);
  border: 1px solid var(--aet-border-subtle);
  /* Keep the label on one line — in the cramped mobile topbar the 2-char
     label ("투표") was wrapping to two stacked characters. */
  white-space: nowrap;
  flex-shrink: 0;
}
.type-badge svg {
  width: 13px;
  height: 13px;
}

/* Per-action-type color variants */
.type-badge[data-action-type="poll"] {
  background: rgba(129, 140, 248, 0.10);
  color: #818cf8;
  border-color: rgba(129, 140, 248, 0.28);
}
.type-badge[data-action-type="quiz"] {
  background: rgba(168, 85, 247, 0.10);
  color: #a855f7;
  border-color: rgba(168, 85, 247, 0.28);
}
.type-badge[data-action-type="discussion"] {
  background: rgba(34, 211, 238, 0.08);
  color: #22d3ee;
  border-color: rgba(34, 211, 238, 0.22);
}
.type-badge[data-action-type="follow"] {
  background: rgba(251, 146, 60, 0.10);
  color: #fb923c;
  border-color: rgba(251, 146, 60, 0.30);
}

.topbar-title-input {
  flex: 1;
  min-width: 180px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--aet-text-primary);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background 0.15s;
}
.topbar-title-input:hover,
.topbar-title-input:focus {
  background: var(--aet-surface-hover);
}
.topbar-title-input--readonly {
  cursor: default;
  display: inline-flex;
  align-items: center;
}
.topbar-title-input--readonly:hover {
  background: transparent;
}

.arena-topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Autosave Badge (used by content/targets cards, not topbar) ── */
.autosave {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 100px;
  background: var(--aet-surface-soft);
  border: 1px solid var(--aet-border-subtle);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aet-text-muted);
}
.autosave__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aet-accent-teal);
  box-shadow: 0 0 6px var(--aet-accent-teal);
}
.autosave.autosave--unsaved .autosave__dot {
  background: var(--aet-accent-gold);
  box-shadow: 0 0 6px var(--aet-accent-gold);
  animation: pulse 1.4s ease-in-out infinite;
}
.autosave.autosave--saving .autosave__dot {
  background: var(--aet-accent-gold);
  box-shadow: 0 0 6px var(--aet-accent-gold);
  animation: pulse 0.8s ease-in-out infinite;
}
.autosave.autosave--saved .autosave__dot {
  background: var(--aet-accent-teal);
  box-shadow: 0 0 6px var(--aet-accent-teal);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Shared Button Styles ──────────────────────────────── */
.btn {
  --btn-border: var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(10,10,30,0.08));
  --btn-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --btn-hover-border: rgba(252,179,0,0.3);
  --btn-hover-bg: var(--dark, rgba(255,255,255,0.04)) var(--light, rgba(10,10,30,0.05));

  padding: 8px 14px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--btn-border);
  background: transparent;
  color: var(--btn-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn svg {
  width: 12px;
  height: 12px;
}
.btn:hover {
  border-color: var(--btn-hover-border);
  color: #fcb300;
  background: var(--btn-hover-bg);
}

.btn--ghost {
  background: transparent;
}

.btn--secondary {
  background: var(--dark, rgba(255,255,255,0.02)) var(--light, rgba(10,10,30,0.03));
}

.btn--primary {
  background: linear-gradient(135deg, #fcb300, #e5a200);
  border: none;
  color: #0a0a0a;
  box-shadow: 0 2px 12px rgba(252,179,0,0.25);
}
.btn--primary:hover {
  color: #0a0a0a;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(252,179,0,0.4);
}

.btn--danger {
  background: rgba(239,68,68,0.06);
  border-color: rgba(239,68,68,0.22);
  color: #ef4444;
}

.btn--lg {
  padding: 10px 20px;
  font-size: 11px;
}


/* === src/features/spaces/pages/actions/components/action_reward_setting/style.css === */
/* ── Arena-style Reward Setting ─────────────────────── */
.arena-reward {
  --ars-tile-bg: var(--qc-surface-soft, rgba(255,255,255,0.02));
  --ars-tile-border: var(--qc-border-subtle, rgba(255,255,255,0.06));
  --ars-info-bg: var(--dark, rgba(168,85,247,0.04)) var(--light, rgba(168,85,247,0.06));
  --ars-info-border: var(--dark, rgba(168,85,247,0.18)) var(--light, rgba(168,85,247,0.22));
  --ars-accent: #a855f7;
  --ars-accent-bg: rgba(168,85,247,0.10);
  --ars-accent-border: rgba(168,85,247,0.28);
  --ars-accent-glow: rgba(168,85,247,0.18);
  --ars-green: #22c55e;

  display: flex;
  flex-direction: column;
  gap: 14px;
}

.arena-reward__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--ars-tile-bg);
  border: 1px solid var(--ars-tile-border);
}
.arena-reward__head-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.arena-reward__head-title-text {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qc-text-primary);
}
.arena-reward__head-info {
  color: var(--qc-text-dim);
  display: inline-flex;
}
.arena-reward__head-info svg {
  width: 13px;
  height: 13px;
}

.arena-reward__unlock {
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(252,179,0,0.10);
  color: #fcb300;
  border: 1px solid rgba(252,179,0,0.22);
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.arena-reward__unlock:hover { background: rgba(252,179,0,0.18); }
.arena-reward__unlock svg { width: 12px; height: 12px; }

/* Grid */
.arena-reward__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px) {
  .arena-reward__grid { grid-template-columns: 1fr; }
}

.arena-reward__column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Grid items default to `min-width: auto`, which refuses to shrink below the
     column's min-content width. On narrow/mobile the "10,000" reward value and
     the credit-usage input push that min-content past the single 1fr track, so
     the column (and its cards) overflow ~22px to the right and look shoved off
     to the side instead of aligning with the full-width `__head` toggle above.
     `min-width: 0` lets the column honor the track width. */
  min-width: 0;
}
.arena-reward__column-label {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qc-text-dim);
}

/* Default Reward display */
.arena-reward__display {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--ars-tile-bg);
  border: 1px solid var(--ars-tile-border);
  position: relative;
  overflow: hidden;
  /* Honor the column track width instead of growing to content min-content. */
  min-width: 0;
}
.arena-reward__display::after {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 50%;
  background: radial-gradient(circle at 100% 50%, var(--ars-accent-glow), transparent 70%);
  opacity: 0.25;
  pointer-events: none;
}
.arena-reward__boost-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 72px;
  flex-shrink: 0;
}
.arena-reward__boost-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ars-green), #16a34a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8px 20px rgba(34,197,94,0.25);
}
.arena-reward__boost-icon svg { width: 26px; height: 26px; stroke: currentColor; }
.arena-reward__boost-mult {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ars-accent);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.arena-reward__boost-mult svg { width: 9px; height: 9px; }

.arena-reward__display-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
  position: relative;
  z-index: 1;
}
.arena-reward__display-value {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--qc-text-primary);
  line-height: 1.1;
}
.arena-reward__display-label {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--qc-text-muted);
}

@media (max-width: 720px) {
  /* On mobile the reward card is narrow and the value is right-aligned flush
     to the 20px padding, so "10,000 / 액션 포인트 보상" reads as stuck to the
     right edge. Give it a touch more breathing room. */
  .arena-reward__display {
    padding-right: 30px;
  }
  /* Hide the "Markdown 지원" content hint on mobile — the small phone editor
     header only needs the section label. Marker class so the attachment/date
     hints (`.section__hint` without the modifier) stay visible. */
  .section__hint--markdown {
    display: none;
  }
}

/* Mobile plain-textarea fallback for the action description editors
   (ActionDescriptionEditor). It lives inside the `.editor` box, so it stays
   transparent/borderless and just fills the full width with a comfortable
   height. */
.action-desc-textarea {
  display: block;
  width: 100%;
  min-height: 240px;
  resize: vertical;
  padding: 16px 18px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--qc-text-primary);
  font-family: "Outfit", "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  box-sizing: border-box;
}
.action-desc-textarea::placeholder {
  color: var(--qc-text-muted);
}

/* Action participation/viewer pages (poll / quiz / discussion) — their
   header and fixed footer fill a full-viewport arena (rendered under the
   status bar and bottom gesture bar), so push the header below the status bar
   and the footer above the gesture bar. Scoped with the `*-arena` ancestor so
   the specificity beats the bare per-element mobile padding overrides; `env()`
   is 0 on desktop, so this is a no-op there. */
.poll-arena .poll-header {
  padding-top: calc(20px + env(safe-area-inset-top));
}
.poll-arena .poll-footer {
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
.quiz-arena .quiz-topbar {
  padding-top: calc(20px + env(safe-area-inset-top));
}
.quiz-arena .quiz-bottom {
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
/* NOTE: the discussion participant page (`/discussions/:id`) is a normal-flow
   route, NOT a fixed full-viewport layover like the poll/quiz arenas, so the
   `:root` safe-area padding already clears the status bar for it. Adding
   `env(safe-area-inset-top)` to its topbar would double-count and push the
   header too far down — so it deliberately has NO safe-area rule here. */

/* Poll question editor header on mobile — keep the Q-number and the delete (×)
   button on the first line (× pinned to the far right by the flex:1 spacer),
   and push the type segmented control (단일/다중/주관식/선형) onto its own line
   below. `order:1; flex-basis:100%` makes the segmented wrap after the order-0
   items (Q-num, spacer, ×). Desktop keeps everything on one line. */
@media (max-width: 768px) {
  .q-block__head .segmented {
    order: 1;
    flex-basis: 100%;
  }
}

/* Boost Multiplier tile */
.arena-reward__boost-tile {
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--ars-tile-bg);
  border: 1px solid var(--ars-tile-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Honor the column track width instead of growing to content min-content. */
  min-width: 0;
}
.arena-reward__boost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.arena-reward__boost-row-label {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qc-text-muted);
}
.arena-reward__boost-row-value {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--qc-text-primary);
}
.arena-reward__boost-row-value--green { color: var(--ars-green); }

.arena-reward__credit-input {
  width: 120px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--qc-input-bg);
  border: 1px solid var(--qc-input-border);
  color: var(--qc-text-primary);
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: right;
  outline: none;
  transition: all 0.15s;
}
.arena-reward__credit-input:focus {
  border-color: rgba(252,179,0,0.4);
  box-shadow: 0 0 0 3px rgba(252,179,0,0.08);
}

/* Info notice */
.arena-reward__info {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--ars-info-bg);
  border: 1px solid var(--ars-info-border);
}
.arena-reward__info-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--ars-accent-bg);
  border: 1px solid var(--ars-accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ars-accent);
  flex-shrink: 0;
}
.arena-reward__info-icon svg { width: 14px; height: 14px; }
.arena-reward__info-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.arena-reward__info-title {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ars-accent);
}
.arena-reward__info-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.arena-reward__info-list li {
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--qc-text-muted);
}
.arena-reward__info-list li::before {
  content: '';
  flex-shrink: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ars-accent);
  margin-top: 9px;
  opacity: 0.6;
}


/* === src/features/spaces/pages/apps/apps/analyzes/views/analyze/poll/style.css === */
/* Poll analyze detail — arena page.
 *
 * Class prefix: `sap-` (Space Analyze Poll).
 * Dark/light colors follow the project's space toggle pattern
 * (see conventions/styling.md) so the page responds to the global
 * `html[data-theme]` switch without JS.
 *
 * Chart palette intentionally matches ANALYZE_CHART_COLORS in
 * `views/analyze/poll/page.rs`; if you change one, change both.
 */
.sap-arena {
  --sap-bg: var(--dark, #06060e) var(--light, #f5f5fb);
  --sap-bg-glass: var(--dark, rgba(12, 12, 26, 0.65))
    var(--light, rgba(255, 255, 255, 0.75));
  --sap-border-subtle: var(--dark, rgba(255, 255, 255, 0.06))
    var(--light, rgba(10, 10, 30, 0.08));
  --sap-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --sap-text-muted: var(--dark, #8888a8) var(--light, #5b5b75);
  --sap-text-dim: var(--dark, #55556a) var(--light, #9898ad);
  --sap-surface-soft: var(--dark, rgba(255, 255, 255, 0.02))
    var(--light, rgba(10, 10, 30, 0.03));
  --sap-surface-hover: var(--dark, rgba(255, 255, 255, 0.04))
    var(--light, rgba(10, 10, 30, 0.05));
  --sap-glow-a: var(--dark, rgba(6, 182, 212, 0.05))
    var(--light, rgba(6, 182, 212, 0.08));
  --sap-glow-b: var(--dark, rgba(252, 179, 0, 0.03))
    var(--light, rgba(252, 179, 0, 0.06));
  --sap-panel-bg: var(--dark, rgba(12, 12, 26, 1)) var(--light, #ffffff);
  --sap-input-bg: var(--dark, rgba(255, 255, 255, 0.02))
    var(--light, rgba(10, 10, 30, 0.02));
  --sap-input-border: var(--dark, rgba(255, 255, 255, 0.08))
    var(--light, rgba(10, 10, 30, 0.1));
  --sap-bar-track: var(--dark, rgba(255, 255, 255, 0.04))
    var(--light, rgba(10, 10, 30, 0.06));

  --sap-accent-gold: #fcb300;
  --sap-analyze-color: #06b6d4;
  --sap-analyze-bg: rgba(6, 182, 212, 0.1);
  --sap-analyze-border: rgba(6, 182, 212, 0.24);
  --sap-analyze-glow: rgba(6, 182, 212, 0.16);

  --sap-c1: #f97316;
  --sap-c2: #6366f1;
  --sap-c3: #22c55e;
  --sap-c4: #3b82f6;
  --sap-c5: #8b5cf6;
  --sap-c6: #eab308;

  --sap-font-display: "Orbitron", sans-serif;
  --sap-font-body: "Outfit", sans-serif;

  /* The global stylesheet sets `body { overflow: hidden }` on desktop
     (tailwind.css:952) — document-level scroll is disabled and each
     arena route has to provide its own scroll container. Fix the arena
     at viewport height and scroll internally so tall content (20+
     question cards) stays reachable. The sticky topbar latches onto
     this scroll container, staying pinned to the top of the arena as
     the user scrolls the body. */
  position: relative;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  isolation: isolate;
  background:
    radial-gradient(
      ellipse 80% 60% at 50% 20%,
      var(--sap-glow-a),
      transparent 60%
    ),
    radial-gradient(
      ellipse 120% 100% at 50% 120%,
      var(--sap-glow-b),
      transparent 50%
    ),
    var(--sap-bg);
  color: var(--sap-text);
  font-family: var(--sap-font-body);
}

/* ── Topbar ────────────────────────────────────────────── */
.sap-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  gap: 16px;
  background: var(--sap-bg-glass);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--sap-border-subtle);
}

.sap-topbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.sap-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--sap-surface-soft);
  border: 1px solid var(--sap-border-subtle);
  color: var(--sap-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}
.sap-back-btn:hover {
  border-color: rgba(252, 179, 0, 0.3);
  color: var(--sap-accent-gold);
}
.sap-back-btn svg {
  width: 16px;
  height: 16px;
}

.sap-topbar__logo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid rgba(252, 179, 0, 0.15);
  flex-shrink: 0;
}

.sap-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sap-breadcrumb__item {
  font-family: var(--sap-font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sap-text-muted);
}
.sap-breadcrumb__sep {
  color: var(--sap-text-dim);
  font-size: 10px;
}
.sap-breadcrumb__current {
  color: var(--sap-text);
  font-weight: 600;
}

.sap-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-family: var(--sap-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--sap-analyze-bg);
  color: var(--sap-analyze-color);
  border: 1px solid var(--sap-analyze-border);
}
.sap-type-badge svg {
  width: 13px;
  height: 13px;
}

.sap-topbar__title {
  flex: 1;
  min-width: 180px;
  color: var(--sap-text);
  font-family: var(--sap-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sap-topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sap-btn {
  padding: 8px 14px;
  border-radius: 10px;
  font-family: var(--sap-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--sap-border-subtle);
  background: transparent;
  color: var(--sap-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sap-btn svg {
  width: 14px;
  height: 14px;
}
.sap-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.sap-btn--primary {
  background: linear-gradient(135deg, var(--sap-accent-gold), #e5a200);
  border: none;
  color: #0a0a0a;
  box-shadow: 0 2px 12px rgba(252, 179, 0, 0.25);
}
.sap-btn--primary:hover:not(:disabled) {
  color: #0a0a0a;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(252, 179, 0, 0.4);
}
.sap-btn--lg {
  padding: 10px 20px;
  font-size: 11px;
}

@media (max-width: 760px) {
  .sap-topbar {
    padding: 12px 14px;
    gap: 10px;
  }
  .sap-topbar__left {
    gap: 10px;
  }
  .sap-breadcrumb,
  .sap-type-badge {
    display: none;
  }
  .sap-topbar__title {
    min-width: 0;
    font-size: 13px;
    padding: 0;
  }
  .sap-btn {
    padding: 6px 10px;
    font-size: 9px;
  }
  .sap-btn--lg {
    padding: 8px 14px;
    font-size: 10px;
  }
}
@media (max-width: 480px) {
  .sap-topbar {
    padding: 10px 12px;
  }
  .sap-back-btn,
  .sap-topbar__logo {
    width: 32px;
    height: 32px;
  }
  .sap-topbar__title {
    font-size: 12px;
  }
}

/* ── Body ───────────────────────────────────────────────── */
.sap-body {
  position: relative;
  z-index: 10;
  padding: 28px 28px 80px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 760px) {
  .sap-body {
    padding: 18px 14px 48px;
    gap: 14px;
  }
}

/* ── Filter bar ─────────────────────────────────────────── */
.sap-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Filter dropdown (custom — mirrors common::TeamSelector) ── */
.sap-filter-dropdown {
  position: relative;
  display: inline-block;
}

.sap-filter-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 180px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--sap-surface-soft);
  border: 1px solid var(--sap-border-subtle);
  color: var(--sap-text);
  font-family: var(--sap-font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  text-align: left;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
.sap-filter-trigger:hover {
  border-color: var(--sap-analyze-border);
  background: var(--sap-surface-hover);
}
.sap-filter-trigger[aria-expanded="true"] {
  border-color: var(--sap-analyze-border);
  box-shadow: 0 0 0 3px var(--sap-analyze-glow);
}
.sap-filter-trigger__label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sap-filter-trigger__chevron {
  width: 14px;
  height: 14px;
  color: var(--sap-text-muted);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.sap-filter-trigger[aria-expanded="true"] .sap-filter-trigger__chevron {
  transform: rotate(180deg);
  color: var(--sap-analyze-color);
}

.sap-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 998;
}

.sap-filter-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  min-width: 100%;
  z-index: 999;
  /* `padding: 0` + `overflow: hidden` + per-option `border-radius: 0`
     lets the selected option's highlight bleed to every edge of the
     panel. The panel's rounded corners clip the first/last option so
     the highlight still follows the border radius. */
  padding: 0;
  border-radius: 10px;
  background: var(--sap-panel-bg);
  border: 1px solid var(--sap-border-subtle);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  max-height: 300px;
  overflow: hidden auto;
}

.sap-filter-option {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border-radius: 0;
  background: transparent;
  border: none;
  color: var(--sap-text);
  font-family: var(--sap-font-body);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s;
}
.sap-filter-option:hover {
  background: var(--sap-surface-hover);
}
/* No distinct selected background — the trigger button already
   shows the current value, so highlighting the row in the open
   panel felt redundant and visually noisy. */

/* ── Question card ──────────────────────────────────────── */
.sap-q-card {
  background: var(--sap-bg-glass);
  backdrop-filter: blur(18px);
  border: 1px solid var(--sap-border-subtle);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 760px) {
  .sap-q-card {
    padding: 16px;
    gap: 14px;
  }
}

.sap-q-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sap-border-subtle);
}
.sap-q-card__title {
  min-width: 0;
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: var(--sap-text);
  word-break: break-word;
}
.sap-q-card__count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--sap-analyze-bg);
  border: 1px solid var(--sap-analyze-border);
  color: var(--sap-analyze-color);
  font-family: var(--sap-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Bar chart (horizontal bars) ────────────────────────── */
.sap-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sap-bar-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
}
.sap-bar-row__label {
  font-family: var(--sap-font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--sap-text-muted);
  text-align: center;
}
.sap-bar-row__track {
  position: relative;
  height: 12px;
  width: 100%;
  border-radius: 100px;
  background: var(--sap-bar-track);
  border: 1px solid var(--sap-border-subtle);
  overflow: hidden;
}
.sap-bar-row__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 100px;
  transition: width 0.3s ease;
}
.sap-bar-row__value {
  font-family: var(--sap-font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--sap-text);
  white-space: nowrap;
  min-width: 96px;
  text-align: right;
}

/* ── Pie chart (conic-gradient) ─────────────────────────── */
.sap-pie-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 8px 0 4px;
  flex-wrap: wrap;
}
.sap-pie {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(6, 182, 212, 0.14);
}
.sap-pie::after {
  content: "";
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: var(--sap-panel-bg);
  border: 1px solid var(--sap-border-subtle);
}
.sap-pie__labels {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sap-text);
  text-align: center;
  font-family: var(--sap-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  z-index: 1;
}
.sap-pie__label-line {
  display: block;
}
.sap-pie__label-line--top {
  font-size: 10px;
  font-weight: 600;
  color: var(--sap-text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sap-pie__label-line--big {
  font-size: 22px;
  font-weight: 800;
  color: var(--sap-text);
  letter-spacing: 0.02em;
}
.sap-pie__label-line--sub {
  font-size: 10px;
  font-weight: 500;
  color: var(--sap-text-dim);
  letter-spacing: 0.06em;
}

.sap-pie-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
}
.sap-pie-legend__row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--sap-text);
}
.sap-pie-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.sap-pie-legend__label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sap-pie-legend__value {
  font-family: var(--sap-font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--sap-text-muted);
}

/* ── Subjective text response list ──────────────────────── */
.sap-text-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sap-text-item {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--sap-input-bg);
  border: 1px solid var(--sap-input-border);
  color: var(--sap-text);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.sap-text-empty {
  padding: 14px;
  border-radius: 10px;
  background: var(--sap-input-bg);
  border: 1px dashed var(--sap-input-border);
  color: var(--sap-text-dim);
  font-size: 13px;
  font-style: italic;
  text-align: center;
}

/* ── Viewer empty state (non-creator roles) ─────────────── */
.sap-viewer-empty {
  position: relative;
  z-index: 10;
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: var(--sap-text-muted);
  font-size: 14px;
  font-family: var(--sap-font-body);
  text-align: center;
}


/* === src/features/spaces/pages/apps/apps/analyzes/views/home/style.css === */
/* Arena-styled Space Analyzes list.
   Based on `assets/design/app-settings-analyzes-scroll.html`.
   All classes prefixed with `saz-` (space-analyzes) to stay isolated
   from other feature styles. Top-level wrapper `.space-analyzes-arena`
   owns layout + theme tokens.

   This is a read-only list page — no Save/Cancel chrome, no auto-save
   indicator. The topbar carries just the back button + breadcrumb +
   type badge + title. */

.space-analyzes-arena {
  --saz-bg-void: var(--dark, #06060e) var(--light, #f5f5fb);
  --saz-bg-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.75));
  --saz-bg-glass-hover: var(--dark, rgba(20, 20, 40, 0.80)) var(--light, rgba(255, 255, 255, 0.95));
  --saz-border-subtle: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(10, 10, 30, 0.08));
  --saz-border-strong: var(--dark, rgba(255, 255, 255, 0.12)) var(--light, rgba(10, 10, 30, 0.16));
  --saz-text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --saz-text-muted: var(--dark, #8888a8) var(--light, #5b5b75);
  --saz-text-dim: var(--dark, #55556a) var(--light, #9898ad);
  --saz-surface-soft: var(--dark, rgba(255, 255, 255, 0.02)) var(--light, rgba(10, 10, 30, 0.03));
  --saz-surface-hover: var(--dark, rgba(255, 255, 255, 0.04)) var(--light, rgba(10, 10, 30, 0.05));
  --saz-glow-aura-a: var(--dark, rgba(6, 182, 212, 0.05)) var(--light, rgba(6, 182, 212, 0.08));
  --saz-glow-aura-b: var(--dark, rgba(252, 179, 0, 0.03)) var(--light, rgba(252, 179, 0, 0.06));

  --saz-accent-gold: #fcb300;
  --saz-analyze-color: #06b6d4;
  --saz-analyze-bg: rgba(6, 182, 212, 0.10);
  --saz-analyze-border: rgba(6, 182, 212, 0.24);
  --saz-analyze-glow: rgba(6, 182, 212, 0.16);

  /* Per-type colors — poll is cyan, discussion is blue */
  --saz-poll-color: #06b6d4;
  --saz-poll-bg: rgba(6, 182, 212, 0.10);
  --saz-poll-border: rgba(6, 182, 212, 0.24);
  --saz-discussion-color: #60a5fa;
  --saz-discussion-bg: rgba(96, 165, 250, 0.10);
  --saz-discussion-border: rgba(96, 165, 250, 0.24);

  --saz-font-display: 'Orbitron', sans-serif;
  --saz-font-body: 'Outfit', sans-serif;

  position: relative;
  min-height: 100vh;
  /* Same shape as `.rewards-arena`: a flex item of its scroll container whose
     default `flex-shrink: 1` squashed the box to the scrollport height while
     the content ran on much longer. A sticky element is bounded by its
     containing block, so `.arena-topbar` unpinned about one viewport in.
     Refusing to shrink makes the box match the content. */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: var(--saz-bg-void);
  color: var(--saz-text-primary);
  font-family: var(--saz-font-body);
}
.space-analyzes-arena::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, var(--saz-glow-aura-a), transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 120%, var(--saz-glow-aura-b), transparent 50%);
  z-index: 0;
  pointer-events: none;
}

/* ── Topbar ──────────────────────────────────────────────── */
.saz-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  gap: 16px;
  background: var(--saz-bg-glass);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--saz-border-subtle);
}
.saz-topbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.saz-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--saz-surface-soft);
  border: 1px solid var(--saz-border-subtle);
  color: var(--saz-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}
.saz-back-btn:hover {
  border-color: rgba(252, 179, 0, 0.3);
  color: var(--saz-accent-gold);
}
.saz-back-btn svg {
  width: 16px;
  height: 16px;
}
.saz-topbar__logo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid rgba(252, 179, 0, 0.15);
  flex-shrink: 0;
}
.saz-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.saz-breadcrumb__item {
  font-family: var(--saz-font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--saz-text-muted);
}
.saz-breadcrumb__sep {
  color: var(--saz-text-dim);
  font-size: 10px;
}
.saz-breadcrumb__current {
  color: var(--saz-text-primary);
  font-weight: 600;
}
.saz-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-family: var(--saz-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--saz-analyze-bg);
  color: var(--saz-analyze-color);
  border: 1px solid var(--saz-analyze-border);
}
.saz-type-badge svg {
  width: 13px;
  height: 13px;
}
.saz-topbar-title {
  flex: 1;
  min-width: 180px;
  color: var(--saz-text-primary);
  font-family: var(--saz-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 760px) {
  .saz-topbar { padding: 12px 14px; gap: 10px; }
  .saz-topbar__left { gap: 10px; }
  .saz-breadcrumb, .saz-type-badge { display: none; }
  .saz-topbar-title { min-width: 0; font-size: 13px; padding: 0; }
}
@media (max-width: 480px) {
  .saz-topbar { padding: 10px 12px; }
  .saz-back-btn, .saz-topbar__logo { width: 32px; height: 32px; }
  .saz-topbar-title { font-size: 12px; }
}

/* ── Body ──────────────────────────────────────────────── */
.saz-body {
  position: relative;
  z-index: 10;
  flex: 1;
  padding: 28px 28px 80px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 760px) {
  .saz-body { padding: 18px 14px 48px; gap: 14px; }
}

/* ── Section card ─────────────────────────────────────── */
.saz-section {
  background: var(--saz-bg-glass);
  backdrop-filter: blur(18px);
  border: 1px solid var(--saz-border-subtle);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 760px) {
  .saz-section { padding: 16px; gap: 12px; }
}
.saz-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.saz-section__title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.saz-section__label {
  font-family: var(--saz-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--saz-text-dim);
}
.saz-section__count {
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--saz-surface-soft);
  border: 1px solid var(--saz-border-subtle);
  font-family: var(--saz-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--saz-text-muted);
}
.saz-section__count strong {
  color: var(--saz-analyze-color);
  margin-right: 4px;
  font-weight: 700;
}

/* ── List of analyze cards ────────────────────────────── */
.saz-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.saz-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--saz-surface-soft);
  border: 1px solid var(--saz-border-subtle);
  transition: all 0.15s;
}
.saz-card:hover {
  background: var(--saz-surface-hover);
  border-color: var(--saz-analyze-border);
}
@media (max-width: 480px) {
  .saz-card { flex-wrap: wrap; padding: 12px 14px; gap: 12px; }
}
.saz-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.saz-card__icon--poll {
  background: var(--saz-poll-bg);
  color: var(--saz-poll-color);
  border: 1px solid var(--saz-poll-border);
}
.saz-card__icon--discussion {
  background: var(--saz-discussion-bg);
  color: var(--saz-discussion-color);
  border: 1px solid var(--saz-discussion-border);
}
.saz-card__icon svg {
  width: 20px;
  height: 20px;
}
.saz-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.saz-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.saz-card__type {
  font-family: var(--saz-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--saz-text-dim);
}
.saz-card__count {
  padding: 2px 8px;
  border-radius: 100px;
  font-family: var(--saz-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.saz-card__count--poll {
  background: var(--saz-poll-bg);
  color: var(--saz-poll-color);
  border: 1px solid var(--saz-poll-border);
}
.saz-card__count--discussion {
  background: var(--saz-discussion-bg);
  color: var(--saz-discussion-color);
  border: 1px solid var(--saz-discussion-border);
}
.saz-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--saz-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.saz-card__action {
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .saz-card__action {
    flex-basis: 100%;
    display: flex;
    justify-content: flex-end;
  }
}

/* ── View-analyze button ──────────────────────────────── */
.saz-btn-accent {
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  font-family: var(--saz-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  background: linear-gradient(135deg, var(--saz-analyze-color), #0891b2);
  color: #fff;
  box-shadow: 0 2px 12px var(--saz-analyze-glow);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.saz-btn-accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--saz-analyze-glow);
}

/* ── Load-more ────────────────────────────────────────── */
.saz-load-more {
  align-self: center;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--saz-surface-soft);
  border: 1px solid var(--saz-border-subtle);
  color: var(--saz-text-muted);
  font-family: var(--saz-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
}
.saz-load-more:hover {
  background: var(--saz-surface-hover);
  border-color: var(--saz-analyze-border);
  color: var(--saz-analyze-color);
}
.saz-load-more:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Empty state ──────────────────────────────────────── */
.saz-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 24px;
  border-radius: 14px;
  background: var(--saz-surface-soft);
  border: 1px dashed var(--saz-border-strong);
  text-align: center;
}
.saz-empty__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--saz-surface-hover);
  color: var(--saz-text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
}
.saz-empty__icon svg {
  width: 20px;
  height: 20px;
}
.saz-empty__title {
  font-family: var(--saz-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--saz-text-muted);
}
.saz-empty__sub {
  font-size: 12px;
  color: var(--saz-text-dim);
  max-width: 420px;
  line-height: 1.5;
}

/* ── Viewer state (non-creator) ──────────────────────── */
.saz-viewer {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 64px 28px;
  text-align: center;
}
.saz-viewer__title {
  font-family: var(--saz-font-display);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--saz-text-muted);
}


/* === src/features/spaces/pages/apps/apps/file/views/home/style.css === */
/* Arena-styled Space File app (read-only).
   Extracted from `assets/design/app-settings-file-scroll.html`.
   All classes prefixed with `sfa-` (space-files-arena) to stay
   isolated from other feature styles. Top-level wrapper
   `.space-files-arena` owns layout + theme tokens. */

.space-files-arena {
  --sfa-bg-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.75));
  --sfa-bg-glass-hover: var(--dark, rgba(20, 20, 40, 0.80)) var(--light, rgba(255, 255, 255, 0.95));
  --sfa-border-subtle: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(10, 10, 30, 0.08));
  --sfa-border-strong: var(--dark, rgba(255, 255, 255, 0.12)) var(--light, rgba(10, 10, 30, 0.16));
  --sfa-text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --sfa-text-muted: var(--dark, #8888a8) var(--light, #5b5b75);
  --sfa-text-dim: var(--dark, #55556a) var(--light, #9898ad);
  --sfa-surface-soft: var(--dark, rgba(255, 255, 255, 0.02)) var(--light, rgba(10, 10, 30, 0.03));
  --sfa-surface-hover: var(--dark, rgba(255, 255, 255, 0.04)) var(--light, rgba(10, 10, 30, 0.05));
  --sfa-bg-void: var(--dark, #06060e) var(--light, #f5f5fb);

  --sfa-accent-gold: #fcb300;
  --sfa-accent-teal: #6eedd8;
  --sfa-file-color: #8b5cf6;
  --sfa-file-bg: rgba(139, 92, 246, 0.10);
  --sfa-file-border: rgba(139, 92, 246, 0.24);
  --sfa-file-glow: rgba(139, 92, 246, 0.15);

  --sfa-font-display: 'Orbitron', sans-serif;
  --sfa-font-body: 'Outfit', sans-serif;

  position: relative;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: var(--sfa-bg-void);
  font-family: var(--sfa-font-body);
  color: var(--sfa-text-primary);
}
.space-files-arena::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, var(--dark, rgba(139,92,246,0.05)) var(--light, rgba(139,92,246,0.08)), transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 120%, var(--dark, rgba(252,179,0,0.03)) var(--light, rgba(252,179,0,0.06)), transparent 50%);
  z-index: 0;
  pointer-events: none;
}

/* ── Top bar ──────────────────────────────────────────── */
.sfa-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  padding: 16px 28px;
  gap: 16px;
  background: var(--sfa-bg-glass);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--sfa-border-subtle);
}
.sfa-topbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.sfa-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--sfa-surface-soft);
  border: 1px solid var(--sfa-border-subtle);
  color: var(--sfa-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
  padding: 0;
}
.sfa-back-btn:hover {
  border-color: rgba(252, 179, 0, 0.3);
  color: var(--sfa-accent-gold);
}
.sfa-back-btn svg {
  width: 16px;
  height: 16px;
}
.sfa-topbar__logo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid rgba(252, 179, 0, 0.15);
  flex-shrink: 0;
}
.sfa-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sfa-breadcrumb__item {
  font-family: var(--sfa-font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sfa-text-muted);
}
.sfa-breadcrumb__sep {
  color: var(--sfa-text-dim);
  font-size: 10px;
}
.sfa-breadcrumb__current {
  color: var(--sfa-text-primary);
  font-weight: 600;
}
.sfa-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-family: var(--sfa-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--sfa-file-bg);
  color: var(--sfa-file-color);
  border: 1px solid var(--sfa-file-border);
}
.sfa-type-badge svg {
  width: 13px;
  height: 13px;
}
.sfa-topbar-title {
  flex: 1;
  min-width: 180px;
  color: var(--sfa-text-primary);
  font-family: var(--sfa-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 760px) {
  .sfa-topbar {
    padding: 12px 14px;
    gap: 10px;
  }
  .sfa-breadcrumb,
  .sfa-type-badge {
    display: none;
  }
  .sfa-topbar-title {
    min-width: 0;
    font-size: 13px;
    padding: 0;
  }
}

/* ── Body ─────────────────────────────────────────────── */
.sfa-body {
  position: relative;
  z-index: 10;
  flex: 1;
  padding: 28px 28px 64px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 760px) {
  .sfa-body {
    padding: 18px 14px 48px;
    gap: 14px;
  }
}

/* ── Tabs ─────────────────────────────────────────────── */
.sfa-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sfa-segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--sfa-surface-soft);
  border: 1px solid var(--sfa-border-subtle);
  border-radius: 10px;
  gap: 2px;
}
.sfa-segmented__btn {
  padding: 8px 16px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--sfa-text-muted);
  font-family: var(--sfa-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
}
.sfa-segmented__btn:hover {
  color: var(--sfa-text-primary);
}
.sfa-segmented__btn[aria-selected="true"] {
  background: var(--sfa-file-bg);
  color: var(--sfa-file-color);
  box-shadow: 0 1px 4px var(--sfa-file-glow);
}
.sfa-tabs__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sfa-tab-count {
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--sfa-surface-soft);
  border: 1px solid var(--sfa-border-subtle);
  font-family: var(--sfa-font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--sfa-text-muted);
}
.sfa-tab-count strong {
  color: var(--sfa-text-primary);
  font-weight: 700;
  margin-right: 4px;
}

/* ── Section card ─────────────────────────────────────── */
.sfa-section {
  background: var(--sfa-bg-glass);
  backdrop-filter: blur(18px);
  border: 1px solid var(--sfa-border-subtle);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sfa-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sfa-section__label {
  font-family: var(--sfa-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sfa-text-dim);
}
.sfa-section__hint {
  font-size: 12px;
  color: var(--sfa-text-muted);
}

/* ── File list ────────────────────────────────────────── */
.sfa-file-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sfa-file-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--sfa-surface-soft);
  border: 1px solid var(--sfa-border-subtle);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  color: inherit;
}
.sfa-file-card:hover {
  background: var(--sfa-surface-hover);
  border-color: var(--sfa-file-border);
}
.sfa-file-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--sfa-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.sfa-file-card__icon--img {
  background: rgba(34, 197, 94, 0.10);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.22);
}
.sfa-file-card__icon--vid {
  background: rgba(239, 68, 68, 0.10);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.22);
}
.sfa-file-card__icon--doc {
  background: rgba(110, 237, 216, 0.10);
  color: var(--sfa-accent-teal);
  border: 1px solid rgba(110, 237, 216, 0.22);
}
.sfa-file-card__icon--zip {
  background: rgba(252, 179, 0, 0.10);
  color: var(--sfa-accent-gold);
  border: 1px solid rgba(252, 179, 0, 0.24);
}
.sfa-file-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sfa-file-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--sfa-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sfa-file-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--sfa-text-muted);
  flex-wrap: wrap;
}
.sfa-file-card__tag {
  padding: 2px 8px;
  border-radius: 100px;
  font-family: var(--sfa-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sfa-file-card__tag--overview {
  background: rgba(110, 237, 216, 0.08);
  color: var(--sfa-accent-teal);
  border: 1px solid rgba(110, 237, 216, 0.22);
}
.sfa-file-card__tag--board {
  background: rgba(96, 165, 250, 0.08);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.22);
}
.sfa-file-card__tag--quiz {
  background: rgba(251, 146, 60, 0.08);
  color: #fb923c;
  border: 1px solid rgba(251, 146, 60, 0.22);
}

/* ── Empty state ──────────────────────────────────────── */
.sfa-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  border-radius: 16px;
  background: var(--sfa-surface-soft);
  border: 1px dashed var(--sfa-border-strong);
  text-align: center;
}
.sfa-empty__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--sfa-surface-hover);
  color: var(--sfa-text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sfa-empty__icon svg {
  width: 22px;
  height: 22px;
}
.sfa-empty__title {
  font-family: var(--sfa-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sfa-text-muted);
}
.sfa-empty__sub {
  font-size: 12px;
  color: var(--sfa-text-dim);
}

/* ── Previews ─────────────────────────────────────────── */
.sfa-preview-group__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}
.sfa-preview-group__title {
  font-family: var(--sfa-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sfa-text-dim);
}
.sfa-preview-group__count {
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--sfa-surface-soft);
  border: 1px solid var(--sfa-border-subtle);
  font-family: var(--sfa-font-display);
  font-size: 9px;
  font-weight: 700;
  color: var(--sfa-text-muted);
}
.sfa-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 640px) {
  .sfa-preview-grid {
    grid-template-columns: 1fr;
  }
}
/* === src/features/spaces/pages/apps/apps/file/views/home — audio previews === */
.sfa-audio-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sfa-audio-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--dark, rgba(255, 255, 255, 0.03)) var(--light, rgba(0, 0, 0, 0.02));
  border: 1px solid var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
}
.sfa-audio-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
/* Its own badge, in normal flow. Reusing `.sfa-preview-media__label` here was
   wrong: that one is `position: absolute` because it overlays an image tile,
   and with no positioned ancestor in the audio row it escaped upwards and sat
   on top of the "AUDIO PREVIEWS" heading. */
.sfa-audio-row__ext {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--dark, rgba(255, 255, 255, 0.08)) var(--light, rgba(0, 0, 0, 0.06));
  color: var(--dark, #b9b9cc) var(--light, #5a5a70);
  font-family: var(--sfa-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.sfa-audio-row__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--dark, #f0f0f5) var(--light, #12121a);
  overflow-wrap: anywhere;
}
.sfa-audio-row audio {
  width: 100%;
}

.sfa-preview-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--sfa-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sfa-preview-media img,
.sfa-preview-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sfa-preview-media__label {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: var(--sfa-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
}

/* ── Sticky footer ────────────────────────────────────── */
.sfa-footer {
  position: sticky;
  bottom: 0;
  z-index: 25;
  background: var(--sfa-bg-glass);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--sfa-border-subtle);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.sfa-footer__left {
  font-size: 12px;
  color: var(--sfa-text-muted);
}


/* === src/features/spaces/pages/apps/apps/general/views/home/style.css === */
/* Arena-styled space general settings page.
   Extracted from `assets/design/app-settings-general-scroll.html`.
   All classes prefixed with `sga-` (space-general-arena) to stay
   isolated from other feature styles. The top-level wrapper
   `.space-general-arena` controls overall layout + theme tokens. */

.space-general-arena {
  --arena-bg-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.75));
  --arena-bg-glass-hover: var(--dark, rgba(20, 20, 40, 0.80)) var(--light, rgba(255, 255, 255, 0.95));
  --arena-border-subtle: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(10, 10, 30, 0.08));
  --arena-border-strong: var(--dark, rgba(255, 255, 255, 0.12)) var(--light, rgba(10, 10, 30, 0.16));
  --arena-text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --arena-text-muted: var(--dark, #8888a8) var(--light, #5b5b75);
  --arena-text-dim: var(--dark, #55556a) var(--light, #9898ad);
  --arena-surface-soft: var(--dark, rgba(255, 255, 255, 0.02)) var(--light, rgba(10, 10, 30, 0.03));
  --arena-surface-hover: var(--dark, rgba(255, 255, 255, 0.04)) var(--light, rgba(10, 10, 30, 0.05));
  --arena-input-bg: var(--dark, rgba(255, 255, 255, 0.02)) var(--light, rgba(10, 10, 30, 0.02));
  --arena-input-border: var(--dark, rgba(255, 255, 255, 0.08)) var(--light, rgba(10, 10, 30, 0.1));
  --arena-danger-bg: var(--dark, rgba(239, 68, 68, 0.04)) var(--light, rgba(239, 68, 68, 0.06));
  --arena-danger-border: var(--dark, rgba(239, 68, 68, 0.18)) var(--light, rgba(239, 68, 68, 0.22));
  --arena-bg-void: var(--dark, #06060e) var(--light, #f5f5fb);

  --arena-accent-gold: #fcb300;
  --arena-accent-teal: #6eedd8;
  --arena-accent-red: #ef4444;
  --arena-general-color: #22c55e;
  --arena-general-bg: rgba(34, 197, 94, 0.10);
  --arena-general-border: rgba(34, 197, 94, 0.24);
  --arena-general-glow: rgba(34, 197, 94, 0.15);

  --arena-font-display: 'Orbitron', sans-serif;
  --arena-font-body: 'Outfit', sans-serif;

  position: relative;
  /* Own the scroll — the sticky topbar/footer attach to this element's
     overflow box. Using `height: 100vh` + `overflow-y: auto` instead of
     `min-height` guarantees scrolling works even when an ancestor has
     `overflow: hidden` (e.g. arena-route branches of SpaceLayout). */
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: var(--arena-bg-void);
  font-family: var(--arena-font-body);
  color: var(--arena-text-primary);
}
/* Soft radial glow aura behind everything. */
.space-general-arena::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, var(--dark, rgba(34, 197, 94, 0.05)) var(--light, rgba(34, 197, 94, 0.08)), transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 120%, var(--dark, rgba(252, 179, 0, 0.03)) var(--light, rgba(252, 179, 0, 0.06)), transparent 50%);
  z-index: 0;
  pointer-events: none;
}

/* ── Top bar ──────────────────────────────────────────── */
.sga-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  gap: 16px;
  background: var(--arena-bg-glass);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--arena-border-subtle);
}
.sga-topbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.sga-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--arena-surface-soft);
  border: 1px solid var(--arena-border-subtle);
  color: var(--arena-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
  padding: 0;
}
.sga-back-btn:hover {
  border-color: rgba(252, 179, 0, 0.3);
  color: var(--arena-accent-gold);
}
.sga-back-btn svg {
  width: 16px;
  height: 16px;
}
.sga-topbar__logo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid rgba(252, 179, 0, 0.15);
  flex-shrink: 0;
}
.sga-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sga-breadcrumb__item {
  font-family: var(--arena-font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arena-text-muted);
}
.sga-breadcrumb__sep {
  color: var(--arena-text-dim);
  font-size: 10px;
}
.sga-breadcrumb__current {
  color: var(--arena-text-primary);
  font-weight: 600;
}
.sga-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-family: var(--arena-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--arena-general-bg);
  color: var(--arena-general-color);
  border: 1px solid var(--arena-general-border);
}
.sga-type-badge svg {
  width: 13px;
  height: 13px;
}
.sga-topbar-title {
  flex: 1;
  min-width: 180px;
  color: var(--arena-text-primary);
  font-family: var(--arena-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Mobile topbar — strip the chrome so it stays one clean row ─ */
@media (max-width: 760px) {
  .sga-topbar {
    padding: 12px 14px;
    gap: 10px;
  }
  .sga-topbar__left {
    gap: 10px;
  }
  /* Hide the breadcrumb + section badge — they flow-wrap awkwardly
     on narrow viewports. Title alone tells the user where they are. */
  .sga-breadcrumb,
  .sga-type-badge {
    display: none;
  }
  .sga-topbar-title {
    min-width: 0;
    font-size: 13px;
    padding: 0;
  }
}
@media (max-width: 480px) {
  .sga-topbar {
    padding: 10px 12px;
  }
  .sga-back-btn {
    width: 32px;
    height: 32px;
  }
  .sga-topbar__logo {
    width: 32px;
    height: 32px;
  }
  .sga-topbar-title {
    font-size: 12px;
  }
}

/* ── Main body (scroll content) ───────────────────────── */
.sga-body {
  position: relative;
  z-index: 10;
  flex: 1;
  padding: 28px 28px 64px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 760px) {
  .sga-body {
    padding: 18px 14px 48px;
    gap: 14px;
  }
  .sga-section {
    padding: 16px;
  }
  .sga-logo-uploader {
    flex-wrap: wrap;
    gap: 12px;
  }
  .sga-logo-uploader__actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
}
.sga-body__title {
  font-family: var(--arena-font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--arena-text-primary);
  margin-bottom: 4px;
}

/* ── Section card ─────────────────────────────────────── */
.sga-section {
  background: var(--arena-bg-glass);
  backdrop-filter: blur(18px);
  border: 1px solid var(--arena-border-subtle);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sga-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sga-section__label {
  font-family: var(--arena-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arena-text-dim);
}
.sga-section__hint {
  font-size: 12px;
  color: var(--arena-text-muted);
}
.sga-section--danger {
  background: var(--arena-danger-bg);
  border-color: var(--arena-danger-border);
}

/* ── Field layout ─────────────────────────────────────── */
.sga-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sga-field__label {
  font-family: var(--arena-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--arena-text-muted);
}
.sga-input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--arena-input-bg);
  border: 1px solid var(--arena-input-border);
  color: var(--arena-text-primary);
  font-family: var(--arena-font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  color-scheme: var(--dark, dark) var(--light, light);
}
.sga-input:focus {
  border-color: var(--arena-general-border);
  box-shadow: 0 0 0 3px var(--arena-general-glow);
}
.sga-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.sga-input-group .sga-input {
  flex: 1;
}

/* datetime-local variant — make the full field a click-target so
   `showPicker()` can be triggered from anywhere on the control. */
.sga-input--datetime {
  cursor: pointer;
}
.sga-input--datetime::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

/* Formatted preview text under an input (e.g. the resolved
   start-time value). */
.sga-field__preview {
  font-size: 13px;
  color: var(--arena-text-muted);
  padding: 2px 2px 0;
  letter-spacing: 0.02em;
}

/* ── Button ───────────────────────────────────────────── */
.sga-btn {
  padding: 8px 14px;
  border-radius: 10px;
  font-family: var(--arena-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--arena-border-subtle);
  background: transparent;
  color: var(--arena-text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sga-btn:hover:not(:disabled) {
  border-color: rgba(252, 179, 0, 0.3);
  color: var(--arena-accent-gold);
  background: var(--arena-surface-hover);
}
.sga-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sga-btn--accent {
  background: linear-gradient(135deg, var(--arena-general-color), #16a34a);
  border: none;
  color: #fff;
  box-shadow: 0 2px 12px var(--arena-general-glow);
}
.sga-btn--accent:hover:not(:disabled) {
  transform: translateY(-1px);
  color: #fff;
  box-shadow: 0 4px 16px var(--arena-general-glow);
  border-color: transparent;
  background: linear-gradient(135deg, var(--arena-general-color), #16a34a);
}
.sga-btn--danger {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.22);
  color: var(--arena-accent-red);
}
.sga-btn--danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.12);
  border-color: var(--arena-accent-red);
  color: var(--arena-accent-red);
}

/* ── Logo uploader ────────────────────────────────────── */
.sga-logo-uploader {
  display: flex;
  align-items: center;
  gap: 18px;
}
.sga-logo-preview {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--arena-general-color), var(--arena-accent-teal));
  border: 1px solid var(--arena-general-border);
  box-shadow: 0 4px 20px var(--arena-general-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--arena-font-display);
  font-weight: 700;
  font-size: 26px;
  color: #0a0a0a;
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
}
.sga-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sga-logo-uploader__actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── Radio cards (visibility) ─────────────────────────── */
.sga-radio-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 640px) {
  .sga-radio-cards { grid-template-columns: 1fr; }
}
.sga-radio-card {
  padding: 16px;
  border-radius: 12px;
  background: var(--arena-surface-soft);
  border: 1px solid var(--arena-border-subtle);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  font-family: var(--arena-font-body);
  color: var(--arena-text-primary);
}
.sga-radio-card:hover {
  border-color: var(--arena-general-border);
  background: var(--arena-surface-hover);
}
.sga-radio-card[aria-selected="true"] {
  border-color: var(--arena-general-border);
  background: var(--arena-general-bg);
}
.sga-radio-card__title {
  font-family: var(--arena-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arena-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sga-radio-card[aria-selected="true"] .sga-radio-card__title {
  color: var(--arena-general-color);
}
.sga-radio-card__title svg {
  width: 14px;
  height: 14px;
}
.sga-radio-card__desc {
  font-size: 12px;
  color: var(--arena-text-muted);
  line-height: 1.5;
}

/* ── Switch ───────────────────────────────────────────── */
.sga-switch {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  background: transparent;
  border: none;
}
.sga-switch__track {
  width: 38px;
  height: 22px;
  border-radius: 100px;
  background: var(--arena-surface-hover);
  border: 1px solid var(--arena-border-subtle);
  position: relative;
  transition: all 0.2s;
  flex-shrink: 0;
  margin-top: 1px;
}
.sga-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--arena-text-muted);
  transition: all 0.2s;
}
.sga-switch[aria-checked="true"] .sga-switch__track {
  background: var(--arena-general-bg);
  border-color: var(--arena-general-border);
}
.sga-switch[aria-checked="true"] .sga-switch__thumb {
  left: 18px;
  background: var(--arena-general-color);
  box-shadow: 0 0 8px var(--arena-general-glow);
}
.sga-switch__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.sga-switch__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--arena-text-primary);
}
.sga-switch__sub {
  font-size: 11px;
  color: var(--arena-text-muted);
}
.sga-switch[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Chips (invited accounts / admins) ────────────────── */
.sga-creator-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sga-creator-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  border-radius: 100px;
  background: var(--arena-surface-soft);
  border: 1px solid var(--arena-border-subtle);
}
.sga-creator-chip__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fcb300, #fb923c);
  flex-shrink: 0;
  font-family: var(--arena-font-display);
  font-size: 10px;
  font-weight: 700;
  color: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
  overflow: hidden;
}
.sga-creator-chip__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sga-creator-chip__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--arena-text-primary);
}
.sga-creator-chip__role {
  font-family: var(--arena-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(252, 179, 0, 0.08);
  border: 1px solid rgba(252, 179, 0, 0.2);
  color: var(--arena-accent-gold);
}
.sga-creator-chip__role--admin {
  color: var(--arena-general-color);
  background: var(--arena-general-bg);
  border-color: var(--arena-general-border);
}
.sga-creator-chip__role--pending {
  color: var(--arena-accent-teal);
  background: rgba(110, 237, 216, 0.08);
  border-color: rgba(110, 237, 216, 0.22);
}
.sga-creator-chip__x {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--arena-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  padding: 0;
}
.sga-creator-chip__x:hover {
  color: var(--arena-accent-red);
  background: rgba(239, 68, 68, 0.08);
}
.sga-creator-chip__x svg {
  width: 10px;
  height: 10px;
}

/* ── Danger zone row ──────────────────────────────────── */
.sga-danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.sga-danger-row__text {
  flex: 1;
  min-width: 220px;
}
.sga-danger-row__title {
  font-size: 13px;
  font-weight: 600;
}
.sga-danger-row__sub {
  font-size: 12px;
  color: var(--arena-text-muted);
}

/* ── Empty state ──────────────────────────────────────── */
.sga-empty {
  font-size: 13px;
  color: var(--arena-text-muted);
  padding: 8px 2px;
}

/* ── Sticky footer (last saved indicator) ─────────────── */
.sga-footer {
  position: sticky;
  bottom: 0;
  z-index: 25;
  background: var(--arena-bg-glass);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--arena-border-subtle);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.sga-footer__left {
  font-size: 12px;
  color: var(--arena-text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sga-footer__pill {
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--arena-surface-soft);
  border: 1px solid var(--arena-border-subtle);
  font-family: var(--arena-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--arena-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Delete space confirmation modal ─────────────────────────
   Mirrors the team-delete arena modal in
   `features/social/pages/setting/views/style.css` (`.ts-modal-*`).
   Kept scoped to `.sga-` so the two surfaces can evolve
   independently if they ever diverge. Arena tokens
   (`--arena-*`) are inherited from the `.space-general-arena`
   wrapper that owns this tree. */
.sga-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 24px;
  animation: sga-modal-overlay-in 0.2s ease;
}
html[data-theme="light"] .sga-modal-overlay,
[data-theme="light"] .sga-modal-overlay {
  background: rgba(0, 0, 0, 0.35);
}
@keyframes sga-modal-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sga-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 28px 28px 24px;
  background: rgba(16, 16, 32, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 20px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(239, 68, 68, 0.08);
  animation: sga-modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-theme="light"] .sga-modal,
[data-theme="light"] .sga-modal {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(220, 38, 38, 0.22);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.14),
    0 0 28px rgba(220, 38, 38, 0.06);
}
@keyframes sga-modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.sga-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.sga-modal__title {
  font-family: var(--arena-font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ef4444;
}
html[data-theme="light"] .sga-modal__title,
[data-theme="light"] .sga-modal__title {
  color: #b91c1c;
}

.sga-modal__close {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--arena-border-subtle);
  color: var(--arena-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.sga-modal__close:hover {
  color: var(--arena-text-primary);
  background: rgba(255, 255, 255, 0.08);
}
.sga-modal__close svg { width: 14px; height: 14px; }

.sga-modal__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sga-modal__desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--arena-text-muted);
}
.sga-modal__desc strong {
  color: var(--arena-text-primary);
  font-weight: 600;
}

.sga-modal__actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.sga-modal__cancel,
.sga-modal__confirm-danger {
  flex: 1;
  padding: 12px;
  border-radius: 11px;
  font-family: var(--arena-font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
  border: 1px solid var(--arena-border-subtle);
}
.sga-modal__cancel {
  background: rgba(255, 255, 255, 0.03);
  color: var(--arena-text-primary);
  font-weight: 700;
}
.sga-modal__cancel:hover {
  background: rgba(255, 255, 255, 0.06);
}
.sga-modal__confirm-danger {
  background: rgba(239, 68, 68, 0.16);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.22);
}
html[data-theme="light"] .sga-modal__confirm-danger,
[data-theme="light"] .sga-modal__confirm-danger {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.32);
}
.sga-modal__confirm-danger:hover {
  background: rgba(239, 68, 68, 0.26);
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.2);
}
.sga-modal__confirm-danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* === src/features/spaces/pages/apps/apps/panels/views/home/style.css === */
/* Arena-styled Space Panels app.
   Extracted from `assets/design/app-settings-panels-scroll.html`.
   All classes prefixed with `spa-` (space-panels-arena) to stay
   isolated from other feature styles. Top-level wrapper
   `.space-panels-arena` owns layout + theme tokens.

   Auto-save: the mockup's top/bottom Cancel + Save Changes buttons
   and the topbar autosave pill are intentionally removed — the
   controller hook (`UseSpacePanels`) fires each mutation directly
   on value change and the footer keeps only a "Changes saved" pill. */

.space-panels-arena {
  --spa-bg-void: var(--dark, #06060e) var(--light, #f5f5fb);
  --spa-bg-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.75));
  --spa-bg-glass-hover: var(--dark, rgba(20, 20, 40, 0.80)) var(--light, rgba(255, 255, 255, 0.95));
  --spa-border-subtle: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(10, 10, 30, 0.08));
  --spa-border-strong: var(--dark, rgba(255, 255, 255, 0.12)) var(--light, rgba(10, 10, 30, 0.16));
  --spa-text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --spa-text-muted: var(--dark, #8888a8) var(--light, #5b5b75);
  --spa-text-dim: var(--dark, #55556a) var(--light, #9898ad);
  --spa-surface-soft: var(--dark, rgba(255, 255, 255, 0.02)) var(--light, rgba(10, 10, 30, 0.03));
  --spa-surface-hover: var(--dark, rgba(255, 255, 255, 0.04)) var(--light, rgba(10, 10, 30, 0.05));
  --spa-glow-aura-a: var(--dark, rgba(14, 165, 233, 0.05)) var(--light, rgba(14, 165, 233, 0.10));
  --spa-glow-aura-b: var(--dark, rgba(252, 179, 0, 0.03)) var(--light, rgba(252, 179, 0, 0.06));
  --spa-panel-bg: var(--dark, rgba(12, 12, 26, 1)) var(--light, rgba(255, 255, 255, 1));
  --spa-input-bg: var(--dark, rgba(255, 255, 255, 0.02)) var(--light, rgba(10, 10, 30, 0.02));
  --spa-input-border: var(--dark, rgba(255, 255, 255, 0.08)) var(--light, rgba(10, 10, 30, 0.1));
  --spa-warn-bg: var(--dark, rgba(252, 179, 0, 0.06)) var(--light, rgba(252, 179, 0, 0.10));
  --spa-warn-border: var(--dark, rgba(252, 179, 0, 0.24)) var(--light, rgba(252, 179, 0, 0.3));
  --spa-row-hover: var(--dark, rgba(255, 255, 255, 0.03)) var(--light, rgba(10, 10, 30, 0.03));

  --spa-accent-gold: #fcb300;
  --spa-accent-teal: #6eedd8;
  --spa-panels-color: #0ea5e9;
  --spa-panels-bg: rgba(14, 165, 233, 0.10);
  --spa-panels-border: rgba(14, 165, 233, 0.24);
  --spa-panels-glow: rgba(14, 165, 233, 0.16);
  --spa-uni-color: #60a5fa;
  --spa-uni-bg: rgba(96, 165, 250, 0.10);
  --spa-uni-border: rgba(96, 165, 250, 0.24);
  --spa-age-color: #22c55e;
  --spa-age-bg: rgba(34, 197, 94, 0.10);
  --spa-age-border: rgba(34, 197, 94, 0.24);
  --spa-gen-color: #a855f7;
  --spa-gen-bg: rgba(168, 85, 247, 0.10);
  --spa-gen-border: rgba(168, 85, 247, 0.24);

  --spa-font-display: 'Orbitron', sans-serif;
  --spa-font-body: 'Outfit', sans-serif;

  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: var(--spa-bg-void);
  color: var(--spa-text-primary);
  font-family: var(--spa-font-body);
}
.space-panels-arena::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, var(--spa-glow-aura-a), transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 120%, var(--spa-glow-aura-b), transparent 50%);
  z-index: 0;
  pointer-events: none;
}

/* ── Topbar ────────────────────────────────────────────────────── */
.spa-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  gap: 16px;
  background: var(--spa-bg-glass);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--spa-border-subtle);
}
.spa-topbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.spa-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--spa-surface-soft);
  border: 1px solid var(--spa-border-subtle);
  color: var(--spa-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}
.spa-back-btn:hover {
  border-color: rgba(252, 179, 0, 0.3);
  color: var(--spa-accent-gold);
}
.spa-back-btn svg {
  width: 16px;
  height: 16px;
}
.spa-topbar__logo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid rgba(252, 179, 0, 0.15);
  flex-shrink: 0;
}
.spa-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.spa-breadcrumb__item {
  font-family: var(--spa-font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spa-text-muted);
}
.spa-breadcrumb__sep {
  color: var(--spa-text-dim);
  font-size: 10px;
}
.spa-breadcrumb__current {
  color: var(--spa-text-primary);
  font-weight: 600;
}
.spa-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-family: var(--spa-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--spa-panels-bg);
  color: var(--spa-panels-color);
  border: 1px solid var(--spa-panels-border);
}
.spa-type-badge svg {
  width: 13px;
  height: 13px;
}
.spa-topbar-title {
  flex: 1;
  min-width: 180px;
  color: var(--spa-text-primary);
  font-family: var(--spa-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Mobile topbar — strip breadcrumb/badge so it stays one clean row ─ */
@media (max-width: 760px) {
  .spa-topbar {
    padding: 12px 14px;
    gap: 10px;
  }
  .spa-topbar__left {
    gap: 10px;
  }
  /* Breadcrumb + type badge wrap ugly on narrow viewports; the title
     is enough to tell the user where they are. */
  .spa-breadcrumb,
  .spa-type-badge {
    display: none;
  }
  .spa-topbar-title {
    min-width: 0;
    font-size: 13px;
    padding: 0;
  }
}
@media (max-width: 480px) {
  .spa-topbar {
    padding: 10px 12px;
  }
  .spa-back-btn {
    width: 32px;
    height: 32px;
  }
  .spa-topbar__logo {
    width: 32px;
    height: 32px;
  }
  .spa-topbar-title {
    font-size: 12px;
  }
}

/* ── Body ──────────────────────────────────────────────────────── */
.spa-body {
  position: relative;
  z-index: 10;
  flex: 1;
  padding: 28px 28px 120px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 760px) {
  .spa-body {
    padding: 18px 14px 96px;
    gap: 14px;
  }
}

.spa-section {
  background: var(--spa-bg-glass);
  backdrop-filter: blur(18px);
  border: 1px solid var(--spa-border-subtle);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 760px) {
  .spa-section {
    padding: 16px;
  }
}
.spa-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.spa-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.spa-section__label {
  font-family: var(--spa-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--spa-text-dim);
}
.spa-section__hint {
  font-size: 12px;
  color: var(--spa-text-muted);
}
.spa-section__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.spa-info-icon {
  width: 16px;
  height: 16px;
  color: var(--spa-text-dim);
  cursor: help;
}
.spa-info-icon:hover {
  color: var(--spa-text-muted);
}

/* ── Total quota ──────────────────────────────────────────────── */
.spa-quota-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.spa-quota-label {
  font-family: var(--spa-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--spa-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.spa-quota-input {
  width: 140px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--spa-input-bg);
  border: 1px solid var(--spa-input-border);
  color: var(--spa-text-primary);
  font-family: var(--spa-font-display);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  outline: none;
  transition: all 0.2s;
}
.spa-quota-input:focus {
  border-color: var(--spa-panels-border);
  box-shadow: 0 0 0 3px var(--spa-panels-glow);
}
.spa-quota-meter {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.spa-quota-meter__bar {
  position: relative;
  height: 8px;
  border-radius: 100px;
  background: var(--spa-surface-soft);
  border: 1px solid var(--spa-border-subtle);
  overflow: hidden;
}
.spa-quota-meter__fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(90deg, var(--spa-panels-color), #38bdf8);
  border-radius: 100px;
  box-shadow: 0 0 8px var(--spa-panels-glow);
  transition: width 0.25s ease;
}
.spa-quota-meter__labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--spa-font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--spa-text-muted);
  text-transform: uppercase;
}
.spa-quota-meter__labels strong {
  color: var(--spa-panels-color);
  font-weight: 700;
}

/* ── Attribute toggles ────────────────────────────────────────── */
.spa-attr-toggles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 640px) {
  .spa-attr-toggles {
    grid-template-columns: 1fr;
  }
}
.spa-attr-toggle {
  padding: 16px;
  border-radius: 14px;
  background: var(--spa-surface-soft);
  border: 1px solid var(--spa-border-subtle);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  text-align: left;
  color: var(--spa-text-primary);
  font-family: var(--spa-font-body);
}
.spa-attr-toggle:hover {
  border-color: var(--spa-panels-border);
  background: var(--spa-surface-hover);
}
.spa-attr-toggle[aria-selected="true"] {
  border-color: var(--spa-panels-border);
  background: var(--spa-panels-bg);
}
.spa-attr-toggle__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.spa-attr-toggle__name {
  font-family: var(--spa-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spa-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.spa-attr-toggle__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.spa-attr-toggle--uni .spa-attr-toggle__swatch {
  background: var(--spa-uni-color);
  box-shadow: 0 0 8px var(--spa-uni-color);
}
.spa-attr-toggle--age .spa-attr-toggle__swatch {
  background: var(--spa-age-color);
  box-shadow: 0 0 8px var(--spa-age-color);
}
.spa-attr-toggle--gen .spa-attr-toggle__swatch {
  background: var(--spa-gen-color);
  box-shadow: 0 0 8px var(--spa-gen-color);
}
.spa-attr-toggle__desc {
  font-size: 12px;
  color: var(--spa-text-muted);
  line-height: 1.5;
}
.spa-attr-toggle__check {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--spa-surface-hover);
  border: 1px solid var(--spa-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 0.15s;
}
.spa-attr-toggle[aria-selected="true"] .spa-attr-toggle__check {
  background: var(--spa-panels-color);
  border-color: var(--spa-panels-color);
  color: #fff;
}
.spa-attr-toggle__check svg {
  width: 12px;
  height: 12px;
}

/* ── Collective chips ─────────────────────────────────────────── */
.spa-collective-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.spa-collective-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid var(--spa-border-subtle);
  background: var(--spa-surface-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--spa-text-primary);
}
.spa-collective-chip--uni {
  background: var(--spa-uni-bg);
  border-color: var(--spa-uni-border);
  color: var(--spa-uni-color);
}
.spa-collective-chip--age {
  background: var(--spa-age-bg);
  border-color: var(--spa-age-border);
  color: var(--spa-age-color);
}
.spa-collective-chip--gen {
  background: var(--spa-gen-bg);
  border-color: var(--spa-gen-border);
  color: var(--spa-gen-color);
}
.spa-collective-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.spa-collective-chip__action {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: currentColor;
  opacity: 0.6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}
.spa-collective-chip__action:hover {
  opacity: 1;
}
.spa-collective-chip__action svg {
  width: 12px;
  height: 12px;
}
.spa-empty-hint {
  font-size: 12px;
  color: var(--spa-text-dim);
  font-style: italic;
  padding: 16px 0;
  text-align: center;
}

/* ── Icon button + dropdown (move-to-conditional) ─────────────── */
.spa-btn {
  padding: 8px 14px;
  border-radius: 10px;
  font-family: var(--spa-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--spa-border-subtle);
  background: transparent;
  color: var(--spa-text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.spa-btn:hover {
  border-color: rgba(252, 179, 0, 0.3);
  color: var(--spa-accent-gold);
  background: var(--spa-surface-hover);
}
.spa-btn--icon {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
}
.spa-btn--icon svg {
  width: 14px;
  height: 14px;
}
.spa-dropdown {
  position: relative;
}
.spa-dropdown-menu {
  position: absolute;
  right: 0;
  top: 42px;
  min-width: 180px;
  background: var(--spa-panel-bg);
  border: 1px solid var(--spa-border-subtle);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  z-index: 40;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.spa-dropdown-menu[data-open="true"] {
  display: flex;
}
.spa-dropdown-menu__item {
  padding: 10px 12px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--spa-text-primary);
  font-size: 13px;
  text-align: left;
  transition: all 0.1s;
}
.spa-dropdown-menu__item:hover {
  background: var(--spa-surface-hover);
}

/* ── Warning ribbon ───────────────────────────────────────────── */
.spa-warn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--spa-warn-bg);
  border: 1px solid var(--spa-warn-border);
  color: var(--spa-text-primary);
  font-size: 12px;
  line-height: 1.5;
}
.spa-warn__icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(252, 179, 0, 0.18);
  color: var(--spa-accent-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.spa-warn__icon svg {
  width: 13px;
  height: 13px;
}
.spa-warn strong {
  color: var(--spa-accent-gold);
}

/* ── Conditional table ────────────────────────────────────────── */
.spa-table-wrap {
  border-radius: 14px;
  overflow-x: auto;
  border: 1px solid var(--spa-border-subtle);
  background: var(--spa-surface-soft);
}
.spa-p-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.spa-p-table thead {
  background: var(--spa-surface-soft);
}
.spa-p-table th {
  padding: 12px 16px;
  text-align: left;
  font-family: var(--spa-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--spa-text-dim);
  border-bottom: 1px solid var(--spa-border-subtle);
  white-space: nowrap;
}
.spa-p-table th.spa-num {
  text-align: right;
  width: 160px;
}
.spa-p-table th.spa-action,
.spa-p-table td.spa-action {
  width: 48px;
  padding-left: 0;
  padding-right: 12px;
  text-align: right;
}
.spa-p-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--spa-border-subtle);
  vertical-align: middle;
  color: var(--spa-text-primary);
}
.spa-p-table tr:last-child td {
  border-bottom: none;
}
.spa-p-table tbody tr {
  transition: background 0.1s;
}
.spa-p-table tbody tr:hover {
  background: var(--spa-row-hover);
}
.spa-p-table td.spa-num {
  text-align: right;
  font-family: var(--spa-font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.spa-p-table__group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.spa-p-table__swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}
.spa-p-table__group--uni .spa-p-table__swatch {
  background: var(--spa-uni-color);
}
.spa-p-table__group--age .spa-p-table__swatch {
  background: var(--spa-age-color);
}
.spa-p-table__group--gen .spa-p-table__swatch {
  background: var(--spa-gen-color);
}
.spa-p-table__group--mix .spa-p-table__swatch {
  background: var(--spa-panels-color);
}
.spa-attr-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 100px;
  font-family: var(--spa-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 4px;
  margin-bottom: 2px;
}
.spa-attr-pill--uni {
  background: var(--spa-uni-bg);
  color: var(--spa-uni-color);
  border: 1px solid var(--spa-uni-border);
}
.spa-attr-pill--age {
  background: var(--spa-age-bg);
  color: var(--spa-age-color);
  border: 1px solid var(--spa-age-border);
}
.spa-attr-pill--gen {
  background: var(--spa-gen-bg);
  color: var(--spa-gen-color);
  border: 1px solid var(--spa-gen-border);
}
.spa-ratio-value {
  font-family: var(--spa-font-display);
  font-size: 11px;
  font-weight: 700;
}
.spa-ratio-value--uni {
  color: var(--spa-uni-color);
}
.spa-ratio-value--age {
  color: var(--spa-age-color);
}
.spa-ratio-value--gen {
  color: var(--spa-gen-color);
}
.spa-ratio-value--mix {
  color: var(--spa-panels-color);
}
.spa-ratio-bar {
  position: relative;
  width: 100%;
  max-width: 180px;
  height: 6px;
  border-radius: 100px;
  background: var(--spa-surface-hover);
  overflow: hidden;
  margin-top: 4px;
}
.spa-ratio-bar__fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-radius: 100px;
  transition: width 0.25s ease;
}
.spa-ratio-bar__fill--uni {
  background: var(--spa-uni-color);
}
.spa-ratio-bar__fill--age {
  background: var(--spa-age-color);
}
.spa-ratio-bar__fill--gen {
  background: var(--spa-gen-color);
}
.spa-ratio-bar__fill--mix {
  background: var(--spa-panels-color);
}
.spa-quota-cell {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}
.spa-num-input {
  width: 96px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--spa-input-bg);
  border: 1px solid var(--spa-input-border);
  color: var(--spa-text-primary);
  font-family: var(--spa-font-display);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  outline: none;
  transition: all 0.15s;
}
.spa-num-input:focus {
  border-color: var(--spa-panels-border);
  box-shadow: 0 0 0 3px var(--spa-panels-glow);
}
.spa-row-delete {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--spa-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
.spa-row-delete:hover {
  background: var(--spa-surface-hover);
  color: var(--spa-text-primary);
  border-color: var(--spa-border-subtle);
}
.spa-row-delete svg {
  width: 14px;
  height: 14px;
}
.spa-table-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--spa-text-dim);
  font-size: 13px;
}

/* ── Sticky footer (saved pill only) ──────────────────────────── */
.spa-footer {
  position: sticky;
  bottom: 0;
  z-index: 25;
  background: var(--spa-bg-glass);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--spa-border-subtle);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}
@media (max-width: 760px) {
  .spa-footer {
    padding: 10px 14px;
  }
}
.spa-footer__left {
  font-size: 12px;
  color: var(--spa-text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
.spa-footer__pill {
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--spa-surface-soft);
  border: 1px solid var(--spa-border-subtle);
  font-family: var(--spa-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--spa-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.spa-footer__pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--spa-accent-teal);
  display: inline-block;
}
.spa-footer__pill--saving .spa-footer__pill-dot {
  background: var(--spa-panels-color);
  animation: spa-pulse 1.4s ease-in-out infinite;
}
@keyframes spa-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* ── Viewer state (no-access) ─────────────────────────────────── */
.spa-viewer {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 64px 28px;
  text-align: center;
}
.spa-viewer__title {
  font-family: var(--spa-font-display);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--spa-text-muted);
}
.spa-viewer__btn {
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--spa-surface-soft);
  border: 1px solid var(--spa-border-subtle);
  color: var(--spa-text-primary);
  cursor: pointer;
  font-family: var(--spa-font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.2s;
}
.spa-viewer__btn:hover {
  border-color: rgba(252, 179, 0, 0.3);
  color: var(--spa-accent-gold);
}


/* === src/features/spaces/pages/index/action_dashboard/add_action_card/style.css === */
/* ── Admin Add Action Card ────────────────────────── */

.quest-card--add {
  --add-card-bg-a: var(--dark, rgba(252,179,0,0.03)) var(--light, rgba(252,179,0,0.08));
  --add-card-bg-b: var(--dark, rgba(12,12,26,0.55)) var(--light, rgba(255,255,255,0.75));
  --add-card-bg-a-active: var(--dark, rgba(252,179,0,0.06)) var(--light, rgba(252,179,0,0.14));
  --add-card-bg-b-active: var(--dark, rgba(12,12,26,0.7)) var(--light, rgba(255,255,255,0.92));
  --add-border: var(--dark, rgba(252,179,0,0.22)) var(--light, rgba(252,179,0,0.32));
  --add-glow: var(--dark, rgba(252,179,0,0.15)) var(--light, rgba(252,179,0,0.18));
  --plus-core: var(--dark, rgba(252,179,0,0.25)) var(--light, rgba(252,179,0,0.32));
  --plus-halo: var(--dark, rgba(252,179,0,0.05)) var(--light, rgba(252,179,0,0.1));
  --add-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --add-text-muted: var(--dark, #8888a8) var(--light, #6b6b80);

  background: linear-gradient(180deg, var(--add-card-bg-a), var(--add-card-bg-b));
  border: 2px dashed var(--add-border);
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  color: inherit;
  font-family: inherit;
}

.quest-card--add.active {
  background: linear-gradient(180deg, var(--add-card-bg-a-active), var(--add-card-bg-b-active));
  border-color: #fcb300;
  box-shadow: 0 12px 60px rgba(0,0,0,0.5), 0 0 40px var(--add-glow);
}

.add-card__plus {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, var(--plus-core), var(--plus-halo) 70%);
  border: 1px solid var(--add-border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 40px var(--add-glow);
}
.add-card__plus svg {
  width: 52px;
  height: 52px;
  color: #fcb300;
}

.add-card__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--add-text);
}
.add-card__desc {
  font-size: 13px;
  color: var(--add-text-muted);
  line-height: 1.6;
  max-width: 280px;
}

@media (max-width: 500px) {
  .add-card__plus { width: 80px; height: 80px; }
  .add-card__plus svg { width: 40px; height: 40px; }
  .add-card__title { font-size: 15px; }
  .add-card__desc { font-size: 12px; max-width: 240px; }
}


/* === src/features/spaces/pages/index/action_dashboard/discussion_card/style.css === */
/* ── Discussion Action Card ──────────────────────── */

.quest-card--discuss.active {
  border-color: rgba(34,211,238,0.18);
  box-shadow: 0 12px 60px var(--dark, rgba(0,0,0,0.5)) var(--light, rgba(0,0,0,0.12)), 0 0 40px rgba(34,211,238,0.12);
}

.quest-discuss-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.quest-discuss-tag {
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(34,211,238,0.08);
  border: 1px solid rgba(34,211,238,0.18);
  color: #22d3ee;
}

/* ── Admin inline edit (discussion card) ───────────── */
.quest-card--discuss {
  --qedit-input-bg: var(--dark, rgba(255,255,255,0.02)) var(--light, rgba(10,10,30,0.02));
  --qedit-input-border: var(--dark, rgba(255,255,255,0.08)) var(--light, rgba(10,10,30,0.10));
  --qedit-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --qedit-text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --qedit-text-dim: var(--dark, #55556a) var(--light, #9999aa);
  --qedit-bg-glass: var(--dark, rgba(12,12,26,0.65)) var(--light, rgba(255,255,255,0.72));
  --qedit-bg-glass-hover: var(--dark, rgba(20,20,40,0.8)) var(--light, rgba(255,255,255,0.92));
  --qedit-border-subtle: var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(10,10,30,0.08));
  --qedit-add-bg: var(--dark, rgba(252,179,0,0.08)) var(--light, rgba(252,179,0,0.12));
  --qedit-add-border: var(--dark, rgba(252,179,0,0.22)) var(--light, rgba(252,179,0,0.32));
  --qedit-red: #ef4444;
}

.quest-card[data-editing="true"] {
  border-color: rgba(252,179,0,0.4);
  box-shadow: 0 12px 60px rgba(0,0,0,0.5), 0 0 40px rgba(252,179,0,0.15);
  cursor: default;
}

.quest-edit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.quest-edit__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--qedit-add-bg);
  border: 1px solid var(--qedit-add-border);
  color: #fcb300;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  align-self: flex-start;
}
.quest-edit__badge svg { width: 11px; height: 11px; }

.quest-edit__title-input,
.quest-edit__desc-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--qedit-input-bg);
  border: 1px solid var(--qedit-input-border);
  color: var(--qedit-text);
  font-family: 'Outfit', sans-serif;
  outline: none;
  transition: border-color 0.2s ease;
}
.quest-edit__title-input { font-size: 18px; font-weight: 700; }
.quest-edit__desc-input { font-size: 13px; line-height: 1.5; resize: vertical; min-height: 72px; }
.quest-edit__title-input:focus,
.quest-edit__desc-input:focus,
.quest-edit__reward-input:focus {
  border-color: rgba(252,179,0,0.4);
  box-shadow: 0 0 0 3px rgba(252,179,0,0.08);
}

.quest-edit__files {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.quest-edit__files-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--qedit-text-dim);
}

.quest-edit__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--qedit-border-subtle);
  margin-top: auto;
  gap: 10px;
}
.quest-edit__reward-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Orbitron', sans-serif;
  color: #fcb300;
}
.quest-edit__reward-group svg { width: 16px; height: 16px; }
.quest-edit__reward-input {
  width: 70px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--qedit-input-bg);
  border: 1px solid var(--qedit-input-border);
  color: #fcb300;
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 700;
  outline: none;
  text-align: center;
}
.quest-edit__reward-unit {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fcb300;
}
.quest-edit__actions { display: flex; gap: 6px; }
.quest-edit__btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.quest-edit__btn--cancel {
  background: transparent;
  border: 1px solid var(--qedit-border-subtle);
  color: var(--qedit-text-muted);
}
.quest-edit__btn--cancel:hover {
  border-color: rgba(239,68,68,0.3);
  color: var(--qedit-red);
}
.quest-edit__btn--save {
  background: linear-gradient(135deg, #fcb300, #e5a200);
  border: none;
  color: #0a0a0a;
  box-shadow: 0 2px 10px rgba(252,179,0,0.25);
}
.quest-edit__btn--save:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(252,179,0,0.4);
}


/* === src/features/spaces/pages/index/action_dashboard/follow_card/style.css === */
/* ── Follow Action Card ──────────────────────────── */

.quest-card--follow.active {
  border-color: rgba(251,146,60,0.18);
  box-shadow: 0 12px 60px var(--dark, rgba(0,0,0,0.5)) var(--light, rgba(0,0,0,0.12)), 0 0 40px rgba(251,146,60,0.12);
}

.quest-follow-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.quest-follow-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(251,146,60,0.03);
  border: 1px solid rgba(251,146,60,0.08);
}
.quest-follow-user__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08));
  flex-shrink: 0;
}
.quest-follow-user__info {
  flex: 1;
  min-width: 0;
}
.quest-follow-user__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--dark, #f0f0f5) var(--light, #12121a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quest-follow-user__bio {
  font-size: 11px;
  color: var(--dark, #55556a) var(--light, #9999aa);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quest-follow-user__btn {
  padding: 5px 14px;
  border-radius: 6px;
  border: 1px solid rgba(251,146,60,0.18);
  background: rgba(251,146,60,0.08);
  color: #fb923c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.quest-follow-user__btn-wrap {
  position: relative;
  flex-shrink: 0;
}
.quest-follow-user__btn:hover {
  background: rgba(251,146,60,0.2);
  border-color: #fb923c;
  box-shadow: 0 0 12px rgba(251,146,60,0.12);
}
.quest-follow-user__btn[data-followed="true"] {
  background: rgba(34,197,94,0.1);
  border-color: rgba(34,197,94,0.2);
  color: #22c55e;
  cursor: default;
}

.quest-card__follow-count {
  font-size: 11px;
  color: var(--dark, #55556a) var(--light, #9999aa);
}

/* Points fly animation */
@keyframes points-fly {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  80%  { opacity: 0.8; transform: translateY(-40px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-60px) scale(0.8); }
}
.points-anim {
  position: absolute;
  right: 10px;
  top: -5px;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fcb300;
  pointer-events: none;
  animation: points-fly 1s cubic-bezier(0.16,1,0.3,1) forwards;
  text-shadow: 0 0 8px rgba(252,179,0,0.4);
}


/* === src/features/spaces/pages/index/action_dashboard/poll_card/style.css === */
/* ── Poll Action Card ────────────────────────────── */

.quest-card--poll.active {
  border-color: rgba(99,102,241,0.18);
  box-shadow: 0 12px 60px var(--dark, rgba(0,0,0,0.5)) var(--light, rgba(0,0,0,0.12)), 0 0 40px rgba(99,102,241,0.12);
}

.quest-poll-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.quest-poll-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(99,102,241,0.04);
  border: 1px solid rgba(99,102,241,0.1);
  font-size: 13px;
  font-weight: 500;
  color: var(--dark, #8888a8) var(--light, #6b6b80);
}
.quest-poll-option__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #818cf8;
  flex-shrink: 0;
}


/* === src/features/spaces/pages/index/action_dashboard/quest_edit_button/style.css === */
/* ── Quest Edit Button (admin affordance on quest cards) ───────── */

.quest-card__top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.quest-card__edit-btn {
  --qedit-btn-bg: var(--dark, rgba(12,12,26,0.65)) var(--light, rgba(255,255,255,0.72));
  --qedit-btn-bg-hover: var(--dark, rgba(20,20,40,0.8)) var(--light, rgba(255,255,255,0.92));
  --qedit-btn-border: var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(10,10,30,0.08));
  --qedit-btn-color: var(--dark, #8888a8) var(--light, #6b6b80);

  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--qedit-btn-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--qedit-btn-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--qedit-btn-color);
  padding: 0;
  opacity: 0;
  transform: translateX(4px);
  pointer-events: none;
}

.quest-card.active .quest-card__edit-btn {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.quest-card__edit-btn:hover {
  border-color: rgba(252,179,0,0.3);
  color: #fcb300;
  background: var(--qedit-btn-bg-hover);
}

.quest-card__edit-btn svg {
  width: 14px;
  height: 14px;
}

.quest-card[data-editing="true"] .quest-card__edit-btn {
  display: none;
}


/* === src/features/spaces/pages/index/action_dashboard/quiz_card/style.css === */
/* ── Quiz Action Card ────────────────────────────── */

.quest-card--quiz.active {
  border-color: rgba(168,85,247,0.18);
  box-shadow: 0 12px 60px var(--dark, rgba(0,0,0,0.5)) var(--light, rgba(0,0,0,0.12)), 0 0 40px rgba(168,85,247,0.12);
}

.quest-quiz-stats {
  display: flex;
  gap: 16px;
}
.quest-quiz-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.quest-quiz-stat__value {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #a855f7;
}
.quest-quiz-stat__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark, #55556a) var(--light, #9999aa);
}


/* === src/features/spaces/pages/index/action_dashboard/style.css === */
/* ── Action Dashboard ────────────────────────────── */
/* Uses same class names as docs/design/space-participant.html */
/* .arena base styles are in parent index/style.css */
/* Topbar + HUD buttons are in arena_topbar/style.css */

/* ── Section label ───────────────────────────────── */
.quest-label {
  position: relative; z-index: 10;
  display: inline-flex; align-items: center; gap: 6px;
  justify-content: center;
  width: 100%;
  padding: 0 28px; margin-top: 4px; margin-bottom: 8px;
}
.quest-label__title {
  font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dark, #55556a) var(--light, #9999aa);
}

/* Info tooltip next to the section label */
.quest-label__info {
  position: relative; display: inline-flex; align-items: center;
  color: var(--dark, #55556a) var(--light, #9999aa);
  cursor: help;
}
.quest-label__info svg { width: 12px; height: 12px; }
.quest-label__info:hover { color: var(--dark, #8888a8) var(--light, #6b6b80); }
.quest-label__info-tip {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%) translateY(-4px);
  min-width: 240px; max-width: 320px;
  padding: 8px 12px;
  background: var(--dark, #0c0c1a) var(--light, #ffffff);
  border: 1px solid var(--dark, rgba(255,255,255,0.08)) var(--light, rgba(0,0,0,0.08));
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 11px; font-weight: 400; line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--dark, #8888a8) var(--light, #6b6b80);
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  opacity: 0; pointer-events: none;
  transition: all 0.15s ease;
  z-index: 50;
}
.quest-label__info:hover .quest-label__info-tip {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ── Carousel ────────────────────────────────────── */
.carousel-wrapper {
  position: relative; z-index: 10;
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; overflow: hidden;
}
.carousel-wrapper::before,
.carousel-wrapper::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  width: 220px; z-index: 15; pointer-events: none;
}
.carousel-wrapper::before { left: 0; background: linear-gradient(to right, var(--dark, #06060e) var(--light, #f4f3ef), transparent); }
.carousel-wrapper::after  { right: 0; background: linear-gradient(to left, var(--dark, #06060e) var(--light, #f4f3ef), transparent); }

.carousel-track {
  display: flex; align-items: center; gap: 28px;
  padding: 60px 0;
  scroll-snap-type: x mandatory;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  padding-left: calc(50vw - 200px);
  padding-right: calc(50vw - 200px);
}
.carousel-track::-webkit-scrollbar { display: none; }

/* ── Quest Card ──────────────────────────────────── */
.quest-card {
  flex-shrink: 0; width: 400px; min-height: 380px; max-height: 480px;
  padding: 28px 26px 24px;
  background: var(--dark, rgba(12,12,26,0.65)) var(--light, rgba(255,255,255,0.72));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08));
  border-radius: 20px;
  display: flex; flex-direction: column; gap: 16px;
  cursor: pointer; scroll-snap-align: center;
  position: relative; overflow-y: auto; overflow-x: hidden;
  transform: scale(0.75); opacity: 0.25; filter: blur(6px);
  transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
}
.quest-card.active {
  transform: scale(1.05); opacity: 1; filter: blur(0);
  box-shadow: 0 12px 60px var(--dark, rgba(0,0,0,0.5)) var(--light, rgba(0,0,0,0.12));
}
.quest-card[data-prerequisite="true"]::after {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: #fcb300; border-radius: 3px 0 0 3px;
}

/* Type-specific glow: moved to each card's own style.css */

/* Hero watermark */
.quest-card__hero { position: absolute; right: -20px; top: -20px; width: 140px; height: 140px; opacity: 0.04; pointer-events: none; transition: opacity 0.5s; }
.quest-card.active .quest-card__hero { opacity: 0.07; }

.quest-card__top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.quest-card__type { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.quest-card__type svg { width: 15px; height: 15px; }
.quest-card__type--poll       { background: rgba(99,102,241,0.08);  color: #818cf8; border: 1px solid rgba(99,102,241,0.18); }
.quest-card__type--discussion { background: rgba(34,211,238,0.08);  color: #22d3ee; border: 1px solid rgba(34,211,238,0.18); }
.quest-card__type--quiz       { background: rgba(168,85,247,0.08);  color: #a855f7; border: 1px solid rgba(168,85,247,0.18); }
.quest-card__type--follow     { background: rgba(251,146,60,0.08);  color: #fb923c; border: 1px solid rgba(251,146,60,0.18); }

.quest-card__badges { display: flex; gap: 6px; }
.quest-card__badge { padding: 3px 8px; border-radius: 100px; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.quest-card__badge--prerequisite { background: rgba(252,179,0,0.1); color: #fcb300; border: 1px solid rgba(252,179,0,0.2); }
.quest-card__badge--credits     { background: rgba(252,179,0,0.06); color: #fcb300; border: 1px solid rgba(252,179,0,0.12); }
.quest-card__badge--locked      { background: rgba(148,163,184,0.12); color: #94a3b8; border: 1px solid rgba(148,163,184,0.25); }

/* Locked state — card grey/dim, cursor cue, inline hint, CTA muted. */
.quest-card[data-locked="true"] { opacity: 0.65; cursor: not-allowed; filter: saturate(0.6); }
.quest-card[data-locked="true"]:hover { opacity: 0.7; }
.quest-card__locked-hint {
  font-size: 12px;
  font-weight: 500;
  color: var(--dark, #8888a8) var(--light, #6b6b80);
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(148,163,184,0.08);
  border: 1px dashed rgba(148,163,184,0.2);
}
.quest-card__cta--locked {
  background: linear-gradient(135deg, rgba(252,179,0,0.92), rgba(229,162,0,0.92));
  color: #0a0a0a;
  border: none;
  box-shadow: 0 2px 12px rgba(252,179,0,0.2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.quest-card__cta--locked:hover {
  background: linear-gradient(135deg, #fcb300, #e5a200);
  box-shadow: 0 4px 20px rgba(252,179,0,0.35);
  transform: translateY(-1px);
}
.quest-card__cta--locked::after {
  content: "";
  width: 10px; height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") center / contain no-repeat;
  flex: 0 0 auto;
}

/* ── Locked dependencies popup ─────────────────────────────────── */
.locked-deps { display: flex; flex-direction: column; gap: 14px; min-width: 280px; max-width: 420px; }
.locked-deps__head { display: flex; align-items: flex-start; gap: 10px; }
.locked-deps__icon {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: rgba(148,163,184,0.12); color: #94a3b8;
  flex: 0 0 auto;
}
.locked-deps__head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.locked-deps__title { font-size: 15px; font-weight: 700; color: var(--dark, #f0f0f5) var(--light, #12121a); }
.locked-deps__subtitle { font-size: 12px; color: var(--dark, #8888a8) var(--light, #6b6b80); }

.locked-deps__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.locked-deps__item { margin: 0; }
.locked-deps__row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--dark, rgba(255,255,255,0.08)) var(--light, rgba(0,0,0,0.08));
  border-radius: 10px;
  background: var(--dark, rgba(255,255,255,0.02)) var(--light, rgba(0,0,0,0.02));
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  text-align: left;
}
.locked-deps__row:hover {
  background: var(--dark, rgba(255,255,255,0.05)) var(--light, rgba(0,0,0,0.04));
  border-color: rgba(252,179,0,0.4);
}
.locked-deps__row-type {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(148,163,184,0.12); color: #94a3b8;
  flex: 0 0 auto;
}
.locked-deps__row-title {
  flex: 1; min-width: 0;
  font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--dark, #f0f0f5) var(--light, #12121a);
}
.locked-deps__row-chevron { flex: 0 0 auto; color: var(--dark, #8888a8) var(--light, #6b6b80); }

.quest-card__body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.quest-card__title { font-size: 20px; font-weight: 700; line-height: 1.3; }
.quest-card__desc { font-size: 14px; line-height: 1.6; color: var(--dark, #8888a8) var(--light, #6b6b80); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.quest-card__detail { display: flex; gap: 10px; flex-wrap: wrap; padding: 10px 0; position: relative; z-index: 1; }
.quest-detail-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; background: rgba(255,255,255,0.04); border: 1px solid var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08)); color: var(--dark, #8888a8) var(--light, #6b6b80); }
.quest-detail-chip svg { width: 13px; height: 13px; }

.quest-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; border-top: 1px solid var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08));
  margin-top: auto; position: relative; z-index: 1;
}
.quest-card__reward { display: flex; align-items: center; gap: 6px; font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 700; color: #fcb300; }
.quest-card__reward svg { width: 16px; height: 16px; }
.quest-card__cta {
  padding: 9px 20px; border-radius: 8px; border: none;
  font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer; transition: all 0.25s ease;
  background: linear-gradient(135deg, #fcb300, #e5a200);
  color: #0a0a0a; box-shadow: 0 2px 12px rgba(252,179,0,0.2);
}
.quest-card__cta:hover { box-shadow: 0 4px 20px rgba(252,179,0,0.35); transform: translateY(-1px); }

/* Locked CTA is a tag-style chip, not a primary CTA, so it can sit
   comfortably next to the reward badge even on narrow screens. */
.quest-card__cta--locked {
  padding: 6px 12px;
  font-size: 10px;
  letter-spacing: 0.06em;
}

/* ── Arrow nav (desktop/tablet only) ─────────────── */
.carousel-arrow {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--dark, rgba(12,12,26,0.85)) var(--light, rgba(255,255,255,0.9));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--dark, rgba(255,255,255,0.08)) var(--light, rgba(0,0,0,0.08));
  color: var(--dark, #8888a8) var(--light, #6b6b80);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  z-index: 20;
  transition: all 0.2s ease;
}
.carousel-arrow svg { width: 18px; height: 18px; }
.carousel-arrow:hover:not(:disabled) {
  color: #fcb300;
  border-color: rgba(252,179,0,0.3);
  box-shadow: 0 4px 20px rgba(252,179,0,0.15);
}
.carousel-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.carousel-arrow--prev { left: 24px; }
.carousel-arrow--next { right: 24px; }

/* ── Dots ────────────────────────────────────────── */
.carousel-dots {
  position: relative; z-index: 10;
  display: flex; justify-content: center; gap: 8px; padding: 12px 0 20px;
}
.carousel-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: none; cursor: pointer; transition: all 0.3s ease; padding: 0;
}
.carousel-dot.active { width: 28px; border-radius: 4px; }
.carousel-dot.active--poll    { background: #818cf8; box-shadow: 0 0 8px rgba(99,102,241,0.3); }
.carousel-dot.active--discuss { background: #22d3ee; box-shadow: 0 0 8px rgba(34,211,238,0.3); }
.carousel-dot.active--quiz    { background: #a855f7; box-shadow: 0 0 8px rgba(168,85,247,0.3); }
.carousel-dot.active--follow  { background: #fb923c; box-shadow: 0 0 8px rgba(251,146,60,0.3); }

/* ── Bottom bar ──────────────────────────────────── */
.bottom-bar {
  position: relative; z-index: 10;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 28px 20px; flex-shrink: 0;
}
.quest-progress { display: flex; align-items: center; gap: 14px; flex: 1; }
.quest-progress__label {
  font-family: 'Orbitron', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dark, #55556a) var(--light, #9999aa); white-space: nowrap;
}
.quest-progress__bar-wrap { flex: 1; height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.quest-progress__bar { height: 100%; background: linear-gradient(90deg, #fcb300, #e5a200); border-radius: 2px; transition: width 0.6s cubic-bezier(0.16,1,0.3,1); }
.quest-progress__fraction { font-family: 'Orbitron', sans-serif; font-size: 12px; font-weight: 700; color: #fcb300; white-space: nowrap; }

/* Archive button */
.archive-btn {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--dark, rgba(12,12,26,0.65)) var(--light, rgba(255,255,255,0.72));
  backdrop-filter: blur(16px);
  border: 1px solid var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.25s ease; padding: 0;
  position: relative; flex-shrink: 0;
}
.archive-btn:hover { border-color: rgba(34,197,94,0.3); }
.archive-btn svg { width: 18px; height: 18px; color: var(--dark, #8888a8) var(--light, #6b6b80); transition: color 0.2s; }
.archive-btn:hover svg { color: #22c55e; }
.archive-btn__count {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; border-radius: 8px;
  background: #22c55e; color: #0a0a0a;
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.archive-btn__count:empty { display: none; }

/* Archive flash animation */
.archive-btn--flash { animation: archive-flash 0.6s ease; }
.archive-btn--flash .archive-btn__count { transform: scale(1.4); }
@keyframes archive-flash {
  0%   { box-shadow: 0 0 0 rgba(34,197,94,0); }
  30%  { box-shadow: 0 0 20px rgba(34,197,94,0.4); border-color: rgba(34,197,94,0.5); }
  100% { box-shadow: 0 0 0 rgba(34,197,94,0); border-color: var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08)); }
}

/* Archive panel */
.archive-panel {
  position: absolute; bottom: 70px; right: 28px;
  width: 340px; z-index: 30;
  background: var(--dark, rgba(12,12,26,0.95)) var(--light, rgba(255,255,255,0.95));
  backdrop-filter: blur(24px);
  border: 1px solid var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08));
  border-radius: 16px;
  box-shadow: 0 -8px 40px var(--dark, rgba(0,0,0,0.5)) var(--light, rgba(0,0,0,0.08));
  transform: translateY(10px); opacity: 0; pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
  max-height: 320px; display: flex; flex-direction: column; overflow: hidden;
}
.archive-panel[data-open="true"] { transform: translateY(0); opacity: 1; pointer-events: auto; }

.archive-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08));
  flex-shrink: 0;
}
.archive-panel__title { font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.archive-panel__close {
  width: 24px; height: 24px; border-radius: 6px;
  background: transparent;
  border: 1px solid var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--dark, #8888a8) var(--light, #6b6b80);
  padding: 0; transition: all 0.2s;
}
.archive-panel__close:hover { border-color: rgba(252,179,0,0.2); color: #fcb300; }
.archive-panel__close svg { width: 12px; height: 12px; }
.archive-panel__list { flex: 1; overflow-y: auto; padding: 8px; }
.archive-panel__list::-webkit-scrollbar { width: 3px; }
.archive-panel__list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
.archive-panel__empty { padding: 24px; text-align: center; font-size: 13px; color: var(--dark, #55556a) var(--light, #9999aa); }

.archive-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; }
.archive-item__info { flex: 1; min-width: 0; }
.archive-item__title { font-size: 13px; font-weight: 600; }
.archive-item__meta { font-size: 11px; color: var(--dark, #55556a) var(--light, #9999aa); }
.archive-item__check { color: #22c55e; flex-shrink: 0; }
.archive-item__check svg { width: 16px; height: 16px; }
.archive-item__skipped {
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--dark, #55556a) var(--light, #9999aa);
  padding: 2px 8px; border-radius: 4px;
  background: var(--dark, rgba(255,255,255,0.04)) var(--light, rgba(0,0,0,0.04));
  flex-shrink: 0;
}
.archive-item__score {
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  color: #f97316;
  padding: 3px 10px; border-radius: 6px;
  background: rgba(249,115,22,0.1);
  border: 1px solid rgba(249,115,22,0.2);
  flex-shrink: 0;
  font-family: 'Orbitron', sans-serif;
}

/* ── Credits fly animation (shared) ──────────────── */
@keyframes credits-fly {
  0%   { opacity: 1; transform: translate(-50%, 0) scale(1); }
  60%  { opacity: 1; transform: translate(-50%, -60px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -90px) scale(0.9); }
}
.credits-fly-anim {
  position: fixed;
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fcb300;
  pointer-events: none;
  z-index: 300;
  animation: credits-fly 1.2s cubic-bezier(0.16,1,0.3,1) forwards;
  text-shadow: 0 0 12px rgba(252,179,0,0.5);
  white-space: nowrap;
}

/* ── Empty state ─────────────────────────────────── */
.quest-empty {
  position: relative; z-index: 10;
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
}
.quest-empty__icon svg { width: 48px; height: 48px; color: var(--dark, #55556a) var(--light, #9999aa); }
.quest-empty__text { font-size: 15px; color: var(--dark, #8888a8) var(--light, #6b6b80); text-align: center; }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 500px) {
  .quest-label { margin-top: 8px; }
  .quest-card { width: 320px; min-height: 340px; padding: 22px 20px 20px; }
  .quest-card__title { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .carousel-track { padding-left: calc(50vw - 160px); padding-right: calc(50vw - 160px); gap: 20px; padding-top: 40px; padding-bottom: 40px; }
  .carousel-wrapper::before, .carousel-wrapper::after { width: 60px; }
  .carousel-arrow { display: none; }
  .bottom-bar { padding: 10px 16px 16px; gap: 10px; }
  .quest-progress { gap: 10px; }
  .quest-progress__label { font-size: 9px; }
  .quest-progress__bar-wrap { display: none; }
  .quest-progress__fraction { font-size: 11px; }
  .quest-progress__fraction::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,0.4);
    margin-right: 6px;
    vertical-align: middle;
  }
  .archive-panel { right: 16px; width: calc(100vw - 32px); }
}


/* === src/features/spaces/pages/index/action_dashboard/type_picker_modal/style.css === */
/* ── Type Picker Modal ───────────────────────────── */

.type-sheet {
  --sheet-scrim: var(--dark, rgba(6,6,14,0.85)) var(--light, rgba(245,245,251,0.78));
  --sheet-bg: var(--dark, rgba(12,12,26,0.95)) var(--light, rgba(255,255,255,0.98));
  --sheet-border: var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(10,10,30,0.08));
  --sheet-title: var(--dark, #f0f0f5) var(--light, #12121a);
  --sheet-text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --sheet-surface-soft: var(--dark, rgba(255,255,255,0.02)) var(--light, rgba(10,10,30,0.03));

  --poll-color: #818cf8;
  --poll-bg: rgba(99,102,241,0.08);
  --poll-border: rgba(99,102,241,0.18);
  --poll-glow: rgba(99,102,241,0.12);
  --discussion-color: #22d3ee;
  --discussion-bg: rgba(34,211,238,0.08);
  --discussion-border: rgba(34,211,238,0.18);
  --discussion-glow: rgba(34,211,238,0.12);
  --quiz-color: #a855f7;
  --quiz-bg: rgba(168,85,247,0.08);
  --quiz-border: rgba(168,85,247,0.18);
  --quiz-glow: rgba(168,85,247,0.12);
  --follow-color: #fb923c;
  --follow-bg: rgba(251,146,60,0.08);
  --follow-border: rgba(251,146,60,0.18);
  --follow-glow: rgba(251,146,60,0.12);
  --meet-color: #fb7185;
  --meet-bg: rgba(251,113,133,0.08);
  --meet-border: rgba(251,113,133,0.18);
  --meet-glow: rgba(251,113,133,0.12);

  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--sheet-scrim);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: type-sheet-fade 0.25s ease;
}
.type-sheet.open { display: flex; }
@keyframes type-sheet-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.type-sheet__panel {
  width: min(560px, 100%);
  /* Cap the panel to the (safe-area-trimmed) viewport so it never overflows
     the screen — without this the panel grew to its content height (≈844px,
     taller than the viewport) and the action cards spilled off the top and
     bottom. The card grid below scrolls within this height. */
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px);
  background: var(--sheet-bg);
  border: 1px solid var(--sheet-border);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: type-sheet-rise 0.3s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 20px 80px rgba(0,0,0,0.3);
}
@keyframes type-sheet-rise {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.type-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.type-sheet__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sheet-title);
}
.type-sheet__close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--sheet-border);
  color: var(--sheet-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.type-sheet__close:hover {
  border-color: rgba(252,179,0,0.3);
  color: #fcb300;
}
.type-sheet__close svg { width: 14px; height: 14px; }

.type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  /* Scroll the action cards inside the height-capped panel instead of letting
     them overflow the screen. `min-height: 0` lets this flex child shrink
     below its content height so the overflow actually engages. */
  overflow-y: auto;
  min-height: 0;
}
.type-option {
  padding: 18px 16px;
  border-radius: 14px;
  background: var(--sheet-surface-soft);
  border: 1px solid var(--sheet-border);
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  color: inherit;
  font-family: inherit;
}
.type-option:hover { transform: translateY(-2px); }
.type-option[data-type="poll"]:hover {
  border-color: var(--poll-border);
  background: var(--poll-bg);
  box-shadow: 0 8px 24px var(--poll-glow);
}
.type-option[data-type="discuss"]:hover {
  border-color: var(--discussion-border);
  background: var(--discussion-bg);
  box-shadow: 0 8px 24px var(--discussion-glow);
}
.type-option[data-type="quiz"]:hover {
  border-color: var(--quiz-border);
  background: var(--quiz-bg);
  box-shadow: 0 8px 24px var(--quiz-glow);
}
.type-option[data-type="follow"]:hover {
  border-color: var(--follow-border);
  background: var(--follow-bg);
  box-shadow: 0 8px 24px var(--follow-glow);
}
.type-option[data-type="meet"]:hover {
  border-color: var(--meet-border);
  background: var(--meet-bg);
  box-shadow: 0 8px 24px var(--meet-glow);
}
.type-option__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.type-option[data-type="poll"] .type-option__icon {
  background: var(--poll-bg);
  color: var(--poll-color);
  border: 1px solid var(--poll-border);
}
.type-option[data-type="discuss"] .type-option__icon {
  background: var(--discussion-bg);
  color: var(--discussion-color);
  border: 1px solid var(--discussion-border);
}
.type-option[data-type="quiz"] .type-option__icon {
  background: var(--quiz-bg);
  color: var(--quiz-color);
  border: 1px solid var(--quiz-border);
}
.type-option[data-type="follow"] .type-option__icon {
  background: var(--follow-bg);
  color: var(--follow-color);
  border: 1px solid var(--follow-border);
}
.type-option[data-type="meet"] .type-option__icon {
  background: var(--meet-bg);
  color: var(--meet-color);
  border: 1px solid var(--meet-border);
}
.type-option__icon svg { width: 18px; height: 18px; }
.type-option__name {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sheet-title);
}
.type-option__desc {
  font-size: 12px;
  color: var(--sheet-text-muted);
  line-height: 1.5;
}

@media (max-width: 500px) {
  .type-grid { grid-template-columns: 1fr; }
}


/* === src/features/spaces/pages/index/action_pages/discussion/style.css === */
/* ── Variables ─────────────────────────────────── */
.discussion-arena {
  --bg: var(--dark, #06060e) var(--light, #f4f3ef);
  --text: var(--dark, #f0f0f5) var(--light, #12121a);
  --text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --text-dim: var(--dark, #55556a) var(--light, #9999aa);
  --glass: var(--dark, rgba(12, 12, 26, 0.65))
    var(--light, rgba(255, 255, 255, 0.72));
  --glass-solid: var(--dark, rgba(12, 12, 26, 0.92))
    var(--light, rgba(255, 255, 255, 0.95));
  --glass-hover: var(--dark, rgba(20, 20, 40, 0.8))
    var(--light, rgba(255, 255, 255, 0.88));
  --border: var(--dark, rgba(255, 255, 255, 0.06))
    var(--light, rgba(0, 0, 0, 0.08));
  --surface: var(--dark, #0c0c1a) var(--light, #ffffff);
  --surface-raised: var(--dark, rgba(255, 255, 255, 0.03))
    var(--light, rgba(0, 0, 0, 0.03));
  --shadow: var(--dark, rgba(0, 0, 0, 0.4)) var(--light, rgba(0, 0, 0, 0.08));
  --discuss-color: #22d3ee;
  --discuss-glow: rgba(34, 211, 238, 0.12);
  --discuss-bg: rgba(34, 211, 238, 0.06);
  --discuss-border: rgba(34, 211, 238, 0.15);
  --gold: #fcb300;
  --teal: #6eedd8;
  --panel-bg: var(--dark, rgba(12, 12, 26, 0.85))
    var(--light, rgba(255, 255, 255, 0.9));
}

/* ── Arena ─────────────────────────────────────── */
.discussion-arena {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}
.discussion-arena::before {
  content: "";
  position: fixed;
  inset: 0;
  /* The solid `var(--bg)` base fills the ENTIRE viewport — including the
     safe-area strips (home indicator / status bar) that sit outside
     `:root`'s padding box. The arena's own `background: var(--bg)` only
     covers `100dvh - insets`, leaving the home-indicator strip showing the
     white `html` background underneath (a band below the content). This
     fixed, full-viewport layer paints that strip with the arena colour so
     there's no band. Gradients layer on top; `var(--bg)` is the last (bottom)
     background layer. 0-inset on desktop, so it's a harmless full-bleed bg. */
  background:
    radial-gradient(
      ellipse 80% 60% at 30% 0%,
      rgba(34, 211, 238, 0.04) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 120% 100% at 80% 120%,
      rgba(252, 179, 0, 0.03) 0%,
      transparent 50%
    ),
    var(--bg);
  z-index: 0;
  pointer-events: none;
}

/* ── Top Bar ───────────────────────────────────── */
.topbar {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--glass-solid);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.topbar__left {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Take all leftover width and allow the title to shrink/ellipsize so the
     subscribe button + status pill stay pinned to the right. */
  flex: 1;
  min-width: 0;
}
.topbar__back {
  width: 36px;
  height: 36px;
  /* Fixed-size flex child: without this the default `flex-shrink: 1` lets a
     long sibling title squash the square button into an oval. */
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
  color: var(--text-muted);
}
.topbar__back:hover {
  background: var(--glass-hover);
  border-color: rgba(34, 211, 238, 0.2);
  color: var(--discuss-color);
}
.topbar__back svg {
  width: 18px;
  height: 18px;
}
.topbar__title {
  font-family: "Orbitron", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Pinned right — never shrinks; the title (in __left) ellipsizes instead. */
  flex-shrink: 0;
}
/* discussion subscribe toggle (top bar) */
.topbar__subscribe {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--dark, rgba(255, 255, 255, 0.14)) var(--light, rgba(0, 0, 0, 0.12));
  background: var(--dark, rgba(255, 255, 255, 0.04)) var(--light, rgba(0, 0, 0, 0.03));
  color: var(--dark, #f0f0f5) var(--light, #12121a);
  transition:
    background 150ms ease,
    border-color 150ms ease,
    opacity 150ms ease;
}
.topbar__subscribe:hover {
  background: var(--dark, rgba(255, 255, 255, 0.08)) var(--light, rgba(0, 0, 0, 0.06));
}
.topbar__subscribe[aria-pressed="true"] {
  border-color: #fcb300;
  color: #fcb300;
  background: rgba(252, 179, 0, 0.12);
}
.topbar__subscribe:disabled {
  opacity: 0.55;
  cursor: default;
}
.topbar__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.topbar__status--active {
  background: rgba(110, 237, 216, 0.08);
  border: 1px solid rgba(110, 237, 216, 0.15);
  color: #6eedd8;
}
.topbar__status--active::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6eedd8;
  box-shadow: 0 0 6px #6eedd8;
  animation: disc-pulse-dot 2s ease-in-out infinite;
}
.topbar__status--ended {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.topbar__status--not-started {
  background: rgba(252, 179, 0, 0.08);
  border: 1px solid rgba(252, 179, 0, 0.15);
  color: #fcb300;
}

@media (max-width: 500px) {
  /* Drop the topbar title on mobile — it's redundant (the discussion body
     repeats it as an <h1>) and crowds the back button + subscribe + status. */
  .topbar__title { display: none; }
}

@keyframes disc-pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

/* ── Split Layout ──────────────────────────────── */
.discussion-layout {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ── Left: Discussion Content ──────────────────── */
.discussion-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 32px 40px 60px;
  scrollbar-width: thin;
  scrollbar-color: var(--dark, rgba(255, 255, 255, 0.08))
    var(--light, rgba(0, 0, 0, 0.04)) transparent;
}
.discussion-main::-webkit-scrollbar {
  width: 5px;
}
.discussion-main::-webkit-scrollbar-track {
  background: transparent;
}
.discussion-main::-webkit-scrollbar-thumb {
  background: var(--dark, rgba(255, 255, 255, 0.08))
    var(--light, rgba(0, 0, 0, 0.06));
  border-radius: 3px;
}

.discussion-main__inner {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

/* ── Discussion Header ─────────────────────────── */
.disc-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.disc-header__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--discuss-bg);
  color: var(--discuss-color);
  border: 1px solid var(--discuss-border);
  width: fit-content;
}
.disc-header__type svg {
  width: 14px;
  height: 14px;
}
.disc-header__title {
  font-family: "Orbitron", sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.3;
  color: var(--text);
}
.disc-header__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.disc-header__author {
  display: flex;
  align-items: center;
  gap: 8px;
}
.disc-header__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}
.disc-header__author-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.disc-header__separator {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-dim);
}
.disc-header__date {
  font-size: 13px;
  color: var(--text-muted);
}

/* ── Discussion Body ───────────────────────────── */
.disc-body {
  padding: 28px;
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 40px var(--shadow);
}
.disc-body__content {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
  /* Break long unbroken strings (e.g. a single huge word) so user content
     can't overflow the card horizontally. */
  overflow-wrap: break-word;
  word-break: break-word;
}
.disc-body__content p {
  margin-bottom: 16px;
}
.disc-body__content p:last-child {
  margin-bottom: 0;
}
.disc-body__content strong {
  font-weight: 600;
}
.disc-body__content em {
  font-style: italic;
  color: var(--text-muted);
}
.disc-body__content a {
  color: var(--discuss-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.disc-body__content h2 {
  font-family: "Orbitron", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 24px 0 12px;
  color: var(--text);
}
.disc-body__content h2:first-child {
  margin-top: 0;
}
.disc-body__content ul,
.disc-body__content ol {
  margin: 12px 0;
  padding-left: 24px;
  list-style-position: outside;
}
.disc-body__content ul {
  list-style-type: disc;
}
.disc-body__content ol {
  list-style-type: decimal;
}
.disc-body__content ul ul {
  list-style-type: circle;
}
.disc-body__content ul ul ul {
  list-style-type: square;
}
.disc-body__content li {
  margin-bottom: 6px;
}
.disc-body__content li > p {
  margin-bottom: 4px;
}
.disc-body__content li > p:last-child {
  margin-bottom: 0;
}
.disc-body__content blockquote {
  border-left: 3px solid var(--discuss-color);
  padding: 12px 16px;
  margin: 16px 0;
  background: var(--surface-raised);
  border-radius: 0 8px 8px 0;
  color: var(--text-muted);
  font-style: italic;
}
.disc-body__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.disc-body__content th,
.disc-body__content td {
  border: 1px solid var(--border);
  padding: 10px 14px;
  vertical-align: top;
}
.disc-body__content th {
  background: var(--surface-raised);
  font-weight: 600;
}
.disc-body__content tbody tr:first-child td {
  background: var(--surface-raised);
  font-weight: 600;
}
.disc-body__content td > p,
.disc-body__content th > p {
  margin-bottom: 0;
}

/* ── Files ──────────────────────────────────────── */
.disc-files {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.disc-files__label {
  font-family: "Orbitron", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.disc-files__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.file-card {
  padding: 14px 16px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.25s ease;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  /* Grid items default to min-width:auto, which lets a long file name push the
     card past its track and break the ellipsis. Allow it to shrink so
     .file-card__name can truncate. */
  min-width: 0;
}
.file-card:hover {
  border-color: var(--discuss-border);
  background: var(--discuss-bg);
}
.file-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--discuss-bg);
  border: 1px solid var(--discuss-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.file-card__icon svg {
  width: 18px;
  height: 18px;
  color: var(--discuss-color);
}
.file-card__info {
  min-width: 0;
  flex: 1;
}
.file-card__name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-card__size {
  font-size: 11px;
  color: var(--text-dim);
}

/* ── Right: Comments Panel ─────────────────────── */
.comments-panel {
  /* Initial width = previous fixed 420px. JS may set a larger inline
     `style.width` via the resizer drag; `min-width` keeps the panel
     from shrinking below the design floor regardless. */
  width: 420px;
  min-width: 420px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  /* Use `--surface` (fully opaque #ffffff in light, #0c0c1a in dark)
     instead of `--panel-bg` whose light value is rgba(...,0.9) — at 0.9
     alpha + the blur filter the panel reads as a translucent grey on a
     light page. Dropping the blur filter together so the bg stays a
     clean solid colour. */
  background: var(--surface);
  border-left: 1px solid var(--border);
  overflow: hidden;
}

/* Drag handle between discussion-main and comments-panel. Visual chrome
   is intentionally minimal — a hover/active accent strip is enough to
   signal interactivity without competing with the comment content. */
.comments-panel__resizer {
  width: 6px;
  flex-shrink: 0;
  background: transparent;
  cursor: col-resize;
  position: relative;
  z-index: 2;
  transition: background 0.15s ease;
  user-select: none;
}
.comments-panel__resizer:hover,
.comments-panel__resizer.dragging {
  background: var(--dark, rgba(252, 179, 0, 0.35))
    var(--light, rgba(252, 179, 0, 0.45));
}
/* While dragging, suppress text selection and force the col-resize
   cursor across the whole document so the cursor doesn't flicker when
   the pointer leaves the 6px hit-area. */
body.comments-panel-resizing {
  cursor: col-resize !important;
  user-select: none !important;
}

.comments-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.comments-panel__title {
  font-family: "Orbitron", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.comments-panel__count {
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--discuss-bg);
  color: var(--discuss-color);
  font-family: "Orbitron", sans-serif;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--discuss-border);
}

/* ── Comment Input ─────────────────────────────── */
/* Single composer pinned to the bottom of the comments panel. Handles
   both top-level comments and replies (via optional quote preview) — the
   thread-focus mode in `.comments-scroll` provides the visual context
   for which entity the next submit will attach to. */
.comment-input {
  padding: 14px 20px 16px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border);
  background: var(--panel-bg);
}
.comment-input > .reply-input {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
}

/* ── Reply quote preview ──────────────────────────
   Rendered above the textarea when `reply_quote` is set. Cancel button
   clears `active_reply_thread`, which both hides this banner and exits
   thread-focus mode on the comment list. */
.comment-input__quote {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 8px 8px 12px;
  border-left: 3px solid var(--discuss-color);
  background: var(--discuss-bg);
  border-radius: 0 8px 8px 0;
}
.comment-input__quote-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.comment-input__quote-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--discuss-color);
}
.comment-input__quote-text {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-style: italic;
}
.comment-input__quote-close {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  padding: 0;
}
.comment-input__quote-close:hover {
  background: var(--surface-raised);
  color: var(--text-muted);
}
.comment-input__quote-close svg {
  width: 12px;
  height: 12px;
}

/* ── Comments Scroll Area ──────────────────────── */
.comments-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--dark, rgba(255, 255, 255, 0.06))
    var(--light, rgba(0, 0, 0, 0.04)) transparent;
}
.comments-scroll::-webkit-scrollbar {
  width: 4px;
}
.comments-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.comments-scroll::-webkit-scrollbar-thumb {
  background: var(--dark, rgba(255, 255, 255, 0.06))
    var(--light, rgba(0, 0, 0, 0.06));
  border-radius: 2px;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Single-root wrapper so each CommentItem has one DOM root; `display: contents`
   keeps the existing flex/gap layout untouched (wrapper is visually transparent). */
.comment-entry {
  display: contents;
}

/* ── Thread focus mode ─────────────────────────────
   Set on `.comments-scroll` when a user clicks Reply on a comment. Filters
   the list so only the active thread (parent + its replies) is visible
   while keeping the DOM intact — loaders, scroll position, and per-item
   state all survive. Exit happens via the composer's quote-close button
   (clears `active_reply_thread`). */
.comments-scroll[data-thread-active="true"]
  .comment-list
  > .comment-entry:not([data-thread-active="true"]) {
  display: none !important;
}
.comments-scroll[data-thread-active="true"] .load-more {
  display: none;
}
.comments-scroll[data-thread-active="true"]
  .comment-entry[data-thread-active="true"]
  > .comment-item {
  position: relative;
  background: var(--discuss-bg);
  border-bottom: 1px solid var(--discuss-border);
  padding-top: 24px;
}
.comments-scroll[data-thread-active="true"]
  .comment-entry[data-thread-active="true"]
  > .comment-item::before {
  content: "Thread";
  position: absolute;
  top: 8px;
  left: 20px;
  font-family: "Orbitron", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--discuss-color);
}
.comments-scroll[data-thread-active="true"]
  .comment-entry[data-thread-active="true"]
  > .reply-toggle {
  display: none !important;
}
.comments-scroll[data-thread-active="true"]
  .comment-entry[data-thread-active="true"]
  > .comment-replies {
  margin-left: 0;
  padding-left: 0;
  border-left: none;
}

/* ── Comment Item ──────────────────────────────── */
.comment-item {
  display: flex;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 0;
  transition: background 0.2s ease;
}
.comment-item:hover {
  background: var(--surface-raised);
}

/* Deep-link highlight: `DiscussionArenaPage` sets
   `data-deep-link="true"` on the target `.comment-item` when the URL
   hash matches its UUID. Signal-driven attribute so Dioxus's next diff
   doesn't clobber it (as a raw `class` write would). One-shot pulse
   fades out; the attribute stays but the animation only plays once. */
.comment-item[data-deep-link="true"] {
  animation: comment-deep-link-pulse 5s ease-out;
}
@keyframes comment-deep-link-pulse {
  0% {
    background: rgba(34, 211, 238, 0.22);
    box-shadow: inset 3px 0 0 var(--discuss-color);
  }
  40% {
    background: rgba(34, 211, 238, 0.22);
    box-shadow: inset 3px 0 0 var(--discuss-color);
  }
  80% {
    background: rgba(34, 211, 238, 0.06);
    box-shadow: inset 3px 0 0 rgba(34, 211, 238, 0.5);
  }
  100% {
    background: transparent;
    box-shadow: none;
  }
}
.comment-item__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
  margin-top: 2px;
}
.comment-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.comment-item__top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.comment-item__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.comment-item__time {
  font-size: 11px;
  color: var(--text-dim);
}

.comment-item__text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  word-break: break-word;
  white-space: pre-wrap;
}

.comment-item__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

/* ── Author menu (edit/delete) ─────────────────── */
.comment-menu {
  position: relative;
  margin-left: auto;
}
.comment-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-dim);
  transition:
    background 0.15s,
    color 0.15s;
}
.comment-menu__trigger:hover {
  background: var(--surface-raised);
  color: var(--text-muted);
}
.comment-menu__trigger svg {
  width: 14px;
  height: 14px;
}
.comment-menu__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 120px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  background: var(--dark, rgba(12, 12, 26, 0.95))
    var(--light, rgba(255, 255, 255, 0.98));
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 32px var(--dark, rgba(0, 0, 0, 0.4))
    var(--light, rgba(0, 0, 0, 0.08));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 50;
}
.comment-menu__item {
  padding: 6px 10px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  color: var(--text);
  transition: background 0.15s;
}
.comment-menu__item:hover {
  background: var(--surface-raised);
}
.comment-menu__item--danger {
  color: #f43f5e;
}
.comment-menu__item--danger:hover {
  background: rgba(244, 63, 94, 0.1);
}

/* ── Inline edit ───────────────────────────────── */
.comment-item__edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}
.comment-item__edit-input {
  width: 100%;
  resize: vertical;
  padding: 8px 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  outline: none;
}
.comment-item__edit-input:focus {
  border-color: var(--discuss-border);
}
.comment-item__edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.comment-item__edit-cancel,
.comment-item__edit-save {
  padding: 4px 12px;
  border-radius: 6px;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.comment-item__edit-cancel {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.comment-item__edit-cancel:hover {
  color: var(--text);
}
.comment-item__edit-save {
  background: var(--discuss-color);
  color: #0a0a0a;
  border: none;
}
.comment-item__edit-save:hover:not(:disabled) {
  opacity: 0.9;
}
.comment-item__edit-save:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.comment-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  color: var(--text-dim);
}
.comment-action:hover {
  background: var(--surface-raised);
  color: var(--text-muted);
}
.comment-action svg {
  width: 13px;
  height: 13px;
}
.comment-action--liked,
.comment-action[aria-pressed="true"] {
  color: #f43f5e;
}
.comment-action--liked svg,
.comment-action[aria-pressed="true"] svg {
  fill: #f43f5e;
  stroke: #f43f5e;
}
.comment-action--reply:hover {
  color: var(--discuss-color);
}
.comment-action__reply-count {
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* ── Replies ───────────────────────────────────── */
.comment-replies {
  margin-left: 38px;
  padding-left: 14px;
  border-left: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.comment-replies .comment-item {
  padding: 10px 16px 10px 12px;
}
.comment-replies .comment-item__avatar {
  width: 22px;
  height: 22px;
}
.comment-replies .comment-item__name {
  font-size: 12px;
}
.comment-replies .comment-item__text {
  font-size: 12px;
}

.reply-toggle {
  margin-left: 38px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--discuss-color);
  cursor: pointer;
  background: none;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: opacity 0.2s;
}
.reply-toggle:hover {
  opacity: 0.7;
}
.reply-toggle svg {
  width: 12px;
  height: 12px;
}

/* ── Reply Input ───────────────────────────────── */
.reply-input {
  margin-left: 38px;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 2px;
  margin-right: 20px;
}
.reply-input:focus-within {
  border-color: var(--discuss-border);
}
/* MentionAutocomplete wraps its children in <div class="relative">. That
   wrapper becomes the flex item inside .reply-input — force it to grow so
   the input fills the row and the send button stays inline on the right. */
.reply-input > .relative {
  flex: 1;
  min-width: 0;
}
.reply-input__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.reply-input__field {
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  outline: none;
  resize: none;
  line-height: 1.5;
  /* Deeper chrome than top-level composer (parent comment + expand panel). */
  max-height: calc(100vh - 240px);
  overflow-y: auto;
}
.reply-input__field::placeholder {
  color: var(--text-dim);
}
.reply-input__send {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: var(--discuss-bg);
  color: var(--discuss-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
  flex-shrink: 0;
}
.reply-input__send:hover {
  background: var(--discuss-border);
}
.reply-input__send svg {
  width: 12px;
  height: 12px;
}

/* ── Load More ─────────────────────────────────── */
.load-more {
  display: flex;
  justify-content: center;
  padding: 16px 20px;
}
.load-more__btn {
  padding: 7px 20px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
}
.load-more__btn:hover {
  border-color: var(--discuss-border);
  color: var(--discuss-color);
}

/* ── Banner ───────────────────────────────────── */
.disc-banner {
  position: relative;
  z-index: 10;
  /* Top margin so the "not started / ended" banner isn't flush against the
     header. */
  margin: 14px 28px 0;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}
.disc-banner--warning {
  background: rgba(252, 179, 0, 0.08);
  border: 1px solid rgba(252, 179, 0, 0.15);
  color: #fcb300;
}
.disc-banner--info {
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.15);
  color: #22d3ee;
}

/* ── Sheet Handle (hidden on desktop) ─────────── */
.sheet-handle {
  display: none;
}
/* ── Responsive: Bottom Sheet ─────────────────── */
@media (max-width: 749px) {
  .discussion-layout {
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  .discussion-arena {
    height: 100%;
    overflow: hidden;
  }
  .discussion-main {
    padding: 24px 20px 100px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }
  .disc-files__grid {
    grid-template-columns: 1fr;
  }

  /* Resizer is irrelevant in bottom-sheet layout. */
  .comments-panel__resizer {
    display: none;
  }

  /* Convert comments-panel to bottom sheet */
  .comments-panel {
    position: fixed;
    /* Sheet background reaches the true screen bottom; `padding-bottom` (below)
       keeps the content above the home indicator / nav bar. Using
       `bottom: env(safe-area-inset-bottom)` instead lifted the WHOLE sheet
       (background included) off the bottom, leaving a strip of page background
       showing under it (looked like the sheet was floating with a line beneath
       it). `bottom: 0` fills that strip with the sheet's own surface. */
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    left: 0;
    right: 0;
    z-index: 100;
    /* `!important` overrides any inline `style.width` set by the
       desktop drag-resizer when the user shrinks the viewport across
       the breakpoint. `min-width` reset lets the sheet follow small
       phone widths (e.g. 375px). */
    width: 100% !important;
    min-width: 0 !important;
    /* Expanded sheet rises to ~75% so the discussion (topbar + body peek)
       stays visible above it instead of being fully covered.

       Capped by the VISIBLE height as well, minus the status bar. The Android
       WebView does not shrink the layout viewport for the keyboard — it pans
       the visual viewport down to reveal the focused composer, and this sheet
       (`position: fixed`, laid out against the layout viewport) rides along.
       Measured on a 640px screen with the keyboard open: innerHeight 640,
       visualViewport.height 341, offsetTop 299. `75vh` stayed 480, so the
       sheet's on-screen top was 160 - 299 = -139 and its first comments sat
       under the clock. `--vv-height` is the visible height app.rs publishes;
       with it the cap is min(480, 341 - 24) = 317 and the sheet ends just
       below the status bar. Keyboard closed it is min(480, 616) — unchanged. */
    max-height: min(
      75vh,
      calc(var(--vv-height, 100dvh) - env(safe-area-inset-top))
    );
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 40px var(--shadow);
    /* Collapsed peek = 64px handle, lifted by the bottom inset so the handle
       clears the home indicator (now that the sheet extends to `bottom: 0`).
       The inset-tall strip below the handle is filled by the sheet surface. */
    transform: translateY(calc(100% - 64px - env(safe-area-inset-bottom, 0px)));
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    touch-action: none;
    /* Mobile: use opaque surface so content behind the sheet doesn't
       bleed through the translucent --panel-bg used on desktop. */
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .comments-panel[data-expanded="true"] {
    transform: translateY(0);
  }
  .comments-panel.dragging {
    transition: none;
  }
  /* Keep the status-bar strip painted while the keyboard is up. Capping the
     sheet (above) stops the sheet itself going under the clock, but the
     WebView pans the whole layout by `visualViewport.offsetTop` (299 of a
     640px screen, measured) to reveal the composer, so whatever sits 299px
     down the page — discussion body text — slides into the top 24px and is
     drawn over the clock. This fixed strip follows the visual viewport
     (`--vv-offset-top` is published unthrottled by app.rs) and covers exactly
     the status-bar inset with the arena background. With the keyboard closed
     it sits over `:root`'s inset padding, which `::before` already fills with
     the same colour, so nothing changes there. */
  .discussion-arena::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top);
    background: var(--bg);
    transform: translateY(var(--vv-offset-top, 0px));
    z-index: 101;
    pointer-events: none;
  }

  /* Show sheet handle */
  .sheet-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px 10px;
    cursor: grab;
    flex-shrink: 0;
    -webkit-user-select: none;
    user-select: none;
  }
  .sheet-handle:active {
    cursor: grabbing;
  }
  .sheet-handle__bar {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--dark, rgba(255, 255, 255, 0.15))
      var(--light, rgba(0, 0, 0, 0.15));
    margin-bottom: 10px;
  }
  .sheet-handle__row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sheet-handle__left {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .sheet-handle__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
  }
  .sheet-handle__count {
    padding: 2px 8px;
    border-radius: 100px;
    background: var(--discuss-bg);
    color: var(--discuss-color);
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--discuss-border);
  }
  .sheet-handle__chevron {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    transition: transform 0.35s ease;
  }
  .comments-panel[data-expanded="true"] .sheet-handle__chevron {
    transform: rotate(180deg);
  }

  /* Hide desktop header when sheet handle is visible */
  .comments-panel__header {
    display: none;
  }

  /* Scroll area */
  .comments-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

@media (max-width: 500px) {
  .topbar {
    padding: 12px 16px;
  }
  .topbar__title {
    font-size: 11px;
  }
  .discussion-main {
    padding: 20px 16px 100px;
  }
  .disc-header__title {
    font-size: 20px;
  }
  .disc-body {
    padding: 20px;
  }
  .comment-item {
    padding: 10px 16px;
  }
  .comment-replies {
    margin-left: 28px;
    padding-left: 10px;
  }
  .reply-toggle {
    margin-left: 28px;
  }
  .reply-input {
    margin-left: 28px;
  }
  /* iOS Safari auto-zooms any input whose effective font-size is below
     16px on focus. Bumping the composer textarea up to 16px on mobile
     suppresses that zoom without forcing the whole app to disable user
     scaling via the viewport meta tag. */
  .reply-input__field {
    font-size: 16px;
  }
  .comment-input > .reply-input {
    margin-left: 0;
  }
}

/* Mention dropdown: script.js sets data-mention-flip="up" when the
   anchor is near the viewport bottom; we render above instead of below. */
.relative[data-mention-flip="up"] > [role="listbox"] {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 4px;
}

/* ── Panel body (comments view) ─────────────────────────────
   Wrapper for the comments list, header, and composer. Animates
   in from the left when returning from the reply thread view. */
.comments-panel__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

@keyframes comments-panel-body-enter {
  from {
    transform: translateX(-24px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (max-width: 500px) {
  .comments-panel__body {
    animation: comments-panel-body-enter 0.28s ease-out;
  }
}

/* `CommentText` wrapper. `data-expanded` is Dioxus-controlled (toggle
   button); `data-truncatable` is JS-controlled (set after measuring
   that the rendered text exceeds 3 lines). The expand button is hidden
   unless `data-truncatable="true"` so short comments don't show a
   useless toggle. */
.comment-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  width: 100%;
}
.comment-text[data-expanded="false"] .comment-item__text {
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.comment-item__expand {
  margin-top: 2px;
  padding: 2px 0;
  background: transparent;
  border: none;
  color: var(--accent, #fcb300);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  align-self: flex-start;
  display: none;
}
.comment-text[data-truncatable="true"] .comment-item__expand {
  display: inline-block;
}
.comment-item__expand:hover {
  text-decoration: underline;
}



/* === src/features/spaces/pages/index/action_pages/poll/checkbox_choice/style.css === */
/* Checkbox reuses option-multi CSS from multi_choice */


/* === src/features/spaces/pages/index/action_pages/poll/dropdown_choice/style.css === */
/* Dropdown reuses subjective-input CSS from subjective */


/* === src/features/spaces/pages/index/action_pages/poll/linear_scale/style.css === */
.scale-wrap { display: flex; flex-direction: column; gap: 16px; padding: 8px 0; }
.scale-labels { display: flex; justify-content: space-between; }
.scale-label { font-size: 12px; font-weight: 600; color: var(--dark, #8888a8) var(--light, #6b6b8a); max-width: 120px; }
.scale-label--min { text-align: left; }
.scale-label--max { text-align: right; }
.scale-track { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.scale-point {
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--dark, rgba(255,255,255,0.03)) var(--light, rgba(0,0,0,0.03));
  border: 1px solid var(--dark, rgba(255,255,255,0.08)) var(--light, rgba(0,0,0,0.08));
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
  color: var(--dark, #8888a8) var(--light, #6b6b8a);
  cursor: pointer; transition: all 0.25s ease; padding: 0;
}
.scale-point:hover { background: rgba(129,140,248,0.06); border-color: rgba(129,140,248,0.2); transform: translateY(-2px); }
.scale-point[data-selected="true"] { background: #818cf8; border-color: #818cf8; color: #fff; box-shadow: 0 4px 20px rgba(129,140,248,0.3); transform: translateY(-3px) scale(1.08); }
.scale-point[data-in-range="true"] { background: rgba(129,140,248,0.08); border-color: rgba(129,140,248,0.25); color: #818cf8; }
.scale-point[data-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
@media (max-width: 600px) { .scale-point { width: 44px; height: 44px; font-size: 14px; } }


/* === src/features/spaces/pages/index/action_pages/poll/multi_choice/style.css === */
.options-multi { display: flex; flex-direction: column; gap: 10px; }
.option-multi {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px;
  background: var(--dark, rgba(255,255,255,0.02)) var(--light, rgba(0,0,0,0.02));
  border: 1px solid var(--dark, rgba(255,255,255,0.08)) var(--light, rgba(0,0,0,0.08));
  cursor: pointer; transition: all 0.25s ease;
}
.option-multi:hover { background: rgba(129,140,248,0.04); border-color: rgba(129,140,248,0.2); }
.option-multi[data-selected="true"] {
  background: var(--dark, rgba(99,102,241,0.15)) var(--light, rgba(99,102,241,0.08));
  border-color: var(--dark, rgba(99,102,241,0.5)) var(--light, rgba(99,102,241,0.4));
  box-shadow: 0 0 20px rgba(129,140,248,0.12);
}
.option-multi__checkbox {
  width: 20px; height: 20px; border-radius: 6px;
  border: 2px solid var(--dark, rgba(255,255,255,0.08)) var(--light, rgba(0,0,0,0.08));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.25s;
}
.option-multi[data-selected="true"] .option-multi__checkbox { border-color: #818cf8; background: #818cf8; }
.option-multi__check svg { width: 12px; height: 12px; color: #fff; opacity: 0; transform: scale(0); transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1); }
.option-multi[data-selected="true"] .option-multi__check svg { opacity: 1; transform: scale(1); }
/* A poll choice is the question content, not a caption -- truncating it to
   one line with an ellipsis hid what the option actually said, so a long
   choice was unreadable and unanswerable. Wrap instead. */
.option-multi__label {
  font-size: 15px; font-weight: 500;
  color: var(--dark, #f0f0f5) var(--light, #1a1a2e);
  flex: 1; min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
  text-align: left;
}
.option-multi[data-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.option-multi__other-input {
  flex: 1;
  padding: 6px 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--dark, #f0f0f5) var(--light, #1a1a2e);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
}
.option-multi__other-input::placeholder {
  color: var(--dark, #55556a) var(--light, #9999aa);
}


/* === src/features/spaces/pages/index/action_pages/poll/single_choice/style.css === */
.options-single { display: flex; flex-direction: column; gap: 10px; }
.option-single {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px;
  background: var(--dark, rgba(255,255,255,0.02)) var(--light, rgba(0,0,0,0.02));
  border: 1px solid var(--dark, rgba(255,255,255,0.08)) var(--light, rgba(0,0,0,0.08));
  cursor: pointer; transition: all 0.25s ease; position: relative; overflow: hidden;
}
.option-single:hover { background: rgba(129,140,248,0.04); border-color: rgba(129,140,248,0.2); }
.option-single[data-selected="true"] {
  background: var(--dark, rgba(99,102,241,0.15)) var(--light, rgba(99,102,241,0.08));
  border-color: var(--dark, rgba(99,102,241,0.5)) var(--light, rgba(99,102,241,0.4));
  box-shadow: 0 0 20px rgba(129,140,248,0.12);
}
.option-single__radio {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--dark, rgba(255,255,255,0.08)) var(--light, rgba(0,0,0,0.08));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.25s;
}
.option-single[data-selected="true"] .option-single__radio { border-color: #818cf8; }
.option-single__radio-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #818cf8;
  transform: scale(0); transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.option-single[data-selected="true"] .option-single__radio-dot { transform: scale(1); }
/* A poll choice is the question content, not a caption -- truncating it to
   one line with an ellipsis hid what the option actually said, so a long
   choice was unreadable and unanswerable. Wrap instead. */
.option-single__label {
  font-size: 15px; font-weight: 500;
  color: var(--dark, #f0f0f5) var(--light, #1a1a2e);
  flex: 1; min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
  text-align: left;
}
.option-single__letter {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--dark, #55556a) var(--light, #9999aa);
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--dark, rgba(255,255,255,0.04)) var(--light, rgba(0,0,0,0.04));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.25s;
}
.option-single[data-selected="true"] .option-single__letter { background: rgba(99,102,241,0.08); color: #818cf8; }
.option-single[data-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.option-single__other-input {
  flex: 1;
  padding: 6px 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--dark, #f0f0f5) var(--light, #1a1a2e);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
}
.option-single__other-input::placeholder {
  color: var(--dark, #55556a) var(--light, #9999aa);
}


/* === src/features/spaces/pages/index/action_pages/poll/style.css === */
/* ── Poll Overview (Screen 1) ───────────────────── */
.poll-overview {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 28px;
  gap: 32px;
  overflow-y: auto;
  animation: pollOverviewFadeIn 0.6s ease;
}
@keyframes pollOverviewFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.poll-overview-ring {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}
.poll-overview-ring__svg {
  width: 140px;
  height: 140px;
  transform: rotate(-90deg);
}
.poll-overview-ring__bg {
  fill: none;
  stroke: var(--dark, rgba(255, 255, 255, 0.04))
    var(--light, rgba(0, 0, 0, 0.04));
  stroke-width: 6;
}
.poll-overview-ring__fill {
  fill: none;
  stroke: #818cf8;
  stroke-width: 6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 16px rgba(129, 140, 248, 0.3));
  stroke-dasharray: 376.99;
  stroke-dashoffset: 376.99;
  animation: pollRingDraw 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}
@keyframes pollRingDraw {
  to {
    stroke-dashoffset: 0;
  }
}
.poll-overview-ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.poll-overview-ring__number {
  font-family: "Orbitron", sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #818cf8;
}
.poll-overview-ring__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark, #55556a) var(--light, #9999aa);
}

.poll-overview-card {
  max-width: 520px;
  width: 100%;
  padding: 32px;
  background: var(--dark, rgba(16, 16, 32, 0.7))
    var(--light, rgba(255, 255, 255, 0.9));
  backdrop-filter: blur(16px);
  border: 1px solid rgba(129, 140, 248, 0.18);
  border-radius: 20px;
  box-shadow:
    0 12px 60px var(--dark, rgba(0, 0, 0, 0.4))
      var(--light, rgba(0, 0, 0, 0.08)),
    0 0 40px rgba(129, 140, 248, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  animation: pollCardSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
@keyframes pollCardSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.poll-overview-card__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--dark, #f0f0f5) var(--light, #1a1a2e);
}
.poll-overview-card__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--dark, #8888a8) var(--light, #6b6b8a);
  max-width: 420px;
}
.poll-overview-card__title {
  font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--dark, #f0f0f5) var(--light, #1a1a2e);
  width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.poll-overview-card__desc {
  font-size: 14px; line-height: 1.7; color: var(--dark, #8888a8) var(--light, #6b6b8a); max-width: 420px;
  width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}

.poll-overview-stats {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}
.poll-overview-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 20px;
  border-radius: 12px;
  background: rgba(129, 140, 248, 0.04);
  border: 1px solid rgba(129, 140, 248, 0.1);
  min-width: 90px;
  transition: all 0.3s;
}
.poll-overview-stat:hover {
  background: rgba(129, 140, 248, 0.08);
  border-color: rgba(129, 140, 248, 0.2);
  transform: translateY(-2px);
}
.poll-overview-stat__value {
  font-family: "Orbitron", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #818cf8;
}
.poll-overview-stat__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark, #55556a) var(--light, #9999aa);
}

.poll-begin-btn {
  padding: 14px 40px;
  border-radius: 12px;
  border: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #818cf8, #6366f1);
  color: #fff;
  box-shadow: 0 4px 24px rgba(129, 140, 248, 0.25);
}
.poll-begin-btn:hover {
  box-shadow: 0 8px 40px rgba(129, 140, 248, 0.25);
  transform: translateY(-2px);
}
.poll-begin-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

/* ── Poll Viewer — Main Layout ───────────────────── */

.poll-arena {
  min-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  background: var(--dark, #06060e) var(--light, #f5f5f8);
  color: var(--dark, #f0f0f5) var(--light, #1a1a2e);
  font-family: "Outfit", sans-serif;
  overflow: hidden;
}
.poll-arena::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 60% at 50% 30%,
    rgba(129, 140, 248, 0.06) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Header ─────────────────────────────────────── */
.poll-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--dark, rgba(255, 255, 255, 0.06))
    var(--light, rgba(0, 0, 0, 0.06));
}
.poll-header__left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.poll-header__back {
  width: 36px;
  height: 36px;
  /* Fixed-size flex child: without this the default `flex-shrink: 1` lets a
     long sibling title squash the square button into an oval. */
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--dark, rgba(12, 12, 26, 0.65))
    var(--light, rgba(255, 255, 255, 0.85));
  border: 1px solid var(--dark, rgba(255, 255, 255, 0.06))
    var(--light, rgba(0, 0, 0, 0.06));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s;
  color: var(--dark, #8888a8) var(--light, #6b6b8a);
  padding: 0;
}
.poll-header__back:hover {
  border-color: rgba(129, 140, 248, 0.3);
  color: #818cf8;
}
.poll-header__back svg {
  width: 18px;
  height: 18px;
}
.poll-header__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.poll-header__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #818cf8;
}
.poll-header__type svg {
  width: 14px;
  height: 14px;
}
.poll-header__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--dark, #f0f0f5) var(--light, #1a1a2e);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.poll-header__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.poll-header__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(110, 237, 216, 0.08);
  border: 1px solid rgba(110, 237, 216, 0.15);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6eedd8;
}
.poll-header__status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6eedd8;
  box-shadow: 0 0 6px #6eedd8;
}
.poll-header__status--not-started {
  background: var(--dark, rgba(136, 136, 168, 0.08))
    var(--light, rgba(107, 107, 138, 0.08));
  border-color: var(--dark, rgba(136, 136, 168, 0.15))
    var(--light, rgba(107, 107, 138, 0.15));
  color: var(--dark, #8888a8) var(--light, #6b6b8a);
}
.poll-header__status--not-started::before {
  background: var(--dark, #8888a8) var(--light, #6b6b8a);
  box-shadow: none;
}
.poll-header__status--finished {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
.poll-header__status--finished::before {
  background: #ef4444;
  box-shadow: 0 0 6px #ef4444;
}
.poll-header__reward {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(252, 179, 0, 0.08);
  border: 1px solid rgba(252, 179, 0, 0.15);
  font-size: 12px;
  font-weight: 700;
  color: #fcb300;
}
.poll-header__reward svg {
  width: 14px;
  height: 14px;
}
.poll-header__counter {
  font-size: 12px;
  font-weight: 600;
  color: var(--dark, #8888a8) var(--light, #6b6b8a);
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--dark, rgba(255, 255, 255, 0.04))
    var(--light, rgba(0, 0, 0, 0.04));
}

/* ── Question Card (scoped to poll-arena) ──────── */
.poll-arena .question-stage {
  position: relative;
  z-index: 10;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 28px 120px;
  gap: 24px;
  overflow-y: auto;
  scrollbar-width: none;
  min-height: 0;
}
.poll-arena .question-stage::before {
  content: "";
  flex: 1 1 0;
}
.poll-arena .question-stage::after {
  content: "";
  flex: 1 1 0;
}
.poll-arena .question-stage::-webkit-scrollbar {
  display: none;
}
.poll-arena .question-card {
  width: 100%;
  max-width: 680px;
  background: var(--dark, rgba(12, 12, 26, 0.65))
    var(--light, rgba(255, 255, 255, 0.72));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(129, 140, 248, 0.18);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow:
    0 8px 40px var(--dark, rgba(0, 0, 0, 0.3)) var(--light, rgba(0, 0, 0, 0.06)),
    0 0 30px rgba(129, 140, 248, 0.12);
  animation: poll-card-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes poll-card-enter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.poll-arena .question-card__number {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #818cf8;
  display: flex;
  align-items: center;
  gap: 8px;
}
.poll-arena .question-card__number::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(129, 140, 248, 0.18), transparent);
}
.poll-arena .question-card__required {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.poll-arena .question-card__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  /* white-space: nowrap; */
  color: var(--dark, #f0f0f5) var(--light, #1a1a2e);
}
.poll-arena .question-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--dark, #8888a8) var(--light, #6b6b8a);
}
.poll-arena .question-card__image {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--dark, rgba(255, 255, 255, 0.06))
    var(--light, rgba(0, 0, 0, 0.06));
}

/* ── Footer ─────────────────────────────────────── */
.poll-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 28px 24px;
  border-top: 1px solid var(--dark, rgba(255, 255, 255, 0.06))
    var(--light, rgba(0, 0, 0, 0.06));
  backdrop-filter: blur(16px);
  background: var(--dark, rgba(6, 6, 14, 0.8))
    var(--light, rgba(245, 245, 248, 0.8));
}
.poll-footer__left {
  display: flex;
  align-items: center;
}
.poll-footer__right {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ── Question Dots (in footer) ─── */
.poll-question-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.poll-question-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dark, rgba(255, 255, 255, 0.1))
    var(--light, rgba(0, 0, 0, 0.1));
  transition: all 0.3s;
}
.poll-question-dot--current {
  background: #818cf8;
  box-shadow: 0 0 6px rgba(129, 140, 248, 0.4);
  transform: scale(1.2);
}
.poll-question-dot--answered {
  background: rgba(129, 140, 248, 0.5);
}
.poll-btn {
  padding: 10px 24px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.poll-btn svg {
  width: 16px;
  height: 16px;
}
.poll-btn--back {
  background: var(--dark, rgba(12, 12, 26, 0.65))
    var(--light, rgba(255, 255, 255, 0.85));
  border: 1px solid var(--dark, rgba(255, 255, 255, 0.06))
    var(--light, rgba(0, 0, 0, 0.06));
  color: var(--dark, #8888a8) var(--light, #6b6b8a);
}
.poll-btn--back:hover {
  border-color: rgba(129, 140, 248, 0.2);
  color: var(--dark, #f0f0f5) var(--light, #1a1a2e);
}
.poll-btn--next {
  background: var(--dark, rgba(12, 12, 26, 0.65))
    var(--light, rgba(255, 255, 255, 0.85));
  border: 1px solid rgba(129, 140, 248, 0.18);
  color: #818cf8;
}
.poll-btn--next:hover {
  background: rgba(129, 140, 248, 0.1);
  box-shadow: 0 0 16px rgba(129, 140, 248, 0.12);
}
.poll-btn--next:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  box-shadow: none;
}
.poll-btn--submit {
  background: linear-gradient(135deg, #fcb300, #e5a200);
  color: #0a0a0a;
  box-shadow: 0 2px 16px rgba(252, 179, 0, 0.25);
}
.poll-btn--submit:hover {
  box-shadow: 0 4px 24px rgba(252, 179, 0, 0.4);
  transform: translateY(-1px);
}
.poll-btn--submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── Banner ─────────────────────────────────────── */
.poll-banner {
  margin: 16px 28px 0;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 10;
}
.poll-banner--info {
  background: rgba(129, 140, 248, 0.08);
  border: 1px solid rgba(129, 140, 248, 0.18);
  color: #818cf8;
}
.poll-banner--warning {
  background: rgba(252, 179, 0, 0.08);
  border: 1px solid rgba(252, 179, 0, 0.2);
  color: #fcb300;
}
.poll-banner svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── Confirm Modal ──────────────────────────────── */
.poll-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: poll-overlay-in 0.2s ease;
}
@keyframes poll-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.poll-confirm-modal {
  width: 100%;
  max-width: 420px;
  margin: 0 20px;
  background: var(--dark, rgba(16, 16, 32, 0.95))
    var(--light, rgba(255, 255, 255, 0.98));
  backdrop-filter: blur(24px);
  border: 1px solid var(--dark, rgba(255, 255, 255, 0.06))
    var(--light, rgba(0, 0, 0, 0.06));
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  animation: poll-modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes poll-modal-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.poll-confirm-modal__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(252, 179, 0, 0.1);
  border: 1px solid rgba(252, 179, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fcb300;
}
.poll-confirm-modal__icon svg {
  width: 24px;
  height: 24px;
}
.poll-confirm-modal__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark, #f0f0f5) var(--light, #1a1a2e);
}
.poll-confirm-modal__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--dark, #8888a8) var(--light, #6b6b8a);
}
.poll-confirm-modal__actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}
.poll-confirm-modal__actions .poll-btn {
  flex: 1;
  justify-content: center;
}

/* ── Disabled state ─────────────────────────────── */
.option-single[data-disabled="true"],
.option-multi[data-disabled="true"],
.scale-point[data-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 600px) {
  .poll-header {
    padding: 16px;
  }
  .poll-header__title {
    font-size: 15px;
  }
  .poll-progress {
    padding: 0 16px;
  }
  .poll-arena .question-stage {
    padding: 20px 16px 100px;
  }
  .poll-arena .question-card {
    padding: 24px 20px;
    border-radius: 16px;
  }
  .poll-arena .question-card__title {
    font-size: 18px;
  }
  .poll-footer {
    padding: 12px 16px 20px;
  }
}


/* === src/features/spaces/pages/index/action_pages/poll/subjective/style.css === */
.subjective-wrap { display: flex; flex-direction: column; gap: 8px; }
.subjective-input,
.subjective-textarea {
  width: 100%; padding: 16px; border-radius: 12px;
  background: var(--dark, rgba(255,255,255,0.02)) var(--light, rgba(0,0,0,0.02));
  border: 1px solid var(--dark, rgba(255,255,255,0.08)) var(--light, rgba(0,0,0,0.08));
  color: var(--dark, #f0f0f5) var(--light, #1a1a2e);
  font-family: 'Outfit', sans-serif; font-size: 15px; line-height: 1.7;
  transition: border-color 0.25s; outline: none;
}
.subjective-textarea { min-height: 160px; resize: vertical; }
.subjective-input::placeholder,
.subjective-textarea::placeholder { color: var(--dark, #55556a) var(--light, #9999aa); }
.subjective-input:focus,
.subjective-textarea:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129,140,248,0.12); }
.subjective-counter { text-align: right; font-size: 12px; color: var(--dark, #55556a) var(--light, #9999aa); letter-spacing: 0.05em; }


/* === src/features/spaces/pages/index/action_pages/quiz/style.css === */
/* ── Quiz Action Arena ────────────────────────────── */

/* ── Arena shell ─────────────────────────────────── */
.quiz-arena {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
}
.quiz-arena::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(168,85,247,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 120%, rgba(110,237,216,0.03) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, var(--dark, #06060e) var(--light, #f4f3ef) 0%, var(--dark, #06060e) var(--light, #f4f3ef) 100%);
}

/* ── Top bar ─────────────────────────────────────── */
.quiz-topbar {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px; flex-shrink: 0;
}
.quiz-topbar__left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.quiz-topbar__back {
  width: 40px; height: 40px; border-radius: 10px;
  /* A flex item defaults to `flex-shrink: 1`, so a long title beside it
     squeezed this fixed square into an oval. Its siblings in the same topbar
     (badge, progress ring) already carry this — the back button didn't. */
  flex-shrink: 0;
  background: var(--dark, rgba(12,12,26,0.65)) var(--light, rgba(255,255,255,0.72));
  backdrop-filter: blur(16px);
  border: 1px solid var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.25s ease; padding: 0;
}
.quiz-topbar__back:hover { border-color: rgba(168,85,247,0.18); }
.quiz-topbar__back svg { width: 18px; height: 18px; color: var(--dark, #8888a8) var(--light, #6b6b80); transition: color 0.2s; }
.quiz-topbar__back:hover svg { color: #a855f7; }
.quiz-topbar__title {
  font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dark, #f0f0f5) var(--light, #12121a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.quiz-topbar__badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(168,85,247,0.08); color: #a855f7; border: 1px solid rgba(168,85,247,0.18);
  white-space: nowrap; flex-shrink: 0;
}
.quiz-topbar__badge svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Hide the "❓ Quiz" type badge on mobile — the topbar is too cramped on
   narrow screens and the title already conveys context. */
@media (max-width: 500px) {
  .quiz-topbar__badge { display: none; }
}
.quiz-topbar__right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

/* ── Progress ring ───────────────────────────────── */
.progress-ring { position: relative; width: 48px; height: 48px; flex-shrink: 0; }
.progress-ring__svg { width: 48px; height: 48px; transform: rotate(-90deg); }
.progress-ring__bg { fill: none; stroke: var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.06)); stroke-width: 4; }
.progress-ring__fill {
  fill: none; stroke: #a855f7; stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.16,1,0.3,1);
  filter: drop-shadow(0 0 6px rgba(168,85,247,0.12));
}
.progress-ring__label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700;
  color: var(--dark, #f0f0f5) var(--light, #12121a);
}

/* ── Attempts chip ───────────────────────────────── */
.attempts-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 100px;
  background: var(--dark, rgba(12,12,26,0.65)) var(--light, rgba(255,255,255,0.72));
  backdrop-filter: blur(16px);
  border: 1px solid var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08));
  font-size: 11px; font-weight: 600; color: var(--dark, #8888a8) var(--light, #6b6b80);
  white-space: nowrap; flex-shrink: 0;
}
.attempts-chip svg { width: 14px; height: 14px; color: #a855f7; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════
   SCREEN 1 — OVERVIEW
   ═══════════════════════════════════════════════════ */
.quiz-overview {
  position: relative; z-index: 10;
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 28px; gap: 32px; overflow-y: auto;
}

.overview-ring { position: relative; width: 140px; height: 140px; flex-shrink: 0; }
.overview-ring__svg { width: 140px; height: 140px; transform: rotate(-90deg); }
.overview-ring__bg { fill: none; stroke: var(--dark, rgba(255,255,255,0.04)) var(--light, rgba(0,0,0,0.04)); stroke-width: 6; }
.overview-ring__fill {
  fill: none; stroke: #a855f7; stroke-width: 6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 12px rgba(168,85,247,0.25));
}
.overview-ring__center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.overview-ring__number { font-family: 'Orbitron', sans-serif; font-size: 32px; font-weight: 800; color: #a855f7; }
.overview-ring__label { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark, #55556a) var(--light, #9999aa); }

.overview-card {
  max-width: 520px; width: 100%; padding: 32px;
  background: var(--dark, rgba(12,12,26,0.65)) var(--light, rgba(255,255,255,0.72));
  backdrop-filter: blur(16px);
  border: 1px solid rgba(168,85,247,0.18); border-radius: 20px;
  box-shadow: 0 12px 60px var(--dark, rgba(0,0,0,0.4)) var(--light, rgba(0,0,0,0.08)), 0 0 40px rgba(168,85,247,0.12);
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  text-align: center;
}
.overview-card__title { font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--dark, #f0f0f5) var(--light, #12121a); }
.overview-card__desc { font-size: 14px; line-height: 1.7; color: var(--dark, #8888a8) var(--light, #6b6b80); max-width: 420px; }

.overview-stats { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.overview-stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 20px; border-radius: 12px;
  background: rgba(168,85,247,0.04); border: 1px solid rgba(168,85,247,0.1); min-width: 90px;
}
.overview-stat__value { font-family: 'Orbitron', sans-serif; font-size: 18px; font-weight: 700; color: #a855f7; }
.overview-stat__label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark, #55556a) var(--light, #9999aa); }

.overview-files { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; width: 100%; }
.overview-file {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px;
  background: var(--dark, rgba(255,255,255,0.03)) var(--light, rgba(0,0,0,0.03));
  border: 1px solid var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08));
  font-size: 12px; font-weight: 500; color: var(--dark, #8888a8) var(--light, #6b6b80);
  cursor: pointer; transition: all 0.2s; text-decoration: none;
}
.overview-file:hover { border-color: rgba(168,85,247,0.18); color: #a855f7; }
.overview-file svg { width: 14px; height: 14px; flex-shrink: 0; }

.quiz-begin-btn {
  padding: 14px 40px; border-radius: 12px; border: none;
  font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; transition: all 0.3s ease;
  background: linear-gradient(135deg, #a855f7, #7c3aed); color: #fff;
  box-shadow: 0 4px 24px rgba(168,85,247,0.25);
}
.quiz-begin-btn:hover { box-shadow: 0 8px 40px rgba(168,85,247,0.25); transform: translateY(-2px); }
.quiz-begin-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }

/* ═══════════════════════════════════════════════════
   SCREEN 2 — QUESTION
   ═══════════════════════════════════════════════════ */
.quiz-question-area {
  position: relative; z-index: 10;
  flex: 1; display: flex; flex-direction: column;
  align-items: center;
  padding: 24px 28px 120px; gap: 24px;
  overflow-y: auto; scrollbar-width: none;
}
.quiz-question-area::-webkit-scrollbar { display: none; }

.question-card {
  max-width: 640px; width: 100%; padding: 32px;
  background: var(--dark, rgba(12,12,26,0.65)) var(--light, rgba(255,255,255,0.72));
  backdrop-filter: blur(16px);
  border: 1px solid rgba(168,85,247,0.18); border-radius: 20px;
  box-shadow: 0 8px 40px var(--dark, rgba(0,0,0,0.3)) var(--light, rgba(0,0,0,0.06)), 0 0 30px rgba(168,85,247,0.12);
  display: flex; flex-direction: column; gap: 24px;
  animation: quizCardSlideIn 0.4s cubic-bezier(0.16,1,0.3,1);
}
@keyframes quizCardSlideIn {
  0% { opacity: 0; transform: translateX(40px) scale(0.96); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

.question-header { display: flex; align-items: center; justify-content: space-between; }
.question-number { font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #a855f7; }
.question-required {
  padding: 3px 8px; border-radius: 100px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(252,179,0,0.1); color: #fcb300; border: 1px solid rgba(252,179,0,0.2);
}
.question-title { font-size: 22px; font-weight: 700; line-height: 1.4; color: var(--dark, #f0f0f5) var(--light, #12121a); text-align: center; }
.question-desc { font-size: 13px; line-height: 1.6; color: var(--dark, #8888a8) var(--light, #6b6b80); text-align: center; }

/* ── Option tiles ──────────────────────────────── */
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.option-grid--single { grid-template-columns: 1fr; }

.option-tile {
  position: relative; display: flex; align-items: center;
  min-height: 64px; padding: 14px 18px;
  background: var(--dark, rgba(255,255,255,0.03)) var(--light, rgba(0,0,0,0.02));
  border: 1px solid var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08));
  border-radius: 14px; cursor: pointer; transition: all 0.3s ease; overflow: hidden;
}
.option-tile:hover { border-color: rgba(168,85,247,0.18); background: rgba(168,85,247,0.04); }
.option-tile[aria-selected="true"] {
  border-color: #a855f7;
  background: linear-gradient(135deg, rgba(168,85,247,0.12), rgba(124,58,237,0.08));
  box-shadow: 0 4px 20px rgba(168,85,247,0.12), inset 0 0 20px rgba(168,85,247,0.06);
}

.option-tile__accent {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: transparent; border-radius: 4px 0 0 4px; transition: background 0.3s;
}
.option-tile[aria-selected="true"] .option-tile__accent { background: #a855f7; box-shadow: 0 0 8px rgba(168,85,247,0.12); }

.option-tile__content { flex: 1; display: flex; align-items: center; gap: 12px; padding-left: 8px; }
.option-tile__letter {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700;
  background: var(--dark, rgba(255,255,255,0.04)) var(--light, rgba(0,0,0,0.04));
  border: 1px solid var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08));
  color: var(--dark, #55556a) var(--light, #9999aa); transition: all 0.3s; flex-shrink: 0;
}
.option-tile[aria-selected="true"] .option-tile__letter { background: #a855f7; border-color: #a855f7; color: #fff; }

/* Checkbox indicator for multiple choice */
.option-tile__checkbox {
  width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid var(--dark, #55556a) var(--light, #9999aa);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s; flex-shrink: 0;
}
.option-tile__checkbox svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity 0.3s; }
.option-tile[aria-selected="true"] .option-tile__checkbox {
  background: #a855f7; border-color: #a855f7;
}
.option-tile[aria-selected="true"] .option-tile__checkbox svg { opacity: 1; }

/* The quiz card centres its title and description, and the choice text
   inherited that: a choice long enough to wrap came out centred while short
   ones sat left, so the list had no common left edge to read down. Choices
   are read as a list -- align them left and let them fill the row. */
.option-tile__text {
  font-size: 15px; font-weight: 500;
  color: var(--dark, #8888a8) var(--light, #6b6b80);
  transition: color 0.3s;
  flex: 1; min-width: 0;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.option-tile[aria-selected="true"] .option-tile__text { color: var(--dark, #f0f0f5) var(--light, #12121a); font-weight: 600; }

.option-tile__check {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; transition: all 0.3s; flex-shrink: 0;
}
.option-tile[aria-selected="true"] .option-tile__check { background: #a855f7; }
.option-tile__check svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity 0.3s; }
.option-tile[aria-selected="true"] .option-tile__check svg { opacity: 1; }

/* ── Reveal correct / wrong answers once the quiz is closed ── */
.option-tile[data-correct="true"] {
  border-color: #22c55e;
  background: linear-gradient(135deg, rgba(34,197,94,0.14), rgba(22,163,74,0.08));
  box-shadow: 0 4px 20px rgba(34,197,94,0.14), inset 0 0 20px rgba(34,197,94,0.06);
}
.option-tile[data-correct="true"] .option-tile__accent { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.2); }
.option-tile[data-correct="true"] .option-tile__letter { background: #22c55e; border-color: #22c55e; color: #fff; }
.option-tile[data-correct="true"] .option-tile__checkbox { background: #22c55e; border-color: #22c55e; }
.option-tile[data-correct="true"] .option-tile__checkbox svg { opacity: 1; }
.option-tile[data-correct="true"] .option-tile__text { color: var(--dark, #f0f0f5) var(--light, #12121a); font-weight: 600; }
.option-tile[data-correct="true"] .option-tile__check { background: #22c55e; }
.option-tile[data-correct="true"] .option-tile__check svg { opacity: 1; }

.option-tile[data-user-wrong="true"] {
  border-color: #ef4444;
  background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(220,38,38,0.06));
  box-shadow: 0 4px 20px rgba(239,68,68,0.14), inset 0 0 20px rgba(239,68,68,0.06);
}
.option-tile[data-user-wrong="true"] .option-tile__accent { background: #ef4444; }
.option-tile[data-user-wrong="true"] .option-tile__letter { background: #ef4444; border-color: #ef4444; color: #fff; }
.option-tile[data-user-wrong="true"] .option-tile__checkbox { background: #ef4444; border-color: #ef4444; }
.option-tile[data-user-wrong="true"] .option-tile__check { background: #ef4444; }

/* ── Bottom bar ──────────────────────────────────── */
.quiz-bottom {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
  background: var(--dark, rgba(12,12,26,0.85)) var(--light, rgba(255,255,255,0.9));
  backdrop-filter: blur(24px);
  border-top: 1px solid var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08));
}
.quiz-bottom__left { display: flex; align-items: center; gap: 12px; }
.quiz-bottom__right { display: flex; align-items: center; gap: 10px; }

.question-dots { display: flex; gap: 6px; align-items: center; }
.question-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dark, rgba(255,255,255,0.1)) var(--light, rgba(0,0,0,0.1));
  transition: all 0.3s ease;
}
.question-dot--answered { background: #a855f7; opacity: 0.5; }
.question-dot--current { width: 24px; border-radius: 4px; background: #a855f7; opacity: 1; box-shadow: 0 0 8px rgba(168,85,247,0.12); }

.quiz-nav-btn {
  padding: 10px 24px; border-radius: 10px;
  font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; transition: all 0.25s ease;
  border: 1px solid var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08));
  background: var(--dark, rgba(12,12,26,0.65)) var(--light, rgba(255,255,255,0.72));
  color: var(--dark, #8888a8) var(--light, #6b6b80);
}
.quiz-nav-btn:hover { border-color: rgba(168,85,247,0.18); color: #a855f7; }
.quiz-nav-btn--primary {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff; border-color: transparent; box-shadow: 0 2px 12px rgba(168,85,247,0.12);
}
.quiz-nav-btn--primary:hover { box-shadow: 0 4px 24px rgba(168,85,247,0.25); transform: translateY(-1px); }
.quiz-nav-btn--submit {
  background: linear-gradient(135deg, #fcb300, #e5a200);
  color: #0a0a0a; border-color: transparent; box-shadow: 0 2px 12px rgba(252,179,0,0.2);
}
.quiz-nav-btn--submit:hover { box-shadow: 0 4px 24px rgba(252,179,0,0.35); transform: translateY(-1px); }
.quiz-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }

/* ── Banner messages ─────────────────────────────── */
.quiz-banner {
  margin: 16px 28px 0;
  padding: 12px 20px; border-radius: 12px;
  font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 10px;
  position: relative; z-index: 10;
}
.quiz-banner--info { background: rgba(168,85,247,0.08); border: 1px solid rgba(168,85,247,0.18); color: #a855f7; }
.quiz-banner--success { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.18); color: #22c55e; }
.quiz-banner--warning { background: rgba(252,179,0,0.08); border: 1px solid rgba(252,179,0,0.18); color: #fcb300; }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 500px) {
  .quiz-topbar { padding: 16px; }
  .quiz-topbar__title { font-size: 12px; }
  .overview-card { padding: 24px 20px; }
  .overview-card__title { font-size: 20px; }
  .overview-ring { width: 100px; height: 100px; }
  .overview-ring__svg { width: 100px; height: 100px; }
  .overview-ring__number { font-size: 24px; }
  .overview-stats { gap: 12px; }
  .overview-stat { padding: 10px 14px; min-width: 70px; }
  .overview-stat__value { font-size: 15px; }
  .question-card { padding: 24px 20px; }
  .question-title { font-size: 18px; }
  .option-grid { grid-template-columns: 1fr; }
  .option-tile { min-height: 56px; padding: 12px 14px; }
  .quiz-bottom { padding: 14px 16px; }
  .quiz-nav-btn { padding: 9px 18px; font-size: 10px; }
  .quiz-question-area { padding: 0 16px 120px; }
  /* Overview screen lacked a bottom inset, so the last file/begin button got
     clipped behind the gesture nav. `safe center` keeps short content
     centered but falls back to top-aligned scrolling when it overflows. */
  .quiz-overview { justify-content: safe center; padding: 8px 16px 48px; }
  /* Symmetric banner spacing — was `16px 28px 0` (glued to content below,
     large gap above). */
  .quiz-banner { margin: 10px 16px; }
}


/* === src/features/spaces/pages/index/arena_topbar/style.css === */
/* ── Arena Top Bar ───────────────────────────────── */

.arena-topbar {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px; flex-shrink: 0;
}
.arena-topbar__logo {
  width: 40px; height: 40px; border-radius: 10px; object-fit: cover;
  border: 1px solid rgba(252,179,0,0.15);
  box-shadow: 0 2px 12px var(--dark, rgba(0,0,0,0.3)) var(--light, rgba(0,0,0,0.08));
}
.arena-topbar__title {
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 16px;
  letter-spacing: 0.06em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arena-topbar__brand {
  display: flex; align-items: center; gap: 14px;
  min-width: 0; flex: 1;
}
.arena-topbar__status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 100px;
  background: rgba(110,237,216,0.08); border: 1px solid rgba(110,237,216,0.15);
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: #6eedd8; margin-left: 12px; white-space: nowrap; flex-shrink: 0;
}
.arena-topbar__status::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: #6eedd8; box-shadow: 0 0 6px #6eedd8;
}
.arena-topbar__actions { display: flex; gap: 10px; }

.arena-topbar__role {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(252,179,0,0.08);
  border: 1px solid rgba(252,179,0,0.18);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fcb300;
  margin-left: 8px;
}
.arena-topbar__role svg { width: 12px; height: 12px; }

/* ── HUD Buttons ─────────────────────────────────── */

.hud-btn {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--dark, rgba(12,12,26,0.65)) var(--light, rgba(255,255,255,0.72));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.25s ease; padding: 0;
  position: relative;
}
.hud-btn:hover {
  background: var(--dark, rgba(20,20,40,0.80)) var(--light, rgba(255,255,255,0.88));
  border-color: rgba(252,179,0,0.2); box-shadow: 0 0 20px rgba(252,179,0,0.08);
}
.hud-btn svg { width: 18px; height: 18px; color: var(--dark, #8888a8) var(--light, #6b6b80); transition: color 0.2s; }
.hud-btn:hover svg { color: #fcb300; }
.hud-btn[aria-pressed="true"] { background: rgba(252,179,0,0.12); border-color: rgba(252,179,0,0.3); }
.hud-btn[aria-pressed="true"] svg { color: #fcb300; }

.hud-btn .tooltip {
  position: absolute; bottom: -32px; right: 0;
  padding: 4px 10px;
  background: var(--dark, #0c0c1a) var(--light, #ffffff);
  border: 1px solid var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08));
  border-radius: 6px; font-size: 11px;
  color: var(--dark, #8888a8) var(--light, #6b6b80);
  white-space: nowrap; opacity: 0; pointer-events: none;
  transform: translateY(-4px); transition: all 0.2s ease;
}
.hud-btn:hover .tooltip { opacity: 1; transform: translateY(0); }

/* ── Like button + counter badge ─────────────────── */
/* Small pill on the bottom-right of the HUD button showing the current
   like count; hidden when `likes == 0` (component only renders it when
   positive). The liked state reuses the standard `aria-pressed="true"`
   styling from `.hud-btn` above (gold tint on bg + icon). */
.hud-btn--like { position: relative; }
.hud-btn--like:disabled { opacity: 0.55; cursor: not-allowed; }
.hud-btn__count {
  position: absolute;
  bottom: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 100px;
  background: #fcb300;
  color: #0a0a0a;
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0.02em;
  border: 1px solid var(--dark, #0c0c1a) var(--light, #ffffff);
}

/* ── Creator Switch Button ───────────────────────── */

.hud-btn--creator {
  border-color: rgba(252,179,0,0.25);
  background: var(--dark, rgba(252,179,0,0.08)) var(--light, rgba(252,179,0,0.06));
}
.hud-btn--creator svg { color: #fcb300; }
.hud-btn--creator:hover {
  border-color: rgba(252,179,0,0.4);
  background: var(--dark, rgba(252,179,0,0.15)) var(--light, rgba(252,179,0,0.12));
  box-shadow: 0 0 20px rgba(252,179,0,0.12);
}

/* ── Responsive ──────────────────────────────────── */
/* Keep this block at the end so it overrides default declarations above. */

@media (max-width: 500px) {
  .arena-topbar { padding: 10px 12px; gap: 8px; }
  .arena-topbar__brand { gap: 8px; min-width: 0; }
  .arena-topbar__logo { width: 30px; height: 30px; }
  .arena-topbar__title { font-size: 12px; max-width: 100px; }
  .arena-topbar__status { display: none; }
  /* Admin badge is redundant on mobile: the admin-only action buttons
     (publish/start/finish) already signal the role. Hide it so the title
     and actions fit on one line without overlapping. */
  .arena-topbar__role { display: none; }
  .arena-topbar__actions { gap: 6px; }
  .hud-btn { width: 34px; height: 34px; }
  .hud-btn svg { width: 16px; height: 16px; }
}


/* === src/features/spaces/pages/index/arena_viewer/style.css === */
/* ── Arena Viewer ────────────────────────────────── */
/* Viewer portal: rings, particles, centered portal, author badge, participation cards */

/* Viewer content area: centers portal within the arena column layout */
.arena-viewer {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── Rotating Rings ──────────────────────────────── */

.arena-ring {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  border: 1px solid var(--arena-ring-gold);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring-spin 60s linear infinite;
  z-index: 0;
  pointer-events: none;
}
.arena-ring--mid {
  width: 520px;
  height: 520px;
  border-color: var(--arena-ring-teal);
  animation-duration: 45s;
  animation-direction: reverse;
}
.arena-ring--inner {
  width: 340px;
  height: 340px;
  border-color: var(--arena-ring-inner);
  animation-duration: 30s;
}

@keyframes ring-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── Floating Particles ──────────────────────────── */

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--arena-particle-gold);
  border-radius: 50%;
  opacity: 0;
  animation: particle-float 8s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
  top: 20%;
  left: 15%;
}
.particle--2 { top: 70%; left: 80%; animation-delay: 2s; }
.particle--3 { top: 40%; left: 90%; animation-delay: 4s; width: 3px; height: 3px; background: var(--arena-particle-teal); }
.particle--4 { top: 80%; left: 25%; animation-delay: 1s; }
.particle--5 { top: 10%; left: 60%; animation-delay: 3s; width: 3px; height: 3px; }
.particle--6 { top: 55%; left: 10%; animation-delay: 5s; background: var(--arena-particle-teal); }
.particle--7 { top: 30%; left: 70%; animation-delay: 6s; }
.particle--8 { top: 85%; left: 50%; animation-delay: 7s; width: 3px; height: 3px; background: var(--arena-particle-teal); }

@keyframes particle-float {
  0%   { opacity: 0; transform: translateY(0) scale(1); }
  20%  { opacity: 0.8; }
  80%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-60px) scale(0.5); }
}

/* ── Central Portal ──────────────────────────────── */

.portal {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: portal-enter 1s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
}
.portal[data-dimmed="true"] {
  opacity: 0.15;
  transform: scale(0.96);
  filter: blur(6px);
  pointer-events: none;
}

@keyframes portal-enter {
  from { opacity: 0; transform: scale(0.92) translateY(20px); filter: blur(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

.portal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.portal-logo {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  object-fit: cover;
  border: 2px solid rgba(252,179,0,0.15);
  box-shadow:
    0 0 40px rgba(252,179,0,0.12),
    0 0 80px rgba(252,179,0,0.06),
    0 4px 32px var(--arena-card-shadow);
  margin-bottom: 28px;
  animation: logo-glow 4s ease-in-out infinite alternate;
}

@keyframes logo-glow {
  from { box-shadow: 0 0 40px rgba(252,179,0,0.12), 0 0 80px rgba(252,179,0,0.06), 0 4px 32px rgba(0,0,0,0.5); }
  to   { box-shadow: 0 0 50px rgba(252,179,0,0.18), 0 0 100px rgba(252,179,0,0.08), 0 4px 32px rgba(0,0,0,0.5); }
}

.portal-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arena-text);
  text-align: center;
  margin-bottom: 8px;
  text-shadow: 0 0 40px rgba(252,179,0,0.15);
  /* Bound to the screen so a long title can't overflow the viewport (with
     `nowrap` + center it was clipped on BOTH sides, showing only the middle).
     Wrap normally, break unbroken tokens (e.g. long ids), and clamp to 3 lines
     with an ellipsis for extreme cases. */
  max-width: calc(100vw - 32px);
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0 16px;
  box-sizing: border-box;
}

.portal-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 100px;
  background: rgba(110,237,216,0.08);
  border: 1px solid rgba(110,237,216,0.15);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6eedd8;
  margin-bottom: 40px;
}
.portal-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6eedd8;
  box-shadow: 0 0 8px #6eedd8;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}

/* ── Participate Card ────────────────────────────── */

.participate-card {
  width: 380px;
  padding: 36px 32px 32px;
  background: var(--arena-glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--arena-border);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow:
    0 8px 60px var(--arena-card-shadow),
    0 0 80px rgba(252,179,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.04);
  animation: card-float 6s ease-in-out infinite;
}

@keyframes card-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.participate-card__heading {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--arena-text-muted);
}
.participate-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--arena-text-muted);
  text-align: center;
  max-width: 300px;
}
.participate-card__stats {
  display: flex;
  gap: 32px;
  padding: 16px 0;
  border-top: 1px solid var(--arena-border);
  border-bottom: 1px solid var(--arena-border);
  width: 100%;
  justify-content: center;
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stat__value { font-family: 'Orbitron', sans-serif; font-size: 20px; font-weight: 700; color: var(--arena-text); }
.stat__label { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--arena-text-dim); }

/* ── CTA Buttons ─────────────────────────────────── */

.cta-participate {
  width: 100%; padding: 14px 24px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, #fcb300 0%, #e5a200 100%);
  color: #0a0a0a; font-family: 'Orbitron', sans-serif; font-size: 13px;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; position: relative; overflow: hidden;
  transition: all 0.3s ease; box-shadow: 0 4px 24px rgba(252,179,0,0.25);
}
.cta-participate:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(252,179,0,0.35); }
.cta-participate:active { transform: translateY(0); }
.cta-participate::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: shine-sweep 3s ease-in-out infinite;
}
@keyframes shine-sweep { 0% { left: -100%; } 50% { left: 120%; } 100% { left: 120%; } }

.cta-signin {
  width: 100%; padding: 14px 24px;
  border: 1px solid rgba(252,179,0,0.3); border-radius: 12px;
  background: transparent; color: #fcb300;
  font-family: 'Orbitron', sans-serif; font-size: 13px;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; transition: all 0.3s ease;
}
.cta-signin:hover { background: rgba(252,179,0,0.08); border-color: rgba(252,179,0,0.5); box-shadow: 0 0 24px rgba(252,179,0,0.1); transform: translateY(-2px); }
.cta-signin:active { transform: translateY(0); }

/* ── Author Badge ────────────────────────────────── */

.portal-author {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  z-index: 10; display: flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 8px;
  background: var(--arena-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--arena-border); border-radius: 100px;
  animation: fade-up 1s 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: opacity 0.3s ease;
}
.portal-author[data-dimmed="true"] { opacity: 0.15; pointer-events: none; }

@keyframes fade-up {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.portal-author__avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--arena-border); }
.portal-author__name { font-size: 13px; font-weight: 500; color: var(--arena-text-muted); }
.portal-author__label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--arena-text-dim); }

/* ── Responsive ──────────────────────────────────── */

@media (max-width: 500px) {
  .portal-title { font-size: 20px; letter-spacing: 0.05em; }
  .portal-logo { width: 72px; height: 72px; border-radius: 18px; margin-bottom: 20px; }
  .participate-card { width: calc(100vw - 32px); padding: 28px 20px 24px; }
  .arena-ring { display: none; }
  .portal-author { bottom: 20px; }
}


/* === src/features/spaces/pages/index/leaderboard_panel/style.css === */
/* ── Leaderboard Panel ──────────────────────────── */

.leaderboard-panel {
  --panel-bg: var(--dark, rgba(12,12,26,1.00)) var(--light, rgba(255,255,255,1.00));
  --panel-border: var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08));
  --panel-title: var(--dark, #f0f0f5) var(--light, #12121a);
  --panel-text: var(--dark, #8888a8) var(--light, #6b6b80);
  --panel-text-dim: var(--dark, #55556a) var(--light, #9999aa);
  --panel-card-bg: var(--dark, rgba(255,255,255,0.03)) var(--light, rgba(0,0,0,0.03));
  --panel-close-hover: var(--dark, rgba(20,20,40,0.80)) var(--light, rgba(240,240,240,0.80));
  --panel-shadow: var(--dark, rgba(0,0,0,0.4)) var(--light, rgba(0,0,0,0.08));

  position: absolute;
  top: 0; right: 0;
  width: 520px;
  /* Fill `.arena`, not the viewport — see `.settings-panel`. */
  height: 100%;
  /* Above `.archive-panel` (30): the floating "완료됨" list stayed painted
     over the open leaderboard at 25. */
  z-index: 35;
  background: var(--panel-bg);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border-left: 1px solid var(--panel-border);
  box-shadow: -8px 0 60px var(--panel-shadow);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.leaderboard-panel[data-open="true"] { transform: translateX(0); }

/* Header */
.leaderboard-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
}
.leaderboard-panel__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--panel-title);
}
.leaderboard-panel__close {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s ease;
  color: var(--panel-text); padding: 0;
}
.leaderboard-panel__close:hover {
  background: var(--panel-close-hover);
  border-color: rgba(252,179,0,0.2); color: #fcb300;
}
.leaderboard-panel__close svg { width: 16px; height: 16px; }

/* My rank card */
.leaderboard-my-rank {
  margin: 20px 28px 0;
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(252,179,0,0.06);
  border: 1px solid rgba(252,179,0,0.15);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.leaderboard-my-rank__position {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(252,179,0,0.12);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 16px; font-weight: 700;
  color: #fcb300;
}
.leaderboard-my-rank__info {
  flex: 1; min-width: 0;
}
.leaderboard-my-rank__label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--panel-text-dim);
  margin-bottom: 2px;
}
.leaderboard-my-rank__name {
  font-size: 14px; font-weight: 600;
  color: var(--panel-title);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.leaderboard-my-rank__score {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px; font-weight: 700;
  color: #fcb300;
}
.leaderboard-my-rank__score-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--panel-text-dim);
  margin-top: 2px;
  text-align: right;
}

/* Score breakdown */
.leaderboard-breakdown {
  margin: 12px 28px 0;
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.leaderboard-breakdown__item {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--panel-card-bg);
  border: 1px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.leaderboard-breakdown__value {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px; font-weight: 700;
  color: var(--panel-title);
}
.leaderboard-breakdown__label {
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--panel-text-dim);
}
.leaderboard-breakdown__item--poll .leaderboard-breakdown__value { color: #818cf8; }
.leaderboard-breakdown__item--quiz .leaderboard-breakdown__value { color: #a855f7; }
.leaderboard-breakdown__item--discussion .leaderboard-breakdown__value { color: #22d3ee; }
.leaderboard-breakdown__item--follow .leaderboard-breakdown__value { color: #fb923c; }

/* Scrollable body */
.leaderboard-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px 28px;
  /* Clears the nav bar / home indicator so the last participants scroll fully
     into view (0 on desktop). Matches `.settings-panel__body`. */
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 0;
}
.leaderboard-panel__body::-webkit-scrollbar { width: 4px; }
.leaderboard-panel__body::-webkit-scrollbar-track { background: transparent; }
.leaderboard-panel__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.leaderboard-section-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--panel-text-dim);
  margin-bottom: 12px;
}

/* Podium (top 3) */
.leaderboard-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  padding: 8px 0 20px;
  margin-bottom: 20px;
}
.leaderboard-podium__entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 120px;
}
.leaderboard-podium__entry--1st { order: 2; }
.leaderboard-podium__entry--2nd { order: 1; }
.leaderboard-podium__entry--3rd { order: 3; }

.leaderboard-podium__avatar-wrap { position: relative; }
.leaderboard-podium__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--panel-border);
}
.leaderboard-podium__entry--1st .leaderboard-podium__avatar {
  width: 64px; height: 64px;
  border-color: rgba(252,179,0,0.4);
  box-shadow: 0 0 24px rgba(252,179,0,0.15);
}
.leaderboard-podium__entry--2nd .leaderboard-podium__avatar {
  border-color: rgba(192,192,192,0.3);
}
.leaderboard-podium__entry--3rd .leaderboard-podium__avatar {
  border-color: rgba(205,127,50,0.3);
}
.leaderboard-podium__avatar-placeholder {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(252,179,0,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
  color: #fcb300;
  border: 2px solid var(--panel-border);
}
.leaderboard-podium__entry--1st .leaderboard-podium__avatar-placeholder {
  width: 64px; height: 64px;
  font-size: 20px;
  border-color: rgba(252,179,0,0.4);
  box-shadow: 0 0 24px rgba(252,179,0,0.15);
}
.leaderboard-podium__entry--2nd .leaderboard-podium__avatar-placeholder {
  border-color: rgba(192,192,192,0.3);
}
.leaderboard-podium__entry--3rd .leaderboard-podium__avatar-placeholder {
  border-color: rgba(205,127,50,0.3);
}

.leaderboard-podium__medal {
  position: absolute;
  bottom: -4px; right: -4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  border: 2px solid var(--panel-bg);
}
.leaderboard-podium__entry--1st .leaderboard-podium__medal {
  background: linear-gradient(135deg, #fcb300, #e0a000);
  color: #1a1400;
}
.leaderboard-podium__entry--2nd .leaderboard-podium__medal {
  background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
  color: #1a1a1a;
}
.leaderboard-podium__entry--3rd .leaderboard-podium__medal {
  background: linear-gradient(135deg, #cd7f32, #a86520);
  color: #1a1400;
}
.leaderboard-podium__name {
  font-size: 12px; font-weight: 600;
  color: var(--panel-title);
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.leaderboard-podium__score {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px; font-weight: 700;
  color: var(--panel-text);
}
.leaderboard-podium__entry--1st .leaderboard-podium__score { color: #fcb300; }

/* Ranking list (4th onward) */
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.leaderboard-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  transition: background 0.15s ease;
}
.leaderboard-entry:hover {
  background: var(--panel-card-bg);
}
.leaderboard-entry--me {
  background: rgba(252,179,0,0.06);
  border: 1px solid rgba(252,179,0,0.1);
}
.leaderboard-entry__rank {
  width: 28px;
  font-size: 13px; font-weight: 600;
  color: var(--panel-text-dim);
  text-align: center;
  flex-shrink: 0;
}
.leaderboard-entry__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--panel-border);
  flex-shrink: 0;
}
.leaderboard-entry__avatar-placeholder {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(252,179,0,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  color: #fcb300;
  flex-shrink: 0;
}
.leaderboard-entry__name {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 500;
  color: var(--panel-title);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.leaderboard-entry__me-badge {
  padding: 2px 8px;
  border-radius: 100px;
  background: rgba(252,179,0,0.1);
  font-size: 10px; font-weight: 700;
  color: #fcb300;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.leaderboard-entry__score {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px; font-weight: 600;
  color: var(--panel-text);
  text-align: right;
  flex-shrink: 0;
  min-width: 48px;
}
.leaderboard-entry--me .leaderboard-entry__score {
  color: #fcb300;
}

/* Divider */
.leaderboard-divider {
  height: 1px;
  background: var(--panel-border);
  margin: 8px 16px;
}

/* Empty state */
.leaderboard-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 12px;
}
.leaderboard-empty__text {
  font-size: 13px;
  color: var(--panel-text-dim);
  text-align: center;
  font-style: italic;
}

/* ── Responsive ── */
@media (max-width: 500px) {
  .leaderboard-panel { width: 100%; }
  .leaderboard-my-rank { margin: 16px 16px 0; }
  .leaderboard-breakdown { margin: 10px 16px 0; }
  /* Keep the four tiles on one row, but sized for a phone. They are `flex: 1`,
     which looks like it should shrink them — except a flex item's automatic
     minimum size floors each one at its min-content width, and at the desktop
     metrics ("DISCUSSION" at 9px/0.08em plus 24px of padding, ~84px each) four
     of them need ~360px against the 328px a 360dp phone has. The row
     overflowed and the panel's `overflow: hidden` sliced the FOLLOW tile in
     half. Trimming the padding, tracking and type brings min-content to ~69px
     so all four fit; `min-width: 0` removes the floor entirely so a longer
     score can never push the row wide again. Stacking them 2x2 also fixes the
     clipping but costs a whole extra row of height, which pushed TOP
     PARTICIPANTS off the first screen. */
  .leaderboard-breakdown { gap: 6px; }
  .leaderboard-breakdown__item {
    min-width: 0;
    padding: 8px 6px;
  }
  .leaderboard-breakdown__value { font-size: 12px; }
  .leaderboard-breakdown__label {
    font-size: 8px;
    letter-spacing: 0.02em;
  }
  .leaderboard-panel__body { padding: 16px; }
  .leaderboard-panel__header { padding: 20px 16px 16px; }
  .leaderboard-podium { gap: 8px; }
  .leaderboard-podium__entry { width: 90px; }
}


/* === src/features/spaces/pages/index/overview_panel/style.css === */
/* ── Overview Panel ──────────────────────────────── */

.overview-panel {
  --panel-bg: var(--dark, rgba(12, 12, 26, 1.00)) var(--light, rgba(255, 255, 255, 1.00));
  --panel-border: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --panel-title: var(--dark, #f0f0f5) var(--light, #12121a);
  --panel-text: var(--dark, #8888a8) var(--light, #6b6b80);
  --panel-text-dim: var(--dark, #55556a) var(--light, #9999aa);
  --panel-card-bg: var(--dark, rgba(255,255,255,0.03)) var(--light, rgba(0,0,0,0.03));
  --panel-close-hover: var(--dark, rgba(20, 20, 40, 0.80)) var(--light, rgba(240, 240, 240, 0.80));
  --panel-shadow: var(--dark, rgba(0,0,0,0.4)) var(--light, rgba(0,0,0,0.08));

  position: absolute;
  top: 0;
  right: 0;
  width: 480px;
  /* Fill the positioned parent (`.arena`, already inside the :root safe-area
     padding) — the fix `.settings-panel` documents. A flat `100vh` overshoots
     by the status-bar/nav-bar insets, which is what pushed the last rows
     (CREATED BY …) under the system bar. */
  height: 100%;
  /* Above `.archive-panel` (30). Both are absolutely positioned in the arena,
     and the full-screen panel must cover the floating "완료됨" list — at 25 the
     archive stayed painted on top of the open settings sheet. */
  z-index: 35;
  background: var(--panel-bg);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border-left: 1px solid var(--panel-border);
  box-shadow: -8px 0 60px var(--panel-shadow);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.overview-panel[data-open="true"] { transform: translateX(0); }

.overview-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
}
.overview-panel__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--panel-title);
}
.overview-panel__close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--panel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--panel-text);
  padding: 0;
}
.overview-panel__close:hover {
  background: var(--panel-close-hover);
  border-color: rgba(252,179,0,0.2);
  color: #fcb300;
}
.overview-panel__close svg { width: 16px; height: 16px; }

.overview-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 28px;
  /* Clears the Android nav bar / iOS home indicator so the last rows
     (CREATED BY …) can be scrolled fully into view. `viewport-fit=cover`
     (index.html) plus `enableEdgeToEdge()` (MainActivity) make the inset
     report the real bar height — 3-button nav is much taller than the
     gesture pill — and it is 0 on desktop. */
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.overview-panel__body::-webkit-scrollbar { width: 4px; }
.overview-panel__body::-webkit-scrollbar-track { background: transparent; }
.overview-panel__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.overview-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.overview-section__label {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--panel-text-dim);
}
.overview-section__content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--panel-text);
}

.overview-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.overview-info-card {
  padding: 16px;
  border-radius: 12px;
  background: var(--panel-card-bg);
  border: 1px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.overview-info-card__value {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--panel-title);
}
.overview-info-card__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--panel-text-dim);
}

.overview-author-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.overview-author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  object-fit: cover;
}
.overview-author-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--panel-title);
}
.overview-author-username {
  font-size: 11px;
  color: var(--panel-text-dim);
  letter-spacing: 0.05em;
}

@media (max-width: 500px) {
  .overview-panel { width: 100%; }
}

/* ── Overview edit mode (admin) ──────────────────── */
.overview-panel {
  --input-bg: var(--dark, rgba(255,255,255,0.02)) var(--light, rgba(10,10,30,0.02));
  --input-border: var(--dark, rgba(255,255,255,0.08)) var(--light, rgba(10,10,30,0.10));
  --add-bg: var(--dark, rgba(252,179,0,0.08)) var(--light, rgba(252,179,0,0.12));
  --add-border: var(--dark, rgba(252,179,0,0.22)) var(--light, rgba(252,179,0,0.32));
  --dropzone-bg: var(--dark, rgba(252,179,0,0.02)) var(--light, rgba(252,179,0,0.05));
  --file-bg: var(--dark, rgba(255,255,255,0.03)) var(--light, rgba(10,10,30,0.03));
  --accent-red: #ef4444;
}

.overview-panel__title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.overview-panel__mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--add-bg);
  border: 1px solid var(--add-border);
  color: #fcb300;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.overview-panel__mode-badge svg { width: 11px; height: 11px; }

.overview-panel__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.overview-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--panel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--panel-text);
  padding: 0;
}
.overview-icon-btn:hover {
  border-color: rgba(252,179,0,0.25);
  color: #fcb300;
}
.overview-icon-btn svg { width: 15px; height: 15px; }
.overview-icon-btn--danger:hover {
  border-color: rgba(239,68,68,0.3);
  color: var(--accent-red);
}
.overview-save {
  padding: 7px 14px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #fcb300, #e5a200);
  color: #0a0a0a;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 10px rgba(252,179,0,0.25);
}
.overview-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(252,179,0,0.4);
}
.overview-save svg { width: 12px; height: 12px; }

.overview-section__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.overview-section__label-hint {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--panel-text-dim);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.overview-panel[data-editing="true"] .overview-section__label-hint { opacity: 1; }

.overview-section__input {
  width: 100%;
  min-height: 120px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--panel-title);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
}
.overview-section__input:focus {
  border-color: rgba(252,179,0,0.4);
  box-shadow: 0 0 0 3px rgba(252,179,0,0.08);
}

/* Files section */
.file-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--file-bg);
  border: 1px solid var(--panel-border);
  transition: all 0.2s ease;
}
.file-item:hover { border-color: rgba(252,179,0,0.2); }
.file-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--panel-card-bg);
  border: 1px solid var(--panel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--panel-text);
  flex-shrink: 0;
}
.file-item__icon svg { width: 16px; height: 16px; }
.file-item__icon--pdf {
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.2);
  color: var(--accent-red);
}
.file-item__icon--img {
  background: rgba(34,211,238,0.08);
  border-color: rgba(34,211,238,0.18);
  color: #22d3ee;
}
.file-item__icon--doc {
  background: rgba(99,102,241,0.08);
  border-color: rgba(99,102,241,0.18);
  color: #818cf8;
}
.file-item__info { flex: 1; min-width: 0; }
.file-item__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--panel-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-item__meta {
  font-size: 11px;
  color: var(--panel-text-dim);
  margin-top: 2px;
}
.file-item__actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.overview-panel[data-editing="true"] .file-item__actions { opacity: 1; }
.file-item__remove {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  background: transparent;
  color: var(--panel-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}
.file-item__remove:hover {
  border-color: rgba(239,68,68,0.3);
  color: var(--accent-red);
  background: rgba(239,68,68,0.05);
}
.file-item__remove svg { width: 12px; height: 12px; }

.file-dropzone {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px;
  border-radius: 12px;
  border: 2px dashed var(--add-border);
  background: var(--dropzone-bg);
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
}
.overview-panel[data-editing="true"] .file-dropzone { display: flex; }
.file-dropzone:hover {
  border-color: #fcb300;
  background: rgba(252,179,0,0.06);
}
.file-dropzone__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--add-bg);
  border: 1px solid var(--add-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fcb300;
}
.file-dropzone__icon svg { width: 18px; height: 18px; }
.file-dropzone__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--panel-title);
}
.file-dropzone__desc {
  font-size: 11px;
  color: var(--panel-text);
}
.file-dropzone__pick {
  margin-top: 2px;
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--add-bg);
  border: 1px solid var(--add-border);
  color: #fcb300;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}



/* === src/features/spaces/pages/index/participate_card/style.css === */
/* ── Consent Card ─────────────────────────────────── */

.consent-card {
  --consent-bg: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --consent-border: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --consent-text: var(--dark, #8888a8) var(--light, #6b6b80);
  --consent-text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --consent-shadow: var(--dark, rgba(0,0,0,0.4)) var(--light, rgba(0,0,0,0.08));

  width: 380px;
  padding: 36px 32px 32px;
  background: var(--consent-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--consent-border);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow:
    0 8px 60px var(--consent-shadow),
    0 0 80px rgba(252,179,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.04);
  animation: card-float 6s ease-in-out infinite;
}

.consent-card__heading {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--consent-text);
}

.consent-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--consent-text);
  text-align: center;
  max-width: 300px;
}

.consent-card__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--dark, rgba(255,255,255,0.03)) var(--light, rgba(0,0,0,0.03));
  border: 1px solid var(--consent-border);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.consent-card__checkbox:hover {
  border-color: rgba(252,179,0,0.2);
}

.consent-card__checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: #fcb300;
  cursor: pointer;
}

.consent-card__checkbox-label {
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--consent-text-primary);
}

/* ── Consent Attribute List ───────────────────────── */

.consent-card__attributes {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  background: var(--dark, rgba(255,255,255,0.03)) var(--light, rgba(0,0,0,0.03));
  border: 1px solid var(--consent-border);
}

.consent-card__attr-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark, #55556a) var(--light, #9999aa);
  margin-bottom: 4px;
}

.consent-card__attr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--consent-border);
}
.consent-card__attr-row[data-satisfied="true"] {
  border-color: rgba(34,197,94,0.3);
  background: rgba(34,197,94,0.06);
}
.consent-card__attr-row[data-satisfied="false"] {
  border-color: rgba(239,68,68,0.3);
  background: rgba(239,68,68,0.06);
}

.consent-card__attr-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.consent-card__attr-icon--ok { color: #22C55E; }
.consent-card__attr-icon--missing { color: #EF4444; }

.consent-card__attr-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--consent-text-primary);
  flex: 1;
}

.consent-card__attr-values {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.consent-card__attr-value {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.consent-card__attr-value--mine {
  background: #FCB300;
  color: #0A0A0A;
}
.consent-card__attr-value--other {
  background: var(--dark, rgba(255,255,255,0.12)) var(--light, rgba(0,0,0,0.08));
  color: var(--consent-text-primary);
}

.consent-card__actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.consent-card__cancel {
  flex: 1;
  padding: 14px 16px;
  border: 1px solid var(--consent-border);
  border-radius: 12px;
  background: transparent;
  color: var(--consent-text);
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
}
.consent-card__cancel:hover {
  background: var(--dark, rgba(255,255,255,0.04)) var(--light, rgba(0,0,0,0.04));
  border-color: rgba(252,179,0,0.15);
}

.consent-card__confirm {
  flex: 2;
  padding: 14px 16px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #fcb300 0%, #e5a200 100%);
  color: #0a0a0a;
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 24px rgba(252,179,0,0.25);
}
.consent-card__confirm:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(252,179,0,0.35);
}
.consent-card__confirm:active:not(:disabled) {
  transform: translateY(0);
}
.consent-card__confirm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 500px) {
  .consent-card { width: calc(100vw - 32px); padding: 28px 20px 24px; }
}


/* === src/features/spaces/pages/index/prerequisite_card/style.css === */
/* ── Prerequisite Card ─────────────────────────── */

.prereq-card {
  --prereq-bg: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --prereq-border: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --prereq-text: var(--dark, #8888a8) var(--light, #6b6b80);
  --prereq-text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --prereq-shadow: var(--dark, rgba(0,0,0,0.4)) var(--light, rgba(0,0,0,0.08));
  --prereq-item-bg: var(--dark, rgba(255,255,255,0.03)) var(--light, rgba(0,0,0,0.03));
  --prereq-done-border: rgba(34,197,94,0.3);
  --prereq-done-bg: rgba(34,197,94,0.06);

  width: 380px;
  max-height: 70vh;
  padding: 32px 28px 28px;
  background: var(--prereq-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--prereq-border);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow:
    0 8px 60px var(--prereq-shadow),
    0 0 80px rgba(252,179,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.04);
  animation: card-float 6s ease-in-out infinite;
}

.prereq-card__heading {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fcb300;
}

.prereq-card__desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--prereq-text);
  text-align: center;
  max-width: 300px;
}

.prereq-card__progress {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.prereq-card__progress-bar-wrap {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--dark, rgba(255,255,255,0.08)) var(--light, rgba(0,0,0,0.06));
  overflow: hidden;
}

.prereq-card__progress-bar {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #fcb300, #e5a200);
  transition: width 0.4s ease;
}

.prereq-card__progress-text {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--prereq-text);
  white-space: nowrap;
}

.prereq-card__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.prereq-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--prereq-border);
  background: var(--prereq-item-bg);
  cursor: pointer;
  transition: all 0.2s ease;
}
.prereq-item:hover:not([data-done="true"]) {
  border-color: rgba(252,179,0,0.25);
  background: var(--dark, rgba(252,179,0,0.04)) var(--light, rgba(252,179,0,0.06));
}
.prereq-item[data-done="true"] {
  border-color: var(--prereq-done-border);
  background: var(--prereq-done-bg);
  cursor: default;
}

.prereq-item__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--prereq-text);
}
.prereq-item[data-done="true"] .prereq-item__icon {
  color: #22C55E;
}

.prereq-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.prereq-item__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--prereq-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prereq-item__type {
  font-size: 11px;
  color: var(--prereq-text);
}

.prereq-item__status {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.prereq-item__status--done {
  color: #22C55E;
}
.prereq-item__status--done svg {
  width: 18px;
  height: 18px;
}

.prereq-item__status--pending {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fcb300;
}
.prereq-item__status--pending svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 500px) {
  .prereq-card { width: calc(100vw - 32px); padding: 24px 18px 20px; }
  .prereq-card__progress-bar-wrap { display: none; }
  .prereq-card__progress-text::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,0.4);
    margin-right: 6px;
    vertical-align: middle;
  }
}


/* === src/features/spaces/pages/index/settings_panel/apps_section/style.css === */
/* ── Settings Apps Section ───────────────────────── */

.apps-section {
  --apps-surface-soft: var(--dark, rgba(255,255,255,0.02)) var(--light, rgba(10,10,30,0.03));
  --apps-surface-hover: var(--dark, rgba(255,255,255,0.04)) var(--light, rgba(10,10,30,0.05));
  --apps-border: var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(10,10,30,0.08));
  --apps-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --apps-text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --apps-text-dim: var(--dark, #55556a) var(--light, #9999aa);
  --apps-add-bg: var(--dark, rgba(252,179,0,0.08)) var(--light, rgba(252,179,0,0.12));
  --apps-add-border: var(--dark, rgba(252,179,0,0.22)) var(--light, rgba(252,179,0,0.32));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-section__sublabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.settings-section__sublabel:first-child { margin-top: 0; }
.settings-section__sublabel-text {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apps-text-dim);
}
.settings-section__sublabel-count {
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--apps-surface-soft);
  border: 1px solid var(--apps-border);
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: var(--apps-text-muted);
}

.app-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--apps-surface-soft);
  border: 1px solid var(--apps-border);
  transition: all 0.2s ease;
}
.app-row:hover {
  border-color: rgba(252,179,0,0.2);
  background: var(--apps-surface-hover);
}
.app-row__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.app-row__icon svg { width: 16px; height: 16px; }
.app-row__icon--general {
  background: rgba(34,197,94,0.1);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.22);
}
.app-row__icon--file {
  background: rgba(168,85,247,0.1);
  color: #a855f7;
  border: 1px solid rgba(168,85,247,0.22);
}
.app-row__icon--analyze {
  background: rgba(59,130,246,0.1);
  color: #3b82f6;
  border: 1px solid rgba(59,130,246,0.22);
}
.app-row__icon--panel {
  background: rgba(34,211,238,0.1);
  color: #22d3ee;
  border: 1px solid rgba(34,211,238,0.22);
}
.app-row__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app-row__name-line {
  display: flex;
  align-items: center;
  gap: 6px;
}
.app-row__name {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--apps-text);
  /* Keep the name to a single line + ellipsis just like
     `.app-row__desc`. Without this, multi-word titles like
     "Untitled report 1" wrap onto a second line inside the narrow
     settings sidebar. */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-row__check {
  color: #22c55e;
  display: inline-flex;
}
.app-row__check svg { width: 10px; height: 10px; }
.app-row__desc {
  font-size: 11px;
  color: var(--apps-text-muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-row__action { flex-shrink: 0; }

.app-row-btn {
  padding: 6px 12px;
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--apps-border);
  background: transparent;
  color: var(--apps-text);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.app-row-btn:hover {
  border-color: rgba(252,179,0,0.3);
  color: #fcb300;
}
.app-row-btn--install {
  background: var(--apps-add-bg);
  border-color: var(--apps-add-border);
  color: #fcb300;
}
.app-row-btn--install:hover {
  background: rgba(252,179,0,0.14);
  border-color: #fcb300;
  box-shadow: 0 2px 10px rgba(252,179,0,0.2);
}
.app-row-btn svg { width: 10px; height: 10px; }


/* === src/features/spaces/pages/index/settings_panel/style.css === */
/* ── Settings Panel ──────────────────────────────── */

.settings-panel {
  --panel-bg: var(--dark, rgba(12, 12, 26, 1.00)) var(--light, rgba(255, 255, 255, 1.00));
  --panel-border: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --panel-title: var(--dark, #f0f0f5) var(--light, #12121a);
  --panel-text: var(--dark, #8888a8) var(--light, #6b6b80);
  --panel-text-dim: var(--dark, #55556a) var(--light, #9999aa);
  --panel-card-bg: var(--dark, rgba(255,255,255,0.03)) var(--light, rgba(0,0,0,0.03));
  --panel-close-hover: var(--dark, rgba(20, 20, 40, 0.80)) var(--light, rgba(240, 240, 240, 0.80));
  --panel-shadow: var(--dark, rgba(0,0,0,0.4)) var(--light, rgba(0,0,0,0.08));
  --panel-opt-hover: var(--dark, rgba(252,179,0,0.04)) var(--light, rgba(252,179,0,0.06));
  --panel-opt-active-bg: var(--dark, rgba(252,179,0,0.08)) var(--light, rgba(252,179,0,0.12));
  --panel-opt-active-border: var(--dark, rgba(252,179,0,0.3)) var(--light, rgba(252,179,0,0.4));

  position: absolute;
  top: 0;
  right: 0;
  width: 360px;
  /* Fill the positioned parent (.home-arena = visible area, already inside
     the :root safe-area padding) rather than 100vh, which overshoots by the
     status-bar/nav-bar insets and pushes the bottom-anchored logout button
     (margin-top:auto) off-screen / behind the system nav bar. */
  height: 100%;
  /* Above `.archive-panel` (30). Both are absolutely positioned in the arena,
     and the full-screen panel must cover the floating "완료됨" list — at 25 the
     archive stayed painted on top of the open settings sheet. */
  z-index: 35;
  background: var(--panel-bg);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border-left: 1px solid var(--panel-border);
  box-shadow: -8px 0 60px var(--panel-shadow);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.settings-panel[data-open="true"] { transform: translateX(0); }

.settings-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
}
.settings-panel__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--panel-title);
}
.settings-panel__close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--panel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--panel-text);
  padding: 0;
}
.settings-panel__close:hover {
  background: var(--panel-close-hover);
  border-color: rgba(252,179,0,0.2);
  color: #fcb300;
}
.settings-panel__close svg { width: 16px; height: 16px; }

.settings-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 28px;
  /* Clear the device's bottom nav bar / home indicator so the logout button
     (margin-top:auto, sits at the very bottom) isn't tucked under it. */
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.settings-group__label {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--panel-text-dim);
}
.settings-options {
  display: flex;
  gap: 8px;
}
.settings-opt {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--panel-card-bg);
  border: 1px solid var(--panel-border);
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--panel-text);
  font-size: 12px;
  font-weight: 500;
}
.settings-opt:hover {
  background: var(--panel-opt-hover);
  border-color: rgba(252,179,0,0.15);
}
.settings-opt[aria-selected="true"] {
  background: var(--panel-opt-active-bg);
  border-color: var(--panel-opt-active-border);
  color: #fcb300;
}
.settings-opt svg { width: 22px; height: 22px; }
.settings-opt__icon {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

/* ── Logout ───────────────────────────────────────── */

.settings-logout {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-logout__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(239,68,68,0.2);
  background: rgba(239,68,68,0.06);
  color: #EF4444;
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
}
.settings-logout__btn:hover {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.4);
  box-shadow: 0 0 16px rgba(239,68,68,0.08);
}
.settings-logout__btn svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 500px) {
  .settings-panel { width: 100%; }
}


/* === src/features/spaces/pages/index/style.css === */
/* ── Space Index Page — Arena Base ────────────────── */
/* Viewer-specific styles: arena_viewer/style.css */
/* Topbar + HUD: arena_topbar/style.css */
/* Action dashboard: action_dashboard/style.css */

.arena {
  --arena-bg: var(--dark, #06060e) var(--light, #f4f3ef);
  --arena-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --arena-text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --arena-text-dim: var(--dark, #55556a) var(--light, #9999aa);
  --arena-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --arena-glass-hover: var(--dark, rgba(20, 20, 40, 0.80)) var(--light, rgba(255, 255, 255, 0.88));
  --arena-border: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --arena-surface: var(--dark, #0c0c1a) var(--light, #ffffff);
  --arena-ring-gold: var(--dark, rgba(252,179,0,0.08)) var(--light, rgba(252,179,0,0.12));
  --arena-ring-teal: var(--dark, rgba(110,237,216,0.06)) var(--light, rgba(110,237,216,0.10));
  --arena-ring-inner: var(--dark, rgba(252,179,0,0.04)) var(--light, rgba(252,179,0,0.06));
  --arena-particle-gold: var(--dark, #fcb300) var(--light, #d49700);
  --arena-particle-teal: var(--dark, #6eedd8) var(--light, #3bbfa5);
  --arena-card-shadow: var(--dark, rgba(0,0,0,0.4)) var(--light, rgba(0,0,0,0.08));
}

.arena {
  position: relative;
  width: 100%;
  /* Use `dvh` so the arena tracks the visible viewport on mobile browsers
     (where URL/toolbars shrink the visible area). `100vh` falls back for
     older user agents. */
  height: 100vh;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--arena-bg);
  color: var(--arena-text);
  font-family: 'Outfit', sans-serif;
}

.arena::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(252,179,0,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 120%, rgba(110,237,216,0.04) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, var(--arena-bg) 0%, var(--arena-bg) 100%);
  z-index: 0;
}

.hidden { display: none !important; }


/* === src/features/spaces/pages/index/verification_card/style.css === */
/* ── Verification Card ────────────────────────────── */

.verification-card {
  --vcard-bg: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --vcard-border: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --vcard-text: var(--dark, #8888a8) var(--light, #6b6b80);
  --vcard-text-dim: var(--dark, #55556a) var(--light, #9999aa);
  --vcard-text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --vcard-shadow: var(--dark, rgba(0,0,0,0.4)) var(--light, rgba(0,0,0,0.08));
  --vcard-req-bg: var(--dark, rgba(255,255,255,0.03)) var(--light, rgba(0,0,0,0.03));

  width: 380px;
  padding: 36px 32px 32px;
  background: var(--vcard-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--vcard-border);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow:
    0 8px 60px var(--vcard-shadow),
    0 0 80px rgba(252,179,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.04);
  animation: card-float 6s ease-in-out infinite;
}

.verification-card__heading {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vcard-text);
}

.verification-card__alert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(249,115,22,0.08);
  border: 1px solid rgba(249,115,22,0.2);
  font-size: 12px;
  font-weight: 600;
  color: #F97316;
}

.verification-card__alert-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.verification-card__error {
  width: 100%;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  font-size: 12px;
  font-weight: 500;
  color: #EF4444;
  text-align: center;
}

.verification-card__requirements {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  background: var(--vcard-req-bg);
  border: 1px solid var(--vcard-border);
}

.verification-card__req-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vcard-text-dim);
  margin-bottom: 4px;
}

.verification-card__req-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--vcard-border);
}

.verification-card__req-row[data-satisfied="true"] {
  border-color: rgba(34,197,94,0.3);
  background: rgba(34,197,94,0.06);
}
.verification-card__req-row[data-satisfied="false"] {
  border-color: rgba(239,68,68,0.3);
  background: rgba(239,68,68,0.06);
}

.verification-card__req-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.verification-card__req-icon--ok { color: #22C55E; }
.verification-card__req-icon--missing { color: #EF4444; }

.verification-card__req-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--vcard-text-primary);
  flex: 1;
}

.verification-card__req-values {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.verification-card__req-value {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.verification-card__req-value--mine {
  background: #FCB300;
  color: #0A0A0A;
}
.verification-card__req-value--other {
  background: var(--dark, rgba(255,255,255,0.12)) var(--light, rgba(0,0,0,0.08));
  color: var(--vcard-text-primary);
}

.cta-verify {
  width: 100%;
  padding: 14px 24px;
  border: 1px solid rgba(249,115,22,0.4);
  border-radius: 12px;
  background: rgba(249,115,22,0.08);
  color: #F97316;
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.cta-verify:hover {
  background: rgba(249,115,22,0.15);
  border-color: rgba(249,115,22,0.6);
  box-shadow: 0 0 24px rgba(249,115,22,0.1);
  transform: translateY(-2px);
}
.cta-verify:active { transform: translateY(0); }

@media (max-width: 500px) {
  .verification-card { width: calc(100vw - 32px); padding: 28px 20px 24px; }
}


/* === src/features/spaces/pages/index/waiting_card/style.css === */
/* ── Waiting Card ──────────────────────────────── */

.waiting-card {
  --waiting-bg: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --waiting-border: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --waiting-text: var(--dark, #8888a8) var(--light, #6b6b80);
  --waiting-text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --waiting-shadow: var(--dark, rgba(0,0,0,0.4)) var(--light, rgba(0,0,0,0.08));

  width: 380px;
  padding: 36px 28px 28px;
  background: var(--waiting-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--waiting-border);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow:
    0 8px 60px var(--waiting-shadow),
    0 0 80px rgba(252,179,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.04);
  animation: card-float 6s ease-in-out infinite;
}

.waiting-card__icon {
  width: 48px;
  height: 48px;
  color: #22C55E;
}
.waiting-card__icon svg {
  width: 100%;
  height: 100%;
}

.waiting-card__heading {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #22C55E;
}

.waiting-card__desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--waiting-text);
  text-align: center;
  max-width: 300px;
}

/* ── Countdown ──────────────────────────────────── */

.waiting-card__countdown {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-radius: 14px;
  /* background: var(--dark, rgba(252,179,0,0.06)) var(--light, rgba(252,179,0,0.08)); */
  /* border: 1px solid rgba(252,179,0,0.15); */
}

.waiting-card__countdown-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fcb300;
}

.waiting-card__countdown-timer {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.waiting-card__countdown-unit {
  display: flex;
  align-items: baseline;
  gap: 1px;
}

.waiting-card__countdown-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--waiting-text-primary);
  min-width: 2ch;
  text-align: center;
}

.waiting-card__countdown-suffix {
  font-size: 11px;
  font-weight: 600;
  color: var(--waiting-text);
  text-transform: uppercase;
}

.waiting-card__participants {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 12px;
  background: var(--dark, rgba(255,255,255,0.04)) var(--light, rgba(0,0,0,0.03));
  border: 1px solid var(--waiting-border);
}

.waiting-card__participants-count {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fcb300;
}

.waiting-card__participants-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--waiting-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.waiting-card__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.waiting-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(34,197,94,0.2);
  background: rgba(34,197,94,0.04);
}

.waiting-item__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #22C55E;
}
.waiting-item__icon svg {
  width: 100%;
  height: 100%;
}

.waiting-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.waiting-item__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--waiting-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.waiting-item__type {
  font-size: 11px;
  color: var(--waiting-text);
}

.waiting-card__status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 24px;
  background: var(--dark, rgba(252,179,0,0.08)) var(--light, rgba(252,179,0,0.1));
  border: 1px solid rgba(252,179,0,0.2);
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fcb300;
}

.waiting-card__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fcb300;
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(252,179,0,0.4); }
  50% { opacity: 0.5; box-shadow: 0 0 12px rgba(252,179,0,0.6); }
}

@media (max-width: 500px) {
  .waiting-card { width: calc(100vw - 32px); padding: 28px 18px 24px; }
}


/* === src/features/sub_team/components/parent_hud_panel/style.css === */
/* Parent HUD panel component — embedded into team arena topbar.
 * Mirrors assets/design/sub-team/parent-home-with-button.html.
 */

.parent-panel-wrap {
  position: relative;
  display: inline-block;
  --php-glass: var(--dark, rgba(10, 10, 22, 0.96)) var(--light, rgba(255, 255, 255, 0.96));
  --php-border: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --php-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --php-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --php-dim: var(--dark, #55556a) var(--light, #9595a8);
  --php-gold: #fcb300;
  --php-amber: #f59e0b;
  --php-green: #22c55e;
  --php-coral: #ef4444;
}

.parent-panel-wrap .hud-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--php-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--php-muted);
  cursor: pointer;
  padding: 0;
}
.parent-panel-wrap .hud-btn--parent {
  position: relative;
  background: rgba(252, 179, 0, 0.08);
  border-color: rgba(252, 179, 0, 0.22);
}
.parent-panel-wrap .hud-btn--parent svg { color: var(--php-gold); }
.parent-panel-wrap .hud-btn--parent::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--php-gold);
  border: 2px solid #06060e;
}
.parent-panel-wrap .hud-btn--parent[data-state="pending"]::after {
  background: var(--php-amber);
}
.parent-panel-wrap .hud-btn--parent[data-state="none"]::after {
  display: none;
}

.parent-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 80;
  width: 380px;
  max-width: calc(100vw - 32px);
  border-radius: 16px;
  background: var(--php-glass);
  border: 1px solid rgba(252, 179, 0, 0.22);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.22s ease;
}
.parent-panel[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.parent-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.parent-panel__title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--php-gold);
  display: flex;
  align-items: center;
  gap: 8px;
}
.parent-panel__close {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid var(--php-border);
  color: var(--php-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.parent-state-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.parent-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.08), rgba(110, 237, 216, 0.04));
  border: 1px solid rgba(252, 179, 0, 0.25);
}
.parent-card[data-variant="pending"] {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(252, 179, 0, 0.03));
  border-color: rgba(245, 158, 11, 0.28);
}
.parent-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.35), rgba(110, 237, 216, 0.12));
  border: 1px solid rgba(252, 179, 0, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--php-gold);
  flex-shrink: 0;
}
.parent-card__body { min-width: 0; }
.parent-card__name {
  font-size: 14px;
  font-weight: 800;
  color: var(--php-text);
}
.parent-card__meta {
  font-size: 10px;
  color: var(--php-muted);
  margin-top: 2px;
}
.parent-card__status {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid;
}
.parent-card__status--recognized {
  background: rgba(34, 197, 94, 0.10);
  color: var(--php-green);
  border-color: rgba(34, 197, 94, 0.28);
}
.parent-card__status--pending {
  background: rgba(245, 158, 11, 0.10);
  color: var(--php-amber);
  border-color: rgba(245, 158, 11, 0.28);
}

.pp-actions { display: flex; flex-direction: column; gap: 6px; }
.pp-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--php-border);
  color: var(--php-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.pp-action__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(252, 179, 0, 0.08);
  border: 1px solid rgba(252, 179, 0, 0.22);
  color: var(--php-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pp-action__body { flex: 1; min-width: 0; }
.pp-action__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--php-text);
}
.pp-action__chev { color: var(--php-dim); }
.pp-action--danger:hover {
  border-color: rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.04);
}
.pp-action--danger .pp-action__icon {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.22);
  color: var(--php-coral);
}
.pp-action--primary {
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.14), rgba(252, 179, 0, 0.06));
  border-color: rgba(252, 179, 0, 0.30);
}

.pp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--php-border);
  text-align: center;
}
.pp-empty__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--php-border);
  color: var(--php-dim);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-empty__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--php-text);
}
.pp-empty__desc {
  font-size: 11px;
  color: var(--php-muted);
  line-height: 1.55;
  max-width: 300px;
}

/* Sub-line in action rows ("View parent team's feed" etc.) */
.pp-action__sub {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--php-muted);
  margin-top: 2px;
}

/* Inline info banner inside parent state blocks. Teal default,
 * `--amber` variant for the "심사 중" pending block. Backgrounds use
 * the space toggle so light theme stays readable. */
.pp-info {
  font-size: 12px;
  color: var(--php-text);
  line-height: 1.6;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--dark, rgba(110, 237, 216, 0.05)) var(--light, rgba(0, 0, 0, 0.025));
  border: 1px solid var(--dark, rgba(110, 237, 216, 0.18)) var(--light, rgba(0, 0, 0, 0.06));
}
.pp-info strong {
  color: var(--php-gold);
  font-weight: 700;
}
.pp-info--amber {
  background: var(--dark, rgba(245, 158, 11, 0.06)) var(--light, rgba(245, 158, 11, 0.05));
  border-color: var(--dark, rgba(245, 158, 11, 0.22)) var(--light, rgba(245, 158, 11, 0.22));
}

@media (max-width: 500px) {
  .parent-panel {
    width: calc(100vw - 24px);
    right: 12px;
  }
}


/* === src/features/sub_team/pages/application_status/style.css === */
/* Child application status page. Mirrors
 * assets/design/sub-team/child-application-status.html.
 */

.sub-team-application-status {
  --sub-team-bg: var(--dark, #06060e) var(--light, #f7f7fb);
  --sub-team-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --sub-team-border: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --sub-team-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --sub-team-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --sub-team-dim: var(--dark, #55556a) var(--light, #9595a8);
  --sub-team-gold: #fcb300;
  --sub-team-teal: #6eedd8;
  --sub-team-green: #22c55e;
  --sub-team-amber: #f59e0b;
  --sub-team-violet: #818cf8;
  --sub-team-coral: #ef4444;

  background: var(--sub-team-bg);
  color: var(--sub-team-text);
  /* `body` is `overflow: hidden; height: 100%` globally — every page
   * needs its own scroll container or content past the viewport is
   * clipped. Memory rule `feedback_arena_page_scroll.md`. */
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.sub-team-application-status .arena-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  padding: 18px 28px;
  background: var(--sub-team-glass);
  border-bottom: 1px solid var(--sub-team-border);
}
.sub-team-application-status .arena-topbar__left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sub-team-application-status .back-btn {
  width: 38px;
  height: 38px;
  /* Fixed-size flex child: without this the default `flex-shrink: 1` lets a
     long sibling title squash the square button into an oval. */
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--sub-team-muted);
}
.sub-team-application-status .topbar-title {
  display: flex;
  flex-direction: column;
}
.sub-team-application-status .topbar-title__eyebrow {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
}
.sub-team-application-status .topbar-title__main {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sub-team-application-status .page {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 20px 80px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sub-team-application-status .card {
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sub-team-application-status .card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sub-team-application-status .card__title {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--sub-team-text);
  letter-spacing: 0.02em;
}
.sub-team-application-status .card__title[data-feedback-variant="returned"] {
  background: linear-gradient(135deg, #818cf8, #c4b5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sub-team-application-status .card__title[data-feedback-variant="approved"] {
  background: linear-gradient(135deg, #22c55e, #86efac);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sub-team-application-status .card__title[data-feedback-variant="rejected"] {
  background: linear-gradient(135deg, #ef4444, #fca5a5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sub-team-application-status .card__dash {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--sub-team-border), transparent);
}
.sub-team-application-status .card__meta {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 10px;
  color: var(--sub-team-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sub-team-application-status .pill {
  padding: 3px 10px;
  border-radius: 100px;
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
}
.sub-team-application-status .pill::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  animation: sub-team-status-pulse 1.6s ease-in-out infinite;
}
.sub-team-application-status .pill--pending {
  background: rgba(245, 158, 11, 0.10);
  color: var(--sub-team-amber);
  border: 1px solid rgba(245, 158, 11, 0.30);
}
.sub-team-application-status .pill--approved {
  background: rgba(34, 197, 94, 0.10);
  color: var(--sub-team-green);
  border: 1px solid rgba(34, 197, 94, 0.30);
}
.sub-team-application-status .pill--rejected {
  background: rgba(239, 68, 68, 0.10);
  color: var(--sub-team-coral);
  border: 1px solid rgba(239, 68, 68, 0.30);
}
.sub-team-application-status .pill--returned {
  background: rgba(129, 140, 248, 0.10);
  color: var(--sub-team-violet);
  border: 1px solid rgba(129, 140, 248, 0.30);
}

.sub-team-application-status .history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sub-team-application-status .history-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(6, 6, 14, 0.45);
  border: 1px solid var(--sub-team-border);
}
.sub-team-application-status .history-row__body {
  flex: 1;
  min-width: 0;
}
.sub-team-application-status .history-row__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--sub-team-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sub-team-application-status .history-row__meta {
  font-size: 10px;
  color: var(--sub-team-dim);
  letter-spacing: 0.06em;
}
.sub-team-application-status .empty-row {
  padding: 24px;
  text-align: center;
  color: var(--sub-team-muted);
  font-style: italic;
}

/* ─── Topbar brand row (back + divider + child logo + title + status pill) ─── */
.sub-team-application-status .arena-topbar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.sub-team-application-status .brand-home {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.sub-team-application-status .brand-home__divider {
  width: 1px;
  height: 22px;
  background: var(--sub-team-border);
  margin: 0 4px;
  flex-shrink: 0;
}
.sub-team-application-status .arena-topbar__logo--child {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: rgba(110, 237, 216, 0.10);
  border: 1px solid rgba(110, 237, 216, 0.25);
  color: var(--sub-team-teal);
  flex-shrink: 0;
}
.sub-team-application-status .arena-topbar__title--child {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--sub-team-text);
}
.sub-team-application-status .arena-topbar__handle {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
}
.sub-team-application-status .u-col {
  display: flex;
  flex-direction: column;
}
.sub-team-application-status .arena-topbar__status {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 100px;
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sub-team-application-status .arena-topbar__status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  animation: sub-team-status-pulse 1.6s ease-in-out infinite;
}
@keyframes sub-team-status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}
.sub-team-application-status .arena-topbar__status--pending {
  background: rgba(245, 158, 11, 0.10);
  color: var(--sub-team-amber);
  border-color: rgba(245, 158, 11, 0.30);
}
.sub-team-application-status .arena-topbar__status--returned {
  background: rgba(129, 140, 248, 0.10);
  color: var(--sub-team-violet);
  border-color: rgba(129, 140, 248, 0.30);
}
.sub-team-application-status .arena-topbar__status--approved {
  background: rgba(34, 197, 94, 0.10);
  color: var(--sub-team-green);
  border-color: rgba(34, 197, 94, 0.30);
}
.sub-team-application-status .arena-topbar__status--rejected {
  background: rgba(239, 68, 68, 0.10);
  color: var(--sub-team-coral);
  border-color: rgba(239, 68, 68, 0.30);
}

/* ─── Page header ─── */
.sub-team-application-status .page-header {
  padding: 4px 2px 0;
}
.sub-team-application-status .page-header__main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sub-team-application-status .page-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sub-team-muted);
}
.sub-team-application-status .page-header__title {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--sub-team-text);
  margin: 0;
}
.sub-team-application-status .page-header__title--child strong {
  color: var(--sub-team-teal);
  font-weight: 800;
}

/* ─── Status hero (variant-aware) ─── */
.sub-team-application-status .status-hero {
  position: relative;
  overflow: hidden;
  padding: 26px 30px;
  border-radius: 18px;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}
.sub-team-application-status .status-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 55% 60% at 15% 15%,
    var(--status-accent, rgba(245, 158, 11, 0.12)) 0%,
    transparent 60%
  );
  pointer-events: none;
}
.sub-team-application-status .status-hero > * {
  position: relative;
  z-index: 1;
}
.sub-team-application-status .status-hero[data-v="pending"] {
  --status-accent: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.25);
}
.sub-team-application-status .status-hero[data-v="returned"] {
  --status-accent: rgba(129, 140, 248, 0.15);
  border-color: rgba(129, 140, 248, 0.25);
}
.sub-team-application-status .status-hero[data-v="approved"] {
  --status-accent: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.30);
  box-shadow: 0 0 36px rgba(34, 197, 94, 0.10);
}
.sub-team-application-status .status-hero[data-v="rejected"] {
  --status-accent: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.25);
}
.sub-team-application-status .status-hero__icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sub-team-application-status .status-hero[data-v="pending"] .status-hero__icon {
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.30);
  color: var(--sub-team-amber);
}
.sub-team-application-status .status-hero[data-v="returned"] .status-hero__icon {
  background: rgba(129, 140, 248, 0.10);
  border: 1px solid rgba(129, 140, 248, 0.30);
  color: var(--sub-team-violet);
}
.sub-team-application-status .status-hero[data-v="approved"] .status-hero__icon {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: var(--sub-team-green);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
}
.sub-team-application-status .status-hero[data-v="rejected"] .status-hero__icon {
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.30);
  color: var(--sub-team-coral);
}
.sub-team-application-status .status-hero__eyebrow {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
}
.sub-team-application-status .status-hero__title {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--sub-team-text);
  margin: 4px 0 6px;
}
.sub-team-application-status .status-hero__sub {
  font-size: 13px;
  color: var(--sub-team-muted);
  line-height: 1.6;
  max-width: 520px;
}
.sub-team-application-status .status-hero__meta {
  align-items: flex-end;
  text-align: right;
  gap: 6px;
  width: fit-content;
  justify-self: end;
}
.sub-team-application-status .status-hero__meta-foot {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--sub-team-dim);
}

/* ─── Feedback card (returned / approved / rejected) ─── */
.sub-team-application-status .feedback {
  padding: 16px 18px;
  border-radius: 14px;
  margin-top: 4px;
  /* Light theme uses the same washed surface as the snapshot card
   * below so both feedback + snapshot read as one section visually. */
  background: var(--dark, rgba(6, 6, 14, 0.5)) var(--light, rgba(0, 0, 0, 0.025));
  border: 1px solid var(--sub-team-border);
  display: flex;
  gap: 12px;
}
.sub-team-application-status .feedback__avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(110, 237, 216, 0.10);
  border: 1px solid rgba(110, 237, 216, 0.25);
  color: var(--sub-team-teal);
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.sub-team-application-status .feedback__body {
  flex: 1;
  min-width: 0;
}
.sub-team-application-status .feedback__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.sub-team-application-status .feedback__author {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--sub-team-text);
}
.sub-team-application-status .feedback__author-meta {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 10px;
  color: var(--sub-team-dim);
  letter-spacing: 0.06em;
}
.sub-team-application-status .feedback__text {
  font-size: 14px;
  color: var(--sub-team-text);
  line-height: 1.7;
  background: var(--dark, rgba(12, 12, 26, 0.5)) var(--light, rgba(0, 0, 0, 0.04));
  padding: 12px 14px;
  border-radius: 10px;
  border-left: 3px solid var(--sub-team-violet);
  white-space: pre-wrap;
}
.sub-team-application-status .feedback--rejected .feedback__text {
  border-left-color: var(--sub-team-coral);
}

/* ─── Action row buttons ─── */
.sub-team-application-status .action-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 4px;
}
.sub-team-application-status .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
}
.sub-team-application-status .btn--primary {
  background: linear-gradient(135deg, rgba(110, 237, 216, 0.2), rgba(129, 140, 248, 0.08));
  border-color: rgba(110, 237, 216, 0.3);
  color: var(--sub-team-teal);
}
.sub-team-application-status .btn--ghost {
  background: transparent;
  border-color: var(--sub-team-border);
  color: var(--sub-team-muted);
}

/* ─── Submitted-answers snapshot table ─── */
.sub-team-application-status .card__title--snapshot {
  background: linear-gradient(135deg, #6eedd8, #b6f5e6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sub-team-application-status .snapshot {
  padding: 16px;
  border-radius: 12px;
  background: var(--dark, rgba(6, 6, 14, 0.45)) var(--light, rgba(0, 0, 0, 0.025));
  border: 1px solid var(--sub-team-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sub-team-application-status .snapshot__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--sub-team-border);
  font-size: 12px;
}
.sub-team-application-status .snapshot__row:last-child {
  border-bottom: none;
}
.sub-team-application-status .snapshot__key {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
}
.sub-team-application-status .snapshot__value {
  color: var(--sub-team-text);
  line-height: 1.55;
  word-break: break-word;
}

/* ─── Form-version pin notice ─── */
.sub-team-application-status .notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(110, 237, 216, 0.05);
  border: 1px solid rgba(110, 237, 216, 0.20);
}
.sub-team-application-status .notice--teal {
  background: rgba(110, 237, 216, 0.05);
  border-color: rgba(110, 237, 216, 0.20);
}
.sub-team-application-status .notice__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(110, 237, 216, 0.10);
  color: var(--sub-team-teal);
  border: 1px solid rgba(110, 237, 216, 0.30);
}
.sub-team-application-status .notice__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sub-team-application-status .notice__title {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sub-team-teal);
}
.sub-team-application-status .notice__text {
  font-size: 12px;
  color: var(--sub-team-muted);
  line-height: 1.55;
}

/* ─── Mobile (≤ 500px) ───────────────────────────────────────────── */
@media (max-width: 500px) {
  .sub-team-application-status .arena-topbar {
    padding: 12px 14px;
  }
  .sub-team-application-status .arena-topbar__brand {
    gap: 8px;
    flex-wrap: wrap;
  }
  .sub-team-application-status .brand-home__divider {
    display: none;
  }
  .sub-team-application-status .arena-topbar__title--child {
    font-size: 13px;
  }
  .sub-team-application-status .arena-topbar__handle {
    font-size: 9px;
    letter-spacing: 0.08em;
  }
  .sub-team-application-status .arena-topbar__status {
    margin-left: auto;
    flex-shrink: 0;
  }
  .sub-team-application-status .page {
    padding: 16px 14px 60px;
    gap: 14px;
  }
  .sub-team-application-status .page-header__title {
    font-size: 20px;
    line-height: 1.25;
  }
  .sub-team-application-status .status-hero {
    /* Collapse the 3-column grid (icon · body · meta) into a single
     * column so the title doesn't wrap into a 1-word-per-line column
     * on narrow screens. */
    grid-template-columns: 1fr;
    padding: 20px 18px;
    gap: 14px;
  }
  .sub-team-application-status .status-hero__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
  .sub-team-application-status .status-hero__title {
    font-size: 18px;
    line-height: 1.3;
  }
  .sub-team-application-status .status-hero__sub {
    font-size: 12px;
  }
  .sub-team-application-status .status-hero__meta {
    flex-direction: row;
    align-items: center;
    justify-self: stretch;
    text-align: left;
    gap: 8px;
    width: 100%;
  }
  .sub-team-application-status .status-hero__meta-foot {
    text-align: right;
    margin-left: auto;
  }
  .sub-team-application-status .card {
    padding: 16px 14px;
    gap: 12px;
  }
  .sub-team-application-status .feedback {
    flex-direction: column;
    padding: 14px;
    gap: 10px;
  }
  .sub-team-application-status .feedback__text {
    font-size: 13px;
  }
  .sub-team-application-status .snapshot__row {
    /* Stack key over value so long Korean labels aren't truncated
     * by the fixed 160px grid column. */
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 8px 0;
  }
  .sub-team-application-status .action-row {
    justify-content: stretch;
  }
  .sub-team-application-status .action-row .btn {
    flex: 1;
    justify-content: center;
  }
}


/* === src/features/sub_team/pages/apply/doc_agreement_modal/style.css === */
/* Doc agreement modal overlay used by the apply page. */

.sub-team-apply-doc-modal {
  --sub-team-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --sub-team-panel: var(--dark, rgba(20, 20, 40, 0.92)) var(--light, #ffffff);
  --sub-team-border: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --sub-team-border-strong: var(--dark, rgba(255, 255, 255, 0.12)) var(--light, rgba(0, 0, 0, 0.16));
  --sub-team-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --sub-team-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --sub-team-dim: var(--dark, #55556a) var(--light, #9595a8);
  --sub-team-purple: #a855f7;
  --sub-team-green: #22c55e;
  --sub-team-coral: #ef4444;
  --sub-team-gold: #fcb300;

  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
.sub-team-apply-doc-modal[data-open="true"] {
  opacity: 1;
  visibility: visible;
}

.sub-team-apply-doc-modal .modal {
  width: 100%;
  max-width: 760px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: var(--sub-team-panel);
  border: 1px solid var(--sub-team-border-strong);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.sub-team-apply-doc-modal .doc-modal__head {
  padding: 22px 26px;
  border-bottom: 1px solid var(--sub-team-border);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.sub-team-apply-doc-modal .doc-modal__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: var(--sub-team-purple);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sub-team-apply-doc-modal .doc-modal__title-wrap {
  flex: 1;
  min-width: 0;
}
.sub-team-apply-doc-modal .doc-modal__kicker {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-purple);
  margin-bottom: 4px;
}
.sub-team-apply-doc-modal .doc-modal__title {
  font-size: 17px;
  font-weight: 800;
  color: var(--sub-team-text);
}
.sub-team-apply-doc-modal .doc-modal__close-x {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  padding: 0;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--sub-team-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--sub-team-muted);
}
.sub-team-apply-doc-modal .doc-modal__close-x:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.25);
  color: var(--sub-team-coral);
}

.sub-team-apply-doc-modal .doc-modal__body {
  padding: 22px 26px;
  overflow: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sub-team-apply-doc-modal .doc-modal__content {
  padding: 20px 22px;
  border-radius: 12px;
  /* Theme-aware: dark navy on dark, soft off-white on light.
   * Hardcoded `rgba(12, 12, 26, 0.45)` was rendering a flat dark
   * grey block in light mode. */
  background: var(--dark, rgba(12, 12, 26, 0.45)) var(--light, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--sub-team-border);
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--sub-team-text);
  white-space: pre-wrap;
}
.sub-team-apply-doc-modal .doc-modal__notice {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(252, 179, 0, 0.04);
  border: 1px solid rgba(252, 179, 0, 0.22);
  align-items: flex-start;
}
.sub-team-apply-doc-modal .doc-modal__notice svg {
  color: var(--sub-team-gold);
  flex-shrink: 0;
  margin-top: 2px;
}
.sub-team-apply-doc-modal .doc-modal__notice-text {
  font-size: 12px;
  color: var(--sub-team-muted);
  line-height: 1.6;
}

/* Attachment list inside the agreement modal — sits between the
   doc body and the agree notice, links open in a new tab. */
.sub-team-apply-doc-modal .doc-modal__attachments {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 16px 0 12px;
}
.sub-team-apply-doc-modal .doc-modal__attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--dark, rgba(168, 85, 247, 0.06)) var(--light, rgba(168, 85, 247, 0.08));
  border: 1px solid var(--dark, rgba(168, 85, 247, 0.22)) var(--light, rgba(168, 85, 247, 0.28));
  color: var(--sub-team-text);
  text-decoration: none;
  font-size: 12.5px;
  transition: border-color 0.15s, background 0.15s;
}
.sub-team-apply-doc-modal .doc-modal__attachment:hover {
  border-color: var(--dark, rgba(168, 85, 247, 0.45)) var(--light, rgba(168, 85, 247, 0.55));
  background: var(--dark, rgba(168, 85, 247, 0.10)) var(--light, rgba(168, 85, 247, 0.14));
}
.sub-team-apply-doc-modal .doc-modal__attachment svg {
  color: var(--sub-team-purple);
  flex-shrink: 0;
}
.sub-team-apply-doc-modal .doc-modal__attachment-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.sub-team-apply-doc-modal .doc-modal__attachment-size {
  font-size: 10.5px;
  color: var(--sub-team-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.sub-team-apply-doc-modal .doc-modal__foot {
  padding: 18px 26px;
  border-top: 1px solid var(--sub-team-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--dark, rgba(6, 6, 14, 0.40)) var(--light, rgba(0, 0, 0, 0.025));
}
.sub-team-apply-doc-modal .doc-modal__foot-left {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sub-team-muted);
}
.sub-team-apply-doc-modal .doc-modal__foot-actions {
  display: flex;
  gap: 10px;
}
.sub-team-apply-doc-modal .doc-modal__cancel {
  padding: 10px 18px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.sub-team-apply-doc-modal .doc-modal__cancel:hover {
  border-color: var(--sub-team-border-strong);
  color: var(--sub-team-text);
}
.sub-team-apply-doc-modal .doc-modal__agree-btn {
  padding: 10px 22px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(129, 140, 248, 0.18));
  border: 1px solid rgba(168, 85, 247, 0.50);
  /* Light lilac in dark mode, deeper violet in light mode so "동의하기"
   * stays readable against the gradient on a white card. */
  color: var(--dark, #f3e8ff) var(--light, #5b21b6);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.sub-team-apply-doc-modal .doc-modal__agree-btn:hover {
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.30);
}
.sub-team-apply-doc-modal .doc-modal__agree-btn[data-agreed="true"] {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.28), rgba(16, 185, 129, 0.18));
  border-color: rgba(34, 197, 94, 0.50);
  color: var(--dark, #d1fae5) var(--light, #166534);
  cursor: default;
}
.sub-team-apply-doc-modal .doc-modal__agree-btn:disabled {
  cursor: default;
}


/* === src/features/sub_team/pages/apply/style.css === */
/* Apply-as-sub-team page. Mirrors
 * assets/design/sub-team/subteam-apply.html.
 */

.sub-team-apply {
  --sub-team-bg: var(--dark, #06060e) var(--light, #f7f7fb);
  --sub-team-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --sub-team-border: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --sub-team-border-strong: var(--dark, rgba(255, 255, 255, 0.12)) var(--light, rgba(0, 0, 0, 0.16));
  --sub-team-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --sub-team-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --sub-team-dim: var(--dark, #55556a) var(--light, #9595a8);
  --sub-team-gold: #fcb300;
  --sub-team-teal: #6eedd8;
  --sub-team-purple: #a855f7;
  --sub-team-green: #22c55e;
  --sub-team-amber: #f59e0b;
  --sub-team-coral: #ef4444;
  --sub-team-input-bg: var(--dark, rgba(255, 255, 255, 0.025)) var(--light, rgba(0, 0, 0, 0.03));

  background: var(--sub-team-bg);
  color: var(--sub-team-text);
  /* `body` is `overflow: hidden; height: 100%` globally — every
   * page needs its own scroll container or content past the viewport
   * is clipped. Memory rule `feedback_arena_page_scroll.md`. */
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.sub-team-apply .arena-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  padding: 18px 28px;
  background: var(--sub-team-glass);
  border-bottom: 1px solid var(--sub-team-border);
}
.sub-team-apply .arena-topbar__left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sub-team-apply .back-btn {
  width: 38px;
  height: 38px;
  /* Fixed-size flex child: without this the default `flex-shrink: 1` lets a
     long sibling title squash the square button into an oval. */
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--sub-team-muted);
}
.sub-team-apply .topbar-title {
  display: flex;
  flex-direction: column;
}
.sub-team-apply .topbar-title__eyebrow {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
}
.sub-team-apply .topbar-title__main {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sub-team-text);
}

.sub-team-apply .page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 80px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sub-team-apply .target-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
}
.sub-team-apply .target-summary__avatar {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: rgba(252, 179, 0, 0.10);
  border: 1px solid rgba(252, 179, 0, 0.28);
  color: var(--sub-team-gold);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sub-team-apply .target-summary__body {
  flex: 1;
  min-width: 0;
}
.sub-team-apply .target-summary__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
  margin-bottom: 3px;
}
.sub-team-apply .target-summary__name {
  font-size: 18px;
  font-weight: 800;
  color: var(--sub-team-text);
  margin-bottom: 3px;
}
.sub-team-apply .target-summary__handle {
  font-size: 11px;
  color: var(--sub-team-muted);
}

.sub-team-apply .team-picker {
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sub-team-apply .team-picker__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-muted);
}
.sub-team-apply .team-picker__input {
  padding: 12px 14px;
  border-radius: 11px;
  background: var(--sub-team-input-bg);
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-text);
  font-size: 13px;
  outline: none;
}
.sub-team-apply .team-picker__input:focus {
  border-color: rgba(110, 237, 216, 0.40);
}

.sub-team-apply .notice {
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 13px;
}
.sub-team-apply .notice--warn {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: var(--sub-team-amber);
}

.sub-team-apply .apply-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 1000px) {
  .sub-team-apply .apply-grid {
    grid-template-columns: 1fr;
  }
}
.sub-team-apply .composer-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.sub-team-apply .req-docs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(168, 85, 247, 0.04);
  border: 1px solid rgba(168, 85, 247, 0.22);
}
.sub-team-apply .req-docs__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sub-team-apply .req-docs__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-purple);
}
.sub-team-apply .req-docs__progress {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sub-team-muted);
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--sub-team-border);
}
.sub-team-apply .req-docs__progress[data-all-read="true"] {
  color: var(--sub-team-green);
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.06);
}

.sub-team-apply .req-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--dark, rgba(6, 6, 14, 0.45)) var(--light, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-text);
  text-align: left;
  cursor: pointer;
}
.sub-team-apply .req-doc[data-agreed="true"] {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.04);
}
.sub-team-apply .req-doc__badge {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: var(--sub-team-purple);
}
.sub-team-apply .req-doc[data-agreed="true"] .req-doc__badge {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.30);
  color: var(--sub-team-green);
}
.sub-team-apply .req-doc__title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--sub-team-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sub-team-apply .req-doc__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 100px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-muted);
}
.sub-team-apply .req-doc[data-agreed="true"] .req-doc__status {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.30);
  color: var(--sub-team-green);
}
.sub-team-apply .req-doc__chev {
  color: var(--sub-team-dim);
}

.sub-team-apply .composer-card {
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sub-team-apply .composer-card__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-muted);
}

.sub-team-apply .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sub-team-apply .field__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--sub-team-muted);
}
.sub-team-apply .field .req {
  color: var(--sub-team-coral);
}
.sub-team-apply .field__input,
.sub-team-apply .field__textarea,
.sub-team-apply .field__select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--sub-team-input-bg);
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-text);
  font-size: 13px;
  outline: none;
}
.sub-team-apply .field__textarea {
  min-height: 96px;
  resize: vertical;
}
.sub-team-apply .field__multi {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sub-team-apply .field__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--sub-team-text);
  cursor: pointer;
}

.sub-team-apply .eligibility-col {
  display: flex;
  flex-direction: column;
}
.sub-team-apply .eligibility-panel {
  padding: 20px;
  border-radius: 16px;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sub-team-apply .eligibility-panel__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-muted);
}
.sub-team-apply .elig-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sub-team-apply .elig-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--dark, rgba(6, 6, 14, 0.45)) var(--light, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--sub-team-border);
}
.sub-team-apply .elig-item[data-met="true"] {
  background: rgba(34, 197, 94, 0.04);
  border-color: rgba(34, 197, 94, 0.22);
}
.sub-team-apply .elig-item[data-met="false"] {
  background: rgba(245, 158, 11, 0.04);
  border-color: rgba(245, 158, 11, 0.22);
}
.sub-team-apply .elig-item__check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sub-team-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--sub-team-dim);
}
.sub-team-apply .elig-item[data-met="true"] .elig-item__check {
  background: var(--sub-team-green);
  border-color: var(--sub-team-green);
  color: #0a0a0a;
}
.sub-team-apply .elig-item[data-met="false"] .elig-item__check {
  color: var(--sub-team-amber);
  border-color: rgba(245, 158, 11, 0.3);
}
.sub-team-apply .elig-item__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--sub-team-text);
}

.sub-team-apply .submit-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--dark, rgba(6, 6, 14, 0.45)) var(--light, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--sub-team-border);
  flex-wrap: wrap;
}
.sub-team-apply .submit-bar__status {
  flex: 1;
  min-width: 160px;
}
.sub-team-apply .submit-bar__title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--sub-team-muted);
  text-transform: uppercase;
}
.sub-team-apply .submit-bar__title--ready,
.sub-team-apply .submit-bar__title[data-ready="true"] {
  color: var(--sub-team-green);
}
.sub-team-apply .submit-bar__sub {
  font-size: 11px;
  color: var(--sub-team-dim);
  margin-top: 2px;
  line-height: 1.5;
}

/* ── Composer meta — "{applicant} → {parent}" arrow flow ─── */
.sub-team-apply .composer-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sub-team-border);
  flex-wrap: wrap;
}
.sub-team-apply .composer-meta__selected {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--sub-team-text);
}
.sub-team-apply .composer-meta__arrow {
  color: var(--sub-team-dim);
  display: flex;
  align-items: center;
}
.sub-team-apply .composer-meta__arrow svg { width: 14px; height: 14px; }
.sub-team-apply .composer-meta__target {
  color: var(--sub-team-gold);
}

/* ── Applicant team picker (mockup §team-dropdown) ─────────── *
 * Trigger looks like an input row; popover menu is absolute-
 * positioned so it floats over the cards below instead of
 * shoving them down. Theme-aware backgrounds for light mode. */
.sub-team-apply .team-dropdown {
  position: relative;
  width: 100%;
}
.sub-team-apply .team-dropdown__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-radius: 11px;
  background: var(--dark, rgba(6, 6, 14, 0.55)) var(--light, rgba(255, 255, 255, 0.95));
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-text);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
}
.sub-team-apply .team-dropdown__trigger:hover {
  border-color: rgba(110, 237, 216, 0.28);
}
.sub-team-apply .team-dropdown__trigger[aria-expanded="true"] {
  border-color: rgba(110, 237, 216, 0.40);
  box-shadow: 0 0 14px rgba(110, 237, 216, 0.12);
}
.sub-team-apply .team-dropdown__chev {
  width: 18px;
  height: 18px;
  color: var(--sub-team-muted);
  transition: transform 0.25s;
}
.sub-team-apply .team-dropdown__trigger[aria-expanded="true"] .team-dropdown__chev {
  transform: rotate(180deg);
  color: var(--sub-team-teal);
}
.sub-team-apply .team-dropdown__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sub-team-apply .team-dropdown__name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sub-team-text);
}
.sub-team-apply .team-dropdown__meta {
  font-size: 10px;
  color: var(--sub-team-muted);
  letter-spacing: 0.04em;
}

.sub-team-apply .team-dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 200;
  padding: 6px;
  border-radius: 12px;
  background: var(--dark, rgba(12, 12, 26, 0.98)) var(--light, rgba(255, 255, 255, 0.98));
  backdrop-filter: blur(22px);
  border: 1px solid var(--sub-team-border);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sub-team-apply .team-dropdown__item {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 9px;
  background: transparent;
  border: none;
  color: var(--sub-team-text);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.sub-team-apply .team-dropdown__item:hover {
  background: var(--dark, rgba(255, 255, 255, 0.04)) var(--light, rgba(0, 0, 0, 0.04));
}
.sub-team-apply .team-dropdown__item[aria-selected="true"] {
  background: rgba(110, 237, 216, 0.08);
}
.sub-team-apply .team-dropdown__item[aria-selected="true"] .team-dropdown__name {
  color: var(--sub-team-teal);
}
.sub-team-apply .team-dropdown__check {
  color: var(--sub-team-teal);
  display: flex;
  align-items: center;
}

.sub-team-apply .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
}
.sub-team-apply .btn--primary {
  background: linear-gradient(135deg, rgba(110, 237, 216, 0.2), rgba(129, 140, 248, 0.08));
  border-color: rgba(110, 237, 216, 0.3);
  color: var(--sub-team-teal);
}
/* Ghost cancel — transparent fill in both themes, gentle border so it
 * sits next to the primary submit without screaming for attention. */
.sub-team-apply .btn--ghost {
  background: transparent;
  border-color: var(--sub-team-border);
  color: var(--sub-team-muted);
}
.sub-team-apply .btn--ghost:hover {
  border-color: var(--sub-team-border-strong);
  color: var(--sub-team-text);
}
.sub-team-apply .btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ── Topbar brand cluster (mockup §arena-topbar__brand) ────── */
.sub-team-apply .arena-topbar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.sub-team-apply .brand-home {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.sub-team-apply .brand-home:hover {
  border-color: var(--sub-team-border-strong);
  color: var(--sub-team-text);
}
.sub-team-apply .brand-home__divider {
  width: 1px;
  height: 18px;
  background: var(--sub-team-border);
}
.sub-team-apply .arena-topbar__logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.22), rgba(252, 179, 0, 0.10));
  border: 1px solid rgba(252, 179, 0, 0.35);
  color: var(--sub-team-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.sub-team-apply .u-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sub-team-apply .arena-topbar__title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--sub-team-text);
  text-transform: uppercase;
}
.sub-team-apply .arena-topbar__handle {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--sub-team-muted);
}
.sub-team-apply .arena-topbar__status {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.28);
  color: var(--sub-team-purple);
  flex-shrink: 0;
}

/* ── Page header (mockup hero) ─────────────────────────────── */
.sub-team-apply .page-header {
  padding: 18px 22px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sub-team-apply .page-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-gold);
}
.sub-team-apply .page-header__title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--sub-team-text);
  margin: 0;
}
.sub-team-apply .page-header__title strong {
  background: linear-gradient(135deg, var(--sub-team-gold), #ffd24a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-right: 4px;
}
.sub-team-apply .page-header__sub {
  font-size: 13px;
  line-height: 1.6;
  color: var(--sub-team-muted);
  margin: 0;
  max-width: 720px;
}

/* ── Eligibility progress bar (mockup §elig-progress) ────── */
.sub-team-apply .elig-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}
.sub-team-apply .elig-progress__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sub-team-muted);
}
.sub-team-apply .elig-progress__fraction {
  color: var(--sub-team-text);
  font-weight: 800;
}
.sub-team-apply .elig-progress__fraction--ready {
  color: var(--sub-team-green);
}
.sub-team-apply .elig-progress__track {
  height: 8px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.sub-team-apply .elig-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sub-team-amber), var(--sub-team-gold));
  transition: width 0.4s;
  box-shadow: 0 0 8px rgba(252, 179, 0, 0.25);
}
.sub-team-apply .elig-progress__fill[data-ready="true"] {
  background: linear-gradient(90deg, var(--sub-team-teal), var(--sub-team-green));
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

/* ── Eligibility item desc (newly rendered text under title) */
.sub-team-apply .elig-item__desc {
  font-size: 11px;
  color: var(--sub-team-muted);
  line-height: 1.5;
  margin-top: 2px;
}


/* === src/features/sub_team/pages/broadcast_compose/style.css === */
/* Broadcast compose page. Mirrors
 * assets/design/sub-team/subteam-broadcast-compose.html.
 */

.sub-team-broadcast-compose {
  --sub-team-bg: var(--dark, #06060e) var(--light, #f7f7fb);
  --sub-team-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --sub-team-border: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --sub-team-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --sub-team-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --sub-team-dim: var(--dark, #55556a) var(--light, #9595a8);
  --sub-team-gold: #fcb300;
  --sub-team-purple: #a855f7;
  --sub-team-coral: #ef4444;
  --sub-team-input-bg: var(--dark, rgba(255, 255, 255, 0.025)) var(--light, rgba(0, 0, 0, 0.03));
  --sub-team-input-focus: var(--dark, rgba(255, 255, 255, 0.04)) var(--light, rgba(0, 0, 0, 0.05));

  background: var(--sub-team-bg);
  color: var(--sub-team-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.sub-team-broadcast-compose .arena-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  background: var(--sub-team-glass);
  border-bottom: 1px solid var(--sub-team-border);
}
.sub-team-broadcast-compose .arena-topbar__left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sub-team-broadcast-compose .back-btn {
  width: 38px;
  height: 38px;
  /* Fixed-size flex child: without this the default `flex-shrink: 1` lets a
     long sibling title squash the square button into an oval. */
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--sub-team-muted);
  text-decoration: none;
}
.sub-team-broadcast-compose .topbar-title {
  display: flex;
  flex-direction: column;
}
.sub-team-broadcast-compose .topbar-title__eyebrow {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
}
.sub-team-broadcast-compose .topbar-title__main {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sub-team-text);
}
.sub-team-broadcast-compose .arena-topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sub-team-broadcast-compose .topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--sub-team-border);
  background: var(--sub-team-glass);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sub-team-muted);
  cursor: pointer;
}
.sub-team-broadcast-compose .topbar-btn--primary {
  background: linear-gradient(135deg, var(--sub-team-purple), #7e22ce);
  color: #fff;
  border-color: transparent;
}
.sub-team-broadcast-compose .topbar-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.sub-team-broadcast-compose .broadcast-banner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding: 14px 28px 0;
}
.sub-team-broadcast-compose .broadcast-banner__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(168, 85, 247, 0.02));
  border: 1px solid rgba(168, 85, 247, 0.25);
}
.sub-team-broadcast-compose .broadcast-banner__icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.28);
  color: var(--sub-team-purple);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sub-team-broadcast-compose .broadcast-banner__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-purple);
}
.sub-team-broadcast-compose .broadcast-banner__text {
  font-size: 12.5px;
  color: var(--sub-team-muted);
  margin-top: 2px;
}
.sub-team-broadcast-compose .broadcast-banner__text strong { color: var(--sub-team-text); }

.sub-team-broadcast-compose .composer-page {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  padding: 22px 28px 100px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 980px) {
  .sub-team-broadcast-compose .composer-page {
    grid-template-columns: 1fr;
    padding: 20px 16px 110px;
    gap: 16px;
  }
  /* Side-panel now uses the shared mobile drawer pattern (slides up
     from the bottom-bar's 옵션 button) — keep the base translateY(100%)
     off-screen state. No in-flow override here. */
}
@media (max-width: 500px) {
  .sub-team-broadcast-compose .arena-topbar {
    padding: 10px 12px;
    gap: 6px;
    flex-wrap: wrap;
  }
  .sub-team-broadcast-compose .topbar-title__main { font-size: 12px; }
  .sub-team-broadcast-compose .topbar-title__eyebrow { font-size: 9px; }
  .sub-team-broadcast-compose .autosave-chip {
    padding: 3px 8px;
    font-size: 9px;
  }
  .sub-team-broadcast-compose .composer-page {
    padding: 14px 12px 80px;
    gap: 12px;
  }
  .sub-team-broadcast-compose .composer { gap: 14px; }
  .sub-team-broadcast-compose .title-input {
    font-size: 24px;
    padding: 10px 0;
  }
  .sub-team-broadcast-compose .sub-team-broadcast-body {
    font-size: 14px;
  }
  .sub-team-broadcast-compose .side-card { padding: 14px; }
}
.sub-team-broadcast-compose .composer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.sub-team-broadcast-compose .title-input {
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 34px;
  font-weight: 700;
  color: var(--sub-team-text);
}
.sub-team-broadcast-compose .title-divider {
  height: 1px;
  background: linear-gradient(90deg, var(--sub-team-border), transparent);
}
.sub-team-broadcast-compose .body-editor {
  min-height: 340px;
  padding: 22px;
  border-radius: 14px;
  background: var(--sub-team-input-bg);
  border: 1px solid var(--sub-team-border);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--sub-team-text);
  outline: none;
  resize: vertical;
  font-family: inherit;
}

.sub-team-broadcast-compose .side-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sub-team-broadcast-compose .side-card {
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sub-team-broadcast-compose .side-card__title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sub-team-broadcast-compose .locked-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-radius: 11px;
  background: rgba(252, 179, 0, 0.04);
  border: 1px solid rgba(252, 179, 0, 0.22);
}
.sub-team-broadcast-compose .locked-row__avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.32), rgba(110, 237, 216, 0.12));
  border: 1px solid rgba(252, 179, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--sub-team-gold);
  flex-shrink: 0;
}
.sub-team-broadcast-compose .locked-row__body { flex: 1; min-width: 0; }
.sub-team-broadcast-compose .locked-row__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--sub-team-text);
}
.sub-team-broadcast-compose .locked-row__meta {
  font-size: 11px;
  color: var(--sub-team-muted);
  margin-top: 2px;
}
.sub-team-broadcast-compose .locked-row__lock {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(252, 179, 0, 0.08);
  border: 1px solid rgba(252, 179, 0, 0.22);
  color: var(--sub-team-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sub-team-broadcast-compose .broadcast-target {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 11px;
  background: rgba(168, 85, 247, 0.05);
  border: 1px solid rgba(168, 85, 247, 0.22);
}
.sub-team-broadcast-compose .broadcast-target__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sub-team-broadcast-compose .broadcast-target__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.30);
  color: var(--sub-team-purple);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sub-team-broadcast-compose .broadcast-target__lock {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: 0.10em;
  color: var(--sub-team-dim);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sub-team-broadcast-compose .broadcast-target__note {
  font-size: 11px;
  color: var(--sub-team-dim);
  line-height: 1.5;
}
.sub-team-broadcast-compose .danger-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.12);
  color: var(--sub-team-coral);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  justify-content: center;
}

/* ── Composer upgrade (Phase 2): autosave chip, rich editor wrap,
 *    space toggle + space-type chips, tag input. */
.sub-team-broadcast-compose .autosave-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--sub-team-border);
  background: var(--sub-team-input-bg);
  color: var(--sub-team-muted);
}
.sub-team-broadcast-compose .autosave-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentcolor;
  opacity: 0.7;
}
.sub-team-broadcast-compose .autosave-chip[data-state="saved"] {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.32);
  background: rgba(34, 197, 94, 0.06);
}
.sub-team-broadcast-compose .autosave-chip[data-state="saving"] {
  color: var(--sub-team-cyan);
  border-color: rgba(34, 211, 238, 0.32);
  background: rgba(34, 211, 238, 0.06);
}
.sub-team-broadcast-compose .autosave-chip[data-state="error"] {
  color: var(--sub-team-coral);
  border-color: rgba(239, 68, 68, 0.32);
  background: rgba(239, 68, 68, 0.06);
}

.sub-team-broadcast-compose .sub-team-broadcast-body {
  min-height: 280px;
  color: var(--sub-team-text);
  font-size: 15px;
  line-height: 1.6;
}

.sub-team-broadcast-compose .u-hidden {
  display: none;
}

/* The global `.switch__*` rules reference `--qc-*` CSS variables that
 * are only defined inside `.arena` scope. The broadcast composer
 * lives OUTSIDE `.arena`, so the track + thumb resolve to undefined
 * (transparent) and the toggle renders as an empty oval. Re-declare
 * the colors against the sub-team palette already scoped on this page. */
.sub-team-broadcast-compose .switch__track {
  background: var(--sub-team-input-bg);
  border-color: var(--sub-team-border);
}
.sub-team-broadcast-compose .switch__thumb {
  background: var(--sub-team-dim);
}
.sub-team-broadcast-compose .switch[aria-checked="true"] .switch__track {
  background: rgba(252, 179, 0, 0.20);
  border-color: rgba(252, 179, 0, 0.45);
}
.sub-team-broadcast-compose .switch[aria-checked="true"] .switch__thumb {
  background: var(--sub-team-gold);
  box-shadow: 0 0 8px rgba(252, 179, 0, 0.5);
}
/* Cancel browser button chrome on the switch so only our track/thumb
 * visuals show. */
.sub-team-broadcast-compose button.switch {
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
}

/* Attachments — file list + dropzone inside the right-panel side-card.
   The base `.file-dropzone` rule sets `display: none` and is only
   unhidden by parent-scoped overrides; without this block the dropzone
   stays invisible. Mirrors the dashed-purple style used by the docs
   composer (.sub-team-doc-compose .attachments .file-dropzone). */
.sub-team-broadcast-compose .file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 6px;
}
.sub-team-broadcast-compose .file-row__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(168, 85, 247, 0.10);
  color: #a855f7;
  flex-shrink: 0;
}
.sub-team-broadcast-compose .file-row__icon svg { width: 14px; height: 14px; }
.sub-team-broadcast-compose .file-row__body { flex: 1; min-width: 0; }
.sub-team-broadcast-compose .file-row__name {
  font-size: 12.5px;
  font-weight: 600;
  color: #12121a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sub-team-broadcast-compose .file-row__meta {
  font-size: 10.5px;
  color: #6b6b80;
  margin-top: 2px;
}
.sub-team-broadcast-compose .file-row__remove {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #6b6b80;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.sub-team-broadcast-compose .file-row__remove:hover {
  color: #db2780;
  border-color: rgba(219, 39, 128, 0.32);
}
.sub-team-broadcast-compose .file-row__remove svg { width: 12px; height: 12px; }
.sub-team-broadcast-compose .file-dropzone {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(168, 85, 247, 0.03);
  border: 1.5px dashed rgba(168, 85, 247, 0.32);
  color: #a855f7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.sub-team-broadcast-compose .file-dropzone:hover {
  background: rgba(168, 85, 247, 0.06);
  border-color: rgba(168, 85, 247, 0.5);
}
.sub-team-broadcast-compose .file-dropzone svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.sub-team-broadcast-compose .file-dropzone__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}
.sub-team-broadcast-compose .file-dropzone__label small {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #8888a8;
}


/* === src/features/sub_team/pages/bylaws/style.css === */
/* Public bylaws reader page. Mirrors
 * assets/design/sub-team/bylaws-section.html.
 */

.sub-team-bylaws {
  --sub-team-bg: var(--dark, #06060e) var(--light, #f7f7fb);
  --sub-team-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --sub-team-border: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --sub-team-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --sub-team-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --sub-team-dim: var(--dark, #55556a) var(--light, #9595a8);
  --sub-team-gold: #fcb300;
  --sub-team-teal: #6eedd8;
  --sub-team-violet: #818cf8;
  --sub-team-coral: #ef4444;
  --sub-team-input-bg: var(--dark, rgba(255, 255, 255, 0.025)) var(--light, rgba(0, 0, 0, 0.03));

  /* Page lives OUTSIDE SocialLayout / TeamArenaLayout so it owns its
   * own scroll container per `feedback_arena_page_scroll.md`. */
  background: var(--sub-team-bg);
  color: var(--sub-team-text);
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
}

.sub-team-bylaws .arena-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  padding: 18px 28px;
  background: var(--sub-team-glass);
  border-bottom: 1px solid var(--sub-team-border);
}
.sub-team-bylaws .arena-topbar__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sub-team-bylaws .brand-home {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}
.sub-team-bylaws .brand-home__divider {
  width: 1px;
  height: 18px;
  background: var(--sub-team-border);
}
.sub-team-bylaws .arena-topbar__logo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, rgba(110, 237, 216, 0.32), rgba(110, 237, 216, 0.12));
  border: 1px solid rgba(110, 237, 216, 0.32);
  color: var(--sub-team-teal);
  flex-shrink: 0;
}
.sub-team-bylaws .u-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sub-team-bylaws .arena-topbar__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--sub-team-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sub-team-bylaws .arena-topbar__handle {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--sub-team-dim);
}
.sub-team-bylaws .arena-topbar__status {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: rgba(110, 237, 216, 0.08);
  color: var(--sub-team-teal);
  border: 1px solid rgba(110, 237, 216, 0.22);
  margin-left: 6px;
}
.sub-team-bylaws .arena-topbar__status--active {
  background: rgba(110, 237, 216, 0.08);
  color: var(--sub-team-teal);
  border-color: rgba(110, 237, 216, 0.22);
}

/* Topbar right-aligned actions + hud button */
.sub-team-bylaws .arena-topbar {
  justify-content: space-between;
}
.sub-team-bylaws .arena-topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sub-team-bylaws .hud-btn {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sub-team-bylaws .arena-topbar__status--parent {
  background: rgba(252, 179, 0, 0.08);
  color: var(--sub-team-gold);
  border-color: rgba(252, 179, 0, 0.22);
}

/* Page header: row of __main (eyebrow + title + sub) + __actions (view-switch) */
.sub-team-bylaws .page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.sub-team-bylaws .page-header__main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Mockup constrained the copy to ~760px, but the page container is
   * 1300px wide so we let the header span the full width on desktop.
   * Narrow viewports still wrap naturally because the flex parent
   * lays it out as a column on mobile. */
  flex: 1 1 auto;
  width: 100%;
}
.sub-team-bylaws .page-header__actions {
  display: flex;
  align-items: center;
}

/* View switch tabs */
.sub-team-bylaws .view-switch {
  display: inline-flex;
  padding: 4px;
  border-radius: 12px;
  background: var(--sub-team-input-bg);
  border: 1px solid var(--sub-team-border);
}
.sub-team-bylaws .view-switch__btn {
  padding: 8px 16px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--sub-team-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}
.sub-team-bylaws
  .view-switch__btn[aria-selected="true"][data-v="parent"] {
  background: rgba(252, 179, 0, 0.08);
  color: var(--sub-team-gold);
  border-color: rgba(252, 179, 0, 0.25);
}
.sub-team-bylaws
  .view-switch__btn[aria-selected="true"][data-v="child"] {
  background: rgba(110, 237, 216, 0.08);
  color: var(--sub-team-teal);
  border-color: rgba(110, 237, 216, 0.25);
}
.sub-team-bylaws .page-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-violet);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(129, 140, 248, 0.10);
  border: 1px solid rgba(129, 140, 248, 0.22);
  align-self: flex-start;
}
.sub-team-bylaws .page-header__title {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--sub-team-text);
  letter-spacing: -0.01em;
}
.sub-team-bylaws .page-header__title strong {
  color: var(--sub-team-gold);
}
.sub-team-bylaws .page-header__sub {
  font-size: 13px;
  color: var(--sub-team-muted);
  line-height: 1.6;
  max-width: 760px;
}
.sub-team-bylaws .page-header__sub strong {
  color: var(--sub-team-text);
}

/* Parent-link card (only when there's a recognized parent) */
.sub-team-bylaws .parent-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(252, 179, 0, 0.05);
  border: 1px solid rgba(252, 179, 0, 0.28);
  text-decoration: none;
  color: inherit;
}
.sub-team-bylaws .parent-link__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(252, 179, 0, 0.10);
  border: 1px solid rgba(252, 179, 0, 0.32);
  color: var(--sub-team-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sub-team-bylaws .parent-link__body {
  flex: 1;
  min-width: 0;
}
.sub-team-bylaws .parent-link__eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-gold);
}
.sub-team-bylaws .parent-link__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--sub-team-text);
  margin-top: 2px;
}
.sub-team-bylaws .parent-link__sub {
  font-size: 11px;
  color: var(--sub-team-dim);
  margin-top: 4px;
}
.sub-team-bylaws .parent-link__chev {
  color: var(--sub-team-gold);
  display: inline-flex;
  align-items: center;
}

.sub-team-bylaws .page {
  max-width: 1300px;
  margin: 0 auto;
  padding: 24px 20px 80px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.sub-team-bylaws .bylaws-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sub-team-bylaws .group-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 4px;
}
.sub-team-bylaws .group-header__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sub-team-bylaws .group-header__icon--parent {
  background: rgba(252, 179, 0, 0.08);
  border: 1px solid rgba(252, 179, 0, 0.25);
  color: var(--sub-team-gold);
}
.sub-team-bylaws .group-header__icon--child {
  background: rgba(110, 237, 216, 0.08);
  border: 1px solid rgba(110, 237, 216, 0.25);
  color: var(--sub-team-teal);
}
.sub-team-bylaws .group-header__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sub-team-text);
}
.sub-team-bylaws .group-header__count {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  color: var(--sub-team-dim);
  margin-left: auto;
}
/* Add-tile (mockup `.bylaw-add`) — last cell of `.bylaws-grid`, sized
 * the same as a bylaw card with a dashed accent border. `data-role`
 * picks the color (parent → gold, child → teal). */
.sub-team-bylaws .bylaw-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  border-radius: 14px;
  min-height: 180px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
  background: rgba(252, 179, 0, 0.03);
  border: 1px dashed rgba(252, 179, 0, 0.25);
  color: var(--sub-team-gold);
}
.sub-team-bylaws .bylaw-add:hover {
  background: rgba(252, 179, 0, 0.08);
  border-color: rgba(252, 179, 0, 0.45);
  transform: translateY(-2px);
}
.sub-team-bylaws .bylaw-add[data-role="child"] {
  background: rgba(110, 237, 216, 0.03);
  border-color: rgba(110, 237, 216, 0.25);
  color: var(--sub-team-teal);
}
.sub-team-bylaws .bylaw-add[data-role="child"]:hover {
  background: rgba(110, 237, 216, 0.08);
  border-color: rgba(110, 237, 216, 0.45);
}

/* Cards are clickable links to the post detail page. */
.sub-team-bylaws .bylaw-card {
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease,
    box-shadow 0.15s ease;
}
.sub-team-bylaws .bylaw-card:hover {
  border-color: rgba(110, 237, 216, 0.32);
  transform: translateY(-2px);
}
.sub-team-bylaws .bylaw-card--parent:hover {
  border-color: rgba(252, 179, 0, 0.32);
}

.sub-team-bylaws .bylaws-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.sub-team-bylaws .bylaw-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
}
.sub-team-bylaws .bylaw-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sub-team-bylaws .bylaw-card__num {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  /* Sub-team (CLUB BYLAWS) — teal, matches the .group-header--child
   * accent. Parent override below switches to gold. */
  background: rgba(110, 237, 216, 0.08);
  color: var(--sub-team-teal);
  border: 1px solid rgba(110, 237, 216, 0.22);
}
.sub-team-bylaws .bylaw-card--parent .bylaw-card__num {
  background: rgba(252, 179, 0, 0.08);
  color: var(--sub-team-gold);
  border-color: rgba(252, 179, 0, 0.22);
}
.sub-team-bylaws .bylaw-card__title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--sub-team-text);
}
.sub-team-bylaws .bylaw-card__excerpt {
  font-size: 12px;
  color: var(--sub-team-muted);
  line-height: 1.55;
  /* Clamp long excerpts to 4 lines so cards in the same grid row stay
     visually balanced. Trailing content is replaced with "…" via the
     standard `-webkit-line-clamp` recipe. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sub-team-bylaws .bylaw-card__meta {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--sub-team-dim);
}
.sub-team-bylaws .bylaw-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* `margin-top: auto` pushes the foot row to the bottom of the card
     so the like / comment counts line up across cards of different
     content lengths in the same grid row. */
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--sub-team-border);
}
.sub-team-bylaws .bylaw-card__stats {
  display: flex;
  gap: 12px;
}
.sub-team-bylaws .bylaw-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--sub-team-dim);
}

.sub-team-bylaws .empty-state {
  padding: 24px;
  text-align: center;
  color: var(--sub-team-muted);
  font-style: italic;
  border-radius: 12px;
  background: var(--sub-team-glass);
  border: 1px dashed var(--sub-team-border);
}


/* === src/features/sub_team/pages/deregister/style.css === */
/* Deregister sub-team confirmation page. Mirrors
 * assets/design/sub-team/parent-deregister.html.
 */

.sub-team-deregister {
  --sub-team-bg: var(--dark, #06060e) var(--light, #f7f7fb);
  --sub-team-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --sub-team-border: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --sub-team-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --sub-team-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --sub-team-dim: var(--dark, #55556a) var(--light, #9595a8);
  --sub-team-gold: #fcb300;
  --sub-team-teal: #6eedd8;
  --sub-team-coral: #ef4444;
  --sub-team-green: #22c55e;
  --sub-team-amber: #f59e0b;
  --sub-team-purple: #a855f7;
  --sub-team-input-bg: var(--dark, rgba(255, 255, 255, 0.025)) var(--light, rgba(0, 0, 0, 0.03));

  background: var(--sub-team-bg);
  color: var(--sub-team-text);
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
}

/* ── Topbar (mockup brand row) ───────────────────────────────── */
.sub-team-deregister .arena-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  padding: 18px 28px;
  background: var(--sub-team-glass);
  border-bottom: 1px solid var(--sub-team-border);
}
.sub-team-deregister .arena-topbar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.sub-team-deregister .brand-home {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-muted);
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
}
.sub-team-deregister .brand-home__divider {
  width: 1px;
  height: 22px;
  background: var(--sub-team-border);
  margin: 0 4px;
  flex-shrink: 0;
}
.sub-team-deregister .arena-topbar__logo--parent {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: rgba(252, 179, 0, 0.10);
  border: 1px solid rgba(252, 179, 0, 0.28);
  color: var(--sub-team-gold);
  flex-shrink: 0;
}
.sub-team-deregister .arena-topbar__title--parent {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--sub-team-text);
}
.sub-team-deregister .arena-topbar__handle {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
}
.sub-team-deregister .u-col {
  display: flex;
  flex-direction: column;
}
.sub-team-deregister .arena-topbar__status {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 100px;
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid;
}
.sub-team-deregister .arena-topbar__status--danger {
  background: rgba(239, 68, 68, 0.10);
  color: var(--sub-team-coral);
  border-color: rgba(239, 68, 68, 0.30);
}

.sub-team-deregister .page {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 80px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Context card (sub-team being deregistered) ──────────────── */
.sub-team-deregister .context {
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
  display: flex;
  align-items: center;
  gap: 14px;
}
.sub-team-deregister .avatar {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}
.sub-team-deregister .avatar--lg { width: 56px; height: 56px; font-size: 16px; }
.sub-team-deregister .avatar--purple {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.32), rgba(168, 85, 247, 0.10));
  border: 1px solid rgba(168, 85, 247, 0.30);
  color: var(--sub-team-purple);
}
.sub-team-deregister .context__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sub-team-deregister .context__name {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--sub-team-text);
}
.sub-team-deregister .context__handle {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 10px;
  color: var(--sub-team-muted);
  letter-spacing: 0.06em;
}
.sub-team-deregister .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 100px;
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid;
}
.sub-team-deregister .pill--approved {
  background: rgba(34, 197, 94, 0.10);
  color: var(--sub-team-green);
  border-color: rgba(34, 197, 94, 0.28);
}

/* ── Dereg head sub-paragraph ────────────────────────────────── */
.sub-team-deregister .dereg__sub {
  font-size: 13px;
  color: var(--sub-team-muted);
  margin-top: 4px;
  line-height: 1.55;
}
.sub-team-deregister .dereg__sub strong {
  color: var(--sub-team-text);
  font-weight: 700;
}

/* ── Consequences list ───────────────────────────────────────── */
.sub-team-deregister .consequences {
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--dark, rgba(6, 6, 14, 0.45)) var(--light, rgba(0, 0, 0, 0.025));
  border: 1px solid var(--sub-team-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sub-team-deregister .consequences__title {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-muted);
}
.sub-team-deregister .consequences__item {
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: var(--sub-team-text);
  line-height: 1.55;
}
.sub-team-deregister .consequences__item svg {
  color: var(--sub-team-green);
  flex-shrink: 0;
  margin-top: 3px;
}
.sub-team-deregister .consequences__item strong {
  color: var(--sub-team-gold);
  font-weight: 700;
}
.sub-team-deregister .consequences__item--warn svg {
  color: var(--sub-team-amber);
}

/* ── Notification preview card ───────────────────────────────── */
.sub-team-deregister .notif-preview {
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--dark, rgba(252, 179, 0, 0.04)) var(--light, rgba(252, 179, 0, 0.04));
  border: 1px solid rgba(252, 179, 0, 0.22);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sub-team-deregister .notif-preview__label {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-gold);
}
.sub-team-deregister .notif-preview__body {
  display: flex;
  gap: 12px;
}
.sub-team-deregister .notif-preview__avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  background: rgba(252, 179, 0, 0.12);
  border: 1px solid rgba(252, 179, 0, 0.28);
  color: var(--sub-team-gold);
  flex-shrink: 0;
}
.sub-team-deregister .notif-preview__content {
  flex: 1;
  min-width: 0;
}
.sub-team-deregister .notif-preview__title {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--sub-team-text);
  margin-bottom: 4px;
}
.sub-team-deregister .notif-preview__title em {
  color: var(--sub-team-gold);
  font-style: normal;
}
.sub-team-deregister .notif-preview__text {
  font-size: 12px;
  color: var(--sub-team-text);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.sub-team-deregister .notif-preview__text--placeholder {
  color: var(--sub-team-dim);
  font-style: italic;
}

/* ── Checkbox label hint ──────────────────────────────────────── */
.sub-team-deregister .checkbox__hint {
  display: block;
  font-size: 11px;
  color: var(--sub-team-muted);
  font-weight: 400;
  margin-top: 4px;
}

/* ── Actions row ──────────────────────────────────────────────── */
.sub-team-deregister .dereg__actions {
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 500px) {
  .sub-team-deregister .arena-topbar { padding: 12px 14px; }
  .sub-team-deregister .arena-topbar__brand { gap: 8px; flex-wrap: wrap; }
  .sub-team-deregister .brand-home__divider { display: none; }
  .sub-team-deregister .page { padding: 16px 14px 60px; gap: 14px; }
  .sub-team-deregister .dereg { padding: 20px 16px; }
  .sub-team-deregister .context { flex-direction: column; align-items: flex-start; }
  .sub-team-deregister .dereg__actions { flex-direction: column-reverse; align-items: stretch; }
  .sub-team-deregister .dereg__actions .btn { justify-content: center; }
}

.sub-team-deregister .dereg {
  padding: 26px 30px;
  border-radius: 18px;
  background: var(--sub-team-glass);
  border: 1px solid rgba(239, 68, 68, 0.25);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sub-team-deregister .dereg__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sub-team-deregister .dereg__icon {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sub-team-coral);
  flex-shrink: 0;
}
.sub-team-deregister .dereg__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--sub-team-text);
  line-height: 1.25;
}

.sub-team-deregister .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sub-team-deregister .field__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sub-team-muted);
}
.sub-team-deregister .field__textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--sub-team-input-bg);
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-text);
  font-size: 13px;
  outline: none;
  resize: vertical;
}
/* Without an explicit `::placeholder` rule the browser falls back to
   `color × ~0.5 opacity`, which against `--sub-team-text` ends up
   nearly as bright as real text on dark mode. Pin to a dimmer tone
   so the hint reads as a hint. */
.sub-team-deregister .field__textarea::placeholder {
  color: var(--dark, rgba(240, 240, 245, 0.28)) var(--light, rgba(18, 18, 26, 0.42));
}
.sub-team-deregister .req { color: var(--sub-team-coral); }

/* The global `.checkbox` primitive (`src/common/components/checkbox/`)
 * sizes itself to 1rem × 1rem and paints an inset box-shadow + filled
 * background. When the same class is reused as our custom *label*
 * wrapper, those rules leak through and squash the entire row to
 * 16×16, forcing the label text to wrap one word per line. Cancel
 * every piece of the primitive's box, then lay the label out as a
 * full-width flex row so the text fills the remaining space. Mirrors
 * the working fix on `.sub-team-leave-parent .checkbox`. */
.sub-team-deregister .checkbox {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.sub-team-deregister .checkbox[data-state="checked"] {
  background-color: transparent;
  box-shadow: none;
  color: inherit;
}
/* Visually hide the native input so the browser's default checkbox
 * glyph never leaks through — only `.checkbox__box` is visible. */
.sub-team-deregister .checkbox input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}
.sub-team-deregister .checkbox__label {
  min-width: 0;
  flex: 1;
}
.sub-team-deregister .checkbox__box {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--sub-team-input-bg);
  border: 1px solid var(--sub-team-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex-shrink: 0;
}
.sub-team-deregister .checkbox input:checked ~ .checkbox__box {
  background: var(--sub-team-coral);
  border-color: var(--sub-team-coral);
  color: #fff;
}
.sub-team-deregister .checkbox__label {
  font-size: 13px;
  color: var(--sub-team-text);
  line-height: 1.5;
}

.sub-team-deregister .u-flex { display: flex; }
.sub-team-deregister .u-gap-10 { gap: 10px; }
.sub-team-deregister .u-justify-between { justify-content: space-between; }

.sub-team-deregister .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid;
}
.sub-team-deregister .btn--ghost {
  background: transparent;
  border-color: var(--sub-team-border);
  color: var(--sub-team-muted);
}
.sub-team-deregister .btn--danger {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.35);
  color: var(--sub-team-coral);
}
.sub-team-deregister .btn:disabled { opacity: 0.3; cursor: not-allowed; }


/* === src/features/sub_team/pages/detail/style.css === */
/* Sub-team detail (activity dashboard) page. Mirrors
 * assets/design/sub-team/subteam-management-detail-page.html.
 */

.sub-team-detail {
  --sub-team-bg: var(--dark, #06060e) var(--light, #f7f7fb);
  --sub-team-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --sub-team-border: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --sub-team-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --sub-team-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --sub-team-dim: var(--dark, #55556a) var(--light, #9595a8);
  --sub-team-gold: #fcb300;
  --sub-team-teal: #6eedd8;
  --sub-team-cyan: #22d3ee;
  --sub-team-violet: #818cf8;
  --sub-team-coral: #ef4444;
  --sub-team-amber: #f59e0b;
  --sub-team-purple: #a855f7;
  --sub-team-input-bg: var(--dark, rgba(255, 255, 255, 0.025)) var(--light, rgba(0, 0, 0, 0.03));

  /* Detail page now lives OUTSIDE TeamArenaLayout, so it owns its own
   * background + scroll container. Per `feedback_arena_page_scroll.md`,
   * each page-scoped scroll wrapper must set explicit height + overflow
   * because `body` is `overflow:hidden; height:100%` globally. */
  background: var(--sub-team-bg);
  color: var(--sub-team-text);
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
}

/* ── Topbar (mockup `arena-topbar__brand` row) ──────────────────── */
.sub-team-detail .arena-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  padding: 18px 28px;
  background: var(--sub-team-glass);
  border-bottom: 1px solid var(--sub-team-border);
}
.sub-team-detail .arena-topbar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.sub-team-detail .brand-home {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.sub-team-detail .brand-home__divider {
  width: 1px;
  height: 22px;
  background: var(--sub-team-border);
  margin: 0 4px;
  flex-shrink: 0;
}
.sub-team-detail .arena-topbar__logo--child {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: rgba(110, 237, 216, 0.10);
  border: 1px solid rgba(110, 237, 216, 0.25);
  color: var(--sub-team-teal);
  flex-shrink: 0;
}
.sub-team-detail .arena-topbar__title--child {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--sub-team-text);
}
.sub-team-detail .arena-topbar__handle {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
}
.sub-team-detail .u-col {
  display: flex;
  flex-direction: column;
}
.sub-team-detail .arena-topbar__status {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 100px;
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid;
}
.sub-team-detail .arena-topbar__status--active {
  background: rgba(34, 197, 94, 0.10);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.30);
}

.sub-team-detail .page {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 24px 28px 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  align-self: center;
}

.sub-team-detail .team-hero {
  position: relative;
  padding: 24px 28px;
  border-radius: 18px;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
}
.sub-team-detail .team-hero__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--sub-team-text);
  margin-bottom: 4px;
}
.sub-team-detail .team-hero__handle {
  font-size: 11px;
  color: var(--sub-team-muted);
  letter-spacing: 0.06em;
}

.sub-team-detail .avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.sub-team-detail .avatar--lg { width: 56px; height: 56px; font-size: 16px; }
.sub-team-detail .avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.sub-team-detail .avatar--teal {
  background: linear-gradient(135deg, rgba(110, 237, 216, 0.32), rgba(110, 237, 216, 0.12));
  color: var(--sub-team-teal);
}

.sub-team-detail .window-toggle {
  display: inline-flex;
  padding: 4px;
  border-radius: 12px;
  background: var(--sub-team-input-bg);
  border: 1px solid var(--sub-team-border);
}
.sub-team-detail .window-toggle__btn {
  padding: 7px 14px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--sub-team-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.sub-team-detail .window-toggle__btn[aria-selected="true"] {
  background: rgba(34, 211, 238, 0.10);
  color: var(--sub-team-cyan);
  border-color: rgba(34, 211, 238, 0.25);
}

.sub-team-detail .metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 720px) {
  .sub-team-detail .metric-grid { grid-template-columns: 1fr; }
}
.sub-team-detail .metric {
  padding: 16px 18px;
  border-radius: 13px;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
}
.sub-team-detail .metric__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.sub-team-detail .metric__value {
  font-size: 24px;
  font-weight: 800;
  color: var(--sub-team-text);
}
.sub-team-detail .metric__delta {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--sub-team-dim);
  margin-top: 6px;
}
.sub-team-detail .metric--posts .metric__label { color: var(--sub-team-cyan); }
.sub-team-detail .metric--spaces .metric__label { color: var(--sub-team-violet); }
.sub-team-detail .metric--members .metric__label { color: var(--sub-team-teal); }
.sub-team-detail .metric--growth .metric__label { color: var(--sub-team-gold); }

/* ── Trend chart card ──────────────────────────────────────────── */
.sub-team-detail .trend {
  padding: 18px 20px 14px;
  border-radius: 14px;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sub-team-detail .trend__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.sub-team-detail .trend__title {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sub-team-text);
}
.sub-team-detail .trend__legend {
  display: flex;
  gap: 14px;
}
.sub-team-detail .trend__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 10px;
  color: var(--sub-team-muted);
  letter-spacing: 0.06em;
}
.sub-team-detail .trend__legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.sub-team-detail .trend__legend-dot--posts {
  background: var(--sub-team-cyan);
  box-shadow: 0 0 6px var(--sub-team-cyan);
}
.sub-team-detail .trend__legend-dot--members {
  background: var(--sub-team-teal);
  box-shadow: 0 0 6px var(--sub-team-teal);
}
.sub-team-detail .trend__chart {
  width: 100%;
  height: 120px;
}
.sub-team-detail .trend__svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Member search row ─────────────────────────────────────────── */
.sub-team-detail .member-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sub-team-detail .member-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 9px;
  background: var(--sub-team-input-bg);
  border: 1px solid var(--sub-team-border);
  flex: 1;
  min-width: 0;
}
.sub-team-detail .member-search__icon {
  color: var(--sub-team-dim);
  display: inline-flex;
  align-items: center;
}
.sub-team-detail .member-search__input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--sub-team-text);
  font-size: 12px;
  outline: none;
}
.sub-team-detail .member-search__input::placeholder {
  color: var(--sub-team-dim);
}
.sub-team-detail .member-sort {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--sub-team-dim);
}

/* Danger zone card title gradient → solid coral */
.sub-team-detail .card__title--danger {
  color: var(--sub-team-coral);
}

.sub-team-detail .card {
  padding: 20px;
  border-radius: 16px;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sub-team-detail .card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sub-team-detail .card__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--sub-team-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sub-team-detail .card__dash {
  flex: 1;
  height: 1px;
  background: var(--sub-team-border);
}
.sub-team-detail .card__meta {
  font-size: 11px;
  color: var(--sub-team-muted);
}

.sub-team-detail .member-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
}
.sub-team-detail .member-table thead th {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
  text-align: left;
  padding: 8px 14px;
}
.sub-team-detail .member-table tbody td {
  padding: 10px 14px;
  background: var(--sub-team-input-bg);
  border-top: 1px solid var(--sub-team-border);
  border-bottom: 1px solid var(--sub-team-border);
  font-size: 13px;
  color: var(--sub-team-text);
  vertical-align: middle;
}
.sub-team-detail .member-table tbody td:first-child {
  border-left: 1px solid var(--sub-team-border);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.sub-team-detail .member-table tbody td:last-child {
  border-right: 1px solid var(--sub-team-border);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.sub-team-detail .member-handle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sub-team-detail .member-handle__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sub-team-detail .member-handle__name { font-weight: 600; }
.sub-team-detail .member-handle__role {
  font-size: 9px;
  color: var(--sub-team-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sub-team-detail .member-metric {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--sub-team-border);
  font-size: 11px;
  color: var(--sub-team-text);
}

.sub-team-detail .notice {
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(110, 237, 216, 0.04);
  border: 1px solid rgba(110, 237, 216, 0.22);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.sub-team-detail .notice__icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(110, 237, 216, 0.10);
  border: 1px solid rgba(110, 237, 216, 0.22);
  color: var(--sub-team-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sub-team-detail .notice__body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sub-team-detail .notice__title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sub-team-teal);
}
.sub-team-detail .notice__text {
  font-size: 13px;
  color: var(--sub-team-muted);
  line-height: 1.55;
}

.sub-team-detail .danger-zone {
  padding: 18px 22px;
  border-radius: 14px;
  background: rgba(239, 68, 68, 0.03);
  border: 1px solid rgba(239, 68, 68, 0.22);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.sub-team-detail .danger-zone__icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.22);
  color: var(--sub-team-coral);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sub-team-detail .danger-zone__body { flex: 1; }
.sub-team-detail .danger-zone__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-coral);
}

.sub-team-detail .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid;
  text-decoration: none;
}
.sub-team-detail .btn--danger {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.35);
  color: var(--sub-team-coral);
}

.sub-team-detail .inline-note {
  font-size: 11px;
  color: var(--sub-team-dim);
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--sub-team-border);
}

/* Mobile (≤500px): tighten paddings, stack hero, allow table to scroll
 * horizontally so the four columns don't squash, shrink topbar chrome. */
@media (max-width: 500px) {
  .sub-team-detail .arena-topbar {
    padding: 10px 12px;
  }
  .sub-team-detail .arena-topbar__brand {
    gap: 8px;
    flex-wrap: wrap;
  }
  .sub-team-detail .arena-topbar__logo--child {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }
  .sub-team-detail .arena-topbar__title--child {
    font-size: 13px;
  }
  .sub-team-detail .arena-topbar__handle {
    font-size: 10px;
  }
  .sub-team-detail .arena-topbar__status {
    padding: 3px 8px;
    font-size: 9px;
  }
  .sub-team-detail .page {
    padding: 14px 12px 60px;
    gap: 12px;
  }
  .sub-team-detail .team-hero {
    padding: 16px;
    grid-template-columns: auto 1fr;
    gap: 12px;
  }
  .sub-team-detail .team-hero__title {
    font-size: 18px;
  }
  .sub-team-detail .avatar--lg {
    width: 44px;
    height: 44px;
    font-size: 14px;
  }
  .sub-team-detail .metric {
    padding: 12px 14px;
  }
  .sub-team-detail .metric__value {
    font-size: 20px;
  }
  .sub-team-detail .notice {
    padding: 12px 14px;
    gap: 10px;
  }
  .sub-team-detail .notice__text {
    font-size: 12px;
  }
  .sub-team-detail .card {
    padding: 14px;
  }
  .sub-team-detail .member-head {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .sub-team-detail .member-search {
    width: 100%;
  }
  .sub-team-detail .member-search__input {
    width: 100%;
  }
  /* Horizontal scroll for the activity table — keep the four-column
   * layout intact instead of crushing it. */
  .sub-team-detail .member-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .sub-team-detail .member-table thead,
  .sub-team-detail .member-table tbody,
  .sub-team-detail .member-table tr {
    display: table;
    width: 100%;
    table-layout: auto;
  }
  .sub-team-detail .member-table thead th,
  .sub-team-detail .member-table tbody td {
    padding: 8px 10px;
    font-size: 12px;
  }
  .sub-team-detail .member-handle {
    gap: 8px;
  }
  .sub-team-detail .danger-zone {
    padding: 14px 16px;
    gap: 12px;
  }
  .sub-team-detail .danger-zone__icon {
    width: 36px;
    height: 36px;
  }
}

/* ── Direct announcement card (이 하위팀에만 공지) ──
 * Mirrors `.direct-msg` block from
 * `assets/design/sub-team/subteam-management-detail-page.html`.
 * Scoped under `.sub-team-detail` so class names ("direct-msg",
 * "direct-msg__title", "direct-msg__body", "direct-msg__foot",
 * "direct-msg__note") can't collide with any global utility.
 */
.sub-team-detail .direct-msg {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sub-team-detail .direct-msg__title {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--dark, rgba(6, 6, 14, 0.55))
    var(--light, rgba(255, 255, 255, 0.85));
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-text);
  font-family: var(--font-display, "Orbitron", system-ui);
  font-size: 14px;
  font-weight: 700;
  outline: none;
}
.sub-team-detail .direct-msg__title::placeholder {
  color: var(--sub-team-muted);
  font-weight: 500;
}
.sub-team-detail .direct-msg__title:focus {
  border-color: rgba(168, 85, 247, 0.35);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.1);
}
.sub-team-detail .direct-msg__body {
  width: 100%;
  min-height: 100px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--dark, rgba(6, 6, 14, 0.55))
    var(--light, rgba(255, 255, 255, 0.85));
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-text);
  font-size: 13px;
  line-height: 1.6;
  outline: none;
  resize: vertical;
}
.sub-team-detail .direct-msg__body::placeholder {
  color: var(--sub-team-muted);
}
.sub-team-detail .direct-msg__body:focus {
  border-color: rgba(168, 85, 247, 0.35);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.1);
}
.sub-team-detail .direct-msg__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.sub-team-detail .direct-msg__note {
  font-family: var(--font-display, "Orbitron", system-ui);
  font-size: 10px;
  color: var(--sub-team-dim);
  letter-spacing: 0.06em;
}
.sub-team-detail .direct-msg__error {
  font-size: 12px;
  color: var(--sub-team-coral);
}
/* Send button — uses the existing `.btn .btn--primary` scaffold but
 * recoloured to the mockup's purple-ish gradient so it visually maps to
 * "direct, not broadcast". Text colour space-toggles so the light
 * theme doesn't end up with near-white-on-near-white. */
.sub-team-detail .direct-msg [data-testid="sub-team-direct-msg-send"] {
  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 0.3),
    rgba(168, 85, 247, 0.14)
  );
  border-color: rgba(168, 85, 247, 0.4);
  color: var(--dark, #e9d5ff) var(--light, #6b21a8);
}
.sub-team-detail .direct-msg [data-testid="sub-team-direct-msg-send"]:hover {
  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 0.42),
    rgba(168, 85, 247, 0.2)
  );
}
.sub-team-detail .direct-msg [data-testid="sub-team-direct-msg-send"][disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* History — past direct announcements stacked under the compose card. */
.sub-team-detail .direct-msg__history {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sub-team-detail .direct-msg__history-title {
  font-family: var(--font-display, "Orbitron", system-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-muted);
}
.sub-team-detail .direct-msg__empty {
  font-size: 12px;
  color: var(--sub-team-dim);
  font-style: italic;
}
.sub-team-detail .direct-msg__row {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--dark, rgba(6, 6, 14, 0.4))
    var(--light, rgba(255, 255, 255, 0.65));
  border: 1px solid var(--sub-team-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sub-team-detail .direct-msg__row:hover {
  border-color: rgba(168, 85, 247, 0.4);
  background: var(--dark, rgba(168, 85, 247, 0.06))
    var(--light, rgba(168, 85, 247, 0.06));
}
.sub-team-detail .direct-msg__row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.sub-team-detail .direct-msg__row-title {
  font-family: var(--font-display, "Orbitron", system-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--sub-team-text);
}
.sub-team-detail .direct-msg__row-when {
  font-size: 11px;
  color: var(--sub-team-dim);
  letter-spacing: 0.04em;
}
.sub-team-detail .direct-msg__row-body {
  font-size: 12px;
  line-height: 1.55;
  color: var(--sub-team-muted);
}


/* === src/features/sub_team/pages/doc_compose/style.css === */
/* Sub-team doc compose page. Mirrors
 * assets/design/sub-team/subteam-doc-compose.html.
 */

.sub-team-doc-compose {
  --sub-team-bg: var(--dark, #06060e) var(--light, #f7f7fb);
  --sub-team-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --sub-team-border: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --sub-team-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --sub-team-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --sub-team-dim: var(--dark, #55556a) var(--light, #9595a8);
  --sub-team-purple: #a855f7;
  --sub-team-coral: #ef4444;
  --sub-team-input-bg: var(--dark, rgba(255, 255, 255, 0.025)) var(--light, rgba(0, 0, 0, 0.03));

  background: var(--sub-team-bg);
  color: var(--sub-team-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.sub-team-doc-compose .arena-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  background: var(--sub-team-glass);
  border-bottom: 1px solid var(--sub-team-border);
}
.sub-team-doc-compose .arena-topbar__left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sub-team-doc-compose .back-btn {
  width: 38px;
  height: 38px;
  /* Fixed-size flex child: without this the default `flex-shrink: 1` lets a
     long sibling title squash the square button into an oval. */
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--sub-team-muted);
}
.sub-team-doc-compose .topbar-title {
  display: flex;
  flex-direction: column;
}
.sub-team-doc-compose .topbar-title__eyebrow {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
}
.sub-team-doc-compose .topbar-title__main {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sub-team-doc-compose .arena-topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sub-team-doc-compose .topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--sub-team-border);
  background: var(--sub-team-glass);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sub-team-muted);
  cursor: pointer;
}
.sub-team-doc-compose .topbar-btn--primary {
  background: linear-gradient(135deg, var(--sub-team-purple), #7e22ce);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 14px rgba(168, 85, 247, 0.28);
}

.sub-team-doc-compose .composer-page {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  padding: 22px 28px 60px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.sub-team-doc-compose .composer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.sub-team-doc-compose .composer__eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
}
.sub-team-doc-compose .composer__eyebrow-sep { opacity: 0.5; }
.sub-team-doc-compose .title-input {
  width: 100%;
  padding: 12px 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 28px;
  font-weight: 700;
  color: var(--sub-team-text);
  line-height: 1.2;
}
.sub-team-doc-compose .title-divider {
  height: 1px;
  background: linear-gradient(90deg, var(--sub-team-border), transparent);
}
.sub-team-doc-compose .body-editor {
  min-height: 420px;
  padding: 22px;
  border-radius: 14px;
  background: var(--sub-team-input-bg);
  border: 1px solid var(--sub-team-border);
  font-size: 15px;
  line-height: 1.75;
  color: var(--sub-team-text);
  outline: none;
  resize: vertical;
  font-family: inherit;
}
.sub-team-doc-compose .body-editor:focus {
  border-color: rgba(168, 85, 247, 0.28);
}

.sub-team-doc-compose .side-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: start;
}
.sub-team-doc-compose .side-card {
  padding: 18px;
  border-radius: 14px;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sub-team-doc-compose .side-card__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
}

.sub-team-doc-compose .required-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  /* Dark / light flip — the `rgba(6,6,14,0.45)` voidish original makes
   * the card near-black in light theme. */
  background: var(--dark, rgba(6, 6, 14, 0.45))
    var(--light, rgba(255, 255, 255, 0.85));
  border: 1px solid var(--sub-team-border);
  cursor: pointer;
}
.sub-team-doc-compose .required-row[data-on="true"] {
  background: rgba(168, 85, 247, 0.06);
  border-color: rgba(168, 85, 247, 0.35);
}
.sub-team-doc-compose .required-row__body {
  flex: 1;
  min-width: 0;
}
.sub-team-doc-compose .required-row__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--sub-team-text);
}
.sub-team-doc-compose .required-row[data-on="true"] .required-row__title {
  color: var(--sub-team-purple);
}
.sub-team-doc-compose .required-row__desc {
  font-size: 11.5px;
  color: var(--sub-team-muted);
  line-height: 1.5;
  margin-top: 4px;
}
.sub-team-doc-compose .required-row__input {
  flex-shrink: 0;
}

.sub-team-doc-compose .meta-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sub-team-doc-compose .meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 12px;
}
.sub-team-doc-compose .meta-row + .meta-row {
  border-top: 1px dashed var(--sub-team-border);
}
.sub-team-doc-compose .meta-row__k {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
}
.sub-team-doc-compose .meta-row__v {
  font-size: 12px;
  color: var(--sub-team-text);
  font-weight: 600;
}

.sub-team-doc-compose .danger-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.12);
  color: var(--sub-team-coral);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ── Autosave chip + topbar buttons ───────────────────────── */
.sub-team-doc-compose .autosave {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.22);
  color: #22c55e;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.sub-team-doc-compose .topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--sub-team-border);
  background: var(--sub-team-glass);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sub-team-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.sub-team-doc-compose .topbar-btn:hover {
  border-color: rgba(168, 85, 247, 0.28);
  color: var(--sub-team-purple);
}
.sub-team-doc-compose .topbar-btn svg { width: 13px; height: 13px; }
.sub-team-doc-compose .topbar-btn--primary {
  background: linear-gradient(135deg, var(--sub-team-purple), #7e22ce);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 14px rgba(168, 85, 247, 0.28);
}
.sub-team-doc-compose .topbar-btn--primary:hover {
  background: linear-gradient(135deg, #c084fc, var(--sub-team-purple));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 22px rgba(168, 85, 247, 0.45);
  transform: translateY(-1px);
}

/* ── Edit banner (Document editor · Rich text + 첨부) ──────── */
.sub-team-doc-compose .edit-banner {
  /* Full-bleed banner — sits between topbar and composer-page, edge to
     edge. flex-shrink: 0 keeps it from being squeezed when the page is
     viewport-fit and the editor body flex-fills below. */
  width: 100%;
  margin: 0;
  padding: 14px 28px 0;
  flex-shrink: 0;
}
.sub-team-doc-compose .edit-banner__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(168, 85, 247, 0.02));
  border: 1px solid rgba(168, 85, 247, 0.25);
}
.sub-team-doc-compose .edit-banner__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.28);
  color: var(--sub-team-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sub-team-doc-compose .edit-banner__icon svg { width: 16px; height: 16px; }
.sub-team-doc-compose .edit-banner__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-purple);
  margin-bottom: 4px;
}
.sub-team-doc-compose .edit-banner__text {
  font-size: 13px;
  color: var(--sub-team-muted);
  line-height: 1.6;
}
.sub-team-doc-compose .edit-banner__text strong { color: var(--sub-team-text); }

/* ── Attachments section ──────────────────────────────────── *
 * `align-items: stretch` and `flex-wrap: nowrap` must be set
 * explicitly — the unscoped `.attachments` rule earlier in this
 * file (`align-items: center; flex-wrap: wrap`) leaks otherwise
 * and the file-row + attachment-list shrink to content width. */
.sub-team-doc-compose .attachments {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 10px;
}
/* Cap the editor body so the page doesn't keep growing as the user
   types — past this height the editor scrolls internally, which keeps
   the attachments section in view instead of being pushed off-screen.
   Base `.ratel-editor .re-content` already sets `overflow-y: auto`;
   tighten `max-height` from 75vh → 48vh for the doc composer
   specifically (leaves room for title + side panel + attachments). */
.sub-team-doc-compose .ratel-editor .re-content {
  max-height: 48vh;
  min-height: 280px;
}
/* Placeholders across doc/broadcast composers — title, body (Ratel
   editor pseudo-placeholder), and tag input. The shared `--text-dim`
   reads as still too close to the real text color on dark mode, so
   pin to a more aggressive translucent tone scoped to these pages. */
.sub-team-doc-compose .title-input::placeholder,
.sub-team-broadcast-compose .title-input::placeholder,
.sub-team-broadcast-compose .tag-input__field::placeholder {
  color: var(--dark, rgba(240, 240, 245, 0.28)) var(--light, rgba(18, 18, 26, 0.42));
}
.sub-team-doc-compose .ratel-editor .re-content[data-empty="true"]:not(:focus)::before,
.sub-team-broadcast-compose .ratel-editor .re-content[data-empty="true"]:not(:focus)::before {
  color: var(--dark, rgba(240, 240, 245, 0.28)) var(--light, rgba(18, 18, 26, 0.42));
}
.sub-team-doc-compose .attachment-list { width: 100%; }
.sub-team-doc-compose .attachments__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-muted);
}
.sub-team-doc-compose .attachments__title svg { width: 13px; height: 13px; }
.sub-team-doc-compose .attachments__count {
  color: var(--sub-team-purple);
  margin-left: 6px;
}
.sub-team-doc-compose .attachment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Bumped to 3-class specificity (`.attachments .file-dropzone`) so we
 * outrank the *unscoped* `.file-dropzone` rule earlier in this file
 * that sets `display: none; flex-direction: column`. Without this the
 * icon stacks above the text and the row collapses width-wise. */
.sub-team-doc-compose .attachments .file-dropzone {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(168, 85, 247, 0.03);
  border: 1.5px dashed rgba(168, 85, 247, 0.32);
  color: var(--sub-team-purple);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.sub-team-doc-compose .attachments .file-dropzone:hover:not(:disabled) {
  background: rgba(168, 85, 247, 0.06);
  border-color: rgba(168, 85, 247, 0.5);
}
.sub-team-doc-compose .attachments .file-dropzone:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sub-team-doc-compose .attachments .file-dropzone svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.sub-team-doc-compose .attachments .file-dropzone span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.sub-team-doc-compose .attachments .file-dropzone small {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--sub-team-dim);
  text-transform: none;
  font-weight: 500;
}

/* ── Meta row accent variant ──────────────────────────────── */
.sub-team-doc-compose .meta-row__v--accent { color: var(--sub-team-purple); font-weight: 700; }

/* ── Bottom bar (word count / chars / saved status) ───────── */
.sub-team-doc-compose .bottom-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 28px;
  background: var(--sub-team-glass);
  border-top: 1px solid var(--sub-team-border);
  margin-top: auto;
}
.sub-team-doc-compose .bottom-bar__left {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.sub-team-doc-compose .bottom-bar__stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--sub-team-muted);
}
.sub-team-doc-compose .bottom-bar__stat svg { width: 13px; height: 13px; }
.sub-team-doc-compose .bottom-bar__stat strong { color: var(--sub-team-text); font-weight: 700; }

/* ── Attachment rows in the composer (mockup .file-row grid) ────
 * Selector includes `.attachment-list` to outrank the *unscoped*
 * `.file-row` rules earlier in this file (which set `display: flex`
 * and `margin-bottom: 8px`). Without the extra ancestor the row
 * collapses to content-width and breaks the four-column grid. */
.sub-team-doc-compose .attachment-list .file-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 14px;
  border-radius: 11px;
  /* Was a hardcoded dark glass (`rgba(6,6,14,0.55)`), which left the
     file row reading as a dark card sitting on top of the light-mode
     background. Use a space-toggle so dark mode keeps the glass look
     while light mode reads as a subtle tint over the page. */
  background: var(--dark, rgba(6, 6, 14, 0.55)) var(--light, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--sub-team-border);
  transition: border-color 0.2s;
}
.sub-team-doc-compose .attachment-list .file-row:hover {
  border-color: rgba(168, 85, 247, 0.28);
}
.sub-team-doc-compose .attachment-list .file-row__icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  flex-shrink: 0;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.22);
  color: var(--sub-team-purple);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sub-team-doc-compose .attachment-list .file-row__icon svg {
  width: 16px;
  height: 16px;
}
.sub-team-doc-compose .attachment-list .file-row__icon--pdf {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.25);
  color: #ef4444;
}
.sub-team-doc-compose .attachment-list .file-row__icon--img {
  background: rgba(110, 237, 216, 0.06);
  border-color: rgba(110, 237, 216, 0.22);
  color: #6eedd8;
}
.sub-team-doc-compose .attachment-list .file-row__body {
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.sub-team-doc-compose .attachment-list .file-row__name {
  font-size: 13px;
  color: var(--sub-team-text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
}
.sub-team-doc-compose .attachment-list .file-row__meta {
  font-size: 10px;
  color: var(--sub-team-dim);
  letter-spacing: 0.06em;
  margin-top: 2px;
  text-transform: uppercase;
}
.sub-team-doc-compose .attachment-list .file-row__meta strong {
  color: var(--sub-team-purple);
}
.sub-team-doc-compose .attachment-list .file-row__progress {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.22);
  color: #22c55e;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.sub-team-doc-compose .attachment-list .file-row__progress svg {
  width: 10px;
  height: 10px;
}
.sub-team-doc-compose .attachment-list .file-row__del {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.sub-team-doc-compose .attachment-list .file-row__del:hover {
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
}
.sub-team-doc-compose .attachment-list .file-row__del svg {
  width: 12px;
  height: 12px;
}

/* ── doc-item updated / foot / stats / hint (mockup port) ────── *
 * Mirrors `assets/design/sub-team/subteam-management-page.html`
 * §141-179 — scoped under `.sub-team-management` so the unscoped
 * `.doc-item` rules in the global cascade don't override us.
 */
.sub-team-management .doc-item__updated {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--sub-team-dim, #6b6b80);
  white-space: nowrap;
}
.sub-team-management .doc-item__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.sub-team-management .doc-item__stats {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--sub-team-dim, #6b6b80);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.sub-team-management .doc-item__stats > span {
  display: inline-flex;
  align-items: center;
}
.sub-team-management .doc-item__stats svg {
  width: 11px;
  height: 11px;
  margin-right: 4px;
  vertical-align: -1px;
}
.sub-team-management .doc-item__hint {
  font-size: 11px;
  color: var(--sub-team-dim, #6b6b80);
  letter-spacing: 0.04em;
}
.sub-team-management .doc-item[data-required="true"] .doc-item__hint {
  color: var(--sub-team-purple, #a855f7);
}

/* ── Required-reading switch (violet pill) ────────────────── */
.sub-team-doc-compose .switch {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--sub-team-border, rgba(255, 255, 255, 0.06));
  cursor: pointer;
  transition: all 0.25s;
  flex-shrink: 0;
  display: inline-block;
}
.sub-team-doc-compose .switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sub-team-muted, #8888a8);
  transition: all 0.25s;
}
.sub-team-doc-compose .switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sub-team-doc-compose .switch:has(input:checked),
.sub-team-doc-compose .switch[aria-checked="true"] {
  background: rgba(168, 85, 247, 0.30);
  border-color: rgba(168, 85, 247, 0.48);
}
.sub-team-doc-compose .switch:has(input:checked)::after,
.sub-team-doc-compose .switch[aria-checked="true"]::after {
  transform: translateX(16px);
  background: var(--sub-team-purple);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

/* ── Mobile layout adjustments (mirrors mockup) ───────────── */
@media (max-width: 980px) {
  .sub-team-doc-compose .composer-page {
    grid-template-columns: 1fr;
    padding: 20px 16px 110px;
    gap: 18px;
  }
  /* Side-panel uses the shared mobile drawer pattern (slides up from
     the bottom-bar's 옵션 button). Keep base translateY(100%) state. */
  .sub-team-doc-compose .autosave { display: none; }
  .sub-team-doc-compose .edit-banner { padding: 12px 16px 0; }
}
@media (max-width: 500px) {
  .sub-team-doc-compose .arena-topbar {
    padding: 12px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .sub-team-doc-compose .arena-topbar__left {
    flex: 1;
    min-width: 0;
  }
  .sub-team-doc-compose .arena-topbar__right { flex-shrink: 0; gap: 6px; }
  .sub-team-doc-compose .topbar-title__eyebrow { display: none; }
  .sub-team-doc-compose .topbar-title__main {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sub-team-doc-compose .topbar-btn {
    height: 34px;
    padding: 0 10px;
    font-size: 9px;
  }
  .sub-team-doc-compose .topbar-btn svg { width: 12px; height: 12px; }
  .sub-team-doc-compose .title-input { font-size: 24px; padding: 10px 0; }
  .sub-team-doc-compose .composer { gap: 16px; }
  .sub-team-doc-compose .side-card { padding: 14px; }
  .sub-team-doc-compose .bottom-bar { padding: 10px 14px; }
}


/* === src/features/sub_team/pages/leave_parent/style.css === */
/* Leave-parent page. Mirrors
 * assets/design/sub-team/child-leave-parent.html.
 */

.sub-team-leave-parent {
  --sub-team-bg: var(--dark, #06060e) var(--light, #f7f7fb);
  --sub-team-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --sub-team-border: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --sub-team-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --sub-team-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --sub-team-dim: var(--dark, #55556a) var(--light, #9595a8);
  --sub-team-gold: #fcb300;
  --sub-team-teal: #6eedd8;
  --sub-team-amber: #f59e0b;
  --sub-team-green: #22c55e;
  --sub-team-coral: #ef4444;
  --sub-team-input-bg: var(--dark, rgba(255, 255, 255, 0.025)) var(--light, rgba(0, 0, 0, 0.03));

  background: var(--sub-team-bg);
  color: var(--sub-team-text);
  /* Page-scoped scroll container — `body` is `overflow:hidden;
   * height:100%` globally, so each page needs its own.
   * Memory rule `feedback_arena_page_scroll.md`. */
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Topbar (mockup `arena-topbar__brand` row) ──────────────────── */
.sub-team-leave-parent .arena-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  padding: 18px 28px;
  background: var(--sub-team-glass);
  border-bottom: 1px solid var(--sub-team-border);
}
.sub-team-leave-parent .arena-topbar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.sub-team-leave-parent .brand-home {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.sub-team-leave-parent .brand-home__divider {
  width: 1px;
  height: 22px;
  background: var(--sub-team-border);
  margin: 0 4px;
  flex-shrink: 0;
}
.sub-team-leave-parent .arena-topbar__logo--child {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: rgba(110, 237, 216, 0.10);
  border: 1px solid rgba(110, 237, 216, 0.25);
  color: var(--sub-team-teal);
  flex-shrink: 0;
}
.sub-team-leave-parent .arena-topbar__title--child {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--sub-team-text);
}
.sub-team-leave-parent .arena-topbar__handle {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
}
.sub-team-leave-parent .u-col {
  display: flex;
  flex-direction: column;
}
.sub-team-leave-parent .arena-topbar__status {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 100px;
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid;
}
.sub-team-leave-parent .arena-topbar__status--caution {
  background: rgba(245, 158, 11, 0.10);
  color: var(--sub-team-amber);
  border-color: rgba(245, 158, 11, 0.30);
}

/* ── Page header (eyebrow + title + sub) ────────────────────────── */
.sub-team-leave-parent .page-header {
  padding: 4px 2px 0;
}
.sub-team-leave-parent .page-header__main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sub-team-leave-parent .page-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sub-team-muted);
}
.sub-team-leave-parent .page-header__title {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--sub-team-text);
  line-height: 1.25;
  margin: 0;
}
.sub-team-leave-parent .page-header__title--child strong {
  color: var(--sub-team-amber);
  font-weight: 800;
}
.sub-team-leave-parent .page-header__sub {
  font-size: 13px;
  color: var(--sub-team-muted);
  line-height: 1.6;
  max-width: 620px;
}

.sub-team-leave-parent .page {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 80px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sub-team-leave-parent .notice {
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 13px;
}
.sub-team-leave-parent .notice--warn {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: var(--sub-team-amber);
}

/* ── Current tie (avatar → tie-line → avatar → parent meta → pill) ── */
.sub-team-leave-parent .current-tie {
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  gap: 16px;
  align-items: center;
}
.sub-team-leave-parent .avatar {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-weight: 800;
  font-size: 13px;
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.30), rgba(110, 237, 216, 0.10));
  border: 1px solid rgba(252, 179, 0, 0.30);
  color: var(--sub-team-gold);
  flex-shrink: 0;
}
.sub-team-leave-parent .avatar--lg {
  width: 56px;
  height: 56px;
  font-size: 16px;
}
.sub-team-leave-parent .avatar--teal {
  background: linear-gradient(135deg, rgba(110, 237, 216, 0.30), rgba(110, 237, 216, 0.08));
  border-color: rgba(110, 237, 216, 0.30);
  color: var(--sub-team-teal);
}
.sub-team-leave-parent .tie-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--sub-team-gold);
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sub-team-leave-parent .tie-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sub-team-gold);
  box-shadow: 0 0 8px var(--sub-team-gold);
}
.sub-team-leave-parent .tie-dot--child {
  background: var(--sub-team-teal);
  box-shadow: 0 0 8px var(--sub-team-teal);
}
.sub-team-leave-parent .tie-dash {
  width: 28px;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--sub-team-gold) 0,
    var(--sub-team-gold) 3px,
    transparent 3px,
    transparent 5px,
    var(--sub-team-gold) 5px,
    var(--sub-team-gold) 8px,
    transparent 8px,
    transparent 10px,
    var(--sub-team-gold) 10px,
    var(--sub-team-gold) 13px,
    transparent 13px,
    transparent 15px,
    var(--sub-team-gold) 15px,
    var(--sub-team-gold) 18px,
    transparent 18px
  );
  opacity: 0.6;
}
.sub-team-leave-parent .tie-meta {
  min-width: 0;
}
.sub-team-leave-parent .tie-meta__name {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--sub-team-text);
}
.sub-team-leave-parent .tie-meta__sub {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 10px;
  color: var(--sub-team-muted);
  letter-spacing: 0.06em;
}
.sub-team-leave-parent .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 100px;
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid;
}
.sub-team-leave-parent .pill--approved {
  background: rgba(34, 197, 94, 0.10);
  color: var(--sub-team-green);
  border-color: rgba(34, 197, 94, 0.28);
}
.sub-team-leave-parent .pill--approved::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sub-team-green);
  box-shadow: 0 0 6px var(--sub-team-green);
}

.sub-team-leave-parent .leave {
  padding: 26px 28px;
  border-radius: 18px;
  background: var(--sub-team-glass);
  border: 1px solid rgba(245, 158, 11, 0.28);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sub-team-leave-parent .leave__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sub-team-leave-parent .leave__icon {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sub-team-amber);
  flex-shrink: 0;
}
.sub-team-leave-parent .leave__title {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--sub-team-text);
  line-height: 1.25;
}
.sub-team-leave-parent .leave__sub {
  font-size: 13px;
  color: var(--sub-team-muted);
  margin-top: 4px;
  line-height: 1.55;
}
.sub-team-leave-parent .leave__sub strong {
  color: var(--sub-team-text);
  font-weight: 700;
}
.sub-team-leave-parent .leave__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.sub-team-leave-parent .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
}
.sub-team-leave-parent .btn--ghost {
  background: transparent;
  border-color: var(--sub-team-border);
  color: var(--sub-team-muted);
}
.sub-team-leave-parent .btn--danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.06));
  border-color: rgba(239, 68, 68, 0.40);
  color: var(--sub-team-coral);
}
.sub-team-leave-parent .btn--danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Mobile breakpoint — collapse 5-col tie grid into stacked rows. */
@media (max-width: 500px) {
  .sub-team-leave-parent .arena-topbar {
    padding: 12px 14px;
  }
  .sub-team-leave-parent .arena-topbar__brand {
    gap: 8px;
    flex-wrap: wrap;
  }
  .sub-team-leave-parent .brand-home__divider {
    display: none;
  }
  .sub-team-leave-parent .page {
    padding: 16px 14px 60px;
    gap: 14px;
  }
  .sub-team-leave-parent .page-header__title {
    font-size: 20px;
  }
  .sub-team-leave-parent .current-tie {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .sub-team-leave-parent .tie-line {
    flex-direction: row;
    justify-content: center;
  }
  .sub-team-leave-parent .leave {
    padding: 20px 16px;
  }
  .sub-team-leave-parent .leave__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .sub-team-leave-parent .leave__actions .btn {
    justify-content: center;
  }
}

.sub-team-leave-parent .keep-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.04);
  border: 1px solid rgba(34, 197, 94, 0.22);
}
.sub-team-leave-parent .keep-list__title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-green);
  margin-bottom: 6px;
}
.sub-team-leave-parent .keep-list__item {
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: var(--sub-team-text);
  line-height: 1.55;
}
.sub-team-leave-parent .keep-list__item svg {
  color: var(--sub-team-green);
  flex-shrink: 0;
  margin-top: 3px;
}

.sub-team-leave-parent .lose-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.22);
}
.sub-team-leave-parent .lose-list__title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-coral);
  margin-bottom: 6px;
}
.sub-team-leave-parent .lose-list__item {
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: var(--sub-team-text);
  line-height: 1.55;
}
.sub-team-leave-parent .lose-list__item svg {
  color: var(--sub-team-coral);
  flex-shrink: 0;
  margin-top: 3px;
}

.sub-team-leave-parent .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sub-team-leave-parent .field__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-muted);
}
.sub-team-leave-parent .field__textarea {
  width: 100%;
  min-height: 90px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--sub-team-input-bg);
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-text);
  font-size: 13px;
  outline: none;
  resize: vertical;
}
.sub-team-leave-parent .field__textarea::placeholder {
  color: var(--dark, rgba(240, 240, 245, 0.28)) var(--light, rgba(18, 18, 26, 0.42));
}
.sub-team-leave-parent .field__hint {
  font-size: 11px;
  color: var(--sub-team-dim);
}

.sub-team-leave-parent .checkbox {
  /* `inline-flex` shrunk this row to fit-content, which forced the
   * label to wrap roughly one word per line. Use full-width `flex`
   * with `min-width: 0` on the label so the text fills the remaining
   * row instead. `position: relative` anchors the visually-hidden
   * native input so it doesn't escape and render a default checkbox
   * somewhere in the viewport. The reset bits (background, box-shadow,
   * border-radius, width/height) cancel the global `.checkbox`
   * primitive rule that targets the common Checkbox component
   * (`src/common/components/checkbox/style.css`) — without these the
   * dark inset shadow + 1rem square fixed-size leaks through and
   * makes the entire row look like a rendered checkbox. */
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
/* Belt-and-suspenders: cancel the checked-state override from the
 * global primitive rule too (it would otherwise repaint the label
 * teal once the box flips). */
.sub-team-leave-parent .checkbox[data-state="checked"] {
  background-color: transparent;
  box-shadow: none;
  color: inherit;
}
/* Visually hide the native input completely (clip + zero-size) so
 * the browser's default checkbox glyph + outline never leaks through
 * — only our custom `.checkbox__box` is visible. */
.sub-team-leave-parent .checkbox input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}
.sub-team-leave-parent .checkbox__box {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--sub-team-input-bg);
  /* Explicit light/dark border colors — pre-toggle `--sub-team-border`
   * was rendering too dark in light theme because Tailwind's element
   * reset gives the wrapping label an inherited 1px border. Locking
   * the value at this rule wins specificity. */
  border: 1px solid
    var(--dark, rgba(255, 255, 255, 0.10)) var(--light, rgba(0, 0, 0, 0.12));
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex-shrink: 0;
  margin-top: 1px;
  box-sizing: border-box;
}
.sub-team-leave-parent .checkbox input:checked ~ .checkbox__box {
  background: var(--sub-team-amber);
  border-color: var(--sub-team-amber);
  color: #0a0a0a;
}
.sub-team-leave-parent .checkbox__label {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--sub-team-text);
  line-height: 1.5;
}

.sub-team-leave-parent .u-flex {
  display: flex;
}
.sub-team-leave-parent .u-gap-10 {
  gap: 10px;
}
.sub-team-leave-parent .u-justify-between {
  justify-content: space-between;
}

.sub-team-leave-parent .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid;
}
.sub-team-leave-parent .btn--ghost {
  background: transparent;
  border-color: var(--sub-team-border);
  color: var(--sub-team-muted);
}
.sub-team-leave-parent .btn--danger {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.35);
  color: var(--sub-team-coral);
}
.sub-team-leave-parent .btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}


/* === src/features/sub_team/pages/management/style.css === */
/* Sub-team management page — arena glass/dark aesthetic.
 * Matches HTML mockups in assets/design/sub-team/subteam-management-page.html.
 * Uses the space toggle (var(--dark, ...) var(--light, ...)) so colors
 * respond to the global theme switcher.
 */

.sub-team-management {
  --sub-team-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --sub-team-border: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --sub-team-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --sub-team-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --sub-team-dim: var(--dark, #55556a) var(--light, #9595a8);
  --sub-team-gold: #fcb300;
  --sub-team-teal: #6eedd8;
  --sub-team-purple: #a855f7;
  --sub-team-amber: #f59e0b;
  --sub-team-green: #22c55e;
  --sub-team-coral: #ef4444;
  --sub-team-input-bg: var(--dark, rgba(255, 255, 255, 0.025)) var(--light, rgba(0, 0, 0, 0.03));

  /* Background + min-height inherited from the wrapping `.team-arena`
   * layout — declaring our own would create a horizontal seam between
   * the topbar's reserved area (team-arena bg) and the content (this
   * page's bg) because the two backgrounds are slightly different
   * cream tones. */
  color: var(--sub-team-text);
}

.sub-team-management .page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sub-team-management .u-col {
  display: flex;
  flex-direction: column;
}
.sub-team-management .u-gap-10 { gap: 10px; }
.sub-team-management .u-flex { display: flex; }
.sub-team-management .u-justify-end { justify-content: flex-end; }
.sub-team-management .u-justify-between { justify-content: space-between; }

.sub-team-management .autosave-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.22);
  color: var(--sub-team-green);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sub-team-management .activation {
  position: relative;
  padding: 22px 26px;
  border-radius: 18px;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
}
.sub-team-management .activation[data-on="true"] {
  border-color: rgba(252, 179, 0, 0.28);
}
.sub-team-management .activation__icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sub-team-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sub-team-muted);
}
.sub-team-management .activation[data-on="true"] .activation__icon {
  background: rgba(252, 179, 0, 0.10);
  border-color: rgba(252, 179, 0, 0.28);
  color: var(--sub-team-gold);
}
.sub-team-management .activation__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
  margin-bottom: 4px;
}
.sub-team-management .activation[data-on="true"] .activation__label {
  color: var(--sub-team-gold);
}
.sub-team-management .activation__title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--sub-team-text);
}

/* (Switch CSS lives in a single block at the end of this management
 * section, mirroring the mockup's `:checked ~ .switch__track::after`
 * pattern. The earlier `::before`-based version was a duplicate that
 * rendered a second thumb on top of the mockup one — removed.) */

.sub-team-management .tabs-nav {
  position: sticky;
  top: 60px;
  z-index: 5;
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 13px;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.sub-team-management .tabs-nav__btn {
  flex: 1;
  min-width: max-content;
  padding: 11px 16px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--sub-team-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.sub-team-management .tabs-nav__btn[aria-selected="true"] {
  background: rgba(252, 179, 0, 0.08);
  color: var(--sub-team-gold);
  border-color: rgba(252, 179, 0, 0.25);
}

.sub-team-management .tab-panel {
  display: none;
  flex-direction: column;
  gap: 16px;
}
.sub-team-management .tab-panel[data-active="true"] {
  display: flex;
}

.sub-team-management .card {
  padding: 20px;
  border-radius: 16px;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sub-team-management .card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* Right-aligned link in the card header (e.g. Documents tab → View bylaws). */
.sub-team-management .card-head__link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(252, 179, 0, 0.06);
  border: 1px solid rgba(252, 179, 0, 0.28);
  color: var(--sub-team-gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
}
.sub-team-management .card-head__link:hover {
  background: rgba(252, 179, 0, 0.12);
}
.sub-team-management .card__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Gold gradient text — mirrors shared.css `.card__title`. */
  background: linear-gradient(135deg, var(--sub-team-gold), #ffd24a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.sub-team-management .card__dash {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(252, 179, 0, 0.2), transparent);
}
.sub-team-management .card__meta {
  font-size: 11px;
  color: var(--sub-team-muted);
  letter-spacing: 0.06em;
}

.sub-team-management .req-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) {
  .sub-team-management .req-grid { grid-template-columns: 1fr; }
}
.sub-team-management .req-card {
  padding: 14px 16px;
  border-radius: 12px;
  /* Theme-aware: dark navy on dark, off-white on light. */
  background: var(--dark, rgba(6, 6, 14, 0.5)) var(--light, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--sub-team-border);
  display: flex;
  align-items: center;
  gap: 14px;
}
.sub-team-management .req-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(252, 179, 0, 0.08);
  border: 1px solid rgba(252, 179, 0, 0.22);
  color: var(--sub-team-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sub-team-management .req-card__body { flex: 1; min-width: 0; }
.sub-team-management .req-card__title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sub-team-gold);
}
.sub-team-management .req-card__desc {
  font-size: 12px;
  color: var(--sub-team-muted);
  margin-top: 2px;
}
.sub-team-management .req-card__input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.sub-team-management .req-card__stepper {
  /* `display: flex; align-items: center; justify-content: center; padding: 0`
   * is what was missing — without it the `-` / `+` characters render
   * with default <button> baseline alignment and slip off-center. */
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 7px;
  background: transparent;
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  transition: all 0.2s;
}
.sub-team-management .req-card__stepper:hover:not(:disabled) {
  color: var(--sub-team-gold);
  border-color: rgba(252, 179, 0, 0.3);
}
.sub-team-management .req-card__stepper:disabled { opacity: 0.3; cursor: not-allowed; }
.sub-team-management .req-card__value {
  width: 48px;
  text-align: center;
  padding: 6px;
  border-radius: 7px;
  background: var(--dark, rgba(0, 0, 0, 0.3)) var(--light, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-text);
  font-size: 14px;
  font-weight: 700;
  outline: none;
  /* Custom +/- stepper buttons live next to this input, so the
   * native browser spinners are redundant and visually noisy. */
  -moz-appearance: textfield;
  appearance: textfield;
}
.sub-team-management .req-card__value::-webkit-inner-spin-button,
.sub-team-management .req-card__value::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sub-team-management .field-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sub-team-management .field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  /* Theme-aware: dark navy on dark, soft off-white on light.
   * Avoids the grey-on-grey collision when the page is in light
   * mode and the unscoped `--sub-team-input-bg` resolved to
   * something that read too dark against the card surface. */
  background: var(--dark, rgba(6, 6, 14, 0.5)) var(--light, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--sub-team-border);
}
.sub-team-management .field-row__drag {
  color: var(--sub-team-dim);
  display: flex;
  align-items: center;
  gap: 4px;
}
.sub-team-management .field-row__type {
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(129, 140, 248, 0.08);
  border: 1px solid rgba(129, 140, 248, 0.22);
  color: #818cf8;
  font-size: 10px;
  cursor: pointer;
}
.sub-team-management .field-row__label {
  flex: 1;
  padding: 6px 10px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--sub-team-text);
  font-size: 13px;
  outline: none;
}
.sub-team-management .field-row__label:focus { border-color: rgba(252, 179, 0, 0.3); }
.sub-team-management .field-row__req {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
}
.sub-team-management .field-row__del {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--sub-team-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sub-team-management .field-row__del:hover {
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--sub-team-coral);
}

/* ── 🔗 Link button + popover menu ───────────────────────────
 * Mirrors mockup `subteam-management-page.html` §122-136 exactly:
 * teal-tinted pill in "set" state, transparent + dim in "none"
 * state. Popover menu drops below the button with each option
 * showing label + dotted key hint + check icon. */
.sub-team-management .field-row__link-wrap {
  position: relative;
  display: inline-flex;
}
.sub-team-management .field-row__link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(110, 237, 216, 0.06);
  border: 1px solid rgba(110, 237, 216, 0.22);
  color: var(--sub-team-teal);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.sub-team-management .field-row__link-btn:hover {
  background: rgba(110, 237, 216, 0.14);
}
.sub-team-management .field-row__link-btn[data-linked="none"] {
  background: transparent;
  border-color: var(--sub-team-border);
  color: var(--sub-team-dim);
}
.sub-team-management .field-row__link-btn[data-linked="none"]:hover {
  color: var(--sub-team-muted);
  border-color: rgba(255, 255, 255, 0.16);
}
.sub-team-management .field-row__link-btn svg { width: 10px; height: 10px; }

.sub-team-management .field-row__link-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 25;
  min-width: 220px;
  padding: 4px;
  border-radius: 10px;
  background: var(--dark, rgba(12, 12, 26, 0.98)) var(--light, rgba(255, 255, 255, 0.98));
  backdrop-filter: blur(22px);
  border: 1px solid var(--sub-team-border);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sub-team-management .field-row__link-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 7px;
  background: transparent;
  border: none;
  color: var(--sub-team-text);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.sub-team-management .field-row__link-option:hover {
  background: var(--dark, rgba(255, 255, 255, 0.04)) var(--light, rgba(0, 0, 0, 0.04));
}
.sub-team-management .field-row__link-option[aria-selected="true"] {
  background: rgba(110, 237, 216, 0.08);
  color: var(--sub-team-teal);
}
.sub-team-management .field-row__link-option-key {
  font-size: 9px;
  color: var(--sub-team-dim);
  letter-spacing: 0.06em;
}
.sub-team-management .field-row__link-option[aria-selected="true"] .field-row__link-option-key {
  color: var(--sub-team-teal);
  opacity: 0.8;
}
.sub-team-management .field-row__link-option svg {
  width: 12px;
  height: 12px;
  color: var(--sub-team-teal);
  opacity: 0;
  flex-shrink: 0;
}
.sub-team-management .field-row__link-option[aria-selected="true"] svg { opacity: 1; }

/* ── Options sub-panel under SingleSelect/MultiSelect rows ──── *
 * Renders below the main row inside a `.field-row-wrap` so the
 * row + options stay aligned as a single visual unit. */
.sub-team-management .field-row-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sub-team-management .field-options {
  /* Same horizontal extent as the field-row above. */
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--dark, rgba(6, 6, 14, 0.5)) var(--light, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--sub-team-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sub-team-management .field-options__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sub-team-management .field-options__item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sub-team-management .field-options__input {
  flex: 1;
  padding: 6px 10px;
  border-radius: 7px;
  background: var(--dark, rgba(0, 0, 0, 0.3)) var(--light, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-text);
  font-size: 12px;
  outline: none;
  transition: all 0.2s;
}
.sub-team-management .field-options__input:focus {
  border-color: rgba(252, 179, 0, 0.3);
}
.sub-team-management .field-options__del {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--sub-team-dim, #6b6b80);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.sub-team-management .field-options__del:hover {
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--sub-team-coral);
}
.sub-team-management .field-options__del svg { width: 12px; height: 12px; }
.sub-team-management .field-options__add {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 7px;
  background: transparent;
  border: 1px dashed rgba(252, 179, 0, 0.30);
  color: var(--sub-team-gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
}
.sub-team-management .field-options__add:hover {
  background: rgba(252, 179, 0, 0.06);
  border-color: rgba(252, 179, 0, 0.5);
}

.sub-team-management .add-field-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(252, 179, 0, 0.03);
  border: 1px dashed rgba(252, 179, 0, 0.25);
  color: var(--sub-team-gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.sub-team-management .add-field-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
/* Docs add button uses violet (matches `.add-doc-btn` in mockup
 * `subteam-management-page.html` line 190), distinct from the gold
 * form-field add-button on the same page. */
.sub-team-management .add-doc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(129, 140, 248, 0.03);
  border: 1px dashed rgba(129, 140, 248, 0.30);
  color: #818cf8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.sub-team-management .add-doc-btn:hover {
  background: rgba(129, 140, 248, 0.08);
  border-color: rgba(129, 140, 248, 0.5);
}
.sub-team-management .add-doc-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.sub-team-management .req-card__icon svg { width: 16px; height: 16px; flex-shrink: 0; }
.sub-team-management .field-row__del svg { width: 12px; height: 12px; flex-shrink: 0; }

.sub-team-management .doc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sub-team-management .doc-item {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(129, 140, 248, 0.04);
  border: 1px solid rgba(129, 140, 248, 0.22);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sub-team-management .doc-item[data-required="true"] {
  background: rgba(168, 85, 247, 0.06);
  border-color: rgba(168, 85, 247, 0.28);
}
.sub-team-management .doc-item__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sub-team-management .doc-item__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(129, 140, 248, 0.10);
  border: 1px solid rgba(129, 140, 248, 0.25);
  color: #818cf8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sub-team-management .doc-item__icon svg { width: 14px; height: 14px; }
.sub-team-management .doc-item[data-required="true"] .doc-item__icon {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.32);
  color: var(--sub-team-purple);
}
.sub-team-management .doc-item__title {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border-radius: 8px;
  /* Theme-aware input fill — dark navy on dark, off-white on light.
   * Direct `var(--dark, A) var(--light, B)` space-toggle so the
   * value picks up the active `data-theme` automatically. */
  background: var(--dark, rgba(6, 6, 14, 0.5)) var(--light, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-text);
  font-size: 14px;
  font-weight: 700;
  outline: none;
  transition: all 0.2s;
}
.sub-team-management .doc-item__title:focus {
  border-color: rgba(129, 140, 248, 0.35);
  box-shadow: 0 0 12px rgba(129, 140, 248, 0.10);
}
.sub-team-management .doc-item__req {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.sub-team-management .doc-item__req input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sub-team-management .doc-item__req-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-dim);
  transition: all 0.2s;
}
/* Dot indicator on the left of "필독" — dim when off, glowing
 * violet when the linked checkbox is checked. */
.sub-team-management .doc-item__req-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}
.sub-team-management .doc-item__req input:checked ~ .doc-item__req-pill {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.40);
  color: var(--sub-team-purple);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.15);
}
.sub-team-management .doc-item__req input:checked ~ .doc-item__req-pill::before {
  opacity: 1;
  box-shadow: 0 0 6px var(--sub-team-purple);
}
.sub-team-management .doc-item__edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 9px;
  /* Background gradient is fine in both themes; the `color` token
   * is what flips — pale lilac on dark, darker plum on light so
   * the "편집" text + pencil icon stay readable. */
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(168, 85, 247, 0.10));
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: var(--dark, #e9d5ff) var(--light, #6d28d9);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  /* `white-space: nowrap` is critical — otherwise "편집" wraps to two
   * lines when the row gets crowded since the parent .doc-item__head
   * is `flex-wrap: wrap`. */
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s;
}
.sub-team-management .doc-item__edit:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.32), rgba(168, 85, 247, 0.16));
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.22);
  color: var(--dark, #f3e8ff) var(--light, #5b21b6);
}
.sub-team-management .doc-item__edit svg {
  width: 12px;
  height: 12px;
  /* SVG uses `stroke: currentColor` so it inherits the theme-aware
   * color above — no separate space toggle needed here. */
}
.sub-team-management .doc-item__actions { display: flex; gap: 4px; }
.sub-team-management .doc-item__btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.sub-team-management .doc-item__btn:hover {
  color: var(--sub-team-text);
  border-color: rgba(255, 255, 255, 0.18);
}
.sub-team-management .doc-item__btn:disabled { opacity: 0.3; cursor: not-allowed; }
/* `svg` sizing on the action buttons — without this the trash /
 * chevron svgs render at intrinsic size and overflow the 28x28 box. */
.sub-team-management .doc-item__btn svg { width: 13px; height: 13px; }
.sub-team-management .doc-item__btn--danger:hover {
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--sub-team-coral);
  background: rgba(239, 68, 68, 0.06);
}
.sub-team-management .doc-item__preview {
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--dark, rgba(6, 6, 14, 0.55)) var(--light, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-muted);
  font-size: 12.5px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sub-team-management .roster {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sub-team-management .roster-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 11px;
  background: var(--sub-team-input-bg);
  border: 1px solid var(--sub-team-border);
  cursor: pointer;
  color: var(--sub-team-text);
  text-decoration: none;
}
.sub-team-management .roster-row:hover {
  border-color: rgba(252, 179, 0, 0.25);
}
.sub-team-management .roster-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sub-team-management .roster-row__name { font-size: 14px; font-weight: 700; }
.sub-team-management .roster-row__handle { font-size: 10px; color: var(--sub-team-muted); }
.sub-team-management .roster-row__metrics { display: flex; gap: 8px; }
.sub-team-management .roster-row__metric {
  font-size: 11px;
  color: var(--sub-team-muted);
  padding: 3px 9px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--sub-team-border);
}
.sub-team-management .roster-row__metric strong { color: var(--sub-team-text); }
.sub-team-management .roster-row__chev { color: var(--sub-team-dim); }

.sub-team-management .avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.sub-team-management .avatar--teal {
  background: linear-gradient(135deg, rgba(110, 237, 216, 0.32), rgba(110, 237, 216, 0.12));
  color: var(--sub-team-teal);
}
.sub-team-management .avatar--violet {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.32), rgba(129, 140, 248, 0.12));
  color: #818cf8;
}
.sub-team-management .avatar--purple {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.32), rgba(168, 85, 247, 0.12));
  color: #a855f7;
}
.sub-team-management .avatar--cyan {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.32), rgba(34, 211, 238, 0.12));
  color: #22d3ee;
}

.sub-team-management .queue-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "avatar body actions" "inline inline inline";
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.04);
  border: 1px solid rgba(245, 158, 11, 0.22);
}
.sub-team-management .queue-row__body { grid-area: body; min-width: 0; }
.sub-team-management .queue-row__name { font-size: 14px; font-weight: 700; color: var(--sub-team-text); }
.sub-team-management .queue-row__meta {
  font-size: 11px;
  color: var(--sub-team-muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sub-team-management .queue-row__actions { grid-area: actions; display: flex; gap: 6px; }
.sub-team-management .queue-row__action {
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid;
}
.sub-team-management .queue-row__action--approve {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.25);
  color: var(--sub-team-green);
}
.sub-team-management .queue-row__action--return {
  background: rgba(129, 140, 248, 0.06);
  border-color: rgba(129, 140, 248, 0.25);
  color: #818cf8;
}
.sub-team-management .queue-row__action--reject {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.22);
  color: var(--sub-team-coral);
}
.sub-team-management .queue-row__action--review {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--sub-team-border);
  color: var(--sub-team-muted);
}
.sub-team-management .queue-row__action--review:hover {
  background: rgba(110, 237, 216, 0.06);
  border-color: rgba(110, 237, 216, 0.25);
  color: var(--sub-team-teal);
}
.sub-team-management .queue-row .field { grid-column: 1 / -1; }
.sub-team-management .queue-row__decision {
  grid-column: 1 / -1;
  grid-area: inline;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.sub-team-management .queue-row__decision .field__textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--dark, rgba(6, 6, 14, 0.55)) var(--light, rgba(255, 255, 255, 0.88));
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-text);
  font: inherit;
  resize: vertical;
}
.sub-team-management .queue-row__decision .field__textarea::placeholder {
  color: var(--sub-team-dim);
}
.sub-team-management .queue-row__decision .field__textarea:focus {
  outline: none;
  border-color: rgba(110, 237, 216, 0.4);
  background: var(--dark, rgba(6, 6, 14, 0.7)) var(--light, #ffffff);
}

/* === src/features/sub_team/pages/management/queue_tab — review modal === */
.sub-team-review-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  z-index: 9999;
}
.sub-team-review-modal[data-open="true"] {
  display: flex;
}
/* `.team-arena__content` creates a stacking context at z:10 and the
 * arena topbar sits at z:30 — without this escape, the modal renders
 * BELOW the topbar's HUD icons even at z:9999 because it's trapped
 * inside the content's context. Lifting the content above the topbar
 * while the modal is open keeps the backdrop covering everything. */
.team-arena__content:has(.sub-team-review-modal[data-open="true"]) {
  z-index: 10000;
}
.sub-team-review-modal .review-modal {
  --sub-team-glass: var(--dark, rgba(20, 20, 40, 0.92)) var(--light, #ffffff);
  --sub-team-border: var(--dark, rgba(255, 255, 255, 0.08)) var(--light, rgba(0, 0, 0, 0.08));
  --sub-team-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --sub-team-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --sub-team-dim: var(--dark, #55556a) var(--light, #9595a8);
  --sub-team-teal: #6eedd8;

  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.sub-team-review-modal .review-modal__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--sub-team-border);
}
.sub-team-review-modal .review-modal__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(110, 237, 216, 0.10);
  border: 1px solid rgba(110, 237, 216, 0.25);
  color: var(--sub-team-teal);
  flex-shrink: 0;
}
.sub-team-review-modal .review-modal__title-wrap {
  flex: 1;
  min-width: 0;
}
.sub-team-review-modal .review-modal__kicker {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
}
.sub-team-review-modal .review-modal__title {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--sub-team-text);
  margin-top: 2px;
}
.sub-team-review-modal .review-modal__handle {
  font-size: 11px;
  color: var(--sub-team-muted);
  margin-top: 2px;
}
.sub-team-review-modal .review-modal__close-x {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--sub-team-border);
  background: transparent;
  color: var(--sub-team-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.sub-team-review-modal .review-modal__body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.sub-team-review-modal .review-modal__meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--dark, rgba(6, 6, 14, 0.45)) var(--light, rgba(0, 0, 0, 0.025));
  border: 1px solid var(--sub-team-border);
}
.sub-team-review-modal .review-modal__meta-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sub-team-review-modal .review-modal__meta-label {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
}
.sub-team-review-modal .review-modal__meta-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--sub-team-text);
}
.sub-team-review-modal .review-modal__section-title {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #6eedd8, #b6f5e6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sub-team-review-modal .review-modal__snapshot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 12px;
  background: var(--dark, rgba(6, 6, 14, 0.45)) var(--light, rgba(0, 0, 0, 0.025));
  border: 1px solid var(--sub-team-border);
}
.sub-team-review-modal .review-modal__snapshot-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--sub-team-border);
  font-size: 12px;
}
.sub-team-review-modal .review-modal__snapshot-row:last-child {
  border-bottom: none;
}
.sub-team-review-modal .review-modal__snapshot-key {
  font-family: var(--font-display, "Orbitron"), system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
}
.sub-team-review-modal .review-modal__snapshot-value {
  color: var(--sub-team-text);
  line-height: 1.55;
  word-break: break-word;
}
.sub-team-review-modal .review-modal__empty {
  padding: 24px;
  text-align: center;
  font-style: italic;
  color: var(--sub-team-muted);
}
.sub-team-review-modal .review-modal__foot {
  display: flex;
  justify-content: flex-end;
  padding: 14px 22px;
  border-top: 1px solid var(--sub-team-border);
}
.sub-team-review-modal .review-modal__close-btn {
  padding: 10px 18px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
@media (max-width: 500px) {
  .sub-team-review-modal {
    padding: 12px;
  }
  .sub-team-review-modal .review-modal__meta {
    grid-template-columns: 1fr;
  }
  .sub-team-review-modal .review-modal__snapshot-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.sub-team-management .bc-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.04));
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: var(--sub-team-text);
  text-decoration: none;
  cursor: pointer;
}
.sub-team-management .bc-cta__icon {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: rgba(168, 85, 247, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.38);
  /* Pale purple icon glyph reads on dark; darken to deep purple for
   * light mode (the gradient bg is near-white so #e9d5ff disappears). */
  color: var(--dark, #e9d5ff) var(--light, #6b21a8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sub-team-management .bc-cta__body { flex: 1; }
.sub-team-management .bc-cta__label {
  font-size: 15px;
  font-weight: 800;
  /* Same dark/light flip as `.bc-cta__icon` — `#e9d5ff` on light
   * background is the "공지 작성 글자가 안 보여" bug. */
  color: var(--dark, #e9d5ff) var(--light, #6b21a8);
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.sub-team-management .bc-cta__sub { font-size: 12px; color: var(--sub-team-muted); }
.sub-team-management .bc-cta__arrow {
  width: 20px;
  height: 20px;
  color: var(--sub-team-purple);
}

.sub-team-management .draft-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(252, 179, 0, 0.03);
  border: 1px solid rgba(252, 179, 0, 0.22);
}
.sub-team-management .draft-row__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sub-team-gold);
  box-shadow: 0 0 8px var(--sub-team-gold);
}
.sub-team-management .draft-row__body { min-width: 0; }
.sub-team-management .draft-row__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--sub-team-text);
  margin-bottom: 4px;
}
.sub-team-management .draft-row__meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 10px;
  color: var(--sub-team-dim);
}
/* Each meta cell stays a single inline row (icon + text). Without this
 * the lucide SVG breaks onto its own line and "Today · N chars" wraps
 * below the clock. */
.sub-team-management .draft-row__meta-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sub-team-management .draft-row__meta strong {
  color: var(--sub-team-gold);
  font-weight: 700;
}
.sub-team-management .draft-row__edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.22), rgba(252, 179, 0, 0.10));
  border: 1px solid rgba(252, 179, 0, 0.35);
  color: var(--sub-team-gold);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.sub-team-management .draft-row__del {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.sub-team-management .draft-row__del:hover {
  border-color: rgba(239, 68, 68, 0.30);
  color: var(--sub-team-coral);
}

.sub-team-management .bc-item {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--sub-team-input-bg);
  border: 1px solid var(--sub-team-border);
}
.sub-team-management .bc-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.sub-team-management .bc-item__kind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(168, 85, 247, 0.08);
  color: var(--sub-team-purple);
  border: 1px solid rgba(168, 85, 247, 0.22);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sub-team-management .bc-item__time { font-size: 10px; color: var(--sub-team-dim); }
.sub-team-management .bc-item__title-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--sub-team-text);
  margin-bottom: 8px;
}
.sub-team-management .bc-item__meta {
  display: flex;
  gap: 14px;
  font-size: 9.5px;
  color: var(--sub-team-dim);
  align-items: center;
  flex-wrap: wrap;
}
.sub-team-management .bc-item__meta-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sub-team-management .inline-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--sub-team-dim);
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--dark, rgba(255, 255, 255, 0.02)) var(--light, rgba(0, 0, 0, 0.025));
  border: 1px solid var(--sub-team-border);
}

.sub-team-management .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sub-team-management .field__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sub-team-muted);
}
.sub-team-management .field__textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--sub-team-input-bg);
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-text);
  font-size: 13px;
  outline: none;
  resize: vertical;
}

.sub-team-management .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid;
  text-decoration: none;
}
.sub-team-management .btn--ghost {
  background: transparent;
  border-color: var(--sub-team-border);
  color: var(--sub-team-muted);
}
.sub-team-management .btn--primary {
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.22), rgba(252, 179, 0, 0.10));
  border-color: rgba(252, 179, 0, 0.35);
  color: var(--sub-team-gold);
}
.sub-team-management .btn--small { padding: 6px 10px; font-size: 10px; }
.sub-team-management .btn--danger {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.35);
  color: var(--sub-team-coral);
}
.sub-team-management .btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── KPI row (above tabs, always visible) ─────────────────── */
.sub-team-management .kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 720px) {
  .sub-team-management .kpi-row { grid-template-columns: 1fr; }
}
.sub-team-management .kpi {
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--sub-team-glass);
  border: 1px solid var(--sub-team-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sub-team-management .kpi__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
}
.sub-team-management .kpi__value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--sub-team-text);
}
.sub-team-management .kpi__value--gold {
  background: linear-gradient(135deg, var(--sub-team-gold), #ffd24a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sub-team-management .kpi__value--amber { color: var(--sub-team-amber); }
.sub-team-management .kpi__value--teal  { color: var(--sub-team-teal); }
.sub-team-management .kpi__value--purple { color: var(--sub-team-purple); }
.sub-team-management .kpi__delta {
  font-size: 10px;
  color: var(--sub-team-green);
  letter-spacing: 0.08em;
}
.sub-team-management .kpi__delta--amber  { color: var(--sub-team-amber); }
.sub-team-management .kpi__delta--purple { color: var(--sub-team-purple); }

/* ── Tabs nav: SVG icons + count badges ────────────────────── */
.sub-team-management .tabs-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.2s;
}
.sub-team-management .tabs-nav__btn:hover { color: var(--sub-team-text); }
.sub-team-management .tabs-nav__btn svg { width: 14px; height: 14px; opacity: 0.7; }
.sub-team-management .tabs-nav__btn[aria-selected="true"] svg { opacity: 1; }
.sub-team-management .tabs-nav__btn[aria-selected="true"] {
  box-shadow: 0 0 14px rgba(252, 179, 0, 0.1);
}
.sub-team-management .tabs-nav__badge {
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.06);
  color: var(--sub-team-text);
}
.sub-team-management .tabs-nav__btn[aria-selected="true"] .tabs-nav__badge {
  background: rgba(252, 179, 0, 0.18);
  color: var(--sub-team-gold);
}
.sub-team-management .tabs-nav__badge--amber {
  background: rgba(245, 158, 11, 0.12);
  color: var(--sub-team-amber);
}

/* ── Activation hero polish (data-on glow) ─────────────────── */
.sub-team-management .activation { overflow: hidden; transition: border-color 0.3s; }
.sub-team-management .activation::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 60% at 15% 15%, var(--act-glow, rgba(255, 255, 255, 0.04)) 0%, transparent 60%);
  pointer-events: none;
  transition: all 0.3s;
}
.sub-team-management .activation[data-on="true"]::before {
  --act-glow: rgba(252, 179, 0, 0.12);
}
.sub-team-management .activation > * { position: relative; z-index: 1; }
.sub-team-management .activation__icon { transition: all 0.3s; flex-shrink: 0; }
.sub-team-management .activation[data-on="true"] .activation__icon {
  background: rgba(252, 179, 0, 0.1);
  border-color: rgba(252, 179, 0, 0.28);
  color: var(--sub-team-gold);
  box-shadow: 0 0 18px rgba(252, 179, 0, 0.15);
}
.sub-team-management .activation__icon { color: var(--sub-team-muted); }
.sub-team-management .activation__icon svg { width: 24px; height: 24px; }
.sub-team-management .activation__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-team-dim);
  margin-bottom: 4px;
}
.sub-team-management .activation[data-on="true"] .activation__label { color: var(--sub-team-gold); }
.sub-team-management .activation__title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--sub-team-text);
  margin-bottom: 4px;
}
.sub-team-management .activation__desc {
  font-size: 13px;
  color: var(--sub-team-muted);
  line-height: 1.55;
}
.sub-team-management .activation__switch { transform: scale(1.3); transform-origin: right center; }

/* Activation-gated wrapper — dims configuration blocks when OFF, but
 * leaves roster/queue/broadcast surfaces fully interactive (mockup
 * applies `[data-activated="false"] .gated` to requirements only). */
.sub-team-management [data-activated="false"] .gated {
  opacity: 0.3;
  pointer-events: none;
  filter: saturate(0.4);
}
.sub-team-management .gated { transition: all 0.35s; }

/* ── Switch — match mockup's checkbox-input pattern exactly ─── */
/* Overrides the global `.switch` (which treats the element ITSELF as the
 * track + uses `.switch::after` as the thumb) with the mockup's
 * `<label class="switch"><input/><span class="switch__track"/></label>`
 * + `:checked ~ .switch__track::after` pattern. We explicitly null out
 * the global rule's `::after`, fixed dimensions, and background so the
 * label becomes a pure flex container. */
.sub-team-management .switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  /* override global .switch (line 8431) defaults */
  width: auto;
  height: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  transition: none;
}
.sub-team-management .switch::after {
  /* Disable the global label-as-track thumb; the real thumb lives on
   * `.switch__track::after` in the markup. */
  content: none;
  display: none;
}
.sub-team-management .switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sub-team-management .switch__track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--sub-team-border);
  transition: all 0.2s;
  flex-shrink: 0;
}
.sub-team-management .switch__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sub-team-dim);
  transition: all 0.25s;
}
.sub-team-management .switch input:checked ~ .switch__track {
  background: rgba(252, 179, 0, 0.25);
  border-color: rgba(252, 179, 0, 0.4);
}
.sub-team-management .switch input:checked ~ .switch__track::after {
  left: 20px;
  background: var(--sub-team-gold);
  box-shadow: 0 0 8px rgba(252, 179, 0, 0.5);
}

/* ── Inline info note (used in Requirements + others) ─────── */
/* Note: a base `.sub-team-management .inline-note` exists earlier; this
 * adds the icon + nested rules so the note can render with an ⓘ icon
 * inline with the descriptive copy, matching mockup exactly. */
.sub-team-management .inline-note svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--sub-team-muted);
}

/* ── Collapsible card (used by FormTab) ───────────────────── */
.sub-team-management .card--collapsible .card__head {
  cursor: pointer;
  user-select: none;
}
.sub-team-management .card__head-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}
.sub-team-management .card__toggle {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  padding: 0;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--sub-team-border);
  color: var(--sub-team-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s, color 0.2s, border-color 0.2s;
}
.sub-team-management .card__toggle svg { width: 14px; height: 14px; }
.sub-team-management .card--collapsible[data-collapsed="true"] .card__toggle {
  transform: rotate(-90deg);
}
.sub-team-management .card--collapsible[data-collapsed="false"] .card__toggle:hover {
  color: var(--sub-team-gold);
  border-color: rgba(252, 179, 0, 0.25);
}
.sub-team-management .card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  /* `hidden` is only required while collapsed so the max-height
   * transition clips the body cleanly. When expanded we switch to
   * `visible` so absolute-positioned children like the link-menu
   * popover can escape the card bounds without being clipped. */
  overflow: hidden;
}
.sub-team-management .card--collapsible[data-collapsed="true"] .card__body {
  max-height: 0;
  opacity: 0;
  margin-top: -18px;
}
.sub-team-management .card--collapsible[data-collapsed="false"] .card__body {
  max-height: 4000px;
  opacity: 1;
  overflow: visible;
}

/* ── Notice card (Linked-field intro inside Form section) ──── */
.sub-team-management .notice {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(110, 237, 216, 0.04);
  border: 1px solid rgba(110, 237, 216, 0.22);
  align-items: flex-start;
}
.sub-team-management .notice__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(110, 237, 216, 0.10);
  border: 1px solid rgba(110, 237, 216, 0.25);
  color: var(--sub-team-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sub-team-management .notice__icon svg { width: 14px; height: 14px; }
.sub-team-management .notice__body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sub-team-management .notice__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sub-team-teal);
}
.sub-team-management .notice__text {
  font-size: 12px;
  color: var(--sub-team-muted);
  line-height: 1.55;
}

/* ── Locked field-row tint (gold-edged) ───────────────────────
 * Earlier in this file the primary `.sub-team-management
 * .field-row` rule sets a theme-aware bg via space toggle —
 * a duplicate hardcoded `rgba(6, 6, 14, 0.5)` override that
 * used to live here was breaking light mode and has been
 * removed. This block keeps only the locked-state tint. */
.sub-team-management .field-row[data-locked="true"] {
  border-color: rgba(252, 179, 0, 0.18);
  background: rgba(252, 179, 0, 0.04);
}
.sub-team-management .field-row__drag {
  color: var(--sub-team-dim);
  cursor: grab;
  display: flex;
  align-items: center;
}
.sub-team-management .field-row__drag svg { width: 14px; height: 14px; }
.sub-team-management .field-row__type {
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(129, 140, 248, 0.08);
  border: 1px solid rgba(129, 140, 248, 0.22);
  color: #818cf8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23818cf8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  padding-right: 22px;
}
/* Duplicate `.sub-team-management .field-row__label` block — the
 * base rule lives earlier in this file with `background: transparent`.
 * Below adds hover + focus accents; the focus background uses the
 * same theme-toggle pattern so light mode no longer renders a dark
 * navy block on the active input. */
.sub-team-management .field-row__label:hover { border-color: var(--sub-team-border); }
.sub-team-management .field-row__label:focus {
  border-color: rgba(252, 179, 0, 0.3);
  background: var(--dark, rgba(6, 6, 14, 0.6)) var(--light, rgba(0, 0, 0, 0.04));
}
.sub-team-management .field-row__lock-badge {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--sub-team-gold);
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(252, 179, 0, 0.08);
  border: 1px solid rgba(252, 179, 0, 0.22);
  text-transform: uppercase;
  flex-shrink: 0;
  margin-left: auto;
}

/* ── Locked field-row visual cues ─────────────────────────────
 * Disabled selects/inputs/buttons already get a `disabled` attr
 * from RSX; below dims them slightly so the row reads as
 * non-interactive without losing legibility. */
.sub-team-management .field-row[data-locked="true"] .field-row__type,
.sub-team-management .field-row[data-locked="true"] .field-row__label {
  opacity: 0.85;
  cursor: not-allowed;
}
.sub-team-management .field-row[data-locked="true"] .field-row__link-btn,
.sub-team-management .field-row[data-locked="true"] .field-row__del {
  pointer-events: none;
  opacity: 0.5;
}

/* ── Mobile / small-viewport layout ───────────────────────── *
 * Stack field-row pieces (type, label, link, required, del)
 * into a flex-wrap grid so each row stays inside the viewport
 * on phones. Without this the right-side controls overflow
 * the card width and the row visually breaks. */
@media (max-width: 720px) {
  .sub-team-management .page,
  .sub-team-management .page--wide { padding: 12px; }
  .sub-team-management .card { padding: 14px; }
  .sub-team-management .field-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .sub-team-management .field-row__label {
    order: 5;
    width: 100%;
    flex-basis: 100%;
  }
  .sub-team-management .field-row__type { flex-shrink: 0; }
  .sub-team-management .field-row__link-wrap { margin-left: auto; }
  .sub-team-management .field-row__link-menu {
    right: auto;
    left: 0;
    min-width: 200px;
  }
  .sub-team-management .req-grid { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  .sub-team-management .card__head { flex-wrap: wrap; }
  .sub-team-management .card__dash { display: none; }
  .sub-team-management .req-card { flex-wrap: wrap; row-gap: 10px; }
  .sub-team-management .req-card__body { flex-basis: calc(100% - 56px); }
  .sub-team-management .req-card__input-wrap { margin-left: 56px; }
  .sub-team-management .field-row__lock-badge { margin-left: 0; }
}


/* === src/views/index/space_card/style.css === */
/* ── Home Arena — Space Card ──────────────────────── */

.home-arena .space-card {
  flex-shrink: 0;
  width: 400px;
  padding: 26px 26px 22px;
  background: var(--ha-bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--ha-border-subtle);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: pointer;
  scroll-snap-align: center;
  position: relative;
  overflow: hidden;
  transform: scale(0.78);
  opacity: 0.30;
  filter: blur(5px);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.home-arena .space-card.active {
  transform: scale(1.05);
  opacity: 1;
  filter: blur(0);
  box-shadow: 0 12px 60px var(--ha-shadow-card);
}

/* === src/views/index/space_card (My Posts carousel variant) ===
   Posts reuse the FULL `.space-card` structure (ArenaSpaceCard) so a post
   card looks identical to a space card. The only delta is taming the post
   body HTML rendered into `.space-card__desc` so stray margins / images
   don't break the fixed-height card. */
.home-arena .space-card--post .space-card__desc * {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  font-weight: inherit;
  display: inline;
}
.home-arena .space-card--post .space-card__desc img {
  display: none;
}
.home-arena .space-card--blazing.active {
  border-color: rgba(239, 68, 68, 0.20);
  box-shadow: 0 12px 60px var(--ha-shadow-card), 0 0 50px rgba(239, 68, 68, 0.18);
}
.home-arena .space-card--trending.active {
  border-color: rgba(252, 179, 0, 0.20);
  box-shadow: 0 12px 60px var(--ha-shadow-card), 0 0 50px rgba(252, 179, 0, 0.18);
}
.home-arena .space-card--rising.active {
  border-color: rgba(110, 237, 216, 0.20);
  box-shadow: 0 12px 60px var(--ha-shadow-card), 0 0 50px rgba(110, 237, 216, 0.18);
}

/* Wave aurora */
.home-arena .space-card__wave {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 0;
}
.home-arena .space-card.active .space-card__wave { opacity: 1; }
.home-arena .space-card__wave::before,
.home-arena .space-card__wave::after {
  content: '';
  position: absolute;
  inset: -40%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.home-arena .space-card__wave::before {
  background:
    radial-gradient(ellipse 55% 40% at 20% 30%, var(--wave-tint-strong) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 75% 65%, var(--wave-tint-soft) 0%, transparent 65%);
  animation: ha-wave-drift-a 7s ease-in-out infinite;
}
.home-arena .space-card__wave::after {
  background:
    radial-gradient(ellipse 50% 40% at 70% 25%, var(--wave-tint-soft) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 25% 80%, var(--wave-tint-strong) 0%, transparent 65%);
  animation: ha-wave-drift-b 9s ease-in-out infinite;
}

.home-arena .space-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0.35;
  transition: opacity 0.6s ease;
  background: radial-gradient(ellipse 70% 50% at 30% 30%, var(--wave-tint-soft) 0%, transparent 70%);
}
.home-arena .space-card.active::before { opacity: 0; }

@keyframes ha-wave-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.9; }
  33% { transform: translate3d(6%, -4%, 0) rotate(8deg); opacity: 1; }
  66% { transform: translate3d(-4%, 5%, 0) rotate(-6deg); opacity: 0.85; }
}
@keyframes ha-wave-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 0.75; }
  40% { transform: translate3d(-5%, 4%, 0) rotate(-10deg) scale(1.05); opacity: 0.95; }
  70% { transform: translate3d(5%, -3%, 0) rotate(7deg) scale(0.98); opacity: 0.8; }
}

.home-arena .space-card--blazing {
  --wave-tint-strong: rgba(239, 68, 68, 0.10);
  --wave-tint-soft: rgba(239, 68, 68, 0.05);
}
.home-arena .space-card--trending {
  --wave-tint-strong: rgba(252, 179, 0, 0.10);
  --wave-tint-soft: rgba(252, 179, 0, 0.05);
}
.home-arena .space-card--rising {
  --wave-tint-strong: rgba(110, 237, 216, 0.10);
  --wave-tint-soft: rgba(110, 237, 216, 0.05);
}

.home-arena .space-card > *:not(.space-card__wave) {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .home-arena .space-card__wave::before,
  .home-arena .space-card__wave::after { animation: none; }
}

/* Top row */
.home-arena .space-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.home-arena .space-card__heat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.home-arena .space-card__heat svg { width: 14px; height: 14px; }
.home-arena .space-card__heat--blazing {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.20);
}
.home-arena .space-card__heat--trending {
  background: rgba(252, 179, 0, 0.08);
  color: #fcb300;
  border: 1px solid rgba(252, 179, 0, 0.20);
}
.home-arena .space-card__heat--rising {
  background: rgba(110, 237, 216, 0.08);
  color: #6eedd8;
  border: 1px solid rgba(110, 237, 216, 0.20);
}
.home-arena .space-card__rank {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--ha-text-dim);
  letter-spacing: 0.08em;
}
.home-arena .space-card__rank strong {
  color: var(--ha-text-primary);
  font-size: 14px;
}

/* Identity row */
.home-arena .space-card__identity {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.home-arena .space-card__logo {
  width: 56px; height: 56px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid var(--ha-border-subtle);
  box-shadow: 0 4px 16px var(--ha-shadow-card);
  flex-shrink: 0;
  background: #1a1a2a;
}
.home-arena .space-card__id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-arena .space-card__category {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ha-text-dim);
}
.home-arena .space-card__category::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ha-text-dim);
}
.home-arena .space-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ha-text-primary);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-arena .space-card__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ha-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* Stats */
.home-arena .space-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  position: relative;
  z-index: 1;
}
.home-arena .space-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  border-radius: 10px;
  background: rgba(128, 128, 160, 0.05);
  border: 1px solid var(--ha-border-subtle);
}
.home-arena .space-stat__value {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ha-text-primary);
  line-height: 1;
}
.home-arena .space-stat__label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ha-text-dim);
}
.home-arena .space-card--blazing.active .space-stat__value { color: #ef4444; }
.home-arena .space-card--trending.active .space-stat__value { color: #fcb300; }
.home-arena .space-card--rising.active .space-stat__value { color: #6eedd8; }

/* Chips */
.home-arena .space-card__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.home-arena .action-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(128, 128, 160, 0.08);
  border: 1px solid var(--ha-border-subtle);
  color: var(--ha-text-muted);
}
.home-arena .action-chip svg { width: 11px; height: 11px; }
.home-arena .action-chip--poll {
  color: #818cf8;
  border-color: rgba(99, 102, 241, 0.18);
}
.home-arena .action-chip--discuss {
  color: #22d3ee;
  border-color: rgba(34, 211, 238, 0.18);
}
.home-arena .action-chip--quiz {
  color: #a855f7;
  border-color: rgba(168, 85, 247, 0.18);
}
.home-arena .action-chip--follow {
  color: #fb923c;
  border-color: rgba(251, 146, 60, 0.18);
}

/* Footer */
.home-arena .space-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--ha-border-subtle);
  margin-top: auto;
  position: relative;
  z-index: 1;
}
.home-arena .space-card__reward {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fcb300;
}
.home-arena .space-card__reward svg { width: 16px; height: 16px; }
.home-arena .space-card__reward small {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ha-text-dim);
  text-transform: uppercase;
  margin-left: 4px;
}
.home-arena .space-card__cta {
  padding: 9px 18px;
  border-radius: 8px;
  border: none;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.home-arena .space-card__cta svg { width: 12px; height: 12px; }
.home-arena .space-card--blazing .space-card__cta {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 2px 12px rgba(239, 68, 68, 0.18);
}
.home-arena .space-card--trending .space-card__cta {
  background: linear-gradient(135deg, #fcb300, #e5a200);
  color: #0a0a0a;
  box-shadow: 0 2px 12px rgba(252, 179, 0, 0.18);
}
.home-arena .space-card--rising .space-card__cta {
  background: linear-gradient(135deg, #6eedd8, #3acab2);
  color: #0a0a0a;
  box-shadow: 0 2px 12px rgba(110, 237, 216, 0.18);
}
.home-arena .space-card__cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

@media (max-width: 500px) {
  .home-arena .space-card {
    width: 300px;
    padding: 22px 20px 18px;
    gap: 14px;
  }
  .home-arena .space-card__title { font-size: 17px; }
  .home-arena .space-card__desc { font-size: 12.5px; }
  .home-arena .space-card__logo { width: 48px; height: 48px; border-radius: 12px; }
}

/* Compact mode for short viewports (e.g. landscape phones) */
@media (max-height: 760px) {
  .home-arena .space-card {
    padding: 18px 20px 16px;
    gap: 10px;
  }
  .home-arena .space-card__logo { width: 44px; height: 44px; border-radius: 12px; }
  .home-arena .space-card__title { font-size: 16px; }
  .home-arena .space-card__desc {
    font-size: 12px;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .home-arena .space-card__heat {
    padding: 4px 9px;
    font-size: 9px;
  }
  .home-arena .space-card__heat svg { width: 11px; height: 11px; }
  .home-arena .space-card__rank { font-size: 10px; }
  .home-arena .space-card__rank strong { font-size: 12px; }
  .home-arena .space-card__category { font-size: 9px; }
  .home-arena .space-stat { padding: 8px 4px; gap: 2px; }
  .home-arena .space-stat__value { font-size: 14px; }
  .home-arena .space-stat__label { font-size: 8px; letter-spacing: 0.08em; }
  .home-arena .action-chip {
    padding: 3px 8px;
    font-size: 9px;
  }
  .home-arena .action-chip svg { width: 10px; height: 10px; }
  .home-arena .space-card__footer { padding-top: 10px; }
  .home-arena .space-card__reward { font-size: 12px; }
  .home-arena .space-card__reward svg { width: 14px; height: 14px; }
  .home-arena .space-card__reward small { font-size: 8px; }
  .home-arena .space-card__cta {
    padding: 7px 13px;
    font-size: 9px;
    letter-spacing: 0.08em;
  }
  .home-arena .space-card__cta svg { width: 10px; height: 10px; }
}

/* Ultra-compact for very short viewports */
@media (max-height: 620px) {
  .home-arena .space-card {
    padding: 14px 18px 12px;
    gap: 8px;
  }
  .home-arena .space-card__logo { width: 40px; height: 40px; border-radius: 10px; }
  .home-arena .space-card__title { font-size: 15px; }
  .home-arena .space-card__desc {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    font-size: 11.5px;
  }
  .home-arena .space-stat { padding: 6px 4px; }
  .home-arena .space-stat__value { font-size: 13px; }
  .home-arena .space-stat__label { font-size: 7.5px; }
  .home-arena .space-card__footer { padding-top: 8px; }
  .home-arena .space-card__cta {
    padding: 6px 11px;
    font-size: 8.5px;
  }
}


/* === src/views/index/style.css === */
/* ── Home Arena — Hot Spaces ─────────────────────── */
/* All selectors scoped under `.home-arena` to avoid collision
   with the space viewer arena in features/spaces/pages/index. */

.home-arena {
  --ha-bg-void: var(--dark, #06060e) var(--light, #f4f3ef);
  --ha-bg-glass: var(--dark, rgba(12, 12, 26, 0.65))
    var(--light, rgba(255, 255, 255, 0.72));
  --ha-bg-glass-hover: var(--dark, rgba(20, 20, 40, 0.8))
    var(--light, rgba(255, 255, 255, 0.88));
  --ha-border-subtle: var(--dark, rgba(255, 255, 255, 0.06))
    var(--light, rgba(0, 0, 0, 0.08));
  --ha-text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --ha-text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --ha-text-dim: var(--dark, #55556a) var(--light, #9999aa);
  --ha-shadow-card: var(--dark, rgba(0, 0, 0, 0.5))
    var(--light, rgba(0, 0, 0, 0.08));

  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ha-bg-void);
  color: var(--ha-text-primary);
  font-family: "Outfit", sans-serif;
}

/* Standalone home (views/index) renders `.home-arena` at the document root.
   `height: 100%` only works if every ancestor has a definite height, and on
   mobile tailwind flips `body` to `overflow: auto` (max-tablet:overflow-auto),
   so any height-chain gap lets the arena grow to content height and the page
   scrolls. Pin it to the viewport directly with 100dvh so it stays a fixed
   single screen regardless of the ancestor chain. Scoped to --standalone so
   the `.team-arena .home-arena` / social variants (flex children) are
   unaffected. */
.home-arena--standalone {
  /* Fill the parent (#main → body → :root) which already subtracts the
     safe-area insets via :root padding. Using 100dvh here instead would be
     taller than the padded area by the inset amount, so `body`
     (max-tablet:overflow-auto) would scroll the whole arena — header
     included. 100% matches the visible area exactly → header stays put,
     only `.home-arena__scroll` scrolls. */
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
/* Topbar (icon row) stays pinned at the top. */
.home-arena--standalone > .arena-topbar {
  flex-shrink: 0;
}
/* Everything below the topbar scrolls vertically when it overflows a short
   viewport, instead of being clipped. On tall viewports it simply fills the
   space and doesn't scroll. */
.home-arena__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
/* Inside the scroll region the carousel keeps its natural height (no flex
   stretch) so the whole column scrolls as one, rather than the carousel
   collapsing to zero. */
/* Higher specificity (3 classes) so it beats `.home-arena .carousel-wrapper
   { flex: 1 }` which is declared later in the file — otherwise the carousel
   stays flex:1, gets squeezed inside the scroll body, and its `overflow:hidden`
   clips tall cards (RISING badge / ENTER ARENA button cut off). With natural
   height the whole card shows and the column scrolls instead. */
.home-arena .home-arena__scroll > .carousel-wrapper {
  flex: 0 0 auto;
}

/* Tablet & desktop: vertically center the carousel.
   The footer (.bottom-bar) has `margin-top: auto`, which on its own eats ALL
   the free vertical space and pins the carousel to the top (justify-content
   can't override an auto margin). Giving the carousel its own `margin-top:auto`
   makes the free space split evenly between the two auto margins → the carousel
   ends up centered while the footer stays pinned at the bottom.
   Phones keep the original top-packed, footer-pinned layout; the breakpoint is
   `768px` (md) so iPad (≈1032pt portrait, below the 1177 desktop breakpoint)
   centers too instead of stranding the carousel at the top with a tall empty
   gap below. */
@media (min-width: 768px) {
  .home-arena .home-arena__scroll > .carousel-wrapper {
    margin-top: auto;
  }
}

/* ...and on phone widths too, for the standalone home. The rule above stops at
   768px because a phone column is normally full, so centring would have been a
   no-op — but a narrow *tall* viewport (a resized browser window, a foldable's
   outer screen) is both under 768px wide and far taller than the content, and
   there the card was stranded at the top above an ~800px void. An auto margin
   only claims space that is actually free, so a 360x640 phone is unchanged and
   only the case with slack gets centred. Scoped to `--standalone` so the home
   embedded in the team arena keeps its own grid layout. */
.home-arena--standalone .home-arena__scroll > .carousel-wrapper {
  margin-top: auto;
}

/* `UserLayout`/`SocialLayout` wrap their outlet in `.social-scroll` with
   `p-5` (→ `p-2` on mobile) padding. Full-bleed arena pages (their own
   background + topbar reach the edges) must NOT get that frame, or a gap
   appears above the sticky header. Strip the padding only when the scroll
   container directly holds an arena — other (non-arena) outlet pages keep
   their padding. */
.social-scroll:has(> .rewards-arena),
.social-scroll:has(> .drafts-arena),
.social-scroll:has(> .essence-arena),
.social-scroll:has(> .my-ai) {
  padding: 0;
}

.home-arena::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 80% 60% at 50% 50%,
      rgba(252, 179, 0, 0.04) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 120% 100% at 50% 120%,
      rgba(110, 237, 216, 0.03) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 50% 50%,
      var(--ha-bg-void) 0%,
      var(--ha-bg-void) 100%
    );
  z-index: 0;
}

/* ── Top bar ─────────────────────────────────────── */
.home-arena .arena-topbar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  flex-shrink: 0;
}
.home-arena .arena-topbar__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.home-arena .arena-topbar__logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(252, 179, 0, 0.15);
  box-shadow: 0 2px 12px var(--ha-shadow-card);
}
.home-arena .arena-topbar__title {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #fcb300, #ffd24a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.home-arena .arena-topbar__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(110, 237, 216, 0.08);
  border: 1px solid rgba(110, 237, 216, 0.15);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6eedd8;
  margin-left: 12px;
}
.home-arena .arena-topbar__status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6eedd8;
  box-shadow: 0 0 6px #6eedd8;
  animation: ha-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes ha-pulse-dot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.home-arena .arena-topbar__actions {
  display: flex;
  gap: 10px;
}

/* ── HUD buttons ─────────────────────────────────── */
.home-arena .hud-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--ha-bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--ha-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
}
.home-arena .hud-btn:hover {
  background: var(--ha-bg-glass-hover);
  border-color: rgba(252, 179, 0, 0.25);
  transform: translateY(-1px);
}
.home-arena .hud-btn svg {
  width: 18px;
  height: 18px;
  color: var(--ha-text-muted);
  transition: color 0.2s;
}
.home-arena .hud-btn:hover svg {
  color: #fcb300;
}
.home-arena .hud-btn--primary {
  background: linear-gradient(
    135deg,
    rgba(252, 179, 0, 0.18),
    rgba(252, 179, 0, 0.06)
  );
  border-color: rgba(252, 179, 0, 0.3);
}
.home-arena .hud-btn--primary svg {
  color: #fcb300;
}
.home-arena .hud-btn--primary:hover {
  box-shadow: 0 0 20px rgba(252, 179, 0, 0.25);
}

.home-arena .hud-btn--signin {
  background: linear-gradient(
    135deg,
    rgba(110, 237, 216, 0.14),
    rgba(110, 237, 216, 0.04)
  );
  border-color: rgba(110, 237, 216, 0.28);
}
.home-arena .hud-btn--signin svg {
  color: #6eedd8;
}
.home-arena .hud-btn--signin:hover {
  border-color: rgba(110, 237, 216, 0.45);
  box-shadow: 0 0 20px rgba(110, 237, 216, 0.22);
}
.home-arena .hud-btn--signin:hover svg {
  color: #6eedd8;
}

/* My AI HUD button — cyan/violet so it reads as an external
   integration affordance distinct from the gold action buttons. */
.home-arena .hud-btn--ai {
  background: linear-gradient(
    135deg,
    rgba(34, 211, 238, 0.10),
    rgba(129, 140, 248, 0.08)
  );
  border-color: rgba(34, 211, 238, 0.28);
}
.home-arena .hud-btn--ai svg {
  color: #22d3ee;
}
.home-arena .hud-btn--ai:hover {
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 22px rgba(34, 211, 238, 0.22);
}
.home-arena .hud-btn--ai:hover svg {
  color: #22d3ee;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.6));
}

.home-arena .hud-btn__label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  font-family: "Orbitron", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ha-text-dim);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.home-arena .hud-btn:hover .hud-btn__label {
  opacity: 1;
}
.home-arena .hud-btn__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #fcb300;
  color: #0a0a0a;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 0 8px rgba(252, 179, 0, 0.4);
}

/* ── Hamburger overlay (flat tile grid) ─────────────────
   Replaces the previous .hud-group / .hud-menu dropdowns. The
   topbar holds only the 4 most-used HUD buttons (Notifications /
   Teams / Settings / Hamburger); the rest live inside this
   overlay as square tiles. Toggled via `data-open` on the root.

   Mobile: panel becomes a scrollable modal — `max-height` caps
   the panel so the tile grid never overflows the viewport, and
   `overflow-y:auto` lets users scroll the tiles inside. */
.home-arena .hud-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(4, 4, 12, 0.65);
  backdrop-filter: blur(18px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.home-arena .hud-overlay[data-open="true"] {
  display: flex;
  opacity: 1;
}
.home-arena .hud-overlay__panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: calc(100% - 96px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px 28px 28px;
  border-radius: 24px;
  background:
    var(--dark, linear-gradient(160deg, rgba(22, 22, 38, 0.92), rgba(10, 10, 20, 0.96)))
    var(--light, linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(248, 248, 252, 1)));
  border: 1px solid var(--ha-border-subtle);
  box-shadow: 0 30px 80px var(--ha-shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.home-arena .hud-overlay__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--dark, rgba(255, 255, 255, 0.04)) var(--light, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--ha-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ha-text-muted);
  transition: all 0.18s;
  padding: 0;
}
.home-arena .hud-overlay__close:hover {
  color: #fcb300;
  border-color: rgba(252, 179, 0, 0.28);
  background: rgba(252, 179, 0, 0.06);
}
.home-arena .hud-overlay__close svg {
  width: 16px;
  height: 16px;
}
.home-arena .hud-overlay__heading {
  font-family: "Orbitron", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ha-text-dim);
  text-align: center;
}
/* Square tiles via aspect-ratio so icon + label sit centered like
   the reference game menu. auto-fit collapses gracefully on narrow
   viewports (3 col → 2 col → 1 col). */
.home-arena .hud-overlay__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.home-arena .hud-overlay__tile {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--dark, rgba(255, 255, 255, 0.03)) var(--light, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--ha-border-subtle);
  color: var(--ha-text-primary);
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
  font: inherit;
}
.home-arena .hud-overlay__tile:hover {
  background: var(--ha-bg-glass-hover);
  border-color: rgba(252, 179, 0, 0.28);
  transform: translateY(-2px);
}
.home-arena .hud-overlay__tile svg {
  width: 32px;
  height: 32px;
  color: var(--ha-text-muted);
  transition: color 0.18s;
}
.home-arena .hud-overlay__tile:hover svg {
  color: #fcb300;
}
.home-arena .hud-overlay__tile--primary {
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.22), rgba(252, 179, 0, 0.06));
  border-color: rgba(252, 179, 0, 0.38);
}
.home-arena .hud-overlay__tile--primary svg {
  color: #fcb300;
}
.home-arena .hud-overlay__tile--primary:hover {
  box-shadow: 0 0 22px rgba(252, 179, 0, 0.22);
}
.home-arena .hud-overlay__tile-label {
  font-family: "Orbitron", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ha-text-primary);
}

/* ── Teams dropdown ──────────────────────────────── */
/* `.hud-teams` is `static` (not `relative`) so the dropdown's
 * `position: absolute` anchors to the nearest positioned
 * ancestor instead — which is `.arena-topbar` (also
 * `position: relative`). That makes the dropdown align to
 * the header's right edge rather than the trigger icon's
 * right edge. The trigger sits mid-header on mobile, so
 * anchoring to it pushed the box's left edge off-viewport;
 * anchoring to the header keeps the box always within the
 * visible width and reads as "below the icon row" because
 * `top: 100%` lands it just under the topbar.
 */
.home-arena .hud-teams {
  position: static;
  display: inline-flex;
}
.home-arena .team-dd {
  --ha-dd-bg: var(--dark, #0f0f1f) var(--light, #ffffff);
  position: absolute;
  top: 100%;
  right: 16px;
  z-index: 40;
  /* `clamp(min, preferred, max)` covers every viewport in
   * one rule (no media query, no hot-reload edge cases):
   * phones get nearly full width (viewport - 32px); narrow
   * desktops cap at 420px; sub-280 viewports clamp up so
   * content never compresses.
   */
  width: clamp(280px, calc(100vw - 32px), 420px);
  max-height: 320px;
  background: var(--ha-dd-bg);
  border: 1px solid var(--ha-border-subtle);
  border-radius: 12px;
  box-shadow: 0 12px 28px var(--ha-shadow-card);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0.18s;
  pointer-events: none;
}
.home-arena .hud-teams[aria-expanded="true"] .team-dd {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0s;
  pointer-events: auto;
}
.home-arena .team-dd__header {
  font-family: "Orbitron", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ha-text-dim);
  padding: 10px 12px 6px;
  flex-shrink: 0;
}
.home-arena .team-dd__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home-arena .team-dd__list::-webkit-scrollbar {
  width: 6px;
}
.home-arena .team-dd__list::-webkit-scrollbar-track {
  background: transparent;
}
.home-arena .team-dd__list::-webkit-scrollbar-thumb {
  background: var(--ha-border-subtle);
  border-radius: 3px;
}
.home-arena .team-dd__empty {
  padding: 14px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--ha-text-dim);
  font-style: italic;
}
.home-arena .team-dd__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s ease;
  outline: none;
}
.home-arena .team-dd__item:hover,
.home-arena .team-dd__item:focus-visible {
  background: var(--ha-bg-glass-hover);
}
.home-arena .team-dd__avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(252, 179, 0, 0.12);
  color: #fcb300;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Orbitron", sans-serif;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid rgba(252, 179, 0, 0.18);
  flex-shrink: 0;
}
.home-arena .team-dd__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.home-arena .team-dd__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ha-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-arena .team-dd__handle {
  font-size: 11px;
  color: var(--ha-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-arena .team-dd__footer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  flex-shrink: 0;
  border-top: 1px solid var(--ha-border-subtle);
  font-family: "Orbitron", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fcb300;
  cursor: pointer;
  transition: background 0.18s ease;
  outline: none;
  border-radius: 0 0 8px 8px;
}
.home-arena .team-dd__footer:hover,
.home-arena .team-dd__footer:focus-visible {
  background: rgba(252, 179, 0, 0.08);
}
.home-arena .team-dd__footer svg {
  width: 14px;
  height: 14px;
}

/* ── Section label ───────────────────────────────── */
.home-arena .section-label {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 28px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.home-arena .section-label__dash {
  width: 40px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--ha-text-dim),
    transparent
  );
}
.home-arena .section-label__title {
  font-family: "Orbitron", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ha-text-dim);
}
.home-arena .section-label__title strong {
  color: #fcb300;
  font-weight: 700;
}

/* ── Tabs ────────────────────────────────────────── */
.home-arena .section-tabs {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0 28px;
  margin-bottom: 4px;
}
.home-arena .section-tab {
  background: transparent;
  border: 1px solid var(--ha-border-subtle);
  padding: 6px 14px;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Orbitron", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ha-text-dim);
  transition: all 0.2s ease;
}
.home-arena .section-tab:hover {
  color: var(--ha-text-muted);
  border-color: rgba(252, 179, 0, 0.2);
}
.home-arena .section-tab[aria-selected="true"] {
  color: #fcb300;
  background: rgba(252, 179, 0, 0.08);
  border-color: rgba(252, 179, 0, 0.3);
  box-shadow: 0 0 12px rgba(252, 179, 0, 0.15);
}

/* ── Carousel ────────────────────────────────────── */
.home-arena .carousel-wrapper {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.home-arena .carousel-wrapper::before,
.home-arena .carousel-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 220px;
  z-index: 15;
  pointer-events: none;
}
.home-arena .carousel-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--ha-bg-void), transparent);
}
.home-arena .carousel-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--ha-bg-void), transparent);
}
.home-arena .carousel-track {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 60px 0;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding-left: calc(50vw - 200px);
  padding-right: calc(50vw - 200px);
}
.home-arena .carousel-track::-webkit-scrollbar {
  display: none;
}
/* Shrink the carousel-track's vertical padding on short viewports so the
   fixed arena (topbar + carousel + bottom-bar) fits within the screen and
   doesn't force the page to scroll. */
@media (max-height: 760px) {
  .home-arena__scroll .carousel-track { padding-top: 32px; padding-bottom: 32px; }
}
@media (max-height: 620px) {
  .home-arena__scroll .carousel-track { padding-top: 18px; padding-bottom: 18px; }
}

/* ── Dots ────────────────────────────────────────── */
.home-arena .carousel-dots {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 0 20px;
}
.home-arena .carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(136, 136, 168, 0.25);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.home-arena .carousel-dot.active {
  width: 28px;
  border-radius: 4px;
}
.home-arena .carousel-dot.active--blazing {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.35);
}
.home-arena .carousel-dot.active--trending {
  background: #fcb300;
  box-shadow: 0 0 8px rgba(252, 179, 0, 0.35);
}
.home-arena .carousel-dot.active--rising {
  background: #6eedd8;
  box-shadow: 0 0 8px rgba(110, 237, 216, 0.35);
}

/* ── Bottom HUD bar ──────────────────────────────── */
.home-arena .bottom-bar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px 22px;
  flex-shrink: 0;
  /* Pin to the bottom of the scroll column. The carousel keeps its natural
     height (`flex: 0 0 auto`, so tall cards aren't clipped), which leaves the
     footer floating right under a short MY-SPACES card. `margin-top: auto`
     pushes it to the bottom when content is short, and collapses (scrolls
     normally) when content is tall. The empty state uses `flex: 1` and already
     reached the bottom — this keeps that working too. */
  margin-top: auto;
}
.home-arena .hud-stat {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--ha-bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--ha-border-subtle);
  border-radius: 12px;
}
.home-arena .hud-stat__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(252, 179, 0, 0.1);
  color: #fcb300;
}
.home-arena .hud-stat__icon svg {
  width: 16px;
  height: 16px;
}
.home-arena .hud-stat--rising .hud-stat__icon {
  background: rgba(110, 237, 216, 0.1);
  color: #6eedd8;
}
.home-arena .hud-stat__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.home-arena .hud-stat__label {
  font-family: "Orbitron", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ha-text-dim);
}
.home-arena .hud-stat__value {
  font-family: "Orbitron", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ha-text-primary);
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.home-arena .hud-stat__value small {
  font-size: 10px;
  font-weight: 600;
  color: var(--ha-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-arena .hud-stat__value strong {
  color: #fcb300;
}
.home-arena .hud-stat--rising .hud-stat__value strong {
  color: #6eedd8;
}

.home-arena .browse-btn {
  padding: 0 18px;
  height: 42px;
  border-radius: 11px;
  background: var(--ha-bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--ha-border-subtle);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: "Orbitron", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ha-text-muted);
  flex-shrink: 0;
}
.home-arena .browse-btn:hover {
  background: var(--ha-bg-glass-hover);
  border-color: rgba(252, 179, 0, 0.25);
  color: #fcb300;
}
.home-arena .browse-btn svg {
  width: 14px;
  height: 14px;
}

/* ── Empty state ─────────────────────────────────── */
.home-arena .home-arena__empty {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Orbitron", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ha-text-dim);
}

/* ── Mobile ──────────────────────────────────────── */
@media (max-width: 500px) {
  .home-arena .arena-topbar {
    padding: 14px 16px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .home-arena .arena-topbar__brand {
    gap: 10px;
  }
  .home-arena .arena-topbar__logo {
    width: 32px;
    height: 32px;
  }
  .home-arena .arena-topbar__title {
    font-size: 14px;
    letter-spacing: 0.08em;
  }
  .home-arena .arena-topbar__status {
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 9px;
  }
  .home-arena .arena-topbar__actions {
    gap: 8px;
    width: 100%;
    justify-content: space-between;
    order: 2;
  }
  .home-arena .hud-btn {
    width: 46px;
    height: 46px;
    flex: 1;
    max-width: 64px;
  }
  .home-arena .hud-btn__label {
    display: none;
  }
  /* Mobile: actions row right-aligned with normal gap (not stretched
     to fill width), so the 4 HUD buttons stay grouped on the right. */
  .home-arena .arena-topbar__actions {
    position: relative;
    width: 100%;
    justify-content: flex-end;
  }
  /* No upper cap on the button width here. `flex: 1` already shares the row
     between the buttons; the 64px cap only bit above ~384dp, where it left
     the row's left end empty while the buttons bunched up on the right. That
     gap is what the dropdown below inherited — it anchors to the row, so it
     came out 40px wider than the icons at 393dp. Letting the buttons finish
     the row keeps row and icon group identical at every width; the buttons
     grow by ~2px at 393dp and ~6px at 412dp, and shrink as before below
     384dp. */
  .home-arena .hud-btn {
    max-width: none;
  }
  /* Line the dropdown up with the icon row it hangs off. It used to be
     `right: 16px` + `width: clamp(..., 100vw - 32px, ...)`, which made the
     box wider than its containing block and overhung the left edge — it read
     as glued to the screen edge. Pinning both edges to the row (now exactly
     the icon group) puts the dropdown's left edge on the 알림 icon and its
     right edge on the last icon. Only inside this 500px block: wider
     viewports anchor to `.arena-topbar` instead, where the 420px cap is
     what keeps the box a sane width. */
  .home-arena .team-dd {
    left: 0;
    right: 0;
    width: auto;
  }
  /* Mobile overlay panel — shorter padding + scrollable inside so
     the tile grid never overflows the viewport. */
  .home-arena .hud-overlay {
    padding: 24px 16px;
  }
  .home-arena .hud-overlay__panel {
    max-height: calc(100% - 48px);
    padding: 28px 20px 20px;
  }
  .home-arena .section-label__dash {
    width: 24px;
  }
  .home-arena .section-label__title {
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .home-arena .carousel-track {
    padding-left: calc(50vw - 150px);
    padding-right: calc(50vw - 150px);
    gap: 16px;
  }
  .home-arena .carousel-wrapper::before,
  .home-arena .carousel-wrapper::after {
    width: 60px;
  }
  .home-arena .bottom-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px 18px;
    gap: 8px;
  }
  .home-arena .hud-stat {
    padding: 9px 12px;
  }
  .home-arena .browse-btn {
    justify-content: center;
    width: 100%;
  }
}


/* === src/features/spaces/pages/apps/apps/analyzes/views/home === */
/* Analyze arena — LIST view (Phase 1).
   Class names match `assets/design/analyze-list-arena.html` verbatim
   (`.arena`, `.split`, `.builder-list`, `.report-carousel`, etc.).
   Colors use the project's space-toggle pattern so they respect
   `data-theme`. The host wrapper `.analyze-arena` scopes the variables
   so they don't leak into surrounding pages. */

.analyze-arena {
  --bg-void: var(--dark, #06060e) var(--light, #f5f5fb);
  --bg-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.75));
  --border-subtle: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(10, 10, 30, 0.08));
  --border-strong: var(--dark, rgba(255, 255, 255, 0.12)) var(--light, rgba(10, 10, 30, 0.16));
  --text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --text-muted: var(--dark, #8888a8) var(--light, #5b5b75);
  --text-dim: var(--dark, #55556a) var(--light, #9898ad);
  --surface-soft: var(--dark, rgba(255, 255, 255, 0.02)) var(--light, rgba(10, 10, 30, 0.03));
  --surface-hover: var(--dark, rgba(255, 255, 255, 0.04)) var(--light, rgba(10, 10, 30, 0.05));
  --glow-aura-a: var(--dark, rgba(6, 182, 212, 0.05)) var(--light, rgba(6, 182, 212, 0.08));
  --glow-aura-b: var(--dark, rgba(252, 179, 0, 0.03)) var(--light, rgba(252, 179, 0, 0.06));

  --accent-gold: #fcb300;
  --accent-teal: #6eedd8;

  --analyze-color: #06b6d4;
  --analyze-bg: rgba(6, 182, 212, 0.10);
  --analyze-border: rgba(6, 182, 212, 0.24);
  --analyze-glow: rgba(6, 182, 212, 0.16);

  --poll-color: #06b6d4;
  --poll-bg: rgba(6, 182, 212, 0.10);
  --poll-border: rgba(6, 182, 212, 0.24);
  --quiz-color: #a855f7;
  --quiz-bg: rgba(168, 85, 247, 0.10);
  --quiz-border: rgba(168, 85, 247, 0.24);
  --discussion-color: #60a5fa;
  --discussion-bg: rgba(96, 165, 250, 0.10);
  --discussion-border: rgba(96, 165, 250, 0.24);
  --follow-color: #f97316;
  --follow-bg: rgba(249, 115, 22, 0.10);
  --follow-border: rgba(249, 115, 22, 0.24);

  --quiz-correct: #22c55e;
  --quiz-correct-soft: rgba(34, 197, 94, 0.12);

  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Outfit', sans-serif;

  position: relative;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
  /* Arena owns its own scrollbar — same pattern as
     `pages/apps/apps/file/views/home/style.css`. */
}

.analyze-arena .arena {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.analyze-arena .arena::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, var(--glow-aura-a), transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 120%, var(--glow-aura-b), transparent 50%);
  z-index: 0;
  pointer-events: none;
}

/* ── Topbar ──────────────────────────────────────────────── */
.analyze-arena .arena-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  gap: 16px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}
.analyze-arena .arena-topbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.analyze-arena .back-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}
.analyze-arena .back-btn:hover {
  border-color: rgba(252, 179, 0, 0.3);
  color: var(--accent-gold);
}
.analyze-arena .back-btn svg {
  width: 16px;
  height: 16px;
}
.analyze-arena .arena-topbar__logo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid rgba(252, 179, 0, 0.15);
  flex-shrink: 0;
}
.analyze-arena .breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.analyze-arena .breadcrumb__item {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.analyze-arena .breadcrumb__sep {
  color: var(--text-dim);
  font-size: 10px;
}
.analyze-arena .breadcrumb__current {
  color: var(--text-primary);
  font-weight: 600;
}
.analyze-arena .type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--analyze-bg);
  color: var(--analyze-color);
  border: 1px solid var(--analyze-border);
}
.analyze-arena .type-badge svg {
  width: 13px;
  height: 13px;
}
.analyze-arena .topbar-title {
  flex: 1;
  min-width: 180px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 760px) {
  .analyze-arena .arena-topbar { padding: 12px 14px; gap: 10px; }
  .analyze-arena .breadcrumb,
  .analyze-arena .type-badge { display: none; }
  .analyze-arena .topbar-title { min-width: 0; font-size: 13px; padding: 0; }
}

/* ── Split layout (LIST mode = single full-width column) ──── */
.analyze-arena .split {
  position: relative;
  z-index: 10;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 24px 24px 80px;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}
.analyze-arena .main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
@media (max-width: 760px) {
  .analyze-arena .split { padding: 14px; gap: 14px; }
}

/* ── Builder + List header ──────────────────────────────── */
.analyze-arena .analyze-builder {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.analyze-arena .builder-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: calc(100vh - 200px);
}
.analyze-arena .builder-list > .report-carousel {
  flex: 1;
}
.analyze-arena .builder-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.analyze-arena .builder-list-head h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}
.analyze-arena .builder-list-head__count {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
}
.analyze-arena .builder-hint {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Carousel (peek-style, 100vw breakout) ──────────────── */
.analyze-arena .report-carousel {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  min-height: 480px;
}
.analyze-arena .report-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  z-index: 10;
}
.analyze-arena .report-carousel__arrow--prev { left: 24px; }
.analyze-arena .report-carousel__arrow--next { right: 24px; }
.analyze-arena .report-carousel__arrow svg { width: 18px; height: 18px; }
.analyze-arena .report-carousel__arrow:hover:not(:disabled) {
  border-color: var(--analyze-border);
  color: var(--analyze-color);
}
.analyze-arena .report-carousel__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.analyze-arena .report-carousel__viewport {
  width: 100%;
  max-width: none;
  overflow: hidden;
  /* Soft horizontal fade so peek cards dissolve at the edges. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
/* Native horizontal scroll-snap. The track scrolls; cards snap to
   centre. JS listens for scroll events to drive the active highlight
   and disabled state. Scrollbars are hidden — visual peek + dots are
   the navigation hint. */
.analyze-arena .report-carousel__track {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 460px;
  padding: 0 calc(50% - 220px); /* lead/trail padding so first/last centre */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.analyze-arena .report-carousel__track::-webkit-scrollbar { display: none; }
.analyze-arena .report-carousel__slide {
  flex-shrink: 0;
  width: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  transition: opacity 0.3s, transform 0.3s;
  opacity: 0.4;
  pointer-events: none;
}
.analyze-arena .report-carousel__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ── Report card variants ───────────────────────────────── */
.analyze-arena .report-card-large {
  position: relative;
  width: 100%;
  min-height: 420px;
  border-radius: 24px;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  text-align: center;
  color: var(--text-primary);
}
.analyze-arena .report-card-large--new {
  background: linear-gradient(180deg, rgba(252, 179, 0, 0.08), rgba(252, 179, 0, 0.02));
  border: 2px dashed var(--analyze-border);
}
.analyze-arena .report-card-large--new:hover {
  border-color: var(--accent-gold);
  background: linear-gradient(180deg, rgba(252, 179, 0, 0.16), rgba(252, 179, 0, 0.04));
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(252, 179, 0, 0.18);
}
.analyze-arena .report-card-large--saved {
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(18px);
}
.analyze-arena .report-card-large--saved:hover {
  border-color: var(--analyze-border);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.18);
}
/* Pending / failed cards are not navigable yet — soften them and
   swap the cursor so users see they're not interactive. The click
   handler still fires (it surfaces a toast), but the visual cue is
   that the card is "not ready" rather than fully clickable. */
.analyze-arena .report-card-large--saved[data-status="running"],
.analyze-arena .report-card-large--saved[data-status="failed"] {
  cursor: not-allowed;
  opacity: 0.62;
}
.analyze-arena .report-card-large--saved[data-status="running"]:hover,
.analyze-arena .report-card-large--saved[data-status="failed"]:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-subtle);
}
.analyze-arena .report-carousel__slide.is-active .report-card-large--saved {
  border-color: rgba(6, 182, 212, 0.26);
  box-shadow:
    0 0 40px rgba(6, 182, 212, 0.14),
    0 0 80px rgba(6, 182, 212, 0.06),
    0 4px 20px rgba(0, 0, 0, 0.25);
}
.analyze-arena .report-carousel__slide.is-active .report-card-large--new {
  border-color: var(--accent-gold);
  box-shadow:
    0 0 40px rgba(252, 179, 0, 0.16),
    0 0 80px rgba(252, 179, 0, 0.06),
    0 4px 20px rgba(0, 0, 0, 0.25);
}

.analyze-arena .report-card-large__icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(252, 179, 0, 0.06);
  color: var(--accent-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(252, 179, 0, 0.32);
  box-shadow:
    0 0 24px rgba(252, 179, 0, 0.28),
    inset 0 0 16px rgba(252, 179, 0, 0.10);
}
.analyze-arena .report-card-large__icon svg { width: 44px; height: 44px; }
.analyze-arena .report-card-large__icon--saved {
  background: rgba(6, 182, 212, 0.06);
  color: var(--analyze-color);
  border: 1px solid rgba(6, 182, 212, 0.32);
  box-shadow:
    0 0 24px rgba(6, 182, 212, 0.26),
    inset 0 0 16px rgba(6, 182, 212, 0.10);
}
.analyze-arena .report-card-large__icon--saved svg { width: 36px; height: 36px; }

.analyze-arena .report-card-large__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
  word-break: break-word;
}
.analyze-arena .report-card-large__desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 320px;
}

.analyze-arena .report-card-large__status {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid;
}
.analyze-arena .report-card-large__status[data-status="done"] {
  color: var(--quiz-correct);
  background: var(--quiz-correct-soft);
  border-color: rgba(34, 197, 94, 0.32);
}
.analyze-arena .report-card-large__status[data-status="done"] svg {
  width: 12px;
  height: 12px;
}
.analyze-arena .report-card-large__status[data-status="running"] {
  color: var(--accent-gold);
  background: rgba(252, 179, 0, 0.10);
  border-color: rgba(252, 179, 0, 0.32);
}
.analyze-arena .report-card-large__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-gold);
  box-shadow: 0 0 6px var(--accent-gold);
  animation: rcl-pulse 1.4s ease-in-out infinite;
}
@keyframes rcl-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.25); }
}

.analyze-arena .report-card-large__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  width: 100%;
  max-width: 380px;
  margin-top: auto;
}
.analyze-arena .report-card-large__chips-empty {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.analyze-arena .report-card-large__chip {
  display: inline-flex;
  align-items: stretch;
  border-radius: 100px;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  max-width: 100%;
}
.analyze-arena .report-card-large__chip-source {
  padding: 4px 9px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}
.analyze-arena .report-card-large__chip[data-source="poll"] .report-card-large__chip-source {
  background: var(--poll-bg);
  color: var(--poll-color);
}
.analyze-arena .report-card-large__chip[data-source="quiz"] .report-card-large__chip-source {
  background: var(--quiz-bg);
  color: var(--quiz-color);
}
.analyze-arena .report-card-large__chip[data-source="discussion"] .report-card-large__chip-source {
  background: var(--discussion-bg);
  color: var(--discussion-color);
}
.analyze-arena .report-card-large__chip[data-source="follow"] .report-card-large__chip-source {
  background: var(--follow-bg);
  color: var(--follow-color);
}
.analyze-arena .report-card-large__chip-text {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* ── Carousel dots ──────────────────────────────────────── */
.analyze-arena .report-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 0 4px;
}
.analyze-arena .report-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.15s;
}
.analyze-arena .report-carousel__dot[data-active="true"] {
  width: 24px;
  border-radius: 100px;
  background: var(--analyze-color);
}

/* ── Mobile / responsive ────────────────────────────────────
   Carousel slide width + card padding shrink under 760px.
   `script.js` reads the rendered slide width on every reposition
   and resize, so no JS-side pixel constants need updating. */
@media (max-width: 760px) {
  .analyze-arena .builder-list-head h2 { font-size: 18px; }
  .analyze-arena .builder-hint { font-size: 12px; }

  .analyze-arena .report-carousel { min-height: 440px; }
  .analyze-arena .report-carousel__track {
    height: 400px;
    gap: 18px;
    /* Lead/trail padding centres the first / last card on mobile. */
    padding: 0 calc(50% - 140px);
  }
  .analyze-arena .report-carousel__slide { width: 280px; }
  .analyze-arena .report-carousel__arrow {
    width: 38px; height: 38px;
  }
  .analyze-arena .report-carousel__arrow--prev { left: 8px; }
  .analyze-arena .report-carousel__arrow--next { right: 8px; }
  .analyze-arena .report-carousel__arrow svg { width: 14px; height: 14px; }
  /* On narrow screens the soft fade eats too much of the viewport;
     soften the mask so the active card stays fully visible. */
  .analyze-arena .report-carousel__viewport {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  }

  .analyze-arena .report-card-large {
    min-height: 360px;
    padding: 36px 22px;
    gap: 14px;
  }
  .analyze-arena .report-card-large__icon { width: 72px; height: 72px; }
  .analyze-arena .report-card-large__icon svg { width: 32px; height: 32px; }
  .analyze-arena .report-card-large__icon--saved svg { width: 28px; height: 28px; }
  .analyze-arena .report-card-large__title { font-size: 17px; }
  .analyze-arena .report-card-large__desc { font-size: 12px; max-width: 100%; }
  .analyze-arena .report-card-large__chip-text { max-width: 140px; font-size: 10px; }
  .analyze-arena .report-card-large__status {
    top: 12px; left: 12px;
    padding: 3px 8px;
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  .analyze-arena .report-carousel__track {
    height: 380px;
    gap: 14px;
    padding: 0 calc(50% - 120px);
  }
  .analyze-arena .report-carousel__slide { width: 240px; }
  /* Hide arrows on phones — touch swipe + dots are the primary nav. */
  .analyze-arena .report-carousel__arrow { display: none; }
  .analyze-arena .report-card-large {
    min-height: 340px;
    padding: 28px 18px;
  }
  .analyze-arena .report-card-large__title { font-size: 15px; }
  .analyze-arena .report-card-large__icon { width: 64px; height: 64px; }
  .analyze-arena .report-card-large__icon svg { width: 28px; height: 28px; }
}

/* ── Viewer (no-access) ─────────────────────────────────── */
.analyze-arena .arena-viewer {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 64px 28px;
  text-align: center;
}
.analyze-arena .arena-viewer__title {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}


/* === src/features/character/pages/character_page === */
/* Visual rules from `app/ratel/assets/design/character-xp-skills/character-page.html`.
   Topbar/hud-btn base styles already exist for the Home Arena and are
   reused as-is; only net-new selectors (character-*, skill-card,
   skill-grid, hud-btn[aria-current="page"], levelup-toast) are appended
   here. */

/* Active section indicator — applied to the hud-btn whose route matches
   the current page. aria-current="page" is the source of truth so any
   topbar (Home, Character, future arena pages) can flag the active
   button without needing per-component variants. */
.hud-btn[aria-current="page"] { background: rgba(252,179,0,0.10); border-color: rgba(252,179,0,0.45); box-shadow: 0 0 18px rgba(252,179,0,0.18); }
.hud-btn[aria-current="page"] svg { color: var(--accent-gold); }
.hud-btn[aria-current="page"]::after { content: ''; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); width: 24px; height: 2px; border-radius: 2px; background: var(--accent-gold); box-shadow: 0 0 8px rgba(252,179,0,0.6); }
.hud-btn[aria-current="page"] .hud-btn__label { opacity: 1; color: var(--accent-gold); }

/* Arena shell — background gradients for the character page. */
.character-arena { position: relative; min-height: 100vh; display: flex; flex-direction: column; isolation: isolate; }
.character-arena::before {
  content: ''; position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 20% 10%, rgba(252,179,0,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 85% 90%, rgba(110,237,216,0.05) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, var(--bg-void) 0%, var(--bg-void) 100%);
  z-index: -1;
}

/* Page container */
.character-page { max-width: 1100px; margin: 0 auto; padding: 32px 28px 80px; width: 100%; }

/* Hero (XP / Level / SP) */
.character-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 28px 32px;
  background: linear-gradient(135deg, rgba(252,179,0,0.04) 0%, rgba(110,237,216,0.03) 60%, transparent 100%), var(--bg-glass);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  overflow: hidden;
}
.character-hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 100% at 100% 0%, rgba(252,179,0,0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Level badge — the prestige number */
.character-hero__level {
  position: relative; z-index: 1;
  width: 128px; height: 128px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(252,179,0,0.18) 0%, rgba(252,179,0,0.04) 60%, transparent 100%);
  border: 2px solid rgba(252,179,0,0.35);
  box-shadow: 0 0 32px rgba(252,179,0,0.15), inset 0 0 32px rgba(252,179,0,0.08);
}
.character-hero__level-label { font-family: var(--font-display); font-size: 9px; font-weight: 600; letter-spacing: 0.16em; color: var(--accent-gold); text-transform: uppercase; opacity: 0.7; }
.character-hero__level-num { font-family: var(--font-display); font-size: 48px; font-weight: 800; line-height: 1; color: var(--accent-gold); text-shadow: 0 0 24px rgba(252,179,0,0.4); margin-top: 2px; }

/* XP bar block */
.character-hero__xp { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.character-hero__xp-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.character-hero__xp-title { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.character-hero__xp-numbers { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.character-hero__xp-numbers em { font-style: normal; color: var(--accent-teal); font-weight: 700; }
.character-hero__xp-bar { height: 14px; border-radius: 7px; background: var(--bg-input); border: 1px solid var(--border-subtle); overflow: hidden; position: relative; }
.character-hero__xp-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(252,179,0,0.85) 0%, rgba(110,237,216,0.85) 100%);
  border-radius: 6px;
  box-shadow: 0 0 16px rgba(252,179,0,0.4);
  transition: width 0.6s cubic-bezier(0.16,1,0.3,1);
  position: relative;
}
.character-hero__xp-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 50%);
  border-radius: 6px;
}
.character-hero__xp-hint { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* SP pill */
.character-hero__sp {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  padding: 14px 20px;
  background: rgba(110,237,216,0.06);
  border: 1px solid rgba(110,237,216,0.18);
  border-radius: 14px;
  min-width: 140px;
  box-shadow: 0 0 24px rgba(110,237,216,0.05);
}
.character-hero__sp-label { font-family: var(--font-display); font-size: 9px; font-weight: 600; letter-spacing: 0.16em; color: var(--accent-teal); text-transform: uppercase; opacity: 0.85; }
.character-hero__sp-value { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--accent-teal); text-shadow: 0 0 18px rgba(110,237,216,0.4); line-height: 1; font-variant-numeric: tabular-nums; }
.character-hero__sp-hint { font-size: 10px; color: var(--text-muted); }

/* No-SP variant (flat) */
.character-hero__sp[data-empty="true"] { background: rgba(255,255,255,0.025); border-color: var(--border-subtle); box-shadow: none; }
.character-hero__sp[data-empty="true"] .character-hero__sp-label { color: var(--text-muted); }
.character-hero__sp[data-empty="true"] .character-hero__sp-value { color: var(--text-dim); text-shadow: none; }

/* Section header */
.character-page .section-header { display: flex; align-items: baseline; justify-content: space-between; margin: 48px 0 20px; }
.character-page .section-header__title { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-primary); }
.character-page .section-header__title::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--accent-gold); transform: rotate(45deg); margin-right: 12px; vertical-align: middle; box-shadow: 0 0 8px rgba(252,179,0,0.6); }
.character-page .section-header__hint { font-size: 12px; color: var(--text-muted); }

/* Skill grid */
.skill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* Skill card */
.skill-card {
  --card-glow: rgba(252,179,0,0.15);
  position: relative;
  display: flex; flex-direction: column;
  padding: 24px 24px 22px;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  overflow: hidden;
  isolation: isolate;
}
.skill-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 0% 0%, var(--card-glow) 0%, transparent 70%);
  opacity: 0.6; pointer-events: none; z-index: -1;
}
.skill-card:hover { border-color: rgba(252,179,0,0.25); box-shadow: 0 0 24px rgba(252,179,0,0.06); transform: translateY(-1px); }

/* Skill identity */
.skill-card__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.skill-card__icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(252,179,0,0.08);
  border: 1px solid rgba(252,179,0,0.18);
  flex-shrink: 0;
}
.skill-card__icon svg { width: 24px; height: 24px; color: var(--accent-gold); }
.skill-card[data-skill="ranker"] .skill-card__icon { background: rgba(110,237,216,0.08); border-color: rgba(110,237,216,0.18); }
.skill-card[data-skill="ranker"] .skill-card__icon svg { color: var(--accent-teal); }
.skill-card[data-skill="ranker"] { --card-glow: rgba(110,237,216,0.12); }
.skill-card[data-skill="influencer"] .skill-card__icon { background: rgba(129,140,248,0.08); border-color: rgba(129,140,248,0.18); }
.skill-card[data-skill="influencer"] .skill-card__icon svg { color: var(--accent-violet); }
.skill-card[data-skill="influencer"] { --card-glow: rgba(129,140,248,0.10); }
.skill-card[data-skill="sweeper"] .skill-card__icon { background: rgba(244,114,182,0.08); border-color: rgba(244,114,182,0.18); }
.skill-card[data-skill="sweeper"] .skill-card__icon svg { color: #f472b6; }
.skill-card[data-skill="sweeper"] { --card-glow: rgba(244,114,182,0.10); }

.skill-card__title-block { flex: 1; min-width: 0; }
.skill-card__name { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-primary); margin-bottom: 2px; }
.skill-card__name-ko { font-family: var(--font-body); font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.02em; }
.skill-card__multiplier {
  align-self: flex-start;
  padding: 4px 10px;
  background: rgba(252,179,0,0.10);
  border: 1px solid rgba(252,179,0,0.22);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  color: var(--accent-gold);
  font-variant-numeric: tabular-nums;
}
.skill-card[data-skill="ranker"] .skill-card__multiplier { background: rgba(110,237,216,0.10); border-color: rgba(110,237,216,0.22); color: var(--accent-teal); }
.skill-card[data-skill="influencer"] .skill-card__multiplier { background: rgba(129,140,248,0.10); border-color: rgba(129,140,248,0.22); color: var(--accent-violet); }
.skill-card[data-skill="sweeper"] .skill-card__multiplier { background: rgba(244,114,182,0.10); border-color: rgba(244,114,182,0.22); color: #f472b6; }

/* Description */
.skill-card__desc { font-size: 13px; line-height: 1.55; color: var(--text-muted); margin-bottom: 16px; }

/* Level pips */
.skill-card__pips { display: flex; gap: 6px; margin-bottom: 18px; }
.skill-card__pip {
  flex: 1; height: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  transition: all 0.25s ease;
}
.skill-card__pip[data-filled="true"] { background: var(--accent-gold); border-color: var(--accent-gold); box-shadow: 0 0 8px rgba(252,179,0,0.5); }
.skill-card[data-skill="ranker"] .skill-card__pip[data-filled="true"] { background: var(--accent-teal); border-color: var(--accent-teal); box-shadow: 0 0 8px rgba(110,237,216,0.5); }
.skill-card[data-skill="influencer"] .skill-card__pip[data-filled="true"] { background: var(--accent-violet); border-color: var(--accent-violet); box-shadow: 0 0 8px rgba(129,140,248,0.5); }
.skill-card[data-skill="sweeper"] .skill-card__pip[data-filled="true"] { background: #f472b6; border-color: #f472b6; box-shadow: 0 0 8px rgba(244,114,182,0.5); }

/* Footer (Level meta + button) */
.skill-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--border-subtle); }
.skill-card__level-meta { display: flex; flex-direction: column; gap: 2px; }
.skill-card__level-meta-label { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.skill-card__level-meta-value { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.skill-card__level-meta-next { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Level-up button — primary action */
.skill-card__levelup {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(252,179,0,0.95) 0%, rgba(252,179,0,0.7) 100%);
  color: #1a1a0a;
  border: 1px solid rgba(252,179,0,0.6);
  font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(252,179,0,0.25);
}
.skill-card__levelup:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(252,179,0,0.35); }
.skill-card__levelup svg { width: 14px; height: 14px; }
.skill-card__levelup-cost { padding: 1px 7px; border-radius: 5px; background: rgba(0,0,0,0.18); font-family: var(--font-display); font-size: 11px; font-weight: 700; }

/* Disabled (insufficient SP) */
.skill-card__levelup[disabled] {
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
  border-color: var(--border-subtle);
  box-shadow: none;
  cursor: not-allowed;
}
.skill-card__levelup[disabled]:hover { transform: none; box-shadow: none; }
.skill-card__levelup[disabled] .skill-card__levelup-cost { background: rgba(255,255,255,0.04); color: var(--text-dim); }

/* Maxed badge */
.skill-card__maxed {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 10px;
  background: rgba(110,237,216,0.10);
  border: 1px solid rgba(110,237,216,0.30);
  color: var(--accent-teal);
  font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.skill-card__maxed svg { width: 14px; height: 14px; }

/* v2 locked overlay */
.skill-card[data-locked="true"] { opacity: 0.55; }
.skill-card[data-locked="true"]::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0, transparent 10px, rgba(255,255,255,0.015) 10px, rgba(255,255,255,0.015) 20px);
  pointer-events: none; border-radius: 14px;
}
.skill-card__lock-tag {
  align-self: flex-start;
  padding: 4px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
}
.skill-card__locked-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed var(--border-subtle);
  color: var(--text-muted);
  font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
}
.skill-card__locked-cta svg { width: 14px; height: 14px; }

/* Levelup confirmation toast */
.levelup-toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(120%);
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  background: var(--bg-glass-solid);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(252,179,0,0.4);
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5), 0 0 32px rgba(252,179,0,0.15);
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
  z-index: 50;
}
.levelup-toast[data-open="true"] { transform: translateX(-50%) translateY(0); }
.levelup-toast__icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(252,179,0,0.18); color: var(--accent-gold); }
.levelup-toast__icon svg { width: 20px; height: 20px; }
.levelup-toast__text { display: flex; flex-direction: column; gap: 2px; }
.levelup-toast__title { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-primary); }
.levelup-toast__sub { font-size: 12px; color: var(--text-muted); }

/* Mobile / small screens */
@media (max-width: 720px) {
  .character-page { padding: 24px 18px 64px; }
  .character-hero {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px;
  }
  .character-hero__level { justify-self: start; }
  .character-hero__sp { align-self: flex-start; align-items: flex-start; width: 100%; }
  .skill-grid { grid-template-columns: 1fr; gap: 14px; }
  .skill-card__footer { flex-direction: column; align-items: stretch; gap: 10px; }
  .skill-card__level-meta { flex-direction: row; align-items: baseline; gap: 8px; }
  .skill-card__levelup, .skill-card__maxed, .skill-card__locked-cta { justify-content: center; }
}

/* === src/features/character/components/reward_breakdown_chip === */
.reward-tx__breakdown {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-top: 6px;
  background: rgba(252, 179, 0, 0.04);
  border: 1px dashed rgba(252, 179, 0, 0.20);
  border-radius: 10px;
  font-size: 12px;
}
.breakdown__base { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.breakdown__base em { font-style: normal; color: var(--text-primary); font-weight: 600; }
.breakdown__plus { color: var(--text-dim); }
.mt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 7px;
  background: rgba(252, 179, 0, 0.12);
  border: 1px solid rgba(252, 179, 0, 0.30);
  color: var(--accent-gold);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: default;
}
.mt-chip svg { width: 12px; height: 12px; }
.breakdown__equals { color: var(--text-dim); }
.breakdown__total {
  color: var(--accent-gold);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
}

/* === src/features/character/components/level_chip === */
.character-level-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 22px;
  border-radius: 14px;
  background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(252, 179, 0, 0.12) 0%, rgba(252, 179, 0, 0.04) 70%, transparent 100%);
  border: 1px solid rgba(252, 179, 0, 0.25);
  box-shadow: 0 0 24px rgba(252, 179, 0, 0.10), inset 0 0 16px rgba(252, 179, 0, 0.04);
  cursor: default;
}
.character-level-chip__label {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent-gold);
  text-transform: uppercase;
  opacity: 0.85;
}
.character-level-chip__num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  color: var(--accent-gold);
  text-shadow: 0 0 18px rgba(252, 179, 0, 0.4);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.character-level-chip__sub {
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Inline-mini variant — small badge alongside username for tight layouts */
.level-badge-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 7px;
  background: rgba(252, 179, 0, 0.10);
  border: 1px solid rgba(252, 179, 0, 0.22);
  color: var(--accent-gold);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  vertical-align: middle;
}
.level-badge-mini::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-gold);
  box-shadow: 0 0 6px var(--accent-gold);
}

/* Brand-new account fallback (level 1) */
.character-level-chip[data-level="1"] {
  background: rgba(255, 255, 255, 0.025);
  border-color: var(--border-subtle);
  box-shadow: none;
}
.character-level-chip[data-level="1"] .character-level-chip__label { color: var(--text-muted); }
.character-level-chip[data-level="1"] .character-level-chip__num {
  color: var(--text-dim);
  text-shadow: none;
}
/* === src/features/cross_posting/components/connections_page === */
/*
 * Settings → Connections page styles. Extracted from page.html with
 * the same class/element-id contract — JS (none here, all state in
 * Dioxus signals) and CSS selectors must match the RSX class strings.
 *
 * Phase 1A: dark-only token set (mockup is dark-mode), kept inline as
 * `--bsky` / `--accent-*` etc. so the connection-card visual identity
 * (gold + teal arena aesthetic, blue Bluesky brand) survives. Light-
 * theme parity is deferred to a polish PR pre-1D — at that point the
 * tokens move to `var(--dark, ...) var(--light, ...)` per
 * `conventions/styling.md`.
 */
.connections-arena {
  --bg-void: #06060e;
  --bg-glass: rgba(12, 12, 26, 0.65);
  --bg-glass-hover: rgba(20, 20, 40, 0.80);
  --bg-input: rgba(255, 255, 255, 0.025);
  --bg-input-focus: rgba(255, 255, 255, 0.04);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);
  --text-primary: #f0f0f5;
  --text-muted: #8888a8;
  --text-dim: #55556a;
  --accent-gold: #fcb300;
  --accent-teal: #6eedd8;
  --accent-coral: #ef4444;
  --accent-green: #22c55e;
  --accent-violet: #818cf8;
  --bsky: #0a85ff;
  --linkedin: #0a66c2;
  --threads: #f5f5f5;
  --farcaster: #8a63d2;
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Outfit', sans-serif;

  position: relative;
  /* Body has `overflow: hidden` on desktop (tailwind.css), so this
     arena owns its own scroll container. */
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
}

.connections-arena::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(10, 133, 255, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 85% 70%, rgba(110, 237, 216, 0.04) 0%, transparent 60%);
  z-index: -1;
  pointer-events: none;
}

/* ─── Top bar ────────────────────────────────────────── */
/* `.arena-topbar`, `.arena-topbar__left`, `.back-btn`, `.topbar-title*` are
   defined by dev's shared post-shell styling earlier in this file (with
   space-toggle tokens for light/dark). The mockup-extracted dark-only
   versions used to live here, but they cascade-override dev's generic
   defs and broke light mode on every page that uses these selectors.
   Drop them — dev's defs already cover the needs of the connections
   page, and we'd rather inherit the polished light tokens than fight
   them. */

/* ─── Page ───────────────────────────────────────────── */
.connections-page {
  position: relative;
  z-index: 1;
  flex: 1;
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
  padding: 36px 28px 60px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* ─── Hero ───────────────────────────────────────────── */
.connections-hero {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  padding: 30px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}
.connections-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 15% 15%, rgba(10, 133, 255, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 45% 55% at 95% 90%, rgba(110, 237, 216, 0.10) 0%, transparent 60%);
  pointer-events: none;
}
.connections-hero > * { position: relative; z-index: 1; }
.connections-hero__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.connections-hero__eyebrow {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim);
  display: flex; align-items: center; gap: 8px;
}
.connections-hero__eyebrow svg { width: 12px; height: 12px; color: var(--bsky); }
.connections-hero__title {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700;
  letter-spacing: 0.02em; line-height: 1.2;
  color: var(--text-primary);
}
.connections-hero__title-accent {
  background: linear-gradient(135deg, var(--bsky), var(--accent-teal));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.connections-hero__sub {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 520px;
}

.connections-hero__stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.connections-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-subtle);
  min-width: 92px;
}
.connections-hero__stat-value {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.connections-hero__stat-label {
  font-family: var(--font-display);
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim);
}
.connections-hero__stat-value--accent { color: var(--accent-teal); }

.connections-hero__orbit { width: 180px; height: 180px; position: relative; display: none; }
@media (min-width: 720px) { .connections-hero__orbit { display: block; } }
.connections-hero__orbit-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.10); }
.connections-hero__orbit-ring--inner { inset: 30px; border-style: solid; border-color: rgba(255, 255, 255, 0.06); }
.connections-hero__orbit-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-gold), #e5a200);
  display: flex; align-items: center; justify-content: center;
  color: #0a0a0a;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 800; letter-spacing: 0.10em;
  box-shadow: 0 0 32px rgba(252, 179, 0, 0.35);
}
.connections-hero__orbit-chip {
  position: absolute;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #0a0a12;
}
.connections-hero__orbit-chip--bsky { background: var(--bsky); top: 6px; left: 50%; transform: translateX(-50%); }
.connections-hero__orbit-chip--linkedin { background: var(--linkedin); bottom: 14px; left: 16px; }
.connections-hero__orbit-chip--threads { background: #0a0a0a; border-color: rgba(255, 255, 255, 0.25); bottom: 14px; right: 16px; }
.connections-hero__orbit-chip svg { width: 18px; height: 18px; color: #fff; }

/* ─── Section heading ────────────────────────────────── */
.connections-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: -6px;
}
.connections-section-head__title {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 10px;
}
.connections-section-head__title::before {
  content: '';
  width: 4px; height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-gold), transparent);
}
.connections-section-head__meta {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-dim);
}

/* ─── Platform card ──────────────────────────────────── */
.platforms { display: flex; flex-direction: column; gap: 14px; }
.plat {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  overflow: hidden;
  transition: all 0.25s ease;
}
.plat:hover { border-color: rgba(255, 255, 255, 0.10); }
.plat[data-connected="true"] { border-color: rgba(34, 197, 94, 0.18); }
.plat[data-connected="true"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 0% 0%, rgba(34, 197, 94, 0.06) 0%, transparent 55%);
  pointer-events: none;
}
.plat[data-soon="true"] { opacity: 0.65; }

.plat__body {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  padding: 20px 22px;
  align-items: center;
}

.plat__logo {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.plat__logo--bsky { background: linear-gradient(135deg, #0a85ff, #1da1f2); box-shadow: 0 0 24px rgba(10, 133, 255, 0.20); }
.plat__logo--linkedin { background: #0a66c2; box-shadow: 0 0 24px rgba(10, 102, 194, 0.18); }
.plat__logo--threads { background: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.18); }
.plat__logo--farcaster { background: linear-gradient(135deg, #8a63d2, #6945b5); }
.plat__logo svg { width: 28px; height: 28px; color: #fff; }

.plat__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.plat__name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plat__name {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 100px;
  font-family: var(--font-display);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  border: 1px solid transparent;
}
.status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
.status-pill--connected { background: rgba(34, 197, 94, 0.08); color: var(--accent-green); border-color: rgba(34, 197, 94, 0.20); }
.status-pill--connected::before { animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.status-pill--off { background: rgba(255, 255, 255, 0.03); color: var(--text-dim); border-color: var(--border-subtle); }
.status-pill--off::before { background: var(--text-dim); box-shadow: none; }
.status-pill--soon { background: rgba(129, 140, 248, 0.08); color: var(--accent-violet); border-color: rgba(129, 140, 248, 0.20); }
.status-pill--soon::before { background: var(--accent-violet); }

.plat__handle {
  font-size: 13px;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.plat__handle svg { width: 12px; height: 12px; color: var(--text-dim); }
.plat__handle-sep { color: var(--text-dim); }
.plat__limit {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.plat__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.connections-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 10px;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  cursor: pointer; transition: all 0.25s ease;
  border: 1px solid transparent;
}
.connections-btn svg { width: 12px; height: 12px; }
.connections-btn--connect-bsky { background: linear-gradient(135deg, #0a85ff, #1da1f2); color: #fff; box-shadow: 0 2px 14px rgba(10, 133, 255, 0.25); }
.connections-btn--ghost { background: var(--bg-glass); border-color: var(--border-subtle); color: var(--text-muted); }
.connections-btn--ghost:hover { border-color: rgba(239, 68, 68, 0.25); color: var(--accent-coral); background: rgba(239, 68, 68, 0.05); }
.connections-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.plat__subrow {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 22px;
  border-top: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.18);
  flex-wrap: wrap;
}
.plat__subrow-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.plat__subrow-item svg { width: 13px; height: 13px; color: var(--text-dim); }
.plat__subrow-item strong { color: var(--text-primary); font-weight: 600; }
.plat__subrow-sep { flex: 1; }

/* Switch */
.switch {
  position: relative;
  width: 34px; height: 20px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.25s;
  flex-shrink: 0;
  padding: 0;
}
.switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: all 0.25s;
}
.switch[aria-checked="true"] { background: rgba(34, 197, 94, 0.25); border-color: rgba(34, 197, 94, 0.40); }
.switch[aria-checked="true"]::after { transform: translateX(14px); background: var(--accent-green); }

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 720px) {
  .connections-hero { grid-template-columns: 1fr; padding: 24px; }
  .connections-hero__title { font-size: 22px; }
  .plat__body { grid-template-columns: auto 1fr; gap: 14px; padding: 16px 18px; }
  .plat__actions { grid-column: 1/-1; flex-direction: row; justify-content: flex-end; }
  .plat__subrow { padding: 10px 18px; gap: 10px; }
  .plat__subrow-sep { display: none; }
}
@media (max-width: 500px) {
  .arena-topbar { padding: 12px 14px; }
  .topbar-title__eyebrow { display: none; }
  .topbar-title__main { font-size: 13px; }
  .connections-page { padding: 22px 14px 60px; gap: 18px; }
  .connections-hero__title { font-size: 20px; }
  .connections-hero__stats { gap: 8px; }
  .connections-hero__stat { padding: 8px 12px; min-width: 82px; }
  .connections-hero__stat-value { font-size: 16px; }
  .plat__logo { width: 46px; height: 46px; border-radius: 12px; }
  .plat__logo svg { width: 22px; height: 22px; }
  .plat__name { font-size: 14px; }
  .connections-btn { padding: 8px 12px; font-size: 9.5px; }
}

/* === src/features/cross_posting/components/bluesky_connect_modal === */
/*
 * Bluesky app-password connect modal. State-controlled by Dioxus
 * Signal<bool> via the `data-open` attribute (no JS). The
 * mockup's open/close is mirrored here through CSS-only transitions.
 *
 * Phase 1A: dark-only token set (mirrors connections_page/style.css);
 * dual `var(--dark, ...) var(--light, ...)` migration deferred.
 */
.bsky-modal-backdrop {
  --bsky-bg-glass: rgba(12, 12, 26, 0.96);
  --bsky-border-subtle: rgba(255, 255, 255, 0.06);
  --bsky-border-strong: rgba(255, 255, 255, 0.12);
  --bsky-text-primary: #f0f0f5;
  --bsky-text-muted: #8888a8;
  --bsky-text-dim: #55556a;
  --bsky-bg-input: rgba(255, 255, 255, 0.025);
  --bsky-bg-input-focus: rgba(255, 255, 255, 0.04);
  --bsky-blue: #0a85ff;
  --bsky-coral: #ef4444;
  --bsky-teal: #6eedd8;
  --bsky-font-display: 'Orbitron', sans-serif;
  --bsky-font-body: 'Outfit', sans-serif;

  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
  padding: 20px;
}
.bsky-modal-backdrop[data-open="true"] {
  background: rgba(6, 6, 14, 0.72);
  pointer-events: auto;
  backdrop-filter: blur(8px);
}

.bsky-modal {
  width: 100%;
  max-width: 480px;
  background: var(--bsky-bg-glass);
  backdrop-filter: blur(24px);
  border: 1px solid var(--bsky-border-strong);
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--bsky-font-body);
  color: var(--bsky-text-primary);
}
.bsky-modal-backdrop[data-open="true"] .bsky-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.bsky-modal__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--bsky-border-subtle);
  position: relative;
}
.bsky-modal__logo {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0a85ff, #1da1f2);
  display: flex; align-items: center; justify-content: center;
}
.bsky-modal__logo svg { width: 22px; height: 22px; color: #fff; }
.bsky-modal__head-body { flex: 1; }
.bsky-modal__head-title {
  font-family: var(--bsky-font-display);
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bsky-text-primary);
}
.bsky-modal__head-sub {
  font-size: 12px;
  color: var(--bsky-text-muted);
  margin-top: 2px;
}
.bsky-modal__close {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--bsky-border-subtle);
  color: var(--bsky-text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: all 0.2s;
}
.bsky-modal__close:hover {
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--bsky-coral);
}
.bsky-modal__close svg { width: 14px; height: 14px; }

.bsky-modal__body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bsky-modal__info {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(10, 133, 255, 0.06);
  border: 1px solid rgba(10, 133, 255, 0.18);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--bsky-text-muted);
  display: flex;
  gap: 10px;
}
.bsky-modal__info svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--bsky-blue);
  margin-top: 1px;
}
.bsky-modal__info a { color: var(--bsky-blue); text-decoration: none; }
.bsky-modal__info a:hover { text-decoration: underline; }

.bsky-field { display: flex; flex-direction: column; gap: 6px; }
.bsky-field__label {
  font-family: var(--bsky-font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bsky-text-dim);
  display: flex; align-items: center; gap: 6px;
}
.bsky-field__label svg { width: 11px; height: 11px; }
.bsky-field__input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 11px;
  background: var(--bsky-bg-input);
  border: 1px solid var(--bsky-border-subtle);
  font-family: var(--bsky-font-body);
  font-size: 14px;
  color: var(--bsky-text-primary);
  outline: none;
  transition: all 0.2s ease;
}
.bsky-field__input:focus {
  border-color: rgba(10, 133, 255, 0.35);
  background: var(--bsky-bg-input-focus);
}
.bsky-field__input::placeholder { color: var(--bsky-text-dim); }
.bsky-field__hint {
  font-size: 11.5px;
  color: var(--bsky-text-dim);
  line-height: 1.5;
}
.bsky-field__hint code {
  font-family: var(--bsky-font-display);
  color: var(--bsky-teal);
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(110, 237, 216, 0.06);
  font-size: 10.5px;
}

.bsky-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--bsky-border-subtle);
  background: rgba(0, 0, 0, 0.20);
}
.bsky-modal__foot-hint {
  font-size: 11px;
  color: var(--bsky-text-dim);
}
.bsky-modal__actions { display: flex; gap: 8px; }
.bsky-modal__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  border-radius: 10px;
  font-family: var(--bsky-font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 1px solid transparent;
}
.bsky-modal__btn svg { width: 12px; height: 12px; }
.bsky-modal__btn--cancel {
  background: transparent;
  border-color: var(--bsky-border-subtle);
  color: var(--bsky-text-muted);
}
.bsky-modal__btn--cancel:hover {
  border-color: var(--bsky-border-strong);
  color: var(--bsky-text-primary);
}
.bsky-modal__btn--primary {
  background: linear-gradient(135deg, #0a85ff, #1da1f2);
  color: #fff;
  box-shadow: 0 2px 14px rgba(10, 133, 255, 0.30);
}
.bsky-modal__btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* === src/features/cross_posting/components/compose_sidebar === */
/*
 * Compose-time cross-post sidebar — extracted from
 * `app/ratel/assets/design/cross-posting/compose-with-crosspost.html`.
 *
 * Phase 1A: dark-only token set (mirrors the connections-page treatment);
 * `var(--dark, ...) var(--light, ...)` migration is deferred to the 1D
 * polish PR per `conventions/styling.md` § Space Toggle Pattern.
 *
 * The mockup leaves selectors flat. We keep them flat (not scoped under
 * `.crosspost`) on purpose: this CSS only loads inside the post-edit
 * shell, the post-edit shell never co-mounts the connections-page
 * `.switch`, and prefixing every selector would diverge from the
 * `html-first-components.md` "preserve mockup class names" rule.
 */

.crosspost {
  /* Space-toggle tokens — match `post_edit`'s shell so the sidebar
     blends with the parent compose surface in both modes. */
  --bg-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --bg-input: var(--dark, rgba(255, 255, 255, 0.025)) var(--light, rgba(0, 0, 0, 0.03));
  --bg-input-focus: var(--dark, rgba(255, 255, 255, 0.04)) var(--light, rgba(0, 0, 0, 0.05));
  --border-subtle: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --border-strong: var(--dark, rgba(255, 255, 255, 0.12)) var(--light, rgba(0, 0, 0, 0.14));
  --text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --text-muted: var(--dark, #8888a8) var(--light, #55556a);
  --text-dim: var(--dark, #55556a) var(--light, #8a8aa0);
  --row-shade: var(--dark, rgba(0, 0, 0, 0.15)) var(--light, rgba(0, 0, 0, 0.04));
  --accent-gold: #fcb300;
  --accent-teal: #6eedd8;
  --accent-coral: #ef4444;
  --accent-green: #22c55e;
  --bsky: #0a85ff;
  --linkedin: #0a66c2;
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Outfit', sans-serif;

  /* Parent `.side-panel` (post_edit) owns sticky + scroll. Don't add
     another scroll container here — nested overflow splits the wheel
     event and the user can only scroll inside `.crosspost` instead of
     the whole side panel. */
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--font-body);
  color: var(--text-primary);
}

/* ─── Head ───────────────────────────────────────── */
.crosspost-head {
  padding: 4px 2px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.crosspost-head__eyebrow {
  font-family: var(--font-display);
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim);
}
.crosspost-head__title {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 10px;
}
.crosspost-head__title-accent {
  background: linear-gradient(135deg, var(--bsky), var(--accent-teal));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.crosspost-head__title-icon { color: var(--accent-teal); }
.crosspost-head__sub {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ─── Reach summary ──────────────────────────────── */
.reach-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.06), rgba(110, 237, 216, 0.04));
  border: 1px solid rgba(252, 179, 0, 0.15);
}
.reach-summary__left { display: flex; flex-direction: column; gap: 3px; }
.reach-summary__label {
  font-family: var(--font-display);
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim);
}
.reach-summary__value {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-gold);
}
.reach-summary__value strong { color: var(--text-primary); }
.reach-summary__icons { display: flex; }
.reach-chip {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #0a0a12;
  margin-left: -8px;
  transition: all 0.25s;
}
.reach-chip:first-child { margin-left: 0; }
.reach-chip--bsky { background: #0a85ff; }
.reach-chip--linkedin { background: #0a66c2; }
.reach-chip--threads {
  background: #0a0a0a;
  border-color: rgba(255, 255, 255, 0.2);
}
.reach-chip[data-off="true"] { opacity: 0.25; filter: grayscale(0.8); }
.reach-chip svg { width: 14px; height: 14px; color: #fff; }

/* ─── Per-platform card ──────────────────────────── */
.pp-card {
  position: relative;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.pp-card[data-enabled="false"][data-connected="true"] {
  opacity: 0.45;
  filter: grayscale(0.6);
}
.pp-card[data-enabled="true"] { border-color: rgba(255, 255, 255, 0.10); }
.pp-card[data-connected="false"] {
  border-style: dashed;
  border-color: var(--border-strong);
  background: var(--dark, rgba(6, 6, 14, 0.35)) var(--light, rgba(0, 0, 0, 0.03));
}

.pp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.pp-card[data-connected="false"] .pp-head { border-bottom: none; }
.pp-head__left { display: flex; align-items: center; gap: 10px; }
.pp-logo {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pp-logo--bsky { background: linear-gradient(135deg, #0a85ff, #1da1f2); }
.pp-logo--linkedin { background: #0a66c2; }
.pp-logo--threads {
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.pp-logo svg { width: 15px; height: 15px; color: #fff; }
.pp-name {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-primary);
}
.pp-name__handle {
  display: block;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--text-dim);
  margin-top: 1px;
}
.pp-name__status {
  display: block;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--accent-coral);
  margin-top: 1px;
}
.pp-card[data-connected="false"] .pp-head__switch { display: none; }

.switch {
  position: relative;
  width: 34px; height: 20px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.25s;
  flex-shrink: 0;
  padding: 0;
}
.switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: all 0.25s;
}
.switch[aria-checked="true"] {
  background: rgba(252, 179, 0, 0.30);
  border-color: rgba(252, 179, 0, 0.40);
}
.switch[aria-checked="true"]::after {
  transform: translateX(14px);
  background: var(--accent-gold);
}
.pp-card[data-platform="bluesky"] .switch[aria-checked="true"] {
  background: rgba(10, 133, 255, 0.30);
  border-color: rgba(10, 133, 255, 0.45);
}
.pp-card[data-platform="bluesky"] .switch[aria-checked="true"]::after { background: #0a85ff; }
.pp-card[data-platform="linkedin"] .switch[aria-checked="true"] {
  background: rgba(10, 102, 194, 0.30);
  border-color: rgba(10, 102, 194, 0.45);
}
.pp-card[data-platform="linkedin"] .switch[aria-checked="true"]::after { background: #0a66c2; }
.pp-card[data-platform="threads"] .switch[aria-checked="true"] {
  background: rgba(245, 245, 245, 0.20);
  border-color: rgba(245, 245, 245, 0.30);
}
.pp-card[data-platform="threads"] .switch[aria-checked="true"]::after { background: #f5f5f5; }

/* ─── Connect CTA (disconnected card) ────────────── */
.connect-cta {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.connect-cta__hint {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
  padding: 4px 8px;
}
.connect-cta__btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
}
.connect-cta__btn svg { width: 13px; height: 13px; }
.pp-card[data-platform="bluesky"] .connect-cta__btn {
  background: linear-gradient(135deg, #0a85ff, #1da1f2);
  color: #fff;
  box-shadow: 0 2px 14px rgba(10, 133, 255, 0.25);
}
.pp-card[data-platform="bluesky"] .connect-cta__btn:hover {
  box-shadow: 0 4px 22px rgba(10, 133, 255, 0.40);
  transform: translateY(-1px);
}
.pp-card[data-platform="linkedin"] .connect-cta__btn {
  background: #0a66c2;
  color: #fff;
  box-shadow: 0 2px 14px rgba(10, 102, 194, 0.25);
}
.pp-card[data-platform="linkedin"] .connect-cta__btn:hover {
  box-shadow: 0 4px 22px rgba(10, 102, 194, 0.40);
  transform: translateY(-1px);
}
.pp-card[data-platform="threads"] .connect-cta__btn {
  background: #fff;
  color: #0a0a0a;
}
.pp-card[data-platform="threads"] .connect-cta__btn:hover {
  background: #f0f0f0;
  transform: translateY(-1px);
}
.connect-cta__coming-soon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--dark, rgba(255, 255, 255, 0.05)) var(--light, rgba(0, 0, 0, 0.04));
  border: 1px dashed var(--dark, rgba(255, 255, 255, 0.12)) var(--light, rgba(0, 0, 0, 0.12));
  cursor: not-allowed;
}

/* ─── Per-platform footer (char count + warning) ── */
.pp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--border-subtle);
  background: var(--row-shade);
}
.pp-foot__count {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  display: flex; align-items: center; gap: 6px;
}
.pp-foot__count strong {
  color: var(--text-muted);
  font-weight: 800;
}
.pp-foot__count[data-state="warn"] strong { color: var(--accent-gold); }
.pp-foot__count[data-state="over"] strong { color: var(--accent-coral); }
.pp-foot__count-bar {
  position: relative;
  width: 28px; height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.pp-foot__count-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 2px;
  background: var(--accent-teal);
  transition: width 0.2s ease, background 0.2s ease;
}
.pp-foot__count[data-state="warn"] .pp-foot__count-bar-fill { background: var(--accent-gold); }
.pp-foot__count[data-state="over"] .pp-foot__count-bar-fill { background: var(--accent-coral); }
.pp-foot__badges { display: flex; gap: 6px; }
.pp-badge {
  padding: 3px 8px;
  border-radius: 5px;
  font-family: var(--font-display);
  font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 5px;
}
.pp-badge svg { width: 9px; height: 9px; }
.pp-badge--truncated {
  background: rgba(252, 179, 0, 0.10);
  color: var(--accent-gold);
  border: 1px solid rgba(252, 179, 0, 0.22);
}
.pp-badge--ok {
  background: rgba(34, 197, 94, 0.08);
  color: var(--accent-green);
  border: 1px solid rgba(34, 197, 94, 0.20);
}

/* Hide sidebar on small screens — design uses a compact bottom toggle
   on mobile per the post-edit shell; embedding on phones is deferred. */
@media (max-width: 720px) {
  .crosspost { position: static; max-height: none; }
}

/* === src/features/cross_posting/components/syndication_panel === */
/*
 * Post-detail Syndication panel — extracted from
 * `app/ratel/assets/design/cross-posting/post-detail-syndicated.html`.
 *
 * Phase 1A: dark-only token set (mirrors connections-page / compose-sidebar);
 * `var(--dark, ...) var(--light, ...)` migration deferred to the 1D polish PR
 * per `conventions/styling.md` § Space Toggle Pattern.
 *
 * Mockup class names preserved (`.syn`, `.syn-head`, `.syn-stats`, `.syn-card`,
 * `.status-pill`, `.engage`, `.mini-btn`). The panel only renders for the post
 * author, so co-mounting concerns with the connections-page `.status-pill` /
 * `.switch` don't apply.
 */

.syn {
  /* Space-toggle tokens — match `post_detail/style.css` so the panel
     follows the parent post-detail surface in both modes. */
  --bg-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.72));
  --border-subtle: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --text-muted: var(--dark, #8888a8) var(--light, #55556a);
  --text-dim: var(--dark, #55556a) var(--light, #8a8aa0);
  --row-shade: var(--dark, rgba(0, 0, 0, 0.18)) var(--light, rgba(0, 0, 0, 0.04));
  --accent-gold: #fcb300;
  --accent-teal: #6eedd8;
  --accent-coral: #ef4444;
  --accent-green: #22c55e;
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Outfit', sans-serif;

  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--font-body);
  color: var(--text-primary);
}

/* ─── Header ─────────────────────────────────────── */
.syn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.syn-head__title {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 10px;
}
.syn-head__title::before {
  content: '';
  width: 4px; height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-gold), transparent);
}
.syn-head__summary {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-dim);
}
/* Manual refresh — sits at the right edge of the header. Pull SyndicationJob
   rows that arrived after mount (publish → factory enqueue is async). */
.syn-head__refresh {
  margin-left: auto;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  transition: all 0.2s;
}
.syn-head__refresh:hover {
  border-color: rgba(252, 179, 0, 0.22);
  color: var(--accent-gold);
}
.syn-head__refresh svg { width: 13px; height: 13px; }
.syn-head__summary strong {
  color: var(--accent-teal);
  font-weight: 700;
}

/* ─── Stats strip ────────────────────────────────── */
.syn-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 18px;
  border-radius: 16px;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
}
.syn-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px;
  border-left: 1px solid var(--border-subtle);
}
.syn-stat:first-child { border-left: none; }
.syn-stat__value {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}
.syn-stat__value--accent { color: var(--accent-teal); }
.syn-stat__label {
  font-family: var(--font-display);
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim);
}

/* ─── Per-platform cards ─────────────────────────── */
.syn-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.syn-card {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  overflow: hidden;
  transition: all 0.25s ease;
}
.syn-card:hover { border-color: rgba(255, 255, 255, 0.10); }
.syn-card[data-status="success"] { border-color: rgba(34, 197, 94, 0.16); }
.syn-card[data-status="pending"] { border-color: rgba(252, 179, 0, 0.16); }
.syn-card[data-status="failed"] { border-color: rgba(239, 68, 68, 0.18); }
.syn-card[data-status="skipped"] { opacity: 0.55; }

.syn-card__body {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  padding: 14px 16px;
  align-items: center;
}

.syn-logo {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.syn-logo--bsky { background: linear-gradient(135deg, #0a85ff, #1da1f2); }
.syn-logo--linkedin { background: #0a66c2; }
.syn-logo--threads {
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.syn-logo svg { width: 18px; height: 18px; color: #fff; }

.syn-card__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.syn-card__name-row {
  display: flex; align-items: center; gap: 10px;
}
.syn-card__name {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}

/* Status pills (panel-local — connections-page has its own). */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  border: 1px solid transparent;
}
.status-pill::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
}
.status-pill--success {
  background: rgba(34, 197, 94, 0.08);
  color: var(--accent-green);
  border-color: rgba(34, 197, 94, 0.20);
}
.status-pill--success::before {
  background: var(--accent-green);
  box-shadow: 0 0 6px var(--accent-green);
  animation: pulse-dot 2s ease-in-out infinite;
}
.status-pill--pending {
  background: rgba(252, 179, 0, 0.08);
  color: var(--accent-gold);
  border-color: rgba(252, 179, 0, 0.20);
}
.status-pill--pending::before {
  background: var(--accent-gold);
  animation: pulse-dot 1.2s ease-in-out infinite;
}
.status-pill--failed {
  background: rgba(239, 68, 68, 0.08);
  color: var(--accent-coral);
  border-color: rgba(239, 68, 68, 0.20);
}
.status-pill--failed::before { background: var(--accent-coral); }
.status-pill--skipped {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  border-color: rgba(255, 255, 255, 0.10);
}
.status-pill--skipped::before { background: var(--text-dim); }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.syn-card__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--text-muted);
}
.syn-card__sub-item {
  display: inline-flex; align-items: center; gap: 5px;
}
.syn-card__sub-item svg {
  width: 12px; height: 12px;
  color: var(--text-dim);
}
.syn-card__sub-item strong {
  color: var(--text-primary);
  font-weight: 600;
}
.syn-card__err {
  font-size: 12px;
  color: var(--accent-coral);
  display: inline-flex; align-items: center; gap: 6px;
}
.syn-card__err svg { width: 12px; height: 12px; }
.syn-card__err strong { color: var(--accent-coral); }

.syn-card__actions {
  display: flex; gap: 6px;
}
.mini-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 10px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.mini-btn:hover {
  border-color: rgba(252, 179, 0, 0.22);
  color: var(--accent-gold);
}
.mini-btn svg { width: 10px; height: 10px; }
.mini-btn--connect {
  background: rgba(10, 133, 255, 0.08);
  border-color: rgba(10, 133, 255, 0.22);
  color: var(--bsky);
}
.mini-btn--connect:hover {
  background: rgba(10, 133, 255, 0.14);
  border-color: rgba(10, 133, 255, 0.32);
  color: var(--bsky);
}
.mini-btn--retry {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.20);
  color: var(--accent-coral);
}
.mini-btn--retry:hover {
  background: rgba(239, 68, 68, 0.12);
  color: var(--accent-coral);
  border-color: rgba(239, 68, 68, 0.30);
}
.mini-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.syn-card__engagement {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--border-subtle);
  background: var(--row-shade);
  flex-wrap: wrap;
}
.engage {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.engage svg {
  width: 12px; height: 12px;
  color: var(--text-dim);
}
.engage strong {
  color: var(--text-primary);
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 12.5px;
}

@media (max-width: 720px) {
  .syn-stats { padding: 14px; }
  .syn-stat__value { font-size: 18px; }
  .syn-card__body { grid-template-columns: auto 1fr; padding: 14px; }
  .syn-card__actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 500px) {
  .syn-stats { grid-template-columns: 1fr 1fr; gap: 6px; }
  .syn-stat:nth-child(3) { border-left: none; }
}

/* === src/features/cross_posting/components/onboarding_page === */
/* Single-screen post-signup interstitial (FR-2). Reuses arena tokens
   from connections_page; defines onboarding-scoped class names so the
   global namespace stays uncrowded. */

.onboarding-arena {
  --onb-bg: var(--dark, #06060e) var(--light, #f6f6f8);
  --onb-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --onb-text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --onb-text-dim: var(--dark, #55556a) var(--light, #989aae);
  --onb-glass: var(--dark, rgba(12,12,26,0.65)) var(--light, rgba(255,255,255,0.78));
  --onb-border: var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08));
  --onb-border-strong: var(--dark, rgba(255,255,255,0.12)) var(--light, rgba(0,0,0,0.16));
  --onb-input: var(--dark, rgba(255,255,255,0.025)) var(--light, rgba(0,0,0,0.03));

  position: relative;
  /* Body has `overflow: hidden` on desktop (tailwind.css), so this
     arena owns its own scroll container — same pattern as
     `.essence-sources-arena` / `.connections-arena`. */
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: var(--onb-bg);
  color: var(--onb-text);
}
.onboarding-arena::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 10%, rgba(252, 179, 0, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(10, 133, 255, 0.10) 0%, transparent 55%);
  z-index: -1;
  pointer-events: none;
}

.onboarding-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  background: var(--dark, rgba(6, 6, 14, 0.80)) var(--light, rgba(246, 246, 248, 0.85));
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--onb-border);
}
.onboarding-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--onb-text);
}
.onboarding-brand__dot {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fcb300, #6eedd8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  font-size: 11px;
  font-weight: 900;
}
.onboarding-topbar__skip {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--onb-text-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.onboarding-topbar__skip:hover { color: var(--onb-text-muted); }

.onboarding-page {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 28px 40px;
}
.onboarding-wizard {
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: center;
}
.onboarding-wizard__eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #fcb300;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.onboarding-wizard__eyebrow svg { width: 13px; height: 13px; }
.onboarding-wizard__title {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--onb-text);
}
.onboarding-wizard__title-accent {
  background: linear-gradient(135deg, #0a85ff, #6eedd8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.onboarding-wizard__sub {
  font-size: 16px;
  color: var(--onb-text-muted);
  line-height: 1.55;
  max-width: 460px;
  margin: 0 auto;
}

.onboarding-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
  text-align: left;
}
.onboarding-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--onb-glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--onb-border);
  transition: all 0.25s ease;
}
.onboarding-row:hover { border-color: var(--onb-border-strong); }
.onboarding-row[data-connected="true"] {
  border-color: rgba(34, 197, 94, 0.20);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.04), var(--onb-glass));
}
.onboarding-logo {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.onboarding-logo--bsky {
  background: linear-gradient(135deg, #0a85ff, #1da1f2);
  box-shadow: 0 0 20px rgba(10, 133, 255, 0.18);
}
.onboarding-logo--linkedin {
  background: #0a66c2;
  box-shadow: 0 0 20px rgba(10, 102, 194, 0.16);
}
.onboarding-logo--threads {
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.onboarding-logo svg { width: 22px; height: 22px; color: #fff; }
.onboarding-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.onboarding-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--onb-text);
}
.onboarding-meta {
  font-size: 12.5px;
  color: var(--onb-text-muted);
  line-height: 1.4;
}
.onboarding-meta strong { color: var(--onb-text); font-weight: 600; }
.onboarding-action { display: flex; align-items: center; }
.onboarding-btn-connect {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 1px solid transparent;
  color: #fff;
}
.onboarding-btn-connect svg { width: 13px; height: 13px; }
.onboarding-btn-connect--bsky {
  background: linear-gradient(135deg, #0a85ff, #1da1f2);
  box-shadow: 0 2px 14px rgba(10, 133, 255, 0.22);
}
.onboarding-btn-connect--bsky:hover {
  box-shadow: 0 4px 22px rgba(10, 133, 255, 0.38);
  transform: translateY(-1px);
}
.onboarding-btn-connect--linkedin {
  background: linear-gradient(135deg, #0a66c2, #1f7fd6);
  box-shadow: 0 2px 14px rgba(10, 102, 194, 0.22);
}
.onboarding-btn-connect--linkedin:hover {
  box-shadow: 0 4px 22px rgba(10, 102, 194, 0.38);
  transform: translateY(-1px);
}
.onboarding-btn-connect--soon {
  background: var(--onb-input);
  color: var(--onb-text-dim);
  cursor: not-allowed;
}
.onboarding-connected-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 100px;
  background: rgba(34, 197, 94, 0.08);
  color: #22c55e;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border: 1px solid rgba(34, 197, 94, 0.20);
}
.onboarding-connected-badge svg { width: 12px; height: 12px; }

.onboarding-benefits {
  padding: 18px 22px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(252, 179, 0, 0.05), rgba(110, 237, 216, 0.03));
  border: 1px solid rgba(252, 179, 0, 0.14);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 6px;
  text-align: left;
}
.onboarding-benefit {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.onboarding-benefit__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(252, 179, 0, 0.10);
  border: 1px solid rgba(252, 179, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fcb300;
  margin-bottom: 4px;
}
.onboarding-benefit__icon svg { width: 14px; height: 14px; }
.onboarding-benefit__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--onb-text);
}
.onboarding-benefit__hint {
  font-size: 11.5px;
  color: var(--onb-text-muted);
  line-height: 1.45;
}

.onboarding-cta-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}
.onboarding-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 1px solid transparent;
}
.onboarding-cta svg { width: 14px; height: 14px; }
.onboarding-cta--primary {
  background: linear-gradient(135deg, #fcb300, #e5a200);
  color: #0a0a0a;
  box-shadow: 0 4px 20px rgba(252, 179, 0, 0.28);
}
.onboarding-cta--primary:hover {
  box-shadow: 0 6px 30px rgba(252, 179, 0, 0.45);
  transform: translateY(-1px);
}
.onboarding-cta--ghost {
  background: transparent;
  border-color: var(--onb-border-strong);
  color: var(--onb-text-muted);
}
.onboarding-cta--ghost:hover {
  border-color: var(--dark, rgba(255,255,255,0.25)) var(--light, rgba(0,0,0,0.30));
  color: var(--onb-text);
}

.onboarding-footer-note {
  font-size: 12px;
  color: var(--onb-text-dim);
  margin-top: 8px;
  line-height: 1.5;
}
.onboarding-footer-note strong { color: var(--onb-text-muted); }

@media (max-width: 720px) {
  .onboarding-topbar { padding: 14px 18px; gap: 12px; }
  .onboarding-topbar__skip { font-size: 9px; }
  .onboarding-wizard__title { font-size: 28px; }
  .onboarding-wizard__sub { font-size: 14px; }
  .onboarding-row { grid-template-columns: auto 1fr; padding: 14px 16px; }
  .onboarding-action { grid-column: 1 / -1; justify-content: flex-end; }
  .onboarding-benefits { grid-template-columns: 1fr; gap: 14px; }
  .onboarding-page { padding: 36px 18px; }
}

/* === src/features/posts/views/post_detail (signed-out backlink-landing) === */
/* AC-17 / AC-18 — referral banner, brand bar, and subscribe CTA visible
   only when the post-detail viewer is anonymous. Class names are
   `pd-*` to live alongside the existing post-detail rules without
   conflict. */

.pd-refer-bar {
  --pd-refer-bg-from: var(--dark, rgba(10,133,255,0.14)) var(--light, rgba(10,133,255,0.10));
  --pd-refer-bg-to: var(--dark, rgba(10,133,255,0.05)) var(--light, rgba(10,133,255,0.04));
  --pd-refer-border: var(--dark, rgba(10,133,255,0.25)) var(--light, rgba(10,133,255,0.30));
  --pd-refer-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --pd-refer-text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --pd-refer-bsky-bg: #0a85ff;

  position: sticky;
  top: 0;
  z-index: 40;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  background: linear-gradient(180deg, var(--pd-refer-bg-from), var(--pd-refer-bg-to));
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--pd-refer-border);
  color: var(--pd-refer-text-muted);
}
.pd-refer-bar[data-show="true"] { display: flex; }
.pd-refer-bar__icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--pd-refer-bsky-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.pd-refer-bar__icon svg { width: 14px; height: 14px; }
.pd-refer-bar__text {
  display: none;
  flex: 1;
  font-size: 12.5px;
  color: var(--pd-refer-text-muted);
  min-width: 0;
}
.pd-refer-bar[data-platform="bluesky"] .pd-refer-bar__text--bluesky { display: block; }
.pd-refer-bar[data-platform="linkedin"] .pd-refer-bar__text--linkedin { display: block; }
.pd-refer-bar[data-platform="threads"] .pd-refer-bar__text--threads { display: block; }
/* Tier-3 (no platform) → fall back to generic. */
.pd-refer-bar[data-tier="3"] .pd-refer-bar__text--generic { display: block; }
.pd-refer-bar__close {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--pd-refer-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s;
}
.pd-refer-bar__close:hover {
  color: var(--pd-refer-text);
  background: var(--dark, rgba(255,255,255,0.04)) var(--light, rgba(0,0,0,0.04));
}
.pd-refer-bar__close svg { width: 14px; height: 14px; }

.pd-brand-bar {
  --pd-brand-bg: var(--dark, rgba(6,6,14,0.50)) var(--light, rgba(255,255,255,0.85));
  --pd-brand-border: var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08));
  --pd-brand-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --pd-brand-text-muted: var(--dark, #8888a8) var(--light, #6b6b80);

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid var(--pd-brand-border);
  background: var(--pd-brand-bg);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 30;
  /* If the referral bar is visible above, push the brand bar below it. */
}
.pd-refer-bar[data-show="true"] + .pd-brand-bar { top: 48px; }
.pd-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pd-brand-text);
  text-decoration: none;
}
.pd-brand__dot {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fcb300, #6eedd8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  font-size: 11px;
  font-weight: 900;
}
.pd-brand-bar__actions { display: flex; gap: 8px; }
.pd-brand-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 1px solid var(--pd-brand-border);
  background: transparent;
  color: var(--pd-brand-text-muted);
  text-decoration: none;
}
.pd-brand-btn:hover {
  border-color: rgba(252, 179, 0, 0.25);
  color: #fcb300;
}
.pd-brand-btn--primary {
  background: linear-gradient(135deg, #fcb300, #e5a200);
  color: #0a0a0a;
  border-color: transparent;
  box-shadow: 0 2px 14px rgba(252, 179, 0, 0.20);
}
.pd-brand-btn--primary:hover {
  color: #0a0a0a;
  box-shadow: 0 4px 22px rgba(252, 179, 0, 0.35);
}
.pd-brand-btn--primary svg { width: 12px; height: 12px; }

.pd-subscribe-cta {
  --pd-cta-bg-from: var(--dark, rgba(252,179,0,0.05)) var(--light, rgba(252,179,0,0.08));
  --pd-cta-bg-to: var(--dark, rgba(110,237,216,0.03)) var(--light, rgba(110,237,216,0.05));
  --pd-cta-border: var(--dark, rgba(252,179,0,0.18)) var(--light, rgba(252,179,0,0.25));
  --pd-cta-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --pd-cta-text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --pd-cta-ghost-border: var(--dark, rgba(255,255,255,0.12)) var(--light, rgba(0,0,0,0.16));

  margin: 32px 0 8px;
  padding: 28px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--pd-cta-bg-from), var(--pd-cta-bg-to));
  border: 1px solid var(--pd-cta-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  align-items: center;
}
.pd-subscribe-cta__eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fcb300;
}
.pd-subscribe-cta__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--pd-cta-text);
  margin: 0;
}
.pd-subscribe-cta__sub {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--pd-cta-text-muted);
  max-width: 480px;
  margin: 0;
}
.pd-subscribe-cta__row { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }
.pd-subscribe-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
  border: 1px solid transparent;
}
.pd-subscribe-cta__btn svg { width: 13px; height: 13px; }
.pd-subscribe-cta__btn--primary {
  background: linear-gradient(135deg, #fcb300, #e5a200);
  color: #0a0a0a;
  box-shadow: 0 4px 20px rgba(252, 179, 0, 0.28);
}
.pd-subscribe-cta__btn--primary:hover {
  box-shadow: 0 6px 30px rgba(252, 179, 0, 0.45);
  transform: translateY(-1px);
  color: #0a0a0a;
}
.pd-subscribe-cta__btn--ghost {
  background: transparent;
  border-color: var(--pd-cta-ghost-border);
  color: var(--pd-cta-text-muted);
}
.pd-subscribe-cta__btn--ghost:hover {
  color: var(--pd-cta-text);
  border-color: var(--dark, rgba(255,255,255,0.25)) var(--light, rgba(0,0,0,0.30));
}

/* Backlink-landing 2-column grid (desktop). The page itself owns the
   layout — when signed-out we expand it to grid 1fr 340px so the
   article + aside sit side-by-side; subscribe-cta spans full width
   below them. Signed-in viewers see the original single-column flow. */
.post-arena[data-signed-out="true"] .page {
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;
  align-items: start;
}
.post-arena[data-signed-out="true"] .page > .pd-subscribe-cta {
  grid-column: 1 / -1;
}

.pd-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: start;
  /* No sticky positioning — short articles made the cards look "pinned"
     from the start since they immediately reached the sticky offset.
     Letting the side column scroll with the article gives a calmer
     reading experience. */
}

.pd-house-card {
  --pd-house-bg-from: var(--dark, rgba(12,12,26,0.85)) var(--light, rgba(255,255,255,0.85));
  --pd-house-bg-to: var(--dark, rgba(20,20,40,0.75)) var(--light, rgba(248,248,252,0.78));
  --pd-house-border: var(--dark, rgba(252,179,0,0.18)) var(--light, rgba(252,179,0,0.30));
  --pd-house-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --pd-house-text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --pd-house-text-dim: var(--dark, #55556a) var(--light, #989aae);
  --pd-house-divider: var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.06));

  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--pd-house-bg-from), var(--pd-house-bg-to));
  backdrop-filter: blur(20px);
  border: 1px solid var(--pd-house-border);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pd-house-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(252, 179, 0, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 0% 100%, rgba(110, 237, 216, 0.08) 0%, transparent 55%);
  pointer-events: none;
}
.pd-house-card > * { position: relative; z-index: 1; }

.pd-house-card__eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fcb300;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pd-house-card__eyebrow svg { width: 12px; height: 12px; }

.pd-house-card__hero {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pd-house-card__hero-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fcb300, #6eedd8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: #0a0a0a;
  overflow: hidden;
  flex-shrink: 0;
}
.pd-house-card__hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pd-house-card__hero-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pd-house-card__hero-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pd-house-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd-house-card__hero-sub {
  font-size: 12px;
  color: var(--pd-house-text-muted);
}

.pd-house-card__pitch {
  font-size: 13px;
  color: var(--pd-house-text-muted);
  line-height: 1.6;
  margin: 0;
}

.pd-house-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fcb300, #e5a200);
  color: #0a0a0a;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 20px rgba(252, 179, 0, 0.30);
  text-decoration: none;
}
.pd-house-card__cta:hover {
  box-shadow: 0 6px 30px rgba(252, 179, 0, 0.45);
  transform: translateY(-1px);
  color: #0a0a0a;
}
.pd-house-card__cta svg { width: 13px; height: 13px; }

.pd-house-card__note {
  font-size: 11.5px;
  color: var(--pd-house-text-dim);
  text-align: center;
  line-height: 1.4;
  margin: 0;
}

.pd-mcp-card {
  --pd-mcp-bg: var(--dark, rgba(12,12,26,0.65)) var(--light, rgba(255,255,255,0.78));
  --pd-mcp-border: var(--dark, rgba(255,255,255,0.06)) var(--light, rgba(0,0,0,0.08));
  --pd-mcp-text: var(--dark, #f0f0f5) var(--light, #12121a);
  --pd-mcp-text-muted: var(--dark, #8888a8) var(--light, #6b6b80);

  border-radius: 16px;
  background: var(--pd-mcp-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--pd-mcp-border);
  padding: 16px;
}
.pd-mcp-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.pd-mcp-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(129, 140, 248, 0.10);
  border: 1px solid rgba(129, 140, 248, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #818cf8;
}
.pd-mcp-card__icon svg { width: 16px; height: 16px; }
.pd-mcp-card__title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pd-mcp-text);
}
.pd-mcp-card__body {
  font-size: 12.5px;
  color: var(--pd-mcp-text-muted);
  line-height: 1.55;
  margin: 0;
}
.pd-mcp-card__body code {
  font-family: var(--font-display);
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(110, 237, 216, 0.06);
  color: #6eedd8;
}

@media (max-width: 1024px) {
  .post-arena[data-signed-out="true"] .page {
    grid-template-columns: 1fr;
  }
  .pd-side { position: static; }
}

@media (max-width: 720px) {
  .pd-refer-bar { padding: 8px 14px; gap: 10px; }
  .pd-refer-bar__text { font-size: 11.5px; }
  .pd-brand-bar { padding: 12px 16px; }
  .pd-subscribe-cta { padding: 22px 18px; }
  .pd-subscribe-cta__title { font-size: 18px; }
}

/* === mobile scroll escape for full-viewport arena wrappers === */
/* Desktop pattern: `body { overflow: hidden }` + each arena owns its own
   scroll container at 100%. On mobile, body itself becomes scrollable
   (tailwind.css `max-tablet:overflow-auto`), so a nested 100% scroll
   container creates two competing scroll roots and touch Y-scroll dies.
   Below releases the lock on tablet+mobile so the document scrolls
   naturally — matches the existing `.essence-arena` mobile override. */
@media (max-width: 768px) {
  /* NOTE: `.post-arena` is intentionally NOT in this list. It uses a fixed
     viewport-height internal scroll (see its base rule) so its sticky `상세`
     topbar stays pinned — `height: auto` here let it grow to content height,
     which moved scrolling to the document body and dragged the header away.
     Because the arena is sized to exactly the (safe-area-trimmed) viewport,
     the body doesn't overflow, so there's no competing-scroll-root problem. */
  .arena,
  .home-arena,
  .connections-arena,
  .onboarding-arena,
  .analyze-arena,
  .drafts-arena,
  .space-files-arena,
  .space-general-arena {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
  }
}

/* Space app pages (settings/general, analyze, panels, files) must OWN their
   scroll on mobile so their sticky topbar actually pins (the page would
   otherwise grow to content height under the global `body { overflow: hidden }`
   and the header would scroll out of view). The generic `height: auto` group
   above breaks that for the ones listed there, and `.space-panels-arena` never
   set an overflow at all — re-assert the scroll-container model here. Status-bar
   safe area is already handled by the `:root` padding, so the pinned header
   lands just below the status bar with `top: 0`. Desktop is untouched. */
@media (max-width: 768px) {
  /* Viewport-anchored, not `height: 100%`. `100%` resolves against `body`,
     and on mobile `body` is content-driven (tailwind flips it to
     `overflow: auto` under 900px) — measured at 549px on a 480px-tall
     viewport. So `100%` meant "as tall as the content", the page grew, and
     the sticky topbar drifted away with it. A viewport-relative height is
     always definite. Same fix as `.team-arena`, `.post-arena` and
     `.composer-arena`; `--kb-inset` is the soft-keyboard height app.rs
     publishes on <html>. */
  .space-general-arena,
  .space-panels-arena,
  .space-files-arena,
  .analyze-arena {
    height: calc(
      100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) -
        var(--kb-inset, 0px)
    );
    max-height: calc(
      100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) -
        var(--kb-inset, 0px)
    );
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
  /* The space arena and the standalone home are single-screen layouts by
     design: their base rules are `height: 100%` + `overflow: hidden` with an
     inner scroll region (`.home-arena__scroll` for home; fixed sections for
     the space arena). The generic `height: auto` group above overrides that
     on mobile — same class specificity, declared later — so the arena grew to
     content height and the DOCUMENT scrolled instead. That is what made the
     topbar and the filter tabs slide away and read as a half-cut, broken row.
     Restore the intended model. `100%` (not `100dvh`) is deliberate: `:root`
     already carries the safe-area insets as padding, so `100dvh` would exceed
     the visible area by the inset and hand the overflow back to `body`. */
  .arena,
  .home-arena--standalone {
    height: calc(
      100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) -
        var(--kb-inset, 0px)
    );
    max-height: calc(
      100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) -
        var(--kb-inset, 0px)
    );
    min-height: 0;
    overflow: hidden;
  }
  /* Analyze pages (home / create / report / poll·discussion detail) nest the
     real content + its sticky `.arena-topbar` inside an inner `.arena` that was
     `overflow: hidden` — so tall content got clipped with no scroll and the
     header couldn't pin. Make the inner `.arena` own the scroll. */
  .analyze-arena > .arena {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Analyze LIST arena — one screen, no scroll (mobile only).
     The list is a stack of fixed heights: a two-line hint (36px of text
     plus 24px of <p> margin), `.report-carousel` min-height 440, a card
     min-height 340 and the dots row. Measured against a 360x640 phone
     that totals 716px inside a 640px arena — 76px of overflow, and the
     scroll it produced is what dragged the sticky topbar off screen.
     Rather than shave those numbers (they'd break again on a shorter
     device), make every level between the arena and the card elastic so
     the carousel absorbs exactly what's left. Desktop keeps the fixed
     sizes; the other analyze surfaces (`--create`, `--detail`,
     `--records`) legitimately scroll and are not matched here. */
  /* `auto`, not `hidden`. Everything below is sized so the list fits a
     portrait phone without scrolling, but a viewport too short for the
     card's own content (landscape, ~360px tall) physically cannot fit —
     there, scrolling is the correct outcome and clipping is not. */
  .analyze-arena--list > .arena { overflow-y: auto; overflow-x: hidden; }
  .analyze-arena--list .arena-topbar { flex-shrink: 0; }
  /* `.split` is a grid; plain `1fr` floors the row at content height, so
     `minmax(0, 1fr)` is what actually lets `.main` shrink below it. */
  .analyze-arena--list .split {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
  }
  .analyze-arena--list .main,
  .analyze-arena--list .analyze-builder,
  .analyze-arena--list .builder-list {
    flex: 1 1 auto;
    min-height: 0;
  }
  .analyze-arena--list .builder-list-head { flex-shrink: 0; }
  /* The hint reads "use the arrows to flip through analyses" — the
     arrows are `display: none` under 480px, so on a phone the sentence
     is both wrong and the single largest fixed block in the stack. */
  .analyze-arena--list .builder-hint { display: none; }
  /* 200px is the floor, not 0: the card's own content (status pill,
     64px icon, title, one chip row) measures 192px, and squashing the
     carousel past that would clip it inside `__viewport`'s
     `overflow: hidden` with no scrollbar to reveal it. Keeping the
     floor lets the overflow travel up to `.arena`, which scrolls. */
  .analyze-arena--list .report-carousel {
    flex: 1 1 auto;
    min-height: 200px;
  }
  .analyze-arena--list .report-carousel__viewport { height: 100%; }
  .analyze-arena--list .report-carousel__track {
    height: 100%;
    align-items: stretch;
  }
  /* Keep the card at its designed height and let the leftover space be
     margin — stretching it to fill the carousel just spreads the icon,
     title and chips apart (the chips are `margin-top: auto`). `min()`
     is the clamp: the design height when it fits, the carousel height
     when the screen is too short for it. */
  .analyze-arena--list .report-card-large {
    height: min(100%, 360px);
    min-height: 0;
    /* Padding is the first thing to give on a short screen; without a
       clamp the icon + title + chips would paint outside the card. */
    padding: clamp(14px, 4vh, 28px) 18px;
    gap: clamp(8px, 2vh, 14px);
    overflow: hidden;
  }
  @media (max-width: 480px) {
    .analyze-arena--list .report-card-large { height: min(100%, 340px); }
  }
  /* One row of dots, always. A wrapped second row would silently steal
     height from the carousel the moment a space passes ~22 analyses. */
  .analyze-arena--list .report-carousel__dots {
    flex-shrink: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .analyze-arena--list .report-carousel__dots::-webkit-scrollbar { display: none; }
  .analyze-arena--list .report-carousel__dot { flex-shrink: 0; }
  /* Landscape (and split-screen) leaves ~300px under the topbar. The
     card's content floor is 192px, so the difference has to come out of
     the chrome around it or the page scrolls for the sake of padding. */
  @media (max-height: 620px) {
    .analyze-arena--list .split { padding-top: 8px; padding-bottom: 8px; }
    .analyze-arena--list .builder-list { gap: 10px; }
    .analyze-arena--list .builder-list-head h2 { font-size: 15px; }
  }
  /* The analyze report/detail variant (`--detail`, e.g. the cross-filter report
     view) kept `height: 100vh` — taller than the safe-area-constrained body — so
     it overflowed instead of scrolling, and its topbar was `position: relative`.
     Bind it to the parent height, own the scroll, and pin the header. (`--create`
     already scrolls with a sticky topbar.) `body` prefix raises specificity above
     the variant's own (0,2,0)/(0,3,0) rules. */
  body .analyze-arena.analyze-arena--detail {
    height: calc(
      100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) -
        var(--kb-inset, 0px)
    );
    min-height: 0;
    max-height: calc(
      100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) -
        var(--kb-inset, 0px)
    );
    overflow-y: auto;
    overflow-x: hidden;
  }
  body .analyze-arena.analyze-arena--detail .arena-topbar {
    position: sticky;
    top: 0;
  }
  /* Hide the "사용된 데이터 확인하기" (view raw data) CTA on mobile — desktop
     keeps it. `body .analyze-arena--detail` prefix beats the variant's own
     (0,3,0) `display: inline-flex` rule. */
  body .analyze-arena.analyze-arena--detail .builder-result__records-btn {
    display: none;
  }
  /* Reports use `overflow: hidden` expecting an inner scroller that doesn't
     exist, so long reports get clipped with no way to scroll. Make the arena
     own the scroll and pin its (relative) topbar so the header stays put.
     `body` prefix bumps specificity above the bare `.reports-arena` base rule,
     which is defined LATER in the source and would otherwise win. */
  body .reports-arena {
    height: calc(
      100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) -
        var(--kb-inset, 0px)
    );
    max-height: calc(
      100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) -
        var(--kb-inset, 0px)
    );
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
  body .reports-arena .reports-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
  }
  /* ...but the carousel row underneath is not actually elastic, so it
     never gets the chance to scroll: `.carousel-wrapper` is
     `overflow: hidden` wrapped around a card with a fixed 360px
     min-height, which means on anything shorter than ~600px the card's
     footer and the whole dots row are silently CLIPPED — no scrollbar,
     no indication that content exists below. Measured at 360x560 the
     dots row disappears completely. Give the wrapper and the track a
     real floor of zero and let the card shrink into whatever is left.
     `min()` is the clamp: the designed height when it fits, the track's
     height when the screen is too short for it — so a 640px phone is
     pixel-identical to before and only shorter screens change.
     The `body` prefix is required: the reports card sizing lives in a
     `@media (max-width: 500px)` block much further down the file and
     would otherwise win on source order at equal specificity. */
  /* The wrapper's `overflow: hidden` is the whole bug: per flexbox, a
     flex item only gets an automatic content-based minimum size while
     its overflow is `visible`. With `hidden` that floor becomes 0, so
     the arena squeezed the wrapper past the card and quietly ate the
     footer and the dots row. Restoring `visible` restores the floor —
     and it tracks the real content, so it stays correct when Android's
     font-size setting reflows the description to more lines, which a
     hard-coded px floor could not. Nothing needs the clip: the track
     clips its own horizontal scroll, and the edge fades are absolutely
     positioned inside the wrapper. */
  body .reports-arena .carousel-wrapper {
    flex: 1 1 auto;
    overflow: visible;
  }
  /* `1 1 auto` (the track fills the wrapper), NOT `0 1 auto`. With a
     content-sized basis the card's `height: min(100%, ...)` and the
     track's auto height chase each other and the card settles at its
     intrinsic ~325px even on a screen with room for the full 360px.
     Letting the track fill gives the percentage a definite base. The
     only visible consequence is that the dots row anchors to the
     bottom instead of sitting ~20px higher; the card itself lands on
     exactly the same pixel as before on any screen that already fit. */
  body .reports-arena .carousel-track {
    flex: 1 1 auto;
    min-height: 0;
  }
  body .reports-arena .report-card {
    /* `min-content`, not 0. `height: min(100%, 360px)` is a preference, but
       360px stops being enough once Android's font-size setting reflows the
       create card's description — measured a 2px clip at 130%. A content
       floor lets the card outgrow the cap in exactly that case, and the
       arena (`overflow-y: auto`) takes the difference. */
    min-height: min-content;
    height: min(100%, 360px);
  }
  body .reports-arena .carousel-dots { flex-shrink: 0; }
  /* Once the card can shrink, its fixed-size children shrink with it —
     the 64px create icon flattened into a pill on a 480px-tall screen.
     Pin the shapes and let the description paragraph be the part that
     gives (the card is `overflow: hidden`, so it is also the backstop). */
  body .reports-arena .report-card__create-icon,
  body .reports-arena .report-card__create-cta,
  body .reports-arena .report-card__top,
  body .reports-arena .report-card__identity,
  body .reports-arena .report-card__footer {
    flex-shrink: 0;
  }
  /* 48px of vertical padding is a fifth of the card once the screen is
     short enough to shrink it. Scoped by HEIGHT so a 640px-tall phone —
     which already fit the full 360px card — is left exactly as it was. */
  @media (max-height: 620px) {
    body .reports-arena .report-card--create { padding: 28px 24px; gap: 14px; }
    /* 60px of track padding above and below is a third of the space a
       landscape phone has left after the topbar and the filter row. */
    body .reports-arena .carousel-track { padding-top: 16px; padding-bottom: 16px; }
    body .reports-arena .carousel-dots { padding-bottom: 10px; }
    /* The "— REPORTS —" divider is decoration; the counts row directly
       under it already names the section. First thing to go when the
       viewport is too short for the card itself. */
    body .reports-arena .section-label { display: none; }
  }
}

/* === src/features/admin/views/main === */
/* Admin arena — list-style chrome shared by every admin page.
   Token names mirror the analyze / space arena style.css family so
   they read consistently when read together. Scoped under
   `.admin-arena` so the variables don't leak into surrounding pages. */

.admin-arena {
  --bg-void: var(--dark, #06060e) var(--light, #f5f5fb);
  --bg-glass: var(--dark, rgba(12, 12, 26, 0.65))
    var(--light, rgba(255, 255, 255, 0.75));
  --bg-card: var(--dark, rgba(20, 20, 36, 0.55))
    var(--light, rgba(255, 255, 255, 0.85));
  --border-soft: var(--dark, rgba(255, 255, 255, 0.06))
    var(--light, rgba(10, 10, 30, 0.08));
  --border-strong: var(--dark, rgba(255, 255, 255, 0.12))
    var(--light, rgba(10, 10, 30, 0.16));
  --text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --accent-gold: #fcb300;
  --accent-teal: #6eedd8;
  --accent-violet: var(--dark, #8b5cf6) var(--light, #7c3aed);

  position: relative;
  display: flex;
  flex-direction: column;
  /* body is globally overflow:hidden+100dvh, so admin pages claim
   * their own scroll container here. ::before stays position:fixed so
   * the radial wash sits on the viewport, not the scrolled box. */
  height: 100dvh;
  overflow-y: auto;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);
}

.admin-arena::before {
  content: "";
  position: fixed;
  inset: -10%;
  background:
    radial-gradient(circle at 20% 18%, rgba(252, 179, 0, 0.08), transparent 45%),
    radial-gradient(circle at 80% 22%, rgba(110, 237, 216, 0.06), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(139, 92, 246, 0.07), transparent 50%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

.admin-arena__topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-soft);
}

.admin-arena__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.admin-arena__back:hover {
  background: var(--bg-card);
  border-color: var(--accent-gold);
}
.admin-arena__back svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}

.admin-arena__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.admin-arena__section {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 20px 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.admin-arena__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}

.admin-arena__section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.admin-arena__section-title::before {
  content: "";
  width: 6px;
  height: 18px;
  border-radius: 3px;
  background: var(--accent-gold);
}

.admin-arena__section-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.admin-arena__form {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-arena__form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-arena__form-label {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.admin-arena__form-input {
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg-void);
  color: var(--text-primary);
  font-size: 14px;
  min-width: 120px;
}
.admin-arena__form-input:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(252, 179, 0, 0.18);
}
.admin-arena__form-hint {
  font-size: 11px;
  color: var(--text-muted);
}

.admin-arena__form--stretch {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}
.admin-arena__form--stretch .admin-arena__form-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}
.admin-arena__form--stretch .admin-arena__form-input {
  flex: 1;
  min-width: 0;
  width: 100%;
}
.admin-arena__form--stretch .admin-arena__btn {
  flex: 0 0 auto;
}

.admin-arena__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--accent-gold);
  color: #0c0c1a;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 120ms ease;
}
.admin-arena__btn:hover {
  opacity: 0.9;
}
.admin-arena__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.admin-arena__btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}

.admin-arena__status {
  font-size: 12px;
  color: var(--text-muted);
}
.admin-arena__status--ok {
  color: var(--accent-teal);
}
.admin-arena__status--err {
  color: #ef4444;
}

.admin-arena__section-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.admin-arena__section-actions-title {
  font-family: var(--font-display, "Orbitron", sans-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.admin-arena__section-actions-title::before {
  content: "";
  width: 6px;
  height: 20px;
  border-radius: 3px;
  background: var(--accent-gold);
}

.admin-arena__table-wrap {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
}
.admin-arena__table-head {
  padding: 12px 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.02);
}
.admin-arena__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.admin-arena__table thead tr {
  background: rgba(255, 255, 255, 0.03);
}
.admin-arena__table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft);
}
.admin-arena__table td {
  padding: 12px 16px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-soft);
}
.admin-arena__table tbody tr:last-child td {
  border-bottom: none;
}
.admin-arena__table tbody tr {
  transition: background 120ms ease;
}
.admin-arena__table tbody tr:hover {
  background: rgba(252, 179, 0, 0.04);
}
.admin-arena__table-empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.admin-arena__table-link {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--accent-gold);
  font-size: 13px;
  font-weight: 600;
  transition: opacity 120ms ease;
}
.admin-arena__table-link:hover {
  opacity: 0.8;
}

.admin-arena__grant-grid {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 12px;
  align-items: end;
}
@media (max-width: 768px) {
  .admin-arena__grant-grid {
    grid-template-columns: 1fr;
  }
}
.admin-arena__form-select {
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg-void);
  color: var(--text-primary);
  font-size: 14px;
  width: 100%;
}
.admin-arena__form-select:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(252, 179, 0, 0.18);
}
.admin-arena__section-description {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.admin-arena__subsection {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}
.admin-arena__subsection-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.admin-arena__modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.admin-arena__modal {
  width: 100%;
  max-width: 480px;
  margin: 0 16px;
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.admin-arena__modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.admin-arena__modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

/* === src/features/spaces/pages/apps/apps/analyzes/views/create === */
/* Analyze arena — CREATE wizard (Phase 2).
   Class names match `assets/design/analyze-create-arena.html` verbatim. */

.analyze-arena.analyze-arena--create {
  --bg-void: var(--dark, #06060e) var(--light, #f5f5fb);
  --bg-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.75));
  --bg-glass-hover: var(--dark, rgba(20, 20, 40, 0.80)) var(--light, rgba(255, 255, 255, 0.95));
  --border-subtle: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(10, 10, 30, 0.08));
  --border-strong: var(--dark, rgba(255, 255, 255, 0.12)) var(--light, rgba(10, 10, 30, 0.16));
  --text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --text-muted: var(--dark, #8888a8) var(--light, #5b5b75);
  --text-dim: var(--dark, #55556a) var(--light, #9898ad);
  --surface-soft: var(--dark, rgba(255, 255, 255, 0.02)) var(--light, rgba(10, 10, 30, 0.03));
  --surface-hover: var(--dark, rgba(255, 255, 255, 0.04)) var(--light, rgba(10, 10, 30, 0.05));
  --glow-aura-a: var(--dark, rgba(6, 182, 212, 0.05)) var(--light, rgba(6, 182, 212, 0.08));
  --glow-aura-b: var(--dark, rgba(252, 179, 0, 0.03)) var(--light, rgba(252, 179, 0, 0.06));
  --panel-bg: var(--dark, rgba(12, 12, 26, 1)) var(--light, rgba(255, 255, 255, 1));
  --input-bg: var(--dark, rgba(255, 255, 255, 0.02)) var(--light, rgba(10, 10, 30, 0.02));
  --input-border: var(--dark, rgba(255, 255, 255, 0.08)) var(--light, rgba(10, 10, 30, 0.10));

  --accent-gold: #fcb300;
  --accent-teal: #6eedd8;
  --accent-red: #ef4444;

  --analyze-color: #06b6d4;
  --analyze-bg: rgba(6, 182, 212, 0.10);
  --analyze-border: rgba(6, 182, 212, 0.24);
  --analyze-glow: rgba(6, 182, 212, 0.16);

  --poll-color: #06b6d4;
  --poll-bg: rgba(6, 182, 212, 0.10);
  --poll-border: rgba(6, 182, 212, 0.24);
  --quiz-color: #a855f7;
  --quiz-bg: rgba(168, 85, 247, 0.10);
  --quiz-border: rgba(168, 85, 247, 0.24);
  --discussion-color: #60a5fa;
  --discussion-bg: rgba(96, 165, 250, 0.10);
  --discussion-border: rgba(96, 165, 250, 0.24);
  --follow-color: #f97316;
  --follow-bg: rgba(249, 115, 22, 0.10);
  --follow-border: rgba(249, 115, 22, 0.24);

  --quiz-correct: #22c55e;
  --quiz-correct-soft: rgba(34, 197, 94, 0.12);

  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Outfit', sans-serif;

  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
  align-self: flex-start;
}

.analyze-arena.analyze-arena--create .arena {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 96px;
}
.analyze-arena.analyze-arena--create .arena::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, var(--glow-aura-a), transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 120%, var(--glow-aura-b), transparent 50%);
  z-index: 0;
  pointer-events: none;
}

.analyze-arena.analyze-arena--create .arena-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  gap: 16px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}
.analyze-arena.analyze-arena--create .arena-topbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.analyze-arena.analyze-arena--create .back-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}
.analyze-arena.analyze-arena--create .back-btn:hover {
  border-color: rgba(252, 179, 0, 0.3);
  color: var(--accent-gold);
}
.analyze-arena.analyze-arena--create .back-btn svg {
  width: 16px;
  height: 16px;
}
.analyze-arena.analyze-arena--create .arena-topbar__logo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid rgba(252, 179, 0, 0.15);
  flex-shrink: 0;
}
.analyze-arena.analyze-arena--create .breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.analyze-arena.analyze-arena--create .breadcrumb__item {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.analyze-arena.analyze-arena--create .breadcrumb__sep {
  color: var(--text-dim);
  font-size: 10px;
}
.analyze-arena.analyze-arena--create .breadcrumb__current {
  color: var(--text-primary);
  font-weight: 600;
}
.analyze-arena.analyze-arena--create .type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--analyze-bg);
  color: var(--analyze-color);
  border: 1px solid var(--analyze-border);
}
.analyze-arena.analyze-arena--create .type-badge svg {
  width: 13px;
  height: 13px;
}
.analyze-arena.analyze-arena--create .topbar-title {
  flex: 1;
  min-width: 180px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 760px) {
  .analyze-arena.analyze-arena--create .arena-topbar { padding: 12px 14px; gap: 10px; }
  .analyze-arena.analyze-arena--create .breadcrumb,
  .analyze-arena.analyze-arena--create .type-badge { display: none; }
  .analyze-arena.analyze-arena--create .topbar-title { min-width: 0; font-size: 13px; padding: 0; }
}

.analyze-arena.analyze-arena--create .split {
  position: relative;
  z-index: 10;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 24px 24px 80px;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}
.analyze-arena.analyze-arena--create .main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
@media (max-width: 760px) {
  .analyze-arena.analyze-arena--create .split { padding: 14px; gap: 14px; }
}

.analyze-arena.analyze-arena--create .analyze-builder {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.analyze-arena.analyze-arena--create .builder-create[data-state="create"] {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.analyze-arena.analyze-arena--create .builder-create[data-state="preview"] {
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 22px;
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.analyze-arena.analyze-arena--create .cross-filter {
  background: var(--bg-glass);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
@media (max-width: 600px) {
  .analyze-arena.analyze-arena--create .cross-filter { padding: 20px; gap: 16px; }
}

.analyze-arena.analyze-arena--create .cross-filter[data-sunji-open="true"] {
  padding: 14px 18px;
  gap: 0;
}
.analyze-arena.analyze-arena--create .cross-filter[data-sunji-open="true"] .cross-filter__head,
.analyze-arena.analyze-arena--create .cross-filter[data-sunji-open="true"] .cross-filter__row[data-when] {
  display: none !important;
}

.analyze-arena.analyze-arena--create .cross-filter__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.analyze-arena.analyze-arena--create .cross-filter__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
.analyze-arena.analyze-arena--create .cross-filter__title svg {
  width: 18px;
  height: 18px;
  color: var(--analyze-color);
}
.analyze-arena.analyze-arena--create .cross-filter__hint {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.analyze-arena.analyze-arena--create .cross-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 36px;
}
.analyze-arena.analyze-arena--create .cross-filter__chips-empty {
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
  padding: 8px 0;
}
.analyze-arena.analyze-arena--create .cross-filter__chips-all {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

.analyze-arena.analyze-arena--create .cross-filter__row[data-when] {
  display: none;
  flex-direction: column;
  gap: 12px;
}
.analyze-arena.analyze-arena--create .cross-filter[data-add-state="idle"] > .cross-filter__row[data-when="idle"],
.analyze-arena.analyze-arena--create .cross-filter[data-add-state="picking-action"] > .cross-filter__row[data-when="picking-action"],
.analyze-arena.analyze-arena--create .cross-filter[data-add-state="picking-item"] > .cross-filter__row[data-when="picking-item"] {
  display: flex;
}

.analyze-arena.analyze-arena--create .cross-filter__add-btn {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  border-radius: 14px;
  background: var(--surface-soft);
  border: 2px dashed var(--analyze-border);
  color: var(--analyze-color);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.analyze-arena.analyze-arena--create .cross-filter__add-btn:hover {
  background: var(--analyze-bg);
  border-color: var(--analyze-color);
  transform: translateY(-1px);
}
.analyze-arena.analyze-arena--create .cross-filter__add-btn svg {
  width: 16px;
  height: 16px;
}

.analyze-arena.analyze-arena--create .cross-filter__pick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.analyze-arena.analyze-arena--create .cross-filter__pick-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.analyze-arena.analyze-arena--create .cross-filter__pick-cancel {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: all 0.15s;
}
.analyze-arena.analyze-arena--create .cross-filter__pick-cancel:hover {
  color: var(--text-primary);
  background: var(--surface-soft);
}
.analyze-arena.analyze-arena--create .cross-filter__pick-foot {
  display: flex;
  justify-content: flex-end;
}

.analyze-arena.analyze-arena--create .cross-filter[data-add-state="picking-action"] .cross-filter__chips,
.analyze-arena.analyze-arena--create .cross-filter[data-add-state="picking-item"] .cross-filter__chips {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  min-height: 0;
}
.analyze-arena.analyze-arena--create .cross-filter[data-add-state="picking-action"] .filter-chip,
.analyze-arena.analyze-arena--create .cross-filter[data-add-state="picking-item"] .filter-chip {
  font-size: 11px;
}

.analyze-arena.analyze-arena--create .cf-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.analyze-arena.analyze-arena--create .cf-action-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 16px;
  border-radius: 14px;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.analyze-arena.analyze-arena--create .cf-action-tile:hover {
  transform: translateY(-2px);
  border-color: var(--analyze-border);
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.12);
}
.analyze-arena.analyze-arena--create .cf-action-tile__icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.analyze-arena.analyze-arena--create .cf-action-tile__icon svg {
  width: 18px;
  height: 18px;
}
.analyze-arena.analyze-arena--create .cf-action-tile[data-action-type="poll"] .cf-action-tile__icon {
  background: var(--poll-bg);
  color: var(--poll-color);
  border: 1px solid var(--poll-border);
}
.analyze-arena.analyze-arena--create .cf-action-tile[data-action-type="quiz"] .cf-action-tile__icon {
  background: var(--quiz-bg);
  color: var(--quiz-color);
  border: 1px solid var(--quiz-border);
}
.analyze-arena.analyze-arena--create .cf-action-tile[data-action-type="discussion"] .cf-action-tile__icon {
  background: var(--discussion-bg);
  color: var(--discussion-color);
  border: 1px solid var(--discussion-border);
}
.analyze-arena.analyze-arena--create .cf-action-tile[data-action-type="follow"] .cf-action-tile__icon {
  background: var(--follow-bg);
  color: var(--follow-color);
  border: 1px solid var(--follow-border);
}
.analyze-arena.analyze-arena--create .cf-action-tile__label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}
.analyze-arena.analyze-arena--create .cf-action-tile__count {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.analyze-arena.analyze-arena--create .cf-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px;
}
.analyze-arena.analyze-arena--create .cf-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.15s;
}
.analyze-arena.analyze-arena--create .cf-option:hover {
  border-color: var(--analyze-border);
}
.analyze-arena.analyze-arena--create .cf-option input[type="checkbox"],
.analyze-arena.analyze-arena--create .cf-option input[type="radio"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--analyze-color);
  cursor: pointer;
}
.analyze-arena.analyze-arena--create .cf-option__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.analyze-arena.analyze-arena--create .cf-option__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
}
.analyze-arena.analyze-arena--create .cf-option__meta {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.analyze-arena.analyze-arena--create .cf-option__correct {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--quiz-correct);
  background: var(--quiz-correct-soft);
  border: 1px solid rgba(34, 197, 94, 0.32);
}

.analyze-arena.analyze-arena--create .cf-sunji {
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 22px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  backdrop-filter: blur(18px);
}
.analyze-arena.analyze-arena--create .cf-sunji[hidden] {
  display: none;
}
.analyze-arena.analyze-arena--create .cf-sunji__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.analyze-arena.analyze-arena--create .cf-sunji__type-chip {
  padding: 4px 10px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.analyze-arena.analyze-arena--create .cf-sunji__type-chip[data-source="poll"] {
  background: var(--poll-bg);
  color: var(--poll-color);
  border: 1px solid var(--poll-border);
}
.analyze-arena.analyze-arena--create .cf-sunji__type-chip[data-source="quiz"] {
  background: var(--quiz-bg);
  color: var(--quiz-color);
  border: 1px solid var(--quiz-border);
}
.analyze-arena.analyze-arena--create .cf-sunji__type-chip[data-source="discussion"] {
  background: var(--discussion-bg);
  color: var(--discussion-color);
  border: 1px solid var(--discussion-border);
}
.analyze-arena.analyze-arena--create .cf-sunji__type-chip[data-source="follow"] {
  background: var(--follow-bg);
  color: var(--follow-color);
  border: 1px solid var(--follow-border);
}
.analyze-arena.analyze-arena--create .cf-sunji__title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.analyze-arena.analyze-arena--create .cf-sunji__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 2px;
}
.analyze-arena.analyze-arena--create .cf-sunji__foot {
  display: flex;
  justify-content: flex-end;
}
.analyze-arena.analyze-arena--create .cf-question {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
}
.analyze-arena.analyze-arena--create .cf-question__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border-subtle);
}
.analyze-arena.analyze-arena--create .cf-question__options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.analyze-arena.analyze-arena--create .cf-option--inline {
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 8px;
  border-radius: 8px;
}
.analyze-arena.analyze-arena--create .cf-option--inline:hover {
  background: var(--surface-hover);
  border-color: var(--border-subtle);
}

.analyze-arena.analyze-arena--create .cf-keyword-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.analyze-arena.analyze-arena--create .cf-keyword-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  transition: border-color 0.15s, background 0.15s;
}
.analyze-arena.analyze-arena--create .cf-keyword-input::placeholder {
  color: var(--text-dim);
}
.analyze-arena.analyze-arena--create .cf-keyword-input:focus {
  outline: none;
  border-color: var(--discussion-color);
  background: var(--surface-hover);
}
.analyze-arena.analyze-arena--create .cf-keyword-hint {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.analyze-arena.analyze-arena--create .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
.analyze-arena.analyze-arena--create .filter-chip__source {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 100px;
}
.analyze-arena.analyze-arena--create .filter-chip[data-source="poll"] .filter-chip__source {
  background: var(--poll-bg);
  color: var(--poll-color);
}
.analyze-arena.analyze-arena--create .filter-chip[data-source="quiz"] .filter-chip__source {
  background: var(--quiz-bg);
  color: var(--quiz-color);
}
.analyze-arena.analyze-arena--create .filter-chip[data-source="discussion"] .filter-chip__source {
  background: var(--discussion-bg);
  color: var(--discussion-color);
}
.analyze-arena.analyze-arena--create .filter-chip[data-source="follow"] .filter-chip__source {
  background: var(--follow-bg);
  color: var(--follow-color);
}
.analyze-arena.analyze-arena--create .filter-chip__label {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.analyze-arena.analyze-arena--create .filter-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 100px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.analyze-arena.analyze-arena--create .filter-chip__remove:hover {
  background: rgba(239, 68, 68, 0.16);
  color: var(--accent-red);
}
.analyze-arena.analyze-arena--create .filter-chip__remove svg {
  width: 12px;
  height: 12px;
}

.analyze-arena.analyze-arena--create .btn {
  padding: 8px 14px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.analyze-arena.analyze-arena--create .btn--ghost {
  background: var(--surface-soft);
  color: var(--text-muted);
}
.analyze-arena.analyze-arena--create .btn--ghost:hover {
  border-color: var(--analyze-border);
  color: var(--text-primary);
}
.analyze-arena.analyze-arena--create .btn--primary {
  background: linear-gradient(135deg, var(--accent-gold), #e5a200);
  border: none;
  color: #0a0a0a;
  box-shadow: 0 2px 12px rgba(252, 179, 0, 0.25);
}
.analyze-arena.analyze-arena--create .btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(252, 179, 0, 0.4);
}
.analyze-arena.analyze-arena--create .btn--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.analyze-arena.analyze-arena--create .builder-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--analyze-color);
}
.analyze-arena.analyze-arena--create .builder-name-input {
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  outline: none;
  transition: all 0.15s;
}
.analyze-arena.analyze-arena--create .builder-name-input:focus {
  border-color: var(--analyze-border);
  box-shadow: 0 0 0 3px var(--analyze-glow);
}
.analyze-arena.analyze-arena--create .builder-hint {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
}

.analyze-arena.analyze-arena--create .preview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  min-height: 56px;
  align-items: center;
}
.analyze-arena.analyze-arena--create .preview-chips__empty {
  font-size: 12px;
  font-style: italic;
  color: var(--text-dim);
}
.analyze-arena.analyze-arena--create .preview-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 5px;
  border-radius: 100px;
  font-size: 12px;
  background: var(--surface-hover);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
.analyze-arena.analyze-arena--create .preview-chip__source {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 100px;
  min-width: 72px;
  text-align: center;
  display: inline-block;
}
.analyze-arena.analyze-arena--create .preview-chip[data-source="poll"] .preview-chip__source {
  background: var(--poll-bg);
  color: var(--poll-color);
}
.analyze-arena.analyze-arena--create .preview-chip[data-source="quiz"] .preview-chip__source {
  background: var(--quiz-bg);
  color: var(--quiz-color);
}
.analyze-arena.analyze-arena--create .preview-chip[data-source="discussion"] .preview-chip__source {
  background: var(--discussion-bg);
  color: var(--discussion-color);
}
.analyze-arena.analyze-arena--create .preview-chip[data-source="follow"] .preview-chip__source {
  background: var(--follow-bg);
  color: var(--follow-color);
}

.analyze-arena.analyze-arena--create .preview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.analyze-arena.analyze-arena--create .preview-stats--solo {
  grid-template-columns: 1fr;
}
.analyze-arena.analyze-arena--create .preview-stat {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.analyze-arena.analyze-arena--create .preview-stat__value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--analyze-color);
  line-height: 1.1;
}
.analyze-arena.analyze-arena--create .preview-stat__label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.analyze-arena.analyze-arena--create .preview-records-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}
.analyze-arena.analyze-arena--create .preview-records-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.analyze-arena.analyze-arena--create .preview-records-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.analyze-arena.analyze-arena--create .preview-records-group__count {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.analyze-arena.analyze-arena--create .preview-records-group__empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 12px 14px;
  border: 1px dashed var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-soft);
}

.analyze-arena.analyze-arena--create .preview-records {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}
.analyze-arena.analyze-arena--create .prv-table {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.analyze-arena.analyze-arena--create .prv-table__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--surface-hover);
  border-bottom: 1px solid var(--border-subtle);
}
.analyze-arena.analyze-arena--create .prv-table__chip {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.analyze-arena.analyze-arena--create .prv-table__chip[data-source="poll"] {
  background: var(--poll-bg);
  color: var(--poll-color);
  border: 1px solid var(--poll-border);
}
.analyze-arena.analyze-arena--create .prv-table__chip[data-source="quiz"] {
  background: var(--quiz-bg);
  color: var(--quiz-color);
  border: 1px solid var(--quiz-border);
}
.analyze-arena.analyze-arena--create .prv-table__chip[data-source="discussion"] {
  background: var(--discussion-bg);
  color: var(--discussion-color);
  border: 1px solid var(--discussion-border);
}
.analyze-arena.analyze-arena--create .prv-table__chip[data-source="follow"] {
  background: var(--follow-bg);
  color: var(--follow-color);
  border: 1px solid var(--follow-border);
}
.analyze-arena.analyze-arena--create .prv-table__title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.analyze-arena.analyze-arena--create .prv-table__count {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.analyze-arena.analyze-arena--create .prv-table__scroll {
  width: 100%;
  overflow-x: auto;
}
.analyze-arena.analyze-arena--create .prv-table__grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.analyze-arena.analyze-arena--create .prv-table__grid th,
.analyze-arena.analyze-arena--create .prv-table__grid td {
  text-align: left;
  padding: 10px 14px;
  font-size: 12px;
  vertical-align: top;
  border-bottom: 1px solid var(--border-subtle);
  word-break: break-word;
}
.analyze-arena.analyze-arena--create .prv-table__grid th {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-soft);
}
.analyze-arena.analyze-arena--create .prv-table__grid tbody tr:last-child td {
  border-bottom: none;
}
.analyze-arena.analyze-arena--create .prv-cell--type {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.analyze-arena.analyze-arena--create .prv-cell--id {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.analyze-arena.analyze-arena--create .prv-cell--answer {
  color: var(--text-primary);
}
.analyze-arena.analyze-arena--create .prv-tag-correct {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--quiz-correct);
  background: var(--quiz-correct-soft);
  border: 1px solid rgba(34, 197, 94, 0.32);
}
.analyze-arena.analyze-arena--create .prv-table__pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-soft);
}
.analyze-arena.analyze-arena--create .prv-pager-btn {
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, opacity 0.15s;
}
.analyze-arena.analyze-arena--create .prv-pager-btn:hover:not(:disabled) {
  border-color: var(--analyze-border);
  color: var(--analyze-color);
}
.analyze-arena.analyze-arena--create .prv-pager-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.analyze-arena.analyze-arena--create .prv-pager-info {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0 6px;
}

.analyze-arena.analyze-arena--create .builder-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 28px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-subtle);
}
.analyze-arena.analyze-arena--create .builder-actions[hidden] {
  display: none;
}
.analyze-arena.analyze-arena--create .builder-actions__step {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.analyze-arena.analyze-arena--create .builder-actions__group {
  display: flex;
  gap: 8px;
  align-items: center;
}
@media (max-width: 600px) {
  .analyze-arena.analyze-arena--create .builder-actions {
    padding: 12px 14px;
  }
}

/* === src/features/spaces/pages/apps/apps/analyzes/views/records (style.css) === */
/* Records page — minimal arena chrome reused from the DETAIL view
   (.analyze-arena.analyze-arena--detail) plus a per-source table. */

.analyze-arena.analyze-arena--records {
  --bg-void: var(--dark, #06060e) var(--light, #f5f5fb);
  --bg-glass: var(--dark, rgba(12, 12, 26, 0.65))
    var(--light, rgba(255, 255, 255, 0.75));
  --border-subtle: var(--dark, rgba(255, 255, 255, 0.06))
    var(--light, rgba(10, 10, 30, 0.08));
  --border-strong: var(--dark, rgba(255, 255, 255, 0.12))
    var(--light, rgba(10, 10, 30, 0.16));
  --text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --text-muted: var(--dark, #8888a8) var(--light, #5b5b75);
  --surface-soft: var(--dark, rgba(255, 255, 255, 0.02))
    var(--light, rgba(10, 10, 30, 0.03));
  --surface-hover: var(--dark, rgba(255, 255, 255, 0.04))
    var(--light, rgba(10, 10, 30, 0.05));
  --panel-bg: var(--dark, #0c0c1a) var(--light, #ffffff);
  --text-dim: var(--dark, #55556a) var(--light, #9898ad);
  --accent-gold: #fcb300;

  --poll-color: #06b6d4;
  --poll-bg: rgba(6, 182, 212, 0.10);
  --poll-border: rgba(6, 182, 212, 0.24);
  --quiz-color: #a855f7;
  --quiz-bg: rgba(168, 85, 247, 0.10);
  --quiz-border: rgba(168, 85, 247, 0.24);
  --discussion-color: #60a5fa;
  --discussion-bg: rgba(96, 165, 250, 0.10);
  --discussion-border: rgba(96, 165, 250, 0.24);
  --follow-color: #f97316;
  --follow-bg: rgba(249, 115, 22, 0.10);
  --follow-border: rgba(249, 115, 22, 0.24);

  --font-display: "Orbitron", sans-serif;
  --font-body: "Outfit", sans-serif;

  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  align-self: flex-start;
}

.analyze-arena.analyze-arena--records::before {
  content: "";
  position: fixed;
  inset: -10%;
  background:
    radial-gradient(circle at 20% 18%, rgba(252, 179, 0, 0.06), transparent 45%),
    radial-gradient(circle at 80% 22%, rgba(110, 237, 216, 0.05), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(96, 165, 250, 0.06), transparent 50%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

.analyze-arena--records .arena {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.analyze-arena--records .arena-topbar {
  flex: 0 0 auto;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}
.analyze-arena--records .back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  /* Fixed-size flex child: without this the default `flex-shrink: 1` lets a
     long sibling title squash the square button into an oval. */
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.analyze-arena--records .back-btn:hover {
  background: var(--surface-hover);
  border-color: var(--accent-gold);
}
.analyze-arena--records .back-btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}
.analyze-arena--records .arena-topbar__logo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid rgba(252, 179, 0, 0.15);
  flex-shrink: 0;
}
.analyze-arena--records .breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.analyze-arena--records .breadcrumb__item {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.analyze-arena--records .breadcrumb__sep {
  color: var(--text-dim);
  font-size: 10px;
}
.analyze-arena--records .breadcrumb__current {
  color: var(--text-primary);
  font-weight: 600;
}
.analyze-arena--records .topbar-title {
  flex: 1;
  min-width: 180px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 760px) {
  .analyze-arena--records .arena-topbar {
    padding: 12px 14px;
    gap: 10px;
  }
  .analyze-arena--records .breadcrumb {
    display: none;
  }
  .analyze-arena--records .topbar-title {
    min-width: 0;
    font-size: 13px;
    padding: 0;
  }
}

.analyze-arena--records .records-body {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
.analyze-arena--records .records-head,
.analyze-arena--records .records-chips,
.analyze-arena--records .records-loadmore {
  flex: 0 0 auto;
}

.analyze-arena--records .records-head h1 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 6px;
  color: var(--text-primary);
}
.analyze-arena--records .records-head p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.analyze-arena--records .records-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--surface-soft);
}
.analyze-arena--records .records-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.analyze-arena--records .records-chip:hover {
  background: var(--surface-hover);
}
.analyze-arena--records .records-chip[aria-pressed="true"] {
  border-color: var(--accent-gold);
  background: rgba(252, 179, 0, 0.08);
}
.analyze-arena--records .records-chip__source {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 80px;
  text-align: center;
  display: inline-block;
}
.analyze-arena--records .records-chip[data-source="poll"] .records-chip__source {
  color: var(--poll-color);
  background: var(--poll-bg);
  border: 1px solid var(--poll-border);
}
.analyze-arena--records .records-chip[data-source="quiz"] .records-chip__source {
  color: var(--quiz-color);
  background: var(--quiz-bg);
  border: 1px solid var(--quiz-border);
}
.analyze-arena--records .records-chip[data-source="discussion"] .records-chip__source {
  color: var(--discussion-color);
  background: var(--discussion-bg);
  border: 1px solid var(--discussion-border);
}
.analyze-arena--records .records-chip[data-source="follow"] .records-chip__source {
  color: var(--follow-color);
  background: var(--follow-bg);
  border: 1px solid var(--follow-border);
}

.analyze-arena--records .records-table-wrap {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel-bg);
}

.analyze-arena--records .records-table-header {
  flex: 0 0 auto;
  padding-right: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.analyze-arena--records .records-table-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) var(--panel-bg);
}
.analyze-arena--records .records-table-body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.analyze-arena--records .records-table-body::-webkit-scrollbar-track {
  background: var(--panel-bg);
}
.analyze-arena--records .records-table-body::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 2px solid var(--panel-bg);
  background-clip: padding-box;
}
.analyze-arena--records .records-table-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-dim);
  background-clip: padding-box;
}

.analyze-arena--records .records-table {
  width: 100%;
  table-layout: fixed;
  min-width: 0;
}

.analyze-arena--records .records-empty {
  padding: 48px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.analyze-arena--records .records-loadmore {
  display: flex;
  justify-content: center;
  padding: 4px;
}
.analyze-arena--records .records-loadmore-btn {
  padding: 8px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.analyze-arena--records .records-loadmore-btn:hover {
  background: var(--surface-hover);
  border-color: var(--accent-gold);
}
.analyze-arena--records .records-loadmore-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === src/features/spaces/pages/apps/apps/analyzes/views/records (table.css) === */
/* Shared records-table styles. Used by `RecordsTable` directly so the
   same component works inside both the dedicated records page
   (.analyze-arena--records) and the CREATE wizard's preview card
   (.analyze-arena--create) without per-host duplication. */

.records-table-wrap {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: rgba(255, 255, 255, 0.02);
}
[data-theme="light"] .records-table-wrap {
  border-color: rgba(10, 10, 30, 0.08);
  background: rgba(10, 10, 30, 0.03);
}

.records-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.records-table thead tr {
  background: transparent;
}
[data-theme="light"] .records-table thead tr {
  background: transparent;
}
.records-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dark, #8888a8) var(--light, #5b5b75);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .records-table th {
  border-bottom-color: rgba(10, 10, 30, 0.08);
}
.records-table td {
  padding: 12px 16px;
  color: var(--dark, #f0f0f5) var(--light, #12121a);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
[data-theme="light"] .records-table td {
  border-bottom-color: rgba(10, 10, 30, 0.08);
}
.records-table tbody tr:last-child td {
  border-bottom: none;
}
.records-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="light"] .records-table tbody tr:hover {
  background: rgba(10, 10, 30, 0.04);
}

.records-cell-user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 160px;
  white-space: nowrap;
}

.records-table-wrap[data-source="poll"] .records-table th:nth-child(1),
.records-table-wrap[data-source="poll"] .records-table td:nth-child(1),
.records-table-wrap[data-source="quiz"] .records-table th:nth-child(1),
.records-table-wrap[data-source="quiz"] .records-table td:nth-child(1) {
  width: 200px;
}
.records-table-wrap[data-source="poll"] .records-table th:nth-child(2),
.records-table-wrap[data-source="poll"] .records-table td:nth-child(2),
.records-table-wrap[data-source="quiz"] .records-table th:nth-child(2),
.records-table-wrap[data-source="quiz"] .records-table td:nth-child(2) {
  width: calc((100% - 200px) * 0.5);
}
.records-table-wrap[data-source="poll"] .records-table th:nth-child(3),
.records-table-wrap[data-source="poll"] .records-table td:nth-child(3),
.records-table-wrap[data-source="quiz"] .records-table th:nth-child(3),
.records-table-wrap[data-source="quiz"] .records-table td:nth-child(3) {
  width: calc((100% - 200px) * 0.5);
}

.records-table-wrap[data-source="discussion"] .records-table th:nth-child(1),
.records-table-wrap[data-source="discussion"] .records-table td:nth-child(1) {
  width: 200px;
}
.records-table-wrap[data-source="discussion"] .records-table th:nth-child(2),
.records-table-wrap[data-source="discussion"] .records-table td:nth-child(2) {
  width: 240px;
}
.records-table-wrap[data-source="discussion"] .records-table th:nth-child(3),
.records-table-wrap[data-source="discussion"] .records-table td:nth-child(3) {
  width: calc(100% - 200px - 240px);
}

.records-table-wrap[data-source="follow"] .records-table th:nth-child(1),
.records-table-wrap[data-source="follow"] .records-table td:nth-child(1) {
  width: 200px;
}
.records-table-wrap[data-source="follow"] .records-table th:nth-child(2),
.records-table-wrap[data-source="follow"] .records-table td:nth-child(2) {
  width: calc(100% - 200px);
}

.records-table-wrap[data-source="participants"] .records-table th:nth-child(1),
.records-table-wrap[data-source="participants"] .records-table td:nth-child(1) {
  width: 100%;
}
.records-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04);
}
.records-avatar-fallback {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--dark, #8888a8) var(--light, #5b5b75);
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}
[data-theme="light"] .records-avatar,
[data-theme="light"] .records-avatar-fallback {
  background: rgba(10, 10, 30, 0.04);
}
.records-user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.records-user-name {
  font-size: 13px;
  color: var(--dark, #f0f0f5) var(--light, #12121a);
}
.records-user-handle {
  font-size: 11px;
  color: var(--dark, #8888a8) var(--light, #5b5b75);
}

/* === src/features/spaces/pages/apps/apps/analyzes/views/report === */
/* Analyze arena — DETAIL view (Phase 3).
   Class names match `assets/design/analyze-detail-arena.html` verbatim. */

.analyze-arena.analyze-arena--detail {
  --bg-void: var(--dark, #06060e) var(--light, #f5f5fb);
  --bg-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.75));
  --bg-glass-hover: var(--dark, rgba(20, 20, 40, 0.80)) var(--light, rgba(255, 255, 255, 0.95));
  --border-subtle: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(10, 10, 30, 0.08));
  --border-strong: var(--dark, rgba(255, 255, 255, 0.12)) var(--light, rgba(10, 10, 30, 0.16));
  --text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --text-muted: var(--dark, #8888a8) var(--light, #5b5b75);
  --text-dim: var(--dark, #55556a) var(--light, #9898ad);
  --surface-soft: var(--dark, rgba(255, 255, 255, 0.02)) var(--light, rgba(10, 10, 30, 0.03));
  --surface-hover: var(--dark, rgba(255, 255, 255, 0.04)) var(--light, rgba(10, 10, 30, 0.05));
  --glow-aura-a: var(--dark, rgba(6, 182, 212, 0.05)) var(--light, rgba(6, 182, 212, 0.08));
  --glow-aura-b: var(--dark, rgba(252, 179, 0, 0.03)) var(--light, rgba(252, 179, 0, 0.06));
  --panel-bg: var(--dark, rgba(12, 12, 26, 1)) var(--light, rgba(255, 255, 255, 1));
  --input-bg: var(--dark, rgba(255, 255, 255, 0.02)) var(--light, rgba(10, 10, 30, 0.02));
  --input-border: var(--dark, rgba(255, 255, 255, 0.08)) var(--light, rgba(10, 10, 30, 0.10));
  --bar-track: var(--dark, rgba(255, 255, 255, 0.04)) var(--light, rgba(10, 10, 30, 0.06));
  --bubble-fill: var(--dark, rgba(173, 197, 220, 0.85)) var(--light, rgba(96, 142, 188, 0.85));
  --bubble-stroke: var(--dark, rgba(255, 255, 255, 0.10)) var(--light, rgba(10, 10, 30, 0.12));
  --bubble-text: var(--dark, #0c0c1a) var(--light, #ffffff);
  --network-link: var(--dark, rgba(255, 255, 255, 0.10)) var(--light, rgba(10, 10, 30, 0.16));

  --accent-gold: #fcb300;
  --accent-teal: #6eedd8;
  --accent-red: #ef4444;

  --analyze-color: #06b6d4;
  --analyze-bg: rgba(6, 182, 212, 0.10);
  --analyze-border: rgba(6, 182, 212, 0.24);
  --analyze-glow: rgba(6, 182, 212, 0.16);

  --poll-color: #06b6d4;
  --poll-bg: rgba(6, 182, 212, 0.10);
  --poll-border: rgba(6, 182, 212, 0.24);
  --quiz-color: #a855f7;
  --quiz-bg: rgba(168, 85, 247, 0.10);
  --quiz-border: rgba(168, 85, 247, 0.24);
  --discussion-color: #60a5fa;
  --discussion-bg: rgba(96, 165, 250, 0.10);
  --discussion-border: rgba(96, 165, 250, 0.24);
  --follow-color: #f97316;
  --follow-bg: rgba(249, 115, 22, 0.10);
  --follow-border: rgba(249, 115, 22, 0.24);

  --c1: #f97316;
  --c2: #6366f1;
  --c3: #22c55e;
  --c4: #3b82f6;
  --c5: #8b5cf6;
  --c6: #eab308;

  --bar-fill: #4f7aa3;
  --bar-fill-strong: #5d8cba;

  --quiz-correct: #22c55e;
  --quiz-correct-soft: rgba(34, 197, 94, 0.12);

  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Outfit', sans-serif;

  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
}

.analyze-arena.analyze-arena--detail .arena {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.analyze-arena.analyze-arena--detail .arena::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, var(--glow-aura-a), transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 120%, var(--glow-aura-b), transparent 50%);
  z-index: 0;
  pointer-events: none;
}

.analyze-arena.analyze-arena--detail .arena-topbar {
  position: relative;
  z-index: 30;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  gap: 16px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}
.analyze-arena.analyze-arena--detail .arena-topbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.analyze-arena.analyze-arena--detail .back-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}
.analyze-arena.analyze-arena--detail .back-btn:hover {
  border-color: rgba(252, 179, 0, 0.3);
  color: var(--accent-gold);
}
.analyze-arena.analyze-arena--detail .back-btn svg {
  width: 16px;
  height: 16px;
}
.analyze-arena.analyze-arena--detail .arena-topbar__logo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid rgba(252, 179, 0, 0.15);
  flex-shrink: 0;
}
.analyze-arena.analyze-arena--detail .breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.analyze-arena.analyze-arena--detail .breadcrumb__item {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.analyze-arena.analyze-arena--detail .breadcrumb__sep {
  color: var(--text-dim);
  font-size: 10px;
}
.analyze-arena.analyze-arena--detail .breadcrumb__current {
  color: var(--text-primary);
  font-weight: 600;
}
.analyze-arena.analyze-arena--detail .type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--analyze-bg);
  color: var(--analyze-color);
  border: 1px solid var(--analyze-border);
}
.analyze-arena.analyze-arena--detail .type-badge svg {
  width: 13px;
  height: 13px;
}
.analyze-arena.analyze-arena--detail .topbar-title {
  flex: 1;
  min-width: 180px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 760px) {
  .analyze-arena.analyze-arena--detail .arena-topbar { padding: 12px 14px; gap: 10px; }
  .analyze-arena.analyze-arena--detail .breadcrumb,
  .analyze-arena.analyze-arena--detail .type-badge { display: none; }
  .analyze-arena.analyze-arena--detail .topbar-title { min-width: 0; font-size: 13px; padding: 0; }
}

.analyze-arena.analyze-arena--detail .split {
  position: relative;
  z-index: 10;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "banner  banner"
    "sidebar main";
  gap: 18px;
  padding: 24px;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}
.analyze-arena.analyze-arena--detail .split > .builder-result { grid-area: banner; }
.analyze-arena.analyze-arena--detail .split > .sidebar {
  grid-area: sidebar;
  min-height: 0;
}
.analyze-arena.analyze-arena--detail .split > .main {
  grid-area: main;
  min-height: 0;
  min-width: 0;
}
@media (max-width: 1100px) {
  .analyze-arena.analyze-arena--detail {
    height: auto;
    overflow-y: auto;
  }
  .analyze-arena.analyze-arena--detail .arena { flex: none; min-height: 0; }
  .analyze-arena.analyze-arena--detail .split {
    flex: none;
    min-height: 0;
    overflow: visible;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "banner"
      "sidebar"
      "main";
  }
  .analyze-arena.analyze-arena--detail .split > .sidebar,
  .analyze-arena.analyze-arena--detail .split > .main {
    overflow: visible;
    height: auto;
    max-height: none;
  }
}
@media (max-width: 760px) {
  .analyze-arena.analyze-arena--detail .split { padding: 14px; gap: 14px; }
}

.analyze-arena.analyze-arena--detail .builder-result {
  position: relative;
  z-index: 20;
  background:
    linear-gradient(180deg, rgba(252, 179, 0, 0.06), transparent 70%),
    var(--bg-glass);
  border: 1px solid var(--analyze-border);
  border-radius: 18px;
  padding: 16px 20px;
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.analyze-arena.analyze-arena--detail .builder-result__chips-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.analyze-arena.analyze-arena--detail .builder-result__topline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.analyze-arena.analyze-arena--detail .builder-result__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.analyze-arena.analyze-arena--detail .builder-result__meta {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.analyze-arena.analyze-arena--detail .builder-result__topline-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.analyze-arena.analyze-arena--detail .builder-result__records-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.analyze-arena.analyze-arena--detail .builder-result__records-btn:hover {
  background: rgba(252, 179, 0, 0.08);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}
.analyze-arena.analyze-arena--detail .builder-result__records-btn svg {
  width: 14px;
  height: 14px;
}

.analyze-arena.analyze-arena--detail .preview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  min-height: 56px;
  align-items: center;
}
.analyze-arena.analyze-arena--detail .preview-chips__empty {
  font-size: 12px;
  font-style: italic;
  color: var(--text-dim);
}
.analyze-arena.analyze-arena--detail .preview-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 5px;
  border-radius: 100px;
  font-size: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
.analyze-arena.analyze-arena--detail .preview-chip__source {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 100px;
  min-width: 72px;
  text-align: center;
  display: inline-block;
}
.analyze-arena.analyze-arena--detail .preview-chip[data-source="poll"] .preview-chip__source {
  background: var(--poll-bg);
  color: var(--poll-color);
}
.analyze-arena.analyze-arena--detail .preview-chip[data-source="quiz"] .preview-chip__source {
  background: var(--quiz-bg);
  color: var(--quiz-color);
}
.analyze-arena.analyze-arena--detail .preview-chip[data-source="discussion"] .preview-chip__source {
  background: var(--discussion-bg);
  color: var(--discussion-color);
}
.analyze-arena.analyze-arena--detail .preview-chip[data-source="follow"] .preview-chip__source {
  background: var(--follow-bg);
  color: var(--follow-color);
}

.analyze-arena.analyze-arena--detail button.bar-row[data-filter-source],
.analyze-arena.analyze-arena--detail button.tfidf-row[data-filter-source],
.analyze-arena.analyze-arena--detail .topic-table__filter[data-filter-source] {
  cursor: default !important;
  pointer-events: none;
}
.analyze-arena.analyze-arena--detail .preview-chip__group {
  font-size: 10px;
  color: var(--text-muted);
}

.analyze-arena.analyze-arena--detail .main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
}

.analyze-arena.analyze-arena--detail .main-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.analyze-arena.analyze-arena--detail .main-title__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.analyze-arena.analyze-arena--detail .main-title__chip--poll {
  background: var(--poll-bg);
  color: var(--poll-color);
  border: 1px solid var(--poll-border);
}
.analyze-arena.analyze-arena--detail .main-title__chip--quiz {
  background: var(--quiz-bg);
  color: var(--quiz-color);
  border: 1px solid var(--quiz-border);
}
.analyze-arena.analyze-arena--detail .main-title__chip--discussion {
  background: var(--discussion-bg);
  color: var(--discussion-color);
  border: 1px solid var(--discussion-border);
}
.analyze-arena.analyze-arena--detail .main-title__chip--follow {
  background: var(--follow-bg);
  color: var(--follow-color);
  border: 1px solid var(--follow-border);
}
.analyze-arena.analyze-arena--detail .main-title__chip svg { width: 12px; height: 12px; }

.analyze-arena.analyze-arena--detail .panel {
  display: none;
  flex-direction: column;
  gap: 18px;
}
.analyze-arena.analyze-arena--detail .panel[data-active="true"] { display: flex; }

.analyze-arena.analyze-arena--detail .card {
  background: var(--bg-glass);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 760px) {
  .analyze-arena.analyze-arena--detail .card { padding: 16px; gap: 12px; }
}
.analyze-arena.analyze-arena--detail .card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.analyze-arena.analyze-arena--detail .card__title {
  min-width: 0;
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.analyze-arena.analyze-arena--detail .card__count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--analyze-bg);
  border: 1px solid var(--analyze-border);
  color: var(--analyze-color);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.analyze-arena.analyze-arena--detail .card__action {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
.analyze-arena.analyze-arena--detail .card__action:hover {
  border-color: var(--analyze-border);
  color: var(--analyze-color);
}
.analyze-arena.analyze-arena--detail .card__action svg { width: 14px; height: 14px; }
.analyze-arena.analyze-arena--detail .card__hint {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--surface-soft);
  border: 1px dashed var(--border-subtle);
  align-self: flex-start;
}
.analyze-arena.analyze-arena--detail .card__hint svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--analyze-color);
}

.analyze-arena.analyze-arena--detail .panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.analyze-arena.analyze-arena--detail .panel-toolbar > .filter-select-wrap { flex-shrink: 0; }
.analyze-arena.analyze-arena--detail .panel-toolbar .btn { flex-shrink: 0; }
.analyze-arena.analyze-arena--detail .panel-toolbar__action {
  margin-left: auto;
}

.analyze-arena.analyze-arena--detail .filter-select-wrap {
  position: relative;
  display: inline-flex;
}
.analyze-arena.analyze-arena--detail .filter-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 160px;
  padding: 9px 32px 9px 12px;
  border-radius: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: all 0.15s;
}
.analyze-arena.analyze-arena--detail .filter-select:hover { border-color: var(--analyze-border); }
.analyze-arena.analyze-arena--detail .filter-select:focus {
  border-color: var(--analyze-border);
  box-shadow: 0 0 0 3px var(--analyze-glow);
}
.analyze-arena.analyze-arena--detail .filter-select-wrap::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}

.analyze-arena.analyze-arena--detail .btn {
  padding: 8px 14px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.analyze-arena.analyze-arena--detail .btn svg { width: 14px; height: 14px; }
.analyze-arena.analyze-arena--detail .btn--ghost {
  background: var(--surface-soft);
  color: var(--text-muted);
}
.analyze-arena.analyze-arena--detail .btn--ghost:hover {
  border-color: var(--analyze-border);
  color: var(--text-primary);
}
.analyze-arena.analyze-arena--detail .btn--primary {
  background: linear-gradient(135deg, var(--accent-gold), #e5a200);
  border: none;
  color: #0a0a0a;
  box-shadow: 0 2px 12px rgba(252, 179, 0, 0.25);
}
.analyze-arena.analyze-arena--detail .btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(252, 179, 0, 0.4);
}

.analyze-arena.analyze-arena--detail .bar-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.analyze-arena.analyze-arena--detail .bar-row {
  display: grid;
  /* `minmax(0, auto)` on the value column, not bare `auto`: the value carries
     the whole option text (`label · count (pct)` — see PollQuestionCard), so an
     `auto` track sized itself to that max-content, squeezed the `1fr` bar down
     to a sliver and pushed the tail out of the card. `minmax(0, …)` lets it
     shrink so the text can wrap instead. */
  grid-template-columns: 28px 1fr minmax(0, auto);
  align-items: center;
  gap: 12px;
}
.analyze-arena.analyze-arena--detail .bar-row__label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}
.analyze-arena.analyze-arena--detail .bar-row__track {
  position: relative;
  height: 12px;
  width: 100%;
  border-radius: 100px;
  background: var(--bar-track);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.analyze-arena.analyze-arena--detail .bar-row__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 100px;
  transition: width 0.3s ease;
}
.analyze-arena.analyze-arena--detail .bar-row__value {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  /* Wraps rather than running off the card. `min-width: 0` is what actually
     allows it — a grid item's default `min-width: auto` refuses to shrink
     below its content, which is why the old `nowrap` + `min-width: 96px`
     overflowed on narrow screens. `anywhere` covers a single long unbroken
     token (a URL-ish option label). */
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
  text-align: right;
}
.analyze-arena.analyze-arena--detail .bar-row[data-correct="true"] .bar-row__label,
.analyze-arena.analyze-arena--detail .bar-row[data-correct="true"] .bar-row__value {
  color: var(--quiz-correct);
}
.analyze-arena.analyze-arena--detail .bar-row__check {
  display: inline-block;
  margin-right: 4px;
  color: var(--quiz-correct);
  font-weight: 800;
}

.analyze-arena.analyze-arena--detail button.bar-row[data-filter-source] {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
  padding: 6px;
  margin: -6px;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: background 0.15s, border-color 0.15s;
}
.analyze-arena.analyze-arena--detail button.bar-row[data-filter-source]:hover {
  background: var(--surface-hover);
  border-color: var(--border-subtle);
}
.analyze-arena.analyze-arena--detail button.bar-row[data-filter-source][aria-pressed="true"] {
  background: var(--analyze-bg);
  border-color: var(--analyze-border);
}
.analyze-arena.analyze-arena--detail button.bar-row[data-filter-source][aria-pressed="true"] .bar-row__label {
  color: var(--analyze-color);
}
.analyze-arena.analyze-arena--detail button.bar-row[data-filter-source][aria-pressed="true"] .bar-row__label::before {
  content: '✓ ';
  font-weight: 800;
}
.analyze-arena.analyze-arena--detail button.bar-row[data-filter-source="quiz"][aria-pressed="true"] {
  background: var(--quiz-bg);
  border-color: var(--quiz-border);
}
.analyze-arena.analyze-arena--detail button.bar-row[data-filter-source="quiz"][aria-pressed="true"] .bar-row__label {
  color: var(--quiz-color);
}

.analyze-arena.analyze-arena--detail .text-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.analyze-arena.analyze-arena--detail .text-item {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-line;
}

.analyze-arena.analyze-arena--detail .tfidf-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.analyze-arena.analyze-arena--detail .tfidf-row {
  display: grid;
  grid-template-columns: 96px 1fr 56px;
  align-items: center;
  gap: 10px;
}
.analyze-arena.analyze-arena--detail .tfidf-row__keyword {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.analyze-arena.analyze-arena--detail .tfidf-row__track {
  position: relative;
  height: 18px;
  width: 100%;
  border-radius: 5px;
  background: var(--bar-track);
  overflow: hidden;
}
.analyze-arena.analyze-arena--detail .tfidf-row__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--bar-fill), var(--bar-fill-strong));
  transition: width 0.3s ease;
}
.analyze-arena.analyze-arena--detail .tfidf-row__value {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
}
.analyze-arena.analyze-arena--detail button.tfidf-row[data-filter-source] {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
  padding: 4px 6px;
  margin: -4px -6px;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: background 0.15s, border-color 0.15s;
}
.analyze-arena.analyze-arena--detail button.tfidf-row[data-filter-source]:hover {
  background: var(--surface-hover);
  border-color: var(--border-subtle);
}
.analyze-arena.analyze-arena--detail button.tfidf-row[data-filter-source][aria-pressed="true"] {
  background: var(--discussion-bg);
  border-color: var(--discussion-border);
}
.analyze-arena.analyze-arena--detail button.tfidf-row[data-filter-source][aria-pressed="true"] .tfidf-row__keyword {
  color: var(--discussion-color);
  font-weight: 700;
}
.analyze-arena.analyze-arena--detail button.tfidf-row[data-filter-source][aria-pressed="true"] .tfidf-row__keyword::before {
  content: '✓ ';
  font-weight: 800;
}

.analyze-arena.analyze-arena--detail .settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.analyze-arena.analyze-arena--detail .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.analyze-arena.analyze-arena--detail .field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.analyze-arena.analyze-arena--detail .field__hint {
  font-size: 11px;
  color: var(--text-muted);
}
.analyze-arena.analyze-arena--detail .field__input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  transition: all 0.15s;
}
.analyze-arena.analyze-arena--detail .field__input:focus {
  border-color: var(--analyze-border);
  box-shadow: 0 0 0 3px var(--analyze-glow);
}
.analyze-arena.analyze-arena--detail .settings-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.analyze-arena.analyze-arena--detail .settings-running {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold);
  background: rgba(252, 179, 0, 0.08);
  border: 1px solid rgba(252, 179, 0, 0.24);
  border-radius: 8px;
}
.analyze-arena.analyze-arena--detail .settings-running::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-gold);
  animation: settings-running-pulse 1.2s ease-in-out infinite;
}
@keyframes settings-running-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

.analyze-arena.analyze-arena--detail .topic-table {
  display: flex;
  flex-direction: column;
}
.analyze-arena.analyze-arena--detail .topic-table__head {
  display: grid;
  grid-template-columns: 90px 1fr 36px;
  gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.analyze-arena.analyze-arena--detail .topic-table__row {
  display: grid;
  grid-template-columns: 90px 1fr 36px;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.15s;
  position: relative;
}
.analyze-arena.analyze-arena--detail .topic-table__row:hover { background: var(--surface-soft); }
.analyze-arena.analyze-arena--detail .topic-table__row:last-child { border-bottom: none; }
.analyze-arena.analyze-arena--detail .topic-table__id {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}
.analyze-arena.analyze-arena--detail .topic-table__id-input {
  width: 100%;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  outline: none;
  transition: all 0.15s;
  display: none;
}
.analyze-arena.analyze-arena--detail .topic-table__id-input:focus {
  border-color: var(--analyze-border);
  box-shadow: 0 0 0 3px var(--analyze-glow);
}
.analyze-arena.analyze-arena--detail .topic-table[data-edit="true"] .topic-table__id { display: none; }
.analyze-arena.analyze-arena--detail .topic-table[data-edit="true"] .topic-table__id-input { display: block; }
.analyze-arena.analyze-arena--detail .topic-table__keywords {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  word-break: keep-all;
}
.analyze-arena.analyze-arena--detail .topic-table__filter {
  grid-column: 3 / 4;
  justify-self: end;
  align-self: center;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.analyze-arena.analyze-arena--detail .topic-table__filter svg { width: 13px; height: 13px; }
.analyze-arena.analyze-arena--detail .topic-table__filter:hover {
  border-color: var(--discussion-border);
  color: var(--discussion-color);
}
.analyze-arena.analyze-arena--detail .topic-table__filter[aria-pressed="true"] {
  background: var(--discussion-bg);
  border-color: var(--discussion-border);
  color: var(--discussion-color);
}

.analyze-arena.analyze-arena--detail .network-wrap {
  width: 100%;
  aspect-ratio: 35 / 29;
  max-height: 460px;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.analyze-arena.analyze-arena--detail .network-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.analyze-arena.analyze-arena--detail .network-bubble {
  fill: var(--bubble-fill);
  stroke: var(--bubble-stroke);
  stroke-width: 1;
}
.analyze-arena.analyze-arena--detail .network-bubble-text {
  fill: var(--bubble-text);
  font-family: var(--font-body);
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
}
.analyze-arena.analyze-arena--detail .network-link {
  stroke: var(--network-link);
  stroke-width: 1;
  fill: none;
}

.analyze-arena.analyze-arena--detail .follow-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.analyze-arena.analyze-arena--detail .follow-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.analyze-arena.analyze-arena--detail .follow-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.analyze-arena.analyze-arena--detail .follow-legend__swatch--done { background: var(--follow-color); }
.analyze-arena.analyze-arena--detail .follow-legend__swatch--miss {
  background: var(--bar-track);
  border: 1px solid var(--border-subtle);
}

.analyze-arena.analyze-arena--detail .follow-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.analyze-arena.analyze-arena--detail .follow-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) 110px;
  align-items: center;
  gap: 14px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--border-subtle);
}
.analyze-arena.analyze-arena--detail .follow-row:last-child { border-bottom: none; }
.analyze-arena.analyze-arena--detail .follow-row__user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.analyze-arena.analyze-arena--detail .follow-row__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.analyze-arena.analyze-arena--detail .follow-row__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.analyze-arena.analyze-arena--detail .follow-row__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.analyze-arena.analyze-arena--detail .follow-row__handle {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.analyze-arena.analyze-arena--detail .follow-row__bar {
  position: relative;
  height: 18px;
  width: 100%;
  border-radius: 5px;
  background: var(--bar-track);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.analyze-arena.analyze-arena--detail .follow-row__bar-done {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--follow-color), #ea580c);
  transition: width 0.3s ease;
}
.analyze-arena.analyze-arena--detail .follow-row__stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.analyze-arena.analyze-arena--detail .follow-row__rate {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--follow-color);
}
.analyze-arena.analyze-arena--detail .follow-row__count {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}
@media (max-width: 760px) {
  .analyze-arena.analyze-arena--detail .follow-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .analyze-arena.analyze-arena--detail .follow-row__stats {
    flex-direction: row;
    align-items: center;
  }
}

.analyze-arena.analyze-arena--detail .sidebar {
  align-self: stretch;
  position: relative;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg-glass);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.analyze-arena.analyze-arena--detail .sidebar__head {
  padding: 4px 6px 12px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 6px;
}
.analyze-arena.analyze-arena--detail .sidebar__head-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.analyze-arena.analyze-arena--detail .sb-group {
  display: flex;
  flex-direction: column;
}
.analyze-arena.analyze-arena--detail .sb-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 6px 8px;
  cursor: pointer;
  user-select: none;
}
.analyze-arena.analyze-arena--detail .sb-group__head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.analyze-arena.analyze-arena--detail .sb-group__icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.analyze-arena.analyze-arena--detail .sb-group__icon svg { width: 14px; height: 14px; }
.analyze-arena.analyze-arena--detail .sb-group--poll .sb-group__icon {
  background: var(--poll-bg);
  color: var(--poll-color);
  border: 1px solid var(--poll-border);
}
.analyze-arena.analyze-arena--detail .sb-group--quiz .sb-group__icon {
  background: var(--quiz-bg);
  color: var(--quiz-color);
  border: 1px solid var(--quiz-border);
}
.analyze-arena.analyze-arena--detail .sb-group--discussion .sb-group__icon {
  background: var(--discussion-bg);
  color: var(--discussion-color);
  border: 1px solid var(--discussion-border);
}
.analyze-arena.analyze-arena--detail .sb-group--follow .sb-group__icon {
  background: var(--follow-bg);
  color: var(--follow-color);
  border: 1px solid var(--follow-border);
}
.analyze-arena.analyze-arena--detail .sb-group__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.analyze-arena.analyze-arena--detail .sb-group__count {
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
}
.analyze-arena.analyze-arena--detail .sb-group__chevron {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.analyze-arena.analyze-arena--detail .sb-group[data-collapsed="true"] .sb-group__chevron {
  transform: rotate(-90deg);
}
.analyze-arena.analyze-arena--detail .sb-group[data-collapsed="true"] .sb-group__list { display: none; }
.analyze-arena.analyze-arena--detail .sb-group__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.analyze-arena.analyze-arena--detail .sb-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  width: 100%;
}
.analyze-arena.analyze-arena--detail .sb-item:hover {
  background: var(--surface-soft);
  border-color: var(--border-subtle);
}
.analyze-arena.analyze-arena--detail .sb-item[aria-selected="true"] {
  background: var(--analyze-bg);
  border-color: var(--analyze-border);
}
.analyze-arena.analyze-arena--detail .sb-item__indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
  background: var(--text-dim);
  transition: all 0.15s;
}
.analyze-arena.analyze-arena--detail .sb-item[aria-selected="true"] .sb-item__indicator {
  background: var(--analyze-color);
  box-shadow: 0 0 8px var(--analyze-color);
}
.analyze-arena.analyze-arena--detail .sb-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.analyze-arena.analyze-arena--detail .sb-item__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.analyze-arena.analyze-arena--detail .sb-item[aria-selected="true"] .sb-item__title {
  color: var(--text-primary);
  font-weight: 600;
}
.analyze-arena.analyze-arena--detail .sb-item__meta {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .analyze-arena.analyze-arena--detail .card { padding: 14px; gap: 10px; }
  .analyze-arena.analyze-arena--detail .main-title { font-size: 17px; gap: 8px; }
  .analyze-arena.analyze-arena--detail .bar-row {
    grid-template-columns: 22px 1fr auto;
    gap: 8px;
  }
  .analyze-arena.analyze-arena--detail .bar-row__value {
    font-size: 11px;
    min-width: 80px;
  }
  .analyze-arena.analyze-arena--detail .tfidf-row {
    grid-template-columns: 80px 1fr 48px;
    gap: 8px;
  }
  .analyze-arena.analyze-arena--detail .topic-table__head,
  .analyze-arena.analyze-arena--detail .topic-table__row {
    grid-template-columns: 70px 1fr 32px;
    gap: 8px;
  }
}

/* === src/features/fact_or_fold/pages/admin/layout (FactFoldAdminLayout) === */

/* Sub-layout for /admin/fact-or-fold/*. Sits inside .admin-arena and
   provides the arcade-themed brand row + 5-tab navigation. Vars are
   scoped so colors don't leak into other admin pages. */
.ff-admin-arena {
  /* Light theme reads at a glance: opaque card, ~2× more opaque
   * border. Dark theme keeps the original frosted-glass look. */
  --ff-bg-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, #ffffff);
  --ff-border: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(10, 10, 30, 0.14));
  --ff-text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --ff-text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --ff-pink: #db2780;
  --ff-gold: #fcb300;

  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 24px 32px;
}

.ff-admin-arena__topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  background: var(--ff-bg-glass);
  border: 1px solid var(--ff-border);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  flex-wrap: wrap;
}

.ff-admin-arena__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ff-admin-arena__brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fcb300 0%, #db2780 100%);
  color: #06060e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Orbitron", "Outfit", sans-serif;
  font-weight: 800;
  font-size: 16px;
}

.ff-admin-arena__brand-name {
  font-family: "Orbitron", "Outfit", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  /* Falls back to `.admin-arena --text-primary` when the brand is
   * rendered outside `.ff-admin-arena` (the generic /admin layout
   * reuses this brand block without the ff-* variable scope). */
  color: var(--ff-text-primary, var(--text-primary));
}

.ff-admin-arena__brand-sub {
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 11px;
  color: var(--ff-text-muted);
}

.ff-admin-arena__tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
  margin-left: 12px;
}

.ff-admin-arena__tab {
  padding: 8px 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ff-text-muted);
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.ff-admin-arena__tab:hover {
  color: var(--ff-text-primary);
}

.ff-admin-arena__tab[aria-selected="true"] {
  color: var(--ff-gold);
  background: rgba(252, 179, 0, 0.08);
  border-color: rgba(252, 179, 0, 0.3);
}

.ff-admin-arena__main {
  min-height: 60vh;
}

/* Mobile (≤720px) — keep the admin tab row horizontal even on narrow
 * viewports. The default `flex-wrap: wrap` was stacking the five tabs
 * into two rows under ~500px and pushing the CTA below them; switch
 * to a nowrap row that scrolls horizontally instead. The CTA stays
 * pinned to the right via `margin-left: auto`. */
@media (max-width: 720px) {
  .ff-admin-arena {
    padding: 12px 14px 24px;
    gap: 12px;
  }
  .ff-admin-arena__topbar {
    gap: 10px;
    padding: 10px 12px;
  }
  .ff-admin-arena__brand-sub {
    display: none;
  }
  .ff-admin-arena__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-left: 6px;
    /* Hide the scrollbar so the tab strip stays clean. The row stays
     * scrollable via touch/trackpad. */
    scrollbar-width: none;
  }
  .ff-admin-arena__tabs::-webkit-scrollbar {
    display: none;
  }
  .ff-admin-arena__tab {
    flex-shrink: 0;
    padding: 8px 10px;
    font-size: 10px;
    letter-spacing: 0.08em;
  }
}

/* === src/features/fact_or_fold/pages/admin/(stub pages) === */

.ff-admin-page {
  background: var(--ff-bg-glass);
  border: 1px solid var(--ff-border);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ff-admin-page__title {
  font-family: "Orbitron", "Outfit", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--ff-text-primary);
}

.ff-admin-page__hint {
  font-size: 13px;
  color: var(--ff-text-muted);
  margin: 0;
}

.ff-admin-page--placeholder {
  border-style: dashed;
}

/* === src/features/fact_or_fold/pages/admin/settings === */

.ff-settings {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ff-settings__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ff-settings__section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 4px;
}

.ff-settings__section-title {
  font-family: "Orbitron", "Outfit", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ff-text-primary);
}

.ff-settings__section-sub {
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 11px;
  color: var(--ff-text-muted);
}

.ff-settings__panel {
  background: var(--ff-bg-glass);
  border: 1px solid var(--ff-border);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  padding: 8px 0;
  display: flex;
  flex-direction: column;
}

.ff-settings__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-top: 1px solid var(--ff-border);
}
.ff-settings__row:first-child {
  border-top: none;
}

.ff-settings__row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ff-settings__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ff-text-primary);
}

.ff-settings__desc {
  font-size: 12px;
  color: var(--ff-text-muted);
  line-height: 1.4;
}

.ff-settings__control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ff-settings__input {
  width: 110px;
  padding: 8px 10px;
  border: 1px solid var(--ff-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--ff-text-primary);
  border-radius: 6px;
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 13px;
  text-align: right;
  outline: none;
}
.ff-settings__input:focus {
  border-color: var(--ff-gold);
}

.ff-settings__suffix {
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 11px;
  color: var(--ff-text-muted);
  letter-spacing: 0.04em;
}

.ff-settings__note {
  margin: 0;
  padding: 14px 18px;
  font-size: 12px;
  color: var(--ff-text-muted);
  line-height: 1.5;
}

.ff-settings__deferred {
  margin-top: 4px;
  padding: 14px 18px;
  border: 1px dashed var(--ff-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--ff-text-muted);
  font-size: 12px;
}
.ff-settings__deferred strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ff-text-primary);
  font-size: 12px;
}
.ff-settings__deferred ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ff-settings__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

.ff-settings__error {
  color: #ff4d6d;
  font-size: 12px;
}

.ff-settings__saved {
  color: #5fd189;
  font-size: 12px;
}

.ff-settings__warning {
  color: var(--dark, #fcb300) var(--light, #b87a00);
  font-size: 12px;
  margin-top: 6px;
  padding: 8px 12px;
  border: 1px solid var(--dark, rgba(252, 179, 0, 0.35)) var(--light, rgba(184, 122, 0, 0.4));
  border-radius: 6px;
  background: var(--dark, rgba(252, 179, 0, 0.08)) var(--light, rgba(252, 179, 0, 0.12));
}

/* === src/features/fact_or_fold/pages/admin/subjects === */

.ff-subjects {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* KPI strip */
.ff-subjects__kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.ff-subjects__kpi-tile {
  background: var(--ff-bg-glass);
  border: 1px solid var(--ff-border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ff-subjects__kpi-label {
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ff-text-muted);
}

.ff-subjects__kpi-value {
  font-family: "Orbitron", "Outfit", sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--ff-text-primary);
}
.ff-subjects__kpi-value[data-accent="pink"] { color: var(--ff-pink); }
.ff-subjects__kpi-value[data-accent="gold"] { color: var(--ff-gold); }
.ff-subjects__kpi-value[data-accent="teal"] { color: #6eedd8; }

/* Filter tabs */
.ff-subjects__tabs {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--ff-border);
  border-radius: 8px;
  padding: 4px;
}

.ff-subjects__tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--ff-text-muted);
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.ff-subjects__tab:hover { color: var(--ff-text-primary); }
.ff-subjects__tab[aria-selected="true"] {
  color: var(--ff-gold);
  background: rgba(252, 179, 0, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.ff-subjects__tab-count {
  font-size: 10px;
  opacity: 0.7;
}

/* Table panel */
.ff-subjects__panel {
  background: var(--ff-bg-glass);
  border: 1px solid var(--ff-border);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(14px);
}

.ff-subjects__empty {
  padding: 32px;
  text-align: center;
  color: var(--ff-text-muted);
  font-size: 13px;
  font-style: italic;
}

.ff-subjects__table {
  width: 100%;
  border-collapse: collapse;
}

.ff-subjects__table thead th {
  text-align: left;
  padding: 12px 14px;
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ff-text-muted);
  border-bottom: 1px solid var(--ff-border);
  background: rgba(255, 255, 255, 0.02);
}

.ff-subjects__table tbody td {
  padding: 12px 14px;
  border-top: 1px solid var(--ff-border);
  vertical-align: middle;
  font-size: 13px;
  color: var(--ff-text-primary);
}

.ff-subjects__row:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.ff-subjects__cell-mono {
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 11.5px;
  color: var(--ff-text-muted);
}

.ff-subjects__cell-muted {
  color: var(--ff-text-muted);
  font-size: 12px;
}

.ff-subjects__subject-text {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ff-subjects__row-error {
  margin-top: 4px;
  font-size: 11px;
  color: #ff4d6d;
}

.ff-subjects__tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.ff-subjects__pill {
  padding: 2px 7px;
  border: 1px solid var(--ff-border);
  border-radius: 4px;
  font-size: 10.5px;
  font-family: "JetBrains Mono", "Outfit", monospace;
  color: var(--ff-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Verdict + status badges */
.ff-subjects__verdict,
.ff-subjects__status {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--ff-border);
  border-radius: 4px;
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ff-subjects__verdict[data-variant="real"] {
  border-color: rgba(110, 237, 216, 0.5);
  color: #6eedd8;
  background: rgba(110, 237, 216, 0.08);
}
.ff-subjects__verdict[data-variant="fake"] {
  border-color: rgba(219, 39, 128, 0.5);
  color: var(--ff-pink);
  background: rgba(219, 39, 128, 0.08);
}

.ff-subjects__status[data-variant="draft"] {
  color: #6eedd8;
  border-color: rgba(110, 237, 216, 0.4);
}
.ff-subjects__status[data-variant="scheduled"] {
  color: var(--ff-gold);
  border-color: rgba(252, 179, 0, 0.4);
}
.ff-subjects__status[data-variant="live"] {
  color: var(--ff-pink);
  border-color: rgba(219, 39, 128, 0.5);
  background: rgba(219, 39, 128, 0.08);
  animation: ff-headlines-live-pulse 1.6s ease-in-out infinite alternate;
}
@keyframes ff-headlines-live-pulse {
  from { box-shadow: 0 0 0 0 rgba(219, 39, 128, 0.0); }
  to   { box-shadow: 0 0 0 4px rgba(219, 39, 128, 0.18); }
}
.ff-subjects__status[data-variant="settled"] {
  color: var(--ff-text-muted);
}
.ff-subjects__status[data-variant="deleted"] {
  color: var(--ff-text-muted);
  opacity: 0.5;
}

/* Action buttons */
.ff-subjects__row-actions {
  display: inline-flex;
  gap: 4px;
}

.ff-subjects__icon-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--ff-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--ff-text-muted);
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ff-subjects__icon-btn:hover {
  color: var(--ff-gold);
  border-color: rgba(252, 179, 0, 0.4);
  background: rgba(252, 179, 0, 0.08);
}
.ff-subjects__icon-btn--danger:hover {
  color: var(--ff-pink);
  border-color: rgba(219, 39, 128, 0.4);
  background: rgba(219, 39, 128, 0.08);
}
.ff-subjects__icon-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* === src/features/fact_or_fold/pages/admin/new_subject === */

.ff-new-subject {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ff-new-subject__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ff-new-subject__section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 4px;
}

.ff-new-subject__section-title {
  font-family: "Orbitron", "Outfit", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ff-text-primary);
}

.ff-new-subject__section-sub {
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 11px;
  color: var(--ff-text-muted);
}

.ff-new-subject__panel {
  background: var(--ff-bg-glass);
  border: 1px solid var(--ff-border);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ff-new-subject__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ff-new-subject__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.ff-new-subject__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ff-text-primary);
}

.ff-new-subject__counter {
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 11px;
  color: var(--ff-text-muted);
}
.ff-new-subject__counter[data-invalid="true"] { color: #ff4d6d; }

.ff-new-subject__input,
.ff-new-subject__textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ff-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--ff-text-primary);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.ff-new-subject__input:focus,
.ff-new-subject__textarea:focus { border-color: var(--ff-gold); }
.ff-new-subject__input[data-invalid="true"],
.ff-new-subject__textarea[data-invalid="true"] { border-color: #ff4d6d; }

.ff-new-subject__textarea {
  resize: vertical;
  font-family: "JetBrains Mono", "Outfit", monospace;
  line-height: 1.5;
}

.ff-new-subject__hint {
  font-size: 12px;
  color: var(--ff-text-muted);
  line-height: 1.4;
  margin: 0;
}

/* Verdict picker */
.ff-new-subject__verdict-row {
  display: flex;
  gap: 8px;
}

.ff-new-subject__verdict-btn {
  flex: 1;
  padding: 14px 18px;
  font-family: "Orbitron", "Outfit", sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.18em;
  border: 1px solid var(--ff-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--ff-text-muted);
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ff-new-subject__verdict-btn[data-variant="real"][aria-selected="true"] {
  color: #6eedd8;
  border-color: rgba(110, 237, 216, 0.5);
  background: rgba(110, 237, 216, 0.08);
}
.ff-new-subject__verdict-btn[data-variant="fake"][aria-selected="true"] {
  color: var(--ff-pink);
  border-color: rgba(219, 39, 128, 0.5);
  background: rgba(219, 39, 128, 0.08);
}

/* Difficulty stars */
.ff-new-subject__star-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ff-new-subject__star {
  background: transparent;
  border: none;
  color: var(--ff-text-muted);
  font-size: 22px;
  cursor: pointer;
  padding: 0 2px;
  transition: color 0.1s;
}
.ff-new-subject__star[aria-selected="true"] { color: var(--ff-gold); }

.ff-new-subject__star-label {
  margin-left: 8px;
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 11px;
  color: var(--ff-text-muted);
}

/* Reveal sources editor */
.ff-new-subject__sources {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ff-new-subject__source-row {
  display: grid;
  grid-template-columns: 180px 1fr 36px;
  gap: 8px;
  align-items: center;
}

.ff-new-subject__source-remove {
  width: 36px;
  height: 36px;
  border: 1px solid var(--ff-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--ff-text-muted);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}
.ff-new-subject__source-remove:hover {
  color: var(--ff-pink);
  border-color: rgba(219, 39, 128, 0.4);
}

.ff-new-subject__source-add {
  align-self: flex-start;
  padding: 8px 14px;
  border: 1px dashed var(--ff-border);
  background: transparent;
  color: var(--ff-text-muted);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-family: "JetBrains Mono", "Outfit", monospace;
  letter-spacing: 0.08em;
}
.ff-new-subject__source-add:hover {
  color: var(--ff-gold);
  border-color: rgba(252, 179, 0, 0.4);
}

/* Submit bar */
.ff-new-subject__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.ff-new-subject__error {
  color: #ff4d6d;
  font-size: 12px;
}

/* === src/features/fact_or_fold/pages/admin/schedule === */

.ff-schedule {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ff-schedule__banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--ff-border);
}

.ff-schedule__banner--alert {
  background: rgba(219, 39, 128, 0.08);
  border-color: rgba(219, 39, 128, 0.4);
}
.ff-schedule__banner--ok {
  background: rgba(110, 237, 216, 0.05);
  border-color: rgba(110, 237, 216, 0.25);
}

.ff-schedule__banner-icon {
  font-size: 22px;
}
.ff-schedule__banner--alert .ff-schedule__banner-icon { color: var(--ff-pink); }
.ff-schedule__banner--ok .ff-schedule__banner-icon { color: #6eedd8; }

.ff-schedule__banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ff-schedule__banner-text strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--ff-text-primary);
}
.ff-schedule__banner-text p {
  font-size: 12px;
  color: var(--ff-text-muted);
  margin: 0;
}

.ff-schedule__banner-cta {
  padding: 8px 14px;
  border: 1px solid rgba(252, 179, 0, 0.4);
  background: rgba(252, 179, 0, 0.08);
  color: var(--ff-gold);
  border-radius: 8px;
  cursor: pointer;
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ff-schedule__banner-cta:hover { background: rgba(252, 179, 0, 0.16); }

.ff-schedule__panel {
  background: var(--ff-bg-glass);
  border: 1px solid var(--ff-border);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.ff-schedule__panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ff-border);
}
.ff-schedule__panel-title {
  font-family: "Orbitron", "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.ff-schedule__panel-sub {
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 11px;
  color: var(--ff-text-muted);
}

.ff-schedule__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ff-schedule__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--ff-border);
}
.ff-schedule__row:first-child { border-top: none; }

.ff-schedule__when {
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 12px;
  color: var(--ff-gold);
}

.ff-schedule__row-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ff-text-primary);
  margin-bottom: 4px;
}

.ff-schedule__row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ff-text-muted);
  align-items: baseline;
}
.ff-schedule__row-source {
  font-family: "JetBrains Mono", "Outfit", monospace;
}
.ff-schedule__row-tag {
  padding: 1px 6px;
  border: 1px solid var(--ff-border);
  border-radius: 3px;
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
}

.ff-schedule__empty {
  padding: 32px;
  text-align: center;
  font-style: italic;
  color: var(--ff-text-muted);
}

/* === src/features/fact_or_fold/pages/admin/stats === */
/* === src/features/fact_or_fold/pages/admin/reports === */

.ff-stats,
.ff-reports {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ff-stats__notice,
.ff-reports__notice {
  padding: 14px 18px;
  border: 1px dashed var(--ff-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--ff-text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.ff-stats__notice strong,
.ff-reports__notice strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ff-text-primary);
  font-size: 13px;
}
.ff-stats__notice p,
.ff-reports__notice p { margin: 0; }

.ff-stats__kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.ff-stats__kpi-tile {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--ff-border);
  background: var(--ff-bg-glass);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ff-stats__kpi-label {
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ff-text-muted);
}
.ff-stats__kpi-value {
  font-family: "Orbitron", "Outfit", sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--ff-text-muted);
}
.ff-stats__kpi-sub {
  font-size: 11px;
  color: var(--ff-text-muted);
  font-style: italic;
}

.ff-stats__panel {
  background: var(--ff-bg-glass);
  border: 1px solid var(--ff-border);
  border-radius: 14px;
  padding: 16px 18px;
  backdrop-filter: blur(14px);
}
.ff-stats__panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ff-stats__panel-title {
  font-family: "Orbitron", "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.ff-stats__panel-sub {
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 11px;
  color: var(--ff-text-muted);
}
.ff-stats__chart-placeholder {
  height: 180px;
  border: 1px dashed var(--ff-border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ff-text-muted);
  font-size: 12px;
  font-style: italic;
}
.ff-stats__empty {
  padding: 24px;
  text-align: center;
  color: var(--ff-text-muted);
  font-style: italic;
  font-size: 13px;
}

.ff-reports__tabs {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--ff-border);
  border-radius: 8px;
  padding: 4px;
}
.ff-reports__tab {
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--ff-text-muted);
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: not-allowed;
  opacity: 0.6;
}
.ff-reports__tab[aria-selected="true"] {
  color: var(--ff-gold);
  background: rgba(252, 179, 0, 0.08);
  opacity: 1;
}

.ff-reports__panel {
  background: var(--ff-bg-glass);
  border: 1px solid var(--ff-border);
  border-radius: 14px;
  padding: 24px;
}
.ff-reports__empty {
  text-align: center;
  font-style: italic;
  color: var(--ff-text-muted);
  font-size: 13px;
}

/* === src/features/fact_or_fold/pages/lobby === */

.ff-lobby {
  /* Same light/dark calibration as `.ff-admin-arena`. */
  --ff-bg-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, #ffffff);
  --ff-border: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(10, 10, 30, 0.14));
  --ff-text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --ff-text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --ff-pink: #db2780;
  --ff-gold: #fcb300;

  max-width: 920px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--ff-text-primary);
}

.ff-lobby__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ff-lobby__brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fcb300 0%, #db2780 100%);
  color: #06060e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Orbitron", "Outfit", sans-serif;
  font-weight: 800;
  font-size: 18px;
}

.ff-lobby__brand-name {
  font-family: "Orbitron", "Outfit", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--ff-text-primary);
}

.ff-lobby__brand-sub {
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 11px;
  color: var(--ff-text-muted);
}

.ff-lobby__featured {
  background: var(--ff-bg-glass);
  border: 1px solid var(--ff-border);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.ff-lobby__featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 80% 0%,
    rgba(252, 179, 0, 0.08),
    transparent 55%
  );
  pointer-events: none;
}
.ff-lobby__featured > * { position: relative; }

.ff-lobby__tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--ff-border);
  border-radius: 4px;
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ff-text-muted);
}
.ff-lobby__tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.ff-lobby__tag[data-variant="open"]    { color: var(--ff-gold); border-color: rgba(252,179,0,0.4); }
.ff-lobby__tag[data-variant="waiting"] { color: var(--ff-gold); border-color: rgba(252,179,0,0.4); }
.ff-lobby__tag[data-variant="live"]    { color: var(--ff-pink); border-color: rgba(219,39,128,0.5); }
.ff-lobby__tag[data-variant="settled"] { color: #6eedd8; border-color: rgba(110,237,216,0.4); }
.ff-lobby__tag[data-variant="closed"]  { color: var(--ff-text-muted); }

.ff-lobby__title {
  font-family: "Orbitron", "Outfit", sans-serif;
  font-weight: 800;
  font-size: 38px;
  letter-spacing: 0.04em;
  margin: 0;
}

.ff-lobby__tagline {
  font-size: 15px;
  color: var(--ff-text-muted);
  line-height: 1.6;
  max-width: 640px;
  margin: 0;
}

.ff-lobby__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--ff-border);
  margin-top: 4px;
  padding-top: 14px;
}

.ff-lobby__meta-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ff-lobby__meta-label {
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ff-text-muted);
}

.ff-lobby__meta-value {
  font-family: "Orbitron", "Outfit", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--ff-text-primary);
}

.ff-lobby__cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.ff-lobby__status-line {
  font-size: 12px;
  color: var(--ff-text-muted);
}
.ff-lobby__status-line--muted { font-style: italic; }

.ff-lobby__error {
  flex-basis: 100%;
  color: #ff4d6d;
  font-size: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 77, 109, 0.3);
  background: rgba(255, 77, 109, 0.08);
  border-radius: 6px;
}

.ff-lobby__rules {
  background: var(--ff-bg-glass);
  border: 1px solid var(--ff-border);
  border-radius: 12px;
  padding: 18px 22px;
  font-size: 13px;
  color: var(--ff-text-muted);
}
.ff-lobby__rules strong {
  display: block;
  margin-bottom: 10px;
  color: var(--ff-text-primary);
  font-family: "JetBrains Mono", "Outfit", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ff-lobby__rules ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1.5;
}

/* === src/features/arcade/games/fact_or_fold/pages/game_room === */

/* Root container. Local CSS variables (named to mirror the
 * round-stage.html mockup) so that the imported rules below port over
 * verbatim with just an `.ff-room ` scope prefix. Light/dark colors
 * use the space-toggle pattern so the room follows the global theme. */
.ff-room {
  /* Mirror of `.ff-arcade` palette so standalone previews of the
   * room render with the same light/dark calibration. Keep both in
   * sync whenever you tune one. */
  --bg: var(--dark, #07070f) var(--light, #f6f6fb);
  --bg-grad-1: var(--dark, #11102a) var(--light, #ffffff);
  --bg-grad-2: var(--dark, #1a0a22) var(--light, #fafafa);
  --surface: var(--dark, rgba(18, 18, 32, 0.72))
    var(--light, rgba(255, 255, 255, 0.82));
  --surface-2: var(--dark, rgba(28, 28, 46, 0.6))
    var(--light, rgba(244, 244, 250, 0.72));
  --surface-3: var(--dark, rgba(38, 38, 58, 0.5))
    var(--light, rgba(232, 232, 242, 0.68));
  --border: var(--dark, rgba(255, 255, 255, 0.08))
    var(--light, rgba(15, 15, 35, 0.08));
  --border-strong: var(--dark, rgba(255, 255, 255, 0.16))
    var(--light, rgba(15, 15, 35, 0.18));
  --text-primary: var(--dark, #f0f0f5) var(--light, #14141e);
  --text-muted: var(--dark, #8a8aa6) var(--light, #5a5a72);
  --text-faint: var(--dark, #5a5a78) var(--light, #9a9ab2);

  --gold: var(--dark, #fcb300) var(--light, #c98300);
  --gold-bright: #fcb300;
  --gold-soft: var(--dark, rgba(252, 179, 0, 0.12))
    var(--light, rgba(252, 179, 0, 0.16));
  --pink: var(--dark, #db2780) var(--light, #c41f6d);
  --pink-bright: #db2780;
  --pink-soft: var(--dark, rgba(219, 39, 128, 0.12))
    var(--light, rgba(219, 39, 128, 0.10));
  --teal: var(--dark, #6eedd8) var(--light, #0e9b87);
  --teal-bright: var(--dark, #6eedd8) var(--light, #14c3a8);
  --teal-soft: var(--dark, rgba(110, 237, 216, 0.12))
    var(--light, rgba(20, 195, 168, 0.14));
  --purple: var(--dark, #a78bfa) var(--light, #6747e0);
  --purple-bright: var(--dark, #a78bfa) var(--light, #8a6df0);
  --purple-soft: var(--dark, rgba(167, 139, 250, 0.14))
    var(--light, rgba(138, 109, 240, 0.12));

  --shadow-sm: var(--dark, 0 2px 8px rgba(0, 0, 0, 0.3))
    var(--light, 0 2px 8px rgba(15, 15, 40, 0.06));
  --shadow-md: var(--dark, 0 8px 24px rgba(0, 0, 0, 0.4))
    var(--light, 0 8px 24px rgba(15, 15, 40, 0.08));
  --shadow-lg: var(--dark, 0 24px 64px rgba(0, 0, 0, 0.55))
    var(--light, 0 24px 64px rgba(15, 15, 40, 0.12));

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* No outer container — .ff-arcade owns max-width / padding / font
   * for all arcade pages. Variables stay declared so .ff-room renders
   * correctly standalone (preview, design tooling). */
  color: var(--text-primary);
}

/* ── Top bar ──────────────────────────────────────────────────── */
.ff-room .top-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 22px;
  padding: 16px 20px;
  background: var(--surface);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.ff-room .top-nav {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.ff-room .top-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-family: "Outfit", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 0.15s;
}
.ff-room .top-nav-btn:hover {
  color: var(--text-primary);
  background: var(--surface-2);
}
.ff-room .top-nav-btn[aria-selected="true"] {
  background: var(--gold-soft);
  color: var(--gold);
  border-color: rgba(252, 179, 0, 0.3);
}
.ff-room .top-nav-btn-icon {
  font-size: 14px;
}
.ff-room .brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ff-room .brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold), var(--pink));
  display: grid;
  place-items: center;
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: #1a0a00;
  box-shadow: 0 4px 16px rgba(252, 179, 0, 0.35);
}
.ff-room .brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ff-room .brand-name {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
}
.ff-room .brand-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-family: "JetBrains Mono", monospace;
}
.ff-room .user-stats {
  display: flex;
  align-items: center;
  gap: 18px;
}
.ff-room .stat-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
}
.ff-room .stat-chip.gold {
  border-color: rgba(252, 179, 0, 0.3);
  background: var(--gold-soft);
  color: var(--gold);
}
.ff-room .stat-chip-icon {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
}
.ff-room .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5b3aaf, #db2780);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  color: white;
  border: 2px solid var(--border-strong);
}

/* ── Layout: sidebar + view stack ─────────────────────────────── */
.ff-room .layout {
  display: grid;
  grid-template-columns: 176px 1fr;
  gap: 20px;
  align-items: start;
}
.ff-room .view-stack {
  min-width: 0;
}
.ff-room .sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 24px;
}
.ff-room .sidebar .timer-card {
  padding: 14px 14px 16px;
}
.ff-room .sidebar .timer-card .section-label {
  font-size: 10px;
}
.ff-room .sidebar .timer-card .timer-stage {
  font-size: 13px;
  margin-bottom: 2px;
}
.ff-room .sidebar .timer-card .timer-deadline {
  font-size: 10px;
  margin-bottom: 10px;
}
.ff-room .sidebar .timer-card .timer-ring {
  width: 120px;
  height: 120px;
  margin: 4px auto 0;
}
.ff-room .sidebar .timer-card .timer-ring svg {
  width: 120px;
  height: 120px;
}
.ff-room .sidebar .timer-card .timer-display-time {
  font-size: 22px;
}
.ff-room .sidebar .timer-card .timer-display-sub {
  font-size: 10px;
}
@media (max-width: 900px) {
  .ff-room .layout {
    grid-template-columns: 1fr;
  }
  .ff-room .sidebar {
    position: static;
  }
}

/* ── Stage timeline (sidebar) ─────────────────────────────────── */
.ff-room .stage-timeline.stage-timeline-global {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  padding: 20px 14px;
  margin-bottom: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
}
.ff-room .stage-timeline.stage-timeline-global[data-hidden="true"] {
  display: none;
}
.ff-room .stage-timeline-global .stage-step {
  flex: none;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.15s;
  position: relative;
  gap: 12px;
}
.ff-room .stage-timeline-global .stage-step:hover {
  opacity: 0.85;
}
.ff-room .stage-timeline-global .stage-step:hover .stage-dot {
  border-color: var(--border-strong);
}
.ff-room .stage-timeline-global .stage-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 32px;
  bottom: -20px;
  width: 2px;
  background: var(--border);
}
.ff-room
  .stage-timeline-global
  .stage-step[data-state="done"]:not(:last-child)::after {
  background: linear-gradient(180deg, var(--teal), var(--gold));
}
.ff-room
  .stage-timeline-global
  .stage-step[data-state="active"]:not(:last-child)::after {
  background: linear-gradient(180deg, var(--gold), var(--border));
}
.ff-room .stage-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 2px solid var(--border);
  display: grid;
  place-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.ff-room .stage-step[data-state="done"] .stage-dot {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal);
}
.ff-room .stage-step[data-state="active"] .stage-dot {
  background: var(--gold);
  border-color: var(--gold);
  color: #1a0a00;
  box-shadow: 0 0 0 6px rgba(252, 179, 0, 0.18);
}
.ff-room .stage-label {
  font-size: 12px;
  white-space: nowrap;
}
.ff-room .stage-label-name {
  font-weight: 500;
  color: var(--text-primary);
}
.ff-room .stage-step[data-state="upcoming"] .stage-label-name {
  color: var(--text-muted);
}
.ff-room .stage-label-time {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--text-faint);
}

/* ── Timer card ───────────────────────────────────────────────── */
.ff-room .timer-card {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  text-align: center;
}
.ff-room .timer-ring {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 8px auto 16px;
}
.ff-room .timer-ring svg {
  transform: rotate(-90deg);
}
.ff-room .timer-ring-bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 8;
}
.ff-room .timer-ring-fg {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}
.ff-room .timer-display {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Orbitron", sans-serif;
}
.ff-room .timer-display-time {
  font-size: 28px;
  font-weight: 800;
  color: var(--gold);
}
.ff-room .timer-display-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-family: "JetBrains Mono", monospace;
  margin-top: 2px;
}
.ff-room .timer-stage {
  font-family: "Orbitron", sans-serif;
  font-size: 14px;
  margin-bottom: 4px;
}
.ff-room .timer-deadline {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* ── View host (each stage is one .view) ─────────────────────── */
.ff-room .view {
  display: none;
  animation: ff-room-fadeup 0.32s ease;
}
.ff-room .view[data-active="true"] {
  display: block;
}
@keyframes ff-room-fadeup {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Common primitives (card / pill / btn / section-label) ────── */
.ff-room .card-title {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}
.ff-room .card-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 18px;
}
.ff-room .section-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.ff-room .section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.ff-room .section-head h2 {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0;
}
.ff-room .section-head .sub {
  font-size: 12px;
  color: var(--text-muted);
  font-family: "JetBrains Mono", monospace;
}
.ff-room .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.ff-room .pill.gold {
  color: var(--gold);
  border-color: rgba(252, 179, 0, 0.3);
  background: var(--gold-soft);
}
.ff-room .pill.pink {
  color: var(--pink);
  border-color: rgba(219, 39, 128, 0.3);
  background: var(--pink-soft);
}
.ff-room .pill.teal {
  color: var(--teal);
  border-color: rgba(110, 237, 216, 0.3);
  background: var(--teal-soft);
}
.ff-room .pill.purple {
  color: var(--purple);
  border-color: rgba(167, 139, 250, 0.3);
  background: var(--purple-soft);
}
.ff-room .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ff-room .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ff-room .btn-primary {
  background: var(--gold);
  color: #1a0a00;
  border-color: var(--gold);
  box-shadow: 0 4px 16px rgba(252, 179, 0, 0.25);
}
.ff-room .btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(252, 179, 0, 0.35);
}
.ff-room .btn-ghost {
  background: var(--surface-2);
  color: var(--text-primary);
  border-color: var(--border);
}
.ff-room .btn-ghost:hover:not(:disabled) {
  background: var(--surface-3);
  border-color: var(--border-strong);
}

/* ── News reveal view ─────────────────────────────────────────── */
.ff-room .round-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.ff-room .news-card {
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  margin-bottom: 18px;
}
.ff-room .news-source {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: "JetBrains Mono", monospace;
}
.ff-room .news-source-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
}
.ff-room .news-headline {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.35;
  margin: 0 0 16px;
}
.ff-room .news-excerpt {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0 0 20px;
  padding-left: 14px;
  border-left: 2px solid var(--border-strong);
}
.ff-room .news-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.ff-room .news-cta {
  margin-left: auto;
  padding: 9px 16px;
  font-size: 12.5px;
}

/* Players card (roster) */
.ff-room .players-card {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
}
.ff-room .players-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}
.ff-room .players-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ff-room .player-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.ff-room .player-row.me {
  border-color: rgba(252, 179, 0, 0.3);
  background: var(--gold-soft);
}
.ff-room .p-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f3aaf, #7d3aaf);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  border: 2px solid var(--border-strong);
}
.ff-room .p-avatar.a2 {
  background: linear-gradient(135deg, #3aaf7d, #6eedd8);
  color: #042a1f;
}
.ff-room .p-avatar.a3 {
  background: linear-gradient(135deg, #af3a7d, #db2780);
}
.ff-room .p-avatar.a4 {
  background: linear-gradient(135deg, #af7d3a, #fcb300);
  color: #1a0a00;
}
.ff-room .p-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ff-room .p-name {
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ff-room .p-status {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.ff-room .p-state-pill {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-muted);
}
.ff-room .p-state-pill.done {
  background: var(--teal-soft);
  color: var(--teal);
}
.ff-room .p-state-pill.waiting {
  background: var(--gold-soft);
  color: var(--gold);
}
.ff-room .lb-you-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: var(--gold);
  color: #1a0a00;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ── First-bet view ───────────────────────────────────────────── */
.ff-room .live-bet-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.ff-room .insider-card {
  position: relative;
  padding: 22px 24px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(167, 139, 250, 0.04),
      rgba(167, 139, 250, 0.04) 8px,
      transparent 8px,
      transparent 16px
    ),
    rgba(20, 12, 36, 0.85);
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  margin-bottom: 18px;
  overflow: hidden;
}
.ff-room .insider-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 4px;
  background: var(--purple);
}
.ff-room .insider-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.ff-room .insider-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--purple-soft);
  color: var(--purple);
  display: grid;
  place-items: center;
  font-size: 13px;
}
.ff-room .insider-title {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--purple);
}
.ff-room .insider-body {
  font-size: 14px;
  line-height: 1.6;
}
.ff-room .insider-body strong {
  color: var(--purple);
}
.ff-room .insider-foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(167, 139, 250, 0.25);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.ff-room .bet-card {
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
}
.ff-room .bet-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.ff-room .bet-option {
  position: relative;
  padding: 22px;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
}
.ff-room .bet-option:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.ff-room .bet-option[data-selected="true"][data-side="real"] {
  background: var(--gold-soft);
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(252, 179, 0, 0.15);
}
.ff-room .bet-option[data-selected="true"][data-side="fake"] {
  background: var(--pink-soft);
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(219, 39, 128, 0.15);
}
.ff-room .bet-option-icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.ff-room .bet-option[data-side="real"] .bet-option-icon {
  color: var(--gold);
}
.ff-room .bet-option[data-side="fake"] .bet-option-icon {
  color: var(--pink);
}
.ff-room .bet-option-label {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 4px;
}
.ff-room .bet-option-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.ff-room .rp-slider-wrap {
  margin-bottom: 24px;
}
.ff-room .rp-slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ff-room .rp-slider-label {
  font-size: 13px;
  color: var(--text-muted);
}
.ff-room .rp-slider-value {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--gold);
}
.ff-room .rp-slider {
  appearance: none;
  width: 100%;
  height: 8px;
  background: var(--surface-3);
  border-radius: 999px;
  outline: none;
}
.ff-room .rp-slider::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  background: var(--gold);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(252, 179, 0, 0.18);
}
.ff-room .rp-slider-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--text-faint);
}
.ff-room .submit-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 20px;
}

/* ── Reasoning-write view ─────────────────────────────────────── */
.ff-room .bet-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
}
.ff-room .reason-live-card {
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
}
.ff-room .reason-prompt {
  margin-bottom: 16px;
}
.ff-room .reason-prompt-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.ff-room .reason-prompt-text {
  font-family: "Orbitron", sans-serif;
  font-size: 18px;
  font-weight: 600;
}
.ff-room .reason-prompt-text .gold-mark {
  color: var(--gold);
}
.ff-room .reason-prompt-text .pink-mark {
  color: var(--pink);
}
.ff-room .reason-wrap {
  margin-bottom: 18px;
}
.ff-room .reason-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.ff-room .reason-label {
  font-size: 13px;
  color: var(--text-muted);
}
.ff-room .char-counter {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-faint);
}
.ff-room .char-counter.ok {
  color: var(--teal);
}
.ff-room .char-counter.warn {
  color: var(--pink);
}
.ff-room .reason-textarea {
  width: 100%;
  min-height: 130px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
.ff-room .reason-textarea:focus {
  border-color: var(--gold);
}
.ff-room .reason-warn {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(219, 39, 128, 0.08);
  border: 1px solid rgba(219, 39, 128, 0.25);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--pink);
  line-height: 1.5;
}
.ff-room .bet-summary {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
}
.ff-room .player-pulses {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ff-room .pulse-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
}
.ff-room .pulse-chip.done {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal);
}
.ff-room .pulse-chip-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-3);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
}
.ff-room .pulse-chip-state {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--text-muted);
}
.ff-room .pulse-chip.done .pulse-chip-state {
  color: var(--teal);
}
.ff-room .pulse-chip.thinking .pulse-chip-state {
  color: var(--gold);
}
.ff-room .pulse-chip.thinking::after {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  animation: ff-room-pulse 0.8s ease-in-out infinite;
  margin-left: 4px;
}
@keyframes ff-room-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}

/* ── Reasoning-reveal view (camp bar + reveal cards) ──────────── */
.ff-room .camp-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 18px;
}
.ff-room .camp-side {
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ff-room .camp-side.real {
  border-color: rgba(252, 179, 0, 0.35);
  background: linear-gradient(180deg, var(--gold-soft), var(--surface));
}
.ff-room .camp-side.fake {
  border-color: rgba(219, 39, 128, 0.35);
  background: linear-gradient(180deg, var(--pink-soft), var(--surface));
}
.ff-room .camp-side-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ff-room .camp-label {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
}
.ff-room .camp-side.real .camp-label {
  color: var(--gold);
}
.ff-room .camp-side.fake .camp-label {
  color: var(--pink);
}
.ff-room .camp-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-muted);
}
.ff-room .camp-avatars {
  display: flex;
  gap: 6px;
}
.ff-room .camp-vs {
  display: grid;
  place-items: center;
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--text-faint);
  letter-spacing: 0.1em;
  padding: 0 8px;
}
.ff-room .reveal-hint {
  padding: 12px 16px;
  background: var(--teal-soft);
  border: 1px solid rgba(110, 237, 216, 0.3);
  border-radius: var(--r-md);
  color: var(--teal);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 18px;
}
.ff-room .reveal-hint strong {
  color: var(--teal);
}
.ff-room .reveal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.ff-room .reveal-card {
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ff-room .reveal-card[data-side="real"] {
  border-left: 4px solid var(--gold);
}
.ff-room .reveal-card[data-side="fake"] {
  border-left: 4px solid var(--pink);
}
.ff-room .reveal-card.me {
  background: linear-gradient(180deg, rgba(252, 179, 0, 0.05), var(--surface));
}
.ff-room .reveal-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ff-room .debate-card-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ff-room .reveal-card-bet {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 6px 12px;
  border-radius: 999px;
  flex-shrink: 0;
}
.ff-room .reveal-card-bet.real {
  background: var(--gold-soft);
  color: var(--gold);
}
.ff-room .reveal-card-bet.fake {
  background: var(--pink-soft);
  color: var(--pink);
}
.ff-room .reveal-card-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-primary);
}
.ff-room .reveal-card-actions {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.ff-room .quote-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
}
.ff-room .quote-btn:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.ff-room .quote-btn[data-marked="true"] {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal);
}
.ff-room .reveal-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
}
.ff-room .reveal-cta-hint {
  font-size: 13px;
  color: var(--text-muted);
  font-family: "JetBrains Mono", monospace;
}

/* ── Live debate view (chat + flip slot) ─────────────────────── */
.ff-room .live-chat-card {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
}
.ff-room .live-chat-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 14px;
}
.ff-room .chat-msg {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
}
.ff-room .chat-msg-author {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  font-weight: 600;
}
.ff-room .chat-msg-author.me {
  color: var(--gold);
}
.ff-room .chat-msg-time {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--text-faint);
  flex-shrink: 0;
}
.ff-room .chat-msg-body {
  color: var(--text-primary);
}
.ff-room .chat-input-row {
  display: flex;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.ff-room .chat-input {
  flex: 1;
  padding: 9px 12px;
  /* Dark: deep transparent inset against the chat panel.
   * Light: faint near-black wash — mirrors `.comment-input__textarea`
   * (`var(--surface-raised)`) so the field reads as an input box and
   * not solid grey under the light theme. */
  background: var(--dark, rgba(0, 0, 0, 0.3))
    var(--light, rgba(15, 15, 35, 0.04));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  outline: none;
}
.ff-room .chat-input:focus {
  border-color: var(--teal);
}
.ff-room .final-bet-bar {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  background: var(--purple-soft);
  border: 1px solid rgba(167, 139, 250, 0.4);
  border-radius: var(--r-lg);
  margin-top: 18px;
}
.ff-room .final-bet-bar.hidden {
  opacity: 0.4;
}
.ff-room .final-bet-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--purple);
  padding: 4px 8px;
  background: var(--surface);
  border: 1px solid rgba(167, 139, 250, 0.4);
  border-radius: 4px;
}
.ff-room .final-bet-text {
  font-size: 13px;
  color: var(--text-primary);
}
.ff-room .final-bet-text strong {
  font-family: "Orbitron", sans-serif;
}
.ff-room .final-bet-countdown {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--purple);
  font-variant-numeric: tabular-nums;
}
.ff-room .mini-btn {
  padding: 8px 14px;
  font-family: "Outfit", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
}
.ff-room .mini-btn.gold {
  background: var(--gold);
  color: #1a0a00;
  border-color: var(--gold);
}
.ff-room .mini-btn.pink {
  background: var(--pink);
  color: white;
  border-color: var(--pink);
}

/* ── Settlement view (banner + result table + essence) ───────── */
.ff-room .reveal-banner {
  position: relative;
  padding: 32px;
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(219, 39, 128, 0.18),
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(167, 139, 250, 0.14),
      transparent 50%
    ),
    linear-gradient(180deg, rgba(219, 39, 128, 0.06), var(--surface));
  border: 1px solid rgba(219, 39, 128, 0.3);
  border-radius: var(--r-xl);
  backdrop-filter: blur(18px);
  text-align: center;
  margin-bottom: 24px;
  overflow: hidden;
}
.ff-room .reveal-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03) 0,
    rgba(255, 255, 255, 0.03) 1px,
    transparent 1px,
    transparent 14px
  );
  pointer-events: none;
}
.ff-room .reveal-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.ff-room .reveal-verdict {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: 56px;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
  text-shadow: 0 0 40px rgba(219, 39, 128, 0.4);
}
.ff-room .reveal-verdict.fake {
  color: var(--pink);
}
.ff-room .reveal-verdict.real {
  color: var(--gold);
  text-shadow: 0 0 40px rgba(252, 179, 0, 0.4);
}
.ff-room .reveal-headline {
  font-size: 16px;
  color: var(--text-primary);
  margin: 0 0 18px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.ff-room .reveal-source {
  display: inline-block;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: "JetBrains Mono", monospace;
}
.ff-room .reveal-source a {
  color: var(--teal);
  text-decoration: none;
}
.ff-room .result-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
}
.ff-room .settlement-exit-row {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.ff-room .settlement-exit-row .btn {
  min-width: 220px;
}
.ff-room .result-table {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
}
.ff-room .result-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.ff-room .result-row:last-child {
  border-bottom: none;
}
.ff-room .result-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ff-room .result-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
}
.ff-room .result-judgement {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.ff-room .result-bet-side {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.ff-room .result-bet-side.real {
  background: var(--gold-soft);
  color: var(--gold);
}
.ff-room .result-bet-side.fake {
  background: var(--pink-soft);
  color: var(--pink);
}
.ff-room .result-delta {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}
.ff-room .result-delta.up {
  color: var(--gold);
}
.ff-room .result-delta.down {
  color: var(--pink);
}
.ff-room .insider-truth-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--teal-soft);
  color: var(--teal);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.ff-room .essence-card {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
}
.ff-room .formula-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
}
.ff-room .formula-row:last-child {
  border-bottom: none;
  padding-top: 12px;
  font-weight: 700;
}
.ff-room .formula-row .lbl {
  color: var(--text-muted);
}
.ff-room .formula-row .val {
  font-family: "JetBrains Mono", monospace;
  color: var(--text-primary);
}
.ff-room .formula-row.total .val {
  color: var(--gold);
  font-size: 16px;
}
.ff-room .essence-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.ff-room .essence-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  align-items: flex-start;
}
.ff-room .essence-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-strong);
  border-radius: 4px;
  display: grid;
  place-items: center;
  cursor: pointer;
  margin-top: 2px;
}
.ff-room .essence-checkbox[data-checked="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: #1a0a00;
}
.ff-room .essence-meta {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.ff-room .essence-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
}
.ff-room .essence-foot {
}

/* ─── Unified compose-page layout ──────────────────────────────
   Applies the post-edit composer style (right-pinned side panel,
   wide editor column, bottom in-flow toolbar, viewport-fit with no
   page scroll) to the sub-team broadcast / doc compose pages.
   Placed at end of file so it wins source-order ties against the
   per-page rules in the sub-team sections above. */
.sub-team-broadcast-compose,
.sub-team-doc-compose {
  /* Match composer-arena viewport-fit behaviour. dvh keeps the
     layout flush on mobile when the URL bar comes and goes. */
  min-height: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.sub-team-broadcast-compose .composer-page,
.sub-team-doc-compose .composer-page {
  max-width: none;
  margin: 0;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: 1fr;
  padding-top: 22px;
  padding-bottom: 8px;
}

.sub-team-broadcast-compose .composer,
.sub-team-doc-compose .composer {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  min-height: 0;
  height: 100%;
}

/* doc-compose has an in-flow .bottom-bar — pull it out of fixed
   positioning so composer-page naturally ends right above it. */
.sub-team-doc-compose > .bottom-bar {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  flex-shrink: 0;
}
/* broadcast's bottom-bar only carries mobile-only buttons (옵션 +
   publish). Hide on desktop where the topbar already exposes publish. */
.sub-team-broadcast-compose > .bottom-bar {
  display: none;
}
@media (max-width: 980px) {
  .sub-team-broadcast-compose > .bottom-bar {
    display: flex;
  }
}

/* Editor surface: drop the card chrome so the body sits on the
   page background like reports-edit. */
.sub-team-broadcast-compose .ratel-editor,
.sub-team-doc-compose .ratel-editor {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  flex: 1;
  min-height: 0;
}
.sub-team-broadcast-compose .ratel-editor:focus-within,
.sub-team-doc-compose .ratel-editor:focus-within {
  background: transparent;
  border: none;
}

/* Toolbar — sits inside the editor flex column as the LAST child
   (order: 5) so the writing area is above and the toolbar pill
   anchors to the bottom of the editor. Same shape as composer-arena. */
.sub-team-broadcast-compose .ratel-editor .re-toolbar,
.sub-team-doc-compose .ratel-editor .re-toolbar {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
  order: 5;
  align-self: center;
  flex-shrink: 0;
  width: min(1000px, 100%);
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: 4px;
  margin: 8px auto 0;
  padding: 8px 10px;
  gap: 4px;
  border: 1px solid var(--re-border-strong);
  border-radius: 14px;
  background: var(--re-toolbar-bg);
  backdrop-filter: blur(20px);
}
.sub-team-broadcast-compose .ratel-editor .re-toolbar__group + .re-toolbar__group,
.sub-team-doc-compose .ratel-editor .re-toolbar__group + .re-toolbar__group {
  border-left: none;
  margin-left: 0;
  padding-left: 4px;
}
.sub-team-broadcast-compose .ratel-editor .re-content,
.sub-team-doc-compose .ratel-editor .re-content {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  order: 1;
  padding: 8px 0 12px;
}
.sub-team-broadcast-compose .ratel-editor .re-statusbar,
.sub-team-doc-compose .ratel-editor .re-statusbar {
  display: none;
}
.sub-team-broadcast-compose .ratel-editor .re-block__menu,
.sub-team-doc-compose .ratel-editor .re-block__menu {
  top: auto;
  bottom: calc(100% + 6px);
}

@media (max-width: 980px) {
  /* On mobile the side-panel is the shared bottom-sheet drawer
     (position: fixed at bottom, translateY(100%) when closed). The
     composer + editor stay viewport-fit just like post_edit. The
     in-flow bottom-bar is pulled out via the rule below so the
     publish bar is always reachable. */
  .sub-team-broadcast-compose,
  .sub-team-doc-compose {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  .sub-team-broadcast-compose .composer-page,
  .sub-team-doc-compose .composer-page {
    padding-top: 14px;
    /* Mobile bottom-bar is ~52px (padding: 10px + button row). Reserve
       enough room so the editor body doesn't render behind it. */
    padding-bottom: 60px;
  }
  /* Pull both bottom-bars out of the flex flow on mobile so they
     overlay at the bottom edge instead of being shoved off-screen
     by the side-panel's drawer overlay. */
  .sub-team-broadcast-compose > .bottom-bar,
  .sub-team-doc-compose > .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
  }
  /* Hide the topbar publish button on mobile — moved into the
     bottom-bar as `bottom-bar__btn--mobile--primary`. */
  .sub-team-broadcast-compose .arena-topbar .topbar-btn--primary,
  .sub-team-doc-compose .arena-topbar .topbar-btn--primary {
    display: none;
  }
}

/* ── RoundNewsCollapsible — shared "re-read the news" card mounted by
 * game_room/component.rs on every stage after NewsReveal. Built on
 * native <details>/<summary>, lives inside `.ff-room` so it picks up
 * the surface/border tokens defined on `.ff-arcade`. */
.ff-room .news-collapsible {
  /* `display: block` + `gap: 0` override the global `.card` rule
   * which sets `display: flex; flex-direction: column; gap: 1.5rem`
   * and would otherwise insert a 24px flex-gap between the summary
   * row and the body. We keep the `card` class on the element so its
   * box-shadow / color / radius defaults still cascade. */
  display: block;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 14px;
}
.ff-room .news-collapsible > .news-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ff-room .news-collapsible > .news-summary::-webkit-details-marker {
  display: none;
}
.ff-room .news-collapsible .news-summary-label {
  flex-shrink: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.ff-room .news-collapsible .news-summary-title {
  flex: 1;
  font-family: "Orbitron", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ff-room .news-collapsible[open] .news-summary-title {
  white-space: normal;
}
.ff-room .news-collapsible .news-summary-toggle {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}
.ff-room .news-collapsible[open] .news-summary-toggle {
  transform: rotate(180deg);
}
.ff-room .news-collapsible .news-body {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
}
.ff-room .news-collapsible .news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.ff-room .news-collapsible .news-headline-full {
  font-family: "Orbitron", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 10px;
}
.ff-room .news-collapsible .news-excerpt {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 8px;
}
.ff-room .news-collapsible .news-source {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--text-faint);
}
.ff-room .news-collapsible .news-source-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  background: var(--text-faint);
  border-radius: 50%;
  align-self: center;
}

/* ── Mobile (≤720px) — game-room shell + stage timeline + per-stage
 * grids. Layout/sidebar baseline rules already live in the mobile
 * media query at line ~50125; this block layers the stage-step
 * compacting + per-view grid stacks on top so each round's content
 * actually fits a phone viewport. */
@media (max-width: 720px) {
  /* Hide the arcade hamburger when the user is inside a live round.
   * The drawer it controls is irrelevant during play — the stage
   * already owns the user's attention. Keeps the header just brand
   * + avatar so the chrome stays quiet. */
  .ff-arcade__top-bar[data-game-room="true"] .ff-arcade__menu-toggle {
    display: none;
  }

  /* Stage timeline → horizontal pill strip. The desktop component
   * renders each step as `dot + label-name + label-time`; on mobile
   * we collapse it to a single rounded pill (name only) and let the
   * row scroll horizontally.
   *
   * Selector specificity matters: the desktop rule is scoped to
   * `.ff-room .stage-timeline.stage-timeline-global` (0,3,0), so the
   * mobile override has to match that depth — a bare
   * `.stage-timeline-global` (0,2,0) loses the cascade.
   */
  .ff-room .stage-timeline.stage-timeline-global {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    gap: 6px;
    padding: 8px;
    scrollbar-width: none;
  }
  .ff-room .stage-timeline.stage-timeline-global::-webkit-scrollbar {
    display: none;
  }
  .ff-room .stage-timeline-global .stage-step {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--text-muted);
    /* Strip the desktop hover lift — touch devices stick on it. */
    transition: none;
  }
  /* The desktop layout draws a vertical connector line between
   * consecutive steps with `::after`. It overshoots into the
   * horizontal pill strip on mobile, so hide it outright. */
  .ff-room .stage-timeline-global .stage-step:not(:last-child)::after {
    display: none;
  }
  .ff-room .stage-timeline-global .stage-step[data-state="active"] {
    background: var(--gold-soft);
    border-color: rgba(252, 179, 0, 0.4);
    color: var(--gold);
  }
  .ff-room .stage-timeline-global .stage-step[data-state="done"] {
    color: var(--text-faint);
  }
  .ff-room .stage-dot {
    width: 16px;
    height: 16px;
    font-size: 9px;
    background: transparent;
    border: 1px solid currentColor;
    box-shadow: none;
  }
  .ff-room .stage-step[data-state="active"] .stage-dot {
    background: var(--gold);
    color: #1a0a00;
    border-color: var(--gold);
    box-shadow: none;
  }
  .ff-room .stage-step[data-state="done"] .stage-dot {
    background: transparent;
    color: var(--text-faint);
    border-color: var(--text-faint);
  }
  /* Drop the time sublabel — too noisy in a pill. */
  .ff-room .stage-label-time {
    display: none;
  }
  .ff-room .stage-label-name {
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* Timer card → compact one-row pill. Override desktop padding /
   * text-align / circular-ring layout.
   *
   * Selectors are scoped through `.sidebar` to match the desktop
   * `.ff-room .sidebar .timer-card .timer-ring` (0,3,0) cascade.
   * Without that depth the desktop rule keeps the 120×120 ring on
   * mobile and the card balloons to ~150px tall. */
  .ff-room .sidebar .timer-card {
    padding: 10px 14px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .ff-room .sidebar .timer-card .section-label,
  .ff-room .sidebar .timer-card .timer-deadline,
  .ff-room .sidebar .timer-card .timer-display-sub {
    display: none;
  }
  .ff-room .sidebar .timer-card .timer-stage {
    font-family: "Orbitron", sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text-primary);
    margin: 0;
  }
  /* Replace the SVG ring with bare countdown digits. */
  .ff-room .sidebar .timer-card .timer-ring {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
  }
  .ff-room .sidebar .timer-card .timer-ring svg {
    display: none;
  }
  .ff-room .sidebar .timer-card .timer-display {
    position: static;
    display: inline-block;
  }
  .ff-room .sidebar .timer-card .timer-display-time {
    font-family: "JetBrains Mono", monospace;
    font-size: 20px;
    font-weight: 700;
    color: var(--gold);
  }

  /* Per-stage grids — each desktop layout collapses to a single
   * column on mobile so cards stack vertically and never overflow
   * a phone width. `minmax(0, 1fr)` (not bare `1fr`) prevents the
   * grid column from blowing past the viewport when a child has
   * nowrap or long content; `min-width: 0` on grid items extends
   * the same fix down into flex/grid descendants. */
  .ff-room .round-grid,
  .ff-room .bet-grid,
  .ff-room .reveal-grid,
  .ff-room .reason-grid,
  .ff-room .result-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
  }
  .ff-room .round-grid > *,
  .ff-room .bet-grid > *,
  .ff-room .reveal-grid > *,
  .ff-room .reason-grid > *,
  .ff-room .result-grid > * {
    min-width: 0;
  }

  /* News-reveal stage cards (NewsCard + PlayersCard) — tighten the
   * desktop 28px / 22px padding down to phone spacing and shrink the
   * headline from 24px so it fits without horizontal scroll. */
  .ff-room .news-card,
  .ff-room .players-card {
    padding: 16px;
    max-width: 100%;
    box-sizing: border-box;
  }
  .ff-room .news-card {
    margin-bottom: 12px;
  }
  .ff-room .news-headline {
    font-size: 18px;
    margin-bottom: 12px;
  }
  .ff-room .news-excerpt {
    font-size: 13px;
    margin-bottom: 14px;
    padding-left: 10px;
  }
  .ff-room .news-source {
    flex-wrap: wrap;
    font-size: 10px;
    margin-bottom: 10px;
  }
  .ff-room .news-meta {
    gap: 6px;
  }
  .ff-room .news-cta {
    margin-left: 0;
    padding: 6px 10px;
    font-size: 11px;
  }

  /* Reasoning-reveal stage — camp-bar (REAL vs FAKE summary).
   * Desktop puts the label + count on the same row via `space-between`
   * inside `.camp-side-head`. On a 358px phone width each camp side
   * shrinks to ~120px of inner space, so the 16px Orbitron label +
   * "{count}명 · {rp} RP" count don't fit a single row — text wraps
   * or clips. Switch to a column stack and trim font sizes to match
   * the mobile mockup. */
  .ff-room .camp-bar {
    gap: 8px;
    margin-bottom: 12px;
  }
  .ff-room .camp-side {
    padding: 10px 12px;
    gap: 8px;
    border-radius: var(--r-md);
  }
  .ff-room .camp-side-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .ff-room .camp-label {
    font-size: 13px;
    letter-spacing: 0.04em;
  }
  .ff-room .camp-count {
    font-size: 11px;
  }
  .ff-room .camp-vs {
    padding: 0 4px;
    font-size: 11px;
  }
  .ff-room .camp-avatars {
    gap: 4px;
  }

  /* Text-wrap safety net — long content (URLs, dense Korean blobs,
   * pasted single tokens) was pushing reason textarea, chat bubbles,
   * and essence rows past their parent card. `overflow-wrap:
   * anywhere` + `word-break: break-word` force a break, and
   * `min-width: 0` on flex/grid children unsticks the cascade. */
  .ff-room .reason-textarea {
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .ff-room .chat-msg {
    max-width: 100%;
    min-width: 0;
  }
  .ff-room .chat-msg-body {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
    max-width: 100%;
  }
  .ff-room .essence-item {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ff-room .essence-item > * {
    min-width: 0;
  }
  .ff-room .essence-text {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .ff-room .reveal-card {
    max-width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
  }
  .ff-room .reveal-card-head {
    min-width: 0;
    gap: 8px;
  }
  .ff-room .reveal-card-text {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
    min-width: 0;
  }

  /* Pad the room wrapper itself down so the stage-strip + cards
   * have breathing room above the device's bottom safe-area. */
  .ff-room {
    padding-bottom: 24px;
  }
}


/* === src/features/spaces/pages/report/views/list_page === */
/* Direct port of assets/design/reports/reports-list.html — class names
   preserved verbatim, all rules scoped under `.reports-arena` so the
   carousel/topbar primitives don't collide with the existing
   `.team-arena .carousel-track` (same class name, different page).
   The aurora wave + scroll-snap "active card" scaling from the mock
   are intentionally dropped for the initial port; cards render at
   full opacity in a horizontally-scrollable strip. */
.reports-arena {
  /* Tokens. The space-toggle pattern (`var(--dark, X) var(--light, Y)`)
     leans on the `--dark` / `--light` custom properties that
     `dx-components-theme.css` flips on `html[data-theme=...]` — at
     runtime one branch resolves to the value, the other to a space,
     so only the active theme's color is applied. The accent
     (`--report-color`) and its glow are deliberately NOT toggled —
     the purple stays identical in both themes by design. */
  --bg-void: var(--dark, #06060e) var(--light, #f4f3ef);
  --bg-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.78));
  --bg-glass-hover: var(--dark, rgba(20, 20, 40, 0.80)) var(--light, rgba(255, 255, 255, 0.92));
  --border-subtle: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --border-strong: var(--dark, rgba(255, 255, 255, 0.12)) var(--light, rgba(0, 0, 0, 0.14));
  --text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --text-dim: var(--dark, #55556a) var(--light, #9999aa);
  --card-shadow: var(--dark, rgba(0, 0, 0, 0.5)) var(--light, rgba(0, 0, 0, 0.10));
  --card-shadow-soft: var(--dark, rgba(0, 0, 0, 0.45)) var(--light, rgba(0, 0, 0, 0.08));
  /* Modal scrim is always a real dim — even in light mode the modal
     must visually pop out, so we tint with dark (not pale) overlay.
     Panel keeps a strong contrast: deep glass in dark, bright white
     card with a hairline border in light. */
  --modal-scrim: var(--dark, rgba(4, 4, 12, 0.65)) var(--light, rgba(20, 20, 35, 0.45));
  --modal-panel: var(--dark, linear-gradient(160deg, rgba(22, 22, 38, 0.97), rgba(10, 10, 20, 0.99))) var(--light, linear-gradient(160deg, #ffffff, #fafaf6));
  --menu-panel: var(--dark, linear-gradient(160deg, rgba(22, 22, 38, 0.96), rgba(10, 10, 20, 0.98))) var(--light, #ffffff);
  /* Danger pink reads on glass-dark, but vanishes on white — switch
     to a strong rose-red on light so 삭제하기 is unmistakably visible. */
  --danger-fg: var(--dark, #e7a8a8) var(--light, #b91c1c);
  --danger-fg-hover: var(--dark, #f5b5b5) var(--light, #991b1b);
  --accent-gold: #fcb300;
  --accent-teal: #6eedd8;
  --report-color: #a855f7;
  --report-bg: rgba(168, 85, 247, 0.10);
  --report-border: rgba(168, 85, 247, 0.24);
  --report-glow: rgba(168, 85, 247, 0.18);
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Outfit', sans-serif;

  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
}
.reports-arena::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(168, 85, 247, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 120%, rgba(110, 237, 216, 0.025) 0%, transparent 50%);
  z-index: 0;
  pointer-events: none;
}

/* Topbar */
.reports-arena .reports-topbar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  flex-shrink: 0;
}
.reports-arena .reports-topbar__brand { display: flex; align-items: center; gap: 12px; }
.reports-arena .reports-topbar__back {
  width: 36px;
  height: 36px;
  /* Fixed-size flex child: without this the default `flex-shrink: 1` lets a
     long sibling title squash the square button into an oval. */
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.18s;
}
.reports-arena .reports-topbar__back:hover {
  color: var(--accent-gold);
  border-color: rgba(252, 179, 0, 0.28);
}
.reports-arena .reports-topbar__back svg { width: 14px; height: 14px; }
.reports-arena .reports-topbar__divider { width: 1px; height: 20px; background: var(--border-subtle); }
.reports-arena .reports-topbar__logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--report-color), #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.reports-arena .reports-topbar__title-col { display: flex; flex-direction: column; gap: 1px; }
.reports-arena .reports-topbar__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.reports-arena .reports-topbar__handle {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}
.reports-arena .reports-topbar__actions { display: flex; gap: 8px; }
.reports-arena .reports-topbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.18s;
  text-decoration: none;
}
.reports-arena .reports-topbar__btn:hover {
  color: var(--text-primary);
  border-color: var(--report-border);
}
.reports-arena .reports-topbar__btn svg { width: 14px; height: 14px; }
.reports-arena .reports-topbar__btn--primary {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(168, 85, 247, 0.06));
  border-color: rgba(168, 85, 247, 0.38);
  color: var(--report-color);
}
.reports-arena .reports-topbar__btn--primary:hover { box-shadow: 0 0 22px var(--report-glow); }

/* Section label + stats */
.reports-arena .section-label {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 18px 28px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.reports-arena .section-label__dash {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--text-dim), transparent);
}
.reports-arena .section-label__title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.reports-arena .section-label__title strong { color: var(--report-color); font-weight: 700; }
.reports-arena .section-stats {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 8px 28px 0;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.reports-arena .section-stats span strong {
  color: var(--text-muted);
  font-size: 12px;
  margin-right: 4px;
}

/* Filter chips */
.reports-arena .reports-filters {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 16px 28px 0;
}
.reports-arena .reports-chip {
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.18s;
}
.reports-arena .reports-chip:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.reports-arena .reports-chip[aria-selected="true"] {
  color: var(--report-color);
  border-color: rgba(168, 85, 247, 0.45);
  background: rgba(168, 85, 247, 0.08);
}

/* Carousel */
.reports-arena .carousel-wrapper {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.reports-arena .carousel-wrapper::before,
.reports-arena .carousel-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 220px;
  z-index: 15;
  pointer-events: none;
}
.reports-arena .carousel-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-void), transparent);
}
.reports-arena .carousel-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-void), transparent);
}
.reports-arena .carousel-track {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 60px 0;
  /* Calc-based edge padding lets the first / last card scroll all
     the way to viewport center — same trick as space-arena. */
  padding-left: calc(50vw - 200px);
  padding-right: calc(50vw - 200px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.reports-arena .carousel-track::-webkit-scrollbar { display: none; }

/* Report card — defaults to dim/scaled/blurred; carousel JS toggles
   `.active` on whichever card is closest to viewport center. */
.reports-arena .report-card {
  flex-shrink: 0;
  width: 400px;
  min-height: 420px;
  padding: 26px 26px 22px;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: pointer;
  scroll-snap-align: center;
  position: relative;
  overflow: hidden;
  /* Spotlight effect on desktop — active card stands out, siblings
     dim. Mobile keeps every card uniform (the same effect at 84vw
     card width on a phone screen ate too much of the carousel and
     read as "broken edges" rather than spotlight focus). The mobile
     override lives in the `@media (max-width: 500px)` block below. */
  transform: scale(0.82);
  opacity: 0.4;
  filter: blur(4px);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  color: inherit;
}
.reports-arena .report-card[hidden] { display: none !important; }
.reports-arena .report-card.active {
  transform: scale(1.03);
  opacity: 1;
  filter: blur(0);
  box-shadow: 0 12px 60px var(--card-shadow), 0 0 50px var(--report-glow);
  border-color: var(--report-border);
}
/* Aurora wave — only animates on the active card. */
.reports-arena .report-card__wave {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 0;
}
.reports-arena .report-card.active .report-card__wave { opacity: 1; }
.reports-arena .report-card__wave::before,
.reports-arena .report-card__wave::after {
  content: '';
  position: absolute;
  inset: -40%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.reports-arena .report-card__wave::before {
  background:
    radial-gradient(ellipse 55% 40% at 20% 30%, rgba(168, 85, 247, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 75% 65%, rgba(168, 85, 247, 0.06) 0%, transparent 65%);
  animation: reports-wave-drift-a 7s ease-in-out infinite;
}
.reports-arena .report-card__wave::after {
  background:
    radial-gradient(ellipse 50% 40% at 70% 25%, rgba(168, 85, 247, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 25% 80%, rgba(168, 85, 247, 0.12) 0%, transparent 65%);
  animation: reports-wave-drift-b 9s ease-in-out infinite;
}
@keyframes reports-wave-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.9; }
  33% { transform: translate3d(6%, -4%, 0) rotate(8deg); opacity: 1; }
  66% { transform: translate3d(-4%, 5%, 0) rotate(-6deg); opacity: 0.85; }
}
@keyframes reports-wave-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 0.75; }
  40% { transform: translate3d(-5%, 4%, 0) rotate(-10deg) scale(1.05); opacity: 0.95; }
  70% { transform: translate3d(5%, -3%, 0) rotate(7deg) scale(0.98); opacity: 0.8; }
}
/* Stationary tint disabled — was an idle purple wash that read as
   "faded corner" once the spotlight scale/opacity dimming was
   removed; better to keep every card visually uniform. */
.reports-arena .report-card::before { display: none; }
.reports-arena .report-card > *:not(.report-card__wave) {
  position: relative;
  z-index: 1;
}
/* Top row sits in its own stacking context above the rest of the
   card body — otherwise the dropdown menu (`position: absolute` inside
   `.report-card__menu-wrap`) loses to later siblings like
   `.report-card__identity` whose text would visually cover the menu
   even though its own z-index is only 30 within its parent.
   The selector matches the specificity of the `report-card > *`
   wildcard above (3 class selectors), so this z-index actually wins
   the cascade — using just `.reports-arena .report-card__top` is
   one class lighter and gets overridden back to z-index: 1. */
.reports-arena .report-card > .report-card__top {
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.reports-arena .report-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.reports-arena .report-card__badge svg { width: 11px; height: 11px; }
.reports-arena .report-card__badge--published {
  background: rgba(110, 237, 216, 0.10);
  border: 1px solid rgba(110, 237, 216, 0.32);
  color: var(--accent-teal);
}
.reports-arena .report-card__badge--draft {
  background: rgba(252, 179, 0, 0.10);
  border: 1px solid rgba(252, 179, 0, 0.32);
  color: var(--accent-gold);
}
.reports-arena .report-card__menu-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
}
.reports-arena .report-card__menu-btn:hover {
  color: var(--text-primary);
  background: var(--dark, rgba(255, 255, 255, 0.04)) var(--light, rgba(0, 0, 0, 0.04));
}
.reports-arena .report-card__menu-btn svg { width: 14px; height: 14px; }
.reports-arena .report-card__identity {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.reports-arena .report-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--report-bg);
  border: 1px solid var(--report-border);
  color: var(--report-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.reports-arena .report-card__icon svg { width: 18px; height: 18px; }
.reports-arena .report-card__id {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.reports-arena .report-card__category {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--report-color);
}
.reports-arena .report-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.reports-arena .report-card__desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.reports-arena .report-card__spacer { flex: 1; }
.reports-arena .report-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.ff-room .essence-foot-label {
  font-size: 12px;
  color: var(--text-muted);
  font-family: "JetBrains Mono", monospace;
}

/* Placeholder shown when a stage's data hasn't loaded yet. */
.ff-room .ff-room__placeholder {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-faint);
  font-style: italic;
}

/* === src/features/arcade/layout === */
/* Outer arcade wrapper — owns the page-level CSS variables, max-width,
 * padding, and font. Every arcade page (home, matching, game room)
 * renders inside this. Internal `.ff-room`, `.ff-home`, `.ff-matching`
 * containers are passthrough — they no longer redeclare the vars or
 * apply outer container styling. */
.ff-arcade {
  /* Token table calibrated against the mockups:
   *   dark = `shared.css`        (deep glassy panels)
   *   light = `shared-light.css` (clean white + tuned-down accents)
   * Keep this block in sync with the matching block in `.ff-room`. */
  --bg: var(--dark, #07070f) var(--light, #f6f6fb);
  --surface: var(--dark, rgba(18, 18, 32, 0.72))
    var(--light, rgba(255, 255, 255, 0.82));
  --surface-2: var(--dark, rgba(28, 28, 46, 0.6))
    var(--light, rgba(244, 244, 250, 0.72));
  --surface-3: var(--dark, rgba(38, 38, 58, 0.5))
    var(--light, rgba(232, 232, 242, 0.68));
  --border: var(--dark, rgba(255, 255, 255, 0.08))
    var(--light, rgba(15, 15, 35, 0.08));
  --border-strong: var(--dark, rgba(255, 255, 255, 0.16))
    var(--light, rgba(15, 15, 35, 0.18));
  --text-primary: var(--dark, #f0f0f5) var(--light, #14141e);
  --text-muted: var(--dark, #8a8aa6) var(--light, #5a5a72);
  --text-faint: var(--dark, #5a5a78) var(--light, #9a9ab2);

  /* Accent hues swap between dark/light: light theme uses
   * tuned-down chroma so text reads against white. The `*-bright`
   * variants stay constant and are used for filled surfaces (buttons,
   * pills, brand gradients) where the saturated hue is meant to pop. */
  --gold: var(--dark, #fcb300) var(--light, #c98300);
  --gold-bright: #fcb300;
  --gold-soft: var(--dark, rgba(252, 179, 0, 0.12))
    var(--light, rgba(252, 179, 0, 0.16));
  --pink: var(--dark, #db2780) var(--light, #c41f6d);
  --pink-bright: #db2780;
  --pink-soft: var(--dark, rgba(219, 39, 128, 0.12))
    var(--light, rgba(219, 39, 128, 0.10));
  --teal: var(--dark, #6eedd8) var(--light, #0e9b87);
  --teal-bright: var(--dark, #6eedd8) var(--light, #14c3a8);
  --teal-soft: var(--dark, rgba(110, 237, 216, 0.12))
    var(--light, rgba(20, 195, 168, 0.14));
  --purple: var(--dark, #a78bfa) var(--light, #6747e0);
  --purple-bright: var(--dark, #a78bfa) var(--light, #8a6df0);
  --purple-soft: var(--dark, rgba(167, 139, 250, 0.14))
    var(--light, rgba(138, 109, 240, 0.12));

  --shadow-sm: var(--dark, 0 2px 8px rgba(0, 0, 0, 0.3))
    var(--light, 0 2px 8px rgba(15, 15, 40, 0.06));
  --shadow-md: var(--dark, 0 8px 24px rgba(0, 0, 0, 0.4))
    var(--light, 0 8px 24px rgba(15, 15, 40, 0.08));
  --shadow-lg: var(--dark, 0 24px 64px rgba(0, 0, 0, 0.55))
    var(--light, 0 24px 64px rgba(15, 15, 40, 0.12));

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* Body is globally `overflow: hidden; height: 100dvh`, so each
   * layout has to claim its own scroll container. ArcadeLayout fills
   * the viewport and scrolls internally; horizontal centering done via
   * padding (auto-margin would need a non-fixed width). */
  position: fixed;
  inset: 0;
  z-index: 0;
  max-width: none;
  margin: 0;
  padding: 24px max(32px, calc((100vw - 1280px) / 2)) 80px;
  overflow-y: auto;
  background: var(--bg);
  color: var(--text-primary);
  font-family: "Outfit", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* Soft radial accents — mirrors mockup `body::before`. Lives behind
 * the arcade content so cards still pop on light/dark theme. Light
 * theme uses warmer, more saturated hues per shared-light.css so the
 * wash registers against the white page; dark keeps the muted glow. */
.ff-arcade::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    var(--dark,
      radial-gradient(900px 700px at 12% 8%, rgba(252, 179, 0, 0.1), transparent 60%),
      radial-gradient(800px 600px at 88% 12%, rgba(167, 139, 250, 0.1), transparent 60%),
      radial-gradient(1100px 800px at 50% 110%, rgba(110, 237, 216, 0.08), transparent 60%))
    var(--light,
      radial-gradient(900px 700px at 12% 8%, rgba(252, 179, 0, 0.18), transparent 60%),
      radial-gradient(800px 600px at 88% 12%, rgba(138, 109, 240, 0.14), transparent 60%),
      radial-gradient(1100px 800px at 50% 110%, rgba(20, 195, 168, 0.12), transparent 60%));
  pointer-events: none;
  z-index: -1;
}

/* Faint scanline overlay — mockup `body::after`. Adds CRT-style
 * texture to the arcade backdrop. */
.ff-arcade::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--dark,
      linear-gradient(transparent 0px, transparent 2px, rgba(255, 255, 255, 0.012) 3px, transparent 4px))
    var(--light,
      linear-gradient(transparent 0px, transparent 2px, rgba(15, 15, 35, 0.018) 3px, transparent 4px));
  background-size: 100% 4px;
  pointer-events: none;
  z-index: -1;
}

.ff-arcade__top-bar {
  /* extends .top-bar — selector composition isn't needed since both
   * are applied to the same element, but we keep this hook so future
   * arcade-specific top-bar tweaks (e.g., chip-button placement) have
   * a place to live without disturbing other `.top-bar` consumers. */
  margin-bottom: 22px;
}

/* ArcadeLayout top-bar — mirrors `.ff-room` so the mockup parity
 * holds inside the `.ff-arcade` container too. */
.ff-arcade .top-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 22px;
  padding: 16px 20px;
  background: var(--surface);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.ff-arcade .top-nav {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.ff-arcade .top-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-family: "Outfit", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 0.15s;
}
.ff-arcade .top-nav-btn:hover {
  color: var(--text-primary);
  background: var(--surface-2);
}
.ff-arcade .top-nav-btn[aria-selected="true"] {
  background: var(--gold-soft);
  color: var(--gold);
  border-color: rgba(252, 179, 0, 0.3);
}
.ff-arcade .top-nav-btn-icon {
  font-size: 14px;
}
.ff-arcade .brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ff-arcade .brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold), var(--pink));
  display: grid;
  place-items: center;
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: #1a0a00;
  box-shadow: 0 4px 16px rgba(252, 179, 0, 0.35);
}
.ff-arcade .brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ff-arcade .brand-name {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
}
.ff-arcade .brand-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-family: "JetBrains Mono", monospace;
}
.ff-arcade .user-stats {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin-left: auto;
}
.ff-arcade .stat-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
}
.ff-arcade .stat-chip.gold {
  border-color: rgba(252, 179, 0, 0.3);
  background: var(--gold-soft);
  color: var(--gold);
}
.ff-arcade .stat-chip-icon {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
}
.ff-arcade .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5b3aaf, #db2780);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  color: white;
  border: 2px solid var(--border-strong);
}

.ff-arcade__main {
  /* No styling — pages bring their own. Hook stays for future
   * scroll-restoration or breadcrumb additions. */
}

/* Admin "Create round" pill — uses the Button component (Text style)
 * so the wrapper is the shared <Button>, then this class overrides
 * the pink admin tint. Doubled selector for specificity over the
 * Tailwind hover/disabled utilities baked into ButtonStyle::Text. */
.ff-arcade .ff-arcade__admin-cta,
.ff-arcade .ff-arcade__admin-cta:hover {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid rgba(219, 39, 128, 0.45);
  color: var(--pink);
  background: var(--pink-soft);
  border-radius: var(--r-md);
  font-family: "Outfit", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ff-arcade .ff-arcade__admin-cta:hover {
  background: rgba(219, 39, 128, 0.16);
  border-color: rgba(219, 39, 128, 0.6);
}

.ff-arcade__chip-btn {
  border: none;
  font: inherit;
  cursor: pointer;
  transition: all 0.15s;
}

.ff-arcade__chip-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(252, 179, 0, 0.18);
}

/* Hamburger toggle — modeled on the home arena's `hud-btn--primary`
 * (`home-btn-menu` in `views/index/component.rs`). 42px glass square
 * with a gold-tinted gradient + thin border, hover floats a sliver
 * and adds a gold glow, label sits below and fades in on hover. The
 * `display: none` default keeps it desktop-hidden until the matching
 * media query below flips it on. */
.ff-arcade__menu-toggle {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: linear-gradient(
    135deg,
    rgba(252, 179, 0, 0.18),
    rgba(252, 179, 0, 0.06)
  );
  border: 1px solid rgba(252, 179, 0, 0.3);
  border-radius: 11px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.ff-arcade__menu-toggle svg {
  width: 18px;
  height: 18px;
  color: var(--gold-bright);
  transition: color 0.2s;
}

.ff-arcade__menu-toggle:hover {
  border-color: rgba(252, 179, 0, 0.45);
  box-shadow: 0 0 20px rgba(252, 179, 0, 0.25);
  transform: translateY(-1px);
}

.ff-arcade__menu-toggle[aria-expanded="true"] {
  border-color: rgba(252, 179, 0, 0.55);
  box-shadow: 0 0 18px rgba(252, 179, 0, 0.2);
}

/* Hover label — same Orbitron caps treatment as home-arena hud-btn,
 * positioned outside the button so it doesn't compete with the SVG. */
.ff-arcade__menu-toggle .hud-btn__label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-family: "Orbitron", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.ff-arcade__menu-toggle:hover .hud-btn__label {
  opacity: 1;
}

.ff-arcade__menu-scrim {
  position: fixed;
  inset: 0;
  background: rgba(7, 7, 15, 0.6);
  backdrop-filter: blur(4px);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.ff-arcade__menu-scrim[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

.ff-arcade__menu-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(280px, 80vw);
  background: var(--surface);
  backdrop-filter: blur(20px);
  border-left: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  z-index: 901;
  padding: 64px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform: translateX(100%);
  /* Always mounted so the slide-in/out transition has both endpoints
   * to animate between. `visibility` + `pointer-events` keep the
   * closed drawer out of the tab order. */
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
}

.ff-arcade__menu-drawer[data-open="true"] {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.2s ease, visibility 0s linear 0s;
}

.ff-arcade__menu-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ff-arcade__menu-nav .top-nav-btn,
.ff-arcade__menu-nav .ff-arcade__admin-cta,
.ff-arcade__menu-nav .stat-chip {
  width: 100%;
  justify-content: flex-start;
  padding: 12px 14px;
  font-size: 14px;
  border-radius: var(--r-md);
}

/* The chip pill is normally a rounded 999px button — inside the
 * drawer it sits next to the nav links, so square it off and align
 * the icon + label to the leading edge for a row that matches the
 * surrounding entries. */
.ff-arcade__menu-nav .ff-arcade__chip-btn {
  border-radius: var(--r-md);
}
.ff-arcade__menu-nav .ff-arcade__chip-btn:hover {
  transform: none;
  box-shadow: none;
  background: rgba(252, 179, 0, 0.16);
}

/* Mobile (≤720px) — collapse the inline nav into the drawer, drop the
 * sub-line + admin CTA label, and tighten the rest of the top bar so
 * everything fits in a phone-width header. */
@media (max-width: 720px) {
  .ff-arcade {
    padding: 12px 16px 64px;
    font-size: 14px;
  }

  .ff-arcade__top-bar {
    margin-bottom: 14px;
  }

  .ff-arcade .top-bar {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: 10px 12px;
  }

  .ff-arcade .brand {
    gap: 10px;
  }
  .ff-arcade .brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 14px;
  }
  .ff-arcade .brand-name {
    font-size: 12px;
    letter-spacing: 0.06em;
  }
  /* Drop the sub-label entirely on mobile — too noisy for a 360px header. */
  .ff-arcade .brand-sub {
    display: none;
  }

  /* Hide the inline desktop tab nav; the drawer takes over. The
   * drawer-internal `.top-nav-btn`s stay visible because their parent
   * is `.ff-arcade__menu-nav`, not `.ff-arcade > .top-bar`. */
  .ff-arcade > .top-bar > .top-nav {
    display: none;
  }

  .ff-arcade .user-stats {
    gap: 8px;
  }

  /* Admin CTA + chip pill live in the drawer on mobile, so hide them
   * from the header entirely. The drawer renders its own instances of
   * both — keeping them in the header on mobile would just duplicate
   * the controls and re-introduce the overflow this fix targets. */
  .ff-arcade__top-bar .ff-arcade__admin-cta,
  .ff-arcade__top-bar .ff-arcade__chip-btn {
    display: none;
  }

  .ff-arcade .avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .ff-arcade__menu-toggle {
    display: inline-flex;
  }
}

/* === src/features/arcade/components/exchange_modal === */
.ff-arcade__modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(7, 7, 15, 0.7);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  z-index: 1000;
  animation: ff-modal-fade 0.18s ease;
}

@keyframes ff-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ff-arcade__modal-card {
  width: min(520px, 92vw);
  padding: 28px 28px 22px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  font-family: "Outfit", sans-serif;
  font-size: 15px;
  animation: ff-modal-rise 0.22s ease;
}

@keyframes ff-modal-rise {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.ff-arcade__modal-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
}

.ff-arcade__modal-row:last-of-type {
  border-bottom: none;
}

.ff-arcade__modal-label {
  color: var(--text-muted);
}

.ff-arcade__modal-value {
  font-family: "JetBrains Mono", monospace;
  color: var(--text-primary);
}

.ff-arcade__modal-value--accent {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--gold);
}

.ff-arcade__modal-input {
  width: 100%;
  padding: 10px 14px;
  /* Dark: deep inset against the modal surface.
   * Light: faint near-black wash so the field reads against a white
   * modal card. The previous hard-coded `rgba(0,0,0,0.25)` rendered
   * as solid grey under the light theme. */
  background: var(--dark, rgba(0, 0, 0, 0.25))
    var(--light, rgba(15, 15, 35, 0.05));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-family: "JetBrains Mono", monospace;
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s;
}

.ff-arcade__modal-input:focus {
  border-color: var(--gold);
}

.ff-arcade__modal-success {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(110, 237, 216, 0.08);
  border: 1px solid rgba(110, 237, 216, 0.25);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--teal);
}

/* Mobile / touch (`hover: none`) — undo the sticky `:hover` look on
 * arcade buttons. On touch devices, `:hover` stays applied after a
 * tap and only clears when the user taps somewhere else, leaving the
 * modal confirm/cancel and the settlement exit ("정산완료 → 홈으로")
 * in a permanent hover appearance. These reset rules pull each
 * `:hover` selector back to the same paint as its base state under
 * `hover: none`. */
@media (hover: none) {
  /* Exchange modal — Confirm + Cancel both go through the global
   * `.btn` styles, which paint gold border/text on hover. */
  .ff-arcade__modal-card .btn:hover {
    border-color: var(--btn-border);
    color: var(--btn-text);
    background: transparent;
  }

  /* Game-room primary button (used by `.settlement-exit-row`). The
   * base rule already sets the gold background; only `transform` and
   * `box-shadow` change on hover, so reset just those. */
  .ff-room .btn-primary:hover:not(:disabled) {
    transform: none;
    box-shadow: 0 4px 16px rgba(252, 179, 0, 0.25);
  }
  .ff-room .btn-ghost:hover:not(:disabled) {
    background: var(--surface-2);
    border-color: var(--border);
  }
}

/* === src/features/arcade/pages/home === */
.ff-home .lobby-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
}

.ff-home .featured {
  position: relative;
  padding: 36px 32px;
  /* Light theme bumps the radial wash to 0.22/0.18 with the
   * light-palette purple so the accent reads against white;
   * dark stays at 0.18/0.18 with the dark-palette purple. */
  background:
    var(--dark,
      radial-gradient(circle at 90% 0%, rgba(252, 179, 0, 0.18), transparent 55%),
      radial-gradient(circle at 0% 100%, rgba(167, 139, 250, 0.18), transparent 55%))
    var(--light,
      radial-gradient(circle at 90% 0%, rgba(252, 179, 0, 0.22), transparent 55%),
      radial-gradient(circle at 0% 100%, rgba(138, 109, 240, 0.18), transparent 55%)),
    var(--surface);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.ff-home .featured::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Faint diagonal hatching for arcade texture. Dark = white-on-dark,
   * light = dark-on-white so the pattern stays visible on both. */
  background-image: var(--dark,
      repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 12px))
    var(--light,
      repeating-linear-gradient(45deg, rgba(15, 15, 35, 0.025) 0, rgba(15, 15, 35, 0.025) 1px, transparent 1px, transparent 12px));
  pointer-events: none;
}

.ff-home .featured > * {
  position: relative;
}

.ff-home .featured-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--gold);
  color: #1a0a00;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 18px;
}

.ff-home .featured-tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1a0a00;
  animation: ff-home-pulse 1.6s ease-in-out infinite;
}

@keyframes ff-home-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.ff-home .featured-title {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: 38px;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
  background: linear-gradient(120deg, #fff 0%, #fcb300 60%, #db2780 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Light theme rebuilds the gradient with the tuned-down `--gold`
 * (#c98300) + `--pink` (#c41f6d) hues defined for the light palette
 * (per shared-light.css). White-on-white would kill the left half
 * of the headline. */
html[data-theme="light"] .ff-home .featured-title {
  background: linear-gradient(120deg, #14141e 0%, #c98300 60%, #c41f6d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ff-home .featured-tagline {
  font-size: 16px;
  color: var(--text-muted);
  margin: 0 0 24px;
  max-width: 480px;
}

.ff-home .featured-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.ff-home .meta-cell {
  padding: 12px 14px;
  /* Dark: deep inset against the surface card.
   * Light: 4% near-black wash per shared-light.css — reads as a
   * neutral inner panel that matches the page typography color. */
  background: var(--dark, rgba(0, 0, 0, 0.3))
    var(--light, rgba(15, 15, 35, 0.04));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.ff-home .meta-cell-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.ff-home .meta-cell-value {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--text-primary);
}

.ff-home .meta-cell-value .accent { color: var(--gold); }
.ff-home .meta-cell-value .teal { color: var(--teal); }

.ff-home .featured-cta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.ff-home .featured-status {
  font-size: 13px;
  color: var(--text-muted);
  font-family: "JetBrains Mono", monospace;
}

.ff-home .featured-status .green {
  color: var(--teal);
}

.ff-home .lobby-side {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ff-home .my-stats-card,
.ff-home .history-card {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
}

.ff-home .my-stats-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.ff-home .my-stats-row:last-child {
  border-bottom: none;
}

.ff-home .my-stats-row span:first-child {
  color: var(--text-muted);
}

.ff-home .my-stats-row .num {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
}

.ff-home .num.gold { color: var(--gold); }
.ff-home .num.teal { color: var(--teal); }
.ff-home .num.purple { color: var(--purple); }
.ff-home .num.pink { color: var(--pink); }

.ff-home .history-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.ff-home .history-row:last-child {
  border-bottom: none;
}

.ff-home .history-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 14px;
}

.ff-home .history-icon.win {
  background: var(--gold-soft);
  color: var(--gold);
}

.ff-home .history-icon.lose {
  background: var(--pink-soft);
  color: var(--pink);
}

.ff-home .history-row-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ff-home .history-row-title {
  font-weight: 500;
  color: var(--text-primary);
}

.ff-home .history-row-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-family: "JetBrains Mono", monospace;
}

.ff-home .history-row-delta {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  font-size: 13px;
}

.ff-home .history-row-delta.up { color: var(--gold); }
.ff-home .history-row-delta.down { color: var(--pink); }

.ff-home .catalog-section {
  margin-top: 28px;
}

.ff-home .catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.ff-home .game-tile {
  position: relative;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: all 0.18s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ff-home .game-tile:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.ff-home .game-tile.locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.ff-home .game-tile.locked:hover {
  transform: none;
}

.ff-home .game-tile-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-size: 20px;
  margin-bottom: 14px;
}

.ff-home .game-tile-icon.gold {
  background: var(--gold-soft);
  color: var(--gold);
  box-shadow: 0 0 24px rgba(252, 179, 0, 0.15) inset;
}
.ff-home .game-tile-icon.teal { background: var(--teal-soft); color: var(--teal); }
.ff-home .game-tile-icon.purple { background: var(--purple-soft); color: var(--purple); }
.ff-home .game-tile-icon.pink { background: var(--pink-soft); color: var(--pink); }

.ff-home .game-tile-name {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 4px;
}

.ff-home .game-tile-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 14px;
}

.ff-home .game-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: auto;
}

/* Tab toggle (lobby / leaderboard) — purely visual switch in RSX */
.ff-home .ff-home__tab-section {
  display: none;
  animation: ff-home-fade 0.2s ease;
}

.ff-home .ff-home__tab-section[data-active="true"] {
  display: block;
}

@keyframes ff-home-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Leaderboard table — reused from the round-stage mockup */
.ff-home .lb-table {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
}

.ff-home .lb-row {
  display: grid;
  grid-template-columns: 40px 38px minmax(140px, 1fr) minmax(170px, 1.2fr) 70px 90px;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.ff-home .lb-row:last-child {
  border-bottom: none;
}

.ff-home .lb-row.me {
  background: var(--gold-soft);
  margin: 0 -16px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  border: 1px solid rgba(252, 179, 0, 0.3);
}

.ff-home .lb-row.head {
  padding: 6px 0 14px;
  border-bottom: 1px solid var(--border-strong);
}

.ff-home .lb-row.head > * {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  font-weight: 600;
}

.ff-home .lb-rank {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text-faint);
  text-align: center;
}

.ff-home .lb-rank.top1 { color: var(--gold); }
.ff-home .lb-rank.top2 { color: #c0c0d8; }
.ff-home .lb-rank.top3 { color: #cd7f32; }

.ff-home .lb-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ff-home .lb-name {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ff-home .lb-you-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: var(--gold);
  color: #1a0a00;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(252, 179, 0, 0.18);
  flex-shrink: 0;
}

.ff-home .lb-stat {
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1;
  text-align: left;
}

.ff-home .lb-accuracy {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--text-primary);
  text-align: right;
  line-height: 1;
}

.ff-home .lb-primary {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--gold);
  text-align: right;
  line-height: 1;
}

.ff-home .ff-home__placeholder {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-faint);
  font-style: italic;
  font-size: 13px;
}

@media (max-width: 900px) {
  .ff-home .lobby-grid {
    grid-template-columns: 1fr;
  }
  .ff-home .featured-meta {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile (≤720px) — drop secondary descriptions and condense cards so
 * the lobby/leaderboard fit a phone viewport without horizontal
 * overflow. `featured-tagline`, the section-head sub-line, and the
 * catalog tile description are all "nice to have" copy that adds zero
 * actionable info on mobile. */
@media (max-width: 720px) {
  .ff-home .featured {
    padding: 22px 18px;
    border-radius: var(--r-lg);
  }
  .ff-home .featured-title {
    font-size: 26px;
    margin-bottom: 6px;
  }
  .ff-home .featured-tag {
    margin-bottom: 12px;
    padding: 5px 10px;
    font-size: 10px;
  }
  .ff-home .featured-tagline {
    display: none;
  }
  .ff-home .featured-meta {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
  }
  .ff-home .meta-cell {
    padding: 8px 10px;
  }
  .ff-home .meta-cell-label {
    font-size: 9px;
    letter-spacing: 0.08em;
  }
  .ff-home .meta-cell-value {
    font-size: 14px;
  }
  .ff-home .featured-cta {
    gap: 8px;
  }
  .ff-home .featured-status {
    font-size: 11px;
  }
  .ff-home .my-stats-card,
  .ff-home .history-card,
  .ff-home .lb-table {
    padding: 16px;
  }
  .ff-home .game-tile {
    padding: 16px;
  }
  .ff-home .game-tile-desc {
    display: none;
  }
  /* `.section-head .sub` lives on the right side of every card title;
   * the lift it gives the layout isn't worth the wrap on mobile. */
  .ff-home .section-head .sub {
    display: none;
  }

  /* Leaderboard table: collapse the participation column entirely
   * (info is implicit in rank + accuracy) and tighten the rest. */
  .ff-home .lb-row {
    grid-template-columns: 28px 32px minmax(70px, 1fr) 56px 70px;
    gap: 8px;
    font-size: 12px;
  }
  .ff-home .lb-stat {
    display: none;
  }
  .ff-home .lb-row.head > div:nth-child(4) {
    display: none;
  }
  .ff-home .lb-row.me {
    margin: 0 -10px;
    padding: 10px;
  }
  .ff-home .lb-rank {
    font-size: 14px;
  }
  .ff-home .lb-name {
    font-size: 13px;
  }
  .ff-home .lb-accuracy {
    font-size: 12px;
  }
  .ff-home .lb-primary {
    font-size: 14px;
  }
}

/* === src/features/arcade/games/fact_or_fold/pages/matching === */
.ff-matching {
  max-width: 880px;
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
  text-align: center;
}

.ff-matching .matching-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--gold);
  text-transform: uppercase;
  padding: 6px 14px;
  background: var(--gold-soft);
  border: 1px solid rgba(252, 179, 0, 0.35);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ff-matching .matching-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: ff-matching-pulse 1.2s ease-in-out infinite;
}

@keyframes ff-matching-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.ff-matching .matching-title {
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: 48px;
  letter-spacing: 0.04em;
  margin: 0;
  background: linear-gradient(120deg, #fff 0%, #fcb300 60%, #db2780 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ff-matching .matching-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 540px;
  margin: 0;
  line-height: 1.6;
}

.ff-matching .matching-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  width: 100%;
  margin-top: 8px;
}

.ff-matching .matching-slot {
  position: relative;
  padding: 22px 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 168px;
  overflow: hidden;
  transition: all 0.25s ease;
}

.ff-matching .matching-slot[data-state="filled"] {
  border-color: rgba(252, 179, 0, 0.35);
  background: linear-gradient(180deg, var(--gold-soft), var(--surface));
  box-shadow: 0 0 0 4px rgba(252, 179, 0, 0.08);
}

.ff-matching .matching-slot[data-state="me"] {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(252, 179, 0, 0.16), var(--surface));
  box-shadow: 0 0 0 5px rgba(252, 179, 0, 0.18);
}

.ff-matching .matching-slot[data-state="empty"] {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.16);
}

.ff-matching .matching-slot[data-state="empty"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.018),
      rgba(255, 255, 255, 0.018) 6px,
      transparent 6px,
      transparent 14px
    );
  pointer-events: none;
  animation: ff-matching-scan 5s linear infinite;
}

@keyframes ff-matching-scan {
  from { background-position: 0 0; }
  to { background-position: 40px 40px; }
}

.ff-matching .matching-slot-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f3aaf, #7d3aaf);
  display: grid;
  place-items: center;
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: white;
  border: 2px solid var(--border-strong);
}

.ff-matching .matching-slot[data-state="empty"] .matching-slot-avatar {
  background: transparent;
  border: 2px dashed rgba(255, 255, 255, 0.18);
  color: var(--text-faint);
  animation: ff-matching-pulse 1.6s ease-in-out infinite;
}

.ff-matching .matching-slot-avatar.a2 { background: linear-gradient(135deg, #3aaf7d, #6eedd8); color: #042a1f; }
.ff-matching .matching-slot-avatar.a3 { background: linear-gradient(135deg, #af3a7d, #db2780); }
.ff-matching .matching-slot-avatar.a4 { background: linear-gradient(135deg, #af7d3a, #fcb300); color: #1a0a00; }

.ff-matching .matching-slot-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ff-matching .matching-slot-name .you-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  background: var(--gold);
  color: #1a0a00;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.1em;
}

.ff-matching .matching-slot-pill {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-muted);
}

.ff-matching .matching-slot[data-state="filled"] .matching-slot-pill,
.ff-matching .matching-slot[data-state="me"] .matching-slot-pill {
  background: var(--teal-soft);
  color: var(--teal);
}

.ff-matching .matching-slot[data-state="empty"] .matching-slot-pill {
  color: var(--text-faint);
}

.ff-matching .matching-slot-placeholder {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.4;
}

.ff-matching .matching-slot-num {
  position: absolute;
  top: 8px;
  left: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--text-faint);
  opacity: 0.6;
}

.ff-matching .matching-progress {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ff-matching .matching-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-muted);
}

.ff-matching .matching-progress-count {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}

.ff-matching .matching-progress-bar {
  height: 6px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.ff-matching .matching-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  border-radius: 999px;
  transition: width 0.4s ease;
}

.ff-matching .matching-hints {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

.ff-matching .matching-hint {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: left;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.ff-matching .matching-hint-icon {
  font-size: 14px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 1px;
}

.ff-matching .matching-hint strong {
  color: var(--text-primary);
  font-weight: 600;
}

.ff-matching .matching-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

.ff-matching .matching-actions-hint {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-faint);
}

.ff-matching .matching-buyin-note {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-muted);
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.ff-matching .matching-buyin-note strong {
  color: var(--gold);
}

@media (max-width: 720px) {
  .ff-matching .matching-slots {
    grid-template-columns: repeat(2, 1fr);
  }
  .ff-matching .matching-hints {
    grid-template-columns: 1fr;
  }
  .ff-matching .matching-title {
    font-size: 36px;
  }
}

/* Mobile (≤720px) — extra arcade overrides for matching + game room.
 * Kept as a separate block from the existing matching media query so
 * the prior rules stay untouched. */
@media (max-width: 720px) {
  /* Matching page: shrink the headline + drop the long subtitle so
   * four slot cards fit a phone width. */
  .ff-matching {
    margin: 16px auto 0;
    gap: 18px;
    padding: 0 4px;
  }
  .ff-matching .matching-title {
    font-size: 28px;
    letter-spacing: 0.02em;
  }
  .ff-matching .matching-subtitle {
    display: none;
  }
  .ff-matching .matching-slot {
    padding: 16px 10px 14px;
    min-height: 140px;
  }
  .ff-matching .matching-eyebrow {
    font-size: 10px;
    padding: 5px 10px;
    letter-spacing: 0.16em;
  }

  /* Game room: stack the sidebar above the view-stack on mobile so
   * the 176px-fixed sidebar doesn't squeeze the main view off-screen.
   * Sidebar itself stays a vertical stack — its two children
   * (.stage-timeline horizontal-strip, .timer-card compact pill) are
   * full-width rows, matching the mobile mockup.
   *
   * `minmax(0, 1fr)` (instead of bare `1fr`) is what keeps the grid
   * column from blowing past the viewport when a child has nowrap
   * content (the 6 stage-step pills). Without it the column adopts
   * the grid item's min-content width, and the whole room scrolls
   * horizontally. The matching `min-width: 0` on the children
   * cascades the same fix down one level for flex/grid descendants. */
  .ff-room .layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .ff-room .layout > * {
    min-width: 0;
  }
  .ff-room .sidebar {
    position: static;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-width: 0;
  }
  .ff-room .sidebar > * {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  /* Belt-and-braces clamp — explicit max-width so the pill strip and
   * collapsible news never push past the room width even when their
   * inner contents are nowrap or have wide whitespace. */
  .ff-room .stage-timeline.stage-timeline-global,
  .ff-room .timer-card,
  .ff-room .news-collapsible {
    max-width: 100%;
    box-sizing: border-box;
  }
}

.reports-arena .report-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim);
}
.reports-arena .report-card__meta svg { width: 12px; height: 12px; }
.reports-arena .report-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--report-color);
}
.reports-arena .report-card__cta svg { width: 12px; height: 12px; }

/* Create card variant */
.reports-arena .report-card--create {
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 48px 32px;
  background: rgba(168, 85, 247, 0.04);
  border: 1.5px dashed rgba(168, 85, 247, 0.32);
}
.reports-arena .report-card--create::before { display: none; }
.reports-arena .report-card--create.active {
  background: rgba(168, 85, 247, 0.08);
  border-color: var(--report-color);
  border-style: dashed;
  box-shadow: 0 12px 60px var(--card-shadow-soft), 0 0 40px var(--report-glow);
}
.reports-arena .report-card__create-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--report-color), #7c3aed);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reports-arena .report-card__create-icon svg { width: 28px; height: 28px; }
.reports-arena .report-card__create-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
.reports-arena .report-card__create-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 280px;
}
.reports-arena .report-card__create-sub code {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid var(--report-border);
  color: var(--report-color);
  font-family: 'Menlo', monospace;
  font-size: 11px;
}
.reports-arena .report-card__create-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--report-color), #7c3aed);
  color: #fff;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.reports-arena .report-card__create-cta svg { width: 12px; height: 12px; }

/* Carousel dots (populated later by carousel JS) */
.reports-arena .carousel-dots {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0 28px 24px;
}
.reports-arena .carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  cursor: pointer;
  transition: all 0.18s;
}
.reports-arena .carousel-dot.active {
  width: 28px;
  border-radius: 99px;
  background: var(--report-color);
  box-shadow: 0 0 12px var(--report-glow);
}
.reports-arena .carousel-dot.active--create {
  background: linear-gradient(135deg, var(--report-color), #7c3aed);
}

@media (max-width: 500px) {
  .reports-arena .reports-topbar { padding: 12px 14px; gap: 8px; }
  .reports-arena .reports-topbar__logo,
  .reports-arena .reports-topbar__title-col { display: none; }
  .reports-arena .reports-topbar__btn span { display: none; }
  .reports-arena .reports-topbar__btn { padding: 0 10px; }
  .reports-arena .report-card { width: 84vw; min-height: 360px; }
  .reports-arena .carousel-track { gap: 16px; padding: 28px 12px; }

  /* Mobile carousels show one card at a time (~84vw wide), so the
     spotlight scale/opacity dim doesn't help focus — it just makes
     the off-center edges look broken. Reset every card to a
     uniform full-opacity render here; the JS `.active` class still
     toggles the box-shadow / border-color in the base rule so the
     selected card keeps the purple glow but stays the same size. */
  .reports-arena .report-card {
    transform: none;
    opacity: 1;
    filter: none;
  }
  .reports-arena .report-card.active {
    transform: none;
  }
}

/* ── Card overflow menu (the `...` dropdown) ─────────
   Dioxus renders one dropdown per card and shows/hides it based on
   `ctx.menu_open_for` — no JS positioning needed (unlike the mockup
   which uses a single shared dropdown). */
.reports-arena .report-card__menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.reports-arena .card-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px;
  min-width: 170px;
  background: var(--menu-panel);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 18px 50px var(--card-shadow), 0 0 22px rgba(168, 85, 247, 0.06);
}
.reports-arena .card-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: all 0.14s;
}
.reports-arena .card-menu__item:hover {
  /* Subtle wash that flips lightness so the hover state stays
     readable in both themes. */
  background: var(--dark, rgba(255, 255, 255, 0.05)) var(--light, rgba(0, 0, 0, 0.04));
  color: var(--text-primary);
}
.reports-arena .card-menu__item svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.85;
}
.reports-arena .card-menu__item--danger {
  color: var(--danger-fg);
  font-weight: 600;
}
.reports-arena .card-menu__item--danger:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(168, 85, 247, 0.04));
  color: var(--danger-fg-hover);
}

/* ── Delete-confirm modal — arena glass + purple aurora ── */
.reports-arena .confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--modal-scrim);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.reports-arena .confirm-modal__panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  border-radius: 18px;
  background: var(--modal-panel);
  border: 1px solid var(--border-strong);
  box-shadow: 0 30px 80px var(--card-shadow), 0 0 60px rgba(168, 85, 247, 0.1);
  padding: 32px 26px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  overflow: hidden;
}
.reports-arena .confirm-modal__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(168, 85, 247, 0.1) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(239, 68, 68, 0.06) 0%, transparent 70%);
  pointer-events: none;
}
.reports-arena .confirm-modal__panel > * { position: relative; z-index: 1; }
.reports-arena .confirm-modal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--danger-fg);
  padding: 3px 11px;
  border-radius: 99px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.22);
}
.reports-arena .confirm-modal__eyebrow svg { width: 11px; height: 11px; }
.reports-arena .confirm-modal__icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.16), rgba(168, 85, 247, 0.04));
  border: 1px solid rgba(239, 68, 68, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--danger-fg);
  margin-top: 8px;
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.reports-arena .confirm-modal__icon svg { width: 26px; height: 26px; }
.reports-arena .confirm-modal__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin-top: 4px;
}
.reports-arena .confirm-modal__body {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  padding: 0 4px;
}
.reports-arena .confirm-modal__body strong {
  color: var(--report-color);
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}
.reports-arena .confirm-modal__note {
  font-size: 11px;
  color: var(--text-dim);
  display: block;
  margin-top: 8px;
  letter-spacing: 0.02em;
}
.reports-arena .confirm-modal__actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 18px;
}
.reports-arena .confirm-modal__btn {
  flex: 1;
  padding: 11px 12px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s;
  border: 1px solid transparent;
}
.reports-arena .confirm-modal__btn--ghost {
  background: var(--dark, rgba(255, 255, 255, 0.04)) var(--light, rgba(0, 0, 0, 0.03));
  border-color: var(--border-strong);
  color: var(--text-muted);
}
.reports-arena .confirm-modal__btn--ghost:hover {
  background: var(--dark, rgba(255, 255, 255, 0.08)) var(--light, rgba(0, 0, 0, 0.06));
  color: var(--text-primary);
}
.reports-arena .confirm-modal__btn--danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.3);
}
.reports-arena .confirm-modal__btn--danger:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
}
.reports-arena .confirm-modal__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}



/* === src/features/spaces/pages/report/views/detail === */
/* Page-scoped tokens & layout for the detail (edit) view. All
   selectors live under `.report-detail` so they don't compete with
   `.reports-arena` (list page) or other arena pages. */
.report-detail {
  --rd-bg-void: var(--dark, #06060e) var(--light, #f4f3ef);
  --rd-bg-glass: var(--dark, rgba(12, 12, 26, 0.65)) var(--light, rgba(255, 255, 255, 0.78));
  --rd-border-subtle: var(--dark, rgba(255, 255, 255, 0.06)) var(--light, rgba(0, 0, 0, 0.08));
  --rd-border-strong: var(--dark, rgba(255, 255, 255, 0.12)) var(--light, rgba(0, 0, 0, 0.14));
  --rd-text-primary: var(--dark, #f0f0f5) var(--light, #12121a);
  --rd-text-muted: var(--dark, #8888a8) var(--light, #6b6b80);
  --rd-text-dim: var(--dark, #55556a) var(--light, #9999aa);
  --rd-accent: #a855f7;
  --rd-accent-bg: rgba(168, 85, 247, 0.10);
  --rd-accent-border: rgba(168, 85, 247, 0.30);
  --rd-poll: #06b6d4;
  --rd-quiz: #a855f7;
  --rd-discussion: #60a5fa;
  --rd-follow: #f97316;

  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* Same treatment `.composer-arena` already carries, and for the same
     reason: this column sits inside `:root`'s safe-area padding, so a full
     `100dvh` runs past the bottom of the screen and buries its last flex
     item — the editor's format bar — under the Android nav bar / home
     indicator. `--kb-inset` (set globally in app.rs from `visualViewport`)
     collapses it above the soft keyboard as well. Both are 0 on desktop. */
  height: calc(
    100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) -
      var(--kb-inset, 0px)
  );
  /* Follow the WebView's visual-viewport pan, as `.composer-arena` does: a
     tap low in the body puts the caret where the keyboard opens, the WebView
     scrolls to reveal it, and the pan is never undone once the column has
     shrunk above the keyboard. 0 whenever nothing is panned. */
  top: var(--vv-offset-top, 0px);
  overflow: hidden;
  background: var(--rd-bg-void);
  color: var(--rd-text-primary);
  font-family: 'Outfit', sans-serif;
}

.report-detail__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--rd-border-subtle);
  flex-shrink: 0;
}
.report-detail__topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.report-detail__back {
  width: 34px;
  height: 34px;
  /* Fixed-size flex child: without this the default `flex-shrink: 1` lets a
     long sibling title squash the square button into an oval. */
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--rd-bg-glass);
  border: 1px solid var(--rd-border-subtle);
  color: var(--rd-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.18s, border-color 0.18s;
}
.report-detail__back:hover { color: var(--rd-accent); border-color: var(--rd-accent-border); }
.report-detail__back svg { width: 14px; height: 14px; }
.report-detail__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rd-text-dim);
  min-width: 0;
}
.report-detail__breadcrumb-current {
  color: var(--rd-text-primary);
  text-transform: none;
  letter-spacing: 0.02em;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
.report-detail__autosave { font-size: 11px; color: var(--rd-text-dim); }
.report-detail__topbar-right { display: flex; align-items: center; gap: 8px; }
.report-detail__topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  background: var(--rd-bg-glass);
  border: 1px solid var(--rd-border-subtle);
  color: var(--rd-text-muted);
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s;
}
.report-detail__topbar-btn:hover { color: var(--rd-text-primary); border-color: var(--rd-border-strong); }
.report-detail__topbar-btn svg { width: 13px; height: 13px; }
.report-detail__topbar-btn--primary {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(168, 85, 247, 0.06));
  border-color: var(--rd-accent-border);
  color: var(--rd-accent);
}
.report-detail__topbar-btn--primary:hover { box-shadow: 0 0 18px rgba(168, 85, 247, 0.20); }

.report-detail__banner { padding: 16px 24px 0; flex-shrink: 0; }
.report-detail__banner-inner {
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--rd-accent-bg);
  border: 1px solid var(--rd-accent-border);
}
.report-detail__banner-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(168, 85, 247, 0.18);
  border: 1px solid var(--rd-accent-border);
  color: var(--rd-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.report-detail__banner-icon svg { width: 18px; height: 18px; }
.report-detail__banner-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.report-detail__banner-eyebrow {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rd-accent);
}
.report-detail__banner-title { font-size: 14px; font-weight: 700; color: var(--rd-text-primary); }
.report-detail__banner-text { font-size: 12.5px; color: var(--rd-text-muted); line-height: 1.55; }

.report-detail__grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  overflow: hidden;
}

.report-detail__doc { overflow-y: auto; padding: 28px 28px 80px; }
.report-detail__doc-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.report-detail__cover {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rd-accent);
}
.report-detail__cover svg { width: 13px; height: 13px; }
.report-detail__title {
  border: none;
  background: transparent;
  font-family: 'Orbitron', sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--rd-text-primary);
  outline: none;
  padding: 6px 0;
}
.report-detail__title::placeholder { color: var(--rd-text-dim); }
.report-detail__subtitle {
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--rd-text-muted);
  outline: none;
  padding: 4px 0 12px;
}
.report-detail__subtitle::placeholder { color: var(--rd-text-dim); }
.report-detail__editor-shell { display: contents; }
.report-detail .report-detail__editor { width: 100%; }

/* ─── Editor styling parity with the post composer ───────
   The shared `.ratel-editor` ships with a sticky top toolbar inside
   a card frame. Both `composer-arena` (post composer) and this
   surface repaint it the same way: editor becomes a transparent
   flex column whose content (`.re-content`) takes the available
   height and whose toolbar (`.re-toolbar`) is moved to the END of
   the flex (order: 5) as a centered floating pill. Selection
   bubble + block dropdown handlers continue to work unchanged.
   ────────────────────────────────────────────────────── */

/* Stop the doc itself from being the scroll container so the editor
   inside can fill it and own the scroll. Title + subtitle stay as
   non-flexing items at the top; the editor takes the remaining flex. */
.report-detail .report-detail__doc {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
.report-detail .report-detail__doc-inner {
  flex: 1;
  min-height: 0;
}

.report-detail .ratel-editor {
  flex: 1;
  min-height: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.report-detail .ratel-editor:focus-within {
  background: transparent;
  border: none;
}
.report-detail .ratel-editor .re-toolbar {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
  order: 5;
  align-self: center;
  flex-shrink: 0;
  width: min(1000px, 100%);
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: 4px;
  margin: 8px auto 14px;
  padding: 8px 10px;
  gap: 4px;
  border: 1px solid var(--re-border-strong);
  border-radius: 14px;
  background: var(--re-toolbar-bg);
  backdrop-filter: blur(20px);
}
/* Strip the inter-group divider in this floating context — a leftover
   border-left on the first group of a wrapped row creates an orphan
   vertical line. The flex gap already separates groups visually. */
.report-detail .ratel-editor .re-toolbar__group + .re-toolbar__group {
  border-left: none;
  margin-left: 0;
  padding-left: 4px;
}
.report-detail .ratel-editor .re-content {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  order: 1;
  padding: 8px 0 12px;
  /* Hide the editor's native scrollbar — the report doc surface keeps
     its own visual rhythm and a chunky scrollbar clashes with the
     glass aesthetic. Wheel / trackpad / keyboard scroll still works. */
  scrollbar-width: none;
}
.report-detail .ratel-editor .re-content::-webkit-scrollbar {
  display: none;
}
/* Hide the editor's built-in word/char statusbar — the report TopBar
   already shows save state and we don't need counts here. */
.report-detail .ratel-editor .re-statusbar {
  display: none;
}
/* Toolbar sits at the bottom of the editor card → the Paragraph dropdown
   must open UPWARD so it doesn't clip below the viewport. */
.report-detail .ratel-editor .re-block__menu {
  top: auto;
  bottom: calc(100% + 6px);
}
@media (max-width: 980px) {
}

.report-detail figure[data-block="chart"] {
  margin: 20px 0;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--rd-accent-border);
  background: var(--rd-accent-bg);
}
.report-detail figure[data-block="chart"] figcaption {
  font-size: 12px;
  color: var(--rd-text-muted);
  margin-bottom: 10px;
}
.report-detail .report-chart-placeholder {
  height: 180px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.32), rgba(168, 85, 247, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0 16px;
}

.report-detail__outline {
  border-left: 1px solid var(--rd-border-subtle);
  background: var(--dark, rgba(0, 0, 0, 0.18)) var(--light, rgba(255, 255, 255, 0.45));
  overflow-y: auto;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.report-detail__outline-section { display: flex; flex-direction: column; gap: 10px; }
.report-detail__outline-heading {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rd-text-dim);
}
.report-detail__outline-empty { font-size: 12px; color: var(--rd-text-dim); line-height: 1.55; padding: 8px 0; }
.report-detail__outline-list { display: flex; flex-direction: column; gap: 2px; }
.report-detail__outline-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--rd-text-muted);
  cursor: pointer;
  text-decoration: none;
  /* The row is rendered as a <button> for click handling; browsers
     center-align button text by default. Force left so multi-line
     outline labels read as expected. */
  text-align: left;
  width: 100%;
  background: transparent;
  border: none;
  font-family: inherit;
}
.report-detail__outline-row > span {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.report-detail__outline-row:hover { background: rgba(255, 255, 255, 0.04); color: var(--rd-text-primary); }
.report-detail__outline-row--h1 { font-weight: 700; color: var(--rd-text-primary); }
.report-detail__outline-row--h2 { padding-left: 16px; }
.report-detail__outline-row--h3 { padding-left: 24px; font-size: 11.5px; }
.report-detail__outline-row--chart { padding-left: 16px; color: var(--rd-accent); font-size: 11.5px; }
.report-detail__outline-meta { display: flex; flex-direction: column; gap: 8px; }
.report-detail__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}
.report-detail__meta-key {
  color: var(--rd-text-dim);
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.report-detail__meta-val { color: var(--rd-text-muted); }

.report-detail__picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 6, 14, 0.65);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
}
.report-detail__picker-overlay[data-open="true"] { display: flex; }
.report-detail__picker-panel {
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--dark, rgba(15, 15, 28, 0.96)) var(--light, rgba(255, 255, 255, 0.98));
  border: 1px solid var(--rd-border-strong);
  border-radius: 16px;
  overflow: hidden;
}
.report-detail__picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--rd-border-subtle);
}
.report-detail__picker-title-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.report-detail__picker-eyebrow {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rd-accent);
}
.report-detail__picker-title { font-size: 14px; font-weight: 700; color: var(--rd-text-primary); }
.report-detail__picker-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--rd-border-subtle);
  color: var(--rd-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.report-detail__picker-close:hover { color: var(--rd-text-primary); border-color: var(--rd-border-strong); }
.report-detail__picker-close svg { width: 14px; height: 14px; }
.report-detail__picker-analyze {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rd-border-subtle);
}
.report-detail__picker-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rd-text-dim);
}
.report-detail__picker-analyze-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}
.report-detail__picker-opt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.02);
  text-align: left;
  cursor: pointer;
  color: var(--rd-text-muted);
}
.report-detail__picker-opt:hover { background: rgba(255, 255, 255, 0.04); color: var(--rd-text-primary); }
.report-detail__picker-opt[aria-selected="true"] {
  background: var(--rd-accent-bg);
  border-color: var(--rd-accent-border);
  color: var(--rd-accent);
}
.report-detail__picker-opt-name { font-size: 13px; font-weight: 700; color: inherit; }
.report-detail__picker-opt-meta { font-size: 10.5px; color: var(--rd-text-dim); letter-spacing: 0.04em; }

.report-detail__xf-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.report-detail__xf-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px 1px 1px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 10px;
  line-height: 1.4;
  color: var(--rd-text-muted);
  max-width: 100%;
}
.report-detail__xf-chip-src {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 5px;
}
.report-detail__xf-chip[data-source="poll"]       .report-detail__xf-chip-src { background: rgba(6, 182, 212, 0.12);   color: var(--rd-poll); }
.report-detail__xf-chip[data-source="quiz"]       .report-detail__xf-chip-src { background: rgba(168, 85, 247, 0.12);  color: var(--rd-quiz); }
.report-detail__xf-chip[data-source="discussion"] .report-detail__xf-chip-src { background: rgba(96, 165, 250, 0.12);  color: var(--rd-discussion); }
.report-detail__xf-chip[data-source="follow"]     .report-detail__xf-chip-src { background: rgba(249, 115, 22, 0.12);  color: var(--rd-follow); }
.report-detail__xf-chip-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.report-detail__picker-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 12px 20px 0;
}
.report-detail__picker-tab {
  padding: 10px 8px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--rd-border-subtle);
  color: var(--rd-text-muted);
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
}
.report-detail__picker-tab:disabled { opacity: 0.45; cursor: not-allowed; }
.report-detail__picker-tab:not(:disabled):hover { color: var(--rd-text-primary); border-color: var(--rd-border-strong); }
.report-detail__picker-tab[aria-selected="true"] {
  color: var(--rd-accent);
  border-color: var(--rd-accent-border);
  background: var(--rd-accent-bg);
}
.report-detail__picker-tab-count { color: var(--rd-text-dim); font-weight: 600; margin-left: 4px; }

.report-detail__picker-items {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.report-detail__picker-empty {
  padding: 14px 8px;
  font-size: 12px;
  color: var(--rd-text-dim);
  text-align: center;
}
.report-detail__picker-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--rd-border-subtle);
  background: rgba(255, 255, 255, 0.02);
  text-align: left;
  cursor: pointer;
  color: var(--rd-text-muted);
}
.report-detail__picker-item:hover {
  background: var(--rd-accent-bg);
  border-color: var(--rd-accent-border);
  color: var(--rd-text-primary);
}
.report-detail__picker-item-title { font-size: 13px; font-weight: 600; color: inherit; }
.report-detail__picker-item-meta { font-size: 11px; color: var(--rd-text-dim); }

@media (max-width: 900px) {
  .report-detail__grid { grid-template-columns: 1fr; }
  .report-detail__outline { display: none; }
}

/* ─── Mobile responsiveness ───────────────────────
   At narrow viewports the topbar action row needs to shed its labels
   (icons survive), the doc gutters tighten up, the chart card stacks
   its top strip and squeezes its viz canvases (pie/bar/table) into
   the single column, and the format toolbar pill (already
   horizontal-scroll on small screens via the global override) gets
   pulled in even further so it doesn't escape the viewport. */
@media (max-width: 768px) {
  .report-detail__topbar {
    padding: 10px 12px;
    gap: 6px;
  }
  .report-detail__autosave {
    display: none;
  }
  .report-detail__breadcrumb-current {
    max-width: 110px;
  }
  .report-detail__topbar-btn {
    padding: 0 9px;
  }
  .report-detail__topbar-btn span {
    display: none;
  }
  .report-detail__topbar-btn svg {
    margin: 0;
  }

  .report-detail__doc {
    padding: 16px 14px;
  }
  .report-detail__doc-inner {
    max-width: 100%;
  }

  /* Chart card — pad less, stack badge above title since both
     compete for horizontal space, and let the chart-meta line wrap
     cleanly instead of pushing off-screen. */
  .report-detail__chart-block {
    padding: 14px 12px;
    border-radius: 12px;
  }
  .report-detail__chart-top {
    flex-wrap: wrap;
    gap: 10px;
  }
  .report-detail__chart-top .report-detail__chart-title {
    width: 100%;
    line-height: 1.3;
  }
  .report-detail__chart-actions {
    margin-left: auto;
  }
  .report-detail__chart-meta {
    font-size: 11px;
  }

  /* Pie viz — stack disc above legend so the disc gets the full
     row width and the legend (right-aligned) wraps under it. */
  .report-detail__chart-canvas--pie {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }
  .report-detail__chart-pie {
    width: 140px;
    height: 140px;
    margin: 0 auto;
  }
  .report-detail__chart-pie-legend {
    justify-content: end;
  }

  /* Bar canvas — tighter gap + thinner labels so 5+ bars fit. */
  .report-detail__chart-canvas--bar {
    gap: 10px;
    height: 200px;
    padding: 14px 8px 44px;
  }
  .report-detail__chart-bar { max-width: 70px; }
  .report-detail__chart-bar::after { font-size: 9.5px; }

  /* Table — smaller font, narrower number columns. */
  .report-detail__chart-table {
    font-size: 11px;
  }
  .report-detail__chart-table th:nth-child(2),
  .report-detail__chart-table td:nth-child(2),
  .report-detail__chart-table th:nth-child(3),
  .report-detail__chart-table td:nth-child(3) {
    width: 64px;
  }

  /* LDA / TF-IDF / Network — pad less. */
  .report-detail__chart-canvas--lda,
  .report-detail__chart-canvas--network {
    padding: 14px;
  }
  .report-detail__network-svg {
    height: 220px;
  }

  /* Editor format toolbar (floating pill) already wraps to a single
     scrollable row at ≤ 980px via the global rule; nothing extra
     needed here. */
}

@media (max-width: 500px) {
  .report-detail__breadcrumb-current { max-width: 80px; font-size: 12px; }
  .report-detail__topbar-btn { height: 30px; padding: 0 8px; }
  .report-detail__topbar-btn svg { width: 12px; height: 12px; }
  .report-detail__title { font-size: 26px !important; }
  .report-detail__doc { padding: 12px 10px; }
  .report-detail__chart-canvas--bar { padding: 14px 6px 44px; gap: 6px; }
}

/* Soft keyboard open (`html.kb-open`, toggled by app.rs) on the report
   editor. The column shrinks above the keyboard, but the breadcrumb bar, the
   "Action · Report" eyebrow, a 26px title and the subtitle kept their size,
   so the body scroller was left about one line tall: pressing Enter scrolled
   the new line into that strip and the previous line out of view, which read
   as Enter not working. While typing, drop what isn't used for typing and
   tighten the rest; everything returns when the keyboard closes. */
@media (max-width: 980px) {
  html.kb-open .report-detail__topbar,
  html.kb-open .report-detail__banner,
  html.kb-open .report-detail__cover {
    display: none;
  }
  html.kb-open .report-detail .report-detail__doc {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  html.kb-open .report-detail__doc-inner { gap: 2px; }
  html.kb-open .report-detail__title {
    font-size: 20px !important;
    padding: 2px 0;
  }
  html.kb-open .report-detail__subtitle { padding: 0 0 4px; }
}

/* ── Viewer mode — non-admin members opening a published report.
   The edit affordances (chart gear / trash buttons, format toolbar,
   Insert Data button, slash bridge inputs, table action toolbar,
   selection bubble) are all hidden so the page reads as a static
   document. The PDF Download button in the topbar stays visible —
   that's the whole point of viewer mode. */
.report-detail--viewer .report-detail__chart-actions,
.report-detail--viewer .ratel-editor .re-toolbar,
.report-detail--viewer .ratel-editor .re-mobile-bar,
.report-detail--viewer .ratel-editor .re-fmt-sheet,
.report-detail--viewer .ratel-editor .re-bubble,
.report-detail--viewer .ratel-editor .re-table-actions,
.report-detail--viewer .ratel-editor .re-statusbar {
  display: none !important;
}
.report-detail--viewer .ratel-editor .re-content {
  /* Belt-and-suspenders — the `editable` prop already wires
     `contenteditable="false"`, but explicitly disabling caret affords
     the user no chance to focus the body even via tab. */
  caret-color: transparent;
  user-select: text;
}

/* ── Publish confirm modal — identical arena-glass styling to the
   list page's delete modal. Same panel background, same border, same
   icon container, same button geometry. Only the eyebrow / icon /
   primary-action colors are swapped from destructive red to the
   publish purple, because publishing is a positive (not destructive)
   action. All modal tokens are duplicated locally because the
   originals live under `.reports-arena` and our scope is
   `.report-detail`. */
.report-detail .confirm-modal {
  --rd-modal-scrim: var(--dark, rgba(4, 4, 12, 0.65)) var(--light, rgba(20, 20, 35, 0.45));
  --rd-modal-panel: var(--dark, linear-gradient(160deg, rgba(22, 22, 38, 0.97), rgba(10, 10, 20, 0.99))) var(--light, linear-gradient(160deg, #ffffff, #fafaf6));
  --rd-card-shadow: var(--dark, rgba(0, 0, 0, 0.5)) var(--light, rgba(0, 0, 0, 0.10));
  --rd-publish-fg: var(--dark, #c4a3f5) var(--light, #7c3aed);

  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--rd-modal-scrim);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.report-detail .confirm-modal__panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  border-radius: 18px;
  background: var(--rd-modal-panel);
  border: 1px solid var(--rd-border-strong);
  box-shadow: 0 30px 80px var(--rd-card-shadow), 0 0 60px rgba(168, 85, 247, 0.10);
  padding: 32px 26px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  overflow: hidden;
}
.report-detail .confirm-modal__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(168, 85, 247, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(168, 85, 247, 0.06) 0%, transparent 70%);
  pointer-events: none;
}
.report-detail .confirm-modal__panel > * { position: relative; z-index: 1; }
.report-detail .confirm-modal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rd-publish-fg);
  padding: 3px 11px;
  border-radius: 99px;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.22);
}
.report-detail .confirm-modal__eyebrow svg { width: 11px; height: 11px; }
.report-detail .confirm-modal__icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.16), rgba(168, 85, 247, 0.04));
  border: 1px solid rgba(168, 85, 247, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rd-publish-fg);
  margin-top: 8px;
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.report-detail .confirm-modal__icon svg { width: 26px; height: 26px; }
.report-detail .confirm-modal__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--rd-text-primary);
  margin-top: 4px;
}
.report-detail .confirm-modal__body {
  font-size: 13px;
  color: var(--rd-text-muted);
  line-height: 1.6;
  padding: 0 4px;
}
.report-detail .confirm-modal__actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 18px;
}
.report-detail .confirm-modal__btn {
  flex: 1;
  padding: 11px 12px;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s;
  border: 1px solid transparent;
}
.report-detail .confirm-modal__btn--ghost {
  background: var(--dark, rgba(255, 255, 255, 0.04)) var(--light, rgba(0, 0, 0, 0.03));
  border-color: var(--rd-border-strong);
  color: var(--rd-text-muted);
}
.report-detail .confirm-modal__btn--ghost:hover {
  background: var(--dark, rgba(255, 255, 255, 0.08)) var(--light, rgba(0, 0, 0, 0.06));
  color: var(--rd-text-primary);
}
.report-detail .confirm-modal__btn--primary {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.30);
}
.report-detail .confirm-modal__btn--primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.40);
}
.report-detail .confirm-modal__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ─── Print / Save-as-PDF view ──────────────────────────
   When the user hits "PDF 다운로드" we call `window.print()`. The
   browser's print pipeline rasterises a snapshot of the page using
   only these styles. We strip every editor / app chrome (topbar,
   outline rail, format toolbar, table-action toolbar, selection
   bubble, chart settings/trash buttons) and reflow the doc body for
   an A4-ish page. Backgrounds / colors are preserved via
   `print-color-adjust: exact` so chart figures don't drop their
   gradient fills. */
@media print {
  /* Real `@page` margins (so every page has the same gutter — body
     padding only applies on page 1, which left pages 2+ glued to the
     top edge), then explicitly empty out the six margin-box slots so
     the browser has nowhere to inject its own header (timestamp + tab
     title) / footer (URL + page number). Chrome 90+ / Edge support
     these empty content() declarations as suppression hints. */
  @page {
    size: A4 portrait;
    margin: 18mm 16mm;
    @top-left { content: ""; }
    @top-center { content: ""; }
    @top-right { content: ""; }
    @bottom-left { content: ""; }
    @bottom-center { content: ""; }
    @bottom-right { content: ""; }
  }

  html {
    background: #ffffff !important;
    color: #111 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  body {
    background: #ffffff !important;
    color: #111 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    display: none !important;
  }

  /* Force light tokens for the print snapshot so the dark UI doesn't
     bake into the PDF as a sea of dark grey. The `--dark` / `--light`
     toggle (defined in dx-components-theme.css) flips based on
     `data-theme`; we override here. */
  html,
  body,
  .report-detail,
  .report-detail .ratel-editor {
    --dark: ;
    --light: initial;
    color-scheme: light;
  }

  /* Preserve gradient + background colors for charts. Default browser
     print "economy" mode would otherwise drop them. */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Strip every UI chrome that isn't the document body. */
  .report-detail__topbar,
  .report-detail__outline,
  .report-detail__banner,
  .report-detail__picker-overlay,
  .report-detail__slash-pop,
  .report-detail .confirm-modal,
  .ratel-editor .re-toolbar,
  .ratel-editor .re-mobile-bar,
  .ratel-editor .re-fmt-sheet,
  .ratel-editor .re-bubble,
  .ratel-editor .re-table-actions,
  .ratel-editor .re-statusbar,
  .ratel-editor .re-bridge,
  .ratel-editor .re-slash-bridge,
  .report-detail__cmd-bridge,
  .report-detail__chart-actions,
  /* Editor-page-only chrome that doesn't belong in the printed report:
     the "ACTION · REPORT" eyebrow strip above the title, the
     "{analyze_name} · {item_meta}" debug strip under each chart badge,
     and the LDA topic weight + network stats are workflow hints
     (filler percentages / debug counts), not document content. */
  .report-detail__cover,
  .report-detail__chart-meta,
  .report-detail__lda-topic-weight,
  .report-detail__lda-topic-bar,
  .report-detail__network-stats,
  /* Any other floating modals or overlays anywhere on the page. */
  body > [class*="modal"],
  body > [class*="overlay"],
  body > [class*="toast"],
  /* Global `Layover` (right-side drawer). It stays in the DOM with
     `position: fixed; inset: 0; bg-black + translate-x-full` even when
     closed, and the browser print engine renders that black backdrop
     as a faint dark vertical bar along the right edge of every PDF
     page. Drop the whole tree when printing. */
  .fixed.inset-0.z-100 {
    display: none !important;
  }
  /* Strip any leftover fixed-position element that would render at the
     same viewport coords on every print page — those create the
     "phantom vertical bar" along the right margin in print snapshots. */
  .report-detail *[style*="position: fixed"],
  .report-detail *[style*="position:fixed"] {
    display: none !important;
  }
  .ratel-editor .re-bubble,
  .ratel-editor .re-table-actions,
  .report-detail__slash-pop {
    position: static !important;
  }

  /* The doc surface drops scrolling so the printer can paginate the
     full content. Width takes the printable area. */
  .report-detail {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    background: #ffffff !important;
    color: #111 !important;
  }
  .report-detail__grid {
    /* The on-screen grid is two columns (body + 280px outline rail);
       in print the outline is hidden, but the empty 280px column
       still consumed space and left a vertical seam on the right
       side of the page. Flatten the grid to a single column. */
    display: block !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important;
    height: auto !important;
  }
  /* Ensure no leftover element still renders a scrollbar gutter on
     the right side of the printable area. Every scroll container in
     the editor UI was hidden / unset above; this is a belt-and-
     braces sweep that catches anything we missed. */
  .report-detail,
  .report-detail *,
  .ratel-editor,
  .ratel-editor * {
    scrollbar-width: none !important;
  }
  .report-detail ::-webkit-scrollbar,
  .ratel-editor ::-webkit-scrollbar,
  .report-detail::-webkit-scrollbar,
  .ratel-editor::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .report-detail__doc {
    overflow: visible !important;
    padding: 0 !important;
  }
  .report-detail__doc-inner {
    max-width: 100% !important;
  }
  .report-detail .ratel-editor {
    display: block !important;
    background: transparent !important;
    border: none !important;
  }
  .report-detail .ratel-editor .re-content {
    overflow: visible !important;
    padding: 0 !important;
    color: #111 !important;
  }

  /* Title + subtitle inputs render as readonly headings on paper. */
  .report-detail__title,
  .report-detail__subtitle {
    background: transparent !important;
    border: none !important;
    color: #111 !important;
    outline: none !important;
  }
  /* Hide subtitle row entirely when it's still showing its placeholder
     (= no value entered). `:placeholder-shown` is supported in every
     evergreen browser. */
  .report-detail__subtitle:placeholder-shown {
    display: none !important;
  }

  /* Network chart: tone down the saturated purple fills + edge strokes
     so the densely-overlapping graph reads as a soft sketch on white
     paper instead of an opaque purple blob. */
  .report-detail__network-node {
    fill: rgba(168, 85, 247, 0.20) !important;
    stroke: rgba(168, 85, 247, 0.45) !important;
    stroke-width: 0.8 !important;
  }
  .report-detail__network-edge {
    stroke: rgba(120, 90, 180, 0.18) !important;
    stroke-width: 0.6 !important;
  }
  .report-detail__network-label {
    fill: #333 !important;
    font-size: 9.5px !important;
  }

  /* Charts: keep the colored fills, but darken text contrast for
     paper. */
  .report-detail__chart-block {
    page-break-inside: avoid;
    break-inside: avoid;
    background: #f7f6f3 !important;
    color: #111 !important;
    border-color: rgba(0, 0, 0, 0.10) !important;
  }
  .report-detail__chart-title,
  .report-detail__chart-meta,
  .report-detail__chart-meta-key,
  .report-detail__chart-meta-val,
  .report-detail__chart-table th,
  .report-detail__chart-table td,
  .report-detail__chart-pie-row,
  .report-detail__chart-pie-row > span,
  .report-detail__chart-pie-row > strong,
  .report-detail__lda-topic-id,
  .report-detail__lda-topic-weight,
  .report-detail__lda-kw,
  .report-detail__network-stats,
  .report-detail__network-label {
    color: #111 !important;
  }
  .report-detail__chart-table {
    border-color: rgba(0, 0, 0, 0.15) !important;
  }
  .report-detail__chart-table th,
  .report-detail__chart-table td {
    border-color: rgba(0, 0, 0, 0.15) !important;
  }
  .report-detail__chart-table th {
    background: rgba(0, 0, 0, 0.04) !important;
  }
  .report-detail__chart-canvas {
    background: rgba(0, 0, 0, 0.02) !important;
  }

  /* Headings + paragraphs in the body editor: paper colors. */
  .ratel-editor .re-content h1,
  .ratel-editor .re-content h2,
  .ratel-editor .re-content h3,
  .ratel-editor .re-content p,
  .ratel-editor .re-content li,
  .ratel-editor .re-content td,
  .ratel-editor .re-content th {
    color: #111 !important;
  }
  .ratel-editor .re-content blockquote {
    color: #333 !important;
    border-color: rgba(0, 0, 0, 0.20) !important;
  }
  .ratel-editor .re-content a {
    color: #1056d1 !important;
  }
  .ratel-editor .re-content table th,
  .ratel-editor .re-content table td {
    border-color: rgba(0, 0, 0, 0.15) !important;
  }

  /* Page-break friendliness for figures + tables. */
  figure,
  table {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

/* ── Block editor (Notion-style) ─────────────── */
.report-detail__doc { padding: 28px 28px 120px; }
.report-detail__blocks { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.report-detail__block { position: relative; }
.report-detail__block-h1,
.report-detail__block-h2,
.report-detail__block-h3,
.report-detail__block-text {
  outline: none;
  color: var(--rd-text-primary);
  caret-color: var(--rd-accent);
}
.report-detail__block-h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.25;
  margin: 8px 0 6px;
}
.report-detail__block-h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
  margin: 6px 0 4px;
}
.report-detail__block-h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.35;
  margin: 4px 0;
}
.report-detail__block-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--rd-text-primary);
}
.report-detail__block-text strong { color: var(--rd-text-primary); font-weight: 700; }
.report-detail__block-text em { color: var(--rd-text-muted); }

/* Chart block — bordered figure with bar canvas */
.report-detail__chart-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 18px 0;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--rd-accent-border);
  background: var(--rd-accent-bg);
}
.report-detail__chart-top { display: flex; align-items: flex-start; gap: 14px; }
.report-detail__chart-top .report-detail__chart-badge { margin-top: 1px; flex-shrink: 0; }
.report-detail__chart-top .report-detail__chart-title { flex: 1; min-width: 0; line-height: 1.4; }
.report-detail__chart-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid var(--rd-accent-border);
  color: var(--rd-accent);
  font-family: 'Orbitron', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.report-detail__chart-badge svg { width: 11px; height: 11px; }
.report-detail__chart-block[data-source="poll"]       .report-detail__chart-badge { background: rgba(6, 182, 212, 0.15); color: var(--rd-poll); border-color: rgba(6, 182, 212, 0.32); }
.report-detail__chart-block[data-source="discussion"] .report-detail__chart-badge { background: rgba(96, 165, 250, 0.15); color: var(--rd-discussion); border-color: rgba(96, 165, 250, 0.32); }
.report-detail__chart-block[data-source="follow"]     .report-detail__chart-badge { background: rgba(249, 115, 22, 0.15); color: var(--rd-follow); border-color: rgba(249, 115, 22, 0.32); }
.report-detail__chart-title { font-size: 13px; font-weight: 700; color: var(--rd-text-primary); }
.report-detail__chart-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--rd-text-muted);
}
.report-detail__chart-meta-key {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--rd-text-dim);
}
.report-detail__chart-meta-val { color: var(--rd-text-primary); font-weight: 600; }
.report-detail__chart-meta-sep { color: var(--rd-text-dim); }
.report-detail__chart-canvas {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 24px;
  height: 240px;
  /* Extra bottom padding carves out space for the absolute `::after`
     labels under each bar so they stay inside the canvas box. Sized
     for up to 2 wrapped lines of 10px text. */
  padding: 18px 18px 50px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.report-detail__chart-bar {
  flex: 1 1 0;
  max-width: 120px;
  background: linear-gradient(180deg, var(--rd-accent), rgba(168, 85, 247, 0.35));
  border-radius: 6px 6px 0 0;
  min-height: 12%;
  position: relative;
}
.report-detail__chart-bar::after {
  content: attr(data-label);
  position: absolute;
  top: 100%;
  margin-top: 6px;
  /* True center-under-bar regardless of bar width: anchor the
     pseudo-element's center to the bar's center via translate. */
  left: 50%;
  transform: translateX(-50%);
  width: max(100%, 60px);
  font-size: 10px;
  color: var(--rd-text-dim);
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  pointer-events: none;
}
.report-detail__chart-block[data-source="poll"] .report-detail__chart-bar {
  background: linear-gradient(180deg, var(--rd-poll), rgba(6, 182, 212, 0.32));
}
.report-detail__chart-block[data-source="discussion"] .report-detail__chart-bar {
  background: linear-gradient(180deg, var(--rd-discussion), rgba(96, 165, 250, 0.32));
}
.report-detail__chart-block[data-source="follow"] .report-detail__chart-bar {
  background: linear-gradient(180deg, var(--rd-follow), rgba(249, 115, 22, 0.32));
}

/* ── Bottom format toolbar (fixed pill) ──────── */
.report-detail__fmt-bar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--dark, rgba(15, 15, 28, 0.96)) var(--light, rgba(255, 255, 255, 0.98));
  border: 1px solid var(--rd-border-strong);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
}
.report-detail__fmt-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--rd-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.18s, background 0.18s;
}
.report-detail__fmt-btn:hover { color: var(--rd-text-primary); background: rgba(255, 255, 255, 0.04); }
.report-detail__fmt-btn svg { width: 15px; height: 15px; }
.report-detail__fmt-sep { width: 1px; height: 18px; background: var(--rd-border-subtle); margin: 0 4px; }
.report-detail__fmt-btn--insert {
  width: auto;
  padding: 0 12px;
  gap: 6px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(168, 85, 247, 0.10));
  border-color: var(--rd-accent-border);
  color: var(--rd-accent);
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.report-detail__fmt-btn--insert:hover { box-shadow: 0 0 16px rgba(168, 85, 247, 0.30); background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(168, 85, 247, 0.14)); }
.report-detail__fmt-btn[aria-pressed="true"] {
  color: var(--rd-accent);
  background: rgba(168, 85, 247, 0.16);
}
/* The bottom toolbar pill grew enough buttons to need horizontal
   scrolling on narrow viewports — keep it on one line and let the
   browser scroll inside the pill instead of clipping. */
.report-detail__fmt-bar {
  max-width: calc(100vw - 32px);
  overflow-x: auto;
  scrollbar-width: none;
}
.report-detail__fmt-bar::-webkit-scrollbar { display: none; }

/* ── Floating selection toolbar (text-selection bubble) ─── */
.report-detail__sel-bubble {
  position: fixed;
  z-index: 65;
  display: none;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 12px;
  background: var(--dark, rgba(15, 15, 28, 0.98)) var(--light, rgba(255, 255, 255, 0.99));
  border: 1px solid var(--rd-border-strong);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
  transform: translate(-50%, -100%);
  /* Set by JS via top/left inline style; reserve a default placement
     so the bubble doesn't flash at 0,0 before the first selection. */
  top: -200px;
  left: 0;
}
.report-detail__sel-bubble[data-open="true"] { display: inline-flex; }
.report-detail__sel-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--rd-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.15s, background 0.15s;
}
.report-detail__sel-btn:hover { color: var(--rd-text-primary); background: rgba(255, 255, 255, 0.06); }
.report-detail__sel-btn svg { width: 13px; height: 13px; }
.report-detail__sel-btn[aria-pressed="true"] {
  color: var(--rd-accent);
  background: rgba(168, 85, 247, 0.16);
}

/* ── Chart block actions (settings + trash) ──── */
.report-detail__chart-top { position: relative; }
.report-detail__chart-actions {
  position: absolute;
  top: -4px;
  right: -4px;
  display: inline-flex;
  gap: 4px;
}
.report-detail__chart-action {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rd-border-subtle);
  color: var(--rd-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.report-detail__chart-action:hover { color: var(--rd-text-primary); background: rgba(255, 255, 255, 0.08); }
.report-detail__chart-action svg { width: 13px; height: 13px; }
.report-detail__chart-action--danger:hover { color: #ef4444; border-color: rgba(239, 68, 68, 0.32); background: rgba(239, 68, 68, 0.10); }

/* ── Outline swap (chart-type picker) ────────── */
.report-detail__outline-swap { gap: 14px; }
.report-detail__outline-swap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.report-detail__outline-swap-title-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.report-detail__outline-swap-eyebrow {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rd-accent);
}
.report-detail__outline-swap-title { font-size: 13px; font-weight: 700; color: var(--rd-text-primary); }
.report-detail__outline-swap-close {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid var(--rd-border-subtle);
  color: var(--rd-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.report-detail__outline-swap-close svg { width: 12px; height: 12px; }
.report-detail__outline-swap-list { display: flex; flex-direction: column; gap: 6px; }
.report-detail__swap-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--rd-border-subtle);
  background: rgba(255, 255, 255, 0.02);
  color: var(--rd-text-muted);
  text-align: left;
  cursor: pointer;
}
.report-detail__swap-opt:hover { background: rgba(255, 255, 255, 0.04); color: var(--rd-text-primary); }
.report-detail__swap-opt[aria-selected="true"] {
  background: var(--rd-accent-bg);
  border-color: var(--rd-accent-border);
  color: var(--rd-accent);
}
.report-detail__swap-opt-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.20);
  color: var(--rd-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.report-detail__swap-opt-icon svg { width: 14px; height: 14px; }
.report-detail__swap-opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.report-detail__swap-opt-label { font-size: 12px; font-weight: 700; color: inherit; }
.report-detail__swap-opt-hint { font-size: 10.5px; color: var(--rd-text-dim); }

/* ── Chart canvas variants ───────────────────── */
.report-detail__chart-canvas--bar { /* default already styled above */ }
.report-detail__chart-canvas--pie {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;
  gap: 24px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
}
.report-detail__chart-pie {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: conic-gradient(var(--rd-follow) 0 65%, rgba(255, 255, 255, 0.08) 65% 100%);
  box-shadow: 0 0 24px rgba(249, 115, 22, 0.18);
}
/* Legend layout: a single 3-column grid spanning every row so the
   swatch / label / percentage columns line up across rows (1, 2, 3
   stack uniformly, percentages stack uniformly). `justify-content: end`
   right-aligns the entire grid in the legend column so the swatch +
   label + percent triad hugs the right side, never invading the pie
   disc on the left. Each `.report-detail__chart-pie-row` is just a
   visual grouping with `display: contents` so its children flow into
   the grid as direct grid items. */
.report-detail__chart-pie-legend {
  display: grid;
  grid-template-columns: 14px minmax(auto, 200px) auto;
  column-gap: 8px;
  row-gap: 10px;
  justify-content: end;
  align-items: center;
}
.report-detail__chart-pie-row {
  display: contents;
  font-size: 12px;
  color: var(--rd-text-muted);
}
.report-detail__chart-pie-row > span:not(.report-detail__chart-pie-swatch) {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  font-size: 12px;
  color: var(--rd-text-muted);
}
.report-detail__chart-pie-row > strong {
  text-align: right;
  font-weight: 700;
  /* Extra padding on top of the 8px column-gap → ~20px visual gap
     between the label and the percent. */
  padding-left: 12px;
  font-size: 12px;
}
.report-detail__chart-pie-row strong { color: var(--rd-text-primary); font-weight: 700; }
.report-detail__chart-pie-swatch { width: 14px; height: 14px; border-radius: 4px; }
.report-detail__chart-pie-swatch--a { background: var(--rd-follow); }
.report-detail__chart-pie-swatch--b { background: rgba(255, 255, 255, 0.18); }

/* LDA topic canvas — discussion-only chart type. Vertical stack of
   topics, each row showing the weight % + a proportional bar + the
   top-5 keywords with their TF scores. Mirrors the mockup's
   `.block-lda` styling. */
.report-detail__chart-canvas--lda {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 14px;
  /* Reset the default bar-canvas fixed height — LDA stacks topics
     vertically and must grow with the topic count instead of being
     clipped (or overflowing into the next block) at 240px. No inset
     background — same reasoning as the network canvas, the chart
     card's own surface already gives the visual frame. */
  height: auto;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.report-detail__lda-topic {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.report-detail__lda-topic-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.report-detail__lda-topic-id {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rd-text-muted);
}
.report-detail__lda-topic-weight {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--rd-discussion);
  letter-spacing: 0.04em;
}
.report-detail__lda-topic-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.report-detail__lda-topic-bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--rd-discussion), rgba(168, 85, 247, 0.5));
  border-radius: 3px;
}
.report-detail__lda-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.report-detail__lda-kw {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.18);
  font-size: 12.5px;
  color: var(--rd-text-primary);
}
.report-detail__lda-kw em {
  font-style: normal;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  color: var(--rd-discussion);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* TF-IDF canvas — reuses the generic chart-table base. Right-aligned
   rank/score columns differentiate it visually from the plain Table
   variant. */
.report-detail__chart-canvas--tfidf {
  /* Reset the default bar-canvas flex layout — TF-IDF is a single
     full-width <table>, not a row of vertical bars. */
  display: block;
  padding: 0;
  background: transparent;
  height: auto;
}
.report-detail__tfidf-rank-h { width: 60px; }
.report-detail__tfidf-rank { font-variant-numeric: tabular-nums; color: var(--rd-text-dim); }
.report-detail__tfidf-score-h { width: 90px; text-align: right; }
.report-detail__tfidf-score {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  color: var(--rd-discussion);
}

/* Text-network canvas — SVG graph with co-occurrence nodes / edges.
   No inner background; the SVG sits transparently inside the chart
   card so the card's own color (light or dark themed) shows through
   without a grey inset rectangle. */
.report-detail__chart-canvas--network {
  border-radius: 10px;
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: auto;
}
.report-detail__network-svg {
  width: 100%;
  height: 300px;
  display: block;
}
/* Force-set network viz colors. The SVG generator writes inline
   `style="fill: …; stroke: …"` on every node + edge, so the only way
   to retro-fix figures already saved in a report body is with
   `!important` here. Tuned for ON-SCREEN viewing — lines are visible
   but not saturated. The PDF / print pipeline has its own further-
   muted overrides inside `@media print`. */
.report-detail svg line.report-detail__network-edge,
.report-detail__network-edge {
  stroke: rgba(168, 85, 247, 0.35) !important;
  stroke-width: 1 !important;
  stroke-linecap: round !important;
}
.report-detail svg circle.report-detail__network-node,
.report-detail__network-node {
  stroke-width: 1.2 !important;
  fill: rgba(168, 85, 247, 0.55) !important;
  stroke: rgba(168, 85, 247, 0.85) !important;
}
.report-detail__network-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 600;
  fill: var(--rd-text-primary);
  text-anchor: middle;
  pointer-events: none;
}
.report-detail__network-stats {
  display: flex;
  gap: 18px;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rd-text-dim);
  justify-content: center;
}
.report-detail__network-stats strong {
  color: var(--rd-text-primary);
  font-weight: 700;
  margin-right: 4px;
}

.report-detail__chart-canvas--table {
  /* Reset the flex bar-canvas layout so the table is a single full-width
     block child instead of being squeezed into a flex slot. */
  display: block;
  padding: 0;
  background: transparent;
  height: auto;
}
.report-detail__chart-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  /* Without `table-layout: fixed` the browser auto-sizes columns by
     content — a very long option label can squeeze the count/percent
     columns down to one character wide, and a very short label leaves
     them with too much whitespace. Fix the data columns and let the
     first column take the rest. */
  table-layout: fixed;
}
.report-detail__chart-table th,
.report-detail__chart-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--rd-border-subtle);
  vertical-align: top;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.report-detail__chart-table th:nth-child(2),
.report-detail__chart-table td:nth-child(2),
.report-detail__chart-table th:nth-child(3),
.report-detail__chart-table td:nth-child(3) {
  width: 90px;
  text-align: right;
  white-space: nowrap;
}
/* TextList canvas — subjective-answer chart. Same base styling as
   the TF-IDF table (rank + content), but the content column wraps. */
.report-detail__chart-canvas--textlist {
  display: block;
  padding: 0;
  background: transparent;
  height: auto;
}
.report-detail__chart-canvas--textlist .report-detail__chart-table {
  table-layout: auto;
}
.report-detail__chart-canvas--textlist .report-detail__chart-table th:nth-child(2),
.report-detail__chart-canvas--textlist .report-detail__chart-table td:nth-child(2) {
  width: auto;
  text-align: left;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.report-detail__textlist-rank-h,
.report-detail__textlist-rank {
  width: 48px !important;
  text-align: right !important;
  color: var(--rd-text-dim);
  font-family: 'Orbitron', sans-serif;
  font-size: 10.5px;
}
.report-detail__textlist-cell {
  line-height: 1.55;
}

/* TF-IDF table has its own column shape (Rank / Term / Score). */
.report-detail__chart-canvas--tfidf .report-detail__chart-table {
  table-layout: auto;
}
.report-detail__chart-canvas--tfidf .report-detail__chart-table th:nth-child(2),
.report-detail__chart-canvas--tfidf .report-detail__chart-table td:nth-child(2),
.report-detail__chart-canvas--tfidf .report-detail__chart-table th:nth-child(3),
.report-detail__chart-canvas--tfidf .report-detail__chart-table td:nth-child(3) {
  width: auto;
  text-align: left;
  white-space: normal;
}
.report-detail__chart-table th {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--rd-text-dim);
}
.report-detail__chart-table td { color: var(--rd-text-primary); }
.report-detail__chart-table tbody tr:last-child th,
.report-detail__chart-table tbody tr:last-child td { border-bottom: none; }
.report-detail__outline-swap-hint { font-size: 10.5px; color: var(--rd-text-dim); padding-top: 4px; }

/* ── Slash autocomplete popup ────────────────── */
/* Doc area needs `position: relative` so the slash popup inside it
   uses doc-scroll-relative absolute positioning (and scrolls with the
   content as the user types beyond the viewport). */
.report-detail__doc { position: relative; }
.report-detail__slash-pop {
  position: absolute;
  z-index: 70;
  min-width: 280px;
  max-width: 360px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: var(--dark, rgba(15, 15, 28, 0.98)) var(--light, rgba(255, 255, 255, 0.98));
  border: 1px solid var(--rd-border-strong);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.report-detail__slash-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rd-border-subtle);
}
.report-detail__slash-pop-heading {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rd-accent);
}
.report-detail__slash-pop-hint { font-size: 10px; color: var(--rd-text-dim); }
.report-detail__slash-pop-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  overflow-y: auto;
}
.report-detail__slash-pop-empty {
  padding: 10px;
  text-align: center;
  font-size: 11px;
  color: var(--rd-text-dim);
}
.report-detail__slash-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--rd-text-muted);
}
.report-detail__slash-item:hover,
.report-detail__slash-item[aria-selected="true"] {
  background: var(--rd-accent-bg);
  color: var(--rd-text-primary);
}
.report-detail__slash-item-title { font-size: 13px; font-weight: 600; color: var(--rd-text-primary); }
.report-detail__slash-item-meta { font-size: 10.5px; color: var(--rd-text-dim); }
.report-detail__xf-chips--slash { margin-top: 4px; }

/* === src/features/social/pages/reward/user/components/reward_history_section === */
.rewards-arena .reward-history {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.rewards-arena .reward-history__empty {
  padding: 28px 18px;
  border: 1px dashed var(--border-subtle);
  border-radius: 14px;
  background: var(--bg-glass);
  color: var(--text-dim);
  text-align: center;
  font-size: 13px;
}
.rewards-arena .reward-history__head {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
  gap: 12px;
  padding: 0 18px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.rewards-arena .reward-history__col--point,
.rewards-arena .reward-history__col--date {
  text-align: right;
}
.rewards-arena .reward-history__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rewards-arena .reward-history__row {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--bg-glass);
  transition: border-color 120ms ease, transform 120ms ease;
}
.rewards-arena .reward-history__row:hover {
  border-color: var(--border-strong);
}
.rewards-arena .reward-history__cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rewards-arena .reward-history__cell-label {
  display: none;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.rewards-arena .reward-history__cell-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rewards-arena .reward-history__cell--action .reward-history__cell-value {
  color: var(--text-muted);
  font-weight: 500;
}
.rewards-arena .reward-history__cell--point {
  align-items: flex-end;
}
.rewards-arena .reward-history__cell--date {
  align-items: flex-end;
}
.rewards-arena .reward-history__cell-value--date {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}
.rewards-arena .reward-history__point {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.rewards-arena .reward-history__point small {
  font-size: 10px;
  font-weight: 600;
  margin-left: 3px;
  opacity: 0.7;
}
.rewards-arena .reward-history__point--in { color: var(--accent-gold); }
.rewards-arena .reward-history__point--out { color: var(--accent-coral); }

.rewards-arena .reward-history__loadmore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  margin-top: 4px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--bg-glass);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.rewards-arena .reward-history__loadmore:hover:not(:disabled) {
  border-color: rgba(252, 179, 0, 0.25);
  background: var(--bg-glass-hover);
  color: var(--accent-gold);
}
.rewards-arena .reward-history__loadmore:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.rewards-arena .reward-history__loadmore svg { width: 13px; height: 13px; }

@media (max-width: 640px) {
  .rewards-arena .reward-history__head { display: none; }
  .rewards-arena .reward-history__row {
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    padding: 14px;
  }
  .rewards-arena .reward-history__cell-label { display: inline-block; }
  .rewards-arena .reward-history__cell--space {
    grid-column: 1 / -1;
  }
  .rewards-arena .reward-history__cell--space .reward-history__cell-value {
    white-space: normal;
    word-break: break-word;
  }
  .rewards-arena .reward-history__cell--action {
    grid-column: 1 / -1;
  }
  .rewards-arena .reward-history__cell--point,
  .rewards-arena .reward-history__cell--date {
    align-items: flex-start;
  }
  .rewards-arena .reward-history__cell--date {
    text-align: left;
  }
}




/* === src/features/spaces/pages/report/views/detail/figure-caption === */
/* Per-figure caption — editable label in the style of a publishable
   "그림 1. ..." / "표 1. ..." line. Lives inside each `<figure>` (charts)
   or each `<table>` (via the native `<caption>` element).
   The figure / table itself is contenteditable=false; the caption
   element overrides to true so it's the only editable surface. */
.report-detail__chart-caption {
  margin: 14px auto 0;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--rd-text-muted);
  text-align: center;
  outline: none;
  caret-color: var(--rd-accent);
  transition: color 0.18s;
  /* Keep the element clickable even when empty so the placeholder
     hint is reachable on hover/tap. Without this an empty `<figcaption>`
     collapses to 0 height. */
  min-height: 1.6em;
  display: block;
}
.report-detail__chart-caption:focus { color: var(--rd-text-primary); }
.report-detail__chart-caption:empty::before,
.report-detail__chart-caption:has(>br:only-child)::before {
  content: attr(data-placeholder);
  color: var(--rd-text-dim);
  font-style: italic;
}
.report-detail__chart-caption:focus:empty::before { color: var(--rd-text-dim); }

/* Native <caption> on report tables — top-left aligned per the
   spec/mockup. The placeholder pattern is the same as the figcaption. */
.report-detail .ratel-editor .re-content table > caption.re-table-caption {
  caption-side: top;
  text-align: left;
  padding: 6px 4px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--rd-text-muted);
  outline: none;
  caret-color: var(--rd-accent);
  font-weight: 500;
  /* Same min-height trick — empty <caption> would collapse to 0px
     and never get a click target for the placeholder. */
  min-height: 1.6em;
}
.report-detail .ratel-editor .re-content table > caption.re-table-caption:focus {
  color: var(--rd-text-primary);
}
.report-detail .ratel-editor .re-content table > caption.re-table-caption:empty::before,
.report-detail .ratel-editor .re-content table > caption.re-table-caption:has(>br:only-child)::before {
  content: attr(data-placeholder);
  color: var(--rd-text-dim);
  font-style: italic;
}

@media print {
  .report-detail__chart-caption {
    color: #222;
    font-size: 11px;
    padding: 6px 0 0;
    margin-top: 8px;
  }
  /* Hide the placeholder in print when the user didn't fill it in. */
  .report-detail__chart-caption:empty,
  .report-detail__chart-caption:has(>br:only-child) { display: none; }
  .report-detail .ratel-editor .re-content table > caption.re-table-caption {
    color: #222;
    font-size: 11px;
  }
  .report-detail .ratel-editor .re-content table > caption.re-table-caption:empty,
  .report-detail .ratel-editor .re-content table > caption.re-table-caption:has(>br:only-child) {
    display: none;
  }
}


/* === src/features/spaces/pages/report/views/detail/table-layout === */
/* Stable column widths inside report tables. Default `table-layout:
   auto` lets browsers size columns by content width, which leaves
   irregular column boundaries when cells are sparse (mostly &nbsp;).
   `table-layout: fixed` distributes columns evenly so drag-selecting
   cells aligns to visible rectangles. */
.report-detail .ratel-editor .re-content table {
  table-layout: fixed;
  width: 100%;
}
.report-detail .ratel-editor .re-content table td,
.report-detail .ratel-editor .re-content table th {
  word-break: break-word;
  vertical-align: top;
}

/* === src/views/index — single-screen fit (mobile only) ===============
   The arena is meant to be one screen, but on a 360x640 phone its content
   ran ~197px past the viewport, so the page scrolled and the tab row read as
   a half-cut strip. Measured on the device by scrolling the region to its end
   and diffing the two screenshots.

   The reduction is in COMPONENT SIZE — icon buttons, the card's logo, stat
   tiles, chips, CTA — not in the whitespace between things. An earlier pass
   shaved padding and margins instead; it reclaimed the pixels but the tab row
   ended up flush against both screen edges and read as broken. Space between
   elements is what makes the layout legible, so it is the last thing to go.

   Everything is inside `@media (max-width: 768px)` and scoped to
   `.home-arena--standalone`, so desktop web is untouched.
   ==================================================================== */
@media (max-width: 768px) {
  /* The caption repeats the selected tab sitting right beneath it. */
  .home-arena--standalone .section-label {
    display: none;
  }

  /* The four pills were ~41px wider than the row. `justify-content: center`
     spills an overflowing flex line out BOTH sides equally, which ate the
     28px side padding and left "HOT SPACES" starting 8px from the screen
     edge — it read as a missing margin, but it was overflow. Shrink the
     pills until the line fits and the padding comes back on its own. */
  .home-arena--standalone .section-tabs {
    gap: 4px;
  }
  .home-arena--standalone .section-tab {
    padding: 5px 6px;
    font-size: 8px;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  /* Topbar icon buttons: 42 -> 34, glyph 18 -> 15. */
  .home-arena--standalone .hud-btn {
    width: 34px;
    height: 34px;
  }
  .home-arena--standalone .hud-btn svg {
    width: 15px;
    height: 15px;
  }
  .home-arena--standalone .arena-topbar__logo {
    width: 32px;
    height: 32px;
  }

  /* Card: shrink its contents rather than its breathing room. */
  .home-arena--standalone .space-card {
    padding: 16px 16px 14px;
  }
  .home-arena--standalone .space-card__logo {
    width: 36px;
    height: 36px;
  }
  .home-arena--standalone .space-card__title {
    font-size: 15px;
  }
  .home-arena--standalone .space-card__desc {
    font-size: 12px;
  }
  .home-arena--standalone .space-stat {
    padding: 6px 5px;
  }
  /* `nowrap` matters more than the size here: "4 quests" was wrapping to a
     second line, which made the whole stat row a line taller than it needed
     to be. */
  .home-arena--standalone .space-stat__value {
    font-size: 13px;
    white-space: nowrap;
  }
  .home-arena--standalone .action-chip {
    padding: 3px 8px;
    font-size: 9px;
  }
  .home-arena--standalone .space-card__cta {
    padding: 7px 14px;
  }

  /* Carousel breathing room stays; only the oversized track padding that
     exists for desktop hover-scaling comes down. */
  .home-arena--standalone .home-arena__scroll .carousel-track {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  /* 32px of padding around an 8px dot strip is desktop proportion. */
  .home-arena--standalone .carousel-dots {
    padding: 8px 0 10px;
  }
  .home-arena--standalone .space-card {
    gap: 12px;
  }

  /* The two HUD stat cards side by side instead of stacked, with their icon
     scaled to match. */
  .home-arena--standalone .bottom-bar {
    display: grid;
    /* Back to an even split. Shifting the ratio only moved the problem from
       one card to the other — widen the right and "YOUR BALANCE" clips,
       widen the left and "0 ACTIVE SPACES" clips. An even split with type
       sized to the LONGEST string fits both: at 96px of text width per card,
       "HOT RIGHT NOW" needs ~76px at 8px and "0 ACTIVE SPACES" ~92px at
       8.5px. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    /* Desktop's 14/22 vertical padding is the last thing between the row and
       the screen edge; the row keeps its side padding. */
    padding: 8px 28px 12px;
  }
  .home-arena--standalone .bottom-bar .hud-stat {
    padding: 7px 9px;
    gap: 8px;
    min-width: 0;
  }
  .home-arena--standalone .bottom-bar .hud-stat__value {
    font-size: 8.5px;
    letter-spacing: 0;
  }
  .home-arena--standalone .bottom-bar .hud-stat__body {
    min-width: 0;
  }
  .home-arena--standalone .bottom-bar .hud-stat__icon {
    width: 26px;
    height: 26px;
  }
  /* Same wrap problem as the stat tiles: at half width "YOUR BALANCE" and
     "HOT RIGHT NOW" broke onto a second line and took the row with them.
     With wrapping off they have to fit the column instead, so both lines
     clip rather than spill past the card edge — which is how "YOUR BALANCE"
     and "0 ACTIVE SPACES" each took a turn hanging outside. */
  .home-arena--standalone .bottom-bar .hud-stat__label,
  .home-arena--standalone .bottom-bar .hud-stat__value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Sized so the full strings render — the ellipsis above is a guard for
     longer future copy, not the intended look. "YOUR BALANCE" needs ~69px of
     the 81px its column gives it; "0 ACTIVE SPACES" ~103px of 111px. */
  .home-arena--standalone .bottom-bar .hud-stat__label {
    font-size: 8px;
    letter-spacing: 0.04em;
  }
  /* Short screens (landscape, split-screen, the 427px-tall QVGA profile).
     The card's own content is the floor, so the room has to come out of the
     chrome around it — the "— SPACES —" divider is pure decoration and the
     tab row directly under it already names the section. */
  @media (max-height: 620px) {
    .home-arena--standalone .section-label { display: none; }
    .home-arena--standalone .home-arena__scroll .carousel-track {
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .home-arena--standalone .carousel-dots { padding: 6px 0 4px; }
    .home-arena--standalone .bottom-bar { padding: 6px 8px; }
    .home-arena--standalone .space-card { padding: 12px 14px; gap: 8px; }
    .home-arena--standalone .space-card__desc { -webkit-line-clamp: 2; }
    /* Measured at 360x480 the topbar alone is 104px — the brand row plus a
       wrapped row of HUD buttons — against a 480px screen. It is the single
       largest block, so it is where the room actually is. */
    .home-arena--standalone .arena-topbar { padding: 6px 10px; gap: 6px; }
    .home-arena--standalone .hud-btn { width: 28px; height: 28px; }
    .home-arena--standalone .hud-btn svg { width: 14px; height: 14px; }
    .home-arena--standalone .arena-topbar__logo { width: 26px; height: 26px; }
    .home-arena--standalone .section-tabs { gap: 4px; }
  }
  /* Tighter tier for the genuinely tiny profiles — landscape phones and the
     427px-tall QVGA definition. The action chips duplicate what the quest
     count in the stats row already reports, and the excerpt is the one
     block that degrades gracefully to a single line. */
  @media (max-height: 500px) {
    .home-arena--standalone .space-card__chips { display: none; }
    .home-arena--standalone .space-card__desc { -webkit-line-clamp: 1; }
    .home-arena--standalone .space-card { gap: 6px; }
  }
  /* Below ~420px of usable height the remaining 40px has to come from the
     furniture around the card. NOTE this threshold is the app's REAL
     viewport, which is 72dp shorter than the device's screen — Android's
     24dp status bar plus its 48dp navigation bar. A 427dp-tall device gives
     the WebView 355dp, which is why measuring against the device size kept
     saying "fits" while the phone showed a scrollbar. */
  /* 500, not 420. The threshold is the CSS VIEWPORT, and this app is
     edge-to-edge: `100dvh` is the whole 427dp screen even though only ~355dp
     of it is usable (the status and navigation bars are subtracted later, as
     `env(safe-area-inset-*)` padding on `:root`). Sizing the query to the
     usable height meant it never matched on the device it was written for.
     500 viewport ~= 428 usable. */
  @media (max-height: 500px) {
    .home-arena--standalone .bottom-bar { padding: 4px 8px; gap: 4px; }
    .home-arena--standalone .bottom-bar .hud-stat { padding: 3px 6px; }
    .home-arena--standalone .bottom-bar .hud-stat__icon { display: none; }
    .home-arena--standalone .carousel-dots { padding: 3px 0 2px; }
    .home-arena--standalone .home-arena__scroll .carousel-track {
      padding-top: 4px;
      padding-bottom: 4px;
    }
    .home-arena--standalone .space-card { padding: 10px 12px; gap: 5px; }
    .home-arena--standalone .section-tabs { gap: 3px; }
  }
}

/* The SocialLayout outlet (`.social-scroll`) pads its child: `p-5` /
   `max-tablet:p-3` / `max-mobile:p-2`. An arena sized to the full viewport
   therefore ends up (2 x padding) taller than the space it was given, and
   the outlet scrolls by exactly that much — measured 16px on a 360x640
   phone and 40px at tablet width. Publishing the padding as a variable lets
   a full-height arena subtract it without hard-coding the layout's
   breakpoints in its own rule. Arenas outside this layout inherit nothing
   and fall back to 0. Keep in sync with `features/social/layout.rs`. */
.social-scroll { --social-pad: 20px; }

/* Always reserve the scrollbar's gutter on the outlet that actually scrolls.
   `body` is `overflow: hidden`, so the document never scrolls — this element
   does (`overflow-auto` in features/social/layout.rs), which is why putting
   this on `:root` did nothing.

   Without it the layout twitches whenever a page's content crosses the
   viewport height: on the team member page, switching from the 소유자 tab
   (one row, no scroll) to 멤버 (seven rows, scroll) took 16px for the
   scrollbar and every panel reflowed narrower. The reserved strip just shows
   the page background, so a short page ends 16px earlier instead. */
.social-scroll { scrollbar-gutter: stable; }
@media (max-width: 900px) { .social-scroll { --social-pad: 12px; } }
@media (max-width: 500px) { .social-scroll { --social-pad: 8px; } }

/* Tablet-width fixes for the team arena. Above 768px it falls back to the
   desktop layout, which has two problems on a tablet-sized screen that
   desktop never shows:

   1. `min-height: 100vh` ignores the outlet's padding, so the page scrolls
      by exactly 2 x that padding — measured 24px at 800-900px wide. Capped
      at 900px so the desktop web build is left exactly as it is.
   2. "190 ON PAGE" is `white-space: nowrap` with `overflow: visible`, so at
      130% system font it does not ellipsis — it spills 13px into the next
      stat and overlaps it. The qualifier is redundant next to the LIKES /
      COMMENTS label above it, which is why the phone rules already drop it. */
@media (min-width: 769px) and (max-width: 900px) {
  .team-arena {
    min-height: calc(100vh - 2 * var(--social-pad, 0px));
  }
}
@media (max-width: 900px) {
  .team-arena .hud-stat__value small { display: none; }
}

/* === team arena — single-screen fit (mobile only) ====================
   The team home reuses `.home-arena`, but WITHOUT the `--standalone`
   modifier, so none of the standalone compaction above reached it. On a
   360x640 phone that left a large dead band between "TEAM POSTS" and the
   post card: the card carries `min-height: 440px` and the carousel track
   30/36px of vertical padding, both sized for desktop.

   Same approach as the standalone home — shrink the components, leave the
   spacing between them alone. Inside `@media (max-width: 768px)` and scoped
   to `.team-arena`, so desktop web is untouched.
   ==================================================================== */
@media (max-width: 768px) {
  /* Own the box, exactly like `.arena` and `.home-arena--standalone`.
     `flex-shrink: 0` alone pinned the sticky topbar (the arena stopped
     being squashed) but handed the overflow to `.social-scroll`, so the
     page scrolled instead — trading one symptom for the other. Binding the
     arena to the visible area removes both: nothing outside it can scroll,
     and the topbar has a scrollport to stick to. `100%` rather than
     `100dvh` because `:root` already carries the safe-area insets. */
  .team-arena {
    /* Anchor to the viewport, not to a percentage chain. Measured: at a
       360x480 viewport `body` came out 549px — TALLER than the screen —
       because on mobile `body` is content-driven (tailwind flips it to
       `overflow: auto` under 900px). Every `height: 100%` below it then
       resolved against content instead of the screen, which is why neither
       the `min-height: 0` chain nor the grid row would shrink. Same fix and
       same reason as `.post-arena` and `.composer-arena`: a viewport-
       relative height is always definite. `--kb-inset` is the soft-keyboard
       height app.rs publishes on <html>. */
    height: calc(
      100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) -
        var(--kb-inset, 0px) - 2 * var(--social-pad, 0px)
    );
    min-height: 0;
    max-height: calc(
      100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) -
        var(--kb-inset, 0px) - 2 * var(--social-pad, 0px)
    );
    /* `auto`, not `hidden`. Everything below is sized to fit a phone in one
       screen, but a viewport smaller than the card's own irreducible content
       (320px-wide phones, 130% system font, landscape, the unfolded Fold)
       cannot fit it — and there `hidden` silently ate the READ SPACE button.
       Scrolling is the correct outcome; the topbar is `position: fixed`, so
       it stays put either way. */
    overflow-y: auto;
    overflow-x: hidden;
    /* Under 768px THIS is the element that scrolls — not `.social-scroll`,
       which the desktop layout uses. Measured on a 360dp emulator: the team
       member page lost 8px of content width the moment the list overflowed
       (소유자 tab, 1 row → panel ended at 343.5px; 멤버 tab, 7 rows → 335.5px),
       because the scrollbar took the space. Reserving the gutter here keeps
       both tabs at the narrow width, so switching tabs no longer reflows the
       page. The same declaration on `.social-scroll` covers desktop. */
    scrollbar-gutter: stable;
  }
  /* The carousel region takes whatever is left and, if a long post still
     does not fit, scrolls inside itself — a contained scroll rather than
     the whole page sliding under the header. */
  .team-arena .home-arena {
    height: 100%;
    min-height: 0;
    /* `visible`, not `hidden`. When the card is at its `min-content` floor
       and still taller than the feed row (a post with a thumbnail on a 600px
       screen), `hidden` cut it here — above the card's own box, so the card
       looked sliced with no scrollbar anywhere. Letting it spill hands the
       overflow to `.team-arena`, which scrolls. */
    overflow: visible;
    display: grid;
    /* Grid, not a nested-flex `min-height: 0` chain. That chain had to hold
       through five levels (arena → content → home-arena → feed → carousel);
       one link that refused to shrink pushed the bottom bar off screen,
       which is what kept happening on device even when the harness agreed
       it fit. Grid states it directly: intro, label and bottom bar take the
       height they need, the feed row takes the rest. `minmax(0, 1fr)` — not
       plain `1fr` — is what lets that row go below its content height. */
       `minmax(min-content, 1fr)` — the floor is the feed's own content, so
       the row gives back space until the card is at its minimum and then
       stops, handing the overflow to `.team-arena` above (which scrolls)
       instead of clipping the card's footer. Plain `minmax(0, 1fr)` had no
       floor, which is how the CTA disappeared. */
    grid-template-rows: auto auto minmax(min-content, 1fr) auto;
  }
  /* A definite height chain, so the card's `max-height: 100%` has something
     to resolve against: wrapper takes the leftover space, the track fills
     the wrapper, the card is capped by the track. Without this the track was
     content-sized and `100%` meant nothing — the card kept its full height
     and pushed the bottom bar off a short screen. */
  /* `visible`, not `hidden`: a flex/grid item only gets an automatic
     content-based minimum size while its overflow is visible. With `hidden`
     that floor collapses to 0 and the card is squeezed past its content.
     The track clips its own horizontal scroll, so nothing needs the clip. */
  .team-arena .carousel-wrapper {
    /* `height: 100%` made this a fixed-size grid item, which zeroed the
       min-content contribution the row's `minmax(min-content, 1fr)` is
       supposed to read — the row collapsed to 115px against a 279px card.
       Stretching (the grid default) gives the row the card's real floor. */
    /* `auto`, not 0 — an explicit 0 overrides the automatic content-based
       minimum the row's `minmax(min-content, 1fr)` needs to read, which is
       what left the row at 115px while the card painted over the bottom
       bar below it. */
    min-height: auto;
    overflow: visible;
    /* `safe` centering: centre while it fits, but never push content past
       the start edge when it doesn't. Plain `center` overflowed equally in
       both directions, so the card climbed over the team intro above it. */
    justify-content: safe center;
  }
  .team-arena .carousel-track {
    height: 100%;
    /* NOT 0. The track is `overflow-x: auto; overflow-y: hidden` — that
       hidden axis silently CUTS whatever does not fit vertically, and with a
       zero floor a 355px-tall viewport squeezed the track to 115px against
       279px of card: the stats, the hashtags and READ SPACE were not
       scrolled out of view, they were erased. `min-content` makes the track
       hold the card, so the overflow travels up to `.team-arena`, which
       scrolls. */
    min-height: min-content;
  }
  /* 440px of forced card height is what pushed the card to the bottom of
     the screen and opened the gap above it. Let it size to its content. */
  .team-arena .post-card {
    min-height: 0;
    /* Wider, not narrower: at 260px the Korean body text wrapped to more
       lines and the card grew TALLER than it did at 300. Height is the
       constrained axis here, so trade width for lines. */
    width: 300px;
    padding: 12px 14px 10px;
    /* 5, not 8. Six gaps at 8px is 48px — the largest single item in the
       card's irreducible floor, and every pixel of that floor comes straight
       out of the thumbnail (which is the only elastic block). */
    gap: 5px;
  }
  .team-arena .post-card__title {
    font-size: 15px;
  }
  /* The card can never be taller than the room left for it. Everything in it
     except the description is fixed height, so the description absorbs the
     difference: it takes what is left and shows however many lines fit.
     That is what makes the whole page fit on one screen without either
     clipping the bottom bar or introducing a scrollbar — on a short screen
     the reader simply sees fewer lines of the excerpt. */
  /* NOT `max-height: 100%`. That capped the card at the track's height and,
     since the card is `overflow: hidden`, anything past the cap was cut —
     which is exactly how the READ SPACE button vanished on a short screen
     (and again at 130% system font, where the fixed rows alone outgrow the
     cap). The description below is what absorbs the difference; when even a
     zero-line description does not fit, the card keeps its real height and
     `.team-arena` scrolls rather than swallowing the footer. */
  .team-arena .post-card {
    /* Shrink to fit, but stop at the card's own content. `max-height: 100%`
       alone cut the footer off (the card is `overflow: hidden`), and dropping
       the cap entirely was worse — the card then could not shrink at all, so
       a post with a thumbnail pushed straight off the screen. The pair is
       what's correct: the cap makes it fit, `min-content` stops the squeeze
       before READ SPACE is reached, and past that `.team-arena` scrolls. */
    /* Sized by the track, not by a percentage. `max-height: 100%` silently
       did nothing here: the track's height comes from a grid row via a
       `height: 100%` chain, and a percentage max-height against an
       indefinite chain resolves to `none` — which is why the card kept its
       full natural height and spilled out of the feed row. Stretching the
       flex item makes the track's real height the card's height, with no
       percentage to resolve. */
    /* A cap, not `none`. The card is stretched by the track so it fills the
       feed row, which is what makes it fit a short screen — but on a tall
       narrow viewport (a phone in a resized browser window, a foldable) that
       same stretch blew it up to well over a thousand pixels with a huge
       empty middle. 460px is the design height; past that the card stays put
       and the leftover space becomes margin.
       A px value on purpose: `100%` here resolves against a grid-derived
       height chain and silently computes to `none`. */
    /* Square by default, taller only when the content needs it.
       `aspect-ratio` sets the baseline (a 300px-wide card is 300px tall, the
       shape the design wants); `min-height: min-content` is what lets a long
       post override it instead of overflowing. The cap keeps a very long one
       from running off a tall screen — the thumbnail below is the elastic
       part that gives way first. */
    aspect-ratio: 1 / 1;
    min-height: min-content;
    max-height: 460px;
    /* `min-content`, not 0. `align-items: stretch` on the track is what sizes
       the card, and with a zero floor a 427px-tall screen squashed it to the
       badge row and clipped everything under it. The floor stops the squeeze
       at the card's own content; past that the overflow travels up to
       `.team-arena`, which scrolls. */
    min-height: min-content;
    height: auto;
  }
  .team-arena .carousel-track {
    /* `center`, not `stretch`. Stretching made every card as tall as the
       track, which is why a short post left a void between its hashtags and
       READ SPACE while the home feed's cards looked right. The card's own
       aspect ratio decides its height now. */
    align-items: center;
    /* ...except for a post with no thumbnail. Stretching is what lets the
       thumbnail grow into the leftover space; a card without one has nothing
       elastic in it, so the stretch just opened a tall void between the
       hashtags and READ SPACE (the footer is `margin-top: auto`). Sizing
       those to their content is also what makes the home feed's cards look
       right — the team card was the odd one out.

       `:has()` needs Android WebView 105+ (2022). On anything older the
       selector simply doesn't match and the card keeps today's stretched
       behaviour, so this degrades to the status quo rather than breaking. */
    /* Cap the TRACK, not the card. The card is sized by stretching to the
       track, which is what lets the thumbnail grow — capping the card itself
       clamps that stretch and leaves the card pinned to the top of the row.
       Capping the track keeps the stretch intact and, because the wrapper is
       `justify-content: safe center`, the capped track (and the card in it)
       ends up vertically centred with the leftover space split above and
       below. ~470 = the 460px design card height plus the track's padding. */
    max-height: 470px;
  }
  /* The "— TEAM POSTS —" divider is decoration and costs 33px of the ~310px
     the card actually gets. Without it the thumbnail renders at a usable
     size instead of a sliver; the card underneath is self-evidently the
     team's posts. */
  .team-arena .home-section-label { display: none; }
  /* Below ~420px of usable height (the app's real viewport — 72dp less than
     the device screen, for Android's status + navigation bars) the card's
     own content no longer fits the one-screen grid at all. Forcing it anyway
     left the card overlapping the bottom bar. Drop the fixed-viewport model
     here and let the page stack and scroll normally: nothing is cut, nothing
     overlaps, and only this size scrolls. */
  /* 500, not 420. The threshold is the CSS VIEWPORT, and this app is
     edge-to-edge: `100dvh` is the whole 427dp screen even though only ~355dp
     of it is usable (the status and navigation bars are subtracted later, as
     `env(safe-area-inset-*)` padding on `:root`). Sizing the query to the
     usable height meant it never matched on the device it was written for.
     500 viewport ~= 428 usable. */
  @media (max-height: 500px) {
    .team-arena {
      height: auto;
      max-height: none;
      overflow: visible;
    }
    .team-arena .home-arena {
      display: block;
      height: auto;
      overflow: visible;
    }
    .team-arena .carousel-wrapper,
    .team-arena .carousel-track {
      height: auto;
    }
  }
  /* The chrome around the card was taking ~305px of a 624px arena, which is
     what squeezed the thumbnail down to a 22px strip. Trim the two blocks
     that carry no content of their own — the bottom bar's padding and the
     intro's bottom margin — rather than shrinking the card further. */
  .team-arena .home-bottom-bar { padding: 4px 14px 8px; gap: 6px; }
  .team-arena .home-bottom-bar__row { gap: 5px; }
  .team-arena .home-browse-btn { padding: 8px; }
  .team-arena .home-bottom-bar__row > .hud-stat { padding: 4px 6px; }
  .team-arena .team-intro { padding: 0 16px 8px; }
  .team-arena .carousel-dots { padding-bottom: 6px; }
  .team-arena .post-card__desc {
    font-size: 12px;
    line-height: 1.4;
    /* `0 1 auto`: start at the text's own height (capped at ~3 lines), never
       grow, and — the part that matters — be allowed to shrink. `1 1 auto`
       left a floor so the card never got smaller; `1 1 0` collapsed the
       excerpt to nothing even when there was room. This shows as much of the
       excerpt as fits and gives the space back when the screen is short. */
    flex: 0 1 auto;
    min-height: 0;
    max-height: 3.9em;
    overflow: hidden;
  }
  /* Everything else keeps its size — they are the parts that must stay
     readable and tappable. */
  .team-arena .post-card__top,
  .team-arena .post-card__title,
  .team-arena .post-card__stats,
  .team-arena .post-card__chips,
  .team-arena .post-card__footer {
    flex-shrink: 0;
  }
  .team-arena .post-card__stats {
    gap: 8px;
    padding: 4px 0;
  }
  .team-arena .post-card__stat-value {
    font-size: 15px;
  }
  .team-arena .post-card__chips {
    gap: 4px;
  }
  .team-arena .post-card__chip {
    padding: 3px 8px;
    font-size: 9px;
  }
  .team-arena .post-card__cta {
    padding: 6px 12px;
    font-size: 9px;
  }
  .team-arena .carousel-track {
    padding-left: calc(50vw - 150px);
    padding-right: calc(50vw - 150px);
  }
  .team-arena .carousel-track {
    padding-top: 10px;
    padding-bottom: 12px;
    padding-left: calc(50vw - 130px);
    padding-right: calc(50vw - 130px);
  }
  .team-arena .carousel-dots {
    padding: 0 28px 10px;
  }
  /* `min-height: 320px` on the feed region reserved desktop-sized space
     even when the (now shorter) card needed far less. */
  .team-arena .home-feed-region {
    min-height: 0;
    overflow: hidden;
  }
  .team-arena .home-bottom-bar {
    padding: 8px 28px 12px;
  }
  /* The three counters were `flex: 1 1 160px` in a 304px-wide row, so they
     wrapped to three stacked cards and ate about a third of the screen —
     which is why the post card had almost nothing left. One row of three,
     with the CREATE POST button spanning underneath. */
  .team-arena .home-bottom-bar__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .team-arena .home-bottom-bar__row > .home-browse-btn {
    grid-column: 1 / -1;
  }
  /* The category row is removed on mobile, with the divider above it. It is
     the one part of this screen whose height has no ceiling — a team keeps
     adding categories and the row keeps wrapping, taking the space straight
     out of the post card. Everything it offers is filtering, which is a
     secondary action on a phone; the card is the primary content. */
  .team-arena .home-bottom-bar__row--filters {
    display: none;
  }
  .team-arena .home-bottom-bar__row > .hud-stat {
    flex: none;
    gap: 6px;
    padding: 6px 8px;
  }
  /* The icon is decoration and it costs ~30px of a ~96px column — which is
     exactly the margin by which "COMMENTS" was still ellipsing to "COMMEN…"
     even at 7.5px, and by much more once Android's font-size setting scales
     it. Dropping it gives the label the room to render in full instead. */
  .team-arena .home-bottom-bar__row > .hud-stat .hud-stat__icon {
    display: none;
  }
  .team-arena .home-bottom-bar__row > .hud-stat .hud-stat__label,
  .team-arena .home-bottom-bar__row > .hud-stat .hud-stat__value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* "COMMENTS" is the longest of the three and was clipping to "COMME…" at
     a third of the row. */
  .team-arena .home-bottom-bar__row > .hud-stat .hud-stat__label {
    font-size: 7.5px;
    letter-spacing: 0.02em;
  }
  .team-arena .home-bottom-bar__row > .hud-stat .hud-stat__value {
    font-size: 11px;
  }
  /* Number only. In a third of the row "190 ON PAGE" clipped to "190 ON",
     and the qualifier adds nothing the label above it doesn't already say. */
  .team-arena .home-bottom-bar__row > .hud-stat .hud-stat__value small {
    display: none;
  }

  /* ── Card内 배분 ── The CTA was escaping the card's bottom edge: with the
     card capped at the space available and the excerpt already collapsed to
     zero, the remaining fixed rows still added up to more than the cap, so
     the last one spilled out and got clipped by the card's own
     `overflow: hidden`. Shrink those rows so the card's minimum actually
     fits inside the cap. */
  .team-arena .post-card__title {
    font-size: 15px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* The footer is the card's call to action; it is the last thing that may
     be dropped. Pin it so the excerpt gives up its space first — before this
     the button was simply clipped away by the card's own `overflow`. */
  .team-arena .post-card__footer {
    margin-top: auto;
    flex-shrink: 0;
  }
  /* A post with a thumbnail is the case the excerpt-shrinking alone could not
     cover: the image is a fixed 140px block, so on a card that also has a
     two-line title it pushed the button out even with the excerpt at zero.
     Let the image be the elastic element instead — it shrinks to whatever is
     left and keeps its crop via `object-fit: cover`. */
  .team-arena .post-card__thumb {
    height: auto;
    /* Basis 0, not auto. With `auto` the flex basis is the image's natural
       140px, and that natural height is also what the card's `min-content`
       floor is computed from — so the floor included the thumbnail and the
       card could not shrink at all. A zero basis keeps the thumbnail out of
       the floor: it grows into whatever space is left (capped at 140px) and
       gives all of it back when the screen is short. */
    flex: 1 1 0;
    /* 0, not 48px. The thumbnail is the one block that can disappear without
       losing information — the title, stats and READ SPACE cannot. A 48px
       floor was enough to push the footer out on a 600px screen. */
    min-height: 0;
    max-height: 140px;
  }
  .team-arena .post-card__stats {
    gap: 6px;
    padding: 6px 0;
  }
  .team-arena .post-card__stat-value {
    font-size: 14px;
  }
  .team-arena .post-card__stat-label {
    font-size: 8px;
  }
  .team-arena .post-card__chips {
    gap: 4px;
  }
  .team-arena .post-card__chip {
    padding: 2px 7px;
    font-size: 8.5px;
  }
  .team-arena .post-card__footer {
    padding-top: 6px;
  }
  .team-arena .post-card__cta {
    padding: 5px 11px;
    font-size: 8.5px;
  }
}

/* === short-viewport fallback (all arenas) ==========================
   Every arena on mobile locks itself to the viewport so its header can pin
   and the page fits one screen. Below ~500px of viewport height that is not
   achievable: the content's own irreducible height exceeds the screen. What
   the arenas did instead was CLIP it — `overflow: hidden` on the arena root
   and on `.carousel-track` erases content rather than scrolling it, so the
   card's stats, hashtags and its CTA button silently disappeared, and where
   a floor did hold the card it painted over the bar below.

   Release the lock at this size: everything stacks in normal flow and the
   page scrolls. Fitting one screen is the goal, never at the cost of content
   the user cannot reach.

   The threshold is the CSS VIEWPORT. This app is edge-to-edge, so `100dvh`
   is the whole screen even though ~72dp of it belongs to the status and
   navigation bars (subtracted later as `env(safe-area-inset-*)` padding on
   `:root`). 500px of viewport is about 428px of usable height.

   `.post-arena` and `.composer-arena` are deliberately excluded — they own a
   keyboard-aware scroll model of their own. */
@media (max-height: 500px) {
  body .arena,
  body .home-arena,
  body .home-arena--standalone,
  body .team-arena,
  body .team-arena__content,
  body .analyze-arena,
  body .analyze-arena > .arena,
  body .reports-arena,
  body .space-general-arena,
  body .space-panels-arena,
  body .space-files-arena,
  body .drafts-arena,
  body .rewards-arena,
  body .connections-arena,
  body .onboarding-arena,
  body .essence-arena,
  body .admin-arena {
    height: auto;
    max-height: none;
    min-height: 0;
    /* NOT `overflow: visible`. That releases the horizontal clip too, and
       these arenas park off-canvas panels (settings, filters) just outside
       their right edge — without the clip they became reachable by sideways
       scrolling and the page slid. `clip` on X keeps them hidden while
       `visible` on Y is what lets the content that no longer fits reach the
       page scroller instead of being erased. */
    overflow-x: clip;
    overflow-y: visible;
  }
  /* Regions that were sized against the (now released) arena. */
  body .home-arena__scroll,
  body .carousel-wrapper,
  body .carousel-track,
  body .report-carousel,
  body .report-carousel__viewport,
  body .report-carousel__track,
  body .split,
  body .builder-list,
  body .home-feed-region {
    height: auto;
    max-height: none;
    min-height: 0;
  }
  /* The horizontal carousels keep their own X scroll; only the Y clip goes. */
  body .carousel-track,
  body .report-carousel__track {
    overflow-y: auto;
  }
  body .post-card,
  body .space-card,
  body .report-card,
  body .report-card-large {
    height: auto;
    max-height: none;
  }
}

/* === src/views/legal_close — X button on the legal pages ==============
   Privacy policy / terms / child safety render as a bare scrolling document
   with no chrome. In the mobile WebView that left no way back at all, so this
   sits above the text as the one exit.

   `position: fixed` + the top safe-area inset, not `sticky`: the page's own
   scroll container is the element this button lives in, and a sticky child of
   a scroller that starts at its top has nothing to stick to on the first
   paint. Fixed also keeps it reachable after the reader has scrolled several
   screens into the document, which is exactly when they want out. */
.legal-close {
  --legal-close-fg: var(--dark, #f0f0f5) var(--light, #12121a);

  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: calc(12px + env(safe-area-inset-left));
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The glyph is 18px but the box stays 40px: a bare icon that small is under
     the 44px minimum touch target, and the hit area is the part the reader
     actually needs. No background, border or blur — just the mark. */
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--legal-close-fg);
  cursor: pointer;
  transition: color 0.15s;
}
.legal-close:hover {
  color: #fcb300;
}
.legal-close svg {
  width: 18px;
  height: 18px;
}
/* The heading is centred and full-width; on a phone the button would sit on
   top of it, so give the header room rather than moving the button. */
@media (max-width: 768px) {
  .legal-close { width: 36px; height: 36px; }
  .legal-close svg { width: 16px; height: 16px; }
}

/* === src/common/components/popup — description width ==================
   The popup box sizes to its content, so an unbounded one-line description
   sets the modal's width: the 400px report dialog stretched to ~880px, the
   width of the sentence. Cap it so the text wraps inside the box instead.
   400px matches the `w-100` most dialog bodies use.

   Lives here rather than as a `max-w-[400px]` utility because
   `assets/tailwind.css` is pre-generated and `dx serve` does not regenerate
   it — an arbitrary-value class added in RSX renders with no rule behind it
   (verified: zero `.max-w-*` rules exist in the built stylesheet). */
.popup-description {
  max-width: 400px;
}

/* === src/common/components/popup — soft-keyboard avoidance =============
   Android's WebView shrinks only the VISUAL viewport when the keyboard
   opens; the layout viewport and `dvh` stay at full height. A modal centred
   with `items-center` against that full height therefore keeps its lower
   half underneath the keyboard, and an input down there is typed blind (the
   CREATE TEAM dialog's team-id field). `--kb-inset` is the keyboard height
   app.rs publishes on <html> from `visualViewport`; subtracting it makes the
   centring — and the box's height cap — respect the area still on screen. */
.popup-backdrop {
  /* Size and place the backdrop from the VISUAL viewport -- the area actually
     on screen -- rather than computing `100dvh - keyboard`.  That arithmetic
     was wrong on Android: the layout viewport already excludes some system
     UI, so `innerHeight - vv.height` under-reported the keyboard by ~52px and
     the dialog drifted up, leaving a gap above the keyboard and pushing the
     title towards the status bar. `translateY` re-anchors it because
     `position: fixed` follows the LAYOUT viewport, which the WebView scrolls
     to reveal a focused field. */
  height: var(--vv-height, 100dvh);
  transform: translateY(var(--vv-offset-top, 0px));
}
.popup-box-capped {
  max-height: calc(var(--vv-height, 100dvh) * 0.9);
}
/* When the keyboard forces the cap, the box must SCROLL what does not fit --
   `overflow-hidden` (set for the rounded corners) silently truncated it, so
   the third field was unreachable: measured ch == sh == 360 on the inner
   scroller, i.e. nothing to scroll, while the box clipped 50px of form.
   Scoped to touch devices so the desktop web popup is untouched. */
@media (pointer: coarse) {
  .popup-box-capped {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}